/* 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));
  }
  /* CLAUDE 10-18 (design polish B3b): the room for the tab bar is padding at the foot of the scroller. It was an empty ::after
     box of the same height at the end of the content, which the browser measured as a layout shift of 0.128 on every page
     change (the invisible box moved as the page above it grew or shrank). Padding is no box, so nothing is there to move. */
  body.app-shell #home {
    padding-bottom: 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: 0;
    border-radius: 32px;
    background: rgba(36, 36, 40, 0.96);
    box-shadow: var(--e-float);
  }
  /* 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. 10-12: Graphite overlay */
  .app-tabs-pill {
    background: rgba(36, 36, 40, 0.96);
  }
  .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: var(--r-xl);
    background: transparent;
    color: var(--c-fg-3);
    font-size: var(--t-meta);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    -webkit-tap-highlight-color: transparent;
    transition:
      var(--m-hover),
      scale 220ms var(--ease-spring);
  }
  .at-tab svg,
  .at-plus svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  /* CLAUDE 10-12 Graphite: the open tab is bright text and icon, no green pill.
     CLAUDE 10-18 (design polish B3b, 4.5): the open tab's icon is filled and springs in (160 ms, --ease-spring): a change of
     state that is felt, not only coloured. The fill is the icon's own colour at a low strength, so an open line (the
     analytics curve) is not turned into a blob. Reduced motion keeps the fill and drops the spring. */
  .at-tab[aria-current='page'] {
    background: transparent;
    color: var(--c-fg);
  }
  .at-tab[aria-current='page'] svg {
    fill: currentColor;
    fill-opacity: 0.22;
    animation: at-pop 160ms var(--ease-spring);
  }
  @keyframes at-pop {
    from {
      scale: 0.82;
    }
  }
  .at-tab:active {
    background: rgba(255, 255, 255, 0.06);
  }
  /* 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(--c-primary);
    color: var(--c-primary-ink);
    box-shadow:
      0 0 0 5px var(--c-canvas),
      0 10px 26px rgba(0, 0, 0, 0.5);
    -webkit-tap-highlight-color: transparent;
    transition:
      var(--m-hover),
      scale 220ms var(--ease-spring);
  }
  .at-plus svg {
    width: 26px;
    height: 26px;
    stroke-width: 2.4;
  }
  /* the plus turns into a cross while the Create sheet is up (a state change: it rotates, springy, and returns) */
  .at-plus[aria-expanded='true'] svg {
    rotate: 45deg;
  }
  .at-plus svg {
    transition: rotate 220ms var(--ease-spring);
  }
  .at-tab:focus-visible,
  .at-plus:focus-visible {
    outline: 2px solid var(--c-focus);
    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: 0;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    background: var(--c-overlay);
    color: var(--c-fg);
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.6);
  }
  /* CLAUDE 10-18 (design polish B3b, P8): in 380 ms on the sheet curve, out the way it came in 260 ms on an ease-out (the old
     exit was an ease-in: a slow start at the moment the finger is watching). The dimming layer is .as-scrim (phone.js), so
     a drag can make it follow the sheet; the dialog's own ::backdrop stays clear and only catches the tap outside. */
  dialog.app-sheet[open] {
    display: block;
    animation: as-up var(--d-sheet) var(--ease-sheet);
  }
  dialog.app-sheet[open]::backdrop,
  dialog.app-sheet.closing::backdrop {
    background: transparent;
    backdrop-filter: none;
    animation: none;
  }
  dialog.app-sheet.closing {
    animation: as-down var(--d-sheet-out) var(--ease-out) forwards;
  }
  .as-scrim {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.58);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--d-exit) var(--ease-out);
  }
  .as-scrim.on {
    opacity: 1;
    transition-duration: var(--d-sheet);
  }
  @keyframes as-up {
    from {
      transform: translateY(100%);
    }
  }
  @keyframes as-down {
    to {
      transform: translateY(100%);
    }
  }
  .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: rgba(255, 255, 255, 0.2);
  }
  .app-sheet h2 {
    margin: 0 8px 8px;
    font-size: var(--t-title);
    font-weight: 600;
    letter-spacing: 0;
  }
  .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: var(--r-lg);
    background: transparent;
    color: var(--text, #f3f3f3);
    font-size: 15px;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--d-press) ease;
  }
  .as-row:active {
    background: rgba(255, 255, 255, 0.06);
  }
  .as-row:focus-visible {
    outline: 2px solid var(--c-focus);
    outline-offset: -2px;
  }
  .as-row svg {
    flex: none;
    width: 40px;
    height: 40px;
    padding: 9px;
    box-sizing: border-box;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.05);
    color: var(--c-fg-2);
    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: var(--c-fg-3);
    font-size: var(--t-label);
    line-height: 1.35;
  }
  .as-out,
  .as-main {
    justify-content: center;
    margin-top: 6px;
    min-height: 48px;
    border: 0;
    text-align: center;
  }
  .as-out {
    color: var(--c-danger);
  }
  .as-alt {
    color: var(--c-fg);
  }
  .as-main {
    background: var(--c-primary);
    border-color: transparent;
    color: var(--c-primary-ink);
  }
  .as-main:active {
    background: var(--c-primary-hover);
  }
  .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(255, 255, 255, 0.08);
    color: var(--c-fg);
    font-size: 17px;
    font-weight: 600;
  }
  .as-who-text {
    display: grid;
    gap: 2px;
    min-width: 0;
  }
  .as-who-text b {
    font-size: var(--t-title);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .as-who-text small {
    color: var(--c-fg-3);
    font-size: var(--t-label);
  }
  .as-meter {
    height: 4px;
    margin: 0 8px 12px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
  }
  .as-meter i {
    display: block;
    height: 100%;
    background: var(--c-fg);
    transform-origin: left;
    transition: transform var(--d-enter) var(--ease-out);
  }
  .as-meter.low i {
    background: #ffd400;
  }
  .as-note {
    margin: 4px 8px 8px;
    color: var(--c-fg-3);
    font-size: var(--t-label);
    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: var(--c-fg-2);
    font-size: 13px;
    text-decoration: none;
  }

  /* ----- things that float over the page make room for the bar ----- */
  body.app-shell.at-home #toast,
  body.app-shell.at-home .app-update {
    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" */
  }
}

/* calm, not dead (design polish 3.5): the sheet fades in (the dimming layer fades with it), nothing slides, springs or
   rotates; colour changes stay */
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  dialog.app-sheet[open] {
    animation: m-fade var(--d-ui) ease;
  }
  .at-tab[aria-current='page'] svg {
    animation: none;
  }
  .at-plus svg,
  .as-meter i {
    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;
  }
  /* CLAUDE 10-18 (design polish B3b): the press itself is the shared one (motion.css P1: scale: var(--press) on a button, a
     quick spring back, and colour changes still transition). This file used to restate it with a transition of `scale`
     alone, which also stopped every colour change on a phone. Only what is not a button is added here, and what a shrink
     would look wrong on is left out. */
  :is(.look, .preset-tile) {
    transition:
      var(--m-hover),
      scale 220ms var(--ease-spring);
  }
  :is(.look, .preset-tile):not(:disabled):active {
    scale: var(--press-lg);
  }
  .as-row:not(:disabled):active,
  .pe-pill:not(:disabled):active,
  .tl-block:not(:disabled):active,
  input:active,
  select:active {
    scale: none;
  }
}

/* CLAUDE 10-18 (design polish B3b): a tab change on a phone is the shared page change (motion.css m-page-in, on every
   .home-page: it fades and rises 4 px in 240 ms on an ease-out, and only fades under reduced motion). The phone's own
   `ph-page-in` (8 px on the drawer curve, off under reduced motion) is gone: two page changes, one of them hard-coded. */