/* Formative Trackers (AdminLens tab) - teacher checklist for Math and ELA.
   Every class here starts with "ft-" so these styles can't affect the rest of
   AdminLens, and AdminLens styles can't change the tracker's look. */

.ft-app {
  /* --brand, --brand-soft and --bg are NOT set here: the tracker uses the ones
     AdminLens sets for the page, so it follows each school's theme (SKAL's red
     and cream by default). See applyBranding() in script.js. */
  --panel: #ffffff;
  --text: #2f251f;
  --muted: #6f6258;
  --line: #ddcec0;
  --line-soft: #eee4da;
  /* Filled buttons use the school's main color made a little deeper - a big
     solid block reads brighter than the same color in text. For SKAL's #c30000
     this lands exactly on the red measured from the SKAL crest (#a80000). */
  --brand-button: var(--brand);
  --brand-button: color-mix(in srgb, var(--brand) 86%, #000);
  --success: #2f7d4f;
  --success-soft: #e3f3e8;

  --circle: #2463a8;
  --circle-soft: #dde9f7;
  --triangle: #b8790f;
  --triangle-soft: #fbecd4;
  --square: #7a3fa0;
  --square-soft: #efe2f6;

  /* The Group column grows or shrinks with how many shapes the sheet uses */
  --lead: 48px minmax(0, 2fr) repeat(var(--checks), minmax(0, 1fr));
  --shape-w: 50px;
  --shape-gap: 6px;
  --group-pad: 20px;

  --star: #0f7c86;
  --star-soft: #d9f0f2;
}

.ft-grid {
  --n: 3;
  --checks: 3;
  --lead: 48px minmax(0, 2fr) repeat(var(--checks), minmax(0, 1fr));
  --note-w: 64px;
  --cols: var(--lead) var(--note-w) max(calc(var(--n) * var(--shape-w) + (var(--n) - 1) * var(--shape-gap) + var(--group-pad)), 76px);
}

.ft-app *,
.ft-app *::before,
.ft-app *::after {
  box-sizing: border-box;
}

.ft-app {
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  color: var(--text);
}

:where(.ft-app) h1,
:where(.ft-app) h2,
:where(.ft-app) p {
  margin: 0;
}

/* AdminLens styles every button, text box and dropdown on the page (red
   buttons, 100px-tall text boxes...). Undo that inside the tracker so only the
   tracker's own styles below apply. */
:where(.ft-app) :is(button, input, select, textarea) {
  all: revert;
}

:where(.ft-app) button,
:where(.ft-app) input,
:where(.ft-app) select,
:where(.ft-app) textarea {
  font: inherit;
  color: inherit;
}

:where(.ft-app) button {
  cursor: pointer;
}

/* ---- Layout ---- */
/* The tracker sizes itself to its own space inside AdminLens (which has a
   sidebar), not to the whole window. */
/* ---- First-time welcome question (one screen at a time) ---- */
.ft-welcome {
  max-width: 600px;
  width: 100%;
  margin: 8px auto 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 2px 10px rgba(47, 37, 31, 0.05);
}

.ft-welcome h2 {
  color: var(--brand);
  font-size: 1.4rem;
  margin-bottom: 4px;
}

.ft-w-sub {
  color: var(--muted);
  margin: 0 0 8px;
}

.ft-w-note {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 6px 0;
}

.ft-w-opt {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  margin: 10px 0;
  cursor: pointer;
}

.ft-w-opt.ft-on {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.ft-w-opt span span {
  display: block;
  color: var(--muted);
  font-size: 0.9rem;
}

.ft-welcome input[type="radio"],
.ft-welcome input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--brand-button);
  flex: none;
}

.ft-w-subjects {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 8px 0;
}

.ft-w-subjects label,
.ft-w-other label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  min-height: 40px;
}

.ft-w-other {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ft-welcome input[type="text"] {
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  flex: 1;
  min-width: 160px;
}

.ft-w-class {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  margin: 10px 0;
  display: grid;
  gap: 6px;
}

.ft-w-class .ft-w-name {
  width: 100%;
}

.ft-w-add {
  margin-top: 4px;
}

.ft-w-err {
  color: var(--danger, #b33632);
  font-size: 0.9rem;
  min-height: 1.2em;
  margin-top: 8px;
}

.ft-w-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.ft-class-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.ft-class-row .ft-w-name {
  flex: 1;
}

.ft-w-class.ft-removed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #faf6f0;
  color: var(--muted);
}

.ft-w-list {
  margin: 4px 0 8px;
  padding-left: 20px;
  line-height: 1.7;
}

/* The tab's content area is a two-column card grid on wider screens - the
   tracker spans the full width instead of squeezing into one column. */
.ft-host {
  grid-column: 1 / -1;
  min-width: 0;
}

.ft-root {
  container: ftroot / inline-size;
}

/* Tab title - same look as the test version's page title, on a white panel
   so it stays readable over AdminLens's background photo */
.ft-page-head {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 2px 10px rgba(47, 37, 31, 0.05);
}

.ft-page-head h2 {
  font-size: 1.5rem;
  color: var(--brand);
}

.ft-page-head p {
  color: var(--muted);
  font-size: 0.95rem;
}

.ft-layout {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 16px 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.ft-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(47, 37, 31, 0.05);
}

/* ---- Toolbar ---- */
.ft-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* ---- Group purpose tags (fixed colors for every school - they carry meaning) ---- */
.ft-purpose {
  position: relative;
  margin: 2px 0 6px;
}

.ft-purpose-btn {
  border-radius: 999px;
  padding: 4px 10px;
  min-height: 30px;
  font-size: 0.8rem;
  font-weight: 700;
  border: 1.5px dashed #a99a8c;
  background: #fff;
  color: var(--muted);
}

.ft-purpose-btn[data-purpose="reteach"] { border: 1.5px solid #b33632; background: #f7dcd9; color: #b33632; }
.ft-purpose-btn[data-purpose="practice"] { border: 1.5px solid #b8790f; background: #fbecd4; color: #8a5a09; }
.ft-purpose-btn[data-purpose="enrichment"] { border: 1.5px solid #2f7d4f; background: #e3f3e8; color: #2f7d4f; }

.ft-purpose-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  min-width: 170px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(47, 37, 31, 0.15);
  padding: 4px;
}

.ft-purpose-menu button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  border-radius: 6px;
  padding: 10px;
  font-weight: 600;
  color: var(--text);
}

.ft-purpose-menu button:hover,
.ft-purpose-menu button:focus-visible {
  background: var(--bg);
  outline: none;
}

.ft-purpose-hint {
  font-size: 0.75rem;
  color: var(--muted);
  padding: 4px 10px 6px;
}

/* On paper: a small tag, untagged groups show nothing */
.ft-print-mode .ft-purpose { margin: 0 0 3px; }
.ft-print-mode .ft-purpose-btn { min-height: 0; padding: 1px 7px; font-size: 0.6rem; }
.ft-print-mode .ft-purpose-btn[data-purpose=""] { display: none; }
.ft-print-mode .ft-purpose-menu,
.ft-print-mode .ft-caret { display: none; }

/* Anything the tracker hides stays hidden, even if its own style sets a display. */
.ft-app [hidden] {
  display: none !important;
}

/* ---- Week strip (replaces the Sheet dropdown) ---- */
.ft-week {
  flex: 1 1 100%;
}

.ft-week-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.ft-week-arrow {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
}

.ft-week-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.ft-week-range {
  font-weight: 800;
  min-width: 130px;
  text-align: center;
}

.ft-week-jump {
  margin-left: auto;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.ft-days {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

/* Status colors are fixed (same for every school) - they carry meaning. */
.ft-day {
  position: relative;
  min-height: 64px;
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 6px 4px;
  display: grid;
  place-items: center;
  align-content: center;
  color: #fff;
  font-weight: 800;
  line-height: 1.2;
}

.ft-day small {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
}

.ft-day-none {
  background: #f3ede6;
  border: 1px solid #e6dccf;
  color: var(--muted);
}

.ft-day-started {
  background: #fff;
  border-color: var(--brand-button);
  color: var(--brand-button);
}

.ft-day:disabled {
  opacity: 0.45;
  cursor: default;
}

.ft-day-sel {
  outline: 3px solid var(--text);
  outline-offset: 2px;
}

.ft-day-today::after {
  content: "Today";
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand-button);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  border-radius: 999px;
  padding: 1px 7px;
}

.ft-day-count {
  position: absolute;
  top: 4px;
  right: 5px;
  background: #fff;
  color: var(--text);
  border-radius: 999px;
  font-size: 0.7rem;
  padding: 0 6px;
}

.ft-day-chooser {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.ft-day-chooser .ft-chosen {
  border-color: var(--brand-button);
  color: var(--brand-button);
}

/* No sheet on the day being viewed */
.ft-start-today {
  width: 100%;
  min-height: 64px;
  border: 0;
  border-radius: 14px;
  background: var(--brand-button);
  color: #fff;
  font-size: 1.15rem;
  font-weight: 800;
}

.ft-empty-label {
  font-size: 1.05rem;
}

/* Class picker + subject switch (built from the teacher's classes) */
.ft-class-subject {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.ft-class-pick:empty {
  display: none;
}

.ft-class-pick,
.ft-subjects {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ft-subject-fixed {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  font-weight: 700;
  color: #fff;
  background: var(--brand-button);
}

.ft-subject-toggle {
  display: inline-flex;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
}

.ft-subject-btn {
  border: 0;
  background: transparent;
  padding: 10px 26px;
  border-radius: 999px;
  font-weight: 700;
  color: var(--muted);
  min-height: 44px;
}

.ft-subject-btn.ft-active {
  background: var(--brand-button);
  color: #fff;
}

.ft-sheet-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ft-field-label {
  font-weight: 700;
  color: var(--muted);
}

:where(.ft-app) select {
  min-height: 44px;
  min-width: 200px;
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.ft-btn {
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 10px;
  font-weight: 700;
  border: 1px solid var(--line);
  background: #fff;
}

.ft-btn-primary {
  background: var(--brand-button);
  border-color: var(--brand-button);
  color: #fff;
}

.ft-btn-ghost {
  color: var(--muted);
}

/* ---- Sheet ---- */
.ft-sheet-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.ft-sheet-name {
  flex: 1 1 280px;
  font-size: 1.25rem;
  font-weight: 700;
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--bg);
  min-height: 48px;
}

.ft-sheet-name:focus {
  outline: 2px solid var(--brand);
  border-style: solid;
  background: #fff;
}

/* "Saving… / Saved to your account ✓" next to Print (real accounts only) */
.ft-save-status {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.ft-save-status[data-state="saved"] {
  color: var(--success);
}

.ft-save-status[data-state="retrying"] {
  color: var(--brand);
}

.ft-sort-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--muted);
  min-height: 44px;
}

.ft-sort-toggle input {
  width: 22px;
  height: 22px;
  accent-color: var(--brand);
}

.ft-grid-scroll {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.ft-grid-head {
  display: grid;
  grid-template-columns: var(--cols);
  background: #faf6f0;
  border-bottom: 2px solid var(--line);
}

.ft-hc {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 6px;
  font-weight: 800;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  border-right: 1px solid var(--line-soft);
}

.ft-hc-num { grid-column: 1; grid-row: 1 / 3; }
.ft-hc-name { grid-column: 2; grid-row: 1 / 3; justify-content: flex-start; padding-left: 12px; }
/* Heading centered over the check columns, with small − / + centered
   underneath - the same layout as the Group heading. */
.ft-hc-opp {
  grid-column: 3 / -3;
  grid-row: 1;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  color: var(--brand);
  border-bottom: 1px solid var(--line-soft);
}

.ft-hc-opp > span {
  text-align: center;
  line-height: 1.25;
  letter-spacing: 0.02em;
}
.ft-hc-note {
  grid-column: -3 / -2;
  grid-row: 1 / 3;
}

.ft-hc-group {
  grid-column: -2 / -1;
  grid-row: 1 / 3;
  border-right: 0;
  flex-direction: column;
  gap: 6px;
}

.ft-group-count {
  display: flex;
  gap: 4px;
}

.ft-count-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--text);
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--muted);
}

.ft-count-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.ft-hc-sub {
  grid-column: 3 / -3;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(var(--checks), 1fr);
}

.ft-opp-title {
  display: block;
  width: 100%;
  min-height: 44px;
  border: 0;
  border-right: 1px solid var(--line-soft);
  background: transparent;
  text-align: center;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.2;
  padding: 12px 6px;
  resize: none;
  overflow: hidden;
  overflow-wrap: break-word;
  hyphens: auto;
}

.ft-opp-title::placeholder {
  color: #b3a597;
  font-weight: 500;
}

.ft-opp-title:focus {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
  background: #fff;
}

/* ---- Rows ---- */
.ft-row {
  display: grid;
  grid-template-columns: var(--cols);
  align-items: stretch;
  border-bottom: 1px solid var(--line-soft);
  background: #fff;
  position: relative;
}

.ft-row.ft-g-circle { background: linear-gradient(90deg, var(--circle-soft), #fff 40%); }
.ft-row.ft-g-triangle { background: linear-gradient(90deg, var(--triangle-soft), #fff 40%); }
.ft-row.ft-g-square { background: linear-gradient(90deg, var(--square-soft), #fff 40%); }
.ft-row.ft-g-star { background: linear-gradient(90deg, var(--star-soft), #fff 40%); }

.ft-row.ft-moving {
  z-index: 2;
}

.ft-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--line-soft);
  min-height: 56px;
}

.ft-cell:last-child {
  border-right: 0;
}

.ft-num {
  font-weight: 800;
  color: var(--muted);
}

.ft-name-cell {
  justify-content: stretch;
}

.ft-name-input {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 16px 12px;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
  resize: none;
  overflow: hidden;
  overflow-wrap: break-word;
  hyphens: auto;
}

.ft-name-input::placeholder {
  color: #b3a597;
  font-weight: 500;
}

.ft-name-input:focus {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
  background: #fff;
}

.ft-check {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 2px solid var(--line);
  background: #fff;
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1;
  color: transparent;
  transition: background 0.12s, border-color 0.12s;
}

.ft-check[aria-pressed="true"] {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}

.ft-check:disabled {
  opacity: 0.35;
  cursor: default;
}

.ft-shapes {
  display: flex;
  gap: var(--shape-gap);
}

.ft-shape-btn {
  width: var(--shape-w);
  height: 46px;
  border-radius: 10px;
  border: 2px solid var(--line);
  background: #fff;
  display: grid;
  place-items: center;
  padding: 0;
  color: #bdb0a3;
}

.ft-shape-btn svg {
  width: 26px;
  height: 26px;
}

.ft-shape-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.ft-shape-btn[data-shape="circle"][aria-pressed="true"] { background: var(--circle); border-color: var(--circle); color: #fff; }
.ft-shape-btn[data-shape="triangle"][aria-pressed="true"] { background: var(--triangle); border-color: var(--triangle); color: #fff; }
.ft-shape-btn[data-shape="square"][aria-pressed="true"] { background: var(--square); border-color: var(--square); color: #fff; }
.ft-shape-btn[data-shape="star"][aria-pressed="true"] { background: var(--star); border-color: var(--star); color: #fff; }

.ft-section-label {
  padding: 8px 12px;
  font-weight: 800;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--line-soft);
}

.ft-section-label svg {
  width: 16px;
  height: 16px;
}

.ft-section-label.ft-s-circle { color: var(--circle); background: var(--circle-soft); }
.ft-section-label.ft-s-triangle { color: var(--triangle); background: var(--triangle-soft); }
.ft-section-label.ft-s-square { color: var(--square); background: var(--square-soft); }
.ft-section-label.ft-s-star { color: var(--star); background: var(--star-soft); }
.ft-section-label.ft-s-none { color: var(--muted); background: #faf6f0; }

.ft-grid-foot {
  display: grid;
  grid-template-columns: var(--cols);
  background: #faf6f0;
  border-top: 2px solid var(--line);
  font-weight: 700;
  color: var(--muted);
  font-size: 0.9rem;
}

.ft-grid-foot .ft-cell {
  min-height: 44px;
  white-space: nowrap;
}

.ft-grid-foot .ft-foot-label {
  justify-content: flex-end;
  padding-right: 12px;
}

.ft-hint {
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.9rem;
}

/* ---- Group cards ---- */
.ft-groups-panel h2,
.ft-notes-panel h2 {
  font-size: 1.15rem;
  margin-bottom: 12px;
}

/* Every shape group sits side by side in one row; "Not grouped yet"
   gets its own row underneath. Cards are only as tall as their names. */
.ft-group-cards {
  --n: 3;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  align-items: start;
  gap: 12px;
}

.ft-group-card.ft-c-none {
  grid-column: 1 / -1;
}

.ft-group-card {
  border-radius: 12px;
  border: 2px solid var(--line);
  padding: 12px 14px;
  min-height: 120px;
  container-type: inline-size; /* lets the heading react to the card's own width */
}

/* Narrow card (4 groups on an iPad, 3 on a phone): the heading splits into two
   lines - shape and count on top, group name underneath. Same sizes, just stacked.
   Printouts keep their one-line headings. */
@container (max-width: 190px) {
  .ft-app:not(.ft-print-mode) .ft-group-card h3 {
    display: grid;
    grid-template-columns: auto 1fr auto;
    row-gap: 4px;
  }

  .ft-app:not(.ft-print-mode) .ft-group-card h3 .ft-count {
    grid-column: 3;
    grid-row: 1;
  }

  .ft-app:not(.ft-print-mode) .ft-group-card h3 .ft-group-title {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  /* The purpose tag ("Enrichment") was wider than a narrow card. Smaller text,
     and the ▾ is dropped to make room ("+ Set purpose" may take two lines). */
  .ft-app:not(.ft-print-mode) .ft-group-card .ft-purpose-btn {
    max-width: 100%;
    min-height: 26px;
    padding: 3px 7px;
    font-size: 0.68rem;
  }

  .ft-app:not(.ft-print-mode) .ft-group-card .ft-caret {
    display: none;
  }

  /* Smaller bullet indent so names have more room in a narrow card */
  .ft-app:not(.ft-print-mode) .ft-group-card ul {
    padding-left: 12px;
  }
}

.ft-group-card h3 {
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
}

.ft-group-card h3 svg {
  width: 20px;
  height: 20px;
  flex: none; /* never squish the shape when a long name wraps */
}

.ft-group-title {
  min-width: 0;
}

.ft-group-rename {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  border: 0;
  border-bottom: 1.5px dashed transparent;
  background: none;
  padding: 2px 0;
  color: inherit;
  font: inherit;
  font-weight: 800;
  text-align: left;
  cursor: text;
}

.ft-group-rename:hover,
.ft-group-rename:focus-visible {
  border-bottom-color: currentColor;
  outline: none;
}

.ft-edit-icon {
  font-size: 0.85em;
  opacity: 0.55;
}

.ft-group-name-input {
  min-width: 0;
  flex: 1;
  font: inherit;
  font-weight: 800;
  color: inherit;
  padding: 4px 8px;
  border: 1.5px solid currentColor;
  border-radius: 8px;
  background: #fff;
}

.ft-group-card .ft-count {
  margin-left: auto;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
  background: #fff;
}

.ft-group-card ul {
  margin: 0;
  padding-left: 20px;
  line-height: 1.6;
  /* A name too long for a narrow card breaks onto the next line instead of
     running past the edge. Names that already fit are never split. */
  overflow-wrap: anywhere;
}

.ft-group-card .ft-empty {
  color: var(--muted);
  font-size: 0.9rem;
  font-style: italic;
}

.ft-group-card.ft-c-circle { border-color: var(--circle); background: var(--circle-soft); }
.ft-group-card.ft-c-circle h3 { color: var(--circle); }
.ft-group-card.ft-c-triangle { border-color: var(--triangle); background: var(--triangle-soft); }
.ft-group-card.ft-c-triangle h3 { color: var(--triangle); }
.ft-group-card.ft-c-square { border-color: var(--square); background: var(--square-soft); }
.ft-group-card.ft-c-square h3 { color: var(--square); }
.ft-group-card.ft-c-star { border-color: var(--star); background: var(--star-soft); }
.ft-group-card.ft-c-star h3 { color: var(--star); }
.ft-group-card.ft-c-none { background: #faf6f0; }
.ft-group-card.ft-c-none h3 { color: var(--muted); }

.ft-danger-zone {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

/* ---- Tablets (iPad portrait, Surface split screen) ---- */
@container ftroot (max-width: 820px) {
  .ft-grid {
    --lead: 38px minmax(0, 2fr) repeat(var(--checks), minmax(0, 1fr));
    --note-w: 52px;
    --shape-w: 44px;
    --shape-gap: 4px;
    --group-pad: 14px;
  }
  .ft-hc { font-size: 0.78rem; }
  .ft-opp-title { font-size: 0.8rem; padding: 12px 3px; }
  .ft-shape-btn { height: 44px; }
  .ft-shape-btn svg { width: 22px; height: 22px; }
  .ft-name-input { padding: 16px 8px; font-size: 1rem; }
  .ft-grid-foot { font-size: 0.8rem; }
}

/* ---- Phones ---- */
@container ftroot (max-width: 600px) {
  .ft-grid {
    --lead: 22px minmax(80px, 1fr) repeat(var(--checks), var(--check-w, 38px));
    --note-w: 36px;
    --shape-w: 30px;
    --shape-gap: 2px;
    --group-pad: 8px;
  }
  .ft-layout { padding: 10px 8px 40px; gap: 10px; }
  .ft-panel { padding: 8px; }
  
  
  
  
  /* One item under another. No wrapping, and the week strip sizes to its own
     content: in a stacked toolbar, iPhone Safari read "wrap" plus the strip's
     100% size as "start a new column", which pushed the week off to the side. */
  .ft-toolbar { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
  .ft-week { flex: 0 0 auto; width: 100%; }
  /* The date box can't fit beside the arrows on a phone - give it its own full row. */
  .ft-week-jump { margin-left: 0; flex: 1 1 100%; }
  /* With one check column, its − / + buttons are wider than the column and ran
     into the Notes heading - a single column gets just enough room for them. */
  .ft-grid[data-checks="1"] { --check-w: 52px; }
  .ft-hc-note { padding-left: 0; padding-right: 0; }
  .ft-subject-toggle { align-self: center; }
  .ft-sheet-picker select { flex: 1 1 100%; min-width: 0; }
  .ft-sheet-picker .ft-btn { flex: 1 1 0; }
  .ft-sheet-name { font-size: 1.05rem; }

  .ft-hc { font-size: 0.66rem; letter-spacing: 0; padding: 8px 2px; text-align: center; }
  .ft-hc-name { padding-left: 6px; }
  .ft-opp-title { font-size: 0.64rem; padding: 8px 1px; }
  .ft-cell { min-height: 48px; }
  .ft-name-input { padding: 13px 4px 13px 6px; font-size: 0.88rem; }
  .ft-check { width: 32px; height: 32px; border-radius: 8px; font-size: 1.1rem; }
  /* 3 or more check columns on a phone: slimmer columns so names (and the Notes
     column) keep room. If it still can't fit (5-6 columns), the table scrolls
     sideways inside its box. */
  .ft-grid[data-checks="3"], .ft-grid[data-checks="4"], .ft-grid[data-checks="5"], .ft-grid[data-checks="6"] { --check-w: 32px; }
  .ft-grid[data-checks="3"] .ft-check, .ft-grid[data-checks="4"] .ft-check, .ft-grid[data-checks="5"] .ft-check, .ft-grid[data-checks="6"] .ft-check { width: 27px; height: 30px; font-size: 1rem; }
  /* ...and slightly smaller check titles, so "Check 1" isn't split as "Chec / k 1". */
  .ft-grid[data-checks="3"] .ft-opp-title, .ft-grid[data-checks="4"] .ft-opp-title, .ft-grid[data-checks="5"] .ft-opp-title, .ft-grid[data-checks="6"] .ft-opp-title { font-size: 0.58rem; }
  .ft-shape-btn { height: 34px; border-radius: 8px; }
  .ft-grid[data-groups="4"] { --shape-w: 27px; }
  .ft-count-btn { width: 22px; height: 22px; font-size: 0.85rem; }
  .ft-hc-opp { gap: 4px; padding: 6px 4px; }
  .ft-shape-btn svg { width: 16px; height: 16px; }
  .ft-section-label { font-size: 0.72rem; padding: 6px 8px; }
  .ft-grid-foot { font-size: 0.66rem; }
  .ft-grid-foot .ft-foot-label { padding-right: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .ft-row { transition: none !important; }
}

/* ---- In-app "Are you sure?" box ---- */
.ft-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(47, 37, 31, 0.45);
}

.ft-modal-backdrop[hidden] {
  display: none;
}

.ft-modal {
  width: min(420px, 100%);
  background: var(--panel);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 12px 40px rgba(47, 37, 31, 0.25);
}

.ft-modal p {
  font-size: 1.05rem;
  line-height: 1.45;
  margin-bottom: 18px;
}

.ft-note-modal h3 {
  margin: 0 0 10px;
  font-size: 1.1rem;
}

.ft-note-modal textarea {
  display: block;
  width: 100%;
  min-height: 110px;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
  resize: vertical;
}

.ft-note-modal textarea:focus {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

.ft-modal p.ft-note-fine {
  margin: 6px 0 14px;
  font-size: 0.8rem;
  color: var(--muted);
}

.ft-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

/* ---- Print button + print-only header ---- */
.ft-btn-print {
  white-space: nowrap;
}

.ft-print-header,
.ft-print-text {
  display: none;
}

/* ---- Paper version ----
   All paper styles hang off .ft-print-mode, which is only on the copy of the
   sheet placed in AdminLens's print area. The tracker measures that copy at
   paper width and shrinks it just enough to fit ONE letter page with 0.75"
   margins (7" x 9.5"). The named page keeps these margins from affecting any
   other AdminLens printout. */
@page ft-print-page {
  size: letter portrait;
  margin: 0.75in;
}

.ft-print-doc {
  page: ft-print-page;
}

/* Keep AdminLens's page background from peeking out under the sheet
   (only while a tracker sheet is the thing being printed). */
@media print {
  body:has(.ft-print-doc) {
    background: #fff;
  }
}

.ft-print-doc,
.ft-print-doc * {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.ft-print-mode .ft-grid {
  --lead: 26px minmax(0, 2fr) repeat(var(--checks), minmax(0, 1fr));
  --shape-w: 22px;
  --shape-gap: 3px;
  --group-pad: 10px;
}

.ft-print-mode {
  background: #fff;
}

.ft-print-mode .ft-toolbar,
.ft-print-mode .ft-danger-zone,
.ft-print-mode .ft-sheet-head,
.ft-print-mode .ft-hint,
.ft-print-mode .ft-modal-backdrop,
.ft-print-mode .ft-group-count,
.ft-print-mode .ft-edit-icon,
.ft-print-mode .ft-row[data-id="blank"],
.ft-print-mode .ft-name-input,
.ft-print-mode .ft-opp-title {
  display: none !important;
}

.ft-print-mode .ft-layout {
  max-width: none;
  margin: 0;
  padding: 0;
  gap: 10px;
}

.ft-print-mode .ft-panel {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.ft-print-mode .ft-print-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
  margin-bottom: 8px;
  border-bottom: 2px solid var(--brand);
}

.ft-print-mode .ft-print-header img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.ft-print-mode .ft-print-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--brand);
}

.ft-print-mode .ft-print-meta {
  font-size: 0.7rem;
  color: var(--muted);
}

.ft-print-mode .ft-grid-scroll {
  overflow: visible;
  border-radius: 6px;
}

.ft-print-mode .ft-hc {
  font-size: 0.6rem;
  padding: 4px 3px;
  letter-spacing: 0.02em;
}

.ft-print-mode .ft-hc-opp {
  padding: 4px;
}

.ft-print-mode .ft-print-text {
  display: block;
  width: 100%;
  overflow-wrap: break-word;
}

.ft-print-mode .ft-name-cell .ft-print-text {
  padding: 2px 6px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
}

.ft-print-mode .ft-opp-title-wrap {
  border-right: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  min-height: 24px;
}

.ft-print-mode .ft-opp-title-wrap .ft-print-text {
  padding: 3px 2px;
  text-align: center;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.15;
}

.ft-print-mode .ft-cell {
  min-height: 22px;
}

.ft-print-mode .ft-num {
  font-size: 0.72rem;
}

.ft-print-mode .ft-check {
  width: 16px !important;
  height: 16px !important;
  border-width: 1.5px;
  border-radius: 4px;
  font-size: 0.7rem !important;
}

.ft-print-mode .ft-shape-btn {
  height: 17px;
  border-width: 1.5px;
  border-radius: 4px;
}

.ft-print-mode .ft-shape-btn svg {
  width: 10px;
  height: 10px;
}

/* Fade the shapes that weren't picked so the chosen group stands out */
.ft-print-mode .ft-shape-btn[aria-pressed="false"] {
  opacity: 0.25;
}

.ft-print-mode .ft-section-label {
  font-size: 0.6rem;
  padding: 2px 8px;
}

.ft-print-mode .ft-section-label svg {
  width: 10px;
  height: 10px;
}

.ft-print-mode .ft-grid-foot {
  font-size: 0.66rem;
}

.ft-print-mode .ft-grid-foot .ft-cell {
  min-height: 20px;
}

.ft-print-mode .ft-groups-panel h2 {
  font-size: 0.85rem;
  margin-bottom: 5px;
}

.ft-print-mode .ft-group-cards {
  gap: 6px;
}

.ft-print-mode .ft-group-card {
  min-height: 0;
  padding: 5px 8px;
  border-width: 1.5px;
  border-radius: 8px;
  font-size: 0.72rem;
}

.ft-print-mode .ft-group-card h3 {
  font-size: 0.72rem;
  margin-bottom: 3px;
  gap: 5px;
}

.ft-print-mode .ft-group-card h3 svg {
  width: 12px;
  height: 12px;
}

.ft-print-mode .ft-group-card .ft-count {
  font-size: 0.66rem;
  padding: 0 7px;
}

.ft-print-mode .ft-group-card ul {
  padding-left: 14px;
  line-height: 1.3;
}

.ft-print-mode .ft-group-card .ft-empty {
  font-size: 0.7rem;
}

.ft-print-mode .ft-row,
.ft-print-mode .ft-section-label,
.ft-print-mode .ft-group-card {
  break-inside: avoid;
}

.ft-date-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--muted);
}

.ft-date-field input {
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.ft-grid-scroll {
  overflow-x: auto;
}

/* ---- School-Wide Lens: Observations | Formative data switch ---- */
.ft-lens-switch {
  grid-column: 1 / -1;
  display: inline-flex;
  justify-self: start;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--panel, #fff);
  border: 1px solid var(--line, #ddcec0);
  margin-bottom: 4px;
}

.ft-lens-switch button {
  all: revert;
  font: inherit;
  font-weight: 700;
  border: 0;
  border-radius: 999px;
  padding: 10px 18px;
  min-height: 44px;
  background: transparent;
  color: var(--muted, #6f6258);
  cursor: pointer;
}

.ft-lens-switch button.ft-on {
  background: color-mix(in srgb, var(--brand) 86%, #000);
  color: #fff;
}

/* ---- Leader dashboard (School-Wide Lens > Formative data) ----
   Status and purpose colors are fixed for every school; they carry meaning. */
.ft-dash {
  grid-column: 1 / -1;
  min-width: 0;
}

.ft-dash .ft-layout {
  padding-top: 4px;
}

.ft-dfilters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ft-dfilter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--muted);
}

.ft-dfilter select {
  min-height: 44px;
  min-width: 0;
}

.ft-dtiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.ft-dtile {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
}

.ft-dlabel {
  color: var(--muted);
  font-size: 0.9rem;
}

.ft-dbig {
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.2;
}

.ft-dsmall,
.ft-dnote {
  color: var(--muted);
  font-size: 0.85rem;
}

.ft-dhead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 10px;
}

.ft-dhead h3 {
  margin: 0;
  font-size: 1.05rem;
}

.ft-dgrid {
  display: grid;
  grid-template-columns: minmax(110px, 1.4fr) repeat(var(--days), minmax(10px, 1fr));
  gap: 4px 4px;
  align-items: center;
}

.ft-dday {
  text-align: center;
  font-size: 0.72rem;
  color: var(--muted);
}

.ft-dname {
  font-size: 0.88rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.ft-dgrade {
  color: var(--muted);
  font-weight: 400;
}

.ft-dcell {
  display: block;
  height: 26px;
  border-radius: 5px;
  border: 0;
  padding: 0;
}

button.ft-dcell {
  cursor: pointer;
}

button.ft-dcell:focus-visible {
  outline: 3px solid var(--text);
  outline-offset: 1px;
}

.ft-dcell-none {
  background: #f3ede6;
  border: 1px solid #e6dccf;
}

.ft-dcell-started {
  background: #fff;
  border: 2px solid var(--brand-button);
}

.ft-dgroups {
  grid-column: 2 / -1;
  margin: -1px 0 8px;
}

.ft-dpills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.ft-dtile .ft-dpills {
  margin-top: 6px;
}

.ft-dgroups .ft-dpills {
  margin-top: 0;
}

.ft-dpill {
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.ft-dpill-reteach { background: #f7dcd9; color: #b33632; }
.ft-dpill-practice { background: #fbecd4; color: #8a5a09; }
.ft-dpill-enrichment { background: #e3f3e8; color: #2f7d4f; }
.ft-dpill-unset { background: #eee6dd; color: var(--muted); }

.ft-dlegend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
  font-size: 0.8rem;
  color: var(--muted);
}

.ft-dlegend i {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  vertical-align: -1px;
  margin-right: 4px;
}

.ft-dwatch {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ft-dwatch span {
  background: #f7dcd9;
  color: #7d2421;
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 0.88rem;
}

@container ftroot (max-width: 600px) {
  .ft-dtiles { grid-template-columns: minmax(0, 1fr); }
  .ft-dgrid { grid-template-columns: minmax(80px, 1.2fr) repeat(var(--days), minmax(8px, 1fr)); gap: 3px; }
  .ft-dcell { height: 22px; }
}

/* ---- One sheet, view only (opened from the leader dashboard) ----
   Reuses the teacher's sheet styles. Names and check titles show as plain
   text (the same text the paper copy uses) instead of typing boxes. */
.ft-sheetview {
  grid-column: 1 / -1;
  min-width: 0;
}

.ft-sv-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
}

.ft-sv-bar .ft-btn {
  cursor: pointer;
}

.ft-sv-head {
  margin-bottom: 14px;
}

.ft-sv-head h2 {
  font-size: 1.3rem;
  color: var(--text);
  overflow-wrap: break-word;
}

.ft-sv-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.95rem;
}

.ft-sv-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #faf6f0;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.ft-sheetview .ft-print-text {
  display: block;
  width: 100%;
  overflow-wrap: break-word;
}

.ft-sheetview .ft-name-cell .ft-print-text {
  padding: 16px 12px;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
}

.ft-sheetview .ft-opp-title-wrap {
  border-right: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
}

.ft-sheetview .ft-opp-title-wrap .ft-print-text {
  padding: 12px 6px;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
}

.ft-sheetview .ft-purpose-btn {
  display: inline-block;
}

/* Same text sizes as the teacher's boxes at each screen width. */
@container ftroot (max-width: 820px) {
  .ft-sheetview .ft-name-cell .ft-print-text { padding: 16px 8px; font-size: 1rem; }
  .ft-sheetview .ft-opp-title-wrap .ft-print-text { font-size: 0.8rem; padding: 12px 3px; }
}

@container ftroot (max-width: 600px) {
  .ft-sheetview .ft-name-cell .ft-print-text { padding: 13px 4px 13px 6px; font-size: 0.88rem; }
  .ft-sheetview .ft-opp-title-wrap .ft-print-text { font-size: 0.64rem; padding: 8px 1px; }
}

/* ---- Notes (one per student per sheet) ----
   Filled in the school's button color once a student has a note. */
.ft-note-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 2px solid var(--line);
  background: #fff;
  color: #bdb0a3;
  display: grid;
  place-items: center;
  padding: 0;
}

.ft-note-btn svg {
  width: 20px;
  height: 20px;
}

.ft-note-btn[aria-pressed="true"] {
  background: var(--brand-button);
  border-color: var(--brand-button);
  color: #fff;
}

button.ft-note-btn:not(:disabled) {
  cursor: pointer;
}

.ft-note-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.ft-notes-list {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
  line-height: 1.4;
  overflow-wrap: break-word;
}

@container ftroot (max-width: 600px) {
  .ft-note-btn { width: 30px; height: 32px; border-radius: 8px; }
  .ft-note-btn svg { width: 16px; height: 16px; }
}

/* On paper the notes print as a list under the groups instead of a column. */
.ft-print-mode .ft-grid {
  --note-w: 0px;
}

.ft-print-mode .ft-hc-note,
.ft-print-mode .ft-note-cell {
  visibility: hidden;
  overflow: hidden;
  padding: 0;
  border: 0;
}

.ft-print-mode .ft-notes-panel h2 {
  font-size: 0.85rem;
  margin-bottom: 4px;
}

.ft-print-mode .ft-notes-list {
  gap: 2px;
  font-size: 0.68rem;
  line-height: 1.25;
}

/* ---- Drag to reorder names (only when "Sort names by group" is off) ----
   The student's number is the handle: number on top, six dots underneath. */
.ft-grip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  height: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 800;
  cursor: grab;
  touch-action: none; /* a finger on the handle drags instead of scrolling */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.ft-grip svg {
  width: 10px;
  height: 14px;
  fill: #b9aa9b;
}

.ft-grip:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

.ft-row.ft-dragging {
  z-index: 5;
  box-shadow: 0 8px 22px rgba(47, 37, 31, 0.25);
  cursor: grabbing;
}

.ft-sorting {
  user-select: none;
  -webkit-user-select: none;
}

.ft-print-mode .ft-grip {
  min-height: 0;
}

.ft-print-mode .ft-grip svg {
  display: none;
}