/* ============================================================================
Opus Bench — app chrome.
media="screen" is set on the : exported and printed DOCUMENTS never
read these tokens. exports.js writes its own literal CSS into a standalone
file, so a manuscript is black-on-white on paper no matter what the app
looks like on screen. Adding a rule here can never change a submission.
========================================================================= */
/* ---------- Design tokens ---------------------------------------------- */
:root{
color-scheme:light;
/* Brand. Emory navy, shared with the sibling apps; the manuscript app's own
identity comes from --quill (the editorial accent used for revision marks
and the active rail), not from a different brand colour. */
--navy:#012169; --navy-2:#0b2f7e; --blue:#2c5cc5; --blue-lt:#e8eefb;
--blue-line:#b9c9ec; --nav-fill:#012169;
--quill:#7b1e3c; --quill-bg:#fbeef2; --quill-line:#e2b9c6;
/* Surfaces, lightest to most recessed. */
--bg:#f4f5f8; --panel:#ffffff;
--surface-2:#fafbfc; --surface-3:#fcfcfd; --surface-hover:#fafbfd; --surface-sel:#f2f6fd;
--input-bg:#ffffff; --input-line:#868e9e;
/* Hairlines. */
--line:#dde1e8; --line-2:#eceef2; --line-strong:#c9cfda; --dash-line:#b9c1cf; --rail:#cfd8ea;
/* Ink. */
--ink:#1c2433; --ink-2:#5a6475; --ink-3:#5c6371; --ink-4:#8b93a3; --on-accent:#ffffff;
/* Semantic triples: ink / tinted ground / border. */
--green:#1e7a3c; --green-bg:#e7f4ec; --green-line:#bcdcc8;
--red:#b3261e; --red-bg:#fbeae9; --red-line:#e5b6b3;
--amber:#8a5c00; --amber-bg:#fff3d6; --amber-line:#e6d09a;
--purple:#5b3fa8;--purple-bg:#efeafa;--purple-line:#c3b2ee;
/* The manuscript page itself — deliberately a different material from the
app chrome so the writing surface reads as paper even inside the shell. */
--paper:#ffffff; --paper-ink:#161a22; --paper-line:#e3e6ec; --paper-shadow:rgba(20,28,48,.08);
--paper-rule:#eef0f4;
/* Toolbar, its own strip material (not --panel) so a card scrolling under it
still reads as a separate surface. Two cues carry "this is a control" — a
fill step AND a hairline — because at 28px either alone is deniable. */
--tb-bg:#fbfcfd; --tb-line:#c9cfda; --tb-sep:#d7dce4;
--tb-btn-bg:#ffffff; --tb-btn-line:#868e9e;
--tb-btn-hover:#eef1f6; --tb-btn-active:#e3e8f0;
--tb-menu-bg:#ffffff;
--toast-bg:#1c2433; --toast-ink:#ffffff; --scroll-thumb:#c8cdd6;
--hero-bg:#012169; --hero-ink-2:#9fb0d8; --nav-edge:#012169;
--viewer-bg:#2a2f3a; --frame-bg:#525659;
--radius:10px; --radius-sm:6px;
--shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.10);
--shadow-lg:0 8px 28px rgba(16,24,40,.16),0 2px 8px rgba(16,24,40,.08);
/* Type scale, named by ROLE — new work picks a role, not a pixel value. */
--fs-micro:10px; --fs-tag:10.5px; --fs-cap:11px; --fs-meta:11.5px;
--fs-sm:12px; --fs-ui:12.5px; --fs-base:13px; --fs-md:13.5px;
--fs-title:14px; --fs-lead:15px;
/* Spacing ladder. Odd values elsewhere are deliberate optical nudges. */
--sp-1:2px; --sp-2:4px; --sp-3:6px; --sp-4:8px; --sp-5:10px; --sp-6:12px;
--sp-7:14px; --sp-8:16px; --sp-9:18px; --sp-10:20px; --sp-12:24px; --sp-16:32px;
--ui-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--doc-font:"Times New Roman",Times,Georgia,serif;
--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--sidebar-w:264px;
}
:root[data-theme="dark"]{
color-scheme:dark;
--navy:#8aa6e8; --navy-2:#9db6ee; --blue:#7ea3ef; --blue-lt:#1b2540;
--blue-line:#33436b; --nav-fill:#0d1526;
--quill:#e79ab2; --quill-bg:#2c1621; --quill-line:#5b2c3d;
--bg:#0e1420; --panel:#161d2b;
--surface-2:#1a2130; --surface-3:#1c2433; --surface-hover:#1e2636; --surface-sel:#1e2a44;
--input-bg:#111827; --input-line:#5b6577;
--line:#28303f; --line-2:#222a38; --line-strong:#3a4353; --dash-line:#3e4757; --rail:#33415e;
--ink:#e6e9ef; --ink-2:#a8b1c1; --ink-3:#9aa3b3; --ink-4:#79839a; --on-accent:#0e1420;
--green:#5fce8b; --green-bg:#12291c; --green-line:#2c5b3d;
--red:#f08a82; --red-bg:#2d1614; --red-line:#5e2c28;
--amber:#e8b44f; --amber-bg:#2b2110; --amber-line:#5b4a20;
--purple:#b39cf0;--purple-bg:#221b38;--purple-line:#443a6b;
--paper:#141b27; --paper-ink:#e3e7ee; --paper-line:#2a3242; --paper-shadow:rgba(0,0,0,.5);
--paper-rule:#222a38;
--tb-bg:#131a27; --tb-line:#2f3a4c; --tb-sep:#28303f;
--tb-btn-bg:#1b2331; --tb-btn-line:#5b6577;
--tb-btn-hover:#232c3d; --tb-btn-active:#2a3548;
--tb-menu-bg:#1b2331;
--toast-bg:#e6e9ef; --toast-ink:#0e1420; --scroll-thumb:#3a4353;
--hero-bg:#131c30; --hero-ink-2:#8fa3cf; --nav-edge:#0b1220;
--viewer-bg:#0b0f17; --frame-bg:#0b0f17;
--shadow:0 1px 2px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.4);
--shadow-lg:0 10px 34px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.45);
}
/* Author palette. Eight hues that stay distinguishable side by side and keep
>=4.5:1 against their own tint in BOTH themes — tracked changes and comment
avatars are colour-coded by author, so these are load-bearing, not decorative. */
:root{
--au-1:#1f5fbf; --au-1-bg:#e7effc;
--au-2:#a3341f; --au-2-bg:#fcece8;
--au-3:#1d7a52; --au-3-bg:#e4f4ec;
--au-4:#7a3fa8; --au-4-bg:#f1e9fa;
--au-5:#96631a; --au-5-bg:#fbf0dc;
--au-6:#00707f; --au-6-bg:#e0f3f5;
--au-7:#a82a6a; --au-7-bg:#fce9f2;
--au-8:#41567a; --au-8-bg:#eaeef5;
}
:root[data-theme="dark"]{
--au-1:#7fb0f5; --au-1-bg:#16233c;
--au-2:#f0917c; --au-2-bg:#33201a;
--au-3:#63cb9c; --au-3-bg:#122a20;
--au-4:#c3a2ef; --au-4-bg:#241c38;
--au-5:#dfae5c; --au-5-bg:#2c2312;
--au-6:#5cc3ce; --au-6-bg:#0f2a2d;
--au-7:#ef8fbc; --au-7-bg:#331a26;
--au-8:#9fb2d4; --au-8-bg:#1c2436;
}
/* ---------- Reset / base ------------------------------------------------ */
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0; background:var(--bg); color:var(--ink);
font:var(--fs-base)/1.5 var(--ui-font);
-webkit-font-smoothing:antialiased;
overflow:hidden;
}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0;font-weight:640;letter-spacing:-.01em}
p{margin:0}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:6px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}
/* One universal focus ring. Deliberately does NOT set border-radius — doing so
squared off every button in a sibling app. */
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* ---------- Boot watchdog ---------------------------------------------- */
#boot{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);z-index:9000}
.boot-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
padding:var(--sp-12) var(--sp-16);box-shadow:var(--shadow);min-width:300px;text-align:center}
.boot-title{font-size:var(--fs-lead);font-weight:680;color:var(--ac-ink)}
.boot-msg{margin-top:var(--sp-4);color:var(--ink-2);font-size:var(--fs-ui)}
.boot-actions{margin-top:var(--sp-8)}
.boot-err{margin-top:var(--sp-8);text-align:left;font:var(--fs-cap)/1.5 var(--mono);
color:var(--red);background:var(--red-bg);border:1px solid var(--red-line);
border-radius:var(--radius-sm);padding:var(--sp-5);max-width:520px;max-height:180px;overflow:auto;white-space:pre-wrap}
/* ---------- App frame --------------------------------------------------- */
#app{display:flex;height:100%}
#sidebar{
width:var(--sidebar-w);flex:0 0 auto;background:var(--nav-fill);color:#dbe3f5;
border-right:1px solid var(--nav-edge);display:flex;flex-direction:column;overflow:hidden;
}
#app.nav-collapsed #sidebar{width:0;border-right:0}
#main{flex:1 1 auto;display:flex;flex-direction:column;min-width:0}
#topbar{flex:0 0 auto}
#content{flex:1 1 auto;overflow:auto;position:relative}
/* ---------- Sidebar ----------------------------------------------------- */
.nav-head{padding:var(--sp-10) var(--sp-10) var(--sp-6);display:flex;align-items:center;gap:var(--sp-5)}
.nav-mark{width:26px;height:26px;border-radius:7px;background:#ffffff1a;display:grid;place-items:center;
font-weight:800;font-size:var(--fs-cap);letter-spacing:.02em;color:#fff;flex:0 0 auto}
.nav-title{font-size:var(--fs-md);font-weight:660;color:#fff;letter-spacing:-.01em}
.nav-sub{font-size:var(--fs-micro);color:#9fb0d8;text-transform:uppercase;letter-spacing:.08em}
.nav-scroll{flex:1 1 auto;overflow:auto;padding:var(--sp-4) var(--sp-5) var(--sp-10)}
.nav-sec{margin-top:var(--sp-8)}
.nav-sec-head{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-3) var(--sp-5);
font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.09em;color:#8fa3cf;font-weight:700}
.nav-sec-head .cnt{margin-left:auto;font-weight:600;letter-spacing:0}
.nav-row{display:flex;align-items:center;gap:var(--sp-5);padding:var(--sp-4) var(--sp-5);
border-radius:var(--radius-sm);cursor:pointer;color:#cdd8ee;font-size:var(--fs-ui);
border:1px solid transparent;user-select:none}
.nav-row:hover{background:#ffffff12;color:#fff}
.nav-row.sel{background:#ffffff1f;color:#fff;border-color:#ffffff26;font-weight:600}
.nav-row .mk{width:16px;flex:0 0 auto;display:grid;place-items:center;opacity:.9}
.nav-row .lbl{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-row .val{font-size:var(--fs-tag);color:#9fb0d8;flex:0 0 auto}
.nav-foot{flex:0 0 auto;border-top:1px solid #ffffff1f;padding:var(--sp-5)}
/* ---------- Topbar ------------------------------------------------------ */
.tb{background:var(--tb-bg);border-bottom:1px solid var(--tb-line);
padding:var(--sp-5) var(--sp-8);display:flex;align-items:center;gap:var(--sp-6);
overflow:clip;overflow-clip-margin:8px}
.tb-crumb{min-width:180px;flex:1 1 0;min-width:0}
.tb-sec{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-4);font-weight:700}
.tb-name{font-size:var(--fs-title);font-weight:660;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-facts{font-size:var(--fs-cap);color:var(--ink-3);display:flex;gap:var(--sp-5);flex-wrap:wrap}
.tb-facts b{font-weight:640;color:var(--ink-2)}
.tb-style select{font-size:var(--fs-cap);padding:0 var(--sp-3);height:20px;line-height:1;
border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface-2);
color:var(--ink-2);max-width:120px}
.tb-right{display:flex;align-items:center;gap:var(--sp-6);flex:0 0 auto}
/* Related controls sit together and are separated from the next group by a
rule, so the bar reads as three decisions rather than six loose buttons. */
.tb-group{display:inline-flex;align-items:center;gap:var(--sp-3)}
.tb-group + .tb-group::before,.tb-group + .btn::before,.tb-group + .btn.primary::before{
content:"";display:inline-block;width:1px;height:18px;background:var(--line);
margin-right:var(--sp-5);vertical-align:middle}
/* A control that opens a menu says so. A bare ⋯ gave no reason to press it. */
.tb-car{font-size:9px;opacity:.6;margin-left:1px}
/* Save state. Shape and wording carry it, not colour alone — the tick and the
word read the same to someone who cannot tell red from grey. */
.save-ind{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-cap);
color:var(--ink-3);white-space:nowrap}
.save-ind.bad{color:var(--red);font-weight:640}
.save-ind.bad .btn{margin-left:var(--sp-2)}
/* ---------- Buttons / controls ------------------------------------------ */
.btn{
display:inline-flex;align-items:center;gap:var(--sp-4);
background:var(--tb-btn-bg);border:1px solid var(--tb-btn-line);color:var(--ink);
padding:5px 11px;border-radius:var(--radius-sm);cursor:pointer;font-size:var(--fs-ui);
font-weight:520;line-height:1.35;white-space:nowrap
}
.btn:hover{background:var(--tb-btn-hover)}
.btn:active{background:var(--tb-btn-active)}
.btn[disabled]{opacity:.45;cursor:default;pointer-events:none}
/* The three accent roles in one rule, which is the clearest place to see why
they have to be three: the fill needs 3:1 against the panel behind it, and
the label on top needs 4.5:1 against the FILL — which in dark mode means a
near-black label on a bright button, not white. */
.btn.primary{background:var(--ac-fill);border-color:var(--ac-fill);color:var(--ac-on);font-weight:600}
.btn.primary:hover{background:var(--ac-fill-hover);border-color:var(--ac-fill-hover)}
.btn.danger{background:var(--red-bg);border-color:var(--red-line);color:var(--red);font-weight:600}
.btn.ghost{background:transparent;border-color:transparent;color:var(--ink-2)}
.btn.ghost:hover{background:var(--tb-btn-hover);color:var(--ink)}
.btn.sm{padding:3px 8px;font-size:var(--fs-sm)}
.btn.on{background:var(--surface-sel);border-color:var(--blue);color:var(--ac-ink);font-weight:640}
input[type=text],input[type=email],input[type=number],input[type=date],input[type=search],select,textarea{
background:var(--input-bg);border:1px solid var(--input-line);border-radius:var(--radius-sm);
padding:5px 8px;font-size:var(--fs-ui);width:100%
}
textarea{resize:vertical;line-height:1.5}
label.fld{display:block;margin-bottom:var(--sp-6)}
label.fld > span{display:block;font-size:var(--fs-cap);color:var(--ink-2);font-weight:600;margin-bottom:var(--sp-2)}
.row{display:flex;gap:var(--sp-6);flex-wrap:wrap}
.row > *{flex:1 1 160px;min-width:0}
.hint{font-size:var(--fs-cap);color:var(--ink-3)}
.spacer{flex:1 1 auto}
/* ---------- Cards / layout --------------------------------------------- */
.page{padding:var(--sp-12) var(--sp-16);max-width:1180px;margin:0 auto}
.page.wide{max-width:none}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
box-shadow:var(--shadow);margin-bottom:var(--sp-12);position:relative}
.card-head{display:flex;align-items:center;gap:var(--sp-6);padding:var(--sp-8) var(--sp-10);
border-bottom:1px solid var(--line-2)}
.card-head h3{font-size:var(--fs-title)}
.card-body{padding:var(--sp-10)}
.card.collapsed > :not(.card-head){display:none}
.card.collapsed .card-head{border-bottom:0}
.empty{padding:var(--sp-16);text-align:center;color:var(--ink-3);font-size:var(--fs-ui)}
.tag{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-tag);font-weight:650;
padding:1px 7px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface-2);color:var(--ink-2)}
.tag.green{background:var(--green-bg);border-color:var(--green-line);color:var(--green)}
.tag.amber{background:var(--amber-bg);border-color:var(--amber-line);color:var(--amber)}
.tag.red{background:var(--red-bg);border-color:var(--red-line);color:var(--red)}
.tag.blue{background:var(--blue-lt);border-color:var(--blue-line);color:var(--ac-ink)}
.tag.purple{background:var(--purple-bg);border-color:var(--purple-line);color:var(--purple)}
.notice{border:1px solid var(--line);border-left:3px solid var(--ink-4);background:var(--surface-2);
border-radius:var(--radius-sm);padding:var(--sp-6) var(--sp-8);font-size:var(--fs-ui);margin-bottom:var(--sp-8)}
.notice.info{border-left-color:var(--blue);background:var(--blue-lt)}
.notice.warn{border-left-color:var(--amber);background:var(--amber-bg)}
.notice.bad{border-left-color:var(--red);background:var(--red-bg)}
.notice.good{border-left-color:var(--green);background:var(--green-bg)}
table.grid{width:100%;border-collapse:collapse;font-size:var(--fs-ui)}
table.grid th{text-align:left;font-size:var(--fs-cap);text-transform:uppercase;letter-spacing:.05em;
color:var(--ink-3);font-weight:700;padding:var(--sp-4) var(--sp-6);border-bottom:1px solid var(--line-strong)}
table.grid td{padding:var(--sp-5) var(--sp-6);border-bottom:1px solid var(--line-2);vertical-align:top}
table.grid tr:hover td{background:var(--surface-hover)}
/* ---------- Toasts ------------------------------------------------------ */
#toasts{position:fixed;bottom:var(--sp-12);left:50%;transform:translateX(-50%);z-index:8000;
display:flex;flex-direction:column;gap:var(--sp-4);align-items:center;pointer-events:none}
.toast{background:var(--toast-bg);color:var(--toast-ink);padding:var(--sp-5) var(--sp-10);
border-radius:999px;font-size:var(--fs-ui);font-weight:560;box-shadow:var(--shadow-lg);
animation:toastIn .16s ease-out;max-width:70vw}
.toast.bad{background:var(--red);color:#fff}
.toast.good{background:var(--green);color:#fff}
@keyframes toastIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* ---------- Modals ------------------------------------------------------ */
.scrim{position:fixed;inset:0;background:rgba(12,18,32,.42);backdrop-filter:blur(2px);
z-index:7000;display:grid;place-items:center;padding:var(--sp-16)}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
box-shadow:var(--shadow-lg);width:min(640px,100%);max-height:86vh;display:flex;flex-direction:column;
animation:menuIn .14s ease-out}
.modal.lg{width:min(980px,100%)}
.modal.xl{width:min(1240px,100%)}
.modal-head{display:flex;align-items:center;gap:var(--sp-6);padding:var(--sp-8) var(--sp-10);
border-bottom:1px solid var(--line-2)}
.modal-head h3{font-size:var(--fs-title);flex:1 1 auto}
.modal-body{padding:var(--sp-10);overflow:auto;flex:1 1 auto}
.modal-foot{display:flex;align-items:center;gap:var(--sp-5);padding:var(--sp-8) var(--sp-10);
border-top:1px solid var(--line-2);justify-content:flex-end}
@keyframes menuIn{from{opacity:0;transform:scale(.98) translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.modal,.toast{animation:none}}
/* ---------- Dropdown menus --------------------------------------------- */
.dropmenu{position:fixed;z-index:7500;background:var(--tb-menu-bg);border:1px solid var(--line-strong);
border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);padding:var(--sp-3);min-width:190px;
max-height:70vh;overflow:auto;animation:menuIn .12s ease-out}
.dropmenu button{display:flex;align-items:center;gap:var(--sp-5);width:100%;text-align:left;
background:none;border:0;padding:var(--sp-4) var(--sp-6);border-radius:var(--radius-sm);
cursor:pointer;font-size:var(--fs-ui);white-space:nowrap}
.dropmenu button:hover{background:var(--surface-hover)}
.dropmenu button.danger{color:var(--red)}
.dropmenu .sep{height:1px;background:var(--line-2);margin:var(--sp-3) 0}
.dropmenu .grp{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.08em;
color:var(--ink-4);font-weight:700;padding:var(--sp-4) var(--sp-6) var(--sp-2)}
/* ============================================================================
The manuscript editor
========================================================================= */
.ed{display:flex;height:100%;min-height:0}
.ed-outline{width:230px;flex:0 0 auto;border-right:1px solid var(--line);background:var(--surface-2);
overflow:auto;padding:var(--sp-6)}
.ed-main{flex:1 1 auto;overflow:auto;min-width:0}
.ed-side{width:340px;flex:0 0 auto;border-left:1px solid var(--line);background:var(--surface-2);
display:none;flex-direction:column;min-width:240px;overflow:hidden}
.ed.show-side .ed-side{display:flex}
.ed-grip{flex:0 0 5px;cursor:col-resize;background:transparent;position:relative;z-index:5}
.ed-grip::after{content:"";position:absolute;inset:0 2px;background:var(--line);opacity:0;transition:opacity .12s}
.ed-grip:hover::after{opacity:1}
@media (max-width:1180px){.ed-outline{display:none}}
@media (max-width:900px){.ed-side,.ed-grip{display:none !important}}
/* ---------- Pane stack ---------------------------------------------------
One editor in the centre, N read-only viewers on the right. Each pane owns
its own scroll, so reading Methods in one pane never moves Table 2 in
another. Panes are viewers by construction: a second editable surface over
the same blocks would put two carets on one paragraph. */
.pane-head{flex:0 0 auto;display:flex;align-items:center;gap:var(--sp-4);
padding:var(--sp-4) var(--sp-6);border-bottom:1px solid var(--line);background:var(--surface-2)}
.pane-title{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.09em;
color:var(--ink-4);font-weight:700;flex:1 1 auto}
.pane-stack{flex:1 1 auto;display:flex;flex-direction:column;overflow:hidden;min-height:0}
.pane{flex:1 1 0;display:flex;flex-direction:column;min-height:0;
border-bottom:1px solid var(--line)}
.pane:last-child{border-bottom:0}
.pane[data-collapsed]{flex:0 0 auto}
.pane[data-collapsed] .pane-body{display:none}
.pane-bar{flex:0 0 auto;display:flex;align-items:center;gap:var(--sp-2);
padding:var(--sp-3) var(--sp-4);background:var(--surface-3);border-bottom:1px solid var(--line-2)}
.pane-fold{background:none;border:0;cursor:pointer;color:var(--ink-3);width:18px;
font-size:var(--fs-cap);padding:0;line-height:1}
.pane-pick{flex:1 1 auto;min-width:0;font-size:var(--fs-sm);padding:2px 6px;
border-color:var(--line-strong);background:var(--panel)}
.pane-body{flex:1 1 auto;overflow:auto;min-height:0}
.pv{padding:var(--sp-6) var(--sp-8);font-family:var(--doc-font);font-size:14px;line-height:1.6}
.pv-p{margin:0 0 var(--sp-6)}
.pv-h2{font-family:var(--ui-font);font-size:14px;font-weight:680;margin:var(--sp-8) 0 var(--sp-3)}
.pv-h3{font-family:var(--ui-font);font-size:12px;font-weight:700;text-transform:uppercase;
letter-spacing:.05em;color:var(--ink-2);margin:var(--sp-7) 0 var(--sp-2)}
.pv-meta{padding:var(--sp-4) var(--sp-8);font-size:var(--fs-cap);color:var(--ink-3);
border-bottom:1px solid var(--line-2);background:var(--surface-2)}
.pane-body .tblbox{margin:var(--sp-6) var(--sp-6) 0}
.pane-body .figbox{margin:var(--sp-6)}
.pane-body .cap{padding:0 var(--sp-8) var(--sp-6)}
.out-row{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-4) var(--sp-5);
border-radius:var(--radius-sm);cursor:pointer;font-size:var(--fs-sm);color:var(--ink-2);user-select:none}
.out-row:hover{background:var(--surface-hover)}
.out-row.sel{background:var(--surface-sel);color:var(--ac-ink);font-weight:640}
.out-row .n{width:18px;text-align:right;color:var(--ink-4);font-size:var(--fs-cap);flex:0 0 auto}
.out-row .lbl{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.out-row .wc{font-size:var(--fs-micro);color:var(--ink-4);flex:0 0 auto}
.out-row .wc.over{color:var(--red);font-weight:700}
.out-row.drag{opacity:.45}
.out-row.drop-before{box-shadow:inset 0 2px 0 var(--blue)}
.out-row.drop-after{box-shadow:inset 0 -2px 0 var(--blue)}
/* The paper. A manuscript section is a sheet, not a form field. */
/* The writing surface runs the full width between the outline and the viewers,
with only a hair of separation — the measure is controlled by the sheet's own
generous side padding rather than by a narrow column. */
.sheetwrap{padding:4px 4px 40vh;display:flex;flex-direction:column;align-items:stretch}
.sheetbox{width:100%;display:flex;flex-direction:column;margin-bottom:var(--sp-6)}
.sheet{background:var(--paper);color:var(--paper-ink);border:1px solid var(--paper-line);
border-radius:8px;box-shadow:0 1px 3px var(--paper-shadow);width:100%;
padding:var(--sp-16) 56px var(--sp-16)}
.sheet.narrow{width:100%}
/* Justified body text. The alignment lives on the block MODEL and this class
is applied at render — never written into the stored HTML, which the
sanitiser would strip. */
.bd.just{text-align:justify;text-justify:inter-word}
/* The citations for this section, in their own bubble UNDER the sheet — the
footnote strip you glance at while writing. Never the document's own
typography: it is apparatus, not text on the page, and it must not read as
part of the manuscript. Open by default, because the whole point is not
having to go and ask for it. */
.citefoot{margin-top:6px;background:var(--surface-2);border:1px solid var(--line);
border-radius:10px;padding:0 var(--sp-8) var(--sp-2);
font-family:var(--ui-font);font-size:var(--fs-sm)}
.cf-head{display:flex;align-items:center;gap:var(--sp-4);width:100%;background:none;border:0;
padding:var(--sp-6) 0 var(--sp-4);cursor:pointer;color:var(--ink-3);
font:inherit;font-weight:650;text-align:left}
.citefoot:not(.closed) .cf-head{border-bottom:1px solid var(--line-2)}
.cf-head:hover{color:var(--ink-2)}
.cf-caret{width:12px;display:inline-block;color:var(--ink-4)}
.cf-count{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--ink-4);font-weight:600}
.cf-list{padding-bottom:var(--sp-4)}
.cf-row{display:flex;gap:var(--sp-5);align-items:flex-start;padding:var(--sp-3) 0;
line-height:1.45;color:var(--ink-2)}
.cf-row + .cf-row{border-top:1px solid var(--line-2)}
.cf-n{flex:0 0 22px;text-align:right;font-variant-numeric:tabular-nums;font-weight:700;
color:var(--ink-3)}
.cf-t{flex:1 1 auto;min-width:0}
.cf-row .btn{flex:0 0 auto;opacity:0;padding:0 5px}
.cf-row:hover .btn,.cf-row:focus-within .btn{opacity:1}
.cf-missing .cf-t{color:var(--red)}
/* The cite-a-reference picker: one search box over this paper, your library
and a bare DOI/PMID. Keyboard-first, so the selected row is a real state
and not just a hover. */
.pc-list{max-height:46vh;overflow:auto;border:1px solid var(--line);border-radius:var(--r-sm);
background:var(--surface-2)}
.pc-row{display:flex;gap:var(--sp-5);align-items:flex-start;width:100%;text-align:left;
background:none;border:0;border-bottom:1px solid var(--line-2);padding:var(--sp-5) var(--sp-6);
cursor:pointer;font:inherit;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.45}
.pc-row:last-child{border-bottom:0}
.pc-row:hover{background:var(--surface-hover)}
.pc-row.on{background:var(--surface-sel);color:var(--ink)}
.pc-n{flex:0 0 26px;text-align:right;font-variant-numeric:tabular-nums;font-weight:700;
color:var(--ink-3)}
.pc-tag{flex:0 0 auto;font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.07em;
font-weight:700;color:var(--ink-4);border:1px solid var(--line);border-radius:999px;
padding:1px 6px;margin-top:1px}
.pc-tag.pc-new{color:var(--ac-ink);border-color:var(--ac-fill)}
.pc-t{flex:1 1 auto;min-width:0}
/* ---------- Conference abstracts ---------------------------------------- */
/* Everything that governs an abstract — the meeting, the deadline, the limit
and how much of it is spent — sits on the page you are typing on. The
number is the whole job, so it is never behind a menu. */
.abs-wrap{height:100%;overflow:auto}
.abs-main{max-width:900px;margin:0 auto;padding:var(--sp-10) var(--sp-12) 60px}
.abs-head .card-body{padding-bottom:var(--sp-6)}
.abs-meter{display:flex;align-items:center;gap:var(--sp-6);margin-top:var(--sp-4)}
.abs-bar{flex:1 1 auto;height:6px;border-radius:999px;background:var(--line-2);overflow:hidden}
.abs-bar-fill{height:100%;width:0;background:var(--ink-4);border-radius:999px;
transition:width .15s ease}
.abs-bar-fill.good{background:var(--green)}
.abs-bar-fill.warn{background:var(--amber)}
.abs-bar-fill.bad{background:var(--red)}
.abs-count{flex:0 0 auto;font-size:var(--fs-ui);color:var(--ink-3);
font-variant-numeric:tabular-nums;white-space:nowrap}
.abs-count b{color:var(--ink);font-weight:700}
.abs-count.bad,.abs-count.bad b{color:var(--red)}
.abs-count.warn b{color:var(--amber)}
.abs-over{color:var(--red);font-weight:700}
.abs-left{color:var(--ink-4)}
/* The sheet inside an abstract is short: no page furniture, just the text. */
.abs-main .sheet{width:100%;padding:var(--sp-12) var(--sp-16)}
.sh-head{display:flex;align-items:baseline;gap:var(--sp-6);border-bottom:1px solid var(--paper-rule);
padding-bottom:var(--sp-6);margin-bottom:var(--sp-10)}
.sh-kind{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.1em;color:var(--ink-4);font-weight:700}
.sh-title{font-size:19px;font-weight:680;font-family:var(--ui-font);letter-spacing:-.015em;flex:1 1 auto}
.sh-count{font-size:var(--fs-cap);color:var(--ink-3);font-variant-numeric:tabular-nums}
.sh-count.over{color:var(--red);font-weight:700}
/* Blocks. Every block carries a durable id in data-bid — the whole tracked-change,
comment-anchor and sync model hangs off it, so it must never be regenerated. */
.blk{position:relative;margin:0 0 var(--sp-8);padding:2px 0 2px 0;border-radius:4px}
.blk .bd{font-family:var(--doc-font);font-size:16px;line-height:1.7;outline:none;
min-height:1.7em;white-space:pre-wrap;word-wrap:break-word}
.blk[data-t="h2"] .bd{font-family:var(--ui-font);font-size:17px;font-weight:680;line-height:1.35}
.blk[data-t="h3"] .bd{font-family:var(--ui-font);font-size:14.5px;font-weight:680;
text-transform:uppercase;letter-spacing:.05em;line-height:1.35;color:var(--ink-2)}
.blk[data-t="ul"] .bd,.blk[data-t="ol"] .bd{padding-left:22px}
.blk[data-t="quote"] .bd{border-left:3px solid var(--paper-line);padding-left:14px;color:var(--ink-2);font-style:italic}
.blk .bd:empty::before{content:attr(data-ph);color:var(--ink-4);font-style:italic;pointer-events:none}
.blk.focus{background:color-mix(in srgb,var(--surface-sel) 55%,transparent)}
.blk-gut{position:absolute;left:-38px;top:2px;width:30px;display:flex;flex-direction:column;
align-items:flex-end;gap:2px;opacity:0;transition:opacity .1s}
.blk:hover .blk-gut,.blk.focus .blk-gut{opacity:1}
.blk-gut button{background:none;border:0;cursor:pointer;color:var(--ink-4);font-size:var(--fs-cap);
padding:1px 3px;border-radius:4px;line-height:1}
.blk-gut button:hover{background:var(--surface-hover);color:var(--ink)}
.blk.locked{background:var(--amber-bg);outline:1px dashed var(--amber-line)}
.blk-lock{position:absolute;right:-6px;top:-14px;font-size:var(--fs-micro);font-weight:700;
background:var(--amber);color:#fff;padding:1px 6px;border-radius:999px}
/* Tracked changes, coloured by author. */
ins.tc{text-decoration:none;border-bottom:1.5px solid currentColor;background:var(--tc-bg,transparent);color:var(--tc-ink,var(--au-1))}
del.tc{text-decoration:line-through;opacity:.75;color:var(--tc-ink,var(--au-1))}
.tc-hidden ins.tc{border-bottom:0;background:none;color:inherit}
.tc-hidden del.tc{display:none}
.cmt-mark{background:var(--amber-bg);box-shadow:inset 0 -2px 0 var(--amber);cursor:pointer;border-radius:2px}
.cmt-mark.sel{background:var(--amber);color:#fff;box-shadow:none}
.cmt-mark.resolved{background:transparent;box-shadow:inset 0 -1px 0 var(--line-strong)}
.sp-bad{background:linear-gradient(transparent 88%,var(--red) 88%,var(--red) 96%,transparent 96%);cursor:pointer}
.gr-bad{background:linear-gradient(transparent 88%,var(--blue) 88%,var(--blue) 96%,transparent 96%);cursor:pointer}
/* Comment rail */
.cmt{border:1px solid var(--line);background:var(--panel);border-radius:var(--radius-sm);
padding:var(--sp-6);margin:0 var(--sp-6) var(--sp-6);font-size:var(--fs-sm)}
.cmt.sel{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-lt)}
.cmt.resolved{opacity:.58}
.cmt-top{display:flex;align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-4)}
.cmt-who{font-weight:660}
.cmt-when{font-size:var(--fs-micro);color:var(--ink-4);margin-left:auto}
.cmt-quote{font-size:var(--fs-cap);color:var(--ink-3);border-left:2px solid var(--amber);
padding-left:var(--sp-5);margin-bottom:var(--sp-4);font-style:italic}
.cmt-body{white-space:pre-wrap}
.cmt-reply{margin-top:var(--sp-5);padding-top:var(--sp-5);border-top:1px solid var(--line-2)}
.avatar{width:20px;height:20px;border-radius:999px;display:grid;place-items:center;flex:0 0 auto;
font-size:var(--fs-micro);font-weight:800;color:#fff;letter-spacing:-.02em}
.avatar.has-photo{background:var(--surface-3);overflow:hidden}
.avatar.has-photo img{width:100%;height:100%;object-fit:cover;display:block}
/* Profile identity block in Settings */
.me-id{display:flex;gap:var(--sp-4);align-items:center;margin-bottom:var(--sp-4)}
.me-id-txt{min-width:0}
.me-photo{position:relative;width:56px;height:56px;border-radius:999px;padding:0;flex:0 0 auto;
border:1px solid var(--line);background:var(--surface-3);cursor:pointer;overflow:hidden;display:block}
.me-photo:hover{border-color:var(--ac-fill)}
.me-photo img,.me-photo .me-mono{width:100%;height:100%;display:block;object-fit:cover}
.me-photo .me-mono{display:grid;place-items:center;color:#fff;font-weight:800;font-size:var(--fs-lead)}
.me-photo-cam{position:absolute;right:-1px;bottom:-1px;width:20px;height:20px;border-radius:999px;
background:var(--ac-fill);color:#fff;display:grid;place-items:center;font-size:11px;
border:2px solid var(--surface-2)}
/* Side panel tabs */
.sp-tabs{display:flex;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface-2);z-index:2}
.sp-tabs button{flex:1 1 0;background:none;border:0;border-bottom:2px solid transparent;
padding:var(--sp-6) var(--sp-4);cursor:pointer;font-size:var(--fs-sm);font-weight:600;color:var(--ink-3)}
.sp-tabs button.on{color:var(--ac-ink);border-bottom-color:var(--ac-ink)}
.sp-body{padding:var(--sp-6) 0}
/* Diff view */
.diff{font-family:var(--doc-font);font-size:15px;line-height:1.7}
.diff ins{background:var(--green-bg);color:var(--green);text-decoration:none}
.diff del{background:var(--red-bg);color:var(--red)}
.diffcols{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-10)}
@media (max-width:900px){.diffcols{grid-template-columns:1fr}}
/* Tables & figures */
.tblbox{overflow-x:auto;border:1px solid var(--paper-line);border-radius:var(--radius-sm)}
table.mstable{border-collapse:collapse;width:100%;font-size:13px;font-family:var(--ui-font)}
table.mstable th,table.mstable td{border:1px solid var(--paper-line);padding:5px 8px;text-align:left;vertical-align:top}
table.mstable th{background:var(--surface-2);font-weight:660}
table.mstable td.num,table.mstable th.num{text-align:right;font-variant-numeric:tabular-nums}
.figbox{border:1px solid var(--paper-line);border-radius:var(--radius-sm);padding:var(--sp-6);
background:var(--surface-3);text-align:center}
.figbox img{max-width:100%;height:auto;border-radius:4px}
.cap{font-size:var(--fs-sm);color:var(--ink-2);margin-top:var(--sp-5);text-align:left;line-height:1.5}
.cap b{color:var(--ink)}
/* PDF reader (peer review) */
.rvwrap{display:flex;height:100%;min-height:0}
.rv-pdf{flex:1 1 55%;background:var(--frame-bg);overflow:auto;padding:var(--sp-8);min-width:0}
.rv-pdf canvas{display:block;margin:0 auto var(--sp-8);max-width:100%;box-shadow:var(--shadow-lg);background:#fff}
.rv-form{flex:1 1 45%;overflow:auto;min-width:0;background:var(--bg)}
.pdftools{position:sticky;top:0;z-index:3;background:var(--tb-bg);border-bottom:1px solid var(--tb-line);
padding:var(--sp-4) var(--sp-6);display:flex;align-items:center;gap:var(--sp-4);margin:calc(var(--sp-8) * -1) calc(var(--sp-8) * -1) var(--sp-8)}
/* Checklists */
.ck-row{display:flex;gap:var(--sp-6);padding:var(--sp-5) var(--sp-6);border-bottom:1px solid var(--line-2);
align-items:flex-start;font-size:var(--fs-ui)}
.ck-row:hover{background:var(--surface-hover)}
.ck-no{width:34px;flex:0 0 auto;color:var(--ink-4);font-size:var(--fs-cap);font-weight:700;padding-top:2px}
.ck-txt{flex:1 1 auto;min-width:0}
.ck-st{flex:0 0 auto;display:flex;gap:2px}
.ck-st button{border:1px solid var(--line-strong);background:var(--panel);width:26px;height:22px;
border-radius:4px;cursor:pointer;font-size:var(--fs-cap);line-height:1;padding:0}
.ck-st button.on[data-v="y"]{background:var(--green-bg);border-color:var(--green);color:var(--green);font-weight:800}
.ck-st button.on[data-v="p"]{background:var(--amber-bg);border-color:var(--amber);color:var(--amber);font-weight:800}
.ck-st button.on[data-v="n"]{background:var(--red-bg);border-color:var(--red);color:var(--red);font-weight:800}
.ck-st button.on[data-v="na"]{background:var(--surface-sel);border-color:var(--blue);color:var(--ac-ink);font-weight:800}
/* Portal-paste block: the text that gets copied into ScholarOne / Editorial Manager */
.paste{font:12.5px/1.6 var(--mono);white-space:pre-wrap;background:var(--surface-3);
border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--sp-8);max-height:420px;overflow:auto}
/* Audit trail */
.aud{font-size:var(--fs-sm);display:grid;grid-template-columns:auto auto 1fr auto;gap:var(--sp-3) var(--sp-6);
align-items:baseline}
.aud .t{color:var(--ink-4);font-variant-numeric:tabular-nums;font-size:var(--fs-cap);white-space:nowrap}
.aud .w{font-weight:640;white-space:nowrap}
.aud .d{color:var(--ink-2);min-width:0}
.aud .s{color:var(--ink-4);font-size:var(--fs-cap);white-space:nowrap}
/* ---------- Print ------------------------------------------------------- */
@media print{
body{overflow:visible;background:#fff}
#app,#toasts,#modals,#boot{display:none !important}
#printRoot{display:block !important}
}
#printRoot{display:none}
/* ---------- Lint marks -------------------------------------------------
Painted with the CSS Custom Highlight API over live Ranges, so the checker
never writes a into the paragraph — nothing it does can reach the
saved HTML, the diff, or the .docx. Where the API is missing these rules
simply never match and the side panel still lists every issue. */
::highlight(ms-spell){
text-decoration:underline wavy var(--red);
text-decoration-skip-ink:none;
text-underline-offset:3px;
}
::highlight(ms-grammar){
text-decoration:underline wavy var(--blue);
text-decoration-skip-ink:none;
text-underline-offset:3px;
}
/* Placeholder for a stub changelog before sync-app.sh generates the real one. */
.card-body code{font:var(--fs-sm)/1.4 var(--mono);background:var(--surface-2);
padding:1px 4px;border-radius:3px}
/* ============================================================================
Citation library — three columns: collections, hits, the selected record.
The shape every reference manager converges on, because it is the one that
lets you search, file and read without losing your place in any of the three.
========================================================================= */
.cite{display:flex;height:100%;min-height:0}
.cite-side{width:230px;flex:0 0 auto;border-right:1px solid var(--line);
background:var(--surface-2);overflow:auto;padding:var(--sp-6) 0}
.cite-list{width:380px;flex:0 0 auto;border-right:1px solid var(--line);
display:flex;flex-direction:column;min-width:0;overflow:hidden}
.cite-detail{flex:1 1 auto;overflow:auto;min-width:0;background:var(--panel)}
@media (max-width:1200px){.cite-side{display:none}}
@media (max-width:860px){.cite-detail{display:none}.cite-list{flex:1 1 auto;width:auto}}
.cite-sec{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.09em;
color:var(--ink-4);font-weight:700;padding:var(--sp-8) var(--sp-6) var(--sp-3);
display:flex;align-items:center;gap:var(--sp-3)}
.cite-sec .btn{margin-left:auto;padding:0 5px}
.cite-row{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-3) var(--sp-6);
cursor:pointer;font-size:var(--fs-ui);color:var(--ink-2);border-radius:var(--radius-sm);
margin:0 var(--sp-3)}
.cite-row:hover{background:var(--surface-hover)}
.cite-row.sel{background:var(--surface-sel);color:var(--ac-ink);font-weight:640}
.cite-row .lbl{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cite-row .n{font-size:var(--fs-micro);color:var(--ink-4);flex:0 0 auto}
.cite-bar{flex:0 0 auto;display:flex;gap:var(--sp-4);align-items:center;
padding:var(--sp-5) var(--sp-6);border-bottom:1px solid var(--line);background:var(--tb-bg)}
.cite-bar input[type=search]{flex:1 1 auto;min-width:0}
.cite-bar select{width:auto;flex:0 0 auto}
.cite-scroll{flex:1 1 auto;overflow:auto;min-height:0}
.cite-item{padding:var(--sp-6) var(--sp-8);border-bottom:1px solid var(--line-2);cursor:pointer}
.cite-item:hover{background:var(--surface-hover)}
.cite-item.sel{background:var(--surface-sel);box-shadow:inset 3px 0 0 var(--ac-fill)}
.ci-top{display:flex;align-items:center;gap:var(--sp-4);margin-bottom:2px}
.ci-au{font-size:var(--fs-ui);font-weight:660;color:var(--ink)}
.ci-yr{font-size:var(--fs-cap);color:var(--ink-3);font-variant-numeric:tabular-nums}
.ci-fav{color:var(--amber)}
.ci-ti{font-size:var(--fs-ui);line-height:1.4;color:var(--ink);margin-bottom:2px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ci-jo{font-size:var(--fs-cap);color:var(--ink-3);overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.cd-head{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-5) var(--sp-8);
border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);z-index:2}
.cd-body{padding:var(--sp-8) var(--sp-10) 60px}
.cd-cite{font-family:var(--doc-font);font-size:15px;line-height:1.6;
padding-bottom:var(--sp-8);border-bottom:1px solid var(--line-2)}
.cd-actions{display:flex;gap:var(--sp-4);flex-wrap:wrap;align-items:center;margin:var(--sp-8) 0}
.cd-actions select{width:auto;max-width:220px}
.cd-actions a.btn{text-decoration:none}
.cd-sec{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.09em;
color:var(--ink-4);font-weight:700;margin:var(--sp-10) 0 var(--sp-4)}
.cd-chips{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
table.cd-fields td{padding:var(--sp-3) var(--sp-5);font-size:var(--fs-ui)}
table.cd-fields td.k{width:110px;color:var(--ink-3);font-weight:600}
/* ============================================================================
Formatting toolbar + whole-document view
========================================================================= */
.edwrap{display:flex;flex-direction:column;height:100%;min-height:0}
.edsurface{flex:1 1 auto;overflow:auto;min-height:0}
.fmtbar{flex:0 0 auto;display:flex;align-items:center;gap:2px;flex-wrap:wrap;
padding:var(--sp-3) var(--sp-6);background:var(--tb-bg);
border-bottom:1px solid var(--tb-line);position:sticky;top:0;z-index:6}
.fmtbar .tbb{background:var(--tb-btn-bg);border:1px solid transparent;color:var(--ink);
min-width:28px;height:26px;border-radius:var(--radius-sm);cursor:pointer;
font-size:var(--fs-ui);line-height:1;padding:0 6px;display:inline-flex;
align-items:center;justify-content:center}
.fmtbar .tbb:hover{background:var(--tb-btn-hover);border-color:var(--tb-btn-line)}
.fmtbar .tbb.on{background:var(--surface-sel);border-color:var(--blue);color:var(--ac-ink)}
.fmtbar .tbsel{width:auto;min-width:120px;font-size:var(--fs-sm);padding:3px 6px;
background:var(--tb-btn-bg);border-color:var(--tb-btn-line)}
.fmtbar .tbsep{width:1px;height:18px;background:var(--tb-sep);margin:0 var(--sp-3)}
.fmtbar .tbstate{font-size:var(--fs-cap);color:var(--ink-3);padding-right:var(--sp-4)}
.fmtbar mark,.paste mark{background:var(--amber-bg);color:var(--amber);border-radius:2px}
/* Whole-document view: the sections run continuously, each still its own sheet
so you can see where one ends and the next begins. */
.wholehead{width:100%;margin:0 auto var(--sp-8);text-align:center}
.wh-title{font-size:20px;font-weight:680;letter-spacing:-.015em;color:var(--ink)}
.wh-meta{font-size:var(--fs-cap);color:var(--ink-3);margin-top:var(--sp-2)}
.sheet.cont{margin-bottom:var(--sp-12)}
.sheet.cont .sh-head{position:sticky;top:0;background:var(--paper);z-index:3;
padding-top:var(--sp-6);margin-top:calc(var(--sp-16) * -1 + var(--sp-6))}
/* ============================================================================
Compare and merge returned versions
========================================================================= */
.vstrip{display:flex;gap:var(--sp-6);flex-wrap:wrap}
.vcard{flex:1 1 190px;min-width:170px;border:1px solid var(--line);border-radius:var(--radius-sm);
padding:var(--sp-6);background:var(--surface-2)}
.vcard.base{background:var(--blue-lt);border-color:var(--blue-line)}
.vcard.off{opacity:.5}
.vname{font-weight:660;font-size:var(--fs-ui);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vmeta{font-size:var(--fs-cap);color:var(--ink-3);margin-top:2px;line-height:1.4}
.vacts{display:flex;gap:2px;margin-top:var(--sp-4)}
.mrows{display:flex;flex-direction:column;gap:var(--sp-6)}
.mrow{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);
box-shadow:var(--shadow);overflow:hidden}
.mrow.changed{border-left:3px solid var(--amber)}
.mrow.conflict{border-left:3px solid var(--red)}
.mhead{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-4) var(--sp-8);
border-bottom:1px solid var(--line-2);background:var(--surface-2)}
.mno{font-size:var(--fs-cap);font-weight:700;color:var(--ink-4);font-variant-numeric:tabular-nums}
.mcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;
background:var(--line-2)}
.mcol{background:var(--panel);padding:var(--sp-6) var(--sp-8);display:flex;flex-direction:column;gap:var(--sp-4)}
.mcol.picked{background:var(--surface-sel);box-shadow:inset 0 0 0 2px var(--blue)}
.mwho{font-size:var(--fs-cap);font-weight:700;color:var(--ink-2);text-transform:uppercase;
letter-spacing:.05em;display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.mtext{font-family:var(--doc-font);font-size:14px;line-height:1.6;flex:1 1 auto}
.mtext.diff ins{background:var(--green-bg);color:var(--green);text-decoration:none}
.mtext.diff del{background:var(--red-bg);color:var(--red)}
.mcmt{font-size:var(--fs-sm);background:var(--amber-bg);border-left:2px solid var(--amber);
padding:var(--sp-4) var(--sp-5);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.mcol .btn{align-self:flex-start}
/* The whole-manuscript viewer pane: the rest of the paper always to hand, with
the section you are editing marked so clicking through the outline never
loses your place. */
.wp-sec{border-bottom:1px solid var(--line-2);padding-bottom:var(--sp-6)}
.wp-sec:last-child{border-bottom:0}
.wp-sec.here{background:var(--surface-sel);box-shadow:inset 3px 0 0 var(--ac-fill)}
.wp-head{position:sticky;top:0;z-index:1;background:var(--surface-2);
display:flex;align-items:center;gap:var(--sp-4);
padding:var(--sp-4) var(--sp-8);font-family:var(--ui-font);
font-size:var(--fs-cap);font-weight:700;text-transform:uppercase;letter-spacing:.06em;
color:var(--ink-2);border-bottom:1px solid var(--line-2);margin-bottom:var(--sp-5)}
.wp-sec.here .wp-head{background:var(--surface-sel);color:var(--ac-ink)}
.wp-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wp-wc{margin-left:auto;font-weight:600;letter-spacing:0;color:var(--ink-4);
font-variant-numeric:tabular-nums;flex:0 0 auto}
.wp .pv-p,.wp .pv-h2,.wp .pv-h3{padding-left:var(--sp-8);padding-right:var(--sp-8)}
.wp-empty{padding:0 var(--sp-8) var(--sp-4);font-size:var(--fs-cap);color:var(--ink-4);font-style:italic}
/* ============================================================================
APPEARANCE
Seeds are data-* attributes on ; each block below supplies the role
tokens the rest of the stylesheet consumes. Three namespaces, never mixed:
--ac-* / --ui-* / --rail-* screen furniture
--srf-* the writing surface as seen on screen
--doc-* what the exporter reads — written by nothing
in here, and read by nothing outside .sheet
No block below sets a --doc-* value. That is the property that stops an
appearance setting from changing a manuscript you have already submitted.
========================================================================= */
/* ---------- Accent, five roles ------------------------------------------
fill solid backgrounds 3:1 vs the panel behind it
on text ON the fill 4.5:1 vs the fill (inverts in dark mode)
ink the accent AS TEXT 4.5:1 vs the panel
edge 1px borders/underlines 3:1 vs the panel
wash tint behind a hot row --ink on top of it must still clear 4.5:1 */
:root{
--ac-fill:#012169; --ac-fill-hover:#0b2f7e; --ac-on:#ffffff;
--ac-ink:#012169; --ac-edge:#5c78bd; --ac-wash:#eef2fc;
}
:root[data-accent="navy"]{--ac-fill:#012169;--ac-fill-hover:#0b2f7e;--ac-on:#fff;--ac-ink:#012169;--ac-edge:#5c78bd;--ac-wash:#eef2fc}
:root[data-accent="blue"]{--ac-fill:#1b5fbf;--ac-fill-hover:#154b99;--ac-on:#fff;--ac-ink:#154b99;--ac-edge:#5b8ad6;--ac-wash:#eaf1fc}
:root[data-accent="teal"]{--ac-fill:#0e6a6b;--ac-fill-hover:#0a5354;--ac-on:#fff;--ac-ink:#0a5354;--ac-edge:#3e9596;--ac-wash:#e8f5f5}
:root[data-accent="bronze"]{--ac-fill:#8a5a1b;--ac-fill-hover:#734a14;--ac-on:#fff;--ac-ink:#734a14;--ac-edge:#b28248;--ac-wash:#faf1e4}
:root[data-accent="plum"]{--ac-fill:#6b3fa0;--ac-fill-hover:#57318a;--ac-on:#fff;--ac-ink:#57318a;--ac-edge:#9470c4;--ac-wash:#f3eefa}
:root[data-accent="ember"]{--ac-fill:#a8431f;--ac-fill-hover:#8f3617;--ac-on:#fff;--ac-ink:#8f3617;--ac-edge:#c06a44;--ac-wash:#fcf1ec}
:root[data-accent="forest"]{--ac-fill:#1f6b3a;--ac-fill-hover:#17542d;--ac-on:#fff;--ac-ink:#17542d;--ac-edge:#4f9468;--ac-wash:#eaf5ee}
:root[data-accent="graphite"]{--ac-fill:#3d4757;--ac-fill-hover:#2f3846;--ac-on:#fff;--ac-ink:#2f3846;--ac-edge:#78849a;--ac-wash:#eef0f4}
/* Dark mode is NOT the light palette dimmed. The fill goes bright so it stays
findable on a dark panel, which forces the label on it to go near-black. */
:root[data-theme="dark"][data-accent="navy"]{--ac-fill:#7d9df0;--ac-fill-hover:#93aef5;--ac-on:#0a1020;--ac-ink:#a8bdf7;--ac-edge:#3f5390;--ac-wash:#161d2e}
:root[data-theme="dark"][data-accent="blue"]{--ac-fill:#6fa8f5;--ac-fill-hover:#87b8f8;--ac-on:#06101f;--ac-ink:#9cc4fa;--ac-edge:#3a6099;--ac-wash:#121f30}
:root[data-theme="dark"][data-accent="teal"]{--ac-fill:#3fbfbf;--ac-fill-hover:#5bcece;--ac-on:#04201f;--ac-ink:#6fd8d6;--ac-edge:#2a7b7b;--ac-wash:#0f2222}
:root[data-theme="dark"][data-accent="bronze"]{--ac-fill:#d9a05a;--ac-fill-hover:#e3b273;--ac-on:#1e1305;--ac-ink:#e8bb80;--ac-edge:#8f6a34;--ac-wash:#241c0f}
:root[data-theme="dark"][data-accent="plum"]{--ac-fill:#a97fe0;--ac-fill-hover:#bb96e8;--ac-on:#140a22;--ac-ink:#c6a8f2;--ac-edge:#6b4a9c;--ac-wash:#1d1629}
:root[data-theme="dark"][data-accent="ember"]{--ac-fill:#d5642f;--ac-fill-hover:#e07a48;--ac-on:#1a0e07;--ac-ink:#e8875a;--ac-edge:#a85630;--ac-wash:#241612}
:root[data-theme="dark"][data-accent="forest"]{--ac-fill:#5fc384;--ac-fill-hover:#7ad09a;--ac-on:#04190c;--ac-ink:#8bd8a6;--ac-edge:#2f7a4b;--ac-wash:#0f2216}
:root[data-theme="dark"][data-accent="graphite"]{--ac-fill:#9aa7bb;--ac-fill-hover:#aeb9ca;--ac-on:#0d1119;--ac-ink:#b8c3d4;--ac-edge:#5a6577;--ac-wash:#181d26}
/* The existing vocabulary now derives from the accent roles, so every rule in
the stylesheet above follows the palette without being touched. */
:root{
--navy:var(--ac-ink); --navy-2:var(--ac-fill-hover);
--blue:var(--ac-edge); --blue-lt:var(--ac-wash); --blue-line:var(--ac-edge);
--surface-sel:var(--ac-wash); --on-accent:var(--ac-on);
}
/* ---------- Chrome tone --------------------------------------------------
Independent of light/dark on purpose: the classic workstation look is a deep
rail beside a white page IN A LIGHT APP, which a light/dark switch alone
cannot express. */
:root[data-chrome="ink"]{--nav-fill:#0e1c33;--nav-edge:#0a1526;--nav-ink:#dbe3f5;--nav-ink-dim:#8fa3cf}
:root[data-chrome="slate"]{--nav-fill:#2b3444;--nav-edge:#222a38;--nav-ink:#e2e7f0;--nav-ink-dim:#9aa6ba}
:root[data-chrome="paper"]{--nav-fill:#f2f4f8;--nav-edge:#dde2ea;--nav-ink:#26303f;--nav-ink-dim:#68748a}
:root[data-theme="dark"][data-chrome="paper"]{--nav-fill:#171d28;--nav-edge:#232b38;--nav-ink:#dfe4ec;--nav-ink-dim:#8e99ab}
:root[data-theme="dark"][data-chrome="slate"]{--nav-fill:#111722;--nav-edge:#1b2230;--nav-ink:#dfe4ec;--nav-ink-dim:#8e99ab}
#sidebar{background:var(--nav-fill);border-right-color:var(--nav-edge);color:var(--nav-ink)}
.nav-title{color:var(--nav-ink)}
.nav-sub,.nav-sec-head,.nav-row .val{color:var(--nav-ink-dim)}
.nav-row{color:var(--nav-ink)}
.nav-mark{background:rgba(127,127,127,.18);color:var(--nav-ink)}
:root[data-chrome="paper"] .nav-row:hover{background:rgba(0,0,0,.05)}
:root[data-chrome="paper"] .nav-row.sel{background:var(--ac-wash);color:var(--ac-ink);border-color:var(--ac-edge)}
:root[data-chrome="paper"] .nav-foot{border-top-color:var(--nav-edge)}
/* ---------- Density — CHROME ONLY ---------------------------------------
Density must never reach the sheet. The moment the writing surface's metrics
move, the on-screen preview stops matching the exported file and the writer
has no way to know. */
:root{--ui-scale:1;--ui-row:1;--ui-fs:1}
:root[data-density="compact"]{--ui-scale:.82;--ui-row:.84;--ui-fs:.94}
:root[data-density="roomy"]{--ui-scale:1.22;--ui-row:1.2;--ui-fs:1.06}
:root[data-density="compact"],:root[data-density="roomy"]{
--sp-3:calc(6px*var(--ui-scale)); --sp-4:calc(8px*var(--ui-scale));
--sp-5:calc(10px*var(--ui-scale)); --sp-6:calc(12px*var(--ui-scale));
--sp-8:calc(16px*var(--ui-scale)); --sp-10:calc(20px*var(--ui-scale));
--sp-12:calc(24px*var(--ui-scale));
--fs-ui:calc(12.5px*var(--ui-fs)); --fs-sm:calc(12px*var(--ui-fs));
--fs-base:calc(13px*var(--ui-fs)); --fs-cap:calc(11px*var(--ui-fs));
--fs-title:calc(14px*var(--ui-fs));
}
:root[data-density="compact"] .nav-row,
:root[data-density="compact"] .out-row,
:root[data-density="compact"] .cite-row{padding-top:2px;padding-bottom:2px}
:root[data-density="roomy"] .nav-row,
:root[data-density="roomy"] .out-row,
:root[data-density="roomy"] .cite-row{padding-top:7px;padding-bottom:7px}
/* ---------- Corners ------------------------------------------------------ */
:root[data-corners="square"]{--radius:3px;--radius-sm:2px}
:root[data-corners="soft"]{--radius:10px;--radius-sm:6px}
:root[data-corners="round"]{--radius:16px;--radius-sm:10px}
/* ---------- Panel style --------------------------------------------------
Flat is also the performance mode: no blurred shadows repainting behind a
long scrolling document. Separation moves to a hairline, so nothing ever
depends on a shadow alone to be distinguishable. */
:root[data-panels="flat"]{
--shadow:0 0 0 1px var(--line-strong);
--shadow-lg:0 0 0 1px var(--line-strong);
--paper-shadow:transparent;
}
:root[data-panels="flat"] .card,
:root[data-panels="flat"] .sheet{box-shadow:0 0 0 1px var(--line)}
:root[data-panels="flat"] .dropmenu,
:root[data-panels="flat"] .modal{box-shadow:0 0 0 1px var(--line-strong),0 8px 24px rgba(0,0,0,.18)}
/* ---------- Paper (SCREEN ONLY) -----------------------------------------
Exported and printed documents are always white. This changes what you look
at while writing and nothing else — exports.js writes its own literal CSS. */
:root[data-paper="bright"]{--paper:#ffffff;--paper-ink:#161a22;--paper-line:#e3e6ec;--paper-rule:#eef0f4}
:root[data-paper="warm"]{--paper:#fbf7ef;--paper-ink:#1d1a14;--paper-line:#e6ded0;--paper-rule:#f0e9dc}
:root[data-paper="dim"]{--paper:#141a22;--paper-ink:#e4e7ee;--paper-line:#28303c;--paper-rule:#222a34}
:root[data-theme="dark"][data-paper="bright"]{--paper:#141b27;--paper-ink:#e3e7ee;--paper-line:#2a3242;--paper-rule:#222a38}
:root[data-theme="dark"][data-paper="warm"]{--paper:#1a1712;--paper-ink:#ece5d8;--paper-line:#332c22;--paper-rule:#2a241c}
/* ---------- Faithful vs Comfort -----------------------------------------
Faithful: the sheet renders the DOCUMENT's own font, size and leading, so
what is on screen is a preview of the file.
Comfort: the on-screen reading experience is tuned independently — and the
app says so, permanently, in the toolbar. A writer drafting at 1.2x on a
short measure will otherwise misjudge length and paragraph rhythm. */
:root{--srf-measure:0;--srf-scale:1;--srf-leading:0;--doc-face:"Times New Roman",Times,serif;--doc-pt:12pt;--doc-lead:2}
:root[data-sheetview="faithful"] .blk .bd{
font-family:var(--doc-face);
font-size:calc(var(--doc-pt)*1.34); /* 12pt reads ~16px at 100% on screen */
line-height:var(--doc-lead);
}
:root[data-sheetview="faithful"] .sheet{width:min(820px,100%)}
:root[data-sheetview="comfort"] .blk .bd{
font-family:var(--doc-face);
font-size:calc(16px*var(--srf-scale));
line-height:var(--srf-leading, 1.7);
}
:root[data-sheetview="comfort"] .sheet{width:min(var(--srf-measure,72ch),100%)}
.viewbadge{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-micro);
font-weight:700;text-transform:uppercase;letter-spacing:.07em;
padding:1px 6px;border-radius:999px;background:var(--amber-bg);
color:var(--amber);border:1px solid var(--amber-line)}
:root[data-sheetview="faithful"] .viewbadge{display:none}
/* ---------- High contrast ------------------------------------------------
Not a mood, a floor. Washes collapse to a left bar plus weight, so a selected
row never depends on a tint that could be stacked below legibility. */
:root[data-contrast="high"]{
--ink-3:var(--ink-2); --ink-4:var(--ink-2);
--line:var(--line-strong); --line-2:var(--line-strong);
--ac-wash:transparent;
}
:root[data-contrast="high"] .out-row.sel,
:root[data-contrast="high"] .cite-row.sel,
:root[data-contrast="high"] .nav-row.sel{
background:transparent;box-shadow:inset 3px 0 0 var(--ac-fill);font-weight:700
}
:root[data-contrast="high"] :focus-visible{outline-width:3px}
/* ---------- Motion ------------------------------------------------------- */
:root[data-motion="reduce"] *,
:root[data-motion="reduce"] *::before{animation:none !important;transition:none !important}
/* ---------- Appearance settings UI --------------------------------------- */
.apr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--sp-6)}
.apr-card{border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--sp-6);
cursor:pointer;background:var(--surface-2);text-align:left}
.apr-card:hover{border-color:var(--ac-edge)}
.apr-card.on{border-color:var(--ac-fill);box-shadow:inset 0 0 0 1px var(--ac-fill);background:var(--ac-wash)}
.apr-name{font-weight:660;font-size:var(--fs-ui)}
.apr-hint{font-size:var(--fs-cap);color:var(--ink-3);margin-top:2px;line-height:1.45}
.apr-mini{display:flex;height:34px;border-radius:4px;overflow:hidden;margin-bottom:var(--sp-5);
border:1px solid var(--line)}
.apr-mini i{display:block;height:100%}
.apr-mini .m-rail{width:26%}
.apr-mini .m-body{flex:1 1 auto;position:relative}
.apr-mini .m-page{position:absolute;inset:5px 20% 5px 8%;border-radius:2px}
.apr-mini .m-dot{position:absolute;right:6px;top:6px;width:10px;height:5px;border-radius:2px}
.swatches{display:flex;flex-wrap:wrap;gap:var(--sp-4)}
.swatch{width:34px;height:34px;border-radius:999px;border:2px solid transparent;cursor:pointer;
position:relative;padding:0}
.swatch.on{border-color:var(--ink);box-shadow:0 0 0 2px var(--panel) inset}
.seg{display:inline-flex;gap:4px;flex-wrap:wrap}
.contrastline{display:flex;align-items:center;gap:var(--sp-5);flex-wrap:wrap;
font-size:var(--fs-ui);padding:var(--sp-5) 0}
/* ============================================================================
OPUS BENCH branding
Colours taken from the app icon: a rose-plum → slate gradient with a
folded-paper mark in pale blue and pale rose. The pastels are used as
SURFACES and facets only; anything carrying text derives a darker role, which
is why the accent has five values rather than one.
========================================================================= */
:root{
--opus-rose:#9a5360; --opus-plum:#705c71; --opus-slate:#4e6481; --opus-mid:#625f77;
--mark-a:#a9bdd3; /* the blue leaf */
--mark-b:#d2a3a8; /* the rose leaf */
}
/* Accent — derived from the icon, roles measured not sampled. */
:root[data-accent="opus"]{--ac-fill:#7d4250;--ac-fill-hover:#6d3944;--ac-on:#fff;--ac-ink:#7a3f4c;--ac-edge:#a86b73;--ac-wash:#f7edee}
:root[data-theme="dark"][data-accent="opus"]{--ac-fill:#d2a3a8;--ac-fill-hover:#dcb2b7;--ac-on:#22141a;--ac-ink:#e3bfc3;--ac-edge:#8a5c64;--ac-wash:#251a1e}
:root[data-accent="slate"]{--ac-fill:#42566f;--ac-fill-hover:#3a4c63;--ac-on:#fff;--ac-ink:#3a4c63;--ac-edge:#7b8ea8;--ac-wash:#eef1f6}
:root[data-theme="dark"][data-accent="slate"]{--ac-fill:#a9bdd3;--ac-fill-hover:#bbcbde;--ac-on:#111a24;--ac-ink:#c0cee1;--ac-edge:#5b6e88;--ac-wash:#171e29}
/* The rail carries the icon's gradient, at the icon's own angle. Nav ink is
lifted to #f5f0f1 so it clears 4.5:1 at the ROSE corner, which is the
darkest-to-text point of the ramp — checking only the middle would ship a
sidebar that goes illegible at one end. */
:root[data-chrome="opus"]{
--nav-fill:var(--opus-plum); --nav-edge:#3d3145;
--nav-ink:#f5f0f1; --nav-ink-dim:#d3c2c8;
}
:root[data-chrome="opus"] #sidebar{
background:linear-gradient(200deg,var(--opus-slate) 0%,var(--opus-mid) 38%,
var(--opus-plum) 66%,var(--opus-rose) 100%);
}
:root[data-chrome="opus"] .nav-row.sel{
background:rgba(255,255,255,.20);border-color:rgba(255,255,255,.30);color:#fff
}
:root[data-chrome="opus"] .nav-row:hover{background:rgba(255,255,255,.13);color:#fff}
:root[data-chrome="opus"] .nav-mark{background:rgba(255,255,255,.16)}
:root[data-chrome="opus"] .nav-foot{border-top-color:rgba(255,255,255,.22)}
:root[data-theme="dark"][data-chrome="opus"] #sidebar{
background:linear-gradient(200deg,#243040 0%,#241f2c 40%,#2e2029 72%,#3a2029 100%);
}
:root[data-theme="dark"][data-chrome="opus"]{--nav-ink:#efe6e8;--nav-ink-dim:#b8a6ad}
.nav-mark svg{display:block}
/* ---------- Viewer panes, echoing the folded-paper mark -------------------
Each pane header carries a two-tone leading edge — blue leaf, rose leaf —
so a stack of viewers reads as a set of folded sheets rather than as
undifferentiated boxes. Purely a top border: no tint sits under any text. */
.pane-bar{position:relative}
.pane-bar::before{
content:"";position:absolute;left:0;right:0;top:0;height:2px;
background:linear-gradient(90deg,var(--mark-a) 0 50%,var(--mark-b) 50% 100%);
opacity:.85;
}
.pane-head{position:relative}
.pane-head::after{
content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
background:linear-gradient(90deg,var(--mark-a),var(--mark-b));
}
/* The pane the editor's section is showing gets the mark at full strength. */
.wp-sec.here .wp-head{box-shadow:inset 3px 0 0 var(--ac-fill)}
/* The writing sheet gets the same folded edge along its top, so the page and
the viewers read as the same family of object. */
.sheet{position:relative;overflow:hidden}
.sheet::before{
content:"";position:absolute;left:0;right:0;top:0;height:3px;
background:linear-gradient(90deg,var(--mark-a) 0 42%,var(--mark-b) 58% 100%);
opacity:.9;
}
:root[data-panels="flat"] .sheet::before{opacity:.7}
/* Review workbench + citation detail get the same treatment, so every
"window" in the app is recognisably part of one set. */
.cite-detail .cd-head{position:relative}
.cite-detail .cd-head::before{
content:"";position:absolute;left:0;right:0;top:0;height:2px;
background:linear-gradient(90deg,var(--mark-a),var(--mark-b));
}
.rv-form .card:first-child{position:relative}
.mrow{position:relative}
.mrow::before{
content:"";position:absolute;left:0;right:0;top:0;height:2px;
background:linear-gradient(90deg,var(--mark-a) 0 50%,var(--mark-b) 50% 100%);
opacity:.55;
}
.mrow.conflict::before{background:var(--red);opacity:.9}
/* Boot screen wears the mark too, so the first thing you see is the app. */
.boot-card{border-top:3px solid transparent;
border-image:linear-gradient(90deg,var(--mark-a),var(--mark-b)) 1}
.boot-title{color:var(--ac-ink)}