/* மாதிரித் தேர்வு — Practice tests (js/views/mocktest.js) */

/* ---- Home: the year's tests ---- */
.mt-grades { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.mt-grades .pp-toggle, .mt-mode .pp-toggle, .mt-self .pp-toggle, .mt-oral .pp-toggle { min-height: 44px; }
.mt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.mt-card { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.mt-card.is-project { background: var(--surface-2); box-shadow: none; }
.mt-card.is-final { border: 2px solid var(--zari); background: linear-gradient(150deg, var(--zari-soft), var(--surface) 60%); }
.mt-badge { display: grid; justify-items: center; align-content: start; gap: 2px; min-width: 76px; padding: 10px 8px; border-radius: 20px; background: var(--peacock-soft); color: var(--peacock-deep); text-align: center; }
.mt-badge .ml { font-size: .85rem; font-weight: 700; }
.mt-badge b { font: 800 2rem/1 var(--f-display); }
.mt-badge b .icon { width: 30px; height: 30px; }
.is-final .mt-badge { background: var(--zari-soft); color: var(--zari-deep); }
.is-project .mt-badge { background: var(--ground-2); color: var(--ink-2); }
.mt-wk { font: 600 .75rem var(--f-ui); color: var(--ink-2); }
.mt-card-body { display: grid; gap: 8px; min-width: 0; }
.mt-card-body h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 1.35rem; }
.mt-card-body h2 .ml { color: var(--peacock-deep); }
.mt-card-body h2 .en { font: 600 .95rem var(--f-ui); color: var(--ink-2); }
.mt-meta { margin: 0; color: var(--ink-2); font-size: .92rem; }
.mt-parts { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mt-parts .chip { white-space: normal; }
.mt-last { margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 600; color: var(--leaf); font-size: .92rem; }
.mt-last .icon { width: 18px; height: 18px; }
.mt-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.mt-rules { margin-top: 22px; padding: 4px 18px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.mt-rules summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--peacock); }
.mt-rules-body { padding-bottom: 14px; }
.mt-rules-body h3 { font-size: 1.1rem; margin: 14px 0 4px; }
.mt-rules-body ul { margin: 4px 0; padding-left: 1.2em; }
.mt-rules-body small { color: var(--ink-3); }

/* ---- Paper ---- */
.mt-h1-en { font: 600 1rem var(--f-ui); color: var(--ink-2); flex-basis: 100%; }
.mt-sheet { margin-top: 18px; padding: clamp(14px, 3vw, 28px); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); display: grid; gap: 22px; min-width: 0; }
.mt-sheet-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding-bottom: 14px; border-bottom: 2px dashed var(--line-2); }
.mt-sheet-head p { margin: 0; }
.mt-sheet-box { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.mt-sheet-box > span { display: inline-flex; align-items: baseline; gap: 4px; padding: 6px 12px; border-radius: 12px; border: 2px solid var(--line-2); font-size: .9rem; color: var(--ink-2); }
.mt-sheet-box > span .ml { font-size: .82rem; }
.mt-sheet-box b { font: 800 1.2rem var(--f-display); color: var(--ink); margin-left: 4px; }
.mt-sheet-box .is-total { border-color: var(--peacock); }
.mt-part { display: grid; gap: 16px; min-width: 0; }
.mt-part-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 1.45rem; padding: 10px 14px; border-radius: 14px; background: var(--peacock-soft); }
.mt-part-title .ml { color: var(--peacock-deep); }
.mt-part-title .en { font: 700 .95rem var(--f-ui); color: var(--ink-2); }
.mt-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mt-mode > span { font-weight: 600; color: var(--ink-2); }
.mt-howto { margin: 0; display: flex; gap: 8px; align-items: flex-start; color: var(--ink-2); }
.mt-howto .icon { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--zari-deep); }
.mt-rule { padding: 8px 12px; border-radius: 12px; background: var(--zari-soft); color: var(--ink); }
.mt-sec { display: grid; gap: 10px; min-width: 0; }
.mt-sec-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 1.2rem; margin: 6px 0 0; }
.mt-sec-title .ml { color: var(--kumkum); }
.mt-sec-title .en { font: 600 .9rem var(--f-ui); color: var(--ink-2); }
.mt-marks { margin-left: auto; font: 700 .8rem var(--f-ui); padding: 2px 10px; border-radius: var(--r-pill); background: var(--ground-2); color: var(--ink-2); }
.mt-items { margin: 0; padding-left: 1.9em; display: grid; gap: 12px; }
.mt-items > li { padding-left: 4px; }
.mt-items > li::marker { font: 800 1.05rem var(--f-display); color: var(--peacock-deep); }
.mt-item { display: grid; gap: 8px; padding: 12px 14px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); min-width: 0; }
.mt-hear { display: flex; flex-wrap: wrap; gap: 8px; }
.mt-answer { display: flex; flex-wrap: wrap; gap: 8px; }
.mt-input { flex: 1 1 200px; max-width: 360px; font-size: 1.2rem; }
.mt-input[readonly] { background: var(--surface-2); }
.mt-nb { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); font-style: italic; }
.mt-nb .icon { width: 18px; height: 18px; }
.mt-word { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mt-word .ml { font: 700 1.35rem/1.4 var(--f-display); color: var(--peacock-deep); }
.mt-q { display: grid; gap: 2px; }
.mt-q .rt-line { margin: 0; }
.mt-q-ml { margin: 0; font-weight: 600; }
.mt-q-en { margin: 0; color: var(--ink-2); font-size: .92rem; }
.mt-opts { gap: 8px; }
@media (min-width: 760px) { .mt-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mt-opt { min-height: 52px; padding: 10px 40px 10px 14px; border-width: 2px; }
.mt-opt .quiz-opt-ml { font-size: 1.1rem; }
.mt-opt .quiz-opt-en { font-size: .98rem; font-weight: 600; }
.mt-opt[aria-pressed="true"] { border-color: var(--peacock); background: var(--peacock-soft); box-shadow: inset 0 0 0 2px var(--peacock); }
.mt-opt[aria-pressed="true"]:not(.is-right):not(.is-wrong) .choice-mark::after { content: '●'; color: var(--peacock); font-size: 1.1rem; }
.mt-opt:disabled { cursor: default; }
.mt-opt.is-wrong { animation: none; opacity: 1; }
.mt-result:empty { display: none; }
.mt-result p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.mt-result .icon { width: 20px; height: 20px; flex: none; }
.mt-ok { color: var(--leaf); font-weight: 600; }
.mt-no { color: var(--kumkum); font-weight: 600; }
.mt-no .ml, .mt-half .ml { color: var(--ink); }
.mt-half { color: var(--zari-deep); font-weight: 600; }
.mt-why { color: var(--ink-2); font-weight: 400; }
.mt-check { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 2px dashed var(--line-2); }
.mt-check p { margin: 0; }
.mt-answer-word { font: 700 1.3rem var(--f-display); color: var(--peacock-deep); }
.mt-self-q { color: var(--ink-2); font-size: .9rem; }
.mt-self { display: flex; flex-wrap: wrap; gap: 6px; }
.mt-handin { display: grid; justify-items: center; gap: 10px; padding-top: 6px; }
.mt-total { margin: 0; font-size: 1.15rem; text-align: center; }
.mt-total:empty { display: none; }
.mt-total b { font: 800 1.5rem var(--f-display); color: var(--peacock-deep); }
.mt-left { color: var(--ink-2); font-size: .92rem; }

/* ---- Oral ---- */
.mt-oral { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.mt-task { display: grid; gap: 10px; padding: 16px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--line); min-width: 0; }
.mt-task-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 1.15rem; margin: 0; }
.mt-task-title > .icon { width: 24px; height: 24px; color: var(--zari-deep); }
.mt-task-title .ml { color: var(--kumkum); }
.mt-task-title .en { font: 600 .9rem var(--f-ui); color: var(--ink-2); }
.mt-passage { padding: 14px 16px; border-radius: 14px; background: var(--surface); border-left: 5px solid var(--peacock); }
.mt-passage .rt-line { margin: 0; line-height: 2; }
.mt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.mt-en summary, .mt-peek summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--peacock); }
.mt-en p { margin: 0 0 6px; color: var(--ink-2); }
.mt-src { margin: 0; font-size: .85rem; color: var(--ink-3); }
.mt-kural { display: grid; gap: 4px; }
.mt-kural-n { margin: 0; display: flex; align-items: center; gap: 8px; font: 700 1.15rem var(--f-display); color: var(--peacock-deep); }
.mt-kural-lines { margin: 4px 0 8px; padding: 10px 14px; border-radius: 12px; background: var(--surface); display: grid; font: 600 1.15rem/1.8 var(--f-ml); }
.mt-kural-m { margin: 0; }
.mt-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; }
.mt-link .icon { width: 18px; height: 18px; }
.mt-card-topic { position: relative; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 2px solid var(--zari); display: grid; gap: 4px; }
.mt-card-topic .rt-line { margin: 0; }
.mt-topic-n { justify-self: start; font: 700 .75rem var(--f-ui); color: var(--zari-deep); }
.mt-ideas { margin: 0; color: var(--ink-2); font-size: .92rem; }
.mt-timer { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mt-time { font: 700 1.2rem var(--f-ui); font-variant-numeric: tabular-nums; min-width: 3.2em; }
.mt-bar { display: inline-block; width: 120px; height: 10px; border-radius: 99px; background: var(--ground-2); overflow: hidden; border: 1px solid var(--line); }
.mt-bar i { display: block; height: 100%; width: 0; background: var(--peacock); transition: width .25s linear; }
.mt-bar.is-done i { background: var(--leaf); }
.mt-scores { border-top: 2px dashed var(--line-2); padding-top: 10px; display: grid; gap: 8px; }
.mt-locked { margin: 0; display: flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: .9rem; }
.mt-locked .icon { width: 16px; height: 16px; }
.mt-score-head { margin: 0; font-weight: 700; }
.mt-crit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.mt-crit-label { display: grid; min-width: 0; flex: 1 1 200px; }
.mt-crit-label .ml { font-weight: 700; }
.mt-crit-label .en { font-size: .85rem; color: var(--ink-2); }
.mt-stepper { display: inline-flex; align-items: center; gap: 6px; }
.mt-step { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--surface); color: var(--ink); font: 700 1.4rem/1 var(--f-ui); cursor: pointer; }
.mt-step:hover:not(:disabled) { border-color: var(--peacock); }
.mt-step:disabled { opacity: .4; cursor: default; }
.mt-step-val { min-width: 2.2em; text-align: center; font: 800 1.3rem var(--f-display); color: var(--peacock-deep); }
.mt-step-max { color: var(--ink-3); font-size: .85rem; margin-right: 4px; }
.mt-unlock { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.mt-finish { display: flex; justify-content: center; padding-top: 8px; border-top: 2px dashed var(--line-2); }

/* ---- Result ---- */
.mt-result-panel { margin-top: 22px; padding: clamp(16px, 3vw, 28px); border-radius: var(--r-lg); background: linear-gradient(150deg, var(--leaf-soft), var(--surface) 65%); border: 2px solid var(--leaf); display: grid; gap: 16px; }
.mt-result-panel:focus { outline: none; }
.mt-result-panel[hidden] { display: none; }
.mt-result-panel .mt-part-title { background: transparent; padding: 0; }
.mt-res-top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.mt-res-praise { margin: 6px 0 0; font-size: 1.1rem; font-weight: 600; }
.mt-res-grid { margin: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.mt-res-grid > div { padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.mt-res-grid > div.is-total { border: 2px solid var(--peacock); }
.mt-res-grid dt { font-weight: 600; color: var(--ink-2); font-size: .9rem; }
.mt-res-grid dd { margin: 2px 0 0; font: 800 1.6rem var(--f-display); color: var(--ink); }
.mt-res-grid dd small { font: 500 .85rem var(--f-ui); color: var(--ink-2); }
.mt-todo { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mt-todo-link { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; padding: 12px 14px; min-height: 44px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.mt-todo-link:hover { border-color: var(--peacock); }
.mt-todo-link .ml { font-weight: 700; color: var(--peacock-deep); }
.mt-todo-link .en { grid-column: 1; font-size: .9rem; color: var(--ink-2); }
.mt-todo-link > .icon { grid-column: 2; grid-row: 1 / span 3; }
.mt-todo-words { grid-column: 1; font-size: .95rem; color: var(--kumkum) !important; font-weight: 600 !important; }

@media (max-width: 560px) {
  .mt-card { grid-template-columns: 1fr; }
  .mt-badge { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 8px; min-width: 0; }
  .mt-badge b { font-size: 1.5rem; }
  .mt-sheet-box { margin-left: 0; }
  .mt-items { padding-left: 1.5em; }
  .mt-marks { margin-left: 0; }
  .mt-item { padding: 10px; }
  .mt-bar { width: 90px; }
}
@media (prefers-reduced-motion: reduce) { .mt-bar i { transition: none; } }
:root[data-motion="reduced"] .mt-bar i { transition: none; }
:root[data-contrast="high"] .mt-opt[aria-pressed="true"] { outline: 3px solid var(--ink); outline-offset: 2px; }
:root[data-contrast="high"] .mt-item, :root[data-contrast="high"] .mt-task, :root[data-contrast="high"] .mt-card { border-color: var(--line-2); }
.mt-result-panel, .mt-handin, .mt-total { scroll-margin-top: 90px; scroll-margin-bottom: 90px; }