/*
 * Term Planner: the week and day-off editors and the workbook preview. The
 * workspace, panels, form sections and download column are shared with the
 * other teacher tools (snapshot.css, recap.css, test-paper.css).
 */

#pl-details > label, #pl-details .field-grid { margin-bottom: .75rem; }
#pl-summary { color: var(--text-secondary); font-size: var(--text-sm); white-space: nowrap; align-self: flex-end; }

/* lesson days: a row of chips */
.pl-days { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 .2rem; }
.pl-days legend { flex-basis: 100%; margin-bottom: .45rem; }
.pl-days label { position: relative; cursor: pointer; }
.pl-days input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pl-days span { display: grid; place-items: center; min-width: 3.1rem; min-height: 2.4rem; padding: 0 .7rem; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); color: var(--text-secondary); font-size: var(--text-sm); font-weight: 700; }
.pl-days input:checked + span { border-color: var(--accent-mint); background: rgb(95 227 191 / 12%); color: var(--text-primary); }
.pl-days input:focus-visible + span { outline: 2px solid var(--accent-mint); outline-offset: 2px; }

/* weeks */
.pl-week { margin: .5rem 0; border: 1px solid var(--border-subtle); border-left: 3px solid var(--accent-teal); border-radius: var(--radius-md); background: rgb(255 255 255 / 2%); }
.pl-week--exams { border-left-color: var(--accent-gold); }
.pl-week--break { border-left-color: var(--border-strong); opacity: .85; }
.pl-week summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: .15rem .6rem; padding: .7rem .85rem; list-style: none; cursor: pointer; }
.pl-week summary::-webkit-details-marker { display: none; }
.pl-week-no { color: var(--text-primary); font-size: var(--text-sm); font-weight: 800; }
.pl-week-when { color: var(--text-tertiary); font-size: var(--text-xs); font-weight: 600; }
.pl-week-topic { flex: 1 1 10rem; min-width: 0; overflow: hidden; color: var(--text-secondary); font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.pl-week-type:empty { display: none; }
.pl-week-type { padding: .1rem .5rem; border-radius: var(--radius-pill); background: rgb(242 184 91 / 14%); color: var(--accent-gold); font-size: var(--text-xs); font-weight: 700; }
.pl-week--break .pl-week-type { background: rgb(255 255 255 / 7%); color: var(--text-secondary); }
.pl-week-body { padding: 0 .85rem .8rem; }
.pl-week-body .field { display: block; margin: .6rem 0; }
.pl-week-body .field-grid > .field { margin: .6rem 0 0; }

/* the lessons of a week */
.pl-lessons { margin-top: .7rem; padding-top: .6rem; border-top: 1px dashed var(--border-subtle); }
.pl-lessons-title { margin: 0 0 .3rem; color: var(--accent-mint); font-size: var(--label-size); font-weight: 700; letter-spacing: var(--label-spacing); text-transform: uppercase; }
.pl-lesson { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); align-items: center; gap: .5rem; margin: .35rem 0; }
.pl-lesson > span { color: var(--text-secondary); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }
.pl-lesson input { margin-top: 0; min-height: 2.3rem; padding: .4rem .6rem; }
.pl-lesson.is-off em { color: var(--text-tertiary); font-size: var(--text-sm); }

/* days off */
.pl-off { display: grid; grid-template-columns: minmax(8.5rem, .9fr) minmax(0, 1.3fr) auto; align-items: center; gap: .45rem; margin: .5rem 0; }
.pl-off .field { margin: 0; }
.pl-off input { margin-top: 0; }

/* download column */
.pl-contents { display: grid; gap: .6rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.pl-contents li { padding: .7rem .8rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--text-tertiary); font-size: var(--text-xs); line-height: 1.45; }
.pl-contents strong { display: block; margin-bottom: .15rem; color: var(--text-primary); font-size: var(--text-sm); }

/* the preview: the sheet as a grid, with sheet tabs underneath like a workbook */
.pl-stage { height: calc(100vh - var(--header-h) - var(--section-gap) * 2 - 6.4rem); min-height: 28rem; margin-top: .6rem; overflow: auto; border: 1px solid var(--border-subtle); border-bottom: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: #fff; }
#pl-sheet:focus-visible { outline: 2px solid var(--accent-mint); outline-offset: -2px; }
.pl-grid { border-collapse: collapse; table-layout: fixed; color: #14221f; background: #fff; font: 12px/1.35 Aptos, "Segoe UI", Arial, sans-serif; }
.pl-grid .pl-gutter { width: 34px; }
.pl-grid thead th, .pl-grid tbody th { position: sticky; z-index: 1; background: #f3f4f2; color: #6b7672; font-size: 11px; font-weight: 500; text-align: center; border: 1px solid #dfe3e1; }
.pl-grid thead th { top: 0; height: 20px; }
.pl-grid tbody th { left: 0; }
.pl-grid thead th.pl-corner { left: 0; z-index: 2; }
.pl-grid td { padding: 3px 6px; border: 1px solid #e3e8e6; vertical-align: top; white-space: pre-wrap; overflow-wrap: anywhere; }
.pl-grid .pl-band td { height: 38px; padding-left: 10px; background: #0b1719; color: #e6c27f; font: 700 17px/1.2 "Aptos Display", Aptos, "Segoe UI", Arial, sans-serif; vertical-align: middle; border-color: #0b1719; }
.pl-grid .pl-band td.pl-credit { color: #e9efec; font: 400 10px/1.2 Aptos, "Segoe UI", Arial, sans-serif; text-align: right; }
.pl-grid .pl-note td { color: #52665f; font-size: 11px; font-style: italic; vertical-align: middle; }
.pl-grid .pl-gap td { height: 14px; }
.pl-grid .pl-detail td { vertical-align: middle; }
.pl-grid td.pl-label { color: #52665f; font-size: 11px; font-weight: 700; border-bottom-color: #d9e1de; }
.pl-grid td.pl-input { background: #e7f4ee; }
.pl-grid td.pl-calc { background: #f7f3ea; font-weight: 700; }
.pl-grid td.pl-strong { font-weight: 700; }
.pl-grid .pl-head td { height: 34px; background: #0b1719; color: #fff; font-size: 11px; font-weight: 700; vertical-align: middle; border-color: #24343a; }
.pl-grid td.pl-num { font-weight: 700; text-align: center; }
.pl-grid td.pl-count, .pl-grid td.pl-pick { text-align: center; }
.pl-grid .pl-row.is-break td, .pl-grid .pl-row.is-off td { background: #f0f0ee; color: #8a9591; }
.pl-grid .pl-row.is-exams td { background: #fff3d6; }
.pl-tabs { display: flex; gap: 2px; padding: 0 .5rem; border: 1px solid var(--border-subtle); border-top: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: #e9ebea; }
.pl-tabs button { min-height: 2.2rem; padding: 0 1rem; border: 0; border-top: 3px solid transparent; background: transparent; color: #52665f; font: inherit; font-size: var(--text-xs); font-weight: 700; cursor: pointer; }
.pl-tabs button[aria-selected="true"] { border-top-color: #0e8768; background: #fff; color: #14221f; }
.pl-tabs button:focus-visible { outline: 2px solid #0e8768; outline-offset: -2px; }

@media (max-width: 48rem) {
    .pl-stage { height: 70vh; min-height: 24rem; }
    .pl-off { grid-template-columns: minmax(0, 1fr) auto; }
    .pl-off .field:nth-child(2) { grid-column: 1; grid-row: 2; }
}