/* DSG Log — site styles. theme.json owns colour/type tokens; this owns layout and voice. */

:root {
	--dsg-col: 720px;
}

* { box-sizing: border-box; }

html { background: var(--wp--preset--color--paper); }

body {
	margin: 0;
	padding: 32px 32px 48px;
	-webkit-font-smoothing: antialiased;
}

/* Everything sits in one left-aligned column. */
.wp-site-blocks { max-width: var(--dsg-col); position: relative; }
.wp-site-blocks > * { max-width: none; }
.wp-site-blocks > * + * { margin-block-start: 0; }

a { text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:visited { color: var(--wp--preset--color--visited); }
a:hover, a:focus-visible { text-decoration-thickness: 2px; }
button.dsg-link { font: inherit; color: var(--wp--preset--color--link); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
::selection { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); }

.dsg-secondary { color: var(--wp--preset--color--secondary); }

/* ---- header: one line, bracketed nav ---- */
.dsg-header { margin: 0 0 1.6em; }
.dsg-header .wp-block-site-title { display: inline; font-size: 14px; font-weight: 500; margin: 0; }
.dsg-header .wp-block-site-title a { color: inherit; text-decoration: none; }
.dsg-header nav.dsg-nav.wp-block-navigation { display: inline; margin-left: 2ch; font-size: 14px; }
.dsg-header .dsg-nav ul.wp-block-navigation__container { display: inline; list-style: none; margin: 0; padding: 0; gap: 0; }
.dsg-header .dsg-nav li.wp-block-navigation-item { display: inline; margin: 0; }
.dsg-header .dsg-nav li.wp-block-navigation-item::before { content: "["; }
.dsg-header .dsg-nav li.wp-block-navigation-item::after { content: "]"; }
.dsg-header .dsg-nav li.wp-block-navigation-item + li.wp-block-navigation-item::before { content: " ["; }
.dsg-header .dsg-nav a.wp-block-navigation-item__content { display: inline; padding: 0; text-decoration: underline; color: var(--wp--preset--color--link); }
.dsg-header .dsg-nav a.wp-block-navigation-item__content:visited { color: var(--wp--preset--color--visited); }
.dsg-header .dsg-nav .wp-block-navigation-item__label { display: inline; }
.dsg-header .dsg-tagline { margin: 0; color: var(--wp--preset--color--secondary); }

/* the tagline doubles as the search prompt on the log */
.dsg-prompt { margin: 0 0 1.6em; color: var(--wp--preset--color--secondary); display: flex; align-items: baseline; white-space: nowrap; overflow: hidden; cursor: text; }
.dsg-prompt__prefix { color: var(--wp--preset--color--ink); display: none; }
.dsg-prompt.is-active .dsg-prompt__prefix { display: inline; }
.dsg-prompt.is-active .dsg-prompt__tagline { display: none; }
.dsg-prompt__field { position: relative; display: inline-block; padding-right: 1ch; margin-left: 1ch; }
.dsg-prompt.is-active .dsg-prompt__field { margin-left: 0; }
.dsg-prompt__input { font: inherit; color: var(--wp--preset--color--ink); background: transparent; border: 0; outline: 0; padding: 0; margin: 0; width: 0; min-width: 0; caret-color: transparent; vertical-align: baseline; }
.dsg-prompt__cursor { position: absolute; left: 0; top: calc(50% - 0.5em); width: 1ch; height: 1em; background: #fff; mix-blend-mode: difference; pointer-events: none; animation: dsg-blink 1.2s steps(2, start) infinite; }
.dsg-prompt__esc { display: none; margin-left: 2ch; }
.dsg-prompt.is-active .dsg-prompt__esc { display: inline; }
@keyframes dsg-blink { to { visibility: hidden; } }

/* ---- the log ---- */
.dsg-log { margin: 0; }
.dsg-log__year + .dsg-log__year { margin-top: 1.6em; }
.dsg-log__year[hidden] { display: none; }
.dsg-log__rule { display: flex; align-items: baseline; gap: 1ch; margin: 0; font-size: 14px; font-weight: 400; color: var(--wp--preset--color--secondary); }
.dsg-log__rule .year { color: var(--wp--preset--color--ink); }
.dsg-log__rule .fill { flex: 1; border-top: 1px solid var(--wp--preset--color--rule); align-self: center; }
.dsg-log__rule .count { white-space: nowrap; }
.dsg-log__year.is-collapsed ul { display: none; }
.dsg-log__year ul { list-style: none; margin: 0; padding: 0; }

.dsg-row { position: relative; }
.dsg-row[hidden] { display: none; }
.dsg-row__line { display: grid; grid-template-columns: 6ch 1fr auto 1ch; column-gap: 2ch; align-items: baseline; }
.dsg-row.is-current .dsg-row__line::before { content: ">"; position: absolute; left: -2ch; color: var(--wp--preset--color--ink); }
.dsg-row__date { color: var(--wp--preset--color--secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dsg-row__title { overflow-wrap: anywhere; }
.dsg-row__cat { color: var(--wp--preset--color--secondary); text-align: right; text-decoration: none; }
.dsg-row__cat:visited { color: var(--wp--preset--color--secondary); }
.dsg-row__cat:hover { text-decoration: underline; }
.dsg-row__toggle { font: inherit; color: var(--wp--preset--color--secondary); background: none; border: 0; padding: 0; cursor: pointer; text-align: right; }
.dsg-row__toggle:hover, .dsg-row.is-open .dsg-row__toggle { color: var(--wp--preset--color--ink); }

.dsg-row__peek { display: none; grid-template-columns: 1fr auto; gap: 0.8em 2ch; align-items: start; margin: 0.4em 0 1em 8ch; color: var(--wp--preset--color--secondary); max-width: 60ch; }
.dsg-row.is-open .dsg-row__peek { display: grid; }
.dsg-row__peek p { margin: 0; }
.dsg-row__peek canvas { width: 120px; height: auto; image-rendering: pixelated; display: block; border: 1px solid var(--wp--preset--color--rule); }
.dsg-row__peek .read { grid-column: 1 / -1; }

.dsg-log__pager { margin: 1.6em 0 0; display: flex; gap: 2ch; }

/* desktop hover card in the margin */
.dsg-card { position: absolute; left: calc(var(--dsg-col) + 48px); top: 0; margin: 0; width: 240px; display: none; pointer-events: none; color: var(--wp--preset--color--secondary); }
.dsg-card canvas { width: 240px; height: auto; image-rendering: pixelated; display: block; border: 1px solid var(--wp--preset--color--rule); margin-bottom: 0.6em; }
.dsg-card canvas[hidden] { display: none; }
.dsg-card p { margin: 0; font-size: 12px; line-height: 1.5; }
@media (min-width: 1080px) and (hover: hover) { .dsg-card.is-visible { display: block; } }

/* ---- status line ---- */
.dsg-status { margin: 2.4em 0 0; padding-top: 0.8em; border-top: 1px solid var(--wp--preset--color--rule); color: var(--wp--preset--color--secondary); display: flex; flex-wrap: wrap; gap: 0 2ch; }
.dsg-status .help { color: var(--wp--preset--color--ink); }

/* ---- single post / page ---- */
.dsg-back { margin: 0 0 2.4em; }
.dsg-meta { margin: 0; color: var(--wp--preset--color--secondary); display: flex; gap: 0 2ch; flex-wrap: wrap; }
.dsg-meta a { color: inherit; text-decoration: none; }
.dsg-meta a:hover { text-decoration: underline; }

.dsg-title { font-size: 14px; font-weight: 500; margin: 0 0 1.6em; }
.dsg-title::before { content: "# "; color: var(--wp--preset--color--secondary); font-weight: 400; }

.dsg-dither { margin: 0 0 1.6em; }
.dsg-dither img { max-width: 480px; width: 100%; height: auto; display: block; }
.dsg-dither img.dsg-dither__source { display: none; }
.dsg-dither__canvas { width: 100%; max-width: 480px; height: auto; image-rendering: pixelated; display: block; border: 1px solid var(--wp--preset--color--rule); }
.dsg-dither figcaption { color: var(--wp--preset--color--secondary); font-size: 12px; margin-top: 0.4em; }

:is(.dsg-content, .editor-styles-wrapper:is(.post-type-post, .post-type-page) .is-root-container) { max-width: 72ch; }
:is(.dsg-content, .editor-styles-wrapper:is(.post-type-post, .post-type-page) .is-root-container) > * { margin-top: 0; margin-bottom: 1.6em; }
/* One face. Font-size presets (S/M/L/XL) are this theme's vocabulary and are honoured; inline sizes and
   margins left over from other themes are not — this theme can't produce them (customFontSize is off). */
:is(.dsg-content, .editor-styles-wrapper:is(.post-type-post, .post-type-page) .is-root-container) :is(p, li, blockquote, h1, h2, h3, h4, h5, h6, td, th, figcaption, pre, code) { font-family: inherit !important; }
:is(.dsg-content, .editor-styles-wrapper:is(.post-type-post, .post-type-page) .is-root-container) [style*="font-size"] { font-size: inherit !important; line-height: 1.6 !important; }
:is(.dsg-content, .editor-styles-wrapper:is(.post-type-post, .post-type-page) .is-root-container) [style*="margin"] { margin-top: 0 !important; margin-bottom: 1.6em !important; }
:is(.dsg-content, .editor-styles-wrapper:is(.post-type-post, .post-type-page) .is-root-container) .has-large-font-size, :is(.dsg-content, .editor-styles-wrapper:is(.post-type-post, .post-type-page) .is-root-container) .has-x-large-font-size { line-height: 1.45; }
:is(.dsg-content, .editor-styles-wrapper:is(.post-type-post, .post-type-page) .is-root-container) h2, :is(.dsg-content, .editor-styles-wrapper:is(.post-type-post, .post-type-page) .is-root-container) h3, :is(.dsg-content, .editor-styles-wrapper:is(.post-type-post, .post-type-page) .is-root-container) h4 { font-size: 14px; font-weight: 500; margin: 2.4em 0 0.8em; }
:is(.dsg-content, .editor-styles-wrapper:is(.post-type-post, .post-type-page) .is-root-container) h2::before { content: "## "; color: var(--wp--preset--color--secondary); font-weight: 400; }
:is(.dsg-content, .editor-styles-wrapper:is(.post-type-post, .post-type-page) .is-root-container) h3::before { content: "### "; color: var(--wp--preset--color--secondary); font-weight: 400; }
:is(.dsg-content, .editor-styles-wrapper:is(.post-type-post, .post-type-page) .is-root-container) h4::before { content: "#### "; color: var(--wp--preset--color--secondary); font-weight: 400; }
:is(.dsg-content, .editor-styles-wrapper:is(.post-type-post, .post-type-page) .is-root-container) blockquote { margin: 0 0 1.6em; padding-left: 2ch; color: var(--wp--preset--color--secondary); position: relative; border: 0; }
:is(.dsg-content, .editor-styles-wrapper:is(.post-type-post, .post-type-page) .is-root-container) blockquote::before { content: ">"; position: absolute; left: 0; }
:is(.dsg-content, .editor-styles-wrapper:is(.post-type-post, .post-type-page) .is-root-container) blockquote p { margin: 0; }
:is(.dsg-content, .editor-styles-wrapper:is(.post-type-post, .post-type-page) .is-root-container) blockquote cite { display: block; font-style: normal; }
:is(.dsg-content, .editor-styles-wrapper:is(.post-type-post, .post-type-page) .is-root-container) pre, :is(.dsg-content, .editor-styles-wrapper:is(.post-type-post, .post-type-page) .is-root-container) .wp-block-code { margin: 0 0 1.6em; padding: 0 0 0 2ch; border: 0; border-left: 1px solid var(--wp--preset--color--rule); border-radius: 0; background: none; overflow-x: auto; font: inherit; line-height: 1.5; }
:is(.dsg-content, .editor-styles-wrapper:is(.post-type-post, .post-type-page) .is-root-container) code { font: inherit; background: none; padding: 0; }
:is(.dsg-content, .editor-styles-wrapper:is(.post-type-post, .post-type-page) .is-root-container) ul, :is(.dsg-content, .editor-styles-wrapper:is(.post-type-post, .post-type-page) .is-root-container) ol { margin: 0 0 1.6em; padding-left: 2ch; }
:is(.dsg-content, .editor-styles-wrapper:is(.post-type-post, .post-type-page) .is-root-container) ul { list-style: none; }
:is(.dsg-content, .editor-styles-wrapper:is(.post-type-post, .post-type-page) .is-root-container) ul li::before { content: "- "; color: var(--wp--preset--color--secondary); margin-left: -2ch; }
:is(.dsg-content, .editor-styles-wrapper:is(.post-type-post, .post-type-page) .is-root-container) img { max-width: 100%; height: auto; }
:is(.dsg-content, .editor-styles-wrapper:is(.post-type-post, .post-type-page) .is-root-container) figure { margin: 0 0 1.6em; }
:is(.dsg-content, .editor-styles-wrapper:is(.post-type-post, .post-type-page) .is-root-container) figcaption { color: var(--wp--preset--color--secondary); font-size: 12px; margin-top: 0.4em; text-align: left; }
:is(.dsg-content, .editor-styles-wrapper:is(.post-type-post, .post-type-page) .is-root-container) hr { border: 0; border-top: 1px solid var(--wp--preset--color--rule); margin: 2.4em 0; }
:is(.dsg-content, .editor-styles-wrapper:is(.post-type-post, .post-type-page) .is-root-container) table { border-collapse: collapse; }
:is(.dsg-content, .editor-styles-wrapper:is(.post-type-post, .post-type-page) .is-root-container) td, :is(.dsg-content, .editor-styles-wrapper:is(.post-type-post, .post-type-page) .is-root-container) th { border: 0; border-bottom: 1px solid var(--wp--preset--color--rule); padding: 0.2em 2ch 0.2em 0; text-align: left; }
:is(.dsg-content, .editor-styles-wrapper:is(.post-type-post, .post-type-page) .is-root-container) sup { line-height: 0; }
:is(.dsg-content, .editor-styles-wrapper:is(.post-type-post, .post-type-page) .is-root-container) .wp-block-footnotes { margin: 2.4em 0 0; padding: 0.8em 0 0; border-top: 1px solid var(--wp--preset--color--rule); color: var(--wp--preset--color--secondary); list-style: none; counter-reset: fn; max-width: 72ch; }
:is(.dsg-content, .editor-styles-wrapper:is(.post-type-post, .post-type-page) .is-root-container) .wp-block-footnotes li { counter-increment: fn; display: grid; grid-template-columns: 4ch 1fr; }
:is(.dsg-content, .editor-styles-wrapper:is(.post-type-post, .post-type-page) .is-root-container) .wp-block-footnotes li::before { content: "[" counter(fn) "]"; }
:is(.dsg-content, .editor-styles-wrapper:is(.post-type-post, .post-type-page) .is-root-container) a.fn { text-decoration: none; }

.dsg-postnav { margin: 2.4em 0 0; display: flex; justify-content: space-between; gap: 2ch; flex-wrap: wrap; }
.dsg-postnav .wp-block-post-navigation-link { display: inline; }
.dsg-postnav .wp-block-post-navigation-link::before { content: "["; }
.dsg-postnav .wp-block-post-navigation-link::after { content: "]"; }
.dsg-postnav .wp-block-post-navigation-link:empty { display: none; }

/* archive / search lists reuse the log rows via the block; search form */
.dsg-search-form { display: flex; gap: 1ch; margin: 0 0 1.6em; }
.dsg-search-form input[type="search"] { font: inherit; color: var(--wp--preset--color--ink); background: transparent; border: 0; border-bottom: 1px solid var(--wp--preset--color--rule); outline: 0; padding: 0; width: 30ch; }
.dsg-search-form button { font: inherit; color: var(--wp--preset--color--link); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }

/* comments, if ever enabled — keep them in the voice */
.wp-block-comments { margin-top: 2.4em; }

/* ---- small screens ---- */
@media (max-width: 520px) {
	body { padding: 16px 16px 32px; }
	.dsg-prompt { white-space: normal; flex-wrap: wrap; }
	.dsg-row__line { grid-template-columns: 6ch 1fr 1ch; column-gap: 1.5ch; }
	.dsg-row__cat { display: none; }
	.dsg-row__peek { margin-left: 0; grid-template-columns: 1fr; }
	.dsg-row__peek canvas { width: 160px; }
	.dsg-row.is-current .dsg-row__line::before { left: -1.5ch; }
}

@media (prefers-reduced-motion: reduce) { .dsg-prompt__cursor { animation: none; } }

/* ---- editor canvas only: block wrappers break the inline header, so rebuild it as a row ---- */
.editor-styles-wrapper .dsg-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 2ch; margin-bottom: 1.6em; }
.editor-styles-wrapper .dsg-header .wp-block-site-title { font-size: 14px; font-weight: 500; margin: 0; }
.editor-styles-wrapper .dsg-header .wp-block-navigation { margin: 0; font-size: 14px; }
.editor-styles-wrapper .dsg-header .wp-block-navigation .wp-block-navigation__container { gap: 1ch; }
.editor-styles-wrapper .dsg-header .wp-block-navigation-item::before { content: "["; }
.editor-styles-wrapper .dsg-header .wp-block-navigation-item::after { content: "]"; }
.editor-styles-wrapper .dsg-header .wp-block-navigation-item__content { padding: 0; text-decoration: underline; color: var(--wp--preset--color--link); }
.editor-styles-wrapper .dsg-log .dsg-prompt__cursor { animation: none; }