/* Keiko portal — layout only. Colours come from the theme's semantic tokens (Shinka presets), with
 * neutral fallbacks for other themes. No hex values are used where a token exists. */
.keiko {
	--keiko-gap: var(--wp--preset--spacing--40, 1.25rem);
	--keiko-muted: color-mix(in srgb, currentColor 72%, transparent);
	padding-block: var(--wp--preset--spacing--60, 2.5rem);
}
.keiko > * + * { margin-block-start: var(--keiko-gap); }
.keiko-title { margin-block-end: 0; }
.keiko-meta, .keiko-disclaimer { color: var(--keiko-muted); font-size: var(--wp--preset--font-size--small, 0.875rem); }
.keiko-disclaimer { border-inline-start: 3px solid var(--wp--preset--color--warning, currentColor); padding-inline-start: 0.75rem; }
.keiko-flash { border-inline-start: 3px solid var(--wp--preset--color--info, currentColor); padding: 0.5rem 0.75rem; }
.keiko-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--keiko-gap); }
@media (min-width: 782px) { .keiko-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.keiko-cards > li > p { margin: 0 0 0.25rem; }
.keiko-section > * + * { margin-block-start: 0.75rem; }
.keiko-category-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--keiko-gap); }
@media (min-width: 782px) { .keiko-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.keiko-category { display: flex; flex-direction: column; min-block-size: 14rem; border-block-start: 4px solid var(--wp--preset--color--primary, currentColor); }
.keiko-category > * { margin-block: 0; }
.keiko-category > * + * { margin-block-start: 0.75rem; }
.keiko-category .wp-block-buttons { margin-block-start: auto; padding-block-start: 1rem; }
.keiko-category--planned { border-block-start-style: dashed; border-block-start-color: var(--wp--preset--color--border, currentColor); }
.keiko-category__status { color: var(--wp--preset--color--primary, currentColor); font-size: var(--wp--preset--font-size--small, 0.875rem); font-weight: 700; }
.keiko-category--planned .keiko-category__status { color: var(--keiko-muted); }
.keiko-category-nav ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; list-style: none; margin: 0; padding: 0; }
.keiko-category-nav a, .keiko-back a { display: inline-flex; align-items: center; min-block-size: 44px; }
.keiko-category-nav a[aria-current="page"] { color: var(--wp--preset--color--contrast, currentColor); font-weight: 700; text-decoration-thickness: 3px; text-underline-offset: 0.35em; }
.keiko-account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.keiko-account-actions .wp-block-buttons, .keiko-account-actions p { margin: 0; }
.keiko-account-actions a:not(.wp-element-button) { display: inline-flex; align-items: center; min-block-size: 44px; }
.keiko-question { border: 0; margin: 0; min-inline-size: 0; }
.keiko-question legend, .keiko-prompt { font-weight: 600; font-size: var(--wp--preset--font-size--medium, 1.125rem); padding: 0; margin-block-end: 0.75rem; }
.keiko-option { display: flex; align-items: flex-start; gap: 0.625rem; margin: 0.5rem 0; }
.keiko-option input[type="radio"], .keiko-option input[type="checkbox"] { inline-size: 1.25rem; block-size: 1.25rem; margin-block-start: 0.2rem; flex: none; }
.keiko-option label { flex: 1; min-height: 44px; }
.keiko-order { flex-wrap: wrap; justify-content: space-between; }
.keiko-order select { min-height: 44px; min-width: 4.5rem; }
.keiko-confidence { border: 0; padding: 0; margin: 0; }
.keiko-confidence legend { font-size: var(--wp--preset--font-size--small, 0.875rem); padding: 0; }
.keiko-confidence .keiko-option { display: inline-flex; margin-inline-end: 1rem; }
.keiko-progress { inline-size: 100%; block-size: 0.5rem; accent-color: var(--wp--preset--color--primary, currentColor); }
.keiko-feedback { border-inline-start: 4px solid; padding-inline-start: 1rem; }
.keiko-feedback--correct { border-color: var(--wp--preset--color--success, currentColor); }
.keiko-feedback--incorrect { border-color: var(--wp--preset--color--danger, currentColor); }
.keiko-feedback h2:focus { outline: 2px solid currentColor; outline-offset: 4px; }
.keiko-answers { display: grid; gap: var(--keiko-gap); }
@media (min-width: 600px) { .keiko-answers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.keiko-source-list { list-style: none; padding: 0; margin: 0.75rem 0 0; }
.keiko-source-list > li + li { border-block-start: 1px solid var(--wp--preset--color--border, currentColor); margin-block-start: 0.75rem; padding-block-start: 0.75rem; }
.keiko-source-list p { margin: 0.125rem 0; overflow-wrap: break-word; }
.keiko-form textarea, .keiko-form input[type="text"], .keiko-form input[type="email"], .keiko-form input[type="password"] { display: block; inline-size: 100%; box-sizing: border-box; min-height: 44px; margin-block-start: 0.25rem; }
.keiko-form label { display: inline-block; }
.keiko-form .wp-block-buttons { margin-block-start: 0.75rem; }
.keiko-finish { margin-block-start: calc(var(--keiko-gap) * 2); }
/* `break-word` (not `anywhere`): only a word longer than the whole line may break; table columns are never
 * squeezed into mid-word fragments. */
.keiko-lesson { overflow-wrap: break-word; hyphens: manual; }
.keiko-lesson .wp-block-table { overflow-x: auto; }
.keiko-lesson h2, .keiko-lesson h3 { scroll-margin-block-start: 5rem; }
.keiko-score { font-size: var(--wp--preset--font-size--large, 1.5rem); font-weight: 700; margin: 0; }
.keiko-summary > li + li { margin-block-start: 0.75rem; }
.keiko button.wp-element-button, .keiko .wp-block-button__link { min-height: 44px; }
/* Portal Access block (sign-in, recovery, access requests) on the public Portal Access page. */
.keiko-access { --keiko-gap: var(--wp--preset--spacing--40, 1.25rem); --keiko-muted: color-mix(in srgb, currentColor 72%, transparent); max-inline-size: 34rem; margin-inline: auto; margin-block: 0 var(--wp--preset--spacing--60, 2.5rem); }
.keiko-access > * + * { margin-block-start: 0.875rem; }
.keiko-access .wp-block-heading { margin-block: 0.25rem 0; }
.keiko-access .keiko-form > * + * { margin-block-start: 0.875rem; }
.keiko-field { margin: 0; }
.keiko-field label { font-weight: 600; }
.keiko-help { display: block; color: var(--keiko-muted); font-size: var(--wp--preset--font-size--small, 0.875rem); margin-block-start: 0.25rem; }
.keiko-flash--error { border-inline-start-color: var(--wp--preset--color--danger, currentColor); }
.keiko-access-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.25rem; }
.keiko-access-links a, .keiko-access p > a { display: inline-block; min-height: 44px; line-height: 44px; }
.keiko-trap { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.keiko-privacy-note { font-size: var(--wp--preset--font-size--small, 0.875rem); }
.keiko-privacy-note summary { min-height: 44px; line-height: 44px; cursor: pointer; }
.keiko-preview-banner { border-inline-start: 4px solid var(--wp--preset--color--warning, currentColor); }
.keiko-preview-questions .keiko-question > * + * { margin-block-start: 0.5rem; }
/* Keiko's own cards: Shinka's card variation CSS exists only for rendered blocks (DEC-K31), so plain
 * `is-style-card` markup gets its inner spacing here. Rendered variations (`is-style-card--N`) are untouched. */
.keiko .is-style-card:not([class*="is-style-card--"]) { padding: var(--wp--preset--spacing--40, 1.25rem); }
.keiko-preview-questions .keiko-summary { list-style: none; padding-inline-start: 0; }

/* Visually hidden text for assistive technology. */
.keiko-sr { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Lesson tables: whole words only. On narrow screens each table is replaced by a stacked list built from
 * the same cells (View::lesson_body); lettered steps ("D - Danger") show the letter as a marker. */
.keiko-lesson th, .keiko-lesson td, .keiko-stack__name { overflow-wrap: normal; word-break: normal; hyphens: manual; }
.keiko-stack { display: none; list-style: none; margin: 0; padding: 0; }
@media (max-width: 40em) {
	.keiko-lesson .keiko-table--stacked { display: none; }
	.keiko-stack { display: grid; gap: 0.625rem; }
}
.keiko-stack__item { border: 1px solid var(--wp--preset--color--border, currentColor); border-radius: var(--wp--custom--radius--md, 0.5rem); padding: 0.75rem 1rem; }
.keiko-stack__title { display: flex; align-items: center; gap: 0.75rem; margin: 0; font-weight: 700; }
.keiko-stack__marker { flex: none; display: inline-grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border-radius: 50%; border: 2px solid var(--wp--preset--color--primary, currentColor); font-weight: 800; line-height: 1; }
.keiko-stack__name { min-inline-size: 0; }
.keiko-stack__cell { margin: 0.5rem 0 0; overflow-wrap: break-word; hyphens: manual; }
.keiko-stack__label { font-weight: 600; }

/* Answer cards: a <label> wrapping a visible native control, so the whole card selects the option. */
.keiko-choices { border: 0; margin: 0; padding: 0; min-inline-size: 0; display: grid; gap: 0.625rem; }
.keiko-choices > legend { padding: 0; margin-block-end: 0.5rem; }
.keiko-choices__hint { margin: 0; }
.keiko .keiko-choice, .keiko-form label.keiko-choice { box-sizing: border-box; display: flex; align-items: flex-start; gap: 0.75rem; min-block-size: 3rem; padding: 0.75rem 1rem; border: 2px solid var(--wp--preset--color--border, currentColor); border-radius: var(--wp--custom--radius--md, 0.5rem); cursor: pointer; position: relative; }
.keiko-choice input[type="radio"], .keiko-choice input[type="checkbox"] { appearance: auto; -webkit-appearance: auto; opacity: 1; position: static; flex: none; inline-size: 1.375rem; block-size: 1.375rem; margin: 0.125rem 0 0; accent-color: var(--wp--preset--color--primary, currentColor); cursor: pointer; }
.keiko .keiko-choice__text { font-weight: 400; flex: 1; min-inline-size: 0; overflow-wrap: break-word; hyphens: manual; }
label.keiko-choice:hover { border-color: var(--wp--preset--color--primary, currentColor); }
.keiko-choice:has(input:checked) { border-color: var(--wp--preset--color--primary, currentColor); box-shadow: inset 0 0 0 2px var(--wp--preset--color--primary, currentColor); background: color-mix(in srgb, var(--wp--preset--color--primary, currentColor) 14%, transparent); }
.keiko-choice:has(input:checked) .keiko-choice__text { font-weight: 700; }
.keiko-choice:has(input:focus-visible) { outline: 3px solid var(--wp--preset--color--primary, currentColor); outline-offset: 3px; }
.keiko-choice input:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.keiko-choice--order { cursor: default; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.keiko-choice--order select { min-block-size: 44px; min-inline-size: 4.5rem; }

/* Marked answers: each state is named in text with an icon; colour and border style only reinforce it. */
.keiko .keiko-choices--answered .keiko-choice { cursor: default; box-shadow: none; }
.keiko-choices--answered .keiko-choice input { cursor: default; }
.keiko-choice__mark { display: block; margin-block-start: 0.25rem; font-weight: 700; font-size: var(--wp--preset--font-size--small, 0.875rem); }
.keiko .keiko-choices--answered .keiko-choice--correct { border-color: var(--wp--preset--color--success, currentColor); border-width: 3px; }
.keiko .keiko-choices--answered .keiko-choice--incorrect { border-color: var(--wp--preset--color--danger, currentColor); border-style: dashed; border-width: 3px; }
.keiko-result { display: flex; align-items: center; gap: 0.5rem; }
.keiko-result__icon { display: inline-grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; border-radius: 50%; border: 2px solid currentColor; font-size: 1rem; line-height: 1; }
.keiko-result--correct .keiko-result__icon { color: var(--wp--preset--color--success, currentColor); }
.keiko-result--incorrect .keiko-result__icon { color: var(--wp--preset--color--danger, currentColor); }
.keiko-result:focus { outline: 2px solid currentColor; outline-offset: 4px; }
.keiko-sources > summary { font-weight: 700; min-block-size: 44px; line-height: 1.4; cursor: pointer; }
.keiko-question-card > * + * { margin-block-start: 0.75rem; }

/* Revision modes (0.4.0): the mode chooser reuses the answer cards; the mode is always named in text. */
.keiko-mode-choices .keiko-choice__text > strong, .keiko-length-choices .keiko-choice__text > strong { display: block; }
/* Session length (0.5.0): a second fieldset of answer cards, then a plain-text summary of the choice. */
.keiko-mode-form > * + * { margin-block-start: var(--keiko-gap, 1rem); }
.keiko-session-summary { font-weight: 600; overflow-wrap: break-word; }
.keiko-choice__help { display: block; margin-block-start: 0.25rem; color: var(--keiko-muted); font-size: var(--wp--preset--font-size--small, 0.875rem); }
.keiko-mode-label { margin: 0; }
.keiko-badge, .keiko-length-badge { display: inline-block; padding: 0.125rem 0.625rem; border: 2px solid var(--wp--preset--color--primary, currentColor); border-radius: 999px; font-size: var(--wp--preset--font-size--small, 0.875rem); font-weight: 700; overflow-wrap: break-word; max-inline-size: 100%; box-sizing: border-box; }
.keiko-progress-wrap { display: grid; gap: 0.25rem; }
.keiko-mode-switch > summary { box-sizing: border-box; min-block-size: 44px; padding-block: 0.625rem; line-height: 1.4; cursor: pointer; }
.keiko-mode-switch .keiko-form > * + * { margin-block-start: 0.75rem; }
/* Quiz mode: Previous / Save and next, and a numbered navigator (44px targets; state in text and ✓). */
.keiko-quiz-nav { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between; }
.keiko-navigator { margin-block-start: var(--keiko-gap, 1rem); }
.keiko-navigator ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 0.375rem; }
.keiko .keiko-nav-q { box-sizing: border-box; inline-size: 100%; min-block-size: 44px; min-inline-size: 44px; padding: 0.25rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.125rem; border: 2px solid var(--wp--preset--color--border, currentColor); border-radius: var(--wp--custom--radius--sm, 0.375rem); background: transparent; color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
.keiko .keiko-nav-q.is-answered { border-color: var(--wp--preset--color--primary, currentColor); background: color-mix(in srgb, var(--wp--preset--color--primary, currentColor) 14%, transparent); }
.keiko .keiko-nav-q[aria-current="step"] { outline: 3px solid var(--wp--preset--color--primary, currentColor); outline-offset: 2px; }
.keiko .keiko-nav-q:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
/* Review before submitting. */
.keiko-unanswered { border-inline-start: 4px solid var(--wp--preset--color--warning, currentColor); }
.keiko-review-list { margin: 0; padding-inline-start: 1.5rem; }
.keiko-review-list > li + li { margin-block-start: 0.75rem; }
.keiko-review-list a { display: inline-block; min-block-size: 44px; line-height: 44px; }
.keiko-review-list .keiko-meta { margin: 0; overflow-wrap: break-word; }
.keiko-review-item.is-unanswered { border-inline-start: 3px dashed var(--wp--preset--color--warning, currentColor); padding-inline-start: 0.5rem; }
.keiko-result--unanswered .keiko-result__icon { border-style: dashed; }
/* A rendered legend sits on the fieldset's top border; inside a card the prompt must sit inside the card.
   Floating it makes it an ordinary (grid) child of the fieldset instead. */
.keiko-choices.is-style-card > legend { float: left; inline-size: 100%; }

/* Lesson parts and inline Practice checkpoints (0.7.0): the lesson is read part by part, each part may end
 * with one to three Practice questions. State is always in text and a tick; colour only reinforces it. */
.keiko-parts ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 0.375rem; }
.keiko .keiko-part-link { box-sizing: border-box; inline-size: 100%; min-block-size: 44px; min-inline-size: 44px; padding: 0.25rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.125rem; border: 2px solid var(--wp--preset--color--border, currentColor); border-radius: var(--wp--custom--radius--sm, 0.375rem); color: inherit; font-weight: 600; text-decoration: none; }
.keiko .keiko-part-link.is-done { border-color: var(--wp--preset--color--primary, currentColor); background: color-mix(in srgb, var(--wp--preset--color--primary, currentColor) 14%, transparent); }
.keiko .keiko-part-link[aria-current="step"] { outline: 3px solid var(--wp--preset--color--primary, currentColor); outline-offset: 2px; }
.keiko .keiko-part-link.is-locked { border-style: dashed; color: var(--keiko-muted); }
.keiko .keiko-part-link:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
#keiko-part, #keiko-checkpoint { scroll-margin-block-start: 5rem; }
.keiko-part-heading:focus, #keiko-checkpoint:focus { outline: 2px solid currentColor; outline-offset: 4px; }
.keiko-checkpoint > * + *, .keiko-finished > * + * { margin-block-start: 0.75rem; }
.keiko-prev-q, .keiko-reread, .keiko-parts-reset a { display: inline-flex; align-items: center; min-block-size: 44px; }
.keiko-review-answer > summary { box-sizing: border-box; min-block-size: 44px; padding-block: 0.625rem; line-height: 1.4; cursor: pointer; overflow-wrap: break-word; }
.keiko-continue-form { margin-block-start: var(--keiko-gap, 1rem); }
.keiko-concern > summary, .keiko-lesson-feedback > summary { box-sizing: border-box; display: flex; align-items: center; min-block-size: 44px; line-height: 1.4; cursor: pointer; overflow-wrap: break-word; }

/* Section-first lesson layout. */
.keiko-section-layout{display:grid;grid-template-columns:minmax(12rem,18rem) minmax(0,48rem);gap:var(--wp--preset--spacing--40,2rem);align-items:start;justify-content:center;min-width:0}
.keiko.is-layout-constrained>.keiko-section-layout{width:min(calc(100vw - 2rem),68rem);max-width:none}
.keiko-section-main{min-width:0;width:100%;max-width:48rem}
.keiko-section-nav{position:sticky;top:var(--wp-admin--admin-bar--height,1rem);min-width:0}
.keiko-section-nav__toggle{box-sizing:border-box;display:flex;align-items:center;gap:.6rem;min-height:44px;width:100%;padding:.6rem .8rem;border:1px solid var(--wp--preset--color--border,currentColor);background:transparent;color:inherit;font:inherit;cursor:pointer}
.keiko-section-nav ol{list-style:none;margin:.5rem 0 0;padding:0;display:grid;gap:.25rem}
.keiko-section-link{box-sizing:border-box;display:grid;grid-template-columns:1.4rem 1.4rem minmax(0,1fr);gap:.35rem;align-items:center;min-block-size:44px;padding:.5rem;border-inline-start:.25rem solid transparent;text-decoration:none;overflow-wrap:anywhere}
.keiko-section-link[aria-current=page]{border-inline-start-color:var(--wp--preset--color--primary,currentColor);font-weight:700}
.keiko-section-link:focus-visible,.keiko-section-nav__toggle:focus-visible,.keiko-section-select select:focus-visible{outline:3px solid currentColor;outline-offset:2px}
.keiko-section-link__number,.keiko-section-link__state{text-align:center}
.keiko-section-select{display:none}
.keiko-section-pager{display:flex;justify-content:space-between;gap:1rem;margin-block:var(--wp--preset--spacing--40,2rem)}
.keiko-section-pager a,.keiko-section-pager button{box-sizing:border-box;min-block-size:44px}
.keiko-practice-count{font-weight:600}
.keiko-revision-summary{display:grid;gap:.5rem}
.keiko-revision-summary div{display:grid;grid-template-columns:minmax(8rem,auto) 1fr;gap:1rem}
.keiko-revision-summary dt{font-weight:700}
.keiko-revision-summary dd{margin:0}
.keiko-section-nav.is-collapsed{width:4.5rem}
.keiko-section-nav.is-collapsed .keiko-section-nav__toggle span:last-child,
.keiko-section-nav.is-collapsed .keiko-section-link__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.keiko-section-nav.is-collapsed .keiko-section-link{grid-template-columns:1.4rem 1.4rem}
@media (min-width:768px) and (max-width:1279px){
 .keiko-section-layout{grid-template-columns:4.5rem minmax(0,48rem);gap:.5rem}
 .keiko-section-nav{width:4.5rem}
 .keiko-section-nav__toggle span:last-child,.keiko-section-link__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .keiko-section-link{grid-template-columns:1.4rem 1.4rem}
 .keiko-section-nav.is-expanded{position:relative;z-index:2;width:18rem;max-width:calc(100vw - 2rem);background:var(--wp--preset--color--base,#fff)}
 .keiko-section-nav.is-expanded .keiko-section-nav__toggle span:last-child,.keiko-section-nav.is-expanded .keiko-section-link__label{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}
 .keiko-section-nav.is-expanded .keiko-section-link{grid-template-columns:1.4rem 1.4rem minmax(0,1fr)}
}
@media (min-width:1280px){
 .keiko-section-layout{grid-template-columns:minmax(12rem,18rem) minmax(0,48rem)}
 .keiko-section-nav:not(.is-collapsed){width:18rem}
}
@media (max-width:767px){
 .keiko-section-layout{display:block}
 .keiko-section-nav{position:static;width:auto;margin-block-end:1rem}
 .keiko-section-nav__toggle,.keiko-section-nav nav{display:none}
 .keiko-section-select{display:block}
 .keiko-section-select>div{display:flex;gap:.5rem}
 .keiko-section-select select,.keiko-section-select button{box-sizing:border-box;min-height:44px}
 .keiko-section-select select{min-width:0;flex:1;max-width:100%}
 .keiko-section-pager{margin-block:1rem}
}
@media (prefers-reduced-motion:reduce){
 .keiko-section-nav *{scroll-behavior:auto!important}
}