/* Color pairs: every color together with its opposite (its dark-scheme counterpart). */
:root {
    color-scheme: light;
    --white: #ffffff;              --white-opposite: #111111;
    --soft-black: #101010;         --soft-black-opposite: #ffffff;
    --soft-white: #fafafa;         --soft-white-opposite: #161616;
    --black-07: rgba(0,0,0,0.07);  --black-07-opposite: rgba(255,255,255,0.07);
    --black-15: rgba(0,0,0,0.15);  --black-15-opposite: rgba(255,255,255,0.15);
    --black-20: rgba(0,0,0,0.2);   --black-20-opposite: rgba(255,255,255,0.2);
    --black-40: rgba(0,0,0,0.4);   --black-40-opposite: rgba(255,255,255,0.4);
    --black-75: rgba(0,0,0,0.75);  --black-75-opposite: rgba(255,255,255,0.75);
    --silver: #c0c0c0;             --silver-opposite: #3f3f3f;
    --focus-blue: #0066cc;         --focus-blue-opposite: #ff9933;
    --accent: #253474; /* messagebar blue; same in admin mode, so no opposite */

    /* Theme colors, defaulting to the normal (light) palette. */
    --bg: var(--white);
    --fg: var(--soft-black);
    --field: var(--soft-white);
    --border: var(--black-20);
    --border-strong: var(--silver);
    --muted: var(--black-40);
    --shade: var(--black-15);
    --shade-soft: var(--black-07);
    --overlay: var(--black-75);
}
/* Admin mode: swap every theme color for its opposite (replaces the old full-page invert). */
:root:has(body.admin) {
    color-scheme: dark;
    --bg: var(--white-opposite);
    --fg: var(--soft-black-opposite);
    --field: var(--soft-white-opposite);
    --border: var(--black-20-opposite);
    --border-strong: var(--silver-opposite);
    --muted: var(--black-40-opposite);
    --shade: var(--black-15-opposite);
    --shade-soft: var(--black-07-opposite);
    --overlay: var(--black-75-opposite);
}

* {padding: 0; margin: 0; box-sizing: border-box;}
/* dvh, not %: a percentage height resolves against the small viewport (address bar
   showing), so the root box — and with it the page background — stopped short of the
   bottom once the address bar scrolled away on mobile. */
html {font-size: 15px; line-height: 2.2; min-height: 100%; min-height: 100dvh; background: var(--bg); scrollbar-width: thin; scroll-behavior: smooth;}
@media (prefers-reduced-motion: reduce) {html {scroll-behavior: auto;}}
* {font-family: 'dejavu_sans_monobook', monospace; font-weight: normal;}
h1,h2,h3,strong,b,.cm-header,.cm-strong {font-family: 'dejavu_sans_monobold', monospace; font-weight: normal!important;}
h1, .header > div:first-child {display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 2rem;}
.header > div:last-child {white-space: nowrap;}
a {cursor: pointer;}
h1 {padding-right: 3rem;}
p {line-height: 2; margin-bottom: 2rem;}
body {overflow-y: scroll; font-size: 1rem; background: var(--bg); color: var(--fg);}
/* the bar down the left edge, on every screen */
body::after {content: ""; position: fixed; left: 0; top: 0; background: var(--fg); height: 100vh; width: 0.75rem;}
body.admin img {filter: invert(1);}
/* span.hasicon paints a black icon into its background. Invert the span so the icon
   turns white, then re-invert the inner link so its text lands back on the dark
   palette (the link's padding is transparent, so the icon behind it stays white). */
body.admin ul.list li span.hasicon {filter: invert(1);}
body.admin ul.list li span.hasicon a {filter: invert(1);}
/* Controls with a black icon baked into their background image: paint them in the
   strict inverse of the dark palette and invert the whole control, so the icon turns
   white and the other colors land back on the dark palette (#e9e9e9 -> #161616 field,
   #eeeeee -> #111111 bg, #000000 -> #ffffff text). */
body.admin input[type="number"],
body.admin select:not([multiple]),
body.admin input[type="search"] {filter: invert(1); background-color: #e9e9e9; border-color: var(--black-20); color: #000000;}
body.admin a.array,
body.admin a.object {filter: invert(1); background-color: #eeeeee; border-color: var(--black-20); color: #000000;}
/* These inverted controls would flip the browser's blue focus ring and text selection
   to orange, so pre-invert those too via the --focus-blue pair. */
body.admin input[type="number"]:focus-visible,
body.admin select:not([multiple]):focus-visible,
body.admin input[type="search"]:focus-visible,
body.admin a.array:focus-visible,
body.admin a.object:focus-visible {outline: 2px solid var(--focus-blue-opposite); outline-offset: 1px;}
body.admin input[type="number"]::selection,
body.admin input[type="search"]::selection {background: var(--focus-blue-opposite); color: var(--white-opposite);}
body.dialog-iframe-open #body {max-height: 100vh; overflow: hidden;}

/* id=body only exists if instant editing is enabled */
body.dialog > .main {display: block; background: var(--bg);}
body.dialog > .main::before,
body.dialog #body::before {
    content: '';
    background: var(--overlay);
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100vh;
    z-index: 2;
}
body.dialog > .main::before {
    position: fixed;
    z-index: 1;
}
.main .dialog {background: var(--bg);}
.main .dialog .header {padding: 0;}
.main .dialog .content {width: 100%;}

a {color: var(--fg); text-decoration: none;}
.messagebar, .messagebar a {background: var(--accent); text-align: center; color: var(--white); font-weight: bold; display: block; padding: 0.5rem 1rem; line-height: 1.5; position: relative; z-index: 99;}
.messagebar {padding: 0; position: sticky; top: 0; z-index: 2;}
.header, .main {margin: 0 auto; width: 100%; max-width: 70rem; position: relative; padding: 0 1rem 0 1.5rem;}
.header {display: flex; justify-content: space-between; margin-bottom: 2.5rem; margin-top: 0.65rem;}
.header a {text-transform: lowercase;}
/* interface language switcher below the login form: the locales show as their
   two-letter code in caps, the inactive ones underlined to read as links, the
   current one plain */
.languageswitcher {white-space: nowrap;}
.languageswitcher a, .languageswitcher .selected {padding: 0 0.15rem; text-transform: uppercase;}
.languageswitcher a {text-decoration: underline;}
.languageswitcher .selected {display: none;}
img.icon.inline {display: inline-block; position: relative; top: 0.25rem;}
.backlink {text-transform: lowercase;}
.main {display: flex; flex-wrap: wrap; padding-bottom: 5rem;}
.main h1 {width: 100%; text-transform: lowercase;}
.frontmatter, .menu {min-width: 22rem; max-width: 22rem; padding-right: 3rem;}
.menu {min-width: 0%; max-width: 100%; padding-right: 6rem; min-width: 15rem; width: 15rem;}
.no_menu .menu {display: none;}
.menu ul ul li {padding-left: 0;}
.menu ul ul li::before {content: ""; display: inline-block; margin-right: 1rem; font-weight: normal;}
ul li {list-style: none;}
.menu ul li {text-transform: lowercase; color: var(--muted); border-top: 1px solid transparent;}
.menu ul li a {display: block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.menu ul li.selected > a {font-family: 'dejavu_sans_monobold', monospace; font-weight: normal;}
.menu ul li.flex a + a {margin-left: 2rem;}
.flex {display: flex; justify-content: space-between;}
ul.list li span.hasicon {display: block; width: 100%;}
ul.list li span.hasicon > a {display: block; padding-left: 1.75rem;}
ul li.flex a:nth-child(1) {flex-grow: 1;}
ul li.flex a + a {padding-left: 0.75rem; position: relative; width: auto!important; padding-right: 0.75rem;}
ul li.flex a + a img {height: 1.2rem; display: inline-block; vertical-align: middle;}
ul li.unread, ul li.unread * {font-family: 'dejavu_sans_monobold', monospace;}
img.icon, .icon img {height: 1.25rem!important;}

ul li > a {display: block; color: var(--fg); text-decoration: none;}
ul.list a:not([href]) {cursor: default;}
.content {flex-grow: 1; width: calc(100% - 22rem); position: relative;} 
.no_menu .content {max-width: 37.5rem; margin: 0 auto;}
/* a single centred column as wide as the code boxes; the title wraps rather than being cut off and keeps its capital, like the login page titles */
.no_menu.singlecolumn .content {max-width: 22.5rem;}
.no_menu.singlecolumn h1 {white-space: normal; padding-right: 0; text-transform: none;}
.content ul.list + .list > li:first-child,
.content ol.list > li,
.content ul.list > li {margin-bottom: 0; border-top: 1px solid var(--border); position: relative;}
.content ul.list > li.first-child,
.content ol.list > li.first-child,
.content ol.list > li:first-child,
.content ul.list > li:first-child {border: 0;}
.content .list > li {line-height: 1.5; padding: 0.35rem 0;}
.content .list > li a:first-child {overflow-wrap: break-word;}
.content .list > li > a.nobreak {white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.content .list > li.image {border: 0; line-height: 2.2;}
.content .list > li a .preview img {display: none;}
.content .list > li.hidden,
.content ul.grid > li.hidden,
.content ul.grid:empty {display: none;}

.content ul.grid {padding: 0.7rem 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); grid-gap: 0.7rem;}
.content ul.grid > li a .preview {border: 1px solid var(--border); width: 100%; aspect-ratio: 1; background: url() center center / cover no-repeat;}
.content ul.grid > li a .preview img {display: block; width: 100%; height: 100%; object-fit: cover;}
/* The thumbnail is real content, not a black icon, so it must escape the admin-mode image inversion. */
body.admin .content ul.grid > li a .preview img {filter: none;}
.content ul.grid > li a .preview + span {display: block; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1.9; font-size: 0.9rem;}
.content ul.grid > li a {display: flex; flex-direction: column;}

.displaytoggle {position: absolute; width: 100%; display: flex; justify-content: flex-end; top: 0.25rem;}
.displaytoggle a {display: block; cursor: pointer;}
.displaytoggle img {display: block; height: 1.65rem;}

.togglenext {cursor: pointer; user-select: none;}
.togglenext + *, .toggleMe {display: none;}
.expanded > .togglenext + *, .toggleMe.expanded {display: initial;}
.expanded > .togglenext {display: none;}

.spacebetween {display: flex; justify-content: space-between;}
input, textarea, .statuswindow, select {
    border: 1px solid var(--border);
    background: var(--field);
    color: var(--fg);
    display: block; 
    resize: none; 
    width: 100%; 
    padding: 0.25rem 0.5rem; 
    margin-bottom: 1rem; 
    line-height: 1.5; 
    font-size: 1rem;
    border-radius: 0;
    -webkit-appearance: none;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
    background: var(--field) url(/img/unfoldmore.svg) calc(100% - 0.35rem) center / 1.25rem auto no-repeat;
}
select:not([multiple]) {
    background: var(--field) url(/img/chevrondown.svg) calc(100% - 0.35rem) center / 1.25rem auto no-repeat;
}
input[type="search"] {background: var(--field) url(/img/icons/magnify.svg) calc(100% - 0.2rem) 50% / auto 1.55rem no-repeat;}


.EasyMDEContainer {margin-bottom: 1rem;}
.EasyMDEContainer .CodeMirror, .EasyMDEContainer .editor-toolbar {border-color: var(--border)!important; border-radius: 0!important;}
.EasyMDEContainer .CodeMirror {background: var(--field); line-height: 1.75!important;}
.EasyMDEContainer .CodeMirror .cm-link {text-decoration: none;}
.EasyMDEContainer .CodeMirror.cm-s-easymde .cm-url,
.EasyMDEContainer .CodeMirror.cm-s-easymde .cm-string,
.EasyMDEContainer .CodeMirror.cm-s-easymde .cm-attribute, 
.EasyMDEContainer .CodeMirror.cm-s-easymde .cm-link, 
.EasyMDEContainer .CodeMirror.cm-s-easymde .cm-tag {color: var(--fg)!important;}
.EasyMDEContainer .CodeMirror.cm-s-easymde .cm-link:not(.cm-formatting-link,.cm-url) {color: var(--fg);}
.EasyMDEContainer .editor-preview-full a, .EasyMDEContainer .editor-preview-side a {color: var(--fg);}
.editor-preview-side ul, .editor-preview-full ul {margin-left: 1rem;}
.editor-preview-side ol, .editor-preview-full ol {margin-left: 2rem;}
.editor-preview-side ol li, .editor-preview-full ol li {list-style-type: decimal;}

textarea, .statuswindow {padding: 0.5rem 0.5rem;}
.statuswindow {min-height: 5rem; background: var(--field); color: var(--muted);}
.statuswindow a {color: var(--muted);}
input::placeholder {color: var(--fg); opacity: 0.25;}
input[type="submit"], .button {display: inline-block; width: auto; padding: 0rem 1.5rem; height: 2.5rem; line-height: 2.5rem; color: var(--bg); background: var(--fg); border: 0; font-family: 'Geist', sans-serif; font-weight: 600; cursor: pointer; font-size: 1rem;}
input[type="submit"].margintop, .button.margintop {margin-top: 1.15rem;}
input[type="submit"]:disabled {opacity: 0.25; cursor: default;}
#debugger-bar {z-index: 2;}
h1 {font-size: 1.75rem; line-height: 1.2; margin-bottom: 1rem; margin-top: 0.15rem;}

.hugocmslogo img {height: 1.2rem; display: inline-block; vertical-align: middle; position: relative; bottom: 0.15rem; margin-right: 0.20rem;}
.backarrow img {height: 1.25rem; display: inline-block; vertical-align: middle; position: relative; bottom: 0.175rem;}

.login .main {max-width: 25rem;}
.login input {margin-bottom: 0.5rem;}
.login input[type="submit"] {margin-top: 1.15rem;}
label.checkbox {display: flex; align-items: center; line-height: 1.5; gap: 0.5rem; margin: 0.5rem 0; font-size: 1rem; cursor: pointer;}
label.checkbox input[type="checkbox"] {display: inline-block; width: 1.15rem; height: 1.15rem; flex: none; margin: 0; padding: 0; position: relative; top: -1px; -webkit-appearance: checkbox; appearance: auto; accent-color: var(--fg); cursor: pointer;}
input[type="submit"].link, .login input[type="submit"].link, button.link {display: inline; width: auto; height: auto; margin: 0; padding: 0; border: 0; cursor: pointer; line-height: inherit; background: none; color: var(--fg); font: inherit; text-decoration: underline;}
ul li.flex button.link {flex: none; align-self: center; padding: 0 0.75rem;}
/* authenticator setup: the QR code and its key in one panel, split by "or" */
.totpsetup {max-width: 22.5rem; border: 1px solid var(--border); border-radius: 0.25rem; margin: 1.5rem 0;}
.totpsetup .qrcode {padding: 2rem 1rem 1.5rem;}
.totpsetup .qrcode img {display: block; width: 100%; max-width: 12rem; margin: 0 auto; background: #fff; padding: 0.5rem;}
.totpsetup .or {display: flex; align-items: center; gap: 1rem; color: var(--muted);}
.totpsetup .or::before, .totpsetup .or::after {content: ""; flex: 1; border-top: 1px solid var(--border);}
.totpsetup .secret {padding: 1rem 1rem 1.5rem; text-align: center; font-family: monospace; font-size: 1.15rem; letter-spacing: 0.25em; word-break: break-all;}
.login h1.pagetitle {display: block; text-transform: none; text-align: left; font-size: 1.75rem; line-height: 1.2; margin: 0 0 1rem;}
/* six boxes behind one transparent input, as wide as the content allows but at
   most as wide as the login column (25rem minus its 2.5rem side padding), so they
   look the same on every page. Each digit plus its letter-spacing takes one sixth
   of the width plus a gap (in cqw, the width of .codeboxes), and the left
   padding centres the first digit in its box */
.codeboxes {--gap: 0.5rem; container-type: inline-size; position: relative; width: 100%; max-width: 22.5rem; height: 3.4rem; margin: 1.5rem 0 1rem; overflow: hidden; font: 2rem/1 'dejavu_sans_monobook', monospace; display: flex; gap: var(--gap);}
.codeboxes span {flex: 1; height: 100%; border: 1px solid var(--border-strong); border-radius: 0.25rem; background: var(--field);}
.codeboxes:focus-within span.active {border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg);}
.codeboxes input, .login .codeboxes input {position: absolute; left: 0; top: 0; width: calc(100cqw + 4rem); height: 100%; margin: 0; padding: 0 0 0 calc((100cqw - 5 * var(--gap)) / 12 - 0.5ch); border: 0; outline: 0; background: transparent; font: inherit; line-height: 3.4rem; letter-spacing: calc((100cqw + var(--gap)) / 6 - 1ch);}
.error, .error * {color: red!important;}
.dot.green {color: limegreen;}
.dot.red {color: red;}
.dot.orange {color: orange;}
div.error {padding-bottom: 1.25rem; line-height: 1.75;}
.login h1 {line-height: 1.7; text-align: center; margin: 2.5rem 0 1rem; font-size: 2.3rem; display: flex; align-items: center; padding-right: 0;}
.login h1 .hugocmslogo {display: block; text-align: center; padding: 1rem 1.15rem 1rem 0;}
.login h1 .hugocmslogo img {height: 3.5rem;}

a.array, div.array, a.object {
    border: 1px solid var(--border);
    display: block;
    padding: 0.25rem 0.5rem;
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 1rem;
    position: relative;
}
a.array,
a.object {
    background: var(--bg) url(/img/chevronright.svg) calc(100% - 0.25rem) center / 1.25rem auto no-repeat;
}


.imageholder {width: 100%; position: relative;}
img.boxed {border: 1px solid var(--fg); height: auto; max-height: 20rem; max-width: 100%; display: block; background-image: url('/img/checker_image_background.png');}
video.boxed {border: 1px solid var(--fg); height: auto; max-height: 20rem; max-width: 100%; display: block; background: #000;}
audio.boxed {width: 100%; max-width: 100%; display: block;}
.imagepreview { margin-bottom: 0.75rem;}


/* ImageSELECTOR */

.imageSelectorWithPreviewParent {flex-direction: column;}
.imageSelectorWithPreview {background-image: none;}
.searchState {flex-direction: column;}
.searchState select {min-height: calc(13rem - 1px);}
.previewState {position: relative;}
.previewState > img {border: 1px solid var(--border); background: var(--field); margin-bottom: 1rem; display: block; width: 100%; height: 15rem; object-fit: contain;}
.previewState a {cursor: pointer; position: absolute; right: 0.5rem; top: 0.5rem; background: transparent!important;}
.previewState a::before {content: ""; position: absolute; width: calc(100% + 2rem); height: calc(100% + 2rem); left: 0; top: 0; margin: -1rem;}

.selectState.hidden, .previewState.hidden {display: none;}

.buttons {overflow: auto;}
.buttons input, .buttons .button {margin: 0 0.5rem 0.5rem 0; float: left}
.buttons .secondary .button {margin-left: 0;}
.buttons .secondary .togglenext {position: relative; top: 0.15rem;}

.secondary {display: inline; margin-left: 0.2rem;}
.secondary .togglenext {margin-left: 0.5rem;}
.secondary .button {margin-left: 0.25rem;}
.secondary .button:first-child {margin-left: 0;}
.secondary .button,
.button.ghost {
    background: var(--bg);
    color: var(--fg);
    box-shadow: inset 0 0 0 1px var(--muted);
    font-family: 'dejavu_sans_monobold', monospace;
    font-weight: normal;
}
.button.ghost.icon {
    padding: 0;
    text-align: center;
    width: 1.3rem;
    height: 1.3rem;
    line-height: 1.2rem;
    box-shadow: none;
    font-size: 1.5rem;
    vertical-align: middle;
}
.button.ghost.icon span {
    display: block;
    width: 1.3rem;
    height: 1.3rem;
    line-height: 1.2rem;
}
.button.disabled {pointer-events: none; opacity: 0.2;}

.bargraph {display: flex; flex-direction: row; height: 10rem; border-bottom: 1px solid var(--fg); border-left: 1px solid var(--fg);}
.bargraph > div {flex-grow: 1; border-left: 1px solid var(--bg);}

.bullet {
    height: .75em;
    width: .75em;
    background-color: var(--shade);
    border-radius: 50%;
    display: inline-block;
    margin-right: 0.5em;
}
.bullet.green {background-color: rgb(19, 97, 0);}
.bullet.red {background-color: rgb(180, 0, 0);}
.bullet.orange {background-color: rgb(180, 108, 0);}

table {border-collapse: collapse;}
table th {text-align: left;}
td, th {padding-right: 2rem;}
tbody tr > * {border-top: 1px solid var(--border); padding-block: 0.5rem; line-height: 1.6;}
tbody:first-of-type:not(thead ~ tbody) tr:first-child > * {border: 0;}
td:last-child, th:last-child {padding-right: 0;}
table.fixed {width: 100%; table-layout: fixed;}
table.fixed td, table.fixed th {padding-right: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
table.fixed td:last-child, table.fixed th:last-child {padding-right: 0;}
/* On a narrow screen a stacked table shows each row as a block: the cells under
   each other, indented to line up after the status bullet in the first cell. A
   cell marked 'corner' (a small graph) moves to the top right of the row. */
@media (max-width: 40rem) {
    table.stacked, table.stacked tbody, table.stacked tr, table.stacked td {display: block; width: auto;}
    table.stacked thead, table.stacked colgroup {display: none;}
    table.stacked tbody tr {position: relative; border-top: 1px solid var(--border); padding-block: 0.5rem;}
    table.stacked tbody tr:first-child {border-top: 0;}
    table.stacked tbody tr > td {border: 0; padding: 0 0 0 1.25em;}
    table.stacked tbody tr > td:first-child {padding-left: 0;}
    table.stacked tbody tr > td.corner {position: absolute; top: 0.5rem; right: 0; padding: 0;}
    table.stacked tbody tr:has(> td.corner) > td:first-child {padding-right: 5rem;}
}

dl.inline {display: flex;}
dt {text-transform: lowercase;}
dl.inline dt::after {content: ":"; padding-right: 0.5rem;}
.progressbar {border: 1px solid var(--border-strong); width: 100%;}
.progressbar td {background-color: var(--shade); border: 0;}
dl + dl {border-top: 1px solid var(--border);}

.languageselector {display: inline-block;}
.languageselector > * {display: inline-block;}
.languageselector > *::after {content: "/";}
.languageselector > *:last-child::after {content: none;}

.dialog-iframe {position: fixed; top: 0; left: 0; border: 0; width: 100%; height: 100vh; z-index: 6;}

#preview, #splitscreenhandle, #preview iframe {display: none;}
#preview .disabled {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 4;
    cursor: not-allowed;
}
body.with_splitscreen {overflow: hidden;}
body.with_splitscreen #body {width: 50vw; position: relative; overflow-y: scroll; height: 100vh;}
body.with_splitscreen #preview {
    position: fixed;
    right: 0;
    top: 0;
    height: 100vh;
    width: calc(50vw - 0.5rem);
    z-index: 3;
    display: block!important;
}
body.with_splitscreen #preview iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
body.with_splitscreen #splitscreenhandle {
    display: block;
    position: fixed;
    left: 50vw;
    top: 0;
    width: 0.5rem;
    height: 100vh;
    border: 1px solid var(--border);
    border-top: 0;
    border-bottom: 0;
    background: var(--field);
    cursor: ew-resize;
    z-index: 3;
}
body.with_splitscreen #splitscreenhandle span {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: 1.2rem;
    height: 9rem;
    background: var(--field);
    border: 1px solid var(--border);
}
body.with_splitscreen #splitscreenhandle span::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: 1.05rem;
    aspect-ratio: 1;
    background: url(/img/leftright.svg) center center / contain no-repeat;
    opacity: 0.45;
}

body.isDragging, body.isDragging * {
    user-select: none;
}
body.isDragging iframe {
    pointer-events: none;
}

body, #body {container-name: bodydiv; container-type: inline-size;}
.main, .dialog, .menu, .header div:nth-child(2),.header .username, body::after,
.header, .main, .menu ul li, .menu > ul > li:first-child, .content {container: bodydiv;}

#debugger-bar {z-index: 99;}

@container (max-width: 70rem) {
    .main {display: block;}
    .frontmatter, .menu {min-width: 0; max-width: 100%; padding: 0;}
    .header div:nth-child(2) {text-align: right; padding-bottom: 0.25rem;}
    .header .username {display: none;}
    body .menu {display: none; width: 100%;}
    body.dashboard .menu {display: inline-block; padding-top: 2.5rem;}
    body.dashboard .main {display: flex; flex-direction: column-reverse;}
    body::after {width: 0.25rem;}
    .header, .main {padding-inline: 1.75rem 1.5rem;}
    .menu ul li {border-top: 1px solid var(--border);}
    .menu > ul > li:first-child {border-top: 1px solid transparent;}
    .content {width: 100%;}
    .main {padding-bottom: 3.5rem;} 
    body.dialog #body > .header,
    body.dialog #body > .messagebar {display: none;}
    body.dialog #body::before {content: none;}
}
@container (min-width: 70rem) {
    body.dialog .main .dialog {
        margin: -1.5rem 0 3rem; 
        padding:  0.5rem 2rem 3rem;
        width: calc(100% + 3rem); 
        overflow: auto;
        position: relative;
        z-index: 4;
    }
}

.graphholder {position: relative; height: 250px; margin-bottom: 90px; margin-top: 30px;}
.graphlegend {position: absolute; height: 100%; width: 30px;}
.graphlegend > div {position: absolute; line-height: 0.5; font-size: 14px; width: 25px; text-align: right; margin-top: -5px;}
.graphlegend > div:first-child {top: 0;}
.graphlegend > div:nth-child(2) {top: 25%;}
.graphlegend > div:nth-child(3) {top: 50%;}
.graphlegend > div:nth-child(4) {top: 75%;}
.graphlegend > div:last-child {top: 100%;}
.graphholder .bargraph {width: calc(100% - 30px); margin-left: 30px; height: 100%; display: flex; align-items: flex-end;}
.gridlines {position: absolute; width: calc(100% - 30px); margin-left: 30px; height: 100%; z-index: 3; pointer-events: none;}
.gridlines > div {position: absolute; width: 100%; height: 1px; background: rgba(100,100,100,0.2);}
.gridlines > div:first-child {top: 0;}
.gridlines > div:nth-child(2) {top: 25%;}
.gridlines > div:nth-child(3) {top: 50%;}
.gridlines > div:nth-child(4) {top: 75%;}
.gridlines > div:last-child {top: 100%; background: rgba(100,100,100,0.65);}
.graphholder .bargraph > div {position: relative; background: var(--shade); flex-grow: 1; margin-right: 1px;}
.graphholder .bargraph > div > span {position: absolute; left: 50%; transform: rotate(-90deg); bottom: -67px; margin-left: -2px; transform-origin: 0% 0%; line-height: 0; font-size: 14px; text-align: right; width: 60px;}
.narrow .bargraph > div > span {display: none;}
.narrow .bargraph > div:first-child > span,
.narrow .bargraph > div:last-child > span,
.narrow .bargraph > div.quart > span {display: block!important;}

/* The thinking spinner, cycling through · ✻ ✽ ✶ ✳ ✢ with the first and last held
   a little longer. Shared: the spelling check swaps its toolbar glyph for it (see
   .grammar-loading in editor.css) and the translation overlay below uses it. */
@keyframes thinking-stars {
    0%    { content: "\00B7"; } /* · (held longer) */
    25%   { content: "\273B"; } /* ✻ */
    37.5% { content: "\273D"; } /* ✽ */
    50%   { content: "\2736"; } /* ✶ */
    62.5% { content: "\2733"; } /* ✳ */
    75%   { content: "\2722"; } /* ✢ (held longer) */
}

/* Translating a page is slow — many requests for one page, and minutes rather than
   seconds with Claude — while the browser gives no feedback beyond a spinning tab.
   So web/js/translating.js covers the page for the duration: it says what is
   happening, and it swallows the clicks that would otherwise queue a second
   translation behind the first. */
.translating {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 100;
    background: var(--overlay);
    display: flex; align-items: center; justify-content: center; gap: 0.6rem;
    color: var(--white); font-size: 1.1rem;
    cursor: wait;
}
.translating::before {
    content: "\00B7";
    font-family: sans-serif;
    font-size: 1.4em;
    line-height: 1;
    animation: thinking-stars 0.6s step-end infinite;
}