/*
================================================================================
  ML Software, LLC
  Copyright 2026. All rights reserved.

  Life IQ | lifeiq.mlsoftware.com

  assets/css/mobile-tabs.css

  Platform: IQ Platform  (candidate for promotion into platform shell.css)
  Version : 1.8.0
  Created : 2026-07-22
  Updated : 2026-07-27

  Description: Bottom tab bar for touch devices. Extends the platform
  shell rather than replacing it.

  WHY THIS EXISTS

  The platform shell is topbar + sidebar, and on touch it collapses the
  sidebar into a slide-in drawer. That is correct for an admin product
  where the operator visits eight sections occasionally.

  LifeIQ is used standing in a kitchen at 6am and in bed at 10pm. Four
  screens get touched every single day - Today, Tasks, Reality, Wingman -
  and if logging what actually happened costs a drawer tap plus a menu
  tap, it does not get logged, and the product's entire premise collapses.

  So: the four daily screens go in a bottom bar under the thumb. The
  drawer stays for everything weekly or monthly - insights, identity,
  memory, categories, settings. Nothing about the platform shell is
  removed; the bar is additive and the drawer still works.

  This is a Type 2 divergence per OPERATING.md section 4 - a knob the
  platform should eventually own, since Park IQ, Haul IQ and Bay IQ are
  all field apps that will want the same thing. Written to be liftable:
  no LifeIQ-specific selectors, tab count driven by markup not CSS.

  Loads AFTER product.css because it overrides platform shell layout at
  touch widths.

  Version History:
    1.8.0 - 2026-07-28 - --topbar-h cut from 72px to 56px on touch.
                         Measured on device the bar was 131px tall: 59 of
                         safe-area inset, which cannot move, plus 72 of
                         actual bar, which can. shell.css raised it from
                         64 to 72 to give 44px controls breathing room -
                         reasonable for an admin product with a title and
                         a user chip in the bar, wrong here, where the bar
                         holds three 44px controls and nothing else. 56
                         leaves 6px above and below them and takes 16px
                         off every screen.
    1.7.0 - 2026-07-27 - Self-contained. Everything the shell needs on
                         touch is decided in this one file, in the last
                         stylesheet the browser loads, with !important.
                         Versions 1.1 through 1.6 each tried to override
                         #iq-root's safe-area padding from here while
                         leaving the rule itself in shell.css, and the
                         measured result never changed: the wordmark kept
                         landing at roughly 59 + 59 + half the bar, which
                         is the inset counted twice. Rather than keep
                         guessing which file wins, this stops depending on
                         winning.
                         The other change that matters: row 1 of the root
                         grid is now auto instead of a calc built from
                         --topbar-h. Every previous version had to keep
                         that expression exactly in step with the topbar's
                         own height, and any drift left the bar
                         overflowing its row and painting over the top of
                         .iq-content. auto asks the browser to measure the
                         bar instead. There is no arithmetic left to get
                         wrong.
                         Login centring is asserted here too. It belongs
                         in shell.css and is already there, but this file
                         is the one that is definitely loading.
    1.0.0 - 2026-07-22 - Initial version.
================================================================================
*/


/* ============================================================================
   The bar itself. Hidden by default - desktop keeps the platform sidebar
   and has no use for it.
   ============================================================================ */

.iq-tabbar {
  display: none;
}


/* ============================================================================
   Touch devices: show the bar, and make room for it.
   ============================================================================ */

@media (pointer: coarse) {

  /* --------------------------------------------------------------------------
     The status bar area belongs to the topbar, and to nothing else.

     .iq-topbar below spans the inset itself: its background starts at the
     very top of the screen and its own padding pushes the hamburger,
     wordmark and mic clear of the clock and battery. So the root must not
     pad as well, or the space is reserved twice.

     Row 1 is auto. It used to be calc(--topbar-h + inset), which had to
     match .iq-topbar's height exactly and silently broke the moment the
     two expressions differed. auto measures the real element.

     !important because this has to win over shell.css regardless of which
     version of that file is deployed.
     -------------------------------------------------------------------------- */

  /*
    56, not the 72 shell.css sets for touch. The bar carries three 44px
    controls and no text, so 72 was padding nothing. The safe-area inset
    above it is fixed and already accounts for most of the height.
  */
  :root {
    --topbar-h: 56px;
  }

  #iq-root {
    padding-top: 0 !important;
    grid-template-rows: auto 1fr !important;
  }

  /* Belongs in shell.css and is already there. Repeated because this file
     is the one confirmed to be reaching the browser. A flex box sized to
     its own contents has nothing to centre within, which is why the login
     card sat at the top. */
  .iq-login-wrap {
    height: 100vh !important;
    height: 100dvh !important;
    box-sizing: border-box !important;
  }

  .iq-tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-topbar, 50);

    /* The safe-area inset is what keeps the tabs above the iPhone home
       indicator. Without it the bottom row of icons sits under the bar
       and is unreliable to tap. */
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);

    background: var(--tabbar-bg);
    border-top: 1px solid var(--tabbar-border);

    /* Frosted so content scrolling underneath stays legible as context
       without competing with the tabs. */
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  .iq-tab {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;

    /* Full-height target. The visible icon is small; the tappable area
       is the whole cell. */
    min-height: var(--tabbar-h);

    background: transparent;
    border: 0;
    padding: 6px 2px;
    cursor: pointer;

    color: var(--text-dim);
    font-family: var(--font-ui, 'Inter', sans-serif);
    font-size: 10px;
    letter-spacing: 0.02em;
    line-height: 1;

    -webkit-tap-highlight-color: transparent;
    transition: color var(--t-fast, 120ms) ease;
  }

  .iq-tab svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .iq-tab.active {
    color: var(--accent);
  }

  .iq-tab:active {
    color: var(--accent-light);
  }

  /* Unread or attention dot, used on Wingman when there is something
     waiting and on Today when the day has not been closed. */
  .iq-tab-dot {
    position: absolute;
    top: 8px;
    margin-left: 16px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--dragon);
  }

  .iq-tab {
    position: relative;
  }


  /* --------------------------------------------------------------------------
     Content has to clear the bar, or the last row of every list is
     permanently unreachable. This is the bug that makes bottom tabs feel
     broken when they are bolted on carelessly.
     -------------------------------------------------------------------------- */

  .iq-content {
    padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 16px);
  }


  /* --------------------------------------------------------------------------
     The drawer still exists for weekly and monthly screens, but it must
     sit above the tab bar when open.
     -------------------------------------------------------------------------- */

  .iq-sidebar {
    z-index: calc(var(--z-topbar, 50) + 1);
  }

  #iq-overlay,
  .sidebar-overlay {
    z-index: var(--z-topbar, 50);
  }


  /* --------------------------------------------------------------------------
     Topbar: centered wordmark, drawer at left, voice at right. The
     platform default puts the page title at left after the toggle;
     LifeIQ centers the mark instead because on a phone the title is
     redundant with the active tab.
     -------------------------------------------------------------------------- */

  .iq-topbar {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    padding: 0 8px;

    /*
      The bar spans the status bar area itself: background from the top of
      the screen, contents pushed clear by this padding. Height is auto
      with a min-height floor rather than a fixed calc, so the bar is
      whatever it needs to be and row 1 of the root grid (auto, above)
      measures it. !important so this holds regardless of which shell.css
      is deployed.
    */
    padding-top: env(safe-area-inset-top, 0px) !important;
    height: auto !important;
    min-height: calc(var(--topbar-h, 72px) + env(safe-area-inset-top, 0px)) !important;
    box-sizing: border-box !important;
  }

  #iq-page-title {
    display: none;
  }

  .iq-brand-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-family: var(--font-display, 'Barlow Condensed', sans-serif);
    font-weight: 700;
    font-size: 19px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-primary);
  }

  .iq-brand-center svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
  }

  .iq-voice-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 0;
    color: var(--accent);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .iq-voice-btn svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .iq-voice-btn.recording {
    color: var(--noise);
  }

}


/* ============================================================================
   Desktop: no tab bar, no centered brand. The platform sidebar is the
   navigation and the topbar behaves as the platform intends.
   ============================================================================ */

@media (pointer: fine) {

  .iq-brand-center,
  .iq-voice-btn {
    display: none;
  }

}