/* ==========================================================================
 * 求人ボード — 索引方式の求人一覧
 *
 * 適用範囲は .qpjb の内側だけ。求人一覧（/jobs/ ・各CPTアーカイブ）でのみ読み込む。
 * 既存の jobs.css はトップ・メディア・企業ページでも読まれているため触らない
 * （教範 redesign-existing-projects: 改修は影響範囲の狭い側から）。
 *
 * 【色】白基調。段差は --bg-subtle の1段だけ。主行動は --qpjb-ink-1 で塗り、
 *      Quantum Orange は識別・状態・データの3用途に限る。
 *      #D55C25 は白地で 3.90:1 であり文字に使うと AA を割るため、
 *      文字にするときは #C2410E（5.18:1）を使う。
 *
 * 【端末の配色設定に追従しない】prefers-color-scheme でダークへ反転させない。
 *      白基調が本サイトの様式であるため（大統領裁定 2026-09-13）。
 *
 * 【色の出どころ】本ファイルの色は Quantum Plus 自身のデザインシステム
 *      （quantum-plus-design-system/tailwind.config.js）の実値である。
 *      Quantum Orange #D55C25（同 quantum.500）／#C2410E（quantum.600）／
 *      #FFF7ED（quantum.50）／neutral 50〜900（#FAFAFA〜#1E293B）／
 *      #2563EB（info.600）／#ECFDF5（success.50）。
 *      本国標準（.claude/skills/pt-brand-system）とは色値が異なるため
 *      validate-brand.sh 検査B は「承認パレット外」と報告するが、
 *      「ロゴとカラーだけ採用・白ベース」は大統領の明示指示であり、
 *      構造規律（主行動は ink-1 で塗る／アクセントは識別・状態・データの3用途／
 *      数字に出典・母数・更新日時を添える）のみ本国標準がそのまま及ぶ。
 *
 *      新しく起こした色は #047857 のみ（リモート可バッジの文字）。
 *      success.600 #059669 は白文字で 3.76:1 と AA を割るため #047857 を用いる。
 *
 * @since 3.3.0
 * ========================================================================== */

.qpjb {
  /*
   * 値は assets/css/tokens.css（:root）が持つ。ここでは名前を繋ぐだけにして、
   * 同じ色を2箇所で定義しない。
   */
  --qpjb-bg:            var(--qp-bg);
  --qpjb-subtle:        var(--qp-subtle);
  --qpjb-hover:         var(--qp-hover);
  --qpjb-border:        var(--qp-border);
  --qpjb-border-strong: var(--qp-border-strong);

  --qpjb-ink-1: var(--qp-ink-1);
  --qpjb-ink-2: var(--qp-ink-2);
  --qpjb-ink-3: var(--qp-ink-3);
  --qpjb-ink-4: var(--qp-ink-4);

  --qpjb-accent:      var(--qp-accent);
  --qpjb-accent-ink:  var(--qp-accent-ink);
  --qpjb-accent-wash: var(--qp-accent-wash);
  --qpjb-ok-wash:     var(--qp-ok-wash);
  --qpjb-ok-ink:      var(--qp-ok-ink);

  --qpjb-shadow-1: var(--qp-shadow-1);
  --qpjb-shadow-2: var(--qp-shadow-2);

  --qpjb-t-h1:   var(--qp-t-h1);
  --qpjb-t-h2:   var(--qp-t-h2);
  --qpjb-t-h3:   var(--qp-t-h3);
  --qpjb-t-body: var(--qp-t-body);
  --qpjb-t-sm:   var(--qp-t-sm);
  --qpjb-t-xs:   var(--qp-t-xs);

  --qpjb-s-1: var(--qp-s-1);   --qpjb-s-2: var(--qp-s-2);   --qpjb-s-3: var(--qp-s-3);
  --qpjb-s-4: var(--qp-s-4);   --qpjb-s-5: var(--qp-s-5);   --qpjb-s-6: var(--qp-s-6);
  --qpjb-s-8: var(--qp-s-8);   --qpjb-s-10: var(--qp-s-10); --qpjb-s-12: var(--qp-s-12);
  --qpjb-s-16: var(--qp-s-16);

  --qpjb-radius-card:    var(--qp-radius-card);
  --qpjb-radius-control: var(--qp-radius-control);
  --qpjb-radius-pill:    var(--qp-radius-pill);

  --qpjb-h-cta:   var(--qp-h-cta);
  --qpjb-h-input: var(--qp-h-input);
  --qpjb-maxw:    var(--qp-maxw);
  --qpjb-gutter:  var(--qp-gutter);

  color-scheme: light;
  background: var(--qpjb-bg);
  color: var(--qpjb-ink-2);
  font-size: var(--qpjb-t-body);
  line-height: 1.85;
  font-feature-settings: "palt" 1;
  letter-spacing: .005em;
  overflow-wrap: break-word;
}

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

/* 素の要素の既定値は :where() で包み、詳細度を 0 にする。
 * `.qpjb a { color: inherit }`（詳細度 0,1,1）のままだと
 * `.qpjb-btn--primary { color: #FFFFFF }`（0,1,0）を打ち負かし、
 * 主ボタンの文字が本文グレーのまま紺地に載る（実測 1.87:1）。
 * 部品側のクラス指定が必ず勝つようにする。 */
:where(.qpjb) h1, :where(.qpjb) h2, :where(.qpjb) h3 {
  margin: 0;
  color: var(--qpjb-ink-1);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.015em;
  word-break: keep-all;
}
:where(.qpjb) p { margin: 0; }
:where(.qpjb) a { color: inherit; text-decoration: none; }
.qpjb .num { font-variant-numeric: tabular-nums; font-feature-settings: "palt" 0; letter-spacing: 0; }
.qpjb :focus-visible { outline: 2px solid var(--qpjb-accent-ink); outline-offset: 3px; border-radius: 3px; }

.qpjb-wrap {
  width: 100%; max-width: var(--qpjb-maxw);
  margin-inline: auto; padding-inline: var(--qpjb-gutter);
}

/* --------------------------------------------------------------------------
 * ヒーロー
 * ----------------------------------------------------------------------- */
.qpjb-hero { padding-block: var(--qpjb-s-16) var(--qpjb-s-10); background: var(--qpjb-bg); }
.qpjb-eyebrow {
  font-size: var(--qpjb-t-xs); font-weight: 800; letter-spacing: .14em;
  color: var(--qpjb-accent-ink); margin-bottom: var(--qpjb-s-4);
}
.qpjb-hero__title {
  font-size: var(--qpjb-t-h1); font-weight: 900;
  letter-spacing: -.035em; line-height: 1.32;
  margin-bottom: var(--qpjb-s-5);
}
/* 意味のまとまりごとに折る。内側では折らない。細かく刻んであるので、
 * 幅に余裕があれば隣どうしが同じ行に並ぶ。狭すぎて1つも入らない場合に
 * 画面からはみ出さないよう、そのときだけ内側の折り返しを許す。 */
.qpjb-nb { display: inline-block; white-space: nowrap; max-width: 100%; overflow-wrap: anywhere; }
@supports (white-space: balance) { .qpjb-nb { white-space: nowrap; } }
.qpjb-hero__lead {
  font-size: 16px; color: var(--qpjb-ink-2);
  /* 和文は語の区切りが無いので必ず行中で折れる。1行を長くするほど
   * 折れ目が目立つため、1行あたり28文字前後に収める。 */
  max-width: 24em;
}
/* 応募方法の断り書き。リードと同じ大きさで続けると3行の塊になって読みにくい。
 * 一段落として本文から離す。 */
.qpjb-hero__note {
  margin-top: var(--qpjb-s-3);
  font-size: var(--qpjb-t-sm); color: var(--qpjb-ink-3);
  max-width: 24em;
}

/* --------------------------------------------------------------------------
 * ボタン（主行動は ink-1 の塗り。アクセントでは塗らない）
 * ----------------------------------------------------------------------- */
.qpjb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--qpjb-s-2);
  height: var(--qpjb-h-cta); padding-inline: var(--qpjb-s-5);
  border: 1px solid transparent; border-radius: var(--qpjb-radius-control);
  font-size: var(--qpjb-t-sm); font-weight: 800; letter-spacing: .01em;
  white-space: nowrap; cursor: pointer;
  transition: background-color .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.qpjb-btn--primary { background: var(--qpjb-ink-1); color: #FFFFFF; box-shadow: var(--qpjb-shadow-1); }
.qpjb-btn--primary:hover { box-shadow: var(--qpjb-shadow-2); }
.qpjb-btn--ghost {
  background: var(--qpjb-bg); color: var(--qpjb-ink-1);
  border-color: var(--qpjb-border-strong);
}
.qpjb-btn--ghost:hover { background: var(--qpjb-hover); border-color: var(--qpjb-ink-4); }
.qpjb-btn--sm { height: 38px; font-size: var(--qpjb-t-xs); padding-inline: var(--qpjb-s-4); }
/* 幅いっぱいのボタンは長いラベルを抱えるため内側余白を詰め、折り返しの余地を作る */
.qpjb-btn--block { width: 100%; padding-inline: var(--qpjb-s-3); }

/* --------------------------------------------------------------------------
 * レイアウト
 * ----------------------------------------------------------------------- */
.qpjb-body { padding-bottom: var(--qpjb-s-16); }
.qpjb-listing {
  display: grid; grid-template-columns: 244px minmax(0, 1fr);
  gap: var(--qpjb-s-10); align-items: start;
}

/* --------------------------------------------------------------------------
 * 絞り込み
 * ----------------------------------------------------------------------- */
.qpjb-filters { position: sticky; top: var(--qpjb-s-4); }
/* details に display: contents を当てると、閉じても中身が消えない（実測）。
 * details 自身を縦並びの器にする。 */
/* 絞り込みの区切り。グループ間はグループ内より明確に広く取る
 * （24px と 12px では差が足りず、見出しが前のリストの一部に見えていた）。
 *
 * 縦並びの flex は details ではなく中の器に掛ける。details の中身は
 * ブラウザが内部の箱でひとまとめにするため、details 自身を flex にしても
 * gap は「要約 ⇄ 中身」の1か所にしか効かない（実測でグループ間 0px）。 */
.qpjb-panel__body { display: flex; flex-direction: column; gap: var(--qpjb-s-8); }
/* 閉じた details の中身を隠すのはブラウザ既定のスタイルだが、
 * 作者スタイルの display 指定（.qpjb-fgroup { display: flex }）が常に勝つため
 * 閉じても消えない（実測: 390px で8グループとも表示されたまま）。
 * 隠す指定を作者側で明示する。 */
.qpjb-panel:not([open]) > *:not(.qpjb-filters__h) { display: none; }
.qpjb-filters__h {
  display: flex; align-items: center; gap: var(--qpjb-s-2);
  font-size: var(--qpjb-t-h3); font-weight: 800; color: var(--qpjb-ink-1);
  letter-spacing: -.01em;
  padding-bottom: var(--qpjb-s-3); border-bottom: 2px solid var(--qpjb-ink-1);
  list-style: none;
}
.qpjb-filters__h::-webkit-details-marker { display: none; }
.qpjb-panel__badge {
  margin-inline-start: auto;
  font-size: var(--qpjb-t-xs); font-weight: 700; color: var(--qpjb-accent-ink);
}
.qpjb-panel__badge[hidden] { display: none; }
.qpjb-fgroup {
  display: flex; flex-direction: column; gap: var(--qpjb-s-2);
  margin: 0; padding: 0; border: 0;
}
/* 見出しは罫で自分のリストを囲い込む。「絞り込み」と同じ作りに揃える。 */
.qpjb-fgroup__t {
  width: 100%;
  padding: 0 0 var(--qpjb-s-2);
  margin-bottom: var(--qpjb-s-1);
  border-bottom: 1px solid var(--qpjb-border);
  font-size: var(--qpjb-t-sm); font-weight: 800;
  color: var(--qpjb-ink-1); letter-spacing: .01em;
}
.qpjb-check {
  display: flex; align-items: center; gap: var(--qpjb-s-3);
  font-size: var(--qpjb-t-sm); color: var(--qpjb-ink-2);
  cursor: pointer; font-weight: 500; line-height: 1.6;
  padding-block: 2px;
}
.qpjb-check[hidden] { display: none; }
.qpjb-check:hover { color: var(--qpjb-ink-1); }
.qpjb-check input { width: 17px; height: 17px; accent-color: var(--qpjb-accent-ink); flex: 0 0 auto; margin: 0; }
/* ラベルは折り返してよい。件数は右端に固定し、桁が変わっても動かさない。
 * グループ名を別途添えるのはやめた — 表示名が複数グループで重なるものは
 * ラベル自体が「電気・電子 : 研究・開発」のようにグループ名を冠しており、
 * 右に同じ語がもう一度出ていた（本番で発覚）。 */
.qpjb-check__label { min-width: 0; overflow-wrap: anywhere; }
.qpjb-check__n {
  margin-inline-start: auto; color: var(--qpjb-ink-3);
  font-size: var(--qpjb-t-xs); font-weight: 700;
  flex: 0 0 auto; padding-inline-start: var(--qpjb-s-2);
}
.qpjb-more {
  align-self: flex-start;
  padding: 0; border: 0; background: none; cursor: pointer;
  font-size: var(--qpjb-t-xs); font-weight: 700; color: var(--qpjb-ink-1);
  border-bottom: 1px solid var(--qpjb-border-strong); line-height: 1.8;
}
.qpjb-more:hover { color: var(--qpjb-accent-ink); border-bottom-color: var(--qpjb-accent-ink); }

.qpjb-input, .qpjb-select {
  height: var(--qpjb-h-input); width: 100%;
  padding-inline: var(--qpjb-s-4);
  border: 1px solid var(--qpjb-border-strong);
  border-radius: var(--qpjb-radius-control);
  background: var(--qpjb-bg); color: var(--qpjb-ink-1);
  font: inherit; font-size: var(--qpjb-t-sm); font-weight: 500;
}
/* プレースホルダは例示＝情報である。ink-4（2.5:1）では AA を割るため ink-3 を使う */
.qpjb-input::placeholder { color: var(--qpjb-ink-3); font-weight: 400; opacity: 1; }
.qpjb-input:hover, .qpjb-select:hover { border-color: var(--qpjb-ink-4); }
.qpjb-select {
  appearance: none; cursor: pointer;
  padding-inline-end: var(--qpjb-s-8);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 20px center, right 15px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.qpjb-note { font-size: var(--qpjb-t-xs); line-height: 1.7; color: var(--qpjb-ink-3); }
.qpjb-note--filtered { margin-top: var(--qpjb-s-2); }

/* --------------------------------------------------------------------------
 * ツールバー
 * ----------------------------------------------------------------------- */
.qpjb-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--qpjb-s-4); flex-wrap: wrap;
  padding-bottom: var(--qpjb-s-4);
}
.qpjb-toolbar__count { font-size: var(--qpjb-t-sm); color: var(--qpjb-ink-2); font-weight: 700; }
.qpjb-toolbar__count b {
  color: var(--qpjb-ink-1); font-size: 21px; font-weight: 800;
  letter-spacing: -.02em; margin-inline-end: 2px;
}
.qpjb-toolbar__total { color: var(--qpjb-ink-3); font-weight: 500; margin-inline-start: var(--qpjb-s-2); }
.qpjb-sortwrap { display: flex; align-items: center; gap: var(--qpjb-s-2); }
.qpjb-sortwrap label { font-size: var(--qpjb-t-xs); color: var(--qpjb-ink-3); font-weight: 700; }
.qpjb-sortwrap .qpjb-select { width: auto; }

/* --------------------------------------------------------------------------
 * 求人行
 * ----------------------------------------------------------------------- */
.qpjb-list { border-top: 1px solid var(--qpjb-border); }
.qpjb-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--qpjb-s-4);
  padding-block: var(--qpjb-s-6);
  border-bottom: 1px solid var(--qpjb-border);
  align-items: start;
}

/* 開発方式（テーマ）。行の見分けはここで付ける。設定が無い求人には出ない。 */
.qpjb-themes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--qpjb-s-2); }
.qpjb-theme {
  font-size: var(--qpjb-t-xs); font-weight: 800; line-height: 1;
  letter-spacing: .02em;
  padding: 6px 10px; border-radius: var(--qpjb-radius-pill);
  background: var(--qpjb-ink-1); color: #FFFFFF;
}

.qpjb-row__h { margin: 0; }
.qpjb-row__title {
  font-size: var(--qpjb-t-h3); font-weight: 800;
  color: var(--qpjb-ink-1); line-height: 1.45; letter-spacing: -.02em;
  /*
   * 見出しの既定は word-break: keep-all（文節の途中で折らない）だが、
   * 求人タイトルは見出しではなく本文の一部であり、狭い画面では折り返せないと
   * 困る。実データの「中性原子方式の量子コンピュータの社会実装へ…」のように
   * 区切り文字を含まない和文は、keep-all のままだと1行のまま伸びて
   * 390px の画面で575pxになり、ページ全体が横スクロールした（本番で発生）。
   */
  word-break: normal;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.qpjb-row__title:hover { color: var(--qpjb-accent-ink); }
.qpjb-row__meta {
  font-size: var(--qpjb-t-sm); color: var(--qpjb-ink-3);
  margin-top: 3px; display: flex; flex-wrap: wrap; align-items: center;
  gap: 0 var(--qpjb-s-3);
}
.qpjb-row__meta > * + *::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--qpjb-ink-4); margin-inline-end: var(--qpjb-s-3);
}
/* エージェント求人の company_name は社名ではなく企業の説明が入ることがある。
 * 見出しの下に1行だけ地の色で置き、タイトルより目立たせない
 * （太字で2行に折り返すと、同じ文言が全行で主役になってしまう）。 */
.qpjb-row__about {
  font-size: var(--qpjb-t-sm); color: var(--qpjb-ink-3);
  margin-top: 2px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;
  overflow: hidden;
}
.qpjb-row__co { font-weight: 800; color: var(--qpjb-ink-1); }
.qpjb-row__co--private { font-weight: 500; color: var(--qpjb-ink-3); }
.qpjb-row__sal { font-weight: 800; color: var(--qpjb-ink-1); }
.qpjb-row__sum { font-size: var(--qpjb-t-sm); color: var(--qpjb-ink-2); margin-top: var(--qpjb-s-2); max-width: 44em; }
.qpjb-row__act { display: flex; gap: var(--qpjb-s-2); align-items: center; }

.qpjb-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--qpjb-s-3); }
.qpjb-pill {
  font-size: 11.5px; font-weight: 700; line-height: 1;
  padding: 6px 9px; border-radius: var(--qpjb-radius-pill);
  background: var(--qpjb-hover); color: var(--qpjb-ink-2);
  letter-spacing: .01em;
}
/*
 * 属性のピルに色を割り当てない。
 *
 * リモート可を緑（success）で塗ると「良い状態」という意味が乗るが、これは
 * 状態ではなく属性である。職種をアクセント色で塗るのも同じで、20行並べば
 * 20個の橙が散る——本規格の「アクセントは識別・状態・データの3用途で
 * 1画面5箇所まで」を自分で破っていた。
 *
 * 強さの順は 濃紺塗り（テーマ＝開発方式）> 白地＋罫（リモート可）>
 * 薄い塗り（雇用形態・職種）の3段だけにし、色は使わない。
 */
.qpjb-pill--remote {
  background: var(--qpjb-bg);
  color: var(--qpjb-ink-1);
  box-shadow: inset 0 0 0 1px var(--qpjb-border-strong);
}

/* --------------------------------------------------------------------------
 * 空・ページャ・出典
 * ----------------------------------------------------------------------- */
.qpjb-empty {
  border: 1px solid var(--qpjb-border); border-radius: var(--qpjb-radius-card);
  padding: var(--qpjb-s-16) var(--qpjb-s-6); text-align: center;
  background: var(--qpjb-subtle);
}
.qpjb-empty h2 { font-size: var(--qpjb-t-h3); font-weight: 800; margin-bottom: var(--qpjb-s-2); }
.qpjb-empty p {
  font-size: var(--qpjb-t-sm); color: var(--qpjb-ink-2);
  margin: 0 auto var(--qpjb-s-6); max-width: 34em;
}
.qpjb-pager { display: flex; justify-content: center; padding-top: var(--qpjb-s-6); }
.qpjb-pager[hidden] { display: none; }

.qpjb-source {
  font-size: var(--qpjb-t-xs); line-height: 1.75;
  color: var(--qpjb-ink-3); margin-top: var(--qpjb-s-6);
}
.qpjb-source .pt-source__item + .pt-source__item::before { content: " / "; color: var(--qpjb-ink-4); }

/* --------------------------------------------------------------------------
 * CTA 帯（応募は担当エージェントへ。企業への直接応募は受け付けない）
 * ----------------------------------------------------------------------- */
.qpjb-ctaband {
  margin-top: var(--qpjb-s-16);
  background: var(--qpjb-ink-1); border-radius: var(--qpjb-radius-card);
  padding: var(--qpjb-s-12) var(--qpjb-s-10); text-align: center;
}
.qpjb-ctaband h2 {
  color: #FFFFFF; font-size: var(--qpjb-t-h2);
  letter-spacing: -.025em; margin-bottom: var(--qpjb-s-4);
}
.qpjb-ctaband p {
  color: var(--qpjb-ink-4); font-size: var(--qpjb-t-sm);
  max-width: 36em; margin: 0 auto var(--qpjb-s-8);
}
.qpjb-ctaband .qpjb-btn--primary { background: #FFFFFF; color: var(--qpjb-ink-1); }
.qpjb-ctaband .qpjb-btn--primary:hover { background: var(--qpjb-hover); }

/* --------------------------------------------------------------------------
 * レスポンシブ
 * ----------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .qpjb-listing { grid-template-columns: minmax(0, 1fr); gap: var(--qpjb-s-8); }
  .qpjb-filters { position: static; }
  .qpjb-panel__body { gap: var(--qpjb-s-8); }
  /* 畳めることが分かる見た目にする（開閉のつまみは summary 全体） */
  .qpjb-filters__h {
    border: 1px solid var(--qpjb-border-strong);
    border-radius: var(--qpjb-radius-control);
    padding: var(--qpjb-s-3) var(--qpjb-s-4);
    min-height: 44px; cursor: pointer;
  }
  .qpjb-filters__h::after {
    content: ""; width: 8px; height: 8px; flex: 0 0 auto;
    border-right: 2px solid var(--qpjb-ink-3); border-bottom: 2px solid var(--qpjb-ink-3);
    transform: rotate(45deg) translate(-2px, -2px);
  }
  .qpjb-panel[open] > .qpjb-filters__h::after { transform: rotate(-135deg) translate(-2px, -2px); }

}

/* 広い画面では常に開いた状態で、つまみは出さない。 */
@media (min-width: 1025px) {
  .qpjb-filters__h::after { content: none; }
  /* デスクトップでは折り返さない。塊に刻んであるのは狭い幅で
   * 語の途中で折れないようにするためで、1行に収まるなら刻む必要はない。 */
  .qpjb-hero__lead,
  .qpjb-hero__note { max-width: none; }
}

@media (pointer: coarse), (max-width: 860px) {
  .qpjb-check { min-height: 44px; }
  .qpjb-btn--sm { height: 44px; }
  .qpjb-more { min-height: 44px; }
  /* 求人タイトルは行の主リンク。1行だと20pxしかなく指で外しやすいので、
   * 上下の余白で当たり判定を44pxまで広げる（モノグラム列を外して
   * タイトルが1行に収まるようになったことで表面化した）。 */
  .qpjb-row__title { display: inline-block; padding-block: 12px; }
  .qpjb-row__h { margin-block: -12px 0; }
}

@media (max-width: 860px) {
  .qpjb { --qpjb-s-16: 56px; --qpjb-s-12: 40px; }
}

@media (max-width: 640px) {
  .qpjb { --qpjb-gutter: 18px; }
  .qpjb-row { grid-template-columns: minmax(0, 1fr); gap: var(--qpjb-s-3); padding-block: var(--qpjb-s-5); }
  .qpjb-row__act { grid-column: 1; }
  .qpjb-row__sum { display: none; }
  .qpjb-ctaband { padding: var(--qpjb-s-10) var(--qpjb-s-5); }
  .qpjb-toolbar { gap: var(--qpjb-s-3); }
}

@media (prefers-reduced-motion: reduce) {
  .qpjb * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media print {
  .qpjb-filters, .qpjb-row__act, .qpjb-ctaband, .qpjb-pager { display: none; }
}