/* ProveAIble web — mockup design language, wired to the live core. */

  @property --a{syntax:'<angle>';initial-value:0deg;inherits:false}
  :root{
    color-scheme:dark;
    --primary:#3543F0; --primary-hi:#6B7BF5; --primary-soft:rgba(53,67,240,.14);
    --bg:#080810; --surface:rgba(255,255,255,.055); --surface-hover:rgba(255,255,255,.10);
    /* FORTY-EIGHT RULES ASKED FOR A COLOUR THAT DID NOT EXIST.
       --line was referenced 48 times and defined nowhere, so every one of those
       declarations was invalid and dropped: separators, table rules and card
       borders simply were not drawn. It is why the next-step card leaned on a
       3px coloured strip — that strip was the only edge it actually had. */
    --border:rgba(255,255,255,.09); --border-strong:rgba(255,255,255,.17);
    --line:rgba(255,255,255,.09);
    --text:#f1f5f9; --muted:#6b7893; --subtle:#94a3b8;
    --success:#4ade80; --glass:rgba(16,14,32,.72);
    --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --font-disp:'Fraunces','Georgia',serif;
    --font-logo:'Poppins','Inter',sans-serif; --font-mono:'JetBrains Mono',monospace;
    --rail:64px; --rail-open:226px; --header-h:56px;
    --ease:cubic-bezier(.4,0,.2,1); --spring:cubic-bezier(.34,1.4,.44,1);
    --scroll:rgba(255,255,255,.13);
    --wash:radial-gradient(1100px 520px at 50% -12%, rgba(53,67,240,.10), transparent 68%);
    --pillbg:rgba(16,14,32,.72);
  }
  html[data-theme="light"]{
    color-scheme:light;
    --primary:#3543F0; --primary-hi:#3543F0; --primary-soft:rgba(53,67,240,.10);
    --bg:#F5F4F1; --surface:rgba(255,255,255,.62); --surface-hover:rgba(255,255,255,.95);
    /* FORTY-EIGHT RULES ASKED FOR A COLOUR THAT DID NOT EXIST.
       --line was referenced 48 times and defined nowhere, so every one of those
       declarations was invalid and dropped: separators, table rules and card
       borders simply were not drawn. It is why the next-step card leaned on a
       3px coloured strip — that strip was the only edge it actually had. */
    --border:rgba(12,35,64,.11); --border-strong:rgba(12,35,64,.20);
    --line:rgba(12,35,64,.11);
    --text:#131629; --muted:#6a6f80; --subtle:#454a61; --glass:rgba(255,255,255,.82);
    --scroll:rgba(12,35,64,.16);
    --wash:radial-gradient(1100px 520px at 50% -12%, rgba(53,67,240,.06), transparent 66%);
    --pillbg:rgba(255,255,255,.85);
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);line-height:1.5;-webkit-font-smoothing:antialiased;overflow:hidden}
  *::-webkit-scrollbar{width:7px;height:7px}
  *::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:99px}
  *::-webkit-scrollbar-track{background:transparent}
  *{scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
  svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
  button{font:inherit;border:none;background:none;color:inherit;cursor:pointer;padding:0}

  .wash{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--wash)}
  .grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.04;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
  html[data-theme="light"] .grain{opacity:.03;mix-blend-mode:multiply}

  .app{position:relative;z-index:1;display:flex;flex-direction:column;height:100vh}

  /* ═══ ANIMATION PRIMITIVES ═══ */
  @keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @keyframes riseSoft{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  @keyframes popIn{0%{opacity:0;transform:scale(.92) translateY(8px)}100%{opacity:1;transform:none}}
  @keyframes toastIn{from{opacity:0;transform:translate(-50%,14px) scale(.96)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
  @keyframes badgePulse{0%,100%{box-shadow:0 0 0 0 rgba(53,67,240,.45)}55%{box-shadow:0 0 0 7px rgba(53,67,240,0)}}
  @keyframes dotPulse{0%,100%{box-shadow:0 0 0 4px var(--primary-soft)}50%{box-shadow:0 0 0 8px transparent}}
  @keyframes spin{to{transform:rotate(360deg)}}
  @keyframes drawline{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  @keyframes textShimmer{from{background-position:200% 0}to{background-position:-200% 0}}
  @keyframes rot{to{--a:360deg}}
  @keyframes greetOut{to{opacity:0;transform:translateY(-14px) scale(.98);height:0;padding:0;margin:0}}
  .stagger>*{animation:rise .5s var(--ease) both}
  .stagger>*:nth-child(1){animation-delay:.03s}.stagger>*:nth-child(2){animation-delay:.08s}
  .stagger>*:nth-child(3){animation-delay:.13s}.stagger>*:nth-child(4){animation-delay:.18s}
  .stagger>*:nth-child(5){animation-delay:.23s}.stagger>*:nth-child(6){animation-delay:.28s}
  .stagger>*:nth-child(7){animation-delay:.33s}.stagger>*:nth-child(8){animation-delay:.38s}
  /* liquid-metal sheen — a light sweep across primary surfaces */
  .sheen{position:relative;overflow:hidden}
  .sheen::after{content:"";position:absolute;top:-60%;bottom:-60%;inset-inline-start:-30%;width:45%;pointer-events:none;
    transform:skewX(-20deg) translateX(-240%);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);
    transition:transform .75s var(--ease)}
  .sheen:hover::after{transform:skewX(-20deg) translateX(340%)}
  /* liquid-metal border — slow conic light circling the edge */
  .illum{position:relative}
  .illum::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
    background:conic-gradient(from var(--a),transparent 0 30%,rgba(107,123,245,.55) 50%,transparent 70% 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
    animation:rot 5.5s linear infinite}
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  }

  /* ── TOP BAR ── */
  .top{display:flex;align-items:center;gap:14px;height:var(--header-h);padding:0 16px;border-bottom:1px solid var(--border);
    background:rgba(10,9,22,.45);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);position:relative;z-index:60}
  html[data-theme="light"] .top{background:rgba(245,244,241,.6)}
  .burger{display:none;color:var(--subtle);cursor:pointer;width:38px;height:38px;border-radius:99px;place-items:center}
  .burger:hover{background:var(--surface);color:var(--text)}
  .logo{display:flex;align-items:center;gap:4px}
  .lg-ic{width:34px;height:34px;object-fit:contain;margin-inline-end:-6px}
    .lg-nm{font-family:var(--font-logo);font-weight:700;font-size:15px;letter-spacing:.5px;color:var(--text);white-space:nowrap}
  .lg-i{font-size:11px;text-transform:lowercase;color:#3543F0}
  .casechip{color:var(--muted);font-size:13px;padding-inline-start:14px;margin-inline-start:2px;border-inline-start:1px solid var(--border);display:flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap}
  .casechip:hover{color:var(--text)}
  .stats{display:flex;gap:8px;margin:0 auto}
  .stat{display:flex;align-items:center;gap:7px;padding:6px 13px;border:1px solid var(--border);border-radius:999px;background:var(--surface);
    font-size:12.5px;color:var(--subtle);cursor:pointer;transition:transform .18s var(--spring),background .18s,border-color .18s,color .18s}
  .stat:hover{background:var(--surface-hover);color:var(--text);border-color:var(--border-strong);transform:translateY(-1px)}
  .stat:active{transform:translateY(0) scale(.97)}
  .stat b{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
  .stat.f b{color:var(--primary-hi)}
  .stat svg{width:13px;height:13px;opacity:.8}
  .tacts{display:flex;align-items:center;gap:4px}
  .ibtn{width:36px;height:36px;border-radius:99px;display:grid;place-items:center;color:var(--subtle);cursor:pointer;position:relative;
    transition:transform .18s var(--spring),background .15s,color .15s}
  .ibtn:hover{background:var(--surface);color:var(--text);transform:translateY(-1px)}
  .ibtn:active{transform:scale(.94)}
  .ibtn .qbadge{position:absolute;top:2px;inset-inline-end:2px;min-width:15px;height:15px;border-radius:99px;background:var(--primary);color:#fff;
    font-size:9.5px;font-weight:700;display:grid;place-items:center;padding:0 4px;animation:badgePulse 2.6s ease-out infinite}

  .body{flex:1;display:flex;min-height:0;position:relative}
  .backdrop{display:none}

  /* ── RAIL ── */
  .rail{width:var(--rail);flex:none;background:rgba(10,9,22,.55);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    border-inline-end:1px solid var(--border);display:flex;flex-direction:column;padding:10px 0 8px;overflow:hidden;transition:width .28s var(--ease);z-index:50}
  html[data-theme="light"] .rail{background:rgba(255,255,255,.5)}
  .rail:hover{width:var(--rail-open)}
  .lbl{opacity:0;transition:opacity .18s;white-space:nowrap}
  .rail:hover .lbl{opacity:1}
  .ic{width:48px;flex:none;display:grid;place-items:center}
  .newcase{display:flex;align-items:center;height:44px;margin:2px 8px 8px;border-radius:12px;cursor:pointer;color:var(--muted);transition:background .15s,color .15s}
  .newcase:hover{background:var(--surface);color:var(--text)}
  .newcase .ic b{width:30px;height:30px;border-radius:50%;background:var(--surface);border:1px solid var(--border-strong);display:grid;place-items:center;transition:transform .2s var(--spring)}
  .newcase:hover .ic b{transform:rotate(90deg)}
  .newcase .ic svg{width:15px;height:15px}
  .newcase .lbl{font-size:13.5px;font-weight:600}
  .nav{display:flex;flex-direction:column;gap:2px;padding:0}
  .nav a{display:flex;align-items:center;height:42px;margin:0 8px;border-radius:11px;color:var(--subtle);cursor:pointer;position:relative;transition:background .15s,color .15s}
  .nav a .ic svg{transition:transform .2s var(--spring)}
  .nav a:hover .ic svg{transform:translateY(-1px) scale(1.06)}
  .nav a .lbl{font-size:13.5px;font-weight:500}
  .nav a:hover{background:var(--surface);color:var(--text)}
  .nav a.on{background:var(--primary-soft);color:var(--primary-hi)}
  .nav a .bdg{margin-inline-start:auto;margin-inline-end:14px;font-size:10px;font-weight:700;background:var(--primary-soft);color:var(--primary-hi);padding:1px 7px;border-radius:99px;opacity:0}
  .rail:hover .nav a .bdg{opacity:1}
  .seclbl{font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:16px 16px 6px;white-space:nowrap;opacity:0;transition:opacity .18s}
  .rail:hover .seclbl{opacity:1}
  .convos{flex:1;overflow-y:auto;overflow-x:hidden;padding:0 8px;min-height:0}
  /* conversation rows — label glides left on hover so the full title reads */
  .cv{display:flex;align-items:center;height:34px;padding:0 12px;border-radius:9px;color:var(--muted);font-size:12.5px;cursor:pointer;white-space:nowrap;overflow:hidden;transition:background .15s,color .15s;position:relative}
  .cv .lbl{will-change:transform}
  .cv::after{content:"";position:absolute;inset-inline-end:0;top:0;bottom:0;width:22px;background:linear-gradient(90deg,transparent,rgba(10,9,22,.9));pointer-events:none;opacity:0;transition:opacity .2s}
  html[data-theme="light"] .cv::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.9))}
  .rail:hover .cv.of::after{opacity:1}
  .cv:hover{background:var(--surface);color:var(--text)}
  .cv:hover::after{opacity:0!important}
  @media(min-width:1001px){ .rail:not(:hover) .convos,.rail:not(:hover) .seclbl{display:none} }
  .rfoot{display:flex;align-items:center;height:50px;border-top:1px solid var(--border);margin-top:6px}
  .avwrap{width:48px;flex:none;display:grid;place-items:center;margin-inline-start:8px}
  .ava{width:30px;height:30px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700}
  .rfoot .nm{font-size:12.5px;font-weight:600}.rfoot .pl{font-size:11px;color:var(--muted)}
  .rfoot .set{margin-inline-start:auto;margin-inline-end:16px;color:var(--muted);cursor:pointer;opacity:0}
  .rail:hover .rfoot .set{opacity:1}

  /* ── MAIN ── */
  .main{flex:1;display:flex;min-height:0;overflow:hidden}
  .view{flex:1;display:none;flex-direction:column;min-height:0}
  .view.on{display:flex}
  .view.on .vin{animation:riseSoft .34s var(--ease) both}
  .scroll{flex:1;overflow:auto;padding:26px 30px}
  .maxw{max-width:860px;margin:0 auto}
  h3.sh{font-family:var(--font-disp);font-weight:500;font-size:27px;margin:0 0 3px;letter-spacing:-.01em}
  .sub{color:var(--muted);font-size:13px;margin:0 0 20px}
  .lab{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:26px 2px 13px;display:flex;justify-content:space-between;align-items:center}
  .lab a{color:var(--primary-hi);text-transform:none;letter-spacing:0;font-size:12px;text-decoration:none;font-weight:600;cursor:pointer}

  /* ── ASSISTANT ── */
  .chat{display:flex;flex-direction:column;gap:20px}
  .greet{text-align:center;padding:56px 0 8px;overflow:hidden}
  .greet.out{animation:greetOut .5s var(--ease) forwards}
  .greet .st{width:28px;height:28px;margin:0 auto 16px;color:var(--primary-hi);animation:spin 26s linear infinite}
  .greet h2{font-family:var(--font-disp);font-style:italic;font-weight:400;font-size:34px;margin:0;letter-spacing:-.01em}
  .greet p{color:var(--muted);font-size:14px;margin:10px 0 0}
  /* welcome suggestions — where the AI meets the user */
  .sugg{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;padding:8px 0 20px}
  .sugg.out{animation:greetOut .4s var(--ease) forwards}
  .sg{font-size:12.5px;font-weight:500;padding:9px 16px;border-radius:999px;border:1px solid var(--border-strong);background:var(--surface);color:var(--subtle);
    transition:transform .18s var(--spring),background .15s,color .15s,border-color .15s}
  .sg:hover{background:var(--surface-hover);color:var(--text);transform:translateY(-1px)}
  .sg:active{transform:scale(.95)}
  .sg.p{border-color:rgba(53,67,240,.4);color:var(--primary-hi);background:var(--primary-soft)}
  .msg{max-width:86%;font-size:14px;line-height:1.65;animation:riseSoft .4s var(--ease) both}
  .msg.u{align-self:flex-end;background:var(--surface);border:1px solid var(--border);padding:11px 15px;border-radius:16px 16px 4px 16px}
  .msg.a .who{font-size:12px;color:var(--muted);font-weight:600;margin-bottom:6px}
  .msg.a p{margin:0 0 10px}
  .cite{color:var(--primary-hi);font-weight:600;text-decoration:none;border-bottom:1px solid var(--primary-soft);cursor:pointer;transition:border-color .15s}
  .cite:hover{border-color:var(--primary-hi)}
  .hid{display:none!important}

  /* ── DYNAMIC THINKING — live agent steps, illumination through the active line ── */
  .think{max-width:86%;border:1px solid var(--border);border-radius:13px;padding:12px 15px;background:var(--glass);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);animation:riseSoft .35s var(--ease) both}
  .think .tdone{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);padding:2.5px 0;animation:riseSoft .3s var(--ease) both}
  .think .tdone svg{width:11px;height:11px;stroke:var(--success)}
  .think .tlive{display:flex;align-items:center;gap:8px;padding:3px 0}
  .think .tlive .sp{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--primary-soft);border-top-color:var(--primary-hi);animation:spin .9s linear infinite;flex:none}
  .think .tlive span{font-size:12.5px;font-weight:500;
    background:linear-gradient(90deg,var(--muted) 30%,var(--text) 50%,var(--muted) 70%);background-size:200% 100%;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
    animation:textShimmer 1.6s linear infinite}

  /* inline QUESTION + ARTIFACT cards */
  .qinline{max-width:86%;background:var(--glass);border:1px solid var(--border);border-radius:14px;padding:14px 16px;
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);animation:popIn .45s var(--spring) both}
  .qinline .qt{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--primary-hi);display:flex;align-items:center;gap:6px;margin-bottom:8px}
  .qinline .qt svg{width:13px;height:13px}
  .qinline .qq{font-size:13.5px;font-weight:600;line-height:1.5;margin-bottom:12px}
  .qacts{display:flex;gap:8px;flex-wrap:wrap}
  .qbtn{font-size:12px;font-weight:600;padding:8px 16px;border-radius:10px;border:1px solid var(--border-strong);background:var(--surface);color:var(--text);
    transition:transform .16s var(--spring),background .15s,border-color .15s}
  .qbtn:hover{background:var(--surface-hover)}
  .qbtn:active{transform:scale(.95)}
  .qbtn.p{background:var(--primary);color:#fff;border-color:var(--primary)}
  .qbtn.p:hover{filter:brightness(1.15)}
  .artcard{max-width:86%;display:flex;align-items:center;gap:13px;background:var(--glass);border:1px solid var(--border);border-radius:14px;padding:12px 14px;cursor:pointer;
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transition:transform .2s var(--spring),border-color .2s,box-shadow .2s;animation:popIn .45s var(--spring) both}
  .artcard:hover{transform:translateY(-2px);border-color:var(--border-strong);box-shadow:0 12px 28px -14px rgba(0,0,0,.5)}
  .artcard .ai{width:40px;height:48px;border-radius:7px;background:linear-gradient(160deg,var(--primary-soft),transparent);border:1px solid var(--border);display:grid;place-items:center;color:var(--primary-hi);flex:none}
  .artcard .at{font-size:13px;font-weight:600}
  .artcard .am{font-size:11px;color:var(--muted);margin-top:2px;display:flex;align-items:center;gap:6px}
  .artcard .av{font-size:9.5px;font-weight:700;background:var(--primary-soft);color:var(--primary-hi);padding:1px 6px;border-radius:5px}
  .artcard .go{margin-inline-start:auto;color:var(--muted);transition:transform .2s var(--spring),color .15s}
  .artcard:hover .go{transform:translateX(3px);color:var(--primary-hi)}

  .composer{padding:14px 22px 20px}
  .cbar{max-width:860px;margin:0 auto;border:1px solid var(--border-strong);border-radius:16px;background:var(--glass);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    padding:11px 12px;display:flex;align-items:center;gap:10px;transition:box-shadow .3s,border-color .3s,transform .3s var(--spring)}
  .cbar:focus-within,.cbar.glow{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);transform:translateY(-2px)}
  .cbar .ph{flex:1;color:var(--muted);font-size:13.5px}
  .cbar .mchip{font-size:11px;color:var(--subtle);background:var(--surface);padding:4px 9px;border-radius:8px;font-weight:600}
  .cb{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;color:var(--subtle);cursor:pointer;transition:transform .16s var(--spring),background .15s,color .15s}
  .cb:hover{background:var(--surface);color:var(--text)}
  .cb:active{transform:scale(.9)}
  .cb.send{background:var(--primary);color:#fff}.cb.send svg{stroke:#fff;transition:transform .2s var(--spring)}
  .cb.send:hover{filter:brightness(1.15)}.cb.send:hover svg{transform:translateY(-1.5px)}

  /* ── QUICK-VIEW SHEET ── */
  .qv{position:fixed;top:calc(var(--header-h) + 10px);inset-inline-end:14px;width:min(400px,calc(100vw - 28px));z-index:80;
    background:var(--glass);backdrop-filter:blur(32px) saturate(140%);-webkit-backdrop-filter:blur(32px) saturate(140%);
    border:1px solid var(--border-strong);border-radius:18px;padding:16px;box-shadow:0 30px 70px -20px rgba(0,0,0,.65);
    opacity:0;transform:translateY(-8px) scale(.97);pointer-events:none;transition:opacity .22s var(--ease),transform .28s var(--spring)}
  .qv.open{opacity:1;transform:none;pointer-events:auto}
  .qv .qvh{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
  .qv .qvh b{font-family:var(--font-disp);font-size:18px;font-weight:500}
  .qv .qvh span{font-size:11px;color:var(--muted)}
  .qvitem{border:1px solid var(--border);border-radius:13px;padding:13px 14px;margin-bottom:9px;background:var(--surface);transition:border-color .15s,transform .18s var(--spring)}
  .qvitem:hover{border-color:var(--border-strong);transform:translateX(2px)}
  .qvitem .k{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--primary-hi);display:flex;align-items:center;gap:5px;margin-bottom:5px}
  .qvitem .k.dl{color:var(--text)}
  .qvitem .k svg{width:12px;height:12px}
  .qvitem .t{font-size:13px;font-weight:600;line-height:1.45}
  .qvitem .d{font-size:11.5px;color:var(--muted);margin-top:3px}
  .qvitem .qacts{margin-top:10px}
  .qvitem .qbtn{padding:6px 13px;font-size:11.5px}

  /* ── TOAST ── */
  .toast{position:fixed;inset-inline-start:50%;bottom:92px;transform:translate(-50%,14px);z-index:90;display:flex;align-items:center;gap:10px;
    background:var(--glass);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--border-strong);
    border-radius:99px;padding:9px 9px 9px 16px;box-shadow:0 18px 44px -12px rgba(0,0,0,.55);opacity:0;pointer-events:none;cursor:pointer}
  .toast.show{animation:toastIn .5s var(--spring) both;opacity:1;pointer-events:auto}
  .toast .td{width:7px;height:7px;border-radius:50%;background:var(--primary-hi);animation:dotPulse 2.4s ease-in-out infinite}
  .toast .tt{font-size:12.5px;font-weight:600}
  .toast .tb{font-size:11.5px;font-weight:700;color:var(--primary-hi);background:var(--primary-soft);border-radius:99px;padding:5px 12px}

  /* ── GALLERY ── */
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
  .card{position:relative;border-radius:11px;overflow:hidden;cursor:pointer;background:var(--glass);border:1px solid var(--border);
    transition:transform .22s var(--spring),box-shadow .22s,border-color .22s}
  .card:hover{transform:translateY(-4px);box-shadow:0 16px 36px -12px rgba(0,0,0,.55);border-color:var(--border-strong)}
  .card:active{transform:translateY(-1px) scale(.985)}
  .spot{position:relative}
  .spot::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
    background:radial-gradient(180px circle at var(--mx,50%) var(--my,50%), rgba(107,123,245,.14), transparent 70%)}
  .spot:hover::after{opacity:1}
  .thumb{height:150px;position:relative;overflow:hidden;background:linear-gradient(160deg,#141726,#0c0e1a)}
  html[data-theme="light"] .thumb{background:linear-gradient(160deg,#fff,#e9e7e1)}
  .page{position:absolute;inset:14px 16px;background:#f6f6f4;border-radius:2px;box-shadow:0 6px 16px rgba(0,0,0,.35);padding:11px 12px;overflow:hidden;transition:transform .3s var(--ease)}
  .card:hover .page{transform:translateY(-2px)}
  .page .ttl{height:6px;width:60%;background:#26324a;border-radius:2px;margin-bottom:8px}
  .page .ln{height:3px;background:#c9cdd6;border-radius:2px;margin-bottom:5px}
  .page .ln.s{width:88%}.page .ln.m{width:96%}.page .ln.x{width:70%}
  .page.law{background:linear-gradient(150deg,#1b2450,#101636);display:grid;place-items:center;box-shadow:none}
  .page.law svg{width:38px;height:38px;color:var(--primary-hi);stroke-width:1.4;opacity:.9}
  .ovl{position:absolute;inset-inline-start:0;inset-inline-end:0;bottom:0;padding:9px 11px;background:linear-gradient(transparent,rgba(6,6,14,.9))}
  .ovl .t{font-size:11.5px;font-weight:600;color:#fff;line-height:1.3}
  .ovl .dt{font-size:10px;color:rgba(255,255,255,.62);margin-top:2px}
  .st-badge{position:absolute;top:7px;inset-inline-end:7px;width:22px;height:22px;border-radius:50%;background:var(--success);display:grid;place-items:center;box-shadow:0 2px 8px rgba(74,222,128,.4)}
  .st-badge svg{width:11px;height:11px;stroke:#08110a;stroke-width:2.4}
  .st-pill{position:absolute;top:7px;inset-inline-end:7px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;border-radius:5px}
  .st-pill.pend{background:rgba(148,163,184,.22);color:var(--subtle)}
  .st-pill.fetch{background:var(--primary-soft);color:var(--primary-hi)}
  .use{display:flex;flex-wrap:wrap;gap:4px;position:absolute;inset-inline-start:8px;inset-inline-end:8px;bottom:34px}
  .utag{font-size:9px;font-weight:600;background:rgba(53,67,240,.35);color:#dfe2ff;padding:2px 6px;border-radius:4px;backdrop-filter:blur(4px)}
  .filters{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
  .fchip{font-size:12px;font-weight:500;padding:6px 13px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--subtle);
    transition:transform .16s var(--spring),background .15s,color .15s,border-color .15s}
  .fchip:hover{color:var(--text)}
  .fchip:active{transform:scale(.94)}
  .fchip.on{background:var(--surface-hover);color:var(--text);border-color:var(--border-strong)}

  /* ── CASE MAP tiles ── */
  .tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
  .tile{grid-column:span 2;background:var(--glass);border:1px solid var(--border);border-radius:16px;padding:16px;cursor:pointer;position:relative;overflow:hidden;
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transition:transform .22s var(--spring),border-color .22s,box-shadow .22s}
  .tile:hover{transform:translateY(-3px);border-color:var(--border-strong);box-shadow:0 16px 36px -14px rgba(0,0,0,.5)}
  .tile.w3{grid-column:span 3}.tile.w6{grid-column:span 6}
  .tile .tk{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:9px;display:flex;align-items:center;gap:6px}
  .tile .tk svg{width:12px;height:12px}
  .tile .tv{font-family:var(--font-disp);font-size:21px;font-weight:500;letter-spacing:-.01em;line-height:1.25}
  .tile .ts{font-size:12px;color:var(--muted);margin-top:4px}
  .tile .go{position:absolute;top:14px;inset-inline-end:14px;color:var(--muted);opacity:0;transition:opacity .2s,transform .2s var(--spring)}
  .tile:hover .go{opacity:1;transform:translateX(2px)}
  .tile .pd{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--primary-hi);margin-inline-end:9px;animation:dotPulse 2.8s ease-in-out infinite;vertical-align:2px}
  .ring{display:flex;align-items:center;gap:14px}
  .ring svg{width:58px;height:58px;transform:rotate(-90deg)}
  .ring circle{fill:none;stroke-width:4.5}
  .ring .bgc{stroke:var(--border)}
  .ring .fgc{stroke:var(--primary);stroke-linecap:round;stroke-dasharray:151;stroke-dashoffset:151;transition:stroke-dashoffset 1.2s cubic-bezier(.3,.7,.2,1)}
  .ring .rn{font-family:var(--font-disp);font-size:22px;font-weight:500}
  .ring .rl{font-size:11px;color:var(--muted)}
  .mtl{display:flex;align-items:center;margin-top:12px}
  .mtl .md{width:9px;height:9px;border-radius:50%;border:2px solid var(--primary);background:var(--primary-soft);flex:none}
  .mtl .md.hot{background:var(--primary)}
  .mtl .mc{height:2px;flex:1;background:var(--border)}
  .mtl-labels{display:flex;justify-content:space-between;font-size:9.5px;color:var(--muted);margin-top:7px;font-family:var(--font-mono)}
  .bars{display:flex;gap:5px;align-items:flex-end;height:34px;margin-top:12px}
  .bars i{flex:1;border-radius:3px 3px 0 0;background:var(--primary-soft);position:relative;overflow:hidden}
  .bars i::after{content:"";position:absolute;inset:0;background:var(--primary);opacity:.75;transform:scaleY(var(--h,.5));transform-origin:bottom;transition:transform .8s var(--ease)}
  .bars i:nth-child(1){--h:1}.bars i:nth-child(2){--h:.66}.bars i:nth-child(3){--h:.33}
  .bars-labels{display:flex;gap:5px;margin-top:6px}
  .bars-labels span{flex:1;text-align:center;font-size:8.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;font-weight:600}
  .fan{position:relative;height:56px;margin-top:8px}
  .fan .fp{position:absolute;width:42px;height:54px;background:#f6f6f4;border-radius:3px;box-shadow:0 4px 12px rgba(0,0,0,.35);padding:6px 6px 0;transition:transform .3s var(--spring)}
  .fan .fp i{display:block;height:2.5px;background:#c9cdd6;border-radius:2px;margin-bottom:3.5px}
  .fan .fp i:first-child{background:#26324a;width:65%}
  .fan .fp:nth-child(1){inset-inline-start:0;transform:rotate(-5deg)}
  .fan .fp:nth-child(2){inset-inline-start:34px;transform:rotate(1deg);z-index:1}
  .fan .fp:nth-child(3){inset-inline-start:68px;transform:rotate(6deg)}
  .tile:hover .fan .fp:nth-child(1){transform:rotate(-8deg) translateY(-3px)}
  .tile:hover .fan .fp:nth-child(3){transform:rotate(9deg) translateY(-3px)}
  .pp{display:flex;align-items:center;margin-top:10px}
  .pp .pa{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;border:2px solid var(--bg);transition:transform .2s var(--spring)}
  .pp .pa+.pa{margin-inline-start:-9px}
  .tile:hover .pp .pa:hover{transform:translateY(-3px)}
  .pp .pa.c{background:var(--primary)}
  .pp .pa.o{background:#3a4160}
  .pp .pa.k{background:#232a45;font-size:10px}
  .fact{display:flex;gap:10px;align-items:flex-start;padding:11px 8px;border-radius:10px;cursor:pointer;transition:background .15s}
  .fact:hover{background:var(--surface)}
  .fact .tx{font-size:13px;line-height:1.5;flex:1}
  .fact .src{display:inline-block;margin-top:5px;font-size:10px;color:var(--muted);background:var(--surface);padding:2px 7px;border-radius:6px;font-weight:600}
  /* a fact another record argues with is not a fact yet — it reads that way */
  .fact.clash{background:rgba(214,86,86,.10)}
  .fact .fx{display:inline-block;margin-inline-start:8px;font-size:9.5px;font-weight:700;letter-spacing:.04em;
    padding:2px 8px;border-radius:99px;vertical-align:1px}
  .fact .fx.bad{background:rgba(214,86,86,.18);color:#ff9b9b}
  .fact .fx.ok{background:rgba(47,158,143,.16);color:#7fd6c9}
  :root[data-theme="light"] .fact .fx.bad{color:#b23636}
  :root[data-theme="light"] .fact .fx.ok{color:#1d7a6d}
  /* a finding that is two records side by side */
  .fcard.differ{border-color:rgba(214,86,86,.34)}
  .fcard.differ .ft{color:#ff9b9b}
  .fcard.differ .fq:first-of-type{background:rgba(214,86,86,.08)}
  .fhow{margin-inline-start:auto;font-size:9px;font-weight:600;letter-spacing:.05em;text-transform:none;
    color:var(--muted);background:var(--surface);padding:2px 8px;border-radius:99px}
  .fact .edit{opacity:0;color:var(--muted);flex:none;margin-top:2px;transition:opacity .15s}
  .fact:hover .edit{opacity:1}.fact .edit:hover{color:var(--primary-hi)}
  .nb{font-size:9.5px;font-weight:700;text-transform:uppercase;color:var(--primary-hi);background:var(--primary-soft);padding:1px 6px;border-radius:5px;margin-inline-start:6px}

  /* ── FINDINGS / STRATEGY ── */
  .fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
  .fcard{background:var(--glass);border:1px solid var(--border);border-radius:13px;padding:16px;cursor:pointer;transition:transform .22s var(--spring),border-color .22s,box-shadow .22s}
  .fcard:hover{border-color:var(--border-strong);transform:translateY(-3px);box-shadow:0 14px 32px -14px rgba(0,0,0,.5)}
  .fcard .ft{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--primary-hi);margin-bottom:9px;display:flex;align-items:center;gap:6px}
  .fcard .ft svg{width:13px;height:13px}
  .fcard .fh{font-size:14px;font-weight:600;margin-bottom:10px;line-height:1.4}
  .fq{font-size:11.5px;line-height:1.45;padding:9px 11px;border-radius:9px;background:var(--surface);color:var(--subtle);margin-bottom:7px}
  .fq b{display:block;font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:3px}
  .fsrc{font-size:10.5px;color:var(--muted);font-weight:600;margin-top:9px;display:inline-block}
  .scard{border:1px solid var(--border);border-radius:14px;padding:17px;background:var(--glass);cursor:pointer;transition:transform .22s var(--spring),border-color .22s,box-shadow .22s}
  .scard:hover{border-color:var(--border-strong);transform:translateY(-3px);box-shadow:0 14px 32px -14px rgba(0,0,0,.5)}
  .scard .stag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--primary-hi);margin-bottom:8px}
  .scard h4{font-family:var(--font-disp);font-size:19px;margin:0 0 7px;font-weight:500;letter-spacing:-.01em}
  .scard p{font-size:12.5px;color:var(--subtle);margin:0;line-height:1.55}
  .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
  .chip{font-size:11px;font-weight:600;padding:4px 10px;border-radius:99px;background:var(--primary-soft);color:var(--primary-hi)}
  .chip::before{content:"§ ";opacity:.6}

  /* ── TIMELINE ── */
  .tl-year-pill{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.5px;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:4px 16px;margin:0 0 16px 12px}
  .tl-entry{display:flex;cursor:pointer;position:relative}
  .tl-entry:hover .tl-card{border-color:var(--border-strong);background:var(--surface-hover);transform:translateX(3px)}
  .tl-spine-col{display:flex;flex-direction:column;align-items:center;width:52px;flex-shrink:0}
  .tl-date-circle{width:44px;height:44px;border-radius:50%;border:2px solid var(--primary);background:var(--primary-soft);display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;z-index:1;transition:transform .2s var(--spring),box-shadow .2s}
  .tl-entry:hover .tl-date-circle{transform:scale(1.07);box-shadow:0 0 0 4px var(--primary-soft)}
  .tl-date-day{font-size:15px;font-weight:700;color:var(--primary-hi);line-height:1}
  .tl-date-mon{font-size:8px;font-weight:700;color:var(--primary-hi);text-transform:uppercase;letter-spacing:.5px;line-height:1;margin-top:1px}
  .tl-connector{width:2px;flex:1;background:var(--border);min-height:8px;transform-origin:top;animation:drawline .6s var(--ease) both}
  .tl-card{flex:1;margin-inline-start:12px;margin-bottom:8px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 14px;transition:all .18s ease;position:relative}
  .tl-card-row{display:flex;gap:12px;align-items:center}
  .tl-card-icon{flex-shrink:0;width:28px;display:flex;align-items:center;justify-content:center;color:var(--primary-hi)}
  .tl-card-icon svg{width:19px;height:19px}
  .tl-card-body{flex:1;min-width:0}
  .tl-card-title{font-size:13px;font-weight:600;color:var(--text);line-height:1.4}
  .tl-card-date{font-size:11px;color:var(--primary-hi);font-family:var(--font-mono);flex-shrink:0;white-space:nowrap;margin-inline-start:auto}
  .tl-card-desc{font-size:12px;color:var(--muted);line-height:1.5;margin-top:2px}
  .tl-card-footer{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
  .tl-type-tag{display:inline-flex;align-items:center;gap:4px;font-size:10px;padding:2px 8px;border-radius:4px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;background:var(--surface);color:var(--subtle)}
  .tl-card-source{display:inline-flex;align-items:center;gap:4px;font-size:10px;color:var(--muted)}
  .tl-card-source-link{color:var(--primary-hi);cursor:pointer}
  .tl-issue-dots{display:inline-flex;gap:3px;align-items:center;margin-inline-start:auto}
  .tl-issue-dot{width:7px;height:7px;border-radius:50%}
  .tl-card-edit{position:absolute;top:10px;inset-inline-end:10px;width:24px;height:24px;border-radius:7px;display:none;align-items:center;justify-content:center;color:var(--muted);background:var(--surface)}
  .tl-card:hover .tl-card-edit{display:flex}
  .tl-card-edit:hover{background:var(--primary-soft);color:var(--primary-hi)}

  /* ═══ DOC WORKSPACE — one header, Document/Analysis switch, chat left ═══ */
  .ws{position:fixed;inset:0;z-index:100;display:none;flex-direction:column;background:var(--bg)}
  .ws.open{display:flex;animation:riseSoft .3s var(--ease)}
  .wsh{display:flex;align-items:center;gap:14px;height:54px;padding:0 14px;border-bottom:1px solid var(--border);
    background:rgba(10,9,22,.55);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
  html[data-theme="light"] .wsh{background:rgba(245,244,241,.7)}
  .wsx{width:34px;height:34px;border-radius:99px;display:grid;place-items:center;color:var(--subtle);cursor:pointer;transition:background .15s,color .15s}
  .wsx:hover{background:var(--surface);color:var(--text)}
  .wst{font-size:14px;font-weight:600;display:flex;align-items:center;gap:10px;min-width:0}
  .wst em{font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .wst .vp{font-size:10px;font-weight:700;background:var(--primary-soft);color:var(--primary-hi);padding:2px 8px;border-radius:99px;flex:none}
  .wst .stp{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--subtle);background:var(--surface);border:1px solid var(--border);padding:3px 9px;border-radius:99px;flex:none}
  .seg{display:flex;background:var(--surface);border:1px solid var(--border);border-radius:99px;padding:3px;margin:0 auto}
  .seg button{font-size:12px;font-weight:600;color:var(--muted);padding:6px 18px;border-radius:99px;transition:color .18s,background .18s,transform .16s var(--spring)}
  .seg button:active{transform:scale(.96)}
  .seg button.on{background:var(--primary);color:#fff;box-shadow:0 4px 12px -4px rgba(53,67,240,.5)}
  .approve{font-size:12.5px;font-weight:700;color:#fff;background:var(--primary);padding:9px 20px;border-radius:99px;white-space:nowrap;
    transition:filter .15s,transform .16s var(--spring)}
  .approve:hover{filter:brightness(1.15)}
  .approve:active{transform:scale(.96)}
  .approve .st{display:none}
  .wsb{flex:1;display:flex;min-height:0}
  /* A HARD 340px IN A MODAL WHERE EVERY OTHER EDGE DRAGS. */
  .wschat{width:var(--ws-chat-w,460px);flex:none;order:2;border-inline-start:1px solid var(--border);
    display:flex;flex-direction:column;min-height:0}
  .wschatdrag{order:1;width:5px;flex:none;cursor:col-resize;position:relative;z-index:5;background:transparent}
  .wschatdrag::after{content:"";position:absolute;inset:0 2px;background:var(--line);transition:background .15s}
  .wschatdrag:hover::after{background:var(--primary)}
  .wsmsgs{flex:1;overflow:auto;padding:18px 16px;display:flex;flex-direction:column;gap:14px}
  .wsmsgs .msg{max-width:100%;font-size:13px}
  .wsc-input{padding:12px;border-top:1px solid var(--border)}
  .wsc-input .cbar{padding:9px 10px;border-radius:13px}
  .wsc{flex:1;position:relative;min-width:0;overflow:auto;background:rgba(0,0,0,.18)}
  html[data-theme="light"] .wsc{background:rgba(12,35,64,.04)}
  .wspane{display:none;padding:14px 16px;min-height:100%}
  .wspane.on{display:block;animation:riseSoft .28s var(--ease)}
  /* document pane — big page + floating hover toolbar */
  .wsdocwrap{max-width:640px;margin:0 auto;position:relative}
  .bigpage{background:#f6f6f4;border-radius:4px;box-shadow:0 24px 60px -18px rgba(0,0,0,.55);padding:44px 48px;min-height:760px;position:relative}
  .bigpage .bt{height:10px;width:55%;background:#26324a;border-radius:2px;margin:0 auto 26px}
  .bigpage .bl{height:5px;background:#c9cdd6;border-radius:2px;margin-bottom:10px}
  .bigpage .bl.s{width:86%}.bigpage .bl.m{width:96%}.bigpage .bl.x{width:64%}
  .bigpage .redact{background:rgba(53,67,240,.4);border:1px solid rgba(107,123,245,.9);border-radius:2px}
  .floatbar{position:sticky;bottom:18px;display:flex;gap:4px;justify-content:center;width:max-content;margin:18px auto 0;
    background:var(--glass);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--border-strong);
    border-radius:99px;padding:5px;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s var(--spring)}
  .wspane:hover .floatbar{opacity:1;transform:none}
  .floatbar .fb{width:34px;height:34px;border-radius:99px;display:grid;place-items:center;color:var(--subtle);transition:background .15s,color .15s,transform .16s var(--spring)}
  .floatbar .fb:hover{background:var(--surface-hover);color:var(--text)}
  .floatbar .fb:active{transform:scale(.9)}
  .floatbar .pg{font-size:11.5px;font-family:var(--font-mono);color:var(--subtle);display:flex;align-items:center;padding:0 8px}
  /* analysis pane — clean typographic artifact */
  .ana{max-width:640px;margin:0 auto;background:var(--glass);border:1px solid var(--border);border-radius:16px;padding:22px 24px;
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
  .ana h2{font-family:var(--font-disp);font-weight:500;font-size:23px;margin:0 0 4px;letter-spacing:-.01em}
  .ana .meta{font-size:11.5px;color:var(--muted);margin-bottom:18px}
  .ana p{font-size:13.5px;line-height:1.7;color:var(--subtle);margin:0 0 14px}
  .ana p b{color:var(--text)}
  .ana .hl{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:22px 0 10px}
  .kd{display:flex;gap:11px;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px;line-height:1.55}
  .kd:last-of-type{border-bottom:none}
  .kd .ki{width:26px;height:26px;border-radius:8px;background:var(--primary-soft);color:var(--primary-hi);display:grid;place-items:center;flex:none;margin-top:1px}
  .kd .ki svg{width:13px;height:13px}
  .kd b{display:block;color:var(--text)}
  .kd span{color:var(--muted);font-size:12.5px}

  /* version dropdown */
  .vp{cursor:pointer;position:relative}
  .vp>svg{width:10px;height:10px;margin-inline-start:2px}
  .vmenu{position:absolute;top:calc(100% + 7px);inset-inline-start:0;min-width:200px;background:var(--glass);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    border:1px solid var(--border-strong);border-radius:12px;padding:6px;box-shadow:0 18px 44px -12px rgba(0,0,0,.55);display:none;z-index:20;text-transform:none;letter-spacing:0}
  .vmenu.open{display:block;animation:popIn .25s var(--spring)}
  .vmenu>div{font-size:12px;font-weight:500;padding:8px 10px;border-radius:8px;color:var(--subtle);display:flex;gap:8px;align-items:center;cursor:pointer}
  .vmenu>div:hover{background:var(--surface-hover);color:var(--text)}
  .vmenu b{color:var(--primary-hi);font-size:10px;font-weight:700}
  /* key quotes */
  .kq{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
  .kqi{background:var(--glass);border:1px solid var(--border);border-radius:12px;padding:13px 15px;cursor:pointer;transition:transform .18s var(--spring),border-color .15s}
  .kqi:hover{transform:translateX(3px);border-color:var(--border-strong)}
  .kqi q{font-size:13px;line-height:1.6;color:var(--text);quotes:'\201C' '\201D'}
  .kqi .km{font-size:10.5px;color:var(--muted);margin-top:7px;font-family:var(--font-mono);display:flex;justify-content:space-between;gap:10px}
  .kqi .km span:last-child{color:var(--primary-hi)}
  /* animated brand mark — REAL vector: paint-wipe reveal, travelling light, breathing glow */
  .heroLogo{position:relative;width:66px;height:66px;margin:0 auto 14px;color:var(--text)}
  html[data-theme="light"] .heroLogo{color:var(--primary)}
  .heroLogo svg{width:100%;height:100%;overflow:visible;clip-path:inset(0 100% 0 0);
    animation:lgwipe .85s var(--ease) .2s forwards,lgglow 4.2s ease-in-out 1.3s infinite}
  .heroLogo .lg-sheen{animation:lgsheen 5s var(--ease) 1.3s infinite}
  @keyframes lgwipe{to{clip-path:inset(0 0 0 0)}}
  @keyframes lgglow{0%,100%{filter:drop-shadow(0 0 10px rgba(93,107,255,.22))}50%{filter:drop-shadow(0 0 26px rgba(93,107,255,.52))}}
  @keyframes lgsheen{0%,58%{transform:translateX(-560px) skewX(-14deg)}92%,100%{transform:translateX(1760px) skewX(-14deg)}}
  /* node-trace: glowing points run along the gavel-P's own contours */
  .lgtrace{opacity:0;animation:lgfade .5s var(--ease) 1.15s forwards}
  .lgtrace use{fill:none;stroke:var(--primary-hi);stroke-linecap:round}
  html[data-theme="light"] .lgtrace use{stroke:var(--primary)}
  .lgtrace .tp{stroke-width:11;stroke-dasharray:3.5 96.5;animation:lgtrace 6s linear infinite}
  .lgtrace .tp2{animation-delay:-3s}
  .lgtrace .tg{stroke-width:30;opacity:.35;filter:blur(8px);stroke-dasharray:3.5 96.5;animation:lgtrace 6s linear infinite}
  .lgtrace .tg2{animation-delay:-3s}
  @keyframes lgtrace{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
  @keyframes lgfade{to{opacity:1}}
  /* coach marks — animated first-use tooltips */
  .coachring{position:fixed;z-index:178;border:2px solid var(--primary);border-radius:12px;pointer-events:none;
    box-shadow:0 0 0 4px var(--primary-soft);animation:coachpulse 1.6s ease-in-out infinite}
  @keyframes coachpulse{0%,100%{box-shadow:0 0 0 4px var(--primary-soft)}50%{box-shadow:0 0 0 11px transparent}}
  .coachcard{position:fixed;z-index:179;width:256px;background:var(--glass);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    border:1px solid var(--border-strong);border-radius:14px;padding:13px 15px;box-shadow:0 20px 50px -14px rgba(0,0,0,.6);animation:popIn .3s var(--spring)}
  .coachcard b{font-size:13px;display:block;margin-bottom:4px}
  .coachcard p{font-size:11.5px;color:var(--subtle);margin:0 0 10px;line-height:1.5}
  .coachcard .cf{display:flex;justify-content:space-between;align-items:center}
  .coachcard .cs{font-size:10px;color:var(--muted)}
  /* law dossier verification steps */
  .vstep{display:flex;gap:9px;font-size:11.5px;color:var(--subtle);padding:6px 0;line-height:1.5}
  .vstep svg{width:12px;height:12px;stroke:var(--success);margin-top:3px;flex:none}
  .vstep b{color:var(--text)}
  .lreal{font-family:Georgia,'Times New Roman',serif;font-size:12.5px;line-height:1.75;color:#2a3040;margin:16px 0}
  .lreal b{font-size:12px;color:#1a2030}
  .lhl{background:rgba(53,67,240,.16);border-bottom:2px solid rgba(53,67,240,.65);padding:1px 3px;border-radius:2px;cursor:pointer;transition:background .15s}
  .lhl:hover{background:rgba(53,67,240,.3)}

  /* ═══ DOCUMENTS PANEL — Claude-style files drawer w/ verify states ═══ */
  .drow{border:1px solid var(--border);border-radius:13px;margin-bottom:9px;background:var(--surface);cursor:pointer;overflow:hidden;transition:border-color .15s}
  .drow:hover{border-color:var(--border-strong)}
  .drh{display:flex;gap:11px;align-items:center;padding:11px 12px}
  .dthumb{width:32px;height:40px;border-radius:5px;background:#f6f6f4;flex:none;padding:5px 5px 0;box-shadow:0 2px 6px rgba(0,0,0,.3)}
  .dthumb i{display:block;height:2.5px;background:#c9cdd6;border-radius:2px;margin-bottom:3px}
  .dthumb i:first-child{background:#26324a;width:70%}
  .drh .dt2{flex:1;min-width:0}
  .drh .dn{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .drh .dm{font-size:10.5px;color:var(--muted);margin-top:1px}
  .dtype{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:var(--primary-soft);color:var(--primary-hi);padding:2px 7px;border-radius:5px}
  .dbadge{font-size:9.5px;font-weight:700;padding:3px 9px;border-radius:99px;flex:none}
  .dbadge.rev{background:rgba(245,158,11,.16);color:#f0a63e;animation:badgePulse 2.6s ease-out infinite}
  .dbadge.ok{background:rgba(74,222,128,.13);color:var(--success)}
  .dkf{display:none;border-top:1px solid var(--border);padding:11px 13px;background:rgba(0,0,0,.12)}
  html[data-theme="light"] .dkf{background:rgba(12,35,64,.03)}
  .drow.open .dkf{display:block;animation:riseSoft .25s var(--ease)}
  .dkf .kfh{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:7px}
  .kf{display:flex;gap:8px;align-items:flex-start;font-size:11.5px;line-height:1.45;padding:4px 0;color:var(--subtle)}
  .kf .vst{flex:none;font-size:8.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:1.5px 6px;border-radius:4px;margin-top:1px;cursor:pointer}
  .kf .vst.u{background:rgba(245,158,11,.16);color:#f0a63e}
  .kf .vst.c{background:rgba(74,222,128,.13);color:var(--success)}
  .dkfoot{display:flex;gap:8px;align-items:center;margin-top:10px}
  .dkfoot .ofa{font-size:11px;color:var(--primary-hi);font-weight:600;cursor:pointer;margin-inline-start:auto}

.conf{height:5px;border-radius:99px;background:var(--surface);overflow:hidden;margin:6px 0 2px}
  .conf i{display:block;height:100%;width:92%;background:var(--primary);border-radius:99px}
  /* question detail input — nuance path next to the fast buttons */
  .qdetail{display:flex;align-items:center;gap:8px;margin-top:10px;border:1px solid var(--border);border-radius:10px;padding:7px 11px;background:var(--surface);transition:border-color .2s,box-shadow .2s}
  .qdetail:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
  .qdetail input{flex:1;background:none;border:none;outline:none;color:var(--text);font:inherit;font-size:12.5px;min-width:0}
  .qdetail input::placeholder{color:var(--muted)}
  .qdetail svg{width:13px;height:13px;color:var(--muted)}
  .qsend{width:26px;height:26px;border-radius:8px;background:var(--primary);display:grid;place-items:center;flex:none;cursor:pointer;transition:filter .15s,transform .16s var(--spring)}
  .qsend:hover{filter:brightness(1.15)}
  .qsend:active{transform:scale(.9)}
  .qsend svg{stroke:#fff;width:13px;height:13px;color:#fff}
  /* page reorder filmstrip — kept from the desktop flow, drag to reorder */
  .strip{display:flex;gap:8px;max-width:620px;margin:0 auto 14px;justify-content:center}
  .sthumb{width:44px;height:58px;background:#f6f6f4;border-radius:4px;border:1px solid var(--border-strong);display:flex;align-items:flex-end;justify-content:center;
    font-size:9px;font-weight:700;color:#556;padding:3px;cursor:grab;box-shadow:0 4px 10px rgba(0,0,0,.3);transition:transform .15s var(--spring)}
  .sthumb:hover{transform:translateY(-3px)}
  .sthumb.drag{opacity:.35}
  .tagmenu{position:fixed;z-index:170;min-width:170px;background:var(--glass);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    border:1px solid var(--border-strong);border-radius:12px;padding:6px;box-shadow:0 18px 44px -12px rgba(0,0,0,.55);display:none}
  .tagmenu.open{display:block;animation:popIn .22s var(--spring)}
  .tagmenu div{font-size:11.5px;font-weight:600;padding:7px 10px;border-radius:8px;color:var(--subtle);cursor:pointer}
  .tagmenu div:hover{background:var(--surface-hover);color:var(--text)}
  .tagmenu .nt{border-top:1px solid var(--border);margin-top:4px;color:var(--primary-hi)}
  /* composer model popover — switch models where you feel the pain */
  .mchip{position:relative;cursor:pointer}
  .mpop{position:absolute;bottom:calc(100% + 10px);inset-inline-end:0;min-width:250px;background:var(--glass);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    border:1px solid var(--border-strong);border-radius:13px;padding:6px;box-shadow:0 18px 44px -10px rgba(0,0,0,.55);display:none;z-index:30;text-align:start}
  .mpop.open{display:block;animation:popIn .25s var(--spring)}
  .mpop>div{font-size:12px;font-weight:500;padding:8px 11px;border-radius:8px;color:var(--subtle);cursor:pointer;display:flex;justify-content:space-between;gap:12px;align-items:center}
  .mpop>div:hover{background:var(--surface-hover);color:var(--text)}
  .mpop>div.on{color:var(--primary-hi)}
  .mpop small{font-size:10px;color:var(--muted)}
  .mpop .mng{border-top:1px solid var(--border);margin-top:4px;color:var(--primary-hi)}
  /* workspace mobile chat pill + bottom sheet */
  .chatpill{position:fixed;inset-inline-end:16px;bottom:18px;z-index:115;display:none;align-items:center;gap:8px;background:var(--primary);color:#fff;
    border-radius:99px;padding:12px 18px;font-size:13px;font-weight:600;box-shadow:0 14px 34px -8px rgba(53,67,240,.6)}
  .chatpill svg{stroke:#fff;width:16px;height:16px}
  .grab{display:none}
  @keyframes sheetUp{from{transform:translateY(46%);opacity:.6}to{transform:none;opacity:1}}
  /* ═══ SETTINGS — one overlay, sections left, search, calm ═══ */
  .setov{position:fixed;inset:0;z-index:130;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:26px}
  .setov.open{display:flex}
  .setcard{width:min(880px,100%);height:min(620px,calc(100vh - 52px));background:var(--bg);border:1px solid var(--border-strong);border-radius:20px;display:flex;overflow:hidden;
    box-shadow:0 40px 90px -30px rgba(0,0,0,.75);animation:popIn .35s var(--spring)}
  .setnav{width:216px;flex:none;border-inline-end:1px solid var(--border);padding:16px 10px;display:flex;flex-direction:column;gap:2px;background:rgba(255,255,255,.02)}
  .setsearch{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:9px;padding:7px 10px;margin:0 4px 12px;color:var(--muted);font-size:12.5px}
  .setsearch svg{width:13px;height:13px}
  .setnav a{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:9px;font-size:13px;font-weight:500;color:var(--subtle);cursor:pointer}
  .setnav a:hover{background:var(--surface);color:var(--text)}
  .setnav a.on{background:var(--primary-soft);color:var(--primary-hi)}
  .setnav a svg{width:15px;height:15px}
  .setbody{flex:1;overflow:auto;padding:26px 30px;position:relative}
  .setx{position:absolute;top:14px;inset-inline-end:14px;width:32px;height:32px;border-radius:99px;display:grid;place-items:center;color:var(--muted);cursor:pointer}
  .setx:hover{background:var(--surface);color:var(--text)}
  .setpane{display:none}.setpane.on{display:block;animation:riseSoft .3s var(--ease)}
  .setpane h4{font-family:var(--font-disp);font-size:21px;font-weight:500;margin:0 0 14px}
  .srow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid var(--border);font-size:13.5px}
  .srow .sd{font-size:11.5px;color:var(--muted);margin-top:2px}
  .sctl{font-size:12.5px;color:var(--subtle);background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:7px 12px;cursor:pointer;white-space:nowrap}
  .sctl:hover{color:var(--text);border-color:var(--border-strong)}
  .prov{border:1px solid var(--border);border-radius:13px;padding:13px 15px;display:flex;align-items:center;gap:12px;margin-bottom:9px;background:var(--glass)}
  .prov .pi{width:34px;height:34px;border-radius:9px;background:var(--surface);display:grid;place-items:center;font-weight:700;font-size:12px;flex:none}
  .prov b{font-size:13.5px}
  .prov .pm{font-size:11px;color:var(--muted);margin-top:1px}
  .ptag{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--success);background:rgba(74,222,128,.12);padding:2px 8px;border-radius:99px;display:inline-flex;gap:5px;align-items:center}
  .ptag i{width:5px;height:5px;border-radius:50%;background:var(--success)}
  .ptag.rec{color:var(--primary-hi);background:var(--primary-soft)}
  .prov .act{margin-inline-start:auto}
  .presets{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:9px;margin-bottom:16px}
  .preset{border:1px solid var(--border);border-radius:12px;padding:12px 13px;cursor:pointer;background:var(--surface);transition:border-color .15s,box-shadow .15s}
  .preset.on{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
  .preset b{font-size:12.5px;display:block}
  .preset span{font-size:10.5px;color:var(--muted)}
  .utiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:9px;margin-bottom:14px}
  .ut{border:1px solid var(--border);border-radius:12px;padding:12px;background:var(--glass)}
  .ut b{font-family:var(--font-disp);font-size:20px;font-weight:500;display:block;margin-bottom:2px}
  .ut span{font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
  .ucase{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:11px 0;border-bottom:1px solid var(--border);font-size:13px}
  .ucase .um{font-size:11px;color:var(--muted);margin-top:2px}
  .ucase .uc{font-weight:700;color:var(--primary-hi);font-variant-numeric:tabular-nums}
  .mmark{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:5px;font-size:9px;font-weight:800;color:#fff;margin-inline-end:7px;vertical-align:-4px}
  .mmark img{width:11px;height:11px;display:block}
  .prov .pi{color:#fff}
  .prov .pi img{width:17px;height:17px;display:block}

  /* ═══ REDACTION CHECK — the ONE redaction surface (upload + profile share it) ═══ */
  .red{position:fixed;inset:0;z-index:140;display:none;flex-direction:column;background:var(--bg)}
  .red.open{display:flex;animation:riseSoft .3s var(--ease)}
  .redh{display:flex;align-items:center;gap:12px;height:54px;padding:0 14px;border-bottom:1px solid var(--border);
    background:rgba(10,9,22,.55);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
  html[data-theme="light"] .redh{background:rgba(245,244,241,.7)}
  .redh .t{font-size:14px;font-weight:600;white-space:nowrap}
  .detect{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--subtle);background:var(--surface);border:1px solid var(--border);border-radius:99px;padding:5px 12px;white-space:nowrap}
  .detect svg{width:12px;height:12px;color:var(--primary-hi)}
  .detect u{color:var(--primary-hi);text-decoration:none;cursor:pointer;font-weight:600}
  .redcount{margin-inline-start:auto;font-size:12px;color:var(--subtle);white-space:nowrap}
  .redcount b{color:var(--primary-hi)}
  .redb{flex:1;display:flex;min-height:0}
  .redoc{flex:1;overflow:auto;padding:26px 20px;background:rgba(0,0,0,.18)}
  html[data-theme="light"] .redoc{background:rgba(12,35,64,.04)}
  /* A PAGE YOU ARE CHECKING, NOT AN ARTICLE YOU ARE READING.
     620px is a good measure for prose and the wrong one here: on a fifteen-
     hundred-pixel pane it left roughly five hundred pixels of dead space on
     each side, broke the document's own line structure, and turned a
     twenty-two page thread into far more scrolling than it needed. This is a
     scanning task — the question is whether a name got missed — so the page
     wants the width it is given, up to a real page's worth. */
  .redpage{width:min(940px,100%);max-width:940px;margin:0 auto;background:#f6f6f4;border-radius:4px;box-shadow:0 24px 60px -18px rgba(0,0,0,.55);padding:40px 48px;min-height:700px}
  .redpage .bt{height:10px;width:55%;background:#26324a;border-radius:2px;margin:0 auto 26px}
  .rline{display:flex;gap:7px;align-items:center;margin-bottom:11px}
  .rseg{height:5px;background:#c9cdd6;border-radius:2px}
  .rbox{height:16px;padding:0 7px;font-size:8.5px;font-weight:700;letter-spacing:.03em;color:#fff;background:rgba(53,67,240,.85);
    border:1px solid rgba(107,123,245,.9);border-radius:3px;display:flex;align-items:center;cursor:pointer;flex:none;
    transition:transform .15s var(--spring),background .2s,color .2s}
  .rbox:hover{transform:scale(1.07)}
  .rbox.off{background:transparent;color:#9aa0ad;border-style:dashed;text-decoration:line-through}
  .redside{width:340px;flex:none;border-inline-start:1px solid var(--border);display:flex;flex-direction:column;min-height:0}
  .redside .rsh{padding:16px 16px 6px}
  .redside .rsh b{font-family:var(--font-disp);font-size:18px;font-weight:500}
  .redside .rsh p{font-size:11.5px;color:var(--muted);margin:4px 0 0;line-height:1.5}
  /* ITS OWN COLUMN, LEFT OF THE REDACTION ONE. Telling the app what a document
     is and telling it what to hide are two jobs; stacked under one heading the
     first read as part of the second. */
  .redctx{width:300px;flex:none;border-inline-start:1px solid var(--border);display:flex;
    flex-direction:column;min-height:0;overflow:auto}
  .redctx .rsh{padding:16px 16px 6px}
  .redctx .rsh b{font-family:var(--font-disp);font-size:17px;font-weight:500}
  .redctx .rsh p{font-size:11.5px;color:var(--muted);margin:4px 0 0;line-height:1.5}
  .redctx .rsh-ctx textarea{width:100%;margin-top:11px;background:var(--surface);
    border:1px solid var(--border);border-radius:9px;padding:10px 12px;color:var(--text);
    font:inherit;font-size:12.5px;line-height:1.55;outline:none;resize:vertical;min-height:150px}
  .redctx .rsh-ctx textarea:focus{border-color:var(--primary)}
  .redctx .rsh-ctx textarea::placeholder{color:var(--muted);opacity:.75}
  .rlist{flex:1;overflow:auto;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
  .rrow{border:1px solid var(--border);border-radius:12px;padding:11px 13px;background:var(--glass);display:flex;align-items:center;gap:10px;animation:rise .4s var(--ease) both}
  .rrow:nth-child(2){animation-delay:.06s}.rrow:nth-child(3){animation-delay:.12s}
  .rrow:nth-child(4){animation-delay:.18s}.rrow:nth-child(5){animation-delay:.24s}
  .rtag{font-size:9px;font-weight:800;letter-spacing:.04em;color:#dfe2ff;background:rgba(53,67,240,.4);padding:3px 7px;border-radius:5px;flex:none}
  .rrow .rn2{font-size:12.5px;font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rshowall{width:100%;margin-top:6px;background:none;border:1px dashed var(--border);color:var(--muted);font:inherit;font-size:11px;padding:7px;border-radius:8px;cursor:pointer}
  .rshowall:hover{color:var(--text);border-color:var(--primary)}
  .rrow.rsum .rn2{opacity:.9}
  .rrow .rsrc{font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);opacity:.7;margin-inline-start:auto;padding-inline-start:8px}
  .rrow.rfromcase{opacity:.88}
  .rrow .rc2{font-size:10px;color:var(--muted);font-family:var(--font-mono);flex:none}
  .rtoggle{width:32px;height:18px;border-radius:99px;background:var(--primary);position:relative;cursor:pointer;flex:none;transition:background .2s}
  .rtoggle::after{content:"";position:absolute;top:2px;inset-inline-start:16px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .2s var(--spring)}
  .rtoggle.off{background:var(--surface-hover)}
  .rtoggle.off::after{inset-inline-start:2px}
  .raddw{padding:10px 14px 14px;border-top:1px solid var(--border)}
  .redpill{position:fixed;inset-inline-start:50%;transform:translateX(-50%);bottom:18px;z-index:145;display:none;align-items:center;gap:8px;
    background:var(--primary);color:#fff;border:none;border-radius:99px;padding:12px 18px;font-size:13px;font-weight:600;
    box-shadow:0 14px 34px -8px rgba(53,67,240,.6);cursor:pointer}
  .redpill svg{stroke:#fff;width:15px;height:15px}

  /* ═══ MOBILE ═══ */

  /* ═══ MOBILE ═══ */
  @media (max-width:1000px){
    .burger{display:grid}
    .backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:45;display:none}
    .backdrop.show{display:block}
    .rail{position:fixed;inset-inline-start:0;top:0;bottom:0;width:var(--rail-open);transform:translateX(-100%);box-shadow:0 24px 60px -20px rgba(0,0,0,.7);z-index:70;padding-top:14px}
    .rail .lbl,.rail .seclbl,.rail .bdg,.rail .rfoot .set{opacity:1!important}
    .app.navopen .rail{transform:none}
    .top{position:absolute;top:0;inset-inline-start:0;inset-inline-end:0;height:auto;padding:12px 14px;background:transparent!important;border:none;backdrop-filter:none;-webkit-backdrop-filter:none;pointer-events:none;gap:8px}
    .top>*{pointer-events:auto}
    .logo,.stats{display:none}
    .burger,.ibtn{background:var(--pillbg);backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);border:1px solid var(--border);box-shadow:0 6px 20px -8px rgba(0,0,0,.4)}
    .casechip{background:var(--pillbg);backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);border:1px solid var(--border);
      border-radius:99px;padding:9px 15px;margin:0;font-size:13px;font-weight:600;color:var(--text);box-shadow:0 6px 20px -8px rgba(0,0,0,.4)}
    .tacts{margin-inline-start:auto}
    .scroll{padding:74px 20px 20px}
    .composer{padding:12px 16px 18px}
    .msg,.qinline,.artcard,.think{max-width:100%}
    .qv{top:64px;inset-inline-end:12px}
    .tiles{grid-template-columns:repeat(2,1fr)}
    .tile,.tile.w3{grid-column:span 1}
    .tile.w6{grid-column:span 2}
    .fgrid{grid-template-columns:1fr}
    .wschat{display:none}
    .wsh{flex-wrap:wrap;height:auto;padding:10px 12px;row-gap:9px;gap:10px}
    .wsh .stp{display:none}
    .wst{flex:1;min-width:0}
    .wsh .seg{order:6;width:100%;margin:0}
    .wsh .seg button{flex:1}
    .approve{padding:8px 16px;font-size:12px}
    .approve .lt{display:none}
    .approve .st{display:inline}
    .strip{justify-content:flex-start;overflow-x:auto;padding-bottom:6px}
    .floatbar{opacity:1;transform:none}
    .ws.open .chatpill{display:flex}
    .ws.chatopen .chatpill{display:none}
    .ws.chatopen .wschat{display:flex;position:fixed;inset-inline-start:0;inset-inline-end:0;bottom:0;top:34%;z-index:120;background:var(--bg);
      border:1px solid var(--border-strong);border-bottom:none;border-radius:20px 20px 0 0;
      box-shadow:0 -24px 60px -18px rgba(0,0,0,.75);animation:sheetUp .38s var(--spring)}
    .grab{display:block;width:44px;height:4px;border-radius:99px;background:var(--border-strong);margin:10px auto 4px;flex:none;cursor:pointer}
    .setov{padding:0}
    .setcard{width:100%;height:100%;border-radius:0;flex-direction:column}
    .setnav{width:100%;flex-direction:row;overflow-x:auto;border-inline-end:none;border-bottom:1px solid var(--border);padding:10px}
    .setnav a{white-space:nowrap}
    .setsearch{display:none}
    .detect{display:none}
    .redside,.redctx{display:none}
    .red.open .redpill{display:flex}
    .red.sheetopen .redpill{display:none}
    .red.sheetopen .redside{display:flex;position:fixed;inset-inline-start:0;inset-inline-end:0;bottom:0;top:30%;z-index:150;background:var(--bg);
      border:1px solid var(--border-strong);border-bottom:none;border-radius:20px 20px 0 0;
      box-shadow:0 -24px 60px -18px rgba(0,0,0,.75);animation:sheetUp .38s var(--spring)}
    .redoc{padding:16px}
    .redpage{padding:26px 22px}
  }
  @media (max-width:560px){.scroll{padding:70px 18px 18px}.tiles{gap:9px}.bigpage{padding:26px 24px}}

/* ══════════════════════════════════════════════════════════════════
   FUNCTIONAL ADDITIONS — carried from the working web app, styled to
   match the mockup's design language. Everything above this line is the
   mockup's stylesheet verbatim.
   ══════════════════════════════════════════════════════════════════ */

.hid{display:none!important}

/* ── unlock gate ── */
.gate{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;background:var(--bg)}
.gate::before{content:"";position:absolute;inset:0;background:var(--wash);pointer-events:none}
/* SCOPED TO THE GATE. This is the unlock card, and the guidance card in the
   conversation happens to share the class name — so every question, every next
   step, every card the app has ever shown was pinned to 420px in the middle of
   a thirteen-hundred-pixel column, because this rule sets a width and the
   guidance rule further down never overrides it. */
.gate .gcard{position:relative;width:min(420px,90vw);background:var(--glass);border:1px solid var(--border-strong);border-radius:20px;padding:34px;text-align:center;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);animation:popIn .4s var(--spring)}
.gate .gcard h1{font-family:var(--font-logo);font-weight:700;letter-spacing:.04em;font-size:23px;margin:0 0 6px}
.gate .gcard h1 .i{color:var(--primary-hi);text-transform:lowercase}
.gate .gcard p{color:var(--muted);font-size:12.5px;margin:0 0 18px;line-height:1.5}
.gate .gcard input{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:11px 13px;color:var(--text);font:inherit;outline:none;margin-bottom:10px}
.gcard input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.gate .gcard .primary{width:100%;display:block;background:var(--primary);color:#fff;border-radius:11px;padding:11px 18px;font-weight:600}
.gate .gcard .primary:hover{filter:brightness(1.12)}
.gerr{color:#f87171;font-size:12px;min-height:16px;margin-top:8px}

/* ── generic primary/ghost buttons + inputs used by the wired UI ── */
.primary{background:var(--primary);color:#fff;border-radius:11px;padding:10px 18px;font-weight:600;transition:filter .15s,transform .16s var(--spring)}
.primary:hover{filter:brightness(1.12)}
.primary:active{transform:scale(.97)}
.ghost{border:1px solid var(--border-strong);border-radius:10px;padding:8px 14px;color:var(--subtle);font-size:13px;background:var(--surface)}
.ghost:hover{background:var(--surface-hover);color:var(--text)}
.txtin{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:11px 13px;color:var(--text);font:inherit;font-size:13px;outline:none}
.txtin:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.txtin::placeholder{color:var(--muted)}

/* ── case select in the top casechip ── */
.casechip select{background:transparent;border:none;color:var(--text);font:inherit;font-size:13px;font-weight:600;cursor:pointer;outline:none;max-width:clamp(230px,26vw,430px)}
.casechip select option{background:var(--bg);color:var(--text)}

/* ── composer (assistant) — real inputs ── */
/* IT SAYS input AND THE ELEMENT IS A textarea. It has been a textarea since
   the box was allowed to grow to three lines, so this rule has matched
   nothing since — the field was sized by the browser's own default, which
   only looked right because the row could not wrap and squeezed it. The
   moment the quote line put a second row in the frame it stopped looking
   right, which is how a dead selector finally announced itself. */
.composer .cbar #msgIn{flex:1 1 0;min-width:0;background:none;border:none;outline:none;resize:none;color:var(--text);font:inherit;font-size:13.5px}
.composer .cbar #msgIn::placeholder{color:var(--muted)}
#fileIn{display:none}
.modelchip{font-size:11px;color:var(--subtle);background:var(--surface);padding:5px 10px;border-radius:8px;font-weight:600;white-space:nowrap}

/* ── chat: system + step messages ── */
.msg.sys{max-width:640px;margin:0 auto;font-size:12.5px;color:var(--muted);text-align:center}
.msg.steps{max-width:86%;font-size:12px;color:var(--muted);border:1px solid var(--border);border-radius:13px;padding:11px 14px;background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.msg.steps .st{display:flex;gap:8px;align-items:center;padding:2.5px 0}
.msg.steps .st b{color:var(--primary-hi)}
.msg.steps .st.on span{background:linear-gradient(90deg,var(--muted) 30%,var(--text) 50%,var(--muted) 70%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:textShimmer 1.5s linear infinite}
.msg.a p{margin:0 0 10px}
.msg.a h2{font-family:var(--font-disp);font-weight:500;font-size:19px;margin:14px 0 6px}
.msg.a h3{font-size:14px;margin:12px 0 5px}
.msg.a blockquote{background:var(--surface-2);border-radius:8px;margin:6px 0;padding:6px 12px;color:var(--subtle);font-size:12.5px}
.msg.a ul{margin:6px 0;padding-inline-start:20px}.msg.a li{margin:4px 0}

/* ── captured-cards (facts appearing inline in chat) ── */
.capwrap{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.capcard{display:flex;gap:9px;align-items:flex-start;background:var(--primary-soft);border:1px solid rgba(107,123,245,.22);border-radius:10px;padding:9px 11px;font-size:12.5px}
.capcard .cap-ic{color:var(--primary-hi);flex-shrink:0}
.capcard .cap-body{flex:1;min-width:0;line-height:1.45}
.capcard .cap-acts{display:flex;gap:5px;flex-shrink:0}
.capcard button{font-size:11px;padding:3px 9px;border-radius:7px;border:1px solid var(--border-strong);background:var(--surface);color:var(--subtle);cursor:pointer}
.capcard button.ok:hover{background:var(--success);color:#08110a;border-color:var(--success)}
.capcard button.no:hover{background:#dc2626;color:#fff;border-color:#dc2626}
.capcard.done{opacity:.6}
.capmore{font-size:11.5px;color:var(--primary-hi);cursor:pointer;margin-top:6px;width:fit-content}

/* ── documents / facts side panel (reuses .qv glass sheet) ── */
.dpanel{position:fixed;top:calc(var(--header-h) + 10px);inset-inline-end:14px;bottom:14px;width:min(430px,calc(100vw - 28px));overflow-y:auto;z-index:85;
  background:var(--glass);backdrop-filter:blur(32px) saturate(140%);-webkit-backdrop-filter:blur(32px) saturate(140%);
  border:1px solid var(--border-strong);border-radius:18px;padding:16px;box-shadow:0 30px 70px -20px rgba(0,0,0,.65);
  opacity:0;transform:translateY(-8px) scale(.98);pointer-events:none;transition:opacity .22s var(--ease),transform .26s var(--spring)}
.dpanel.open{opacity:1;transform:none;pointer-events:auto}
.dph{display:flex;justify-content:space-between;align-items:baseline;margin:16px 2px 9px}
.dph:first-child{margin-top:2px}
.dph b{font-family:var(--font-disp);font-size:17px;font-weight:500}
.dph span{font-size:11px;color:var(--muted)}
.dpanel .drow{border:1px solid var(--border);border-radius:12px;background:var(--surface);margin-bottom:8px;overflow:hidden;cursor:default}
.dpanel .drh{display:flex;gap:10px;align-items:center;padding:10px 12px;cursor:pointer}
.dpanel .drh .dn{flex:1;min-width:0;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dbadge{font-size:9px;font-weight:700;padding:3px 8px;border-radius:99px;flex:none}
.dbadge.rev{background:rgba(240,166,62,.16);color:var(--warn,#f0a63e);animation:badgePulse 2.6s ease-out infinite}
.dbadge.ok{background:rgba(74,222,128,.13);color:var(--success)}
.dbadge.none{background:var(--surface-hover);color:var(--muted)}
.dkf{display:none;border-top:1px solid var(--border);padding:10px 12px;background:rgba(0,0,0,.10)}
html[data-theme="light"] .dkf{background:rgba(12,35,64,.03)}
.drow.open .dkf{display:block;animation:riseSoft .25s var(--ease)}
.dpanel .kf{display:flex;gap:8px;align-items:flex-start;font-size:11.5px;line-height:1.45;padding:4px 0;color:var(--subtle)}
.dpanel .kf .vst{flex:none;font-size:8.5px;font-weight:800;text-transform:uppercase;padding:2px 6px;border-radius:4px;margin-top:1px;cursor:pointer}
.dpanel .kf .vst.u{background:rgba(240,166,62,.16);color:var(--warn,#f0a63e)}
.dpanel .kf .vst.c{background:rgba(74,222,128,.13);color:var(--success)}
.dpanel .kf input{background:transparent;border:1px solid var(--border-strong);border-radius:8px;padding:6px 9px;color:inherit;font:inherit;font-size:12px}
.dact{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.dact button{padding:6px 13px;font-size:11.5px;border-radius:9px}
.warn-flag{background:rgba(240,166,62,.12);padding:6px 9px;border-radius:6px;font-size:11px;margin-bottom:6px}
.dlinks{display:flex;flex-direction:column;gap:4px;margin:2px 0 8px}
.dlink{font-size:11.5px;line-height:1.35;padding:5px 8px;background:rgba(107,123,245,.10);border-radius:6px}
.dlink b{color:var(--primary-hi);font-weight:600}.dlink i{color:var(--muted)}
.fact-reject{cursor:pointer;color:var(--muted);font-size:11px;margin-inline-start:6px}
.fact-reject:hover{color:#dc2626}

/* ── generic modal (new case / handoff / report) ── */
.modal{position:fixed;inset:0;z-index:160;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.mcard{width:min(560px,92vw);max-height:88vh;overflow-y:auto;background:var(--bg);border:1px solid var(--border-strong);border-radius:18px;padding:26px;box-shadow:0 40px 90px -30px rgba(0,0,0,.75);animation:popIn .32s var(--spring)}
.mcard h2{font-family:var(--font-disp);font-weight:500;margin:0 0 14px;font-size:22px}
.mcard input{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 12px;color:var(--text);font:inherit;font-size:13px;outline:none;margin-bottom:9px}
.mcard input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.mcard .row{display:flex;gap:9px}.mcard .row input{flex:1}
.mcard .row.right{justify-content:flex-end;margin-top:10px}
.mcard .note{font-size:11px;color:var(--muted);margin:4px 0 9px;line-height:1.5}
.mcard.wide{width:min(820px,94vw)}
#handoffBody,#reportOut{font-size:13.5px;line-height:1.7}
#handoffBody h2,#reportOut h2{font-family:var(--font-disp);font-weight:500}
#handoffBody h3,#reportOut h3{margin:16px 0 6px}
#handoffBody blockquote,#reportOut blockquote{background:var(--surface-2);border-radius:8px;padding:6px 10px;color:var(--muted);font-size:12.5px}

/* ── real document image + redaction canvas (workspace + redaction overlay) ── */
/* THE PAGE STOPPED GROWING AT 640px. Drag the preview wider and the scan stayed
   the same size with the extra width turned into dark carpet either side. */
.docimgwrap{position:relative;max-width:100%;margin:0 auto;display:flex;justify-content:center}
.docimgwrap img{max-width:100%;height:auto;display:block;border-radius:4px;box-shadow:0 24px 60px -18px rgba(0,0,0,.55)}
.docimgwrap canvas{position:absolute;inset-inline-start:0;top:0;pointer-events:none}
.docnote{max-width:560px;margin:40px auto;padding:26px;text-align:center;color:var(--muted);border:1px dashed var(--border-strong);border-radius:14px;font-size:13px;line-height:1.6}
.redimgwrap{position:relative;max-width:620px;margin:0 auto;display:flex;justify-content:center}
.redimgwrap img{max-width:100%;height:auto;display:block;border-radius:4px;box-shadow:0 24px 60px -18px rgba(0,0,0,.55)}
.redimgwrap canvas{position:absolute;inset-inline-start:0;top:0;cursor:pointer}

/* ── findings/strategy reject control ── */
.reject-x{cursor:pointer;color:var(--muted);font-size:13px;float:inline-end;margin-inline-start:8px;opacity:.6}
.reject-x:hover{opacity:1;color:#dc2626}

/* ── reports view ── */
.rep-hist-item{border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:9px;background:var(--glass);cursor:pointer;transition:border-color .15s,transform .18s var(--spring)}
.rep-hist-item:hover{border-color:var(--border-strong);transform:translateX(2px)}
.rep-hist-item b{font-size:13px}
.rep-hist-item .rm{font-size:11px;color:var(--muted);margin-top:3px}

/* ── empty-state helper ── */
.emptyv{text-align:center;color:var(--muted);font-size:13px;padding:40px 20px;line-height:1.6}

/* ── redaction term list add-row ── */
.redadd{display:flex;gap:8px;align-items:center;border:1px solid var(--border);border-radius:11px;padding:6px 8px 6px 12px;background:var(--surface);margin:2px 0}
.redadd input{flex:1;background:none;border:none;outline:none;color:var(--text);font:inherit;font-size:12.5px;min-width:0}
.redadd select{background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text);font:inherit;font-size:11px;padding:5px 6px}
.redadd .qsend{cursor:pointer}

/* ── Evidence cards (mockup gallery cards + real thumbnails) ── */
#evGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.evcard{border:1px solid var(--border);border-radius:14px;background:var(--surface);overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s,transform .15s}
.evcard:hover{border-color:var(--border-strong);transform:translateY(-2px)}
.evthumb{position:relative;aspect-ratio:1.5/1;background:rgba(255,255,255,.03);display:grid;place-items:center;overflow:hidden;border-bottom:1px solid var(--border)}
.evthumb img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.evdocicon{width:34px;height:34px;stroke:var(--muted);fill:none;stroke-width:1.6}
.evcard .st-pill{position:absolute;top:8px;inset-inline-end:8px;font-size:9.5px;font-weight:700;padding:3px 8px;border-radius:99px;backdrop-filter:blur(8px)}
.st-pill.pend{background:rgba(148,163,184,.22);color:var(--subtle)}
.st-pill.fetch{background:rgba(240,166,62,.2);color:var(--warn)}
.st-pill.ok{background:rgba(74,222,128,.18);color:var(--success)}
.evbody{padding:11px 13px 13px;display:flex;flex-direction:column;gap:7px}
.evname{font-size:12.5px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.evmeta{font-size:10.5px;color:var(--muted)}
.evacts{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.evacts button{font-size:11.5px;padding:6px 11px;border-radius:9px}
.evadd{cursor:pointer;border-style:dashed}
.evadd .evthumb{aspect-ratio:1.5/1;border-bottom:none}

/* ── coach marks — animated first-use tooltips (lifted from the mockup) ── */
.coachring{position:fixed;z-index:178;border:2px solid var(--primary);border-radius:12px;pointer-events:none;
  box-shadow:0 0 0 4px var(--primary-soft);animation:coachpulse 1.6s ease-in-out infinite}
@keyframes coachpulse{0%,100%{box-shadow:0 0 0 4px var(--primary-soft)}50%{box-shadow:0 0 0 11px transparent}}
.coachcard{position:fixed;z-index:179;width:256px;background:var(--glass);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid var(--border-strong);border-radius:14px;padding:13px 15px;box-shadow:0 20px 50px -14px rgba(0,0,0,.6);animation:popIn .3s var(--spring)}
.coachcard b{font-size:13px;display:block;margin-bottom:4px}
.coachcard p{font-size:11.5px;color:var(--subtle);margin:0 0 10px;line-height:1.5}
.coachcard .cf{display:flex;justify-content:space-between;align-items:center}
.coachcard .cs{font-size:10px;color:var(--muted)}

/* ── tag picker (click a term's tag chip to change it) ── */
.tagmenu{position:fixed;z-index:170;min-width:170px;background:var(--glass);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid var(--border-strong);border-radius:12px;padding:6px;box-shadow:0 18px 44px -12px rgba(0,0,0,.55);display:none}
.tagmenu.open{display:block;animation:popIn .22s var(--spring)}
.tagmenu div{font-size:11.5px;font-weight:600;padding:7px 10px;border-radius:8px;color:var(--subtle);cursor:pointer}
.tagmenu div:hover{background:var(--surface-hover);color:var(--text)}
.tagmenu .nt{border-top:1px solid var(--border);margin-top:4px;color:var(--primary-hi)}
.rtag{cursor:pointer}
.rtag:hover{filter:brightness(1.25)}

/* ── Review case — the one deep pass, prominent above the composer + top bar ── */
@keyframes revpulse{0%,100%{box-shadow:0 0 0 0 rgba(53,67,240,.5)}55%{box-shadow:0 0 0 10px rgba(53,67,240,0)}}
.revwrap{max-width:860px;margin:0 auto 10px;display:flex;justify-content:center}
.revpill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border-strong);background:var(--glass);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:var(--subtle);border-radius:99px;padding:9px 18px;
  font-size:12.5px;font-weight:600;transition:background .15s,color .15s,transform .16s var(--spring)}
.revpill svg{width:15px;height:15px}
.revpill:hover{background:var(--surface-hover);color:var(--text)}
.revpill:active{transform:scale(.97)}
.revpill.ready{background:var(--primary);border-color:var(--primary);color:#fff;animation:revpulse 2.4s ease-out infinite}
.revpill.ready svg{stroke:#fff}
.revtop{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--subtle);
  border:1px solid var(--border-strong);background:var(--surface);border-radius:99px;padding:6px 13px;margin-inline-end:6px;white-space:nowrap}
.revtop:hover{background:var(--surface-hover);color:var(--text)}
.revtop.ready{background:var(--primary);border-color:var(--primary);color:#fff;animation:revpulse 2.4s ease-out infinite}

/* ── case map — THE LEDGER ── */
.ledger{display:flex;flex-direction:column;gap:7px}
.ledrow{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:12px;background:var(--surface);padding:10px 14px;font-size:12.5px}
.ledrow.miss{border-style:dashed}
.ledrow.link{cursor:pointer;transition:border-color .15s,transform .18s var(--spring)}
.ledrow.link:hover{border-color:var(--border-strong);transform:translateX(2px)}
.ledcheck{color:var(--success);font-weight:700;flex:none;width:16px;text-align:center}
.ledcheck.miss{color:var(--muted)}
.ledname{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ledtype{font-size:9.5px;color:var(--muted);flex:none;text-transform:uppercase;letter-spacing:.05em}
.ledrank{font-size:9.5px;font-weight:700;padding:3px 9px;border-radius:99px;background:var(--surface-hover);color:var(--subtle);flex:none;text-transform:uppercase;letter-spacing:.03em}
.ledrank.crit{background:rgba(240,166,62,.18);color:var(--warn,#f0a63e);animation:badgePulse 2.6s ease-out infinite}
.ledx{font-size:10.5px;font-weight:600;color:var(--warn,#f0a63e);background:rgba(240,166,62,.12);border-radius:99px;padding:2px 8px;flex:none;cursor:help}
.ledgo{color:var(--muted);flex:none;font-size:15px}
.ledq{font-size:11.5px;color:var(--muted);line-height:1.5;padding:0 14px 6px 40px;margin-top:-2px}

/* ── panel: collapsed case-facts toggle ── */
.factsToggle{display:block;width:100%;text-align:start;font-size:11.5px;font-weight:600;color:var(--primary-hi);padding:2px 2px 6px;cursor:pointer}
.factsToggle:hover{text-decoration:underline}

/* ── workspace toolbar: active toggles (shield / quotes) ── */
.floatbar .fb.on{background:var(--primary-soft);color:var(--primary-hi)}

/* ── small deep-analyse escape hatch on evidence cards ── */
.evacts .ghost.mini{font-size:10.5px;padding:4px 9px;opacity:.7}
.evacts .ghost.mini:hover{opacity:1}

/* ══════════════════════════════════════════════════════════════════
   MOCKUP PARITY ADDITIONS (2026-07) — top-bar bell/search, hero,
   evidence gallery cards, law dossier, settings, wizard, toasts.
   ══════════════════════════════════════════════════════════════════ */

/* case chip — styled select with chevron (mockup .casechip) */
.casechip{position:relative}
.casechip select{appearance:none;-webkit-appearance:none;background:transparent;border:none;color:var(--text);font:inherit;font-size:13px;font-weight:600;cursor:pointer;outline:none;max-width:clamp(230px,26vw,430px);padding-inline-end:18px}
.casechip .cchev{position:absolute;inset-inline-end:0;width:13px;height:13px;pointer-events:none;color:var(--muted)}
.casechip:hover .cchev{color:var(--text)}

/* posture pill in the top bar */
.pill{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--subtle);background:var(--surface);border:1px solid var(--border);border-radius:99px;padding:4px 10px;white-space:nowrap}
.pill:empty{display:none}

/* rail footer — two icons (settings + handoff) */
.rfoot .set2{margin-inline-start:0;margin-inline-end:14px}
.rfoot .set{margin-inline-end:6px}

/* notifications sheet reuses .qv / .qvitem (already present) */

/* evidence gallery — real page image filling the mockup thumb */
.thumb .thumbimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.card .cardacts{display:flex;flex-wrap:wrap;gap:6px;padding:8px 10px;background:var(--glass);border-top:1px solid var(--border)}
.card .cardacts:empty{display:none}
.card .cardacts button{font-size:11px;padding:5px 10px;border-radius:8px}
.card.addcard .page{background:none;box-shadow:none;display:grid;place-items:center;border:1px dashed var(--border-strong)}

/* filmstrip page nav — active page */
.sthumb{user-select:none}
.sthumb.on{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);color:var(--primary)}

/* muted / locked cards + settings rows */
.srow.soff{opacity:.5}
.srow.soff .sctl{cursor:default;pointer-events:none}

/* law dossier — the saved statute text page */
.lawpage{background:#f6f6f4;border-radius:4px;box-shadow:0 24px 60px -18px rgba(0,0,0,.55);padding:36px 40px;min-height:400px;
  color:#2a3040;font-family:Georgia,'Times New Roman',serif;font-size:12.5px;line-height:1.75;white-space:pre-wrap;word-break:break-word}
.lawpage .lhl{scroll-margin:120px}
.lawpage .emptyv{color:#6a6f80}

/* search overlay */
.searchov{position:fixed;inset:0;z-index:190;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:none;align-items:flex-start;justify-content:center;padding:12vh 20px 20px}
.searchov.open{display:flex}
.searchcard{width:min(640px,100%);background:var(--glass);backdrop-filter:blur(32px) saturate(140%);-webkit-backdrop-filter:blur(32px) saturate(140%);
  border:1px solid var(--border-strong);border-radius:18px;box-shadow:0 40px 90px -30px rgba(0,0,0,.75);overflow:hidden;animation:popIn .3s var(--spring)}
.searchbar{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border)}
.searchbar svg{width:16px;height:16px;color:var(--muted)}
.searchbar input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--text);font:inherit;font-size:14px}
.searchbar input::placeholder{color:var(--muted)}
.skey{font-size:10px;font-family:var(--font-mono);color:var(--muted);border:1px solid var(--border);border-radius:6px;padding:2px 6px}
.searchres{max-height:52vh;overflow:auto;padding:8px}
.sres{display:flex;gap:10px;align-items:flex-start;padding:9px 11px;border-radius:10px;cursor:pointer;font-size:12.5px;line-height:1.45}
.sres:hover{background:var(--surface-hover)}
.sres .sk{flex:none;font-size:8.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:2px 7px;border-radius:5px;background:var(--primary-soft);color:var(--primary-hi);margin-top:1px}
.sres .sb{flex:1;min-width:0}
.sres .sm2{font-size:10.5px;color:var(--muted);margin-top:1px}
.searchres .emptyv{padding:26px 16px}

/* wizard "Other" type reveal */
#wzTypeOther{margin-bottom:4px}

/* ══════════════════════════════════════════════════════════════════
   FOUNDER-REVIEW UX FIXES (2026-07) — logo mark, timeline thumbs,
   workspace tab bar, key-quote Discuss, upload card, captured-facts
   summary, filmstrip thumbnails.
   ══════════════════════════════════════════════════════════════════ */

/* top-bar brand mark before the wordmark (global svg rule strokes — override) */
.logo .lg-mark{width:26px;height:26px;flex:none;fill:currentColor;stroke:none;color:var(--text)}
html[data-theme="light"] .logo .lg-mark{color:var(--primary)}

/* timeline — page-1 thumbnails for events that map to an image document */
.tl-thumb{width:54px;height:54px;flex:none;border-radius:9px;object-fit:cover;object-position:top center;
  border:1px solid var(--border-strong);background:var(--surface);cursor:pointer;opacity:0;transition:opacity .3s,transform .18s var(--spring)}
.tl-thumb.loaded{opacity:1}
.tl-thumb:hover{transform:scale(1.05)}

/* workspace — tab pill group centred above the preview, below the header */
.wsegbar{display:flex;justify-content:center;padding:16px 16px 0;position:sticky;top:10px;z-index:12;pointer-events:none}
.wsegbar .seg{pointer-events:auto;margin:0;box-shadow:0 10px 26px -12px rgba(0,0,0,.5);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}

/* key quotes — Discuss action per quote row */
.kqi .km{align-items:center}
.kq-discuss{font-size:10.5px;font-weight:700;color:var(--primary-hi);background:var(--primary-soft);border-radius:99px;padding:4px 12px;flex:none;
  transition:filter .15s,transform .16s var(--spring)}
.kq-discuss:hover{filter:brightness(1.2)}
.kq-discuss:active{transform:scale(.95)}

/* upload card — spinner while reading, resolves into a ✓ done-card */
.upcard{display:flex;align-items:center;gap:12px;background:var(--glass);border:1px solid var(--border);border-radius:14px;padding:13px 16px;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);animation:popIn .4s var(--spring) both}
.upcard+.upcard{margin-top:8px}
.upspin{width:18px;height:18px;flex:none;border-radius:50%;border:2px solid var(--primary-soft);border-top-color:var(--primary-hi);animation:spin .9s linear infinite}
.upok{width:22px;height:22px;flex:none;border-radius:50%;background:var(--success);color:#08110a;display:grid;place-items:center;font-size:12px;font-weight:800}
.upt{min-width:0}
.upt b{font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.upt span{font-size:11.5px;color:var(--muted)}

/* captured-facts — ONE compact summary card with spot-check / open actions */
.capsum{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--primary-soft);border:1px solid rgba(107,123,245,.22);
  border-radius:12px;padding:11px 14px;font-size:13px}
.capsum .cap-ic{color:var(--primary-hi);flex:none}
.capsum .capsum-t{flex:1;min-width:140px}
.capsum .capsum-acts{display:flex;gap:7px;flex:none}
.capsum .qbtn{padding:6px 13px;font-size:11.5px}

/* redaction filmstrip — real page thumbnails (skeleton = the #f6f6f4 card) */
.sthumb{position:relative;overflow:hidden;padding:0}
.sthumb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;opacity:0;transition:opacity .3s}
.sthumb-img.loaded{opacity:1}
.sthumb .spg{position:absolute;inset-inline-start:0;inset-inline-end:0;bottom:0;text-align:center;font-size:9px;font-weight:700;color:#fff;background:rgba(8,8,16,.45);padding:1px 0;pointer-events:none}

@media (max-width:1000px){
  .wsegbar{padding:10px 12px 0;top:6px}
  .wsegbar .seg{width:100%}
  .wsegbar .seg button{flex:1}
}

/* ── text-document paper rendering (docx/pdf/txt) ── */
.paperwrap{display:flex;flex-direction:column;gap:18px;align-items:center;padding:6px 0 30px;width:100%}
/* THIS is the page in the redaction check — .redpage is a different thing and
   widening it did nothing, which is what he saw. 720px on a fifteen-hundred-
   pixel pane leaves most of the screen empty while he scans a twenty-two page
   thread for a missed name. */
.paperpage{background:#f7f5f0;color:#1c2030;width:min(1040px,96%);border-radius:6px;padding:38px 52px;box-shadow:0 12px 34px -12px rgba(0,0,0,.5);position:relative}
html[data-theme="light"] .paperpage{border:1px solid rgba(12,35,64,.12)}
.paperno{position:absolute;top:10px;inset-inline-end:14px;font-size:10px;color:#8a8f9e;font-family:var(--mono,monospace)}
.paperbody{font-family:Georgia,'Times New Roman',serif;font-size:13.5px;line-height:1.72;white-space:pre-wrap;word-wrap:break-word}
.papernote{font-size:12px;color:var(--subtle);background:var(--primary-soft);border:1px solid var(--border);border-radius:10px;padding:9px 13px;margin:0 auto 14px;width:min(720px,94%)}
mark.redmark{background:rgba(53,67,240,.85);color:#fff;border-radius:4px;padding:0 5px;font-family:var(--body);font-size:11px;font-weight:700;letter-spacing:.02em}
#wsDocNote,#redNote{overflow-y:auto;max-height:100%}
/* THE PAGE WAS NEVER THE CONSTRAINT — ITS CONTAINER WAS.
   .docnote is a small dashed box for "no preview available": 560px, centred,
   muted, dashed border. The redaction check reuses it to hold the entire
   document, so widening .paperpage twice changed nothing — the paper was
   already wider than the box it sits in. When it is holding a document it is
   not a note. */
#redNote,#wsDocNote{max-width:none;margin:0;padding:0;border:0;text-align:start;
  color:inherit;font-size:inherit;line-height:inherit}

/* highlight-to-redact floating button + left-aligned paper body */
.selredact{position:fixed;z-index:400;background:var(--primary);color:#fff;border:none;border-radius:99px;padding:8px 14px;font-size:12px;font-weight:700;cursor:pointer;box-shadow:0 10px 28px -8px rgba(53,67,240,.6);animation:rise .18s var(--spring)}
.selredact:hover{filter:brightness(1.15)}
.paperbody{text-align:start}
.paperbody::selection,.paperbody *::selection{background:rgba(53,67,240,.3)}

/* panel: real thumbs, text-doc icon, delete control, inline custom-tag input */
.dthumb img{width:100%;height:100%;object-fit:cover;object-position:top center;border-radius:4px;display:block}
.dthumb.dtxt{display:grid;place-items:center}
.dthumb.dtxt svg{width:14px;height:14px;stroke:var(--muted);fill:none;stroke-width:1.6}
.ddel{flex:none;width:20px;height:20px;border-radius:99px;display:grid;place-items:center;color:var(--muted);font-size:11px;cursor:pointer;margin-inline-start:4px}
.ddel:hover{background:rgba(220,38,38,.18);color:#f87171}
.ntinput{display:flex;gap:6px;padding:6px}
.ntinput input{flex:1;min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:6px 9px;color:var(--text);font:inherit;font-size:12px;outline:none}
.ntinput input:focus{border-color:var(--primary)}
.ntinput button{background:var(--primary);color:#fff;border-radius:8px;padding:6px 11px;font-size:11.5px;font-weight:600}

/* filmstrip drag-to-reorder */
.sthumb.dragging{opacity:.4}
.sthumb.dragover{outline:2px solid var(--primary);outline-offset:2px}
.striphint{font-size:10.5px;color:var(--muted);align-self:center;padding:0 8px;white-space:nowrap}

/* ══════════════════════════════════════════════════════════════════
   FOR-YOU TRAY · FULL REVIEW · GROUNDS TABLE · INLINE POPOVER ·
   FILMSTRIP THUMBS (2026-07-22)
   ══════════════════════════════════════════════════════════════════ */

/* ── for-you tray — the action center (repurposed bell sheet) ── */
@keyframes fySlide{from{opacity:0;transform:translateY(-12px) scale(.97)}to{opacity:1;transform:none}}
.qv.fyauto{animation:fySlide .5s var(--spring)}
.qv.fyauto .qvitem{animation:riseSoft .45s var(--ease) both}
.qv.fyauto .qvitem:nth-child(2){animation-delay:.07s}
.qv.fyauto .qvitem:nth-child(3){animation-delay:.14s}
.fyitem{cursor:default}
.fyitem:hover{transform:none}
.fyrow{display:flex;gap:11px;align-items:flex-start}
.fyico{width:30px;height:30px;border-radius:9px;background:var(--primary-soft);color:var(--primary-hi);display:grid;place-items:center;flex:none;margin-top:1px}
.fyico svg{width:15px;height:15px}
.fyico.lawflag,.fyico.deadline{background:rgba(240,166,62,.14);color:#f0a63e}
.fybody{flex:1;min-width:0}
.fyitem .qacts{margin-top:9px}
.fyhint{color:var(--primary-hi)}
.fyanswer{display:flex;gap:7px;align-items:center;margin-top:9px;border:1px solid var(--border);border-radius:10px;padding:5px 5px 5px 11px;background:var(--surface);transition:border-color .2s,box-shadow .2s}
.fyanswer:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.fyanswer input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--text);font:inherit;font-size:12.5px}
.fyanswer input::placeholder{color:var(--muted)}
.fyanswer input:disabled{opacity:.5}

/* ── "Open the full review" button — chat verdict card / case map / strategy ── */
.reviewbtn{display:inline-flex;align-items:center;gap:8px;background:var(--primary);color:#fff;border-radius:99px;padding:9px 18px;
  font-size:12.5px;font-weight:700;margin:2px 0 4px;box-shadow:0 10px 26px -10px rgba(53,67,240,.55);
  transition:filter .15s,transform .16s var(--spring)}
.reviewbtn:hover{filter:brightness(1.14)}
.reviewbtn:active{transform:scale(.97)}
.reviewbtn svg{width:14px;height:14px;stroke:#fff}
#reviewBody{font-size:13.5px;line-height:1.7}
#reviewBody h2{font-family:var(--font-disp);font-weight:500}
#reviewBody h3{margin:16px 0 6px}
#reviewBody blockquote{background:var(--surface-2);border-radius:8px;padding:6px 10px;color:var(--muted);font-size:12.5px}

/* ── case map — the review entry card ── */
.revcard{display:flex;align-items:center;gap:13px;margin-top:14px;background:var(--glass);border:1px solid rgba(53,67,240,.35);border-radius:14px;
  padding:14px 16px;cursor:pointer;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  transition:transform .2s var(--spring),border-color .2s,box-shadow .2s}
.revcard:hover{transform:translateY(-2px);border-color:var(--primary);box-shadow:0 14px 32px -14px rgba(53,67,240,.35)}
.revcard .ri{width:38px;height:44px;border-radius:8px;background:linear-gradient(160deg,var(--primary-soft),transparent);border:1px solid var(--border);display:grid;place-items:center;color:var(--primary-hi);flex:none}
.revcard .rt{flex:1;min-width:0}
.revcard .rt b{font-size:13.5px;display:block}
.revcard .rt span{font-size:11.5px;color:var(--muted);margin-top:2px;display:block}
.revcard .go{margin-inline-start:auto;color:var(--muted);flex:none;transition:transform .2s var(--spring),color .15s}
.revcard:hover .go{transform:translateX(3px);color:var(--primary-hi)}

/* ── the grounds table — the case's most important artifact ── */
.gt{background:var(--glass);border:1px solid var(--border-strong);border-radius:18px;padding:22px 24px;margin-bottom:28px;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);animation:riseSoft .34s var(--ease) both}
.gt .gtk{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--primary-hi);margin-bottom:6px}
.gt h4{font-family:var(--font-disp);font-size:22px;font-weight:500;margin:0 0 6px;letter-spacing:-.01em}
.gtdocs{font-size:11.5px;color:var(--muted)}
.gtdocs span{color:var(--primary-hi);margin:0 4px}
.gtfocus{font-size:12.5px;line-height:1.6;color:var(--subtle);background:var(--surface);border-radius:11px;padding:10px 13px;margin-top:12px}
.gtrows{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.gtrow{border:1px solid var(--border);border-radius:12px;padding:12px 14px;background:var(--surface)}
.gtrow.ok{background:color-mix(in srgb, var(--success) 6%, transparent)}
.gtrow.mid{background:rgba(240,166,62,.07)}
.gtrow.bad{background:rgba(239,68,68,.07)}
.gtchip{display:inline-block;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:3px 9px;border-radius:99px;margin-bottom:7px}
.gtchip.ok{background:rgba(74,222,128,.14);color:var(--success)}
.gtchip.mid{background:rgba(240,166,62,.16);color:#f0a63e}
.gtchip.bad{background:rgba(239,68,68,.18);color:#f87171;animation:badgePulse 2.6s ease-out infinite}
.gtg{font-size:13.5px;font-weight:600;line-height:1.45}
.gtn{font-size:12px;color:var(--muted);line-height:1.55;margin-top:5px}
.gtdeadline{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:12.5px;line-height:1.55;color:var(--subtle);
  background:rgba(240,166,62,.1);border:1px solid rgba(240,166,62,.3);border-radius:11px;padding:11px 13px}
.gtdeadline svg{width:15px;height:15px;color:#f0a63e;margin-top:1px;flex:none}
.gtdeadline b{color:var(--text)}
.gtreview{margin-top:14px}

/* ── inline popover — no browser dialogs anywhere ── */
.ipop{position:fixed;z-index:400;width:260px;background:var(--glass);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid var(--border-strong);border-radius:13px;padding:11px 12px;box-shadow:0 20px 50px -14px rgba(0,0,0,.6);animation:popIn .22s var(--spring)}
.ipop .ipt{font-size:12px;font-weight:600;margin-bottom:7px}
.ipop input{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:8px 10px;color:var(--text);font:inherit;font-size:12.5px;outline:none}
.ipop input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.ipop .ipacts{display:flex;justify-content:flex-end;gap:7px;margin-top:9px}
.ipop .qbtn{padding:6px 13px;font-size:11.5px}

/* ── redaction filmstrip — proper page thumbnails, not thin pills ── */
.strip .sthumb{flex:none;width:54px;height:72px;border-radius:6px}
.sthumb .spg{inset-inline-start:auto;inset-inline-end:3px;bottom:3px;border-radius:5px;padding:1px 6px;font-size:9.5px}
.sthumb.on{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary),0 0 0 5px var(--primary-soft)}

/* laws grouped: one row per statute with its verification trail attached */
/* the laws page was a stacked column of full-width blocks; it is a gallery now */
#lawGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.lawrow{border:1px solid var(--border);border-radius:14px;background:var(--surface);overflow:hidden}
.lawrow-h{display:flex;align-items:center;gap:10px;padding:12px 15px;cursor:pointer;flex-wrap:wrap}
.lawrow-h:hover{background:var(--surface-hover)}
.lawrow-h b{font-size:13.5px}
.lawic{width:16px;height:16px;stroke:var(--primary-hi);fill:none;stroke-width:1.8;flex:none}
.lawopen{margin-inline-start:auto;font-size:11.5px;color:var(--primary-hi)}
.lawrow-checks{border-top:1px solid var(--border);padding:8px 15px 12px;display:flex;flex-direction:column;gap:8px}
.lawchk{display:flex;gap:9px;align-items:flex-start;font-size:12.5px}
.lawchk .chip{flex:none;margin-top:1px}
.lawchk-b{min-width:0;line-height:1.5}
.lawchk-note{color:var(--muted);font-size:12px;margin-top:2px}

/* ---- timeline: date + thumbnail column on the RIGHT (desktop format) ---- */
.tl-card-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none;margin-inline-start:auto}
.tl-card-right .tl-card-date{margin-inline-start:0}
.tl-card-right .tl-thumb{width:64px;height:64px}

/* ---- evidence card: ✕ remove for not-in-case uploads ---- */
.evdel{position:absolute;top:8px;inset-inline-end:8px;z-index:3;width:22px;height:22px;margin-inline-start:0;
  background:rgba(10,12,18,.55);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.12);color:#cbd2e0}
.evdel:hover{background:rgba(220,38,38,.6);color:#fff;border-color:transparent}

/* findings → source-document jump chips + law check provenance */
.fsrc-link{cursor:pointer;color:var(--primary-hi);transition:opacity .15s}
.fsrc-link:hover{opacity:.75;text-decoration:underline}
.lawchk-src{font-size:11px;color:var(--muted);font-style:italic}

/* ═══ GUIDANCE — the one next step, as a designed card + the breathing bar ═══ */
/* THE REDESIGN EXISTED. IT WAS APPLIED TO THE OTHER CARD.

   b058eba replaced the coloured strip with a mark that draws itself once on
   arrival — a document outline for the card that wants a file, a question mark
   for the one that wants an answer. It landed on .msg.a.is-ask, the ask inside
   the conversation. The guidance card is a different element and kept its 3px
   strip, so the app had both treatments at once and the old one was the one on
   screen. Same language here: the mark carries it, the kind stays in words. */
/* Sized like the conversation it sits in, not like a modal. A question with
   four options and a text box was folded into 420px with a thousand pixels of
   empty chat beside it, so every option wrapped to three lines. */
.gcard{margin:18px 0 4px;padding:19px 22px 17px;border-radius:14px;position:relative;
  width:min(72ch,88%);
  background:linear-gradient(180deg,var(--surface),var(--surface-2,var(--surface)));
  border:1px solid var(--line);overflow:hidden;
  box-shadow:0 6px 24px rgba(0,0,0,.18);animation:gcardIn .35s cubic-bezier(.2,.8,.3,1)}
/* THE TWO SIDES OF A DISAGREEMENT, SIDE BY SIDE. A comparison read as one
   sentence carrying two full quotations and two filenames; it is a comparison,
   so it is laid out as one. */
/* stacked, not side by side — see the note on .g-side-p below */
.g-sides{display:grid;grid-template-columns:1fr;gap:10px;margin:11px 0 4px}
.g-side{background:var(--surface-2,var(--surface));border:1px solid var(--line);
  border-radius:10px;padding:9px 11px;min-width:0}
.g-side-h{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);margin-bottom:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-side-q{font-size:12.5px;line-height:1.5;color:var(--text)}
/* the passage cut from the page, with the words lit — so he can read what each
   document actually says without going to find either of them.

   IT WAS TOO SMALL TO READ. Two panels, inside a card, inside a column, left
   the crop about two hundred pixels wide — a picture of text rather than text.
   The two sides stack unless the card is genuinely wide, so each gets the full
   width; the crop is drawn at twice the density it displays at; and clicking
   one opens the page itself. */
/* THE CROP NEEDS THE WHOLE CARD, NOT HALF OF IT.

   Two panels side by side inside a card inside the conversation column gave the
   passage about four hundred pixels of a page that is a thousand wide, and a
   three-line crop at that scale is a picture of text. The two sides stack, so
   each passage is the full width of the card — a comparison of two quotations
   reads perfectly well one above the other, and the point is being able to read
   them. */
.g-side-p{margin-top:10px;cursor:zoom-in;position:relative}
/* THE CROP THAT COULD NOT BE CUT, SAYING SO. A quote that is not on the
   page word for word is the side to distrust, and it used to leave a gap
   where a picture had been promised. Quiet, not alarming: it is a caveat
   on a line, not a failure of the app. */
.g-side-none{margin-top:10px;padding:8px 10px;background:var(--surface-2);border-radius:6px;
  font-size:12.5px;line-height:1.5;color:var(--muted,#6b7288);cursor:default}
.g-side-p .passcv{display:block;width:100%;height:auto;border-radius:6px;
  border:1px solid var(--line);background:#f6f6f4}
/* the page itself, over the conversation — not a trip to the evidence modal */
.pageov{position:fixed;inset:0;z-index:300;background:rgba(8,8,18,.86);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:flex;flex-direction:column;align-items:center;padding:0 0 24px;
  animation:riseSoft .22s var(--ease)}
.pageov-h{width:100%;display:flex;align-items:center;gap:14px;padding:14px 22px;
  color:var(--text);font-size:13px}
.pageov-h b{font-weight:600;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pageov-h span{color:var(--muted);font-size:11.5px}
.pageov-x{margin-inline-start:auto;background:none;border:0;color:var(--muted);font-size:17px;
  cursor:pointer;padding:2px 8px;border-radius:6px}
.pageov-x:hover{color:var(--text);background:var(--surface)}
.pageov-b{flex:1;min-height:0;overflow:auto;padding:0 24px 8px}
.pageov-b canvas{display:block;height:auto;border-radius:6px;box-shadow:0 24px 60px -18px rgba(0,0,0,.7)}

.g-side-p::after{content:"open the page";position:absolute;inset-inline-end:7px;bottom:7px;
  font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:#fff;background:rgba(20,22,40,.72);padding:3px 7px;border-radius:99px;
  opacity:0;transition:opacity .15s;pointer-events:none}
.g-side-p:hover::after{opacity:1}
/* and what it said when he asked what the question meant */
.g-explain{background:color-mix(in srgb, var(--primary) 10%, transparent);
  border-radius:8px;
  padding:10px 13px;margin:0 0 12px;font-size:13px;line-height:1.55}
.g-explain p{margin:0 0 7px}.g-explain p:last-child{margin:0}

.gcard::before{content:"";position:absolute;inset:0 0 auto;height:2px;
  background:linear-gradient(90deg,var(--primary),transparent 62%);opacity:.85}
.gcard.gk-deadline::before{background:linear-gradient(90deg,var(--warn,#f0a63e),transparent 62%)}
.gcard.gk-evidence::before,.gcard.gk-confirm::before{background:linear-gradient(90deg,var(--success,#4ade80),transparent 62%)}
.gcard.gk-law::before{background:linear-gradient(90deg,#8fa0bd,transparent 62%)}
.gcard.gk-choose::before{background:linear-gradient(90deg,#2f9e8f,transparent 62%)}
.gcard.gk-working::before{background:linear-gradient(90deg,var(--muted),transparent 62%)}
@keyframes gcardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.g-eyebrow{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--primary-hi);margin-bottom:6px}
/* THE CHAT BODY IS 15.5px. The card sat at 13.5 and read as fine print beside
   it — "the font is still far too small compared to the rest of the chat",
   said twice. Measured this time rather than nudged. */
.g-title{font-size:16.5px;font-weight:600;line-height:1.4;color:var(--text)}
.g-why{font-size:15.5px;color:var(--subtle);line-height:1.6;margin-top:8px}
.g-answer{margin-top:12px}
.g-answer textarea{width:100%;resize:vertical;min-height:44px;padding:10px 12px;border-radius:10px;
  background:var(--bg);border:1px solid var(--line);color:var(--text);font:inherit;font-size:13px}
.g-answer textarea:focus{outline:none;border-color:var(--primary)}
.g-acts{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}

.gcard.gk-deadline .g-eyebrow{color:var(--warn,#f0a63e)}

/* breathing bar — background work is alive, in words */
.guidebar{display:flex;align-items:center;gap:9px;margin:0 auto 8px;max-width:var(--maxw,860px);
  padding:7px 14px;border-radius:99px;background:var(--surface);border:1px solid var(--line);
  font-size:12px;color:var(--muted);width:fit-content}
.guidebar.hid{display:none}
.gdot{width:8px;height:8px;border-radius:99px;background:var(--primary);flex:none;animation:gbreathe 1.6s ease-in-out infinite}
@keyframes gbreathe{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
@media (prefers-reduced-motion: reduce){.gdot{animation:none}.gcard{animation:none}}

/* side panel: tasks section above the documents list */
.dp-tasks-h{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:10px 2px 6px}
.dp-tasks{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.dp-tasks .qvitem{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px}

/* question quick-answer chips */
.g-chips{display:flex;gap:8px;margin-top:12px}
.gchip{padding:6px 16px;border-radius:99px;background:var(--bg);border:1px solid var(--line);color:var(--text);font-size:12.5px;cursor:pointer;transition:all .15s}
.gchip:hover{border-color:var(--primary);color:var(--primary-hi)}

/* upload done-card thumbnail (intake-style) */
.upcard .upthumb{width:44px;height:56px;object-fit:cover;object-position:top;border-radius:8px;flex:none;border:1px solid var(--line);opacity:0;transition:opacity .3s}
.upcard .upthumb.loaded{opacity:1}

/* evidence card skip link */
.g-skip{margin-top:10px;text-align:end}
.g-skip span{font-size:11.5px;color:var(--muted);cursor:pointer;text-decoration:underline dotted}
.g-skip span:hover{color:var(--primary-hi)}

.gcard.gk-evidence .g-eyebrow{color:var(--success,#4ade80)}

/* ═══ ACTIVITY PANEL — the audit log ═══ */
.act-now{display:flex;gap:10px;align-items:center;padding:12px;border-radius:12px;margin-bottom:10px;
  background:linear-gradient(90deg,rgba(53,67,240,.10),transparent);border:1px solid var(--line)}
.act-now-k{font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--primary-hi)}
.act-now-t{font-size:12.5px;color:var(--text);margin-top:2px}
.act-list{display:flex;flex-direction:column}
.act-row{display:flex;gap:9px;align-items:baseline;padding:7px 4px;border-bottom:1px solid var(--line);font-size:12px}
.act-row:last-child{border-bottom:none}
.act-ic{flex:none;width:16px;text-align:center;color:var(--muted)}
.act-row.capture .act-ic{color:var(--success,#4ade80)}
.act-row.review .act-ic{color:var(--primary-hi)}
.act-row.lawflag{background:rgba(240,166,62,.07);border-radius:8px}
.act-row.lawflag .act-ic{color:var(--warn,#f0a63e)}
.act-t{flex:1;color:var(--text);line-height:1.45;word-break:break-word}
.act-row.task .act-t{color:var(--muted)}
.act-at{flex:none;font-size:10px;color:var(--muted);font-family:var(--font-mono,monospace)}

/* the busy pill is CHROME, not a message — quiet, small, click-through */
.guidebar{font-size:11px;padding:5px 12px;opacity:.72;cursor:pointer;transition:opacity .2s}
.guidebar:hover{opacity:1}
.guidebar .gdot{width:6px;height:6px}

/* header working ring — background activity, never in the conversation */
.workring{display:none !important;position:absolute;inset:-3px;border-radius:12px;pointer-events:none;
  border:1.5px solid transparent;border-top-color:var(--primary);border-inline-end-color:var(--primary);
  animation:workspin 1.1s linear infinite}
.workring.hid{display:none}
@keyframes workspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.workring{animation:none;border-color:var(--primary)}}
#notifBtn{position:relative}

/* what this ask is FOR — the destination line on evidence cards */
.g-for{font-size:11.5px;color:var(--muted);margin-bottom:8px;padding-bottom:8px;border-bottom:1px dashed var(--line)}
.g-for b{color:var(--text);font-weight:600}

/* ── STAGE 2: the understanding card ── */
.und-sum{font-size:13.5px;line-height:1.6;color:var(--text);margin:10px 0}
.und-gs{display:flex;flex-direction:column;gap:6px;margin:12px 0}
.und-g{display:flex;gap:10px;align-items:baseline;justify-content:space-between;padding:8px 10px;border-radius:9px;background:var(--bg);border:1px solid var(--line);font-size:12.5px}
.und-g i{font-style:normal;font-size:10.5px;white-space:nowrap;color:var(--muted)}
.und-g.ok{background:color-mix(in srgb, var(--success,#4ade80) 7%, transparent)}
.und-g.ok i{color:var(--success,#4ade80)}
.und-g.part{background:var(--surface-2)}
.und-g.bare{background:rgba(240,166,62,.09)}
.und-g.bare i{color:var(--warn,#f0a63e)}

/* ── STAGE 4: the routes ── */
.trk-list{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.trk{display:flex;gap:10px;padding:11px 12px;border-radius:11px;background:var(--bg);border:1px solid var(--line);cursor:pointer;transition:border-color .15s}
.trk:hover{border-color:var(--primary)}
.trk input{margin-top:3px;accent-color:var(--primary);flex:none}
.trk-n{font-size:13px;font-weight:600;color:var(--text)}
.trk-rec{margin-inline-start:8px;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--primary-hi)}
.trk-w{font-size:12px;color:var(--text);opacity:.85;margin-top:3px;line-height:1.5}
.trk-a{font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.5}
.trk-m{font-size:10.5px;color:var(--muted);margin-top:5px;font-style:italic}

.gcard.gk-working{opacity:.92}
.gcard.gk-working .g-title{display:flex;align-items:center;gap:9px}

/* the reading, in the case view */
.cm-read{padding:16px 18px;border-radius:14px;background:var(--surface);border:1px solid var(--line);margin-bottom:18px}
.cm-read-h{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.und-ok{color:var(--success,#4ade80);letter-spacing:0;text-transform:none;font-weight:600}
.und-wait{color:var(--warn,#f0a63e);letter-spacing:0;text-transform:none;font-weight:600}
.cm-read-b{font-size:13px;line-height:1.65;color:var(--text)}
.cm-read-b ul{padding-inline-start:18px;margin:8px 0}
.cm-read-b li{margin:5px 0}
.cm-read-c{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line);font-size:12px;color:var(--muted)}

/* the gathering strip sits above the composer, never inside the conversation */
.gslot{max-width:var(--maxw,860px);margin:0 auto;width:100%}
.gslot .gstrip{margin:0 0 8px}

/* the strip is unmistakably chrome — a pill above the composer, never a message */
.gslot .gstrip{background:linear-gradient(90deg,rgba(74,222,128,.08),transparent);
  border:1px solid var(--line);border-radius:99px;padding:8px 8px 8px 16px}
.gslot .gs-t{font-size:11.5px}
/* where he already has it — inline, because the strip is a pill and a second
   line would break it open */
.gs-in{font-style:normal;font-size:10.5px;color:var(--warn,#c9954a);opacity:.95}
.gslot .gs-done{margin-inline-start:2px}

/* faint corkboard grid */

/* ═══════════════════════════════════════════════════════════════════════════
   THE CONVERSATION — read at length by someone under strain.
   Bigger type, a clear rhythm, and each kind of message with its own voice.
   ═══════════════════════════════════════════════════════════════════════════ */
.chat{gap:26px;padding-bottom:8px}
.msg{max-width:min(72ch, 88%);font-size:15.5px;line-height:1.72;letter-spacing:.002em}
.msg p{margin:0 0 .85em}
.msg p:last-child{margin-bottom:0}
.msg.a{animation:msgIn .5s cubic-bezier(.16,.9,.28,1) both}
.msg.u{animation:msgInU .34s cubic-bezier(.16,.9,.28,1) both;font-size:15px;padding:12px 17px;
  background:linear-gradient(180deg, var(--surface), var(--bg));box-shadow:0 2px 10px rgba(0,0,0,.14)}
@keyframes msgIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes msgInU{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.msg.a,.msg.u{animation:none}}

/* the speaker mark — a quiet monogram rather than a repeated word */
.msg.a .who{display:flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;color:var(--muted);opacity:.75;margin-bottom:9px}
/* the mark, not a coloured square standing in for it */
.msg.a .who .whomark{width:17px;height:17px;flex:none;fill:var(--primary-hi);stroke:none;opacity:.9}
:root[data-theme="light"] .msg.a .who .whomark{fill:var(--primary)}

/* headings inside a reply carry weight without shouting */
.msg.a h2, .msg.a h3{font-size:17px;line-height:1.35;margin:.2em 0 .55em;font-weight:650;letter-spacing:-.01em}
.msg.a h3{font-size:15.5px}
.msg.a strong, .msg.a b{font-weight:650;color:var(--text)}
.msg.a em{color:var(--muted);font-style:italic}
.msg.a ul, .msg.a ol{margin:.5em 0 .9em;padding-inline-start:1.25em}
.msg.a li{margin:.35em 0}
.msg.a a{color:var(--primary-hi);text-decoration:underline;text-underline-offset:2px}
.msg.a blockquote{margin:.6em 0;padding:.4em 12px;background:var(--surface-2);border-radius:8px;color:var(--muted)}

.reg-k{display:inline-block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--primary-hi);margin-inline-end:9px;vertical-align:1px;white-space:nowrap}

/* AN ASK is the app's voice at its most direct — it should feel addressed to you */
.msg.a.is-ask{padding:16px 18px 15px;border-radius:16px;
  background:linear-gradient(180deg, rgba(107,123,245,.09), rgba(107,123,245,.02));
  border:1px solid var(--line);
  box-shadow:0 6px 22px rgba(0,0,0,.16)}
.msg.a.is-ask .who::before{background:linear-gradient(135deg,#4ade80,#2bb673);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 2px 8px rgba(43,182,115,.4)}
.msg.a.is-ask strong:first-of-type{font-size:16.5px;line-height:1.45}

/* a QUESTION the app was asked, kept as a record */
.msg.a.is-qa{opacity:.72;font-size:14px}

/* a MILESTONE — something was settled */
.msg.a.is-win{padding:13px 16px;border-radius:14px;
  background:linear-gradient(180deg, rgba(43,182,115,.10), transparent);
  border:1px solid rgba(43,182,115,.22)}
.msg.a.is-win .who::before{background:linear-gradient(135deg,#4ade80,#2bb673)}

/* the working line — alive, unobtrusive */
.msg.steps{font-size:12.5px}
.thinkline{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12.5px;padding:2px 0}
.thinkline .tdot{width:7px;height:7px;border-radius:99px;background:var(--primary);
  animation:tpulse 1.35s ease-in-out infinite}
@keyframes tpulse{0%,100%{opacity:.3;transform:scale(.75)}50%{opacity:1;transform:scale(1.2)}}

/* the lit cross-references ride above the cards, and are never clickable */

/* a card on the wall */

/* THE CENTRE — what all of it is for. The one card that owns the brand blue. */

/* the heading on top, each goal underneath — one card, said once */

/* a point of yours — a left rule carries its state, no purple anywhere */

/* which documents are holding this point up — their own colours */

/* a document you hold — it owns a colour, and everything it touches shows it */

/* the drawer — every fact this document put into the case */

.bfact{display:flex;gap:6px;align-items:flex-start;padding:6px 5px;border-radius:6px;cursor:default;
  transition:background .14s}
.bfact.has{cursor:pointer}
.bfact.has:hover{background:color-mix(in srgb, var(--h) 16%, transparent)}
.bfact.on{background:color-mix(in srgb, var(--primary) 26%, transparent)}

/* something named but absent */

/* docked: its own column, so no card is ever underneath it */

/* ═══════════════════════════════════════════════════════════════════════════
   THE DOCUMENT WORKSPACE — the page and its analysis, side by side, always.
   You should never have to leave the document to read what was found in it.
   ═══════════════════════════════════════════════════════════════════════════ */
.wsc.wssplit{display:flex;flex-direction:row;min-width:0;min-height:0}
.wsdoccol{display:flex;flex-direction:column;min-width:320px;min-height:0;
  width:var(--ws-doc-pct, 70%);background:var(--bg);position:relative}
.wssidecol{display:flex;flex-direction:column;flex:1;min-width:340px;min-height:0;
  border-inline-start:1px solid var(--line);background:var(--surface)}
.wssidecol .wspane{flex:1;min-height:0;overflow:auto}
.wsdoccol .wspane{flex:1;min-height:0;overflow:auto;display:block}
.wsdrag{width:5px;flex:none;cursor:col-resize;background:transparent;position:relative;z-index:4}
.wsdrag::after{content:"";position:absolute;inset:0 2px;background:var(--line);transition:background .15s}
.wsdrag:hover::after{background:var(--primary)}
@media (max-width:900px){
  .wsc.wssplit{flex-direction:column}
  .wsdoccol{width:auto;flex:1;min-width:0}
  .wssidecol{border-inline-start:none;border-top:1px solid var(--line);min-width:0;max-height:46%}
  .wsdrag{display:none}
}

/* the toolbar over the page — the things you do TO a document */
.wstoolbar{display:flex;align-items:center;gap:8px;padding:9px 14px;flex:none;
  border-bottom:1px solid var(--line);background:var(--surface)}
.tb-t{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tb-sp{flex:1}
.tb-b{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px;
  font-size:11.5px;color:var(--muted);cursor:pointer;border:1px solid transparent;transition:all .15s;user-select:none}
.tb-b svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tb-b:hover{color:var(--text);border-color:var(--line);background:var(--bg)}
.tb-b.on{color:#fff;background:var(--primary);border-color:transparent}
.tb-b.hid{display:none}

/* what you get when you select text on the page */
.selbar{position:fixed;z-index:60;display:flex;gap:2px;padding:4px;border-radius:11px;
  background:rgba(12,15,24,.97);border:1px solid var(--line);backdrop-filter:blur(10px);
  box-shadow:0 14px 34px rgba(0,0,0,.5);animation:selIn .14s ease-out}
:root[data-theme="light"] .selbar{background:rgba(255,255,255,.98)}
.selbar.hid{display:none}
@keyframes selIn{from{opacity:0;transform:translateY(4px) scale(.97)}to{opacity:1;transform:none}}
.selbar button{background:none;border:none;color:var(--text);font:inherit;font-size:12px;
  padding:7px 12px;border-radius:8px;cursor:pointer;white-space:nowrap}
.selbar button:hover{background:var(--primary);color:#fff}

/* a key quote you can click to find on the page */
.kqi{cursor:pointer;transition:border-color .15s, background .15s}
.kqi:hover{border-color:var(--primary)}
.kqi.on{border-color:var(--primary);background:rgba(83,97,240,.08)}
.kqi .kq-jump{font-size:10.5px;color:var(--primary-hi);opacity:0;transition:opacity .15s}
.kqi:hover .kq-jump{opacity:1}

/* a point with nothing independent behind it — the loudest thing on the wall */

/* ── A CARD SHOULD SAY WHAT IT IS BEFORE YOU READ IT ──────────────────────────
   Too much of the wall was the same green rectangle. Documents now read as
   paper: a solid ground in their own colour, and a marked type line. */

/* a document: a page with a folded corner */

/* a point of yours: a stroke */

/* something absent: an empty outline */

/* and what you want: filled, because it is the only solid thing on the wall */

/* documents read as PAPER — a solid ground, not a tint over the board */

/* your points stay flat and quiet, so the paper stands out from them */

/* the official source, one click away — a link that behaves like a button */
.qbtn.qlink{display:inline-flex;align-items:center;text-decoration:none;
  border:1px solid var(--line);color:var(--subtle);background:transparent}
.qbtn.qlink:hover{border-color:var(--primary);color:var(--primary-hi);background:var(--primary-soft)}
.qbtn.qlink::after{content:"↗";margin-inline-start:6px;font-size:11px;opacity:.7}

/* ── ONE ACCENT ──────────────────────────────────────────────────────────────
   Documents are paper, told apart by how brightly they are lit — the glow IS
   the weight the document carries. Colour is left to mean something: amber for
   a point nothing holds up, red for records that disagree. */

/* selecting a document lights everything it holds up — the connection you had
   to trace a coloured thread for */

/* icons: bigger, single-weight, unpainted */

/* where a law came from — an official gazette and an archive copy are not the
   same authority, and the difference matters when a provision is quoted */
.lawprovrow{padding:6px 0 2px;display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.lawprov{font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:2px 9px;border-radius:99px}
.lawprov.ok{background:rgba(74,222,128,.13);color:var(--success)}
.lawprov.warn{background:rgba(240,166,62,.15);color:#f0a63e}
.lawprov.bad{background:rgba(214,86,86,.16);color:#ff9b9b}
.lawsrc{font-size:10px;color:var(--muted);text-decoration:none}
.lawsrc:hover{color:var(--primary-hi)}
.lawnote{flex-basis:100%;font-size:11px;color:var(--muted);line-height:1.5;margin-top:2px}

/* the translation beside the original — being told what your own document says
   with no way to check is the position this app exists to get people out of */
.trnote{font-size:11.5px;line-height:1.55;color:var(--muted);padding:10px 12px;margin-bottom:12px;
  background:var(--primary-soft);border-radius:8px}
.trsplit{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:900px){.trsplit{grid-template-columns:1fr}}
.trcol{min-width:0;display:flex;flex-direction:column}
.trh{font-size:9.5px;font-weight:750;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  padding-bottom:6px;border-bottom:1px solid var(--line);margin-bottom:8px}
.trcol pre{margin:0;white-space:pre-wrap;word-break:break-word;font-family:var(--font-body);
  font-size:12px;line-height:1.65;color:var(--subtle);max-height:60vh;overflow:auto}

/* ── TIMELINE ────────────────────────────────────────────────────────────────
   The bar above it, and the entries the case is still waiting for. */
.tlbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:0 0 16px}
.tlcount{font-size:12px;color:var(--muted)}
.tlmiss{color:#e8a33d;font-weight:700}
.tlfmt{display:inline-flex;gap:1px;margin-inline-start:auto;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.tlfmt button{border:0;background:transparent;color:var(--muted);cursor:pointer;font-family:inherit;
  font-size:10px;padding:4px 9px;transition:background .15s,color .15s}
.tlfmt button:hover{background:var(--surface-hover);color:var(--text)}
.tlfmt button.on{background:var(--primary-soft);color:var(--primary-hi);font-weight:700}
/* a hole in the story, drawn where it belongs */
.tl-entry.ghost .tl-card{background:transparent;border-style:dashed;box-shadow:none}
.tl-entry.ghost .tl-card-title{color:var(--muted);font-weight:450}
.tl-entry.ghost .tl-date-circle{background:transparent;border-style:dashed;opacity:.62}
.tl-entry.ghost .tl-card-icon{opacity:.5}
.tl-type-tag.missing{background:transparent;border:1px dashed rgba(150,162,186,.5);color:var(--muted)}
.tlget{padding:2px 10px;font-size:10px}

/* telling the app it read something wrong */
.wsfix{margin-inline-start:10px;border:1px solid var(--line);background:transparent;color:var(--muted);
  cursor:pointer;font-family:inherit;font-size:10.5px;padding:3px 10px;border-radius:99px;transition:all .15s}
.wsfix:hover{border-color:var(--primary);color:var(--primary-hi);background:var(--primary-soft)}
.fixpop{position:fixed;z-index:200;inset-inline-start:50%;top:16%;transform:translateX(-50%);width:min(430px,92vw);
  background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 20px;
  box-shadow:0 26px 60px rgba(0,0,0,.5);animation:bdIn .18s cubic-bezier(.2,.8,.3,1)}
.fixh{font-size:14px;font-weight:650;color:var(--text);margin-bottom:14px}
.fixpop label{display:block;font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px}
.fixpop input,.fixpop textarea{display:block;width:100%;margin-top:6px;background:var(--bg);
  border:1px solid var(--line);border-radius:8px;padding:8px 11px;color:var(--text);
  font-family:inherit;font-size:13px;font-weight:400;letter-spacing:0;text-transform:none}
.fixpop input:focus,.fixpop textarea:focus{outline:none;border-color:var(--primary)}
.fixacts{display:flex;gap:9px;justify-content:flex-end;margin-top:4px}

/* ── THINKING ────────────────────────────────────────────────────────────────
   Not a card. A card is a thing to do; thinking is a thing happening. A moving
   mark, what it is doing, and nothing else. */
.gthinking{display:flex;align-items:center;gap:11px;padding:9px 2px;margin:6px 0 2px;
  font-size:12.5px;color:var(--muted);animation:msgIn .3s cubic-bezier(.2,.8,.3,1)}
.gthinking .gt{color:var(--subtle);font-weight:500}
.gthinking .gd{color:var(--muted);opacity:.75;padding-inline-start:11px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:42ch}
/* the mark from the unlock screen — the app's own way of saying "alive" */
.gsp{width:14px;height:14px;flex:none;border-radius:99px;position:relative}
.gsp::before,.gsp::after{content:"";position:absolute;inset:0;border-radius:99px;
  border:1.6px solid transparent;border-top-color:var(--primary);border-inline-end-color:var(--primary-hi)}
.gsp::before{animation:gspin .9s linear infinite}
.gsp::after{inset:3px;animation:gspin 1.4s linear infinite reverse;opacity:.6}
@keyframes gspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.gsp::before,.gsp::after{animation:none;opacity:.8}}

/* Background work on the Activity button: a ring that fills and empties, not a
   spinner orbiting the icon. It reads as "something is running" at a glance and
   stops competing with the badge for attention. */
.workring{display:none !important;position:absolute;inset:-3px;border-radius:11px;pointer-events:none;
  background:conic-gradient(from 0deg, var(--primary) 0deg, var(--primary-hi) 90deg, transparent 90deg, transparent 360deg);
  -webkit-mask:radial-gradient(circle, transparent 62%, #000 63%);
  mask:radial-gradient(circle, transparent 62%, #000 63%);
  animation:wr 1.6s linear infinite;opacity:.9}
@keyframes wr{to{transform:rotate(360deg)}}
.workring.hid{display:none}
@media (prefers-reduced-motion:reduce){.workring{animation-duration:4s}}

/* copy the law's name — the gazette search box wants pasting into */
.qbtn.qcopy{border:1px solid var(--line);background:transparent;color:var(--muted)}
.qbtn.qcopy:hover{border-color:var(--primary);color:var(--primary-hi);background:var(--primary-soft)}

/* the statute's own number — the only thing that distinguishes two acts with
   the same name and fifteen years between them */
.lawown{font-size:11.5px;color:var(--muted);padding:4px 0 0}
.lawown b{color:var(--subtle);font-weight:600}

/* the thread, put back after an aside — quieter than an ask, and it does not
   pretend to be new information */
.msg.a.is-nudge{opacity:.9}
.msg.a.is-nudge p{font-size:13px;color:var(--muted);
  padding-inline-start:0;margin:2px 0}
.msg.a.is-nudge .who{display:none}

/* a document a later one has changed the meaning of */
.rrbadge{display:inline-block;font-size:9px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 7px;border-radius:99px;margin-inline-start:7px;cursor:help;animation:rrp 2.4s ease-in-out infinite}
.rrbadge.rr-superseded,.rrbadge.rr-contradicts{background:rgba(214,86,86,.18);color:#ff9b9b}
.rrbadge.rr-changes{background:rgba(240,166,62,.18);color:#f0a63e}
.rrbadge.rr-completes{background:rgba(47,158,143,.16);color:#7fd6c9}
@keyframes rrp{0%,100%{opacity:1}50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.rrbadge{animation:none}}

/* the card reports its own work, then gets out of the way */
.fyitem{transition:max-height .45s cubic-bezier(.2,.8,.3,1), opacity .35s, background .25s;
  max-height:600px;overflow:hidden}
.fyitem.uploading{background:var(--primary-soft);position:relative}
.fyitem.uploading::after{content:"";position:absolute;inset-inline-start:0;inset-inline-end:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--primary-hi),transparent);
  background-size:50% 100%;animation:qslide 1.1s linear infinite}
@keyframes qslide{from{background-position:-60% 0}to{background-position:160% 0}}
.fyitem.resolved{background:rgba(74,222,128,.08)}
.qdone{font-size:11.5px;font-weight:600;color:var(--success);padding:8px 0 2px;
  animation:msgIn .25s cubic-bezier(.2,.8,.3,1)}
@media (prefers-reduced-motion:reduce){.fyitem.uploading::after{animation:none;opacity:.5}}

/* ── A LAW IS A DOCUMENT ─────────────────────────────────────────────────────
   Jump to an article rather than scrolling 220,000 characters; see what
   amended it and whether that was before your case; ask it a question. */
.lawnav{display:flex;flex-wrap:wrap;gap:5px;align-items:center;padding:0 0 14px;
  max-height:96px;overflow-y:auto}
.lawnav-l{font-size:9.5px;font-weight:750;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-inline-end:6px}
.lawnav button{border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;
  font-family:var(--font-mono,monospace);font-size:10.5px;padding:2px 8px;border-radius:6px;transition:all .14s}
.lawnav button:hover{border-color:var(--primary);color:var(--primary-hi);background:var(--primary-soft)}

.lawamend{margin-bottom:16px;border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--surface)}
.lawamend.hid{display:none}
.amh{font-size:9.5px;font-weight:750;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.amrow{padding:8px 0;border-top:1px solid var(--line);font-size:12px;line-height:1.5}
.amrow:first-of-type{border-top:0}
.amrow b{display:block;color:var(--text);font-weight:600}
.amrow span{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.amrow i{display:block;font-style:normal;font-size:11.5px;color:var(--subtle);margin-top:4px}
.amrow.ok{background:color-mix(in srgb, var(--success) 7%, transparent);border-radius:8px;padding-inline:11px}
.amrow.later{background:var(--surface-2);border-radius:8px;padding-inline:11px;opacity:.75}

.lawask{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line)}
.lawask input{flex:1;min-width:0;background:var(--bg);border:1px solid var(--line);border-radius:9px;
  padding:9px 12px;color:var(--text);font-family:inherit;font-size:12.5px}
.lawask input:focus{outline:none;border-color:var(--primary)}
.lawans{padding:0 16px 16px;font-size:12.5px;line-height:1.65;color:var(--subtle)}
.lawans p{margin:.5em 0}
.lawthink{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;padding:8px 0}

/* replying to a particular thing — click any answer to point at it */
.msg.a{cursor:default}
.msg.a:hover{background:rgba(127,140,180,.045);border-radius:10px}
.msg.a.replying{background:var(--primary-soft);border-radius:10px}
.replybar{display:flex;align-items:center;gap:10px;margin:0 auto 8px;max-width:var(--chatw,760px);
  padding:8px 12px;border-radius:8px;background:var(--primary-soft);
  border-radius:0 8px 8px 0;animation:msgIn .2s cubic-bezier(.2,.8,.3,1)}
.replybar.hid{display:none}
.rb-k{font-size:9.5px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:var(--primary-hi);flex:none}
.rb-t{flex:1;min-width:0;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rb-x{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:16px;line-height:1;padding:0 4px}
.rb-x:hover{color:var(--text)}

/* replying is not discoverable unless something says so */
.msg.a{position:relative}
.msg.a::after{content:"↩ reply to this";position:absolute;top:6px;inset-inline-end:8px;
  font-size:10px;font-weight:650;letter-spacing:.03em;color:var(--primary-hi);
  background:var(--primary-soft);border:1px solid rgba(107,123,245,.3);
  padding:2px 9px;border-radius:99px;opacity:0;transform:translateY(-3px);
  transition:opacity .16s, transform .16s;pointer-events:none}
.msg.a:hover::after{opacity:1;transform:none}
.msg.a.replying::after{content:"↩ answering this";opacity:1;transform:none}
@media (max-width:700px){.msg.a::after{display:none}}

/* a law read as a document */
.lawpager{display:flex;align-items:center;gap:10px;padding:0 0 14px}
.lawpager button{border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;
  font-family:inherit;font-size:13px;padding:3px 11px;border-radius:7px;transition:all .14s}
.lawpager button:hover:not(:disabled){border-color:var(--primary);color:var(--primary-hi)}
.lawpager button:disabled{opacity:.35;cursor:default}
.lawpager span{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.lawpager .lawmode{margin-inline-start:auto;font-size:11px}
.lawimg{display:block;width:100%;height:auto;border-radius:8px;
  box-shadow:0 8px 28px rgba(0,0,0,.35);background:#fff}
:root[data-theme="light"] .lawimg{box-shadow:0 6px 22px rgba(20,30,60,.16)}

/* ── WHAT WAS REMOVED BETWEEN TWO VERSIONS ────────────────────────────────
   Every other finding is a disagreement. This is a statement against a
   silence, so the two sides are not symmetrical and should not look it: the
   earlier record is stated plainly, and the later one is shown as what is
   left after something was taken out. */
.fcard.vdiff{background:rgba(240,166,62,.06)}
.fcard.vdiff .fq{padding-inline-start:10px}
.fcard.vdiff .fq.later{background:rgba(240,166,62,.10);opacity:.86}
.fcard.vdiff .fq.later i{color:var(--muted)}
.fsrc-link.corr{color:var(--muted)}
.fsrc-link.corr:hover{color:var(--primary,#3543F0)}

/* WHAT THIS MESSAGE IS ABOUT, INSIDE THE FRAME IT IS TYPED INTO.

   It was an amber bar of its own above the composer, which made the subject
   and the sentence about it two separate objects with a gap between them —
   and on a narrow screen the bar and the box did not even line up. One frame
   now: the quote line is the first row of the composer itself, above the
   textarea, carrying the glyph of the kind it points at. */
.cbar{flex-wrap:wrap}
.cq{order:-1;flex:0 0 100%;display:flex;align-items:center;gap:9px;min-width:0;
  padding:0 2px 8px;margin-bottom:2px;border-bottom:1px solid var(--border);font-size:12.5px}
.cq.hid{display:none!important}
.cq .cq-g{flex:none;width:17px;height:17px;color:var(--primary-hi);display:grid;place-items:center}
.cq .cq-g svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cq .cq-t{flex:1;min-width:0;color:var(--subtle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cq .cq-x{background:none;border:0;color:var(--muted);font-size:17px;cursor:pointer;line-height:1;padding:0 2px}
.cq .cq-x:hover{color:var(--text)}

/* a statute the case stands on and cannot read */
.lawgap{border:1px solid var(--warn,#f0a63e);background:rgba(240,166,62,.07);border-radius:12px;padding:14px 16px;margin-bottom:10px}
.lawgap .lg-h{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.lawgap .lg-x{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--warn,#f0a63e)}
.lawgap .lg-b{color:var(--muted);font-size:13.5px;line-height:1.55}
.lawgap .lg-a{display:flex;gap:8px;margin-top:10px}

/* the inventory: one row per provision, its elements underneath */
.invrow{border:1px solid var(--border);border-radius:12px;padding:13px 15px;margin-bottom:8px;background:var(--surface)}
.invrow.nolaw{opacity:.72}
.invrow .iv-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.invrow .iv-a{color:var(--muted);font-size:13px}
.invrow .iv-v{margin-inline-start:auto;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  padding:2px 8px;border-radius:999px;background:var(--surface-hover);color:var(--muted)}
.invrow .iv-v.ok{background:rgba(74,222,128,.14);color:var(--success)}
.invrow .iv-v.bad{background:rgba(240,90,90,.14);color:#e5484d}
.invrow .iv-v.mid{background:rgba(240,166,62,.14);color:var(--warn,#f0a63e)}
.invrow .iv-p{color:var(--muted);font-size:13.5px;line-height:1.55;margin-top:6px}
.invrow .iv-r{margin-top:9px;display:flex;flex-direction:column;gap:7px}
.invrow .iv-e{display:flex;gap:9px;font-size:13px;line-height:1.5}
.invrow .iv-e .iv-d{width:7px;height:7px;border-radius:50%;background:var(--border);margin-top:6px;flex:0 0 auto}
.invrow .iv-e.got .iv-d{background:var(--success)}
.invrow .iv-e i{color:var(--muted);font-style:normal;font-size:12px}
.invrow .iv-w{color:var(--muted);font-size:12.5px;margin-top:2px}
.invrow .iv-w.need{color:var(--warn,#f0a63e)}
.invrow .iv-mis{margin-top:9px;padding:9px 11px;border-radius:9px;background:rgba(240,166,62,.1);font-size:13px;line-height:1.55}
.invrow .iv-n{margin-top:8px;font-size:13.5px;line-height:1.6}
.invrow .iv-f{margin-top:9px;color:var(--muted);font-size:12px}

/* the assessment */
.asum{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.asum .ap{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--surface-hover);color:var(--muted)}
.asum .ap.ok{background:rgba(74,222,128,.14);color:var(--success)}
.asum .ap.bad{background:rgba(240,90,90,.14);color:#e5484d}
.asum .ap.warn,.asum .ap.mid{background:rgba(240,166,62,.14);color:var(--warn,#f0a63e)}
.anote{color:var(--muted);font-size:13.5px;line-height:1.6;margin-bottom:12px;max-width:70ch}

/* ── LAWS AS A GALLERY ────────────────────────────────────────────────────
   A statute is a thing in the case exactly as a document is, so it gets the
   same card. What it never had anywhere was the line that matters most —
   which of your documents actually stand on it. */
.lawcard .lawthumb{display:flex;align-items:flex-start;justify-content:flex-start;padding:14px;background:linear-gradient(160deg,var(--surface-hover),var(--surface))}
.lawcard.nolaw .lawthumb{background:linear-gradient(160deg,rgba(240,166,62,.13),var(--surface))}
.lawskel{display:flex;flex-wrap:wrap;gap:5px;align-content:flex-start}
.lawskel .lsa{font-size:11px;font-weight:600;padding:3px 8px;border-radius:999px;
  background:var(--surface);border:1px solid var(--border);color:var(--muted)}
.lawskel .lsa.dim{opacity:.6;font-style:italic;font-weight:500}
.lc-cite{display:flex;flex-wrap:wrap;gap:5px;padding:9px 12px 0}
.lc-cite .lc-doc{font-size:11.5px;padding:3px 8px;border-radius:999px;cursor:pointer;
  background:var(--surface-hover);color:var(--muted);border:1px solid transparent}
.lc-cite .lc-doc:hover{color:var(--text);border-color:var(--border)}
.lc-cite .lc-more{font-size:11.5px;color:var(--muted);align-self:center}
.lc-cite .lc-none{font-size:11.5px;color:var(--muted);font-style:italic}

/* the assessment, at the top where it can be found */
#lawAssess .arow{display:flex;align-items:center;gap:16px;border:1px solid var(--border);
  border-radius:12px;padding:14px 16px;margin-bottom:14px;background:var(--surface)}
#lawAssess .acol{flex:1;min-width:0}
#lawAssess .atitle{font-weight:700;margin-bottom:3px}
#lawAssess .anote{margin-bottom:0}

/* one statute, opened */
.lm-h{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}
.lm-t{font-size:19px;font-weight:700;line-height:1.3}
.lm-s{color:var(--muted);font-size:13px;margin-top:3px}
.lm-lab{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:var(--muted);margin:16px 0 8px}
.lm-docs{display:flex;flex-wrap:wrap;gap:6px}
.lm-doc{font-size:12.5px;padding:4px 10px;border-radius:999px;cursor:pointer;
  background:var(--surface-hover);border:1px solid var(--border)}
.lm-doc:hover{border-color:var(--primary,#3543F0)}
.lm-p{border:1px solid var(--border);border-radius:11px;padding:12px 14px;margin-bottom:8px}
.lm-ph{display:flex;align-items:center;gap:8px}
.lm-plain{color:var(--muted);font-size:13.5px;line-height:1.55;margin-top:5px}
.lm-req{margin-top:9px;display:flex;flex-direction:column;gap:7px}
.lm-claims{margin-top:9px;border-top:1px solid var(--border);padding-top:8px}
.lm-claim{font-size:12.5px;color:var(--muted);line-height:1.5;margin-bottom:3px}

/* the panel: what you hold, and a map of what the record refers to */
.dp-quiet{color:var(--muted);font-weight:600;font-size:11px;margin-inline-start:6px}
.dp-refs{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
.dp-ref{display:flex;align-items:baseline;gap:8px;padding:5px 2px;font-size:12.5px;
  border-bottom:1px solid var(--border)}
.dp-ref:last-child{border-bottom:0}
.dp-rn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.dp-rc{font-size:11px;color:var(--muted);opacity:.75;flex:0 0 auto}
/* a law card's face is its cited articles — enough to recognise it at a glance */
.lawcard .lawthumb{height:120px;overflow:hidden}
.lawcard .ovl .t{font-size:13px;line-height:1.35}
.lawcard .ovl .dt{font-size:11px}
/* the title sits over the card face — give it a floor so the chips never
   collide with it, whatever a statute happens to be called */
.lawcard .ovl{background:linear-gradient(180deg,transparent,rgba(6,8,16,.86) 42%);padding-top:22px}
.lawcard .lawskel{max-height:24px;overflow:hidden;flex-wrap:nowrap}

/* ── THE LAW WORKSPACE ────────────────────────────────────────────────────
   A statute opens the way a document does, because a claim about a law needs
   the same proof a claim about a document gets: the words, on the page, lit
   up beside what is being said about them. */
.wsov{position:fixed;inset:0;z-index:80;background:var(--bg);display:flex;flex-direction:column}
.wsov.hid{display:none}
.wsov .wshead{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--border)}
.wsov .wsx{background:none;border:0;color:var(--muted);font-size:18px;cursor:pointer;padding:2px 6px}
.wsov .wsx:hover{color:var(--text)}
.wsov .wstitle{font-weight:700;font-size:15px;max-width:52%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wsov .wspill{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  padding:3px 9px;border-radius:999px;background:rgba(74,222,128,.14);color:var(--success)}
.wsov .wspill.warn{background:rgba(240,166,62,.16);color:var(--warn,#f0a63e)}
.wsov .wsgrow{flex:1}
.wsov .wsbody{flex:1;display:flex;min-height:0}
.wsov .wsleft{width:46%;min-width:320px;border-inline-end:1px solid var(--border);
  display:flex;flex-direction:column;background:var(--surface-hover)}
.wsov .wsright{flex:1;overflow-y:auto;padding:18px 22px}
.lwpage{flex:1;position:relative;overflow:auto;display:flex;align-items:flex-start;justify-content:center;padding:16px}
.lwpage img{max-width:100%;height:auto;display:block;box-shadow:0 2px 18px rgba(0,0,0,.32);border-radius:3px}
.lwpage canvas{position:absolute;pointer-events:none;top:16px;inset-inline-start:50%;transform:translateX(-50%)}
.lwpage.empty::after{content:"No text held for this law yet.";color:var(--muted);font-size:13.5px;margin:auto}
.lwpage.empty img{display:none}
.lwbar{display:flex;align-items:center;justify-content:center;gap:10px;padding:9px;border-top:1px solid var(--border)}
.lwnum{font-size:12px;color:var(--muted);min-width:62px;text-align:center;font-variant-numeric:tabular-nums}

/* what it is doing in your case — before anything it says */
.lw-plain{font-size:14.5px;line-height:1.65;padding:12px 14px;border-radius:10px;
  background:var(--surface-hover);border:1px solid var(--border);margin-bottom:14px}
.lw-plain.warn{border-color:var(--warn,#f0a63e);background:rgba(240,166,62,.08)}
.lw-lab{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:var(--muted);margin:18px 0 8px}
.lw-amend{border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin-bottom:8px}
.lw-amend .lw-dt{font-size:11.5px;color:var(--muted);margin-inline-start:8px}

/* one article: what it demands, ticked off against what you have */
.lw-art{border:1px solid var(--border);border-radius:11px;padding:12px 14px;margin-bottom:9px;cursor:pointer;
  transition:border-color .18s,background .18s}
.lw-art:hover{border-color:var(--border-strong,var(--muted))}
.lw-art.on{border-color:var(--primary,#3543F0);background:rgba(53,67,240,.05)}
.lw-art.sug{border-style:dashed}
.lw-ah{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.lw-jump{margin-inline-start:auto;font-size:11px;color:var(--muted);opacity:0;transition:opacity .18s}
.lw-art:hover .lw-jump,.lw-art.on .lw-jump{opacity:1}
.lw-p{color:var(--muted);font-size:13.5px;line-height:1.6;margin-top:6px}
.lw-req{margin-top:10px;display:flex;flex-direction:column;gap:9px}
.lw-e{display:flex;gap:9px;font-size:13px;line-height:1.5}
.lw-tick{flex:0 0 14px;font-weight:700;color:var(--muted)}
.lw-e.yes .lw-tick{color:var(--success)}
.lw-e.no .lw-tick{color:#e5484d}
.lw-e i{color:var(--muted);font-style:normal;font-size:12px}
.lw-w{color:var(--muted);font-size:12.5px;margin-top:3px;line-height:1.5}
.lw-w.need{color:var(--warn,#f0a63e)}
.lw-ev{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.lw-src{font-size:11px;padding:2px 8px;border-radius:999px;background:var(--surface-hover);
  border:1px solid var(--border);cursor:pointer;color:var(--muted)}
.lw-src:hover{color:var(--text);border-color:var(--primary,#3543F0)}
@media (max-width:900px){.wsov .wsbody{flex-direction:column}.wsov .wsleft{width:auto;height:44%;border-inline-end:0;border-bottom:1px solid var(--border)}}
.lawface{position:absolute;inset:0;overflow:hidden;background:#fff}
.lawface-img{width:100%;display:block;filter:contrast(.96)}
.lawface-fall{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:12px;text-align:center;font-size:12px;color:#8b93a6;background:var(--surface-hover)}
.lawcard .lawthumb{padding:0}
.lawcard .lawskel{display:none}
/* a count you cannot click is a count that makes you go hunting */
.asum .ap[data-av]{cursor:pointer;transition:filter .15s,transform .15s}
.asum .ap[data-av]:hover{filter:brightness(1.25);transform:translateY(-1px)}
.vrow{border:1px solid var(--border);border-radius:11px;padding:12px 14px;margin-bottom:9px;cursor:pointer}
.vrow:hover{border-color:var(--primary,#3543F0)}
.vrow-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.vrow-a{color:var(--muted);font-size:13px}
.vrow-w{margin-inline-start:auto;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
.vrow-b{font-size:13.5px;line-height:1.6;margin-top:6px}
.vrow-n{font-size:12.5px;color:var(--warn,#f0a63e);margin-top:7px}
.vrow-go{font-size:11.5px;color:var(--muted);margin-top:8px;opacity:0;transition:opacity .15s}
.vrow:hover .vrow-go{opacity:1}

/* one action on every thing in the case, and it looks like one */
.askthis{font-size:12px;font-weight:600;padding:6px 12px;border-radius:8px;cursor:pointer;
  background:var(--surface-hover);border:1px solid var(--border);color:var(--muted);
  transition:border-color .16s,color .16s,background .16s}
.askthis:hover{border-color:var(--primary,#3543F0);color:var(--text);background:rgba(53,67,240,.08)}
.fcard-act{padding:10px 0 0;display:flex}
.lw-actions{margin-top:10px;display:flex;gap:8px}
.vrow-act{margin-top:10px;display:flex;align-items:center;gap:10px}
.vrow-act .vrow-go{margin-top:0}
/* the document panel says what it is for and where things change */
/* was a single full-width button; the panel is a composer now — see below */

/* what the money went on — the breakdown is the point, not the total */
.costs{display:flex;flex-direction:column;gap:1px;margin-bottom:10px}
.crow{display:flex;align-items:baseline;gap:8px;padding:5px 2px;font-size:12.5px;border-bottom:1px solid var(--border)}
.crow:last-of-type{border-bottom:0}
.cop{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cin{color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
.ccost{font-variant-numeric:tabular-nums;font-weight:600;min-width:58px;text-align:end}
.ccost.free{color:var(--muted);font-weight:500}
.cmore{background:none;border:0;color:var(--muted);font-size:11.5px;cursor:pointer;padding:6px 0;text-align:start}
.cmore:hover{color:var(--text)}
.cnote{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.5}
.cnote.warn{color:var(--warn,#f0a63e)}

/* ── THE LAW PANEL: WHAT NEEDS ATTENTION, THEN EVERYTHING ELSE ────────────
   Fourteen articles, all expanded, thirty-six elements, ordered by citation
   count — so the one finding that mattered came fourteenth in the same grey as
   the rest. Collapsed to one line each and ranked by what a person would act
   on, the page states an opinion instead of making the reader form one. */
.lw-art{padding:11px 14px;cursor:pointer}
.lw-art .lw-body{display:none}
.lw-art.open .lw-body{display:block;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.lw-ah{gap:10px}
.lw-mark{width:14px;flex:0 0 14px;font-weight:700;color:var(--muted);text-align:center}
.lw-head{color:var(--muted);font-size:12.5px;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the two that shout */
.lw-art.r0,.lw-art.r1{border-color:var(--warn,#f0a63e);background:rgba(240,166,62,.06)}
.lw-art.r0 .lw-mark,.lw-art.r1 .lw-mark{color:var(--warn,#f0a63e)}
.lw-art.r0 .lw-head,.lw-art.r1 .lw-head{color:var(--warn,#f0a63e);font-weight:600}
/* settled or inapplicable — present, quiet */
.lw-art.r5,.lw-art.r6{opacity:.6}
.lw-art.r5 .lw-mark{color:var(--success)}
.lw-art .lw-actions{margin-top:12px}

/* ── A DOCUMENT, SHOWN AS A DOCUMENT ──────────────────────────────────────
   Every cross-reference to a document was a pill with a truncated filename in
   it — "Judgement — Basic Court of Pristina — 29" three times in a row, which
   reads as furniture rather than as three sources. A page you can see is
   recognised without being read. */
.docchip{display:inline-flex;align-items:center;gap:7px;padding:4px 10px 4px 4px;
  border-radius:8px;background:var(--surface-hover);border:1px solid var(--border);
  cursor:pointer;max-width:230px;transition:border-color .16s,transform .16s}
.docchip:hover{border-color:var(--primary,#3543F0);transform:translateY(-1px)}
.docchip-t{width:26px;height:34px;object-fit:cover;object-position:top center;
  border-radius:4px;background:#fff;flex:0 0 26px;display:block;
  box-shadow:0 1px 4px rgba(0,0,0,.28)}
.docchip-n{font-size:11.5px;line-height:1.3;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.docchip:hover .docchip-n{color:var(--text)}
.docchip.nodoc{padding:4px 10px;font-size:11.5px;color:var(--muted);opacity:.7;cursor:default}
.docchip.nodoc:hover{border-color:var(--border);transform:none}
.lm-docs,.lw-ev,.lc-cite{gap:7px}

/* the one thing being waited on, at the top of what you hold */
.dp-next{border:1px solid var(--primary,#3543F0);background:rgba(53,67,240,.07);
  border-radius:12px;padding:12px 14px;margin-bottom:12px}
.dp-next-k{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:var(--primary,#6b7bf5);margin-bottom:5px}
.dp-next-t{font-size:13.5px;line-height:1.45;margin-bottom:10px}
.dp-next-a{display:flex;gap:8px}
.dp-next-a button{font-size:12px;padding:6px 12px;border-radius:8px}

/* ── THE CASE PAGE: WHERE YOU STAND, THEN WHAT YOU ARE ARGUING ────────────
   It used to open with four hundred words of narrative written once and never
   regenerated — still claiming a travel argument he had withdrawn. */
.cm-tabs{display:flex;gap:6px;margin-bottom:18px;border-bottom:1px solid var(--border)}
.cm-tab{background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);
  font:inherit;font-size:13.5px;font-weight:600;padding:9px 14px;cursor:pointer;
  transition:color .16s,border-color .16s}
.cm-tab:hover{color:var(--text)}
.cm-tab.on{color:var(--text);border-bottom-color:var(--primary,#3543F0)}
.cm-note{font-size:12px;color:var(--muted);line-height:1.55;margin:6px 0 12px;max-width:66ch}

/* one card per claim — everything the app found, gathered onto what it bears on */
.agcard{border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:10px;
  background:var(--surface)}
.agcard.flagged{border-color:var(--warn,#f0a63e);background:rgba(240,166,62,.05)}
.ag-h{font-size:14.5px;line-height:1.5;font-weight:600;margin-bottom:10px;max-width:80ch}
.ag-row{display:flex;gap:12px;align-items:baseline;margin-top:7px;font-size:12.5px}
.ag-k{flex:0 0 74px;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.4px}
.ag-v{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ag-v.need{color:var(--warn,#f0a63e);display:block}
.ag-weak{color:var(--warn,#f0a63e)}
.ag-ok{color:var(--success)}
.ag-law{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;cursor:pointer;
  background:var(--surface-hover);border:1px solid var(--border);color:var(--muted)}
.ag-law:hover{color:var(--text);border-color:var(--primary,#3543F0)}
.ag-law.bad{border-color:var(--warn,#f0a63e);color:var(--warn,#f0a63e)}
.ag-law.ok{border-color:rgba(74,222,128,.5);color:var(--success)}
.ag-flag{margin-top:9px;padding:9px 11px;border-radius:9px;background:rgba(240,166,62,.1);
  font-size:12.5px;line-height:1.55;color:var(--text)}
.ag-act{margin-top:12px}

/* ═══ THE ARGUMENTS SCREEN ═════════════════════════════════════════════════
   Four accents were in play — indigo, amber, green, and a blue open state —
   plus a coloured strip down the left edge of every card. That strip is the
   laziest state indicator there is and it looks like every admin template ever
   shipped.

   The polarity the colours were paying for (is this against me or for me) is
   better said with a heading: a section called IN YOUR FAVOUR does what green
   did and does it better, because you can read it.

   So one accent, and it means THIS NEEDS YOU. Everything else is grey.
   Hierarchy is grouping, size and weight. State is a glyph in a fixed slot —
   which stays legible with the colour removed, the test for whether colour is
   doing work or just decorating. */
:root{
  --t-display:30px;   /* the count that opens the page */
  --t-title:14.5px;   /* an argument's name */
  --t-body:14px;      /* the claim, read as prose */
  --t-meta:12.5px;    /* the line beside the name */
  --t-label:10.5px;   /* uppercase field names */
  --arg-line:#2a2f42; /* hairlines, one value everywhere on this screen */
}

.arg-head{display:flex;align-items:baseline;gap:11px;margin:2px 0 26px}
.arg-n{font-size:var(--t-display);font-weight:600;line-height:1;letter-spacing:-1px;
  font-variant-numeric:tabular-nums}
.arg-word{font-size:var(--t-meta);color:var(--muted)}

/* a section header carries the meaning colour used to */
.arg-sec{margin-bottom:26px}
.arg-sech{display:flex;align-items:baseline;gap:9px;padding:0 2px 8px;
  border-bottom:1px solid var(--arg-line);margin-bottom:2px}
.arg-sect{font-size:var(--t-label);font-weight:700;text-transform:uppercase;letter-spacing:.8px}
.arg-secn{font-size:var(--t-label);font-weight:700;color:var(--muted);
  font-variant-numeric:tabular-nums}
.arg-secd{font-size:var(--t-meta);color:var(--muted);margin-inline-start:auto}

/* the row: 44px, one hairline, no card, no strip */
.argrow{border-bottom:1px solid var(--arg-line)}
.argrow:last-child{border-bottom:0}
.argrow-h{display:flex;align-items:center;gap:12px;padding:13px 10px;cursor:pointer;
  border-radius:8px;transition:background .13s}
.argrow-h:hover{background:var(--surface-hover)}
.argrow.open .argrow-h{background:var(--surface-hover)}

/* state as a shape — readable with the colour taken away */
.ag-g{width:15px;height:15px;flex:0 0 15px;display:block;color:var(--muted)}
.ag-g.mine{color:var(--primary-hi,#6b7bf5)}
.arg-label{font-size:var(--t-title);font-weight:600;line-height:1.3;flex:0 0 auto;
  max-width:42%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arg-line{font-size:var(--t-meta);color:var(--muted);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* how well it is backed — a quantity drawn as a quantity, no alarm colour */
.strength{display:flex;gap:2.5px;align-items:flex-end;height:13px;flex:0 0 auto;opacity:.85}
.strength i{width:3.5px;border-radius:1px;background:var(--arg-line);display:block}
.strength i:nth-child(1){height:5px}
.strength i:nth-child(2){height:9px}
.strength i:nth-child(3){height:13px}
.strength.s1 i:nth-child(1),
.strength.s2 i:nth-child(1),.strength.s2 i:nth-child(2),
.strength.s3 i{background:var(--muted)}
.strength.s3 i{background:var(--subtle,#9aa3bd)}

/* opened */
.argrow-b{display:none}
.argrow.open .argrow-b{display:block;padding:4px 10px 22px 39px}
.arg-full{font-size:var(--t-body);line-height:1.7;margin:0 0 18px;max-width:74ch;
  color:var(--subtle,var(--text))}
.arg-flag{background:var(--primary-soft);border-radius:8px;padding:8px 14px;
  margin-bottom:18px;max-width:74ch}
.arg-flag-k{font-size:var(--t-label);font-weight:700;text-transform:uppercase;
  letter-spacing:.6px;color:var(--primary-hi,#6b7bf5)}
.arg-flag-d{font-size:var(--t-label);color:var(--muted);margin-inline-start:7px}
.arg-flag p{font-size:var(--t-meta);line-height:1.65;margin:6px 0 0}
.arg-meta{display:flex;flex-wrap:wrap;gap:34px;margin-bottom:16px}
.arg-k{display:block;font-size:var(--t-label);font-weight:700;text-transform:uppercase;
  letter-spacing:.7px;color:var(--muted);margin-bottom:8px}
.arg-val{display:flex;flex-wrap:wrap;gap:7px;align-items:center;font-size:var(--t-meta)}
.ag-law{font-size:11.5px;padding:3px 9px;border-radius:6px;cursor:pointer;
  background:transparent;border:1px solid var(--arg-line);color:var(--muted);
  font-variant-numeric:tabular-nums;transition:color .13s,border-color .13s}
.ag-law:hover{color:var(--text);border-color:var(--muted)}
.ag-law.flag{border-color:var(--primary-hi,#6b7bf5);color:var(--primary-hi,#6b7bf5)}
.arg-need ul{margin:0;padding-inline-start:17px;font-size:var(--t-meta);line-height:1.75;
  color:var(--muted);max-width:74ch}
.arg-act{margin-top:18px}
#v-case .sh{font-size:var(--t-display);letter-spacing:-.5px}

/* ═══ WHERE YOU STAND ══════════════════════════════════════════════════════
   Same system as the arguments tab: sections, hairline rows, one accent, no
   cards and no coloured strips. What changed underneath matters more — this
   tab no longer reads caseMap.documents, the third list that reported zero of
   his six documents as uploaded and padded "still needed" with passports. */
.st-top{display:grid;grid-template-columns:1.4fr 1fr;gap:30px;
  padding-bottom:26px;margin-bottom:6px;border-bottom:1px solid var(--arg-line)}
.st-k{display:block;font-size:var(--t-label);font-weight:700;text-transform:uppercase;
  letter-spacing:.7px;color:var(--muted);margin-bottom:9px}
.st-goal p{font-size:17px;line-height:1.55;margin:0 0 14px;max-width:52ch;font-weight:500}
.st-facts{display:flex;flex-wrap:wrap;gap:26px 34px;align-content:start}
.st-f b{font-size:var(--t-body);font-weight:600;text-transform:capitalize}
.st-parties{grid-column:1 / -1}
.st-parties > div{display:flex;flex-wrap:wrap;gap:9px}
.st-party{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-meta);
  padding:5px 12px 5px 5px;border:1px solid var(--arg-line);border-radius:999px}
.st-party i{font-style:normal;color:var(--muted);font-size:11px}
.st-init{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface-hover);font-size:10.5px;font-weight:700}

.st-sec{margin-top:30px}
.st-sech{display:flex;align-items:baseline;gap:10px;padding:0 2px 8px;
  border-bottom:1px solid var(--arg-line)}
.st-sect{font-size:var(--t-label);font-weight:700;text-transform:uppercase;letter-spacing:.8px}
.st-secd{font-size:var(--t-meta);color:var(--muted);font-weight:400}
.st-secn{font-size:var(--t-meta);color:var(--muted);margin-inline-start:auto;
  font-variant-numeric:tabular-nums}

/* how complete the record is — the one quantity on this page, drawn as one */
.st-bar{height:3px;background:var(--arg-line);border-radius:2px;overflow:hidden;margin:14px 0 4px}
.st-bar i{display:block;height:100%;width:var(--w);background:var(--primary-hi,#6b7bf5);
  border-radius:2px;transition:width .5s cubic-bezier(.2,.8,.2,1)}

.st-rows{margin-top:10px}
.st-row{display:flex;align-items:center;gap:12px;padding:11px 10px;cursor:pointer;
  border-radius:8px;border-bottom:1px solid var(--arg-line);transition:background .13s}
.st-row:hover{background:var(--surface-hover)}
.st-row:last-of-type{border-bottom:0}
.st-dot{width:5px;height:5px;border-radius:50%;background:var(--muted);flex:0 0 5px;opacity:.6}
.st-rn{font-size:var(--t-meta);flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.st-rm{font-size:11.5px;color:var(--muted);flex:0 0 auto}
.st-more{font-size:var(--t-meta);color:var(--muted);padding:11px 10px;cursor:pointer}
.st-more:hover{color:var(--text)}

/* counts that go somewhere */
.st-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  margin-top:16px;background:var(--arg-line);border:1px solid var(--arg-line);border-radius:12px;
  overflow:hidden}
.st-tile{display:flex;flex-direction:column;gap:3px;align-items:flex-start;
  padding:18px 18px 16px;background:var(--bg);border:0;cursor:pointer;font:inherit;
  text-align:start;transition:background .13s}
.st-tile:hover{background:var(--surface-hover)}
.st-tn{font-size:26px;font-weight:600;line-height:1;letter-spacing:-.5px;
  font-variant-numeric:tabular-nums}
.st-tt{font-size:var(--t-meta);font-weight:600;margin-top:5px}
.st-td{font-size:11.5px;color:var(--muted);line-height:1.4}
.st-note{margin-top:14px;font-size:var(--t-meta);color:var(--primary-hi,#6b7bf5);cursor:pointer}
.st-note:hover{text-decoration:underline}
.st-review{margin-top:30px;padding:16px 18px;border:1px solid var(--arg-line);border-radius:12px;
  cursor:pointer;display:flex;flex-direction:column;gap:4px;transition:border-color .13s}
.st-review:hover{border-color:var(--muted)}
.st-review span{font-size:var(--t-meta);color:var(--muted)}
@media (max-width:820px){.st-top{grid-template-columns:1fr;gap:22px}}
/* his own words, clamped not cut */
.st-goaltx{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;margin-bottom:10px !important}
.st-goaltx.open{-webkit-line-clamp:unset;overflow:visible}
.st-expand{background:none;border:0;color:var(--muted);font:inherit;font-size:var(--t-meta);
  cursor:pointer;padding:0;margin:0 0 14px;display:block}
.st-expand:hover{color:var(--text)}

/* a mark per kind of document — stripping the coloured strips took the icons
   with them and the page went uniformly grey, which is the same fault the
   other way round. A mark that identifies a TYPE earns its place; one that
   repeats the word beside it does not. */
.st-mk{width:17px;height:17px;flex:0 0 17px;display:block;color:var(--muted);opacity:.8}
.st-mk svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.st-row:hover .st-mk{color:var(--text);opacity:1}
.st-row.asking{background:rgba(53,67,240,.07)}
.st-row.asking .st-mk{color:var(--primary-hi,#6b7bf5);opacity:1}
.st-row.asking .st-rm{color:var(--primary-hi,#6b7bf5)}
.st-row .st-rm{max-width:46%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ═══ FINDINGS ═════════════════════════════════════════════════════════════
   Two different kinds of thing lived here at the same weight: a record whose
   own later version drops a detail, and two separate records that cannot both
   be right. Grouped now, with a third group for the ones the app had already
   worked out were clerical — four of the six "records differ" were one
   transcription slip about a date of birth, shown six times because six is how
   many PAIRS four conflicting records make. */
#findGrid{display:block}
.find-sec{margin-bottom:30px}
.find-sech{display:flex;align-items:baseline;gap:10px;padding:0 2px 8px;
  border-bottom:1px solid var(--arg-line)}
.find-sect{font-size:var(--t-label);font-weight:700;text-transform:uppercase;letter-spacing:.8px}
.find-secn{font-size:var(--t-label);font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.find-secd{font-size:var(--t-meta);color:var(--muted);margin-inline-start:auto}

.findrow{border-bottom:1px solid var(--arg-line)}
.findrow:last-child{border-bottom:0}
.findrow.dim{opacity:.55}
.findrow.dim:hover{opacity:1}
.findrow-h{display:flex;align-items:center;gap:12px;padding:13px 10px;cursor:pointer;
  border-radius:8px;transition:background .13s}
.findrow-h:hover,.findrow.open .findrow-h{background:var(--surface-hover)}
.find-mk{width:15px;height:15px;flex:0 0 15px;color:var(--muted)}
.find-mk svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.findrow.open .find-mk{color:var(--primary-hi,#6b7bf5)}
.find-t{font-size:var(--t-title);font-weight:600;flex:0 0 auto;max-width:44%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:capitalize}
.find-l{font-size:var(--t-meta);color:var(--muted);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.findrow-b{display:none}
.findrow.open .findrow-b{display:block;padding:6px 10px 22px 37px}
.find-q{margin-bottom:12px;max-width:76ch}
.find-qs{display:block;margin-bottom:7px}
.find-q p{font-size:var(--t-meta);line-height:1.7;margin:0;padding-inline-start:0;
  color:var(--subtle,var(--text))}
.find-q.none p{color:var(--muted)}
.find-note{font-size:var(--t-meta);color:var(--muted);margin:4px 0 14px;font-style:italic}
.find-act{margin-top:6px}

/* ═══ THE TIMELINE ═════════════════════════════════════════════════════════
   Each event was a 148px card fitting a date block, an icon, a title, the same
   date again in another format, a description, a type tag and a source link
   into a stack. Six events filled 1,714 pixels. They fit on one line.

   Eight colours were being painted, four of them accents nobody chose. Type is
   the shape of the mark now; indigo is kept for what is still waited on. And
   the gaps were the wrong shape — a document the case lacks was a shorter card
   with zero margin butted against the next entry, so a hole in the story read
   as more story. */
.tlbar{display:flex;align-items:center;gap:14px;margin-bottom:22px;
  padding-bottom:12px;border-bottom:1px solid var(--arg-line)}
.tl-h{font-size:var(--t-meta);color:var(--muted);display:flex;align-items:baseline;gap:12px}
.tl-h b{font-size:22px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.tl-hm,.tl-hu{font-size:var(--t-meta);color:var(--muted)}
.tl-a{margin-inline-start:auto;display:flex;gap:8px;align-items:center}
.tl-fmt{background:none;border:1px solid var(--arg-line);border-radius:7px;color:var(--muted);
  font:inherit;font-size:11px;padding:5px 10px;cursor:pointer}
.tl-fmt:hover{color:var(--text);border-color:var(--muted)}

.tl-year{position:relative;margin-bottom:8px}
.tl-year + .tl-year{margin-top:26px}
/* THE ONLY STRUCTURAL DIVIDER ON THE PAGE, set smaller than the rows beneath
   it. A year is what the eye looks for when it scans a timeline, and it was
   the quietest thing in the column. */
.tl-yr{font-size:19px;font-weight:600;letter-spacing:.2px;color:var(--text);
  padding:12px 0 6px 76px;font-variant-numeric:tabular-nums}

/* one event, one line, on a spine */
.tl-row{display:flex;align-items:center;gap:0;padding:0 10px 0 0;cursor:pointer;
  border-radius:8px;position:relative;min-height:42px;transition:background .13s}
.tl-row:hover{background:var(--surface-hover)}
.tl-d{width:62px;flex:0 0 62px;text-align:end;padding-inline-end:14px;font-size:12px;
  color:var(--muted);font-variant-numeric:tabular-nums}
/* the spine: a hairline behind, a node on it */
.tl-node{width:9px;height:9px;flex:0 0 9px;border-radius:50%;background:var(--muted);
  position:relative;z-index:1;margin-inline-end:16px}
.tl-row::before{content:"";position:absolute;inset-inline-start:66px;top:0;bottom:0;width:1px;
  background:var(--arg-line)}
.tl-row:first-of-type::before{top:50%}
.tl-row:last-child::before{bottom:50%}
.tl-ic{width:17px;height:17px;flex:0 0 17px;color:var(--muted);margin-inline-end:11px}
.tl-ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
/* AN EVENT CUT MID-WORD IS NOT AN EVENT. nowrap plus an ellipsis at 74% meant
   every row showed the opening clause of a sentence and stopped — "The court
   administered evidence during the non-public hear…". Titles are capped near
   eighty-eight characters upstream now, so two lines hold the whole of one. */
.tl-t{font-size:var(--t-title);font-weight:500;flex:0 1 auto;max-width:74%;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  line-height:1.38;padding:6px 0}
.tl-m{font-size:11.5px;color:var(--muted);margin-inline-start:auto;padding-inline-start:16px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:34%}

/* SAID BY A DOCUMENT, PROVEN BY NOBODY YET.
   An open node rather than a filled one: the event is on the record, the file
   that would establish it is somewhere else. */
.tl-row.t-ref .tl-node{background:transparent;border:1.5px solid var(--muted);
  width:10px;height:10px;flex:0 0 10px;margin-inline-end:15px}
.tl-row.t-ref .tl-t{font-weight:450}
.tl-row.t-ref .tl-m{color:var(--warn,#c9954a);opacity:.92}

/* a hole in the story, drawn as a hole */
.tl-row.gap{min-height:50px;opacity:.62}
.tl-row.gap:hover{opacity:1}
.tl-row.gap .tl-node{background:transparent;border:1.5px dashed var(--muted);
  width:11px;height:11px;flex:0 0 11px;margin-inline-end:14px}
.tl-row.gap .tl-t{font-weight:400;color:var(--muted)}
.tl-row.gap + .tl-row{margin-top:2px}
.tl-add{display:none;background:none;border:1px solid var(--arg-line);border-radius:6px;color:var(--muted);
  font:inherit;font-size:11px;padding:3px 10px;margin-inline-start:12px;cursor:pointer;flex:0 0 auto}
.tl-add:hover{color:var(--primary-hi,#6b7bf5);border-color:var(--primary-hi,#6b7bf5)}
.tl-row.flagged .tl-ic{color:var(--primary-hi,#6b7bf5)}

/* ── EVIDENCE CARDS ────────────────────────────────────────────────────────

   The title used to sit on the page image in white, which is unreadable on a
   scan of a white court document. It sits on a plate below the image now, and
   the image is the real first page rather than a drawing of one.

   One accent, and only for the document being asked for right now. The amber
   REVIEW pill that every card wore is gone \u2014 a state all six share is a
   section header, not six badges. */
#evGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(206px,1fr));gap:16px}
.evc{background:var(--surface);border:1px solid var(--border);border-radius:11px;
  overflow:hidden;cursor:pointer;display:flex;flex-direction:column;
  transition:border-color .14s,transform .14s}
.evc:hover{border-color:var(--border-strong);transform:translateY(-2px)}
.evc-th{height:124px;position:relative;overflow:hidden;background:var(--glass);
  border-bottom:1px solid var(--border)}
.evc-th img{width:100%;height:100%;object-fit:cover;object-position:top center;
  display:block;opacity:0;transition:opacity .3s}
.evc-th img.loaded{opacity:1}
/* the page is a photograph of paper; a touch of shade keeps it from glaring */
.evc-th::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(6,6,14,.16))}
.evc-b{padding:10px 11px 11px;display:flex;flex-direction:column;gap:4px;flex:1}
.evc-h{display:flex;gap:8px;align-items:flex-start}
.evc-mk{width:16px;height:16px;flex:0 0 16px;color:var(--muted);margin-top:0}
.evc-mk svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.evc:hover .evc-mk{color:var(--text)}
.evc-t{font-size:var(--t-meta);font-weight:550;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.evc-m{font-size:11.5px;color:var(--muted);padding-inline-start:24px}
.evc-n{font-size:11.5px;color:var(--subtle);padding-inline-start:24px;margin-top:1px}
.evc.flag .evc-n{color:var(--primary-hi,#6b7bf5)}
.evc.flag .evc-mk{color:var(--primary-hi,#6b7bf5)}
.evc.out .evc-th{opacity:.5}
.evc.out .evc-t{color:var(--subtle)}
.evc-a{display:flex;gap:6px;padding:0 11px 11px}
.evc-a .qbtn{font-size:11px;padding:5px 10px}

/* the outstanding list under the gallery reuses the case-map rows */
#evOut .st-sec{margin-top:34px}
#evOut .st-row{cursor:default}
#evOut .st-row .tl-add{margin-inline-start:12px}

/* the gallery gets the same section heading as the list under it */
#evHead{margin:0 0 12px}
#evHead .st-sech{padding-bottom:0;border-bottom:0}

/* ── THE SOURCE, AS A PAGE ─────────────────────────────────────────────────

   The right of a timeline row held the document NAME, truncated — the row
   title again, cut mid-reference-number. Twenty-eight pixels of the actual
   first page says which document it was faster than forty characters of its
   filename, and leaves the row at forty-two pixels. */
.tl-th{width:26px;height:32px;flex:0 0 26px;margin-inline-start:14px;border-radius:3px;
  object-fit:cover;object-position:top center;border:1px solid var(--border);
  background:var(--glass);opacity:0;transition:opacity .3s,transform .14s}
.tl-th.loaded{opacity:.85}
.tl-row:hover .tl-th.loaded{opacity:1;transform:scale(1.06)}
.tl-row .tl-m{margin-inline-start:auto}
.tl-row .tl-m + .tl-th{margin-inline-start:14px}
.tl-row:not(:has(.tl-m)) .tl-th{margin-inline-start:auto}

/* ONE PILL ON THE PAGE, for the single document the case is waiting on
   hardest. A rank of twelve painted twelve times is a list; painted once it
   is an instruction. */
.tl-next{font-size:10px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;
  color:var(--primary-hi,#6b7bf5);background:var(--primary-soft);border-radius:5px;
  padding:3px 8px;margin-inline-start:12px;white-space:nowrap;flex:0 0 auto}
.tl-row .tl-next{margin-inline-start:12px}
.tl-row.gap .tl-next{margin-inline-start:12px}

/* an outstanding row opens the conversation about it */
#evOut .st-row.ask,.st-row.ask{cursor:pointer}
#evOut .st-row.ask:hover .st-rn{color:var(--primary-hi,#6b7bf5)}

/* ── WHICH DOCUMENT IS THAT ────────────────────────────────────────────── */
/* --surface is a 5.5% white wash meant to sit ON the page background. A card
   that floats OVER other text needs a floor of its own, or the row title
   underneath reads straight through the document name. */
#docHover{position:fixed;z-index:220;width:232px;background:var(--bg);
  border:1px solid var(--border-strong);border-radius:10px;overflow:hidden;
  box-shadow:0 18px 46px -12px rgba(0,0,0,.6);opacity:0;pointer-events:none;
  transform:translateY(3px);transition:opacity .13s,transform .13s}
#docHover.on{opacity:1;transform:none}
#docHover .dh-i{width:100%;height:168px;object-fit:cover;object-position:top center;
  display:block;background:var(--glass);border-bottom:1px solid var(--border);opacity:0;
  transition:opacity .2s}
#docHover .dh-i.loaded{opacity:1}
#docHover .dh-b{padding:9px 11px 10px;background:var(--bg)}
#docHover .dh-t{font-size:var(--t-meta);font-weight:550;line-height:1.35}
#docHover .dh-m{font-size:11.5px;color:var(--muted);margin-top:3px}

/* the filter row sits where the counts were */
.tl-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tl-chips .fchip{font-size:11.5px;padding:5px 11px}
.tl-chips .fchip b{font-weight:650;opacity:.7;margin-inline-start:2px}
.tl-chips .fchip.on b{opacity:.85}

/* the chips and the two buttons share one row; wrapping the chips must not
   push Add a note onto a line of its own */
.tlbar{flex-wrap:nowrap;align-items:flex-start}
.tl-chips{flex:1 1 auto;min-width:0}
.tl-a{flex:0 0 auto;margin-inline-start:auto}
.tl-chips .tl-hu{margin-inline-start:4px}

/* ── WHAT A DOCUMENT IS DOING IN THE CASE ─────────────────────────────────
   Rows, not cards: each one is a count and where it leads. The same hairline
   list as the case map and the evidence page, so the modal is not its own
   design. */
.wsr-rows{margin:8px 0 4px}
.wsr{display:flex;align-items:baseline;gap:12px;padding:9px 2px;
  border-bottom:1px solid var(--arg-line)}
.wsr:last-child{border-bottom:0}
.wsr.go{cursor:pointer}
.wsr.go:hover .wsr-t{color:var(--primary-hi,#6b7bf5)}
.wsr-t{font-size:var(--t-meta);flex:0 0 auto}
.wsr-m{font-size:11.5px;color:var(--muted);margin-inline-start:auto;text-align:end;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:52%}
.hl-n{font-size:11px;color:var(--muted);font-weight:500;margin-inline-start:6px}

/* what it says — the claim, and the page it says it on.
   NAMED .wsc AT FIRST, WHICH IS ALSO THE WORKSPACE CENTRE COLUMN. Defined
   later in the file, so display:flex overrode the column's overflow:auto and
   the whole modal scrolled instead of the column. A generic three-letter class
   in a file this size will collide sooner or later. */
.wsclaim{display:flex;gap:10px;align-items:flex-start;padding:9px 2px;
  border-bottom:1px solid var(--arg-line)}
.wsclaim[data-wspage]{cursor:pointer}
.wsclaim[data-wspage]:hover{background:var(--surface-hover)}
.wsclaim-t{font-size:12.5px;line-height:1.5;flex:1;min-width:0}
.wsclaim-p{font-size:11px;color:var(--muted);flex:0 0 auto;padding-top:2px;
  font-variant-numeric:tabular-nums}
.wsclaim[data-wspage]:hover .wsclaim-p{color:var(--primary-hi,#6b7bf5)}
.wsclaim-more{font-size:var(--t-meta);color:var(--muted);padding:10px 2px;cursor:pointer}
.wsclaim-more:hover{color:var(--text)}

/* the second filter row: what the case is about, in its own words */
.tl-iss{display:flex;flex-wrap:wrap;gap:7px;margin:-10px 0 20px;padding-bottom:14px;
  border-bottom:1px solid var(--arg-line)}
.ichip{font-size:11.5px;padding:4px 10px;border-radius:7px;cursor:pointer;
  border:1px solid transparent;background:var(--surface);color:var(--muted);
  transition:color .13s,border-color .13s,background .13s}
.ichip:hover{color:var(--text)}
.ichip b{font-weight:650;opacity:.65;margin-inline-start:3px}
.ichip.on{background:var(--primary-soft);color:var(--primary-hi,#6b7bf5);
  border-color:rgba(107,123,245,.35)}
.ichip.on b{opacity:.9}
.ichip.clear{background:none;color:var(--subtle)}
.ichip.clear:hover{color:var(--text)}

/* a count, where fifteen identical page thumbnails used to be */
.lc-cite{align-items:baseline;gap:7px;padding:10px 12px 12px}
.lc-n{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}
.lc-l{font-size:11.5px;color:var(--muted)}
.lawcard:hover .lc-n{color:var(--primary-hi,#6b7bf5)}

/* ── WHAT THE CASE IS DOING ────────────────────────────────────────────────
   In the header, because jobs start from everywhere — the chat, a law modal,
   the case map, an upload — and you need to see it from all of them. */
.qpill{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:500;
  color:var(--muted);background:var(--surface);border:1px solid var(--border);
  border-radius:999px;padding:5px 12px;cursor:pointer;white-space:nowrap;
  transition:color .14s,border-color .14s}
.qpill:hover{color:var(--text);border-color:var(--border-strong)}
.qpill.hid{display:none}
.qp-dot{width:6px;height:6px;border-radius:50%;background:var(--muted);flex:0 0 6px;
  animation:qpulse 1.5s ease-in-out infinite}
.qpill.mine{color:var(--primary-hi,#6b7bf5);border-color:rgba(107,123,245,.35)}
.qpill.mine .qp-dot{background:var(--primary-hi,#6b7bf5)}
@keyframes qpulse{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.qp-dot{animation:none}}

.qsheet{position:absolute;top:52px;inset-inline-end:150px;z-index:180;width:290px;display:none;
  background:var(--bg);border:1px solid var(--border-strong);border-radius:11px;
  box-shadow:0 20px 50px -14px rgba(0,0,0,.6);padding:6px 0 4px}
.qsheet.open{display:block}
.qsec{padding:6px 0}
.qsec + .qsec{border-top:1px solid var(--arg-line)}
.qlab{font-size:var(--t-label);font-weight:700;text-transform:uppercase;
  letter-spacing:.8px;color:var(--muted);padding:4px 14px 6px}
.qrow{display:flex;align-items:center;gap:9px;padding:6px 14px;font-size:12.5px}
.qrow.live .qr-t{color:var(--text)}
.qr-t{flex:1;min-width:0;color:var(--muted);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.qr-d{width:6px;height:6px;flex:0 0 6px;border-radius:50%;
  background:var(--primary-hi,#6b7bf5);animation:qpulse 1.5s ease-in-out infinite}
.qr-x{background:none;border:0;color:var(--muted);cursor:pointer;font-size:11px;
  padding:2px 4px;line-height:1}
.qr-x:hover{color:var(--text)}
.qnote{font-size:11px;color:var(--subtle);padding:2px 14px 6px;line-height:1.4}

/* the pill grows when it has something of yours to report, and stays a quiet
   label when it is only carrying the stage */
.qpill.live{font-size:12.5px;padding:6px 14px;font-weight:550}
.qpill.stage{font-size:11.5px;color:var(--muted);border-color:var(--border);
  cursor:default;text-transform:none;letter-spacing:0}
.qpill.stage .qp-dot{display:none}
.qr-e{font-size:11px;color:var(--subtle);font-variant-numeric:tabular-nums;
  flex:0 0 auto;margin-inline-start:4px}

/* what it is grinding on, at the foot of the conversation — not a message,
   because the assistant did not say it */
.chatwork{display:flex;align-items:center;gap:9px;padding:10px 2px 4px;
  font-size:12px;color:var(--muted)}
.cw-d{width:6px;height:6px;border-radius:50%;flex:0 0 6px;background:var(--muted);
  animation:qpulse 1.5s ease-in-out infinite}
.cw-e{color:var(--subtle);font-variant-numeric:tabular-nums;font-size:11px;margin-inline-start:8px}

/* ── IS THIS THE ONE ──────────────────────────────────────────────────────
   Under the message that says what a document appears to answer. Two taps,
   and typing instead works just as well. */
.confirmrow{display:flex;gap:8px;padding:2px 2px 10px 34px;flex-wrap:wrap}
.cfm{font-size:12.5px;padding:7px 14px;border-radius:8px;cursor:pointer;
  border:1px solid var(--border);background:var(--surface);color:var(--text);
  transition:border-color .13s,background .13s}
.cfm:hover{border-color:var(--border-strong)}
.cfm.yes{background:var(--primary-soft);color:var(--primary-hi,#6b7bf5);
  border-color:rgba(107,123,245,.35)}
.cfm.yes:hover{background:rgba(107,123,245,.2)}
.cfm-w{font-size:12.5px;color:var(--muted)}

/* ── THE BELL LIGHTS UP ────────────────────────────────────────────────────
   A ring spinning around it said "something is happening" in the same breath
   as the queue pill saying what. Two indicators for one fact, and the ring
   was the one that could not tell you which. The bell itself warms instead —
   the icon, not a decoration around it. */
#notifBtn.working svg{color:var(--primary-hi,#6b7bf5);
  filter:drop-shadow(0 0 6px rgba(107,123,245,.55));
  animation:bellglow 2.4s ease-in-out infinite}
@keyframes bellglow{0%,100%{opacity:.75}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  #notifBtn.working svg{animation:none;opacity:1}
}

/* ── AN ACTION, NOT MORE PROSE ─────────────────────────────────────────────

   Every turn in this conversation looked the same: a label, a paragraph, more
   paragraphs. The one message that WANTS something from you was distinguished
   by a coloured strip down its left edge, which is the most generic device
   available and reads as decoration rather than as meaning.

   The mark carries it instead. A document outline that draws itself once when
   the card arrives — once, on arrival, never looping: a loop is a nag and you
   stop seeing it by the third one. Everything else is typography. */
.msg.a.is-ask{padding:15px 18px 14px 52px;border-radius:14px;position:relative;
  background:var(--surface);border:1px solid var(--border);border-inline-start-width:1px;
  box-shadow:0 8px 26px -14px rgba(0,0,0,.5)}
.msg.a.is-ask::before{content:"";position:absolute;inset-inline-start:17px;top:17px;width:20px;height:24px;
  background:no-repeat center/contain;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24' fill='none' stroke='%236b7bf5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 1H4a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z'/%3E%3Cpath d='M12 1v6h6'/%3E%3Cpath d='M6 13h8M6 17h5'/%3E%3C/svg%3E");
  opacity:0;animation:markin .5s .05s var(--ease,cubic-bezier(.2,.7,.3,1)) forwards}
@keyframes markin{
  from{opacity:0;transform:translateY(3px) scale(.94)}
  to{opacity:1;transform:none}
}
.msg.a.is-ask .who{padding-inline-start:0}
.msg.a.is-ask strong:first-of-type{font-size:15.5px;line-height:1.45}

/* the confirmation is the other kind of action — it wants an answer, not a file */
.msg.a.is-confirm{padding:15px 18px 14px 52px;border-radius:14px;position:relative;
  background:var(--surface);border:1px solid var(--border);
  box-shadow:0 8px 26px -14px rgba(0,0,0,.5)}
.msg.a.is-confirm::before{content:"";position:absolute;inset-inline-start:18px;top:17px;width:20px;height:20px;
  background:no-repeat center/contain;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7bf5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E");
  opacity:0;animation:markin .5s .05s var(--ease,cubic-bezier(.2,.7,.3,1)) forwards}
.confirmrow{padding-inline-start:52px}

@media (prefers-reduced-motion:reduce){
  .msg.a.is-ask::before,.msg.a.is-confirm::before{animation:none;opacity:1}
}

/* ── WHAT THIS DOCUMENT SAYS THAT MATTERS ─────────────────────────────────
   Not the whole reading — the part the case stands on, each line carrying the
   reason it is here. One press confirms the document; correcting is per line. */
.revblock{margin:2px 0 14px 52px;padding-inline-start:16px}
/* "why is there the vertical line next to the card" — the rail marks a block
   the app is asking about, and it earns nothing beside a child that already
   carries its own border and ground. It stays for bare blocks and goes when
   the block is a card. */
.revblock:has(> .qask),.revblock:has(> .m-card),.revblock:has(> .gcard),
.revblock:has(> .bpcard){border-inline-start:0;padding-inline-start:0}
/* AND THE *WHICH CASE* CARD IS ONE OF THEM (23 September). It is a card
   in a .revblock, so the rail ran down its left the whole way — the same
   complaint the note above answers, on the one wrapper it missed. */
.revf{padding:9px 0;border-bottom:1px solid var(--arg-line)}
.revf:last-of-type{border-bottom:0}

.revf-t{font-size:13px;line-height:1.5}
.revf-w{font-size:11px;color:var(--muted);margin-top:3px;display:flex;align-items:center;gap:10px}
.revf-x{background:none;border:0;color:var(--muted);font-size:11px;cursor:pointer;
  padding:1px 5px;border-radius:5px;margin-inline-start:auto;flex:0 0 auto}
.revf-x:hover{color:var(--primary-hi,#6b7bf5);background:var(--surface-hover)}
.revmore{font-size:12px;color:var(--muted);padding:9px 0;cursor:pointer}
.revmore:hover{color:var(--text)}
.revfoot{display:flex;align-items:center;gap:14px;padding-top:12px;flex-wrap:wrap}
.revnote{font-size:11.5px;color:var(--subtle)}

/* the review, beside the document it is about */
.revwarn{font-size:12px;color:var(--muted);line-height:1.55;margin:2px 0 10px}
#wsAnaBody .revf{padding:10px 10px 9px;border-bottom:1px solid var(--arg-line);
  border-radius:8px;cursor:pointer;transition:background .13s}
#wsAnaBody .revf:hover{background:var(--surface-hover)}
/* SAID OUT LOUD. A faint tint on one button is not an app hearing you. */
/* A LINE THAT CHANGED SHOULD LOOK LIKE ONE. Marked, with what it used to say
   under it, and a fade that draws the eye once without nagging afterwards. */
.revf.moved{background:color-mix(in srgb, var(--warn,#c9954a) 9%, transparent);padding-inline-start:9px;
  animation:factMoved 2.4s ease-out 1}
@keyframes factMoved{0%{background:color-mix(in srgb, var(--warn,#c9954a) 22%, transparent)}
  100%{background:transparent}}
.revf-was{font-size:11px;color:var(--muted);text-decoration:line-through;
  line-height:1.4;margin-top:2px}
.revf-chg{font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  color:var(--warn,#c9954a);margin-inline-end:8px}

#wsAnaBody .revf.fixing{background:var(--primary-soft)}
#wsAnaBody .revf.fixing .revf-t{color:var(--primary-hi,#6b7bf5)}
#wsAnaBody .revf.fixing .revf-x{color:var(--primary-hi,#6b7bf5)}

/* the composer grows with what you type */
#msgIn{resize:none;overflow-y:auto;max-height:168px;line-height:1.5;
  font:inherit;background:none;border:0;outline:none;color:var(--text);width:100%;
  padding:0;display:block}

/* the modal panel is a conversation again */
.wsc-go{display:flex;align-items:flex-end;gap:8px;padding:10px 12px;border-top:1px solid var(--border)}
#wsChatIn{flex:1;min-width:0;resize:none;overflow-y:auto;max-height:260px;background:var(--surface);
  border:1px solid var(--border);border-radius:10px;padding:9px 11px;color:var(--text);
  font:inherit;font-size:12.5px;line-height:1.5;outline:none}
#wsChatIn:focus{border-color:var(--primary)}
.wsc-send{flex:0 0 auto;width:32px;height:32px;border-radius:9px;border:0;cursor:pointer;
  background:var(--primary);color:#fff;font-size:15px;line-height:1}
.wsc-send:hover{filter:brightness(1.12)}

/* ── THE SUMMARY, AND SECTIONS YOU CAN SEE THE EDGES OF ───────────────────
   The headings were 10.5px uppercase inside a dense list, so three different
   sections read as one long run. A heading has to be able to stop the eye. */
.wssum{font-size:13.5px;line-height:1.7;color:var(--text);margin:0 0 20px}
.wssum p{margin:0 0 10px}
.wssum p:last-child{margin-bottom:0}
.wssum.none{color:var(--muted);font-size:12.5px}
#wsAnaBody .hl,#wsCheckBody .hl,#wsFactsBody .hl{
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;
  color:var(--muted);margin:28px 0 12px;padding-bottom:9px;
  border-bottom:1px solid var(--arg-line)}
#wsAnaBody .hl:first-child{margin-top:4px}
.hl-n{font-size:11.5px;font-weight:600;color:var(--subtle);margin-inline-start:7px}

/* a fact points into the page it came from */
#wsCheckBody .revf,#wsFactsBody .revf{padding:11px 10px;border-bottom:1px solid var(--arg-line);
  border-radius:8px;cursor:pointer;transition:background .13s}
#wsCheckBody .revf:hover,#wsFactsBody .revf:hover{background:var(--surface-hover)}
#wsCheckBody .revf.at,#wsFactsBody .revf.at{background:var(--surface-hover)}
#wsCheckBody .revf.fixing,#wsFactsBody .revf.fixing{background:var(--primary-soft)}
#wsCheckBody .revf.fixing .revf-t,#wsFactsBody .revf.fixing .revf-t{color:var(--primary-hi,#6b7bf5)}
#wsFactsBody .revf.done .revf-t{color:var(--muted)}
.revf-ok{font-size:11px;color:var(--success,#4ade80);margin-inline-start:auto;flex:0 0 auto}

/* dragging a rectangle over words that are not text */
.wsdragbox{position:absolute;display:none;pointer-events:none;z-index:4;
  border:1px solid var(--primary-hi,#6b7bf5);background:rgba(107,123,245,.12);
  border-radius:2px}
#wsImgWrap{position:relative}

/* ── WHAT TO DO WITH WHAT YOU JUST SELECTED ───────────────────────────────
   The markup for this bar has been in the page all along with no rule to its
   name — so it un-hid itself into the document flow, unpositioned and
   invisible, and selecting text appeared to do nothing at all. */
.selbar{position:fixed;z-index:200;display:flex;gap:4px;padding:4px;
  background:var(--bg);border:1px solid var(--border-strong);border-radius:10px;
  box-shadow:0 14px 36px -10px rgba(0,0,0,.6)}
.selbar.hid{display:none}
.selbar button{background:none;border:0;color:var(--text);font:inherit;font-size:12.5px;
  padding:7px 12px;border-radius:7px;cursor:pointer;white-space:nowrap}
.selbar button:hover{background:var(--surface-hover)}
.selbar button[data-sel="hide"]{color:var(--muted)}
.selbar button[data-sel="ask"]{color:var(--primary-hi,#6b7bf5)}
#wsCheckBody .revf.fixed,#wsFactsBody .revf.fixed{opacity:.6}
#wsCheckBody .revf.fixed .revf-t,#wsFactsBody .revf.fixed .revf-t{text-decoration:line-through;
  text-decoration-color:var(--muted)}

/* the panel is thinking about the document in front of you */
.wsthinking p{display:flex;align-items:center;gap:8px;color:var(--muted)}

/* THE LINE THE NEXT MESSAGE IS AIMED AT.
   Pressing "not right" used to change a placeholder and nothing else, so the
   armed state disappeared the moment you started typing over it. */
.wsaim{display:flex;align-items:center;gap:8px;margin:0 10px 6px;padding:6px 8px 6px 10px;
  border-radius:8px;font-size:11.5px;line-height:1.35;
  background:var(--primary-soft);border:1px solid var(--primary);color:var(--text)}
.wsaim span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wsaim button{flex:0 0 auto;border:0;background:transparent;cursor:pointer;color:var(--muted);
  font-size:12px;padding:2px 4px;border-radius:5px;line-height:1}
.wsaim button:hover{color:var(--text);background:var(--surface)}

/* putting a selection back down */
.selbar-x{opacity:.65}
.selbar-x:hover{opacity:1}

/* PROSE WANTS A MEASURE; A LIST OF FACTS WANTS THE COLUMN.
   Both were the same 640px card centred in whatever space it was given, so
   widening the pane bought nothing but margin. Analysis keeps its reading
   width. Check and Facts are rows, and rows should fill. */
#wsCheckBody, #wsFactsBody{max-width:none;margin:0;padding:16px 18px}
#wsAnaBody{max-width:760px}

/* the title edits itself now that "Not right?" is gone */
#wsTitle{cursor:text;border-radius:6px;padding:1px 5px;margin-inline-start:-5px;
  transition:background .15s,box-shadow .15s}
#wsTitle:hover{background:var(--surface-hover)}
#wsTitle:focus-visible{outline:none;box-shadow:0 0 0 2px var(--primary)}

/* THE PASSAGE, ATTACHED RATHER THAN PASTED INTO WHAT YOU TYPE. */
.wsquote{display:flex;align-items:center;gap:8px;margin:0 10px 6px;padding:7px 8px 7px 10px;
  border-radius:8px;font-size:11.5px;line-height:1.4;cursor:pointer;
  background:var(--surface);border:1px solid var(--border);color:var(--muted)}
.wsquote:hover{border-color:var(--primary)}
.wsquote svg{width:13px;height:13px;flex:none;fill:currentColor;opacity:.7}
.wsquote span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:italic}
.wsquote b{flex:none;font-size:10.5px;font-weight:600;color:var(--primary-hi);
  background:var(--primary-soft);border-radius:4px;padding:1px 5px}
.wsquote button{flex:0 0 auto;border:0;background:transparent;cursor:pointer;color:var(--muted);
  font-size:12px;padding:2px 4px;border-radius:5px;line-height:1}
.wsquote button:hover{color:var(--text);background:var(--bg)}

/* and how it reads back in the conversation */
.msg.u .uq{font-size:11.5px;line-height:1.5;font-style:italic;opacity:.75;
  background:var(--primary-soft);border-radius:6px;padding:3px 9px;margin-bottom:7px;
  max-height:88px;overflow:hidden;position:relative}
.msg.u .uq b{display:inline-block;margin-inline-start:6px;font-style:normal;font-size:10px;
  font-weight:600;opacity:.9}

/* A PROPOSED RENAME — both names in front of you, nothing applied yet. */
.rncard .rnr{display:flex;align-items:baseline;gap:8px;margin-top:7px;font-size:11.5px;line-height:1.45}
.rncard .rnr span{flex:0 0 40px;color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em}
.rncard .rnr s{color:var(--muted);opacity:.75}
.rncard .rnr b{color:var(--primary-hi);font-weight:600}
.rncard .rnacts{display:flex;gap:7px;margin-top:11px}
.rncard .rndone{font-size:11.5px;color:var(--muted)}

/* the elapsed clock, on the step that is actually running */
.msg.steps .st{display:flex;align-items:baseline;gap:7px}
.msg.steps .st > span:first-of-type{flex:1;min-width:0}
.msg.steps .st-e{flex:none;font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums;opacity:.8}

/* A QUESTION ONLY THEY CAN ANSWER — asked in the conversation, not on a page
   they have to go and find. Options are buttons because someone mid-case will
   press one and will not type a paragraph. */
/* no strip here either — the mark and the eyebrow carry it, same as the cards */
.qask{background:var(--glass);border:1px solid var(--border);position:relative;overflow:hidden;
  border-radius:14px;padding:15px 17px;margin:6px 0}
.qask::before{content:"";position:absolute;inset:0 0 auto;height:2px;
  background:linear-gradient(90deg,var(--primary),transparent 62%);opacity:.85}
.qask-h{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  display:flex;align-items:center;gap:8px}
.qask-lb{text-transform:none;letter-spacing:0;font-size:10.5px;color:var(--primary-hi);
  background:var(--primary-soft);border-radius:5px;padding:1px 6px}
/* the matter a held question belongs to — stated, not implied by position */
.qask-m{text-transform:none;letter-spacing:0;font-size:10.5px;color:var(--muted);
  background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:1px 6px;
  font-variant-numeric:tabular-nums}
.qask-q{font-size:14px;line-height:1.5;margin:8px 0 0}
.qask-w{font-size:11.5px;line-height:1.5;color:var(--muted);margin:6px 0 0}
.qask-o{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.qask-a{display:flex;align-items:center;gap:8px;margin-top:11px}
.qask-in{flex:1;min-width:0;background:var(--surface);border:1px solid var(--border);
  border-radius:9px;padding:8px 11px;color:var(--text);font:inherit;font-size:12.5px;outline:none}
.qask-in:focus{border-color:var(--primary)}
.qskip{flex:none;border:0;background:transparent;color:var(--muted);cursor:pointer;
  font-size:11.5px;padding:4px 6px;border-radius:6px}
.qskip:hover{color:var(--text);background:var(--surface)}

/* the guidance card wears the same mark as the ask it is a shortcut to */
.gcard{padding-inline-start:52px;text-align:start}
.gcard::after{content:"";position:absolute;inset-inline-start:18px;top:17px;width:20px;height:24px;
  background:no-repeat center/contain;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24' fill='none' stroke='%236b7bf5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 1H4a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z'/%3E%3Cpath d='M12 1v6h6'/%3E%3Cpath d='M6 13h8M6 17h5'/%3E%3C/svg%3E");
  opacity:0;animation:markin .5s .05s var(--ease,cubic-bezier(.2,.7,.3,1)) forwards}

/* a question wants an answer, not a file */
.gcard.gk-question::after,.gcard.gk-confirm::after{height:20px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7bf5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E")}
/* and the clock is its own thing */
.gcard.gk-deadline::after{height:20px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0a63e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")}
.gcard.gk-law::after{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fa0bd' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M3 7l9-4 9 4'/%3E%3Cpath d='M6 7l-3 7a3 3 0 0 0 6 0z'/%3E%3Cpath d='M18 7l-3 7a3 3 0 0 0 6 0z'/%3E%3C/svg%3E")}

@media (prefers-reduced-motion:reduce){.gcard::after{animation:none;opacity:1}}

/* the official page, on the card that asks for the law */
.gcard .g-link{display:inline-block;margin-top:9px;font-size:11.5px;color:var(--primary-hi);
  text-decoration:none;border-bottom:1px solid transparent}
.gcard .g-link:hover{border-bottom-color:var(--primary-hi)}

/* KEEPING WHAT THE CONVERSATION PRODUCED — offered, never taken silently. */
.keeprow{display:flex;flex-wrap:wrap;gap:8px;margin:9px 0 2px}
.keepchip{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:start;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:8px 11px;cursor:pointer;max-width:100%;transition:border-color .15s,opacity .15s}
.keepchip:hover{border-color:var(--primary)}
.keepchip.done{opacity:.6;cursor:default;border-color:var(--border)}
.keepchip .kk{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--primary-hi)}
.keepchip.done .kk{color:var(--muted)}
.keepchip .kt{font-size:11.5px;color:var(--text);line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(420px,70vw)}
/* A CHANGE SHOWS WHAT IT REPLACES — the old wording struck through above the
   new one, so agreeing to it is agreeing to something you can see. */
.keepchip .kfrom{font-size:11px;color:var(--muted);line-height:1.4;text-decoration:line-through;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(420px,70vw)}
.keepchip.chg{border-color:color-mix(in srgb, var(--warn,#c9954a) 45%, var(--border))}
.keepchip.chg .kk{color:var(--warn,#c9954a)}
.keepchip.chg:hover{border-color:var(--warn,#c9954a)}

/* the address, and a way to get it into a browser */
.gcard .g-src{display:flex;align-items:center;gap:10px;margin-top:9px;flex-wrap:wrap}
.gcard .g-copy{border:1px solid var(--border);background:transparent;color:var(--muted);
  font-size:10.5px;padding:2px 8px;border-radius:6px;cursor:pointer}
.gcard .g-copy:hover{color:var(--text);border-color:var(--primary)}

/* THE MATTERS A DOCUMENT TOUCHES, IN ITS TITLE BAR.
   The one it is primarily about leads; the others sit beside it in the same
   row rather than being hidden, because on a forwarded thread the second one
   is exactly what he needed to see. */
.wsmat{display:inline-flex;gap:5px;flex-wrap:wrap;align-items:center;margin-inline-start:8px}
.mchip{font-size:10px;line-height:1.6;padding:0 6px;border-radius:5px;
  color:var(--muted);background:var(--surface);border:1px solid var(--line);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.mchip.lead{color:var(--primary-hi);background:var(--primary-soft);border-color:transparent}

/* THE MATTERS, AS A CARD HE CAN READ.
   "some sort of card that helps give context that reappears when the ai is
   unsure what case something relates to." Rows, not chips: each says what the
   matter was and roughly when, with the court's reference held to the right
   where it is available but not in the way. */
.qmats{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.qmat{display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;text-align:start;padding:9px 12px;border-radius:8px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);color:var(--text);
  font:inherit;font-size:12.5px;line-height:1.45;transition:background .12s,border-color .12s}
.qmat:hover:not(:disabled){background:var(--surface-hover);border-color:var(--primary-hi)}
.qmat:disabled{opacity:.5;cursor:default}
.qmat-l{flex:1}
.qmat-r{flex:none;font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums;
  white-space:nowrap}

/* ── THE PLACEMENT CARD ───────────────────────────────────────────────────────
   A statement about work already done, then the short list it could not place.
   The statement carries no buttons on purpose: he is being told, not asked. */
.qask.place .place-said{font-size:13px;line-height:1.55;margin:8px 0 0;color:var(--text)}
.qask.place .place-ask{font-size:12.5px;line-height:1.5;margin:10px 0 2px;color:var(--muted)}
.stray{margin-top:12px;padding:11px 12px;border-radius:9px;
  background:var(--surface);border:1px solid var(--line)}
.stray.done{opacity:.62}
.stray-q{font-size:12.5px;line-height:1.5;margin:0;color:var(--text)}
.stray-q::before{content:"“"}
.stray-q::after{content:"”"}
.stray-w{font-size:11px;line-height:1.45;margin:6px 0 0;color:var(--muted)}
.stray-d{font-size:11.5px;margin:7px 0 0;color:var(--primary-hi);display:flex;
  align-items:baseline;gap:10px}
.stray-undo{font:inherit;font-size:11px;color:var(--muted);background:none;border:0;
  cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px}
.stray-undo:hover{color:var(--text)}
/* bullets, across the row — "i think it should be bullets that can be selected
   horizontally". Short names only; the full description is the tooltip. */
.stray-o{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.mbul{font-size:11.5px;line-height:1.5;padding:4px 11px;border-radius:999px;cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--subtle);
  white-space:nowrap;transition:border-color .12s,color .12s,background .12s}
.mbul:hover:not(:disabled){border-color:var(--primary);color:var(--primary-hi);background:var(--primary-soft)}
/* "the first response is always highlighted on these cards" — the suggested
   chip was styled exactly like :hover, which is the app's own word for
   "active", so the recommendation read as a selection already made. It is a
   suggestion: outlined, labelled, and still obviously unpressed. */
.mbul.lead{border-color:var(--primary);color:var(--primary-hi);background:transparent;
  border-style:dashed}
.mbul.lead:hover:not(:disabled){background:var(--primary-soft);border-style:solid}
.mbul.lead i{font-style:normal;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-inline-start:7px}
.mbul.quiet{color:var(--muted);border-style:dashed}
.mbul:disabled{opacity:.4;cursor:default}

/* the matter that is not on the list — revealed, not always open */
.stray-new{margin-top:9px}
.stray-new.hid,.stray-o.hid{display:none}
.stray-in{width:100%;box-sizing:border-box;font:inherit;font-size:12.5px;line-height:1.5;
  padding:8px 10px;border-radius:8px;resize:vertical;
  background:var(--bg);border:1px solid var(--line);color:var(--text)}
.stray-in:focus{outline:none;border-color:var(--primary)}
.stray-acts{display:flex;gap:7px;justify-content:flex-end;margin-top:7px}

/* ── THE DOCUMENT-REQUEST CONFIRMATION ────────────────────────────────────────
   It was two buttons under one sentence. Everything it is asking about — the
   request it satisfies, what the document shows, the words it found — was on
   the entry behind it and never rendered. */
.linkcard{display:block}
.lk{border:1px solid var(--line);border-radius:11px;padding:13px 15px;background:var(--surface);
  max-width:620px}
.lk-h{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.lk-i{font-size:13.5px;line-height:1.5;margin:7px 0 0;color:var(--text);font-weight:600}
.lk-d{font-size:11.5px;margin:5px 0 0;color:var(--muted)}
.lk-s{font-size:12.5px;line-height:1.5;margin:7px 0 0;color:var(--subtle)}
.lk-q{font-size:11.5px;line-height:1.55;margin:9px 0 0;padding:7px 11px;color:var(--muted);
  background:var(--bg);border-radius:6px;
  white-space:pre-wrap}
.lk-ask{font-size:12.5px;line-height:1.5;margin:11px 0 0;color:var(--text)}
.lk-o{display:flex;gap:7px;margin-top:10px}

/* ── THE REGISTER CARD ────────────────────────────────────────────────────────
   Six lines and thirty seconds. Everything after it is filed against its
   answer, so it is the one card that blocks the rest instead of queueing. */
.qask.reg .place-said{margin-bottom:4px}
.reg-d{margin-top:10px;padding:10px 12px;border-radius:9px;
  background:var(--surface);border:1px solid var(--line)}
.reg-row{display:flex;align-items:baseline;gap:10px;font-size:12.5px;line-height:1.55}
.reg-row.stage{margin-top:5px;padding-inline-start:14px;font-size:11.5px;color:var(--muted)}
.reg-l{flex:1}
.reg-r{flex:none;font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.reg-x{flex:none;font-size:10.5px;padding:1px 7px;border-radius:999px;cursor:pointer;
  background:transparent;border:1px dashed var(--line);color:var(--muted)}
.reg-x:hover:not(:disabled){border-color:var(--primary);color:var(--primary-hi);border-style:solid}
.reg-move{display:flex;align-items:center;gap:7px;margin-top:8px;font-size:11px;color:var(--muted)}
.reg-move select{font:inherit;font-size:11px;padding:2px 6px;border-radius:6px;
  background:var(--bg);border:1px solid var(--line);color:var(--subtle)}
.reg-dup{margin-top:10px;padding:10px 12px;border-radius:9px;
  background:var(--primary-soft);border:1px solid transparent}
.reg-dq{font-size:12.5px;line-height:1.5;margin:0}
.reg-add{display:flex;gap:7px;margin-top:12px}
.reg-in{flex:1;font:inherit;font-size:12px;padding:7px 10px;border-radius:8px;
  background:var(--bg);border:1px solid var(--line);color:var(--text)}
.reg-in:focus{outline:none;border-color:var(--primary)}
.reg-acts{display:flex;justify-content:flex-end;margin-top:12px}

/* ── THE BATCH PLAN ───────────────────────────────────────────────────────────
   The order, and the reason for it, before it starts rather than after. An
   order nobody can see the sense of is just a different arbitrary order. */
.bp{display:flex;gap:11px;align-items:flex-start;margin-top:9px;padding:9px 11px;
  border-radius:9px;background:var(--surface);border:1px solid var(--line)}
.bp-n{flex:none;width:20px;height:20px;border-radius:999px;display:grid;place-items:center;
  font-size:10.5px;font-weight:700;color:var(--primary-hi);background:var(--primary-soft);
  font-variant-numeric:tabular-nums}
.bp-b{flex:1;min-width:0}
.bp-t{font-size:12.5px;line-height:1.45;color:var(--text)}
.bp-m{font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;margin-inline-start:7px;
  padding:1px 6px;border-radius:4px;color:var(--muted);background:var(--bg);
  border:1px solid var(--line);white-space:nowrap}
.bp-f{font-size:10.5px;margin-top:3px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bp-w{font-size:11.5px;line-height:1.45;margin-top:5px;color:var(--subtle)}

/* the words a relationship was read from — evidence, not a claim */
.reg-q{font-size:10.5px;line-height:1.5;margin:3px 0 0 14px;padding-inline-start:9px;
  color:var(--muted)}
.reg-acts{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}

/* ── THE GATHERING CARD ───────────────────────────────────────────────────────
   The question, what would settle it, and room for whatever he actually has —
   which for the mediation is three emails and his own account, none of which
   the old one-document row would take. */
.gather2 .g-why{margin-top:6px}
.ga-flag{display:inline-block;margin-top:9px;font-size:10px;text-transform:uppercase;
  letter-spacing:.05em;padding:2px 8px;border-radius:5px;
  color:var(--primary-hi);background:var(--primary-soft)}
.ga-rows{display:flex;flex-direction:column;gap:7px;margin-top:12px}
.ga-row{padding:9px 11px;border-radius:9px;background:var(--surface);border:1px solid var(--line)}
.ga-t{font-size:13.5px;line-height:1.5;color:var(--text)}
.ga-alt{font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;margin-inline-start:8px;
  padding:1px 6px;border-radius:4px;color:var(--muted);background:var(--bg);
  border:1px solid var(--line);white-space:nowrap}
.ga-in{font-size:11px;margin-top:4px;color:var(--primary-hi)}
.ga-acts{display:flex;gap:6px;margin-top:8px}
.ga-hidden{font-size:11px;color:var(--muted);margin-top:8px}
.ga-extra{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px;
  padding-top:12px;border-top:1px solid var(--line)}
.ga-note{font-size:11.5px;line-height:1.55;margin-top:10px;padding:9px 11px;
  border-radius:7px;
  background:var(--surface);color:var(--subtle);white-space:pre-wrap}
.ga-notebox{margin-top:10px}
.ga-notebox textarea{width:100%;box-sizing:border-box;font:inherit;font-size:12.5px;
  line-height:1.5;padding:9px 11px;border-radius:8px;resize:vertical;
  background:var(--bg);border:1px solid var(--line);color:var(--text)}
.ga-notebox textarea:focus{outline:none;border-color:var(--primary)}

/* ── WHAT HE SAID ABOUT A DOCUMENT ────────────────────────────────────────────
   Below what the document says, never among it. His account and the court's
   finding are different weights and blurring them is how a case comes apart. */
.wssaid{margin-top:18px;padding-top:14px;border-top:1px dashed var(--line)}
.wssaid-h{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);margin-bottom:9px}
.revf.said{background:var(--primary-soft)}
.revf.said .revf-t{color:var(--subtle)}

/* ── WHAT AN ANSWER READ ──────────────────────────────────────────────────────
   One row per lookup it actually ran, closed by default. Two page-crops under
   a three-sentence answer is taller than the answer, and he would stop looking
   at them; a row naming what it read is enough to notice what is missing. */
.srcs{margin-top:11px;padding-top:9px;border-top:1px solid var(--line)}
.srcs-h{font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  margin-bottom:5px}
.srcs-none{font-size:11.5px;line-height:1.5;color:var(--muted);font-style:italic}
.src{margin-top:3px}
.src-t{display:flex;align-items:baseline;gap:8px;width:100%;text-align:start;cursor:pointer;
  font:inherit;font-size:11.5px;padding:4px 7px;border-radius:6px;
  background:transparent;border:1px solid transparent;color:var(--subtle)}
.src-t:hover{background:var(--surface);border-color:var(--line)}
.src-k{flex:none;font-size:9px;text-transform:uppercase;letter-spacing:.05em;
  padding:1px 5px;border-radius:4px;color:var(--primary-hi);background:var(--primary-soft)}
.src-n{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.src-d{flex:none;font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.src-body{margin:6px 0 4px 6px;padding-inline-start:9px}
.src-body.hid{display:none}
.src-law{font-size:11.5px;line-height:1.6;color:var(--subtle);white-space:pre-wrap}
.src-wait{font-size:11px;color:var(--muted)}

/* the examples, as a prompt for his memory rather than a checklist */
/* THE NEWEST TEXT WAS THE SMALLEST ON THE SCREEN, which is backwards for a
   card he is meant to act on. The chat body sets the size; only the eyebrow
   and the reference numbers go under it. */
.ga-eg{font-size:13.5px;line-height:1.6;margin-top:11px;color:var(--subtle)}
.ga-eg b{color:var(--subtle);font-weight:500}
.ga-ask{font-size:13.5px;line-height:1.5;margin-top:14px;color:var(--text)}
.ga-row.done{opacity:.6}

/* a chip that has been used says so — it wrote into the box, it did not send */
.gchip.picked{border-color:var(--primary);color:var(--primary-hi);background:var(--primary-soft)}

/* each option with what it would show — the reason to go looking for it */
.ga-egs{display:flex;flex-direction:column;gap:7px;margin-top:14px}
/* one document: the headline already names it, so the row carries only what
   his papers call it and sits close under the reason rather than reading as
   an orphaned list of one */
.ga-egs.one{margin-top:10px}
.ga-egl{display:flex;flex-direction:column;gap:1px;padding-inline-start:11px}
.ga-egl span{font-size:15px;line-height:1.55;color:var(--text)}
.ga-egl em{font-size:12px;line-height:1.5;color:var(--muted);font-style:normal}

/* one button, and the way in for what it could not name */
.ga-acts2{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
.ga-else{display:flex;justify-content:flex-end;margin-top:8px}
.lnk{font:inherit;font-size:11.5px;color:var(--muted);background:none;border:0;
  cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px}
.lnk:hover{color:var(--primary-hi)}

/* numbered, so the card and the walk-through are plainly the same list */
.ga-egl{flex-direction:row;align-items:baseline;gap:10px;padding-inline-start:0;border-inline-start:0}
.ga-egl i{flex:none;width:19px;height:19px;border-radius:999px;display:grid;place-items:center;
  font-style:normal;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--primary-hi);background:var(--primary-soft)}

/* ── THE ROW EXPLAINS ITSELF ──────────────────────────────────────────────────
   "do we need to add a button here for what is this or something?"

   No button. The card already computed what each document would show for this
   point and dropped it on the floor. It goes under the row, where the question
   would have been asked. Secondary to the document name, not a footnote — he
   is deciding whether to go and look for it on the strength of this line. */
.ga-egl em.ga-worth{display:block;margin-top:3px;font-size:13.5px;line-height:1.5;
  color:var(--subtle);font-style:normal}

/* NOTHING NAMED, SAID PLAINLY.
   The shortlist used to scrape for a fifth row and hand him a guess with a
   number beside it. Examples belong in a sentence — they cost nothing to read
   and they do not send him hunting for a document nobody named. */
.ga-blind{margin-top:12px;font-size:15px;line-height:1.6;color:var(--subtle)}

/* the date format picker, sized like the other settings controls */
.sctl.ssel{font:inherit;font-size:12.5px;padding:5px 8px;border-radius:8px;
  border:1px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer}
.sctl.ssel:focus{outline:2px solid var(--primary);outline-offset:1px}

/* which proceeding a gathering card is about — "the mediation agreement is
   seperate to the previous judgement and appeal for the same case", and it
   was, so the card says which file it is asking about before it asks */
.ga-matter{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);margin-bottom:7px}

/* an errata line on the document the app misread — "shouldnt it note it and
   then just make a note on documents with the incorrct date?" It should, and
   rejecting the fact was invisible: the document is the thing he opens. */
.evc-mis{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.evc-mis span{font-size:11.5px;line-height:1.45;color:var(--warn,#c9922e)}
.evc-mis b{font-weight:600;color:inherit}

/* the court's own citation, under the name he would use for it */
.ga-egl em.ga-cited{display:block;margin-top:2px;font-size:12px;line-height:1.45;
  color:var(--muted);font-style:normal}

/* ── A FACT SAYS WHOSE IT IS, AND WHERE HE STANDS ─────────────────────────────
   "confirmed" meant the document really says this, and read as this is true.
   On the other side's account of his house that is the app taking her word. */
.revf-who{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);margin-bottom:3px}
.revf-st{font-weight:600}
.revf-st.s-no{color:var(--danger,#d4574e)}      /* you dispute this */
.revf-st.s-yes{color:var(--done,#2f7d5a)}       /* you accept it */
.revf-st.s-you{color:var(--primary-hi)}         /* you corrected it */
.revf-st.s-ask{color:var(--warn,#c9922e)}       /* waiting on you */
.revf-st.s-quiet,.revf-st.s-doc{color:var(--muted);font-weight:500}
/* the earlier wording, behind a click — a strikethrough through half the list
   is not readable */
.revf-hist{font:inherit;font-size:11.5px;color:var(--muted);background:none;border:0;
  cursor:pointer;padding:2px 0;text-decoration:underline;text-underline-offset:3px}
.revf-hist:hover{color:var(--primary-hi)}
.revf-hist.open{text-decoration:none;color:var(--text)}
.revf-was{font-size:12.5px;line-height:1.5;color:var(--muted);margin:3px 0 0;
  padding-inline-start:10px}

/* an error is a thing that happened, not a status: it stays, and looks it */
.msg.sys.sys-err{color:var(--bad,#a03e36)}