/* ==========================================================================
   App shell — Monef layout mirrored for RTL:
   floating sidebar (right) · framed main panel · sticky topbar.
   Desktop (≥1024): fixed-height shell, the main panel scrolls internally.
   Mobile (<1024): document scroll, sidebar becomes a drawer, bottom nav (<768).
   ========================================================================== */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  gap: var(--shell-gap);
  padding: var(--shell-gap);
  height: 100dvh;
  max-width: calc(var(--content-max) + var(--sidebar-w));
  margin-inline: auto;
}
:root[data-sidebar="collapsed"] .app { grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr); }

/* ---------- Sidebar ---------- */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--shell-gap);
  min-height: 0;
  height: 100%;
}
.sidebar__panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: var(--sp-5) var(--sp-3) var(--sp-4);
  overflow: hidden;
}
.sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 var(--sp-3) var(--sp-5);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--divider);
}
.brand { display: inline-flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.brand__mark { width: 34px; height: 34px; flex: none; color: var(--accent); filter: drop-shadow(0 0 14px var(--accent-glow)); }
.brand__name {
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  direction: ltr;
  white-space: nowrap;
}
.brand__name b { font-weight: var(--fw-bold); }
.sidebar__collapse {
  margin-inline-start: auto;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--chip);
  color: var(--text-2);
  transition: background var(--dur-2), color var(--dur-2);
}
.sidebar__collapse:hover { background: var(--chip-hover); color: var(--text); }
/* Only the chevron turns. */
.sidebar__collapse .icon { transition: transform var(--dur-3) var(--ease-out); }
:root[data-sidebar="collapsed"] .sidebar__collapse .icon { transform: rotate(180deg); }

.sidebar__scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; margin-inline: calc(var(--sp-2) * -1); padding-inline: var(--sp-2); scrollbar-width: none; }
.sidebar__scroll::-webkit-scrollbar { display: none; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav + .nav { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--divider); }

.nav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: 50px;
  padding-inline: 5px var(--sp-4);
  border-radius: var(--r-full);
  color: var(--text-2);
  font-size: var(--fs-base);
  white-space: nowrap;
  transition: color var(--dur-2), background var(--dur-2);
}
.nav__chip {
  width: 40px; height: 40px;
  flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--chip);
  transition: background var(--dur-2), color var(--dur-2), transform var(--dur-3) var(--ease-spring);
}
.nav__item:hover { color: var(--text); }
.nav__item:hover .nav__chip { background: var(--chip-hover); }
.nav__item:active .nav__chip { transform: scale(0.92); }
.nav__item.is-active { color: var(--text); background: var(--nav-active-bg); }
.nav__item.is-active .nav__chip {
  background: var(--chip-active);
  color: var(--chip-active-ink);
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.45);
  view-transition-name: nav-active;
}
.nav__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav__count {
  min-width: 22px; height: 22px;
  padding-inline: 7px;
  display: inline-grid; place-items: center;
  border-radius: var(--r-full);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  background: var(--tone-amber-bg);
  color: var(--tone-amber-fg);
}

/* Monef tree sub-navigation */
.nav__sub { position: relative; margin: 2px 0 6px; padding-inline-start: 46px; display: grid; gap: 1px; }
.nav__sub::before {
  content: "";
  position: absolute;
  inset-inline-start: 24px; top: 0; bottom: 18px;
  border-inline-start: 1px solid var(--border-strong);
}
.nav__sub-item {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-2);
  height: 38px;
  padding-inline: var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--text-3);
  font-size: var(--fs-md);
  transition: color var(--dur-2), background var(--dur-2);
}
.nav__sub-item::before {
  content: "";
  position: absolute;
  inset-inline-start: -22px; top: 50%;
  width: 16px;
  border-top: 1px solid var(--border-strong);
}
.nav__sub-item:last-child::before { border-end-start-radius: 10px; }
.nav__sub-item:hover { color: var(--text); background: var(--hover); }
.nav__sub-item.is-active { color: var(--text); }

/* Sidebar cards (Monef credits & user blocks) */
.sidebar-card {
  flex: none;
  background: linear-gradient(180deg, var(--card-2), var(--panel));
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: var(--sp-4);
}
.health-card__top { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.health-card__title { font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--text); }
.health-card__text { font-size: var(--fs-xs); color: var(--text-2); line-height: var(--lh-snug); }

.user-card { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); position: relative; }
.user-card__meta { flex: 1; min-width: 0; line-height: var(--lh-snug); }
.user-card__name { font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--text); }
.user-card__mail { font-size: var(--fs-xs); color: var(--text-2); }

/* Collapsed rail (desktop) */
:root[data-sidebar="collapsed"] .sidebar :is(.brand__name, .nav__label, .nav__count, .nav__sub, .health-card__body, .health-card__action, .user-card__meta, .user-card__menu) { display: none; }
:root[data-sidebar="collapsed"] .sidebar__brand { flex-direction: column; padding-inline: 0; gap: var(--sp-3); }
:root[data-sidebar="collapsed"] .sidebar__collapse { margin-inline-start: 0; }
:root[data-sidebar="collapsed"] .nav__item { justify-content: center; padding: 0; }
:root[data-sidebar="collapsed"] .nav__item.is-active { background: none; }
:root[data-sidebar="collapsed"] .health-card__top { justify-content: center; margin: 0; }
:root[data-sidebar="collapsed"] .user-card { justify-content: center; padding: var(--sp-3) 0; }

/* Rail tooltips (static/js/tooltip.js): while the rail is collapsed on desktop, nav items show their label
   and the toggle its data-tip-collapsed, both toward the content; expanded, the nav items show no tip. */

/* ---------- Main panel ---------- */
.main {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scroll-padding-top: calc(var(--topbar-h) + var(--sp-4));
}

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--topbar-h);
  padding: var(--sp-3) var(--page-pad);
  background: color-mix(in srgb, var(--panel) 86%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
}
.topbar::after {
  content: "";
  position: absolute;
  inset-inline: var(--page-pad);
  bottom: 0;
  border-bottom: 1px solid var(--divider);
}
.topbar__mobile { display: none; align-items: center; gap: var(--sp-2); }
.topbar__mobile .brand__mark { width: 30px; height: 30px; }
.search__placeholder { flex: 1; min-width: 0; text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-btn.topbar__search-mobile { display: none; }
@media (max-width: 767px) { .icon-btn.topbar__search-mobile { display: inline-grid; } }
.topbar__end { margin-inline-start: auto; display: flex; align-items: center; gap: var(--sp-2); }
.topbar__sync { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-3); margin-inline-end: var(--sp-3); white-space: nowrap; }
.topbar__sync b { color: var(--text); font-weight: var(--fw-medium); }
.live-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.live-dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: iv-ping 2.4s var(--ease-out) infinite; }

.main__content {
  flex: 1;
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--sp-7) var(--page-pad) var(--sp-10);
  view-transition-name: page;
}
.main__content:focus { box-shadow: none; }

/* ---------- Page scaffolding ---------- */
.page { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4) var(--sp-6); flex-wrap: wrap; }
.page-head__text { min-width: 0; }
.page-head__title { font-size: var(--fs-3xl); font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
.page-head__sub { margin-top: var(--sp-1); font-size: var(--fs-md); color: var(--text-2); }
.page-head__actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.section-title { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-lg); font-weight: var(--fw-medium); }

/* Navigation progress bar (htmx boosted requests) */
.nav-progress {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-tooltip);
  height: 2px;
  pointer-events: none;
  background: linear-gradient(to left, var(--accent), var(--indigo));
  box-shadow: 0 0 12px var(--accent-glow);
  transform-origin: right;
  transform: scaleX(0);
  opacity: 0;
}
.htmx-request.nav-progress,
html.is-navigating .nav-progress {
  opacity: 1;
  animation: iv-progress 1.8s var(--ease-out) forwards;
}
@keyframes iv-progress { 0% { transform: scaleX(0); } 40% { transform: scaleX(0.55); } 100% { transform: scaleX(0.92); } }

/* ---------- Mobile bottom navigation ---------- */
.bottom-nav { display: none; }

/* ---------- Drawer overlay (mobile sidebar) ---------- */
.shell-overlay { display: none; }

@media (max-width: 1023px) {
  .app {
    display: block;
    height: auto;
    min-height: 100dvh;
    padding: var(--shell-gap);
  }
  .sidebar {
    position: fixed;
    inset-block: var(--shell-gap);
    inset-inline-start: var(--shell-gap);
    z-index: var(--z-drawer);
    width: min(320px, calc(100vw - 2 * var(--shell-gap)));
    height: auto;
    transform: translateX(calc(100% + 2 * var(--shell-gap)));
    transition: transform var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3);
    visibility: hidden;
  }
  .app.is-drawer-open .sidebar { transform: none; visibility: visible; transition: transform var(--dur-3) var(--ease-out); }
  .sidebar__panel, .sidebar-card { box-shadow: var(--shadow-pop); }
  .sidebar__collapse { display: none; }
  .shell-overlay {
    display: block;
    position: fixed; inset: 0;
    z-index: calc(var(--z-drawer) - 1);
    background: var(--overlay);
    backdrop-filter: blur(3px);
    opacity: 0; pointer-events: none;
    transition: opacity var(--dur-3);
  }
  .app.is-drawer-open .shell-overlay { opacity: 1; pointer-events: auto; }
  /* the collapsed rail only exists on desktop */
  :root[data-sidebar="collapsed"] .sidebar :is(.brand__name, .nav__label, .nav__count, .health-card__body, .health-card__action, .user-card__meta, .user-card__menu) { display: revert; }
  :root[data-sidebar="collapsed"] .nav__item { justify-content: flex-start; padding-inline: 5px var(--sp-4); }

  .main { overflow: visible; min-height: calc(100dvh - 2 * var(--shell-gap)); }
  .topbar { top: var(--shell-gap); border-radius: var(--r-2xl) var(--r-2xl) 0 0; }
  .topbar::before {
    content: "";
    position: absolute;
    inset-inline: -1px;
    bottom: 100%;
    height: calc(var(--shell-gap) + 1px);
    background: var(--bg);
  }
  .topbar__mobile { display: flex; }
}

@media (max-width: 767px) {
  .app { padding: 8px 8px calc(84px + env(safe-area-inset-bottom)); }
  .main { border-radius: var(--r-xl); }
  .topbar { top: 8px; padding-inline: var(--sp-3); border-radius: var(--r-xl) var(--r-xl) 0 0; }
  .topbar::before { height: 9px; }
  .topbar::after { inset-inline: var(--sp-3); }
  .topbar__sync, .topbar__search-desktop { display: none !important; }
  .main__content { padding-top: var(--sp-5); }
  .page-head__title { font-size: var(--fs-2xl); }
  .page-head { align-items: flex-start; }
  .page-head__actions { width: 100%; }

  .bottom-nav {
    position: fixed;
    inset-inline: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: var(--z-sticky);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    height: 66px;
    padding-inline: var(--sp-2);
    border-radius: var(--r-full);
    background: color-mix(in srgb, var(--card-2) 88%, transparent);
    border: 1px solid var(--border-strong);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: var(--shadow-2);
  }
  .bottom-nav__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    height: 100%;
    color: var(--text-3);
    font-size: var(--fs-2xs);
    transition: color var(--dur-2);
  }
  .bottom-nav__item.is-active { color: var(--text); }
  .bottom-nav__item.is-active .icon { color: var(--accent); }
  .bottom-nav__fab {
    justify-self: center;
    width: 52px; height: 52px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-ink);
    box-shadow: 0 10px 26px -8px var(--accent-glow);
    transform: translateY(-14px);
    transition: transform var(--dur-2) var(--ease-spring);
  }
  .bottom-nav__fab:active { transform: translateY(-14px) scale(0.92); }
}

/* ---------- View transitions (htmx boosted navigation) ---------- */
/* Snapshots paint above the top layer (dialogs, popovers): app.js finishes a transition on any press or
   key and replays the press on the live page, so nothing opened mid-transition is drawn underneath. */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(page) { animation: iv-vt-out 140ms var(--ease-in-out) both; }
::view-transition-new(page) { animation: iv-vt-in 360ms var(--ease-out) both; }
::view-transition-group(nav-active) { animation-duration: 460ms; animation-timing-function: var(--ease-spring); }
@keyframes iv-vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes iv-vt-in { from { opacity: 0; transform: translateY(12px); } }

/* Theme switch: circular reveal from the toggle (see app.js) */
html.theme-vt .main__content,
html.theme-vt .nav__item.is-active .nav__chip { view-transition-name: none; }
html.theme-vt::view-transition-old(root) { animation: none; z-index: 1; }
html.theme-vt::view-transition-new(root) {
  z-index: 2;
  animation: iv-theme-reveal 620ms var(--ease-in-out) both;
}
@keyframes iv-theme-reveal {
  from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 0%)); }
  to { clip-path: circle(var(--vt-r, 150vmax) at var(--vt-x, 50%) var(--vt-y, 0%)); }
}

/* ---------- Auth layout ---------- */
.auth {
  /* Vertical space the layout uses around its card; viewport-tall cards (.login__shell) subtract it. */
  --auth-chrome: calc(2 * var(--sp-6));
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--sp-6) var(--sp-4);
}

/* ---------- Creator credit (partials/footer.html) ----------
   The quiet last line of every page: in the flow after .main__content (never fixed). On short pages .main's
   flex column pins it to the panel's bottom edge; on phones .app's bottom padding keeps it above the bottom nav.
   English, so the footer is an LTR island; the version uses --font-mono because YekanBakh FaNum would print
   Persian digits. One touch of character: the name warms to indigo → green and its signature swash re-draws on hover. */
.credit {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding: 0 var(--page-pad) var(--sp-5);
  color: var(--text-3);
  font-size: var(--fs-2xs);
  line-height: var(--lh-tight);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
/* Hairlines that fade toward their outer ends (the second one is the first, mirrored). */
.credit::before,
.credit::after {
  content: "";
  flex: 1 1 0;
  max-width: 132px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border-strong));
}
.credit::after { transform: scaleX(-1); }
.credit__line {
  flex: 0 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--sp-1) var(--sp-2);
  min-width: 0;
  margin: 0;
}
.credit__sig { position: relative; display: inline-block; }
.credit__name {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
  color: var(--text-2);
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .credit__name {
    background: linear-gradient(90deg, var(--text-2) 0 46%, var(--indigo-text) 64%, var(--accent-text) 100%) 0 0 / 220% 100% no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: background-position var(--dur-4) var(--ease-out);
  }
}
.credit__swash {
  position: absolute;
  inset-inline: -3px;
  top: calc(100% - 2px);
  width: calc(100% + 6px);
  height: 5px;
  overflow: visible;
  fill: none;
  stroke: var(--text-3);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-dasharray: 1;
  opacity: 0.5;
  transition: stroke var(--dur-3), opacity var(--dur-3);
}
.credit__dot { align-self: center; width: 3px; height: 3px; flex: none; border-radius: 50%; background: currentColor; opacity: 0.7; }
.credit__ver {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding-inline: 7px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-full);
  font-family: var(--font-mono);
  font-size: calc(var(--fs-2xs) * 0.92);
  letter-spacing: 0;
  color: var(--text-3);
  transition: color var(--dur-3), border-color var(--dur-3);
}
@media (hover: hover) {
  .credit__line:hover .credit__name { background-position: 100% 0; }
  .credit__line:hover .credit__swash { stroke: var(--accent); opacity: 0.85; animation: credit-sign 900ms var(--ease-out) both; }
  .credit__line:hover .credit__ver { color: var(--text-2); border-color: color-mix(in srgb, var(--accent) 30%, var(--border-strong)); }
}
@keyframes credit-sign { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .credit__line:hover .credit__swash { animation: none; }
}
/* Sign-in / signed-out error pages: the credit sits under the centred card, at the bottom of the viewport. */
.auth:has(> .credit) {
  --credit-h: 20px;
  --auth-chrome: calc(var(--sp-6) + var(--sp-5) + var(--credit-h) + var(--sp-4));
  grid-template-rows: 1fr auto;
  row-gap: var(--sp-5);
  padding-bottom: var(--sp-4);
}
.auth > .credit { width: 100%; min-height: var(--credit-h); padding: 0; }

/* ---------- Desktop: no visible scrollbars, wide (docked) layout ---------- */
.icon-btn.topbar__wide { display: none; }

@media (min-width: 1024px) {
  /* The shell is exactly one viewport tall and the main panel scrolls itself: never show scrollbars. */
  html:has(> body > .app) { overflow: hidden; }
  .main { scrollbar-width: none; }
  .main::-webkit-scrollbar { display: none; }

  /* Fallback animation when View Transitions are unavailable (see morphLayout in app.js). */
  .app { transition: grid-template-columns var(--dur-3) var(--ease-out), padding var(--dur-3) var(--ease-out), gap var(--dur-3) var(--ease-out); }
  .sidebar, .sidebar__panel, .main { transition: border-radius var(--dur-3) var(--ease-out), padding var(--dur-3) var(--ease-out); }

  /* Wide: the sidebar docks to the right edge, the page fills the rest of the window. */
  :root[data-layout="wide"] .app { padding: 0; gap: 0; max-width: none; }
  :root[data-layout="wide"] .sidebar {
    padding: var(--sp-3);
    background: var(--panel);
    border-inline-end: 1px solid var(--border);
  }
  :root[data-layout="wide"] .sidebar__panel { padding-inline: 0; border-color: transparent; border-radius: 0; background: transparent; }
  :root[data-layout="wide"] .main { border-color: transparent; border-radius: 0; }
  :root[data-layout="wide"] .main__content { max-width: none; }

  /* Toggle: expand ⇄ shrink icons swap with a small spin; the state comes from the root attribute (no flash). */
  .icon-btn.topbar__wide { display: inline-grid; }
  .topbar__wide-icon { grid-area: 1 / 1; display: grid; transition: opacity var(--dur-2), transform var(--dur-3) var(--ease-spring); }
  .topbar__wide-icon--shrink { opacity: 0; transform: scale(0.6) rotate(-90deg); }
  .topbar__wide:hover .topbar__wide-icon--expand { transform: scale(1.14); }
  :root[data-layout="wide"] .topbar__wide { background: var(--accent-soft); color: var(--accent-text); }
  :root[data-layout="wide"] .topbar__wide-icon--expand { opacity: 0; transform: scale(0.6) rotate(90deg); }
  :root[data-layout="wide"] .topbar__wide-icon--shrink { opacity: 1; transform: none; }
  :root[data-layout="wide"] .topbar__wide:hover .topbar__wide-icon--shrink { transform: scale(0.88); }
}

/* Layout morph (View Transition): sidebar and main panel animate their boxes; content stays crisp
   (no stretching) because each snapshot keeps its natural size, anchored to the RTL start corner. */
html.layout-vt :is(.app, .sidebar, .sidebar__panel, .main) { transition: none !important; }
html.layout-vt .sidebar { view-transition-name: iv-sidebar; }
html.layout-vt .main { view-transition-name: iv-main; }
html.layout-vt .main__content,
html.layout-vt .nav__item.is-active .nav__chip { view-transition-name: none; }
html.layout-vt::view-transition-group(iv-sidebar),
html.layout-vt::view-transition-group(iv-main) {
  animation-duration: 560ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
html.layout-vt::view-transition-old(iv-sidebar),
html.layout-vt::view-transition-new(iv-sidebar),
html.layout-vt::view-transition-old(iv-main),
html.layout-vt::view-transition-new(iv-main) {
  width: 100%;
  height: 100%;
  object-fit: none;
  object-position: 100% 0;
}
html.layout-vt::view-transition-old(iv-sidebar),
html.layout-vt::view-transition-old(iv-main) { animation: iv-layout-out 240ms var(--ease-out) both; }
html.layout-vt::view-transition-new(iv-sidebar),
html.layout-vt::view-transition-new(iv-main) { animation: iv-layout-in 420ms var(--ease-out) both; }
@keyframes iv-layout-out { to { opacity: 0; } }
@keyframes iv-layout-in { from { opacity: 0; } }