/* DAUSOKO Skill Studio — Pacific hands-on practice setting.
   Styling only: the skill path, generation, evidence, language and handoff code stay untouched. */

body {
  position:relative;
  isolation:isolate;
  background:#dff5f1;
}
body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:#dff5f1 url("assets/img/skill-studio-tropical-bg.png") center center / cover no-repeat;
}
body::after {
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(10,49,46,.08),rgba(10,49,46,.015) 48%,rgba(10,49,46,.11));
}

/* Existing header, kept compact and calm so the lagoon and tools remain present. */
header {
  width:min(1320px,calc(100% - 40px));
  margin:22px auto 0;
  padding:13px 17px;
  border:1px solid rgba(255,255,255,.5);
  border-radius:18px;
  background:rgba(5,59,64,.76);
  box-shadow:0 14px 34px rgba(18,58,48,.18);
  backdrop-filter:blur(13px);
  -webkit-backdrop-filter:blur(13px);
}
header a { color:#fffaf1; }
header > div > a { color:#f7fff9; }
header select {
  min-height:40px;
  padding:7px 28px 7px 11px;
  border:1px solid rgba(255,255,255,.4);
  border-radius:10px;
  color:#f8fff9;
  background:rgba(255,255,255,.13);
  font:inherit;
}
header select option { color:#163f45; background:#fff; }
.brand { border-left:7px solid #efc661; padding-left:12px; }
.brand small { color:#cef4e6; }

/* The shared shell enhances the header after page load; this is its visual skin. */
body.dss-skill > header.dss-shell {
  width:min(1320px,calc(100% - 40px));
  margin:22px auto 0;
  padding:12px 17px;
  grid-template-columns:minmax(150px,.55fr) minmax(220px,.85fr) auto;
  gap:12px;
  border:1px solid rgba(255,255,255,.5);
  border-top:5px solid #efc661;
  border-radius:18px;
  background:rgba(5,59,64,.76);
  box-shadow:0 14px 34px rgba(18,58,48,.18);
  color:#f7fff9;
}
body.dss-skill > header.dss-shell .dss-brand,
body.dss-skill > header.dss-shell .dss-stage-line strong { color:#fffaf1; }
body.dss-skill > header.dss-shell .dss-brand-copy span,
body.dss-skill > header.dss-shell .dss-stage-line span { color:#c9f1e5; }
body.dss-skill > header.dss-shell .dss-track { background:rgba(255,255,255,.23); }
body.dss-skill > header.dss-shell .dss-controls label,
body.dss-skill > header.dss-shell .dss-controls a,
body.dss-skill > header.dss-shell .dss-controls button {
  border-color:rgba(255,255,255,.36);
  background:rgba(255,255,255,.13);
  color:#f8fff9;
}
body.dss-skill > header.dss-shell .dss-controls select { background:transparent; color:#f8fff9; }
body.dss-skill > header.dss-shell .dss-controls { flex-wrap:nowrap; gap:6px; }
body.dss-skill > header.dss-shell .dss-controls label { padding:6px 7px; }
body.dss-skill > header.dss-shell .dss-controls select { max-width:106px; }
body.dss-skill > header.dss-shell .dausoko-navigator-launcher {
  position:absolute;
  top:calc(100% + 14px);
  right:18px;
  min-height:44px;
  padding:11px 17px;
}

main { width:min(1270px,calc(100% - 40px)); margin:22px auto 54px; }
.card {
  border-color:rgba(232,249,240,.5);
  background:linear-gradient(145deg,rgba(4,62,68,.91),rgba(8,82,80,.85));
  box-shadow:0 22px 52px rgba(14,55,48,.2),inset 0 1px rgba(255,255,255,.1);
  color:#f3fff8;
  backdrop-filter:blur(13px);
  -webkit-backdrop-filter:blur(13px);
}
.eyebrow { color:#c4f0e2; }
h1,h2 { color:#fffaf0; }

/* The opening choice has room to breathe, with the canoe-making tools at the edge rather than over the learner. */
.start {
  max-width:690px;
  margin:clamp(46px,10vh,118px) 8% clamp(56px,12vh,130px) auto;
  padding:38px 42px;
}
.start > p:not(.eyebrow) { color:rgba(234,249,242,.9); }
.start h1 { font-size:clamp(38px,4.7vw,60px); }
label { color:#f8fff9; }
textarea {
  color:#163f45;
  background:rgba(255,255,252,.98);
  border-color:#b8dfd3;
}
textarea:focus { border-color:#40bda5; box-shadow:0 0 0 4px rgba(64,189,165,.16); }
button { min-height:44px; background:linear-gradient(135deg,#b4eee0,#72d5c2); color:#073d43; }
button:disabled { opacity:.48; }

/* The project path is now a focused practical studio rather than a document column. */
#studio {
  grid-template-columns:215px minmax(0,800px);
  justify-content:center;
  gap:18px;
}
#studio > aside.card { align-self:start; position:sticky; top:16px; padding:17px; }
#stepList { padding-left:0; list-style:none; }
#stepList li { color:rgba(231,248,242,.76); }
#stepList li.active { color:#fff; border-radius:12px; background:rgba(99,207,181,.24); }
.lesson { min-height:690px; }
.lesson > h1 { margin-top:7px; }

/* Explanations, physical instructions, evidence and widgets stay visibly workable. */
#stepLearning > section,
#stepPractice > section,
#stepVisual,
#skillProjectBuild {
  margin:18px 0;
  padding:20px;
  border:1px solid rgba(184,223,209,.88);
  border-radius:18px;
  background:rgba(253,255,251,.97);
  box-shadow:0 12px 30px rgba(0,42,47,.13);
  color:#163f45;
}
#stepLearning > section h2,
#stepPractice > section h2,
#stepVisual h2,
#skillProjectBuild h2 { color:#07515a; }
#stepLearning > section p,
#stepPractice > section p,
#stepVisual figcaption,
#skillProjectBuild p { color:#45686a; }
.knowledge,.check { border-left-color:#2db89c; }
.knowledge { background:#eafaf4; }
.check { background:#fff6dc; border-left-color:#efbf59; }
.prerequisite { background:#edf8ff; border-color:#6aadd8; }
.prerequisite h2,.prerequisite [role=status] { color:#07515a; }
.prerequisite label { color:#163f45; background:#fff; }
.tool-decision { color:#275d61; border-left-color:#3b9bd2; background:#ecf8ff; }
.selected-tool { margin-top:16px; }
.selected-tool > *,
.selected-tool .dausoko-learning-path { color:#163f45; }
.actions { justify-content:flex-end; }
#feedback { color:#d9f7ed; }
#preview { border:1px solid #b8dfd3; }
#downloadSkill { background:#fff7e6; color:#07515a; }

@media(max-width:900px) {
  header,main { width:min(100% - 28px,760px); }
  #studio { grid-template-columns:1fr; max-width:720px; margin:0 auto; }
  #studio > aside.card { position:static; order:2; }
  #stepList { display:flex; gap:7px; overflow:auto; }
  #stepList li { min-width:145px; }
  .start { margin:42px auto 60px; }
}

@media(max-width:1050px) and (min-width:651px) {
  body.dss-skill > header.dss-shell { grid-template-columns:1fr auto; }
  body.dss-skill > header.dss-shell .dss-stage { grid-column:1/-1; grid-row:2; }
  body.dss-skill > header.dss-shell .dss-controls { grid-column:2; grid-row:1; }
}

@media(max-width:650px) {
  body::before { background-position:40% center; }
  body::after { background:linear-gradient(rgba(10,49,46,.06),rgba(10,49,46,.2)); }
  header { width:min(100% - 16px,650px); margin-top:10px; padding:11px 12px; }
  body.dss-skill > header.dss-shell { width:min(100% - 16px,650px); margin-top:10px; padding:10px 12px; }
  body.dss-skill > header.dss-shell .dss-controls { flex-wrap:nowrap; }
  body.dss-skill > header.dss-shell .dausoko-navigator-launcher { top:calc(100% + 10px); right:12px; }
  header > div { display:flex; align-items:center; gap:9px; }
  header a { margin-left:0; }
  main { width:min(100% - 16px,650px); margin-top:16px; }
  .card { padding:20px; border-radius:20px; }
  .start { margin:72px auto 46px; padding:28px 22px; }
  .start h1 { font-size:clamp(34px,10vw,46px); }
  #stepLearning > section,
  #stepPractice > section,
  #stepVisual,
  #skillProjectBuild { padding:17px; }
  .actions button { min-height:48px; }
}