/* Strategy Journey App layout (extends styles.css) */
.small-hero { padding: 48px 0 40px; }
.small-hero h1 { font-size: clamp(28px, 4vw, 42px); }
.jlayout { display: grid; grid-template-columns: 250px 1fr; gap: 28px; align-items: start; }
.jside { position: sticky; top: 84px; }
.jnav { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; }
.jnav button { width: 100%; text-align: left; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--text); cursor: pointer; font-size: 14px; }
.jnav button .n { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--soft); color: var(--navy); font: 600 12px Poppins, sans-serif; }
.jnav button.done .n { background: var(--lens); color: #fff; }
.jnav button.on { border-color: var(--amber); box-shadow: 0 0 0 2px rgba(240,162,2,.3); color: var(--navy); }
.jtools { display: grid; gap: 8px; }
.jmain .card { margin-bottom: 16px; }
.jmain h2 { font-size: 26px; }
.tip { background: var(--soft); border-left: 4px solid var(--amber); border-radius: 0 10px 10px 0; padding: 10px 14px; margin: 12px 0 18px; font-size: 14.5px; }
.field { display: grid; gap: 6px; margin: 14px 0; }
.field label, .field .lbl { font: 600 14px Poppins, sans-serif; color: var(--navy); margin: 0; }
.field input[type="text"], .field input[type="date"], .field select, .field textarea, .rowgrid input, .rowgrid select { width: 100%; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--card); color: var(--navy); font: inherit; }
.field textarea { min-height: 110px; resize: vertical; }
.hint { font-size: 12.5px; opacity: .8; margin: 0; }
.rowgrid { display: grid; gap: 8px; align-items: center; margin: 6px 0; }
.rowgrid.f { grid-template-columns: 1.1fr 120px 2fr; }
.rowgrid.a { grid-template-columns: 2fr 1fr 150px 36px; }
.rowgrid .fname { font-weight: 600; color: var(--navy); font-size: 14px; }
.rowgrid .x { border: 0; background: transparent; color: var(--no); font-size: 20px; cursor: pointer; }
.swot { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.jnavbar { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.coachbox { margin-top: 14px; }
.mdprev { white-space: pre-wrap; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; font: 13px/1.6 ui-monospace, Menlo, Consolas, monospace; color: var(--navy); max-height: 520px; overflow: auto; }
@media (max-width: 900px) { .jlayout { grid-template-columns: 1fr; } .jside { position: static; } .jnav { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .rowgrid.f, .rowgrid.a { grid-template-columns: 1fr; } .swot { grid-template-columns: 1fr; } }
@media print { .nav, .jside, .jnavbar, .coachbox, footer, .hero { display: none !important; } .jlayout { display: block; } }