/* Report and project pages as an app screen on phones (2026-11-11, owner).
   js/m-app.js adds html.m-app; computers are not concerned. */
@media (max-width: 767.98px) {
  html.m-app body { background: #f2f4f7; }
  html.m-app header.header, html.m-app footer.footer { display: none !important; }
  html.m-app main { padding-top: 56px !important; padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important; }

  /* App bar. */
  .mab { position: fixed; z-index: 160; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: .25rem; height: 56px; padding: 0 .35rem; background: #fff; box-shadow: 0 1px 0 #e6eaf0, 0 2px 8px rgba(11, 42, 69, .06); }
  .mab__btn { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: #0b2a45; cursor: pointer; }
  .mab__btn:active { background: #eef2f7; }
  .mab__t { display: grid; flex: 1; min-width: 0; line-height: 1.2; }
  .mab__t strong { overflow: hidden; color: #0b2a45; font-size: 1.02rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
  .mab__t small { overflow: hidden; color: #6b7f92; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }

  /* The header as a compact card. */
  html.m-app :is(.sr-pub__hero, .ob-pj__hero) { min-height: 0 !important; margin: 0 !important; border-radius: 0 0 22px 22px; }
  html.m-app :is(.sr-pub__hero, .ob-pj__hero) .ob-pj__hero-inner { padding: .9rem 1rem 1rem !important; }
  html.m-app .srh { display: block !important; }
  html.m-app .srh .ob-pj__back, html.m-app .srh .srh__ref, html.m-app .srh .srh__actions, html.m-app .srh .ob-pj__actions { display: none !important; }
  html.m-app .srh .ob-pj__kicker { margin: 0 0 .35rem !important; font-size: .7rem !important; line-height: 1.35; }
  html.m-app .srh .ob-pj__title { display: -webkit-box; margin: 0 0 .5rem !important; overflow: hidden; font-size: 1.22rem !important; line-height: 1.3 !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
  html.m-app .srh .ob-pj__title.is-open { display: block; }
  html.m-app .srh .ob-pj__summary { margin: 0 0 .7rem !important; padding: .45rem .65rem !important; font-size: .8rem !important; line-height: 1.45 !important; }
  html.m-app .srh__track { margin: .3rem 0 .8rem !important; }
  html.m-app .srh__track ol { font-size: .8rem; }
  /* Key figures as one row to swipe. */
  html.m-app .srh__panel { display: flex !important; align-items: stretch; gap: .5rem; margin: 0 -1rem !important; padding: .1rem 1rem .2rem !important; overflow-x: auto; border: 0 !important; background: none !important; box-shadow: none !important; scroll-snap-type: x proximity; scrollbar-width: none; }
  html.m-app .srh__panel::-webkit-scrollbar { display: none; }
  html.m-app .srh__panel > * { flex: none; margin: 0 !important; scroll-snap-align: start; }
  html.m-app .srh__live { display: none !important; }
  html.m-app .srh__ring { display: flex !important; align-items: center; gap: .55rem; width: auto !important; padding: .55rem .8rem .55rem .55rem !important; border-radius: 16px; background: rgba(255, 255, 255, .1); }
  html.m-app .srh__ring b { width: 52px !important; height: 52px !important; font-size: 1.05rem !important; }
  html.m-app .srh__ring span { max-width: 7rem; font-size: .74rem; line-height: 1.25; }
  html.m-app .srh__rule { display: flex !important; align-items: center; max-width: 13rem; padding: .55rem .8rem !important; border-radius: 16px !important; font-size: .76rem !important; line-height: 1.3 !important; }
  html.m-app .srh__sig { display: contents !important; }
  html.m-app .srh__sig li { display: grid !important; align-content: center; min-width: 6.5rem; padding: .55rem .8rem !important; border-radius: 16px !important; }
  html.m-app .srh__sig li b { font-size: 1.05rem !important; }
  html.m-app .srh__sig li span { font-size: .68rem !important; }

  /* Tabs. */
  html.m-app .ob-pj__body { padding: 0 !important; }
  html.m-app .ob-pj__body > .sr-steps, html.m-app .ob-pj__body > .ob-pj__kpis { display: none !important; }
  .mtabs { position: sticky; z-index: 120; top: 56px; display: flex; gap: .25rem; margin: .75rem .75rem .25rem; padding: .25rem; border-radius: 14px; background: #fff; box-shadow: 0 1px 3px rgba(11, 42, 69, .1); overflow-x: auto; scrollbar-width: none; }
  .mtabs button { flex: 1 0 auto; min-height: 40px; padding: 0 .8rem; border: 0; border-radius: 11px; background: none; color: #475569; font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
  .mtabs button[aria-selected="true"] { background: #0077be; color: #fff; box-shadow: 0 2px 6px rgba(0, 119, 190, .3); }

  /* Cards as app cards. */
  html.m-app .ob-pj__grid, html.m-app .ob-pj__main, html.m-app .ob-pj__aside { display: block !important; margin: 0 !important; padding: 0 !important; }
  html.m-app :is(.ob-pj__card, .sra)[data-mtab] { margin: .75rem !important; padding: 1rem !important; border: 0 !important; border-radius: 18px !important; background: #fff !important; box-shadow: 0 1px 3px rgba(11, 42, 69, .08) !important; }
  html.m-app :is(.ob-pj__card, .sra)[hidden] { display: none !important; }
  html.m-app .ob-pj__card h2, html.m-app .sra h2 { font-size: 1.05rem !important; }
  html.m-app :is(.ob-pj__card, .sra) { font-size: .95rem; line-height: 1.55; }
  html.m-app .sra__head { gap: .6rem !important; }
  html.m-app .sra__avatar { width: 40px !important; height: 40px !important; font-size: .85rem !important; }
  html.m-app .sra__chips { display: flex !important; flex-wrap: nowrap !important; gap: .45rem; margin-inline: -1rem !important; padding-inline: 1rem !important; overflow-x: auto; scrollbar-width: none; }
  html.m-app .sra__chips > * { flex: none; }
  html.m-app .sra__box { padding: .85rem !important; border-radius: 14px !important; }
  html.m-app .sra__act .btn { width: 100%; justify-content: center; }

  /* Action bar above the tab bar. */
  .mact { position: fixed; z-index: 140; left: .75rem; right: .75rem; bottom: calc(64px + .6rem + env(safe-area-inset-bottom, 0px)); display: flex; gap: .5rem; }
  .mact__main { display: flex; flex: 1; align-items: center; justify-content: center; gap: .5rem; min-width: 0; height: 50px; padding: 0 1rem; border-radius: 25px; background: #f2c200; color: #1f1300 !important; font-weight: 800; font-size: .9rem; text-decoration: none !important; box-shadow: 0 4px 14px rgba(11, 42, 69, .22); }
  .mact__main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mact__main svg { flex: none; width: 20px; height: 20px; }
  .mact__icon { display: inline-grid; place-items: center; flex: none; width: 50px; height: 50px; border-radius: 50%; background: #fff; color: #0b2a45 !important; box-shadow: 0 4px 14px rgba(11, 42, 69, .18); }
  .mact__icon--wa { background: #25d366; color: #fff !important; }
  .mapp-toast { position: fixed; z-index: 200; left: 50%; bottom: calc(140px + env(safe-area-inset-bottom, 0px)); padding: .55rem 1rem; border-radius: 20px; background: #0b2a45; color: #fff; font-size: .85rem; transform: translateX(-50%); }
}
@media (max-width: 767.98px) {
  html.m-app .srh__rule { display: block !important; max-width: 12rem; white-space: normal; }
  html.m-app .srh__rule b { display: inline !important; }
  html.m-app :is(.sr-pub__hero, .ob-pj__hero) .ob-pj__hero-inner { padding-top: .75rem !important; }
}
@media (max-width: 767.98px) {
  html.m-app .sra__head { display: flex !important; flex-direction: row !important; align-items: center !important; text-align: left !important; }
  html.m-app .sra__head h2 { margin: 0 !important; }
  html.m-app .sra__head p { margin: .15rem 0 0 !important; font-size: .82rem !important; line-height: 1.4 !important; }
}