/*
 * Written in Full — Community
 *
 * Section 8 of the plan, in CSS. Quiet, typographic, generous space. Structure
 * comes from type, hairlines and white space. No shadows, no rounded cards, no
 * gradients, no social-media furniture.
 *
 * Every colour is a theme preset with a fallback, so changing Global Styles
 * changes this too. Task P0.10 replaces the fallbacks with the real values.
 */

.wif {
	/* The site's own design tokens win. "Written in Full - site rules" already
	   defines --wif-paper, --wif-ink and --wif-accent with the book's colours;
	   this plugin reads them rather than overriding them, and falls back to the
	   theme presets on a site that has not set them. */
	--wifc-paper: var(--wif-paper, var(--wp--preset--color--base, #faf8f2));
	--wifc-ink: var(--wif-ink, var(--wp--preset--color--contrast, #17171a));
	--wifc-accent: var(--wif-accent, var(--wp--preset--color--accent-1, #a8232a));

	/* Derived from the ink, so they follow whatever the theme sets. */
	--wifc-muted: color-mix(in srgb, var(--wifc-ink) 62%, var(--wifc-paper));
	--wifc-rule: color-mix(in srgb, var(--wifc-ink) 18%, var(--wifc-paper));
	--wifc-rule-faint: color-mix(in srgb, var(--wifc-ink) 11%, var(--wifc-paper));

	--wifc-space: var(--wp--preset--spacing--40, 1.5rem);
	--wifc-space-lg: var(--wp--preset--spacing--60, 2.5rem);

	margin-block: var(--wifc-space-lg);
	color: var(--wifc-ink);
}

/* Browsers without color-mix still get readable, if slightly flatter, greys. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.wif {
		--wifc-muted: #5c5c60;
		--wifc-rule: #d5d2c9;
		--wifc-rule-faint: #e4e1d9;
	}
}

.wif :focus-visible {
	outline: 2px solid var(--wifc-accent);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * Labels and small print
 * ---------------------------------------------------------------------- */

.wif-label {
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 0.35em;
}

.wif-sub,
.wif-fineprint,
.wif-status,
.wif-crisis {
	color: var(--wifc-muted);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	margin: 0 0 var(--wifc-space);
}

.wif-fineprint {
	margin-top: var(--wifc-space);
}

.wif-empty {
	color: var(--wifc-muted);
	font-style: italic;
}

.wif-flash {
	border-left: 2px solid var(--wifc-accent);
	padding-left: 1em;
}

/* -------------------------------------------------------------------------
 * Content note and the black band
 * ---------------------------------------------------------------------- */

.wif-note {
	color: var(--wifc-muted);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	margin: 0 0 0.75em;
}

/* The heavy mark and the content note belong to "Written in Full — site rules",
 * which already renders the book's band as .wif-heavy with .wif-helpline under
 * it. Nothing is restyled here — only the small pieces that plugin has no
 * opinion about. */

.wifc-heavy {
	margin-block: var(--wifc-space-lg);
}

.wifc-heavy--form,
.wifc-heavy--confirm {
	margin-block: var(--wifc-space);
}

.wifc-helpline__local {
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * Buttons: three levels and nothing else
 * ---------------------------------------------------------------------- */

.wif-btn {
	font: inherit;
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
	line-height: 1.2;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	min-height: 44px;
	padding: 0.6em 1.1em;
	border: 1px solid var(--wifc-rule);
	border-radius: var(--wp--custom--radius, 0);
	background: transparent;
	color: var(--wifc-ink);
	cursor: pointer;
	transition: background-color 120ms ease, color 120ms ease;
}

.wif-btn:hover {
	background: var(--wifc-rule-faint);
}

.wif-btn--primary {
	background: var(--wifc-ink);
	border-color: var(--wifc-ink);
	color: var(--wifc-paper);
}

.wif-btn--primary:hover {
	background: var(--wifc-ink);
	opacity: 0.88;
}

.wif-btn[aria-pressed="true"] {
	background: var(--wifc-ink);
	border-color: var(--wifc-ink);
	color: var(--wifc-paper);
}

.wif-link {
	font: inherit;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	padding: 0.4em 0;
	margin: 0;
	border: 0;
	background: none;
	color: var(--wifc-ink);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	cursor: pointer;
}

.wif-link:hover {
	color: var(--wifc-accent);
}

/* -------------------------------------------------------------------------
 * The writing box: the book's ruled page
 * ---------------------------------------------------------------------- */

.wif-page {
	margin-block: var(--wifc-space);
}

.wif-page__question {
	color: var(--wifc-muted);
	margin: 0 0 0.5em;
}

.wif-daterule {
	margin: 0 0 0.35em;
	text-align: right;
}

.wifc-date {
	font: inherit;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	width: 12em;
	max-width: 60%;
	padding: 0.2em 0;
	border: 0;
	border-bottom: 1px solid var(--wifc-rule);
	background: transparent;
	color: var(--wifc-muted);
	text-align: right;
}

/* The ruled lines are drawn as a background, on the same rhythm as the
   line-height, so the writing sits on the lines instead of floating over them. */
.wif-write {
	--wifc-line: 2rem;

	font-family: inherit;
	font-size: 1.0625rem;
	line-height: var(--wifc-line);
	display: block;
	width: 100%;
	min-height: calc(var(--wifc-line) * 8);
	padding: 0;
	border: 0;
	border-bottom: 1px solid var(--wifc-rule);
	border-radius: 0;
	background-color: transparent;
	background-image: repeating-linear-gradient(
		to bottom,
		transparent 0,
		transparent calc(var(--wifc-line) - 1px),
		var(--wifc-rule-faint) calc(var(--wifc-line) - 1px),
		var(--wifc-rule-faint) var(--wifc-line)
	);
	background-attachment: local;
	color: var(--wifc-ink);
	overflow: hidden;
	resize: none;
}

.wif-write:focus {
	outline: none;
	border-bottom-color: var(--wifc-accent);
}

@media (max-width: 480px) {
	.wif-write {
		min-height: calc(var(--wifc-line) * 6);
	}
}

.wif-status {
	min-height: 1.5em;
	margin: 0.5em 0 0;
}

.wif-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75em var(--wifc-space);
	margin-top: 0.75em;
}

/* On a phone the buttons stack full width, primary on top. */
@media (max-width: 480px) {
	.wif-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.wif-actions .wif-btn--primary {
		justify-content: center;
		width: 100%;
		order: -1;
	}
}

.wif-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.25em;
	margin: 0;
}

/* -------------------------------------------------------------------------
 * The share step
 * ---------------------------------------------------------------------- */

.wif-share {
	margin-top: var(--wifc-space-lg);
	padding-top: var(--wifc-space);
	border-top: 1px solid var(--wifc-rule);
}

.wif-share__step {
	color: var(--wifc-muted);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0 0 var(--wifc-space);
}

.wif-preview {
	margin-block: var(--wifc-space);
	padding-left: 1em;
	border-left: 2px solid var(--wifc-rule);
	white-space: pre-wrap;
}

/* A spellchecker's underline, not an error state. */
.wif-flag {
	text-decoration: underline wavy var(--wifc-accent);
	text-underline-offset: 0.2em;
	cursor: help;
}

.wif-hint {
	color: var(--wifc-muted);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-style: italic;
	margin: 0.5em 0 0;
}

.wif-fields {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wifc-space);
	margin-block: var(--wifc-space);
}

.wif-fields p {
	flex: 1 1 10em;
	margin: 0;
}

.wif-fields label {
	display: block;
	color: var(--wifc-muted);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	margin-bottom: 0.25em;
}

.wif-fields input,
.wif-fields select {
	font: inherit;
	width: 100%;
	min-height: 44px;
	padding: 0.4em 0.5em;
	border: 1px solid var(--wifc-rule);
	border-radius: 0;
	background: transparent;
	color: var(--wifc-ink);
}

.wif-anon {
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
	margin-block: var(--wifc-space);
}

.wif-rules {
	margin: 0 0 0.5em;
	padding-left: 1.25em;
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
}

.wif-rules li {
	margin-bottom: 0.35em;
}

.wif-notes-pick {
	margin-block: var(--wifc-space);
	padding: 0;
	border: 0;
}

.wif-notes-pick legend {
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0;
}

.wif-check {
	display: flex;
	align-items: flex-start;
	gap: 0.6em;
	margin-bottom: 0.5em;
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
	line-height: 1.5;
	cursor: pointer;
}

.wif-check input {
	flex: 0 0 auto;
	width: 1.1em;
	height: 1.1em;
	margin-top: 0.2em;
}

.wif-check--required {
	margin-top: var(--wifc-space);
}

.wif-error {
	min-height: 1.5em;
	margin: 0.5em 0;
	color: var(--wifc-accent);
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
}

.wif-error:empty {
	min-height: 0;
	margin: 0;
}

.wif-share__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75em 1.25em;
	margin-block: var(--wifc-space);
}

@media (max-width: 480px) {
	.wif-share__nav {
		flex-direction: column;
		align-items: stretch;
	}

	.wif-share__nav .wif-btn {
		justify-content: center;
		width: 100%;
	}
}

/* The honeypot: present for a robot, gone for everyone else. */
.wif-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* -------------------------------------------------------------------------
 * Confirmation
 * ---------------------------------------------------------------------- */

.wif-confirm__body p {
	margin-block: 0.75em;
}

.wif-keep {
	margin-block: var(--wifc-space);
	padding: 0.9em 1em;
	border: 1px solid var(--wifc-rule);
}

.wif-keep p {
	margin: 0 0 0.5em;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

.wif-keep code {
	display: block;
	overflow-wrap: anywhere;
	margin-bottom: 0.6em;
	font-size: 0.8125rem;
}

/* -------------------------------------------------------------------------
 * Reactions
 * ---------------------------------------------------------------------- */

.wif-questionreact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wifc-space);
	padding-block: var(--wifc-space);
	border-top: 1px solid var(--wifc-rule);
	border-bottom: 1px solid var(--wifc-rule);
}

/* What the page says back once somebody has pressed it. It takes the whole
   width under the button rather than crowding alongside it, and it appears
   without anything else on the page moving. */
.wif-reactnote {
	flex: 1 1 100%;
	margin: 0;
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
	line-height: 1.6;
	animation: wif-fade 150ms ease both;
}

.wif-reactnote__lead {
	color: var(--wifc-ink);
}

.wif-reactnote__quiet {
	color: var(--wifc-muted);
}

@keyframes wif-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Under a reader's answer the line sits below the reactions, not beside them. */
.wif-answer__foot .wif-reactnote {
	flex-basis: 100%;
	margin-top: 0.5em;
}

.wif-react__count {
	color: var(--wifc-muted);
	transition: opacity 150ms ease;
}

.wif-react__count:empty {
	display: none;
}

.wif-react__count--changing {
	opacity: 0;
}

.wif-btn[aria-pressed="true"] .wif-react__count {
	color: inherit;
	opacity: 0.8;
}

.wif-reactions {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

/* -------------------------------------------------------------------------
 * Readers' answers
 * ---------------------------------------------------------------------- */

.wif-answers {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wif-answer {
	padding-block: var(--wifc-space-lg);
	border-top: 1px solid var(--wifc-rule);
}

.wif-answer:first-child {
	border-top: 0;
	padding-top: var(--wifc-space);
}

.wif-answer__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5em 1em;
	margin: 0 0 0.75em;
	color: var(--wifc-muted);
	font-size: var(--wp--preset--font-size--small, 0.8125rem);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* A reader's answer is set in the same font and size as Kent's own. */
.wif-answer__text p {
	margin-block: 0.75em;
}

.wif-answer__text p:first-child {
	margin-top: 0;
}

.wif-answer__folded {
	margin-bottom: 0.5em;
}

.wif-answer__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75em 1em;
	margin: var(--wifc-space) 0 0;
}

.wif-answer__foot .wif-link {
	color: var(--wifc-muted);
}

.wif-more {
	margin-top: var(--wifc-space);
	text-align: center;
}

/* -------------------------------------------------------------------------
 * The report form
 * ---------------------------------------------------------------------- */

.wif-reportform {
	margin-top: var(--wifc-space);
	padding: var(--wifc-space);
	border: 1px solid var(--wifc-rule);
}

.wif-reportform legend,
.wif-reportform .wif-label {
	margin-bottom: 0.5em;
}

.wif-reportform label {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin-bottom: 0.4em;
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
}

.wif-reportform textarea {
	font: inherit;
	width: 100%;
	margin-top: 0.5em;
	padding: 0.5em;
	border: 1px solid var(--wifc-rule);
	border-radius: 0;
	background: transparent;
	color: var(--wifc-ink);
}

/* -------------------------------------------------------------------------
 * My answers
 * ---------------------------------------------------------------------- */

.wif-mine__list ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wif-mine__item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5em 1em;
	padding-block: 1em;
	border-bottom: 1px solid var(--wifc-rule);
}

.wif-mine__q {
	flex: 1 1 18em;
	margin: 0;
}

.wif-mine__meta {
	color: var(--wifc-muted);
	font-size: var(--wp--preset--font-size--small, 0.8125rem);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0;
}

.wif-mine__links {
	display: flex;
	gap: 1em;
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Pass it on: ask someone, and the Story card
 * ---------------------------------------------------------------------- */

.wif-passiton {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0.75em;
	margin-block: var(--wifc-space);
}

@media (max-width: 480px) {
	.wif-passiton {
		flex-direction: column;
		align-items: stretch;
	}

	.wif-passiton .wif-btn {
		justify-content: center;
		width: 100%;
	}
}

.wif-ask,
.wif-card {
	flex: 0 0 auto;
}

.wif-ask__panel {
	flex-basis: 100%;
	margin-top: var(--wifc-space);
	padding-top: var(--wifc-space);
	border-top: 1px solid var(--wifc-rule);
}

/* The panel needs the full width once it opens, whatever the row is doing.
   The class is added by the script; :has() covers browsers that get there first. */
.wif-ask--open,
.wif-ask:has( .wif-ask__panel:not( [hidden] ) ) {
	flex: 1 1 100%;
}

.wif-ask__who {
	margin-block: var(--wifc-space);
	padding: 0;
	border: 0;
}

.wif-ask__who legend {
	padding: 0;
	margin-bottom: 0.5em;
}

.wif-ask__text {
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.6;
	display: block;
	width: 100%;
	padding: 0.7em 0.8em;
	border: 1px solid var(--wifc-rule);
	border-radius: 0;
	background: transparent;
	color: var(--wifc-ink);
	overflow: hidden;
	resize: none;
}

.wif-ask__text:focus {
	outline: none;
	border-color: var(--wifc-accent);
}

.wif-ask__send {
	align-items: stretch;
}

.wif-ask__send .wif-btn[hidden] {
	display: none;
}

/* The links that open WhatsApp and the rest are buttons, not underlined text. */
.wif-ask__send a.wif-btn {
	text-decoration: none;
	justify-content: center;
}

.wif-sendon {
	margin-top: var(--wifc-space);
}

.wif-sendon a.wif-btn {
	text-decoration: none;
}

/* -------------------------------------------------------------------------
 * Somebody was asked this question
 * ---------------------------------------------------------------------- */

.wif-asked {
	margin-block: var(--wifc-space-lg);
	padding-left: 1em;
	border-left: 2px solid var(--wifc-accent);
}

.wif-asked__line {
	margin: 0 0 0.4em;
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
}

.wif-asked .wif-sub {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
 * Continue where you left off
 * ---------------------------------------------------------------------- */

.wif-continue {
	margin-block: var(--wifc-space);
}

.wif-continue__line {
	margin: 0;
	color: var(--wifc-muted);
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
}

.wif-continue__line a {
	color: var(--wifc-ink);
}

.wif-continue__line .wif-link {
	color: var(--wifc-muted);
	margin-left: 0.5em;
}

/* -------------------------------------------------------------------------
 * The plain form, for browsers without JavaScript
 * ---------------------------------------------------------------------- */

.wif-nojs textarea {
	font: inherit;
	font-size: 1.0625rem;
	line-height: 1.7;
	width: 100%;
	min-height: 12rem;
	padding: 0.5em;
	border: 1px solid var(--wifc-rule);
	border-radius: 0;
	background: transparent;
	color: inherit;
}

.wif-nojs label {
	display: block;
	margin-bottom: 0.35em;
}

/* -------------------------------------------------------------------------
 * Nothing moves for a reader who has asked for that
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.wif *,
	.wif *::before,
	.wif *::after {
		transition-duration: 0s !important;
		animation-duration: 0s !important;
	}
}

/* -------------------------------------------------------------------------
 * Standing up to the theme's form styling
 *
 * Twenty Twenty-Five paints every control inside .wp-site-blocks with the base
 * colour and a full border, through a selector built from eight :not()s. A
 * writing box that inherits that reads as a form field, which is the one thing
 * it must not look like. Rather than chase that specificity with selectors
 * nobody can maintain, these say plainly that inside this plugin's components
 * the fields sit on the page's own paper.
 * ---------------------------------------------------------------------- */

.wif textarea,
.wif input[type="text"],
.wif input[type="email"],
.wif input[type="search"],
.wif select {
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: var(--wifc-ink);
	box-shadow: none !important;
}

/* The writing page and its date rule keep a single hairline. The padding has to
   go with it: the ruled lines are drawn from the top of the content box, so any
   inherited padding would lift the writing off its own lines. */
.wif textarea.wif-write {
	border-bottom: 1px solid var(--wifc-rule) !important;
	padding: 0 !important;
}

.wif input.wifc-date {
	padding: 0.2em 0 !important;
}

.wif textarea.wif-write:focus {
	border-bottom-color: var(--wifc-accent) !important;
}

.wif input.wifc-date {
	border-bottom: 1px solid var(--wifc-rule) !important;
}

/* Fields that are genuinely fields keep an outline on all four sides. */
.wif .wif-fields input,
.wif .wif-fields select,
.wif textarea.wif-ask__text,
.wif .wif-reportform textarea,
.wif .wif-nojs textarea {
	border: 1px solid var(--wifc-rule) !important;
	padding: 0.6em 0.7em !important;
}

.wif textarea.wif-ask__text:focus,
.wif .wif-fields input:focus,
.wif .wif-fields select:focus {
	border-color: var(--wifc-accent) !important;
}

/* Section labels are small caps, not the theme's heading scale. */
.wif h2.wif-label,
.wif h3.wif-label,
.wif legend.wif-label {
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
	margin: 0 0 0.35em;
}