/*
 * polish.css - load AFTER assets/css/styles.css.
 * Layers an exam toolbar, cleaner question layout and print rules on the existing theme.
 */
:root {
    --irsm-green: #53c385;      /* matches the existing header accent */
    --irsm-green-dark: #1d6b45; /* readable green for text on light backgrounds */
    --irsm-slate: #484d55;      /* matches the existing header bar */
    --irsm-ink: #23272d;
    --irsm-red: #b3261e;
    --irsm-amber: #8a5a00;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.skip-link {
    position: absolute; left: -999px; top: 0; z-index: 3000;
    background: #fff; color: var(--irsm-ink); padding: 10px 14px; font-weight: 600;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---------- Exam header ---------- */
.doc-header .meta { font-size: 15px; }
.doc-header .total {
    margin: 4px 0 2px; font-weight: 700; font-size: 16px; color: var(--irsm-red);
}
.doc-header .paper-code { margin: 0 0 14px; font-size: 13px; color: #5b616a; }
.doc-header .paper-code strong { letter-spacing: .08em; color: var(--irsm-ink); }

/* Instructions: tidy spacing instead of <br> spacers */
#instr { text-align: left; max-width: 62em; margin: 0 auto; }
#instr ol { padding-left: 1.6em; }
#instr li { margin-bottom: .6em; line-height: 1.5; }

/* ---------- Sticky exam bar ---------- */
.exam-bar {
    position: sticky; top: 0; z-index: 1000;
    background: var(--irsm-slate); color: #fff;
    border-bottom: 3px solid var(--irsm-green);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.exam-bar-inner {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
    padding-top: 8px; padding-bottom: 8px;
}
.exam-bar .timer { display: flex; align-items: center; gap: 8px; }
.timer-display {
    font-variant-numeric: tabular-nums; font-weight: 700; font-size: 26px; line-height: 1;
    min-width: 5.2ch; padding: 4px 10px; border-radius: 4px; background: rgba(0, 0, 0, .28);
}
.exam-bar.is-warning .timer-display { background: #ffd966; color: #3d2b00; }
.exam-bar.is-urgent .timer-display { background: #ffb4ab; color: #5c0b05; }
.exam-bar.is-over .timer-display { background: var(--irsm-red); color: #fff; }

.eb-btn {
    appearance: none; -webkit-appearance: none; cursor: pointer;
    font: inherit; font-size: 14px; font-weight: 600; line-height: 1;
    padding: 9px 12px; border-radius: 4px;
    color: #fff; background: transparent; border: 1px solid rgba(255, 255, 255, .55);
}
.eb-btn:hover { background: rgba(255, 255, 255, .12); }
.eb-btn:disabled { opacity: .55; cursor: default; }
.eb-btn.eb-primary { background: var(--irsm-green); border-color: var(--irsm-green); color: #10281c; }
.eb-btn.eb-primary:hover { background: #6bd199; }
.exam-bar a:focus-visible, .exam-bar button:focus-visible,
.q-done:focus-visible, .q-body img:focus-visible, .zoom-close:focus-visible {
    outline: 3px solid #ffe08a; outline-offset: 2px;
}

.q-nav {
    display: flex; gap: 6px; flex: 1 1 auto; justify-content: center;
    overflow-x: auto; padding: 2px 0;
}
.q-nav a {
    flex: 0 0 auto; min-width: 34px; height: 34px; line-height: 32px; text-align: center;
    border-radius: 50%; border: 1px solid rgba(255, 255, 255, .55);
    color: #fff; font-weight: 600; font-size: 14px; text-decoration: none;
}
.q-nav a:hover { background: rgba(255, 255, 255, .15); color: #fff; text-decoration: none; }
.q-nav a[aria-current="true"] { background: #fff; color: var(--irsm-ink); border-color: #fff; }
.q-nav a.is-done { background: var(--irsm-green); border-color: var(--irsm-green); color: #10281c; }
.q-nav a.is-done[aria-current="true"] { box-shadow: 0 0 0 3px #fff; }

.exam-actions { display: flex; gap: 8px; margin-left: auto; }

@media (max-width: 767px) {
    .exam-bar-inner { gap: 8px; }
    .timer-display { font-size: 22px; }
    .exam-actions { margin-left: 0; }
    .q-nav { order: 3; flex: 1 0 100%; justify-content: flex-start; }
}

/* ---------- Questions ---------- */
.doc-section { scroll-margin-top: 130px; }
.doc-section .section-title { margin-bottom: 8px; }
.q-body { text-align: left; line-height: 1.55; }
.q-body ol, .q-body ul { padding-left: 1.5em; }
.q-body li { margin: .3em 0; }
.q-body img { max-width: 100%; height: auto; cursor: zoom-in; border: 1px solid #e3e6ea; background: #fff; }
.q-error { color: var(--irsm-red); font-weight: 600; }
.marks { text-align: right; font-weight: 700; margin: 12px 0 0; }

.q-done {
    display: block; margin: 0 0 10px auto; cursor: pointer;
    font: inherit; font-size: 13px; font-weight: 600; padding: 5px 10px; border-radius: 4px;
    color: var(--irsm-green-dark); background: #fff; border: 1px solid var(--irsm-green-dark);
}
.q-done[aria-pressed="true"] { background: var(--irsm-green-dark); color: #fff; }
.q-done[aria-pressed="true"]::before { content: "\2713\00a0"; }

/* ---------- Enlarged figure ---------- */
.zoom-overlay {
    position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center;
    background: rgba(20, 22, 26, .88); padding: 24px; cursor: zoom-out;
}
.zoom-overlay[hidden] { display: none; }
.zoom-overlay img { max-width: 100%; max-height: 100%; background: #fff; }
.zoom-close {
    position: absolute; top: 12px; right: 12px; font: inherit; font-weight: 600;
    padding: 8px 14px; border-radius: 4px; border: 0; cursor: pointer;
}
body.zoom-open { overflow: hidden; }

.noscript-note {
    margin: 16px auto; max-width: 40em; padding: 12px 16px; border: 2px solid var(--irsm-red);
    border-radius: 4px; font-weight: 600; text-align: center; background: #fff;
}

/* ---------- Print / Save as PDF ---------- */
@media print {
    .exam-bar, .q-done, .skip-link, .zoom-overlay, .noscript-note { display: none !important; }
    body { background: #fff !important; }
    .doc-section { break-before: page; page-break-before: always; padding-top: 0; }
    .q-body img { max-width: 100%; break-inside: avoid; border: 0; }
    .q-body li { break-inside: avoid; }
    .marks { break-before: avoid; }
    a[href]::after { content: none !important; }
}

/* ---------- Memo + self-marking ---------- */
.eb-btn[hidden] { display: none; }
.memo, .score-summary { display: none; }
body.memo-on .memo, body.memo-on .score-summary { display: block; }

.memo {
    margin-top: 16px; padding: 12px 16px; background: #f1f9f4;
    border-left: 4px solid var(--irsm-green-dark); border-radius: 0 4px 4px 0;
}
.memo-title { margin: 0 0 6px; font-weight: 700; color: var(--irsm-green-dark); }
.memo-body { text-align: left; line-height: 1.55; }
.memo-body p { margin: 0 0 .6em; }
.memo-body ul { padding-left: 1.4em; margin: 0 0 .6em; }
.memo-missing { color: #5b616a; font-style: italic; }
.memo-id { margin: 8px 0 0; font-size: 12px; color: #5b616a; }
.self-mark { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-weight: 600; }
.self-mark input {
    width: 5.5em; padding: 6px 8px; font: inherit; border: 1px solid #8a9199; border-radius: 4px;
}
.self-mark input:focus-visible { outline: 3px solid var(--irsm-green-dark); outline-offset: 1px; }

.score-summary {
    margin: 0 0 24px; padding: 14px 18px; background: #fff;
    border: 2px solid var(--irsm-green-dark); border-radius: 4px;
}
.score-heading { margin: 0 0 4px; font-weight: 700; font-size: 18px; }
.score-line { margin: 0; font-size: 22px; }
.score-band { margin: 4px 0; font-weight: 600; color: var(--irsm-green-dark); }
.score-note { margin: 4px 0 0; font-size: 13px; color: #5b616a; }

/* ---------- Tables panel ---------- */
.tables-panel {
    --tp-w: min(100vw, 560px);
    position: fixed; right: 0; bottom: 0; z-index: 900; width: var(--tp-w);
    display: flex; flex-direction: column; background: #fff;
    border-left: 3px solid var(--irsm-green); box-shadow: -4px 0 14px rgba(0, 0, 0, .18);
}
.tables-panel[hidden] { display: none; }
.tables-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: #f3f4f6; }
.tables-label { margin: 0; font-weight: 600; }
.tables-head select { flex: 1 1 auto; min-width: 0; padding: 7px 8px; font: inherit; border: 1px solid #8a9199; border-radius: 4px; }
.tables-close {
    font: inherit; font-weight: 600; padding: 7px 12px; border-radius: 4px; cursor: pointer;
    background: #fff; border: 1px solid #8a9199; color: var(--irsm-ink);
}
.tables-close:focus-visible, .tables-head select:focus-visible, .tables-view img:focus-visible {
    outline: 3px solid var(--irsm-green-dark); outline-offset: 2px;
}
.tables-hint { margin: 8px 12px 0; font-size: 12px; color: #5b616a; }
.tables-view { flex: 1 1 auto; overflow: auto; padding: 8px 12px 16px; }
.tables-view img { display: block; width: 100%; height: auto; cursor: zoom-in; border: 1px solid #e3e6ea; }

/* On wide screens, make room so the panel doesn't cover the question */
@media (min-width: 992px) {
    .tables-panel { --tp-w: clamp(380px, 38vw, 560px); }
    body.tables-open .doc-wrapper { margin-right: clamp(380px, 38vw, 560px); }
}

@media print {
    .tables-panel { display: none !important; }
    body.tables-open .doc-wrapper { margin-right: 0; }
    .memo { background: #fff; border: 1px solid #999; break-inside: avoid; }
    .self-mark input { border: 0; border-bottom: 1px solid #333; border-radius: 0; }
}


/* ---------- Mobile layout ---------- */
.eb-more { display: none; }
.exam-bar .eb-btn { opacity: 1; color: #fff; }
.exam-bar .eb-btn.eb-primary { color: #10281c; }
.exam-bar .eb-btn:disabled { opacity: .55; }
.q-nav { scrollbar-width: none; }
.q-nav::-webkit-scrollbar { display: none; }

@media (max-width: 991px) {
    /* The theme leaves wide side margins around the content: remove them on small screens */
    .doc-wrapper .container, .doc-body, .doc-content, .content-inner, .doc-section, .section-block {
        width: auto !important; max-width: 100% !important; float: none !important;
        margin-left: 0 !important; margin-right: 0 !important;
    }
    .doc-body, .doc-content, .content-inner, .doc-section { padding-left: 0 !important; padding-right: 0 !important; }
    .doc-wrapper .container { padding-left: 14px !important; padding-right: 14px !important; }
    .doc-wrapper { padding-top: 16px; }
    #doc-header, .doc-header {
        width: auto !important; max-width: 100% !important; float: none !important;
        margin-left: 0 !important; margin-right: 0 !important;
        padding-left: 0 !important; padding-right: 0 !important;
    }
    #doc-header > * { max-width: 100% !important; margin-left: auto; margin-right: auto; }
    #doc-header .doc-title, #doc-header .meta, #doc-header .total, #doc-header .paper-code {
        padding-left: 0 !important; padding-right: 0 !important; width: auto !important;
    }
    #instr {
        width: auto !important; max-width: 100% !important;
        margin-left: 0 !important; margin-right: 0 !important;
        padding-left: 0 !important; padding-right: 0 !important;
    }
}

@media (max-width: 767px) {
    body { font-size: 16px; }
    .header .logo { font-size: 17px; line-height: 1.25; }
    #doc-header .doc-title { font-size: 28px !important; line-height: 1.2 !important; word-break: normal; overflow-wrap: normal; }
    #doc-header .total { font-size: 15px; }
    #doc-header > strong { display: block; font-size: 15px; margin: 10px 0 8px; }
    #instr ol { padding-left: 1.4em !important; margin-left: 0 !important; }
    .doc-section .section-title { font-size: 21px; line-height: 1.25; margin-top: 0; }
    .doc-section { margin-bottom: 28px; scroll-margin-top: 110px; }
    #instr ol { padding-left: 1.3em; }
    #instr li { font-size: 15px; }
    .q-body { font-size: 16px; }
    .q-body ol, .q-body ul { padding-left: 1.25em; }
    .q-body ol ol, .q-body ul ul, .q-body ol ul { padding-left: 1.4em; }
    .q-done { margin: 0 0 12px; padding: 8px 12px; }

    /* Exam bar: row 1 = timer + menu, row 2 = question circles, menu drops down on demand */
    .exam-bar-inner { padding-left: 12px; padding-right: 12px; padding-top: 6px; padding-bottom: 6px; gap: 6px; }
    .exam-bar .timer { flex: 1 1 auto; gap: 6px; min-width: 0; }
    .timer-display { font-size: 20px; padding: 5px 8px; }
    .exam-bar .eb-btn { font-size: 13px; padding: 9px 10px; min-height: 36px; }
    .eb-more { display: inline-block; }
    .q-nav { order: 3; flex: 1 0 100%; justify-content: flex-start; gap: 5px; padding: 0 0 2px; }
    .q-nav a { min-width: 32px; height: 32px; line-height: 30px; font-size: 13px; }
    .exam-actions { display: none; order: 4; flex: 1 0 100%; margin: 0; }
    .exam-bar.actions-open .exam-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding-bottom: 4px; }
    .exam-actions .eb-btn { width: 100%; }
    .exam-actions .eb-btn[hidden] { display: none; }

    /* Tables become a bottom sheet so the question stays visible above it */
    .tables-panel { top: auto !important; width: 100%; height: 55vh; border-left: 0; border-top: 3px solid var(--irsm-green); box-shadow: 0 -4px 14px rgba(0, 0, 0, .2); }
    body.tables-open { padding-bottom: 55vh; }

    .score-line { font-size: 20px; }
    .memo { padding: 10px 12px; }
    .zoom-overlay { padding: 8px; }
}

@media (max-width: 359px) {
    .exam-bar .timer { flex-wrap: wrap; }
}


.upgrade-notice {
  text-align: center;
  padding: 28px 20px;
  margin: 20px 0;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
}

.upgrade-notice h3 {
  color: #1e293b;
  margin-bottom: 12px;
}

.upgrade-notice p {
  color: #475569;
  line-height: 1.6;
  margin-bottom: 22px;
}

.upgrade-button {
  background: #16a34a;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 15px 26px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease;
}

.upgrade-button:hover {
  background: #15803d;
}