/* proofread.law — the result view (app/ANIMATIONS.md § "The built result view"): page turn, annotated document + ledger, replay caret. Tokens: --ink --ink-65 --ink-45 --hair --canvas --ease from the page; Inter UI, Georgia document, system mono ledger; radii 4px. */ html.turning body{overflow:hidden} html.turning .top{opacity:0;pointer-events:none}.top{transition:opacity .3s ease} /* the page turn: the landing page is the front of a leaf hinged on the left edge; the result view is its BACK face, so the flip lands on the dashboard itself. .9s ease-in-out. After the turn the view is re-parented to as a fixed layer (same pixels, no blink). */ .leaf{position:relative;z-index:45;transform-origin:left center;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.65,0,.35,1)} .leaf .site{position:relative;transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden} .leaf .site:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to left,rgba(0,0,0,.28),rgba(0,0,0,0) 35%);opacity:0;transition:opacity .4s ease} html.js .leaf.turned{transform:perspective(2400px) translateX(100%) rotateY(-180deg)}html.js .leaf.turning .site:after{opacity:1} .leaf.gone{visibility:hidden} html:not(.js) .leaf.turned{display:none} .analysis{display:none;flex-direction:column;background:#d9d4cc url(/static/img/hero-wall.jpg) center/cover;color:var(--ink,#0c0d0e);font-family:var(--pr-font,Inter,sans-serif);z-index:40} .analysis.show{display:flex} .leaf .analysis{position:absolute;left:0;right:0;height:100vh;transform:rotateY(180deg) translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden} .analysis.docked{position:fixed;inset:0;transform:none} @media (prefers-reduced-motion:reduce){.leaf{transition:opacity .3s ease}html.js .leaf.turned{transform:none;opacity:0}.leaf .analysis{transform:none}} /* the card: same shape as the demo in the hero (rounded 8px window on the marble, 1040px wide at most) */ .an-card{flex:1;min-height:0;display:flex;flex-direction:column;width:calc(100% - 32px);max-width:1180px;margin:16px auto;background:#fff;border-radius:var(--r-lg,8px);box-shadow:0 24px 60px rgba(0,0,0,.28),0 2px 8px rgba(0,0,0,.12);overflow:hidden}@media (min-width:768px){.an-card{width:calc(100% - 64px);margin:28px auto}} /* top bar */ .an-bar{height:52px;flex:0 0 52px;display:flex;align-items:center;gap:16px;padding:0 16px;border-bottom:1px solid var(--hair,#e5e7eb);font-size:13px}@media (min-width:768px){.an-bar{padding:0 20px}} .an-dots{display:flex;gap:6px;margin-right:4px}.an-dots i{width:10px;height:10px;border-radius:50%;background:#e5e7eb;display:inline-block} .an-mark{width:24px;height:24px;flex:0 0 24px;line-height:0}.an-mark svg{width:24px;height:24px;display:block} .an-name{font-weight:550;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:36vw} .an-counts{color:var(--ink-65,rgba(12,13,14,.65));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums} .an-counts b{color:var(--ink,#0c0d0e);font-weight:550}.an-counts .red{color:#b20e01} .an-actions{margin-left:auto;display:flex;align-items:center;gap:8px;white-space:nowrap} .an-btn{height:32px;padding:0 12px;border-radius:4px;border:1px solid var(--hair,#e5e7eb);background:#fff;font:inherit;font-size:12.5px;font-weight:500;cursor:pointer;transition:border-color .2s,background-color .2s}.an-btn:hover{border-color:var(--ink,#0c0d0e)} .an-btn.dark{background:var(--ink,#0c0d0e);color:#fff;border-color:var(--ink,#0c0d0e)}.an-btn.dark:hover{background:#26272b} .an-close{border-radius:4px;width:32px;height:32px;border-radius:50%;border:1px solid var(--hair,#e5e7eb);background:#fff;font-size:18px;line-height:1;cursor:pointer;color:var(--ink-65,rgba(12,13,14,.65))}.an-close:hover{color:var(--ink,#0c0d0e);border-color:var(--ink,#0c0d0e)} /* body: document + ledger */ .an-body{flex:1;min-height:0;display:grid;grid-template-columns:1fr;grid-template-rows:1fr 1fr;overflow:hidden}@media (min-width:1024px){.an-body{grid-template-columns:7fr 5fr;grid-template-rows:1fr}} .an-doc{overflow:auto;position:relative;padding:28px 20px 100px;border-bottom:1px solid var(--hair,#e5e7eb)}@media (min-width:1024px){.an-doc{padding:36px 40px 140px;border-bottom:0;border-right:1px solid var(--hair,#e5e7eb)}} .an-page{max-width:720px;margin:0 auto;font-family:Georgia,"Times New Roman",serif;font-size:15px;line-height:1.65;color:var(--ink,#0c0d0e);position:relative} .an-page p{margin:0 0 1em} .an-page .cite{position:relative;border-bottom:1px solid transparent;transition:border-color .25s ease,background-color .25s ease;padding-bottom:1px;white-space:nowrap} .an-page .cite.on.t-green{border-bottom-color:#d1d5db} .an-page .cite.on.t-orange{border-bottom-style:dotted;border-bottom-color:rgba(12,13,14,.55)} .an-page .cite.on.t-red{border-bottom:1.5px solid #b20e01} .an-page .cite.on.t-white{border-bottom-color:#d1d5db} .an-page .cite.on.t-red.quote-bad{text-decoration:underline wavy #b20e01;text-decoration-thickness:1px;text-underline-offset:3px;border-bottom:0} .an-page .cite .fix{display:inline-block;margin-left:6px;color:#b20e01;font-family:var(--pr-font,Inter,sans-serif);font-size:12px;letter-spacing:0;white-space:nowrap;opacity:0;transform:translateX(-4px);transition:opacity .3s ease .15s,transform .3s ease .15s} .an-page .cite.on .fix{opacity:1;transform:none} .an-page .cite .dot{display:inline-block;width:0;height:6px;border-radius:50%;background:#b20e01;opacity:0;vertical-align:middle;margin-right:0;transition:opacity .3s,width .3s,margin .3s}.an-page .cite.on.t-red .dot{opacity:1;width:6px;margin-right:5px} .an-page .cite .sup{display:inline-block;margin-left:4px;font-family:Georgia,serif;color:var(--ink-45,rgba(12,13,14,.45));font-size:13px;cursor:help}.an-page .cite .sup.ok{color:#1f8444}.an-page .cite .sup.bad{color:#b20e01} .an-page .cite.focus{background:#fffbe6} .an-caret{position:absolute;width:2px;height:1.25em;background:var(--ink,#0c0d0e);top:0;left:0;opacity:0;transition:top .22s cubic-bezier(.22,1,.36,1),left .22s cubic-bezier(.22,1,.36,1),opacity .2s;pointer-events:none} .an-caret.on{opacity:1;animation:an-blink 1s steps(2,start) infinite} @keyframes an-blink{to{visibility:hidden}} .an-ledger{overflow:auto;background:var(--canvas,#f7f7f7);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:12.5px;line-height:1.5;padding:20px 18px 100px}@media (min-width:1024px){.an-ledger{padding:24px 24px 140px}} .an-ledger .hd #an-hd-r{text-transform:none;letter-spacing:0}.an-ledger .hd{display:flex;justify-content:space-between;font-family:var(--pr-font,Inter,sans-serif);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-65,rgba(12,13,14,.65));padding-bottom:8px;border-bottom:1px solid var(--ink,#0c0d0e);margin-bottom:4px} .an-ledger .ln{display:grid;grid-template-columns:28px 64px minmax(96px,150px) 1fr;column-gap:12px;padding:7px 0;border-bottom:1px solid var(--hair,#e5e7eb);opacity:0;transform:translateY(3px);transition:opacity .25s ease,transform .25s ease,background-color .2s;cursor:pointer;align-items:start} .an-ledger .ln.on{opacity:1;transform:none}.an-ledger .ln:hover{background:#fff}.an-ledger .ln.focus{background:#fff} html:not(.js) .an-ledger .ln{opacity:1;transform:none} .an-ledger .no{color:var(--ink-45,rgba(12,13,14,.45))}.an-ledger .tr{display:flex;align-items:center;gap:6px}.an-ledger .tr:before{content:"";width:6px;height:6px;border-radius:50%;background:#d1d5db;flex:0 0 6px} .an-ledger .tr.red{color:#b20e01}.an-ledger .tr.red:before{background:#b20e01}.an-ledger .tr.orange:before{background:rgba(12,13,14,.45)}.an-ledger .tr.green:before{background:#29b05a}.an-ledger .tr.white:before{background:#9ca3af} .an-ledger .ct{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.an-ledger .vd{color:var(--ink,#0c0d0e);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.an-ledger .ln.open .vd{white-space:normal} .an-ledger .vd .pend{color:var(--ink-45,rgba(12,13,14,.45));animation:an-pulse 1.2s ease-in-out infinite}@keyframes an-pulse{50%{opacity:.35}} .an-ledger .vd .sup{color:#1f8444}.an-ledger .vd .sup.bad{color:#b20e01}.an-ledger .vd .sup.no{color:var(--ink-65,rgba(12,13,14,.65))} .an-ledger .ev{grid-column:1 / -1;font-family:var(--pr-font,Inter,sans-serif);font-size:13px;line-height:1.5;color:#26272b;padding:6px 0 4px 40px;display:none} .an-ledger .ln.open .ev{display:block}.an-ledger .ev p{margin:0 0 6px}.an-ledger .ev blockquote{margin:6px 0;padding:6px 10px;border-left:2px solid #d1d5db;font-family:Georgia,serif;font-size:13px;color:#26272b}.an-ledger .ev a{color:var(--ink,#0c0d0e);text-decoration:underline;text-underline-offset:2px} .an-ledger .ft{margin-top:10px;padding-top:10px;border-top:1px solid var(--ink,#0c0d0e);color:var(--ink-65,rgba(12,13,14,.65));font-variant-numeric:tabular-nums} .an-ledger .ft b{color:var(--ink,#0c0d0e);font-weight:600}.an-ledger .ft .cur{display:inline-block;width:7px;height:12px;background:var(--ink,#0c0d0e);vertical-align:-2px;margin-left:2px;animation:an-blink 1s steps(2,start) infinite} .an-ledger .ft .fine{display:block;margin-top:8px;font-family:var(--pr-font,Inter,sans-serif);font-size:11.5px;line-height:1.45;color:var(--ink-45,rgba(12,13,14,.45));font-variant-numeric:normal} .an-empty{padding:48px 24px;font-size:15px;color:var(--ink-65,rgba(12,13,14,.65))} /* what to do (the end result) */ .an-ledger .todo{display:none;font-family:var(--pr-font,Inter,sans-serif);background:#fff;border:1px solid var(--hair,#e5e7eb);border-radius:4px;padding:14px 16px 10px;margin-bottom:24px;opacity:0;transform:translateY(4px);transition:opacity .4s ease,transform .4s ease} .an-ledger .todo.on{display:block;opacity:1;transform:none} .an-ledger .todo .th{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-65,rgba(12,13,14,.65));padding-bottom:8px;border-bottom:1px solid var(--ink,#0c0d0e);margin-bottom:4px} .an-ledger .todo .ti{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--hair,#e5e7eb);font-size:13.5px;line-height:1.4;cursor:pointer}.an-ledger .todo .ti:last-of-type{border-bottom:0} .an-ledger .todo .ti input{margin-top:3px;accent-color:var(--ink,#0c0d0e);width:14px;height:14px}.an-ledger .todo .ti.done span{color:var(--ink-45,rgba(12,13,14,.45));text-decoration:line-through} .an-ledger .todo .clear{padding:10px 0 4px;font-size:13.5px;line-height:1.45;color:var(--ink-65,rgba(12,13,14,.65))}.an-ledger .todo .clear b{color:#1f8444} @media (max-width:639px){.an-bar{gap:12px;padding:0 14px}.an-counts,#an-copy,#an-pdf{display:none}.an-name{max-width:40vw}.an-btn{padding:0 10px}.an-doc{padding:24px 18px 60px}.an-ledger{padding:18px 14px 80px}.an-ledger .ln{grid-template-columns:24px 56px 1fr;column-gap:8px}.an-ledger .ln .vd{grid-column:1 / -1;white-space:normal;color:var(--ink-65,rgba(12,13,14,.65));padding-left:32px}} .an-ledger .todo .links{display:flex;gap:14px;padding-top:8px;font-size:12.5px}.an-ledger .todo .links a{text-decoration:underline;text-underline-offset:2px;cursor:pointer}@media (min-width:640px){.an-ledger .todo .links{display:none}} .an-ledger .notice{margin-top:14px;padding:12px 14px;font-family:var(--pr-font,Inter,sans-serif);font-size:13.5px;line-height:1.45;border:1px solid var(--ink,#0c0d0e);border-radius:4px;background:#fff}.an-ledger .notice a{text-decoration:underline;text-underline-offset:2px}