/* ============================================================
   Buttons — .ui.button in all its variants
   docs/08-design-system-v2.md §4 (geometry), §6 (focus), §2 (type scale)
   Colour-class → role mapping: docs/08-design-refresh.md §2, still in force
   ------------------------------------------------------------
   Three roles, not six colours. The razor markup is untouched (E2E tests
   select by colour class — `.ui.modal.visible .positive.button` 16×,
   `.ui.button.teal`, `.ui.blue.button:has-text('Back to Login')`), so the
   whole mapping happens here:

     primary    ← .primary .blue .green .positive   solid --tm-primary
     secondary  ← .teal .orange .purple, plain .ui.button   neutral outline
     danger     ← .negative .red                     red outline;
                                                     solid red ONLY inside a
                                                     confirmation dialog

   No gradients, no `translateY(-1px)` hover hop, no coloured glow anywhere in
   this file. Hover changes background and border only.

   ONE FOCUS TREATMENT FOR THE WHOLE APPLICATION (§6): `border-color:
   --tm-primary` plus `box-shadow: 0 0 0 3px --tm-primary-light`, identical to
   what forms.css draws on an input and navigation.css on the site switcher.
   The per-role `--tm-btn-ring` this file used to carry is gone — a red ring on
   the delete button and a petrol one on save was five variants of the same
   idea, and §6 is explicit that it must sit the same across the app.

   `!important` count in this file: 2, both on the labeled-icon padding —
   Fomantic itself declares that padding `!important`, so it cannot be beaten
   on specificity. Everything else wins by loading after Fomantic at equal or
   higher specificity, which is why the states below are spelled out
   (`:hover`, `:focus`, `:focus-visible`, `:active`): Fomantic defines each of
   them separately and a rest-state rule alone would lose to them.
   ============================================================ */

/* ── Base ─────────────────────────────────────────────────────
   Also the secondary role: a plain `.ui.button` is --tm-surface with a
   --tm-border hairline (§5.1 / the signed-off mock-up's `.btn.ghost`).

   The border is --tm-border and NOT --tm-border-strong, which is the one place
   buttons deliberately part company with inputs. §6 puts a 3:1 edge on an input
   because an input's fill is --tm-surface on --tm-bg (1.02:1) and the border is
   then the entire "visual information required to identify the component". A
   button is not in that position: it carries a label at 6.18:1 inside a
   36px-tall shape, which identifies it on its own, so the heavier rule would
   only make a page of secondary buttons noisier than the data.

   Contrast on --tm-surface:
     label  --tm-text-secondary  6.18:1  ✔ AA text
     hover  --tm-text on --tm-surface-2  16.48:1  ✔ */
.ui.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tm-space-2);
    min-height: var(--tm-control-height);
    margin: 0 var(--tm-space-2) 0 0;
    padding: 0 var(--tm-space-4);
    white-space: nowrap;

    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius-sm);
    background: var(--tm-surface);
    background-image: none;
    color: var(--tm-text-secondary);

    font-size: var(--tm-text-sm);
    line-height: var(--tm-leading-sm);
    font-weight: var(--tm-weight-semibold);
    letter-spacing: 0;
    text-transform: none;
    text-shadow: none;
    box-shadow: var(--tm-btn-shadow, none);
    transition:
        background-color var(--tm-transition),
        border-color var(--tm-transition),
        color var(--tm-transition),
        box-shadow var(--tm-transition);
}

/* --tm-surface-2 is the hover fill §5.2 gives every row and navigation.css
   gives every nav item, so "the pointer is on this" reads the same everywhere.
   The border steps up to --tm-border-strong at the same time, which is what
   keeps the response visible when the button sits on --tm-bg — the page and
   --tm-surface-2 are only 1.04:1 apart, so the fill alone would be too quiet
   there. */
.ui.button:hover,
.ui.button:focus {
    background: var(--tm-surface-2);
    background-image: none;
    border-color: var(--tm-border-strong);
    color: var(--tm-text);
    box-shadow: var(--tm-btn-shadow, none);
}

.ui.button:active,
.ui.active.button:active {
    background: color-mix(in srgb, var(--tm-text) 9%, var(--tm-surface));
    background-image: none;
    border-color: var(--tm-border-strong);
    color: var(--tm-text);
    box-shadow: var(--tm-btn-shadow, none);
}

/* The focus ring is never removed. `:focus-visible` rather than `:focus` so a
   mouse click does not leave a ring behind; keyboard focus always shows it.

   Five repetitions of `.ui` (0,6,0) is Fomantic's own specificity idiom, used
   here instead of !important. It has to outrank every role rule in this file —
   the danger outline is 0,4,0 and would otherwise keep its red border under
   focus — as well as Fomantic's own `.ui.basic.red.button:focus` (0,5,0).

   The ring is still delivered through --tm-btn-shadow, and every `box-shadow`
   in this file reads `var(--tm-btn-shadow, none)`: nothing else anywhere
   declares that property, so the ring resolves whichever role rule happens to
   win the `box-shadow` slot. */
.ui.ui.ui.ui.ui.button:focus-visible {
    outline: none;
    border-color: var(--tm-primary);
    --tm-btn-shadow: 0 0 0 3px var(--tm-primary-light);
}

/* ── Icons ────────────────────────────────────────────────────
   Fomantic dims button icons to opacity .8 (.85 on hover). On a flat button
   that just makes the glyph look broken. */
.ui.button > .icon:not(.button) {
    opacity: 1;
    height: auto;
}

.ui.button:hover > .icon:not(.button) {
    opacity: 1;
}

/* Spacing between icon and label comes from the flex `gap`, so Fomantic's
   negative side margins have to go. */
.ui.button:not(.icon) > .icon:not(.button):not(.dropdown),
.ui.button:not(.icon) > .icons:not(.button):not(.dropdown),
.ui.button:not(.icon) > .right.icon:not(.button):not(.dropdown) {
    margin: 0;
    vertical-align: baseline;
}

/* Icon-only buttons: square, same height as everything else, neutral.
   The `:not()` chain is copied from Fomantic verbatim, and it has to be:
   Fomantic declares the icon padding as
   `.ui.icon.button:not(.animated):not(.compact):not(.labeled)` — 0,6,0 — so a
   shorter selector wins `width` (Fomantic never sets it) while silently losing
   `padding`, and the button comes out a rounded rectangle instead of a square.
   `:not(.labeled)` additionally keeps the labeled variant on its label padding. */
.ui.icon.button:not(.animated):not(.compact):not(.labeled) {
    width: var(--tm-control-height);
    min-width: var(--tm-control-height);
    padding: 0;
}

/* ── Flattened labeled icon button (§5.1) ─────────────────────
   Fomantic draws `.ui.labeled.icon.button` in two tones: the icon sits in an
   absolutely positioned 2.57em block with its own rgba(0,0,0,.05) fill, glued
   to the lighter block holding the label. It is on every "Create …" button in
   the app. One background, icon and label on the same surface, `gap`.

   The two `!important`s below are the only ones in this file, and they are
   unavoidable: Fomantic declares
     .ui.labeled.icon.button { padding-left: 4.07142857em !important;
                               padding-right: 1.5em !important }
   and the same for `.ui[class*="right labeled"].icon.button`, so no amount of
   specificity beats them. */
.ui.labeled.icon.button,
.ui[class*="right labeled"].icon.button {
    padding-left: var(--tm-space-4) !important;  /* beats Fomantic .ui.labeled.icon.button padding-left */
    padding-right: var(--tm-space-4) !important; /* beats Fomantic .ui.labeled.icon.button padding-right */
    position: relative;
}

/* Undo the absolutely positioned, separately tinted icon block. */
.ui.labeled.icon.button > .icon,
.ui[class*="right labeled"].icon.button > .icon {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    background: none;
    background-color: transparent;
    border-radius: 0;
    box-shadow: none; /* the icon never carries the focus ring — the button does */
    color: inherit;
    line-height: 1;
}

/* Fomantic re-positions the glyph pseudo-element to centre it inside that
   block; with the block gone it has to render inline again. */
.ui.labeled.icon.button > .icon::before,
.ui.labeled.icon.button > .icon::after,
.ui[class*="right labeled"].icon.button > .icon::before,
.ui[class*="right labeled"].icon.button > .icon::after {
    display: inline;
    position: static;
    width: auto;
    top: auto;
    margin-top: 0;
}

/* The icon follows the label, not the DOM order, when the icon is on the right. */
.ui[class*="right labeled"].icon.button > .icon {
    order: 1;
}

/* ── Sizes ────────────────────────────────────────────────────
   Two heights, both tokens (§4): --tm-control-height (36px) is the button, and
   --tm-control-height-sm (28px) is the row-level action — the size that exists
   so a `⋮` and a "Detail" agree with each other without either inventing a
   number. `small`, `mini` and `tiny` all resolve to the small one: they were
   three different heights for the same job, which is the §3.4 audit finding.
   `large` is the only step derived by arithmetic, at +--tm-space-1. */
.ui.small.button,
.ui.mini.button,
.ui.tiny.button {
    min-height: var(--tm-control-height-sm);
    padding: 0 var(--tm-space-3);
    line-height: var(--tm-leading-sm);
}

.ui.large.button {
    min-height: calc(var(--tm-control-height) + var(--tm-space-1));
    padding: 0 var(--tm-space-5);
    line-height: var(--tm-leading-md);
}

/* Font size gets its own rules, at a deliberately higher specificity, because
   Fomantic declares the size steps as `.ui.ui.ui.ui.small.button` — a 0,6,0
   specificity hack. A plain `.ui.small.button` (0,3,0) therefore loses the
   font-size while still winning min-height and padding, so the button ends up
   the right height with the wrong type. The repeated `.ui` is Fomantic's own
   idiom, one step further; it is what this file uses instead of `!important`.

   Every size lands on --tm-text-sm, i.e. the same type as the base button. The
   height is what distinguishes a row action from a page action; shrinking the
   label as well is how `mini` ended up at ~10px and made the Status page
   unreadable. --tm-text-xs is reserved for column labels and meta.

   These stay separate from the layout rules above on purpose: folding them
   together would push `padding` to 0,7,0 and outrank the icon-only
   `padding: 0`, turning every sized icon button back into a rectangle. */
.ui.ui.ui.ui.ui.small.button,
.ui.ui.ui.ui.ui.mini.button,
.ui.ui.ui.ui.ui.tiny.button {
    font-size: var(--tm-text-sm);
}

.ui.ui.ui.ui.ui.large.button {
    font-size: var(--tm-text-md);
}

/* Sized icon-only buttons stay square. 0,7,0 so they outrank the base
   icon-only rule's width without disturbing its padding. */
.ui.small.icon.button:not(.animated):not(.compact):not(.labeled),
.ui.mini.icon.button:not(.animated):not(.compact):not(.labeled),
.ui.tiny.icon.button:not(.animated):not(.compact):not(.labeled) {
    width: var(--tm-control-height-sm);
    min-width: var(--tm-control-height-sm);
}

.ui.large.icon.button:not(.animated):not(.compact):not(.labeled) {
    width: calc(var(--tm-control-height) + var(--tm-space-1));
    min-width: calc(var(--tm-control-height) + var(--tm-space-1));
}

/* ── Role: primary ────────────────────────────────────────────
   .primary .blue .green .positive all collapse into one solid petrol button.
   White label on --tm-primary (#0B6E7F) measures 5.91:1 and on
   --tm-primary-hover (#085765) 8.20:1 — both clear AA (the analysis lives in
   tokens.css).

   `color` IS declared now, and that is the change TM-143 step 2 made here. It
   used to be left to Fomantic's own `#fff` on the reasoning that no token could
   stand in — --tm-surface is white in the light theme but flips to a near-black
   in the dark one. That reasoning was right and the gap it left was real: with
   the dark accent ramp in place, a white label on --tm-primary measures 2.92:1,
   under AA, and unfixable at that lightness (tokens.css derives the arithmetic —
   an accent readable AS text on --tm-surface-2 needs luminance ≥ 0.245, a white
   label on it needs ≤ 0.183, and those windows do not meet). --tm-on-accent is
   the token that closes it: #FFFFFF in the light theme, so nothing moves there,
   and #0D1116 in the dark one, where it measures 6.49:1 on --tm-primary and
   8.87:1 on --tm-primary-hover.

   It has to be stated in all three state blocks, not just at rest: Fomantic
   re-declares `color:#fff` on :hover, :focus, :active and .active, each at
   0,3,0, and a single rest-state declaration here would lose to every one of
   them the moment a pointer arrived.

   `:not(.basic)` is mandatory: Fomantic's basic variant keeps a transparent
   background and a *coloured* text/border. Overriding the background without
   excluding `.basic` paints the button in the accent colour while the text
   stays in Fomantic's own colour → coloured text on a coloured fill
   (e.g. #DB2828 on #EF4444 ≈ 1.4:1, well below the WCAG AA 4.5:1 minimum).
   The basic variants are handled separately at the bottom of this file. */
.ui.primary.button:not(.basic),
.ui.blue.button:not(.basic),
.ui.green.button:not(.basic),
.ui.positive.button:not(.basic) {
    background: var(--tm-primary);
    background-image: none;
    border-color: var(--tm-primary);
    color: var(--tm-on-accent);
    box-shadow: var(--tm-btn-shadow, none);
}

/* No coloured glow and no translateY: hover changes background and border. */
.ui.primary.button:not(.basic):hover,
.ui.primary.button:not(.basic):focus,
.ui.blue.button:not(.basic):hover,
.ui.blue.button:not(.basic):focus,
.ui.green.button:not(.basic):hover,
.ui.green.button:not(.basic):focus,
.ui.positive.button:not(.basic):hover,
.ui.positive.button:not(.basic):focus {
    background: var(--tm-primary-hover);
    background-image: none;
    border-color: var(--tm-primary-hover);
    color: var(--tm-on-accent);
    box-shadow: var(--tm-btn-shadow, none);
}

.ui.primary.button:not(.basic):active,
.ui.blue.button:not(.basic):active,
.ui.green.button:not(.basic):active,
.ui.positive.button:not(.basic):active,
.ui.primary.active.button:not(.basic),
.ui.blue.active.button:not(.basic),
.ui.green.active.button:not(.basic),
.ui.positive.active.button:not(.basic) {
    background: var(--tm-primary-hover);
    background-image: none;
    border-color: var(--tm-primary-hover);
    color: var(--tm-on-accent);
    box-shadow: var(--tm-btn-shadow, none);
}

/* ── Role: secondary ──────────────────────────────────────────
   .teal .orange .purple were three more accent colours with no shared
   meaning (§1). They become the same neutral button as a plain `.ui.button`, so
   the rest state is exactly the base rule and only Fomantic's solid fill and
   white label have to be undone. Contrast as for the base: 6.18:1. */
.ui.teal.button:not(.basic),
.ui.orange.button:not(.basic),
.ui.purple.button:not(.basic) {
    background: var(--tm-surface);
    background-image: none;
    border-color: var(--tm-border);
    color: var(--tm-text-secondary);
    box-shadow: var(--tm-btn-shadow, none);
}

.ui.teal.button:not(.basic):hover,
.ui.teal.button:not(.basic):focus,
.ui.orange.button:not(.basic):hover,
.ui.orange.button:not(.basic):focus,
.ui.purple.button:not(.basic):hover,
.ui.purple.button:not(.basic):focus {
    background: var(--tm-surface-2);
    background-image: none;
    border-color: var(--tm-border-strong);
    color: var(--tm-text);
    box-shadow: var(--tm-btn-shadow, none);
}

.ui.teal.button:not(.basic):active,
.ui.orange.button:not(.basic):active,
.ui.purple.button:not(.basic):active {
    background: color-mix(in srgb, var(--tm-text) 9%, var(--tm-surface));
    background-image: none;
    border-color: var(--tm-border-strong);
    color: var(--tm-text);
    box-shadow: var(--tm-btn-shadow, none);
}

/* ── Role: danger ─────────────────────────────────────────────
   Danger is an OUTLINE, not a solid red block (§5.1, and the reason in §6):
   the Employees list renders Delete on every row, and ten solid red buttons
   stacked down the page make the most destructive action the loudest thing on
   screen. Solid red survives in exactly one place — inside a confirmation
   dialog, at the bottom of this file.

   The label is --tm-danger. The #991b1b literal this rule used to carry is
   gone, and so is the reason it existed: the old --tm-danger was #dc2626, which
   reached only 4.83:1 on --tm-surface and left no headroom once the hover tint
   darkened under it, and there was no darker token to reach for. The v2 ramp
   fixes that at the token — --tm-danger is #B02525, 6.69:1 on --tm-surface and
   5.81:1 on --tm-danger-light — so the whole family is written in tokens now.

   The same token is the border, which clears the WCAG 1.4.11 3:1 floor for a
   non-text boundary several times over, so the outline carries the signal. */
.ui.negative.button:not(.basic),
.ui.red.button:not(.basic) {
    background: var(--tm-surface);
    background-image: none;
    border-color: var(--tm-danger);
    color: var(--tm-danger);
    box-shadow: var(--tm-btn-shadow, none);
}

/* --tm-danger-light is the tint that ships with the hue (§3.3) and was picked
   against it: --tm-danger on --tm-danger-light measures 5.81:1 ✓ AA text. */
.ui.negative.button:not(.basic):hover,
.ui.negative.button:not(.basic):focus,
.ui.red.button:not(.basic):hover,
.ui.red.button:not(.basic):focus {
    background: var(--tm-danger-light);
    background-image: none;
    border-color: var(--tm-danger);
    color: var(--tm-danger);
    box-shadow: var(--tm-btn-shadow, none);
}

.ui.negative.button:not(.basic):active,
.ui.red.button:not(.basic):active,
.ui.negative.active.button:not(.basic),
.ui.red.active.button:not(.basic) {
    background: color-mix(in srgb, var(--tm-danger) 14%, var(--tm-surface));
    background-image: none;
    border-color: var(--tm-danger);
    color: var(--tm-danger);
    box-shadow: var(--tm-btn-shadow, none);
}

/* Solid red, and only here: the confirmation dialog, where the destructive
   action is the one thing on screen and is expected to be loud.
   White label on --tm-danger (#B02525) = 6.69:1 ✓ AA. The hover step is mixed
   toward --tm-text, so it is darker still and the ratio only improves — which
   is why it needs no second red literal either.

   Unlike primary, the label here MUST be declared. Leaving it to Fomantic does
   not work: Fomantic's `.ui.negative.button { color: #fff }` is 0,3,0 and loses
   to the outline rule above (0,4,0), so the button would come out --tm-danger
   on --tm-danger — 1:1, the exact coloured-text-on-coloured-fill failure the
   `:not(.basic)` note describes.

   It used to be the literal `#fff`, with a note saying there was no white token
   to reach for — --tm-surface is #FFFFFF only in the light theme and flips to a
   near-black in the dark one. TM-143 step 1 made that token: --tm-on-accent is
   #FFFFFF in the light theme, so this button does not move there, and #0D1116 in
   the dark one, where white would have measured 2.9:1 on the dark --tm-danger and
   --tm-on-accent measures 6.52:1. The hover step mixes toward --tm-text, which in
   the dark theme moves the fill toward the light end and the ratio only improves,
   for the same reason the light theme's darker hover did. */
.ui.modal .ui.negative.button:not(.basic),
.ui.modal .ui.red.button:not(.basic) {
    background: var(--tm-danger);
    background-image: none;
    border-color: var(--tm-danger);
    color: var(--tm-on-accent);
    box-shadow: var(--tm-btn-shadow, none);
}

.ui.modal .ui.negative.button:not(.basic):hover,
.ui.modal .ui.negative.button:not(.basic):focus,
.ui.modal .ui.negative.button:not(.basic):active,
.ui.modal .ui.red.button:not(.basic):hover,
.ui.modal .ui.red.button:not(.basic):focus,
.ui.modal .ui.red.button:not(.basic):active {
    background: color-mix(in srgb, var(--tm-danger) 85%, var(--tm-text));
    background-image: none;
    border-color: color-mix(in srgb, var(--tm-danger) 85%, var(--tm-text));
    color: var(--tm-on-accent);
    box-shadow: var(--tm-btn-shadow, none);
}

/* ── Row actions (§6) ─────────────────────────────────────────
   The controls rendered by Shared/RowActions.razor: one real link to the detail page and a
   `⋮` that holds the rest. The panel itself is in overlays.css; the cell that contains them
   is in tables.css. Split that way because §4 gives each file one job — this is the button
   family, the panel is an overlay, the row height is a table concern.

   Both controls are `.ui.tiny.button`, which the size block above resolves to
   --tm-control-height-sm. That is what the token is for: `--tm-row-height` is 46px (§4) and a
   table cell carries --tm-space-2 of padding top and bottom, so a 28px control is the largest
   that lands the row on the number the spec asks for. A 36px control would force 52px rows.

   Fomantic gives every `.ui.button` `margin: 0 .25em 0 0`; the row uses a flex `gap` instead,
   so the margin is cleared. (0,3,0) beats `.ui.button` (0,2,0) — no !important needed. */
.tm-c-row-actions .ui.button {
    margin: 0;
}

/* The edit button is the other form of the primary slot (TM-163) and carries no styling of its
   own — it is a `.ui.tiny.button` exactly like the detail link beside it, which is the point:
   the same slot must not look like two different controls depending on whether its destination
   happens to have a URL.

   The one thing it needs is an unavailable state. It is marked with `aria-disabled` and not the
   `disabled` attribute — Fomantic's `.ui.disabled.button` sets `pointer-events: none !important`
   and would take the `title` explaining *why* it is unavailable with it — so none of Fomantic's
   disabled styling applies and it is spelled out here. Pointer events stay on, deliberately; the
   guard in RowActions.razor is what makes the control inert.

   `.tm-c-row-edit[aria-disabled]` is (0,2,1) and the hover pair repeats the class to reach
   (0,3,1), which beats `.ui.button:hover` (0,2,0) without !important. */
.tm-c-row-edit[aria-disabled="true"] {
    opacity: 0.5;
    cursor: default;
}

.tm-c-row-edit.tm-c-row-edit[aria-disabled="true"]:hover,
.tm-c-row-edit.tm-c-row-edit[aria-disabled="true"]:focus {
    background: var(--tm-surface);
    border-color: var(--tm-border);
    color: var(--tm-text-secondary);
}

/* The `⋮` is quiet at rest. A column of fifty of them down the page has to read as a margin,
   not as fifty controls competing with the data — which is the failure mode the audit
   describes for the solid red Delete it replaces.

   No border and no fill at rest, so the only strong thing in the actions cell is the detail
   link. Hover and the open state bring the neutral outline treatment back. */
.tm-c-row-menu-trigger.ui.button,
.tm-c-row-menu-trigger.ui.icon.button {
    border-color: transparent;
    background: transparent;
    /* --tm-text-secondary on --tm-surface is 6.18:1. The glyph is small and it is the
       control's only visible mark, so it does not get --tm-text-muted (2.55:1). */
    color: var(--tm-text-secondary);
}

.tm-c-row-menu-trigger.ui.button:hover,
.tm-c-row-menu-trigger.ui.button:focus,
.tm-c-row-menu-trigger.ui.button[aria-expanded="true"] {
    border-color: var(--tm-border-strong);
    background: var(--tm-surface-2);
    color: var(--tm-text);
}

/* ── Overflow menu items ──────────────────────────────────────
   Full-width rows in the panel. They are not `.ui.button`s — a menu item is a row of text with
   an icon, and dressing it as a button is how the wall of buttons got into the row in the
   first place. */
.tm-c-row-menu-item {
    display: flex;
    align-items: center;
    gap: var(--tm-space-3);
    width: 100%;
    min-height: var(--tm-control-height);
    padding: 0 var(--tm-space-4);
    border: none;
    background: none;
    color: var(--tm-text);
    font-family: inherit;
    /* --tm-text-md, the v2 default. The old --tm-text-base meant "body" on the previous
       scale and now means "dense table content" — a menu row is body text (§2). */
    font-size: var(--tm-text-md);
    line-height: var(--tm-leading-md);
    font-weight: var(--tm-weight-normal);
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--tm-transition), color var(--tm-transition);
}

/* Hover only. `:focus` used to share this rule, and that was the other half of the
   defect below: gating the ring stopped the heavy 2px rectangle, but the item the
   panel focuses on open still took this grey fill, so a mouse-opened menu looked
   like its first item was already chosen. The fill is now gated with the ring —
   see the next rule — so a mouse-opened menu paints nothing at all until the
   pointer moves onto an item. */
.tm-c-row-menu-item:hover {
    background: var(--tm-surface-2);
    color: var(--tm-text);
    text-decoration: none;
}

/* Focus rings are never removed (§8). The ring is inset rather than an outer shadow because
   the panel clips its own corners — an outer ring on the first item would be sliced off.

   `:focus` and NOT `:focus-visible`, which is the opposite of every other control in this
   file, and the difference is load-bearing. The arrow keys move focus by calling
   `ElementReference.FocusAsync()`, i.e. from script, and Chromium's :focus-visible heuristic
   only carries the "visible" flag through a scripted focus if the element that had focus
   before was itself matching :focus-visible. Opening the menu with the mouse breaks that
   chain, so the arrow keys moved a focus that painted nothing — measured: the focused item
   computed `box-shadow: oklab(0 0 0 / 0) 0px 0px 0px 0px`, i.e. no ring at all.

   That reasoning still holds and is why :focus survives below. What did NOT hold was the
   sentence that used to close this comment — "using :focus costs nothing here". It cost the
   thing the reader reported: RowActions focuses the first item as the panel opens, so
   clicking `⋮` with the mouse drew a heavy 2px ring around "Download calendar" immediately,
   on a menu the user was about to click, not walk.

   So the ring is gated on the panel's `--kbd` class, which RowActions sets when the menu is
   opened from the keyboard or when any key is pressed while it is open. That is the same
   distinction :focus-visible encodes — "the user is navigating, show them where they are" —
   computed by the component, which is the only place that survives a scripted focus.

   :focus-visible is kept as a second, ungated rule. It never fires for the scripted moves
   (that is the whole problem), but it does fire when the browser decides on its own that
   focus is keyboard-driven — tabbing into an item, for one. Belt and braces: a keyboard user
   can never end up on an unpainted item, whichever path put them there. */
.tm-c-row-menu-panel--kbd .tm-c-row-menu-item:focus,
.tm-c-row-menu-item:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--tm-primary);

    /* The fill travels with the ring, not with :focus. A keyboard user gets both —
       the ring says "here", the fill makes the row read as the active one at a
       glance — and a mouse user gets neither until they hover. */
    background: var(--tm-surface-2);
    color: var(--tm-text);
}

/* The ring is gated, but the outline must still never come back as a stray browser default
   on the ungated path — a mouse-opened menu paints neither. */
.tm-c-row-menu-item:focus {
    outline: none;
}

/* Unavailable items. `[aria-disabled]` is the live selector — RowActionItem deliberately does
   not use the `disabled` attribute, because a disabled control gets no pointer events and its
   `title` (the explanation of *why* it is unavailable) then never appears. `:disabled` is kept
   alongside it so a hand-written item in the panel still looks right.

   --tm-text-secondary is 6.18:1 on --tm-surface; no opacity is applied, because fading it
   would drop the pair below the 4.5:1 floor for what is still text a reader must be able to
   read. "Unavailable" is carried by the greyed-out colour, the missing hover response and
   aria-disabled itself — not by making the words hard to see. */
.tm-c-row-menu-item[aria-disabled="true"],
.tm-c-row-menu-item:disabled {
    color: var(--tm-text-secondary);
    background: none;
    cursor: default;
}

/* An unavailable item does not light up under the pointer or under the arrow keys — that
   response is the affordance saying "this does something". These have to out-specify the
   hover/focus rules above, hence the repeated class. */
.tm-c-row-menu-item.tm-c-row-menu-item[aria-disabled="true"]:hover,
.tm-c-row-menu-item.tm-c-row-menu-item[aria-disabled="true"]:focus {
    background: none;
    color: var(--tm-text-secondary);
}

.tm-c-row-menu-item[aria-disabled="true"] > i.icon,
.tm-c-row-menu-item.tm-c-row-menu-item[aria-disabled="true"]:hover > i.icon,
.tm-c-row-menu-item.tm-c-row-menu-item[aria-disabled="true"]:focus > i.icon {
    color: var(--tm-text-muted);   /* decoration beside a label that already says it */
}

/* The focus ring is never removed (§8), including here: an unavailable item is still in the
   arrow-key walk, so it must show where focus is. Restated after the hover/focus reset above,
   which would otherwise be the last word on this element. */
.tm-c-row-menu-item.tm-c-row-menu-item[aria-disabled="true"]:focus {
    box-shadow: inset 0 0 0 2px var(--tm-primary);
}

/* Icons decorate; the word carries the meaning (§5.7). Fixed width so the labels line up
   whether or not a given item has one. */
.tm-c-row-menu-item > i.icon {
    width: var(--tm-space-4);
    margin: 0;
    color: var(--tm-text-muted);   /* decoration, not text */
    text-align: center;
    flex-shrink: 0;
}

.tm-c-row-menu-item:hover > i.icon,
.tm-c-row-menu-item:focus > i.icon {
    color: var(--tm-text-secondary);
}

/* Destructive items: a red word and a hairline above, not a red block.
   --tm-danger everywhere. The #991b1b literal these rules used to carry is gone with the v2
   ramp: the token itself is now dark enough (6.69:1 on --tm-surface, 5.81:1 on
   --tm-danger-light), which is exactly the follow-up the previous round noted here. */
.tm-c-row-menu-item--danger,
.tm-c-row-menu-item--danger > i.icon {
    color: var(--tm-danger);
}

.tm-c-row-menu-item--danger:hover,
.tm-c-row-menu-item--danger:focus {
    background: var(--tm-danger-light);
    color: var(--tm-danger);
}

.tm-c-row-menu-item--danger:hover > i.icon,
.tm-c-row-menu-item--danger:focus > i.icon {
    color: var(--tm-danger);
}

/* The separator. Applied to the first destructive item rather than rendered as its own
   element, so the markup carries no decorative nodes and a menu whose only item is a Delete
   still gets no stray line above it. */
.tm-c-row-menu-item--danger:not(:first-child) {
    margin-top: var(--tm-space-1);
    padding-top: var(--tm-space-1);
    border-top: 1px solid var(--tm-border-light);
}

/* ── Basic (outline) variants ─────────────────────────────────
   Fomantic's `.ui.basic.button` paints its border as an inset box-shadow and
   its own colours; here every button already has a real border, so the shadow
   is cleared and the shadow slot is left free for the focus ring. */
.ui.basic.button {
    background: transparent;
    background-image: none;
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius-sm);
    color: var(--tm-text-secondary);
    font-weight: var(--tm-weight-semibold);
    box-shadow: var(--tm-btn-shadow, none);
}

.ui.basic.button:hover,
.ui.basic.button:focus {
    background: var(--tm-surface-2);
    border-color: var(--tm-border-strong);
    color: var(--tm-text);
    box-shadow: var(--tm-btn-shadow, none);
}

.ui.basic.button:active {
    background: color-mix(in srgb, var(--tm-text) 9%, var(--tm-surface));
    border-color: var(--tm-border-strong);
    color: var(--tm-text);
    box-shadow: var(--tm-btn-shadow, none);
}

/* Basic primary. Fomantic's basic blue is #2185d0, which measures 3.94:1 as
   text on --tm-surface — under the AA 4.5:1 minimum. --tm-primary is 5.91:1. */
.ui.basic.primary.button,
.ui.basic.blue.button,
.ui.basic.green.button,
.ui.basic.positive.button {
    border-color: var(--tm-primary);
    color: var(--tm-primary);
    /* Clears Fomantic's `.ui.basic.blue.button { box-shadow: 0 0 0 1px #2185d0
       inset }`, which outranks the plain `.ui.basic.button` rule above. */
    box-shadow: var(--tm-btn-shadow, none);
}

.ui.basic.primary.button:hover,
.ui.basic.primary.button:focus,
.ui.basic.blue.button:hover,
.ui.basic.blue.button:focus,
.ui.basic.green.button:hover,
.ui.basic.green.button:focus,
.ui.basic.positive.button:hover,
.ui.basic.positive.button:focus {
    background: var(--tm-primary-light);
    border-color: var(--tm-primary-hover);
    /* --tm-primary-hover on --tm-primary-light is 7.17:1 ✓ AA text; tokens.css
       records --tm-primary itself at 5.17:1 on the same tint. */
    color: var(--tm-primary-hover);
    box-shadow: var(--tm-btn-shadow, none);
}

.ui.basic.primary.button:active,
.ui.basic.blue.button:active,
.ui.basic.green.button:active,
.ui.basic.positive.button:active {
    background: var(--tm-primary-light);
    border-color: var(--tm-primary-hover);
    color: var(--tm-primary-hover);
    box-shadow: var(--tm-btn-shadow, none);
}

/* Basic secondary — the three retired accents keep the neutral treatment. */
.ui.basic.teal.button,
.ui.basic.orange.button,
.ui.basic.purple.button {
    border-color: var(--tm-border);
    color: var(--tm-text-secondary);
    box-shadow: var(--tm-btn-shadow, none); /* clears Fomantic's coloured inset border */
}

.ui.basic.teal.button:hover,
.ui.basic.teal.button:focus,
.ui.basic.orange.button:hover,
.ui.basic.orange.button:focus,
.ui.basic.purple.button:hover,
.ui.basic.purple.button:focus {
    background: var(--tm-surface-2);
    border-color: var(--tm-border-strong);
    color: var(--tm-text);
    box-shadow: var(--tm-btn-shadow, none);
}

/* Basic (outline) danger — transparent fill, so the text carries the whole
   contrast burden. Fomantic's own #DB2828 reaches only 4.62:1 against --tm-bg,
   which leaves no headroom once the hover tint darkens under it; --tm-danger
   measures 6.69:1 on --tm-surface and 5.81:1 on --tm-danger-light. Same
   treatment as the non-basic danger button, so the two do not diverge. */
.ui.basic.negative.button,
.ui.basic.red.button {
    border-color: var(--tm-danger);
    color: var(--tm-danger);
    box-shadow: var(--tm-btn-shadow, none);
}

.ui.basic.negative.button:hover,
.ui.basic.negative.button:focus,
.ui.basic.red.button:hover,
.ui.basic.red.button:focus {
    background: var(--tm-danger-light);
    border-color: var(--tm-danger);
    color: var(--tm-danger);
    box-shadow: var(--tm-btn-shadow, none);
}

.ui.basic.negative.button:active,
.ui.basic.red.button:active {
    background: color-mix(in srgb, var(--tm-danger) 14%, var(--tm-surface));
    border-color: var(--tm-danger);
    color: var(--tm-danger);
    box-shadow: var(--tm-btn-shadow, none);
}