/*
 * App shell — the signed-in sidebar and the account menu.
 *
 * Pages opt in with <html data-app-shell>. The sidebar only shows once the
 * visitor is signed in (theme.js sets .epieme-authenticated before first paint
 * from the cached session; auth.js confirms or removes it). Signed-out
 * visitors keep the marketing navbar.
 *
 * Alden style, frosted: a glass rail wraps around the page, which sits inside
 * it as a card with rounded corners. The glass is a translucent parchment tint
 * with a backdrop blur. Ink type, a frosted white pill for the current page,
 * no shadows.
 */

:root {
  --shell-canvas: #ffffff;
  --shell-parchment: #f3f1eb;
  --shell-ink: #28262a;
  --shell-graphite: #4a4a4c;
  --shell-fog: #dddcdd;
  --shell-silver: #cbcbcb;
  --shell-sage: #c8dfaa;
  --shell-on-sage: #28262a;
  --shell-danger: #b42318;
  --shell-hover: color-mix(in srgb, var(--shell-ink) 6%, transparent);

  /* Glass */
  --shell-glass-tint: rgba(243, 241, 235, 0.55);
  --shell-glass-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --shell-glass-blur: blur(32px) saturate(200%);
  --shell-glass-drawer: rgba(243, 241, 235, 0.55);
  --shell-glass-bar: rgba(255, 255, 255, 0.6);
  --shell-glass-edge: rgba(255, 255, 255, 0.95);
  --shell-glass-seam: rgba(40, 38, 42, 0.12);
  --shell-glass-glow: rgba(255, 255, 255, 0.55);
  --shell-glass-item: rgba(255, 255, 255, 0.72);
  --shell-glass-hover: rgba(255, 255, 255, 0.38);
  --shell-glass-line: rgba(40, 38, 42, 0.08);

  --shell-font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --shell-text-caption: 12px;
  --shell-text-sm: 14px;
  --shell-text-body: 16px;

  --shell-space-4: 4px;
  --shell-space-8: 8px;
  --shell-space-12: 12px;
  --shell-space-16: 16px;
  --shell-space-24: 24px;

  --shell-radius-small: 8px;
  --shell-radius-card: 16px;
  --shell-radius-pill: 100px;

  --shell-width: 248px;
  --shell-bar-height: 56px;
  --shell-inset: 12px;
  --shell-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] {
  --shell-canvas: #1a191b;
  --shell-parchment: #232124;
  --shell-ink: #f3f1eb;
  --shell-graphite: #b5b2ad;
  --shell-fog: #353236;
  --shell-silver: #5a575c;
  --shell-danger: #f97066;

  --shell-glass-tint: rgba(35, 33, 36, 0.55);
  --shell-glass-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --shell-glass-drawer: rgba(35, 33, 36, 0.55);
  --shell-glass-bar: rgba(26, 25, 27, 0.6);
  --shell-glass-edge: rgba(255, 255, 255, 0.16);
  --shell-glass-seam: rgba(0, 0, 0, 0.55);
  --shell-glass-glow: rgba(255, 255, 255, 0.05);
  --shell-glass-item: rgba(255, 255, 255, 0.1);
  --shell-glass-hover: rgba(255, 255, 255, 0.06);
  --shell-glass-line: rgba(255, 255, 255, 0.08);
}

/* ---- Layout: reserve the rail, retire the marketing navbar ---- */

.app-sidebar,
.app-bar,
.app-scrim,
.app-frame {
  display: none;
}

html.epieme-authenticated[data-app-shell] [data-epieme-navbar] {
  display: none !important;
}

html.epieme-authenticated[data-app-shell] body {
  padding: var(--shell-inset) var(--shell-inset) var(--shell-inset) var(--shell-width);
}

/* The wrap-around glass: one fixed layer over the whole viewport, masked to
   everything except a rounded hole where the page shows through. The rail
   sits on it, and it carries on above, beside and below the page while the
   page scrolls underneath. Mask layers: the rail, the top, right and bottom
   edges, then one quarter-circle cap per corner of the hole. */
html.epieme-authenticated[data-app-shell] .app-frame {
  --frame-r: var(--shell-radius-card);
  --frame-cap: transparent calc(var(--frame-r) - 0.5px), #000 var(--frame-r);
  --frame-mask:
    linear-gradient(#000 0 0) left top / var(--shell-width) 100% no-repeat,
    linear-gradient(#000 0 0) left top / 100% var(--shell-inset) no-repeat,
    linear-gradient(#000 0 0) right top / var(--shell-inset) 100% no-repeat,
    linear-gradient(#000 0 0) left bottom / 100% var(--shell-inset) no-repeat,
    radial-gradient(circle at 100% 100%, var(--frame-cap)) left var(--shell-width) top var(--shell-inset) / var(--frame-r) var(--frame-r) no-repeat,
    radial-gradient(circle at 0 100%, var(--frame-cap)) right var(--shell-inset) top var(--shell-inset) / var(--frame-r) var(--frame-r) no-repeat,
    radial-gradient(circle at 0 0, var(--frame-cap)) right var(--shell-inset) bottom var(--shell-inset) / var(--frame-r) var(--frame-r) no-repeat,
    radial-gradient(circle at 100% 0, var(--frame-cap)) left var(--shell-width) bottom var(--shell-inset) / var(--frame-r) var(--frame-r) no-repeat;
  position: fixed;
  inset: 0;
  z-index: 1150;
  display: block;
  /* Frosted grain over a see-through tint, plus a catch of light along the
     top and left edges of the glass. */
  background: var(--shell-glass-grain), var(--shell-glass-tint);
  box-shadow:
    inset 0 1px 0 var(--shell-glass-edge),
    inset 1px 0 0 var(--shell-glass-edge);
  pointer-events: none;
  -webkit-backdrop-filter: var(--shell-glass-blur);
  backdrop-filter: var(--shell-glass-blur);
  -webkit-mask: var(--frame-mask);
  mask: var(--frame-mask);
}

/* Where the glass meets the page: a dark seam against the page, a bright rim
   on the glass beside it, and a soft glow where the edge catches light. */
html.epieme-authenticated[data-app-shell] .app-frame::after {
  content: "";
  position: absolute;
  top: var(--shell-inset);
  right: var(--shell-inset);
  bottom: var(--shell-inset);
  left: var(--shell-width);
  border-radius: var(--frame-r);
  box-shadow:
    0 0 0 1px var(--shell-glass-seam),
    0 0 0 2px var(--shell-glass-edge),
    0 0 18px 4px var(--shell-glass-glow);
}

html.epieme-authenticated[data-app-shell] .app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  width: var(--shell-width);
  background: transparent;
  color: var(--shell-ink);
  font-family: var(--shell-font);
  font-size: var(--shell-text-sm);
  line-height: 1.4;
  letter-spacing: -0.28px;
  -webkit-font-smoothing: antialiased;
}

.app-sidebar *,
.app-bar * {
  box-sizing: border-box;
}

.app-skip {
  position: absolute;
  left: -9999px;
  z-index: 1300;
  border-radius: var(--shell-radius-small);
  background: var(--shell-ink);
  color: var(--shell-canvas);
  padding: var(--shell-space-8) var(--shell-space-12);
  font-family: var(--shell-font);
  font-size: var(--shell-text-sm);
  text-decoration: none;
}

.app-skip:focus {
  left: var(--shell-space-12);
  top: var(--shell-space-12);
}

/* ---- Rail contents ---- */

.app-sidebar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--shell-space-8);
  padding: var(--shell-space-16) var(--shell-space-16) var(--shell-space-8);
}

.app-sidebar__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--shell-space-8);
  min-height: 40px;
  border-radius: var(--shell-radius-small);
  padding: 0 var(--shell-space-8);
  color: var(--shell-ink);
  font-size: var(--shell-text-body);
  font-weight: 600;
  letter-spacing: -0.32px;
  text-decoration: none;
}

.app-sidebar__brand svg {
  width: 22px;
  height: 21px;
}

.app-sidebar__close {
  display: none;
}

.app-sidebar__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--shell-space-8) var(--shell-space-12) var(--shell-space-16);
}

.app-sidebar__group + .app-sidebar__group {
  margin-top: var(--shell-space-24);
}

.app-sidebar__label {
  margin: 0 0 var(--shell-space-4);
  padding: 0 var(--shell-space-12);
  color: var(--shell-graphite);
  font-size: var(--shell-text-caption);
  font-weight: 500;
  letter-spacing: 0.24px;
}

.app-sidebar__list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.app-sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--shell-space-12);
  min-height: 40px;
  border-radius: var(--shell-radius-pill);
  padding: 0 var(--shell-space-12);
  color: var(--shell-graphite);
  font-weight: 500;
  text-decoration: none;
  transition: background-color 140ms var(--shell-ease), color 140ms var(--shell-ease);
}

.app-sidebar__link:hover {
  background: var(--shell-glass-hover);
  color: var(--shell-ink);
}

.app-sidebar__link[aria-current="page"] {
  background: var(--shell-glass-item);
  box-shadow: inset 0 0 0 1px var(--shell-glass-edge);
  color: var(--shell-ink);
}

.app-sidebar__link svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-sidebar__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-sidebar__count {
  min-width: 22px;
  border-radius: var(--shell-radius-pill);
  background: var(--shell-glass-item);
  color: var(--shell-ink);
  padding: 2px var(--shell-space-8);
  font-size: var(--shell-text-caption);
  font-weight: 500;
  letter-spacing: 0.24px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.app-sidebar__count[hidden] {
  display: none;
}

.app-sidebar__foot {
  display: grid;
  gap: var(--shell-space-8);
  border-top: 1px solid var(--shell-glass-line);
  padding: var(--shell-space-8) var(--shell-space-12) var(--shell-space-12);
}

.app-sidebar__foot .app-sidebar__group {
  padding-bottom: var(--shell-space-8);
  border-bottom: 1px solid var(--shell-glass-line);
}

.app-sidebar a:focus-visible,
.app-sidebar button:focus-visible,
.app-bar a:focus-visible,
.app-bar button:focus-visible {
  outline: 2px solid var(--shell-ink);
  outline-offset: 2px;
}

/* Account footer (auth.js moves #auth-container into .sidebar-auth-slot) */

.app-sidebar .sidebar-auth-slot {
  min-height: 48px;
}

.app-sidebar .auth-container.sidebar-user-footer {
  position: static;
  display: flex;
  align-items: center;
  gap: var(--shell-space-8);
  width: 100%;
}

.app-sidebar .sidebar-user-identity {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--shell-space-12);
  min-width: 0;
  padding-left: var(--shell-space-4);
  color: var(--shell-ink);
  font-weight: 500;
}

.app-sidebar .sidebar-user-identity .auth-btn-avatar,
.app-sidebar .sidebar-user-identity .auth-btn-initials {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border: 1px solid var(--shell-fog);
  border-radius: 50%;
  background: var(--shell-canvas);
  color: var(--shell-ink);
  font-size: var(--shell-text-caption);
  font-weight: 500;
  object-fit: cover;
}

.app-sidebar .sidebar-user-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-sidebar .sidebar-user-actions {
  display: flex;
}

.app-sidebar .auth-btn.sidebar-user-menu-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--shell-radius-pill);
  background: transparent;
  color: var(--shell-graphite);
  opacity: 1;
  cursor: pointer;
}

.app-sidebar .auth-btn.sidebar-user-menu-btn:hover,
.app-sidebar .auth-btn.sidebar-user-menu-btn[aria-expanded="true"] {
  background: var(--shell-hover);
  color: var(--shell-ink);
}

.app-sidebar .auth-btn.sidebar-user-menu-btn svg {
  width: 18px;
  height: 18px;
}

/* ---- Account menu: shared by the navbar dropdown and the sidebar popover ---- */

/* Base geometry lives here too: some pages (about, accessibility) don't load
   brand.css, and without it the menu falls into the navbar's flow. */
.auth-container {
  position: relative;
  display: flex;
  align-items: center;
}

#auth-btn.auth-btn:not(.sidebar-user-menu-btn) {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  overflow: hidden;
  border: 1px solid var(--shell-fog);
  border-radius: 50%;
  background: var(--shell-parchment);
  color: var(--shell-ink);
  padding: 0;
  opacity: 1;
  font-family: var(--shell-font);
  font-size: var(--shell-text-caption);
  font-weight: 500;
  cursor: pointer;
}

#auth-btn.auth-btn:not(.sidebar-user-menu-btn) svg {
  width: 16px;
  height: 16px;
}

#auth-btn .auth-btn-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#auth-btn.auth-btn:focus-visible {
  outline: 2px solid var(--shell-ink);
  outline-offset: 2px;
  box-shadow: none;
}

#auth-dropdown.auth-dropdown {
  position: absolute;
  top: calc(100% + var(--shell-space-8));
  right: 0;
}

#auth-dropdown.auth-dropdown[hidden] {
  display: none;
}

#auth-dropdown.auth-dropdown {
  width: 288px;
  max-width: calc(100vw - 24px);
  border: 1px solid var(--shell-fog);
  border-radius: var(--shell-radius-card);
  background: var(--shell-canvas);
  color: var(--shell-ink);
  box-shadow: 0 16px 40px -24px rgba(0, 0, 0, 0.35);
  font-family: var(--shell-font);
  font-size: var(--shell-text-sm);
  letter-spacing: -0.28px;
  text-align: left;
  z-index: 1400;
}

#auth-dropdown.auth-dropdown--sidebar-popover {
  position: fixed;
  right: auto;
}

#auth-dropdown .auth-dropdown-content {
  display: grid;
  gap: var(--shell-space-4);
  padding: var(--shell-space-8);
}

#auth-dropdown .auth-dropdown-title,
#auth-dropdown .auth-user-name {
  margin: 0;
  color: var(--shell-ink);
  font-size: var(--shell-text-sm);
  font-weight: 600;
  letter-spacing: -0.28px;
}

#auth-dropdown .auth-dropdown-subtitle,
#auth-dropdown .auth-user-email {
  margin: 0;
  color: var(--shell-graphite);
  font-size: var(--shell-text-caption);
}

#auth-dropdown .auth-user-info {
  display: flex;
  align-items: center;
  gap: var(--shell-space-12);
  margin: 0;
  padding: var(--shell-space-8) var(--shell-space-8) var(--shell-space-12);
  border-bottom: 1px solid var(--shell-fog);
}

#auth-dropdown .auth-avatar,
#auth-dropdown .auth-avatar-placeholder {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 1px solid var(--shell-fog);
  border-radius: 50%;
  background: var(--shell-parchment);
  color: var(--shell-ink);
  font-size: var(--shell-text-caption);
  font-weight: 500;
}

#auth-dropdown .auth-role-chip {
  margin-left: auto;
  border-radius: var(--shell-radius-pill);
  background: var(--shell-fog);
  padding: 2px var(--shell-space-8);
  font-size: var(--shell-text-caption);
}

#auth-dropdown .auth-menu-group {
  display: grid;
  gap: 2px;
  padding: var(--shell-space-4) 0;
}

#auth-dropdown .auth-menu-group + .auth-menu-group {
  border-top: 1px solid var(--shell-fog);
}

#auth-dropdown .auth-menu-item {
  display: flex;
  align-items: center;
  gap: var(--shell-space-12);
  width: 100%;
  min-height: 40px;
  margin: 0;
  border: 0;
  border-radius: var(--shell-radius-small);
  background: transparent;
  color: var(--shell-ink);
  padding: 0 var(--shell-space-8);
  font: inherit;
  font-weight: 400;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

#auth-dropdown .auth-menu-item:hover,
#auth-dropdown .auth-menu-item:focus-visible {
  background: var(--shell-parchment);
  outline: none;
}

#auth-dropdown .auth-menu-item:focus-visible {
  box-shadow: inset 0 0 0 2px var(--shell-ink);
}

#auth-dropdown .auth-menu-item.is-active {
  font-weight: 500;
}

#auth-dropdown .auth-menu-item svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--shell-graphite);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 1;
}

#auth-dropdown .auth-menu-copy {
  display: grid;
  flex: 1;
  min-width: 0;
}

#auth-dropdown .auth-menu-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#auth-dropdown .auth-menu-sublabel {
  color: var(--shell-graphite);
  font-size: var(--shell-text-caption);
}

#auth-dropdown .auth-menu-count {
  min-width: 22px;
  border-radius: var(--shell-radius-pill);
  background: var(--shell-fog);
  color: var(--shell-ink);
  padding: 2px var(--shell-space-8);
  font-size: var(--shell-text-caption);
  font-weight: 500;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

#auth-dropdown .auth-menu-item.sign-out,
#auth-dropdown .auth-menu-item.sign-out svg {
  color: var(--shell-danger);
  stroke: var(--shell-danger);
}

#auth-dropdown .auth-menu-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--shell-space-4) var(--shell-space-16);
  padding: var(--shell-space-8);
  border-top: 1px solid var(--shell-fog);
}

#auth-dropdown .auth-menu-footer a {
  color: var(--shell-graphite);
  font-size: var(--shell-text-caption);
  text-decoration: none;
}

#auth-dropdown .auth-menu-footer a:hover,
#auth-dropdown .auth-menu-footer a:focus-visible {
  color: var(--shell-ink);
  text-decoration: underline;
}

#auth-dropdown .auth-theme-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--shell-space-12);
  min-height: 40px;
  padding: 0 var(--shell-space-8);
}

#auth-dropdown .auth-theme-toggle {
  display: inline-flex;
  gap: 2px;
  border: 1px solid var(--shell-fog);
  border-radius: var(--shell-radius-pill);
  padding: 2px;
}

#auth-dropdown .auth-theme-option {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--shell-radius-pill);
  background: transparent;
  color: var(--shell-graphite);
  cursor: pointer;
}

#auth-dropdown .auth-theme-option.is-active {
  background: var(--shell-fog);
  color: var(--shell-ink);
}

#auth-dropdown .auth-theme-option svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#auth-dropdown .auth-action-btn {
  min-height: 40px;
  border-radius: var(--shell-radius-pill);
  font-family: inherit;
}

#auth-dropdown .auth-loading {
  padding: var(--shell-space-16);
  color: var(--shell-graphite);
}

/* ---- Small screens: top bar + slide-in drawer ---- */

@media (max-width: 960px) {
  html.epieme-authenticated[data-app-shell] body {
    padding: var(--shell-bar-height) 0 0;
  }

  html.epieme-authenticated[data-app-shell] .app-frame {
    display: none;
  }

  html.epieme-authenticated[data-app-shell] .app-bar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: var(--shell-space-8);
    height: var(--shell-bar-height);
    border-bottom: 1px solid var(--shell-glass-line);
    background: var(--shell-glass-bar);
    color: var(--shell-ink);
    padding: 0 var(--shell-space-8);
    font-family: var(--shell-font);
    -webkit-backdrop-filter: var(--shell-glass-blur);
    backdrop-filter: var(--shell-glass-blur);
  }

  .app-bar__menu {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--shell-radius-pill);
    background: transparent;
    color: var(--shell-ink);
    cursor: pointer;
  }

  .app-bar__menu svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
  }

  .app-bar__title {
    overflow: hidden;
    color: var(--shell-ink);
    font-size: var(--shell-text-body);
    font-weight: 600;
    letter-spacing: -0.32px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html.epieme-authenticated[data-app-shell] .app-sidebar {
    z-index: 1250;
    width: min(300px, 86vw);
    border-right: 1px solid var(--shell-glass-edge);
    background: var(--shell-glass-grain), var(--shell-glass-drawer);
    -webkit-backdrop-filter: var(--shell-glass-blur);
    backdrop-filter: var(--shell-glass-blur);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 220ms var(--shell-ease), visibility 0s linear 220ms;
  }

  html.app-shell-open[data-app-shell] .app-sidebar {
    transform: translateX(0);
    visibility: visible;
    transition: transform 220ms var(--shell-ease), visibility 0s;
  }

  html.epieme-authenticated[data-app-shell] .app-scrim {
    position: fixed;
    inset: 0;
    z-index: 1240;
    display: block;
    background: rgba(20, 19, 21, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms var(--shell-ease);
  }

  html.app-shell-open[data-app-shell] .app-scrim {
    opacity: 1;
    pointer-events: auto;
  }

  html.app-shell-open[data-app-shell] body {
    overflow: hidden;
  }

  .app-sidebar__close {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: var(--shell-radius-pill);
    background: transparent;
    color: var(--shell-graphite);
    cursor: pointer;
  }

  .app-sidebar__close svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-sidebar,
  .app-scrim,
  .app-sidebar__link {
    transition: none !important;
  }
}

@media print {
  .app-sidebar,
  .app-bar,
  .app-scrim,
  .app-frame {
    display: none !important;
  }

  html.epieme-authenticated[data-app-shell] body {
    padding: 0 !important;
  }
}