/* legal-scene.css: the attorneys page scene, "labelled redaction for a court
   filing". Markup: partials/legal-stage.html. Driver: assets/legal-scene.js.
   Builds ON assets/how-it-works.css, which the host page links first: the Cover
   title bar (.wc-tb, .wc-lights, .wc-brand, .wc-fchip), the scan sweep
   (.wc-scan), the keycap (.wc-keycap) and the scene cursor (.wc-cur and its two
   cursor images) are that scene's rules, reused here, never copied. What this
   file adds is only what the How it works scene does not draw: the pleading page, the redaction hover chrome, the drag band, the label
   card, the Save menu's report checklist, and the two saved files.
   Nothing here transitions or animates: every moving value is written by the
   driver from ONE clock (SCENE_KIT rule 6). */

.legal-stage {
  /* Cover's chrome tokens. how-it-works.css declares these on its own section
     (.wc), so a stage outside that section names them again, same values,
     same sources (tour.html, which mirrors CoverKit). */
  --wc-blue: 74,143,243;                 /* --redact-blue */
  --wc-accent: #007AFF;                  /* Theme.accent */
  --wc-win: #161617;                     /* --window-bg */
  --wc-chrome-top: #1f2123; --wc-chrome-bot: #262629;
  --wc-hair: rgba(255,255,255,0.10);
  --wc-ink: #ededf0; --wc-ink2: #9a9aa1; --wc-ink3: #6d6d74; --wc-ctl: #c8c8cf;
  /* the two saved files sit on the page itself, so their shadow and names follow the site theme */
  --ls-fn: var(--text-secondary, #55595F);
  --ls-sheet-shadow: 0 0 0 .5px rgba(0,0,0,.18), 0 14px 30px -10px rgba(14,20,30,.28), 0 4px 10px rgba(14,20,30,.08);
  max-width: 640px; margin: 0 auto;
}
[data-theme="dark"] .legal-stage {
  --ls-sheet-shadow: 0 0 0 .5px rgba(255,255,255,.10), 0 14px 30px -10px rgba(0,0,0,.7);
}

/* visually hidden, read by crawlers and screen readers */
.legal-stage .ls-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---- the stage: 520x400 design units, scaled to the canvas (driver sets --k).
   The canvas reserves the same ratio before the deferred script runs, so the
   page never shifts (CLS 0). ---- */
.ls-canvas { position: relative; aspect-ratio: 520 / 380; }   /* the tallest thing ever visible is the 380-tall window (the result frame ends at 368); 400 left a dead strip above the caption (owner, 2026-10-04) */
.ls-stage {
  position: absolute; left: 0; top: 0; width: 520px; height: 400px; transform-origin: 0 0;
  transform: scale(var(--k, 1)); overflow: visible; isolation: isolate;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; cursor: default;
}
.ls-stage:not([style*="--k"]) { visibility: hidden; }
.ls-stage * { box-sizing: border-box; }

/* ---- captions: one per beat, all real text, stacked in one grid cell so the
   tallest one reserves the height and a swap never moves the page ---- */
.ls-caps { display: grid; list-style: none; margin: 12px auto 0; padding: 0 16px; max-width: 34em; text-align: center; }
.ls-caps li { grid-area: 1 / 1; margin: 0; font: 600 1.0625rem/1.45 var(--font-body, -apple-system, sans-serif); color: var(--text-primary, #1a1c1e); opacity: 0; }
.ls-caps li:first-child { opacity: 1; }

/* ---- windows ---- */
.ls-win { position: absolute; left: 0; top: 0; width: 520px; height: 380px; border-radius: 12px; overflow: hidden; }
.ls-cover { background: var(--wc-win); z-index: 2;
  box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 22px 44px -14px rgba(40,26,14,.40), 0 6px 14px rgba(40,26,14,.14); }
.ls-cover .wc-fchip { margin-left: 12px; }
.ls-cbody { position: absolute; left: 0; right: 0; top: 44px; bottom: 0; background: #2a2a2d; overflow: hidden; }

/* the Tokens toggle (RedactionModeSegmented): icon-only, Token view lit */
.ls-mode { margin-left: auto; display: flex; gap: 2px; padding: 2px; border-radius: 7px; background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.08); }
.ls-seg { width: 26px; height: 22px; border-radius: 5px; display: grid; place-content: center; gap: 2.5px;
  font: 700 11px/1 -apple-system, sans-serif; color: var(--wc-ink2); letter-spacing: -.5px; }
.ls-seg i { display: block; width: 11px; height: 2.6px; border-radius: 1px; background: currentColor; }
.ls-seg.on { background: rgba(255,255,255,.16); color: var(--wc-ink); }
/* Save + caret (ActionPillGroup savePill / chevronMenu) */
.ls-save { margin-left: 8px; display: flex; gap: 1px; padding: 3px; border-radius: 8px; background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.08); }
.ls-savep, .ls-caret { height: 24px; display: flex; align-items: center; background: var(--wc-accent); color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18); }
.ls-savep { gap: 5px; padding: 0 12px; border-radius: 6px 0 0 6px; font: 500 12.5px -apple-system, sans-serif; }
.ls-savep svg { width: 10px; height: 10px; stroke-width: 2.6; }
/* the label switches between Save and Saved; a fixed width keeps the caret still (no layout shift) */
.ls-savel { display: inline-block; min-width: 36px; text-align: center; }
.ls-caret { width: 22px; justify-content: center; border-radius: 0 6px 6px 0; }
.ls-caret svg { width: 11px; height: 11px; stroke-width: 2.2; }
.ls-caret.hov { background: #2a93ff; }
.ls-save.saved .ls-savep, .ls-save.saved .ls-caret { opacity: .6; box-shadow: none; }
.ls-save.saved .ls-caret.hov { opacity: 1; }

/* ---- the page: pleading paper, line numbers down the left ---- */
.ls-page { position: absolute; left: 28px; top: 24px; width: 312px; height: 420px; background: #fff; border-radius: 1px;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.25), 0 4px 14px rgba(0,0,0,.14); color: #1c1d20; overflow: hidden;
  font: 400 10px/14px "Times New Roman", Times, Georgia, serif; }
.ls-cbody .ls-page { top: 16px; }
.ls-page::before, .ls-page::after { content: ""; position: absolute; top: 0; bottom: 0; width: .6px; background: #b9bcc2; }
.ls-page::before { left: 26px; box-shadow: 2px 0 0 #b9bcc2; }
.ls-page::after { right: 14px; }
.ls-ln { position: absolute; left: 0; top: 14px; width: 21px; text-align: right; color: #9a9da3; font-size: 7px; line-height: 14px; }
.ls-tx { position: absolute; left: 36px; right: 22px; top: 14px; z-index: 1; }
.ls-tx p { margin: 0; text-indent: 14px; }
.ls-crt { text-align: center; font-weight: 700; letter-spacing: .04em; }
.ls-cpt { display: flex; margin: 14px 0; }
.ls-cpt > div { flex: 1; }
.ls-cpt > div:first-child { flex: 1.25; border-right: .6px solid #1c1d20; border-bottom: .6px solid #1c1d20; padding-right: 6px; }
.ls-cpt > div:last-child { padding-left: 8px; }
.ls-cpt b { font-weight: 700; }
.ls-gap { height: 14px; }
.ls-page .w { position: relative; }
/* a detected value; the driver lays its redaction and token on it */
.ls-page .pii { position: relative; display: inline-block; text-indent: 0; }   /* inline-block would inherit the paragraph indent */
.ls-page .pii .rd { position: absolute; left: -1.5px; right: -1.5px; top: 1px; bottom: 0; border-radius: 1.5px; opacity: 0; }
/* the token on a Tokens-view redaction (tokens.rs token_layout; tour.html):
   light grey Helvetica, about .7 of the text size, 2pt in from the left */
.ls-page .pii .rd::after { content: attr(data-tok); position: absolute; left: 2.5px; top: 0; bottom: 0; display: flex; align-items: center;
  font: 400 7px/1 Helvetica, Arial, sans-serif; color: rgb(184,184,184); white-space: nowrap; opacity: var(--tk, 1); }
.ls-page[data-mode="saved"] .pii .ov { visibility: hidden; }   /* the saved file: the characters are gone */
.ls-page[data-mode="saved"] .pii .rd { opacity: 1; background: #000; }
/* the drag-to-add band: the blue pill grown across the selected words */
.ls-band { position: absolute; z-index: 11; border-radius: 2px; background: rgba(74,143,243,.26); opacity: 0; pointer-events: none; }
.legal-stage .wc-bird { z-index: 25; }

/* ---- hover chrome on a redaction: corner handles, grey stem + minus badge ---- */
.ls-hov, .ls-wadd { position: absolute; left: 0; top: 0; z-index: 12; pointer-events: none; opacity: 0; }
.ls-hnd { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: rgb(var(--wc-blue)); box-shadow: 0 0 0 1px #fff; }
.ls-stem { position: absolute; width: 1.5px; height: 12px; background: rgba(140,140,140,.95); border-radius: 1px; }
.ls-stem.plus { background: rgb(var(--wc-blue)); }
.ls-bdg { position: absolute; width: 18px; height: 18px; }
.ls-bdg svg { display: block; width: 18px; height: 18px; }
.ls-wadd .ls-bdg svg { filter: drop-shadow(0 2px 3px rgba(74,143,243,.45)); }
.ls-wtint { position: absolute; border-radius: 2px; background: rgba(74,143,243,.26); }

/* the pencil: a 20pt white disc flush at the redaction's left edge */
.ls-pencil { position: absolute; left: 0; top: 0; z-index: 14; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; color: #3a3d46; opacity: 0;
  box-shadow: 0 1px 5px rgba(0,0,0,.32), 0 0 0 1px rgba(0,0,0,.06); }
.ls-pencil svg { width: 12px; height: 12px; display: block; }
.ls-pencil.hot { background: #f2f3f5; color: #111; box-shadow: 0 2px 7px rgba(0,0,0,.38), 0 0 0 1px rgba(0,0,0,.08); }

/* the label card (TokenLabelEditorView): white, 232 wide, 6pt under the redaction */
.ls-ed { position: absolute; left: 0; top: 0; z-index: 16; width: 232px; border-radius: 8px; overflow: hidden; background: #fff; opacity: 0;
  box-shadow: 0 10px 34px rgba(0,0,0,.25), 0 0 0 1px rgba(0,0,0,.08); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; }
.ls-edf { position: relative; height: 33px; padding: 8px 10px; border-bottom: 1px solid #ececef; font-size: 12px; line-height: 17px; color: #1d1f24; white-space: nowrap; }
.ls-edt.sel { background: #b3d7ff; }
.ls-edc { display: inline-block; width: 1px; height: 14px; margin-left: 1px; vertical-align: -2px; background: #1d1f24; opacity: 0; }
.ls-edl { padding: 4px; max-height: 184px; overflow: hidden; }   /* list maxHeight 176 + padding */
.ls-edt:empty::before { content: attr(data-ph); color: #a2a6b0; }    /* "Token label…" placeholder */
.ls-tsg { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 8px; border-radius: 5px; font-size: 12px; color: #23262c; white-space: nowrap; }
.ls-tsg.sel { background: rgba(74,143,243,.14); }
.ls-tsg .dot { width: 6px; height: 6px; border-radius: 3px; background: #c8cbd2; flex: none; }
.ls-tsg .pl { width: 6px; text-align: center; color: #4a8ff3; font-size: 13px; flex: none; }
.ls-tsg b { font-weight: 600; color: #1b1d22; }
.ls-tsg .kbd { margin-left: auto; font-size: 9px; color: #a2a6b0; border: 1px solid #e2e3e7; border-radius: 3px; padding: 1px 4px; }
.ls-tsg + .ls-tsg.create { box-shadow: 0 -1px 0 #f0f1f4; }
/* the redaction being relabelled: lifted solid, token readable, blue ring */
.ls-page .pii .rd.ring { outline: 2px solid rgb(var(--wc-blue)); outline-offset: 1px; }

/* ---- the Save menu (SaveOptionsMenu: #26262b panel, 268 wide) ---- */
.ls-menu { position: absolute; left: 0; top: 0; z-index: 20; width: 268px; padding: 5px; border-radius: 9px; background: #26262b;
  border: 1px solid rgba(255,255,255,.12); box-shadow: 0 14px 38px rgba(0,0,0,.55); opacity: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; }
.ls-mi { display: flex; align-items: center; gap: 9px; padding: 6px 9px; border-radius: 6px; font-size: 12px; color: var(--wc-ink); white-space: nowrap; }
.ls-mi svg { width: 14px; height: 14px; stroke-width: 1.7; color: var(--wc-ink2); flex: none; }
.ls-mi.hov { background: var(--wc-accent); color: #fff; }
.ls-mi.hov svg { color: #fff; }
.ls-mi .ls-chev { margin-left: auto; width: 9px; height: 9px; stroke-width: 1.1; transform: rotate(-90deg); }
.ls-mi.open .ls-chev { transform: none; }
.ls-rbody { display: none; position: relative; margin: 1px 0 3px; padding-left: 12px; }
.ls-mi.open + .ls-rbody { display: block; }
.ls-rbody::before { content: ""; position: absolute; left: 3px; top: 5px; bottom: 5px; width: 1px; background: rgba(255,255,255,.10); }
.ls-rrow { display: flex; align-items: center; gap: 8px; padding: 5px 9px; border-radius: 6px; font-size: 11.5px; color: var(--wc-ink); white-space: nowrap; }
.ls-rrow span { flex: 1; }
.ls-rrow b { font: 700 8px -apple-system, sans-serif; letter-spacing: .3px; color: var(--wc-ink2); padding: 1px 5px; border-radius: 4px; background: rgba(255,255,255,.08); }
.ls-cb { position: relative; width: 13px; height: 13px; flex: none; border-radius: 3px; box-shadow: inset 0 0 0 1.3px var(--wc-ink3); }
.ls-rrow.on .ls-cb, .ls-rrow.locked .ls-cb { box-shadow: none; background: var(--wc-accent); }
.ls-rrow.locked .ls-cb { background: var(--wc-ink3); }
.ls-rrow.on .ls-cb::after, .ls-rrow.locked .ls-cb::after { content: ""; position: absolute; left: 4.5px; top: 2px; width: 3px; height: 6.5px;
  border: solid #fff; border-width: 0 1.6px 1.6px 0; transform: rotate(40deg); }
.ls-rrow.locked { color: var(--wc-ink2); }
.ls-rsave { margin: 3px 9px 4px; padding: 6px 0; border-radius: 6px; text-align: center; font-size: 11.5px; color: var(--wc-ctl); background: rgba(255,255,255,.08); }
.ls-rsave.hov { color: var(--wc-ink); background: rgba(255,255,255,.14); }

/* ---- the result: the saved filing and its certificate, side by side ---- */
.ls-result { position: absolute; inset: 0; z-index: 30; display: flex; justify-content: center; gap: 14px; padding-top: 6px; opacity: 0; }
.ls-doc { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.ls-sheet { position: relative; width: 250px; height: 340px; overflow: hidden; background: #fff; border-radius: 2px; box-shadow: var(--ls-sheet-shadow); }
.ls-sheet > * { transform: scale(.8013); transform-origin: 0 0; }
.ls-sheet .ls-page { left: 0; top: 0; box-shadow: none; }
.ls-fn { font: 500 11px/1.2 -apple-system, BlinkMacSystemFont, sans-serif; color: var(--ls-fn); white-space: nowrap; }
/* the Redaction certificate (RedactionCertificateRenderer.swift): title band, identity
   grid, summary strip, "What was removed", "Per-redaction log" grouped by page */
.ls-cert { position: absolute; left: 0; top: 0; width: 312px; height: 420px; padding: 18px 20px; color: #1a1a1a;
  font: 400 7px/1.25 -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; }
.ls-cert .ls-cband { background: #292929; color: #fff; text-align: center; font-weight: 600; font-size: 9px; letter-spacing: .12em; padding: 6px 0; }  /* bandFill white .16 */
.ls-cert .ls-cdt { text-align: center; color: #6b6b6b; font-size: 7.5px; margin: 4px 0 9px; }
.ls-cert .ls-ckv { display: grid; grid-template-columns: 74px 1fr; row-gap: 2px; margin-bottom: 7px; }
.ls-cert .ls-ckv span:nth-child(odd), .ls-cert .ls-csh, .ls-cert td.c { color: #6b6b6b; }   /* ink2 white .42 */
.ls-cert .ls-cstrip { background: #f6f6f6; padding: 5px 6px; font-weight: 600; font-size: 7.5px; margin-bottom: 9px; }  /* zebra white .965 */
.ls-cert .ls-csh { font-weight: 600; font-size: 6.6px; letter-spacing: .1em; text-transform: uppercase; color: #6b6b6b; margin: 2px 0 3px; }
.ls-cert table { width: 100%; border-collapse: collapse; margin-bottom: 9px; }
.ls-cert th { text-align: left; font-weight: 600; font-size: 6px; letter-spacing: .06em; text-transform: uppercase; color: #6b6b6b; padding: 0 0 2px; border-bottom: .6px solid #9e9e9e; }
.ls-cert td { padding: 2.2px 0; border-bottom: .5px solid #d1d1d1; white-space: nowrap; }
.ls-cert td.c { font: 6.5px Menlo, ui-monospace, monospace; }
.ls-cert th.n, .ls-cert td.n { text-align: right; }
.ls-cert tr.ls-pgh td { font-weight: 600; font-size: 6px; letter-spacing: .08em; color: #6b6b6b; border-bottom: 0; padding-top: 4px; }

/* ---- the scene cursor: how-it-works.css draws the arrow and the I-beam; the
   two hands (pointing over the pencil, open over a redaction's body) are
   drawn here as the macOS cursors ---- */
.wc-cur .ls-hand, .wc-cur .ls-open { position: absolute; display: none; width: 22px; height: 24px; background-repeat: no-repeat; background-size: 100% 100%; }
.wc-cur .ls-hand { left: -8px; top: -2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 24'%3E%3Cpath d='M8.2 1.3c1 0 1.8.8 1.8 1.8v6.2c.3-.6.9-.9 1.6-.9 1 0 1.8.7 1.8 1.6.4-.5.9-.7 1.5-.7 1 0 1.8.8 1.8 1.7.3-.3.8-.5 1.3-.5 1 0 1.8.8 1.8 1.8v4.4c0 3.6-2.6 6.3-6.2 6.3h-2.3c-2.2 0-3.6-.9-4.9-2.7l-3.6-4.9c-.6-.8-.4-1.9.4-2.4.7-.5 1.7-.4 2.3.3l1 1.2V3.1c0-1 .8-1.8 1.7-1.8z' fill='%23fff' stroke='%23000' stroke-width='1.1' stroke-linejoin='round'/%3E%3Cpath d='M10 9.4v5M13.4 10.4v4.6M16.7 11.6v3.4' stroke='%23000' stroke-width='.9' stroke-linecap='round'/%3E%3C/svg%3E"); }
.wc-cur .ls-open { left: -11px; top: -11px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 24'%3E%3Cpath d='M6.6 6.2c0-.9.7-1.6 1.6-1.6s1.6.7 1.6 1.6V4c0-.9.7-1.6 1.6-1.6S13 3.1 13 4v1.5c0-.9.7-1.6 1.6-1.6s1.6.7 1.6 1.6v2.4c0-.9.7-1.6 1.6-1.6s1.6.7 1.6 1.6v8c0 3.9-2.7 6.7-6.6 6.7h-1.6c-2.3 0-3.7-.8-5-2.6L2.4 13c-.6-.8-.4-1.9.4-2.4.7-.5 1.7-.4 2.3.3l1.5 1.8z' fill='%23fff' stroke='%23000' stroke-width='1.1' stroke-linejoin='round'/%3E%3Cpath d='M9.8 6v6.4M13 5.5v6.9M16.2 7.9v4.6' stroke='%23000' stroke-width='.9' stroke-linecap='round'/%3E%3C/svg%3E"); }
.wc-cur[data-s="hand"] .ls-hand, .wc-cur[data-s="open"] .ls-open { display: block; }
.legal-stage .wc-keycap { z-index: 31; left: 0; top: 0; }
/* every overlay piece starts at the stage origin; the driver moves it by transform */
.ls-hnd, .ls-stem, .ls-bdg, .ls-wtint, .ls-band { left: 0; top: 0; }
.legal-stage .wc-cur { z-index: 40; }