/* Application shell: sidebar + top bar + page. Mobile first; the sidebar is a drawer below 64rem. */
.shell { height: 100dvh; display: flex; } /* bounded: the page body scrolls, not the window */
.shell__main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }

.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: var(--m-z-panel);
  width: min(var(--m-sidebar-width), 86vw);
  display: flex; flex-direction: column;
  background: var(--m-sidebar-bg); color: var(--m-sidebar-fg);
  border-right: 1px solid var(--m-sidebar-border);
  transform: translateX(-100%);
  transition: transform .2s ease, width .2s ease;
}
.sidebar--open { transform: none; box-shadow: var(--m-shadow-lg); }
.sidebar__backdrop { position: fixed; inset: 0; z-index: calc(var(--m-z-panel) - 1); background: var(--m-backdrop); }
/* The brand row: the same air on the four sides of the 2rem logo (topbar 3.5rem → .75rem) */
.sidebar__brand { display: flex; align-items: center; gap: calc(var(--m-space) * 2); height: var(--m-topbar-height); padding: 0 calc((var(--m-topbar-height) - 2rem) / 2); border-bottom: 1px solid var(--m-sidebar-border); flex-shrink: 0; }
.brand { display: flex; align-items: center; gap: calc(var(--m-space) * 2.5); color: var(--m-sidebar-fg-strong); font-weight: 700; font-size: var(--m-font-size-lg); min-width: 0; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand__logo { height: 2rem; width: auto; max-width: 2.5rem; object-fit: contain; }
.brand__logo--wide { max-width: 11rem; max-height: 2.25rem; }
.brand__logo--small { display: none; max-width: 2.25rem; }
.brand__mark { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--m-radius); background: var(--m-accent); color: var(--m-on-color); font-size: .95rem; flex-shrink: 0; }
.brand__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar__close { margin-left: auto; color: var(--m-sidebar-muted); }
.sidebar__scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.sidebar__search { padding: calc(var(--m-space) * 3) calc(var(--m-space) * 3) calc(var(--m-space) * 1); }
.search-field { position: relative; display: block; }
.search-field__icon { position: absolute; left: .75rem; top: 50%; translate: 0 -50%; color: var(--m-sidebar-muted); pointer-events: none; font-size: var(--m-font-size-sm); }
.search-field input { width: 100%; padding-left: 2.25rem; min-height: 2.25rem; background: var(--m-sidebar-hover); border-color: transparent; color: var(--m-sidebar-fg-strong); }
.search-field input::placeholder { color: var(--m-sidebar-muted); }
.sidebar__nav { padding: calc(var(--m-space) * 2) calc(var(--m-space) * 2) calc(var(--m-space) * 4); }
.sidebar__empty { padding: calc(var(--m-space) * 4); color: var(--m-sidebar-muted); font-size: var(--m-font-size-sm); }

.menu-group { position: relative; margin-bottom: calc(var(--m-space) * 1); }
.menu-group__flyout-title { display: none; }
.menu-group--links { padding-bottom: calc(var(--m-space) * 2); margin-bottom: calc(var(--m-space) * 2); border-bottom: 1px solid var(--m-sidebar-border); }
.menu-group--links .menu-group__items { padding-left: 0; }
.menu-group__header {
  display: flex; align-items: center; gap: calc(var(--m-space) * 2.5); width: 100%;
  padding: calc(var(--m-space) * 2) calc(var(--m-space) * 2.5);
  background: none; border: 0; border-radius: var(--m-radius);
  color: var(--m-sidebar-fg-strong); font-weight: 600; font-size: var(--m-font-size-sm); letter-spacing: .01em;
  cursor: pointer; text-align: left; text-decoration: none;
}
.menu-group__header:hover { background: var(--m-sidebar-hover); text-decoration: none; }
.menu-group__icon { width: 1.25rem; text-align: center; color: var(--m-sidebar-muted); font-size: .95rem; }
.menu-group--active .menu-group__icon { color: var(--m-accent-ink); }
.menu-group__label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-group__chevron { font-size: var(--m-font-size-2xs); color: var(--m-sidebar-muted); transition: transform .2s; }
.menu-group--open .menu-group__chevron { transform: rotate(180deg); }
.menu-group__items { list-style: none; padding-left: calc(var(--m-space) * 2); }
.menu-item { display: flex; align-items: center; border-radius: var(--m-radius); }
.menu-item:hover { background: var(--m-sidebar-hover); }
.menu-item--active { background: var(--m-sidebar-active); }
.menu-item--active .menu-item__link { color: var(--m-sidebar-active-fg); font-weight: 600; }
.menu-item__link { flex: 1; min-width: 0; display: flex; align-items: center; gap: calc(var(--m-space) * 2.5); padding: calc(var(--m-space) * 1.75) calc(var(--m-space) * 2.5); color: var(--m-sidebar-fg); text-decoration: none; font-size: var(--m-font-size-sm); }
.menu-item__link:hover { text-decoration: none; color: var(--m-sidebar-fg-strong); }
.menu-item__icon { width: 1.25rem; text-align: center; font-size: var(--m-font-size-xs); color: var(--m-sidebar-muted); }
.menu-item--active .menu-item__icon { color: var(--m-sidebar-active-fg); }
.menu-item__label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-item__badge { margin-left: auto; }
.menu-item__add { display: none; padding: 0 calc(var(--m-space) * 2.5); color: var(--m-sidebar-muted); font-size: var(--m-font-size-xs); align-self: stretch; align-items: center; }
.menu-item:hover .menu-item__add, .menu-item__add:focus-visible { display: flex; }
.menu-item__add:hover { color: var(--m-sidebar-fg-strong); text-decoration: none; }
.menu-item--hidden, .menu-group--hidden { display: none; }

.topbar {
  position: sticky; top: 0; z-index: var(--m-z-bar);
  display: flex; align-items: center; gap: calc(var(--m-space) * 2);
  height: var(--m-topbar-height); padding: 0 calc(var(--m-space) * 3);
  background: var(--m-topbar-bg); color: var(--m-topbar-fg);
  border-bottom: 1px solid var(--m-topbar-border);
}
.topbar__menu { display: inline-grid; }
.topbar__collapse { display: none; }
.topbar__link { display: inline-flex; align-items: center; gap: calc(var(--m-space) * 1.5); padding: calc(var(--m-space) * 1.5) calc(var(--m-space) * 2.5); border-radius: var(--m-radius); color: inherit; font-size: var(--m-font-size-sm); font-weight: 500; background: none; border: 0; cursor: pointer; opacity: .85; }
.topbar__link:hover, .topbar__link--active { opacity: 1; background: color-mix(in oklab, currentColor, transparent 90%); text-decoration: none; }
.topbar__heading { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: calc(var(--m-space) * 1) calc(var(--m-space) * 3); }
.topbar__title { font-size: 1.15rem; font-weight: 700; color: var(--m-topbar-fg-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.topbar .topbar__crumbs { display: none; flex-wrap: nowrap; white-space: nowrap; min-width: 0; color: inherit; opacity: .8; }  /* inherits --m-topbar-fg (navbar-dark, navbar-primary) */
.topbar .topbar__crumbs a { color: inherit; }
.topbar__title + .topbar__crumbs::before { content: ""; display: inline-block; width: 1px; height: 1.1em; background: currentColor; opacity: .4; margin-right: calc(var(--m-space) * 1); align-self: center; }
.topbar__actions { display: flex; flex-wrap: nowrap; gap: calc(var(--m-space) * 2); flex-shrink: 0; }
.topbar__actions .button > span { display: none; }
.topbar__spacer { flex: 1; }
.topbar__tools { display: flex; align-items: center; gap: calc(var(--m-space) * 1); }
.sidebar__footer { flex-shrink: 0; border-top: 1px solid var(--m-sidebar-border); }
.sidebar__tools:empty { display: none; }
.user-card { display: block; }
.user-button { display: flex; align-items: center; gap: calc(var(--m-space) * 2.5); width: 100%; height: var(--m-bottombar-height); padding: 0 calc(var(--m-space) * 3) 0 calc(var(--m-space) * 4); border: 0; background: none; color: var(--m-sidebar-fg); cursor: pointer; text-align: left; }
.user-button:hover { background: var(--m-sidebar-hover); }
.user-button__text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.user-button__name { font-weight: 600; font-size: var(--m-font-size-sm); color: var(--m-sidebar-fg-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-button__email { font-size: var(--m-font-size-xs); color: var(--m-sidebar-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-button__chevron { font-size: var(--m-font-size-2xs); color: var(--m-sidebar-muted); }
.user-menu { min-width: 16rem; }
.user-menu__modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--m-space) * 1); padding: calc(var(--m-space) * 1) calc(var(--m-space) * 2) calc(var(--m-space) * 2); border-bottom: 1px solid var(--m-border); margin-bottom: calc(var(--m-space) * 1.5); }
.user-menu__mode { display: flex; flex-direction: column; align-items: center; gap: calc(var(--m-space) * 1); padding: calc(var(--m-space) * 2) calc(var(--m-space) * 1); border: 1px solid var(--m-border); border-radius: var(--m-radius); background: none; color: var(--m-fg-muted); font-size: var(--m-font-size-xs); cursor: pointer; }
.user-menu__mode:hover { background: var(--m-surface-3); color: var(--m-fg-strong); }
.user-menu__mode--active { border-color: var(--m-primary); background: var(--m-primary-soft); color: var(--m-primary-ink); }
.user-menu__languages { display: block; padding-bottom: calc(var(--m-space) * 1.5); margin-bottom: calc(var(--m-space) * 1.5); border-bottom: 1px solid var(--m-border); }
.user-menu__language { flex: 1; }
.user-menu__code { font-size: var(--m-font-size-xs); color: var(--m-fg-muted); letter-spacing: .04em; }
.sidebar__environment { margin-left: auto; text-transform: uppercase; letter-spacing: .04em; flex-shrink: 0; }
.sidebar__environment + .sidebar__close { margin-left: calc(var(--m-space) * 1); }
.avatar { display: grid; place-items: center; flex-shrink: 0; width: 2rem; height: 2rem; border-radius: var(--m-radius-pill); background: var(--m-primary); color: var(--m-primary-contrast); font-weight: 600; font-size: var(--m-font-size-sm); }

/* The page body is the scroll container and the bottom bar a plain flex child below it:
   no sticky positioning, so the bar sits at the bottom in every browser. */
.page { flex: 1; display: flex; flex-direction: column; width: 100%; min-width: 0; min-height: 0; overflow: hidden; }
.page__body { flex: 1 1 auto; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; width: 100%; max-width: 100rem; margin: 0 auto; padding: calc(var(--m-space) * 4) calc(var(--m-space) * 4) calc(var(--m-space) * 8); }
.page--with-bottombar .page__body { padding-bottom: calc(var(--m-space) * 4); }
.bottombar { position: static; flex-shrink: 0; background: var(--m-surface); border-top: 1px solid var(--m-border); }
.bottombar__inner { width: 100%; max-width: 100rem; margin: 0 auto; min-height: var(--m-bottombar-height); display: flex; align-items: center; padding: calc(var(--m-space) * 1.5) calc(var(--m-space) * 4); }
.bottombar__inner > * { flex: 1; min-width: 0; }
.page__subtitle { color: var(--m-fg-muted); margin: calc(var(--m-space) * 1) 0 0; }
.page__actions { display: flex; flex-wrap: wrap; gap: calc(var(--m-space) * 2); }
.page__actions ul { list-style: none; display: contents; }
.breadcrumbs { font-size: var(--m-font-size-sm); color: var(--m-fg-muted); display: flex; flex-wrap: nowrap; align-items: center; gap: calc(var(--m-space) * 1.5); overflow: hidden; }
.breadcrumbs a { color: var(--m-fg-muted); }
.breadcrumbs__sep { opacity: .5; }
.page-footer { display: flex; justify-content: space-between; gap: calc(var(--m-space) * 3); padding: calc(var(--m-space) * 3) calc(var(--m-space) * 4); font-size: var(--m-font-size-xs); color: var(--m-fg-muted); border-top: 1px solid var(--m-border); }

.dashboard-grid { display: grid; gap: calc(var(--m-space) * 4); }
.app-cards { display: grid; gap: calc(var(--m-space) * 4); grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
.dashboard-hello { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: calc(var(--m-space) * 2); margin-bottom: calc(var(--m-space) * 5); }
.dashboard-hello h2 { font-size: 1.35rem; font-weight: 700; color: var(--m-fg-strong); margin: 0; }
.dashboard-hello p { margin: 0; color: var(--m-fg-muted); }
.app-card__models { list-style: none; }
.app-card__model { display: flex; align-items: center; gap: calc(var(--m-space) * 2); padding: calc(var(--m-space) * 1.5) calc(var(--m-space) * 2) calc(var(--m-space) * 1.5) calc(var(--m-space) * 4); border-top: 1px solid var(--m-border); }
.app-card__model:hover { background: var(--m-surface-2); }
.app-card__name { flex: 1; min-width: 0; display: flex; align-items: center; gap: calc(var(--m-space) * 2.5); color: var(--m-fg-strong); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.app-card__name:hover { color: var(--m-primary-ink); text-decoration: none; }
.app-card__name i { width: 1.25rem; text-align: center; color: var(--m-fg-muted); font-size: var(--m-font-size-sm); flex-shrink: 0; }
.app-card__count { flex-shrink: 0; min-width: 2rem; text-align: center; font-size: var(--m-font-size-xs); font-weight: 600; color: var(--m-fg-muted); background: var(--m-surface-3); border-radius: var(--m-radius-pill); padding: .15rem .5rem; }
.app-card__add { flex-shrink: 0; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--m-radius); color: var(--m-fg-muted); text-decoration: none; }
.app-card__add:hover { background: var(--m-primary-soft); color: var(--m-primary-ink); text-decoration: none; }
.activity { list-style: none; }
.activity__item { display: flex; gap: calc(var(--m-space) * 3); padding: calc(var(--m-space) * 2.5) calc(var(--m-space) * 4); border-top: 1px solid var(--m-border); }
.activity__icon { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: var(--m-radius-pill); font-size: var(--m-font-size-xs); flex-shrink: 0; background: var(--m-surface-3); color: var(--m-fg-muted); }
.activity__item--add .activity__icon { background: var(--m-success-soft); color: var(--m-success-ink); }
.activity__item--change .activity__icon { background: var(--m-info-soft); color: var(--m-info-ink); }
.activity__item--delete .activity__icon { background: var(--m-danger-soft); color: var(--m-danger-ink); }
.activity__body { min-width: 0; display: flex; flex-direction: column; }
.activity__body a, .activity__body span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.activity__meta { color: var(--m-fg-muted); }

/* Login and logged-out pages: brand panel + form on wide screens, stacked on small ones */
.auth { min-height: 100dvh; display: flex; flex-direction: column; background: var(--m-bg); }
.auth__side { position: relative; display: flex; color: var(--m-primary-contrast); background: linear-gradient(160deg, var(--m-primary), color-mix(in oklab, var(--m-primary), black 30%)); }
.auth__side::after { content: ""; position: absolute; inset: 0; background: radial-gradient(40rem 20rem at 110% -20%, rgb(255 255 255 / .18), transparent 60%); pointer-events: none; }
.auth__side-inner { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; gap: calc(var(--m-space) * 6); width: 100%; padding: calc(var(--m-space) * 6) calc(var(--m-space) * 6); }
.auth__brand { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--m-space) * 3); }
.auth__logo-tile { display: grid; place-items: center; padding: calc(var(--m-space) * 2.5); background: #fff; /* a real white tile for the logo, on the brand gradient in both modes */ border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow-lg); }
.auth__logo-tile--mark { width: 3.5rem; height: 3.5rem; color: var(--m-primary); font-size: 1.6rem; font-weight: 800; }
.auth__logo { height: 2.5rem; max-width: 12rem; object-fit: contain; }
.auth__title { font-size: 1.6rem; font-weight: 700; color: inherit; margin: 0; }
.auth__welcome { margin: 0; color: color-mix(in oklab, var(--m-primary-contrast), transparent 20%); max-width: 26rem; line-height: 1.5; }
.auth__side-footer { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--m-space) * 3); font-size: var(--m-font-size-xs); color: color-mix(in oklab, var(--m-primary-contrast), transparent 30%); }
.auth__main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(var(--m-space) * 8) calc(var(--m-space) * 5); }
.auth__panel { width: 100%; max-width: 24rem; display: flex; flex-direction: column; gap: calc(var(--m-space) * 5); }
.auth__panel--center { max-width: 26rem; align-items: center; text-align: center; padding: calc(var(--m-space) * 10) calc(var(--m-space) * 8); background: var(--m-surface); border: 1px solid var(--m-border); border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow-lg); }
.auth__heading h2, .auth__heading-title { font-size: var(--m-font-size-2xl); font-weight: 700; color: var(--m-fg-strong); margin: 0; }
.auth__heading p { margin: calc(var(--m-space) * 1.5) 0 0; color: var(--m-fg-muted); }
.auth__form { display: flex; flex-direction: column; gap: calc(var(--m-space) * 4); }
.auth__form .field__control--icon input { padding-left: 2.6rem; min-height: 2.75rem; }
.field__control--icon .field__icon { position: absolute; left: .9rem; top: 50%; translate: 0 -50%; color: var(--m-fg-muted); font-size: .9rem; pointer-events: none; }
.button--lg { min-height: 2.75rem; font-size: 1rem; }
.auth__link { text-align: center; font-size: var(--m-font-size-sm); }
.auth__status { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: var(--m-radius-pill); background: var(--m-success-soft); color: var(--m-success-ink); font-size: 1.6rem; }
.auth__text { margin: 0; color: var(--m-fg-muted); line-height: 1.5; }
.auth__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--m-space) * 2); }
.auth__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: calc(var(--m-space) * 4); padding-top: calc(var(--m-space) * 2); color: var(--m-fg-muted); }
.auth__tools:empty { display: none; }
.auth__modes { display: inline-flex; gap: calc(var(--m-space) * .5); }
.auth__modes .icon-button--active { background: var(--m-primary-soft); color: var(--m-primary-ink); opacity: 1; }
.auth__languages { display: inline-flex; gap: calc(var(--m-space) * .5); }
.auth__language { padding: calc(var(--m-space) * 1) calc(var(--m-space) * 2); border: 0; border-radius: var(--m-radius); background: none; color: var(--m-fg-muted); font-size: var(--m-font-size-xs); font-weight: 600; letter-spacing: .04em; cursor: pointer; }
.auth__language:hover { background: var(--m-surface-3); color: var(--m-fg-strong); }
.auth__language--active { background: var(--m-primary-soft); color: var(--m-primary-ink); }
.auth__footer { margin-top: calc(var(--m-space) * 6); font-size: var(--m-font-size-xs); color: var(--m-fg-muted); }
@media (min-width: 64rem) {
  .auth:not(.auth--single) { flex-direction: row; }
  .auth:not(.auth--single) .auth__side { flex: 0 0 42%; max-width: 34rem; min-height: 100dvh; }
  .auth:not(.auth--single) .auth__side-inner { padding: calc(var(--m-space) * 12) calc(var(--m-space) * 10); }
  .auth:not(.auth--single) .auth__title { font-size: 2rem; }
}

@media (min-width: 40rem) {
  .topbar__actions .button > span { display: inline; }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr) 20rem; }
}
@media (min-width: 64rem) {
  .sidebar { position: sticky; top: 0; height: 100dvh; transform: none; box-shadow: none; width: var(--m-sidebar-width); flex-shrink: 0; }
  .sidebar__backdrop, .sidebar__close, .topbar__menu { display: none !important; }  /* !important: the backdrop is toggled inline by x-show */
  .topbar__collapse { display: inline-grid; }
  .sidebar--collapsed { width: var(--m-sidebar-collapsed); }
  .sidebar--collapsed .brand__text, .sidebar--collapsed .menu-group__label, .sidebar--collapsed .menu-group__chevron,
  .sidebar--collapsed .menu-item__label, .sidebar--collapsed .menu-item__badge, .sidebar--collapsed .menu-item__add,
  .sidebar--collapsed .sidebar__search { display: none; }
  .sidebar--collapsed .sidebar__brand { justify-content: center; padding: 0; }
  .sidebar--collapsed .brand__chevron { display: none; } /* the logo itself opens the site menu */
  .sidebar--collapsed .brand { justify-content: center; }
  .sidebar--collapsed .brand__logo--wide { display: none; }
  .sidebar--collapsed .brand__logo--small { display: block; }
  .sidebar--collapsed .sidebar__environment { display: none; }
  .sidebar--collapsed .sidebar__scroll { overflow: visible; }
  .sidebar--collapsed .menu-group__header, .sidebar--collapsed .menu-item__link { justify-content: center; padding-inline: 0; }
  /* Collapsed: a group is a tile; its models live in a flyout that opens on hover or focus.
     !important on display/height/overflow: x-show and x-collapse write them inline. */
  .sidebar--collapsed .menu-group:not(.menu-group--links) .menu-group__header { width: 2.5rem; height: 2.5rem; margin: calc(var(--m-space) * 1) auto; padding: 0; border-radius: var(--m-radius); background: var(--m-sidebar-hover); }
  .sidebar--collapsed .menu-group--active .menu-group__header { background: var(--m-sidebar-active); }
  .sidebar--collapsed .menu-group--active .menu-group__icon { color: var(--m-sidebar-active-fg); }
  .sidebar--collapsed .menu-group:not(.menu-group--links) .menu-group__items { display: none !important; position: absolute; left: calc(100% + var(--m-space) * 1); top: 0; z-index: var(--m-z-popover); min-width: 14rem; height: auto !important; overflow: visible !important; padding: calc(var(--m-space) * 1.5); background: var(--m-sidebar-bg); border: 1px solid var(--m-sidebar-border); border-radius: var(--m-radius); box-shadow: var(--m-shadow-lg); }
  .sidebar--collapsed .menu-group:not(.menu-group--links):hover .menu-group__items, .sidebar--collapsed .menu-group:not(.menu-group--links):focus-within .menu-group__items { display: block !important; }
  .sidebar--collapsed .menu-group__items::before { content: ""; position: absolute; left: calc(var(--m-space) * -1); top: 0; bottom: 0; width: calc(var(--m-space) * 1); }  /* keeps hover alive across the gap */
  .sidebar--collapsed .menu-group__flyout-title { display: block; padding: calc(var(--m-space) * 1.5) calc(var(--m-space) * 2.5); font-size: var(--m-font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--m-sidebar-muted); }
  .sidebar--collapsed .menu-group:not(.menu-group--links) .menu-group__items .menu-item__label { display: inline; }
  .sidebar--collapsed .menu-group:not(.menu-group--links) .menu-group__items .menu-item__badge { display: inline-flex; }
  .sidebar--collapsed .menu-group:not(.menu-group--links) .menu-group__items .menu-item__link { justify-content: flex-start; padding-inline: calc(var(--m-space) * 2.5); }
  /* Top links (dashboards, topmenu) collapse to the same square as the group icons */
  .sidebar--collapsed .menu-group--links .menu-item__link { flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem; margin: calc(var(--m-space) * 1) auto; padding: 0; justify-content: center; border-radius: var(--m-radius); }
  .sidebar--collapsed .menu-group--links .menu-group__items { padding-left: 0; }
  .topbar { padding-inline: calc(var(--m-space) * 4) calc(var(--m-space) * 8); }
  .page__body { padding: calc(var(--m-space) * 6) calc(var(--m-space) * 8) calc(var(--m-space) * 10); }
  .page--with-bottombar .page__body { padding-bottom: calc(var(--m-space) * 6); }
  .bottombar__inner { padding-inline: calc(var(--m-space) * 8); }
  .page-footer { padding-inline: calc(var(--m-space) * 8); }
  .sidebar--collapsed .sidebar__tools { flex-direction: column; justify-content: center; }
  .sidebar--collapsed .user-button { justify-content: center; padding: 0; }
  .sidebar--collapsed .user-button__text, .sidebar--collapsed .user-button__chevron { display: none; }
}

@media (min-width: 80rem) {
  .topbar .topbar__crumbs { display: flex; }
}

/* Auth-style pages inside the shell (password change) */
.auth-page { display: flex; justify-content: center; }
.auth-page__card { width: min(36rem, 100%); }
.auth-page__help { margin: 0 0 calc(var(--m-space) * 4); color: var(--m-fg-muted); }
.auth-page__form { display: flex; flex-direction: column; gap: calc(var(--m-space) * 4); }
.auth-page__form .form-field__control input { width: 100%; }
.auth-page .empty-state .button { margin-top: calc(var(--m-space) * 3); }

/* Delete confirmations */
.delete { display: flex; justify-content: center; }
.delete__card { width: min(48rem, 100%); }
.delete__lead { margin: 0 0 calc(var(--m-space) * 4); color: var(--m-fg); line-height: 1.5; }
.delete__summary { display: flex; flex-wrap: wrap; gap: calc(var(--m-space) * 2); margin-bottom: calc(var(--m-space) * 4); }
.delete__count { padding: calc(var(--m-space) * 1.5) calc(var(--m-space) * 3); border-radius: var(--m-radius-pill); background: var(--m-danger-soft); color: var(--m-danger-ink); font-size: var(--m-font-size-sm); }
.delete__count strong { font-weight: 700; }
.delete__details summary { cursor: pointer; font-weight: 600; color: var(--m-fg-strong); margin-bottom: calc(var(--m-space) * 2); }
.delete__list { margin: 0; padding-left: 1.25rem; line-height: 1.7; }
.delete__list ul { padding-left: 1.25rem; }
.delete__list a { color: var(--m-primary-ink); }

/* Object history: a timeline of log entries */
.history { display: flex; flex-direction: column; gap: calc(var(--m-space) * 4); max-width: 52rem; margin: 0 auto; width: 100%; }
.history__summary { color: var(--m-fg-muted); font-size: var(--m-font-size-sm); }
.history__empty { max-width: 32rem; margin: 0 auto; }
.history__empty .empty-state .button { margin-top: calc(var(--m-space) * 3); }
/* Scoped under .history: the change list's timeline view (changelist.css) shares these class
   names with its own geometry. */
.history .timeline { list-style: none; margin: 0; padding: 0; position: relative; display: flex; flex-direction: column; gap: calc(var(--m-space) * 4); }
.history .timeline::before { content: ""; position: absolute; left: 1.1rem; top: 1rem; bottom: 1rem; width: 2px; background: var(--m-border); }
.history .timeline__item { position: relative; display: flex; gap: calc(var(--m-space) * 4); align-items: flex-start; }
.timeline__icon { position: relative; z-index: 1; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex-shrink: 0; border-radius: var(--m-radius-pill); background: var(--m-surface-3); color: var(--m-fg-muted); font-size: var(--m-font-size-xs); box-shadow: 0 0 0 4px var(--m-bg); }
.timeline__item--add .timeline__icon { background: var(--m-success-soft); color: var(--m-success-ink); }
.timeline__item--change .timeline__icon { background: var(--m-info-soft); color: var(--m-info-ink); }
.timeline__item--delete .timeline__icon { background: var(--m-danger-soft); color: var(--m-danger-ink); }
.history .timeline__card { flex: 1; min-width: 0; padding: calc(var(--m-space) * 3) calc(var(--m-space) * 4); background: var(--m-surface); border: 1px solid var(--m-border); border-radius: var(--m-radius); box-shadow: var(--m-shadow); }
.timeline__meta { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--m-space) * 2); margin-bottom: calc(var(--m-space) * 1.5); font-size: var(--m-font-size-sm); }
.timeline__user { font-weight: 600; color: var(--m-fg-strong); }
.history .timeline__time { color: var(--m-fg-muted); font-size: var(--m-font-size-xs); }
.timeline__message { margin: 0; color: var(--m-fg); line-height: 1.5; }
.avatar--sm { width: 1.5rem; height: 1.5rem; font-size: var(--m-font-size-xs); }
.avatar--lg { width: 2.5rem; height: 2.5rem; font-size: 1rem; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--m-radius-pill); } /* any picture is cropped round */
.user-menu__profile { color: inherit; font-weight: 600; }
.user-menu__profile:hover { color: var(--m-primary-ink); }
.history__pagination { justify-content: flex-start; }
.timeline__changes { margin: calc(var(--m-space) * 2.5) 0 0; display: flex; flex-direction: column; gap: calc(var(--m-space) * 1); font-size: var(--m-font-size-sm); }
.timeline__change { display: grid; grid-template-columns: 1fr; gap: calc(var(--m-space) * .5); padding: calc(var(--m-space) * 1.5) calc(var(--m-space) * 2.5); border-radius: var(--m-radius); background: var(--m-surface-2); }
.timeline__change dt { color: var(--m-fg-muted); font-weight: 600; }
.timeline__change dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--m-space) * 2); min-width: 0; }
.timeline__old { color: var(--m-fg-muted); text-decoration: line-through; overflow-wrap: anywhere; }
.timeline__new { color: var(--m-fg-strong); font-weight: 600; overflow-wrap: anywhere; }
.timeline__arrow { color: var(--m-fg-muted); font-size: var(--m-font-size-2xs); }
@media (min-width: 40rem) { .timeline__change { grid-template-columns: minmax(6rem, 10rem) 1fr; gap: calc(var(--m-space) * 3); } }
.history__hint { color: var(--m-fg-muted); font-size: var(--m-font-size-sm); margin-left: calc(var(--m-space) * 3); }
.timeline__link { margin-left: auto; display: inline-flex; align-items: center; gap: calc(var(--m-space) * 1.5); font-size: var(--m-font-size-xs); color: var(--m-primary-ink); }
.timeline__reason { margin: 0; color: var(--m-fg-muted); font-size: var(--m-font-size-sm); font-style: italic; }
.timeline__user--none { color: var(--m-fg-muted); font-weight: 500; }
.auth__status--info { background: var(--m-info-soft); color: var(--m-info-ink); }
.auth__status--danger { background: var(--m-danger-soft); color: var(--m-danger-ink); }
.auth__form--wide { width: 100%; text-align: left; }

/* Notches and home indicators (viewport-fit=cover) */
.topbar { padding-top: env(safe-area-inset-top); }
.auth__side { padding-top: env(safe-area-inset-top); }
.bottombar { padding-bottom: env(safe-area-inset-bottom); }
.sidebar { padding-top: env(safe-area-inset-top); }
.menu-group--closed .menu-group__items { display: none; } /* before Alpine runs: group remembered as closed */
/* No transitions until the page is ready: nothing slides or collapses on load
   (!important: x-collapse writes its transition inline on the menu groups) */
html:not(.micosta-ready) .sidebar, html:not(.micosta-ready) .menu-group__items, html:not(.micosta-ready) .menu-group__chevron, html:not(.micosta-ready) .filter__chevron, html:not(.micosta-ready) .button { transition: none !important; }