/*
 * COBOL PARK レガシーリスク診断 — public stylesheet.
 *
 * Everything is scoped under `.cpld`. Two reasons:
 *   1. The custom properties are declared on `.cpld`, not `:root`, so the
 *      plugin cannot recolour the rest of the theme.
 *   2. The survey renders inside the theme's `#container`, so `main-style.css`
 *      already has rules for `input`, `button`, `a`, `h1`-`h3` and `ul`. Those
 *      are neutralised with specific selectors rather than `!important`, so a
 *      future theme change can still win where it should.
 *
 * Colour values and geometry come from the design mock
 * (Legacy Risk Assessment.dc.html).
 */

/* ---------------------------------------------------------------- tokens */

.cpld {
	--cpld-navy: #1a2a6e;
	--cpld-navy-deep: #12185c;
	--cpld-navy-ink: #0e2350;
	--cpld-accent: #f2793c;
	--cpld-accent-hover: #d85f24;
	/*
	 * The brand orange is a fill colour. White on #f2793c is 2.8:1, so the CTA
	 * button and the "top priority" line — the two things on the result page a
	 * customer must be able to read — both failed AA. This darker step keeps the
	 * hue and clears 4.5:1 both as a background for white text and as text on
	 * white.
	 */
	--cpld-accent-ink: #bd5219;
	--cpld-accent-ink-hover: #9e430f;
	--cpld-teal-1: #1fb6c9;
	--cpld-teal-2: #5ce1e6;
	--cpld-teal-3: #8fe9ec;

	--cpld-bg: #f5f6f8;
	--cpld-card: #ffffff;
	--cpld-border: #e6e8ef;
	--cpld-line: #e2e5ee;
	--cpld-text: #1c2340;
	--cpld-muted: #6b7280;
	/* Placeholders here carry worked examples (「IMS、DB2 など」), so they are
	 * content to read, not decoration: 4.8:1 rather than the old 2.6:1. */
	--cpld-placeholder: #6b7280;
	--cpld-selected-bg: #eef1fb;
	--cpld-disabled: #c7cbdb;

	--cpld-rank-a: #1fa060;
	--cpld-rank-b: #1fb6c9;
	--cpld-rank-c: #f2a63c;
	--cpld-rank-d: #d64545;

	/*
	 * --cpld-rank-d is a fill colour: as a rank badge or an invalid border it
	 * only has to clear 3:1, which it does. As *text* it lands at 4.4:1 on white
	 * and 4.1:1 on the alert's pink, both under AA. Error copy uses this darker
	 * red instead, so the two roles can be tuned apart.
	 */
	--cpld-error-text: #c0392b;

	/* Input borders are a UI boundary: WCAG 1.4.11 wants 3:1, not the 1.4:1 the
	 * original #d7dae3 gave. */
	--cpld-input-border: #8b91a4;

	--cpld-radius: 10px;
	--cpld-radius-lg: 12px;
	--cpld-radius-pill: 20px;

	/*
	 * Two widths, not three. The survey is one flow — intro, the form, twenty-one
	 * questions — and it reads as one flow only while the shell stays put; a
	 * third value in the middle just made the frame twitch on the way through.
	 *
	 * 診断結果 is the exception because it is a different layout, not the same
	 * one stretched: .cpld-result is a `1fr 260px` grid with the radar chart in
	 * the second track, and at the narrow width its first column has barely
	 * 300px left for the score, the rank and the worst-debt line.
	 */
	--cpld-shell-narrow: 640px;
	--cpld-shell-wide: 820px;

	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
	color: var(--cpld-text);
	background: var(--cpld-bg);
	line-height: 1.7;
	/*
	 * The survey has one palette, light. Without this the OS dark preference
	 * repaints the parts the browser draws itself — the 業種 dropdown's popup
	 * list above all — dark, against a form that stays white.
	 */
	color-scheme: light;
}

/* ----------------------------------------------------------------- reset */

/*
 * Scoped, targeted resets for what the theme styles globally. Kept short on
 * purpose: anything not listed here is inherited from the theme deliberately.
 *
 * The element resets go inside `:where()` so they carry zero specificity of
 * their own. `.cpld h1` would score (0,1,1) and silently beat every single
 * class below it — `.cpld-chips { margin-bottom }` and friends would never
 * apply. With `:where()` the reset still outranks the theme's bare `h1` / `ul`
 * selectors, but loses to anything this stylesheet says afterwards.
 */
.cpld *,
.cpld *::before,
.cpld *::after {
	box-sizing: border-box;
}

.cpld :where(h1, h2, h3, p, ul, ol, figure) {
	margin: 0;
	padding: 0;
}

.cpld :where(ul, ol) {
	list-style: none;
}

.cpld a {
	color: var(--cpld-accent);
	text-decoration: none;
}

.cpld a:hover {
	color: var(--cpld-accent-hover);
	text-decoration: underline;
}

.cpld input,
.cpld select,
.cpld textarea,
.cpld button {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

/* ---------------------------------------------------------------- layout */

.cpld-section {
	padding: 56px 24px 72px;
}

/*
 * The narrow shell is the default, so a screen that forgets its modifier comes
 * out the same width as the rest of the flow rather than a size of its own.
 * That is exactly how 設問 ended up 40px wider than the form it follows.
 */
.cpld-section > *,
.cpld-section--narrow > * {
	max-width: var(--cpld-shell-narrow);
	margin-inline: auto;
}

.cpld-section--wide > * {
	max-width: var(--cpld-shell-wide);
}

/*
 * `.cpld-fieldset`'s own `margin: 0 0 26px` sets margin-left/right to 0 at the
 * same specificity as `margin-inline: auto` above, and wins on source order —
 * so a fieldset placed directly in a section (the legal notice on 診断結果,
 * not nested inside a card) hugged the section's padding instead of centering
 * with everything else. One extra class in the selector is enough to win.
 */
.cpld-section > .cpld-fieldset {
	margin-inline: auto;
}

/* --------------------------------------------------------------- buttons */

.cpld .cpld-btn {
	display: inline-block;
	border: none;
	border-radius: 8px;
	padding: 14px 36px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.cpld .cpld-btn:hover {
	text-decoration: none;
}

.cpld .cpld-btn--primary {
	background: var(--cpld-navy);
	color: #fff;
}

.cpld .cpld-btn--primary:hover {
	background: var(--cpld-navy-ink);
	color: #fff;
}

.cpld .cpld-btn--lg {
	padding: 16px 44px;
	font-size: 16px;
	box-shadow: 0 8px 24px rgba(26, 42, 110, 0.35);
}

.cpld .cpld-btn--block {
	display: block;
	width: 100%;
}

.cpld .cpld-btn--accent {
	background: var(--cpld-accent-ink);
	color: #fff;
}

.cpld .cpld-btn--accent:hover {
	background: var(--cpld-accent-ink-hover);
	color: #fff;
}

/*
 * Horizontal padding, so the 戻る button is a button. With `padding: 14px 0` it
 * came out 42px wide — under the 44px minimum, and visually a text link sitting
 * next to a 192px primary button.
 */
.cpld .cpld-btn--ghost {
	background: transparent;
	color: var(--cpld-muted);
	padding: 14px 18px;
	min-width: 88px;
	font-size: 13px;
}

.cpld .cpld-btn--ghost:hover {
	background: transparent;
	color: var(--cpld-text);
	text-decoration: underline;
}

.cpld .cpld-btn[disabled] {
	background: var(--cpld-disabled);
	color: #fff;
	cursor: not-allowed;
	box-shadow: none;
}

.cpld .cpld-btn:focus-visible {
	outline: 3px solid rgba(26, 42, 110, 0.45);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ hero */

.cpld-hero {
	background: linear-gradient(120deg, var(--cpld-teal-1) 0%, var(--cpld-teal-2) 55%, var(--cpld-teal-3) 100%);
	padding: 64px 24px 72px;
	text-align: center;
}

.cpld-hero__inner {
	max-width: 760px;
	margin-inline: auto;
}

/*
 * Navy on a near-opaque white pill, not white on a 25% white pill. The latter
 * sat at roughly 1.7:1 against the teal gradient — the eyebrow was legible in
 * the mock only because the mock's backdrop was darker.
 */
.cpld-hero__eyebrow {
	display: inline-block;
	background: rgba(255, 255, 255, 0.7);
	color: var(--cpld-navy-ink);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 6px 16px;
	border-radius: var(--cpld-radius-pill);
	margin-bottom: 22px;
}

.cpld .cpld-hero__title {
	font-size: clamp(26px, 5vw, 38px);
	font-weight: 900;
	color: var(--cpld-navy-ink);
	line-height: 1.5;
	margin-bottom: 20px;
}

.cpld-hero__lead {
	font-size: 15px;
	line-height: 2;
	color: #123055;
	margin-bottom: 32px;
	text-align: left;
}

.cpld-hero__action {
	margin-top: 8px;
}

.cpld-hero__effort {
	font-size: 13px;
	font-weight: 700;
	color: #123055;
	margin-top: 14px;
}

/* ----------------------------------------------------------------- steps */

.cpld .cpld-steps__heading {
	font-size: 18px;
	font-weight: 900;
	color: var(--cpld-navy);
	text-align: center;
	margin-bottom: 20px;
}

.cpld-steps {
	display: grid;
	gap: 10px;
	margin-bottom: 28px;
}

.cpld-steps__item {
	display: flex;
	align-items: baseline;
	gap: 14px;
	background: var(--cpld-card);
	border: 1px solid var(--cpld-border);
	/* The accent stays as a rule, where it carries no reading burden. */
	border-left: 3px solid var(--cpld-accent);
	border-radius: var(--cpld-radius);
	padding: 14px 18px;
}

/* Navy, not accent: #f2793c on white is 2.8:1, well under AA for 12px text. */
.cpld-steps__no {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 0.04em;
	color: var(--cpld-navy);
}

.cpld-steps__body {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 12px;
	min-width: 0;
}

/*
 * The debt name reads as a label, the question as the content. Same pill shape
 * the hero chips used, so nothing about the visual vocabulary was lost by
 * folding the two blocks together.
 */
.cpld-steps__debt {
	flex: 0 0 auto;
	/* Fixed width so the five questions start on one column, not a ragged edge. */
	min-width: 84px;
	background: var(--cpld-selected-bg);
	color: var(--cpld-navy);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	padding: 3px 12px;
	border-radius: var(--cpld-radius-pill);
	text-align: center;
	white-space: nowrap;
}

.cpld-steps__title {
	font-size: 14px;
	font-weight: 700;
}

.cpld-steps__action {
	margin-bottom: 28px;
	text-align: center;
}

/*
 * Darker than --cpld-muted on purpose: notes sit on --cpld-bg (#f5f6f8), where
 * the shared muted grey lands at 4.4:1 — just under AA.
 */
.cpld-note {
	font-size: 13px;
	line-height: 2;
	color: #5b6270;
	text-align: center;
}

/* ----------------------------------------------------------------- cards */

.cpld-card {
	background: var(--cpld-card);
	border: 1px solid var(--cpld-border);
	border-radius: var(--cpld-radius-lg);
	padding: 44px;
}

.cpld .cpld-card__title {
	font-size: 24px;
	font-weight: 900;
	color: var(--cpld-navy);
	margin-bottom: 12px;
}

.cpld-card__body {
	font-size: 14px;
	line-height: 1.9;
	color: var(--cpld-muted);
	margin-bottom: 24px;
}

.cpld-card__action {
	margin-top: 28px;
}

.cpld-card--message {
	text-align: center;
}

/* ------------------------------------------------------- accessibility */

.cpld-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ----------------------------------------------------------------- forms */

.cpld-fieldset {
	border: none;
	margin: 0 0 26px;
	padding: 0;
	min-width: 0; /* Firefox gives fieldsets an implicit min-width. */
}

/* A rule between the groups: at 13px the legend read as one more field label,
 * so 担当者 / 対象システム / システム構成 did not look like separate sections. */
.cpld-fieldset + .cpld-fieldset {
	border-top: 1px solid var(--cpld-line);
}

.cpld .cpld-fieldset__legend {
	font-size: 14px;
	font-weight: 900;
	color: var(--cpld-navy);
	letter-spacing: 0.04em;
	padding: 0 0 14px;
}

/*
 * The space above the legend has to come from the legend itself. A legend sits
 * outside the fieldset's padding box, so `padding-top` on the fieldset opens a
 * gap *below* the legend instead — which is how the rule ended up crowding the
 * heading while pushing the fields away from it.
 */
.cpld-fieldset + .cpld-fieldset > .cpld-fieldset__legend {
	padding-top: 24px;
}

/*
 * The 「（任意）」 groups collapse, so their heading is a <summary> and has to
 * carry the affordance a legend never needed: a hit area, a pointer, a chevron
 * and a focus ring.
 */
.cpld .cpld-fieldset__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	/* With the 24px above, this clears the 44px minimum on its own. */
	min-height: 24px;
	cursor: pointer;
	/* The default triangle sits on the wrong side and is not the form's icon. */
	list-style: none;
	border-radius: 6px;
	transition: color 0.15s ease;
}

.cpld .cpld-fieldset__toggle::-webkit-details-marker {
	display: none;
}

.cpld .cpld-fieldset__toggle::after {
	content: "";
	flex: 0 0 auto;
	width: 12px;
	height: 8px;
	/* Same chevron, same 1.6px stroke as the 業種 select. */
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%231a2a6e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 12px 8px;
	transition: transform 0.15s ease;
}

.cpld .cpld-fieldset--optional[ open ] > .cpld-fieldset__toggle::after {
	transform: rotate(180deg);
}

.cpld .cpld-fieldset__toggle:hover {
	color: var(--cpld-navy-deep);
}

.cpld .cpld-fieldset__toggle:focus-visible {
	outline: 2px solid var(--cpld-navy);
	outline-offset: 3px;
}

/*
 * Closed, the group is one line of text. The 14px meant for separating a
 * heading from its fields becomes a lopsided gap, so it matches the 24px above
 * instead and the margin between groups goes — 24 + 24 keeps consecutive closed
 * headings evenly spaced.
 */
.cpld .cpld-fieldset--optional:not( [ open ] ) {
	margin-bottom: 0;
}

.cpld .cpld-fieldset--optional:not( [ open ] ) > .cpld-fieldset__toggle {
	padding-bottom: 24px;
}

/*
 * Introduces the four optional sections below it. It sits between a closed
 * group's 24px bottom padding and the next heading, so it carries no top margin
 * of its own.
 */
.cpld .cpld-fieldset-note {
	margin: 0 0 20px;
	font-size: 13px;
	line-height: 1.8;
	color: var(--cpld-muted);
}

.cpld-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.cpld-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.cpld-field--span2 {
	grid-column: span 2;
}

.cpld-field__label {
	font-size: 13px;
	font-weight: 700;
	color: var(--cpld-text);
}

.cpld-field__required {
	color: var(--cpld-error-text);
}

.cpld .cpld-field__input {
	width: 100%;
	border: 1px solid var(--cpld-input-border);
	border-radius: 6px;
	padding: 10px 12px;
	font-size: 14px;
	/*
	 * Stated rather than left at `normal`. A `<select>` computes `normal` from
	 * its own font metrics and lands on 44px while the text inputs land on
	 * 45.8px, so the two controls in one grid row sat 2px apart. One number
	 * here keeps every control the same height and the label baselines level.
	 */
	line-height: 1.7;
	background: #fff;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/*
 * The error summary links at the control itself, because that is what focus
 * and `aria-describedby` hang off. A bare anchor parks the target's top edge
 * at y=0 — underneath a sticky header — and the customer arrives at an input
 * with its <label> cut off above the fold, unable to tell which field is being
 * complained about. The header plus 3.5rem brings the label, the control and
 * its error line into view together.
 *
 * On the element rather than `scroll-padding-top` on `html`: this stylesheet
 * also loads on any theme page carrying the start-button shortcode, and it
 * does not get to change how that page scrolls. `scroll-margin-top` covers
 * anchor navigation and `scrollIntoView()` alike, which is what the progress
 * bar's two rules below already rely on.
 */
.cpld .cpld-field__input,
.cpld .cpld-consent__input {
	scroll-margin-top: calc(var(--cpld-header-h) + 2.5rem);
}

.cpld .cpld-field__input::placeholder {
	color: var(--cpld-placeholder);
}

.cpld .cpld-field__input:hover:not(:disabled) {
	border-color: var(--cpld-navy);
}

.cpld .cpld-field__input:focus-visible {
	border-color: var(--cpld-navy);
	box-shadow: 0 0 0 3px rgba(26, 42, 110, 0.12);
}

/*
 * The 業種・業態 dropdown. The text inputs already run `appearance: none`, so
 * leaving the select on `auto` meant one control in the row wore the browser's
 * own chrome — grey gradient arrow, its own metrics, a text cursor — next to
 * five that wore the design system's. The arrow below is the same chevron at
 * the same stroke weight as the rest of the form.
 */
.cpld select.cpld-field__input {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	/*
	 * 36px, not the 12px the inputs use: 「電力・ガス・エネルギー」 is the longest
	 * choice and the column is only 266px wide, so the text would otherwise run
	 * under the chevron.
	 */
	padding-right: 36px;
	text-overflow: ellipsis;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 12px 8px;
}

/*
 * The placeholder option is matched directly rather than through `:invalid`,
 * which would paint the select red-adjacent from first paint now that 業種 is
 * required. This gives the unanswered select the same muted grey the text
 * inputs' placeholders use, instead of reading as a filled-in answer.
 */
.cpld select.cpld-field__input:has( option[ value='' ]:checked ) {
	color: var(--cpld-placeholder);
}

/* The muted colour above is inherited by the popup list otherwise. */
.cpld select.cpld-field__input option {
	color: var(--cpld-text);
}

.cpld-field--invalid .cpld-field__input {
	border-color: var(--cpld-rank-d);
}

.cpld-field__error {
	font-size: 12px;
	font-weight: 700;
	color: var(--cpld-error-text);
}

/* ---------------------------------------------------------- legal notice */

/*
 * Collapsed by default (`.cpld-fieldset--optional`, shared with the optional
 * 基本情報 groups above), because this is boilerplate a customer skims once,
 * not something to force between the fields and the consent checkbox. The
 * scroll box keeps a long disclaimer from pushing the checkbox off the first
 * screen once it is opened.
 */
.cpld-legal {
	max-height: 260px;
	overflow-y: auto;
	margin-top: 4px;
	padding: 14px 16px;
	border: 1px solid var(--cpld-line);
	border-radius: 8px;
	font-size: 12px;
	line-height: 1.8;
	color: var(--cpld-muted);
}

.cpld-legal__heading {
	margin: 16px 0 6px;
	font-size: 13px;
	font-weight: 900;
	color: var(--cpld-navy);
}

.cpld-legal__heading:first-child {
	margin-top: 0;
}

.cpld-legal__subheading {
	margin: 10px 0 2px;
	font-weight: 700;
	color: #4b5163;
}

.cpld-legal__text {
	margin: 0 0 6px;
}

.cpld-legal__text a {
	color: var(--cpld-navy);
	text-decoration: underline;
}

/* --------------------------------------------------------------- consent */

.cpld-consent {
	margin: 4px 0 26px;
}

/*
 * min-height, not a bigger checkbox: the label is the hit area, and on a wide
 * screen the consent text fits one 23px line — under the 44px minimum. It only
 * passed on a phone because the text happened to wrap.
 */
.cpld-consent__label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-height: 44px;
	padding-block: 10px;
	font-size: 13px;
	line-height: 1.8;
	cursor: pointer;
}

.cpld-consent__input {
	margin-top: 4px;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	accent-color: var(--cpld-navy);
}

.cpld-consent--invalid {
	border-left: 3px solid var(--cpld-rank-d);
	padding-left: 12px;
}

/* --------------------------------------------------------------- alerts */

.cpld-alert {
	background: #fff5f5;
	border: 1px solid #f4c7c7;
	border-radius: var(--cpld-radius);
	padding: 16px 18px;
	margin-bottom: 24px;
}

.cpld-alert__title {
	font-size: 13px;
	font-weight: 900;
	color: var(--cpld-error-text);
	margin-bottom: 6px;
}

.cpld-alert__body,
.cpld-alert__list {
	font-size: 13px;
	line-height: 1.9;
	color: var(--cpld-text);
}

.cpld-alert__list li::before {
	content: "・";
}

/* Each summary line jumps to the control it names. The accent orange the
 * stylesheet gives links elsewhere is 2.2:1 on this pink. */
.cpld .cpld-alert__list a {
	color: var(--cpld-error-text);
	text-decoration: underline;
}

.cpld .cpld-alert__list a:hover {
	color: var(--cpld-error-text);
}

/* ------------------------------------------------------------- progress */

/*
 * The bar sticks below the theme's own sticky header.
 *
 * A question step is 3600-4000px tall, so the bar scrolled out of view within
 * the first question and the customer spent the rest of the step with no idea
 * how far along they were.
 *
 * `--cpld-header-h` is how tall the theme's sticky header is. cobolpark_new
 * publishes its own height as `--header-h` on `:root` (72px, 64px at 767px and
 * below) and that inherits down to here, so the value tracks the real header
 * across every breakpoint by itself. The literals are the fallback for a theme
 * that publishes nothing — they are the `#header` of the older main-style.css
 * (80px, 60px under 1100px). If both are wrong the bar simply parks a little
 * high or low — it does not break.
 */
.cpld {
	--cpld-header-h: var(--header-h, 80px);
}

.cpld-progress {
	position: sticky;
	top: var(--cpld-header-h);
	z-index: 2;
	/* Opaque, or question text scrolls through it. */
	background: var(--cpld-bg);
	padding: 12px 0 10px;
	margin-bottom: 24px;
	/* A hint of depth, so the cards read as passing underneath rather than
	 * being cut off by a grey band. */
	box-shadow: 0 8px 12px -10px rgba(28, 35, 64, 0.5);
}

@media (max-width: 1100px) {
	.cpld {
		--cpld-header-h: var(--header-h, 60px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cpld-progress__fill {
		transition: none;
	}
}

.cpld-progress__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	font-size: 13px;
	margin-bottom: 8px;
}

.cpld-progress__label {
	font-weight: 700;
	color: var(--cpld-navy);
}

.cpld-progress__count {
	color: var(--cpld-muted);
}

.cpld-progress__here {
	font-weight: 700;
	color: var(--cpld-navy);
}

.cpld-progress__track {
	height: 18px;
	background: var(--cpld-line);
	border-radius: 9px;
	overflow: hidden;
}

.cpld-progress__fill {
	height: 100%;
	min-width: 28px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	background: linear-gradient(90deg, var(--cpld-navy), var(--cpld-teal-1));
	border-radius: 9px;
	transition: width 0.25s ease;
}

/* At 0% there is nothing to fill yet — the min-width above would otherwise
 * force a colored pill onto an empty bar, reading as false progress. */
.cpld-progress__fill--empty {
	min-width: 0;
	background: none;
}

.cpld-progress__percent {
	padding: 0 8px;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	white-space: nowrap;
}

.cpld-progress__fill--empty .cpld-progress__percent {
	color: var(--cpld-muted);
}

/* ---------------------------------------------------------------- panels */

/*
 * One category per panel. All five are in the DOM; the script hides the four
 * it is not showing.
 *
 * `[hidden]` has to be spelled out: the user-agent rule for the attribute is
 * only `display: none` at zero specificity, so `.cpld .cpld-btn { display:
 * inline-block }` further up this file beats it and a hidden 戻る button would
 * still be drawn.
 */
.cpld .cpld-panel[hidden],
.cpld .cpld-btn[hidden] {
	display: none;
}

/* ------------------------------------------------------------ step lead */

.cpld-steplead {
	margin-bottom: 20px;
}

.cpld .cpld-steplead__title {
	font-size: 18px;
	font-weight: 900;
	color: var(--cpld-navy);
	margin-bottom: 6px;
	/*
	 * Clear the theme header and the sticky progress bar when this heading is
	 * scrolled to on a category change. Without it the browser parks the
	 * heading exactly where the bar covers it.
	 */
	scroll-margin-top: calc(var(--cpld-header-h) + 84px);
}

/* It only takes focus so the step change is announced; no ring on arrival. */
.cpld .cpld-steplead__title:focus {
	outline: none;
}

.cpld .cpld-steplead__title:focus-visible {
	outline: 3px solid rgba(26, 42, 110, 0.45);
	outline-offset: 4px;
}

.cpld-steplead__body {
	font-size: 13px;
	line-height: 1.9;
	color: var(--cpld-muted);
}

/* ------------------------------------------------------------- question */

.cpld-question {
	background: var(--cpld-card);
	border: 1px solid var(--cpld-border);
	border-radius: var(--cpld-radius);
	padding: 24px 26px;
	margin: 0 0 16px;
	min-width: 0;
	/* Clears the sticky progress bar when a missing question is scrolled to,
	 * same reason as .cpld-steplead__title's scroll-margin-top. */
	scroll-margin-top: calc(var(--cpld-header-h) + 84px);
}

.cpld-question--missing {
	border-color: var(--cpld-rank-d);
}

/*
 * A <legend> is not laid out inside its fieldset's padding box — the browser
 * lifts it into the top border and shrink-wraps it there. So the card's 24px of
 * padding never reached the question text: every question sat astride the top
 * border, and the long ones wrapped to two lines that spilled clean out of the
 * card.
 *
 * Floating the legend drops it back into normal flow, where the padding applies
 * and `width: 100%` lets it wrap against the card instead of past it. The
 * fieldset stays a fieldset: it is a group of radios, and <legend> is what
 * names that group for a screen reader.
 */
.cpld .cpld-question__text {
	float: left;
	width: 100%;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.7;
	color: var(--cpld-text);
	padding: 0;
	margin: 0 0 6px;
}

/* Everything after it has to clear the float, or the options column tries to
 * sit beside the question and collapses to a strip down the right. */
.cpld-question > *:not( legend ) {
	clear: both;
}

.cpld-question::after {
	content: "";
	display: block;
	clear: both;
}

.cpld-question__hint {
	font-size: 12px;
	line-height: 1.8;
	color: var(--cpld-muted);
	margin-bottom: 14px;
}

/*
 * A grid, not a wrapping flex row. Each option carries its own sentence and
 * those run from 2 to 10 Japanese characters, so content-sized chips came out
 * 110px to 214px wide and every 設問 wrapped at a different place — 3+3 here,
 * 4+2 there. Equal tracks make the six read the same way on every question,
 * which is the whole point of a scale.
 *
 * The column count is set in the Analyzer layer below, together with its
 * breakpoints.
 */
.cpld-options {
	display: grid;
	gap: 8px;
	margin-top: 12px;
}

/* --------------------------------------------------------------- option */

.cpld-option {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	padding: 12px 14px;
	border: 1.5px solid var(--cpld-line);
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
	transition: background-color 0.12s ease, border-color 0.12s ease;
}

.cpld-option:hover {
	border-color: #c7cbdb;
}

/* The radio itself is hidden from sight but not from assistive technology. */
.cpld-option__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.cpld-option__dot {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid #c7cbdb;
	background: #fff;
	position: relative;
}

.cpld-option__dot::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: transparent;
}

/*
 * The digit, shown ahead of the full sentence in .cpld-option__label. Not
 * shown for 不明 — the label already spells that out, so a digit would
 * duplicate it.
 */
.cpld-option__points {
	flex: 0 0 auto;
	white-space: nowrap;
	font-size: 14px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.4;
	text-align: center;
	color: #4b5163;
}

.cpld-option__label {
	font-size: 13px;
	line-height: 1.6;
	color: #4b5163;
}

/*
 * Selected state twice over: the server-rendered modifier works everywhere,
 * and :has() keeps the styling correct when JavaScript is off and the customer
 * changes their answer without reloading.
 */
.cpld-option--selected,
.cpld-option:has(.cpld-option__input:checked) {
	border-color: var(--cpld-navy);
	background: var(--cpld-selected-bg);
	box-shadow: 0 0 0 3px rgba(26, 42, 110, 0.08);
}

.cpld-option--selected .cpld-option__dot,
.cpld-option:has(.cpld-option__input:checked) .cpld-option__dot {
	border-color: var(--cpld-navy);
}

.cpld-option--selected .cpld-option__dot::after,
.cpld-option:has(.cpld-option__input:checked) .cpld-option__dot::after {
	background: var(--cpld-navy);
}

.cpld-option--selected .cpld-option__label,
.cpld-option:has(.cpld-option__input:checked) .cpld-option__label,
.cpld-option--selected .cpld-option__points,
.cpld-option:has(.cpld-option__input:checked) .cpld-option__points {
	color: var(--cpld-navy);
	font-weight: 700;
}

.cpld-option:has(.cpld-option__input:focus-visible) {
	outline: 3px solid rgba(26, 42, 110, 0.45);
	outline-offset: 2px;
}

/* ------------------------------------------------------------ form nav */

.cpld-formnav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	margin: 24px 0px;
}

.cpld-note--tight {
	margin-top: 14px;
	line-height: 1.7;
}

/* ---------------------------------------------------------------- result */

.cpld .cpld-result__heading {
	text-align: center;
	font-size: 28px;
	font-weight: 900;
	color: var(--cpld-navy);
	margin-bottom: 32px;
}

.cpld-result {
	background: var(--cpld-card);
	border: 1px solid var(--cpld-border);
	border-radius: var(--cpld-radius-lg);
	padding: 36px;
	display: grid;
	grid-template-columns: 1fr 260px;
	gap: 36px;
	align-items: center;
	margin-bottom: 24px;
}

.cpld-score {
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin-bottom: 18px;
}

.cpld-score__label {
	font-size: 14px;
	font-weight: 700;
	color: var(--cpld-muted);
}

.cpld-score__value {
	font-size: 40px;
	font-weight: 900;
	color: var(--cpld-navy);
	line-height: 1.1;
}

.cpld-score__max {
	font-size: 16px;
	font-weight: 700;
	color: var(--cpld-placeholder);
}

.cpld-grade {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 22px;
}

/*
 * Dark ink on the rank colour, not white. White on the B and C fills measured
 * 2.5:1 and 2.0:1; navy clears AA on all four without touching the rank palette,
 * which is also used for bars and tags.
 */
.cpld-grade__letter {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	color: var(--cpld-navy-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	font-weight: 900;
}

.cpld-grade__letter--a { background: var(--cpld-rank-a); }
.cpld-grade__letter--b { background: var(--cpld-rank-b); }
.cpld-grade__letter--c { background: var(--cpld-rank-c); }
.cpld-grade__letter--d { background: var(--cpld-rank-d); }

.cpld-grade__text {
	display: flex;
	flex-direction: column;
}

.cpld-grade__rank {
	font-size: 15px;
	font-weight: 700;
}

.cpld-grade__note {
	font-size: 12px;
	color: var(--cpld-muted);
}

.cpld-priority__label {
	display: block;
	font-size: 13px;
	color: var(--cpld-muted);
	margin-bottom: 4px;
}

.cpld-priority__value {
	font-size: 18px;
	font-weight: 900;
	color: var(--cpld-accent-ink);
}

/* ----------------------------------------------------------------- radar */

.cpld-radar {
	margin: 0;
}

.cpld-radar__svg {
	width: 100%;
	height: auto;
	display: block;
}

/* ------------------------------------------------------------ debt bars */

.cpld-card--flush {
	padding: 30px 36px;
	margin-bottom: 24px;
}

.cpld .cpld-card__subtitle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	font-size: 15px;
	font-weight: 900;
	color: var(--cpld-navy);
	margin-bottom: 18px;
}

/* Used when the row carries a badge, so the h2 is only the heading text. */
.cpld .cpld-card__subtitle-text {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

.cpld-bar {
	margin-bottom: 18px;
}

.cpld-bar__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	font-size: 12px;
	font-weight: 700;
	margin-bottom: 5px;
}

.cpld-bar__rank {
	color: var(--cpld-muted);
	font-weight: 500;
	margin-left: 6px;
}

.cpld-bar__track {
	height: 8px;
	background: var(--cpld-line);
	border-radius: 4px;
	overflow: hidden;
}

/*
 * One colour for the bars, and a second that means something.
 *
 * The five per-category colours were decorative — the category is already named
 * on the row — but read as a severity scale: 知識負債 at 11.0点 (rank C) was
 * drawn in the darkest navy while 組織負債 at 12.0点 (rank B) got a pale teal,
 * so the worse score looked heavier. Three of the five also sat under 3:1
 * against the track (teal 1.94, orange 2.20, green 2.26), which WCAG 1.4.11
 * asks for on a graphical object.
 *
 * Now: navy by default, accent only where 課題フラグ is set. Colour carries the
 * one distinction the reader actually needs, and both clear 3:1.
 */
.cpld-bar__fill {
	height: 100%;
	border-radius: 4px;
	background: var(--cpld-navy);
}

.cpld-bar--issue .cpld-bar__fill {
	background: var(--cpld-accent-ink);
}

.cpld-bar__issues {
	margin-top: 8px;
	font-size: 12px;
	line-height: 1.9;
	color: var(--cpld-muted);
}

.cpld-bar__issues li::before {
	content: "・";
}

/* ------------------------------------------------------------------ tags */

.cpld-tag {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: var(--cpld-radius-pill);
	white-space: nowrap;
}

.cpld-tag--reference {
	background: #eef1fb;
	color: var(--cpld-navy);
	margin-left: 6px;
}

/* --------------------------------------------------------------- metrics */

.cpld-metrics {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 24px;
}

.cpld-metric {
	flex: 1 1 220px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var(--cpld-card);
	border: 1px solid var(--cpld-border);
	border-radius: var(--cpld-radius-lg);
	padding: 20px 24px;
}

.cpld-metric__label {
	font-size: 13px;
	font-weight: 700;
	color: var(--cpld-muted);
}

.cpld-metric__value {
	font-size: 28px;
	font-weight: 900;
	color: var(--cpld-navy);
	line-height: 1.2;
	word-break: break-word;
}

.cpld-metric__unit {
	font-size: 14px;
	font-weight: 700;
	color: var(--cpld-placeholder);
}

/*
 * The line a 課題 is judged against, under the number it judges. Quiet by
 * default and only coloured when the score is actually below it: the customer
 * needs the figure to check the verdict, not a second alarm.
 */
.cpld-metric__baseline {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	font-weight: 700;
	color: var(--cpld-muted);
}

.cpld-metric__baseline--issue {
	color: var(--cpld-accent-ink);
}

.cpld-metric__value--grade {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: inherit;
}

.cpld-metric__value--priority {
	color: var(--cpld-accent-ink);
}

/* ------------------------------------------------------------ debt table */

.cpld-debt-table__wrap {
	overflow-x: auto;
}

/*
 * `overflow-x: auto` above only ever fires because of the min-width here.
 * Without it `width: 100%` wins and the table compresses to whatever it is
 * given: at 390px that left the 課題 column 71px wide, which wraps 保守文書が
 * 不足している one character per line. 600px is the width at which the five
 * columns still read — the same shape a 768px tablet gets — so below that the
 * table scrolls sideways inside its own box instead of shrinking, and the page
 * itself never gains a horizontal scrollbar.
 */
.cpld-debt-table {
	width: 100%;
	min-width: 600px;
	border-collapse: collapse;
	font-size: 13px;
}

/* The scroll hint, for a reader whose viewport cannot show the whole table. */
.cpld-debt-table__wrap:focus-visible {
	outline: 2px solid var(--cpld-navy);
	outline-offset: 2px;
}

.cpld-debt-table th,
.cpld-debt-table td {
	border: 1px solid var(--cpld-border);
	padding: 10px 12px;
	text-align: center;
	vertical-align: middle;
}

.cpld-debt-table thead th {
	background: var(--cpld-navy);
	color: #fff;
	font-weight: 700;
	white-space: nowrap;
}

.cpld-debt-table tbody th {
	font-weight: 700;
	text-align: center;
}

.cpld-debt-table__score {
	font-weight: 700;
	white-space: nowrap;
}

/*
 * 判定 reproduces the workbook's own conditional formatting on sheet
 * 03_診断結果レポート (C8:C13) — Excel's built-in traffic-light presets, the
 * same three pairs the PDF already prints. Rank A has no rule in the workbook,
 * but a blank cell between three filled ones read as "not evaluated" rather
 * than as the best verdict, so A gets a fourth pair in the same Excel family
 * (Blue, Accent 1 at 60% lighter / 50% darker) — off the traffic light on
 * purpose, since 健全 is not a warning. .cpld-debt-table__rank itself still
 * carries no colour.
 */
.cpld-debt-table__rank {
	white-space: nowrap;
}

.cpld-debt-table__rank--A {
	background: #bdd7ee;
	color: #1f4e79;
}

.cpld-debt-table__rank--B {
	background: #c6efce;
	color: #006100;
}

.cpld-debt-table__rank--C {
	background: #ffeb9c;
	color: #9c5700;
}

.cpld-debt-table__rank--D {
	background: #ffc7ce;
	color: #9c0006;
}

/*
 * Black on white, matching sheet 03_診断結果レポート of the workbook: there,
 * 課題あり is plain text in an unfilled cell. Sales read the two side by side,
 * and an orange web cell against a black Excel one reads as a different verdict
 * rather than as the same one restyled. Bold stays — the Excel cell is centred
 * in a bordered column that already sets it apart.
 *
 * The flagged row carries no tint either, for the same reason; .cpld-debt-table
 * __row--issue stays on the markup as a hook, without a rule of its own.
 */
.cpld-debt-table__flag {
	color: var(--cpld-text);
	font-weight: 700;
	white-space: nowrap;
}

.cpld-debt-table__baseline {
	display: block;
	font-size: 11px;
	font-weight: 400;
	color: var(--cpld-muted);
}

td.cpld-debt-table__issues {
	text-align: left;
}

.cpld-debt-table__issues ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cpld-debt-table__issues li {
	line-height: 1.7;
}

.cpld-debt-table__issues li::before {
	content: "・";
}

/* --------------------------------------------------------------- glossary */

.cpld-glossary__row {
	display: grid;
	grid-template-columns: minmax(0, 0.28fr) minmax(0, 0.72fr);
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px solid var(--cpld-border);
}

.cpld-glossary__row:last-child {
	border-bottom: none;
}

.cpld-glossary__term {
	font-weight: 900;
	color: var(--cpld-navy);
}

.cpld-glossary__desc {
	margin: 0;
	white-space: pre-line;
	font-size: 13px;
	line-height: 1.8;
	color: var(--cpld-text);
}

/* ---------------------------------------------------------------- advice */

.cpld-advice__state {
	font-size: 16px;
	font-weight: 900;
	color: var(--cpld-text);
	margin-bottom: 10px;
}

.cpld .cpld-advice__heading {
	font-size: 13px;
	font-weight: 900;
	color: var(--cpld-navy);
	margin: 20px 0 6px;
}

.cpld-advice__body {
	font-size: 14px;
	line-height: 1.9;
}

/* ------------------------------------------------------------------- CTA */

/*
 * 中央寄せ。上段は見出しの右隣に置く枠（.cpld-result__intro）、下段は全幅 —
 * どちらも文言とボタンを中央に揃える、というレビューの指示。
 */
.cpld-cta {
	background: linear-gradient(120deg, var(--cpld-navy), #123055);
	border-radius: var(--cpld-radius-lg);
	padding: 40px;
	text-align: center;
	margin-bottom: 24px;
}

.cpld-cta__title {
	font-size: 18px;
	font-weight: 900;
	color: #fff;
	margin-bottom: 10px;
}

.cpld-cta__body {
	font-size: 13px;
	color: #c9d2e6;
	margin-bottom: 22px;
}

.cpld-cta__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

/* The ※ on お問い合わせ points at .cpld-cta__note below the buttons. */
.cpld-cta__mark {
	font-size: 0.7em;
	margin-left: 2px;
}

/*
 * Left-aligned with a hanging indent so the second line sits under the text
 * after ※, not under the ※ itself — the layout the review's 全角スペース
 * indent asked for.
 */
.cpld .cpld-cta__note {
	font-size: 10px;
	line-height: 1.7;
	color: #fff;
	text-align: left;
	padding-left: 1em;
	text-indent: -1em;
	margin: 18px 0 0;
}

.cpld .cpld-cta__mail,
.cpld .cpld-cta__mail:visited {
	color: #fff;
	text-decoration: underline;
	word-break: break-all;
}

.cpld .cpld-cta__mail:hover {
	color: #c9d2e6;
}

/*
 * The ghost button's default colours (transparent + muted grey text) are
 * tuned for a white card. .cpld-cta is a dark navy gradient, so the print
 * button gets its own pass here rather than a second modifier class.
 */
.cpld-cta .cpld-btn--ghost {
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.5);
}

.cpld-cta .cpld-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

.cpld-alert--info {
	background: #eef7fb;
	border-color: #bcdcea;
}

.cpld-alert--info .cpld-alert__title {
	color: #16688a;
}

.cpld-alert--warning {
	background: #fff7e6;
	border-color: #e5b85c;
	color: #744b00;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 760px) {
	/* The radar stacks under the summary rather than shrinking into illegibility. */
	.cpld-result {
		grid-template-columns: 1fr;
		padding: 26px 20px;
		gap: 24px;
	}

	.cpld-radar {
		max-width: 320px;
		margin-inline: auto;
	}

}

@media (max-width: 600px) {
	.cpld-section {
		padding: 36px 18px 52px;
	}

	/*
	 * Stack the pill above the question. Left to wrap on its own, the four long
	 * questions drop below the pill while the short fifth one stays beside it,
	 * so the column of questions comes out ragged.
	 */
	.cpld-steps__body {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

	.cpld-hero {
		padding: 44px 18px 52px;
	}

	.cpld-card {
		padding: 26px 20px;
	}

	.cpld .cpld-btn--lg {
		display: block;
		width: 100%;
		padding: 16px 20px;
	}

	/* One column: two 200px-capped fields side by side stop being readable. */
	.cpld-grid {
		grid-template-columns: 1fr;
	}

	/*
	 * 16px, or Safari zooms the page in on every focus. With fourteen fields
	 * that is fourteen zoom-ins, and iOS never zooms back out on blur.
	 */
	.cpld .cpld-field__input {
		font-size: 16px;
	}

	.cpld-field--span2 {
		grid-column: span 1;
	}

	.cpld-question {
		padding: 18px 16px;
	}

	.cpld-formnav {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.cpld-formnav .cpld-btn--primary {
		width: 100%;
	}

	.cpld-card--flush,
	.cpld-cta {
		padding: 24px 18px;
	}

	.cpld-score__value {
		font-size: 32px;
	}
}

/*
 * COBOL PARK レガシーリスク診断 — Analyzer geometry and palette.
 *
 * Continues diagnosis.css: this half restates the tokens and the layout the
 * design actually uses, on top of the resets, the focus rings, the field
 * states and the print rules declared above.
 *
 * Two rules carried over from the top of this file, for the same reasons:
 *
 *   1. No new bare-element selectors. `.cpld p` scores (0,1,1) and silently
 *      beats every class in this stylesheet — that bug ate the margins of the
 *      whole survey once, and `bin/ui-audit.mjs` still watches for it.
 *   2. Contrast is checked, not copied. The mock's orange (#fc6c29) carries
 *      white text at about 2.4:1, so it stays a fill colour and a darker step
 *      does the talking wherever there are words on top.
 *
 * Geometry and palette come from the Analyzer mock
 * (stitch_cobol_park_website_clone/, four screens). These custom properties
 * override the ones declared above; anything not redeclared here (the rank
 * colours, the teal accents) still comes from the tokens block at the top.
 */

/* ---------------------------------------------------------- tokens (redux) */

.cpld {
	/* Material-style navy from the mock's own token set. */
	--cpld-navy: #00104e;
	--cpld-navy-deep: #000b38;
	--cpld-navy-ink: #00104e;
	--cpld-navy-soft: #283e9a;

	/*
	 * Two roles, kept apart. --cpld-accent is paint: progress fill, meters,
	 * badges, the rule above a card. --cpld-accent-ink is the one that ever has
	 * text on it or is text itself — 6.4:1 with white, 6.4:1 as text on the
	 * cream background. Collapsing these two back into one value would fail AA.
	 */
	--cpld-accent: #fc6c29;
	--cpld-accent-hover: #e85f1f;
	--cpld-accent-ink: #a63b00;
	--cpld-accent-ink-hover: #872f00;

	--cpld-bg: #fcf9f8;
	--cpld-card: #ffffff;
	--cpld-border: #e5e5e5;
	--cpld-line: #ececf2;
	--cpld-text: #1c1b1b;
	--cpld-muted: #5c5c5c;
	--cpld-placeholder: #6b6b6b;
	--cpld-selected-bg: #eef0fb;
	--cpld-disabled: #c5c5d4;
	--cpld-input-border: #8a8a96;
	--cpld-error-text: #ba1a1a;

	/* Rounder and wider than the base tokens above: the mock's cards are 16px
	 * and its report is a two-column grid that needs the room. */
	--cpld-radius: 12px;
	--cpld-radius-lg: 16px;
	--cpld-radius-pill: 999px;
	--cpld-shell-narrow: 720px;
	--cpld-shell-wide: 1080px;

	/*
	 * The theme's own gutter, so the two screens that span the viewport —
	 * intro and 基本情報 — start where the header and the footer start.
	 * cobolpark_new centres every `.container` at
	 * `width: min(100% - 48px, var(--max))` with `--max: 92vw`; expressed as
	 * padding on a full-bleed element that is exactly this. The fallback
	 * keeps a 92vw shell under a theme that declares no `--max`, and the 24px
	 * floor is the one the theme itself uses on a narrow desktop window.
	 *
	 * 設問 and 診断結果 stay inside --cpld-shell-wide on purpose: they are a
	 * reading column, not a landing page.
	 */
	--cpld-gutter: max(24px, calc((100% - var(--max, 92vw)) / 2));

	--cpld-shadow-card: 0 1px 2px rgba(28, 27, 27, 0.04), 0 8px 24px -16px rgba(0, 16, 78, 0.28);

	/*
	 * Plus Jakarta Sans first, Noto Sans JP behind it. A font stack resolves per
	 * glyph, so Latin runs — "Legacy Risk Assessment", "STEP3", the scores — take
	 * Jakarta while every kana and kanji falls through to Noto. Naming them the
	 * other way round would hand the Latin to Noto's own Latin cut, which is
	 * what the mock is visibly not using.
	 */
	font-family: "Plus Jakarta Sans", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

/* The theme narrows its container to `100% - 32px` at exactly this width. */
@media (max-width: 767px) {
	.cpld {
		--cpld-gutter: max(16px, calc((100% - var(--max, 92vw)) / 2));
	}
}

/* ------------------------------------------------------------------ hero */

/*
 * The mock's intro sits on a pale blue wash while every screen after it is
 * cream. Kept that way: the wash marks the landing page, and the flow behind it
 * stays quiet.
 */
.cpld .cpld-hero {
	background: linear-gradient(160deg, #dceafc 0%, #eaf3fd 46%, var(--cpld-bg) 100%);
	padding: 24px;
	text-align: left;
}

.cpld .cpld-hero--split {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	align-items: center;
	gap: 48px;
	/*
	 * No cap of its own: --cpld-gutter already places both edges where the
	 * theme's .container places its own, and a max-width on top of that would
	 * pull the hero back inside them at any window wider than the shell.
	 */
}

.cpld .cpld-hero__col {
	min-width: 0;
}

.cpld .cpld-hero__note {
	grid-column: 1 / -1;
	margin-top: 8px;
}

.cpld .cpld-hero__eyebrow {
	background: #ffffff;
	color: var(--cpld-navy);
	box-shadow: var(--cpld-shadow-card);
	margin-bottom: 24px;
}

.cpld .cpld-hero__title {
	font-size: clamp(30px, 5.2vw, 46px);
	line-height: 1.3;
	margin-bottom: 4px;
}

/* The service name, one step down from the promise in the title above it. */
.cpld .cpld-hero__subtitle {
	font-size: clamp(20px, 3vw, 30px);
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--cpld-navy-soft);
	margin-bottom: 20px;
}

.cpld .cpld-hero__lead {
	color: #33333c;
	max-width: 46em;
}

.cpld .cpld-hero__effort {
	color: var(--cpld-muted);
	font-weight: 500;
}

/* ----------------------------------------------------------------- chips */

.cpld .cpld-chips__heading {
	font-size: 13px;
	font-weight: 700;
	color: var(--cpld-muted);
	margin-bottom: 10px;
}

.cpld .cpld-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 32px;
}

.cpld .cpld-chips__item {
	background: #ffffff;
	border: 1px solid var(--cpld-border);
	border-radius: var(--cpld-radius-pill);
	box-shadow: var(--cpld-shadow-card);
	color: var(--cpld-navy);
	font-size: 14px;
	font-weight: 700;
	padding: 9px 18px;
}

/* -------------------------------------------------------------- hero art */

/*
 * Inline SVG, so it takes the tokens above and prints. Its aspect ratio is
 * fixed by the viewBox; the box only has to stop it growing past the column.
 */
.cpld .cpld-hero__art {
	min-width: 0;
}

.cpld .cpld-hero__art svg,
.cpld .cpld-split__art svg {
	display: block;
	width: 100%;
	height: auto;
}

.cpld .cpld-art__card {
	fill: #ffffff;
	stroke: var(--cpld-border);
	stroke-width: 1;
}

.cpld .cpld-art__panel {
	fill: var(--cpld-navy);
}

.cpld .cpld-art__halo,
.cpld .cpld-art__link {
	stroke: rgba(0, 16, 78, 0.22);
}

.cpld .cpld-art__badge {
	fill: #fdeae1;
}

.cpld .cpld-art__badge--calm {
	fill: var(--cpld-selected-bg);
}

.cpld .cpld-art__glyph {
	stroke: var(--cpld-accent-ink);
}

.cpld .cpld-art__badge--calm + .cpld-art__glyph {
	stroke: var(--cpld-navy-soft);
}

.cpld .cpld-art__flag {
	fill: var(--cpld-accent-ink);
}

.cpld .cpld-art__flag--calm {
	fill: var(--cpld-navy);
}

.cpld .cpld-art__caption {
	fill: var(--cpld-muted);
	letter-spacing: 0.08em;
}

.cpld .cpld-art__track,
.cpld .cpld-art__line {
	fill: #eceaea;
}

.cpld .cpld-art__meter {
	fill: var(--cpld-accent);
}

.cpld .cpld-art__node {
	fill: #7a8eee;
}

.cpld .cpld-art__thread {
	stroke: rgba(255, 255, 255, 0.42);
}

.cpld .cpld-art__lock {
	fill: #ffffff;
}

.cpld .cpld-art__lock-arc {
	stroke: #ffffff;
}

.cpld .cpld-art__seal {
	fill: rgba(255, 255, 255, 0.82);
	letter-spacing: 0.12em;
}

/* ----------------------------------------------------------------- steps */

/*
 * Cards rather than a stacked list. `auto-fit` with a floor means the row
 * reflows from five across to two to one without a breakpoint per step count —
 * a sixth 負債 would need no CSS change.
 */
.cpld .cpld-steps--cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
}

.cpld .cpld-steps--cards .cpld-steps__item {
	display: block;
	background: var(--cpld-card);
	border: 1px solid var(--cpld-border);
	border-radius: var(--cpld-radius-lg);
	box-shadow: var(--cpld-shadow-card);
	padding: 20px;
}

.cpld .cpld-steps--cards .cpld-steps__no {
	display: block;
	color: var(--cpld-accent-ink);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	margin-bottom: 10px;
}

.cpld .cpld-steps--cards .cpld-steps__body {
	display: block;
}

.cpld .cpld-steps--cards .cpld-steps__debt {
	display: block;
	color: var(--cpld-navy);
	font-size: 16px;
	font-weight: 800;
	margin-bottom: 6px;
}

.cpld .cpld-steps--cards .cpld-steps__title {
	display: block;
	color: var(--cpld-muted);
	font-size: 13px;
	line-height: 1.8;
}

/* --------------------------------------------------------------- buttons */

.cpld .cpld-btn {
	border-radius: var(--cpld-radius-pill);
	font-weight: 800;
}

.cpld .cpld-btn--primary {
	background: var(--cpld-navy);
}

.cpld .cpld-btn--primary:hover {
	background: var(--cpld-navy-deep);
}

/* The mock's Next button is orange with white text — hence the ink step. */
.cpld .cpld-btn--accent {
	background: var(--cpld-accent-ink);
}

.cpld .cpld-btn--accent:hover {
	background: var(--cpld-accent-ink-hover);
}

.cpld .cpld-btn--ghost {
	border-color: var(--cpld-border);
	color: var(--cpld-navy);
}

/*
 * .cpld-cta is a navy card in this skin too (see the CTA rule below), so the
 * print button next to 問い合わせ needs the light-on-dark treatment from
 * diagnosis.css — not the navy-on-white one above. Three classes beats that
 * rule's two, so this wins regardless of stylesheet order.
 */
.cpld .cpld-cta .cpld-btn--ghost {
	border-color: rgba(255, 255, 255, 0.5);
	color: #fff;
}

/* ----------------------------------------------------------------- cards */

.cpld .cpld-card {
	border-radius: var(--cpld-radius-lg);
	box-shadow: var(--cpld-shadow-card);
}

/* The 回答 sheet holds every category panel plus the nav, so its own padding
 * would double up on the panels'. */
.cpld .cpld-card--sheet {
	padding: 32px;
}

/* ------------------------------------------------- screen-level insets */

/*
 * The intro is inset as a block rather than padded: `.cpld--intro` is the
 * wrapper cpld_render_screen() prints, so the hero keeps its own padding
 * inside it and the pale wash starts and ends with the block instead of
 * running edge to edge with the text pushed off it.
 *
 * The block's edge is the theme's gutter, which is where the header's logo
 * and the footer's logo both sit — measured, both at 57.6px on a 1440px
 * window. Line the wash up with them and the screen reads as part of the
 * site rather than as something dropped into it.
 */
.cpld--intro {
	margin-inline: var(--cpld-gutter);
}

/*
 * 基本情報 spans the viewport, and takes the theme's gutter rather than
 * .cpld-section's flat 24px — which left the form 33px wider than the footer
 * on each side. The other .cpld-section screens keep that padding: their
 * content is capped at the shell width well before it.
 */
.cpld--info .cpld-section {
	padding-inline: var(--cpld-gutter);
}

/* ------------------------------------------------------- two-column split */

/*
 * Used by 基本情報: the reason for the form on the left, the form on the right.
 * The form is the wider track — it is the work being asked for.
 */
.cpld .cpld-split {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	align-items: start;
	gap: 40px;
}

/*
 * diagnosis.css centres and caps every direct child of a section. Both tracks
 * of this grid are direct children, so without this the columns would each be
 * capped at the shell width and centred inside their own track.
 */
.cpld .cpld-split > * {
	max-width: none;
	margin-inline: 0;
}

.cpld .cpld-split__aside {
	min-width: 0;
	position: sticky;
	/* Clears the theme header, same token the progress bar uses. */
	top: calc(var(--cpld-header-h) + 24px);
}

.cpld .cpld-split__title {
	font-size: clamp(24px, 3.4vw, 34px);
	font-weight: 900;
	color: var(--cpld-navy-ink);
	line-height: 1.4;
	margin-bottom: 16px;
}

.cpld .cpld-split__lead {
	font-size: 15px;
	line-height: 2;
	color: #33333c;
	margin-bottom: 28px;
}

.cpld .cpld-split__art {
	border-radius: var(--cpld-radius-lg);
	overflow: hidden;
}

.cpld .cpld-split__main {
	min-width: 0;
}

/*
 * The legal notice sits in the aside next to the form here, not between the
 * fields and the consent checkbox, so nothing forces it to collapse behind a
 * toggle or cap its height — templates/analyzer/partials/legal-notice.php
 * renders it as a plain, fully expanded block instead of `<details>`.
 */
.cpld .cpld-fieldset--legal {
	margin-top: 28px;
}

.cpld .cpld-fieldset--legal > .cpld-fieldset__legend {
	padding: 0 0 14px;
}

.cpld .cpld-legal--static {
	max-height: none;
	overflow: visible;
}

/* ------------------------------------------------------------ form fields */

/* Two fields per row, as in the mock. The named-line syntax is not needed: the
 * `--span2` fields already declare their own full-width span. */
.cpld .cpld-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cpld .cpld-field__input {
	border-radius: var(--cpld-radius);
}

.cpld .cpld-formnav--end {
	justify-content: flex-end;
}

/* ------------------------------------------------------------------- 設問 */

/*
 * Six options — 1..5 then 不明 — laid out 3 across, dropping to 2 under 900px
 * and to 1 under 600px. Fixed counts rather than `auto-fit`, because 6 divides
 * evenly by 3, 2 and 1: no arrangement ever leaves a hole in the last row.
 * `auto-fit` with a 220px floor picks 4 columns at desktop and strands two
 * empty cells.
 *
 * The widest label today needs 214px of track. Three columns hold that down to
 * a 830px viewport and two hold it down to about 560px, so the 900px and 600px
 * breakpoints the rest of this file already uses both clear it with room over.
 *
 * `grid-auto-rows: 1fr` is what keeps the block rectangular when a label does
 * wrap: every row matches the tallest, rather than one row growing alone.
 */
.cpld .cpld-options {
	gap: 10px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: 1fr;
}

/* White against the card's cream fill, so a row reads as a control. */
.cpld .cpld-option {
	background: var(--cpld-card);
	border-radius: var(--cpld-radius);
	/* Grid items default to `min-width: auto`, which refuses to shrink below the
	 * content's minimum and pushes the track — and the page — sideways on a
	 * narrow phone. This lets a long label wrap instead. */
	min-width: 0;
}

/*
 * Four or five 設問 in one panel, so each needs to end somewhere visible. The
 * sheet around them is white, which is why these cards are cream and not white
 * on white: the separation comes from the fill, the border and the gap together,
 * because a border alone reads as one long table on a phone.
 */
.cpld .cpld-question {
	background: var(--cpld-bg);
	border: 1px solid var(--cpld-border);
	border-radius: var(--cpld-radius-lg);
	padding: 26px 28px;
	margin-bottom: 24px;
}

.cpld .cpld-question:last-of-type {
	margin-bottom: 8px;
}

.cpld .cpld-question--missing {
	border-color: var(--cpld-error-text);
	background: #fff5f4;
}

.cpld .cpld-question__text {
	font-size: 17px;
	line-height: 1.7;
	margin-bottom: 8px;
}

/*
 * The 設問 number, inside the <legend> and above the question. A counter would
 * be shorter but would say "3." with no unit; this states the denominator, so a
 * customer part-way down a panel knows how much of the カテゴリ is left
 * without counting cards.
 */
.cpld .cpld-question__no {
	display: block;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.06em;
	color: var(--cpld-accent-ink);
	margin-bottom: 8px;
}

/* The badge naming the current 負債, above the step title. */
.cpld .cpld-steplead__badge {
	display: inline-block;
	background: var(--cpld-selected-bg);
	border-radius: var(--cpld-radius-pill);
	color: var(--cpld-navy);
	font-size: 12px;
	font-weight: 800;
	padding: 5px 14px;
	margin-bottom: 12px;
}

.cpld .cpld-progress__fill {
	background: var(--cpld-accent);
}

.cpld .cpld-progress__fill--empty {
	background: none;
}

/* ---------------------------------------------------------------- report */

/*
 * 見出し（左）と上段の CTA（右）を一行に並べる。左右は縦方向に中央で揃え、右の
 * 枠は中の文言とボタンも中央寄せ（これは .cpld-cta 自体の既定）— 画面を開いた
 * 瞬間に「結果」と「問い合わせ」が同時に目に入る形にする。幅は 30:70 —
 * 左は見出し一行で足りるので、残りは枠とボタンに回す。
 * 下段の CTA は全幅のまま。
 */
.cpld .cpld-result__intro {
	display: grid;
	grid-template-columns: minmax(0, 30fr) minmax(0, 70fr);
	align-items: center;
	gap: 32px;
	margin-bottom: 28px;
}

.cpld .cpld-result__intro .cpld-cta {
	margin-bottom: 0;
}

.cpld .cpld-result__masthead {
	text-align: center;
	margin-bottom: 32px;
}

/*
 * 左右どちらの列も中央寄せ。h1 は自前で
 * `.cpld .cpld-result__heading { text-align: center }`（上半分の基本スキン）を
 * 持っているため、親の text-align では決まらない — 名指しで揃えておく。
 */
.cpld .cpld-result__intro .cpld-result__masthead,
.cpld .cpld-result__intro .cpld-result__heading {
	text-align: center;
}

.cpld .cpld-result__intro .cpld-result__masthead {
	margin-bottom: 0;
}

.cpld .cpld-result__intro .cpld-result__heading {
	margin-bottom: 0;
}

.cpld .cpld-result__heading {
	font-size: clamp(33.6px, 5.52vw, 50.4px);
}

.cpld .cpld-result__sub {
	color: var(--cpld-muted);
	font-size: 15px;
	margin-top: 8px;
}

/*
 * Sheet 03's layout: the metrics row spans the full width above, then the
 * 負債別 table (wide) sits beside the radar (narrow) — mirroring the chart's
 * anchor, which runs the full height of the score+table block on the sheet.
 */
.cpld .cpld-metrics {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-bottom: 20px;
}

.cpld .cpld-metric {
	background: var(--cpld-card);
	border-radius: var(--cpld-radius-lg);
	box-shadow: var(--cpld-shadow-card);
	padding: 20px 24px;
	/* The mock's accent rule along the top of the metric cell. */
	border-top: 4px solid var(--cpld-accent);
}

.cpld .cpld-report {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 20px;
	margin-bottom: 24px;
	/*
	 * Default stretch only inflates the radar card: cpld-report__main is a
	 * plain div wrapping .cpld-card, so stretch grows the wrapper invisibly
	 * while the visible table card stays content-sized. cpld-report__radar
	 * *is* the card, so it's the only one that visibly stretches. start keeps
	 * both cards honestly sized to their own content instead.
	 */
	align-items: start;
}

.cpld .cpld-report > * {
	max-width: none;
	margin-inline: 0;
	min-width: 0;
}

.cpld .cpld-report__main {
	grid-column: span 8;
}

.cpld .cpld-report__radar {
	grid-column: span 4;
}

.cpld .cpld-report__advice,
.cpld .cpld-report__glossary {
	background: #f6f3f2;
	margin-bottom: 24px;
}

.cpld .cpld-score__value {
	color: var(--cpld-navy);
}

.cpld .cpld-metric__value--priority {
	color: var(--cpld-accent-ink);
}

/* ------------------------------------------------------------------ radar */

/*
 * RadarChart writes its colours as presentation attributes, which carry no
 * specificity — so these rules win without the chart knowing this skin exists,
 * and the two wp-admin charts keep the original palette.
 */
.cpld .cpld-radar__score {
	fill: rgba(0, 16, 78, 0.2);
	stroke: var(--cpld-navy);
}

.cpld .cpld-radar__ring,
.cpld .cpld-radar__axis {
	stroke: #d7d5dd;
}

.cpld .cpld-radar__label {
	fill: var(--cpld-navy);
}

/* ------------------------------------------------------------------- bars */

.cpld .cpld-bar__fill {
	background: var(--cpld-navy-soft);
}

.cpld .cpld-bar--issue .cpld-bar__fill {
	background: var(--cpld-accent);
}

/* -------------------------------------------------------------------- CTA */

.cpld .cpld-cta {
	background: var(--cpld-navy);
	border-radius: var(--cpld-radius-lg);
}

/* ------------------------------------------------------------ responsive */

/*
 * The theme hides the hero illustration below 1025px — `.cpld-hero__art
 * { display: none }` in cobolpark_new's style.css, a rule written for the
 * home page's assessment slide and never scoped to it. Left as a two-column
 * grid the intro then keeps an empty second track, so half the hero is blank
 * between 901px and 1025px. Collapse at the width the art goes away at,
 * whoever takes it away.
 */
@media (max-width: 1025px) {
	.cpld .cpld-hero--split {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 900px) {
	/* One column, and the illustration goes after the argument rather than
	 * beside it. */
	.cpld .cpld-hero--split,
	.cpld .cpld-split {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	/* Sticky is only useful while there is something beside it to scroll. */
	.cpld .cpld-split__aside {
		position: static;
	}

	.cpld .cpld-report__main,
	.cpld .cpld-report__radar {
		grid-column: span 12;
	}

	.cpld .cpld-metrics {
		grid-template-columns: minmax(0, 1fr);
	}

	/* 見出しの隣に CTA を置くには狭すぎる幅。縦積みに戻し、見出しも中央へ。 */
	.cpld .cpld-result__intro {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.cpld .cpld-result__intro .cpld-result__masthead,
	.cpld .cpld-result__intro .cpld-result__heading {
		text-align: center;
	}

	/* Three tracks fall under the 214px a full sentence needs once the shell
	 * stops growing; two still have 295px at tablet width. */
	.cpld .cpld-options {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/*
 * Options only, and 640px rather than the 600px the rest of the page uses.
 * Between 601px and 640px the shell has stopped growing but the section, sheet
 * and card paddings are all still at their desktop values, which leaves a
 * two-column track of 210px — four pixels under what the longest shipped label
 * needs. One per row from here down instead of a 40px-wide band where every
 * ten-character option sits on two lines.
 */
@media (max-width: 640px) {
	.cpld .cpld-options {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 600px) {
	/* Two columns of inputs at phone width leaves each one too narrow for the
	 * placeholders, which carry worked examples and are content to read. */
	.cpld .cpld-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.cpld .cpld-card--sheet {
		padding: 20px 16px;
	}

	/*
	 * The base stylesheet asks for this at the same breakpoint, but as bare
	 * `.cpld-question` — which the unconditional `.cpld .cpld-question` above
	 * outranks, so a phone was keeping the desktop's 28px sides. Restated here
	 * at the winning specificity: 24px back for the options to use.
	 */
	.cpld .cpld-question {
		padding: 18px 16px;
	}

	.cpld .cpld-hero {
		padding: 48px 20px 56px;
	}
}

/* ----------------------------------------------------------------- print */

/*
 * print.css loads after this file as a separate stylesheet, so these selectors
 * carry the extra `.cpld--result` class — only ever present together with
 * `.cpld` on the result screen's wrapper — to outrank it by specificity rather
 * than relying on source order. Everything here has one job: undo the grids,
 * because a multi-column report on A4 loses a column off the right edge.
 */
@media print {
	.cpld.cpld--result .cpld-report,
	.cpld.cpld--result .cpld-hero--split,
	.cpld.cpld--result .cpld-split,
	.cpld.cpld--result .cpld-steps--cards {
		display: block;
	}

	.cpld.cpld--result .cpld-card {
		box-shadow: none;
	}

	/* Decoration that costs ink and says nothing on paper. */
	.cpld.cpld--result .cpld-hero__art,
	.cpld.cpld--result .cpld-split__art {
		display: none;
	}

	.cpld.cpld--result .cpld-report__advice,
	.cpld.cpld--result .cpld-report__glossary {
		background: none;
	}
}