/*
 * Zosimo Superpowered — site audit states and report card.
 *
 * The audit machinery (js/site-audit.js) already worked on the old site; this
 * file is its reskin, not a rebuild. Three things are in here:
 *
 *   1. The three post-submit states — loading, error — restyled for design's
 *      dark section. The old values assumed a light ground.
 *   2. The loader, copied verbatim. Self-contained, no tokens.
 *   3. The report card, copied verbatim from the old style.css lines
 *      2607-3092, including its eight scoped --za-* custom properties.
 *
 * WHY THE REPORT CARD IS STILL LIGHT. It is a light island sitting on the dark
 * audit section, which is what the old build did deliberately — Lisa's source
 * mockup is a standalone light page. It carries ~24 hard-coded colours,
 * including the pass / warn / fail status colours, all tuned for a light
 * surface. Flipping it to design's dark card would mean inventing a dark
 * equivalent for each of those, and design's 2026-08-29 build has no results
 * state in it at all, so there is nothing to copy from. Left light, on
 * purpose. If Lisa wants it dark that is a design pass, not a find-replace.
 *
 * Everything below the state block is byte-identical to the old stylesheet.
 * Keep it that way so the two can still be diffed.
 */

/* ---- post-submit states -------------------------------------------------- */

/*
 * The loading and results containers are display:flex/block, which beats the
 * `hidden` attribute the script toggles. Without this they are visible from
 * first paint. This is why the old stylesheet carried the same guard.
 */
#audit [hidden] {
  display: none !important;
}

/* 55px is design's own lead-to-card gap (.signup .card, patterns.css:306).
   Reused rather than chosen so the three states share one rhythm. */
.zosimo-audit__loading,
.zosimo-audit__results {
	margin-top: 55px;
}

.zosimo-audit__loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	min-block-size: 85px;
}

.zosimo-audit__loading-text,
.zosimo-audit__error {
	margin: 0;
	font-size: 16px;
	line-height: 25px;
	text-align: center;
	color: var(--ink-body);          /* was #25252d — light-ground value */
}

.zosimo-audit__error {
	color: var(--pink);
}


/* ---- loader (verbatim, self-contained) ----------------------------------- */

/* Loader — copied verbatim from .claude/docs/site audit code/zosimo-loader-demo.html
   between its "ZOSIMO LOADER" markers. Class prefix kept as handed off. */

.dp-loader {
	position: relative;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: linear-gradient(90deg, var(--accent-fill) 0%, var(--accent) 100%);
	/* was a hard-coded coral. --accent is set per panel by page.js, so this
	   now follows the section it is in instead of the old brand. */
}

.dp-loader__orbit {
	position: absolute;
	inset: 0;
	transform-origin: 50% 50%;
	animation: dp-orbit 2s linear infinite;
}

.dp-loader__ball {
	position: absolute;
	width: 40%;
	height: 40%;
	left: 50%;
	top: 9.36%;
	border-radius: 50%;
	background: #fff;
}

.dp-loader--lg { width: 96px; height: 96px; }
.dp-loader--sm { width: 32px; height: 32px; }

@keyframes dp-orbit {
	0%   { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); }
	75%  { transform: rotate(360deg); }
	100% { transform: rotate(360deg); }
}

@keyframes dp-orbit-reduced {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.dp-loader__orbit {
		animation: dp-orbit-reduced 2.4s linear infinite;
	}
}


/* ---- report card (verbatim from old style.css 2607-3092) ----------------- */
/* AUDIT REPORT CARD — 161:21111 */

/*
 * Ported from Lisa's zosimo_audit_results.html. Her `:root` custom properties
 * and bare `*` reset are scoped here instead of going global, her Google Fonts
 * link is dropped (the parent self-hosts Figtree), and three colours were
 * darkened for AA — see figma-pull-log.md.
 *
 * ASSUMED: the mockup is a light standalone page; rendered inline it sits in the
 * dark audit section, so it gets its own light ground.
 */
.zosimo-audit__results {
	--za-ink: #1a1a1a;
	--za-gray: #4d4d4d;
	--za-gray2: #5e5e6a;
	--za-card: #f5f6f8;
	--za-white: #fff;
	--za-border: rgba(37, 37, 45, 0.2);
	--za-border-soft: rgba(94, 94, 106, 0.2);
	--za-track: #e6e8ec;
	--za-radius: 20px;

	max-inline-size: 1240px;
	margin-inline: auto;
	padding: 24px 20px 32px;
	border-radius: var(--za-radius);
	background-color: var(--za-white);
	color: var(--za-ink);
	line-height: 1.45;
	text-align: start;
}

.zosimo-audit__results * {
	box-sizing: border-box;
}

.zosimo-audit__results:focus {
	outline: none;
}

/* ASSUMED: pill scaled to the card's 13px eyebrow rather than its 18px default. */
.zosimo-audit__results .zosimo-overline {
	margin-block-end: 6px;
	padding: 8px 16px;
	background-color: rgba(37, 37, 45, 0.08);
	font-size: 13px;
	letter-spacing: 1.2px;
	color: #25252d;
}

.za-intro {
	margin: 8px 0 24px;
	text-align: center;
}

.za-intro .stamp {
	margin: 0 0 8px;
	font-size: 12px;
	color: var(--za-gray2);
}

.za-intro .thanks {
	margin: 0 0 4px;
	font-size: 20px;
	font-weight: 700;
}

.za-intro .sub {
	margin: 0;
	font-size: 16px;
	color: var(--za-gray);
}

.za-card {
	border: 1px solid var(--za-border);
	border-radius: var(--za-radius);
	background: var(--za-card);
}

.za-card.white {
	border-color: var(--za-border-soft);
	background: var(--za-white);
}

.za-hero {
	display: flex;
	gap: 26px;
	align-items: center;
	margin-block-end: 16px;
	padding: 29px 27px;
}

.za-badge {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	inline-size: 132px;
	block-size: 132px;
	border: 3px solid;
	border-radius: 50%;
	text-align: center;
}

.za-badge .g {
	font-size: 52px;
	font-weight: 800;
	line-height: 1;
}

.za-badge .s {
	margin-block-start: 4px;
	font-size: 13px;
	color: var(--za-gray2);
}

.za-hero .headline {
	margin: 0 0 10px;
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -0.5px;
	word-break: break-word;
}

.za-hero .oneliner {
	max-inline-size: 66ch;
	margin: 0;
	font-size: 16px;
	color: var(--za-gray);
}

/* Degraded-scan note. Hidden by default; renderAudit() sets display: block when
   degradedNote is present. #5e5e6a on the #f5f6f8 panel is 5.91:1. */
.za-hero .degraded {
	display: none;
	max-inline-size: 66ch;
	margin-block-start: 8px;
	font-size: 13px;
	font-style: italic;
	color: var(--za-gray2);
}

.za-designux {
	margin-block-end: 16px;
	padding: 26px 28px;
}

.za-designux h3 {
	margin: 0 0 10px;
	font-size: 20px;
	font-weight: 700;
}

.za-designux p {
	max-inline-size: 80ch;
	margin: 0;
	font-size: 15px;
	color: var(--za-gray);
}

/* stretch, not flex-start: flex-start left each column at its own content
   height, so the two columns ended at different points down the page. */
.za-cols {
	display: flex;
	gap: 16px;
	align-items: stretch;
	margin-block-end: 16px;
}

.za-col {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 16px;
	min-inline-size: 0;
}

/* flex: 1 1 auto keeps each box's own content height as its basis and then
   shares the leftover space between them — so the boxes stay different
   heights, as drawn, but the column finishes flush at the bottom. */
.za-pillar {
	flex: 1 1 auto;
	padding: 21px;
}

.za-pillar .top {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	margin-block-end: 14px;
}

.za-pillar .name {
	display: flex;
	gap: 10px;
	align-items: center;
	font-size: 17px;
	font-weight: 700;
}

.za-icon {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	inline-size: 26px;
	block-size: 26px;
	border-radius: 50%;
}

.za-icon svg {
	inline-size: 14px;
	block-size: 14px;
	fill: #fff;
}

.za-score {
	font-weight: 800;
	white-space: nowrap;
}

.za-score .num {
	font-size: 30px;
}

.za-score .den {
	margin-inline-start: 1px;
	font-size: 14px;
	font-weight: 600;
	color: var(--za-gray2);
}

.za-bar {
	overflow: hidden;
	block-size: 8px;
	margin: 0 0 14px;
	border-radius: 6px;
	background: var(--za-track);
}

.za-bar > span {
	display: block;
	block-size: 100%;
	border-radius: 6px;
}

.za-why {
	margin: 0;
	font-size: 14px;
	color: var(--za-gray);
}

.za-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-block-start: 14px;
}

.za-chip {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	padding: 5px 12px;
	border: 1px solid rgba(37, 37, 45, 0.08);
	border-radius: 999px;
	background: var(--za-white);
	font-size: 13px;
	font-weight: 600;
	color: var(--za-gray);
}

.za-chip.warn {
	border-color: rgba(187, 113, 29, 0.3);
	background: rgba(241, 0, 64, 0.05);
	color: #b22233;
}

.za-callout {
	margin-block-start: 14px;
	padding: 13px 15px;
	border: 1px solid rgba(187, 113, 29, 0.25);
	border-radius: 12px;
	background: rgba(241, 0, 64, 0.05);
}

.za-callout p {
	margin: 0;
	font-size: 13.5px;
	color: #7a2f3a;
}

/* menuIndexable "Partial" — menu is real text but carries no prices. Softer
   than the red. #7a5a1d on the blended amber is 5.65:1, so Lisa's value holds. */
.za-callout.soft {
	border-color: rgba(187, 113, 29, 0.3);
	background: rgba(255, 228, 124, 0.22);
}

.za-callout.soft p {
	color: #7a5a1d;
}

.za-adalist {
	margin: 14px 0 12px;
	padding: 0;
	list-style: none;
}

.za-adalist li {
	position: relative;
	padding: 6px 0 6px 20px;
	border-block-end: 1px solid var(--za-border);
	font-size: 14px;
	color: var(--za-gray);
}

/* Decorative marker; the item text carries the meaning. */
.za-adalist li::before {
	content: "•";
	position: absolute;
	inset-inline-start: 4px;
	inset-block-start: 6px;
	font-weight: 700;
	color: #f75451;
}

/* The `.faded` treatment is gone deliberately — see figma-pull-log.md,
   2026-08-17. It rendered real text below the contrast threshold. */
.za-adalist li:last-child {
	border-block-end: none;
}

/* Lisa's #f10040 is 4.03:1 at 14px — same fix already applied in pricing. */
.za-consult {
	display: block;
	margin: 4px 0 0;
	font-size: 14px;
	font-weight: 600;
	color: #5e5e6a;
}

/* REPORT ACTIONS — geometry from 188:24150; colours diverge, see below.
   Lisa's frame places these on the coral section ground. In the build they
   render inside `.zosimo-audit__panel` (#f5f6f8) along with the form, loader
   and results, so her white-pill/ghost pairing does not survive the move. */

.za-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0 16px;
	align-items: stretch;
	justify-content: center;
	padding-block-start: 36px;
}

/*
 * SUPERSEDED 2026-08-30. The old rules here read:
 *
 *   "Lisa's white-pill primary and ghost secondary are drawn for the coral
 *    section ground... Amy's call: coral primary, outline secondary."
 *
 * That call was correct for its premise — these buttons sat inside a #f5f6f8
 * panel on a coral section. They now sit on design's near-black void, where a
 * #25252d outline button is effectively invisible: Amy caught exactly that on
 * the first live submission.
 *
 * So the styling is deleted rather than retuned. Both buttons take design's
 * own .btn, whose background is driven by --accent — which page.js sets per
 * panel, so on this sky-accented section they resolve blue with no value
 * written here. .za-actions keeps the layout only.
 *
 * Classes are applied in template-parts/panels/audit.php:
 *   book  -> class="btn btn--solid za-actions__book"
 *   reset -> class="btn za-actions__reset"
 */

/* The book link is an <a>; design's .btn sets colour but visited state still
   needs claiming or it goes purple in some browsers. */
.za-actions__book:is(:link, :visited) {
	color: #fff;
	text-decoration: none;
}


@media (max-width: 767px) {

	.za-actions {
		flex-direction: column;
		gap: 12px;
	}
}

.za-subs {
	display: flex;
	gap: 18px;
	margin-block-start: 2px;
}

.za-sub {
	flex: 1;
	min-inline-size: 0;
}

.za-sub .lbl {
	margin-block-end: 3px;
	font-size: 13px;
	font-weight: 600;
	color: var(--za-gray2);
}

.za-sub .v {
	font-size: 22px;
	font-weight: 700;
}

.za-ai {
	display: flex;
	gap: 26px;
	align-items: center;
	padding: 29px 27px;
}

.za-ai .copy h3 {
	margin: 0 0 6px;
	font-size: 20px;
	font-weight: 700;
}

.za-ai .copy .desc {
	max-inline-size: 82ch;
	margin: 0 0 10px;
	font-size: 15px;
	color: var(--za-gray);
}

.za-ai .copy .note {
	margin: 0 0 4px;
	font-size: 13.5px;
	color: #b22233;
}

/* Lisa's #36996b is 3.54:1 on white at this size — darkened to 5.04:1. */
.za-ai .copy .fix {
	margin: 0;
	font-size: 13.5px;
	font-weight: 600;
	color: #2a7d57;
}

@media (max-width: 820px) {

	.za-cols {
		flex-direction: column;
	}

	.za-hero,
	.za-ai {
		flex-direction: column;
		text-align: center;
	}

	.za-hero .oneliner,
	.za-designux p,
	.za-ai .copy .desc {
		max-inline-size: 100%;
	}

	.zosimo-audit__results .zosimo-overline {
		margin-inline: auto;
	}
}