/* ==========================================================================
   MOON CLIENT — Modules showcase (templates/modules.html)
   Layered on moon.css + moon-content.css. Status colours use the semantic
   tokens; everything decorative follows --moon-accent-rgb.
   ========================================================================== */

/* status -> colour: undetected = ok, use at risk = warn, detected = danger, anything else = info */
.mc-modules { --st: var(--moon-info); }

.mod-summary-undetected, .mod-status-undetected, .mod-chip-undetected, .mod-legend-undetected,
.mod-meter-undetected, .mod-card[data-status="undetected"] { --st: var(--moon-ok); }

.mod-summary-use-at-risk, .mod-status-use-at-risk, .mod-chip-use-at-risk, .mod-legend-use-at-risk,
.mod-meter-use-at-risk, .mod-card[data-status="use-at-risk"] { --st: var(--moon-warn); }

.mod-summary-detected, .mod-status-detected, .mod-chip-detected, .mod-legend-detected,
.mod-meter-detected, .mod-card[data-status="detected"] { --st: var(--moon-danger); }

.mod-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--st);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--st) 18%, transparent), 0 0 10px color-mix(in srgb, var(--st) 55%, transparent);
}

.mod-card[data-status="detected"] .mod-status .mod-dot { animation: modBlink 2.4s ease-in-out infinite; }

@keyframes modBlink { 50% { opacity: 0.35; } }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.mod-hero { text-align: left; padding-bottom: clamp(2rem, 4vw, 3rem); }

.mod-hero::before { left: 34%; }

.mod-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
    gap: clamp(2rem, 4vw, 3.5rem);
}

.mod-hero h1 { margin-left: 0; max-width: none; font-size: clamp(2.1rem, 4.7vw, 4.1rem); }

.mod-hero .mc-lead { margin-left: 0; max-width: 540px; }

.mod-hero .mc-actions { justify-content: flex-start; }

.mod-arrow-down svg { transform: rotate(90deg); }

.moon-btn:hover .mod-arrow-down { transform: translateY(3px); }

/* orbit of categories around the moon */
.mod-orbit {
    position: relative;
    width: min(470px, 100%);
    aspect-ratio: 1;
    margin: 0 auto;
    container-type: inline-size;
}

.mod-orbit::before {
    content: '';
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(var(--moon-accent-rgb), 0.18), transparent 72%);
    filter: blur(20px);
    pointer-events: none;
}

.mod-ring-a { inset: 6%; }
.mod-ring-b { inset: 20%; }
.mod-ring-c { inset: 31%; opacity: 0.7; }

.mod-orbit-moon {
    --size: 30%;
    position: absolute;
    left: 35%;
    top: 35%;
}

.mod-orbit-track {
    position: absolute;
    inset: 0;
    animation: mcSpin 90s linear infinite;
}

.mod-orbit-node {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    transform: rotate(var(--a, 0deg)) translateX(205px) rotate(calc(var(--a, 0deg) * -1));
    transform: rotate(var(--a, 0deg)) translateX(44cqw) rotate(calc(var(--a, 0deg) * -1));
}

.mod-orbit-chip {
    position: absolute;
    left: 0;
    top: 0;
    translate: -50% -50%;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.8rem 0.35rem 0.35rem;
    border-radius: 999px;
    border: 1px solid var(--moon-line-2);
    background: rgba(var(--moon-panel-rgb), 0.9);
    box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.9), 0 0 26px -10px rgba(var(--moon-accent-rgb), 0.55), inset 0 1px rgba(255, 255, 255, 0.06);
    color: var(--moon-text);
    font-size: 0.78rem;
    white-space: nowrap;
    animation: modSpinRev 90s linear infinite;
}

@keyframes modSpinRev { to { transform: rotate(-360deg); } }

.mod-orbit-chip .home-glyph {
    box-sizing: border-box;
    width: 26px;
    height: 26px;
    padding: 5px;
    border-radius: 50%;
    background: rgba(var(--moon-accent-rgb), 0.13);
    color: var(--moon-accent-hi);
}

.mod-orbit-chip b { font-weight: 600; }

/* overview strip */
.mod-overview {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    border-radius: 24px;
}

.mod-overview > * { padding: 1.35rem 1.6rem; min-width: 0; }

.mod-overview > * + * { border-left: 1px solid var(--moon-line); }

.mod-overview-stat { min-width: 150px; }

.mod-overview-label {
    display: block;
    color: var(--moon-mute);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.mod-overview-value {
    display: block;
    margin-top: 0.5rem;
    color: var(--moon-text);
    font-family: var(--moon-font-display);
    font-size: clamp(2rem, 3.6vw, 2.6rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.mod-overview-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.mod-overview-live { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--moon-dim); font-size: 0.78rem; }

.mod-overview-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--moon-ok); animation: moonPing 2s ease-out infinite; }

.mod-meter {
    display: flex;
    gap: 3px;
    height: 12px;
    margin: 0.95rem 0 0.9rem;
    padding: 2px;
    border-radius: 999px;
    border: 1px solid var(--moon-line);
    background: rgba(255, 255, 255, 0.03);
    animation: modMeter 1.6s var(--moon-ease) 0.7s backwards;
}

@keyframes modMeter {
    from { clip-path: inset(0 100% 0 0 round 999px); }
    to { clip-path: inset(0 0 0 0 round 999px); }
}

.mod-meter-seg {
    flex: 0 1 0;
    min-width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--st) 65%, transparent), var(--st));
    box-shadow: 0 0 12px color-mix(in srgb, var(--st) 45%, transparent);
}

.mod-summary { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; margin: 0; padding: 0; list-style: none; }

.mod-summary-item { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--moon-dim); font-size: 0.86rem; }

.mod-summary-item strong { color: var(--moon-text); font-weight: 700; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Toolbar (sticky on wide screens)
   -------------------------------------------------------------------------- */

.mod-browser { position: relative; padding: clamp(1.5rem, 3vw, 2.5rem) 0 1rem; scroll-margin-top: calc(var(--mc-head) + 0.5rem); }

.mod-toolbar {
    position: sticky;
    top: calc(var(--mc-head) + 0.75rem);
    z-index: 40;
    display: grid;
    gap: 0.55rem;
    padding: 0.6rem;
    border-radius: 20px;
    border: 1px solid var(--moon-line);
    background: rgba(var(--moon-panel-rgb), 0.8);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 18px 50px -26px rgba(0, 0, 0, 0.9), inset 0 1px rgba(255, 255, 255, 0.04);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.mod-toolbar.is-stuck {
    border-color: var(--moon-line-2);
    background: rgba(var(--moon-panel-rgb), 0.92);
    box-shadow: 0 24px 60px -22px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(var(--moon-accent-rgb), 0.05), inset 0 1px rgba(255, 255, 255, 0.05);
}

.mod-toolbar-row { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }

.mod-toolbar-sub { padding-top: 0.55rem; border-top: 1px solid var(--moon-line); }

.mod-search {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    height: 44px;
    margin: 0;
    padding: 0 0.5rem 0 0.85rem;
    border-radius: 13px;
    border: 1px solid var(--moon-line);
    background: rgba(255, 255, 255, 0.03);
    color: var(--moon-mute);
    font-weight: 400;
    cursor: text;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.mod-search:hover { border-color: rgba(var(--moon-accent-rgb), 0.22); }

.mod-search:focus-within {
    color: var(--moon-accent-hi);
    border-color: rgba(var(--moon-accent-rgb), 0.5);
    background: rgba(var(--moon-accent-rgb), 0.05);
    box-shadow: 0 0 0 4px rgba(var(--moon-accent-rgb), 0.1);
}

.mod-search svg { flex-shrink: 0; width: 17px; height: 17px; }

.mod-search input {
    flex: 1;
    min-width: 0;
    width: auto;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0 !important;
    border-radius: 0;
    outline: none;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--moon-text);
    font: inherit;
    font-size: 0.92rem;
}

.mod-search input:focus-visible { outline: none; }

.mod-search input::-webkit-search-cancel-button { filter: grayscale(1) brightness(1.6); cursor: pointer; }

.mod-kbd {
    flex-shrink: 0;
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    padding: 0 0.35rem;
    border-radius: 7px;
    border: 1px solid var(--moon-line);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 -1px rgba(255, 255, 255, 0.04);
    color: var(--moon-dim);
    font: 600 0.72rem var(--moon-font-mono);
    transition: opacity 0.2s ease;
}

.mod-search:focus-within .mod-kbd { opacity: 0; }

/* the "/" shortcut only makes sense with a keyboard */
@media (hover: none), (pointer: coarse) { .mod-kbd { display: none; } }

/* chips + sliding glider */
.mod-chips {
    position: relative;
    display: flex;
    gap: 0.25rem;
    min-width: 0;
    padding: 3px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}

.mod-chips::-webkit-scrollbar { display: none; }

.mod-category-chips { flex: 1 1 auto; }

/* modules.js sets data-fade to the edges that hide chips (no JS: right edge) */
.mod-category-chips[data-fade="none"] { -webkit-mask-image: none; mask-image: none; }

.mod-category-chips[data-fade="start"] {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px);
    mask-image: linear-gradient(90deg, transparent, #000 28px);
}

.mod-category-chips[data-fade="start end"] {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}

.mod-chip {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: 38px;
    margin: 0;
    padding: 0 0.85rem;
    border-radius: 11px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--moon-dim);
    font: 600 0.84rem var(--moon-font);
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.mod-chip:hover { color: var(--moon-text); background: rgba(255, 255, 255, 0.045); }

.mod-chip .home-glyph { width: 15px; height: 15px; opacity: 0.8; }

.mod-chip-count {
    padding: 0.08rem 0.42rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--moon-mute);
    font: 600 0.7rem var(--moon-font-mono);
    transition: background 0.25s ease, color 0.25s ease;
}

.mod-chip.active {
    color: var(--moon-accent-ink);
    background: var(--moon-grad);
    box-shadow: 0 8px 22px -10px rgba(var(--moon-accent-rgb), 0.6), inset 0 1px rgba(255, 255, 255, 0.7);
}

.mod-chip.active .home-glyph { opacity: 1; }

.mod-chip.active .mod-chip-count { background: rgba(0, 0, 0, 0.1); color: var(--moon-accent-ink); }

.mod-status-chips {
    flex: 0 0 auto;
    border-radius: 14px;
    border: 1px solid var(--moon-line);
    background: rgba(255, 255, 255, 0.02);
    -webkit-mask-image: none;
    mask-image: none;
}

.mod-status-chips .mod-chip { height: 32px; padding: 0 0.75rem; border-radius: 10px; font-size: 0.8rem; }

.mod-status-chips .mod-chip .mod-dot { width: 7px; height: 7px; }

.mod-status-chips .mod-chip.active {
    color: var(--moon-text);
    background: rgba(var(--moon-accent-rgb), 0.13);
    border-color: rgba(var(--moon-accent-rgb), 0.24);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.06);
}

.mod-glider {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    width: 0;
    height: 0;
    border-radius: 11px;
    pointer-events: none;
    background: var(--moon-grad);
    box-shadow: 0 8px 22px -10px rgba(var(--moon-accent-rgb), 0.6), inset 0 1px rgba(255, 255, 255, 0.7);
    transition: transform 0.5s var(--moon-ease), width 0.5s var(--moon-ease), height 0.5s var(--moon-ease), opacity 0.3s ease;
}

.mod-status-chips .mod-glider {
    border-radius: 10px;
    border: 1px solid rgba(var(--moon-accent-rgb), 0.24);
    background: rgba(var(--moon-accent-rgb), 0.13);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.06);
    box-sizing: border-box;
}

.has-glider .mod-chip.active,
.mod-status-chips.has-glider .mod-chip.active { background: transparent; border-color: transparent; box-shadow: none; }

.mod-result {
    flex-shrink: 0;
    margin: 0 0.4rem 0 auto;
    color: var(--moon-mute);
    font: 500 0.78rem var(--moon-font-mono);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Groups + cards
   -------------------------------------------------------------------------- */

.mod-group {
    margin-top: clamp(2.25rem, 4.5vw, 3.25rem);
    scroll-margin-top: calc(var(--mc-head) + 150px);
    animation: modIn 0.6s var(--moon-ease) backwards;
}

.mod-group[hidden] { display: none; }

.mod-group-head { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.1rem; }

.mod-group-title {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0;
    color: var(--moon-text);
    font-size: clamp(1.2rem, 2.4vw, 1.55rem);
    letter-spacing: -0.02em;
}

.mod-group-icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    color: var(--moon-accent-hi);
    background: radial-gradient(circle at 30% 20%, rgba(var(--moon-accent-rgb), 0.28), rgba(var(--moon-accent-rgb), 0.04) 72%);
    border: 1px solid rgba(var(--moon-accent-rgb), 0.22);
    box-shadow: 0 12px 30px -14px rgba(var(--moon-accent-rgb), 0.7), inset 0 1px rgba(255, 255, 255, 0.12);
}

.mod-group-icon .home-glyph { width: 21px; height: 21px; }

.mod-group-line { flex: 1; height: 1px; min-width: 1rem; background: linear-gradient(90deg, var(--moon-line-2), transparent); }

.mod-group-count { flex-shrink: 0; color: var(--moon-mute); font: 500 0.78rem var(--moon-font-mono); }

.mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0.8rem; }

.mod-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.05rem 1.1rem 1.2rem;
    border-radius: 18px;
    border: 1px solid var(--moon-line);
    background: linear-gradient(180deg, rgba(var(--moon-panel-rgb), 0.86), rgba(var(--moon-panel-rgb), 0.62));
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.03), 0 18px 40px -30px rgba(0, 0, 0, 0.9);
    transition: transform 0.4s var(--moon-ease), border-color 0.25s ease, box-shadow 0.4s ease;
    content-visibility: auto;
    contain-intrinsic-size: auto 136px;
}

.mod-card[hidden] { display: none; }

/* status-tinted hairline along the top edge */
.mod-card::before {
    content: '';
    position: absolute;
    left: 18px;
    right: 18px;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--st) 75%, transparent), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mod-card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--moon-accent-rgb), 0.26);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 26px 50px -30px rgba(var(--moon-accent-rgb), 0.5);
}

.mod-card:hover::before { opacity: 1; }

/* cards shown again by a filter glide in (modules.js adds .is-entering) */
.mod-card.is-entering {
    animation: modIn 0.5s var(--moon-ease) backwards;
    animation-delay: calc(var(--i, 0) * 22ms);
}

@keyframes modIn {
    from { opacity: 0; translate: 0 14px; scale: 0.98; }
    to { opacity: 1; translate: 0 0; scale: 1; }
}

/* scroll-driven entrance where supported (pure CSS, no JS needed) */
@supports (animation-timeline: view()) {
    .mod-card:not(.is-entering) {
        animation: modIn linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 70%;
    }
}

.mod-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.2rem; }

.mod-card-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    border: 1px solid var(--moon-line);
    background: rgba(var(--moon-accent-rgb), 0.06);
    color: var(--moon-accent-soft);
    transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, transform 0.45s var(--moon-ease);
}

.mod-card-icon .home-glyph { width: 17px; height: 17px; }

.mod-card:hover .mod-card-icon {
    color: var(--moon-accent-hi);
    background: rgba(var(--moon-accent-rgb), 0.14);
    border-color: rgba(var(--moon-accent-rgb), 0.3);
    transform: rotate(-8deg) scale(1.06);
}

.mod-card h3 { margin: 0; color: var(--moon-text); font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; }

.mod-card p { margin: 0; color: var(--moon-dim); font-size: 0.86rem; line-height: 1.6; }

.mod-status {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
    padding: 0.24rem 0.6rem 0.24rem 0.5rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--st) 30%, transparent);
    background: color-mix(in srgb, var(--st) 11%, transparent);
    color: color-mix(in srgb, var(--st) 72%, #fff);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.mod-status .mod-dot { width: 6px; height: 6px; box-shadow: 0 0 8px var(--st); }

/* empty state */
.mod-empty {
    display: grid;
    justify-items: center;
    gap: 0.4rem;
    margin-top: 2.5rem;
    padding: 3rem 1.5rem;
    border-radius: 22px;
    border: 1px dashed var(--moon-line-2);
    background: rgba(var(--moon-accent-rgb), 0.03);
    text-align: center;
    animation: modIn 0.5s var(--moon-ease) backwards;
}

.mod-empty[hidden] { display: none; }

.mod-empty-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: 0.6rem;
    border-radius: 16px;
    border: 1px solid var(--moon-line-2);
    background: rgba(var(--moon-accent-rgb), 0.08);
    color: var(--moon-accent-hi);
}

.mod-empty-icon svg { width: 24px; height: 24px; }

.mod-empty strong { color: var(--moon-text); font-family: var(--moon-font-display); font-size: 1.2rem; }

.mod-empty p { margin: 0 0 1rem; color: var(--moon-dim); }

/* --------------------------------------------------------------------------
   Legend
   -------------------------------------------------------------------------- */

.mod-legend-section { padding-top: clamp(4rem, 8vw, 6rem); }

.mod-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }

.mod-legend-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.4rem;
    border-radius: 20px;
    border: 1px solid var(--moon-line);
    background: linear-gradient(180deg, rgba(var(--moon-panel-rgb), 0.82), rgba(var(--moon-panel-rgb), 0.6));
    transition: translate 0.4s var(--moon-ease), border-color 0.3s ease, opacity 0.9s var(--moon-ease) calc(var(--d, 0) * 90ms), transform 0.9s var(--moon-ease) calc(var(--d, 0) * 90ms), filter 0.9s var(--moon-ease) calc(var(--d, 0) * 90ms);
}

.mod-legend-item:hover { translate: 0 -3px; border-color: color-mix(in srgb, var(--st) 35%, transparent); }

.mod-legend-mark {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--st) 30%, transparent);
    background: color-mix(in srgb, var(--st) 10%, transparent);
}

.mod-legend-mark .mod-dot { width: 10px; height: 10px; }

.mod-legend-item b { color: var(--moon-text); font-size: 1rem; }

.mod-legend-item p { margin: 0.3rem 0 0; color: var(--moon-dim); font-size: 0.9rem; line-height: 1.6; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 960px) {
    .mod-hero-grid { grid-template-columns: minmax(0, 1fr); }

    .mod-hero-copy { order: 2; text-align: center; }

    .mod-hero h1 { margin-inline: auto; font-size: clamp(2.3rem, 8.4vw, 3.8rem); }

    .mod-hero .mc-lead { margin-inline: auto; }

    .mod-hero .mc-actions { justify-content: center; }

    .mod-orbit { order: 1; width: min(360px, 78%); margin-bottom: -0.75rem; }

    .mod-overview { grid-template-columns: 1fr 1fr; }

    .mod-overview-health { grid-column: 1 / -1; border-left: 0 !important; border-top: 1px solid var(--moon-line); }

    .mod-toolbar { position: relative; top: auto; }

    /* stacked: search, categories, status, count */
    .mod-toolbar-row { display: contents; }

    .mod-search { order: 1; }

    .mod-category-chips { order: 2; }

    .mod-status-chips { order: 3; justify-self: start; }

    .mod-result { order: 4; margin: 0 0.4rem; }

    .mod-legend { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
    .mod-hero { padding-top: 2rem; }

    .mod-orbit { width: min(270px, 74%); margin-bottom: -0.25rem; }

    .mod-orbit-chip { padding: 0.25rem; }

    .mod-orbit-chip .home-glyph { width: 24px; height: 24px; }

    .mod-orbit-chip b { display: none; }

    .mod-overview > * { padding: 1.1rem 1.15rem; }

    .mod-overview-stat { min-width: 0; }

    .mod-status-chips { justify-self: stretch; display: grid; grid-template-columns: 1fr 1fr; overflow: visible; }

    .mod-status-chips .mod-chip { justify-content: center; }

    .mod-group-title { font-size: 1.15rem; }

    .mod-group-icon { width: 38px; height: 38px; border-radius: 12px; }

    .mod-grid { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }

    /* compact cards on phones: icon, name and status on one line */
    .mod-card {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "icon title status" "desc desc desc";
        align-items: center;
        gap: 0.6rem 0.75rem;
        padding: 0.9rem 1rem 1rem;
        contain-intrinsic-size: auto 104px;
    }

    .mod-card-head { display: contents; }

    .mod-card-icon { grid-area: icon; width: 32px; height: 32px; border-radius: 10px; }

    .mod-card h3 { grid-area: title; font-size: 0.97rem; overflow-wrap: anywhere; }

    .mod-card .mod-status { grid-area: status; }

    .mod-card p { grid-area: desc; }
}

@media (prefers-reduced-motion: reduce) {
    .mod-card, .mod-card.is-entering, .mod-group, .mod-meter, .mod-empty { animation: none !important; }
    .mod-orbit-track, .mod-orbit-chip { animation: none !important; }
}