/* The document editor (word-editor.js) in SignSwifly's colours and type.
   Syncfusion's fluent2 theme runs on CSS variables; these give its primary
   colour family the app's accent (app.css :root) and its text the app's
   face. Doubled :root, so these win over fluent2's own :root whichever
   stylesheet comes last; the loader puts fluent2's before this one anyway. */
:root:root {
  --color-sf-primary: var(--accent);
  --color-sf-primary-dark: var(--accent-dark);
  --color-sf-primary-darker: var(--accent-dark);
  --color-sf-primary-light: var(--accent-soft);
  --color-sf-primary-lighter: var(--accent-soft);
  --color-sf-primary-text-color: #fff;
  --color-sf-primary-bg-color-hover: var(--accent-dark);
  --color-sf-primary-bg-color-pressed: var(--accent-dark);
  --color-sf-primary-bg-color-selected: var(--accent-dark);
  --color-sf-primary-cell-selection: var(--accent-soft);
  --color-sf-content-bg-color-dragged: var(--accent-soft);
  --color-sf-table-bg-color-selected: var(--accent-soft);
  --color-sf-border-dragged: var(--accent-soft);
  --e-font-name: "IBM Plex Sans", Arial;
}

/* The fonts a document is shown in (plan 2.7), the server's own files
   (vendor/document-fonts-1, DocumentFonts): each of the five names the
   editor offers, in all four faces, each face its own file with its weight
   and style, so bold and italic are the font's own and never made up at
   other widths. Declared here rather than through Syncfusion's
   setCustomFonts, which writes one face per family with no weight or style
   and skips a family the computer already has. A family the page declares
   wins over a font of the same name on the computer, so every machine shows
   Calibri as Carlito, as the server draws it, and word-editor.js waits for
   every face before the editor measures anything. */
@font-face { font-family: "Calibri"; font-weight: 400; font-style: normal; font-display: block;
  src: url("/vendor/document-fonts-1/Carlito-Regular.ttf") format('truetype'); }
@font-face { font-family: "Calibri"; font-weight: 700; font-style: normal; font-display: block;
  src: url("/vendor/document-fonts-1/Carlito-Bold.ttf") format('truetype'); }
@font-face { font-family: "Calibri"; font-weight: 400; font-style: italic; font-display: block;
  src: url("/vendor/document-fonts-1/Carlito-Italic.ttf") format('truetype'); }
@font-face { font-family: "Calibri"; font-weight: 700; font-style: italic; font-display: block;
  src: url("/vendor/document-fonts-1/Carlito-BoldItalic.ttf") format('truetype'); }
@font-face { font-family: "Cambria"; font-weight: 400; font-style: normal; font-display: block;
  src: url("/vendor/document-fonts-1/Caladea-Regular.ttf") format('truetype'); }
@font-face { font-family: "Cambria"; font-weight: 700; font-style: normal; font-display: block;
  src: url("/vendor/document-fonts-1/Caladea-Bold.ttf") format('truetype'); }
@font-face { font-family: "Cambria"; font-weight: 400; font-style: italic; font-display: block;
  src: url("/vendor/document-fonts-1/Caladea-Italic.ttf") format('truetype'); }
@font-face { font-family: "Cambria"; font-weight: 700; font-style: italic; font-display: block;
  src: url("/vendor/document-fonts-1/Caladea-BoldItalic.ttf") format('truetype'); }
@font-face { font-family: "Arial"; font-weight: 400; font-style: normal; font-display: block;
  src: url("/vendor/document-fonts-1/LiberationSans-Regular.ttf") format('truetype'); }
@font-face { font-family: "Arial"; font-weight: 700; font-style: normal; font-display: block;
  src: url("/vendor/document-fonts-1/LiberationSans-Bold.ttf") format('truetype'); }
@font-face { font-family: "Arial"; font-weight: 400; font-style: italic; font-display: block;
  src: url("/vendor/document-fonts-1/LiberationSans-Italic.ttf") format('truetype'); }
@font-face { font-family: "Arial"; font-weight: 700; font-style: italic; font-display: block;
  src: url("/vendor/document-fonts-1/LiberationSans-BoldItalic.ttf") format('truetype'); }
@font-face { font-family: "Times New Roman"; font-weight: 400; font-style: normal; font-display: block;
  src: url("/vendor/document-fonts-1/LiberationSerif-Regular.ttf") format('truetype'); }
@font-face { font-family: "Times New Roman"; font-weight: 700; font-style: normal; font-display: block;
  src: url("/vendor/document-fonts-1/LiberationSerif-Bold.ttf") format('truetype'); }
@font-face { font-family: "Times New Roman"; font-weight: 400; font-style: italic; font-display: block;
  src: url("/vendor/document-fonts-1/LiberationSerif-Italic.ttf") format('truetype'); }
@font-face { font-family: "Times New Roman"; font-weight: 700; font-style: italic; font-display: block;
  src: url("/vendor/document-fonts-1/LiberationSerif-BoldItalic.ttf") format('truetype'); }
@font-face { font-family: "Courier New"; font-weight: 400; font-style: normal; font-display: block;
  src: url("/vendor/document-fonts-1/LiberationMono-Regular.ttf") format('truetype'); }
@font-face { font-family: "Courier New"; font-weight: 700; font-style: normal; font-display: block;
  src: url("/vendor/document-fonts-1/LiberationMono-Bold.ttf") format('truetype'); }
@font-face { font-family: "Courier New"; font-weight: 400; font-style: italic; font-display: block;
  src: url("/vendor/document-fonts-1/LiberationMono-Italic.ttf") format('truetype'); }
@font-face { font-family: "Courier New"; font-weight: 700; font-style: italic; font-display: block;
  src: url("/vendor/document-fonts-1/LiberationMono-BoldItalic.ttf") format('truetype'); }

/* Where the editor sits: as tall as the window allows below the page head,
   never so short that a page can't be seen. */
.ss-word-editor {
  height: calc(100vh - 250px); min-height: 520px;
  border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; background: var(--panel);
}
/* Syncfusion sets the height of the element it is built in (100%, of this). */
.ss-word-editor > * { height: 100%; }

/* The context menu's Copy Hyperlink writes the link into the page as HTML
   to copy it; never offered (word-editor.js, withoutCopyLink). */
[id$="_contextmenu_copy_hyperlink"] { display: none !important; }
/* Nor its Spelling, whose dialog writes the word into the page as HTML
   (word-editor.js, withoutSpellingDialog), nor the line under it. */
[id$="_contextmenu_spelling_dialog"], [id$="_contextmenu_spelling_separator"] { display: none !important; }

/* app.css dresses every input, select, textarea and label for the app's own
   forms: full width, padding, a margin under each, a 44px minimum on touch,
   labels as blocks. Inside the editor, and in the dialogs and pop-ups it
   hangs off <body> (Syncfusion appends them there, outside its element),
   that pulled its fields out of shape. Here each goes back to the browser's
   own, at app.css's weight and after it, so Syncfusion's own classes, which
   weigh more, still set what they set. Nothing of the app's is matched: only
   Syncfusion's editor and its dialog and pop-up classes. */
:where(.ss-word-editor, .e-de-dlg-target, .e-dialog, .e-popup) input,
:where(.ss-word-editor, .e-de-dlg-target, .e-dialog, .e-popup) select,
:where(.ss-word-editor, .e-de-dlg-target, .e-dialog, .e-popup) textarea {
  width: revert; font: revert; padding: revert; border: revert; border-radius: revert;
  margin-bottom: revert; background: revert; color: revert; min-height: revert;
}
:where(.ss-word-editor, .e-de-dlg-target, .e-dialog, .e-popup) label {
  font-size: revert; font-weight: revert; color: revert; display: revert; margin-bottom: revert;
}
@media (pointer: coarse) {
  :where(.ss-word-editor, .e-de-dlg-target, .e-dialog, .e-popup)
    input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]),
  :where(.ss-word-editor, .e-de-dlg-target, .e-dialog, .e-popup) select { min-height: revert; }
}

/* The pages' own dialogs (word-editor.js ask, and each mode's), as the PDF
   editor's look: app.css has none. */
dialog.doc-modal { border: none; border-radius: 14px; padding: 0; max-width: 560px; width: calc(100vw - 40px);
                   box-shadow: 0 24px 64px rgba(24,36,48,.28); max-height: 86vh; }
dialog.doc-modal::backdrop { background: rgba(24,36,48,.45); }
.doc-modal .modal-body { padding: 24px; overflow-y: auto; max-height: 76vh; margin: 0; }
.doc-modal h2 { margin: 0 0 6px; font-size: 1.15rem; }
.doc-modal .modal-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 20px; }