/* Architecture OS · S08 Workshop v0.10.0. Presentation only. */
:root {
  color-scheme: light;
  --ink:#20392f; --ink-soft:#45564c; --soft:#45564c; --muted:#626a60;
  --paper:#f6f0e4; --paper-deep:#eee4d3; --card:#fffdf8;
  --line:#d8cebc; --line-dark:#b9ae99;
  --blue:#294c78; --blue-deep:#254b70; --blue-pale:#e7edf2;
  --rust:#a3472c; --rust-pale:#f4e4d8; --green:#28583f;
  --shadow:0 12px 32px #28392b0a; --shadow-soft:0 4px 18px #28392b06;
  --radius-xl:22px; --radius-lg:18px; --radius-md:12px;
}
body { background:var(--paper); color:var(--ink); }
a,button,input,select,textarea { touch-action:manipulation; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline:3px solid #294c78; outline-offset:4px;
}
.skip-link { position:fixed; top:8px; left:8px; z-index:100; padding:12px 18px; background:var(--ink); color:#fff; transform:translateY(-160%); }
.skip-link:focus { transform:translateY(0); }
.brand-mark,.mark { border:0; border-radius:50% 50% 9px 9px; background:#173e32; color:#fffdf8; }
.brand-mark i { background:#fffdf8; }
.brand b { letter-spacing:-.025em; }
.brand small { color:var(--muted); letter-spacing:.09em; }
.topbar { background:#f6f0e4f5; border-color:var(--line); }
.topnav { background:transparent; border:0; }
.nav-link:hover { background:var(--paper-deep); box-shadow:none; }
.nav-link.is-active { background:#173e32; color:#fffdf8; box-shadow:none; }
.account-controls .account-login,.account-controls .account-retry,.account-controls .account-logout { border-radius:10px; min-height:44px; }
.account-controls .account-login { background:#173e32; color:#fffdf8; }
.account-controls .account-avatar { background:var(--paper-deep); color:#173e32; border:1px solid var(--line); }
.account-controls .account-name { color:var(--ink); }
.account-controls .account-role,.account-controls .account-message { color:var(--muted); }
.primary-button,.secondary-button,.primary,.secondary { display:inline-flex; align-items:center; justify-content:center; min-height:46px; border-radius:12px; text-decoration:none; line-height:1.35; }
.primary-button,.primary { background:#173e32; color:#fffdf8; box-shadow:none; }
.primary-button:hover,.primary:hover { background:#285640; transform:none; }
.secondary-button:hover { transform:none; }
.text-button,.back-button { min-height:44px; }
.eyebrow { color:var(--rust); }
.display-title { font-size:clamp(38px,5vw,62px); letter-spacing:-.04em; line-height:1.06; }
.page { padding-top:36px; }
.week-hero { grid-template-columns:minmax(0,1.7fr) minmax(265px,.75fr); gap:28px; }
.hero-copy { min-height:0; padding:16px 0 0; border:0; background:transparent; box-shadow:none; overflow:visible; }
.hero-copy::after { content:none; }
.hero-copy .lede { max-width:650px; margin-bottom:18px; font-size:17px; }
.hero-meta { margin:0; }
.studio-next { width:100%; padding:24px; border-radius:18px; color:#fffdf8; background:#173e32; }
.studio-next .lesson-kicker { color:#efc7ab; }
.studio-next h2 { margin:8px 0 16px; font:500 clamp(22px,2.5vw,29px)/1.18 Georgia,serif; }
.studio-next .primary-button { background:#fffdf8; color:#173e32; }
.studio-next .primary-button:hover { background:#eee4d3; }
.studio-next-row { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.studio-next-row .microcopy { color:#e1e9df; }
.progress-panel { background:var(--paper-deep); color:var(--ink); padding:26px; border:1px solid var(--line); box-shadow:none; }
.progress-panel p,.progress-panel .progress-row span { color:var(--ink-soft); }
.progress-panel h2 { color:var(--ink); }
.progress-panel .progress-ring { width:112px; height:112px; margin-bottom:18px; background:conic-gradient(var(--rust) calc(var(--progress)*1%),#d8cdbb 0); }
.progress-panel .progress-ring::before { background:var(--paper-deep); inset:7px; }
.progress-panel .progress-ring strong { color:var(--ink); font-size:32px; }
.progress-panel .progress-row { border-color:var(--line); }
.progress-panel .text-button { color:var(--blue-deep); text-align:left; }
.section-head { margin-bottom:18px; }
.section-head h2 { font-size:clamp(27px,3vw,36px); }
.section-head p { color:var(--ink-soft); }
.track-card { padding:28px; border-color:var(--line); box-shadow:none; }
.track-card::after { content:none; }
.track-card:not(.blueprint) .lesson-kicker { color:var(--rust); }
.track-card.blueprint { background:#eef2f5; border-color:#c2cdd8; }
.track-card h3 { max-width:none; font-size:34px; line-height:1.1; }
.track-card p { font-size:15px; }
.track-card:not(.blueprint) .track-meter i { background:var(--rust); }
.track-card.blueprint .primary-button { background:#294c78; color:#fff; }
.track-actions { margin-top:20px; }
.diagnostic-section { margin-top:44px; padding-top:28px; border-top:1px solid var(--line); }
.lesson-sidebar { background:var(--paper-deep); border:1px solid var(--line); box-shadow:none; border-radius:18px; }
.lesson-sidebar .step-link { min-height:48px; }
.step-link.is-active { background:#173e32; color:#fff; }
.step-link.is-active i { background:#fffdf8; color:#173e32; }
.lesson-header h1 { font-size:clamp(31px,4vw,48px); line-height:1.12; }
.lesson-header p { max-width:70ch; }
.lesson-stage { border-color:var(--line); box-shadow:none; }
.stage-body { padding:30px; }
.stage-title { font-size:clamp(25px,3vw,34px); line-height:1.15; }
.learning-diagram { background:#fffdf8; border-color:var(--line); }
.learning-diagram img { max-height:520px; object-fit:contain; }
.theory-list article,.task-step,.practice-brief { border-radius:12px; }
.theory-list p,.practice-brief p { line-height:1.7; }
.answer-option { min-height:58px; padding:14px; border-radius:12px; }
.baseline-page,.work-page { max-width:940px; margin-inline:auto; }
.work-page .feedback { border-radius:12px; }
.work-file-label { padding:24px; border:1px dashed var(--blue); border-radius:16px; background:var(--blue-pale); font-weight:700; }
.work-file-label input { width:100%; font-size:14px; font-weight:400; }
.work-file-label input::file-selector-button { border:1px solid var(--line-dark); border-radius:10px; background:var(--card); color:var(--ink); min-height:44px; margin-right:12px; padding:10px 14px; font:inherit; cursor:pointer; }
.work-page select,.baseline-form select { min-width:0; max-width:100%; border:1px solid var(--line-dark); border-radius:10px; background:var(--card); color:var(--ink); padding:10px; font-size:16px; }
.work-page fieldset { min-width:0; padding:20px; }
.work-page fieldset legend { padding:0 8px; font-weight:700; }
.work-preview { border-radius:12px; background:#fff; }
.top { border-color:var(--line); }
.audience-link { border-radius:10px; }
.audience-link.primary-nav { background:#173e32; color:#fffdf8; }
.hero { min-height:520px; }
.hero h1 { font-size:clamp(44px,6vw,76px); line-height:1.03; }
.hero-card { background:#173e32; color:#fffdf8; border:0; border-radius:22px; }
.hero-card .lesson small { color:#d1ded3; }
.hero-card p { color:#d1ded3; }
.hero-card .lesson em { color:#efc7ab; }
.item { box-shadow:none; border-color:var(--line); }
.status { background:var(--card); }
.login-shell { width:min(480px,calc(100% - 32px)); }
.login-card { background:var(--card); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); }
.login-card h1 { color:var(--ink); }
.login-card input { background:#fff; color:var(--ink); border-color:var(--line-dark); border-radius:10px; }
.login-card #submitButton { background:#173e32; color:#fff; border-radius:12px; min-height:48px; }
.login-card .password-toggle { min-width:44px; }
.login-shell > .brand span { border:0; border-radius:50% 50% 9px 9px; background:#173e32; color:#fffdf8; }
@media(max-width:1000px) {
  .topbar { gap:12px; }
  .week-hero { grid-template-columns:minmax(0,1fr) minmax(240px,.6fr); gap:20px; }
}
@media(max-width:920px) {
  .topbar .topnav { position:static; grid-column:1/-1; grid-row:2; transform:none; width:100%; display:flex; justify-content:stretch; box-shadow:none; padding:0; }
  .topbar .nav-link { flex:1; padding:10px 8px; }
  .topbar { position:relative; }
  .week-hero { grid-template-columns:1fr; }
  .progress-panel { display:block; }
  .progress-panel .progress-ring { float:right; margin:0 0 16px 20px; }
  .progress-panel .progress-list { clear:both; }
  .site-footer { padding-bottom:28px; }
  .toast { bottom:24px; }
}
@media(max-width:640px) {
  .page { width:calc(100% - 32px); padding-top:26px; }
  .hero-copy { min-height:0; padding:0; }
  .hero-copy .lede { font-size:16px; }
  .display-title { font-size:clamp(32px,9vw,44px); }
  .studio-next { padding:20px; }
  .studio-next-row { align-items:stretch; flex-direction:column; }
  .track-card { padding:23px; }
  .track-card h3 { font-size:30px; }
  .track-actions { flex-direction:row; flex-wrap:wrap; }
  .track-actions button { width:auto; flex:1; }
  .stage-body { padding:22px 18px; }
  .lesson-header h1 { font-size:32px; }
  .stage-actions a,.stage-actions button { width:100%; }
  .work-file-label { padding:18px; }
  .work-file-label input::file-selector-button { display:block; margin-bottom:10px; }
  .work-page fieldset { padding:14px; }
  .wrap { width:calc(100% - 32px); }
  .hero { padding:36px 0; }
  .hero h1 { font-size:clamp(36px,10vw,52px); }
  .hero .actions a { width:100%; }
  .audience-nav { gap:4px; }
  .audience-link { padding:8px; font-size:12px; white-space:normal; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
@media(max-width:380px) {
  .topbar .brand b { max-width:106px; white-space:normal; line-height:1.1; }
  .topbar .brand-mark { flex-shrink:0; }
}