/* Kelk — components */

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
}
.btn:hover { border-color: var(--accent); color: var(--accent-ink); }
.btn:disabled { opacity: .4; cursor: default; }
.btn:disabled:hover { border-color: var(--line-strong); color: inherit; }
.btn.ghost:disabled:hover { border-color: transparent; background: transparent; }
[dir="rtl"] .flip-rtl-btn svg { transform: scaleX(-1); }   /* undo points back: right in a right-to-left page */
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn.primary:hover { color: var(--on-accent); filter: brightness(1.06); }
.btn.soft { background: var(--accent-soft); border-color: transparent; color: var(--accent-ink); font-weight: 600; }
.btn.soft:hover { border-color: var(--accent); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--accent-soft); }
.btn.icon { width: 32px; padding: 0; justify-content: center; }
.btn.danger:hover { border-color: var(--danger); color: var(--danger); }
.btn.soft.danger:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); }   /* soft accent → soft red */
.btn svg { width: 16px; height: 16px; flex: none; }
.btn.busy { pointer-events: none; opacity: .7; }
.btn.busy::after {
  content: ''; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.segmented {
  display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden;
}
.segmented button {
  border: 0; background: transparent; height: 30px; padding: 0 10px; cursor: pointer; font-size: 12.5px; color: var(--muted);
}
.segmented button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }

/* ── editor ──────────────────────────────────────────────────────────── */
.editor-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
/* the about/sample document is on screen: a short hint that the eraser starts a document of one's own */
.sample-note {
  display: flex; align-items: center; gap: 8px; margin: 8px 10px 0; padding: 6px 8px 6px 12px;
  border: 1px solid var(--accent); border-inline-start-width: 4px; border-radius: var(--radius);
  background: var(--accent-soft); color: var(--accent-ink); font-size: 0.9em; line-height: 1.5;
}
.sample-note > span { flex: 1; }
.sample-note > svg, .sample-note > i { flex: none; width: 18px; height: 18px; }
.sample-note .btn { flex: none; }
/* the PDF import report (Kelk.ui.report): above the text, its body scrolls when long */
.import-report {
  display: flex; flex-direction: column; gap: 6px; margin: 8px 10px 0; padding: 8px 10px 10px 12px;
  border: 1px solid var(--warn); border-inline-start-width: 4px; border-radius: var(--radius);
  background: var(--panel-2); color: var(--ink); font-size: 13px; line-height: 1.55;
}
.import-report:focus { outline: none; }
.import-report:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.report-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.report-head h3 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.report-head h3 svg, .report-head h3 i { width: 16px; height: 16px; color: var(--warn); flex: none; }
.report-name { flex: 1; min-width: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-head .btn { flex: none; }
#import-report-toggle { margin-inline-start: auto; }
/* every PDF import has its report: a clean one in the calm color, one with something to tell in the warning color */
.import-report.clean { border-color: var(--accent); }
.import-report.clean .report-head h3 svg, .import-report.clean .report-head h3 i { color: var(--accent); }
/* collapsed (config.reportOpenMs after it opened, or its toggle): the head only, with the summary in it */
.report-brief { display: none; color: var(--muted); font-size: 12.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.import-report.collapsed { padding-bottom: 8px; }
.import-report.collapsed .report-body, .import-report.collapsed .report-actions { display: none; }
.import-report.collapsed .report-brief { display: block; flex: 0 1 auto; }
.import-report.collapsed .report-name { flex: 0 1 auto; }
@media (max-width: 600px) { .import-report.collapsed .report-name { display: none; } }
/* tall enough for the summary, a few findings and three page rows on a desktop screen (800 px high: 308), the
   text below it shorter while the report is open (still on screen with the editor's foot); one column (phones):
   the page scrolls, a share of the screen. Shadows at an edge where more content is (scroll-shadow: the covers
   move with the content, the shadows stay with the box) */
.report-body {
  max-height: clamp(120px, calc(100vh - 492px), 380px); overflow: auto; display: grid; gap: 8px; align-content: start;
  background:
    linear-gradient(var(--panel-2) 30%, transparent) top / 100% 28px no-repeat local,
    linear-gradient(transparent, var(--panel-2) 70%) bottom / 100% 28px no-repeat local,
    radial-gradient(farthest-side at 50% 0, color-mix(in srgb, var(--ink) 28%, transparent), transparent) top / 100% 10px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, color-mix(in srgb, var(--ink) 28%, transparent), transparent) bottom / 100% 10px no-repeat scroll;
  background-color: var(--panel-2);
}
.editor-body:has(> .import-report:not([hidden])) .editor-wrap { min-height: 110px; }
@media (max-width: 900px) {
  .report-body { max-height: clamp(140px, 40vh, 340px); }
}
.report-entry { display: grid; gap: 6px; }
.report-entry + .report-entry { border-top: 1px dashed var(--line); padding-top: 8px; }
.report-file, .report-sub { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--accent-ink); }
.report-summary, .report-safe-note { margin: 0; color: var(--muted); }
.report-pages { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.report-pages caption { text-align: start; font-weight: 700; font-size: 12.5px; color: var(--accent-ink); padding-bottom: 4px; }
.report-pages th, .report-pages td { text-align: start; padding: 3px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.report-pages thead th { color: var(--ink); font-weight: 600; background: var(--code-head); }
.report-body:focus { outline: none; }
.report-body:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.report-pages .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.report-findings { margin: 0; padding-inline-start: 18px; display: grid; gap: 3px; }
.report-findings li.warn::marker { color: var(--warn); }
.report-findings li.info::marker { color: var(--accent); }
.report-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* what the safe-mode button does: visible beside the buttons (the button's description, aria-describedby) */
.report-safe-hint { flex: 1 1 240px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.editor-wrap { position: relative; flex: 1; min-height: 240px; display: flex; }
/* (before the narrow layouts' rules below, which change it: after them, it undid their fixed height on a phone —
   the preview grew to the document's length, and its overscroll-behavior kept a finger on it from scrolling the page) */
.preview-scroll { flex: 1; overflow: auto; min-height: 240px; overscroll-behavior: contain; }
.stack .editor-wrap { min-height: 90px; }
.stack .preview-scroll { min-height: 100px; }
/* one above the other (stack, or one column): the page scrolls and each panel gets a fixed share
   of the screen — the editor a small one, so the preview and the export buttons are a short
   scroll away even with a long document; the editor scrolls inside */
@media (max-width: 1100px) {
  .stack .editor-wrap { flex: none; height: 38vh; height: 38dvh; min-height: 200px; }
  .stack .preview-scroll { flex: none; height: 72vh; height: 72dvh; }
}
@media (max-width: 900px) {
  .editor-wrap { flex: none; height: 38vh; height: 38dvh; min-height: 200px; }
  /* the page scrolls on past the preview's end (an empty preview passes a finger's scroll to the page) */
  .preview-scroll { flex: none; height: 72vh; height: 72dvh; min-height: 280px; overscroll-behavior: auto; }
}

/* ── the two panels' bars ───────────────────────────────────────────────
   Narrow panels (side by side on a small screen, or a phone): captions give way to icons
   (their names stay as tooltips), the panel titles keep only their icon, the export bar
   drops its icons. Kelk.ui.syncBars gives the editor's and the preview's top bars — and
   their bottom bars — one height when they stand side by side, so a bar that wraps to two
   rows in one panel is matched in the other. */
.editor-panel { container: kelk-editor / inline-size; }
.preview-panel { container: kelk-preview / inline-size; }
@container kelk-editor (max-width: 640px) {
  #h-editor > span { display: none; }                 /* the title first: its icon says it */
}
@container kelk-editor (max-width: 540px) {
  .btn.cap { width: 32px; padding: 0; justify-content: center; }
  .btn.cap > span { display: none; }
}
@container kelk-editor (max-width: 380px) {
  .editor-panel .panel-head .actions { gap: 2px; }
  .editor-panel .panel-head .btn.icon, .editor-panel .btn.cap { width: 30px; }
}
@container kelk-preview (max-width: 640px) {
  #h-preview > span { display: none; }
}
@container kelk-preview (max-width: 540px) {
  .export-bar .btn { padding: 0 9px; }
  .export-bar .btn svg { display: none; }
  .export-foot .namebox { flex-basis: 120px; }
}
#editor {
  flex: 1;
  width: 100%;
  border: 0;
  resize: none;
  padding: 14px 16px;
  background: transparent;
  font-family: var(--font-content);
  font-size: 14.5px;
  line-height: 1.85;
  outline: none;
  tab-size: 4;
  unicode-bidi: plaintext;      /* each line takes the direction of its own text */
}
#editor::placeholder { color: var(--placeholder); }
/* empty: the placeholder follows the interface language (dir="auto" alone resolves to LTR) */
html[dir="rtl"] #editor:placeholder-shown { direction: rtl; }
html[dir="ltr"] #editor:placeholder-shown { direction: ltr; }
html[dir="rtl"] input[dir="auto"]:placeholder-shown { direction: rtl; }

.dropzone-overlay {
  position: absolute; inset: 8px;
  border: 2px dashed var(--accent); border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent-soft) 88%, transparent);
  display: none; place-items: center; text-align: center;
  color: var(--accent-ink); font-weight: 600; pointer-events: none;
}
.editor-wrap.dragging .dropzone-overlay { display: grid; }

/* the editor's bottom bar: MD always on the stats' row, at the far edge; the stats wrap among
   themselves and a long file name is cut with an ellipsis (its full name in the tooltip) */
.stats { display: flex; gap: 2px 12px; flex-wrap: wrap; align-items: center; flex: 1 1 auto; min-width: 0; }
.stats > span { white-space: nowrap; }
.stats > #st-file { display: inline-flex; min-width: 0; max-width: 100%; }
.stats > #st-file[hidden] { display: none; }
#st-file-name { overflow: hidden; text-overflow: ellipsis; min-width: 0; margin-inline-start: .3em; }
.editor-foot { gap: 8px; flex-wrap: nowrap; }
.editor-foot > .sep, .editor-foot > .btn { flex: none; }
.panel-head .actions { align-items: center; }
/* editor and preview titles are labels, not buttons: muted */
#h-editor, #h-preview { color: var(--muted); font-weight: 600; }
#h-editor svg, #h-preview svg { opacity: .8; }
/* a pair of related icon buttons sits closer than the other actions */
.btn-pair { display: inline-flex; gap: 0; }
.btn-pair .btn.icon { width: 24px; padding: 0; }            /* narrow: the two read as one control */
.stats b { color: var(--ink); font-weight: 600; }

/* ── preview panel ───────────────────────────────────────────────────── */
/* the preview's content is painted apart from the page: a long document scrolls without the rest of the page repainting */
.preview-scroll > .doc { contain: layout paint; }
.export-foot { justify-content: space-between; }
.export-bar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.sep { width: 1px; height: 20px; background: var(--line-strong); margin: 0 4px; flex: none; }

/* output file name: stem editable, extension read-only (follows the export button) */
.namebox {
  display: inline-flex; align-items: stretch; height: 32px; min-width: 0; flex: 1 1 150px; max-width: 260px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--panel-2); overflow: hidden;
}
.namebox:focus-within { border-color: var(--accent); }
.namebox .stem { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 9px; outline: none; color: var(--ink); font-size: 13px; }
.namebox .ext {
  display: inline-flex; align-items: center; padding: 0 9px; font-family: var(--font-mono); font-size: 12px;
  color: var(--muted); background: var(--code-head); border-inline-start: 1px solid var(--line); user-select: none; cursor: default;
}
.namebox .ext { unicode-bidi: isolate; }            /* page direction: the dot next to the name */

/* ── collapsible panels: editor (side layout) and settings ─────────────── */
.settings, .editor-panel { position: relative; overflow: hidden; }
.flip-rtl { display: inline-flex; }
[dir="rtl"] .flip-rtl { transform: scaleX(-1); }       /* panel icons point to the panel's own side */
.panel > .rail {
  display: none;
  width: 100%; height: 100%; min-height: 200px;
  border: 0; background: transparent; cursor: pointer; color: var(--muted);
  flex-direction: column; align-items: center; gap: 10px; padding-top: 14px;
}
.panel > .rail:hover { color: var(--accent-ink); background: var(--accent-soft); }
.panel > .rail .rail-label { writing-mode: vertical-rl; font-weight: 600; font-size: 13px; }
/* a vertical label starts at the top, beside its icon, in every language: vertical-rl turns a
   line clockwise, which puts the start of a right-to-left line at the bottom — turned half a
   turn more, its start is at the top again (Persian and Arabic read top to bottom, as English does) */
[dir="rtl"] .panel > .rail .rail-label { transform: rotate(180deg); }
.panel > .rail svg { width: 18px; height: 18px; }
.pane-closed .settings > .rail { display: flex; }
.pane-closed .settings > .pane-head,
.pane-closed .settings > .pane-body { display: none; }
.editor-panel .pane-toggle { order: -1; margin-inline-end: -4px; }
.stack .editor-panel .pane-toggle { display: none; }
@media (min-width: 761px) {
  .workspace.editor-closed:not(.stack) .editor-panel > .rail { display: flex; }
  .workspace.editor-closed:not(.stack) .editor-panel > .pane-head,
  .workspace.editor-closed:not(.stack) .editor-panel > .pane-body { display: none; }
}
/* Settings below the panels (≤1100px): a bar that opens downward — the rail's chevron points
   down, the close button's up, and a click on the heading closes it again */
.rail-chev, .narrow-only { display: none; }
@media (max-width: 1100px) {
  .pane-closed .settings > .rail { flex-direction: row; min-height: 0; height: 44px; padding: 0 11px 0 14px; padding-inline: 14px 11px; }   /* its chevron in the column of the open pane's button */
  .pane-closed .settings > .rail .rail-label { writing-mode: horizontal-tb; transform: none; }
  .settings > .rail .rail-chev { display: block; margin-inline-start: auto; }
  .settings .wide-only { display: none; }
  .settings .narrow-only { display: inline-flex; }
  .settings > .pane-head { cursor: pointer; }
  .settings > .pane-head:hover h2 { color: var(--accent-ink); }
}
@media (max-width: 760px) { .editor-panel .pane-toggle { display: none; } }

.settings .pane-body { overflow: auto; padding: 6px 12px 14px; }

.group { border-bottom: 1px solid var(--line); }
.group:last-child { border-bottom: 0; }
.group > summary {
  list-style: none; cursor: pointer; padding: 10px 2px;
  display: flex; align-items: center; gap: 8px; font-weight: 600;
}
.group > summary::-webkit-details-marker { display: none; }
.group > summary::after {
  content: ''; margin-inline-start: auto; width: 8px; height: 8px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);   /* physical: a down chevron in both directions */
  transform: rotate(45deg); transition: transform .15s;
}
.group[open] > summary::after { transform: rotate(-135deg); }
.group > summary svg { width: 16px; height: 16px; color: var(--accent); }
.group .fields { display: grid; gap: 10px; padding: 2px 2px 14px; }

.field { display: grid; gap: 4px; }
.field > span { font-size: 12.5px; color: var(--muted); }
.field input[type="text"], .field input[type="email"], .field input[type="url"], .field input[type="number"],
.field select, .field textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  padding: 6px 9px;
  min-height: 32px;
}
.field textarea { font-family: var(--font-mono); font-size: 12px; min-height: 110px; direction: ltr; text-align: left; resize: vertical; }
.field .hint { font-size: 11.5px; color: var(--muted); }
.field .hint.warn { color: var(--warn); }
.field .hint.danger { color: var(--danger); }
.field input.auto { color: var(--muted); font-style: italic; }      /* an automatic value (edition) */
.label-row { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.mini {
  display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 4px;
  background: transparent; color: var(--muted); cursor: pointer;
}
.mini:hover { background: var(--accent-soft); color: var(--accent-ink); }
.mini svg { width: 13px; height: 13px; }
.sub-head { font-size: 12px; font-weight: 700; color: var(--accent-ink); padding-top: 4px; border-top: 1px dashed var(--line); }
.fields > .sub-head:first-child { border-top: 0; padding-top: 0; }
.sub-head:empty { padding-top: 0; }
.btn-row { display: flex; gap: 6px; flex-wrap: wrap; }
.field .hint code { font-family: var(--font-mono); font-size: 11px; background: var(--code-bg); padding: 0 4px; border-radius: 4px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* side by side, a label that wraps to two lines must not stretch its neighbour's control:
   each field keeps its natural height, the controls on one line at the bottom */
.row2 > .field, .row3 > .field { align-content: end; }
.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
/* color pickers (table style): a swatch the width of its column */
.field.color input[type="color"] {
  width: 100%; height: 32px; padding: 3px; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--panel-2);
}
.field.color input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.field.color input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 3px; }
.field.color input[type="color"]::-moz-color-swatch { border: 0; border-radius: 3px; }
/* a color the chosen preset does not use */
.field.color.unused { opacity: .45; }
.field.color.unused input { cursor: not-allowed; }
.field.unused { opacity: .45; }
.field.unused select { cursor: not-allowed; }

.check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.check input { accent-color: var(--accent); width: 16px; height: 16px; flex: none; margin: 0; }   /* one size, also beside a two-line label */

.logo-box {
  display: flex; align-items: center; gap: 10px;
  border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); padding: 8px;
}
.logo-box.dragging { border-color: var(--accent); background: var(--accent-soft); }
/* the logo sits on "paper" (white) in both themes, as in the exports */
.logo-box .thumb {
  width: 120px; height: 60px; flex: none; display: grid; place-items: center; padding: 4px;
  background: #fff; border: 1px solid var(--line); border-radius: 4px; color: #9a958c; font-size: 11px; overflow: hidden;
}
.logo-box .thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.logo-box .btns { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── toast ───────────────────────────────────────────────────────────── */
.toasts { position: fixed; inset-block-end: 18px; inset-inline-start: 50%; transform: translateX(-50%); display: grid; gap: 8px; z-index: 50; }
[dir="rtl"] .toasts { transform: translateX(50%); }
.toast {
  background: var(--toast-bg); color: var(--toast-ink);
  padding: 9px 14px; border-radius: var(--radius-sm); box-shadow: var(--shadow);
  font-size: 13px; max-width: 520px;
}
.toast.error { background: var(--danger); color: #fff; }
.toast { display: flex; align-items: center; gap: 12px; }
.toast-count { font-variant-numeric: tabular-nums; opacity: .8; }
.toast-count:empty { display: none; }
.toast-action {
  border: 0; background: none; padding: 2px 4px; color: inherit; font: inherit; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; flex: none;
}
.toast.warn { background: var(--warn); color: #fff; }

/* ── to the page's top / end (only when the page itself scrolls) ─────── */
.page-jump {
  position: fixed; inset-inline-end: 14px; bottom: 16px; z-index: 45;
  display: flex; flex-direction: column; gap: 6px;
}
.page-jump .btn {
  width: 38px; height: 38px; border-radius: 50%; padding: 0; justify-content: center;
  background: color-mix(in srgb, var(--panel) 72%, transparent); box-shadow: var(--shadow); border-color: var(--line-strong);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: .78; transition: opacity .15s, visibility .15s;
}
.page-jump .btn:hover, .page-jump .btn:focus-visible { opacity: 1; background: var(--panel); }   /* solid under the pointer */
.page-jump .btn.off { opacity: 0; visibility: hidden; }
.page-jump .btn svg { width: 18px; height: 18px; }

/* ── dialog ──────────────────────────────────────────────────────────── */
dialog {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--ink);
  box-shadow: var(--shadow); padding: 0; width: min(560px, 92vw);
}
dialog::backdrop { background: rgba(0, 0, 0, .35); }
[data-theme="dark"] dialog::backdrop { background: rgba(0, 0, 0, .6); }
dialog .dlg-head { display: flex; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
dialog .dlg-head h2 { margin: 0; font-size: 15px; }
dialog .dlg-head .btn { margin-inline-start: auto; }
dialog .dlg-body { padding: 12px 14px 16px; }
dialog .dlg-body.fields { display: grid; gap: 10px; }
/* the task dialog (Kelk.ui.task): a label, a detail, a bar, Cancel */
dialog.task { width: min(420px, calc(100vw - 32px)); }
dialog.task .task-label { font-weight: 600; overflow-wrap: anywhere; }
dialog.task .task-detail { color: var(--muted, #777); font-size: 12.5px; min-height: 1.4em; margin-top: 2px; }
dialog.task progress { width: 100%; height: 8px; margin: 10px 0 12px; accent-color: var(--accent); }
/* the same bar in a pane (the slides preview's work): over the slides, as long as it lasts */
dialog.task .task-actions { display: flex; justify-content: flex-end; }
/* the same window, not modal (Kelk.ui.bar: the slides preview): above everything, clicks pass through to the page */
dialog.task.quiet { position: fixed; inset: 0; height: fit-content; margin: auto; z-index: 2147483000; pointer-events: none; box-shadow: var(--shadow); }
dialog.task.quiet .task-actions { display: none; }
/* the order dialog (Kelk.ui.order): the task dialog's look, with the documents to arrange */
dialog.order { width: min(560px, calc(100vw - 32px)); }
dialog.order .dlg-body { display: flex; flex-direction: column; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); }
dialog.order .task-detail { margin-bottom: 10px; line-height: 1.6; }
.order-list {
  list-style: none; margin: 0; padding: 0; overflow-y: auto; min-height: 0; flex: 0 1 auto;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
#order-list { flex: 1 1 auto; max-height: 52vh; }
.order-row {
  display: flex; align-items: center; gap: 8px; padding: 4px 6px; min-height: 40px;
  border-bottom: 1px solid var(--line); background: var(--panel); font-size: 13px;
}
.order-row:last-child { border-bottom: 0; }
.order-row.dragging { position: relative; z-index: 1; box-shadow: var(--shadow); outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius-sm); }
.order-row.unchecked .order-name, .order-row.unchecked .order-icon, .order-row.unchecked .order-meta { opacity: .45; }
.order-row input[type="checkbox"] { margin: 0; width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
.order-grip { display: inline-flex; color: var(--muted); cursor: grab; touch-action: none; padding: 6px 0; flex: none; }
.order-row.dragging .order-grip { cursor: grabbing; }
.order-grip svg { width: 16px; height: 16px; }
.order-icon, .order-row > svg { width: 20px; height: 20px; flex: none; }
.order-name { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.order-name .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-name .dir { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: start; }
.order-meta { display: flex; align-items: center; gap: 6px; flex: none; color: var(--muted); font-size: 11.5px; }
.order-tag {
  font: 600 10.5px/1 var(--font-latin); letter-spacing: .03em; padding: 3px 5px; border-radius: 4px;
  color: var(--panel); background: var(--muted); direction: ltr;
}
.order-row .btn.icon { width: 28px; height: 28px; }
.order-row .btn.icon svg { width: 15px; height: 15px; }
/* each kind its color: the icon and its tag */
.k-md { color: var(--k-md); }      .order-tag.k-md { background: var(--k-md); color: var(--panel); }
.k-txt { color: var(--k-txt); }    .order-tag.k-txt { background: var(--k-txt); color: var(--panel); }
.k-html { color: var(--k-html); }  .order-tag.k-html { background: var(--k-html); color: var(--panel); }
.k-docx { color: var(--k-docx); }  .order-tag.k-docx { background: var(--k-docx); color: var(--panel); }
.k-pdf { color: var(--k-pdf); }    .order-tag.k-pdf { background: var(--k-pdf); color: var(--panel); }
.k-image { color: var(--muted); }
.k-none { color: var(--muted); }   .order-tag.k-none { background: transparent; color: var(--muted); border: 1px solid var(--line-strong); padding: 2px 4px; }
/* the files that do not come in: apart, muted, with the reason */
.order-skip { margin-top: 10px; display: flex; flex-direction: column; min-height: 0; }
.order-skip-head { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.order-list.off { max-height: 22vh; background: var(--panel-2); }
.order-list.off .order-row { background: transparent; min-height: 34px; color: var(--muted); }
.order-note { font-style: italic; }
dialog.order .task-actions { gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
dialog.order #order-sort { margin-inline-end: auto; }
.order-count { color: var(--muted); font-size: 12.5px; }
@media (max-width: 480px) {
  .order-meta .order-size { display: none; }
  dialog.order .task-actions .btn:not(.primary) > span { display: none; }
  dialog.order #order-sort { width: 32px; padding: 0; justify-content: center; }
}
dialog table { width: 100%; border-collapse: collapse; font-size: 13px; }
dialog .dlg-head h2 { display: flex; align-items: center; gap: 8px; }
dialog .dlg-head h2 svg { width: 18px; height: 18px; color: var(--accent); }
/* the help: a short guide */
dialog.guide { width: min(620px, 94vw); }
.guide-intro { margin: 0 0 10px; }
.guide-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.guide-steps li { display: flex; gap: 10px; align-items: flex-start; }
.guide-steps li > svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--accent); }
.guide-steps b { display: block; font-size: 13.5px; }
.guide-steps span { color: var(--muted); font-size: 13px; }
.guide-more { margin: 14px 0 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; }
dialog td { padding: 6px 4px; border-bottom: 1px solid var(--line); }
kbd {
  font-family: var(--font-mono); font-size: 11.5px;
  border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; background: var(--panel-2);
}

/* language switch: the other interface languages, each named in its own language */
.lang-switch { display: inline-flex; align-items: center; gap: 2px; color: var(--muted); }
.lang-switch svg { width: 16px; height: 16px; margin-inline-end: 2px; }
.lang-switch .btn { padding: 0 8px; }

/* the App group: last in Settings — only its heading is tinted (the app's own behavior, not the document's) */
details.group.app-group { margin-top: 14px; }
/* the tint reaches 6px beyond the text column on both sides, so icon and chevron stay in line with the other groups */
details.group.app-group > summary { color: var(--accent-ink); background: var(--accent-soft); border-radius: var(--radius-sm); margin-inline: -6px; padding-inline: 8px; }

/* a link inside a hint that opens another Settings group (Text → Word) */
.link-btn { border: 0; background: none; padding: 0; font: inherit; color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.link-btn:hover { color: var(--accent); }
[dir="rtl"] svg.rtl-mirror { transform: scaleX(-1); }
/* Settings: its open/close button in the column of the groups' chevrons (their centers 20px from
   the panel's edge: body padding 12 + summary 2 + half the chevron) — the head's padding is 12px, 10px on phones */
.settings > .pane-head #pane-close { margin-inline-end: -8px; }
@media (max-width: 600px) { .settings > .pane-head #pane-close { margin-inline-end: -6px; } }
.font-pack a.btn { text-decoration: none; color: var(--accent-ink); }

/* ── Document | Slides (Kelk.slides) ─────────────────────────────────── */
.view-toggle { margin-inline-start: 10px; }
.view-toggle button { display: inline-flex; align-items: center; gap: 5px; height: 26px; }
.view-toggle svg { width: 14px; height: 14px; }
.slides-only { display: none !important; }
.view-slides .slides-only { display: inline-flex !important; }
.view-slides .doc-only { display: none !important; }
.slides-count { font-size: 12px; color: var(--muted); align-items: center; padding-inline-end: 4px; }
@media (max-width: 560px) { .view-toggle button span { display: none; } }

.slides-pane { padding: 18px 20px 28px; font-family: var(--font-ui); color: var(--ink); }
.slides-pane:empty::before { content: attr(data-empty); color: var(--placeholder); }
.slides-pane .kelk-slide-meta { color: var(--muted); }
.slides-pane .kelk-slide-meta b { color: var(--ink); }
.slides-pane .kelk-slide-meta .w { color: var(--warn); }
.slides-pane .kelk-slide-notes { color: var(--muted); }
.slides-pane .kelk-slide-notes div { color: var(--ink); }
.slides-pane .slides-error { color: var(--danger); }
[data-theme="dark"] .slides-pane .kelk-slide { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 4px 18px rgba(0,0,0,.4); }

/* present: one slide at a time, full screen */
.present { position: fixed; inset: 0; z-index: 1000; background: #0d0d0d; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.present .kelk-slides { width: min(100vw, calc(100vh * 16 / 9)); }
.present .kelk-slide-meta, .present .kelk-slide-notes { display: none; }
.present .kelk-slide { border-radius: 0; box-shadow: none; }
.present-count { position: fixed; bottom: 10px; inset-inline-end: 16px; color: rgba(255,255,255,.45); font: 12px var(--font-ui); }
/* Settings → Slides in the Slides view, Settings → Word in the document view: the heading stands out like the App
   group's; the doc-only scope note */
.view-slides details.group#slides-group > summary { color: var(--accent-ink); background: var(--accent-soft); border-radius: var(--radius-sm); margin-inline: -6px; padding-inline: 8px; }
.scope-hint { display: block; border-inline-start: 2px solid var(--accent); padding-inline-start: 8px; }