/* Surfaces: dropdowns, galleries, tooltips, dialogs, backstage, mini toolbar,
   context menus, print. Timings per Word (menu fade-slide ~160ms). */

/* ---------- layered dropdowns / menus / galleries ---------- */

.surface-root { position: fixed; z-index: 400; }
.dropdown {
  background: var(--menu-bg);
  border: 1px solid var(--menu-border);
  border-radius: 6px;
  box-shadow: var(--menu-shadow);
  min-width: 90px;
  padding: 4px;
  animation: menuIn var(--menu-anim, .16s) ease-out;
}
@keyframes menuIn { from { opacity:.2; transform: translateY(-5px) scale(.99);} to { opacity:1; transform:none;} }
.dropdown.closing { animation: menuOut .12s ease-in forwards; }
@keyframes menuOut { from{opacity:1;} to { opacity:0; transform: translateY(-4px);} }

.menu-item {
  display:flex; align-items:center; gap:9px;
  padding: 5px 10px 5px 8px; border-radius:4px; font-size:12.5px; cursor:default;
  position:relative; white-space:nowrap; color:#222;
}
.menu-item:hover:not(.disabled){background:#f3f2f1;}
.menu-item.disabled{color:var(--disabled);}
.menu-item .mi-icon{width:17px;display:flex;justify-content:center;color:#555;}
.menu-item .mi-label{flex:1;}
.menu-item .mi-hint{color:#888;font-size:11px;margin-left:14px;}
.menu-item.checked::before{
  content:'';position:absolute;left:-7px;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:var(--accent);
}
.menu-sep{height:1px;background:#eceae8;margin:4px 6px;}
.menu-title{font-size:11px;color:#777;padding:4px 10px 2px;}

.swatch-grid{display:grid;grid-template-columns:repeat(10,20px);gap:3px;padding:6px;}
.swatch{width:20px;height:18px;border-radius:2px;border:1px solid rgba(0,0,0,.15);cursor:default;position:relative;}
.swatch:hover{outline:1.5px solid #333; outline-offset:1px;}
.swatch.no-color svg{width:14px;height:14px;}
.theme-row-label{font-size:10px;color:#888;margin:3px 6px 0;}

.font-panel{display:flex;gap:8px;padding:8px;}
.font-pane{width:170px;height:212px;overflow:auto;border:1px solid #e1e1e1;border-radius:4px;background:#fff;}
.font-size-pane{width:58px;}
.font-option{padding:5px 9px;font-size:13px;cursor:default;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.font-option:hover{background:#f3f2f1;}
.font-option.selected{background:#e2ecfa;color:var(--accent-deep);}

/* live hover preview state hook */
.live-preview-active { }

/* ---------------- rich tooltip ---------------- */

.rich-tooltip {
  position: fixed; z-index: 500; pointer-events:none;
  background: var(--tooltip-bg); border: 1px solid var(--tooltip-border);
  border-radius: 4px; box-shadow: 2px 2px 4px rgba(0,0,0,.22);
  max-width: 272px; animation: tipIn .14s ease-out .01s backwards;
  overflow:hidden;
}
@keyframes tipIn { from{opacity:0;transform:translateY(4px);} to{opacity:1;transform:none;} }
.tt-body{padding:7px 11px;font-size:12px;color:#262524;line-height:1.35;}
.tt-kbd{border-top:1px solid var(--tooltip-border);margin-top:2px;padding:5px 11px;background:#fff;font-size:11.5px;color:#444;}

/* ---------------- modal dialog shells ---------------------- */

.modal-veil {
  position: fixed; inset:0; background: rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center; z-index:450;
}
.dialog {
  background:#fff;border:1px solid #c8c6c4;border-radius:8px;
  box-shadow: 0 25px 60px rgba(0,0,0,.28), 0 4px 12px rgba(0,0,0,.16);
  min-width:420px;max-width:92vw;max-height:88vh;display:flex;flex-direction:column;
  animation: dlgIn .17s cubic-bezier(.21,.61,.36,1);
}
@keyframes dlgIn { from{opacity:.4;transform:scale(.97) translateY(-6px);}to{opacity:1;transform:none;} }
.dlg-title{font-size:13.5px;font-weight:600;padding:13px 17px 9px;display:flex;align-items:center;justify-content:space-between;}
.dlg-x{width:30px;height:30px;border:none;background:transparent;border-radius:4px;color:#555;cursor:default;display:flex;align-items:center;justify-content:center;}
.dlg-x:hover{background:#f0efee;color:#111;}
.dlg-body{padding:4px 17px 14px;overflow:auto;font-size:12.5px;}
.dlg-actions{display:flex;gap:8px;justify-content:flex-end;padding:12px 17px 15px;border-top:1px solid #eee;}
.btn-primary,.btn-secondary{border-radius:4px;padding:6px 18px;font:inherit;font-size:12.5px;cursor:default;}
.btn-primary{background:var(--accent);color:#fff;border:none;}
.btn-primary:hover{background:var(--accent-hover);}
.btn-secondary{background:#fff;border:1px solid #cfcdc9;color:#222;}
.btn-secondary:hover{background:#f5f4f3;}
.field-row{display:flex;align-items:center;gap:9px;margin-bottom:9px;}
.field-row label{min-width:96px;font-size:12px;color:#333;}
.field-row input[type=text],.field-row select,.field-row input[type=number]{
  flex:1;border:1px solid #d0cecb;border-radius:3px;padding:4px 7px;font:inherit;font-size:12.5px;background:#fff;min-width:120px;}
.field-row input:focus,.field-row select:focus{outline:1.5px solid var(--accent);}
.group-box{border:1px solid #dedcd9;border-radius:5px;padding:10px 12px;margin-bottom:12px;}
.group-box>legend-t{display:block;font-size:11.5px;color:#666;margin-bottom:8px;}
.checkline{display:flex;align-items:center;gap:7px;margin:4px 0;font-size:12.5px;}
.checkline input{accent-color:var(--accent);width:14px;height:14px;}
.dlg-preview{border:1px dashed #bbb;border-radius:4px;background:#fafafa;padding:12px;font-size:14px;min-height:52px;display:flex;align-items:center;justify-content:center;}

.margin-preview{width:86px;height:108px;border:1px solid #999;background:#fff;position:relative;margin:auto;}
.margin-shade{position:absolute;background:#dfe9f6;}
.printer-page{background:white;box-shadow:var(--page-shadow);margin:10px auto;position:relative;overflow:hidden;}
.pane-dialog{display:flex;gap:10px;}

/* ---------------- backstage --------------------------------- */

.backstage {
  position:absolute; inset:0; z-index:300; background: var(--chrome-bg);
  display:flex; animation: stageIn .19s ease-out;
}
@keyframes stageIn { from { opacity:.4; } to { opacity:1; } }
.bs-nav {
  width: 200px; background: var(--accent-deep);
  color:#fff; padding: 6px 0 18px; flex:none;
  display:flex;flex-direction:column;
}
.bs-back{display:flex;align-items:center;gap:10px;color:#dbe6ff;padding:12px 18px 14px;font-size:12px;cursor:default;}
.bs-back:hover{color:#fff;}
.bs-item{display:flex;align-items:center;gap:13px;padding:11px 16px;font-size:13px;cursor:default;color:#dbe9ff;border:none;background:transparent;text-align:left;width:100%;font-family:inherit;}
.bs-item:hover{background:rgba(255,255,255,.09);}
.bs-item.active{background:rgba(255,255,255,.17);font-weight:600;color:#fff;box-shadow:inset 3px 0 0 #9ab8ff;}
.bs-main{flex:1;background:#fff;overflow:auto;padding:26px 34px;animation: bsPanelIn .2s ease-out;}
@keyframes bsPanelIn { from{opacity:0;transform:translateX(14px);} to{opacity:1;transform:none;} }
.bs-h1{font-size:23px;font-weight:350;margin:0 0 18px;color:#111;}
.doc-thumb-grid{display:flex;flex-wrap:wrap;gap:16px;}
.doc-thumb{width:158px;cursor:default;}
.doc-thumb .thumb-frame{height:198px;border:1px solid #d9d9d9;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12);overflow:hidden;position:relative;}
.doc-thumb:hover .thumb-frame{border-color:var(--accent);box-shadow:0 0 0 1.5px var(--accent),0 2px 8px rgba(24,90,189,.22);}
.doc-thumb .thumb-name{font-size:12px;margin-top:7px;color:#222;}
.doc-thumb .thumb-sub{font-size:10.5px;color:#888;}
.recent-list{max-width:660px;}
.recent-row{display:flex;align-items:center;gap:13px;padding:9px 8px;border-radius:5px;}
.recent-row:hover{background:#f5f4f2;}
.recent-icon{width:30px;height:38px;flex:none;box-shadow:0 1px 2px rgba(0,0,0,.2);position:relative;overflow:hidden;}
.stat-table{border-collapse:collapse;font-size:12.5px;}
.stat-table td{padding:4px 26px 4px 0;color:#333;}
.stat-table td.k{color:#777;}
.prop-line{display:flex;align-items:center;gap:8px;margin:7px 0;}
.prop-input{border:none;border-bottom:1px dotted #aaa;padding:3px 2px;font:inherit;font-size:12.5px;min-width:240px;}
.prop-input:focus{outline:none;border-bottom:1.5px solid var(--accent);}

/* ---------------- find pane ------------------------------- */

.find-pane{
  position:absolute;top:0;right:0;bottom:25px;width:288px;background:var(--chrome-bg-deep);
  border-left:1px solid var(--chrome-border);z-index:80;display:flex;flex-direction:column;
  animation: panelSlide .17s ease-out;font-size:12.5px;
}
@keyframes panelSlide{from{transform:translateX(40px);opacity:.3;}to{transform:none;opacity:1;}}
.fp-head{display:flex;align-items:center;gap:6px;padding:9px 11px;font-weight:600;color:#333;}
.fp-search{display:flex;padding:0 11px 9px;gap:6px;}
.fp-search input{flex:1;border:1px solid #c8c6c4;border-radius:3px;padding:5px 8px;font:inherit;}
.fp-results{flex:1;overflow:auto;padding:8px 6px;}
.fp-result{padding:7px 10px;border-radius:4px;cursor:default;font-size:12px;line-height:1.35;}
.fp-result:hover{background:#ebebe9;}
.fp-result.current{background:#dbe8f8;box-shadow:inset 0 0 0 1px #a9c6e8;}
.fp-result b{color:var(--accent-deep);}
.fp-countbar{padding:7px 12px;color:#555;border-top:1px solid var(--chrome-border);}
.fp-optrow{display:flex;gap:12px;padding:2px 12px 8px;font-size:11.5px;color:#444;}

/* ---------------- mini toolbar & context menu ------------- */

.mini-toolbar{
  position:fixed;z-index:390;background:#fff;border:1px solid #d6d3d0;border-radius:5px;
  box-shadow:0 3.5px 9px rgba(0,0,0,.22);padding:3px;display:flex;align-items:center;gap:1px;
  opacity:0;pointer-events:none;transform:translateY(6px);
  transition:opacity .12s ease-out, transform .12s ease-out;
}
.mini-toolbar.visible{opacity:1;pointer-events:auto;transform:none;}
.mini-toolbar button{width:27px;height:27px;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;border-radius:3px;cursor:default;color:#333;}
.mini-toolbar button:hover{background:var(--chrome-hover);}
.mini-toolbar .mt-sep{width:1px;height:19px;background:#e3e1de;margin:0 3px;}
.mini-fontsel{height:26px;border:1px solid #ddd;border-radius:3px;font:inherit;font-size:12px;background:#fff;cursor:default;}

.ctx-menu{min-width:220px;}
.font-ctx-btn{display:block;width:100%;text-align:left;border:none;background:transparent;padding:6px 12px;font-size:16px;color:#201f1e;border-radius:4px;cursor:default;font-family:inherit;}
.font-ctx-btn:hover{background:#f3f2f1;color:var(--accent);}
.squiggle-menu-word{font-size:15px;}

.drag-ghost{position:fixed;z-index:520;pointer-events:none;filter:drop-shadow(0 3px 6px rgba(0,0,0,.3));}

/* print */
@media print {
  body * { visibility: hidden !important; }
  #app, #app * { visibility: visible !important; }
  .titlebar,.tab-strip,.ribbon-body,.statusbar,.ruler-wrap,.find-pane,.backstage,.mini-toolbar,.surface-root,.modal-veil { display:none !important; }
  .editor-viewport { overflow: visible !important; background:#fff !important; }
  .zoom-layer { transform:none !important; width:auto !important; height:auto !important; }
  .selection-layer,.find-layer,.caret { display:none !important; }
  .doc-flow { margin:0 !important; }
  .page { position: relative !important; left:0 !important; top:0 !important; transform:none !important; break-after: page; box-shadow:none !important; margin:0 !important;}
  @page { margin: 0; size: letter; }
}