/* ============================================================
   AiCommsLibrary — MOBILE LAYER
   Created 2026-08-01

   HOW THIS WORKS
   • This file is loaded LAST in <head>, after style.css and after
     each page's inline <style>. That means it wins the cascade at
     equal specificity, so page-level rules can be corrected here
     without editing them in place.
   • EVERY rule lives inside @media (max-width: 768px). Desktop and
     tablet rendering above 768px is provably untouched.
   • 768px is used deliberately — it matches the existing breakpoint
     in style.css, so there is no gap where half the rules apply.
   ============================================================ */

/* ------------------------------------------------------------
   BASE (all widths) — one rule only.
   .footer__navrow replaces an inline `display:flex; gap:var(--s5)`
   on the footer link row. That inline style could not be overridden
   by a media query, which is why "Terms" ran off screen on phones.
   Moving it to a class means the desktop layout it used to provide
   has to be restated here, otherwise the links would stack.
   ------------------------------------------------------------ */
.footer__navrow {
  display: flex;
  align-items: center;
  gap: var(--s5);
}

@media (max-width: 768px) {

  /* ==========================================================
     1. FOUNDATIONS — one gutter, one nav height, one tap size
     ========================================================== */

  :root {
    --m-gutter: 16px;   /* single left/right gutter for the whole site */
    --m-tap: 44px;      /* minimum comfortable touch target */
    --nav-h: 64px;      /* was 80px — reclaims 16px of vertical space */

    /* style.css defines --s1..--s6, --s8, --s10, --s12, --s14, --s16,
       --s20, --s24, --s32 — but NOT --s7. Rules here referenced it, and
       an undefined var() makes the whole declaration invalid at computed
       value time, so those properties silently fell back to 0. Defining
       it here fixes them. */
    --s7: 28px;
  }

  /* The site previously ran two gutters: .container dropped to 16px
     while .nav__inner and .filter-bar__inner kept 24px, so the left
     edge stepped in and out as you scrolled. One value now. */
  .container,
  .container--narrow,
  .nav__inner,
  .filter-bar__inner,
  .footer .container {
    padding-left: var(--m-gutter) !important;
    padding-right: var(--m-gutter) !important;
  }

  /* Nothing may exceed the viewport. */
  html, body { overflow-x: hidden; }
  img, svg, video, canvas { max-width: 100%; }

  /* iOS zooms the page when a <16px input is focused. */
  input, select, textarea { font-size: 16px !important; }


  /* ==========================================================
     2. NAVIGATION — logo + burger only; everything else in a panel
     ========================================================== */

  .nav { height: var(--nav-h); }

  .nav__inner {
    gap: var(--s3);
    justify-content: space-between;
  }

  .nav__logo { flex: 0 1 auto; min-width: 0; }
  .nav__logo img {
    height: 40px !important;
    width: auto !important;
    max-width: 150px !important;
  }

  /* The menu wrapper carries display:contents inline so desktop is
     unaffected; here it becomes the dropdown panel itself. */
  .nav__menu {
    display: none !important;
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--ind900);
    border-bottom: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 14px 30px rgba(0,0,0,0.35);
    padding: var(--s2) var(--m-gutter) calc(var(--s5) + env(safe-area-inset-bottom));
    max-height: calc(100vh - var(--nav-h));
    max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 120;
  }
  .nav__menu.open { display: flex !important; }

  .nav__links {
    display: flex !important;
    position: static;
    transform: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
  }

  .nav__link,
  .nav__links.open .nav__link {
    display: flex;
    align-items: center;
    min-height: var(--m-tap);
    padding: 0;
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255,255,255,0.88) !important;   /* panel is dark now */
    border-bottom: 1px solid rgba(255,255,255,0.10);
  }
  .nav__link:last-child { border-bottom: 0; }
  .nav__link.active,
  .nav__links.open .nav__link.active {
    color: #fff !important;
    font-weight: 700;
  }
  .nav__link::after { display: none !important; }   /* desktop underline */

  /* Auth buttons: full width inside the panel, never in the bar. */
  .nav__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s3);
    margin-top: var(--s4);
  }
  .nav__actions .btn,
  .nav__actions .btn--sm {
    width: 100%;
    justify-content: center;
    min-height: var(--m-tap);
    padding: 0 var(--s4) !important;
    font-size: 0.9375rem !important;
  }
  .nav__user-btn { width: 100%; justify-content: center; min-height: var(--m-tap); }

  .nav__burger,
  .nav__burger:hover,
  .nav__burger:focus {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.30) !important;
    color: #fff !important;
  }
  .nav__burger:active { background: rgba(255,255,255,0.20) !important; }

  .nav__burger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: var(--m-tap);
    height: var(--m-tap);
    flex: 0 0 auto;
    margin-right: -10px;   /* optical alignment with the gutter */
  }


  /* ==========================================================
     3. FOOTER — stacked, and links that no longer run off screen
     ========================================================== */

  .footer { padding: var(--s8) 0 calc(var(--s6) + env(safe-area-inset-bottom)); }

  .footer__grid {
    grid-template-columns: 1fr !important;
    gap: var(--s7);
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s3);
  }

  /* Was an inline display:flex with no wrap — 428px of links in a
     375px viewport, so "Terms" sat entirely off screen. */
  .footer__navrow {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center;
    gap: 0 var(--s5) !important;
    width: 100%;
    max-width: 100%;
  }
  .footer__navrow .footer__link,
  .footer__bottom .footer__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--m-tap);
  }
  .footer__copy {
    font-size: 0.8125rem;
    line-height: 1.5;
    order: 2;
  }
  .footer__bottom > *:first-child { order: 0; }


  /* ==========================================================
     4. TOUCH TARGETS
     ========================================================== */

  .btn { min-height: var(--m-tap); }
  .btn--sm { min-height: 40px; }

  /* Favourite button: 26px visual, 44px hit area. Negative margins
     keep it sitting exactly where it did. */
  .heart {
    width: var(--m-tap) !important;
    height: var(--m-tap) !important;
    margin: -9px -9px -9px auto;
  }
  .heart svg { width: 18px; height: 18px; }

  .nav__logo { min-height: var(--m-tap); }

  /* Standalone link lists deserve real rows. Links sitting inside a
     sentence are left inline on purpose — padding them out would
     break the paragraph. */
  .footer__links .footer__link {
    min-height: 40px;
    align-items: center;
  }
  .legal-toc ol li { margin-bottom: 2px; }
  .legal-toc ol li a {
    display: flex;
    align-items: center;
    min-height: var(--m-tap);
  }
  .auth-forgot,
  .auth-card > a,
  .auth-footer a,
  .back-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--m-tap);
  }
  .breadcrumb__item { min-height: 32px; display: inline-flex; align-items: center; }
  .btn-clear { min-height: 40px; display: inline-flex; align-items: center; }
  .badge { min-height: 30px; }


  /* ==========================================================
     5. LIBRARY — filter strip, category sheet, pagination
     ========================================================== */

  /* 5a. Header block */
  .library-header { padding: var(--s6) 0 var(--s5); }
  .library-header h1 { font-size: clamp(1.75rem, 8vw, 2.25rem); line-height: 1.15; }
  .library-header p { font-size: 0.9375rem; }

  /* 5b. Filter bar — was three ragged rows and 148px tall.
     Now one 64px row: Categories first, difficulty chips scroll. */
  .filter-bar__inner {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: var(--s2);
    padding-top: var(--s3);
    padding-bottom: var(--s3);
    scroll-padding-left: var(--m-gutter);
  }
  .filter-bar__inner::-webkit-scrollbar { display: none; }

  /* The label is redundant once the chips read "Beginner/Advanced". */
  .filter-label { display: none !important; }

  .filter-pill {
    flex: 0 0 auto;
    min-height: 40px;
    white-space: nowrap;
  }

  /* Categories is the primary filter on a phone — pull it first and
     give it button-primary weight. */
  .mobile-filter-btn {
    order: -1;
    flex: 0 0 auto;
    min-height: 40px;
    white-space: nowrap;
    background: var(--ind600) !important;
    border-color: var(--ind600) !important;
    color: #fff !important;
    font-weight: 600 !important;
  }
  /* Breathing room at the end of the scroll strip. */
  .filter-bar__inner::after {
    content: "";
    flex: 0 0 var(--s2);
  }

  /* 5c. Results row: count and sort side by side, not stacked. */
  /* Count and sort share a row when they fit and wrap cleanly when
     they don't — rather than the count being crushed into a column. */
  .results-header {
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2) var(--s3);
    margin-bottom: var(--s4);
  }
  .results-count {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.875rem;
    white-space: nowrap;
  }
  .sort-select {
    flex: 0 0 auto;
    margin-left: auto;
    min-height: 40px;
    padding-right: var(--s7);
  }

  /* 5d. Category sheet — was clamped by an inherited max-height to
     ~450px, so it floated short of the bottom of the screen. */
  .sidebar {
    top: 0 !important;
    bottom: 0 !important;
    height: 100vh;
    height: 100dvh;
    max-height: none !important;
    width: min(86vw, 320px) !important;
    display: flex !important;
    flex-direction: column;
    border-radius: 0 !important;
    border: 0;
    z-index: 1200 !important;
    box-shadow: 0 0 40px rgba(15,23,42,0.28);
  }
  .sidebar-overlay { z-index: 1199 !important; }

  .sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    min-height: 56px;
    flex: 0 0 auto;
    padding-top: calc(var(--s3) + env(safe-area-inset-top));
  }
  .sidebar__list {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(var(--s6) + env(safe-area-inset-bottom));
  }
  .sidebar__item { min-height: var(--m-tap); }

  /* Close button (markup added to the sheet header). */
  .sidebar__close {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: var(--m-tap);
    height: var(--m-tap);
    margin-right: -10px;
    border: 0;
    background: transparent;
    color: var(--slate500);
    cursor: pointer;
    border-radius: 50%;
    flex: 0 0 auto;
  }
  .sidebar__close:active { background: var(--slate100); }

  /* 5e. Pagination — "Next" no longer orphaned on its own row. */
  .pagination {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: var(--s2);
    margin-top: var(--s7);
  }
  /* Numbered buttons and the ellipsis are replaced by a page counter. */
  .pagination__btn:not(:first-child):not(:last-child),
  .pagination__ellipsis { display: none !important; }
  .pagination__btn:first-child,
  .pagination__btn:last-child {
    flex: 0 0 auto;
    min-height: var(--m-tap);
    padding: 0 var(--s4);
  }
  .pagination__status {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
  }

  /* 5f. Cards */
  .prompt-grid,
  .prompt-grid--2col,
  .prompt-grid--3col { grid-template-columns: 1fr !important; gap: var(--s4); }
  .prompt-card__body { padding: 14px 16px 6px; }
  .tinycat, .tinydiff { font-size: 0.6875rem; }   /* was 10px */


  /* ==========================================================
     6. PROMPT DETAIL
     ========================================================== */

  .prompt-detail { grid-template-columns: 1fr !important; }

  /* 6a. Breadcrumb — no more slash dangling at the end of a line. */
  .breadcrumb, .detail-header-band .breadcrumb {
    font-size: 0.8125rem;
    line-height: 1.6;
    flex-wrap: wrap;
    row-gap: 2px;
  }
  /* The separator is its own element, so it was left dangling at the
     end of a wrapped line. Attach it to the item that follows. */
  .breadcrumb__sep { display: none !important; }
  .breadcrumb__item:not(:first-child)::before {
    content: "/";
    margin-right: 6px;
    opacity: 0.5;
  }

  /* 6b. THE BIG ONE — the Variables reference panel.
     .var-ref-item was a 3-column flex row. The chip (nowrap,
     flex-shrink:0) and the value (nowrap, 130px) consumed the whole
     310px of row width, leaving the description — the only flexible
     item, with min-width:0 — squeezed to 0px, so it wrapped one
     character per line. The panel was 3,604px tall.
     On mobile the row now wraps: chip and value on top, description
     on its own full-width line beneath. */
  .var-ref-item {
    flex-wrap: wrap;
    align-items: center;
    gap: 3px var(--s2);
    padding: 6px 8px;
  }
  /* Row 1: the chip, on its own line so it can be any length.
     Row 2: plain-English label on the left, current value on the right.
     Same shape for every variable, however long the placeholder is. */
  .var-ref-chip {
    white-space: normal !important;
    flex: 0 1 auto;
    order: 1;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    line-height: 1.45;
    font-size: 0.75rem;
  }
  .var-ref-desc {
    flex: 1 1 60%;
    order: 2;
    min-width: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
  .var-ref-value {
    flex: 0 1 auto;
    order: 3;
    margin-left: auto;
    max-width: 46% !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .var-ref-chip { flex-basis: 100%; }
  .var-ref-panel { padding: var(--s3); }

  /* 6c. Variables inside the prompt body split across lines and each
     half kept its own pill background, so one variable read as two. */
  .var-chip {
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding: 2px 6px;
  }

  /* 6d. Two "Copy prompt" buttons were on screen at once — one in the
     template toolbar and one in the sticky bar. Keep the sticky one. */
  .sticky-copy {
    padding: var(--s3) var(--m-gutter) calc(var(--s3) + env(safe-area-inset-bottom));
    gap: var(--s3);
  }
  .sticky-copy .btn { min-height: var(--m-tap); font-size: 0.9375rem !important; }
  .sticky-copy .btn:first-child { flex: 1 1 auto; }
  /* Only the prompt page has the sticky bar — scoped so the other
     pages don't get dead space under the footer. prompt.html's own
     70px rule is the fallback where :has() is unsupported. */
  body:has(.sticky-copy) {
    padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
  }

  /* Three "Copy prompt" buttons were reachable at once. The sticky
     bar is always in thumb reach, so it is the one that stays. */
  #mainCopyBtn, #sideCopyBtn { display: none !important; }
  .prompt-block__toolbar, .prompt-card__toolbar { flex-wrap: wrap; }

  /* 6e. Sidebar actions stack full width under the prompt. */
  .prompt-detail__sidebar {
    position: static !important;
    display: flex;
    flex-direction: column;
    gap: var(--s3);
  }
  .prompt-detail__sidebar .btn {
    width: 100%;
    justify-content: center;
    min-height: var(--m-tap);
    font-size: 0.875rem !important;
  }
  .share-row { gap: var(--s2); }
  .share-row .btn { flex: 1 1 auto; }

  .related-grid { grid-template-columns: 1fr !important; gap: var(--s4); }


  /* ==========================================================
     7. HOMEPAGE
     ========================================================== */

  .hero { padding: var(--s10) 0 var(--s8); }
  .hero__title { font-size: clamp(1.875rem, 8.5vw, 2.5rem); line-height: 1.12; }
  .hero__sub { font-size: 0.9375rem; }
  .hero__actions { flex-direction: column; align-items: stretch; gap: var(--s3); }
  .hero__actions .btn { width: 100%; justify-content: center; min-height: 48px; }

  /* Four stats in a cramped single row became 3 + 1 orphan when
     wrapped. A 2x2 grid reads evenly at every phone width. */
  .hero__stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: var(--s5) var(--s4);
    text-align: center;
  }
  .hero__divider { display: none !important; }
  .hero__stat-num { font-size: 1.375rem; }
  .hero__stat-label { font-size: 0.75rem; }

  .grid-2, .grid-3, .grid-4, .grid-6 { grid-template-columns: 1fr !important; }
  .how-grid { grid-template-columns: 1fr !important; gap: var(--s6); }
  /* Text was running to the very edge of the box on phones. */
  .callout { padding: var(--s8) var(--s6) !important; }
  .callout__title { font-size: clamp(1.375rem, 6vw, 1.75rem); line-height: 1.25; }
  .callout__desc { font-size: 0.9375rem; margin-bottom: var(--s6); }
  .callout__actions { flex-direction: column; align-items: stretch; gap: var(--s3); }
  .callout__actions .btn { width: 100%; justify-content: center; }
  .section { padding: var(--s10) 0; }
  h2, .section__title { font-size: clamp(1.5rem, 6.5vw, 2rem); line-height: 1.2; }


  /* ==========================================================
     8. FORMS — login / signup / account
     ========================================================== */

  .auth-card, .account-card, .card--form {
    padding: var(--s6) var(--s5) !important;
    border-radius: 14px;
  }
  .auth-card .btn, .account-card .btn { width: 100%; justify-content: center; min-height: 48px; }
  .form-row { flex-direction: column; gap: var(--s3); }
  input[type="text"], input[type="email"], input[type="password"], select, textarea {
    min-height: 48px;
    width: 100%;
  }


  /* ==========================================================
     9. LONG-FORM PAGES — privacy / terms
     ========================================================== */

  .legal, .legal-body, .prose {
    font-size: 0.9375rem;
    line-height: 1.7;
    overflow-wrap: anywhere;
  }
  .legal h2, .prose h2 { font-size: 1.25rem; margin-top: var(--s7); }
  .legal h3, .prose h3 { font-size: 1.0625rem; }
  table { display: block; width: 100%; overflow-x: auto; }


  /* ==========================================================
     10. MODALS
     ========================================================== */

  .upsell-modal, .modal {
    width: calc(100vw - 2 * var(--m-gutter)) !important;
    max-width: none !important;
    max-height: calc(100dvh - 2 * var(--s6));
    overflow-y: auto;
    padding: var(--s6) var(--s5) !important;
  }
  .upsell-modal__close, .modal__close {
    width: var(--m-tap);
    height: var(--m-tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .upsell-modal .btn, .modal .btn { width: 100%; justify-content: center; min-height: var(--m-tap); }

} /* end @media (max-width: 768px) */


/* ============================================================
   VERY SMALL PHONES (<= 360px) — iPhone SE, older Androids,
   and any phone in split-screen.
   ============================================================ */

@media (max-width: 360px) {
  :root { --m-gutter: 12px; }

  .nav__logo img { height: 34px !important; max-width: 128px !important; }
  .library-header h1 { font-size: 1.625rem; }
  .prompt-card__title { font-size: 1rem; }
  .filter-pill, .mobile-filter-btn { font-size: 0.8125rem; padding-left: 12px; padding-right: 12px; }
  .pagination__btn:first-child,
  .pagination__btn:last-child { padding: 0 var(--s3); font-size: 0.8125rem; }
  .sticky-copy .btn { font-size: 0.875rem !important; padding: 0 var(--s3) !important; }
}
