.tutorial-intro{background:#fff;border:2px solid #b8ad65;padding:18px;margin:15px 0;border-radius:6px}
.tutorial-intro h2,.tutorial-box h2{margin-top:0}
.tutorial-progress{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:14px 0 20px}
.tutorial-progress a{display:block;text-align:center;padding:9px 5px;background:#f5f2d5;border:1px solid #c8c08a;color:#163d5a;text-decoration:none;font-weight:bold;border-radius:4px;font-size:.9em}
.tutorial-progress a.current{background:#2f6f9f;color:#fff;border-color:#2f6f9f}.tutorial-progress a.done:after{content:' ✓';color:#207b32}.tutorial-progress a.current.done:after{color:#fff}
.tutorial-box{background:#fff;border:1px solid #c8c08a;padding:16px;margin:15px 0;border-radius:4px}
.tutorial-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:15px 0}
.tutorial-card{background:#fff;border:1px solid #c8c08a;padding:14px;border-radius:4px}.tutorial-card h3{margin-top:0}.tutorial-card label{display:block;cursor:pointer}
.step-badge{display:inline-block;background:#2f6f9f;color:#fff;border-radius:20px;padding:4px 10px;font-weight:bold;margin-right:6px}
.big-button{display:inline-block;padding:12px 18px;background:#2f6f9f;color:#fff!important;text-decoration:none;font-weight:bold;border-radius:4px;border:0;cursor:pointer;font-size:1em}.big-button.secondary{background:#666}.big-button.green{background:#377a45}
.tutorial-nav{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;background:#f5f2d5;border:1px solid #c8c08a;padding:12px;margin:22px 0}.tutorial-nav a{font-weight:bold}
.rating{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.rating label{border:1px solid #bbb;padding:5px 8px;background:#fafafa;border-radius:3px}.rating input{margin-right:3px}
.result-panel{display:none;background:#eef7ee;border:2px solid #6f9b75;padding:16px;margin:18px 0;border-radius:5px}.result-panel.show{display:block}
.profile-summary{background:#fff;border:2px solid #2f6f9f;padding:16px;margin:15px 0;border-radius:6px}.profile-summary dt{font-weight:bold;margin-top:10px}.profile-summary dd{margin-left:0}
textarea.tutorial-input,input.tutorial-input{width:100%;box-sizing:border-box;padding:9px;border:1px solid #999;border-radius:4px;font:inherit}textarea.tutorial-input{min-height:80px}
.help-prompt{font-size:.94em;background:#f8f8f8;border-left:4px solid #c8c08a;padding:8px 10px;margin:8px 0}
.choice-list label{display:block;padding:8px;border-bottom:1px solid #eee}.choice-list label:last-child{border-bottom:0}
.scorebar{height:10px;background:#ddd;margin-top:8px;overflow:hidden;border-radius:5px}.scorebar span{display:block;height:100%;background:#777}
@media(max-width:720px){.tutorial-progress{grid-template-columns:1fr 1fr}.tutorial-progress a:last-child{grid-column:1/-1}.tutorial-nav{display:block}.tutorial-nav span{display:block;margin:8px 0}.big-button{display:block;text-align:center;margin:8px 0}}

/* Keep every tutorial page visually aligned with the Styner.info home page. */
.tutorial-layout{clear:both;padding-top:5px}
.tutorial-layout .contentBig{box-sizing:border-box}
.tutorial-layout .spancontent{box-sizing:border-box;background:#E9E9a9!important;color:#000!important}
.tutorial-layout aside{box-sizing:border-box}
.tutorial-layout h1{color:#a99f66}
.tutorial-layout h2,.tutorial-layout h3{color:#000}
.tutorial-layout .tutorial-intro,.tutorial-layout .tutorial-box,.tutorial-layout .tutorial-card,.tutorial-layout .profile-summary{box-sizing:border-box}
.tutorial-layout .tutorial-card p,.tutorial-layout .tutorial-box p,.tutorial-layout .tutorial-intro p{line-height:1.5}
.tutorial-layout .career-map-wrap img{max-width:100%;height:auto}
@media(max-width:900px){
  .tutorial-layout{padding-top:0}
  .tutorial-layout .contentBig,.tutorial-layout aside{box-sizing:border-box}
}

/* ============================================================
   Tutorial layout repair - Aug 2026
   navstyle.css contains a legacy global .current rule sized for
   slideshow images (384x256). Tutorial tabs also use .current,
   so the active tab was expanding to slideshow size.
   ============================================================ */
.tutorial-progress a.current,
.tutorial-progress a.current:link,
.tutorial-progress a.current:visited,
.tutorial-progress a.current:hover,
.tutorial-progress a.current:focus {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

/* Make all tutorial tabs uniform and keep them inside the left panel. */
.tutorial-progress {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
}
.tutorial-progress a {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}

/* Preserve the original Styner.info desktop proportions. */
@media all and (min-width:901px) {
  .tutorial-layout.container {
    width: 960px;
    margin: 0 auto;
    clear: both;
  }
  .tutorial-layout .contentBig {
    width: 60%;
    float: left;
    clear: left;
    margin: 5px !important;
    padding: 8px !important;
    box-sizing: border-box;
  }
  .tutorial-layout aside {
    width: 35%;
    float: right;
    margin: 2px;
    box-sizing: border-box;
  }
  .tutorial-layout .spancontent {
    width: 100% !important;
    margin: 0 !important;
    padding: 1px !important;
    float: none !important;
    box-sizing: border-box;
  }
}

/* On narrow screens the tabs remain readable instead of inheriting
   any fixed legacy width/height. */
@media all and (max-width:900px) {
  .tutorial-progress {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tutorial-progress a:last-child {
    grid-column: 1 / -1;
  }
}