/* ============================================================
   AUTOMATA — Psychoeducational Report Automation
   Design system
   ============================================================ */

:root {
  /* Brand + text */
  --navy: #16305a;
  --navy-deep: #0e1f3d;
  --blue: #2b6cb0;
  --blue-bright: #3182ce;
  --blue-soft: #ebf3fb;
  --ink: #1f2937;
  --muted: #6b7280;
  --faint: #9aa3af;

  /* Surfaces */
  --line: #e3e8ef;
  --line-soft: #eef2f7;
  --bg: #f4f6fa;
  --card: #ffffff;
  --sunken: #f8fafc;

  /* Semantic */
  --ok: #1f7a4d;
  --ok-soft: #e8f6ee;
  --warn: #b45309;
  --warn-soft: #fdf3e3;
  --danger: #c1272d;
  --danger-soft: #fdeeee;

  /* Depth */
  --shadow-xs: 0 1px 2px rgba(16, 32, 61, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 32, 61, 0.08), 0 1px 2px rgba(16, 32, 61, 0.04);
  --shadow-md: 0 4px 14px rgba(16, 32, 61, 0.08);
  --shadow-lg: 0 12px 32px rgba(16, 32, 61, 0.12);

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(43, 108, 176, 0.18); }

/* Scrollbars — thin and unobtrusive */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d3dae4; border-radius: 6px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #b9c3d1; background-clip: content-box; border: 3px solid transparent; }

/* ---------- Utilities ---------- */

.hidden { display: none !important; }
.muted { color: var(--muted); font-size: 13px; }
.eyebrow {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 700;
}
code {
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
  background: var(--blue-soft);
  color: var(--navy);
  padding: 1px 5px;
  border-radius: 4px;
}

/* ---------- Shell ---------- */

.app-shell {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr) 384px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
  overflow: hidden;
}

.app-banner {
  grid-column: 1 / -1;
  position: sticky;
  top: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-height: 72px;
  padding: 10px 22px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 18px rgba(16, 32, 61, 0.06);
}
.app-banner-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  max-width: calc(50% - 140px);
  z-index: 1;
}
.app-banner-logo {
  display: block;
  flex: 0 0 auto;
  height: 52px;
  width: auto;
  max-width: 72px;
  object-fit: contain;
}
.app-banner-brand {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}
.app-banner-name {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  line-height: 1.1;
  /* Vermillion ombré — same family as the assembling A on the left. */
  color: #c1272d;
  background: linear-gradient(180deg, #ff7a52 0%, #e34234 52%, #a81c27 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.app-banner-identity {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.app-banner-identity strong {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-banner-sid {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.app-banner-sid:empty,
.app-banner-sid[hidden] { display: none; }
.app-banner-product {
  margin: 3px 0 0;
  max-width: none;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  line-height: 1.35;
}

.app-footer {
  grid-column: 1 / -1;
  grid-row: 3;
  position: sticky;
  bottom: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px 22px;
  padding: 8px 22px;
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 18px rgba(16, 32, 61, 0.06);
}
.app-footer-logo {
  display: block;
  height: 48px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  object-position: left center;
}
.app-footer-copy {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  justify-self: center;
}
.app-footer #contactBtn {
  justify-self: end;
  padding: 6px 14px;
}

.picker, .ready-pane {
  background: var(--card);
  padding: 20px;
  overflow: auto;
}
.picker {
  grid-column: 1;
  grid-row: 2;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, #fdfeff 0%, var(--card) 180px);
  overflow-x: hidden;
  overflow-y: auto;
}
.board {
  grid-column: 2;
  grid-row: 2;
}
.ready-pane {
  grid-column: 3;
  grid-row: 2;
  border-left: 1px solid var(--line);
}

/* ---------- Brand ---------- */

.picker .brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
  text-align: center;
}
.picker .brand-logo {
  display: block;
  height: 72px;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  object-fit: contain;
  object-position: center;
}

.pane-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.pane-head h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.count-chip {
  font-size: 11px;
  font-weight: 700;
  color: var(--blue);
  background: var(--blue-soft);
  border-radius: 20px;
  padding: 2px 9px;
}

.ready-pane h2, .board-header h2 { margin: 4px 0 12px; color: var(--navy); font-size: 20px; letter-spacing: -0.01em; }

/* ---------- Buttons ---------- */

button {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--r-sm);
  padding: 8px 14px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--navy);
  text-align: center;
  box-shadow: var(--shadow-xs);
  transition: background 0.14s var(--ease), border-color 0.14s var(--ease),
              box-shadow 0.14s var(--ease), transform 0.08s var(--ease);
}
button:hover:not(:disabled) {
  cursor: pointer;
  border-color: #c9d3e0;
}
button:active:not(:disabled) {
  transform: translateY(1px) scale(0.97);
  box-shadow: none;
}
button:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 2px; }
button:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.primary-btn, .merge-btn {
  width: 100%;
  background: linear-gradient(180deg, var(--blue-bright), var(--blue));
  color: #fff;
  border: 1px solid rgba(15, 47, 90, 0.28);
  box-shadow: var(--shadow-sm);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.primary-btn:hover, .merge-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #3c8ddc, #2a629f);
  border-color: rgba(15, 47, 90, 0.4);
  box-shadow: var(--shadow-md);
}
.primary-btn { margin-bottom: 14px; }
.primary-btn.inline { width: auto; margin: 0; }

.merge-doc-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0 0;
}
.merge-doc-bar a {
  display: none;
}
.merge-doc-bar button {
  flex: 0 0 auto;
  width: auto;
  min-width: 108px;
  margin: 0;
}
#mergeDocEmpty { display: none; }

.merge-btn {
  padding: 11px 12px;
  font-size: 15px;
  font-weight: 800;
  border-radius: var(--r-md);
  margin: 0 auto 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  width: 58%;
  max-width: 148px;
  min-height: 44px;
}
.merge-btn:disabled {
  background: #dfe5ec;
  color: #8b95a4;
  border-color: #d3dae4;
  box-shadow: none;
  transform: none;
}

.text-btn {
  background: transparent;
  color: var(--blue);
  border: 0;
  box-shadow: none;
  padding: 7px 0;
  overflow: visible;
}
.text-btn:hover { background: transparent; color: var(--navy); text-decoration: underline; }

.danger-btn { color: var(--danger); }
.danger-btn:hover { background: var(--danger-soft); border-color: #f0c4c4; }

.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-row > button { flex: 1 1 auto; }

/* ---------- Student picker ---------- */

.student-picker { margin: 0 0 16px; }
.student-select {
  position: relative;
  width: 100%;
}
.student-select-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  text-align: left;
  padding: 10px 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xs);
}
.student-select-btn .student-select-name {
  flex: 1;
  min-width: 0;
  white-space: normal;
}
.student-select-btn[aria-expanded="true"] {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(43, 108, 176, 0.1);
}
.student-select-name {
  display: block;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.student-select-sid {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-top: 1px;
}
.student-select-sid.hidden { display: none; }
.student-select-caret {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: -3px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
}
.student-select-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 30;
  max-height: 280px;
  overflow: auto;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}
.student-select-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  border-radius: var(--r-sm);
  box-shadow: none;
}
.student-select-option:hover { background: #eef3f9; }
.student-select-option.active { background: var(--blue-soft); }
.student-select-option.is-new {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--blue);
}
.student-select-option .student-select-name {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}
.student-select-list { display: flex; flex-direction: column; }
.student-select-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}
.student-select-tools .danger-btn { flex: 0 0 auto; }
/* Kevin, 2026-09-11: "REMOVE THE 52 BELOW THE PICKER - YOU CAN PUT THAT IN THE
   DROPDOWN AT THE TOP SOMEWHERE REAL SMALL." A quiet count above the list, not
   a chip taking up a line of its own under the picker. */
.student-select-count {
  display: block;
  padding: 5px 10px 3px;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--faint);
  text-align: right;
}

.new-student-form {
  margin: 10px 0 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--sunken);
  box-shadow: var(--shadow-xs);
}
.new-student-form label { font-size: 11.5px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
.new-student-form input,
.new-student-form select { padding: 8px 10px; margin-bottom: 10px; font-size: 13px; }
.form-actions { display: flex; gap: 8px; }

.referral-fields { display: flex; flex-direction: column; }
.referral-fields select,
.referral-fields input[type="text"],
.referral-fields input[type="date"],
.referral-fields textarea {
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 10px;
  font-size: 13px;
  font-family: inherit;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--ink);
}
.referral-fields select:focus,
.referral-fields input[type="text"]:focus,
.referral-fields input[type="date"]:focus,
.referral-fields textarea:focus {
  outline: none;
  border-color: var(--blue-bright);
  box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.14);
}
.student-info .referral-fields { margin-top: 12px; }
.student-demo-fields .action-row { margin: 0 0 12px; }
/* Kevin, 2026-09-07: AP IN + Notify Team on the left, ELL (+ RFEP date) on the
   right — one row, same heights, symmetrical. */
.demo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px 18px;
  margin-bottom: 4px;
}
.demo-field { display: flex; flex-direction: column; min-width: 0; }
.demo-field > label { margin-bottom: 5px; }
.demo-field select,
.demo-field input.date-input { margin-bottom: 0; height: 36px; }
.demo-field select { width: auto; min-width: 118px; flex: 0 0 auto; }
.ell-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
}
.ell-controls .inline-label {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
#ellFields.is-inactive select {
  color: var(--faint);
  background: #eef1f5;
  border-color: var(--line);
  cursor: not-allowed;
  opacity: 1;
}
.ap-in-row { display: flex; flex-direction: column; margin-bottom: 0; }
.ap-in-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
}
.ap-in-controls input[type="date"] {
  flex: 1 1 auto;
  margin-bottom: 0;
  min-width: 0;
}
/* The short m/d/yy box — enough for 10/12/26, no more. */
input.date-input.date-short {
  flex: 0 0 112px;
  width: 112px;
  max-width: 112px;
  font-variant-numeric: tabular-nums;
}
.notify-team-btn {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  height: 36px;
  padding: 0 14px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  background: linear-gradient(180deg, var(--blue-bright), var(--blue));
  color: #fff;
  border: 1px solid rgba(15, 47, 90, 0.28);
  box-shadow: var(--shadow-xs);
}
.notify-team-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #3c8ddc, #2a629f);
  border-color: rgba(15, 47, 90, 0.4);
}
.notify-team-btn:disabled {
  opacity: 0.45;
}
.student-demo-fields .survey-dates {
  align-items: flex-start;
  text-align: left;
  margin: 6px 0 0;
}
.student-demo-fields .survey-dates:empty { display: none; }
.student-demo-fields .toggle-row { margin: 4px 0 12px; }
.student-select-option .student-select-name.is-ap-yes,
.student-select-btn .student-select-name.is-ap-yes { color: var(--ok); }
.student-select-option .student-select-name.is-ap-no,
.student-select-btn .student-select-name.is-ap-no { color: var(--danger); }

/* ---------- Student list ---------- */

.student-list { display: flex; flex-direction: column; gap: 7px; }

.student-card {
  position: relative;
  text-align: left;
  padding: 11px 12px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  width: 100%;
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  cursor: pointer;
}
.student-card:hover { border-color: #c6d3e4; background: var(--blue-soft); }
.student-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: transparent;
  transition: background 0.14s var(--ease);
}
.student-card.active {
  border-color: var(--blue);
  background: #f7fbff;
  box-shadow: 0 0 0 3px rgba(43, 108, 176, 0.1);
}
.student-card.active::before { background: var(--blue); }
.student-card .name {
  display: block;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.student-card .meta {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 3px;
}
.student-card .mini-track {
  height: 3px;
  border-radius: 2px;
  background: var(--line);
  margin-top: 8px;
  overflow: hidden;
}
.student-card .mini-fill {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--blue);
  transition: width 0.35s var(--ease);
}
.student-card .mini-fill.complete { background: var(--ok); }

.list-empty {
  padding: 18px 12px;
  text-align: center;
  color: var(--faint);
  font-size: 12.5px;
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
}

/* ---------- Board ---------- */

.board { padding: 26px 30px 40px; overflow: auto; }

.empty-board {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--muted);
  text-align: center;
  padding: 40px;
}
.empty-board .empty-mark {
  width: 60px; height: 60px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  margin-bottom: 16px;
}
.empty-board h2 { color: var(--navy); margin: 0 0 6px; font-size: 20px; }
.empty-board p { margin: 0; max-width: 420px; font-size: 13.5px; }

.board-header, .section-title-row, .header-actions, .writer-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.board-header {
  align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}
.board-header h2 { margin: 3px 0 4px; font-size: 22px; }
.board-header p { margin: 0; font-size: 12.5px; }
.header-actions { flex: 0 0 auto; }

.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px 20px 20px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
}

.student-info .info-list {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 6px 14px;
  margin: 10px 0 0;
}
/* Kevin, 2026-09-07: demographics in two columns so the card is half as tall. */
.student-info .info-list-2col {
  grid-template-columns: 112px minmax(0, 1fr) 112px minmax(0, 1fr);
  gap: 5px 12px;
  align-items: center;
}
/* Kevin, 2026-09-11: "BIRTHDAY IN STUDENT DEMOGRAPHICS HAS A BOX AROUND IT
   WHERE THE REST OF THE DATA DOESNT." Birthday is the only value that parses as
   a date, so it was the only one getting the boxed treatment. It now reads like
   every other row; the tidy m/d/yy figures stay. */
.student-info .info-list dd .date-value {
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
  line-height: 1.3;
}
.student-info .info-list dt {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.student-info .info-list dd {
  margin: 0;
  font-size: 13.5px;
  color: var(--navy);
  word-break: break-word;
}
.sheet-sections {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ready-pane .sheet-sections {
  margin-top: 8px;
  width: 100%;
}
.sheet-sections h4 {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.section-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  padding: 5px 8px;
  border-radius: var(--r-sm);
}
.section-chip .count {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
}
.required-uploads {
  margin-top: 14px;
  padding: 12px 14px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--sunken);
}
.required-uploads h4 {
  margin: 0;
  font-size: 13px;
  color: var(--navy);
}
.required-uploads .muted { margin: 4px 0 8px; }
.required-uploads .ready-bar { margin: 0; }

.survey-panel .muted,
.uploads-panel .muted { line-height: 1.45; }
.survey-block {
  margin-top: 14px;
  padding: 14px 14px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, #ffffff, var(--sunken));
  box-shadow: var(--shadow-xs);
}
.survey-block-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.survey-block h4 {
  margin: 0;
  font-size: 13px;
  color: var(--navy);
  letter-spacing: 0.01em;
}
.survey-dates {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}
.survey-date {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.survey-date.is-sent { color: #8a6400; }
.survey-date.is-received { color: var(--ok); }
.survey-panel .action-row { margin-top: 8px; }
.teacher-roster {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}
.teacher-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  cursor: default;
}
.teacher-check.is-pending {
  background: var(--warn-soft);
  border-color: #f0d3a4;
}
.teacher-check.is-received {
  background: var(--ok-soft);
  border-color: #b7e0c7;
}
.teacher-check input {
  margin: 3px 0 0;
  width: 15px;
  height: 15px;
  accent-color: var(--ok);
  pointer-events: none;
}
.teacher-check .teacher-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.teacher-check .teacher-name {
  font-size: 13px;
  font-weight: 650;
  color: var(--navy);
}
.teacher-check.is-received .teacher-name { color: var(--ok); }
.teacher-check .teacher-sub {
  font-size: 11.5px;
  color: var(--muted);
}
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
}
.toggle-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.toggle-copy strong {
  font-size: 13px;
  color: var(--navy);
}
.toggle-switch {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 26px;
}
.toggle-switch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
/* The track and its knob are only paint. The real checkbox is the invisible
   input underneath, so neither may take a click: the knob is positioned and
   comes later in the markup, so without this it covers the input and the
   switch does nothing wherever the knob happens to be sitting. */
.toggle-track {
  display: block;
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: #d5dbe3;
  box-shadow: inset 0 1px 3px rgba(16, 32, 61, 0.18);
  transition: background 0.18s var(--ease);
  pointer-events: none;
}
.toggle-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(16, 32, 61, 0.28);
  transition: transform 0.18s var(--ease);
}
.toggle-switch input:checked + .toggle-track { background: var(--ok); }
.toggle-switch input:checked + .toggle-track::after { transform: translateX(18px); }
.toggle-switch input:focus-visible + .toggle-track {
  outline: 2px solid var(--blue-bright);
  outline-offset: 2px;
}

.uploads-panel .action-row { margin-top: 12px; }

.survey-channel-picker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--sunken);
}
.picker .brand,
.picker .student-picker,
.picker .new-student-form,
.picker .template-copy-bar {
  flex-shrink: 0;
}
.template-copy-bar {
  flex: 0 0 auto;
  margin: 8px 0 0;
}
.template-copy-bar .status-line { margin: 6px 0 0; }
.template-link-wrap {
  margin: 8px 0 0;
  font-size: 12.5px;
  word-break: break-all;
}
.template-link-wrap a { color: var(--blue); cursor: pointer; }
a { cursor: pointer; }
summary, .obs-item, .dropzone, .tests-given-row, .check-row, select {
  cursor: pointer;
}
.section-title-row { margin-bottom: 6px; }
.section-title-row h3 { margin: 0; font-size: 15px; color: var(--navy); }

.required-tags-panel .ready-bar {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
  max-height: 240px;
  overflow: auto;
}
/* Kevin, 2026-09-11: required tags in 4 or 5 columns in a scrolling window. */
.required-tags-panel .ready-bar.required-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 4px;
}
@media (max-width: 1250px) { .required-tags-panel .ready-bar.required-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.required-tags-panel .required-grid .ready-item { min-width: 0; border-radius: 6px; }
.required-tags-panel .required-grid .tag-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.required-tags-panel .section-title-row { display: flex; align-items: center; gap: 8px; }
.required-tags-panel .required-all-btn { margin-left: auto; }
.required-tags-panel .ready-item {
  margin: 0;
  padding: 4px 8px 4px 6px;
  border: 1px solid var(--line);
  background: var(--sunken);
  border-radius: 999px;
  font-size: 11.5px;
  gap: 6px;
}
.required-tags-panel .ready-item.is-done {
  background: var(--ok-soft);
  border-color: #b7e0c7;
  color: var(--ok);
}
.required-tags-panel .ready-item.is-done .tag-label {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--ok);
}
/* Kevin, 2026-09-07: red means "still owed"; the padlock means "Final Merge is
   waiting for this one". A subtest is red without a padlock. */
.required-tags-panel .ready-item.locks-merge:not(.is-done) {
  border-color: var(--warn, #c98a1a);
  box-shadow: inset 2px 0 0 var(--warn, #c98a1a);
}
.required-tags-panel .ready-item .lock-chip {
  margin-left: 2px;
  font-size: 9.5px;
  line-height: 1;
  opacity: 0.75;
}
/* Kevin, 2026-09-08: click a required chip to release its lock. Released
   chips go gray and read "released"; click again to require them. */
.required-tags-panel .ready-item.is-clickable { cursor: pointer; user-select: none; }
.required-tags-panel .ready-item.is-clickable:hover { border-color: var(--blue); }
.required-tags-panel .ready-item.is-clickable:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.required-tags-panel .ready-item.is-busy { opacity: 0.5; pointer-events: none; }
.required-tags-panel .ready-item.is-waived {
  background: #eef0f3;
  border-color: #d3d8e0;
  border-style: dashed;
  color: var(--faint);
  box-shadow: none;
}
.required-tags-panel .ready-item.is-waived .tick { opacity: 0.35; }
.required-tags-panel .ready-item.is-waived .tag-label {
  color: var(--faint);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: #b8c0cc;
}
.required-tags-panel .ready-item .waived-chip {
  margin-left: 2px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}
.required-tags-panel .ready-item .optional {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--faint);
}
.picker .observation-panel,
.picker .screening-panel,
.picker .rail-panel {
  flex: 0 0 auto;
  margin: 12px 0 0;
  padding: 10px 12px 12px;
  background: var(--sunken);
  position: relative;
  z-index: 1;
}
.picker .observation-panel h3,
.picker .screening-panel h3,
.picker .rail-panel h3 { font-size: 13px; }
.picker .observation-panel .muted,
.picker .screening-panel .muted,
.picker .rail-panel .muted { font-size: 12px; }
.picker .observation-panel .action-row,
.picker .screening-panel .action-row { margin-top: 10px; }
.picker .observation-panel .primary-btn,
.picker .screening-panel .primary-btn { margin-bottom: 0; }
.picker .observation-panel .status-line,
.picker .screening-panel .status-line,
.picker .rail-panel .status-line { margin-bottom: 0; }

/* Kevin, 2026-09-08: Templates and Caseload share one 2-column grid so
   Upload/Create, the link field, and Save/Upload are the same size and line up. */
.rail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "upload create"
    "link   save";
  gap: 8px;
  align-items: start;
}
.rail-pos-upload { grid-area: upload; }
.rail-pos-create { grid-area: create; }
.rail-pos-link { grid-area: link; }
.rail-pos-save { grid-area: save; }
.rail-twin,
.rail-grid .primary-btn,
.rail-grid select.primary-btn {
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 6px 8px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  white-space: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}
/* 2026-09-08: Connect is its own panel between Template and Caseload (see .rail-connect). */
#homeDetagPanel { display: block; min-width: 0; }
.rail-link {
  display: block;
  width: 100%;
  height: 40px;
  min-height: 40px;
  margin: 0;
  padding: 0 10px;
  font: inherit;
  font-size: 12.5px;
  border: 1px solid #d3dae4;
  border-radius: var(--r-sm);
  background: var(--sunken);
  color: var(--ink);
  box-sizing: border-box;
}
#caseloadFileUploadBtn {
  height: 40px;
  min-height: 40px;
  padding: 0 10px;
  white-space: nowrap;
  line-height: 38px;
}
select.rail-twin {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  height: 40px;
  line-height: 38px;
  padding: 0 26px 0 10px;
  white-space: nowrap;
  color: #fff;
  text-align: center;
  text-align-last: center;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffffff' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"), linear-gradient(135deg, var(--blue-bright), var(--blue));
  background-repeat: no-repeat, no-repeat;
  background-position: right 10px center, 0 0;
  background-size: 12px 8px, auto;
}
.rail-block {
  margin-top: 10px;
  padding: 10px 10px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
}
.rail-block + .rail-block { margin-top: 8px; }
.rail-block h4 {
  margin: 0 0 4px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--navy);
}
.rail-block .muted { margin: 0 0 6px; line-height: 1.4; }
.rail-actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 8px;
  margin: 0;
}
.rail-actions > button {
  width: 100%;
  min-height: 38px;
  margin: 0;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  white-space: normal;
}
.rail-panel .template-status,
.rail-panel .status-line { margin: 8px 0 0; }
.rail-panel .caseload-drive-picker { margin-top: 8px; }
.rail-panel .caseload-drive-picker select { width: 100%; margin: 4px 0 6px; }
.rail-panel .caseload-drive-picker button { width: 100%; margin: 0; }
.rail-panel .caseload-link-row { margin-top: 10px; }
.rail-panel .obs-home-preview { margin: 0 0 6px; }
.rail-panel .template-link-wrap { margin: 8px 0 0; }
#createCaseloadBtn:disabled,
#caseloadFileUploadBtn:disabled { opacity: 0.5; }

/* Observation, Adaptive and Screening — three equal cards across the board. */
.board-tools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
.board-tools .panel {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 16px 18px 16px;
}
.board-tools .panel h3 { font-size: 14px; }
.board-tools .panel .muted { font-size: 12.5px; }
.board-tools .panel .action-row { margin-top: auto; padding-top: 10px; }
.board-tools .panel .primary-btn {
  margin: 0;
  min-height: 44px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}
.board-tools .panel .status-line { margin-bottom: 0; }

.screening-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
  margin-top: 8px;
}
.screen-f {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
.screen-f-date { grid-column: 1 / -1; }
.screen-f select,
.screen-f input.date-input,
.screen-f input[type="date"] {
  width: 100%;
  max-width: none;
  flex: 1 1 auto;
  height: 36px;
  padding: 0 8px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--ink);
}
.screen-f select:focus,
.screen-f input.date-input:focus,
.screen-f input[type="date"]:focus {
  outline: none;
  border-color: var(--blue-bright);
  box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.14);
}

/* ---------- Dropzone + file tray ---------- */

.dropzone {
  position: relative;
  margin-top: 14px;
  border: 1.5px dashed #cbd5e1;
  border-radius: var(--r-md);
  background: var(--sunken);
  padding: 14px;
  transition: border-color 0.14s var(--ease), background 0.14s var(--ease);
}
.dropzone-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.dropzone.is-empty { padding: 18px 16px 20px; text-align: center; cursor: pointer; }
.dropzone.is-empty:hover,
.dropzone.drag-over {
  border-color: var(--blue);
  background: var(--blue-soft);
}
.dropzone:not(.is-empty) { cursor: copy; }
.dropzone-target {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  padding: 12px 16px;
  box-sizing: border-box;
}
.dropzone:not(.is-empty) .dropzone-target {
  min-height: 56px;
  margin-bottom: 12px;
  border: 1.5px dashed #c5d0dc;
  border-radius: var(--r-sm);
  background: #f4f7fb;
  cursor: pointer;
}
.dropzone:not(.is-empty) .dropzone-target:hover,
.dropzone.drag-over .dropzone-target {
  border-color: var(--blue);
  background: var(--blue-soft);
}
.dropzone-hint { color: var(--muted); font-size: 13px; margin: 0; line-height: 1.45; }
.dropzone-hint strong { color: var(--blue); font-weight: 700; }

/* Kevin, 2026-09-11: "MAKE THE THUMBNAILS SMALLER ON A HORIZONTALLY SCROLLING
   SUBWINDOW." One row of small cards that scrolls sideways inside its own box,
   so a case with twenty files no longer pushes the page down. */
.file-tray {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
}
.file-tray > .file-card { flex: 0 0 104px; scroll-snap-align: start; }
.file-tray::-webkit-scrollbar { height: 8px; }
.file-tray::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }
.file-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: box-shadow 0.14s var(--ease), transform 0.14s var(--ease);
}
.file-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.file-open {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: zoom-in;
  overflow: hidden;
}
.file-open:hover { background: transparent; }
.file-card:not(:has(img)) .file-open { cursor: pointer; }
.file-card.will-merge {
  border-color: var(--ok);
}
.file-card.will-merge:hover {
  box-shadow: var(--shadow-md);
}
.file-card img,
.file-open img {
  width: 100%;
  height: 72px;
  object-fit: cover;
  display: block;
  background: var(--line-soft);
}
.file-card.will-merge img {
  outline: 3px solid var(--ok);
  outline-offset: -3px;
}
.file-card.will-merge .will-merge-tag { color: var(--ok); }
.file-card .file-meta { padding: 9px 10px 10px; font-size: 12px; word-break: break-word; }
.file-kind {
  color: var(--blue);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}
/* Save a Copy and Remove left the cards (Kevin, 2026-09-11); the preview window
   still offers Open File and Save a Copy. */
.placeholder-file {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #eef2f7, #e2e8f0);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.drive-folder-row {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--muted);
}
.drive-folder-row a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
  margin-left: 6px;
}
.drive-folder-row a:hover { text-decoration: underline; }

.action-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

/* Kevin, 2026-09-07: the Caseload LINK row above Make Template. Green and
   solid when linked (the sheet is the source of truth); amber and dashed when
   unlinked (the app is the database). */
/* Kevin, 2026-09-08: the rail is three steps — Template (Select), Connect,
   Caseload (Link). One link box + one button per step, then a file icon that
   carries the word SELECTED / LINKED across it. The URL itself is not shown. */
.rail-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px;
  gap: 8px;
  align-items: stretch;
}
.rail-line .rail-link { min-width: 0; }
.rail-act,
.rail-line button.rail-act {
  width: 100%;
  height: 40px;
  min-height: 40px;
  margin: 0;
  padding: 0 8px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 38px;
  white-space: nowrap;
  box-sizing: border-box;
}
.rail-badge {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 10px 0 0;
  padding: 8px 0 6px;
  border: 0;
  background: transparent;
  cursor: default;
}
button.rail-badge { cursor: pointer; }
button.rail-badge:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 2px; border-radius: 8px; }
.rail-badge-icon {
  display: block;
  width: 58px;
  height: 76px;
  fill: #e6eaf0;
  stroke: #b7c0cc;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  transition: fill var(--dur-base, 180ms) var(--ease-out), stroke var(--dur-base, 180ms) var(--ease-out);
}
.rail-badge-icon .rail-badge-fold { fill: #f6f8fb; }
.rail-badge-icon .rail-badge-lines,
.rail-badge-icon .rail-badge-grid { fill: none; stroke-width: 2.2; }
.rail-badge-word {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #fff;
  background: var(--navy);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.28);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.85);
  transition: opacity var(--dur-base, 180ms) var(--ease-out), transform var(--dur-base, 180ms) var(--ease-out);
  pointer-events: none;
  white-space: nowrap;
}
/* Template: blue Doc once selected. */
.rail-badge[data-state="selected"] .rail-badge-icon { fill: var(--blue-bright, #3182ce); stroke: var(--blue, #2b6cb0); }
.rail-badge[data-state="selected"] .rail-badge-icon .rail-badge-fold { fill: #bfdbfe; }
.rail-badge[data-state="selected"] .rail-badge-icon .rail-badge-lines { stroke: #ffffff; }
.rail-badge[data-state="selected"] .rail-badge-word {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  background: var(--blue, #2b6cb0);
}
/* Caseload: green Sheet while linked, gray while unlinked. */
.caseload-link-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.caseload-link-row[data-linked="true"] .rail-badge-icon { fill: var(--ok, #2f855a); stroke: #276749; }
.caseload-link-row[data-linked="true"] .rail-badge-icon .rail-badge-fold { fill: #c6f6d5; }
.caseload-link-row[data-linked="true"] .rail-badge-icon .rail-badge-grid { stroke: #ffffff; }
.caseload-link-row[data-linked="true"] .rail-badge-word {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  background: var(--ok, #2f855a);
}
.caseload-link-row[data-linked="false"] .rail-badge-word {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  background: var(--warn, #b7791f);
}
.rail-badge-name {
  display: block;
  margin: 2px 0 0;
  font-size: 11.5px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.rail-badge-name:empty { display: none; }
.caseload-link-url {
  color: var(--blue);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.caseload-link-url:hover { text-decoration: underline; }
.caseload-link-url.is-off { color: var(--faint); text-decoration: line-through; }
.caseload-link-note { flex-basis: 100%; font-size: 11.5px; }

.caseload-linking-spinner {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: caseloadLinkSpin 700ms linear infinite;
  pointer-events: none;
}
@keyframes caseloadLinkSpin { to { transform: rotate(360deg); } }
.caseload-link-row.is-linking .caseload-linking-spinner { display: block; }
.caseload-link-row.is-linking .rail-badge-word {
  opacity: 1;
  transform: translate(-50%, -42%) scale(1);
  background: var(--blue, #2b6cb0);
}
.caseload-link-row.is-linking .rail-badge-icon {
  fill: var(--blue-bright, #3182ce);
  stroke: var(--blue, #2b6cb0);
}
#loadCaseloadUrlBtn.is-linking,
.rail-connect-btn.is-linking {
  letter-spacing: 0.02em;
}
#homeCaseloadPanel.is-linking #loadCaseloadUrlBtn {
  opacity: 1;
}

/* Connect — the one big button between Template and Caseload. */
.rail-connect { padding-top: 10px; padding-bottom: 10px; }
.rail-connect-btn {
  width: 100%;
  min-height: 44px;
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rail-connect-btn:disabled { opacity: 0.55; }
.rail-connect .rail-result { margin-top: 10px; }
.rail-result-link {
  cursor: pointer;
  color: var(--blue);
  font-weight: 600;
  text-overflow: ellipsis;
}
.rail-connect .rail-act { background: var(--card); color: var(--navy); border: 1px solid #c9d3e0; }
/* Kevin, 2026-09-10: Copy link sits directly under Connect, full width. */
.rail-connect-copy {
  width: 100%;
  margin-top: 8px;
  min-height: 34px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.rail-connect-copy:disabled { opacity: 0.5; }
.rail-connect .rail-act.is-copied { border-color: var(--ok); color: var(--ok); }

/* ---------- Right pane cards ---------- */

.template-box {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 15px 16px 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-xs);
}
.template-box h3 {
  margin: 0 0 6px;
  font-size: 13.5px;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 7px;
}
.template-box p.muted { font-size: 12px; line-height: 1.45; }
.template-box button { width: 100%; margin: 6px 0 0; }
.template-box .btn-row button { width: auto; }
.template-box input[type="url"],
.template-box input[type="text"],
.template-box input[type="password"] {
  width: 100%;
  margin: 9px 0 0;
  padding: 8px 10px;
  border: 1px solid #d3dae4;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  background: var(--sunken);
}
.template-box label { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); margin-top: 9px; }

input, textarea {
  font-family: inherit;
  transition: border-color 0.14s var(--ease), box-shadow 0.14s var(--ease), background 0.14s var(--ease);
}
input:focus, textarea:focus {
  outline: none;
  background: var(--card);
  border-color: var(--blue-bright);
  box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.14);
}

.template-status { font-size: 12px; margin: 8px 0 12px; }
.template-status.ok { color: var(--ok); font-weight: 600; }
.template-status.error { color: var(--danger); font-weight: 600; }
.caseload-check { font-size: 12px; line-height: 1.45; margin: 6px 0 10px; }
.caseload-check.ok { color: var(--ok); font-weight: 600; }
.caseload-check.error { color: var(--danger); font-weight: 600; }
.caseload-check:empty { display: none; }

/* Create a sheet / a template, and the short link that comes back. */
.rail-line.rail-make { margin-top: 8px; gap: 10px; align-items: center; }
.rail-make-btn { min-width: 84px; }
.rail-make-btn[disabled] { opacity: .6; cursor: default; }
.rail-help {
  font-size: 12px;
  color: var(--muted, #7b736b);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.rail-help:hover { color: var(--blue-bright, #3182ce); }
.rail-line.rail-made { margin-top: 8px; gap: 8px; }
.rail-made-link {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  cursor: text;
}
.rail-act.is-copied { opacity: .75; }
.caseload-drive-picker { margin-top: 8px; }
.template-box select {
  width: 100%;
  margin: 9px 0 0;
  padding: 8px 10px;
  border: 1px solid #d3dae4;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  background: var(--sunken);
}

/* Account chip for Google state */
.account-line {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--muted);
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 5px 11px;
  margin: 10px 0 0;
}
.account-line::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--faint);
  flex: 0 0 7px;
}
.account-line.is-on { color: var(--ok); background: var(--ok-soft); border-color: #cbe9d8; }
.account-line.is-on::before { background: var(--ok); }
.account-line.needs-setup { color: var(--warn); background: var(--warn-soft); border-color: #f0dcbb; }
.account-line.needs-setup::before { background: var(--warn); }

/* ---------- Progress ---------- */

.progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
}
.progress-label { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.progress-value { font-size: 13px; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.progress-track {
  height: 8px;
  border-radius: 5px;
  background: var(--line);
  overflow: hidden;
  margin: 7px 0 4px;
  box-shadow: inset 0 1px 2px rgba(16, 32, 61, 0.06);
}
.progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--blue-bright), var(--blue));
  transition: width 0.4s var(--ease), background 0.25s var(--ease);
}
.progress-fill.complete { background: linear-gradient(90deg, #2f9e69, var(--ok)); }

.ready-bar { display: flex; flex-direction: column; gap: 2px; margin: 14px 0 10px; }
.ready-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  padding: 5px 8px;
  border-radius: var(--r-sm);
}
.ready-item:hover { background: rgba(49, 130, 206, 0.06); }
.ready-note {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  vertical-align: middle;
  background: #fff4cc;
  color: #8a6400;
}
.ready-note.received { background: #dcf5e7; color: #1f6b44; }
.tick {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  flex: 0 0 16px;
  position: relative;
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease);
}
.tick.done { background: var(--ok); border-color: var(--ok); }
.tick.done::after {
  content: "";
  position: absolute;
  left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.tick.sent {
  background: #e4c441;
  border-color: #c9aa1d;
}
.tick.required:not(.done):not(.sent) { border-color: var(--warn); }

.ready-count {
  font-weight: 600;
  font-size: 12.5px;
  color: var(--muted);
  margin: 4px 0 0;
  line-height: 1.45;
}

/* ---------- Confirm + checklist ---------- */

.delete-confirm {
  margin: 0 0 18px;
  padding: 14px;
  border: 1px solid #f0c4c4;
  border-radius: var(--r-md);
  background: var(--danger-soft);
}
.delete-confirm p { margin: 0 0 10px; color: var(--danger); font-size: 13px; font-weight: 600; }

.tests-given-picker {
  margin: 16px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--sunken);
}
.tests-given-picker h3 { margin: 0 0 5px; font-size: 13px; color: var(--navy); }
.tests-given-picker p.muted { font-size: 11.5px; }
/* Kevin, 2026-09-19: click a domain to expand it; hover does not open. */
.tests-given-group { margin: 2px 0 0; border-radius: 6px; }
.tests-given-group.is-open { background: #eef3f9; }
.tests-given-group h4 {
  margin: 0;
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
/* Kevin, 2026-09-11: "IT DOES NOT LOOK LIKE ITS EXPANDABLE ... HAVING GRAY BARS
   OVER THE DOMAINS WITH AN ARROW OR SOMETHING." At rest each domain now reads as
   a closed bar with a chevron, the same shape the Caseload Options group uses,
   so you can see there is something under it before you go looking. */
.tg-head {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 5px 8px;
  cursor: pointer;
  border-radius: 6px;
  background: #f2f4f7;
  border: 1px solid var(--line-soft);
}
.tg-head::before {
  content: "\203A";
  align-self: center;
  font-size: 14px;
  line-height: 1;
  color: var(--faint);
  transition: transform 0.18s var(--ease);
}
/* The arrow turns only when the domain is open. */
.tests-given-group.is-open > .tg-head::before { transform: rotate(90deg); }
.tests-given-group.is-open > .tg-head { border-color: var(--line); }
.tg-head:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .tg-head::before { transition: none; } }
.tg-name { flex: 0 0 auto; }
.tg-picked {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tests-given-group:not(.has-picked) .tg-picked { color: var(--muted); font-weight: 400; font-style: italic; }
.tg-count {
  flex: 0 0 auto;
  min-width: 15px;
  text-align: center;
  font-size: 10px;
  color: var(--blue);
  font-weight: 700;
}
.tg-rows { max-height: 0; overflow: hidden; transition: max-height 0.18s ease; }
.tests-given-group.is-open > .tg-rows { max-height: 460px; }
@media (prefers-reduced-motion: reduce) { .tg-rows { transition: none; } }
.tests-given-row, .check-row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  margin: 4px 0;
  padding: 3px 5px;
  border-radius: 5px;
  cursor: pointer;
}
.tests-given-row { align-items: flex-start; }
.tests-given-row:hover, label.check-row:hover { background: #eef3f9; }
.tests-given-row input, .check-row input { width: auto; accent-color: var(--blue); margin: 2px 0 0; }

.full-checklist { margin-top: 12px; }
.full-checklist h4 {
  margin: 16px 0 6px;
  color: var(--navy);
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.status-line { min-height: 1.4em; font-size: 12.5px; margin: 9px 0 0; line-height: 1.45; }
.status-line.ok { color: var(--ok); font-weight: 600; }
.status-line.error { color: var(--danger); font-weight: 600; }
.status-line.warn { color: var(--warn); font-weight: 600; }
/* Kevin, 2026-09-07: the Save row under MERGE — the format picker and the
   Save button share one height, one font, one border, one shape. */
.report-export-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 8px;
  align-items: end;
  margin: 0 0 4px;
}
.report-export-type {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  min-width: 0;
}
.report-export-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.export-control,
.report-export-row select.export-control,
.report-export-row button.export-control {
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 0 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  background: linear-gradient(180deg, #ffffff 0%, #eef2f7 100%);
  border: 1px solid #c9d3e0;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-xs);
  line-height: 38px;
  text-align: left;
}
.report-export-row button.export-control { text-align: center; }
.report-export-row select.export-control:focus,
.report-export-row button.export-control:focus-visible {
  outline: none;
  border-color: var(--blue-bright);
  box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.14);
}

/* Surveys — four blocks in a two-by-two grid, buttons the same size. */
.survey-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.survey-grid .survey-block {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* Teacher roster runs tall on the left; Parent and Student stack beside it;
   Weekly Reminders runs the full width underneath. No empty boxes. */
.survey-grid > .survey-block:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
.survey-grid > .survey-block:nth-child(2) { grid-column: 2; grid-row: 1; }
.survey-grid > .survey-block:nth-child(3) { grid-column: 2; grid-row: 2; }
.survey-grid > .weekly-remind-block { grid-column: 1 / -1; }
.survey-grid > .weekly-remind-block .survey-block-head { align-items: center; }
.survey-grid .survey-block-head { align-items: center; min-height: 26px; }
.survey-grid .survey-block .muted { margin: 0 0 6px; font-size: 12px; }
.survey-actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 8px;
  margin-top: 6px;
}
.survey-actions > button,
.survey-actions .survey-channel-picker {
  width: 100%;
  min-height: 38px;
  margin: 0;
  box-sizing: border-box;
}
.survey-actions > button {
  padding: 0 10px;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.survey-actions .survey-channel-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 3px;
}
.survey-actions .survey-channel-picker button { width: 100%; margin: 0; min-height: 30px; }
.survey-grid .survey-block .status-line { margin-top: auto; padding-top: 8px; }
.survey-grid .teacher-roster { margin-top: 10px; }

/* Uploads — required list first, then the copy with Add Files beside it. */
.uploads-copy-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  margin-top: 14px;
}
.uploads-copy-row .muted { margin: 0; }
.uploads-copy-row button { margin: 0; min-height: 38px; white-space: nowrap; }
.uploads-panel .extractor-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.uploads-panel .extractor-row > .extractor-btn {
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 8px 10px;
  white-space: normal;
  line-height: 1.25;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}
.uploads-panel .required-uploads { margin-top: 10px; }

/* Date pickers — a text box that reads m/d/yy plus a calendar button that
   opens the native picker (ui-shell.js). */
.date-field {
  display: inline-flex;
  align-items: stretch;
  flex: 0 0 auto;
}
.date-field > input.date-input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin: 0;
}
.date-field .date-field-btn {
  width: 34px;
  min-width: 34px;
  margin: 0 0 0 -1px;
  padding: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  font-size: 14px;
  line-height: 1;
}
.date-field .date-field-native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.date-field.is-hidden { display: none !important; }
.date-field.is-inactive { opacity: 0.6; }

/* ---------- Writer ---------- */

.writer { height: 100%; display: flex; flex-direction: column; background: var(--bg); }
.writer-bar {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  padding: 12px 22px;
  box-shadow: var(--shadow-xs);
  z-index: 2;
}
.writer-bar strong { color: var(--navy); font-size: 14px; }
.writer-bar .primary-btn { width: auto; margin: 0; }
.writer-body { overflow: auto; padding: 28px 24px 60px; }

.container {
  max-width: 900px;
  margin: 0 auto;
  background: var(--card);
  padding: 40px 44px 44px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
.container h1 {
  color: var(--navy);
  border-bottom: 3px solid var(--blue);
  padding-bottom: 12px;
  font-size: 23px;
  letter-spacing: -0.01em;
  margin-top: 0;
}
.section { margin-bottom: 22px; }
label { font-weight: 600; display: block; margin-bottom: 6px; color: #46505f; font-size: 13px; }
textarea, input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #d3dae4;
  border-radius: var(--r-sm);
  font-size: 14px;
  background: var(--sunken);
  color: var(--ink);
}
textarea { height: 110px; resize: vertical; line-height: 1.55; }
.score-box {
  background: var(--blue-soft);
  padding: 16px;
  border-radius: var(--r-md);
  border-left: 4px solid var(--blue-bright);
}
.summary-preview {
  margin-top: 10px;
  font-style: italic;
  color: #46505f;
  background: #fff;
  padding: 12px;
  border: 1px dashed #cbd5e1;
  border-radius: var(--r-sm);
  line-height: 1.55;
}

/* ---------- Narrow windows ---------- */

@media (max-width: 1280px) {
  .app-shell { grid-template-columns: 280px minmax(0, 1fr) 320px; }
  .app-banner { padding: 8px 14px; }
  .app-banner-left { max-width: calc(50% - 110px); gap: 10px; }
  .app-banner-name { font-size: 16px; letter-spacing: 0.16em; text-indent: 0.16em; }
  .app-banner-product { font-size: 10px; }
  .app-footer { padding: 8px 14px; gap: 12px; }
  .board { padding: 20px 22px 32px; }
}

/* ---------- Collapsible setup group ---------- */

.setup-group {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  box-shadow: var(--shadow-xs);
  margin-top: 20px;
  overflow: hidden;
}
.setup-group > summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.setup-group > summary::-webkit-details-marker { display: none; }
.setup-group > summary::before {
  content: "›";
  font-size: 16px;
  line-height: 1;
  color: var(--faint);
  transition: transform 0.16s var(--ease);
}
.setup-group[open] > summary::before { transform: rotate(90deg); }
.setup-group > summary:hover { background: #eef3f9; color: var(--navy); }
.setup-group[open] > summary { border-bottom: 1px solid var(--line-soft); }
.setup-group .template-box {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  padding: 14px 16px 16px;
}
.setup-group .template-box + .template-box { border-top: 1px solid var(--line-soft); }

.obs-home-preview {
  margin: 10px 0 0;
  max-height: 3.2em;
  overflow: hidden;
  font-size: 12.5px;
  line-height: 1.45;
  white-space: pre-wrap;
}
.obs-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
}
.obs-modal.hidden { display: none; }
.obs-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
}
.obs-modal-panel {
  position: relative;
  z-index: 1;
  width: min(560px, 100vw);
  height: 100%;
  background: var(--card);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
}
.obs-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--line-soft);
}
.obs-modal-head h2 { margin: 0; font-size: 16px; color: var(--navy); }
.obs-sub { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.obs-msg {
  margin: 10px 16px 0;
  padding: 7px 9px;
  border-radius: 6px;
  font-size: 12px;
}
.obs-msg.ok { background: #e6f5ec; color: #0f8a4c; }
.obs-msg.err { background: #fdeceb; color: #c0392b; }
.obs-msg.info { background: #eaf1fb; color: #1a5fb4; }
.obs-msg.warn { background: #fdf3e2; color: #b8730a; }
.obs-modal-body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 12px 16px 88px;
}
.obs-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 8px;
  background: #fff;
  overflow: hidden;
}
.obs-card > summary {
  cursor: pointer;
  list-style: none;
  padding: 8px 10px;
  font-weight: 600;
  font-size: 12.5px;
  background: #f7f8fa;
  display: flex;
  align-items: center;
  gap: 6px;
}
.obs-card > summary::-webkit-details-marker { display: none; }
.obs-tally { margin-left: auto; font-weight: 400; font-size: 10.5px; color: var(--muted); }
.obs-card-body { padding: 8px 10px 10px; }
.obs-f { display: block; font-size: 10.5px; color: var(--muted); margin-bottom: 6px; }
.obs-f input,
.obs-f select,
.obs-card-body textarea,
#obsSearch {
  width: 100%;
  font: 12px inherit;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
  color: var(--ink);
  margin-top: 3px;
  box-sizing: border-box;
}
.obs-card-body textarea { min-height: 64px; resize: vertical; }
.obs-row { display: flex; gap: 6px; }
.obs-row .obs-f { flex: 1; }
.obs-narrow { max-width: 140px; }
.obs-slotline { font-size: 11px; color: var(--muted); margin: 4px 0 0; }
.obs-count {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.obs-who { flex: 1; font-size: 11.5px; }
.obs-who small { display: block; color: var(--muted); font-size: 10px; }
.obs-step { display: flex; align-items: center; gap: 3px; }
.obs-step button {
  width: 28px;
  height: 26px;
  font-size: 15px;
  font-weight: 700;
  border: 1px solid var(--line);
  background: #fff;
  color: #1a5fb4;
  border-radius: 5px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.obs-step input { width: 46px; text-align: center; font-weight: 700; }
.obs-pct { width: 44px; text-align: right; font-weight: 700; font-size: 12px; }
.obs-barlab { display: flex; font-size: 10px; color: var(--muted); justify-content: space-between; }
.obs-bar2 { height: 7px; border-radius: 4px; background: #eef0f3; overflow: hidden; margin: 2px 0 6px; }
.obs-bar2 i { display: block; height: 100%; }
.obs-ft { background: #1a5fb4; width: 0; }
.obs-fp { background: #0f8a4c; width: 0; }
.obs-gap { font-size: 11.5px; color: var(--muted); margin: 0 0 8px; }
.obs-legend { font-size: 10.5px; color: var(--muted); margin: 0 0 8px; }
#obsSearch { margin: 8px 0; }
.obs-item {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 4px 0;
  border-bottom: 1px dotted #eef0f3;
  cursor: pointer;
  font-size: 12px;
}
.obs-item:last-child { border-bottom: none; }
.obs-item.on { font-weight: 600; }
.obs-item.on.k-pos { color: #0f8a4c; }
.obs-item.on.k-neg { color: #c0392b; }
.obs-item.on.k-support { color: #7a4fbd; }
.obs-quick { display: flex; gap: 4px; margin-bottom: 6px; }
.obs-quick button {
  font-size: 10.5px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 5px;
  cursor: pointer;
  color: var(--muted);
}
.obs-chk { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); margin: 4px 0; }
.obs-preview {
  white-space: pre-wrap;
  font-size: 11.5px;
  line-height: 1.5;
  max-height: 240px;
  overflow: auto;
  background: #fbfcfd;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px;
}
.obs-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.obs-dot.context { background: #5b6470; }
.obs-dot.pos { background: #0f8a4c; }
.obs-dot.neg { background: #c0392b; }
.obs-dot.support { background: #7a4fbd; }
.obs-modal-bar {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 6px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  background: #fff;
}
.obs-modal-bar button { flex: 1; }
.obs-ghost {
  background: #fff;
  color: var(--blue);
  border: 1px solid var(--blue);
  border-radius: 6px;
  padding: 8px 0;
  font-weight: 600;
  cursor: pointer;
}
.obs-hide { display: none !important; }

/* Adaptive behavior items — three states per skill (Yes / No / skipped).
   Everything else in the modal reuses the observation chrome. */
.ad-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px dotted #eef0f3;
  font-size: 12px;
}
.ad-item:last-child { border-bottom: none; }
.ad-label { flex: 1; min-width: 0; }
.ad-item[data-state="N"] .ad-label { font-weight: 600; color: #c0392b; }
.ad-item[data-state=""] .ad-label { color: var(--muted); opacity: .65; }
.ad-seg { display: inline-flex; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.ad-seg button {
  font-size: 10.5px;
  padding: 3px 9px;
  border: none;
  border-left: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  color: var(--muted);
  line-height: 1.5;
}
.ad-seg button:first-child { border-left: none; }
.ad-seg button.on { background: #eef2f8; color: #1a1c1f; font-weight: 600; }
.ad-seg button[data-ad-v="N"].on { background: #fdeaee; color: #c0392b; }
.ad-seg button[data-ad-v=""].on { background: #f2f4f7; color: var(--muted); }

/* Polish report findings tables (temporary panel) */
.pol-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
/* House style: what changed, one plain line each (Kevin, 2026-09-10). */
.pol-changes { margin: 4px 0 6px; padding-left: 18px; font-size: 12.5px; line-height: 1.5; }
.pol-changes li::marker { content: '\2714  '; color: var(--green, #2e8b57); }
.pol-table th, .pol-table td { border-bottom: 1px solid var(--line); padding: 3px 6px; text-align: left; vertical-align: top; }
.pol-table th { font-weight: 700; color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; }
.pol-table td:nth-child(4) { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; }

.file-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
}
.file-preview-modal.hidden { display: none; }
.file-preview-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.62);
}
.file-preview-panel {
  position: relative;
  z-index: 1;
  max-width: min(920px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.file-preview-panel img {
  max-width: 100%;
  max-height: calc(100vh - 160px);
  object-fit: contain;
  background: #fff;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}
.file-preview-panel p {
  margin: 0;
  color: #fff;
  font-size: 13px;
  text-align: center;
  word-break: break-word;
}
.file-preview-close {
  align-self: flex-end;
}
.file-preview-actions { display: flex; gap: 8px; }

/* Google access detail line — sits under the account chip in Data sources.
   Warns in cardinal only when a permission is actually missing. */
#googleAccessDetail {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.45;
  opacity: 0.75;
}
#googleAccessDetail.is-warn {
  color: #9d2235;
  opacity: 1;
  font-weight: 600;
}

/* ---- Write summary panel ------------------------------------------------ */
.sum-group { margin-bottom: 10px; }
.sum-group h4 {
  margin: 0 0 4px;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #6b6f7a;
}
.sum-row { padding: 2px 0; line-height: 1.45; }
.sum-derived {
  font-size: 10px;
  color: #8b8f9c;
  border: 1px solid #dcdee5;
  border-radius: 3px;
  padding: 0 4px;
}
.sum-chart {
  display: block;
  width: 100%;
  max-width: 640px;
  margin: 10px 0 4px;
  background: #fff;
  border: 1px solid #e3e5ea;
  border-radius: 6px;
}
.sum-sources { display: flex; flex-direction: column; gap: 8px; }
.sum-source {
  border: 1px solid #e3e5ea;
  border-radius: 6px;
  padding: 8px 10px;
  background: #fff;
}
.sum-source-empty { background: #fafafb; color: #6b6f7a; }
.sum-source-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 6px;
}
.sum-source-ev {
  font-size: 11px;
  color: #8b8f9c;
  text-align: right;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sum-seg { display: flex; flex-wrap: wrap; gap: 4px; }
.sum-verdict {
  font-size: 11px;
  padding: 3px 9px;
  border: 1px solid #d7d9e0;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
}
.sum-verdict:hover { border-color: #b9bcc6; }
.sum-verdict.on { background: #2f6fd0; border-color: #2f6fd0; color: #fff; }

/* ---------- Response Matrix panel ---------- */

#responseMatrixPanel { margin-top: 12px; }
.rmx { border: 1px solid var(--line, #e2e2e2); border-radius: 10px; padding: 14px 16px; }
.rmx-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; justify-content: space-between; }
.rmx-head h4 { margin: 0; }
.rmx-kpis { display: flex; gap: 8px; flex-wrap: wrap; }
.rmx-kpi { border: 1px solid var(--line, #e2e2e2); border-radius: 8px; padding: 6px 10px; min-width: 78px; }
.rmx-kpi b { display: block; font-size: 18px; line-height: 1.15; }
.rmx-kpi span { font-size: 10.5px; opacity: .7; }
.rmx-h { margin: 20px 0 6px; padding-bottom: 4px; border-bottom: 2px solid var(--line, #e8e8e8); font-size: 13px; }
.rmx-note { font-size: 11.5px; opacity: .7; margin: 8px 0; }
.rmx-empty { font-size: 12.5px; opacity: .7; font-style: italic; margin: 8px 0; }
.rmx-card { border: 1px solid var(--line, #e2e2e2); border-radius: 8px; padding: 10px 12px; margin: 8px 0; }
.rmx-text { margin-top: 4px; font-size: 12.5px; line-height: 1.55; }
.rmx-chip { display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 10px; background: #eef1f6; color: #3b4a63; margin-right: 6px; vertical-align: 1px; }
.rmx-chip.sped { background: #e6f0ff; color: #1b4a8f; }
.rmx-chip.cm { background: #f0e9ff; color: #57339c; }
.rmx-q { margin: 10px 0 3px; font-weight: 600; font-size: 12.5px; }
.rmx-den { font-weight: 400; opacity: .65; font-size: 11px; margin-left: 6px; }
.rmx-stat { display: block; margin: 0 0 4px; }
.rmx-table { border-collapse: collapse; width: 100%; font-size: 12px; }
.rmx-table td { padding: 2px 6px 2px 0; vertical-align: middle; border: 0; }
.rmx-table td.lab { width: 38%; }
.rmx-table td.bar { width: 44%; }
.rmx-table td.num { width: 18%; opacity: .75; white-space: nowrap; text-align: right; }
.rmx-table .track { background: rgba(128, 128, 128, .18); border-radius: 3px; height: 10px; overflow: hidden; }
.rmx-table .fill { height: 10px; border-radius: 3px; background: #4a6fa5; }
.rmx-table .fill.warn { background: #c2703c; }
.rmx-table .fill.good { background: #3f7d55; }
.rmx-table .fill.zero { background: rgba(128, 128, 128, .22); }
.rmx blockquote { margin: 5px 0 5px 8px; padding-left: 9px; border-left: 3px solid var(--line, #e0e0e0);
  font-size: 12px; line-height: 1.5; }
.rmx blockquote cite { display: block; opacity: .6; font-style: normal; font-size: 10.5px; margin-top: 2px; }
.rmx-copy { margin-top: 12px; }
/* Yes / no grid (Kevin, 2026-09-10): one column per respondent, % Yes / % No at the end. */
.rmx-grid-wrap { overflow-x: auto; margin: 6px 0 4px; }
.rmx-grid { border-collapse: collapse; font-size: 11.5px; min-width: 100%; }
.rmx-grid th, .rmx-grid td { border: 1px solid var(--line, #e2e2e2); padding: 3px 6px; }
.rmx-grid th { font-weight: 600; background: rgba(128, 128, 128, .08); white-space: nowrap; }
.rmx-grid th.q, .rmx-grid td.q { text-align: left; min-width: 160px; }
.rmx-grid th.role { color: #1b4a8f; }
.rmx-grid td.c { text-align: center; font-weight: 700; width: 34px; }
.rmx-grid td.c.good { background: rgba(63, 125, 85, .18); color: #2f6a44; }
.rmx-grid td.c.warn { background: rgba(194, 112, 60, .2); color: #9a4f1f; }
.rmx-grid td.c.maybe { background: rgba(128, 128, 128, .14); }
.rmx-grid td.c.blank { opacity: .45; font-weight: 400; }
.rmx-grid th.pct, .rmx-grid td.pct { text-align: right; white-space: nowrap; width: 52px; }
.rmx-grid tr.sec td { background: rgba(128, 128, 128, .06); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }

.rail-panel .template-link-wrap { margin: 4px 0 0; word-break: break-all; }

/* Pasting a link is the fallback, not the main path - it stays folded away
   at the very bottom of the panel until someone wants it. */
.detag-paste { margin: 8px 0 0; }
.detag-paste > summary {
  cursor: pointer;
  font-size: 11px;
  color: var(--muted, #7b736b);
  list-style: none;
}
.detag-paste > summary::-webkit-details-marker { display: none; }
.detag-paste > summary::before { content: '+ '; }
.detag-paste[open] > summary::before { content: '\2212 '; }
.detag-paste > summary:hover { color: #9d2235; }
#homeDetagPicker { margin-top: 8px; }
#homeDetagList { width: 100%; box-sizing: border-box; }


/* ---------------------------------------------------------------- compose --
   The COMPOSE panel sits under the extractors because it is the step AFTER
   them: it writes prose from scores the extractors already put on the case.
   The three conditions are shown as a live checklist rather than hidden behind
   a greyed button, so it is obvious what is still owed.
   ------------------------------------------------------------------------ */
.compose-panel {
  margin-top: 18px;
  padding: 16px 18px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--sunken);
}
.compose-head h4 {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.compose-head .muted { margin: 0 0 12px; }

.compose-gate {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.compose-gate li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}
.compose-gate li .gate-mark {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  border-radius: 50%;
  border: 1.5px solid var(--faint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: transparent;
}
.compose-gate li.is-done { color: var(--ink); }
.compose-gate li.is-done .gate-mark {
  background: var(--ok-soft);
  border-color: #8fceab;
  color: var(--ok);
}
.compose-gate li .gate-detail { color: var(--muted); }
.compose-gate li.is-done .gate-detail { color: var(--faint); }

.compose-btn {
  font-weight: 650;
  letter-spacing: 0.02em;
  padding: 9px 18px;
  min-height: 44px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}
.compose-btn:not(:disabled) {
  background: linear-gradient(180deg, #3cb87a 0%, #1f7a4d 100%);
  border-color: #17643e;
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 3px 0 #145534,
    0 6px 14px rgba(31, 122, 77, 0.24);
}
.compose-btn:not(:disabled):hover {
  background: linear-gradient(180deg, #45c887 0%, #238856 100%);
}
.compose-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.compose-btn.is-received {
  background: linear-gradient(180deg, #e8f6ee 0%, #cdead8 100%);
  border-color: #8fceab;
  color: var(--ok);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 3px 0 #7bb894,
    0 5px 10px rgba(31, 122, 77, 0.16);
}

/* ---- Settings button in the banner, and the settings panel ---- */

/* Roomier banner so the student name, the centred title and the Settings
   button each have their own space instead of crowding one another. */
.app-banner {
  min-height: 92px;
  padding: 12px 26px;
}
.app-banner-left {
  max-width: calc(50% - 210px);
  gap: 16px;
}
.app-banner-brand { padding: 2px 0; }

/* Top right, clear of the centred title. It must live OUTSIDE
   .app-banner-brand — that block is pointer-events:none. */
.app-banner-settings {
  position: absolute;
  top: 14px;
  right: 20px;
  z-index: 3;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink, #1f2937);
  background: #fff;
  border: 1px solid var(--line, #d8dee7);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.app-banner-settings:hover {
  background: #f3f5f9;
  border-color: #b9c3d1;
}
.app-banner-settings:focus-visible {
  outline: 2px solid var(--blue-bright, #2563eb);
  outline-offset: 2px;
}

#settingsModal .obs-modal-panel { max-width: 560px; }
#settingsModal label {
  display: block;
  margin: 14px 0 4px;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
}
/* Own classes rather than the rail-* ones, so this panel does not inherit
   the flex rules the home rail needs and end up fighting them. */
#settingsModal .settings-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 8px;
  align-items: center;
}
#settingsModal .settings-input {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  font: inherit;
  font-size: 14px;
  color: var(--ink, #1f2937);
  background: #fff;
  border: 1px solid var(--line, #d8dee7);
  border-radius: 8px;
}
#settingsModal .settings-input:focus-visible {
  outline: 2px solid var(--blue-bright, #2563eb);
  outline-offset: 1px;
}
#settingsModal .settings-btn {
  height: 36px;
  width: 100%;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #1f2937);
  background: #f3f5f9;
  border: 1px solid var(--line, #d8dee7);
  border-radius: 8px;
  cursor: pointer;
}
#settingsModal .settings-btn:hover { background: #e8ecf3; }
#settingsModal .obs-modal-head { align-items: center; gap: 12px; }
#settingsModal .survey-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
#settingsModal .survey-block-head h4 { margin: 0; }
#settingsModal select.rail-link { height: 32px; }
#settingsModal .status-line.ok { color: #1a7f5a; }
#settingsModal .status-line.error { color: #b3261e; }


/* Connect's own progress bar. Kevin, 2026-09-10: "add a progress bar to the
   CONNECT button that closes itself when the process is complete." Connect is
   a handful of Google round trips with no step count of their own, so the bar
   moves steadily while the work runs, fills the moment it finishes, and takes
   itself off screen. */
.connect-progress {
  height: 4px;
  margin: 8px 0 0;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
  opacity: 1;
  transition: opacity 380ms ease;
}
.connect-progress.is-finishing { opacity: 0; }
.connect-progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--blue, #2f6fdb);
  transition: width 320ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .connect-progress, .connect-progress-fill { transition: none; }
}

/* Import all — the progress bar that names students as they land. */
.ci-progress {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
  margin: 0 0 10px;
}
.ci-progress-fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent, #e0533d), #f0845f);
  transition: width .2s ease;
}
#ciLog {
  max-height: 260px;
  overflow-y: auto;
  font-size: 12px;
  line-height: 1.6;
}

/* The picker is one box: type in it to look up, or use the caret for the list. */
.student-select-field {
  display: flex;
  align-items: center;
  gap: 6px;
}
.student-select-field input.student-select-name {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  outline: 0;
  padding: 0;
}
.student-select-field input.student-select-name::placeholder { opacity: .6; }
.student-select-caret-btn {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 2px 4px;
  display: flex;
  align-items: center;
}
.student-select-empty { padding: 10px 4px; font-size: 13px; }


/* Kevin, 2026-09-10: phone observation links (Home > Classroom Observation > Phone). */
#phoneObsModal .obs-modal-panel { max-width: 560px; }
.phone-obs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.phone-obs-card { margin: 0; padding: 14px; border: 1px solid var(--line, #dde3ea); border-radius: 12px; background: #fff; text-align: center; }
.phone-obs-card figcaption { font-weight: 700; margin-bottom: 8px; }
.phone-obs-qr { width: 180px; height: 180px; margin: 0 auto 8px; }
.phone-obs-qr svg { width: 100%; height: 100%; display: block; }
.phone-obs-card p { font-size: 12px; margin: 0 0 10px; }

/* Phone uploads arrived (phone-uploads.js) - a quiet note, bottom centre, gone in 6 s. */
.phone-upload-note{ position:fixed; left:50%; bottom:24px; transform:translate(-50%, 12px); z-index:9000;
  padding:10px 16px; border-radius:12px; background:#2e2a26; color:#fff; font-size:14px; font-weight:600;
  box-shadow:0 8px 24px rgba(0,0,0,.18); opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; }
.phone-upload-note.show{ opacity:1; transform:translate(-50%, 0); }

/* Kevin, 2026-09-11: Essential Components — every report part, ticked or not. */
.sheet-sections h4 { display: flex; align-items: center; gap: 8px; }
.sheet-sections .ess-count { margin-left: auto; font-weight: 600; letter-spacing: 0; text-transform: none; }
.section-chip.ess-row { width: 100%; border: 0; background: transparent; text-align: left; font: inherit; color: var(--navy); cursor: pointer; }
.section-chip.ess-row:hover { background: var(--sunken); }
.section-chip.ess-row.is-auto { cursor: default; }
.section-chip.ess-row.is-missing { color: var(--muted); }
.section-chip.ess-row.is-done { color: var(--navy); }

/* Kevin, 2026-09-11: "make sure all the check tick spots are the same shape and
   are aligned." Every tick spot — status ticks and the checkboxes — is one 16px
   rounded square with the same check mark, sitting on the text's centre line. */
.tick,
input[type="checkbox"]:not([role="switch"]):not(.toggle-switch input) {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  min-width: 16px;
  flex: 0 0 16px;
  margin: 0;
  padding: 0;
  border-radius: 4px;
  border: 2px solid #cbd5e1;
  background: #fff;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  transition: background 0.16s var(--ease, ease), border-color 0.16s var(--ease, ease);
}
.tick { cursor: inherit; }
input[type="checkbox"]:not([role="switch"]):not(.toggle-switch input):checked,
.tick.done { background: var(--ok); border-color: var(--ok); }
input[type="checkbox"]:not([role="switch"]):not(.toggle-switch input):checked::after,
.tick.done::after {
  content: "";
  position: absolute;
  left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input[type="checkbox"]:not([role="switch"]):not(.toggle-switch input):disabled { opacity: 0.45; cursor: default; }
input[type="checkbox"]:not([role="switch"]):not(.toggle-switch input):focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.tests-given-row, .check-row, .ready-item { align-items: center; }
.tests-given-row input[type="checkbox"]:not([role="switch"]):not(.toggle-switch input), .check-row input[type="checkbox"]:not([role="switch"]):not(.toggle-switch input) { margin: 0; }

/* Calendar button beside every date box (date-picker.js). */
.date-pick-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: 4px;
  padding: 0;
  border: 1px solid var(--line, #cbd5e1);
  border-radius: 6px;
  background: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
  flex: 0 0 28px;
}
.date-pick-btn:hover { border-color: var(--blue); }
.date-pick-native {
  position: absolute;
  left: 0; bottom: 0;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
  border: 0; padding: 0;
}
.date-input.hidden + .date-pick-btn,
.date-input[hidden] + .date-pick-btn,
.hidden > .date-pick-btn { display: none; }

/* Date boxes that fill their row leave room for the calendar button. */
.date-with-pick { display: flex; align-items: center; gap: 4px; }
.date-with-pick .date-input { flex: 1 1 auto; min-width: 0; }
.date-with-pick .date-pick-btn { margin-left: 0; height: 36px; width: 36px; flex-basis: 36px; }
/* Required Tags title stays on one line; Disable All is a small button at the right. */
.required-tags-panel .section-title-row h3 { white-space: nowrap; }
.required-tags-panel .section-title-row .required-all-btn { flex: 0 0 auto; width: auto; margin-left: auto; padding: 4px 12px; }
/* Extract All Test Scores and Extract All sit side by side, same size. */
.action-row.extract-all-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.action-row.extract-all-row .extract-all-btn { width: 100%; margin: 0; }

/* Kevin, 2026-09-11: short on screen, the explanation on hover (hover-help.js). */
.folded-note { display: none !important; }
.has-tip { cursor: help; }
h2.has-tip, h3.has-tip, h4.has-tip, summary.has-tip { text-decoration: underline dotted rgba(120, 130, 150, 0.55); text-underline-offset: 4px; }
.status-line.has-tip, .obs-home-preview.has-tip { text-decoration: underline dotted rgba(120, 130, 150, 0.45); text-underline-offset: 3px; }
.hover-card {
  position: fixed;
  z-index: 10000;
  max-width: 300px;
  padding: 8px 11px;
  border-radius: 8px;
  background: #1f2937;
  color: #f9fafb;
  font-size: 12.5px;
  line-height: 1.4;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.hover-card.on { opacity: 1; transform: none; }
.hover-card-what { font-weight: 600; }
.hover-card-how { margin-top: 3px; color: #fcd34d; }
.hover-card-how::before { content: "▸ "; }

/* Kevin, 2026-09-11: the Monday survey nudge. The line says who still owes a
   survey; the button wears a quiet mark until he opens the drafts once. */
#homeWeeklyRemindBtn.is-due {
  border-color: var(--warn, #a86a0e);
  box-shadow: inset 0 0 0 1px var(--warn, #a86a0e);
  font-weight: 600;
}
#homeWeeklyRemindBtn.is-due::after { content: " •"; color: var(--warn, #a86a0e); }

/* Kevin, 2026-09-11: the yellow list — who still owes a survey, soonest meeting
   first. Yellow because that is the colour the Teacher Survey tab uses. */
.yellow-count { font-weight: 700; color: var(--warn, #a86a0e); margin-left: 6px; }
.yellow-count:empty { display: none; }
.yellow-list { display: grid; gap: 4px; margin: 6px 0 2px; }
.yellow-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) auto;
  gap: 10px;
  align-items: baseline;
  padding: 6px 8px;
  border-left: 3px solid var(--warn, #a86a0e);
  background: rgba(168, 106, 14, .08);
  border-radius: 4px;
  font-size: 13.5px;
}
.yellow-row.last-call { border-left-color: #a61c1c; background: rgba(166, 28, 28, .08); }
.yellow-row.overdue { border-left-style: dashed; }
.yellow-row .yl-name { font-weight: 600; }
.yellow-row .yl-owed { opacity: .85; }
.yellow-row .yl-when { text-align: right; white-space: nowrap; opacity: .75; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
  .yellow-row { grid-template-columns: 1fr; gap: 2px; }
  .yellow-row .yl-when { text-align: left; }
}

/* Kevin, 2026-09-11: the score check — one line per student, its findings under
   the name. Red for something that does not add up, plain for worth a look. */
.sweep-test { margin: 2px 0 4px; }
.sweep-test .st-name { font-weight: 600; font-size: 12.5px; letter-spacing: .02em; opacity: .8; }
.sweep-note { font-size: 12.5px; line-height: 1.35; opacity: .85; padding-left: 8px; }
.sweep-note.stop { color: #a61c1c; opacity: 1; }

/* Kevin, 2026-09-11: "write the sheet name and the doc name in the box with the
   icon." The name sits under the icon inside the badge, one line, trimmed with
   an ellipsis so a long file name cannot stretch the rail. */
.rail-badge { flex-direction: column; gap: 2px; }
.rail-badge-title {
  max-width: 100%;
  padding: 0 6px;
  font-size: 11.5px;
  line-height: 1.25;
  font-weight: 600;
  text-align: center;
  color: var(--ink-2, #4a433c);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}
.rail-badge-title:empty { display: none; }
.caseload-link-url.rail-badge-name { font-size: 11.5px; }

/* Kevin, 2026-09-11: "have the cards either slide out or expand and contract or
   appear on condition - I want cool automatic visually appealing easy to
   understand."
   A smart card knows whether it belongs on this student. When it does not, it
   collapses out of the way instead of vanishing; when it arrives it slides down
   and glows once so the change is noticed rather than discovered. */
.smart-card {
  overflow: hidden;
  max-height: 1200px;
  opacity: 1;
  transform: translateY(0);
  transition:
    max-height 340ms cubic-bezier(.22,.61,.36,1),
    opacity 200ms ease,
    transform 340ms cubic-bezier(.22,.61,.36,1),
    margin 340ms cubic-bezier(.22,.61,.36,1),
    padding 340ms cubic-bezier(.22,.61,.36,1);
}
.smart-card.is-away {
  max-height: 0;
  opacity: 0;
  transform: translateY(-10px);
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  pointer-events: none;
}
/* One soft sweep when a card earns its place. */
@keyframes cardArrive {
  0%   { box-shadow: inset 0 0 0 2px rgba(49, 130, 206, .55); background-color: rgba(49, 130, 206, .07); }
  100% { box-shadow: inset 0 0 0 2px rgba(49, 130, 206, 0);   background-color: transparent; }
}
.smart-card.is-new { animation: cardArrive 1400ms ease-out; }

/* The one line that says why this card is here. */
.smart-why {
  margin: 0 0 6px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ink-2, #4a433c);
  opacity: .85;
  display: flex;
  gap: 6px;
  align-items: baseline;
}
.smart-why::before { content: "●"; font-size: 8px; color: var(--blue-bright, #3182ce); transform: translateY(-2px); }
.smart-why:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .smart-card { transition: opacity 120ms ease; }
  .smart-card.is-new { animation: none; }
}

/* Kevin, 2026-09-11: WRAML-3 card — where to type the learning trials when the
   handwritten Record Form could not be read. Short on the card, full on hover. */
.se-trial-hint {
  margin: 4px 0 8px;
  font-size: 0.86rem;
  font-weight: 600;
  color: #9b1c1c;
  cursor: help;
}

/* ---- Summary score table (6.1) ------------------------------------------ */
.sum-table-wrap { overflow-x: auto; margin-bottom: 10px; }
.sum-table { border-collapse: collapse; width: 100%; font-size: 12px; background: #fff; }
.sum-table caption {
  caption-side: top;
  font-weight: 700;
  text-align: center;
  padding: 6px 0 8px;
  color: #31343c;
}
.sum-table th, .sum-table td { padding: 4px 8px; vertical-align: middle; }
.sum-table thead th { font-weight: 700; border-bottom: 1px solid #9aa0ab; }
.sum-table th.l, .sum-table td.l { text-align: left; }
.sum-table th.c, .sum-table td.c { text-align: center; }
.sum-table tr.sum-band td {
  background: #eef0f4;
  font-weight: 600;
  text-align: left;
}
.sum-table tbody tr:last-child td { border-bottom: 1px solid #9aa0ab; }

/* Kevin's direction, 2026-09-24: the per-student intake / history checklist.
   Seven rows, a dot each, and the row name takes him to the button that
   already does that job. */
.intake-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.intake-row { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 4px 2px; }
.intake-dot { flex: 0 0 12px; width: 12px; height: 12px; border-radius: 50%; }
.intake-dot.all { background: #2F7D55; box-shadow: 0 0 0 3px rgba(47, 125, 85, .16); }
.intake-dot.some { background: #D9412C; box-shadow: 0 0 0 3px rgba(217, 65, 44, .16); }
.intake-dot.none { background: transparent; border: 2px solid rgba(120, 112, 130, .45); }
.intake-name { flex: 1 1 auto; text-align: left; background: none; border: 0; padding: 0; font: inherit;
  font-weight: 600; color: inherit; cursor: pointer; }
.intake-name:hover { text-decoration: underline; }
.intake-note { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; color: #6F6870; }
.intake-row.is-done .intake-note { color: #2F7D55; }
.intake-row.is-waiting .intake-note { color: #B9741F; }
.intake-needs { margin: 10px 2px 0; font-size: 13px; line-height: 1.45; color: #6F6870; }
.intake-needs.is-clear { color: #2F7D55; font-weight: 700; }
.intake-jump { outline: 3px solid #D9412C; outline-offset: 3px; border-radius: 10px; }

/* Kevin, 2026-10-01: the student box's X and its loading spinner. */
.student-select-clear {
  flex: 0 0 auto; border: 0; background: transparent; color: inherit; cursor: pointer;
  font: 600 16px/1 inherit; padding: 0 4px; opacity: .55;
}
.student-select-clear:hover, .student-select-clear:focus-visible { opacity: 1; }
.student-select-name:placeholder-shown ~ .student-select-clear { display: none; }
.student-select-spinner {
  flex: 0 0 auto; display: none; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(217,65,44,.25); border-top-color: #D9412C;
  animation: studentPickSpin .8s linear infinite;
}
.student-select-field.is-loading .student-select-spinner { display: inline-block; }
.student-select-field.is-loading .student-select-clear { display: none; }
@keyframes studentPickSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .student-select-spinner { animation-duration: 2.4s; } }