/* EBRS shared components — an opinionated layer over vendored Bootstrap 5.0.2.
   Semantic tokens only: no literals, no :root, no bare Bootstrap class overrides.
   Naming: ebrs-<block>__<element>--<modifier>.
   Not linked from views/html-to-pdf/** — iText cannot resolve var(). */

/* ── 1. Label/value row ─────────────────────────────── */
.ebrs-kv {
    display: grid;
    margin: 0;
    border-top: 1px solid var(--ebrs-color-border);
}

.ebrs-kv--2col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ebrs-kv--3col {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ebrs-kv__item {
    padding: var(--ebrs-space-xs) var(--ebrs-space-sm);
    border-right: 1px solid var(--ebrs-color-border);
    border-bottom: 1px solid var(--ebrs-color-border);
    min-width: 0;
}

.ebrs-kv__item--full {
    grid-column: 1 / -1;
}

.ebrs-kv--3col > .ebrs-kv__item:nth-child(3n),
.ebrs-kv--2col > .ebrs-kv__item:nth-child(2n),
.ebrs-kv__item--full {
    border-right: none;
}

.ebrs-kv > .ebrs-kv__item:last-child {
    border-bottom: none;
}

.ebrs-kv__label {
    font-size: var(--ebrs-font-size-xs);
    color: var(--ebrs-color-fg-muted);
    margin-bottom: var(--ebrs-space-3xs);
}

.ebrs-kv__value {
    margin: 0;
    font-size: var(--ebrs-font-size-md);
    font-weight: var(--ebrs-font-weight-semibold);
    color: var(--ebrs-color-fg);
    overflow-wrap: anywhere; /* long addresses and Bangla names must wrap, not clip */
}

/* Carries real content (Bangla names, sub-values). fg-subtle is AA on white only —
   on a sunken row or a card footer, step it up to fg-muted. */
.ebrs-kv__value-sub {
    margin: var(--ebrs-space-3xs) 0 0;
    font-size: var(--ebrs-font-size-xs);
    color: var(--ebrs-color-fg-subtle);
}

@media (max-width: 768px) {
    .ebrs-kv--3col {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ebrs-kv--3col > .ebrs-kv__item:nth-child(3n) {
        border-right: 1px solid var(--ebrs-color-border);
    }

    .ebrs-kv--3col > .ebrs-kv__item:nth-child(2n) {
        border-right: none;
    }
}

@media (max-width: 576px) {
    .ebrs-kv--2col,
    .ebrs-kv--3col {
        grid-template-columns: minmax(0, 1fr);
    }

    .ebrs-kv__item {
        border-right: none;
    }
}

/* ── 2. Status badge ────────────────────────────────── */
/* Colour is never the only channel: the badge always carries its own label text. */
.ebrs-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ebrs-space-2xs);
    padding: var(--ebrs-space-3xs) var(--ebrs-space-xs);
    border-radius: var(--ebrs-radius-pill);
    font-size: var(--ebrs-font-size-xs);
    font-weight: var(--ebrs-font-weight-semibold);
    line-height: var(--ebrs-line-tight);
    white-space: nowrap;
}

.ebrs-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.ebrs-badge--neutral {
    background: var(--ebrs-color-surface-raised);
    color: var(--ebrs-color-fg-muted);
}

.ebrs-badge--success {
    background: var(--ebrs-color-success-subtle);
    color: var(--ebrs-color-success);
}

.ebrs-badge--pending {
    background: var(--ebrs-color-warning-subtle);
    color: var(--ebrs-color-warning);
}

.ebrs-badge--danger {
    background: var(--ebrs-color-danger-subtle);
    color: var(--ebrs-color-danger);
}

.ebrs-badge--info {
    background: var(--ebrs-color-info-subtle);
    color: var(--ebrs-color-info);
}

.ebrs-badge--accent {
    background: var(--ebrs-color-accent-subtle);
    color: var(--ebrs-color-accent-emphasis);
}

/* ── 2a. One-record label/value table ────────── */
/* One record's own facts, read top to bottom: a fixed label column so every value starts on the same
   line, and no vertical rules, because the pairing is the structure.

   Unscoped, unlike the .ds-* layer, because the certificate-details fragment that uses it renders in
   two places - the administrator's review page and the officer's own modal - and only one of them
   sits inside a .ds-page container.

   table-layout: fixed is what makes the 200px stick. Without it the browser widens the label column
   to fit the longest label and the value column moves per record, which is the misalignment this
   replaced. It also means long values must be told they may break: a 64-character hex digest and an
   RFC 2253 DN both have no natural break opportunity, so they would otherwise push the column. */
.ebrs-record {
    width: 100%;
    table-layout: fixed;
    margin-bottom: 0;
    border-top: 1px solid var(--ebrs-color-border);
}

.ebrs-record th,
.ebrs-record td {
    padding: 10px var(--ebrs-space-sm);
    border-bottom: 1px solid var(--ebrs-color-border);
    font-size: var(--ebrs-font-size-sm);
    vertical-align: top;
}

.ebrs-record th {
    width: 200px;
    color: var(--ebrs-color-fg-muted);
    font-weight: var(--ebrs-font-weight-semibold);
}

.ebrs-record td {
    color: var(--ebrs-color-fg);
    font-weight: var(--ebrs-font-weight-regular);
    overflow-wrap: anywhere;
}

/* A table row that opens its own detail view.

   The focus outline is not decoration: the row carries tabindex and role="button", so a keyboard
   user has to be able to see which one Enter would open. */
.ebrs-row-clickable {
    cursor: pointer;
}

.ebrs-row-clickable:hover {
    background-color: var(--ebrs-color-bg-subtle, rgba(0, 0, 0, .03));
}

.ebrs-row-clickable:focus-visible {
    outline: 2px solid var(--ebrs-color-accent, #0d6efd);
    outline-offset: -2px;
}

/* The pink monospace on the serial and the issuer digest is Bootstrap's own <code>, kept: it is what
   this application already paints on every copyable identifier. */
.ebrs-record code {
    font-size: var(--ebrs-font-size-xs);
    line-height: var(--ebrs-line-loose);
}

/* Bootstrap's .table sets its own cell borders and a striped background from variables; both fight a
   two-column record where the row, not the cell, is the unit. */
.ebrs-record > :not(caption) > * > * {
    box-shadow: none;
    background-color: transparent;
}

@media (max-width: 575.98px) {
    /* Below this the 200px column leaves nothing for the value, so the pair stacks. */
    .ebrs-record th {
        width: 120px;
    }
}

/* ── 3. Data table ──────────────────────────────────── */
.ebrs-table-wrap {
    background: var(--ebrs-color-surface);
    border: 1px solid var(--ebrs-color-border);
    border-radius: var(--ebrs-radius-md);
    overflow: hidden;
}

.ebrs-table {
    margin-bottom: 0;
    font-size: var(--ebrs-font-size-md);
}

.ebrs-table > thead > tr > th {
    background: var(--ebrs-color-surface-raised);
    color: var(--ebrs-color-fg-muted);
    font-size: var(--ebrs-font-size-xs);
    font-weight: var(--ebrs-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--ebrs-tracking-wide);
    border-bottom: 1px solid var(--ebrs-color-border-strong);
    padding: var(--ebrs-space-xs) var(--ebrs-space-sm);
    white-space: nowrap;
}

.ebrs-table > tbody > tr > td {
    padding: var(--ebrs-space-xs) var(--ebrs-space-sm);
    border-bottom: 1px solid var(--ebrs-color-border);
    vertical-align: middle;
    color: var(--ebrs-color-fg);
}

.ebrs-table > tbody > tr:hover > td {
    background: var(--ebrs-color-accent-subtle);
}

.ebrs-table > tbody > tr:last-child > td {
    border-bottom: none;
}

.ebrs-table__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Sticky header is opt-in, and the height constraint is what makes it work: position:sticky
   resolves against the nearest scrolling ancestor, and .table-responsive never scrolls
   vertically without one. Never combine with DataTables scrollY — it clones the header. */
.ebrs-table-wrap--sticky > .table-responsive {
    max-height: 60vh;
    overflow: auto;
}

.ebrs-table-wrap--sticky .ebrs-table > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 2;
    box-shadow: var(--ebrs-shadow-xs); /* border-collapse detaches the th border once stuck */
}

/* ── 4. Card ────────────────────────────────────────── */
.ebrs-card {
    background: var(--ebrs-color-surface);
    border: 1px solid var(--ebrs-color-border);
    border-radius: var(--ebrs-radius-md);
    box-shadow: var(--ebrs-shadow-xs);
    overflow: hidden;
}

.ebrs-card + .ebrs-card {
    margin-top: var(--ebrs-space-sm);
}

.ebrs-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ebrs-space-xs);
    padding: var(--ebrs-space-xs) var(--ebrs-space-sm);
    border-bottom: 1px solid var(--ebrs-color-border);
    background: var(--ebrs-color-surface);
}

.ebrs-card__title {
    margin: 0;
    font-size: var(--ebrs-font-size-sm);
    font-weight: var(--ebrs-font-weight-semibold);
    color: var(--ebrs-color-fg-muted);
    text-transform: uppercase;
    letter-spacing: var(--ebrs-tracking-wide);
}

.ebrs-card__body {
    padding: var(--ebrs-space-sm);
}

.ebrs-card__body--flush {
    padding: 0;
}

.ebrs-card__footer {
    padding: var(--ebrs-space-xs) var(--ebrs-space-sm);
    border-top: 1px solid var(--ebrs-color-border);
    background: var(--ebrs-color-surface-sunken);
}

/* ── 5. Form field ──────────────────────────────────── */
.ebrs-field {
    margin-bottom: var(--ebrs-space-sm);
}

.ebrs-field__label {
    display: block;
    margin-bottom: var(--ebrs-space-2xs);
    font-size: var(--ebrs-font-size-xs);
    font-weight: var(--ebrs-font-weight-medium);
    color: var(--ebrs-color-fg-muted);
}

.ebrs-field__required {
    color: var(--ebrs-color-danger);
}

.ebrs-field__control {
    height: var(--ebrs-control-height-md);
    font-size: var(--ebrs-font-size-md);
    border-radius: var(--ebrs-radius-sm);
    border-color: var(--ebrs-color-border-strong);
}

.ebrs-field__control:focus {
    border-color: var(--ebrs-color-accent);
    box-shadow: var(--ebrs-focus-ring);
}

.ebrs-field__help {
    margin: var(--ebrs-space-2xs) 0 0;
    font-size: var(--ebrs-font-size-xs);
    color: var(--ebrs-color-fg-subtle); /* white surfaces only — use fg-muted on sunken */
}

.ebrs-field__error {
    margin: var(--ebrs-space-2xs) 0 0;
    font-size: var(--ebrs-font-size-xs);
    color: var(--ebrs-color-danger);
}

.ebrs-field__control[readonly],
.ebrs-field__control:disabled {
    background: var(--ebrs-color-surface-sunken);
    color: var(--ebrs-color-fg-muted);
}

/* ── 6. Account menu ────────────────────────────────── */
/* Lives here, not in app-shell.css, because the public site renders its own copy of this
   dropdown from public-site-common-fragment.html and public-fragment.html — components.css is
   linked by both base heads, app-shell.css only by the back-office one. */
/* common.css styles `#profileDropdownContent a` by id, so the anchor rules below carry the
   id as well — a bare class would lose to it and the links would keep their legacy 16px black.
   dropdown.js toggles #profileDropdownContent through an inline `style.display`, so nothing
   here may declare `display` on it — the open/closed contract stays entirely that script's.
   The entry animation runs on display change, which is why it is an animation and not a
   transition; tokens.css neutralises it under prefers-reduced-motion. */
.ebrs-account {
    position: relative;
}

.ebrs-account__trigger {
    display: flex;
    align-items: center;
    gap: var(--ebrs-space-xs);
    padding: var(--ebrs-space-2xs) var(--ebrs-space-xs);
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: var(--ebrs-radius-pill);
    cursor: pointer;
    transition: background-color var(--ebrs-transition-fast), border-color var(--ebrs-transition-fast);
}

.ebrs-account__trigger:hover {
    background-color: var(--ebrs-color-surface-sunken);
    border-color: var(--ebrs-color-border);
}

/* No radius and no ring on the avatar: the trigger image carries Bootstrap's `.rounded`
   (radius with !important), so squaring it needs matching weight. */
.ebrs-account__avatar {
    width: var(--ebrs-control-height-md);
    height: var(--ebrs-control-height-md);
    border-radius: 0 !important;
    object-fit: cover;
    background-color: var(--ebrs-color-surface-raised);
    flex-shrink: 0;
}

/* No radius, no ring — the size is the only difference from the trigger avatar. */
.ebrs-account__avatar--lg {
    width: 48px;
    height: 48px;
}

.ebrs-account__identity {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

/* Both lines truncate: a long name or role must not widen the bar or reach the caret. */
.ebrs-account__name,
.ebrs-account__role {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: var(--ebrs-line-tight);
}

.ebrs-account__name {
    font-size: var(--ebrs-font-size-md);
    font-weight: var(--ebrs-font-weight-semibold);
    color: var(--ebrs-color-fg-strong);
}

.ebrs-account__role {
    font-size: var(--ebrs-font-size-xs);
    color: var(--ebrs-color-fg-muted);
}

.ebrs-account__caret {
    font-size: var(--ebrs-font-size-2xs);
    color: var(--ebrs-color-fg-subtle);
}

/* The panel. Legacy CSS parks it at transform: translateX(-40%) over a grey fill; anchor it
   to the trigger's right edge instead so its width can change without it drifting. */
#profileDropdownContent.ebrs-account__menu {
    right: 0;
    left: auto;
    width: 360px;
    max-width: calc(100vw - var(--ebrs-space-md));
    transform: none;
    margin: var(--ebrs-space-xs) 0 0;
    padding: 0;
    background-color: var(--ebrs-color-surface);
    border: 1px solid var(--ebrs-color-border);
    border-radius: var(--ebrs-radius-lg);
    box-shadow: var(--ebrs-shadow-lg);
    overflow: hidden;
    animation: ebrs-account-menu-in var(--ebrs-transition-base);
}

@keyframes ebrs-account-menu-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Grey identity block, no accent rule. The green tint was ruled out because
   --ebrs-color-accent-subtle is the canvas colour and a deep-green band was too heavy;
   surface-raised reads as a header without either problem. */
.ebrs-account__header {
    display: flex;
    align-items: flex-start;
    gap: var(--ebrs-space-sm);
    padding: var(--ebrs-space-md);
    background-color: var(--ebrs-color-surface-raised);
    border-bottom: 1px solid var(--ebrs-color-border);
}

.ebrs-account__header-text {
    min-width: 0;
}

.ebrs-account__header-name {
    font-size: var(--ebrs-font-size-lg);
    font-weight: var(--ebrs-font-weight-semibold);
    line-height: var(--ebrs-line-tight);
    color: var(--ebrs-color-fg-strong);
    overflow-wrap: anywhere;
}

/* fg-muted, not fg-subtle: on --ebrs-color-surface-sunken fg-subtle is 4.46:1 and fails AA,
   while fg-muted is 7.03:1. */
.ebrs-account__meta {
    display: flex;
    align-items: center;
    gap: var(--ebrs-space-xs);
    margin-top: var(--ebrs-space-2xs);
    font-size: var(--ebrs-font-size-xs);
    color: var(--ebrs-color-fg-muted);
    overflow-wrap: anywhere;
}

.ebrs-account__meta i {
    color: var(--ebrs-color-accent);
    font-size: var(--ebrs-font-size-2xs);
}

.ebrs-account__chip {
    display: inline-flex;
    align-items: center;
    margin-top: var(--ebrs-space-xs);
    padding: var(--ebrs-space-3xs) var(--ebrs-space-xs);
    border-radius: var(--ebrs-radius-pill);
    /* white on the grey header, not accent-subtle: that tint and surface-raised are a hair
       apart and the chip would vanish. accent-emphasis on white is 10.76:1. */
    background-color: var(--ebrs-color-surface);
    color: var(--ebrs-color-accent-emphasis);
    font-size: var(--ebrs-font-size-2xs);
    font-weight: var(--ebrs-font-weight-semibold);
    letter-spacing: var(--ebrs-tracking-wide);
    text-transform: uppercase;
}

.ebrs-account__section {
    padding: var(--ebrs-space-sm);
    border-bottom: 1px solid var(--ebrs-color-border);
}

.ebrs-account__section-label {
    display: flex;
    align-items: center;
    gap: var(--ebrs-space-2xs);
    font-size: var(--ebrs-font-size-2xs);
    font-weight: var(--ebrs-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--ebrs-tracking-wide);
    color: var(--ebrs-color-fg-muted);
}

.ebrs-account__section-value {
    margin-top: var(--ebrs-space-2xs);
    font-size: var(--ebrs-font-size-sm);
    font-weight: var(--ebrs-font-weight-semibold);
    color: var(--ebrs-color-accent-emphasis);
}

.ebrs-account__roles {
    margin: var(--ebrs-space-2xs) 0 0;
    padding: 0;
    list-style: none;
}

.ebrs-account__roles li {
    padding: var(--ebrs-space-3xs) 0 var(--ebrs-space-3xs) var(--ebrs-space-sm);
    border-left: 2px solid var(--ebrs-color-border);
    font-size: var(--ebrs-font-size-sm);
    color: var(--ebrs-color-fg-muted);
}

/* common.css:1538 paints this button with !important, so the radius match needs equal weight. */
.ebrs-account__switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ebrs-space-2xs);
    width: 100%;
    height: var(--ebrs-control-height-md);
    margin-top: var(--ebrs-space-sm);
    border-radius: var(--ebrs-radius-sm) !important;
    border-color: var(--ebrs-color-accent);
    color: var(--ebrs-color-accent);
    font-size: var(--ebrs-font-size-sm);
    font-weight: var(--ebrs-font-weight-semibold);
}

.ebrs-account__links {
    padding: var(--ebrs-space-2xs);
}

#profileDropdownContent .ebrs-account__link {
    display: flex;
    align-items: center;
    gap: var(--ebrs-space-xs);
    padding: var(--ebrs-space-xs);
    border-radius: var(--ebrs-radius-sm);
    font-size: var(--ebrs-font-size-md);
    font-weight: var(--ebrs-font-weight-medium);
    line-height: var(--ebrs-line-tight);
    color: var(--ebrs-color-fg);
    text-decoration: none;
    transition: background-color var(--ebrs-transition-fast), color var(--ebrs-transition-fast);
}

#profileDropdownContent .ebrs-account__link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--ebrs-radius-sm);
    background-color: var(--ebrs-color-surface-sunken);
    color: var(--ebrs-color-fg-muted);
    font-size: var(--ebrs-font-size-xs);
    flex-shrink: 0;
    transition: background-color var(--ebrs-transition-fast), color var(--ebrs-transition-fast);
}

#profileDropdownContent .ebrs-account__link-label {
    flex: 1 1 auto;
    min-width: 0;
}

/* Direction affordance only — it appears on hover/focus and carries no meaning of its own. */
#profileDropdownContent .ebrs-account__link-chevron {
    font-size: var(--ebrs-font-size-2xs);
    color: var(--ebrs-color-fg-subtle);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity var(--ebrs-transition-fast), transform var(--ebrs-transition-fast);
}

#profileDropdownContent .ebrs-account__link:hover .ebrs-account__link-chevron,
#profileDropdownContent .ebrs-account__link:focus-visible .ebrs-account__link-chevron {
    opacity: 1;
    transform: translateX(0);
    color: currentColor;
}

#profileDropdownContent .ebrs-account__link:hover {
    background-color: var(--ebrs-color-accent-subtle);
    color: var(--ebrs-color-accent-emphasis);
}

#profileDropdownContent .ebrs-account__link:hover .ebrs-account__link-icon {
    background-color: var(--ebrs-color-accent);
    color: var(--ebrs-color-fg-on-accent);
}

.ebrs-account__footer {
    padding: var(--ebrs-space-2xs);
    border-top: 1px solid var(--ebrs-color-border);
    background-color: var(--ebrs-color-surface-sunken);
}

#profileDropdownContent .ebrs-account__link--danger {
    color: var(--ebrs-color-danger);
}

/* The footer strip is itself surface-sunken, so the tile needs the lighter surface to read
   as a tile at all rather than dissolving into its own background. */
#profileDropdownContent .ebrs-account__link--danger .ebrs-account__link-icon {
    background-color: var(--ebrs-color-surface);
    color: var(--ebrs-color-danger);
}

#profileDropdownContent .ebrs-account__link--danger:hover {
    background-color: var(--ebrs-color-danger-subtle);
    color: var(--ebrs-color-danger-hover);
}

#profileDropdownContent .ebrs-account__link--danger:hover .ebrs-account__link-icon {
    background-color: var(--ebrs-color-danger);
    color: var(--ebrs-color-fg-on-accent);
}


/* ── 7. Live counter ────────────────────────────────── */
/* Sits under a field that is being typed into and reports how much of a limit is used. Replaces
   Bootstrap's `text-muted`/`text-danger` on these counters: neither colour is in the token system,
   so both drift from every other muted and danger surface in the app. Measured, so the trade is
   stated honestly — `text-danger` #dc3545 is 4.53:1 on white and does pass AA; the token
   `--ebrs-color-danger` #C81E32 is 5.70:1, and matching the system is the reason to switch. */
.ebrs-counter {
    font-size: var(--ebrs-font-size-2xs);
    font-weight: var(--ebrs-font-weight-regular);
    color: var(--ebrs-color-fg-subtle);
    margin-top: var(--ebrs-space-3xs);
    /* Digits keep one width, so a live count does not jitter the line as it is typed. */
    font-variant-numeric: tabular-nums;
}

/* Colour is not the only channel: the counter states both numbers, so "251 / 135" already reads
   as over the limit in greyscale, and the message beneath it says so in words. */
.ebrs-counter--over {
    color: var(--ebrs-color-danger);
    font-weight: var(--ebrs-font-weight-medium);
}

/* The reason beneath the counter. `.error` (style.css) owns its colour and weight — this only
   places it, so the two lines read as one block rather than two stray notes. */
.moa-clause-error {
    margin-top: var(--ebrs-space-3xs);
    font-size: var(--ebrs-font-size-xs);
}

/* ── 8. Copy button ─────────────────────────────────── */
/* Sits beside a value that exists to be copied - a SHA-256, a certificate serial. Replaces the
   literal word "copy", which cost a word of reading on every row to say what an icon says at a
   glance, and which three digital-signature screens had each spelled out for themselves.

   An icon-only control, so the label lives in `title` and `aria-label` - both, because a tooltip is
   not an accessible name. Every call site says what it copies ("Copy SHA-256"), never a bare
   "Copy": the page usually has more than one. */
.ebrs-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: var(--ebrs-radius-sm);
    background: transparent;
    color: var(--ebrs-color-fg-subtle);
    font-size: var(--ebrs-font-size-sm);
    line-height: 1;
    cursor: pointer;
    vertical-align: baseline;
    transition: color var(--ebrs-transition-fast), background var(--ebrs-transition-fast);
}

.ebrs-copy:hover {
    background: var(--ebrs-color-surface-raised);
    color: var(--ebrs-color-accent);
}

/* Confirmation is the icon becoming a tick for a moment, not a toast: the value is right there, the
   officer is mid-task, and a dismissible banner for "6 characters reached the clipboard" is noise.
   Colour is not the only channel - the glyph itself changes. */
.ebrs-copy.is-copied,
.ebrs-copy.is-copied:hover {
    color: var(--ebrs-color-success);
    background: transparent;
}