domma-cms 1.8.33 → 1.8.34

package/plugins/docs/admin/css/docs.css

@@ -0,0 +1,783 @@
+/*
+ * Docs plugin - admin styles.
+ *
+ * Every colour and radius is a theme token that the Domma themes define.
+ * An invented --dm-* resolves to nothing and the rule silently does not
+ * apply - a panel ends up unreadable on one theme and fine on another.
+ * Tints are color-mix() over real tokens; neutral greys fall back to the
+ * border token, never to an rgba that vanishes on dark themes.
+ */
+
+/* The Docs screens use the whole width of the admin. */
+.view-container:has(.docs-home),
+.view-container:has(.docs-ed) { max-width: none; }
+
+.docs-home [hidden], .docs-ed [hidden], .docs-share [hidden], .docs-settings [hidden], .docs-form [hidden] { display: none !important; }
+
+/* ================================================================== Home */
+
+.docs-home {
+    display: grid;
+    grid-template-columns: 232px minmax(0, 1fr);
+    gap: var(--dm-space-4);
+    min-height: calc(100vh - 170px);
+}
+.docs-home.is-rail-collapsed { grid-template-columns: 52px minmax(0, 1fr); }
+
+/* ---- rail ---- */
+
+.docs-rail {
+    display: flex;
+    flex-direction: column;
+    gap: var(--dm-space-3);
+    position: sticky;
+    top: var(--dm-space-3);
+    align-self: start;
+    max-height: calc(100vh - 140px);
+    overflow-y: auto;
+    min-width: 0;
+}
+.docs-rail__new {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--dm-space-2);
+    border-radius: var(--dm-radius-lg);
+    padding: var(--dm-space-2) var(--dm-space-4);
+    box-shadow: var(--dm-shadow-md);
+}
+.docs-rail__nav { display: flex; flex-direction: column; gap: 2px; }
+.docs-rail__places { display: flex; flex-direction: column; gap: 2px; }
+
+.docs-place,
+.docs-folder {
+    display: flex;
+    align-items: center;
+    gap: var(--dm-space-3);
+    width: 100%;
+    padding: 7px var(--dm-space-3);
+    border: 0;
+    border-radius: var(--dm-radius-full);
+    background: transparent;
+    color: var(--dm-text);
+    font: inherit;
+    font-size: var(--dm-text-sm);
+    text-align: left;
+    cursor: pointer;
+    min-width: 0;
+}
+.docs-place:hover,
+.docs-folder:hover { background: var(--dm-hover-bg); }
+.docs-place:focus-visible,
+.docs-folder:focus-visible { outline: 2px solid var(--dm-primary); outline-offset: -2px; }
+.docs-place.is-active,
+.docs-folder.is-active {
+    background: color-mix(in srgb, var(--dm-primary) 16%, transparent);
+    color: var(--dm-text);
+    font-weight: var(--dm-font-semibold);
+}
+.docs-place svg { flex: none; color: var(--dm-text-muted); }
+.docs-place.is-active svg { color: var(--dm-primary); }
+
+.docs-rail__section {
+    display: flex;
+    align-items: center;
+    gap: var(--dm-space-1);
+    margin: var(--dm-space-3) 0 var(--dm-space-1);
+    padding: 0 var(--dm-space-3);
+    font-size: var(--dm-text-xs);
+    font-weight: var(--dm-font-semibold);
+    text-transform: uppercase;
+    letter-spacing: .04em;
+    color: var(--dm-text-muted);
+}
+.docs-rail__add { margin-left: auto; }
+.docs-rail__folders { display: flex; flex-direction: column; gap: 1px; }
+.docs-folder { position: relative; padding-right: 30px; }
+.docs-folder::before {
+    content: "";
+    flex: none;
+    width: 13px;
+    height: 10px;
+    border: 1.5px solid var(--dm-text-muted);
+    border-radius: 2px;
+    border-top-left-radius: 0;
+    box-shadow: inset 0 2px 0 -1px var(--dm-text-muted);
+}
+.docs-folder__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.docs-folder .docs-kebab { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
+
+.is-rail-collapsed .docs-rail__label,
+.is-rail-collapsed .docs-rail__section,
+.is-rail-collapsed .docs-rail__folders { display: none; }
+.is-rail-collapsed .docs-place { justify-content: center; padding: 8px; }
+.is-rail-collapsed .docs-rail__new { padding: var(--dm-space-2); }
+
+/* ---- main ---- */
+
+.docs-main { min-width: 0; display: flex; flex-direction: column; gap: var(--dm-space-3); }
+.docs-main__bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--dm-space-2);
+}
+.docs-main__title {
+    display: flex;
+    align-items: baseline;
+    gap: var(--dm-space-2);
+    margin: 0 auto 0 0;
+    font-size: 1.25rem;
+    font-weight: var(--dm-font-semibold);
+    min-width: 0;
+}
+.docs-main__title > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.docs-main__count { font-size: var(--dm-text-sm); font-weight: normal; color: var(--dm-text-muted); }
+.docs-main__search {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--dm-space-1);
+    flex: 0 1 320px;
+    min-width: 180px;
+}
+.docs-main__search > svg { position: absolute; left: 10px; color: var(--dm-text-muted); pointer-events: none; }
+.docs-main__search input { padding-left: 30px; border-radius: var(--dm-radius-full); width: 100%; }
+.docs-main__sort { width: auto; }
+.docs-main__layout { display: inline-flex; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden; }
+.docs-main__layout .btn { border-radius: 0; }
+.docs-main__layout .btn.is-on,
+.docs-ed__actions .btn.is-on,
+.docs-ed__star.is-on { background: color-mix(in srgb, var(--dm-primary) 16%, transparent); color: var(--dm-primary); }
+
+.docs-trash-note {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--dm-space-3);
+    padding: var(--dm-space-2) var(--dm-space-3);
+    border: 1px solid var(--dm-border);
+    border-radius: var(--dm-radius-md);
+    background: var(--dm-surface);
+    color: var(--dm-text-muted);
+    font-size: var(--dm-text-sm);
+}
+
+.docs-main__body { position: relative; flex: 1; min-height: 240px; border-radius: var(--dm-radius-lg); }
+.docs-drop {
+    display: none;
+    position: absolute;
+    inset: 0;
+    z-index: 5;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--dm-space-2);
+    border: 2px dashed var(--dm-primary);
+    border-radius: var(--dm-radius-lg);
+    background: color-mix(in srgb, var(--dm-primary) 8%, var(--dm-surface));
+    color: var(--dm-text);
+    font-weight: var(--dm-font-semibold);
+    pointer-events: none;
+}
+.docs-main__body.is-dragging .docs-drop { display: flex; }
+
+.docs-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--dm-space-2);
+    padding: var(--dm-space-8) var(--dm-space-4);
+    color: var(--dm-text-muted);
+    text-align: center;
+}
+.docs-empty p { margin: 0; max-width: 420px; }
+
+/* ---- cards ---- */
+
+.docs-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--dm-space-4); }
+.docs-card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--dm-border);
+    border-radius: var(--dm-radius-md);
+    background: var(--dm-surface);
+    cursor: pointer;
+    overflow: hidden;
+    transition: border-color .15s, box-shadow .15s;
+    min-width: 0;
+}
+.docs-card:hover { border-color: var(--dm-primary); box-shadow: var(--dm-shadow-md); }
+.docs-card:focus-visible { outline: 2px solid var(--dm-primary); outline-offset: 2px; }
+.docs-card__sheet {
+    height: 150px;
+    padding: var(--dm-space-3) var(--dm-space-4);
+    border-bottom: 1px solid var(--dm-border);
+    background: color-mix(in srgb, var(--dm-text) 4%, var(--dm-surface));
+    overflow: hidden;
+}
+.docs-card__excerpt {
+    height: 100%;
+    padding: var(--dm-space-2) var(--dm-space-3);
+    background: var(--dm-surface);
+    border-radius: 2px;
+    box-shadow: 0 1px 3px color-mix(in srgb, var(--dm-text) 18%, transparent);
+    font-size: 9px;
+    line-height: 1.45;
+    color: var(--dm-text-muted);
+    overflow: hidden;
+    overflow-wrap: anywhere;
+    white-space: pre-line;
+}
+.docs-card__info { padding: var(--dm-space-2) var(--dm-space-3) var(--dm-space-3); min-width: 0; }
+.docs-card__title {
+    font-weight: var(--dm-font-semibold);
+    font-size: var(--dm-text-sm);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding-right: 26px;
+}
+.docs-card__meta { font-size: var(--dm-text-xs); color: var(--dm-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.docs-card__chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
+.docs-card .docs-chip--shared,
+.docs-card .docs-chip--public,
+.docs-card .docs-chip--pdf,
+.docs-card .docs-chip--locked { display: none; }
+.docs-card.is-pdf .docs-chip--pdf { display: inline-flex; }
+.docs-card.has-shared .docs-chip--shared,
+.docs-card.has-public .docs-chip--public,
+.docs-card.has-locked .docs-chip--locked { display: inline-flex; }
+
+.docs-card__star {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    display: inline-flex;
+    padding: 4px;
+    border: 0;
+    border-radius: var(--dm-radius-full);
+    background: var(--dm-surface);
+    color: var(--dm-text-muted);
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity .15s;
+}
+.docs-card:hover .docs-card__star,
+.docs-card:focus-within .docs-card__star,
+.docs-card.is-starred .docs-card__star { opacity: 1; }
+.docs-card.is-starred .docs-card__star { color: var(--dm-warning); }
+.docs-card.is-starred .docs-card__star svg { fill: currentColor; }
+.docs-card .docs-kebab { position: absolute; right: 4px; bottom: 10px; }
+.docs-card.is-trashed { opacity: .8; }
+.docs-card--template .docs-card__sheet { background: color-mix(in srgb, var(--dm-primary) 8%, var(--dm-surface)); }
+
+/* list layout: the same cards, one per row */
+.docs-main__body.is-list .docs-cards { grid-template-columns: 1fr; gap: 0; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden; }
+.docs-main__body.is-list .docs-card { flex-direction: row; align-items: center; border: 0; border-bottom: 1px solid var(--dm-border); border-radius: 0; box-shadow: none; }
+.docs-main__body.is-list .docs-card:last-child { border-bottom: 0; }
+.docs-main__body.is-list .docs-card:hover { background: var(--dm-hover-bg); }
+.docs-main__body.is-list .docs-card__sheet { display: none; }
+.docs-main__body.is-list .docs-card__info {
+    flex: 1;
+    display: grid;
+    grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) auto;
+    align-items: center;
+    gap: var(--dm-space-3);
+    padding: var(--dm-space-2) 76px var(--dm-space-2) var(--dm-space-3);
+}
+.docs-main__body.is-list .docs-card__chips { margin: 0; }
+.docs-main__body.is-list .docs-card__star { top: 50%; right: 40px; transform: translateY(-50%); }
+.docs-main__body.is-list .docs-card .docs-kebab { top: 50%; bottom: auto; transform: translateY(-50%); }
+
+/* ---- shared bits ---- */
+
+.docs-kebab {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 26px;
+    height: 26px;
+    border: 0;
+    border-radius: var(--dm-radius-full);
+    background: transparent;
+    color: var(--dm-text-muted);
+    cursor: pointer;
+}
+.docs-kebab:hover, .docs-kebab:focus-visible { background: var(--dm-hover-bg); color: var(--dm-text); }
+
+.docs-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 1px 8px;
+    border-radius: var(--dm-radius-full);
+    background: color-mix(in srgb, var(--dm-text) 8%, transparent);
+    color: var(--dm-text-secondary);
+    font-size: var(--dm-text-xs);
+    white-space: nowrap;
+}
+.docs-chip--public { background: color-mix(in srgb, var(--dm-info) 16%, transparent); }
+.docs-chip--locked { background: color-mix(in srgb, var(--dm-warning) 20%, transparent); color: var(--dm-text); }
+.docs-chip--danger { background: color-mix(in srgb, var(--dm-danger) 16%, transparent); color: var(--dm-text); }
+.docs-chip--pdf { background: color-mix(in srgb, var(--dm-danger) 12%, transparent); color: var(--dm-text); }
+
+.docs-avatar {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    width: 28px;
+    height: 28px;
+    border-radius: var(--dm-radius-full);
+    background: color-mix(in srgb, var(--dm-primary) 22%, var(--dm-surface));
+    color: var(--dm-text);
+    font-size: var(--dm-text-xs);
+    font-weight: var(--dm-font-semibold);
+}
+
+.docs-check { display: flex; align-items: center; gap: var(--dm-space-2); font-size: var(--dm-text-sm); cursor: pointer; }
+
+/* ================================================================ Editor */
+
+.docs-ed {
+    display: flex;
+    flex-direction: column;
+    height: calc(100vh - 150px);
+    min-height: 480px;
+    border: 1px solid var(--dm-border);
+    border-radius: var(--dm-radius-md);
+    background: var(--dm-surface);
+    overflow: hidden;
+}
+
+.docs-ed__top {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--dm-space-2);
+    padding: var(--dm-space-2) var(--dm-space-3);
+    border-bottom: 1px solid var(--dm-border);
+}
+.docs-ed__titlebox { flex: 1 1 260px; min-width: 0; }
+.docs-ed__title {
+    display: block;
+    width: 100%;
+    padding: 2px 6px;
+    border: 1px solid transparent;
+    border-radius: var(--dm-radius-sm);
+    background: transparent;
+    color: var(--dm-text);
+    font: inherit;
+    font-size: 1.15rem;
+    font-weight: var(--dm-font-semibold);
+}
+.docs-ed__title:hover { border-color: var(--dm-border); }
+.docs-ed__title:focus { outline: none; border-color: var(--dm-primary); }
+.docs-ed__title[readonly]:hover { border-color: transparent; }
+.docs-ed__crumbs { display: flex; flex-wrap: wrap; gap: var(--dm-space-3); padding: 0 6px; font-size: var(--dm-text-xs); color: var(--dm-text-muted); }
+.docs-ed__save.is-dirty { color: var(--dm-text-secondary); }
+.docs-ed__save.is-failed { color: var(--dm-danger); font-weight: var(--dm-font-semibold); }
+.docs-ed__star svg { transition: fill .15s; }
+.docs-ed__star.is-on { color: var(--dm-warning); background: transparent; }
+.docs-ed__star.is-on svg { fill: currentColor; }
+.docs-ed__status-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dm-space-2); }
+.docs-ed__actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }
+.docs-ed__share { margin-left: var(--dm-space-2); border-radius: var(--dm-radius-full); padding-inline: var(--dm-space-4); }
+
+/* ---- toolbar ---- */
+
+.docs-ed__toolbar { border-bottom: 1px solid var(--dm-border); background: var(--dm-surface); }
+.docs-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 2px var(--dm-space-2);
+    padding: 4px var(--dm-space-3);
+}
+.docs-toolbar__group { display: flex; align-items: center; gap: 1px; padding-right: var(--dm-space-2); border-right: 1px solid var(--dm-border); }
+.docs-toolbar__group:last-child { border-right: 0; }
+.docs-toolbar.is-disabled { opacity: .45; pointer-events: none; }
+.docs-tool {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 30px;
+    height: 30px;
+    padding: 0 6px;
+    border: 0;
+    border-radius: var(--dm-radius-sm);
+    background: transparent;
+    color: var(--dm-text);
+    cursor: pointer;
+}
+.docs-tool:hover { background: var(--dm-hover-bg); }
+.docs-tool:focus-visible { outline: 2px solid var(--dm-primary); outline-offset: -2px; }
+.docs-tool.is-on { background: color-mix(in srgb, var(--dm-primary) 18%, transparent); color: var(--dm-primary); }
+.docs-tool-select {
+    height: 30px;
+    padding: 0 var(--dm-space-2);
+    border: 1px solid var(--dm-border);
+    border-radius: var(--dm-radius-sm);
+    background: var(--dm-surface);
+    color: var(--dm-text);
+    font: inherit;
+    font-size: var(--dm-text-sm);
+}
+
+/* ---- body: outline, canvas, side panel ---- */
+
+.docs-ed__body { flex: 1; display: flex; min-height: 0; }
+.docs-outline {
+    flex: 0 0 220px;
+    padding: var(--dm-space-3);
+    border-right: 1px solid var(--dm-border);
+    overflow-y: auto;
+}
+.docs-outline__head {
+    display: flex;
+    align-items: center;
+    gap: var(--dm-space-1);
+    margin-bottom: var(--dm-space-2);
+    font-size: var(--dm-text-xs);
+    font-weight: var(--dm-font-semibold);
+    text-transform: uppercase;
+    letter-spacing: .04em;
+    color: var(--dm-text-muted);
+}
+.docs-outline__empty { margin: 0; font-size: var(--dm-text-sm); color: var(--dm-text-muted); }
+.docs-outline__list { display: flex; flex-direction: column; }
+.docs-outline__item {
+    display: block;
+    width: 100%;
+    padding: 4px var(--dm-space-2);
+    border: 0;
+    border-radius: var(--dm-radius-sm);
+    background: transparent;
+    color: var(--dm-text-secondary);
+    font: inherit;
+    font-size: var(--dm-text-sm);
+    text-align: left;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: pointer;
+}
+.docs-outline__item:hover { background: var(--dm-hover-bg); color: var(--dm-text); }
+.docs-outline__item--h1 { font-weight: var(--dm-font-semibold); color: var(--dm-text); }
+.docs-outline__item--h2 { padding-left: calc(var(--dm-space-2) + 12px); }
+.docs-outline__item--h3 { padding-left: calc(var(--dm-space-2) + 24px); }
+.docs-outline__item--h4 { padding-left: calc(var(--dm-space-2) + 36px); }
+
+.docs-ed__canvas {
+    position: relative;
+    flex: 1;
+    min-width: 0;
+    overflow-y: auto;
+    padding: var(--dm-space-6) var(--dm-space-4) var(--dm-space-8);
+    background: color-mix(in srgb, var(--dm-text) 5%, var(--dm-surface));
+}
+.docs-page {
+    max-width: 816px;
+    min-height: 1056px;
+    margin: 0 auto;
+    background: var(--dm-surface);
+    border: 1px solid var(--dm-border);
+    border-radius: 2px;
+    box-shadow: 0 1px 4px color-mix(in srgb, var(--dm-text) 14%, transparent);
+}
+.docs-ed__side {
+    flex: 0 0 320px;
+    display: flex;
+    flex-direction: column;
+    border-left: 1px solid var(--dm-border);
+    min-width: 0;
+}
+.docs-ed__side-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--dm-space-2) var(--dm-space-3);
+    border-bottom: 1px solid var(--dm-border);
+    font-weight: var(--dm-font-semibold);
+    font-size: var(--dm-text-sm);
+}
+.docs-ed__side-body { flex: 1; overflow-y: auto; padding: var(--dm-space-3); }
+
+.docs-ed__foot {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--dm-space-3);
+    padding: 4px var(--dm-space-3);
+    border-top: 1px solid var(--dm-border);
+    font-size: var(--dm-text-xs);
+    color: var(--dm-text-muted);
+}
+
+/* ---- the document itself ---- */
+
+.docs-surface {
+    min-height: 1000px;
+    padding: 72px 88px;
+    color: var(--dm-text);
+    font-size: 15px;
+    line-height: 1.65;
+    outline: none;
+    overflow-wrap: anywhere;
+}
+.docs-surface.is-empty::before {
+    content: attr(data-placeholder);
+    position: absolute;
+    color: var(--dm-text-muted);
+    pointer-events: none;
+}
+.docs-surface > :first-child { margin-top: 0; }
+.docs-surface h1 { font-size: 2em; line-height: 1.2; margin: 1.1em 0 .45em; }
+.docs-surface h2 { font-size: 1.5em; line-height: 1.25; margin: 1.1em 0 .4em; }
+.docs-surface h3 { font-size: 1.22em; margin: 1em 0 .35em; }
+.docs-surface h4 { font-size: 1.05em; margin: 1em 0 .3em; }
+.docs-surface p { margin: 0 0 .75em; }
+.docs-surface a { color: var(--dm-primary); }
+.docs-surface img { max-width: 100%; height: auto; border-radius: 2px; }
+.docs-surface blockquote {
+    margin: 0 0 1em;
+    padding: .25em 1em;
+    border-left: 4px solid var(--dm-border);
+    color: var(--dm-text-secondary);
+}
+.docs-surface pre {
+    margin: 0 0 1em;
+    padding: var(--dm-space-3);
+    border: 1px solid var(--dm-code-border, var(--dm-border));
+    border-radius: var(--dm-radius-sm);
+    background: var(--dm-code-bg);
+    color: var(--dm-code-text, var(--dm-text));
+    font-family: var(--dm-font-mono);
+    font-size: .88em;
+    white-space: pre-wrap;
+}
+.docs-surface code { font-family: var(--dm-font-mono); font-size: .9em; padding: 1px 4px; border-radius: 3px; background: var(--dm-code-bg); }
+.docs-surface pre code { padding: 0; background: none; }
+.docs-surface hr { border: 0; border-top: 1px solid var(--dm-border); margin: 1.5em 0; }
+.docs-surface table { border-collapse: collapse; width: 100%; margin: 0 0 1em; table-layout: fixed; }
+.docs-surface td,
+.docs-surface th { border: 1px solid var(--dm-border); padding: 6px 8px; vertical-align: top; text-align: left; }
+.docs-surface th { background: color-mix(in srgb, var(--dm-text) 5%, transparent); font-weight: var(--dm-font-semibold); }
+.docs-surface ul[data-type="checklist"] { list-style: none; padding-left: 0; }
+.docs-surface ul[data-type="checklist"] > li { position: relative; padding-left: 28px; }
+.docs-surface ul[data-type="checklist"] > li::before {
+    content: "";
+    position: absolute;
+    left: 2px;
+    top: .3em;
+    width: 15px;
+    height: 15px;
+    border: 1.5px solid var(--dm-text-muted);
+    border-radius: 3px;
+    background: var(--dm-surface);
+    cursor: pointer;
+}
+.docs-surface ul[data-type="checklist"] > li[data-checked="true"] { color: var(--dm-text-muted); text-decoration: line-through; }
+.docs-surface ul[data-type="checklist"] > li[data-checked="true"]::before {
+    border-color: var(--dm-primary);
+    background: var(--dm-primary)
+        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
+}
+.docs-ed.is-readonly .docs-surface { cursor: default; }
+
+/* ---- focus mode: the admin's own chrome steps aside ---- */
+
+body.docs-focus #admin-sidebar,
+body.docs-focus #admin-topbar,
+body.docs-focus .dm-plugin-banner { display: none !important; }
+body.docs-focus .dashboard-main { margin: 0 !important; padding: 0 !important; }
+body.docs-focus .docs-ed { position: fixed; inset: 0; z-index: 900; height: auto; border: 0; border-radius: 0; }
+
+/* ================================================================ Panels */
+
+.docs-share, .docs-settings, .docs-form { display: flex; flex-direction: column; gap: var(--dm-space-4); padding: var(--dm-space-4); }
+.docs-share__group, .docs-settings__group { display: flex; flex-direction: column; gap: var(--dm-space-2); }
+.docs-share__heading, .docs-settings__heading {
+    display: flex;
+    align-items: center;
+    gap: var(--dm-space-1);
+    margin: 0;
+    font-size: var(--dm-text-sm);
+    font-weight: var(--dm-font-semibold);
+}
+.docs-share__people { display: flex; flex-direction: column; gap: var(--dm-space-1); }
+.docs-share__person { display: flex; align-items: center; gap: var(--dm-space-2); padding: 4px 0; }
+.docs-share__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--dm-text-sm); }
+.docs-share__role { width: auto; }
+.docs-share__remove { opacity: .6; }
+.docs-share__remove:hover { opacity: 1; }
+.docs-share__matches {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--dm-border);
+    border-radius: var(--dm-radius-md);
+    background: var(--dm-surface);
+    overflow: hidden;
+}
+.docs-share__pick {
+    display: flex;
+    align-items: center;
+    gap: var(--dm-space-2);
+    padding: 6px var(--dm-space-2);
+    border: 0;
+    background: transparent;
+    color: var(--dm-text);
+    font: inherit;
+    font-size: var(--dm-text-sm);
+    text-align: left;
+    cursor: pointer;
+}
+.docs-share__pick:hover, .docs-share__pick:focus-visible { background: var(--dm-hover-bg); }
+.docs-share__notify { display: flex; flex-direction: column; gap: var(--dm-space-2); }
+.docs-share__link { display: flex; gap: var(--dm-space-2); align-items: center; }
+.docs-share__link input { flex: 1; min-width: 0; font-family: var(--dm-font-mono); font-size: var(--dm-text-xs); }
+.docs-share__note, .docs-settings__note { margin: 0; font-size: var(--dm-text-sm); color: var(--dm-text-muted); }
+.docs-share__actions, .docs-settings__actions, .docs-form__actions { display: flex; justify-content: flex-end; gap: var(--dm-space-2); }
+.docs-share__ext:empty { display: none; }
+.docs-settings__row { display: flex; justify-content: space-between; align-items: center; gap: var(--dm-space-2); font-size: var(--dm-text-sm); }
+.docs-form__choice { display: flex; flex-direction: column; gap: var(--dm-space-2); margin: 0; padding: 0; border: 0; }
+
+/* ---- find and replace ---- */
+
+.docs-find {
+    position: sticky;
+    top: calc(-1 * var(--dm-space-6));
+    z-index: 3;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--dm-space-2);
+    max-width: 816px;
+    margin: calc(-1 * var(--dm-space-6)) auto var(--dm-space-3);
+    padding: var(--dm-space-2) var(--dm-space-3);
+    border: 1px solid var(--dm-border);
+    border-radius: 0 0 var(--dm-radius-md) var(--dm-radius-md);
+    background: var(--dm-surface-raised, var(--dm-surface));
+    box-shadow: var(--dm-shadow-md);
+}
+.docs-find input[type="text"] { width: 150px; }
+.docs-find__case { display: inline-flex; align-items: center; gap: 4px; font-size: var(--dm-text-xs); color: var(--dm-text-secondary); white-space: nowrap; }
+.docs-find__status { flex: 1; font-size: var(--dm-text-xs); color: var(--dm-text-muted); }
+
+/* ---- version history ---- */
+
+.docs-versions { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--dm-space-3); min-height: 60vh; }
+.docs-versions__empty, .docs-versions__note { grid-column: 1 / -1; margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.docs-versions__list { display: flex; flex-direction: column; gap: 2px; max-height: 70vh; overflow-y: auto; }
+.docs-version {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: var(--dm-space-2);
+    border: 1px solid transparent;
+    border-radius: var(--dm-radius-sm);
+    background: transparent;
+    color: var(--dm-text);
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+}
+.docs-version:hover { background: var(--dm-hover-bg); }
+.docs-version.is-active { border-color: var(--dm-primary); background: color-mix(in srgb, var(--dm-primary) 10%, transparent); }
+.docs-version strong { font-size: var(--dm-text-sm); }
+.docs-version__when, .docs-version__preview { font-size: var(--dm-text-xs); color: var(--dm-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.docs-versions__preview { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden; }
+.docs-versions__hint { margin: var(--dm-space-4); color: var(--dm-text-muted); }
+.docs-versions__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--dm-space-2); padding: var(--dm-space-2) var(--dm-space-3); border-bottom: 1px solid var(--dm-border); font-size: var(--dm-text-sm); font-weight: var(--dm-font-semibold); }
+.docs-versions__body.docs-surface { min-height: 0; max-height: 64vh; overflow-y: auto; padding: var(--dm-space-4) var(--dm-space-5); }
+
+/* ---- template picker (still used by Save as template) ---- */
+
+.docs-templates { display: flex; flex-direction: column; gap: var(--dm-space-2); }
+.docs-template { display: grid; grid-template-columns: 1fr auto; gap: var(--dm-space-1) var(--dm-space-3); padding: var(--dm-space-2); border: 1px solid var(--dm-border); border-radius: var(--dm-radius-sm); }
+.docs-template__preview { grid-column: 1; margin: 0; font-size: var(--dm-text-xs); color: var(--dm-text-muted); }
+.docs-template__actions { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: var(--dm-space-1); align-items: center; }
+
+/* ============================================================ Small screens */
+
+@media (max-width: 900px) {
+    .docs-outline { position: absolute; z-index: 4; top: 0; bottom: 0; left: 0; background: var(--dm-surface); box-shadow: var(--dm-shadow-md); }
+    .docs-ed__body { position: relative; }
+    .docs-ed__side { position: absolute; z-index: 4; top: 0; bottom: 0; right: 0; width: min(320px, 90%); background: var(--dm-surface); box-shadow: var(--dm-shadow-md); }
+    .docs-surface { padding: 40px 32px; }
+}
+@media (max-width: 720px) {
+    .docs-home, .docs-home.is-rail-collapsed { grid-template-columns: 1fr; }
+    .docs-rail { position: static; max-height: none; }
+    .is-rail-collapsed .docs-rail__nav { display: none; }
+    .docs-home:not(.is-rail-collapsed) .docs-main { display: none; }
+    .docs-main__search { flex: 1 1 100%; order: 5; }
+    .docs-cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--dm-space-2); }
+    .docs-main__body.is-list .docs-card__info { grid-template-columns: 1fr; gap: 2px; }
+    .docs-ed { height: calc(100vh - 110px); }
+    .docs-ed__canvas { padding: var(--dm-space-2) 0; }
+    .docs-page { border-left: 0; border-right: 0; min-height: 0; }
+    .docs-surface { padding: 24px 18px; min-height: 60vh; }
+    .docs-ed__actions .btn:not(.docs-ed__share):not(.docs-ed__more) { display: none; }
+    .docs-versions { grid-template-columns: 1fr; }
+}
+
+/* ================================================================== Print */
+
+@media print {
+    #admin-sidebar, #admin-topbar, .dm-plugin-banner, .docs-ed__top, .docs-ed__toolbar, .docs-outline, .docs-ed__side, .docs-ed__foot { display: none !important; }
+    .docs-ed, .docs-ed__canvas, .docs-page { border: 0; box-shadow: none; background: none; height: auto; overflow: visible; }
+    .docs-surface { padding: 0; min-height: 0; }
+}
+
+/* ---- 2.10: rail counts, loading slots ---- */
+.docs-place__count {
+    margin-left: auto;
+    font-size: var(--dm-text-xs);
+    color: var(--dm-text-muted);
+    font-variant-numeric: tabular-nums;
+}
+.docs-place.is-active .docs-place__count { color: var(--dm-text); }
+.is-rail-collapsed .docs-place__count { display: none; }
+/* Block elements: a skeleton in a flex row collapses to a sliver. */
+.docs-loading { display: block; color: var(--dm-text-muted); }
+.docs-loading[hidden] { display: none; }
+.docs-ed__loading { display: block; max-width: 816px; margin: 0 auto; color: var(--dm-text-muted); }
+.docs-ed__loading[hidden] { display: none; }
+.docs-ed__loading:not([hidden]) + .docs-page { display: none; }
+
+/* ---- PDF documents (2.13): the file in the browser's own viewer, no toolbar, no outline ---- */
+
+.docs-ed.is-pdf .docs-ed__toolbar,
+.docs-ed.is-pdf .docs-outline,
+.docs-ed.is-pdf [data-on-click="toggleOutline"],
+.docs-ed.is-pdf [data-on-click="find"] { display: none; }
+.docs-ed.is-pdf .docs-ed__canvas { padding: var(--dm-space-4); }
+.docs-page.docs-pdf {
+    display: flex;
+    flex-direction: column;
+    max-width: 1000px;
+    height: calc(100vh - 230px);
+    min-height: 480px;
+    overflow: hidden;
+    border-radius: var(--dm-radius-md);
+}
+.docs-pdf__frame { flex: 1; width: 100%; border: 0; background: #fff; }
+.docs-pdf__state {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--dm-space-2);
+    padding: var(--dm-space-8);
+    color: var(--dm-text-muted);
+    text-align: center;
+}
+.docs-pdf__state p { margin: 0; }
+.docs-pdf__hint { font-size: var(--dm-text-xs); }
+.docs-focus .docs-page.docs-pdf { height: calc(100vh - 120px); }
+.docs-versions__pdf { display: flex; flex-direction: column; gap: var(--dm-space-3); padding: var(--dm-space-4); color: var(--dm-text-secondary); }
+.docs-versions__pdf .docs-versions__facts { font-weight: var(--dm-font-semibold); color: var(--dm-text); }
+.docs-versions__pdf .docs-versions__extract { white-space: pre-line; font-size: var(--dm-text-sm); color: var(--dm-text-muted); max-height: 40vh; overflow: auto; }