/* ============ editor.css — ruler, pages, document canvas, panes ============ */
#main{display:flex;flex:1;min-height:0;position:relative}
#editorarea{flex:1;min-width:0;display:flex;flex-direction:column;position:relative}

/* ---------------- ruler ---------------- */
#rulerrow{display:flex;flex:0 0 auto;background:var(--ruler-bg);border-bottom:1px solid #d9d9d9;height:30px;position:relative;z-index:5}
#vruler{width:24px;flex:0 0 auto;position:relative;border-right:1px solid #e3e3e3;background:var(--ruler-bg);overflow:hidden}
#vruler .vr-tick{position:absolute;right:3px;background:#b0b0b0;width:14px;height:1px}
#vruler .vr-tick.major{width:18px;background:#999}
#vruler .vr-mark{position:absolute;right:0;background:#dfe7f2;border-left:1px solid #c4d0e0;width:100%}
#hrulerwrap{flex:1;position:relative;overflow:hidden;min-width:0}
#hruler{position:absolute;left:0;top:0;height:30px;overflow:hidden;width:0}
#hruler .hr-marks{position:absolute;left:0;top:0;width:100%;height:30px;background:var(--ruler-bg)}
#hruler .hr-tick{position:absolute;bottom:4px;background:#b0b0b0;width:1px;height:9px}
#hruler .hr-tick.major{background:#999;height:12px;bottom:1px}
#hruler .hr-tick.half{background:#c8c8c8;height:7px;bottom:6px}
#hruler .hr-num{position:absolute;bottom:1px;font-size:8.5px;color:#8a8a8a;font-family:'Segoe UI',sans-serif}
#hruler .hr-margin{position:absolute;top:0;bottom:0;background:#dfe7f2;border-left:1px solid #c4d0e0;border-right:1px solid #c4d0e0;z-index:1}
.hr-handle{
  position:absolute;z-index:3;top:0;width:10px;height:30px;cursor:ew-resize;
}
.hr-handle::before{content:"";position:absolute;left:3px;top:0;bottom:0;width:3px;background:#7f9cc4}
.hr-indent-marker{position:absolute;z-index:4;width:13px;height:13px;cursor:ew-resize;top:6px;background:#fff;border:1px solid #7f9cc4;border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.hr-indent-marker::before{content:"";position:absolute;left:2px;right:2px;top:2px;bottom:2px;border:1px solid #7f9cc4}
.hr-indent-marker.firstline{clip-path:polygon(50% 0,100% 100%,0 100%)}
.hr-indent-marker.hanging{clip-path:polygon(0 0,100% 0,50% 100%)}
.hr-indent-marker.left{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);opacity:.85}
.hr-tabstop{position:absolute;z-index:4;width:0;height:0;cursor:pointer;top:6px}
.hr-tabstop::before{content:"";position:absolute;left:-5px;top:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:8px solid #7f9cc4;width:0;height:0}
.hr-tabstop.center::before{border-top-color:#2b579a}
.hr-tabstop.right::before{border-top-color:#c0504d}
.hr-tabstop.decimal::before{border-top-color:#538135}
.hr-tabstop.dragging{opacity:.6}
#hrulerPos{position:absolute;top:0;height:30px;width:0;border-left:1px dotted #9db8d8;z-index:2;pointer-events:none}

/* ---------------- page scroll area ---------------- */
#pagescroll{flex:1;overflow:auto;background:var(--editor-bg);position:relative}
#pagetrack{width:max-content;margin:0 auto;padding:28px 0 48px;min-width:100%;position:relative;display:flex;justify-content:center}
#pages{outline:none;width:max-content;display:flex;flex-direction:column;align-items:center;gap:26px;cursor:text;padding-bottom:20px}
body.layout-web #pages{gap:0}
body.layout-web .word-page{box-shadow:none;border:none;margin:0}
#pages :focus{outline:none}

.word-page{
  position:relative;background:#fff;box-shadow:var(--page-shadow);
  display:flex;flex-direction:column;flex:0 0 auto;
}
body.layout-draft .word-page{box-shadow:none;border-left:1px solid #ccc;border-right:1px solid #ccc;border-bottom:1px dashed #bbb;padding-bottom:26px;background:#fff}
.page-hd,.page-ft{flex:0 0 auto;position:relative;background:#fff}
.page-hd .hd-inner,.page-ft .ft-inner{
  width:100%;padding:0;font-family:'Calibri','Segoe UI',sans-serif;font-size:11pt;color:#595959;line-height:1.2;cursor:pointer;
}
.page-hd .hd-inner:focus,.page-ft .ft-inner:focus{outline:none;cursor:text}
.hd-placeholder,.ft-placeholder{color:#a8a8a8;font-size:10pt;display:none}
body:not(.header-mode) .page-hd:hover .hd-placeholder,body:not(.header-mode) .page-ft:hover .ft-placeholder{display:block}
body.header-mode .page-hd:hover,.body.header-mode .page-ft:hover{background:#f3f8fd}
body.header-mode .page-hd .hd-inner,body.header-mode .page-ft .ft-inner{outline:1px dashed #c4d0e0;outline-offset:1px}
body.header-mode #pages .pc{opacity:.55;pointer-events:none}
body.header-mode .page-hd .hd-inner,body.header-mode .page-ft .ft-inner{pointer-events:auto}

.pc{position:relative;outline:none;overflow:hidden;font-family:'Calibri',sans-serif;font-size:11pt;color:#1e1e1e;line-height:1.08}
body.layout-web .pc{overflow:visible}
body.layout-draft .pc{overflow:visible}

/* page break element (block) */
.pc .wpb{height:0;overflow:hidden}

/* watermark */
.wm-layer{position:absolute;inset:0;pointer-events:none;z-index:1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.wm-text{
  font-family:'Calibri',sans-serif;font-size:84px;font-weight:700;color:rgba(200,200,200,.35);
  transform:rotate(-30deg);white-space:nowrap;letter-spacing:2px;
}

/* gridlines */
body.gridlines-on .pc{background-image:linear-gradient(rgba(180,180,200,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(180,180,200,.35) 1px,transparent 1px);background-size:10px 10px}

/* selection & caret colors */
.pc::selection,.pc ::selection{background:var(--sel)}
.pc ::selection{background:var(--sel)}
#readmode ::selection{background:#cce4f5}
.caret{caret-color:auto}
.pc .cm-mark{background:rgba(255,200,0,.28);border-bottom:1px solid #c9a227}
.pc .cm-mark:hover{background:rgba(255,200,0,.4)}
.pc .find-match{background:#ffd966}
.pc .find-current{background:#ff9632}

/* spelling & grammar squiggles */
.sq-spell{text-decoration:underline wavy #ff0000;text-decoration-thickness:1px;text-underline-offset:3px}
.sq-grammar{text-decoration:underline wavy #0f6cbd;text-decoration-thickness:1px;text-underline-offset:3px}
.sq-ignore{text-decoration:none}

/* typing-state flash (not used visually) */
/* images */
.pc img{max-width:100%;cursor:default;vertical-align:bottom}
.pc .imgwrap{display:inline-block;line-height:0}
.pc .imgwrap.img-selected{outline:1px solid var(--accent)}
.pc a{color:#0563c1;text-decoration:underline}
.pc a:focus-visible{outline:1px solid #0563c1}

/* tab stop span */
.pc .wtab{display:inline-block;height:1px;vertical-align:baseline}

/* fields (page numbers etc.) */
.pc .field,.page-hd .field,.page-ft .field{
  color:#2b579a;border:1px dotted #2b579a;padding:0 2px;border-radius:2px;cursor:pointer;
}
.page-hd .field,.page-ft .field{color:#595959;border-color:#9db8d8}

/* tables */
.pc table{border-collapse:collapse;border:1px solid #7f7f7f;width:100%;margin:2px 0}
.pc td{border:1px solid #7f7f7f;padding:3px 5px;vertical-align:top;min-width:24px;font-size:11pt}
.pc td:focus{outline:1px solid var(--accent)}
.pc table.tbl-selected td::after{content:"";position:absolute;inset:0}
.pc .tbl-rowhandles{position:absolute;left:0;top:0;width:16px;height:16px}

/* TOC */
.pc .toc{border:1px solid #bfbfbf;background:#fafafa;padding:10px 16px;margin:6px 0}
.pc .toc-title{font-size:12pt;font-weight:700;text-align:center;margin-bottom:8px}
.pc .toc-row{display:flex;align-items:baseline;font-size:10.5pt;line-height:1.5}
.pc .toc-row .toc-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc .toc-row .toc-dots{flex:1;border-bottom:1px dotted #666;margin:0 4px;min-width:12px}
.pc .toc-row .toc-page{font-size:10.5pt}
.pc .toc-l2 .toc-text{padding-left:22px}
.pc .toc-l3 .toc-text{padding-left:44px}

/* header/footer editing toolbar */
#hfToolbar{
  position:fixed;z-index:700;background:var(--ribbon-bg);border:1px solid #c8c8c8;border-radius:4px;
  box-shadow:0 4px 12px rgba(0,0,0,.18);padding:5px 8px;display:flex;align-items:center;gap:4px;
}
.hfbar-inner{display:flex;align-items:center;gap:6px}
.hfbar-title{font-weight:600;font-size:12.5px;margin-right:8px;color:#333}
.hfbar-inner .ribbon-btn{width:auto;padding:0 8px;font-size:11.5px}

/* ---------------- nav pane ---------------- */
#navpane{
  width:310px;flex:0 0 auto;background:#fff;border-right:1px solid #d9d9d9;display:flex;flex-direction:column;min-height:0;
}
#navpane.collapsed{width:40px}
.nav-search-row{padding:10px 12px 6px;border-bottom:1px solid #ececec}
.nav-search-box{
  display:flex;align-items:center;background:#fff;border:1px solid #ababab;border-radius:2px;height:26px;padding:0 8px;
}
.nav-search-box:focus-within{outline:1px solid var(--accent)}
.nav-search-icon{width:13px;height:13px;fill:#777;margin-right:6px}
#navSearchInput{border:none;outline:none;flex:1;font-size:12px}
.nav-tabs{display:flex;border-bottom:1px solid #e3e3e3;padding:0 8px}
.nav-tab{flex:1;padding:7px 4px;font-size:11.5px;color:#555;border-bottom:2px solid transparent;text-align:center}
.nav-tab:hover{background:var(--btn-hover)}
.nav-tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
.nav-content{flex:1;overflow-y:auto;min-height:0}
.nav-panel{padding:6px 4px}
.nav-summary{font-size:11px;color:#777;padding:6px 10px;font-weight:600}
.nav-list{list-style:none}
.nav-item{padding:5px 10px;border-radius:3px;cursor:pointer;font-size:12px;display:block;width:100%;text-align:left}
.nav-item:hover{background:#eef4fa}
.nav-item .ni-snippet{color:#555;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-item .ni-snippet mark{background:#ffe59e;color:inherit}
.nav-item .ni-line{font-size:10.5px;color:#999;display:block}
.nav-item.current{background:#d5e4f3}
.nav-heading-item{display:flex;align-items:center;gap:6px;padding:4px 10px;font-size:12px;cursor:pointer;border-radius:3px;color:#333}
.nav-heading-item:hover{background:#eef4fa}
.nav-heading-item.h1{font-weight:700}
.nav-heading-item.h2{padding-left:26px}
.nav-heading-item.h3{padding-left:42px}
.nav-heading-item .nh-count{font-size:10px;color:#999;margin-left:auto}
.nav-page-item{display:flex;align-items:center;gap:8px;padding:5px 10px;cursor:pointer;border-radius:3px}
.nav-page-item:hover{background:#eef4fa}
.nav-page-item .np-thumb{width:26px;height:34px;border:1px solid #bbb;background:#fff;flex:0 0 auto;position:relative;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.nav-page-item .np-thumb .np-line{position:absolute;left:3px;right:3px;height:2.5px;background:#cfcfcf}
.nav-page-item .np-title{font-size:12px}
.nav-page-item.current{background:#d5e4f3}

/* ---------------- comment pane ---------------- */
#commentpane{
  width:290px;flex:0 0 auto;background:#fff;border-left:1px solid #d9d9d9;display:flex;flex-direction:column;min-height:0;
}
.commentpane-head{
  display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #ececec;font-weight:600;font-size:13px;
}
.commentpane-close{width:24px;height:24px;border-radius:3px;display:flex;align-items:center;justify-content:center;color:#666}
.commentpane-close:hover{background:var(--btn-hover)}
.commentpane-close svg{width:12px;height:12px}
#commentList{flex:1;overflow-y:auto;padding:10px}
.cmt-card{border:1px solid #e3e3e3;border-radius:4px;margin-bottom:10px;background:#fff}
.cmt-card.resolved{opacity:.55}
.cmt-card .cmt-head{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid #f0f0f0}
.cmt-avatar{width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex:0 0 auto}
.cmt-author{font-weight:600;font-size:12px}
.cmt-time{font-size:10.5px;color:#999;margin-left:auto}
.cmt-quote{background:#fffbe6;border-left:3px solid #e6c74e;padding:6px 10px;font-size:11.5px;color:#555;font-style:italic;margin:8px 10px;border-radius:2px}
.cmt-body{padding:8px 10px;font-size:12.5px;line-height:1.45}
.cmt-actions{display:flex;gap:4px;padding:0 8px 8px}
.cmt-action{font-size:11.5px;color:var(--accent);padding:3px 8px;border-radius:3px}
.cmt-action:hover{background:#eef4fa}
.cmt-reply{margin:0 10px 10px;border-top:1px solid #f0f0f0;padding-top:8px}
.cmt-reply-input{width:100%;border:1px solid #d5d5d5;border-radius:3px;padding:6px 8px;font-size:12px;resize:vertical;min-height:42px}
.cmt-reply-input:focus{outline:1px solid var(--accent)}
.cmt-new{margin-top:12px}
#commentList .cmt-empty{color:#999;font-size:12px;text-align:center;padding:30px 10px}

/* ---------------- read mode ---------------- */
#readmode{position:fixed;inset:0;z-index:1200;background:#f3f3f3;display:flex;flex-direction:column}
.rm-toolbar{height:48px;background:#fff;border-bottom:1px solid #d9d9d9;display:flex;align-items:center;gap:10px;padding:0 16px;flex:0 0 auto}
.rm-btn{padding:6px 14px;border-radius:3px;font-size:12.5px}
.rm-btn:hover{background:var(--btn-hover)}
.rm-search{display:flex;align-items:center;gap:6px;border:1px solid #ababab;border-radius:2px;padding:0 8px;height:28px;width:260px}
.rm-search input{border:none;outline:none;flex:1;font-size:12px;background:transparent}
.rm-search-icon{width:13px;height:13px;fill:#777}
.rm-spacer{flex:1}
.rm-pageno{font-size:12px;color:#555;min-width:56px;text-align:center}
.rm-content{flex:1;overflow:auto;display:flex;flex-direction:column;align-items:center;padding:40px 0 80px}
.rm-page{
  background:#fff;box-shadow:0 0 0 1px #d0d0d0,0 4px 16px rgba(0,0,0,.15);margin:14px 0;
  display:flex;flex-direction:column;overflow:hidden;flex:0 0 auto;
}
.rm-page .pc{cursor:text}
.rm-page .rm-hd,.rm-page .rm-ft{flex:0 0 auto}
.rm-page .rm-hd .hd-inner,.rm-page .rm-ft .ft-inner{color:#595959}

/* ---------------- image handles ---------------- */
#imageHandles .ih-corner{position:absolute;width:9px;height:9px;background:#fff;border:1px solid var(--accent)}
#imageHandles .ih-corner:hover{background:var(--accent)}

/* ---------------- drag & drop overlay ---------------- */
#dragthumb{
  position:fixed;z-index:1000;border:2px solid var(--accent);background:rgba(43,89,154,.08);
  pointer-events:none;display:none;border-radius:2px;
}

/* responsive */
@media (max-width:900px){
  #navpane{position:absolute;top:0;bottom:0;left:0;z-index:100;box-shadow:2px 0 12px rgba(0,0,0,.15)}
  #commentpane{position:absolute;top:0;bottom:0;right:0;z-index:100;box-shadow:-2px 0 12px rgba(0,0,0,.15)}
}

/* ---------------- print ---------------- */
@media print{
  @page{size:letter;margin:0}
  html, body{height:auto;overflow:visible}
  #titlebar, #tabstrip, #ribbon, #statusbar, #navpane, #commentpane,
  #backstage, #readmode, #modalroot, #toastroot, #hfToolbar, #rulerrow,
  #dropdownLayer, #contextmenu, #tooltip, #floatingBar, #imageHandles,
  #dragthumb, #winCtrls, #tellmeWrap, #autosaveBox, #saveStatus {
    display:none !important;
  }
  #app{display:block;height:auto}
  #main{display:block;height:auto;overflow:visible}
  #editorarea{display:block;height:auto}
  #pagescroll{display:block;overflow:visible;height:auto;background:#fff}
  #pagetrack{padding:0;margin:0;width:auto;min-width:0;display:block}
  #pages{gap:0;display:block;padding:0}
  .word-page{box-shadow:none;page-break-after:always;display:block;height:1055px !important}
  .word-page:last-child{page-break-after:auto}
  .pc{overflow:visible;display:block;height:863px !important}
}