/*
 * t3radar design system.
 *
 * Dark by default, because the audience reads this between editor windows;
 * `prefers-color-scheme: light` is honoured for everyone else. Every colour is
 * a token, so the two themes cannot drift apart.
 *
 * No TYPO3 orange and no TYPO3 logo anywhere: this is an independent site about
 * the ecosystem, not an official one, and the palette says so.
 */

:root {
    color-scheme: dark light;

    /* Base */
    --t3r-petrol: #0e2a32;
    --t3r-petrol-raised: #143840;
    --t3r-petrol-line: #1e4c56;
    --t3r-off-white: #f7f5f0;
    --t3r-accent: #2bd9c7;

    --t3r-bg: var(--t3r-petrol);
    --t3r-bg-raised: var(--t3r-petrol-raised);
    --t3r-line: var(--t3r-petrol-line);
    --t3r-text: var(--t3r-off-white);
    --t3r-text-muted: #9fb4b9;
    /* The vivid accent is for edges, rings and artwork. As *text* it only
       carries on the dark theme; on the light one it lands at 1.6:1, which is
       decoration pretending to be a word. Everything that renders the accent
       as type uses this token instead. */
    --t3r-accent-text: var(--t3r-accent);
    --t3r-link: var(--t3r-accent-text);
    /* Focus rings and the outlines of controls are "non-text contrast" under
       WCAG 1.4.11 and need 3:1 of their own. The vivid accent measured 1.63:1
       on the light theme, so the ring existed and could not be seen — which is
       the same as not having one. */
    --t3r-focus: var(--t3r-accent-text);

    /* Severity */
    --t3r-critical: #e5484d;
    --t3r-high: #f76b15;
    --t3r-medium: #ffc53d;
    --t3r-low: #46a758;
    --t3r-unknown: #66787d;

    /* Source type edges */
    --t3r-type-official: #4a8fe7;
    --t3r-type-security: #e5484d;
    --t3r-type-core_release: #46a758;
    --t3r-type-extension_release: #46a758;
    --t3r-type-blog: #a071e8;
    --t3r-type-forum: #8a9ba0;
    --t3r-type-event: #ffc53d;
    --t3r-type-podcast: #ef5f9e;
    --t3r-type-video: #ef5f9e;
    --t3r-type-social: #ef5f9e;
    --t3r-type-job: #2bd9c7;

    --t3r-glow: rgba(43, 217, 199, 0.16);
    --t3r-ring: rgba(43, 217, 199, 0.07);
    --t3r-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    --t3r-shadow-lift: 0 6px 20px rgba(0, 0, 0, 0.28);

    --t3r-radius: 10px;
    --t3r-gap: 1.25rem;
    --t3r-measure: 68ch;

    --t3r-font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --t3r-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: light) {
    :root {
        --t3r-bg: var(--t3r-off-white);
        --t3r-bg-raised: #ffffff;
        /* Nudged darker: at #d9d5cc a card boundary measured 1.34:1, which
           reads as no boundary at all in bright surroundings. Card edges are
           decoration rather than identity, so this is legibility and not a
           1.4.11 requirement — but it costs nothing. */
        --t3r-line: #c8c2b4;
        --t3r-text: #12262c;
        --t3r-text-muted: #56686d;
        /* 5.19:1 on the page, 5.65:1 on a card. The previous #0b7f74 measured
           4.48:1 — under the line by a hair, which is still under the line. */
        --t3r-accent-text: #0a7469;
        --t3r-link: var(--t3r-accent-text);
        --t3r-unknown: #5f7378;
        --t3r-glow: rgba(11, 127, 116, 0.10);
        --t3r-ring: rgba(11, 127, 116, 0.06);
        --t3r-shadow: 0 1px 2px rgba(18, 38, 44, 0.08);
        --t3r-shadow-lift: 0 6px 20px rgba(18, 38, 44, 0.12);
    }
}

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

body {
    margin: 0;
    /* Two layers, both pure CSS so nothing extra is fetched: a soft glow behind
       the header, and faint concentric rings that echo the mark. Kept far below
       text contrast — decoration must never compete with a headline. */
    background-color: var(--t3r-bg);
    background-image:
        radial-gradient(1100px 420px at 50% -180px, var(--t3r-glow), transparent 70%),
        repeating-radial-gradient(circle at 50% -120px,
            transparent 0 118px, var(--t3r-ring) 118px 119px, transparent 119px 240px);
    background-repeat: no-repeat;
    background-attachment: fixed, fixed;
    color: var(--t3r-text);
    font-family: var(--t3r-font);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--t3r-link);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* Visible focus is not decoration: it is how a keyboard user knows where they
   are. Never remove it without replacing it. */
:focus-visible {
    outline: 2px solid var(--t3r-accent-text);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Available to screen readers, invisible on screen: used where colour alone
   would otherwise carry meaning, such as the severity dots in the ticker. */
.t3r-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/*
 * Text for assistive technology only. Not display:none and not visibility:
 * hidden — both would take it out of the accessibility tree, which is the one
 * place it needs to exist.
 */
.t3r-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.t3r-skip {
    position: absolute;
    left: -9999px;
}

.t3r-skip:focus {
    left: 1rem;
    top: 1rem;
    z-index: 10;
    padding: 0.5rem 0.75rem;
    background: var(--t3r-bg-raised);
    border: 1px solid var(--t3r-line);
    border-radius: var(--t3r-radius);
}

.t3r-shell {
    max-width: 78rem;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 4rem;
}

/* ---------------------------------------------------------------- header */

.t3r-header {
    padding-block: 2.5rem 1.75rem;
    border-bottom: 1px solid var(--t3r-line);
}

/* Air is cheap on a desktop and expensive on a phone. The two paddings add up
   to 64px above the mark at every width, which on a 390px screen is a tenth of
   the viewport spent before the first word — and the header below it is already
   the tallest it gets, because the navigation, the language switcher and the
   search each take a line of their own down here. */
@media (max-width: 46rem) {
    .t3r-shell {
        padding-top: 0.75rem;
    }

    .t3r-header {
        padding-block: 1rem 1.25rem;
    }
}

/* Brand and navigation share a row on wide screens and stack on narrow ones.
   The navigation sits on the baseline of the wordmark rather than centred,
   so it reads as a peer of the title instead of floating beside the mark. */
.t3r-header__bar {
    display: flex;
    flex-wrap: wrap;
    /* Tops aligned again, because the two sides are no longer one line each:
       the mark carries the tagline, the navigation carries the search. Centred
       would float the shorter column in the middle of the taller one. */
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem 2.5rem;
}

/* Who this is. */
.t3r-header__identity {
    flex: 1 1 20rem;
    min-width: 0;
}

/* Where to go, and what to look for.
 *
 * Sized by what the navigation needs rather than by a number picked here. Two
 * guesses in a row got it wrong in opposite directions: 34rem pushed the
 * language switcher onto a line of its own, 40rem was so wide the two columns
 * stopped fitting side by side at 1024px and the header doubled in height. The
 * search field then takes the same width, which is the whole point — it sits
 * under the navigation and lines up with it. */
.t3r-header__tools {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 0 1 auto;
    max-width: 100%;
    min-width: 0;
}

.t3r-brand {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    color: inherit;
    text-decoration: none;
}

.t3r-mark {
    flex: none;
    width: clamp(3.25rem, 7vw, 4.5rem);
    height: auto;
    color: var(--t3r-accent-text);
}

/* One ring travels outward and fades, the way a ripple does, and the drop
   breathes. Both are decoration: anyone who has asked their system for less
   motion gets a still mark instead. */
@media (prefers-reduced-motion: no-preference) {
    .t3r-mark__ripple {
        transform-origin: 50% 50%;
        animation: t3r-ripple 4s ease-out infinite;
    }

    .t3r-mark__drop {
        transform-origin: 50% 50%;
        animation: t3r-drop 4s ease-in-out infinite;
    }
}

@keyframes t3r-ripple {
    0%   { transform: scale(1); opacity: 0.7; }
    70%  { transform: scale(3); opacity: 0; }
    100% { transform: scale(3); opacity: 0; }
}

@keyframes t3r-drop {
    0%, 100% { transform: scale(1); }
    12%      { transform: scale(0.7); }
    35%      { transform: scale(1); }
}

.t3r-wordmark {
    display: block;
    font-size: clamp(2rem, 5vw, 2.9rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--t3r-text);
}

.t3r-tagline {
    margin: 0.35rem 0 0;
    max-width: 46ch;
    font-size: clamp(0.95rem, 1.6vw, 1.05rem);
    line-height: 1.5;
    color: var(--t3r-text-muted);
}

.t3r-byline {
    margin: 0.5rem 0 0;
    font-family: var(--t3r-font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    color: var(--t3r-text-muted);
}

.t3r-byline a {
    color: var(--t3r-link);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--t3r-link) 45%, transparent);
}

.t3r-byline a:hover,
.t3r-byline a:focus-visible {
    border-bottom-color: currentColor;
}

.t3r-nav {
    display: flex;
    flex-wrap: wrap;
    /* Pushed to the right edge when it shares the line with the mark, and
       allowed to fall back to the left when the window is too narrow for both. */
    justify-content: flex-end;
    gap: 1.4rem;
    margin-top: 0.6rem;
    font-size: 0.95rem;
}

@media (min-width: 46rem) {
    .t3r-nav {
        margin-top: 0.9rem;
        justify-content: flex-end;
    }
}

.t3r-nav a {
    position: relative;
    color: var(--t3r-text);
    text-decoration: none;
    padding-bottom: 0.2rem;
}

/* An underline that grows from the left rather than appearing at full width —
   cheap, and it makes the header feel answered rather than static. */
.t3r-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--t3r-accent);
    transform: scaleX(0);
    transform-origin: left;
}

@media (prefers-reduced-motion: no-preference) {
    .t3r-nav a::after {
        transition: transform 0.18s ease;
    }
}

.t3r-nav a:hover::after,
.t3r-nav a:focus-visible::after,
.t3r-nav a[aria-current="page"]::after {
    transform: scaleX(1);
}

/* Colour and weight carry the current page as well as the underline: an
   underline alone is easy to miss, and it is the only cue on a small screen
   where the bar wraps. */
.t3r-nav a[aria-current="page"] {
    color: var(--t3r-accent-text);
    font-weight: 600;
}

/* ----------------------------------------------------------------- layout */

.t3r-layout {
    display: grid;
    gap: 2rem;
    margin-top: 2rem;
    grid-template-columns: 1fr;
}

@media (min-width: 60rem) {
    .t3r-layout {
        grid-template-columns: minmax(0, 1fr) 20rem;
        align-items: start;
    }
}

/* ----------------------------------------------------------------- filters */

.t3r-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.t3r-filter {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--t3r-line);
    border-radius: 999px;
    background: var(--t3r-bg-raised);
    color: var(--t3r-text);
    font-size: 0.85rem;
    text-decoration: none;
}

.t3r-filter[aria-current="true"] {
    border-color: var(--t3r-accent-text);
    color: var(--t3r-accent-text);
}

/* The count rides on the upper right corner of the chip rather than sitting
   inside it, so the label stays the thing you read and the number is what you
   glance at. Extra top margin on the bar keeps the badges from clipping.
   
   The chip reserves room for it: at three digits the badge reached far enough
   in to sit on top of the label, and a filter you cannot read is worse than a
   count you have to look for. */
.t3r-filter:has(.t3r-filter__count) {
    padding-right: 1.5rem;
}

.t3r-filter__count {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    min-width: 1.35rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    /* The page colour, not the chip's: the badge has to punch a hole in the
       chip's outline to read as sitting on it. Matching the chip left the
       number floating on the border with no shape of its own. */
    background: var(--t3r-bg);
    border: 1px solid var(--t3r-line);
    color: var(--t3r-text-muted);
    font-family: var(--t3r-font-mono);
    font-size: 0.7rem;
    line-height: 1.3rem;
    text-align: center;
}

.t3r-filter:hover .t3r-filter__count,
.t3r-filter[aria-current="true"] .t3r-filter__count {
    border-color: var(--t3r-accent-text);
    color: var(--t3r-accent-text);
}

.t3r-filters {
    margin-top: 0.6rem;
}

/* The lead badge takes the accent rather than a source-type colour: it says
   something about the item's standing, not about where it came from. */
.t3r-badge--lead {
    border-color: color-mix(in srgb, var(--t3r-accent) 55%, transparent);
    background: color-mix(in srgb, var(--t3r-accent) 18%, transparent);
    cursor: help;
}

/* A warning-level chip carries its own colour, so the level is readable
   before the label is. Colour is never the only carrier — the text says it
   too, which is what a screen reader and a colour-blind reader get. */
.t3r-filter[data-severity="critical"] { --t3r-chip: var(--t3r-critical); }
.t3r-filter[data-severity="high"]     { --t3r-chip: var(--t3r-high); }
.t3r-filter[data-severity="medium"]   { --t3r-chip: var(--t3r-medium); }
.t3r-filter[data-severity="low"]      { --t3r-chip: var(--t3r-low); }

.t3r-filter[data-severity] {
    border-color: color-mix(in srgb, var(--t3r-chip, var(--t3r-line)) 45%, transparent);
}

.t3r-filter[data-severity][aria-current="true"] {
    border-color: var(--t3r-chip, var(--t3r-accent));
    color: var(--t3r-chip, var(--t3r-accent));
}

.t3r-filter[data-severity][aria-current="true"] .t3r-filter__count {
    border-color: var(--t3r-chip, var(--t3r-accent));
    color: var(--t3r-chip, var(--t3r-accent));
}

/* The language switcher sits at the end of the navigation, quieter than the
   page links: it is a setting, not a destination. */
.t3r-langs {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    margin-inline-start: 0.4rem;
    padding-inline-start: 0.6rem;
    border-inline-start: 1px solid var(--t3r-line);
    font-size: 0.8rem;
}

.t3r-langs a {
    color: var(--t3r-text-muted);
    text-decoration: none;
}

.t3r-langs a[aria-current="true"] {
    color: var(--t3r-text);
    font-weight: 600;
}

.t3r-langs a:hover {
    color: var(--t3r-accent-text);
}

/* -------------------------------------------------------------- item cards */

.t3r-stream {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.t3r-card {
    position: relative;
    padding: 1rem 1.15rem 1rem 1.4rem;
    background: var(--t3r-bg-raised);
    border: 1px solid var(--t3r-line);
    border-radius: var(--t3r-radius);
    overflow: hidden;
}

/* The coloured edge encodes the source type. Colour is never the only carrier:
   the badge repeats it in words. */
.t3r-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--t3r-card-edge, var(--t3r-line));
}

.t3r-card--featured {
    border-color: var(--t3r-accent-text);
}

.t3r-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

/*
 * The type colour became the badge's fill and outline instead of its text.
 * Rendering eleven source-type colours as 11.5px type measured between 3.0 and
 * 4.2:1 in both themes, and fixing that per colour would mean eleven more
 * tokens times two themes. The colour still identifies the type; the word is
 * simply legible now.
 */
.t3r-badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--t3r-card-edge, var(--t3r-line)) 55%, transparent);
    background: color-mix(in srgb, var(--t3r-card-edge, var(--t3r-line)) 18%, transparent);
    color: var(--t3r-text);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.t3r-severity {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    /* Black on the warning colours, which are all light: measured against
       black they run from 5.37:1 (critical) to 13.31:1 (medium). White would
       be worse on every one of them and unusable on the yellow — 1.58:1. */
    color: #000;
    background: var(--t3r-severity-color, var(--t3r-unknown));
}

/* The exception, and the reason this rule exists: "unknown" is the one chip
   whose background is a dark slate rather than a warning colour, and black on
   it measured 4.88:1 — technically a pass, but at 11px uppercase it read as
   grey on grey. The slate is now a shade darker and carries white at 4.99:1
   (light) and 4.62:1 (dark). */
.t3r-severity[data-severity="unknown"] {
    color: #fff;
}

.t3r-card__title {
    margin: 0 0 0.4rem;
    font-size: 1.08rem;
    line-height: 1.35;
    font-weight: 600;
}

.t3r-card__title a {
    color: var(--t3r-text);
    text-decoration: none;
}

.t3r-card__title a:hover,
.t3r-card__title a:focus-visible {
    color: var(--t3r-link);
    text-decoration: underline;
}

.t3r-card__text {
    margin: 0 0 0.5rem;
    max-width: var(--t3r-measure);
    color: var(--t3r-text);
}

.t3r-card__text--teaser {
    color: var(--t3r-text-muted);
}

/* Required by the AI Act: a generated summary is always marked as one. */
.t3r-ailabel {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--t3r-accent-text);
}

.t3r-ailabel::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--t3r-accent);
}

.t3r-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-family: var(--t3r-font-mono);
    font-size: 0.76rem;
    color: var(--t3r-text-muted);
}

/* ----------------------------------------------------------------- aside */

.t3r-panel {
    padding: 1rem 1.15rem;
    background: var(--t3r-bg-raised);
    border: 1px solid var(--t3r-line);
    border-radius: var(--t3r-radius);
    margin-bottom: 1.5rem;
}

.t3r-panel h2 {
    margin: 0 0 0.75rem;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--t3r-text-muted);
}

.t3r-ticker {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.t3r-ticker li {
    display: grid;
    grid-template-columns: 0.5rem 1fr;
    gap: 0.6rem;
    align-items: start;
    font-size: 0.85rem;
    line-height: 1.4;
}

.t3r-ticker__dot {
    margin-top: 0.45em;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--t3r-severity-color, var(--t3r-unknown));
}

.t3r-ticker a {
    color: var(--t3r-text);
    text-decoration: none;
}

.t3r-ticker a:hover,
.t3r-ticker a:focus-visible {
    text-decoration: underline;
}

/* Own line under the headline rather than trailing it: an advisory title runs
   to two or three lines here, and a date tacked onto the end of the last one
   is the hardest place on the page to find. */
.t3r-ticker__date {
    display: block;
    margin-top: 0.15rem;
    color: var(--t3r-text-muted);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

.t3r-empty {
    color: var(--t3r-text-muted);
    font-size: 0.9rem;
}

/* ----------------------------------------------------------------- pager */

.t3r-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--t3r-line);
    font-size: 0.9rem;
}

.t3r-pager__status {
    font-family: var(--t3r-font-mono);
    font-size: 0.78rem;
    color: var(--t3r-text-muted);
}

/* ----------------------------------------------------------------- footer */

.t3r-footer__brand {
    font-weight: 600;
    color: var(--t3r-text);
}

.t3r-footer {
    margin-top: 3rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--t3r-line);
    font-size: 0.85rem;
    color: var(--t3r-text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
}

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

/* The table scrolls inside this, so the page never has to. */
.t3r-sources__scroll {
    overflow-x: auto;
}

.t3r-sources {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

@media (max-width: 30rem) {
    .t3r-sources th,
    .t3r-sources td {
        padding-inline: 0.35rem;
    }
}

.t3r-sources th,
.t3r-sources td {
    text-align: left;
    padding: 0.6rem 0.5rem;
    border-bottom: 1px solid var(--t3r-line);
    vertical-align: top;
}

.t3r-sources th {
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--t3r-text-muted);
}

@media (prefers-reduced-motion: no-preference) {
    .t3r-card,
    .t3r-filter {
        transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    }
}

.t3r-card {
    box-shadow: var(--t3r-shadow);
}

.t3r-card:hover,
.t3r-card:focus-within {
    border-color: color-mix(in srgb, var(--t3r-accent) 40%, var(--t3r-line));
    box-shadow: var(--t3r-shadow-lift);
    transform: translateY(-2px);
}

.t3r-filter:hover {
    border-color: color-mix(in srgb, var(--t3r-accent) 55%, var(--t3r-line));
    color: var(--t3r-accent-text);
}

/* A critical advisory earns a little more weight than a colour swatch. Static
   rather than blinking: an alarm that moves is harder to read, not easier. */
.t3r-card[data-severity="critical"] {
    border-color: color-mix(in srgb, var(--t3r-critical) 55%, var(--t3r-line));
}

.t3r-card[data-severity="critical"]::before {
    width: 5px;
}

/* The panels lift off the background just enough to read as surfaces. */
.t3r-panel {
    box-shadow: var(--t3r-shadow);
}

/* ----------------------------------------------------------------- digest */

/* The archived mail is its own document in a sandboxed frame. Tall enough to
   read without nested scrolling in the common case. */
.t3r-digestframe {
    width: 100%;
    min-height: 70vh;
    border: 1px solid var(--t3r-line);
    border-radius: var(--t3r-radius);
    background: #0e2a32;
}

.t3r-lead {
    max-width: var(--t3r-measure);
    color: var(--t3r-text-muted);
}

/* The editorial slot: an operator's own words above generated material. Held
   to a readable measure like any prose, and set apart from the machine output
   below it. */
.t3r-editorial {
    max-width: var(--t3r-measure);
    margin-bottom: 1.75rem;
    padding-inline-start: 1rem;
    border-inline-start: 3px solid var(--t3r-accent);
}

.t3r-editorial > *:last-child {
    margin-bottom: 0;
}

/* Long-form legal text: a readable measure and room to breathe. */
.t3r-prose {
    max-width: var(--t3r-measure);
}

.t3r-prose h2 {
    margin-top: 2rem;
    font-size: 1.1rem;
}

.t3r-prose p,
.t3r-prose li {
    line-height: 1.7;
}

/* ------------------------------------------------------- whole card clicks */

/*
 * The stretched-link pattern: the title's own link grows a transparent overlay
 * that covers the card. No JavaScript, and — unlike wrapping the card in an
 * anchor — the accessibility tree still sees exactly one link with the
 * headline as its name, instead of one link announcing badge, summary, source
 * and date as a single run-on label.
 *
 * Anything else clickable inside a card has to be lifted above the overlay,
 * which is what .t3r-card__meta a does. The accepted cost is that text under
 * the overlay can no longer be selected by dragging — the same trade every
 * clickable card makes.
 */
.t3r-card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.t3r-card:hover {
    border-color: color-mix(in srgb, var(--t3r-card-edge, var(--t3r-line)) 60%, transparent);
}

.t3r-card:focus-within {
    outline: 2px solid var(--t3r-accent-text);
    outline-offset: 3px;
}

.t3r-card__meta a,
.t3r-card__head a {
    position: relative;
    z-index: 2;
}


/* ---------------------------------------------------- endless CSS sliders */

/*
 * Two loops, one technique: the list is written out twice, and the track is
 * translated by exactly half its length plus half a gap. At the end of that
 * translation every copy sits where its original was, so restarting the
 * animation is invisible and the loop has no seam.
 *
 * No script is involved anywhere, which is the rule this site is built on.
 * The cost is the duplicate markup, and the duplicates are hidden from
 * assistive technology so nobody hears the list twice.
 */

/* The pause control. A checkbox rather than a button because a button without
   JavaScript does nothing; as a checkbox it is a real, labelled control that
   states whether the motion is stopped. */
.t3r-pause {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.t3r-pause__label {
    float: right;
    margin-top: -1.75rem;
    font-size: 0.72rem;
    color: var(--t3r-text-muted);
    cursor: pointer;
    user-select: none;
}

.t3r-pause__label::before {
    content: "\23F8\FE0E";
    margin-inline-end: 0.25rem;
}

.t3r-pause:checked ~ .t3r-pause__label::before {
    content: "\25B6\FE0E";
}

.t3r-pause:focus-visible ~ .t3r-pause__label {
    outline: 2px solid var(--t3r-accent-text);
    outline-offset: 2px;
}

.t3r-pause__label:hover {
    color: var(--t3r-accent-text);
}

/* ------------------------------------------------------------ lead slider */

.t3r-leads {
    margin-bottom: 2rem;
}

.t3r-leads__heading {
    margin: 0 0 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--t3r-text-muted);
}

/*
 * container-type so the slide width can be stated as a fraction of the
 * viewport rather than of the track. Two whole slides and a third cut off: the
 * crop is what says the track continues without needing an arrow to say it.
 */
.t3r-leads__viewport {
    overflow: hidden;
    container-type: inline-size;
    padding-bottom: 0.25rem;
}

/*
 * The slide width lives on the track, not on .t3r-leads, and that is the whole
 * point rather than a detail: .t3r-leads is the *ancestor* of the element that
 * declares container-type, and a container query only ever matches descendants
 * of its container. Declared one level up, the narrow-screen rule below never
 * applied — on a 390px phone a slide came out 132px wide, headlines broke after
 * three or four characters and each card was 424px tall. It had been that way
 * since the slider was built, on every phone, and nothing about the markup or
 * the rule looked wrong.
 *
 * One definition, used by the slide, the track and the animation, so the three
 * cannot disagree.
 */
.t3r-leads__track {
    --t3r-leads-slide: calc((100cqi - 2 * var(--t3r-gap)) / 2.35);
    --t3r-leads-step: calc(var(--t3r-leads-slide) + var(--t3r-gap));
}

/*
 * The width is stated rather than left to max-content, and the animation moves
 * by a counted number of slides rather than by half the track.
 *
 * "-50% of the track" is the usual recipe and it is wrong here: Firefox sizes
 * a max-content flex container from the items' unwrapped text and ignores
 * their flex-basis, so its track measured 13988px where Chromium's measured
 * 3652px. The loop therefore ran nearly four times as fast in Firefox and,
 * once past the real slides, scrolled through thousands of pixels of empty
 * track. Counting slides makes both engines agree — and fixes the speed as a
 * side effect, because the distance no longer depends on how a browser
 * measures text.
 */
.t3r-leads__track {
    display: flex;
    gap: var(--t3r-gap);
    width: calc(2 * var(--t3r-leads-count) * var(--t3r-leads-step) - var(--t3r-gap));
    margin: 0;
    padding: 0;
    list-style: none;
    animation: t3r-scroll-x 60s linear infinite;
}

.t3r-leads:hover .t3r-leads__track,
.t3r-leads:focus-within .t3r-leads__track,
.t3r-pause:checked ~ .t3r-leads__viewport .t3r-leads__track {
    animation-play-state: paused;
}

@keyframes t3r-scroll-x {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-1 * var(--t3r-leads-count) * var(--t3r-leads-step))); }
}

.t3r-leads__item {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 0 0 var(--t3r-leads-slide);
    overflow: hidden;
    background: var(--t3r-bg-raised);
    border: 1px solid var(--t3r-line);
    border-radius: var(--t3r-radius);
    box-shadow: var(--t3r-shadow);
}

/* Two and a bit is comfortable at full width and cramped at two thirds of it —
   a headline needs somewhere around 230px before it stops breaking mid-word. */
@container (max-width: 52rem) {
    .t3r-leads__track {
        --t3r-leads-slide: calc((100cqi - var(--t3r-gap)) / 1.75);
    }
}

@container (max-width: 34rem) {
    /* One whole slide and a hint of the next, so it still reads as a row that
       moves rather than as a single card that jumps. */
    .t3r-leads__track {
        --t3r-leads-slide: calc((100cqi - var(--t3r-gap)) / 1.12);
    }
}

.t3r-leads__item::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block: 0;
    width: 3px;
    background: var(--t3r-leads-edge, var(--t3r-accent));
}

.t3r-leads__item[data-severity="critical"] { --t3r-leads-edge: var(--t3r-critical); }
.t3r-leads__item[data-severity="high"]     { --t3r-leads-edge: var(--t3r-high); }
.t3r-leads__item[data-severity="medium"]   { --t3r-leads-edge: var(--t3r-medium); }
.t3r-leads__item[data-severity="low"]      { --t3r-leads-edge: var(--t3r-low); }

.t3r-leads__art {
    display: block;
    aspect-ratio: 16 / 7;
    overflow: hidden;
    border-bottom: 1px solid var(--t3r-line);
}

.t3r-cover {
    display: block;
    width: 100%;
    height: 100%;
}

.t3r-leads__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.9rem 1.1rem 1rem 1.3rem;
}

.t3r-leads__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.t3r-leads__rank {
    font-family: var(--t3r-font-mono);
    font-size: 0.72rem;
    color: var(--t3r-text-muted);
}

.t3r-leads__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.32;
}

.t3r-leads__title a {
    color: var(--t3r-text);
    text-decoration: none;
}

/* The same stretched link as the item cards: the whole slide is the target,
   and the accessibility tree still sees one link named by the headline. */
.t3r-leads__title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* The track stops under the pointer, so the slide being read should say so.
   Border and shadow together, because a border alone is nearly invisible
   against the card's own outline. */
.t3r-leads__item:hover {
    border-color: var(--t3r-leads-edge, var(--t3r-accent));
    box-shadow: var(--t3r-shadow-lift);
}

.t3r-leads__item:focus-within {
    outline: 2px solid var(--t3r-accent-text);
    outline-offset: -2px;
}

.t3r-leads__text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--t3r-text-muted);
}

.t3r-leads__item .t3r-ailabel {
    display: block;
    margin: 0;
}

.t3r-leads__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: auto 0 0;
    font-family: var(--t3r-font-mono);
    font-size: 0.72rem;
    color: var(--t3r-text-muted);
}

/* -------------------------------------------------------- in eigener Sache */

/*
 * Advertising, and it says so. Separated from the editorial content by law and
 * by self-interest: a page whose footer claims independence cannot dress its
 * own sales copy as an item card.
 */

.t3r-promos {
    margin-top: var(--t3r-gap);
    /* Every box in the sidebar carries its own bottom spacing; this one was the
       exception and got away with it only as long as it was last. The signup
       box landing underneath it sat flush against its border. */
    margin-bottom: 1.5rem;
    padding: 1rem 1.1rem 1.1rem;
    border: 1px dashed color-mix(in srgb, var(--t3r-accent) 45%, var(--t3r-line));
    border-radius: var(--t3r-radius);
    background: color-mix(in srgb, var(--t3r-accent) 5%, transparent);
}

.t3r-promos__heading {
    margin: 0 0 0.75rem;
    font-family: var(--t3r-font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--t3r-text-muted);
}

/* Exactly three rows tall, so the fourth is never half-shown. */
.t3r-promos__viewport {
    --t3r-promos-row: 5.6rem;
    --t3r-promos-gap: 0.5rem;
    height: calc(3 * var(--t3r-promos-row) + 2 * var(--t3r-promos-gap));
    overflow: hidden;
}

.t3r-promos__track {
    display: flex;
    flex-direction: column;
    gap: var(--t3r-promos-gap);
    margin: 0;
    padding: 0;
    list-style: none;
    animation: t3r-scroll-y 64s linear infinite;
}

.t3r-promos:hover .t3r-promos__track,
.t3r-promos:focus-within .t3r-promos__track,
.t3r-pause:checked ~ .t3r-promos__viewport .t3r-promos__track {
    animation-play-state: paused;
}

@keyframes t3r-scroll-y {
    from { transform: translateY(0); }
    to { transform: translateY(calc(-50% - var(--t3r-promos-gap) / 2)); }
}

.t3r-promos__item {
    flex: 0 0 var(--t3r-promos-row);
    min-height: 0;
}

.t3r-promos__item a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.2rem;
    height: 100%;
    padding: 0.5rem 0.7rem;
    border-radius: calc(var(--t3r-radius) - 3px);
    background: var(--t3r-bg-raised);
    border: 1px solid var(--t3r-line);
    text-decoration: none;
}

.t3r-promos__item a:hover {
    border-color: var(--t3r-accent-text);
}

.t3r-promos__title {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--t3r-text);
}

/* "Anzeige" on a booked placement — small, but never hidden. The section is
   already headed "Werbung"; this says which entries somebody paid for. */
.t3r-promos__mark {
    align-self: flex-start;
    padding: 0 0.35rem;
    border: 1px solid color-mix(in srgb, var(--t3r-text-muted) 45%, transparent);
    border-radius: 3px;
    font-family: var(--t3r-font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--t3r-text-muted);
}

.t3r-promos__text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--t3r-text-muted);
}

/* ---------------------------------------------------------- reduced motion */

/*
 * Asked for less motion, given none — and, more importantly, given something
 * that can still be used.
 *
 * The first attempt turned the lead track into a horizontal scroller. That is
 * a trap: a mouse wheel scrolls the page, not a sideways container; dragging
 * the content needs JavaScript; and what is left is a horizontal scrollbar,
 * which is the worst control on the web. Reduced motion should not mean
 * "same thing, now operate it yourself".
 *
 * So the leads become a plain grid. Everything is on screen, nothing scrolls,
 * and there is nothing to operate. The promotions keep their three-row box but
 * scroll vertically, where the wheel works the way everyone expects.
 */
@media (prefers-reduced-motion: reduce) {
    .t3r-leads__track,
    .t3r-promos__track {
        animation: none;
    }

    .t3r-leads__viewport {
        overflow: visible;
    }

    .t3r-leads__track {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
        width: auto;
    }

    .t3r-promos__viewport {
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--t3r-line) transparent;
    }

    /* The duplicates exist only to give the loop something to scroll into. */
    .t3r-leads__item[aria-hidden="true"],
    .t3r-promos__item[aria-hidden="true"],
    .t3r-pause,
    .t3r-pause__label {
        display: none;
    }
}

/* ------------------------------------------------------------------ flags */

.t3r-flag {
    flex: 0 0 auto;
    width: 1.05rem;
    height: 0.75rem;
    margin-inline-end: 0.3rem;
    border-radius: 2px;
    /* A hairline, so the white band of a flag still has an edge against a
       light background. */
    outline: 1px solid color-mix(in srgb, var(--t3r-line) 70%, transparent);
    outline-offset: -1px;
}

.t3r-langs a {
    display: inline-flex;
    align-items: center;
}

/* --------------------------------------------------------- digest signup */

.t3r-subscribe {
    padding: 1.25rem 1.4rem;
    background: var(--t3r-bg-raised);
    border: 1px solid var(--t3r-line);
    border-radius: var(--t3r-radius);
    margin-bottom: 1.5rem;
}

.t3r-subscribe h2 {
    margin: 0 0 0.6rem;
    font-size: 1.05rem;
}

.t3r-subscribe__lead,
.t3r-subscribe__note {
    color: var(--t3r-text-muted);
    margin: 0 0 0.9rem;
}

.t3r-subscribe__lead {
    font-size: 0.92rem;
}

.t3r-subscribe__note {
    font-size: 0.8rem;
    margin: 0.7rem 0 0;
}

/* The row wraps instead of shrinking the field: an email input squeezed to
   nine characters is unusable, and a narrow sidebar is where this box will
   most often live. */
.t3r-subscribe__row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.35rem;
}

.t3r-subscribe__form label {
    font-size: 0.85rem;
    font-weight: 600;
}

.t3r-subscribe__row input {
    flex: 1 1 14rem;
    min-width: 0;
    padding: 0.55rem 0.7rem;
    font: inherit;
    font-size: 0.92rem;
    color: var(--t3r-text);
    background: var(--t3r-bg);
    border: 1px solid var(--t3r-line);
    border-radius: 6px;
}

.t3r-subscribe__row button {
    flex: 0 0 auto;
    padding: 0.55rem 1.1rem;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--t3r-bg);
    background: var(--t3r-accent-text);
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
}

.t3r-subscribe__row button:hover {
    filter: brightness(1.08);
}

.t3r-subscribe__message {
    margin: 0 0 0.9rem;
    padding: 0.6rem 0.75rem;
    border-radius: 6px;
    font-size: 0.9rem;
    /* The left edge carries the state as well as the text, but the text says
       it too — colour is never the only carrier on this site. */
    border-left: 3px solid var(--t3r-line);
    background: color-mix(in srgb, var(--t3r-line) 22%, transparent);
}

.t3r-subscribe__message--ok {
    border-left-color: var(--t3r-low);
}

.t3r-subscribe__message--error {
    border-left-color: var(--t3r-high);
}

/* Off-screen rather than display:none — a form filler that reads the computed
   style would skip a hidden field, which is exactly what this one is for. */
.t3r-subscribe__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ------------------------------------------------- credit for our own tools */

/*
 * Marked as our own rather than dressed up as editorial. It sits below the
 * thing it explains, in the promotion box's dashed frame, so a reader can tell
 * at a glance that this is the operator talking about the operator.
 */
.t3r-credit {
    margin: 2rem 0 0;
    padding: 1.1rem 1.25rem;
    border: 1px dashed color-mix(in srgb, var(--t3r-accent) 45%, var(--t3r-line));
    border-radius: var(--t3r-radius);
    background: color-mix(in srgb, var(--t3r-accent) 5%, transparent);
    max-width: var(--t3r-measure);
}

.t3r-credit__lead {
    margin: 0 0 0.4rem;
    font-family: var(--t3r-font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--t3r-accent-text);
}

.t3r-credit__text {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--t3r-text);
}

.t3r-credit__links {
    margin: 0.7rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.88rem;
}

.t3r-credit__links a {
    color: var(--t3r-accent-text);
}

.t3r-credit__title {
    margin: 0 0 0.5rem;
    font-size: 1.02rem;
    line-height: 1.35;
}

/* --------------------------------------------------- lifecycle, in one box */

.t3r-lifecycle__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.t3r-lifecycle__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    font-size: 0.86rem;
    line-height: 1.35;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid color-mix(in srgb, var(--t3r-line) 55%, transparent);
}

.t3r-lifecycle__item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.t3r-lifecycle__version {
    font-family: var(--t3r-font-mono);
    font-weight: 600;
    color: var(--t3r-text);
}

.t3r-lifecycle__state {
    color: var(--t3r-text-muted);
    text-align: right;
}

/* The state is written out; the colour only repeats it. Same rule as the
   severity chips — nobody should have to see a hue to read this. */
.t3r-lifecycle__item--maintained .t3r-lifecycle__version { color: var(--t3r-low); }
.t3r-lifecycle__item--elts .t3r-lifecycle__version { color: var(--t3r-medium); }
.t3r-lifecycle__item--ended .t3r-lifecycle__version { color: var(--t3r-text-muted); }

.t3r-lifecycle__more {
    margin: 0.85rem 0 0;
    font-size: 0.82rem;
}

/* --------------------------------------------------------------- search
 *
 * The form is the whole feature; the preview is a panel that sits over the
 * page while typing and is gone the moment it is not wanted. Both use the
 * tokens the cards use, so a hit in the preview and the same hit in the result
 * list are recognisably the same thing.
 */
.t3r-search {
    margin-block: 1.5rem 2rem;
}

.t3r-search__form {
    position: relative;
    margin-block-end: 1.25rem;
}

/* Under the navigation, as wide as the navigation — not as wide as the page.
 *
 * The panel is the part that needs room, not the field. Anchored to the right
 * edge and allowed to be wider than the form it hangs from, so the headlines
 * stay on one line each: a preview whose rows wrap onto three lines is not
 * scannable, and being scannable is the only thing it is for. */
.t3r-search__form--header {
    margin-block: 0.9rem 0;
}

.t3r-search__form--header .t3r-search__preview {
    inset-inline: auto 0;
    width: max-content;
    min-width: 100%;
    max-width: min(52rem, calc(100vw - 3rem));
}

.t3r-search__label {
    display: block;
    margin-block-end: 0.4rem;
    color: var(--t3r-text-muted);
    font-size: 0.85rem;
}

.t3r-search__row {
    display: flex;
    gap: 0.5rem;
}

.t3r-search__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--t3r-line);
    border-radius: 6px;
    background: var(--t3r-bg-raised);
    color: var(--t3r-text);
    font: inherit;
    font-size: 1rem;
}

.t3r-search__input::placeholder {
    color: var(--t3r-text-muted);
}

.t3r-search__submit {
    flex: 0 0 auto;
    padding: 0.6rem 1.1rem;
    border: 1px solid var(--t3r-accent-text);
    border-radius: 6px;
    background: transparent;
    color: var(--t3r-accent-text);
    font: inherit;
    cursor: pointer;
}

.t3r-search__submit:hover {
    background: var(--t3r-bg-raised);
}

/* The panel. Absolute so the page below does not jump on every keystroke —
 * a list that pushes the results down while somebody is still typing makes
 * the thing they were reading move away from under them. */
.t3r-search__preview {
    position: absolute;
    z-index: 20;
    inset-inline: 0;
    /* Six rows fit on a laptop; a short window scrolls the panel rather than
       letting it run off the bottom of the screen. */
    max-height: min(70vh, 30rem);
    margin-block-start: 0.4rem;
    border: 1px solid var(--t3r-line);
    border-radius: 8px;
    background: var(--t3r-bg-raised);
    box-shadow: 0 12px 32px rgb(0 0 0 / 35%);
    overflow: hidden auto;
}

.t3r-search__preview[hidden] {
    display: none;
}

.t3r-search__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.t3r-search__hit {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.2rem 0.6rem;
    padding: 0.6rem 0.8rem;
    border-block-end: 1px solid var(--t3r-line);
    color: var(--t3r-text);
    text-decoration: none;
}

.t3r-search__list li:last-child .t3r-search__hit {
    border-block-end: 0;
}

.t3r-search__hit:hover,
.t3r-search__hit:focus-visible {
    background: var(--t3r-bg);
}

.t3r-search__hit .t3r-badge {
    grid-row: 1 / span 2;
    align-self: start;
    /* Each row is its own grid, so an "auto" column is as wide as that row's
       badge and every headline started at a different place. A floor wide
       enough for the longest label puts them in one line. */
    /* Wide enough for the longest label in either language ("Core-Release",
       "Extension"), so every headline in the list starts at the same place. */
    min-width: 7.6rem;
    /* The badge is an inline-block, so this is what centres its text. */
    text-align: center;
}

.t3r-search__hit-title {
    font-weight: 500;
    line-height: 1.35;
}

.t3r-search__hit-meta {
    color: var(--t3r-text-muted);
    font-family: var(--t3r-font-mono);
    font-size: 0.78rem;
}

.t3r-search__more {
    display: block;
    width: 100%;
    padding: 0.55rem 0.8rem;
    border: 0;
    border-block-start: 1px solid var(--t3r-line);
    background: var(--t3r-bg);
    color: var(--t3r-accent-text);
    font: inherit;
    font-size: 0.85rem;
    text-align: center;
    cursor: pointer;
}

.t3r-search__status,
.t3r-search__hint,
.t3r-search__empty {
    color: var(--t3r-text-muted);
    font-size: 0.9rem;
}

.t3r-search__status {
    margin-block: 1rem 0.75rem;
}