/* VIBRIYOGN Ops — Docs (pages, wikis, databases). Loaded after ui.css. Everything is scoped under .dx / .dx-*. */
.page.dx-page { max-width: none; padding: 0 !important; display: block !important; }
.dx { --dx-side: 260px; display: grid; grid-template-columns: var(--dx-side) minmax(0, 1fr); min-height: calc(100vh - 56px); background: var(--paper); }
.dx.side-off { grid-template-columns: 0 minmax(0, 1fr); }
.dx.side-off .dx-side { visibility: hidden; }
html.vy-narrow .dx:not(.side-peek) .dx-side, html.vy-mid .dx:not(.side-peek) .dx-side { box-shadow: none; }
.dx-show { display: none; border: 0; background: none; color: var(--muted); font-weight: 600; padding: 6px 8px; border-radius: var(--r-xs); cursor: pointer; }
.dx.side-off .dx-show { display: inline-flex; }
.dx-show:hover { background: var(--hover); color: var(--text); }

/* Sidebar */
.dx-side { position: sticky; top: 0; align-self: start; height: 100vh; display: flex; flex-direction: column; background: #f8f8f6; border-right: 1px solid var(--line); overflow: hidden; }
.dx-shead { display: flex; align-items: center; gap: 8px; padding: 14px 12px 6px 16px; }
.dx-shead b { flex: 1; font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-hide { border: 0; background: none; color: var(--faint); font-size: 16px; cursor: pointer; border-radius: var(--r-xs); padding: 2px 8px; }
.dx-hide:hover { background: #ececE8; color: var(--text); }
.dx-sbtns { padding: 2px 8px 8px; display: grid; gap: 1px; }
.dx-sb { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 6px 8px; border-radius: var(--r-xs); font-size: var(--fs-md); color: var(--muted); font-weight: 500; text-decoration: none; cursor: pointer; text-align: left; }
.dx-sb svg { width: 16px; height: 16px; }
.dx-sb:hover { background: #ececE8; color: var(--text); }
.dx-tree { flex: 1; overflow: auto; padding: 0 8px 12px; }
.dx-sec { font: 600 11px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding: 14px 8px 6px; }
.dx-tl { display: flex; align-items: center; gap: 4px; min-height: 30px; padding: 2px 6px; border-radius: var(--r-xs); color: var(--text); text-decoration: none; font-size: var(--fs-md); position: relative; transition: background .12s; }
.dx-tl:hover { background: #ececE8; }
.dx-tl.on { background: #e9e9e4; font-weight: 600; }
.dx-tl.on::before { content: ""; position: absolute; left: -4px; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: var(--accent); }
.dx-tl.fav { padding-left: 26px; }
.dx-ic { width: 20px; flex: none; text-align: center; font-size: 15px; line-height: 1; }
.dx-tt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-car { flex: none; width: 18px; height: 18px; border: 0; background: none; border-radius: 4px; cursor: pointer; position: relative; padding: 0; }
.dx-car::before { content: ""; position: absolute; left: 6px; top: 5px; border: 4px solid transparent; border-left: 5px solid var(--faint); transition: transform .15s; transform-origin: 3px 4px; }
.dx-car.open::before { transform: rotate(90deg); }
.dx-car.none::before { opacity: .35; }
.dx-car:hover { background: #dcdcd6; }
.dx-tact { display: none; gap: 2px; }
.dx-tl:hover .dx-tact, .dx-tl:focus-within .dx-tact { display: inline-flex; }
.dx-tact button { border: 0; background: none; width: 22px; height: 22px; border-radius: 4px; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; }
.dx-tact button:hover { background: #dcdcd6; color: var(--text); }
.dx-ti.dragging > .dx-tl { opacity: .4; }
.dx-tl.drop-in { background: #fff4b8; box-shadow: inset 0 0 0 2px var(--accent); }
.dx-tl.drop-before { box-shadow: inset 0 2px 0 var(--info); }
.dx-tl.drop-after { box-shadow: inset 0 -2px 0 var(--info); }
.dx-none { color: var(--faint); font-size: var(--fs-sm); padding: 6px 10px; margin: 0; }
.dx-sfoot { border-top: 1px solid var(--line); padding: 6px 8px; }

/* Main column */
.dx-main { min-width: 0; position: relative; }
.dx-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 6px; height: 46px; padding: 0 14px; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); }
.dx-crumbs { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; overflow: hidden; white-space: nowrap; font-size: var(--fs-md); }
.dx-crumbs a { color: var(--muted); text-decoration: none; padding: 3px 6px; border-radius: var(--r-xs); overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.dx-crumbs a:last-child { color: var(--text); }
.dx-crumbs a:hover { background: var(--hover); }
.dx-crumbs span { color: var(--faint); }
.dx-saved { font-size: var(--fs-xs); color: var(--faint); min-width: 54px; text-align: right; }
.dx-here { display: inline-flex; gap: 0; }
.dx-av { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #e8e8e3; color: var(--ink); font: 700 11px/1 var(--body); flex: none; }
.dx-here .dx-av { margin-left: -6px; border: 2px solid #fff; background: #d8ecff; }
.dx-here .dx-av.ed { background: #fff0a8; }
.dx-bb { position: relative; border: 0; background: none; color: var(--muted); font-weight: 600; font-size: var(--fs-md); height: 30px; padding: 0 9px; border-radius: var(--r-xs); cursor: pointer; }
.dx-bb:hover { background: var(--hover); color: var(--text); }
.dx-bb.on { color: #c79a00; }
.dx-bb i { position: absolute; top: 0; right: -2px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--accent); color: var(--ink); font: 700 10px/16px var(--body); font-style: normal; text-align: center; padding: 0 3px; }
.dx-lock { font-size: 13px; }
.dx-conflict { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 14px; padding: 10px 14px; border-radius: var(--r-sm); background: #fff6d6; border: 1px solid #f1dc8b; font-size: var(--fs-md); }
.dx-conflict span { color: var(--muted); flex: 1; }

/* Document */
.dx-doc { max-width: 760px; margin: 0 auto; padding: 0 56px 160px; }
.dx-doc.wide { max-width: none; padding: 0 72px 160px; }
.dx-cover { height: 180px; margin: 0 -56px; position: relative; background: var(--ink); }
.dx-doc.wide .dx-cover { margin: 0 -72px; }
:is(.dx, .dx-pop, dialog) [data-cover=brand] { background: var(--ink) !important; box-shadow: inset 0 -6px 0 #ffd400; }
:is(.dx, .dx-pop, dialog) [data-cover=brand]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(90deg, #3b3fb5, #1e7fd8, #1fa85a, #e8b900, #ff8a00, #e63b2e); }
:is(.dx, .dx-pop, dialog) [data-cover=ink] { background: linear-gradient(135deg, #0a0a0a, #2b2b2e) !important; }
:is(.dx, .dx-pop, dialog) [data-cover=sun] { background: linear-gradient(135deg, #ffd400, #ff8a00) !important; }
:is(.dx, .dx-pop, dialog) [data-cover=sea] { background: linear-gradient(135deg, #1e7fd8, #19b3a6) !important; }
:is(.dx, .dx-pop, dialog) [data-cover=leaf] { background: linear-gradient(135deg, #1fa85a, #9ad14b) !important; }
:is(.dx, .dx-pop, dialog) [data-cover=rose] { background: linear-gradient(135deg, #e63b2e, #ff8a73) !important; }
:is(.dx, .dx-pop, dialog) [data-cover=sand] { background: linear-gradient(135deg, #e9dcc3, #c9b38a) !important; }
:is(.dx, .dx-pop, dialog) [data-cover=slate] { background: linear-gradient(135deg, #43506a, #8a96ad) !important; }
i.sw { display: inline-block; width: 18px; height: 12px; border-radius: 3px; position: relative; overflow: hidden; }
.dx-cbtn { position: absolute; right: 16px; bottom: 14px; border: 0; background: rgba(255,255,255,.9); border-radius: var(--r-xs); padding: 5px 10px; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; opacity: 0; transition: opacity .15s; }
.dx-cover:hover .dx-cbtn { opacity: 1; }
.dx-headwrap { padding-top: 64px; position: relative; }
.dx-headwrap.has-cover { padding-top: 26px; }
.dx-icon { display: block; border: 0; background: none; font-size: 64px; line-height: 1; padding: 4px; margin: 0 0 6px -4px; border-radius: var(--r-sm); cursor: pointer; transition: background .15s; }
.dx-headwrap.has-cover .dx-icon { margin-top: -62px; }
.dx-icon:hover:not(:disabled) { background: var(--hover); }
.dx-addrow { display: flex; gap: 4px; margin-bottom: 6px; opacity: 0; transition: opacity .15s; }
.dx-headwrap:hover .dx-addrow, .dx-addrow:focus-within { opacity: 1; }
.dx-addrow button { border: 0; background: none; color: var(--faint); font-size: var(--fs-sm); font-weight: 500; padding: 4px 8px; border-radius: var(--r-xs); cursor: pointer; }
.dx-addrow button:hover { background: var(--hover); color: var(--muted); }
.dx-title { font: 800 40px/1.15 var(--head); letter-spacing: -.025em; margin: 0 0 14px; outline: none; word-break: break-word; }
.dx-title:empty::before { content: attr(data-ph); color: #cfcfca; }
.dx-back { margin-top: 48px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: var(--fs-sm); }
.dx-back b { color: var(--faint); margin-right: 6px; font-weight: 600; }
.dx-back a { text-decoration: none; padding: 3px 8px; border-radius: var(--r-xs); background: var(--hover); }

/* Blocks */
.dx-blocks { position: relative; font-size: 16px; line-height: 1.6; }
.dx-blocks.drop { outline: 2px dashed var(--info); outline-offset: 6px; border-radius: 6px; }
.bk { position: relative; display: flex; padding-left: calc(var(--ind, 0) * 26px); margin: 1px 0; border-radius: 4px; }
.bk-c { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 4px; }
.bx { flex: 1; min-width: 0; outline: none; padding: 3px 2px; white-space: pre-wrap; word-break: break-word; min-height: 1.6em; }
.bx:empty:focus::before, .t-h1 .bx:empty::before, .t-h2 .bx:empty::before, .t-h3 .bx:empty::before, .t-todo .bx:empty::before, .t-bullet .bx:empty::before, .t-number .bx:empty::before, .t-toggle .bx:empty::before, .t-quote .bx:empty::before, .t-callout .bx:empty::before, figcaption.bx:empty:focus::before { content: attr(data-ph); color: #c3c3bd; pointer-events: none; }
.dx-blocks:not(:has(.bk)) + * {}
.bk-h { position: absolute; left: calc(var(--ind, 0) * 26px - 48px); top: 3px; display: flex; opacity: 0; transition: opacity .12s; }
.bk:hover > .bk-h, .bk:focus-within > .bk-h { opacity: 1; }
.bk-h button { border: 0; background: none; width: 22px; height: 24px; border-radius: 4px; color: #b5b5ae; cursor: pointer; font-size: 15px; line-height: 1; padding: 0; }
.bk-h button:hover { background: var(--hover); color: var(--muted); }
.bk-grip { cursor: grab !important; letter-spacing: -3px; font-size: 13px !important; }
.bk.dragging { opacity: .35; }
.bk.drop-above { box-shadow: 0 -2px 0 var(--info); }
.bk.drop-below { box-shadow: 0 2px 0 var(--info); }
.bk.flash { animation: dxflash 1.4s ease; }
@keyframes dxflash { 0%, 40% { background: #fff3b0; } 100% { background: transparent; } }
.bk-cm { position: absolute; right: -54px; top: 3px; border: 0; background: #fff6cc; border-radius: 10px; font-size: 11px; padding: 2px 6px; cursor: pointer; }
.t-h1 .bx { font: 800 30px/1.25 var(--head); letter-spacing: -.02em; margin-top: 22px; }
.t-h2 .bx { font: 750 23px/1.3 var(--head); letter-spacing: -.015em; margin-top: 16px; }
.t-h3 .bx { font: 700 19px/1.35 var(--body); margin-top: 10px; }
.bk-chk { flex: none; display: grid; place-items: center; width: 24px; height: 1.6em; padding-top: 3px; }
.bk-chk input { width: 16px; height: 16px; accent-color: var(--ink); cursor: pointer; margin: 0; }
.bx.done { color: var(--faint); text-decoration: line-through; }
.bk-dot, .bk-num { flex: none; width: 24px; text-align: center; padding-top: 3px; user-select: none; }
.bk-dot { font-size: 18px; line-height: 1.35; }
.bk-num { font-variant-numeric: tabular-nums; color: var(--text); text-align: right; padding-right: 4px; }
.bk-tog { flex: none; width: 24px; height: 1.6em; margin-top: 3px; border: 0; background: none; cursor: pointer; position: relative; border-radius: 4px; }
.bk-tog::before { content: ""; position: absolute; left: 8px; top: 7px; border: 5px solid transparent; border-left: 7px solid var(--text); transition: transform .15s; transform-origin: 3px 5px; }
.bk-tog.open::before { transform: rotate(90deg); }
.bk-tog:hover { background: var(--hover); }
.bx.quote { border-left: 3px solid var(--ink); padding-left: 14px; font-size: 17px; }
.t-callout .bk-c { background: #f4f4f1; border-radius: var(--r-sm); padding: 12px 14px 12px 10px; margin: 4px 0; }
.t-callout[data-c] .bk-c { background: var(--cbg); }
.bk-emo { flex: none; border: 0; background: none; font-size: 20px; line-height: 1.2; cursor: pointer; border-radius: 6px; padding: 2px 4px; }
.bk-emo:hover:not(:disabled) { background: rgba(0,0,0,.05); }
.bk-code { flex: 1; min-width: 0; position: relative; background: #f6f6f3; border-radius: var(--r-sm); margin: 6px 0; }
.bk-code pre.bx { margin: 0; padding: 34px 16px 14px; font: 13.5px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; overflow-x: auto; tab-size: 2; }
.bk-lang { position: absolute; left: 10px; top: 6px; border: 0; background: none; font-size: 12px; color: var(--muted); cursor: pointer; }
.bk-copy { position: absolute; right: 8px; top: 6px; border: 0; background: none; font-size: 12px; color: var(--muted); cursor: pointer; padding: 2px 6px; border-radius: 4px; opacity: 0; }
.bk-code:hover .bk-copy { opacity: 1; }
.bk-copy:hover { background: #e8e8e3; }
.bk-hr { flex: 1; border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
.bk-img { margin: 8px 0; position: relative; max-width: 100%; }
.bk-img img { display: block; width: 100%; border-radius: var(--r-sm); }
.bk-img figcaption { font-size: var(--fs-sm); color: var(--muted); min-height: 0; padding-top: 6px; }
.bk-rs { position: absolute; right: -6px; top: 50%; width: 8px; height: 44px; margin-top: -30px; border-radius: 4px; background: rgba(0,0,0,.45); cursor: ew-resize; opacity: 0; transition: opacity .15s; }
.bk-img:hover .bk-rs { opacity: 1; }
.bk-empty { flex: 1; display: flex; align-items: center; gap: 10px; border: 0; background: #f4f4f1; border-radius: var(--r-sm); padding: 14px 16px; color: var(--muted); font-weight: 600; cursor: pointer; text-align: left; margin: 4px 0; transition: background .15s; }
.bk-empty small { font-weight: 400; color: var(--faint); }
.bk-empty:hover:not(:disabled) { background: #ecece7; }
.bk-file, .bk-bm, .bk-page { flex: 1; display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); padding: 6px 8px; border-radius: var(--r-xs); transition: background .12s; min-width: 0; }
.bk-file { border: 1px solid var(--line); padding: 10px 12px; margin: 4px 0; }
.bk-file small, .bk-bm small { color: var(--faint); margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-bm { flex-direction: column; align-items: flex-start; gap: 2px; border: 1px solid var(--line); padding: 12px 14px; margin: 4px 0; }
.bk-bm small { margin-left: 0; max-width: 100%; }
.bk-page { font-weight: 600; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.bk-file:hover, .bk-bm:hover, .bk-page:hover { background: var(--hover); }
.bk-gone { color: var(--faint); font-style: italic; padding: 4px; }
.bk-embed { flex: 1; aspect-ratio: 16 / 9; border-radius: var(--r-sm); overflow: hidden; background: #000; margin: 6px 0; }
.bk-embed iframe { width: 100%; height: 100%; border: 0; }
.bk-toc { flex: 1; display: grid; gap: 1px; padding: 6px 0; }
.bk-toc a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; font-size: var(--fs-md); padding: 2px 0; }
.bk-toc a:hover { color: var(--text); }
.dx-tail { height: 120px; cursor: text; }
.bx a { color: inherit; text-decoration: underline; text-decoration-color: #b8b8b2; text-underline-offset: 3px; cursor: pointer; }
.bx a[data-doc] { text-decoration: none; font-weight: 600; background: #f3f3ef; border-radius: 4px; padding: 0 4px; }
.bx a[data-doc]:hover { background: #e9e9e3; }
.bx code { font: .88em ui-monospace, SFMono-Regular, Menlo, monospace; background: #f1f0ec; color: #c3352b; border-radius: 4px; padding: .1em .35em; }
/* Colors (text and highlight) */
:is(.dx, .dx-pop, dialog) [data-c=gray] { --fg: #787774; --cbg: #f1f1ef; } :is(.dx, .dx-pop, dialog) [data-c=brown] { --fg: #9f6b53; --cbg: #f4eeee; } :is(.dx, .dx-pop, dialog) [data-c=orange] { --fg: #d9730d; --cbg: #fbecdd; }
:is(.dx, .dx-pop, dialog) [data-c=yellow] { --fg: #b58a00; --cbg: #fbf3db; } :is(.dx, .dx-pop, dialog) [data-c=green] { --fg: #2c8a5a; --cbg: #edf3ec; } :is(.dx, .dx-pop, dialog) [data-c=blue] { --fg: #1e6fd0; --cbg: #e7f3f8; }
:is(.dx, .dx-pop, dialog) [data-c=purple] { --fg: #7b3fbf; --cbg: #f6f3f9; } :is(.dx, .dx-pop, dialog) [data-c=pink] { --fg: #c14c8a; --cbg: #faf1f5; } :is(.dx, .dx-pop, dialog) [data-c=red] { --fg: #d44c47; --cbg: #fdebec; }
.dx-blocks span[data-c]:not([data-c^="bg-"]), .bk[data-c]:not(.t-callout) .bx, .dx-menu b[data-c] { color: var(--fg); }
span[data-c^="bg-"], .dx-menu b[data-c^="bg-"] { border-radius: 3px; padding: 0 2px; }
:is(.dx, .dx-pop, dialog) [data-c=bg-gray] { background: #f1f1ef; } :is(.dx, .dx-pop, dialog) [data-c=bg-brown] { background: #f4eeee; } :is(.dx, .dx-pop, dialog) [data-c=bg-orange] { background: #fbecdd; } :is(.dx, .dx-pop, dialog) [data-c=bg-yellow] { background: #fbf3db; } :is(.dx, .dx-pop, dialog) [data-c=bg-green] { background: #edf3ec; }
:is(.dx, .dx-pop, dialog) [data-c=bg-blue] { background: #e7f3f8; } :is(.dx, .dx-pop, dialog) [data-c=bg-purple] { background: #f6f3f9; } :is(.dx, .dx-pop, dialog) [data-c=bg-pink] { background: #faf1f5; } :is(.dx, .dx-pop, dialog) [data-c=bg-red] { background: #fdebec; }

/* Popovers, menus, slash menu */
.dx-pop { position: fixed; z-index: 300; min-width: 220px; max-width: 340px; max-height: min(440px, 70vh); overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: 0 12px 32px rgba(15,15,15,.14), 0 2px 6px rgba(15,15,15,.06); padding: 6px; animation: dxpop .12s ease-out; }
@keyframes dxpop { from { opacity: 0; transform: translateY(-4px); } }
.dx-menu button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 6px 8px; border-radius: var(--r-xs); font-size: var(--fs-md); text-align: left; cursor: pointer; color: var(--text); }
.dx-menu button:hover, .dx-menu button.on { background: var(--hover); }
.dx-menu button.danger { color: var(--bad); }
.dx-menu button small { margin-left: auto; color: var(--faint); font-size: var(--fs-xs); }
.dx-menu button > span:not(.mi) { flex: 1; min-width: 0; }
.dx-menu .mi { flex: none; width: 22px; text-align: center; color: var(--muted); font-weight: 700; font-size: 13px; }
.dx-menu .mi.big { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 16px; }
.dx-slash button span b { display: block; font-weight: 600; }
.dx-slash button span small { display: block; margin: 0; font-size: var(--fs-xs); }
.dx-menu hr { border: 0; border-top: 1px solid var(--line-2); margin: 5px -6px; }
.dx-mh { font: 600 11px/1 var(--body); letter-spacing: .05em; text-transform: uppercase; color: var(--faint); padding: 8px 8px 6px; }
.dx-pin { width: 100%; height: 34px; border: 1px solid var(--line); border-radius: var(--r-xs); padding: 0 10px; margin-bottom: 4px; font-size: var(--fs-md); }
.dx-plist { display: grid; gap: 1px; }
.dx-opt { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-xs); cursor: pointer; font-size: var(--fs-md); }
.dx-opt:hover { background: var(--hover); }
.dx-form { padding: 12px; min-width: 260px; }
.dx-form .row, .dx-filter .row { display: flex; gap: 6px; margin-top: 8px; justify-content: flex-end; }
.dx-filter { max-width: 560px; min-width: 420px; }
.dx-frow { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.dx-frow select, .dx-frow input { height: 32px; border: 1px solid var(--line); border-radius: var(--r-xs); padding: 0 6px; font-size: var(--fs-sm); min-width: 0; flex: 1; }
.dx-frow button { border: 0; background: none; color: var(--faint); cursor: pointer; width: 24px; }
.dx-emo { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.dx-emo button { border: 0; background: none; font-size: 20px; padding: 4px; border-radius: 6px; cursor: pointer; }
.dx-emo button:hover { background: var(--hover); }
.dx-emof { display: flex; gap: 6px; margin-top: 6px; }
.dx-emof input { flex: 1; height: 32px; border: 1px solid var(--line); border-radius: var(--r-xs); padding: 0 8px; }
.dx-fmt { position: absolute; z-index: 310; display: flex; gap: 1px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: 0 8px 24px rgba(15,15,15,.14); padding: 3px; animation: dxpop .1s ease-out; }
.dx-fmt button { border: 0; background: none; min-width: 30px; height: 30px; padding: 0 7px; border-radius: 6px; cursor: pointer; font-size: 14px; color: var(--text); }
.dx-fmt button:hover { background: var(--hover); }
.dx-fmt button:first-child { border-right: 1px solid var(--line-2); border-radius: 6px 0 0 6px; font-weight: 600; color: var(--muted); }

/* Search dialog */
dialog.dx-search { width: min(620px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: var(--r); box-shadow: 0 24px 60px rgba(0,0,0,.25); margin-top: 12vh; }
dialog.dx-search::backdrop { background: rgba(15,15,15,.35); }
.dx-sin { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.dx-sin svg { width: 18px; height: 18px; color: var(--faint); }
.dx-sin input { flex: 1; height: 54px; border: 0; outline: none; font-size: 17px; background: none; }
.dx-sres { max-height: 50vh; overflow: auto; padding: 6px; }
.dx-sres a { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: var(--r-sm); text-decoration: none; color: var(--text); }
.dx-sres a.on, .dx-sres a:hover { background: var(--hover); }
.dx-sres a b { display: block; font-weight: 600; }
.dx-sres a small { display: block; color: var(--muted); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 500px; }

/* Home and Trash */
.dx-home { max-width: 980px; padding: 48px 48px 80px; }
.dx-home h1 { font: 800 34px/1.15 var(--head); letter-spacing: -.02em; margin: 6px 0 6px; }
.dx-home h2 { font-size: var(--fs-md); text-transform: uppercase; letter-spacing: .06em; color: var(--faint); margin: 34px 0 12px; font-weight: 600; }
.dx-home .muted kbd { font: 600 12px var(--body); background: #f1f1ee; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; }
.dx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.dx-card { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; color: var(--text); background: #fff; transition: transform .15s, box-shadow .15s, border-color .15s; min-height: 118px; }
.dx-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.07); border-color: #d2d2cc; }
.dx-cic { font-size: 26px; margin-bottom: 8px; }
.dx-card b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dx-card small { margin-top: auto; color: var(--faint); font-size: var(--fs-xs); }
.dx-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.dx-tpl { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s; }
.dx-tpl span { grid-row: span 2; font-size: 24px; width: 40px; height: 40px; display: grid; place-items: center; background: #f6f6f3; border-radius: var(--r-sm); transition: background .15s; }
.dx-tpl b { font-weight: 650; font-size: var(--fs-md); }
.dx-tpl small { color: var(--muted); font-size: var(--fs-xs); line-height: 1.35; }
.dx-tpl:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.06); }
.dx-tpl:hover span { background: #fff4b8; }
.dx-trash { list-style: none; margin: 18px 0 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.dx-trash li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line-2); }
.dx-trash li:first-child { border-top: 0; }
.dx-trash li > div { flex: 1; min-width: 0; }
.dx-trash small { display: block; color: var(--faint); font-size: var(--fs-xs); }

/* Comments drawer */
.dx-drawer { position: fixed; z-index: 250; top: 0; right: 0; bottom: 0; width: min(380px, 100vw); background: #fff; border-left: 1px solid var(--line); box-shadow: -12px 0 32px rgba(0,0,0,.08); display: flex; flex-direction: column; animation: dxslide .18s ease-out; }
@keyframes dxslide { from { transform: translateX(30px); opacity: 0; } }
.dx-dh { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.dx-dh button { border: 0; background: none; font-size: 22px; cursor: pointer; color: var(--muted); }
.dx-dl { flex: 1; overflow: auto; padding: 12px 16px; }
.dx-cm { padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.dx-cm.res { opacity: .55; }
.dx-cmh { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); }
.dx-cmh small { color: var(--faint); }
.dx-cm p { margin: 6px 0 4px 32px; white-space: pre-wrap; }
.dx-cm blockquote, .dx-cf blockquote { margin: 6px 0 0 32px; padding-left: 10px; border-left: 3px solid var(--accent); color: var(--muted); font-size: var(--fs-sm); }
.dx-cf blockquote { margin: 0 0 8px; }
.dx-cma { display: flex; gap: 12px; margin-left: 32px; font-size: var(--fs-xs); }
.dx-cf { border-top: 1px solid var(--line); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); display: grid; gap: 8px; }
.dx-cf textarea { width: 100%; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; resize: vertical; }
.dx-cf button { justify-self: end; }

/* History dialog */
.dx-hist { display: grid; grid-template-columns: 200px 1fr; gap: 16px; min-height: 360px; }
.dx-hist ul { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow: auto; border-right: 1px solid var(--line); }
.dx-hist ul button { display: block; width: 100%; border: 0; background: none; text-align: left; padding: 8px 10px; border-radius: var(--r-xs); cursor: pointer; }
.dx-hist ul button.on, .dx-hist ul button:hover { background: var(--hover); }
.dx-hist ul small { display: block; color: var(--faint); }
.dx-hv { max-height: 60vh; overflow: auto; font-size: var(--fs-md); }
.dx-hv .t-h1 { font-size: 22px; font-weight: 800; } .dx-hv .t-h2 { font-size: 18px; font-weight: 700; } .dx-hv .t-h3 { font-weight: 700; }
.dx-copyin { flex: 1; height: 38px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0 10px; background: #fafaf8; min-width: 0; }
.dx-orow { margin-bottom: 6px; align-items: center; }
.dx-orow input[data-name] { flex: 1; }

/* Row page properties */
.dx-props { display: grid; gap: 2px; margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.dx-prow { display: grid; grid-template-columns: 170px 1fr; align-items: center; min-height: 34px; font-size: var(--fs-md); }
.dx-pn { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 8px; }
.dx-pv { padding: 4px 8px; border-radius: var(--r-xs); min-height: 30px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; position: relative; }
.dx-pv.ed { cursor: pointer; }
.dx-pv.ed:hover { background: var(--hover); }
.dx-pv .db-in { width: 100%; }

/* Databases */
.dx-db { margin-top: 4px; }
.db-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.db-tabs { display: flex; flex-wrap: wrap; gap: 2px; }
.db-tabs button { border: 0; background: none; padding: 8px 10px; font-size: var(--fs-md); font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.db-tabs button[aria-selected=true] { color: var(--text); border-bottom-color: var(--ink); }
.db-tabs button:hover { color: var(--text); }
.db-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px 0; }
.db-q { height: 30px; width: 140px; border: 1px solid transparent; background: none; border-radius: var(--r-xs); padding: 0 8px; font-size: var(--fs-sm); transition: width .15s, border-color .15s; }
.db-q:focus { width: 200px; border-color: var(--line); outline: none; }
.db-t { border: 0; background: none; height: 30px; padding: 0 8px; border-radius: var(--r-xs); font-size: var(--fs-sm); font-weight: 600; color: var(--muted); cursor: pointer; }
.db-t:hover { background: var(--hover); color: var(--text); }
.db-t.on { color: var(--info); }
.db-scroll { overflow-x: auto; margin: 0 -2px; }
.db-tbl { border-collapse: collapse; table-layout: fixed; min-width: 100%; width: max-content; font-size: var(--fs-md); }
.db-tbl th, .db-tbl td { border: 1px solid var(--line-2); border-left: 0; padding: 0 8px; height: 36px; text-align: left; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; }
.db-tbl th:last-child, .db-tbl td:last-child { border-right: 0; }
.db-tbl th { color: var(--muted); font-weight: 500; cursor: pointer; user-select: none; }
.db-tbl th:hover { background: var(--hover); }
.db-tbl th span { color: var(--faint); font-size: 12px; margin-right: 4px; }
.db-addcol { width: 44px; text-align: center !important; color: var(--faint) !important; font-size: 18px !important; }
.db-rs { position: absolute; right: -3px; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 1; }
.db-rs:hover { background: var(--info); }
.db-tbl td { cursor: text; }
.db-tbl tr:hover td { background: #fcfcfa; }
.db-tbl td.editing { padding: 0; overflow: visible; }
.db-in { width: 100%; min-height: 34px; border: 2px solid var(--info); border-radius: 4px; padding: 4px 8px; font: inherit; resize: vertical; background: #fff; }
.db-title { font-weight: 600; }
.db-title .t { margin-left: 2px; }
.db-open { position: absolute; right: 6px; top: 7px; font-size: 11px; font-weight: 600; color: var(--muted); text-decoration: none; background: #fff; border: 1px solid var(--line); border-radius: 5px; padding: 1px 7px; opacity: 0; transition: opacity .12s; }
.db-tbl tr:hover .db-open { opacity: 1; }
.db-tbl tr.dragging { opacity: .4; }
.db-tbl tr.drop-above td { box-shadow: inset 0 2px 0 var(--info); }
.p-checkbox { text-align: center !important; cursor: pointer !important; }
.tagc { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 4px; background: var(--cbg, #f1f1ef); color: #37352f; font-size: 13px; line-height: 20px; margin-right: 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tagc i { width: 7px; height: 7px; border-radius: 50%; background: var(--fg, #888); }
.pp { display: inline-flex; align-items: center; gap: 5px; margin-right: 8px; font-size: 13px; }
.pp .dx-av { width: 20px; height: 20px; font-size: 10px; }
.late { color: var(--bad); }
.db-addrow { display: block; width: 100%; border: 0; background: none; text-align: left; color: var(--faint); padding: 8px; font-size: var(--fs-md); border-radius: var(--r-xs); cursor: pointer; }
.db-addrow:hover { background: var(--hover); color: var(--muted); }
.db-count { font-size: var(--fs-xs); color: var(--faint); padding: 6px 8px; }
.db-cols { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; }
.db-col { flex: 0 0 270px; background: #f8f8f6; border-radius: var(--r-sm); padding: 8px; min-height: 120px; transition: background .12s; }
.db-col.drop-on { background: #fff6cc; }
.db-ch { display: flex; align-items: center; gap: 6px; padding: 4px 4px 8px; }
.db-ch small { color: var(--faint); }
.db-card { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 8px; text-decoration: none; color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: box-shadow .15s, transform .15s; cursor: pointer; }
.db-card:hover { box-shadow: 0 6px 16px rgba(0,0,0,.08); transform: translateY(-1px); }
.db-card.dragging { opacity: .4; }
.db-card.drop-above { box-shadow: 0 -3px 0 var(--info); }
.db-card b { display: block; font-weight: 600; margin-bottom: 4px; }
.db-cp { font-size: 13px; margin-top: 4px; color: var(--muted); }
.db-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.db-gal .db-card { min-height: 120px; margin: 0; }
.db-gadd { border: 1px dashed var(--line); background: none; border-radius: var(--r-sm); color: var(--faint); cursor: pointer; min-height: 120px; }
.db-calh { display: flex; align-items: center; gap: 4px; margin: 4px 0 10px; }
.db-calh b { font-size: var(--fs-lg); margin-right: auto; }
.db-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-left: 1px solid var(--line-2); border-top: 1px solid var(--line-2); }
.db-dow { font-size: var(--fs-xs); color: var(--faint); padding: 6px 8px; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.db-day { min-height: 112px; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); padding: 4px; position: relative; transition: background .12s; }
.db-day.out { background: #fafaf8; }
.db-day.out .db-dn { color: #c8c8c2; }
.db-day.drop-on { background: #fff6cc; }
.db-dn { display: inline-grid; place-items: center; min-width: 24px; height: 24px; font-size: 12px; color: var(--muted); border-radius: 12px; }
.db-day.today .db-dn { background: var(--bad); color: #fff; font-weight: 700; }
.db-ev { display: block; font-size: 12px; font-weight: 600; background: #fff; border: 1px solid var(--line); border-radius: 5px; padding: 2px 6px; margin-top: 3px; text-decoration: none; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.db-ev:hover { border-color: #c8c8c2; }
.db-dadd { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: 0; background: none; border-radius: 4px; color: var(--faint); cursor: pointer; opacity: 0; }
.db-day:hover .db-dadd { opacity: 1; }
.db-dadd:hover { background: var(--hover); }
.db-list { display: grid; }
.db-li { display: flex; align-items: center; gap: 8px; padding: 8px 6px; border-bottom: 1px solid var(--line-2); text-decoration: none; color: var(--text); border-radius: 4px; }
.db-li:hover { background: var(--hover); }
.db-li b { font-weight: 600; }
.db-lp { margin-left: auto; display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); }
.db-col .db-addrow { padding: 6px 4px; }

/* Phones and narrow content */
html.vy-narrow .dx, html.vy-mid .dx { grid-template-columns: minmax(0, 1fr); }
html.vy-narrow .dx-side, html.vy-mid .dx-side { position: fixed; z-index: 260; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); height: auto; box-shadow: 12px 0 32px rgba(0,0,0,.15); transform: translateX(-105%); transition: transform .2s; visibility: visible !important; }
html.vy-narrow .dx.side-peek .dx-side, html.vy-mid .dx.side-peek .dx-side { transform: none; }
html.vy-narrow .dx-show, html.vy-mid .dx-show { display: inline-flex; }
html.vy-narrow .dx-doc { padding: 0 18px 120px; }
html.vy-narrow .dx-cover { margin: 0 -18px; height: 130px; }
html.vy-narrow .dx-title { font-size: 30px; }
html.vy-narrow .dx-headwrap { padding-top: 28px; }
html.vy-narrow .bk-h { left: auto; right: -6px; top: 2px; background: #fff; border-radius: 6px; }
html.vy-narrow .bk-add { display: none; }
html.vy-narrow .bk { padding-right: 26px; }
html.vy-narrow .dx-home { padding: 24px 18px 80px; }
html.vy-narrow .dx-bar { padding: 0 8px; }
html.vy-narrow .dx-saved, html.vy-narrow .dx-here { display: none; }
html.vy-narrow .dx-prow { grid-template-columns: 120px 1fr; }
html.vy-narrow .dx-filter { min-width: 0; max-width: calc(100vw - 16px); }
html.vy-narrow .db-day { min-height: 70px; }
html.vy-narrow .db-ev { font-size: 11px; padding: 1px 3px; }
html.vy-narrow .dx-hist { grid-template-columns: 1fr; }
html.vy-narrow .bk-cm { position: static; margin-left: 4px; }
@media (hover: none) { .dx-tact { display: inline-flex; } .dx-addrow { opacity: 1; } .db-open { opacity: 1; } }

/* Print / Save as PDF: just the page */
@media print {
  .side, .topbar, .dx-side, .dx-bar, .bk-h, .dx-addrow, .dx-tail, .db-tools, .db-addrow, .dx-drawer, .dx-fmt { display: none !important; }
  .dx { display: block; }
  .dx-doc { max-width: none; padding: 0; }
  .shell, .main { display: block !important; }
}
/* Overrides for the shared table and input styles in ui.css */
.dx .db-tbl td:empty::after, .dx .db-tbl td:empty::before { content: none !important; }
.dx input.db-q { width: 140px !important; height: 30px !important; min-height: 0 !important; flex: none; padding: 0 8px !important; border: 1px solid transparent !important; background: none !important; box-shadow: none !important; }
.dx input.db-q:focus { width: 200px !important; border-color: var(--line) !important; }
.dx-pop input, .dx-pop select { min-height: 0; }