/* ============================================================
   STEPPING STONES HOME — Kevin, 2026-10-02 ("ok go")
   Loaded last. Everything here is under body.stones-on, so the old
   three-panel home (Settings > Look > Stepping Stones Home: off) is
   exactly as it was. Motion is slow-in, quick-out and always respects
   prefers-reduced-motion.
   ============================================================ */

/* ---------- three even columns, the banner strip retires ---------- */
body.stones-on #home-view.app-shell { grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr) minmax(0, 1fr) !important; }
body.stones-on #home-view > .picker,
body.stones-on #home-view > .board,
body.stones-on #home-view > .ready-pane {
  padding: 18px 16px 30px !important; gap: 14px !important; display: flex !important; flex-direction: column !important;
  background: var(--al-paper) !important; background-image: none !important; border: 0 !important;
}
body.stones-on #home-view > .board { border-left: 1px solid var(--al-line-soft) !important; border-right: 1px solid var(--al-line-soft) !important; }
body.stones-on #activeBoard:not(.hidden) { display: flex !important; flex-direction: column; gap: 14px; }
body.stones-on .al-flow { display: none !important; }
body.stones-on .stones-hidden { display: none !important; }
body.stones-on #readyPanel .dial-wrap { display: none !important; }
body.stones-on #home-view[data-board] #activeBoard > .stone:not(#stones-a):not(#stones-b),
body.stones-on #home-view[data-board] #activeBoard > .stones-required:not(#stones-a):not(#stones-b),
body.stones-on #home-view[data-board] #activeBoard > #requiredTagsPanel:not(#stones-a) { display: block !important; }
body.stones-on #home-view[data-board="closed"] #homeStatusWindow::after { content: none !important; display: none !important; }

/* ---------- a stone ---------- */
body.stones-on #home-view .stone {
  position: relative; flex-shrink: 0; background: var(--al-surface) !important; border: 1px solid var(--al-line) !important;
  border-radius: 16px !important; overflow: hidden; margin: 0 !important; padding: 0 !important;
  transition: border-color .45s ease, box-shadow .55s ease, opacity .4s ease;
}
body.stones-on #home-view .stone.is-open { border-color: var(--al-red) !important; box-shadow: 0 18px 40px rgba(43, 40, 44, .12), 0 0 0 3px var(--al-red-tint) !important; }
body.stones-on #home-view .stone.is-done:not(.is-open) { border-color: color-mix(in srgb, var(--al-ok) 45%, var(--al-line)) !important; }
body.stones-on #home-view .stone.just-done { animation: stonesDone 1.4s ease; }
body.stones-on #home-view .stone > .stone-head {
  display: grid !important; grid-template-columns: 32px minmax(0, 1fr) 12px 14px; align-items: center; gap: 12px;
  width: 100% !important; min-height: 62px !important; height: auto !important; padding: 12px 16px !important; margin: 0 !important;
  background: none !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  color: var(--al-ink) !important; text-align: left !important; text-transform: none !important; letter-spacing: 0 !important;
  transform: none !important; cursor: pointer !important; transition: background-color .25s ease !important;
}
body.stones-on #home-view .stone > .stone-head:hover { background: var(--al-mist) !important; }
body.stones-on #home-view .stone > .stone-head:focus-visible { outline: 2px solid var(--al-red); outline-offset: -2px; }
body.stones-on #home-view .stone.is-later:not(.is-open) > .stone-head { opacity: .62; }
.stone-num {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; box-sizing: border-box;
  border: 2px solid var(--al-line); background: var(--al-surface); color: var(--al-muted);
  font: 600 12px/1 var(--al-mono); transition: border-color .4s ease, background-color .4s ease, color .4s ease, box-shadow .4s ease;
}
.stone.is-now .stone-num, .stones-auto.is-now .stone-num { border-color: var(--al-red); color: var(--al-red); box-shadow: 0 0 0 5px var(--al-red-tint); }
.stone.is-done .stone-num { border-color: var(--al-ok); background: var(--al-ok); color: #fff; }
.stone-name { display: flex; flex-direction: column; min-width: 0; }
.stone-name b { font: 800 15px/1.2 var(--al-head); letter-spacing: .01em; color: var(--al-ink); }
.stone-line { display: block; margin-top: 3px; font: 500 11.5px/1.35 var(--al-mono); color: var(--al-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: none; }
.stone.is-now .stone-line { color: var(--al-red-deep); }
.stone-light { width: 10px; height: 10px; border-radius: 50%; background: var(--al-line); transition: background-color .4s ease; }
.sl-green { background: var(--al-ok); }
.sl-red { background: var(--al-red); }
.sl-amber { background: var(--al-warn); }
.sl-busy { background: #F07A3A; }
.sl-grey { background: var(--al-line); }
.stone-chev { width: 9px; height: 9px; border-right: 2px solid var(--al-muted); border-bottom: 2px solid var(--al-muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.stone.is-open .stone-chev { transform: rotate(-135deg) translate(-2px, -2px); }
.stone-always { padding: 0 16px 14px; }
.stone-always:empty { display: none; }
.stone-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s cubic-bezier(.2, .8, .2, 1); }
.stone.is-open .stone-body { grid-template-rows: 1fr; }
.stone-inner { overflow: hidden; min-height: 0; }
.stone-pad { padding: 2px 16px 18px; display: flex; flex-direction: column; gap: 14px; opacity: 0; transform: translateY(10px); transition: opacity .3s ease, transform .45s cubic-bezier(.2, .8, .2, 1); }
.stone.is-open .stone-pad { opacity: 1; transform: none; transition-delay: .2s; }

/* ---------- panels that sit inside a stone lose their own frame ---------- */
body.stones-on #home-view .stone-pad > .panel,
body.stones-on #home-view .stone-pad > section,
body.stones-on #home-view .stone-always > * {
  margin: 0 !important; box-shadow: none !important; background: transparent !important; border: 0 !important; padding: 0 !important; border-radius: 0 !important;
}
body.stones-on #home-view .stone-pad > .panel + .panel,
body.stones-on #home-view .stone-pad > section + section { border-top: 1px dashed var(--al-line-soft) !important; padding-top: 14px !important; }
body.stones-on #home-view .stone-pad .section-title-row h3 { font: 700 11px/1.2 var(--al-mono) !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: var(--al-muted) !important; margin: 0 0 8px !important; }
body.stones-on .stone-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
body.stones-on .stone-grid > * { min-width: 0; }
body.stones-on .stone-grid > .extract-status, body.stones-on .stone-grid > [id$="Status"] { grid-column: 1 / -1; font: 500 11.5px/1.4 var(--al-mono); color: var(--al-muted); }
body.stones-on .stone-grid > [id$="Status"]:empty { display: none; }
body.stones-on #studentInfo .info-grid, body.stones-on #studentInfo .student-grid { grid-template-columns: minmax(0, 1fr) !important; }
/* Kevin, 2026-10-15: two label/value pairs side by side were cutting words off. One pair, and the words wrap. */
body.stones-on #studentInfo .info-list-2col {
  grid-template-columns: minmax(92px, 128px) minmax(0, 1fr) !important;
}
body.stones-on #studentInfo .info-list dd,
body.stones-on #studentInfo .demo-field,
body.stones-on #studentInfo .demo-grid { min-width: 0; }
body.stones-on #studentInfo .info-list dd { overflow: visible; white-space: normal; word-break: normal; overflow-wrap: anywhere; }
body.stones-on #studentInfo .demo-grid { grid-template-columns: minmax(0, 1fr) !important; }
body.stones-on #studentInfo .demo-field select,
body.stones-on #studentInfo .demo-field input { width: 100% !important; min-width: 0 !important; max-width: 100%; }

/* ---------- every button: one size, pointer, lift, press ---------- */
body.stones-on #home-view button:not(.stone-head):not(.file-card button):not(.check-row button):not(.toggle-switch):not(.chip):not([class*="close"]):not(.icon-btn):not(#runAutomataBtn):not(#pickCaseloadBtn):not(#pickTemplateBtn):not(#studentSelectClear):not(.stones-link-btn):not(#settingsOpenBtn):not(#bannerAccountBtn) {
  min-height: 40px !important; height: auto !important; padding: 9px 16px !important; border-radius: 11px !important;
  font: 700 12.5px/1.2 var(--al-head) !important; letter-spacing: .02em !important; white-space: normal !important;
}
body.stones-on .stone-grid > button, body.stones-on .stone-pad .button-row > button { width: 100% !important; }
body.stones-on #home-view button:not(:disabled):not([aria-disabled="true"]) {
  cursor: pointer !important;
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease, background-color .3s ease, filter .2s ease !important;
}
body.stones-on #home-view button:not(.stone-head):not(:disabled):not([aria-disabled="true"]):hover { transform: translateY(-2px); filter: brightness(1.04); }
body.stones-on #home-view button:not(.stone-head):not(:disabled):not([aria-disabled="true"]):active { transform: translateY(1px) scale(.985); filter: brightness(.96); transition-duration: .06s !important; }

/* locked = gray and pressed in, never faded */
body.stones-on #home-view button:disabled,
body.stones-on #home-view button[aria-disabled="true"],
body.stones-on #home-view .is-blocked {
  opacity: 1 !important; filter: none !important; cursor: not-allowed !important;
  color: var(--al-blocked-ink) !important; text-shadow: none !important;
  background-color: var(--al-blocked) !important;
  background-image: linear-gradient(180deg, var(--al-blocked-deep) 0%, var(--al-blocked) 45%, var(--al-blocked) 100%) !important;
  border-color: var(--al-blocked-line) !important;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .10) !important;
  transform: translateY(2px) !important;
}
/* ran = keeps its "done" color from the main look file; this just keeps it from being greyed when it re-locks */
body.stones-on #home-view button.al-ran:disabled[data-done="1"] { background-color: var(--al-done) !important; color: #fff !important; opacity: .82 !important; }

/* the two "link" buttons are larger, their linked badge grows with them */
body.stones-on #pickCaseloadBtn, body.stones-on #pickTemplateBtn {
  min-height: 56px !important; width: 100% !important; padding: 12px 18px !important; border-radius: 14px !important;
  font: 800 14px/1.2 var(--al-head) !important; letter-spacing: .03em !important; display: inline-flex !important; align-items: center; justify-content: center; gap: 10px;
}
body.stones-on #homeCaseloadLinkRow, body.stones-on #homeTemplateBadge, body.stones-on .rail-link-badge { transform-origin: left center; }
body.stones-on #homeCaseloadLinkRow img, body.stones-on #homeCaseloadLinkRow svg,
body.stones-on #homeTemplateBadge img, body.stones-on #homeTemplateBadge svg { width: 28px !important; height: 28px !important; transition: transform .5s cubic-bezier(.2, 1.4, .4, 1); }
body.stones-on #homeCaseloadLinkRow[data-linked="true"] img, body.stones-on #homeCaseloadLinkRow[data-linked="true"] svg,
body.stones-on #homeTemplateBadge:not([data-state=""]) img, body.stones-on #homeTemplateBadge:not([data-state=""]) svg { animation: stonesLinked .7s cubic-bezier(.2, 1.4, .4, 1); }

/* ---------- status and activity (left column, under the stones) ---------- */
body.stones-on #homeStatusWindow.stones-status {
  display: flex !important; flex-direction: column; margin: 0 !important; padding: 14px 16px !important;
  border-radius: 16px !important; border: 1px solid var(--al-line) !important; background: var(--al-surface) !important; box-shadow: none !important;
}
body.stones-on #homeStatusWindow.is-busy { border-color: #F07A3A !important; box-shadow: 0 0 0 3px rgba(240, 122, 58, .14) !important; }
body.stones-on #homeStatusFeed { height: 190px !important; max-height: 190px !important; overflow-y: auto !important; scroll-behavior: smooth; mask-image: linear-gradient(180deg, #000 82%, transparent); }
body.stones-on #homeStatusFeed > * { animation: stonesSlide .45s cubic-bezier(.2, .8, .2, 1); }

/* ---------- round progress monitor (top of the right column) ---------- */
body.stones-on #stonesRing {
  display: grid !important; grid-template-columns: 148px minmax(0, 1fr); gap: 18px; align-items: center;
  margin: 0 !important; padding: 18px !important; border-radius: 18px !important; border: 1px solid var(--al-line) !important;
  background: var(--al-surface) !important; box-shadow: 0 10px 28px rgba(43, 40, 44, .08) !important; position: sticky; top: 0; z-index: 3;
}
.stones-ring-dial { position: relative; width: 148px; height: 148px; }
.stones-ring-dial svg { width: 148px; height: 148px; transform: rotate(-90deg); }
.srd-track { stroke: var(--al-line-soft); }
.srd-track2 { stroke: var(--al-mist); }
.srd-fill { stroke: url(#stonesRingGrad); transition: stroke-dashoffset 1.1s cubic-bezier(.2, .8, .2, 1); }
.srd-job { stroke: #F07A3A; opacity: 0; transition: stroke-dashoffset .6s ease, opacity .4s ease; }
#stonesRing.is-busy .srd-job { opacity: 1; }
#stonesRing.is-complete .srd-fill { stroke: var(--al-ok); }
.srd-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
#stonesRingPct { font: 800 32px/1 var(--al-head); color: var(--al-ink); font-variant-numeric: tabular-nums; }
#stonesRingCount { margin-top: 4px; font: 500 10.5px/1.25 var(--al-mono); color: var(--al-muted); max-width: 86px; }
.stones-ring-words { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.stones-eyebrow { font: 700 10.5px/1 var(--al-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--al-muted); }
#stonesRingTitle { font: 800 17px/1.25 var(--al-head); color: var(--al-ink); }
.stones-ring-row { display: flex; align-items: center; gap: 8px; font: 500 12px/1.35 var(--al-mono); color: var(--al-muted); min-width: 0; }
.stones-ring-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stones-ring-row i { flex: 0 0 10px; height: 10px; border-radius: 50%; }
.srr-job { background: var(--al-line); }
#stonesRing.is-busy .srr-job { background: #F07A3A; animation: stonesPulse 1s ease-out infinite; }
.srr-all { background: linear-gradient(135deg, #FF6A1A, #FFB020); }

/* ---------- required sections ---------- */
body.stones-on .stones-required, body.stones-on #requiredTagsPanel.stones-tags, body.stones-on #railChecklist.stones-components {
  margin: 0 !important; padding: 14px 16px !important; border-radius: 16px !important; border: 1px solid var(--al-line) !important; background: var(--al-surface) !important; box-shadow: none !important;
}
body.stones-on .stones-required .section-title-row, body.stones-on .stones-tags .section-title-row, body.stones-on .stones-components .section-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
body.stones-on .stones-required h3, body.stones-on .stones-tags h3, body.stones-on .stones-components h3 { font: 800 14px/1.2 var(--al-head) !important; letter-spacing: .01em !important; text-transform: none !important; color: var(--al-ink) !important; margin: 0 0 10px !important; }
.stones-count, body.stones-on #railChecklistCount { font: 700 11px/1 var(--al-mono); color: var(--al-muted); padding: 4px 8px; border-radius: 999px; background: var(--al-mist); }
.stones-subhead { margin: 14px 0 8px; font: 700 10.5px/1 var(--al-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--al-muted); }
body.stones-on .stones-req-docs #requiredUploads { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
body.stones-on #requiredTagsList, body.stones-on #fullChecklist { max-height: 300px; overflow-y: auto; }
body.stones-on .stones-required .ready-item, body.stones-on .stones-tags .ready-item, body.stones-on .stones-components .check-row {
  transition: background-color .4s ease, color .4s ease, opacity .4s ease; border-radius: 8px;
}
body.stones-on .stones-required .ready-item.is-done, body.stones-on .stones-tags .ready-item.is-done, body.stones-on .stones-components .check-row.is-done { color: var(--al-muted); }
body.stones-on .stones-required .ready-item.is-done .tick, body.stones-on .stones-tags .ready-item.is-done .tick, body.stones-on .stones-components .check-row.is-done .tick { animation: stonesTick .5s cubic-bezier(.2, 1.4, .4, 1); }
body.stones-on .stones-components .check-row.is-stale { background: var(--al-warn-tint); }
body.stones-on .ready-item.is-optional { opacity: .7; }

/* ---------- file-change lights ---------- */
.file-light { display: inline-block; flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; box-shadow: 0 0 0 2px var(--al-surface); }
.fl-blue { background: #3A70C4; }
.fl-amber { background: var(--al-warn); animation: stonesPulse 1.9s ease-out infinite; }
.fl-green { background: var(--al-ok); }
.fl-red { background: var(--al-red); animation: stonesPulse 1.9s ease-out infinite; }
.fl-grey { background: var(--al-line); }
body.stones-on .file-card { position: relative; animation: stonesSlide .45s cubic-bezier(.2, .8, .2, 1); }
body.stones-on .file-card > .file-light { position: absolute; top: 8px; right: 8px; margin: 0; }
.stones-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px; font: 500 11px/1.3 var(--al-mono); color: var(--al-muted); }
.stones-legend span { display: inline-flex; align-items: center; gap: 6px; }
.stones-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.stones-legend i.fl-amber, .stones-legend i.fl-red { animation: none; }

/* ---------- pictures Insert Images will place (Kevin 2026-10-02) ---------- */
body.stones-on .file-card.stones-spot { border-color: var(--al-red); box-shadow: 0 0 0 2px var(--al-red); }
body.stones-on .file-card.stones-spot img { outline: none; }
body.stones-on .file-card .will-merge-tag,
body.stones-on .file-card.stones-nospot .file-meta .file-kind:not(.house-name) { display: none; }
.stones-spot-name { margin-top: 4px; padding: 2px 6px; border-radius: 4px; background: var(--al-red-tint); color: var(--al-red-deep); font: 600 10.5px/1.3 var(--al-mono); word-break: break-word; overflow-wrap: anywhere; max-width: 100%; box-sizing: border-box; }
.stones-legend i.fl-spot { border-radius: 3px; background: transparent; box-shadow: 0 0 0 2px var(--al-red); }

/* ---------- 11 Run AUTOMATA then 12 Sign ---------- */
body.stones-on #stonesAuto {
  margin: 0 !important; margin-top: auto !important; padding: 16px !important; border-radius: 18px !important;
  border: 2px solid var(--al-line) !important; background: var(--al-surface) !important; box-shadow: 0 14px 34px rgba(43, 40, 44, .10) !important;
  transition: border-color .45s ease, box-shadow .55s ease;
}
body.stones-on #stonesAuto.is-now { border-color: var(--al-red) !important; box-shadow: 0 18px 44px rgba(217, 65, 44, .20), 0 0 0 4px var(--al-red-tint) !important; }
.stones-auto-head { display: flex; align-items: center; gap: 10px; }
.stones-auto-head b { font: 800 15px/1 var(--al-head); color: var(--al-ink); }
.stones-auto-then { font: 600 11px/1 var(--al-mono); color: var(--al-muted); text-transform: uppercase; letter-spacing: .1em; }
.stones-auto-head .stone-light { margin-left: auto; }
#stonesAutoLine { display: block; margin: 6px 0 12px; }
.stones-auto-body { display: flex; flex-direction: column; gap: 12px; }
body.stones-on .stones-auto-body > * { margin: 0 !important; box-shadow: none !important; border: 0 !important; background: transparent !important; padding: 0 !important; }
body.stones-on #runAutomataBtn {
  width: 100% !important; min-height: 68px !important; border-radius: 16px !important; font: 900 20px/1 var(--al-head) !important; letter-spacing: .14em !important; text-transform: uppercase;
}
body.stones-on #stonesAuto.is-now #runAutomataBtn:not(:disabled) { animation: stonesBreath 3.2s ease-in-out infinite; }
body.stones-on #homeMergeDock .button-row, body.stones-on #homeMergeDock .merge-dock-row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

/* ---------- nothing picked yet: everything but Student waits, visibly ---------- */
body.stones-on.stones-nostudent #home-view .stone:not(#stone-student):not(#stone-caseload):not(#stone-template) { opacity: .55; }

/* ---------- windows open inside windows ---------- */
body.stones-on .obs-modal:not(.hidden) .obs-modal-backdrop { animation: stonesFade .35s ease both; }
body.stones-on .obs-modal:not(.hidden) .obs-modal-panel { animation: stonesPop .5s cubic-bezier(.2, 1.2, .3, 1) both; }

/* ---------- settings switch ---------- */
.stones-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }

/* ---------- motion ---------- */
@keyframes stonesPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 106, 26, .55); } 70% { box-shadow: 0 0 0 8px rgba(255, 106, 26, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 106, 26, 0); } }
@keyframes stonesDone { 0% { box-shadow: 0 0 0 0 rgba(47, 160, 90, .5); } 40% { box-shadow: 0 0 0 10px rgba(47, 160, 90, .12); } 100% { box-shadow: 0 0 0 0 rgba(47, 160, 90, 0); } }
@keyframes stonesSlide { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes stonesTick { 0% { transform: scale(.4); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes stonesLinked { 0% { transform: scale(.6) rotate(-12deg); } 60% { transform: scale(1.18) rotate(4deg); } 100% { transform: none; } }
@keyframes stonesFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes stonesPop { from { opacity: 0; transform: translateY(22px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes stonesBreath { 0%, 100% { box-shadow: 0 10px 24px rgba(217, 65, 44, .28); } 50% { box-shadow: 0 14px 36px rgba(217, 65, 44, .48); } }
@media (prefers-reduced-motion: reduce) {
  body.stones-on *, body.stones-on *::before, body.stones-on *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- fit and balance ---------- */
body.stones-on #home-view > .picker > *, body.stones-on #home-view > .ready-pane > *, body.stones-on #activeBoard > * { flex-shrink: 0 !important; }
body.stones-on #home-view #stonesRing #railProgress, body.stones-on #home-view .stones-hidden { display: none !important; }
body.stones-on .stone .survey-grid { grid-template-columns: minmax(0, 1fr) !important; }
body.stones-on .stone .survey-grid > .survey-block { grid-column: 1 / -1 !important; grid-row: auto !important; }
body.stones-on .stone .survey-grid .action-row, body.stones-on .stone .survey-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
body.stones-on .stone .survey-block-head { flex-wrap: wrap; gap: 8px; }
body.stones-on .stone .survey-block-head h4, body.stones-on .stone .survey-block-head h3 { white-space: nowrap; }
body.stones-on .stones-required .ready-bar { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; }
body.stones-on .stones-required .ready-item { display: flex !important; align-items: center; gap: 10px; padding: 7px 10px; min-height: 34px; background: var(--al-mist); font: 500 12.5px/1.3 var(--al-head); color: var(--al-ink); }
body.stones-on .stones-required .ready-item.is-done, body.stones-on .stones-required .ready-item:has(.tick.done) { background: var(--al-ok-tint); color: var(--al-muted); }
body.stones-on #home-view .stones-required .ready-item .tick { display: inline-block; }
body.stones-on .stones-required .ready-item small { font: 500 10px/1 var(--al-mono); color: var(--al-muted); margin-left: auto; }
body.stones-on .stones-req-docs #requiredUploads > h3, body.stones-on .stones-req-docs #requiredUploads > .section-title-row { display: none !important; }
body.stones-on #home-view .stones-required .ready-item .tick { display: inline-block !important; visibility: visible !important; position: relative; flex: 0 0 16px; width: 16px !important; height: 16px !important; border-radius: 50%; border: 2px solid var(--al-line); box-sizing: border-box; background: var(--al-surface); }
body.stones-on #home-view .stones-required .ready-item .tick.done { background: var(--al-ok) !important; border-color: var(--al-ok) !important; }
body.stones-on #home-view .stones-required .ready-item .tick.done::after { content: "" !important; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
body.stones-on .stone-pad #uploadsPanel { margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; }
body.stones-on .stone-pad #uploadsPanel > .section-title-row { display: none !important; }
body.stones-on .stone-pad #fileDropzone { min-height: 0 !important; padding: 10px !important; }
body.stones-on .stone-pad #fileTray { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; overflow: visible !important; max-height: none !important; flex-wrap: wrap !important; }
body.stones-on .stone-pad #fileTray > .file-card { width: auto !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; flex: none !important; }

/* ---------- Graphs, Insert Images, Polish: small links inside the Run AUTOMATA box (Kevin, 2026-10-02) ---------- */
body.stones-on #stonesAuto .stones-links { display: none !important; }
body.stones-on .stones-links-title { font: 700 10.5px/1 var(--al-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--al-muted); }
body.stones-on .stones-links-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; counter-reset: stonesLink; }
body.stones-on #stonesAuto .stones-link { position: relative; display: flex !important; flex-direction: column; gap: 4px; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; min-width: 0; }
body.stones-on #stonesAuto .stones-link > .section-title-row,
body.stones-on #stonesAuto .stones-link h3,
body.stones-on #stonesAuto .stones-link [id$="Preview"],
body.stones-on #stonesAuto .stones-link .muted { display: none !important; }
body.stones-on #stonesAuto .stones-link + .stones-link::before {
  content: ""; position: absolute; left: -6px; top: 15px; width: 6px; height: 2px; background: var(--al-line);
}
body.stones-on #home-view #stonesAuto button.stones-link-btn {
  width: 100% !important; min-height: 32px !important; height: 32px !important; padding: 0 8px !important; border-radius: 999px !important;
  font: 700 11.5px/1 var(--al-head) !important; letter-spacing: .01em !important; text-transform: none !important; white-space: nowrap !important;
  overflow: hidden; text-overflow: ellipsis;
}
body.stones-on #home-view #stonesAuto button.stones-link-btn:not(:disabled):not(.al-ran):not([data-done="1"]) {
  background: var(--al-surface) !important; background-image: none !important; color: var(--al-red-deep) !important;
  border: 1px solid var(--al-red) !important; box-shadow: none !important; text-decoration: underline; text-underline-offset: 3px;
}
body.stones-on #home-view #stonesAuto button.stones-link-btn:disabled { box-shadow: inset 0 2px 5px rgba(0, 0, 0, .25) !important; }
body.stones-on #stonesAuto .stones-link .status-line { font: 500 10.5px/1.3 var(--al-mono) !important; margin: 0 !important; color: var(--al-muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
body.stones-on #stonesAuto .stones-link .status-line:empty { display: none; }
body.stones-on #home-view #stonesAuto button.stones-link-btn:not(.mo-wake):not(.mo-ran) { margin: 0 !important; transform: none !important; }
body.stones-on #home-view #stonesAuto .stones-links-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: start !important;
  gap: 8px !important;
}
body.stones-on #home-view #stonesAuto .stones-link .action-row {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}
body.stones-on #home-view #stonesAuto .stones-link + .stones-link::before { display: none !important; }
body.stones-on #home-view #stonesAuto button.stones-link-btn,
body.stones-on #home-view #stonesAuto #homeGraphBtn,
body.stones-on #home-view #stonesAuto #insertImagesBtn,
body.stones-on #home-view #stonesAuto #homePolishBtn {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  text-align: center !important;
  white-space: normal !important;
  font: 700 12px/1.15 var(--al-head) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Kevin, 2026-10-03: "the dropdown doesnt click - it loads the last student i
   used." It did open — it was being cut off. A stone clips its own contents
   (twice: the card for its rounded corners, and the inner box for the
   open/close slide), so the student list hung outside its card and all but the
   top couple of rows were invisible. With 56 students that is a list you cannot
   use, which looks exactly like a dropdown that does nothing.

   The clipping is lifted ONLY while the list is open, so the slide still looks
   right every other moment, and the list is raised above the stones under it. */
body.stones-on #home-view .stone:has(#studentSelectMenu:not(.hidden)),
body.stones-on #home-view .stone:has(#studentSelectMenu:not(.hidden)) .stone-body,
body.stones-on #home-view .stone:has(#studentSelectMenu:not(.hidden)) .stone-inner {
  overflow: visible;
}
body.stones-on #home-view .stone:has(#studentSelectMenu:not(.hidden)) { z-index: 90; }
body.stones-on #studentSelectMenu:not(.hidden) { z-index: 95; }

/* Kevin, 2026-10-03: in the Student stone the Notify Team button ran under the
   Path box. The stone is narrower than the old panel, so Consent + Notify Team
   get their own full row and Path / ELL sit side by side under it. */
body.stones-on #studentDemoFields .demo-grid > .ap-in-row { grid-column: 1 / -1; }

/* ---------- dark redesign (Kevin, 2026-10-03) ----------
   Charcoal ground, warm off-white type, vivid orange on the step you are
   on, the ring, and primary actions. Tokens live on the home screen only,
   so the writer and Settings > Look > off (classic) stay the day look.
   The Notify Team / Path row above is unchanged. */
body.stones-on #home-view {
  color-scheme: dark;
  --al-paper: #12110F;
  --al-surface: #1C1916;
  --al-mist: #2A2521;
  --al-line: #3C352F;
  --al-line-soft: #2E2925;
  --al-ink: #F3EEE6;
  --al-charcoal: #E6DDD2;
  --al-muted: #B7AB9E;
  /* Kevin, 2026-10-30: "orange is fine for highlights, ombre, lighting, etc,
     but not solid text". The screen's red is the brand's night red; orange is
     kept only for glows, gradients and the lights. */
  --al-red: #E8553F;
  --al-red-deep: #F27A66;
  --al-red-tint: rgba(232, 85, 63, .18);
  --al-ok: #3DDC84;
  --al-ok-tint: #173226;
  --al-warn: #E8A23A;
  --al-warn-tint: #3A2A14;
  --al-done: #E85D04;
  --al-done-deep: #FF7A2E;
  --al-done-tint: #3A2414;
  --faint: #8C8278;
  --al-blocked: #3A342E;
  --al-blocked-deep: #2A2622;
  --al-blocked-ink: #D2C8BC;
  --al-blocked-line: #524A43;
  --mist: var(--al-mist);
  --navy: var(--al-ink);
  --navy-deep: var(--al-ink);
  --blue: var(--al-red);
  --blue-bright: var(--al-red);
  --blue-soft: var(--al-red-tint);
  --ink: var(--al-ink);
  --muted: var(--al-muted);
  --line: var(--al-line);
  --line-soft: var(--al-line-soft);
  --bg: var(--al-paper);
  --card: var(--al-surface);
  --sunken: #0E0C0B;
  --ok: var(--al-ok);
  --ok-soft: var(--al-ok-tint);
  --warn: var(--al-warn);
  --warn-soft: var(--al-warn-tint);
  --danger: #FF8A62;
  --danger-soft: var(--al-red-tint);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .45);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, .5);
  --shadow-md: 0 10px 24px rgba(0, 0, 0, .45);
  --shadow-lg: 0 18px 40px rgba(0, 0, 0, .55);
  color: var(--al-ink);
  background: #0E0C0B !important;
  background-image: none !important;
}
body.stones-on #home-view .app-banner,
body.stones-on #home-view .app-footer {
  background: #161310 !important;
  background-image: none !important;
  border-color: var(--al-line) !important;
  box-shadow: none !important;
  color: var(--al-ink);
}
body.stones-on #home-view .app-banner-name {
  color: var(--al-red) !important;
  background: none !important;
  -webkit-text-fill-color: var(--al-red) !important;
}
body.stones-on #home-view .panel,
body.stones-on #home-view .rail-panel,
body.stones-on #home-view .survey-panel,
body.stones-on #home-view .survey-block,
body.stones-on #home-view .file-card {
  background-color: var(--al-surface);
  background-image: none;
  border-color: var(--al-line);
  color: var(--al-ink);
}
body.stones-on #home-view .stone.is-now .stone-num,
body.stones-on #home-view .stones-auto.is-now .stone-num {
  background: var(--al-red);
  border-color: var(--al-red);
  color: #1A120C;
}
body.stones-on #home-view .stone.is-open {
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5), 0 0 0 3px rgba(255, 106, 26, .28) !important;
}
body.stones-on #home-view #stonesRing {
  background: #161310 !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .45) !important;
}
body.stones-on #home-view #homeStatusWindow.stones-status {
  background: #161310 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 106, 26, .12) !important;
}
body.stones-on #home-view #homeStatusFeed,
body.stones-on #home-view .status-feed {
  color: var(--al-charcoal);
  border-top-color: var(--al-line);
}
body.stones-on #home-view .status-item {
  color: var(--al-ink);
  border-bottom-color: var(--al-line-soft);
}
body.stones-on #home-view .status-item.ok .status-text,
body.stones-on #home-view .status-now.ok,
body.stones-on #home-view .status-job.is-done .status-job-pct { color: var(--al-ok); }
body.stones-on #home-view .status-item.warn .status-text,
body.stones-on #home-view .status-now.warn { color: var(--al-warn); }
body.stones-on #home-view .status-job {
  background: var(--al-mist);
  background-image: none;
  border-color: var(--al-line);
}
body.stones-on #home-view .status-job-track { background: #0E0C0B; box-shadow: none; }
body.stones-on #home-view .status-job-fill {
  background-image: linear-gradient(90deg, #FF6A1A, #FFB020);
}
body.stones-on #home-view .status-pulse { background: var(--al-line); }
body.stones-on #home-view button:not(.rail-badge):not(.stone-head):not(.toggle-switch):not(.chip):not(.icon-btn):not(.file-open):not(.apin-light):not(.student-select-option):not(.stones-link-btn):not(#studentSelectClear) {
  background-color: var(--al-mist);
  background-image: none;
  color: var(--al-ink);
  border-color: var(--al-line);
  text-shadow: none;
}
body.stones-on #home-view .primary-btn,
body.stones-on #home-view .merge-btn,
body.stones-on #home-view .compose-btn,
body.stones-on #home-view .rail-connect-btn,
body.stones-on #home-view .rail-act,
body.stones-on #home-view .extractor-btn,
body.stones-on #home-view .notify-team-btn,
body.stones-on #home-view .survey-actions button,
body.stones-on #home-view .form-actions button,
body.stones-on #home-view .action-row > button,
body.stones-on #home-view #runAutomataBtn {
  background-color: #FF6A1A;
  background-image: linear-gradient(180deg, #FF9448 0%, #FF6A1A 52%, #D24E08 100%);
  border-color: #C44708;
  color: #1A120C;
  text-shadow: none;
}
body.stones-on #home-view textarea,
body.stones-on #home-view input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.stones-on #home-view select {
  background: #0E0C0B;
  color: var(--al-ink);
  border-color: var(--al-line);
}
body.stones-on #home-view label { color: var(--al-charcoal); }
body.stones-on #home-view .dropzone { border-color: var(--al-line); }
body.stones-on #home-view .dropzone:not(.is-empty) .dropzone-target {
  background: #0E0C0B;
  border-color: var(--al-line);
}
body.stones-on #home-view .student-select-option:hover { background: var(--al-mist); }

/* ---------- night panels that kept a day-white ground (Kevin, 2026-10-07) ----------
   "some of the text is white on white background (required components)".
   These boxes still had a hard white fill from the day look while their words
   took the night ink, so the words vanished. Same night colours as the rest
   of the board: dark ground, warm off-white words, green for done. */
body.stones-on #home-view #checklistHover {
  background: #0E0C0B;
  border-color: var(--al-line);
  box-shadow: none;
}
body.stones-on #home-view #fullChecklist h4 { color: var(--al-charcoal); }
body.stones-on #home-view #fullChecklist h4.is-complete { color: var(--al-ok); }
body.stones-on #home-view #fullChecklist .check-row { color: var(--al-ink); }
body.stones-on #home-view #fullChecklist .check-row.is-done { color: var(--al-muted); }
body.stones-on #home-view #fullChecklist .check-row:hover { background: var(--al-mist); }
body.stones-on #home-view #fullChecklist .check-row.is-stale { background: var(--al-warn-tint); color: var(--al-warn) !important; }
body.stones-on #home-view #fullChecklist input[type="checkbox"] { accent-color: var(--al-ok); }
body.stones-on #home-view #fullChecklist .tick {
  background: #0E0C0B;
  border-color: var(--al-line);
  box-shadow: none;
}
body.stones-on #home-view #fullChecklist .tick.done { background: var(--al-ok); border-color: var(--al-ok); }
body.stones-on #home-view .al-help {
  background: var(--al-mist);
  color: var(--al-ink);
  border-color: var(--al-line);
}
body.stones-on #home-view .al-help:hover { background: var(--al-red-tint); color: var(--al-red-deep); }
body.stones-on #home-view .rail-connect-copy { background: var(--al-mist); color: var(--al-ink); }
body.stones-on #home-view .teacher-roster .teacher-row {
  background: var(--al-surface);
  border-color: var(--al-line);
  color: var(--al-ink);
}
body.stones-on #home-view #testsGivenList .tg-head,
body.stones-on #home-view #testsGivenList .tg-rows {
  background: var(--al-surface);
  border-color: var(--al-line);
  color: var(--al-charcoal);
}
body.stones-on #home-view #testsGivenList .tests-given-group.is-open > .tg-head { background: var(--al-red-tint); }
body.stones-on #home-view #testsGivenList .tg-name,
body.stones-on #home-view #testsGivenList .tests-given-group h4,
body.stones-on #home-view #testsGivenList .tg-picked,
body.stones-on #home-view #testsGivenList .tests-given-row,
body.stones-on #home-view #testsGivenList .tests-given-row span { color: var(--al-ink); }
body.stones-on #home-view #testsGivenList .tests-given-group:not(.has-picked) .tg-picked,
body.stones-on #home-view #testsGivenList .tg-head::before { color: var(--al-muted); }
/* A title's red first letter is never flipped to black on the night board:
   the ground there is always dark, so a black letter disappeared ("tatus and
   Activity", "equired Documents"). Titles here are never red themselves. */
body.stones-on #home-view h1 .bl-f.bl-flip,
body.stones-on #home-view h2 .bl-f.bl-flip,
body.stones-on #home-view h3 .bl-f.bl-flip,
body.stones-on #home-view h4 .bl-f.bl-flip { color: #FFFFFF !important; }
body.stones-on #home-view input::placeholder,
body.stones-on #home-view textarea::placeholder { color: var(--al-muted); opacity: 1; }

/* ---------- night readability sweep (Kevin, 2026-10-07: "YES") ----------
   Every word on the night board measured against what is behind it; these
   were under 3:1. Orange buttons and counts take the dark ink the other
   orange buttons already use; the brand's first letters take the night
   orange; the caseload name and the progress card are lifted. */
body.stones-on #home-view .bl-f:not(.bl-flip),
body.stones-on #home-view .bl-a:not(.bl-flip) { color: var(--al-red); }
body.stones-on #home-view .rail-badge-title { color: var(--al-charcoal) !important; }
body.stones-on #home-view #railProgress {
  background: var(--al-surface) !important;
  background-image: none !important;
  border-color: var(--al-line) !important;
  color: var(--al-ink);
}
body.stones-on #home-view #railProgress .progress-label,
body.stones-on #home-view #railProgress #readyPct,
body.stones-on #home-view #railProgress #readyPercent { color: var(--al-ink) !important; }
body.stones-on #home-view .al-flow button.now .n { color: #1A120C; }

/* ---------- 2026-10-08 (Kevin): windows match the charcoal home; Run AUTOMATA is the house red ----------
   stones-layout.js locks the night look while Stepping Stones is on, so every pop-up, side window
   and dialog takes the night rules. These lines warm that palette to the same charcoal as the home
   (set on body, so they beat the night values on :root) and the windows read as one screen. */
body.stones-on {
  --al-paper: #12110F; --al-surface: #1C1916; --al-mist: #2A2521;
  --al-line: #3C352F; --al-line-soft: #2E2925; --al-edge: rgba(255, 255, 255, .08);
  --al-ink: #F3EEE6; --al-charcoal: #E6DDD2; --al-muted: #B7AB9E; --faint: #8C8278;
  --al-wash-1: #1C1916; --al-wash-2: #16140F; --al-wash-3: #12110F;
  --card: #1C1916; --line: #3C352F; --text: #F3EEE6;
}
body.stones-on .obs-modal .obs-modal-panel, body.stones-on .obs-modal .obs-card, body.stones-on .obs-modal .obs-card > summary {
  background-image: linear-gradient(180deg, #221E1B 0%, #1A1714 100%);
  border-color: var(--al-line);
}
body.stones-on .obs-modal .obs-card, body.stones-on .obs-modal .obs-card > summary { background-image: none; background-color: var(--al-surface); }
body.stones-on .obs-modal .obs-modal-backdrop { background: rgba(8, 7, 6, .72); }
body.stones-on #dataScraperDialog { background: var(--card); color: var(--text); border-color: var(--line); }

/* Kevin, 2026-10-08: "make the AUTOMATA button the house red". Only Run AUTOMATA; the other job buttons stay orange.
   (:not(#hs0):not(#hs1) only adds weight, so this beats the all-buttons mist rule above, which carries :not(#studentSelectClear).) */
body.stones-on #home-view #runAutomataBtn:not(#hs0):not(#hs1):not(:disabled):not([aria-disabled="true"]) {
  background-color: #D9412C;
  background-image: linear-gradient(180deg, #E8553F 0%, #D9412C 55%, #B8321F 100%);
  border-color: #B8321F;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
}
body.stones-on #home-view #runAutomataBtn:not(#hs0):not(#hs1):not(:disabled):not([aria-disabled="true"]):hover {
  background-image: linear-gradient(180deg, #D9412C 0%, #B8321F 100%);
}
body.stones-on #stonesAuto.is-now { border-color: #D9412C !important; box-shadow: 0 18px 44px rgba(217, 65, 44, .22), 0 0 0 4px rgba(217, 65, 44, .18) !important; }
/* the red first letter reads white on the red button (same weight trick as above) */
body.stones-on #home-view #runAutomataBtn:not(#hs0):not(#hs1):not(:disabled):not([aria-disabled="true"]) .bl-a { color: #fff; }

/* ---------- 2026-10-08 (Kevin): the banner. AUTOMATA big and centred, the glowing bell curve under it ---------- */
body.stones-on #appBanner { min-height: 188px !important; padding-top: 36px !important; padding-bottom: 18px !important; }
body.stones-on #appBanner .app-banner-logo { height: 76px; max-width: 104px; }
body.stones-on #appBanner .app-banner-brand {
  position: absolute !important; left: 50% !important; top: 54% !important; transform: translate(-50%, -50%) !important;
  display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 10px; row-gap: 0;
  padding: 0 !important; margin: 0 !important; width: max-content; max-height: 176px;
}
body.stones-on #appBanner .app-banner-brand > .app-banner-name, body.stones-on #appBanner .app-banner-brand > .banner-bell, body.stones-on #appBanner .app-banner-brand > .app-banner-product { flex: 0 0 100%; }
body.stones-on #appBanner .app-banner-name { font-size: 48px !important; letter-spacing: .32em !important; text-indent: .32em !important; line-height: 1 !important; margin: 0 !important; }
body.stones-on #appBanner .banner-bell { display: block; margin: -2px 0 0; line-height: 0; }
body.stones-on #appBanner .banner-bell svg { display: block; width: 360px; height: 86px; overflow: visible; margin: 0 auto; }
body.stones-on #appBanner .bell-glow { fill: none; stroke: #FF7A2E; stroke-width: 7; opacity: .55; }
body.stones-on #appBanner .bell-line { fill: none; stroke: url(#bellStroke); stroke-width: 2.2; stroke-linecap: round; }
body.stones-on #appBanner .bell-base { stroke: rgba(243, 238, 230, .28); stroke-width: 1; }
body.stones-on #appBanner .bell-center { stroke: #F3EEE6; stroke-width: 1.2; stroke-dasharray: 3 3; opacity: .85; }
body.stones-on #appBanner .bell-num { fill: #FFFFFF; font: 600 9.5px/1 var(--al-mono); letter-spacing: .02em; }
body.stones-on #appBanner .app-banner-product { font-size: 9px !important; letter-spacing: .2em !important; margin: 0 !important; line-height: 1.2 !important; text-align: center; }
body.stones-on #appBanner .app-banner-version { margin: 2px 0 0 !important; }
body.stones-on #appBanner .app-banner-datalock { margin: 2px 0 0 !important; }
body.stones-on #appBanner .al-banner-right { top: 50% !important; transform: translateY(-50%); }
body.stones-on #appBanner .app-banner-left { align-self: center; }
/* the AP IN light is a 10px dot, never a box (:not(#hs…) only adds weight, to beat the all-buttons rule above) */
body.stones-on #appBanner #bannerApinLight:not(#hs0):not(#hs1):not(#hs2):not(#hs3) { width: 10px !important; height: 10px !important; min-width: 10px !important; min-height: 10px !important; padding: 0 !important; border-radius: 50% !important; box-shadow: none !important; transform: none !important; border: 0 !important; }
body.stones-on #appBanner #bannerApinLight.is-amber:not(#hs0):not(#hs1):not(#hs2):not(#hs3) { box-shadow: 0 0 0 3px rgba(224, 161, 42, .22) !important; }
body.stones-on #appBanner #bannerApinLight.is-green:not(#hs0):not(#hs1):not(#hs2):not(#hs3) { box-shadow: 0 0 0 3px rgba(47, 158, 105, .20) !important; }
/* Snapshot retired 2026-10-08 */
body.stones-on #bannerSnapshotBtn { display: none !important; }

/* ---------- the student picture tile at the top of the middle column ---------- */
body.stones-on #home-view #stonesPhotoTile {
  display: grid !important; grid-template-rows: 1fr auto; justify-items: center; align-items: center; gap: 8px;
  width: 100% !important; min-height: 168px !important; margin: 0 0 12px !important; padding: 14px !important;
  border-radius: 18px !important; border: 1px dashed var(--al-line) !important;
  background: var(--al-surface) !important; background-image: none !important; color: var(--al-muted) !important;
  box-shadow: none !important; cursor: pointer !important; position: relative; transform: none !important; filter: none !important; opacity: 1 !important;
}
body.stones-on #home-view #stonesPhotoTile:hover { border-color: #D9412C !important; box-shadow: 0 0 0 4px rgba(217, 65, 44, .16) !important; }
body.stones-on #home-view #stonesPhotoTile[hidden] { display: none !important; }
body.stones-on #home-view #stonesPhotoTile .spt-pic {
  display: block; width: 112px; height: 112px; border-radius: 50%; box-sizing: border-box;
  background: #3A342E center / cover no-repeat; position: relative; overflow: hidden;
}
body.stones-on #home-view #stonesPhotoTile:not(.has-photo) .spt-pic::before {
  content: ""; position: absolute; left: 50%; top: 20%; width: 36%; height: 36%; transform: translateX(-50%); border-radius: 50%; background: #8C8278;
}
body.stones-on #home-view #stonesPhotoTile:not(.has-photo) .spt-pic::after {
  content: ""; position: absolute; left: 50%; bottom: -24%; width: 80%; height: 62%; transform: translateX(-50%); border-radius: 50%; background: #8C8278;
}
body.stones-on #home-view #stonesPhotoTile .spt-plus {
  position: absolute; left: calc(50% + 28px); top: 88px; width: 36px; height: 36px; border-radius: 50%;
  background: #D9412C; box-shadow: 0 2px 0 rgba(0, 0, 0, .45), 0 6px 14px rgba(0, 0, 0, .4);
}
body.stones-on #home-view #stonesPhotoTile .spt-plus::before, body.stones-on #home-view #stonesPhotoTile .spt-plus::after {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #FFFFFF; border-radius: 2px;
}
body.stones-on #home-view #stonesPhotoTile .spt-plus::before { width: 18px; height: 3px; }
body.stones-on #home-view #stonesPhotoTile .spt-plus::after { width: 3px; height: 18px; }
body.stones-on #home-view #stonesPhotoTile.has-photo .spt-pic { border: 3px solid #D9412C; }
body.stones-on #home-view #stonesPhotoTile .spt-cap { display: none !important; }
/* Kevin, 2026-10-15: the picture sits upper left, beside the logo. Name stays above the SID. */
body.stones-on #appBanner #stonesPhotoTile {
  width: 56px !important; height: 56px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important;
  border-radius: 50% !important; grid-template-rows: 1fr !important; flex: 0 0 auto;
}
body.stones-on #appBanner #stonesPhotoTile .spt-pic { width: 56px; height: 56px; }
body.stones-on #appBanner #stonesPhotoTile .spt-plus { left: auto; right: -4px; top: auto; bottom: -2px; width: 22px; height: 22px; }
body.stones-on #appBanner #stonesPhotoTile .spt-plus::before { width: 12px; }
body.stones-on #appBanner #stonesPhotoTile .spt-plus::after { height: 12px; }
body.stones-on #appBanner .al-banner-right { align-items: center; }
body.stones-on #appBanner .al-banner-right > .al-help,
body.stones-on #appBanner .al-banner-right > #settingsOpenBtn,
body.stones-on #appBanner .al-banner-right > #bannerAccountBtn,
body.stones-on #appBanner .al-banner-right > #bannerDataLock {
  box-sizing: border-box !important; height: 26px !important; min-height: 26px !important; max-height: 26px !important;
  padding: 0 8px !important; margin: 0 !important; border-radius: 7px !important;
  font: 600 11px/1 var(--al-head) !important; letter-spacing: .02em !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
body.stones-on #appBanner .app-banner-datalock { letter-spacing: .08em !important; }
body.stones-on .stones-folded { display: none !important; }
body.stones-on #home-view #studentPhotoSpot { display: none !important; }

/* ---------- the four middle steps sit shorter ---------- */
body.stones-on #home-view #stone-tests > .stone-head, body.stones-on #home-view #stone-generate > .stone-head,
body.stones-on #home-view #stone-uploads > .stone-head, body.stones-on #home-view #stone-input > .stone-head { min-height: 48px !important; padding: 7px 14px !important; gap: 10px; }
body.stones-on #home-view #stone-tests, body.stones-on #home-view #stone-generate,
body.stones-on #home-view #stone-uploads, body.stones-on #home-view #stone-input { margin-bottom: 8px !important; }
body.stones-on #home-view #stone-tests .stone-name b, body.stones-on #home-view #stone-generate .stone-name b,
body.stones-on #home-view #stone-uploads .stone-name b, body.stones-on #home-view #stone-input .stone-name b { font-size: 14px; }
body.stones-on #home-view #stone-tests .stone-line, body.stones-on #home-view #stone-generate .stone-line,
body.stones-on #home-view #stone-uploads .stone-line, body.stones-on #home-view #stone-input .stone-line { font-size: 10.5px; }

/* ---------- left column first, then middle and right together ----------
   Kevin, 2026-10-15: left and status until the template is linked.
   Kevin, 2026-10-16: one press makes the report Doc itself, so Run AUTOMATA
   must be reachable BEFORE the Doc exists. 2026-10-22 (Natalie Garcia): the
   right column used to stay hidden until the Doc existed, which hid the only
   Run AUTOMATA button and made the press impossible for a new student. The
   middle and right columns now open together once the template is linked. */
body.stones-on #home-view.app-shell[data-stones-phase="setup"] { grid-template-columns: minmax(0, 1fr) !important; }
body.stones-on #home-view[data-stones-phase="setup"] > .board,
body.stones-on #home-view[data-stones-phase="setup"] > .ready-pane { display: none !important; }
body.stones-on #home-view[data-stones-phase="setup"] > .picker {
  display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  column-gap: 20px !important; row-gap: 8px !important; align-items: start; align-content: start;
  max-width: 980px; width: 100%; margin-left: auto !important; margin-right: auto !important;
  padding: 20px 28px 32px !important;
}
body.stones-on #home-view[data-stones-phase="setup"] > .picker > .stone { grid-column: 1; }
body.stones-on #home-view[data-stones-phase="setup"] > .picker > #homeStatusWindow {
  grid-column: 2; grid-row: 1 / span 6; position: sticky; top: 16px; align-self: start;
  max-height: calc(100vh - 200px);
}
body.stones-on #home-view[data-stones-phase="setup"] #homeStatusWindow.stones-status { min-height: 420px; }
body.stones-on #home-view[data-stones-phase="setup"] #homeStatusFeed {
  height: auto !important; max-height: calc(100vh - 340px) !important; flex: 1 1 auto;
}

/* ---------- left stones and the status: quieter, tighter ---------- */
body.stones-on #home-view > .picker { gap: 8px !important; padding: 14px 14px 24px !important; }
body.stones-on #home-view > .picker .stone {
  border-radius: 12px !important; border-color: rgba(243, 238, 230, .1) !important;
  background: #171411 !important; box-shadow: none !important;
}
body.stones-on #home-view > .picker .stone.is-open {
  border-color: rgba(255, 106, 26, .45) !important; background: #1C1814 !important;
  box-shadow: inset 3px 0 0 #FF6A1A !important;
}
body.stones-on #home-view > .picker .stone.is-done:not(.is-open) { border-color: rgba(47, 125, 85, .35) !important; }
body.stones-on #home-view > .picker .stone > .stone-head {
  min-height: 48px !important; padding: 8px 12px !important; gap: 10px;
  grid-template-columns: 26px minmax(0, 1fr) 8px 12px;
}
body.stones-on #home-view > .picker .stone-num { width: 24px; height: 24px; font-size: 11px; border-width: 1.5px; }
body.stones-on #home-view > .picker .stone-name b { font-size: 14px; font-weight: 650; letter-spacing: .015em; }
body.stones-on #home-view > .picker .stone-line { margin-top: 1px; font-size: 11px; }
body.stones-on #home-view > .picker .stone-pad { padding: 0 14px 14px; gap: 10px; }
body.stones-on #home-view #homeStatusWindow.stones-status {
  border-radius: 12px !important; border-color: rgba(243, 238, 230, .1) !important;
  background: #171411 !important; box-shadow: none !important; padding: 12px 14px !important;
}
body.stones-on #home-view #homeStatusWindow.is-busy {
  border-color: rgba(240, 122, 58, .5) !important; box-shadow: inset 0 2px 0 #F07A3A !important;
}
body.stones-on #home-view #homeStatusWindow .status-window-head h3 {
  font: 650 11px/1 var(--al-mono) !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: var(--al-muted) !important;
}
body.stones-on #home-view #homeStatusFeed { mask-image: none !important; -webkit-mask-image: none !important; }
body.stones-on .stones-phase-note { margin: 0 0 10px; font: 500 12px/1.45 var(--al-mono); color: var(--al-muted); }
body.stones-on .stones-phase-note:empty,
body.stones-on .stones-phase-note[hidden] { display: none !important; }
body.stones-on .stone-line:empty { display: none !important; }
body.stones-on #railChecklistCount,
body.stones-on #intakeChecklistCount,
body.stones-on #requiredUploadsCount,
body.stones-on #stonesDocsCount,
body.stones-on .ess-count,
body.stones-on .gb-level,
body.stones-on .checklist-summary,
body.stones-on .cs-val,
body.stones-on .section-meter-val { display: none !important; }

/* A clicked required row, or caseload data that just changed, bulges once. */
@keyframes stonesBulge { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
body.stones-on .stones-bulge { animation: stonesBulge .38s cubic-bezier(.2, 1.4, .3, 1); transform-origin: center left; }

/* Every popup and the footer use the same charcoal as the home. */
body.stones-on .obs-modal-panel,
body.stones-on .obs-modal-head,
body.stones-on .obs-modal-body,
body.stones-on .obs-modal-bar,
body.stones-on .obs-card,
body.stones-on .app-footer,
body.stones-on #writer-view,
body.stones-on #license-view {
  background-color: #1C1916 !important;
  color: #F3EEE6 !important;
  border-color: #3C352F !important;
}
body.stones-on .obs-msg.ok { background: #163028 !important; color: #8FD4AE !important; }
body.stones-on .obs-msg.err { background: #3A201C !important; color: #FFB4A6 !important; }
body.stones-on .obs-msg.info { background: #1C2430 !important; color: #D5E4F7 !important; }
body.stones-on .obs-msg.warn { background: #3A301C !important; color: #F3D48A !important; }
body.stones-on .score-box,
body.stones-on .summary-preview { background: #221E1B !important; color: #F3EEE6 !important; }

/* Section headers: one font. White titles take a red first letter. A red title takes a white first letter. */
body.stones-on #home-view .stone-name > b,
body.stones-on #home-view .stones-auto-head > b,
body.stones-on #home-view .stone-pad .section-title-row > h3,
body.stones-on #home-view .stones-required .section-title-row > h3,
body.stones-on #home-view .stones-tags .section-title-row > h3,
body.stones-on #home-view .stones-components .section-title-row > h3 {
  font: 800 15px/1.2 var(--al-head) !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  color: #F3EEE6 !important;
}
body.stones-on #home-view .stone-name > b .bl-f,
body.stones-on #home-view .stone-name > b .bl-a,
body.stones-on #home-view .stones-auto-head > b .bl-f,
body.stones-on #home-view .stones-auto-head > b .bl-a,
body.stones-on #home-view .section-title-row > h3 .bl-f,
body.stones-on #home-view .section-title-row > h3 .bl-a {
  color: #D9412C !important;
}
body.stones-on #home-view .stone.is-now > .stone-head .stone-name > b {
  color: #D9412C !important;
}
body.stones-on #home-view .stone.is-now > .stone-head .stone-name > b .bl-f,
body.stones-on #home-view .stone.is-now > .stone-head .stone-name > b .bl-a {
  color: #FFFFFF !important;
}
body.stones-on #appBanner #bannerName,
body.stones-on #appBanner #bannerSid {
  font-family: var(--al-head) !important;
  text-align: center !important;
}

/* Lights that only repeat "fine" or "waiting" stay off. Amber means read it again. Red on a file means it is gone. Blue means new. */
body.stones-on .file-light.fl-green,
body.stones-on .file-light.fl-grey,
body.stones-on .stone-light.sl-green,
body.stones-on .stone-light.sl-grey,
body.stones-on .stone-light.sl-red,
body.stones-on .srr-all { display: none !important; }

/* ---------- one look for every section header (Kevin, 2026-10-29) ----------
   "they should all be white with an initial red letter." The step you are on
   used to turn red with a white letter, and some letters were orange. Now every
   header's words are white and its first letter is the house red. */
body.stones-on #home-view .bl-w:has(> .bl-f):not(#hs0):not(#hs1) { color: #F3EEE6 !important; }
body.stones-on #home-view .stone.is-now > .stone-head .stone-name > b:not(#hs0):not(#hs1) { color: #F3EEE6 !important; }
body.stones-on #home-view .bl-w > .bl-f:not(#hs0):not(#hs1) { color: #D9412C !important; }

/* The student's first and last initials in the header are red too, to match. */
body.stones-on #appBanner #bannerName .bn-i { color: #D9412C !important; }

/* "PSYCHOEDUCATIONAL REPORT AUTOMATION", 20% larger (9px to 10.8px); the
   version number under it stays the same size. */
body.stones-on #appBanner .app-banner-brand > .app-banner-product:not(#hs0) { font-size: 10.8px !important; }

/* ---------- Download PDF · Open Doc · Copy Link (Kevin, 2026-10-29) ----------
   "side by side (same size, color, shape, font, in line horizontally)". */
body.stones-on #home-view #homeMergeDock > .report-trio:not(#hs0) { visibility: visible !important; pointer-events: auto !important; display: grid !important; }
body.stones-on #home-view .report-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; margin: 8px 0 0; }
body.stones-on #home-view .report-trio > .trio-btn:not(#hs0):not(#hs1):not(#hs2):not(#hs3):not(#hs4):not(#hs5):not(#hs6):not(#hs7) {
  width: 100% !important; min-width: 0 !important; height: 42px !important; min-height: 42px !important;
  margin: 0 !important; padding: 0 8px !important; border-radius: 8px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: #2B282E !important; background-image: none !important; border: 1px solid #3A363D !important;
  color: #F3EEE6 !important; box-shadow: none !important;
  font: 700 12.5px/1.1 var(--al-head) !important; letter-spacing: .02em !important; text-transform: none !important;
  white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; transform: none !important; box-sizing: border-box !important;
}
body.stones-on #home-view .report-trio > .trio-btn:not(#hs0):not(#hs1):not(#hs2):not(#hs3):not(#hs4):not(#hs5):not(#hs6):not(#hs7):not(:disabled):hover { border-color: #D9412C !important; }
body.stones-on #home-view .report-trio > .trio-btn:not(#hs0):not(#hs1):not(#hs2):not(#hs3):not(#hs4):not(#hs5):not(#hs6):not(#hs7):disabled { opacity: .5 !important; }
body.stones-on #home-view .report-trio > .trio-btn .bl-a { color: inherit !important; }
body.stones-on #home-view .sign-doc-row { display: none !important; }

/* Word download: a quiet line under the three buttons (Kevin, 2026-10-29 "go"). */
body.stones-on #home-view .report-trio > .trio-more { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 10px; margin: 2px 0 0; font: 600 11.5px/1.2 var(--al-head); color: #B7AB9E; }
body.stones-on #home-view .trio-more > .trio-link:not(#hs0):not(#hs1):not(#hs2):not(#hs3):not(#hs4):not(#hs5):not(#hs6):not(#hs7) {
  all: unset; cursor: pointer !important; display: inline !important; padding: 2px 2px !important;
  font: 700 11.5px/1.2 var(--al-head) !important; color: #F3EEE6 !important; background: none !important;
  border: 0 !important; border-bottom: 1px solid #D9412C !important; border-radius: 0 !important;
  box-shadow: none !important; transform: none !important; min-height: 0 !important; height: auto !important; width: auto !important;
}
body.stones-on #home-view .trio-more > .trio-link:not(#hs0):not(#hs1):not(#hs2):not(#hs3):not(#hs4):not(#hs5):not(#hs6):not(#hs7):hover:not(:disabled) { color: #D9412C !important; }
body.stones-on #home-view .trio-more > .trio-link:not(#hs0):not(#hs1):not(#hs2):not(#hs3):not(#hs4):not(#hs5):not(#hs6):not(#hs7):focus-visible { outline: 2px solid #D9412C !important; outline-offset: 2px; }
body.stones-on #home-view .trio-more > .trio-link:not(#hs0):not(#hs1):not(#hs2):not(#hs3):not(#hs4):not(#hs5):not(#hs6):not(#hs7):disabled { cursor: default !important; opacity: .45 !important; }

/* ---------- every help pop-up in night colors (Kevin, 2026-10-29) ----------
   "MAKE SURE ALL THE POPUP HELPERS ARE DARK MODE." The Help card, the help
   pages window, button tips, hover notes and the little notices all use the
   same dark card: charcoal, light words, red accents. */
body.stones-on .guide-card {
  background: #211F24 !important; color: #EDE9EA !important;
  border: 1px solid #3A363D !important; box-shadow: 0 18px 44px rgba(0, 0, 0, .55) !important;
}
body.stones-on .guide-card h2 { color: #F3EEE6 !important; }
body.stones-on .guide-card .bl-f { color: #D9412C !important; }
body.stones-on .guide-card p, body.stones-on .guide-card .guide-prompt { color: #EDE9EA !important; }
body.stones-on .guide-card .guide-why { color: #B7AB9E !important; }
body.stones-on .guide-card .guide-kicker { color: #E8553F !important; }
body.stones-on .guide-card .guide-missing { color: #F0B35A !important; }
body.stones-on .guide-actions button, body.stones-on .guide-choice button, body.stones-on .guide-x,
body.stones-on .guide-frame-bar button, body.stones-on .guide-frame-bar a, body.stones-on .guide-jobs button {
  background: #2B282E !important; color: #F3EEE6 !important; border: 1px solid #3A363D !important; box-shadow: none !important;
}
body.stones-on .guide-actions button:hover:not(:disabled), body.stones-on .guide-choice button:hover:not(:disabled),
body.stones-on .guide-x:hover, body.stones-on .guide-frame-bar button:hover, body.stones-on .guide-frame-bar a:hover,
body.stones-on .guide-jobs button:hover { border-color: #D9412C !important; }
body.stones-on .guide-actions button.is-primary, body.stones-on .guide-choice button.is-primary,
body.stones-on .guide-jobs button.is-primary { background: #D9412C !important; border-color: #D9412C !important; color: #FFFFFF !important; }
body.stones-on .guide-jobs textarea { background: #17161A !important; color: #EDE9EA !important; border-color: #3A363D !important; }
body.stones-on .guide-spot { border-color: #E8553F !important; box-shadow: 0 0 0 4px rgba(232, 85, 63, .25) !important; }
body.stones-on .guide-frame { background: #17161A !important; color: #EDE9EA !important; border: 1px solid #3A363D !important; box-shadow: 0 24px 60px rgba(0, 0, 0, .6) !important; }
body.stones-on .guide-frame-bar { background: #211F24 !important; border-bottom: 1px solid #3A363D !important; }
body.stones-on .guide-frame-bar strong { color: #E8553F !important; }
body.stones-on .guide-frame iframe { background: #17161A !important; }
body.stones-on .al-tip { background: #211F24 !important; color: #EDE9EA !important; border: 1px solid #3A363D !important; box-shadow: 0 10px 26px rgba(0, 0, 0, .5) !important; }
body.stones-on .al-tip::after { background: #211F24 !important; }
body.stones-on .al-tip b { color: #F3EEE6 !important; }
body.stones-on .al-tip span { color: #CFC7C9 !important; }
body.stones-on .hover-card { background: #211F24 !important; color: #EDE9EA !important; border: 1px solid #3A363D !important; box-shadow: 0 10px 26px rgba(0, 0, 0, .5) !important; }
body.stones-on .hover-card-how { color: #F27A66 !important; }
body.stones-on .toast { background: #211F24 !important; color: #EDE9EA !important; border: 1px solid #3A363D !important; }
body.stones-on .gb-toast { background: #211F24 !important; color: #EDE9EA !important; border: 1px solid #3A363D !important; }

/* Kevin, 2026-10-30: "move the round progress meter to the top of the right
   column" - above the Run AUTOMATA box; and no heading words over Run AUTOMATA. */
body.stones-on #home-view > .ready-pane > #stonesRing:not(#mv0):not(#mv1) { order: -2 !important; position: relative !important; top: auto !important; }
body.stones-on #stonesAuto .stones-auto-head[hidden] { display: none !important; }
body.stones-on #stonesAuto #stonesAutoLine:empty { display: none !important; }

/* ---------- the student picker, one clean field (Kevin, 2026-10-30: "it looks like shit") ----------
   The name, the clear x and the arrow all sit inside one dark field of one
   height. Nothing is raised, nothing is a separate box. */
body.stones-on #home-view .student-picker:not(#zz0):not(#zz1):not(#zz2):not(#zz3):not(#zz4):not(#zz5):not(#zz6):not(#zz7):not(#zz8), body.stones-on #home-view .student-select:not(#zz0):not(#zz1):not(#zz2):not(#zz3):not(#zz4):not(#zz5):not(#zz6):not(#zz7):not(#zz8) {
  background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important;
}
body.stones-on #home-view .student-select-field:not(#zz0):not(#zz1):not(#zz2):not(#zz3):not(#zz4):not(#zz5):not(#zz6):not(#zz7):not(#zz8) {
  display: flex !important; align-items: center !important; gap: 2px !important;
  height: 46px !important; min-height: 46px !important; padding: 0 6px 0 14px !important;
  background: #0D0C0B !important; background-image: none !important;
  border: 1px solid #3A342E !important; border-radius: 12px !important; box-shadow: none !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}
body.stones-on #home-view .student-select-field:not(#zz0):not(#zz1):not(#zz2):not(#zz3):not(#zz4):not(#zz5):not(#zz6):not(#zz7):not(#zz8):hover { border-color: #524A43 !important; }
body.stones-on #home-view .student-select-field:not(#zz0):not(#zz1):not(#zz2):not(#zz3):not(#zz4):not(#zz5):not(#zz6):not(#zz7):not(#zz8):focus-within { border-color: #D9412C !important; box-shadow: 0 0 0 3px rgba(217, 65, 44, .18) !important; }
body.stones-on #home-view .student-select-field #studentSelectLabel:not(#zz0):not(#zz1):not(#zz2):not(#zz3):not(#zz4):not(#zz5):not(#zz6):not(#zz7):not(#zz8) {
  flex: 1 1 auto !important; min-width: 0 !important; height: 100% !important; margin: 0 !important; padding: 0 !important;
  background: transparent !important; border: 0 !important; box-shadow: none !important; outline: none !important;
  font: 600 15px/1 var(--al-head) !important; color: #EDE9EA !important; letter-spacing: 0 !important;
}
body.stones-on #home-view .student-select-field #studentSelectLabel:not(#zz0):not(#zz1):not(#zz2):not(#zz3):not(#zz4):not(#zz5):not(#zz6):not(#zz7):not(#zz8)::placeholder { color: #8A8288 !important; font-weight: 500 !important; }
body.stones-on #home-view .student-select-field #studentSelectClear:not(#zz0):not(#zz1):not(#zz2):not(#zz3):not(#zz4):not(#zz5):not(#zz6):not(#zz7):not(#zz8),
body.stones-on #home-view .student-select-field #studentSelectBtn:not(#zz0):not(#zz1):not(#zz2):not(#zz3):not(#zz4):not(#zz5):not(#zz6):not(#zz7):not(#zz8) {
  flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 32px !important; min-width: 32px !important; height: 32px !important; min-height: 32px !important; padding: 0 !important; margin: 0 !important;
  background: transparent !important; background-image: none !important; border: 0 !important; border-radius: 8px !important;
  box-shadow: none !important; transform: none !important; filter: none !important; animation: none !important;
  color: #8A8288 !important; font: 400 18px/1 var(--al-head) !important; cursor: pointer !important;
}
body.stones-on #home-view .student-select-field #studentSelectClear:not(#zz0):not(#zz1):not(#zz2):not(#zz3):not(#zz4):not(#zz5):not(#zz6):not(#zz7):not(#zz8) { width: 26px !important; min-width: 26px !important; height: 26px !important; min-height: 26px !important; font-size: 16px !important; }
body.stones-on #home-view .student-select-field #studentSelectClear:not(#zz0):not(#zz1):not(#zz2):not(#zz3):not(#zz4):not(#zz5):not(#zz6):not(#zz7):not(#zz8):hover,
body.stones-on #home-view .student-select-field #studentSelectBtn:not(#zz0):not(#zz1):not(#zz2):not(#zz3):not(#zz4):not(#zz5):not(#zz6):not(#zz7):not(#zz8):hover { background: #2B282E !important; color: #F3EEE6 !important; }
body.stones-on #home-view .student-select-field #studentSelectBtn .student-select-caret {
  width: 8px !important; height: 8px !important; border: solid currentColor !important; border-width: 0 2px 2px 0 !important;
  background: none !important; transform: translateY(-2px) rotate(45deg) !important; display: block !important;
}
body.stones-on #home-view .student-select-field #studentSelectBtn[aria-expanded="true"] .student-select-caret { transform: translateY(2px) rotate(-135deg) !important; }

/* ---------- checklist: one icon shape for every row (Kevin, 2026-10-30) ----------
   Rows you tick and rows AUTOMATA ticks look the same: a rounded square,
   green with a check when done, an empty outline when not. */
body.stones-on #home-view #fullChecklist .check-row input[type="checkbox"]:not(#zz0):not(#zz1):not(#zz2):not(#zz3):not(#zz4):not(#zz5):not(#zz6):not(#zz7):not(#zz8),
body.stones-on #home-view #fullChecklist .check-row .tick:not(#zz0):not(#zz1):not(#zz2):not(#zz3):not(#zz4):not(#zz5):not(#zz6):not(#zz7):not(#zz8) {
  -webkit-appearance: none !important; appearance: none !important; position: relative !important;
  display: inline-block !important; flex: 0 0 18px !important; width: 18px !important; height: 18px !important; margin: 0 !important; padding: 0 !important;
  border-radius: 5px !important; border: 2px solid #5A524F !important; background: transparent !important; box-shadow: none !important;
  animation: none !important; transform: none !important;
}
body.stones-on #home-view #fullChecklist .check-row input[type="checkbox"]:not(#zz0):not(#zz1):not(#zz2):not(#zz3):not(#zz4):not(#zz5):not(#zz6):not(#zz7):not(#zz8):checked,
body.stones-on #home-view #fullChecklist .check-row .tick.done:not(#zz0):not(#zz1):not(#zz2):not(#zz3):not(#zz4):not(#zz5):not(#zz6):not(#zz7):not(#zz8) { background: #3FB56E !important; border-color: #3FB56E !important; }
body.stones-on #home-view #fullChecklist .check-row .tick:not(#zz0):not(#zz1):not(#zz2):not(#zz3):not(#zz4):not(#zz5):not(#zz6):not(#zz7):not(#zz8)::before { content: none !important; }
body.stones-on #home-view #fullChecklist .check-row input[type="checkbox"]:not(#zz0):not(#zz1):not(#zz2):not(#zz3):not(#zz4):not(#zz5):not(#zz6):not(#zz7):not(#zz8)::after,
body.stones-on #home-view #fullChecklist .check-row .tick:not(#zz0):not(#zz1):not(#zz2):not(#zz3):not(#zz4):not(#zz5):not(#zz6):not(#zz7):not(#zz8)::after { content: none !important; }
body.stones-on #home-view #fullChecklist .check-row input[type="checkbox"]:not(#zz0):not(#zz1):not(#zz2):not(#zz3):not(#zz4):not(#zz5):not(#zz6):not(#zz7):not(#zz8):checked::after,
body.stones-on #home-view #fullChecklist .check-row .tick.done:not(#zz0):not(#zz1):not(#zz2):not(#zz3):not(#zz4):not(#zz5):not(#zz6):not(#zz7):not(#zz8)::after {
  content: "" !important; position: absolute !important; left: 4px !important; top: 0 !important; width: 5px !important; height: 10px !important;
  border: solid #fff !important; border-width: 0 2.5px 2.5px 0 !important; transform: rotate(45deg) !important; background: none !important; border-radius: 0 !important;
}
body.stones-on #home-view #fullChecklist .check-row.is-stale .tick:not(#zz0):not(#zz1):not(#zz2):not(#zz3):not(#zz4):not(#zz5):not(#zz6):not(#zz7):not(#zz8) { background: #A8620F !important; border-color: #A8620F !important; }
body.stones-on #home-view #fullChecklist .check-row input[type="checkbox"]:not(#zz0):not(#zz1):not(#zz2):not(#zz3):not(#zz4):not(#zz5):not(#zz6):not(#zz7):not(#zz8):focus-visible { outline: 2px solid #D9412C !important; outline-offset: 2px !important; }

/* ---------- right column order (Kevin, 2026-10-30) ----------
   meter at the top, Blanks Left in the middle, Run AUTOMATA with the download
   and link buttons at the very bottom. */
body.stones-on #home-view > .ready-pane > #stonesAuto:not(#zz0):not(#zz1):not(#zz2):not(#zz3):not(#zz4):not(#zz5):not(#zz6):not(#zz7):not(#zz8) { order: 50 !important; margin-top: 0 !important; }
body.stones-on #home-view #stonesBlanksSlot:not(:has(#blanksLeftPanel)) { display: none !important; }
body.stones-on #home-view #stonesBlanksSlot:not(#zz0):not(#zz1):not(#zz2):not(#zz3):not(#zz4):not(#zz5):not(#zz6):not(#zz7):not(#zz8) {
  margin: 0 !important; padding: 14px 16px !important; border-radius: 16px !important;
  border: 1px solid #7A2A20 !important; background: #211F24 !important; box-shadow: none !important;
}
body.stones-on #home-view #stonesBlanksSlot #blanksLeftPanel { margin: 0 !important; border: 0 !important; padding: 0 !important; background: transparent !important; }

/* ---------- Problems: what went wrong in the run, and what is wrong in the report ---------- */
body.stones-on #home-view #stonesProblems:not(#zz0):not(#zz1):not(#zz2):not(#zz3):not(#zz4):not(#zz5):not(#zz6):not(#zz7):not(#zz8) {
  margin: 0 !important; padding: 14px 16px !important; border-radius: 16px !important;
  border: 1px solid #3A363D !important; background: #211F24 !important; box-shadow: none !important;
}
body.stones-on #home-view #stonesProblems.has-problems:not(#zz0):not(#zz1):not(#zz2):not(#zz3):not(#zz4):not(#zz5):not(#zz6):not(#zz7):not(#zz8) { border-color: #7A2A20 !important; }
body.stones-on #stonesProblems .section-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
body.stones-on #stonesProblemsCount { font: 700 11px/1 var(--al-mono); color: #F3EEE6; background: #D9412C; border-radius: 99px; padding: 3px 8px; }
body.stones-on #stonesProblemsCount:empty { display: none; }
body.stones-on #stonesProblems .sp-group { margin: 10px 0 4px; font: 700 10.5px/1.2 var(--al-head); letter-spacing: .12em; text-transform: uppercase; color: #A8A0A6; }
body.stones-on #stonesProblems ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
body.stones-on #stonesProblems li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 6px 4px; border-top: 1px solid #2B282E; font: 500 13px/1.4 var(--al-head); color: #EDE9EA; }
body.stones-on #stonesProblems li:first-child { border-top: 0; }
body.stones-on #stonesProblems li i { width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: #E8553F; box-shadow: 0 0 6px rgba(232, 85, 63, .6); }
body.stones-on #stonesProblems li.warn i { background: #F0B35A; box-shadow: 0 0 6px rgba(240, 179, 90, .5); }
body.stones-on #stonesProblems li time { font: 500 11px/1.4 var(--al-mono); color: #8A8288; white-space: nowrap; }
body.stones-on #stonesProblems .sp-none { margin: 8px 0 0; font: 500 13px/1.4 var(--al-head); color: #8FE3B0; }

body.stones-on #home-view[data-board] #activeBoard > #stonesProblems:not(#stones-a):not(#stones-b):not(#stones-c) { display: block !important; }