html.home,
html.home body {
    background: var(--bg);
    color: var(--ink);
    font: 14px/1.45 var(--font-sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    height: 100%;
    margin: 0;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

/* Inputs and textareas keep their normal selection so the search
   field can be edited / copy-pasted. */
html.home input,
html.home textarea,
html.home [contenteditable="true"],
html.home [contenteditable="plaintext-only"] {
    user-select: text;
    -webkit-user-select: text;
}

/* Tokens used across the home layout. The container caps the
   content at 1600px and pads the left edge fluidly so the page
   gets generous gutters on wide displays. */
:root {
    --layout-max: 1600px;
    --container-pad: clamp(32px, 6vw, 64px);
    --topbar-height: 80px;
    --cart-pane-width: 340px;
    /* The gutter between `.main` and the cart pane in the body
       row. Drives both the layout-body's right reservation and
       the topbar's inter-column gap so the header lines up with
       the body underneath. */
    --cart-gap: 32px;
}

/* The single scrolling element on the page. Fixed-positioned
   children (the topbar, the cart pane) pin to the viewport;
   everything else scrolls inside `.scroll`. */
.scroll {
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Centered max-width container reused by the topbar and the body
   row. Padding is asymmetric so the left gutter scales with the
   viewport while the right keeps a fixed inset. */
.container {
    max-width: var(--layout-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
    box-sizing: border-box;
}

/* Topbar — sticky inside `.scroll`'s flow so it stays put while
   the page scrolls and the inner `.container` shares `.scroll`'s
   width (matching the layout-body's container exactly). The
   blurred background lives on the inner `.container` so the
   blur edge aligns with the page gutters. */
.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
}
.topbar__inner {
    display: flex;
    flex-direction: row-reverse;
    align-items: stretch;
    gap: var(--cart-gap);
    padding-top: 16px;
    padding-bottom: 14px;
    background: color-mix(in oklch, var(--bg) 70%, transparent);
    backdrop-filter: saturate(140%) blur(18px);
    -webkit-backdrop-filter: saturate(140%) blur(18px);
}

/* When the cart is open the topbar splits into two columns whose
   gap and widths match the layout-body row exactly: the search
   group's trailing edge aligns with `.main`'s right edge, and the
   logo's leading edge aligns with the cart pane's left edge. */
.topbar__main {
    display: flex;
    flex-direction: row-reverse;
    align-items: stretch;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.topbar__aside {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0;
    width: var(--cart-pane-width);
}

/* Body row — main column on the left, cart pane on the right.
   Top padding clears the fixed topbar. */
.layout-body {
    display: flex;
    align-items: flex-start;
    padding-top: 4px;
    padding-bottom: 32px;
    gap: 24px;
}

.main {
    flex: 1;
    min-width: 0;
}

/* Cart pane — fixed-positioned and aligned to the right edge of
   the centered container. When the cart is collapsed it's hidden
   entirely and the main column stretches the full container.
   Contents scroll independently of the page. */
.cart-pane {
    position: fixed;
    /* Align the pane's top with the start of the layout-body's
       content (sticky topbar height + the body's top padding). */
    top: calc(var(--topbar-height) + 4px);
    left: max(
        var(--container-pad),
        calc((100vw - var(--layout-max)) / 2 + var(--container-pad))
    );
    bottom: 24px;
    width: var(--cart-pane-width);
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    z-index: 5;
}

/* When the cart is open, reserve space at the left of the body
   so the fixed-positioned aside doesn't overlap the main grid. */
html[data-rail-right="expanded"] .layout-body {
    padding-left: calc(
        var(--cart-pane-width) + var(--cart-gap) + var(--container-pad)
    );
}

html[data-rail-right="collapsed"] .cart-pane {
    display: none;
}

/* Pretty-scroll treatment for the page feed and the cart body.
   Borrowed from the macatlas portal shell — thin translucent
   thumb on Firefox, more refined webkit-only override. */
.scroll,
.cart-body {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}

@supports selector(::-webkit-scrollbar) {
    .scroll,
    .cart-body {
        scrollbar-width: auto;
        scrollbar-color: auto;
    }

    .scroll::-webkit-scrollbar,
    .cart-body::-webkit-scrollbar {
        width: 14px;
        background: transparent;
    }

    .scroll::-webkit-scrollbar-track,
    .cart-body::-webkit-scrollbar-track {
        background: transparent;
    }

    .scroll::-webkit-scrollbar-thumb,
    .cart-body::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: var(--scrollbar-thumb);
        background-clip: padding-box;
        border: 4px solid transparent;
    }

    .scroll::-webkit-scrollbar-thumb:hover,
    .cart-body::-webkit-scrollbar-thumb:hover {
        background: var(--scrollbar-thumb-hover);
    }
}