/* Planner presentation only. Keep every existing control and all plan logic.
   Printed pages and PDFs retain their existing styles. */
@media screen {
  body {
    --editorial-paper: #f3f0e8;
    --editorial-card: #fbf9f3;
    --editorial-line: #d9d0bf;
    --editorial-ink: #242a20;
    --editorial-olive: #414d35;
    --editorial-rail: clamp(230px, 20.5vw, 315px);
    background: var(--editorial-paper);
    color: var(--editorial-ink);

    & #top {
      min-height: 104px;
      padding: 10px 28px;
      gap: 28px;
      flex-wrap: nowrap;
      background: #faf8f0;
      border: 0;
      border-bottom: 1px solid var(--editorial-line);
      box-shadow: 0 3px 14px #473c2010;
    }
    & #top .brand-logo { margin: 0; flex: 0 0 150px; text-align: center; }
    & #top .brand-logo img { width: 132px; height: 82px; object-fit: contain; }
    & .editorial-site-nav {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: clamp(14px, 1.7vw, 28px);
    }
    & .editorial-site-nav a {
      color: #292d24;
      font: 13px/1.4 system-ui, sans-serif;
      text-decoration: none;
      white-space: nowrap;
      padding-block: 12px;
    }
    & .editorial-site-nav a:hover { color: #994453; text-decoration: underline; text-underline-offset: 5px; }
    & .hero > small { display: block; color: #555c4c; font-size: 13px; margin-bottom: 18px; }
    & #planner-page-title {
      position: static;
      font: clamp(32px, 3.2vw, 48px)/1.15 Georgia, serif;
      margin: 0;
      flex-basis: auto;
      max-width: none;
    }
    & #planner-main {
      max-width: none;
      min-width: 0;
      padding: 18px 36px 48px;
    }
    & .planner-preview-notice {
      background: #e8e8dc;
      color: #4c5141;
      border-color: var(--editorial-line);
      padding: 10px 32px;
    }
    & .hero {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      margin: -18px -36px 0;
      padding: 32px 36px;
      min-height: var(--approved-banner-height, 300px);
      border-radius: 0;
      background: #f3f0e8;
    }
    & .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -2;
      background: url('../assets/Sunlit Swan Mug Workspace Vignette.png') center 65% / cover no-repeat;
      transform: none;
    }
    & .hero::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      background: linear-gradient(90deg, #f3f0e8 0%, #f3f0e8f2 34%, #f3f0e877 65%, #f3f0e800 90%);
    }
    & .hero h1 { font: 21px/1.3 Georgia, serif; max-width: 630px; margin: 8px 0; }
    & .hero .lead { font-size: 16px; max-width: 600px; margin: 12px 0 0; }
    & .hero .eyebrow { color: #6e705c; margin-top: 20px; }
    & .panel[aria-labelledby='privacy-title'] {
      background: #e5e5d9;
      border: 1px solid #d3d2c3;
      border-radius: 10px;
      padding: 14px 24px 14px 72px;
      margin: 0 0 16px;
      position: relative;
    }
    & .panel[aria-labelledby='privacy-title']::before {
      content: 'i';
      font: 24px/1 Georgia, serif;
      position: absolute;
      left: 24px;
      top: 18px;
      width: 30px;
      height: 30px;
      border: 2px solid #414d35;
      border-radius: 50%;
      display: grid;
      place-items: center;
    }
    & #privacy-title { font-size: 17px; color: var(--editorial-ink); }
    & .panel[aria-labelledby='privacy-title'] p { font-size: 13px; color: #596052; }
    & #workspace-navigation {
      border: 1px solid #e4c4bc;
      background: #f4e6e1;
      border-radius: 10px;
      padding: 16px 22px;
      box-shadow: none;
    }
    & .workspace-context { border: 0; padding-bottom: 0; }
    & .workspace-progress { font: 18px/1.3 Georgia, serif; }
    & .workspace-progress::after { display: none; }
    & .workspace-step-meter { display: none; }
    & .editorial-sidebar-title { font: 27px/1.2 Georgia, serif; color: #252b21; margin: 32px 24px 24px; }
    & .editorial-nav-group { display: grid; gap: 4px; min-width: 0; }
    & .editorial-nav-heading { margin: 12px 14px 3px; font: 600 11px/1.4 system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #676b5c; }
    & .editorial-navigation-menu > summary { padding: 12px 24px; cursor: pointer; font-size: 14px; }
    & .planner-section-links button svg {
      width: 23px;
      height: 23px;
      flex: 0 0 23px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    & #teaching-setup {
      padding: 20px 24px;
      background: var(--editorial-card);
      border: 1px solid var(--editorial-line);
      box-shadow: 0 5px 20px #51412706;
    }
    & #teaching-setup h2 { font: 25px/1.25 Georgia, serif; margin-bottom: 12px; }
    & #teaching-setup > p { font-size: 14px; margin: 8px 0 16px; }
    & #teaching-setup > .eyebrow { display: none; }
    & #teaching-setup .editorial-setup-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px; margin-bottom: 12px; }
    & #teaching-setup .editorial-setup-fields > * { min-width: 0; margin: 0; }
    & #teaching-setup .editorial-setup-fields label { font-size: 13px; }
    & #teaching-setup .teacher-name-field { max-width: none; }
    & #teaching-setup .editorial-setup-help { margin: 12px 0; font-size: 13px; }
    & #teaching-setup .editorial-setup-help > summary { cursor: pointer; }
    & #teaching-setup #teaching-summary { padding: 10px 12px; font-size: 12px; }
    & #teaching-setup .actions { margin-top: 16px; }
    & #teaching-setup select,
    & #teaching-setup input:not([type='checkbox']) {
      border-color: #cfc6b4;
      border-radius: 7px;
      background: #faf8f1;
      min-height: 46px;
    }

    & #workspace-navigation button,
    & .planner-section-links button {
      min-height: 44px;
      border-radius: 7px;
      background: var(--editorial-olive);
      border-color: var(--editorial-olive);
      box-shadow: 0 2px 3px #302d1910;
    }
    & #workspace-navigation button.secondary,
    & .planner-section-links button.secondary {
      background: #faf8f1;
      border-color: #a5a58f;
      color: #303a28;
      box-shadow: none;
    }

    & .foot { color: #716d5f; font-size: 12px; }
    & .editorial-staff-shifts {
      min-width: 0;
      padding: 24px;
      margin: 24px 0 32px;
      background: #fbf9f3;
      border: 1px solid #d9d0bf;
      border-top: 4px solid #566048;
      border-radius: 12px;
    }
    & #preview-staff-shifts-title { margin: 0 0 8px; font: 27px/1.25 Georgia, serif; }
    & .editorial-staff-shifts > p { margin: 0 0 20px; color: #596052; }
    & .editorial-staff-shifts .staff-card { padding: 20px; background: #f4f3eb; border-color: #c8cbbd; }
    & .editorial-staff-shifts .staff-head { padding-bottom: 12px; border-bottom: 1px solid #d9d0bf; }
    & .editorial-staff-shifts .staff-head strong { font-size: 17px; }
    & .editorial-staff-shifts .staff-week { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
    & .editorial-staff-shifts .staff-week-overview { min-width: 0; margin-bottom: 24px; }
    & .preview-staff-shift-details { padding: 16px; border: 1px solid #cbd0bf; border-radius: 8px; background: #eeefe5; }
    & .preview-staff-shift-details > summary { cursor: pointer; font-size: 16px; font-weight: 600; color: #30362d; }
    & .preview-staff-shift-details[open] > summary { margin-bottom: 20px; }
    & .preview-staff-shift-details > summary:focus-visible { outline: 3px solid #9b785e; outline-offset: 4px; }
    & .preview-staff-shift-details > button { margin-top: 16px; }
    & #staff-breaks { padding-top: 24px; border-top: 1px solid #d9d0bf; }
    & #staff-breaks .pupil-break-support {
      margin: 20px 0;
      padding: 20px 24px;
      border: 1px solid #cbd0bf;
      border-radius: 12px;
      background: #eeefe5;
    }
    & #staff-breaks .pupil-break-support > summary { cursor: pointer; font: 23px/1.3 Georgia, serif; color: #30362d; }
    & #staff-breaks-results { min-width: 0; }
    & #staff-breaks-results:empty { display: none; }
    & #staff-breaks-results .breaks-rota {
      margin: 0 0 24px;
      padding: 24px;
      border: 1px solid #d9d0bf;
      border-radius: 12px;
      background: #fbf9f3;
    }
    & #staff-breaks-results h3 { margin: 0 0 12px; font: 27px/1.25 Georgia, serif; }
    & #staff-breaks-results .tablewrap { max-width: 100%; border: 1px solid #d6dacb; border-radius: 8px; }
    & #staff-breaks-results table { width: 100%; min-width: 760px; margin: 0; border-collapse: separate; border-spacing: 0; }
    & #staff-breaks-results caption { padding: 14px 16px; background: #eeefe5; text-align: left; }
    & #staff-breaks-results :is(th,td) { padding: 14px 16px; vertical-align: top; }
    & #staff-breaks-results thead th { background: #414d35; color: #fffdf3; }
    & #staff-breaks-results tbody th { position: sticky; left: 0; z-index: 1; background: #e8ebdf; color: #30362d; min-width: 120px; border-right: 1px solid #d6dacb; }
    & #staff-breaks-results tbody tr:nth-child(even) td { background: #f0f1e8; }
    & #staff-breaks-results tbody td div { white-space: nowrap; line-height: 1.65; }
    & #staff-breaks-results .tablewrap:focus-visible { outline: 3px solid #9b785e; outline-offset: 3px; }
    & .preview-saved-pupil-breaks { margin: 24px 0; padding: 20px; border: 1px solid #cbd0bf; border-radius: 10px; background: #eeefe5; min-width: 0; }
    & .preview-saved-pupil-breaks h4 { margin: 0 0 8px; font: 23px/1.3 Georgia, serif; }
    & .preview-saved-pupil-breaks p { margin: 0 0 14px; font-size: 14px; }
    & .preview-saved-pupil-breaks table { margin: 0; width: 100%; min-width: 420px; }
    & .preview-saved-pupil-breaks .tablewrap { margin-bottom: 16px; }
    & .preview-teaching-week-action { padding: 20px; border: 1px solid #e4c4bc; border-radius: 10px; background: #f4e6e1; align-items: center; gap: 16px; }
    & .preview-teaching-week-action p { flex: 1 1 260px; margin: 0; font-size: 14px; }
    & #quick-generate { min-height: 48px; padding: 14px 24px; font-size: 16px; }
    & .preview-deadline-calendars { margin: 24px 0; padding: 24px; border: 1px solid #cbd0bf; border-radius: 12px; background: #eeefe5; }
    & .preview-deadline-calendars h3 { margin: 0 0 12px; font: 27px/1.25 Georgia, serif; }
    & .preview-deadline-calendars p { margin: 12px 0; }
    & #care-tasks .calendar-provider-link { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 14px; border: 1px solid #a5a58f; border-radius: 7px; background: #faf8f1; color: #303a28; font-weight: 600; }
    & #care-tasks .deadline-card-actions { min-width: 0; max-width: 100%; flex-shrink: 1; }
    & .preview-deadline-calendars button { max-width: 100%; white-space: normal; }
    & .preview-deadline-calendars > label { display: grid; gap: 8px; max-width: 600px; margin: 16px 0; }
    & .preview-calendar-provider-actions { display: flex; flex-wrap: wrap; gap: 12px; }
    & .preview-calendar-provider-actions .calendar-provider-link { display: inline-flex; align-items: center; min-height: 46px; background: #414d35; color: #fffdf3; border-color: #414d35; }
    & .preview-deadline-calendars > details { margin-top: 20px; padding-top: 16px; border-top: 1px solid #cbd0bf; }
    & .preview-deadline-calendars > details > summary { cursor: pointer; font-weight: 600; }
    & .preview-top-section-nav { display: flex; justify-content: flex-start; flex-wrap: wrap; margin: 12px 0 24px; }
    & .preview-top-section-nav button { min-height: 44px; max-width: 100%; white-space: normal; }
    & #care-hub .reminders-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 20px; }
    & #care-hub .deadline-editor { margin-top: 16px; background: #fbf9f3; }
    & #care-hub .deadline-editor > summary { font: 24px/1.3 Georgia, serif; }
    & #care-hub .deadline-editor h3 { display: none; }
    & #care-hub .preview-saved-deadlines-title { margin: 24px 0 14px; font: 24px/1.3 Georgia, serif; }
    & #care-tasks .care-item { min-height: 0; padding: 16px; align-items: flex-start; }
    & #care-tasks .care-item strong { font-size: 18px; margin: 8px 0; }
    & #care-tasks .care-item p { font-size: 14px; margin-block: 6px; }
    & #care-tasks .deadline-card-actions { flex-direction: row; flex-wrap: wrap; flex-basis: 48%; }
    & #care-tasks :is(button,.calendar-provider-link) { font-size: 13px; padding: 8px 12px; }
    & #care-hub .preview-optional-planning { padding: 16px; border: 1px solid #d9d0bf; border-radius: 8px; background: #fbf9f3; }
    & #care-hub .preview-optional-planning > summary,
    & #care-hub .preview-deadline-calendars > summary { cursor: pointer; font-size: 17px; font-weight: 600; }
    & #care-hub .preview-optional-planning > h3 { font: 23px/1.3 Georgia, serif; }
    & #care-hub .preview-deadline-calendars { padding: 16px 20px; margin: 16px 0; }
    & #care-hub .wellbeing-preferences .care-grid { grid-template-columns: minmax(0, 1fr); }
    & #care-hub .preview-remind-now { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 20px; padding: 14px; background: #eeefe5; border-radius: 8px; }
    & #care-hub .preview-remind-now[hidden] { display: none; }
    & #care-hub .preview-remind-now input { width: auto; flex: 0 0 auto; margin-top: 4px; }
    & .preview-export-naming { margin: 24px 0; padding: 20px; border: 1px solid #d9d0bf; border-radius: 10px; background: #fbf9f3; }
    & .preview-export-naming label { display: grid; gap: 8px; max-width: 620px; font-weight: 600; }
    & .preview-export-naming input { width: 100%; min-width: 0; }
    & #preview-full-formats label { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0; }
    & #preview-full-formats input { width: auto; flex: 0 0 auto; margin-top: 4px; }
    & #preview-full-formats[hidden] { display: none; }
    & .preview-export-appearance { margin: 24px 0; }
    & #preview-daily-print-options[hidden], & #preview-daily-print-options [hidden] { display: none; }
    & .preview-export-naming .preview-resource-print-choice, & #preview-daily-selected label { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0; }
    & .preview-resource-print-choice input, & #preview-daily-selected input { width: auto; flex: 0 0 auto; margin-top: 4px; }
    & .activity-preparation { margin: 10px 0; padding: 8px; border: 1px solid #d9d0bf; border-radius: 8px; background: #f4f3eb; }
    & .activity-preparation summary { font-weight: 600; }
    & .group-options { margin: 10px 0; }
    & .group-options > summary { font-size: 13px; line-height: 1.35; padding: 4px 0; }
    & .quick-slot-identification { display: grid; grid-template-columns: minmax(0,1fr) 85px; gap: 8px; }
    & .quick-slot-identification :is(label,input) { min-width: 0; }
    & .activity-preparation textarea { display: block; width: 100%; min-width: 0; resize: vertical; font: inherit; padding: 8px; }
    & .activity-preparation label { display: grid; gap: 8px; margin: 12px 0; }
    & .activity-preparation .preparation-privacy { display: flex; align-items: flex-start; gap: 8px; }
    & .activity-preparation .preparation-privacy input { width: auto; flex: 0 0 auto; margin-top: 4px; }
    & .activity-preparation input[type=file] { width: 100%; min-width: 0; }
    & .preparation-files { padding: 0; list-style: none; }
    & .preparation-files li { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
    & .preview-weekday-colours { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0; }
    & .preview-weekday-colours label { display: grid; gap: 8px; min-width: 110px; margin: 0; }
    & .preview-weekday-colours label > span { display: block; padding: 10px 12px; border-radius: 6px; text-align: center; font-weight: 600; }
    & .preview-weekday-colours select { width: 100%; min-height: 44px; padding: 8px; background: #faf8f1; color: #30362d; border: 1px solid #cbd0bf; }

    @media (min-width: 1080px) {
      &::before {
        content: '';
        position: fixed;
        inset: 104px auto 0 0;
        width: var(--editorial-rail);
        background: linear-gradient(#f0eddfed, #f0eddfb8 60%, #e9e1ce4d),
          url('../assets/Sunlit Shelf with Plants and Swan.png') center bottom / cover no-repeat;
        border-right: 1px solid #dcd3c0;
        z-index: 0;
        pointer-events: none;
      }
      & #planner-main { margin-left: var(--editorial-rail); width: calc(100% - var(--editorial-rail)); }
      & .planner-preview-notice { margin-left: var(--editorial-rail); }
      & .editorial-sidebar {
        position: fixed;
        left: 0;
        top: 104px;
        bottom: 0;
        width: var(--editorial-rail);
        padding: 0 16px 24px;
        z-index: 21;
        overflow-y: auto;
      }
      & .editorial-navigation-menu > summary { display: none; }
      & .planner-section-links:not([hidden]) {
        position: static;
        width: 100%;
        max-width: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 8px;
        max-height: none;
      }
      & .planner-section-links button.secondary {
        width: 100%;
        text-align: left;
        padding: 16px 14px;
        display: flex;
        align-items: center;
        gap: 16px;
        font-size: 14px;
        line-height: 1.4;
        background: transparent;
        border: 1px solid transparent;
        box-shadow: none;
      }
      & .planner-section-links button.secondary[aria-current='step'] {
        background: #566048;
        border-color: #566048;
        color: white;
      }
      & .planner-section-links button:disabled { opacity: .65; cursor: default; }
    }
    @media (max-width: 1079px) {
      & #top { flex-wrap: wrap; gap: 4px; }
      & #top .brand-logo { flex: 0 0 100%; }
      & .editorial-site-nav { justify-content: flex-start; overflow-x: auto; max-width: 100%; gap: 20px; }
      & .editorial-sidebar-title { margin: 20px 24px 8px; font-size: 24px; }
      & .planner-section-links { padding: 12px 24px; gap: 8px; }
      & .planner-section-links button { box-shadow: none; font-size: 13px; display: flex; align-items: center; gap: 8px; }
      & #planner-main { padding-inline: 24px; }
      & .hero { margin-inline: -24px; padding-inline: 24px; }
      & #teaching-setup .editorial-setup-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 600px) {
      & #top { padding: 12px 18px; gap: 12px; }
      & #top small { margin-left: 0; }
      & #planner-page-title { font-size: 32px; flex-basis: 100%; }
      & .planner-preview-notice { padding-inline: 18px; }
      & #planner-main { padding: 16px 16px 36px; }
      & .hero {
        margin-inline: -16px;
        padding: 28px 20px;
        min-height: var(--approved-banner-height, 280px);
      }
      & .hero::after { background: linear-gradient(90deg, #f3f0e8f5, #f3f0e8e0 65%, #f3f0e8a3); }
      & .hero h1 { font-size: 19px; }
      & .hero .lead { font-size: 14px; }
      & #teaching-setup { padding: 20px; }
      & .editorial-staff-shifts { padding: 16px; }
      & .editorial-staff-shifts .staff-card { padding: 14px; }
      & #staff-breaks .pupil-break-support,
      & #staff-breaks-results .breaks-rota { padding: 16px; }
      & #teaching-setup .editorial-setup-fields { grid-template-columns: minmax(0, 1fr); }

      & #workspace-navigation { padding: 18px; }

    }
  }
}