/* Ostermann Graphit — components. Every colour, spacing and radius comes from ostermann-tokens.css. */
.ost-page{background:var(--surface);color:var(--ink);font-family:var(--font-sans);font-size:16px;line-height:26px}
.ost-page *,.ost-page *::before,.ost-page *::after{box-sizing:border-box}

/* Kicker */
.ost-kicker{margin:0;font-family:var(--font-sans);font-size:12px;line-height:16px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--brand-text)}
.ost-kicker--graphit,.ost-band--graphit .ost-kicker{color:var(--brand)}

/* Button */
.ost-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:44px;padding:0 var(--space-5);border:1.5px solid transparent;border-radius:var(--radius-md);font-family:var(--font-sans);font-size:16px;line-height:20px;font-weight:700;text-decoration:none;cursor:pointer;background:var(--action);color:var(--on-action)}
.ost-btn:hover{box-shadow:inset 0 0 0 100px rgba(0,0,0,.12)}
.ost-btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.ost-btn--secondary{background:transparent;color:var(--ink);border-color:var(--ink)}
.ost-btn--secondary:hover{box-shadow:none;background:var(--surface-raised)}
.ost-btn--ghost{background:transparent;color:var(--brand-text);padding:0 var(--space-2);border-color:transparent;text-decoration:underline;text-underline-offset:.2em}
.ost-btn--ghost:hover{box-shadow:none;text-decoration-thickness:2px}
.ost-btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}

/* Card */
.ost-card{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-5);border-radius:var(--radius-md);background:var(--surface-raised);color:var(--ink)}
.ost-card__icon{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--radius-pill);background:var(--surface-graphit);color:var(--on-graphit)}
.ost-card__title{margin:0;font-family:var(--font-sans);font-size:20px;line-height:26px;font-weight:700}
.ost-card__text{margin:0;font-size:14px;line-height:22px;color:var(--ink-muted)}
.ost-card--graphit{background:var(--surface-graphit);color:var(--on-graphit);outline:1px solid var(--graphit-edge);outline-offset:-1px}
.ost-card--graphit .ost-card__text{color:var(--on-graphit-muted)}
.ost-card--graphit .ost-card__icon{background:var(--on-graphit);color:var(--surface-graphit)}
.ost-card--optional{background:transparent;border:1.5px dashed var(--brand-text)}

/* Tag */
.ost-tag{display:inline-flex;align-items:center;align-self:flex-start;min-height:24px;padding:0 var(--space-3);border-radius:var(--radius-pill);background:var(--brand);color:var(--on-brand);font-family:var(--font-sans);font-size:12px;line-height:16px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.ost-tag--optional{background:transparent;color:var(--ink-muted);border:1.5px dashed var(--brand-text);letter-spacing:.04em;text-transform:none;font-size:13px}

/* Stat */
.ost-stat{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.ost-stat__value{display:flex;align-items:baseline;gap:var(--space-2);font-family:var(--font-display);font-weight:700;font-size:64px;line-height:64px;color:inherit}
.ost-stat__unit{font-family:var(--font-sans);font-size:16px;line-height:20px;font-weight:700;color:var(--brand-text)}
.ost-stat__label{font-weight:700;font-size:16px;line-height:22px}
.ost-stat__note{font-size:14px;line-height:22px;color:var(--ink-muted)}
.ost-band--graphit .ost-stat__unit{color:var(--brand)}
.ost-band--graphit .ost-stat__note{color:var(--on-graphit-muted)}

/* PullQuote */
.ost-quote{margin:0;max-width:var(--measure);font-family:var(--font-display);font-style:italic;font-weight:700;font-size:24px;line-height:32px;color:var(--brand-text)}
.ost-band--graphit .ost-quote{color:var(--on-graphit)}

/* Band */
.ost-band{padding-block:var(--space-8);padding-inline:max(var(--space-4),calc((100% - var(--content-width))/2));background:var(--surface);color:var(--ink)}
.ost-band--raised{background:var(--surface-raised)}
.ost-band--graphit{background:var(--surface-graphit);color:var(--on-graphit);padding-block:var(--space-9)}
.ost-band__title{margin:var(--space-3) 0 0;font-family:var(--font-display);font-weight:700;font-size:40px;line-height:46px;text-wrap:balance}
@media (max-width:640px){.ost-band__title{font-size:32px;line-height:38px}.ost-stat__value{font-size:48px;line-height:48px}}
@media (prefers-reduced-motion:no-preference){.ost-btn{transition:box-shadow .15s ease,background-color .15s ease}}

/* Tool density ("Werkbank", docs/marke.md "Zwei Dichten"): 14px running text and controls.
   Click targets stay 44px high. Use on <body class="ost-page ost-page--werkbank">. */
.ost-page--werkbank{font-size:14px;line-height:22px}
.ost-page--werkbank .ost-btn,.ost-page--werkbank .ost-input,.ost-page--werkbank .ost-nav a{font-size:14px}
.ost-page--werkbank .ost-input{line-height:22px}

/* ---- Website components (public-facing density). Rules: docs/marke.md, "Bedienelemente"; overview: website.html ---- */
.ost-page :focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* Link in running text */
.ost-link{color:var(--brand-text);text-decoration:underline;text-underline-offset:.2em}
.ost-link:hover{text-decoration-thickness:2px}
.ost-band--graphit .ost-link{color:var(--brand)}

/* Number in a circle: only for a real sequence */
.ost-num{display:inline-grid;place-items:center;flex:none;align-self:flex-start;justify-self:start;min-width:32px;height:32px;padding:0 var(--space-2);border-radius:var(--radius-pill);background:var(--brand);color:var(--on-brand);font-family:var(--font-sans);font-size:16px;line-height:1;font-weight:700;letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums}

/* Icon disc: line icon in a circle */
.ost-icon{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:var(--radius-pill);background:var(--surface-graphit);color:var(--on-graphit)}
.ost-icon svg{width:22px;height:22px}
.ost-band--graphit .ost-icon{background:var(--on-graphit);color:var(--surface-graphit)}

/* Icon button (theme, menu): 44px, colour change on hover */
.ost-iconbtn{display:inline-grid;place-items:center;min-width:44px;min-height:44px;padding:0;border:0;border-radius:var(--radius-md);background:transparent;color:var(--ink-muted);cursor:pointer}
.ost-iconbtn:hover{color:var(--ink)}
.ost-iconbtn svg{width:20px;height:20px}

/* Status: word and colour, never colour alone */
.ost-status{display:inline-flex;align-items:center;align-self:flex-start;min-height:24px;padding:0 var(--space-3);border:1.5px solid transparent;border-radius:var(--radius-pill);font-family:var(--font-sans);font-size:12px;line-height:16px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.ost-status--active{background:var(--brand);color:var(--on-brand)}
.ost-status--idle{border-color:var(--line);color:var(--ink-muted)}
.ost-status--warn{border-color:var(--signal-warn);color:var(--signal-warn)}
.ost-status--error{border-color:var(--signal-error);color:var(--signal-error)}

/* Header and navigation */
.ost-header{position:sticky;top:0;z-index:10;background:var(--surface);border-bottom:1px solid var(--line)}
.ost-header__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2) var(--space-6);max-width:var(--content-width);margin-inline:auto;padding:var(--space-2) var(--space-4)}
.ost-header__tools{display:flex;align-items:center;gap:var(--space-1)}
.ost-wordmark{display:flex;flex-direction:column;color:var(--ink);text-decoration:none}
.ost-wordmark__name{font-family:var(--font-display);font-size:20px;line-height:24px;font-weight:700}
.ost-wordmark__role{font-size:12px;line-height:16px;color:var(--ink-muted)}
.ost-nav{display:flex;gap:var(--space-5)}
.ost-nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-muted);text-decoration:none;white-space:nowrap}
.ost-nav a:hover{color:var(--ink)}
.ost-nav a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--brand);text-decoration-thickness:2px;text-underline-offset:.4em}
@media (max-width:760px){.ost-nav{order:3;flex:1 1 100%;overflow-x:auto;margin-inline:calc(-1*var(--space-4));padding-inline:var(--space-4)}}

/* Hero: graphite text panel left, full-height photo right */
.ost-hero{display:grid;grid-template-columns:1fr 1fr;min-height:440px;padding:0;background:var(--surface-graphit);color:var(--on-graphit);outline:1px solid var(--graphit-edge);outline-offset:-1px}
.ost-hero__text{display:flex;flex-direction:column;justify-content:center;gap:var(--space-4);padding:var(--space-9) var(--space-6) var(--space-9) max(var(--space-4),calc((100vw - var(--content-width))/2))}
.ost-hero__title{margin:0;font-family:var(--font-display);font-size:64px;line-height:68px;font-weight:700;text-wrap:balance}
.ost-hero__lead{margin:0;max-width:40ch;color:var(--on-graphit-muted)}
.ost-hero__media{position:relative;margin:0;min-height:240px}
.ost-hero__media img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:760px){.ost-hero{grid-template-columns:1fr}.ost-hero__text{padding-block:var(--space-8)}.ost-hero__title{font-size:40px;line-height:46px}}

/* Section with a label column (4/8): kicker left, content right */
.ost-split{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--space-3) var(--space-6);align-items:start}
.ost-split>:last-child{display:grid;gap:var(--space-4);min-width:0}
.ost-split h2{margin:0;font-family:var(--font-display);font-size:28px;line-height:34px;font-weight:700;text-wrap:balance}
.ost-split p{margin:0;max-width:var(--measure)}
@media (max-width:760px){.ost-split{grid-template-columns:1fr}}
/* Detail photo in the label column instead of the kicker: texture, not a scene */
.ost-split__media{margin:0}
.ost-split__media img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius-lg)}
@media (max-width:760px){.ost-split__media img{aspect-ratio:3/2;object-position:50% 55%}}

/* Rows (ledger): label left, content right, hairlines between */
.ost-rows{margin:0;border-top:1px solid var(--line)}
.ost-rows>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--space-1) var(--space-5);padding-block:var(--space-3);border-bottom:1px solid var(--line)}
.ost-rows dt{font-weight:700}
.ost-rows dd{margin:0;min-width:0;font-variant-numeric:tabular-nums}
@media (max-width:520px){.ost-rows>div{grid-template-columns:1fr}}

/* Steps: the routing slip; CSS counts the numbers */
.ost-steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-5);counter-reset:ost-step}
.ost-steps>li{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:var(--space-4);counter-increment:ost-step}
.ost-steps>li::before{content:counter(ost-step);grid-row:1/span 2;display:grid;place-items:center;width:32px;height:32px;border-radius:var(--radius-pill);background:var(--brand);color:var(--on-brand);font-weight:700;font-variant-numeric:tabular-nums}
.ost-steps>li:not(:last-child)::after{content:"";position:absolute;left:15.5px;top:40px;bottom:calc(8px - var(--space-5));width:1px;background:var(--line)}
.ost-steps__title{margin:3px 0 var(--space-1);font-size:20px;line-height:26px;font-weight:700}
.ost-steps__text{margin:0;max-width:var(--measure);color:var(--ink-muted)}

/* Timeline: brand nodes on a hairline */
.ost-timeline{position:relative;list-style:none;margin:0;padding:0 0 0 var(--space-5);display:grid;gap:var(--space-5)}
.ost-timeline::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:var(--line)}
.ost-timeline>li{position:relative}
.ost-timeline>li::before{content:"";position:absolute;left:calc(-1*var(--space-5));top:7px;width:11px;height:11px;border-radius:var(--radius-pill);background:var(--brand)}
.ost-timeline__date{display:block;font-size:14px;line-height:22px;color:var(--ink-muted);font-variant-numeric:tabular-nums}
.ost-timeline__title{margin:0;font-weight:700}
.ost-timeline__text{margin:0;max-width:var(--measure);font-size:14px;line-height:22px;color:var(--ink-muted)}

/* Form */
.ost-form{display:grid;gap:var(--space-5);max-width:var(--measure)}
.ost-field{display:grid;gap:var(--space-2);min-width:0}
.ost-field__label{font-weight:700;line-height:22px}
.ost-field__hint{margin:0;font-size:14px;line-height:22px;color:var(--ink-muted)}
.ost-field__error{margin:0;font-size:14px;line-height:22px;font-weight:700;color:var(--signal-error)}
.ost-field__error::before{content:"!";display:inline-grid;place-items:center;width:18px;height:18px;margin-right:var(--space-2);border-radius:var(--radius-pill);background:var(--signal-error);color:var(--surface);font-size:12px;line-height:1;vertical-align:-3px}
.ost-input{display:block;box-sizing:border-box;width:100%;min-height:44px;margin:0;padding:var(--space-2) var(--space-3);border:1.5px solid var(--ink-muted);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font-family:var(--font-sans);font-size:16px;line-height:26px}
.ost-input:hover{border-color:var(--ink)}
.ost-input[aria-invalid="true"]{border-color:var(--signal-error);box-shadow:inset 0 0 0 1px var(--signal-error)}
.ost-input:disabled{background:var(--surface-raised);border-style:dashed;cursor:not-allowed}
textarea.ost-input{min-height:132px;resize:vertical}
select.ost-input{appearance:none;padding-right:var(--space-7);background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.ost-check{display:flex;align-items:flex-start;gap:var(--space-3);min-height:44px;padding-block:var(--space-2);cursor:pointer}
.ost-check input{flex:none;width:20px;height:20px;margin:3px 0 0;accent-color:var(--action)}

/* Feedback message: the word and the symbol carry the meaning */
.ost-note{display:flex;gap:var(--space-3);align-items:flex-start;max-width:var(--measure);padding:var(--space-4) var(--space-5);border-radius:var(--radius-md);background:var(--surface-raised);color:var(--ink)}
.ost-note p{margin:0}
.ost-note__mark{display:grid;place-items:center;flex:none;width:24px;height:24px;margin-top:1px;border-radius:var(--radius-pill);background:var(--brand);color:var(--on-brand);font-weight:700;font-size:14px;line-height:1}
.ost-note--error{box-shadow:inset 0 0 0 1.5px var(--signal-error)}
.ost-note--error .ost-note__mark{background:var(--signal-error);color:var(--surface)}
.ost-note--warn{box-shadow:inset 0 0 0 1.5px var(--signal-warn)}
.ost-note--warn .ost-note__mark{background:var(--signal-warn);color:var(--surface)}

/* Table */
.ost-table{width:100%;border-collapse:collapse;font-size:14px;line-height:22px}
.ost-table th,.ost-table td{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.ost-table th{font-weight:700}
.ost-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Running text from Markdown (blog, projects, legal pages) */
.ost-prose{max-width:var(--measure)}
.ost-prose>*{margin-block:0 var(--space-4)}
.ost-prose h2{margin:var(--space-7) 0 var(--space-4);font-family:var(--font-display);font-size:28px;line-height:34px;font-weight:700;text-wrap:balance}
.ost-prose h3{margin:var(--space-6) 0 var(--space-3);font-size:20px;line-height:26px;font-weight:700}
.ost-prose a{color:var(--brand-text);text-decoration:underline;text-underline-offset:.2em}
.ost-prose a:hover{text-decoration-thickness:2px}
.ost-prose ul,.ost-prose ol{padding-left:var(--space-5)}
.ost-prose ul{list-style:disc}
.ost-prose ol{list-style:decimal}
.ost-prose strong{font-weight:700}
.ost-prose li+li{margin-top:var(--space-1)}
.ost-prose li::marker{color:var(--brand-text)}
.ost-prose blockquote{margin:var(--space-6) 0;font-family:var(--font-display);font-style:italic;font-weight:700;font-size:24px;line-height:32px;color:var(--brand-text)}
.ost-prose code{font-family:var(--font-mono);font-size:.875em;padding:0 var(--space-1);border-radius:var(--radius-sm);background:var(--surface-raised)}
.ost-prose pre{padding:var(--space-4);border-radius:var(--radius-sm);background:var(--surface-raised);overflow-x:auto;font-size:14px;line-height:22px}
.ost-prose pre code{padding:0;background:none;font-size:inherit}
.ost-prose hr{margin:var(--space-7) 0;border:0;border-top:1px solid var(--line)}
.ost-prose img{display:block;width:100%;height:auto;border-radius:var(--radius-lg)}
.ost-prose table{width:100%;border-collapse:collapse;font-size:14px;line-height:22px}
.ost-prose th,.ost-prose td{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--line);text-align:left;vertical-align:top}

/* Footer */
.ost-footer{padding-block:var(--space-7) var(--space-5);padding-inline:max(var(--space-4),calc((100% - var(--content-width))/2));background:var(--surface-raised);color:var(--ink)}
.ost-footer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-6)}
.ost-footer__grid p{margin:0;font-size:14px;line-height:22px;color:var(--ink-muted)}
.ost-footer__links{display:grid;gap:0;margin:0;padding:0;list-style:none}
.ost-footer__links a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:none}
.ost-footer__links a:hover{color:var(--brand-text);text-decoration:underline;text-underline-offset:.2em}
.ost-footer__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-2) var(--space-5);margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--line);font-size:12px;line-height:18px;color:var(--ink-muted)}

/* ---- Charts. Colours only from data-1 … data-6 in fixed order, "other" in data-other.
   Bars at most 24px, 4px rounded data end, square at the baseline, 2px gap between
   segments. Text never in a data colour. Rules: docs/marke.md, "Diagramme" ---- */
.ost-chart{position:relative;margin:0;display:grid;gap:var(--space-4);min-width:0}
.ost-chart__body{min-width:0}
.ost-chart__axis-title{margin:0 0 calc(-1*var(--space-3));font-size:12px;line-height:18px;color:var(--ink-muted)}
.ost-chart__title{margin:0;font-size:20px;line-height:26px;font-weight:700}
.ost-chart__sub{margin:var(--space-1) 0 0;font-size:14px;line-height:22px;color:var(--ink-muted)}
.ost-chart__legend{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-5);margin:0;padding:0;list-style:none;font-size:14px;line-height:22px;color:var(--ink)}
.ost-chart__legend li{display:inline-flex;align-items:center;gap:var(--space-2)}
.ost-chart__legend i{flex:none;width:12px;height:12px;border-radius:var(--radius-sm);background:var(--c)}
.ost-chart__note{margin:0;font-size:12px;line-height:18px;color:var(--ink-muted)}
.ost-chart__table>summary{display:inline-flex;align-items:center;min-height:44px;color:var(--brand-text);font-size:14px;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:.2em}
.ost-chart__table[open]>summary{margin-bottom:var(--space-2)}

/* Value hint when a mark is hovered or focused */
.ost-chart [data-tip]{position:relative;outline-offset:2px}
.ost-chart [data-tip]:hover::after,.ost-chart [data-tip]:focus-visible::after{content:attr(data-tip);position:absolute;z-index:2;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);background:var(--surface-graphit);color:var(--on-graphit);outline:1px solid var(--graphit-edge);font-size:12px;line-height:18px;font-weight:700;white-space:nowrap;pointer-events:none}

/* Horizontal bars: label left, value at the tip */
.ost-bars{display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr);gap:var(--space-3) var(--space-4);align-items:center}
.ost-bars__label{font-size:14px;line-height:22px;color:var(--ink)}
.ost-bars__track{display:flex;align-items:center;gap:var(--space-2);min-width:0;min-height:24px;border-left:1px solid var(--ink-muted)}
.ost-bars__bar{display:flex;gap:2px;flex:none;width:var(--v);height:20px}
.ost-bars__bar>i{display:block;flex:var(--n,1) 1 0;min-width:2px;background:var(--c,var(--data-1))}
.ost-bars__bar>i:last-child{border-radius:0 var(--radius-sm) var(--radius-sm) 0}
/* Room for the value at the tip of the longest bar */
.ost-bars__track:has(.ost-bars__value) .ost-bars__bar{width:calc(var(--v) * .9)}
.ost-bars__bar:not(:has(i)){background:var(--c,var(--data-1));border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.ost-bars__value{flex:none;font-size:14px;line-height:22px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
@media (max-width:520px){.ost-bars{grid-template-columns:1fr;row-gap:var(--space-1)}.ost-bars__track{margin-bottom:var(--space-2)}}

/* Vertical columns: for time series; hairline grid, axis on the left */
.ost-columns{--h:200px;display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:var(--space-3)}
.ost-columns__axis{position:relative;height:var(--h);font-size:12px;line-height:18px;color:var(--ink-muted);font-variant-numeric:tabular-nums;text-align:right}
.ost-columns__axis span{position:absolute;right:0;bottom:var(--at);transform:translateY(50%)}
.ost-columns__plot{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);align-items:end;height:var(--h);border-bottom:1px solid var(--ink-muted);background:repeating-linear-gradient(to top,transparent 0 calc(var(--grid,50%) - 1px),var(--line) calc(var(--grid,50%) - 1px) var(--grid,50%))}
.ost-columns__group{display:flex;justify-content:center;align-items:flex-end;gap:2px;height:100%}
.ost-columns__group>i{display:block;width:min(24px,40%);height:var(--v);border-radius:var(--radius-sm) var(--radius-sm) 0 0;background:var(--c,var(--data-1))}
.ost-columns__x{grid-column:2;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin-top:var(--space-2);font-size:12px;line-height:18px;color:var(--ink-muted);text-align:center}

/* Meter: <progress class="ost-meter__bar">, no script and no style attribute. Fill in brand,
   signal-warn past the warning threshold, signal-error past the limit; the word sits in the head. */
.ost-meter{display:grid;gap:var(--space-1)}
.ost-meter__head{display:flex;justify-content:space-between;gap:var(--space-3);font-size:14px;line-height:22px}
.ost-meter__head b{font-variant-numeric:tabular-nums}
.ost-meter__state{font-weight:700}
.ost-meter--warn .ost-meter__state{color:var(--signal-warn)}
.ost-meter--error .ost-meter__state{color:var(--signal-error)}
.ost-meter__bar{--fill:var(--brand);--track:var(--surface-raised);display:block;width:100%;height:8px;margin:0;border:0;border-radius:var(--radius-pill);background:var(--track);overflow:hidden;-webkit-appearance:none;appearance:none}
.ost-band--raised .ost-meter__bar,.ost-card .ost-meter__bar{--track:var(--surface)}
.ost-meter--warn .ost-meter__bar{--fill:var(--signal-warn)}
.ost-meter--error .ost-meter__bar{--fill:var(--signal-error)}
.ost-meter__bar::-webkit-progress-bar{background:var(--track);border-radius:var(--radius-pill)}
.ost-meter__bar::-webkit-progress-value{background:var(--fill);border-radius:var(--radius-pill)}
.ost-meter__bar::-moz-progress-bar{background:var(--fill);border-radius:var(--radius-pill)}

/* Line and scatter (SVG, drawn by js/ostermann-charts.js) */
.ost-plot{display:block;max-width:100%;overflow:visible;font-family:var(--font-sans)}
.ost-plot:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.ost-plot__grid line{stroke:var(--line);stroke-width:1}
.ost-plot__grid line.ost-plot__base{stroke:var(--ink-muted)}
.ost-plot__tick{fill:var(--ink-muted);font-size:12px;font-variant-numeric:tabular-nums}
.ost-plot__line{fill:none;stroke:var(--c);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ost-plot__area{fill:var(--c);fill-opacity:.1;stroke:none}
.ost-plot__dot{fill:var(--c);stroke:var(--surface);stroke-width:2}
.ost-band--raised .ost-plot__dot,.ost-card .ost-plot__dot{stroke:var(--surface-raised)}
.ost-plot__end{fill:var(--ink);font-size:12px;font-weight:700}
.ost-plot__cross{stroke:var(--ink-muted);stroke-width:1}

/* Value hint for SVG charts */
.ost-chart__tip{position:absolute;z-index:3;display:grid;gap:2px;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);background:var(--surface-graphit);color:var(--on-graphit);outline:1px solid var(--graphit-edge);font-size:12px;line-height:18px;white-space:nowrap;pointer-events:none}
.ost-chart__tip[hidden]{display:none}
.ost-chart__tip span{display:flex;align-items:center;gap:var(--space-2)}
.ost-chart__tip i{width:10px;height:10px;border-radius:var(--radius-sm);background:var(--c);box-shadow:0 0 0 1px var(--surface-graphit)}