/* The signed-in shell: ivory paper, near-black ink, one blue — always, whatever the system's dark-mode setting
   (the user's rulings, 24-09-2026). Playfair Display for display type, Georgia for everything else; no sans-serif
   in the signed-in app except the OCR text <pre> (monospace). The admin page keeps style.css; the landing page
   landing.css. */
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400 900;font-display:swap;
  src:url(/static/fonts/playfair-display-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:400 900;font-display:swap;
  src:url(/static/fonts/playfair-display-latin-wght-italic.woff2) format("woff2")}
:root{--paper:#FAF8F3;--card:#FFFFFF;--ink:#141412;--mute:rgba(20,20,18,.55);--line:rgba(20,20,18,.16);
  --blue:#3358A8;--blue-soft:rgba(51,88,168,.10);--bad:#A4262C;--dot:#cfcbc4;
  --font-display:"Playfair Display",Georgia,serif;--font-body:Georgia,"Times New Roman",serif;
  --top:52px;color-scheme:light}
*{box-sizing:border-box}[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{background:var(--paper);color:var(--ink);font:16px/1.6 var(--font-body);-webkit-font-smoothing:antialiased}
body.landing{font:15px/1.6 system-ui,-apple-system,"Segoe UI",Inter,sans-serif}   /* the landing keeps its own type */
a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.muted{color:var(--mute)}.small{font-size:14px}.err{color:var(--bad)}
h1{font-family:var(--font-display);font-weight:500}

/* frame */
#app{display:flex;flex-direction:column;height:100vh;height:100dvh}
.top{height:var(--top);flex:none;display:flex;align-items:center;gap:6px;padding:0 12px;border-bottom:1px solid var(--line);background:var(--paper);position:relative;z-index:30}
.top .grow{flex:1}
.icon{width:36px;height:36px;border-radius:2px;display:inline-grid;place-items:center;color:var(--mute);font-size:20px;line-height:1}
.icon:hover{background:var(--blue-soft);color:var(--ink)}
.icon svg{width:20px;height:20px}
.switcher{position:relative;min-width:0}
#case-btn{display:flex;align-items:center;gap:8px;height:38px;padding:0 10px;border-radius:2px;max-width:min(60vw,560px);
  font:500 18px/1.2 var(--font-display);color:var(--ink)}
#case-btn:hover,#case-btn[aria-expanded=true]{background:var(--blue-soft)}
#case-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#case-btn svg{width:16px;height:16px;flex:none;color:var(--mute)}
.menu{position:absolute;top:calc(100% + 6px);left:0;min-width:240px;max-width:min(92vw,420px);background:var(--card);
  border:1px solid var(--line);border-radius:2px;padding:6px;z-index:40;font-size:14px}
.menu.up{top:auto;bottom:calc(100% + 6px);left:0;right:0;min-width:0;max-width:none}
.menu hr{border:0;border-top:1px solid var(--line);margin:6px -6px}
.menu a,.menu button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:2px;color:var(--ink);text-align:left;font-size:14px}
.menu a:hover,.menu button:hover,.menu a:focus-visible,.menu button:focus-visible{background:var(--blue-soft);text-decoration:none}
.menu a:focus-visible,.menu button:focus-visible{outline-offset:-2px}
.menu a span,.menu button span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu svg{width:16px;height:16px;flex:none;color:var(--mute)}

/* the case switcher: search, a five-row scroll box, then "View all cases" */
#case-menu{width:320px;max-width:calc(100vw - 24px);padding:0}
.case-search{display:block;width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;padding:12px 14px;font-size:15px;outline:0}
.case-search::placeholder{color:var(--mute)}
.case-search::-webkit-search-cancel-button{display:none}
.case-list{max-height:calc(5 * 40px);overflow:auto;padding:0}
.case-list a{height:40px;padding:0 14px;border-radius:0;font-size:15px}
.case-list a.on{color:var(--blue)}
.case-list a.on svg{color:var(--blue)}
.case-list .none{height:40px;display:flex;align-items:center;padding:0 14px;color:var(--mute);margin:0}
#case-menu hr{margin:0}
#case-menu .all{height:44px;padding:0 14px;border-radius:0;color:var(--blue)}
#case-menu .all svg{color:var(--blue)}

.ask{height:32px;padding:0 14px;border-radius:2px;border:1px solid var(--line);color:var(--blue);font-size:14px;background:var(--card)}
.ask:hover,.ask[aria-pressed=true]{background:var(--blue-soft);border-color:var(--blue)}
.frame{flex:1;min-height:0;display:flex;position:relative}

/* sidebar: wordmark, sections, new question + recent, spacer, account */
#side{width:264px;flex:none;border-right:1px solid var(--line);background:var(--paper);display:none;flex-direction:column;padding:14px 12px 12px;overflow:hidden}
body.side-open #side{display:flex}
.wordmark{display:block;font:600 26px/1 var(--font-display);letter-spacing:.04em;color:var(--ink);padding:4px 10px 18px}
.wordmark:hover{text-decoration:none;color:var(--blue)}
#side-nav{display:flex;flex-direction:column;gap:2px;margin-bottom:14px;flex:none}
#side-nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:2px;color:var(--ink);font-size:15px}
#side-nav a:hover{background:var(--blue-soft);text-decoration:none}
#side-nav a.on{background:var(--blue-soft);color:var(--blue)}
#side-nav svg{width:18px;height:18px;flex:none;color:var(--mute)}
#side-nav a.on svg{color:var(--blue)}
.new{display:block;flex:none;padding:8px 12px;border:1px solid var(--line);border-radius:2px;background:var(--card);color:var(--ink);font-size:15px}
.new:hover{text-decoration:none;border-color:var(--blue);color:var(--blue)}
.side-h{flex:none;font:500 13px/1.2 var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin:20px 10px 8px}
#hist{overflow:auto;flex:0 1 auto;min-height:0;display:flex;flex-direction:column;gap:1px}
#hist a{display:block;padding:6px 10px;border-radius:2px;color:var(--ink);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none}
#hist a:hover{background:var(--blue-soft);text-decoration:none}
#hist a.on{background:var(--blue-soft);color:var(--blue)}
#hist p{padding:4px 10px;margin:0}
.side-grow{flex:1 1 0;min-height:8px}
.account{position:relative;flex:none;border-top:1px solid var(--line);margin:0 -12px -12px;padding:8px}
.acct{display:flex;align-items:center;gap:10px;width:100%;padding:6px 8px;border-radius:2px;text-align:left}
.acct:hover,.acct[aria-expanded=true]{background:var(--blue-soft)}
.avatar{width:32px;height:32px;flex:none;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;
  font:500 15px/1 var(--font-display)}
.acct .who{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.acct .who span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#acct-name{font-size:14px;color:var(--ink)}
#acct-email{font-size:12.5px;color:var(--mute)}
.acct>svg{width:14px;height:14px;flex:none;color:var(--mute)}
.account .menu.up{left:8px;right:8px}

#scrim{display:none}
#view{flex:1 1 auto;min-width:360px;position:relative;overflow:hidden}
.view{position:absolute;inset:0;overflow:auto}
#panel{display:none;flex:0 0 var(--panel-w,400px);min-width:340px;max-width:calc(100% - 368px - var(--side-w,0px));flex-direction:column;background:var(--paper)}
body.panel-open #panel{display:flex}

/* The seams (user, 24-09-2026): the chat and a cited document side by side, the page and the Ask panel side by side —
   never overlapping, each pane whole, the gutter between them dragged to share the width. shell.js keeps --cite-w /
   --panel-w (px) clamped so the page keeps 360px and the pane its minimum; the max-widths here are the CSS backstop. */
body.side-open .frame{--side-w:264px}
.gut{display:none;flex:none;width:8px;position:relative;cursor:col-resize;touch-action:none;background:var(--paper);outline-offset:-2px}
.gut::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;margin-left:-.5px;background:var(--line)}
.gut:hover::before,.gut.drag::before,.gut:focus-visible::before{width:2px;margin-left:-1px;background:var(--blue)}
body.cite-open #cite-gut,body.panel-open #panel-gut{display:block}
body.seam-drag{cursor:col-resize;user-select:none}
body.seam-drag.stacked{cursor:row-resize}
body.seam-drag iframe{pointer-events:none}   /* the guide frame must not swallow the drag */
#cite{display:none;flex:0 0 var(--cite-w,46%);min-width:380px;max-width:calc(100% - 368px - var(--side-w,0px));min-height:0;overflow:hidden}
body.cite-open #cite{display:flex}
body.cite-open .chat .col{padding:0 16px}
.panel-h{display:flex;align-items:center;gap:8px;height:52px;flex:none;padding:0 8px 0 16px;border-bottom:1px solid var(--line)}
.panel-h strong{font:500 17px/1 var(--font-display)}
.panel-h select{flex:1;min-width:0;border:1px solid var(--line);border-radius:2px;padding:4px 6px;background:var(--card);font-size:14px;color:var(--mute)}
#panel-body{flex:1;min-height:0;display:flex}
#panel-body .chat{flex:1;min-width:0}

/* chat */
.chat{display:flex;flex-direction:column;height:100%}
.chat .thread{flex:1;overflow:auto}
.chat .col{max-width:760px;margin:0 auto;padding:0 24px}
.chat.compact .col{padding:0 16px}
.hello{display:none}
.chat.empty{justify-content:center}
.chat.empty .thread{flex:none;overflow:visible}
.chat.empty .hello{display:block;text-align:center;padding-bottom:24px}
.hello h1{font:500 28px/1.25 var(--font-display);margin:0 0 8px}
.chat.compact .hello h1{font-size:20px}
.hello .sub{color:var(--mute);margin:0;font-style:italic}
.turn:empty{display:none}
.turn{padding:32px 0 24px}
/* The question sits in its own block, pushed to the right; the answer runs as prose on the left (user, 24-09-2026). */
.turn .q{margin:0 0 28px auto;padding:12px 18px;background:var(--surface,rgba(20,20,18,.05));border:1px solid var(--line);border-radius:14px;
  color:var(--ink);white-space:pre-wrap;font-size:16px;line-height:1.55;width:fit-content;max-width:80%}
.chat.compact .turn .q{max-width:92%}
.progress{color:var(--mute);font-size:14px;min-height:22px;font-style:italic}
.answer{font-size:17px;line-height:1.7;margin-top:10px}
.chat.compact .answer{font-size:16px}
.answer:empty{display:none}
.answer h1,.answer h2,.answer h3{font:500 19px/1.3 var(--font-display);margin:1.2em 0 .4em}
.answer p{margin:.6em 0}.answer ul,.answer ol{padding-left:1.4em}.answer li{margin:.25em 0}
.answer blockquote{margin:.8em 0;padding-left:14px;border-left:2px solid var(--line);color:var(--mute)}
.answer table{border-collapse:collapse;margin:12px 0;font-size:15px;display:block;overflow-x:auto}
.answer td,.answer th{border:1px solid var(--line);padding:6px 10px;text-align:left;vertical-align:top}
.answer th{background:var(--blue-soft);font-weight:normal}
.chip{display:inline-block;background:var(--blue-soft);color:var(--blue);border:1px solid var(--line);border-radius:2px;padding:0 6px;margin:0 2px;
  font:small-caps 14px/20px var(--font-body);letter-spacing:.02em;white-space:nowrap;vertical-align:1px}
.chip:hover{border-color:var(--blue)}
.cite-nb{white-space:nowrap}   /* a bracket stays with its chip when the line wraps */
.chip.bad{background:transparent;border-color:var(--bad);color:var(--bad);cursor:help}
details.below{margin-top:18px;font-size:14px;color:var(--mute)}
details.below summary{cursor:pointer}
.dock{flex:none;padding:8px 0 14px;background:var(--paper)}
.composer{position:relative;border:1px solid var(--line);border-radius:6px;background:var(--card);padding:12px 10px 8px 14px}
.composer:focus-within{border-color:var(--blue);outline:1px solid var(--blue)}   /* a 2px blue ring: border + outline */
.composer textarea{display:block;width:100%;border:0;outline:0;resize:none;background:transparent;font-size:16px;line-height:1.5;min-height:24px;max-height:200px;padding:2px 0}
.composer textarea::placeholder{color:var(--mute);font-style:italic}
.composer .row{display:flex;align-items:center;gap:8px;margin-top:4px}
.composer .icon{width:32px;height:32px}.composer .icon svg{width:18px;height:18px}
.opts-sum{flex:1;font-size:13px;color:var(--mute)}
.send{width:34px;height:34px;border-radius:50%;background:var(--blue);color:var(--card);display:grid;place-items:center}
.send svg{width:18px;height:18px}
.send:disabled{background:var(--line);color:var(--card);cursor:default}
.opts{position:absolute;bottom:calc(100% + 8px);left:0;background:var(--card);border:1px solid var(--line);border-radius:2px;
  padding:12px;display:flex;gap:14px;flex-wrap:wrap;font-size:14px;z-index:5}
.opts label{display:flex;flex-direction:column;gap:4px;color:var(--mute)}
.opts select,.opts input{border:1px solid var(--line);border-radius:2px;padding:5px 8px;background:var(--card);color:var(--ink);width:140px}
.hint{text-align:center;font-size:13px;color:var(--mute);margin:8px 0 0;font-style:italic}

/* documents (the Record fallback list) */
.docs{max-width:960px;margin:0 auto;padding:32px 24px 48px}
.docs-h{display:flex;align-items:baseline;gap:12px}
.docs-h h1{font:500 28px/1.2 var(--font-display);margin:0}.docs-h .count{color:var(--mute);font-size:14px}
.filter{width:100%;margin:18px 0 8px;padding:10px 14px;border:1px solid var(--line);border-radius:2px;background:var(--card)}
.filter::placeholder{color:var(--mute)}
.doc-table{width:100%;border-collapse:collapse;font-size:15px}
.doc-table th{text-align:left;font-weight:normal;font-variant:small-caps;letter-spacing:.04em;color:var(--mute);font-size:14px;padding:8px 10px;border-bottom:1px solid var(--line)}
.doc-table td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
.doc-table td:first-child,.doc-table th:first-child{width:56px;color:var(--mute)}
.doc-table td:last-child,.doc-table th:last-child{width:72px;text-align:right;color:var(--mute)}
.doc-table tbody tr{cursor:pointer}.doc-table tbody tr:hover{background:var(--blue-soft)}
.retry{margin-top:8px;border:1px solid var(--line);border-radius:2px;padding:6px 12px;background:var(--card)}

/* document + viewer */
.view-doc{display:flex;flex-direction:column;overflow:hidden}
.doc-h{flex:none;padding:12px 16px 0}
.back{font-size:14px}
.doc-pages{flex:1;min-height:0}
.viewer{display:flex;flex-direction:column;background:var(--paper)}
#viewer{position:fixed;top:0;right:0;bottom:0;width:min(52vw,900px);border-left:1px solid var(--line);display:none;z-index:50}
#viewer.open{display:flex}
.vbar{display:flex;gap:10px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line);font-size:14px;flex:none;background:var(--paper)}
.vbar .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:500 17px/1.3 var(--font-display)}
.vcount{color:var(--mute);font-size:14px;white-space:nowrap}
.vtext{border:1px solid var(--line);border-radius:2px;padding:3px 10px;font-size:14px;background:var(--card)}
.vtext[aria-pressed=true]{background:var(--blue-soft);border-color:var(--blue);color:var(--blue)}
.vx{width:30px;height:30px;border-radius:2px;font-size:20px;color:var(--mute)}.vx:hover{background:var(--blue-soft);color:var(--ink)}
.vbody{flex:1;min-height:0;overflow:auto;padding:16px;background:var(--paper);container:vbody/inline-size}
.vbody:focus{outline:none}.vbody:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
/* the pane's own zoom (--vz on .vbody, set by viewer.js): the rows widen inside the pane, which scrolls both ways;
   centred while they fit, then flush left and scrolled. The OCR text keeps its size. */
.vp{display:flex;gap:10px;margin:0 auto 16px;width:calc(100%*var(--vz,1));max-width:calc(900px*var(--vz,1))}
.vzoom{display:inline-flex;flex:none;border:1px solid var(--line);border-radius:2px;background:var(--card)}
.vzoom button{padding:3px 8px;font-size:14px;line-height:1.2;color:var(--ink);background:none}
.vzoom button:hover{background:var(--blue-soft);color:var(--blue)}
.vzoom .vzval{min-width:50px;border-left:1px solid var(--line);border-right:1px solid var(--line);font-variant-numeric:tabular-nums}
.vzoom button:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.vp figure{margin:0;flex:1;min-width:0}
.vp img{width:100%;display:block;background:var(--card);border:1px solid var(--line);border-radius:2px}
.vp figcaption{font-size:13px;color:var(--mute);padding:2px 0 4px;font-variant:small-caps;letter-spacing:.02em}
.vp.cited img{outline:2px solid var(--blue);outline-offset:-1px}
.vp pre{flex:1;min-width:0;display:none;margin:0;white-space:pre-wrap;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--card);
  border:1px solid var(--line);border-radius:2px;padding:10px}
.viewer.text .vp pre{display:block}
.vp .err{padding:40px;text-align:center}

/* the book (one guide iframe for Reading guide and Record), all cases, notices */
.view-book{overflow:hidden}
.view.view-cases{position:absolute;inset:0;overflow:hidden;z-index:0;isolation:isolate}   /* over cases.css's .cases-field{position:relative};
   its own stacking context, so the sphere's z-indexes stay under the top bar and the case switcher */
body.all-cases #side,body.all-cases #scrim{display:none!important}
.guide-frame{border:0;width:100%;height:100%;display:block;background:var(--card)}
.blank{max-width:520px;margin:18vh auto 0;padding:0 24px;text-align:center}
.blank h1{font:500 28px/1.2 var(--font-display);margin:0 0 10px}
.blank button{margin-top:12px;border:1px solid var(--line);border-radius:2px;padding:8px 14px;background:var(--card)}
.blank button:hover{border-color:var(--blue);color:var(--blue)}

@media (max-width:900px){
  #side{position:absolute;top:0;bottom:0;left:0;z-index:25;width:min(84vw,300px)}
  body.side-open #scrim{display:block;position:absolute;inset:0;background:rgba(20,20,18,.28);z-index:24}
  #panel{position:absolute;inset:0;width:auto;max-width:none;min-width:0;z-index:26}
  body.panel-open #panel-gut{display:none}   /* the panel is a full-screen sheet on a phone: nothing to share */
  /* stacked: the chat above, the cited document below, a horizontal gutter between (each at least 40% tall) */
  .frame{flex-direction:column}
  #view{min-width:0;min-height:0}
  #cite-gut{width:auto;height:8px;cursor:row-resize}
  #cite-gut::before{top:50%;bottom:auto;left:0;right:0;width:auto;height:1px;margin:-.5px 0 0}
  #cite-gut:hover::before,#cite-gut.drag::before,#cite-gut:focus-visible::before{width:auto;height:2px;margin:-1px 0 0}
  #cite{flex:0 0 var(--cite-h,50%);min-width:0;max-width:none;min-height:0}
  #viewer{width:100%}
  .chat .col{padding:0 16px}
  .hello h1{font-size:24px}
  #case-btn{max-width:calc(100vw - 120px);font-size:17px}
}