/* Doc Vault — design system.
Two text colors, one accent (interactive/focus only), 5-step type scale.
Hierarchy comes from position, weight, and spacing — not color or size. */
:root {
/* color — the entire palette */
--ink: #1a1b1e; /* all primary text + primary buttons */
--mut: #6a6c72; /* all secondary text (5.0:1 on white) */
--line: #e7e6e2; /* all borders */
--paper: #fafaf9; /* app background */
--card: #ffffff; /* surfaces */
--well: #f1f1ee; /* recessed neutral fills (pills, icons) */
--accent: #4f4fd0; /* interactive accents + focus only */
/* controlled exception: tags and status dots may carry hue.
Three pairs, fixed saturation/lightness — nothing else uses them. */
--tag-green-bg: #e4f4ec; --tag-green-fg: #19694b;
--tag-amber-bg: #fbf0d7; --tag-amber-fg: #82570c;
--tag-blue-bg: #e9edf9; --tag-blue-fg: #3a5390;
/* dark (marketing) */
--dark: #0c0d10;
--dark-2: #15161b;
--dark-line: rgba(255,255,255,.09);
--dark-mut: #a3a5ad; /* the only secondary tone on dark */
/* type — the entire scale (dense: 14px body, 12.5px UI) */
--t-xs: 11px; /* mono kickers, pills, fine print */
--t-sm: 12.5px; /* UI rows, meta, secondary copy */
--t-md: 14px; /* body */
--t-lg: 17px; /* sub-heads, doc titles */
--t-xl: 21px; /* page titles */
/* shape — small radii; structure comes from hairlines, not shadows */
--r: 8px; /* containers (lists, panels, inputs) */
--r-sm: 6px; /* controls (buttons, tags, nav items) */
--hover: #f4f4f1; /* row hover */
--d-1: clamp(42px, 6.6vw, 76px); /* marketing hero */
--d-2: clamp(48px, 9vw, 96px); /* marketing step words */
--d-3: clamp(30px, 4.6vw, 46px); /* marketing band heads */
--sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, sans-serif;
--mono: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0; font-family: var(--sans); color: var(--ink);
background: var(--paper); font-size: var(--t-md); line-height: 1.5;
text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; }
::selection { background: #dddcf6; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.mono { font-family: var(--mono); }
.eyebrow {
font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .18em;
text-transform: uppercase; font-weight: 500;
}
.eyebrow .dot { margin-right: 6px; }
/* ============================== marketing (dark) */
.mk { background: var(--dark); color: #fff; }
.mk-hatch {
background-image:
radial-gradient(1200px 600px at 80% -10%, rgba(79,79,208,.14), transparent 60%),
repeating-linear-gradient(135deg, rgba(255,255,255,.022) 0 2px, transparent 2px 9px);
}
.mk-nav {
position: sticky; top: 0; z-index: 50;
background: rgba(12,13,16,.82); backdrop-filter: blur(12px);
border-bottom: 1px solid var(--dark-line);
}
.mk-nav-in { display: flex; align-items: center; gap: 28px; height: 64px; }
.logo { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: var(--t-lg); letter-spacing: -.02em; }
.logo svg { display: block; }
.mk-links { display: flex; gap: 22px; margin-left: 8px; font-size: var(--t-sm); color: var(--dark-mut); }
.mk-links a:hover { color: #fff; }
.mk-nav-cta { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.mk-nav-cta .signin { font-size: var(--t-sm); color: var(--dark-mut); padding: 8px 10px; }
.mk-nav-cta .signin:hover { color: #fff; }
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
border-radius: var(--r-sm); padding: 6px 14px; font-size: var(--t-sm); font-weight: 550;
border: 1px solid transparent; transition: transform .06s ease, background .15s, border-color .15s;
line-height: 1.45;
}
.btn:active { transform: scale(.98); }
/* marketing keeps its big rounded CTAs; density is an app decision */
.mk .btn { border-radius: 999px; padding: 11px 22px; font-size: 15px; font-weight: 600; }
.mk .btn.btn-sm { padding: 7px 14px; font-size: 13px; }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: #ececec; }
.btn-ghost-dark { border-color: rgba(255,255,255,.24); color: #fff; background: transparent; }
.btn-ghost-dark:hover { border-color: rgba(255,255,255,.5); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #2c2d33; }
.btn-ghost { border-color: var(--line); color: var(--ink); background: #fff; }
.btn-ghost:hover { border-color: #c9c8c2; }
.btn-sm { padding: 4px 10px; font-size: var(--t-sm); }
.btn-accent { background: var(--ink); color: #fff; }
.btn-accent:hover { background: #2c2d33; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .4; cursor: default; pointer-events: none; }
.hero { padding: 110px 0 70px; }
.hero h1 {
font-size: var(--d-1); line-height: 1.02; letter-spacing: -.035em;
font-weight: 750; margin: 22px 0 26px; max-width: 19ch;
}
.hero p.lede { font-size: var(--t-lg); color: var(--dark-mut); max-width: 52ch; line-height: 1.55; margin: 0 0 34px; font-weight: 400; }
.hero-cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.hero-cta .how { color: var(--dark-mut); font-size: var(--t-sm); margin-left: 6px; }
.hero-cta .how:hover { color: #fff; }
/* browser-chrome mockup */
.mock { background: #fff; color: var(--ink); border-radius: 18px; overflow: hidden;
box-shadow: 0 30px 80px rgba(0,0,0,.5); margin: 70px 0 0; }
.mock-bar { display: flex; align-items: center; gap: 6px; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.mock-bar .d { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.mock-bar .addr { font-family: var(--mono); font-size: var(--t-xs); color: var(--mut); margin-left: 10px; }
.mock-body { padding: 10px 0 4px; }
.mock-head { display: flex; justify-content: space-between; padding: 14px 26px 10px;
font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .14em; color: var(--mut); text-transform: uppercase; }
.mock-row { display: flex; justify-content: space-between; align-items: center;
padding: 13px 26px; border-top: 1px solid var(--line); }
.mock-row .t { font-weight: 600; font-size: var(--t-md); }
.mock-row .s { font-family: var(--mono); font-size: var(--t-xs); color: var(--mut); margin-top: 3px; }
.tag { font-family: var(--mono); font-size: var(--t-xs); padding: 2px 7px; border-radius: 4px;
white-space: nowrap; background: var(--well); color: var(--mut); }
.tag-filed { background: var(--tag-green-bg); color: var(--tag-green-fg); }
.tag-exp { background: var(--tag-amber-bg); color: var(--tag-amber-fg); }
.tag-ent { background: var(--tag-blue-bg); color: var(--tag-blue-fg); }
.step { padding: 110px 0 30px; }
.step h2 { font-size: var(--d-2); margin: 18px 0 26px; letter-spacing: -.04em; line-height: .95; font-weight: 760; }
.step p.lede { color: var(--dark-mut); font-size: var(--t-lg); max-width: 50ch; line-height: 1.6; font-weight: 400; }
.bullets { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px 28px;
margin: 34px 0 0; padding: 0; list-style: none; max-width: 620px; }
.bullets li { font-family: var(--mono); font-size: var(--t-sm); color: var(--dark-mut); }
.bullets li::before { content: "●"; font-size: 8px; vertical-align: 2px; margin-right: 10px; }
.ask-lines { margin-top: 36px; max-width: 640px; }
.ask-line { display: flex; gap: 26px; padding: 9px 0; font-family: var(--mono); font-size: var(--t-sm); }
.ask-line .k { color: var(--dark-mut); font-size: var(--t-xs); letter-spacing: .15em; min-width: 64px; padding-top: 2px; }
.ask-line .q { color: #fff; }
.sec-band { padding: 110px 0; }
.sec-band h2 { font-size: var(--d-3); letter-spacing: -.03em; line-height: 1.08; margin: 16px 0 20px; max-width: 24ch; font-weight: 730; }
.sec-band p { color: var(--dark-mut); max-width: 56ch; font-size: var(--t-md); line-height: 1.6; }
.sec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 44px; }
.sec-card { border: 1px solid var(--dark-line); border-radius: 16px; padding: 22px; background: var(--dark-2); }
.sec-card h3 { margin: 10px 0 8px; font-size: var(--t-md); }
.sec-card p { font-size: var(--t-sm); color: var(--dark-mut); margin: 0; max-width: none; }
.sec-card .mono-k { font-family: var(--mono); font-size: var(--t-xs); color: var(--dark-mut); letter-spacing: .12em; }
/* pricing (light band) */
.light-band { background: var(--paper); color: var(--ink); padding: 110px 0; }
.light-band h2 { font-size: var(--d-3); letter-spacing: -.03em; margin: 14px 0 14px; font-weight: 740; }
.light-band .sub { color: var(--mut); font-size: var(--t-md); }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; margin-top: 44px; }
.plan { border: 1px solid var(--line); border-radius: 20px; padding: 30px; background: #fff; position: relative; }
.plan.dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.plan .name { font-size: var(--t-md); font-weight: 600; }
.plan .price { font-size: var(--d-3); font-weight: 750; letter-spacing: -.03em; margin: 14px 0 2px; }
.plan .per { font-size: var(--t-sm); color: var(--mut); font-weight: 400; margin-left: 6px; }
.plan p.desc { font-size: var(--t-sm); color: var(--mut); min-height: 44px; }
.plan.dark p.desc { color: var(--dark-mut); }
.plan .btn { width: 100%; margin-top: 18px; }
.plan .rec { position: absolute; top: 20px; right: 22px; font-family: var(--mono); font-size: var(--t-xs);
letter-spacing: .16em; color: var(--dark-mut); }
.fine { margin-top: 26px; color: var(--mut); font-size: var(--t-sm); }
.fine a { text-decoration: underline; text-underline-offset: 3px; }
.mk-footer { border-top: 1px solid var(--dark-line); padding: 60px 0 70px; background: var(--dark); color: var(--dark-mut); }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 28px; }
.foot-grid h3 { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--dark-mut); margin: 0 0 14px; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; font-size: var(--t-sm); }
.foot-grid a:hover { color: #fff; }
.foot-brand p { font-size: var(--t-sm); max-width: 30ch; line-height: 1.55; margin-top: 14px; }
@media (max-width: 800px) {
.foot-grid { grid-template-columns: 1fr 1fr; }
.mk-links { display: none; }
}
/* comparison table */
.cmp { width: 100%; border-collapse: collapse; margin-top: 40px; font-size: var(--t-sm); }
.cmp th, .cmp td { text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--line); }
.cmp th { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--mut); font-weight: 500; }
.cmp td:first-child { color: var(--mut); }
.cmp td { font-weight: 500; }
.faq { margin-top: 60px; max-width: 760px; }
.faq details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq summary { font-weight: 600; font-size: var(--t-md); padding: 16px 0; cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.faq summary::after { content: "+"; color: var(--mut); font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq .a { color: var(--mut); font-size: var(--t-sm); padding-bottom: 18px; max-width: 64ch; }
/* prose pages (security, etc.) */
.prose-hero { padding: 90px 0 30px; }
.prose-hero h1 { font-size: var(--d-3); letter-spacing: -.03em; line-height: 1.08; margin: 16px 0; max-width: 22ch; font-weight: 740; }
.prose-hero p { color: var(--dark-mut); font-size: var(--t-lg); max-width: 56ch; font-weight: 400; }
.prose-body { padding: 30px 0 100px; }
.prose-sec { border-top: 1px solid var(--dark-line); padding: 38px 0; display: grid; grid-template-columns: 240px 1fr; gap: 30px; }
.prose-sec h2 { font-size: var(--t-lg); margin: 0; letter-spacing: -.01em; }
.prose-sec .k { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .14em; color: var(--dark-mut); text-transform: uppercase; }
.prose-sec p { color: var(--dark-mut); font-size: var(--t-md); margin: 0 0 12px; max-width: 62ch; line-height: 1.65; }
.prose-sec code { font-family: var(--mono); font-size: var(--t-sm); background: var(--dark-2); padding: 2px 7px; border-radius: 6px; color: #fff; }
@media (max-width: 720px) { .prose-sec { grid-template-columns: 1fr; gap: 8px; } }
/* feature grid page */
.featcat { margin: 50px 0 0; }
.featcat > h2 { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .18em; color: var(--dark-mut); margin: 0 0 18px; }
.featgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.featcard { border: 1px solid var(--dark-line); background: var(--dark-2); border-radius: 14px; padding: 20px; }
.featcard h3 { font-size: var(--t-md); margin: 0 0 7px; display: flex; gap: 8px; align-items: center; }
.featcard p { font-size: var(--t-sm); color: var(--dark-mut); margin: 0; line-height: 1.55; }
.paid-pill { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .1em; background: rgba(255,255,255,.08); color: var(--dark-mut); padding: 2px 8px; border-radius: 999px; }
/* ============================== app (light) — dense, linear, sidebar shell
Structure comes from hairlines and a persistent left rail, not floating
cards: content sits on white, lists are bordered containers with divided
rows, controls are compact rectangles. */
.app-shell { display: flex; min-height: 100vh; background: var(--card); }
/* left rail */
.side { width: 228px; flex: none; display: flex; flex-direction: column;
background: var(--paper); border-right: 1px solid var(--line);
padding: 10px 8px 10px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.side-brand { display: flex; align-items: center; padding: 4px 8px 10px; }
.side-brand .logo { font-size: 14px; gap: 8px; }
.side-brand svg { width: 20px; height: 20px; }
.side-new { display: flex; align-items: center; gap: 8px; width: 100%; border: 1px solid var(--line);
background: #fff; border-radius: var(--r-sm); padding: 6px 10px; font-size: var(--t-sm);
font-weight: 550; color: var(--ink); box-shadow: 0 1px 1px rgba(20,20,18,.04); margin-bottom: 2px; }
.side-new:hover { border-color: #c9c8c2; }
.side-search { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none;
border-radius: var(--r-sm); padding: 6px 10px; font-size: var(--t-sm); color: var(--mut); }
.side-search:hover { background: var(--hover); color: var(--ink); }
.side-search kbd { margin-left: auto; font-family: var(--mono); font-size: 10px; border: 1px solid var(--line);
background: #fff; border-radius: 4px; padding: 1px 5px; color: var(--mut); }
.side-sec { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--mut);
text-transform: uppercase; padding: 14px 10px 4px; }
.side-nav { display: flex; flex-direction: column; gap: 1px; margin-top: 2px; }
.side-nav a { display: flex; align-items: center; gap: 9px; padding: 4px 10px; border-radius: var(--r-sm);
font-size: var(--t-sm); font-weight: 500; color: var(--ink); min-height: 28px; }
.side-nav a:hover { background: var(--hover); }
.side-nav a.on { background: #ebebe7; font-weight: 600; }
.side-nav a .ic { width: 17px; color: var(--mut); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.side-nav a.on .ic { color: var(--ink); }
.side-nav a .ic.dot { width: 17px; }
.side-nav a .ic.dot::before { content: ""; width: 7px; height: 7px; border-radius: 3px; background: #d3d2cc; margin: 0 auto; }
.side-nav a.on .ic.dot::before { background: var(--ink); }
.side-nav a .tx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-nav a .n { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--mut); }
/* the vault selector's rows are POST buttons (the choice persists in the
session) — dressed to sit indistinguishably among the nav links above */
.side-nav form { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.side-nav button { display: flex; align-items: center; gap: 9px; padding: 4px 10px; border-radius: var(--r-sm);
font-size: var(--t-sm); font-weight: 500; color: var(--ink); min-height: 28px;
border: 0; background: none; width: 100%; text-align: left; font-family: inherit; cursor: pointer; }
.side-nav button:hover { background: var(--hover); }
.side-nav button.on { background: #ebebe7; font-weight: 600; }
.side-nav button .ic { width: 17px; color: var(--mut); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.side-nav button.on .ic { color: var(--ink); }
.side-nav button .ic.dot::before { content: ""; width: 7px; height: 7px; border-radius: 3px; background: #d3d2cc; margin: 0 auto; }
.side-nav button.on .ic.dot::before { background: var(--ink); }
.side-nav button .tx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-nav button .n { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--mut); }
/* the notification "needs you" count — a pill on the bell (side-nav + topbar) */
.nav-badge { margin-left: auto; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px;
background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 600; line-height: 17px;
text-align: center; }
.topbar-bell { position: relative; display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; border-radius: var(--r-sm); color: var(--mut); }
.topbar-bell:hover { background: var(--hover); color: var(--ink); }
.topbar-bell .nav-badge { position: absolute; top: -3px; right: -3px; margin: 0; }
.side-bottom { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); }
.side-user { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: var(--r-sm); margin-top: 2px; }
.side-user:hover { background: var(--hover); }
.side-user .who { min-width: 0; line-height: 1.25; }
.side-user .who b { display: block; font-size: var(--t-sm); font-weight: 550; }
.side-user .who span { display: block; font-size: 11px; color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; flex: none;
display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 650; letter-spacing: .02em; }
/* content column */
.content { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--card); }
.topbar { display: none; }
.app-main { width: 100%; max-width: 1000px; padding: 22px 36px 64px; }
.app-foot { border-top: 1px solid var(--line); margin-top: auto; padding: 9px 36px; display: flex;
justify-content: space-between; gap: 16px; font-size: 11.5px; color: var(--mut); }
.app-foot .lock { display: flex; gap: 7px; align-items: center; }
.demo-banner { display: flex; align-items: center; gap: 10px; background: var(--paper); border: 1px solid var(--line);
border-radius: var(--r-sm); padding: 6px 10px 6px 12px; font-size: var(--t-sm); margin-bottom: 16px; color: var(--ink); }
.demo-banner .btn { margin-left: auto; }
/* Global read-status banner (app_base) — informational, never alarming.
Two states share one row: amber "couldn't be read", and a neutral "reading…"
with a quiet accent progress bar. Built from design tokens, so it follows the
theme. */
.readbar { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line);
border-radius: var(--r-sm); padding: 8px 12px; margin-bottom: 16px;
font-size: var(--t-sm); color: var(--ink); }
.readbar[hidden] { display: none; }
.readbar .readbar-msg { min-width: 0; }
.readbar .readbar-act { margin-left: auto; margin-bottom: 0; }
.readbar.is-failed { background: var(--tag-amber-bg); border-color: #f0dca8; color: var(--tag-amber-fg); }
.readbar.is-failed .readbar-msg b { color: var(--tag-amber-fg); }
.readbar-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--tag-amber-fg); }
.readbar-close { flex: none; border: 0; background: none; color: inherit; font-size: 16px;
line-height: 1; padding: 2px 4px; cursor: pointer; opacity: .6; }
.readbar-close:hover { opacity: 1; }
.readbar.is-reading { background: var(--well); border-color: var(--line); }
.readbar-spin { width: 13px; height: 13px; flex: none; border-radius: 50%;
border: 2px solid var(--line); border-top-color: var(--accent);
animation: readbar-spin .8s linear infinite; }
.readbar-bar { margin-left: auto; width: 128px; height: 4px; flex: none;
background: var(--line); border-radius: 999px; overflow: hidden; }
.readbar-bar span { display: block; height: 100%; min-width: 0; background: var(--accent);
border-radius: inherit; transition: width .5s ease; }
@keyframes readbar-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.readbar-spin { animation: none; }
.readbar-bar span { transition: none; }
}
@media (max-width: 640px) { .readbar-bar { display: none; } }
.kicker { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; color: var(--mut); text-transform: uppercase; }
.h-page { font-size: var(--t-xl); letter-spacing: -.015em; margin: 3px 0 2px; font-weight: 650; }
.sub-mut { color: var(--mut); font-size: var(--t-sm); }
.askbox { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line);
border-radius: var(--r); padding: 3px 8px 3px 12px; margin: 12px 0 8px;
box-shadow: 0 1px 2px rgba(20,20,18,.03); transition: border-color .15s, box-shadow .15s; }
.askbox:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79,79,208,.10); }
.askbox svg { flex: none; color: var(--mut); }
.askbox input { flex: 1; border: 0; outline: 0; background: none; font-size: var(--t-md); padding: 8px 0; color: var(--ink); }
.askbox input::placeholder { color: var(--mut); opacity: .7; }
.askbox .ret { font-family: var(--mono); font-size: 10px; border: 1px solid var(--line); border-radius: 5px;
padding: 3px 6px; color: var(--mut); background: var(--paper); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 7px; background: #fff; border-radius: var(--r-sm);
padding: 3px 9px; font-size: var(--t-sm); color: var(--ink); border: 1px solid var(--line); }
.chip:hover { background: var(--hover); }
/* ask: live typeahead preview (the instant engine's quick answer + lexical doc
links). A subtle Spotlight-style prefill under the box — not the answer card. */
.suggest { border: 1px solid var(--line); border-radius: var(--r); background: #fff;
padding: 11px 13px; margin: -2px 0 10px; box-shadow: 0 6px 22px rgba(20,20,18,.07); }
.suggest[hidden] { display: none; }
.sug-answer + .sug-docs { margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line); }
.sug-label { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
color: var(--mut); margin-bottom: 7px; }
.sug-atext { font-size: var(--t-sm); line-height: 1.55; color: var(--ink); }
.sug-atext .cite { font-family: var(--mono); font-size: 10px; background: var(--well); border: 1px solid var(--line);
border-radius: 4px; padding: 0 5px; vertical-align: 2px; margin-left: 3px; color: var(--mut); }
.sug-atext .cite:hover { border-color: var(--ink); color: var(--ink); }
.sug-follow { margin-top: 5px; font-size: var(--t-xs); color: var(--mut); }
.sug-docs .rel-docs { gap: 6px; }
.promo { display: flex; gap: 12px; align-items: center; border: 1px solid var(--line); background: #fff;
border-radius: var(--r); padding: 9px 12px; margin: 14px 0; }
.promo .ic { width: 30px; height: 30px; border-radius: var(--r-sm); background: var(--well); color: var(--ink);
display: flex; align-items: center; justify-content: center; flex: none; }
.promo b { font-size: var(--t-sm); }
.promo p { margin: 1px 0 0; font-size: var(--t-sm); color: var(--mut); }
.promo .x { margin-left: auto; color: var(--mut); background: none; border: 0; font-size: 15px; padding: 6px; }
.vault-pills { display: flex; gap: 6px; margin: 14px 0 2px; flex-wrap: wrap; }
.vault-pill { display: inline-flex; gap: 7px; align-items: center; border-radius: var(--r-sm); padding: 3px 10px;
font-size: var(--t-sm); font-weight: 500; border: 1px solid var(--line); background: #fff; color: var(--mut); }
.vault-pill.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.vault-pill .dot { display: none; }
/* section heads: linear list headers with a hairline underneath */
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
margin: 24px 0 0; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.sec-head + .doc-list, .sec-head + .cards-2, .sec-head + .ent-grid, .sec-head + .linked { margin-top: 8px; }
.sec-head .more { font-size: var(--t-sm); color: var(--mut); }
.sec-head .more:hover { color: var(--ink); }
.cards-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
@media (max-width: 760px) { .cards-2 { grid-template-columns: 1fr; } }
.coll-card { display: flex; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--line);
border-radius: var(--r-sm); padding: 8px 10px; transition: background .12s; }
.coll-card:hover { background: var(--hover); }
.coll-card .ic { width: 26px; height: 26px; border-radius: 5px; background: var(--well); color: var(--mut);
display: flex; align-items: center; justify-content: center; flex: none; }
.coll-card b { font-size: var(--t-sm); font-weight: 550; display: block; }
.coll-card .meta { font-size: 11.5px; color: var(--mut); margin-top: 1px; }
.doc-list { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-top: 8px; }
.doc-row { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-top: 1px solid var(--line); min-height: 36px; }
.doc-row:first-child { border-top: 0; }
.doc-row:hover { background: var(--hover); }
.doc-row .fic { width: 26px; height: 26px; border-radius: 5px; border: 1px solid var(--line);
display: flex; align-items: center; justify-content: center; color: var(--mut); flex: none; background: #fff; }
.doc-row .fic svg { width: 14px; height: 14px; }
.doc-row .t { font-weight: 550; font-size: var(--t-sm); }
.doc-row .m { font-size: 11.5px; color: var(--mut); margin-top: 1px; }
.doc-row .right { margin-left: auto; font-size: var(--t-sm); color: var(--mut); white-space: nowrap; display: flex; gap: 10px; align-items: center; }
.empty { border: 1px dashed var(--line); background: #fff; border-radius: var(--r); padding: 22px 18px;
text-align: center; color: var(--mut); font-size: var(--t-sm); margin-top: 8px; }
.empty b { color: var(--ink); display: block; font-size: var(--t-sm); margin-bottom: 4px; }
.empty .star { font-size: 18px; display: block; margin-bottom: 8px; }
/* library table */
.tabs { display: flex; gap: 4px; margin: 12px 0; border-bottom: 1px solid var(--line); padding-bottom: 0; }
.tab { display: inline-flex; gap: 7px; align-items: center; border-radius: var(--r-sm) var(--r-sm) 0 0; padding: 6px 11px;
font-size: var(--t-sm); font-weight: 500; border: 0; background: none; color: var(--mut);
border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab:hover { color: var(--ink); }
.tab.on { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
.filterbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 0 0 10px; font-size: var(--t-sm); }
.filterbar .lab { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; color: var(--mut); margin-right: 2px; }
.filterbar select, .filterbar input[type=search] {
border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px 9px; font-size: var(--t-sm); background: #fff; color: var(--ink); }
.dtable-wrap { border: 1px solid var(--line); border-radius: var(--r); overflow: auto; background: #fff; }
.dtable-wrap table { width: 100%; border-collapse: collapse; min-width: 640px; }
.dtable-wrap th { text-align: left; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
text-transform: uppercase; color: var(--mut); font-weight: 500; padding: 7px 12px;
border-bottom: 1px solid var(--line); background: var(--paper); }
.dtable-wrap td { padding: 6px 12px; border-bottom: 1px solid var(--line); font-size: var(--t-sm); }
.dtable-wrap tr:last-child td { border-bottom: 0; }
.dtable-wrap tbody tr:hover { background: var(--hover); }
.typepill { font-family: var(--mono); font-size: var(--t-xs); background: var(--well); border: 1px solid var(--line);
padding: 2px 7px; border-radius: 4px; color: var(--mut); white-space: nowrap; }
/* the primary person a document is of — titles are type-only now, so the owner
rides alongside the title wherever a doc is listed */
.owner { font-size: var(--t-xs); color: var(--ink); white-space: nowrap; }
.owner::before { content: "◍"; margin-right: 4px; color: var(--mut); font-size: .9em; }
/* which vault a row lives in — only rendered in the all-vaults view when
there is more than one vault to tell apart */
.vaultpill { font-family: var(--mono); font-size: var(--t-xs); color: var(--mut); white-space: nowrap; }
.vaultpill::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 2px;
background: #d3d2cc; margin-right: 5px; vertical-align: 1px; }
.statdot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.statdot.filed { background: var(--tag-green-fg); }
.statdot.review { background: var(--tag-amber-fg); }
.statdot.processing { background: transparent; border: 1.5px solid var(--mut); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
/* library multi-select: the whole cell is the tap target; a sticky action bar
appears once anything is checked */
.dtable-wrap .selcell { width: 36px; padding-right: 0; cursor: pointer; }
.selcell input { display: block; width: 15px; height: 15px; margin: 0 auto;
accent-color: var(--ink); cursor: pointer; }
.selbar { position: sticky; bottom: 16px; z-index: 20; display: flex; align-items: center; gap: 8px;
width: max-content; max-width: 100%; margin: 14px auto 0; padding: 7px 8px 7px 14px;
background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
box-shadow: 0 10px 30px rgba(0,0,0,.14); font-size: var(--t-sm);
opacity: 0; transform: translateY(10px); pointer-events: none; transition: all .18s; }
.selbar.show { opacity: 1; transform: none; pointer-events: auto; }
.selbar .n { font-weight: 550; margin-right: 8px; white-space: nowrap; }
/* library pagination: appears only past one page of documents */
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 14px 0 4px; }
.pager-n { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .08em;
text-transform: uppercase; color: var(--mut); white-space: nowrap; }
/* doc page */
.crumb { display: flex; gap: 8px; align-items: center; font-size: var(--t-sm); color: var(--mut); margin-bottom: 2px; }
.crumb a:hover { color: var(--ink); }
.doc-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }
.doc-top h1 { font-size: var(--t-lg); letter-spacing: -.015em; margin: 0; margin-right: auto; font-weight: 650; }
.viewer { background: var(--well); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-bottom: 22px; }
/* PDFs and images both show a compact static preview (.imgprev below); the
interactive viewer opens fullscreen on demand. Legacy .vimg caps very tall
scans so they scroll rather than push the page. */
.viewer .vimg { display: block; background: #fff; text-align: center;
max-height: min(82vh, 900px); overflow: auto; }
.viewer .vimg img { width: 100%; max-width: 100%; height: auto; display: block; }
.viewer .vnone { padding: 40px; text-align: center; color: var(--mut); background: #fff; }
.viewer .vbar { display: flex; justify-content: space-between; padding: 7px 12px; font-family: var(--mono);
font-size: 10.5px; color: var(--mut); border-bottom: 1px solid var(--line); background: #fff; }
/* Page tabs for merged multi-image documents (front/back, extra pages). */
.page-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 12px 0; background: #fff; }
.page-tab { border: 1px solid var(--line); background: #fff; color: var(--mut); border-radius: 999px;
padding: 4px 14px; font-size: var(--t-xs); font-weight: 600; cursor: pointer;
transition: background .12s ease, color .12s ease; }
.page-tab:hover { color: var(--ink); }
.page-tab.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.page-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* "⇄ Reorder" flips the tabs into an explicit reorder mode: each tab gains
◀ ▶ nudge buttons and the button becomes Done. */
.pg-reorder { border: 1px dashed var(--line); background: #fff; color: var(--mut); border-radius: 999px;
padding: 4px 12px; font-size: var(--t-xs); font-weight: 600; cursor: pointer;
margin-left: auto; transition: color .12s ease; }
.pg-reorder:hover { color: var(--ink); }
.pg-reorder.primary { background: var(--ink); border-color: var(--ink); border-style: solid; color: #fff; }
.pg-reorder:disabled { opacity: .5; cursor: default; }
.pg-reorder:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.pg-slot { display: inline-flex; align-items: center; gap: 2px; }
.pg-nudge { border: 0; background: none; color: var(--mut); cursor: pointer; padding: 2px 3px;
font-size: 10px; line-height: 1; border-radius: 4px; }
.pg-nudge:hover:not(:disabled) { color: var(--ink); background: var(--line); }
.pg-nudge:disabled { opacity: .25; cursor: default; }
.pg-nudge:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
/* Compact, tappable image preview — opens the fullscreen lightbox. */
.imgprev { display: block; width: 100%; border: 0; margin: 0; padding: 14px; background: #fff;
cursor: zoom-in; position: relative; text-align: center; -webkit-tap-highlight-color: transparent; }
.imgprev img { display: inline-block; max-width: 100%; max-height: 360px; border-radius: var(--r-sm);
vertical-align: middle; box-shadow: 0 1px 6px rgba(0,0,0,.10); }
.imgprev-badge { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 5px;
padding: 4px 9px; border-radius: 999px; font-size: var(--t-xs); font-weight: 600;
color: #fff; background: rgba(20,22,28,.66); backdrop-filter: blur(2px);
opacity: .9; transition: opacity .12s ease; pointer-events: none; }
.imgprev:hover .imgprev-badge, .imgprev:focus-visible .imgprev-badge { opacity: 1; }
.imgprev:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
@media (max-width: 640px) { .imgprev img { max-height: 240px; } }
/* Fullscreen zoomable lightbox. */
body.lb-lock { overflow: hidden; }
.lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
background: rgba(8,10,14,.92); overscroll-behavior: contain; }
.lightbox[hidden] { display: none; }
.lb-img { max-width: 96vw; max-height: 92vh; touch-action: none; will-change: transform;
transform-origin: center center; user-select: none; -webkit-user-select: none;
-webkit-user-drag: none; }
.lb-close { position: fixed; top: max(14px, env(safe-area-inset-top)); right: 16px; z-index: 1001;
width: 44px; height: 44px; border: 0; border-radius: 999px; cursor: pointer;
font-size: 20px; line-height: 1; color: #fff; background: rgba(255,255,255,.14);
display: flex; align-items: center; justify-content: center; }
.lb-close:hover { background: rgba(255,255,255,.26); }
.lb-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Fullscreen PDF overlay: same lightbox chrome, an interactive iframe instead
of an ![]()
. The surrounding backdrop strip stays clickable for dismiss. */
.lb-frame { width: min(96vw, 1100px); height: 92vh; border: 0;
border-radius: var(--r-sm); background: #525659; }
/* "✂ Adjust" affordance in the viewer bar (image docs). */
.vbar-r { display: flex; align-items: center; gap: 12px; }
.vbar-btn { border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px;
padding: 2px 10px; font: inherit; font-weight: 600; cursor: pointer;
transition: background .12s ease; }
.vbar-btn:hover { background: var(--bg, #f4f4f2); }
.vbar-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Fullscreen corner editor: crop + perspective de-skew (document-scanner
style). Same overlay pattern as the lightbox. */
.adjuster { position: fixed; inset: 0; z-index: 1000; background: rgba(8,10,14,.94);
overscroll-behavior: contain; }
.adjuster[hidden] { display: none; }
.adj-canvas { position: absolute; inset: 0; touch-action: none; cursor: crosshair; }
.adj-hint { position: fixed; top: max(20px, env(safe-area-inset-top)); left: 50%;
transform: translateX(-50%); margin: 0; max-width: min(72vw, 46ch);
color: rgba(255,255,255,.75); font-size: var(--t-xs); text-align: center;
pointer-events: none; }
.adj-bar { position: fixed; left: 0; right: 0; bottom: max(18px, env(safe-area-inset-bottom));
display: flex; justify-content: center; gap: 12px; padding: 0 16px; }
.adj-btn { min-height: 44px; padding: 9px 22px; border: 0; border-radius: 999px; cursor: pointer;
font: inherit; font-weight: 600; color: #fff; background: rgba(255,255,255,.14); }
.adj-btn:hover { background: rgba(255,255,255,.26); }
.adj-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.adj-btn:disabled { opacity: .55; cursor: default; }
.adj-primary { background: #fff; color: #16181d; }
.adj-primary:hover { background: #e9e9e6; }
/* Filter strip above the action bar: None / Enhance / Grayscale / B&W. */
.adj-filters { position: fixed; left: 0; right: 0;
bottom: calc(max(18px, env(safe-area-inset-bottom)) + 58px);
display: flex; justify-content: center; gap: 8px; padding: 0 16px;
flex-wrap: wrap; }
.adj-filter { min-height: 36px; padding: 6px 16px; border: 1px solid rgba(255,255,255,.4);
border-radius: 999px; cursor: pointer; font: inherit;
font-size: var(--t-xs); font-weight: 600; color: #fff;
background: transparent; }
.adj-filter:hover { background: rgba(255,255,255,.14); }
.adj-filter:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.adj-filter.active { background: #fff; color: #16181d; border-color: #fff; }
/* .fchip is now the tap-to-copy / reveal HOOK on the field table's rows
(.ftable .frow carries the visuals; app.js queries .fchip) */
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; margin: 8px 0; }
.panel h3 { margin: 0 0 12px; font-size: var(--t-sm); }
/* progressive disclosure: an intent button ([data-reveal]) shows this hidden
chooser row. It always expands BELOW the tapped button (never beside it),
so the button stays put under the thumb. */
.reveal-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
background: #fff; border: 1px solid var(--line); border-radius: var(--r);
padding: 10px 12px; margin: 10px 0; animation: reveal-in .14s ease; }
.reveal-row[hidden] { display: none; }
.reveal-row form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 0; }
.reveal-row select { flex: 1; min-width: 0; max-width: 100%; min-height: 40px;
border: 1px solid var(--line); border-radius: 9px; padding: 8px 12px;
font-size: var(--t-sm); background: #fff; }
.reveal-row select:focus { border-color: var(--ink); outline: none; }
.reveal-x { border: 0; background: transparent; color: var(--mut); font-size: 14px; line-height: 1;
min-width: 40px; min-height: 40px; border-radius: var(--r-sm); cursor: pointer; }
.reveal-x:hover { color: var(--ink); background: var(--hover); }
@keyframes reveal-in { from { opacity: 0; transform: translateY(-3px); } }
/* narrow screens: the chooser row stacks — the select (its full label, no
longer squeezed to "is ano…") on one line, the search box on the next at
full width so its suggestion list has room, then the action button */
@media (max-width: 640px) {
.reveal-row { align-items: flex-start; }
.reveal-row form > select, .reveal-row form > .cbx { flex: 1 1 100%; }
}
/* searchable combobox (app.js data-combobox): a text input over a hidden id
field; the suggestion list drops under the input. Rows are 40px+ so thumbs
land, and the list scrolls rather than the page. */
.cbx { position: relative; flex: 1; min-width: 0; }
.reveal-row .cbx { min-width: 220px; }
.cbx input[type="text"] { width: 100%; min-height: 40px; border: 1px solid var(--line);
border-radius: 9px; padding: 8px 12px; font-size: var(--t-sm);
background: #fff; }
.cbx input[type="text"]:focus { border-color: var(--ink); outline: none; }
.cbx-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60;
margin: 0; padding: 4px; list-style: none; background: #fff;
border: 1px solid var(--line); border-radius: var(--r);
box-shadow: 0 10px 28px rgba(26,27,30,.10);
max-height: min(320px, 45vh); overflow-y: auto; overscroll-behavior: contain; }
.cbx-list[hidden] { display: none; }
/* an option: the title (never truncated — it wraps) with the owner beside it,
then a meta line of what tells same-titled documents apart: other linked
entities · type · made-on date · vault. Titles are type-only, so the meta
line is what distinguishes two "Global Entry" cards. */
.cbx-opt { min-height: 40px; padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer;
font-size: var(--t-sm); overflow-wrap: anywhere; }
.cbx-opt .h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cbx-opt .m { display: block; margin-top: 1px; font-size: var(--t-xs); color: var(--mut); }
.cbx-opt .k { font-family: var(--mono); }
.cbx-opt .ent { color: var(--ink); }
.cbx-opt mark { background: none; color: inherit; font-weight: 700; }
.cbx-opt:hover, .cbx-opt[aria-selected="true"] { background: var(--hover); }
.cbx-empty { padding: 10px 12px; color: var(--mut); font-size: var(--t-sm); }
.kv-edit { display: grid; grid-template-columns: 210px 1fr auto; gap: 6px 10px; align-items: center; }
.kv-edit label { font-size: var(--t-sm); color: var(--mut); }
.kv-edit input, .kv-edit select { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 5px 9px;
font-size: var(--t-sm); font-family: var(--mono); }
.kv-edit input.klab { font-family: var(--sans); color: var(--mut); }
.kv-edit input:focus, .kv-edit select:focus { border-color: var(--ink); color: var(--ink); outline: none; }
/* narrow screens: each field stacks — name/label on its own line, the value
with its remove button inline beneath it. No horizontal overflow; the
global ≤640px rule already lifts inputs to 16px so iOS doesn't zoom. */
@media (max-width: 640px) {
.kv-edit { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; }
.kv-edit label, .kv-edit input.klab { grid-column: 1 / -1; margin-top: 10px; }
.kv-edit > label:first-child { margin-top: 0; }
.kv-edit input, .kv-edit select { min-width: 0; width: 100%; padding: 9px 11px; }
.kv-edit .btn { min-height: 42px; padding-left: 13px; padding-right: 13px; }
}
.linked { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--line); border-radius: var(--r);
background: #fff; overflow: hidden; margin-top: 8px; }
.linked a, .linked .sub-mut { display: flex; gap: 10px; align-items: center; border-top: 1px solid var(--line);
padding: 7px 12px; background: #fff; }
.linked a:first-child, .linked .sub-mut:first-child { border-top: 0; }
.linked a:hover { background: var(--hover); }
.linked b { font-size: var(--t-sm); font-weight: 550; }
.linked .k { font-size: 11.5px; color: var(--mut); }
.linked .ic { width: 24px; height: 24px; font-family: var(--mono); font-size: var(--t-xs); border-radius: 5px;
background: var(--well); color: var(--mut); display: flex; align-items: center; justify-content: center; flex: none; }
/* an entity row that carries a "make primary" control: the anchor fills the
row, the star (or a plain chevron for non-people) sits at its trailing edge */
.linked-row { display: flex; align-items: center; border-top: 1px solid var(--line); background: #fff; }
.linked-row:first-child { border-top: 0; }
.linked-row > a { flex: 1; border-top: 0; }
.linked-row:hover { background: var(--hover); }
.linked-row:hover > a { background: transparent; }
.linked-row .linked-chev { margin-left: auto; padding: 0 12px; color: var(--mut); }
.linked-row form { display: flex; margin-left: auto; }
.linked-row .star { background: none; border: 0; cursor: pointer; font-size: 16px; line-height: 1;
padding: 8px 12px; color: var(--mut); }
.linked-row .star:hover { color: var(--ink); }
.linked-row .star.is-on { color: #e0a400; }
/* ask page */
.answer { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; margin: 12px 0; }
.answer .spark { width: 26px; height: 26px; border-radius: var(--r-sm); background: var(--ink); color: #fff;
display: flex; align-items: center; justify-content: center; float: left; margin-right: 12px; }
.answer .spark svg { width: 13px; height: 13px; }
.answer .atext { font-size: var(--t-md); line-height: 1.6; overflow: hidden; }
.answer .cite { font-family: var(--mono); font-size: 10px; background: var(--well); border: 1px solid var(--line);
border-radius: 4px; padding: 0 5px; vertical-align: 3px; margin-left: 3px; color: var(--mut); }
.answer .cite:hover { border-color: var(--ink); color: var(--ink); }
.answer .follow { margin-top: 10px; color: var(--ink); font-size: var(--t-sm); }
.answer .meta { margin-top: 12px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
text-transform: uppercase; color: var(--mut); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.answer .meta .stop { margin-left: auto; letter-spacing: 0; text-transform: none; }
.answer.model { border-color: #dcdbf2; background: linear-gradient(180deg, #fff, #fdfdff); }
.answer .thinking { color: var(--mut); animation: pulse 1.3s ease-in-out infinite; }
.answer .cursor { display: inline-block; width: 6px; height: 13px; margin-left: 3px; border-radius: 2px;
background: var(--ink); vertical-align: -2px; animation: pulse 1s ease-in-out infinite; }
.related { margin: 14px 0 4px; }
.rel-head { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
color: var(--mut); margin: 0 4px 8px; }
.rel-docs { display: flex; flex-wrap: wrap; gap: 6px; }
.rel-doc { display: inline-flex; align-items: center; gap: 8px; background: #fff; max-width: 100%;
border: 1px solid var(--line); border-radius: var(--r-sm); padding: 5px 10px; }
.rel-doc:hover { background: var(--hover); border-color: var(--ink); }
.rel-doc .t { font-weight: 550; font-size: var(--t-sm); white-space: nowrap; overflow: hidden;
text-overflow: ellipsis; max-width: 32ch; }
.rel-doc.cited { border-color: #dcdbf2; background: linear-gradient(180deg, #fff, #fdfdff); }
/* entities */
.ent-group { margin: 22px 0; }
.ent-group h2 { font-size: var(--t-sm); display: flex; gap: 8px; align-items: baseline; margin: 0 0 8px; }
.ent-group h2 .n { color: var(--mut); font-size: var(--t-sm); font-weight: 400; }
.ent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; margin-top: 8px; }
.ent-card { display: flex; gap: 9px; align-items: center; background: #fff; border: 1px solid var(--line);
border-radius: var(--r-sm); padding: 6px 10px; }
.ent-card:hover { background: var(--hover); }
.ent-card .ic { width: 24px; height: 24px; font-family: var(--mono); font-size: var(--t-xs); border-radius: 5px;
background: var(--well); color: var(--mut); display: flex; align-items: center; justify-content: center; flex: none; }
.ent-card b { font-size: var(--t-sm); font-weight: 550; }
.ent-card .meta { font-size: 11.5px; color: var(--mut); }
/* settings */
.set-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; margin-top: 20px; }
/* the content column must be able to shrink below its widest child, or a long
token/word pushes the whole page past the viewport (min-width:auto default) */
.set-grid > div { min-width: 0; }
.set-sec { overflow-wrap: anywhere; }
.set-nav { display: flex; flex-direction: column; gap: 1px; font-size: var(--t-sm); position: sticky; top: 20px; align-self: start; }
.set-nav a { padding: 5px 10px; border-radius: var(--r-sm); color: var(--mut); }
.set-nav a:hover { background: var(--hover); color: var(--ink); }
/* narrow screens: the sticky sidebar would ride over the sections — it becomes
a horizontally scrollable pill row above the content instead */
@media (max-width: 800px) {
.set-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.set-nav { position: static; flex-direction: row; gap: 6px; overflow-x: auto;
-webkit-overflow-scrolling: touch; scrollbar-width: none;
margin: 0 -16px; padding: 2px 16px 6px; }
.set-nav::-webkit-scrollbar { display: none; }
.set-nav a { flex: none; white-space: nowrap; padding: 8px 13px; color: var(--ink);
border: 1px solid var(--line); border-radius: 999px; background: #fff; }
}
.set-sec { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; margin-bottom: 10px; scroll-margin-top: 20px; }
.set-sec h2 { font-size: var(--t-md); margin: 0 0 3px; font-weight: 600; }
.set-sec .d { font-size: var(--t-sm); color: var(--mut); margin: 0 0 12px; max-width: 68ch; }
.set-sec input[type=text], .set-sec input[type=email], .set-sec input[type=number], .set-sec input[type=url],
.set-sec input[type=file], .set-sec select {
border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 10px; font-size: var(--t-sm); }
.set-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.sess { font-size: var(--t-sm); display: flex; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); align-items: center; }
.sess .cur { font-family: var(--mono); font-size: 10px; border: 1px solid var(--line); color: var(--mut); padding: 1px 6px; border-radius: 4px; }
.audit-row { display: flex; gap: 14px; padding: 7px 0; border-top: 1px solid var(--line); font-size: var(--t-sm); align-items: baseline; }
.audit-row .when { font-family: var(--mono); font-size: 10.5px; color: var(--mut); min-width: 150px; }
.audit-row .act { font-family: var(--mono); font-size: 10.5px; background: var(--well); padding: 1px 7px; border-radius: 4px; }
.audit-row .det { color: var(--ink); }
/* AI usage meters — a ChatGPT/Claude-style used/limit bar. An unlimited meter
(the self-hosted default) drops the bar and reset line for a calm, static
"Unlimited" pill so it reads as intentional, not broken. */
.usage { padding: 11px 0; border-top: 1px solid var(--line); }
.usage:first-of-type { border-top: 0; padding-top: 2px; }
.usage-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.usage-label { font-size: var(--t-sm); font-weight: 600; }
.usage-count { font-size: var(--t-sm); color: var(--mut); font-variant-numeric: tabular-nums; white-space: nowrap; }
.usage-pill { font-size: var(--t-xs); font-weight: 600; letter-spacing: .02em;
background: var(--tag-green-bg); color: var(--tag-green-fg);
padding: 2px 10px; border-radius: 999px; }
.usage-bar { height: 6px; border-radius: 999px; background: var(--well); margin-top: 8px; overflow: hidden; }
.usage-fill { height: 100%; border-radius: 999px; background: var(--accent); transition: width .3s ease; }
.usage-fill.warn { background: var(--tag-amber-fg); }
.usage-reset { font-size: var(--t-xs); color: var(--mut); margin-top: 6px; }
/* hints / callouts — neutral; the left rule carries the meaning */
.hint { display: flex; gap: 10px; background: var(--paper); border: 1px solid var(--line); border-left: 2px solid var(--ink);
color: var(--ink); border-radius: var(--r-sm); padding: 9px 12px; font-size: var(--t-sm); margin: 8px 0; }
/* "Needs review" banner: amber-keyed to match the status dot, with an inline resolve action */
.hint.review { align-items: flex-start; background: var(--tag-amber-bg); border-color: #e0a03c66;
border-left-color: var(--tag-amber-fg); }
.hint.review .ic { color: var(--tag-amber-fg); font-weight: 700; }
.hint.review .review-act { margin-top: 8px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* upload modal */
.modal-back { position: fixed; inset: 0; background: rgba(12,13,16,.45); z-index: 90; display: none;
align-items: flex-start; justify-content: center; padding: 9vh 16px; backdrop-filter: blur(3px); }
.modal-back.open { display: flex; }
.modal { background: #fff; border-radius: 12px; width: 600px; max-width: 100%; box-shadow: 0 24px 70px rgba(0,0,0,.35); overflow: hidden; }
.modal-h { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px 0; }
.modal-h b { font-size: var(--t-md); }
.modal-h button { background: none; border: 0; font-size: 17px; color: var(--mut); }
/* review-extraction dialog (doc page): same chrome as the upload modal, but
the field grid can run long — the form scrolls inside the dialog while the
header stays put. */
.modal.review { width: 680px; display: flex; flex-direction: column; max-height: 100%; }
.modal.review form { overflow-y: auto; overscroll-behavior: contain; padding: 14px 22px 18px; }
@media (max-width: 640px) { .modal.review form { padding: 12px 14px 16px; } }
.dropzone { margin: 14px 22px 18px; border: 1.5px dashed var(--line); border-radius: var(--r); padding: 36px 20px;
text-align: center; color: var(--mut); font-size: var(--t-sm); cursor: pointer; transition: border-color .15s, background .15s; }
.dropzone.over { border-color: var(--accent); background: #f5f5fc; }
.dropzone b { color: var(--ink); }
.dropzone .formats { font-family: var(--mono); font-size: 10.5px; margin-top: 10px; }
.up-picked { margin: -6px 22px 18px; display: flex; flex-direction: column; gap: 10px; }
.up-picked[hidden] { display: none; }
#upPickedList { display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow: auto; }
.up-picked-actions { display: flex; gap: 8px; }
.up-row .up-remove { border: 0; background: none; cursor: pointer; color: var(--mut); font-size: 12px; padding: 2px 6px; border-radius: 4px; line-height: 1; }
.up-row .up-remove:hover { color: var(--ink); background: rgba(0, 0, 0, 0.06); }
.up-results { margin: 0 22px 20px; display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow: auto; }
.up-row { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 12px; font-size: var(--t-sm); }
.up-row .st { margin-left: auto; font-family: var(--mono); font-size: 10.5px; white-space: nowrap; color: var(--mut); }
.up-row.err .st { text-decoration: underline; text-decoration-style: dotted; }
.up-row .sum { color: var(--mut); font-size: var(--t-sm); }
.spin { width: 13px; height: 13px; border: 2px solid var(--line); border-top-color: var(--ink);
border-radius: 50%; animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
/* auth pages */
.auth-wrap { min-height: 100vh; display: flex; flex-direction: column; }
.auth-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.auth-card { width: 400px; max-width: 100%; }
.auth-card h1 { font-size: var(--t-xl); letter-spacing: -.02em; margin: 0 0 8px; }
.auth-card .d { color: var(--mut); font-size: var(--t-sm); margin: 0 0 22px; }
.auth-card form { display: flex; flex-direction: column; gap: 10px; }
.auth-card input { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 13px; font-size: var(--t-md); background: #fff; }
.auth-card input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79,79,208,.10); }
.auth-card .err { background: #fff; border: 1px solid var(--line); border-left: 2px solid var(--ink); color: var(--ink); border-radius: var(--r-sm); padding: 9px 12px; font-size: var(--t-sm); }
.auth-card .alt { font-size: var(--t-sm); color: var(--mut); text-align: center; margin-top: 16px; }
.auth-card .alt a { color: var(--ink); font-weight: 600; }
.auth-foot { padding: 18px; text-align: center; font-size: var(--t-sm); color: var(--mut); display: flex; gap: 8px; justify-content: center; align-items: center; }
/* demo loader */
.demo-progress { display: none; align-items: center; gap: 10px; justify-content: center; }
.demo-bar { position: fixed; top: 0; left: 0; height: 3px; background: var(--ink); width: 0; transition: width .4s; z-index: 99; }
/* misc */
.pin-btn { background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px 10px; font-size: var(--t-sm); color: var(--mut); }
.pin-btn.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.toast { position: fixed; bottom: 20px; right: 20px; transform: translateY(80px); background: var(--ink);
color: #fff; border-radius: var(--r-sm); padding: 9px 16px; font-size: var(--t-sm); opacity: 0;
transition: all .22s; z-index: 99; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.toast.show { transform: translateY(0); opacity: 1; }
/* non-blocking interactions */
[data-row].vanishing { opacity: .3; transform: translateX(6px); transition: opacity .18s, transform .18s; pointer-events: none; }
button.busy { opacity: .55; pointer-events: none; }
.askbox.busy { opacity: .7; }
@media (prefers-reduced-motion: reduce) {
.answer .cursor, .answer .thinking { animation: none; }
[data-row].vanishing { transition: none; }
}
/* responsive: the rail collapses, a slim top bar + bottom tabs take over */
.mobile-tabs { display: none; }
@media (max-width: 900px) {
.side { display: none; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 8px 14px; border-bottom: 1px solid var(--line); position: sticky; top: 0;
background: rgba(255,255,255,.92); backdrop-filter: blur(10px); z-index: 50; }
.topbar .logo { font-size: 14px; }
.topbar-right { display: flex; gap: 8px; align-items: center; }
.app-main { padding: 18px 16px 120px; }
.app-foot { display: none; }
.mobile-tabs { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: #fff;
border-top: 1px solid var(--line); z-index: 60; }
.mobile-tabs a { flex: 1; text-align: center; padding: 11px 0 15px; font-size: var(--t-xs); color: var(--mut); font-weight: 550; }
.mobile-tabs a.on { color: var(--ink); }
}
@media (max-width: 560px) {
.demo-banner { flex-wrap: wrap; }
.h-page { font-size: 19px; }
.doc-row .right { display: none; }
}
/* field rows are tap-to-copy */
#fieldChips .fchip { cursor: copy; -webkit-tap-highlight-color: transparent; }
#fieldChips .fchip.copied { box-shadow: inset 3px 0 0 var(--ink); }
/* =============================== record (doc) page — head, properties,
fields table, sources. Quiet chrome: one primary column of content, a
Notion-style property table, hairline lists; every secondary action lives
in the ••• menu or a subtle inline control. */
.doc-head { margin: 2px 0 12px; }
.doc-titlerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.doc-titlerow h1 { font-size: var(--t-xl); letter-spacing: -.02em; margin: 0; font-weight: 650; }
.doc-titlerow .owner { font-size: var(--t-sm); }
.doc-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.doc-lede { color: var(--ink); max-width: 72ch; margin: 6px 0 0; font-size: var(--t-md); }
.doc-lede:empty { display: none; }
/* quiet (tertiary) button — text only until hovered */
.btn-quiet { background: none; border: 1px solid transparent; color: var(--mut); font-weight: 500; }
.btn-quiet:hover { color: var(--ink); background: var(--hover); }
/* overflow menu: