/* The schedule page. Ported from plan/pages/schedule.html, which is the design reference.

   Only what belongs to this page is here: the legend, the controls row, the two calendar
   grids, the Course Outline stack, and the setup box's own fields. The item block, the day
   panel and the day row are shared patterns and live in components.css; the palette is
   tokens.css and the page shell is base.css. */

.legend-row { display: flex; gap: 26px; margin-bottom: 28px; }
.legend-row .swatch { display: flex; align-items: center; gap: 8px; font-size: 13px; opacity: 0.85; }
.legend-row .swatch .dot { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }
.legend-row .swatch.cat-langlogic .dot { background: var(--color-category-langlogic); }
.legend-row .swatch.cat-rc .dot { background: var(--color-category-rc); }
.legend-row .swatch.cat-lr .dot { background: var(--color-category-lr); }

/* ---- the setup box ----
   The box lines up with the calendar column rather than the page: it repeats the layout's own
   two-column template and sits in the first column, so its width tracks the calendar at every
   window size without a number written into it. */

.setup-wrap { display: grid; grid-template-columns: 1fr 320px; column-gap: 22px; }
.setup-wrap > .setup-box { grid-column: 1; }
.setup-row { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.setup-field { display: flex; flex-direction: column; }
.setup-field .col-label { margin-bottom: 10px; }
.setup-field select, .setup-field input {
  background: transparent;
  color: var(--color-text);
  border: 1px solid rgba(241,231,219,0.35);
  border-radius: 2px;
  padding: 9px 10px;
  font-family: inherit;
  font-variant: small-caps;
  letter-spacing: 0.03em;
  font-size: 13.5px;
  opacity: 0.8;
}
.setup-field select { width: 230px; }
.setup-field input[type="date"] { width: 170px; color-scheme: dark; }
.setup-field select:hover, .setup-field input:hover { opacity: 1; }
.setup-field select:focus, .setup-field input:focus { outline: 1px solid var(--color-accent); }
.setup-actions { flex-direction: row; gap: 10px; }
.setup-btn {
  font-family: inherit;
  font-variant: small-caps;
  letter-spacing: 0.04em;
  font-size: 13.5px;
  padding: 10px 20px;
  border-radius: 2px;
  cursor: pointer;
  border: 1px solid var(--color-accent);
  background: var(--color-accent);
  color: var(--color-background);
}
.setup-btn:disabled { opacity: 0.45; cursor: default; }
.setup-note { margin-top: 14px; font-size: 12.5px; opacity: 0.55; }

/* ---- the controls row: the tabs and the date nav ---- */

.view-controls {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}
.date-nav { display: flex; align-items: center; gap: 16px; }
.date-nav .date-label { font-size: 15px; opacity: 0.85; min-width: 190px; text-align: center; }
.date-nav .date-step {
  background: none;
  border: 1px solid rgba(241,231,219,0.3);
  color: var(--color-text);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  border-radius: 2px;
  text-decoration: none;
}
.date-nav .date-step:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* ---- the layout ----
   Grid rather than flex: the day panel's top has to line up with the calendar's own top edge
   rather than with the controls row above it, and a two-row grid puts both row-2 items at the
   same y by construction, with no offset to keep in sync.

   All three tab panels share the column-1/row-2 cell, so switching tabs swaps what fills it
   while the day panel in column 2 stays put. Paging by date has no meaning on the outline, so
   the date nav goes with it. */

.schedule-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  grid-template-rows: auto 1fr;
  column-gap: 22px;
}
.schedule-layout .view-panel { grid-column: 1; grid-row: 2; min-width: 0; display: none; }
.schedule-layout .view-panel.active { display: block; }
.schedule-layout.outline-active .date-nav { display: none; }

.schedule-layout #day-panel { grid-column: 2; grid-row: 2; align-self: start; width: 320px; }
/* An empty day must not collapse the panel to its header. The dashboard's copy always has
   content and carries no minimum; a deliberate difference, plan/component-library.md. */
.schedule-layout #day-panel .day-body { min-height: 140px; }

/* ---- the month grid ---- */

.month-grid {
  display: grid;
  /* minmax(0,1fr) rather than 1fr: a 1fr track's automatic minimum is its content's
     min-content width, so a long chapter name pushes its column past its share. It only
     shows once a plan puts content in more than four columns. */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  background: rgba(241,231,219,0.04);
  border-top: 1px solid rgba(241,231,219,0.35);
  border-left: 1px solid rgba(241,231,219,0.35);
  border-radius: 4px;
  overflow: hidden;
}
.month-grid .col-head {
  padding: 8px 4px;
  font-variant: small-caps;
  font-size: 12px;
  text-align: center;
  opacity: 0.55;
  border-right: 1px solid rgba(241,231,219,0.35);
  border-bottom: 1px solid rgba(241,231,219,0.35);
}
.month-grid .day-cell {
  min-width: 0;
  overflow-wrap: anywhere;
  min-height: 100px;
  border-right: 1px solid rgba(241,231,219,0.35);
  border-bottom: 1px solid rgba(241,231,219,0.35);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
}
.month-grid .day-cell:hover { background: rgba(241,231,219,0.16); }
.month-grid .date-num {
  font-size: 12px;
  opacity: 0.7;
  margin-bottom: 2px;
  color: inherit;
  text-decoration: none;
  align-self: flex-start;
}
/* An adjacent month's day is dimmed, but each thing inside it separately rather than the
   cell as a whole: a student's own event can be dropped on any day at all, and at 32% it is
   not readable. These values are what the cell-level opacity composed to on the two things it
   was actually dimming. */
.month-grid .day-cell.outside .date-num { opacity: 0.224; }
.month-grid .day-cell.outside .item-block { opacity: 0.32; }
.month-grid .day-cell.outside { border-color: rgba(241,231,219,0.112); }
.month-grid .day-cell.selected { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.month-grid .day-cell.today .date-num { color: var(--color-accent); font-weight: 700; opacity: 1; }

/* ---- the week grid ---- */

.week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  background: rgba(241,231,219,0.04);
  border-top: 1px solid rgba(241,231,219,0.35);
  border-left: 1px solid rgba(241,231,219,0.35);
  border-radius: 4px;
  overflow: hidden;
}
.week-grid .col-head {
  padding: 8px 4px;
  text-align: center;
  border-right: 1px solid rgba(241,231,219,0.35);
  border-bottom: 1px solid rgba(241,231,219,0.35);
}
.week-grid .col-head .dow { font-variant: small-caps; font-size: 12px; opacity: 0.55; display: block; }
.week-grid .col-head .dnum {
  font-size: 15px;
  margin-top: 2px;
  display: block;
  color: inherit;
  text-decoration: none;
}
.week-grid .col-head .dnum:hover { color: var(--color-accent); }
.week-grid .day-col {
  min-width: 0;
  overflow-wrap: anywhere;
  min-height: 340px;
  border-right: 1px solid rgba(241,231,219,0.35);
  border-bottom: 1px solid rgba(241,231,219,0.35);
  padding: 8px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.week-grid .day-col:hover { background: rgba(241,231,219,0.16); }
.week-grid .day-col.selected { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.week-grid .day-col.rest { opacity: 0.3; }
.week-grid .rest-label { font-size: 11px; font-style: italic; opacity: 0.7; margin-top: 6px; }

/* A chapter and its own exercise content move together, so they are one group rather than
   two loose blocks. */
.week-grid .item-group { margin-bottom: 8px; }
.week-grid .item-group > .item-block { margin-bottom: 4px; }
.week-grid .item-group > .item-block:last-child { margin-bottom: 0; }

/* ---- dragging a block to another day ----
   The week drags the group wrapper, since a chapter and its Exercises are two blocks and one
   thing to move; the month has one block per group already and drags that. Both carry
   data-drag-group, so the two cases are one selector here.

   touch-action is none because the drag runs on pointer events: without it a finger moving on
   a block scrolls the page and the drag never starts. What it costs is that a touch scroll has
   to begin somewhere other than a block, which the day's own background and the page's margins
   both give (Milan, 2026-08-29). */
[data-drag-group],
[data-drag-event] {
  cursor: grab;
  touch-action: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
[data-drag-group]:hover,
[data-drag-event]:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  border-color: var(--color-accent);
}
.item-group[data-drag-group]:hover > .item-block { border-color: var(--color-accent); }
[data-drag-group]:active,
[data-drag-event]:active { cursor: grabbing; }
[data-drag-group].dragging,
[data-drag-event].dragging { opacity: 0.35; }

/* An event on a calendar: the title alone, at the same 12px as the chapter chip beneath it
   rather than the day panel's 12.5px, which would read as larger than the course content it
   sits above. */
.week-grid .event-group,
.month-grid .event-group { margin-bottom: 8px; }
.week-grid .event-block,
.month-grid .event-block { margin-bottom: 4px; }
.week-grid .event-block:last-child,
.month-grid .event-block:last-child { margin-bottom: 0; }
.week-grid .event-block .event-title,
.month-grid .event-block .event-title { font-size: inherit; }

.month-grid .day-cell.drag-over,
.week-grid .day-col.drag-over {
  background: rgba(255, 128, 88, 0.14);
  outline: 1px dashed var(--color-accent);
  outline-offset: -1px;
}

/* What follows the pointer: a copy of the block, held at the width it had where it started so
   it does not resize as it crosses a narrower column. It takes no pointer events of its own,
   because the page has to keep seeing the day underneath it. */
.drag-ghost {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  opacity: 0.9;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
}
.drag-ghost .item-block { margin-bottom: 4px; }
.drag-ghost .item-block:last-child { margin-bottom: 0; }

/* ---- Course Outline: the card stack ----
   Units is the permanent base card; a unit slides its chapters in over it from the right, and
   a chapter slides its lessons over that. Going back slides the top card out, uncovering the
   one beneath, which never moved. */

.content-stack {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(241,231,219,0.35);
  border-radius: 4px;
  /* Height is set in pixels by the page to whichever card is tallest, so the box fits its
     content exactly. Animated, so a move between a long units list and a short lessons list
     resizes rather than snapping. */
  transition: height 0.32s ease;
}
/* Opaque, because a card sliding over another card cannot be see-through: the calendar's own
   translucent tint over a solid copy of the page background. */
.content-card {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 24px 28px 30px;
  background: linear-gradient(rgba(241,231,219,0.04), rgba(241,231,219,0.04)), var(--color-background);
  transform: translateX(0);
  transition: transform 0.32s ease;
}
.content-card.entering { transform: translateX(100%); transition: none; }
.content-card.leaving { transform: translateX(100%); }

.card-back {
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  color: var(--color-accent);
  font-variant: small-caps;
  font-size: 13px;
  letter-spacing: 0.03em;
  cursor: pointer;
  margin-bottom: 16px;
}
.card-back:hover { text-decoration: underline; }
.content-card .card-title { font-variant: small-caps; font-size: 20px; margin-bottom: 18px; }

.content-block {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  width: 100%;
  text-align: left;
  font-family: inherit;
  color: inherit;
  text-decoration: none;
  background: var(--color-modal-background);
  border: 1px solid rgba(241,231,219,0.2);
  border-radius: 3px;
  padding: 14px 16px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.content-block:last-child { margin-bottom: 0; }
.content-block:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.35);
  border-color: var(--color-accent);
}
.content-block .block-body { flex: 1; min-width: 0; }
.content-block .block-title { display: block; font-variant: small-caps; font-size: 16px; margin-bottom: 5px; }
.content-block .block-desc { display: block; font-size: 12.5px; opacity: 0.75; line-height: 1.45; }

.num-square {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 600;
}
.num-square.fill.cat-langlogic { background: var(--color-category-langlogic); color: var(--color-accent-text); }
.num-square.fill.cat-rc { background: var(--color-category-rc); color: var(--color-accent-text); }
.num-square.fill.cat-lr { background: var(--color-category-lr); color: var(--color-accent-text); }
.num-square.fill.cat-unknown { background: rgba(241,231,219,0.35); color: var(--color-accent-text); }
.num-square.outline { font-size: 12.5px; background: transparent; }
.num-square.outline.cat-langlogic { border: 2px solid var(--color-category-langlogic); color: var(--color-category-langlogic); }
.num-square.outline.cat-rc { border: 2px solid var(--color-category-rc); color: var(--color-category-rc); }
.num-square.outline.cat-lr { border: 2px solid var(--color-category-lr); color: var(--color-category-lr); }
.num-square.outline.cat-unknown { border: 2px solid rgba(241,231,219,0.35); }

/* A lesson block takes the same left stripe the calendar's blocks use rather than a number
   square, since a lesson has no number of its own to show. */
.content-block.lesson-block.cat-langlogic { border-left: 4px solid var(--color-category-langlogic); }
.content-block.lesson-block.cat-rc { border-left: 4px solid var(--color-category-rc); }
.content-block.lesson-block.cat-lr { border-left: 4px solid var(--color-category-lr); }

/* Locked (stage 10 item 3) — own look rather than the ordinary hover-lift treatment,
   matching the lessons menu's own locked rows. */
.content-block.lesson-block.is-locked {
  border-left: 4px solid var(--color-icon-blue-dark);
  color: var(--color-icon-blue-dark);
  cursor: not-allowed;
}
.content-block.is-locked:hover { transform: none; box-shadow: none; border-color: rgba(241,231,219,0.2); border-left-color: var(--color-icon-blue-dark); }

.content-stack .rest-label { font-size: 13px; font-style: italic; opacity: 0.55; }

/* ---- narrow widths ----
   Breakpoints and the reasoning behind them are in plan/component-library.md's "Layout at
   narrow widths". Above 965px the calendar grid is clipped rather than scrolled. */

@media (max-width: 965px) {
  .setup-wrap { grid-template-columns: 1fr; }
  .schedule-layout { grid-template-columns: 1fr; }
  .schedule-layout #day-panel { grid-column: 1; grid-row: 3; width: auto; margin-top: 22px; }
}

@media (max-width: 880px) {
  /* A builder box's fields go to a two-column grid at 880px, with the buttons taking the
     full row beneath them. */
  .setup-row { display: grid; grid-template-columns: 1fr 1fr; align-items: end; }
  .setup-field select, .setup-field input[type="date"] { width: 100%; }
  .setup-actions { grid-column: 1 / -1; }
}