/* ==========================================================================
   Ponyfolio
   Everything here is written against MudBlazor's palette variables
   (--mud-palette-*) so light and dark both work from one set of rules.
   ========================================================================== */

:root {
    --pf-radius: 16px;
    --pf-radius-lg: 22px;
    --pf-shadow: 0 1px 2px rgba(36, 29, 61, .06), 0 8px 24px -12px rgba(36, 29, 61, .18);
    --pf-shadow-hover: 0 2px 6px rgba(36, 29, 61, .08), 0 18px 40px -18px rgba(36, 29, 61, .28);
    --pf-gap: 20px;
    --pf-maxline: 62ch;

    /* Sticker colours: flat fills for small labels that should feel friendly, never for
       large areas or gradients. Dark text sits on both. */
    --pf-sun: #FFD25E;
    --pf-mint: #B9EED3;
}

html, body {
    background: var(--mud-palette-background);
    -webkit-font-smoothing: antialiased;
}

.pf-muted { color: var(--mud-palette-text-secondary) !important; }

/* Pixel art must never be smoothed when scaled up. */
.pf-pony {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    display: block;
    width: 100%;
    height: 100%;
}

/* --------------------------------------------------------------------------
   Layout scaffolding
   -------------------------------------------------------------------------- */

/* MudMainContent's own top padding is what clears the fixed app bar. Don't zero it —
   doing that is what made page content slide underneath the navbar. */
/* +1px for the app bar's bottom border, which adds to its rendered height. */
/* Tall enough to reach the bottom of the window even when the page inside it is short.
   Without this the footer sat wherever the content happened to end, so opening a design
   or a creator pulled it up into the middle of the screen while the skeleton was on
   show, then dropped it again when the real content arrived. The jump was the tell: the
   footer was never anchored, it was just usually pushed down by enough content.

   dvh rather than vh so a phone's collapsing address bar does not leave a strip of gap
   under the footer; vh first as the fallback for anything that does not know dvh. */
.pf-main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: calc(var(--mud-appbar-height, 68px) + 1px);
}

.pf-section { padding-block: 56px; }
.pf-section:first-child { padding-top: 40px; }

.pf-appbar {
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--mud-palette-divider);
    gap: 8px;
}

.pf-only-mobile { display: none !important; }
.pf-only-desktop { display: flex !important; }

/* Brand -------------------------------------------------------------------- */

.pf-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
}

.pf-brand-mark {
    /* Square, so a square glyph gets the same breathing room on every side. */
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    padding: 3px;
    background: var(--mud-palette-primary);
    box-shadow: 0 4px 12px -4px var(--mud-palette-primary);
}

.pf-brand-word {
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: -.02em;
    /* Solid, not gradient text. The wordmark is chrome on every page, and a gradient
       clipped to letters is decoration that also blurs at small sizes. */
    color: var(--mud-palette-primary);
}

/* Top nav ------------------------------------------------------------------ */

.pf-topnav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 22px;
}

/* Note: colour properties are deliberately not transitioned anywhere in this file.
   They resolve from --mud-palette-* variables, and a transition on a palette-derived
   colour gets wedged at its old value when the theme is switched at runtime.
   Transform, shadow and opacity are safe and carry all the hover affordance. */
.pf-topnav-link {
    padding: 8px 14px;
    border-radius: 999px;
    font-weight: 600;
    font-size: .93rem;
    text-decoration: none;
    color: var(--mud-palette-text-secondary);
}

.pf-topnav-link:hover {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}

.pf-topnav-link.is-active {
    color: var(--mud-palette-primary);
    background: var(--mud-palette-primary-hover);
}

.pf-search { max-width: 380px; width: 100%; }
.pf-search.is-hidden { visibility: hidden; }
.pf-search .mud-input-outlined .mud-input-outlined-border { border-radius: 999px; }
.pf-search .mud-input-root { border-radius: 999px; }

.pf-upload-btn { margin-inline: 4px; }

.pf-avatar-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    padding: 4px;
    cursor: pointer;
    border-width: 2px; border-style: solid; border-color: var(--mud-palette-divider);
    transition: transform .15s ease;
}

.pf-avatar-btn:hover {
    transform: translateY(-1px);
    border-color: var(--mud-palette-primary);
}

/* User menu — hand-rolled dropdown, plain Blazor click handling. */

.pf-usermenu { position: relative; display: inline-flex; }

.pf-usermenu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1400;
}

.pf-usermenu-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 1401;
    min-width: 268px;
    padding: 6px;
    box-shadow: var(--pf-shadow-hover);
    animation: pf-menu-in .12s ease-out;
}

@keyframes pf-menu-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .pf-usermenu-panel { animation: none; }
}

.pf-usermenu-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
}

.pf-usermenu-head:hover { background: var(--mud-palette-action-default-hover); }

.pf-usermenu-avatar {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    padding: 5px;
    flex-shrink: 0;
}

.pf-usermenu-id { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pf-usermenu-id strong { font-size: .92rem; }
.pf-usermenu-id span { font-size: .78rem; }

.pf-usermenu-sep {
    height: 1px;
    margin: 6px 4px;
    background: var(--mud-palette-divider);
}

.pf-usermenu-panel > .pf-usermenu-sep:last-child { display: none; }

.pf-usermenu-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: .89rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--mud-palette-text-primary);
}

.pf-usermenu-item:hover { background: var(--mud-palette-action-default-hover); }
.pf-usermenu-item .mud-icon-root { color: var(--mud-palette-text-secondary); }

/* Inbox bell — same hand-rolled dropdown pattern as the account menu beside it. */

.pf-inbox { position: relative; display: inline-flex; }

.pf-inbox-btn {
    position: relative;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.pf-inbox-btn:hover { background: var(--mud-palette-action-default-hover); }

/*
   The count sits on the bell rather than beside it, and it is allowed to overflow the
   button: pushing the app bar wider by a few pixels the moment something arrives would
   shift every control to its left.
*/
.pf-inbox-count {
    position: absolute;
    top: 1px;
    right: 0;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--mud-palette-error);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

.pf-inbox-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1400;
}

.pf-inbox-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 1401;
    width: 360px;
    max-width: calc(100vw - 24px);
    padding: 0;
    overflow: hidden;
    box-shadow: var(--pf-shadow-hover);
    animation: pf-menu-in .12s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .pf-inbox-panel { animation: none; }
}

/* On a phone the bell is not at the edge of the bar - the avatar sits to its right - so a
   panel hung from the bell's right edge ran off the left of the screen. Pinned to the
   window instead, with the same gutter as the page, just under the app bar. */
@media (max-width: 600px) {
    .pf-inbox-panel {
        position: fixed;
        top: calc(var(--mud-appbar-height, 56px) + 8px);
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
        max-height: calc(100dvh - var(--mud-appbar-height, 56px) - 24px);
        overflow-y: auto;
    }
}

.pf-inbox-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--mud-palette-divider);
    font-size: .95rem;
}

.pf-inbox-head a {
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--mud-palette-text-secondary);
}

.pf-inbox-head a:hover { color: var(--mud-palette-primary); }

/*
   Capped and scrolled rather than growing with the list. Thirty notifications is taller
   than most screens, and a dropdown that runs off the bottom of the window takes its own
   last item out of reach.
*/
.pf-inbox-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: min(60vh, 440px);
    overflow-y: auto;
}

.pf-inbox-item + .pf-inbox-item { border-top: 1px solid var(--mud-palette-divider); }

/* Unread carries a tinted stripe rather than a dot, so it reads at a glance without
   adding anything to scan past. */
.pf-inbox-item.is-new { background: var(--mud-palette-action-default-hover); }

.pf-inbox-item.is-new .pf-inbox-line { border-left: 3px solid var(--mud-palette-primary); }

.pf-inbox-line {
    display: flex;
    gap: 11px;
    padding: 11px 14px;
    border-left: 3px solid transparent;
    text-decoration: none;
    color: var(--mud-palette-text-primary);
    font-size: .86rem;
    line-height: 1.45;
}

a.pf-inbox-line:hover { background: var(--mud-palette-action-default-hover); }

.pf-inbox-icon { color: var(--mud-palette-text-secondary); flex: 0 0 auto; margin-top: 2px; }

.pf-inbox-text { display: block; min-width: 0; }
.pf-inbox-title { display: block; font-weight: 800; }

.pf-inbox-text time {
    display: block;
    margin-top: 2px;
    font-size: .74rem;
    color: var(--mud-palette-text-secondary);
}

.pf-inbox-empty {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 30px 22px 34px;
    text-align: center;
}

.pf-inbox-empty p { margin: 0; font-size: .86rem; }
.pf-inbox-empty .mud-icon-root { color: var(--mud-palette-text-secondary); opacity: .55; }

/* Where a paused feature used to be. */
.pf-reworking {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 36px 24px;
    text-align: center;
}

.pf-reworking-icon { color: var(--mud-palette-primary); font-size: 2.4rem !important; }

/* The shared animation allowance, under the editor's upload box. */
.pf-anim-count { display: flex; align-items: center; gap: 6px; margin-top: 8px; }

/* A design beyond what the plan covers. */
.pf-locked-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(224, 162, 26, .16);
    color: #9A6A00;
    font-size: .72rem;
    font-weight: 700;
}

/* Profile showcase. */

.pf-showcase { display: grid; gap: 18px; margin: 4px 0 26px; }

.pf-showcase-block { padding: 22px 24px 24px; }

/* Block titles are labels, not headings to read: small, tracked capitals in the
   creator's accent with a short bar before them, the way Steam heads its showcase
   panels. That also keeps them apart from an info box's own [h1], which is the
   big type on the page. */
.pf-showcase-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pf-skin-accent, var(--mud-palette-primary));
}

.pf-showcase-title::before {
    content: "";
    width: 18px;
    height: 3px;
    border-radius: 2px;
    background: currentColor;
}

.pf-showcase-ponies { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }

.pf-showcase-invite {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 4px 0 26px;
    padding: 16px 20px;
    border-radius: var(--pf-radius);
    border: 2px dashed color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease;
}

.pf-showcase-invite:hover {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, transparent);
}

.pf-showcase-invite .mud-icon-root { flex: none; color: var(--mud-palette-primary); }
.pf-showcase-invite strong { color: var(--mud-palette-text-primary); }

/* Custom banner set: the large banner and a strip at roughly Steam's 5:1, top-aligned
   at their own heights so artwork sliced across both meets at the seam. Tighter
   padding than other blocks, because the art is the whole point. */
.pf-showcase-banners { padding: 10px; }
.pf-showcase-banners .pf-showcase-title { margin: 8px 12px 12px; }

.pf-banner-set { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: start; }
.pf-banner-set.has-strip { grid-template-columns: minmax(0, 5fr) minmax(0, 1fr); }

.pf-banner-set img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* Screenshots: the first one large and the rest in a row beneath it, the row sized to
   however many there are so it never ends in an empty cell. Two sit side by side
   instead - one large above one small would look like the second was an afterthought. */
.pf-screens { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.pf-screens-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf-screens-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf-screens-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pf-screens-3 .pf-screen:first-child,
.pf-screens-4 .pf-screen:first-child { grid-column: 1 / -1; }

.pf-screen {
    display: block;
    padding: 0;
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    background: var(--mud-palette-background-gray);
    cursor: zoom-in;
    aspect-ratio: 16 / 9;
}

.pf-screen img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.pf-screen:hover img { transform: scale(1.02); }
.pf-screen:focus-visible { outline: 3px solid var(--pf-skin-accent, var(--mud-palette-primary)); outline-offset: 2px; }

/* The commission warning, for visitors on the profile and for the artist in the
   editors. Amber, because it is a caution rather than an error. */
.pf-caution {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(224, 162, 26, .45);
    background: rgba(224, 162, 26, .10);
    font-size: .88rem;
    line-height: 1.5;
}

.pf-caution > div { display: grid; gap: 6px; }
.pf-caution strong { color: #7A5300; }
.pf-caution-icon { flex: none; color: #B07A00; }
.pf-caution.is-creator { margin-bottom: 0; }

.pf-board-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
}

.pf-board-status > span { flex: 1 1 240px; }
.pf-board-status strong { color: var(--mud-palette-text-primary); }
.pf-board-status .mud-icon-root { color: var(--mud-palette-text-secondary); }
.pf-board-status.is-open .mud-icon-root { color: var(--mud-palette-success); }

.pf-banner-slots { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; }

.pf-screen-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pf-screen-item { display: grid; gap: 4px; }
.pf-screen-item img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; display: block; }
.pf-screen-tools { display: flex; justify-content: center; }

@media (max-width: 600px) {
    .pf-banner-slots { grid-template-columns: minmax(0, 1fr); }
    .pf-screens-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
}

/* Info box text. Links are the site's link colour and underlined, so a reader can
   tell them from the underline tag. */
.pf-markup { line-height: 1.6; overflow-wrap: anywhere; }
.pf-markup-link { color: var(--mud-palette-primary); text-decoration: underline; text-underline-offset: 2px; }

/* Headings inside an info box. A clear three-step scale below the block title, in
   the display weight, with room above so a heading starts a section rather than
   crowding the line before it. */
.pf-markup h3, .pf-markup h4, .pf-markup h5 {
    margin: .9em 0 .25em;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.015em;
    color: var(--mud-palette-text-primary);
}

.pf-markup > :first-child { margin-top: 0; }
.pf-markup-h1 { font-size: 1.6rem; }
.pf-markup-h2 { font-size: 1.25rem; }
.pf-markup-h3 { font-size: 1.02rem; color: var(--mud-palette-primary) !important; }

/* Toolbar extras: text buttons for headings, a divider, and the guide toggle
   pushed to the far end. */
.pf-markup-toolbar .pf-tool-text { width: auto; padding: 0 8px; font: inherit; font-size: .78rem; font-weight: 800; }
.pf-tool-sep { width: 1px; margin: 6px 4px; background: var(--mud-palette-divider); }
.pf-markup-toolbar .pf-tool-help { margin-left: auto; }
.pf-markup-toolbar .pf-tool-help.is-on { color: var(--mud-palette-primary); background: var(--mud-palette-surface); }

.pf-guide {
    display: grid;
    gap: 12px;
    padding: 14px 16px 16px;
    border-bottom: 1px solid var(--mud-palette-divider);
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, var(--mud-palette-surface));
}

.pf-guide-head { display: grid; gap: 2px; }

.pf-guide-table { display: grid; border: 1px solid var(--mud-palette-divider); border-radius: 10px; overflow: hidden; background: var(--mud-palette-surface); }

.pf-guide-row {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 8px 12px;
}

.pf-guide-row + .pf-guide-row { border-top: 1px solid var(--mud-palette-divider); }

.pf-guide-labels {
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-gray);
}

.pf-guide-row code {
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: .8rem;
    overflow-wrap: anywhere;
    color: var(--mud-palette-text-primary);
}

.pf-guide-result { display: grid; gap: 2px; }
.pf-guide-result .pf-markup-h1, .pf-guide-result .pf-markup-h2, .pf-guide-result .pf-markup-h3 { margin: 0; }
.pf-guide-note { font-size: .72rem; color: var(--mud-palette-text-secondary); }

.pf-guide-example summary { cursor: pointer; font-weight: 700; font-size: .88rem; color: var(--mud-palette-primary); }
.pf-guide-example[open] { display: grid; gap: 10px; }

.pf-guide-example-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    margin-top: 10px;
}

.pf-guide-example pre {
    margin: 0;
    padding: 12px;
    border-radius: 10px;
    background: var(--mud-palette-background-gray);
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: .76rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.pf-guide-example-result { padding: 12px; border-radius: 10px; border: 1px solid var(--mud-palette-divider); background: var(--mud-palette-surface); }

@media (max-width: 600px) {
    .pf-guide-row, .pf-guide-example-body { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .pf-guide-labels { display: none; }
}

.pf-spoiler {
    display: inline;
    padding: 0 3px;
    border-radius: 4px;
    background: var(--mud-palette-text-primary);
    color: transparent;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.pf-spoiler * { color: transparent !important; }
.pf-spoiler:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }

.pf-spoiler.is-shown {
    cursor: auto;
    color: inherit;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent);
}

.pf-spoiler.is-shown * { color: inherit !important; }
.pf-spoiler.is-shown .pf-markup-link { color: var(--mud-palette-primary) !important; }

/* Showcase editor. */

.pf-slots { display: grid; gap: 4px; }

.pf-slots-count {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
}

.pf-slots-count .pf-num { font-size: 1.6rem; line-height: 1; color: var(--mud-palette-text-primary); }
.pf-slots-count span .pf-num { font-size: inherit; color: inherit; }

.pf-showcase-edit { display: grid; gap: 14px; }
.pf-showcase-edit.is-hidden { opacity: .7; }

.pf-showcase-edit-head { display: flex; align-items: center; gap: 12px; }

.pf-showcase-edit-icon {
    flex: none;
    width: 38px !important;
    height: 38px !important;
    padding: 8px;
    border-radius: 12px;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.pf-showcase-edit-kind { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 auto; }
.pf-showcase-edit-tools { display: flex; gap: 2px; }

.pf-picker-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }

.pf-pony-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px;
}

.pf-pony-pick {
    position: relative;
    display: grid;
    gap: 6px;
    padding: 8px;
    border-radius: 14px;
    border: 2px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    font: inherit;
    cursor: pointer;
    text-align: center;
    transition: border-color .15s ease, transform .15s ease;
}

.pf-pony-pick:hover:not(:disabled) { border-color: color-mix(in srgb, var(--mud-palette-primary) 50%, transparent); }
.pf-pony-pick:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.pf-pony-pick:disabled { opacity: .45; cursor: default; }
.pf-pony-pick.is-on { border-color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface)); }

.pf-pony-pick .pf-avatar-img,
.pf-pony-pick > :first-child { width: 100%; aspect-ratio: 1; border-radius: 10px; overflow: hidden; }

.pf-pony-pick-name {
    font-size: .75rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf-pony-pick-order {
    position: absolute;
    top: 4px; left: 4px;
    display: grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    border-radius: 7px;
    font-size: .95rem;
    color: #fff;
    background: var(--mud-palette-primary);
}

.pf-markup-editor {
    border: 1px solid var(--mud-palette-divider);
    border-radius: 12px;
    overflow: hidden;
    background: var(--mud-palette-surface);
}

.pf-markup-editor:focus-within { border-color: var(--mud-palette-primary); }

.pf-markup-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 4px;
    border-bottom: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-background-gray);
}

.pf-markup-toolbar button {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
}

.pf-markup-toolbar button:hover { background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); }
.pf-markup-toolbar button:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: -2px; }

.pf-markup-input {
    display: block;
    width: 100%;
    min-height: 150px;
    padding: 12px 14px;
    border: 0;
    outline: none;
    resize: vertical;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: .88rem;
    line-height: 1.55;
}

.pf-markup-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 12px;
    padding: 6px 12px;
    border-top: 1px solid var(--mud-palette-divider);
    font-size: .72rem;
    color: var(--mud-palette-text-secondary);
}

.pf-markup-foot span:first-child { font-family: ui-monospace, Consolas, monospace; }

.pf-markup-preview {
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--mud-palette-background-gray);
}

/* Profile colours preview: the page wash with a card on it, the accent on a label. */
.pf-tint-preview {
    margin-top: 14px;
    padding: 16px;
    border-radius: 12px;
    background: var(--pf-skin-wash);
    border: 1px solid var(--pf-skin-line);
}

.pf-tint-card {
    display: grid;
    gap: 8px;
    max-width: 280px;
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--pf-skin-surface);
    box-shadow: var(--pf-shadow);
}

.pf-tint-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pf-skin-accent);
}

.pf-tint-label::before { content: ""; width: 16px; height: 3px; border-radius: 2px; background: currentColor; }
.pf-tint-line { height: 8px; border-radius: 4px; background: var(--pf-skin-line); }
.pf-tint-line.is-short { width: 60%; }

/* Back from PayPal. */
.pf-checkout-done { padding-top: 56px; }
.pf-checkout-working { justify-items: center; text-align: center; padding-block: 40px; }

/* Gift a plan. Borrows the redeem card; these are the parts only a gift has. */
.pf-gift-avatar {
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    overflow: hidden;
    background: var(--mud-palette-surface);
    box-shadow: 3px 3px 0 color-mix(in srgb, var(--pf-plan, var(--mud-palette-primary)) 35%, transparent);
}

.pf-gift-avatar .pf-avatar-img { width: 100%; height: 100%; }

.pf-gift-recipient {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--mud-palette-background-gray);
}

.pf-gift-recipient > div { display: grid; flex: 1 1 auto; }
.pf-gift-recipient .pf-gift-avatar { width: 44px; height: 44px; border-radius: 12px; box-shadow: none; }

.pf-gift-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.pf-gift-plan {
    display: grid;
    justify-items: start;
    gap: 4px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 2px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.pf-gift-plan .mud-icon-root { color: var(--pf-plan); }
.pf-gift-plan:focus-visible { outline: 2px solid var(--pf-plan); outline-offset: 2px; }

.pf-gift-plan.is-on {
    border-color: var(--pf-plan);
    background: color-mix(in srgb, var(--pf-plan) 8%, var(--mud-palette-surface));
}

.pf-gift-plan-name { font-weight: 800; }
.pf-gift-plan-price { font-size: .85rem; color: var(--mud-palette-text-secondary); }

.pf-billing-toggle.pf-gift-length { margin-top: 12px; justify-self: start; }

@media (max-width: 480px) {
    .pf-gift-plans { grid-template-columns: minmax(0, 1fr); }
}

.pf-add-block-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }

/* A promise, said lightly: small, in the accent, beside the heading rather than a
   card of its own. */
.pf-more-soon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .82rem;
    font-weight: 700;
    color: var(--mud-palette-primary);
}

.pf-block-kinds {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 10px;
}

@media (prefers-reduced-motion: reduce) {
    .pf-spoiler, .pf-pony-pick, .pf-showcase-invite { transition: none; }
}

/* Redeem a promo code. */

/* The card takes the colour of the plan the code gives (--pf-plan, the same
   accents as the /support plan cards), so Pro and Super Pro codes look like
   what they are. Without a plan it falls back to the site violet. */
.pf-redeem {
    --pf-plan: var(--mud-palette-primary);
    padding: 0;
    overflow: hidden;
}

.pf-redeem > .mud-progress-linear { margin: 40px 28px; width: auto; }

.pf-redeem-plan {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 26px 28px 22px;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--pf-plan) 18%, var(--mud-palette-surface)),
            color-mix(in srgb, var(--pf-plan) 6%, var(--mud-palette-surface)));
    border-bottom: 1px solid color-mix(in srgb, var(--pf-plan) 22%, transparent);
}

.pf-redeem-plan-icon {
    flex: none;
    width: 52px !important;
    height: 52px !important;
    padding: 12px;
    border-radius: 16px;
    color: #fff;
    background: var(--pf-plan);
    box-shadow: 3px 3px 0 color-mix(in srgb, var(--pf-plan) 35%, transparent);
}

.pf-redeem-body {
    display: grid;
    gap: 12px;
    padding: 24px 28px 28px;
}

.pf-redeem-eyebrow {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pf-plan);
}

/* Codes are typed exactly, so they are set like code. */
.pf-redeem-code {
    display: inline-block;
    margin-bottom: 4px;
    padding: 2px 10px;
    border-radius: 8px;
    background: var(--mud-palette-surface);
    border: 1px dashed color-mix(in srgb, var(--pf-plan) 55%, transparent);
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .08em;
}

.pf-redeem-title { font-weight: 800; letter-spacing: -.02em; }
.pf-redeem-alert { width: 100%; text-align: left; }

.pf-redeem-limits {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 18px;
    margin: 0;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
}

.pf-redeem-limits .pf-num {
    font-size: 1.9rem;
    line-height: 1;
    color: var(--pf-plan);
}

.pf-redeem-features {
    list-style: none;
    margin: 4px 0;
    padding: 0;
    display: grid;
    gap: 7px;
}

.pf-redeem-features li { display: flex; align-items: flex-start; gap: 8px; }
.pf-redeem-features .mud-icon-root { flex: none; margin-top: 2px; color: var(--pf-plan); }

.pf-redeem-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}

/* The ticket: one pill holding the code and its button. The code is typed big
   and spaced like something printed on a pass, with a dashed inner edge where
   a ticket would tear. The page's one flourish; everything round it is plain. */
.pf-redeem-hero { padding-block: 60px 52px; }

.pf-ticket {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 520px;
    margin: 32px auto 0;
    padding: 8px;
    border-radius: 999px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    box-shadow: var(--pf-shadow-hover);
}

.pf-ticket:focus-within {
    border-color: var(--mud-palette-primary);
    box-shadow: var(--pf-shadow-hover), 0 0 0 4px color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
}

.pf-ticket-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 52px;
    padding: 0 20px;
    border: 0;
    border-right: 2px dashed var(--mud-palette-divider);
    outline: none;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.pf-ticket-input::placeholder { color: var(--mud-palette-text-disabled); letter-spacing: .16em; }

.pf-ticket-button {
    flex: none;
    height: 52px;
    padding: 0 26px;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-weight: 800;
    color: var(--mud-palette-primary-text);
    background: var(--mud-palette-primary);
    cursor: pointer;
    transition: filter .15s ease, opacity .15s ease;
}

.pf-ticket-button:hover:not(:disabled) { filter: brightness(1.08); }
.pf-ticket-button:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 3px; }
.pf-ticket-button:disabled { opacity: .45; cursor: default; }

.pf-ticket-hint { margin: 12px 0 0; font-size: .85rem; color: var(--mud-palette-text-secondary); }
.pf-ticket-alert { max-width: 520px; margin: 16px auto 0; }

/* What a code can unlock: the two paid plans, in their own colours. */
.pf-unlocks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.pf-unlock {
    --pf-plan: var(--mud-palette-primary);
    display: grid;
    align-content: start;
    gap: 16px;
    padding: 24px;
}

/* Doubled up, because a later .pf-card rule resets border colours. */
.pf-card.pf-unlock { border-top: 4px solid var(--pf-plan); }

.pf-unlock-head { display: flex; align-items: center; gap: 14px; }
.pf-unlock-name { font-weight: 800; }

.pf-unlock-foot {
    margin: 18px 0 0;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

@media (max-width: 700px) {
    .pf-unlocks { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
    .pf-redeem-plan, .pf-redeem-body { padding-inline: 20px; }
    .pf-ticket { flex-direction: column; align-items: stretch; border-radius: 22px; }
    .pf-ticket-input { border-right: 0; border-bottom: 2px dashed var(--mud-palette-divider); text-align: center; }
    .pf-ticket-button { border-radius: 16px; }
}

/* Admin: promo codes. */

.pf-promo-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    align-items: start;
}

.pf-promo-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 9px 4px;
    font-size: .86rem;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.pf-promo-row.is-head { font-weight: 700; font-size: .76rem; color: var(--mud-palette-text-secondary); }
.pf-promo-row code { font-weight: 700; }
.pf-promo-row small { display: block; color: var(--mud-palette-text-secondary); }

@media (max-width: 640px) {
    .pf-promo-row { grid-template-columns: 1fr 1fr; }
    .pf-promo-row.is-head { display: none; }
}

/* Admin: sign-ups and activation. Green worked, amber means the mail provider refused,
   and grey is waiting - not red, because waiting a few minutes is normal and only a pile
   of it is a problem. */

.pf-signup-split {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 6px 0 12px;
}

.pf-signup-part { display: grid; gap: 2px; }
.pf-signup-part strong { font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.pf-signup-part span { font-size: .8rem; color: var(--mud-palette-text-secondary); }
.pf-signup-part.is-ok strong { color: #2FBF71; }
.pf-signup-part.is-auto strong { color: #E0A21A; }
.pf-signup-part.is-waiting strong { color: var(--mud-palette-text-secondary); }

.pf-signup-bar {
    display: flex;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--mud-palette-action-default-hover);
    margin-bottom: 8px;
}

.pf-signup-bar span { flex-basis: 0; }
.pf-signup-bar .is-ok { background: #2FBF71; }
.pf-signup-bar .is-auto { background: #E0A21A; }
.pf-signup-bar .is-waiting { background: #C9C4D6; }

.pf-signup-subhead { margin-top: 18px; margin-bottom: 6px; }

.pf-signup-providers { display: grid; }

.pf-signup-provider {
    display: grid;
    grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 7px 4px;
    font-size: .86rem;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.pf-signup-provider.is-head { font-weight: 700; color: var(--mud-palette-text-secondary); font-size: .76rem; }
.pf-signup-provider span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The pattern a spam filter makes: one provider mostly stuck while the rest are fine. */
.pf-signup-provider.is-stuck { background: rgba(224, 162, 26, .10); font-weight: 600; }

.pf-signup-list { list-style: none; margin: 0; padding: 0; }

.pf-signup-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 7px 4px;
    font-size: .86rem;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.pf-signup-list li > :first-child { font-weight: 600; min-width: 0; }
.pf-signup-list time { margin-left: auto; font-size: .76rem; color: var(--mud-palette-text-secondary); }

.pf-signup-chip {
    padding: 1px 8px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
}

.pf-signup-chip.is-ok { background: rgba(47, 191, 113, .14); color: #1E8A50; }
.pf-signup-chip.is-auto { background: rgba(224, 162, 26, .16); color: #9A6A00; }
.pf-signup-chip.is-waiting { background: var(--mud-palette-action-default-hover); color: var(--mud-palette-text-secondary); }

@media (max-width: 560px) {
    .pf-signup-split { grid-template-columns: 1fr; }
}

/* Notification switches, and the inbox screen. */

.pf-switchlist { display: grid; gap: 2px; margin-top: 8px; }

.pf-switchrow {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 7px 8px;
    border-radius: 10px;
    cursor: pointer;
}

.pf-switchrow:hover { background: var(--mud-palette-action-default-hover); }

/* A locked row is not clickable, so it must not light up under the cursor as though
   pressing it would do something. */
.pf-switchrow.is-locked { cursor: default; }
.pf-switchrow.is-locked:hover { background: none; }
.pf-switchrow.is-locked .pf-switchrow-label { color: var(--mud-palette-text-secondary); }

.pf-switchrow-label {
    padding-top: 7px;
    font-size: .9rem;
    line-height: 1.4;
}

.pf-switchrow-label small {
    display: block;
    font-size: .76rem;
    color: var(--mud-palette-text-secondary);
}


.pf-inboxpage-skeleton { border-radius: 14px; }

/* The inbox as a list and a reading pane. Two columns on a wide screen; on a narrow one
   the list or the open message, never both, with the address deciding which. */
.pf-mail {
    display: grid;
    grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.pf-mail-list {
    list-style: none;
    margin: 0;
    padding: 6px;
    display: grid;
    gap: 2px;
    max-height: calc(100dvh - 220px);
    overflow-y: auto;
}

.pf-mail-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    padding: 12px 12px 12px 10px;
    border-radius: 12px;
    border-left: 3px solid transparent;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    transition: background-color .12s ease;
}

.pf-mail-row:hover { background: var(--mud-palette-action-default-hover); }
.pf-mail-row:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: -2px; }
.pf-mail-row.is-open { background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent); }
.pf-mail-row.is-new { border-left-color: var(--mud-palette-primary); }

.pf-mail-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
}

.pf-mail-row.is-new .pf-mail-icon { color: var(--mud-palette-primary); }

.pf-mail-summary { display: grid; gap: 2px; min-width: 0; }

.pf-mail-title {
    font-size: .92rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf-mail-row.is-new .pf-mail-title { font-weight: 900; }

.pf-mail-preview {
    font-size: .82rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pf-mail-row time {
    font-size: .74rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    padding-top: 2px;
}

.pf-mail-reader {
    position: sticky;
    top: calc(var(--mud-appbar-height, 68px) + 20px);
    padding: 28px 30px;
    min-height: 320px;
}

.pf-mail-back { display: none; }

.pf-mail-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 22px; }

.pf-mail-badge {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, var(--mud-palette-surface));
    color: var(--mud-palette-primary);
}

.pf-mail-heading { margin: 0; font-size: 1.4rem; font-weight: 800; line-height: 1.25; }
.pf-mail-meta { margin: 4px 0 0; font-size: .82rem; color: var(--mud-palette-text-secondary); }

.pf-mail-body { max-width: var(--pf-maxline); font-size: 1rem; line-height: 1.65; }
.pf-mail-body p { margin: 0 0 14px; }

/* A moderator's reason or a reviewer's note - the words written about you by a person,
   set apart so they are never lost in the middle of the site's own sentences. */
.pf-mail-body p.pf-mail-reason {
    padding: 12px 16px;
    border-radius: 12px;
    border-left: 4px solid var(--mud-palette-warning);
    background: color-mix(in srgb, var(--mud-palette-warning) 9%, var(--mud-palette-surface));
    font-weight: 600;
}

.pf-mail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.pf-mail-placeholder {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 8px;
    min-height: 264px;
    color: var(--mud-palette-text-secondary);
}

.pf-mail-placeholder .mud-icon-root { opacity: .45; }

@media (max-width: 900px) {
    .pf-mail { grid-template-columns: 1fr; }
    .pf-mail-list { max-height: none; }
    .pf-mail-reader { display: none; position: static; padding: 20px 18px; }
    .pf-mail.is-reading .pf-mail-list { display: none; }
    .pf-mail.is-reading .pf-mail-reader { display: block; }
    .pf-mail-back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 16px;
        font-size: .88rem;
        font-weight: 700;
        color: var(--mud-palette-primary);
        text-decoration: none;
    }
    .pf-mail-heading { font-size: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
    .pf-mail-row { transition: none; }
}

.pf-inboxpage-empty {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 56px 24px 60px;
    text-align: center;
}

.pf-inboxpage-empty .mud-icon-root { color: var(--mud-palette-text-secondary); opacity: .5; }

.pf-inbox-explain {
    margin: 0 0 4px;
    padding-left: 20px;
    font-size: .88rem;
    line-height: 1.7;
    color: var(--mud-palette-text-primary);
}

.pf-drawer-head {
    padding: 22px 20px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pf-navmenu { padding-inline: 8px; }
.pf-navmenu .mud-nav-link { border-radius: 12px; margin-bottom: 2px; }

/* Buttons ------------------------------------------------------------------ */

.pf-btn-pill {
    border-radius: 999px !important;
    text-transform: none;
    font-weight: 700;
    padding-inline: 20px;
}

/* Cards -------------------------------------------------------------------- */

.pf-card {
    background: var(--mud-palette-surface);
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
    border-radius: var(--pf-radius);
    box-shadow: var(--pf-shadow);
}

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

.pf-hero-glow {
    position: absolute;
    inset: -30% -10% auto -10%;
    height: 520px;
    background: radial-gradient(closest-side, var(--mud-palette-primary), transparent);
    opacity: .10;
    filter: blur(20px);
    pointer-events: none;
}

.pf-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px 6px 10px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 700;
    color: var(--mud-palette-primary);
    background: var(--mud-palette-surface);
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
    box-shadow: var(--pf-shadow);
}

.pf-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

/* Pixel numerals. Used only where a number is the point - site counts and ranks -
   so the sprites' grain turns up in the type without taking over the page. The
   hard offset shadow is the same pixel-era vernacular, one step down and right. */
.pf-num {
    /* One weight only - asking for bold would have the browser smear a fake one. */
    font-family: "Jersey 15", ui-monospace, monospace;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   Section headings, bands
   -------------------------------------------------------------------------- */

.pf-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.pf-section-title { font-weight: 800; letter-spacing: -.02em; }

.pf-band {
    padding-block: 56px;
    background: var(--mud-palette-background-gray);
    border-block-width: 1px; border-block-style: solid; border-block-color: var(--mud-palette-divider);
}

.pf-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}

.pf-page-head-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pf-page-title { font-weight: 800; letter-spacing: -.025em; margin-bottom: 4px; }

/* --------------------------------------------------------------------------
   Grids and skin cards
   -------------------------------------------------------------------------- */

.pf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
    gap: var(--pf-gap);
}

.pf-grid-dense { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }
.pf-grid-creators { grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); }

/* A container, so the stats row can answer to the card's own width.
   A media query would be the wrong tool here: the grid is auto-fill, so card width and
   viewport width do not track each other. A 1024px window gives three 296px cards while
   a 1140px window gives four 246px ones - the narrower card is on the wider screen. */
.pf-skin-card {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    container-type: inline-size;
    transition: transform .18s ease, box-shadow .18s ease;
}

/* The query that goes with this lives further down, with the stat rules. It has to:
   .pf-stat-btn sets display:inline-flex, an @container block adds no specificity of its
   own, and a tie is broken by source order - so a display:none written up here loses to
   a rule three hundred lines below it and the column silently stays visible. */

.pf-skin-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--pf-shadow-hover);
    border-color: var(--mud-palette-primary);
}

.pf-skin-art {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    padding: 22px 18px;
    overflow: hidden;
}

/* A real screenshot fills the tile edge to edge; the generated fallback keeps its padding. */
.pf-skin-art.has-shot { padding: 0; }

.pf-shot {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.pf-shot-missing {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-surface);
    box-shadow: var(--pf-shadow);
}

.pf-art-flags {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    max-width: calc(100% - 20px);
}

.pf-art-flag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-surface);
    box-shadow: var(--pf-shadow);
}

.pf-art-flag.is-featured { color: var(--mud-palette-primary); }

.pf-art-flag.is-gif {
    color: #fff;
    background: var(--mud-palette-secondary);
    letter-spacing: .04em;
}

.pf-art-count {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 800;
    color: #fff;
    background: rgba(20, 15, 40, .62);
    backdrop-filter: blur(4px);
}

.pf-skin-hover {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px;
    font-size: .8rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(transparent, rgba(20, 15, 40, .72));
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease;
}

.pf-skin-card:hover .pf-skin-hover { opacity: 1; transform: translateY(0); }

.pf-skin-body {
    padding: 14px 16px 6px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    flex: 1;
}

.pf-skin-titles { min-width: 0; }

.pf-skin-title {
    font-weight: 800;
    font-size: 1rem;
    color: var(--mud-palette-text-primary) !important;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf-skin-title:hover { color: var(--mud-palette-primary) !important; }

.pf-skin-by {
    font-size: .83rem;
    color: var(--mud-palette-text-secondary) !important;
}

.pf-swatches { display: flex; gap: 4px; flex-shrink: 0; padding-top: 4px; }

.pf-swatches span {
    width: 13px;
    height: 13px;
    border-radius: 4px;
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
}

/* Wraps rather than overflows.
   The tightened padding below fits four stats on a card at the numbers this site
   currently has, but only just - about 9px to spare. A design with 999.9k views and
   12.3k comments needs 48px more than the card is wide, and without this it spilled
   past the rounded corner. Wrapping costs nothing until that happens: the row is
   identical at ordinary numbers, and the grid stretches the whole row to match when
   one card does grow, so it stays even. */
.pf-skin-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 6px 10px 10px;
}

/* Tighter than it looks like it needs to be, because four of these share the width of
   one card. At 10px of side padding the row overflowed the card by 19px as soon as the
   comment count joined likes, saves and views - and that was on a wide viewport, with
   compact numbers like "11.2k" rather than the full figure. */
.pf-stat-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 7px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;

}

.pf-stat-btn:hover { background: var(--mud-palette-action-default-hover); }
.pf-stat-btn.is-on { color: var(--mud-palette-secondary); }

/* Not a button. Says nothing about where it sits. */
.pf-stat-static { cursor: default; }

/* The last stat in the row. It no longer moves itself.
   This carried margin-left:auto, to hold views apart from the three things people
   actually do to a design. That reads fine when the row is nearly full and is wrong the
   rest of the time: auto absorbs *all* the slack, so on live numbers - single digits,
   46px pills, about 80px spare - it opened a gap the width of two pills. The seeded dev
   numbers are in the thousands, which left 9px of slack and hid it completely.
   The class stays because the container query below still needs to name this pill. */
.pf-stat-end { }

/* Four labelled stats need 260px of row, and a card gives its width less 22px of
   padding - so they stop fitting just under 282px. The threshold is 285px rather than
   282 so the last few pixels before the boundary are not spent on a row with nothing to
   spare, and tightening the padding far enough to fit four on a 246px card was tried
   first: it left the icons too small to read.

   Views is the one that goes. It is the only passive figure of the four - the other
   three are things somebody did, which is what a card is for - it is usually the largest
   number, so it costs the most room, and it is still on the design page.

   Must stay below .pf-stat-btn. See the note on .pf-skin-card. */
@container (max-width: 285px) {
    .pf-stat-end { display: none; }
}
.pf-stat-static:hover { background: transparent; }

/* --------------------------------------------------------------------------
   Creator cards
   -------------------------------------------------------------------------- */

.pf-creator-card { overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; }
.pf-creator-card:hover { transform: translateY(-4px); box-shadow: var(--pf-shadow-hover); }

.pf-creator-banner { height: 76px; }

.pf-creator-avatar {
    display: block;
    width: 68px;
    height: 68px;
    margin: -34px 0 0 18px;
    padding: 7px;
    border-radius: 20px;
    border-width: 3px; border-style: solid; border-color: var(--mud-palette-surface);
    box-shadow: var(--pf-shadow);
}

.pf-creator-body { padding: 12px 18px 18px; }

.pf-creator-name { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

.pf-creator-display {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--mud-palette-text-primary) !important;
}

.pf-creator-display:hover { color: var(--mud-palette-primary) !important; }

.pf-creator-tagline {
    margin: 10px 0 12px;
    color: var(--mud-palette-text-secondary);
    min-height: 42px;
}

.pf-creator-meta {
    display: flex;
    gap: 7px;
    font-size: .82rem;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 14px;
}

.pf-creator-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

/* Tier badges -------------------------------------------------------------- */

.pf-tier {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px 3px 7px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1.6;
}

.pf-tier .mud-icon-root { font-size: .95rem; }
.pf-tier-pro { color: var(--mud-palette-primary); background: var(--mud-palette-primary-hover); }
.pf-tier-superpro { color: var(--mud-palette-secondary); background: var(--mud-palette-secondary-hover); }

/* Commission pills --------------------------------------------------------- */

.pf-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    border: 1px solid transparent;
}

.pf-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.pf-pill-open {
    color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-success) 28%, transparent);
}

.pf-pill-waitlist {
    color: var(--mud-palette-warning);
    background: color-mix(in srgb, var(--mud-palette-warning) 12%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-warning) 28%, transparent);
}

.pf-pill-closed {
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-gray);
    border-color: var(--mud-palette-divider);
}

/* --------------------------------------------------------------------------
   Filters and tags
   -------------------------------------------------------------------------- */

.pf-filterbar {
    display: flex;
    gap: 14px;
    padding: 16px;
    margin-bottom: 18px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.pf-filter-search { flex: 1 1 260px; }
.pf-filter-sort { flex: 0 1 200px; }
.pf-budget { flex: 1 1 200px; padding-top: 2px; }

.pf-tagrow {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 26px;
}

.pf-tagrow-inline { margin: 16px 0 0; }

.pf-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border-radius: 999px;
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: .83rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: box-shadow .15s ease;
}

.pf-tag:hover:not(:disabled) {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.pf-tag.is-on {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.pf-tag:disabled { opacity: .45; cursor: not-allowed; }
.pf-tag-clear { color: var(--mud-palette-error); border-style: dashed; }

.pf-loadmore { display: flex; justify-content: center; margin-top: 36px; }

/* Empty state -------------------------------------------------------------- */

.pf-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    padding: 64px 24px;
    border-width: 1px; border-style: dashed; border-color: var(--mud-palette-divider);
    border-radius: var(--pf-radius);
    background: var(--mud-palette-background-gray);
}

.pf-empty-icon { color: var(--mud-palette-text-disabled); }
.pf-empty-text { max-width: 42ch; }

/* --------------------------------------------------------------------------
   Skin detail
   -------------------------------------------------------------------------- */

.pf-crumbs { padding-inline: 0; margin-bottom: 14px; }

.pf-detail {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.pf-detail-main { display: flex; flex-direction: column; gap: 18px; }
.pf-detail-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 92px; }

.pf-detail-art {
    position: relative;
    aspect-ratio: 16 / 11;
    border-radius: var(--pf-radius-lg);
    padding: 40px;
    overflow: hidden;
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
    box-shadow: var(--pf-shadow);
}

.pf-detail-art.has-shot { padding: 0; }
.pf-detail-art.has-shot .pf-shot { object-fit: contain; }

/* Gallery ------------------------------------------------------------------ */

.pf-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    box-shadow: var(--pf-shadow-hover);
    opacity: .85;
}

.pf-gallery-nav:hover { opacity: 1; }
.pf-gallery-nav.is-prev { left: 12px; }
.pf-gallery-nav.is-next { right: 12px; }

.pf-gallery-counter {
    position: absolute;
    bottom: 12px;
    right: 12px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
    color: #fff;
    background: rgba(20, 15, 40, .62);
    backdrop-filter: blur(4px);
}

.pf-thumbs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.pf-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 92px;
    height: 70px;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    border-radius: 12px;
    border-width: 2px;
    border-style: solid;
    border-color: var(--mud-palette-divider);
    background: var(--mud-palette-background-gray);
}

.pf-thumb img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; display: block; }
.pf-thumb.is-on { border-color: var(--mud-palette-primary); }
.pf-thumb:hover { border-color: var(--mud-palette-primary); }

.pf-thumb-gif {
    position: absolute;
    bottom: 4px;
    right: 4px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 800;
    color: #fff;
    background: var(--mud-palette-secondary);
}

.pf-thumb-caption { display: block; margin-top: 8px; }

.pf-palette { padding: 16px 18px; }
.pf-palette-head { margin-bottom: 12px; }
.pf-palette-row { display: flex; gap: 22px; flex-wrap: wrap; }

.pf-palette-chip { display: flex; align-items: center; gap: 10px; }

.pf-palette-chip > span {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
}

.pf-palette-chip div { display: flex; flex-direction: column; }
.pf-palette-chip strong { font-size: .82rem; }
.pf-palette-chip code { font-size: .78rem; color: var(--mud-palette-text-secondary); }

.pf-detail-desc { padding: 22px; }
.pf-detail-header { padding: 22px; }
.pf-detail-title { font-weight: 800; letter-spacing: -.025em; }

.pf-detail-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 18px 0;
}

.pf-detail-stats {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
    border-top-width: 1px; border-top-style: solid; border-top-color: var(--mud-palette-divider);
}

.pf-detail-stats div { display: flex; flex-direction: column; }
.pf-detail-stats strong { font-size: 1.2rem; font-weight: 800; }
.pf-detail-stats span { font-size: .78rem; color: var(--mud-palette-text-secondary); }

/* Share code --------------------------------------------------------------- */

.pf-sharecode {
    padding: 18px;
    border-radius: var(--pf-radius);
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary-hover);
}

.pf-sharecode-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .82rem;
    font-weight: 800;
    color: var(--mud-palette-primary);
    margin-bottom: 12px;
}

.pf-sharecode-free {
    margin-left: auto;
    font-size: .72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 14%, transparent);
}

.pf-sharecode-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.pf-sharecode-row code {
    flex: 1 1 220px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--mud-palette-surface);
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
    font-size: .9rem;
    overflow-x: auto;
    white-space: nowrap;
}

.pf-creator-inline { padding: 16px; display: flex; align-items: center; gap: 12px; }

.pf-creator-inline-avatar {
    width: 52px;
    height: 52px;
    padding: 6px;
    border-radius: 16px;
    flex-shrink: 0;
}

.pf-creator-inline-text { flex: 1; min-width: 0; }

.pf-commission-nudge { padding: 18px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.pf-related { margin-top: 48px; }

/* --------------------------------------------------------------------------
   Profile
   -------------------------------------------------------------------------- */

.pf-profile-banner { height: 210px; }
.pf-profile-wrap { padding-bottom: 56px; }

/* Only the avatar breaks into the banner. Pulling the whole header up put the name,
   stats and buttons on top of the gradient, where they were unreadable and fought
   the banner for attention. */
.pf-profile-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 22px;
    align-items: flex-start;
    padding-top: 18px;
    margin-bottom: 28px;
}

.pf-profile-avatar {
    width: 132px;
    height: 132px;
    margin-top: -78px;
    padding: 0;
    overflow: hidden;
    border-radius: 30px;
    border-width: 4px; border-style: solid; border-color: var(--mud-palette-surface);
    box-shadow: var(--pf-shadow-hover);
    background-color: var(--mud-palette-surface);
}

.pf-profile-identity { padding-bottom: 4px; }
.pf-profile-name { font-weight: 800; letter-spacing: -.03em; }
.pf-profile-tagline { margin-top: 8px; max-width: var(--pf-maxline); }

.pf-profile-stats { display: flex; gap: 28px; margin-top: 14px; }
.pf-profile-stats div { display: flex; flex-direction: column; }
.pf-profile-stats strong { font-size: 1.5rem; line-height: 1.1; }
.pf-profile-stats span { font-size: .8rem; color: var(--mud-palette-text-secondary); }

.pf-profile-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    padding-bottom: 6px;
}

.pf-profile-tabs .mud-tabs-toolbar { background: transparent; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--mud-palette-divider); }
.pf-profile-tabs .mud-tab { text-transform: none; font-weight: 700; letter-spacing: 0; }
.pf-profile-tabs .mud-tabs-panels { padding: 28px 0 0; }

/* Main column and About sidebar. The sidebar is first in the source, so on a phone
   it reads first; from 960px it moves to the right and stays in view while the
   main column scrolls. 300px holds a bio comfortably and leaves the designs grid
   four cards wide. */
.pf-profile-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    grid-template-areas: "main side";
    gap: 28px;
    align-items: start;
}

.pf-profile-main { grid-area: main; min-width: 0; }

.pf-profile-side {
    grid-area: side;
    position: sticky;
    top: 84px;
    padding: 20px 22px 18px;
}

.pf-profile-main .pf-showcase { margin-top: 0; }

/* Labels in the sidebar: small, tracked, and in the creator's accent, so the one
   column that never changes still carries their colour. */
.pf-side-label {
    margin: 18px 0 8px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pf-skin-accent, var(--mud-palette-primary));
}

.pf-side-label:first-child { margin-top: 0; }
.pf-side-bio { margin: 0; white-space: pre-line; line-height: 1.55; overflow-wrap: anywhere; }
.pf-side-fact { margin: 0; font-size: .9rem; color: var(--mud-palette-text-secondary); }
.pf-side-gift { margin-top: 18px; }

@media (max-width: 960px) {
    .pf-profile-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "side" "main"; }
    .pf-profile-side { position: static; }
}

.pf-linklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }

/* A profile link: the platform's mark on a tint of its brand colour, its name, the
   address underneath. The brand colour only ever tints a small tile, never the row, so a
   list of six platforms reads as one list rather than six adverts. */
.pf-linkout {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 8px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease;
}

.pf-linkout:hover { background: var(--mud-palette-action-default-hover); }
.pf-linkout:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 1px; }

.pf-linkout-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    color: var(--pf-brand);
    background: color-mix(in srgb, var(--pf-brand) 13%, #fff);
}

.pf-linkout-text { display: grid; min-width: 0; flex: 1 1 auto; }
.pf-linkout-text strong { font-size: .88rem; font-weight: 800; }
.pf-linkout-text span { font-size: .78rem; color: var(--mud-palette-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-linkout-go { color: var(--mud-palette-text-secondary); opacity: 0; transition: opacity .15s ease; }
.pf-linkout:hover .pf-linkout-go, .pf-linkout:focus-visible .pf-linkout-go { opacity: 1; }
.pf-report-btn { margin-top: 18px; }

/* --------------------------------------------------------------------------
   Commissions
   -------------------------------------------------------------------------- */

.pf-commission-layout {
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
    gap: 26px;
    align-items: start;
}

.pf-commission-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 92px; }
.pf-commission-list { display: flex; flex-direction: column; gap: 18px; }

.pf-commission-card { padding: 22px; }

.pf-commission-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }

.pf-commission-avatar {
    width: 56px;
    height: 56px;
    padding: 7px;
    border-radius: 16px;
    flex-shrink: 0;
}

.pf-commission-headtext { flex: 1; min-width: 0; }
.pf-commission-title { font-weight: 800; }
.pf-commission-by { display: flex; align-items: center; gap: 6px; font-size: .88rem; }
.pf-commission-price { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; }
.pf-price { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.pf-commission-price .pf-muted { font-size: .74rem; }
.pf-commission-desc { color: var(--mud-palette-text-secondary); }

.pf-includes {
    list-style: none;
    padding: 0;
    margin: 16px 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px 18px;
}

.pf-includes li { display: flex; align-items: center; gap: 7px; font-size: .86rem; }
.pf-includes .mud-icon-root { color: var(--mud-palette-success); }

.pf-commission-meta {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    font-size: .84rem;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 10px;
}

.pf-commission-meta span { display: inline-flex; align-items: center; gap: 6px; }
.pf-slot-bar { height: 6px; margin-bottom: 16px; }

.pf-commission-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.pf-side-card { padding: 22px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.pf-side-card > .mud-button-root { align-self: stretch; }

.pf-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: .89rem; }
.pf-steps li { color: var(--mud-palette-text-secondary); }
.pf-steps strong { color: var(--mud-palette-text-primary); }

.pf-side-safety { border-color: color-mix(in srgb, var(--mud-palette-warning) 40%, var(--mud-palette-divider)); }

.pf-side-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: var(--mud-palette-warning);
    background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent);
}

/* --------------------------------------------------------------------------
   Upload
   -------------------------------------------------------------------------- */

.pf-upload { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.pf-upload-form { display: flex; flex-direction: column; gap: 18px; }
.pf-upload-preview { position: relative; }
.pf-sticky { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 14px; }
.pf-preview-label { color: var(--mud-palette-text-secondary); }
.pf-preview-note { padding: 16px; }

.pf-form-card { padding: 24px; }
.pf-form-hint { margin-bottom: 16px; }
.pf-field { margin-bottom: 18px; }

.pf-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 44px 24px;
    border-width: 2px; border-style: dashed; border-color: var(--mud-palette-lines-default);
    border-radius: var(--pf-radius);
    background: var(--mud-palette-background-gray);
    cursor: pointer;
    text-align: center;
    
}

.pf-dropzone:hover { border-color: var(--mud-palette-primary); background: var(--mud-palette-primary-hover); }
.pf-dropzone.has-file { border-style: solid; border-color: var(--mud-palette-success); }
.pf-dropzone.has-file .mud-icon-root { color: var(--mud-palette-success); }
.pf-dropzone .mud-icon-root { color: var(--mud-palette-primary); }
.pf-dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.pf-dropzone.compact { padding: 24px; }

/* Pending upload list ------------------------------------------------------ */

.pf-gif-upsell {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: var(--pf-radius);
    border-width: 1px;
    border-style: solid;
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary-hover);
}

.pf-gif-upsell > .mud-icon-root { color: var(--mud-palette-primary); flex-shrink: 0; }
.pf-gif-upsell > div { display: flex; flex-direction: column; flex: 1; }
.pf-gif-upsell strong { font-size: .9rem; }
.pf-gif-upsell span { font-size: .82rem; }

.pf-imagelist {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pf-imagelist-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px;
    border-radius: var(--pf-radius);
    border-width: 1px;
    border-style: solid;
    border-color: var(--mud-palette-divider);
    background: var(--mud-palette-background-gray);
}

.pf-imagelist-row.is-primary { border-color: var(--mud-palette-primary); }

.pf-imagelist-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 88px;
    height: 68px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--mud-palette-surface);
}

.pf-imagelist-thumb img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; display: block; }

.pf-imagelist-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.pf-imagelist-name { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: .86rem; }
.pf-imagelist-name .pf-muted { font-size: .78rem; }

.pf-primary-flag {
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
    color: var(--mud-palette-primary);
    background: var(--mud-palette-surface);
}

.pf-imagelist-inputs { display: flex; gap: 10px; flex-wrap: wrap; }
.pf-imagelist-inputs > *:first-child { flex: 1 1 220px; }
.pf-kind-select { flex: 0 0 140px; }
.pf-imagelist-actions { display: flex; flex-direction: column; gap: 2px; }

@media (max-width: 767px) {
    .pf-imagelist-row { flex-wrap: wrap; }
    .pf-imagelist-actions { flex-direction: row; }
}

.pf-colorrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; }
.pf-form-alert { margin-top: 18px; }
.pf-form-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* --------------------------------------------------------------------------
   Support / plans
   -------------------------------------------------------------------------- */

.pf-support-hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding-block: 66px 44px;
    border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--mud-palette-divider);
    background:
        radial-gradient(900px 340px at 50% -20%, var(--mud-palette-primary-hover), transparent 65%),
        var(--mud-palette-background);
}

.pf-support-hero-inner { position: relative; }
.pf-support-title { font-weight: 800; letter-spacing: -.03em; margin: 18px 0 14px; font-size: clamp(2rem, 4.4vw, 3rem); }
.pf-support-sub { color: var(--mud-palette-text-secondary); max-width: 60ch; margin: 0 auto; }

.pf-billing-toggle {
    display: inline-flex;
    gap: 4px;
    margin-top: 30px;
    padding: 5px;
    border-radius: 999px;
    background: var(--mud-palette-background-gray);
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
}

.pf-billing-toggle button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 999px;
    padding: 9px 20px;
    font: inherit;
    font-weight: 700;
    font-size: .9rem;
    color: var(--mud-palette-text-secondary);
    background: transparent;
    cursor: pointer;
    transition: box-shadow .15s ease;
}

.pf-billing-toggle button.is-on {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
    box-shadow: var(--pf-shadow);
}

.pf-save-flag {
    font-size: .68rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
    color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 15%, transparent);
}

.pf-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
    align-items: start;
}

.pf-plan { padding: 26px; position: relative; display: flex; flex-direction: column; }

.pf-plan.is-featured {
    border-color: var(--pf-plan-accent);
    box-shadow: 0 0 0 1px var(--pf-plan-accent), var(--pf-shadow-hover);
}

.pf-plan-flag {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 16px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 800;
    color: #fff;
    background: var(--pf-plan-accent);
    white-space: nowrap;
}

.pf-plan-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }

.pf-plan-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: var(--pf-plan-accent);
    background: color-mix(in srgb, var(--pf-plan-accent) 14%, transparent);
    flex-shrink: 0;
}

.pf-plan-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.pf-plan-amount { font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }

.pf-plan-save {
    font-size: .7rem;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 999px;
    color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 15%, transparent);
}

.pf-plan-cta { margin-bottom: 6px; }
.pf-plan-divider { margin: 18px 0; }

.pf-plan-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.pf-plan-features li { display: flex; align-items: flex-start; gap: 9px; font-size: .89rem; }
.pf-plan-features .mud-icon-root { color: var(--pf-plan-accent); margin-top: 1px; flex-shrink: 0; }

.pf-compare { padding: 26px; margin-top: 48px; }
.pf-table-scroll { overflow-x: auto; }
.pf-compare-table { min-width: 620px; }
.pf-compare-table th { font-weight: 800; }
.pf-compare-table td, .pf-compare-table th { text-align: center; }
.pf-compare-label { text-align: left !important; font-weight: 600; }
.pf-cell-yes { color: var(--mud-palette-success); font-weight: 800; font-size: 1.05rem; }
.pf-cell-no { color: var(--mud-palette-text-disabled); }
.pf-cell-text { font-weight: 700; }

.pf-faq { margin-top: 52px; }
.pf-faq-panels { background: transparent; }
.pf-faq-panel { margin-bottom: 10px; }

/* --------------------------------------------------------------------------
   Dashboard
   -------------------------------------------------------------------------- */

.pf-stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 18px;
    margin-bottom: 26px;
}

.pf-stat-tile { padding: 20px; display: flex; flex-direction: column; gap: 4px; }

.pf-stat-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    margin-bottom: 8px;
    color: var(--pf-tile-accent);
    background: color-mix(in srgb, var(--pf-tile-accent) 14%, transparent);
}

.pf-stat-value { font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.pf-stat-label { font-size: .84rem; color: var(--mud-palette-text-secondary); }

.pf-stat-delta { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 700; margin-top: 6px; }
.pf-stat-delta.is-up { color: var(--mud-palette-success); }
.pf-stat-delta.is-down { color: var(--mud-palette-text-secondary); }

.pf-dash { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.pf-dash-main { display: flex; flex-direction: column; gap: 22px; }
.pf-dash-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 92px; }

.pf-dash-cardhead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.pf-queue-table { min-width: 620px; }
.pf-queue-client { display: flex; align-items: center; gap: 9px; }

.pf-queue-avatar {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    padding: 4px;
    flex-shrink: 0;
}

.pf-right { text-align: right; }
.pf-overdue { color: var(--mud-palette-error); font-weight: 700; }

.pf-stage {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
    white-space: nowrap;
}

.pf-stage-sketch   { color: var(--mud-palette-info);    background: color-mix(in srgb, var(--mud-palette-info) 14%, transparent); }
.pf-stage-progress { color: var(--mud-palette-primary); background: var(--mud-palette-primary-hover); }
.pf-stage-review   { color: var(--mud-palette-warning); background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent); }
.pf-stage-done     { color: var(--mud-palette-success); background: color-mix(in srgb, var(--mud-palette-success) 14%, transparent); }
.pf-stage-waiting  { color: var(--mud-palette-text-secondary); background: var(--mud-palette-background-gray); }

.pf-upgrade { border-color: var(--mud-palette-secondary); }

.pf-upgrade-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: var(--mud-palette-secondary);
    background: var(--mud-palette-secondary-hover);
}

.pf-toplist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; width: 100%; }
.pf-toplist li { display: flex; align-items: center; gap: 11px; }

.pf-toplist-art {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    padding: 5px;
    flex-shrink: 0;
}

.pf-toplist-text { display: flex; flex-direction: column; min-width: 0; }
.pf-toplist-text a { font-weight: 700; font-size: .89rem; color: var(--mud-palette-text-primary); text-decoration: none; }
.pf-toplist-text a:hover { color: var(--mud-palette-primary); }
.pf-toplist-text span { font-size: .78rem; }

/* --------------------------------------------------------------------------
   Settings
   -------------------------------------------------------------------------- */

.pf-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; align-items: start; }
.pf-settings-single { max-width: 640px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.pf-settings-save { justify-content: flex-end; margin-top: 28px; }
.pf-plan-status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.pf-danger { border-color: color-mix(in srgb, var(--mud-palette-error) 40%, var(--mud-palette-divider)); margin-top: 20px; max-width: 640px; }

/* --------------------------------------------------------------------------
   Auth pages
   -------------------------------------------------------------------------- */

.pf-auth {
    position: relative;
    min-height: calc(100vh - var(--mud-appbar-height, 68px) - 1px);
    display: grid;
    place-items: center;
    padding: 24px 16px;
    overflow: hidden;
    background:
        radial-gradient(700px 400px at 20% 0%, var(--mud-palette-primary-hover), transparent 60%),
        radial-gradient(700px 400px at 80% 100%, var(--mud-palette-secondary-hover), transparent 60%),
        var(--mud-palette-background);
}
.pf-auth-glow { position: absolute; inset: 0; pointer-events: none; }

.pf-auth-card {
    position: relative;
    width: 100%;
    max-width: 388px;
    padding: 26px;
    display: flex;
    flex-direction: column;
}

.pf-auth-brand { align-self: center; margin-bottom: 14px; }
.pf-auth-title { font-weight: 800; text-align: center; }
.pf-auth-sub { text-align: center; margin-bottom: 16px; }
.pf-auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.pf-auth-check { margin-bottom: 20px; }
.pf-auth-alt { text-align: center; margin-top: 14px; }

/* Sign-in: the pony stage beside the card. -------------------------------------

   The ponies are the page. Everything else here is deliberately quiet so that the
   one thing worth watching is four pixel ponies noticing what you are doing with
   the password field. No gradient text, no animated background, no second idea.

   The card is fixed-width on the right and the stage takes the rest, so the ponies
   have somewhere to walk to. On a narrow screen there is no such room, and rather
   than shrink them to thumbnails the stage goes away entirely - which also spares
   a phone the animation payload it was never going to enjoy. */
.pf-login-stage {
    position: relative;
    width: 100%;
    max-width: 940px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 388px);
    column-gap: 40px;
    align-items: center;
}
.pf-login-stage > .pf-auth-card { grid-column: 2; grid-row: 1; z-index: 1; }
.pf-login-stage .pf-auth-row { justify-content: flex-end; }

/* ---- Password checklist --------------------------------------------------
   Four short lines under the password field on register. Neutral until each is
   met, never red: an empty field has not failed anything, and the rules are
   help rather than an accusation. The icon changes shape as well as colour, so
   the state does not rest on colour alone. */
/* The open/close itself.

   A grid with one row going 0fr to 1fr is the only way to transition to a height
   nobody has measured. max-height with a guessed ceiling either clips the content or
   spends most of the animation on empty space, and height:auto does not transition at
   all - which is what made the card snap open. */
.pf-pwcheck-shell {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition:
        grid-template-rows 280ms cubic-bezier(.4, 0, .2, 1),
        opacity 180ms ease;
}

.pf-pwcheck-shell.is-open {
    grid-template-rows: 1fr;
    opacity: 1;
}

/* The row has to be able to be shorter than its contents for the grid trick to work. */
.pf-pwcheck-clip {
    overflow: hidden;
    min-height: 0;
}

/* Kept tight on purpose. The card is centred in the page, so every pixel this block
   adds moves the card half that far upwards as well as downwards - four comfortable
   rows cost 160px of growth and shifted the password field 80px out from under the
   cursor. Compact rows and a two-column grid roughly halve that. */
.pf-pwcheck {
    margin: 0.45rem 0 0.1rem;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--pf-radius-md, 10px);
    background: var(--mud-palette-background-gray);
    transition: border-color 220ms ease, background-color 220ms ease;
}

/* One quiet signal that there is nothing left to do. */
.pf-pwcheck.is-complete {
    border-color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 7%, transparent);
}

.pf-pwcheck-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}

.pf-pwcheck-title {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.pf-pwcheck-score {
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
}

.pf-pwcheck.is-complete .pf-pwcheck-score { color: var(--mud-palette-success); }

/* Progress, and only progress: the width is met over total. */
.pf-pwcheck-bar {
    height: 3px;
    border-radius: 999px;
    background: var(--mud-palette-divider);
    overflow: hidden;
    margin-bottom: 0.4rem;
}

.pf-pwcheck-bar span {
    display: block;
    height: 100%;
    width: var(--pf-pwcheck-progress, 0%);
    border-radius: inherit;
    background: var(--mud-palette-primary);
    transition: width 260ms cubic-bezier(.4, 0, .2, 1), background-color 220ms ease;
}

.pf-pwcheck.is-complete .pf-pwcheck-bar span { background: var(--mud-palette-success); }

/* Two columns: four rules stacked is twice the growth of four rules paired, and at
   this length they read just as well side by side. Collapses to one column where
   there is not the width for it. */
.pf-pwcheck-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.15rem 0.5rem;
}

@media (max-width: 400px) {
    .pf-pwcheck-list { grid-template-columns: minmax(0, 1fr); }
}

.pf-pwcheck-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.76rem;
    color: var(--mud-palette-text-secondary);
    transition: color 160ms ease;
}

.pf-pwcheck-item .mud-icon-root {
    font-size: 1rem;
    color: var(--mud-palette-action-disabled);
    /* Overshoots slightly on the way in, so a rule being satisfied registers as a
       small event rather than a colour swap you might not notice mid-sentence. */
    transition: color 180ms ease, transform 260ms cubic-bezier(.34, 1.56, .64, 1);
}

.pf-pwcheck-item.is-met { color: var(--mud-palette-text-primary); }

.pf-pwcheck-item.is-met .mud-icon-root {
    color: var(--mud-palette-success);
    transform: scale(1.15);
}

@media (prefers-reduced-motion: reduce) {
    .pf-pwcheck-shell,
    .pf-pwcheck,
    .pf-pwcheck-bar span,
    .pf-pwcheck-item,
    .pf-pwcheck-item .mud-icon-root { transition: none; }
    .pf-pwcheck-item.is-met .mud-icon-root { transform: none; }
}

.pf-ponystage {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    justify-self: center;
    width: 100%;
    max-width: 500px;
    height: 300px;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Something to stand on.

   Four sprites on a plain background read as stickers rather than as ponies in a
   place. This is not a floor so much as the suggestion of one: a wide, very soft
   pool of the site's own primary tint, sitting under their hooves. It carries the
   whole illusion, so it is the one piece of decoration that earns its place. */
.pf-ponystage-ground {
    position: absolute;
    left: 2%;
    right: 2%;
    bottom: 28px;
    height: 84px;
    border-radius: 50%;
    background: radial-gradient(58% 100% at 50% 50%, var(--mud-palette-primary-hover), transparent 74%);
}

/* Spread across the stage at different depths: the ones further back sit higher
   and smaller. A straight row of four equal ponies looks like a sprite sheet. */
.pf-ponystage-actor {
    position: absolute;
    left: var(--pony-left);
    bottom: var(--pony-bottom);
    width: var(--pony-w);
    z-index: var(--pony-z);
    transform: translateX(0);

    /* Linear, not eased. A trot is a looping cycle played at one speed, so easing the
       travel slides the pony faster than its legs are moving at the start and slower
       at the end - it reads as floating rather than walking. */
    transition: transform 620ms linear;
    transition-delay: calc(var(--i) * 70ms);
}

/* Widths are worked back from how tall each pony actually draws, not guessed.

   The canvases differ (296, 384, 302, 296) and so do the ponies inside them, so a
   flat percentage sized them by their padding rather than by themselves. Aurora came
   off worst and it showed: widest canvas, smallest percentage, and she rendered 107px
   tall against binky's 158 - the smallest pony on the stage despite being the largest
   drawing. Each width here is (target height x canvas width / body height), so the
   number that stays even is the one you can see.

   Order left to right is arceli, aurora, binky, malt. The small spread that is
   left is depth: the two standing further back sit higher and draw slightly smaller.

   Arceli's 28.3% is annelise's 27.5% carried across: same 366 canvas height, 8px
   wider canvas, so the width has to grow by the same 8/288 to leave the pony drawing
   at the height that was tuned here. */
.pf-ponystage-actor-0 { --pony-left:  0%; --pony-bottom: 26px; --pony-w: 28.3%; --pony-z: 3; }
.pf-ponystage-actor-1 { --pony-left: 19%; --pony-bottom: 50px; --pony-w: 33.5%; --pony-z: 1; }
.pf-ponystage-actor-2 { --pony-left: 45%; --pony-bottom: 20px; --pony-w: 29.5%; --pony-z: 4; }
.pf-ponystage-actor-3 { --pony-left: 68%; --pony-bottom: 58px; --pony-w: 26.5%; --pony-z: 0; }

/* Toward the card. They leave in a ragged line rather than as a block, which is
   what the per-pony delay above is for.

   The distance is bounded by the pony on the right: at 72px malt's shoulder ended up
   eight pixels inside the card, because the travel is added to a resting position that
   already reached the end of the stage. 64px, with the group shifted a little left,
   leaves him clear of it with room to spare. */
.pf-ponystage.is-near .pf-ponystage-actor { transform: translateX(64px); }

/* Every sprite is in the DOM so it is fetched once, but only the current one is
   displayed. display:none rather than opacity, so the other three are not being
   decoded and animated off-screen the whole time somebody is reading the form. */
.pf-ponystage-sprite {
    display: none;
    width: 100%;
    height: auto;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    grid-area: 1 / 1;

    /* Mirrored, because the art faces away from the card and the card is the whole
       point of looking. On the sprite rather than the actor: the actor's transform is
       carrying the walk, and putting both on one element would mean every travel rule
       had to remember to repeat the flip. */
    transform: scaleX(-1);
}

/* Except on the way out, when they are walking left and should be facing left.
   They turn back to the card as they arrive, which is what anybody walking away and
   then stopping would do. No transition: a pony turning round is one frame, and
   easing it would smear the sprite through a vanishing-width flip. */
.pf-ponystage.is-leaving .pf-ponystage-sprite { transform: scaleX(1); }

/* At rest the group turns in on itself: the right-hand two face back down the line,
   so the four of them are dancing with each other rather than four strangers all
   staring the same way. The moment the form gives them something to look at they all
   face the card again, which the rules above already do - this only applies while the
   sprite is the idle dance. */
.pf-ponystage[data-sprite="dance"] .pf-ponystage-actor-2 .pf-ponystage-sprite,
.pf-ponystage[data-sprite="dance"] .pf-ponystage-actor-3 .pf-ponystage-sprite { transform: scaleX(1); }
/* The stage says which sprite is current and the sprites answer to it. */
.pf-ponystage[data-sprite="dance"]    .pf-ponystage-sprite.is-dance,
.pf-ponystage[data-sprite="trot"]     .pf-ponystage-sprite.is-trot,
.pf-ponystage[data-sprite="curious"]  .pf-ponystage-sprite.is-curious,
.pf-ponystage[data-sprite="lookaway"] .pf-ponystage-sprite.is-lookaway { display: block; }

@media (prefers-reduced-motion: reduce) {
    /* The sprites themselves are the content and stay, but nothing travels. */
    .pf-ponystage-actor { transition: none; }
}

.pf-password-toggle { border: 0; padding: 4px 0; background: none; color: var(--mud-palette-primary); font: inherit; cursor: pointer; }
.pf-password-toggle:hover { text-decoration: underline; }
.pf-password-toggle:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 3px; }
.pf-password-field { position: relative; }
.pf-password-field .pf-auth-input { min-width: 0; box-sizing: border-box; padding-right: 46px; }
.pf-password-field .pf-password-toggle { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 9px; }
.pf-password-field .pf-password-toggle:hover { background: var(--mud-palette-action-default-hover); }

/* Narrow: the ponies move above the card and stop acting.

   They used to be hidden here, which left 266px of nothing under a card pinned to the
   top of the screen. The reason for hiding them was weight, and that reason is gone -
   the four states were 27 MB of GIF when that decision was made and are 0.75 MB now.

   Above rather than below, because the dead space was below and a strip of ponies at
   the foot of a form reads as an advert. And dancing only: there is no room up here to
   walk anywhere, and the mood changes would be a pony twitching in place above a
   password box. The state machine still runs, it is simply not watched. */
@media (max-width: 899px) {
    .pf-auth { place-items: center; }

    .pf-login-stage {
        max-width: 420px;
        grid-template-columns: minmax(0, 1fr);
        row-gap: 2px;
    }

    .pf-login-stage > .pf-auth-card { grid-column: 1; grid-row: 2; }

    .pf-ponystage {
        grid-column: 1;
        grid-row: 1;
        max-width: none;
        height: 168px;
    }

    /* Dance, whatever the form is doing. Matched to the specificity of the rules
       above rather than shouted down with !important. */
    .pf-ponystage[data-sprite] .pf-ponystage-sprite.is-trot,
    .pf-ponystage[data-sprite] .pf-ponystage-sprite.is-curious,
    .pf-ponystage[data-sprite] .pf-ponystage-sprite.is-lookaway { display: none; }
    .pf-ponystage[data-sprite] .pf-ponystage-sprite.is-dance { display: block; }

    /* And they stay where they are put. */
    .pf-ponystage.is-near .pf-ponystage-actor { transform: none; }

    /* Facing is fixed here too, and this was the last thing the mood could still
       reach. Travel and sprite were already overridden, but is-leaving kept turning
       them round as the state machine walked them home, so typing a password made
       four dancers spin on the spot above the form. The arrangement below never
       changes at this width: the left pair face right, the right pair face back at
       them, whatever the state machine believes. */
    .pf-ponystage[data-sprite] .pf-ponystage-sprite { transform: scaleX(-1); }
    .pf-ponystage[data-sprite] .pf-ponystage-actor-2 .pf-ponystage-sprite,
    .pf-ponystage[data-sprite] .pf-ponystage-actor-3 .pf-ponystage-sprite { transform: scaleX(1); }

    .pf-ponystage-ground { bottom: 16px; height: 56px; }
}

@media (max-width: 767px) {
    .pf-auth { padding: 12px 10px 20px; overflow-y: auto; }
    .pf-login-stage > .pf-auth-card { padding: 20px; }
}

@media (max-width: 420px) {
    .pf-auth { padding: 0 8px 10px; }
    .pf-login-stage > .pf-auth-card { padding: 10px; }
    .pf-auth-brand { margin-bottom: 6px; }
    .pf-auth-sub { margin-bottom: 8px; }
    .pf-auth-form { gap: 2px; margin-top: 6px; }
    .pf-auth-label { margin-top: 4px; font-size: .78rem; }
    .pf-auth-input { padding: 6px 10px; font-size: .88rem; border-radius: 9px; }
    .pf-password-field .pf-auth-input { padding-right: 42px; }
    .pf-password-field .pf-password-toggle { width: 34px; height: 34px; }
    .pf-auth-hint { font-size: .7rem; line-height: 1.25; }
    .pf-auth-submit { margin-top: 8px; padding: 8px 16px; }
    .pf-auth-alt { margin-top: 6px; }
}

/* --------------------------------------------------------------------------
   Docs / guidelines
   -------------------------------------------------------------------------- */

.pf-doc-alert { margin-bottom: 34px; }
.pf-doc-section { margin-bottom: 38px; scroll-margin-top: 92px; }
.pf-doc-section h5, .pf-doc-section .mud-typography-h5 { font-weight: 800; margin-bottom: 14px; }
.pf-doc-section ul, .pf-doc-section ol { padding-left: 22px; display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px; }
.pf-doc-section li { color: var(--mud-palette-text-secondary); }
.pf-doc-section p, .pf-doc-section .mud-typography-body1 { max-width: var(--pf-maxline); margin-bottom: 14px; }
.pf-doc-footer { padding: 24px; }

/* Homepage ---------------------------------------------------------------------
   A gallery front page, kept friendly: the pitch and two buttons (browse, post) on one
   side, a pinboard of real ponies on the other, then plain sections of real designs. Flat
   colour throughout, with no glows or gradient text: the colour on this page comes from
   the ponies, in their own palettes. */

.pf-home-hero {
    padding-block: 48px 40px;
}

.pf-home-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}

/* Blazor focuses the page's h1 after every navigation so screen readers announce it.
   The focus is kept; only the ring, which no keyboard user put there, is not drawn. */
.pf-home-title:focus { outline: none; }

.pf-home-title {
    margin: 0 0 16px;
    font-size: clamp(2.2rem, 4.6vw, 3.5rem);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -.025em;
    color: var(--mud-palette-text-primary);
}

.pf-home-title span { display: block; text-wrap: balance; }

.pf-home-lede {
    margin: 0 0 26px;
    max-width: 46ch;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--mud-palette-text-secondary);
}

.pf-home-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.pf-home-meta {
    margin: 26px 0 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
}

.pf-home-meta .pf-num { font-size: 1.7rem; line-height: 1; color: var(--mud-palette-text-primary); vertical-align: -.06em; }
.pf-home-meta a { color: var(--mud-palette-primary); font-weight: 800; text-underline-offset: 3px; }

/* Pony of the day. The design sits on its own palette backdrop, the same one its card
   uses, drawn large with its pixels kept sharp; name, creator and colours sit under it. */
.pf-home-potd {
    border-radius: 28px;
    overflow: hidden;
    background: var(--mud-palette-surface);
    box-shadow: 0 14px 34px -18px rgba(36, 29, 61, .35);
}

.pf-home-potd.is-loading {
    aspect-ratio: 5 / 4;
    background: var(--mud-palette-background-gray);
    box-shadow: none;
}

.pf-home-potd-art {
    position: relative;
    display: block;
    aspect-ratio: 16 / 11;
}

/* Scaled up to fill the frame, not just shrunk to fit it: a small sprite otherwise sits
   tiny in a big empty box. Positioned inside the frame rather than in its flow, so a
   tall image can never stretch the card past its shape. Pixelated, so growing it keeps
   every pixel square. */
.pf-home-potd-art img {
    position: absolute;
    inset: 28px;
    width: calc(100% - 56px);
    height: calc(100% - 56px);
    object-fit: contain;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}

.pf-home-potd-art:hover img { transform: scale(1.03); }
.pf-home-potd-art:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: -3px; }

.pf-home-potd-tag {
    position: absolute;
    z-index: 3;
    top: 16px;
    left: 16px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--pf-sun);
    color: var(--mud-palette-text-primary);
    font-size: .8rem;
    font-weight: 800;
    box-shadow: 0 3px 8px -3px rgba(36, 29, 61, .35);
}

.pf-home-potd-info {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
}

.pf-home-potd-name { flex: 1 1 auto; min-width: 0; }
.pf-home-potd-name h2 { margin: 0; font-size: 1.25rem; font-weight: 900; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-home-potd-name h2 a { color: var(--mud-palette-text-primary); text-decoration: none; }
.pf-home-potd-name h2 a:hover { color: var(--mud-palette-primary); }
.pf-home-potd-name p { margin: 2px 0 0; font-size: .9rem; color: var(--mud-palette-text-secondary); }
.pf-home-potd-name p a { color: var(--mud-palette-primary); font-weight: 700; text-decoration: none; }
.pf-home-potd-name p a:hover { text-decoration: underline; }

/* The pinboard: real ponies on cards that are all the same size, on a board in a chunky
   frame. The cards hang at a slight tilt and float a little; pointing at one straightens
   it and lifts it off the board, and it can be picked up and moved - with a mouse by
   dragging, on a phone by pressing and holding (js/pinboard.js). Colour on the cards
   comes from the ponies: each card's art is tinted with its own pony's coat.

   Drawn in the cartoon way whatever it is made of: flat colours, a dark outline round
   the frame and round the board, and a lighter top edge and darker bottom edge on the
   frame so it reads as raised. The material is a modifier class, chosen in Home.razor:
   is-magnet (the one in use) or is-cork (kept for later). Each sets the colours below and
   its own surface. */
.pf-pinboard {
    position: relative;
    aspect-ratio: 5 / 4;
    border-radius: 28px;
    border: 14px solid;
    border-color: var(--pf-frame-top) var(--pf-frame-side) var(--pf-frame-bottom);
    background-color: var(--pf-board);
    box-shadow:
        0 0 0 3px var(--pf-frame-line),
        inset 0 0 0 3px var(--pf-frame-line),
        inset 0 10px 14px -10px var(--pf-board-shade),
        0 18px 34px -18px rgba(36, 29, 61, .45);
}

/* Magnetic whiteboard: a lilac-white enamel surface in a lilac frame, outlined in the
   site's plum ink, so the board belongs to the page instead of standing apart from it.
   The shine is two flat white streaks across the top-left corner - flat shapes in an
   inline SVG, not a gradient. Cards are held by round magnets rather than pins. */
.pf-pinboard.is-magnet {
    --pf-board: #F4F0FF;
    --pf-frame-top: #CBBBFF;
    --pf-frame-side: #B39CFB;
    --pf-frame-bottom: #9A7EF5;
    --pf-frame-line: #241D3D;
    --pf-board-shade: rgba(36, 29, 61, .22);

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 80' preserveAspectRatio='none'%3E%3Cg fill='%23fff'%3E%3Cpolygon points='15,0 27,0 0,31 0,17'/%3E%3Cpolygon points='31,0 35,0 0,40 0,36'/%3E%3Cpolygon points='100,52 100,60 76,80 66,80'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    /* Room underneath for the marker tray and the notes hanging off the bottom edge. Not
       a percentage: in the wrap's grid a percentage margin feeds back into the column
       width, and the board grew past its column. */
    margin-bottom: clamp(44px, 5vw, 64px);
    container-type: inline-size;
}

/* Cork in a wooden frame. The cork is a flat tan with a repeating tile of speckles in
   three tones and the odd old pin hole - a small hand-drawn SVG, inlined so the board
   needs no image request. */
.pf-pinboard.is-cork {
    --pf-board: #E3AF6F;
    --pf-frame-top: #D59255;
    --pf-frame-side: #C27F43;
    --pf-frame-bottom: #A8662F;
    --pf-frame-line: #5E3A1E;
    --pf-board-shade: rgba(78, 42, 14, .45);

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='%23CB8C4C'%3E%3Cellipse cx='9' cy='11' rx='3.2' ry='2.1' transform='rotate(24 9 11)'/%3E%3Cellipse cx='34' cy='6' rx='2.4' ry='1.6' transform='rotate(-30 34 6)'/%3E%3Cellipse cx='61' cy='17' rx='3.6' ry='2.2' transform='rotate(10 61 17)'/%3E%3Cellipse cx='22' cy='38' rx='2.8' ry='1.8' transform='rotate(-15 22 38)'/%3E%3Cellipse cx='48' cy='33' rx='2.2' ry='1.5' transform='rotate(40 48 33)'/%3E%3Cellipse cx='74' cy='44' rx='3' ry='2' transform='rotate(-20 74 44)'/%3E%3Cellipse cx='12' cy='66' rx='3.4' ry='2.2' transform='rotate(18 12 66)'/%3E%3Cellipse cx='41' cy='60' rx='2.6' ry='1.7' transform='rotate(-35 41 60)'/%3E%3Cellipse cx='66' cy='72' rx='3.1' ry='2' transform='rotate(28 66 72)'/%3E%3C/g%3E%3Cg fill='%23F1C88E'%3E%3Cellipse cx='19' cy='22' rx='2.6' ry='1.6' transform='rotate(-20 19 22)'/%3E%3Cellipse cx='50' cy='12' rx='2.2' ry='1.4' transform='rotate(15 50 12)'/%3E%3Cellipse cx='76' cy='27' rx='2.4' ry='1.5' transform='rotate(-40 76 27)'/%3E%3Cellipse cx='35' cy='45' rx='2.8' ry='1.7' transform='rotate(30 35 45)'/%3E%3Cellipse cx='60' cy='52' rx='2.2' ry='1.4' transform='rotate(-10 60 52)'/%3E%3Cellipse cx='26' cy='76' rx='2.5' ry='1.6' transform='rotate(12 26 76)'/%3E%3Cellipse cx='52' cy='78' rx='2' ry='1.3' transform='rotate(-25 52 78)'/%3E%3Cellipse cx='5' cy='47' rx='2.1' ry='1.4' transform='rotate(35 5 47)'/%3E%3C/g%3E%3Cg fill='%23B57338'%3E%3Ccircle cx='28' cy='27' r='1.2'/%3E%3Ccircle cx='70' cy='60' r='1.1'/%3E%3Ccircle cx='8' cy='79' r='1'/%3E%3Ccircle cx='55' cy='43' r='0.9'/%3E%3C/g%3E%3Cg fill='%237E4E26'%3E%3Ccircle cx='44' cy='22' r='1.3'/%3E%3Ccircle cx='17' cy='53' r='1.2'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 84px 84px;
}

.pf-pinboard-pins { list-style: none; margin: 0; padding: 0; }

/* The magnet board's stickers, keychain, notes and tray (MagnetBoardDecor.razor).
   Positions are percentages of the board, like the cards. Things stuck on the frame sit
   above the cards; things on the board itself sit under them. None of it takes a click,
   so a card is always reachable through it. */
.pf-board-decor > * { position: absolute; pointer-events: none; }

.pf-board-sticker {
    z-index: 3;
    overflow: visible;
    filter: drop-shadow(0 2px 1.5px rgba(36, 29, 61, .28));
}

.pf-board-sticker.is-rainbow { left: -5%; top: -6%; width: 15%; transform: rotate(-10deg); }
.pf-board-sticker.is-star    { right: -4.5%; top: 40%; width: 9%; transform: rotate(12deg); }
.pf-board-sticker.is-heart   { right: -3.5%; bottom: -5%; width: 10%; transform: rotate(10deg); }

.pf-board-keychain {
    z-index: 0;
    left: 29%;
    top: .5%;
    width: 5.5%;
    overflow: visible;
    filter: drop-shadow(0 3px 2px rgba(36, 29, 61, .2));
}

/* Swings from the hook's magnet. */
.pf-board-keychain-swing {
    transform-box: view-box;
    transform-origin: 20px 8px;
    animation: pf-keychain-swing 4.6s ease-in-out infinite;
}

@keyframes pf-keychain-swing {
    0%, 100% { transform: rotate(-6deg); }
    50%      { transform: rotate(6deg); }
}

/* Sticky notes: a flat square with a slightly darker glue strip along the top and the
   cartoon outline, written on in violet marker. */
.pf-board-note {
    z-index: 0;
    display: flex;
    flex-direction: column;
    gap: .15em;
    box-sizing: border-box;
    aspect-ratio: 1 / 1;
    padding: 1.3em .6em .6em;
    overflow: hidden;
    border: 2px solid #241D3D;
    border-radius: 3px;
    background: var(--pf-note);
    box-shadow: 0 6px 10px -6px rgba(36, 29, 61, .4);
    color: #5B40D6;
    /* Sized from the board, not the window, so the writing fits the note at any size. */
    font-size: 2cqi;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.pf-board-note::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 16%;
    background: var(--pf-note-glue);
}

.pf-board-note.is-sun  { --pf-note: #FFE58F; --pf-note-glue: #FFD86A; left: -2%; bottom: -15%; width: 19%; transform: rotate(-5deg); }
.pf-board-note.is-mint { --pf-note: #C4F1DC; --pf-note-glue: #A9E8CB; right: 13%; bottom: -12%; width: 11%; transform: rotate(6deg); padding: 1.4em .5em .4em; }
.pf-board-note.is-mint svg { width: 100%; height: 100%; }

.pf-board-note-title { font-size: 1.15em; font-weight: 900; text-decoration: underline wavy; text-underline-offset: .2em; }
/* Hand-drawn boxes in the marker colour, the done one ticked - drawn, not a text glyph,
   so they look the same in every font. */
.pf-board-note-line { display: flex; align-items: center; gap: .35em; }

.pf-board-note-line::before {
    content: "";
    flex: 0 0 auto;
    width: .8em;
    height: .8em;
    box-sizing: border-box;
    border: .14em solid currentColor;
    border-radius: .18em;
}

.pf-board-note-line.is-done::before {
    background: currentColor url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2 L4.2 7.3 L8 2.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

.pf-board-tray {
    z-index: 2;
    left: 24%;
    width: 46%;
    /* Hangs from the bottom of the frame: the frame is 14px deep, and the tray tucks a
       few pixels up under its outline so the two read as one piece. */
    bottom: -11px;
    transform: translateY(100%);
    overflow: visible;
}

/* Magnets instead of pushpins: a bigger, flatter disc in the sticker colour, with the
   plum outline, a darker rim along the bottom and a highlight. Same element and the same
   lift when a card is picked up. */
.pf-pinboard.is-magnet .pf-pin-tack {
    top: -9px;
    width: 22px;
    height: 22px;
    margin-left: -11px;
    box-sizing: border-box;
    border: 2px solid #241D3D;
    box-shadow: inset 0 -4px 0 rgba(36, 29, 61, .18), inset 3px 3px 0 rgba(255, 255, 255, .6), 0 3px 3px rgba(36, 29, 61, .25);
}

.pf-pinboard.is-magnet .pf-pin.is-dragging .pf-pin-tack {
    box-shadow: inset 0 -4px 0 rgba(36, 29, 61, .18), inset 3px 3px 0 rgba(255, 255, 255, .6), 0 10px 10px rgba(36, 29, 61, .22);
}

.pf-pin {
    position: absolute;
    z-index: 1;
    width: 25%;
    animation: pf-pin-float 6s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}

/* The card itself: a white frame round a square of the pony's colour, its name under it,
   and a pushpin at the top. All cards share one size so the board reads as a set. */
.pf-pin-card {
    position: relative;
    display: block;
    padding: 9px 9px 10px;
    border-radius: 16px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    transform: rotate(var(--r, 0deg));
    box-shadow: 0 2px 3px rgba(36, 29, 61, .08), 0 12px 22px -14px rgba(36, 29, 61, .45);
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
    cursor: grab;
    user-select: none;
    -webkit-user-drag: none;
    /* A long press means "pick this card up", not the phone's link and image menu. */
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

/* Being held on a touchscreen, before it lifts: the card presses into the board a little,
   so the wait reads as "keep holding" rather than as nothing happening. */
.pf-pin.is-held .pf-pin-card {
    transform: rotate(var(--r, 0deg)) scale(.96);
    transition: transform .3s ease-out;
}

.pf-pin:hover, .pf-pin.is-dragging, .pf-pin:focus-within { z-index: 50; animation-play-state: paused; }

.pf-pin:hover .pf-pin-card, .pf-pin-card:focus-visible {
    transform: rotate(0deg) translateY(-6px) scale(1.06);
    box-shadow: 0 4px 6px rgba(36, 29, 61, .08), 0 22px 34px -16px rgba(36, 29, 61, .5);
}

.pf-pin.is-dragging { animation: none; }

/* Held: the card lifts, straightens part-way and swings with the pointer's speed
   (--swing, written by js/pinboard.js), and its pin pulls out of the board. On release
   the transition above carries it to its new hang and the pin presses back in. */
.pf-pin.is-dragging .pf-pin-card {
    cursor: grabbing;
    transform: rotate(calc(var(--r, 0deg) * .4 + var(--swing, 0deg))) scale(1.08);
    box-shadow: 0 6px 10px rgba(36, 29, 61, .1), 0 30px 44px -18px rgba(36, 29, 61, .55);
    transition: box-shadow .2s ease;
}

.pf-pin.is-dragging .pf-pin-tack {
    transform: translateY(-9px) scale(1.12);
    box-shadow: inset -2px -3px 0 rgba(36, 29, 61, .16), inset 2px 2px 0 rgba(255, 255, 255, .55), 0 10px 10px rgba(36, 29, 61, .22);
}

/* Arrival: the cards are pinned up one after another the first time the board appears,
   each pressed onto the board and then pinned. Blazor keeps these elements when the board
   is shuffled, so this plays once per visit, never on every change. */
.pf-pin-card {
    animation: pf-pin-in .55s cubic-bezier(.16, 1, .3, 1) backwards;
    animation-delay: calc(var(--i, 0) * 90ms + 60ms);
}

.pf-pin-tack {
    animation: pf-tack-in .3s cubic-bezier(.16, 1, .3, 1) backwards;
    animation-delay: calc(var(--i, 0) * 90ms + 380ms);
}

@keyframes pf-pin-in {
    from { opacity: 0; transform: rotate(var(--r, 0deg)) translateY(-18px) scale(1.05); }
    to   { opacity: 1; transform: rotate(var(--r, 0deg)); }
}

@keyframes pf-tack-in {
    from { opacity: 0; transform: translateY(-10px) scale(1.4); }
    to   { opacity: 1; transform: none; }
}

/* The free spot: a dashed card with its pin already in, waiting for the visitor's pony. */
.pf-pin.is-yours .pf-pin-card {
    background: color-mix(in srgb, var(--mud-palette-surface) 70%, transparent);
    box-shadow: none;
    outline: 2px dashed color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
    outline-offset: -2px;
}

.pf-pin.is-yours .pf-pin-art {
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--mud-palette-primary) 7%, transparent);
    color: var(--mud-palette-primary);
}

.pf-pin.is-yours .pf-pin-art .mud-icon-root { font-size: 2.2rem; }
/* Allowed to wrap: an instruction cut off at "Post your po..." stops being one. */
.pf-pin.is-yours .pf-pin-name { color: var(--mud-palette-primary); white-space: normal; }
.pf-pin.is-yours:hover .pf-pin-card { background: var(--mud-palette-surface); outline-style: solid; }

.pf-pin-card:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 3px; }

/* The pushpin: a round head in one of the sticker colours with a highlight, and a soft
   shadow on the card below it. */
.pf-pin-tack {
    position: absolute;
    top: -7px;
    left: 50%;
    z-index: 2;
    width: 16px;
    height: 16px;
    margin-left: -8px;
    border-radius: 50%;
    background: var(--pin, #FFD25E);
    box-shadow: inset -2px -3px 0 rgba(36, 29, 61, .16), inset 2px 2px 0 rgba(255, 255, 255, .55), 0 3px 4px rgba(36, 29, 61, .28);
    transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease;
}

.pf-pin-art {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    background-color: color-mix(in srgb, var(--pf-coat, #B9A8F5) 20%, #fff);
    overflow: hidden;
}

.pf-pin-art img {
    position: absolute;
    inset: 8%;
    width: 84%;
    height: 84%;
    object-fit: contain;
    object-position: 50% 100%;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    filter: drop-shadow(0 4px 4px rgba(36, 29, 61, .18));
    pointer-events: none;
}

.pf-pin-name, .pf-pin-by {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf-pin-name { margin-top: 7px; font-size: .9rem; font-weight: 900; line-height: 1.25; }
.pf-pin-by { font-size: .74rem; color: var(--mud-palette-text-secondary); }

@keyframes pf-pin-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

.pf-pinboard-wrap { display: grid; gap: 12px; }
.pf-pinboard-wrap .pf-pinboard { width: 100%; box-sizing: border-box; }

.pf-pinboard-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pf-pinboard-hint { font-size: .84rem; font-weight: 700; color: var(--mud-palette-text-secondary); }

/* The hint in the device's own terms: drag with a mouse, hold with a finger. */
.pf-pinboard-hint.is-touch { display: none; }

@media (pointer: coarse) {
    .pf-pinboard-hint.is-fine { display: none; }
    .pf-pinboard-hint.is-touch { display: inline; }
}

.pf-pinboard-shuffle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px 7px 11px;
    border: 0;
    border-radius: 999px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
    font: inherit;
    font-size: .84rem;
    font-weight: 800;
    box-shadow: 0 4px 12px -6px rgba(36, 29, 61, .4);
    cursor: pointer;
    transition: transform .15s ease;
}

.pf-pinboard-shuffle:hover { transform: translateY(-1px); }
.pf-pinboard-shuffle:active { transform: translateY(1px); }
.pf-pinboard-shuffle:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }

.pf-home-potd-swatches { display: flex; gap: 5px; flex: 0 0 auto; }
.pf-home-potd-swatches span {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px rgba(36, 29, 61, .12);
}

/* The Discord invitation. Discord's own blurple rather than the site's violet: the colour
   is half of how people recognise a Discord link, and the two sit close enough not to
   fight. Everything Discord on the site shares --pf-discord. */
:root { --pf-discord: #5865F2; --pf-discord-dark: #4752C4; }

.pf-home-discord {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 28px;
    align-items: center;
    margin: 8px 0 40px;
    padding: 26px 32px;
    border-radius: 28px;
    background: var(--pf-discord);
    color: #fff;
    box-shadow: 0 18px 34px -20px rgba(71, 82, 196, .7);
}

/* The card's own pony, the same size and treatment as sit_boop on the support card. */
.pf-home-discord-pony {
    width: 104px;
    height: auto;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.pf-home-discord-copy h2 { margin: 0 0 6px; font-size: 1.4rem; font-weight: 900; letter-spacing: -.015em; }
.pf-home-discord-copy p { margin: 0; max-width: 56ch; line-height: 1.6; color: rgba(255, 255, 255, .88); }

.pf-home-discord-join {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 999px;
    background: #fff;
    color: var(--pf-discord-dark);
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 6px 14px -6px rgba(36, 29, 61, .45);
    transition: transform .15s ease, box-shadow .15s ease;
}

.pf-home-discord-join:hover { transform: translateY(-2px); box-shadow: 0 10px 18px -8px rgba(36, 29, 61, .5); }
.pf-home-discord-join:active { transform: translateY(0); }
.pf-home-discord-join:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@media (max-width: 960px) {
    .pf-home-discord { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 26px 22px; gap: 18px; }
}

/* The small Discord pill, in the footer. It sat in the app bar too, beside "Post a skin",
   and was taken out: on every page, next to the site's own action, it read as pleading.
   The homepage card and the menu row do the inviting instead. */
.pf-discord-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 16px 0 13px;
    margin-right: 10px;
    box-sizing: border-box;
    border-radius: 999px;
    background: var(--pf-discord);
    color: #fff;
    font-size: .875rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, transform .15s ease;
}

.pf-discord-btn:hover { background: var(--pf-discord-dark); transform: translateY(-1px); }
.pf-discord-btn:focus-visible { outline: 3px solid var(--pf-discord); outline-offset: 2px; }

.pf-footer-discord { margin: 14px 0 0; align-self: flex-start; }

/* In the phone menu, styled as one of its rows but in Discord's colour. */
.pf-nav-discord {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 6px 12px 0;
    padding: 9px 14px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--pf-discord) 10%, transparent);
    color: var(--pf-discord-dark);
    font-weight: 800;
    text-decoration: none;
}

.pf-nav-discord:hover { background: color-mix(in srgb, var(--pf-discord) 16%, transparent); }

@media (max-width: 520px) {
    .pf-home-discord-pony { width: 88px; }
    .pf-home-discord-join { width: 100%; justify-content: center; box-sizing: border-box; }
}

/* Featured, top artists and the rest keep the shared section styles; the artists sit
   in a soft panel rather than a full-width grey band. */
.pf-home-panel {
    padding: 36px clamp(18px, 3vw, 36px) 40px;
    border-radius: 28px;
    background: var(--mud-palette-background-gray);
}

.pf-home-close { padding-bottom: 64px; }

/* The hero already has its own bottom space; the first section should not add a second. */
.pf-section.pf-home-first { padding-top: 16px; }

/* Six featured picks as two full rows of three, with the ponies a size up. */
@media (min-width: 900px) {
    .pf-grid-skins.pf-home-featured { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.pf-home-support {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 28px;
    align-items: center;
    padding: 28px 32px;
    border-radius: 28px;
    background: var(--mud-palette-surface);
    border: 2px solid color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
}

.pf-home-support-pony {
    width: 104px;
    height: auto;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.pf-home-support-copy h2 { margin: 0 0 6px; font-size: 1.4rem; font-weight: 900; letter-spacing: -.015em; }
.pf-home-support-copy p { margin: 0; max-width: 56ch; line-height: 1.6; color: var(--mud-palette-text-secondary); }
.pf-home-support-actions { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }

@media (max-width: 960px) {
    .pf-home-hero { padding-block: 20px 24px; }
    .pf-home-hero-inner { grid-template-columns: 1fr; gap: 28px; }
    .pf-home-potd, .pf-pinboard { border-radius: 22px; }
    .pf-home-support { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 26px 22px; }
    .pf-home-support-actions { align-items: center; }
}

@media (max-width: 520px) {
    .pf-home-potd-art img { inset: 18px; width: calc(100% - 36px); height: calc(100% - 36px); }
    .pf-home-potd-info { flex-wrap: wrap; padding: 16px 18px; }
    .pf-home-potd-info .mud-button-root { width: 100%; }
    .pf-home-actions .mud-button-root { flex: 1 1 auto; }

    /* Square on a phone so two rows of cards fit; the cards and their pins scale down. */
    .pf-pinboard { aspect-ratio: 1 / 1; border-width: 10px; }
    .pf-pinboard.is-cork { background-size: 64px 64px; }
    .pf-pin { width: 30%; }
    .pf-pin-card { padding: 6px 6px 7px; border-radius: 12px; }
    .pf-pin-name { margin-top: 5px; font-size: .76rem; }
    .pf-pin-by { font-size: .66rem; }
    .pf-pin-tack { width: 13px; height: 13px; margin-left: -6.5px; top: -6px; }
    .pf-pinboard.is-magnet .pf-pin-tack { width: 17px; height: 17px; margin-left: -8.5px; top: -7px; }
    .pf-pinboard-shuffle { padding: 6px 12px 6px 9px; font-size: .78rem; }

    /* On a phone the board is mostly cards, and writing that small is not readable, so the
       notes and the side sticker go; the corner stickers, keychain and tray stay. The
       corner stickers tuck in so nothing pokes past the page gutter. */
    .pf-board-note, .pf-board-sticker.is-star { display: none; }
    .pf-board-sticker.is-rainbow { left: -3%; top: -4%; width: 18%; }
    .pf-board-sticker.is-heart { right: -2.5%; bottom: -7%; width: 11%; }
    .pf-board-keychain { width: 7%; }
    .pf-board-tray { left: 20%; width: 60%; bottom: -8px; }
    .pf-pinboard.is-magnet { margin-bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .pf-home-potd-art img, .pf-pinboard-shuffle { transition: none; }
    .pf-pin, .pf-pin-card, .pf-pin-tack, .pf-board-keychain-swing { animation: none; }

    /* The hover and pick-up still show, as state rather than movement: no lift, just the
       card standing straight and the shadow deepening. */
    .pf-pin-card, .pf-pin-tack { transition: box-shadow .15s ease; }
    .pf-pin:hover .pf-pin-card, .pf-pin-card:focus-visible { transform: rotate(0deg); }

    /* The touch hold's dip is movement too; the lift that follows still shows. */
    .pf-pin.is-held .pf-pin-card { transform: rotate(var(--r, 0deg)); transition: none; }
}

/* Extension page ---------------------------------------------------------------
   The hero is the product: real sheets, stacked like the files that land in your
   downloads, each tagged with the filename it saves under. The header gradient on the
   sheets is the extension's own, so the page borrows it rather than inventing another. */

.pf-ext-hero {
    position: relative;
    overflow: hidden;
    padding-block: 56px 64px;
    background:
        radial-gradient(60% 80% at 85% 20%, color-mix(in srgb, #FF6FA5 16%, transparent), transparent 70%),
        radial-gradient(50% 70% at 10% 0%, color-mix(in srgb, #7A5AF8 14%, transparent), transparent 70%);
}

.pf-ext-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 48px;
    align-items: center;
}

.pf-ext-beta {
    display: inline-block;
    margin-bottom: 18px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1.5px dashed var(--mud-palette-warning);
    color: var(--mud-palette-warning-darken);
    background: color-mix(in srgb, var(--mud-palette-warning) 8%, var(--mud-palette-surface));
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.pf-ext-title {
    margin: 0 0 16px;
    font-size: clamp(2rem, 4.2vw, 3.1rem);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -.02em;
}

.pf-ext-lede {
    margin: 0;
    max-width: 46ch;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--mud-palette-text-secondary);
}

.pf-ext-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 28px; }
.pf-ext-cta-note { font-size: .86rem; color: var(--mud-palette-text-secondary); }

.pf-ext-stack {
    position: relative;
    margin: 0;
    padding: 18px 8px 0 40px;
}

.pf-ext-sheet {
    position: relative;
    border-radius: 14px;
    background: var(--mud-palette-surface);
    box-shadow: var(--pf-shadow-hover);
    transition: transform .25s ease;
}

.pf-ext-sheet img { display: block; width: 100%; height: auto; border-radius: 14px; }

.pf-ext-sheet.is-back {
    position: absolute;
    inset: 0 48px auto 0;
    transform: rotate(-5deg) translateY(-6px);
    opacity: .9;
}

.pf-ext-sheet.is-front { transform: rotate(1.5deg); }
.pf-ext-stack:hover .pf-ext-sheet.is-front { transform: rotate(0deg) translateY(-4px); }
.pf-ext-stack:hover .pf-ext-sheet.is-back { transform: rotate(-7deg) translate(-8px, -8px); }

/* The filename, as the file is actually saved - the label of a download, not a caption. */
.pf-ext-file {
    position: absolute;
    left: 14px;
    bottom: -13px;
    padding: 4px 10px;
    border-radius: 8px;
    background: var(--mud-palette-text-primary);
    color: var(--mud-palette-surface);
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .74rem;
    font-weight: 600;
}

.pf-ext-sheet.is-back .pf-ext-file { top: -12px; bottom: auto; left: auto; right: 14px; }

.pf-ext-stack figcaption {
    margin-top: 30px;
    font-size: .84rem;
    color: var(--mud-palette-text-secondary);
}

.pf-ext-body { padding-top: 40px; }

.pf-ext-notice {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 48px;
    padding: 18px 20px;
    border-radius: 16px;
    border: 1.5px dashed var(--mud-palette-warning);
    background: color-mix(in srgb, var(--mud-palette-warning) 7%, var(--mud-palette-surface));
}

.pf-ext-notice > .mud-icon-root { color: var(--mud-palette-warning); flex: 0 0 auto; margin-top: 2px; }

/* The store notice: information, not a warning, so the site's violet rather than amber.
   Sits directly above the warning, so the gap between the two is smaller. */
.pf-ext-notice.is-store {
    margin-bottom: 14px;
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface));
}

.pf-ext-notice.is-store > .mud-icon-root { color: var(--mud-palette-primary); }
.pf-ext-notice code { padding: 1px 6px; border-radius: 6px; background: var(--mud-palette-background-gray); font-size: .88em; }
.pf-ext-notice strong { display: block; margin-bottom: 4px; }
.pf-ext-notice p { margin: 0; line-height: 1.6; color: var(--mud-palette-text-secondary); }
.pf-ext-notice a, .pf-ext-section a { color: var(--mud-palette-primary); font-weight: 700; }

.pf-ext-section { margin-bottom: 52px; scroll-margin-top: 92px; }
.pf-ext-section h2 { margin: 0 0 16px; font-size: 1.5rem; font-weight: 800; }
.pf-ext-section h3 { margin: 0 0 10px; font-size: 1rem; font-weight: 800; }
.pf-ext-section p { max-width: var(--pf-maxline); line-height: 1.65; margin: 0 0 14px; }

/* Numbered because it is a sequence: install, open, click, post. The numbers use the
   pixel face the site keeps for numbers that mean something. */
.pf-ext-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 18px; }

.pf-ext-steps li {
    counter-increment: step;
    position: relative;
    padding-left: 56px;
    line-height: 1.6;
    color: var(--mud-palette-text-secondary);
}

.pf-ext-steps li > strong:first-child { display: block; color: var(--mud-palette-text-primary); font-size: 1.05rem; }

.pf-ext-steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: -4px;
    width: 40px;
    font-family: "Jersey 15", ui-monospace, monospace;
    font-size: 2.4rem;
    line-height: 1;
    text-align: center;
    color: var(--mud-palette-primary);
    text-shadow: 2px 2px 0 color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
}

.pf-ext-aside { display: block; margin-top: 6px; font-size: .88rem; }

.pf-ext-steps code, .pf-ext-section code {
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--mud-palette-background-gray);
    font-size: .88em;
}

.pf-ext-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 6px 0 20px;
}

.pf-ext-compare > div {
    padding: 18px 20px;
    border-radius: 16px;
    background: var(--mud-palette-surface);
    box-shadow: var(--pf-shadow);
}

.pf-ext-compare ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.pf-ext-compare li {
    position: relative;
    padding-left: 26px;
    font-size: .94rem;
    line-height: 1.5;
}

.pf-ext-compare li::before {
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 900;
}

.pf-ext-compare .is-yes li::before { content: "✓"; color: var(--mud-palette-success); }
.pf-ext-compare .is-no li::before { content: "✕"; color: var(--mud-palette-error); }

/* Facts about a style, not a verdict on it, so a plain dot rather than a tick or cross. */
.pf-ext-compare .is-plain li::before { content: "•"; color: var(--mud-palette-primary); }
.pf-ext-compare .is-plain li { color: var(--mud-palette-text-secondary); }

/* What changed in this version: a short list, each item led by its name in bold. */
.pf-ext-list { margin: 0 0 18px; padding-left: 20px; display: grid; gap: 8px; max-width: var(--pf-maxline); }
.pf-ext-list li { line-height: 1.6; color: var(--mud-palette-text-secondary); }
.pf-ext-list li::marker { color: var(--mud-palette-primary); }
.pf-ext-list strong { color: var(--mud-palette-text-primary); }

/* For people on an older copy. A tinted panel so it is found by the people it is for
   without competing with the warning above. */
.pf-ext-section p.pf-ext-update {
    margin: 0;
    padding: 14px 18px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface));
    color: var(--mud-palette-text-secondary);
}

.pf-ext-update strong { color: var(--mud-palette-text-primary); }

@media (max-width: 900px) {
    .pf-ext-hero { padding-block: 36px 48px; }
    .pf-ext-hero-inner { grid-template-columns: 1fr; gap: 40px; }
    .pf-ext-stack { padding-left: 24px; }
    .pf-ext-compare { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .pf-ext-sheet { transition: none; }
}

/* About page ------------------------------------------------------------------
   What Ponyfolio is, video tutorials and the changelog. Quiet everywhere except the
   changelog, which reads like a game's patch notes: each date a pixel-numeral stamp,
   pinned to a rail with a dot in one of the sticker colours. */

/* Every large card and panel on the page shares this one corner; pills stay pills. */
.pf-about-hero, .pf-about-body { --pf-about-radius: 20px; }

.pf-about-hero { padding-block: 52px 0; }

.pf-about-eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    padding: 4px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface));
    color: var(--mud-palette-primary);
    font-size: .8rem;
    font-weight: 800;
}

.pf-about-title {
    margin: 0 0 16px;
    /* Kept to two lines rather than one long one across the page. */
    max-width: 700px;
    font-size: clamp(2rem, 3.4vw, 2.9rem);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -.025em;
    text-wrap: balance;
}

.pf-about-lede {
    max-width: 52ch;
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--mud-palette-text-secondary);
}

.pf-about-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }

.pf-about-jump a {
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--mud-palette-surface);
    box-shadow: var(--pf-shadow);
    color: var(--mud-palette-text-primary);
    font-size: .88rem;
    font-weight: 800;
    text-decoration: none;
}

.pf-about-jump a:hover { color: var(--mud-palette-primary); }
.pf-about-jump a:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }

/* Top padding matches the gap between sections, so the first section sits as far from
   the hero as every section sits from the next; the bottom leaves the last section's own
   margin to do the work rather than doubling it before the footer. */
.pf-about-body { padding-block: 64px 0; }

.pf-about-section { margin-bottom: 64px; scroll-margin-top: 88px; }

/* One width for the whole page, the hero included, so every block shares the same left
   and right edges. The timeline is the one exception: a single column of cards that wide
   would make each line of text too long to read, so it keeps to a reading width, and as
   a list hanging off a rail it reads as deliberate rather than short. Paragraphs inside
   the wide blocks are held to a reading measure by their own max-width. */
.pf-patchnotes { max-width: 960px; }
.pf-about-section > h2 { margin: 0 0 18px; font-size: 1.6rem; font-weight: 900; letter-spacing: -.015em; }
.pf-about-section a { color: var(--mud-palette-primary); font-weight: 700; }
.pf-about-intro { margin: -8px 0 22px; color: var(--mud-palette-text-secondary); }

/* Mission and vision: two cards side by side. The header band holds the title and a
   pony peeking up over the band's bottom edge, its shoulders resting on the line; the
   body below holds the words. The vision card is mirrored, pony on the right. */
.pf-mv {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.pf-mv-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--pf-about-radius);
    background: var(--mud-palette-surface);
    box-shadow: var(--pf-shadow);
}

.pf-mv-head {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 14px 24px 0;
    border-bottom: 3px solid color-mix(in srgb, var(--mud-palette-primary) 28%, transparent);
    background: color-mix(in srgb, var(--mud-palette-primary) 9%, var(--mud-palette-surface));
}

.pf-mv-card:nth-child(even) .pf-mv-head { flex-direction: row-reverse; }

/* A window onto the pony, from just above its head down to its shoulders, with no frame:
   the band behind it is the frame, and its bottom edge is where the shoulders stop. The
   image is the full 400px square, slid so the window lands on the pony (--crop-x and
   --crop-y, in the image's own pixels). --s scales it all: 1.25 on desktop,
   three-quarters on a phone. The art is drawn in 4px blocks, so both land every block on
   whole pixels (5px, 3px) and it stays crisp. */
.pf-mv-portrait {
    --s: 1.25;
    position: relative;
    flex: 0 0 auto;
    width: calc(180px * var(--s));
    height: calc(148px * var(--s));
    overflow: hidden;
}

.pf-mv-portrait img {
    position: absolute;
    left: calc(var(--crop-x) * -1px * var(--s));
    top: calc(var(--crop-y) * -1px * var(--s));
    width: calc(400px * var(--s));
    height: calc(400px * var(--s));
    max-width: none;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* The title in the site's pixel face, the one kept for numbers that mean something -
   used here as a deliberate exception, because pixel lettering beside pixel ponies is
   the most Pony Town thing the page can say. Same offset shadow as the step numbers. */
.pf-mv-label {
    flex: 1 1 auto;
    align-self: center;
    margin: 0;
    padding-bottom: 6px;
    font-family: "Jersey 15", ui-monospace, monospace;
    /* Larger in px than the page title, but not to the eye: the pixel face draws far
       smaller than Nunito at the same size (short letters, wide spacing), so this is
       what it takes to read as a display title at all. Checked side by side, it still
       sits below the page title. */
    font-size: clamp(2.6rem, 4.2vw, 3.3rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: .04em;
    text-align: center;
    color: var(--mud-palette-primary);
    text-shadow: 3px 3px 0 color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
}

.pf-mv-body { padding: 20px 26px 24px; }
.pf-mv-body p { margin: 0 0 10px; font-size: 1.02rem; line-height: 1.65; }
.pf-mv-body p:last-child { margin-bottom: 0; }

/* Narrower cards side by side: back to 1x, so the pony and the title still share the
   header band without squeezing. */
@media (max-width: 1100px) {
    .pf-mv-portrait { --s: 1; }
}

@media (max-width: 860px) {
    .pf-mv { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
    .pf-mv-portrait { --s: .75; }
    .pf-mv-head { padding: 10px 16px 0; }
    .pf-mv-body { padding: 16px 20px 20px; }
}

/* What you can do: four short blocks, each with its icon on a sticker-coloured chip. */
.pf-about-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.pf-about-do {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px 20px;
    border-radius: var(--pf-about-radius);
    background: var(--mud-palette-surface);
    box-shadow: var(--pf-shadow);
}

.pf-about-do.is-wide { grid-column: 1 / -1; }

.pf-about-do-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--pf-do);
    color: #241D3D;
}

.pf-about-do h3 { margin: 0 0 4px; font-size: 1.02rem; font-weight: 800; }
.pf-about-do p { margin: 0 0 8px; font-size: .94rem; line-height: 1.55; color: var(--mud-palette-text-secondary); }
.pf-about-do a { font-size: .9rem; text-decoration: none; }
.pf-about-do a:hover { text-decoration: underline; }

.pf-about-who {
    margin-top: 18px;
    padding: 18px 20px;
    border-radius: var(--pf-about-radius);
    background: var(--mud-palette-background-gray);
}

.pf-about-who h3 { margin: 0 0 6px; font-size: 1.02rem; font-weight: 800; }
.pf-about-who p { margin: 0; max-width: var(--pf-maxline); line-height: 1.6; color: var(--mud-palette-text-secondary); }

/* Tutorials, and what stands in for them until there are some. */
.pf-about-videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.pf-about-video h3 { margin: 12px 0 4px; font-size: 1.02rem; font-weight: 800; }
.pf-about-video p { margin: 0; font-size: .94rem; line-height: 1.55; color: var(--mud-palette-text-secondary); }

.pf-about-empty {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 20px 22px;
    border: 1.5px dashed var(--mud-palette-lines-default);
    border-radius: var(--pf-about-radius);
    background: var(--mud-palette-surface);
}

.pf-about-empty > .mud-icon-root { flex: 0 0 auto; color: #FF0033; }
.pf-about-empty strong { display: block; margin-bottom: 4px; }
.pf-about-empty p { margin: 0; max-width: var(--pf-maxline); line-height: 1.6; color: var(--mud-palette-text-secondary); }

/* The patch notes. A rail down the left; each release has its date stamped beside it in
   the pixel numerals and a pin on the rail in a sticker colour. Ordered, because it is a
   timeline: the order is the information. */
.pf-patchnotes { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }

.pf-patchnotes::before {
    content: "";
    position: absolute;
    left: 86px;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
}

.pf-patch {
    position: relative;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 34px;
    align-items: start;
}

/* The pin on the rail, level with the card's heading. */
.pf-patch::before {
    content: "";
    position: absolute;
    left: 80px;
    top: 16px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--pf-pin);
    box-shadow: 0 0 0 4px var(--mud-palette-background), inset -2px -2px 0 rgba(36, 29, 61, .15);
}

.pf-patch-date { display: grid; justify-items: end; text-align: right; line-height: 1; }

.pf-patch-date .pf-num {
    font-size: 2.6rem;
    color: var(--mud-palette-primary);
    text-shadow: 2px 2px 0 color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
}

.pf-patch-month {
    margin-top: 4px;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.pf-patch-card {
    padding: 16px 20px 18px;
    border-radius: var(--pf-about-radius);
    background: var(--mud-palette-surface);
    box-shadow: var(--pf-shadow);
}

.pf-patch-card h3 { margin: 0 0 8px; font-size: 1.05rem; font-weight: 800; }
.pf-patch-card ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.pf-patch-card li { line-height: 1.55; color: var(--mud-palette-text-secondary); }
/* Plain bullets: the pin on the rail already carries the release's colour. */
.pf-patch-card li::marker { color: var(--mud-palette-text-disabled); }

.pf-patch-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 18px 0 0 106px;
    padding: 8px 16px 8px 12px;
    border: 0;
    border-radius: 999px;
    background: var(--mud-palette-surface);
    box-shadow: var(--pf-shadow);
    color: var(--mud-palette-primary);
    font: inherit;
    font-size: .9rem;
    font-weight: 800;
    cursor: pointer;
}

.pf-patch-more:hover { transform: translateY(-1px); }
.pf-patch-more:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }

@media (max-width: 720px) {
    .pf-about-dos, .pf-about-videos { grid-template-columns: 1fr; }
}

/* On a phone the date sits above its card, and the rail and pins move to the card's
   left edge so the cards keep the full width. */
@media (max-width: 520px) {
    .pf-about-hero { padding-top: 32px; }
    .pf-patch-more { margin-left: 0; }

    .pf-patchnotes { padding-left: 22px; }
    .pf-patchnotes::before { left: 6px; }
    .pf-patch { grid-template-columns: 1fr; gap: 8px; }
    .pf-patch::before { left: -22px; top: 6px; }
    .pf-patch-date { display: flex; align-items: baseline; gap: 8px; justify-items: start; text-align: left; }
    .pf-patch-date .pf-num { font-size: 2rem; }
}

/* Moderation ------------------------------------------------------------------ */

.pf-mod-head { display: flex; align-items: baseline; gap: 10px; margin: 32px 0 14px; font-weight: 800; }
.pf-mod-head .pf-num { font-size: 1.5rem; color: var(--mud-palette-primary); }
.pf-mod-row { display: flex; gap: 14px; align-items: flex-start; }
.pf-mod-thumb {
    flex: 0 0 64px;
    height: 64px;
    border-radius: 12px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
}
.pf-mod-thumb img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.pf-mod-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.pf-mod-reason {
    margin-top: 6px !important;
    padding: 6px 10px;
    border-radius: 8px;
    border-left: 3px solid var(--mud-palette-warning);
    background: color-mix(in srgb, var(--mud-palette-warning) 8%, var(--mud-palette-surface));
}
.pf-mod-item .pf-verify-actions { margin-top: 14px; }

/* Legal documents -----------------------------------------------------------
   Terms and privacy share one frame: a switch between the documents, a sticky
   numbered contents list, and sections that open with a one-line "In short".
   The section numbers are pixel numerals because they are addresses people quote
   ("section 5"), which is the one kind of number the pixel face is kept for. */

.pf-legal-switch {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    margin-bottom: 28px;
    border-radius: 999px;
    background: var(--mud-palette-background-gray);
}

.pf-legal-switch a {
    padding: 7px 16px;
    border-radius: 999px;
    font-size: .88rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.pf-legal-switch a:hover { color: var(--mud-palette-text-primary); }

.pf-legal-switch a.is-on {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
    box-shadow: var(--pf-shadow);
}

.pf-legal-switch a:focus-visible,
.pf-legal-toc a:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.pf-legal-head { max-width: 760px; margin-bottom: 44px; }

.pf-legal-date {
    margin: 6px 0 18px;
    font-size: .9rem;
    color: var(--mud-palette-text-secondary);
}

.pf-legal-intro p {
    font-size: 1.12rem;
    line-height: 1.6;
    max-width: var(--pf-maxline);
    margin: 0;
}

.pf-legal-body {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}

.pf-legal-toc {
    position: sticky;
    top: calc(var(--mud-appbar-height, 68px) + 24px);
}

.pf-legal-toc-head {
    margin: 0 0 10px;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.pf-legal-toc ol { list-style: none; margin: 0; padding: 0; }

.pf-legal-toc a {
    display: grid;
    grid-template-columns: 26px 1fr;
    align-items: baseline;
    padding: 5px 8px;
    border-radius: 8px;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
}

.pf-legal-toc a:hover {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}

.pf-legal-toc .pf-num { font-size: 1.1rem; color: var(--mud-palette-primary); }

.pf-legal-text { max-width: 720px; }

.pf-legal-section {
    padding-bottom: 36px;
    margin-bottom: 36px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    scroll-margin-top: calc(var(--mud-appbar-height, 68px) + 24px);
}

.pf-legal-h {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 0 0 14px;
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.25;
}

.pf-legal-n {
    flex: 0 0 auto;
    min-width: 1.4ch;
    font-size: 2.4rem;
    line-height: 1;
    color: var(--mud-palette-primary);
    text-shadow: 2px 2px 0 color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
}

/* The line people who read nothing else still read. */
.pf-legal-short {
    margin: 0 0 18px;
    padding: 12px 16px;
    border-radius: 12px;
    border-left: 4px solid var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface));
    font-weight: 700;
    line-height: 1.5;
}

.pf-legal-short span {
    display: block;
    margin-bottom: 2px;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mud-palette-primary);
}

.pf-legal-prose { line-height: 1.65; color: var(--mud-palette-text-primary); }
.pf-legal-prose p { margin: 0 0 14px; }
.pf-legal-alert { margin-top: 20px; max-width: var(--pf-maxline); }
.pf-legal-prose ul, .pf-legal-prose ol { padding-left: 22px; margin: 0 0 14px; display: flex; flex-direction: column; gap: 8px; }
.pf-legal-prose a, .pf-legal-contact a { color: var(--mud-palette-primary); font-weight: 700; }

.pf-legal-list { margin: 0 0 14px; }
.pf-legal-list dt { font-weight: 800; margin-top: 14px; }
.pf-legal-list dt:first-child { margin-top: 0; }
.pf-legal-list dd { margin: 2px 0 0; color: var(--mud-palette-text-secondary); }

.pf-legal-contact {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 22px 24px;
}

/* One column on tablets and phones: the contents list becomes a wrapped row of
   numbered chips above the text instead of a sidebar nobody can see. */
@media (max-width: 900px) {
    .pf-legal-body { grid-template-columns: 1fr; gap: 28px; }
    .pf-legal-toc { position: static; }
    .pf-legal-toc ol { display: flex; flex-wrap: wrap; gap: 6px; }
    .pf-legal-toc a {
        display: inline-flex;
        gap: 6px;
        padding: 5px 12px;
        border-radius: 999px;
        background: var(--mud-palette-background-gray);
        font-size: .82rem;
    }
    .pf-legal-h { font-size: 1.25rem; }
    .pf-legal-n { font-size: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
    .pf-legal-switch a { transition: none; }
}

/* Not found ---------------------------------------------------------------- */

.pf-notfound { text-align: center; display: flex; flex-direction: column; align-items: center; padding-block: 90px; }
.pf-notfound-art { width: 200px; margin-bottom: 26px; opacity: .85; }
.pf-notfound-text { max-width: 44ch; margin-top: 10px; }
.pf-notfound-cta { justify-content: center; }

/* --------------------------------------------------------------------------
   Values / CTA band
   -------------------------------------------------------------------------- */

.pf-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.pf-value { padding: 26px; display: flex; flex-direction: column; gap: 8px; }

.pf-value-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    margin-bottom: 8px;
    color: var(--pf-value-accent);
    background: color-mix(in srgb, var(--pf-value-accent) 14%, transparent);
}

.pf-cta-band {
    padding-block: 68px;
    text-align: center;
    border-top-width: 1px; border-top-style: solid; border-top-color: var(--mud-palette-divider);
    background:
        radial-gradient(800px 300px at 50% 120%, var(--mud-palette-secondary-hover), transparent 65%),
        var(--mud-palette-background-gray);
}

.pf-cta-title { font-weight: 800; letter-spacing: -.025em; margin-bottom: 14px; }
.pf-cta-sub { color: var(--mud-palette-text-secondary); max-width: 58ch; margin: 0 auto; }
.pf-cta-buttons { justify-content: center; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

/* margin-top:auto is what actually pins it: as the last flex item in .pf-main it eats
   the leftover height, so a short page pushes the footer to the bottom of the window
   rather than leaving it stranded mid-screen. flex-shrink:0 stops a tall page from
   squeezing the footer itself. */
.pf-footer {
    margin-top: auto;
    flex-shrink: 0;
    padding-block: 52px 32px;
    border-top-width: 1px; border-top-style: solid; border-top-color: var(--mud-palette-divider);
    background: var(--mud-palette-surface);
}

.pf-footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: 32px;
    margin-bottom: 32px;
}

.pf-footer-blurb { margin-top: 14px; max-width: 46ch; }
.pf-footer-head { margin-bottom: 12px; }
.pf-footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }

.pf-footer-col a {
    font-size: .88rem;
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
}

.pf-footer-col a:hover { color: var(--mud-palette-primary); }
.pf-footer-divider { margin-bottom: 20px; }
.pf-footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.pf-footer-legal { display: flex; gap: 18px; flex-wrap: wrap; }
.pf-footer-legal a { font-size: .78rem; font-weight: 600; color: var(--mud-palette-text-secondary); text-decoration: none; }
.pf-footer-legal a:hover { color: var(--mud-palette-primary); text-decoration: underline; }

/* The small print under a form or a payment button. */
.pf-agree { margin-top: 12px; font-size: .8rem; line-height: 1.5; color: var(--mud-palette-text-secondary); }
.pf-agree a { color: var(--mud-palette-primary); font-weight: 700; }
.pf-plans-agree { text-align: center; margin: 18px auto 0; max-width: 60ch; }

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

@media (max-width: 1279px) {
    .pf-detail,
    .pf-commission-layout,
    .pf-upload,
    .pf-dash { grid-template-columns: minmax(0, 1fr); }

    .pf-detail-side,
    .pf-commission-side,
    .pf-dash-side,
    .pf-sticky { position: static; }

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

@media (max-width: 1023px) {
    .pf-only-mobile { display: inline-flex !important; }
    .pf-only-desktop { display: none !important; }

    .pf-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .pf-section { padding-block: 40px; }

    .pf-profile-banner { height: 150px; }

    .pf-profile-head {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .pf-profile-avatar { margin-top: -60px; }

    .pf-profile-avatar { width: 104px; height: 104px; padding: 0; }
    .pf-profile-cta { align-items: flex-start; }

    .pf-footer-grid { grid-template-columns: minmax(0, 1fr); }
    .pf-detail-art { padding: 24px; }
    .pf-commission-head { flex-wrap: wrap; }
    .pf-commission-price { text-align: left; }
    .pf-notfound { padding-block: 56px; }
}

/* Sprite avatars ----------------------------------------------------------- */

.pf-avatar-img {
    display: block;
    width: 100%;
    height: 100%;
    /* cover, not contain: uploads are cropped to the frame's shape already, so
       letterboxing only exposed the image's own edges inside the ring. */
    object-fit: cover;
    /* Smooth scaling. pixelated suited raw pony sprites, but it is what made
       cropped avatars look coarse. Sprites opt back in via .pf-pixel. */
    image-rendering: auto;
}

.pf-pixel { image-rendering: pixelated; }

.pf-brand-mark { color: #fff; }
.pf-brand-mark svg { width: 25px; height: 25px; }

.pf-notfound-art .pf-avatar-img { height: auto; }
/* ==========================================================================
   Settings, management screens, dialogs and the commission board
   ========================================================================== */

/* Settings shell ----------------------------------------------------------- */

.pf-settings-shell {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.pf-settings-nav {
    position: sticky;
    top: calc(var(--mud-appbar-height, 68px) + 24px);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pf-settings-navlink {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--mud-palette-text-secondary);
}

.pf-settings-navlink:hover {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}

.pf-settings-navlink.is-active {
    color: var(--mud-palette-primary);
    background: var(--mud-palette-primary-hover);
}

.pf-settings-body { min-width: 0; }
.pf-settings-stack { display: flex; flex-direction: column; gap: 20px; }

.pf-settings-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 24px;
    align-items: start;
}

.pf-settings-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.pf-settings-side { min-width: 0; }

.pf-switch-list { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }

.pf-sticky-save {
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding: 14px 16px;
    margin-top: 4px;
    border-radius: var(--pf-radius);
    background: var(--mud-palette-surface);
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
    box-shadow: var(--pf-shadow-hover);
}

/* Segmented control -------------------------------------------------------- */

.pf-seg {
    display: inline-flex;
    padding: 4px;
    gap: 3px;
    border-radius: 999px;
    background: var(--mud-palette-background-gray);
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
}

.pf-seg-wide { display: flex; width: 100%; margin-top: 8px; }
.pf-seg-wide button { flex: 1; }

.pf-seg button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 16px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-size: .86rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    background: transparent;
}

.pf-seg button:hover { color: var(--mud-palette-text-primary); }

.pf-seg button.is-on {
    color: var(--mud-palette-primary);
    background: var(--mud-palette-surface);
    box-shadow: var(--pf-shadow);
}

/* Image upload field ------------------------------------------------------- */

.pf-imagefield { margin-top: 6px; }
.pf-imagefield-label { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }

.pf-lock-flag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 800;
    color: var(--mud-palette-primary);
    background: var(--mud-palette-primary-hover);
}

.pf-imagefield-row { display: flex; gap: 16px; align-items: flex-start; }

.pf-imagefield-drop {
    position: relative;
    flex: 0 0 auto;
    width: 132px;
    height: 132px;
    display: grid;
    place-items: center;
    overflow: hidden;
    cursor: pointer;
    border-radius: var(--pf-radius);
    border-width: 2px; border-style: dashed; border-color: var(--mud-palette-lines-inputs);
    background: var(--mud-palette-background-gray);
}

.pf-imagefield.is-wide .pf-imagefield-drop { width: 100%; height: 132px; }
.pf-imagefield.is-wide .pf-imagefield-row { flex-direction: column; }

.pf-imagefield-drop:hover { border-color: var(--mud-palette-primary); }
.pf-imagefield-drop.is-locked { cursor: not-allowed; opacity: .6; }
.pf-imagefield-drop.has-image { border-style: solid; padding: 0; }
.pf-imagefield-drop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pf-imagefield-drop img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }

.pf-imagefield-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: .8rem;
    font-weight: 600;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

.pf-imagefield-side { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; flex: 1; }

/* Chip / link editors ------------------------------------------------------ */

.pf-chipedit { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

.pf-chip-x {
    margin-left: 6px;
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
    font-size: 1.05rem;
    line-height: 1;
    color: inherit;
    opacity: .65;
}

.pf-chip-x:hover { opacity: 1; }

.pf-inline-add { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; }
.pf-inline-add > *:first-child { flex: 1; }

/* Profile settings: link rows and the palette that adds them. */
.pf-linkrows { list-style: none; padding: 0; margin: 12px 0 4px; display: grid; gap: 10px; }

.pf-linkrow {
    display: grid;
    grid-template-columns: auto 170px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.pf-linkrow-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    color: var(--pf-brand);
    background: color-mix(in srgb, var(--pf-brand) 13%, #fff);
}

.pf-linkrow .mud-input-control { margin: 0; }
.pf-linkrow-option { display: inline-flex; align-items: center; gap: 8px; }

.pf-linkpalette-label { margin: 16px 0 8px; font-size: .82rem; font-weight: 800; color: var(--mud-palette-text-secondary); }
.pf-linkpalette { display: flex; flex-wrap: wrap; gap: 6px; }

.pf-linkchip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 6px 9px;
    border-radius: 999px;
    border: 1.5px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: .84rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}

.pf-linkchip .mud-icon-root { color: var(--pf-brand); }
.pf-linkchip:hover:not(:disabled) { border-color: var(--pf-brand); background: color-mix(in srgb, var(--pf-brand) 8%, #fff); transform: translateY(-1px); }
.pf-linkchip:active:not(:disabled) { transform: translateY(0); }
.pf-linkchip:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.pf-linkchip:disabled { opacity: .45; cursor: not-allowed; }

@media (max-width: 640px) {
    .pf-linkrow { grid-template-columns: auto minmax(0, 1fr) auto; }
    .pf-linkrow-platform { grid-column: 2; }
    .pf-linkrow-url { grid-column: 1 / -1; grid-row: 2; }
    .pf-linkrow > :last-child { grid-column: 3; grid-row: 1; }
}

.pf-linkedit { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 8px; }
.pf-linkedit li { display: flex; align-items: center; gap: 10px; }
.pf-linkedit li > *:nth-child(2) { flex: 1; }
.pf-linkedit .mud-icon-root { color: var(--mud-palette-text-secondary); flex-shrink: 0; }
.pf-block-handle { flex: 1; font-weight: 600; }

.pf-field-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.pf-field-row > * { flex: 1 1 160px; }

.pf-preset-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

.pf-preset {
    width: 46px;
    height: 30px;
    border-radius: 9px;
    cursor: pointer;
    border-width: 2px; border-style: solid; border-color: var(--mud-palette-divider);
}

.pf-preset:hover { border-color: var(--mud-palette-primary); transform: translateY(-1px); }

/* Mini profile preview ----------------------------------------------------- */

.pf-minipreview { overflow: hidden; margin-bottom: 16px; }
.pf-minipreview-banner { height: 76px; }

.pf-minipreview-avatar {
    width: 66px;
    height: 66px;
    margin: -34px 0 0 18px;
    padding: 7px;
    border-radius: 18px;
    position: relative;
    border-width: 3px; border-style: solid; border-color: var(--mud-palette-surface);
    background-color: var(--mud-palette-background-gray);
}

.pf-minipreview-body { padding: 12px 18px 18px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.pf-minipreview-tagline { margin: 4px 0 8px; }

/* Manage lists ------------------------------------------------------------- */

.pf-quota {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
}

.pf-manage-list { display: flex; flex-direction: column; gap: 14px; }

.pf-manage-row {
    display: flex;
    gap: 18px;
    align-items: center;
    padding: 16px 18px;
}

.pf-manage-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 96px;
    height: 74px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--mud-palette-background-gray);
}

.pf-manage-thumb img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; display: block; }

.pf-manage-count {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
    color: #fff;
    background: rgba(20, 15, 40, .62);
}

.pf-manage-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pf-manage-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pf-manage-title a { text-decoration: none; color: inherit; }
.pf-manage-title a:hover { color: var(--mud-palette-primary); }

.pf-manage-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
}

.pf-manage-meta span { display: inline-flex; align-items: center; gap: 4px; }
.pf-manage-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.pf-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pf-delete-preview {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
    padding: 12px;
    border-radius: var(--pf-radius);
    background: var(--mud-palette-background-gray);
}

.pf-delete-preview img { width: 72px; height: 56px; object-fit: cover; border-radius: 9px; image-rendering: pixelated; }
.pf-delete-preview div { display: flex; flex-direction: column; }
.pf-delete-preview span { font-size: .8rem; }

/* Dialog ------------------------------------------------------------------- */

.pf-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1500;
    background: rgba(20, 15, 40, .5);
    backdrop-filter: blur(3px);
}

.pf-modal {
    position: fixed;
    z-index: 1501;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(520px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
    border-radius: var(--pf-radius-lg);
    background: var(--mud-palette-surface);
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
    box-shadow: 0 24px 70px -20px rgba(20, 15, 40, .5);
}

.pf-modal.is-wide { width: min(720px, calc(100vw - 32px)); }

.pf-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px 14px;
    border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--mud-palette-divider);
}

.pf-modal-body { padding: 20px 22px; overflow-y: auto; }

.pf-modal-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px 18px;
    border-top-width: 1px; border-top-style: solid; border-top-color: var(--mud-palette-divider);
}

.pf-dialog-form { display: flex; flex-direction: column; gap: 16px; }


.pf-jobcard {
    padding: 12px;
    border-radius: 13px;
    cursor: grab;
    background: var(--mud-palette-surface);
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
    box-shadow: var(--pf-shadow);
    transition: transform .12s ease, box-shadow .12s ease;
}

.pf-jobcard:hover { transform: translateY(-2px); box-shadow: var(--pf-shadow-hover); }
.pf-jobcard.is-dragging { opacity: .45; cursor: grabbing; }
.pf-jobcard.is-overdue { border-color: var(--mud-palette-error); }

.pf-jobcard-head { display: flex; gap: 10px; align-items: flex-start; }

.pf-jobcard-avatar {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    padding: 3px;
    border-radius: 10px;
    background: var(--mud-palette-background-gray);
}

.pf-jobcard-id { display: flex; flex-direction: column; min-width: 0; }
.pf-jobcard-id strong { font-size: .87rem; line-height: 1.3; }
.pf-jobcard-id span { font-size: .76rem; }

.pf-jobcard-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    font-size: .78rem;
}

.pf-jobcard-meta span { display: inline-flex; align-items: center; gap: 3px; }
.pf-jobcard-price { font-weight: 800; color: var(--mud-palette-text-primary); }
.pf-jobcard-move { display: flex; justify-content: space-between; margin-top: 4px; }
.pf-overdue-flag { color: var(--mud-palette-error); font-weight: 700; }

.pf-gate { padding: 28px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 24px; }

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

@media (max-width: 1100px) {
    .pf-settings-split { grid-template-columns: minmax(0, 1fr); }
    .pf-settings-side { display: none; }
}

@media (max-width: 900px) {
    .pf-settings-shell { grid-template-columns: minmax(0, 1fr); }

    .pf-settings-nav {
        position: static;
        flex-direction: row;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 8px;
    }

    .pf-settings-navlink { white-space: nowrap; }
    .pf-manage-row { flex-wrap: wrap; }
    .pf-manage-actions { width: 100%; justify-content: flex-end; }
    .pf-quota { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 600px) {
    .pf-modal { width: calc(100vw - 20px); }
    .pf-imagefield-row { flex-direction: column; }
    .pf-seg-wide { flex-wrap: wrap; }
}

/* Auth forms — plain HTML controls so they can post outside the circuit. */

.pf-auth-form { display: flex; flex-direction: column; gap: 4px; width: 100%; margin-top: 12px; }

/* Only there to hear the fields' events for the ponies, so it takes no part in the
   layout: the fields stay direct flex items of the form and keep its gap. */
.pf-auth-fields { display: contents; }
.pf-auth-label { font-size: .8rem; font-weight: 700; margin-top: 7px; color: var(--mud-palette-text-secondary); }

.pf-auth-input {
    width: 100%;
    padding: 9px 12px;
    font: inherit;
    font-size: .9rem;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-background-gray);
    border-radius: 10px;
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-lines-inputs);
}

.pf-auth-input:focus { outline: none; border-color: var(--mud-palette-primary); }
.pf-auth-hint { font-size: .74rem; color: var(--mud-palette-text-secondary); margin-top: 2px; }
.pf-auth-check { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: .84rem; }

.pf-auth-submit {
    margin-top: 14px;
    padding: 10px 18px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    color: var(--mud-palette-primary-text);
    background: var(--mud-palette-primary);
}

.pf-auth-submit:hover { filter: brightness(1.05); }
.pf-auth-alt { margin-top: 12px; }
.pf-auth-demo { display: block; margin-top: 14px; }
.pf-auth-demo code { font-size: .74rem; }

.pf-signout-form { display: contents; }

.pf-signout-item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    font: inherit;
    font-size: .89rem;
    font-weight: 600;
    text-align: left;
    color: var(--mud-palette-text-primary);
    background: transparent;
}

.pf-signout-item:hover { background: var(--mud-palette-action-default-hover); }

/* Error boundary card */

.pf-errorcard {
    padding: 40px 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.pf-error-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 6px;
    border-radius: 20px;
    color: var(--mud-palette-error);
    background: var(--mud-palette-error-hover);
}

.pf-error-detail {
    width: 100%;
    margin: 14px 0 0;
    padding: 12px 14px;
    overflow-x: auto;
    text-align: left;
    font-size: .78rem;
    border-radius: 12px;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-gray);
}

.pf-error-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 20px; }

/* Character code + settings panel */

.pf-ponycode {
    padding: 18px 20px;
    border-radius: var(--pf-radius);
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary-hover);
}

.pf-ponycode.is-empty {
    border-style: dashed;
    border-color: var(--mud-palette-divider);
    background: var(--mud-palette-background-gray);
}

.pf-ponycode-label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; font-weight: 700; font-size: .88rem; }

.pf-ponycode-version {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 800;
    color: #fff;
    background: var(--mud-palette-primary);
}

.pf-ponycode-free { font-size: .74rem; font-weight: 700; color: var(--mud-palette-success); margin-left: auto; }

.pf-ponycode-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }

.pf-ponycode-row code {
    flex: 1 1 220px;
    min-width: 0;
    overflow-x: auto;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: .82rem;
    white-space: nowrap;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
}

.pf-swatchgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin: 10px 0 6px;
}

.pf-swatch {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    font: inherit;
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
    background: var(--mud-palette-background-gray);
}

.pf-swatch:hover { border-color: var(--mud-palette-primary); }

.pf-swatch-colour {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 9px;
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
}

.pf-swatch-text { display: flex; flex-direction: column; min-width: 0; }
.pf-swatch-text strong { font-size: .82rem; }
.pf-swatch-text code { font-size: .76rem; color: var(--mud-palette-text-secondary); }

/* Editor settings sheets */

.pf-sheets { padding: 20px; margin-top: 20px; }

/* Save categories ---------------------------------------------------------------
   The popup after saving (SaveToCategoryDialog) and the shelf of category tiles on a
   profile's saved tab (SavedShelf). */

.pf-savecat-head { display: flex; align-items: center; gap: 12px; }
.pf-savecat-head > div { display: grid; min-width: 0; }
.pf-savecat-head strong { display: inline-flex; align-items: center; gap: 4px; color: var(--mud-palette-primary); }
.pf-savecat-head .pf-muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }

.pf-savecat-thumb {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    object-fit: cover;
    border-radius: 12px;
    background: var(--mud-palette-background-gray);
    image-rendering: pixelated;
}

.pf-savecat-label { margin-bottom: 8px; }

/* Each choice is a full-width row: the whole row is the target, which on a phone is the
   difference between hitting "Winter" and hitting the gap beside it. */
.pf-savecat-list { display: grid; gap: 4px; max-height: 280px; overflow-y: auto; }

.pf-savecat-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid transparent;
    border-radius: 12px;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.pf-savecat-row:hover { border-color: color-mix(in srgb, var(--mud-palette-primary) 35%, transparent); }
.pf-savecat-row:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
.pf-savecat-row:disabled { cursor: progress; opacity: .7; }
.pf-savecat-row .mud-icon-root { color: var(--mud-palette-text-secondary); }
.pf-savecat-row.is-none .pf-savecat-name { color: var(--mud-palette-text-secondary); font-weight: 600; }

.pf-savecat-row.is-on {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 9%, var(--mud-palette-surface));
}

.pf-savecat-row.is-on .mud-icon-root { color: var(--mud-palette-primary); }

.pf-savecat-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-savecat-count { font-size: .82rem; font-weight: 700; color: var(--mud-palette-text-secondary); }

.pf-savecat-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 6px 2px;
    border: 0;
    background: none;
    color: var(--mud-palette-primary);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.pf-savecat-add:hover { text-decoration: underline; }

.pf-savecat-new { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.pf-savecat-new .pf-field { flex: 1 1 auto; margin: 0; }

/* The shelf: one tile per category, scrolling sideways when there are more than fit,
   so the ponies below stay where they were rather than being pushed down a screen. */
.pf-shelf {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 168px;
    gap: 14px;
    margin-bottom: 22px;
    padding: 4px 4px 10px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
}

.pf-shelf-tile { position: relative; scroll-snap-align: start; }

.pf-shelf-open {
    display: grid;
    gap: 2px;
    width: 100%;
    padding: 8px 8px 12px;
    border: 2px solid transparent;
    border-radius: 18px;
    background: var(--mud-palette-surface);
    box-shadow: var(--pf-shadow);
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform .15s ease, border-color .15s ease;
}

.pf-shelf-open:hover { transform: translateY(-2px); }
.pf-shelf-open:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
.pf-shelf-tile.is-on .pf-shelf-open { border-color: var(--mud-palette-primary); }

/* A peek at what is inside: one picture fills the square, two sit side by side, three
   or four make a two-by-two. */
.pf-shelf-peek {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    aspect-ratio: 1 / 1;
    margin-bottom: 8px;
    overflow: hidden;
    border-radius: 12px;
    background: var(--mud-palette-background-gray);
}

.pf-shelf-peek img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.pf-shelf-peek.is-0 { grid-template-columns: 1fr; place-items: center; color: var(--mud-palette-text-secondary); }
.pf-shelf-peek.is-1 { grid-template-columns: 1fr; }
.pf-shelf-peek.is-2 img { grid-row: span 2; }
.pf-shelf-peek.is-3 img:first-child { grid-row: span 2; }

.pf-shelf-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }
.pf-shelf-count { font-size: .82rem; color: var(--mud-palette-text-secondary); }

/* Rename or delete, on your own categories only. Over the picture's corner, where it is
   found without taking a row of its own on every tile. */
.pf-shelf-edit {
    position: absolute;
    top: 14px;
    right: 14px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--mud-palette-surface) 92%, transparent);
    box-shadow: 0 2px 6px rgba(36, 29, 61, .2);
    color: var(--mud-palette-text-primary);
    cursor: pointer;
}

.pf-shelf-edit:hover { color: var(--mud-palette-primary); }
.pf-shelf-edit:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }

.pf-shelf-heading { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; }
.pf-shelf-heading h3 { margin: 0; font-size: 1.15rem; font-weight: 800; }

@media (max-width: 520px) {
    .pf-shelf { grid-auto-columns: 136px; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .pf-shelf-open, .pf-savecat-row { transition: none; }
    .pf-shelf-open:hover { transform: none; }
}

/* The how-to video, first in the design sheet. Capped so a wide page does not turn it
   into a cinema screen above images people came to read. */
.pf-sheet-video { max-width: 720px; margin-bottom: 18px; }
.pf-sheet-video:last-child { margin-bottom: 0; }

/* A YouTube video: a poster and a play button until it is asked for (YouTubeEmbed). */
.pf-yt {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 14px;
    background: #000;
}

.pf-yt-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.pf-yt-poster {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: #000;
    cursor: pointer;
}

.pf-yt-poster img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .92; transition: opacity .2s ease; }
.pf-yt-poster:hover img { opacity: 1; }

/* YouTube's own red, because a red play button is what people recognise as "this plays". */
.pf-yt-play {
    position: absolute;
    left: 50%;
    top: 50%;
    display: grid;
    place-items: center;
    width: 68px;
    height: 48px;
    margin: -24px 0 0 -34px;
    border-radius: 14px;
    background: #FF0033;
    color: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
    transition: transform .15s ease;
}

.pf-yt-play .mud-icon-root { font-size: 2rem; }
.pf-yt-poster:hover .pf-yt-play { transform: scale(1.06); }
.pf-yt-poster:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 3px; }

.pf-yt-out {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: .84rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
}

.pf-yt-out:hover { color: var(--mud-palette-primary); }

/* The editor's design sheet section: images, video and the like toggle as three parts,
   divided by hairlines so they read as one section with three ways in. */
.pf-sheet-part { padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--mud-palette-lines-default); }

.pf-sheet-part-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.pf-sheet-part-head .pf-muted { margin-left: auto; font-size: .84rem; }

.pf-sheet-video-preview {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
    padding: 10px;
    border-radius: 12px;
    background: var(--mud-palette-background-gray);
}

.pf-sheet-video-preview img { width: 128px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.pf-sheet-video-preview div { display: grid; gap: 2px; font-size: .88rem; }
.pf-sheet-video-preview strong { display: inline-flex; align-items: center; gap: 4px; }

.pf-link-btn {
    justify-self: start;
    padding: 0;
    border: 0;
    background: none;
    color: var(--mud-palette-error);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.pf-link-btn:hover { text-decoration: underline; }
.pf-sheet-editor .pf-form-hint a { color: var(--mud-palette-primary); font-weight: 700; }

.pf-sheet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 12px;
}

.pf-sheet { margin: 0; }

.pf-sheet a {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    background: var(--mud-palette-background-gray);
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
}

.pf-sheet a:hover { border-color: var(--mud-palette-primary); }

.pf-sheet img {
    display: block;
    width: 100%;
    height: auto;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.pf-sheet figcaption {
    margin-top: 6px;
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
}

/* ── Extension promo ─────────────────────────────────────────────────────── */
/* Shown where someone is about to screenshot the editor by hand, or is looking
   at a design with no settings to recreate it from. */

.pf-ext-card {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 22px;
    border: 1px solid var(--mud-palette-lines-default);
}

.pf-ext-mark {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, var(--mud-palette-primary), var(--mud-palette-secondary));
}

.pf-ext-body { min-width: 0; }
.pf-ext-text { margin-top: 4px; max-width: var(--pf-maxline); }
.pf-ext-actions { margin-top: 14px; }

.pf-ext-inline {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: var(--pf-radius);
    color: inherit;
    text-decoration: none;
    background: var(--mud-palette-background-gray);
    transition: border-color .15s ease, background-color .15s ease;
}

.pf-ext-inline:hover {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-action-default-hover);
}

.pf-ext-inline span { font-size: .9rem; line-height: 1.4; }
.pf-ext-inline strong { margin-right: 4px; }
.pf-ext-chevron { margin-left: auto; flex: 0 0 auto; }

@media (max-width: 600px) {
    .pf-ext-card { flex-direction: column; }
    .pf-ext-chevron { display: none; }
}

/* ── Image cropper ───────────────────────────────────────────────────────── */
/* The stage is a fixed-height box; the canvas fills it and JS sizes its backing
   store from the resulting layout box. */

.pf-crop-hint { margin-bottom: 12px; }

.pf-crop-stage {
    position: relative;
    height: 380px;
    border-radius: var(--pf-radius);
    overflow: hidden;
    background:
        repeating-conic-gradient(var(--mud-palette-background-gray) 0% 25%, transparent 0% 50%)
        50% / 20px 20px;
}

.pf-crop-stage.is-wide { height: 300px; }

.pf-crop-stage canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
    touch-action: none;
}

.pf-crop-stage canvas:active { cursor: grabbing; }

.pf-crop-zoom {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 16px;
    color: var(--mud-palette-text-secondary);
}

.pf-crop-slider { flex: 1 1 auto; margin: 0; }

@media (max-width: 600px) {
    .pf-crop-stage { height: 300px; }
    .pf-crop-stage.is-wide { height: 220px; }
}

/* ── Cover picker and tag suggestions ────────────────────────────────────── */

.pf-cover-pick {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    margin-left: 10px;
    padding: 3px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    font: inherit;
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
    background: transparent;
    cursor: pointer;
}

.pf-cover-pick:hover { border-color: var(--mud-palette-primary); color: var(--mud-palette-primary); }
.pf-cover-pick.is-on { border-color: var(--mud-palette-primary); color: var(--mud-palette-primary); font-weight: 600; }

.pf-tagbox { position: relative; }

.pf-tagsuggest {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    margin: 2px 0 0;
    padding: 4px;
    list-style: none;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--pf-radius);
    background: var(--mud-palette-surface);
    box-shadow: var(--pf-shadow);
    max-height: 220px;
    overflow-y: auto;
}

/* Name on the left, count pushed to the right. The counts line up in a column that way,
   which is what makes "200 against 1" readable at a glance rather than something you
   have to read word by word. */
.pf-tagsuggest button {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: 8px;
    text-align: left;
    font: inherit;
    color: inherit;
    background: transparent;
    cursor: pointer;
}

.pf-tagsuggest button:hover { background: var(--mud-palette-action-default-hover); }

.pf-tagsuggest-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tags past the visible limit. display:none rather than removed from the markup, so the
   whole set is still in the DOM for a crawler and a screen reader. */
.pf-tag-hidden { display: none; }

/* The unsaved-changes bar. Tinted with the warning colour rather than the surface, so
   it reads as a state the page is in rather than another row of buttons. */
.pf-unsaved {
    align-items: center;
    gap: 10px;
    border-color: color-mix(in srgb, var(--mud-palette-warning) 45%, var(--mud-palette-divider));
    background: color-mix(in srgb, var(--mud-palette-warning) 8%, var(--mud-palette-surface));
}

.pf-unsaved-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: auto;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
}

/* The three chosen colours, shown as colours. Same three-column rhythm as the pickers
   above them, so each swatch sits under the field it belongs to. */
.pf-swatchrow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.pf-swatch-item { display: flex; align-items: center; gap: 9px; min-width: 0; }

@media (max-width: 640px) {
    .pf-swatchrow { grid-template-columns: 1fr; }
}

/* ── Theme preview in the design editor ──────────────────────────────────── */

/* Everything inside is drawn from --pf-skin-* variables set inline by SkinTheme.For,
   the same function the real page uses. Nothing here names a colour of its own, which
   is what stops the preview from drifting away from the thing it previews. */
.pf-themepreview {
    margin-top: 18px;
    padding: 18px;
    border-radius: var(--pf-radius);
    border-width: 1px;
    border-style: solid;
    border-color: var(--pf-skin-line, var(--mud-palette-divider));
    background: var(--pf-skin-wash, var(--mud-palette-background));
}

.pf-themepreview-card {
    padding: 16px;
    border-radius: var(--pf-radius);
    border-width: 1px;
    border-style: solid;
    border-color: var(--pf-skin-line, var(--mud-palette-divider));
    background: var(--pf-skin-surface, var(--mud-palette-surface));
    box-shadow: 0 10px 28px -18px var(--pf-skin-glow, transparent);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pf-themepreview-title { font-size: .95rem; font-weight: 800; }
.pf-themepreview-text { font-size: .82rem; color: var(--mud-palette-text-secondary); }

.pf-themepreview-row { display: flex; align-items: center; gap: 12px; margin-top: 6px; }

/* The button is the point. Readable() nudges the accent until it passes contrast, so
   this is regularly a different colour from the swatch in the picker - which is exactly
   what somebody needs to see before they publish. */
.pf-themepreview-btn {
    padding: 6px 14px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    background: var(--pf-skin-accent, var(--mud-palette-primary));
    color: var(--pf-skin-on-accent, #fff);
}

.pf-themepreview-link {
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--pf-skin-accent-alt, var(--mud-palette-secondary));
}

.pf-themepreview-caption {
    display: block;
    margin-top: 10px;
    font-size: .76rem;
    color: var(--mud-palette-text-secondary);
}

/* A tag carrying its count. The number is quieter and sits in its own pill, so the tag
   still reads as one word rather than two - and so the eye can run down a row comparing
   numbers without re-reading the names. */
.pf-tag-name { min-width: 0; }

.pf-tag-count {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: color-mix(in srgb, currentColor 14%, transparent);
    opacity: .85;
}

/* The toggle. Deliberately reads as a tag rather than a button, because it sits in a row
   of them and a differently-shaped control there just looks like a mistake. */
.pf-tag-more {
    border-style: dashed;
    font: inherit;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    color: var(--mud-palette-primary);
}

.pf-tag-more:hover { border-style: solid; }

/* ── Tag picker ──────────────────────────────────────────────────────────── */

/* Opens the picker. Dashed like the "+N more" toggle, for the same reason: it sits in a
   row of tags and is an action rather than a filter, so it should read as neither a
   selected tag nor a foreign control. */
.pf-tag-browse {
    border-style: dashed;
    font: inherit;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    color: var(--mud-palette-primary);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.pf-tag-browse:hover { border-style: solid; }

.pf-tagpicker-chosen {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0 4px;
}

/* Sized by its contents, not scrolled.
   It held a fixed 320px with a scrollbar, which was wrong about what this list is: the
   search box is the way through the tags, so a screenful of them is a sign the query
   was too broad rather than something to scroll. Ten rows at most now, and a min-height
   so the dialog does not jump as the match count changes under the cursor. */
.pf-tagpicker-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 220px;
}

.pf-tagpicker-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 9px;
    font: inherit;
    text-align: left;
    color: inherit;
    background: transparent;
    cursor: pointer;
}

.pf-tagpicker-row:hover { background: var(--mud-palette-action-default-hover); }
.pf-tagpicker-row .mud-icon-root { flex-shrink: 0; }

/* Picked. Tinted rather than only recoloured, because colour alone is the one signal
   some people cannot use and the checkbox is small. */
.pf-tagpicker-row.is-on {
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
}

.pf-tagpicker-row.is-on .pf-tagpicker-name { font-weight: 700; }

/* What Enter would take. A left edge rather than a fill, so it reads as a cursor
   position and never competes with the tint that means "picked". */
.pf-tagpicker-row.is-next {
    box-shadow: inset 3px 0 0 0 var(--mud-palette-primary);
}

.pf-tagpicker-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pf-tagpicker-count {
    flex-shrink: 0;
    font-size: .78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
}

.pf-tagpicker-empty { padding: 28px 4px; text-align: center; }

/* Quieter than the tag: it is there to be compared, not read first. Tabular figures so
   the digits line up between rows. */
.pf-tagsuggest-count {
    flex-shrink: 0;
    font-size: .78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
}

.pf-sheet-locked {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 22px;
    color: var(--mud-palette-text-secondary);
    border: 1px dashed var(--mud-palette-lines-default);
}

/* ── Avatar framing ──────────────────────────────────────────────────────── */
/*
   Each frame below sets its own size, radius and ring. The image inside has to
   take that same shape: a square photo in a 50%-radius button renders as a square
   sitting inside a circular ring, which is what `object-fit: cover` alone could
   never fix — cover controls how the picture fills its box, not the box's shape.

   `border-radius: inherit` makes the image adopt whichever radius its frame uses,
   so circles stay circles and rounded squares stay rounded squares without this
   list having to know which is which. `overflow: hidden` clips anything that
   still reaches past the padding box.
*/

.pf-avatar-btn,
.pf-usermenu-avatar,
.pf-creator-avatar,
.pf-creator-inline-avatar,
.pf-profile-avatar,
.pf-commission-avatar,
.pf-queue-avatar,
.pf-minipreview-avatar,
.pf-jobcard-avatar {
    overflow: hidden;
}

.pf-avatar-img {
    border-radius: inherit;
    background-color: var(--mud-palette-background-gray);
}
/*
   No inner gap. These frames carried 4–14px of padding, which showed as a pale ring
   between the border and the picture — the frame reading as separate from the photo
   rather than around it. The border and radius now sit directly on the image.
*/
.pf-avatar-btn,
.pf-usermenu-avatar,
.pf-creator-avatar,
.pf-creator-inline-avatar,
.pf-profile-avatar,
.pf-commission-avatar,
.pf-queue-avatar,
.pf-minipreview-avatar,
.pf-jobcard-avatar {
    padding: 0;
}

/* ── Commission enlistment and reviews ───────────────────────────────────── */

.pf-enlist-list { display: grid; gap: 12px; }

.pf-enlist-row {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    flex-wrap: wrap;
}

.pf-enlist-main { min-width: 0; }
.pf-enlist-title { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pf-enlist-actions { display: flex; gap: 8px; align-items: center; }

.pf-review-summary { padding: 20px 22px; margin-bottom: 16px; }

.pf-review-score { display: flex; gap: 10px; align-items: baseline; }
.pf-review-score strong { font-size: 2.1rem; font-weight: 800; letter-spacing: -.03em; }

.pf-review-axes {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    margin: 14px 0 10px;
}

.pf-review-axes div { display: grid; gap: 2px; }
.pf-review-axes dt { font-size: .82rem; color: var(--mud-palette-text-secondary); }
.pf-review-axes dd { margin: 0; font-weight: 700; }

.pf-review-list { display: grid; gap: 12px; }
.pf-review { padding: 16px 18px; }

.pf-review-head { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.pf-review-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; }
.pf-review-overall { margin-left: auto; font-weight: 800; font-size: 1.1rem; }

@media (max-width: 600px) {
    .pf-enlist-row { flex-direction: column; align-items: stretch; }
    .pf-enlist-actions { justify-content: flex-end; }
}

/* ── Queue enlistment actions ────────────────────────────────────────────── */

.pf-jobcard-enlist {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 10px;
}

.pf-quiet-flag {
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    color: var(--mud-palette-warning-darken);
    background: var(--mud-palette-warning-lighten);
}

/* Feedback forms ---------------------------------------------------------- */

.pf-rate-row {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    padding: 7px 0;
}

.pf-rate-row > span { font-size: .92rem; }

/* ── Client commission record ────────────────────────────────────────────── */

.pf-clientrec { padding: 18px 20px; margin-bottom: 18px; }

.pf-clientrec-head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
}

.pf-clientrec-flags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

.pf-clientrec-flag {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--mud-palette-warning-darken);
    background: var(--mud-palette-warning-lighten);
}

.pf-clientrec-notes { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }

.pf-clientrec-notes li {
    padding: 10px 12px;
    border-radius: var(--pf-radius);
    background: var(--mud-palette-background-gray);
}

.pf-clientrec-notes li span { display: block; font-size: .9rem; }

/* ── Reports and review replies ──────────────────────────────────────────── */

.pf-report-reasons { display: grid; gap: 2px; margin: 6px 0 14px; }

.pf-review-reply {
    margin-top: 12px;
    padding: 12px 14px;
    border-left: 3px solid var(--mud-palette-primary);
    border-radius: 0 var(--pf-radius) var(--pf-radius) 0;
    background: var(--mud-palette-background-gray);
}

.pf-review-actions {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    margin-top: 8px;
}

/* --------------------------------------------------------------------------
   Commission board

   The creator's shopfront on their profile. Shaped after the commission sheets
   artists already post elsewhere: tiers with prices, what is included, how the
   job goes, and one obvious way to get in touch.

   The price is the loudest thing in a tier on purpose. It is the number people
   came to find, and burying it under a paragraph is how commission sheets go
   unread.
   -------------------------------------------------------------------------- */

.pf-board { padding: 4px 0 8px; }

.pf-board-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.pf-board-headline { font-weight: 800; letter-spacing: -.01em; }
.pf-board-intro { max-width: var(--pf-maxline); margin-top: 6px; }
.pf-board-cta { flex: none; }

.pf-board-tiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.pf-board-tier {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
    border-radius: var(--pf-radius);
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
    background: var(--mud-palette-surface);
}

.pf-board-tier-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.pf-board-tier-name { font-weight: 700; }
.pf-board-tier-blurb { margin: 0; }

.pf-board-price { display: flex; align-items: baseline; gap: 6px; }

.pf-board-price-figure {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
    color: var(--mud-palette-primary);
}

.pf-board-price-note { font-size: .78rem; color: var(--mud-palette-text-secondary); }

.pf-board-includes {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 6px;
}

.pf-board-includes li {
    position: relative;
    padding-left: 20px;
    font-size: .86rem;
    color: var(--mud-palette-text-secondary);
}

/* A tick rather than a bullet: every line here is something the buyer gets. */
.pf-board-includes li::before {
    content: "";
    position: absolute;
    left: 2px; top: .42em;
    width: 9px; height: 5px;
    border-left: 2px solid var(--mud-palette-primary);
    border-bottom: 2px solid var(--mud-palette-primary);
    transform: rotate(-45deg);
}

.pf-board-label {
    display: block;
    letter-spacing: .12em;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 10px;
}

.pf-board-process, .pf-board-terms { margin-top: 26px; }

.pf-board-steps {
    counter-reset: pf-step;
    margin: 0; padding: 0;
    list-style: none;
    display: grid;
    gap: 0;
}

/* The rail is the sequence made visible - the steps are an order, not a set. */
.pf-board-steps li {
    counter-increment: pf-step;
    position: relative;
    padding: 0 0 18px 42px;
    border-left: 2px solid var(--mud-palette-divider);
    margin-left: 13px;
}

.pf-board-steps li:last-child { border-left-color: transparent; padding-bottom: 0; }

.pf-board-steps li::before {
    content: counter(pf-step);
    position: absolute;
    left: -14px; top: -2px;
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border-radius: 999px;
    background: var(--mud-palette-primary);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
}

.pf-board-steps li span { display: block; padding-top: 2px; }

.pf-board-foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 30px;
    padding-top: 24px;
    border-top-width: 1px; border-top-style: solid; border-top-color: var(--mud-palette-divider);
    text-align: center;
}

@media (max-width: 600px) {
    .pf-board-head { flex-direction: column; }
    .pf-board-cta { width: 100%; }
}

/* Verification ------------------------------------------------------------- */

.pf-verified-tick { vertical-align: middle; }

.pf-verify-title { display: flex; align-items: center; gap: 6px; }

/* Applicant links shown as typed, never as anchors: this is untrusted text from
   a stranger and a reviewer should decide where to go, not be one slip from it. */
.pf-verify-evidence {
    margin: 12px 0;
    padding: 12px 14px;
    border-radius: var(--pf-radius);
    background: var(--mud-palette-background-gray);
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
    font-family: ui-monospace, Consolas, monospace;
    font-size: .82rem;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 200px;
    overflow-y: auto;
}

.pf-verify-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Board editor ------------------------------------------------------------- */

.pf-board-edit-tier {
    padding: 16px;
    margin-top: 12px;
    border-radius: var(--pf-radius);
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
}

.pf-board-edit-row {
    display: grid;
    grid-template-columns: 1.4fr .8fr 1fr auto;
    gap: 10px;
}

.pf-plan-note { display: block; margin-top: 8px; text-align: center; }

@media (max-width: 720px) {
    .pf-board-edit-row { grid-template-columns: 1fr; }
}

/* Board editor spacing ------------------------------------------------------

   .pf-field carries a bottom margin so stacked inputs breathe. On the last one
   in a card that margin lands inside the card's padding and reads as a card
   that is bottom-heavy — the gap below the final input is 24 + 18 while every
   other edge is 24. Dropping it on the last child makes the padding even.
   -------------------------------------------------------------------------- */

.pf-form-card > .pf-field:last-child,
.pf-board-edit-tier > .pf-field:last-child {
    margin-bottom: 0;
}

/* The delete button sits in a row of labelled inputs, so centring it against
   the row leaves it floating against the labels rather than the fields. */
.pf-board-edit-row { align-items: start; }

.pf-board-edit-row > .mud-icon-button { margin-top: 6px; }

.pf-board-edit-tier + .pf-board-edit-tier { margin-top: 14px; }

/* Featured row ------------------------------------------------------------- */

.pf-featured-item { position: relative; }

/* Top artists: which number "top" means, and where each one placed. The switch
   is the /support billing toggle, so the site has one segmented control, not two. */
.pf-billing-toggle.pf-rank-switch { margin: 0 0 22px; max-width: 100%; overflow-x: auto; }
.pf-rank-switch button { white-space: nowrap; }

@media (max-width: 480px) {
    .pf-rank-switch button { padding: 8px 12px; font-size: .84rem; }
}
.pf-billing-toggle button:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 1px; }
.pf-billing-toggle button:not(.is-on):hover { color: var(--mud-palette-text-primary); }

.pf-rank-item {
    position: relative;
    animation: pf-rank-in .38s cubic-bezier(.2, .7, .2, 1) both;
    animation-delay: calc(var(--pf-rank-i, 0) * 60ms);
}

/* The outgoing ranking drifts on to the right and fades; the next one arrives
   from the left, card by card, so the list reads as moving in one direction. */
/* Its own keyframes rather than a transition: dropping the entrance animation
   would snap the cards to their base style before any transition could start. */
.pf-rank-grid.is-leaving .pf-rank-item {
    animation: pf-rank-out .18s ease-in both;
}

@keyframes pf-rank-in {
    from { opacity: 0; transform: translateX(-24px); }
    to   { opacity: 1; transform: none; }
}

@keyframes pf-rank-out {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateX(24px); }
}

@keyframes pf-rank-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .pf-rank-item { animation-name: pf-rank-fade; animation-delay: 0s; }
    .pf-rank-grid.is-leaving .pf-rank-item { animation: pf-rank-fade .18s ease-in reverse both; }
}

.pf-support-code { margin-top: 14px; color: var(--mud-palette-text-secondary); }

/* Ink rather than violet, because it sits on somebody's banner and banners are
   often violet themselves. Square-ish, to match the pixel numeral inside it. */
.pf-rank-tag {
    position: absolute;
    top: 10px; left: 10px;
    display: grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border-radius: 9px;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--mud-palette-text-primary);
    background: var(--pf-sun);
    box-shadow: 0 3px 8px -3px rgba(36, 29, 61, .35);
}

/* New on Ponyfolio: who, and when they arrived. No counts - they have none yet. */
.pf-newcomers {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* Six a row because six are fetched; fixed columns rather than auto-fill, which
       left a seventh empty track on wide screens. */
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

@media (max-width: 1000px) { .pf-newcomers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .pf-newcomers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pf-newcomer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 20px 12px 16px;
    border-radius: var(--pf-radius);
    color: inherit;
    text-decoration: none;
    text-align: center;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    transition: transform .15s ease, box-shadow .15s ease;
}

.pf-newcomer:hover { transform: translateY(-2px); box-shadow: var(--pf-shadow-hover); }
.pf-newcomer:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }

/* Their own banner colours as the ring, so each newcomer already looks like theirs. */
.pf-newcomer-ring {
    width: 76px;
    height: 76px;
    padding: 4px;
    margin-bottom: 8px;
    border-radius: 50%;
}

.pf-newcomer-ring .pf-avatar-img,
.pf-newcomer-ring > * {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--mud-palette-surface);
    overflow: hidden;
}

.pf-newcomer-name {
    max-width: 100%;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf-newcomer-when { font-size: .8rem; color: var(--mud-palette-text-secondary); }

@media (prefers-reduced-motion: reduce) {
    .pf-newcomer, .pf-newcomer:hover { transition: none; transform: none; }
}

/* Paid placement, said out loud. Small and quiet — it is a disclosure, not a
   badge of honour — but never absent from a slot somebody paid for. */
.pf-featured-tag {
    position: absolute;
    top: 10px; left: 10px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: #14513A;
    background: var(--pf-mint);
    box-shadow: var(--pf-shadow);
}

/* --------------------------------------------------------------------------
   Image viewer

   Full-screen, above everything. Design sheets are read rather than glanced at,
   so the stage gets the whole window and the chrome stays out of the way.
   -------------------------------------------------------------------------- */

.pf-viewer {
    position: fixed;
    inset: 0;

    /* The dialog layer, not a number above everything.
    
       It was 2000, which is above MudBlazor's whole scale - popover 1200, appbar 1300,
       dialog 1400, snackbar 1500, tooltip 1600 - so the viewer covered the snackbar that
       confirms a copied hex code and its own toolbar tooltips. The one feature this thing
       exists for reported success behind an opaque overlay.
    
       Sitting at the dialog layer puts it above the page and the app bar, and leaves the
       two transient layers above it, which is exactly the ordering a modal wants. */
    z-index: var(--mud-zindex-dialog, 1400);
    display: flex;
    flex-direction: column;
    background: rgba(20, 16, 34, .93);
    backdrop-filter: blur(3px);
}

.pf-viewer:focus { outline: none; }

.pf-viewer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 14px;
    color: #fff;
    background: rgba(0, 0, 0, .35);
    flex: none;
}

.pf-viewer-title { display: flex; flex-direction: column; min-width: 0; }
.pf-viewer-title .mud-typography { color: #fff; }
.pf-viewer-title .pf-muted { color: rgba(255, 255, 255, .68) !important; }

.pf-viewer-tools { display: flex; align-items: center; gap: 2px; }
.pf-viewer-tools .mud-icon-button { color: #fff; }

.pf-viewer-scale {
    min-width: 52px;
    text-align: center;
    font-size: .8rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .85);
    font-variant-numeric: tabular-nums;
}

.pf-viewer-stage {
    position: relative;
    flex: 1;
    overflow: hidden;
    cursor: grab;
    touch-action: none;
}

.pf-viewer-stage.is-grabbing { cursor: grabbing; }

/* Anchored to the middle of the stage rather than centred by the layout.

   A design sheet is far bigger than the window, and grid falls back to "safe"
   alignment for an item that overflows — it snaps to the start. Scaling that
   oversized box about its own centre then threw the picture down and to the
   right. Pinning the centre to 50/50 makes the position independent of how big
   the image happens to be. */
.pf-viewer-image {
    position: absolute;
    left: 50%;
    top: 50%;
    max-width: none;
    max-height: none;
    transform-origin: center center;
    user-select: none;
    -webkit-user-drag: none;

    /* A design sheet is pixel art and small text. Smoothing it while zoomed in is
       exactly the blur people are complaining about, so let the browser show the
       pixels it actually has. */
    image-rendering: pixelated;
}

.pf-viewer-step {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: rgba(0, 0, 0, .45);
    cursor: pointer;
}

.pf-viewer-step:hover { background: rgba(0, 0, 0, .7); }
.pf-viewer-step.is-prev { left: 16px; }
.pf-viewer-step.is-next { right: 16px; }

.pf-viewer-caption {
    flex: none;
    padding: 10px 16px;
    text-align: center;
    font-size: .85rem;
    color: rgba(255, 255, 255, .85);
    background: rgba(0, 0, 0, .35);
}

@media (max-width: 600px) {
    .pf-viewer-bar { flex-wrap: wrap; }
    .pf-viewer-step { width: 38px; height: 38px; }
}

/* The sheet thumbnail is a button now, so it needs its own reset. */
.pf-sheet-open {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    border-radius: var(--pf-radius);
    overflow: hidden;
}

.pf-sheet-open:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 3px;
}

.pf-sheet-open img { display: block; width: 100%; height: auto; }

/* The cropper canvas is draggable, so it should say so. */
.pf-cropper-canvas { cursor: grab; touch-action: none; }
.pf-cropper-canvas.is-grabbing { cursor: grabbing; }

/* The values panel: the sheet's own text, read back out of the file. */
.pf-viewer-data {
    position: absolute;
    right: 16px;
    top: 76px;
    bottom: 76px;
    width: min(340px, calc(100vw - 32px));
    display: flex;
    flex-direction: column;
    border-radius: var(--pf-radius);
    background: var(--mud-palette-surface);
    box-shadow: var(--pf-shadow-hover);
    overflow: hidden;
}

.pf-viewer-data header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 8px 10px 14px;
    border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--mud-palette-divider);
}

.pf-viewer-data ul {
    margin: 0;
    padding: 8px 14px 14px;
    list-style: none;
    overflow-y: auto;
    display: grid;
    gap: 10px;
}

.pf-viewer-data li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .82rem; }

.pf-viewer-data-label { font-weight: 700; color: var(--mud-palette-text-primary); }
.pf-viewer-data-value { color: var(--mud-palette-text-secondary); }

/* Each swatch is a button, because copying one hex code is the common case — people are
   rebuilding a pony one slot at a time, not pasting the whole sheet. */
.pf-viewer-swatch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px 3px 4px;
    border-radius: 999px;
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
    background: var(--mud-palette-background);
    font: inherit;
    font-size: .76rem;
    font-family: ui-monospace, Consolas, monospace;
    cursor: copy;
}

.pf-viewer-swatch:hover { border-color: var(--mud-palette-primary); }

.pf-viewer-swatch span {
    width: 14px; height: 14px;
    border-radius: 4px;
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
}

.pf-viewer-swatch em {
    font-style: normal;
    font-size: .68rem;
    color: var(--mud-palette-text-secondary);
}

@media (max-width: 900px) {
    .pf-viewer-data { left: 16px; right: 16px; width: auto; top: auto; height: 45%; }
}

/* The one-time nudge toward the copy panel. A picture of text does not advertise
   that it is also text, so this points it out once and then stays gone. */
.pf-viewer-copy { position: relative; display: inline-flex; }

.pf-viewer-hint {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    max-width: 260px;
    padding: 8px 8px 8px 12px;
    border-radius: 12px;
    font-size: .8rem;
    font-weight: 600;
    color: #fff;
    background: var(--mud-palette-primary);
    box-shadow: var(--pf-shadow-hover);
    animation: pf-hint-in .28s ease-out both;
}

/* The little arrow, pointing back at the button it is talking about. */
.pf-viewer-hint::before {
    content: "";
    position: absolute;
    top: -5px;
    right: 18px;
    width: 10px; height: 10px;
    transform: rotate(45deg);
    background: var(--mud-palette-primary);
}

.pf-viewer-hint button {
    flex: none;
    width: 20px; height: 20px;
    display: grid; place-items: center;
    border: 0;
    border-radius: 999px;
    font-size: 1rem;
    line-height: 1;
    color: #fff;
    background: rgba(255, 255, 255, .2);
    cursor: pointer;
}

.pf-viewer-hint button:hover { background: rgba(255, 255, 255, .35); }

@keyframes pf-hint-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .pf-viewer-hint { animation: none; }
}

/* Crop shape chooser, shown only where the shape is the creator's to pick. */
.pf-crop-ratios { margin: 12px 0 0; }

/* ============================================================================
   Commission board: banner mode, offer samples, and the offers table.
   ============================================================================ */

.pf-visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --- Banner mode, as visitors see it ------------------------------------- */

.pf-board-banners {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.pf-board-banner { margin: 0; }

.pf-board-banner img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--pf-radius);
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
}

.pf-board-banner figcaption {
    margin-top: 8px;
    font-size: .85rem;
    color: var(--mud-palette-text-secondary);
}

/* The whole picture is the target when it links somewhere -- a banner reads as
   one thing, so a small button in a corner of it would be a worse guess than
   the one people already make. */
.pf-board-banner-hit {
    display: block;
    position: relative;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    border-radius: var(--pf-radius);
}

.pf-board-banner-hit:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 3px;
}

/* Named rather than only hinted at. The destination is the one thing a picture
   cannot tell you, and it is exactly what a misleading banner would hide. */
.pf-board-banner-go {
    position: absolute;
    right: 12px; bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: .78rem;
    color: #fff;
    background: rgba(0, 0, 0, .68);
    backdrop-filter: blur(4px);
    pointer-events: none;
}

.pf-board-banner-hit:hover img,
.pf-board-banner-hit:focus-visible img { border-color: var(--mud-palette-primary); }

/* --- Example pictures on an offer ---------------------------------------- */

.pf-board-samples {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pf-board-sample {
    width: 72px; height: 72px;
    padding: 0;
    border-radius: 10px;
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
    background: var(--mud-palette-background);
    overflow: hidden;
    cursor: zoom-in;
}

.pf-board-sample img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pf-board-sample:hover { border-color: var(--mud-palette-primary); }

.pf-board-sample:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* --- The link warning ---------------------------------------------------- */

.pf-link-warn-title { display: flex; align-items: center; gap: 10px; font-weight: 700; }

/* Wrapped and selectable. Truncating the address would hide the end of it,
   which is the part worth reading. */
.pf-link-warn-url {
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--mud-palette-background-gray);
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
    font-family: var(--pf-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: .85rem;
    word-break: break-all;
    user-select: all;
}

/* --- Mode chooser in the editor ------------------------------------------ */

.pf-board-modes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.pf-board-mode {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 16px;
    text-align: left;
    border-radius: var(--pf-radius);
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    cursor: pointer;
}

.pf-board-mode:hover { border-color: var(--mud-palette-primary); }

.pf-board-mode.is-on {
    border-color: var(--mud-palette-primary);
    box-shadow: inset 0 0 0 1px var(--mud-palette-primary);
}

.pf-board-mode.is-locked { opacity: .72; }

.pf-board-mode-name { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.pf-board-mode-note { font-size: .8rem; color: var(--mud-palette-text-secondary); }

/* --- Banner rows in the editor ------------------------------------------- */

.pf-banner-edit {
    display: grid;
    grid-template-columns: 160px 1fr auto;
    gap: 14px;
    align-items: start;
    padding: 14px;
    border-radius: var(--pf-radius);
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
    margin-top: 12px;
}

.pf-banner-edit-art img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
}

.pf-banner-edit-fields { display: flex; flex-direction: column; gap: 12px; }
.pf-banner-edit-actions { display: flex; flex-direction: column; }

@media (max-width: 700px) {
    .pf-banner-edit { grid-template-columns: 1fr; }
    .pf-banner-edit-actions { flex-direction: row; justify-content: flex-end; }
}

/* --- The offers table ----------------------------------------------------- */

.pf-offer-table {
    display: flex;
    flex-direction: column;
    border-radius: var(--pf-radius);
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
    overflow: hidden;
}

.pf-offer-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px 90px 90px auto;
    gap: 12px;
    align-items: center;
    padding: 8px 12px;
    border-bottom-width: 1px; border-bottom-style: solid;
    border-bottom-color: var(--mud-palette-divider);
}

.pf-offer-row:last-child { border-bottom: 0; }

.pf-offer-head {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-gray);
}

/* The name cell is the button. A row summarising one offer has exactly one
   thing a click could mean, so the target is the row rather than a pencil. */
.pf-offer-open {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
    padding: 6px 0;
    min-width: 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
    color: inherit;
}

.pf-offer-open:hover .pf-offer-name { color: var(--mud-palette-primary); }

.pf-offer-open:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: 6px;
}

.pf-offer-name { font-weight: 600; }

.pf-offer-blurb {
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.pf-offer-price { display: flex; flex-direction: column; font-weight: 700; }
.pf-offer-pricenote { font-size: .72rem; font-weight: 400; color: var(--mud-palette-text-secondary); }
.pf-offer-count { font-size: .82rem; color: var(--mud-palette-text-secondary); }
.pf-offer-actions { display: flex; }

@media (max-width: 760px) {
    /* Includes and examples are counts, and a count is the first thing worth
       dropping when the row will not fit. The name and the price are why
       somebody opened this page. */
    .pf-offer-row { grid-template-columns: minmax(0, 1fr) auto auto; }
    .pf-offer-row > *:nth-child(3),
    .pf-offer-row > *:nth-child(4) { display: none; }
}

/* --- The offer dialog ----------------------------------------------------- */

.pf-offer-edit { display: flex; flex-direction: column; gap: 4px; }

.pf-offer-edit-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) 120px minmax(0, 1.4fr);
    gap: 12px;
}

@media (max-width: 640px) {
    .pf-offer-edit-row { grid-template-columns: 1fr; }
}

.pf-offer-samples {
    margin-top: 8px;
    padding-top: 14px;
    border-top-width: 1px; border-top-style: solid;
    border-top-color: var(--mud-palette-divider);
}

.pf-offer-sample-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0;
}

.pf-offer-sample {
    position: relative;
    width: 92px; height: 92px;
    border-radius: 10px;
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
    overflow: hidden;
}

.pf-offer-sample img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pf-offer-sample .mud-icon-button {
    position: absolute;
    top: 2px; right: 2px;
    color: #fff;
    background: rgba(0, 0, 0, .55);
}

/* ============================================================================
   Board click chart, and the fact list that replaced the dead slots card.
   ============================================================================ */

.pf-chart { margin-top: 8px; }

.pf-chart-plot {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 132px;
    padding: 8px 0;
}

.pf-chart-col {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

/* The stack is the full height of the plot so a bar's percentage is measured
   against the busiest day rather than against its own neighbours. */
.pf-chart-stack {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    gap: 1px;
}

.pf-chart-bar {
    display: block;
    width: 100%;
    border-radius: 3px 3px 0 0;
    min-height: 2px;
}

.pf-chart-bar.is-contact { background: #2BB3D6; }
.pf-chart-bar.is-banner { background: #7A5AF8; }

/* A day with nothing is a hairline, not a gap -- an empty column would read as
   missing data rather than a quiet Tuesday. */
.pf-chart-bar.is-empty {
    height: 2px;
    background: var(--mud-palette-divider);
    border-radius: 2px;
}

.pf-chart-col:hover .pf-chart-bar { filter: brightness(1.15); }

.pf-chart-axis {
    display: flex;
    justify-content: space-between;
    font-size: .72rem;
    color: var(--mud-palette-text-secondary);
    padding-top: 4px;
    border-top-width: 1px; border-top-style: solid;
    border-top-color: var(--mud-palette-divider);
}

.pf-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 12px;
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
}

.pf-chart-key { display: inline-flex; align-items: center; gap: 6px; }

.pf-chart-key i {
    width: 10px; height: 10px;
    border-radius: 3px;
    display: inline-block;
}

.pf-chart-key i.is-contact { background: #2BB3D6; }
.pf-chart-key i.is-banner { background: #7A5AF8; }

.pf-chart-peak { margin-left: auto; }

/* --- Fact list ------------------------------------------------------------ */

.pf-factlist {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.pf-factlist li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom-width: 1px; border-bottom-style: solid;
    border-bottom-color: var(--mud-palette-divider);
    font-size: .88rem;
}

.pf-factlist li:last-child { border-bottom: 0; }
.pf-factlist span { color: var(--mud-palette-text-secondary); }
.pf-factlist strong { font-weight: 700; }

/* ============================================================================
   Admin page: money breakdown, chart headers, account table.
   ============================================================================ */

.pf-chart-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.pf-chart-total { font-size: 1.6rem; font-weight: 800; line-height: 1; }

.pf-admin-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    margin: 16px 0;
}

.pf-admin-money {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin: 12px 0;
}

.pf-admin-plan {
    padding: 14px 16px;
    border-radius: var(--pf-radius);
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-divider);
    background: var(--mud-palette-surface);
}

/* The total is the one somebody actually came to read. */
.pf-admin-plan.is-total {
    border-color: var(--mud-palette-primary);
    box-shadow: inset 0 0 0 1px var(--mud-palette-primary);
}

.pf-admin-plan-name {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--mud-palette-text-secondary);
}

.pf-admin-plan-count { font-size: 1.5rem; font-weight: 800; line-height: 1.2; }
.pf-admin-plan-value { font-size: .85rem; color: var(--mud-palette-text-secondary); }

/* --- Account table -------------------------------------------------------- */

.pf-admin-table { margin-top: 8px; }

.pf-admin-row-grid {
    grid-template-columns: minmax(0, 2fr) 150px 110px 80px 90px;
}

@media (max-width: 900px) {
    /* Designs and joined go first: they are context, not the reason anyone opened
       this table. Plan and standing are why. */
    .pf-admin-row-grid { grid-template-columns: minmax(0, 1fr) 130px 100px; }
    .pf-admin-row-grid > *:nth-child(4),
    .pf-admin-row-grid > *:nth-child(5) { display: none; }
}

.pf-admin-paging {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
}

/* --- Account dialog ------------------------------------------------------- */

.pf-admin-actions { display: flex; flex-direction: column; gap: 10px; }

.pf-admin-who {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pf-admin-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 560px) {
    .pf-admin-row { grid-template-columns: 1fr; }
}

/* ============================================================================
   Auth: confirmation and password-reset pages, inline forms in settings.
   ============================================================================ */

/* The round status mark on check-email, confirm-email and reset-password. */
.pf-auth-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    margin: 0 auto 16px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    color: var(--mud-palette-primary);
}

.pf-auth-icon .mud-icon-root { font-size: 28px; }

.pf-auth-icon.is-good {
    background: color-mix(in srgb, #2FBF71 16%, transparent);
    color: #2FBF71;
}

.pf-auth-icon.is-bad {
    background: color-mix(in srgb, var(--mud-palette-error) 14%, transparent);
    color: var(--mud-palette-error);
}

/* Keep me signed in and Forgot password on one line, which is where people look
   for the second one. */
.pf-auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 2px 0 4px;
}

.pf-auth-forgot {
    font-size: .85rem;
    color: var(--mud-palette-primary);
    text-decoration: none;
    white-space: nowrap;
}

.pf-auth-forgot:hover { text-decoration: underline; }

/* A secondary action that sits under a primary one -- resending a link is not the
   thing most people on that page are about to do. */
.pf-auth-submit-quiet {
    background: transparent;
    color: var(--mud-palette-primary);
    border-width: 1px; border-style: solid; border-color: var(--mud-palette-primary);
}

.pf-auth-submit-quiet:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
}

/* The change-password form inside a settings card. Reuses the auth inputs so the
   two password fields look the same wherever they appear, but does not want the
   auth page's centred, full-bleed layout. */
.pf-inline-form {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 420px;
    margin: 8px 0 12px;
}

.pf-auth-submit-inline {
    align-self: flex-start;
    width: auto;
    padding-left: 28px;
    padding-right: 28px;
    margin-top: 12px;
}

/* One-off donation, kept visually apart from the plan cards so it does not read as
   a fourth tier. */
.pf-donate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 20px 24px;
    margin: 20px 0;
}

/* Payments table on the admin page. */
.pf-pay-row { grid-template-columns: minmax(0, 2fr) 110px 130px 90px; }

@media (max-width: 760px) {
    .pf-pay-row { grid-template-columns: minmax(0, 1fr) 100px 120px; }
    .pf-pay-row > *:nth-child(4) { display: none; }
}


/* --------------------------------------------------------------------------
   Skeletons

   Composition only. The shimmering elements are MudSkeleton, so the animation,
   the reduced-motion handling and both themes come from the component library
   rather than from bespoke keyframes here.

   What is left is the shapes, because those have to match the real cards they
   stand in for and MudBlazor has no opinion about what a Ponyfolio design card
   looks like: a card skeleton is 4:3 like .pf-skin-art, a row skeleton has a
   68px circle like .pf-creator-avatar. That is the point of a skeleton over a
   spinner - it reserves the space, so nothing jumps when the data lands.

   These rules were missing entirely until now. The component shipped in phase 2
   with these class names and the stylesheet had no rules for any of them, so
   every loading state rendered a few unstyled divs and the page simply sat
   blank. It looked like there was no loading feedback because, visibly, there
   was not.
   -------------------------------------------------------------------------- */

/* When a page passes pf-grid the grid rules already apply, so only the ungridded
   case needs a layout of its own. */
.pf-skeleton:not(.pf-grid) {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Matches .pf-skin-card: a card surface, image on top, two lines under it. */
.pf-sk-card {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--pf-radius);
    box-shadow: var(--pf-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 16px;
}

/* MudSkeleton sizes itself by Height; an aspect ratio has to come from here so the
   tile keeps the card's proportions at every column width the grid produces. */
.pf-sk-card .pf-sk-art {
    aspect-ratio: 4 / 3;
    height: auto;
    border-radius: 0;
    margin: 0;
}

.pf-sk-card .pf-sk-inset { margin-left: 16px; }

/* Matches .pf-creator-card closely enough that the swap is not felt. */
.pf-sk-row {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--pf-radius);
    box-shadow: var(--pf-shadow);
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.pf-sk-rowtext {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pf-sk-panel {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--pf-radius);
    box-shadow: var(--pf-shadow);
    padding: 22px;
    display: flex;
    flex-direction: column;
}

/* Profile header placeholder.

   Measured against the real thing rather than guessed: .pf-profile-banner is
   210px, .pf-profile-avatar is 132px square with a 30px radius pulled 78px up
   into the banner, and .pf-profile-head is a three-column grid with a 22px gap.
   A skeleton that announces a different layout and then hands over to this one
   causes exactly the jump it exists to prevent. */
.pf-sk-profile { display: block; }

.pf-sk-profile .pf-sk-banner {
    height: 210px;
    border-radius: 0;
    margin: 0;
}

.pf-sk-profile-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 22px;
    align-items: flex-start;
    padding-top: 18px;
    margin-bottom: 28px;
}

.pf-sk-profile .pf-sk-profile-avatar {
    width: 132px;
    height: 132px;
    margin-top: -78px;
    border-radius: 30px;
    border: 4px solid var(--mud-palette-surface);
}

.pf-sk-profile-id {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.pf-sk-profile-stats {
    display: flex;
    gap: 26px;
    margin-top: 8px;
}

.pf-sk-profile .pf-sk-tabs {
    height: 48px;
    margin: 0;
}
/* The banner is full-bleed and everything under it sits in the page container, so the
   placeholder mirrors that: no padding on the strip, container padding on the rest. */
.pf-sk-profile-outer .pf-sk-profile-head,
.pf-sk-profile-outer .pf-sk-tabs {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

/* Same breakpoint and the same numbers as the real header, not similar ones. It is
   767px there, the banner drops to 150px and the avatar to 104px with a -60px pull;
   a placeholder that shrinks at a different width, or to a different size, is just a
   more subtle version of the mismatch this shape exists to avoid. */
@media (max-width: 767px) {
    .pf-sk-profile-outer .pf-sk-profile-head,
    .pf-sk-profile-outer .pf-sk-tabs { padding-left: 16px; padding-right: 16px; }
    .pf-sk-profile .pf-sk-banner { height: 150px; }
    .pf-sk-profile .pf-sk-profile-avatar { width: 104px; height: 104px; margin-top: -60px; }
}

/* A stat button waiting on the server. Dimmed rather than swapped for a spinner:
   these are small buttons in a dense grid, and a spinner at that size reads as a
   glitch rather than as progress. The cursor carries the rest of the message. */
.pf-stat-btn.is-busy {
    opacity: .5;
    cursor: progress;
}

/* The admin entry in the account menu. Tinted so it does not read as one more
   ordinary destination - it is the only item there that most people will never
   see, and the one with the sharpest edges behind it. */
.pf-usermenu-admin { color: var(--mud-palette-primary); }
.pf-usermenu-admin .mud-icon-root { color: var(--mud-palette-primary); }

/* "Coming soon" on a settings section.

   The pages under Safety and Notifications were mock-ups: switches bound to fields
   that persisted nowhere and a Save button that only raised a snackbar. A control
   that quietly does nothing is worse than no control - somebody turns off "show my
   profile in search", believes it, and is wrong about who can see them. These say
   so instead. */
.pf-soon-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.pf-soon-flag {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--mud-palette-primary);
    background: var(--mud-palette-primary-hover);
    border: 1px solid var(--mud-palette-divider);
}

/* --------------------------------------------------------------------------
   Opening the artwork full size
   -------------------------------------------------------------------------- */

.pf-shot-open {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    position: relative;
}

.pf-shot-zoom {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .62);
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
}

.pf-shot-open:hover .pf-shot-zoom,
.pf-shot-open:focus-visible .pf-shot-zoom {
    opacity: 1;
    transform: translateY(0);
}

/* --------------------------------------------------------------------------
   The three colour pickers in the editor
   -------------------------------------------------------------------------- */

.pf-colorrow-three { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.pf-palette-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: var(--pf-radius);
    border: 1px solid var(--mud-palette-divider);
}

.pf-palette-swatch {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    border: 1px solid var(--mud-palette-divider);
    flex: 0 0 auto;
}

.pf-palette-caption {
    font-size: .82rem;
    color: var(--mud-palette-text-secondary);
}


/* --------------------------------------------------------------------------
   A design's colours, worn by the whole site

   Opening a pony lights the site in its colours - the app bar, the page, the
   cards, the accents - and leaving puts it back.

   Almost all of that happens without a rule here. SkinThemeScope writes over
   MudBlazor's own palette variables on the document root, so every Mud component
   picks the tint up on its own. Chasing the same effect with bespoke selectors
   does not work: the app bar refused an !important rule and an inline style
   alike, because Mud paints it from --mud-palette-appbar-background through
   selectors of its own. Overriding the variable wins that argument by not
   having it.

   The idea is coloured light rather than paint. Nothing is repainted in a
   creator's chosen colour; a wash is laid over surfaces that keep their own
   identity, so a pony tints the room without redecorating it. That is also what
   keeps it readable - at these strengths no combination of three colours can
   make text fail, because the text colour never changes.

   What is left below is the handful of places Mud has no variable for, and the
   transitions. Those live on elements that outlive navigation, which is the only
   kind that can actually fade.
   -------------------------------------------------------------------------- */

html {
    transition: background-color 520ms ease;
}

/* A wide, very soft pool of the mane colour behind the page. Sits on html
   because that is what paints the canvas here - body's own background does not
   render, so the same declaration there did nothing at all. */
html {
    background-image: var(--pf-skin-veil, none);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.pf-appbar {
    transition: background-color 520ms ease, border-bottom-color 520ms ease;
}

.pf-card,
.mud-paper {
    transition: background-color 520ms ease, border-color 520ms ease;
}

/* Accents, scoped to where a colour carries meaning rather than sprayed over
   every control - a themed Delete button would be worse than an untinted one. */
.pf-detail-title { color: var(--pf-skin-accent, inherit); transition: color 520ms ease; }
.pf-detail-stats strong { color: var(--pf-skin-accent-alt, var(--mud-palette-primary)); transition: color 520ms ease; }

.pf-detail-art {
    box-shadow: 0 0 0 1px var(--pf-skin-line, transparent),
                0 18px 48px -24px var(--pf-skin-glow, transparent);
    transition: box-shadow 520ms ease;
}

@media (prefers-reduced-motion: reduce) {
    html, .pf-appbar, .pf-card, .mud-paper,
    .pf-detail-title, .pf-detail-stats strong, .pf-detail-art { transition: none; }
}
/* ---- Mature designs ------------------------------------------------------
   A cover, not a wall. The design stays exactly where it was and keeps its
   frame; what changes is that you cannot make it out until you have said you
   want to. That is the honest shape of the feature - these are public pages
   and the image files are reachable either way, so the job here is to keep a
   suggestive pony from appearing in front of somebody mid-scroll, not to
   pretend it is locked away.

   Blur plus scale, because a blur alone leaves a fringe of sharp pixels at the
   edges where there is nothing to sample from. Scaling past the frame pushes
   that fringe outside it. */
.pf-skin-art.is-covered .pf-shot,
.pf-detail-art.is-covered .pf-shot,
.pf-thumbs.is-covered img {
    filter: blur(22px) saturate(0.7);
    transform: scale(1.15);
}

.pf-thumbs.is-covered img { filter: blur(10px) saturate(0.7); }

.pf-thumbs.is-covered { pointer-events: none; }

/* The badge on a card. Small, legible against whatever is behind it, and
   deliberately not a button - the whole card is already the link. */
.pf-cover-mark {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    background: rgba(24, 18, 40, 0.72);
    color: #fff;
    font-size: 0.78rem;
    letter-spacing: 0.01em;
    backdrop-filter: blur(6px);
}

.pf-cover-mark strong { font-weight: 700; }

.pf-cover-mark-hint {
    opacity: 0.85;
}

@media (max-width: 480px) {
    .pf-cover-mark-hint { display: none; }
}

/* The panel on a detail page. Sits over the art, fills it, and carries the one
   action that changes anything. */
.pf-cover {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem;
    text-align: center;
    background: rgba(24, 18, 40, 0.55);
    color: #fff;
}

.pf-cover-icon {
    font-size: 2.25rem;
    opacity: 0.9;
}

.pf-cover-title { color: #fff; }

.pf-cover-body {
    max-width: 34ch;
    opacity: 0.9;
}

.pf-cover-action { margin-top: 0.5rem; }

@media (prefers-reduced-motion: reduce) {
    .pf-skin-art.is-covered .pf-shot,
    .pf-detail-art.is-covered .pf-shot,
    .pf-thumbs.is-covered img { transition: none; }
}

/* ---- Comments ------------------------------------------------------------
   A conversation, not a data table. The avatar column gives the eye something
   to run down, the replies indent off it, and everything else is quiet - the
   design above is what people came for, and a thread styled to compete with it
   would be the tail wagging the pony.

   Tinted by whatever design is being viewed, like the rest of the page: the
   panel reads --pf-skin-line and --pf-skin-accent where it can, and falls back
   to the site palette when no skin theme is applied. */
.pf-comments { margin-top: 2rem; }

.pf-comments-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.pf-comment-compose-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

/* The counter sits left, the button right, without a spacer element. */
.pf-comment-compose-foot .mud-typography-caption { margin-right: auto; }

.pf-comments-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    text-align: center;
}

.pf-comments-empty-icon {
    font-size: 2rem;
    opacity: 0.35;
}

.pf-comment-list,
.pf-reply-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pf-comment-list { margin-top: 1.25rem; }

.pf-comment + .pf-comment {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--pf-skin-line, var(--mud-palette-divider));
}

.pf-comment-row {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 0.75rem;
    align-items: start;
}

.pf-comment-avatar {
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex: none;
}

.pf-comment-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pf-comment-main { min-width: 0; }

.pf-comment-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.pf-comment-author {
    font-weight: 600;
    font-size: 0.9rem;
}

.pf-comment-when {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
}

/* Revealed on hover and on focus. Hover alone would put it out of reach of a
   keyboard, and it is the only way to remove your own comment. */
.pf-comment-delete {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    border: 0;
    background: none;
    padding: 0.15rem;
    border-radius: 50%;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    opacity: 0;
    transition: opacity 140ms ease, color 140ms ease;
}

.pf-comment-row:hover .pf-comment-delete,
.pf-comment-delete:focus-visible { opacity: 1; }

.pf-comment-delete:hover { color: var(--mud-palette-error); }

.pf-comment-delete.is-busy {
    opacity: 0.5;
    cursor: default;
}

/* Wrapping matters more here than anywhere else on the site: a comment can be
   one unbroken 900-character word if somebody wants it to be, and without this
   that comment sets the width of the whole page. */
.pf-comment-text {
    margin: 0.25rem 0 0;
    font-size: 0.92rem;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Replies hang off the comment's avatar column, so the thread reads as one
   shape rather than two lists. */
.pf-reply-list {
    margin: 0.85rem 0 0 calc(36px + 0.75rem);
    padding-left: 0.9rem;
    border-left: 2px solid var(--pf-skin-line, var(--mud-palette-divider));
}

.pf-reply + .pf-reply { margin-top: 0.85rem; }

.pf-reply-open {
    margin: 0.6rem 0 0 calc(36px + 0.75rem);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 0;
    background: none;
    padding: 0.2rem 0;
    font: inherit;
    font-size: 0.82rem;
    color: var(--pf-skin-accent, var(--mud-palette-primary));
    cursor: pointer;
}

.pf-reply-open:hover { text-decoration: underline; }

.pf-reply-compose { margin: 0.75rem 0 0 calc(36px + 0.75rem); }

@media (max-width: 600px) {
    .pf-reply-list,
    .pf-reply-open,
    .pf-reply-compose { margin-left: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .pf-comment-delete { transition: none; }
}

/* ---- Development sign-in -------------------------------------------------
   Deliberately ugly. This is a password bypass, and it only ever appears on a
   development machine - the server does not register the route anywhere else,
   so in a deployed build none of this markup exists. The warning colour is the
   point: anybody who sees it should immediately wonder what it is doing there
   rather than mistaking it for a feature. */
.pf-devsignin {
    margin-top: 1.5rem;
    padding: 0.9rem;
    border: 1px dashed #c77700;
    border-radius: var(--pf-radius-md, 10px);
    background: rgba(199, 119, 0, 0.07);
}

.pf-devsignin-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #a86200;
    font-size: 0.85rem;
    cursor: pointer;
    list-style: none;
}

/* Safari draws its own disclosure triangle through ::-webkit-details-marker. */
.pf-devsignin-head::-webkit-details-marker { display: none; }

.pf-devsignin-count {
    margin-left: auto;
    font-size: 0.72rem;
    opacity: 0.75;
}

.pf-devsignin[open] .pf-devsignin-count { opacity: 0.5; }

.pf-devsignin-note {
    display: block;
    margin: 0.3rem 0 0.7rem;
    opacity: 0.8;
}

.pf-devsignin-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.pf-devsignin-account {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--pf-radius-sm, 8px);
    background: var(--mud-palette-surface);
    font: inherit;
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
}

.pf-devsignin-account:hover:not(:disabled) { border-color: #c77700; }

.pf-devsignin-account:disabled {
    opacity: 0.55;
    cursor: default;
}

.pf-devsignin-who {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    min-width: 0;
}

.pf-devsignin-handle {
    color: var(--mud-palette-text-secondary);
    font-size: 0.78rem;
}

.pf-devsignin-admin {
    flex: none;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: #a86200;
    color: #fff;
    font-size: 0.68rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* Paging controls on a thread. Quiet - they are navigation, not the content. */
.pf-comments-more {
    display: flex;
    justify-content: center;
    margin-top: 1.25rem;
}

.pf-reply-more {
    margin: 0.6rem 0 0 calc(36px + 0.75rem);
    display: inline-flex;
    align-items: center;
    border: 0;
    background: none;
    padding: 0.2rem 0;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--pf-skin-accent, var(--mud-palette-primary));
    cursor: pointer;
}

.pf-reply-more:hover:not(:disabled) { text-decoration: underline; }
.pf-reply-more:disabled { opacity: 0.6; cursor: default; }

@media (max-width: 600px) {
    .pf-reply-more { margin-left: 1rem; }
}