/* ==========================================================================
   MyLearnVille TOEIC Quiz Styling — consolidated stylesheet
   --------------------------------------------------------------------------
   Sections (in order):
     1. Passage styles            — `.toeic-passage` base + 14 doctype
                                    variants (email, chat, article,
                                    advertisement, notice, letter, memo,
                                    form, invoice, webpage, schedule,
                                    review, contract, document).
     2. Tables and charts         — `.toeic-table`, `.toeic-chart--bar`,
                                    `.toeic-chart--pie`.
     3. Part 3 / 4 graphics       — `.toeic-audio-graphic` (caps the width
                                    of listening visuals).
     4. Floor plan / map          — `.toeic-floorplan` + `.fp-*`.
     5. Side-by-side passage      — sticky left panel for the quiz page.
        layout
     6. Result-page review        — per-set two-column review blocks.

   The passage markup is produced by the toeic-part7-question-generator
   skill's convert_to_ayspro.py, which wraps every passage in:
       <div class="toeic-passage toeic-<doctype>"> ... </div>
   The Part 3/4 skills wrap each listening visual in `.toeic-audio-graphic`.

   Tweak the colours in :root to match your site's palette.
   ========================================================================== */

:root {
  --toeic-ink:        #1f2933;
  --toeic-muted:      #6b7280;
  --toeic-accent:     #1f4e79;
  --toeic-line:       #d4d8dd;
  --toeic-tint:       #f4f6f8;
  --toeic-radius:     6px;
}

/* --- base ----------------------------------------------------------------- */
.toeic-passage {
  max-width: 640px;
  margin: 40px auto;
  padding: 18px 20px;
  border: 1px solid var(--toeic-line);
  border-radius: var(--toeic-radius);
  background: #ffffff;
  color: var(--toeic-ink);
  font-size: 15px;
  line-height: 1.6;
  box-sizing: border-box;
}
.toeic-passage p   { margin: 0 0 0.7em; }
.toeic-passage p:last-child { margin-bottom: 0; }
.toeic-passage ul  { margin: 0.4em 0 0.8em; padding-left: 1.4em; }
.toeic-passage li  { margin: 0.15em 0; }
.toeic-passage strong { font-weight: 700; }

/* --- email ---------------------------------------------------------------- */
.toeic-email { font-family: Arial, Helvetica, sans-serif; }
.toeic-email p:first-child {
  background: var(--toeic-tint);
  border-left: 3px solid var(--toeic-accent);
  padding: 8px 12px;
  margin: -4px -4px 1em;
  font-size: 14px;
  color: var(--toeic-muted);
}

/* --- text message / online chat ------------------------------------------ */
.toeic-chat { background: var(--toeic-tint); }
.toeic-chat hr { display: none; }
.toeic-chat p {
  background: #ffffff;
  border: 1px solid var(--toeic-line);
  border-radius: 12px;
  padding: 8px 12px !important;
  margin: 0 0 8px !important;
}
.toeic-chat p b { color: var(--toeic-accent); }

/* --- article / press release --------------------------------------------- */
.toeic-article {
  font-family: Georgia, "Times New Roman", serif;
  border-top: 3px solid var(--toeic-accent);
}
.toeic-article p:first-child {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  border-bottom: 1px solid var(--toeic-line);
  padding-bottom: 0.4em;
}

/* --- advertisement / flyer ----------------------------------------------- */
.toeic-advertisement {
  text-align: center;
  border: 2px dashed var(--toeic-accent);
  background: #fffdf6;
}
/* text-align is inherited — but the quiz theme sets it on <p> directly, and a
   rule that targets an element always beats a value the element would only
   inherit. (That is also why !important on the container does not help: the
   child keeps its own directly-matched value.) Centre the children directly. */
.toeic-advertisement p,
.toeic-advertisement li {
  text-align: center !important;
}
/* Centre the bullet list as a unit: list-style-position: inside moves the
   marker into the line box so it travels with the centred text; removing the
   left padding drops the indent. (Swap in list-style: none for no bullets.) */
.toeic-advertisement ul {
  list-style-position: inside;
  padding-left: 0 !important;
  margin-left: 0;
}

/* --- notice / announcement ----------------------------------------------- */
.toeic-notice {
  background: var(--toeic-tint);
  border-left: 5px solid var(--toeic-accent);
}

/* --- letter --------------------------------------------------------------- */
.toeic-letter {
  font-family: Georgia, "Times New Roman", serif;
  padding: 26px 30px;
}

/* --- memo ----------------------------------------------------------------- */
.toeic-memo { font-family: Arial, Helvetica, sans-serif; }
.toeic-memo p:first-child {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  border-bottom: 2px solid var(--toeic-ink);
  padding-bottom: 0.3em;
}

/* --- form / survey -------------------------------------------------------- */
.toeic-form {
  font-family: "Courier New", Courier, monospace;
  font-size: 14px;
  border-top: 4px solid var(--toeic-accent);
}
.toeic-form p { white-space: pre-wrap; }
.toeic-form p:first-child {
  white-space: normal;
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 0 0 0.9em;
  padding-bottom: 0.5em;
  border-bottom: 1px solid var(--toeic-line);
}

/* --- invoice / receipt / price list -------------------------------------- */
.toeic-invoice {
  font-family: "Courier New", Courier, monospace;
  font-size: 14px;
}

/* --- webpage -------------------------------------------------------------- */
.toeic-webpage { padding-top: 34px; position: relative; }
.toeic-webpage::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 22px;
  background: var(--toeic-tint);
  border-bottom: 1px solid var(--toeic-line);
  border-radius: var(--toeic-radius) var(--toeic-radius) 0 0;
}

/* --- schedule / itinerary / agenda --------------------------------------- */
.toeic-schedule { font-family: Arial, Helvetica, sans-serif; }

/* --- review --------------------------------------------------------------- */
.toeic-review { background: #fffdf6; }
.toeic-review p:first-child { color: #e6a700; font-size: 18px; }

/* --- contract / agreement ------------------------------------------------ */
.toeic-contract {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
}

/* --- document: generic fallback (keeps the base .toeic-passage look) ------ */
.toeic-document { /* intentionally minimal — styled only by .toeic-passage */ }

/* --- tables --------------------------------------------------------------- */
.toeic-table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.6em 0 0.9em;
  font-size: 14px;
}
.toeic-table th,
.toeic-table td {
  border: 1px solid var(--toeic-line);
  padding: 6px 10px;
  text-align: left;
}
.toeic-table thead th {
  background: var(--toeic-accent);
  color: #ffffff !important;
  font-weight: 700;
}
.toeic-table tbody tr:nth-child(even) { background: var(--toeic-tint); }

/* --- charts: shared ------------------------------------------------------- */
.toeic-chart { margin: 0.7em 0 1em; }
.chart-caption {
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  color: var(--toeic-accent);
  margin: 0 0 0.7em;
}

/* --- bar chart ------------------------------------------------------------ */
.toeic-chart--bar .bar-row {
  display: flex;
  align-items: center;
  margin: 5px 0;
}
.toeic-chart--bar .bar-label {
  flex: 0 0 38%;
  padding-right: 10px;
  text-align: right;
  font-size: 13px;
}
.toeic-chart--bar .bar-track {
  flex: 1;
  background: var(--toeic-tint);
  border-radius: 3px;
}
.toeic-chart--bar .bar-fill {
  display: block;
  background: var(--toeic-accent);
  color: #ffffff !important;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 3px;
  text-align: right;
  white-space: nowrap;
  min-width: 1.5em;
}

/* --- pie chart ------------------------------------------------------------ */
.toeic-chart--pie .pie-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
}
.toeic-chart--pie .pie {
  width: 168px;
  height: 168px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.toeic-chart--pie .pie-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
}
.toeic-chart--pie .pie-legend li {
  margin: 4px 0;
  display: flex;
  align-items: center;
}
.toeic-chart--pie .swatch {
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 2px;
  margin-right: 8px;
  flex: 0 0 auto;
}

/* --- Part 3 / Part 4 listening graphics ----------------------------------
   Part 3 and Part 4 are audio-based: there is no reading passage beside the
   question, so a full-width table or chart looks over-stretched. Those skills'
   converters wrap every "Look at the graphic" visual in .toeic-audio-graphic
   to cap its width and centre it. Part 7 does NOT emit this wrapper, so its
   passages and tables keep the full content width. */
.toeic-audio-graphic {
  max-width: 540px;
  margin: 0.8em auto;
}
.toeic-audio-graphic .toeic-passage {
  margin-top: 0;
  margin-bottom: 0;
}
 
/* --- floor plan / map ----------------------------------------------------
   A spatial grid of rooms / locations, drawn as labelled cells with walls.
   Cells are rooms (.fp-room) or fixtures (.fp-feature — lifts, a window, a car
   park, an information desk). Both are styled identically, on purpose: the
   fixture must NOT be visually emphasised, or it would point at the answer.
   A blank cell gets .fp-empty so the plan can be a non-rectangular shape. The
   2px cell borders are pulled together by a -1px margin so shared walls stay
   single width. The converter sets the column count (grid-template-columns). */
.toeic-floorplan { margin: 0.4em 0 0.6em; }
.toeic-floorplan .fp-grid { display: grid; gap: 0; }
.toeic-floorplan .fp-grid > div { margin: -1px; }
.toeic-floorplan .fp-room,
.toeic-floorplan .fp-feature {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 74px;
  padding: 10px 8px;
  border: 2px solid var(--toeic-ink);
  background: var(--toeic-tint);
  color: var(--toeic-ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}
.toeic-floorplan .fp-empty { background: transparent; }

/* --- Part 1 (Photographs) ------------------------------------------------
   Real TOEIC test booklets print Part 1 photographs in black and white, so
   the simulator forces every photograph to grayscale. The selector covers
   three flavours of markup:
     .ays-quiz-container .toeic-photograph — the modern Vol 2 photo class
     #ays-results-body  .toeic-photograph  — the same class on the result page
     .ays-quiz-container.toeic img         — the legacy "whole quiz is
                                              .toeic" convention (Vol 1) */
#ays-results-body .toeic-photograph,
.ays-quiz-container .toeic-photograph,
.ays-quiz-container.toeic img { filter: grayscale(100%); }

/* The result-page Part 1 treatment: stacked layout (no side-by-side) with
   the English + Thai answer-choice text inlined into each A/B/C/D label.
   See enhancePart1() in toeic-quiz.js. */
.toeic-part1-stem {
  margin: 14px 0 8px;
  font-weight: 700;
  line-height: 1.4;
}
.toeic-part1-th {
  display: inline-block;
  margin-top: 2px;
  color: var(--toeic-muted);
  font-size: 14px;
  line-height: 1.5;
}
/* Keep the A/B/C/D letter from sitting on the same baseline as long
   inlined sentences — let the label wrap freely. */
.ays-field label.ays_position_initial { white-space: normal; }


/* ==========================================================================
   TOEIC Part 7 — side-by-side passage layout
   --------------------------------------------------------------------------
   Pairs with references/toeic-sidebyside.js. That script reflows each passage
   set into a two-column page — the passage in a sticky panel on the LEFT, the
   questions scrolling on the RIGHT — by adding the class `toeic-sbs` to the
   AysPro quiz form and injecting a `.toeic-passage-panel` element.

   The panel is pinned with native CSS `position: sticky`. Some themes wrap the
   page in a container with `overflow: hidden`, which silently disables sticky;
   the paired script neutralises that at run time, so the pinning stays smooth.

   Every rule below is scoped to `.toeic-sbs`, so if the script is NOT installed
   the quiz keeps its normal stacked layout and none of this has any effect.

   To change the screen width at which the two columns appear, edit the
   `@media (min-width: ...)` value below — and set SBS_MIN in
   toeic-sidebyside.js to the SAME number. To change the column split, edit
   `grid-template-columns` ( 1fr 1fr is 50/50 — for a wider passage use e.g.
   1.15fr 0.85fr ).
   ========================================================================== */

:root {
  --toeic-col-gap: 30px;    /* gap between the passage and the questions */
  --toeic-panel-bg: #e9ecf0;  /* tint of the passage pane — see "panel surface" */
}

/* the injected panel stays hidden until the wide-screen layout switches on */
.toeic-passage-panel { display: none; }

/* widen the quiz so two columns have room (capped — never exceeds the theme) */
.ays-quiz-container.toeic-sbs-host { max-width: 1180px; }

@media (min-width: 1150px) {
  /* --- the two-column grid: 50 / 50 -------------------------------------- */
  .ays-quiz-form.toeic-sbs {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--toeic-col-gap);
    align-items: start;
  }
  /* the timer, every question step, the results screen … all go RIGHT */
  .ays-quiz-form.toeic-sbs > * { grid-column: 2; min-width: 0; }
  /* … the passage panel fills the LEFT column and spans every row, so native
     `position: sticky` keeps it pinned for the whole page */
  .ays-quiz-form.toeic-sbs > .toeic-passage-panel {
    display: block;
    grid-column: 1;
    grid-row: 1 / span 99;
    align-self: start;
    position: sticky;
    top: var(--toeic-stick-top, 16px);   /* script raises this past any fixed bar */
    max-height: calc(100vh - var(--toeic-stick-top, 16px) - 16px);
    overflow-y: auto;
    /* no `overscroll-behavior: contain` — at the panel's top/bottom edge the
       scroll chains on to the page, so scrolling stays continuous */
  }
  /* the passage + directions line inside the question are hidden — the panel
     shows them instead, so there is no duplicate */
  .ays-quiz-form.toeic-sbs .ays_quiz_question > .toeic-passage,
  .ays-quiz-form.toeic-sbs .ays_quiz_question > .toeic-directions-src {
    display: none;
  }
}

/* --- passage panel chrome ------------------------------------------------- */
/* The AysPro container sets `text-align: center`, which the panel would
   otherwise inherit. Passages are prose, so force left alignment here. Passage
   types that SHOULD be centred (advertisement, form/memo headings, chart
   captions, table headers…) set their own alignment and still win. */
.toeic-passage-panel {
  box-sizing: border-box;
  text-align: left;
  /* --- panel surface (Option B) -----------------------------------------
     The passage sits on a soft tinted "tray", so it reads as a distinct
     region clearly separated from the white question column. Adjust the
     tint with --toeic-panel-bg above. */
  background: var(--toeic-panel-bg);
  border-radius: 10px;
  padding: 16px;
}

/* The AysPro quiz forces every question's body text to 16px (overriding the
   passage stylesheet). Mirror that here so the passage body and the directions
   in the panel read at exactly the same size as the stacked / regular version.
   `!important` matches how the quiz itself sets it. */
.toeic-passage-panel p { font-size: 16px !important; }

.toeic-passage-panel .toeic-directions {
  margin: 0 0 14px;
  line-height: 1.45;
  color: var(--toeic-ink);
}
.toeic-passage-panel .toeic-directions strong { color: var(--toeic-accent); }

/* the passage sits flush inside the panel — drop the page-centring margin */
.toeic-passage-panel .toeic-passage {
  margin: 0 0 16px;
  max-width: none;
}
.toeic-passage-panel .toeic-passage:last-child { margin-bottom: 0; }

/* An always-visible scrollbar (Chrome / Safari / Edge) so it is obvious the
   panel scrolls. NOTE: the standard `scrollbar-width` / `scrollbar-color` are
   deliberately NOT set on the panel — setting either makes Chrome ignore these
   `::-webkit-scrollbar` rules and fall back to an auto-hiding overlay bar. */
.toeic-passage-panel::-webkit-scrollbar { width: 12px; }
.toeic-passage-panel::-webkit-scrollbar-track { background: transparent; }
.toeic-passage-panel::-webkit-scrollbar-thumb {
  background: #a4aab5;
  border-radius: 6px;
  border: 3px solid var(--toeic-panel-bg);
}
.toeic-passage-panel::-webkit-scrollbar-thumb:hover { background: #878d99; }

/* ==========================================================================
   TOEIC Part 7 — result-page review, two-column layout
   --------------------------------------------------------------------------
   Pairs with toeic-sidebyside.js. After a quiz is finished, AysPro builds a
   review — `.ays_quiz_results` holding one `.ays_question_result` per question.
   The script regroups each passage set into a `.toeic-review-set` block: the
   English and Thai passages on the LEFT, that set's questions (with grading,
   translation and explanation) on the RIGHT.

   Like the quiz layout, this is inert unless the script restructures the
   review, so the stylesheet alone changes nothing.
   ========================================================================== */

/* the directions line ("Questions 147-148 refer to…") atop the left panel */
.toeic-review-directions { margin: 0; color: var(--toeic-muted); }

/* a clear horizontal divider between consecutive passage sets */
.toeic-review-set + .toeic-review-set {
  border-top: 1px solid var(--toeic-line);
  margin-top: 40px;
  padding-top: 40px;
}

/* --- shared: answer reasoning box ---------------------------------------
   `.toeic-explanation` is a generic, part-agnostic class. The paired script
   wraps the Thai reasoning paragraph(s) of every question — Part 5, 6 and 7
   alike — in this box, so the explanation looks the same across all parts. */
.toeic-explanation {
  margin: 12px 0 0;
  padding: 12px 15px;
  background: var(--toeic-tint);
  border-left: 3px solid var(--toeic-accent);
  border-radius: var(--toeic-radius);
}
.toeic-explanation p { margin: 0; }
.toeic-explanation p + p { margin-top: 0.6em; }

/* the Thai block sits below the English question + graded answers */
.toeic-review-questions .ays_questtion_explanation {
  margin-top: 14px;
  border-top: 0.5px solid var(--toeic-line);
}

/* space between the questions in the right column, with a thin grey divider
   between consecutive items so each graded question reads as its own card.
   The `:first-child` rule suppresses the divider on the topmost item so the
   line doesn't appear at the very top of the column. `!important` matches
   how the surrounding quiz theme paints these borders. */
.toeic-review-questions > .ays_question_result:first-child {
    border-top: none !important;
}
.toeic-review-questions > .ays_question_result {
    margin-bottom: 35px;
    border-top: 1px solid #dddddd !important;
    border-radius: 0 !important;
}
.toeic-review-questions > .ays_question_result:last-child { margin-bottom: 0; }

/* hide the whole review — our blocks included — when the AysPro show/hide
   toggle is switched off */
.ays_quiz_results:has(.ays-quiz-res-toggle-checkbox:not(:checked)) .toeic-review-set {
  display: none;
}

@media (min-width: 1150px) {
  /* each passage set: passages left, questions right */
  .toeic-review-set {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--toeic-col-gap);
    align-items: start;
  }
  /* the passage panel — a sticky tinted tray, same look as the quiz */
  .toeic-review-set > .toeic-review-passages {
    grid-column: 1;
    align-self: start;
    position: sticky;
    top: var(--toeic-stick-top, 16px);
    max-height: calc(100vh - var(--toeic-stick-top, 16px) - 16px);
    overflow-y: auto;
    box-sizing: border-box;
    background: var(--toeic-panel-bg);
    border-radius: 10px;
    padding: 16px;
  }
  .toeic-review-set > .toeic-review-questions { grid-column: 2; min-width: 0; }
}

/* the panel's own text reads left (the AysPro container forces centre);
   passage types that should be centred set their own alignment and still win */
.toeic-review-passages { text-align: left; }

/* passage cards sit flush in the tray; the first item has no top gap */
.toeic-review-passages .toeic-passage { margin: 0 0 14px; max-width: none; }
.toeic-review-passages .toeic-passage:last-child { margin-bottom: 0; }
.toeic-review-passages > :first-child { margin-top: 0; }
.toeic-review-passages p { font-size: 16px !important; }

/* the review passage scrollbar — matches the quiz panel */
.toeic-review-passages::-webkit-scrollbar { width: 12px; }
.toeic-review-passages::-webkit-scrollbar-track { background: transparent; }
.toeic-review-passages::-webkit-scrollbar-thumb {
  background: #a4aab5;
  border-radius: 6px;
  border: 3px solid var(--toeic-panel-bg);
}
.toeic-review-passages::-webkit-scrollbar-thumb:hover { background: #878d99; }