/* OIE design tokens — UX-2 "Accessible by default", Task 1 (R5-19, R1-09, R2-06, R3-27, R4-35).
 *
 * The one place an OIE colour is written. It loads in the <head> of every page:
 * every vendor layout through the metas shadow (overrides/design_1/web/includes/
 * metas.blade.php), the Ops shell and the four standalone public pages through
 * their own link before ops.css. ops.css and storefront.css read these tokens.
 *
 * It loads BEFORE app.min.css, the theme's inline <style> (custom CSS, fonts,
 * getThemeColorsSettings()) and every vendor part stylesheet, so each rule that
 * must beat a vendor rule wins by specificity or !important, never by order.
 *
 * Selector rule (PF1-PF3): outside the :root token block every selector starts
 * with `html:root` (the moved brand values only), `body:not(.dark-mode)` (every
 * vendor custom property, vendor class and bare element) or `.oie-` (package
 * classes); the one exception is the focus ring (Task 3). Text overrides are
 * light mode only: dark mode keeps the vendor palette (OQ11).
 * Storefront\TokensCssTest pins all of this; its ratios are computed from the
 * values below.
 */

/* 1. The Omani Rial glyph (U+FDFC), exactly as design_1/web/layouts/app.blade.php:43
 *    declares it, so the Ops shell and the standalone pages show it too. */
@font-face {
    font-family: 'oie-omr';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/design_1/fonts/oie-currency/oie-currency.woff2') format('woff2'),
         url('/assets/design_1/fonts/oie-currency/oie-currency.woff') format('woff');
    unicode-range: U+FDFC;
}

/* 2. The OIE tokens. No vendor rule reads an --oie-* name, so plain :root is enough. */
:root {
    /* brand */
    --oie-gold: #FCAF17;          /* fills */
    --oie-gold-strong: #C98A00;   /* borders, outlines, fills; never text (PF4) */
    --oie-gold-text: #8A5F00;     /* gold text */
    --oie-gold-soft: #FDF0CE;
    --oie-gold-tint: #FFFBF0;
    --oie-ink: #1F1B16;
    --oie-charcoal: #585852;
    --oie-muted: #6B6A61;
    --oie-line: #EAE8E3;
    --oie-surface: #F7F5F2;
    --oie-card: #FFFFFF;
    --oie-danger: #A63A26;

    /* status pairs (badges) */
    --oie-grey-fg: #585852;
    --oie-grey-bg: #EFEEEA;
    --oie-blue-fg: #2F5C8A;
    --oie-blue-bg: #E4EDF6;
    --oie-green-fg: #2E6B34;
    --oie-green-bg: #E8F0E6;
    --oie-gold-fg: #8A5F00;
    --oie-gold-bg: #FDF0D3;
    --oie-red-fg: #A63A26;
    --oie-red-bg: #FBE3E0;

    /* focus ring (Task 3) */
    --oie-focus: #1F1B16;
    --oie-focus-halo: #FFFFFF;

    /* type, spacing and radius scales (Task 8) */
    --oie-text-12: 12px;
    --oie-text-13: 13px;
    --oie-text-14: 14px;
    --oie-text-16: 16px;
    --oie-text-18: 18px;
    --oie-text-22: 22px;
    --oie-text-28: 28px;
    --oie-space-1: 4px;
    --oie-space-2: 8px;
    --oie-space-3: 12px;
    --oie-space-4: 16px;
    --oie-space-5: 24px;
    --oie-space-6: 32px;
    --oie-space-7: 40px;
    --oie-space-8: 48px;
    --oie-space-9: 64px;
    --oie-radius-sm: 6px;
    --oie-radius-md: 10px;
    --oie-radius-lg: 16px;
    --oie-radius-pill: 999px;

    /* the one button (Task 8, PF9): .oie-btn and the Ops .ops-btn aliases read these */
    --oie-btn-bg: var(--oie-gold);
    --oie-btn-fg: var(--oie-ink);
    --oie-btn-weight: 600;
    --oie-btn-radius: var(--oie-radius-md);
    --oie-btn-min-height: 40px;
    --oie-btn-padding: 8px 16px;
    --oie-btn-ghost-border: #D9D6CF;
}

/* 3. The OIE brand on the vendor palette, moved verbatim from the OIE-BRAND-OVERRIDE
 *    line that used to close app.min.css (Ruling 2). Beats app.min.css:1-40 `:root`
 *    (--primary: #0170FF …) and the theme's inline `:root` from getThemeColorsSettings()
 *    (app/Helpers/theme_helpers.php:93-150) by specificity: html:root is 0,1,1, :root
 *    0,1,0. This makes the vendor Theme > Colours "primary" setting inert (OQ1).
 *    The dark-mode toggle writes its palette inline on <html>, which still wins. */
html:root {
    --primary: #f8ad1f;
    --primary-hover: #e0980c;
    --primary-saturated: #fbc56a;
    --primary-border: #f8ad1f;
    --primary-hover-border: #e0980c;
    --primary-btn-color: #3a352b;
    --primary-btn-hover-color: #3a352b;
    --plyr-color-main: #f8ad1f;
}

/* 4. The vendor light-mode palette. Beats app.min.css:1-40 and the theme's inline :root
 *    by being declared on <body>, nearer every element (custom properties inherit).
 *    --gray-500 #97A7BF was 2.44:1 on white; --badge / --badge-counter #E94560 was 3.83:1
 *    under white text. --gray-400 is NOT changed: the vendor also uses it as a border and
 *    background colour. */
body:not(.dark-mode) {
    --gray-500: #5A6478;
    --badge: #C7253E;
    --badge-counter: #C7253E;
}

/* The theme's dark top bar (theme custom CSS: .theme-header-1__top-navbar background
 * #585953 !important) keeps a light grey; its dropdown menus are white, so they take
 * the light-mode grey back (header_1.min.css:95, :185 read --gray-500 there). */
body:not(.dark-mode) .theme-header-1__top-navbar {
    --gray-500: #E9E7E2;
}

body:not(.dark-mode) .theme-header-1__top-navbar .header-1-dropdown-menu {
    --gray-500: #5A6478;
}

/* 5. Vendor text overrides, light mode only (PF3). */

/* Beats app.min.css:19668-19674 `.text-gray-400` / `.text-hover-gray-400:hover`
 * (color: var(--gray-400) !important, #CDD5E2, 1.48:1 on white). */
body:not(.dark-mode) .text-gray-400,
body:not(.dark-mode) .text-hover-gray-400:hover {
    color: var(--gray-500) !important;
}

/* The brand orange as TEXT (#F8AD1F, 1.91:1 on white) turns dark gold (OQ13), except on
 * the dark top bar, where the orange still reads.
 * Beats app.min.css:19700 `.text-primary` and :19704 `.text-hover-primary:hover` (both
 * !important) and :27859 `.js-get-view-data-by-tab.active` (!important, course tabs). */
body:not(.dark-mode) .text-primary:not(.theme-header-1__top-navbar *),
body:not(.dark-mode) .text-hover-primary:not(.theme-header-1__top-navbar *):hover,
body:not(.dark-mode) .js-get-view-data-by-tab.active:not(.theme-header-1__top-navbar *) {
    color: var(--oie-gold-text) !important;
}

/* Beats app.min.css:812 `.btn-outline-primary` and :822 its `.disabled` / `:disabled`
 * (the :hover state, :817, is ink-brown on an orange fill and is left alone),
 * :28417 `.navbar-item.active`, and :28075 `.navbar-auth-user__dropdown-item:hover`
 * with its `> a` and `> a .icons`. */
body:not(.dark-mode) .btn-outline-primary:not(:hover):not(.theme-header-1__top-navbar *),
body:not(.dark-mode) .btn-outline-primary.disabled:not(.theme-header-1__top-navbar *),
body:not(.dark-mode) .btn-outline-primary:disabled:not(.theme-header-1__top-navbar *),
body:not(.dark-mode) .navbar-item.active:not(.theme-header-1__top-navbar *),
body:not(.dark-mode) .navbar-auth-user__dropdown-item:not(.theme-header-1__top-navbar *):hover,
body:not(.dark-mode) .navbar-auth-user__dropdown-item:not(.theme-header-1__top-navbar *):hover > a,
body:not(.dark-mode) .navbar-auth-user__dropdown-item:not(.theme-header-1__top-navbar *):hover > a .icons {
    color: var(--oie-gold-text);
}

/* Beats parts/theme/headers/header_1.min.css:108-109 (the signed-in user's menu item
 * hover) and :187-188 (`.header-1-dropdown-menu__sub-menu li:hover *`, !important,
 * the categories menu). Both menus are white panels: the user's menu lives INSIDE the
 * dark top bar but paints its own white background, so it takes no top-bar exclusion. */
body:not(.dark-mode) .theme-header-1__dropdown .header-1-dropdown-menu.auth-user-info-dropdown-menu .header-1-dropdown-menu__item:hover,
body:not(.dark-mode) .theme-header-1__dropdown .header-1-dropdown-menu.auth-user-info-dropdown-menu .header-1-dropdown-menu__item:hover a,
body:not(.dark-mode) .theme-header-1__dropdown .header-1-dropdown-menu.auth-user-info-dropdown-menu .header-1-dropdown-menu__item:hover .icons {
    color: var(--oie-gold-text);
}

body:not(.dark-mode) .theme-header-1__dropdown .header-1-dropdown-menu__sub-menu li:hover * {
    color: var(--oie-gold-text) !important;
}

/* White text on the brand orange (1.91:1) turns ink (8.96:1). Beats app.min.css:19692
 * `.text-white` (!important), app.min.css:23597 / :23601 (the checked custom input
 * buttons, !important) and parts/auth/theme_1.min.css:26 (the register-method tabs).
 * The top bar is `.bg-primary` too but painted #585953 by the theme, so its white
 * text stays white. The study-progress line is the package learning sidebar
 * shadow's line 66, directly after `.learning-progress`. */
body:not(.dark-mode) .bg-primary.text-white,
body:not(.dark-mode) .bg-primary .text-white:not(.theme-header-1__top-navbar *),
body:not(.dark-mode) .admin-header .text-white,
body:not(.dark-mode) .student-dashboard__hello-box .text-white,
body:not(.dark-mode) .auth-page-card .auth-register-method-item input:checked ~ label,
body:not(.dark-mode) .custom-input-button-with-active-bg input:checked + label,
body:not(.dark-mode) .custom-input-button-none-border-and-active-bg input:checked + label {
    color: var(--oie-ink) !important;
}

/* The greeting box and the study-progress line dim their text with .opacity-75
 * (app.min.css:25387); ink at full strength keeps the ratio. */
body:not(.dark-mode) .student-dashboard__hello-box .opacity-75 {
    opacity: 1 !important;
}

body:not(.dark-mode) .learning-progress + .text-white {
    color: var(--oie-ink) !important;
    opacity: 1 !important;
}

/* The cart counter: white on --success #3FCD82 (2.05:1). Beats app.min.css:21006 `.bg-success`
 * (background-color: var(--success) !important). */
body:not(.dark-mode) .badge-counter.bg-success {
    background-color: #1E7A45 !important;
}

/* Fix round 1 (the browser census on dev, t1-browser-findings.md B1-B5). */

/* B1. The top-bar search field: app.min.css:23154 `.form-control` (color: var(--dark),
 * #353c49) under parts/theme/headers/header_1.min.css:22 `.theme-header-1__top-navbar-search
 * input` (opacity 0.5) and the markup's .opacity-75, on the theme's #585953 bar: 1.56:1.
 * Its placeholder (header_1.min.css:29, :33: white at opacity 0.7) takes the bar's
 * light grey (--gray-500, #E9E7E2 inside the bar) at full strength. */
body:not(.dark-mode) .theme-header-1__top-navbar-search input {
    color: #FFFFFF;
    opacity: 1 !important;
}

body:not(.dark-mode) .theme-header-1__top-navbar-search input::placeholder {
    color: var(--gray-500);
    opacity: 1;
}

/* B9-1 (UX-2 Task 9 fix round 1). The phone header search field on white: parts/theme/headers/
 * mobile.min.css:40 `.theme-header-mobile__search-form input` (opacity 0.5) dimmed app.min.css:23154
 * `.form-control` text to #898f9f, 3.23:1; its placeholder (mobile.min.css:47, :51, --gray-500 at
 * opacity 0.7) likewise. The text is ink and the placeholder the light-mode --gray-500 (#5A6478),
 * both at full strength. */
body:not(.dark-mode) .theme-header-mobile__search-form input {
    color: var(--oie-ink);
    opacity: 1 !important;
}

body:not(.dark-mode) .theme-header-mobile__search-form input::placeholder {
    color: var(--gray-500);
    opacity: 1;
}

/* B9-2 (UX-2 Task 9 fix round 1). A badge keeps the 12px floor on phones: app.min.css:1105 and :1164
 * `.font-12 { font-size: 10px !important; }` (under 991px and 767px) shrank the learner dashboard's
 * "In person" badge (overrides/.../upcoming_live_sessions.blade.php, `.badge ... font-12`) to 10px.
 * Size only; 0,3,1 with !important beats the vendor's 0,1,0 !important. */
body:not(.dark-mode) .badge.font-12 {
    font-size: var(--oie-text-12) !important;
}

/* B2. The course page's instructor counts (design_1/web/courses/show/tabs/about.blade.php:201,
 * :207, `.text-gray-500` on bg-gray-100, app.min.css:19676). The census read #70798a on #f9fbfe
 * (4.22:1): #5A6478 part-way through the tab's `animation: fade-in 0.5s`
 * (app.min.css:24440). Charcoal keeps AA through the fade. */
body:not(.dark-mode) .course-about-instructor-card .text-gray-500 {
    color: var(--oie-charcoal) !important;
}

/* B3, B4. Status text on white. Beats app.min.css:19764 `.text-danger` (#f63c3c, 3.72:1),
 * :19740 `.text-success` (#3fcd82, 2.04:1) and :19756 `.text-warning` (#ffa200, 2.01:1),
 * all !important. Text only: the .bg-* fills and badges keep the vendor colours. */
body:not(.dark-mode) .text-danger {
    color: var(--oie-danger) !important;
}

body:not(.dark-mode) .text-success {
    color: var(--oie-green-fg) !important;
}

body:not(.dark-mode) .text-warning {
    color: var(--oie-gold-text) !important;
}

/* B5. The panel dashboard's events calendar: past and other-month days are
 * `td.disabled > span` at var(--gray-400) #CDD5E2 (1.47:1), panel.min.css:1265 (!important).
 * They take the AA muted grey. */
body:not(.dark-mode) .dashboard-events-calendar .datepicker-plot-area .datepicker-day-view .table-days tr td.disabled > span {
    color: var(--gray-500) !important;
}

/* Vendor admin (Stisla, assets/admin/css/style.css), under .main-wrapper
 * (admin/layouts/app.blade.php:46) so none of it reaches a non-admin page.
 * Beats style.css:185 `.text-muted` (#98A6AD !important, 2.50:1), :1029 / :1099
 * `.card-statistic-* .card-header h4` (#98A6AD), :2462 `.dropdown-menu .dropdown-title`,
 * :3850 `.main-sidebar .sidebar-menu li a` (#78828A, 3.92:1), :3926 its dropdown links
 * (#868E96, 3.32:1) and :3961 `.main-footer` (#98A6AD). The active items (:3885,
 * :3939, :3984) keep their own colours: the sidebar rules skip `li.active`. */
body:not(.dark-mode) .main-wrapper .text-muted {
    color: #5A6478 !important;
}

body:not(.dark-mode) .main-wrapper .card.card-statistic-1 .card-header h4,
body:not(.dark-mode) .main-wrapper .card.card-statistic-2 .card-header h4,
body:not(.dark-mode) .main-wrapper .dropdown-menu .dropdown-title,
body:not(.dark-mode) .main-wrapper .main-sidebar .sidebar-menu li:not(.active) > a,
body:not(.dark-mode) .main-wrapper .main-sidebar .sidebar-menu li ul.dropdown-menu li:not(.active) > a,
body:not(.dark-mode) .main-wrapper .main-footer {
    color: #5A6478;
}

/* 3. The focus ring (UX-2 Task 3, R5-16, R3-10, R4-17; PF2). The vendor app.min.css:27648
 * `* { outline: none !important; }` removed every indicator, so the ring is the one
 * universal rule: 2px ink outline outside a 2px white band. Ink shows on light and orange
 * surfaces, the white band on dark ones (top bar #585953, Ops sidebar, footer, dark mode).
 * `html body :focus-visible` (0,1,2) beats that `*` (0,0,0) at equal !important, and every
 * Ops `:focus` rule (ops.css:3600 `.ops-skip` included). */
html body :focus-visible {
    outline: 2px solid var(--oie-focus) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px var(--oie-focus-halo) !important;
}

/* The admin reset assets/admin/css/extra.min.css:23965 `.custom-table .dropdown-toggle:focus
 * { outline: 0 !important; }` (0,3,0) outranks the rule above, so this one is longer (0,4,1). */
body:not(.dark-mode) .custom-table .dropdown-toggle:focus-visible {
    outline: 2px solid var(--oie-focus) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px var(--oie-focus-halo) !important;
}

/* 4. The skip link (panel, public headers): off-screen until focused. */
.oie-skip-link {
    position: absolute;
    inset-inline-start: 8px;
    top: -120px;
    z-index: 2000;
    background: var(--oie-gold);
    color: var(--oie-ink);
    font-weight: 700;
    border-radius: 10px;
    padding: 12px 16px;
    text-decoration: underline;
}

.oie-skip-link:focus {
    top: 8px;
}

/* A non-control skip target (public headers); the panel's heading target keeps the ring. */
.oie-skip-target {
    display: block;
    height: 0;
}

.oie-skip-target:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* 5. Moved from storefront.css (UX-1 T16, R5-05): the honeypot's visually-hidden box.
 * Direction-neutral (no left/right offset, which widened the Arabic page by 10,000 px);
 * the honeypot divs carry the same declarations inline so they stay hidden if this
 * stylesheet fails to load. */
.oie-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;
}

/* 6. The panel header's keyboard paths (UX-2 Task 4, R5-16, R4-17; Ruling 11, PF8, PF12). */

/* The vendor menus open on hover only: app.min.css:28020 `.navbar-auth-user:not(:hover) >
 * .navbar-auth-user__dropdown` and :28116 `.language-select:not(:hover) > .language-dropdown`
 * (both 0,3,0) hide them. An oie-menu opens while keyboard focus is inside it (0,4,0; not
 * :focus-within, so a mouse click leaves nothing open); Escape adds is-oie-dismissed, which
 * hides it again until focus leaves (a11y.js) and, at equal specificity, comes later. */
.oie-menu.oie-menu:has(:focus-visible) > .language-dropdown,
.oie-menu.oie-menu:has(:focus-visible) > .navbar-auth-user__dropdown {
    visibility: visible;
    opacity: 1;
    transform: none;
}

.oie-menu.oie-menu.is-oie-dismissed > .language-dropdown,
.oie-menu.oie-menu.is-oie-dismissed > .navbar-auth-user__dropdown {
    visibility: hidden;
    opacity: 0;
}

/* A vendor DIV turned <button> keeps its look: the browser's button box goes, the vendor
 * utility classes (bg-*, size-*, rounded-*, !important) still apply. */
.oie-button-reset {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: start;
    cursor: pointer;
}

/* PF12: a language item's inner box is now a span. Mirrors app.min.css:28144
 * `.language-select .language-dropdown__item > div` and :28162 its `:hover`. */
.oie-menu .language-dropdown__item > span {
    transition: all 0.3s ease;
}

.oie-menu .language-dropdown__item:hover > span {
    transform: translateX(8px);
}

/* 7. The public header's keyboard paths (UX-2 Task 5, R5-16; Ruling 11, PF8, PF12). */

/* The header_1 menus (language, Categories, the signed-in user) open on hover only:
 * header_1.min.css:68 `.theme-header-1__dropdown:not(:hover) > .header-1-dropdown-menu` (0,3,0)
 * hides them. An oie-menu opens while keyboard focus is inside it (0,4,0; not :focus-within,
 * so a mouse click leaves nothing open); Escape adds is-oie-dismissed (a11y.js), which hides it
 * again until focus leaves and, at equal specificity, comes later. */
.oie-menu.oie-menu:has(:focus-visible) > .header-1-dropdown-menu {
    visibility: visible;
    opacity: 1;
    transform: none;
}

.oie-menu.oie-menu.is-oie-dismissed > .header-1-dropdown-menu {
    visibility: hidden;
    opacity: 0;
}

/* The Categories sub-menus open on their item's hover only: header_1.min.css:149
 * `.theme-header-1__dropdown .header-1-dropdown-menu__item:hover .header-1-dropdown-menu__sub-menu`
 * (0,4,0) against the hidden base at :165. A sub-menu opens while keyboard focus is inside its
 * item (0,5,0) and, as the hover rule does (:149 LTR, :154 RTL), sits clear of the menu: the
 * logical inset-inline-start is left in LTR and right in RTL (rtl-app.min.css sets direction),
 * with both physical offsets from the base rules (:165 left: 96%, :177 right: 96%) cleared.
 * A dismissed menu hides any sub-menu too (0,5,0, later). */
.oie-menu.oie-menu .header-1-dropdown-menu__item:has(:focus-visible) .header-1-dropdown-menu__sub-menu {
    visibility: visible;
    opacity: 1;
    left: auto;
    right: auto;
    inset-inline-start: calc(100% + 4px);
}

.oie-menu.oie-menu.is-oie-dismissed .header-1-dropdown-menu__item .header-1-dropdown-menu__sub-menu {
    visibility: hidden;
    opacity: 0;
}

/* PF12: a header_1 language item's inner box is now a span. Mirrors header_1.min.css:125
 * `.theme-header-1__dropdown .header-1-dropdown-menu__item > div` and :143 its `:hover`. */
.oie-menu .header-1-dropdown-menu__item > span {
    transition: all 0.3s ease;
}

.oie-menu .header-1-dropdown-menu__item:hover > span {
    transform: translateX(8px);
}

/* UX-2 Task 6 (R5-20): a sidebar group header is one role-button link; 44px target, no link styling.
 * Package class, so it only has to out-rank the vendor anchor rules it meets on equal terms. */
.oie-sidebar-toggle {
    width: 100%;
    min-height: 44px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* UX-2 Task 7 (R5-22): the icon-only header search submits were 16px targets (axe target-size).
 * header_1.min.css:40 `.theme-header-1__top-navbar-search .search-icon` and mobile.min.css:58
 * `.theme-header-mobile__search-form .search-icon` place them absolutely and give no size; they get
 * the 24px minimum target. */
body:not(.dark-mode) .search-icon {
    min-width: 24px;
    min-height: 24px;
}

/* 8. The one button set and the one badge set (UX-2 Task 8, R1-25, PF9, Ruling 12). Package classes:
 * Ops, storefront and portal markup use them; ops.css keeps .ops-btn / .ops-btn--ghost / .ops-badge*
 * only as aliases declaring exactly these properties from the same custom properties
 * (Ops\OpsDesignScaleTest). One filled look (gold, ink text), one ghost, one danger.
 * Below 1280px (tablets, phones, D1) the button is a 44px target: tokens.css holds no @media
 * (PF1), so the height is a clamp on the viewport width, 44px at 1279px and under, 40px above. */
.oie-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: clamp(var(--oie-btn-min-height), calc(44px + (1279px - 100vw) * 100), 44px);
    padding: var(--oie-btn-padding);
    background: var(--oie-btn-bg);
    color: var(--oie-btn-fg);
    border: 1px solid transparent;
    border-radius: var(--oie-btn-radius);
    font-family: inherit;
    font-size: var(--oie-text-14);
    font-weight: var(--oie-btn-weight);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}

.oie-btn:hover {
    color: var(--oie-btn-fg);
    filter: brightness(.97);
}

.oie-btn--ghost {
    background: var(--oie-card);
    color: var(--oie-ink);
    border-color: var(--oie-btn-ghost-border);
}

.oie-btn--ghost:hover {
    color: var(--oie-ink);
    border-color: var(--oie-gold-strong);
}

.oie-btn--danger {
    background: var(--oie-card);
    color: var(--oie-danger);
    border-color: var(--oie-danger);
}

.oie-btn--danger:hover {
    color: var(--oie-danger);
}

.oie-btn:disabled {
    opacity: .5;
    cursor: default;
    filter: none;
}

.oie-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: var(--oie-radius-pill);
    font-size: var(--oie-text-12);
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.oie-badge--grey { background: var(--oie-grey-bg); color: var(--oie-grey-fg); }
.oie-badge--blue { background: var(--oie-blue-bg); color: var(--oie-blue-fg); }
.oie-badge--green { background: var(--oie-green-bg); color: var(--oie-green-fg); }
.oie-badge--gold { background: var(--oie-gold-bg); color: var(--oie-gold-fg); }
.oie-badge--red { background: var(--oie-red-bg); color: var(--oie-red-fg); }

/* 9. The one content link (UX-2 Task 9, R3-25, R5-18). Package class: portal reference, partner and
 * download links carried no class and rendered in the browser's default blue (no panel rule colours
 * a bare <a>). The link takes the colour of the text around it (color: inherit), so the vendor's dark
 * mode, which flips the surrounding text, flips the link with it (OQ11, PF3; UX-2 fix wave, I2: a fixed
 * ink made these links near-invisible on dark cards). What marks it as a link is the gold underline,
 * the same when visited and thicker on hover (the Ops content-link look, ops.css).
 * Specificity: app.min.css:27634 `a` (0,0,1) loses to .oie-link (0,1,0), but :27643
 * `a:hover, a:focus { text-decoration: none }` (0,1,1) beats it, so the hover and focus states carry
 * the underline in their own rules (0,2,0; fix wave, T9-M1: a focused link lost its underline). */
.oie-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--oie-gold);
    text-underline-offset: 3px;
}

.oie-link:visited {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--oie-gold);
    text-underline-offset: 3px;
}

.oie-link:focus {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--oie-gold);
    text-underline-offset: 3px;
}

.oie-link:hover {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--oie-gold);
    text-decoration-thickness: 2px;
}