/* Redline — the review surface.
   The document's own styles are injected separately at run time; everything
   here is chrome, deliberately quiet so it never competes with the document. */

/* Bundled Naskh faces, served by the application rather than a font host, so
   they work offline and cannot be blocked. See web/fonts/README.md for why
   they exist and under what licence.

   Each is restricted to the Arabic blocks with unicode-range. Both faces carry
   Latin glyphs, so without this an Arabic fallback placed early in a stack
   would quietly supply the Latin text too — which is how the interface ended
   up in a serif the moment these were added. */
@font-face{
  font-family:"Scheherazade";
  src:url("/fonts/scheherazade-regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+10E60-10E7E,U+1EE00-1EEFF,U+200C-200F,U+2010-2011,U+061C;
}
@font-face{
  font-family:"Scheherazade";
  src:url("/fonts/scheherazade-bold.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+10E60-10E7E,U+1EE00-1EEFF,U+200C-200F,U+2010-2011,U+061C;
}
@font-face{
  font-family:"Amiri";
  src:url("/fonts/amiri-regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+10E60-10E7E,U+1EE00-1EEFF,U+200C-200F,U+2010-2011,U+061C;
}
@font-face{
  font-family:"Amiri";
  src:url("/fonts/amiri-bold.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+10E60-10E7E,U+1EE00-1EEFF,U+200C-200F,U+2010-2011,U+061C;
}

/* More faces to read in. The Arabic ones carry a unicode-range so they cannot
   supply Latin glyphs — several of them have Latin, and without the range they
   would quietly set the English half of a bilingual document too. The Latin
   ones need no range: none of them has an Arabic glyph, so Arabic falls
   through to whichever Arabic face is chosen. That fallthrough is what lets
   one stack serve both scripts.

   Every one is under the SIL Open Font License and served from this server —
   see the LICENSE files beside them. Nothing is fetched from Google at run
   time, so a reader's browsing is not reported anywhere. */

@font-face{
  font-family:"Noto Naskh Arabic";
  src:url("/fonts/noto-naskh-regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+10E60-10E7E,U+1EE00-1EEFF,U+200C-200F,U+2010-2011,U+061C;
}
@font-face{
  font-family:"Noto Naskh Arabic";
  src:url("/fonts/noto-naskh-regular-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+10E60-10E7E,U+1EE00-1EEFF,U+200C-200F,U+2010-2011,U+061C;
}
@font-face{
  font-family:"Aref Ruqaa";
  src:url("/fonts/aref-ruqaa-regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+10E60-10E7E,U+1EE00-1EEFF,U+200C-200F,U+2010-2011,U+061C;
}
@font-face{
  font-family:"Aref Ruqaa";
  src:url("/fonts/aref-ruqaa-regular-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+10E60-10E7E,U+1EE00-1EEFF,U+200C-200F,U+2010-2011,U+061C;
}
@font-face{
  font-family:"Reem Kufi";
  src:url("/fonts/reem-kufi-regular.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+10E60-10E7E,U+1EE00-1EEFF,U+200C-200F,U+2010-2011,U+061C;
}

@font-face{
  font-family:"Crimson Pro";
  src:url("/fonts/crimson-pro-regular.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Crimson Pro";
  src:url("/fonts/crimson-pro-italic.woff2") format("woff2");
  font-weight:400 700;font-style:italic;font-display:swap;
}
@font-face{
  font-family:"Gentium Book Plus";
  src:url("/fonts/gentium-regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Gentium Book Plus";
  src:url("/fonts/gentium-regular-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Gentium Book Plus";
  src:url("/fonts/gentium-italic.woff2") format("woff2");
  font-weight:400;font-style:italic;font-display:swap;
}
@font-face{
  font-family:"Source Serif 4";
  src:url("/fonts/source-serif-regular.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Source Serif 4";
  src:url("/fonts/source-serif-italic.woff2") format("woff2");
  font-weight:400 700;font-style:italic;font-display:swap;
}
@font-face{
  font-family:"Literata";
  src:url("/fonts/literata-regular.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Literata";
  src:url("/fonts/literata-italic.woff2") format("woff2");
  font-weight:400 700;font-style:italic;font-display:swap;
}

/* EB Garamond, for reading the Latin text in a Garamond while it is on the
   server. Variable, so one file covers the weight range. Latin only by
   coverage — it has no Arabic glyphs, which is what makes the pairing below
   work without a rule per script. */
@font-face{
  font-family:"EB Garamond";
  src:url("/fonts/eb-garamond-regular.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"EB Garamond";
  src:url("/fonts/eb-garamond-italic.woff2") format("woff2");
  font-weight:400 700;font-style:italic;font-display:swap;
}

/* Reading fonts: what the text is shown in here, which is not what the
   document says and never becomes what it says. The .docx keeps its own fonts;
   this is a stylesheet on top of the projection, and the export is made from
   the stored bytes, so there is nothing for it to leak into.

   One stack does both scripts, computed by the picker and set as a variable on
   the sheet. The Latin face is named first and has no Arabic glyphs, so Arabic
   falls through to the face after it — which is how font fallback already
   works, and needs no rule per script and no lang attribute the document may
   not carry.

   !important because the projection sets font-family per style, from the
   document. Overriding it is the entire point of this. */
/* Scoped by direction, because a bilingual document has two scripts and a
   choice about one is not a choice about the other. The projection marks
   Arabic paragraphs dir="rtl", which is the signal.

   A script whose face was left alone gets no rule at all — that is the whole
   point. A blanket rule replaced the font everywhere, and since the bundled
   Arabic faces carry a unicode-range, the untouched script fell through to a
   generic serif: choosing a Garamond quietly threw away the document's
   Arabic. */
.sheet.reading-rtl [dir="rtl"],
.sheet.reading-rtl [dir="rtl"] *{
  font-family:var(--reading-rtl) !important;
}
.sheet.reading-ltr [data-para-id]:not([dir="rtl"]),
.sheet.reading-ltr [data-para-id]:not([dir="rtl"]) *{
  font-family:var(--reading-ltr) !important;
}

/* Colour by style. The colour is a margin bar and a wash so faint it does not
   fight the text: a document under review has to stay readable, and coloured
   Arabic on a tint is not. */
.sheet.by-style [data-style-slot]{
  border-inline-start:3px solid var(--style-colour,var(--rule));
  padding-inline-start:.5rem;
  background:color-mix(in oklab,var(--style-colour,var(--rule)) 7%,transparent);
}
.sheet.by-style [data-style-slot="0"]{--style-colour:#2a78d6}
.sheet.by-style [data-style-slot="1"]{--style-colour:#eb6834}
.sheet.by-style [data-style-slot="2"]{--style-colour:#1baf7a}
.sheet.by-style [data-style-slot="3"]{--style-colour:#eda100}
.sheet.by-style [data-style-slot="4"]{--style-colour:#e87ba4}
.sheet.by-style [data-style-slot="5"]{--style-colour:#008300}
.sheet.by-style [data-style-slot="6"]{--style-colour:#4a3aa7}
.sheet.by-style [data-style-slot="7"]{--style-colour:#e34948}
.sheet.by-style [data-style-slot="other"]{--style-colour:#8b93a1}

/* The document as proposed. Marked so what is new and what moved can be seen
   at a glance, in the two colours the review panel already uses for the same
   two things. */
.preview-bar{
  position:sticky;top:0;z-index:3;display:flex;gap:.75rem;align-items:center;
  padding:.5rem .8rem;margin-bottom:.6rem;border-radius:6px;
  background:var(--amber-soft);color:var(--amber);font-size:.8rem;
  box-shadow:var(--shadow)
}
.preview-bar span{flex:1}
.sheet.preview [data-proposed]{
  border-inline-start:3px solid var(--mark);padding-inline-start:.5rem;
  background:color-mix(in oklab,var(--mark) 8%,transparent)
}
.sheet.preview [data-proposed="added"]{--mark:var(--ok)}
.sheet.preview [data-proposed="changed"]{--mark:var(--amber)}
.sheet.preview{caret-color:transparent}
.sheet.preview span.r{cursor:default}

/* The paragraph being typed in. Enough to see which one it is, and no more:
   a box around the text would move it, and text that moves as you start to
   type is the thing that makes an editor feel wrong. */
.sheet [data-para-id].editing{
  outline:2px solid var(--accent-soft);outline-offset:3px;border-radius:3px;
  background:var(--surface)
}
.sheet [data-para-id].editing:focus{outline-color:var(--accent)}
.sheet [data-para-id][contenteditable="true"]{cursor:text}

/* A paragraph-shaped place to type, where the new paragraph would go. Dressed
   like its neighbour — it carries their class and direction — and marked as
   not yet part of anything. */
.sheet .draft{
  outline:2px dashed var(--ok);outline-offset:3px;border-radius:3px;
  min-height:1.4em;background:color-mix(in oklab,var(--ok) 5%,transparent)
}
.sheet .draft:empty::before{
  content:"New paragraph — type it, Enter for another, Escape to drop it";
  color:var(--ink-faint);font-size:.8rem;font-style:italic
}

/* The key. Sticky, because a key that scrolls away is not a key. */
.style-key{
  position:sticky;top:0;z-index:3;
  display:flex;flex-wrap:wrap;gap:.15rem .8rem;align-items:center;
  padding:.45rem .8rem;margin-bottom:.6rem;
  background:var(--surface);border:1px solid var(--rule-soft);border-radius:6px;
  font-size:.75rem;color:var(--ink-soft);box-shadow:var(--shadow)
}
.key-item{display:inline-flex;align-items:center;gap:.3rem}
.key-dot{width:.62rem;height:.62rem;border-radius:2px;flex:none;
  display:inline-block;background:var(--rule)}
.key-dot.other{background:#8b93a1}
.key-n{color:var(--ink-faint);font-size:.7rem}
.style-key .chip-x{margin-inline-start:auto}

:root{
  --paper:#eef1f4; --surface:#fff; --surface-2:#f6f8fa;
  --ink:#15181d; --ink-soft:#4f5866; --ink-faint:#7b8593;
  --rule:#d6dbe2; --rule-soft:#e6eaef;
  --accent:#1f4e9c; --accent-soft:#e3ebf8;
  --ok:#2c6a50; --ok-soft:#dcece4;
  --danger:#b0392b; --danger-soft:#f6e2df;
  --amber:#8a5a1a; --amber-soft:#f7ecd9;
  --shadow:0 1px 2px rgba(21,24,29,.06), 0 10px 28px -20px rgba(21,24,29,.4);
  /* Arabic in the chrome — workspace names, the outline, comments — needs a
     real Arabic face too, not the browser's default for an unknown script. */
  --ui:"IBM Plex Sans","Scheherazade",ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;
  --mono:"IBM Plex Mono","Scheherazade",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
/* A display value in a rule beats the user agent's [hidden] rule, so anything
   given display:flex would stay visible while marked hidden. */
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--ui);font-size:14px;line-height:1.5}
button{font:inherit;cursor:pointer}
a{color:var(--accent)}

/* ---------- shell ---------- */
.app{display:grid;grid-template-rows:auto 1fr;height:100vh}
.app.with-warning{grid-template-rows:auto auto 1fr}
.warn{
  display:flex;align-items:center;gap:.75rem;
  background:var(--amber-soft);color:var(--amber);
  border-bottom:1px solid rgba(138,90,26,.22);
  padding:.3rem 1rem;font-size:.78rem;
}
.warn span{flex:1}
.warn-close{border:0;background:none;color:inherit;font-size:1rem;line-height:1;
  cursor:pointer;opacity:.6;padding:0 .2rem}
.warn-close:hover{opacity:1}
/* Not a caution — the app is broken until someone acts on it. */
.warn.bad{background:var(--danger-soft);color:var(--danger);
  border-bottom-color:rgba(150,40,40,.25);font-weight:500}
header.bar{
  display:flex;align-items:center;gap:.3rem;padding:.4rem .8rem;
  background:var(--surface);border-bottom:1px solid var(--rule);
  flex-wrap:wrap;row-gap:.35rem;
}
header.bar .brand{cursor:pointer;margin-right:.6rem}
header.bar .sep{width:1px;height:1.3rem;background:var(--rule);margin:0 .3rem}
header.bar .doc-name{
  font-size:.85rem;color:var(--ink-soft);display:flex;align-items:center;gap:.4rem;
  max-width:20rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:.4rem;
}
/* Menu buttons read as menus, not as pushbuttons. */
.menu > .btn{border-color:transparent;background:transparent;font-weight:500}
.menu > .btn:hover{background:var(--surface-2);border-color:transparent;color:var(--ink)}
/* A font is chosen by looking at it. The name goes on the left, the face
   itself on the right, in that face. */
.menu-item .tick{width:.9rem;flex:none;color:var(--accent)}
.menu-item .menu-label{flex:1;overflow:hidden;text-overflow:ellipsis}
.menu-item .menu-sample{
  flex:none;font-size:1.05rem;line-height:1.2;color:var(--ink-soft);
  max-width:9rem;overflow:hidden
}
.menu-item.checked{background:var(--accent-soft)}
.menu-item.checked .menu-label{font-weight:600}

.menu-heading{
  font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint);padding:.35rem .7rem .15rem;
}
.menu-sep{border:0;border-top:1px solid var(--rule-soft);margin:.25rem .3rem}
.brand{font-weight:600;letter-spacing:-.01em}
.brand span{color:var(--accent)}
.bar .spacer{flex:1}
.who{color:var(--ink-soft);font-size:.85rem}
.main{display:grid;grid-template-columns:250px minmax(0,1fr) 340px;min-height:0}
.pane{overflow-y:auto;min-height:0}
aside{background:var(--surface);border-right:1px solid var(--rule);padding:.9rem}
.side-right{background:var(--surface);border-left:1px solid var(--rule)}
@media (max-width:1100px){.main{grid-template-columns:1fr}aside,.side-right{display:none}}

.main.single{grid-template-columns:minmax(0,1fr)}
.people{max-width:52rem;margin:0 auto;padding:1.5rem}
.invite-row{display:grid;grid-template-columns:1fr 16rem auto;gap:.75rem;align-items:end}
.invite-row label{margin-top:0}
.invite-go{padding-bottom:1px}
@media (max-width:760px){.invite-row{grid-template-columns:1fr}}
.invite-link{display:flex;gap:.5rem;margin-top:.6rem}
.invite-link input{font-family:var(--mono);font-size:.78rem}
table.grid{width:100%;border-collapse:collapse;font-size:.88rem;
  background:var(--surface);border:1px solid var(--rule-soft);border-radius:6px;overflow:hidden}
table.grid th{
  text-align:left;padding:.5rem .75rem;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);
  border-bottom:1px solid var(--rule);font-weight:500;
}
table.grid td{padding:.55rem .75rem;border-bottom:1px solid var(--rule-soft);vertical-align:middle}
table.grid tr:last-child td{border-bottom:0}
table.grid td.mono{font-family:var(--mono);font-size:.8rem;color:var(--ink-soft)}
table.grid td.right{text-align:right}

/* ---------- controls ---------- */
.btn{
  border:1px solid var(--rule);background:var(--surface);color:var(--ink);
  padding:.4rem .7rem;border-radius:5px;font-size:.85rem;
}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{filter:brightness(1.1);color:#fff}
.btn.ok{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.btn.no{background:var(--danger-soft);border-color:var(--danger);color:var(--danger)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.small{padding:.2rem .5rem;font-size:.78rem}
input,textarea,select{
  font:inherit;width:100%;padding:.45rem .6rem;border:1px solid var(--rule);
  border-radius:5px;background:var(--surface);color:var(--ink);
}
input:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
label{display:block;font-size:.78rem;color:var(--ink-faint);margin:.7rem 0 .25rem;
  text-transform:uppercase;letter-spacing:.07em}

/* ---------- sign in ---------- */
.signin{display:grid;place-items:center;height:100vh;background:var(--paper)}
.card{
  background:var(--surface);border:1px solid var(--rule);border-radius:8px;
  padding:1.75rem;width:min(24rem,92vw);box-shadow:var(--shadow);
}
.card h1{margin:0 0 .25rem;font-size:1.4rem;letter-spacing:-.02em}
.card p.sub{margin:0 0 1rem;color:var(--ink-faint);font-size:.85rem}

/* ---------- lists ---------- */
.eyebrow{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);
  margin:0 0 .5rem;font-family:var(--mono)}
.doclist{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-direction:column;gap:2px}
.doclist button{
  width:100%;text-align:left;border:0;background:none;padding:.45rem .5rem;
  border-radius:5px;color:var(--ink);font-size:.88rem;
}
.doclist button:hover{background:var(--surface-2)}
.doclist button[aria-current="true"]{background:var(--accent-soft);color:var(--accent);font-weight:500}
.doclist button.archived{opacity:.5}
.ws{display:flex;gap:.35rem;margin-bottom:1rem}
.ws select{font-size:.85rem;padding:.35rem .5rem}
.btn.icon{min-width:2rem;padding:.25rem .5rem;font-size:.95rem;line-height:1.2}
.aside-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}
.aside-head .eyebrow{margin:0}
.invited{background:var(--surface-2);border-radius:6px;padding:.7rem .85rem;margin:0 0 1rem;font-size:.88rem}
.hint.mono{font-family:var(--mono);font-size:.7rem}
.doclist .meta{display:block;font-size:.72rem;color:var(--ink-faint);font-family:var(--mono)}

/* ---------- the library ---------- */
.library{padding:1.5rem 2rem 3rem;overflow-y:auto;position:relative}
.drop-veil{display:none}
.library.dragging .drop-veil{
  display:flex;position:absolute;inset:.75rem;z-index:30;
  align-items:center;justify-content:center;pointer-events:none;
  background:color-mix(in srgb, var(--accent-soft) 88%, transparent);
  border:2px dashed var(--accent);border-radius:12px;
}
.drop-veil-inner{display:flex;flex-direction:column;align-items:center;gap:.4rem;color:var(--accent)}
.drop-veil-inner .drop-icon{font-size:2rem}
.drop-veil-inner strong{font-size:1rem}
.library-head{display:flex;align-items:baseline;gap:.75rem;margin-bottom:1.1rem}
.library-head h1{margin:0;font-size:1.35rem;letter-spacing:-.02em}
.library-head .spacer{flex:1}

.dropzone{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;
  border:1.5px dashed var(--rule);border-radius:10px;background:var(--surface);
  padding:1.4rem;margin-bottom:1.5rem;cursor:pointer;text-align:center;
  transition:border-color .12s, background .12s;
}
.dropzone:hover{border-color:var(--accent);background:var(--accent-soft)}
.dropzone .drop-icon{font-size:1.4rem;color:var(--accent);line-height:1}
.dropzone strong{font-size:.92rem;font-weight:500}
/* Once there is something to look at, the invitation steps back. */
.dropzone.slim{
  flex-direction:row;gap:.5rem;padding:.55rem .9rem;margin-bottom:1.1rem;
  color:var(--ink-faint);border-color:var(--rule-soft);
}
.dropzone.slim strong{font-size:.82rem;font-weight:400}
.dropzone.slim .drop-icon{font-size:1rem}

.card-grid{
  display:grid;gap:.9rem;
  grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
}
.card-doc{
  background:var(--surface);border:1px solid var(--rule);border-radius:8px;
  padding:.85rem .95rem;cursor:pointer;display:flex;flex-direction:column;gap:.45rem;
  box-shadow:var(--shadow);transition:border-color .12s, transform .12s;
}
.card-doc:hover{border-color:var(--accent);transform:translateY(-1px)}
.card-doc:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.card-doc.archived{opacity:.6}
.card-doc h3{margin:0;font-size:.95rem;font-weight:600;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-top{display:flex;align-items:center}
.card-top .spacer{flex:1}
.doc-icon{color:var(--accent);font-size:1.1rem;line-height:1}
.card-meta{display:flex;gap:.3rem;flex-wrap:wrap}
.badge{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.05em;
  padding:.1rem .4rem;border-radius:3px;background:var(--surface-2);color:var(--ink-soft);
}
.badge.ver{background:var(--accent-soft);color:var(--accent)}
.badge.open{background:var(--amber-soft);color:var(--amber)}
.card-foot{margin:0;font-size:.74rem;color:var(--ink-faint)}
.card-doc .actions{margin-top:.3rem}

/* ---------- navigation ---------- */
.nav{display:flex;flex-direction:column;gap:.6rem;height:100%;min-height:0}
.nav input[type=search]{font-size:.85rem;padding:.4rem .55rem}
.nav-list{overflow-y:auto;min-height:0;display:flex;flex-direction:column;gap:1px}
.nav-item{
  width:100%;text-align:left;border:0;background:none;padding:.35rem .45rem;
  border-radius:4px;color:var(--ink-soft);font-size:.82rem;line-height:1.35;cursor:pointer;
  display:flex;flex-direction:column;gap:.1rem;
}
.nav-item:hover{background:var(--surface-2);color:var(--ink)}
.nav-item .nav-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:.88rem;line-height:1.5}
.nav-item .nav-alt{color:var(--ink-faint);font-size:.75rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-item.lvl1{font-weight:600;color:var(--ink);margin-top:.4rem}
.nav-item.lvl2{padding-left:.9rem}
.nav-item.lvl3{padding-left:1.5rem;font-size:.78rem}
.nav-item.lvl4{padding-left:2.1rem;font-size:.78rem}
.nav-item.hit{white-space:normal;font-size:.78rem;border-bottom:1px solid var(--rule-soft);
  border-radius:0;padding:.4rem .45rem}
.nav-item mark{background:var(--amber-soft);color:var(--amber);border-radius:2px}
.doc .p.flash{animation:flash 1.6s ease-out}
@keyframes flash{from{background:var(--amber-soft)}to{background:transparent}}

/* ---------- the line from a card to its place in the text ---------- */
.connectors{
  position:fixed;inset:0;z-index:25;pointer-events:none;
  opacity:0;transition:opacity .12s ease-out;
}
.connectors.on{opacity:1}
.conn-line{
  stroke:var(--accent);stroke-width:1.75;stroke-linecap:round;
  filter:drop-shadow(0 1px 2px rgba(31,78,156,.25));
}
.conn-line.offscreen{stroke-dasharray:5 4;opacity:.6}
.conn-dot{fill:var(--accent)}
.conn-dot.offscreen{fill:none;stroke:var(--accent);stroke-width:1.5}
.conn-chevron{stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){.connectors{transition:none}}

/* What the line points at, and the card it comes from. */
.doc .linked-target{
  background:var(--accent-soft);border-radius:2px;
  box-shadow:0 0 0 2px var(--accent-soft);
}
.doc p.linked-target{box-shadow:-3px 0 0 var(--accent)}
.item.pinned{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-soft)}
.item[tabindex]{cursor:pointer}
.item[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* ---------- proposal filters ---------- */
.filters{display:flex;gap:.3rem;flex-wrap:wrap;align-items:center;margin-bottom:.7rem}
.chip{
  border:1px solid var(--rule);background:var(--surface);color:var(--ink-soft);
  padding:.2rem .5rem;border-radius:99px;font-size:.75rem;cursor:pointer;
}
.chip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:500}
.chip .n{margin-left:.3rem;font-family:var(--mono);font-size:.68rem;opacity:.75}
.filters .author{width:auto;max-width:9rem;font-size:.75rem;padding:.15rem .35rem}
.bulk{display:flex;gap:.35rem;align-items:center;margin-bottom:.7rem}
.bulk .hint{flex:1}

/* Accepted and not in the document yet. It sits at the top of the panel where
   the accepting happens, because the Publish button is at the other end of
   the screen from the Accept buttons. */
.waiting{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  padding:.5rem .6rem;margin-bottom:.7rem;border-radius:6px;
  background:var(--ok-soft);color:var(--ok);font-size:.8rem
}
.waiting span{flex:1;min-width:9rem}
.linkish{border:0;background:none;padding:0;color:var(--accent);cursor:pointer;
  font:inherit;text-decoration:underline}

/* ---------- translations ---------- */
.pairs{display:flex;flex-direction:column;gap:.2rem}
.pair{display:flex;align-items:center;gap:.4rem;font-size:.78rem;
  padding:.25rem .4rem;border-radius:4px;background:var(--surface-2)}
.pair .mono{font-family:var(--mono);font-size:.72rem}
.pair .arrow{color:var(--ink-faint)}
.pair .hint{margin-left:auto}
.seg{margin:.3rem 0;font-size:.82rem;line-height:1.4}
.seg.source{padding-left:.5rem;border-left:2px solid var(--accent)}
.seg.target{padding-left:.5rem;border-left:2px solid var(--rule);color:var(--ink-soft)}

/* ---------- document ---------- */
/* Editing tools live on the menu bar. */
.tools{display:flex;align-items:center;gap:.25rem}
.style-picker{width:auto;min-width:10rem;max-width:14rem;font-size:.8rem;padding:.25rem .45rem}
.mark{min-width:1.9rem;padding:.22rem .4rem;font-weight:600}
.tools .mark:nth-of-type(2){font-style:italic}
.tools .mark:nth-of-type(3){text-decoration:underline}

/* Overflow menu */
.menu{position:relative}
.menu .more{font-size:1rem;line-height:1;padding:.2rem .5rem}
.menu-list{
  position:absolute;left:0;top:calc(100% + .3rem);z-index:40;
  min-width:14rem;max-width:min(22rem,calc(100vw - 1rem));
  background:var(--surface);border:1px solid var(--rule);border-radius:6px;
  box-shadow:var(--shadow);padding:.25rem;display:flex;flex-direction:column;
  overflow-y:auto;overscroll-behavior:contain;
}
.menu-item{
  display:flex;align-items:baseline;gap:.4rem;
  width:100%;text-align:left;border:0;background:none;
  padding:.35rem .55rem;border-radius:4px;font-size:.85rem;line-height:1.4;
  color:var(--ink);text-decoration:none;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.menu-item:hover{background:var(--surface-2)}
.menu-item.danger{color:var(--danger)}
.stage{padding:1.25rem;display:flex;justify-content:center}
.sheet{
  background:var(--surface);border:1px solid var(--rule);border-radius:4px;
  box-shadow:var(--shadow);padding:2.5rem 3rem;width:min(52rem,100%);
}
.story{margin-bottom:2rem}
.story + .story{border-top:1px dashed var(--rule);padding-top:1.5rem}
.story-label{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:1rem;
}
/* The document's own CSS governs .p and .s-* — these only add affordances. */
.doc .p{position:relative}
.doc .r{border-radius:2px;padding:0 1px;margin:0 -1px}
.doc .r:not(.locked):hover{background:var(--accent-soft);cursor:text}
.doc .r.locked{background:repeating-linear-gradient(45deg,transparent,transparent 4px,var(--surface-2) 4px,var(--surface-2) 8px);cursor:not-allowed}
.doc .r.proposed{background:var(--amber-soft);box-shadow:inset 0 -2px 0 var(--amber)}
.doc .r[contenteditable="true"]{background:#fff;outline:2px solid var(--accent);cursor:text}
.doc .p.commented{box-shadow:-3px 0 0 var(--accent)}
.doc .tab{display:inline-block;width:2em}
.doc .note-ref{color:var(--accent);font-size:.7em;vertical-align:super}
.doc .object{background:var(--surface-2);border:1px dashed var(--rule);padding:0 .3rem;
  font-family:var(--mono);font-size:.75rem;color:var(--ink-faint)}
.doc table.tbl{border-collapse:collapse;margin:.6rem 0}
.doc table.tbl td{border:1px solid var(--rule);padding:.3rem .5rem;vertical-align:top}

/* ---------- right panel ---------- */
.tabs{display:flex;border-bottom:1px solid var(--rule);position:sticky;top:0;background:var(--surface);z-index:4}
.tabs button{
  flex:1;border:0;background:none;padding:.6rem .4rem;color:var(--ink-soft);
  font-size:.85rem;border-bottom:2px solid transparent;white-space:nowrap;
}
.tabs .count{
  display:inline-block;margin-left:.35rem;padding:0 .35rem;border-radius:9px;
  background:var(--surface-2);color:var(--ink-soft);font-size:.7rem;
  font-family:var(--mono);vertical-align:.06em;
}
.tabs button[aria-selected="true"] .count{background:var(--accent);color:#fff}
.panel-head{
  display:flex;align-items:center;gap:.5rem;padding:.55rem .9rem;
  border-bottom:1px solid var(--rule);position:sticky;top:0;background:var(--surface);z-index:4;
}
.panel-head strong{font-size:.88rem}
.tabs button[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent);font-weight:500}
.panel{padding:.9rem}
.item{border:1px solid var(--rule-soft);border-radius:6px;padding:.7rem;margin-bottom:.6rem;background:var(--surface)}
.item.open{border-left:3px solid var(--amber)}
.item.accepted{border-left:3px solid var(--ok)}
.item.rejected{border-left:3px solid var(--danger);opacity:.72}
.item .head{display:flex;gap:.4rem;align-items:baseline;font-size:.75rem;color:var(--ink-faint);margin-bottom:.35rem}
.item .head .who{font-weight:600;color:var(--ink-soft);font-size:.78rem}
.diff{font-family:var(--mono);font-size:.78rem;line-height:1.45;word-break:break-word}
.diff del{background:var(--danger-soft);color:var(--danger);text-decoration:line-through}
.diff ins{background:var(--ok-soft);color:var(--ok);text-decoration:none}
.item .actions{display:flex;gap:.35rem;margin-top:.5rem}
.item.superseded{border-left:3px solid var(--rule);opacity:.6}
.pill.superseded{background:var(--rule-soft);color:var(--ink-faint)}

/* Editing a proposal in place: the card becomes the form, so the change and
   the correction never sit in two different places on the screen. */
.edit-form{margin-top:.2rem}
.edit-form .hint{margin:.2rem 0 .35rem}
.edit-form .hint del{background:var(--danger-soft);color:var(--danger);
  font-family:var(--mono);font-size:.75rem}
.edit-field{width:100%;font-family:var(--mono);font-size:.8rem;
  padding:.4rem .5rem;border:1px solid var(--accent);border-radius:5px;
  background:var(--surface);color:var(--ink);resize:vertical}
.edit-field:focus{outline:2px solid var(--accent-soft);outline-offset:1px}

/* What a new comment will point at. It reads as part of the composer rather
   than a control, because it is telling you something, not asking. */
.anchor-chip{display:flex;align-items:center;gap:.35rem;margin-bottom:.4rem;
  padding:.3rem .45rem;border-radius:5px;background:var(--accent-soft);
  font-size:.75rem;color:var(--ink-soft);cursor:default}
.anchor-chip.empty{background:none;padding:.1rem 0;margin-bottom:.4rem}
.anchor-chip .anchor-mark{color:var(--accent);flex:none}
.anchor-chip .anchor-text{flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.chip-x{border:0;background:none;color:var(--ink-faint);cursor:pointer;
  font-size:.95rem;line-height:1;padding:0 .15rem;flex:none}
.chip-x:hover{color:var(--danger)}

/* The assistant. It reads like an answer, not like a chat window: one
   question, one answer, and the paragraphs it used. */
.assist-actions{display:flex;flex-direction:column;gap:.4rem}
.assist-row{display:flex;gap:.35rem;align-items:center}
.assist-row .style-picker{flex:1;min-width:0}
.item.assist{border-left:3px solid var(--accent)}
/* dir="auto" on the element does the alignment; the interface stack already
   carries an Arabic face, so an Arabic answer is not left to the browser. */
.assist-text{white-space:pre-wrap;line-height:1.6;font-size:.86rem;
  font-family:var(--ui)}
.pill{font-family:var(--mono);font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.1rem .35rem;border-radius:3px}
.pill.open{background:var(--amber-soft);color:var(--amber)}
.pill.accepted{background:var(--ok-soft);color:var(--ok)}
.pill.rejected{background:var(--danger-soft);color:var(--danger)}
.pill.published{background:var(--accent-soft);color:var(--accent)}
.empty{color:var(--ink-faint);font-size:.85rem;padding:1.2rem .2rem;text-align:center}
.toast{
  position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%);
  background:var(--ink);color:#fff;padding:.55rem .9rem;border-radius:6px;
  font-size:.85rem;box-shadow:var(--shadow);z-index:50;max-width:min(40rem,92vw);
}
.toast.bad{background:var(--danger)}
.hint{font-size:.78rem;color:var(--ink-faint);margin:.4rem 0 0}
.hint.ok-note{color:var(--ok)}
.hint.bad-note{color:var(--danger)}

/* The settings page. One field per row, each saved on its own: a page that
   saves everything at once makes a typo in one box a failure of five. */
.settings-page{max-width:44rem;margin:0 auto}
.settings-page h2{font-size:1.1rem;margin:.2rem 0 .3rem}
.settings-page h3{font-size:.92rem;margin:0 0 .2rem}
.setting-group{margin-top:1.6rem;padding-top:1rem;border-top:1px solid var(--rule-soft)}
.setting{margin-top:1rem}
.setting-head{display:flex;align-items:center;gap:.4rem;margin-bottom:.3rem;font-size:.85rem}
.setting-row{display:flex;gap:.35rem;align-items:center}
.setting-row input,.setting-row select{flex:1;min-width:0}