.mud-main-content {
    height: 100%;
    min-height: 100vh;
    display: flex;
}
 
.mud-chip {
    font-size: var(--mud-typography-default-size);
}
.mud-chip.mud-chip-size-small {
    font-size: var(--mud-typography-body1-size);
}
.mud-tabs {
    background-color: var(--mud-palette-surface);
}

.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
    font-size: var(--mud-typography-subtitle1-size);
}

.mud-simple-table table * tr > td, .mud-simple-table table * tr th {
    font-size: var(--mud-typography-default-size) !important;
    
}

.mud-expand-panel .mud-expand-panel-header {
    font-size: var(--mud-typography-default-size) !important;
    
}

.mud-button-year {
    font-size: var(--mud-typography-default-size) !important;
}

.mud-table-cell {
    font-size: var(--mud-typography-default-size) !important;
}


.mud-typography-subtitle2 {
    font-size: var(--mud-typography-subtitle2-size);
    color: var(--mud-palette-text-secondary);
}
.mud-typography-body1 {
    font-size: var(--mud-typography-body1-size);
}

.mud-typography-body2 {
    font-size: var(--mud-typography-body2-size);
    color: var(--mud-palette-text-secondary);
}

.mud-button-outlined-size-small {
    font-size: var(--mud-typography-body2-size);
}

.mud-grid.readonly-grid > .mud-grid-item {
    border-bottom: 1px solid var(--mud-palette-table-lines);
    padding-bottom:2px;
}

#blazor-error-ui {
    background: lightyellow;
    background-color: var(--mud-palette-error);
    color: var(--mud-palette-error-text);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    padding: 0.6rem 1.75rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 9999;
}

#reconnect-modal {
    background: lightyellow;
    background-color: var(--mud-palette-warning-hover);
    color: var(--mud-palette-warning-darken);
    top: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    padding: 0.6rem 1.75rem 0.7rem 1.25rem;
    margin: 0px;
    position: fixed;
    width: 100%;
    z-index: 9999;
}


.mud-nav-link {
    white-space: normal !important;
}

.user-button {
    text-transform: none;
    background: rgba(var(--mud-palette-primary-rgb), 0.1)
}

.side-menu .mud-chip.mud-chip-size-small {
    font-size: 0.625rem;
    height: 1.125rem;
}
/* ---------------------------------------------------------------------------
   Proverbit type utilities. See Themes/Theme.cs — the palette is Manim's own,
   so UI accents and in-video highlights are literally the same values.
   --------------------------------------------------------------------------- */

/* Figures: durations, counts, costs, token totals. Tabular so columns of numbers
   line up and do not jitter as they tick during a render. */
.num {
    font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* Opt-in display face for titles that are content rather than chrome — a video's
   topic, a scene heading. Chrome (nav, labels, buttons) stays sans on purpose. */
.serif {
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    letter-spacing: -0.01em;
}

/* ── Public pages ───────────────────────────────────────────────────────────
   The layout a stranger sees. Plain CSS rather than MudBlazor layout components
   because these pages render statically: what ships is the HTML, so it should be
   the smallest honest amount of it. */

/* The full-bleed band below uses calc(50% - 50vw), and 50vw counts the scrollbar while 50% does not
   — so the band comes out exactly one scrollbar too wide and the page scrolls sideways by 10px. clip
   rather than hidden: clip does not establish a scroll container, so a sticky header still sticks. */
.pvx-public {
    overflow-x: clip;
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

/* The margins of a wide screen. The column stops at 1100px, and past about 1400px what is left either
   side was flat black from the hero down — the page read as a strip in a void. This carries the hero's
   ground on into those margins: the same two glows and the same construction grid, held to the window
   so they stay put while the page scrolls, and faded out before they reach the column so nothing is
   ever read against them. Deliberately fainter than the hero: it is the wall behind the drawing, not
   another drawing. */
@media (min-width: 1400px) {
    .pvx-public { isolation: isolate; }

    .pvx-public::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background:
            radial-gradient(38rem 34rem at 0% 30%,
                rgba(var(--mud-palette-primary-rgb), 0.09), transparent 70%),
            radial-gradient(38rem 34rem at 100% 72%,
                rgba(var(--mud-palette-tertiary-rgb), 0.08), transparent 70%),
            repeating-linear-gradient(to right,
                rgba(var(--mud-palette-primary-rgb), 0.07) 0 1px, transparent 1px 96px),
            repeating-linear-gradient(to bottom,
                rgba(var(--mud-palette-primary-rgb), 0.07) 0 1px, transparent 1px 96px);
        background-position: 0 0, 0 0, 50% 0, 0 0;
        -webkit-mask-image: linear-gradient(to right,
            #000 0, #000 calc(50% - 640px), transparent calc(50% - 560px),
            transparent calc(50% + 560px), #000 calc(50% + 640px), #000 100%);
        mask-image: linear-gradient(to right,
            #000 0, #000 calc(50% - 640px), transparent calc(50% - 560px),
            transparent calc(50% + 560px), #000 calc(50% + 640px), #000 100%);
    }
}

.pvx-public-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.5rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.pvx-wordmark {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
}

.pvx-public-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.pvx-public-nav a {
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
    font-size: 0.95rem;
}

.pvx-public-nav a:hover { color: var(--mud-palette-text-primary); }

/* The phone menu: hidden on wide screens, where the links sit inline. */
.pvx-public-menu { display: none; position: relative; }
.pvx-public-menu > summary { list-style: none; display: grid; place-content: center; gap: 4px; width: 44px; height: 44px; border-radius: 10px; cursor: pointer; }
.pvx-public-menu > summary::-webkit-details-marker { display: none; }
.pvx-public-menu > summary span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--mud-palette-text-primary); transition: transform .2s, opacity .2s; }
.pvx-public-menu[open] > summary span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.pvx-public-menu[open] > summary span:nth-child(2) { opacity: 0; }
.pvx-public-menu[open] > summary span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.pvx-public-menu > summary:focus-visible { outline: 2px solid var(--mud-palette-primary); }
.pvx-public-sheet { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; display: flex; flex-direction: column; min-width: 200px; padding: 6px; border: 1px solid var(--mud-palette-lines-default); border-radius: 14px; background: var(--mud-palette-surface); box-shadow: 0 12px 32px rgba(0, 0, 0, .35); }
.pvx-public-sheet a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 10px; color: var(--mud-palette-text-primary) !important; font-size: 1rem !important; }
.pvx-public-sheet a:hover { background: var(--mud-palette-background-gray, var(--mud-palette-background)); }

@media (max-width: 640px) {
    .pvx-public-header { padding: 0.5rem 1rem; }
    .pvx-public-nav { gap: 0.5rem; }
    .pvx-public-link { display: none; }
    .pvx-public-menu { display: block; }
}

@media (prefers-reduced-motion: reduce) {
    .pvx-public-menu > summary span { transition: none; }
}

.pvx-public-nav a.pvx-public-cta {
    color: var(--mud-palette-primary-text);
    background: var(--mud-palette-primary);
    border-radius: 6px;
    padding: 0.4rem 0.9rem;
}

.pvx-public-main {
    flex: 1 1 auto;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
}

.pvx-public-footer {
    display: flex;
    /* Eight links and a copyright line do not fit one row on a phone. Without this they simply ran off
       the side — invisible now that .pvx-public clips, and a sideways scrollbar before that. */
    flex-wrap: wrap;
    gap: 0.6rem 1.25rem;
    justify-content: center;
    padding: 1.5rem;
    border-top: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
    font-size: 0.85rem;
}

.pvx-public-footer a { color: inherit; }

/* Landing page.

   The backdrop is a construction drawing — axes, a plotted curve, a unit circle with its radius
   swept out — because that is literally what this product makes. A stock gradient would describe
   nothing; these are the marks Manim leaves, in the palette the videos themselves use. It is drawn
   as one inline SVG rather than an image file so it costs no request, scales to any width, and
   follows the theme's own colours in both light and dark. */

.pvx-stage {
    position: relative;
    isolation: isolate;
    /* Out to the edges of the page, past the main column's padding. */
    margin: -2.5rem calc(50% - 50vw) 0;
    padding: 4.5rem calc(50vw - 50%) 3.5rem;
    overflow: hidden;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background:
        radial-gradient(60rem 32rem at 78% 18%,
            rgba(var(--mud-palette-primary-rgb), 0.10), transparent 70%),
        radial-gradient(44rem 26rem at 8% 96%,
            rgba(var(--mud-palette-tertiary-rgb), 0.08), transparent 72%),
        var(--mud-palette-background);
}

.pvx-figure {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

/* Every mark is a line unless it says otherwise — an SVG path defaults to a solid black fill, which
   turns a plotted curve into a black blob. Hairlines also hold their weight at any size: the viewBox
   does the scaling, and vector-effect keeps a 1px stroke from thickening into a rule on a wide
   screen. */
.pvx-figure path,
.pvx-figure circle,
.pvx-figure rect {
    fill: none;
    vector-effect: non-scaling-stroke;
}

.pvx-fig-grid   { stroke: var(--mud-palette-lines-default); stroke-width: 1; }
.pvx-fig-axis   { stroke: var(--mud-palette-text-secondary); stroke-width: 1.25; opacity: 0.45; }
.pvx-fig-curve  { stroke: var(--mud-palette-primary); stroke-width: 2; opacity: 0.75; }
.pvx-fig-circle { stroke: var(--mud-palette-tertiary); stroke-width: 1.75; opacity: 0.6; }
.pvx-fig-radius { stroke: var(--mud-palette-success); stroke-width: 1.75; opacity: 0.8; }
/* The two marks that are areas rather than lines, scoped past the blanket fill:none above. */
.pvx-figure .pvx-fig-area { fill: rgba(var(--mud-palette-primary-rgb), 0.07); stroke: none; }
.pvx-figure .pvx-fig-dot  { fill: var(--mud-palette-success); stroke: none; }

/* Added for the per-page figures in Components/Shared/PageStage.razor. Same principle as above: a
   structural mark is a hairline in the line colour, the one mark that matters is drawn in the accent,
   and anything with area is scoped past the blanket fill:none. */
.pvx-fig-frame { stroke: var(--mud-palette-lines-default); stroke-width: 1.5; }
.pvx-fig-key   { stroke: var(--mud-palette-primary); stroke-width: 2; opacity: 0.85; }
.pvx-figure .pvx-fig-bar  { fill: rgba(var(--mud-palette-primary-rgb), 0.10); stroke: none; }
/* Both of these are set on a <g> as well as on single shapes, and fill does not inherit past the
   blanket `.pvx-figure circle { fill: none }` above — that rule targets the shape directly and wins on
   the child every time. Stroke slipped through because nothing sets stroke on a bare shape. So the
   descendants are named explicitly; without this the nodes and the satellites are invisible. */
.pvx-figure .pvx-fig-play,
.pvx-figure .pvx-fig-play circle,
.pvx-figure .pvx-fig-play path { fill: var(--mud-palette-primary); stroke: none; opacity: 0.75; }

/* Nodes sit ON the line they punctuate, so they need the ground painted back in behind them. */
.pvx-figure .pvx-fig-node,
.pvx-figure .pvx-fig-node circle {
    fill: var(--mud-palette-background);
    stroke: var(--mud-palette-primary);
    stroke-width: 2;
    opacity: 0.85;
}

/* A page whose content matters more than its heading gets a shallower band — the library and the
   series pages are lists, and a hero the height of the landing page's would push the first row of
   them below the fold. */
.pvx-stage-compact {
    padding-top: 3rem;
    padding-bottom: 2.5rem;
}

.pvx-hero-wide { max-width: none; }

/* Inside the signed-in shell the content column is not centred in the window, so the band stays put
   and becomes a panel instead. Same drawing, same palette, no bleed. */
.pvx-stage-contained {
    margin: 0 0 1.5rem;
    padding: 2.25rem 2rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

/* The legal set gets the grid and nothing else. These pages are read rather than browsed, so the
   backdrop is drawn straight in CSS — no figure, and no markup change to five files — and it still
   says the page belongs to the same drawing. */
.pvx-legal {
    position: relative;
    background-image:
        repeating-linear-gradient(to right,
            var(--mud-palette-lines-default) 0 1px, transparent 1px 120px),
        repeating-linear-gradient(to bottom,
            var(--mud-palette-lines-default) 0 1px, transparent 1px 120px);
    background-position: 50% 0;
    background-attachment: fixed;
}

/* Text sits above its own backdrop, never inside it. */
.pvx-legal > * { position: relative; }

/* The one piece of motion on the page: the construction draws itself once, the way it would in a
   video, then stops. Lengths are generous over-estimates — a dash longer than the path simply
   finishes early.

   The hidden state lives inside the keyframes rather than on the element, so a browser that never
   runs the animation — reduced motion, an unpainted tab, anything older — shows the finished drawing
   instead of a blank rectangle. */
.pvx-fig-draw { animation: pvx-draw 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) backwards; }
.pvx-fig-draw-late { animation-delay: 0.45s; }
.pvx-fig-fade { animation: pvx-fade 0.9s ease-out 1.5s backwards; }

@keyframes pvx-draw {
    from { stroke-dasharray: 1400; stroke-dashoffset: 1400; }
    to   { stroke-dasharray: 1400; stroke-dashoffset: 0; }
}

@keyframes pvx-fade { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .pvx-fig-draw,
    .pvx-fig-fade { animation: none; }
}

/* On a phone the drawing sits directly behind the words rather than beside them, so it steps back to
   a watermark. The alternative — hiding it — loses the one thing that says what this product makes. */
@media (max-width: 700px) {
    .pvx-figure { opacity: 0.4; }
    .pvx-stage { padding-top: 3rem; padding-bottom: 2.75rem; }
}

.pvx-hero {
    padding: 0;
    max-width: 42rem;
}

/* Says what the thing is in the vocabulary of the thing: set in the same monospace the app uses for
   figures, because this line is a label on a drawing, not a slogan. */
/* Scoped through .pvx-hero on purpose: .pvx-hero p below is the more specific selector and would
   otherwise repaint this line in the body colour. */
.pvx-hero .pvx-eyebrow {
    font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mud-palette-primary);
    margin: 0 0 1.1rem;
    max-width: none;
}

.pvx-hero h1 {
    font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
    font-size: clamp(2.1rem, 5.4vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin: 0 0 1.15rem;
}

.pvx-hero p {
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--mud-palette-text-secondary);
    margin: 0 0 2rem;
    max-width: 34rem;
}

.pvx-hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* What happens after the button, for the visit that arrives before the library has anything public
   in it. Three steps, numbered because they are genuinely ordered — the second cannot happen before
   the first. */

.pvx-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.75rem;
    margin: 3rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: pvx-step;
}

.pvx-step { border-top: 2px solid var(--mud-palette-primary); padding-top: 0.9rem; }

.pvx-step::before {
    counter-increment: pvx-step;
    content: counter(pvx-step, decimal-leading-zero);
    display: block;
    font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    color: var(--mud-palette-primary);
    margin-bottom: 0.5rem;
}

.pvx-step h3 {
    font-size: 1.02rem;
    font-weight: 600;
    margin: 0 0 0.35rem;
}

.pvx-step p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--mud-palette-text-secondary);
}

/* Section headings on the public pages. The rule to the right of the words is the same hairline the
   figure is drawn in, so the page reads as one drawing rather than a stack of boxes. */
.pvx-section-title {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 1.25rem;
}

.pvx-section-title::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--mud-palette-lines-default);
}

.pvx-btn {
    display: inline-block;
    padding: 0.7rem 1.4rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
}

.pvx-btn-primary { background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }

.pvx-btn-quiet {
    border: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-primary);
}

/* The video grid, shared by the landing page and the library. */

.pvx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.75rem 1.25rem;
}

.pvx-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background: var(--mud-palette-surface);
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.pvx-card:hover,
.pvx-card:focus-visible {
    border-color: var(--mud-palette-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.pvx-card:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .pvx-card { transition: none; }
    .pvx-card:hover, .pvx-card:focus-visible { transform: none; }
}

/* The poster is the card. The length sits on it, as on every video site, so the text underneath has
   one job: say what the video is. */
.pvx-card-media {
    position: relative;
    display: block;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.pvx-card-poster {
    aspect-ratio: 16 / 9;
    width: 100%;
    object-fit: cover;
    display: block;
    background: var(--mud-palette-background-grey);
}

.pvx-card-length {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.pvx-card-body { padding: 0.8rem 0.95rem 0.95rem; }

/* Two lines and no more. A title is often the whole prompt somebody typed — several hundred characters —
   and unclamped it made the text taller than the poster and every card a different height. The full
   text is the link's title attribute and the watch page's heading. */
.pvx-card-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.005em;
    margin-bottom: 0.4rem;
    /* Two lines reserved even when one is used, so a short title does not make a short card and every
       row of the grid lines up. */
    min-height: 2.6em;
}

.pvx-card-meta {
    display: block;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The series line. Set apart from the rest of the card's metadata rather than appended to it: "part 3"
   is a promise that parts 1 and 2 exist, which is a different kind of fact from a duration. */
.pvx-card-series {
    display: block;
    margin: 0.1rem 0 0.35rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mud-palette-primary);
}

/* Chapter links on the watch page. Anchors rather than list buttons: a chapter is a position in the
   video, which is a URL, and the page has no circuit to route a click through. */

.pvx-chapter {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
}

.pvx-chapter:hover { background: var(--mud-palette-action-default-hover); }

.pvx-chapter-title { flex: 1 1 auto; font-size: 0.9rem; }

.pvx-chapter-time { font-size: 0.8rem; color: var(--mud-palette-text-secondary); }

/* The library's search form. A plain input so its value survives static rendering. */

.pvx-search { display: flex; gap: 0.5rem; max-width: 640px; }

.pvx-search input {
    flex: 1 1 auto;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--mud-palette-lines-input);
    border-radius: 6px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
}

.pvx-search input:focus {
    outline: none;
    border-color: var(--mud-palette-primary);
}

/* The invite-request form. Plain controls, since the page is statically rendered and posts over HTTP. */

.pvx-form {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-width: 34rem;
}

.pvx-form label {
    font-size: 0.9rem;
    font-weight: 600;
    margin-top: 0.75rem;
}

.pvx-optional {
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
}

.pvx-form input,
.pvx-form textarea {
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--mud-palette-lines-input);
    border-radius: 6px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
}

.pvx-form input:focus,
.pvx-form textarea:focus {
    outline: none;
    border-color: var(--mud-palette-primary);
}

.pvx-form button { margin-top: 1.25rem; align-self: flex-start; border: none; cursor: pointer; font: inherit; }

.pvx-form-error,
.pvx-form .validation-message {
    color: var(--mud-palette-error);
    font-size: 0.85rem;
    margin: 0.25rem 0 0;
}

/* ── Pricing ────────────────────────────────────────────────────────────── */

.pvx-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.25rem;
    align-items: stretch;
}

.pvx-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.35rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-surface);
}

.pvx-plan-featured { border-color: var(--mud-palette-primary); border-width: 2px; }

.pvx-plan-flag {
    position: absolute;
    top: -0.7rem;
    left: 1.25rem;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    border-radius: 999px;
    padding: 0.15rem 0.7rem;
    font-size: 0.7rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.pvx-plan-name { font-size: 1.05rem; margin: 0 0 0.5rem; }

.pvx-plan-price { margin: 0 0 0.5rem; display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; }
.pvx-plan-price strong { font-size: 2rem; line-height: 1; }
.pvx-plan-cadence { font-size: 0.8rem; color: var(--mud-palette-text-secondary); }

.pvx-plan-summary { margin: 0 0 0.9rem; font-size: 0.9rem; color: var(--mud-palette-text-secondary); }

.pvx-plan-allowance {
    margin: 0 0 0.9rem;
    padding: 0.6rem 0.75rem;
    border-radius: 6px;
    background: var(--mud-palette-background-grey);
    font-size: 0.85rem;
}

.pvx-plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    font-size: 0.88rem;
    line-height: 1.7;
    flex: 1 1 auto;
}

.pvx-plan-features li { padding-left: 1.1rem; position: relative; }
.pvx-plan-features li::before { content: "·"; position: absolute; left: 0.35rem; }

.pvx-plan .pvx-btn { text-align: center; }

.pvx-addon {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    margin-top: 2.5rem;
    padding: 1.5rem;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 10px;
}

.pvx-faq { margin-top: 3rem; max-width: 44rem; }
.pvx-faq p { font-size: 0.92rem; line-height: 1.7; color: var(--mud-palette-text-secondary); }
.pvx-faq strong { color: var(--mud-palette-text-primary); }

/* ── Legal pages ────────────────────────────────────────────────────────── */

.pvx-legal { max-width: 44rem; }
.pvx-legal h1 { font-family: Georgia, "Iowan Old Style", serif; font-size: 2rem; margin: 0 0 0.35rem; }
.pvx-legal h2 { font-size: 1.15rem; margin: 2rem 0 0.6rem; }
.pvx-legal h3 { font-size: 1rem; margin: 1.4rem 0 0.4rem; }
.pvx-legal p, .pvx-legal li { line-height: 1.75; font-size: 0.95rem; }
.pvx-legal ul { padding-left: 1.2rem; }
.pvx-legal-date { color: var(--mud-palette-text-secondary); font-size: 0.85rem; margin-top: 0; }

/* Front-door honeypot (RequestInvite, Register, ExternalLogin). Off-screen rather than display:none —
   some bots skip fields that are display:none, few bother computing layout. aria-hidden and tabindex -1
   on the markup keep it away from screen readers and keyboards. */
.pvx-hp {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* ============================================================================
   Wide pages: the library and the watch page.

   Everything else public is read, so it keeps the 1100px column. These two are
   watched, and a column that narrow on a wide monitor made a video site look like
   a document with pictures in it. A page opts in by wrapping itself in .pvx-wide;
   the margin backdrop is switched off there, because there is no margin left.
   ============================================================================ */

.pvx-public-main:has(.pvx-wide) {
    max-width: 1760px;
    padding: 1.5rem clamp(1rem, 2.5vw, 2.5rem) 4rem;
}

.pvx-public:has(.pvx-wide)::before { display: none; }

/* A small label above a heading: what kind of thing this is, in the app's monospace. */
.pvx-kicker {
    display: block;
    font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mud-palette-primary);
    text-decoration: none;
    margin-bottom: 0.4rem;
}

a.pvx-kicker:hover { text-decoration: underline; }

/* --- Library ---------------------------------------------------------------- */

.pvx-libhead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.75rem;
}

.pvx-libhead h1 {
    font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0;
}

.pvx-libhead .pvx-search { flex: 0 1 460px; }
.pvx-libhead .pvx-search input { flex: 1 1 auto; min-width: 0; }
.pvx-search button.pvx-btn { border: 0; cursor: pointer; font: inherit; font-weight: 500; padding: 0.55rem 1.2rem; }

.pvx-libempty { padding: 5rem 1rem; text-align: center; color: var(--mud-palette-text-secondary); }

/* The one video given the room. Poster on the left at cinema size, a few words on the right. */
.pvx-feature {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.25rem, 3vw, 3rem);
    margin-bottom: 2.5rem;
    padding: clamp(0.75rem, 1.5vw, 1.25rem);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 18px;
    text-decoration: none;
    color: inherit;
    background:
        radial-gradient(60rem 30rem at 100% 0%, rgba(var(--mud-palette-primary-rgb), 0.10), transparent 70%),
        var(--mud-palette-surface);
    transition: border-color 0.15s ease;
}

.pvx-feature:hover { border-color: var(--mud-palette-primary); }
.pvx-feature .pvx-card-media { border: 0; border-radius: 12px; overflow: hidden; }
.pvx-feature-text { display: block; padding-right: clamp(0rem, 2vw, 2rem); }

.pvx-feature-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
    font-size: clamp(1.5rem, 2.4vw, 2.4rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-bottom: 0.75rem;
}

.pvx-feature-cta { margin-top: 1.25rem; padding: 0.6rem 1.5rem; }

/* The wall: posters first, with no card around them. The frame is the poster's own rounded edge. */
.pvx-grid-wall {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem 1.25rem;
}

.pvx-grid-wall .pvx-card,
.pvx-grid-wall .pvx-card:hover,
.pvx-grid-wall .pvx-card:focus-visible {
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    transform: none;
}

.pvx-grid-wall .pvx-card-media {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.15s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.pvx-grid-wall .pvx-card:hover .pvx-card-media,
.pvx-grid-wall .pvx-card:focus-visible .pvx-card-media {
    border-color: var(--mud-palette-primary);
    transform: scale(1.025);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.pvx-grid-wall .pvx-card-body { padding: 0.75rem 0.15rem 0; }
.pvx-grid-wall .pvx-card-title { font-size: 1.02rem; }

.pvx-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2.5rem;
}

.pvx-pager .pvx-btn { padding: 0.5rem 1.1rem; margin-left: 0.5rem; }

/* --- Watch ------------------------------------------------------------------ */

.pvx-watch { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }

.pvx-watch-player {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    /* Never taller than the window, so the title under it is on screen without scrolling. */
    max-height: calc(100dvh - 11rem);
    border-radius: 14px;
    background: #000;
}

.pvx-watchnav { display: flex; justify-content: space-between; gap: 0.75rem; margin: 0.85rem 0 1.4rem; }

.pvx-watchnav a {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    max-width: 48%;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease;
}

.pvx-watchnav a:hover { border-color: var(--mud-palette-primary); }
.pvx-watchnav-next { margin-left: auto; text-align: right; }
.pvx-watchnav small { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mud-palette-primary); }
.pvx-watchnav span { font-size: 0.9rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* A title is often the whole prompt somebody typed. Three lines, then it stops; the rest is a tooltip. */
.pvx-watch-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
    font-size: clamp(1.45rem, 2.1vw, 2.05rem);
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -0.01em;
    margin: 0 0 0.85rem;
}

.pvx-watch-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem 1rem; }
.pvx-watch-views { font-size: 0.85rem; color: var(--mud-palette-text-secondary); }
.pvx-watch-make { margin-left: auto; padding: 0.5rem 1.1rem; font-size: 0.9rem; }

.pvx-watch-desc {
    max-width: 70ch;
    margin: 1.1rem 0 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--mud-palette-text-secondary);
}

.pvx-chapters { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.15rem 1rem; padding: 0.25rem 0 0.5rem; }
.pvx-chapters .pvx-chapter-time { min-width: 3.2rem; color: var(--mud-palette-primary); }

.pvx-watch-small { margin: 1.5rem 0 0; font-size: 0.78rem; line-height: 1.5; color: var(--mud-palette-text-secondary); }
.pvx-watch-small a { color: inherit; }

/* The rail: a small poster and two lines, the way every video site lists what is next. */
.pvx-rail-heading {
    font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin: 0 0 0.9rem;
}

.pvx-rail-item {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    padding: 0.4rem;
    margin: 0 -0.4rem 0.35rem;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.15s ease;
}

.pvx-rail-item:hover,
.pvx-rail-item:focus-visible { background: var(--mud-palette-surface); }

.pvx-rail-item .pvx-card-media { border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; overflow: hidden; }
.pvx-rail-item .pvx-card-length { right: 0.3rem; bottom: 0.3rem; font-size: 0.68rem; }
.pvx-rail-item .pvx-card-series { margin: 0 0 0.2rem; }
.pvx-rail-text { display: block; min-width: 0; padding-top: 0.1rem; }

.pvx-rail-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.3rem;
}

/* Side by side once there is room for both. The rail sits on the left, as asked, and stays in view
   while the page under the player scrolls. To move it to the right, delete the `order` line. */
@media (min-width: 1100px) {
    .pvx-watch { grid-template-columns: 400px minmax(0, 1fr); gap: 2.25rem; align-items: start; }

    .pvx-watch-rail {
        order: -1;
        position: sticky;
        top: 1rem;
        max-height: calc(100dvh - 2rem);
        overflow-y: auto;
        padding-right: 0.4rem;
        scrollbar-width: thin;
    }
}

@media (max-width: 760px) {
    .pvx-feature { grid-template-columns: minmax(0, 1fr); }
    .pvx-libhead .pvx-search { flex-basis: 100%; }
    .pvx-rail-item { grid-template-columns: 140px minmax(0, 1fr); }
    .pvx-watch-make { margin-left: 0; }
    .pvx-grid-wall { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

/* The library's filters. Chips that are links: every choice is an address. */
.pvx-filters { display: grid; gap: 0.75rem; margin: -0.5rem 0 2rem; }
.pvx-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.pvx-chips-label { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mud-palette-text-secondary); margin: 0 0.15rem 0 0.6rem; }
.pvx-chips-label:first-child { margin-left: 0; }

.pvx-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 34px;
    padding: 0.3rem 0.85rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    font-size: 0.86rem;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.pvx-chip:hover { border-color: var(--mud-palette-primary); }
.pvx-chip .num { font-size: 0.72rem; color: var(--mud-palette-text-secondary); }
.pvx-chip.is-on { border-color: var(--mud-palette-primary); background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); font-weight: 600; }
.pvx-chip.is-on .num { color: inherit; opacity: 0.75; }
.pvx-chip-clear { border-style: dashed; background: transparent; color: var(--mud-palette-text-secondary); margin-left: 0.5rem; }

/* On a phone the subjects become one row that slides sideways, not five rows that push the videos away. */
@media (max-width: 760px) {
    .pvx-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.25rem; scrollbar-width: none; }
    .pvx-chips::-webkit-scrollbar { display: none; }
}

/* Cookie consent (App.razor, js/consent.js). A bar along the bottom rather than a modal: the page stays
   usable while it is unanswered, and Decline is the same size and weight as Accept — a choice made
   lopsided on purpose is not one the law, or the visitor, counts as free. */
.pvx-consent {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 2000;
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface, #1e1e2d);
    color: var(--mud-palette-text-primary, #fff);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
    font-size: 0.9rem;
    line-height: 1.45;
}

.pvx-consent[hidden] { display: none; }

.pvx-consent p { flex: 1 1 280px; margin: 0; }

.pvx-consent a { color: inherit; text-decoration: underline; }

.pvx-consent-actions { display: flex; gap: 0.5rem; }

.pvx-consent-actions button {
    min-width: 7rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.pvx-consent-actions button:hover,
.pvx-consent-actions button:focus-visible { border-color: var(--mud-palette-primary, #2B7285); }

/* The one exit question (insights.js). Hidden until the pointer leaves through the top of the window;
   bottom-right and small so it asks rather than blocks, and it never returns once answered or closed. */
.pvx-ask {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1900;
    width: min(340px, calc(100vw - 2rem));
    padding: 1rem 1.25rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface, #1b1f24);
    color: var(--mud-palette-text-primary, inherit);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.pvx-ask[hidden], .pvx-ask [hidden] { display: none; }
.pvx-ask-head { display: flex; justify-content: space-between; align-items: start; gap: 0.75rem; }
.pvx-ask-head p { margin: 0; font-weight: 600; }
.pvx-ask-head button { border: 0; background: none; color: inherit; font-size: 1.2rem; cursor: pointer; line-height: 1; }
.pvx-ask-choices { display: grid; gap: 0.4rem; margin-top: 0.75rem; }

.pvx-ask-choices button {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.pvx-ask-choices button:hover,
.pvx-ask-choices button:focus-visible { border-color: var(--mud-palette-primary, #2B7285); }
.pvx-ask-thanks { margin: 0.75rem 0 0; }