/* ===========================================================================
   Mission Home — IELTS Academic Reading practice
   One stylesheet for every page. No framework, no external CSS.
   =========================================================================== */

:root {
  /* Intuition Legal palette — canonical values, matched to the firm site and
     the online campus. Do not re-approximate these. */
  --black:      #0d0c0b;
  --ink:        #1a1917;
  --slate:      #4a4740;
  --mist:       #5f5b56;
  --brass:      #8c6d3f;   /* decorative on light; text on dark */
  --brass-deep: #6b5430;   /* small text on light — WCAG AA */
  --brass-mid:  #b08d5b;
  --brass-light:#c9a870;   /* small text on dark — WCAG AA */
  --off-white:  #f5f2ed;
  --parchment:  #ede8df;
  --warm-mid:   #d6cfc3;
  --rule:       rgba(140,109,63,.2);
  --rule-soft:  rgba(140,109,63,.12);
  --paper:      #ffffff;

  /* aliases kept so existing rules keep working */
  --ink-soft:   var(--slate);
  --ink-mute:   var(--mist);

  --green:   #2f6b45;  --green-bg: #e8f2ea;
  --red:     #a33227;  --red-bg:   #f8eae8;
  --amber:   #8a6414;  --amber-bg: #fdf3dd;

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --read:  Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --shadow: 0 1px 3px rgba(13,12,11,.05), 0 8px 24px rgba(13,12,11,.04);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  font-weight: 300;
  background: var(--off-white);
  color: var(--ink-soft);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em;
             line-height: 1.25; color: var(--black); }
h1 { font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 400; }
h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
h3 { font-size: 1.25rem; font-weight: 500; }

a { color: var(--brass-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brass); }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 999; background: var(--ink); color: var(--off-white); padding: .7rem 1.1rem; }

/* ---- shared bits --------------------------------------------------------- */

.label { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
         color: var(--brass-deep); font-weight: 500;
         display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.label::before { content: ''; display: block; width: 1.6rem; height: 1px; background: var(--brass); flex: none; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 1.5rem; }
.hidden { display: none !important; }

.btn { font-family: var(--sans); font-size: .72rem; font-weight: 400;
       letter-spacing: .14em; text-transform: uppercase;
       background: var(--black); color: #fff; border: 1px solid var(--black);
       padding: .6rem 1.2rem; border-radius: 0; cursor: pointer;
       transition: background .18s, color .18s, border-color .18s;
       display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; }
.btn:hover  { background: var(--brass); border-color: var(--brass); color: #fff; }
.btn:disabled { background: var(--rule); border-color: var(--rule); color: var(--ink-mute); cursor: not-allowed; }
.btn-ghost  { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-ghost:hover { background: transparent; color: var(--brass-deep); border-color: var(--brass); }
.btn-brass  { background: var(--brass-deep); border-color: var(--brass-deep); color: #fff; }
.btn-brass:hover { background: var(--brass); border-color: var(--brass); }
.btn-sm { padding: .5rem 1rem; font-size: .8rem; }

.note {
  background: var(--parchment); border-left: 2px solid var(--brass);
  padding: 1rem 1.3rem; font-size: .88rem; line-height: 1.75; color: var(--ink-soft);
}
.note strong { font-weight: 500; color: var(--ink); }
.note-warn { background: var(--amber-bg); border-left-color: var(--amber); }
.note-bad  { background: var(--red-bg);   border-left-color: var(--red); }

.spinner {
  width: 22px; height: 22px; border: 2px solid var(--rule);
  border-top-color: var(--brass); border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- top bar ------------------------------------------------------------- */

.topbar {
  background: var(--black); color: var(--off-white);
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1.6rem; gap: 1rem; position: sticky; top: 0; z-index: 50;
}
.topbar .brand {
  font-family: var(--serif); font-size: 1.2rem; font-weight: 400;
  color: var(--off-white); text-decoration: none; letter-spacing: -0.01em;
}
.topbar .brand span { color: var(--brass-light); font-style: italic; }
.topbar .who { display: flex; align-items: center; gap: .8rem; font-size: .82rem; color: #b9b2a5; }
.topbar .who img { width: 26px; height: 26px; border-radius: 50%; }
.linkout {
  background: none; border: none; color: #b9b2a5; font-family: var(--sans);
  font-size: .82rem; cursor: pointer; padding: 0; text-decoration: underline;
  text-underline-offset: 3px;
}
.linkout:hover { color: var(--brass-light); }

/* ---- sign-in page -------------------------------------------------------- */

.signin-page { display: grid; place-items: center; min-height: 100vh; padding: 2rem 1.5rem; }
.signin-card {
  background: var(--paper); border: 1px solid var(--rule); box-shadow: var(--shadow);
  max-width: 480px; width: 100%; padding: 3rem 2.6rem; text-align: center;
}
.signin-card h1 { margin-bottom: .6rem; }
.signin-card .sub { color: var(--ink-mute); font-size: .95rem; margin-bottom: 2rem; line-height: 1.7; }
.gbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: .8rem;
  width: 100%; padding: .85rem 1.2rem; cursor: pointer;
  background: #fff; border: 1px solid var(--rule); border-radius: 2px;
  font-family: var(--sans); font-size: .95rem; color: var(--ink);
  transition: border-color .18s, box-shadow .18s;
}
.gbtn:hover { border-color: var(--brass); box-shadow: 0 2px 10px rgba(26,25,23,.07); }
.gbtn svg { width: 18px; height: 18px; flex: none; }
.signin-card .fine { font-size: .78rem; color: var(--ink-mute); margin-top: 1.6rem; line-height: 1.7; }

/* ---- dashboard ----------------------------------------------------------- */

.page-head { background: var(--black); padding: 3.4rem 0 2.8rem; }
.page-head h1 { color: var(--off-white); }
.page-head h1 em { font-style: italic; color: var(--brass-light); }
.page-head p { color: #b9b2a5; font-size: .95rem; margin-top: .9rem; max-width: 62ch; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin: 2.2rem 0; }
.stat { background: var(--paper); padding: 1.4rem 1.5rem; }
.stat .n { font-family: var(--serif); font-size: 2.1rem; color: var(--ink); line-height: 1; }
.stat .k { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); margin-top: .55rem; }

/* Lines are drawn by each card's own borders, not by a coloured gap showing
   through. With a coloured gap, a part-filled last row renders as a block of
   background; this way an empty cell is simply empty, whatever the count. */
.test-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
             gap: 0; background: var(--paper);
             border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.test-card { background: var(--paper); padding: 1.1rem 1.4rem; display: flex;
             transition: border-color .15s;
             border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
             align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.test-card .tno { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--brass-deep); }
.test-card h3 { font-size: 1.2rem; font-weight: 400; margin: 0; }
/* `.foot` is also the page-footer class, which carries a 4rem margin, heavy
   padding and a top border. Reset them here or the card inherits all three. */
.test-card:hover { border-color: var(--brass); }
.test-card .foot { display: flex; align-items: center; gap: .7rem;
                   margin: 0; padding: 0; border: none; }
.pill { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; padding: .3rem .6rem; border: 1px solid var(--rule); color: var(--ink-mute); }
.pill-done { background: var(--green-bg); border-color: #bcd8c6; color: var(--green); }
.pill-wait { background: var(--amber-bg); border-color: #e6d5a8; color: var(--amber); }
.band-chip { font-family: var(--serif); font-size: 1.5rem; color: var(--brass-deep); line-height: 1; }

/* ---- test runner --------------------------------------------------------- */

.runner { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

.exambar {
  background: var(--black); color: var(--off-white); display: flex; align-items: center;
  justify-content: space-between; padding: .7rem 1.4rem; gap: 1rem; flex: none;
}
.exambar .tt { font-family: var(--serif); font-size: 1.05rem; }
.timer {
  font-family: var(--sans); font-variant-numeric: tabular-nums; font-size: 1.35rem;
  font-weight: 400; letter-spacing: .04em; padding: .2rem .8rem;
  border: 1px solid rgba(201,169,97,.4); color: var(--brass-light);
}
.timer.warn   { color: #e8b96a; border-color: #e8b96a; }
.timer.danger { color: #ff8a7a; border-color: #ff8a7a; animation: pulse 1.4s ease-in-out infinite; }

/* Ghost buttons sit on the dark exam bar, so they need the inverted palette —
   the default .btn-ghost is dark ink and disappears against it. */
.exambar .btn-ghost { color: #d6cfc2; border-color: rgba(214,207,194,.3); background: transparent; }
.exambar .btn-ghost:hover { color: #fff; border-color: var(--brass-light); background: rgba(201,169,97,.14); }
.exambar .tt { white-space: nowrap; }
#sectionTabs { flex-wrap: wrap; }
@keyframes pulse { 50% { opacity: .55; } }

.panes { display: flex; flex: 1; min-height: 0; }
.pane-passage, .pane-questions { overflow-y: auto; padding: 2rem 2.2rem 5rem; }
.pane-passage   { flex: 1 1 52%; background: var(--paper); border-right: 1px solid var(--rule); }
.pane-questions { flex: 1 1 48%; background: var(--off-white); }

.passage-head { padding-bottom: 1.2rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--rule); }
.passage-head h2 { font-size: 1.6rem; margin-bottom: .4rem; }
.passage-head .meta { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brass-deep); }
.passage-body { font-family: var(--read); font-size: 1.02rem; line-height: 1.85; color: var(--ink-soft); max-width: 68ch; }
.passage-body p { margin-bottom: 1.15rem; }
.passage-body .para-tag {
  font-family: var(--sans); font-weight: 500; font-size: .78rem; color: var(--brass-deep);
  display: inline-block; min-width: 1.6rem;
}
.passage-body em { font-style: italic; }
.passage-body .hl { background: #fdf0c4; padding: 0 .1em; border-radius: 2px; }

.qgroup { margin-bottom: 2.4rem; }
.qgroup-head { border-left: 2px solid var(--brass); padding: .1rem 0 .1rem 1rem; margin-bottom: 1.2rem; }
.qgroup-head .range { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--brass-deep); margin-bottom: .35rem; }
.qgroup-head .instr { font-size: .9rem; line-height: 1.7; color: var(--ink-soft); }
.qgroup-head .instr strong { font-weight: 500; color: var(--ink); }

.optbank {
  background: var(--paper); border: 1px solid var(--rule); padding: 1rem 1.2rem;
  margin-bottom: 1.2rem; font-size: .9rem;
}
.optbank .bank-title { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: .7rem; }
.optbank ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap: .35rem .9rem; }
.optbank li { line-height: 1.55; }
.optbank b { color: var(--brass-deep); font-weight: 500; margin-right: .4rem; }

.q { background: var(--paper); border: 1px solid var(--rule); padding: 1.1rem 1.2rem; margin-bottom: .7rem; }
.q.answered { border-left: 2px solid var(--brass); }
.q .qn {
  font-weight: 500; color: var(--ink); margin-right: .5rem;
  font-variant-numeric: tabular-nums;
}
.q .qtext { font-size: .95rem; line-height: 1.7; color: var(--ink-soft); margin-bottom: .8rem; }
.q .qtext .gap {
  display: inline-block; min-width: 7rem; border-bottom: 1px solid var(--brass);
  margin: 0 .2rem;
}

.opts { display: flex; flex-direction: column; gap: .35rem; }
.opt {
  display: flex; align-items: flex-start; gap: .65rem; padding: .5rem .6rem;
  border: 1px solid transparent; cursor: pointer; font-size: .92rem; line-height: 1.6;
  transition: background .14s, border-color .14s;
}
.opt:hover { background: var(--parchment); }
.opt input { margin-top: .35rem; accent-color: var(--brass-deep); flex: none; }
.opt.sel { background: var(--parchment); border-color: var(--brass); }
.opt .k { font-weight: 500; color: var(--brass-deep); flex: none; }

.opts-inline { display: flex; flex-direction: row; flex-wrap: wrap; gap: .4rem; }
.opts-inline .opt { border: 1px solid var(--rule); padding: .45rem .9rem; }

input[type="text"].gapinput, select.gapselect {
  font-family: var(--sans); font-size: .92rem; color: var(--ink);
  padding: .5rem .7rem; border: 1px solid var(--rule); background: var(--paper);
  border-radius: 2px; min-width: 11rem; max-width: 100%;
}
input[type="text"].gapinput:focus, select.gapselect:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 2px rgba(140,109,63,.12); }
.gapinput.filled { border-color: var(--brass); background: #fffdf7; }

.tablefill { width: 100%; border-collapse: collapse; font-size: .9rem; margin-bottom: .8rem; }
.tablefill th, .tablefill td { border: 1px solid var(--rule); padding: .6rem .7rem; text-align: left; vertical-align: top; line-height: 1.6; }
.tablefill th { background: var(--parchment); font-weight: 500; color: var(--ink); }

/* ---- navigator ----------------------------------------------------------- */

.navbar-bottom {
  flex: none; background: var(--paper); border-top: 1px solid var(--rule);
  padding: .55rem 1.4rem; display: flex; align-items: center; gap: 1rem; overflow-x: auto;
}
.navsec { display: flex; align-items: center; gap: .45rem; flex: none; }
.navsec .sec-label { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); margin-right: .2rem; }
.navdot {
  width: 30px; height: 30px; border: 1px solid var(--rule); background: var(--paper);
  font-family: var(--sans); font-size: .78rem; color: var(--ink-mute); cursor: pointer;
  display: grid; place-items: center; flex: none; transition: all .14s;
  font-variant-numeric: tabular-nums;
}
.navdot:hover { border-color: var(--brass); }
.navdot.done { background: var(--brass-deep); border-color: var(--brass-deep); color: #fff; }
.navdot.here { box-shadow: 0 0 0 2px var(--brass-light); }
.navdot.flag { border-color: var(--amber); border-width: 2px; }

/* ---- results ------------------------------------------------------------- */

.result-hero { background: var(--black); color: var(--off-white); padding: 3rem 0; text-align: center; }
.result-hero .bigband { font-family: var(--serif); font-size: clamp(4rem, 12vw, 7rem); line-height: 1; color: var(--brass-light); font-weight: 300; }
.result-hero .bandlabel { font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: #b9b2a5; margin-bottom: .6rem; }
.result-hero .raw { font-size: 1rem; color: #d6cfc2; margin-top: .8rem; }

.sec-scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin: 2rem 0; }
.sec-score { background: var(--paper); padding: 1.3rem 1.4rem; }
.sec-score .t { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); }
.sec-score .v { font-family: var(--serif); font-size: 1.9rem; color: var(--ink); margin-top: .4rem; }
.sec-score .bar { height: 3px; background: var(--rule-soft); margin-top: .7rem; }
.sec-score .bar i { display: block; height: 100%; background: var(--brass); }

.review-q { background: var(--paper); border: 1px solid var(--rule); border-left-width: 3px; padding: 1rem 1.2rem; margin-bottom: .6rem; }
.review-q.ok  { border-left-color: var(--green); }
.review-q.bad { border-left-color: var(--red); }
.review-q .rq-head { display: flex; align-items: baseline; gap: .7rem; margin-bottom: .5rem; }
.review-q .rq-n { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.review-q .verdict { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; padding: .15rem .5rem; }
.review-q.ok  .verdict { background: var(--green-bg); color: var(--green); }
.review-q.bad .verdict { background: var(--red-bg);   color: var(--red); }
.review-q .qtext { font-size: .92rem; line-height: 1.7; margin-bottom: .6rem; }
.answers { display: grid; gap: .3rem; font-size: .88rem; }
.answers div { display: flex; gap: .6rem; }
.answers .k { color: var(--ink-mute); min-width: 6.5rem; flex: none; }
.answers .yours.bad { color: var(--red); }
.answers .right { color: var(--green); font-weight: 400; }
.why { margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--rule-soft); font-size: .86rem; line-height: 1.7; color: var(--ink-mute); }
.why b { color: var(--ink-soft); font-weight: 500; }
.why .quote { font-family: var(--read); font-style: italic; color: var(--ink-soft); }

/* ---- modal --------------------------------------------------------------- */

.modal-bg { position: fixed; inset: 0; background: rgba(26,25,23,.55); display: grid; place-items: center; z-index: 200; padding: 1.5rem; }
.modal { background: var(--paper); border: 1px solid var(--rule); max-width: 460px; width: 100%; padding: 2rem 2rem 1.6rem; box-shadow: var(--shadow); }
.modal h3 { margin-bottom: .8rem; }
.modal p  { font-size: .92rem; line-height: 1.75; margin-bottom: 1.4rem; color: var(--ink-soft); }
.modal .row { display: flex; gap: .7rem; justify-content: flex-end; }

/* ---- footer -------------------------------------------------------------- */

.foot { border-top: 1px solid var(--rule); margin-top: 4rem; padding: 2rem 0 3rem; font-size: .8rem; color: var(--ink-mute); line-height: 1.8; }

/* ---- responsive ---------------------------------------------------------- */

@media (max-width: 880px) {
  .panes { flex-direction: column; }
  .pane-passage { flex: none; max-height: 44vh; border-right: none; border-bottom: 1px solid var(--rule); }
  .pane-questions { flex: 1; }
  .pane-passage, .pane-questions { padding: 1.4rem 1.2rem 3rem; }
  .exambar { padding: .6rem .9rem; }
  .exambar .tt { font-size: .9rem; }
  .timer { font-size: 1.1rem; }
  .signin-card { padding: 2.2rem 1.6rem; }
}

@media print {
  .topbar, .navbar-bottom, .exambar, .btn { font-family: var(--sans); font-size: .72rem; font-weight: 400;
       letter-spacing: .14em; text-transform: uppercase;
       background: var(--black); color: #fff; border: 1px solid var(--black);
       padding: .6rem 1.2rem; border-radius: 0; cursor: pointer;
       transition: background .18s, color .18s, border-color .18s;
       display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; }
  body { background: #fff; }
}


/* Real passages carry a standfirst, a glossary at the foot and a source line.
   All three are part of what a candidate sees on the day. */
.passage-body .standfirst {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.08rem; font-style: italic; color: var(--slate);
  margin-bottom: 1.4rem; padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--rule-light);
}
.passage-body .glossary {
  margin-top: 2rem; padding: .9rem 1.1rem;
  background: var(--parchment); border-left: 2px solid var(--brass);
  font-size: .88rem; line-height: 1.65;
}
.passage-body .glossary-head {
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brass-deep); margin-bottom: .45rem;
}
.passage-body .attribution {
  margin-top: 1.6rem; font-size: .78rem; color: var(--mist); font-style: italic;
}