/* The phone tab bar (spec 0060).
 *
 * PHONE ONLY. Above 900px nothing here applies and the site is untouched – 900 is the
 * site's own phone breakpoint (it is where `.hm-search` already hides), not a new one
 * invented for this file.
 *
 * Every number is READ FROM apps/ios/Saga/Saga/Navigation/FloatingTabBar.swift, not
 * chosen here: buttons 41x38, gap 8, outer padding 12/8, 22 from the bottom, icons 18px
 * with home at 22px, press scale 0.9. Change the app and scripts/sync-tab-icons.py plus
 * apps/web/test_web_shell.py will tell you the web has drifted.
 */
/* The intro overlay owns the screen until it removes itself. The bar sat on top of it,
   which Saaim caught immediately: chrome for a page you cannot see yet. :has() tracks the
   overlay's real existence rather than a class someone has to remember to set. tabbar.js
   carries a fallback for engines without :has(). */
body:has(#intro) .tabbar { display: none !important; }

/* Cross-document view transitions: tapping a tab cross-fades instead of flashing white.
   The bar carries its own name so it PERSISTS across the navigation rather than fading
   out and back in - which is what makes it read as one app rather than five pages. */
@view-transition { navigation: auto; }

/* THE TRANSITION WAS THE DELAY, and it was never set - Chrome's default cross-fade is
   250ms, so every tab tap held the old page on screen for a quarter second after the new
   one was ready. Measured in Saaim's own browser over CDP: pages load in 91-359ms with a
   124-192ms first paint, so the wait he reported as "1-2s switching between pages" was
   almost entirely animation playing over a page that had already finished.

   90ms still reads as motion - the bar visibly carries across rather than cutting - but it
   is under the ~100ms threshold where a delay stops being felt as waiting. One variable,
   so making it faster or slower later is one number. */
:root { --vt: 90ms; }
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) { animation-duration: var(--vt); }

/* Somebody who asked for less motion asked for less of THIS. A cross-fade between
   documents is exactly the kind of movement that setting exists to suppress, and at 1ms it
   is a cut rather than a transition without disabling the navigation behaviour itself. */
@media (prefers-reduced-motion: reduce) {
  :root { --vt: 1ms; }
}

@media (max-width: 900px) {
  /* The top row goes entirely: wordmark and the four buttons. The search field is
     already display:none here in the page's own CSS. */
  .hm-nav { display: none !important; }

  /* Nothing may sit under the bar permanently. 38 tall + 2*8 padding + 22 up from the
     bottom + a little air = the reserve. The bar FLOATS over content while scrolling;
     this only guarantees the last line can be reached. */
  body { padding-bottom: calc(38px + 16px + 22px + 12px); }

  .tabbar {
    view-transition-name: saga-tabbar;
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    z-index: 900;
    display: flex; gap: 8px; padding: 8px 12px;
    border-radius: 999px;
    /* GLASS, not a panel. The app is .glassEffect(.regular) – tinted
       .black.opacity(0.3) on home – falling back to .ultraThinMaterial. The tint is
       0.30 and the material does the work; content stays visible through it. */
    background: rgba(0, 0, 0, .30);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .34);
  }
  .tabbar a {
    width: 41px; height: 38px;
    display: grid; place-items: center; position: relative;
    color: rgba(255, 255, 255, .52);
    text-decoration: none; -webkit-tap-highlight-color: transparent;
    transition: transform .12s cubic-bezier(.2, .9, .3, 1.2);
  }
  /* The press is held by JS for a minimum duration, not by :active. The app holds it
     0.1s even on a flick tap (C.minimumPress) so the spring plays instead of being cut
     off one frame in - an interrupted spring reads as a jump. :active ends the moment
     the finger lifts, which is exactly the "doesn't feel the same" Saaim described. */
  .tabbar a.pressing { transform: scale(.9); }    /* C.pressScale */
  .tabbar a[aria-current="page"] { color: #fff; }
  /* The icon is a MASK, not an <img>. The app's SVGs carry their own paint (black on
     some, white on others), so dropping them in as images would render half the bar
     invisible on a dark page. Masking keeps the files byte-identical to the app's –
     which is what the hash test guards – while the colour comes from here, so the
     active/inactive distinction is ours to draw and cannot be lost to the source art.
     Each tab names its own pair; ten rules, all explicit, none inferred from a string. */
  .tabbar .ic {
    display: block; width: 18px; height: 18px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center;  mask-position: center;
    -webkit-mask-size: contain;     mask-size: contain;
  }
  .tabbar a[data-tab="home"] .ic { width: 22px; height: 22px; }

  /* outline when inactive, fill when active - the app's own pairs */
  .tabbar a[data-tab="home"] .ic { -webkit-mask-image: url(/assets/icons/Home.svg); mask-image: url(/assets/icons/Home.svg); }
  .tabbar a[data-tab="home"][aria-current="page"] .ic { -webkit-mask-image: url(/assets/icons/HomeFill.svg); mask-image: url(/assets/icons/HomeFill.svg); }
  .tabbar a[data-tab="search"] .ic { -webkit-mask-image: url(/assets/icons/Search.svg); mask-image: url(/assets/icons/Search.svg); }
  .tabbar a[data-tab="search"][aria-current="page"] .ic { -webkit-mask-image: url(/assets/icons/SearchFill.svg); mask-image: url(/assets/icons/SearchFill.svg); }
  .tabbar a[data-tab="chat"] .ic { -webkit-mask-image: url(/assets/icons/Bell.svg); mask-image: url(/assets/icons/Bell.svg); }
  .tabbar a[data-tab="chat"][aria-current="page"] .ic { -webkit-mask-image: url(/assets/icons/BellFill.svg); mask-image: url(/assets/icons/BellFill.svg); }
  .tabbar a[data-tab="you"] .ic { -webkit-mask-image: url(/assets/icons/You.svg); mask-image: url(/assets/icons/You.svg); }
  .tabbar a[data-tab="you"][aria-current="page"] .ic { -webkit-mask-image: url(/assets/icons/YouFill.svg); mask-image: url(/assets/icons/YouFill.svg); }
  .tabbar a[data-tab="make"] .ic { -webkit-mask-image: url(/assets/icons/Make.svg); mask-image: url(/assets/icons/Make.svg); }
  .tabbar a[data-tab="make"][aria-current="page"] .ic { -webkit-mask-image: url(/assets/icons/MakeFill.svg); mask-image: url(/assets/icons/MakeFill.svg); }
  /* The app's press spring is instant on the icon swap; honour reduced motion. */
  @media (prefers-reduced-motion: reduce) {
    .tabbar a { transition: none; }
  }
}

/* Above the phone breakpoint the bar does not exist at all – not hidden, absent from
   layout, so it can never interfere with the laptop the change promises not to touch. */
@media (min-width: 901px) {
  .tabbar { display: none !important; }
}

/* ---- the three tab screens (spec 0060, phases 8-10) ----------------------------
   Deliberately quiet: these live inside the existing .mk shell, so they inherit its
   type and ground and add only what a list or a profile needs. Every colour is an
   existing token or a plain alpha on white - no new palette entries. */
.sg-btn { font: inherit; font-size: 15px; color: #fff; background: none;
  border: 1px solid rgba(255,255,255,.28); border-radius: 999px;
  padding: 11px 20px; min-height: 44px; cursor: pointer; }
.sg-btn:hover { border-color: rgba(255,255,255,.5); }
.sg-ghost { font-size: 13px; padding: 9px 15px; color: rgba(255,255,255,.7); }
.sg-quiet { color: rgba(255,255,255,.42); }

.sg-me { display: flex; flex-direction: column; gap: 6px; }
.sg-av { width: 72px; height: 72px; border-radius: 999px; object-fit: cover; }
.sg-av-none { background: rgba(255,255,255,.08); }
.sg-name { font-size: 17px; font-weight: 600; margin: 10px 0 0; }
.sg-at, .sg-bio { margin: 0; }
.sg-at { color: rgba(255,255,255,.5); font-family: var(--mono, ui-monospace, monospace); font-size: 13px; }
.sg-bio { margin-top: 8px; }

.sg-notifs, .sg-results { list-style: none; margin: 0; padding: 0; }
.sg-n { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline;
  padding: 14px 0; border-top: 1px solid rgba(255,255,255,.1); font-size: 15px; }
.sg-n:first-child { border-top: none; }
/* Unread is a MARK, not another bold weight. Design law 1: no big bold headlines, and a
   second 800 on a list row is the same move in a smaller place. */
.sg-n.unread { position: relative; }
.sg-n.unread::before { content: ""; position: absolute; left: -10px; top: 21px;
  width: 5px; height: 5px; border-radius: 999px; background: var(--red, #eb3e28); }
.sg-who { color: #fff; }
.sg-what { color: rgba(255,255,255,.62); }
.sg-when { margin-left: auto; color: rgba(255,255,255,.35);
  font-family: var(--mono, ui-monospace, monospace); font-size: 12px; }

.sg-search { margin: 0 0 18px; }
.sg-search input { width: 100%; font: inherit; font-size: 16px; color: #fff;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px; padding: 13px 18px; min-height: 46px; }
.sg-search input::placeholder { color: rgba(255,255,255,.38); }
.sg-r { display: flex; gap: 12px; align-items: center; padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,.1); }
.sg-r:first-child { border-top: none; }
.sg-thumb { width: 64px; height: 36px; object-fit: cover; border-radius: 4px; flex: none;
  display: block; }
/* the empty slot keeps one left edge across a list where some rows have art */
.sg-thumb-none { background: rgba(255,255,255,.06); }
.sg-rt { font-size: 15px; }
.sg-rb { margin-left: auto; color: rgba(255,255,255,.4);
  font-family: var(--mono, ui-monospace, monospace); font-size: 12px; }
.sg-sec { font: 700 11px/1 var(--mono, ui-monospace, monospace); letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.38); margin: 22px 0 6px; }
.sg-sec:first-child { margin-top: 4px; }