/* Facilitator guide and student pre-reading pages. Builds on site.css tokens. */

.fg-header h1 { max-width: 30ch; }
.fg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.9rem; margin: 0.6rem 0 0; color: var(--muted); font-size: 0.92rem; }
.fg-muted { color: var(--muted); font-size: 0.92rem; }
.fg-minutes { margin-left: 0.4rem; color: var(--muted); font-size: 0.85rem; font-weight: 600; }

.fg-chip { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.fg-chip.teach { background: #efe8fb; color: #4a2f8a; }
.fg-chip.review { background: #e0f1f1; color: #0b6e73; }
.fg-chip.assess { background: #fbe4ef; color: #a81c61; }
.fg-chip.reassess { background: #fde8e3; color: #9c3a1e; }
.fg-chip.project { background: #fff1d1; color: #7c5100; }
.fg-chip.flex { background: #eceef1; color: #4c5663; }
.fg-legend { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0 1rem; }

.fg-tag { display: inline-block; margin-left: 0.45rem; padding: 0 0.35rem; border-radius: 4px; background: #eceef1; color: #4c5663; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; vertical-align: 0.1em; }
.fg-tag.deeper { background: #efe8fb; color: #4a2f8a; }
.fg-tag.laptop { background: #fff1d1; color: #7c5100; }
.fg-tag.warn { background: #fde8e3; color: #9c3a1e; margin-left: 0; }

.fg-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); gap: 1rem; margin: 1rem 0; }
.fg-panel { padding: 1rem 1.15rem; border: 1px solid var(--border); border-radius: 12px; background: #fff; margin: 1rem 0; }
.fg-two .fg-panel { margin: 0; }
.fg-panel h2 { margin: 0 0 0.5rem; padding: 0; border: 0; font-size: 1.12rem; color: var(--purple-deep); }
.fg-panel ul, .fg-panel ol { margin: 0.3rem 0 0 1.15rem; padding: 0; }
.fg-panel li { margin: 0.25rem 0; }
.fg-reading li { margin: 0.3rem 0; }
.fg-exercises { list-style: none; margin: 0.45rem 0 0 !important; padding: 0; display: grid; gap: 0.2rem; }
.fg-exercises li { margin: 0 !important; }
.fg-exercises a { font-weight: 600; }
.fg-exercises.compact { font-size: 0.92rem; }

.fg-assessment { margin: 1rem 0; padding: 0.8rem 1rem; border-left: 5px solid #cb287a; border-radius: 0 10px 10px 0; background: #fdf0f6; }
.fg-checkpoint { margin: 1.2rem 0; padding: 0.9rem 1.1rem; border-left: 5px solid #267a45; border-radius: 0 12px 12px 0; background: #eef8f0; }
.fg-checkpoint h2 { margin: 0 0 0.35rem; padding: 0; border: 0; font-size: 1.12rem; color: #1d5e34; }
.fg-checkpoint p { margin: 0; }
.fg-extension { border-top: 4px solid #5a3e9d; }
.fg-catchup { border-top: 4px solid #0b6e73; }
.fg-homework { border-top: 4px solid #d4a017; }
.fg-notes { background: #fbfafc; }

/* Session plan timeline */
.fg-session-plan { margin: 1.4rem 0; }
.fg-plan-bar { display: flex; height: 12px; margin: 0.4rem 0 0.8rem; overflow: hidden; border-radius: 6px; background: #eceef1; }
.fg-plan-bar span { display: block; border-right: 2px solid #fff; }
.fg-plan-bar span:last-child { border-right: 0; }
.fg-plan { list-style: none; margin: 0; padding: 0; }
.fg-block { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 1rem; padding: 0.85rem 0; border-top: 1px solid var(--border); }
.fg-block:last-child { border-bottom: 1px solid var(--border); }
.fg-time { font-size: 1.15rem; font-weight: 800; color: var(--purple-deep); font-variant-numeric: tabular-nums; }
.fg-time small { display: block; font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.fg-block h3 { margin: 0.2rem 0 0.25rem; font-size: 1.02rem; color: var(--ink); }
.fg-block p { margin: 0.2rem 0; }
.fg-block-type { display: inline-block; padding: 0 0.45rem; border-radius: 4px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; background: #eceef1; color: #4c5663; }

.fg-block-recap .fg-block-type, .fg-bar-recap, .fg-block-quiz .fg-block-type, .fg-bar-quiz { background: #e0f1f1; color: #0b6e73; }
.fg-block-demo .fg-block-type, .fg-bar-demo, .fg-block-discuss .fg-block-type, .fg-bar-discuss { background: #efe8fb; color: #4a2f8a; }
.fg-block-build .fg-block-type, .fg-bar-build, .fg-block-stations .fg-block-type, .fg-bar-stations { background: #fde8e3; color: #9c3a1e; }
.fg-block-measure .fg-block-type, .fg-bar-measure { background: #e3eefb; color: #1f4f8a; }
.fg-block-code-along .fg-block-type, .fg-bar-code-along { background: #fbe4ef; color: #a81c61; }
.fg-block-plan .fg-block-type, .fg-bar-plan, .fg-block-studio .fg-block-type, .fg-bar-studio { background: #fff1d1; color: #7c5100; }
.fg-block-assess .fg-block-type, .fg-bar-assess { background: #f7d9e7; color: #8f1553; }
.fg-block-wrap-up .fg-block-type, .fg-bar-wrap-up { background: #e8f3ea; color: #1d5e34; }
.fg-plan-bar .fg-bar-recap, .fg-plan-bar .fg-bar-quiz { background: #6cc0c3; }
.fg-plan-bar .fg-bar-demo, .fg-plan-bar .fg-bar-discuss { background: #9d85d8; }
.fg-plan-bar .fg-bar-build, .fg-plan-bar .fg-bar-stations { background: #e58a6e; }
.fg-plan-bar .fg-bar-measure { background: #6d9fdc; }
.fg-plan-bar .fg-bar-code-along { background: #e06aa4; }
.fg-plan-bar .fg-bar-plan, .fg-plan-bar .fg-bar-studio { background: #e0b44a; }
.fg-plan-bar .fg-bar-assess { background: #b83a78; }
.fg-plan-bar .fg-bar-wrap-up { background: #6eb787; }

/* Overview */
.fg-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 0.8rem; margin: 1.2rem 0; }
.fg-stats div { padding: 0.9rem 1rem; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.fg-stats strong { display: block; font-size: 1.9rem; line-height: 1; color: var(--purple-deep); font-variant-numeric: tabular-nums; }
.fg-stats span { color: var(--muted); font-size: 0.88rem; }
.fg-weeks { display: grid; gap: 0.6rem; }
.fg-week { display: grid; grid-template-columns: 12rem repeat(5, minmax(0, 1fr)); gap: 0.4rem; }
.fg-week-head { padding: 0.35rem 0.4rem 0.35rem 0; }
.fg-week-head span { display: block; color: var(--pink); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.fg-week-head strong { display: block; color: var(--purple-deep); line-height: 1.25; }
.fg-week-head p { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.8rem; line-height: 1.35; }
.fg-day { display: grid; align-content: start; gap: 0.2rem; padding: 0.55rem 0.6rem; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: inherit; font-size: 0.82rem; line-height: 1.35; }
.fg-day:hover { border-color: var(--pink); text-decoration: none; }
.fg-day.review { background: #eef8f8; }
.fg-day.assess { background: #fdf0f6; border-color: #efc2d8; }
.fg-day.reassess { background: #fdf3f0; }
.fg-day.project { background: #fffaf0; }
.fg-day.is-flex { border-style: dashed; }
.fg-day-num { color: var(--pink); font-weight: 800; font-variant-numeric: tabular-nums; }
.fg-day-title { font-weight: 600; color: var(--ink); }
.fg-day-kind { color: var(--muted); font-size: 0.72rem; }
.table-scroll { overflow-x: auto; }

/* Student before-class page */
.fg-week-links { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1rem 0; }
.fg-week-links a { padding: 0.25rem 0.7rem; border: 1px solid var(--border); border-radius: 999px; background: #fff; font-weight: 600; }
.fg-before-week h2 { margin-top: 1.8rem; }
.fg-before { padding: 0.9rem 1rem; margin: 0.7rem 0; border: 1px solid var(--border); border-radius: 12px; background: #fff; scroll-margin-top: 5rem; }
.fg-before header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.7rem; }
.fg-before h3 { margin: 0; font-size: 1.05rem; color: var(--purple-deep); }
.fg-before h4 { margin: 0.6rem 0 0.2rem; font-size: 0.85rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.fg-before-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 0.4rem 1.2rem; }
.fg-before ol { margin: 0.2rem 0 0 1.1rem; padding: 0; }

@media (max-width: 960px) {
  .fg-week { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .fg-week-head { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .fg-week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fg-block { grid-template-columns: 1fr; gap: 0.3rem; }
}
@media print {
  .fg-noprint { display: none !important; }
  .fg-block, .fg-panel, .fg-checkpoint { break-inside: avoid; }
  .fg-panel { border-color: #999; }
}