/* Dela Doc: liquid glass, in the system theme (light and dark). Every colour is a token below; icons are currentColor
   line icons (DESIGN.md); only the Dela mark keeps its own colours. */
:root {
  color-scheme: light;
  --page:#eef1f8;
  --blob1:#c9d2ff; --blob2:#ffd9c4; --blob3:#e4d6ff; --blob4:#bfe0ff;
  --glass:rgba(255,255,255,.52); --glass-strong:rgba(255,255,255,.78); --glass-line:rgba(255,255,255,.75); --glass-edge:rgba(15,23,42,.06);
  --sheet:rgba(255,255,255,.72); --chip:rgba(255,255,255,.85); --chip-line:rgba(15,23,42,.10); --hover:rgba(15,23,42,.05);
  --shadow:0 1px 1px rgba(15,23,42,.04), 0 12px 40px rgba(40,50,110,.10);
  --shine:inset 0 1px 0 rgba(255,255,255,.9);
  --text:#0b1220; --muted:#5b6475; --faint:#98a0ae;
  --accent:#5B64E0; --accent-soft:rgba(91,100,224,.12); --on-accent:#ffffff;
  --good:#16a34a; --bad:#e5484d; --warn:#b45309;
  --font:"Inter", "Geist", ui-sans-serif, -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --page:#050507;
    --blob1:#2b3290; --blob2:#4a2a22; --blob3:#3a1f58; --blob4:#0f3b52;
    --glass:rgba(22,22,28,.50); --glass-strong:rgba(30,30,38,.82); --glass-line:rgba(255,255,255,.09); --glass-edge:rgba(0,0,0,.4);
    --sheet:rgba(14,14,18,.62); --chip:rgba(255,255,255,.05); --chip-line:rgba(255,255,255,.12); --hover:rgba(255,255,255,.06);
    --shadow:0 1px 1px rgba(0,0,0,.3), 0 18px 50px rgba(0,0,0,.45);
    --shine:inset 0 1px 0 rgba(255,255,255,.06);
    --text:#eef0f4; --muted:#a3a9b5; --faint:#6c7280;
    --accent:#7C86F2; --accent-soft:rgba(124,134,242,.18); --on-accent:#0b0d1a;
    --good:#3ecf8e; --bad:#ff6369; --warn:#f5a524;
  }
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html, body { height:100%; }
body { margin:0; background:var(--page); color:var(--text); font:14px/1.5 var(--font); letter-spacing:-.006em; -webkit-font-smoothing:antialiased; overflow:hidden; }
::selection { background:var(--accent-soft); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
svg { flex:none; display:block; }
button { font:inherit; color:inherit; }

/* the soft colour field the glass floats on */
.backdrop { position:fixed; inset:0; overflow:hidden; z-index:0; }
.backdrop i { position:absolute; border-radius:50%; filter:blur(90px); opacity:.9; }
.backdrop .b1 { width:46vw; height:46vw; left:-8vw; top:-14vw; background:var(--blob1); }
.backdrop .b2 { width:38vw; height:38vw; right:-6vw; top:-10vw; background:var(--blob2); }
.backdrop .b3 { width:44vw; height:44vw; right:10vw; bottom:-22vw; background:var(--blob3); }
.backdrop .b4 { width:36vw; height:36vw; left:4vw; bottom:-18vw; background:var(--blob4); }

/* liquid glass */
.glass { background:var(--glass); border:1px solid var(--glass-line); box-shadow:var(--shadow), var(--shine);
  -webkit-backdrop-filter:blur(28px) saturate(170%); backdrop-filter:blur(28px) saturate(170%); }

/* left rail */
.rail { position:fixed; z-index:3; left:20px; top:40px; width:52px; padding:10px 0; border-radius:26px; display:flex; flex-direction:column; align-items:center; gap:6px; }
.rail .gap { height:8px; }
.ib { all:unset; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; color:var(--muted); cursor:pointer; transition:background .15s, color .15s; }
.ib:hover { background:var(--hover); color:var(--text); }
.ib[aria-pressed="true"], .ib.on { background:var(--glass-strong); color:var(--text); box-shadow:var(--shine), 0 1px 3px var(--glass-edge); }
.ib:focus-visible { outline:2px solid var(--accent); }

/* drawer: Docs, search, saved finds */
.drawer { position:fixed; z-index:4; left:84px; top:40px; bottom:40px; width:280px; border-radius:22px; padding:14px; display:flex; flex-direction:column; gap:10px; overflow:auto; }
.drawer h2 { margin:2px 4px 2px; font-size:13px; font-weight:600; }
.drawer .item { all:unset; display:block; padding:8px 10px; border-radius:12px; cursor:pointer; }
.drawer .item:hover { background:var(--hover); }
.drawer .item[aria-current="true"] { background:var(--glass-strong); }
.drawer .item .t { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.drawer .item .s { display:block; color:var(--faint); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.drawer .empty { color:var(--faint); padding:4px 10px; }
.field { height:34px; border-radius:12px; border:1px solid var(--chip-line); background:var(--chip); color:var(--text); padding:0 12px; font:inherit; outline:none; width:100%; }
.field:focus { border-color:var(--accent); }

/* the window */
.window { position:fixed; z-index:2; left:112px; right:28px; top:40px; bottom:28px; border-radius:30px; display:flex; flex-direction:column; overflow:hidden; }
.head { flex:none; display:flex; align-items:center; gap:12px; height:68px; padding:0 22px 0 36px; }
.head .doc-ic { color:var(--accent); }
.head .name { font-size:18px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.head .grow { flex:1; }
.avatar { all:unset; box-sizing:border-box; width:30px; height:30px; border-radius:50%; background:var(--accent); color:var(--on-accent); display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; cursor:pointer; }
.avatar:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.pill { all:unset; display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 16px; border-radius:19px; cursor:pointer; background:var(--glass-strong);
  border:1px solid var(--glass-line); box-shadow:var(--shine), 0 1px 3px var(--glass-edge); font-weight:500; }
.pill:hover { background:var(--chip); }
.saved { color:var(--faint); font-size:12px; }

.sheet { flex:1; min-height:0; margin:0 28px; border-radius:24px 24px 0 0; background:var(--sheet); overflow:auto; position:relative; }

/* formatting toolbar: a floating glass pill */
.toolbar { position:sticky; top:10px; z-index:2; margin:10px auto 0; width:max-content; max-width:calc(100% - 24px); display:flex; align-items:center; gap:2px;
  padding:6px 10px; border-radius:20px; overflow-x:auto; scrollbar-width:none; }
.toolbar .sep { width:1px; height:22px; background:var(--chip-line); margin:0 8px; flex:none; }
.tb { all:unset; display:inline-flex; align-items:center; justify-content:center; gap:4px; min-width:34px; height:34px; padding:0 6px; border-radius:10px; color:var(--text); cursor:pointer; flex:none; white-space:nowrap; }
.tb:hover { background:var(--hover); }
.tb[aria-pressed="true"] { background:var(--accent-soft); color:var(--accent); }
.tb.drop { padding:0 8px 0 10px; gap:10px; }
.tb.drop.wide { min-width:120px; justify-content:space-between; }
.tb .swatch { width:16px; height:2px; border-radius:1px; background:currentColor; }
.tb .color { display:flex; flex-direction:column; align-items:center; gap:1px; }

/* the document */
.doc { max-width:840px; margin:0 auto; padding:56px 56px 40px; }
.doc .title { all:unset; display:block; width:100%; font-size:38px; line-height:1.15; font-weight:700; letter-spacing:-.025em; margin:0 0 12px; }
.doc .title::placeholder { color:var(--faint); }
.editor { outline:none; font-size:var(--doc-size, 17px); line-height:1.75; min-height:120px; font-family:var(--doc-font, var(--font)); }
.editor:empty::before { content:attr(data-placeholder); color:var(--faint); white-space:pre-line; pointer-events:none; }
.editor p { margin:0 0 14px; }
.editor h1 { font-size:1.6em; line-height:1.25; margin:18px 0 10px; letter-spacing:-.02em; }
.editor h2 { font-size:1.3em; line-height:1.3; margin:16px 0 8px; }
.editor h3 { font-size:1.1em; margin:14px 0 6px; }
.editor blockquote { margin:0 0 14px; padding-left:14px; border-left:3px solid var(--chip-line); color:var(--muted); }
.editor ul, .editor ol { margin:0 0 14px; padding-left:24px; }
.editor a { color:var(--accent); }
.editor img { max-width:100%; border-radius:12px; }
.editor table { border-collapse:collapse; margin:0 0 14px; width:100%; }
.editor td, .editor th { border:1px solid var(--chip-line); padding:6px 10px; min-width:60px; }
.tc-accent { color:var(--accent); } .tc-muted { color:var(--muted); } .tc-good { color:var(--good); }
.tc-warn { color:var(--warn); } .tc-bad { color:var(--bad); }
.editor ::selection { background:var(--accent-soft); }
.editor { caret-color:var(--accent); }

/* Dela, between the paragraphs: a line in a conversation, its answers words to tap */
.dela { display:flex; gap:14px; align-items:flex-start; margin:26px 0 26px; font-size:15px; line-height:1.5; user-select:none; font-family:var(--font); }
.dela .mark { width:22px; height:22px; flex:none; margin-top:-1px; }
.dela .mark img { width:22px; height:22px; display:block; }
.dela .q { min-width:0; flex:1; }
.dela .say { color:var(--text); }
.dela .reply { margin-top:6px; color:var(--muted); line-height:1.9; }
.dela .reply.said { line-height:1.5; }
.dela .chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
/* a word to tap: highlighted in the text, never a button shape */
/* (Chrome lays a button out as an inline block whatever its display, so its own line height keeps the highlight word-sized) */
.word { all:unset; display:inline; color:var(--accent); background:var(--accent-soft); border-radius:5px; padding:0 3px; line-height:1.45; cursor:pointer;
  font-weight:500; -webkit-box-decoration-break:clone; box-decoration-break:clone; transition:background .15s, color .15s; }
.word:hover { background:color-mix(in srgb, var(--accent) 24%, transparent); }
.word[aria-pressed="true"] { background:var(--accent); color:var(--on-accent); }
.word:disabled { color:var(--muted); background:none; cursor:default; }
.word.quiet { color:var(--muted); background:none; font-weight:400; text-decoration:underline dotted; text-underline-offset:3px; padding:0 1px; }
.word.quiet:hover { color:var(--text); }
/* "or just tell me": a short line to type on, inside the sentence */
.dela .own { all:unset; display:inline-block; field-sizing:content; min-width:4ch; max-width:26ch; color:var(--text); border-bottom:1px dashed var(--chip-line);
  padding:0 2px; line-height:1.4; vertical-align:baseline; cursor:text; }
.dela .own::placeholder { color:var(--faint); }
.dela .own:focus { border-bottom-color:var(--accent); }
/* Dela is typing */
.typing { display:inline-flex; gap:4px; align-items:center; height:22px; vertical-align:middle; }
.typing i { width:6px; height:6px; border-radius:50%; background:var(--muted); opacity:.35; animation:typing 1.2s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay:.15s; } .typing i:nth-child(3) { animation-delay:.3s; }
@keyframes typing { 0%, 60%, 100% { opacity:.3; transform:translateY(0); } 30% { opacity:1; transform:translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .typing i { animation:none; opacity:.6; } }
.chip { all:unset; display:inline-flex; align-items:center; height:36px; padding:0 16px; border-radius:18px; cursor:pointer; background:var(--chip); border:1px solid var(--chip-line);
  box-shadow:0 1px 2px var(--glass-edge); transition:background .15s, color .15s, border-color .15s; }
.chip:hover { border-color:var(--accent); }
.chip[aria-pressed="true"] { background:var(--accent-soft); color:var(--accent); border-color:transparent; box-shadow:none; }
.chip:disabled, .done .chip:not([aria-pressed="true"]) { color:var(--muted); }
.dela .more { display:flex; align-items:center; gap:10px; margin-top:10px; }
.dela .more .field { height:32px; max-width:300px; }
.textbtn { all:unset; color:var(--muted); cursor:pointer; font-size:13px; }
.textbtn:hover { color:var(--text); text-decoration:underline; text-underline-offset:2px; }
.dela .skipped { color:var(--faint); font-size:13px; margin-top:8px; }
.btn { all:unset; display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 16px; border-radius:18px; cursor:pointer; font-weight:500;
  background:var(--chip); border:1px solid var(--chip-line); }
.btn:hover { border-color:var(--accent); }
.btn.primary { background:var(--accent); color:var(--on-accent); border-color:transparent; }
.btn.primary:hover { filter:brightness(1.06); }
.btn[disabled] { opacity:.5; pointer-events:none; }

.note { display:flex; gap:12px; align-items:flex-start; color:var(--muted); background:var(--chip); border:1px solid var(--chip-line); border-radius:16px; padding:12px 14px; margin:20px 0; font-size:14px; }
.err { color:var(--bad); }

/* evidence */
.results { margin-top:36px; padding-top:24px; border-top:1px solid var(--chip-line); font-family:var(--font); }
.results h3 { font-size:13px; font-weight:600; color:var(--muted); margin:0 0 10px; display:flex; align-items:center; gap:8px; }
.card { background:var(--chip); border:1px solid var(--chip-line); border-radius:18px; padding:16px 18px; margin-bottom:12px; box-shadow:0 1px 2px var(--glass-edge); }
.answer { font-size:15px; line-height:1.65; }
.answer .change { margin-top:8px; color:var(--muted); font-size:13px; }
.funnel { margin:2px 0 22px; color:var(--muted); font-size:13px; display:flex; flex-wrap:wrap; gap:4px 12px; align-items:center; }
.funnel .detail { flex-basis:100%; display:flex; flex-wrap:wrap; gap:4px 14px; color:var(--faint); }
.claim .text { font-size:15px; font-weight:500; }
.claim .why { color:var(--muted); margin-top:2px; }
.claim .row { display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap; }
.claim .spacer { flex:1; }
.badge { all:unset; display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); cursor:pointer; padding:3px 8px; margin-left:-8px; border-radius:8px; }
.badge:hover { background:var(--hover); }
.badge.verified { color:var(--good); }
.badge.contested { color:var(--warn); }
.badge .faint { color:var(--faint); }
.ask { margin-top:10px; color:var(--muted); }
.ask .chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.ask .chip { height:30px; padding:0 12px; font-size:13px; }
.conflict { margin-top:12px; padding:12px 14px; border-radius:14px; background:color-mix(in srgb, var(--warn) 10%, transparent); }
.clarify { display:flex; gap:8px; margin-top:10px; align-items:flex-start; }
.clarify textarea { flex:1; min-height:60px; resize:vertical; border-radius:12px; border:1px solid var(--chip-line); background:var(--chip); color:var(--text); padding:8px 12px; font:inherit; outline:none; }
.how { margin-top:12px; border-top:1px solid var(--chip-line); padding-top:12px; }
.how h4 { font-size:12px; font-weight:600; margin:0 0 6px; }
.src { display:flex; gap:10px; align-items:flex-start; padding:5px 0; }
.src.supports { color:var(--good); }
.src.contradicts { color:var(--warn); }
.src .body { color:var(--text); min-width:0; }
.src a { color:inherit; text-decoration:none; }
.src a:hover { text-decoration:underline; }
.src .meta { color:var(--faint); font-size:12px; }
.history { color:var(--faint); font-size:12px; margin-top:8px; }
.sample { display:inline-flex; font-size:11px; font-weight:500; color:var(--accent); background:var(--accent-soft); border-radius:6px; padding:1px 7px; margin-left:8px; vertical-align:middle; }

/* menus */
.menu { position:fixed; z-index:10; min-width:200px; padding:6px; border-radius:16px; background:var(--glass-strong); }
.menu .mi { all:unset; display:flex; align-items:center; gap:10px; width:100%; box-sizing:border-box; padding:8px 10px; border-radius:10px; cursor:pointer; }
.menu .mi:hover { background:var(--hover); }
.menu .mi[aria-checked="true"] { color:var(--accent); }
.menu .mi.danger { color:var(--bad); }
.menu .label { color:var(--faint); font-size:12px; padding:8px 10px 4px; }
.menu .sep { height:1px; background:var(--chip-line); margin:6px 4px; }
.menu .dot { width:14px; height:14px; border-radius:50%; background:currentColor; }
.menu .row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 10px; }
.switch { appearance:none; width:34px; height:20px; border-radius:10px; background:var(--chip-line); position:relative; margin:0; cursor:pointer; transition:background .15s; flex:none; }
.switch::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--glass-strong); box-shadow:0 1px 2px var(--glass-edge); transition:transform .15s; }
.switch:checked { background:var(--accent); }
.switch:checked::after { transform:translateX(14px); background:var(--on-accent); }

.center { max-width:420px; margin:18vh auto; text-align:center; color:var(--muted); }
.center h1 { color:var(--text); font-size:22px; margin:0 0 8px; }

@media (max-width: 860px) {
  .rail { left:50%; transform:translateX(-50%); top:auto; bottom:12px; flex-direction:row; width:auto; padding:0 10px; height:52px; }
  .rail .gap { width:8px; height:auto; }
  .window { left:8px; right:8px; top:8px; bottom:76px; border-radius:22px; }
  .drawer { left:8px; right:8px; width:auto; top:8px; bottom:76px; }
  .head { padding:0 12px 0 18px; height:58px; }
  .sheet { margin:0 8px; }
  .doc { padding:36px 20px 32px; }
  .doc .title { font-size:30px; }
  .pill .lbl { display:none; }
}
@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }

/* Keyboard focus shows on every control (the controls above reset their look with all:unset, which dropped it). */
.btn:focus-visible, .chip:focus-visible, .tb:focus-visible, .pill:focus-visible, .menu .mi:focus-visible, .badge:focus-visible, .textbtn:focus-visible,
.drawer .item:focus-visible, .word:focus-visible, .dela-switch:focus-within, .ib:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* the Dela mark in the rail goes home */
.rail .home img { width:22px; height:22px; display:block; }
.rail .home + .ib { margin-top:6px; }
/* Dela on or off for this Doc, in the header */
.dela-switch { display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 6px 0 10px; border-radius:17px; cursor:pointer; color:var(--text); font-size:14px; font-weight:500; }
.dela-switch:hover { background:var(--hover); }
.dela-switch .mk img { width:16px; height:16px; display:block; }
#saved.err { color:var(--bad); }
.tc-default { color:var(--text); }
.menu .dot.tc-default { color:var(--text); }
/* sign in again over the Doc, which stays as it is underneath */
.again { position:fixed; inset:0; z-index:20; display:grid; place-items:center; background:var(--sheet);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); padding:16px; }
.again .center { margin:0; }
/* phones: the Doc's name keeps its room; the routine "Saved" steps aside (a save that failed, or "Copied", still shows) */
@media (max-width: 520px) {
  .head { gap:6px; padding:0 8px 0 16px; }
  .head .doc-ic, .dela-switch .lbl, .saved:not(.err):not(.flash) { display:none; }
  .head .pill { padding:0 11px; }
  .dela-switch { padding:0 4px 0 8px; gap:6px; }
}
/* the toolbar wraps on narrower screens instead of hiding its last buttons; phones swipe it */
@media (min-width: 640px) { .toolbar { flex-wrap:wrap; justify-content:center; overflow:visible; row-gap:2px; } }
@media (max-width: 639px) { .toolbar { -webkit-mask-image:linear-gradient(90deg, #000 85%, transparent); mask-image:linear-gradient(90deg, #000 85%, transparent); } }

/* Surfaces that float over text need more body to stay readable (still frosted). */
.toolbar.glass, .drawer.glass, .menu.glass { background:var(--glass-strong); -webkit-backdrop-filter:blur(36px) saturate(180%); backdrop-filter:blur(36px) saturate(180%); }

/* sign in (same Dela account as the extension) */
.signin { display:flex; flex-direction:column; gap:10px; width:min(360px, 100%); margin:0 auto; text-align:left; padding:28px 26px 22px; border-radius:24px; }
.signin .mark img { width:30px; height:30px; display:block; }
.signin h1 { font-size:22px; margin:6px 0 0; color:var(--text); }
.signin .lead { margin:0 0 6px; color:var(--muted); font-size:14px; line-height:1.5; }
.signin .field { height:42px; font-size:15px; }
.signin .btn { justify-content:center; height:42px; margin-top:4px; }
.signin .err { margin:0; min-height:1.2em; font-size:13px; }
.signin .small { margin:4px 0 0; color:var(--faint); font-size:13px; }
.signin a { color:var(--accent); }

/* menu rows with a quiet hint on the right (the file type) */
.menu .mi .grow { flex:1; }
.menu .mi .hint { color:var(--faint); font-size:12px; }

/* PDF: the browser's print, laid out for paper. Only the Doc and what Dela found, black on white, sources shown. */
@media print {
  :root { color-scheme:light; --text:#111111; --muted:#4b5563; --faint:#6b7280; --accent:#3f47c4; --accent-soft:transparent; --chip:transparent;
    --chip-line:#cfd3da; --good:#15803d; --warn:#b45309; --bad:#b91c1c; }
  @page { margin:18mm 16mm; }
  html, body { height:auto; overflow:visible; background:#fff; }
  .backdrop, .rail, .drawer, .menu, .head, .toolbar, #tail > .dela, #tail > .note, .dela .more, .claim .row .ib, .claim .spacer, .ask, .clarify,
  .conflict .textbtn, .funnel .textbtn, .dela .chip:not([aria-pressed="true"]), .dela .reply:not(.said), .again { display:none !important; }
  .word[aria-pressed="true"] { background:none; color:var(--text); font-weight:600; padding:0; }
  .window, .sheet { position:static; inset:auto; margin:0; border:0; border-radius:0; box-shadow:none; background:none; overflow:visible;
    -webkit-backdrop-filter:none; backdrop-filter:none; }
  .doc { max-width:none; padding:0; }
  .doc .title { font-size:28px; margin-bottom:10px; }
  .editor { font-size:12pt; line-height:1.6; }
  .dela { margin:10px 0 14px; font-size:10.5pt; break-inside:avoid; }
  /* the empty line left to keep writing under a question isn't part of the page */
  .editor > .dela + :is(p, div):has(> br:only-child), .editor > :is(p, div):has(> br:only-child):has(+ .dela) { display:none; }
  .dela .chips { margin-top:6px; }
  .chip[aria-pressed="true"] { height:auto; padding:2px 10px; background:none; border:1px solid var(--chip-line); color:var(--text); box-shadow:none; }
  .results { margin-top:24px; break-before:auto; }
  .results h3 { break-after:avoid; page-break-after:avoid; } /* a heading stays with what follows it */
  .card { background:none; border:1px solid var(--chip-line); box-shadow:none; break-inside:avoid; }
  .conflict { background:none; border:1px solid var(--chip-line); }
  .src a { color:var(--text); text-decoration:underline; }
  .src a::after { content:" (" attr(href) ")"; color:var(--faint); font-size:9pt; word-break:break-all; }
}