/*
 * The panel's brand layer, and a deliberately tiny utility layer beneath it.
 *
 * Filament v5 ships a purely semantic `fi-*` stylesheet and no Tailwind utility
 * layer. Utilities only exist if you register a custom theme via viteTheme(),
 * which would make the entire panel depend on `npm run build` -- lose that step
 * in a deploy and every page loses all styling, a far worse failure than the
 * declarations below.
 *
 * Two things live here as a result. The utilities our own Blade pages need,
 * defined against Filament's custom properties so they track the active theme,
 * with dark variants following the `:where(.dark, .dark *)` convention. And the
 * brand: the accent's text-bearing shades and the two typefaces Filament's
 * single-family font setting cannot express.
 *
 * Anything added here should be one of those two things. A third category is
 * the signal to register a real theme instead, and to prefer Filament's own
 * components over restyling them.
 */

/* layout */
.flex { display: flex; }
.hidden { display: none; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: calc(var(--spacing) * 2); }
.gap-3 { gap: calc(var(--spacing) * 3); }
.gap-4 { gap: calc(var(--spacing) * 4); }
.mt-6 { margin-top: calc(var(--spacing) * 6); }
.mx-1 { margin-inline: calc(var(--spacing) * 1); }
.space-y-4 > * + * { margin-top: calc(var(--spacing) * 4); }

/* type */
.text-sm { font-size: var(--text-sm); line-height: var(--text-sm--line-height); }
.text-base { font-size: var(--text-base); line-height: var(--text-base--line-height); }
.font-medium { font-weight: 500; }

/* colour */
.text-gray-400 { color: var(--gray-400); }
.text-gray-500 { color: var(--gray-500); }
.text-gray-950 { color: var(--gray-950); }
.text-white { color: var(--color-white, #fff); }
.text-danger-400 { color: var(--danger-400); }
.text-danger-600 { color: var(--danger-600); }

:where(.dark, .dark *) .dark\:text-gray-400 { color: var(--gray-400); }
:where(.dark, .dark *) .dark\:text-gray-500 { color: var(--gray-500); }
:where(.dark, .dark *) .dark\:text-white { color: var(--color-white, #fff); }
:where(.dark, .dark *) .dark\:text-danger-400 { color: var(--danger-400); }

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

/*
 * The accent, pinned rather than derived.
 *
 * Filament normalises a seed colour's lightness before generating the ramp, so
 * the brand hex decides the hue and nothing else: seeding #FF65B2 and seeding
 * #C42D77 produce an identical scale, whose 600 lands on #C74C8A. Measured,
 * that is 4.36:1 on white -- under the 4.5:1 that AA asks of a 14px semibold
 * button label, and under it for links too.
 *
 * #C42D77 measures 5.26:1 and #A32560 measures 7.4:1, so the two shades that
 * actually carry text are set here. Everything else -- backgrounds, borders,
 * dark-mode tints -- still comes from the generated ramp, which means a
 * whitelabel still only has to change one hex.
 */
:root {
    --primary-600: #C42D77;
    --primary-700: #A32560;
}

/*
 * A filled button sits one stop down that pair, so its hover state lightens
 * into the accent instead of out of contrast: Filament paints the base with
 * --color-600 and the hover with --color-500, and a hover that gets lighter is
 * a hover that fails AA unless the base starts lower.
 */
.fi-btn.fi-color-primary {
    --color-600: var(--primary-700);
    --color-500: var(--primary-600);
}

/* ------------------------------------------------------------------------
 * Type
 * ---------------------------------------------------------------------- */

/*
 * Two faces, two jobs, loaded as one stylesheet by the panel provider.
 *
 * The body face is Filament's --font-family and needs nothing here. The display
 * serif is the one exception, for the handful of places that are genuinely a
 * title. Everything else -- navigation, column headings, tabs -- is the body
 * face, differentiated by size, weight and tracking rather than by a second
 * family.
 *
 * The fallback stack is spelled out because a failed font request should degrade
 * to a serif, not silently to the body face, which would quietly delete the
 * distinction the face was chosen to make.
 */
:root {
    --brand-font-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
}

/*
 * Fraunces is an optical-size variable face: at heading sizes the higher
 * optical size tightens the spacing and sharpens the contrast, which is the
 * entire reason for choosing it over a static serif.
 */
.fi-header-heading,
.fi-section-header-heading,
.fi-modal-heading,
.fi-topbar .fi-logo,
.fi-sidebar-header .fi-logo {
    font-family: var(--brand-font-display);
    font-optical-sizing: auto;
    font-weight: 600;
    letter-spacing: -0.005em;
}

.fi-header-heading {
    font-variation-settings: 'opsz' 96;
}

.fi-topbar .fi-logo,
.fi-sidebar-header .fi-logo {
    font-variation-settings: 'opsz' 72;
    letter-spacing: -0.01em;
}

/*
 * The wordmark's ceiling.
 *
 * Filament writes the logo height inline on the img and lets the width follow
 * the aspect ratio, which is fine until the aspect ratio is 4.5:1 -- ours is a
 * mark plus a wordmark, so height alone decides how much of the topbar it eats.
 * At the configured height it lands well inside the first cap; that one is a
 * guard against a whitelabel dropping in something wider.
 *
 * object-fit is what makes the cap safe. Width alone would squash the image
 * against its inline height; contain scales the whole thing down inside the box
 * instead, and left alignment keeps it against the edge of the bar rather than
 * drifting into the middle of its own whitespace.
 *
 * These rules only ever apply to an <img>: with no logo configured Filament
 * renders the brand name in a div, where max-width would be a text wrap and
 * object-fit means nothing.
 */
img.fi-logo {
    max-width: 9rem;
    object-fit: contain;
    object-position: left center;
}

/*
 * Below the topbar's own collapse point the bar is fighting the navigation for
 * room, and the logo is the part that can yield -- the mark stays legible at
 * this width and it is the mark people recognise.
 */
@media (max-width: 48rem) {
    img.fi-logo {
        max-width: 6.5rem;
    }
}

/*
 * Labels, not prose. Navigation items and column headings name things rather
 * than say them, so they are set a little smaller and a little tighter than
 * body copy -- in the body face, which is what stops the panel reading like two
 * different products stitched together.
 */
.fi-topbar nav .fi-dropdown-list-item-label,
.fi-topbar-item-label,
.fi-sidebar-item-label,
.fi-tabs-item-label {
    font-size: 0.8125rem;
    letter-spacing: 0.005em;
    font-weight: 500;
}

/* Small caps for the column heads: enough to separate them from the rows. */
.fi-ta-header-cell {
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    font-weight: 600;
    text-transform: uppercase;
}

/*
 * Figures in a table should line up. Proportional digits make a column of
 * five-digit search volumes look ragged and are genuinely harder to compare.
 */
.fi-ta-text-item-label,
.fi-ta-text,
.fi-in-text,
.fi-ta-col-numeric,
[class*="fi-ta"] .fi-ta-text-item-label {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ------------------------------------------------------------------------
 * Navigation
 * ---------------------------------------------------------------------- */

/*
 * The dashboard is the only item carrying an icon, so it is the only one this
 * matches: a house, and no word. Every other item is a word and no icon, which
 * is what makes the house read as "home" rather than as one more destination.
 *
 * Hidden rather than removed. A link whose only content is a decorative icon
 * has no accessible name, so the label stays in the document and leaves the
 * viewport instead.
 */
.fi-topbar-item-btn:has(.fi-topbar-item-icon) .fi-topbar-item-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------------------
 * The plan's hero
 * ---------------------------------------------------------------------- */

/*
 * One dark band at the top of the content plan, and only there.
 *
 * The page is a long light table; giving its heading a ground of its own
 * separates the framing -- what this page is, and what you are meant to do on
 * it -- from the hundred rows of work below. A violet deep enough to carry
 * white, warming towards the accent rather than sitting flat, so it reads as
 * the same family as the pink without competing with it.
 *
 * The table below stays light on purpose. Data wants the highest contrast it
 * can get, and a dark table would spend that on decoration.
 */
.fi-resource-content-ideas .fi-header {
    background-image: linear-gradient(135deg, #241528 0%, #3A1B37 58%, #4B1E43 100%);
    border-radius: var(--radius-xl, 0.75rem);
    padding: calc(var(--spacing) * 6);
}

.fi-resource-content-ideas .fi-header .fi-header-heading {
    color: #fff;
}

/*
 * Muted white rather than a grey: a grey on a coloured ground reads as dirty,
 * where white at reduced opacity keeps the ground's hue showing through it.
 */
.fi-resource-content-ideas .fi-header .fi-header-subheading {
    color: rgb(255 255 255 / 0.68);
}

.fi-resource-content-ideas .fi-header .fi-breadcrumbs-item-label {
    color: rgb(255 255 255 / 0.55);
}

.fi-resource-content-ideas .fi-header .fi-breadcrumbs-item-label:hover {
    color: #fff;
}

.fi-resource-content-ideas .fi-header .fi-breadcrumbs-item-separator {
    color: rgb(255 255 255 / 0.3);
}

/*
 * On the plan itself, the actions go under the title rather than beside it.
 *
 * Filament stacks header actions into a column to the right of the heading,
 * which is the right call for the two or three most pages carry. This one
 * carries nine -- accept, reject, write, status, assign twice, brief, bucket --
 * and past about four the column stops being a column: it squeezes the title
 * into a third of the band, then wraps the buttons into three ragged rows
 * jammed against the right edge, which is where the eye is least likely to be.
 *
 * Given the full width they wrap in reading order from the left, and the title
 * gets its own line back. The hairline is what makes it read as a decision
 * rather than as a row that fell off the end of the heading.
 *
 * Scoped to the record page. The list page's header has one button on it and
 * looks worse for the same treatment.
 */
.fi-resource-content-ideas.fi-resource-view-record-page .fi-header {
    /* `stretch` is the half that matters: Filament centres the two children
       against each other, which would leave the actions the width of their
       own buttons rather than the width of the band. */
    flex-direction: column;
    align-items: stretch;
}

.fi-resource-content-ideas.fi-resource-view-record-page .fi-header .fi-header-actions-ctn {
    /* Filament adds a top margin to drop the actions to the heading's baseline
       when they sit beside it. Below it, that margin is just a gap. */
    margin-top: 0;
    padding-top: calc(var(--spacing) * 5);
    border-top: 1px solid rgb(255 255 255 / 0.12);
}

/* ------------------------------------------------------------------------
 * Table rows
 * ---------------------------------------------------------------------- */

/*
 * Every row highlights on hover, not only the ones that lead somewhere.
 *
 * Filament reserves this for `.fi-clickable` rows, which is defensible -- the
 * highlight is a promise of a click target. But on a table this wide the
 * highlight does a second job that has nothing to do with clicking: it is how
 * you keep your eye on one row while reading across to the volume column. So
 * pointing at the title lights the whole row, and the cursor still says whether
 * there is anything to click.
 */
.fi-ta-row:hover {
    background-color: var(--gray-50);
}

:where(.dark, .dark *) .fi-ta-row:hover {
    background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
}

/*
 * Cells give way rather than pushing the table sideways.
 *
 * A table wider than the window is one you read by dragging, and the plan is
 * meant to be read. Long titles and long keywords wrap instead of setting a
 * min-content width nothing can shrink past.
 */
.fi-ta-cell,
.fi-ta-header-cell {
    overflow-wrap: anywhere;
}

/*
 * The plan is laid out to the width of the window, not to its contents.
 *
 * Measured before deciding: with `table-layout: auto` this table would not go
 * below 963px however few columns it had, because Filament sets cells to
 * `white-space: nowrap` and the title column's floor was 421px of that on its
 * own. No amount of trimming columns fixes a floor.
 *
 * So the columns are told their widths -- four of them in PHP, where the
 * numbers sit next to the data they size -- and the title takes whatever is
 * left. Scoped to this table because it is the one whose columns have been
 * chosen for it; a fixed layout imposed on a table nobody has measured is how
 * you get truncated data somewhere else.
 */
.fi-resource-content-ideas .fi-ta-table {
    table-layout: fixed;
    width: 100%;
}

/* The two Filament adds itself, which have no PHP column to carry a width. */
.fi-resource-content-ideas .fi-ta-selection-cell {
    width: 3rem;
}

.fi-resource-content-ideas .fi-ta-actions-cell,
.fi-resource-content-ideas .fi-ta-actions-header-cell {
    width: 8rem;
}

/*
 * A floor for the title, so a narrow window squeezes the table into its scroll
 * container rather than crushing the one column that has something to say. The
 * numbers are all fixed-width; the prose is the part that must stay readable.
 */
.fi-resource-content-ideas .fi-ta-header-cell-title {
    min-width: 14rem;
}

/*
 * The group header band spans every column, so its own refusal to wrap sets a
 * floor for the whole table -- it was holding the table at 935px after the
 * columns themselves had been pinned. A silo name is a phrase; let it break.
 */
.fi-ta-group-header,
.fi-ta-group-heading,
.fi-ta-group-description {
    white-space: normal;
}

/* ------------------------------------------------------------------------
 * Grouped tables
 * ---------------------------------------------------------------------- */

/*
 * The content plan is grouped by silo, and the groups collapse -- but Filament
 * paints the header band in --gray-50 and parks the chevron at the far right as
 * a ghost button, which is close enough to a table row that nobody discovers it
 * is a control at all.
 *
 * So: a stronger band, and the chevron moved to the front where a disclosure
 * triangle belongs. Nothing here changes behaviour; the click target was always
 * the header itself.
 *
 * The row selector is doubled to `.fi-ta-row.fi-ta-group-header-row` because
 * that is how Filament qualifies its own rule. Matching it selector-for-selector
 * is not stylistic: at lower specificity the band paints in two colours, the
 * header in ours and the cells around it -- the checkbox cell especially -- in
 * theirs, which is exactly the seam this is fixing.
 */
.fi-ta-row.fi-ta-group-header-row > td,
.fi-ta-group-header {
    background-color: var(--gray-100);
}

.fi-ta-group-header {
    border-block-color: var(--gray-300);
    padding-block: calc(var(--spacing) * 2.5);
    transition: background-color 75ms;
}

/*
 * Hover is driven from the row, so the whole band moves together. Hanging it
 * off the header alone left the checkbox cell behind, which reads as a seam in
 * what is meant to be one strip.
 */
.fi-ta-row.fi-ta-group-header-row:hover > td,
.fi-ta-row.fi-ta-group-header-row:hover .fi-ta-group-header {
    background-color: var(--gray-200);
}

/*
 * Filament renders the heading first and the button last. Reordering in CSS
 * rather than overriding the view keeps this to a stylesheet change -- and the
 * button stays last in the DOM, which is the correct reading order for a
 * control that acts on the heading before it.
 */
.fi-ta-group-header.fi-collapsible > .fi-icon-btn {
    order: -1;
    background-color: var(--gray-50);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md, 0.375rem);
    color: var(--gray-700);
    /* Filament rotates this by 180deg when collapsed; the transition is what
       makes the rotation legible as an open/shut gesture rather than a jump. */
    transition: rotate 150ms, background-color 75ms, border-color 75ms;
}

.fi-ta-row.fi-ta-group-header-row:hover .fi-ta-group-header.fi-collapsible > .fi-icon-btn {
    background-color: var(--color-white, #fff);
    border-color: var(--gray-400);
    color: var(--gray-950);
}

/*
 * The heading and its description share an unclassed wrapper, which stretches
 * the full table width and runs a silo's rationale out under the numeric
 * columns. Capped so the text reads as a paragraph belonging to the title
 * rather than a line spanning the whole table.
 */
.fi-ta-group-header > div {
    max-width: 60%;
    min-width: 0;
}

/* The silo name is the title of a section, so it is set like one. */
.fi-ta-group-heading {
    font-family: var(--brand-font-display);
    font-optical-sizing: auto;
    font-size: var(--text-base);
    font-weight: 600;
    letter-spacing: -0.005em;
}

.fi-ta-group-description {
    color: var(--gray-500);
}

:where(.dark, .dark *) .fi-ta-row.fi-ta-group-header-row > td,
:where(.dark, .dark *) .fi-ta-group-header {
    background-color: color-mix(in oklab, var(--color-white) 8%, transparent);
    border-block-color: color-mix(in oklab, var(--color-white) 12%, transparent);
}

:where(.dark, .dark *) .fi-ta-row.fi-ta-group-header-row:hover > td,
:where(.dark, .dark *) .fi-ta-row.fi-ta-group-header-row:hover .fi-ta-group-header,
:where(.dark, .dark *) .fi-ta-row.fi-ta-group-header-row:hover .fi-ta-group-header.fi-collapsible > .fi-icon-btn {
    background-color: color-mix(in oklab, var(--color-white) 14%, transparent);
}

:where(.dark, .dark *) .fi-ta-group-header.fi-collapsible > .fi-icon-btn {
    background-color: color-mix(in oklab, var(--color-white) 6%, transparent);
    border-color: color-mix(in oklab, var(--color-white) 16%, transparent);
    color: var(--gray-300);
}

/* ------------------------------------------------------------------------
 * Metric markers
 * ---------------------------------------------------------------------- */

/*
 * A figure and a bar under it, for the columns where the size of the number
 * matters more than the number.
 *
 * The bar is scaled against the largest volume in the team's own plan rather
 * than against whatever happens to be on this page, so it does not silently
 * re-scale as you paginate -- a bar that changes length when the data has not
 * is worse than no bar.
 */
.fi-metric {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: calc(var(--spacing) * 1);
    min-width: 4.5rem;
}

/*
 * The two things this column says when there is no figure: go and find out, or
 * there is nothing to find out. Both are quieter than a number, because neither
 * is one.
 */
.fi-metric-lookup {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--primary-600);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in oklab, var(--primary-600) 35%, transparent);
}

.fi-metric-lookup:hover {
    text-decoration-color: currentColor;
}

.fi-metric-none {
    font-size: var(--text-sm);
    color: var(--gray-400);
}

.fi-metric-track {
    width: 100%;
    height: 0.25rem;
    border-radius: 9999px;
    background-color: var(--gray-200);
    overflow: hidden;
}

.fi-metric-fill {
    display: block;
    height: 100%;
    border-radius: 9999px;
    background-color: var(--primary-600);
}

:where(.dark, .dark *) .fi-metric-track {
    background-color: color-mix(in oklab, var(--color-white) 12%, transparent);
}

/* The SERP panel's auto-load switch. Small, but it governs spending. */
.fi-serp-autoload {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-md, 0.375rem);
    padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: 500;
    color: var(--gray-500);
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    cursor: pointer;
    transition: color 75ms, background-color 75ms, border-color 75ms;
}

.fi-serp-autoload:hover {
    color: var(--gray-700);
    border-color: var(--gray-300);
}

.fi-serp-autoload-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: var(--gray-300);
    transition: background-color 75ms;
}

.fi-serp-autoload.fi-on {
    color: var(--primary-700);
    background: var(--primary-50);
    border-color: var(--primary-200);
}

.fi-serp-autoload.fi-on .fi-serp-autoload-dot {
    background: var(--primary-600);
}

:where(.dark, .dark *) .fi-serp-autoload {
    color: var(--gray-400);
    background: var(--gray-800);
    border-color: var(--gray-700);
}

:where(.dark, .dark *) .fi-serp-autoload.fi-on {
    color: var(--primary-300);
    background: color-mix(in oklab, var(--primary-500) 15%, transparent);
    border-color: color-mix(in oklab, var(--primary-500) 35%, transparent);
}

/* The line under a results table that loads the next page as it comes into view. */
.fi-research-more {
    display: flex;
    justify-content: center;
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--gray-500);
    text-align: center;
}

.fi-research-more-sentinel {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
}

:where(.dark, .dark *) .fi-research-more {
    color: var(--gray-400);
}

/* ------------------------------------------------------------------------
 * Markdown source, with the syntax showing
 * ---------------------------------------------------------------------- */

/*
 * A generated draft, rendered by App\Support\MarkdownHighlighter.
 *
 * The requirement is both things at once: the markers stay on screen and the
 * formatting is applied anyway. So `##` is visible and muted, and the heading
 * beside it is actually a heading. You can read the page and see how it is
 * marked up in one pass, and what you copy is exactly what you looked at --
 * which is the point, because the next thing that happens to this text is that
 * somebody pastes it into a CMS.
 *
 * Written against Filament's own custom properties rather than utility classes:
 * the panel CSS Filament ships is semantic (fi-*), so a Tailwind class here
 * would simply not exist at runtime.
 *
 * This is the one place a monospace face is right, and it does not contradict
 * the no-mono rule for chrome: a source view *is* content, and the alignment of
 * a markdown table depends on it.
 */
.md-source {
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    line-height: 1.75;
    color: var(--gray-800);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    tab-size: 2;
    margin: 0;
}

:where(.dark, .dark *) .md-source {
    color: var(--gray-200);
}

/*
 * The markers. Deliberately quiet: they are scaffolding, and at full contrast
 * they compete with the words for attention, which defeats the whole idea.
 * Never `display: none` -- that is the other product.
 */
.md-source .md-mark {
    color: color-mix(in oklab, var(--primary-500) 55%, var(--gray-400));
    font-weight: 400;
    opacity: 0.75;
}

:where(.dark, .dark *) .md-source .md-mark {
    color: color-mix(in oklab, var(--primary-400) 50%, var(--gray-500));
}

/* Headings are sized by level, so the document's shape is legible at a glance. */
.md-source .md-h1,
.md-source .md-h2,
.md-source .md-h3,
.md-source .md-h4,
.md-source .md-h5,
.md-source .md-h6 {
    display: inline-block;
    font-family: var(--brand-font-display);
    font-optical-sizing: auto;
    font-weight: 600;
    color: var(--gray-950);
    letter-spacing: -0.01em;
}

.md-source .md-h1 { font-size: 1.5rem; line-height: 1.3; }
.md-source .md-h2 { font-size: 1.25rem; line-height: 1.35; }
.md-source .md-h3 { font-size: 1.0625rem; }
.md-source .md-h4,
.md-source .md-h5,
.md-source .md-h6 { font-size: 0.9375rem; }

:where(.dark, .dark *) .md-source :is(.md-h1, .md-h2, .md-h3, .md-h4, .md-h5, .md-h6) {
    color: var(--gray-50);
}

/* A heading's own marker keeps the mono face, so the level stays countable. */
.md-source :is(.md-h1, .md-h2, .md-h3, .md-h4, .md-h5, .md-h6) .md-mark {
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    vertical-align: 0.08em;
}

.md-source .md-strong { font-weight: 700; color: var(--gray-950); }
.md-source .md-em { font-style: italic; }

:where(.dark, .dark *) .md-source .md-strong { color: var(--gray-50); }

.md-source .md-code,
.md-source .md-code-line {
    background: var(--gray-100);
    border-radius: calc(var(--spacing) * 0.75);
}

.md-source .md-code { padding-inline: calc(var(--spacing) * 1); }

.md-source .md-code-line {
    display: block;
    padding-inline: calc(var(--spacing) * 2);
    color: var(--gray-600);
}

:where(.dark, .dark *) .md-source :is(.md-code, .md-code-line) {
    background: color-mix(in oklab, var(--gray-800) 60%, transparent);
}

:where(.dark, .dark *) .md-source .md-code-line { color: var(--gray-400); }

.md-source .md-fence .md-lang { color: var(--gray-500); font-style: italic; }

/* A quote gets a rule, because the marker alone does not read as a block. */
.md-source .md-quote {
    display: inline-block;
    width: 100%;
    border-inline-start: 2px solid color-mix(in oklab, var(--primary-500) 40%, transparent);
    padding-inline-start: calc(var(--spacing) * 2);
    color: var(--gray-600);
    font-style: italic;
}

:where(.dark, .dark *) .md-source .md-quote { color: var(--gray-400); }

.md-source .md-link-text {
    color: var(--primary-600);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/*
 * URLs are shown in full and never linkified. This is a source view of text
 * nobody has published yet, and a clickable link in it invites somebody to
 * follow a destination a model chose. RecordCopyTool has already stripped the
 * ones that do not belong; not making the survivors clickable costs nothing.
 */
.md-source .md-url { color: var(--gray-500); }

:where(.dark, .dark *) .md-source .md-link-text { color: var(--primary-400); }

.md-source .md-hr { color: var(--gray-400); }
.md-source .md-key { color: var(--primary-700); font-weight: 500; }
.md-source .md-value { color: var(--gray-700); }

:where(.dark, .dark *) .md-source .md-key { color: var(--primary-300); }
:where(.dark, .dark *) .md-source .md-value { color: var(--gray-300); }

/*
 * The wrapper scrolls itself rather than letting a long table push the page
 * sideways. A body that scrolls horizontally is the single most common way a
 * generated document breaks a layout.
 */
.md-source-frame {
    max-height: 40rem;
    overflow: auto;
    overscroll-behavior: contain;
    padding: calc(var(--spacing) * 4);
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: calc(var(--spacing) * 2);
}

:where(.dark, .dark *) .md-source-frame {
    background: color-mix(in oklab, var(--gray-900) 50%, transparent);
    border-color: var(--gray-700);
}