/*
 * The phone bars (F15, F31): one sheet. It loads after the looks, so a tie in specificity goes here; the looks (Paint, Matinee,
 * Glass) still paint the bars (colour, edge, blur, shadow), and this sheet sizes them, lays out the phone bar's five places and
 * compacts the bars together.
 *
 * Expanded (at rest, at the top, scrolling up, on a tap): 66 px high, five places of 56 px, an icon of 24 px over a one-line
 * label, the + a 48 px circle on the bar's axis. Every label sits on one baseline (the Profile avatar has the icons' 24 px box).
 * Compact (scrolling down, bottom-bar.js adds .pk-bar-compact to the bar and pk-bars-compact to <html>): the same bar drawn 52 px
 * high, icons only; the top bar drawn 48 px high with its mark and wordmark gone and only the buttons left; the Stream's tab pane gone.
 *
 * The bars are position: fixed or sticky, so nothing in the page moves when they change size. They are drawn smaller with
 * transform and opacity only: the phone bar scales in height by --bb-k (52 / 66) and in width by --bb-w (.93: the pill pulls in
 * 7 % from both sides, the way a tab bar minimises, owner 6 October 2026), both from one transform on one curve, so the two ease in
 * together; each thing inside scales back by 1 / --bb-w across and 1 / --bb-k down, so an icon is never squashed, the + stays a
 * circle, the avatar stays round and a place is still 44 px (56 x .7879 down, 48 x .93 across at the least) to touch; the top bar
 * slides up and each thing in it slides back down. The corners are set for the scaled shape on both axes (a non-uniform scale makes
 * ellipses of equal radii), so the compact ends are round, not oval. Reduced motion and Save-Data set the durations to 0s: the state
 * changes, nothing travels. While a hand is on the page the same geometry is drawn from its progress (the second block below).
 */

/* The For You / Following pane sticks 12 px under the top bar (it used to touch it). Every width: the bar is the same bar. */
html body.pk-obsidian .pk-home-top {
  top: calc(var(--pk-top-height, 60px) + var(--fin-3, 12px));
}

@media (max-width: 759px) {
  html body.pk-obsidian .pk-mobile-nav {
    --bb-k: .7879;
    --bb-w: .93;
    --bb-create: .9167;
    --bb-avatar: 1.1667;
    --bb-drop: 9px;
    --bb-dur: var(--pk-dur-base);
    --bb-dur-fast: var(--pk-dur-fast);
    --bb-fade-in: 80ms;
    box-sizing: border-box;
    height: 66px;
    min-height: 66px;
    padding-block: 4px;
    border-width: 1px;
    border-radius: 33px;
    align-items: center;
    transform-origin: 50% 100%;
    transition: transform var(--bb-dur) var(--pk-ease-move);
  }
  /* Compact: 93 % as wide and 52 px high, from the bottom centre, so it pulls in from both sides and stays centred. The corner is 26 px
     (half of 52) on both axes once scaled: 26 / --bb-w across, 26 / --bb-k down. */
  html body.pk-obsidian .pk-mobile-nav.pk-bar-compact {
    border-radius: calc(26px / var(--bb-w)) / calc(26px / var(--bb-k));
    transform: scale(var(--bb-w), var(--bb-k));
  }

  /* Five places, each 56 px high (44 px when the bar is compact), the icon over the label. The least width is 48 px, so a place is
     still 44 px across once the bar has pulled in (48 x .93); on every phone the grid gives it more. */
  html body.pk-obsidian .pk-mobile-nav > a {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 56px;
    min-width: 48px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border-radius: 28px;
    text-decoration: none;
  }
  html body.pk-obsidian .pk-mobile-nav.pk-bar-compact > a:not(.pk-mobile-create) {
    border-radius: calc(22px / var(--bb-w)) / calc(22px / var(--bb-k));
  }

  /* The icon and the Profile avatar share one 24 px box, so the five labels share one baseline. */
  html body.pk-obsidian .pk-mobile-nav > a:not(.pk-mobile-create) > .pk-ico {
    flex: none;
    width: 24px;
    height: 24px;
    margin: 0;
    transform: none;
    transition: transform var(--bb-dur) var(--pk-ease-move);
  }
  html body.pk-obsidian .pk-mobile-nav > a:not(.pk-mobile-create) > .pk-mobile-avatar {
    flex: none;
    width: 24px;
    height: 24px;
    margin: 0;
    font-size: 12px;
    line-height: 1;
    transform: none;
    transition: transform var(--bb-dur) var(--pk-ease-move);
  }
  html body.pk-obsidian .pk-mobile-nav .pk-mobile-avatar img {
    width: 100%;
    height: 100%;
  }
  /* The current ring sits inside the 24 px box (it used to sit outside it and push the avatar off the line). */
  html body.pk-obsidian .pk-mobile-nav .pk-mobile-profile[aria-current="page"] .pk-mobile-avatar {
    position: relative;
  }
  html body.pk-obsidian .pk-mobile-nav .pk-mobile-profile[aria-current="page"] .pk-mobile-avatar::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px var(--pk-accent);
    pointer-events: none;
  }
  html body.pk-obsidian .pk-mobile-nav .pk-mobile-profile[aria-current="page"] .pk-mobile-avatar:not([data-lit="1"]) {
    box-shadow: none;
  }

  /* The label: one line, 14 px, on the same baseline in every place. */
  html body.pk-obsidian .pk-mobile-nav > a:not(.pk-mobile-create) > span:not(.pk-mobile-avatar) {
    position: relative;
    display: block;
    max-width: 100%;
    height: 14px;
    font-size: var(--pk-type-caption);
    line-height: 14px;
    white-space: nowrap;
    opacity: 1;
    transition: opacity var(--bb-dur-fast) var(--pk-ease-quick) var(--bb-fade-in);
  }

  /* The + is a circle of 48 px on the bar's axis; it never rises above the bar. */
  html body.pk-obsidian .pk-mobile-nav .pk-mobile-create {
    display: grid;
    place-items: center;
    justify-self: center;
    align-self: center;
    width: 48px;
    height: 48px;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    transform-origin: 50% 50%;
    transition: transform var(--bb-dur) var(--pk-ease-move);
  }
  html body.pk-obsidian .pk-mobile-nav .pk-mobile-create .pk-new,
  html body.pk-obsidian .pk-mobile-nav .pk-mobile-create .pk-new-svg,
  html body.pk-obsidian .pk-mobile-nav .pk-mobile-create > .pk-ico {
    width: 30px;
    height: 30px;
  }

  /* The current place keeps its brush underline, as wide as the label and centred under it. */
  html:not([data-look="glass"]) body.pk-obsidian .pk-mobile-nav > a[aria-current="page"] > span:not(.pk-mobile-avatar)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 6px;
    background: var(--pk-accent);
    -webkit-mask: url("/assets/paint/stroke.svg") center / 100% 100% no-repeat;
    mask: url("/assets/paint/stroke.svg") center / 100% 100% no-repeat;
    pointer-events: none;
  }
  /* Compact has no label: the brush that Paint draws on the place itself shows instead, under the icon. It scales back like the
     icon, so it is a true 24 x 6 stroke at the end and at every point of the travel. */
  html body.pk-obsidian .pk-mobile-nav > a[aria-current="page"]::after {
    left: 50%;
    right: auto;
    bottom: 3px;
    width: 24px;
    height: 6px;
    margin-left: -12px;
    opacity: 0;
    transition: opacity var(--bb-dur-fast) var(--pk-ease-quick), transform var(--bb-dur) var(--pk-ease-move);
  }

  /* Compact: labels fade, icons and avatar settle onto the shorter bar's middle, the + eases back to 44 px. Every thing inside undoes
     both of the bar's factors (1 / --bb-w across, 1 / --bb-k down): nothing is squashed or stretched, the + and the avatar stay round. */
  html body.pk-obsidian .pk-mobile-nav.pk-bar-compact > a:not(.pk-mobile-create) > span:not(.pk-mobile-avatar) {
    opacity: 0;
    transition-delay: 0s;
  }
  html body.pk-obsidian .pk-mobile-nav.pk-bar-compact > a:not(.pk-mobile-create) > .pk-ico {
    transform: translateY(var(--bb-drop)) scale(calc(1 / var(--bb-w)), calc(1 / var(--bb-k)));
  }
  html body.pk-obsidian .pk-mobile-nav.pk-bar-compact > a:not(.pk-mobile-create) > .pk-mobile-avatar {
    transform: translateY(var(--bb-drop)) scale(calc(var(--bb-avatar) / var(--bb-w)), calc(var(--bb-avatar) / var(--bb-k)));
  }
  html body.pk-obsidian .pk-mobile-nav.pk-bar-compact .pk-mobile-create {
    transform: scale(calc(var(--bb-create) / var(--bb-w)), calc(var(--bb-create) / var(--bb-k)));
  }
  html body.pk-obsidian .pk-mobile-nav.pk-bar-compact > a[aria-current="page"]::after {
    opacity: 1;
    transform: scale(calc(1 / var(--bb-w)), calc(1 / var(--bb-k)));
  }

  /* Scroll-linked (owner, 6 October 2026): the phone bar follows the hand as the top bar does (bottom-bar.js sets --tb-progress,
     0 open … 1 compact, and data-tb-scroll on <html>). --bb-p is that progress; --bb-x and --bb-y are the bar's two factors at it,
     on the one straight path the class transition takes (1 → --bb-w, 1 → --bb-k together), so the bar narrows and shortens as one
     motion; every thing inside scales back by exactly 1 / --bb-x and 1 / --bb-y, so nothing is squashed at any point of the travel,
     and the labels and the marker cross-fade over it. data-tb-live (finger down) sets the durations to 0 so nothing lags the hand;
     the settle keeps them and eases to the nearer end, then the compact class draws the same geometry alone. The label's fade-in
     delay is kept for a settle that opens (1 - --bb-p is 1) and dropped for one that compacts, as in the two states above.
     Transform and opacity only; the corner shape is the state's, never redrawn by the frame. */
  html[data-tb-live] body.pk-obsidian .pk-mobile-nav {
    --bb-dur: 0s;
    --bb-dur-fast: 0s;
    --bb-fade-in: 0s;
  }
  html[data-tb-scroll] body.pk-obsidian .pk-mobile-nav {
    --bb-p: var(--tb-progress, 0);
    --bb-x: calc(1 - (1 - var(--bb-w)) * var(--bb-p));
    --bb-y: calc(1 - (1 - var(--bb-k)) * var(--bb-p));
    transform: scale(var(--bb-x), var(--bb-y));
  }
  html[data-tb-scroll] body.pk-obsidian .pk-mobile-nav > a:not(.pk-mobile-create) > span:not(.pk-mobile-avatar) {
    opacity: calc(1 - var(--bb-p));
    transition-delay: calc(var(--bb-fade-in) * (1 - var(--bb-p)));
  }
  html[data-tb-scroll] body.pk-obsidian .pk-mobile-nav > a:not(.pk-mobile-create) > .pk-ico {
    transform: translateY(calc(var(--bb-drop) * var(--bb-p))) scale(calc(1 / var(--bb-x)), calc(1 / var(--bb-y)));
  }
  html[data-tb-scroll] body.pk-obsidian .pk-mobile-nav > a:not(.pk-mobile-create) > .pk-mobile-avatar {
    transform: translateY(calc(var(--bb-drop) * var(--bb-p))) scale(calc((1 + (var(--bb-avatar) - 1) * var(--bb-p)) / var(--bb-x)), calc((1 + (var(--bb-avatar) - 1) * var(--bb-p)) / var(--bb-y)));
  }
  html[data-tb-scroll] body.pk-obsidian .pk-mobile-nav .pk-mobile-create {
    transform: scale(calc((1 - (1 - var(--bb-create)) * var(--bb-p)) / var(--bb-x)), calc((1 - (1 - var(--bb-create)) * var(--bb-p)) / var(--bb-y)));
  }
  html[data-tb-scroll] body.pk-obsidian .pk-mobile-nav > a[aria-current="page"]::after {
    opacity: var(--bb-p);
    transform: scale(calc(1 / var(--bb-x)), calc(1 / var(--bb-y)));
  }
}

/* Reduced motion and Save-Data: the same two states, with nothing travelling between them. */
@media (max-width: 759px) and (prefers-reduced-motion: reduce) {
  html body.pk-obsidian .pk-mobile-nav {
    --bb-dur: 0s;
    --bb-dur-fast: 0s;
    --bb-fade-in: 0s;
  }
}
@media (max-width: 759px) {
  html[data-save="1"] body.pk-obsidian .pk-mobile-nav,
  html.pk-save-data body.pk-obsidian .pk-mobile-nav {
    --bb-dur: 0s;
    --bb-dur-fast: 0s;
    --bb-fade-in: 0s;
  }
}

/*
 * The top bar and the Stream's tab pane (F31), on the same decision as the phone bar (<html class="pk-bars-compact">).
 *
 * The top bar is sticky and in the page's flow, so its box stays --pk-top-height (60 px): the page under it never moves. Compact
 * slides it up by 12 px, so 48 px of it show, and each thing in it slides back down by half of that (6 px), so everything sits in
 * the middle of the 48 px and stays a 44 px target with 2 px of air (nothing is scaled, so nothing is squashed). The hamburger is
 * fixed outside the bar and slides up by the same 6 px. The logo link (the mark and the word) fades and rises a little and is then
 * out of the focus order and the accessibility tree until the bars open again; the hamburger, search, bell and chat keep 44 px.
 * The tab pane slides up under the bar and fades; it is not clickable while it is gone and comes back with the bars.
 */
@media (max-width: 759px) {
  html body.pk-obsidian {
    --tb-compact: 48px;
    --tb-lift: calc(var(--pk-top-height, 60px) - var(--tb-compact));
    --tb-drop: calc(var(--tb-lift) / 2);
    --tb-dur: var(--pk-dur-fast);
    --tb-ease: var(--pk-ease-quick);
    --tb-pane-dur: var(--pk-dur-base);
    --tb-pane-lift: 28px;
    --tb-logo-rise: 8px;
  }

  html body.pk-obsidian .pk-top {
    transition: transform var(--tb-dur) var(--tb-ease);
  }
  html.pk-bars-compact body.pk-obsidian .pk-top {
    transform: translateY(calc(-1 * var(--tb-lift)));
  }

  /* What sits in the bar slides back down; the search and the bell already transition their own transform at this length. */
  html body.pk-obsidian .pk-top :is(.pk-header-chat, .pk-join-trigger),
  html body.pk-obsidian .pk-spaces-label {
    transition: transform var(--tb-dur) var(--tb-ease);
  }
  html.pk-bars-compact body.pk-obsidian .pk-top :is(.pk-wordmark, .pk-search-open, #inbox-bell, .pk-header-chat, .pk-join-trigger) {
    transform: translateY(var(--tb-drop));
  }
  html.pk-bars-compact body.pk-obsidian .pk-spaces-label {
    transform: translateY(calc(-1 * var(--tb-drop)));
  }

  /* The logo link, mark and word together: it fades and rises a little, and only the buttons are left on the bar. Visibility is the
     one discrete property here: a visibility transition keeps "visible" for the whole duration and flips at its end, so the fade
     is seen going out and the link is back at once coming in. While hidden it cannot take focus and is not announced; under
     reduced motion and Save-Data the duration is 0s and the switch is immediate. Nothing but transform and opacity moves. */
  html body.pk-obsidian .pk-top .pk-wordmark {
    transition: transform var(--tb-dur) var(--tb-ease), opacity var(--tb-dur) var(--tb-ease), visibility var(--tb-dur) var(--tb-ease);
  }
  html.pk-bars-compact body.pk-obsidian .pk-top .pk-wordmark {
    transform: translateY(calc(var(--tb-drop) - var(--tb-logo-rise)));
    opacity: 0;
    visibility: hidden;
  }

  /* A row that sticks under the bar (the post page's Back row) rides up with it, so no strip of page shows between them. */
  html body.pk-obsidian .pk-detail-bar {
    transition: transform var(--tb-dur) var(--tb-ease);
  }
  html.pk-bars-compact body.pk-obsidian .pk-detail-bar {
    transform: translateY(calc(-1 * var(--tb-lift)));
  }

  /* The Stream's tab pane: up under the bar and gone. */
  html body.pk-obsidian .pk-home-top {
    transition: transform var(--tb-pane-dur) var(--tb-ease), opacity var(--tb-pane-dur) var(--tb-ease);
  }
  html.pk-bars-compact body.pk-obsidian .pk-home-top {
    transform: translateY(calc(-1 * var(--tb-pane-lift)));
    opacity: 0;
    pointer-events: none;
  }

  /* Scroll-linked (owner, 5 October 2026): while bottom-bar.js follows the hand it sets --tb-progress (0 open … 1 compact) on <html>
     and marks it data-tb-scroll; the same geometry as the compact state, by the progress instead of the class, so the top bar compacts
     and the logo fades over the distance the hand moves, and the pane is pushed up with the content one pixel for one pixel
     (--tb-pane-h, its own height) and fades. data-tb-live, on while the finger is down, sets the durations to 0 so nothing lags it;
     the settle keeps the durations and runs to the nearer end. Transform and opacity only, as everything in this sheet. */
  html[data-tb-live] body.pk-obsidian {
    --tb-dur: 0s;
    --tb-pane-dur: 0s;
  }
  html[data-tb-scroll] body.pk-obsidian .pk-top {
    transform: translateY(calc(-1 * var(--tb-lift) * var(--tb-progress, 0)));
  }
  html[data-tb-scroll] body.pk-obsidian .pk-top :is(.pk-search-open, #inbox-bell, .pk-header-chat, .pk-join-trigger) {
    transform: translateY(calc(var(--tb-drop) * var(--tb-progress, 0)));
  }
  html[data-tb-scroll] body.pk-obsidian .pk-spaces-label {
    transform: translateY(calc(-1 * var(--tb-drop) * var(--tb-progress, 0)));
  }
  html[data-tb-scroll] body.pk-obsidian .pk-top .pk-wordmark {
    transform: translateY(calc((var(--tb-drop) - var(--tb-logo-rise)) * var(--tb-progress, 0)));
    opacity: calc(1 - var(--tb-progress, 0));
    visibility: visible;
  }
  html[data-tb-scroll] body.pk-obsidian .pk-detail-bar {
    transform: translateY(calc(-1 * var(--tb-lift) * var(--tb-progress, 0)));
  }
  html[data-tb-scroll] body.pk-obsidian .pk-home-top {
    transform: translateY(calc(-1 * var(--tb-pane-h, 60px) * var(--tb-progress, 0)));
    opacity: calc(1 - var(--tb-progress, 0));
  }
}

/* Reduced motion and Save-Data: the same two states, with nothing travelling between them. */
@media (max-width: 759px) and (prefers-reduced-motion: reduce) {
  html body.pk-obsidian {
    --tb-dur: 0s;
    --tb-pane-dur: 0s;
  }
  html body.pk-obsidian .pk-top :is(.pk-search-open, #inbox-bell, .pk-mark) {
    transition-duration: 0s;
  }
}
@media (max-width: 759px) {
  html[data-save="1"] body.pk-obsidian,
  html.pk-save-data body.pk-obsidian {
    --tb-dur: 0s;
    --tb-pane-dur: 0s;
  }
  html[data-save="1"] body.pk-obsidian .pk-top :is(.pk-search-open, #inbox-bell, .pk-mark),
  html.pk-save-data body.pk-obsidian .pk-top :is(.pk-search-open, #inbox-bell, .pk-mark) {
    transition-duration: 0s;
  }
}