/* operandor design system — ported from design-system/ for Blazor.
   Every component value resolves to a semantic token so light/dark and
   theming stay a single-file change. Component prefix: .op- */

/* ---------------------------------------------------------------- fonts */
/* IBM Plex (SIL OFL 1.1, fontsource 5.1.1), self-hosted next to this stylesheet — no external CDN.
   Decision: each face comes in two files, basic Latin and Latin Extended, told apart by unicode-range.
   Why: the basic Latin file lacks ő and ű, and č, ć, đ, š and ž, so Hungarian, Croatian and Serbian text fell
   back to the system font for those letters; with unicode-range a browser loads the extended file only for a
   page that uses one of them, so the English pages load nothing more. The extended range leaves out ı, Œ and œ,
   which the basic file holds too; with them, the wordmark's dotless i made every page load it.
   Considered: one full font file per face, which every page would load; the basic files alone, which mixed two
   typefaces within a word. */
@font-face{font-family:"Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/ibm-plex-sans-latin-ext-400-normal.woff2") format("woff2");unicode-range:U+0100-0130,U+0132-0151,U+0154-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plex Sans";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Sans";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/ibm-plex-sans-latin-ext-400-italic.woff2") format("woff2");unicode-range:U+0100-0130,U+0132-0151,U+0154-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/ibm-plex-sans-latin-ext-500-normal.woff2") format("woff2");unicode-range:U+0100-0130,U+0132-0151,U+0154-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/ibm-plex-sans-latin-ext-600-normal.woff2") format("woff2");unicode-range:U+0100-0130,U+0132-0151,U+0154-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plex Serif";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/ibm-plex-serif-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Serif";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/ibm-plex-serif-latin-ext-400-normal.woff2") format("woff2");unicode-range:U+0100-0130,U+0132-0151,U+0154-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plex Serif";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/ibm-plex-serif-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Serif";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/ibm-plex-serif-latin-ext-600-normal.woff2") format("woff2");unicode-range:U+0100-0130,U+0132-0151,U+0154-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/ibm-plex-mono-latin-ext-400-normal.woff2") format("woff2");unicode-range:U+0100-0130,U+0132-0151,U+0154-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/ibm-plex-mono-latin-ext-500-normal.woff2") format("woff2");unicode-range:U+0100-0130,U+0132-0151,U+0154-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* --------------------------------------------------------------- colors */
:root{
--green-50:#F1FBE6;--green-100:#DFF4C6;--green-200:#C0E794;--green-300:#93D051;
--green-400:#5EA905;--green-500:#3E891A;--green-600:#2D7612;--green-700:#216111;
--green-800:#164B10;--green-900:#0F380E;--green-950:#09250A;

--n-0:#FFFFFF;--n-50:#FAFBF9;--n-100:#F4F5F3;--n-200:#E8EAE6;--n-300:#D6D9D3;
--n-400:#A5AAA2;--n-500:#7F857C;--n-600:#636A61;--n-700:#4A5049;--n-800:#333833;
--n-900:#1C2126;--n-950:#14181C;

--slate-50:#F1F5F8;--slate-100:#DFE8EE;--slate-200:#BFD0DC;--slate-300:#94AEC0;
--slate-400:#648197;--slate-500:#3F5B72;--slate-600:#253645;--slate-700:#1E2C39;
--slate-800:#17222C;--slate-900:#111A22;--slate-950:#0B1118;
}

/* --------------------------------------------------------------- status */
:root{
--danger-50:#FCEFED;--danger-100:#F7D9D4;--danger-500:#B5342A;--danger-600:#9C2A21;
--danger-700:#7C2019;--danger-400:#E0675A;
--success-50:var(--green-50);--success-600:var(--green-600);--success-400:var(--green-400);
--info-50:var(--slate-50);--info-600:var(--slate-600);--info-400:var(--slate-400);
}

/* ----------------------------------------------------------- typography */
:root{
--font-heading:"Plex Sans","Söhne","Helvetica Neue",Helvetica,system-ui,sans-serif;
--font-body:"Plex Sans","Söhne","Helvetica Neue",Helvetica,system-ui,sans-serif;
--font-serif:"Plex Serif",Georgia,"Times New Roman",serif;
--font-mono:"Plex Mono","Berkeley Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

--fw-regular:400;--fw-medium:500;--fw-semibold:600;

--fs-display:4.5rem;--fs-h1:3rem;--fs-h2:2.125rem;--fs-h3:1.375rem;--fs-h4:1.125rem;
--fs-body-lg:1.125rem;--fs-body:1rem;--fs-body-sm:0.875rem;--fs-caption:0.8125rem;--fs-micro:0.6875rem;

--lh-display:1.02;--lh-heading:1.14;--lh-body:1.6;--lh-tight:1.35;

--ls-display:-0.022em;--ls-heading:-0.014em;--ls-body:0em;--ls-label:0.01em;--ls-eyebrow:0.14em;--ls-mono:-0.005em;

--tt-eyebrow:uppercase;
}

/* -------------------------------------------------------------- spacing */
:root{
--sp-1:2px;--sp-2:4px;--sp-3:8px;--sp-4:12px;--sp-5:16px;--sp-6:24px;
--sp-7:32px;--sp-8:48px;--sp-9:64px;--sp-10:96px;--sp-11:128px;--sp-12:192px;

--measure-prose:64ch;--measure-narrow:46ch;--container-max:1200px;--container-text:760px;
--gutter:clamp(20px,5vw,64px);

--radius-0:0px;--radius-1:2px;--radius-2:4px;--radius-3:6px;--radius-4:10px;--radius-5:16px;--radius-full:999px;
--border-hairline:1px;--border-strong:1.5px;--border-focus:2px;
}

/* ------------------------------------------------------------ elevation */
:root{
--shadow-0:none;
--shadow-1:0 1px 2px rgba(20,24,28,0.05);
--shadow-2:0 1px 2px rgba(20,24,28,0.04),0 2px 8px rgba(20,24,28,0.06);
--shadow-3:0 2px 4px rgba(20,24,28,0.04),0 8px 24px rgba(20,24,28,0.08);
--shadow-4:0 4px 8px rgba(20,24,28,0.06),0 18px 48px rgba(20,24,28,0.12);
--shadow-inset-hairline:inset 0 0 0 1px rgba(20,24,28,0.06);
--shadow-1-dark:0 1px 2px rgba(0,0,0,0.4);
--shadow-2-dark:0 2px 8px rgba(0,0,0,0.45);
--shadow-3-dark:0 8px 24px rgba(0,0,0,0.5);
--shadow-4-dark:0 18px 48px rgba(0,0,0,0.55);
}

/* --------------------------------------------------------------- motion */
:root{
--dur-instant:80ms;--dur-fast:140ms;--dur-base:200ms;--dur-slow:320ms;--dur-deliberate:520ms;--dur-wordmark:2600ms;
--ease-standard:cubic-bezier(0.2,0,0,1);
--ease-exit:cubic-bezier(0.4,0,1,1);
--ease-inout:cubic-bezier(0.4,0,0.2,1);
--ease-linear:linear;
}
@media (prefers-reduced-motion:reduce){
:root{--dur-instant:0ms;--dur-fast:0ms;--dur-base:0ms;--dur-slow:0ms;--dur-deliberate:0ms;--dur-wordmark:0ms}
}

/* ------------------------------------------------------------ semantic */
:root,[data-theme="light"]{
--surface-page:var(--n-100);--surface-card:var(--n-0);--surface-sunken:var(--n-200);
--surface-raised:var(--n-0);--surface-inverse:var(--n-950);--surface-structural:var(--slate-600);
--surface-accent-tint:var(--green-50);--surface-hover:var(--n-200);--surface-active:var(--n-300);--surface-disabled:var(--n-200);

--text-heading:var(--n-950);--text-body:var(--n-800);--text-muted:var(--n-600);--text-subtle:var(--n-500);
--text-disabled:var(--n-400);--text-on-accent:var(--n-0);--text-on-inverse:var(--n-100);
--text-on-structural:var(--green-300);--text-on-accent-tint:var(--green-800);
--text-link:var(--green-600);--text-link-hover:var(--green-700);

--border-subtle:var(--n-200);--border-default:var(--n-300);--border-strong-c:var(--n-400);
--border-inverse:rgba(255,255,255,0.14);--border-accent:var(--green-600);

--accent:var(--green-600);--accent-hover:var(--green-700);--accent-active:var(--green-800);
--accent-quiet:var(--green-100);--brand-mark:var(--green-500);--focus-ring:var(--green-600);

--shadow-card:var(--shadow-1);--shadow-raised:var(--shadow-2);--shadow-overlay:var(--shadow-4);
--scrim:rgba(20,24,28,0.44);
}
html{color-scheme:light} :root{--text-danger:var(--danger-600)} @media (prefers-color-scheme:dark){:root:not([data-theme]){
--surface-page:var(--n-950);
--surface-card:#1C2126;
--surface-sunken:#101417;
--surface-raised:#232930;
--surface-inverse:var(--n-100);
--surface-structural:var(--slate-700);
--surface-accent-tint:rgba(94,169,5,0.12);
--surface-hover:rgba(255,255,255,0.06);
--surface-active:rgba(255,255,255,0.10);
--surface-disabled:rgba(255,255,255,0.06);

--text-heading:var(--n-50);
--text-body:#D8DCD7;
--text-muted:#A5AAA2;
--text-subtle:#8B918A;
--text-disabled:#5C635C;
--text-on-accent:var(--n-950);
--text-on-inverse:var(--n-950);
--text-on-structural:var(--green-300);
--text-on-accent-tint:var(--green-300);
--text-link:var(--green-400);
--text-link-hover:var(--green-300);

--border-subtle:rgba(255,255,255,0.10);
--border-default:rgba(255,255,255,0.16);
--border-strong-c:rgba(255,255,255,0.28);
--border-inverse:rgba(20,24,28,0.14);
--border-accent:var(--green-400);

--accent:var(--green-400);
--accent-hover:var(--green-300);
--accent-active:var(--green-200);
--accent-quiet:rgba(94,169,5,0.18);
--brand-mark:var(--green-400);
--focus-ring:var(--green-400);

--shadow-card:var(--shadow-1-dark);
--shadow-raised:var(--shadow-2-dark);
--shadow-overlay:var(--shadow-4-dark);
--scrim:rgba(0,0,0,0.62);
color-scheme:dark;--text-danger:var(--danger-400)}}

/* Explicit user choice. With no data-theme attribute, the media query above
   remains the source of truth (the System option). */
:root[data-theme="dark"]{
--surface-page:var(--n-950);--surface-card:#1C2126;--surface-sunken:#101417;--surface-raised:#232930;--surface-inverse:var(--n-100);--surface-structural:var(--slate-700);--surface-accent-tint:rgba(94,169,5,0.12);--surface-hover:rgba(255,255,255,0.06);--surface-active:rgba(255,255,255,0.10);--surface-disabled:rgba(255,255,255,0.06);
--text-heading:var(--n-50);--text-body:#D8DCD7;--text-muted:#A5AAA2;--text-subtle:#8B918A;--text-disabled:#5C635C;--text-on-accent:var(--n-950);--text-on-inverse:var(--n-950);--text-on-structural:var(--green-300);--text-on-accent-tint:var(--green-300);--text-link:var(--green-400);--text-link-hover:var(--green-300);
--border-subtle:rgba(255,255,255,0.10);--border-default:rgba(255,255,255,0.16);--border-strong-c:rgba(255,255,255,0.28);--border-inverse:rgba(20,24,28,0.14);--border-accent:var(--green-400);
--accent:var(--green-400);--accent-hover:var(--green-300);--accent-active:var(--green-200);--accent-quiet:rgba(94,169,5,0.18);--brand-mark:var(--green-400);--focus-ring:var(--green-400);
--shadow-card:var(--shadow-1-dark);--shadow-raised:var(--shadow-2-dark);--shadow-overlay:var(--shadow-4-dark);--scrim:rgba(0,0,0,0.62);color-scheme:dark;--text-danger:var(--danger-400)}

/* ------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--surface-page);
  color:var(--text-body);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3{text-wrap:pretty}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--text-link-hover)}
:focus-visible{outline:var(--border-focus) solid var(--focus-ring);outline-offset:2px}

/* ---------------------------------------------------------------- button */
.op-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-3);font-family:var(--font-body);font-weight:var(--fw-medium);letter-spacing:var(--ls-label);border:1px solid transparent;border-radius:var(--radius-2);cursor:pointer;text-decoration:none;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),transform var(--dur-instant) var(--ease-standard)}
.op-btn:focus-visible{outline:var(--border-focus) solid var(--focus-ring);outline-offset:2px}
.op-btn:active{transform:translateY(0.5px)}
.op-btn--sm{height:32px;padding:0 var(--sp-4);font-size:var(--fs-caption)}
.op-btn--md{height:40px;padding:0 var(--sp-5);font-size:var(--fs-body-sm)}
.op-btn--lg{height:48px;padding:0 var(--sp-6);font-size:var(--fs-body)}
.op-btn--primary{background:var(--accent);color:var(--text-on-accent)}
.op-btn--primary:hover{background:var(--accent-hover);color:var(--text-on-accent)}
.op-btn--primary:active{background:var(--accent-active)}
.op-btn--secondary{background:var(--surface-structural);color:var(--n-0)}
.op-btn--secondary:hover{background:var(--slate-700);color:var(--n-0)}
.op-btn--secondary:active{background:var(--slate-800)}
.op-btn--outline{background:transparent;color:var(--text-heading);border-color:var(--border-default)}
.op-btn--outline:hover{background:var(--surface-hover);border-color:var(--border-strong-c);color:var(--text-heading)}
.op-btn--outline.op-btn--on-dark{color:#fff;border-color:rgba(255,255,255,0.3)}
.op-btn--outline.op-btn--on-dark:hover{background:rgba(255,255,255,0.14);border-color:rgba(255,255,255,0.65);color:#fff}
.op-btn--outline.op-btn--on-dark:active{background:rgba(255,255,255,0.22)}
.op-btn--ghost{background:transparent;color:var(--text-link)}
.op-btn--ghost:hover{background:var(--surface-accent-tint);color:var(--text-link)}
.op-btn--danger{background:var(--danger-600);color:var(--n-0)}
.op-btn--danger:hover{background:var(--danger-700)}
.op-btn:disabled,.op-btn[aria-disabled="true"]{background:var(--surface-disabled);color:var(--text-disabled);border-color:transparent;cursor:not-allowed;transform:none}
.op-btn--block{width:100%}

/* ------------------------------------------------------------ text link */
/* OpTextLink: reads as text and wraps like it; its last word and arrow never part. */
.op-text-link{display:inline;color:var(--text-link);font-weight:var(--fw-medium);font-size:15px;line-height:1.5;text-decoration:none}
.op-text-link:hover{text-decoration:underline;text-underline-offset:3px}
.op-text-link.op-text-link--on-dark{color:var(--green-300)}
.op-text-link__end{white-space:nowrap}
.op-text-link__end .op-icon{margin-left:8px;vertical-align:middle}

/* -------------------------------------------------------------- iconbtn */
.op-iconbtn{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid transparent;border-radius:var(--radius-2);color:var(--text-muted);cursor:pointer;transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}
.op-iconbtn:hover{background:var(--surface-hover);color:var(--text-heading)}
.op-iconbtn:focus-visible{outline:var(--border-focus) solid var(--focus-ring);outline-offset:2px}
.op-iconbtn--sm{width:32px;height:32px}
.op-iconbtn--md{width:40px;height:40px}
.op-iconbtn--outline{border-color:var(--border-default)}
.op-iconbtn:disabled{color:var(--text-disabled);cursor:not-allowed}

/* --------------------------------------------------------------- badge */
.op-badge{display:inline-flex;align-items:center;gap:var(--sp-2);font-family:var(--font-body);font-size:var(--fs-micro);font-weight:var(--fw-medium);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;padding:3px var(--sp-3) 2px;border-radius:var(--radius-1);border:1px solid transparent}
.op-badge--accent{background:var(--surface-accent-tint);color:var(--text-on-accent-tint)}
.op-badge--neutral{background:var(--surface-sunken);color:var(--text-muted)}
.op-badge--outline{border-color:var(--border-default);color:var(--text-muted)}
.op-badge--danger{background:var(--danger-50);color:var(--danger-700)}
.op-badge--solid{background:var(--accent);color:var(--text-on-accent)}

/* ----------------------------------------------------------------- tag */
.op-tag{display:inline-flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-caption);color:var(--text-body);background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-2);padding:4px var(--sp-3);font-family:var(--font-mono);letter-spacing:var(--ls-mono)}
.op-tag--removable{padding-right:var(--sp-2)}
.op-tag__x{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:0;background:transparent;color:var(--text-subtle);cursor:pointer;border-radius:var(--radius-1)}
.op-tag__x:hover{background:var(--surface-hover);color:var(--text-heading)}

/* ---------------------------------------------------------------- card */
.op-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-3);box-shadow:var(--shadow-card)}
.op-card--flat{box-shadow:none}
.op-card--raised{box-shadow:var(--shadow-raised)}
.op-card--structural{background:var(--surface-structural);border-color:transparent;color:var(--n-0)}
.op-card--pad-md{padding:var(--sp-6)}
.op-card--pad-lg{padding:var(--sp-7)}
.op-card--pad-none{padding:0}
.op-card--interactive{cursor:pointer;transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)}
.op-card--interactive:hover{border-color:var(--border-accent);box-shadow:var(--shadow-raised);transform:translateY(-1px)}
/* A card that is one link (OpCard Href): its text keeps the card's colours, and its cue shows where it leads. */
.op-card--link{display:block;color:inherit;text-decoration:none;transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)}
.op-card--link:hover{color:inherit;border-color:var(--border-accent);box-shadow:var(--shadow-raised);transform:translateY(-1px)}
.op-card--link:focus-visible{border-color:var(--border-accent)}
.op-card__cue{display:inline-flex;align-items:center;gap:var(--sp-3);color:var(--text-link);font-weight:var(--fw-medium);font-size:15px;line-height:1.5}
.op-card--link:hover .op-card__cue{color:var(--text-link-hover);text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){.op-card--interactive:hover,.op-card--link:hover{transform:none}}

/* ---------------------------------------------------------------- stat */
.op-stat__label{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--text-muted);font-weight:var(--fw-medium)}
.op-stat__value{font-family:var(--font-mono);font-size:32px;letter-spacing:-0.02em;color:var(--text-heading);line-height:1.1;margin-top:var(--sp-3)}
.op-stat__hint{font-size:var(--fs-caption);color:var(--text-muted);margin-top:var(--sp-2)}

/* --------------------------------------------------------------- field */
.op-field{display:flex;flex-direction:column;gap:var(--sp-3)}
.op-field__label{font-size:var(--fs-body-sm);font-weight:var(--fw-medium);letter-spacing:var(--ls-label);color:var(--text-heading)}
.op-field__req{color:var(--accent);margin-left:2px}
.op-field__hint{font-size:var(--fs-caption);color:var(--text-muted)}
.op-field__error{font-size:var(--fs-caption);color:var(--text-danger)}

.op-input,.op-textarea,.op-select{width:100%;box-sizing:border-box;font-family:var(--font-body);font-size:var(--fs-body-sm);color:var(--text-heading);background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-2);padding:0 var(--sp-4);height:40px;transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard)}
.op-textarea{height:auto;padding:var(--sp-4);line-height:var(--lh-body);resize:vertical}
.op-input::placeholder,.op-textarea::placeholder{color:var(--text-disabled)}
.op-input:hover,.op-textarea:hover,.op-select:hover{border-color:var(--border-strong-c)}
.op-input:focus,.op-textarea:focus,.op-select:focus{outline:none;border-color:var(--border-accent);box-shadow:0 0 0 3px var(--accent-quiet)}
.op-input--invalid,.op-textarea--invalid,.op-select--invalid{border-color:var(--danger-500)}
.op-input--invalid:focus{box-shadow:0 0 0 3px var(--danger-50)}
.op-input:disabled,.op-textarea:disabled,.op-select:disabled{background:var(--surface-disabled);color:var(--text-disabled);cursor:not-allowed}
.op-input--mono{font-family:var(--font-mono);letter-spacing:var(--ls-mono)}
.op-select{appearance:none;padding-right:var(--sp-7);background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 18px) 17px,calc(100% - 12px) 17px;background-size:6px 6px,6px 6px;background-repeat:no-repeat}

/* --------------------------------------------------------- check/radio */
.op-check,.op-radio{display:inline-flex;align-items:flex-start;gap:var(--sp-3);font-size:var(--fs-body-sm);color:var(--text-body);cursor:pointer}
.op-check__box,.op-radio__box{flex:0 0 auto;width:18px;height:18px;margin-top:1px;border:1.5px solid var(--border-strong-c);background:var(--surface-card);display:inline-flex;align-items:center;justify-content:center;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard)}
.op-check__box{border-radius:var(--radius-1)}
.op-radio__box{border-radius:var(--radius-full)}
.op-check:hover .op-check__box,.op-radio:hover .op-radio__box{border-color:var(--accent)}
.op-check--on .op-check__box{background:var(--accent);border-color:var(--accent)}
.op-radio--on .op-radio__box{border-color:var(--accent);border-width:5px}
.op-check__mark{width:11px;height:11px;color:var(--text-on-accent)}
.op-check input,.op-radio input{position:absolute;opacity:0;width:0;height:0}
.op-check input:focus-visible+.op-check__box,.op-radio input:focus-visible+.op-radio__box{outline:var(--border-focus) solid var(--focus-ring);outline-offset:2px}
.op-check--disabled,.op-radio--disabled{color:var(--text-disabled);cursor:not-allowed}

/* -------------------------------------------------------------- callout */
.op-callout{display:flex;gap:var(--sp-4);padding:var(--sp-5);border-radius:var(--radius-3);border:1px solid var(--border-subtle);background:var(--surface-card);font-size:var(--fs-body-sm);line-height:var(--lh-body);color:var(--text-body)}
.op-callout__icon{flex:0 0 auto;margin-top:1px}
.op-callout__title{font-weight:var(--fw-semibold);color:var(--text-heading);margin-bottom:2px}
.op-callout--accent{background:var(--surface-accent-tint);border-color:var(--green-200);color:var(--text-on-accent-tint)}
.op-callout--accent .op-callout__title{color:var(--text-on-accent-tint)}
.op-callout--danger{background:var(--danger-50);border-color:var(--danger-100);color:var(--danger-700)}
.op-callout--danger .op-callout__title{color:var(--danger-700)}
.op-callout--info{background:var(--info-50);border-color:var(--slate-200);color:var(--slate-700)}

/* ------------------------------------------------------- dialog / toast */
/* OpDialog is a native <dialog> shown with showModal: the browser centres it in the top layer and draws ::backdrop. */
.op-dialog{background:var(--surface-card);color:inherit;border:1px solid var(--border-subtle);border-radius:var(--radius-4);box-shadow:var(--shadow-overlay);padding:0;width:calc(100% - 2 * var(--sp-6));max-width:480px;max-height:calc(100% - 2 * var(--sp-6));overflow:auto;animation:op-rise var(--dur-slow) var(--ease-standard)}
.op-dialog::backdrop{background:var(--scrim,rgba(20,24,28,0.44));animation:op-fade var(--dur-base) var(--ease-standard)}
/* A dialog shown without its script (OpDialog) is not modal, so the browser neither centres it nor puts it in
   the top layer: it is placed where a modal one would be, above the header, the consent panel and the toast. */
.op-dialog--inline{position:fixed;inset:0;margin:auto;height:fit-content;z-index:60}
.op-dialog__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-5);padding:var(--sp-6) var(--sp-6) 0}
.op-dialog__title{font-family:var(--font-heading);font-size:var(--fs-h3);font-weight:var(--fw-semibold);letter-spacing:var(--ls-heading);color:var(--text-heading)}
.op-dialog__body{padding:var(--sp-4) var(--sp-6) var(--sp-6);font-size:var(--fs-body-sm);line-height:var(--lh-body);color:var(--text-muted)}
.op-dialog__foot{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--sp-3);padding:var(--sp-5) var(--sp-6);border-top:1px solid var(--border-subtle)}
/* Decision: on a phone the dialog's actions stack at full width, the last one (the main action) on top.
   Why: a row of three actions does not fit 375px once a label is translated ("Az összes elfogadása"), and
   a wrapped row leaves buttons of odd widths at odd places.
   Considered: wrapping only, which breaks the row at a different place in every language; shorter labels,
   which would bend the copy to the layout. */
@media (max-width:480px){
  .op-dialog__foot{flex-direction:column-reverse;align-items:stretch}
}
/* While ConsentDialog's first-visit panel covers the bottom of the screen, the browser scrolls a focused element
   above it, and the end of the page can be scrolled above it too. The space is the panel's tallest measured
   height with its inset (about 190px on wide screens, 260px at 320px wide, in the longest language) and a margin.
   Here and not in the component's scoped CSS, whose rewrite cannot reach html or body. */
html:has(.op-consent){--op-consent-space:208px;scroll-padding-bottom:var(--op-consent-space)}
html:has(.op-consent) body{padding-bottom:var(--op-consent-space)}
@media (max-width:768px){html:has(.op-consent){--op-consent-space:272px}}
@keyframes op-fade{from{opacity:0}to{opacity:1}}
@keyframes op-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ToastHost's corner of the screen.
   Decision: while the first-visit consent panel is on screen, the toast sits above it.
   Why: both are fixed to the bottom of the screen and the toast is on top, so it covered the panel's buttons, all
   three on a phone, until the visitor dismissed it. --op-consent-space is the room the page already keeps for the
   panel; without the panel it is not set and the toast is in the corner.
   Considered: the toast under the panel, which hides the outcome of a send; a timeout on the toast, which takes an
   error away before it is read.
   Decision: the region reaches from under the header down to that place, and the toast sits at its lower end by
   an auto margin.
   Why: on a short screen, a phone in landscape, the room above the panel is less than the toast is tall. Placed
   from the bottom alone, the toast was pushed off the top of the screen with its title and its dismiss button,
   and nothing scrolls a fixed element back. An auto margin is nothing when there is no room, so the toast then
   starts under the header and lies over part of the panel, where it can be read and dismissed; one taller than
   the screen scrolls inside. The region itself lets clicks through.
   Considered: a rule by screen height, which needs the toast's height in every language; the corner on short
   screens, which again covers all of the panel's buttons. */
.op-toasts{position:fixed;top:88px;right:24px;bottom:calc(24px + var(--op-consent-space,0px));display:flex;flex-direction:column;pointer-events:none;z-index:50}
.op-toasts>.op-toast{flex:0 0 auto;margin-top:auto;pointer-events:auto;max-height:calc(100vh - 112px);max-height:calc(100dvh - 112px);overflow-y:auto}
.op-toast{display:flex;align-items:flex-start;gap:var(--sp-4);background:var(--surface-inverse);color:var(--text-on-inverse);border-radius:var(--radius-3);box-shadow:var(--shadow-overlay);padding:var(--sp-4) var(--sp-5);font-size:var(--fs-body-sm);max-width:420px;animation:op-rise var(--dur-slow) var(--ease-standard)}
.op-toast__title{font-weight:var(--fw-semibold)}
.op-toast__msg{opacity:0.78;margin-top:2px}
.op-toast--accent .op-toast__icon{color:var(--green-300)}
.op-toast--danger .op-toast__icon{color:var(--danger-400)}
.op-toast__x{margin-left:auto;background:transparent;border:0;color:currentColor;opacity:0.6;cursor:pointer;padding:0}
.op-toast__x:hover{opacity:1}

/* --------------------------------------------------------- breadcrumbs */
.op-crumbs{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-caption);color:var(--text-muted);flex-wrap:wrap}
.op-crumbs a{color:var(--text-muted);text-decoration:none}
.op-crumbs a:hover{color:var(--text-link)}
.op-crumbs__sep{color:var(--text-disabled)}
.op-crumbs__current{color:var(--text-heading)}

/* --------------------------------------------------------------- icon */
.op-icon{display:inline-block;flex:0 0 auto;background:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center}

/* ----------------------------------------------------- site chrome */
.op-band{position:relative;padding:var(--band-padding,96px) var(--gutter)}
.op-band__inner{max-width:var(--container-max);margin:0 auto;position:relative}
.op-band--page{background:var(--surface-page)}
.op-band--card{background:var(--surface-card)}
.op-band--structural{background:var(--slate-600)}
.op-band--dark{background:var(--n-950)}

.op-eyebrow{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:0.14em;color:var(--accent)}
.op-eyebrow--dark{color:var(--green-300)}

.op-wordmark{line-height:1}
.op-wordmark__dot{color:var(--brand-mark)}
.op-wordmark__i{position:relative;display:inline-block;line-height:1}
.op-wordmark__i::before{content:"";position:absolute;left:0.137em;transform:translateX(-50%);top:0.14em;width:0.15em;height:0.15em;border-radius:50%;background:var(--brand-mark)}

.op-field-mark{position:absolute;inset:0;-webkit-mask-image:url("mark-f.svg");mask-image:url("mark-f.svg");-webkit-mask-repeat:repeat;mask-repeat:repeat}

.op-header{position:sticky;top:0;z-index:30;background:var(--surface-card);border-bottom:1px solid var(--border-subtle)}
.op-header__inner{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter);height:72px;display:flex;align-items:center;gap:40px}
.op-header__nav{display:flex;gap:28px;margin-left:8px}
.op-nav-link{font-size:14px;font-weight:500;letter-spacing:0.01em;text-decoration:none;padding-bottom:2px;color:var(--text-muted);border-bottom:2px solid transparent;white-space:nowrap}
.op-nav-link:hover{color:var(--text-heading)}
.op-nav-link.active{color:var(--text-heading);border-bottom-color:var(--accent)}
.op-header__home{display:flex;align-items:center;flex-shrink:0;min-width:0;text-decoration:none}
.op-header__right{margin-left:auto;display:flex;align-items:center;gap:14px;min-width:0}
.op-header__right .op-btn{flex-shrink:0;white-space:nowrap;max-width:100%}
.op-header__menu{display:none;flex-shrink:0}
.op-header__toggle{list-style:none;cursor:pointer}
.op-header__toggle::-webkit-details-marker{display:none}
.op-header__menu:not([open]) .op-header__icon-close,.op-header__menu[open] .op-header__icon-open{display:none}
.op-header__lang{display:flex;align-items:center}

/* Hidden on screen, read by screen readers: a name for a control whose visible label is partial. */
.op-visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.op-langmenu{position:relative}
.op-langmenu__button{display:inline-flex;align-items:center;gap:6px;list-style:none;cursor:pointer;font-size:14px;font-weight:500;letter-spacing:0.01em;color:var(--text-muted);padding:6px 8px;border-radius:var(--radius-2)}
.op-langmenu__button::-webkit-details-marker{display:none}
.op-langmenu__button:hover,.op-langmenu[open] .op-langmenu__button{color:var(--text-heading)}
.op-langmenu[open] .op-langmenu__button{background:var(--surface-hover)}
/* The list hangs from its button: its left edge under the button's, its notch pointing at the icon
   (8px padding + half of the 18px icon), and it drops from there. */
.op-langmenu__list{position:absolute;top:calc(100% + 8px);left:0;min-width:160px;margin:0;padding:6px 0;list-style:none;background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-3);box-shadow:var(--shadow-raised);z-index:31;transform-origin:17px 0;animation:op-drop var(--dur-fast) var(--ease-standard)}
.op-langmenu__list::before{content:"";position:absolute;top:-6px;left:12px;width:10px;height:10px;background:var(--surface-card);border-top:1px solid var(--border-default);border-left:1px solid var(--border-default);transform:rotate(45deg)}
@keyframes op-drop{from{opacity:0;transform:translateY(-4px) scaleY(0.96)}to{opacity:1;transform:none}}
.op-langmenu__link{display:block;padding:8px 16px;font-size:14px;color:var(--text-body);text-decoration:none}
.op-langmenu__link:hover{background:var(--surface-hover);color:var(--text-heading)}
.op-langmenu__link[aria-current="true"]{color:var(--text-heading);font-weight:600}

.op-footer{background:var(--n-950);padding:72px var(--gutter) 32px;position:relative;overflow:hidden}
.op-footer__inner{max-width:var(--container-max);margin:0 auto;position:relative}
.op-footer__cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px}
.op-footer__coltitle{font-size:11px;text-transform:uppercase;letter-spacing:0.14em;color:var(--green-300);font-weight:500}
.op-footer__links{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.op-footer__links a{font-size:14px;color:rgba(255,255,255,0.72);text-decoration:none}
.op-footer__links a:hover{color:#fff}
.op-footer__links--mono{font-family:var(--font-mono);font-size:13px;color:rgba(255,255,255,0.72)}
.op-footer__after{margin-top:18px}
.op-footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:56px;padding-top:24px;border-top:1px solid rgba(255,255,255,0.12);font-size:12px;color:rgba(255,255,255,0.55);font-family:var(--font-mono)}
.op-footer__utility{display:flex;align-items:center;gap:10px}
.op-footer__icon-button{display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;padding:0;border:1px solid transparent;border-radius:var(--radius-2);background:transparent;color:rgba(255,255,255,0.58);cursor:pointer;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}
.op-footer__icon-button:hover{background:rgba(255,255,255,0.1);color:#fff}
.op-footer__icon-button:focus-visible{outline:var(--border-focus) solid var(--green-300);outline-offset:2px}

/* --------------------------------------------------------- responsive */
/* Decision: the header folds its links and the language menu into the menu button up to 1180px, not 900px.
   Why: the Hungarian links ("Szakmai tapasztalat" the longest), the language menu and the short call to action
   need about 1165px in one row; below that a link broke into two lines or the row ran past the right edge.
   Considered: tighter gaps between the links, which still left Hungarian and Croatian 40–80px over at 901–960px;
   the language menu without its name, which leaves it without a visible label; a shorter Hungarian label, which
   the copy does not allow. */
@media (max-width:1180px){
  .op-header__inner{gap:20px}
  .op-header__nav{display:none}
  .op-header__menu{display:block}
  /* Decision: the panel is at most as tall as the screen below the header, and scrolls inside.
     Why: the header is sticky, so the panel does not move with the page: on a short screen, such as a phone in
     landscape, the end of the open language list was below the screen and could not be reached. dvh follows the
     browser's own bars; vh is for browsers without it.
     Considered: a header that is not sticky while the menu is open, which scrolls the menu button away. */
  .op-header__panel{display:flex;flex-direction:column;position:absolute;top:72px;left:0;right:0;max-height:calc(100vh - 72px);max-height:calc(100dvh - 72px);overflow-y:auto;overscroll-behavior:contain;background:var(--surface-card);border-bottom:1px solid var(--border-subtle);box-shadow:var(--shadow-raised);padding:8px var(--gutter) 16px;z-index:29}
  .op-header__panel .op-nav-link{padding:14px 0;border-bottom:0}
  .op-header__lang--menu{border-top:1px solid var(--border-subtle);margin-top:8px}
  .op-header__lang--menu .op-langmenu{width:100%}
  .op-header__lang--menu .op-langmenu__button{padding:14px 0}
  .op-header__lang--menu .op-langmenu[open] .op-langmenu__button{background:none}
  .op-header__lang--menu .op-langmenu__list{position:static;min-width:0;padding:0 0 8px;border:0;border-radius:0;box-shadow:none;background:none;animation:none}
  .op-header__lang--menu .op-langmenu__list::before{display:none}
  .op-header__lang--menu .op-langmenu__link{padding:10px 0 10px 24px}
  .op-header__lang--bar{display:none}
  .op-header__toggle{display:inline-flex}
  .op-header__right{gap:8px}
}
@media (max-width:900px){
  .op-footer__cols{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:640px){
  .op-header__inner{gap:12px}
  .op-header__right{gap:8px}
  .op-header__right .op-btn{height:30px;padding:0 12px;font-size:11px}
  .op-footer__cols{grid-template-columns:1fr}
  .op-band{padding:64px var(--gutter)}
}
/* Decision: below 400px the header's call to action drops its arrow, and the button and the gaps narrow.
   Why: the logo, a two-word label and the menu button need about 406px with the arrow, so on 361–399px phones
   the menu button ran off the edge; without the arrow they fit from 375px, and the label still says where it leads.
   Considered: hiding the button up to 400px, as below 360px, which drops the call to action on the most common
   phone widths; a narrower gutter, which moves the logo out of line with the page's text. */
@media (max-width:400px){
  .op-header__inner{gap:10px}
  .op-header__right{gap:6px}
  .op-header__right .op-btn{padding:0 10px}
  .op-header__right .op-btn .op-icon{display:none}
}
@media (max-width:360px){
  .op-header__inner{gap:10px;padding-left:14px;padding-right:14px}
  .op-header__right{gap:6px}
  .op-header__right .op-btn{display:none}
  .op-header__toggle{width:32px;height:32px;flex-shrink:0;padding:0}
}

/* Allow long words to shrink on narrow screens. */
.op-band__inner{min-width:0;overflow-wrap:anywhere}
.op-toast{max-width:min(420px,calc(100vw - 48px));overflow-wrap:anywhere}
@media (max-width:640px){
  .op-input,.op-textarea,.op-select{font-size:16px}
}

/* ------------------------------------------------------ forced colors */
/* Decision: under forced colors (a Windows contrast theme) the rules below restore what the design showed
   through a background, a shadow or a transparent border, in the theme's own colours.
   Why: the browser then repaints every background in the page's colour, drops shadows and draws transparent
   borders. Icons are masks painted with their background, so they vanished and icon-only buttons were empty;
   a ticked checkbox looked like an empty one; a field's focus ring and the toast's edge were shadows; every
   menu link carried the current page's underline; the wordmark's i lost its dot.
   Considered: forced-color-adjust:none on the page, which keeps the brand's colours against the theme the
   visitor chose; inline SVG icons, which keep their colour without a rule but change every icon's markup. */
@media (forced-colors:active){
  /* An icon takes the colour the browser gave its parent's text: a link's, a button's or the page's. Where
     preserve-parent-color is not known, it is drawn in the page's text colour. */
  .op-icon,.op-wordmark__i::before{forced-color-adjust:none;background-color:CanvasText}
  @supports (forced-color-adjust:preserve-parent-color){
    .op-icon,.op-wordmark__i::before{forced-color-adjust:preserve-parent-color;background-color:currentColor}
  }

  .op-input:focus,.op-textarea:focus,.op-select:focus{outline:var(--border-focus) solid var(--focus-ring);outline-offset:2px}
  /* The danger colour is gone, so an invalid field is told by its heavier border as well as its message. */
  .op-input--invalid,.op-textarea--invalid,.op-select--invalid{border-width:2px}

  .op-check--on .op-check__box{forced-color-adjust:none;background:Highlight;border-color:Highlight}
  .op-check--on .op-check__mark{background-color:HighlightText}
  .op-radio--on .op-radio__box{forced-color-adjust:none;background:Canvas;border-color:Highlight}

  .op-toast{border:1px solid CanvasText}

  .op-nav-link{border-bottom-color:Canvas}
  .op-nav-link.active{border-bottom-color:LinkText}
}

/* ------------------------------------------------------ framework UI */
h1:focus {
    outline: none;
}

#blazor-error-ui {
    background: var(--surface-raised);
    color: var(--text-heading);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }