/* ExitSaaS Business Automation Workshop. Light workbook theme: navy ink, one blue accent, green only for "done". */

:root {
	--ink: #0B2463;
	--ink-2: #24365f;
	--muted: #55657d;
	--accent: #1A6BF0;
	--accent-ink: #0f4fc0;
	--accent-wash: #eaf1fe;
	--done: #3f8a1c;
	--done-wash: #edf6e5;
	--warn: #a85a1a;
	--warn-wash: #fbf1e6;
	--error: #b42318;
	--error-wash: #fdecea;
	--paper: #ffffff;
	--page: #f5f7fb;
	--line: #d0dae8;
	--line-soft: #e0e5ec;
	--wash: #f0f4fa;
	--radius: 10px;
	--radius-sm: 8px;
	--shadow: 0 1px 2px rgba(11, 36, 99, .06), 0 6px 20px -8px rgba(11, 36, 99, .12);
	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--font-head: 'Sora', 'Segoe UI', sans-serif;
	--font-body: 'Libre Franklin', 'Segoe UI', sans-serif;
	--topbar-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar-h) + 16px); }

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.55;
	color: var(--ink-2);
	background-color: var(--page);
	background-image:
		linear-gradient(rgba(26, 107, 240, .045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(26, 107, 240, .045) 1px, transparent 1px);
	background-size: 28px 28px;
	min-height: 100dvh;
}

h1, h2, h3, h4 { font-family: var(--font-head); color: var(--ink); line-height: 1.2; margin: 0 0 .5em; letter-spacing: -0.01em; }
h1 { font-size: 32px; font-weight: 800; }
h2 { font-size: 26px; font-weight: 700; }
h3 { font-size: 21px; font-weight: 700; }
h4 { font-size: 18px; font-weight: 700; }
p { margin: 0 0 1em; max-width: 70ch; }
a { color: var(--accent-ink); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
strong { color: var(--ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }

/* ---------- Brand + topbar ---------- */

.ws-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.ws-brand-logo { display: block; height: 44px; width: auto; flex: none; }
.ws-brand-text { font-family: var(--font-head); font-size: 15px; font-weight: 600; line-height: 1.15; padding-left: 12px; border-left: 2px solid var(--line); }

.ws-topbar {
	position: sticky; top: 0; z-index: 20;
	display: flex; align-items: center; gap: 16px;
	min-height: var(--topbar-h);
	padding: 10px clamp(16px, 3vw, 32px);
	background: rgba(255, 255, 255, .94);
	backdrop-filter: saturate(1.4) blur(8px);
	border-bottom: 1px solid var(--line);
}
.ws-topbar > .ws-brand { margin-right: auto; }
.ws-topbar-progress { display: flex; align-items: center; gap: 10px; min-width: 180px; font-size: 15px; color: var(--muted); }
.ws-topbar-progress .ws-meter { width: 120px; }
.ws-topbar-nav { display: flex; gap: 6px; align-items: center; }

#ws-save-status {
	font-size: 15px; color: var(--muted); min-width: 0; white-space: nowrap;
	display: inline-flex; align-items: center; gap: 8px;
}
#ws-save-status::before {
	content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--line); flex: none;
	transition: background-color 200ms ease;
}
#ws-save-status[data-state="saving"]::before { background: var(--accent); }
#ws-save-status[data-state="saved"]::before { background: var(--done); }
#ws-save-status[data-state="error"] { color: var(--error); font-weight: 600; }
#ws-save-status[data-state="error"]::before { background: var(--error); }

/* ---------- Buttons ---------- */

.ws-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 42px; padding: 9px 18px;
	font: 600 16px/1.2 var(--font-body);
	border: 1px solid transparent; border-radius: var(--radius-sm);
	text-decoration: none; cursor: pointer; white-space: nowrap;
	transition: transform 140ms var(--ease-out), background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.ws-btn:active { transform: scale(0.97); }
.ws-btn-primary { background: var(--accent); color: #fff; }
.ws-btn-primary:hover { background: var(--accent-ink); color: #fff; }
.ws-btn-ghost { background: var(--paper); color: var(--ink); border-color: var(--line); }
.ws-btn-ghost:hover { border-color: var(--accent); color: var(--accent-ink); }
.ws-btn-small { min-height: 36px; padding: 6px 14px; font-size: 15px; }
.ws-btn-block { width: 100%; }
.ws-btn[disabled], .ws-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }

.ws-icon-btn {
	width: 36px; height: 36px; flex: none;
	display: inline-grid; place-items: center;
	font-size: 18px; line-height: 1; color: var(--muted);
	background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm);
	cursor: pointer;
	transition: transform 140ms var(--ease-out), color 160ms ease, border-color 160ms ease;
}
.ws-icon-btn:hover { color: var(--ink); border-color: var(--ink); }
.ws-icon-btn[data-remove]:hover { color: var(--error); border-color: var(--error); }
.ws-icon-btn:active { transform: scale(0.94); }

/* ---------- Form controls ---------- */

.ws-form { display: grid; gap: 6px; }
.ws-form .ws-btn { margin-top: 12px; }
.ws-label, .ws-cell-label { display: block; font-weight: 600; color: var(--ink); font-size: 16px; }
.ws-cell-label { font-size: 14px; color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.ws-optional, .ws-calc-tag {
	display: inline-block; margin-left: 6px; padding: 1px 8px;
	font-size: 14px; font-weight: 500; border-radius: 999px; vertical-align: 1px;
}
.ws-optional { color: var(--muted); background: var(--wash); }
.ws-calc-tag { color: var(--accent-ink); background: var(--accent-wash); }
.ws-cell-label .ws-calc-tag { font-size: 14px; padding: 0 6px; margin-left: 4px; }

.ws-input {
	width: 100%; min-height: 42px; padding: 8px 12px;
	font: 400 17px/1.4 var(--font-body); color: var(--ink);
	background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm);
	transition: border-color 160ms ease, box-shadow 160ms ease;
}
.ws-input:hover { border-color: #b3c2d8; }
.ws-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(26, 107, 240, .18); }
.ws-input::placeholder { color: #8795a9; }
textarea.ws-input { resize: vertical; min-height: 96px; }
select.ws-input { appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: right 18px center, right 12px center; background-size: 6px 6px; background-repeat: no-repeat; }

.ws-affix { display: flex; align-items: stretch; }
.ws-affix .ws-input { border-radius: 0; flex: 1; min-width: 0; }
.ws-affix-pre, .ws-affix-post {
	display: grid; place-items: center; padding: 0 12px;
	font-weight: 600; color: var(--muted); background: var(--wash); border: 1px solid var(--line);
}
.ws-affix-pre { border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.ws-affix-post { border-left: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.ws-affix .ws-input:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.ws-affix .ws-input:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

.ws-help { font-size: 16px; color: var(--muted); margin: 2px 0 8px; }

.ws-alert { padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid; font-size: 16px; }
.ws-alert-error { color: var(--error); background: var(--error-wash); border-color: #f3b8b1; }
.ws-alert-info { color: var(--ink-2); background: var(--accent-wash); border-color: #bcd3fb; }
.ws-alert-ok { color: #2d6513; background: var(--done-wash); border-color: #bfdca8; }

.ws-fineprint { font-size: 14px; color: var(--muted); margin-top: 8px; }
.ws-lede { font-size: 19px; color: var(--ink-2); }
.ws-tag {
	display: inline-block; margin-bottom: 14px; padding: 4px 12px;
	font: 600 14px var(--font-head); letter-spacing: .04em; text-transform: uppercase;
	color: var(--accent-ink); background: var(--accent-wash); border-radius: 999px;
}

/* ---------- Auth pages ---------- */

.ws-auth { min-height: 100dvh; display: grid; place-items: center; padding: 32px 16px; }
.ws-auth-card {
	width: min(100%, 460px); padding: 32px;
	background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.ws-auth-card > .ws-brand { margin-bottom: 24px; }
.ws-auth-card h1 { font-size: 28px; }
.ws-auth-links { margin-top: 16px; font-size: 16px; color: var(--muted); }
.ws-steps-list { padding-left: 22px; margin: 0 0 16px; }
.ws-steps-list li { margin-bottom: 6px; }

/* ---------- Sales page ---------- */

.ws-buy { width: min(100% - 32px, 1160px); margin: 0 auto; padding: 40px 0 64px; }
.ws-buy-hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, .9fr); gap: 40px; align-items: start; }
.ws-buy-hero h1 { font-size: clamp(32px, 4.6vw, 52px); line-height: 1.08; letter-spacing: -0.025em; }
.ws-buy-hero h1 em { font-style: normal; color: var(--accent); }
.ws-checks { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; }
.ws-checks li { position: relative; padding-left: 30px; }
.ws-checks li::before {
	content: ""; position: absolute; left: 2px; top: 5px; width: 16px; height: 9px;
	border-left: 3px solid var(--done); border-bottom: 3px solid var(--done); transform: rotate(-45deg);
}
.ws-buy-card {
	position: sticky; top: calc(var(--topbar-h) + 20px);
	padding: 28px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.ws-buy-price { margin-bottom: 16px; }
.ws-buy-amount { display: block; font: 800 48px/1 var(--font-head); color: var(--ink); letter-spacing: -0.03em; }
.ws-buy-regular { display: block; margin-top: 6px; color: var(--muted); font-size: 16px; }
.ws-buy-card .ws-alert { margin-bottom: 12px; }
.ws-buy-section { margin-top: 64px; }
.ws-buy-modules { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.ws-buy-modules li { display: flex; gap: 14px; padding: 18px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.ws-buy-modules h3 { font-size: 18px; margin-bottom: 4px; }
.ws-buy-modules p { margin: 0; font-size: 16px; color: var(--muted); }
.ws-buy-num {
	flex: none; width: 38px; height: 38px; display: grid; place-items: center;
	font: 800 17px var(--font-head); color: var(--paper); background: var(--ink); border-radius: var(--radius-sm);
}
.ws-buy-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; padding: 32px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.ws-buy-two h2 { font-size: 22px; }
.ws-buy-who { text-align: left; }
.ws-footer { padding: 24px 16px 40px; text-align: center; color: var(--muted); font-size: 15px; border-top: 1px solid var(--line); background: var(--paper); }
.ws-footer p { margin: 0 auto; }

/* ---------- Progress meter ---------- */

.ws-meter { height: 8px; background: var(--line-soft); border-radius: 999px; overflow: hidden; }
.ws-meter > span {
	display: block; height: 100%; width: 0; background: var(--done); border-radius: inherit;
	transition: width 400ms var(--ease-out);
}

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

.ws-shell {
	display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: clamp(20px, 3vw, 40px);
	width: min(100% - 32px, 1280px); margin: 0 auto; padding: 28px 0 80px;
}

.ws-outline { position: sticky; top: calc(var(--topbar-h) + 20px); align-self: start; max-height: calc(100dvh - var(--topbar-h) - 40px); overflow: auto; }
.ws-outline > summary { display: none; }
.ws-outline-body { padding: 18px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.ws-outline-title { font: 700 14px var(--font-head); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 10px; }
.ws-outline ol { list-style: none; margin: 0; padding: 0; }
.ws-outline-module > a {
	display: flex; gap: 10px; align-items: baseline; padding: 7px 8px; margin: 0 -8px;
	color: var(--ink-2); text-decoration: none; font-size: 16px; border-radius: 6px;
}
.ws-outline-module > a:hover { background: var(--wash); }
.ws-outline-num { flex: none; width: 22px; font: 700 15px var(--font-head); color: var(--muted); }
.ws-outline-module.is-done > a .ws-outline-num { color: var(--done); }
.ws-outline-module.is-open > a { font-weight: 700; color: var(--ink); }
.ws-outline-lessons { margin: 2px 0 8px 22px !important; border-left: 2px solid var(--line-soft); }
.ws-outline-lessons a {
	position: relative; display: block; padding: 6px 10px 6px 26px;
	font-size: 15px; color: var(--muted); text-decoration: none;
}
.ws-outline-lessons a::before {
	content: ""; position: absolute; left: 8px; top: 13px; width: 9px; height: 9px;
	border: 2px solid var(--line); border-radius: 50%; background: var(--paper);
}
.ws-outline-lessons a:hover { color: var(--ink); }
.ws-outline-lessons .is-done a::before { background: var(--done); border-color: var(--done); }
.ws-outline-lessons .is-current a { color: var(--ink); font-weight: 700; background: var(--accent-wash); border-radius: 0 6px 6px 0; }
.ws-outline-lessons .is-current a::before { border-color: var(--accent); }
.ws-outline-lessons .is-current { margin-left: -2px; border-left: 2px solid var(--accent); }
.ws-outline-foot { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); display: grid; gap: 6px; font-size: 15px; }

.ws-lesson { min-width: 0; max-width: 860px; }
.ws-lesson-head { margin-bottom: 28px; }
.ws-crumb { font: 600 15px var(--font-head); color: var(--accent-ink); letter-spacing: .02em; margin-bottom: 8px; }
.ws-lesson-head h1 { font-size: clamp(28px, 3.4vw, 38px); letter-spacing: -0.02em; }
.ws-lesson-meta { color: var(--muted); font-size: 15px; }

.ws-block { margin: 0 0 28px; }
.ws-text { font-size: 18px; }
.ws-text ul, .ws-text ol { padding-left: 24px; max-width: 70ch; }
.ws-text li { margin-bottom: 6px; }
.ws-text table, .ws-card table { width: 100%; border-collapse: collapse; margin: 8px 0 16px; font-size: 16px; background: var(--paper); }
.ws-text th, .ws-text td, .ws-card th, .ws-card td { padding: 8px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.ws-text th, .ws-card th { background: var(--wash); color: var(--ink); font-weight: 700; }
.ws-text tbody tr:nth-child(even) td, .ws-card tbody tr:nth-child(even) td { background: #fafbfd; }

.ws-card { padding: 20px 22px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.ws-card > :last-child { margin-bottom: 0; }
.ws-card-kicker { display: block; margin-bottom: 6px; font: 700 14px var(--font-head); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ws-card h3 { font-size: 20px; }

.ws-example { border-left: 4px solid var(--ink); }
.ws-callout { border-left: 4px solid var(--accent); background: linear-gradient(90deg, var(--accent-wash), var(--paper) 60%); }
.ws-callout-mistake, .ws-callout-legal { border-left-color: var(--warn); background: linear-gradient(90deg, var(--warn-wash), var(--paper) 60%); }
.ws-callout-mistake .ws-card-kicker, .ws-callout-legal .ws-card-kicker { color: var(--warn); }
.ws-callout-equity { border-left-color: var(--done); background: linear-gradient(90deg, var(--done-wash), var(--paper) 60%); }
.ws-callout-equity .ws-card-kicker { color: var(--done); }

.ws-reference { padding: 0; }
.ws-reference > summary {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 14px 20px; cursor: pointer; list-style: none; font: 700 17px var(--font-head); color: var(--ink);
}
.ws-reference > summary::-webkit-details-marker { display: none; }
.ws-reference > summary::after { content: "+"; font-size: 22px; color: var(--muted); transition: transform 200ms var(--ease-out); }
.ws-reference[open] > summary::after { transform: rotate(45deg); }
.ws-reference-body { padding: 0 20px 18px; border-top: 1px solid var(--line-soft); padding-top: 14px; }

.ws-summary { background: var(--ink); border-color: var(--ink); color: #dbe4f7; }
.ws-summary h3, .ws-summary strong { color: #fff; }
.ws-summary .ws-card-kicker { color: #9fd17a; }
.ws-summary ul { margin: 0; padding-left: 22px; }
.ws-summary li { margin-bottom: 6px; }

/* Video */
.ws-video { overflow: hidden; padding: 0; }
.ws-video-frame { position: relative; aspect-ratio: 16 / 9; background: var(--ink); }
.ws-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ws-video-placeholder {
	position: absolute; inset: 0; display: grid; place-content: center; gap: 10px; padding: 24px; text-align: center;
	color: #c8d4ee;
	background:
		radial-gradient(120% 90% at 85% 0%, rgba(26, 107, 240, .45), transparent 60%),
		repeating-linear-gradient(135deg, rgba(255, 255, 255, .03) 0 12px, transparent 12px 24px),
		var(--ink);
}
.ws-video-placeholder strong { color: #fff; font: 700 20px var(--font-head); }
.ws-video-placeholder p { margin: 0 auto; max-width: 46ch; font-size: 16px; }
.ws-video-cap { display: flex; justify-content: space-between; gap: 12px; padding: 12px 18px; font-size: 15px; color: var(--muted); }
.ws-video-cap strong { color: var(--ink); }

/* ---------- Exercise ---------- */

.ws-exercise {
	margin: 0 0 32px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
	scroll-margin-top: calc(var(--topbar-h) + 16px);
}
.ws-exercise-head { padding: 20px 24px 16px; border-bottom: 1px solid var(--line-soft); position: relative; }
.ws-exercise-head h2 { font-size: 24px; margin-bottom: 6px; }
.ws-kicker { display: inline-flex; align-items: center; gap: 8px; font: 700 14px var(--font-head); text-transform: uppercase; letter-spacing: .08em; color: var(--accent-ink); margin-bottom: 6px; }
.ws-exercise.is-done .ws-kicker { color: var(--done); }
.ws-exercise.is-done .ws-kicker::after {
	content: "Done"; padding: 1px 10px; font-size: 14px; letter-spacing: .02em; text-transform: none;
	color: #fff; background: var(--done); border-radius: 999px;
}
.ws-exercise-intro { color: var(--muted); }
.ws-exercise-intro > :last-child { margin-bottom: 0; }
.ws-exercise-body {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px 20px;
	padding: 22px 24px 26px;
}
.ws-field { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ws-field > .ws-label { margin-bottom: 0; }
.ws-wide { grid-column: 1 / -1; }
.ws-field.has-error .ws-input { border-color: var(--error); }
.ws-field-error { margin-top: 4px; font-size: 15px; color: var(--error); font-weight: 600; }

/* Choices */
.ws-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.ws-field-radio .ws-choices { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.ws-choice {
	position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px;
	background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer;
	transition: border-color 160ms ease, background-color 160ms ease;
}
.ws-choice:hover { border-color: #9fb3d1; }
.ws-choice input { flex: none; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--accent); }
.ws-choice-text { display: grid; gap: 2px; font-size: 16px; }
.ws-choice-text strong { font-weight: 600; }
.ws-choice-text small { font-size: 14px; color: var(--muted); line-height: 1.4; }
.ws-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); }

.ws-other { margin-top: 10px; display: grid; gap: 8px; justify-items: start; }
.ws-other-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; width: 100%; }
.ws-other-item { display: flex; gap: 8px; }

/* Scale */
.ws-scale { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ws-scale-end { font-size: 14px; color: var(--muted); }
.ws-scale-dot { position: relative; cursor: pointer; }
.ws-scale-dot input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ws-scale-dot span {
	display: grid; place-items: center; width: 40px; height: 40px;
	font: 700 16px var(--font-head); color: var(--ink-2);
	background: var(--paper); border: 1px solid var(--line); border-radius: 50%;
	transition: transform 140ms var(--ease-out), background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.ws-scale-dot:hover span { border-color: var(--accent); }
.ws-scale-dot input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.ws-scale-dot input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.ws-scale-dot:active span { transform: scale(0.94); }

/* Repeater: each row is a card on every screen; columns flow into a grid inside it. */
.ws-repeater, .ws-stepsfield { display: grid; gap: 12px; justify-items: start; }
.ws-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; width: 100%; counter-reset: none; }
.ws-row {
	padding: 12px 14px 14px; background: #fbfcfe; border: 1px solid var(--line); border-radius: var(--radius);
	transition: border-color 160ms ease;
}
.ws-row:focus-within { border-color: var(--accent); background: var(--paper); }
.ws-row-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ws-row-num {
	display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px;
	font: 700 14px var(--font-head); color: var(--paper); background: var(--ink); border-radius: 6px;
}
.ws-row-head .ws-icon-btn { width: 32px; height: 32px; }
.ws-row-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 12px; }
.ws-cell { min-width: 0; }
.ws-cell-title, .ws-cell-textarea { grid-column: 1 / -1; }
.ws-cell-title .ws-input { font-weight: 600; }
.ws-cell-scale .ws-scale-dot span { width: 34px; height: 34px; font-size: 15px; }
.ws-cell-scale { grid-column: span 2; }
.ws-cell-computed output, .ws-computed {
	display: flex; align-items: center; min-height: 42px; padding: 8px 12px;
	font: 700 17px var(--font-head); color: var(--ink);
	background: var(--accent-wash); border: 1px dashed #a9c4f5; border-radius: var(--radius-sm);
	font-variant-numeric: tabular-nums;
}
.ws-cell-computed output:empty::before, .ws-computed:empty::before, .ws-total output:empty::before {
	content: "Add numbers"; font: 400 15px var(--font-body); color: var(--muted);
}

.ws-totals {
	width: 100%; margin: 4px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px;
}
.ws-total { padding: 12px 16px; background: var(--ink); border-radius: var(--radius); }
.ws-total dt { font-size: 15px; color: #c8d4ee; font-weight: 600; }
.ws-total dt .ws-calc-tag { background: rgba(255, 255, 255, .12); color: #dbe4f7; }
.ws-total dd { margin: 4px 0 0; }
.ws-total output { font: 800 26px var(--font-head); color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.ws-total output:empty::before { color: #9fb0d0; }

/* Steps */
.ws-step {
	display: flex; gap: 10px; align-items: center; padding: 8px; padding-left: 44px; position: relative;
	background: #fbfcfe; border: 1px solid var(--line); border-radius: var(--radius);
	counter-increment: step;
}
.ws-stepsfield .ws-rows { counter-reset: step; }
.ws-step::before {
	content: counter(step); position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
	width: 24px; height: 24px; display: grid; place-items: center;
	font: 700 14px var(--font-head); color: var(--paper); background: var(--ink); border-radius: 6px;
}
.ws-step > .ws-input { flex: 1; min-width: 0; }
.ws-step-tools { display: flex; gap: 6px; align-items: center; flex: none; }
.ws-step.is-wait { border-style: dashed; background: var(--warn-wash); }
.ws-step.is-wait::before { content: "⏱"; background: var(--warn); }
.ws-step.is-dropped > .ws-input { text-decoration: line-through; color: var(--muted); }
.ws-step.is-dropped { opacity: .75; }
.ws-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); font-size: 15px; cursor: pointer; white-space: nowrap; }
.ws-toggle input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
.ws-toggle:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); }
.ws-toggle-cut:has(input:checked) { border-color: var(--warn); background: var(--warn-wash); color: var(--warn); }

/* Pick */
.ws-pick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ws-pick-list li { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; align-items: center; }
.ws-pick-list .ws-cell-label { margin: 0; font-size: 16px; color: var(--ink); }
.ws-pick-empty { padding: 12px 14px; background: var(--wash); border: 1px dashed var(--line); border-radius: var(--radius-sm); color: var(--muted); margin: 0; }

/* Automation map */
.ws-map { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 28px; }
.ws-map-box {
	position: relative; padding: 14px 16px; min-height: 110px;
	background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius);
}
.ws-map-box:not(:last-child)::after {
	content: "→"; position: absolute; right: -24px; top: 50%; transform: translateY(-50%);
	font: 700 22px var(--font-head); color: var(--accent);
}
.ws-map-title { display: block; margin-bottom: 6px; font: 700 14px var(--font-head); text-transform: uppercase; letter-spacing: .06em; color: var(--accent-ink); }
.ws-map-trigger { background: var(--ink); color: #fff; }
.ws-map-trigger .ws-map-title { color: #9fd17a; }
.ws-map-outcome { border-color: var(--done); background: var(--done-wash); }
.ws-map-outcome .ws-map-title { color: var(--done); }
.ws-map-box p, .ws-map-box ol { margin: 0; font-size: 16px; }
.ws-map-box ol { padding-left: 20px; }
.ws-map-box .is-wait { color: var(--warn); font-style: italic; }
.ws-map-box .is-empty { color: var(--muted); font-style: italic; list-style: none; margin-left: -20px; }
.ws-map-trigger .is-empty { color: #b9c7e4; }

/* ---------- Lesson footer navigation ---------- */

.ws-lesson-nav {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
	margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line);
}
.ws-lesson-nav .ws-btn-primary { min-height: 48px; padding: 12px 24px; font-size: 17px; }
.ws-lesson-nav-hint { flex-basis: 100%; margin: 0; font-size: 15px; color: var(--muted); }

/* ---------- Workshop home ---------- */

.ws-home { width: min(100% - 32px, 1160px); margin: 0 auto; padding: 36px 0 80px; }
.ws-home-hero {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end;
	padding: 28px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.ws-home-hero h1 { font-size: clamp(28px, 3.6vw, 40px); margin-bottom: 8px; }
.ws-home-hero p { margin: 0; color: var(--muted); }
.ws-home-stat { display: grid; justify-items: end; gap: 10px; min-width: 240px; }
.ws-home-stat strong { font: 800 44px/1 var(--font-head); letter-spacing: -0.03em; }
.ws-home-stat .ws-meter { width: 100%; }
.ws-home-grid { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.ws-module-card {
	display: flex; flex-direction: column; gap: 10px; padding: 20px;
	background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
	transition: border-color 160ms ease;
}
.ws-module-card:hover { border-color: #9fb3d1; }
.ws-module-card.is-done { border-color: #bfdca8; }
.ws-module-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ws-module-num { font: 700 14px var(--font-head); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ws-status { padding: 2px 10px; font-size: 14px; font-weight: 600; border-radius: 999px; background: var(--wash); color: var(--muted); }
.ws-status.is-started { background: var(--accent-wash); color: var(--accent-ink); }
.ws-status.is-done { background: var(--done-wash); color: #2d6513; }
.ws-module-card h2 { font-size: 20px; margin: 0; }
.ws-module-card h2 a { color: inherit; text-decoration: none; }
.ws-module-card h2 a:hover { color: var(--accent-ink); }
.ws-module-card p { margin: 0; font-size: 16px; color: var(--muted); }
.ws-module-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; font-size: 15px; color: var(--muted); }
.ws-module-foot a { font-weight: 600; }
.ws-home-final { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.ws-home-final .ws-card { display: grid; gap: 10px; align-content: start; }
.ws-home-final .ws-card p { margin: 0; }
.ws-home-final .ws-card .ws-btn { justify-self: start; }

/* ---------- Responsive ---------- */

/* Plan + review */
.ws-plan, .ws-review { width: min(100% - 32px, 920px); margin: 0 auto; padding: 36px 0 80px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.ws-plan-head h1, .ws-review-head h1 { font-size: clamp(28px, 3.6vw, 40px); margin-bottom: 8px; }
.ws-plan-head p, .ws-review-head p { color: var(--muted); max-width: 700px; }
.ws-plan-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ws-plan-section h2 { font-size: 22px; margin-bottom: 10px; }
.ws-plan-body { overflow-x: auto; }
.ws-plan-section.is-empty { background: var(--wash); border-style: dashed; }
.ws-plan-section.is-empty p { margin: 0; color: var(--muted); }
.ws-plan-edit { margin: 8px 0 0; font-size: 16px; }
.ws-core-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ws-core-list li { display: flex; align-items: baseline; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); }
.ws-core-list li.is-done { border-color: #bfdca8; background: var(--done-wash); }
.ws-core-mark { font: 700 14px var(--font-head); text-transform: uppercase; letter-spacing: .04em; min-width: 72px; color: var(--muted); }
.ws-core-list li.is-done .ws-core-mark { color: var(--done); }
.ws-core-list a { margin-left: auto; white-space: nowrap; }
.ws-review-form { display: grid; gap: 10px; justify-items: start; }
.ws-btn[disabled] { opacity: .55; cursor: not-allowed; }
.ws-review-form .ws-hint { margin: 0; color: var(--muted); }
@media (max-width: 700px) {
	.ws-core-list li { flex-wrap: wrap; }
	.ws-core-list a { margin-left: 0; }
}

@media (max-width: 1000px) {
	.ws-shell { grid-template-columns: minmax(0, 1fr); padding-top: 16px; }
	.ws-outline { position: static; max-height: none; overflow: visible; }
	.ws-outline > summary {
		display: flex; justify-content: space-between; align-items: center; gap: 10px;
		padding: 12px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
		font: 700 16px var(--font-head); color: var(--ink); cursor: pointer; list-style: none;
	}
	.ws-outline > summary::-webkit-details-marker { display: none; }
	.ws-outline > summary::after { content: "Outline"; font: 600 15px var(--font-body); color: var(--accent-ink); }
	.ws-outline[open] > summary { border-radius: var(--radius) var(--radius) 0 0; border-bottom-color: var(--line-soft); }
	.ws-outline[open] > summary::after { content: "Close"; }
	.ws-outline-body { border-top: 0; border-radius: 0 0 var(--radius) var(--radius); }
	.ws-buy-hero { grid-template-columns: minmax(0, 1fr); }
	.ws-buy-card { position: static; }
}

@media (max-width: 700px) {
	body { font-size: 16px; }
	h1 { font-size: 28px; }
	h2 { font-size: 22px; }
	.ws-topbar { gap: 6px 10px; flex-wrap: wrap; }
	#ws-save-status { order: 5; flex-basis: 100%; }
	:root:has(#ws-save-status) { --topbar-h: 88px; }
	.ws-brand-text { display: none; }
	.ws-brand-logo { height: 34px; }
	.ws-topbar-progress { min-width: 0; }
	.ws-topbar-progress .ws-meter { width: 64px; }
	.ws-text { font-size: 17px; }
	.ws-exercise-head, .ws-exercise-body { padding-left: 16px; padding-right: 16px; }
	.ws-exercise-body { grid-template-columns: minmax(0, 1fr); }
	.ws-row-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ws-cell-scale { grid-column: 1 / -1; }
	.ws-step { flex-wrap: wrap; padding-left: 40px; }
	.ws-step > .ws-input { flex-basis: 100%; }
	.ws-map { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	.ws-map-box:not(:last-child)::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: -26px; transform: translateX(-50%); }
	.ws-home-hero { grid-template-columns: minmax(0, 1fr); }
	.ws-home-stat { justify-items: start; min-width: 0; }
	.ws-auth-card { padding: 24px 20px; }
	.ws-pick-list li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
	.ws-lesson-nav .ws-btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
	.ws-btn:active, .ws-icon-btn:active, .ws-scale-dot:active span { transform: none; }
}

@media print {
	.ws-topbar, .ws-outline, .ws-lesson-nav, [data-add-row], [data-add-other], .ws-icon-btn { display: none !important; }
	body { background: #fff; }
	.ws-shell { display: block; }
}

.ws-trap {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}