/* Shared Lucide presentation: outline icons, currentColor, and consistent sizing. */
.icon,
svg.lucide {
    display: inline-block;
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    color: inherit;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    vertical-align: -0.15em;
}

/* A quiet, non-emoji fallback remains if the optional CDN script is unavailable. */
i.icon[data-lucide-fallback="true"] {
    box-sizing: border-box;
    border: 2px solid currentColor;
    border-radius: 0.3em;
    opacity: 0.72;
}

.nav-icon { width: 21px; height: 21px; }
.btn-icon { width: 17px; height: 17px; }
.card-icon { width: 26px; height: 26px; }
.status-icon { width: 18px; height: 18px; }
.admin-icon { width: 22px; height: 22px; }
.city-icon { width: 24px; height: 24px; }
.hero-icon { width: 42px; height: 42px; }

.sidebar-link,
button,
.btn,
.back-link,
.settings-link-row,
.education-eyebrow,
.admin-eyebrow,
.notice {
    align-items: center;
}

.sidebar-link .nav-icon,
.mobile-menu-fab .icon,
.sidebar-toggle .icon {
    display: inline-flex;
    justify-content: center;
}

.app-sidebar.collapsed .sidebar-link .nav-icon,
.app-sidebar.sidebar-collapsed .sidebar-link .nav-icon {
    margin-inline: auto;
}

.notice .status-icon { margin-right: 0.4rem; }

@media (max-width: 720px) {
    .nav-icon { width: 20px; height: 20px; }
    .card-icon { width: 24px; height: 24px; }
}