/* Question-paper SUBJECT page (the leaf that holds papers, e.g.
   /question-papers/BLS-LLB-5-Years/Sem-1/Economics/).

   This is where Google lands a student, so the page answers three things
   fast: am I in the right place, which paper do I open, and where do I go
   next. Everything is scoped under .qp-subj so the other pages sharing
   includes/resource-hub-shell.php are untouched. */

.qp-subj {
  --qp-navy: #0b1d4e;
  --qp-ink: #0d1526;
  --qp-body: #2c3e5c;
  --qp-muted: #5a718c;
  --qp-faint: #9aafc5;
  --qp-blue: #1d50ca;
  --qp-blue-dark: #1740a0;
  --qp-line: #dce6f5;
  --qp-line-soft: #e5edf8;
  --qp-line-softer: #e8effa;
  --qp-strip: #f1f5fc;
  --qp-strip-line: #e0e9f7;
  --qp-chip-bg: #e8f0fe;
  --qp-chip-line: #c7d9fc;
  --qp-soft: #f9fbfe;
  --qp-page: #f8f9fc;
  --qp-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --qp-serif: Lora, Georgia, 'Times New Roman', serif;

  font-family: var(--qp-sans);
  color: var(--qp-ink);
  background: var(--qp-page);
  -webkit-font-smoothing: antialiased;
}

.qp-subj *,
.qp-subj *::before,
.qp-subj *::after { box-sizing: border-box; }

.qp-subj a { color: var(--qp-blue); text-decoration: none; }
.qp-subj a:hover { color: var(--qp-blue-dark); }

.qp-subj-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 18px 32px 44px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* ---- "you are here" strip -------------------------------------------- */

.qp-where {
  background: #fff;
  border: 1px solid var(--qp-line);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(13, 21, 38, .05);
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.1fr;
  overflow: hidden;
}

.qp-where-cell {
  padding: 13px 18px;
  border-right: 1px solid var(--qp-line-softer);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}

.qp-where-cell:last-child { border-right: 0; background: var(--qp-soft); }
.qp-where-cell > .qp-where-value { max-width: 100%; }

/* The value IS the control: a native select, so a phone opens its own picker
   rather than a fiddly custom menu, styled to read as the plain bold value. */
.qp-where-picker { display: flex; align-items: center; gap: 8px; min-width: 0; }

.qp-where-selectwrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}

.qp-where-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* content-box so the browser's intrinsic width (the longest option) is the
     CONTENT width and the caret's padding is added on top. With border-box the
     padding eats into the text and every value truncates to "Econo...". */
  box-sizing: content-box;
  max-width: 100%;
  margin: 0;
  padding: 3px 22px 3px 6px;
  margin-left: -6px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--qp-ink);
  cursor: pointer;
  text-overflow: ellipsis;
  transition: border-color .14s, background-color .14s;
}

.qp-where-select:hover { border-color: var(--qp-chip-line); background: #fff; }

.qp-where-select:focus-visible {
  outline: 2px solid var(--qp-blue);
  outline-offset: 1px;
  border-color: transparent;
}

.qp-where-caret {
  position: absolute;
  right: 5px;
  pointer-events: none;
  color: var(--qp-faint);
}

.qp-where-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--qp-muted);
}

.qp-where-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--qp-ink);
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Plain text values clip; the picker sizes itself to its own selected option. */
.qp-where-value > span:first-child:not(.qp-where-selectwrap) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qp-chip {
  padding: 2px 8px;
  border-radius: 5px;
  background: var(--qp-chip-bg);
  border: 1px solid var(--qp-chip-line);
  font-size: 11px;
  font-weight: 500;
  color: var(--qp-blue);
  white-space: nowrap;
}

.qp-chip-green {
  background: #e7f6ec;
  border-color: #c4e8d1;
  color: #166534;
  font-weight: 600;
  font-size: 10.5px;
}

/* ---- two-column body -------------------------------------------------- */

.qp-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 336px;
  gap: 24px;
  align-items: start;
}

.qp-main { min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.qp-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ---- page heading ----------------------------------------------------- */

.qp-head { display: flex; flex-direction: column; gap: 8px; }

.qp-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--qp-muted);
}

.qp-subj h1.qp-title {
  margin: 0;
  font-family: var(--qp-serif);
  font-size: 34px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--qp-ink);
  text-wrap: pretty;
}

/* The one link in the lede: the hand-off to the solved paper, announced above
   the reader so it is discoverable without scrolling past the PDF. */
.qp-lede-solved {
  color: var(--qp-accent, #1d50ca);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.qp-lede-solved:hover { color: var(--qp-ink); }

.qp-lede {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--qp-muted);
  max-width: 640px;
  text-wrap: pretty;
}

/* ---- cards ------------------------------------------------------------ */

.qp-card {
  background: #fff;
  border: 1px solid var(--qp-line);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(13, 21, 38, .05);
  overflow: hidden;
}

.qp-card-head {
  padding: 13px 20px;
  background: var(--qp-strip);
  border-bottom: 1px solid var(--qp-strip-line);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.qp-card-title {
  font-family: var(--qp-serif);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--qp-ink);
}

.qp-card-note { font-size: 12px; color: var(--qp-muted); white-space: nowrap; }
.qp-note-short { display: none; }
.qp-card-body { padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 7px; }

/* ---- paper rows ------------------------------------------------------- */

.qp-paper {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 13px 16px;
  background: #fff;
  border: 1px solid var(--qp-line-soft);
  border-radius: 9px;
  color: var(--qp-ink);
  transition: border-color .14s, box-shadow .14s;
}

.qp-paper:hover {
  border-color: var(--qp-chip-line);
  box-shadow: 0 1px 3px rgba(13, 21, 38, .07);
  color: var(--qp-ink);
}

.qp-paper-icon {
  width: 26px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 3px;
  background: #eaf1fb;
  border: 1px solid #dbe5f3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  color: var(--qp-muted);
  letter-spacing: .02em;
}

.qp-paper-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.qp-paper-line { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

.qp-paper-year {
  font-family: var(--qp-serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--qp-ink);
}

.qp-paper-sub {
  font-size: 11.5px;
  color: var(--qp-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qp-paper-read {
  padding: 8px 15px;
  border-radius: 7px;
  background: var(--qp-blue);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.qp-paper-read:hover { background: var(--qp-blue-dark); color: #fff; }

.qp-paper-missing {
  border-style: dashed;
  border-color: #c9d8ec;
  background: var(--qp-soft);
}

/* A paper with model answers. The row is one <a> to the paper, so the marker
   is a word, not a second link; the qp-solved-line above the rows carries the
   direct link to the solved page. */
.qp-paper-solved {
  margin-left: 8px;
  font-family: var(--qp-serif);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--qp-accent, #1d50ca);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.qp-solved-line {
  display: block;
  margin: 0 0 10px;
  padding: 11px 16px;
  font-family: var(--qp-serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--qp-ink);
  border: 1px solid var(--qp-line-soft);
  border-radius: 9px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--qp-accent, #1d50ca);
}
.qp-solved-line:hover { border-color: var(--qp-chip-line); color: var(--qp-ink); }

.qp-paper-missing .qp-paper-icon {
  background: transparent;
  border-style: dashed;
  border-color: #c9d8ec;
  color: var(--qp-faint);
}

.qp-paper-missing .qp-paper-year { color: var(--qp-muted); }
.qp-paper-upload { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.qp-viewonly { margin: 4px 2px 0; font-size: 11.5px; color: var(--qp-muted); }

/* ---- how-to ----------------------------------------------------------- */

.qp-howto {
  background: #fff;
  border: 1px solid var(--qp-line);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.qp-subj h2.qp-h2 {
  margin: 0;
  font-family: var(--qp-serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--qp-ink);
}

.qp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.qp-step { display: flex; flex-direction: column; gap: 6px; }

.qp-step-n {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--qp-chip-bg);
  color: var(--qp-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

.qp-step-t { font-size: 13.5px; font-weight: 600; color: var(--qp-ink); }
.qp-step-d { font-size: 12.5px; line-height: 1.55; color: var(--qp-muted); }

/* ---- FAQ -------------------------------------------------------------- */

.qp-faq-block { display: flex; flex-direction: column; gap: 12px; }

.qp-subj h2.qp-h2-lg {
  margin: 0;
  font-family: var(--qp-serif);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--qp-ink);
}

.qp-faq { background: #fff; border: 1px solid var(--qp-line); border-radius: 12px; overflow: hidden; }
.qp-faq details { border-bottom: 1px solid var(--qp-line-softer); }
.qp-faq details:last-child { border-bottom: 0; }
.qp-faq summary::-webkit-details-marker { display: none; }

.qp-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 15px 20px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.qp-faq-plus { color: var(--qp-faint); display: inline-block; transition: transform .15s; flex-shrink: 0; }
.qp-faq details[open] .qp-faq-plus { transform: rotate(45deg); }

.qp-faq p {
  margin: 0;
  padding: 0 20px 16px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--qp-body);
  max-width: 720px;
}

/* ---- about ------------------------------------------------------------ */

.qp-about { border-top: 1px solid var(--qp-line-soft); padding-top: 18px; }

.qp-subj h2.qp-h2-sm {
  margin: 0 0 8px;
  font-family: var(--qp-serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--qp-ink);
}

.qp-about p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--qp-body);
  max-width: 760px;
  text-wrap: pretty;
}

/* ---- sidebar ---------------------------------------------------------- */

.qp-side-head {
  padding: 12px 16px;
  background: var(--qp-strip);
  border-bottom: 1px solid var(--qp-strip-line);
  font-family: var(--qp-serif);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--qp-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.qp-side-body { padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 7px; }

.qp-link-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border: 1px solid var(--qp-line-soft);
  border-radius: 9px;
  color: var(--qp-ink);
  transition: border-color .14s;
}

.qp-link-row:hover { border-color: var(--qp-blue); color: var(--qp-ink); }
.qp-link-row-label { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; }
.qp-link-row-arrow { color: var(--qp-faint); flex-shrink: 0; }

.qp-link-row-current {
  background: #f4f8ff;
  border-color: var(--qp-chip-line);
}

.qp-link-row-current .qp-link-row-label { font-weight: 600; }

.qp-group-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border-radius: 9px;
  color: var(--qp-ink);
  transition: border-color .14s;
}

.qp-group-row:hover { color: var(--qp-ink); }
.qp-group-tg { border: 1px solid #cfe4f4; background: #f2f9fe; }
.qp-group-tg:hover { border-color: #1c93d1; }
.qp-group-wa { border: 1px solid #cbe9d6; background: #f2fbf5; }
.qp-group-wa:hover { border-color: #1faa53; }

.qp-group-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 999px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qp-group-tg .qp-group-icon { background: #1c93d1; }
.qp-group-wa .qp-group-icon { background: #1faa53; }
.qp-group-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.qp-group-name { font-size: 13px; font-weight: 600; }
.qp-group-meta { font-size: 11.5px; color: var(--qp-muted); }
.qp-group-cta { font-size: 12.5px; font-weight: 600; flex-shrink: 0; }
.qp-group-tg .qp-group-cta { color: #1c93d1; }
.qp-group-wa .qp-group-cta { color: #1faa53; }

.qp-pills { padding: 12px 14px 14px; display: flex; flex-wrap: wrap; gap: 6px; }

.qp-pill {
  padding: 7px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--qp-line);
  color: var(--qp-body);
  font-size: 12.5px;
  font-weight: 500;
  transition: border-color .14s;
}

.qp-pill:hover { border-color: var(--qp-blue); color: var(--qp-body); }
.qp-pill-on { background: var(--qp-blue); border-color: var(--qp-blue); color: #fff; font-weight: 600; }
.qp-side-more { margin: 2px 2px 0; font-size: 12.5px; font-weight: 600; }

.qp-upload {
  background: var(--qp-navy);
  border-radius: 12px;
  padding: 18px;
  color: #eaf1fd;
}

.qp-subj .qp-upload h2 {
  margin: 0;
  font-family: var(--qp-serif);
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
}

.qp-upload p { margin: 7px 0 0; font-size: 12.5px; line-height: 1.6; color: #a9c0e8; }

.qp-upload-cta {
  margin-top: 13px;
  display: block;
  text-align: center;
  padding: 10px;
  border-radius: 8px;
  background: #fff;
  color: var(--qp-navy);
  font-size: 13px;
  font-weight: 600;
}

.qp-upload-cta:hover { background: #eaf1fd; color: var(--qp-navy); }

/* ---- paper page: the reader ------------------------------------------- */

.qp-reader-head {
  padding: 12px 20px;
  background: var(--qp-strip);
  border-bottom: 1px solid var(--qp-strip-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.qp-reader-file { display: flex; align-items: center; gap: 12px; min-width: 0; }
.qp-reader-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.qp-reader-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--qp-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qp-reader-sub { font-size: 11.5px; color: var(--qp-muted); }

/* The reader sits on a desk-grey stage so the page edges read as paper. */
.qp-reader-stage { background: #e9eff8; padding: 0; }
.qp-reader-stage .mn-pdf-viewer { width: 100%; min-height: 70vh; position: relative; }

.qp-reader-foot {
  padding: 12px 20px;
  border-top: 1px solid var(--qp-strip-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--qp-muted);
}

.qp-reader-foot a { font-size: 12px; font-weight: 600; white-space: nowrap; }

/* ---- paper page: older / newer sitting --------------------------------- */

.qp-neighbours { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.qp-neighbour {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  background: #fff;
  border: 1px solid var(--qp-line);
  border-radius: 12px;
  color: var(--qp-ink);
  transition: border-color .14s;
}

.qp-neighbour:hover { border-color: var(--qp-blue); color: var(--qp-ink); }

.qp-neighbour-none {
  border-style: dashed;
  border-color: #c9d8ec;
  background: var(--qp-soft);
}

.qp-neighbour-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.qp-neighbour-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--qp-muted);
}

.qp-neighbour-none .qp-neighbour-label { color: var(--qp-faint); }

.qp-neighbour-year {
  font-family: var(--qp-serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--qp-ink);
}

.qp-neighbour-none .qp-neighbour-year { font-size: 14px; color: var(--qp-muted); }
.qp-neighbour-sub { font-size: 11.5px; color: var(--qp-muted); }
.qp-neighbour-arrow { font-size: 16px; color: var(--qp-blue); flex-shrink: 0; }

/* The paper page keeps its own long-standing layout below the strip, so the
   design tokens are scoped to the parts that were replaced rather than fighting
   question-paper-viewer-page.css for the reader and the rail. */
.qp-viewer-content.qp-subj { background: transparent; }
.qp-viewer-strip { padding-bottom: 0; gap: 18px; }
.qp-viewer-neighbours { margin: 18px 0 0; }

/* question-paper-viewer-page.css carries a universal reset
   (".qp-viewer-content * { margin:0; padding:0; box-sizing:border-box }") and
   loads after this sheet, so it flattens the strip: cells lose their padding
   and the select loses the room its caret sits in, leaving the chevron drawn
   straight through the value. These restate the same values one level more
   specific so they win on specificity rather than on order. */
.qp-viewer-content .qp-where-cell { padding: 13px 18px; }

.qp-viewer-content .qp-where-picker .qp-where-select {
  box-sizing: content-box;
  padding: 3px 22px 3px 6px;
  margin-left: -6px;
}

.qp-viewer-content .qp-head { gap: 8px; }
.qp-viewer-content .qp-neighbour { padding: 15px 18px; }
.qp-viewer-content .qp-faq summary { padding: 15px 20px; }
.qp-viewer-content .qp-faq p { padding: 0 20px 16px; }

@media (max-width: 768px) {
  .qp-viewer-content .qp-where-cell { padding: 9px 14px; }
  .qp-viewer-content .qp-neighbour { padding: 12px 14px; }
}

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

@media (max-width: 1000px) {
  .qp-cols { grid-template-columns: minmax(0, 1fr); }
  .qp-steps { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

@media (max-width: 768px) {
  .qp-subj-wrap { padding: 14px 12px 24px; gap: 14px; }

  /* The strip stacks into rows, each one still a tap target back up the tree. */
  .qp-where { grid-template-columns: minmax(0, 1fr); border-radius: 12px; }

  /* Each level becomes a full-width picker row. */
  .qp-where-cell {
    border-right: 0;
    border-bottom: 1px solid var(--qp-line-softer);
    gap: 2px;
    padding: 9px 14px;
  }

  .qp-where-cell .qp-where-picker,
  .qp-where-cell .qp-where-selectwrap { width: 100%; }
  .qp-where-cell .qp-where-select { width: 100%; }

  .qp-where-cell:last-child { border-bottom: 0; }
  .qp-where-label { font-size: 10px; }
  .qp-where-value { font-size: 13px; }
  .qp-where-select { font-size: 13px; padding-top: 6px; padding-bottom: 6px; }

  .qp-subj h1.qp-title { font-size: 24px; line-height: 1.18; }
  .qp-lede { font-size: 13px; line-height: 1.55; }
  .qp-eyebrow { font-size: 10.5px; letter-spacing: .1em; }

  .qp-card-head { padding: 11px 14px; }
  .qp-card-title { font-size: 14px; }
  .qp-card-note { font-size: 11px; }
  .qp-note-long { display: none; }
  .qp-note-short { display: inline; }
  .qp-card-body { padding: 10px 12px 12px; }

  /* Whole row is the tap target on a phone, so the button collapses to a word. */
  .qp-paper { padding: 12px; gap: 12px; min-height: 56px; }
  .qp-paper-year { font-size: 15px; }
  .qp-paper-sub { font-size: 11px; }

  .qp-paper-read {
    padding: 0;
    background: transparent;
    color: var(--qp-blue);
    font-size: 12px;
  }

  .qp-paper-read:hover { background: transparent; color: var(--qp-blue-dark); }
  .qp-viewonly { font-size: 11px; }

  /* The reader is the page on a phone, so it gets the width and the height. */
  .qp-reader-head { padding: 11px 14px; }
  .qp-reader-name { font-size: 12.5px; }
  .qp-reader-sub { font-size: 10.5px; }
  .qp-reader-stage .mn-pdf-viewer { min-height: 62vh; }

  .qp-reader-foot {
    padding: 10px 14px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    font-size: 11px;
  }

  .qp-reader-foot a { font-size: 11.5px; }

  .qp-neighbours { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .qp-neighbour { padding: 12px 14px; min-height: 48px; }
  .qp-neighbour-year { font-size: 15px; }
  .qp-neighbour-none .qp-neighbour-year { font-size: 12px; }
  .qp-neighbour-sub { display: none; }
  .qp-neighbour-arrow { display: none; }

  .qp-howto { padding: 15px 16px; }
  .qp-subj h2.qp-h2 { font-size: 16px; }
  .qp-subj h2.qp-h2-lg { font-size: 17px; }
  .qp-faq summary { padding: 14px 16px; font-size: 13.5px; min-height: 48px; }
  .qp-faq p { padding: 0 16px 14px; font-size: 12.5px; }
  .qp-about p { font-size: 13px; }
  .qp-side-head { padding: 11px 14px; font-size: 14px; }
  .qp-side-body { padding: 10px 12px 12px; }
  .qp-link-row, .qp-group-row { min-height: 48px; padding: 12px; }
  .qp-pill { padding: 8px 14px; font-size: 12px; }

}

@media (max-width: 380px) {
  .qp-paper { gap: 10px; }
}