/* IB PYP planner — handoff design system (globals.css from the Solera
   package, 2026-08-30) scoped under .ib-scope via CSS nesting so the original
   Inquiry Planner look applies only to IB planner pages inside the Syllara
   shell. Content rules are verbatim from the handoff. */
.ib-scope {
  container-type: inline-size;

  /* Syllara alignment: the IB planner speaks the same visual language as the
     rest of the app (BenQ mockup vocabulary — ink hairlines at 2px, hard drop
     shadow, mono eyebrows, pear primary). Tokens bind to --sy-* so the app's
     light/dark theme carries through without a second palette to maintain. */
  & {
    --font-sans: var(--sy-font-body, "Plus Jakarta Sans", "Avenir Next", ui-rounded, sans-serif);
    --font-mono: var(--sy-font-mono, "JetBrains Mono", ui-monospace, monospace);
    --surface: var(--sy-paper, #f7f4ec);
    --surface-raised: var(--sy-paper-raised, #fffdf8);
    --ink: var(--sy-ink, #16191f);
    --muted: var(--sy-muted, #73777f);
    --soft: var(--sy-ink-soft, #4d525b);
    --accent: var(--sy-cyan-deep, #176c91);
    --accent-soft: var(--sy-cyan-soft, #e7f6fb);
    --pear: var(--sy-pear, #d7eb4a);
    --pear-deep: var(--sy-pear-deep, #9cad27);
    --coral: var(--sy-coral, #f27778);
    --coral-deep: var(--sy-coral-deep, #9b343e);
    --mint: var(--sy-mint, #83d89e);
    --mint-deep: var(--sy-success, #2f7d4f);
    --lavender: var(--sy-lavender, #b798e8);
    --focus: var(--sy-focus, #176c91);
    /* Pear, coral and the lane hues stay bright in both themes, so text on top
       of them must NOT follow --ink (which flips to near-white in dark). */
    --on-bright: #16191f;
    --hairline: var(--sy-rule, #d7d0bd);
    --edge: var(--ink);
    --radius-lg: 20px;
    --radius-md: 14px;
    --radius-sm: 10px;
    --hard-shadow: 0 4px 0 var(--sy-ink-shadow-10, rgba(22, 25, 31, 0.14)),
      0 24px 44px -28px var(--sy-ink-shadow-8, rgba(22, 25, 31, 0.2));
    --panel-shadow: var(--hard-shadow);
    --line: var(--hairline);
    --paper: var(--surface);
    --sea: var(--accent);
    --gold: var(--pear-deep);
    --sky: var(--accent-soft);
  }

  * {
    box-sizing: border-box;
  }

  & {
    scroll-padding-top: 5.5rem;
  }

  & {
    max-width: 100%;
    overflow-x: clip;
  }

  & {
    margin: 0;
    color: var(--ink);
    background: var(--surface);
    font-family: var(--font-sans);
    font-size: 1rem;
    font-optical-sizing: auto;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
  }

  button {
    min-height: 44px;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  a:focus-visible,
  button:focus-visible,
  summary:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
  }

  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    border-color: #7a4c00;
    outline-offset: 2px;
  }

  h1,
  h2,
  h3,
  p {
    overflow-wrap: anywhere;
  }

  h1,
  h2,
  h3 {
    color: var(--ink);
    font-family: var(--font-sans);
  }

  h1 {
    margin: 0.45rem 0;
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    font-weight: 680;
    letter-spacing: -0.04em;
    line-height: 1.02;
  }

  h2 {
    margin: 0 0 1rem;
    font-size: clamp(1.4rem, 2.4vw, 1.75rem);
    font-weight: 650;
    letter-spacing: -0.025em;
    line-height: 1.15;
  }

  h3 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -0.008em;
    line-height: 1.3;
  }

  p {
    line-height: 1.6;
  }

  .shell {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 1.5rem 4rem;
  }

  .topbar {
    color: #fff;
    background: #17363b;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }

  .topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    max-width: 1240px;
    margin: auto;
    padding: 1rem 1.5rem;
  }

  .brand {
    font-size: 0.82rem;
    font-weight: 720;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .brand span {
    display: block;
    margin-top: 0.18rem;
    color: #c8dfdc;
    font-size: 0.75rem;
    font-weight: 450;
    letter-spacing: 0.01em;
    text-transform: none;
  }

  .topbar .mini {
    color: #c8dfdc;
  }

  .breadcrumb {
    padding: 1.4rem 0 0.5rem;
    color: var(--muted);
    font-size: 0.85rem;
  }

  .breadcrumb a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin-block: -0.75rem;
    padding: 0 0.25rem;
    color: #365f5b;
    text-decoration: underline;
    text-decoration-color: #91b0ac;
    text-underline-offset: 0.2em;
    vertical-align: middle;
  }

  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 1.5rem;
    padding: 1.15rem 0 1.75rem;
    border-bottom: 1px solid var(--hairline);
  }

  .eyebrow,
  .type,
  .week-field-label {
    color: #526c69;
    font-size: 0.72rem;
    font-weight: 720;
    letter-spacing: 0.075em;
    line-height: 1.3;
    text-transform: uppercase;
  }

  .type {
    display: block;
    margin-bottom: 0.3rem;
  }

  .status,
  .chip,
  .context {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    border-radius: 999px;
    padding: 0.3rem 0.62rem;
    font-size: 0.73rem;
    font-weight: 680;
    line-height: 1.2;
    white-space: nowrap;
  }

  .status {
    color: #714d05;
    background: #fff0c7;
    border: 1px solid #e8c977;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .chip {
    margin: 0 0.35rem 0.35rem 0;
    color: #294e4a;
    background: #e5eeec;
  }

  .context {
    margin-right: 0.3rem;
    color: #255075;
    background: #e7f0fa;
    text-transform: capitalize;
  }

  .section {
    margin-top: 2rem;
  }

  .card,
  .edit-panel,
  .save-state,
  .disclosure {
    background: #fff;
    border: 1px solid var(--hairline);
    border-radius: 1rem;
  }

  .card {
    padding: 1.4rem;
  }

  .callout {
    padding: 1.2rem 1.35rem;
    background: #e8f3f1;
    border-left: 4px solid var(--accent);
    border-radius: 0 0.75rem 0.75rem 0;
  }

  .grid {
    display: grid;
    gap: 1rem;
  }

  .grid-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .loi {
    padding: 0.75rem 0 0.75rem 1rem;
    border-left: 2px solid #a9c4c0;
    line-height: 1.5;
  }

  .list {
    margin: 0.5rem 0;
    padding-left: 1.3rem;
  }

  .list li {
    margin: 0.55rem 0;
    line-height: 1.5;
  }

  .mapping {
    padding: 1.1rem 0;
    border-top: 1px solid var(--hairline);
  }

  .mapping:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .mapping-title,
  .card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
  }

  .mapping p {
    margin: 0.5rem 0;
    color: #435157;
  }

  .mapping .required {
    color: #684f4d;
    font-size: 0.88rem;
  }

  .week {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: 1rem;
  }

  .week + .week {
    margin-top: 1.15rem;
    padding-top: 1.15rem;
    border-top: 1px solid var(--hairline);
  }

  .week-number {
    padding-top: 0.2rem;
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 700;
  }

  .week h3 {
    font-size: 1.2rem;
  }

  .question {
    margin: 0.35rem 0;
    color: #3a5459;
    font-style: italic;
  }

  .mini {
    color: var(--muted);
    font-size: 0.86rem;
  }

  .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1.5rem;
  }

  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0.65rem 0.95rem;
    color: #174f4b;
    background: #fff;
    border: 1px solid #3e716d;
    border-radius: 0.7rem;
    cursor: pointer;
    font-size: 0.87rem;
    font-weight: 690;
    line-height: 1.2;
    transition: transform 100ms ease-out, background-color 160ms ease-out;
  }

  .button:hover:not(:disabled) {
    background: #edf5f3;
  }

  .button:active:not(:disabled) {
    transform: scale(.985);
  }

  .button.primary {
    color: #fff;
    background: #096c66;
    border-color: #096c66;
    box-shadow: 0 8px 22px rgba(10, 110, 104, 0.18);
  }

  .button.primary:hover:not(:disabled) {
    background: #075e59;
  }

  .button:disabled {
    cursor: not-allowed;
    opacity: 0.52;
  }

  .button.danger {
    color: #8a3028;
    border-color: #b5635a;
  }

  .text-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: #075e59;
    font-size: 0.82rem;
    font-weight: 690;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2rem;
  }

  .balance {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .balance strong {
    display: block;
    color: var(--accent);
    font-size: 1.5rem;
  }

  .balance div {
    min-width: 6rem;
  }

  .detail-header {
    margin: 1.5rem 0;
  }

  .detail-header h1 {
    font-size: 2.5rem;
  }

  .prose {
    max-width: 52rem;
  }

  /* The unit navigator is the single translucent page-chrome layer. */
  .unit-nav {
    position: sticky;
    top: 0.75rem;
    z-index: 40;
    display: flex;
    align-items: stretch;
    gap: 0.2rem;
    margin: 1.1rem 0 1.65rem;
    padding: 0.35rem;
    overflow-x: auto;
    background: var(--surface-raised);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 0.9rem;
    box-shadow: 0 10px 34px rgba(29, 29, 31, 0.09);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    scrollbar-width: thin;
  }

  .unit-nav-link {
    display: inline-flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 4.35rem;
    min-height: 44px;
    padding: 0.38rem 0.7rem;
    color: #45585c;
    border: 1px solid transparent;
    border-radius: 0.62rem;
    font-size: 0.8rem;
    font-weight: 680;
    line-height: 1.05;
    white-space: nowrap;
    transition: transform 100ms ease-out, background-color 160ms ease-out;
  }

  .unit-nav-link:hover {
    background: #edf5f3;
  }

  .unit-nav-link:active {
    transform: scale(.985);
  }

  .unit-nav-link.is-active {
    color: #fff;
    background: #0a6964;
    border-color: #075d58;
  }

  .unit-nav-selection-label,
  .segment-selection-label {
    margin-top: 0.16rem;
    font-size: 0.58rem;
    font-weight: 720;
    letter-spacing: 0.045em;
    line-height: 1;
    text-transform: uppercase;
  }

  .unit-nav-selection-label {
    color: #d7f1ee;
  }

  .overview-direction {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2rem;
    margin: 0 0 1.15rem;
    padding: clamp(1.35rem, 3vw, 2rem);
    background: #fff;
    border: 1px solid var(--hairline);
    border-left: 5px solid var(--accent);
    border-radius: 1rem;
    box-shadow: 0 14px 42px rgba(29, 29, 31, 0.07);
  }

  .overview-direction-copy {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(15rem, 0.85fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
  }

  .overview-unit-identity {
    padding-right: clamp(0rem, 2vw, 1.5rem);
  }

  .overview-central-idea {
    max-width: 43rem;
    margin: 0.7rem 0 0;
    font-size: clamp(1.35rem, 2.8vw, 2rem);
    font-weight: 590;
    letter-spacing: -0.025em;
    line-height: 1.25;
  }

  .overview-central-idea strong {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 720;
    letter-spacing: 0.075em;
    text-transform: uppercase;
  }

  .overview-next-step {
    padding-left: 1.5rem;
    border-left: 1px solid var(--hairline);
  }

  .overview-next-step h2 {
    margin: 0.3rem 0 0.7rem;
    font-size: 1rem;
    letter-spacing: 0;
  }

  .overview-next-step h3 {
    font-size: 1.15rem;
  }

  .overview-next-step p {
    margin: 0.35rem 0;
  }

  .overview-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    min-width: 9.75rem;
  }

  .overview-start-button,
  .overview-open-link {
    justify-content: center;
  }

  .operational-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
  }

  .readiness-total {
    color: var(--accent);
    font-size: 1rem;
    white-space: nowrap;
  }

  .readiness-progress {
    height: 0.55rem;
    margin: 0.25rem 0 0.75rem;
    overflow: hidden;
    background: #dfe9e7;
    border-radius: 999px;
  }

  .readiness-progress span {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: inherit;
  }

  .readiness-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
  }

  .readiness-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    min-height: 2.5rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid transparent;
    border-radius: 0.55rem;
    font-size: 0.86rem;
  }

  .readiness-row > span:last-child {
    font-size: 0.72rem;
    font-weight: 720;
    white-space: nowrap;
  }

  .readiness-row.is-ready {
    color: #315e56;
    background: #f1f7f5;
    border-color: #d7e8e4;
  }

  .readiness-row.is-not-ready {
    color: #725213;
    background: #fff6df;
    border-color: #ecd69e;
  }

  .timeline {
    margin-bottom: 1rem;
  }

  .timeline-list {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .timeline-item {
    position: relative;
    min-width: 0;
    padding: 0.7rem 0.8rem 0.65rem 1rem;
    border-left: 1px solid var(--hairline);
  }

  .timeline-item:first-child {
    border-left: 0;
  }

  .timeline-item.is-next {
    background: #fff8e8;
    border: 1px solid #e2bf73;
    border-radius: 0.75rem;
  }

  .timeline-week {
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 720;
    letter-spacing: 0.045em;
    text-transform: uppercase;
  }

  .timeline-item h3 {
    min-height: 3.9em;
    margin-top: 0.35rem;
    font-size: 0.95rem;
    line-height: 1.3;
  }

  .timeline-status {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    margin-top: 0.4rem;
    padding: 0.2rem 0.45rem;
    color: #654407;
    border: 1px solid #b47a13;
    border-radius: 999px;
    font-size: 0.67rem;
    font-weight: 720;
  }

  .timeline-item .mini {
    margin: 0.45rem 0;
    font-size: 0.74rem;
  }

  .timeline-meta {
    min-height: 2rem;
    margin-top: 0.55rem;
  }

  .timeline-meta .context {
    min-height: 1.4rem;
    padding: 0.2rem 0.4rem;
    font-size: 0.62rem;
    white-space: normal;
  }

  .context-balance h2 {
    margin-bottom: 0.9rem;
  }

  .context-bars {
    display: grid;
    gap: 0.7rem;
  }

  .context-bar-label {
    display: flex;
    justify-content: space-between;
    gap: 0.65rem;
    font-size: 0.8rem;
  }

  .context-bar-track {
    height: 0.5rem;
    margin-top: 0.3rem;
    overflow: hidden;
    background: #e4eceb;
    border-radius: 999px;
  }

  .context-bar-track span {
    display: block;
    height: 100%;
    background: #4c8982;
    border-radius: inherit;
  }

  .storage-warning {
    margin: 0 0 0.9rem;
    padding: 0.7rem 0.85rem;
    color: #6e5117;
    background: #fff6df;
    border: 1px solid #e6cc8a;
    border-left: 4px solid var(--gold);
    border-radius: 0.5rem;
  }

  .storage-warning p {
    margin: 0;
  }

  .storage-warning .text-link {
    margin-left: 0.75rem;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
  }

  .disclosure summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    min-height: 44px;
    padding: 1.15rem 1.25rem;
    cursor: pointer;
    list-style: none;
  }

  .disclosure summary::-webkit-details-marker {
    display: none;
  }

  .disclosure summary strong,
  .disclosure summary .mini {
    display: block;
  }

  .disclosure summary .mini {
    margin-top: 0.2rem;
  }

  .disclosure-icon {
    color: var(--accent);
    font-size: 1.5rem;
    line-height: 1;
    transition: transform 180ms ease-out;
  }

  .disclosure[open] .disclosure-icon {
    transform: rotate(45deg);
  }

  .disclosure-content {
    padding: 1.25rem;
    border-top: 1px solid var(--hairline);
  }

  .section-label {
    margin-top: 0.75rem;
  }

  /* Week views share this quiet hierarchy from Week 1 through Week 6. */
  .weekly-layout {
    padding-bottom: 1.5rem;
  }

  .week-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.75rem;
    margin: 0.6rem 0 1.5rem;
    padding: 0.5rem 0 1.5rem;
    border-bottom: 1px solid var(--hairline);
  }

  .week-header h1 {
    font-size: clamp(2.1rem, 4.5vw, 3.15rem);
  }

  .week-field-label {
    margin: 1rem 0 0.25rem;
  }

  .week-contexts {
    margin-top: 0.7rem;
  }

  .save-state {
    display: flex;
    flex: 0 1 15.5rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.95rem;
  }

  .save-state strong {
    color: var(--accent);
    font-size: 0.87rem;
  }

  .save-state span {
    color: var(--muted);
    font-size: 0.75rem;
    line-height: 1.4;
  }

  .save-state .button {
    margin-top: 0.2rem;
  }

  .instruction-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .instruction-grid > :last-child:nth-child(odd) {
    grid-column: span 2;
  }

  .focus-pairs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
  }

  .subject-focus {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--hairline);
  }

  .subject-focus:first-of-type {
    margin-top: 0;
  }

  .subject-focus p {
    margin: 0.4rem 0;
  }

  .ordered-list {
    padding-left: 1.5rem;
  }

  .week-view-switcher {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(8.5rem, 1fr));
    gap: 0.2rem;
    margin: 0 0 1.5rem;
    padding: 0.25rem;
    background: #e7e7ea;
    border: 1px solid #d5d5d8;
    border-radius: 0.78rem;
  }

  .week-view-switcher button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.4rem 0.8rem;
    color: #55565b;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.58rem;
    cursor: pointer;
    font-size: 0.84rem;
    font-weight: 670;
    line-height: 1.05;
    transition: transform 100ms ease-out, background-color 160ms ease-out;
  }

  .week-view-switcher button[aria-pressed="true"] {
    color: var(--ink);
    background: #fff;
    border-color: var(--hairline);
    box-shadow: 0 2px 8px rgba(29, 29, 31, 0.1);
  }

  .week-view-switcher button:active {
    transform: scale(.985);
  }

  .segment-selection-label {
    color: var(--accent);
  }

  .teaching-studio {
    min-width: 0;
  }

  .teaching-studio-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1.25rem;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    color: #eaf7f5;
    background: #173c3e;
    border: 1px solid #0e3335;
    border-radius: 1rem;
  }

  .teaching-studio-header h2 {
    margin: 0.3rem 0 0.4rem;
    color: #fff;
  }

  .teaching-studio-header .eyebrow {
    color: #a9d7d2;
  }

  .teaching-studio-header p {
    max-width: 44rem;
    margin: 0;
    color: #d5e8e6;
  }

  .teaching-studio-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    min-width: 0;
  }

  .teaching-studio-workspace.has-inspector {
    grid-template-columns: minmax(0, 1fr) minmax(22rem, 0.78fr);
  }

  .lesson-lanes {
    display: grid;
    gap: 1.75rem;
    min-width: 0;
  }

  .lesson-lane {
    --lane-accent: #0a6e68;
    position: relative;
    min-width: 0;
    padding: 0 0 1.5rem 1.25rem;
    border-left: 4px solid var(--lane-accent);
    border-bottom: 1px solid var(--hairline);
  }

  .lesson-lane-ela {
    --lane-accent: #5174a8;
  }

  .lesson-lane-social-studies {
    --lane-accent: #8a5b3d;
  }

  .lesson-lane-science {
    --lane-accent: #4f7a57;
  }

  .lesson-lane-math {
    --lane-accent: #916d2c;
  }

  .lesson-lane-dance {
    --lane-accent: #8a4f78;
  }

  .lesson-lane-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
  }

  .lesson-lane-header h3 {
    margin: 0.18rem 0 0.25rem;
    font-size: 1.15rem;
  }

  .lesson-lane-header p {
    max-width: 42rem;
    margin: 0;
    color: var(--muted);
    font-size: 0.84rem;
  }

  .lesson-lane-owner {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 650;
  }

  .lesson-count {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 670;
  }

  .lesson-card-list {
    display: grid;
    gap: 0.65rem;
  }

  .lesson-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "sequence title duration"
      "sequence purpose purpose"
      "sequence relationship relationship"
      "sequence curriculum curriculum"
      "sequence assignment state"
      "sequence active active";
    gap: 0.25rem 0.8rem;
    width: 100%;
    min-height: 44px;
    padding: 0.9rem 1rem;
    color: var(--ink);
    text-align: left;
    background: #fff;
    border: 1px solid var(--hairline);
    border-radius: 0.8rem;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(29, 29, 31, 0.04);
    transition: transform 100ms ease-out, border-color 170ms ease-out, box-shadow 170ms ease-out;
  }

  .lesson-card:hover {
    border-color: color-mix(in srgb, var(--lane-accent) 48%, white);
    box-shadow: 0 8px 20px rgba(29, 29, 31, 0.08);
  }

  .lesson-card:active {
    transform: scale(.985);
  }

  .lesson-card[data-lesson-state="active"] {
    border: 2px solid var(--lane-accent);
    box-shadow: 0 8px 22px rgba(29, 29, 31, 0.1);
  }

  .lesson-card-sequence {
    grid-area: sequence;
    align-self: start;
    min-width: 3.8rem;
    color: var(--lane-accent);
    font-size: 0.72rem;
    font-weight: 760;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .lesson-card-title {
    grid-area: title;
    min-width: 0;
    font-size: 0.92rem;
    line-height: 1.35;
  }

  .lesson-card-duration {
    grid-area: duration;
    color: var(--muted);
    font-size: 0.75rem;
    white-space: nowrap;
  }

  .lesson-card-purpose {
    grid-area: purpose;
    color: #52535a;
    font-size: 0.8rem;
    line-height: 1.45;
  }

  .lesson-card-relationship {
    grid-area: relationship;
    color: var(--lane-accent);
    font-size: 0.72rem;
    font-weight: 680;
  }

  .lesson-card-curriculum-note {
    grid-area: curriculum;
    color: #5e4b24;
    font-size: 0.72rem;
    line-height: 1.4;
  }

  .lesson-card-assignment {
    grid-area: assignment;
    color: #405d70;
    font-size: 0.72rem;
    font-weight: 620;
  }

  .lesson-card-state {
    grid-area: state;
    justify-self: end;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 670;
  }

  .lesson-card-active-state {
    grid-area: active;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.2rem;
    color: #075e59;
    font-size: 0.72rem;
    font-weight: 760;
    letter-spacing: 0.025em;
    text-transform: uppercase;
  }

  /* The inspector is the only stronger material layer. */
  .lesson-inspector {
    min-width: 0;
    padding: clamp(1.15rem, 2.5vw, 1.65rem);
    overflow: hidden;
    opacity: 1;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.96);
    border-radius: 1rem;
    box-shadow: var(--panel-shadow);
    backdrop-filter: blur(30px) saturate(150%);
    -webkit-backdrop-filter: blur(30px) saturate(150%);
    transform: translate3d(0, 0, 0) scale(1);
    transform-origin: top right;
    transition: opacity 340ms cubic-bezier(.22, 1, .36, 1), transform 340ms cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
  }

  @starting-style {
    .lesson-inspector[data-inspector-state="open"] {
      opacity: 0;
      transform: translate3d(1.125rem, 0, 0) scale(.985);
    }
  }

  .lesson-inspector[data-inspector-state="closed"] {
    pointer-events: none;
    opacity: 0;
    transform: translate3d(1.125rem, 0, 0) scale(.985);
  }

  .lesson-inspector-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--hairline);
  }

  .lesson-inspector-header h2 {
    margin: 0.45rem 0;
    font-size: clamp(1.45rem, 2.5vw, 2rem);
  }

  .lesson-inspector-lane,
  .lesson-position {
    display: block;
    color: #365f5b;
    font-size: 0.72rem;
    font-weight: 720;
    letter-spacing: 0.055em;
    text-transform: uppercase;
  }

  .lesson-position {
    margin-top: 0.2rem;
    color: var(--muted);
  }

  .lesson-inspector-meta {
    margin: 0;
    color: var(--muted);
    font-size: 0.8rem;
  }

  .lesson-inspector-close {
    flex: 0 0 auto;
  }

  .lesson-inspector > section:not(.lesson-edit-form) {
    padding: 1rem 0;
    border-top: 1px solid var(--hairline);
  }

  .lesson-inspector > section:first-of-type {
    padding-top: 0;
    border-top: 0;
  }

  .lesson-inspector section p {
    margin: 0.35rem 0 0.8rem;
  }

  .lesson-step-list {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .lesson-step-list li {
    padding: 0.9rem;
    background: #fff;
    border: 1px solid var(--hairline);
    border-radius: 0.7rem;
  }

  .lesson-step-heading {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .lesson-step-heading span {
    color: var(--muted);
    font-size: 0.75rem;
    white-space: nowrap;
  }

  .lesson-step-list p {
    font-size: 0.84rem;
  }

  .lesson-inspector-actions > div,
  .editable-lesson-step-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.7rem;
  }

  .edit-panel {
    padding: 1.4rem;
  }

  .edit-panel h2 {
    margin-bottom: 0.5rem;
  }

  .form-grid,
  .lesson-edit-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;
    margin-top: 1.25rem;
  }

  .lesson-edit-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .field,
  .editable-list,
  .editable-lesson-steps,
  .editable-lesson-step {
    min-width: 0;
    margin: 0;
  }

  .field,
  .editable-list {
    padding: 0;
    border: 0;
  }

  .editable-lesson-steps,
  .editable-lesson-step {
    padding: 1rem;
    background: #fff;
    border: 1px solid var(--hairline);
    border-radius: 0.75rem;
  }

  .editable-lesson-steps > legend,
  .editable-lesson-step > legend {
    padding: 0 0.35rem;
    font-weight: 720;
  }

  .editable-lesson-step + .editable-lesson-step {
    margin-top: 1rem;
  }

  .field-label {
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
  }

  .field label,
  .editable-list-item > label,
  .editable-list legend,
  .field legend {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.86rem;
    font-weight: 690;
  }

  .field-label label {
    margin-bottom: 0.4rem;
  }

  .required-mark {
    color: #9a2f27;
    font-weight: 760;
  }

  .field input:not([type="checkbox"]),
  .field textarea,
  .editable-list textarea {
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    padding: 0.65rem 0.72rem;
    color: var(--ink);
    background: #fff;
    border: 1px solid #909fa0;
    border-radius: 0.55rem;
  }

  .field textarea,
  .editable-list textarea {
    resize: vertical;
  }

  .check-option {
    display: flex;
    align-items: center;
    min-height: 44px;
    margin: 0.45rem 0;
    font-weight: 450 !important;
  }

  .check-option input {
    width: 1.2rem;
    height: 1.2rem;
    margin-right: 0.45rem;
  }

  .field-error {
    margin: 0.4rem 0 0;
    color: #962d25;
    font-size: 0.8rem;
    font-weight: 690;
  }

  .full-width {
    grid-column: 1 / -1;
  }

  .editable-list {
    padding: 0.95rem;
    border: 1px solid var(--hairline);
    border-radius: 0.65rem;
  }

  .editable-list legend {
    padding: 0 0.25rem;
  }

  .editable-list .mini {
    margin-top: 0;
  }

  .editable-list-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.45rem 0.75rem;
    min-width: 0;
    margin: 0.85rem 0;
  }

  .editable-list-item > label {
    grid-column: 1 / -1;
    margin: 0;
  }

  .editable-list-item textarea {
    min-height: 3.65rem;
  }

  .reset-button {
    margin-left: auto;
  }

  .form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin-top: 1.4rem;
  }

  .inline-confirm {
    margin-top: 1.4rem;
    padding: 0.9rem;
    background: #fff6df;
    border: 1px solid #e6cc8a;
    border-radius: 0.65rem;
  }

  .inline-confirm p {
    margin: 0 0 0.75rem;
    font-weight: 690;
  }

  .inline-confirm .button + .button {
    margin-left: 0.6rem;
  }

  .lesson-planned-duration {
    margin: 0;
    padding: 0.7rem;
    color: #38524f;
    background: #edf5f3;
    border-radius: 0.55rem;
    font-size: 0.82rem;
    font-weight: 670;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  @container (max-width: 980px) {
    .overview-direction,
    .overview-direction-copy {
      grid-template-columns: minmax(0, 1fr);
    }

    .overview-next-step {
      padding-top: 1.25rem;
      padding-left: 0;
      border-top: 1px solid var(--hairline);
      border-left: 0;
    }

    .overview-actions {
      flex-direction: row;
      align-items: center;
    }

    .timeline-list {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.75rem 0;
    }

    .timeline-item:nth-child(4) {
      border-left: 0;
    }

    .teaching-studio-workspace.has-inspector {
      grid-template-columns: minmax(0, 1fr) minmax(19rem, 0.82fr);
    }
  }

  @container (max-width: 700px) {
    .shell {
      padding: 0 1rem 2.5rem;
    }

    .topbar-inner {
      padding: 0.85rem 1rem;
    }

    .hero,
    .grid-two,
    .grid-three,
    .operational-grid,
    .instruction-grid,
    .form-grid,
    .focus-pairs,
    .overview-direction,
    .overview-direction-copy {
      grid-template-columns: minmax(0, 1fr);
    }

    .hero {
      align-items: start;
    }

    .week {
      grid-template-columns: minmax(0, 1fr);
      gap: 0.15rem;
    }

    .week-number {
      padding: 0;
    }

    .card {
      padding: 1.05rem;
    }

    .unit-nav {
      top: 0.4rem;
      width: calc(100% + 2rem);
      margin-right: -1rem;
      margin-left: -1rem;
      padding-right: 1rem;
      padding-left: 1rem;
      border-right: 0;
      border-left: 0;
      border-radius: 0;
    }

    .overview-direction {
      align-items: start;
      gap: 1.25rem;
      padding: 1.2rem;
    }

    .overview-actions {
      flex-direction: column;
      align-items: stretch;
      width: 100%;
    }

    .timeline-list {
      grid-template-columns: minmax(0, 1fr);
      gap: 0;
    }

    .timeline-item,
    .timeline-item:nth-child(4) {
      display: grid;
      grid-template-columns: 4.4rem minmax(0, 1fr);
      gap: 0.5rem;
      padding: 0.8rem 0;
      border-bottom: 1px solid var(--hairline);
      border-left: 0;
    }

    .timeline-item.is-next {
      padding: 0.8rem;
      border: 1px solid #e2bf73;
    }

    .timeline-item h3 {
      min-height: 0;
      margin-top: 0;
    }

    .timeline-week {
      padding-top: 0.15rem;
    }

    .timeline-meta {
      min-height: 0;
    }

    .readiness-list {
      grid-template-columns: minmax(0, 1fr);
    }

    .disclosure-content {
      padding: 1rem;
    }

    .week-header,
    .teaching-studio-header {
      flex-direction: column;
      align-items: stretch;
      gap: 1rem;
    }

    .save-state {
      width: 100%;
      max-width: none;
    }

    .instruction-grid > :last-child:nth-child(odd) {
      grid-column: auto;
    }

    .week-view-switcher {
      width: 100%;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .teaching-studio-workspace.has-inspector {
      display: block;
    }

    .lesson-lane {
      padding-left: 0.8rem;
    }

    .lesson-lane-header {
      flex-direction: column;
      gap: 0.45rem;
    }

    .lesson-card {
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas:
        "sequence duration"
        "title title"
        "purpose purpose"
        "assignment state"
        "active active";
    }

    .lesson-inspector {
      position: fixed;
      inset: 0;
      z-index: 100;
      width: 100%;
      max-width: none;
      height: 100dvh;
      padding: 1rem;
      overflow-x: clip;
      overflow-y: auto;
      overscroll-behavior: contain;
      background: #fff;
      border: 0;
      border-radius: 0;
      transform-origin: bottom center;
    }

    @starting-style {
      .lesson-inspector[data-inspector-state="open"] {
        opacity: 0;
        transform: translate3d(0, 1.5rem, 0) scale(.99);
      }
    }

    .lesson-inspector[data-inspector-state="closed"] {
      transform: translate3d(0, 1.5rem, 0) scale(.99);
    }

    .lesson-inspector .field,
    .lesson-inspector .editable-list,
    .lesson-inspector .editable-list-item,
    .lesson-inspector .editable-lesson-step {
      width: 100%;
      max-width: 100%;
      min-width: 0;
    }

    .edit-panel {
      padding: 1.05rem;
    }

    .editable-list-item {
      grid-template-columns: minmax(0, 1fr);
    }

    .editable-list-item > label {
      grid-column: auto;
    }

    .editable-list-item .button {
      justify-self: stretch;
    }

    .lesson-inspector-actions > div,
    .editable-lesson-step-actions,
    .form-actions {
      align-items: stretch;
      flex-direction: column;
    }

    .lesson-inspector-actions .button,
    .editable-lesson-step-actions .button,
    .form-actions .button,
    .reset-button {
      width: 100%;
      margin-left: 0;
    }

    .inline-confirm .button {
      display: flex;
      width: 100%;
      margin: 0.55rem 0 0 !important;
    }
  }

  @container (max-width: 390px) {
    .lesson-inspector {
      position: fixed;
      inset: 0;
      width: 100%;
      max-width: none;
      height: 100dvh;
      background: #fff;
    }

    .lesson-inspector-header {
      flex-direction: column-reverse;
    }

    .lesson-inspector-close {
      align-self: flex-end;
    }

    .card-heading,
    .mapping-title {
      flex-direction: column;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      scroll-behavior: auto !important;
      transition-duration: .01ms !important;
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
    }

    .lesson-inspector,
    .lesson-inspector[data-inspector-state="closed"] {
      transform: none !important;
    }
  }

  @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    .unit-nav,
    .lesson-inspector {
      background: #fff;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }

  @media (prefers-contrast: more) {
    .topbar .mini {
      color: #fff;
    }

    .unit-nav,
    .lesson-inspector,
    .card,
    .lesson-card,
    .disclosure,
    .save-state,
    .edit-panel {
      border-color: #555;
    }

    .lesson-card[data-lesson-state="active"],
    .unit-nav-link.is-active {
      outline: 2px solid currentColor;
      outline-offset: -4px;
    }
  }

  /* Live teaching command center and same-browser student display. */
  .teach-shell {
    width: min(100%, 1380px);
    margin: 0 auto;
    padding: clamp(1rem, 3vw, 2rem);
  }

  .teach-shell :focus-visible,
  .student-display-shell :focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
  }

  .teach-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem 1rem;
    margin-bottom: 1rem;
  }

  .teach-header .eyebrow,
  .teach-header h1 {
    flex-basis: 100%;
  }

  .teach-header h1 {
    margin: 0;
    font-size: clamp(1.6rem, 3vw, 2.3rem);
  }

  .teach-command-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(19rem, .8fr);
    grid-template-areas:
      "progress support"
      "phase support"
      "actions support";
    align-items: start;
    gap: 1rem;
  }

  .teach-command-surface,
  .teach-support-panel,
  .student-display-surface {
    background: var(--surface-raised);
    border: 1px solid var(--hairline);
    border-radius: 1rem;
  }

  .teach-command-surface,
  .teach-support-panel {
    padding: clamp(1rem, 2.5vw, 1.5rem);
  }

  .teach-command-surface {
    grid-area: phase;
    min-width: 0;
    box-shadow: 0 12px 36px rgba(29, 29, 31, .07);
    transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
  }

  .teach-support-panel {
    display: grid;
    grid-area: support;
    gap: 1rem;
  }

  .teach-navigation {
    display: contents;
  }

  .teach-support-panel > section,
  .teach-evidence,
  .teach-notes-field {
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--hairline);
  }

  .teach-support-panel h2,
  .teach-evidence legend {
    margin-bottom: .55rem;
    font-size: 1rem;
    font-weight: 710;
  }

  .teach-private-label {
    margin: 0;
    color: #6d4d10;
    font-size: .78rem;
    font-weight: 690;
  }

  .teach-evidence {
    display: grid;
    gap: .45rem;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
  }

  .teach-evidence label {
    display: flex;
    align-items: center;
    min-height: 44px;
    gap: .55rem;
  }

  .teach-evidence input {
    width: 1.2rem;
    height: 1.2rem;
  }

  .teach-notes-field {
    display: grid;
    gap: .4rem;
    font-size: .86rem;
    font-weight: 690;
  }

  .teach-notes-field textarea {
    width: 100%;
    min-height: 6.5rem;
    padding: .7rem;
    resize: vertical;
    color: var(--ink);
    background: #fff;
    border: 1px solid #829391;
    border-radius: .6rem;
    font-weight: 450;
  }

  .teach-progress {
    position: relative;
    display: grid;
    grid-area: progress;
    grid-template-columns: repeat(auto-fit, minmax(3.1rem, 1fr));
    gap: .4rem;
    margin: 0;
    padding-bottom: .65rem;
  }

  .teach-progress::before,
  .teach-progress__fill {
    position: absolute;
    bottom: 0;
    left: 0;
    height: .25rem;
    border-radius: 999px;
    content: "";
  }

  .teach-progress::before {
    width: 100%;
    background: #d9e3e1;
  }

  .teach-progress__fill {
    max-width: 100%;
    background: var(--accent);
    transition: width 180ms ease-out;
  }

  .teach-progress__step {
    min-width: 44px;
    min-height: 44px;
    padding: .35rem;
    color: #4b5b5a;
    background: #f5f8f7;
    border: 1px solid #bdccca;
    border-radius: .55rem;
    cursor: pointer;
    font-size: .7rem;
    font-weight: 680;
    line-height: 1.15;
  }

  .teach-progress__step span {
    display: block;
  }

  .teach-progress__step.is-current {
    color: #fff;
    background: #0a6964;
    border-color: #075d58;
  }

  .teach-progress__step.is-complete {
    color: #24544e;
    background: #deefec;
    border-style: double;
  }

  .teach-timer {
    display: grid;
    grid-template-columns: repeat(3, auto) minmax(0, 1fr);
    align-items: center;
    gap: .6rem 1.25rem;
    margin-bottom: 1.2rem;
    padding: .8rem;
    background: #edf5f3;
    border: 1px solid #c8dcda;
    border-radius: .75rem;
    font-variant-numeric: tabular-nums;
    transition: background-color 160ms ease-out, border-color 160ms ease-out;
  }

  .teach-timer p {
    margin: 0;
  }

  .teach-timer p span {
    display: block;
    color: var(--muted);
    font-size: .68rem;
    font-weight: 720;
    letter-spacing: .05em;
    text-transform: uppercase;
  }

  .teach-timer p strong {
    font-size: clamp(1.25rem, 3vw, 2rem);
  }

  .teach-timer[data-status="planned-time-reached"] {
    background: #fff6df;
    border-color: #c69531;
  }

  .teach-timer-actions,
  .teach-phase-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .55rem;
  }

  .teach-timer-actions button,
  .teach-phase-actions button {
    min-width: 44px;
    min-height: 44px;
  }

  .teach-next-preview {
    padding: .7rem .8rem;
    color: #3a5754;
    background: #f1f6f5;
    border-left: 3px solid #8db4b0;
  }

  .teach-phase-actions {
    grid-area: actions;
    margin-top: 1.25rem;
  }

  .student-display-shell {
    min-height: 100dvh;
    padding: clamp(1rem, 4vw, 3rem);
    color: #f4fbfa;
    background: #12383a;
  }

  .student-display-surface {
    display: grid;
    align-content: center;
    min-height: calc(100dvh - clamp(2rem, 8vw, 6rem));
    padding: clamp(1.5rem, 6vw, 5rem);
    color: #f4fbfa;
    background: #173f41;
    border-color: rgba(255, 255, 255, .28);
  }

  .student-display-surface h1,
  .student-display-surface h2 {
    color: inherit;
  }

  .student-display-prompt {
    max-width: 28ch;
    font-size: clamp(1.65rem, 4.5vw, 4.25rem);
    line-height: 1.18;
  }

  .student-display-timer {
    font-size: clamp(2rem, 6vw, 5.5rem);
    font-variant-numeric: tabular-nums;
  }

  .student-display-waiting {
    width: fit-content;
    padding: .7rem 1rem;
    color: #fff4cf;
    background: #624a12;
    border: 2px solid #ffe19a;
    border-radius: .7rem;
    font-size: clamp(1.25rem, 3vw, 2.2rem);
    font-weight: 720;
  }

  .student-display-status {
    width: fit-content;
    padding: .4rem .7rem;
    border: 2px solid currentColor;
    border-radius: 999px;
    font-size: clamp(1rem, 2vw, 1.5rem);
    font-weight: 720;
  }

  .teach-summary {
    max-width: 56rem;
    margin: 0 auto;
  }

  .teach-summary > section,
  .teach-summary > fieldset,
  .teach-summary > label {
    margin-top: 1.25rem;
  }

  .teach-summary-list {
    display: grid;
    gap: .45rem;
    padding-left: 1.4rem;
  }

  .teach-summary-actions,
  .teach-completion-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .65rem;
    margin-top: 1.5rem;
  }

  .teach-replacement-dialog {
    position: fixed;
    z-index: 100;
    right: clamp(1rem, 5vw, 4rem);
    bottom: clamp(1rem, 5vw, 4rem);
    width: min(calc(100% - 2rem), 32rem);
    padding: 1.25rem;
    background: #fff8e8;
    border: 2px solid #966d1c;
    border-radius: 1rem;
    box-shadow: var(--panel-shadow);
  }

  .teach-replacement-dialog .button + .button {
    margin-left: .55rem;
  }

  @container (max-width: 820px) {
    .teach-command-layout {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas:
        "phase"
        "support"
        "progress"
        "actions";
    }

    .teach-timer {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .teach-timer-actions {
      grid-column: 1 / -1;
      justify-content: stretch;
    }

    .teach-timer-actions .button {
      flex: 1 1 8rem;
    }
  }

  @container (max-width: 480px) {
    .teach-shell {
      padding: .75rem;
    }

    .teach-progress {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .teach-phase-actions .button {
      flex: 1 1 100%;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .teach-timer,
    .teach-progress__fill,
    .teach-command-surface {
      animation: none !important;
      transition: none !important;
    }
  }

  @media (prefers-reduced-transparency: reduce) {
    .teach-command-surface,
    .teach-support-panel,
    .student-display-surface {
      background: var(--surface);
      backdrop-filter: none;
    }

    .student-display-surface {
      color: var(--ink);
    }
  }

  @media (prefers-contrast: more) {
    .teach-command-surface,
    .teach-support-panel,
    .student-display-surface {
      border-color: CanvasText;
    }

    .teach-shell :focus-visible,
    .student-display-shell :focus-visible {
      outline: 3px solid CanvasText;
      outline-offset: 3px;
    }
  }

  .lesson-resource-page {
    display: grid;
    gap: 1.5rem;
  }

  .resource-status {
    display: inline-flex;
    width: fit-content;
    padding: .4rem .7rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-weight: 700;
  }

  .resource-source-card,
  .resource-print-section {
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: 1.125rem;
    background: var(--surface-raised);
    break-inside: avoid;
  }

  .resource-source-card + .resource-source-card {
    margin-top: .9rem;
  }

  .resource-prompt-grid {
    display: grid;
    gap: .9rem;
    margin: 0;
    padding-left: 1.4rem;
  }

  .resource-prompt-grid > li {
    padding: .7rem .9rem;
    border-left: 3px solid var(--accent);
    break-inside: avoid;
  }

  .resource-packet {
    display: grid;
    gap: 1.125rem;
  }

  @media print {
    @page {
      size: auto;
      margin: 12mm;
    }

    body {
      background: #fff !important;
      color: #000 !important;
      font-size: 12pt;
    }

    .resource-no-print,
    .topbar,
    .bottom-nav {
      display: none !important;
    }

    .lesson-resource-page,
    .resource-source-card,
    .resource-print-section,
    .resource-prompt-grid > li {
      color: #000 !important;
      background: #fff !important;
      box-shadow: none !important;
    }

    .resource-source-card,
    .resource-print-section {
      border: 1px solid #000;
      break-inside: avoid;
      page-break-inside: avoid;
    }

    .resource-print-section h2 {
      break-after: avoid;
      page-break-after: avoid;
    }

    .teach-shell .button,
    .teach-progress,
    .teach-timer-actions,
    .teach-phase-actions,
    .teach-private-label,
    .teach-evidence,
    .teach-notes-field {
      display: none !important;
    }
  }


  /* ==========================================================================
     SYLLARA ALIGNMENT LAYER
     Two jobs. (1) Restate the ported Solera components in Syllara's own
     vocabulary — 2px ink edges, hard drop shadow, mono eyebrows, pear primary —
     so the IB planner stops reading as a second product embedded in the shell.
     (2) Add the navigation chrome the port never had: one unit bar, a week rail
     that shows week state, a flat period list in teaching order, and an
     inspector that docks instead of shoving the page around.
     Ordered last so it wins over the handoff rules above without deleting them.
     ========================================================================== */

  h1 {
    font-size: clamp(1.9rem, 3.4vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.045em;
  }

  h2 {
    font-weight: 800;
    letter-spacing: -0.02em;
  }

  h3 {
    font-weight: 750;
  }

  .eyebrow,
  .type,
  .week-field-label {
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
  }

  .mini {
    color: var(--soft);
  }

  .question {
    color: var(--soft);
    font-style: normal;
    font-weight: 620;
  }

  .card,
  .edit-panel,
  .save-state,
  .disclosure {
    background: var(--surface-raised);
    border: 2px solid var(--edge);
    border-radius: var(--radius-lg);
    box-shadow: var(--hard-shadow);
  }

  .callout {
    background: var(--accent-soft);
    border: 2px solid var(--edge);
    border-left-width: 8px;
    border-radius: var(--radius-md);
  }

  .status,
  .chip,
  .context {
    border: 2px solid var(--edge);
    border-radius: 999px;
    padding: 0.28rem 0.68rem;
    background: var(--surface-raised);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .chip {
    background: var(--accent-soft);
    font-family: var(--font-sans);
    letter-spacing: 0;
    text-transform: none;
  }

  .context {
    background: var(--sy-lavender-soft, #f2ebfd);
  }

  .button {
    border: 2px solid var(--edge);
    border-radius: 999px;
    background: var(--surface-raised);
    color: var(--ink);
    font-weight: 750;
    box-shadow: 0 2px 0 var(--sy-ink-shadow-10, rgba(22, 25, 31, 0.14));
  }

  .button:hover:not(:disabled) {
    background: var(--pear);
    color: var(--on-bright);
  }

  .button.primary {
    background: var(--pear);
    color: var(--on-bright);
    border-color: var(--edge);
    box-shadow: 0 3px 0 var(--pear-deep);
  }

  .button.primary:hover:not(:disabled) {
    background: var(--pear-deep);
    color: var(--on-bright);
  }

  .button.danger {
    color: var(--coral-deep);
    border-color: var(--edge);
    background: var(--sy-coral-soft, #fdeceb);
  }

  .button.danger:hover:not(:disabled) {
    background: var(--coral);
    color: var(--on-bright);
  }

  .text-link {
    color: var(--accent);
    font-weight: 750;
  }

  .loi {
    border-left: 4px solid var(--pear);
  }

  /* ---------- Unit bar: one identity + chrome row, replaces breadcrumb + hero
     + a nine-item tab strip. Reference pages move into the trailing link group
     so the week rail below is unambiguously the spine. ---------- */
  .ib-unitbar {
    position: sticky;
    top: 0;
    z-index: 45;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem 1.25rem;
    margin: 0 0 0.9rem;
    padding: 0.85rem 0 0.75rem;
    background: linear-gradient(var(--surface) 78%, transparent);
  }

  .ib-unitbar__id {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.3rem 0.7rem;
    min-width: 0;
  }

  .ib-unitbar__back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 44px;
    color: var(--soft);
    font-size: 0.82rem;
    font-weight: 700;
  }

  .ib-unitbar__back:hover {
    color: var(--ink);
  }

  .ib-unitbar__title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
  }

  .ib-unitbar__meta {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .ib-unitbar__aside {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .ib-refnav {
    display: flex;
    gap: 0.3rem;
    padding: 0.22rem;
    border: 2px solid var(--hairline);
    border-radius: 999px;
    background: var(--surface-raised);
  }

  .ib-refnav a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 0.75rem;
    border-radius: 999px;
    color: var(--soft);
    font-size: 0.8rem;
    font-weight: 700;
  }

  .ib-refnav a:hover {
    background: var(--accent-soft);
    color: var(--ink);
  }

  .ib-refnav a.is-active {
    background: var(--ink);
    color: var(--surface-raised);
  }

  /* ---------- Week rail: the spine. Every week states where it sits in the
     term, so a teacher can land on the right one without reading six labels
     that all look identical. ---------- */
  .ib-weekrail {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0 0 1.4rem;
  }

  .ib-weekrail__week {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-height: 74px;
    padding: 0.6rem 0.7rem 0.65rem;
    border: 2px solid var(--edge);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    color: var(--ink);
    text-align: left;
    transition: transform 110ms ease-out, background-color 160ms ease-out;
  }

  .ib-weekrail__week:hover {
    transform: translateY(-2px);
    background: var(--accent-soft);
    color: var(--ink);
  }

  .ib-weekrail__n {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .ib-weekrail__title {
    font-size: 0.86rem;
    font-weight: 720;
    line-height: 1.25;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .ib-weekrail__week[data-state="current"] {
    background: var(--pear);
    color: var(--on-bright);
    box-shadow: 0 3px 0 var(--pear-deep);
  }

  .ib-weekrail__week[data-state="current"] .ib-weekrail__n {
    color: var(--on-bright);
  }

  .ib-weekrail__week[data-state="past"] {
    opacity: 0.72;
  }

  .ib-weekrail__week[data-state="unplanned"] {
    border-style: dashed;
    background: transparent;
  }

  .ib-weekrail__week.is-active {
    background: var(--ink);
    color: var(--surface-raised);
    box-shadow: var(--hard-shadow);
  }

  .ib-weekrail__week.is-active .ib-weekrail__n {
    color: inherit;
    opacity: 0.78;
  }

  /* ---------- Week workspace ---------- */
  .week-view-switcher {
    border: 2px solid var(--hairline);
    border-radius: 999px;
    background: var(--surface-raised);
    box-shadow: none;
  }

  .week-view-switcher button {
    border-radius: 999px;
    font-weight: 720;
  }

  .week-view-switcher button[aria-pressed="true"] {
    background: var(--ink);
    color: var(--surface-raised);
  }

  .ib-weekbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0 0 1rem;
  }

  .ib-weekbar__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  /* ---------- Period list: 13 rows in teaching order, one scroll. The six
     stacked lanes it replaces ran ~2700px, so finding Dance meant scrolling
     past every inquiry lesson. Lane survives as a colour tag + filter. ---------- */
  .ib-lanefilter {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin: 0 0 0.9rem;
  }

  .ib-lanefilter button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 38px;
    padding: 0 0.75rem;
    border: 2px solid var(--hairline);
    border-radius: 999px;
    background: var(--surface-raised);
    color: var(--soft);
    font-size: 0.8rem;
    font-weight: 720;
  }

  .ib-lanefilter button:hover {
    border-color: var(--edge);
    color: var(--ink);
  }

  .ib-lanefilter button[aria-pressed="true"] {
    border-color: var(--edge);
    background: var(--ink);
    color: var(--surface-raised);
  }

  .ib-lanefilter .ib-lanedot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--lane-tone, var(--accent));
    flex: none;
  }

  .ib-periodlist {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ib-period {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    min-height: 66px;
    padding: 0.65rem 0.85rem;
    border: 2px solid var(--edge);
    border-left-width: 8px;
    border-left-color: var(--lane-tone, var(--accent));
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: transform 110ms ease-out, background-color 160ms ease-out;
  }

  .ib-period:hover {
    transform: translateX(2px);
    background: var(--accent-soft);
    color: var(--ink);
  }

  .ib-period[data-lesson-state="active"] {
    background: var(--pear);
    color: var(--on-bright);
    box-shadow: 0 3px 0 var(--pear-deep);
  }

  .ib-period[data-lesson-state="active"] .ib-period__lane,
  .ib-period[data-lesson-state="active"] .ib-period__intent,
  .ib-period[data-lesson-state="active"] .ib-period__mins {
    color: var(--on-bright);
    opacity: 0.75;
  }

  .ib-period__n {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: var(--radius-sm);
    background: var(--lane-tone, var(--accent));
    color: var(--on-bright);
    font-family: var(--font-mono);
    font-size: 0.95rem;
    font-weight: 700;
  }

  .ib-period__main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
  }

  .ib-period__lane {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .ib-period__title {
    font-size: 1rem;
    font-weight: 750;
    line-height: 1.25;
  }

  .ib-period__intent {
    color: var(--soft);
    font-size: 0.84rem;
    line-height: 1.35;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .ib-period__side {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: none;
  }

  .ib-period__mins {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
  }

  .ib-period__flag {
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 0.55rem;
    border: 2px solid var(--edge);
    border-radius: 999px;
    background: var(--sy-mint-soft, #e6f7ec);
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .ib-lanegroup {
    margin: 1.15rem 0 0.45rem;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.2rem 0.6rem;
  }

  .ib-lanegroup h3 {
    white-space: nowrap;
  }

  .ib-lanegroup:first-child {
    margin-top: 0;
  }

  .ib-lanegroup h3 {
    margin: 0;
    flex: none;
    font-size: 0.78rem;
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .ib-lanegroup span {
    color: var(--muted);
    font-size: 0.78rem;
  }

  /* ---------- Docked inspector: on a wide screen the lesson opens beside the
     list, so choosing a lesson never scrolls the list out from under you. ---------- */
  .teaching-studio-workspace.has-inspector {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem);
    align-items: start;
    gap: 1.1rem;
  }

  .lesson-inspector {
    position: sticky;
    top: 5.5rem;
    max-height: calc(100vh - 7rem);
    /* Padding moves off the scroll container and onto its children: with
       padding here, the sticky header parks below it and scrolled content
       shows through the gap above. */
    padding: 0;
    --inspector-gutter: clamp(1.15rem, 2.5vw, 1.65rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 2px solid var(--edge);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: var(--hard-shadow);
  }

  .lesson-inspector > * {
    padding-inline: var(--inspector-gutter);
  }

  .lesson-inspector > *:last-child {
    padding-bottom: var(--inspector-gutter);
  }

  .lesson-inspector-header {
    position: sticky;
    top: 0;
    z-index: 2;
    margin-bottom: 1.1rem;
    padding-top: var(--inspector-gutter);
    background: var(--surface-raised);
    border-bottom: 2px solid var(--hairline);
  }

  @container (max-width: 820px) {
    .teaching-studio-workspace.has-inspector {
      grid-template-columns: minmax(0, 1fr);
    }

    .lesson-inspector {
      position: static;
      max-height: none;
    }
  }

  @container (max-width: 780px) {
    .ib-unitbar {
      grid-template-columns: minmax(0, 1fr);
    }

    .ib-weekrail {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ib-refnav {
      overflow-x: auto;
    }
  }

  @container (max-width: 520px) {
    /* Six week cards at full height ate half a phone screen before the teacher
       reached the periods. One line of title is enough to tell them apart. */
    .ib-weekrail {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.4rem;
    }

    .ib-weekrail__week {
      min-height: 0;
      padding: 0.45rem 0.6rem 0.5rem;
    }

    .ib-weekrail__title {
      -webkit-line-clamp: 1;
    }

    .ib-period {
      grid-template-columns: 2.2rem minmax(0, 1fr);
    }

    .ib-period__side {
      grid-column: 2;
    }
  }

  /* ---------- Unit overview: direction first, reference second. The port put
     a six-week timeline list here that the week rail above now covers, and
     eight reference sections open by default — ~3200px before a teacher
     reached anything actionable. ---------- */
  .ib-direction {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.4rem 2rem;
    padding: 1.5rem;
  }

  .ib-direction__central {
    margin: 0.25rem 0 0.6rem;
    font-size: clamp(1.2rem, 2.1vw, 1.55rem);
    line-height: 1.25;
  }

  .ib-direction__next {
    padding-left: 1.6rem;
    border-left: 2px solid var(--hairline);
  }

  .ib-direction__next h3 {
    margin: 0.3rem 0 0.4rem;
    font-size: 1.1rem;
  }

  .ib-direction__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 0.9rem 0 0.5rem;
  }

  .ib-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 1rem;
    margin-top: 1rem;
  }

  .ib-reference {
    margin-top: 2rem;
  }

  .ib-reference__label {
    margin: 0 0 0.7rem;
    color: var(--muted);
  }

  .ib-reference .disclosure + .disclosure {
    margin-top: 0.6rem;
  }

  .disclosure summary {
    font-weight: 750;
  }

  .readiness-progress {
    border: 2px solid var(--edge);
    border-radius: 999px;
    overflow: hidden;
    background: var(--surface);
  }

  .readiness-progress > span {
    background: var(--pear);
  }

  @container (max-width: 900px) {
    .ib-direction,
    .ib-overview-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .ib-direction__next {
      padding-left: 0;
      padding-top: 1.1rem;
      border-left: 0;
      border-top: 2px solid var(--hairline);
    }
  }

  /* The ink fill already says which segment is on, and the control carries
     aria-pressed. The decorative "SELECTED" caption underneath is redundant. */
  .segment-selection-label,
  .unit-nav-selection-label {
    display: none;
  }

  /* Pre-lesson checkpoints were bare inline <label>s, so the whole prep list
     ran together as one paragraph of text with checkboxes buried in it. */
  .teach-checklist {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
  }

  .teach-checkitem {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.65rem;
    min-height: 44px;
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    line-height: 1.45;
  }

  .teach-checkitem:hover {
    background: var(--accent-soft);
  }

  .teach-checkitem input {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.15rem;
    accent-color: var(--accent);
  }

  .teach-checkitem:has(input:checked) span {
    color: var(--muted);
    text-decoration: line-through;
  }

  /* ==========================================================================
     IB GUIDANCE LAYER
     Every IB term explains itself where it appears, and each lesson says where
     its content comes from. Both are for teachers who have never taught a unit
     of inquiry — the vocabulary and the textbook mapping were the two things
     the planner assumed you already knew.
     ========================================================================== */

  .ib-framing {
    padding: 0.9rem 1rem 1rem;
    border: 2px solid var(--hairline);
    border-radius: var(--radius-md);
    background: var(--accent-soft);
  }

  .ib-framing h3 {
    margin: 0 0 0.3rem;
  }

  .ib-termrow {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    align-items: start;
    gap: 0.5rem 0.7rem;
    margin-top: 0.6rem;
  }

  .ib-termrow__label {
    padding-top: 0.4rem;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }

  .ib-termrow__terms {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-width: 0;
  }

  /* Closed, a term is a chip. Open, it drops its explanation to full width so
     the answer is never squeezed into a chip-sized column. */
  .ib-term {
    min-width: 0;
  }

  .ib-term > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 34px;
    padding: 0.2rem 0.6rem;
    border: 2px solid var(--edge);
    border-radius: 999px;
    background: var(--surface-raised);
    cursor: pointer;
    list-style: none;
    font-size: 0.82rem;
    font-weight: 700;
  }

  .ib-term > summary::-webkit-details-marker {
    display: none;
  }

  .ib-term > summary:hover {
    background: var(--pear);
    color: var(--on-bright);
  }

  .ib-term__hint {
    display: grid;
    place-items: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: var(--accent);
    color: var(--surface-raised);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    flex: none;
  }

  .ib-term__kind {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .ib-term[open] {
    flex: 1 1 100%;
  }

  .ib-term[open] > summary {
    margin-bottom: 0.4rem;
    background: var(--ink);
    color: var(--surface-raised);
  }

  .ib-term[open] > summary .ib-term__kind {
    color: inherit;
    opacity: 0.7;
  }

  .ib-term__body {
    padding: 0.7rem 0.85rem;
    border-left: 4px solid var(--accent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--surface-raised);
  }

  .ib-term__body p {
    margin: 0 0 0.45rem;
    font-size: 0.88rem;
  }

  .ib-term__body p:last-child {
    margin-bottom: 0;
  }

  .ib-term__practice {
    color: var(--soft);
  }

  .loi .ib-term {
    display: block;
    margin-top: 0.55rem;
  }

  /* ---------- Textbook and sources ---------- */
  .ib-sources-section h3 {
    margin-bottom: 0.35rem;
  }

  .ib-sources {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
  }

  .ib-source {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.55rem;
    padding: 0.65rem 0.8rem;
    border: 2px solid var(--hairline);
    border-left: 6px solid var(--accent);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
  }

  .ib-source__book {
    font-size: 0.95rem;
  }

  .ib-source__pages {
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
  }

  .ib-source__section {
    flex: 1 1 100%;
    color: var(--soft);
    font-size: 0.86rem;
  }

  .ib-source p {
    flex: 1 1 100%;
    margin: 0.15rem 0 0;
  }

  .ib-source__origin {
    flex: 1 1 100%;
    margin-top: 0.2rem;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .ib-sources-empty {
    padding: 0.7rem 0.85rem;
    border: 2px dashed var(--hairline);
    border-radius: var(--radius-sm);
  }

  .ib-sources-card .ib-sources-section h3 {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
  }

  .editable-source-references {
    margin: 1rem 0 0;
    padding: 0.9rem 1rem 1rem;
    border: 2px solid var(--hairline);
    border-radius: var(--radius-md);
  }

  .editable-source-references legend {
    padding: 0 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--accent);
  }

  .ib-source-slot {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 0.6rem;
  }

  /* ---------- Glossary ---------- */
  .ib-glossary {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
  }

  .ib-glossary__entry {
    padding: 0.8rem 0.9rem;
    border: 2px solid var(--hairline);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
  }

  .ib-glossary__entry h3 {
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
  }

  .ib-glossary__entry p {
    margin: 0 0 0.4rem;
    font-size: 0.87rem;
  }

  .ib-glossary__entry p:last-child {
    margin-bottom: 0;
  }

  /* The inspector is a ~26rem column, narrower than any container query on
     .ib-scope can see, so the label column stacks there unconditionally. */
  .lesson-inspector .ib-termrow {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
  }

  .lesson-inspector .ib-termrow__label {
    padding-top: 0;
  }

  @container (max-width: 620px) {
    .ib-termrow {
      grid-template-columns: minmax(0, 1fr);
      gap: 0.3rem;
    }

    .ib-source-slot {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* ==========================================================================
     LESSON FLOW
     Four numbered stages in the order a teacher needs them, then a pinned
     action bar. Reference material folds away instead of standing between the
     teacher and the next thing they have to read.
     ========================================================================== */

  .ib-stages {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
  }

  .ib-stage {
    padding: 0;
  }

  .ib-stage__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
  }

  .ib-stage__n {
    display: grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border: 2px solid var(--edge);
    border-radius: 50%;
    background: var(--surface-raised);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 700;
    flex: none;
  }

  .ib-stage__head h3 {
    margin: 0;
    font-size: 0.75rem;
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .ib-stage__body {
    /* A thin rail, not a deep indent: the inspector column is ~26rem and the
       phase text below has to survive it. */
    margin-left: 0.82rem;
    padding-left: 1rem;
    padding-bottom: 0.3rem;
    border-left: 2px solid var(--hairline);
  }

  .ib-stage__body h4 {
    margin: 0.9rem 0 0.3rem;
    font-size: 0.8rem;
    font-weight: 750;
    color: var(--soft);
  }

  .ib-stage__body > :first-child {
    margin-top: 0;
  }

  /* Stage 1 is what the teacher opened the lesson for. */
  .ib-stage--primary .ib-stage__n {
    background: var(--pear);
    color: var(--on-bright);
    box-shadow: 0 2px 0 var(--pear-deep);
  }

  .ib-stage--primary .ib-stage__head h3 {
    color: var(--ink);
  }

  .ib-stage--primary .ib-stage__body {
    border-left-color: var(--pear);
  }

  .ib-intention {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 620;
    line-height: 1.4;
  }

  /* ---------- The lesson as a clock ---------- */
  .ib-clockbar {
    display: flex;
    gap: 2px;
    margin: 0.5rem 0 0.85rem;
    padding: 0;
    list-style: none;
  }

  .ib-clockbar__seg {
    flex: 0 0 calc(var(--seg) - 2px);
    display: grid;
    place-items: center;
    min-width: 0;
    height: 1.6rem;
    border-radius: 4px;
    background: var(--lane-tone, var(--accent));
    overflow: hidden;
  }

  .ib-clockbar__seg span {
    color: var(--on-bright);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 700;
  }

  .ib-clockbar__seg:nth-child(even) {
    opacity: 0.62;
  }

  .ib-phases {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: phase;
  }

  /* Stacked by default. A side-by-side time column reads well on a wide page
     but starves the teacher/student text inside the inspector. */
  .ib-phase {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.7rem 0.8rem;
    border: 2px solid var(--hairline);
    border-left: 6px solid var(--lane-tone, var(--accent));
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
  }

  .ib-phase__when {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
  }

  .ib-phase__range {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
  }

  .ib-phase__mins {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 650;
  }

  .ib-phase__name {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    font-size: 0.94rem;
    font-weight: 750;
    line-height: 1.3;
  }

  .ib-phase__n {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    flex: none;
  }

  .ib-phase__move {
    margin: 0.4rem 0 0;
    font-size: 0.86rem;
    line-height: 1.5;
  }

  /* Inline, not a grid column — the label floats at the start of the sentence
     so the text itself keeps the full width of the card. */
  .ib-phase__who {
    display: inline-block;
    margin-right: 0.4rem;
    padding: 0.08rem 0.4rem;
    border-radius: 4px;
    background: var(--ink);
    color: var(--surface-raised);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    vertical-align: 0.08em;
  }

  .ib-phase__who--students {
    background: var(--accent);
  }

  /* ---------- Folds ---------- */
  .ib-folds {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 1.1rem;
  }

  .ib-fold {
    border: 2px solid var(--hairline);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
  }

  .ib-fold > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 46px;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    list-style: none;
    font-size: 0.88rem;
  }

  .ib-fold > summary::-webkit-details-marker {
    display: none;
  }

  .ib-fold > summary:hover {
    background: var(--accent-soft);
    border-radius: var(--radius-sm);
  }

  .ib-fold > summary span:first-child {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
  }

  .ib-fold[open] > summary {
    border-bottom: 2px solid var(--hairline);
  }

  .ib-fold[open] .disclosure-icon {
    transform: rotate(45deg);
  }

  .ib-fold__body {
    padding: 0.35rem 0.85rem 0.85rem;
  }

  .ib-fold__body h4 {
    margin: 0.7rem 0 0.2rem;
    font-size: 0.8rem;
    font-weight: 750;
    color: var(--soft);
  }

  .ib-fold__body > :first-child {
    margin-top: 0;
  }

  /* ---------- Pinned actions ---------- */
  .lesson-inspector-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 1.1rem;
    padding-top: 0.7rem;
    padding-bottom: var(--inspector-gutter);
    background: linear-gradient(transparent, var(--surface-raised) 22%);
    border-top: 2px solid var(--hairline);
  }

  .visually-hidden-heading {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* The handoff stretched these to full width on narrow screens. Now that the
     bar is pinned that would cost half a phone screen, so they wrap instead —
     "Teach this lesson" takes the room it needs and the rest follows. */
  .lesson-inspector-actions .button {
    width: auto;
    min-height: 40px;
    padding: 0.4rem 0.8rem;
    font-size: 0.83rem;
  }

  .lesson-inspector-actions > .button.primary {
    flex: 1 1 auto;
  }

  /* Beats the handoff's narrow-container `.lesson-inspector-actions > div`
     rule, which stacks these into a column. */
  .lesson-inspector-actions > .lesson-inspector-step {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0;
    margin-left: auto;
  }

  /* The inspector's own textbook block sits inside stage 2, so it drops the
     heading the standalone version needs. */
  .ib-stage .ib-sources-section > h3 {
    margin: 0 0 0.3rem;
    font-size: 0.8rem;
    font-weight: 750;
    color: var(--soft);
  }

  @container (max-width: 520px) {
    .ib-stage__body {
      margin-left: 0;
      padding-left: 0.9rem;
    }

  }

}

/* Syllara-shell print handling: hide app chrome when printing a resource page */
@media print {
  body:has(.lesson-resource-page) .sidebar,
  body:has(.lesson-resource-page) .topbar,
  body:has(.lesson-resource-page) .resource-no-print { display: none !important; }
}