:root{
  /* MS Word blue — the title-bar colour of Word 2013–2019 */
  --word-blue:#2b579a;
  --word-blue-dark:#1e3f73;
  --accent:#2b579a;
  --accent-dark:#1e3f73;
  --ink:#111827;
  --muted:#6b7280;
  --line:#e5e7eb;
  --bg:#f3f4f6;
  --chrome:#ffffff;
  --radius:8px;
  --font:"Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --docfont:Calibri,Carlito,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;height:100%}
body{
  font-family:var(--font);color:var(--ink);background:var(--bg);
  display:flex;flex-direction:column;height:100dvh;overflow:hidden;
}
button,select,input{font-family:inherit;font-size:14px}
button{
  background:#fff;border:1px solid var(--line);color:var(--ink);
  border-radius:6px;padding:5px 9px;cursor:pointer;line-height:1.3;
}
button:hover{border-color:var(--accent);background:#fafafa}
button:active{background:#f0f0f0}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
button.primary:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
button[aria-pressed="true"]{background:#eceef1;border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.grow{flex:1 1 auto}

/* ---------- top bar: the MS Word blue title bar ---------- */
.topbar{
  display:flex;align-items:center;gap:14px;padding:8px 14px;background:var(--word-blue);
  border-bottom:1px solid var(--word-blue-dark);flex:0 0 auto;color:#fff;
}
.brand{display:flex;align-items:center;gap:8px;font-weight:600;letter-spacing:.2px;color:#fff}
/* the mark is the same document glyph as the favicon, minus its blue tile: the blue bar
   is the background, so the page is white and the text lines take the bar's colour */
.brand .mark{height:20px;width:16px;flex:0 0 auto;display:block}
.menu{position:relative}
/* the generic button style is white-on-dark, so the only buttons inside the topbar need
   overriding are the menu button itself — the dropdown below is white and must keep dark
   text, or it renders white on white */
.topbar .menubtn{background:transparent;border-color:transparent;color:#fff}
.topbar .menubtn:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4)}
.topbar .menubtn:active{background:rgba(255,255,255,.28)}
.dropdown{
  position:absolute;top:calc(100% + 6px);left:0;z-index:40;min-width:250px;background:#fff;
  color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 10px 30px rgba(0,0,0,.12);
  padding:6px;display:flex;flex-direction:column;
}
.dropdown button{text-align:left;border:0;border-radius:5px;padding:8px 10px;background:transparent}
.dropdown button:hover{background:#f3f4f6}
.dropdown hr{border:0;border-top:1px solid var(--line);margin:5px 4px}
.dropdown .k{font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:0 4px;margin-left:6px}
.docname{font-size:13px;color:rgba(255,255,255,.85);max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- start screen ---------- */
main{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.start{
  flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:24px;text-align:center;
}
.start h1{margin:0;font-size:34px;letter-spacing:-.5px}
.start .lede{margin:0;max-width:33em;color:var(--muted);line-height:1.55}
.start .lede code{background:#fff;border:1px solid var(--line);border-radius:4px;padding:1px 5px;font-size:.92em}
.cta{display:flex;gap:10px;margin-top:6px}
.cta button{padding:9px 18px;font-size:15px}

/* ---------- workspace ---------- */
#workspace{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.toolbar{
  display:flex;align-items:center;gap:8px;padding:7px 12px;background:var(--chrome);
  border-bottom:1px solid var(--line);flex:0 0 auto;flex-wrap:wrap;
}
.toolbar .group{display:flex;gap:3px;align-items:center;padding-right:8px;border-right:1px solid var(--line)}
.toolbar .group:last-of-type{border-right:0}
.toolbar button{min-width:32px;padding:5px 7px}
#style-select{padding:5px 6px;border:1px solid var(--line);border-radius:6px;background:#fff}

.scroll{flex:1 1 auto;min-height:0;overflow:auto;padding:22px 12px 60px;display:flex;justify-content:center}
.page{
  background:#fff;width:100%;max-width:816px;min-height:1056px;
  box-shadow:0 1px 3px rgba(0,0,0,.14);border-radius:2px;
  padding:76px 72px;
}

/* ---------- the document surface ---------- */
.editor{
  font-family:var(--docfont);font-size:11pt;line-height:1.5;color:#000;
  outline:none;word-wrap:break-word;overflow-wrap:break-word;
}
.editor:focus{outline:none}
.editor p.block{margin:0 0 8pt}
.editor p.h1{font-size:19pt;font-weight:700;margin:14pt 0 8pt}
.editor p.h2{font-size:15pt;font-weight:700;margin:12pt 0 6pt}
.editor p.h3{font-size:12.5pt;font-weight:700;margin:10pt 0 5pt;color:#1f2937}
.editor p.h4{font-size:11pt;font-weight:700;font-style:italic;margin:9pt 0 4pt}
.editor p.listitem{padding-left:30px;position:relative}
.editor p.listitem[data-list="bullet"]::before,
.editor p.listitem[data-list="number"]::before{
  content:attr(data-num);position:absolute;left:0;width:22px;text-align:right;
}
.editor p.listitem[data-ilvl="1"]{padding-left:52px}
.editor p.listitem[data-ilvl="2"]{padding-left:74px}
.editor p.delblank::before{content:"" !important}
.editor a.doclink{color:#1d4ed8;text-decoration:underline}
.editor img.docimg{max-width:100%;height:auto;vertical-align:middle;display:inline-block}
.editor img.docimg-missing{opacity:.35;width:38px;height:38px;background:#f3f4f6;border:1px dashed #9ca3af}
.editor table.doctable{border-collapse:collapse;width:100%;margin:6pt 0 10pt;table-layout:fixed}
.editor table.doctable td{border:1px solid #9ca3af;padding:4px 6px;vertical-align:top;min-width:24px}
.editor table.doctable td > p.block{margin:0}
.editor table.doctable td > p.block + p.block{margin-top:6pt}

/* ---------- notices ---------- */
.notice{
  flex:0 0 auto;background:#fbfbfc;border-bottom:1px solid var(--line);padding:9px 14px;
  font-size:13px;color:#374151;
}
.notice .row{display:flex;gap:10px;align-items:flex-start}
.notice b{color:var(--ink)}
.notice details{margin-top:6px}
.notice summary{cursor:pointer;color:var(--accent-dark);font-weight:600;font-size:12.5px}
.notice ul{margin:6px 0 0 18px;padding:0}
.notice li{margin:2px 0}
.notice .warn{color:#92400e}
.notice .close{margin-left:auto;border:0;background:transparent;color:var(--muted);font-size:16px;padding:0 4px}

/* ---------- status bar ---------- */
.statusbar{
  flex:0 0 auto;display:flex;gap:16px;align-items:center;padding:6px 14px;background:var(--chrome);
  border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);
}

/* ---------- dialogs ---------- */
dialog{border:0;border-radius:var(--radius);box-shadow:0 20px 60px rgba(0,0,0,.25);padding:0;max-width:94vw}
dialog::backdrop{background:rgba(17,24,39,.35)}
.dlg{padding:18px;display:flex;flex-direction:column;gap:10px;width:440px;max-width:92vw}
.dlg.wide{width:660px}
.dlg h2{margin:0 0 2px;font-size:17px}
.dlg h3{margin:10px 0 0;font-size:13.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
.dlg p{margin:0;font-size:13.5px;line-height:1.55}
.dlg ul{margin:4px 0 0 18px;padding:0;font-size:13.5px;line-height:1.55}
.dlg label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:#374151}
.dlg label.row{flex-direction:row;align-items:center;gap:7px}
.dlg input[type=text],.dlg input[type=url]{
  padding:7px 9px;border:1px solid var(--line);border-radius:6px;font-size:14px;width:100%;
}
.dlg .hint{font-size:12.5px;color:var(--muted)}
.dlg menu{display:flex;gap:8px;justify-content:flex-end;margin:6px 0 0;padding:0}
.dlg.wide menu{justify-content:flex-start}

/* ---------- drop veil + toast ---------- */
.dropveil{
  position:fixed;inset:0;z-index:90;background:rgba(243,244,246,.92);
  display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--accent-dark);
}
.dropveil > div{border:2px dashed var(--accent);border-radius:14px;padding:40px 60px;background:#fff}
.toast{
  position:fixed;left:50%;bottom:34px;transform:translateX(-50%);z-index:100;
  background:#111827;color:#fff;padding:9px 15px;border-radius:20px;font-size:13.5px;
  max-width:88vw;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.24);
}

@media (max-width:760px){
  .page{padding:26px 18px;min-height:0}
  .scroll{padding:10px 6px 40px}
  .docname{display:none}
  .toolbar{gap:5px}
  .toolbar .group{padding-right:5px}
}
@media print{
  .topbar,.toolbar,.statusbar,.notice,.dropveil,.toast{display:none !important}
  body{background:#fff;display:block;height:auto;overflow:visible}
  main,#workspace,.scroll{display:block;overflow:visible;padding:0;height:auto}
  .page{box-shadow:none;max-width:none;width:auto;padding:0;min-height:0}
}