/* [2026-09-27] LLOS app layer — the chrome that makes llos.ai behave like an installed app on
 * phones and portrait tablets: a bottom tab bar (Home · Explore · Search · Practice · Me), an
 * Explore sheet over the six pillars, and the standalone-mode back button.
 *
 * Companion to /assets/js/llos-app.js, which builds every element here and only adds
 * html.llos-has-tabbar when the bar is actually shown. Nothing in this file styles an existing
 * page element except the three lifts at the bottom (cookie bar, shell FABs), and those are all
 * gated on that class — so a page where the bar is skipped (iframe, admin, immersive app, a page
 * that owns its bottom edge) is untouched. Above 959px nothing renders at all.
 *
 * Tokens follow llos-mobile.css (--m-*) and RESPONSIVE_STANDARD.md: §19 touch sizes, §20 radius
 * grammar, §14 "a bottom navigation bar, if used, is separate from the footer".
 * Layering sits in the shell's band (header 9000, menu 9100/9200): the bar below the menu so an
 * open drawer covers it, the sheet above the header so its scrim dims everything.
 */

:root {
  --llos-tabbar-h: 60px;
  --llos-app-ink: #1c1714;
  --llos-app-ink2: #5b524a;
  --llos-app-line: #ece4d8;
  --llos-app-bg: #fdfcfa;
  --llos-app-active: #c2410c;
  --llos-app-active-bg: #fdebd8;
  --llos-app-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.llos-tabbar, .llos-sheet, .llos-sheet-scrim, .llos-tabbar-spacer { display: none; }

@media (max-width: 959px) {

  /* ── the bar ─────────────────────────────────────────────────────────────── */
  html.llos-has-tabbar .llos-tabbar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 8900;
    height: calc(var(--llos-tabbar-h) + env(safe-area-inset-bottom, 0px));
    padding: 0 max(4px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(4px, env(safe-area-inset-left, 0px));
    background: rgba(253, 252, 250, .94);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
    border-top: 1px solid var(--llos-app-line);
    box-shadow: 0 -6px 24px rgba(28, 23, 20, .05);
    transition: transform .28s cubic-bezier(.2, .8, .2, 1);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }
  /* portrait tablet: the bar spans the edge, the five tabs keep a thumb-sized span in the middle */
  @media (min-width: 600px) {
    html.llos-has-tabbar .llos-tabbar { padding-left: max(4px, calc((100% - 640px) / 2)); padding-right: max(4px, calc((100% - 640px) / 2)); }
  }
  html.llos-has-tabbar.llos-kb-open .llos-tabbar,
  html.llos-has-tabbar.llos-tabbar-yield .llos-tabbar { transform: translateY(110%); }

  .llos-tabbar .llos-tab {
    -webkit-appearance: none; appearance: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-width: 0; min-height: 48px; height: var(--llos-tabbar-h);
    margin: 0; padding: 6px 2px 4px; border: 0; background: none;
    color: var(--llos-app-ink2); text-decoration: none;
    font: 600 12px/1.1 var(--llos-app-font); letter-spacing: .01em;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .llos-tabbar .llos-tab-ico {
    display: flex; align-items: center; justify-content: center;
    width: 56px; height: 30px; border-radius: 999px;
    transition: background-color .2s ease, transform .15s ease;
  }
  .llos-tabbar .llos-tab svg { width: 24px; height: 24px; display: block; }
  .llos-tabbar .llos-tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .llos-tabbar .llos-tab:active .llos-tab-ico { transform: scale(.92); }
  .llos-tabbar .llos-tab[aria-current="page"],
  .llos-tabbar .llos-tab[aria-expanded="true"] { color: var(--llos-app-active); }
  .llos-tabbar .llos-tab[aria-current="page"] .llos-tab-ico,
  .llos-tabbar .llos-tab[aria-expanded="true"] .llos-tab-ico { background: var(--llos-app-active-bg); }
  .llos-tabbar .llos-tab:focus-visible { outline: 2px solid var(--llos-app-active); outline-offset: -4px; border-radius: 12px; }

  /* the page keeps its last line clear of the bar — a spacer at the end of <body>, not body
     padding, because body{display:flex} pages would shrink-wrap around a padded body */
  html.llos-has-tabbar .llos-tabbar-spacer {
    display: block; height: calc(var(--llos-tabbar-h) + env(safe-area-inset-bottom, 0px)); flex: none;
  }

  /* ── lifts: the shell's own bottom furniture moves above the bar ─────────── */
  html.llos-has-tabbar .cookie,
  html.llos-has-tabbar .sh-cookie,
  html.llos-has-tabbar .lsh-cookie { bottom: calc(var(--llos-tabbar-h) + env(safe-area-inset-bottom, 0px)); }
  /* the bar carries Home and Search, so the floating home pill and search FAB are duplicates */
  html.llos-has-tabbar .llos-shell-home-pill,
  html.llos-has-tabbar .llos-search-fab { display: none !important; }

  /* ── Explore sheet ───────────────────────────────────────────────────────── */
  .llos-sheet-scrim {
    position: fixed; inset: 0; z-index: 9290;
    background: rgba(28, 23, 20, .45);
    opacity: 0; transition: opacity .25s ease;
  }
  .llos-sheet-scrim.on { display: block; opacity: 1; }
  .llos-sheet-scrim.shown { display: block; }

  .llos-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9300;
    max-height: 88dvh; max-height: 88vh;
    display: flex; flex-direction: column;
    background: var(--llos-app-bg); color: var(--llos-app-ink);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -12px 40px rgba(28, 23, 20, .18);
    transform: translateY(102%); transition: transform .3s cubic-bezier(.2, .8, .2, 1);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    overscroll-behavior: contain;
  }
  @supports (max-height: 88dvh) { .llos-sheet { max-height: 88dvh; } }
  .llos-sheet.shown { display: flex; }
  .llos-sheet.on { transform: translateY(0); }
  .llos-sheet.dragging { transition: none; }
  @media (min-width: 600px) {
    .llos-sheet { left: 50%; right: auto; width: min(640px, 100%); margin-left: calc(min(640px, 100%) / -2); }
  }

  .llos-sheet-head { flex: none; padding: 8px 16px 0; touch-action: none; }
  .llos-sheet-grip { width: 40px; height: 4px; border-radius: 4px; background: #d8cfc2; margin: 0 auto 10px; }
  .llos-sheet-titlerow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .llos-sheet-title { margin: 0; font: 700 1.375rem/1.2 Georgia, "Times New Roman", serif; letter-spacing: -.01em; color: var(--llos-app-ink); }
  .llos-sheet-close {
    -webkit-appearance: none; appearance: none; flex: none;
    width: 44px; height: 44px; margin-right: -10px; border: 0; border-radius: 12px; background: none;
    color: var(--llos-app-ink2); display: flex; align-items: center; justify-content: center; cursor: pointer;
  }
  .llos-sheet-close svg { width: 22px; height: 22px; }

  /* pillar switcher — one row, scrolls sideways (§10 one-row rule), pills are the selectable grammar */
  .llos-pillars {
    display: flex; gap: 8px; margin: 12px -16px 0; padding: 0 16px 12px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid var(--llos-app-line);
  }
  .llos-pillars::-webkit-scrollbar { display: none; }
  .llos-pillar {
    -webkit-appearance: none; appearance: none; flex: none;
    min-height: 40px; padding: 0 16px; border-radius: 999px;
    border: 1px solid var(--llos-app-line); background: #fff; color: var(--llos-app-ink);
    font: 600 .9375rem/1 var(--llos-app-font); cursor: pointer;
  }
  .llos-pillar[aria-selected="true"] { background: var(--llos-app-ink); border-color: var(--llos-app-ink); color: #fff; }

  .llos-sheet-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 4px 16px 20px; }
  .llos-sheet-hub {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 52px; margin: 8px 0 4px; padding: 0 16px; border-radius: 12px;
    background: var(--llos-app-active-bg); color: var(--llos-app-active); text-decoration: none;
    font: 700 1rem/1.2 var(--llos-app-font);
  }
  .llos-sheet-hub small { display: block; font: 500 .8125rem/1.3 var(--llos-app-font); color: var(--llos-app-ink2); margin-top: 2px; }
  .llos-sheet-group { margin-top: 18px; }
  .llos-sheet-group h3 {
    margin: 0 0 4px; font: 700 .75rem/1.3 var(--llos-app-font); letter-spacing: .08em; text-transform: uppercase;
    color: var(--llos-app-ink2);
  }
  .llos-sheet-list { list-style: none; margin: 0; padding: 0; }
  .llos-sheet-list a {
    display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 0;
    border-bottom: 1px solid var(--llos-app-line); color: var(--llos-app-ink); text-decoration: none;
  }
  .llos-sheet-list li:last-child a { border-bottom: 0; }
  .llos-sheet-list .t { display: block; font: 600 1rem/1.3 var(--llos-app-font); }
  .llos-sheet-list .d { display: block; font: 400 .875rem/1.35 var(--llos-app-font); color: var(--llos-app-ink2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .llos-sheet-list .txt { min-width: 0; flex: 1 1 auto; }
  .llos-sheet-list .chev { flex: none; color: #b5aa9b; }
  .llos-sheet-list a:active { background: rgba(234, 122, 39, .06); }
  .llos-sheet-empty { padding: 32px 0; text-align: center; color: var(--llos-app-ink2); }
}

/* ── standalone back button (installed app has no browser back on iOS) ───── */
.llos-app-back { display: none; }
html.llos-standalone .llos-app-back {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; margin: 0 4px 0 -8px; padding: 0; border: 0; border-radius: 12px;
  background: none; color: var(--llos-app-ink); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
html.llos-standalone .llos-app-back svg { width: 24px; height: 24px; }

/* installed app: no text selection flash on chrome, no pull-to-refresh bounce on the bar */
html.llos-standalone .llos-tabbar { -webkit-user-select: none; user-select: none; }

@media (prefers-reduced-motion: reduce) {
  .llos-tabbar, .llos-sheet, .llos-sheet-scrim, .llos-tabbar .llos-tab-ico { transition: none !important; }
}

/* ── app rows (llos-app.js §5): a list of link cards becomes one inset panel of rows ─────────────
   [2026-09-28] Pawan: "rows, not grids" on phones. The script marks the list .llos-rows and each
   card .llos-row; everything here is keyed on those classes and scoped to ≤767px, so a desktop or
   tablet never sees it. !important and the heavy `:root:not(#a):not(#b) .x.x` selectors (the :not(#id) terms add ID weight
   without matching anything — home.php styles its tiles as `#pillars .pillars-grid … !important`) because they have to beat a hundred page stylesheets
   (and Tailwind utilities) that each size their own cards — this is the one composition rule that
   overrides them on a phone. Grouped-list grammar: one surface (16px radius, §20), hairline
   separators instead of nested boxes (§24), left-aligned text, a chevron that says "opens". */
@media (max-width: 767px) {
  :root:not(#llos-x):not(#llos-y) .llos-rows.llos-rows {
    display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important;
    grid-template-columns: none !important; gap: 0 !important; column-count: auto !important;
    overflow: visible !important; scroll-snap-type: none !important;
    padding: 0 !important; margin-left: 0 !important; margin-right: 0 !important;
    width: auto !important; max-width: 100% !important;
    background: #fff !important; border: 1px solid var(--llos-app-line) !important;
    border-radius: 16px !important; box-shadow: 0 1px 2px rgba(28, 23, 20, .04) !important;
  }
  :root:not(#llos-x):not(#llos-y) .llos-rows.llos-rows > .llos-rows-extra { padding: 12px 16px !important; margin: 0 !important; }

  :root:not(#llos-x):not(#llos-y) .llos-rows.llos-rows > .llos-row {
    position: relative !important; display: block !important;
    width: auto !important; min-width: 0 !important; max-width: none !important;
    height: auto !important; min-height: 60px !important; flex: none !important;
    margin: 0 !important; padding: 14px 44px 14px 16px !important;
    background: transparent !important; background-image: none !important;
    border: 0 !important; border-bottom: 1px solid var(--llos-app-line) !important; border-radius: 0 !important;
    box-shadow: none !important; transform: none !important; scroll-snap-align: none !important;
    text-align: left !important; color: var(--llos-app-ink) !important; text-decoration: none !important;
    overflow: hidden !important;
  }
  :root:not(#llos-x):not(#llos-y) .llos-rows.llos-rows > .llos-row:first-child { border-top-left-radius: 15px !important; border-top-right-radius: 15px !important; }
  :root:not(#llos-x):not(#llos-y) .llos-rows.llos-rows > .llos-row:last-child { border-bottom: 0 !important; border-bottom-left-radius: 15px !important; border-bottom-right-radius: 15px !important; }
  :root:not(#llos-x):not(#llos-y) .llos-rows.llos-rows > .llos-row:active { background: rgba(234, 122, 39, .06) !important; }
  :root:not(#llos-x):not(#llos-y) .llos-rows.llos-rows > .llos-row::after {
    content: "" !important; position: absolute !important; right: 18px !important; top: 50% !important;
    width: 8px !important; height: 8px !important; margin-top: -5px !important;
    border-right: 2px solid #b5aa9b !important; border-bottom: 2px solid #b5aa9b !important;
    transform: rotate(-45deg) !important; background: none !important; pointer-events: none !important;
  }

  /* inside a row: left-aligned, compact, one reading line of type */
  :root:not(#llos-x):not(#llos-y) .llos-row.llos-row, :root:not(#llos-x):not(#llos-y) .llos-row.llos-row * { text-align: left !important; }
  :root:not(#llos-x):not(#llos-y) .llos-row.llos-row * { max-width: 100% !important; }
  :root:not(#llos-x):not(#llos-y) .llos-row.llos-row :is(div, a, span, p, section, article, header, footer) { align-items: flex-start !important; justify-content: flex-start !important; }
  :root:not(#llos-x):not(#llos-y) .llos-row.llos-row :is(h1, h2, h3, h4, h5, h6) {
    font-size: 1rem !important; line-height: 1.3 !important; letter-spacing: 0 !important;
    margin: 0 0 2px !important; padding: 0 !important;
  }
  :root:not(#llos-x):not(#llos-y) .llos-row.llos-row p {
    font-size: .875rem !important; line-height: 1.4 !important; margin: 2px 0 0 !important; padding: 0 !important;
    color: var(--llos-app-ink2) !important;
    display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important;
  }
  :root:not(#llos-x):not(#llos-y) .llos-row.llos-row > * { margin-left: 0 !important; margin-right: 0 !important; }
  :root:not(#llos-x):not(#llos-y) .llos-row.llos-row > * + * { margin-top: 2px !important; }
  :root:not(#llos-x):not(#llos-y) .llos-row.llos-row img, :root:not(#llos-x):not(#llos-y) .llos-row.llos-row svg, :root:not(#llos-x):not(#llos-y) .llos-row.llos-row picture { max-height: 44px !important; width: auto !important; }

  /* a small leading icon sits to the left of the text, not above it */
  :root:not(#llos-x):not(#llos-y) .llos-rows.llos-rows > .llos-row.llos-row-ico {
    display: grid !important; grid-template-columns: 40px minmax(0, 1fr) !important;
    column-gap: 12px !important; row-gap: 0 !important; align-items: center !important;
    grid-auto-rows: auto !important; grid-template-rows: none !important;
  }
  :root:not(#llos-x):not(#llos-y) .llos-row.llos-row.llos-row-ico > :first-child {
    grid-row: 1 / span 20 !important; width: 40px !important; height: 40px !important; margin: 0 !important;
    display: flex !important; align-items: center !important; justify-content: center !important; font-size: 22px !important;
  }
  :root:not(#llos-x):not(#llos-y) .llos-row.llos-row.llos-row-ico > :not(:first-child) { grid-column: 2 !important; margin-top: 0 !important; }
}