/* /categories — layout, the market's sky box, and the index dialog.
 *
 * theme.css loads after this file and owns the tokens (STYLEGUIDE §7). The
 * page is the homepage's language (landing_page.css .lp-sky): one night-sky
 * box whose title is the market's sentence and whose floor all eight indices
 * stand on, each render in a pool of light the colour of its move. Approved
 * on the "Site pages in the new style" canvas, 2026-09-28, option A
 * (https://claude.ai/artifact/Ms8oSd9uQLCEAaUCjzXDkL). Rounds 2-4 on the same
 * canvas, approved 2026-09-29, drew the rest: the bars and tags in place of
 * the sentences, Today / 7 days / 30 days, and the dialog as the item page.
 *
 * On motion: STYLEGUIDE §5 bans ambient shimmer outright ("no pulsing glows,
 * no parallax, no shimmer") and records an attention pass that was built and
 * reverted for exactly that. Nothing here animates on its own; every
 * transition is colour on a control under the pointer.
 */

*, *::before, *::after { box-sizing: border-box; }

/* max-width + width + margin, all three: `.ia-main` is a flex column, so an
   auto cross-axis margin alone resizes rather than centres. STYLEGUIDE §7.6. */
.cat {
    max-width: 1180px;
    width: 100%;
    margin: 0 auto;
    padding: 1.6rem 1.25rem 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.375rem;
}

/* Any display:flex/grid class beats the HTML `hidden` attribute, and
   categories.js closes panels with `hidden`. STYLEGUIDE §7.6. Both scopes: a
   panel is hidden while it is on its way back out of the overlay too. */
.cat [hidden],
.cat-sheet [hidden] { display: none !important; }

/* Scoped through .cat-cubes on purpose: it must stop matching the moment
   categories.js moves a panel into the overlay, or the opened index would be
   an empty dialog. See the note beside the class in categories.html. */
.cat-js .cat-cubes .cat-cube-panel { display: none; }

/* Reserved always, so that locking the page scroll behind the overlay does not
   reclaim the scrollbar's width and shift the whole page sideways as it opens.
   Paid for on every load; the alternative is a visible jump on every open. */
html { scrollbar-gutter: stable; }

/* ── The page's heading ────────────────────────────────────────────────── */

/* The canvas's page top (option A): the title, and under it the line that
   says what the page is. The freshness ticker moved into the sky box's head,
   beside the market it dates. */
.cat-head { margin: 0; }

.cat-head h1 {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #fff;
}

.cat-lede {
    margin: 0.375rem 0 0;
    max-width: 68ch;
    font-size: 0.9625rem;
    line-height: 1.6;
    color: var(--muted);
}

/* ── The market today: one sky box ────────────────────────────────────── */

/* The homepage band's box (landing_page.css .lp-sky), approved for this page
   on the "Site pages in the new style" canvas, 2026-09-28, option A: its night
   gradient, the slate hairline at the surface radius, --elev-1, a few dots of
   sky clear of the words, and one lit floor that all eight indices stand on.
   Not a -card, which theme.css would glass (STYLEGUIDE §7).

   In flow rather than drawn to the board's fixed 430px: the words sit at the
   top, the floor row is pushed to the bottom by its auto margin, and the
   min-height is the board's, so a wide box matches it exactly and a narrower
   one that needs two rows of indices grows instead of overlapping them.

   A query container, because what decides the floor's layout is the box's own
   width, not the window's: the sidebar takes 240px off it on a desktop. */
.cat-sky {
    container: cat-sky / inline-size;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-height: 404px;
    border-radius: var(--surface-radius);
    border: 1px solid var(--surface-border);
    background: linear-gradient(180deg, #03050C 0%, #060C1B 50%, #0C1A30 100%);
    box-shadow: var(--elev-1);
}

/* The wide sky starts past the copy's 620px measure plus its 32px inset, so
   no dot can land on a word at any width that shows it. */
.cat-dots {
    position: absolute;
    pointer-events: none;
}

.cat-dots--w {
    top: 0;
    left: max(55%, 670px);
    right: 0;
    height: 190px;
}

.cat-dots--p {
    inset: 0;
    display: none;
}

.cat-dots i {
    position: absolute;
    width: 1px;
    height: 1px;
    border-radius: 50%;
    background: #fff;
    opacity: 0.45;
}

.cat-dots i.is-big {
    width: 2px;
    height: 2px;
    opacity: 0.8;
}

.cat-floor {
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: -60px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(120, 170, 235, 0.12), transparent);
    pointer-events: none;
}

.cat-sky-copy {
    position: relative;
    z-index: 2;
    padding: 26px 32px 0;
}

.cat-sky-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 11px;
}

.cat-micro {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted-2);
}

.cat-micro-ic {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
}

.cat-fresh {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: var(--muted-2);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.cat-sky-title {
    margin: 0.875rem 0 0.5rem;
    font-size: 2.25rem;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
}

.cat-sky-title .is-up { color: #34D399; }
.cat-sky-title .is-down { color: #F0857A; }
.cat-sky-title .is-flat { color: var(--muted); }

/* ── The indices, on the floor ─────────────────────────────────────────── */

/* Eight across on the board, and that holds while a column can carry the
   longest name on one line: "Skilling supplies" is 107px at 13.5px bold, so
   eight columns need a 920px box -- a 1280px screen beside the sidebar gives
   927. Narrower, it is four across and two rows, then the phone's two
   columns of rows (the @container rules below). */
.cat-cubes {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 4px;
    margin: auto 14px 22px;
    padding-top: 28px;
}

.cat-cube { min-width: 0; }

/* The paint an index wears is its direction, and it is two values: the
   figure's colour and the light it stands in. The three are the canvas's
   pools; the dialog clones the figure and borrows the paint class with it
   (categories.js), which is why --figure lives here and not on the figure. */
.cat-cube--rising {
    --figure: #34D399;
    --pool: radial-gradient(closest-side, rgba(120, 232, 176, 0.34), rgba(70, 160, 120, 0.12) 55%, transparent);
}

.cat-cube--falling {
    --figure: #F0857A;
    --pool: radial-gradient(closest-side, rgba(226, 110, 94, 0.32), rgba(160, 70, 60, 0.12) 55%, transparent);
}

/* No direction to report, so neither colour: the figure in near-white and a
   pool in the sky's own blue. */
.cat-cube--flat {
    --figure: rgba(255, 255, 255, 0.75);
    --pool: radial-gradient(closest-side, rgba(120, 170, 235, 0.30), rgba(70, 110, 170, 0.12) 55%, transparent);
}

.cat-cube-head { margin: 0; }

/* The whole index is the control, and it has no box: the pool is the frame.
   So the focus ring is the one edge it draws, and only when tabbed to. */
.cat-cube-face {
    appearance: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: none;
    font: inherit;
    color: var(--text);
    text-align: center;
    cursor: pointer;
}

.cat-cube-face:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.cat-cube-art {
    position: relative;
    display: block;
    width: 100%;
    height: 124px;
}

.cat-cube-pool {
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 112px;
    height: 28px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: var(--pool);
}

.is-broad .cat-cube-pool {
    width: 136px;
    height: 34px;
}

.cat-cube-icon {
    position: absolute;
    left: 50%;
    bottom: 11px;
    width: 88px;
    height: 88px;
    transform: translateX(-50%);
    object-fit: contain;
    filter: drop-shadow(0 5px 4px rgba(0, 0, 0, 0.6));
}

.cat-cube-words {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    max-width: 100%;
}

.cat-cube-name {
    margin-top: 6px;
    font-size: 0.844rem;
    font-weight: 700;
    line-height: 1.45;
    color: #fff;
    transition: color 0.15s ease;
}

.cat-cube-face:hover .cat-cube-name { color: #5B9FED; }

.cat-cube-index {
    margin-top: 1px;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.45;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--figure);
}

/* The foot under the figure: the bar of items up (and Spike), or the
   week's or month's line. Laid out in the round 2 block below. */
.cat-cube-foot {
    margin-top: 2px;
    font-size: 0.72rem;
    line-height: 1.45;
    color: var(--muted-2);
    font-variant-numeric: tabular-nums;
}

.cat-cube-foot > span { white-space: nowrap; }

/* Four across, two rows, where eight columns would break a name. */
@container cat-sky (max-width: 919px) {
    .cat-cubes {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        row-gap: 12px;
    }
}

/* The phone's floor (canvas option A, phone): two columns of rows, each
   render standing in its own small pool at the left of its words. The words
   step down with it, and the sky moves its dots above the floor, where the
   phone's copy is not. */
@container cat-sky (max-width: 559px) {
    .cat-dots--w { display: none; }
    .cat-dots--p { display: block; }

    .cat-floor {
        bottom: -40px;
        height: 280px;
    }

    .cat-sky-copy { padding: 18px 18px 0; }
    .cat-sky-head { gap: 6px 9px; }

    .cat-sky-title {
        margin: 0.75rem 0 0.375rem;
        font-size: 1.625rem;
    }

    .cat-fresh-word { display: none; }

    .cat-cubes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2px 4px;
        margin: auto 6px 12px;
        padding-top: 24px;
    }

    .cat-cube-face {
        flex-direction: row;
        align-items: center;
        gap: 6px;
        padding: 6px 0;
        border-radius: 12px;
        text-align: left;
    }

    .cat-cube-art {
        flex: none;
        width: 58px;
        height: 58px;
    }

    .cat-cube-pool,
    .is-broad .cat-cube-pool {
        left: 2px;
        right: 2px;
        bottom: 2px;
        width: auto;
        height: 20px;
        transform: none;
    }

    .cat-cube-icon {
        left: 7px;
        top: 3px;
        bottom: auto;
        width: 44px;
        height: 44px;
        transform: none;
        filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.6));
    }

    .cat-cube-words { align-items: flex-start; }

    .cat-cube-name {
        margin-top: 0;
        font-size: 0.8125rem;
        letter-spacing: -0.01em;
    }

    .cat-cube-index {
        margin-top: 0;
        font-size: 1rem;
    }

    .cat-cube-foot {
        margin-top: 0;
        font-size: 0.6875rem;
    }
}

/* A 320px phone: a column is 136px, and 58px of picture leaves too little for
   a one-word name ("Consumables" is 85px), so the picture gives way first. */
@container cat-sky (max-width: 319px) {
    .cat-cube-art {
        width: 46px;
        height: 46px;
    }

    .cat-cube-pool,
    .is-broad .cat-cube-pool { height: 16px; }

    .cat-cube-icon {
        left: 5px;
        top: 2px;
        width: 36px;
        height: 36px;
    }

    .cat-cube-name { font-size: 0.75rem; }
    .cat-cube-index { font-size: 0.9375rem; }
}

/* ── The panel ─────────────────────────────────────────────────────────── */

/* The panel is rendered inside its index and MOVED into .cat-sheet-body when
   the card is pressed (categories.js). So every rule for its contents is
   scoped to `.cat-cube-panel`, never to `.cat-cube` -- a rule that reaches in
   from the card stops applying the moment the panel is in the overlay, which
   is the one failure this arrangement can have.

   Inside the overlay it is the whole card, so the rule and the top margin that
   separated it from the field are dropped there. */
.cat-cube-panel {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.85rem;
    padding: 0.75rem 0.95rem 1rem;
    border-top: 1px solid var(--line);
    margin-top: 0.15rem;
}

.cat-sheet-body .cat-cube-panel {
    border-top: 0;
    margin-top: 0;
    padding: 0.9rem 0 0;
}

/* The constituents, as a strip. Icon-only keeps a row one line high; the name
   rides in each link's alt text so the crawl paths survive. */
.cat-strip { display: inline-flex; gap: 0.15rem; }

.cat-strip-item {
    display: inline-flex;
    border-radius: 6px;
    padding: 1px;
    line-height: 0;
}

.cat-strip-item:hover { background: rgba(255, 255, 255, 0.08); }
.cat-strip-item img { width: 22px; height: 22px; object-fit: contain; }

/* An <img> with no src renders its alt text, so a strip of not-yet-promoted
   icons came up as a row of clipped two-letter fragments -- "Dr", "Co", "Ad".
   The alt has to stay (it is the link's accessible name and what a crawler
   reads as anchor text), so it is the RENDERING of it that goes: font-size 0
   while the icon is still deferred, plus a faint slab so the strip reads as
   loading rather than as half empty.

   Keyed off [data-src], which categories.js removes the moment it promotes an
   icon -- so this is exactly the deferred state and nothing else. A genuine
   404 later still shows its alt, which is the one time that text is useful. */
.cat-strip-item img[data-src] {
    font-size: 0;
    background: rgba(255, 255, 255, 0.045);
    border-radius: 4px;
}

/* ── Movement figures ──────────────────────────────────────────────────── */

/* Bare, not capsuled, as /predict's movement figure (.pr-spark-move) is:
   colour and weight say up or down, and a box around them says it a third
   time. */
.cat-move {
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cat-move.is-up { color: #34D399; }
.cat-move.is-down { color: #F0857A; }
.cat-move.is-flat { color: var(--muted-2); }

/* ── Constituents ──────────────────────────────────────────────────────── */

.cat-holdings {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
    gap: 0.1rem 0.5rem;
}

.cat-holding { min-width: 0; }

.cat-holding a {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.26rem 0.3rem;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.cat-holding a:hover { background: rgba(255, 255, 255, 0.05); }

.cat-holding-icon { width: 26px; height: 26px; flex-shrink: 0; object-fit: contain; }

.cat-holding-body { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }

.cat-holding-name {
    font-size: 0.79rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cat-holding-price {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    font-size: 0.73rem;
    color: var(--muted-2);
    font-variant-numeric: tabular-nums;
}

.cat-holding-move { font-size: 0.7rem; font-weight: 600; }
.cat-holding-move.is-up { color: #34D399; }
.cat-holding-move.is-down { color: #EF4444; }

/* The unit split off the figure, as the item rail does it: a column of numbers
   each carrying "gp" is that word printed once per row. */
.cat-unit {
    margin-left: 0.18em;
    font-size: 0.72em;
    font-weight: 500;
    color: var(--muted-2);
}

/* ── Empty state and footer links ──────────────────────────────────────── */

/* Borderless too. It ends in "-card", so theme.css glasses it; the fill and
   the radius are wanted, the hairline is not -- doubled class to outrank the
   force. */
.cat-empty-card { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.55rem; }
.cat-empty-card.cat-empty-card { border: 0 !important; }
.cat-empty-card h2 { margin: 0; font-size: 1.1rem; }
.cat-empty-card p { margin: 0; color: var(--muted); line-height: 1.55; }
.cat-empty-link { align-self: flex-start; color: #5B9FED; font-weight: 600; text-decoration: none; }

/* ── The prose, folded ─────────────────────────────────────────────────── */

/* gap: 0 — each fold carries its own padding and is separated by its own rule,
   the arrangement the recipe pages use (assemble_repair.css .ar-content). */
.cat-content { display: flex; flex-direction: column; gap: 0; border-bottom: 1px solid var(--line); }

/* The folds sit one FAQ's height below the tool (STYLEGUIDE §3): 11.25rem,
   180px, from the last thing drawn above -- the sky box, or members' flips
   for a subscriber -- to the first fold's rule. .cat's own flex gap is part
   of that, so the margin is the rest: 1.375rem of gap here, 1rem on a phone. */
.cat-content { margin-top: calc(11.25rem - 1.375rem); }

/* Folded rather than hidden: the copy is in the document at load and only
   collapsed by CSS, which is what keeps it indexable. See the note above
   .cat-content in the template before moving any of it behind a fetch. */
.cat-fold { border-top: 1px solid var(--line); }

.cat-fold summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.0625rem 0;
    cursor: pointer;
    list-style: none;
    color: var(--muted);
    transition: color 0.15s ease;
}

/* Both spellings: the triangle is a ::marker in Firefox and a
   ::-webkit-details-marker in older WebKit, and list-style alone misses one. */
.cat-fold summary::-webkit-details-marker { display: none; }
.cat-fold summary::marker { content: ""; }

.cat-fold summary:hover,
.cat-fold[open] summary { color: var(--text); }

.cat-fold summary:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: 8px;
}

.cat-fold-mark {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--muted-2);
    transition: transform 0.15s ease;
}

.cat-fold-mark svg { width: 0.875rem; height: 0.875rem; }
.cat-fold[open] .cat-fold-mark { transform: rotate(180deg); }

/* On the fold, not on its children: a rule per child would also space the
   paragraphs inside the body away from each other. */
.cat-fold[open] { padding-bottom: 1.2rem; }

.cat-content h2 {
    margin: 0;
    font-size: 1.1875rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: inherit;
}

.cat-content p {
    margin: 0;
    max-width: 76ch;
    color: var(--muted);
    line-height: 1.65;
    font-size: 0.92rem;
}

.cat-content p + p { margin-top: 0.7rem; }

/* The category glossary: the blurbs that used to sit inside every open index.
   A dl rather than a stack of paragraphs because that is what this is — eight
   names and what each one means. */
.cat-gloss { margin: 0; }

.cat-gloss dt {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
}

.cat-gloss dt + dd { margin-top: 0.25rem; }
.cat-gloss dd + dt { margin-top: 0.9rem; }

.cat-gloss dt a { color: inherit; text-decoration: none; }
.cat-gloss dt a:hover { color: #5B9FED; }

.cat-gloss dt span {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-2);
}

.cat-gloss dd {
    margin: 0;
    max-width: 76ch;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--muted);
}

/* Each category's points, one short line apiece (2026-10-01). */
.cat-gloss-points {
    margin: 0;
    padding-left: 1.1rem;
}

.cat-gloss-points li + li { margin-top: 0.15rem; }
.cat-gloss-points li::marker { color: var(--muted-2); }

.cat-faq-item {
    border-top: 1px solid var(--line);
    padding-top: 0.9rem;
    margin-top: 0.9rem;
}

.cat-faq-item:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }

/* Scoped through .cat-content, not !important: it has to outrank
   `.cat-content p`, which sets the muted body colour two selectors up. */
.cat-content .cat-faq-q {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
}

.cat-faq-item p + p { margin-top: 0.35rem; }

/* ── The overlay ───────────────────────────────────────────────────────── */

/* A real <dialog>, opened with showModal(), so it lives in the browser's top
   layer: no z-index band to keep in step with the rail, and no risk of being
   trapped inside a transformed ancestor the way a z-index inside .ia-main can
   be. The card is the dialog itself rather than a child of a backdrop div,
   which is the difference from .fp-modal in profile_public.css -- the scrim is
   ::backdrop, so the two are styled separately here.

   Borderless, like /predict's board and guide cards: the fill and the shadow
   are what hold the surface, and a hairline around a panel that is already
   lifted off a blurred page is an outline drawn around an edge that is
   already there. */
.cat-sheet {
    /* 100% rather than 100vw throughout: a fixed element's 100% is the initial
       containing block, which already has the scrollbar gutter taken off it,
       while 100vw includes the gutter and is the classic way a "full width"
       box ends up wider than the page. */
    /* 1180px matches .cat's own max-width, so an opened index is exactly as
       wide as the page behind it rather than a narrower card floating over it,
       and its group rows keep room for their item strips -- each of those
       icons is a crawl path into /item/, carried in its alt text. */
    width: min(1180px, calc(100% - 2rem));
    max-width: none;
    max-height: min(82vh, 720px);
    padding: 0;
    border: 0;
    border-radius: 20px;
    background: linear-gradient(158deg, #131A26 0%, #0C121B 55%, #080C13 100%);
    box-shadow: var(--elev-3), inset 0 1px 0 rgba(255, 255, 255, 0.045);
    color: var(--text);
    overflow: hidden;
}

.cat-sheet[open] { display: flex; flex-direction: column; }

/* The dialog takes focus on open (see categories.js) purely so the ring does
   not land on the close button. It is a container, not a control, so it draws
   nothing for it -- every real control inside still shows its own. */
.cat-sheet:focus { outline: none; }

.cat-sheet::backdrop {
    background: rgba(5, 8, 20, 0.55);
    backdrop-filter: blur(8px) saturate(120%);
}

/* showModal() leaves the page behind scrollable; a scrim you can scroll under
   reads as a broken overlay. */
.cat-sheet-lock, .cat-sheet-lock body { overflow: hidden; }

/* No rule under the head either. The head is the title's line and the body
   starts below it -- the space between them is the separation, the same way
   the board's rows are told apart by their gap and not by a border. */
.cat-sheet-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    padding: 1.05rem 1.15rem 0.35rem;
}

/* The same name in the same face as the card it came from. */
.cat-sheet-title {
    margin: 0;
    font-family: 'RuneScape UF', system-ui, sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: 0;
    color: var(--text);
}

/* The card's own figure, cloned in. It sits at card size on the card and is
   stepped down here, where the title is carrying the weight instead. */
/* The card's paint travels with the figure: categories.js copies the index's
   `cat-cube--*` class onto this span, which is what defines --figure. Without
   it the cloned number lands outside every ramp on the page and comes out
   colourless -- a red index reporting itself in plain white. */
.cat-sheet-move { margin-right: auto; }
.cat-sheet-move .cat-cube-index { font-size: 1.05rem; }

.cat-sheet-close {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 999px;
    color: var(--muted-2);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.cat-sheet-close:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.cat-sheet-close:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.cat-sheet-close svg { width: 1rem; height: 1rem; }

.cat-sheet-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 1.15rem 1.15rem;
}

/* ── The phone's way out ────────────────────────────────────── */

/* The bar itself is theme.css's .ov-close-bar, shared with the Bookmarks and
   Item Alerts sheets — one control on every surface that covers a phone, so a
   reader who has closed one has already learned this one. It joins the cross
   in the head rather than replacing it: with a pointer the corner is where a
   reader looks, and the bar is drawn at no width where a pointer is likely.

   Only the handoff is local, and this sheet needs it twice because it has two
   phone-adjacent shapes. Under 768px it is still the centred 20px card, so the
   bar rounds to match; at 640px it becomes the bottom-pinned sheet whose foot
   is the screen's edge, and a radius down there would curve away from a corner
   that is no longer a corner. */
.cat-sheet { --ov-close-radius: 20px; }

/* ── Narrow widths ─────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    /* No side padding: .ia-main already gives a phone its 16px gutter,
       and a second 16px here squeezed the floor's names. */
    .cat { padding: 1.25rem 0 1.5rem; gap: 1rem; }
    .cat-content { margin-top: calc(11.25rem - 1rem); }

    .cat-head h1 { font-size: 1.344rem; }
    .cat-lede { font-size: 0.875rem; line-height: 1.55; }

    .cat-sky { min-height: 432px; }

    .cat-fold summary { padding: 0.9375rem 0; }
    .cat-content h2 { font-size: 1.03rem; }

    .cat-holdings { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
    .cat-cube-panel { padding: 0.1rem 0.85rem 0.9rem; }

    /* Nearly the whole screen, and pinned to the bottom rather than centred:
       on a phone a centred card leaves a strip of scrim above and below that
       is too thin to aim at and too thick to ignore, and the close button ends
       up at the top of a tall reach.

       The close bar goes square with it — its bottom corners are the screen's
       corners now, and a radius there curves away from an edge rather than
       around one. The padding under it is the home indicator's strip, left to
       the swipe: it goes on the dialog rather than on the bar so the sheet's
       own gradient fills it, because a control that stops short of the glass
       reads as one that has come loose from it. */
    .cat-sheet {
        width: 100%;
        max-width: 100%;
        max-height: 88vh;
        margin: auto 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        border-width: 1px 0 0;
        border-radius: 16px 16px 0 0;
        --ov-close-radius: 0;
    }

    .cat-sheet-head { padding: 0.85rem 0.9rem; }
    .cat-sheet-body { padding: 0 0.9rem 1rem; }
    .cat-sheet-body .cat-cube-panel { padding: 0.75rem 0 0; }
}

/* Nothing here animates on its own; the transitions are all colour on a
   control under the pointer. Honour the setting regardless. */
@media (prefers-reduced-motion: reduce) {
    .cat-cube-name { transition: none; }
    .cat-sheet-close { transition: none; }
}

/* ── The stored series ────────────────────────────────────────────────────
   Percent change from the start of the window, never the index level. */
.cat-chart { margin: 0 0 1rem; }

.cat-chart svg { display: block; width: 100%; height: auto; }

.cat-chart-cap {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
    font-size: 0.72rem;
    color: var(--muted-2);
}

/* Recessive, like every other grid on the site: the line is the content and a
   grid that competes with it is a grid nobody asked to read. */
.cat-chart-grid { stroke: rgba(255, 255, 255, 0.055); stroke-width: 1; }

/* Zero is not one of the gridlines. A rise drawn without the line it rose from
   invites the reader to measure it against the bottom of the box. */
.cat-chart-zero { stroke: rgba(255, 255, 255, 0.18); stroke-width: 1; stroke-dasharray: 3 3; }

.cat-chart-axis { fill: rgba(255, 255, 255, 0.42); font-size: 9.5px; }

.cat-chart-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cat-chart-line.is-up { stroke: #34D399; }
.cat-chart-line.is-down { stroke: #F0857A; }

.cat-chart-end.is-up { fill: #34D399; }
.cat-chart-end.is-down { fill: #F0857A; }

@media (max-width: 760px) {
    .cat-chart-axis { font-size: 11px; }
}

/* ── How to read these ────────────────────────────────────────────────────
   The first fold. It was a card with Got it above the board; the numbered
   list is what it kept. */
.cat-intro-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }

.cat-intro-list li {
    display: grid;
    grid-template-columns: 1.35rem minmax(0, 1fr);
    gap: 0.65rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--muted);
}

.cat-intro-list b { color: var(--text); font-weight: 600; }

/* Numbered because these ARE a sequence: what a category is, then what its
   bar says, then how to see where it is heading. Each step needs the one
   before it. */
.cat-intro-list .n {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    background: rgba(91, 159, 237, 0.18);
    color: #A9CDF7;
    font-size: 0.7rem;
    font-weight: 700;
}

/* ── The paid half, from outside ──────────────────────────────────────────
   Sits exactly where the chart sits for a subscriber, so the gate occupies
   the shape of the thing it is offering. Drawn in the round 3 block below:
   the sky box with a blurred line that claims nothing (the real series is
   never sent) and one button. */
.cat-locked:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ── Category alerts ─────────────────────────────────────────
   The control is the card system's (.rc-opt / .rc-opt-menu / .rc-sw in
   round_card.css), borrowed whole rather than restyled: Bookmarks and Item
   Alerts already dress their settings that way.

   round_card.css loads AFTER this file, so anything that overrides it has to
   win on specificity rather than order -- a bare .cat-alerts-row ties with
   .rc-opt-row at 0-1-0 and loses. Every override below is scoped through its
   parent for that reason. STYLEGUIDE 7.7. */
.cat-alerts { display: flex; align-items: center; margin: 0 0 1rem; }

/* Icon, name and chevron in one target. .rc-opt-btn is sized for a bare 34px
   gear, so this widens it for the word without giving it a box back -- the
   hover tint it inherits is the whole affordance, same as every other bare
   control on the site. */
.cat-alerts .cat-alerts-btn {
    min-width: 0;
    margin: 0;
    padding: 0.4rem 0.55rem;
    gap: 0.45rem;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 600;
}

.cat-alerts .cat-alerts-bell { width: 15px; height: 15px; flex: none; }
.cat-alerts .cat-alerts-name { white-space: nowrap; }

/* The one part that says this opens rather than navigates. */
.cat-alerts .cat-fold-mark { display: inline-flex; transition: transform 0.15s ease; }
.cat-alerts .cat-fold-mark svg { width: 0.85rem; height: 0.85rem; display: block; }
.cat-alerts .cat-alerts-btn[aria-expanded="true"] .cat-fold-mark { transform: rotate(180deg); }

/* Anchored left: the button sits at the far left of the panel, and a menu
   anchored right would hang off the edge it is next to. */
.cat-alerts .cat-alerts-menu {
    right: auto;
    left: 0;
    min-width: 340px;
    padding: 0.3rem 0 0.4rem;
}

.cat-alerts-menu .cat-alerts-head {
    padding: 0 0.9rem;
    margin: 0.6rem 0 0.5rem;
}

/* One row per switch, generously spaced and ruled off from the next. The
   previous version stacked eight lines of text with 0.2rem between them and
   read as a paragraph with switches in it. */
.cat-alerts-menu .cat-alerts-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    padding: 0.7rem 0.9rem;
    border-top: 1px solid var(--line);
    /* A flex item will not shrink below its content by default, so without
       this the reason overflows the menu instead of ellipsing. */
    min-width: 0;
}

.cat-alerts-menu .cat-alerts-sw {
    padding: 0.32rem 0.7rem 0.32rem 0.4rem;
    text-align: left;
    /* Never wider than the menu, and the label wraps inside the pill rather
       than pushing it out of the box. */
    max-width: 100%;
    white-space: normal;
}

.cat-alerts-menu .cat-alerts-sw-label { line-height: 1.35; }

/* One line, always. Wrapped to two, four short reasons became eight lines of
   grey text and the menu read as prose with switches in it -- which is the
   density this row layout exists to avoid. The copy in ALERT_KINDS is written
   to fit; the ellipsis is a guarantee, not a plan. */
.cat-alerts-menu .cat-alerts-why {
    font-size: 0.73rem;
    line-height: 1.5;
    color: var(--muted-2);
    /* Indented to the switch's own text, so the reason reads as belonging to
       the control above it rather than to the row. */
    padding-left: 0.4rem;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cat-alerts-menu .cat-alerts-foot {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.7rem 0.9rem 0.2rem;
    border-top: 1px solid var(--line);
    font-size: 0.72rem;
    line-height: 1.45;
    color: var(--muted-2);
}

/* Reserved, so acknowledging a save does not grow the menu by a line and move
   the switch the reader was about to press next. */
.cat-alerts-menu .cat-alerts-status { min-height: 1.05rem; color: var(--muted); }

@media (max-width: 760px) {
    /* A 340px menu does not fit a phone once the panel padding is taken off,
       and the switches need a real touch target rather than a 15px knob. */
    .cat-alerts .cat-alerts-menu {
        min-width: 0;
        width: calc(100vw - 2.5rem);
        max-width: 380px;
    }

    .cat-alerts-menu .cat-alerts-row { padding: 0.8rem 0.85rem; gap: 0.35rem; }
    .cat-alerts-menu .cat-alerts-sw { padding: 0.45rem 0.8rem 0.45rem 0.45rem; font-size: 0.8rem; }
    /* Nudged down on a phone, where the menu is narrowest and these have the
       least room to stay on their line. */
    .cat-alerts-menu .cat-alerts-why { font-size: 0.72rem; }
    .cat-alerts .cat-alerts-btn { padding: 0.5rem 0.6rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ROUND 2: LED BY PICTURES (2026-09-28, approved 2026-09-29)
   ==========================================================================
   Ariel: "This page is too text cluttered and dense. we need to be lead by
   visuals. if they cant understand the page by not reading a sentence then
   we've failed." Every sentence that carried a reading is a picture now:
   the market's line and each index's verdict are the game's health bar, the
   leader and laggard are tags on the floor, the dialog's table is a floor of
   group cards, the screener is item tiles, and members' flips are drawn.
   ══════════════════════════════════════════════════════════════════════════ */

/* The paint, for anything that is not a cube: a group card, the dialog's
   head. Same three values as .cat-cube--*. */
.cat-paint--rising {
    --figure: #34D399;
    --pool: radial-gradient(closest-side, rgba(120, 232, 176, 0.34), rgba(70, 160, 120, 0.12) 55%, transparent);
}

.cat-paint--falling {
    --figure: #F0857A;
    --pool: radial-gradient(closest-side, rgba(226, 110, 94, 0.32), rgba(160, 70, 60, 0.12) 55%, transparent);
}

.cat-paint--flat {
    --figure: rgba(255, 255, 255, 0.75);
    --pool: radial-gradient(closest-side, rgba(120, 170, 235, 0.30), rgba(70, 110, 170, 0.12) 55%, transparent);
}

/* ── The health bar ───────────────────────────────────────────────────────
   The game's overhead bar: a flat rectangle with a dark rim, green for what
   is left and red for what is gone. Here green is the share of items that
   went up and red the share that went down, in the site's own two colours. */
.cat-hp {
    position: relative;
    display: block;
    flex: none;
    width: 64px;
    height: 7px;
    border-radius: 1px;
    background: #D8665A;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.75);
    overflow: hidden;
}

.cat-hp i {
    display: block;
    height: 100%;
    background: #34D399;
    box-shadow: 1px 0 0 rgba(0, 0, 0, 0.55);
}

.cat-hp--wide {
    flex: 1 1 auto;
    width: auto;
    min-width: 90px;
    height: 10px;
}

.cat-tri { width: 8px; height: 8px; flex: none; fill: currentColor; }

/* The bar's two ends, as figures. */
.cat-pn-end {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: none;
    font-size: 0.82rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cat-pn-end.is-up { color: #34D399; }
.cat-pn-end.is-down { color: #F0857A; }

/* ── The market's line, as a bar ──────────────────────────────────────── */
.cat-sky-meter {
    display: flex;
    align-items: center;
    gap: 9px;
    max-width: 460px;
    margin-top: 0.35rem;
}

.cat-sky-meter-cap {
    flex: none;
    font-size: 0.78rem;
    color: var(--muted-2);
}

/* ── On the floor: the bar and the tags ───────────────────────────────── */
.cat-cube-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 16px;
    margin-top: 5px;
}

.cat-spike {
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(240, 197, 94, 0.14);
    color: #F0C55E;
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.02em;
}

/* Best and Worst hang above the render, where the eye lands first. */
.cat-badge {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px 2px 6px;
    border-radius: 999px;
    transform: translateX(-50%);
    font-size: 0.64rem;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.cat-badge .cat-tri { width: 7px; height: 7px; }
.cat-badge--best { background: rgba(52, 211, 153, 0.16); color: #4ADE9F; }
.cat-badge--worst { background: rgba(240, 133, 122, 0.16); color: #F59489; }

@container cat-sky (max-width: 559px) {
    .cat-sky-meter { gap: 7px; }
    .cat-sky-meter-cap { display: none; }

    .cat-cube-foot {
        justify-content: flex-start;
        margin-top: 3px;
    }

    .cat-hp { width: 56px; height: 6px; }

    .cat-badge {
        top: -3px;
        left: -2px;
        padding: 1px 5px 1px 4px;
        transform: none;
        font-size: 0.56rem;
        letter-spacing: 0.04em;
    }

    .cat-badge .cat-tri { width: 6px; height: 6px; }
}

/* ── Members' flips ───────────────────────────────────────────────────── */
.cat-rz { margin: 0; container: cat-rz / inline-size; }

.cat-rz-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-bottom: 14px;
}

.cat-rz-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: #fff;
}

.cat-rz-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.cat-rz-chip {
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.45;
    white-space: nowrap;
}

/* Option A: the sweet-spot chart, on one soft field. */
.cat-rzp {
    position: relative;
    height: 372px;
    margin: 0;
    padding: 40px 30px 62px 64px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.02);
}

.cat-rzp-plot { position: relative; height: 100%; }

.cat-rzp-sweet {
    position: absolute;
    left: -64px;
    top: -40px;
    width: 58%;
    height: 72%;
    border-top-left-radius: 22px;
    background: radial-gradient(ellipse at 0% 0%, rgba(52, 211, 153, 0.20), rgba(52, 211, 153, 0.05) 55%, transparent 75%);
    pointer-events: none;
}

.cat-rzp-sweet span {
    position: absolute;
    top: 12px;
    left: 16px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(74, 222, 159, 0.9);
}

.cat-rzp-loss {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(0deg, rgba(240, 133, 122, 0.12), rgba(240, 133, 122, 0.04));
    pointer-events: none;
}

.cat-rzp-gy {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.cat-rzp-gy.is-zero { border-top: 1px dashed rgba(255, 255, 255, 0.25); }

.cat-rzp-gy em,
.cat-rzp-gx em {
    position: absolute;
    font-size: 0.7rem;
    font-style: normal;
    color: var(--muted-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cat-rzp-gy em { right: 100%; margin-right: 10px; transform: translateY(-50%); }

.cat-rzp-gx {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.035);
}

.cat-rzp-gx em { top: 100%; margin-top: 12px; transform: translateX(-50%); }

.cat-rzp-pt {
    position: absolute;
    z-index: 1;
    width: 52px;
    height: 52px;
    transform: translate(-50%, 50%);
    color: inherit;
    text-decoration: none;
}

.cat-rzp-art {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.cat-rzp-art::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 56px;
    height: 14px;
    border-radius: 50%;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(120, 232, 176, 0.32), transparent);
}

.is-loss .cat-rzp-art::before { background: radial-gradient(closest-side, rgba(226, 110, 94, 0.34), transparent); }

.cat-rzp-art img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.6));
}

.cat-rzp-name {
    position: absolute;
    top: 100%;
    left: 50%;
    margin-top: 1px;
    transform: translateX(-50%);
    font-size: 0.74rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    transition: color 0.15s ease;
}

.is-up-label .cat-rzp-name { top: auto; bottom: 100%; margin: 0 0 1px; }
/* Only under a real pointer: a tap on a phone leaves :hover stuck on the
   name, which then stayed blue after its category had opened and closed. */
@media (hover: hover) {
    .cat-rzp-pt:hover .cat-rzp-name { color: #5B9FED; }
}

.cat-rzp-axes {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.cat-rzp-ax-y,
.cat-rzp-ax-x {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
}

.cat-rzp-ax-y { top: 14px; right: 20px; }
.cat-rzp-ax-x { bottom: 12px; right: 20px; }

@container cat-rz (max-width: 560px) {
    .cat-rzp { height: 340px; padding: 40px 14px 58px 44px; }
    .is-side-label .cat-rzp-name {
        top: 50%;
        left: 100%;
        margin: 0 0 0 1px;
        transform: translateY(-50%);
    }
    .cat-rzp-sweet { left: -44px; width: 64%; }
    .cat-rzp-pt { width: 40px; height: 40px; }
    .cat-rzp-art::before { width: 44px; height: 11px; }
    .cat-rzp-name { font-size: 0.64rem; }
    .cat-rzp-gy em { margin-right: 7px; font-size: 0.64rem; }
    .cat-rzp-gx em { font-size: 0.64rem; }
    .cat-rzp-ax-y { right: 12px; font-size: 0.66rem; }
    .cat-rzp-ax-x { right: 12px; font-size: 0.66rem; }
}

@media (prefers-reduced-motion: reduce) {
    .cat-rzp-name { transition: none; }
}

/* ── The opened category, round 3: read like the item page ─────────────────
   Round 2 drew the answers but set them all at one weight on a flat card,
   and Ariel had no idea where to start. The approved item page already
   answers that: a lit stage with the name, the figure and the actions, then
   a soft panel of answers, then the chart in a sky box, then ranked lists.
   The dialog now reads in that order, from the whole category to its parts. */

/* The stage is the dialog's head, so the old head keeps only its close
   button, floating over the stage's corner. The title stays in the document
   for aria-labelledby. */
.cat-sheet-head {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 5;
    padding: 0;
}

.cat-sheet-title,
.cat-sheet-move {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.cat-sheet-close {
    min-width: 36px;
    min-height: 36px;
    background: rgba(5, 8, 20, 0.55);
    color: var(--muted);
}

.cat-sheet-body { padding: 14px; }
.cat-sheet-body .cat-cube-panel { padding: 0; gap: 14px; }

.cat-cube-panel { container: cat-pn / inline-size; }

/* ── 1 · The stage ────────────────────────────────────────────────────── */
.cat-st {
    container: cat-st / inline-size;
    position: relative;
    z-index: 3;
    isolation: isolate;
    min-height: 280px;
    border-radius: var(--surface-radius);
    border: 1px solid var(--surface-border);
    background: linear-gradient(180deg, #03050C 0%, #060C1B 50%, #0C1A30 100%);
    box-shadow: var(--elev-1);
}

.cat-st-deco {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

.cat-st-dots {
    position: absolute;
    inset: 0;
}

.cat-st-dots i {
    position: absolute;
    width: 1px;
    height: 1px;
    border-radius: 50%;
    background: #fff;
    opacity: 0.45;
}

.cat-st-dots i.is-big {
    width: 2px;
    height: 2px;
    opacity: 0.8;
}

.cat-st-floor {
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: -90px;
    height: 190px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(120, 170, 235, 0.12), transparent);
    pointer-events: none;
}

/* The category's item on its ground, lit in its own colours (§12): its
   picture blurred behind it, masked so the light ends inside the stage, a
   pool of light and a contact shadow. */
.cat-st-lit {
    position: absolute;
    right: 72px;
    bottom: 14px;
    width: 250px;
    height: 240px;
    pointer-events: none;
}

.cat-st-halo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 200px;
    height: 200px;
    transform: translate(-50%, -50%);
    object-fit: contain;
    filter: blur(30px) saturate(1.5);
    opacity: 0.4;
    -webkit-mask-image: radial-gradient(circle 112px, #000 45%, transparent);
    mask-image: radial-gradient(circle 112px, #000 45%, transparent);
    box-sizing: content-box;
    padding: 90px;
}

.cat-st-pool {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 250px;
    height: 54px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(170, 195, 235, 0.20), rgba(170, 195, 235, 0.06) 60%, transparent);
}

.cat-st-cast {
    position: absolute;
    left: 50%;
    bottom: 16px;
    width: 140px;
    height: 18px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(0, 0, 0, 0.62), transparent);
}

.cat-st-render {
    position: absolute;
    left: 50%;
    bottom: 22px;
    width: 140px;
    height: 140px;
    transform: translateX(-50%);
    object-fit: contain;
    filter: drop-shadow(0 14px 14px rgba(0, 0, 0, 0.55));
}

.cat-st-copy {
    position: relative;
    z-index: 2;
    max-width: 620px;
    padding: 26px 32px 28px;
}

.cat-st-micro {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted-2);
}

.cat-st-micro svg { width: 14px; height: 14px; flex: none; }

/* The name and the figure in the display face, as on the item page. */
.cat-st-name {
    margin: 18px 0 0;
    font-family: 'RuneScape UF', Inter, sans-serif;
    font-size: 42px;
    font-weight: 400;
    line-height: 1;
    color: #F4EEDD;
    white-space: nowrap;
}

.cat-st-fig {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 10px;
}

.cat-st-move {
    font-family: 'RuneScape UF', Inter, sans-serif;
    font-size: 46px;
    font-weight: 400;
    line-height: 0.95;
    white-space: nowrap;
}

.cat-st-move.is-up { color: #34D399; }
.cat-st-move.is-down { color: #F0857A; }
.cat-st-move.is-flat { color: rgba(244, 238, 221, 0.75); }

.cat-st-unit {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted-2);
}

.cat-st-meter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    max-width: 540px;
    margin-top: 16px;
}

.cat-st-meter .cat-pn-meter {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1 1 260px;
    min-width: 0;
}

.cat-chip {
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.45;
    white-space: nowrap;
}

.cat-chip--rise { background: rgba(52, 211, 153, 0.14); color: #4ADE9F; }
.cat-chip--fall { background: rgba(240, 133, 122, 0.14); color: #F59489; }
.cat-chip--warn { background: rgba(240, 197, 94, 0.14); color: #F0C55E; }
.cat-chip--rank { background: rgba(91, 159, 237, 0.14); color: #8FBEF5; }

.cat-st-go {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

/* The item page's two controls (.ip-btn): outlined, and filled blue only
   where it goes somewhere. */
.cat-st-btn,
.cat-alerts .cat-alerts-btn.cat-st-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 42px;
    min-width: 0;
    margin: 0;
    padding: 0 16px;
    box-sizing: border-box;
    border-radius: 12px;
    border: 1px solid var(--control-border);
    background: var(--control-bg);
    color: var(--text);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.cat-st-btn:hover,
.cat-alerts .cat-alerts-btn.cat-st-btn:hover { border-color: #5B9FED; color: #5B9FED; }
.cat-st-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.cat-st-btn svg { width: 14px; height: 14px; flex: none; }

.cat-st-btn.is-fill {
    border-color: #5B9FED;
    background: #5B9FED;
    color: #04101F;
    font-weight: 700;
}

.cat-st-btn.is-fill:hover { border-color: #4a8fe0; background: #4a8fe0; color: #04101F; }

.cat-st-go .cat-alerts { margin: 0; }

/* ── 2 · The answers: the item page's panel ───────────────────────────── */
.cat-ans {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.1rem 1.25rem;
    padding: 20px 26px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.015) 100%);
}

.cat-ans-cell {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
}

.cat-ans-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.1;
    color: var(--muted-2);
    white-space: nowrap;
}

.cat-ans-value {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-size: 1.18rem;
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cat-ans-value small { font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.cat-ans-value.is-up { color: #34D399; }

.cat-ans-sub {
    font-size: 0.78rem;
    line-height: 1.2;
    color: var(--muted-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cat-ans-cell.is-locked { cursor: pointer; }
.cat-ans-cell.is-locked .cat-ans-value { align-items: center; color: #8FBEF5; font-size: 1rem; }
.cat-ans-cell.is-locked .cat-ans-value svg { width: 15px; height: 15px; }
.cat-ans-cell.is-locked:hover .cat-ans-value { color: #BBD8FA; }
.cat-ans-cell.is-locked:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 8px; }

/* ── 3 · The last 30 days, in a sky box ───────────────────────────────── */
.cat-skybox {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    margin: 0;
    padding: 18px 22px 16px;
    border-radius: var(--surface-radius);
    border: 1px solid var(--surface-border);
    background: linear-gradient(180deg, #03050C 0%, #060C1B 50%, #0C1A30 100%);
    box-shadow: var(--elev-1);
}

.cat-skybox .cat-chart-cap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin: 0 0 8px;
}

.cat-box-micro {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted-2);
}

.cat-box-micro svg { width: 14px; height: 14px; }
.cat-skybox .cat-chart-cap .cat-move { font-size: 1rem; }

/* The line carries a soft light of its own, so it reads as lit rather than
   drawn. A wider, blurred copy under it. */
.cat-chart-glow { fill: none; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; opacity: 0.22; filter: blur(4px); }
.cat-chart-glow.is-up { stroke: #34D399; }
.cat-chart-glow.is-down { stroke: #F0857A; }
.cat-chart-halo { opacity: 0.25; }
.cat-chart-halo.is-up { fill: #34D399; }
.cat-chart-halo.is-down { fill: #F0857A; }

.cat-cube-panel .cat-locked.cat-skybox {
    display: grid;
    place-items: center;
    height: 190px;
    padding: 18px 22px;
    border: 1px solid var(--surface-border);
    border-radius: var(--surface-radius);
    background: linear-gradient(180deg, #03050C 0%, #060C1B 50%, #0C1A30 100%);
    text-align: center;
    cursor: pointer;
}

.cat-locked.cat-skybox .cat-box-micro {
    position: absolute;
    top: 18px;
    left: 22px;
    z-index: 1;
}

.cat-locked-ghost {
    position: absolute;
    inset: 44px 0 0;
    width: 100%;
    height: calc(100% - 44px);
    filter: blur(3px);
    opacity: 0.55;
}

.cat-locked-ghost .a { fill: rgba(52, 211, 153, 0.12); }
.cat-locked-ghost .l { fill: none; stroke: #34D399; stroke-width: 3; }

.cat-locked-pill {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 18px;
    border-radius: 12px;
    background: #5B9FED;
    color: #04101F;
    font-size: 0.875rem;
    font-weight: 700;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
}

.cat-locked-pill svg { width: 15px; height: 15px; }
.cat-cube-panel .cat-locked:hover .cat-locked-pill { background: #4a8fe0; }

/* ── 4 and 5 · Ranked sections ────────────────────────────────────────── */
.cat-sec { margin-top: 8px; }

.cat-sec-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-bottom: 10px;
}

.cat-sec-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #fff;
}

.cat-sec-sub { font-size: 0.8rem; color: var(--muted-2); }

/* An item's picture on a soft light, High Alch's .ha-thumb. */
.cat-thumb {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: radial-gradient(circle at 50% 60%, rgba(170, 195, 235, 0.16), rgba(170, 195, 235, 0.03) 70%);
}

.cat-thumb img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.55));
}

.cat-thumb img[data-src] { visibility: hidden; }

/* The groups, one ranked row each: picture, name, how many of its items
   went up, and its move. The first row is the biggest move. */
.cat-gr {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cat-gr-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 16px;
    padding: 6px 14px 6px 6px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
    transition: background 0.15s ease;
}

.cat-gr-row:hover { background: rgba(255, 255, 255, 0.05); }
.cat-gr-row:first-child { background: linear-gradient(90deg, rgba(91, 159, 237, 0.10), rgba(255, 255, 255, 0.025) 60%); }

.cat-gr-face {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 88px 72px;
    align-items: center;
    gap: 14px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.cat-gr-face:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 12px; }

.cat-gr-name {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
    font-size: 0.92rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: color 0.15s ease;
}

.cat-gr-face:hover .cat-gr-name { color: #5B9FED; }

.cat-gr-hp .cat-hp { width: 88px; }

.cat-gr-move {
    font-size: 1.05rem;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cat-gr-move.is-up { color: #34D399; }
.cat-gr-move.is-down { color: #F0857A; }
.cat-gr-move.is-flat { color: var(--muted-2); }

/* What is in the group, quietly, at the row's end. Every item stays a link
   in the document; a narrow row shows as many as fit. */
.cat-gr-row .cat-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 2px;
    width: 200px;
    height: 24px;
    overflow: hidden;
    opacity: 0.8;
}

.cat-gr-row .cat-strip-item img { width: 20px; height: 20px; }

/* Items to watch: two ranked lists, as the item page's recent trades. */
.cat-mvs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 24px;
}

.cat-mvs-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted-2);
}

.cat-mvs-head::before {
    content: "";
    width: 14px;
    height: 2px;
    border-radius: 2px;
}

.cat-mvs-head.is-up::before { background: #34D399; }
.cat-mvs-head.is-down::before { background: #F0857A; }

.cat-mvs-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cat-mv { min-width: 0; }

.cat-mv a {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 4px 12px 4px 4px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
    color: inherit;
    text-decoration: none;
    transition: background 0.15s ease;
}

.cat-mv a:hover { background: rgba(255, 255, 255, 0.05); }
.cat-mv a:hover .cat-mv-name { color: #5B9FED; }
.cat-mv a:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.cat-mv-name {
    min-width: 0;
    overflow: hidden;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: color 0.15s ease;
}

.cat-mv-move {
    font-size: 0.92rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cat-mv-move.is-up { color: #34D399; }
.cat-mv-move.is-down { color: #F0857A; }

/* ── Narrower dialogs ─────────────────────────────────────────────────── */
@container cat-pn (max-width: 900px) {
    .cat-ans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cat-gr-row .cat-strip { display: none; }
    .cat-gr-row { grid-template-columns: minmax(0, 1fr); }
}

@container cat-pn (max-width: 640px) {
    .cat-mvs { grid-template-columns: minmax(0, 1fr); }
}

/* A phone: the words take the stage's width and the item stands at its
   top right, beside the name, so the stage stays one screen's top. */
/* The stage is the query container, so its own height is set from the
   panel's width, one level up. */
@container cat-pn (max-width: 560px) {
    .cat-st { min-height: 0; }
}

@container cat-st (max-width: 560px) {
    .cat-st-copy { padding: 18px 18px 20px; }
    .cat-st-dots i:nth-child(n+4) { display: none; }

    .cat-st-lit {
        top: 26px;
        right: 8px;
        bottom: auto;
        width: 124px;
        height: 110px;
    }

    .cat-st-halo { width: 110px; height: 110px; padding: 60px; -webkit-mask-image: radial-gradient(circle 64px, #000 45%, transparent); mask-image: radial-gradient(circle 64px, #000 45%, transparent); }
    .cat-st-pool { width: 120px; height: 26px; }
    .cat-st-cast { bottom: 8px; width: 70px; height: 10px; }
    .cat-st-render { bottom: 12px; width: 76px; height: 76px; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.55)); }

    /* The name must stay on one line beside the picture: the display face
       runs 5.69px wide per px of size on "Skilling supplies", the longest,
       and the picture takes 156px of the stage's width. */
    .cat-st-name { margin-top: 14px; font-size: min(30px, calc((100cqi - 156px) / 5.8)); }
    .cat-st-move { font-size: 36px; }
    .cat-st-meter { margin-top: 14px; }
    .cat-st-meter .cat-pn-meter { flex-basis: 100%; }
    .cat-st-go { margin-top: 16px; }
    .cat-st-go > * { flex: 1 1 0; }
    .cat-st-go .cat-alerts .cat-alerts-btn.cat-st-btn { width: 100%; }
}

@container cat-pn (max-width: 520px) {
    .cat-ans { padding: 16px; gap: 14px; }
    .cat-ans-value { font-size: 1.05rem; }

    .cat-gr-row { padding: 4px 10px 4px 4px; }
    .cat-gr-face { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; }
    .cat-gr-hp { grid-column: 2; grid-row: 2; margin-top: -2px; }
    .cat-gr-name { grid-column: 2; grid-row: 1; font-size: 0.86rem; }
    .cat-gr-move { grid-column: 3; grid-row: 1 / span 2; font-size: 0.98rem; }
    .cat-gr-face .cat-thumb { grid-row: 1 / span 2; }
    .cat-gr-hp .cat-hp { width: 72px; height: 6px; }
    .cat-sec-title { font-size: 1.03rem; }
}

@media (max-width: 640px) {
    .cat-sheet-head { top: 12px; right: 12px; }
    .cat-sheet-body { padding: 10px 10px 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .cat-st-btn,
    .cat-gr-row,
    .cat-gr-name,
    .cat-mv a,
    .cat-mv-name { transition: none; }
}

/* ── The market's title stays on one line ─────────────────────────────────
   Ariel (2026-09-28): "I dont want this text to wrap." The line shrinks with
   its box instead, as the Recipes title does on a phone: --fit (set in the
   template) is its length in characters, and Inter 700 at this tracking is
   ~0.51px wide a character per px of size, so 0.52 leaves a hair spare. The
   box's padding is 32px a side, 18px on a phone. */
.cat-sky-title {
    white-space: nowrap;
    font-size: min(2.25rem, calc((100cqi - 64px) / (var(--fit, 30) * 0.52)));
}

@container cat-sky (max-width: 559px) {
    .cat-sky-title { font-size: min(1.625rem, calc((100cqi - 36px) / (var(--fit, 30) * 0.52))); }
}

/* ══════════════════════════════════════════════════════════════════════════
   ROUND 4: WHICH WAY IT IS HEADING (2026-09-29)
   ==========================================================================
   Ariel: the goal is "to inform and to drive decisions that will result in
   profit ... market direction or index direction". Today's move alone hid
   the month: F2P read "+1.25% today" while it was 28% down over 30 days.
   The market box gets Today / 7 days / 30 days, and an opened category
   leads its answers with the week, the month, the market and the gold.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── The period switch ────────────────────────────────────────────────── */
.cat-periods {
    display: inline-flex;
    gap: 2px;
    margin-left: auto;
    padding: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
}

.cat-period {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--muted);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.cat-period:hover { color: var(--text); }
.cat-period.is-on { background: #5B9FED; color: #04101F; font-weight: 700; }
.cat-period:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.cat-period svg { width: 12px; height: 12px; }
.cat-period.is-locked { color: var(--muted-2); }

/* One period shown at a time. With no period set (no script) it is today. */
.cat-sky:not([data-period="w"]) .p-w,
.cat-sky:not([data-period="m"]) .p-m,
.cat-sky[data-period="w"] .p-d,
.cat-sky[data-period="m"] .p-d { display: none !important; }

/* A category's paint follows the period: its pool and figure colour are the
   week's or the month's direction, not today's. */
.cat-sky[data-period="w"] .cat-cube[data-pw="rising"],
.cat-sky[data-period="m"] .cat-cube[data-pm="rising"] {
    --figure: #34D399;
    --pool: radial-gradient(closest-side, rgba(120, 232, 176, 0.34), rgba(70, 160, 120, 0.12) 55%, transparent);
}

.cat-sky[data-period="w"] .cat-cube[data-pw="falling"],
.cat-sky[data-period="m"] .cat-cube[data-pm="falling"] {
    --figure: #F0857A;
    --pool: radial-gradient(closest-side, rgba(226, 110, 94, 0.32), rgba(160, 70, 60, 0.12) 55%, transparent);
}

.cat-sky[data-period="w"] .cat-cube[data-pw="flat"],
.cat-sky[data-period="m"] .cat-cube[data-pm="flat"] {
    --figure: rgba(255, 255, 255, 0.75);
    --pool: radial-gradient(closest-side, rgba(120, 170, 235, 0.30), rgba(70, 110, 170, 0.12) 55%, transparent);
}

.cat-cube-alt {
    margin-top: 1px;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.45;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--figure);
}

@container cat-sky (max-width: 559px) {
    .cat-cube-alt { margin-top: 0; font-size: 1rem; }
    .cat-periods { margin-left: 0; }
    .cat-period { height: 28px; padding: 0 10px; font-size: 0.75rem; }
}

/* ── A line with no axes ──────────────────────────────────────────────── */
.cat-spark {
    position: relative;
    display: block;
    width: 64px;
    height: 18px;
}

.cat-spark svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.cat-spark polyline {
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.cat-spark.is-up polyline { stroke: #34D399; }
.cat-spark.is-down polyline { stroke: #F0857A; }

.cat-spark i {
    position: absolute;
    width: 5px;
    height: 5px;
    margin: -2.5px 0 0 -2.5px;
    border-radius: 50%;
}

.cat-spark.is-up i { background: #34D399; box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.22); }
.cat-spark.is-down i { background: #F0857A; box-shadow: 0 0 0 3px rgba(240, 133, 122, 0.22); }

.cat-spark--wide { flex: 1 1 auto; width: auto; min-width: 120px; height: 30px; }
.cat-spark--wide polyline { stroke-width: 2.2; }
.cat-spark--row { width: 72px; height: 22px; }

.cat-sky-meter--line { max-width: 460px; }

/* ── The dialog's answers: figures coloured by direction ──────────────── */
.cat-ans-fig { font-variant-numeric: tabular-nums; }
.cat-ans-fig.is-up { color: #34D399; }
.cat-ans-fig.is-down { color: #F0857A; }
.cat-ans-fig.is-flat { color: rgba(255, 255, 255, 0.75); }

/* ── The chart: the market behind, the updates on their days ──────────── */
.cat-skybox .cat-chart-cap { flex-wrap: wrap; gap: 8px 18px; }

.cat-chart-key {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    margin-left: auto;
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.cat-chart-key > span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.cat-chart-key i { display: block; width: 16px; height: 0; border-top: 2px solid; }
.cat-chart-key-cat.is-up { color: #34D399; }
.cat-chart-key-cat.is-down { color: #F0857A; }
.cat-chart-key-mkt { color: var(--muted); }
.cat-chart-key-mkt i { border-top: 2px dashed rgba(203, 213, 225, 0.55); }
.cat-chart-key-upd { color: var(--muted-2); }
.cat-chart-key-upd i { width: 8px; height: 8px; border: 0; transform: rotate(45deg); background: #F0C55E; }

.cat-chart-mkt {
    fill: none;
    stroke: rgba(203, 213, 225, 0.5);
    stroke-width: 1.6;
    stroke-dasharray: 5 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cat-chart-mkt-end { fill: rgba(203, 213, 225, 0.75); }

.cat-chart-upd line { stroke: rgba(240, 197, 94, 0.35); stroke-width: 1; stroke-dasharray: 2 3; }
.cat-chart-upd path { fill: #F0C55E; }

.cat-chart-upds {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 8px 0 0;
    padding: 0;
    font-size: 0.76rem;
    color: var(--muted);
}

.cat-chart-upds li { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.cat-chart-upds i { width: 7px; height: 7px; flex: none; transform: rotate(45deg); background: #F0C55E; }
.cat-chart-upds b { font-weight: 700; color: var(--text); }

.cat-locked-ghost .m { fill: none; stroke: rgba(203, 213, 225, 0.5); stroke-width: 2.5; stroke-dasharray: 10 8; }

/* ── The groups: today, and the month beside it ───────────────────────── */
.cat-gr.has-month .cat-gr-face { grid-template-columns: 44px minmax(0, 1fr) 88px 78px 150px; }

.cat-gr-today,
.cat-gr-month {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

.cat-gr-month {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 2px 8px;
}

.cat-gr-month .cat-gr-when { flex-basis: 100%; text-align: right; }

.cat-gr-when {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted-2);
}

.cat-gr-mfig {
    font-size: 0.86rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cat-gr-mfig.is-up { color: #34D399; }
.cat-gr-mfig.is-down { color: #F0857A; }
.cat-gr-mfig.is-flat { color: var(--muted-2); }

/* ── Flipping here, locked ────────────────────────────────────────────── */
.cat-flip-locked {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    width: 100%;
    margin: 0;
    padding: 16px 20px;
    border: 0;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.015) 100%);
    color: var(--muted);
    font: inherit;
    font-size: 0.86rem;
    text-align: left;
    cursor: pointer;
}

.cat-flip-locked svg { width: 15px; height: 15px; color: #8FBEF5; }
.cat-flip-locked b { color: #8FBEF5; font-weight: 700; }
.cat-flip-locked:hover b { color: #BBD8FA; }
.cat-flip-locked:focus-visible { outline: none; box-shadow: var(--focus-ring); }

@container cat-pn (max-width: 900px) {
    .cat-gr.has-month .cat-gr-face { grid-template-columns: 44px minmax(0, 1fr) 72px 110px; }
    .cat-gr.has-month .cat-gr-hp { display: none; }
    .cat-spark--row { width: 56px; }
}

@container cat-pn (max-width: 520px) {
    .cat-gr.has-month .cat-gr-face { grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 10px; }
    .cat-gr.has-month .cat-gr-hp { display: block; }
    .cat-gr-today { grid-column: 3; grid-row: 1 / span 2; }
    .cat-gr-month { grid-column: 4; grid-row: 1 / span 2; flex-direction: column; align-items: flex-end; gap: 1px; }
    .cat-gr-month .cat-gr-when { flex-basis: auto; }
    .cat-gr-month .cat-spark { display: none; }
    .cat-gr-move { font-size: 0.92rem; }
    .cat-chart-key { margin-left: 0; gap: 4px 12px; font-size: 0.72rem; }
    .cat-chart-upds { font-size: 0.72rem; }
}

@media (prefers-reduced-motion: reduce) {
    .cat-period { transition: none; }
}

/* A phone draws the 720-unit chart at ~350px, so its labels need more
   units to stay readable: 14 units is ~7px there. */
@container cat-pn (max-width: 520px) {
    .cat-skybox .cat-chart-axis { font-size: 14px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE SITE'S NAME, FOR SCREENSHOTS (2026-10-01)
   ==========================================================================
   Ariel posts crops of this page to Reddit, and nobody could tell which site
   they came from. A page cannot tell when a screenshot is taken, and Ariel did
   not want every visitor to see the name, so the template draws it only for
   the accounts in SCREENSHOT_MARK_EMAILS: the market box's top-right corner
   (idea A on the "Screenshot logo ideas" canvas) and an opened category's top
   line, left of the close button (window spot 1). Everyone else's page is
   unchanged: every rule here hangs off the name's own markup.
   ══════════════════════════════════════════════════════════════════════════ */
.cat-sig {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}

.cat-sig img { width: 15px; height: 15px; flex: none; opacity: 0.72; }

/* In the market box it ends the top line, and the period switch, which used
   to take the free space itself, follows it. */
.cat-sig + .cat-periods { margin-left: 0; }

@container cat-sky (min-width: 560px) {
    .cat-sky-head > .cat-sig { margin-right: 5px; }
}

/* Beside "The market" and its age, a 360px phone has room for the words but
   not the picture, and a 320px phone only for the picture. */
@container cat-sky (max-width: 331px) {
    .cat-sky-head > .cat-sig > img { display: none; }
}

@container cat-sky (max-width: 305px) {
    .cat-sky-head > .cat-sig > img { display: block; }
    .cat-sky-head > .cat-sig > span { display: none; }
}

/* In an opened category it sits on the top line, clear of the close button
   that floats over the stage's corner (36px square: flush on a desktop, 2px
   in on a phone). */
.cat-st-sig {
    position: absolute;
    z-index: 2;
    top: 26px;
    right: 46px;
    height: 14px;
}

/* A phone's top line has no room for all of it, so the name takes "Market"
   off "Market category" (1,504 items is the longest count), then drops its
   picture, then the count. Only where the name is drawn: it sits just before
   .cat-st-copy. */
@container cat-st (max-width: 560px) {
    .cat-st-sig { top: 18px; right: 43px; }
}

@container cat-st (max-width: 419px) { .cat-st-sig ~ .cat-st-copy .cat-st-mkt { display: none; } }
@container cat-st (max-width: 359px) { .cat-st-sig img { display: none; } }
@container cat-st (max-width: 339px) { .cat-st-sig ~ .cat-st-copy .cat-st-count { display: none; } }