/* ==========================================================================
   app-screens.css — per-screen app layouts for phones and tablets (< 1200px)
   docs/RESPONSIVE_APP_UI_PLAN.md §12

   Enqueued with media="(max-width: 1199.98px)" and scoped under body.em-app,
   like app-mode.css (which owns the chrome). This file turns each screen's
   stacked desktop sections into app patterns: grouped lists, horizontal
   carousels, sticky filter chips and compact cards.

   Phone-only patterns sit in (max-width: 599px). 600-767px (foldables, small
   Android tablets) already has room for two columns, so it gets them.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared: page surface
   The theme paints most page bodies white edge to edge. An app screen is a
   tinted canvas with white cards on it, which is what makes cards read as
   tappable objects rather than boxes drawn on paper.
   -------------------------------------------------------------------------- */
.em-app .page-body.home-section-white,
.em-app .archive-body,
.em-app .learn-main {
  background: transparent !important;
}

.em-app .page-body {
  padding-top: 8px !important;
}

/* Horizontal chip rows: native momentum scrolling, no scrollbar, and the
   first and last chip line up with the page gutter. */
.em-app .learn-tabs-inner,
.em-app .emhp-dock-list,
.em-app .emhp-chips {
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.em-app .learn-tabs-inner::-webkit-scrollbar,
.em-app .emhp-dock-list::-webkit-scrollbar,
.em-app .emhp-chips::-webkit-scrollbar {
  display: none;
}

/* Cards respond to the press itself - the cue that something is tappable,
   which a touch screen cannot give with hover. */
.em-app .tutor-course-card,
.em-app .learn-card,
.em-app .emhp-lib-card,
.em-app .emhp-course,
.em-app .emhp-dock-item {
  transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}

.em-app .tutor-course-card:active,
.em-app .learn-card:active,
.em-app .emhp-lib-card:active,
.em-app .emhp-course:active,
.em-app .emhp-dock-item:active {
  transform: scale(.98);
}

@media (hover: none) {
  /* Hover lifts stick after a tap on touch screens (the element keeps
     :hover until something else is tapped). */
  .em-app .tutor-course-card:hover,
  .em-app .learn-card:hover,
  .em-app .emhp-lib-card:hover,
  .em-app .emhp-course:hover {
    transform: none;
  }
}

/* ==========================================================================
   Courses archive
   ========================================================================== */

/* Phone: a list of compact rows - thumbnail left, details right - instead of
   one 560px-tall card per screen. Seven courses now fit in about two screens
   rather than eight. */
@media (max-width: 599px) {
  .em-app .course-archive-page .tutor-course-list {
    display: flex !important;
    flex-direction: column;
    gap: 10px !important;
    margin: 0 !important;
  }

  .em-app .course-archive-page .tutor-course-list > * {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .em-app .course-archive-page .tutor-course-card {
    position: relative;
    display: grid !important;
    grid-template-columns: 108px minmax(0, 1fr);
    grid-template-areas:
      "thumb body"
      "thumb foot";
    grid-template-rows: 1fr auto;
    column-gap: 12px;
    row-gap: 6px;
    height: auto !important;
    min-height: 0 !important;
    padding: 10px !important;
    border-radius: var(--app-radius) !important;
    border: 1px solid var(--app-line) !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03) !important;
    overflow: hidden;
  }

  .em-app .course-archive-page .tutor-course-card .tutor-course-thumbnail {
    grid-area: thumb;
    position: relative;
    align-self: start;
    width: 108px;
    height: 108px;
    margin: 0 !important;
    border-radius: 12px;
    overflow: hidden;
    background: #eef4ee;
  }

  .em-app .course-archive-page .tutor-course-thumbnail .em-course-thumb-link,
  .em-app .course-archive-page .tutor-course-thumbnail .tutor-ratio {
    position: absolute !important;
    inset: 0;
    height: 100% !important;
    padding: 0 !important;
  }

  .em-app .course-archive-page .tutor-course-thumbnail .tutor-ratio::before {
    display: none !important;
  }

  .em-app .course-archive-page .tutor-course-thumbnail img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 0 !important;
  }

  .em-app .course-archive-page .em-course-level {
    top: 6px !important;
    left: 6px !important;
    padding: 2px 7px !important;
    font-size: 9px !important;
    letter-spacing: .04em;
  }

  .em-app .course-archive-page .tutor-course-bookmark {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    z-index: 2;
  }

  .em-app .course-archive-page .tutor-course-bookmark .tutor-iconic-btn {
    width: 36px !important;
    height: 36px !important;
    background: transparent !important;
  }

  .em-app .course-archive-page .tutor-card-body {
    grid-area: body;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 2px 30px 0 0 !important;
  }

  /* Unrated courses show five empty stars - noise in a dense list. */
  .em-app .course-archive-page .tutor-course-ratings,
  .em-app .course-archive-page .em-course-author {
    display: none !important;
  }

  .em-app .course-archive-page .tutor-course-name {
    margin: 0 !important;
    font-size: .9375rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* The title link covers the whole row, so the row is one big tap target.
     The bookmark and the footer button sit above it (z-index). */
  .em-app .course-archive-page .tutor-course-name a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .em-app .course-archive-page .em-course-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px !important;
    margin: 0 !important;
  }

  .em-app .course-archive-page .em-course-stat {
    padding: 0 !important;
    background: none !important;
    font-size: .75rem !important;
    color: var(--app-muted) !important;
  }

  .em-app .course-archive-page .tutor-card-footer {
    grid-area: foot;
    position: relative;
    z-index: 2;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
  }

  .em-app .course-archive-page .tutor-card-footer .tutor-btn {
    width: auto !important;
    min-height: 34px !important;
    height: 34px;
    padding: 0 14px !important;
    border-radius: 17px !important;
    font-size: .8125rem !important;
  }

  .em-app .course-archive-page .tutor-card-footer .list-item-button {
    display: flex;
  }

  .em-app .course-archive-page .tutor-card-footer .tutor-btn[class*="btn-block"] {
    display: inline-flex !important;
  }
}

/* 600-767: two columns of vertical cards. */
@media (min-width: 600px) and (max-width: 767px) {
  .em-app .course-archive-page .tutor-course-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .em-app .course-archive-page .tutor-course-list > * {
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* ==========================================================================
   Library (blog index and category archives)
   ========================================================================== */

/* Category tabs stick under the top bar, like a segmented filter in an app.
   The tabs travel with the bar when it hides on scroll-down. */
.em-app .learn-tabs {
  position: sticky;
  top: var(--topbar-total);
  z-index: 50;
  margin: 0 !important;
  padding: 0 !important;
  background: rgba(246, 248, 246, .94) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--app-line) !important;
  transition: top var(--dur-base) var(--ease-standard);
}

.em-app.admin-bar .learn-tabs {
  top: calc(var(--topbar-total) + 46px);
}

.em-app.em-appbar-hidden .learn-tabs {
  top: 0;
}

.em-app .learn-tabs-inner {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px var(--gutter) !important;
  max-width: none !important;
  border: 0 !important;
}

.em-app .learn-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px !important;
  border: 1px solid var(--app-line) !important;
  border-radius: 18px !important;
  background: #fff !important;
  color: #374151 !important;
  font-size: .8125rem !important;
  font-weight: 600 !important;
  white-space: nowrap;
  box-shadow: none !important;
}

.em-app .learn-tab::after {
  display: none !important;
}

.em-app .learn-tab.is-active {
  background: var(--app-ink) !important;
  border-color: var(--app-ink) !important;
  color: #fff !important;
}

.em-app .learn-tab.is-active .learn-tab-count {
  background: rgba(255, 255, 255, .2) !important;
  color: #fff !important;
}

.em-app .learn-main {
  padding-top: 12px !important;
}

@media (max-width: 599px) {
  .em-app .learn-grid {
    display: flex !important;
    flex-direction: column;
    gap: 10px !important;
  }

  .em-app .learn-card {
    margin: 0 !important;
    border-radius: var(--app-radius) !important;
    border: 1px solid var(--app-line) !important;
    box-shadow: none !important;
  }

  .em-app .learn-card-body {
    padding: 14px 16px !important;
  }

  .em-app .learn-card-badge {
    margin-bottom: 6px !important;
  }

  .em-app .learn-card-title {
    margin: 0 0 4px !important;
    font-size: 1rem !important;
    line-height: 1.35 !important;
  }

  .em-app .learn-card-excerpt {
    margin: 0 0 8px !important;
    font-size: .8125rem !important;
    line-height: 1.5 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .em-app .learn-card-meta {
    font-size: .75rem !important;
  }
}

@media (min-width: 600px) {
  .em-app .learn-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
}

/* ==========================================================================
   Home
   10,400px tall on a 375px phone before this: a marketing landing page read
   top to bottom. As an app home it becomes a short welcome with search, a
   row of quick tools, and swipeable shelves for the library and courses.
   ========================================================================== */

/* --- Welcome (was the 758px hero) ----------------------------------------- */
body.em-app .hero-section {
  min-height: 0 !important;
  padding: 18px var(--gutter) 22px !important;
  margin: 0 !important;
  background: var(--app-bg) !important;
  text-align: left !important;
}

body.em-app .hero-section .hero-blob,
body.em-app .hero-section .hero-dot-grid,
body.em-app .hero-section .hero-appfield,
body.em-app .hero-section .hero-scrim,
body.em-app .hero-section .hero-visual,
body.em-app .hero-section .hero-kicker,
body.em-app .hero-section .hero-stats {
  display: none !important;
}

body.em-app .hero-section .hero-inner {
  display: block !important;
  max-width: 1100px !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

body.em-app .hero-section .hero-content {
  display: flex !important;
  flex-direction: column;
  align-items: stretch !important;
  max-width: 640px !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

body.em-app .hero-section .hero-title {
  order: 1;
  margin: 0 0 6px !important;
  font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -.025em !important;
  text-align: left !important;
}

body.em-app .hero-section .hero-title br {
  display: none;
}

body.em-app .hero-section .hero-desc {
  order: 2;
  margin: 0 0 16px !important;
  max-width: 52ch;
  font-size: .9375rem !important;
  line-height: 1.5 !important;
  color: var(--app-muted) !important;
  text-align: left !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Search is the first thing an app home offers. */
body.em-app .hero-section .hero-search {
  order: 3;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 14px !important;
}

body.em-app .hero-section .hero-ctas {
  order: 4;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 10px !important;
  margin: 0 !important;
}

body.em-app .hero-section .hero-ctas > * {
  width: 100% !important;
  min-height: 46px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  font-size: .875rem !important;
  justify-content: center;
  white-space: nowrap;
}

@media (min-width: 600px) {
  body.em-app .hero-section .hero-ctas {
    grid-template-columns: auto auto;
    justify-content: start;
  }
}

/* --- Quick tools (the dock) ----------------------------------------------- */
body.em-app .emhp-dock {
  margin: 0 !important;
  padding: 0 0 6px;
}

body.em-app .emhp-dock .emhp-wrap {
  padding: 0 !important;
}

body.em-app .emhp-dock-list {
  grid-auto-columns: 84px;
  gap: 8px;
  padding: 2px var(--gutter) 10px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  scroll-padding: 0 var(--gutter);
}

body.em-app .emhp-dock-item {
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: none !important;
  white-space: normal;
  text-align: center;
}

body.em-app .emhp-dock-icon {
  display: grid !important;
  place-items: center;
  width: 60px !important;
  height: 60px !important;
  margin: 0 auto;
  border-radius: 18px !important;
  background: #fff !important;
  border: 1px solid var(--app-line);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .04);
}

body.em-app .emhp-dock-item > span:not(.emhp-dock-icon) {
  display: flex;
  flex-direction: column;
  align-items: center;
}

body.em-app .emhp-dock-item > span:not(.emhp-dock-icon) > *:not(:first-child) {
  display: none;
}

body.em-app .emhp-dock-item > span:not(.emhp-dock-icon) > :first-child {
  font-size: .75rem !important;
  font-weight: 600;
  line-height: 1.25;
  color: var(--app-ink);
}

/* --- Sections become shelves ---------------------------------------------- */
body.em-app .emhp-section {
  padding: 26px 0 !important;
  scroll-margin-top: calc(var(--topbar-total) + 8px);
}

body.em-app .emhp-section--tint {
  background: transparent;
  border: 0;
}

body.em-app .emhp-wrap {
  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !important;
}

body.em-app .emhp-head {
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 14px;
}

body.em-app .emhp-eyebrow {
  display: none;
}

body.em-app .emhp-title {
  margin: 0 0 4px !important;
  font-size: clamp(1.25rem, 1.1rem + .8vw, 1.625rem) !important;
  line-height: 1.2 !important;
  letter-spacing: -.015em !important;
}

body.em-app .emhp-lede {
  margin: 0 !important;
  font-size: .875rem !important;
  line-height: 1.5 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.em-app .emhp-head .emhp-link {
  flex: 0 0 auto;
  font-size: .875rem;
  white-space: nowrap;
}

body.em-app .emhp-split {
  gap: 18px;
}

/* Decorative mock-ups (aria-hidden quiz card) add a screen of scrolling and
   no information on a phone. */
@media (max-width: 767px) {
  body.em-app #test .emhp-split-visual,
  body.em-app #test .emhp-stats {
    display: none !important;
  }
}

/* --- Swipeable shelves: library and courses ------------------------------- */
@media (max-width: 1023px) {
  body.em-app .emhp-lib-grid,
  body.em-app .emhp-course-grid {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: min(80%, 320px);
    gap: 12px;
    margin: 0 calc(var(--gutter) * -1);
    padding: 2px var(--gutter) 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  body.em-app .emhp-lib-grid::-webkit-scrollbar,
  body.em-app .emhp-course-grid::-webkit-scrollbar {
    display: none;
  }

  body.em-app .emhp-lib-grid > *,
  body.em-app .emhp-course-grid > * {
    scroll-snap-align: start;
    min-width: 0;
  }

  body.em-app .emhp-lib-card {
    padding: 16px;
    border-radius: 18px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  body.em-app .emhp-lib-grid,
  body.em-app .emhp-course-grid {
    grid-auto-columns: 300px;
  }
}

/* --- Library shelf card: stacked header so the category name fits -------- */
@media (max-width: 1023px) {
  body.em-app .emhp-lib-top {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
  }

  body.em-app .emhp-lib-name {
    font-size: 1rem !important;
    line-height: 1.25 !important;
  }

  body.em-app .emhp-lib-blurb {
    font-size: .75rem !important;
    line-height: 1.35 !important;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* --- Phone: fold the long marketing blocks ------------------------------- */
@media (max-width: 767px) {
  /* App chips scroll sideways in one row instead of wrapping to four. */
  body.em-app #test .emhp-chips {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    margin: 0 calc(var(--gutter) * -1) 16px !important;
    padding: 0 var(--gutter) 2px !important;
  }

  body.em-app #test .emhp-chips > li {
    flex: 0 0 auto;
  }

  /* Eight shortcut collections as a two-column grid, not eight rows. */
  body.em-app .emhp-apps {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
  }

  body.em-app .emhp-apps > li {
    margin: 0 !important;
    min-width: 0;
  }

  body.em-app .emhp-apps a,
  body.em-app .emhp-apps > li > * {
    min-height: 44px;
    padding: 8px 12px !important;
    font-size: .8125rem !important;
  }

  /* Decorative mock-ups (all aria-hidden): the sample Q&A thread, the sample
     certificate and the sample AI chat. On a phone each is a screen of
     scrolling that tells the visitor nothing they can act on. */
  body.em-app .emhp-thread,
  body.em-app #certificates .emhp-split-visual,
  body.em-app .emhp-ai-chat,
  body.em-app .emhp-ai-hint {
    display: none !important;
  }

  /* How Q&A works: three illustrated steps become the two actions. */
  body.em-app .emhp-steps > li:not(.emhp-steps-cta) {
    display: none !important;
  }

  body.em-app .emhp-steps {
    margin: 0 !important;
    padding: 0 !important;
  }

  body.em-app .emhp-qa-intro,
  body.em-app .emhp-qa-intro .emhp-title,
  body.em-app .emhp-qa-intro .emhp-lede {
    text-align: left !important;
    margin-left: 0 !important;
  }

  body.em-app .emhp-section--dark,
  body.em-app .emhp-ai {
    border-radius: 0;
  }

  body.em-app .emhp-section--contact {
    padding-bottom: 8px !important;
  }
}

/* ==========================================================================
   Footer
   An app has no site footer: the tab bar and menu sheet carry navigation,
   and the sheet links the legal pages. What remains is the copyright line.
   ========================================================================== */
.em-app .site-footer .footer-main {
  display: none !important;
}

.em-app .site-footer {
  margin-top: 8px !important;
  background: transparent !important;
  border: 0 !important;
}

.em-app .site-footer .footer-bottom {
  background: transparent !important;
  border: 0 !important;
  padding: 18px var(--gutter) 22px !important;
}

.em-app .site-footer .footer-bottom,
.em-app .site-footer .footer-bottom * {
  color: #9ca3af !important;
  font-size: .75rem !important;
}

/* Grid items default to min-width:auto, so the one-row chip scroller above
   stretched its column to 938px instead of scrolling. */
body.em-app .emhp-split > * {
  min-width: 0;
}

/* ==========================================================================
   Shortcuts reference
   Each shortcut was a 170px centred card. As an app list row it is the
   action on top-left with both key combos on one compact line each - about
   twice as many shortcuts per screen.
   ========================================================================== */
@media (max-width: 767px) {
  .em-app .shortcuts-hero .shortcuts-search {
    margin-top: 14px !important;
  }

  .em-app .sc-tabs-wrap {
    position: sticky;
    top: var(--topbar-total);
    z-index: 40;
    background: rgba(246, 248, 246, .94) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    transition: top var(--dur-base) var(--ease-standard);
  }

  .em-app.em-appbar-hidden .sc-tabs-wrap {
    top: 0;
  }

  .em-app .sc-row {
    gap: 6px !important;
    padding: 12px 14px !important;
    text-align: left !important;
  }

  .em-app .sc-action {
    font-size: .875rem !important;
    line-height: 1.35;
    text-align: left !important;
    justify-content: flex-start !important;
    min-height: 0 !important;
  }

  .em-app .sc-keys {
    justify-content: flex-start !important;
    min-height: 0 !important;
  }

  .em-app .sc-keys::before {
    min-width: 40px !important;
    font-size: .6875rem !important;
    text-transform: uppercase;
    letter-spacing: .04em;
  }

  /* "Windows:" / "Mac:" - the shorter labels keep long combos on one line. */
  .em-app .sc-keys[data-label="Windows"]::before {
    content: "Win" !important;
  }

  .em-app .sc-keys[data-label="Mac"]::before {
    content: "Mac" !important;
  }

  .em-app .sc-keys kbd {
    padding: 2px 7px !important;
    font-size: .75rem !important;
  }
}

/* The "Read in the app" banner and the helper bot share the bottom corner;
   lift the bot while the banner shows. */
@media (max-width: 767px) {
  .em-app:has(#em-app-banner.is-visible) .emhb-root {
    bottom: calc(96px + var(--tabbar-total));
  }
}

/* --- Tablet landscape refinements ----------------------------------------- */
/* The hero h1 reserves a fixed height for its typewriter effect; in the
   compact welcome that left a blank band under the title. */
body.em-app .hero-section .hero-title {
  height: auto !important;
  min-height: 0 !important;
}

/* The sidebar takes 232px, so at 1024-1099 three course columns came out
   155px wide. Two columns until there is room for three. */
@media (min-width: 1024px) and (max-width: 1099px) and (min-height: 501px) {
  .em-app .course-archive-page .tutor-course-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* At 320-359px two side-by-side CTAs do not fit their labels; stack them.
   width/max-width also undo the theme's wider-than-container CTA row. */
body.em-app .hero-section .hero-ctas {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}

@media (max-width: 359px) {
  body.em-app .hero-section .hero-ctas {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Q&A (excelman-qa): list, single question, ask form, categories, mine
   Base layout is the plugin's qa.css plus plugin-responsive.css; this turns
   it into app patterns. Scoped .em-app .em-qa so the plugin is unchanged
   anywhere app mode is off.
   ========================================================================== */
@media (max-width: 767px) {
  /* Search: one rounded field with the button inside it. */
  .em-app .em-qa-searchbox {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0 !important;
    padding: 4px 4px 4px 14px;
    border: 1px solid var(--app-line);
    border-radius: 14px;
    background: #fff;
  }

  .em-app .em-qa-searchbox input[type="search"] {
    height: 40px;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 16px !important;   /* below 16px iOS zooms the page on focus */
    outline: none;
  }

  .em-app .em-qa-searchbox .em-qa-btn {
    min-height: 40px;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: var(--app-tint) !important;
    color: var(--app-accent-ink) !important;
    font-size: .8125rem !important;
  }

  .em-app .em-qa-toolbar > .em-qa-btn--primary {
    min-height: 48px;
    border-radius: 14px !important;
    justify-content: center;
  }

  /* Sort tabs become pinned pill chips, as on the Library screen. */
  .em-app .em-qa-tabs {
    position: sticky;
    top: var(--topbar-total);
    z-index: 30;
    margin: 12px calc(var(--gutter) * -1) 10px !important;
    padding: 8px var(--gutter) !important;
    gap: 8px !important;
    border: 0 !important;
    background: rgba(246, 248, 246, .94);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    transition: top var(--dur-base) var(--ease-standard);
  }

  .em-app.em-appbar-hidden .em-qa-tabs {
    top: 0;
  }

  .em-app .em-qa-tab {
    min-height: 36px !important;
    padding: 0 14px !important;
    border: 1px solid var(--app-line) !important;
    border-radius: 18px !important;
    background: #fff;
    color: #374151 !important;
    font-size: .8125rem !important;
    font-weight: 600 !important;
  }

  .em-app .em-qa-tab.is-active {
    background: var(--app-ink) !important;
    border-color: var(--app-ink) !important;
    color: #fff !important;
  }

  /* Question rows: white cards, title first, the counts as a small line at
     the bottom instead of a 66px column eating a fifth of the width. */
  .em-app .em-qa-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .em-app .em-qa-item {
    position: relative;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 14px 16px !important;
    border: 1px solid var(--app-line) !important;
    border-radius: var(--app-radius);
    background: #fff;
  }

  .em-app .em-qa-item .em-qa-body {
    order: 1;
  }

  .em-app .em-qa-item .em-qa-stats {
    order: 2;
    flex-direction: row !important;
    flex: 0 0 auto !important;
    gap: 8px !important;
    text-align: left;
  }

  .em-app .em-qa-item .em-qa-stat {
    flex: 0 0 auto !important;
    flex-direction: row;
    align-items: baseline;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    background: #f4f6f4;
    border-color: transparent;
  }

  .em-app .em-qa-item .em-qa-stat strong {
    font-size: .8125rem;
  }

  .em-app .em-qa-item .em-qa-stat.is-accepted {
    background: var(--app-tint);
    border-color: transparent;
  }

  .em-app .em-qa-item .em-qa-title {
    margin: 0 0 4px !important;
    font-size: 1rem !important;
    line-height: 1.35 !important;
  }

  /* Whole card is the link; chips stay tappable above it. */
  .em-app .em-qa-item .em-qa-title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .em-app .em-qa-item .em-qa-chip {
    position: relative;
    z-index: 2;
  }

  .em-app .em-qa-item .em-qa-excerpt {
    margin: 0 0 8px !important;
    font-size: .8125rem !important;
    line-height: 1.5;
    color: var(--app-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .em-app .em-qa-byline {
    font-size: .75rem !important;
  }

  .em-app .em-qa-empty {
    padding: 32px 20px !important;
    border-radius: var(--app-radius) !important;
    background: #fff;
  }

  /* --- Single question and answers ------------------------------------- */
  .em-app .em-qa-single-title {
    font-size: clamp(1.375rem, 1.2rem + 1vw, 1.75rem) !important;
    line-height: 1.25 !important;
  }

  .em-app .em-qa-question,
  .em-app .em-qa-answer {
    padding: 16px !important;
    border: 1px solid var(--app-line) !important;
    border-radius: var(--app-radius) !important;
    background: #fff;
  }

  .em-app .em-qa-answer {
    margin-top: 10px !important;
  }

  .em-app .em-qa-answer.is-accepted {
    border-color: rgba(56, 142, 60, .45) !important;
    box-shadow: inset 3px 0 0 var(--app-accent);
  }

  /* Voting sits as a compact row under the post on phones (the plugin
     already orders it); pills rather than a tall column. */
  .em-app .em-qa-votecol {
    order: 2;
    justify-content: flex-start;
    padding-top: 10px;
    border-top: 1px solid var(--app-line);
  }

  .em-app .em-qa-prose pre,
  .em-app .em-qa-content pre {
    margin-left: -4px;
    margin-right: -4px;
    border-radius: 12px;
    font-size: .8125rem;
  }

  /* --- Forms (ask, answer) --------------------------------------------- */
  .em-app .em-qa-form input[type="text"],
  .em-app .em-qa-form input[type="search"],
  .em-app .em-qa-form select,
  .em-app .em-qa-form textarea {
    font-size: 16px !important;
    border-radius: 12px !important;
  }

  .em-app .em-qa-form input[type="text"],
  .em-app .em-qa-form select {
    min-height: 48px;
  }

  .em-app .em-qa-ask,
  .em-app .em-qa-answerform {
    padding: 16px !important;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius);
    background: #fff;
  }

  .em-app .em-qa-form-actions .em-qa-btn--primary {
    min-height: 50px;
    border-radius: 14px !important;
    font-size: 1rem !important;
  }

  /* --- Categories: two-up tiles --------------------------------------- */
  .em-app .em-qa-catgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .em-app .em-qa-catcard {
    padding: 14px !important;
    border-radius: var(--app-radius) !important;
  }

  .em-app .em-qa-catdesc {
    font-size: .75rem !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@media (max-width: 359px) {
  .em-app .em-qa-catgrid {
    grid-template-columns: 1fr !important;
  }
}

/* Tablets: questions as a two-column card grid. */
@media (min-width: 768px) {
  .em-app .em-qa-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .em-app .em-qa-item {
    padding: 16px !important;
    border: 1px solid var(--app-line) !important;
    border-radius: var(--app-radius);
    background: #fff;
  }
}

/* ==========================================================================
   Practice quiz (excel-man-ai: .em-tyk)
   The flow is already app-shaped (steps, tiles, sheets) - it mirrors the
   Flutter app. What it lacked on a phone was density and a reachable
   control bar.
   ========================================================================== */
@media (max-width: 767px) {
  /* The quiz sat inside the page's white content card, which took 32px of
     width and pushed the software grid down to one 280px tile per row. */
  .em-app .page-body:has(.em-tyk) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  .em-app .em-tyk {
    padding-left: var(--gutter) !important;
    padding-right: var(--gutter) !important;
  }

  .em-app .em-tyk-softgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .em-app .em-tyk-soft {
    padding: 12px !important;
    border-radius: 16px !important;
  }

  .em-app .em-tyk-soft-icon {
    width: 36px !important;
    height: 36px !important;
    margin-bottom: 8px !important;
    font-size: 17px !important;
  }

  .em-app .em-tyk-soft-name {
    font-size: .875rem !important;
  }

  .em-app .em-tyk-soft:active,
  .em-app .em-tyk-opt:active,
  .em-app .em-tyk-row:active {
    transform: scale(.98);
  }

  /* Question navigation (previous / next / submit) stays on screen above
     the tab bar, instead of after the last option where a long question
     pushes it out of reach. */
  .em-app .em-tyk-bottom {
    position: sticky;
    bottom: var(--tabbar-total);
    z-index: 20;
    margin: 18px calc(var(--gutter) * -1) 0 !important;
    padding: 10px var(--gutter) 12px !important;
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, .05);
  }

  .em-app .em-tyk-bottom-row1 {
    margin-bottom: 8px !important;
  }

  .em-app .em-tyk-bottom-row2 .em-tyk-btn {
    min-height: 48px;
    border-radius: 14px !important;
  }

  .em-app .em-tyk-opt {
    min-height: 52px;
    border-radius: 14px !important;
  }

  /* The quiz has its own controls in the corner; the helper bot over the
     answer options is in the way. */
  .em-app:has(.em-tyk-bottom) .emhb-root {
    display: none;
  }
}

/* ==========================================================================
   Dashboard (Tutor, wrapped in the theme's .em-dash-shell)
   - Tutor's own mobile footer nav (Dashboard / Quiz Attempts / Menu) sat on
     top of the app tab bar: two bottom bars. The tab bar's Account item and
     the dashboard's drawer button cover the same ground, so Tutor's goes.
   - The dashboard header becomes a sub-toolbar pinned under the app bar:
     section menu, section title, primary action. Its "back to website"
     arrow duplicated the tab bar.
   - Between 992 and 1199px style.css shows the dashboard rail as a fixed
     244px column - beside the app sidebar, which made two sidebars. In app
     mode it is a drawer at every width, as it already was below 992px.
   ========================================================================== */
.em-app #tutor-dashboard-footer-mobile {
  display: none !important;
}

.em-app .em-dash-topbar {
  top: var(--topbar-total) !important;
  z-index: 40 !important;
  min-height: 52px;
  padding: 6px var(--gutter) !important;
  background: rgba(246, 248, 246, .94) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--app-line) !important;
  transition: top var(--dur-base) var(--ease-standard);
}

.em-app.admin-bar .em-dash-topbar {
  top: calc(var(--topbar-total) + 46px) !important;
}

@media (min-width: 783px) {
  .em-app.admin-bar .em-dash-topbar {
    top: calc(var(--topbar-total) + 32px) !important;
  }
}

.em-app.em-appbar-hidden .em-dash-topbar {
  top: 0 !important;
}

.em-app .em-dash-back {
  display: none !important;
}

.em-app .em-dash-topbar-title {
  font-size: 1rem !important;
  font-weight: 700 !important;
}

.em-app .em-dash-drawer-toggle {
  display: inline-flex !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  background: #fff !important;
  border: 1px solid var(--app-line) !important;
}

.em-app .em-dash-topbar .em-dash-btn-primary {
  min-height: 38px;
  border-radius: 12px !important;
  font-size: .8125rem !important;
}

/* Rail as a drawer at every app width. */
.em-app .em-dash-shell .em-dash-rail {
  top: 0 !important;
  width: min(300px, 86vw) !important;
  z-index: calc(var(--z-sheet) + 5) !important;
  padding-top: var(--safe-top);
  transform: translateX(-100%);
  box-shadow: 0 0 40px rgba(0, 0, 0, .18);
  border-radius: 0 20px 20px 0;
}

.em-app .em-dash-shell.is-drawer-open .em-dash-rail {
  transform: none;
}

.em-app .em-dash-backdrop {
  z-index: calc(var(--z-sheet) + 4) !important;
}

.em-app .em-dash-main {
  margin-left: 0 !important;
}

.em-app .em-dash-rail-toggle {
  display: none !important;
}

/* A collapsed-rail cookie from a desktop visit must not strip the drawer's
   labels (style.css only undoes it below 992px). */
.em-app .em-dash-shell.is-collapsed .em-dash-brand-text,
.em-app .em-dash-shell.is-collapsed .em-dash-account-meta,
.em-app .em-dash-shell.is-collapsed .tutor-dashboard-menu-item-text,
.em-app .em-dash-shell.is-collapsed .em-dash-nav .tutor-dashboard-menu-divider-header {
  display: block !important;
}

.em-app .em-dash-shell.is-collapsed .em-dash-rail-top {
  flex-direction: row !important;
  padding: 0 14px !important;
}

.em-app .em-dash-shell.is-collapsed .em-dash .tutor-dashboard-menu-item-link,
.em-app .em-dash-shell.is-collapsed .em-dash-account {
  justify-content: flex-start !important;
  gap: 11px !important;
}

.em-app .em-dash-body {
  padding: 14px var(--gutter) 24px !important;
}

/* Stat tiles and course cards: white cards on the app canvas. */
.em-app .tutor-dashboard-content-inner .tutor-card {
  border-radius: var(--app-radius) !important;
  border-color: var(--app-line) !important;
  box-shadow: none !important;
}

@media (max-width: 599px) {
  /* Course progress cards: the 16:9 placeholder made each card 300px+;
     a shorter thumb keeps two cards and their progress in view. */
  .em-app .tutor-frontend-dashboard-course-progress .tutor-ratio,
  .em-app .tutor-dashboard-content-inner .tutor-course-card .tutor-ratio {
    padding-top: 0 !important;
    height: 92px;
  }

  .em-app .tutor-frontend-dashboard-course-progress .tutor-ratio::before,
  .em-app .tutor-dashboard-content-inner .tutor-course-card .tutor-ratio::before {
    display: none !important;
  }

  .em-app .tutor-dashboard-content-inner .tutor-course-card .tutor-ratio img,
  .em-app .tutor-frontend-dashboard-course-progress .tutor-ratio img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* ==========================================================================
   Cart and checkout (WooCommerce)
   The cart table kept a 394px minimum width inside a 303px column (main
   padding + section padding + the white page card), so its right edge -
   prices and the remove button - was cut off. In app mode the cart is a
   list of item cards, a totals card, and a checkout bar pinned above the
   tab bar.
   ========================================================================== */
@media (max-width: 767px) {
  .em-app .woo-cart-section {
    padding: 0 0 24px !important;
    background: transparent !important;
  }

  .em-app .excelman-cart-inner {
    padding: 12px 0 24px !important;
  }

  .em-app .woocommerce-cart-form .shop_table.cart {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .em-app .woocommerce-cart-form .shop_table.cart tbody {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .em-app .woocommerce-cart-form .cart_item {
    position: relative;
    display: block;
    padding: 14px 16px 8px;
    border: 1px solid var(--app-line) !important;
    border-radius: var(--app-radius);
    background: #fff;
  }

  /* :not(.product-thumbnail) - Woo hides that cell on phones, and setting
     display here would bring it back as an empty labelled row. */
  .em-app .woocommerce-cart-form .cart_item td:not(.product-thumbnail) {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 0 !important;
    padding: 6px 0 !important;
    border: 0 !important;
    background: none !important;
    font-size: .875rem;
    text-align: right !important;
  }

  .em-app .woocommerce-cart-form .cart_item td::before {
    float: none !important;
    margin: 0 !important;
    color: var(--app-muted);
    font-weight: 500 !important;
    font-size: .8125rem;
    text-align: left;
  }

  /* Course name leads the card, unlabelled, clear of the remove button. */
  .em-app .woocommerce-cart-form .cart_item td.product-name {
    justify-content: flex-start;
    padding: 0 40px 8px 0 !important;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--app-line) !important;
    text-align: left !important;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.35;
  }

  .em-app .woocommerce-cart-form .cart_item td.product-name::before {
    display: none !important;
  }

  .em-app .woocommerce-cart-form .cart_item td.product-remove {
    position: absolute !important;
    top: 8px;
    right: 8px;
    padding: 0 !important;
  }

  .em-app .woocommerce-cart-form .cart_item td.product-remove::before {
    display: none !important;
  }

  .em-app .woocommerce-cart-form .cart_item a.remove {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: #f4f6f4 !important;
    color: #9ca3af !important;
    font-size: 20px !important;
  }

  .em-app .woocommerce-cart-form .cart_item .quantity {
    width: auto !important;
  }

  .em-app .woocommerce-cart-form .cart_item input.qty {
    width: 64px !important;
    height: 38px !important;
    min-height: 0 !important;
    border-radius: 10px !important;
    font-size: 16px !important;
  }

  /* Coupon and update: one card. */
  .em-app .woocommerce-cart-form .shop_table.cart tr:not(.cart_item) {
    display: block;
    padding: 12px;
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius);
    background: #fff;
  }

  .em-app .woocommerce-cart-form td.actions {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    padding: 0 !important;
    border: 0 !important;
  }

  .em-app .woocommerce-cart-form td.actions .coupon {
    display: flex !important;
    gap: 8px;
    width: 100%;
  }

  .em-app .woocommerce-cart-form td.actions .coupon input.input-text {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    font-size: 16px !important;
  }

  .em-app .woocommerce-cart-form td.actions .button {
    min-height: 44px;
    padding-left: 14px !important;
    padding-right: 14px !important;
    white-space: nowrap;
    border-radius: 12px !important;
  }

  .em-app .woocommerce-cart-form td.actions > .button {
    width: 100% !important;
    background: transparent !important;
    color: var(--app-accent-ink) !important;
    border: 1px solid var(--app-line) !important;
  }

  .em-app .cart-collaterals,
  .em-app .cart-collaterals .cart_totals {
    width: 100% !important;
    float: none !important;
    margin-top: 12px !important;
  }

  .em-app .cart-collaterals .cart_totals {
    padding: 16px !important;
    border: 1px solid var(--app-line) !important;
    border-radius: var(--app-radius) !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  .em-app .cart-collaterals .cart_totals h2 {
    font-size: 1rem !important;
    margin: 0 0 8px !important;
  }

  /* Proceed to checkout: pinned above the tab bar, like an app's cart. */
  .em-app .wc-proceed-to-checkout {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--tabbar-total);
    z-index: calc(var(--z-tabbar) - 1);
    margin: 0 !important;
    padding: 10px var(--gutter) !important;
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    border-top: 1px solid var(--app-line);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .06);
  }

  .em-app .wc-proceed-to-checkout .checkout-button {
    width: 100% !important;
    min-height: 50px;
    margin: 0 !important;
    border-radius: 14px !important;
    font-size: 1rem !important;
  }

  .em-app:has(.wc-proceed-to-checkout) .site {
    padding-bottom: calc(var(--tabbar-total) + 72px) !important;
  }

  .em-app:has(.wc-proceed-to-checkout) .emhb-root {
    bottom: calc(84px + var(--tabbar-total));
  }

  /* --- Checkout ------------------------------------------------------- */
  .em-app.woocommerce-checkout .page-body,
  .em-app.woocommerce-checkout .woo-checkout-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: transparent !important;
  }

  .em-app form.checkout .col2-set,
  .em-app form.checkout #order_review,
  .em-app form.checkout #order_review_heading {
    width: 100% !important;
    float: none !important;
  }

  .em-app form.checkout .woocommerce-billing-fields,
  .em-app form.checkout .woocommerce-additional-fields,
  .em-app form.checkout #order_review {
    padding: 16px !important;
    border: 1px solid var(--app-line) !important;
    border-radius: var(--app-radius) !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  .em-app form.checkout #order_review_heading {
    margin: 20px 0 10px !important;
    font-size: 1.0625rem !important;
  }

  .em-app form.checkout .form-row {
    width: 100% !important;
    float: none !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
  }

  .em-app form.checkout .input-text,
  .em-app form.checkout select,
  .em-app form.checkout .select2-selection {
    min-height: 48px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
  }

  .em-app form.checkout #place_order {
    width: 100% !important;
    min-height: 52px;
    border-radius: 14px !important;
    font-size: 1rem !important;
  }

  .em-app .woocommerce-form-coupon-toggle .woocommerce-info,
  .em-app .woocommerce-notices-wrapper .woocommerce-message {
    border-radius: var(--app-radius) !important;
  }
}

/* ==========================================================================
   AI assistant (page-chatbot.php - a standalone full-viewport shell)
   It is a conversation screen, so it behaves like one in a messaging app:
   the app bar (back, title, menu) replaces the page's own brand bar, the
   composer owns the bottom edge, and on phones the tab bar steps aside the
   way it does inside a chat thread.
   ========================================================================== */
/* The page must not scroll - the message list does (see page-chatbot.php).
   app-mode.css relaxes body overflow for sticky elements; undo that here. */
body.em-app.em-chat-body {
  overflow: hidden !important;
}

.em-app .em-chat-bar {
  display: none !important;
}

.em-app .em-chat-page {
  box-sizing: border-box;
  padding-top: var(--topbar-total);
  margin-left: var(--app-side);
}

.em-app.em-chat-body .emhb-root {
  display: none !important;
}

@media (max-width: 767px), (orientation: landscape) and (max-height: 500px) {
  .em-app.em-chat-body .em-shell-nav {
    display: none !important;
  }

  .em-app .em-chat-page {
    padding-bottom: var(--safe-bottom);
  }
}

/* No 16px floor on the composer and iOS zooms the page when it is focused. */
.em-app #em-chat-root textarea,
.em-app #em-chat-root input[type="text"] {
  font-size: 16px !important;
}

/* The chat page never scrolls, so the large-title fade-in would never fire. */
.em-app.em-chat-body .em-topbar__title {
  opacity: 1 !important;
  transform: none !important;
}

/* Page bodies under a compact header: page.php's main carries a 28px top
   margin and the body section 24px of padding (from style.css's
   .home-section !important rule, which out-ranked the 8px above). */
.em-app main.page-main {
  margin-top: 0 !important;
}

.em-app .page-main > .page-body.home-section {
  padding-top: 8px !important;
}

/* Q&A category tiles: the padding belongs to the link (the tap target),
   not to both the tile and the link; 21px names broke mid-word. */
@media (max-width: 767px) {
  .em-app .em-qa-catcard {
    padding: 0 !important;
    overflow: hidden;
  }

  .em-app .em-qa-catcard > a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    padding: 14px !important;
  }

  .em-app .em-qa-catname {
    margin: 0 !important;
    font-size: .9375rem !important;
    line-height: 1.3 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: auto;
  }
}