/* Practice Studio tropical lagoon theme — visual layer only. */

body {
  min-height: 100vh;
  background:
    linear-gradient(90deg, rgba(2, 35, 55, .08), rgba(4, 53, 70, .02) 54%, rgba(250, 205, 128, .08)),
    url("assets/img/practice-studio-tropical-bg.png") center / cover fixed no-repeat;
  color: #102f47;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 248, 228, .13), rgba(1, 53, 74, .08) 70%, rgba(1, 38, 57, .14));
}

body > .site-header,
body.dss-practice > header.dss-shell {
  border-bottom: 1px solid rgba(235, 251, 255, .38);
  background: rgba(7, 53, 69, .83);
  box-shadow: 0 9px 30px rgba(0, 29, 43, .18);
  color: #f7fdff;
}

body > .site-header .brand,
body > .site-header .brand span,
body > .site-header .save-status,
body > .site-header .language-picker,
body.dss-practice > header.dss-shell .dss-brand,
body.dss-practice > header.dss-shell .dss-title,
body.dss-practice > header.dss-shell .dss-controls,
body.dss-practice > header.dss-shell .dss-label {
  color: #f7fdff;
}

body > .site-header nav a,
body > .site-header nav button,
body > .site-header select,
body.dss-practice > header.dss-shell button,
body.dss-practice > header.dss-shell select {
  border-color: rgba(235, 251, 255, .43);
  background: rgba(6, 42, 58, .48);
  color: #f7fdff;
}

body > .site-header .dw-feedback-btn,
body.dss-practice > header.dss-shell .dw-feedback-btn {
  border-color: rgba(247, 221, 151, .72);
  background: rgba(255, 247, 218, .93);
  color: #17465b;
}

body > .pilot,
body.dss-practice > .pilot {
  border-bottom: 1px solid rgba(255, 238, 191, .48);
  background: rgba(255, 244, 214, .91);
  color: #624314;
  backdrop-filter: blur(8px);
}

#app {
  max-width: 1420px;
  padding: clamp(34px, 5vw, 76px) clamp(20px, 4.5vw, 72px) 110px;
}

.start-screen {
  width: min(700px, 100%);
  margin: clamp(50px, 11vh, 130px) 7% clamp(90px, 14vh, 160px) auto;
  border-color: rgba(174, 229, 231, .64);
  background: linear-gradient(145deg, rgba(4, 66, 86, .9), rgba(7, 91, 103, .82));
  box-shadow: 0 24px 68px rgba(0, 34, 48, .31);
  backdrop-filter: blur(12px);
  color: #f9feff;
}

.start-screen .eyebrow,
.start-screen > p:not(.eyebrow) {
  color: #d6f6f3;
}

.start-screen h1 {
  color: #fffaf0;
  text-shadow: 0 2px 18px rgba(0, 22, 31, .35);
}

.start-screen label { color: #fff; }

.topic-row input {
  border-color: rgba(188, 230, 239, .78);
  background: rgba(255, 255, 255, .96);
  color: #12354c;
}

.primary {
  border-color: #f2d585;
  background: linear-gradient(135deg, #087f74, #0a9e91);
  box-shadow: 0 9px 20px rgba(0, 39, 47, .22);
}

.primary:hover { background: linear-gradient(135deg, #07665e, #087d72); }

.examples button {
  border-color: rgba(214, 244, 239, .58);
  background: rgba(2, 53, 71, .43);
  color: #fff;
}

.studio {
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}

.card,
.curriculum-panel {
  border-color: rgba(181, 221, 225, .88);
  box-shadow: 0 18px 46px rgba(0, 33, 47, .19);
}

.card {
  background: rgba(255, 255, 252, .965);
}

.welcome-card {
  background: linear-gradient(135deg, rgba(4, 69, 86, .93), rgba(8, 102, 109, .89));
  color: #fbffff;
}

.welcome-card .eyebrow,
.welcome-card > p:last-of-type,
.welcome-card .map-meta span {
  color: #d4f5f1;
}

.welcome-card .map-meta span {
  background: rgba(224, 254, 247, .16);
}

.curriculum-panel {
  border-color: rgba(163, 218, 220, .62);
  background: rgba(3, 61, 78, .9);
  color: #f4feff;
  backdrop-filter: blur(12px);
}

.curriculum-panel .eyebrow,
.panel-head > p:last-child,
.depth-head small { color: #c7eeea; }

.curriculum-panel .panel-head,
.curriculum-panel .depth-group { border-color: rgba(211, 245, 242, .2); }

.depth-head { color: #fff; }
.depth-num { background: #e4f7ed; color: #076a61; }
.set-button { border-color: rgba(203, 242, 239, .19); background: rgba(255, 255, 255, .11); color: #f6ffff; }
.set-button:hover,
.set-button.active { border-color: #f2d585; background: rgba(212, 249, 242, .22); }
.set-button.checkpoint { background: rgba(255, 222, 148, .19); }

.teaching-card,
.question-card,
.feedback-card,
.result-card {
  background: rgba(255, 255, 252, .985);
}

.question-card .question-top,
.card-head { border-bottom: 1px solid #d7e7e8; padding-bottom: 15px; }

.reference-panel {
  border-color: rgba(164, 220, 224, .75);
  background: rgba(255, 255, 252, .985);
}

@media (max-width: 950px) {
  body { background-position: 40% center; }
  #app { padding-top: 34px; }
  .start-screen { margin: 50px auto 100px; }
  .studio { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
  body {
    background-attachment: scroll;
    background-position: 35% center;
  }
  #app { padding: 28px 14px 84px; }
  .start-screen {
    width: min(94vw, 640px);
    margin: 30px auto 76px;
    padding: 30px 20px;
  }
  .start-screen h1 { font-size: clamp(2.2rem, 11vw, 3.35rem); }
  .topic-row input,
  .topic-row button { min-height: 48px; }
  .card { padding: 22px 18px; }
  .curriculum-panel { border-radius: 16px; }
.question-card .question-top,
.card-head { align-items: flex-start; flex-wrap: wrap; }
}

/* Avoid sideways scrolling below the legacy 320px page minimum. */
@media (max-width: 319px) {
  body { min-width: 0; }
  #app { padding-inline: 12px; }
}

/* A separate, focused writing/calculation window; it reuses the existing evidence controls. */
.working-dialog {
  width: min(920px, calc(100vw - 36px));
  max-width: none;
  max-height: min(90dvh, 900px);
  overflow: auto;
  padding: clamp(14px, 3vw, 26px);
  border: 2px solid #56bfc2;
  border-radius: 20px;
  background: #fffdf9;
  color: #10233f;
  box-shadow: 0 24px 80px rgba(1, 29, 42, .35);
}
.working-dialog::backdrop { background: rgba(2, 27, 39, .72); backdrop-filter: blur(3px); }
.working-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.working-dialog-head h2 { margin: 0; font-size: clamp(1.25rem, 3vw, 1.75rem); }
.working-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.working-dialog-actions button,
#open-working-area { min-height: 42px; padding: 9px 13px; border: 1px solid #087267; border-radius: 9px; background: #fff; color: #075b54; font-weight: 800; }
.working-dialog-actions .primary { background: #087267; color: #fff; }
.working-dialog .response-workspace { margin-top: 0; }
@media (max-width: 650px) {
  .working-dialog { width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 14px; border-radius: 0; border-inline: 0; }
  .working-dialog-head { align-items: flex-start; flex-direction: column; }
  .working-dialog-actions { width: 100%; }
  .working-dialog-actions button { flex: 1 1 150px; }
  #working-canvas { height: min(44dvh, 320px); }
}


/* Practice journal gate: one clear mobile-ready path to the next activity. */
.dausoko-stage-runtime .practice-journal-note { display:grid !important; gap:8px; margin:18px 0 14px; color:#f4fafc !important; font-weight:800; }
.dausoko-stage-runtime .practice-journal-note span { color:inherit !important; }
.dausoko-stage-runtime .practice-journal-note textarea { box-sizing:border-box; display:block; width:100% !important; min-height:132px; padding:14px; border:2px solid #8fcbd0; border-radius:10px; background:#fff; color:#15364a; font:inherit; line-height:1.45; resize:vertical; }
.dausoko-stage-runtime .practice-notebook-confirm { display:flex !important; align-items:flex-start; gap:12px; width:100%; box-sizing:border-box; margin:14px 0 6px; padding:14px; border:2px solid #f0c36d; border-radius:10px; background:#fff7df; color:#15364a !important; cursor:pointer; line-height:1.42; }
.dausoko-stage-runtime .practice-notebook-confirm input[type=checkbox] { flex:0 0 25px; width:25px; height:25px; margin:2px 0 0; accent-color:#087f77; }
.dausoko-stage-runtime .practice-notebook-confirm span,.dausoko-stage-runtime .practice-notebook-confirm strong { color:#15364a !important; }
.dausoko-stage-runtime .practice-journal-save { display:block; width:100%; min-height:52px; margin:14px 0 4px !important; font-weight:800; }
.dausoko-stage-runtime .practice-journal-save:disabled { opacity:.62; }
@media (max-width:650px){.dausoko-stage-runtime .practice-journal-note textarea{min-height:150px;font-size:16px}.dausoko-stage-runtime .practice-notebook-confirm{padding:16px}.dausoko-stage-runtime .practice-journal-save{font-size:16px}}