/* Aluma for educators: what an educator can do for a student
   (educators_actions.js): the reminder composer and its history, the
   Calendar and plan tab, and the student's reminder settings.

   Loaded last, after educators.css, whose tokens and shared pieces this
   builds on: .card, .btn, .field, .seg, .chip-radios, .set-row, .switch,
   .perm-note, the modal (a bottom sheet below 560px) and the ec- calendar
   (seven columns from 920px, a stacked day list below). Every class here
   starts with ac-, except the three the spec names for the checks
   (.reminder-row and its parts, .set-saved). The calendar's own look is
   educators.css's: this sheet only lines up the plan tab's Add slots.
   Every colour is an --e-* token or a tint of one: the gate's
   sweeps read every sheet, and an app-wide token name here would trip them.

   Widths: one column on a phone, with the When control, the time field,
   the selects and the send button full width; from 960px the composer
   sits beside the history. */

/* ── the Reminders tab ────────────────────────────────────────────────── */
.ac-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 960px) {
  .ac-cols { grid-template-columns: 380px minmax(0, 1fr); gap: 24px; }
  /* The history rides beside the longer composer instead of leaving a
     tall gap under itself. */
  .ac-history { position: sticky; top: 84px; }
}
.ac-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 18px;
}
.ac-head-end { display: flex; align-items: center; }
.ac-head-end:empty { display: none; }
.ac-compose-body { min-width: 0; }
.ac-compose-body > .perm-note { margin-top: 2px; }

/* Today's count, as a quiet pill: amber when two are left, red at none. */
.ac-left {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 11px;
  border-radius: var(--e-radius-pill);
  background: var(--e-surface-3);
  color: var(--e-text-2);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ac-left.is-low { background: var(--e-warn-soft); color: var(--e-warn-ink); }
.ac-left.is-out { background: var(--e-risk-soft); color: var(--e-risk-ink); }

/* ── the composer ─────────────────────────────────────────────────────── */
.ac-form { gap: 18px; }
.ac-fields { gap: 18px; }
.ac-set { min-width: 0; margin: 0; padding: 0; border: 0; }
.ac-legend { display: block; margin-bottom: 10px; padding: 0; }
/* The reminders are whole sentences: a list of rows to pick one from,
   each with a radio dot that fills with a check. */
.ac-chips { flex-direction: column; flex-wrap: nowrap; gap: 6px; }
.ac-chips .ac-choice { display: flex; }
.ac-chips .ac-choice label {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 10px 14px 10px 12px;
  border-radius: 16px;
  background: var(--e-surface-2);
  box-shadow: inset 0 0 0 1px var(--e-border);
  color: var(--e-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  overflow-wrap: anywhere;
  transition: background-color 0.18s var(--e-ease), box-shadow 0.18s var(--e-ease), color 0.18s var(--e-ease);
}
.ac-chips .ac-choice input:hover:not(:checked):not(:disabled) + label { background: var(--e-surface); box-shadow: inset 0 0 0 1px var(--e-border-strong); }
.ac-chips .ac-choice input:checked + label {
  background: var(--e-accent-soft);
  color: var(--e-accent-soft-ink);
  box-shadow: inset 0 0 0 1.5px rgba(31, 95, 130, 0.45);
}
.ac-dot {
  display: grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--e-surface);
  box-shadow: inset 0 0 0 1.5px var(--e-icon);
  color: transparent;
  transition: background-color 0.18s var(--e-ease), box-shadow 0.18s var(--e-ease);
}
.ac-dot .ico { width: 13px; height: 13px; }
.ac-dot svg { stroke-width: 3; }
.ac-chips .ac-choice input:checked + label .ac-dot { background: var(--e-accent); box-shadow: none; color: #fff; }
.ac-choice-text { flex: 1 1 auto; min-width: 0; }
.ac-tag {
  flex: none;
  padding: 2px 8px;
  border-radius: var(--e-radius-pill);
  background: var(--e-surface-3);
  color: var(--e-text-2);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.ac-chips .ac-choice input:checked + label .ac-tag { background: var(--e-surface); color: var(--e-accent-soft-ink); }
.ac-chip-sk { width: 100%; height: 46px; border-radius: 16px; }
.ac-chip-sk:nth-child(2) { width: 82%; }
.ac-chip-sk:nth-child(3) { width: 91%; }
.ac-own .textarea { min-height: 96px; }
.ac-when-wrap { display: flex; flex-direction: column; gap: 9px; }
.ac-when { max-width: 320px; }
.ac-at .input { max-width: 320px; }
/* The time in words, under the picker. */
.ac-at-words { display: flex; align-items: center; gap: 6px; color: var(--e-night-ink); font-size: 14px; font-weight: 650; }
.ac-at-words .ico { width: 16px; height: 16px; }
.ac-at-words.is-empty { color: var(--e-text-2); }
/* What the student will read: their notification, as a small card. */
.ac-preview-wrap { display: flex; flex-direction: column; gap: 8px; }
.ac-preview {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px 14px 14px;
  border-radius: 20px;
  background: var(--e-surface);
  box-shadow: var(--e-shadow-sm);
  color: var(--e-text);
  font-size: 14px;
  line-height: 1.45;
}
.ac-preview-ico {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 11px;
  background: var(--e-accent);
  color: #fff;
}
.ac-preview-ico .ico { width: 17px; height: 17px; }
.ac-preview-body { min-width: 0; padding-top: 5px; overflow-wrap: anywhere; }
.ac-preview-from { font-weight: 720; }
.ac-preview-text { font-weight: 520; }
.ac-preview.is-empty { background: var(--e-surface-3); box-shadow: none; color: var(--e-text-2); }
.ac-preview.is-empty .ac-preview-ico { background: var(--e-surface); color: var(--e-icon); }
.ac-note-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.ac-note { flex: 1 1 220px; color: var(--e-text-2); font-size: 13px; line-height: 1.45; }
.ac-out { color: var(--e-risk-ink); font-weight: 650; }
.ac-submit { display: flex; justify-content: flex-start; }
.ac-fields:disabled .ac-preview { opacity: 0.6; }

/* ── what was sent ────────────────────────────────────────────────────── */
.ac-history-body { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ac-group { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ac-group-head {
  padding-left: 4px;
  color: var(--e-text-2);
  font-size: 12px;
  font-weight: 720;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ac-history-list {
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  background: var(--e-surface-2);
  box-shadow: inset 0 0 0 1px var(--e-hair);
}
.reminder-row {
  display: grid;
  /* The status sits in a column of its own width, so every reminder's
     text starts on the same line whatever its status says. */
  grid-template-columns: 104px minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: start;
  padding: 14px 16px;
}
.reminder-row + .reminder-row { border-top: 1px solid var(--e-hair); }
.reminder-main { min-width: 0; }
.reminder-text { color: var(--e-text); font-size: 15px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.reminder-row[data-status="cancelled"] .reminder-text { color: var(--e-text-2); text-decoration: line-through; text-decoration-color: rgba(79, 93, 104, 0.5); }
.reminder-meta { margin-top: 2px; color: var(--e-text-2); font-size: 13px; font-variant-numeric: tabular-nums; }
/* The assignment a reminder is about ("About Essay draft"). */
.reminder-about { margin-top: 2px; color: var(--e-text-2); font-size: 13px; font-weight: 620; overflow-wrap: anywhere; }
.reminder-actions { display: flex; align-items: center; margin: -4px -6px -4px 0; }
.reminder-actions .btn-sm { min-height: 34px; padding: 0 12px; }
.ac-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 1px;
  padding: 3px 10px 3px 8px;
  border-radius: var(--e-radius-pill);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  justify-self: start;
}
.ac-status .ico { width: 14px; height: 14px; }
.ac-status.is-sent { background: var(--e-ok-soft); color: var(--e-ok-ink); }
.ac-status.is-scheduled { background: var(--e-warn-soft); color: var(--e-warn-ink); }
.ac-status.is-cancelled { background: var(--e-surface-3); color: var(--e-text-2); }
.ac-more { align-self: flex-start; }
.ac-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 28px 18px;
  border-radius: 22px;
  background: var(--e-surface-2);
  box-shadow: inset 0 0 0 1px var(--e-hair);
  text-align: center;
}
.ac-empty-ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 6px;
  border-radius: 16px;
  background: var(--e-surface-3);
  color: var(--e-icon);
}
.ac-empty-ico .ico { width: 20px; height: 20px; }
.ac-empty-title { color: var(--e-text); font-size: 15px; font-weight: 680; }
.ac-empty-text { color: var(--e-text-2); font-size: 14px; line-height: 1.45; }
/* A phone: the status over the text, Cancel under it. */
@media (max-width: 479px) {
  .reminder-row { grid-template-columns: minmax(0, 1fr) auto; }
  .reminder-row .ac-status { grid-column: 1 / -1; }
  .reminder-actions .btn-sm { min-height: 40px; }
}

/* ── the Calendar and plan tab ────────────────────────────────────────── */
.ac-plan { display: flex; flex-direction: column; gap: 16px; }
.ac-cal-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-left: auto; }
.ac-plan-add-slot { display: contents; }
.ac-plan-add { min-height: 44px; }
.ac-plan-hint { color: var(--e-text-2); font-size: 14px; line-height: 1.45; }
.ac-plan .ec-foot:empty { display: none; }
.ac-week-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 10px 14px;
  border-radius: 16px;
  background: var(--e-surface-3);
  color: var(--e-text-2);
  font-size: 14px;
  font-weight: 600;
}
.ac-week-empty .ico { width: 17px; height: 17px; color: var(--e-icon); }

/* Wide: each day's Add sits at the foot of its column, so the seven line
   up whatever each day holds. (The calendar's own look, its sittings,
   their Move and Remove and the dashed Add, is educators.css's.) */
@media (min-width: 920px) {
  .ac-plan .ec-day-body { flex: 1 1 auto; }
  .ac-plan .ec-add.btn-sm { margin-top: auto; }
}
/* The stacked list: a free day stays one line, "Free" with its Add at
   the end, so a quiet week stays short on a phone. */
@media (max-width: 919px) {
  .ac-plan .ec-day.is-empty .ec-day-body { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
  .ac-plan .ec-day.is-empty .ec-add.btn-sm { flex: 0 1 auto; align-self: center; min-height: 34px; padding: 0 14px; }
}

/* The head on a phone: the week's steps on the left, Add as a round + on
   the right (its name stays "Add to planner"). */
@media (max-width: 559px) {
  .ac-cal-tools { width: 100%; justify-content: space-between; margin-left: 0; }
  .ac-cal-tools .ec-nav { margin-left: 0; }
  /* The head is the title and one row of controls; the how-to sentence
     would push the first day below the fold (each item's own Move and each
     day's Add say it there). A permission note still shows. */
  .ac-plan-lead .ac-plan-hint { display: none; }
  .ac-plan-lead:not(:has(.perm-note)) { display: none; }
  .ac-plan-add.btn-sm { width: 44px; padding: 0; justify-content: center; border-radius: 50%; }
  .ac-plan-add .btn-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* ── the plan modals ──────────────────────────────────────────────────── */
.ac-modal-form { gap: 18px; }
.ac-sitting {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 18px;
  background: var(--e-surface-2);
  box-shadow: inset 0 0 0 1.5px rgba(13, 89, 99, 0.22);
}
.ac-sitting-line { display: flex; align-items: center; gap: 6px; color: var(--e-night-ink); font-size: 13px; font-weight: 720; }
.ac-sitting-line .ico { width: 15px; height: 15px; }
.ac-sitting-title { color: var(--e-text); font-size: 16px; font-weight: 680; line-height: 1.35; overflow-wrap: anywhere; }
.ac-sitting-meta { color: var(--e-text-2); font-size: 13px; overflow-wrap: anywhere; }
/* How long: five equal steps in one row. A to-do's "No set time" heads
   them on a row of its own. */
.ac-mins { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.ac-mins .chip-radio label { flex: 1 1 auto; justify-content: center; padding: 6px 4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ac-mins.has-none .ac-min-none { grid-column: 1 / -1; }
/* Add to planner: what goes on (Assignment, Practice, To-do), its own
   field, and what the student will read with "Added by" under it. */
.ac-add-what-wrap { display: flex; flex-direction: column; gap: 9px; }
.ac-add-what { flex-wrap: wrap; }
.ac-add-only {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 16px;
  background: var(--e-surface-3);
  color: var(--e-text-2);
  font-size: 14px;
  line-height: 1.45;
}
.ac-add-only .ico { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--e-icon); }
.ac-add-text .textarea { min-height: 64px; }
.ac-preview-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.ac-change-name { font-size: 13px; }
.ac-add-preview .ac-preview-text { display: block; font-weight: 680; }
.ac-add-preview .ac-preview-from { display: block; margin-top: 2px; color: var(--e-accent-soft-ink); font-size: 13px; font-weight: 680; }
.ac-add-preview.is-empty .ac-preview-text { font-weight: 560; }
.ac-none {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px 8px 4px;
  color: var(--e-text-2);
  font-size: 15px;
  line-height: 1.45;
  text-align: center;
}
.ac-none-ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 6px;
  border-radius: 16px;
  background: var(--e-surface-3);
  color: var(--e-icon);
}
.ac-none-ico .ico { width: 20px; height: 20px; }
.ac-none-title { color: var(--e-text); font-weight: 680; }

/* ── the Notifications tab ────────────────────────────────────────────── */
.ac-notify-head { display: flex; flex-direction: column; gap: 8px; padding: 22px 20px 14px; }
@media (min-width: 640px) {
  .ac-notify-head { padding: 26px 24px 16px; }
}
.ac-notify-lede { color: var(--e-text-2); font-size: 15px; line-height: 1.5; max-width: 62ch; }
.ac-notify-head .form-error { margin-top: 4px; }
.ac-notify-body { min-width: 0; }
.ac-notify-off { display: flex; flex-direction: column; gap: 12px; padding: 4px 20px 22px; }
.ac-notify-list { padding: 0 2px; color: var(--e-text-2); font-size: 14px; line-height: 1.5; max-width: 70ch; }
.ac-notify-loading { display: flex; flex-direction: column; gap: 10px; padding: 8px 20px 20px; }
.ac-notify-error { margin: 8px 20px 20px; }
.ac-set-rows { border-top: 1px solid var(--e-hair); }
@media (min-width: 640px) {
  .ac-notify .set-row { padding-left: 24px; padding-right: 24px; }
}

/* Saved: a green check on the switch's knob for a moment. It follows the
   knob (right when on, left when off) and never takes a click. */
.ac-notify .set-end { position: relative; }
.ac-notify .set-end .set-saved {
  position: absolute;
  top: 2px;
  right: 2px;
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--e-ok-soft);
  color: var(--e-ok-ink);
  pointer-events: none;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.2s var(--e-ease), transform 0.2s var(--e-ease);
}
.ac-notify .switch:not(:checked) + .set-saved { right: auto; left: 2px; }
.ac-notify .set-end .set-saved.is-on { opacity: 1; transform: scale(1); }
.set-saved .ico { width: 15px; height: 15px; }
.set-saved svg { stroke-width: 2.6; }
/* Outside a switch (a time with no row to sit on): a check beside it. */
.ac-hour .field > .set-saved { display: inline-grid; place-items: center; color: var(--e-ok-ink); }

/* The daily plan reminder's time, on its row: between the words and the
   switch on a wide screen, under the words on a phone. */
.ac-notify .set-row.ac-has-hour { grid-template-columns: 38px minmax(0, 1fr) auto auto; }
.ac-has-hour > .set-end { grid-column: 4; grid-row: 1; }
.ac-has-hour > .ac-hour { grid-column: 3; grid-row: 1; }
.ac-hour .field { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.ac-hour .field > label { color: var(--e-text-2); font-size: 14px; font-weight: 640; }
.ac-hour .input { width: 136px; min-height: 42px; padding: 8px 12px; border-radius: 14px; font-size: 15px; }
.ac-hour .field-error { flex-basis: 100%; }
@media (max-width: 559px) {
  .ac-notify .set-row.ac-has-hour { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .ac-has-hour > .set-end { grid-column: 3; }
  .ac-has-hour > .ac-hour { grid-column: 2 / -1; grid-row: 2; }
}

.ac-notify-foot {
  padding: 14px 20px 20px;
  border-top: 1px solid var(--e-hair);
  color: var(--e-text-2);
  font-size: 13px;
  line-height: 1.45;
}
@media (min-width: 640px) {
  .ac-notify-foot { padding: 16px 24px 22px; }
}

/* ── phones: full-width controls ──────────────────────────────────────── */
@media (max-width: 559px) {
  .ac-when,
  .ac-at .input { max-width: none; }
  .ac-submit .btn { flex: 1 1 100%; }
}

/* ── touch: 44px targets ──────────────────────────────────────────────── */
@media (pointer: coarse) {
  .ac-chips .ac-choice label,
  .ac-mins .chip-radio label,
  .reminder-actions .btn-sm,
  .ac-more { min-height: 44px; }
  /* An empty day's Add on the stacked list: a finger's height too
     (its 34px row height is for a mouse). */
  .ac-plan .ec-day.is-empty .ec-add.btn-sm { min-height: 44px; }
}

/* Less motion means none. */
@media (prefers-reduced-motion: reduce) {
  .ac-chips .ac-choice label,
  .ac-dot,
  .ac-preview,
  .ac-status,
  .set-saved { transition: none; animation: none; }
  .ac-notify .set-end .set-saved { transform: none; }
}