/* ===========================================================
   Crack UPSC — Web UI Kit (v2: PIB study flow)
   =========================================================== */

@import url('colors_and_type.css');

* { box-sizing: border-box; }

/* ---------- shell (no sidebar in v1) ---------- */
.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg);
  font-family: var(--font-sans);
  color: var(--fg-body);
}

.topbar {
  display: flex; align-items: center; gap: 24px;
  height: 56px;
  padding: 0 32px;
  background: var(--paper-50);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 5;
}
.topbar .brand { display: flex; align-items: center; gap: 10px; cursor: pointer; text-decoration: none; }
.topbar .brand .brand-mark { width: 36px; height: 36px; display: block; }
.topbar .brand .brand-text { font-family: var(--font-display); font-size: 18px; color: var(--ink-900); letter-spacing: 0.5px; }
.topbar .top-nav { display: flex; gap: 4px; }
.topbar .top-nav-item {
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  color: var(--ink-700); padding: 6px 12px; cursor: pointer; text-decoration: none;
  border-radius: 2px;
}
.topbar .top-nav-item:hover { background: var(--paper-200); color: var(--ink-900); }
.topbar .top-nav-item.active { color: var(--ink-900); background: transparent; }
.topbar .top-nav-item.active::after {
  content: ''; display: block; height: 2px; background: var(--ink-900); margin: 4px -12px -8px;
}
.topbar .spacer { flex: 1; }
.topbar .top-search { position: relative; width: 320px; }
.topbar .top-search input {
  width: 100%; font-family: var(--font-sans); font-size: 13px;
  padding: 7px 28px 7px 32px; border: 1px solid var(--border);
  background: var(--surface); border-radius: 2px; color: var(--ink-900);
}
.topbar .top-search svg { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); stroke: var(--ink-500); }
.topbar .top-search .kbd { position:absolute; right:8px; top:50%; transform:translateY(-50%); font-family:var(--font-mono); font-size:10px; color:var(--ink-500); padding:1px 5px; border:1px solid var(--border); border-radius:2px; background:var(--paper-100); }

.main { flex: 1; }
.main-inner { max-width: 1180px; padding: 28px 32px 80px; margin: 0 auto; }

/* ---------- breadcrumbs ---------- */
.crumbs {
  display:flex; align-items:center; gap: 8px; flex-wrap: wrap;
  font-size: 12px; color: var(--ink-500);
  margin-bottom: 14px;
}
.crumbs a { color: var(--ink-700); cursor: pointer; text-decoration: none; }
.crumbs a:hover { color: var(--ink-900); text-decoration: underline; text-underline-offset: 2px; }
.crumbs span:last-child { color: var(--ink-900); }
.crumbs svg { stroke: var(--ink-400); }

/* ---------- page head ---------- */
.page-head {
  display:flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  padding-bottom: 18px; margin-bottom: 24px; border-bottom: 1px solid var(--border);
}
.page-head .eyebrow {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing:.08em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 6px;
}
.page-head h1 {
  font-family: var(--font-serif); font-size: 34px; font-weight: 600;
  line-height: 1.15; color: var(--ink-900); margin: 0; letter-spacing: -0.01em;
  max-width: 820px;
}
.page-head h1.qh1 { font-size: 24px; }
.page-head .actions { display:flex; gap: 8px; align-items:center; flex-shrink:0; }

/* ---------- buttons (re-declared so the kit is self-contained) ---------- */
.btn {
  font-family: var(--font-sans); font-size: 13.5px; font-weight: 500;
  padding: 7px 12px; border-radius: 2px; border: 1px solid transparent;
  cursor: pointer; line-height: 1.1; display:inline-flex; align-items:center; gap:6px;
  white-space: nowrap;
}
.btn-primary { background: var(--ink-900); color: var(--paper-50); }
.btn-primary:hover { background: var(--ink-800); }
.btn-secondary { background: transparent; color: var(--ink-900); border-color: var(--ink-900); }
.btn-secondary:hover { background: var(--paper-200); }
.btn-ghost { background: transparent; color: var(--ink-700); border-color: var(--border); }
.btn-ghost:hover { background: var(--paper-200); color: var(--ink-900); }
.btn-disabled { background: var(--paper-200); color: var(--fg-disabled); border-color: var(--paper-300); cursor: not-allowed; }
.btn-lg { font-size: 14px; padding: 10px 18px; }

/* ---------- tags ---------- */
.tag { display:inline-flex; align-items:center; gap:5px; font-size: 12px; padding: 2px 7px; border: 1px solid var(--border); border-radius: 2px; color: var(--ink-700); background: var(--surface); line-height: 1.4; }
.tag-subject { color: var(--teal-700); border-color: var(--teal-600); }
.tag-active { background: var(--saffron-100); border-color: var(--saffron-500); color: var(--saffron-700); font-weight: 500; }
.dot { display:inline-block; width:6px; height:6px; border-radius: 999px; }

/* ---------- section heads ---------- */
.home-section { margin-bottom: 40px; }
.section-head {
  display:flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  margin-bottom: 14px;
}
.section-head .eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing:.08em; text-transform: uppercase;
  color: var(--ink-500); margin-bottom: 4px;
}
.section-head .section-title {
  font-family: var(--font-serif); font-size: 22px; font-weight: 600;
  color: var(--ink-900); margin: 0; letter-spacing: -0.01em;
  white-space: nowrap;
}
.link-end {
  font-size: 12px; color: var(--teal-600); cursor: pointer; display:inline-flex; align-items:center; gap: 4px;
  text-decoration: underline; text-underline-offset: 2px;
  white-space: nowrap;
}
.link-end:hover { color: var(--teal-700); }

/* ---------- last 7 days strip ---------- */
.last-seven {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px;
}
.day-card {
  display:flex; flex-direction: column; gap: 4px;
  padding: 10px 12px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 2px; cursor: pointer; text-decoration: none; color: inherit;
  min-height: 96px;
}
.day-card:hover { border-color: var(--ink-700); background: var(--paper-50); }
.day-card .day-name {
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500);
}
.day-card .day-num {
  font-family: var(--font-serif); font-size: 26px; font-weight: 600;
  color: var(--ink-900); line-height: 1; letter-spacing: -0.01em;
}
.day-card .day-count { font-family: var(--font-mono); font-size: 11px; color: var(--ink-700); margin-top: auto; }
.day-card .day-top { display:flex; align-items:center; gap: 4px; font-size: 10px; color: var(--saffron-700); font-weight: 500; white-space: nowrap; }

/* ---------- months grid ---------- */
.months-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.month-card {
  display:flex; flex-direction: column; gap: 4px;
  padding: 14px 16px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 2px; cursor: pointer; text-decoration: none; color: inherit;
  min-height: 110px; position: relative;
}
.month-card:hover { border-color: var(--ink-700); }
.month-card.current { border-color: var(--ink-900); background: var(--paper-50); }
.month-card.current::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--saffron-500);
}
.month-card .m-eyebrow {
  font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--saffron-700); min-height: 12px;
}
.month-card .m-label {
  font-family: var(--font-serif); font-size: 20px; font-weight: 600;
  color: var(--ink-900); line-height: 1.15;
}
.month-card .m-count {
  font-family: var(--font-mono); font-size: 13px; color: var(--ink-700); margin-top: auto;
}
.month-card .m-count span { color: var(--ink-500); font-size: 11px; }
.month-card .m-stars { display:flex; gap: 12px; margin-top: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-700); }
.month-card .m-stars .ms { display:inline-flex; align-items:center; gap: 3px; }

/* ---------- NCERT subjects grid ---------- */
.ncert-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.ncert-card {
  display:flex; flex-direction: column; gap: 8px;
  padding: 14px 16px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 2px; cursor: pointer; text-decoration: none; color: inherit;
  position: relative;
}
.ncert-card:hover { border-color: var(--ink-700); }
.ncert-card .n-dot {
  width: 10px; height: 10px; border-radius: 999px;
}
.ncert-card .n-label {
  font-family: var(--font-serif); font-size: 17px; font-weight: 600;
  color: var(--ink-900); line-height: 1.2;
}
.ncert-card .n-meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-500); }

/* ---------- calendar ---------- */
.cal-legend {
  display:flex; gap: 18px; font-size: 11px; color: var(--ink-600);
  margin-bottom: 12px; padding: 8px 12px; background: var(--paper-50); border: 1px solid var(--border);
}
.cal-legend .ll { display:inline-flex; align-items:center; gap: 5px; white-space: nowrap; }

.cal-wrap { background: var(--surface); border: 1px solid var(--border); }
.cal-head {
  display: grid; grid-template-columns: repeat(7, 1fr);
  background: var(--paper-200); border-bottom: 1px solid var(--paper-500);
}
.cal-hcell {
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-700); padding: 8px 12px; text-align: left; border-right: 1px solid var(--border);
}
.cal-hcell:last-child { border-right: 0; }
.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
}
.cal-cell {
  position: relative;
  min-height: 132px; padding: 14px 16px;
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  display:flex; flex-direction: column; gap: 10px; cursor: pointer;
  background: var(--surface);
  transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.cal-cell:nth-child(7n) { border-right: 0; }
.cal-cell:hover {
  background: var(--paper-200);
  box-shadow: inset 0 0 0 2px var(--saffron-400);
  z-index: 1;
}
.cal-cell.empty { background: var(--paper-50); cursor: default; color: var(--ink-400); }
.cal-cell.empty:hover { background: var(--paper-50); box-shadow: none; }
.cal-cell.blank { background: var(--paper-100); cursor: default; }
.cal-cell .c-date {
  font-family: var(--font-mono); font-size: 15px; font-weight: 600;
  color: var(--ink-700); letter-spacing: .02em;
}
.cal-cell.empty .c-date { color: var(--ink-400); font-weight: 500; }
.cal-cell .c-count {
  font-family: var(--font-serif); font-size: 40px; font-weight: 700;
  color: var(--ink-900); line-height: 1; letter-spacing: -.02em;
}
.cal-cell .c-empty {
  font-family: var(--font-mono); font-size: 18px; color: var(--ink-400); margin-top: 4px;
}
.cal-cell .c-stars {
  display:flex; flex-wrap: wrap; gap: 6px; margin-top: auto;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
}
.cal-cell .cs {
  display:inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: 999px;
  background: var(--paper-100); color: var(--ink-700);
  border: 1px solid var(--border);
  font: inherit; cursor: pointer;
}
.cal-cell .cs:hover:not(:disabled) { filter: brightness(0.97); border-color: var(--ink-700); }
.cal-cell .cs:focus-visible { outline: 2px solid var(--saffron-500); outline-offset: 1px; }
.cal-cell .cs:disabled { cursor: default; opacity: 0.45; }
.cal-cell .cs svg { width: 11px; height: 11px; }
.cal-cell .cs-stars { display:inline-flex; align-items: center; gap: 1px; line-height: 0; }
.cal-cell .cs-count {
  font-variant-numeric: tabular-nums; min-width: 12px; text-align: right;
  padding-left: 4px; border-left: 1px solid color-mix(in srgb, var(--ink-700) 25%, transparent);
}
.cal-cell .cs.s5 {
  background: color-mix(in srgb, var(--saffron-500) 18%, var(--surface));
  border-color: color-mix(in srgb, var(--saffron-500) 45%, var(--border));
  color: var(--ink-900); font-weight: 700;
}
.cal-cell .cs.s5 svg { color: var(--saffron-500); }
.cal-cell .cs.s4 {
  background: color-mix(in srgb, var(--saffron-400) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--saffron-400) 35%, var(--border));
  color: var(--ink-800);
}
.cal-cell .cs.s4 svg { color: var(--saffron-400); }
.cal-cell .cs.s3 svg { color: var(--ink-500); }

/* ---------- star filter (search) ---------- */
.star-filter {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 4px 0 14px;
}
.star-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--ink-700); font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.star-chip:hover { background: var(--paper-200); }
.star-chip svg { color: var(--saffron-500); }
.star-chip.active {
  background: var(--ink-900); border-color: var(--ink-900); color: var(--paper-50);
}
.star-chip.active svg { color: var(--saffron-400); }

/* ---------- date list table ---------- */
.table-wrap { border: 1px solid var(--border); background: var(--surface); }
.tbl { width:100%; border-collapse: collapse; font-size: 13px; font-family: var(--font-sans); }
.tbl th {
  background: var(--paper-200); color: var(--ink-700);
  font-size: 11px; font-weight: 600; letter-spacing:.08em; text-transform: uppercase;
  text-align: left; padding: 9px 14px; border-bottom: 1px solid var(--paper-500);
}
.tbl td { padding: 14px; border-bottom: 1px solid var(--border); color: var(--ink-800); vertical-align: top; }
.tbl tr.zebra { background: var(--paper-50); }
.tbl tr:hover { background: var(--paper-200); cursor: pointer; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .row-title {
  font-family: var(--font-serif); font-size: 16px; font-weight: 500; color: var(--ink-900);
  line-height: 1.35; margin-bottom: 4px;
}
.tbl .row-snip {
  font-family: var(--font-sans); font-size: 12.5px; color: var(--ink-600); line-height: 1.45;
}
.tbl .id { font-family: var(--font-mono); color: var(--ink-700); font-size: 12px; }

.empty {
  padding: 60px 20px; text-align: center; color: var(--ink-500); font-size: 13px;
  border: 1px dashed var(--border); background: var(--paper-50);
}

/* ---------- PIB item study material ---------- */
.item-article { max-width: 760px; }
.item-meta-row {
  display:flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12px; color: var(--ink-500); margin-bottom: 12px;
}
.item-meta-row .ext-link {
  margin-left: auto; color: var(--teal-600); text-decoration: underline; text-underline-offset: 2px;
  display:inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.item-meta-row .ext-link:hover { color: var(--teal-700); }
.item-title {
  font-family: var(--font-serif); font-size: 36px; font-weight: 600;
  color: var(--ink-900); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 16px;
}
.topics-row {
  display:flex; gap: 6px; align-items: center; flex-wrap: wrap;
  padding-bottom: 18px; margin-bottom: 24px; border-bottom: 1px solid var(--border);
}
.topics-row .eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-500); margin-right: 4px;
}

.item-body { font-family: var(--font-serif); }
.item-body .lede {
  font-size: 19px; line-height: 1.6; color: var(--ink-900);
  border-left: 2px solid var(--ink-900); padding-left: 16px;
  margin: 0 0 28px;
}
.item-body .study-h {
  font-family: var(--font-serif); font-size: 22px; font-weight: 600; color: var(--ink-900);
  line-height: 1.25; margin: 28px 0 10px; letter-spacing: -0.005em;
}
.item-body .study-p {
  font-family: var(--font-serif); font-size: 17px; line-height: 1.65; color: var(--ink-800);
  margin: 0 0 14px;
}
.item-body .study-ul {
  font-family: var(--font-serif); font-size: 17px; line-height: 1.65; color: var(--ink-800);
  margin: 0 0 16px; padding-left: 22px;
}
.item-body .study-ul li { margin-bottom: 6px; }
.item-body .study-source {
  background: var(--paper-50); border: 1px solid var(--border); border-left: 2px solid var(--teal-600);
  padding: 12px 14px; margin: 16px 0;
}
.item-body .study-source .ss-head {
  display:flex; gap: 6px; align-items:center;
  font-family: var(--font-sans); font-size: 10px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--teal-700); margin-bottom: 6px;
}
.item-body .study-source .ss-body {
  font-family: var(--font-serif); font-size: 14px; line-height: 1.5; color: var(--ink-800);
}
.item-body .study-fig { margin: 18px 0; }
.item-body .img-placeholder {
  border: 1px dashed var(--border); background: var(--paper-50);
  padding: 36px; text-align: center; display:flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 12px; color: var(--ink-500);
}
.item-body .study-fig figcaption {
  font-family: var(--font-sans); font-size: 12px; color: var(--ink-500); margin-top: 6px; text-align: center;
}

.try-cta {
  margin-top: 36px; padding: 22px 24px;
  display:flex; gap: 18px; align-items: center; justify-content: space-between;
  background: var(--ink-900); color: var(--paper-50); border-radius: 2px;
}
.try-cta .try-text .eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--saffron-400);
  margin-bottom: 4px;
}
.try-cta .try-title { font-family: var(--font-serif); font-size: 22px; font-weight: 600; line-height: 1.2; }
.try-cta .try-sub { font-size: 13px; color: var(--paper-300); margin-top: 4px; }
.try-cta .btn-primary { background: var(--paper-50); color: var(--ink-900); }
.try-cta .btn-primary:hover { background: var(--paper-200); }

/* ---------- questions ---------- */
.q-list { display:flex; flex-direction: column; gap: 18px; max-width: 820px; }
.q-block {
  display: grid; grid-template-columns: 56px 1fr; gap: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: 2px;
}
.q-block.revealed { border-color: var(--ink-700); }
.q-block .q-num {
  background: var(--paper-200); color: var(--ink-700);
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  padding: 18px 0; text-align: center; border-right: 1px solid var(--border);
}
.q-block .q-content { padding: 18px 22px 18px 22px; }
.q-stem { font-family: var(--font-serif); font-size: 18px; line-height: 1.6; color: var(--ink-900); font-weight: 400; }
.q-statements {
  margin: 10px 0 0; padding: 12px 16px 12px 36px;
  background: var(--paper-100); border-left: 2px solid var(--ink-700); border-radius: 2px;
  font-family: var(--font-serif); font-size: 16px; line-height: 1.55; color: var(--ink-800);
}
.q-statements li { margin: 4px 0; padding-left: 4px; }
.q-statements li::marker { font-family: var(--font-mono); font-weight: 600; color: var(--ink-700); }
.q-statements { font-family: var(--font-serif); font-size: 16px; line-height: 1.7; color: var(--ink-800); margin: 10px 0 0 22px; padding: 0; }
.q-statements li { margin-bottom: 2px; }
.q-prompt { font-family: var(--font-serif); font-size: 16px; line-height: 1.6; color: var(--ink-900); margin-top: 12px; font-weight: 500; }

.q-options { margin-top: 16px; display:flex; flex-direction: column; gap: 6px; }
.q-opt {
  display:flex; gap: 12px; align-items: flex-start;
  padding: 10px 12px; border: 1px solid var(--border); background: var(--surface); border-radius: 2px;
}
.q-opt .letter {
  display:inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border: 1px solid var(--ink-700);
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  color: var(--ink-900); border-radius: 2px; flex-shrink: 0; margin-top: 1px;
}
.q-opt .text { font-family: var(--font-serif); font-size: 15px; line-height: 1.55; color: var(--ink-800); }
.q-opt[role="button"]:hover { border-color: var(--saffron-500); }
.q-opt.selected {
  border-color: var(--saffron-500);
  border-left: 4px solid var(--saffron-500);
  padding-left: 9px;
  box-shadow: inset 0 0 0 1px var(--saffron-500);
}
.q-opt.selected .letter { background: var(--saffron-500); color: #fff; border-color: var(--saffron-500); }
.q-opt.correct { background: var(--success-100); border-color: var(--success-500); }
.q-opt.correct .letter { background: var(--success-500); color: var(--paper-50); border-color: var(--success-500); }
.q-opt.wrong { background: #fdecec; border-color: #c0392b; }
.q-opt.wrong .letter { background: #c0392b; color: var(--paper-50); border-color: #c0392b; }
.q-opt.wrong .tail { color: #c0392b; }
.q-opt .tail {
  margin-left: auto; font-family: var(--font-sans); font-size: 11px; font-weight: 500;
  color: var(--success-700); display:inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}

.q-actions { margin-top: 14px; }

.q-answer {
  margin-top: 16px; padding: 14px 16px;
  background: var(--paper-50); border: 1px solid var(--border); border-left: 2px solid var(--ink-900); border-radius: 2px;
}
.q-answer .eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-700); margin-bottom: 6px;
}
.q-answer p {
  font-family: var(--font-serif); font-size: 15px; line-height: 1.55; color: var(--ink-800); margin: 0;
}

.q-footer {
  display:flex; align-items: center; gap: 8px;
  margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border);
}

/* ---------- question meta pills + match list + sources ---------- */
.q-meta {
  display:flex; gap: 6px; flex-wrap: wrap; align-items: center;
  margin-bottom: 10px;
}
.q-meta-pill {
  font-family: var(--font-sans); font-size: 10.5px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 2px;
  background: var(--paper-200); color: var(--ink-700);
  white-space: nowrap;
}
.q-meta-pill.subject { background: var(--teal-50); color: var(--teal-700); }
.q-meta-pill.subtle  { background: transparent; color: var(--ink-500); padding-left: 0; padding-right: 0; }
.q-meta-pill.subtle::before { content: '· '; }

.match-tables {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin: 14px 0 4px;
}
.match-tbl {
  width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: 13.5px;
  background: var(--surface); border: 1px solid var(--border);
}
.match-tbl thead th {
  background: var(--paper-200); color: var(--ink-700);
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--border);
}
.match-tbl td {
  padding: 6px 10px; vertical-align: top; border-bottom: 1px solid var(--border);
  font-family: var(--font-serif); font-size: 14px; line-height: 1.45; color: var(--ink-800);
}
.match-tbl tr:last-child td { border-bottom: 0; }
.match-tbl td.k {
  width: 28px; font-family: var(--font-mono); font-size: 12px;
  color: var(--ink-700); font-weight: 600;
}

.q-stem { white-space: pre-wrap; }

.q-sources { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.q-sources .eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-700); margin-bottom: 8px;
}
.q-sources ul { list-style: none; padding: 0; margin: 0; display:flex; flex-direction: column; gap: 8px; }
.q-sources .src-line { display:flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.q-sources .src-id {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: var(--ink-700); padding: 1px 5px; background: var(--paper-200); border-radius: 2px;
}
.q-sources .src-title {
  font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--teal-700);
  text-decoration: underline; text-underline-offset: 2px; display:inline-flex; align-items: center; gap: 4px;
}
.q-sources .src-title:hover { color: var(--teal-700); }
.q-sources .src-snip {
  font-family: var(--font-serif); font-size: 13px; line-height: 1.5; color: var(--ink-700);
  margin-top: 2px; padding-left: 10px; border-left: 1px solid var(--border);
}

.tier {
  display:inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  padding: 1px 6px; border-radius: 2px; letter-spacing: .04em;
  color: var(--ink-700); background: var(--paper-200); border: 1px solid var(--border);
}
.tier .tier-dot { width: 5px; height: 5px; border-radius: 999px; background: var(--ink-700); }
.tier.tier-1 { color: var(--success-700); background: var(--success-100); border-color: var(--success-500); }
.tier.tier-1 .tier-dot { background: var(--success-500); }
.tier.tier-2 { color: var(--info-500); background: var(--info-100); border-color: var(--info-500); }
.tier.tier-2 .tier-dot { background: var(--info-500); }
.tier.tier-3 { color: var(--warning-500); background: var(--warning-100); border-color: var(--warning-500); }
.tier.tier-3 .tier-dot { background: var(--warning-500); }
.tier.tier-4 { color: var(--ink-700); }

/* ---------- markdown-rendered study material ---------- */
.study-md { font-family: var(--font-serif); }
.study-md h1 {
  font-family: var(--font-serif); font-size: 28px; font-weight: 600; line-height: 1.2;
  color: var(--ink-900); margin: 24px 0 10px; letter-spacing: -0.01em;
}
.study-md h2 {
  font-family: var(--font-serif); font-size: 22px; font-weight: 600; line-height: 1.25;
  color: var(--ink-900); margin: 28px 0 10px; letter-spacing: -0.005em;
  padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.study-md h3 {
  font-family: var(--font-serif); font-size: 18px; font-weight: 600; line-height: 1.3;
  color: var(--ink-900); margin: 22px 0 8px;
}
.study-md h4 {
  font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-700); margin: 18px 0 6px;
}
.study-md p {
  font-family: var(--font-serif); font-size: 16.5px; line-height: 1.65; color: var(--ink-800);
  margin: 0 0 12px;
}
.study-md ul, .study-md ol {
  font-family: var(--font-serif); font-size: 16.5px; line-height: 1.65; color: var(--ink-800);
  margin: 0 0 14px; padding-left: 22px;
}
.study-md li { margin-bottom: 4px; }
.study-md strong { color: var(--ink-900); font-weight: 600; }
.study-md em { font-style: italic; }
.study-md code {
  font-family: var(--font-mono); font-size: 13.5px; color: var(--ink-900);
  background: var(--paper-200); padding: 1px 4px; border-radius: 2px;
}
.study-md pre {
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5;
  background: var(--paper-200); border: 1px solid var(--border); border-radius: 2px;
  padding: 12px 14px; overflow-x: auto; margin: 0 0 14px;
}
.study-md blockquote {
  border-left: 2px solid var(--teal-600); background: var(--paper-50);
  padding: 8px 14px; margin: 0 0 14px;
  font-family: var(--font-serif); font-size: 15px; line-height: 1.55; color: var(--ink-800);
}
.study-md a { color: var(--teal-600); text-decoration: underline; text-underline-offset: 2px; }
.study-md a:hover { color: var(--teal-700); }
.study-md hr { border: 0; border-top: 1px solid var(--border); margin: 24px 0; }
.study-md table {
  width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: 13.5px;
  margin: 8px 0 16px;
}
.study-md table th {
  background: var(--paper-200); padding: 8px 12px; text-align: left;
  border-bottom: 1px solid var(--paper-500); font-weight: 600; color: var(--ink-700);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}
.study-md table td { padding: 8px 12px; border-bottom: 1px solid var(--border); color: var(--ink-800); vertical-align: top; }
.study-md-fallback {
  font-family: var(--font-mono); font-size: 13px; white-space: pre-wrap;
  background: var(--paper-50); padding: 12px; border: 1px solid var(--border);
}

/* ===========================================================
   MOBILE-ONLY COMPONENTS
   These classes are rendered only when viewport is 'mobile'
   (see Chrome.jsx / Home.jsx / PibQuestions.jsx), so they
   don't need media-query wrapping.
   =========================================================== */

/* ---- Mobile top bar (compact, 48px) ---- */
.topbar--m {
  height: 48px;
  padding: 0 8px;
  gap: 0;
}
.topbar--m .m-back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: transparent; border: 0; color: var(--ink-900);
  cursor: pointer; padding: 0;
}
.topbar--m .m-back:active { background: var(--paper-200); border-radius: 999px; }
.topbar--m .m-title {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 16px; font-weight: 600;
  text-align: center;
  color: var(--ink-900);
  letter-spacing: -0.005em;
  /* Truncate to a single line; back button + right spacer keep it centered */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar--m .m-right { width: 40px; flex-shrink: 0; }
.topbar--m.topbar--m-home { justify-content: flex-start; padding-left: 16px; gap: 10px; }
.topbar--m.topbar--m-home .m-title { text-align: left; font-family: var(--font-display); letter-spacing: 0.5px; font-size: 18px; }
.topbar--m .brand .brand-mark { width: 32px; height: 32px; }

/* ---- Bottom tab bar ---- */
.bottom-tabs {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: rgba(251, 248, 242, 0.97);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom, 0);
  z-index: 5;
}
.bt-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  height: 56px;
  cursor: pointer; text-decoration: none;
  color: var(--ink-500);
  -webkit-tap-highlight-color: transparent;
}
.bt-tab svg { stroke: currentColor; }
.bt-tab .bt-label {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.02em;
}
.bt-tab.active { color: var(--ink-900); }
.bt-tab:active { background: var(--paper-200); }

/* The shell reserves room for the bottom tabs */
.app--mobile { padding-bottom: 56px; padding-bottom: calc(56px + env(safe-area-inset-bottom, 0)); }

/* ---- Mobile hero "today" card ---- */
.hero {
  display: block; position: relative;
  background: var(--ink-900); color: var(--paper-50);
  border-radius: 4px;
  padding: 18px 18px 16px;
  margin: 4px 0 22px;
  cursor: pointer; text-decoration: none;
  overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--saffron-500);
}
.hero--skel { background: var(--paper-200); min-height: 140px; }
.hero .hero-eyebrow {
  font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--saffron-400); margin-bottom: 8px;
}
.hero .hero-date {
  display: flex; align-items: baseline; gap: 8px; line-height: 1; margin-bottom: 4px;
}
.hero .hero-day {
  font-family: var(--font-serif); font-size: 48px; font-weight: 600;
  letter-spacing: -0.02em;
}
.hero .hero-month {
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  color: var(--paper-300); text-transform: uppercase; letter-spacing: 0.04em;
}
.hero .hero-sub {
  font-size: 13px; color: var(--paper-300); margin-bottom: 14px;
}
.hero .hero-stats {
  display: flex; gap: 18px;
  padding-top: 12px; margin-top: 4px;
  border-top: 1px solid rgba(246,242,234,.16);
}
.hero .hero-stat-n {
  font-family: var(--font-serif); font-size: 24px; font-weight: 600;
  line-height: 1; letter-spacing: -0.01em;
  color: var(--paper-50);
}
.hero .hero-stat-l {
  font-size: 11px; color: var(--paper-300); margin-top: 2px;
}
.hero .hero-cta {
  position: absolute; right: 14px; bottom: 16px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  color: var(--saffron-400); letter-spacing: 0.02em;
}

/* ---- Mobile month rows (list, not grid) ---- */
.month-list { display: flex; flex-direction: column; }
.month-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border);
  cursor: pointer; text-decoration: none; color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.month-row:active { background: var(--paper-200); }
.month-row:last-child { border-bottom: 0; }
.month-row-left { flex: 1; min-width: 0; }
.month-row .m-label {
  font-family: var(--font-serif); font-size: 18px; font-weight: 600;
  color: var(--ink-900); line-height: 1.2; margin-bottom: 4px;
}
.month-row .m-meta {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-500);
  flex-wrap: wrap;
}
.month-row .m-sep { color: var(--ink-400); }
.month-row .m-star { display: inline-flex; align-items: center; gap: 3px; color: var(--ink-700); }
.month-row.current .m-label::before {
  content: '•'; color: var(--saffron-500); margin-right: 4px; font-size: 18px; line-height: 1;
}

/* ---- Mobile NCERT rows ---- */
.ncert-list { display: flex; flex-direction: column; }
.ncert-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border);
  cursor: pointer; text-decoration: none; color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.ncert-row:active { background: var(--paper-200); }
.ncert-row:last-child { border-bottom: 0; }
.ncert-row .n-dot { flex-shrink: 0; }
.ncert-row .ncert-row-text { flex: 1; min-width: 0; }
.ncert-row .n-label {
  font-family: var(--font-serif); font-size: 16px; font-weight: 600;
  color: var(--ink-900); line-height: 1.2;
}
.ncert-row .n-meta {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-500); margin-top: 2px;
}

/* ---- Mobile Questions carousel ---- */
.mq-wrap {
  display: flex; flex-direction: column;
  /* Stretch into the main-inner padding so the carousel feels full-bleed.
     main-inner adds 14px h-padding on mobile; we negate it here. */
  margin: -18px -14px 0;
}
.mq-top {
  position: sticky; top: 48px; z-index: 2;
  background: var(--paper-100);
  padding: 10px 14px 12px;
  border-bottom: 1px solid var(--border);
}
.mq-progress {
  height: 4px; background: var(--paper-300); border-radius: 999px;
  overflow: hidden; margin-bottom: 8px;
}
.mq-progress-fill {
  height: 100%; background: var(--saffron-500);
  transition: width .25s ease;
}
.mq-meta {
  display: flex; align-items: baseline; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-500);
}
.mq-meta .mq-count { color: var(--ink-900); font-weight: 600; font-size: 12px; }
.mq-meta .mq-src { color: var(--ink-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }

.mq-body {
  flex: 1; padding: 14px 14px 100px;        /* bottom space reserved for mq-bar + tabs */
}
.mq-body .q-block {
  grid-template-columns: 1fr;
  border-left: 0; border-right: 0; border-radius: 0;
  background: transparent; border-top: 0;
}
.mq-body .q-block .q-content { padding: 4px 0 0; }
.mq-body .q-stem { font-size: 17px; line-height: 1.55; color: var(--ink-900); }

/* Bottom action bar (sits above the BottomTabBar, below main scroll) */
.mq-bar {
  position: fixed; bottom: 56px; bottom: calc(56px + env(safe-area-inset-bottom, 0));
  left: 0; right: 0;
  display: grid; grid-template-columns: 48px 1fr 48px;
  align-items: center; gap: 8px;
  padding: 10px 14px;
  background: rgba(251, 248, 242, 0.97);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--border);
  z-index: 4;
}
.mq-bar-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  height: 44px; padding: 0 14px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--ink-900); font-family: var(--font-sans); font-size: 13.5px; font-weight: 500;
  border-radius: 2px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mq-bar-btn[disabled] {
  color: var(--ink-400); background: var(--paper-200); cursor: not-allowed;
}
.mq-bar-btn:active:not([disabled]) { background: var(--paper-200); }
.mq-bar-prev { padding: 0; }     /* icon-only side buttons */
.mq-bar-check {
  background: var(--ink-900); color: var(--paper-50); border-color: var(--ink-900);
}
.mq-bar-check.on {
  background: var(--paper-50); color: var(--ink-900); border-color: var(--ink-900);
}
.mq-bar-check:active { background: var(--ink-800); }

/* ===========================================================
   RESPONSIVE — tablet (≤1024px) and mobile (≤640px)
   =========================================================== */

/* ---- tablet ---- */
@media (max-width: 1024px) {
  .main-inner { padding: 24px 24px 60px; }
  .topbar { padding: 0 20px; gap: 16px; }
  .topbar .top-search { width: 220px; }

  /* Home grids: 4 → 2 */
  .months-grid, .ncert-grid { grid-template-columns: repeat(2, 1fr); }

  /* Last 7 days */
  .day-card { padding: 10px; min-height: 88px; }
  .day-card .day-num { font-size: 22px; }

  /* Calendar */
  .cal-cell { min-height: 116px; padding: 12px; gap: 8px; }
  .cal-cell .c-date { font-size: 14px; }
  .cal-cell .c-count { font-size: 32px; }
  .cal-cell .c-stars { gap: 5px; font-size: 11px; }
  .cal-cell .cs { padding: 2px 6px; }
  .cal-hcell { padding: 7px 8px; }

  .tbl td { padding: 10px 12px; }
  .page-head h1 { font-size: 28px; }
  .page-head h1.qh1 { font-size: 20px; }
  .item-title { font-size: 30px; }

  /* Bigger tap targets on tablet too */
  .btn { padding: 9px 14px; font-size: 14px; }
}

/* ---- mobile ---- */
@media (max-width: 640px) {
  /* App-wide */
  body { -webkit-tap-highlight-color: transparent; }
  .main-inner { padding: 18px 14px 24px; max-width: 100%; }

  /* Inputs ≥16px to prevent iOS zoom-on-focus */
  input[type="email"],
  input[type="password"],
  input[type="text"],
  input[type="date"],
  input[type="search"],
  textarea, select { font-size: 16px; }

  /* Hide the desktop topbar nav (mobile renders a different topbar entirely) */
  /* (desktop .topbar isn't rendered when viewport=mobile, but keep this as a safety net) */
  .topbar:not(.topbar--m) .top-nav,
  .topbar:not(.topbar--m) .top-search,
  .topbar:not(.topbar--m) .spacer { display: none; }

  /* Breadcrumbs become redundant once we have a back chevron + title */
  .crumbs { display: none; }

  /* Page head — much tighter, no big eyebrow */
  .page-head {
    flex-direction: column; align-items: flex-start; gap: 8px;
    padding-bottom: 14px; margin-bottom: 16px;
  }
  .page-head .eyebrow {
    font-size: 10.5px; letter-spacing: .1em;
  }
  .page-head h1 {
    font-family: var(--font-serif); font-size: 26px; line-height: 1.2;
    letter-spacing: -0.01em; font-weight: 600;
  }
  .page-head h1.qh1 { font-size: 19px; }
  .page-head .actions { width: 100%; flex-wrap: wrap; gap: 6px; }

  /* Section heads */
  .section-head { gap: 10px; margin-bottom: 10px; }
  .section-head .eyebrow {
    font-size: 10.5px; letter-spacing: .1em;
  }
  .section-head .section-title {
    font-size: 14px; font-weight: 600; white-space: normal;
    font-family: var(--font-sans);
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--ink-700);
  }
  /* The eyebrow is redundant when section-title is already a small label */
  .section-head .eyebrow { display: none; }
  .home-section { margin-bottom: 28px; }

  /* Buttons — bigger tap target */
  .btn { padding: 11px 14px; font-size: 14px; min-height: 44px; }
  .btn-lg { padding: 14px 20px; font-size: 15px; min-height: 48px; }

  /* Last 7 days — horizontal swipe carousel */
  .last-seven {
    grid-template-columns: none;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 8px;
    margin: 0 -14px;
    padding: 0 14px 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .last-seven::-webkit-scrollbar { display: none; }
  .day-card {
    flex: 0 0 96px;
    scroll-snap-align: start;
    min-height: 88px;
    padding: 10px;
    border-radius: 4px;
  }
  .day-card .day-num { font-size: 22px; }

  /* Calendar — fits a thumb */
  .cal-wrap { margin: 0 -14px; border-left: 0; border-right: 0; }
  .cal-cell {
    min-height: 64px; padding: 5px 6px; gap: 2px;
  }
  .cal-cell .c-date { font-size: 10.5px; color: var(--ink-500); }
  .cal-cell .c-count { font-size: 17px; font-weight: 600; }
  .cal-cell .c-stars { display: none; }
  .cal-cell .c-empty { font-size: 12px; }
  .cal-hcell { padding: 6px 4px; font-size: 9.5px; letter-spacing: .04em; }
  .cal-legend {
    flex-wrap: wrap; gap: 10px; row-gap: 4px;
    font-size: 10.5px; padding: 8px 12px;
    margin: 0 -14px 12px; border-left: 0; border-right: 0;
  }

  /* PIB Date — full-bleed touch-friendly cards */
  .table-wrap { border: 0; background: transparent; margin: 0 -14px; }
  .tbl, .tbl thead, .tbl tbody, .tbl tr, .tbl td { display: block; }
  .tbl { background: transparent; }
  .tbl thead { display: none; }
  .tbl tr {
    position: relative;
    background: var(--surface);
    padding: 14px 36px 14px 14px;
    margin-bottom: 1px;
    border: 0; border-bottom: 1px solid var(--border);
    border-radius: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .tbl tr:active { background: var(--paper-200); }
  .tbl tr.zebra { background: var(--surface); }
  .tbl tr:hover { background: var(--surface); }
  .tbl tr:active { background: var(--paper-200); }
  .tbl td { padding: 0; border-bottom: 0; }
  .tbl td:first-child { margin-bottom: 6px; }
  .tbl td:nth-child(3) {
    font-family: var(--font-mono); font-size: 11px; color: var(--ink-500); margin-top: 6px;
  }
  .tbl td:last-child {
    position: absolute; top: 50%; right: 14px;
    transform: translateY(-50%);
    color: var(--ink-400);
  }
  .tbl .row-title { font-size: 15px; line-height: 1.3; }
  .tbl .row-snip { font-size: 12.5px; margin-top: 4px; }

  /* PIB Item — full-bleed reading + sticky bottom CTA */
  .item-article { max-width: 100%; }
  .item-title { font-size: 24px; line-height: 1.2; margin-bottom: 12px; }
  .item-meta-row { font-size: 11px; gap: 6px; row-gap: 4px; margin-bottom: 14px; }
  .item-meta-row .ext-link { margin-left: 0; }
  .topics-row { padding-bottom: 14px; margin-bottom: 18px; }

  .item-body .lede { font-size: 16.5px; padding-left: 12px; margin-bottom: 22px; }
  .item-body .study-md h1 { font-size: 22px; margin: 18px 0 8px; }
  .item-body .study-md h2 { font-size: 18px; margin: 22px 0 8px; padding-bottom: 4px; }
  .item-body .study-md h3 { font-size: 16px; margin: 18px 0 6px; }
  .item-body .study-md p,
  .item-body .study-md ul,
  .item-body .study-md ol { font-size: 15px; line-height: 1.6; }
  .item-body .study-md table { font-size: 12px; }
  .item-body .study-md table th,
  .item-body .study-md table td { padding: 6px 8px; }

  /* The "Try N questions" CTA sticks above the bottom tab bar */
  .try-cta {
    position: fixed;
    left: 0; right: 0;
    bottom: 56px; bottom: calc(56px + env(safe-area-inset-bottom, 0));
    margin: 0;
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 0;
    border-top: 1px solid rgba(246,242,234,.16);
    z-index: 4;
  }
  .try-cta .eyebrow { display: none; }
  .try-cta .try-text .try-title { font-size: 14px; }
  .try-cta .try-text .try-sub   { display: none; }
  .try-cta .btn { min-height: 42px; padding: 10px 14px; flex-shrink: 0; }
  /* Make room for the sticky CTA so the last paragraph isn't covered */
  .item-article { padding-bottom: 72px; }

  /* Questions — desktop layout is replaced by .mq-wrap rendered by JSX */
  .q-list { display: none; }
  .q-footer { display: none; }
}

/* ---- very small phones ---- */
@media (max-width: 380px) {
  .topbar--m .m-title { font-size: 15px; }
  .topbar--m.topbar--m-home .m-title { font-size: 17px; }
  .hero .hero-day { font-size: 42px; }
  .day-card { flex: 0 0 90px; padding: 8px; }
  .cal-cell { min-height: 58px; padding: 4px 5px; }
  .cal-cell .c-count { font-size: 15px; }
  .item-title { font-size: 22px; }
  .page-head h1 { font-size: 22px; }
}

/* ---------- Site footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--paper-50);
  color: var(--ink-700);
  font-family: var(--font-sans);
  font-size: 13px;
}
.site-footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
}
.sf-brand { display: inline-flex; align-items: baseline; gap: 8px; color: var(--ink-800); }
.sf-brand-name { font-weight: 600; }
.sf-brand-sep { color: var(--ink-500); }
.sf-brand-tag { color: var(--ink-600); }
.sf-links { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sf-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--surface); color: var(--ink-800);
  border: 1px solid var(--border);
  text-decoration: none; font-weight: 500;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.sf-link:hover { border-color: var(--ink-700); color: var(--ink-900); }
.sf-link:focus-visible { outline: 2px solid var(--saffron-500); outline-offset: 1px; }
.sf-link svg { display: block; }
.sf-link--wa:hover { border-color: #25D366; color: #128C7E; }

.app--mobile .site-footer-inner {
  padding: 10px 14px; gap: 10px;
  flex-wrap: nowrap;            /* force single line */
}
/* No extra padding needed — .app--mobile already reserves 56px+safe-area at the
   bottom of the shell for the floating BottomTabBar. */
.app--mobile .sf-brand { font-size: 12px; min-width: 0; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.app--mobile .sf-brand-sep,
.app--mobile .sf-brand-tag { display: none; }      /* keep just the wordmark */
.app--mobile .sf-links { gap: 6px; flex-shrink: 0; }
.app--mobile .sf-link { padding: 6px; border-radius: 999px; }
.app--mobile .sf-link span { display: none; }      /* icon-only on mobile */
/* Hide on mobile question screen — the floating action bar already occupies that zone. */
.app--mobile.app--screen-pibQuestions .site-footer { display: none; }