/* ===== webcomm.in combined stylesheet =====
   Part 1: original site CSS (unchanged, from the source index.html)
   Part 2: webcomm.in additions (back-bar, ad slots, side rails, ad-block modal)
   Part 3: webcomm.in right-click / copy protection CSS
   Externalized out of the single HTML file so browsers cache it
   separately instead of re-downloading it on every page load. */


:root {
  --navy: #1b2a4a;
  --navy-dark: #10192e;
  --navy-light: #2c4270;
  --saffron: #e8973a;
  --saffron-dark: #c97a1f;
  --cream: #faf6ef;
  --paper: #ffffff;
  --ink: #22293a;
  --ink-soft: #5b6478;
  --border: #e4dfd3;
  --shadow: 0 4px 18px rgba(27,42,74,0.12);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  background: var(--cream);
  color: var(--ink);
}
header.masthead {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  color: #fff;
  padding: 28px 24px 20px;
}
header.masthead h1 {
  margin: 0 0 6px;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  letter-spacing: 0.2px;
}
header.masthead p.subtitle {
  margin: 0 0 14px;
  color: #cdd6ea;
  font-size: 0.95rem;
}
.grand-total {
  margin-top: 2px;
  font-size: 0.85rem;
  color: var(--saffron);
  font-weight: 600;
}

nav.tab-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  overflow-x: auto;
  background: var(--navy-dark);
  border-bottom: 3px solid var(--saffron);
  padding: 0 8px;
}
.tab-btn {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: #b9c2d8;
  padding: 10px 14px 8px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  border-bottom: 3px solid transparent;
  margin-bottom: -3px;
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 118px;
}
.tab-btn:hover { color: #fff; background: rgba(255,255,255,0.05); }
.tab-btn.active {
  color: #fff;
  border-bottom-color: var(--saffron);
  background: rgba(232,151,58,0.12);
}
.tab-roman { font-size: 0.68rem; letter-spacing: 0.5px; color: var(--saffron); font-weight: 700; text-transform: uppercase; }
.tab-name { font-size: 0.8rem; font-weight: 600; line-height: 1.15; }
.tab-count { font-size: 0.68rem; color: #8a93ab; }
.tab-btn.active .tab-count { color: #d8b98a; }

main { max-width: 980px; margin: 0 auto; padding: 20px 16px 80px; }

.tab-panel { display: none; animation: fadeIn 0.2s ease; }
.tab-panel.active { display: block; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.panel-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 2px solid var(--border);
  padding-bottom: 10px;
  margin-bottom: 14px;
}
.panel-header h2 { margin: 0; font-size: 1.25rem; color: var(--navy); }
.panel-stats {
  background: var(--navy);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}
.empty-note { color: var(--ink-soft); font-style: italic; }

.unit-subnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.subnav-btn {
  background: var(--paper);
  border: 1px solid var(--border);
  color: var(--navy);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.subnav-btn:hover { border-color: var(--saffron); }
.subnav-btn.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.ledger-open-link {
  margin-left: auto;
  font-size: 0.76rem;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px dashed var(--border);
  white-space: nowrap;
}
.ledger-open-link:hover { color: var(--saffron-dark); border-color: var(--saffron); }
.unit-view { display: none; }
.unit-view.active { display: block; }
.ledger-frame {
  width: 100%;
  height: 80vh;
  min-height: 560px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  display: block;
}
@media (max-width: 640px) {
  .unit-subnav { gap: 6px; }
  .ledger-open-link { margin-left: 0; width: 100%; }
  .ledger-frame { height: 70vh; }
}

nav.day-jump-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
  padding: 10px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.day-pill {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 0.75rem;
  font-family: inherit;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s;
}
.day-pill:hover { background: var(--saffron); color: #fff; border-color: var(--saffron); }
.day-pill span { color: var(--ink-soft); margin-left: 4px; }
.day-pill:hover span { color: #fff; }
.day-pill.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  font-weight: 700;
}
.day-pill.active span { color: var(--saffron); }

/* date-wise view: only the selected date's screenshots are shown for a unit */
.qcard { scroll-margin-top: 70px; }
.day-section {
  display: none;
  scroll-margin-top: 64px;
}
.day-section.active {
  display: block;
}
.day-section-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 12px;
  background: var(--navy-light);
  color: #fff;
  border-radius: 8px 8px 0 0;
}
.day-section-header h3 { margin: 0; font-size: 1rem; }
.day-section-stats { font-size: 0.78rem; color: var(--saffron); font-weight: 600; }

.qgrid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 8px 8px;
}
.qcard {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--cream);
}
.qcard figcaption {
  padding: 6px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--navy);
  background: #f0ece0;
  border-bottom: 1px solid var(--border);
}
.qcard figcaption { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.q-num { font-size: 0.9rem; }
.ans-badge {
  font-family: inherit;
  border: 1px solid #2f8f4e;
  background: #e6f0ea;
  color: #1f6a38;
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: default;
  white-space: nowrap;
}
.ans-badge .ans-lbl { font-weight: 600; margin-right: 6px; }
.ans-badge b { font-size: 0.95rem; }
body.hide-answers .ans-badge { cursor: pointer; background: var(--paper); border-color: var(--border); color: var(--ink-soft); }
body.hide-answers .ans-badge:not(.revealed) b { display: none; }
body.hide-answers .ans-badge:not(.revealed) .ans-lbl::after { content: " 4  tap to reveal"; }
body.hide-answers .ans-badge.revealed { background: #e6f0ea; border-color: #2f8f4e; color: #1f6a38; }
.ans-badge.ans-deleted { border-color: #b23c3c; background: #fbe6e6; color: #b23c3c; }
body.hide-answers .ans-badge.ans-deleted.revealed { border-color: #b23c3c; background: #fbe6e6; color: #b23c3c; }
.q-topic {
  padding: 5px 10px;
  font-size: 0.72rem;
  color: var(--ink-soft);
  background: var(--paper);
  border-bottom: 1px solid var(--border);
}
.qcard.flash { outline: 3px solid var(--saffron); outline-offset: 2px; }
.qexplain {
  border-top: 1px solid var(--border);
  background: var(--paper);
}
.qexplain summary {
  cursor: pointer;
  list-style: none;
  padding: 7px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--navy);
  display: flex;
  align-items: baseline;
  gap: 8px;
  user-select: none;
}
.qexplain summary::-webkit-details-marker { display: none; }
.qexplain summary::before { content: "B8"; color: var(--saffron); font-weight: 700; transition: transform .15s; }
.qexplain[open] summary::before { transform: rotate(90deg); }
.qexplain-hint { font-weight: 500; color: var(--ink-soft); font-size: 0.72rem; }
.qexplain-list {
  list-style: none;
  margin: 0;
  padding: 2px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.qexplain-list li {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.78rem;
  line-height: 1.4;
  padding: 6px 8px;
  border-radius: 6px;
}
.qex-correct { background: #e6f0ea; color: #1f6a38; }
.qex-wrong { background: #fbf1ea; color: #6b4a2f; }
.qex-mark { font-weight: 700; flex: 0 0 auto; }
.qex-correct .qex-mark { color: #2f8f4e; }
.qex-wrong .qex-mark { color: #b2683c; }
.qex-opt { font-weight: 700; flex: 0 0 auto; }
.qex-txt { flex: 1 1 auto; }
.qex-deleted-note {
  margin: 2px 10px 8px;
  padding: 7px 9px;
  border-radius: 6px;
  background: #fdf0ea;
  color: #8a4a1f;
  font-size: 0.74rem;
  line-height: 1.4;
  border: 1px dashed #e0a876;
}
.mast-tools { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
#ansToggle {
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--navy-dark);
  background: var(--saffron);
  border: none;
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
}
#ansToggle:hover { background: var(--saffron-dark); color: #fff; }
.mast-note { font-size: 0.76rem; color: #cdd6ea; }
.syl-box {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 16px;
}
.syl-box summary { cursor: pointer; font-weight: 700; color: var(--navy); font-size: 0.88rem; }
.syl-box ol { margin: 10px 0 2px; padding-left: 20px; }
.syl-box li { margin-bottom: 9px; font-size: 0.82rem; line-height: 1.45; }
.syl-point { color: var(--ink); }
.syl-count { margin-left: 8px; font-size: 0.7rem; font-weight: 700; color: var(--saffron-dark); white-space: nowrap; }
.syl-qs { margin-top: 3px; display: flex; flex-wrap: wrap; gap: 5px; }
.syl-qs a {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--navy);
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 9px;
  text-decoration: none;
}
.syl-qs a:hover { background: var(--saffron); border-color: var(--saffron); color: #fff; }
.syl-none { font-size: 0.72rem; color: var(--ink-soft); font-style: italic; }
.qcard img {
  display: block;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  height: auto;
  cursor: zoom-in;
  background-image: linear-gradient(135deg, #ece7d8 25%, #f5f1e6 25%, #f5f1e6 50%, #ece7d8 50%, #ece7d8 75%, #f5f1e6 75%, #f5f1e6 100%);
  background-size: 28px 28px;
}
.qcard img:not([width]) { min-height: 160px; }
.qcard img.loaded {
  min-height: 0;
  background-image: none;
}

#lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(16,25,46,0.92);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
#lightbox.open { display: flex; }
#lightbox-scroll {
  max-width: 96vw;
  max-height: 96vh;
  overflow: auto;
  border-radius: 6px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  -webkit-overflow-scrolling: touch;
}
#lightbox-img {
  display: block;
  max-width: 96vw;
  max-height: 96vh;
  border-radius: 6px;
  cursor: zoom-in;
}
#lightbox-img.zoomed {
  max-width: none;
  max-height: none;
  width: auto;
  height: auto;
  cursor: zoom-out;
}
#lightboxClose {
  position: fixed;
  top: 16px;
  right: 20px;
  z-index: 210;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.32);
  color: #fff;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s;
}
#lightboxClose:hover { background: rgba(255,255,255,0.24); }
#lightboxHint {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  color: #dbe1ef;
  font-size: 0.75rem;
  background: rgba(0,0,0,0.4);
  padding: 5px 12px;
  border-radius: 999px;
  z-index: 210;
  pointer-events: none;
  white-space: nowrap;
}

#backToTop {
  position: fixed;
  bottom: 22px;
  right: 22px;
  background: var(--saffron);
  color: #fff;
  border: none;
  border-radius: 999px;
  width: 50px;
  height: 50px;
  font-size: 1.3rem;
  cursor: pointer;
  box-shadow: var(--shadow);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.15s;
}
#backToTop:hover { background: var(--saffron-dark); transform: translateY(-2px); }
#backToTop.show { display: flex; }

/* mobile collapsible menus (unit tabs + per-unit date list) -- hidden on
   desktop, only shown/used below the 640px breakpoint */
.mobile-menu-toggle {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  text-align: left;
}
.mobile-menu-toggle .chevron { transition: transform 0.15s ease; font-size: 0.7rem; flex: 0 0 auto; }
.mobile-menu-toggle.open .chevron { transform: rotate(180deg); }
#tabBarToggle {
  background: var(--navy-dark);
  color: #fff;
  padding: 12px 16px;
  border-bottom: 3px solid var(--saffron);
  position: sticky;
  top: 0;
  z-index: 55;
}
.day-nav-toggle {
  background: var(--navy);
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 12px;
}

@media (max-width: 640px) {
  main { padding: 14px 10px 70px; }

  /* collapsed by default on mobile load -- menus only expand on tap */
  .mobile-menu-toggle { display: flex; }

  nav.tab-bar {
    display: none;
    flex-direction: column;
    position: sticky;
    top: var(--tabtoggle-h, 45px);
    max-height: 65vh;
    overflow-y: auto;
    z-index: 54;
    box-shadow: var(--shadow);
  }
  nav.tab-bar.mobile-open { display: flex; }
  .tab-btn {
    min-width: 0;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 0;
  }

  nav.day-jump-nav { display: none; }
  nav.day-jump-nav.mobile-open {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    max-height: 55vh;
    overflow-y: auto;
    padding: 0;
  }
  .day-jump-nav.mobile-open .day-pill {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
  }
  .day-jump-nav.mobile-open .day-pill:first-child { border-top: 1px solid var(--border); }
}

/* ---- Final Answer Key tab ---- */
.tab-btn-key { border-left: 1px solid rgba(255,255,255,0.12); margin-left: 4px; padding-left: 18px; }
.key-note { font-size: 0.84rem; color: var(--ink-soft); margin: 0 0 12px; line-height: 1.5; }
.key-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 12px;
  align-items: start;
}
.key-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
}
.key-table th {
  background: var(--navy);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 6px 8px;
  text-align: center;
}
.key-table td { padding: 4px 8px; text-align: center; border-bottom: 1px solid var(--border); }
.key-table tbody tr:nth-child(even) { background: var(--cream); }
.key-table tbody tr:nth-child(5n) td { border-bottom: 2px solid var(--border); }
.key-q a { color: var(--navy); font-weight: 700; text-decoration: none; display: block; }
.key-q a:hover { color: var(--saffron-dark); text-decoration: underline; }
.key-ans {
  display: inline-block;
  min-width: 26px;
  padding: 1px 0;
  border-radius: 6px;
  font-weight: 800;
  color: #1f6a38;
  background: #e6f0ea;
  border: 1px solid #2f8f4e;
}
.key-unit { color: var(--ink-soft); font-size: 0.74rem; }
.key-ans-multi { min-width: 44px; padding: 1px 6px; }
.key-ans-deleted { min-width: 44px; padding: 1px 6px; font-weight: 700; font-size: 0.72rem; color: #b23c3c; background: #fbe6e6; border-color: #b23c3c; }
.key-body {
  padding: 14px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 8px 8px;
}
.syl-paper {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--ink-soft);
  min-width: 82px;
  padding-top: 2px;
}
.key-source img { display: block; width: 100%; max-width: 760px; margin: 0 auto; height: auto; cursor: zoom-in; border: 1px solid var(--border); }

/* ---- Exam-Cycle & Weightage Analysis tab ---- */
.tab-btn-analysis { border-left: 1px solid rgba(255,255,255,0.12); margin-left: 4px; padding-left: 18px; }
.an-h3 {
  margin: 28px 0 10px;
  font-size: 1.02rem;
  color: var(--navy);
  border-bottom: 2px solid var(--border);
  padding-bottom: 6px;
}
.an-h3-note { font-size: 0.78rem; font-weight: 400; color: var(--ink-soft); }

.kpi-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}
.kpi-tile {
  flex: 1 1 140px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  text-align: center;
}
.kpi-num { font-size: 1.4rem; font-weight: 800; color: var(--navy); }
.kpi-lbl { font-size: 0.72rem; color: var(--ink-soft); margin-top: 2px; }

.chart-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  overflow-x: auto;
}
.heatmap-card { padding: 14px 10px; }
.heatmap-card svg text { font-family: inherit; }
.heatmap-card svg g { cursor: default; }

.spark-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}
.spark-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px 6px;
}
.spark-head { display: flex; align-items: baseline; gap: 6px; }
.spark-head b { color: var(--navy); font-size: 0.85rem; }
.spark-head span { font-size: 0.72rem; color: var(--ink-soft); }
.spark-sub { font-size: 0.68rem; color: var(--ink-soft); margin: 2px 0 4px; }

.table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
.stat-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.76rem;
  white-space: nowrap;
}
.stat-table th, .stat-table td {
  padding: 6px 9px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.stat-table thead th {
  background: var(--navy);
  color: #fff;
  position: sticky;
  top: 0;
  font-weight: 700;
  font-size: 0.7rem;
}
.stat-table td.cyc-date { text-align: left; font-weight: 600; color: var(--navy); }
.unit-name-sub { font-weight: 400; color: var(--ink-soft); font-size: 0.7rem; }
.stat-table td.cyc-check { color: #2f8f4e; font-weight: 700; }
.stat-table tbody tr:nth-child(even) { background: var(--cream); }

.trend-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
}
.trend-relatively-stable { background: #e6f0ea; color: #2f8f4e; }
.trend-increasing { background: #fdecd8; color: var(--saffron-dark); }
.trend-decreasing { background: #eae8f5; color: #5b4fa0; }
.trend-fluctuating { background: #fbe6e6; color: #b23c3c; }
.trend-insufficient-data { background: #ececec; color: var(--ink-soft); }

.verify-panel {
  border-radius: 10px;
  border: 1px solid var(--border);
  padding: 14px 16px;
  background: var(--paper);
}
.verify-panel.verify-ok h3 { color: #2f8f4e; }
.verify-panel.verify-fail h3 { color: #b23c3c; }
.verify-panel h3 { margin: 0 0 8px; font-size: 0.95rem; }
.verify-panel .scope-note-h { margin-top: 14px; color: var(--navy) !important; font-size: 0.9rem; }
.verify-panel ul { margin: 0; padding-left: 18px; font-size: 0.8rem; color: var(--ink); line-height: 1.6; }
.scope-note { font-size: 0.8rem; color: var(--ink-soft); line-height: 1.6; margin: 6px 0 0; }

.only-mobile { display: none; }
.swipe-hint { margin: 0 0 6px; font-size: 0.72rem; color: var(--ink-soft); }
.hbar-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.hbar-lbl { flex: 0 0 68px; font-size: 0.74rem; font-weight: 700; color: var(--ink); text-align: right; }
.hbar-track { flex: 1 1 auto; height: 18px; background: var(--cream); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.hbar-fill { display: block; height: 100%; background: var(--saffron); }
.hbar-fill.hbar-muted { background: var(--ink-soft); }
.hbar-val { flex: 0 0 86px; font-size: 0.72rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
/* ---- touch devices & phones ---- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
button, a, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.hint-touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  .hint-mouse { display: none; }
  .hint-touch { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (max-width: 640px) {
  header.masthead { padding: 14px 14px 12px; }
  header.masthead h1 { font-size: 1.08rem; line-height: 1.25; margin-bottom: 4px; }
  header.masthead p.subtitle { display: none; }
  .grand-total { font-size: 0.74rem; }
  .mast-tools { margin-top: 8px; gap: 6px; }
  #ansToggle { padding: 10px 16px; font-size: 0.82rem; }
  .mast-note { font-size: 0.7rem; }

  main { padding: 10px 8px 84px; }
  .panel-header { padding-bottom: 8px; margin-bottom: 10px; }
  .panel-header h2 { font-size: 1.05rem; }
  .tab-btn { min-height: 46px; }
  .tab-name { text-align: left; flex: 1 1 auto; padding: 0 10px; }
  .tab-roman { flex: 0 0 84px; }
  .tab-btn-key, .tab-btn-analysis { margin-left: 0; padding-left: 14px; border-left: none; }
  .tab-count { flex: 0 0 auto; white-space: nowrap; }

  /* two or three papers: an always-visible, sticky paper switch instead of a dropdown */
  .day-nav-toggle.few-days { display: none; }
  nav.day-jump-nav.few-days {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 6px;
    margin-bottom: 10px;
    position: sticky;
    top: var(--tabtoggle-h, 46px);
    z-index: 40;
    box-shadow: 0 3px 10px rgba(27,42,74,0.12);
  }
  nav.day-jump-nav.few-days .day-pill {
    flex: 1 1 0;
    min-height: 42px;
    padding: 6px 6px;
    border-radius: 10px;
    white-space: normal;
    text-align: center;
    font-size: 0.76rem;
    line-height: 1.2;
  }
  nav.day-jump-nav.few-days .day-pill span { display: block; margin-left: 0; font-size: 0.68rem; }
  .day-section, .qcard { scroll-margin-top: calc(var(--tabtoggle-h, 46px) + 64px); }
  .day-section-header { padding: 7px 10px; }
  .day-section-header h3 { font-size: 0.92rem; }

  .qgrid { padding: 8px; gap: 10px; }
  .qcard figcaption { padding: 6px 8px 6px 10px; }
  .ans-badge { padding: 7px 14px; font-size: 0.8rem; }
  .q-topic { padding: 5px 10px; font-size: 0.7rem; line-height: 1.35; }
  .qexplain summary { padding: 9px 10px; font-size: 0.8rem; }
  .qexplain-list li { font-size: 0.8rem; padding: 7px 8px; }

  .syl-box { padding: 4px 12px; margin-bottom: 10px; }
  .syl-box summary { padding: 10px 0; font-size: 0.86rem; }
  .syl-box ol { margin-top: 2px; padding-left: 18px; }
  .syl-qs { gap: 7px; margin-top: 6px; }
  .syl-qs a { padding: 7px 13px; font-size: 0.8rem; }
  .syl-paper { min-width: 100%; padding-top: 0; }

  .key-body { padding: 10px 8px; }
  .key-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .key-table td { padding: 0 4px; }
  .key-q a { padding: 8px 0; }
  .kpi-row { gap: 6px; }
  .kpi-tile { flex: 1 1 30%; padding: 8px 6px; }
  .kpi-num { font-size: 1.15rem; }

  /* charts: keep them readable and let the card scroll sideways instead of shrinking them */
  .chart-card { padding: 10px; -webkit-overflow-scrolling: touch; }
  .only-mobile { display: block; }
  .only-desktop { display: none; }
  .chart-card > svg { min-width: 560px; height: auto; }
  .heatmap-card > svg { min-width: 430px; }
  .an-h3 { margin: 20px 0 8px; font-size: 0.95rem; }

  #lightbox { padding: 6px; }
  #lightbox-scroll, #lightbox-img { max-width: 100vw; }
  #lightboxClose { top: 10px; right: 10px; width: 46px; height: 46px; }
  #backToTop { width: 46px; height: 46px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
}



/* ---- next part ---- */


/* ---- webcomm.in back-bar ---- */
.wc-backbar {
  position: sticky; top: 0; z-index: 70;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--navy-dark); color: #fff;
  padding: 9px 18px;
  font-size: 0.82rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
}
.wc-back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none; font-weight: 700;
  background: var(--saffron); color: var(--navy-dark);
  padding: 6px 13px; border-radius: 999px;
  transition: background .15s ease;
}
.wc-back-btn:hover, .wc-back-btn:focus-visible { background: var(--saffron-dark); }
.wc-back-arrow { font-size: 1rem; line-height: 1; }
.wc-back-tagline { color: #cdd6ea; font-size: 0.76rem; }
@media (max-width: 640px) {
  .wc-backbar { padding: 8px 12px; font-size: 0.78rem; }
  .wc-back-tagline { display: none; }
}
/* ---- ad slots ---- */
.wc-ad-slot { margin: 16px auto; max-width: 970px; text-align: center; min-height: 40px; }
.wc-ad-label {
  font-size: 0.64rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 4px;
}
/* ---- sticky side-rail ads: desktop/laptop only ----
   These sit in the empty margins either side of the centred ~980px
   content column, fixed to the viewport (not the page), so they stay
   in the same on-screen spot while the content scrolls underneath.
   They are hidden by default (base rule below) and only switched on
   from 1280px viewport width upward, once there is measurably enough
   side margin for a rail to fit without ever overlapping the content
   column or the back-to-top button. Below that width -- every phone
   and tablet, and most small laptop windows -- they stay off entirely
   and the full-width responsive Display ad already at the top of the
   page (auto format) is what mobile visitors see; AdSense sizes that
   one itself, nothing manual is forced on mobile.

   Two more things, both deliberate: (1) they stay invisible
   (opacity: 0, no pointer-events) until the visitor scrolls past the
   header, so the homepage's first paint isn't cluttered with ad
   boxes sitting next to the hero banner -- app.js adds
   .wc-rail-visible once that happens, and that's also the moment the
   actual <ins> ad unit is created and requested (a real lazy-load,
   not just a CSS reveal of an ad that already loaded). (2) they are
   anchored a fixed distance below the sticky back-bar + tab-bar
   (--wc-sticky-h, kept in sync by app.js) instead of vertically
   centred on the viewport, so once visible they sit neatly under the
   navigation rather than floating mid-screen. */
.wc-ad-rail {
  display: none;
  position: fixed; z-index: 55; margin: 0;
  overflow: hidden;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.wc-ad-rail.wc-rail-visible { opacity: 1; pointer-events: auto; }
.wc-ad-rail-left { left: 16px; }
.wc-ad-rail-right { right: 16px; }
@media (min-width: 1280px) {
  .wc-ad-rail {
    display: block; width: 120px;
    top: calc(var(--wc-sticky-h, 90px) + 16px);
    max-height: calc(100vh - var(--wc-sticky-h, 90px) - 32px);
  }
}
@media (min-width: 1600px) {
  .wc-ad-rail { width: 160px; }
  .wc-ad-rail-left { left: 28px; }
  .wc-ad-rail-right { right: 28px; }
}
/* ---- ad-block modal notice (dismissible, re-appears on a timer) ----
   A centred modal box (roughly half the screen on desktop) over a
   dimmed backdrop, with an "x" close button in its own top-right
   corner. While it is open the page behind it is frozen (no
   background scrolling) so the visitor's attention goes to the
   message; dismissing it with the x immediately unfreezes the page.
   It always has a working close button -- it is never an inescapable
   lock -- but if an ad blocker still looks active it will reopen
   after AD_BLOCK_REPEAT_MS. Sized with care on small screens: most of
   this site's visitors are on mobile, so the box there is a
   comfortably wide, scrollable card rather than a literal half-width
   sliver that would be unreadable on a phone. */
.wc-adblock-backdrop {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(16, 25, 46, 0.6);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.wc-adblock-note {
  position: relative;
  width: 50vw; min-width: 320px; max-width: 560px;
  max-height: 50vh; overflow-y: auto;
  background: #fff8ec; border: 1px solid #e9c488; color: #6b4a1f;
  padding: 28px 24px 22px; border-radius: 14px;
  font-size: 0.95rem; line-height: 1.55; text-align: center;
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
}
.wc-adblock-note.wc-soft { background: #fdeeea; border-color: #eaa98f; color: #7a3420; }
.wc-adblock-note p { margin: 0 0 16px; }
.wc-adblock-note button.wc-adblock-dismiss-btn {
  border: none; background: var(--saffron); color: var(--navy-dark);
  font-weight: 700; padding: 9px 20px; border-radius: 999px; cursor: pointer; font-size: 0.85rem;
}
.wc-adblock-note button.wc-adblock-dismiss-btn:hover { background: var(--saffron-dark); }
.wc-adblock-close {
  position: absolute; top: 8px; right: 8px;
  width: 36px; height: 36px; min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  margin: -4px -4px 0 0;
  border: none; background: transparent; color: #6b4a1f;
  font-size: 1.4rem; line-height: 1; cursor: pointer; border-radius: 50%;
}
.wc-adblock-close:hover { background: rgba(0,0,0,0.08); }
/* body-freeze helper (applied/removed by the script below) */
body.wc-freeze { overflow: hidden; width: 100%; }
@media (max-width: 640px) {
  .wc-adblock-note {
    width: 92vw; min-width: 0; max-width: 420px; max-height: 80vh;
    padding: 26px 18px 20px; font-size: 0.92rem;
  }
  .wc-adblock-close { top: 4px; right: 4px; }
}
/* ---- lazy-loaded tab panel placeholder / error states ---- */
.wc-panel-loading, .wc-panel-error {
  padding: 60px 20px; text-align: center; color: var(--ink-soft); font-size: 0.95rem;
}
.wc-panel-error button {
  margin-left: 8px; border: none; background: var(--saffron); color: var(--navy-dark);
  font-weight: 700; padding: 6px 14px; border-radius: 999px; cursor: pointer; font-size: 0.82rem;
}
/* ---- "report an issue" banner: one per tab panel (Unit I..X, Answer
   Key, Analysis). Only the active panel is ever displayed at a time
   (showTab() hides the rest), so only ONE of these is ever on screen --
   it never stacks into clutter no matter how many panels carry one. ---- */
.wc-report-issue {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 2px 0 16px;
  padding: 9px 14px;
  background: #fff7ec; border: 1px solid #f0d3a3; border-radius: 10px;
  font-size: 0.82rem; color: var(--ink-soft); line-height: 1.5;
}
.wc-report-issue-ic { flex: 0 0 auto; font-size: 0.95rem; line-height: 1.4; }
.wc-report-issue a {
  color: var(--saffron-dark); font-weight: 700; text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.wc-report-issue a:hover { color: var(--navy); }
.wc-report-issue strong { color: var(--ink); }
@media (max-width: 640px) {
  .wc-report-issue { font-size: 0.78rem; padding: 8px 12px; }
}


/* ---- next part ---- */


  /* Reasonable, non-destructive text-selection restriction: normal
     page content only. Form fields and ad containers are explicitly
     exempted so AdSense and any future search/input box keep working. */
  body {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  input, textarea, select, [contenteditable="true"],
  .adsbygoogle, .wc-ad-slot {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
  }
  img { -webkit-user-drag: none; user-drag: none; }