/* Paperwork on the web.
   Palette and type carried from the Mac app so the two read as one product:
   indigo accent, neutrals biased toward it, native faces for legibility. */

:root {
  --ink:#191627; --ink-soft:#514B6B; --ink-faint:#7B7595;
  --paper:#F4F3F9; --card:#FFFFFF; --rule:#DFDCEC; --sunk:#E8E6F2;
  --indigo:#4A37AD; --indigo-soft:#EDEAFB;
  --mint:#12855C; --mint-soft:#E4F4ED;
  --amber:#A45A08; --amber-soft:#FBF0E2;
  --mark:#FBE59B;
  --shadow:0 1px 2px rgba(25,22,39,.06), 0 8px 24px rgba(25,22,39,.06);
  --ui:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --display:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,"SF Mono",monospace;
  --bar-h:3.4rem;
}
@media (prefers-color-scheme:dark) {
  :root {
    --ink:#EFEDF7; --ink-soft:#B4AECD; --ink-faint:#8880A4;
    --paper:#101 + 0E18; --paper:#100E18; --card:#1B1827; --rule:#332E47; --sunk:#15131F;
    --indigo:#A493F5; --indigo-soft:#241E3C;
    --mint:#5FD3A4; --mint-soft:#152720;
    --amber:#E0A65C; --amber-soft:#2B2013;
    --mark:#6A5514;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"] {
  --ink:#EFEDF7; --ink-soft:#B4AECD; --ink-faint:#8880A4;
  --paper:#100E18; --card:#1B1827; --rule:#332E47; --sunk:#15131F;
  --indigo:#A493F5; --indigo-soft:#241E3C;
  --mint:#5FD3A4; --mint-soft:#152720;
  --amber:#E0A65C; --amber-soft:#2B2013;
  --mark:#6A5514;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.35);
}
:root[data-theme="light"] {
  --ink:#191627; --ink-soft:#514B6B; --ink-faint:#7B7595;
  --paper:#F4F3F9; --card:#FFFFFF; --rule:#DFDCEC; --sunk:#E8E6F2;
  --indigo:#4A37AD; --indigo-soft:#EDEAFB;
  --mint:#12855C; --mint-soft:#E4F4ED;
  --amber:#A45A08; --amber-soft:#FBF0E2;
  --mark:#FBE59B;
  --shadow:0 1px 2px rgba(25,22,39,.06), 0 8px 24px rgba(25,22,39,.06);
}

* { box-sizing:border-box; }
/* A class with `display` beats the browser's own [hidden] rule, so hiding
   anything laid out with flex or grid needs this. Without it the toolbar and
   the workspace both showed before a form was open. */
[hidden] { display:none !important; }
html, body { height:100%; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--ui); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  /* A column so the workspace takes whatever height is left AFTER the bar,
     however many rows the bar's controls wrap onto. A fixed bar height meant
     the toolbar wrapped straight over the top of the form. */
  display:flex; flex-direction:column; height:100vh; overflow:hidden;
}
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
           overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------------- top bar ---------------- */
.bar {
  flex:0 0 auto; min-height:var(--bar-h);
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:.4rem .9rem; background:var(--card);
  border-bottom:1px solid var(--rule); z-index:40;
}
.brand { display:flex; align-items:center; gap:.5rem; flex:0 0 auto; }
.brand .mark {
  width:1.1rem; height:1.1rem; border-radius:4px;
  background:linear-gradient(140deg,#7565E8,var(--indigo) 55%,#2C1F72);
}
.brand .name { font-family:var(--display); font-weight:650; letter-spacing:-.01em; }
.bar-tools { display:flex; align-items:center; gap:.4rem; margin-left:auto;
             flex-wrap:wrap; justify-content:flex-end; }

.progress { display:flex; align-items:center; gap:.45rem; margin-right:.3rem; }
.track { width:6.5rem; height:6px; border-radius:99px; background:var(--sunk); overflow:hidden; }
.fill { height:100%; width:0; background:var(--mint); transition:width .3s ease; }
.ptext { font-size:.76rem; color:var(--ink-faint); font-variant-numeric:tabular-nums;
         white-space:nowrap; }

button, select, input, textarea { font:inherit; color:inherit; }
.btn { border:1px solid var(--rule); background:var(--card); border-radius:8px;
       padding:.34rem .6rem; font-size:.85rem; cursor:pointer; white-space:nowrap; }
.btn:hover { border-color:var(--indigo); color:var(--indigo); }
.btn.primary { background:var(--indigo); border-color:var(--indigo); color:#fff; }
.btn.primary:hover { filter:brightness(1.09); color:#fff; }
.btn.on { background:var(--indigo-soft); border-color:var(--indigo); color:var(--indigo); }
.btn:disabled { opacity:.45; cursor:default; }
.sel { border:1px solid var(--rule); background:var(--card); border-radius:8px;
       padding:.34rem .4rem; font-size:.85rem; }
:where(button,select,input,textarea,a,label.drop):focus-visible {
  outline:2.5px solid var(--indigo); outline-offset:2px; }

/* ---------------- opener ---------------- */
.opener { flex:1; min-height:0; overflow:auto; display:grid; place-items:center;
          padding:2rem 1.2rem; }
.opener-inner { max-width:34rem; text-align:center; }
.opener h1 { font-family:var(--display); font-weight:650; letter-spacing:-.02em;
             font-size:clamp(1.5rem,1.2rem + 1.6vw,2.1rem); line-height:1.18;
             margin:0 0 .7rem; text-wrap:balance; }
.lede { color:var(--ink-soft); margin:0 0 1.6rem; }
.drop { display:flex; flex-direction:column; gap:.3rem; align-items:center;
        justify-content:center; min-height:9rem; border:2px dashed var(--rule);
        border-radius:14px; background:var(--card); cursor:pointer; padding:1.5rem;
        transition:border-color .15s ease, background .15s ease; }
.drop:hover, .drop.over { border-color:var(--indigo); background:var(--indigo-soft); }
.drop strong { font-family:var(--display); font-size:1.06rem; font-weight:640; }
.drop span { font-size:.88rem; color:var(--ink-faint); }
/* An aside, in the accent and set apart, so it reads as the joke it is rather
   than as another instruction to follow. */
.drop .jest { font-style:italic; color:var(--indigo); font-size:.95rem;
              margin:.15rem 0 .1rem; }
.known { margin:1.4rem 0 .4rem; font-size:.9rem; color:var(--ink-soft); }
.privacy { margin:0; font-size:.82rem; color:var(--ink-faint); }

/* ---------------- workspace ---------------- */
.work { flex:1; min-height:0; display:grid;
        grid-template-columns:minmax(0,1fr) 23rem; }
.pages { overflow:auto; padding:1.2rem; display:flex; flex-direction:column;
         gap:1.2rem; background:var(--sunk);
         /* `safe` keeps a page wider than the column reachable. Plain centring
            clips the overflow at BOTH edges, so the left of the form could not
            be scrolled to at all. */
         align-items:center; align-items:safe center; }

.page { position:relative; box-shadow:var(--shadow); background:#fff;
        border-radius:2px; flex:0 0 auto; }
.page canvas { display:block; border-radius:2px; }
.page .layer { position:absolute; inset:0; }

/* A real box on the real form. Sits exactly over the PDF's own widget. */
.fld { position:absolute; border:1.5px solid color-mix(in srgb,var(--indigo) 55%,transparent);
       background:color-mix(in srgb,var(--indigo) 9%,transparent);
       border-radius:2px; font-family:var(--ui); font-size:12px; color:#14121F;
       padding:0 2px; width:100%; }
.fld:hover { background:color-mix(in srgb,var(--indigo) 17%,transparent); }
.fld:focus { outline:2.5px solid var(--indigo); outline-offset:0;
             background:#fff; }
.fld.filled { background:color-mix(in srgb,#12855C 12%,transparent);
              border-color:color-mix(in srgb,#12855C 60%,transparent); }
.fld.secret { background:color-mix(in srgb,#A45A08 13%,transparent);
              border-color:color-mix(in srgb,#A45A08 65%,transparent); }
.fld.tick { cursor:pointer; display:grid; place-items:center; font-weight:700;
            color:var(--indigo); background:color-mix(in srgb,var(--indigo) 10%,transparent); }
.fld.tick.on { background:color-mix(in srgb,#12855C 22%,transparent); color:#0B6647; }
.fld.here { box-shadow:0 0 0 3px var(--mark); }

/* Came with the downloaded file, rather than from the reader. */
.fld.came { border-style:dashed;
            border-color:color-mix(in srgb,var(--amber) 75%,transparent);
            background:color-mix(in srgb,var(--amber) 14%,transparent); }
.fld.struck { background:color-mix(in srgb,#888 18%,transparent);
              border-color:#999; text-decoration:line-through; opacity:.75; }

.came { flex:0 0 auto; background:var(--amber-soft); color:var(--amber);
        border-bottom:1px solid color-mix(in srgb,var(--amber) 30%,transparent);
        padding:.6rem .9rem; font-size:.9rem; }
.came-inner { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
              max-width:74rem; margin:0 auto; }
.came-inner strong { font-family:var(--display); }
.came-btns { display:flex; gap:.4rem; margin-left:auto; }

/* The sentence being read, drawn over the page. */
.readmark { position:absolute; background:var(--mark); opacity:.5; border-radius:2px;
            pointer-events:none; }

/* ---------------- side panel ---------------- */
.side { border-left:1px solid var(--rule); background:var(--card); overflow:auto;
        padding:1.1rem; }
.side-empty h2 { font-family:var(--display); font-size:1.05rem; font-weight:640;
                 margin:0 0 .35rem; }
.side-empty p { color:var(--ink-soft); font-size:.92rem; margin:0; }

.where { font-family:var(--mono); font-size:.72rem; letter-spacing:.09em;
         text-transform:uppercase; color:var(--indigo); margin:0 0 .5rem; }
.group { font-family:var(--display); font-weight:640; font-size:1rem;
         color:var(--indigo); margin:0 0 .3rem; }
.label { font-size:.82rem; color:var(--ink-faint); margin:0 0 .35rem; }
.means { font-size:1.16rem; line-height:1.45; margin:0 0 .6rem; text-wrap:pretty; }
.means .s.now { background:var(--mark); border-radius:3px; box-shadow:0 0 0 2px var(--mark); }
.shape { font-size:.88rem; color:var(--ink-soft); margin:0 0 .7rem; }
.side-tools { display:flex; gap:.4rem; margin-bottom:.7rem; flex-wrap:wrap; }
details { margin-bottom:.45rem; }
details summary { cursor:pointer; font-size:.86rem; color:var(--indigo); }
details div { font-size:.92rem; color:var(--ink-soft); border-left:2px solid var(--rule);
              padding:.4rem 0 0 .7rem; margin-top:.35rem; }
.links { display:flex; flex-direction:column; gap:.25rem; margin:.5rem 0; }
.links a { color:var(--indigo); font-size:.86rem; }
.secret { background:var(--amber-soft); color:var(--amber); border-radius:9px;
          padding:.65rem .75rem; font-size:.9rem; margin:.6rem 0;
          border:1px solid color-mix(in srgb,var(--amber) 28%,transparent); }
.nav { display:flex; gap:.4rem; margin-top:1rem; padding-top:.8rem;
       border-top:1px solid var(--rule); }

/* ---------------- papers to find ---------------- */
.gather-btn { margin-left:auto; }
.gather-btn.done { background:var(--mint-soft); border-color:var(--mint); color:var(--mint); }
/* When the form tools appear they take the right-hand side, so the button
   stops being the thing pushed to the end. */
.bar-tools:not([hidden]) ~ .gather-btn, .gather-btn:has(~ .bar-tools:not([hidden])) {
  margin-left:0;
}

.first { margin:1.2rem 0 0; }
.linky { background:none; border:0; padding:0; color:var(--indigo); cursor:pointer;
         font-size:.92rem; text-decoration:underline; text-underline-offset:3px; }
.linky:hover { text-decoration-thickness:2px; }

.sheet { position:fixed; inset:0; z-index:70; background:rgba(18,15,28,.45);
         display:grid; place-items:center; padding:1.2rem; }
.sheet-card { background:var(--card); border-radius:15px; box-shadow:var(--shadow);
              width:min(38rem,100%); max-height:85vh; display:flex;
              flex-direction:column; border:1px solid var(--rule); }
.sheet-head { display:flex; align-items:flex-start; gap:1rem; padding:1.1rem 1.2rem .6rem; }
.sheet-head h2 { font-family:var(--display); font-size:1.15rem; font-weight:640; margin:0; }
.sheet-head p { margin:.2rem 0 0; font-size:.88rem; color:var(--ink-soft); }
.sheet-head .btn { margin-left:auto; flex:0 0 auto; }
.sheet-progress { display:flex; align-items:center; gap:.6rem; padding:0 1.2rem .7rem; }
.sheet-progress .track { flex:1; height:7px; border-radius:99px; background:var(--sunk);
                         overflow:hidden; }
.sheet-progress .fill { height:100%; width:0; background:var(--mint);
                        transition:width .3s ease; }
.sheet-progress span { font-size:.78rem; color:var(--ink-faint);
                       font-variant-numeric:tabular-nums; white-space:nowrap; }

.gather-list { list-style:none; margin:0; padding:0 1.2rem; overflow:auto;
               display:flex; flex-direction:column; gap:.1rem; }
.gather-list li { display:flex; gap:.7rem; align-items:flex-start;
                  padding:.6rem 0; border-top:1px solid var(--rule); }
.gather-list li:first-child { border-top:0; }
.gather-list input { margin-top:.3rem; width:1.15rem; height:1.15rem;
                     accent-color:var(--mint); flex:0 0 auto; cursor:pointer; }
.gather-list label { cursor:pointer; font-size:.97rem; }
.gather-list li.done label { text-decoration:line-through; color:var(--ink-faint); }
.gather-list .where { margin:.25rem 0 0; display:flex; flex-wrap:wrap; gap:.7rem;
                      text-transform:none; letter-spacing:0; font-family:var(--ui); }
.gather-list .where a { font-size:.82rem; color:var(--indigo); }
.sheet-foot { display:flex; gap:.5rem; padding:.8rem 1.2rem 1.1rem;
              border-top:1px solid var(--rule); margin-top:.6rem; }

@media print {
  body > *:not(.sheet) { display:none !important; }
  .sheet { position:static; background:none; padding:0; display:block; }
  .sheet-card { box-shadow:none; border:0; max-height:none; width:100%; }
  .sheet-head .btn, .sheet-foot, .sheet-progress { display:none; }
  .gather-list li { break-inside:avoid; }
  .gather-list input { -webkit-appearance:none; appearance:none;
                       border:1.5px solid #555; border-radius:3px; }
}

/* ---------------- toast ---------------- */
.toast { position:fixed; left:50%; bottom:1.4rem; transform:translate(-50%,1.5rem);
         background:var(--ink); color:var(--paper); padding:.55rem .95rem;
         border-radius:9px; font-size:.88rem; opacity:0; pointer-events:none;
         transition:opacity .2s ease, transform .2s ease; z-index:60; max-width:90vw; }
.toast.show { opacity:1; transform:translate(-50%,0); }

@media (max-width:900px) {
  .work { grid-template-columns:1fr; grid-template-rows:1fr auto; }
  .side { border-left:0; border-top:1px solid var(--rule); max-height:45vh; }
}
@media (prefers-reduced-motion:reduce) { * { transition:none !important; } }