/* Rich Docs tools (static/js/docs_rich.js): toolbar pickers, colour palette, table grid, image controls,
   page setup / header & footer dialogs, and the special blocks drawn inside the page. */

:root { --dr-handle: #1a73e8; --dr-table-line: #000000; --dr-guide: rgba(0, 0, 0, .2); --dr-swatch-edge: rgba(0, 0, 0, .12);
  --dr-toc-link: #1155cc; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --dr-handle: #8ab4f8; --dr-table-line: #9aa0a6; --dr-guide: rgba(255, 255, 255, .22);
    --dr-swatch-edge: rgba(255, 255, 255, .22); --dr-toc-link: #8ab4ff; }
}
:root[data-theme="dark"] { --dr-handle: #8ab4f8; --dr-table-line: #9aa0a6; --dr-guide: rgba(255, 255, 255, .22);
  --dr-swatch-edge: rgba(255, 255, 255, .22); --dr-toc-link: #8ab4ff; }
/* a dark (uncoloured) page: text set to black shows in the page's text colour, text on a light highlight turns dark
   (runCss writes var(--dr-ink, #000000) and var(--dr-on-light, currentColor)) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .doc-page:not(.dr-page-colored) { --dr-ink: var(--page-text); --dr-on-light: #1d2129; }
}
:root[data-theme="dark"] .doc-page:not(.dr-page-colored) { --dr-ink: var(--page-text); --dr-on-light: #1d2129; }
.doc-page.dr-page-colored { --dr-table-line: var(--page-text); }

/* ---------------------------------------------------------------- toolbar controls */
.dr-tool { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 32px; min-width: 32px;
  padding: 0 6px; border: 0; border-radius: 6px; background: transparent; color: var(--text); font-size: 13.5px;
  cursor: pointer; flex: none; white-space: nowrap; }
.dr-tool:hover { background: var(--surface-3); }
.dr-tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dr-tool:disabled { opacity: .4; cursor: default; background: transparent; }
.dr-tool[aria-pressed="true"], .dr-tool[aria-expanded="true"] { background: var(--accent-weak); color: var(--accent); }
.dr-tool svg.icon { width: 18px; height: 18px; }
.dr-tool svg.icon.sm { width: 14px; height: 14px; }
.dr-tool.danger:hover { background: var(--danger-weak); color: var(--danger); }

.dr-font-btn { width: 118px; justify-content: space-between; padding: 0 4px 0 8px; }
.dr-font-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.menu .dr-font-item { font-size: 14px; }
.menu .dr-font-item > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.dr-size { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.dr-size-step { width: 26px; min-width: 26px; padding: 0; }
.dr-size-input { width: 40px; height: 26px; padding: 0 2px; border: 1px solid var(--border-strong); border-radius: 4px;
  background: var(--surface); color: var(--text); font-size: 13.5px; text-align: center; outline: none; }
.dr-size-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--sel); }
.dr-size-input:disabled { opacity: .5; }
.menu.dr-size-menu { min-width: 76px; }
.menu.dr-size-menu .menu-item { height: 32px; padding: 0 14px 0 10px; gap: 8px; font-variant-numeric: tabular-nums; }

.dr-color-tool { flex-direction: column; gap: 1px; padding: 3px 7px 0; }
.dr-color-tool svg.icon { width: 16px; height: 16px; }
.dr-color-bar { display: block; width: 18px; height: 4px; border-radius: 1px; }
.dr-color-bar.none { box-shadow: inset 0 0 0 1px var(--border-strong); }

/* ---------------------------------------------------------------- popovers (opened through ui.popover) */
.menu.dr-pop { max-width: none; padding: 0; }

.dr-color { display: flex; flex-direction: column; gap: 4px; padding: 12px; }
.dr-color-row { display: grid; grid-template-columns: repeat(10, 20px); gap: 4px; }
.dr-color-row.gap { margin-bottom: 6px; }
.dr-swatch { position: relative; width: 20px; height: 20px; padding: 0; border: 1px solid var(--dr-swatch-edge);
  border-radius: 50%; cursor: pointer; transition: transform .08s ease-out; }
.dr-swatch:hover { transform: scale(1.15); }
.dr-swatch:focus-visible, .dr-color-add:focus-visible, .dr-color-none:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dr-swatch[aria-pressed="true"]::after { content: ""; position: absolute; left: 6px; top: 2.5px; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.dr-swatch.light[aria-pressed="true"]::after { border-color: #202124; }
.dr-color-none { display: flex; align-items: center; gap: 8px; height: 30px; margin-bottom: 6px; padding: 0 12px 0 6px;
  border: 1px solid var(--border-strong); border-radius: 6px; background: transparent; color: var(--text); font-size: 13px;
  cursor: pointer; }
.dr-color-none:hover { background: var(--surface-2); }
.dr-color-none[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-weak); color: var(--accent); }
.dr-swatch-none, .dr-cf-swatch.none { background: var(--surface) linear-gradient(to top right, transparent calc(50% - 1px),
  var(--danger) calc(50% - 1px), var(--danger) calc(50% + 1px), transparent calc(50% + 1px)); }
.dr-swatch-none { width: 18px; height: 18px; border: 1px solid var(--border-strong); border-radius: 50%; }
.dr-color-head { margin-top: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-3); }
.dr-color-add { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 1px dashed var(--border-strong);
  border-radius: 50%; background: transparent; color: var(--text-2); cursor: pointer; }
.dr-color-add:hover { background: var(--surface-2); color: var(--text); }
.dr-color-add svg.icon, .dr-color-add svg.icon.sm { width: 12px; height: 12px; }
.dr-color-custom { display: flex; flex-direction: column; gap: 10px; width: 236px; }
.dr-color-custom .dr-color-head { margin-top: 0; }
.dr-color-custom .input { height: 34px; }
.dr-color-actions { display: flex; justify-content: flex-end; gap: 6px; }

/* table size grid: a popover, or a submenu of Insert ▸ Table */
.dr-tpick { --dr-tcell: 18px; display: flex; flex-direction: column; align-items: center; padding: 10px 12px 8px; }
.dr-tgrid { display: grid; gap: 3px; border-radius: 4px; outline: none; cursor: pointer; }
.menu .dr-tgrid.menu-item { display: grid; width: auto; height: auto; padding: 0; gap: 3px; background: transparent; }
.menu .dr-tgrid.menu-item:hover, .menu .dr-tgrid.menu-item:focus { background: transparent; }
.dr-tgrid:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.dr-trow { display: contents; }
.dr-tcell { width: var(--dr-tcell); height: var(--dr-tcell); border: 1px solid var(--border-strong); border-radius: 2px;
  background: var(--surface); }
.dr-tcell.on { border-color: var(--accent); background: var(--accent-weak); }
.dr-tlabel { margin-top: 8px; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- dialogs */
.dr-err { min-height: 1.2em; font-size: 13px; }
.dr-err:empty { min-height: 0; }
.dr-note { margin: 0; font-size: 12.5px; line-height: 1.45; }
.dr-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dr-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.dr-field .hint { font-weight: 400; color: var(--text-3); }
.dr-section-head { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.dr-table-props .dr-section-head:not(:first-child) { margin-top: 6px; }

.dr-cf { display: flex; align-items: center; gap: 8px; width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: 13.5px; font-weight: 400;
  text-align: left; cursor: pointer; }
.dr-cf:hover { background: var(--surface-2); }
.dr-cf:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--sel); outline: none; }
.dr-cf-swatch { width: 20px; height: 20px; flex: none; border: 1px solid var(--dr-swatch-edge); border-radius: 4px; }
.dr-cf-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dr-hex { display: flex; flex-direction: column; gap: 12px; }
.dr-hex-row { display: flex; align-items: center; gap: 12px; }
.dr-hex-native { width: 64px; height: 40px; padding: 2px; border: 1px solid var(--border-strong); border-radius: 6px;
  background: var(--surface); cursor: pointer; }
.dr-hex-preview { flex: 1; height: 40px; border: 1px solid var(--dr-swatch-edge); border-radius: 6px; }

/* File ▸ Page setup */
.dr-setup { display: grid; grid-template-columns: minmax(0, 1fr) 176px; gap: 20px; align-items: start; }
.dr-orients { display: flex; flex-wrap: wrap; gap: 8px; }
.dr-orient { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border: 1px solid var(--border-strong);
  border-radius: 8px; color: var(--text); font-weight: 400; cursor: pointer; }
.dr-orient:hover { background: var(--surface-2); }
.dr-orient:has(input:checked) { border-color: var(--accent); background: var(--accent-weak); }
.dr-orient:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.dr-orient input { margin: 0; accent-color: var(--accent); }
.dr-orient-icon { width: 13px; height: 17px; border: 1.5px solid currentColor; border-radius: 2px; }
.dr-orient-icon.landscape { width: 17px; height: 13px; }
.dr-margins { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
label.field.dr-margin { font-weight: 500; }
.dr-unit { position: relative; display: block; }
.dr-unit .input { padding-right: 36px; }
.dr-unit > span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--text-3); font-weight: 400;
  pointer-events: none; }
.dr-preview-wrap { display: grid; place-items: center; height: 176px; border-radius: 10px; background: var(--surface-2); }
.dr-preview { position: relative; border: 1px solid rgba(0, 0, 0, .08); background: #fff; box-shadow: var(--shadow-2);
  transition: width .15s, height .15s, background-color .15s; }
.dr-preview-text { position: absolute; display: flex; flex-direction: column; gap: 3px; overflow: hidden;
  outline: 1px dashed rgba(26, 115, 232, .55); }
.dr-preview-text i { display: block; height: 3px; flex: none; border-radius: 1px; background: rgba(0, 0, 0, .2); }
.dr-preview-text i:nth-child(3n) { width: 65%; }
.dr-preview-text.dark i { background: rgba(255, 255, 255, .4); }

/* Insert ▸ Headers & footers */
.dr-hf-section { display: flex; flex-direction: column; gap: 8px; }
.dr-hf-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
textarea.input.dr-hf-text { font: 13.5px/1.45 Arial, sans-serif; resize: vertical; }
.dr-hf-tools { display: flex; flex-wrap: wrap; gap: 4px; margin-left: -8px; }
.dr-seg { display: inline-flex; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 8px; }
.dr-seg-btn { display: grid; place-items: center; width: 34px; height: 28px; border: 0; background: transparent; color: var(--text-2);
  cursor: pointer; }
.dr-seg-btn + .dr-seg-btn { border-left: 1px solid var(--border-strong); }
.dr-seg-btn:hover { background: var(--surface-2); color: var(--text); }
.dr-seg-btn[aria-checked="true"] { background: var(--accent-weak); color: var(--accent); }
.dr-seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Insert ▸ Image ▸ Drive */
.dr-drive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; max-height: 360px;
  min-height: 160px; overflow-y: auto; padding: 2px; }
.dr-drive-item { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 6px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--surface); color: var(--text); text-align: left; cursor: pointer; }
.dr-drive-item:hover, .dr-drive-item:focus-visible { border-color: var(--accent); background: var(--accent-weak); outline: none; }
.dr-drive-item:disabled { opacity: .5; cursor: not-allowed; background: var(--surface); border-color: var(--border); }
.dr-drive-thumb { display: grid; place-items: center; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 4px; background: var(--surface-2);
  color: var(--text-3); }
.dr-drive-thumb img { width: 100%; height: 100%; object-fit: cover; }
.dr-drive-name { overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.dr-drive-empty { display: grid; place-items: center; grid-column: 1 / -1; padding: 48px 16px; color: var(--text-2); text-align: center; }

/* upload / download progress */
.dr-progress-box { position: fixed; left: 50%; bottom: 24px; z-index: 1100; display: flex; flex-direction: column; gap: 8px;
  transform: translateX(-50%); pointer-events: none; }
.dr-progress-box:empty { display: none; }
.dr-progress { display: flex; align-items: center; gap: 12px; min-width: 260px; max-width: min(460px, calc(100vw - 32px));
  padding: 10px 16px; border-radius: 8px; background: #2b2f36; color: #f1f3f6; box-shadow: var(--shadow-3); font-size: 13.5px;
  animation: pop .15s ease-out; }
.dr-progress .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-progress .spinner { border-color: rgba(255, 255, 255, .25); border-top-color: #9dbcff; }
.dr-progress-track { width: 72px; height: 4px; flex: none; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, .2); }
.dr-progress-track i { display: block; width: 0; height: 100%; background: #9dbcff; transition: width .15s; }

/* ---------------------------------------------------------------- pictures on the page */
.dr-drop-target { outline: 2px dashed var(--accent); outline-offset: -8px; }
img.dr-img-selected { outline: 2px solid var(--dr-handle); outline-offset: 0; }
.dr-img-box { position: fixed; z-index: 620; pointer-events: none; }
.dr-handle { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border: 1px solid #fff; border-radius: 2px;
  background: var(--dr-handle); box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); pointer-events: auto; touch-action: none; }
.dr-handle-nw { left: 0; top: 0; cursor: nwse-resize; }
.dr-handle-n { left: 50%; top: 0; cursor: ns-resize; }
.dr-handle-ne { left: 100%; top: 0; cursor: nesw-resize; }
.dr-handle-e { left: 100%; top: 50%; cursor: ew-resize; }
.dr-handle-se { left: 100%; top: 100%; cursor: nwse-resize; }
.dr-handle-s { left: 50%; top: 100%; cursor: ns-resize; }
.dr-handle-sw { left: 0; top: 100%; cursor: nesw-resize; }
.dr-handle-w { left: 0; top: 50%; cursor: ew-resize; }
.dr-img-box.dragging { outline: 1px dashed var(--dr-handle); }
.dr-img-tip { position: absolute; right: 6px; bottom: 6px; padding: 2px 8px; border-radius: 4px; background: rgba(32, 33, 36, .86);
  color: #fff; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dr-img-bar { position: fixed; z-index: 640; display: flex; align-items: center; gap: 2px; padding: 4px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-2); }
.dr-text-tool { padding: 0 8px; }
.dr-sep { width: 1px; height: 20px; flex: none; margin: 0 4px; background: var(--border-strong); }

/* ---------------------------------------------------------------- special blocks inside the page */
.dr-block { user-select: none; white-space: normal; }
.dr-hr { padding: 6pt 0; cursor: default; }
.dr-hr::before { content: ""; display: block; border-top: 1px solid color-mix(in srgb, var(--page-text, #000) 45%, transparent); }
.dr-pagebreak { position: relative; height: 0; margin: 16pt 0; border-top: 1px dashed var(--border-strong); text-align: center;
  cursor: default; }
.dr-pagebreak-label { position: relative; top: -.8em; padding: 0 10px; background: var(--page); color: var(--text-3);
  font: 600 10.5px/1.5 var(--font); letter-spacing: .06em; text-transform: uppercase; }
.dr-toc { position: relative; margin: 6pt 0; padding: 4pt 0; }
.dr-toc-list { margin: 0; padding: 0; list-style: none; }
.dr-toc-list li { margin: 0 0 3pt; }
.doc-page .dr-toc a.dr-toc-link, .dr-toc a.dr-toc-link { color: var(--dr-toc-link); text-decoration: underline; cursor: pointer; }
.dr-toc-empty { margin: 0; color: var(--text-3); font-style: italic; }
.dr-toc-update { position: absolute; top: -4px; right: -42px; opacity: 0; transition: opacity .12s; }
.dr-toc:hover .dr-toc-update, .dr-toc:focus-within .dr-toc-update { opacity: 1; }
.dr-image { margin: 6pt 0; padding: 0; line-height: 0; text-align: left; }
.dr-image[data-align="center"] { text-align: center; }
.dr-image[data-align="right"] { text-align: right; }
.dr-image img { display: inline-block; max-width: 100%; height: auto; vertical-align: top; }
.dr-image.dr-image-broken img { display: none; }
.dr-image.dr-image-broken::after { content: attr(data-alt); display: inline-block; max-width: 100%; padding: 24px 16px;
  border: 1px dashed var(--border-strong); border-radius: 6px; background: var(--surface-2); color: var(--text-3);
  font: 12.5px/1.4 var(--font); }
.dr-table { width: 100%; max-width: 100%; margin: 6pt 0; border-collapse: collapse; table-layout: fixed; }
.dr-table td, .dr-table th { min-width: 2em; padding: 5pt; border: var(--dr-tb-width, 1px) solid var(--dr-tb-color, var(--dr-table-line));
  vertical-align: top; overflow-wrap: anywhere; }
.dr-table td > p:last-child, .dr-table th > p:last-child { margin-bottom: 0; }
.dr-table.dr-table-noborder td, .dr-table.dr-table-noborder th { border: 1px dashed var(--dr-guide); }
.dr-hf-band { color: color-mix(in srgb, var(--page-text, #000) 60%, transparent); font: 9pt/1.4 Arial, sans-serif; user-select: none; }
.dr-hf-band p { margin: 0; min-height: 1.4em; }
.dr-hf-header { margin-bottom: 18pt; }
.dr-hf-footer { margin-top: 18pt; }

/* the page sized like its paper (applyPageStyle), and a page colour readable in either theme */
.doc-page.dr-page-colored :is(h3, h4, h5, h6, p[data-style="subtitle"]) { color: color-mix(in srgb, var(--page-text) 72%, var(--page)); }
.doc-page.dr-page-colored a:any-link { color: var(--dr-toc-link); }

@media (max-width: 860px) {
  .doc-page.dr-paged { padding: 24px 16px !important; min-height: 0 !important; }
  .dr-toc-update { right: 0; opacity: 1; }
}
@media (max-width: 560px) {
  .dr-setup { grid-template-columns: 1fr; }
  .dr-preview-wrap { display: none; }
  .dr-two { grid-template-columns: 1fr; }
}

@media print {
  .dr-img-box, .dr-img-bar, .dr-progress-box, .dr-toc-update, .dr-hf-band { display: none !important; }
  img.dr-img-selected { outline: 0; }
  .doc-page.dr-paged { width: auto !important; min-height: 0 !important; padding: 0 !important; border: 0; box-shadow: none; }
  /* paper is white and ink black (app.css), except on a coloured page; the dark-theme ink above doesn't print */
  .doc-page:not(.dr-page-colored) { --dr-ink: #000000 !important; --dr-on-light: currentColor !important; }
  .doc-page.dr-page-colored { background: var(--page); color: var(--page-text); }
  .doc-page:not(.dr-page-colored) .dr-hr::before { border-top-color: #999999; }
  .doc-page:not(.dr-page-colored) .dr-toc a.dr-toc-link { color: #1155cc; }
  .doc-page:not(.dr-page-colored) .dr-table td, .doc-page:not(.dr-page-colored) .dr-table th { --dr-table-line: #000000; }
  .dr-pagebreak { height: 0; margin: 0; border: 0; break-after: page; }
  .dr-pagebreak-label { display: none; }
  .dr-table.dr-table-noborder td, .dr-table.dr-table-noborder th { border-color: transparent; }
}