/* Neutral template defaults. Per-customer values are injected at runtime by <BrandStyle/>
   from customer.json (see docs/superpowers/specs/2026-07-23-neutral-platform-template-design.md).
   Change colours there, not here. */
:root {
    --brand-surface: #FAFAFA;
    --brand-ink: #1E293B;
    --brand-accent: #3E5C76;
    --brand-grey: #64748B;
    --brand-lightblue: #7C93A8;
    --brand-blue: #2C3E50;

    --body-font: 'Lexend', sans-serif;
}

html, body {
    font-family: var(--body-font);
    font-weight: 300;
    background-color: var(--brand-surface);
    color: var(--brand-ink);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--body-font);
    font-weight: 300;
    color: var(--brand-ink);
}

.emphasis {
    font-weight: 600;
}

/* Pages that mark an area with .report-print-area print only that area ("Save as PDF" export).
   Scoped with :has so this only applies to pages that actually contain such an area — without
   it, `body * { visibility: hidden; }` blanked every other page's printout, since @media print
   has no notion of "current page". Evergreen-browsers-only, fine for this Blazor Server app. */
@media print {
    body:has(.report-print-area) * { visibility: hidden; }
    body:has(.report-print-area) .report-print-area,
    body:has(.report-print-area) .report-print-area * { visibility: visible; }
    body:has(.report-print-area) .report-print-area { position: absolute; left: 0; top: 0; width: 100%; }
}

/* ---------------------------------------------------------------------------------------------
   Opt-in full height: ".vollhoehe"

   A page that wants its own areas to scroll — search, media catalogue — needs a BOUNDED height to
   scroll inside of. In the default chain (html/body → fluent-layout → content area → .tab-panel →
   page) nothing bounds a height: `fluent-layout` carries `height: 100%`, but a percentage against
   an auto-height <body> resolves to auto, so the grid simply grows and `overflow-y: auto` further
   down never has anything to clip. That is why a scrollbar does not appear today, and it cannot be
   fixed in a single page's .razor.css.

   Bounding this globally would change the scroll behaviour of EVERY page — the whole document
   would stop scrolling and the content area would scroll instead. So the rules below apply only
   while a `.vollhoehe` element is actually visible: `:has()` on html/body, guarded against a
   `.vollhoehe` page sitting in a hidden background tab (the tab shell keeps those in the DOM
   deliberately — see TabWorkspace.razor).

   Why here and not in TabWorkspace.razor.css, where .tab-panel is written: three of these four
   rules address `html`, `body` and the layout's content area, none of which any scoped stylesheet
   can reach, and scoped-CSS rewriting inside `:has()` is not a documented guarantee. One block
   that demonstrably works beats two halves where one silently matches nothing.

   `.fluent-layout-item[area="content"]` is a CLASS, not an element. FluentLayoutItem renders a
   plain <div class="pa-3 fluent-layout-item" area="content">, and the first version of this block
   selected `fluent-layout-item[area=content]` as a custom element. It matched zero elements, the
   page still looked plausible because html/body were bounded, and nothing anywhere said a word -
   the exact silent-CSS failure this codebase has now paid for a second time. Read from the live
   DOM, not from the package stylesheet (which does carry element-named rules, for a v5 mode this
   app does not use).

   The `min-height: 0` repeated below is not redundant: the implicit minimum size of a flex or grid
   child is its CONTENT, so without it a child grows past its parent and `overflow-y: auto` stays
   silent again. This is the second of the two traps and the one that looks like nothing happened.

   Measured in the browser, not in the build — see tools/browser-checks/check-medien-suche.js.
   --------------------------------------------------------------------------------------------- */
html:has(.tab-panel:not(.is-hidden) .vollhoehe),
body:has(.tab-panel:not(.is-hidden) .vollhoehe) {
    height: 100%;
    overflow: hidden;
}

.fluent-layout-item[area="content"]:has(.tab-panel:not(.is-hidden) .vollhoehe) {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.fluent-layout-item[area="content"]:has(.tab-panel:not(.is-hidden) .vollhoehe) .tab-panel:not(.is-hidden) {
    flex: 1 1 auto;
    min-height: 0;
}

/* The tab strip must not pay for the page's overflow. Making the content area a flex column turns
   the strip into a flex item beside the panel, and a flex item shrinks by DEFAULT: when the panel's
   content is taller than the area, the missing height is distributed over both children in
   proportion to their base sizes, so the strip gives up part of its own 26px as well. Worse, the
   floor that normally stops this is absent here — a flex item's automatic minimum size is its
   content, but only while overflow is `visible`, and .tab-strip carries `overflow-x: auto` (for
   many open tabs), which computes the other axis to `auto` too and drops the minimum to zero. The
   strip therefore collapses to a two-pixel sliver rather than merely shrinking a little.

   Measured before this rule existed, in an isolated reproduction of this exact chain: 26px with
   nothing selected, 3px once a recording filled the detail pane. It reads as "the page overlaps the
   tabs", which is why it was looked for in the wrong place — a strip hidden UNDER something would
   lose a constant amount, while this one recovers height as the window grows, because a taller
   window means less overflow to distribute.

   `> :not(.tab-panel)` rather than `.tab-strip`: it also covers the `.tab-empty` paragraph, and it
   keeps the declaration with the rest of the opt-in instead of putting one half of a mechanism in
   TabStrip's scoped stylesheet. Hidden panels are `display: none` and are not flex items at all. */
.fluent-layout-item[area="content"]:has(.tab-panel:not(.is-hidden) .vollhoehe) > :not(.tab-panel) {
    flex: 0 0 auto;
}

.vollhoehe {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* ---------------------------------------------------------------------------------------------
   Rendered summary text (`SummaryMarkdown`).

   The recording summary is written by the model in Markdown and rendered as Markdown — the
   decision of 25.08.2026 was to keep the formatting, not to strip it. Two pages show it, the
   catalogue and the search, so these rules live once here rather than twice in two scoped
   stylesheets.

   They must be unscoped for a second and less obvious reason: the markup arrives as a
   `MarkupString`, so its elements carry no `[b-xxxx]` scope attribute. A rule written in a
   `.razor.css` as `.md-text p` would be rewritten to `.md-text p[b-xxxx]` and match nothing at
   all — the same class of silent miss as the stylesheet that once matched zero elements.

   No `white-space: pre-wrap` here, unlike the plain-text blocks next to it: the renderer already
   turns the source line breaks into elements, and pre-wrap would additionally show every newline
   the HTML still contains as an empty line.
   --------------------------------------------------------------------------------------------- */
.md-text {
    overflow-wrap: anywhere;
}

.md-text > :first-child { margin-top: 0; }
.md-text > :last-child  { margin-bottom: 0; }

.md-text p { margin: 0 0 .6rem; }

.md-text h1, .md-text h2, .md-text h3, .md-text h4, .md-text h5, .md-text h6 {
    margin: .9rem 0 .4rem;
    line-height: 1.25;
}

/* A summary is four to six sentences inside a page that already has an h2 above it. Model-written
   headings must not out-shout that, so they are sized down rather than left at browser defaults. */
.md-text h1 { font-size: 1.15rem; }
.md-text h2 { font-size: 1.1rem; }
.md-text h3, .md-text h4, .md-text h5, .md-text h6 { font-size: 1rem; }

.md-text ul, .md-text ol { margin: 0 0 .6rem; padding-left: 1.4rem; }
.md-text li { margin: .15rem 0; }

.md-text blockquote {
    margin: 0 0 .6rem;
    padding-left: .75rem;
    border-left: 3px solid var(--brand-grey);
    opacity: .85;
}

/* A wide table scrolls inside its own box. Without this the summary would push the whole detail
   pane sideways, and on the search page that pane sits in a three-column grid. */
.md-text .table-wrap,
.md-text table { display: block; max-width: 100%; overflow-x: auto; }

.md-text table { border-collapse: collapse; margin: 0 0 .6rem; }
.md-text th, .md-text td {
    border: 1px solid var(--brand-grey);
    padding: .25rem .5rem;
    text-align: left;
}

.md-text code {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .9em;
}

.md-text pre {
    margin: 0 0 .6rem;
    padding: .5rem .65rem;
    overflow-x: auto;
    background: rgba(127, 127, 127, .12);
    border-radius: 4px;
}

.md-text hr {
    border: 0;
    border-top: 1px solid var(--brand-grey);
    margin: .8rem 0;
}