/* Approved Belles component tokens, October 2, 2026. */
:root {
  --dark: #0F172A;
  --light-dark: #1E2E54;
  --primary: #3D5DA9;
  --cornflower: #5B8BFE;
  --pink: #FE1157;
  --light-blue: #B4D5FE;
  --ice: #EEF4FF;
  --white: #FCFCFC;
  --neutral-0: #FCFCFC;
  --neutral-1: #EEF4FF;
  --neutral-2: #DCE7F8;
  --neutral-3: #C5D2E8;
  --neutral-4: #A4B5D1;
  --neutral-5: #778AA9;
  --neutral-6: #4F6382;
  --neutral-7: #2D405C;
  --neutral-8: #0F172A;
  --success: #176247;
  --success-surface: #EBF6F1;
  --warning: #805500;
  --warning-surface: #FFF5DF;
  --error: #9B1C31;
  --error-surface: #FBEFF1;
  --info: var(--primary);
  --info-surface: var(--ice);

  --text-primary: var(--dark);
  --text-secondary: var(--light-dark);
  --text-muted: var(--neutral-6);
  --text-link: var(--primary);
  --surface-page: var(--white);
  --surface-card: var(--white);
  --surface-quiet: var(--ice);
  --border-subtle: var(--neutral-2);
  --border-default: var(--neutral-3);
  --border-control: var(--neutral-5);
  --font-ui: Inter, sans-serif;
  --font-reading: Lora, serif;
  --font-display: "Hogie Angelo", serif;
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;
  --tracking: 0;
  --h1-size: 48px; --h1-line: 56px;
  --h2-size: 34px; --h2-line: 42px;
  --h3-size: 24px; --h3-line: 32px;
  --h4-size: 20px; --h4-line: 28px;
  --h5-size: 17px; --h5-line: 24px;
  --h6-size: 15px; --h6-line: 22px;
  --body-size: 17px; --body-line: 27px;
  --body-small-size: 15px; --body-small-line: 24px;
  --caption-size: 14px; --caption-line: 22px;
  --label-size: 13px; --label-line: 18px;
  --button-size: 19px; --button-line: 24px;
  --ui-compact-size: 14px; --ui-compact-line: 20px;
  --space-0: 0; --space-1: 4px; --space-2: 8px;
  --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px;
  --radius-control: 8px;
  --radius-surface: 16px;
  --radius-pill: 999px;
  --shadow-quiet: 0 1px 2px rgb(15 23 42 / 3%), 0 4px 8px rgb(15 23 42 / 3%);
  --shadow-raised: 0 2px 4px rgb(15 23 42 / 4%), 0 8px 24px rgb(15 23 42 / 6%);
  --shadow-overlay: 0 4px 8px rgb(15 23 42 / 5%), 0 16px 40px rgb(15 23 42 / 8%);
  --motion-fast: 150ms;
  --motion-standard: 200ms;
  --motion-slow: 250ms;
  --motion-ease: ease-out;
  --focus-color: var(--cornflower);
  --focus-width: 3px;
  --focus-offset: 4px;
  --button-height: 52px;
  --button-padding-inline: 20px;
  --button-compact-height: 44px;
  --button-compact-padding-inline: 16px;
  --page-width: 1200px;
  --task-width: 960px;
  --reading-width: 65ch;
  --gutter-wide: 48px;
  --gutter-medium: 32px;
  --gutter-narrow: 24px;
}

/* Belles component system. Values live in tokens.css. Previous styles preserved
   in work/pre-phase-3-components. Existing markup and behavior are unchanged. */
@font-face{font-family:Inter;src:url(brand/inter.ttf) format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:Lora;src:url(brand/lora.ttf) format('truetype');font-weight:400 700;font-display:swap}
@font-face{font-family:"Hogie Angelo";src:url(brand/hogie-angelo.woff2) format('woff2');font-weight:400;font-display:swap}
*{box-sizing:border-box;letter-spacing:var(--tracking)}
html{scroll-behavior:smooth}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font:var(--weight-regular) var(--body-size)/var(--body-line) var(--font-reading)}
a{color:var(--text-link);text-underline-offset:var(--space-1)}
h1,h2,h3,h4,h5,h6{font-family:var(--font-ui);font-weight:var(--weight-bold);color:var(--text-primary);margin:0 0 var(--space-6);overflow-wrap:anywhere}
h1{font-size:var(--h1-size);line-height:var(--h1-line)}h2{font-size:var(--h2-size);line-height:var(--h2-line)}h3{font-size:var(--h3-size);line-height:var(--h3-line)}h4{font-size:var(--h4-size);line-height:var(--h4-line)}h5{font-size:var(--h5-size);line-height:var(--h5-line)}h6{font-size:var(--h6-size);line-height:var(--h6-line)}
p{margin:0 0 var(--space-6);max-width:var(--reading-width)}strong{font-weight:var(--weight-bold)}
.small{font:var(--weight-regular) var(--body-small-size)/var(--body-small-line) var(--font-reading);color:var(--text-muted)}
.eyebrow{font:var(--weight-semibold) var(--label-size)/var(--label-line) var(--font-ui);color:var(--text-secondary);margin:0 0 var(--space-3)}
.lead{font:var(--weight-regular) var(--body-size)/var(--body-line) var(--font-reading);max-width:var(--reading-width);color:var(--text-secondary)}
header,main,footer{max-width:var(--page-width);margin:auto;padding-left:var(--gutter-wide);padding-right:var(--gutter-wide)}
.header-shell{background:var(--white);border-bottom:1px solid var(--border-subtle)}
header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);padding-top:var(--space-4);padding-bottom:var(--space-4)}
.brand-lockup{display:flex;align-items:center;gap:var(--space-4);min-width:0}.brand{display:flex;align-items:center;color:var(--dark);text-decoration:none}.brand img{width:var(--space-8);height:var(--space-8)}
/* Use the verified monogram. Keep the original text node preserved but hidden
   until the original outlined wordmark asset is verified. */
.brand>span{display:none}.workspace-name{font:var(--weight-semibold) var(--ui-compact-size)/var(--ui-compact-line) var(--font-ui);color:var(--text-secondary)}
header nav{display:flex;align-items:center;gap:var(--space-2)}
main{padding-top:var(--space-8);padding-bottom:var(--space-16)}main[data-view=workshop],main[data-view=article]{max-width:var(--task-width)}
footer{padding-top:var(--space-8);padding-bottom:var(--space-8);border-top:1px solid var(--border-subtle);color:var(--text-muted);font:var(--weight-regular) var(--caption-size)/var(--caption-line) var(--font-reading)}footer p{margin-bottom:var(--space-2)}
button,.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--button-height);max-width:100%;padding:var(--space-3) var(--button-padding-inline);border:0;border-radius:var(--radius-pill);background:var(--light-blue);color:var(--light-dark);font:var(--weight-bold) var(--button-size)/var(--button-line) var(--font-ui);cursor:pointer;text-align:center;text-decoration:none;transition:background-color var(--motion-standard) var(--motion-ease),color var(--motion-standard) var(--motion-ease)}
.button-label{display:block;min-width:0;overflow-wrap:anywhere}
button:hover,.button:hover{background:var(--ice)}button.primary{background:var(--primary);color:var(--white)}button.primary:hover{background:var(--light-dark)}
button:disabled,.button[aria-disabled=true]{background:var(--neutral-2);color:var(--text-secondary);cursor:not-allowed}
button[aria-busy=true]{cursor:progress}
header nav button,.card-bottom button,.guide-card .button,.saved-result button,.article-practice button{font:var(--weight-bold) var(--ui-compact-size)/var(--ui-compact-line) var(--font-ui);min-height:var(--button-compact-height);padding:var(--space-3) var(--button-compact-padding-inline)}
header nav button{background:transparent;color:var(--text-secondary)}header nav button:hover{background:var(--ice)}header nav button[aria-current=page]{background:var(--light-blue);color:var(--light-dark)}
/* Copy is a secondary action on the request step. Step progression stays primary. */
.task>[data-action=copy].primary{background:var(--light-blue);color:var(--light-dark)}.task>[data-action=copy].primary:hover{background:var(--ice)}
:is(button,a,textarea,select,summary,input):focus-visible{outline:var(--focus-width) solid var(--focus-color);outline-offset:var(--focus-offset)}
/* Soft-white backing keeps Cornflower focus contrast clear on Ice surfaces. */
:is(button,a,textarea,select,summary,input):focus-visible{box-shadow:0 0 0 calc(var(--focus-offset) + var(--focus-width) + 1px) var(--white)}
/* Programmatic heading focus announces navigation without a control ring. */
h1:focus,.task h2:focus{outline:none}
.skip-link{position:absolute;left:-9999px}.skip-link:focus{left:var(--space-4);top:var(--space-4);padding:var(--space-3);background:var(--white);z-index:10}
.portal-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,20%);align-items:center;gap:var(--space-8);padding:var(--space-6) 0 var(--space-8)}.portal-hero h1{margin-bottom:var(--space-4)}.portal-hero .lead{margin-bottom:0}
.home-settings label{margin:0 0 var(--space-2)}.home-settings select{min-height:var(--button-compact-height)}
.next-workshop{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);padding:var(--space-6);border-radius:var(--radius-surface);background:var(--ice)}.next-workshop>div{min-width:0}.next-workshop h2{font-size:var(--h3-size);line-height:var(--h3-line);margin:0}.next-workshop button{flex-shrink:0}.next-workshop .eyebrow{margin-bottom:var(--space-2)}
.path-caption{display:flex;justify-content:space-between;align-items:center;gap:var(--space-6);margin:var(--space-8) 0}.path-caption p,.path-caption .small{font:var(--weight-semibold) var(--ui-compact-size)/var(--ui-compact-line) var(--font-ui);margin:0;color:var(--text-secondary)}
.progress-summary{display:flex;align-items:center;gap:var(--space-4);font-variant-numeric:tabular-nums}.progress-summary progress{appearance:none;width:calc(var(--space-16) + var(--space-12));height:var(--space-2);border:0;border-radius:var(--radius-pill);overflow:hidden;background:var(--neutral-2)}.progress-summary progress::-webkit-progress-bar{background:var(--neutral-2)}.progress-summary progress::-webkit-progress-value{background:var(--primary)}.progress-summary progress::-moz-progress-bar{background:var(--primary)}
.path-grid,.lesson-grid,.library-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6)}
.path-card,.lesson-card,.guide-card,.saved-result,.empty-work,.task,.article-sections{background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-surface);box-shadow:none}
.path-card,.lesson-card{display:flex;flex-direction:column;min-width:0}.path-card.is-next{border-color:var(--primary)}
.card-topline{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--border-subtle);font:var(--weight-semibold) var(--ui-compact-size)/var(--ui-compact-line) var(--font-ui);color:var(--text-secondary)}
.stage-label{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2)}.path-number{font:var(--weight-bold) var(--h3-size)/var(--h3-line) var(--font-ui);font-variant-numeric:tabular-nums;color:var(--primary)}
.card-content{padding:var(--space-6);display:flex;flex-direction:column;flex:1;min-width:0}.card-content h2{font-size:var(--h3-size);line-height:var(--h3-line);margin-bottom:var(--space-4)}.card-content>p{margin-bottom:var(--space-6)}.card-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-4);margin-top:auto}.card-bottom p{margin:0;font:var(--weight-semibold) var(--ui-compact-size)/var(--ui-compact-line) var(--font-ui);font-variant-numeric:tabular-nums}
.lesson-grid{margin-top:var(--space-8)}.lesson-card .card-bottom{justify-content:flex-start}.path-footnote{margin:var(--space-8) 0 0}
.state-tag{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);border-radius:var(--radius-control);background:var(--ice);color:var(--light-dark);font:var(--weight-semibold) var(--ui-compact-size)/var(--ui-compact-line) var(--font-ui)}.state-tag.next{background:var(--light-blue)}
.breadcrumbs{margin:0 0 var(--space-6);font:var(--weight-semibold) var(--ui-compact-size)/var(--ui-compact-line) var(--font-ui);color:var(--text-muted)}.breadcrumbs ol{list-style:none;padding:0;margin:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-2) 0}.breadcrumbs li{display:inline-flex;align-items:baseline;min-width:0;max-width:100%;overflow-wrap:anywhere;margin:0}.breadcrumbs li+li::before{content:"/";margin:0 var(--space-2);color:var(--text-muted)}.breadcrumbs a{text-decoration:none;padding:var(--space-1) 0}.breadcrumbs a:hover{text-decoration:underline}.breadcrumbs [aria-current=page]{color:var(--text-secondary)}
.workshop-position{font:var(--weight-semibold) var(--ui-compact-size)/var(--ui-compact-line) var(--font-ui);font-variant-numeric:tabular-nums;color:var(--text-muted);margin-bottom:var(--space-4)}
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-2);margin:var(--space-8) 0;font:var(--weight-semibold) var(--ui-compact-size)/var(--ui-compact-line) var(--font-ui)}.steps span{padding:var(--space-3);border-bottom:var(--space-1) solid var(--border-subtle);color:var(--text-muted)}.steps span[aria-current]{color:var(--light-dark);border-color:var(--primary);background:var(--ice);border-radius:var(--radius-control)}.steps .step-complete{color:var(--primary);border-color:var(--light-blue)}
.task{padding:var(--space-8)}.task h2{font-size:var(--h3-size);line-height:var(--h3-line)}.task>.fields{margin-top:var(--space-6)}
label{display:block;font:var(--weight-semibold) var(--label-size)/var(--label-line) var(--font-ui);margin:var(--space-6) 0 var(--space-2);color:var(--text-secondary)}
textarea,select{width:100%;font:var(--weight-regular) var(--ui-compact-size)/var(--ui-compact-line) var(--font-ui);padding:var(--space-4);background:var(--white);color:var(--text-primary);border:1px solid var(--border-control);border-radius:var(--radius-control);font-variant-numeric:tabular-nums}textarea{resize:vertical}textarea::placeholder{color:var(--text-muted)}
pre{white-space:pre-wrap;overflow-wrap:anywhere;font:var(--weight-regular) var(--body-small-size)/var(--body-small-line) var(--font-reading);max-width:100%;padding:var(--space-6);margin:var(--space-6) 0;background:var(--ice);border-radius:var(--radius-control)}
.callout{padding:var(--space-6);margin:var(--space-6) 0;background:var(--ice);border-radius:var(--radius-control)}.callout h3{font-size:var(--h4-size);line-height:var(--h4-line)}.callout p:last-child{margin-bottom:0}
.actions,.step-actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-4);margin:var(--space-6) 0}.step-actions{justify-content:space-between}
.review label{display:flex;align-items:flex-start;gap:var(--space-4);font:var(--weight-semibold) var(--ui-compact-size)/var(--ui-compact-line) var(--font-ui);padding:var(--space-4) 0;margin:0;border-bottom:1px solid var(--border-subtle)}.review input{width:var(--space-6);height:var(--space-6);flex-shrink:0;margin:0;accent-color:var(--primary)}
ol,ul{padding-left:var(--space-6)}li{margin:var(--space-3) 0}details{padding:var(--space-5) 0;border-bottom:1px solid var(--border-subtle)}summary{cursor:pointer;font:var(--weight-semibold) var(--ui-compact-size)/var(--ui-compact-line) var(--font-ui);min-height:var(--button-compact-height);padding:var(--space-3) 0;color:var(--text-secondary)}details>p{margin-top:var(--space-4)}details details{margin-left:0}
.feedback:empty{display:none}.feedback:not(:empty){font:var(--weight-semibold) var(--ui-compact-size)/var(--ui-compact-line) var(--font-ui);padding:var(--space-4);border-left:var(--space-1) solid var(--info);border-radius:var(--radius-control);color:var(--info);background:var(--info-surface)}
.step-validation{padding:var(--space-6);margin-top:var(--space-6);background:var(--error-surface);border-left:var(--space-1) solid var(--error);border-radius:var(--radius-control);color:var(--error);scroll-margin-top:var(--space-6)}.step-validation h2{font-size:var(--h4-size);line-height:var(--h4-line);color:var(--error);margin-bottom:var(--space-3)}.step-validation p{font-size:var(--body-small-size);line-height:var(--body-small-line);margin-bottom:var(--space-4)}.step-validation ul{margin:0}.step-validation a{color:var(--error)}.field-error{font:var(--weight-regular) var(--body-small-size)/var(--body-small-line) var(--font-reading);color:var(--error);margin:var(--space-2) 0 var(--space-4)}.field-error[hidden]{display:none}textarea[aria-invalid=true]{border:2px solid var(--error)}input[aria-invalid=true]{outline:2px solid var(--error);outline-offset:var(--space-1)}
.library-cards{margin:var(--space-8) 0}.guide-card{display:flex;flex-direction:column;padding:var(--space-6);min-width:0}.guide-card h2{font-size:var(--h3-size);line-height:var(--h3-line);margin-bottom:var(--space-4)}.guide-use{font-size:var(--body-small-size);line-height:var(--body-small-line);color:var(--text-secondary);margin-top:auto}.guide-use strong{font:var(--weight-semibold) var(--label-size)/var(--label-line) var(--font-ui)}.guide-card .button{align-self:flex-start}.library-note{margin:var(--space-8) 0}.library-archive{border-top:1px solid var(--border-subtle)}
.article-purpose{font:var(--weight-regular) var(--body-size)/var(--body-line) var(--font-reading)}.library-article>.lead{margin-bottom:var(--space-8)}.article-sections{padding:var(--space-8);max-width:var(--reading-width)}.article-sections section+section{padding-top:var(--space-6);margin-top:var(--space-6);border-top:1px solid var(--border-subtle)}.article-sections h2,.article-practice h2,.article-depth h2{font-size:var(--h3-size);line-height:var(--h3-line)}.article-sections ul{margin-bottom:0}.article-practice,.article-depth{margin-top:var(--space-10);padding-top:var(--space-8);border-top:1px solid var(--border-subtle)}.source-readings{margin-top:var(--space-6)}
.reading-body{font:var(--weight-regular) var(--body-size)/var(--body-line) var(--font-reading);max-width:var(--reading-width);padding:var(--space-4) 0;overflow-wrap:anywhere}.reading-body h4{font:var(--weight-bold) var(--h4-size)/var(--h4-line) var(--font-ui);margin:var(--space-6) 0 var(--space-4)}.reading-body dt{font:var(--weight-semibold) var(--ui-compact-size)/var(--ui-compact-line) var(--font-ui)}.reading-body dd{margin:var(--space-2) 0 var(--space-6)}.reading-body table{font:var(--weight-semibold) var(--ui-compact-size)/var(--ui-compact-line) var(--font-ui);font-variant-numeric:tabular-nums;width:100%;table-layout:fixed;border-collapse:collapse;margin:var(--space-6) 0}.reading-body caption{text-align:left;margin-bottom:var(--space-3)}.reading-body th,.reading-body td{text-align:left;vertical-align:top;padding:var(--space-3);border:1px solid var(--border-default);overflow-wrap:anywhere}.reading-body thead{background:var(--ice)}.reading-body tbody tr:hover{background:var(--ice)}
.saved-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);margin-bottom:var(--space-8)}.saved-heading p{margin:0}.saved-heading button{flex-shrink:0}.saved-result{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);padding:var(--space-6);margin:var(--space-6) 0}.saved-result>div{min-width:0}.saved-result h2{font-size:var(--h3-size);line-height:var(--h3-line);margin-bottom:var(--space-4)}.saved-result button{flex-shrink:0}.empty-work{padding:var(--space-8)}.empty-work h2{font-size:var(--h3-size);line-height:var(--h3-line)}.saved-note{margin-top:var(--space-6)}
@media(max-width:1100px){header,main,footer{padding-left:var(--gutter-medium);padding-right:var(--gutter-medium)}.next-workshop{align-items:flex-start;flex-direction:column}.path-caption{align-items:flex-start;flex-direction:column;gap:var(--space-3)}.card-bottom{align-items:flex-start;flex-direction:column}}
@media(max-width:760px){header{flex-wrap:wrap}.portal-hero{grid-template-columns:1fr;gap:var(--space-6)}.home-settings{max-width:100%}.path-grid,.lesson-grid,.library-cards{grid-template-columns:1fr}.saved-heading,.saved-result{align-items:flex-start;flex-direction:column}.steps{display:block}.steps span{display:none}.steps span[aria-current]{display:block}.saved-heading h1{margin-bottom:var(--space-4)}}
@media(max-width:600px){header,main,footer{padding-left:var(--gutter-narrow);padding-right:var(--gutter-narrow)}header{gap:var(--space-4)}header nav{width:100%;justify-content:space-between}header nav button{flex:1;padding-inline:var(--space-3)}main{padding-top:var(--space-6);padding-bottom:var(--space-12)}.task,.article-sections,.empty-work{padding:var(--space-6)}textarea,select{font-size:var(--h5-size);line-height:var(--h5-line)}.step-actions{align-items:stretch}.step-actions button{flex:1;min-width:0}.progress-summary{flex-wrap:wrap}.guide-card,.card-content{padding:var(--space-6)}.next-workshop{padding:var(--space-6)}.breadcrumbs li+li::before{margin:0 var(--space-1)}.reading-body th,.reading-body td{padding:var(--space-2)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}button,.button{transition:none}}

h1.workshop-title{font-size:clamp(28px,3vw,36px);line-height:1.22;margin-bottom:16px}