/* My IELTS plan (/study/ielts/plan). Square like the rest of Study; uses the IELTS roadmap tokens (--ir-*).
 * Done states are a filled box with a tick plus the word "Done", never colour alone. */
.mp-page { --mp-gap: clamp(16px, 2.6vw, 28px); }
.mp-page :is(h1, h2, h3, h4) { font-family: var(--ir-font); letter-spacing: normal; text-transform: none; }
.mp-page [hidden] { display: none !important; }
.mp-hero-inner { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .9fr); gap: 28px 56px; align-items: end; padding-block: clamp(32px, 5vw, 64px); }
.mp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.mp-stats > div { padding: 14px 16px; border: 1px solid #4a453b; background: var(--ir-ink-2); min-width: 0; }
.mp-stats dt { margin: 0 0 4px; color: var(--ir-on-ink-muted); font: 500 14px/1.4 var(--ir-font); }
.mp-stats dd { margin: 0; color: var(--ir-hi); font: 700 28px/1.15 var(--ir-font); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.mp-section { padding-block: clamp(22px, 3.4vw, 44px); }
.mp-section + .mp-section { padding-top: 0; }
.mp-panel { background: var(--ir-card); border: 2px solid var(--ir-ink); padding: clamp(18px, 3vw, 32px); color: var(--ir-text); font: 400 16px/1.6 var(--ir-font); min-width: 0; box-sizing: border-box; }
.mp-panel h2 { margin: 0 0 14px; font-size: clamp(21px, 2.2vw, 26px); line-height: 1.3; color: var(--ir-ink); }
.mp-panel h3 { margin: 18px 0 10px; font-size: 19px; color: var(--ir-ink); }
.mp-hint { margin: 8px 0 0; color: var(--ir-muted); font: 400 14px/1.6 var(--ir-font); }
.mp-kicker { margin: 0 0 6px; color: var(--ir-exercise); font: 600 14px/1.5 var(--ir-font); }
.mp-status { min-height: 1.5em; margin: 12px 0 0; color: var(--ir-ink); font: 500 15px/1.6 var(--ir-font); }
.mp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 18px; }
.mp-actions .btn { white-space: normal; }
.mp-page .text-link { background: none; border: 0; padding: 0; color: var(--ir-pen); font: 600 15px/1.5 var(--ir-font); text-decoration: underline; cursor: pointer; }
.mp-page .btn:disabled { opacity: .55; cursor: default; }

/* Set-up */
.mp-setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
.mp-field { display: grid; gap: 8px; align-content: start; min-width: 0; }
.mp-field > label:first-child, .mp-choice legend { color: var(--ir-ink); font: 700 17px/1.4 var(--ir-font); padding: 0; }
.mp-panel select, .mp-panel input[type="date"], .mp-add input, .mp-add textarea { box-sizing: border-box; width: 100%; min-height: 46px; padding: 10px 12px; border: 2px solid var(--ir-line); border-radius: 0; background: #fff; color: var(--ir-ink); font: 400 16px/1.5 var(--ir-font); }
.mp-panel :is(select, input, textarea):focus { outline: 3px solid var(--ir-pen); outline-offset: 1px; border-color: var(--ir-ink); }
.mp-panel input[type="date"]:disabled { opacity: .5; }
.mp-check { display: inline-flex; align-items: center; gap: 8px; color: var(--ir-text); font: 500 15px/1.4 var(--ir-font); cursor: pointer; }
.mp-check input { width: 20px; height: 20px; accent-color: var(--ir-ink); }
.mp-choice { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; border: 0; padding: 0; margin: 24px 0 0; min-width: 0; }
.mp-choice legend { margin-bottom: 10px; }
.mp-choice label { position: relative; display: block; cursor: pointer; min-width: 0; }
.mp-choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.mp-choice label > span { display: block; height: 100%; box-sizing: border-box; padding: 12px 14px; border: 2px solid var(--ir-line); background: #fff; color: var(--ir-muted); font-size: 14px; line-height: 1.45; }
.mp-choice label > span strong { display: block; color: var(--ir-ink); font-size: 17px; }
.mp-minutes label > span strong { font-size: 26px; line-height: 1.1; }
.mp-choice input:checked + span { border-color: var(--ir-ink); background: var(--ir-hi); color: var(--ir-ink); }
.mp-choice input:focus-visible + span { outline: 3px solid var(--ir-pen); outline-offset: 2px; }
.mp-self { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.mp-self .mp-field > label:first-child { font-size: 15px; }

/* Placement test */
.mp-test-bar { position: sticky; top: var(--mp-header, 0px); z-index: 5; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 18px; padding: 12px 0; background: var(--ir-paper); border-bottom: 2px solid var(--ir-ink); }
.mp-test-bar h2 { margin: 0; font-size: 22px; color: var(--ir-ink); }
.mp-timer { margin: 0; color: var(--ir-ink); font: 600 15px/1.4 var(--ir-font); }
.mp-timer output { font: 700 18px/1 ui-monospace, Consolas, monospace; }
#mp-test, #mp-result, #vocab { outline: none; scroll-margin-top: var(--mp-header, 0px); }
#mp-test-form { display: grid; gap: var(--mp-gap); margin-top: 18px; }
.mp-test-section { background: var(--ir-card); border: 2px solid var(--ir-ink); padding: clamp(16px, 3vw, 28px); min-width: 0; }
.mp-test-section h3 { margin: 0 0 12px; font-size: 21px; color: var(--ir-ink); }
.mp-test-section audio { width: 100%; margin: 10px 0 14px; }
.mp-passage { margin: 0 0 16px; padding: 14px 16px; border-left: 4px solid var(--ir-ink); background: #f6f1e6; }
.mp-passage h4 { margin: 0 0 6px; font-size: 16px; color: var(--ir-ink); }
.mp-passage p { margin: 0; font: 400 16px/1.7 Georgia, "Times New Roman", serif; color: var(--ir-ink); }
.mp-item { margin: 0 0 16px; padding: 0 0 14px; border: 0; border-bottom: 1px solid var(--ir-line); min-width: 0; }
.mp-item:last-child { border-bottom: 0; margin-bottom: 0; }
.mp-item legend { padding: 0; margin-bottom: 8px; color: var(--ir-ink); font: 600 16px/1.5 var(--ir-font); }
.mp-item label { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border: 1px solid transparent; cursor: pointer; font: 400 16px/1.45 var(--ir-font); }
.mp-item label:hover { background: #f6f1e6; }
.mp-item input { flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ir-ink); }
.mp-item label:has(input:checked) { border-color: var(--ir-ink); background: var(--ir-hi); }

/* Result */
#mp-result { outline: none; }
.mp-bands { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mp-bands li { display: grid; gap: 2px; padding: 12px 14px; border: 2px solid var(--ir-ink); background: #fff; }
.mp-bands span { color: var(--ir-muted); font: 600 14px/1.4 var(--ir-font); }
.mp-bands strong { color: var(--ir-ink); font: 700 30px/1.1 var(--ir-font); }
.mp-guest { margin-top: 18px; padding-top: 6px; border-top: 1px solid var(--ir-line); }

/* Plan */
.mp-plan-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, 1fr); gap: var(--mp-gap); align-items: start; }
.mp-today-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.mp-today-head h2 { margin-bottom: 4px; }
.mp-today-head .mp-hint { margin: 0 0 10px; }
.mp-notice { margin: 0 0 16px; padding: 10px 14px; border-left: 4px solid var(--ir-exercise); background: #fbeee4; color: #6b260d; font: 500 15px/1.55 var(--ir-font); }
.mp-tasks, .mp-day-tasks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 0; }
.mp-task { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--ir-line); min-width: 0; }
.mp-task:last-child { border-bottom: 0; }
.mp-box { flex: 0 0 26px; width: 26px; height: 26px; margin-top: 2px; padding: 0; box-sizing: border-box; border: 2px solid var(--ir-ink); background: #fff; }
button.mp-box { cursor: pointer; }
button.mp-box:focus-visible { outline: 3px solid var(--ir-pen); outline-offset: 2px; }
.mp-done > .mp-box { background: var(--ir-done) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='white' stroke-width='2.4'/%3E%3C/svg%3E") center/16px no-repeat; border-color: var(--ir-done); }
.mp-preview > .mp-box { border-style: dashed; border-color: var(--ir-muted); }
.mp-task-text { min-width: 0; flex: 1 1 auto; }
.mp-task-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin: 0 0 2px; color: var(--ir-muted); font: 600 13px/1.5 var(--ir-font); }
.mp-task-meta .badge { font-size: 12px; }
.mp-task-title { color: var(--ir-ink); font: 600 17px/1.4 var(--ir-font); text-decoration: underline; text-decoration-color: var(--ir-line); text-underline-offset: 3px; overflow-wrap: anywhere; }
.mp-task-title:hover { text-decoration-color: var(--ir-ink); }
.mp-done .mp-task-title { color: var(--ir-muted); }
.mp-task-hint { margin: 4px 0 0; color: var(--ir-muted); font: 400 14px/1.5 var(--ir-font); }
.mp-done .mp-task-hint { color: var(--ir-done); font-weight: 600; }
.mp-preview .mp-task-title { color: var(--ir-text); }
.mp-plan-actions { margin-top: 10px; }
.mp-upcoming h2 { margin-bottom: 4px; }
.mp-week { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.mp-day { padding: 12px 14px; border: 1px solid var(--ir-line); background: #fff; min-width: 0; }
.mp-day-practice { border: 2px solid var(--ir-ink); }
.mp-day-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; color: var(--ir-ink); font: 400 15px/1.4 var(--ir-font); }
.mp-day-head strong { text-transform: capitalize; }
.mp-day-min { margin-left: auto; color: var(--ir-muted); font-size: 13px; }
.mp-chip { display: inline-block; padding: 1px 8px; background: var(--ir-ink); color: var(--ir-on-ink); font: 600 12px/1.6 var(--ir-font); }
.mp-day .mp-task { padding: 8px 0; gap: 10px; }
.mp-day .mp-box { flex-basis: 16px; width: 16px; height: 16px; margin-top: 4px; }
.mp-day .mp-task-title { font-size: 15px; font-weight: 500; }
.mp-day .mp-task-meta { font-size: 12px; }
.mp-more { padding-top: 6px; color: var(--ir-muted); font: 500 13px/1.4 var(--ir-font); }

/* Vocabulary */
#vocab { outline: none; }
.mp-vocab-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px 24px; }
.mp-vocab-head > div:first-child { flex: 1 1 340px; min-width: 0; }
.mp-vocab-head .mp-hint { max-width: 44em; }
.mp-vocab-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.mp-add { display: grid; gap: 6px; max-width: 560px; margin-top: 18px; }
.mp-add label { margin-top: 8px; color: var(--ir-ink); font: 600 15px/1.4 var(--ir-font); }
.mp-add .btn { justify-self: start; margin-top: 12px; }
.mp-cards { margin-top: 18px; }
.mp-cards summary { cursor: pointer; color: var(--ir-ink); font: 700 16px/1.5 var(--ir-font); }
.mp-cards ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 0; }
.mp-cards li { padding: 10px 0; border-bottom: 1px solid var(--ir-line); }
.mp-card-pair { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0; font: 400 16px/1.5 var(--ir-font); overflow-wrap: anywhere; }
.mp-card-pair del { color: #8a2d1c; text-decoration-thickness: 2px; }
.mp-card-pair ins { color: var(--ir-done); text-decoration: none; font-weight: 600; }
.mp-arrow { color: var(--ir-muted); }
.mp-cards .mp-hint { margin: 2px 0 4px; }
.mp-flash { margin-top: 18px; padding: clamp(16px, 3vw, 26px); border: 2px solid var(--ir-ink); background: #f6f1e6; }
.mp-flash-card { padding: 18px 20px; border: 2px solid var(--ir-ink); background: #fff; min-height: 120px; }
.mp-pair-label { margin: 0; color: var(--ir-muted); font: 600 12px/1.6 var(--ir-font); text-transform: uppercase; letter-spacing: .04em; }
.mp-flash-front { margin: 2px 0 14px; color: var(--ir-ink); font: 600 24px/1.4 Georgia, "Times New Roman", serif; overflow-wrap: anywhere; }
.mp-flash-back { margin: 2px 0 10px; color: var(--ir-done); font: 600 22px/1.4 Georgia, "Times New Roman", serif; overflow-wrap: anywhere; }
.mp-flash-note { margin: 0; color: var(--ir-text); font: 400 15px/1.6 var(--ir-font); }
.mp-flash-done { margin: 0 0 10px; color: var(--ir-done); font: 700 18px/1.5 var(--ir-font); }
.mp-flash-close { margin-top: 14px; }
.mp-grades { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mp-grade { display: grid; gap: 2px; justify-items: center; min-height: 56px; padding: 8px 10px; border: 2px solid var(--ir-ink); border-radius: 0; background: #fff; color: var(--ir-ink); font-family: var(--ir-font); cursor: pointer; }
.mp-grade strong { font-size: 16px; }
.mp-grade small { font-size: 12px; color: var(--ir-muted); }
.mp-grade-good { background: var(--ir-hi); }
.mp-grade:focus-visible { outline: 3px solid var(--ir-pen); outline-offset: 2px; }

/* Band chart */
.mp-chart-figure { position: relative; margin: 0; }
.mp-chart-figure figcaption { margin: 0 0 12px; max-width: 52em; }
.mp-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 10px; padding: 0; color: var(--ir-text); font: 500 14px/1.5 var(--ir-font); }
.mp-legend li { display: inline-flex; align-items: center; gap: 8px; }
.mp-swatch { display: inline-block; width: 12px; height: 12px; }
.mp-legend .mp-swatch-writing { background: var(--ir-pen); border-radius: 50% !important; }   /* a circle, like its points: shape as well as colour */
.mp-swatch-placement { background: var(--ir-exercise); }
.mp-swatch-target { width: 20px; height: 0; border-top: 2px dashed var(--ir-ink); }
.mp-chart { min-height: 120px; }
.mp-chart svg { display: block; max-width: 100%; overflow: visible; }
.mp-grid { stroke: var(--ir-track); stroke-width: 1; }
.mp-axis { fill: var(--ir-muted); font: 500 12px var(--ir-font); }
.mp-target { stroke: var(--ir-ink); stroke-width: 2; stroke-dasharray: 6 5; }
.mp-target-label { fill: var(--ir-ink); font-weight: 700; }
.mp-line { fill: none; stroke-width: 2; stroke-linejoin: round; }
.mp-line-writing { stroke: var(--ir-pen); }
.mp-line-placement { stroke: var(--ir-exercise); stroke-dasharray: 4 3; }
.mp-hit { fill: transparent; }
.mp-dot { stroke: var(--ir-card); stroke-width: 2; }
.mp-dot-writing { fill: var(--ir-pen); }
.mp-dot-placement { fill: var(--ir-exercise); }
.mp-point { cursor: default; outline: none; }
.mp-point:focus-visible .mp-hit { stroke: var(--ir-pen); stroke-width: 2; }
.mp-tooltip { position: absolute; z-index: 4; display: grid; gap: 2px; min-width: 150px; max-width: 220px; padding: 8px 10px; background: var(--ir-ink); color: var(--ir-on-ink); font: 400 13px/1.45 var(--ir-font); pointer-events: none; }
.mp-tooltip strong { font-size: 18px; color: var(--ir-hi); }
.mp-table { margin-top: 14px; }
.mp-table summary { cursor: pointer; color: var(--ir-pen); font: 600 15px/1.5 var(--ir-font); }
.mp-table div { overflow-x: auto; }
.mp-table table { width: 100%; margin-top: 10px; border-collapse: collapse; font: 400 14px/1.5 var(--ir-font); }
.mp-table :is(th, td) { padding: 6px 8px; border-bottom: 1px solid var(--ir-line); text-align: left; white-space: nowrap; }
.mp-table th { color: var(--ir-ink); font-weight: 700; }
.mp-foot { padding-block: 4px; }
.mp-page .disclaimer { margin: 20px 0; color: var(--ir-muted); font: 400 13px/1.6 var(--ir-font); }

@media (max-width: 1000px) {
  .mp-hero-inner, .mp-plan-grid { grid-template-columns: minmax(0, 1fr); }
  .mp-self { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .mp-setup-grid, .mp-choice.mp-level { grid-template-columns: minmax(0, 1fr); }
  .mp-bands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-stats dd { font-size: 22px; }
  .mp-flash-front { font-size: 20px; }
  .mp-flash-back { font-size: 19px; }
}