/* Verbal instruction and the future tutor, using the guide's existing palette. */
.section-tabs { display:flex; gap:8px; padding:0; margin:20px 0 0; }
.section-tabs a { font-size:14px; padding:10px 16px; border-radius:7px; color:var(--muted); }
.section-tabs a[aria-current="page"] { background:var(--tint); color:var(--accent); font-weight:600; }
.section-tabs a:hover { background:#eef1f6; }
.solving-framework { margin-bottom:30px; }
.solving-framework ol { padding-left:24px; margin:18px 0 0; font-size:15px; line-height:1.8; color:var(--muted); }
.solving-framework li { padding-left:4px; margin-bottom:12px; }
.solving-framework strong { color:#252831; font-weight:600; }
.tutor-coming-soon { margin:0 0 30px; color:var(--muted); font-size:14px; }
.tutor-panel { background:white; border:1px solid #d8e2f1; border-radius:13px; padding:28px; margin:0 0 35px; }
.tutor-heading { display:flex; justify-content:space-between; align-items:center; gap:18px; }

.tutor-badge { flex-shrink:0; padding:6px 10px; border-radius:20px; font-size:12px; color:#405d85; background:var(--tint); }
.tutor-intro { max-width:730px; font-size:14px; line-height:1.7; color:var(--muted); margin:16px 0 22px; }
.field-label { display:block; font-size:14px; font-weight:600; margin-bottom:10px; }
#tutor-question { width:100%; resize:vertical; min-height:160px; padding:15px; font:inherit; font-size:15px; line-height:1.7; color:var(--text,#252831); border:1px solid #bfc9d7; border-radius:8px; background:#fcfdff; }
#tutor-question::placeholder { color:#727b89; }
#tutor-question:focus-visible { outline:3px solid #3d75d0; outline-offset:3px; }
.field-help { display:flex; justify-content:space-between; align-items:baseline; gap:14px; font-size:12px; line-height:1.6; color:var(--muted); margin-top:7px; }
.field-help p { margin:0; }
#tutor-count { white-space:nowrap; }
.tutor-modes { display:flex; flex-wrap:wrap; gap:10px 18px; padding:0; margin:22px 0; border:0; }
.tutor-modes legend { font-size:13px; font-weight:600; margin-bottom:11px; }
.tutor-modes label { display:flex; align-items:center; gap:6px; cursor:pointer; font-size:13px; min-height:30px; }
.tutor-modes input { accent-color:var(--blue); margin:0; width:16px; height:16px; }
.tutor-modes input:focus-visible { outline:3px solid #3d75d0; outline-offset:3px; }
.tutor-actions { display:flex; flex-wrap:wrap; gap:10px; }
.primary-button,.secondary-button { cursor:pointer; min-height:44px; border-radius:7px; padding:10px 16px; font-size:13px; font-weight:550; line-height:1.5; }
.primary-button { background:#3568bd; color:white; border:1px solid #3568bd; }
.primary-button:hover:not(:disabled) { background:#295699; }
.secondary-button { background:white; color:#405d85; border:1px solid #d6dfeb; }
.secondary-button:hover:not(:disabled) { background:#eff4fc; }
.primary-button:disabled,.secondary-button:disabled { cursor:not-allowed; background:#edf0f4; color:#5e6573; border-color:#e0e4eb; }
.tutor-status { font-size:14px; line-height:1.6; color:#405d85; }
.tutor-status:empty { display:none; }
.tutor-footnote { font-size:12px; line-height:1.7; color:var(--muted); margin:16px 0 0; max-width:760px; }
.tutor-conversation:empty { display:none; }
.tutor-conversation { border-top:1px solid var(--line); margin:0 0 22px; }
.tutor-turn { padding:15px 18px; margin:14px 0; background:#f5f7fa; border-radius:8px; }
.tutor-turn.assistant { background:var(--tint); }
.tutor-turn h3 { margin:0 0 8px; font-size:13px; }
.tutor-turn p { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; font-size:14px; line-height:1.75; }
.instruction-example-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.instruction-example-grid > div > h3 { font-size:16px; margin:0 0 13px; }
.instruction-example-grid .worked-example { margin-top:0; }
.instruction-example-grid .secondary-button { margin-top:13px; }
@media(max-width:700px) {
  .instruction-example-grid { grid-template-columns:1fr; }
  .tutor-panel { padding:20px; }
  .tutor-heading { align-items:flex-start; }

  .tutor-badge { font-size:11px; }
  .field-help { flex-direction:column; gap:4px; }
  .instruction-examples .section-heading { flex-direction:column; align-items:flex-start; gap:7px; }
  .instruction-examples .section-heading p { text-align:left; max-width:none; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

.tutor-samples { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:22px; }
.tutor-samples > span { font-size:13px; color:var(--muted); margin-right:4px; }
.tutor-modes { gap:8px; }
.tutor-modes label { border:1px solid #d6dfeb; border-radius:7px; padding:10px 12px; gap:8px; }
.tutor-modes label:has(input:checked) { background:var(--tint); border-color:var(--blue); color:#294d83; }
@media(max-width:620px) {
  .tutor-samples > span { flex-basis:100%; }
  .tutor-modes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
}