/* Manhaj: a reviewing desk for a classical Arabic book.
   Original palette (bottle green, gold, warm paper) with Islamic typography:
   Aref Ruqaa for the wordmark, Amiri Naskh for headings and the book's words, IBM Plex Sans Arabic for the interface. */

@font-face{font-family:'Amiri';font-weight:400;font-display:swap;src:url(/static/fonts/amiri-400-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Amiri';font-weight:400;font-display:swap;src:url(/static/fonts/amiri-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Amiri';font-weight:700;font-display:swap;src:url(/static/fonts/amiri-700-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Amiri';font-weight:700;font-display:swap;src:url(/static/fonts/amiri-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Aref Ruqaa';font-weight:700;font-display:swap;src:url(/static/fonts/aref-ruqaa-700-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-weight:400;font-display:swap;src:url(/static/fonts/ibm-plex-sans-arabic-400-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-weight:400;font-display:swap;src:url(/static/fonts/ibm-plex-sans-arabic-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-weight:600;font-display:swap;src:url(/static/fonts/ibm-plex-sans-arabic-600-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-weight:600;font-display:swap;src:url(/static/fonts/ibm-plex-sans-arabic-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:#f6f5f0;          /* original page ground */
  --surface:#fff;
  --ink:#1c302c;
  --muted:#5f6f68;       /* original #72807a, darkened slightly for AA contrast on white */
  --line:#e2e6df;
  --green:#164b3d;       /* original primary */
  --green-2:#24614e;     /* original hover */
  --green-deep:#06392a;  /* sampled from the generated banner */
  --soft:#eaf2ec;
  --gold:#aa8348;
  --amber:#95621c;
  --amber-tint:#f8edd8;
  --red:#a23f34;
  --red-tint:#fbe9e6;
  --naskh:'Amiri','Noto Naskh Arabic','Traditional Arabic',serif;
  --ruqaa:'Aref Ruqaa','Amiri',serif;
  --ui:'IBM Plex Sans Arabic',Tahoma,'Segoe UI',sans-serif;
  --radius:10px;
  --fade:.2s ease;       /* one timing for every hover, focus and state change */
  --ease-sheet:cubic-bezier(.32,.72,0,1); /* panels that slide or fold: quick to start, long soft landing */
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ui);font-size:15px;line-height:1.8;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit}
h1,h2,h3,p{margin:0}
h2{font-family:var(--naskh);font-size:32px;line-height:1.55;font-weight:700}
h3{font-family:var(--naskh);font-size:21px;line-height:1.6;font-weight:700}
.muted,small{color:var(--muted)}
small{font-size:12.5px}
a{color:var(--green)}
:focus-visible{outline:2px solid var(--green-2);outline-offset:2px}

/* Controls, drawn from the book rather than a component kit.
   The main action is bottle-green leather with a gold rule tooled just inside its edge; the second is paper with an
   ink edge; the quiet one is a word with a gold underline. Corners follow the role, and a press sinks a pixel. */
button{cursor:pointer;min-height:40px;border:1px solid #c9d2c8;border-radius:7px;padding:8px 18px;background:#fffefa;color:var(--ink);font-weight:600;
  transition:background-color var(--fade),border-color var(--fade),color var(--fade),box-shadow var(--fade),opacity var(--fade),transform .12s ease}
button:hover{border-color:var(--green);background:#f3f5ee}
button:not([class]):active:not(:disabled),.primary:active:not(:disabled),.outline:active:not(:disabled),.danger:active:not(:disabled){transform:translateY(1px)}
button:disabled{opacity:.55;cursor:wait}
.primary{background:var(--green);color:#fdfbf3;border-color:var(--green);box-shadow:inset 0 0 0 2px var(--green),inset 0 0 0 3px #e7cf9f2e,0 1px 2px #06392a24}
.primary:hover{background:#0f4134;border-color:#0f4134;color:#fff;box-shadow:inset 0 0 0 2px #0f4134,inset 0 0 0 3px #e7cf9f6b,0 1px 2px #06392a24}
.primary:active:not(:disabled){box-shadow:inset 0 0 0 2px #0b382c,inset 0 0 0 3px #e7cf9f59}
.primary:focus-visible{outline-color:var(--gold)}
.danger{color:var(--red);border-color:#e3c6c1}
.danger:hover{border-color:var(--red);background:var(--red-tint)}
.quiet{border:0;min-height:0;border-radius:4px;background:transparent;padding:4px 0;color:var(--green);font-weight:600;
  text-decoration:underline;text-decoration-color:#aa834866;text-decoration-thickness:1px;text-underline-offset:6px}
.quiet:hover{background:transparent;text-decoration-color:var(--gold)}
input[type=search]{-webkit-appearance:none;appearance:none}
input,select,textarea{border:1px solid #d3dbd1;border-radius:8px;background:#fff;padding:10px 12px;width:100%;color:var(--ink);transition:border-color var(--fade),box-shadow var(--fade)}
textarea{min-height:90px;resize:vertical;line-height:1.9}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--green);box-shadow:0 0 0 3px #aac8b866}
label{display:block;font-size:13.5px;font-weight:600;margin:14px 0 6px}
details>summary{cursor:pointer}
details[open]>*:not(summary){animation:fade-in .25s ease-out both}

/* Sidebar */
.sidebar{width:248px;position:fixed;inset:0 0 0 auto;background:var(--surface);border-left:1px solid var(--line);padding:28px 18px;display:flex;flex-direction:column;z-index:5}
.brand{text-decoration:none;color:inherit;display:flex;gap:12px;align-items:center;padding:0 8px 22px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.brand img{width:46px;height:46px;flex:none}
.brand h1{font-family:var(--ruqaa);font-weight:700;font-size:36px;line-height:1;padding-top:.5em;color:var(--green)}
nav{display:grid;gap:6px}
nav button{border:0;border-radius:var(--radius);background:transparent;text-align:right;padding:10px 14px;color:#4b5a54;font-size:14px;font-weight:400}
nav button:hover{background:#f2f5f0;color:var(--ink)}
nav button span{display:inline-block;width:26px;color:#81968a;transition:color var(--fade)}
nav button span svg{vertical-align:-4px}
nav button.active{background:var(--soft);color:var(--green);font-weight:600}
nav button.active span{color:var(--green)}
.sidebar-foot{margin-top:auto;padding:18px 10px 0;border-top:1px solid var(--line)}

/* Main column */
main{margin-right:248px;padding:0 44px 64px;overflow-x:clip} /* nothing moving inside may widen the page */
main>header{height:80px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-size:13px;margin-bottom:26px;color:var(--muted)}
main>header #breadcrumb{color:var(--ink)}
.identity{display:flex;align-items:center;gap:10px;font-size:13px}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--soft) url(/static/img/emblem-112.webp) center/24px no-repeat}
.page-title{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin:22px 0 22px}
.page-title p{color:var(--muted);margin-top:4px;font-size:14px;max-width:62ch}

/* Status in the manner of Apple's labels: the word itself, in a colour that carries its meaning; no capsule around it */
.pill{display:inline;font-size:13px;font-weight:600;line-height:1.6;color:var(--green);white-space:nowrap}
.pill.pending{color:var(--amber)}
.pill.rejected,.pill.draft{color:var(--red)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px}

/* Overview numbers: one row of figures, not a grid of cards */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:26px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.metric{padding:20px 24px}
.metric+.metric{border-right:1px solid var(--line)}
.metric .label{font-size:13.5px;color:var(--muted)}
.metric strong{display:block;font-family:var(--naskh);font-size:40px;font-weight:700;line-height:1.35;margin:4px 0 0;color:var(--green)}
.metric small{font-size:12.5px}


.two-col{display:grid;grid-template-columns:1.6fr 1fr;gap:22px;align-items:start}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.row{border-top:1px solid var(--line);padding:14px 0;display:flex;gap:14px;align-items:center}
.row .text{flex:1;min-width:0}
.row h4{font-family:var(--naskh);font-size:16px;font-weight:700;margin:0;line-height:1.8}
.row p{font-size:12.5px;color:var(--muted)}
.guarantees{padding:6px 2px}
.guarantees h3{margin-bottom:6px}
.guarantee{padding:12px 0;border-top:1px solid var(--line)}
.guarantee b{font-size:14px;color:var(--green)}
.guarantee p{font-size:13px;color:var(--muted);margin-top:2px}


/* Overview: analysing an objection comes first */
.analyze{background:var(--surface);border:1px solid #d9e3da;border-radius:16px;padding:28px 30px 24px;margin-bottom:26px;box-shadow:0 1px 2px #1c302c0a,0 14px 36px #1c302c12;border-top:4px solid var(--green)}
.analyze-head h3{font-size:28px;color:var(--green-deep)}
.analyze-head p{color:var(--muted);font-size:14.5px;margin-top:4px;max-width:70ch}
.analyze textarea{margin-top:16px;min-height:150px;font-family:var(--naskh);font-size:19px;line-height:2;padding:16px 18px;background:#fbfbf8}
.analyze-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 20px;margin-top:14px}
.analyze-foot .check{margin:0;color:var(--muted)}
.analyze-foot .form-actions{margin:0;align-items:center}
#diagnosis-result:not(:empty){margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}

/* Lists and tables */
.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.toolbar input{max-width:460px}
.toolbar select{max-width:190px}
.table-wrap{overflow:auto;position:relative} /* keeps the hidden column label inside the scroll box on phones */
table{border-collapse:collapse;width:100%;font-size:13.5px}
th{text-align:right;font-size:12.5px;font-weight:600;color:var(--muted);padding:12px 14px;background:#f8f9f5;border-bottom:1px solid var(--line)}
td{padding:16px 14px;border-top:1px solid var(--line);vertical-align:top;transition:background-color var(--fade)}
tbody tr:hover td{background:#fafbf8}
td:first-child{min-width:250px;font-family:var(--naskh);font-size:16px;line-height:1.8}
td small{display:block;font-family:var(--ui);font-size:11.5px}
td button{min-height:32px;padding:4px 14px;font-size:13px;border-color:transparent;border-radius:6px;background:#164b3d0f;color:var(--green)}
td button:hover{border-color:transparent;background:#164b3d1f}
.empty{text-align:center;padding:48px;color:var(--muted)}
.pagination{display:flex;align-items:center;justify-content:space-between;padding-top:16px;font-size:13px}

.lead-note{color:var(--muted);font-size:14px;margin:0 0 18px}
.banner{border:1px solid #e3d7bb;background:#fbf5e8;padding:13px 18px;border-radius:var(--radius);color:#7a5c2b;margin-bottom:18px;font-size:13.5px}
/* Notifications share the alert's card (below): the same material, words and hairline, with «حسنًا» to close.
   They come in as an alert does (a soft zoom), sit at the top without dimming the page, and leave by themselves;
   a swipe up dismisses them too. */
#notice:not(:popover-open){display:none}
#notice[hidden]{display:none}
#notice:popover-open,#notice:not([hidden]){animation:notice-in .26s cubic-bezier(.2,.9,.3,1.1)}
#notice.leaving{opacity:0;transform:translateX(-50%) scale(.96);transition:opacity .2s ease,transform .2s ease}
@keyframes notice-in{from{opacity:0;transform:translateX(-50%) scale(1.08)}to{opacity:1;transform:translateX(-50%)}}
/* Alert in Apple's manner: compact, centred text, buttons split by hairlines; Cancel leads, the action trails */
dialog.alert{width:min(300px,calc(100vw - 48px));border:0;border-radius:16px;padding:0;overflow:hidden;background:#f9f9f7eb;-webkit-backdrop-filter:saturate(180%) blur(30px);backdrop-filter:saturate(180%) blur(30px);box-shadow:0 22px 60px #00000040}
dialog.alert::backdrop{background:#0000004d;backdrop-filter:none}
.alert-body{padding:22px 18px 16px;text-align:center}
.alert-body h3{font-family:var(--ui);font-size:16px;font-weight:600;line-height:1.5;color:#1d1d1f}
.alert-body p{margin-top:6px;font-size:13px;line-height:1.6;color:#3a3a3c}
.alert-body textarea{margin-top:12px;min-height:76px;font-size:13.5px;background:#fff;border-radius:10px}
.alert-actions{display:grid;grid-template-columns:1fr 1fr;border-top:.5px solid #3c3c4333}
.alert-actions button{font-weight:400;border:0;border-radius:0;min-height:46px;background:transparent;font-size:15px;color:var(--green)}
.alert-actions button:first-child{font-weight:600}
.alert-actions button+button{border-inline-start:.5px solid #3c3c4333}
.alert-actions button:hover{background:#0000000a}
.alert-actions .destructive{color:#d70015}
/* Loading: the emblem turns a quarter at a time (eight-fold symmetry makes the loop seamless) */
.loader{display:flex;flex-direction:column;align-items:center;gap:12px;padding:28px 0;color:var(--muted);font-size:14px}
.loader-mark{width:44px;height:44px;background:url(/static/img/emblem-112.webp) center/contain no-repeat;animation:turn 1.5s cubic-bezier(.65,0,.35,1) infinite}
@keyframes turn{0%{transform:rotate(0) scale(1)}55%{transform:rotate(90deg) scale(.92)}100%{transform:rotate(90deg) scale(1)}}
#content{position:relative}
#content.loading>*{opacity:.35;transition:opacity .2s ease}
#content.loading::before{content:"";position:absolute;z-index:3;top:140px;left:50%;width:44px;height:44px;margin-left:-22px;background:url(/static/img/emblem-112.webp) center/contain no-repeat;animation:turn 1.5s cubic-bezier(.65,0,.35,1) infinite}
.book-stage.turning>*{opacity:0}
.book-stage.turning::before{content:"";align-self:center;width:44px;height:44px;background:url(/static/img/emblem-112.webp) center/contain no-repeat;animation:turn 1.5s cubic-bezier(.65,0,.35,1) infinite}
button.busy{position:relative;color:transparent!important;pointer-events:none}
/* buttons waiting on the server show a small ring, not a second loader */
button.busy::after{content:"";position:absolute;inset:0;margin:auto;width:16px;height:16px;border-radius:50%;border:2px solid #164b3d33;border-top-color:var(--green);animation:spin .7s linear infinite}
.primary.busy::after{border-color:#ffffff55;border-top-color:#fff}
@keyframes spin{to{transform:rotate(360deg)}}
.attest .check.missing{color:var(--red);font-weight:600}
.attest .check.missing input{outline:2px solid var(--red);outline-offset:2px}
.field-error{display:block;color:var(--red);font-size:12.5px;margin-top:6px}
[aria-invalid=true]{border-color:var(--red)!important}
.pw-rules{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;color:var(--muted)}
.pw-rules li::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#cfd6cc;margin-inline-end:6px;vertical-align:1px;transition:background-color .2s ease}
.pw-rules li.ok{color:var(--green)}
.pw-rules li.ok::before{background:var(--green)}

/* Review window: header, two independently scrolling panes, pinned actions */
dialog{border:1px solid var(--line);border-radius:14px;padding:0;color:var(--ink);background:var(--surface)}
#editor{width:min(1200px,96vw);height:min(92vh,980px);max-height:none;overflow:hidden}
#editor[open]{display:flex;flex-direction:column}
#editor-content{display:flex;flex-direction:column;flex:1;min-height:0}
html:has(dialog[open]){overflow:hidden}
.evidence-pane,.review-pane,.modal-grid,.chunks,#book{overscroll-behavior:contain}
dialog::backdrop{background:#14281dcc;backdrop-filter:blur(2px)}
dialog.closing,dialog.closing::backdrop{animation:fade-out .18s ease-in both}
.modal-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;border-bottom:1px solid var(--line);background:var(--surface)}
.modal-title{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px}
.modal-title h3{font-size:22px}
.modal-grid{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.evidence-pane{overflow:auto;padding:22px 24px;background:#f7f8f3;border-left:1px solid var(--line)}
.review-pane{overflow:auto;padding:8px 24px 24px}
.evidence-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.evidence-head h4{font-family:var(--naskh);font-size:20px;margin:0}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.facts div{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:4px 10px;font-size:12.5px;display:flex;gap:6px}
.facts dt{color:var(--muted)}
.facts dd{margin:0;font-weight:600}
.excerpt{white-space:pre-line;font-family:var(--naskh);font-size:19px;line-height:2.15;margin:0;text-align:justify}
.history{margin-top:22px;border-top:1px solid var(--line);padding-top:12px;font-size:13px}
.history ol{margin:10px 0 0;padding-inline-start:18px;display:grid;gap:6px}
fieldset{border:0;border-top:1px solid var(--line);margin:0;padding:14px 0 6px}
fieldset:first-child{border-top:0}
legend{font-family:var(--naskh);font-size:18px;font-weight:700;color:var(--green);padding:0 0 4px}
.field{margin-bottom:12px}
.field label{margin:8px 0 2px}
.hint{display:block;margin-bottom:6px;font-size:12px}
.review-pane textarea{min-height:46px;resize:none;overflow:hidden}
.review-pane textarea.one-line{min-height:0;line-height:1.7}
#edit-objection_text_ar,#edit-methodology_rule_ar{font-family:var(--naskh);font-size:17px;line-height:2}
.more{border-top:1px solid var(--line);padding:12px 0}
.more summary{color:var(--green);font-weight:600}
.modal-foot{flex:none;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 18px;padding:12px 24px;border-top:1px solid var(--line);background:var(--surface)}
.attest{display:flex;flex-wrap:wrap;gap:4px 18px}
.attest .check{margin:0}
.actions{display:flex;flex-wrap:wrap;gap:10px}
.check{display:flex;gap:8px;align-items:center;font-size:13.5px;font-weight:400}
.check input{width:auto;margin:0;accent-color:var(--green)}
.fields-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.json{white-space:pre-wrap;direction:ltr;text-align:left;font-size:11.5px;max-height:420px;overflow:auto;overflow-wrap:anywhere;background:#f7f8f5;padding:12px;border-radius:8px}
.chunks{overflow:auto;padding:16px 24px}
.chunks details{border-bottom:1px solid var(--line);padding:10px 0}

/* Book viewer: real pages, two at a time on wide screens */
#book{width:min(1280px,98vw);height:min(96vh,1100px);max-height:none;overflow:hidden;background:#ece9df}
#book[open]{display:flex;flex-direction:column}
.book-bar{flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:12px 20px;background:var(--surface);border-bottom:1px solid var(--line)}
.book-bar h3{font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.book-nav{display:flex;align-items:center;gap:10px}
.goto{display:flex;align-items:center;gap:6px;margin:0;font-weight:400;font-size:14px;white-space:nowrap}
.goto input{width:72px;text-align:center;padding:6px 8px}
.book-tools{display:flex;justify-content:flex-end;align-items:center;gap:14px}
.book-tools a{font-size:14px}
.book-stage{flex:1;min-height:0;display:flex;justify-content:center;align-items:stretch;gap:2px;padding:18px;transition:opacity .22s ease;perspective:2400px}

.leaf{margin:0;flex:0 1 auto;display:flex;flex-direction:column;align-items:center;min-width:0;background:#fff;box-shadow:0 2px 14px #1c302c26;border-radius:2px}
.leaf img{flex:1;min-height:0;max-width:100%;object-fit:contain;display:block}
.leaf figcaption{flex:none;font-size:12px;color:var(--muted);padding:4px 0 6px;font-variant-numeric:tabular-nums}
.leaf.lifting{position:relative;z-index:2;backface-visibility:hidden;will-change:transform}
.leaf.lifting::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to left,#0000 40%,#1c302c1f)}
.leaf.missing{justify-content:center;padding:40px;color:var(--muted)}

/* Sources */
.list-stack{display:grid;gap:16px}
.source-card{display:flex;align-items:center;gap:22px}
.source-actions{display:flex;flex-wrap:wrap;gap:10px}
.form-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.cites{list-style:none;padding:0!important}
.cites li{display:flex;align-items:center;gap:8px}
.book-cover{width:72px;height:auto;flex:none;filter:drop-shadow(0 3px 6px #1c302c33)}
.source-card .text{flex:1}
.source-card p{font-size:13px;color:var(--muted)}
.result{white-space:pre-wrap;overflow-wrap:anywhere}
.spaced{margin-top:22px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Analysis result */
.diagnosis{display:grid;grid-template-columns:minmax(8rem,max-content) 1fr;gap:.55rem 1.2rem;margin:1rem 0}
.diagnosis dt{font-weight:600;color:var(--green);font-size:13.5px}
.diagnosis dd{margin:0;font-family:var(--naskh);font-size:17px;line-height:1.95}
.diagnosis ol,.diagnosis ul{margin:0;padding-inline-start:1.2rem}
.diagnosis dd .pill{font-family:var(--ui)}
.verdict{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;padding:2px 2px 0}
.verdict strong{order:-1;font-family:var(--naskh);font-size:26px;line-height:1.5;color:var(--green-deep);margin-inline-end:6px}
.verdict .pill{font-weight:400;color:var(--muted)}
.verdict .pill.pending{color:var(--amber)}
.verdict .pill.draft{color:var(--red);font-weight:600}
.meta{display:block;margin-top:6px}


/* Two faces: nothing shows until the script knows whether you are signed in (no flash of the wrong page) */
body:not([data-mode=landing]) #landing,body:not([data-mode=app]) #app{display:none}
body[data-mode=app] #app{animation:fade-in .3s ease-out both}


/* Landing: light and quiet. The page colour runs edge to edge; no frames, no rules between sections. */
.land-wrap,.landing{max-width:1180px;margin:0 auto;padding:0 32px}
.land-bar .land-wrap{height:88px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.land-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--green)}
.land-brand span,.brand h1{text-decoration:none}
/* Aref Ruqaa draws about half an em above its declared ascent; the top padding keeps the word inside the bar */
.land-brand span{font-family:var(--ruqaa);font-weight:700;font-size:30px;line-height:1;padding-top:.5em}
.land-brand.small span{font-size:22px}
.land-actions{display:flex;align-items:center;gap:16px}
.land-actions .quiet{font-size:15px}
.land-hero{position:relative;isolation:isolate;min-height:min(86svh,800px);display:flex;align-items:center;margin-top:-88px;padding:136px 0 80px}
/* the study photograph, blurred and veiled in the page colour, fading out at the bottom: depth without edges */
.land-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to left,#f6f5f0e6 0%,#f6f5f0b3 28%,#f6f5f033 48%,transparent 60%),linear-gradient(to bottom,transparent 86%,var(--bg) 100%),url(/static/img/hero-desk-1920.webp) left center/cover no-repeat;background:linear-gradient(to left,#f6f5f0e6 0%,#f6f5f0b3 28%,#f6f5f033 48%,transparent 60%),linear-gradient(to bottom,transparent 86%,var(--bg) 100%),image-set(url(/static/img/hero-desk-1920.webp) 1x,url(/static/img/hero-desk-2560-v2.webp) 2x) left center/cover no-repeat}
/* the header sits above the hero's backdrop */
/* the header stays at the top while you scroll */
/* the header lies on the photograph, then turns solid once the page scrolls */
.land-bar{position:sticky;top:0;z-index:20;background:transparent;transition:background-color .3s ease,box-shadow .3s ease,transform .45s cubic-bezier(.16,1,.3,1)}
.land-bar.solid{background:#f6f5f0eb;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 1px 12px #1c302c14}
.hero-grid{display:flex;justify-content:flex-start;width:100%}
.land-copy{max-width:600px}
.principle{margin:0}
.principle p{font-family:var(--naskh);font-weight:700;font-size:clamp(30px,3.5vw,48px);line-height:1.6;color:var(--green-deep)}
/* one clause per line, as the principle is read */
.principle p span{display:block;white-space:nowrap}
.principle p span:first-child::before,.principle p span:last-child::after{color:var(--gold)}
.principle p span:first-child::before{content:"«"}
.principle p span:last-child::after{content:"»"}
.land-lead{margin-top:22px;font-size:17px;line-height:2.05;color:#3d4f48;max-width:54ch}
.land-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
button.big{min-height:50px;padding:10px 28px;font-size:15.5px}
/* the cut-out sits straight on the page, lifted only by a soft warm light behind it */
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:28px}
.section-head h2{font-size:30px}
.section-head p{color:var(--muted);font-size:14px}
.land-example{padding:64px 0}
.example-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:48px;align-items:start}
.ex-claim h3,.ex-analysis dt{font-family:var(--ui);font-size:13.5px;font-weight:600;color:var(--green)}
.ex-claim p{margin-top:10px;font-family:var(--naskh);font-size:25px;line-height:1.9;border-inline-start:3px solid var(--gold);padding-inline-start:20px}
.ex-analysis{margin:0;background:var(--surface);border-radius:14px;padding:8px 28px;box-shadow:0 1px 2px #1c302c0d,0 12px 32px #1c302c0f}
.ex-analysis div{padding:16px 0}
.ex-analysis div+div{border-top:1px solid #eef0ea}
.ex-analysis dd{margin:4px 0 0;font-family:var(--naskh);font-size:18.5px;line-height:1.95}
.land-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:24px 0 40px;color:var(--muted);font-size:13px}

/* Sign up / sign in */
#auth{width:min(440px,94vw);overflow:visible}
.auth-card{position:relative;padding:34px 32px 26px}
.auth-card .emblem{display:block;margin-bottom:10px}
.auth-card h2{font-size:28px}
.auth-card>.muted{font-size:14px;margin-bottom:6px}
.auth-card input{direction:inherit}
.auth-card input[dir=ltr]{direction:ltr;text-align:left}
.auth-card #pw-hint{display:block;margin-top:6px}
.auth-card #auth-submit{width:100%;margin-top:20px;min-height:46px}
.auth-close{position:absolute;top:14px;inset-inline-end:14px;color:var(--muted);padding:6px}
.auth-error{margin-top:14px;background:var(--red-tint);color:var(--red);border-radius:8px;padding:10px 14px;font-size:13.5px}
.auth-switch{margin-top:16px;text-align:center;font-size:14px;color:var(--muted)}

/* Motion: everything that appears fades in; tab changes fade the old page; respects reduced motion */
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes fade-out{from{opacity:1}to{opacity:0}}
@keyframes page-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* backwards only: a transform left filling after the entrance would turn the page into the frame of every fixed
   drawer inside it (the analyses list, its veil) and pin them to the page instead of the window */
#content.page-in{animation:page-in .34s cubic-bezier(.2,.7,.2,1) backwards}
#records-table.refresh tbody,#records-table.refresh .empty{animation:fade-in .22s ease-out both}
#diagnosis-result>*,#history>*{animation:fade-in .3s ease-out both}
dialog[open],dialog[open]::backdrop{animation:fade-in .2s ease-out}
dialog.alert[open]{animation:alert-in .24s cubic-bezier(.2,.9,.3,1.1)} /* an alert arrives with a soft zoom, as on Apple's */
@keyframes alert-in{from{opacity:0;transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after,::backdrop{animation:none!important;transition:none!important}}

/* Responsive */
@media(max-width:980px){.example-grid{grid-template-columns:1fr;gap:28px}}
@media(min-width:761px) and (max-width:1100px){.land-hero::before{background:linear-gradient(to left,#f6f5f0f5 0%,#f6f5f0e6 45%,#f6f5f099 68%,transparent 88%),linear-gradient(to bottom,transparent 70%,var(--bg) 100%),url(/static/img/hero-desk-1280-v2.webp) left center/cover no-repeat;background:linear-gradient(to left,#f6f5f0f5 0%,#f6f5f0e6 45%,#f6f5f099 68%,transparent 88%),linear-gradient(to bottom,transparent 70%,var(--bg) 100%),image-set(url(/static/img/hero-desk-1280-v2.webp) 1x,url(/static/img/hero-desk-1920.webp) 2x) left center/cover no-repeat}}
@media(max-width:1100px){main{padding:0 24px 40px;margin-right:222px}.sidebar{width:222px}.two-col{grid-template-columns:1fr}.metrics{grid-template-columns:repeat(2,1fr)}.metric:nth-child(3){border-right:0}.metric:nth-child(n+3){border-top:1px solid var(--line)}}
@media(max-width:760px){
  .brand h1{font-size:30px}
  .brand img{width:38px;height:38px}
  main{margin-right:0;padding:0 16px 36px}
  .sidebar{width:min(300px,86vw);transform:translateX(100%);visibility:hidden;z-index:40;padding:22px 14px 16px}
  body.nav-open .sidebar{transform:none;visibility:visible;transition-delay:0s;box-shadow:-24px 0 60px #0000002e}
  #nav-backdrop{display:block;position:fixed;inset:0;background:#0f1f1a4d;z-index:39;opacity:0;visibility:hidden;transition:opacity .32s ease,visibility 0s linear .32s}
  body.nav-open #nav-backdrop{opacity:1;visibility:visible;transition-delay:0s}
  .method-band{margin:22px -16px 0;border-radius:0}
  .method-inner ol{grid-template-columns:1fr}
  main>header{height:56px;margin-bottom:18px}
  #editor,#book{width:100vw;height:100dvh;max-width:100vw;border-radius:0}
  .modal-grid{display:block;overflow:auto}
  .evidence-pane{border-left:0;border-bottom:1px solid var(--line);overflow:visible}
  .review-pane{overflow:visible}
  .modal-foot{padding:10px 14px}
  .book-bar{grid-template-columns:1fr auto;padding:10px 12px}
  .book-bar h3{display:none}
  .book-stage{padding:8px}
  .metric strong{font-size:30px}
  .page-title{align-items:start;flex-direction:column}
  h2{font-size:26px}
  .toolbar{flex-wrap:wrap}
  .identity{font-size:11px}
  .fields-two{grid-template-columns:1fr}
  .landing{padding:0 16px}
  .land-wrap{padding:0 16px}
  .land-bar .land-wrap{height:72px}
  .land-hero{min-height:0;align-items:flex-end;margin-top:-72px;padding:372px 0 36px}
  .land-hero::before{background:linear-gradient(to bottom,transparent 0%,transparent 34%,#f6f5f0e6 52%,var(--bg) 70%),url(/static/img/hero-desk-1280-v2.webp) 18% top/auto 412px no-repeat}
  .principle p span{white-space:normal}
  .land-brand span{font-size:26px}
  .land-actions{gap:8px}
  .land-actions .primary{padding:8px 14px}
  .principle p{font-size:31px}
  .land-lead{font-size:15.5px}
  .land-example{padding:44px 0}
  .section-head{flex-direction:column;gap:2px}
  .ex-claim p{font-size:21px}
  .auth-card{padding:28px 20px 22px}
  .diagnosis{grid-template-columns:1fr}
  .diagnosis dt{margin-top:.5rem}
}

/* Account: chip in the sidebar, button in the header, one menu */
.avatar-i{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#24614e,#164b3d);color:#f3ead6;font-weight:600;font-size:14px;line-height:1}
.avatar-i.xl{width:64px;height:64px;font-size:26px}
.account-chip{font-weight:400;width:100%;display:flex;align-items:center;gap:10px;padding:8px 10px;border:0;border-radius:12px;background:transparent;text-align:right;min-height:0}
.account-chip:hover{background:#f2f5f0}
.account-text{flex:1;min-width:0;display:grid;line-height:1.4}
.account-text b{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-text small{font-size:11.5px}
.account-chip>svg{color:var(--muted);flex:none}
.sidebar-foot{padding:12px 4px 0}
.identity{border:0;background:transparent;min-height:0;padding:4px 6px;border-radius:999px;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink)}
.identity:hover{background:#ebefe9}
.account-menu{margin:0;padding:6px;border:0;border-radius:14px;width:240px;background:#fbfbf9f0;-webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);box-shadow:0 16px 44px #00000029,0 0 0 .5px #0000001a;inset:auto}
.account-menu:popover-open{animation:menu-in .16s ease-out}
@keyframes menu-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.menu-head{display:flex;align-items:center;gap:10px;padding:8px 10px 10px}
.menu-head div{display:grid;line-height:1.4;min-width:0}
.menu-head b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-head small{font-size:12px}
.account-menu hr{border:0;border-top:.5px solid #3c3c4333;margin:4px 6px}
.account-menu button{font-weight:400;width:100%;display:flex;align-items:center;gap:10px;border:0;border-radius:9px;min-height:38px;padding:6px 10px;background:transparent;text-align:right;font-size:14px}
.account-menu button:hover,.account-menu button:focus-visible{background:#164b3d14;outline:0}
.account-menu svg{color:var(--muted);flex:none}
.account-menu .menu-danger,.account-menu .menu-danger svg{color:#c4271b}
/* Profile sheet */
dialog.profile{width:min(520px,94vw);max-height:90vh;border:0;border-radius:18px;padding:0;overflow:auto;box-shadow:0 30px 80px #0000003d}
.profile-head{position:relative;display:flex;align-items:center;gap:16px;padding:26px 26px 20px;background:linear-gradient(180deg,#eef3ee,#fff)}
.profile-head h3{font-family:var(--ui);font-size:19px;font-weight:600}
.profile-head p{font-size:13.5px;color:var(--muted);direction:ltr;text-align:right}
.profile-head small{display:block;margin-top:2px}
.icon-close{position:absolute;top:14px;inset-inline-end:14px;min-height:0;width:32px;height:32px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:#0000000d;color:var(--muted)}
.profile-body{padding:6px 26px 24px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:6px 0 8px}
.stats div{background:#f5f7f2;border-radius:12px;padding:12px;text-align:center;display:grid}
.stats strong{font-family:var(--naskh);font-size:26px;color:var(--green);line-height:1.3}
.stats span{font-size:12.5px;color:var(--muted)}
.settings-group{padding:16px 0;border-top:1px solid #eef0ea;display:grid;gap:10px}
.settings-group h4{margin:0;font-size:14px;font-weight:600}
.settings-actions{display:flex;justify-content:flex-start}
.settings-note{padding:14px 0}
.danger-zone{border-top:1px solid #eef0ea}
.destructive-link{border:0;background:transparent;color:#c4271b;padding:4px 0;min-height:0;justify-self:start;font-weight:600}
.destructive-link:hover{background:transparent;text-decoration:underline}
/* Analyse tab */
/* overview: a photograph of the reading desk carries the way into analysis */
.analyze-cta{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:16px;min-height:210px;border-radius:18px;padding:30px 34px;margin-bottom:26px;overflow:hidden;
  background:linear-gradient(to left,#f6f3eaf2 0%,#f6f3eacc 38%,#f6f3ea33 62%,transparent 78%),url(/static/img/overview-analyze-1680-v2.webp) left center/cover no-repeat;box-shadow:0 1px 2px #1c302c0d,0 12px 30px #1c302c14}
.analyze-cta h3{font-size:30px;color:var(--green-deep)}
.analyze-cta p{color:#3d4f48;font-size:15px;margin-top:4px;max-width:42ch}
.analyze-cta .primary{font-weight:600}
.ai-note{margin-top:12px;font-size:12.5px;color:#7a5c2b;background:#fbf5e8;border-radius:8px;padding:8px 12px}
.my-history{margin-top:8px}
.my-history .card-head{margin-bottom:12px}
.h-item{display:grid;grid-template-columns:1fr auto;background:var(--surface);border-radius:14px;box-shadow:0 1px 2px #1c302c0d,0 6px 18px #1c302c0a;margin-bottom:10px;overflow:hidden}
.h-main{border:0;border-radius:0;background:transparent;text-align:right;padding:14px 18px;min-height:0;display:grid;gap:4px}
.h-main:hover{background:#fafbf8}
.h-main time{font-size:12px;color:var(--muted)}
.h-main p{font-family:var(--naskh);font-size:16.5px;line-height:1.8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.h-tags{display:flex;flex-wrap:wrap;gap:6px}
.icon-btn{align-self:start;margin:10px 10px 0 0;border:0;background:transparent;color:var(--muted);min-height:0;width:36px;height:36px;padding:0;border-radius:50%;display:grid;place-items:center}
.icon-btn:hover{background:var(--red-tint);color:var(--red)}
.h-detail{grid-column:1/-1;padding:4px 18px 18px;border-top:1px solid #eef0ea}
.more-btn{display:block;margin:8px auto 0}
.empty-art{display:grid;justify-items:center;gap:10px;padding:24px 16px;text-align:center;color:var(--muted)}
.empty-art img{width:min(280px,70%);height:auto}
.feedback{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:14px;font-size:13.5px;color:var(--muted)}
.feedback button{font-weight:400;min-height:34px;padding:4px 16px;border-radius:7px;font-size:13.5px}
.feedback button.chosen{background:var(--green);border-color:var(--green);color:#fff}
@media(max-width:760px){.analyze-cta{padding:22px;min-height:0;background:linear-gradient(#f6f3eaeb,#f6f3eaeb),url(/static/img/overview-analyze-1680-v2.webp) left center/cover no-repeat}.stats strong{font-size:22px}.profile-head{padding:22px 18px 16px}.profile-body{padding:4px 18px 20px}}

/* Modern, thin scrollbars */
*{scrollbar-width:thin;scrollbar-color:#c5cec4 transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#c5cec4;border-radius:10px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#9fae9e;border:3px solid transparent;background-clip:content-box}

/* Header: sidebar toggle and where you are */
@media(min-width:761px){#nav-backdrop{display:none}} /* on a phone it is the menu drawer's veil */
.crumbs{display:flex;align-items:center;gap:12px}
.nav-toggle{min-height:0;width:38px;height:38px;padding:0;border:0;border-radius:10px;background:transparent;color:var(--muted);display:grid;place-items:center}
.nav-toggle:hover{background:#ebefe9;color:var(--ink)}
/* Collapsed sidebar: an icon rail. The menu narrows in one motion; the words fade and are clipped as it goes, while
   the emblem, the icons and the avatar glide only a few pixels to the rail's middle, so nothing jumps. */
.sidebar,main{transition:width .4s var(--ease-sheet),margin .4s var(--ease-sheet),padding .4s var(--ease-sheet)}
.brand{overflow:hidden;transition:padding .4s var(--ease-sheet)}
.brand h1{white-space:nowrap;transition:opacity .22s ease}
nav button{white-space:nowrap;overflow:hidden;transition:background-color var(--fade),color .22s ease,padding .4s var(--ease-sheet)}
.account-chip{overflow:hidden;transition:background-color var(--fade),padding .4s var(--ease-sheet)}
.account-text,.account-chip>svg{transition:opacity .22s ease}
body.nav-collapsed .sidebar{width:76px;padding-inline:12px}
body.nav-collapsed main{margin-right:76px}
body.nav-collapsed .brand{padding-inline:3px 0}
body.nav-collapsed .brand h1,body.nav-collapsed .account-text,body.nav-collapsed .account-chip>svg{opacity:0}
body.nav-collapsed nav button,body.nav-collapsed nav button:hover,body.nav-collapsed nav button.active{color:transparent;padding-inline:17px 0}
body.nav-collapsed .account-chip{padding-inline:6px 0}
/* on a phone the menu is a drawer that slides in (set here, after the rail's timing, so it is not overridden) */
@media(max-width:760px){.sidebar{transition:transform .42s var(--ease-sheet),visibility 0s linear .42s}}
/* Avatars can carry a photo */
.avatar-i{background-size:cover;background-position:center}
.avatar-i.has-photo{background-color:#e9eee8}

/* Overview: the method in a band of its own, over the library photograph */
.method-band{position:relative;margin-top:26px;border-radius:18px;overflow:hidden;color:#f3ead6;
  background:linear-gradient(#06231bcc,#06231be6),url(/static/img/method-library-1680-v2.webp) center/cover no-repeat}
.method-inner{padding:40px 36px;max-width:980px}
.method-inner h3{font-size:30px;color:#f6eedb}
.method-inner p{margin-top:8px;color:#d6e2da;font-size:15px;line-height:2;max-width:72ch}
.method-inner ol{list-style:none;margin:22px 0 0;padding:0;counter-reset:step;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.method-inner li{counter-increment:step;background:#ffffff12;border:1px solid #ffffff24;border-radius:12px;padding:14px;font-size:14px;line-height:1.8;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.method-inner li::before{content:counter(step) "- ";display:block;color:#e7cf9f;font-weight:600;margin-bottom:2px}
@media(max-width:1100px){.method-inner ol{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Analysis page */
.field-title{display:block;font-size:14.5px;font-weight:600;margin:0 0 2px;color:var(--ink)}
.analyze .hint{display:block;color:var(--muted);font-size:12.5px;margin-bottom:6px}
.analyze textarea{margin-top:6px}
.segmented{border:0;padding:0;margin:16px 0 6px}
.segmented legend{padding:0;margin-bottom:6px}
.segmented label{display:inline-flex;margin:0 0 0 0;font-weight:400}
.segmented{display:flex;flex-wrap:wrap;gap:0}
.segmented legend{width:100%}
.segmented input{position:absolute;inset:0;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.segmented label{position:relative}
.segmented span{padding:8px 16px;border:1px solid #d3dbd1;background:#fff;font-size:13.5px;cursor:pointer;transition:background-color var(--fade),color var(--fade)}
.segmented label:first-of-type span{border-radius:0 10px 10px 0}
.segmented label:last-of-type span{border-radius:10px 0 0 10px;border-right:0}
.segmented input:checked+span{background:var(--green);border-color:var(--green);color:#fff}
.segmented input:focus-visible+span{outline:2px solid var(--green-2);outline-offset:2px}
.analysis-by{font-size:13px;color:var(--muted);margin:0 0 10px}
.abstain{display:flex;gap:14px;align-items:flex-start;background:#f7f8f3;border-radius:14px;padding:18px 20px}
.abstain img{flex:none;margin-top:2px}
.abstain h4{margin:0;font-size:16px;color:var(--green-deep)}
.abstain p{margin:4px 0 0;color:#3d4f48;font-size:14px;line-height:1.9}
.abstain .primary{margin-top:12px}

/* Profile page in the manner of Apple's settings */
.profile-page{max-width:620px;margin:8px auto 40px}
.profile-hero{display:grid;justify-items:center;text-align:center;gap:4px;padding:22px 0 6px}
.profile-photo{width:112px;height:112px;border-radius:50%;display:grid;place-items:center;font-size:44px;font-weight:600;color:#f3ead6;background:linear-gradient(145deg,#24614e,#164b3d);background-size:cover;background-position:center;box-shadow:0 8px 24px #1c302c24}
.profile-photo.has-photo{background-color:#e9eee8}
.photo-actions{display:flex;gap:18px;margin:6px 0 8px}
.photo-actions .quiet{font-size:14px}
.danger-text{color:#c4271b!important}
.profile-hero h2{font-family:var(--ui);font-size:26px;font-weight:600;line-height:1.4}
.group-title{font-family:var(--ui);font-size:13px;font-weight:500;color:var(--muted);margin:26px 16px 8px}
.group{background:var(--surface);border-radius:14px;overflow:hidden;box-shadow:0 0 0 .5px #0000001a,0 1px 2px #0000000a}
.group-row{display:flex;align-items:center;gap:12px;width:100%;min-height:54px;padding:12px 18px;border:0;border-radius:0;background:transparent;text-align:right;font-size:15px;color:var(--ink)}
.group-row:hover{background:#f7f8f5}
.group-row+.group-row{border-top:.5px solid #3c3c432e}
.group-row .value{margin-inline-start:auto;color:var(--muted);font-size:14px;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.group-row .chev{color:#c4c4c8;flex:none}
.group-row.destructive{justify-content:center;color:#d70015;font-weight:500}
.group-note{font-size:12.5px;color:var(--muted);margin:8px 16px 26px}
.stats-row{display:grid;grid-template-columns:repeat(3,1fr)}
.stats-row div{display:grid;justify-items:center;padding:16px 8px}
.stats-row div+div{border-inline-start:.5px solid #3c3c432e}
.stats-row strong{font-family:var(--naskh);font-size:28px;color:var(--green);line-height:1.3}
.stats-row span{font-size:12.5px;color:var(--muted)}
/* Edit sheet */
dialog.sheet{width:min(440px,92vw);border:0;border-radius:16px;padding:0;overflow:hidden;box-shadow:0 30px 80px #0000003d}
.sheet-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:12px 16px;border-bottom:.5px solid #3c3c432e;background:#f9f9f7}
.sheet-head h3{font-family:var(--ui);font-size:15.5px;font-weight:600;text-align:center}
.sheet-head .quiet{font-size:15px;padding:4px 2px}
.sheet-head .strong{font-weight:600}
.sheet-body{padding:6px 18px 20px}
.sheet-body .auth-error{margin-top:12px}


/* History: a tidy list; a row opens the analysis in a window; selection for deleting several */
.h-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.h-head>div:first-child{display:flex;align-items:baseline;gap:10px}
.h-tools{display:flex;align-items:center;gap:10px}
.h-select-tools{display:none;align-items:center;gap:12px}
.selecting .h-select-tools{display:flex}
.selecting [data-select=start]{display:none}
.h-select-tools .check{margin:0;font-size:13.5px}
.h-select-tools .danger{min-height:36px;padding:4px 16px}
.h-list{list-style:none;margin:0;padding:0;background:var(--surface);border-radius:14px;overflow:hidden;box-shadow:0 0 0 .5px #0000001a,0 4px 16px #1c302c0d}
.h-row{display:flex;align-items:stretch}
.h-row+.h-row{border-top:.5px solid #3c3c432e}
.h-pick{display:none;align-items:center;padding:0 16px 0 0;margin:0}
.h-pick input{width:18px;height:18px;accent-color:var(--green)}
.selecting .h-pick{display:flex}
.h-open{flex:1;min-width:0;display:grid;gap:6px;border:0;border-radius:0;background:transparent;text-align:right;padding:14px 18px;min-height:0}
.h-open:hover{background:#f7f8f5}
.h-text{font-family:var(--naskh);font-size:16.5px;line-height:1.8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.h-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--muted)}
.selecting .h-open{cursor:default}
.selecting .h-open:hover{background:transparent}
/* the analysis window */
.analysis-window{flex:1;min-height:0;overflow:auto;padding:20px 26px;overscroll-behavior:contain}
.asked h4{margin:0 0 6px;font-size:13.5px;color:var(--green)}
.asked blockquote{margin:0 0 18px;font-family:var(--naskh);font-size:19px;line-height:2;border-inline-start:3px solid var(--gold);padding-inline-start:16px}
.metrics-table{margin-top:10px}
.metrics-table th{background:transparent;font-weight:400;color:var(--ink);border-bottom:0;border-top:1px solid var(--line);padding:10px 14px}
.metrics-table td{padding:10px 14px}

/* ---------- The method: eleven steps and the two governing rules, as a path (analysis page and history window) ----------
   The rail is the path (numbered stations, ◆ for the governing rules); the panel shows one step at a time. */
.method{scroll-margin-top:16px}
.method-head{margin-bottom:24px} /* room for the live glow, which never reaches the header */
.method-head .analysis-by{margin:8px 2px 0}
.method-live{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;background:#f3f6f1;border:1px solid #dfe7df;color:var(--green-deep);font-size:14px}
.method-live p{flex:1}
.method-live .quiet{font-size:13.5px;white-space:nowrap}
.pulse{flex:none;width:10px;height:10px;border-radius:50%;background:var(--green);animation:pulse 1.6s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 #164b3d55}80%,100%{box-shadow:0 0 0 10px #164b3d00}}
/* One step at a time in the middle of the page, the path drawn above it */
.method-head,.method-body,.method+.feedback{max-width:900px;margin-inline:auto}
.method-body{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.trail{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;padding:0 2px;overflow-x:auto;scrollbar-width:none}
.trail::-webkit-scrollbar{display:none}
.tstep{min-height:0;height:auto;padding:0 0 4px;border:0;border-radius:0;background:transparent;display:flex;flex-direction:column;align-items:stretch;gap:7px;cursor:pointer;font-weight:400;text-align:center}
.tstep:disabled{cursor:default;opacity:1}
.tstep i{display:block;height:4px;border-radius:2px;background:#dfe5dd;transition:background-color .4s ease,height .25s ease}
.tstep span{font-size:11.5px;line-height:1.45;color:#98a39d;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .3s ease}
.tstep.done i,.tstep.draft i{background:#9fbfac}
.tstep.done span,.tstep.draft span{color:#4f7a64}
.tstep.core.done i{background:#d9bf8c}
.tstep.fail i{background:var(--red)}
.tstep.active i{background:linear-gradient(90deg,#dfe6de 0%,#c9a46a 50%,#dfe6de 100%);background-size:200% 100%;animation:sweep 1.4s linear infinite}
.tstep.active span{color:var(--amber)}
.tstep.current i{height:6px;margin-top:-1px;background:var(--green)}
.tstep.current span{color:var(--green-deep);font-weight:600}
.tstep.core.current i{background:var(--gold)}
.tstep:not(:disabled):hover span{color:var(--green)}
.tstep:not(:disabled):hover i{background:var(--green-2)}

@keyframes dot-done{50%{transform:scale(1.15)}}

.stage{position:relative;min-width:0;display:grid;grid-template-columns:minmax(0,1fr)}
.stage>.panel{grid-area:1/1;min-width:0}
.panel-body{overflow-wrap:break-word}
.panel{position:relative;background:var(--surface);border:1px solid #dfe6df;border-radius:16px;padding:26px 30px 16px;box-shadow:0 1px 2px #1c302c08,0 12px 32px #1c302c0d;overflow:hidden}
.panel-head{position:relative;margin-bottom:18px;padding-inline-end:96px}
.panel-head h3{font-size:28px;line-height:1.5;color:var(--green-deep)}
.panel-head p{margin-top:2px;color:var(--gold);font-size:14.5px}
.panel-body{position:relative}
.panel-nav{display:flex;justify-content:space-between;gap:12px;margin-top:22px;padding-top:12px;border-top:1px solid var(--line)}
.panel-nav .quiet{font-size:13.5px}
.panel-wait{display:flex;align-items:center;gap:12px;margin-top:12px;padding:20px 18px;border-radius:12px;background:#f7f8f4;color:var(--muted);font-size:14.5px}
.panel-wait.live{color:var(--green-deep)}
/* Moving on: the step read steps back and away to the right, the next one comes in from the left (and the reverse) */
/* Moving on: the next window opens out of its step in the list (drawn by the script); the one read fades where it is */
.panel.leaving{position:absolute;inset:0 0 auto 0;pointer-events:none;z-index:0;animation:panel-fade-out .26s ease forwards}
/* the fade is only for a window that has no step to open from; finishing an opening never replays it */
.panel.entering{z-index:1}
.panel.fade-in{animation:panel-fade-in .35s ease both}
.panel.entering .rise{animation:rise .55s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0)*40ms + 300ms)}
@keyframes panel-fade-out{to{opacity:0;transform:scale(.985)}}
@keyframes panel-fade-in{from{opacity:0}}
.panel-nav{align-items:center}
.panel-nav .primary{min-width:200px}
.waiting-next{display:inline-flex;align-items:center;gap:10px;color:var(--muted);font-weight:400;background:#f7f8f4;border-color:transparent}
.waiting-next:disabled{opacity:1;cursor:default}

/* The answer: where the steps arrive, set as a page of its own */
.panel.answer{padding:34px 40px 18px;border-color:#e5dcc5;background:linear-gradient(#fffdf7,#fff 240px)}
.answer-head{text-align:center;padding-bottom:22px;margin-bottom:22px;position:relative}
.answer-head::after{content:'';position:absolute;inset-inline:22%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);transform-origin:50% 50%}
.answer-head small{color:var(--gold);font-size:13px}
.answer-head h3{font-size:40px;line-height:1.4;color:var(--green-deep);margin-top:2px}
.answer-summary{max-width:46ch;margin:10px auto 0;font-family:var(--naskh);font-size:23px;line-height:1.9;color:var(--ink)}
.panel.answer section{margin-top:22px}
.panel.answer h4{margin:0 0 10px;font-size:14px;font-weight:600;color:var(--green-2)}
.panel.answer section>p{font-family:var(--naskh);font-size:19px;line-height:2}
.answer-origin{padding:16px 20px;border-radius:14px;background:#f6f8f3;border:1px solid #e3eae1}
.answer-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:dis}
.answer-steps li{position:relative;padding:14px 18px;padding-inline-start:58px;border:1px solid var(--line);border-radius:14px;background:#fff;counter-increment:dis}
.answer-steps li::before{content:counter(dis);position:absolute;inset-inline-start:16px;top:14px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--green);font-weight:600;font-size:14px}
.answer-steps p{font-family:var(--naskh);font-size:19px;line-height:1.9}
.answer-steps small{display:block;margin-top:4px;font-size:13px;color:var(--muted)}
.answer-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:18px}
.answer-grid section{margin-top:22px}
.answer-sources{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.answer-sources li{font-family:var(--naskh);font-size:18px;line-height:1.9}
.panel.answer .m-conf{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;font-size:14.5px}
.answer-question{margin:26px 0 0;padding:18px 22px;border-inline-start:3px solid var(--gold);border-radius:4px 14px 14px 4px;background:#fdf9ef;font-family:var(--naskh);font-size:21px;line-height:1.9;color:var(--green-deep)}
.answer-question small{display:block;font-family:var(--ui);font-size:12.5px;color:var(--amber);margin-bottom:2px}
.panel.answer .m-badges{margin-top:24px;justify-content:center}
/* its arrival: the gold rule is drawn, then the summary and the parts follow */
.panel.answer.entering .answer-head::after{animation:rule-draw .9s cubic-bezier(.16,1,.3,1) .35s both}
.panel.answer.entering .answer-head>*{animation:rise .7s cubic-bezier(.16,1,.3,1) both}
.panel.answer.entering .answer-head h3{animation-delay:.12s}
.panel.answer.entering .answer-summary{animation-delay:.24s}
@keyframes rule-draw{from{transform:scaleX(0)}}
@media(prefers-reduced-motion:reduce){.panel.fade-in,.panel.leaving,.panel.entering .rise,.panel.answer.entering .answer-head>*,.panel.answer.entering .answer-head::after{animation:none}}
.none{color:#a3ada8}
.m-empty{color:var(--muted);font-size:14px}
.m-foot{margin-top:14px;font-size:13px;color:var(--muted)}
.m-sub{margin:20px 0 10px;font-size:15px;color:var(--green-deep)}

/* 1. framing */
.m-asked{margin:0 0 14px;padding:12px 16px;border-radius:12px;background:#f7f8f4;border:1px solid var(--line);font-family:var(--naskh);font-size:18px;line-height:2}
.m-rows{display:grid;gap:10px;margin:0}
.m-rows>div{display:grid;grid-template-columns:150px minmax(0,1fr);align-items:center;gap:16px;padding:11px 16px;border:1px solid var(--line);border-radius:12px;background:#fff}
.m-rows dt{color:var(--green-2);font-size:13.5px;font-weight:600}
.m-rows dd{margin:0;font-family:var(--naskh);font-size:18px;line-height:1.9}
.m-rows .m-hidden{background:#fbf6ec;border-color:#e6d1aa}
.m-rows .m-hidden dt{color:var(--amber)}
.m-rows .m-hidden dt::before{content:'◆';margin-inline-end:6px;font-size:11px}
.m-quotes{display:flex;flex-wrap:wrap;gap:4px 18px}
.m-q{color:var(--green-deep);font-size:17px}

/* 2. entities */
.m-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.m-tile{display:grid;align-content:start;gap:4px;padding:13px 16px;border:1px solid var(--line);border-radius:12px;background:#fff}
.m-tile b{font-size:14.5px;color:var(--ink)}
.m-tile span{font-family:var(--naskh);font-size:16.5px;line-height:1.8;color:#3d4f48}
.m-tile.empty{background:#fafbf8}
.m-tile.empty span{color:#b0b9b4}

/* 3 and 4. texts and their checks */
.m-texts{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.m-text{padding:13px 16px;border:1px solid var(--line);border-radius:12px;background:#fff}
.m-text.excluded{border-color:#ebc4bd;background:#fdf7f5}
.m-text-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.m-kind{font-size:13px;font-weight:600;color:var(--green-2)}
.m-badge{font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap}
.m-badge.verified{color:var(--green)}
.m-badge.excluded{color:var(--red)}
.m-badge.mismatch,.m-badge.unchecked,.m-badge.unavailable{color:var(--amber)}
.m-badge.checking::before{content:'';display:inline-block;width:7px;height:7px;margin-inline-end:6px;border-radius:50%;background:currentColor;animation:blink 1s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
.m-text-quote{margin:8px 0 2px;font-family:var(--naskh);font-size:18px;line-height:2}
.m-claim{font-size:13px;color:var(--muted)}
.m-found{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin-top:8px;padding-top:8px;border-top:1px dashed #d7e1d9;font-size:13.5px;color:var(--green-deep)}
.m-found a{display:inline-flex;align-items:center;gap:4px;color:var(--green);font-size:13px}
.m-mushaf{margin-top:8px;padding:10px 14px;border-radius:10px;background:#f6f3ea;font-family:var(--naskh);font-size:20px;line-height:2.1;color:var(--green-deep)}
.m-check-note{margin-top:6px;font-size:13px;color:var(--amber)}
.m-text.excluded .m-check-note{color:var(--red)}
.m-note{margin-top:14px;padding:12px 16px;border-radius:12px;background:#f7f8f4}
.m-note b{font-size:13.5px;color:var(--green-2)}
.m-note p{margin-top:2px;font-family:var(--naskh);font-size:17px;line-height:1.9}

/* 4. gathering: the question at the centre, what was gathered around it */
.m-hub{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:". top ." "tr center tl" "br center bl" ". bottom .";gap:16px 20px;align-items:center}
.hub-node{position:relative;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;text-align:center}
.n-top{grid-area:top}.n-tr{grid-area:tr}.n-tl{grid-area:tl}.n-br{grid-area:br}.n-bl{grid-area:bl}.n-bottom{grid-area:bottom}
.hub-center{grid-area:center;align-self:stretch;display:grid;align-content:center;gap:4px;padding:16px;border-radius:16px;background:var(--soft);border:1.5px solid #b6cebd;text-align:center}
.hub-center b{font-family:var(--naskh);font-size:22px;color:var(--green-deep)}
.hub-center span{font-size:14px;line-height:1.8;color:var(--green-deep)}
.hub-node b{display:block;margin-bottom:4px;font-size:14px;color:var(--ink)}
.hub-node ul{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:13px;line-height:1.7;color:var(--muted);text-align:start}
.hub-node li{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hub-node.empty{background:#fafbf8}
.hub-node.empty span{color:#b0b9b4}
.n-top::after,.n-bottom::after{content:'';position:absolute;inset-inline-start:50%;height:16px;border-inline-start:1.5px solid #c3d5c8}
.n-top::after{top:100%}
.n-bottom::after{bottom:100%}
.n-tr::after,.n-br::after,.n-tl::after,.n-bl::after{content:'';position:absolute;top:50%;width:20px;border-top:1.5px solid #c3d5c8}
.n-tr::after,.n-br::after{inset-inline-end:-21px}
.n-tl::after,.n-bl::after{inset-inline-start:-21px}

/* 5 and 6. the aspects, lit where they matter */
.m-cells{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.m-cell{display:grid;place-items:center;min-height:48px;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:14px;line-height:1.5;color:#7f8c85;text-align:center}
.m-cell.on{border-color:#8db39e;background:var(--soft);color:var(--green-deep);font-weight:600;box-shadow:0 0 0 3px #164b3d10}
.m-findings{display:grid;gap:8px;margin:16px 0 0}
.m-findings>div{display:grid;grid-template-columns:170px minmax(0,1fr);gap:14px;padding:10px 14px;border-radius:10px;background:#f7f8f4}
.m-findings dt{font-size:13.5px;font-weight:600;color:var(--green-2)}
.m-findings dd{margin:0;font-family:var(--naskh);font-size:17px;line-height:1.9}

/* 6. the semantic comparison */
.m-compare{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) minmax(0,1fr);gap:14px;align-items:center;margin-bottom:16px}
.m-side{display:grid;gap:4px;padding:16px;border:1px solid var(--line);border-radius:14px;background:#fff;text-align:center}
.m-side small{font-size:12px;color:var(--muted)}
.m-side b{font-family:var(--naskh);font-size:20px;color:var(--green-deep)}
.m-qs{display:grid;gap:8px}
.m-qa{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center;padding:9px 14px;border:1px solid var(--line);border-radius:12px;background:#fbfcfa}
.m-qa span{font-size:14px}
.m-qa p{grid-column:1/-1;font-size:13px;line-height:1.7;color:var(--muted)}
.ans{font-style:normal;font-size:14px;font-weight:600}
.ans.yes{color:var(--green)}
.ans.no{color:var(--red)}
.ans.maybe{color:var(--amber)}
.m-conclusion{margin-top:16px;padding:12px 16px;border-inline-start:3px solid var(--green);border-radius:10px;background:#f3f7f3;font-family:var(--naskh);font-size:18px;line-height:1.9}

/* ◆ the two governing rules */
.m-rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.rule-card{display:grid;justify-items:start;gap:4px;padding:18px 20px 16px;border:1px solid var(--line);border-radius:16px;background:#fff;transition:opacity .3s ease}
.rule-card h4{font-family:var(--naskh);font-size:22px;color:var(--green-deep)}
.rule-card p{font-size:13.5px;color:var(--muted)}
.rule-art{display:flex;align-items:center;justify-content:center;gap:14px;width:100%;padding:16px 0 12px}
.rule-art i{display:block;width:50px;height:50px;border:2.5px solid #93b3a1;border-radius:50%}
.rule-art .sq{border-radius:10px;border-color:var(--gold)}
.rule-art b{font-size:26px;font-weight:600;color:var(--gold)}
.rule-art .ne{color:var(--red)}
.rule-flag{font-size:13px;font-weight:600;color:var(--red)}
.rule-card.hit{border:1.5px solid #6f9f86;background:linear-gradient(#f3f8f4,#fff);box-shadow:0 10px 28px #164b3d14}
.rule-card.hit .rule-flag{color:var(--green)}
.rule-card.miss{opacity:.55}
.rule-pair{width:fit-content;margin:14px auto 0;padding:7px 18px;border:1px solid #c6d9cc;border-radius:12px;background:#fff;font-family:var(--naskh);font-size:17px;color:var(--green-deep)}
.m-fault{margin-top:18px;text-align:center}
.m-fault h4{font-family:var(--naskh);font-size:27px;line-height:1.6;color:var(--green)}
.m-fault p{max-width:62ch;margin:4px auto 0;font-size:15px;line-height:1.9}
.m-subp{margin-top:8px}
.m-bookrule{margin-top:18px;padding:14px 18px;border-radius:12px;background:#f6f3ea;border:1px solid #e9dcc2}
.m-bookrule b{font-size:13.5px;color:var(--amber)}
.m-bookrule p{margin:4px 0 6px;max-height:12.5em;overflow:auto;font-family:var(--naskh);font-size:17px;line-height:2}
.m-bookrule .quiet{font-size:13px}

/* 7 and 8. hypotheses, then their tests */
.m-hyps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hyp{display:grid;align-content:start;justify-items:start;gap:4px;padding:13px 16px;border:1px solid var(--line);border-radius:12px;background:#fff}
.hyp small{font-size:11.5px;color:#94a19a}
.hyp b{font-size:15px;line-height:1.6}
.hyp p{font-size:13px;line-height:1.7;color:var(--muted)}
.hyp.yes{border-color:#b6cebd}
.verdict-pill{font-size:13px;font-weight:600;margin:2px 0}
.verdict-pill.yes{background:var(--soft);color:var(--green)}
.verdict-pill.no{background:var(--red-tint);color:var(--red)}
.verdict-pill.maybe{background:var(--amber-tint);color:var(--amber)}
.m-motto{margin-top:18px;text-align:center;font-family:var(--naskh);font-size:22px;color:#98a59e}

/* 9. the argument map, from the objection to the conclusion */
.m-map{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 26px}
.map-node{position:relative;display:grid;align-content:start;gap:4px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;text-align:center}
.map-node b{font-size:14px}
.map-node span{font-size:13.5px;line-height:1.7;color:var(--muted)}
.map-node.gold{border-color:#e0c690;background:#fdf8ee}
.map-node.gold b{color:var(--amber)}
.map-node.end{border-color:#8db39e;background:var(--soft)}
.map-node.end b{color:var(--green)}
.map-node.n5{grid-row:2;grid-column:4}.map-node.n6{grid-row:2;grid-column:3}.map-node.n7{grid-row:2;grid-column:2}
.map-node.n1::after,.map-node.n2::after,.map-node.n3::after{content:'';position:absolute;top:50%;inset-inline-end:-27px;width:26px;border-top:1.5px solid #b5cabb}
.map-node.n4::after{content:'';position:absolute;top:100%;inset-inline-start:50%;height:30px;border-inline-start:1.5px solid #b5cabb}
.map-node.n5::after,.map-node.n6::after{content:'';position:absolute;top:50%;inset-inline-start:-27px;width:26px;border-top:1.5px solid #b5cabb}

/* 10. the critical reviewer */
.m-critic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cq{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;align-items:start;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff}
.cq .mark{grid-row:span 2;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#eef1ed;color:var(--muted);font-size:12px;font-weight:700}
.cq.ok .mark{background:var(--soft);color:var(--green)}
.cq.bad{border-color:#ebc4bd}
.cq.bad .mark{background:var(--red-tint);color:var(--red)}
.cq b{font-size:14.5px;font-weight:600}
.cq p{font-size:13px;line-height:1.7;color:var(--muted)}
.m-critic.pending .cq{opacity:.6}
.m-loop{display:flex;gap:12px;align-items:flex-start;margin-top:14px;padding:12px 16px;border-radius:12px;background:#fbf6ec;color:var(--amber)}
.m-loop svg{flex:none;margin-top:3px}
.m-loop b{font-size:14px}
.m-loop p{margin-top:2px;font-size:13.5px;color:#6d5a3a}
.m-verdict{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;font-family:var(--naskh);font-size:21px;text-align:center}
.m-verdict.ok{color:var(--green)}
.m-verdict.loop{color:var(--gold)}
.m-verdict.bad{font-family:var(--ui);font-size:14.5px;line-height:1.8;color:var(--amber)}

/* 11. the answer */
.m-answer{margin:0;border:1px solid #dfe6df;border-radius:14px;overflow:hidden;background:#fff}
.m-answer>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:13px 18px;align-items:start}
.m-answer>div+div{border-top:1px solid var(--line)}
.m-answer dt{padding-top:4px;font-size:13.5px;font-weight:600;color:var(--green-2)}
.m-answer dd{margin:0;font-family:var(--naskh);font-size:18px;line-height:1.95}
.m-steps{margin:0;padding-inline-start:1.2rem;display:grid;gap:6px}
.m-steps small{display:block;font-family:var(--ui);font-size:12.5px;line-height:1.7;color:var(--muted)}
.m-answer dd.m-conf{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;font-family:var(--ui);font-size:14.5px}
.conf-track{position:relative;flex:none;width:160px;height:8px;border-radius:999px;background:#e6ebe6;overflow:hidden}
.conf-track i{position:absolute;inset-block:0;inset-inline-start:0;width:0;border-radius:999px;background:linear-gradient(to left,var(--green),#6aa385);transition:width .8s cubic-bezier(.2,.7,.2,1)}
.m-badges{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:14px}
.m-badges span{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.m-badges .b-gold{color:var(--amber)}
.m-badges .b-ok{color:var(--green);font-weight:600}
.m-badges .b-warn{color:var(--red);font-weight:600}
.m-badges .b-wait{color:var(--amber)}

/* inside the history window */
.method.in-window{margin-top:0}
.method+.feedback,.method.in-window~.feedback{margin-top:16px}

/* Overview: the band shows the path itself */
.method-inner ol.path{grid-template-columns:repeat(6,minmax(0,1fr))}
.method-inner .path li::before{content:none}
.method-inner .path li{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.method-inner .path li.core{background:#e7cf9f1c;border-color:#e7cf9f5c}

/* Landing: how Manhaj thinks when an objection arrives */
.way-close{max-width:820px;margin:22px auto 0;text-align:center;font-family:var(--naskh);font-size:22px;color:var(--green)}

@media(max-width:1100px){
  .method-inner ol.path{grid-template-columns:repeat(3,minmax(0,1fr))}
  .m-hyps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:980px){
  .m-map{grid-template-columns:1fr;gap:22px}
  .map-node.n5,.map-node.n6,.map-node.n7{grid-row:auto;grid-column:auto}
  .map-node::after,.map-node.n1::after,.map-node.n2::after,.map-node.n3::after,.map-node.n5::after,.map-node.n6::after{top:100%;inset-inline-start:50%;inset-inline-end:auto;width:0;height:22px;border-top:0;border-inline-start:1.5px solid #b5cabb}
  .map-node.n7::after{content:none}
}
@media(max-width:860px){
  .method-body{gap:10px}
  .panel.answer{padding:22px 16px 12px}
  .answer-head h3{font-size:30px}
  .answer-summary{font-size:19px}
  .answer-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .answer-steps li{padding-inline-start:50px}
  .panel-nav .primary{min-width:0}
  .panel{padding:18px 16px 12px}
  .panel-head{padding-inline-end:64px;margin-bottom:14px}
  .panel-head h3{font-size:22px}
  .panel-nav{flex-direction:column-reverse;align-items:stretch}
  .panel-nav .quiet{text-align:start}
  .m-rows>div,.m-findings>div,.m-answer>div{grid-template-columns:minmax(0,1fr);gap:2px}
  .m-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .m-hub{grid-template-columns:minmax(0,1fr);grid-template-areas:"center" "top" "tr" "tl" "br" "bl" "bottom";gap:10px}
  .hub-node::after{content:none!important}
  .m-cells{grid-template-columns:repeat(2,minmax(0,1fr))}
  .m-compare,.m-rules,.m-critic{grid-template-columns:minmax(0,1fr)}
  .m-hyps{grid-template-columns:minmax(0,1fr)}
  .method-inner ol.path{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* Landing: the path beside a deck of example windows; the reader moves from one step to the next */
@media(max-width:980px){
}

.panel-ord{display:block;font-size:12.5px;color:var(--muted);margin-bottom:2px}
.panel.core .panel-ord{color:var(--amber)}
.panel-head{padding-inline-end:0}

/* The live header: which step, how far along, how long */
.progress{padding:14px 18px 12px;border:1px solid #dfe7df;border-radius:14px;background:#f5f8f3}
.progress-top{display:grid}
.progress-top small{display:block;font-size:12.5px;color:var(--muted)}
.progress-top b{display:block;font-family:var(--naskh);font-size:21px;line-height:1.6;color:var(--green-deep)}
.elapsed{font-variant-numeric:tabular-nums}
@keyframes sweep{to{background-position:-200% 0}}
.progress p{font-size:13px;color:var(--muted)}
.progress .quiet{font-size:13px}

/* A step being written */
.writing{display:grid;gap:10px;margin-top:6px;padding:18px;border-radius:12px;background:#f7f8f4}
.writing p{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--green-deep)}
.writing i{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,#e8ece6 0%,#f4f6f2 50%,#e8ece6 100%);background-size:200% 100%;animation:sweep 1.6s linear infinite}
.writing i:nth-child(3){width:86%}.writing i:nth-child(4){width:70%}.writing i:nth-child(5){width:48%}

/* Overview band and landing list: ordinal words, no numbered circles */
.method-inner .path li small{font-size:12px;color:#e7cf9f}
@media(max-width:860px){
  .progress-top b{font-size:18px}
}

/* Excerpts from the Shamela library */
.m-library{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.m-library li{padding:12px 16px;border:1px solid #e6dcc6;border-radius:12px;background:#fdfaf3}
.m-library blockquote{margin:6px 0;font-family:var(--naskh);font-size:17.5px;line-height:2;color:var(--ink)}
.m-library p{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-size:13px;color:var(--muted)}
.m-library p b{color:var(--green-deep);font-weight:600}
.m-library a,.m-web a{display:inline-flex;align-items:center;gap:4px;color:var(--green);font-size:13px}
.m-web{margin:0;padding-inline-start:1.1rem;font-family:var(--ui);font-size:14px}

/* A tab that opens after expert review: why, what opens it, how far along */
.gate{padding:28px 30px;border:1px solid #dfe6df;border-radius:16px;background:var(--surface);box-shadow:0 1px 2px #1c302c08,0 12px 32px #1c302c0d}
.gate h3{font-size:24px;color:var(--green-deep)}
.gate>p,.gate ol{max-width:86ch}
.gate>p{margin-top:6px;color:#3d4f48;line-height:1.9}
.gate ol{margin:16px 0 0;padding-inline-start:1.3rem;display:grid;gap:6px;line-height:1.8}
.gate-progress{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:20px 0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.gate-progress div{display:grid;justify-items:center;padding:12px 8px;background:#f8f9f5}
.gate-progress div+div{border-inline-start:1px solid var(--line)}
.gate-progress strong{font-family:var(--naskh);font-size:26px;color:var(--green);line-height:1.3}
.gate-progress span{font-size:12.5px;color:var(--muted)}
.gate-foot{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px}
.gate-foot p{flex:1 1 260px;font-size:13.5px;line-height:1.8;color:var(--muted)}

/* The notification card: the alert's own material and proportions, at the top of the window */
#notice{position:fixed;inset:16px auto auto 50%;transform:translateX(-50%);margin:0;border:0;padding:0;width:min(300px,calc(100vw - 48px));overflow:hidden;
  border-radius:16px;background:#f9f9f7eb;-webkit-backdrop-filter:saturate(180%) blur(30px);backdrop-filter:saturate(180%) blur(30px);
  box-shadow:0 14px 44px #00000030,0 0 0 .5px #0000001a;color:#1d1d1f;font-family:var(--ui);user-select:none;touch-action:none}
#notice .alert-body{padding:18px 18px 14px}
#notice .alert-body h3+p{margin-top:4px}
.alert-actions.one{grid-template-columns:1fr}
.alert-actions.one button{font-weight:600}

/* Sign-in in the manner of Apple's forms: filled fields, no browser tint, the password readable on demand */
.auth-card label{font-size:13.5px;font-weight:600;color:#1d1d1f;margin-top:14px}
.auth-card input{min-height:46px;border:1px solid transparent;border-radius:12px;background:#f2f2f4;padding:11px 14px;font-size:15.5px;color:#1d1d1f;box-shadow:none}
.auth-card input:hover{background:#ececef}
.auth-card input:focus{background:#fff;border-color:var(--green);box-shadow:0 0 0 4px #164b3d1f}
.auth-card input:-webkit-autofill,.auth-card input:-webkit-autofill:hover{-webkit-box-shadow:0 0 0 1000px #f2f2f4 inset;-webkit-text-fill-color:#1d1d1f;caret-color:#1d1d1f;transition:background-color 9999s ease-out}
.auth-card input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px #fff inset,0 0 0 4px #164b3d1f;border-color:var(--green)}
.auth-card input[dir=ltr]{direction:ltr;text-align:left}
.pw-field{position:relative}
.pw-field input{padding-right:48px}
.pw-toggle{position:absolute;top:50%;right:6px;transform:translateY(-50%);min-height:0;width:36px;height:36px;padding:0;border:0;border-radius:10px;display:grid;place-items:center;background:transparent;color:#86868b}
.pw-toggle:hover{background:#0000000a;color:#1d1d1f}
.pw-toggle .hide,.pw-toggle[aria-pressed=true] .show{display:none}
.pw-toggle[aria-pressed=true] .hide{display:inline-flex}
.auth-card #auth-submit{border-radius:12px;min-height:48px;font-size:16px}

/* Buttons with a quiet outline (header and closing invitation) */
button.outline{background:#fffefacc;border:1px solid #c9d2c8;color:var(--green-deep);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
button.outline:hover{background:#fffefa;border-color:var(--green)}

/* Landing: the method as a scene the reader steps into. Scrolling to it opens its frame to the whole screen and draws
   the windows closer; the steps play one after another; scrolling on closes the frame and the page goes on.
   Without the script, or for readers who prefer less motion, it stays a framed card in the page. */
.land-way{padding:24px 0 56px}
.way-stage{position:relative;isolation:isolate;width:min(1080px,calc(100% - 64px));margin:0 auto;border-radius:30px;overflow:hidden}
.way-scene{position:absolute;inset:0;z-index:-1;background:#f7f8f4 url(/static/img/tour-ground-2560.webp) center/cover no-repeat}
.tour{position:relative;padding:30px 34px 22px}
.land-way.immersive .way-scroll{height:calc(100svh + 120vh)}
.land-way.immersive .way-stage{position:sticky;top:0;width:100%;height:100svh;border-radius:0;
  clip-path:inset(calc(var(--c,1)*6%) calc(var(--c,1)*max(16px,50% - 540px)) round calc(var(--c,1)*32px))}
.land-way.immersive .way-scene{transform:scale(calc(1 + var(--e,0)*.06))}
.land-way.immersive .tour{height:100%;display:flex;flex-direction:column;justify-content:center;padding:24px 32px 22px;transform:scale(var(--s,.86))}
.land-way.immersive .deck{flex:none;width:100%;height:calc(100svh - 230px);min-height:380px;max-height:700px}
.land-way.immersive .tour-bar{opacity:var(--e,0)}
body.immersed .land-bar{transform:translateY(-100%)}
.tour-head{text-align:center;margin-bottom:18px;min-height:96px}
.tour-head small{font-size:13px;color:var(--muted)}
.tour-head h3{font-size:32px;line-height:1.5;color:var(--green-deep)}
.tour-head p{color:var(--gold);font-size:15px}
.tour-head.swap>*{animation:rise .5s cubic-bezier(.16,1,.3,1) both}
.tour-head.swap h3{animation-delay:40ms}
.tour-head.swap p{animation-delay:80ms}
.deck{position:relative;height:clamp(560px,66vh,660px);max-width:960px;margin:0 auto}
.win{position:absolute;inset:34px 0 0;display:flex;flex-direction:column;border-radius:22px;overflow:hidden;opacity:0;transform-origin:50% 0;
  background:#ffffffdb;-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 24px 60px #1c302c1c,0 2px 8px #1c302c0d,0 0 0 1px #ffffffcc inset;transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .35s ease}
.win-bar{flex:none;display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid #1c302c0f;font-size:13px;color:var(--muted)}
.win-bar b{color:#1d1d1f;font-weight:600}
.win-dots{display:flex;gap:7px}
.win-dots i{width:11px;height:11px;border-radius:50%;background:#1c302c1f}
.win-tag{margin-inline-start:auto;font-size:12px;color:var(--muted)}
/* while the tour plays the window is a picture (the page scrolls past it); paused, it can be read and scrolled */
.win-body{position:relative;flex:1;min-height:0;overflow:hidden;padding:24px 30px 30px;scrollbar-width:thin}
.win.long .win-body{-webkit-mask-image:linear-gradient(#000 calc(100% - 72px),transparent);mask-image:linear-gradient(#000 calc(100% - 72px),transparent)}
.tour.paused .win-body{overflow:auto}
.tour.paused .win.long .win-body{-webkit-mask-image:none;mask-image:none}
.win>*{transition:opacity .3s ease}
.win.behind>*{opacity:0}
/* the parts of the open window rise in one after another */
.win.front .rise{animation:rise .6s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0)*55ms + 120ms)}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}
.tour-bar{display:flex;align-items:center;gap:16px;max-width:960px;width:100%;margin:20px auto 0}
.tour-buttons{display:flex;gap:6px}
.tour-btn{min-height:0;width:40px;height:40px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:#ffffffcc;color:var(--green-deep);box-shadow:0 1px 3px #1c302c1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.tour-btn:hover{background:#fff}
.tour-btn.play{background:var(--green);color:#fff}
.tour-btn.next svg{transform:scaleX(-1)}
.tour-progress{flex:1;display:grid;grid-template-columns:repeat(12,1fr);gap:5px}
.seg{min-height:0;height:18px;padding:0;border:0;background:transparent;display:flex;align-items:center;cursor:pointer}
.seg i{display:block;width:100%;height:4px;border-radius:2px;background:#1c302c1f;overflow:hidden;position:relative}
.seg.done i{background:var(--green)}
.seg.now i::after{content:'';position:absolute;inset-block:0;inset-inline-start:0;width:0;background:var(--green);border-radius:2px;animation:tour-fill 5s linear forwards}
.tour.paused .seg.now i::after,.tour.waiting .seg.now i::after{animation-play-state:paused}
@keyframes tour-fill{to{width:100%}}
.tour-count{flex:none;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:44px;text-align:center}
@media(prefers-reduced-motion:reduce){.seg.now i{background:var(--green)}.win,.win.front .rise,.tour-head.swap>*{transition:none;animation:none}}

/* Landing: a formal invitation at the end */
.land-join{display:grid;justify-items:center;gap:10px;max-width:640px;margin:16px auto 56px;padding:44px 28px;text-align:center;border-radius:28px;background:#f7f8f4 url(/static/img/tour-ground-1280.webp) center/cover no-repeat;box-shadow:0 1px 2px #1c302c08,0 18px 48px #1c302c0f}
.land-join h2{font-size:32px;color:var(--green-deep)}
.land-join p{color:#3d4f48;font-size:15.5px;line-height:1.9;max-width:46ch}
.join-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:10px}

@media(max-width:760px){
  .way-stage{width:calc(100% - 32px);border-radius:22px}
  .way-scene{background-image:url(/static/img/tour-ground-1280.webp)}
  .tour{padding:20px 12px 16px}
  .land-way.immersive .way-scroll{height:calc(100svh + 110vh)}
  .land-way.immersive .tour{padding:14px 12px}
  .land-way.immersive .deck{height:calc(100svh - 196px);min-height:340px}
  .tour-head h3{font-size:24px}
  .tour-head{min-height:84px;margin-bottom:10px}
  .deck{height:clamp(480px,70vh,600px)}
  .win-body{padding:16px 16px 22px}
  .tour-bar{gap:10px}
  .tour-btn{width:36px;height:36px}
  .land-join{margin:8px 0 36px;padding:32px 18px}
  .land-join h2{font-size:26px}
}


/* ---------- Analyses as conversations: the list beside one open thread ----------
   The list of past analyses stands on the left with its own controls at its top (hide or show, new analysis), so
   the button and the list it moves are always on the same side. Hidden, the list folds into a slim rail that keeps
   those two buttons in the very same place; the change is one animated motion of the column, the rows fading as
   it narrows and coming back as it widens. Dragging the line between them sets the width. */
@property --side{syntax:'<length>';inherits:true;initial-value:0px}
.chat{--side:calc(var(--list-w,250px) + 39px);position:relative;display:grid;grid-template-columns:minmax(0,1fr) 15px var(--list-w,250px);column-gap:12px;align-items:start;margin-top:-10px;
  transition:grid-template-columns .42s var(--ease-sheet),--side .42s var(--ease-sheet)}
.chat.list-folded{--side:91px;grid-template-columns:minmax(0,1fr) 15px 52px}
/* The first screen's scholar's desk (an open book, a reed pen and inkwell, a balance) lies under the whole workspace,
   from the page's edge to the menu and from the header line to the foot, the list floating over it; a soft veil keeps
   the middle of the thread quiet for the question (--side moves the veil with the list). It fades as a thread opens. */
.chat::before{content:'';position:absolute;z-index:-1;inset:-16px -44px -64px -44px;pointer-events:none;opacity:0;transition:opacity .45s ease;
  background:linear-gradient(var(--bg),#f6f5f000 9%),radial-gradient(ellipse 58% 64% at calc(50% + var(--side) / 2) 44%,#faf9f5f0 0%,#faf9f5c4 52%,#faf9f500 82%),url(/static/img/analyze-desk-2560-v2.webp) center bottom/cover no-repeat}
.chat:has(>.thread>.thread-new)::before{opacity:1}
body.resizing .chat{transition:none}
.chat>.chat-list{grid-column:3;grid-row:1}
.chat>.chat-split{grid-column:2;grid-row:1}
.chat>.thread{grid-column:1;grid-row:1}
.chat-split{position:sticky;top:16px;align-self:stretch;max-height:calc(100vh - 32px);display:flex;justify-content:center;cursor:col-resize;touch-action:none;border-radius:4px}
/* no line is drawn between the floating list and the thread; it shows while the pointer is on it or it is dragged */
.chat-split::before{content:'';width:1px;height:100%;background:transparent;transition:background-color .2s ease,width .2s ease}
.chat-split::after{content:'';position:absolute;top:50%;width:5px;height:44px;margin-top:-22px;border-radius:3px;background:#c7d2c8;opacity:0;transition:opacity .2s ease,background-color .2s ease}
.chat-split:hover::before,.chat-split.dragging::before,.chat-split:focus-visible::before{width:2px;background:var(--green-2)}
.chat-split:hover::after,.chat-split.dragging::after,.chat-split:focus-visible::after{opacity:1}
.chat-split.dragging::after{background:var(--green-2)}
.chat-split:focus-visible{outline:0}
body.resizing,body.resizing *{cursor:col-resize!important;user-select:none}
.chat-list{position:sticky;top:16px;align-self:stretch;min-width:0;display:flex;flex-direction:column;gap:6px;max-height:calc(100vh - 32px);padding:8px;border-radius:18px;
  background:#fbfaf6;box-shadow:0 0 0 1px #1c302c12,0 1px 2px #1c302c0a,0 14px 34px #1c302c10;transition:background-color .45s ease}
/* frosted only over the desk picture: a blur costs the graphics card on every scroll, so plain paper gets none */
.chat:has(>.thread>.thread-new) .chat-list{background:#fbfaf6c4;-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4)}
.chat-list-head{position:relative;display:flex;align-items:center;min-height:36px;overflow:hidden}
.chat-list-head h3{min-width:0;overflow:hidden;padding-inline:9px 44px;font-family:var(--ui);font-size:14px;font-weight:600;line-height:1.4;color:#3d4d47;white-space:nowrap;transition:opacity .2s ease}
.chat-toggle{position:absolute;top:0;inset-inline-end:0;min-height:0;width:36px;height:36px;padding:0;border:0;border-radius:10px;display:grid;place-items:center;background:transparent;color:var(--muted)}
.chat-toggle:hover{background:#e6ebe4;color:var(--ink)}
.chat-new{display:flex;align-items:center;gap:8px;justify-content:flex-start;min-width:0;min-height:38px;padding:7px 9px;border-color:#d6ddd5;background:#fffefa;overflow:hidden;white-space:nowrap}
.chat-new svg{flex:none;color:var(--green)}
.chat-new span{transition:opacity .2s ease}
.chat-items{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;padding-bottom:8px;transition:opacity .22s ease .1s,visibility 0s linear 0s}
.chat-more{transition:opacity .2s ease}
/* the rail: the rows step aside at once, the words fade, the two buttons stay where they were */
.chat.list-folded .chat-list-head h3,.chat.list-folded .chat-new span{opacity:0}
.chat.list-folded .chat-new{border-color:transparent;background:transparent} /* in the rail both buttons are bare icons */
.chat.list-folded .chat-new:hover{background:#e6ebe4}
.chat.list-folded .chat-items,.chat.list-folded .chat-more{opacity:0;visibility:hidden;transition:opacity .12s ease,visibility 0s linear .12s}
.chat-group{margin:16px 10px 4px;font-family:var(--ui);font-size:12px;font-weight:600;color:var(--muted)}
.chat-item{position:relative;display:flex;align-items:center;border-radius:10px;transition:background-color var(--fade)}
.chat-item:hover{background:#ecefe8}
.chat-item.active{background:#e3ebe2}
.chat-open{flex:1;min-width:0;display:grid;gap:1px;min-height:0;padding:8px 10px;border:0;background:transparent;text-align:right;font-weight:400}
.chat-open:hover{background:transparent}
.chat-title{font-size:13.5px;line-height:1.6;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-item.active .chat-title{font-weight:600;color:var(--green-deep)}
.chat-meta{display:flex;gap:10px;overflow:hidden;white-space:nowrap}
.chat-meta .pill{font-size:11.5px;font-weight:400;color:var(--muted)}
.chat-meta .pill.draft,.chat-meta .pill.rejected{color:var(--red)}
.chat-meta .pill.pending{color:var(--amber)}
.chat-del{flex:none;min-height:0;width:30px;height:30px;margin-inline-end:4px;padding:0;border:0;border-radius:8px;display:grid;place-items:center;background:transparent;color:#8a958f;opacity:0;transition:opacity var(--fade),background-color var(--fade),color var(--fade)}
.chat-item:hover .chat-del,.chat-item.active .chat-del,.chat-del:focus-visible{opacity:1}
.chat-del:hover{background:var(--red-tint);color:var(--red)}
@media(hover:none){.chat-del{opacity:.7}}
.chat-none{padding:14px 10px;font-size:13px;color:var(--muted);line-height:1.8}
.chat-more{align-self:center;font-size:13px}
.chat-scrim{display:none}

.thread{container:thread/inline-size;min-width:0;width:100%;display:flex;flex-direction:column;min-height:calc(100vh - 168px)}
/* the list's own buttons stand in for these on a wide screen; on a narrow one the list opens from the left, so
   its button stands on the left and a new analysis on the right */
.thread-head{position:relative;z-index:1;display:none;align-items:center;gap:10px;margin-bottom:10px}
.thread-new-btn,.thread-list-btn{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 12px;font-size:13.5px}
.thread-list-btn{margin-inline-start:auto}
.thread-new-btn svg{color:var(--green)}
.thread-list-btn svg{color:var(--muted)}
.thread-body{flex:1;display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-content:start}
.thread-error{justify-self:center;max-width:46ch;margin-top:12vh;text-align:center;display:grid;justify-items:center;gap:6px}
.thread-error h3{font-size:22px;color:var(--green-deep)}
.thread-error p{color:var(--muted);line-height:1.8}
.thread-error button{margin-top:10px}

/* the first screen: one question, one box */
.thread-new{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 24px 9vh}
.thread-new img{margin-bottom:10px}
.thread-new h2{font-size:34px;color:var(--green-deep)}
.thread-new>p{max-width:52ch;margin-top:6px;color:var(--muted);line-height:1.9}
.thread-new .ai-note{margin-top:18px;max-width:640px;background:transparent;padding:0;color:var(--muted)}
.thread-try{width:100%;max-width:720px;margin-top:22px;display:grid;gap:6px;text-align:right}
.thread-try h4{margin:0 4px 2px;font-family:var(--ui);font-size:12.5px;font-weight:600;color:var(--muted)}
.thread-try button{min-height:0;padding:11px 16px;border:1px solid var(--line);border-radius:12px;background:#fffefa;font-weight:400;font-family:var(--naskh);font-size:16.5px;line-height:1.8;text-align:right;color:var(--ink)}
.thread-try button:hover{border-color:#b9c9bd;background:#fff}

/* the box you write in, as in a chat: grows with the text, Enter sends */
.composer{position:relative;width:100%;display:flex;align-items:flex-end;gap:10px;padding:10px 10px 10px 12px;border:1px solid #d6ddd5;border-radius:20px;background:#fff;box-shadow:0 2px 6px #1c302c0a,0 14px 36px #1c302c12;transition:border-color var(--fade),box-shadow var(--fade)}
.composer:focus-within{border-color:#9fbaa9;box-shadow:0 2px 6px #1c302c0a,0 14px 36px #1c302c17,0 0 0 4px #164b3d10}
.composer textarea{flex:1;min-height:28px;max-height:240px;border:0;padding:6px 6px;resize:none;background:transparent;font-family:var(--naskh);font-size:18px;line-height:1.8;box-shadow:none}
.composer textarea:focus{box-shadow:none;border:0}
.composer .send{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;min-width:40px;padding:0 12px;border-radius:12px}
.composer.big{flex-direction:column;align-items:stretch;max-width:720px;margin-top:26px;padding:14px 14px 12px}
.composer.big textarea{min-height:96px;font-size:19px}
.composer-bar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.composer-bar .send{padding:0 18px}
.segmented.small{margin:0}
.segmented.small span{padding:5px 12px;font-size:12.5px}
.composer-note{margin-top:6px;text-align:center;font-size:12px;color:var(--muted)}
.thread-foot{width:100%;margin:28px 0 0;padding-bottom:12px}

/* messages: the reader's question on its side, the answers in the page's own column */
.msg.me{justify-self:start;max-width:min(78%,640px);padding:12px 18px;border-radius:20px 20px 6px 20px;background:#e6ede4;color:var(--ink)}
.msg.me p{font-family:var(--naskh);font-size:18px;line-height:1.9;white-space:pre-wrap}
.msg.bot{min-width:0}
.turns{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;width:100%}
.turns:empty{display:none}
.md{max-width:82ch;font-family:var(--naskh);font-size:18px;line-height:2;color:var(--ink)}
.md>*+*{margin-top:10px}
.md h4{margin-top:18px;font-family:var(--naskh);font-size:20px;color:var(--green-deep)}
.md h4:first-child{margin-top:0}
.md ul,.md ol{margin:6px 0;padding-inline-start:1.4rem}
.md li+li{margin-top:4px}
.md strong{color:var(--green-deep)}
.md blockquote{margin:10px 0;padding:6px 16px;border-inline-start:3px solid var(--gold);background:#fdf9ef;border-radius:2px 10px 10px 2px}
.md code{font-family:var(--ui);font-size:14px;padding:1px 6px;border-radius:5px;background:#eef1ec}
.md hr{border:0;border-top:1px solid var(--line);margin:16px 0}
.md a{color:var(--green)}
.md-error{font-family:var(--ui);font-size:14px;color:var(--red)}
.dots{display:inline-flex;gap:5px;padding:10px 2px}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--green-2);opacity:.35;animation:dot 1.2s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{40%{opacity:1;transform:translateY(-3px)}}

/* While the analysis is written the window's edge glows softly, in the manner of Siri. The glow is a ring only (its
   middle is cut away), so no colour can show through a window that is still opening; its colours drift by hue and it
   breathes, both drawn by the graphics card. It steps aside while a window opens. The ring is a hairline and the
   halo reaches only about 16px, less than the space kept around the window, so it never runs over the header above,
   the list of steps beside it or the dividing line. */
.method.live .stage{position:relative;isolation:isolate}
.method.live .stage::before,.method.live .stage::after{content:'';position:absolute;z-index:-1;pointer-events:none;
  background:conic-gradient(from 210deg,#2f9e74,#86c9a8,#e7c47e,#ec9a8f,#b19be3,#6fb3e6,#2f9e74);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);transition:opacity .25s ease;will-change:filter}
.method.live .stage::before{inset:-1.5px;padding:1.5px;border-radius:17.5px;animation:glow-ring 7s linear infinite}
.method.live .stage::after{inset:-8px;padding:8px;border-radius:24px;animation:glow-soft 7s linear infinite}
.method.live .stage:has(>.panel.expanding)::before,.method.live .stage:has(>.panel.expanding)::after{opacity:0}
@keyframes glow-ring{to{filter:hue-rotate(360deg)}}
@keyframes glow-soft{0%{filter:blur(8px) hue-rotate(0deg) opacity(.32)}50%{filter:blur(8px) hue-rotate(180deg) opacity(.52)}100%{filter:blur(8px) hue-rotate(360deg) opacity(.32)}}
@media(prefers-reduced-motion:reduce){.method.live .stage::before{animation:none}.method.live .stage::after{animation:none;filter:blur(8px) opacity(.4)}}

@media(max-width:1280px){
  .chat,.chat.list-folded{grid-template-columns:minmax(0,1fr);gap:0;transition:none}
  .chat-split{display:none}
  .chat>.thread{grid-column:1}
  .chat,.chat.list-folded{--side:0px}
  .chat-list,.chat:has(>.thread>.thread-new) .chat-list{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none;align-self:auto}
  /* the drawer slides in from the left, where the list stands on a wide screen and where its button is; a fixed box
     moved past the edge does not widen the page */
  .chat-list{position:fixed;inset:0 auto 0 0;z-index:30;width:min(320px,86vw);max-height:none;padding:14px 12px;background:var(--surface);
    border-radius:0 18px 18px 0;box-shadow:24px 0 60px #0000002e;transform:translateX(-104%);visibility:hidden;
    transition:transform .42s var(--ease-sheet),visibility 0s linear .42s}
  .chat.list-open .chat-list{transform:none;visibility:visible;transition-delay:0s}
  .chat.list-folded .chat-list-head h3,.chat.list-folded .chat-new span{opacity:1}
  .chat.list-folded .chat-new{border-color:#d6ddd5;background:#fffefa}
  .chat.list-folded .chat-items,.chat.list-folded .chat-more{opacity:1;visibility:inherit} /* hidden with the closed drawer */
  .chat-scrim{display:block;position:fixed;inset:0;z-index:29;min-height:0;padding:0;border:0;border-radius:0;background:#0f1f1a47;opacity:0;visibility:hidden;
    transition:opacity .32s ease,visibility 0s linear .32s}
  .chat-scrim:hover{background:#0f1f1a47}
  .chat.list-open .chat-scrim{opacity:1;visibility:visible;transition-delay:0s}
  .thread-head{display:flex}
}
@media(max-width:760px){
  .thread-new h2{font-size:26px}
  .composer.big textarea{min-height:80px;font-size:17px}
  .composer-bar{flex-wrap:wrap}
  .msg.me{max-width:92%}
  .trail{grid-template-columns:repeat(12,96px);padding-bottom:2px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
}

/* A wide thread: the steps stand as a list at the right of the window, the current one marked; the question,
   the verdict, the feedback, the follow-up questions and the box below all share the window's width */
@container thread (min-width:1000px){
  .method-head,.method-body,.method+.feedback{max-width:none}
  .method-body{grid-template-columns:196px minmax(0,1fr);column-gap:28px;row-gap:0;align-items:start}
  .method-body>.trail{grid-column:1;grid-row:1;position:sticky;top:20px;display:flex;flex-direction:column;overflow:visible;padding:4px 0;-webkit-mask-image:none;mask-image:none}
  .method-body>.stage{grid-column:2;grid-row:1}
  .tstep{flex-direction:row;align-items:stretch;gap:12px;padding:0;text-align:right}
  .tstep i{order:2;flex:none;width:3px;height:auto;margin:0;border-radius:0}
  .tstep span{flex:1;padding:7px 0;font-size:13.5px;line-height:1.5}
  .tstep:first-child i{border-radius:2px 2px 0 0}
  .tstep:last-child i{border-radius:0 0 2px 2px}
  .tstep.current i{width:5px;height:auto;margin:0;border-radius:3px}
  .thread-body>.msg.me,.method-head,.msg.bot.analysis>[data-after],.turns,.thread-foot{margin-inline-start:224px}
  .turns,.thread-foot{width:auto}
}

@media(max-width:1100px){.chat::before{inset:-16px -24px -40px -24px}}
@media(max-width:760px){
  .thread-new{padding:16px 0 6vh}
  .chat::before{inset:-16px -16px -36px -16px;background:linear-gradient(var(--bg),#f6f5f000 9%),radial-gradient(ellipse 96% 74% at 50% 42%,#faf9f5f2 0%,#faf9f5d4 62%,#faf9f500 90%),url(/static/img/analyze-desk-1280-v2.webp) 20% bottom/cover no-repeat}
}