/* =========================================================
 SYNTAX SCRAMBLE STUDIO - EDITOR
 ========================================================= */

.ss-studio {
 padding: 10px 0 0;
 box-sizing: border-box;
}

.ss-studio-shell .activity-studio-secondary-btn {
 white-space: nowrap;
}

.ss-studio .ss-settings {
 margin-bottom: 10px;
}

.ss-settings {
 display: flex;
 flex-direction: column;
 gap: 8px;
 background: rgba(151, 193, 90, 0.10);
 border: 1px solid #d8e4cc;
 border-radius: 14px;
 padding: 8px 10px;
}

.ss-settings-compact {
 width: min(520px, 100%);
}

.ss-setting-row {
 display: grid;
 grid-template-columns: 120px minmax(0, 1fr);
 gap: 10px;
 align-items: center;
}

.ss-mode-controls {
 display: flex;
 align-items: center;
 gap: 8px;
 min-width: 0;
}

.ss-mode-select {
 max-width: 220px;
}

.ss-label {
 font-size: 12px;
 font-weight: 900;
 color: #134B4B;
 text-transform: uppercase;
 letter-spacing: 0.3px;
}

.ss-input,
.ss-select,
.ss-textarea {
 width: 100%;
 box-sizing: border-box;
 border: 1px solid #c9d7bb;
 border-radius: 12px;
 padding: 9px 10px;
 font-size: 14px;
 line-height: 1.35;
 background: #fbfdf9;
 color: #173c4b;
 font-family: inherit;
}

.ss-textarea {
 resize: vertical;
}

.ss-btn {
 appearance: none;
 border-radius: 10px;
 padding: 10px 14px;
 font-size: 14px;
 font-weight: 800;
 font-family: inherit;
 cursor: pointer;
 transition: 0.15s ease;
 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.ss-btn-secondary {
 background: #ffffff;
 border: 1px solid #d7e3c9;
 color: #0e4f67;
}

.ss-btn-secondary:hover {
 background: #f8fbf4;
}

.ss-btn-primary {
 background: #97c15a;
 border: 1px solid #97c15a;
 color: #0e4f67;
}

.ss-btn-primary:hover {
 filter: brightness(0.98);
}

.ss-grid-header {
 display: grid;
 grid-template-columns: 46px minmax(220px, 1.35fr) minmax(190px, 1fr) minmax(220px, 1.15fr) 48px;
 gap: 10px;
 align-items: center;
 margin-bottom: 8px;
 padding: 0 10px;
}

.ss-grid-head,
.ss-grid-head-blank {
 font-size: 12px;
 font-weight: 900;
 color: #6d8c48;
 text-transform: uppercase;
 letter-spacing: 0.3px;
}

.ss-row-stack {
 display: flex;
 flex-direction: column;
 gap: 10px;
}

.ss-row {
 display: grid;
 grid-template-columns: 46px minmax(220px, 1.35fr) minmax(190px, 1fr) minmax(220px, 1.15fr) 48px;
 gap: 10px;
 align-items: stretch;
 background: rgba(151, 193, 90, 0.08);
 border: 1px solid #d8e4cc;
 border-radius: 14px;
 padding: 10px;
}

.ss-number-cell,
.ss-delete-cell,
.ss-sentence-cell,
.ss-jumble-cell,
.ss-hints-cell {
 min-width: 0;
}

.ss-number-cell,
.ss-delete-cell {
 display: flex;
 align-items: flex-start;
 justify-content: center;
 padding-top: 4px;
}

.ss-row-number {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 36px;
 height: 36px;
 min-width: 36px;
 border-radius: 999px;
 border: 3px solid #97C15A;
 background: #ffffff;
 color: #114D4D;
 font-size: 15px;
 font-weight: 900;
 line-height: 1;
 box-shadow: 0 2px 6px rgba(17, 77, 77, 0.12);
}

.ss-delete-btn {
 appearance: none;
 width: 38px;
 height: 38px;
 border-radius: 999px;
 border: 0;
 background: #ef4d43;
 color: #ffffff;
 font-size: 24px;
 font-weight: 900;
 line-height: 1;
 font-family: inherit;
 cursor: pointer;
 box-shadow: 0 2px 8px rgba(239, 77, 67, 0.28);
}

.ss-delete-btn:hover {
 filter: brightness(0.96);
 transform: translateY(-1px);
}

.ss-sentence-textarea,
.ss-jumble-textarea {
 min-height: 88px;
}

.ss-row-actions {
 margin-top: 8px;
 display: flex;
 justify-content: flex-end;
}

.ss-mini-action {
 appearance: none;
 border-radius: 10px;
 padding: 8px 10px;
 font-size: 12px;
 font-weight: 900;
 font-family: inherit;
 cursor: pointer;
 background: #ffffff;
 border: 1px solid #d7e3c9;
 color: #0e4f67;
 white-space: nowrap;
}

.ss-mini-action:hover {
 background: #f8fbf4;
}

.ss-rejumble-all-btn {
 background: #97C15A;
 border-color: #97C15A;
 color: #114D4D;
}

.ss-hints-cell {
 display: flex;
 flex-direction: column;
 gap: 8px;
}

.ss-hint-input {
 min-height: 42px;
}

@media (max-width: 1200px) {
 .ss-grid-header {
 display: none;
 }

 .ss-row {
 grid-template-columns: 46px minmax(0, 1fr) 48px;
 }

 .ss-jumble-cell,
 .ss-hints-cell {
 grid-column: 2;
 }

 .ss-delete-cell {
 grid-column: 3;
 grid-row: 1;
 }
}

@media (max-width: 820px) {
 .ss-setting-row,
 .ss-row {
 grid-template-columns: 1fr;
 }

 .ss-mode-controls {
 flex-wrap: wrap;
 }

 .ss-number-cell,
 .ss-delete-cell,
 .ss-jumble-cell,
 .ss-hints-cell {
 grid-column: 1;
 }

 .ss-number-cell,
 .ss-delete-cell {
 justify-content: flex-start;
 }
}
#projector-view,
#print-view {
 padding: 8px;
}

/* PREVIEW / PRINT */

.ss-preview-page {
 margin: 0;
 padding: 0;
 background: #f4f7f0;
 font-family: var(--hb-font-sans);
 color: #173c4b;
 height: 100vh;
 box-sizing: border-box;
 display: grid;
 grid-template-rows: auto 1fr;
 gap: 8px;
 overflow: hidden;
}

.ss-preview-topbar {
 display: none;
}

.ss-preview-view {
 display: none;
 min-height: 0;
}

.ss-preview-view.active {
 display: block;
 min-height: 0;
}

#projector-view.ss-preview-view.active {
 display: flex;
 min-height: 0;
}

.ss-projector-shell,
body.hb-print-preview-mode {
 height: auto;
 min-height: 100vh;
 display: block;
 overflow: auto;
 background: #f4f7f0;
}

body.hb-print-preview-mode #projector-view {
 display: none !important;
}

body.hb-print-preview-mode #print-view {
 display: block !important;
 padding: 16px !important;
 overflow: visible;
}

.ss-print-sheet {
 max-width: none;
 margin: 0 auto;
}

.ss-print-page {
 width: 210mm;
 min-height: 297mm;
 margin: 0 auto 18px;
 padding: 13mm;
 box-sizing: border-box;
 background: #ffffff;
 border: 1px solid #d8e4cc;
 border-radius: 14px;
 box-shadow: 0 5px 18px rgba(17, 77, 77, 0.12);
 color: #173c4b;
}

.ss-print-title-row {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 12px;
 border-bottom: 3px solid #97C15A;
 padding-bottom: 8px;
 margin-bottom: 10px;
}

.ss-print-kicker {
 font-size: 11px;
 font-weight: 900;
 text-transform: uppercase;
 letter-spacing: 0.35px;
 color: #6d8c48;
 margin-bottom: 2px;
}

.ss-print-title {
 font-size: 25px;
 font-weight: 900;
 color: #114D4D;
 line-height: 1.05;
}

.ss-print-badge {
 border: 1px solid #d8e4cc;
 border-radius: 999px;
 padding: 7px 11px;
 background: #edf6de;
 color: #114D4D;
 font-size: 12px;
 font-weight: 900;
 white-space: nowrap;
}

.ss-print-name-space {
 min-width: 62mm;
 padding-top: 9px;
 color: #173c4b;
 font-size: 12px;
 font-weight: 900;
 white-space: nowrap;
}

.ss-print-name-space span {
 display: block;
 border-bottom: 1.5px solid #173c4b;
 padding: 0 4px 5px;
}

.ss-print-instruction {
 border: 1px solid #d8e4cc;
 border-radius: 12px;
 background: #f8fbf2;
 padding: 8px 10px;
 margin-bottom: 12px;
 font-size: 13px;
 font-weight: 700;
 color: #173c4b;
}

.ss-print-items {
 display: flex;
 flex-direction: column;
 gap: 13px;
}

.ss-print-item {
 display: grid;
 grid-template-columns: 34px minmax(0, 1fr);
 gap: 10px;
 align-items: start;
 break-inside: avoid;
 page-break-inside: avoid;
}

.ss-print-number {
 display: flex;
 justify-content: center;
 padding-top: 2px;
}

.ss-print-circle {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 30px;
 height: 30px;
 min-width: 30px;
 border-radius: 999px;
 border: 3px solid #97C15A;
 background: #ffffff;
 color: #114D4D;
 font-weight: 900;
 line-height: 1;
 box-shadow: 0 1px 4px rgba(17, 77, 77, 0.10);
}

.ss-print-circle-small {
 width: 26px;
 height: 26px;
 min-width: 26px;
 border-width: 2px;
 font-size: 13px;
}

.ss-print-parts {
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
 margin-bottom: 8px;
}

.ss-print-chip {
 display: inline-flex;
 align-items: center;
 border: 1px solid #cddbbb;
 border-radius: 10px;
 padding: 5px 8px;
 background: #edf6de;
 color: #173c4b;
 font-size: 13px;
 font-weight: 800;
 line-height: 1.2;
}

.ss-print-line {
 border-bottom: 1.5px solid #173c4b;
 min-height: 28px;
}

.ss-print-answer-list {
 display: flex;
 flex-direction: column;
 gap: 10px;
 margin-top: 12px;
}

.ss-print-answer {
 display: grid;
 grid-template-columns: 32px minmax(0, 1fr);
 gap: 10px;
 align-items: start;
 padding: 8px 10px;
 border: 1px solid #d8e4cc;
 border-radius: 12px;
 background: #f8fbf2;
 font-size: 14px;
 line-height: 1.35;
 color: #173c4b;
 break-inside: avoid;
 page-break-inside: avoid;
}
@media (max-width: 900px) {
 .ss-preview-page {
 height: auto;
 overflow: auto;
 }

 .ss-chip {
 font-size: 22px;
 padding: 14px 16px;
 }

 .ss-projector-helper,
 .ss-projector-instruction {
 font-size: 16px;
 }

 .ss-projector-hint,
 .ss-projector-answer {
 font-size: 18px;
 }
}
/* =========================================================
 SYNTAX SCRAMBLE PROJECTOR RESTORE
 Added after print/editor patch so projector never collapses
 into raw vertical text again.
 ========================================================= */

.ss-preview-page:not(.hb-print-preview-mode) {
 height: 100vh;
 min-height: 100vh;
 display: grid;
 grid-template-rows: auto minmax(0, 1fr);
 overflow: hidden;
 background: #f4f7f0;
}

.ss-preview-page:not(.hb-print-preview-mode) #print-view {
 display: none !important;
}

.ss-preview-page:not(.hb-print-preview-mode) #projector-view.ss-preview-view.active {
 display: flex !important;
 min-height: 0;
 height: 100%;
 padding: 8px;
 box-sizing: border-box;
 overflow: hidden;
}

.ss-preview-page:not(.hb-print-preview-mode) .ss-projector-shell {
 display: grid !important;
 grid-template-rows: auto auto minmax(0, 1fr);
 gap: 10px;
 width: 100%;
 height: 100%;
 max-width: 1500px;
 margin: 0 auto;
 min-height: 0;
 box-sizing: border-box;
}

.ss-preview-page:not(.hb-print-preview-mode) .ss-projector-toolbar {
 display: flex !important;
 gap: 8px;
 flex-wrap: wrap;
 align-items: center;
 justify-content: center;
 min-height: 44px;
}

.ss-preview-page:not(.hb-print-preview-mode) .ss-projector-counter {
 min-width: 88px;
 text-align: center;
 font-size: 16px;
 font-weight: 900;
 color: #114D4D;
}

.ss-preview-page:not(.hb-print-preview-mode) .ss-projector-instruction {
 background: #ffffff;
 border: 1px solid #d8e4cc;
 border-radius: 14px;
 padding: 10px 14px;
 font-size: 17px;
 font-weight: 700;
 color: #173c4b;
 line-height: 1.25;
}

.ss-preview-page:not(.hb-print-preview-mode) .ss-projector-board {
 box-sizing: border-box;
 background: #ffffff;
 border: 1px solid #d8e4cc;
 border-radius: 16px;
 padding: 22px;
 min-height: 0;
 display: flex !important;
 flex-direction: column;
 justify-content: center;
 overflow: hidden;
 box-sizing: border-box;
}

.ss-preview-page:not(.hb-print-preview-mode) .ss-projector-parts {
 display: flex !important;
 flex-wrap: wrap;
 gap: 16px;
 justify-content: center;
 align-items: center;
 align-content: center;
 min-height: 220px;
 max-width: 100%;
}

.ss-preview-page:not(.hb-print-preview-mode) .ss-chip {
 display: inline-flex !important;
 align-items: center;
 justify-content: center;
 border: 1px solid #cddbbb;
 border-radius: 18px;
 padding: 18px 22px;
 background: #edf6de;
 color: #173c4b;
 font-size: clamp(22px, 2.4vw, 34px);
 font-weight: 900;
 line-height: 1.15;
 cursor: grab;
 box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
 font-family: inherit;
 user-select: none;
 touch-action: none;
 white-space: normal;
 max-width: 100%;
}

.ss-preview-page:not(.hb-print-preview-mode) .ss-chip:active {
 cursor: grabbing;
}

.ss-preview-page:not(.hb-print-preview-mode) .ss-chip-ghost {
 opacity: 0.35;
}

.ss-preview-page:not(.hb-print-preview-mode) .ss-chip-chosen,
.ss-preview-page:not(.hb-print-preview-mode) .ss-chip-drag {
 background: #97c15a;
 border-color: #97c15a;
 color: #114D4D;
}

.ss-preview-page:not(.hb-print-preview-mode) .ss-projector-hint,
.ss-preview-page:not(.hb-print-preview-mode) .ss-projector-answer {
 display: none;
 margin-top: 16px;
 border-radius: 14px;
 padding: 14px 16px;
 font-size: 22px;
 font-weight: 800;
 line-height: 1.25;
}

.ss-preview-page:not(.hb-print-preview-mode) .ss-projector-hint.is-visible {
 display: block;
 background: #f6faf2;
 border: 1px solid #d8e4cc;
 color: #173c4b;
}

.ss-preview-page:not(.hb-print-preview-mode) .ss-projector-answer.is-visible {
 display: block;
 background: #edf6de;
 border: 1px solid #97c15a;
 color: #173c4b;
}

.ss-preview-page:not(.hb-print-preview-mode) .ss-projector-empty {
 background: #ffffff;
 border: 1px solid #d8e4cc;
 border-radius: 14px;
 padding: 20px;
 text-align: center;
 font-size: 18px;
 font-weight: 900;
 color: #114D4D;
}

@media print {
 @page {
 size: A4;
 margin: 10mm;
 }

 .ss-preview-topbar,
 .hb-preview-shell,
 #projector-view {
 display: none !important;
 }

 #print-view {
 display: block !important;
 padding: 0 !important;
 }

 .ss-preview-page {
 background: #ffffff;
 padding: 0;
 height: auto;
 min-height: 0;
 display: block;
 overflow: visible;
 }

 .ss-print-sheet {
 max-width: none;
 margin: 0;
 }

 .ss-print-page {
 width: auto;
 min-height: 0;
 margin: 0;
 padding: 0;
 border: none;
 border-radius: 0;
 box-shadow: none;
 break-after: page;
 page-break-after: always;
 }

 .ss-print-page:last-child {
 break-after: auto;
 page-break-after: auto;
 }

 .ss-print-title {
 font-size: 22px;
 }

 .ss-print-chip {
 font-size: 12px;
 padding: 4px 7px;
 }
}
/* HB-03 SYNTAX SCRAMBLE ACTION ROW POLISH START */
/* Purpose:
   - Put real gaps between + Add Sentence and Preview & Print.
   - Match Syntax Scramble action buttons to Bundle Publisher button height/radius.
   - Tighten the green title/action band.
   - Remove the empty local-message/meta divider after message migration.
   - Bring the Syntax Scramble editor content closer under the title/action band.
   - Keep this scoped to Syntax Scramble only.
*/

.ss-studio-shell {
 gap: 4px;
}

.ss-studio-shell .activity-studio-strip {
 padding: 5px 8px;
 border-radius: 6px;
}

.ss-studio-shell .activity-studio-row-top {
 gap: 10px;
 align-items: center;
}

.ss-studio-shell .activity-studio-title-panel {
 height: 34px;
 min-height: 34px;
 padding: 0 12px;
 max-width: 340px;
}

.ss-studio-shell .activity-studio-title {
 font-size: 0.94rem;
 line-height: 1;
}

.ss-studio-shell .activity-studio-primary-actions {
 display: flex;
 align-items: center;
 justify-content: flex-end;
 flex-wrap: nowrap;
 gap: 8px;
}

.ss-studio-shell .activity-studio-preview-btn,
.ss-studio-shell .activity-studio-secondary-btn {
 height: 38px;
 min-height: 38px;
 max-height: 38px;
 padding: 0 13px;
 border-radius: 9px;
 border: 2px solid rgba(19, 75, 75, 0.16);
 font-size: 0.8rem;
 line-height: 1;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 box-sizing: border-box;
 white-space: nowrap;
}

.ss-studio-shell .activity-studio-preview-btn {
 min-width: 170px;
}

.ss-studio-shell .activity-studio-secondary-btn {
 min-width: 128px;
}

.ss-studio-shell .activity-studio-row-meta {
 display: none;
}

.ss-studio-shell .activity-studio-body {
 padding-top: 0;
 margin-top: 0;
}

.ss-studio-shell .ss-studio {
 padding-top: 4px;
}

.ss-studio-shell .ss-settings {
 margin-bottom: 8px;
}

.ss-studio-shell .ss-grid-header {
 margin-bottom: 6px;
}

.ss-studio-shell .ss-row-stack {
 gap: 8px;
}

@media (max-width: 980px) {
 .ss-studio-shell .activity-studio-primary-actions {
  justify-content: flex-start;
  flex-wrap: wrap;
 }

 .ss-studio-shell .activity-studio-preview-btn,
 .ss-studio-shell .activity-studio-secondary-btn {
  min-width: 128px;
 }
}
/* HB-03 SYNTAX SCRAMBLE ACTION ROW POLISH END */

/* HB-03 SYNTAX SCRAMBLE EDITOR SURFACE ALIGNMENT START */
.ss-studio-shell {
 --ss-navy: #114D4D;
 --ss-teal: #134B4B;
 --ss-green: #97C15A;
 --ss-soft: #f8fbf2;
 --ss-soft-2: #eef5df;
 --ss-line: #d8e4cc;
}

.ss-studio-shell .activity-studio-body {
 background: var(--ss-soft);
 border: 1px solid var(--ss-line);
 border-radius: 8px;
 padding: 10px 12px 14px;
 box-sizing: border-box;
}

.ss-studio-shell .ss-studio {
 padding-top: 0;
 background: transparent;
}

.ss-studio-shell .ss-settings {
 background: #ffffff;
 border: 2px solid rgba(151, 193, 90, 0.34);
 border-radius: 8px;
 box-shadow: 0 2px 8px rgba(17, 77, 77, 0.06);
}

.ss-studio-shell .ss-row {
 background: #ffffff;
 border: 2px solid rgba(151, 193, 90, 0.38);
 border-radius: 8px;
 box-shadow: 0 2px 8px rgba(17, 77, 77, 0.06);
}

.ss-studio-shell .ss-row:hover {
 border-color: rgba(151, 193, 90, 0.72);
 background: #fbfdf9;
}

.ss-studio-shell .ss-input,
.ss-studio-shell .ss-select,
.ss-studio-shell .ss-textarea {
 background: #fbfdf9;
 border: 1px solid #c9d7bb;
 border-radius: 8px;
}

.ss-studio-shell .ss-mini-action {
 border-radius: 8px;
 border: 2px solid rgba(19, 75, 75, 0.16);
 background: #ffffff;
 color: var(--ss-navy);
}
/* HB-03 SYNTAX SCRAMBLE EDITOR SURFACE ALIGNMENT END */


/* HB SYNTAX SCRAMBLE AUTO SOLVE AND CENTER HINTS START */
/* syntax-scramble-autosolve-center-hints-20260616 */
.ss-preview-page:not(.hb-print-preview-mode) .ss-projector-board {
 position: relative;
}

.ss-preview-page:not(.hb-print-preview-mode) .ss-projector-parts.is-solved .ss-chip,
.ss-preview-page:not(.hb-print-preview-mode) .ss-chip.is-solved {
 background: #97C15A !important;
 border-color: #97C15A !important;
 color: #114D4D !important;
 cursor: default !important;
 box-shadow:
  0 4px 14px rgba(151, 193, 90, 0.28),
  inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

.ss-preview-page:not(.hb-print-preview-mode) .ss-projector-parts.is-solved {
 pointer-events: none;
}

.ss-preview-page:not(.hb-print-preview-mode) .ss-projector-answer.is-visible {
 align-self: center;
 box-sizing: border-box;
 width: min(960px, 100%);
 margin: 18px auto 0;
 text-align: center;
 background: #edf6de;
 border: 2px solid #97C15A;
 color: #114D4D;
 box-shadow: 0 10px 26px rgba(151, 193, 90, 0.18);
}

.ss-preview-page:not(.hb-print-preview-mode) .ss-projector-hint.is-visible {
 position: absolute;
 left: 50%;
 top: 50%;
 z-index: 20;
 width: min(920px, calc(100% - 44px));
 margin: 0;
 transform: translate(-50%, -50%);
 text-align: center;
 background: rgba(255, 255, 255, 0.96);
 border: 2px solid #97C15A;
 color: #114D4D;
 box-shadow:
  0 18px 44px rgba(17, 77, 77, 0.16),
  0 0 0 7px rgba(151, 193, 90, 0.10);
}
/* HB SYNTAX SCRAMBLE AUTO SOLVE AND CENTER HINTS END */