/* ==========================================================================
   Shack Stack · Menu overhaul layer (loads after studio.css)
   Scope: header actions, tool panel structure, canvas mode badge, print dialog
   sections, roster rows. Uses the studio.css tokens only. Nothing here touches
   desk geometry, student data or storage.
   ========================================================================== */

.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Header: class · saved state · undo / redo · print ---------- */
.header-actions { order: 3; display: flex; align-items: center; gap: var(--s2); }
.header-actions button, .header-actions .btn-text { white-space: nowrap; }
.header-actions button { min-height: 34px; height: 34px; padding: 0 var(--s3); font-size: var(--t-body); font-weight: 550; gap: 7px; width: auto; }
.header-actions #undo, .header-actions #redo, .header-actions #print {
  background: var(--raised) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; box-shadow: var(--shadow-1); font-size: var(--t-body); font-weight: 550;
}
.header-actions #undo:hover:not(:disabled), .header-actions #redo:hover:not(:disabled), .header-actions #print:hover:not(:disabled) { border-color: var(--line-strong) !important; background: color-mix(in srgb, var(--ink) 4%, var(--raised)) !important; }
.header-actions #undo:disabled, .header-actions #redo:disabled { opacity: .42; box-shadow: none; }
.header-actions #print { font-weight: 650; border-color: color-mix(in srgb, var(--ui-accent) 55%, var(--line)) !important; }
.header-actions .btn-text, #undo .btn-text, #redo .btn-text { font-size: inherit; line-height: inherit; vertical-align: baseline; }
.header-actions button .ui-icon { width: 16px; height: 16px; }
.header-actions #undo + #redo { margin-left: -2px; }
.header-room select { max-width: 100%; }
/* One compact header at tablet widths: logo only, then class, state, actions. */
@media (max-width: 1000px) { .brand > div { display: none; } }
@media (max-width: 950px) {
  .header-actions button, .header-actions #print { font-size: var(--t-body); width: auto; padding: 0 var(--s3); gap: 7px; }
  .header-actions button::before { margin: 0; }
}
@media (max-width: 760px) {
  .header-actions #undo, .header-actions #redo { width: 36px; padding: 0; }
  .header-actions #undo .btn-text, .header-actions #redo .btn-text { display: none; }
  .tag[data-state=saved] { font-size: 0; gap: 0; padding: 0 6px; }
}
@media (max-width: 560px) {
  .header-actions #print { width: 36px; padding: 0; }
  .header-actions #print .btn-text { display: none; }
}

/* ---------- Navigation row: four destinations + panel toggle ---------- */
.app-nav { justify-content: flex-start; }
.app-nav #toggleTools { margin-left: auto; }
.app-nav .nav-tabs button { min-width: 0; }

/* ---------- Tool panel ---------- */
main { grid-template-columns: 328px minmax(0, 1fr); }
@media (max-width: 1150px) { main { grid-template-columns: 300px minmax(0, 1fr); } }
@media (max-width: 950px) { main { grid-template-columns: 280px minmax(0, 1fr); } }
aside { padding: var(--s5) var(--s5) var(--s8); }
#panelTitle { margin: 0 0 var(--s1); }
.panel-lead { margin: 0 0 var(--s4); color: var(--muted); font-size: var(--t-cap); line-height: 1.5; }
aside .menu-section { border-top: 1px solid var(--line); padding: var(--s4) 0; margin: 0; background: none; }
#classControls > .menu-section:first-child, #roomControls > .menu-section:first-child, #studentControls > .menu-section:first-child, .appearance-content > p + .menu-section { border-top: 0; padding-top: var(--s2); }
.menu-h { display: flex; align-items: baseline; gap: 6px; margin: 0 0 var(--s2); font-size: var(--t-body); font-weight: 650; color: var(--ink); letter-spacing: 0; text-transform: none; }
.menu-h span { color: var(--muted); font-weight: 500; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s1); }
.section-head .menu-h { margin: 0; }
.section-head button { min-height: 32px; padding: 0 var(--s3); font-size: var(--t-cap); flex: none; }
#classControls > .menu-section > .hint.compact { margin: 0 0 var(--s2); }
.menu-section p.hint { margin: var(--s2) 0 var(--s3); }
.menu-section .hint + button, .menu-section .hint + .row { margin-top: 0; }
aside .row { margin-top: var(--s2); }
aside .row > button { padding: 0 var(--s2); }
.row.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.row.three button { font-size: var(--t-cap); padding: 4px; height: auto; min-height: var(--ctl); line-height: 1.15; white-space: normal; text-align: center; }
.inline-field { align-items: stretch; margin-top: 0; }
.inline-field > input { flex: 1 1 auto; min-width: 0; }
.inline-field > button { flex: 0 0 auto; }
#renameClassForm label { margin-top: 0; }
#renameClassForm .inline-field { margin-top: 5px; }
.menu-section button.wide + .hint { margin-top: var(--s2); }
.menu-section button.wide { margin-top: var(--s1); }
.menu-section button.wide + .hint + button.wide { margin-top: var(--s3); }

/* Grouped fields inside the desk inspector */
fieldset.menu-group { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s1) var(--s3) var(--s3); margin: var(--s3) 0 0; min-width: 0; background: color-mix(in srgb, var(--raised) 55%, transparent); }
fieldset.menu-group legend { padding: 0 6px; margin-left: -2px; font-size: var(--t-cap); font-weight: 650; color: var(--muted); }
fieldset.menu-group label:first-of-type { margin-top: var(--s2); }
fieldset.menu-group .row > div { flex: 1; min-width: 0; }
#selectedDeskTools { padding-top: var(--s1); }
#selectedDeskTools > button.wide { margin-top: var(--s3); }
#selectedDeskTools > .hint { margin: var(--s2) 0 var(--s3); }
#deskLabel { margin: 0 0 var(--s2); }
#roomControls > .desk-inspector { margin-top: 0; padding-top: var(--s2); }
#roomControls > .desk-inspector > h3 { display: flex; }
#selectionHint { padding: 0 0 var(--s2); }

/* Disclosure rows inside sections */
details.menu-details { border: 0; border-top: 1px solid var(--line); padding: var(--s3) 0; margin: 0; background: none; }
.menu-section > details.menu-details:first-child, .menu-section > .menu-h + details.menu-details { border-top: 0; padding-top: var(--s1); }
details.menu-details.nested { margin-top: var(--s3); padding-bottom: 0; }
details.menu-details > summary { min-height: 32px; }
details.menu-details[open] > summary { margin-bottom: var(--s2); }
details.menu-details > button.wide, details.menu-details > .row { margin-top: var(--s2); }
details.menu-details > label:first-of-type { margin-top: var(--s1); }
#roomControls details.menu-details, #manualEntry.menu-details, .compass-import.menu-details, .backup-menu.menu-details { border-radius: 0; }
.backup-menu.menu-details { margin-top: 0; border-top: 1px solid var(--line); }
.backup-menu.menu-details button { margin-top: var(--s2); }

/* Secondary / destructive areas: present, honest about scope, never loud. */
.remove-section { background: none; }
.remove-section .menu-h { color: var(--muted); }
.remove-section button.danger, .remove-section .remove-student, #removeDesk, #removeGroup { background: transparent; border-color: var(--line); color: var(--bad) !important; font-weight: 550; }
.remove-section button.danger:hover:not(:disabled), .remove-section .remove-student:hover:not(:disabled), #removeDesk:hover:not(:disabled), #removeGroup:hover:not(:disabled) { background: var(--bad-bg); border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); color: var(--bad) !important; }
.remove-section .remove-student { min-height: var(--ctl); padding: 0 var(--s3); font-size: var(--t-body); }
#clear { color: var(--ink); }

/* Class list: one line per student, a single scroll for the whole panel. */
.roster { max-height: none; overflow: visible; margin-top: var(--s1); }
#roster:empty::before { content: "No students yet. Add students below: paste a Compass table, upload a photo list or type names."; }
.student { grid-template-columns: minmax(0, 1fr) 100px auto; gap: 2px var(--s2); padding: 8px 0; align-items: center; }
.student .student-identity { grid-column: 1 / -1; }
.student .student-identity span { overflow-wrap: break-word; font-weight: 550; }
.student .student-photo { width: 24px; height: 32px; }
.student .student-initials { display: grid; place-items: center; font-size: 10px; font-weight: 650; color: var(--ui-accent); background: color-mix(in srgb, var(--ui-accent) 11%, var(--raised)); border: 0; }
.student .student-seat { font-size: var(--t-cap); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 2px; }
.student select { min-height: 30px; font-size: var(--t-cap); }
.student .remove-student { justify-self: end; min-height: 30px; padding: 0 var(--s2); font-size: var(--t-cap); color: var(--muted); border-color: transparent; background: transparent; }
.student .remove-student:hover:not(:disabled) { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); background: var(--bad-bg); }
body[data-mode=dark] .student .remove-student:hover:not(:disabled) { color: var(--bad); }
#rosterList > summary .menu-h, #rosterList > summary span { color: var(--muted); font-weight: 500; }
#photoRows { max-height: none; overflow: visible; }
.selected-note { padding: var(--s2) var(--s3); border-radius: var(--r-md); background: color-mix(in srgb, var(--ui-accent) 9%, var(--raised)); color: var(--ink); border: 1px solid color-mix(in srgb, var(--ui-accent) 30%, var(--line)); }
#studentBank .bank { margin-bottom: var(--s3); }
#studentBank .menu-h { margin-bottom: var(--s2); }

/* Appearance extras */
#cardOptions label[for=photoSize] { margin-top: var(--s2); }
#darkMode { justify-content: center; }
#darkMode::before { content: ""; width: 16px; height: 16px; background: currentColor; mask: url(assets/ui-moon.svg?v=90) center / contain no-repeat; -webkit-mask: url(assets/ui-moon.svg?v=90) center / contain no-repeat; }
#darkMode[aria-pressed=true]::before { mask-image: url(assets/ui-sun.svg?v=90); -webkit-mask-image: url(assets/ui-sun.svg?v=90); }
.appearance-content > p.hint { margin: 0 0 var(--s3); }
.colour-section .row button { font-size: var(--t-cap); }
.appearance-footer { padding-bottom: 0; }

/* ---------- Canvas: mode badge and view label ---------- */
.room-heading-bar { justify-content: flex-start; }
.mode-badge { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 11px 0 9px; border-radius: var(--r-pill); font-size: var(--t-cap); font-weight: 600; line-height: 1; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; background: color-mix(in srgb, var(--ui-accent) 10%, var(--raised)); border: 1px solid color-mix(in srgb, var(--ui-accent) 32%, var(--line)); }
.mode-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ui-accent); flex: none; }
.mode-badge[data-mode=seating] { background: var(--raised); border-color: var(--line); }
#crowdedOverview { flex: none; }
.canvas-controls .control-label { font-size: var(--t-cap); font-weight: 600; color: var(--muted); }
.canvas-controls .view-info { margin-right: 0; flex: 1 1 auto; }

/* ---------- Print preview dialog sections ---------- */
.print-preview-settings .menu-h { margin: var(--s4) 0 var(--s2); }
.print-preview-settings .menu-h:first-child { margin-top: 0; }
.print-preview-settings .check-label { display: flex; align-items: flex-start; gap: 9px; margin: var(--s2) 0; font-weight: 500; font-size: var(--t-body); }
.print-preview-settings .check-label input { width: 16px; height: 16px; margin-top: 1px; flex: none; }
.print-preview-settings button#resetFrameColours { margin-top: var(--s2); min-height: 32px; font-size: var(--t-cap); }
.print-preview-settings textarea { min-height: 72px; }

/* ---------- Responsive adjustments ---------- */
@media (max-width: 700px) {
  .mode-badge { font-size: 11px; padding: 0 8px 0 7px; }
  .room-heading-bar .board { display: none; }
  .canvas-controls .control-label { display: none; }
}
@media (max-width: 600px) {
  aside { padding: var(--s4); max-height: 42dvh; }
  .student { grid-template-columns: minmax(0, 1fr) 104px auto; }
}
@media (pointer: coarse) {
  .student .remove-student { min-height: 44px; }
  .section-head button { min-height: 40px; }
  .row.three button { min-height: 44px; }
}
@media (forced-colors: active) {
  .mode-badge { border: 1px solid CanvasText; }
  .mode-badge::before { background: Highlight; }
}

/* View buttons keep their text labels at every width (studio.css collapsed them to icons below 800px). */
@media (max-width: 800px) {
  .segmented button { font-size: var(--t-cap); gap: 6px; padding: 0 10px; width: auto; }
  .canvas-controls { row-gap: var(--s2); }
}
@media (max-width: 600px) {
  .canvas-controls .view-info { flex-basis: 100%; }
  .canvas-controls .segmented { flex: 1 1 100%; }
  .canvas-controls .segmented button { flex: 1; justify-content: center; }
}
.canvas-controls .segmented button { white-space: nowrap; }
@media (max-width: 600px) { .canvas-controls .segmented button { padding: 0 6px; } }

/* Print preview: Save / Save & print stay reachable while the settings column scrolls. */
#printPreviewDialog .print-preview-actions { position: sticky; bottom: 0; z-index: 2; margin-top: var(--s3); padding: var(--s3) 0 var(--s2); background: var(--surface); border-top: 1px solid var(--line); }