/* Phone folding and the sticky main button, shared by every tenant theme.
   STANDING RULE: CLAUDE.md Site Baseline §5b (operator, 7 Oct 2026).
   Loaded after the theme stylesheet. Uses only the theme's own variables, so each
   site keeps its colours and fonts. Desktop (768px and up) must render exactly as
   it did before: the wrapper is display: contents and the phone parts are hidden. */

.ks-fold { display: contents; }
.ks-fold__bar, .ks-msticky { display: none; }

@media (max-width: 767.98px) {
  .ks-fold {
    display: block;
    /* Fallback for a plain #link before the page script runs; the script measures the real header. */
    scroll-margin-top: 88px;
    border-bottom: 1px solid var(--ks-line, rgba(0, 0, 0, 0.12));
  }
  .ks-fold__bar {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    min-height: 64px;
    padding: 1rem 1.25rem;
    border: 0;
    background: transparent;
    color: var(--ks-ink, #1a1a1a);
    text-align: left;
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .ks-fold__bar:focus-visible { outline: 2px solid var(--ks-brand, currentColor); outline-offset: -4px; }
  .ks-fold__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
  .ks-fold__title {
    font-family: var(--ks-display, var(--ks-serif, inherit));
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ks-brand, inherit);
  }
  .ks-fold__sum {
    margin-top: 0.2rem;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--ks-muted, inherit);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ks-fold__chev {
    flex: none;
    width: 0.65rem;
    height: 0.65rem;
    border-right: 2px solid var(--ks-brand, currentColor);
    border-bottom: 2px solid var(--ks-brand, currentColor);
    transform: rotate(45deg) translateY(-3px);
    transition: transform 0.2s ease;
  }
  .ks-fold.is-open .ks-fold__chev { transform: rotate(-135deg) translateY(-3px); }

  /* Folded: hidden by class, never removed, so the text stays in the HTML. */
  .ks-fold:not(.is-open) > .ks-fold__body { display: none; }

  /* Open: the bar already shows the heading, so the section's own first heading
     would say it twice. The first paragraph and everything else still show. */
  .ks-fold__body > section > .ks-h2:first-of-type,
  .ks-fold__body > section > div > .ks-h2:first-child,
  .ks-fold__body .ks-prose > :is(h1, h2, h3):first-child { display: none; }
  .ks-fold__body > section { padding-top: 0.5rem; }

  /* Sticky main button: the header's first button, after the first screen. */
  .ks-msticky {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
    background: var(--ks-surface, #fff);
    border-top: 1px solid var(--ks-line, rgba(0, 0, 0, 0.12));
    box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, 0.25);
    transform: translateY(110%);
    transition: transform 0.25s ease;
  }
  .ks-msticky.is-shown { transform: none; }
  .ks-msticky__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    font-size: 1rem;
  }
  /* Keep the page's last lines and the chat bubble clear of the bar. */
  html.has-m-sticky body { padding-bottom: 76px; }
  html.has-m-sticky .ksc-fab:not(.ksc-fab--bar) { bottom: 92px !important; }
  html.has-m-sticky .ksc-fab--bar { bottom: 68px !important; }
  html.has-m-sticky .ksc-panel { bottom: 166px !important; }
}

@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  .ks-fold__chev, .ks-msticky { transition: none; }
}