/* ============================================================
   CFE Course Design Institute — Stylesheet
   Center for Faculty Excellence · American University
   ============================================================ */

/* === THEME VARIABLES === */
:root {
  --bg:             #f5f7fc;
  --surface:        #ffffff;
  --surface-raised: #eef2fb;
  --text-primary:   #1a2847;
  --text-secondary: #3d5278;
  --text-muted:     #5a7390;
  --accent:         #2358CF;
  --accent-hover:   #1a45a8;
  --accent-subtle:  #eef4ff;
  --border:         #cdd8ef;
  --shadow-sm:      0 1px 4px rgba(35,88,207,.07);
  --shadow-md:      0 4px 18px rgba(35,88,207,.11);
  --shadow-lg:      0 8px 32px rgba(35,88,207,.14);
  --success:        #15803d;
  --success-bg:     #dcfce7;
  --warning:        #d97706;
  --warning-bg:     #fffbeb;
  --sidebar-w:      252px;
  --header-h:       62px;
  --icon-color:     #0000db;
}
[data-theme="dark"] {
  --bg:             #0d1b2e;
  --surface:        #122040;
  --surface-raised: #192e50;
  --text-primary:   #dce6f5;
  --text-secondary: #9cb4d4;
  --text-muted:     #6d8caa;
  --success:        #16a34a;
  --accent:         #8AACF8;
  --accent-hover:   #adc8ff;
  --accent-subtle:  #192e50;
  --border:         #1e3560;
  --shadow-sm:      0 1px 4px rgba(0,0,0,.25);
  --shadow-md:      0 4px 18px rgba(0,0,0,.35);
  --shadow-lg:      0 8px 32px rgba(0,0,0,.45);
  --success-bg:     #14290a;
  --warning-bg:     #2d1f00;
  --icon-color:     #ffffff;
}

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Montserrat', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.65;
  transition: background .3s, color .3s;
  min-height: 100vh;
}

/* === HEADER === */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 3px solid var(--accent);
  padding: 0 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
  box-shadow: var(--shadow-md);
}
.header-left { display: flex; align-items: center; gap: 1rem; }
.logo-container { height: 38px; display: flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.logo-container svg { height: 38px; width: auto; }
.logo-light { display: block; }
.logo-dark  { display: none; }
[data-theme="dark"] .logo-light { display: none; }
[data-theme="dark"] .logo-dark  { display: block; }
.header-divider { width: 1px; height: 26px; background: var(--border); flex-shrink: 0; }
.header-title { font-size: .74rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); }
.header-sub   { font-size: .64rem; font-weight: 500; color: var(--text-muted); letter-spacing: .05em; }
.header-right { display: flex; align-items: center; gap: .6rem; }
.ctrl-btn {
  background: var(--surface-raised); border: 1.5px solid var(--border);
  border-radius: 999px; padding: .32rem .85rem;
  font-family: 'Montserrat', sans-serif; font-size: .69rem; font-weight: 700;
  color: var(--text-secondary); letter-spacing: .05em; cursor: pointer;
  display: flex; align-items: center; gap: .35rem;
  transition: border-color .2s, color .2s; white-space: nowrap;
}
.ctrl-btn:hover { border-color: var(--accent); color: var(--accent); }
.btn-svg-icon { width: 13px; height: 13px; flex-shrink: 0; color: currentColor; display: block; }
.ctrl-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.ctrl-btn.primary:hover { background: var(--accent-hover); }
.hamburger {
  display: none; background: none; border: none; cursor: pointer;
  padding: .4rem; color: var(--text-primary); font-size: 1.2rem;
}

/* === LAYOUT === */
.app-layout { display: flex; padding-top: var(--header-h); min-height: 100vh; }

/* === SIDEBAR === */
.sidebar {
  position: fixed; top: var(--header-h); left: 0; bottom: 0; z-index: 200;
  width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow-y: auto; overflow-x: hidden;
  transition: transform .28s ease;
  display: flex; flex-direction: column;
}
.sidebar-nav { flex: 1; padding: 1rem 0; }
.nav-group-label {
  font-size: .56rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-muted); padding: .65rem 1.1rem .25rem; display: block;
}
.nav-item {
  display: flex; align-items: center; gap: .55rem;
  padding: .48rem 1.1rem;
  font-size: .74rem; font-weight: 600; color: var(--text-secondary);
  cursor: pointer; border-left: 3px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
  user-select: none;
}
.nav-item:hover { background: var(--surface-raised); color: var(--accent); }
.nav-item.active { background: var(--accent-subtle); color: var(--accent); border-left-color: var(--accent); font-weight: 700; }
.nav-num {
  font-size: .58rem; font-weight: 800; letter-spacing: .04em;
  background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: 4px; padding: .08rem .32rem; flex-shrink: 0;
}
.nav-item.active .nav-num { background: var(--accent); color: #fff; border-color: var(--accent); }
.nav-check { font-size: .72rem; margin-left: auto; color: var(--success); display: none; }
.nav-item.done .nav-check { display: block; }
.nav-svg-icon {
  width: 17px; height: 17px; flex-shrink: 0;
  color: var(--icon-color); display: block;
}
.sidebar-footer {
  padding: .9rem 1.1rem;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: .5rem;
}
.sidebar-save-btn {
  width: 100%; background: var(--accent); color: #fff; border: none;
  border-radius: 8px; padding: .55rem; font-family: 'Montserrat', sans-serif;
  font-size: .69rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; transition: background .2s;
}
.sidebar-save-btn:hover { background: var(--accent-hover); }
.sidebar-load-label {
  width: 100%; background: transparent; color: var(--accent);
  border: 1.5px solid var(--accent); border-radius: 8px; padding: .5rem;
  font-family: 'Montserrat', sans-serif; font-size: .69rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
  text-align: center; transition: background .2s;
}
.sidebar-load-label:hover { background: var(--accent-subtle); }

/* === MAIN CONTENT === */
.main-content { margin-left: var(--sidebar-w); flex: 1; min-height: calc(100vh - var(--header-h)); }
.page { display: none; padding: 2.25rem 2.5rem 5rem; max-width: 840px; margin: 0 auto; }
.page.active { display: block; }

/* === PROGRESS BAR === */
.progress-bar-wrap { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; margin-bottom: 2rem; }
.progress-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width .4s; }

/* === WELCOME PAGE === */
.welcome-hero {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 3rem 2.5rem; text-align: center;
  box-shadow: var(--shadow-md); margin-bottom: 1.5rem;
}
.welcome-eyebrow {
  display: block; font-size: .62rem; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: .6rem;
}
.welcome-title {
  font-size: 2.1rem; font-weight: 900; color: var(--text-primary);
  line-height: 1.15; letter-spacing: -.03em; margin-bottom: .65rem;
}
.welcome-title span { color: var(--accent); }
.welcome-desc { font-size: .88rem; color: var(--text-secondary); line-height: 1.75; max-width: 520px; margin: 0 auto 2rem; }
.welcome-btns { display: flex; gap: .85rem; justify-content: center; flex-wrap: wrap; }
.welcome-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-bottom: 1.5rem; }
.welcome-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 1.25rem; box-shadow: var(--shadow-sm);
}
.welcome-card-icon { font-size: 1.6rem; margin-bottom: .4rem; }
.welcome-card-svg-icon { width: 28px; height: 28px; margin-bottom: .4rem; color: var(--icon-color); display: block; }
.welcome-card-title { font-size: .8rem; font-weight: 700; color: var(--text-primary); margin-bottom: .25rem; }
.welcome-card-desc { font-size: .74rem; color: var(--text-secondary); line-height: 1.6; }
.save-info-box {
  background: var(--accent-subtle); border: 1px solid var(--border);
  border-left: 4px solid var(--accent); border-radius: 0 10px 10px 0;
  padding: 1.1rem 1.4rem; margin-bottom: 1.5rem;
}
.save-info-box h3 {
  font-size: .65rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent); margin-bottom: .4rem;
}
.save-info-box p { font-size: .8rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: .35rem; }
.save-info-box p:last-child { margin-bottom: 0; }

/* === ONBOARDING PAGE === */
.onboarding-wrap { max-width: 580px; }
.page-title { font-size: 1.6rem; font-weight: 900; color: var(--text-primary); letter-spacing: -.02em; margin-bottom: .4rem; }
.page-sub { font-size: .86rem; color: var(--text-secondary); line-height: 1.75; margin-bottom: 1.75rem; }
.knowledge-cards { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.75rem; }
.knowledge-card {
  background: var(--surface); border: 2px solid var(--border);
  border-radius: 12px; padding: 1.1rem 1.4rem;
  cursor: pointer; display: flex; align-items: flex-start; gap: .9rem;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.knowledge-card:hover { border-color: var(--accent); background: var(--accent-subtle); }
.knowledge-card.selected { border-color: var(--accent); background: var(--accent-subtle); box-shadow: 0 0 0 3px rgba(35,88,207,.12); }
.kc-radio {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border);
  flex-shrink: 0; margin-top: 3px; display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.knowledge-card.selected .kc-radio { border-color: var(--accent); background: var(--accent); }
.knowledge-card.selected .kc-radio::after { content: ''; display: block; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.kc-title { font-size: .86rem; font-weight: 700; color: var(--text-primary); margin-bottom: .15rem; }
.kc-desc  { font-size: .76rem; color: var(--text-secondary); line-height: 1.6; }

/* === ACTIVITY PAGE HEADER === */
.session-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .58rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  padding: .22rem .7rem; border-radius: 999px; margin-bottom: .7rem;
}
.s1 { background: #dbeafe; color: #1e40af; }
.s2 { background: #ede9fe; color: #5b21b6; }
.s3 { background: #cffafe; color: #0e7490; }
.s8 { background: var(--success-bg); color: #15803d; }
.activity-title { font-size: 1.55rem; font-weight: 900; color: var(--text-primary); letter-spacing: -.02em; margin-bottom: .4rem; }
.activity-intro { font-size: .86rem; color: var(--text-secondary); line-height: 1.75; max-width: 640px; margin-bottom: 1.75rem; }

/* === SPARK SECTION === */
.spark-wrapper { margin-bottom: 1.6rem; }
.spark-bar {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: .8rem 1rem;
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; box-shadow: var(--shadow-sm);
  transition: border-color .2s, background .2s;
}
.spark-bar:hover { border-color: var(--accent); }
.spark-bar.open { border-radius: 10px 10px 0 0; border-color: var(--accent); background: var(--accent-subtle); border-bottom-color: transparent; }
.spark-bar-left { display: flex; align-items: center; gap: .65rem; }
.spark-emoji { font-size: .95rem; }
.spark-svg-icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--icon-color); display: block; }
.spark-bar-label { font-size: .74rem; font-weight: 700; color: var(--text-primary); }
.spark-bar-sub   { font-size: .66rem; color: var(--text-muted); }
.spark-bar-right { display: flex; align-items: center; gap: .5rem; }
.spark-tabs { display: flex; gap: .3rem; }
.spark-tab {
  font-size: .63rem; font-weight: 700; padding: .18rem .55rem; border-radius: 4px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text-muted);
  cursor: pointer; transition: all .15s;
}
.spark-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.spark-chevron { font-size: .7rem; color: var(--text-muted); transition: transform .2s; }
.spark-bar.open .spark-chevron { transform: rotate(180deg); }
.spark-panel {
  display: none; background: var(--surface);
  border: 1px solid var(--accent); border-top: none;
  border-radius: 0 0 10px 10px; padding: 1.25rem 1.4rem;
}
.spark-panel.open { display: block; }
.spark-body { font-size: .81rem; color: var(--text-secondary); line-height: 1.78; }
.spark-body p { margin-bottom: .7rem; }
.spark-body p:last-child { margin-bottom: 0; }
.spark-hl {
  background: var(--surface-raised); border-left: 3px solid var(--accent);
  border-radius: 0 7px 7px 0; padding: .7rem 1rem;
  font-size: .79rem; color: var(--text-secondary); line-height: 1.65; margin: .7rem 0;
}
.spark-table { width: 100%; border-collapse: collapse; font-size: .77rem; margin: .75rem 0; }
.spark-table th {
  background: var(--surface-raised); padding: .5rem .7rem;
  font-weight: 700; text-align: left; border: 1px solid var(--border); color: var(--text-primary);
}
.spark-table td { padding: .42rem .7rem; border: 1px solid var(--border); color: var(--text-secondary); vertical-align: top; }
.spark-section-label {
  font-size: .62rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent); margin: 1rem 0 .45rem; display: block;
}
.spark-section-label:first-child { margin-top: 0; }
.video-placeholder {
  background: var(--surface-raised); border: 2px dashed var(--border);
  border-radius: 10px; padding: 2rem; text-align: center; margin: 1rem 0;
}
.video-icon { font-size: 2.2rem; margin-bottom: .4rem; }
.video-label { font-size: .74rem; font-weight: 600; color: var(--text-muted); }
.video-sub   { font-size: .66rem; color: var(--text-muted); margin-top: .2rem; }

/* === FACULTY EXAMPLE === */
.faculty-example {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 0; margin-bottom: 1.6rem; box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.faculty-label { font-size: .58rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--success); display: flex; align-items: center; gap: .35rem; }
.faculty-svg-icon { width: 14px; height: 14px; flex-shrink: 0; color: var(--success); }
.faculty-body { font-size: .79rem; color: var(--text-secondary); line-height: 1.7; }
.placeholder-box {
  background: var(--warning-bg); border: 2px dashed var(--warning);
  border-radius: 8px; padding: .85rem 1rem;
  font-size: .76rem; color: var(--warning); line-height: 1.6; font-weight: 500;
}

/* === FACULTY EXAMPLE TAB BAR === */
.fex-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1.1rem; cursor: pointer; user-select: none;
  border-bottom: 1px solid transparent; transition: background .15s;
  gap: .75rem;
}
.fex-bar:hover { background: var(--surface-hover, rgba(0,0,0,.03)); }
.fex-bar.open { border-bottom-color: var(--border); }
.fex-bar-left { display: flex; flex-direction: column; gap: .15rem; flex-shrink: 0; }
.fex-bar-sub { font-size: .63rem; color: var(--text-muted); font-weight: 400; }
.fex-bar-right { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.fex-tabs { display: flex; gap: .3rem; flex-wrap: wrap; }
.fex-tab {
  font-size: .65rem; font-weight: 700; letter-spacing: .04em;
  padding: .22rem .55rem; border-radius: 5px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-secondary);
  cursor: pointer; font-family: inherit; transition: background .12s, color .12s, border-color .12s;
  white-space: nowrap;
}
.fex-tab:hover { background: var(--accent-light, rgba(35,88,207,.08)); color: var(--accent); border-color: var(--accent); }
.fex-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.fex-chevron { font-size: .65rem; color: var(--text-muted); transition: transform .2s; flex-shrink: 0; }
.fex-bar.open .fex-chevron { transform: rotate(180deg); }
.fex-panel { display: none; padding: 1rem 1.35rem 1.1rem; }
.fex-panel.open { display: block; }
.fex-body { font-size: .79rem; color: var(--text-secondary); line-height: 1.75; }
.fex-body p { margin-bottom: .65rem; }
.fex-body p:last-child { margin-bottom: 0; }
.fex-course-label {
  font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .45rem;
}

/* === ACTIVITY SECTIONS & STEPS === */
.activity-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 1.5rem; margin-bottom: 1.25rem; box-shadow: var(--shadow-sm);
}
.step-eyebrow {
  font-size: .62rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); margin-bottom: .65rem; display: block;
}
.step-title { font-size: .95rem; font-weight: 800; color: var(--text-primary); margin-bottom: .4rem; }
.step-body  { font-size: .81rem; color: var(--text-secondary); line-height: 1.75; margin-bottom: 1rem; }

/* === FORM ELEMENTS === */
.form-group { margin-bottom: 1rem; }
.form-label { display: block; font-size: .73rem; font-weight: 600; color: var(--text-secondary); margin-bottom: .3rem; letter-spacing: .02em; }
.form-hint  { font-size: .69rem; color: var(--text-muted); margin-bottom: .3rem; line-height: 1.5; }
.form-input, .form-textarea, .form-select {
  width: 100%; background: var(--bg); border: 1.5px solid var(--border);
  border-radius: 8px; padding: .52rem .78rem;
  font-family: 'Montserrat', sans-serif; font-size: .82rem; color: var(--text-primary);
  transition: border-color .2s, box-shadow .2s;
}
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%232358CF' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .75rem center;
  padding-right: 2rem; cursor: pointer;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(35,88,207,.1);
}
.form-textarea { resize: vertical; min-height: 86px; line-height: 1.55; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .75rem; }

/* === REPEATING ROWS === */
.repeating-row {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 1.1rem; margin-bottom: .75rem; box-shadow: var(--shadow-sm); position: relative;
}
.repeating-row-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.row-num { font-size: .63rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.del-row-btn {
  background: none; border: none; font-size: .8rem; cursor: pointer; color: var(--text-muted);
  padding: .18rem .4rem; border-radius: 4px; transition: color .15s, background .15s;
}
.del-row-btn:hover { color: #dc2626; background: #fef2f2; }
.add-row-btn {
  width: 100%; background: var(--surface); border: 1.5px dashed var(--border);
  border-radius: 8px; padding: .6rem; font-family: 'Montserrat', sans-serif;
  font-size: .73rem; font-weight: 700; color: var(--accent); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: .35rem;
  transition: border-color .2s, background .2s; margin-top: .25rem;
}
.add-row-btn:hover { border-color: var(--accent); background: var(--accent-subtle); }

/* === ALIGNMENT GRID TABLE === */
.align-table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.align-table th {
  background: var(--surface-raised); border: 1px solid var(--border);
  padding: .55rem .7rem; font-size: .69rem; font-weight: 700; text-align: left; color: var(--text-primary);
}
.align-table td { border: 1px solid var(--border); padding: .3rem .4rem; vertical-align: top; }
.align-table td textarea {
  width: 100%; min-height: 58px; resize: vertical; background: transparent; border: none;
  font-family: 'Montserrat', sans-serif; font-size: .77rem; color: var(--text-primary);
  padding: .2rem; line-height: 1.5;
}
.align-table td textarea:focus { outline: none; background: var(--accent-subtle); }
.align-table td textarea.align-name-cell { font-weight: 600; background: var(--surface-raised); }
.align-table td textarea.align-name-cell:focus { background: var(--accent-subtle); }

/* === TOOL CALLOUT === */
.tool-callout {
  background: var(--accent-subtle); border: 1.5px solid var(--accent);
  border-radius: 12px; padding: 1.1rem 1.35rem; margin: 1.4rem 0;
  display: flex; align-items: center; gap: 1.1rem;
}
.tool-callout-icon { font-size: 1.8rem; flex-shrink: 0; }
.tool-callout-svg-icon { width: 30px; height: 30px; flex-shrink: 0; color: var(--icon-color); display: block; }
.tool-callout-title { font-size: .8rem; font-weight: 800; color: var(--text-primary); margin-bottom: .15rem; }
.tool-callout-desc { font-size: .74rem; color: var(--text-secondary); line-height: 1.6; }
.tool-callout-link {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .71rem; font-weight: 700; color: var(--accent);
  text-decoration: none; margin-top: .35rem;
}
.tool-callout-link:hover { text-decoration: underline; }

/* === CHECKLIST === */
.checklist-group { margin-bottom: 1.4rem; }
.checklist-group-title {
  font-size: .63rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .65rem;
}
.checklist-item {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .6rem .7rem; border-radius: 8px; cursor: pointer;
  margin-bottom: .3rem; transition: background .15s;
}
.checklist-item:hover { background: var(--surface-raised); }
.checklist-item input[type="checkbox"] { margin-top: 2px; accent-color: var(--accent); width: 15px; height: 15px; flex-shrink: 0; cursor: pointer; }
.checklist-item label { font-size: .81rem; color: var(--text-secondary); line-height: 1.6; cursor: pointer; }
.checklist-item.checked label { color: var(--text-muted); text-decoration: line-through; }

/* === NEXT STEPS === */
.priority-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 1.4rem; margin-bottom: 1rem; box-shadow: var(--shadow-sm);
}
.priority-eyebrow {
  font-size: .6rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .75rem;
}
.priority-grid { display: grid; grid-template-columns: 1fr 1fr 140px; gap: .7rem; }

/* === ACTIVITY NAV BUTTONS === */
.activity-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 1.75rem; border-top: 1px solid var(--border); margin-top: 2rem;
}
.nav-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: 'Montserrat', sans-serif; font-size: .73rem; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
  padding: .62rem 1.35rem; border-radius: 8px; cursor: pointer; transition: all .2s;
}
.nav-btn-primary { background: var(--accent); color: #fff; border: none; }
.nav-btn-primary:hover { background: var(--accent-hover); box-shadow: 0 4px 16px rgba(35,88,207,.3); transform: translateY(-1px); }
.nav-btn-outline { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); }
.nav-btn-outline:hover { background: var(--accent-subtle); }

/* === ACTIVITY 08 SEQUENCER === */
.seq-setup {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 1.35rem; margin-bottom: 1.35rem; box-shadow: var(--shadow-sm);
}
.seq-setup-title {
  font-size: .63rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .9rem;
}
.seq-setup-row { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; margin-bottom: .65rem; }
.seq-setup-label { font-size: .78rem; font-weight: 600; color: var(--text-secondary); flex-shrink: 0; }
.seq-num-input { width: 72px; }
.cat-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.cat-chip {
  display: flex; align-items: center; gap: .35rem;
  padding: .22rem .65rem; border-radius: 999px;
  font-size: .68rem; font-weight: 700; border: 2px solid transparent; cursor: default;
  color: #fff;
}
.cat-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.seq-save-info {
  background: var(--accent-subtle); border: 1px solid var(--border);
  border-left: 4px solid var(--accent); border-radius: 0 8px 8px 0;
  padding: .85rem 1.1rem; margin-bottom: 1.35rem; font-size: .78rem; color: var(--text-secondary); line-height: 1.7;
}
.seq-board-wrap { overflow-x: auto; padding-bottom: 1.5rem; }

/* ── Course Arc Bar ── */
.seq-arc-bar {
  display: flex;
  gap: .9rem;
  margin-bottom: .4rem;
  min-height: 0;
}
.arc-seg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.08);
  padding: .28rem .5rem;
  flex-shrink: 0;
  gap: .05rem;
  transition: opacity .15s;
}
.arc-seg-label {
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
}
.arc-seg-count {
  font-size: .55rem;
  font-weight: 500;
  opacity: .7;
  line-height: 1;
}
[data-theme="dark"] .arc-seg { border-color: rgba(0,0,0,.08); }

/* ── Course Arc Reference Panel ──────────────────────────────── */
.seq-arc-ref { margin-bottom: .75rem; }
.arc-ref-wrap { display: flex; flex-direction: column; gap: .45rem; }
.arc-ref-onething {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  padding: .45rem .75rem; background: var(--accent-subtle);
  border: 1px solid var(--border); border-radius: 7px;
  font-size: .78rem; line-height: 1.5;
}
.arc-ref-ot-label {
  font-size: .62rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent); white-space: nowrap;
}
.arc-ref-ot-text { color: var(--text-primary); font-weight: 500; }
.arc-ref-phases {
  display: flex; gap: .9rem; flex-wrap: nowrap;
}
.arc-ref-phase {
  border: 1px solid; border-radius: 7px;
  padding: .5rem .75rem; box-sizing: border-box;
}
.arc-ref-phase-label {
  font-size: .6rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; margin-bottom: .3rem;
}
.arc-ref-phase-text {
  font-size: .76rem; color: var(--text-secondary); line-height: 1.55;
}

.seq-board { display: flex; gap: .9rem; min-height: 460px; }
.seq-col { flex-shrink: 0; width: 215px; display: flex; flex-direction: column; }
.seq-col-head {
  background: var(--accent); color: #fff; border-radius: 8px 8px 0 0;
  padding: .55rem .8rem; font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
}
.seq-zones { flex: 1; display: flex; flex-direction: column; }
.seq-zone {
  background: var(--surface); border: 1px solid var(--border); border-top: none;
  padding: .55rem; min-height: 110px; transition: background .15s;
}
.seq-zone:last-child { border-radius: 0 0 8px 8px; flex: 1; }
.seq-zone.due-zone  { border-top: 3px solid #e67e22; }
.seq-zone.cover-zone { border-top: 3px solid var(--accent); }
.seq-zone.drag-over { background: var(--accent-subtle); }
.seq-zone-label {
  font-size: .56rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: .42rem; display: block;
}
.seq-card {
  background: var(--surface-raised); border: 1.5px solid var(--border); border-left-width: 4px;
  border-radius: 6px; padding: .45rem .55rem; margin-bottom: .35rem;
  font-size: .73rem; line-height: 1.4; cursor: grab; user-select: none;
  position: relative; box-shadow: var(--shadow-sm);
}
.seq-card:active { cursor: grabbing; opacity: .7; }
.seq-card.dragging { opacity: .35; }
.seq-card-text { font-size: .73rem; font-weight: 500; color: var(--text-primary); }
.seq-card-meta { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.seq-tag {
  font-size: .58rem; font-weight: 700; padding: .08rem .38rem; border-radius: 3px; color: #fff;
}
.seq-outcome-tag { font-size: .58rem; color: var(--text-muted); font-style: italic; }
.seq-card-strategy { font-size: .62rem; font-style: italic; color: var(--text-muted); margin-top: .2rem; line-height: 1.4; }
.seq-card-desc { font-size: .65rem; color: var(--text-secondary); margin-top: .18rem; line-height: 1.45; }
.seq-card-due-meta { font-size: .6rem; color: var(--text-muted); margin-top: .25rem; line-height: 1.5; }
/* Satellite cards — read-only ghost style */
.seq-card--satellite {
  cursor: default;
  user-select: none;
  opacity: .78;
  border-top-style: dashed;
  border-right-style: dashed;
  border-bottom-style: dashed;
  background: var(--surface);
  box-shadow: none;
}
.seq-card--satellite .seq-card-text {
  font-size: .69rem;
  font-style: italic;
  color: var(--text-secondary);
}
.seq-satellite-label {
  font-size: .54rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted); opacity: .7;
  background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: 3px; padding: .04rem .28rem;
}
.seq-tag--ghost { opacity: .7; }
.seq-card-actions {
  position: absolute; top: .2rem; right: .25rem;
  display: flex; gap: .2rem; align-items: center;
  opacity: 0; transition: opacity .15s;
}
.seq-card:hover .seq-card-actions { opacity: 1; }
.seq-card-del, .seq-card-edit, .seq-card-details {
  background: none; border: none; cursor: pointer; font-size: .65rem;
  padding: .1rem .25rem; border-radius: 3px; transition: background .12s, color .12s;
  font-family: 'Montserrat', sans-serif; font-weight: 700;
}
.seq-card-del     { color: var(--text-muted); }
.seq-card-edit    { color: var(--accent); }
.seq-card-details { color: var(--text-muted); }
.seq-card-del:hover     { color: #dc2626; background: #fef2f2; }
.seq-card-edit:hover    { background: var(--accent-subtle); }
.seq-card-details:hover { color: var(--text-primary); background: var(--surface-raised); }
/* Dialogue Design badge on sequencer cards */
.seq-dialogue-badge {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .72rem; line-height: 1; cursor: default;
  title: 'Dialogue Design — Activity 07';
}
/* Card details popup */
.card-details-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 9998;
}
.card-details-overlay.open { display: block; }
.card-details-popup {
  display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
  z-index: 9999; background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: 14px; padding: 1.5rem 1.6rem 1.3rem; min-width: 280px; max-width: 420px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18); width: 90vw;
}
.card-details-popup.open { display: block; }
.card-details-close {
  position: absolute; top: .7rem; right: .85rem;
  background: none; border: none; cursor: pointer; font-size: .85rem;
  color: var(--text-muted); padding: .15rem .3rem; border-radius: 4px;
  transition: color .12s;
}
.card-details-close:hover { color: var(--text-primary); }
.card-details-title {
  font-size: .88rem; font-weight: 800; color: var(--text-primary);
  margin-bottom: .75rem; padding-right: 1.5rem; line-height: 1.4;
}
.card-details-row {
  display: flex; gap: .65rem; align-items: flex-start;
  font-size: .75rem; color: var(--text-secondary); padding: .3rem 0;
  border-top: 1px solid var(--border);
}
.card-details-label {
  font-weight: 700; color: var(--text-muted); min-width: 80px;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; padding-top: .05rem;
}
.card-details-list {
  margin: 0; padding-left: 1rem; list-style: disc;
}
.card-details-list li { margin-bottom: .2rem; line-height: 1.45; }
/* Pulled-from-Act3 badge */
.pulled-badge {
  font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  background: #dbeafe; color: #1e40af; border-radius: 3px;
  padding: .05rem .3rem; margin-left: .4rem; vertical-align: middle;
}
[data-theme="dark"] .pulled-badge { background: rgba(59,130,246,.2); color: #93c5fd; }
/* Read-only assessment name display in Act 5 pulled entries */
.pulled-name-display {
  font-size: .88rem; font-weight: 600; color: var(--text-primary);
  padding: .45rem .6rem; background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; line-height: 1.4;
}
/* Per-class feedback moment rows in Act 5 */
.fb-moments-wrap {
  display: flex; flex-direction: column; gap: .75rem;
  margin-top: .6rem;
}
.fb-moment-row {
  border: 1px solid var(--border); border-radius: 8px;
  padding: .75rem .9rem; background: var(--surface);
}
.fb-moment-header {
  font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .6rem;
}
/* ── Act 6 Instructional Strategies ─────────────────────────── */
.strategy-panel {
  border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; margin-bottom: 1.1rem;
}
.strategy-panel-header {
  background: var(--accent-subtle); border-bottom: 1px solid var(--border);
  padding: .75rem 1rem;
}
.strategy-panel-name {
  font-size: .95rem; font-weight: 800; color: var(--text-primary);
  margin-bottom: .3rem;
}
.strategy-panel-ref {
  font-size: .76rem; color: var(--text-secondary); line-height: 1.5;
  margin-top: .2rem;
}
.strategy-ref-label {
  font-weight: 700; color: var(--text-muted); margin-right: .3rem;
}
.strategy-panel-due {
  display: inline-block; margin-top: .4rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent); background: var(--surface);
  border: 1px solid var(--border); border-radius: 4px; padding: .1rem .45rem;
}
.strategy-entries { padding: .6rem 1rem 0; }
.strategy-entry {
  border: 1px solid var(--border); border-radius: 8px;
  padding: .75rem .9rem; margin-bottom: .65rem; background: var(--surface);
}
.strategy-entry-hd {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: .55rem;
}
.strategy-entry-num {
  font-size: .68rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent);
}
.strat-due-note {
  display: inline-block; font-size: .68rem; font-weight: 600;
  color: var(--text-muted); margin-left: .4rem;
}
/* Assessment outcome checkboxes in Act 4 */
.assess-outcome-checks { max-height: 120px; }
/* Due-modal checkbox grid */
.due-modal-checkboxes {
  display: flex; flex-wrap: wrap; gap: .35rem .55rem;
  max-height: 110px; overflow-y: auto;
  padding: .4rem .5rem; background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px;
}
.due-modal-check-label {
  display: flex; align-items: center; gap: .3rem;
  font-size: .72rem; color: var(--text-primary); cursor: pointer; white-space: nowrap;
}
.due-modal-check-label input { accent-color: var(--accent); cursor: pointer; }
.add-card-btn {
  width: 100%; background: none; border: 1.5px dashed var(--border); border-radius: 5px;
  padding: .38rem; font-family: 'Montserrat', sans-serif; font-size: .66rem; font-weight: 700;
  color: var(--text-muted); cursor: pointer; transition: all .15s; margin-top: .35rem;
}
.add-card-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-subtle); }
.add-col-btn {
  flex-shrink: 0; width: 215px; background: var(--surface); border: 2px dashed var(--border);
  border-radius: 8px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: .4rem; cursor: pointer; color: var(--text-muted);
  font-family: 'Montserrat', sans-serif; font-size: .73rem; font-weight: 700;
  transition: all .2s; padding: 1.5rem;
}
.add-col-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-subtle); }

/* === SEQUENCER WORKSPACE + SIDEBAR === */
.seq-workspace {
  display: flex; align-items: flex-start; gap: 0; position: relative;
}
.seq-sidebar {
  width: 220px; flex-shrink: 0; margin-right: 1rem;
  background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: 12px; display: flex; flex-direction: column;
  position: sticky; top: 1rem; max-height: calc(100vh - 5rem);
  overflow: hidden;
}
.seq-workspace.sidebar-closed .seq-sidebar { display: none; }
.sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .55rem .75rem; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.sidebar-title {
  font-size: .6rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent);
}
.sidebar-collapse-btn {
  background: none; border: none; cursor: pointer; color: var(--text-muted);
  font-size: .72rem; padding: .15rem .3rem; border-radius: 4px;
  font-family: 'Montserrat', sans-serif; transition: all .15s; line-height: 1;
}
.sidebar-collapse-btn:hover { color: var(--accent); background: var(--accent-subtle); }
.sidebar-strategies {
  flex: 1; overflow-y: auto; padding: .65rem .65rem .4rem; min-height: 0;
}
.sidebar-cat-label {
  display: block; font-size: .58rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; margin: .6rem 0 .3rem;
}
.sidebar-cat-label:first-child { margin-top: 0; }
.sidebar-strat-item {
  display: block; width: 100%; text-align: left; background: none; border: none;
  padding: .28rem .4rem; border-radius: 5px; font-size: .71rem;
  font-family: 'Montserrat', sans-serif; color: var(--text-secondary);
  cursor: pointer; line-height: 1.45; transition: background .12s, color .12s;
}
.sidebar-strat-item:hover,
.sidebar-strat-item.active { background: var(--accent-subtle); color: var(--text-primary); }
/* Strategy tooltip (floater) */
.strat-tooltip {
  position: fixed; z-index: 9999; pointer-events: none;
  background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: 9px; padding: .6rem .75rem; max-width: 230px;
  box-shadow: 0 4px 18px rgba(0,0,0,.13);
  opacity: 0; transition: opacity .14s; width: max-content;
}
.strat-tooltip.visible { opacity: 1; }
.strat-tip-name {
  display: block; font-size: .72rem; font-weight: 700;
  color: var(--text-primary); margin-bottom: .25rem;
}
.strat-tip-desc { display: block; font-size: .69rem; color: var(--text-secondary); line-height: 1.6; }
/* Reopen tab */
.sidebar-tab {
  display: none; writing-mode: vertical-rl; text-orientation: mixed;
  transform: rotate(180deg); background: var(--surface-raised);
  border: 1px solid var(--border); border-left: none;
  border-radius: 0 6px 6px 0; padding: .85rem .32rem;
  cursor: pointer; font-size: .6rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); flex-shrink: 0;
  align-self: flex-start; position: sticky; top: 1rem;
  font-family: 'Montserrat', sans-serif; transition: background .15s;
}
.sidebar-tab:hover { background: var(--accent-subtle); }
.seq-workspace.sidebar-closed .sidebar-tab { display: block; }
.seq-main { flex: 1; min-width: 0; }

/* === REFERENCE DRAWER (UDL only — 2 columns) === */
.seq-drawer {
  background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: 12px; margin-bottom: 1rem; overflow: hidden;
}
.seq-drawer-toggle-btn {
  width: 100%; padding: .6rem 1rem; background: none; border: none;
  border-bottom: 1px solid var(--border); text-align: left;
  font-family: 'Montserrat', sans-serif; font-size: .75rem; font-weight: 700;
  color: var(--accent); cursor: pointer; letter-spacing: .04em;
  transition: background .15s;
}
.seq-drawer-toggle-btn:hover { background: var(--accent-subtle); }
.seq-drawer.closed .seq-drawer-inner { display: none; }
.seq-drawer.closed .seq-drawer-toggle-btn { border-bottom: none; }
.seq-drawer-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0;
}
.drawer-section {
  padding: 1rem; border-right: 1px solid var(--border); min-width: 0;
}
.drawer-section:last-child { border-right: none; }
.drawer-section-title {
  font-size: .6rem; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--accent); margin-bottom: .7rem; display: block;
}
.drawer-strat-group { margin-bottom: .75rem; }
.drawer-strat-group:last-child { margin-bottom: 0; }
.drawer-strat-group-label {
  font-size: .62rem; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; margin-bottom: .35rem;
}
.drawer-chips { display: flex; flex-wrap: wrap; gap: .28rem; }
.drawer-chip {
  font-size: .62rem; padding: .18rem .48rem; border-radius: 20px;
  white-space: nowrap; line-height: 1.4;
}
.drawer-chip--teal  { background: rgba(14,116,144,.1);  color: #0e7490; border: 1px solid rgba(14,116,144,.25); }
.drawer-chip--blue  { background: rgba(35,88,207,.09);  color: #2358CF; border: 1px solid rgba(35,88,207,.22); }
.drawer-chip--green { background: rgba(21,128,61,.09);  color: #15803d; border: 1px solid rgba(21,128,61,.22); }
[data-theme="dark"] .drawer-chip--teal  { background: rgba(14,116,144,.18); color: #67e8f9; border-color: rgba(103,232,249,.22); }
[data-theme="dark"] .drawer-chip--blue  { background: rgba(35,88,207,.18);  color: #93c5fd; border-color: rgba(147,197,253,.22); }
[data-theme="dark"] .drawer-chip--green { background: rgba(21,128,61,.18);  color: #86efac; border-color: rgba(134,239,172,.22); }
.drawer-barrier-item {
  background: var(--surface); border-radius: 8px; padding: .6rem .75rem;
  margin-bottom: .5rem; border-left: 2px solid var(--accent);
}
.drawer-barrier-item:last-child { margin-bottom: 0; }
.drawer-barrier-label {
  font-size: .6rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent); margin-bottom: .2rem;
}
.drawer-barrier-text { font-size: .72rem; color: var(--text-secondary); line-height: 1.55; }
.drawer-nudge-item {
  padding-bottom: .65rem; margin-bottom: .65rem;
  border-bottom: 1px dashed var(--border);
}
.drawer-nudge-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.drawer-nudge-label { font-size: .72rem; font-weight: 700; color: var(--text-primary); margin-bottom: .2rem; }
.drawer-nudge-text { font-size: .68rem; color: var(--text-secondary); line-height: 1.62; }
.drawer-empty { font-size: .73rem; font-style: italic; color: var(--text-muted); }

/* === UDL CHECKLIST NOTES === */
.udl-check-wrap { display: flex; flex-direction: column; }
.cl-note-input {
  margin: .15rem .5rem .25rem 2.15rem; padding: .3rem .55rem;
  font-size: .72rem; font-family: 'Montserrat', sans-serif;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text-secondary);
  line-height: 1.5; transition: border-color .15s; box-sizing: border-box;
}
.cl-note-input:focus { outline: none; border-color: var(--accent); }
.cl-note-input::placeholder { color: var(--text-muted); font-style: italic; }

/* === BARRIER PAIRS (Step 02 UDL) === */
.barrier-pair { margin-bottom: .65rem; }
.barrier-pair:last-child { margin-bottom: 0; }
.barrier-pair-header {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .74rem; font-weight: 700; color: var(--text-secondary);
  margin-bottom: .4rem; padding-top: .5rem;
  border-top: 1px dashed var(--border);
}
.barrier-remove-btn {
  font-size: .68rem; color: #dc2626; background: none; border: none;
  cursor: pointer; padding: .1rem .35rem; border-radius: 4px;
  font-family: 'Montserrat', sans-serif;
}
.barrier-remove-btn:hover { background: rgba(220,38,38,.1); }
.add-barrier-btn { margin-top: .65rem; }

/* === MODAL === */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.45); z-index: 500; align-items: center; justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--surface); border-radius: 14px; padding: 1.65rem;
  width: 380px; max-width: 90vw; box-shadow: var(--shadow-lg);
}
.modal-title { font-size: 1rem; font-weight: 800; color: var(--text-primary); margin-bottom: 1.1rem; }
.modal-actions { display: flex; gap: .65rem; justify-content: flex-end; margin-top: 1.1rem; }

/* === CLOSING === */
.closing-card {
  background: var(--accent-subtle); border: 1px solid var(--border);
  border-radius: 12px; padding: 2rem; text-align: center; margin-top: 1.75rem;
}
.closing-card h2 { font-size: 1.35rem; font-weight: 900; color: var(--text-primary); margin-bottom: .45rem; }
.closing-card p { font-size: .84rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 1.1rem; }

/* === AI OPTIONAL SECTION === */
.ai-optional {
  background: var(--surface-raised); border: 1px dashed var(--border);
  border-radius: 8px; padding: .9rem 1.1rem; margin-top: 1rem;
}
.ai-optional-label {
  font-size: .6rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: .4rem; display: block;
}

/* === SIDEBAR OVERLAY (MOBILE) === */
.sidebar-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 150;
}
.sidebar-overlay.open { display: block; }

/* === VIDEO EMBED (responsive Kaltura iframe) === */
.video-embed-wrap {
  position: relative; padding-bottom: 66.1%; height: 0; overflow: hidden;
  border-radius: 8px; margin-top: 1rem; background: #000;
}
.video-embed-wrap iframe {
  position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important;
  border: 0; border-radius: 8px;
}

/* === LECTURE ENGAGEMENT VISUAL BLOCK (Act 6 Full Spark) === */
.strat-lecture-block {
  margin: 1.25rem 0 1.5rem;
  padding: 1.4rem 1.5rem 1.5rem;
  background: var(--surface-raised);
  border-radius: 12px;
  border: 1px solid var(--border);
}
.strat-lecture-title {
  font-size: 1.25rem; font-weight: 800; color: var(--text-primary);
  letter-spacing: -.02em; margin-bottom: 1.1rem; line-height: 1.3;
}
.strat-lecture-inner {
  display: flex; align-items: stretch; gap: .75rem;
}
.strat-box-col {
  display: flex; flex-direction: column; gap: 10px; flex-shrink: 0;
}
.strat-box {
  background: #1e7462; color: #fff; border-radius: 14px;
  padding: .7rem 1.1rem; width: 190px; min-height: 64px;
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 600; text-align: center; line-height: 1.35;
}
.strat-brace-wrap {
  width: 48px; flex-shrink: 0; align-self: stretch;
}
.strat-brace-wrap svg {
  display: block; width: 100%; height: 100%;
}
.strat-lecture-text {
  flex: 1; padding-left: .4rem;
  display: flex; flex-direction: column; justify-content: center;
}
.strat-lecture-main {
  font-size: 1.05rem; color: var(--text-primary);
  line-height: 1.4; margin-bottom: .65rem;
}
.strat-lecture-sub {
  font-size: .88rem; color: var(--text-secondary); line-height: 1.6;
}
.strat-practice {
  margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border);
}
.strat-practice-title {
  font-weight: 800; font-size: .85rem; color: var(--text-primary); margin-bottom: .4rem;
}
.strat-practice-body {
  font-size: .82rem; color: var(--text-secondary); line-height: 1.7;
}

/* === QUOTE BLOCK === */
.quote-block {
  background: var(--accent-subtle); border-left: 4px solid var(--accent);
  border-radius: 0 10px 10px 0; padding: 1.25rem 1.5rem; margin: 1.5rem 0;
}
.quote-block blockquote {
  font-size: 1.02rem; font-style: italic; color: var(--text-primary);
  line-height: 1.8; margin: 0 0 .55rem;
}
.quote-block cite {
  font-size: .72rem; font-weight: 700; color: var(--text-secondary);
  letter-spacing: .07em; font-style: normal; text-transform: uppercase;
}

/* === WORKBOOK EXAMPLE (inline step accordion) === */
.wb-example-wrap {
  margin-top: .9rem; border: 1.5px solid var(--border); border-radius: 8px; overflow: hidden;
}
.wb-example-btn {
  width: 100%; background: var(--surface-raised); border: none; padding: .55rem 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  font-family: 'Montserrat', sans-serif; font-size: .73rem; font-weight: 700;
  color: var(--text-secondary); cursor: pointer; text-align: left;
  letter-spacing: .03em; transition: background .15s, color .15s;
}
.wb-example-svg-icon {
  width: 14px; height: 14px; flex-shrink: 0;
  color: var(--icon-color); display: inline-block; vertical-align: middle; margin-right: .3rem;
}
.wb-example-btn:hover .wb-example-svg-icon { color: var(--accent); }
.wb-example-btn:hover { background: var(--accent-subtle); color: var(--accent); }
.wb-example-body {
  display: none; padding: .85rem 1rem; background: var(--surface);
  border-top: 1px solid var(--border); font-size: .79rem;
  color: var(--text-secondary); line-height: 1.7;
}
.wb-example-body.open { display: block; }

/* === ONE THING DISPLAY (auto-populated from Act 01) === */
.onething-display-box {
  background: var(--accent-subtle); border: 1.5px solid var(--accent);
  border-radius: 8px; padding: .75rem 1rem; margin-bottom: 1.1rem;
}
.onething-display-box .onet-label {
  font-size: .6rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .3rem; display: block;
}
.onething-display {
  font-size: .84rem; color: var(--text-primary); line-height: 1.6;
}

/* === OUTCOMES REFERENCE (Activity 04) === */
.outcomes-ref-panel {
  background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: 8px; padding: .9rem 1.1rem; margin-bottom: 1.25rem;
}
.outcomes-ref-label {
  font-size: .6rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: .5rem; display: block;
}
.ref-outcome-row {
  display: flex; gap: .6rem; align-items: baseline; padding: .3rem 0;
  border-bottom: 1px solid var(--border); font-size: .79rem;
  color: var(--text-secondary); line-height: 1.55;
}
.ref-outcome-row:last-child { border-bottom: none; }
.ref-num { font-weight: 800; color: var(--accent); flex-shrink: 0; min-width: 1.4rem; }
.ref-empty { font-size: .79rem; font-style: italic; color: var(--text-muted); }

/* === FORM GRID 4-COL === */
.form-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }

/* === OUTCOME PREVIEW === */
.outcome-preview {
  font-size: .78rem; font-style: italic; color: var(--text-muted);
  padding: .45rem .65rem; background: var(--surface-raised);
  border-radius: 6px; margin-top: .5rem; line-height: 1.6;
}

/* === SPARK STAGE GRAPHIC (three-column visual) === */
.spark-stages {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1rem; margin: 1.25rem 0 2rem;
}
.spark-stage-step {
  font-size: .63rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; margin-bottom: .4rem; display: block;
}
.spark-stage-box {
  border-radius: 12px; padding: 1.1rem 1rem; height: 100%;
}
.spark-stage-title {
  font-size: .82rem; font-weight: 800; color: #fff;
  line-height: 1.4; margin-bottom: .5rem;
}
.spark-stage-desc {
  font-size: .76rem; color: rgba(255,255,255,.88); line-height: 1.65;
}
@media (max-width: 600px) {
  .spark-stages { grid-template-columns: 1fr; }
}

/* === TRADITIONAL vs BACKWARD DESIGN ARROW VISUAL === */
.spark-design-block { margin-bottom: 1.5rem; }
.spark-design-title {
  font-size: .78rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-primary);
  margin: 0 0 .85rem; line-height: 1.4;
}
.spark-arrow-row {
  display: flex; gap: 3px; align-items: stretch;
  flex-wrap: wrap;
}
.spark-arrow-item {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center;
}
.spark-arrow-shape {
  width: 100%; height: 3.6rem;
  clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%, 12% 50%);
  display: flex; align-items: center; justify-content: center;
  padding: .6rem 1.6rem .6rem 1.4rem;
  box-sizing: border-box;
}
.spark-arrow-item:first-child .spark-arrow-shape {
  clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%);
  padding-left: .85rem;
}
.spark-arrow-shape span {
  font-size: .88rem; font-weight: 500; color: #fff;
  text-align: center; line-height: 1.25;
  letter-spacing: .01em;
}
.spark-arrow-caption {
  font-size: .73rem; color: var(--text-secondary); line-height: 1.6;
  text-align: center; margin-top: .5rem; padding: 0 .25rem;
}
@media (max-width: 600px) {
  .spark-arrow-row { flex-direction: column; gap: .4rem; }
  .spark-arrow-shape,
  .spark-arrow-item:first-child .spark-arrow-shape { clip-path: none; border-radius: 8px; height: 3.6rem; padding: .6rem .85rem; }
}

/* === BLOOMS DOMAINS TRIANGLE === */
.blooms-graphic-title {
  font-size: .78rem; font-weight: 700; color: var(--text-primary);
  margin: 1rem 0 .75rem; text-align: center;
}
.blooms-triangle-wrap {
  position: relative; max-width: 480px;
  margin: 0 auto 1.5rem; height: 300px;
}
.blooms-lines-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible;
}
.blooms-line { stroke: var(--border); }
.blooms-node {
  position: absolute; display: flex; flex-direction: column;
  align-items: center; text-align: center; width: 130px;
}
.blooms-node svg { width: 74px; height: auto; display: block; }
.blooms-node--top { top: 0; left: 50%; transform: translateX(-50%); }
.blooms-node--bl { bottom: 0; left: 0; }
.blooms-node--br { bottom: 0; right: 0; }
.blooms-node-label {
  font-size: .69rem; line-height: 1.4; margin-top: .4rem;
  color: var(--text-secondary);
}
.blooms-node-label strong { display: block; font-size: .72rem; }
.spark-domain-icon { text-align: center; margin: .75rem 0 .6rem; }
.spark-domain-icon svg { width: 72px; height: auto; }
.spark-domain-subtitle {
  text-align: left; font-size: .83rem; font-weight: 600;
  color: var(--text-secondary); margin-bottom: .75rem;
}
.spark-verb-list { font-size: .75rem; color: rgba(255,255,255,.78); }

/* === DOMAIN COLOR CLASSES (light defaults + dark overrides) === */
.domain-label-cog { display: block; text-align: center; color: #0f766e; }
.domain-label-psy { display: block; text-align: center; color: #2358CF; }
.domain-label-aff { display: block; text-align: center; color: #be185d; }
.domain-col-cog   { color: #0f766e; }
.domain-col-psy   { color: #2358CF; }
.domain-col-aff   { color: #be185d; }
[data-theme="dark"] .domain-label-cog,
[data-theme="dark"] .domain-col-cog  { color: #2dd4bf; }
[data-theme="dark"] .domain-label-psy,
[data-theme="dark"] .domain-col-psy  { color: #6b96f5; }
[data-theme="dark"] .domain-label-aff,
[data-theme="dark"] .domain-col-aff  { color: #f472b6; }
[data-theme="dark"] #blooms-svg-cog path,
[data-theme="dark"] #blooms-svg-cog-d path { fill: #2dd4bf; }
[data-theme="dark"] #blooms-svg-psy path,
[data-theme="dark"] #blooms-svg-psy-d path { fill: #6b96f5; }
[data-theme="dark"] #blooms-svg-aff path,
[data-theme="dark"] #blooms-svg-aff-d path { fill: #f472b6; }

/* === ALIGNMENT CHECK (arrow pairs + questions) === */
.align-check-intro {
  font-size: .81rem; font-weight: 700; color: var(--text-primary);
  margin-bottom: 1rem; line-height: 1.65;
}
.align-check-list { display: flex; flex-direction: column; gap: .85rem; margin-bottom: 1.5rem; }
.align-check-row  { display: flex; align-items: center; gap: 1.6rem; }
.align-check-arrows { display: flex; gap: 2px; flex-shrink: 0; width: 186px; align-items: stretch; }
.align-check-arrow {
  flex: 1; height: 2.6rem;
  clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%, 12% 50%);
  display: flex; align-items: center; justify-content: center;
  padding: .4rem 1.3rem .4rem 1.2rem; box-sizing: border-box;
}
.align-check-arrows .align-check-arrow:first-child {
  clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%);
  padding-left: .65rem;
}
.align-check-arrow span { font-size: .73rem; font-weight: 500; color: #fff; text-align: center; }
.align-check-question { font-size: .77rem; color: var(--text-secondary); line-height: 1.65; flex: 1; min-width: 0; }

/* === ALIGNED COURSE TRIANGLE === */
.align-triangle-title {
  text-align: center; font-size: .8rem; font-weight: 700;
  color: var(--text-primary); margin: 1.25rem 0 .65rem;
}
.align-triangle-wrap {
  position: relative; max-width: 480px; margin: 0 auto 1.5rem; height: 290px;
}
.align-lines-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible;
}
.align-svg-line { stroke: #8a9ab5; }
[data-theme="dark"] .align-svg-line { stroke: rgba(255,255,255,.55); }
.align-node {
  position: absolute; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; width: 130px; min-height: 74px;
  border-radius: 10px; padding: .65rem .75rem;
}
.align-node strong { font-size: .74rem; color: #fff; display: block; margin-bottom: .2rem; line-height: 1.3; }
.align-node-sub { font-size: .64rem; color: rgba(255,255,255,.85); line-height: 1.35; }
.align-node--top { top: 0; left: 50%; transform: translateX(-50%); }
.align-node--bl  { bottom: 0; left: 0; }
.align-node--br  { bottom: 0; right: 0; }
.align-line-tag {
  position: absolute; background: var(--surface);
  font-size: .6rem; font-style: italic; color: var(--text-secondary);
  padding: .12rem .4rem; border-radius: 4px; white-space: nowrap;
  border: 1px solid var(--border); pointer-events: none;
  transform: translate(-50%, -50%);
}
.align-line-tag--below { transform: translate(-50%, 0); }
[data-theme="dark"] .align-line-tag {
  color: rgba(255,255,255,.82);
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.07);
}
@media (max-width: 600px) {
  .align-check-row { flex-direction: column; align-items: flex-start; }
  .align-check-arrows { width: 160px; }
  .align-triangle-wrap { height: auto; }
  .align-lines-svg, .align-line-tag { display: none; }
  .align-node { position: static; width: 100%; margin-bottom: .75rem; }
}

/* === STRATEGY TABLE COLOR VARIANTS === */
/* Teal — Active Learning (matches Activity / Apply sequencer color) */
.spark-table--teal th  { background: #0e7490; color: #fff; }
.spark-table--teal tr:nth-child(even) td { background: #f0f9fa; }
.spark-table--teal tr:nth-child(odd)  td { background: #fff; }

/* Blue — Discussion-Based (matches Lecture / Discussion sequencer color) */
.spark-table--blue th  { background: #2358CF; color: #fff; }
.spark-table--blue tr:nth-child(even) td { background: #f0f4ff; }
.spark-table--blue tr:nth-child(odd)  td { background: #fff; }

/* Green — Experiential (matches Field / Guest sequencer color) */
.spark-table--green th { background: #15803d; color: #fff; }
.spark-table--green tr:nth-child(even) td { background: #f0fdf4; }
.spark-table--green tr:nth-child(odd)  td { background: #fff; }

/* Dark mode overrides */
[data-theme="dark"] .spark-table--teal th  { background: #0c5f74; }
[data-theme="dark"] .spark-table--teal tr:nth-child(even) td { background: rgba(8,145,178,.11); }
[data-theme="dark"] .spark-table--teal tr:nth-child(odd)  td { background: transparent; }

[data-theme="dark"] .spark-table--blue th  { background: #1a3fa8; }
[data-theme="dark"] .spark-table--blue tr:nth-child(even) td { background: rgba(35,88,207,.13); }
[data-theme="dark"] .spark-table--blue tr:nth-child(odd)  td { background: transparent; }

[data-theme="dark"] .spark-table--green th { background: #145f30; }
[data-theme="dark"] .spark-table--green tr:nth-child(even) td { background: rgba(21,128,61,.12); }
[data-theme="dark"] .spark-table--green tr:nth-child(odd)  td { background: transparent; }

/* === CIVIC DISCOURSE GRAPHIC === */
.civic-graphic { margin: 1.25rem 0 1.5rem; }
.civic-shapes-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.civic-shape {
  border-radius: 14px; padding: 1rem .75rem;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.civic-shape--1 { background: #164e63; }
.civic-shape--2 { background: #0e7490; }
.civic-shape--3 { background: #0891b2; }
.civic-shape-title {
  display: block; font-size: .72rem; font-weight: 900; letter-spacing: .12em;
  text-transform: uppercase; color: #fff; margin-bottom: .4rem;
}
.civic-shape-sub {
  display: block; font-size: .74rem; font-weight: 600;
  color: rgba(255,255,255,.92); margin-bottom: .55rem;
}
.civic-shape-desc {
  display: block; font-size: .67rem; font-style: italic;
  color: rgba(255,255,255,.82); line-height: 2;
}
.civic-arrows-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: .4rem 0;
}
.civic-arrow-cell { display: flex; justify-content: center; }
.civic-arrow-tri {
  width: 0; height: 0;
  border-left: 9px solid transparent; border-right: 9px solid transparent;
}
.civic-arrow-tri--1 { border-top: 11px solid #164e63; }
.civic-arrow-tri--2 { border-top: 11px solid #0e7490; }
.civic-arrow-tri--3 { border-top: 11px solid #0891b2; }
.civic-outcome-shape {
  border: 2.5px solid #2358CF; border-radius: 14px;
  padding: 1rem 1.25rem; text-align: center; background: transparent;
}
.civic-outcome-title {
  display: block; font-size: .82rem; font-weight: 900; letter-spacing: .13em;
  text-transform: uppercase; color: #2358CF; margin-bottom: .4rem;
}
.civic-outcome-sub { font-size: .73rem; color: #2358CF; line-height: 1.5; }
[data-theme="dark"] .civic-outcome-shape { border-color: #6b9cf8; }
[data-theme="dark"] .civic-outcome-title { color: #6b9cf8; }
[data-theme="dark"] .civic-outcome-sub  { color: #6b9cf8; }

/* === COLORED DOMAIN TABLES === */
.spark-table-cog, .spark-table-psy, .spark-table-aff {
  border-collapse: collapse; width: 100%; margin-bottom: 1.25rem;
}
.spark-table-cog th, .spark-table-cog td,
.spark-table-psy td,
.spark-table-aff td {
  padding: .55rem .75rem;
  border: 1px solid rgba(255,255,255,.25);
  color: #fff; line-height: 1.55; font-size: .78rem; vertical-align: top;
}
.spark-table-cog th {
  font-size: .84rem; font-weight: 700; background: #0a5249;
}
.spark-table-cog tr:nth-child(even) td { background: #0f766e; }
.spark-table-cog tr:nth-child(odd)  td { background: #0d9488; }
.spark-table-psy tr:nth-child(1) td { background: #2358CF; }
.spark-table-psy tr:nth-child(2) td { background: #3b6fe0; }
.spark-table-psy tr:nth-child(3) td { background: #5888ee; }
.spark-table-aff tr:nth-child(1) td { background: #be185d; }
.spark-table-aff tr:nth-child(2) td { background: #cc2a6a; }
.spark-table-aff tr:nth-child(3) td { background: #db4081; }
.blooms-domain-bullets {
  list-style: none; padding: 0; margin: 0 auto 1.25rem; width: fit-content;
}
.blooms-domain-bullets li {
  padding: .35rem .5rem;
  font-size: .78rem; color: var(--text-secondary); line-height: 1.6;
}
.blooms-domain-bullets li::before {
  content: '— '; font-weight: 900; color: var(--text-primary);
}
@media (max-width: 600px) {
  .blooms-triangle-wrap { height: auto; }
  .blooms-lines-svg { display: none; }
  .blooms-node {
    position: static; width: 100%; flex-direction: row;
    align-items: flex-start; gap: .85rem; text-align: left; margin-bottom: 1rem;
  }
  .blooms-node svg { width: 50px; flex-shrink: 0; }
  .blooms-node-label { text-align: left; }
}

/* === LEARNING OUTCOMES STRUCTURE TABLE === */
.lo-table-wrap { margin: 1.25rem 0 1.5rem; }
.lo-table-title {
  text-align: center; font-size: .82rem; font-weight: 700;
  color: var(--text-primary); margin-bottom: .5rem;
}
.lo-table-subtitle {
  font-size: .74rem; font-weight: 600; font-style: italic;
  color: var(--text-secondary); margin-bottom: .6rem; text-align: left;
}
.lo-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.lo-table col.lo-col-who  { width: 28%; }
.lo-table col.lo-col-how  { width: 20%; }
.lo-table col.lo-col-what { width: 52%; }
.lo-table th, .lo-table td {
  padding: .55rem .72rem;
  border: 1px solid rgba(255,255,255,.28);
  color: #fff; font-size: .77rem; line-height: 1.6;
  vertical-align: top;
}
.lo-row-head {
  background: #2358CF; font-weight: 700;
  font-size: .78rem; text-align: center; vertical-align: middle;
}
.lo-row-desc { background: #3b6fe0; }
.lo-row-label {
  background: #2358CF; font-weight: 700;
  font-size: .76rem; vertical-align: middle;
}
.lo-row-example { background: #4a7bf5; }
[data-theme="dark"] .lo-row-head,
[data-theme="dark"] .lo-row-label { background: #1a45a8; }
[data-theme="dark"] .lo-row-desc  { background: #2f5bc4; }
[data-theme="dark"] .lo-row-example { background: #3a6bdc; }

/* === ASSESSMENT TYPE GRAPHIC === */
.assess-graphic { display: flex; flex-direction: column; gap: 1rem; margin: 1.25rem 0 1.5rem; }
.assess-unit { display: flex; align-items: center; gap: 1.25rem; }
.assess-question {
  flex: 0 0 178px; font-size: .76rem; color: var(--text-secondary);
  line-height: 1.7;
}
.assess-shapes { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; flex: 1; }
.assess-shape {
  border-radius: 10px; padding: .7rem .55rem;
  display: flex; align-items: center; justify-content: center;
  text-align: center; font-size: .71rem; font-weight: 500;
  color: rgba(255,255,255,.93); line-height: 1.5; min-height: 62px;
}
.assess-blue  { background: #2358CF; }
.assess-green { background: #0f766e; }
.assess-teal  { background: #0891b2; }
[data-theme="dark"] .assess-blue  { background: #1e4bbf; }
[data-theme="dark"] .assess-green { background: #0c6b61; }
[data-theme="dark"] .assess-teal  { background: #067498; }
@media (max-width: 600px) {
  .assess-unit { flex-direction: column; align-items: flex-start; }
  .assess-question { flex: none; width: 100%; }
  .assess-shapes { width: 100%; }
}

/* === ASSESSMENT TYPES VISUAL (Formative / Summative / Authentic) === */
.atype-graphic-title {
  text-align: left; font-size: .62rem; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent); margin: 1.25rem 0 .6rem; display: block;
}
.atype-graphic { margin-bottom: 1.5rem; }
.atype-connector-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: .4rem; margin-bottom: .5rem;
}
.atype-bracket-box {
  grid-column: 1 / 3;
  border: 1.5px solid var(--text-muted); border-bottom: none;
  border-radius: 7px 7px 0 0;
  display: flex; align-items: center; justify-content: center;
  padding: .35rem .75rem .45rem;
}
.atype-bracket-label { font-size: .7rem; font-weight: 700; color: var(--text-primary); letter-spacing: .03em; }
.atype-shapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.atype-shape {
  border-radius: 12px; padding: 1rem .75rem;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.atype-shape-title {
  font-size: .8rem; font-weight: 900; letter-spacing: .1em;
  text-transform: uppercase; color: #fff; margin-bottom: .5rem;
  line-height: 1.2;
}
.atype-shape-sub {
  font-size: .75rem; color: rgba(255,255,255,.92); line-height: 1.6;
  margin-bottom: .75rem;
}
.atype-shape-items {
  font-size: .67rem; font-style: italic;
  color: rgba(255,255,255,.75); line-height: 1.9;
}
.atype-shape--1 { background: #152e70; }
.atype-shape--2 { background: #2358CF; }
.atype-shape--3 { background: #5b88e8; }
[data-theme="dark"] .atype-shape--1 { background: #1a3a8a; }
[data-theme="dark"] .atype-shape--2 { background: #1e4bbf; }
[data-theme="dark"] .atype-shape--3 { background: #4a75d9; }
.atype-footer {
  font-size: .74rem; font-style: italic; color: var(--text-secondary);
  text-align: center; margin-top: .75rem; line-height: 1.7;
}
@media (max-width: 560px) {
  .atype-connector-row { display: none; }
  .atype-shapes { grid-template-columns: 1fr; }
}

/* === TRANSPARENT ASSIGNMENT DESIGN === */
.tad-items { display: flex; flex-direction: column; gap: .55rem; margin: .65rem 0 1.1rem; }
.tad-item {
  padding: .6rem .85rem; background: var(--surface-raised);
  border-radius: 8px; border-left: 3px solid var(--accent);
}
.tad-label { font-size: .78rem; color: var(--text-primary); margin-bottom: .2rem; line-height: 1.5; }
.tad-q { font-size: .76rem; font-style: italic; color: var(--text-secondary); margin: 0; line-height: 1.55; }

/* === RUBRIC BOXES === */
.rubric-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: 1.25rem; }
.rubric-box { border-radius: 12px; padding: 1rem .9rem; }
.rubric-box-title {
  display: block; font-size: .76rem; font-weight: 900; letter-spacing: .09em;
  text-transform: uppercase; color: #fff; margin-bottom: .65rem; text-align: center;
}
.rubric-list { list-style: none; padding: 0; margin: 0; }
.rubric-list li {
  font-size: .73rem; font-style: italic; color: rgba(255,255,255,.88);
  line-height: 1.7; padding: .18rem 0 .18rem .9rem; position: relative;
}
.rubric-list li::before { content: '—'; position: absolute; left: 0; font-style: normal; color: rgba(255,255,255,.55); }
.rubric-box--blue { background: #2358CF; }
.rubric-box--teal { background: #0891b2; }
[data-theme="dark"] .rubric-box--blue { background: #1e4bbf; }
[data-theme="dark"] .rubric-box--teal { background: #067498; }
@media (max-width: 560px) { .rubric-boxes { grid-template-columns: 1fr; } }

/* === FEED FORWARD WIDE SHAPE === */
.atype-wide-shape {
  border-radius: 12px; padding: 1rem .85rem; margin-top: .4rem;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.atype-wide-shape .atype-shape-title { margin-bottom: .55rem; }
.atype-wide-shape .atype-shape-sub { font-size: .76rem; line-height: 1.7; margin-bottom: 0; }
.atype-wide-teal { background: #0891b2; }
[data-theme="dark"] .atype-wide-teal { background: #067498; }

/* === ASSESSMENT BENEFITS LIST === */
.assess-benefits { list-style: none; padding: 0; margin: .5rem 0 1.25rem; }
.assess-benefits li {
  padding: .28rem 0 .28rem 1rem; font-size: .79rem;
  color: var(--text-secondary); line-height: 1.65; position: relative;
}
.assess-benefits li::before { content: '•'; position: absolute; left: 0; color: var(--accent); font-weight: 900; }

/* === SPARK STRATEGIES LIST === */
.strategies-list { list-style: none; padding: 0; margin: .5rem 0 0; }
.strategies-list li {
  padding: .65rem .85rem; border-left: 3px solid var(--border);
  margin-bottom: .55rem; background: var(--surface-raised); border-radius: 0 7px 7px 0;
  font-size: .79rem; color: var(--text-secondary); line-height: 1.65;
}
.strategies-list li strong { color: var(--text-primary); display: block; margin-bottom: .15rem; font-size: .77rem; letter-spacing: .03em; }

/* === UDL TWO-COLUMN GRAPHIC === */
.udl-twocol {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  grid-template-rows: repeat(4, 1fr);
  gap: .35rem;
  margin: 1.25rem 0 1.5rem;
}
.udl-left-box {
  grid-row: 1 / 5;
  border-radius: 12px; background: #2358CF;
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem 1rem; text-align: center;
}
.udl-left-title {
  font-size: .9rem; font-weight: 900; letter-spacing: .08em;
  text-transform: uppercase; color: #fff; line-height: 1.5;
}
.udl-right-box {
  border-radius: 10px; padding: .65rem .9rem;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.udl-right-text { font-size: .76rem; font-weight: 700; color: rgba(255,255,255,.92); line-height: 1.5; }
.udl-rb-1 { background: #0f766e; }
.udl-rb-2 { background: #0d9488; }
.udl-rb-3 { background: #0891b2; }
.udl-rb-4 { background: #22c4d4; }
[data-theme="dark"] .udl-left-box { background: #1e4bbf; }
[data-theme="dark"] .udl-rb-4 { background: #0ea5c9; }
@media (max-width: 560px) {
  .udl-twocol { grid-template-columns: 1fr; grid-template-rows: auto; }
  .udl-left-box { grid-row: auto; }
}

/* === UDL PRINCIPLES HUB-AND-SPOKE DIAGRAM === */
.udl-diagram {
  display: grid;
  grid-template-columns: 1fr 18px 1.1fr 18px 1fr;
  grid-template-rows: auto 16px auto 16px auto;
  max-width: 580px; margin: 1rem auto 1.5rem;
}
.udl-box {
  border-radius: 10px; padding: .75rem;
  display: flex; flex-direction: column; text-align: center;
}
.udl-box-goal { background: transparent; border: 2.5px solid #2358CF; }
.udl-box-green   { background: #0f766e; }
.udl-box-purple  { background: #7c3aed; }
.udl-box-tealdark{ background: #0e7490; }
[data-theme="dark"] .udl-box-goal { border-color: var(--accent); }
[data-theme="dark"] .udl-box-green   { background: #0d9488; }
[data-theme="dark"] .udl-box-purple  { background: #6d28d9; }
[data-theme="dark"] .udl-box-tealdark{ background: #0891b2; }
.udl-box-title {
  font-size: .71rem; font-weight: 900; letter-spacing: .07em;
  text-transform: uppercase; margin-bottom: .3rem; line-height: 1.3;
  color: rgba(255,255,255,.95);
}
.udl-box-sub  { font-size: .67rem; font-weight: 600; margin-bottom: .4rem; line-height: 1.4; color: rgba(255,255,255,.88); }
.udl-box-items{ font-size: .63rem; font-style: italic; line-height: 1.85; color: rgba(255,255,255,.78); }
/* GOAL box text inherits AU blue */
.udl-box-goal .udl-box-title { color: #2358CF; }
.udl-box-goal .udl-box-sub   { color: #2358CF; }
.udl-box-goal .udl-box-items { color: #2358CF; }
[data-theme="dark"] .udl-box-goal .udl-box-title,
[data-theme="dark"] .udl-box-goal .udl-box-sub,
[data-theme="dark"] .udl-box-goal .udl-box-items { color: var(--accent); }
/* Grid placement */
.udl-diag-action   { grid-row: 1; grid-column: 3; }
.udl-diag-topconn  { grid-row: 2; grid-column: 3; display: flex; justify-content: center; }
.udl-diag-rep      { grid-row: 1 / 6; grid-column: 1; }
.udl-diag-leftconn { grid-row: 3; grid-column: 2; display: flex; align-items: center; }
.udl-diag-goal     { grid-row: 3; grid-column: 3; }
.udl-diag-rightconn{ grid-row: 3; grid-column: 4; display: flex; align-items: center; }
.udl-diag-ask      { grid-row: 1 / 6; grid-column: 5; }
.udl-diag-btmconn  { grid-row: 4; grid-column: 3; display: flex; justify-content: center; }
.udl-diag-engage   { grid-row: 5; grid-column: 3; }
/* Connector lines via ::after */
.udl-diag-topconn::after,
.udl-diag-btmconn::after { content: ''; width: 2px; height: 100%; background: #2358CF; }
.udl-diag-leftconn::after,
.udl-diag-rightconn::after { content: ''; height: 2px; width: 100%; background: #2358CF; }
[data-theme="dark"] .udl-diag-topconn::after,
[data-theme="dark"] .udl-diag-btmconn::after,
[data-theme="dark"] .udl-diag-leftconn::after,
[data-theme="dark"] .udl-diag-rightconn::after { background: var(--accent); }
@media (max-width: 560px) {
  .udl-diagram { display: flex; flex-direction: column; gap: .5rem; max-width: 100%; }
  .udl-diag-topconn, .udl-diag-btmconn,
  .udl-diag-leftconn, .udl-diag-rightconn { display: none; }
}

/* === PRINT === */
@media print {
  /* Hide navigation chrome, controls, and media */
  .site-header, .sidebar, .sidebar-overlay, .activity-nav,
  .ctrl-btn, .nav-btn, .add-row-btn, .del-row-btn, .hamburger,
  .add-card-btn, .add-col-btn, .modal-overlay, .seq-card-del,
  .spark-bar-right, .faculty-toggle, .progress-bar-wrap,
  .video-embed-wrap, .video-placeholder,
  .wb-example-btn, .ai-optional-label { display: none !important; }

  /* Layout */
  .main-content { margin-left: 0 !important; }
  body { background: #fff !important; font-size: 11pt !important; }
  .page { display: block !important; padding: .5in !important; max-width: 100% !important; }

  /* Always show spark panels and workbook example bodies in print */
  .spark-panel { display: block !important; border: none !important; }
  .spark-body  { display: block !important; }
  .wb-example-body { display: block !important; border-top: none !important; }

  /* Text hierarchy */
  .activity-title { font-size: 18pt !important; margin-bottom: .25in !important; }
  .step-title     { font-size: 13pt !important; }
  .spark-section-label { font-size: 9pt !important; }
  .spark-bar-label { font-size: 11pt !important; font-weight: 800 !important; }
  .spark-bar { border-radius: 6px !important; border-bottom-color: var(--border) !important;
               border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }

  /* Cards */
  .activity-card, .repeating-row, .priority-card,
  .spark-wrapper, .faculty-example { box-shadow: none !important; break-inside: avoid; }
  .fex-panel { display: block !important; }
  .fex-bar-right, .fex-chevron { display: none !important; }

  /* Sequencer — wrap columns instead of horizontal scroll */
  .seq-board-wrap { overflow: visible !important; }
  .seq-board {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(2in, 1fr)) !important;
    gap: .15in !important;
  }
  .seq-col { width: auto !important; flex-shrink: 1 !important; break-inside: avoid; }
  .add-col-btn { display: none !important; }

  /* Page breaks */
  .page + .page { page-break-before: always; }
  h1, h2, h3 { page-break-after: avoid; }
}
@page { margin: .65in; }

/* === RESPONSIVE === */
@media (max-width: 860px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .hamburger { display: flex; }
  .main-content { margin-left: 0; }
  .welcome-cards { grid-template-columns: 1fr; }
  .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }
  .form-grid-4 { grid-template-columns: 1fr 1fr; }
  .priority-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .page { padding: 1.4rem 1rem 4rem; }
  .welcome-hero { padding: 1.75rem 1.25rem; }
  .welcome-title { font-size: 1.6rem; }
  .header-right .ctrl-btn:not(.primary) { display: none; }
}