/*
 * The only stylesheet in this theme written for WordPress.
 *
 * Quire Ink's sheet styles the ELEMENTS inside `.prose` - p, h2, ul, blockquote, pre, table -
 * so most of what Gutenberg emits is already styled the moment it lands in the right wrapper.
 * What is left is the handful of places where the block editor invents a class name or an
 * extra element that Quire Ink's markdown pipeline never produced. Those are below, and
 * nothing else belongs here: a rule that is really about how the site LOOKS belongs upstream
 * in the blog engine, where tools/extract.ts will bring it across on the next run.
 *
 * Every rule is a translation, never a new opinion. If a value appears here that is not
 * already a Quire Ink variable, that is a bug in this file.
 */

/* ---------- alignment: nothing here, and that is the point ------------------------
 * Gutenberg names a block's placement `alignwide` / `alignleft` / `aligncenter`; Quire Ink
 * names the same four things `img-wide` / `img-left` / `img-center`. The first version of
 * this file copied the declarations across, which put the gutter geometry in two places -
 * and check:bridge caught the 4rem literal that made it obvious.
 *
 * They are ALIASED instead, in PHP: `quireink_align_classes()` adds Quire Ink's class name
 * next to WordPress's on the way out, so there is exactly one definition of what wide means
 * and it lives upstream, where the extractor keeps it current.
 */

/* ---------- images ----------------------------------------------------------------
 * `figure` and `figcaption` are already styled. The block editor adds a wrapper class and,
 * for a linked image, an <a> that would otherwise take the link underline into the picture. */
.prose .wp-block-image { margin: calc(var(--sp) * 1.75) 0; }
.prose .wp-block-image a { text-decoration: none; border: 0; }
.prose .wp-block-image img { max-width: 100%; height: auto; }
.prose .wp-block-image.is-style-rounded img { border-radius: var(--radius); }

/* ---------- gallery ----------------------------------------------------------------
 * Quire Ink's gallery is `.gallery` with a column count; Gutenberg's is a flex container with
 * the count in `.columns-N`. The mapping is one line each because the sheet upstream already
 * describes what a gallery IS. */
.prose .wp-block-gallery { display: grid; gap: var(--sp); margin: calc(var(--sp) * 1.75) 0; }
.prose .wp-block-gallery.columns-2 { grid-template-columns: repeat(2, 1fr); }
.prose .wp-block-gallery.columns-3 { grid-template-columns: repeat(3, 1fr); }
.prose .wp-block-gallery.columns-4 { grid-template-columns: repeat(4, 1fr); }
.prose .wp-block-gallery figure { margin: 0; }

/* ---------- quotes ------------------------------------------------------------------
 * `blockquote` is styled upstream. Gutenberg adds a <cite>, which markdown had no way to
 * express, so this is the one place the theme decides something the blog engine never had to. */
.prose .wp-block-quote cite,
.prose .wp-block-pullquote cite {
	display: block;
	margin-top: calc(var(--sp) * .5);
	font-size: var(--fs-small);
	line-height: var(--lh-small);
	letter-spacing: var(--ls-small);
	font-style: normal;
	color: var(--c-meta);
}
.prose .wp-block-pullquote {
	border-left: 2px solid var(--c-accent);
	padding: calc(var(--sp) * .75) 0 calc(var(--sp) * .75) var(--sp);
	margin: calc(var(--sp) * 1.75) 0;
	/* Core centres a pull quote. Quire Ink ranges every quote left, and a centred one in a
	   left-ranged column reads as a different site's furniture. */
	text-align: left;
}
/* A pull quote is a <figure> WRAPPING a <blockquote>, and `.prose blockquote` upstream draws
   a rule down the left of any blockquote. So the quote came out with TWO rules: the accent
   one on the figure, and the engine's own hairline 16px inside it. Invisible until there was
   a pattern that inserted one. The figure keeps the rule; the blockquote gives up its own. */
.prose .wp-block-pullquote blockquote {
	border-left: 0;
	padding-left: 0;
}
.prose .wp-block-pullquote p { font-size: var(--fs-h4); line-height: var(--lh-h4); }

/* ---------- code --------------------------------------------------------------------
 * `pre code` is styled upstream. The window frame Quire Ink draws around a code block keys
 * off `pre.shiki`, which only its own highlighter emits - a WordPress code block is plain,
 * so it gets the plain panel and not the chrome. */
.prose .wp-block-code { margin: calc(var(--sp) * 1.5) 0; }
.prose .wp-block-preformatted pre { white-space: pre-wrap; }

/* ---------- embeds ------------------------------------------------------------------- */
.prose .wp-block-embed { margin: calc(var(--sp) * 2) 0; }
.prose .wp-block-embed__wrapper { position: relative; }
.prose .wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper { padding-top: 56.25%; }
.prose .wp-block-embed.wp-has-aspect-ratio iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.prose .wp-block-embed figcaption { text-align: center; }

/* ---------- separators, buttons, lists ------------------------------------------------ */
.prose .wp-block-separator { border: 0; border-top: 1px solid var(--c-rule); }
.prose .wp-block-separator.is-style-wide { max-width: none; }
.prose .wp-block-button__link {
	display: inline-block;
	padding: calc(var(--sp) * .5) var(--sp);
	border-radius: var(--radius);
	background: var(--c-accent);
	color: var(--c-bg);
	text-decoration: none;
	font-size: var(--fs-small);
}
/* The outline variant was arriving FILLED. Core's `is-style-outline` sets a border and a
 * transparent background, but its background declaration is inside a `:where()` and carries
 * no specificity, so the accent above simply outranked it: an author who chose "Outline" got
 * the same solid button with a light rule drawn around it, which reads as a mistake rather
 * than a choice. Undoing the fill is enough - core supplies the border - and the label takes
 * the link colour, because on the page's own ground it is a link that looks like a button. */
.prose .is-style-outline .wp-block-button__link {
	background: none;
	color: var(--c-link);
}

.prose .wp-block-list { /* the ul/ol rules upstream already cover it; this exists so a future
	   Gutenberg change that moves padding onto the class has a place to be undone */ }

/* ---------- table ---------------------------------------------------------------------
 * `.prose table` is styled upstream, including the striping mixed from --c-rule. Gutenberg
 * wraps it in a figure, which would otherwise inherit the picture margins. */
.prose .wp-block-table { margin: calc(var(--sp) * 1.75) 0; overflow-x: auto; }
.prose .wp-block-table table { margin: 0; }
.prose .wp-block-table figcaption { text-align: center; }

/* ---------- things WordPress prints that the sheet has no opinion about ---------------- */
.prose .wp-caption-text,
.prose .screen-reader-text:focus { color: var(--c-meta); }
.sticky .reveal h2::after { content: " *"; color: var(--c-accent); }
.comment-list { list-style: none; padding-left: 0; }
.comment-list .children { list-style: none; padding-left: var(--sp); }

/* ---------- the cookie checkbox -------------------------------------------------------
 * WordPress's comment form has one control Quire Ink's never had: the "remember me"
 * checkbox. It lands in `.comment-actions` beside the button, and the sheet's
 * `.comment-form input{width:100%}` - written for text fields, which is all that form had -
 * stretches it across the row and pushes its own label onto the next line.
 *
 * Two declarations, both undoing a rule that was right for the inputs it was written for. */
.comment-actions label {
	display: inline-flex;
	align-items: center;
	gap: calc(var(--sp) * .4);
	margin: 0;
	color: var(--c-meta);
}
.comment-actions input[type="checkbox"] {
	width: auto;
	margin: 0;
}

/* The parenthetical beside a field label: quieter than the label, same line. */
.comment-note {
	color: var(--c-meta);
}

/* ---------- the heading WordPress puts in front of the form ---------------------------
 * Quire Ink's form has no title. The thread ends, and the box begins one `.comment-form`
 * top margin later. WordPress prints a heading and prints it OUTSIDE the form - it is also
 * the "Reply to X" target and it carries the cancel link - so that margin now opens BELOW
 * the title, and the title itself sits on the last comment's Reply link with nothing
 * between them.
 *
 * The space moves to the wrapper, and the box is drawn back up under its own heading: one
 * gap before the pair, a smaller one inside it. Nothing here is a new measurement - it is
 * the blog engine's own 2rem and 0.75rem, re-pointed at the element that now needs them,
 * in `--sp` so they still answer the density setting.
 */
#respond {
	margin-top: calc(var(--sp) * 2);
}
#respond .comment-form {
	margin-top: calc(var(--sp) * .75);
}
/* comment-reply.js MOVES #respond inside the comment being answered. The blog engine's
 * `.comment .comment-form` already tightens the box there; the wrapper it now sits in has
 * to be tightened with it, or the reply form opens two lines below the comment. */
.comment #respond {
	margin-top: calc(var(--sp) * .75);
}

/* ---------- the class names WordPress guarantees ---------------------------------------
 * Nine class names that core writes into content and that a theme is expected to answer for.
 * They are here, and not upstream, for the same reason everything else in this file is:
 * Quire Ink's editor never emits them, so the blog engine has nothing to say about them.
 *
 * The four `align*` names ALSO get Quire Ink's own geometry, on figures, through
 * `quireink_align_classes()` in PHP - that alias is what gives a picture the real gutter
 * pull. What is below is the fallback for everything that is NOT a figure: an aligned
 * paragraph, an aligned embed, a `<div>` a plugin wrote. Two different jobs, so the pair is
 * not a duplicate. */
.alignleft {
	float: left;
	margin-right: var(--sp);
	margin-bottom: calc(var(--sp) * .5);
}
.alignright {
	float: right;
	margin-left: var(--sp);
	margin-bottom: calc(var(--sp) * .5);
}
.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.alignnone {
	margin-left: 0;
	margin-right: 0;
}

/* A caption is the same voice as any other aside on the page. */
.wp-caption {
	max-width: 100%;
}
.wp-caption-text,
.gallery-caption {
	color: var(--c-meta);
	font-size: var(--fs-caption);
	line-height: var(--lh-caption);
	letter-spacing: var(--ls-caption);
	text-align: center;
	margin-top: calc(var(--sp) * .5);
}

/* A comment by the person who wrote the post. Their name in the accent ink, and nothing
   else - a badge would be a second thing to read on every reply they have ever left. */
.bypostauthor > .comment-meta .comment-name {
	color: var(--c-accent);
}

/* A pinned post in a list. A marker in the gutter, in the same language the timeline
   already speaks, rather than a background wash: the list has one ground and it stays. */
.post-list article.sticky .t-h3 a::before,
.post-list article.sticky h2 a::before {
	content: "\2022";
	color: var(--c-accent);
	margin-inline-end: .35em;
}

/* Off-screen but focusable, exactly as `.skip-link` upstream is - and for the same reason:
   a zero-size element is skipped by some screen readers and `display:none` takes it out of
   the tab order entirely. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.screen-reader-text:focus {
	position: static;
	width: auto;
	height: auto;
	overflow: visible;
	clip-path: none;
	white-space: normal;
	color: var(--c-heading);
}

/* ---------- footer menu ----------------------------------------------------------------
 * A second nav location, and the only block on the page with no counterpart upstream: the
 * blog engine's footer is one line and has never had a menu under it. So this is the one
 * place the theme states a layout rather than translating one, and it states as little as it
 * can - a flat centred run, on the same line rhythm as the credit above it. `footer.site a`
 * already supplies the colour, the underline, the hover and the tap target.
 */
.footer-menu,
/* A child menu item joins the same centred run rather than opening a second block: the
   <li> becomes a flex row holding its own link and its children's, on the gap the run
   already uses. A footer line has no gutter to indent into. */
.footer-menu li,
.footer-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: calc(var(--sp) * .1) calc(var(--sp) * .75);
}
.footer-menu {
	margin-bottom: calc(var(--sp) * .5);
}

/* ---------- the article's gutter holds two lists, and only one of them counts -----------
 * `quireink_toc()` prints the site's menu under the table of contents, so a post whose own
 * contents are too short to index still has a way back to the site. That is a second `<ul>`
 * inside `.toc`, and it does NOT want the furniture the first one has.
 *
 * NO NUMBERS ON THE MENU. The IDE chrome numbers rail rows like lines of source, which earns
 * its keep on a table of contents: the numbers are the outline. On four navigation links they
 * are decoration standing where information should be, and worse, they collide with the rule
 * that unnumbers the row repeating the article's title - that exception is written
 * `.toc li:first-child`, so inside the menu it landed on the first link, and a two-level menu
 * read 1, 2, 1 with the stray ring 22px out of the column. Gone, so the question does not
 * arise. The contents keep theirs; the listing rail keeps its own, which is a different
 * column on a different page.
 *
 * There is no indent to undo and no sub-menu to unnumber: `Quireink_Rail_Menu_Walker` emits
 * one flat list, so every row of the menu is a sibling of every other. `li.menu-item` is
 * WordPress's own mark on its own rows, so this cannot reach a row of the contents. */
.toc .rail-inner nav > ul li.menu-item::before {
	content: none;
}

/* ---------- the admin bar, and what it sits on top of ---------------------------------
 * WordPress prints its own bar above the page for a logged-in reader, fixed to the top of
 * the viewport at z-index 99999. `.skip-link:focus` places itself 8px from the top of the
 * page, which is 24px UNDER that bar - so the first thing a keyboard reaches on every page
 * of a logged-in site was a control drawn behind something else.
 *
 * The bar's height is WordPress's own to say and it says it: `--wp-admin--admin-bar--height`
 * is declared on `html` by the admin bar's stylesheet, 32px on a desktop and 46px under
 * 782px, where the bar is taller. Reading it is the only way this can stay correct when that
 * number changes; the 0px fallback is the case where the bar is not there at all, and then
 * this rule does nothing. */
.admin-bar .skip-link:focus {
	margin-top: var(--wp-admin--admin-bar--height, 0px);
}

/* ---------- a title nobody can break ---------------------------------------------------
 * A post title is a form field: whatever is typed into it is what the page has to set. One
 * long unbroken string - a URL, a German compound, a hostname - is a single word by every
 * line-breaking rule there is, so it ran straight out of the reading column and gave the
 * whole document a horizontal scrollbar. Measured on an 87-character title at 1440px: the
 * page scrolled to 1905px against a 1440px viewport.
 *
 * `break-word` rather than `anywhere`: it breaks a word only when that word cannot fit on a
 * line of its own, and it does not change how any box measures its minimum width, so no
 * layout that fits today moves. It is set once on the shell and inherited, because the same
 * string can arrive in a heading, a rail row, a term name, a comment or a caption, and a
 * list of selectors is a list that goes stale. */
.wrap {
	overflow-wrap: break-word;
}

/* ---------- 官网首页的三种笔迹（[mark] / [mark-hl] / [mark-pu]）---------------------
 *
 * 和 quireink.com 首页 <span class="po"> 用的 SVG 路径一字不差。
 *
 * 和 [hongbi] 的区别：没有 feTurbulence 抖动，是纯路径。放大看边缘是光滑的。
 * 两者共存，用哪个看你当时想要什么效果。
 *
 * 颜色由 SVG 里的 fill='%23c23b2b'（砖红）写死。想改颜色就全局替换
 * 这个十六进制码——三个类里一共有 5 处。
 */

/* ---------- 荧光笔 .hl ---------- */

.hl {
	color: inherit;
	background-color: transparent;
	background-repeat: no-repeat;
	mix-blend-mode: multiply;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	background-size: 100% 1.02em;
	background-position: 0 .5em;
	padding: 0 .18em;
	margin: 0 -.13em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 34' preserveAspectRatio='none'%3E%3Cpath d='M2.7,6.3 C13.4,5.9 24.2,7.3 34.9,6.2 C45.7,7.4 56.5,5.3 67.2,6.6 C78,5.3 88.7,7.4 99.5,6.4 C110.3,6.9 121,5.2 131.8,6.1 C142.5,5.2 153.3,6.9 164.1,6.4 C174.8,7.4 185.6,5.4 196.3,6.4 C197.8,9.6 197.9,25.3 195.7,30.7 C185.6,30.3 174.8,31.8 164.1,31 C153.3,31.9 142.5,29.9 131.8,30.6 C121,30.2 110.3,31.3 99.5,30.9 C88.7,31.3 78,29.8 67.2,30.4 C56.5,29.9 45.7,31.8 34.9,30.5 C24.2,31.7 13.4,29.4 2.7,30.3 C1.3,24.3 1.4,11 2.7,6.3 Z' fill='%23d5f856' opacity='.67'/%3E%3Cpath d='M6.2,13.1 C18.2,11.7 30.3,14.5 42.4,13.2 C54.5,14.4 66.6,12 78.6,12.8 C90.7,11.5 102.8,14.1 114.9,13.1 L114.3,25.3 C102.8,24.4 90.7,26 78.6,24.8 C66.6,26.6 54.5,24.1 42.4,25.1 C30.3,23.6 18.2,26 6.2,25 Z' fill='%23d5f856' opacity='.48'/%3E%3Cpath d='M140.1,12.7 C149.3,11.4 158.5,12.9 167.7,13.3 C177,12.5 186.2,11.2 195.4,13.3 L194.8,24.4 C186.2,22.9 177,25.9 167.7,24.8 C158.5,25.9 149.3,24.2 140.1,24.8 Z' fill='%23d5f856' opacity='.48'/%3E%3Cpath d='M33.3,6.7 C53.7,6.3 74.1,7.2 94.5,7 C114.9,7.7 135.2,6.5 155.6,6.6 L155.2,9 C135.2,8.6 114.9,9.9 94.5,8.7 C74.1,9.6 53.7,8.1 33.3,8.6 Z' fill='%23d5f856' opacity='.2'/%3E%3C/svg%3E");
}

/* ---------- 铅笔下划线 .pu ---------- */

.pu {
	text-decoration: none;
	background-color: transparent;
	background-repeat: no-repeat;
	mix-blend-mode: multiply;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M1.7,6.8 C23.4,7.8 45.1,10.9 66.8,10 C88.6,11.8 110.3,9.2 132,9.5 C153.8,7.1 175.5,8.1 197.2,5.1 L197.6,10.1 C175.5,11 153.8,13.7 132,14.1 C110.3,15.7 88.6,14.8 66.8,15.3 C45.1,13.9 23.4,13.8 1.7,12.1 Z' fill='%235b574f' opacity='.71'/%3E%3C/svg%3E");
	background-size: 100% .4em;
	background-position: 0 1.08em;
	padding: 0 .06em .4em .04em;
	margin: 0 -.02em;
}

/* ---------- 圆珠笔圈 .po（三段拼接：左钩 + 中间上下两条 + 右钩） ---------- */

.po {
	background-color: transparent;
	mix-blend-mode: multiply;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 48' preserveAspectRatio='none'%3E%3Cpath d='M39.6,1.2 L30.8,2.8 L20.6,4.8 L13.6,7.7 L6.2,12.7 L2.3,17.6 L2.2,24.6 L3.1,30.3 L7.1,34.9 L13.2,40.4 L21.1,43.5 L30.1,46.2 L40.1,46.4 L40.1,41.8 L31.2,42.1 L23.5,39.3 L16.7,36.7 L11.3,32.7 L8.1,28.8 L7.5,24.4 L8.6,19.4 L11.6,15.6 L17.1,11.5 L23.3,9 L31.8,7.1 L39.7,5.2 Z' fill='%23c23b2b' opacity='.58'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 48' preserveAspectRatio='none'%3E%3Cpath d='M0,4.8 C11.1,3.9 22.2,4.7 33.3,3.9 C44.4,5 55.6,3.8 66.7,4.1 C77.8,4.1 88.9,5.5 100,4.6 L100,8 C88.9,7.2 77.8,8.2 66.7,7.3 C55.6,7.7 44.4,6.7 33.3,7.5 C22.2,6.6 11.1,8.4 0,8 Z' fill='%23c23b2b' opacity='.58'/%3E%3Cpath d='M0,42.8 C11.1,42.3 22.2,43.7 33.3,43.1 C44.4,43.8 55.6,42.6 66.7,42.8 C77.8,42 88.9,42.6 100,41.8 L100,44.3 C88.9,44.5 77.8,45.7 66.7,45.7 C55.6,46.2 44.4,45.1 33.3,45.8 C22.2,45.4 11.1,46.3 0,45.5 Z' fill='%23c23b2b' opacity='.64'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 48' preserveAspectRatio='none'%3E%3Cpath d='M0.6,0.9 L10,2.4 L18.8,4.3 L26.4,8 L32.9,12.5 L36.4,18.8 L39.2,24.2 L38.1,30.3 L33.9,35.4 L26.2,40 L19.8,43.1 L10.2,45.2 L-0.6,45.5 L-0.4,41.6 L9,41.5 L16.8,38.6 L23,36.6 L28.3,32.4 L31.6,28.5 L32.6,24.1 L31.4,19.9 L28.5,15.1 L22.8,11.8 L16.6,8.3 L8.8,6.3 L0.4,5.6 Z' fill='%23c23b2b' opacity='.67'/%3E%3Cpath d='M20.6,6.6 L0,1.1 L0,3.5 L22.1,9 Z' fill='%23c23b2b' opacity='.54'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: .62em 100%, calc(100% - .96em) 100%, .62em 100%;
	background-position: 0 50%, 50% 50%, 100% 50%;
	padding: .16em .48em;
	margin: 0 -.3em;
}

/* ---------- 深色模式 ---------- */

html.dark .hl,
html.dark .pu,
html.dark .po,
html[data-scheme="dark"] .hl,
html[data-scheme="dark"] .pu,
html[data-scheme="dark"] .po {
	mix-blend-mode: normal;
}

@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) .hl,
	html:not([data-theme="light"]) .pu,
	html:not([data-theme="light"]) .po {
		mix-blend-mode: normal;
	}
}