/*
 * Adverse action waiting period calculator: the block's own component styles (loaded only where the
 * block is). Same look as the verification letter generator (es-verification-letter/style.css): the form
 * panel, segmented radios, labeled fields and hints; the result is a card in place of the letter sheet.
 *
 * Token bridge: every value below reads a theme.json variable (--wp--preset--* / --wp--custom--*).
 * The fallback after each comma is the approved token value, used only if the theme does not define it.
 * Literal px left in the rules are component dimensions (radii, borders, the checkbox).
 * Status is amber (a condition to check), crimson (no date: something is missing or wrong) or ink.
 * Never mint as text: mint is type only on the purple field, and this block has none.
 * Buttons are the theme.json button element (.wp-element-button). Nothing here styles anything outside
 * the block, except the print rules at the end, which print the result alone when the Print button is
 * used (Article VII record in docs/decisions.md). Ctrl/Cmd+P prints the whole page.
 */

.wp-block-esservices-adverse-action-deadline,
.esaa-print-root {
	--esaa-surface: var(--wp--custom--color--surface, #FDFCFE);
	--esaa-surface-inset: var(--wp--custom--color--surface-inset, #F6F5F9);
	--esaa-set-apart: var(--wp--custom--color--surface-set-apart, #F7F4FE);
	--esaa-text: var(--wp--custom--color--text, #1B1721);
	--esaa-text-strong: var(--wp--custom--color--text-strong, #0F0D14);
	--esaa-text-muted: var(--wp--custom--color--text-muted, #575261);
	--esaa-text-quiet: var(--wp--custom--color--text-quiet, #726D7B);
	--esaa-line: var(--wp--custom--color--line, #DDDBE4);
	--esaa-line-strong: var(--wp--custom--color--line-strong, #8E8A97);
	--esaa-action: var(--wp--custom--color--action, #723FB4);
	--esaa-callout-label: var(--wp--custom--color--callout-label, #592D91);
	--esaa-callout-rule: var(--wp--custom--color--callout-rule, #723FB4);
	--esaa-status-action: var(--wp--custom--color--status-action, #935A11);
	--esaa-status-deficiency: var(--wp--custom--color--status-deficiency, #9E231E);
	--esaa-selected: var(--wp--preset--color--purple-50, #F7F4FE);
	--esaa-shadow: var(--wp--preset--color--purple-900, #2B1349);

	--esaa-font: var(--wp--preset--font-family--inter, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif);
	--esaa-mono: var(--wp--preset--font-family--mono, "JetBrains Mono", ui-monospace, SFMono-Regular, monospace);
	--esaa-caption: var(--wp--preset--font-size--caption, 0.75rem);
	--esaa-small: var(--wp--preset--font-size--small, 0.875rem);
	--esaa-body: var(--wp--preset--font-size--body, 1.0625rem);
	--esaa-subhead: var(--wp--preset--font-size--subhead, 1.375rem);

	--esaa-hairline: var(--wp--preset--spacing--hairline, 0.25rem);
	--esaa-tight: var(--wp--preset--spacing--tight, 0.375rem);
	--esaa-snug: var(--wp--preset--spacing--snug, 0.625rem);
	--esaa-base: var(--wp--preset--spacing--base, 1rem);
	--esaa-loose: var(--wp--preset--spacing--loose, 1.625rem);
	--esaa-wide: var(--wp--preset--spacing--wide, 2.625rem);

	--esaa-leading-body: var(--wp--custom--leading--body, 1.6);
	--esaa-leading-ui: var(--wp--custom--leading--ui, 1.4);
	--esaa-leading-subhead: var(--wp--custom--leading--subhead, 1.3);
	--esaa-leading-data: var(--wp--custom--leading--data, 1.35);
	--esaa-tracking-body: var(--wp--custom--tracking--body, 0em);
	--esaa-tracking-ui: var(--wp--custom--tracking--ui, 0.01em);
	--esaa-tracking-label: var(--wp--custom--tracking--label, 0.08em);
	--esaa-tracking-heading: var(--wp--custom--tracking--heading, -0.01em);
}

/* Resets inside the component only (the theme sets neither border-box sizing nor these margins). */
.wp-block-esservices-adverse-action-deadline *,
.wp-block-esservices-adverse-action-deadline *::before,
.wp-block-esservices-adverse-action-deadline *::after,
.esaa-print-root * { box-sizing: border-box; }
.wp-block-esservices-adverse-action-deadline :where(p, h3, h4, ol, ul, li, fieldset, legend),
.esaa-print-root :where(p, h3, h4, ol, ul, li) { margin: 0; }
.wp-block-esservices-adverse-action-deadline [hidden],
.esaa-print-root [hidden] { display: none !important; }
.wp-block-esservices-adverse-action-deadline :focus-visible { outline: 2px solid var(--esaa-action); outline-offset: 2px; }
/* Text for screen readers only: the status line for button feedback, and separators between spans. */
.esaa-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* The structural (mono) voice: label + meta, as in the letter generator. */
.esaa-label { font: 500 var(--esaa-caption)/var(--esaa-leading-ui) var(--esaa-mono); letter-spacing: var(--esaa-tracking-label); text-transform: uppercase; }
.esaa-meta { font: 400 var(--esaa-caption)/var(--esaa-leading-body) var(--esaa-mono); letter-spacing: var(--esaa-tracking-body); }
.esaa-cite { font: 500 var(--esaa-caption)/var(--esaa-leading-ui) var(--esaa-mono); letter-spacing: var(--esaa-tracking-ui); color: var(--esaa-callout-label); text-decoration: underline; overflow-wrap: anywhere; }
.esaa-cite:hover { color: var(--esaa-action); }
.esaa-unavailable { font-size: var(--esaa-small); color: var(--esaa-text-muted); }

/* Buttons: the theme.json button element sets color, type, padding and radius; the quiet variant is here. */
.wp-block-esservices-adverse-action-deadline .esaa-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--esaa-tight);
	white-space: nowrap; cursor: pointer;
}
.wp-block-esservices-adverse-action-deadline .esaa-btn-quiet,
.wp-block-esservices-adverse-action-deadline .esaa-btn-quiet:hover {
	background: var(--esaa-surface); color: var(--esaa-text-strong); box-shadow: inset 0 0 0 1px var(--esaa-line-strong);
}
.wp-block-esservices-adverse-action-deadline .esaa-btn-quiet:hover { box-shadow: inset 0 0 0 1px var(--esaa-text-strong); }
.wp-block-esservices-adverse-action-deadline .esaa-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* ── The calculator: form panel (5) + result column (7) ── */
.esaa-gen { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--esaa-wide); align-items: start; }
.esaa-panel { background: var(--esaa-surface-inset); border-radius: 8px; padding: var(--esaa-loose); }
.esaa-panel fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.esaa-panel > fieldset + fieldset { margin-top: var(--esaa-loose); padding-top: var(--esaa-loose); border-top: 1px solid var(--esaa-line); }
.esaa-panel legend { float: left; width: 100%; padding: 0; margin: 0 0 var(--esaa-base); color: var(--esaa-text-muted); }
.esaa-panel legend + * { clear: both; }

/* Segmented choices (radio cards) */
.esaa-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esaa-snug); margin: 0 0 var(--esaa-base); }
.esaa-seg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.esaa-seg label { position: relative; display: block; cursor: pointer; }
.esaa-seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.esaa-seg span { display: block; height: 100%; background: var(--esaa-surface); border: 1px solid var(--esaa-line-strong); border-radius: 6px; padding: var(--esaa-snug); font-size: var(--esaa-small); line-height: var(--esaa-leading-ui); overflow-wrap: anywhere; }
.esaa-seg span b { display: block; font-weight: 600; color: var(--esaa-text-strong); }
.esaa-seg span i { display: block; font-style: normal; color: var(--esaa-text-muted); }
.esaa-seg input:checked + span { border-color: var(--esaa-action); box-shadow: inset 0 0 0 1px var(--esaa-action); background: var(--esaa-selected); }
.esaa-seg input:focus-visible + span { outline: 2px solid var(--esaa-action); outline-offset: 2px; }
.esaa-panel .esaa-sub legend { float: none; width: auto; margin: 0 0 var(--esaa-tight); font-size: var(--esaa-small); font-weight: 500; line-height: var(--esaa-leading-ui); color: var(--esaa-text-strong); }

/* Fields */
.esaa-f { display: block; margin: 0 0 var(--esaa-base); }
.esaa-f > span { display: block; font-size: var(--esaa-small); font-weight: 500; line-height: var(--esaa-leading-ui); color: var(--esaa-text-strong); margin-bottom: var(--esaa-tight); }
.esaa-f > span em, .esaa-check em { font-style: normal; font-weight: 400; color: var(--esaa-text-muted); }
.esaa-f input, .esaa-f select {
	display: block; width: 100%; min-width: 0; box-sizing: border-box;
	font: 400 var(--esaa-body)/var(--esaa-leading-ui) var(--esaa-font); color: var(--esaa-text-strong);
	background: var(--esaa-surface); border: 1px solid var(--esaa-line-strong); border-radius: 5px; padding: var(--esaa-snug);
}
.esaa-f input::placeholder { color: var(--esaa-text-quiet); opacity: 1; }
.esaa-f input:focus, .esaa-f select:focus { outline: 2px solid var(--esaa-action); outline-offset: 1px; border-color: var(--esaa-action); }
.esaa-f.esaa-is-empty input { border-color: var(--esaa-status-action); box-shadow: inset 3px 0 0 var(--esaa-status-action); }
.esaa-f.esaa-is-bad input { border-color: var(--esaa-status-deficiency); box-shadow: inset 3px 0 0 var(--esaa-status-deficiency); }
.esaa-f > span em.esaa-req { color: var(--esaa-status-action); }
.esaa-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--esaa-base); }
.esaa-check { display: flex; gap: var(--esaa-snug); align-items: flex-start; font-size: var(--esaa-small); line-height: var(--esaa-leading-ui); margin: 0 0 var(--esaa-base); cursor: pointer; }
.esaa-check input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--esaa-action); }
.wp-block-esservices-adverse-action-deadline .esaa-hint { font-size: var(--esaa-small); line-height: var(--esaa-leading-body); color: var(--esaa-text-muted); margin: calc(-1 * var(--esaa-snug)) 0 var(--esaa-base); }
.wp-block-esservices-adverse-action-deadline .esaa-hint.esaa-is-action { color: var(--esaa-status-action); }
.wp-block-esservices-adverse-action-deadline .esaa-hint.esaa-is-error { color: var(--esaa-status-deficiency); }
.wp-block-esservices-adverse-action-deadline .esaa-hint:last-child { margin-bottom: 0; }

/* ── The result column ── */
.esaa-mbar { display: none; }
/* Wide screens: the result is much taller than the form, so the headline band (the date) sticks inside
   the card while the details scroll under it. */
@media (min-width: 1024px) {
	.esaa-head { position: sticky; top: var(--esaa-loose); z-index: 1; }
}
.esaa-out-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--esaa-base); margin-bottom: var(--esaa-snug); }
.wp-block-esservices-adverse-action-deadline .esaa-out-head h3 { color: var(--esaa-text-muted); }
.esaa-edit { display: none; font-size: var(--esaa-small); font-weight: 500; }

/* The card: the same paper surface and shadow as the letter sheet */
.esaa-card {
	overflow-wrap: anywhere;
	background: var(--esaa-surface); border: 1px solid var(--esaa-line); border-radius: 3px;
	box-shadow: 0 24px 50px -30px color-mix(in srgb, var(--esaa-shadow) 35%, transparent);
	padding: var(--esaa-loose);
	font-size: var(--esaa-small); line-height: var(--esaa-leading-body); color: var(--esaa-text);
}

/* The headline: a set-apart band with a purple rule, ink text. Fixed minimum height, so a longer or
   shorter result never moves the buttons under it. */
.esaa-head {
	min-height: 9.5rem;
	margin: calc(-1 * var(--esaa-loose)) calc(-1 * var(--esaa-loose)) var(--esaa-base);
	padding: var(--esaa-loose);
	background: var(--esaa-set-apart); border-bottom: 3px solid var(--esaa-callout-rule); border-radius: 3px 3px 0 0;
}
.esaa-kicker { color: var(--esaa-callout-label); margin-bottom: var(--esaa-tight); }
.esaa-headline {
	font-family: var(--esaa-font); font-size: var(--esaa-subhead); font-weight: 600;
	line-height: var(--esaa-leading-subhead); letter-spacing: var(--esaa-tracking-heading); color: var(--esaa-text-strong);
	overflow-wrap: normal;
}
.esaa-headline .esaa-date { white-space: nowrap; }
.esaa-head.esaa-is-bad .esaa-headline { color: var(--esaa-status-deficiency); font-size: var(--esaa-body); }
.esaa-head.esaa-is-bad { border-bottom-color: var(--esaa-status-deficiency); }
.esaa-controls { margin-top: var(--esaa-tight); color: var(--esaa-text-muted); }

.esaa-toolbar { display: flex; flex-wrap: wrap; gap: var(--esaa-snug); }
.wp-block-esservices-adverse-action-deadline .esaa-notes,
.esaa-print-root .esaa-notes { margin-top: var(--esaa-snug); color: var(--esaa-text-muted); }
.esaa-noscript { margin-bottom: var(--esaa-base); color: var(--esaa-status-deficiency); }

/* Warnings: amber, with a left rule (the status pattern of the letter generator) */
.esaa-warnings { margin-top: var(--esaa-base); display: grid; gap: var(--esaa-tight); }
.esaa-warn {
	padding: var(--esaa-snug) var(--esaa-base);
	border-left: 3px solid var(--esaa-status-action);
	background: color-mix(in srgb, var(--esaa-status-action) 8%, var(--esaa-surface));
}
.esaa-warn b { color: var(--esaa-status-action); font-weight: 600; }

/* Sections */
.esaa-sec { margin-top: var(--esaa-loose); padding-top: var(--esaa-base); border-top: 1px solid var(--esaa-line); }
.wp-block-esservices-adverse-action-deadline .esaa-sec > h4,
.esaa-print-root .esaa-sec > h4 { color: var(--esaa-text-muted); margin-bottom: var(--esaa-snug); }
.esaa-sec h5 { margin: var(--esaa-base) 0 var(--esaa-hairline); font-size: var(--esaa-small); font-weight: 600; line-height: var(--esaa-leading-ui); color: var(--esaa-text-strong); }
.esaa-sec h5:first-child { margin-top: 0; }
.esaa-list { padding-left: 1.25em; display: grid; gap: var(--esaa-hairline); }
.esaa-sec p + p { margin-top: var(--esaa-tight); }

/* One line per rule */
.esaa-rules { list-style: none; padding: 0; display: grid; gap: var(--esaa-snug); }
.esaa-rule { border: 1px solid var(--esaa-line); border-radius: 6px; padding: var(--esaa-snug) var(--esaa-base); }
.esaa-rule.esaa-controls-it { border-color: var(--esaa-action); box-shadow: inset 3px 0 0 var(--esaa-action); }
.esaa-rule-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 var(--esaa-base); }
.esaa-rule-name { font-weight: 600; color: var(--esaa-text-strong); line-height: var(--esaa-leading-ui); }
.esaa-rule-date { font-weight: 600; color: var(--esaa-text-strong); line-height: var(--esaa-leading-ui); white-space: nowrap; }
.esaa-rule.esaa-is-bad .esaa-rule-date { color: var(--esaa-status-deficiency); white-space: normal; }
.esaa-tag { display: inline-block; margin-left: var(--esaa-tight); color: var(--esaa-callout-label); }
.esaa-rule-text { margin-top: var(--esaa-hairline); color: var(--esaa-text); }
.esaa-rule-sub { margin-top: var(--esaa-hairline); color: var(--esaa-text-muted); }
.esaa-rule-error { margin-top: var(--esaa-hairline); color: var(--esaa-status-deficiency); }
.esaa-conds { list-style: none; padding: 0; margin-top: var(--esaa-tight) !important; display: grid; gap: var(--esaa-hairline); }
.esaa-conds li { padding-left: var(--esaa-snug); border-left: 2px solid var(--esaa-status-action); }
.esaa-conds li.esaa-note { border-left-color: var(--esaa-line-strong); color: var(--esaa-text-muted); }
.esaa-rule-cites { margin-top: var(--esaa-tight) !important; display: flex; flex-wrap: wrap; gap: 0 var(--esaa-base); }

/* The day-by-day count */
.esaa-f-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esaa-tight) var(--esaa-snug); }
.esaa-f-inline > span { margin: 0; }
.esaa-f-inline select { width: auto; max-width: 100%; flex: 1 1 12rem; font-size: var(--esaa-small); padding: var(--esaa-tight) var(--esaa-snug); }
.esaa-days { list-style: none; padding: 0; border: 1px solid var(--esaa-line); border-radius: 6px; overflow: hidden; }
.esaa-day { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--esaa-snug); padding: var(--esaa-tight) var(--esaa-snug); line-height: var(--esaa-leading-data); }
.esaa-day + .esaa-day { border-top: 1px solid var(--esaa-line); }
.esaa-day-date { font-family: var(--esaa-mono); font-size: var(--esaa-caption); letter-spacing: var(--esaa-tracking-ui); color: var(--esaa-text-strong); white-space: nowrap; align-self: center; }
.esaa-day.esaa-skip { background: var(--esaa-surface-inset); }
.esaa-day.esaa-skip .esaa-day-date,
.esaa-day.esaa-skip .esaa-day-what { color: var(--esaa-text-muted); }
.esaa-day.esaa-start .esaa-day-what,
.esaa-day.esaa-end .esaa-day-what { font-weight: 600; color: var(--esaa-text-strong); }
.esaa-day.esaa-end { box-shadow: inset 3px 0 0 var(--esaa-action); background: var(--esaa-selected); }
.esaa-day-what b { font-weight: 600; color: var(--esaa-text-strong); }
.esaa-day.esaa-late .esaa-day-what { color: var(--esaa-status-action); }

.wp-block-esservices-adverse-action-deadline .esaa-disclaimer,
.esaa-print-root .esaa-disclaimer { margin-top: var(--esaa-loose); padding-top: var(--esaa-base); border-top: 1px solid var(--esaa-line); color: var(--esaa-text-muted); }

@media (forced-colors: active) {
	.esaa-seg input:checked + span { border: 3px solid Highlight; padding: calc(var(--esaa-snug) - 2px); }
	.esaa-rule.esaa-controls-it, .esaa-day.esaa-end { border: 2px solid Highlight; }
}

/* ── Narrow screens: one column, a sticky "See the date" bar, an "Edit details" link back ── */
@media (max-width: 1023px) {
	:root:has(.wp-block-esservices-adverse-action-deadline) { scroll-padding-bottom: calc(var(--wp--preset--spacing--section, 4.25rem) + var(--wp--preset--spacing--snug, 0.625rem) + env(safe-area-inset-bottom)); }
	.esaa-gen { grid-template-columns: minmax(0, 1fr); }
	#esaa-result { scroll-margin-top: var(--esaa-snug); }
	.esaa-edit { display: inline; }
	.esaa-mbar {
		display: flex; position: sticky; bottom: 0; z-index: 2;
		margin: var(--esaa-loose) calc(-1 * var(--esaa-loose)) calc(-1 * var(--esaa-loose));
		padding: var(--esaa-snug) var(--esaa-loose) calc(var(--esaa-snug) + env(safe-area-inset-bottom));
		background: var(--esaa-surface-inset); border-top: 1px solid var(--esaa-line-strong); border-radius: 0 0 8px 8px;
	}
	.esaa-mbar .esaa-btn { flex: 1; }
}
@media (max-width: 760px) {
	.esaa-panel { padding: var(--esaa-base); }
	.esaa-mbar { margin: var(--esaa-loose) calc(-1 * var(--esaa-base)) calc(-1 * var(--esaa-base)); padding-inline: var(--esaa-base); }
	.esaa-card { padding: var(--esaa-base); }
	.esaa-head { margin: calc(-1 * var(--esaa-base)) calc(-1 * var(--esaa-base)) var(--esaa-base); padding: var(--esaa-base); min-height: 10.5rem; }
}
@media (max-width: 560px) {
	.esaa-row, .esaa-seg-3 { grid-template-columns: minmax(0, 1fr); }
	.esaa-toolbar { display: grid; grid-template-columns: minmax(0, 1fr); }
	.esaa-day { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.esaa-headline .esaa-date { white-space: normal; }
}
@media (max-width: 380px) {
	.esaa-seg { grid-template-columns: minmax(0, 1fr); }
}

/* ── The editor card (editor.js): the block has no settings; the calculator renders on the page ── */
.wp-block-esservices-adverse-action-deadline.esaa-editor-card {
	background: var(--esaa-surface-inset); border: 1px dashed var(--esaa-line-strong); border-radius: 8px;
	padding: var(--esaa-loose); font-family: var(--esaa-font); color: var(--esaa-text);
}
.esaa-editor-card .esaa-editor-card__title { font-size: var(--esaa-body); font-weight: 600; line-height: var(--esaa-leading-ui); color: var(--esaa-text-strong); }
.esaa-editor-card .esaa-editor-card__note { margin-top: var(--esaa-hairline); font-size: var(--esaa-small); line-height: var(--esaa-leading-body); color: var(--esaa-text-muted); }

/* ── Print: the result alone, only from the Print button. view.js then adds a copy of the result card in
   .esaa-print-root (a direct child of body, no buttons) and the class esaa-printing on body, and removes
   both after printing. Ctrl/Cmd+P has neither, so it prints the whole page with its reference sections. ── */
.esaa-print-root { display: none; }
@media print {
	body.esaa-printing > :not(.esaa-print-root) { display: none !important; }
	body.esaa-printing { background: none; margin: 0; padding: 0; }
	body.esaa-printing > .esaa-print-root {
		display: block; overflow-wrap: anywhere; font-family: var(--esaa-font); font-size: 10.5pt;
		line-height: var(--esaa-leading-body); color: var(--esaa-text-strong); background: none;
	}
	.esaa-print-root .esaa-meta { color: var(--esaa-text-muted); }
	.esaa-print-root .esaa-print-title { font: 600 9pt/1.4 var(--esaa-mono); letter-spacing: var(--esaa-tracking-label); text-transform: uppercase; margin-bottom: 6pt; }
	.esaa-print-root .esaa-card { border: 0; box-shadow: none; padding: 0; font-size: inherit; color: inherit; background: none; }
	.esaa-print-root .esaa-head { position: static; min-height: 0; margin: 0 0 10pt; padding: 0 0 8pt; background: none; border-bottom: 2px solid var(--esaa-text-strong); }
	.esaa-print-root .esaa-headline { font-size: 16pt; color: var(--esaa-text-strong); }
	.esaa-print-root .esaa-count-for { margin-bottom: 6pt; }
	.esaa-print-root .esaa-toolbar, .esaa-print-root .esaa-f-inline { display: none !important; }
	.esaa-print-root a { color: inherit; }
	.esaa-print-root a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; word-break: break-all; }
	.esaa-print-root .esaa-rule, .esaa-print-root .esaa-day, .esaa-print-root .esaa-warn { break-inside: avoid; }
	.esaa-print-root .esaa-day.esaa-skip, .esaa-print-root .esaa-day.esaa-end, .esaa-print-root .esaa-warn { background: none; }
	.esaa-print-root .esaa-sec { break-inside: auto; }
	.esaa-print-root .esaa-sec > h4 { break-after: avoid; }
}

/* "How we counted" folds: the notes are long, the answer comes first. */
.esaa-how > summary {
	cursor: pointer;
	list-style: none;
}
.esaa-how > summary::-webkit-details-marker {
	display: none;
}
.esaa-how > summary::after {
	content: " +";
}
.esaa-how[open] > summary::after {
	content: " \2212";
}