/* Phosphor icons (MIT, assets/fonts/phosphor/LICENSE.txt) — the same set as
 * the app (lib/theme/phosphor_icons.dart). A glyph is its code point:
 * <i class="ph" aria-hidden="true">&#xe2c2;</i> (Fill style). Used by the
 * home sidebar (includes/sidebars/home_sidebar.php) and the marketplace. */
@font-face {
    font-family: 'SbPhosphorFill';
    src: url('../fonts/phosphor/Phosphor-Fill.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
.ph {
    font-family: 'SbPhosphorFill' !important;
    font-style: normal; font-weight: normal; font-variant: normal; text-transform: none;
    line-height: 1; speak: never;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/* A soft coloured chip around an icon; --h is its hue. */
.sb-chip {
    --h: 210;
    width: 36px; height: 36px; flex: none; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px; line-height: 1;
    background: hsl(var(--h) 90% 94%); color: hsl(var(--h) 70% 44%);
    -webkit-text-fill-color: currentColor;
    transition: background .15s, color .15s, transform .15s;
}
.sb-chip.is-grey { background: #eef0f3; color: #5b6170; }
body.theme-dark .sb-chip { background: hsl(var(--h) 35% 22%); color: hsl(var(--h) 85% 74%); }
body.theme-dark .sb-chip.is-grey { background: #2b3040; color: #b4bac8; }

/* The home sidebar's menu: chip, label, count. */
.feed-menu .main-menu.sb-nav li { padding: 0; margin-bottom: 2px; border-radius: 12px; }
.feed-menu .main-menu.sb-nav li:hover { background: rgba(127, 127, 127, .1); }
.feed-menu .main-menu.sb-nav li a {
    gap: 12px; padding: 6px 10px; border-left: 0;
    background: none; -webkit-text-fill-color: currentColor; color: #1c1e21; font-weight: 600; font-size: .95rem;
}
body.theme-dark .feed-menu .main-menu.sb-nav li a { color: #e4e6eb; }
.feed-menu .main-menu.sb-nav li a i.ph { font-size: 20px; background: none; -webkit-text-fill-color: currentColor; }
.feed-menu .main-menu.sb-nav li a:hover .sb-chip { transform: scale(1.06); }
.feed-menu .main-menu.sb-nav .sb-count {
    margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .75rem; font-weight: 800; background: #e41e3f; color: #fff; -webkit-text-fill-color: #fff;
}
.feed-menu .main-menu.sb-nav .sb-count.is-quiet { background: rgba(127, 127, 127, .14); color: #65676b; -webkit-text-fill-color: #65676b; }
.feed-menu .main-menu.sb-nav li.is-active { background: color-mix(in srgb, var(--sb-accent, #0073b7) 10%, transparent); }
.feed-menu .main-menu.sb-nav li.is-active a span { color: var(--sb-accent, #0073b7); font-weight: 700; }
.feed-menu .main-menu.sb-nav li.is-active .sb-chip { background: hsl(var(--h) 72% 46%); color: #fff; }
.feed-menu .main-menu.sb-nav li.sb-nav-sep { height: 1px; margin: 8px 10px; padding: 0; background: rgba(127, 127, 127, .2); pointer-events: none; }
@media (max-width: 767px) {
    .feed-menu .main-menu.sb-nav li { padding: 4px; }
    .feed-menu .main-menu.sb-nav li a { flex-direction: column; gap: 4px; font-size: .82rem; }
    .feed-menu .main-menu.sb-nav .sb-count { margin-left: 0; }
    .feed-menu .main-menu.sb-nav li.sb-nav-sep { display: none; }
}
/* The menu's older rules style every span in a link (display: block, a text
   colour; in dark mode with !important); the chip is a span too. */
.feed-menu .main-menu.sb-nav li a span { margin-left: 0; }
.feed-menu .main-menu.sb-nav li a span.sb-chip {
    display: inline-flex; color: hsl(var(--h) 70% 44%) !important; -webkit-text-fill-color: currentColor !important;
}
.feed-menu .main-menu.sb-nav li a span.sb-chip.is-grey { color: #5b6170 !important; }
.feed-menu .main-menu.sb-nav li.is-active a span.sb-chip { color: #fff !important; }
body.theme-dark .feed-menu .main-menu.sb-nav li > a span.sb-chip { color: hsl(var(--h) 85% 74%) !important; -webkit-text-fill-color: currentColor !important; }
body.theme-dark .feed-menu .main-menu.sb-nav li > a span.sb-chip.is-grey { color: #b4bac8 !important; }
body.theme-dark .feed-menu .main-menu.sb-nav li.is-active > a span.sb-chip { color: #fff !important; }
.feed-menu .main-menu.sb-nav li a .sb-chip i.ph { color: inherit; }
/* The marketplace's nav glyphs, tinted like the rest. */
.mk-side-nav .mk-ico { color: #5b6170; }
.mk-side-nav a.is-on .mk-ico { color: #fff; }