/* ============================================================
   Examiner's eye — /version2/assets/js/examiners-eye.js
   Real 15-mark answers: marking, X-ray, the verdict, what
   loses marks, benchmarks and a print pack.
   ============================================================ */
.ee-tabs a { cursor: pointer; }
.ee-cols { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 900px) { .ee-cols { grid-template-columns: 1fr; } }

/* the list of answers */
.ee-list, .ee-pnav { background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; padding: 10px; display: grid; gap: 6px; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; }
@media (max-width: 900px) { .ee-list, .ee-pnav { position: static; max-height: none; } }
.ee-filter { display: flex; gap: 4px; margin-bottom: 4px; }
.ee-filter button, .ee-ans-sw button { flex: 1; font: inherit; font-size: 12.5px; padding: 6px 8px; border: 1px solid var(--rule); background: var(--paper); border-radius: 7px; cursor: pointer; color: var(--ink); }
.ee-filter button[aria-pressed="true"], .ee-ans-sw button[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.ee-item { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; text-align: left; font: inherit; background: var(--paper); border: 1px solid transparent; border-radius: 9px; padding: 9px 10px; cursor: pointer; color: var(--ink); }
.ee-item:hover { background: var(--rule-soft); }
.ee-item.on { border-color: var(--navy); background: var(--brand-soft); }
.ee-it-t { font-weight: 600; font-size: 14px; }
.ee-it-m { grid-column: 1; font-size: 12px; color: var(--muted); }
.ee-mk { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-weight: 700; font-size: 13px; color: var(--ok-deep); }
.ee-mk-hid { color: var(--muted); font-weight: 600; }

/* the answer */
.ee-main { background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; padding: 22px 24px; min-width: 0; }
@media (max-width: 620px) { .ee-main { padding: 16px; } }
.ee-intro h2, .ee-main > h2 { font-size: 22px; margin-bottom: 8px; }
.ee-intro p { margin-bottom: 10px; }
.ee-kicker { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ee-head h2 { font-size: 24px; margin: 2px 0 10px; }
.ee-q { border-left: 3px solid var(--navy); padding: 4px 0 4px 14px; margin-bottom: 16px; }
.ee-q-meta { font-size: 12.5px; color: var(--muted); margin: 0; }
.ee-q-text { font-weight: 600; color: var(--ink); margin: 4px 0; }
.ee-q-text span { font-weight: 400; color: var(--body); }
.ee-pass summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--brand); }
.ee-passage { font-family: var(--serif); font-size: 15px; line-height: 1.6; margin-top: 8px; max-width: 46em; }
.ee-pl { display: flex; gap: 12px; }
.ee-pl span { flex: 1; }
.ee-pl b { width: 2em; text-align: right; font-family: var(--sans); font-size: 11px; color: var(--muted); font-weight: 500; padding-top: 3px; }
.ee-cite { font-style: italic; font-size: 13px; color: var(--muted); text-align: right; max-width: 46em; margin: 2px 0 0; }
.ee-modes { display: flex; gap: 4px; border-bottom: 1px solid var(--rule); margin-bottom: 16px; overflow-x: auto; }
.ee-modes button { font: inherit; font-size: 14.5px; font-weight: 600; padding: 9px 14px; border: 0; background: none; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; }
.ee-modes button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--navy); }
.ee-ans-sw { display: flex; gap: 4px; max-width: 280px; margin-bottom: 10px; }
.ee-ans .ee-ans-typed { display: none; }
.ee-ans.show-typed .ee-ans-typed { display: block; }
.ee-ans.show-typed .ee-ans-scan { display: none; }
.ee-scans { display: grid; gap: 6px; }
.ee-scans img { width: 100%; max-width: 720px; border: 1px solid var(--rule); border-radius: 4px; background: #fff; }
.ee-typed { font-size: 15px; line-height: 1.75; color: var(--ink); max-width: 46em; }
.ee-typed p { margin: 0 0 10px; }
.ee-note { font-size: 13px; color: var(--muted); }
.ee-src { font-size: 12px; color: var(--muted); margin-top: 14px; }
.ee-credit { font-size: 12px; color: var(--muted); margin-top: 26px; max-width: 90ch; }
.ee-credit p { margin: 0 0 6px; }
.ee-credit a { color: var(--brand); }

/* mark it */
.ee-markbox { margin-top: 20px; border-top: 1px solid var(--rule); padding-top: 16px; }
.ee-markbox h3 { font-size: 18px; margin-bottom: 4px; }
.ee-grid { display: grid; gap: 6px; margin: 10px 0; }
.ee-lv { display: grid; grid-template-columns: 80px 56px 1fr; gap: 10px; align-items: baseline; text-align: left; font: inherit; font-size: 13.5px; background: var(--paper); border: 1px solid var(--rule); border-radius: 9px; padding: 9px 12px; cursor: pointer; color: var(--body); }
.ee-lv b { color: var(--ink); }
.ee-lv span { font-weight: 700; color: var(--muted); }
.ee-lv em { font-style: normal; }
.ee-lv:hover { border-color: var(--ink); }
.ee-lv[aria-pressed="true"] { border-color: var(--navy); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--navy); }
@media (max-width: 620px) { .ee-lv { grid-template-columns: 1fr auto; } .ee-lv em { grid-column: 1 / -1; } }
.ee-marks { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 0 14px; font-size: 14px; }
.ee-marks button { font: inherit; font-weight: 700; width: 40px; height: 36px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); cursor: pointer; color: var(--ink); }
.ee-marks button[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn[disabled] { opacity: .45; cursor: default; }

/* the verdict */
.ee-verdict { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: center; background: var(--rule-soft); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.ee-vmark { grid-row: span 2; text-align: center; }
.ee-vmark b { display: block; font-family: var(--serif); font-size: 40px; line-height: 1; color: var(--ink); }
.ee-vmark b small { font-size: 18px; color: var(--muted); }
.ee-vmark span { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.ee-vmine { font-size: 14.5px; color: var(--ink); }
.ee-vlevel { font-size: 13.5px; margin: 0; }
.ee-main h3 { font-size: 17px; margin: 18px 0 8px; }
.ee-comm { margin: 0 0 10px; padding: 10px 14px; border-left: 3px solid var(--ok); background: var(--ok-soft); border-radius: 0 8px 8px 0; color: var(--ink); font-size: 14.5px; }
.ee-comm cite { display: block; font-size: 12px; font-style: normal; color: var(--muted); margin-top: 4px; }
.ee-counts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; }
.ee-counts li { background: var(--rule-soft); border-radius: 8px; padding: 6px 10px; font-size: 13.5px; }
.ee-counts li.bad { background: var(--weak-soft); }
.ee-counts b { color: var(--ink); }

/* X-ray: each tag is a layer, switched on and off by its button */
.ee-legend { display: grid; gap: 8px; margin-bottom: 14px; }
.ee-legend > div { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ee-lg-h { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.ee-chip { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; padding: 5px 10px; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); cursor: pointer; color: var(--ink); }
.ee-chip i { width: 12px; height: 12px; border-radius: 3px; }
.ee-chip b { font-size: 12px; color: var(--muted); }
.ee-chip[aria-pressed="false"] { opacity: .5; }
.ee-chip[aria-pressed="false"] i { background: none !important; border: 1px dashed var(--muted); }
:root { --t-quote: #dbe8ff; --t-translate: #dcf3e4; --t-device: #efe1ff; --t-effect: #ffe9c2; --t-link: #d5f2f2; --t-bad: #e4573f; }
.c-quote i { background: var(--t-quote); } .c-translate i { background: var(--t-translate); } .c-device i { background: var(--t-device); }
.c-effect i { background: var(--t-effect); } .c-link i { background: var(--t-link); }
.c-isolated i, .c-narrative i, .c-undeveloped i, .c-offquestion i, .c-mistranslation i { background: var(--weak-soft); border: 2px solid var(--t-bad); }
.ee-xray .ee-s { border-radius: 3px; padding: 1px 0; }
.ee-xray.show-quote .t-quote { background: var(--t-quote); }
.ee-xray.show-translate .t-translate { background: var(--t-translate); }
.ee-xray.show-device .t-device { background: var(--t-device); }
.ee-xray.show-effect .t-effect { background: var(--t-effect); }
.ee-xray.show-link .t-link { background: var(--t-link); }
.ee-xray.show-isolated .t-isolated, .ee-xray.show-narrative .t-narrative, .ee-xray.show-undeveloped .t-undeveloped,
.ee-xray.show-offquestion .t-offquestion, .ee-xray.show-mistranslation .t-mistranslation { text-decoration: underline wavy var(--t-bad); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.ee-xray-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.ee-xray-scan { max-height: 80vh; overflow: auto; }
@media (max-width: 1100px) { .ee-xray-cols { grid-template-columns: 1fr; } .ee-xray-scan { max-height: none; } }

/* what loses marks */
.ee-pnav button { display: flex; justify-content: space-between; gap: 8px; text-align: left; font: inherit; font-size: 14px; background: var(--paper); border: 1px solid transparent; border-radius: 9px; padding: 8px 10px; cursor: pointer; color: var(--ink); }
.ee-pnav button:hover { background: var(--rule-soft); }
.ee-pnav button[aria-pressed="true"] { border-color: var(--navy); background: var(--brand-soft); }
.ee-pnav button b { font-size: 12px; color: var(--muted); }
.ee-pnav .ee-lg-h { margin: 8px 0 2px 4px; }
.ee-snips { list-style: none; padding: 0; display: grid; gap: 8px; }
.ee-snips li { border: 1px solid var(--rule); border-radius: 9px; padding: 10px 12px; }
.ee-snips p { margin: 0 0 4px; font-size: 14px; }
.ee-snips mark { background: var(--weak-soft); color: var(--ink); text-decoration: underline wavy var(--t-bad); text-underline-offset: 3px; }
.ee-link { font: inherit; font-size: 12.5px; color: var(--brand); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.ee-link:hover { text-decoration: underline; }
.ee-drill { border: 1px solid var(--rule); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.ee-dctx { font-size: 12.5px; color: var(--muted); margin: 0 0 6px; }
.ee-dlat { font-family: var(--serif); font-style: italic; color: var(--ink); margin: 0 0 8px; }
.ee-drill span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.ee-dweak { background: var(--weak-soft); border-radius: 8px; padding: 8px 10px; color: var(--ink); }
.ee-dyou { display: block; margin: 10px 0; }
.ee-dyou textarea { width: 100%; font: inherit; font-size: 14px; border: 1px solid var(--rule); border-radius: 8px; padding: 8px 10px; resize: vertical; }
.ee-dstrong { display: none; }
.ee-drill.open .ee-dstrong { display: block; }
.ee-dstrong > p:first-child { background: var(--ok-soft); border-radius: 8px; padding: 8px 10px; color: var(--ink); margin: 0 0 6px; }
.ee-dwhy { font-size: 13.5px; margin: 0; }

/* benchmarks */
.ee-tablewrap { overflow-x: auto; }
.ee-bench { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 10px 0 18px; }
.ee-bench th, .ee-bench td { border-bottom: 1px solid var(--rule); padding: 7px 8px; text-align: left; vertical-align: middle; }
.ee-bench thead th { font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.ee-bench tbody th small { display: block; font-weight: 400; color: var(--muted); font-size: 11.5px; }
.ee-bench td { min-width: 78px; position: relative; }
.ee-bench td b { position: relative; }
.ee-bar { position: absolute; left: 8px; top: 50%; height: 16px; width: calc((100% - 16px) * 1); max-width: var(--w); transform: translateY(-50%); background: var(--brand-soft); border-radius: 3px; }
.ee-bm { white-space: nowrap; font-weight: 700; }
.ee-avg th, .ee-avg td { background: var(--rule-soft); font-weight: 700; }

/* print */
.ee-pick { display: grid; gap: 6px; margin: 12px 0; }
.ee-pick small { color: var(--muted); }
.ee-opt { display: block; margin-bottom: 12px; font-size: 14px; }
.ee-printout { display: none; }
@media print {
  body.ee-printing > *:not(main), body.ee-printing .phead, body.ee-printing .ee-printctl, body.ee-printing .ee-credit,
  body.ee-printing [data-eye-view]:not([data-eye-view="print"]) { display: none !important; }
  body.ee-printing .ee-printout { display: block; }
  body.ee-printing .page { padding: 0; max-width: none; }
  .ee-sheet { break-after: page; page-break-after: always; font-size: 11pt; color: #000; }
  .ee-sheet .ee-passage { font-size: 11pt; }
  .ee-sheet .ee-scans img { max-width: 100%; border: 0; break-inside: avoid; }
  .ee-sh-k { font-weight: 700; font-size: 14pt; }
  .ee-sh-mark { margin-top: 18px; font-weight: 700; }
  .ee-key-row { break-inside: avoid; margin-bottom: 14px; }
  .ee-typed .ee-s { background: none !important; text-decoration: none !important; }
}