/* CLAUDE 10-09: the phone app shell (the owner, 10-09: the home page on a phone was "janky": a top bar wider than the
   screen so the page scrolled sideways, a Pause pill over the form; and "something like this at the bottom like opus").
   Everything that changes the layout is inside the phone query (below 768 px); the desktop is untouched. phone.js marks
   the active tab and drives the sheet; index.html has #appTabs and #appSheet inside #home.

   What was wrong: on a phone a signed-in page had two stacked bars, a sticky one (logo, New project, the page strip,
   the legal links) and the workspace bar (service switch, Upgrade, bell), and on the Clipping page a third (#landingNav:
   logo, service switch, Dashboard, account name) laid out on one nowrap row 562 px wide in a 390 px screen. The page
   (#home) scrolled sideways. Now the top bar is one row, logo and Upgrade and the bell, on every page; the way around
   the app is the tab bar. */

.app-tabs,
.app-sheet {
  display: none;
}

@media (max-width: 767.98px) {
  /* where the tab bar is, content makes room for it (set on body: the bar, the toast and the banners all read it) */
  body.app-shell.at-home {
    /* the pill (12 px off the bottom, 64 tall) and the raised ＋ with its ring (25 px higher), plus a little air */
    --tabs-h: calc(104px + env(safe-area-inset-bottom, 0px));
  }
  body.app-shell #home::after {
    content: '';
    flex: none;
    height: var(--tabs-h, 0px);
  }
  body.sheet-open #home {
    overflow: hidden; /* iOS scrolls the page behind a modal otherwise */
  }

  /* ----- the top bar: the logo, Upgrade, the bell ----- */
  body.app-shell .home-nav,
  body.app-shell.landing-page .home-nav {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 30;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    height: 56px;
    min-height: 56px;
    padding: 0 16px;
    gap: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    background: rgba(
      11,
      13,
      11,
      0.97
    ); /* CLAUDE 10-11: no backdrop blur here, it re-blurs every scroll frame on an iPhone */
  }
  /* the icon sprite stays (the tab bar draws from it); the rest of the old header goes: the tabs and Terms links are
     in the tab bar and the Account menu */
  body.app-shell .home-nav > :not(.home-brand):not(.icon-sprite) {
    display: none;
  }
  body.app-shell .home-nav .home-brand {
    margin: 0;
    padding: 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-size: 20px;
  }
  body.app-shell .home-nav .home-brand small {
    display: none;
  }
  body.app-shell .workspace-top,
  body.app-shell.landing-page .workspace-top {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 31;
    height: 56px;
    min-height: 56px;
    margin-top: -56px; /* the same row as the logo, which is in .home-nav */
    padding: 0 8px 0 0;
    justify-content: flex-end;
    border: 0;
    background: transparent;
    pointer-events: none;
  }
  body.app-shell .workspace-top > * {
    pointer-events: auto;
  }
  body.app-shell .workspace-top :is(#crumb, .service-switch, .workspace-ready) {
    display: none;
  }
  body.app-shell .top-right {
    gap: 2px;
  }
  body.app-shell .upgrade-btn,
  body.app-shell .notes-bell {
    min-width: 44px;
    min-height: 44px;
  }
  /* the Clipping page's own bar (#landingNav) is the third bar the owner saw: signed in, the shared one above is used */
  body.app-shell.landing-page #landingNav {
    display: none;
  }
  body.app-shell #lp .hero {
    padding-top: 28px;
  }

  /* ----- the tab bar: a floating glass pill ----- */
  body.app-shell.at-home .app-tabs {
    display: block;
    position: fixed;
    z-index: 80;
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    pointer-events: none;
  }
  .app-tabs-pill {
    pointer-events: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 72px 1fr 1fr;
    align-items: center;
    max-width: 420px;
    height: 64px;
    margin: 0 auto;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 32px;
    background: rgba(20, 24, 20, 0.94);
    box-shadow:
      0 14px 40px rgba(0, 0, 0, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
  /* CLAUDE 10-11: the floating tab bar used a 22 px backdrop blur over the scrolling page (re-blurred every frame, the
     biggest scroll cost on an iPhone); a near-opaque fill looks the same and costs nothing */
  .app-tabs-pill {
    background: rgba(20, 24, 20, 0.94);
  }
  .at-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 44px;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: 26px;
    background: transparent;
    color: #b0baaf;
    font-size: 10.5px;
    font-weight: 650;
    line-height: 1;
    letter-spacing: 0.01em;
    -webkit-tap-highlight-color: transparent;
    transition:
      background-color 0.18s ease,
      color 0.18s ease,
      transform 0.12s ease;
  }
  .at-tab svg,
  .at-plus svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .at-tab[aria-current='page'] {
    background: rgba(83, 252, 24, 0.14);
    color: #7dff4f;
  }
  .at-tab:active {
    transform: scale(0.94);
    background: rgba(255, 255, 255, 0.1);
  }
  /* the raised ＋ in the middle */
  .at-plus {
    justify-self: center;
    width: 56px;
    height: 56px;
    margin-top: -20px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--accent, #53fc18);
    color: #061000;
    box-shadow:
      0 0 0 5px rgba(11, 13, 11, 0.9),
      0 10px 26px rgba(83, 252, 24, 0.28);
    -webkit-tap-highlight-color: transparent;
    transition:
      transform 0.14s ease,
      box-shadow 0.14s ease;
  }
  .at-plus svg {
    width: 26px;
    height: 26px;
    stroke-width: 2.4;
  }
  .at-plus:active {
    transform: scale(0.92);
  }
  .at-plus[aria-expanded='true'] svg {
    transform: rotate(45deg);
  }
  .at-plus svg {
    transition: transform 0.18s ease;
  }
  .at-tab:focus-visible,
  .at-plus:focus-visible {
    outline: 3px solid #6dff3d;
    outline-offset: 2px;
  }

  /* ----- the bottom sheet (the ＋ menu and the Account menu) ----- */
  dialog.app-sheet {
    position: fixed;
    inset: auto 0 0 0;
    margin: 0;
    width: 100%;
    max-width: none;
    max-height: min(88dvh, 680px);
    padding: 0 12px max(16px, env(safe-area-inset-bottom));
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid #262626;
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
    background: #111413;
    color: var(--text, #f3f3f3);
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.6);
  }
  dialog.app-sheet[open] {
    display: block;
    animation: as-up 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  }
  dialog.app-sheet[open]::backdrop {
    background: rgba(0, 0, 0, 0.58);
    backdrop-filter: none;
    animation: as-fade 0.22s ease-out;
  }
  dialog.app-sheet.closing {
    animation: as-down 0.2s ease-in forwards;
  }
  dialog.app-sheet.closing::backdrop {
    animation: as-fade 0.2s ease-in reverse forwards;
  }
  @keyframes as-up {
    from {
      transform: translateY(100%);
    }
  }
  @keyframes as-down {
    to {
      transform: translateY(100%);
    }
  }
  @keyframes as-fade {
    from {
      opacity: 0;
    }
  }
  .as-grab {
    display: grid;
    place-items: center;
    width: 100%;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: grab;
  }
  #appSheet .as-grab {
    touch-action: none; /* a drag on the handle is the swipe, not a scroll (the id beats the touch-action rule below) */
  }
  .as-grab i {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: #3b443b;
  }
  .app-sheet h2 {
    margin: 0 8px 8px;
    font-size: 18px;
    font-weight: 650;
    letter-spacing: -0.2px;
  }
  .app-sheet .as-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .as-row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 8px 8px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--text, #f3f3f3);
    font-size: 15px;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.12s ease;
  }
  .as-row:active {
    background: rgba(255, 255, 255, 0.08);
  }
  .as-row:focus-visible {
    outline: 3px solid #6dff3d;
    outline-offset: -3px;
  }
  .as-row svg {
    flex: none;
    width: 40px;
    height: 40px;
    padding: 9px;
    box-sizing: border-box;
    border-radius: 12px;
    background: #1a201a;
    color: #8dff66;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .as-row span {
    display: grid;
    gap: 2px;
    min-width: 0;
  }
  .as-row b {
    font-weight: 600;
  }
  .as-row small {
    color: #a3ada6;
    font-size: 13px;
    line-height: 1.35;
  }
  .as-out,
  .as-main {
    justify-content: center;
    margin-top: 6px;
    min-height: 48px;
    border: 1px solid #262b26;
    text-align: center;
  }
  .as-out {
    color: #ff8a8a;
  }
  .as-alt {
    color: var(--text, #f3f3f3);
  }
  .as-main {
    background: var(--accent, #53fc18);
    border-color: transparent;
    color: #061000;
  }
  .as-main:active {
    background: #46d614;
  }
  .as-who {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 8px 12px;
  }
  .as-avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(83, 252, 24, 0.16);
    color: #8dff66;
    font-size: 18px;
    font-weight: 700;
  }
  .as-who-text {
    display: grid;
    gap: 2px;
    min-width: 0;
  }
  .as-who-text b {
    font-size: 17px;
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .as-who-text small {
    color: #a3ada6;
    font-size: 13px;
  }
  .as-meter {
    height: 6px;
    margin: 0 8px 12px;
    border-radius: 3px;
    background: #1f261f;
    overflow: hidden;
  }
  .as-meter i {
    display: block;
    height: 100%;
    background: var(--accent, #53fc18);
    transform-origin: left;
    transition: transform 0.3s ease;
  }
  .as-meter.low i {
    background: #ffd400;
  }
  .as-note {
    margin: 4px 8px 8px;
    color: #a3ada6;
    font-size: 13px;
    line-height: 1.5;
  }
  .as-legal {
    display: flex;
    gap: 4px;
    margin: 8px 0 0;
  }
  .as-legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 10px;
    color: #a3ada6;
    font-size: 13px;
    text-decoration: none;
  }

  /* ----- things that float over the page make room for the bar ----- */
  body.app-shell.at-home #toast {
    bottom: calc(var(--tabs-h) + 4px);
  }
  body.app-shell.at-home .policy-notice,
  body.app-shell.at-home .rc-consent {
    bottom: var(--tabs-h);
  }

  /* ----- Pause belongs to the landing's demo videos. On a phone it is not a floating pill (it covered the form and
     the plan buttons) but part of the page: landing.js moves it to the end of the hero, right above the demo ----- */
  #lp .pausebtn {
    position: static;
    justify-self: center;
    margin: 6px 0 0;
    height: 44px;
    min-height: 44px;
    background: rgba(255, 255, 255, 0.04);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* ----- forms and dialogs on a phone ----- */
  /* iOS Safari zooms the page when a field under 16 px is focused */
  :is(#home, dialog)
    :is(input, select, textarea):not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']):not(
      [type='file']
    ) {
    font-size: 16px;
  }
  :is(#home, dialog) :is(select, input:not([type])) {
    min-height: 44px;
  }
  :is(#home, dialog) summary {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  :is(#home, dialog) :is(button, a, summary, label, select) {
    touch-action: manipulation;
  }
  /* 44 px touch targets (the audit in analysis/mobile-shell found 36-39 px buttons and a 14 px wide Library tab) */
  :is(#home, dialog) button:not(.at-tab, .at-plus, .as-row, .as-grab, .qhelp),
  .auth-tabs button,
  #landingNav .logo,
  .lib-tabs a {
    min-height: 44px;
    min-width: 44px;
  }
  .lib-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 6px;
  }
  #landingNav .logo {
    display: inline-flex;
    align-items: center;
  }
  /* the Editor page's two start cards: at 120 px the title ran under the icon (editor.css .ed-start-icon is absolute) */
  .ed-hero .ed-start {
    min-height: 140px;
  }
  /* the small round "?" next to a setting: a 44 px tap area around the 20 px mark */
  #home .qhelp {
    position: relative;
  }
  #home .qhelp::after {
    content: '';
    position: absolute;
    inset: -12px;
  }
  .auth-dialog {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    padding: 20px 18px max(20px, env(safe-area-inset-bottom));
    overflow: auto;
    overscroll-behavior: contain;
  }
  /* the form already has a 10 px gap; a 15 px label margin and a 20 px input margin (generic dialog rules) made 45 px */
  .auth-dialog input,
  .auth-dialog .field {
    margin: 0;
  }
  .auth-close,
  .dialog-close {
    width: 44px;
    height: 44px;
  }
  .auth-brand span:last-child {
    margin-left: -8px; /* "Rip" and "Clip" are separate flex items with an 8 px gap: it read "Rip  Clip" */
  }
}

@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  dialog.app-sheet[open],
  dialog.app-sheet[open]::backdrop,
  dialog.app-sheet.closing,
  dialog.app-sheet.closing::backdrop {
    animation: none;
  }
  .at-tab,
  .at-plus,
  .at-plus svg,
  .as-row,
  .as-meter i,
  #lp .pausebtn {
    transition: none;
  }
}

/* CLAUDE 10-11 (the owner on his iPhone: "UI super laggy on phone, feels very clunky, not modern"): how a touch screen
   answers a finger. A tap answers at once and a press is felt: no blue flash, no double-tap wait, a pressed control
   shrinks a little (the individual `scale` property, so it adds to any transform a control already has) and springs back
   on a strong ease-out; the page does not bounce behind a sheet. Hover-less screens only, so a mouse is unchanged. */
@media (max-width: 767.98px) and (hover: none) {
  html {
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
  }
  body.app-shell {
    overscroll-behavior-y: none;
  }
  :where(button, [role='button'], summary, a, label, select, input, [data-act]) {
    touch-action: manipulation;
  }
  :where(button, [role='button'], summary, .look, .preset-tile):not(:disabled) {
    transition: scale 0.16s cubic-bezier(0.23, 1, 0.32, 1);
  }
  :where(button, [role='button'], summary, .look, .preset-tile):not(:disabled):active {
    scale: 0.97;
  }
  /* the ones that already scale themselves (above, phoneed.css, phonescreen.css) and the ones a shrink would look wrong on */
  .at-tab:active,
  .at-plus:active,
  .ph-card:active,
  .ph-tool:active,
  .pe-plus:active,
  .pk-sel:active,
  .pk-add:active,
  .as-row:active,
  .pe-pill:active,
  .tl-block:active,
  input:active,
  select:active {
    scale: none;
  }
}

/* a tab change fades and lifts the new page in (opacity and transform only, 240 ms, the drawer curve) instead of
   swapping it in one frame; the page is shown by app-base.js showPage clearing `hidden`, which starts this each time */
@media (max-width: 767.98px) and (prefers-reduced-motion: no-preference) {
  body.app-shell.at-home .home-page:not([hidden]) {
    animation: ph-page-in 0.24s cubic-bezier(0.32, 0.72, 0, 1) both;
  }
  @keyframes ph-page-in {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
  }
}