/* /App.razor.rz.scp.css */
.notfound[b-h3kiur9scv] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-2);
    padding: var(--s-8) var(--gutter) calc(132px + env(safe-area-inset-bottom));
}

.notfound h1[b-h3kiur9scv] {
    font-family: var(--ff-display);
    font-size: var(--fs-title);
    line-height: 1.2;
}

.notfound p[b-h3kiur9scv] {
    margin: 0;
    color: var(--text-muted);
}

.notfound a[b-h3kiur9scv] {
    margin-top: var(--s-3);
    background: var(--accent-gradient);
    color: var(--text-on-accent);
    font-size: var(--fs-label);
    font-weight: 700;
    padding: 9px 16px;
    border-radius: var(--r-pill);
}
/* /Components/AppBar.razor.rz.scp.css */
/* The bar is ink in both themes — the raw ramp value, not the canvas token, so it
   stays dark when the app is in light mode. Everything inside it therefore draws from
   the raw ramp too; a semantic text token would flip and disappear. */
.bar[b-k94lsrjtwe] {
    height: 56px;
    background: var(--n-050);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    padding-inline: var(--gutter);
}

.bar__actions[b-k94lsrjtwe] {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    flex: 0 0 auto;
}

/* buys back ~8px for the wordmark on a 320px screen */
@media (max-width: 400px) {
    .bar[b-k94lsrjtwe] { padding-inline: var(--s-3); }
}

.wordmark[b-k94lsrjtwe] {
    font-family: var(--ff-display);
    font-size: var(--fs-wordmark);
    letter-spacing: -.02em;
    color: #fff;
    line-height: 1;
    min-width: 0;
    overflow: hidden;
}

.wordmark em[b-k94lsrjtwe] {
    font-style: normal;
    color: var(--sp-lime); /* fallback where background-clip:text is unsupported */
    background: var(--spectrum);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Two pills (~138px + ~142px) plus gutters leave under 80px on a 390px phone, which the
   full wordmark cannot hold. The mark keeps the spectrum treatment on its second letter,
   so the brand cue survives the shortening. */
.wordmark__full[b-k94lsrjtwe] { display: none; }
.wordmark__mark[b-k94lsrjtwe] { display: inline; }

@media (min-width: 480px) {
    .wordmark__full[b-k94lsrjtwe] { display: inline; }
    .wordmark__mark[b-k94lsrjtwe] { display: none; }
}
/* /Components/CompareGrid.razor.rz.scp.css */
/* Column ladder. Explicit tiers rather than auto-fill/minmax, so the count is
   predictable at every width and the tile size stays in a 127–236px band the
   whole way up — no tier doubles the tile size against its neighbour.

     <520px   3 cols   ~127px tiles
     520px    4 cols   ~127px
     768px    5 cols   ~150px
     1024px   6 cols   ~167px
     1440px   7 cols   ~203px  (capped at --shell-max 1600 → ~225px)

   The grid is always full-bleed inside the shell: no side gutter, 4px between
   tiles. Density is the point. */
.grid[b-sfej5a9pr8] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--grid-gap);
    background: var(--bg-gutter);
}

@media (min-width: 520px)  { .grid[b-sfej5a9pr8] { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 768px)  { .grid[b-sfej5a9pr8] { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1024px) { .grid[b-sfej5a9pr8] { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 1440px) { .grid[b-sfej5a9pr8] { grid-template-columns: repeat(7, 1fr); } }
/* /Components/CompareTile.razor.rz.scp.css */
.tile[b-jk9z00quix] {
    position: relative;
    animation: rise-b-jk9z00quix var(--t-base) var(--ease) both;
}

/* 20ms stagger across the first visible row and a half; past that the delay is
   capped so late tiles do not queue up behind a growing offset. */
/* covers the widest first row (7 columns) plus one; past that tiles just fade in
   with no delay, because a growing offset would leave late tiles visibly behind */
.tile:nth-child(1)[b-jk9z00quix] { animation-delay: 20ms; }
.tile:nth-child(2)[b-jk9z00quix] { animation-delay: 40ms; }
.tile:nth-child(3)[b-jk9z00quix] { animation-delay: 60ms; }
.tile:nth-child(4)[b-jk9z00quix] { animation-delay: 80ms; }
.tile:nth-child(5)[b-jk9z00quix] { animation-delay: 100ms; }
.tile:nth-child(6)[b-jk9z00quix] { animation-delay: 120ms; }
.tile:nth-child(7)[b-jk9z00quix] { animation-delay: 140ms; }
.tile:nth-child(8)[b-jk9z00quix] { animation-delay: 160ms; }

@keyframes rise-b-jk9z00quix {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

.tile__link[b-jk9z00quix] {
    display: block;
    position: relative;
    aspect-ratio: 1;   /* space is reserved before the image lands — the grid never reflows */
    overflow: hidden;
    background: var(--bg-raised);
    transition: transform var(--t-fast) var(--ease);
}

.tile__link:active[b-jk9z00quix] { transform: scale(.97); }

.tile__img[b-jk9z00quix] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-base) var(--ease);
}

/* Pointer devices get the one hover affordance in the feed: the photo pushes in
   slightly behind the fixed overlays. Guarded on a real pointer so it never
   fires from a touch tap being held. */
@media (hover: hover) and (pointer: fine) {
    .tile__link:hover .tile__img[b-jk9z00quix] { transform: scale(1.05); }
    .tile__link:hover[b-jk9z00quix] { outline: 2px solid var(--accent); outline-offset: -2px; }
}

/* measurement — the one overlay with a solid chip, so it survives a white studio background */
.tile__scale[b-jk9z00quix] {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 2;
    font-family: var(--ff-data);
    font-size: var(--fs-data);
    font-weight: 500;
    color: #fff;
    background: rgba(0,0,0,.6);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    padding: 2px 5px;
    border-radius: 5px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
    pointer-events: none;
}

.tile__scale u[b-jk9z00quix] {
    text-decoration: none;
    color: var(--sp-teal);
    font-size: var(--fs-micro);
    text-transform: uppercase;
    margin-left: 3px;
}

/* engagement row — scrim only, no full-tile tint */
.tile__stats[b-jk9z00quix] {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
    padding: 20px 5px 5px;
    background: var(--scrim);
    font-family: var(--ff-data);
    font-size: var(--fs-micro);
    color: #fff;
    pointer-events: none;
}

.stat[b-jk9z00quix] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    text-shadow: 0 1px 2px rgba(0,0,0,.8);
}

.stat b[b-jk9z00quix] { font-weight: 500; }

.stat svg[b-jk9z00quix] {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
}

.stat--like svg[b-jk9z00quix] { fill: var(--sp-coral); }

.stat--talk svg[b-jk9z00quix] {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linejoin: round;
    opacity: .92;
}

.stat--vs svg[b-jk9z00quix] { fill: currentColor; opacity: .92; }

/* below 340px the comparisons count drops to its icon; likes and comments never drop */
@media (max-width: 340px) {
    .stat--vs b[b-jk9z00quix] { display: none; }
}

.tile__crown[b-jk9z00quix] {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 2;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--sp-amber);
    color: var(--text-on-bright);
    display: grid;
    place-items: center;
    box-shadow: 0 0 12px rgba(255,197,61,.55);
}

.tile__crown svg[b-jk9z00quix] { width: 12px; height: 12px; }

/* --- desktop tier --------------------------------------------------------
   The type tokens step up on their own at 900px (tokens.css); these are the
   geometry that has to follow, so the overlays keep their proportion to a
   170px+ tile instead of clinging to the corners. */
@media (min-width: 900px) {
    .tile__scale[b-jk9z00quix] {
        top: 7px;
        left: 7px;
        padding: 3px 7px;
        border-radius: 6px;
    }

    .tile__stats[b-jk9z00quix] {
        padding: 26px 7px 7px;
        gap: 4px;
    }

    .stat[b-jk9z00quix] { gap: 3px; }
    .stat svg[b-jk9z00quix] { width: 12px; height: 12px; }

    .tile__crown[b-jk9z00quix] {
        top: 7px;
        right: 7px;
        width: 24px;
        height: 24px;
    }

    .tile__crown svg[b-jk9z00quix] { width: 14px; height: 14px; }
}
/* /Components/Dock.razor.rz.scp.css */
.dock[b-7eu4eqqfxp] {
    position: fixed;
    z-index: 30;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(12px + env(safe-area-inset-bottom));
    /* --dock-max, not --shell-max: the dock keeps phone proportions at every
       width, so it stays a floating control cluster instead of stretching into
       a 1600px bar. */
    width: min(calc(100% - 32px), calc(var(--dock-max) - 32px));
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    /* children re-enable this themselves — see PostButton and TabBar */
    pointer-events: none;
}
/* /Components/FilterControl.razor.rz.scp.css */
.ctl[b-jmehah7ohx] {
    min-width: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px 10px;
    min-height: 56px;
    background: var(--bg-surface);
    border: 1px solid var(--border-hair);
    border-radius: var(--r-md);
    transition: border-color var(--t-fast) var(--ease),
                transform var(--t-fast) var(--ease),
                background var(--t-fast) var(--ease);
}

.ctl:active[b-jmehah7ohx] { transform: scale(.97); }
.ctl:hover:not(:disabled)[b-jmehah7ohx] { background: var(--bg-raised); }
.ctl:disabled[b-jmehah7ohx] { cursor: default; }
.ctl[aria-expanded="true"][b-jmehah7ohx] { border-color: var(--axis); }

.ctl--sort[b-jmehah7ohx] { --axis: var(--axis-sort); }
.ctl--subject[b-jmehah7ohx] { --axis: var(--axis-subject); }
.ctl--reference[b-jmehah7ohx] { --axis: var(--axis-reference); }

.ctl__label[b-jmehah7ohx] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--ff-data);
    font-size: var(--fs-micro);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ctl__label[b-jmehah7ohx]::before {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--axis);
    box-shadow: 0 0 8px var(--axis);
}

.ctl__value[b-jmehah7ohx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    font-size: .78rem;
    font-weight: 700;
    color: var(--text-strong);
    min-width: 0;
}

.ctl__value > span[b-jmehah7ohx] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ctl__value svg[b-jmehah7ohx] {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    stroke: var(--text-muted);
    fill: none;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* loading placeholder — same height as the value line so nothing reflows */
.ctl__pending[b-jmehah7ohx] {
    display: block;
    width: 72%;
    height: .78rem;
    border-radius: 3px;
}
/* /Components/FilterControls.razor.rz.scp.css */
.controls[b-luwp1bkvra] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-2);
    padding: var(--s-3) var(--gutter);
    background: var(--bg-canvas);
    border-bottom: 1px solid var(--border-hair);
}

/* At 200% text zoom three columns stop fitting; stack rather than truncate. */
@media (max-width: 300px) {
    .controls[b-luwp1bkvra] { grid-template-columns: 1fr; }
}

/* Past the phone the controls stop stretching. Three 1fr columns on a 1600px
   shell would be 530px each — a dropdown holding the word "Trending". They cap
   and sit left, aligned under the wordmark, so the row reads as a toolbar
   rather than three banners. */
@media (min-width: 768px) {
    .controls[b-luwp1bkvra] {
        grid-template-columns: repeat(3, minmax(150px, 220px));
        justify-content: start;
        gap: var(--s-3);
    }
}
/* /Components/PostButton.razor.rz.scp.css */
.post[b-ou1b7e9qiu] {
    pointer-events: auto; /* the dock disables its own, see Dock.razor.css */
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent-gradient);
    color: var(--text-on-accent);
    display: grid;
    place-items: center;
    box-shadow: 0 8px 24px rgba(110,75,245,.45), 0 0 0 1px rgba(255,255,255,.10);
    transition: transform var(--t-fast) var(--ease), filter var(--t-fast) var(--ease);
}

.post:active[b-ou1b7e9qiu] { transform: scale(.94); filter: brightness(1.12); }

.post svg[b-ou1b7e9qiu] {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* /Components/PromoSlot.razor.rz.scp.css */
/* Capped and centred rather than full-bleed: at shell width the copy column
   would run to ~800px and the card would read as a billboard, not a slot in a
   feed. It still breaks the grid rhythm, which is its whole job. */
.promo[b-h6715v1nrj] {
    position: relative;
    max-width: min(var(--promo-max), calc(100% - var(--gutter) * 2));
    margin: var(--s-4) auto;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--bg-surface);
    border: 1px solid var(--border-hair);
    box-shadow: var(--e-1);
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    min-height: 150px;
}

@media (min-width: 900px) {
    .promo[b-h6715v1nrj] { min-height: 190px; }
}

.promo__tag[b-h6715v1nrj] {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    font-family: var(--ff-data);
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: .1em;
    background: rgba(0,0,0,.7);
    color: #fff;
    border: 1px solid rgba(255,255,255,.16);
    padding: 3px 7px;
    border-radius: var(--r-sm);
}

.promo__copy[b-h6715v1nrj] {
    padding: var(--s-6) var(--s-4) var(--s-4);
    display: flex;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
}

.promo__brand[b-h6715v1nrj] {
    margin: 0;
    font-family: var(--ff-data);
    font-size: var(--fs-micro);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.promo__title[b-h6715v1nrj] {
    margin: 2px 0 0;
    font-family: var(--ff-display);
    font-size: 1.05rem;
    line-height: 1.1;
    letter-spacing: -.02em;
}

.promo__sub[b-h6715v1nrj] {
    margin: 0;
    font-size: var(--fs-label);
    color: var(--text-muted);
}

.promo__cta[b-h6715v1nrj] {
    align-self: flex-start;
    margin-top: var(--s-3);
    background: var(--accent-gradient);
    color: var(--text-on-accent);
    font-size: var(--fs-label);
    font-weight: 700;
    padding: 9px 16px;
    border-radius: var(--r-pill);
    transition: transform var(--t-fast) var(--ease), filter var(--t-fast) var(--ease);
}

.promo__cta:active[b-h6715v1nrj] { transform: scale(.96); filter: brightness(1.1); }

.promo__art[b-h6715v1nrj] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* loading placeholder */
.promo__line[b-h6715v1nrj] {
    display: block;
    border-radius: 4px;
}

.promo__line--brand[b-h6715v1nrj] { width: 44%; height: 10px; }
.promo__line--title[b-h6715v1nrj] { width: 76%; height: 17px; margin-top: 6px; }
.promo__line--sub[b-h6715v1nrj] { width: 62%; height: 13px; margin-top: 6px; }
.promo__line--cta[b-h6715v1nrj] { width: 96px; height: 34px; margin-top: var(--s-3); border-radius: var(--r-pill); }
/* /Components/SafetyToggle.razor.rz.scp.css */
/* Sits on the ink bar, which does not change with the theme — so, like ThemeToggle,
   every colour here is a RAW ramp value. --text-faint would flip to a dark tone in
   light mode and all but vanish against the ink. */
.safety[b-th1aaqx9fn] {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,.09);
    border-radius: var(--r-pill);
    padding: 3px;
}

.safety__opt[b-th1aaqx9fn] {
    position: relative;
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--n-500);   /* 5.3:1 on ink */
    padding: 0 14px;
    height: 32px;
    min-width: 56px;
    border-radius: var(--r-pill);
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

/* reads as 32px, hits as 44px */
.safety__opt[b-th1aaqx9fn]::after {
    content: "";
    position: absolute;
    inset: -6px 0;
}

/* weight carries the state too, so it is not encoded in colour alone */
.safety__opt[aria-pressed="true"][b-th1aaqx9fn] { font-weight: 700; }

.safety__opt[data-rating="sfw"][aria-pressed="true"][b-th1aaqx9fn] {
    background: var(--sp-lime);
    color: var(--text-on-bright);
}

.safety__opt[data-rating="nsfw"][aria-pressed="true"][b-th1aaqx9fn] {
    background: var(--sp-coral);
    color: var(--text-on-bright);
}

/* --focus-ring darkens in light mode, which would put a dark ring on the ink bar.
   Raw teal instead — 9.6:1 against the ink, in either theme. */
.safety__opt:focus-visible[b-th1aaqx9fn] { outline-color: var(--sp-teal); }

/* Two pills in one bar get tight on a small phone. The labels give up their slack
   before the theme control does, because those segments are already at the 44px
   touch floor and cannot shrink. */
@media (max-width: 400px) {
    .safety__opt[b-th1aaqx9fn] {
        min-width: 0;
        padding: 0 10px;
    }
}
/* /Components/ScaleRule.razor.rz.scp.css */
.rule[b-hrndlqwp8p] {
    height: 8px;
    /* two tick layers over the spectrum: minor every 8px, major every 40px */
    background-image:
        repeating-linear-gradient(90deg, var(--n-050) 0 1px, transparent 1px 8px),
        repeating-linear-gradient(90deg, var(--n-050) 0 1.5px, transparent 1.5px 40px),
        var(--spectrum);
    background-size: 100% 3px, 100% 6px, 100% 100%;
    background-repeat: no-repeat;
    transform-origin: left center;
    animation: draw-b-hrndlqwp8p 520ms var(--ease) both;
}

@keyframes draw-b-hrndlqwp8p {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}
/* /Components/TabBar.razor.rz.scp.css */
.tabs[b-t57u3ambsi] {
    pointer-events: auto; /* the dock disables its own, see Dock.razor.css */
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid var(--border-hair);
    border-radius: var(--r-pill);
    padding: 6px;
    box-shadow: var(--e-2);
}

.tab[b-t57u3ambsi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 52px;
    border-radius: var(--r-pill);
    color: var(--text-faint);
    font-size: var(--fs-micro);
    font-weight: 500;
    transition: background var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease),
                transform var(--t-fast) var(--ease);
}

.tab:active[b-t57u3ambsi] { transform: scale(.95); }

.tab svg[b-t57u3ambsi] {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* NavLink stamps .active on the matching route */
.tab.active[b-t57u3ambsi] {
    background: var(--accent);
    color: var(--text-on-accent);
    font-weight: 700;
}
/* /Components/ThemeToggle.razor.rz.scp.css */
/* The bar is ink in both themes, so every colour here comes from the RAW ramp. A
   semantic token like --text-faint flips to a dark tone in light mode and would all
   but vanish against the ink. */
.theme[b-c31rlg8zya] {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,.09);
    border-radius: var(--r-pill);
    padding: 3px;
}

.theme__opt[b-c31rlg8zya] {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 32px;
    border-radius: var(--r-pill);
    color: var(--n-500);   /* 5.3:1 on ink */
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

/* reads as 32px, hits as 44px — the width is already at the floor */
.theme__opt[b-c31rlg8zya]::after {
    content: "";
    position: absolute;
    inset: -6px 0;
}

.theme__opt svg[b-c31rlg8zya] {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Selection is a fill plus a heavier stroke — never hue alone. The theme control
   deliberately takes no spectrum colour: a hue in this app means sort / subject /
   reference / award / like, and "which theme" is none of those. */
.theme__opt[aria-pressed="true"][b-c31rlg8zya] {
    background: rgba(255,255,255,.16);
    color: #fff;
}

.theme__opt[aria-pressed="true"] svg[b-c31rlg8zya] {
    stroke-width: 2.3;
}

/* --focus-ring darkens in light mode, which would put a dark ring on the ink bar.
   Raw teal instead — 9.6:1 against the ink, in either theme. */
.theme__opt:focus-visible[b-c31rlg8zya] { outline-color: var(--sp-teal); }
/* /Components/TileSkeleton.razor.rz.scp.css */
.tile[b-2uj9imchog] { position: relative; }

.tile__box[b-2uj9imchog] {
    position: relative;
    aspect-ratio: 1;
    background: var(--bg-raised);
}

.tile__chip[b-2uj9imchog] {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 38px;
    height: 15px;
    border-radius: 5px;
    background: rgba(255,255,255,.10);
}

.tile__row[b-2uj9imchog] {
    position: absolute;
    inset: auto 5px 5px 5px;
    display: flex;
    justify-content: space-between;
}

.tile__pip[b-2uj9imchog] {
    width: 22px;
    height: 9px;
    border-radius: 3px;
    background: rgba(255,255,255,.10);
}

[data-theme="light"] .tile__chip[b-2uj9imchog],
[data-theme="light"] .tile__pip[b-2uj9imchog] {
    background: rgba(16,18,24,.10);
}

/* mirrors the real tile's desktop tier so the swap is invisible */
@media (min-width: 900px) {
    .tile__chip[b-2uj9imchog] {
        top: 7px;
        left: 7px;
        width: 46px;
        height: 18px;
        border-radius: 6px;
    }

    .tile__row[b-2uj9imchog] { inset: auto 7px 7px 7px; }

    .tile__pip[b-2uj9imchog] {
        width: 26px;
        height: 11px;
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* The shell fills the viewport and grows with it, up to --shell-max. Past that
   ceiling it centres and the leftover ground shows through as --bg-void, so an
   ultrawide monitor reads as a framed app rather than a wall of thumbnails. */
.shell[b-mp8rnpumt6] {
    width: 100%;
    max-width: var(--shell-max);
    margin-inline: auto;
    min-height: 100dvh;
    background: var(--bg-canvas);
    position: relative;
    overflow-x: hidden;
}

/* The frame only earns its keep once there is canvas beside the shell to
   separate it from. Below the cap the shell is the whole viewport and the
   shadow would sit off-screen. */
@media (min-width: 1600px) {
    .shell[b-mp8rnpumt6] {
        box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 24px 80px rgba(0,0,0,.8);
    }
}

[data-theme="light"] .shell[b-mp8rnpumt6] {
    box-shadow: none;
}

@media (min-width: 1600px) {
    [data-theme="light"] .shell[b-mp8rnpumt6] {
        box-shadow: 0 0 0 1px rgba(16,18,24,.08), 0 24px 80px rgba(16,18,24,.12);
    }
}

.appbar[b-mp8rnpumt6] {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--bg-canvas);
}
/* /Pages/Home.razor.rz.scp.css */
/* clears the dock: 56px tab bar + 56px post button + gaps + safe area */
.feed[b-9hybmx173a] {
    padding-bottom: calc(132px + env(safe-area-inset-bottom));
}