/*
 * Precision — buttons. The "two tiers" system.
 *
 * Requires tokens.css.
 *
 * ---------------------------------------------------------------------------
 * The problem this replaces
 * ---------------------------------------------------------------------------
 * Across the three platforms the buttons used six Bootstrap colours to carry
 * three distinctions, and two of the six meant something other than what they
 * said:
 *
 *   btn-info      40 uses   navigation — Subjects, Recordings, Arms, Finances.
 *                           Cyan, and nothing about it was informational.
 *   btn-success   13 uses   downloads — Export Study, Document Pack, Package.
 *                           Green, and nothing had succeeded.
 *   btn-warning    4 uses   Apply ICA, Crop, Impute. Amber, for three
 *                           operations that discard data.
 *
 * On the recordings page four of those colours appeared inside a single table
 * row. The palette was never the problem; the semantics were.
 *
 * ---------------------------------------------------------------------------
 * Two tiers
 * ---------------------------------------------------------------------------
 * TIER 1 — the page action. Filled, in the brand colour, and there is normally
 *          one. "Add Recording", "Save Changes", "Run Analysis".
 *
 * TIER 2 — everything else. A neutral bordered box: cancel, navigation,
 *          export, edit, close. These are not lesser actions, they are simply
 *          not the reason you opened the page, and none of them needs a colour
 *          to say so.
 *
 * DESTRUCTIVE cuts across both. Red is reserved for an action that cannot be
 *          undone — and reserved *hard*: a delete button in a table row is red
 *          text on a neutral box, and only the confirm button in the dialog
 *          that follows is filled. If every delete were filled red, a page of
 *          twelve rows would be a page of twelve alarms.
 *
 * ROW ACTIONS are the third thing this fixes, and the reason the system is
 *          called two tiers rather than two colours. A control inside a table
 *          cell drops to icon-only and loses its border until hovered, so a
 *          column of them reads as one quiet group instead of forty competing
 *          boxes. They keep their accessible names — see the aria-label pass.
 *
 * Bootstrap's own variant names are mapped onto these tiers below rather than
 * being replaced, so existing markup keeps working. Where the mapping is not
 * obvious the reason is in a comment beside it.
 */

/* ========================================
   BASE

   Geometry is shared by every button so the tiers differ in weight and colour
   alone. :where() keeps specificity at zero, so a page can still override.
   ======================================== */
.btn {
  --btn-bg: var(--surface);
  --btn-border: var(--border);
  --btn-ink: var(--text-secondary);
  --btn-bg-hover: var(--surface-hover);
  --btn-border-hover: var(--border-strong);
  --btn-ink-hover: var(--text-primary);

  /* Bootstrap's own state API, pointed back at the tokens above.
     The rules below style :hover ourselves, but :active, :disabled and
     .btn-check:checked are painted by Bootstrap's own selectors —
     `.btn:first-child:active` is specificity 0,3,0 and beats anything we
     declare on `.btn`. Those selectors read --bs-btn-*, and each variant class
     sets its own with a literal hex compiled into bootstrap.min.css:
     .btn-info carries #3dd5f3 for the active state, which is why Go To flashed
     cyan on click no matter what --bs-info-rgb said. Mapping the whole family
     onto --btn-* means every variant follows its tier in every state, and no
     Bootstrap default can surface anywhere. */
  --bs-btn-bg: var(--btn-bg);
  --bs-btn-border-color: var(--btn-border);
  --bs-btn-color: var(--btn-ink);
  --bs-btn-hover-bg: var(--btn-bg-hover);
  --bs-btn-hover-border-color: var(--btn-border-hover);
  --bs-btn-hover-color: var(--btn-ink-hover);
  --bs-btn-active-bg: var(--btn-bg-hover);
  --bs-btn-active-border-color: var(--btn-border-hover);
  --bs-btn-active-color: var(--btn-ink-hover);
  --bs-btn-disabled-bg: var(--btn-bg);
  --bs-btn-disabled-border-color: var(--btn-border);
  --bs-btn-disabled-color: var(--text-muted);
  --bs-btn-focus-shadow-rgb: 16, 80, 111;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-ink);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast);
}

.btn:hover,
.btn:focus-visible {
  background: var(--btn-bg-hover);
  border-color: var(--btn-border-hover);
  color: var(--btn-ink-hover);
}

/* One ring, defined once. Bootstrap's is a box-shadow in its own blue, which
   disappears against a filled brand-coloured button. */
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: none;
}

.btn:disabled,
.btn.disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn i,
.btn .bi {
  font-size: 0.9375rem;
  line-height: 1;
}

/* ========================================
   TIER 1 — the page action

   Filled, heavier, and slightly wider than tier 2, so it reads as the thing to
   do even in a grey photocopy. Colour is not carrying the hierarchy alone.
   ======================================== */
.btn-primary,
.btn-tier1 {
  --btn-bg: var(--primary);
  --btn-border: var(--primary);
  --btn-ink: var(--text-inverse);
  --btn-bg-hover: var(--primary-dark);
  --btn-border-hover: var(--primary-dark);
  --btn-ink-hover: var(--text-inverse);
  font-weight: 600;
  padding-inline: 1.1rem;
}

/* An outlined primary is still a tier-2 control that happens to be the most
   likely next step — it gets the brand's ink, not its fill. */
.btn-outline-primary {
  --btn-bg: var(--surface);
  --btn-border: var(--primary);
  --btn-ink: var(--primary);
  --btn-bg-hover: var(--primary-soft);
  --btn-border-hover: var(--primary);
  --btn-ink-hover: var(--primary-dark);
}

/* ========================================
   TIER 2 — everything else

   All of these resolve to the neutral defaults declared on .btn. They are
   listed explicitly rather than left to fall through, because the point is
   that btn-info and btn-success are *deliberately* not coloured any more, and
   a future reader should find that stated rather than inferred.
   ======================================== */
.btn-secondary,
.btn-outline-secondary,
.btn-light,
.btn-dark,
.btn-tier2,

/* Navigation. Was cyan on 40 buttons across the CTMS — Subjects, Recordings,
   Arms, Participants, Finances, Settings. Going somewhere is not an action
   that needs a colour, and forty of them competing with the real one is why
   the pages read as noisy. */
.btn-info,
.btn-outline-info,

/* Downloads and exports. Was green: Export Study, Document Pack, Export
   Template, Package. Green is a report on an outcome, and offering a file is
   not an outcome — the success is the toast that appears after it. */
.btn-success,
.btn-outline-success {
  --btn-bg: var(--surface);
  --btn-border: var(--border);
  --btn-ink: var(--text-secondary);
  --btn-bg-hover: var(--surface-hover);
  --btn-border-hover: var(--border-strong);
  --btn-ink-hover: var(--text-primary);
}

/* ========================================
   DESTRUCTIVE

   Red ink on a neutral box, not a red box. The filled treatment is reserved
   for the confirm button inside a dialog — see .modal-footer below — so that
   seeing a filled red button always means "this is the last step".
   ======================================== */
.btn-danger,
.btn-outline-danger,
.btn-destructive,

/* Amber went to Apply ICA, Crop and Impute. All three discard data that cannot
   be recovered from the workspace, which is the same promise a delete makes;
   a separate colour for it only diluted both. */
.btn-warning,
.btn-outline-warning {
  --btn-bg: var(--surface);
  --btn-border: var(--border);
  --btn-ink: var(--danger);
  --btn-bg-hover: var(--danger-soft);
  --btn-border-hover: var(--danger);
  --btn-ink-hover: var(--danger);
}

/* The last step, and the only filled red in the system. */
.modal-footer .btn-danger,
.btn-danger-solid {
  --btn-bg: var(--danger);
  --btn-border: var(--danger);
  --btn-ink: var(--text-inverse);
  --btn-bg-hover: #8c1b12;
  --btn-border-hover: #8c1b12;
  --btn-ink-hover: var(--text-inverse);
  font-weight: 600;
}

/* ========================================
   SIZES
   ======================================== */
.btn-sm,
.btn-group-sm > .btn {
  font-size: 0.75rem;
  padding: 0.32rem 0.6rem;
  gap: 0.3rem;
}

.btn-sm i,
.btn-sm .bi {
  font-size: 0.8125rem;
}

.btn-lg {
  font-size: 0.9375rem;
  padding: 0.7rem 1.4rem;
}

/* ========================================
   ROW ACTIONS

   The second tier proper. A control inside a table cell is one of many, and a
   column of bordered boxes is what made the recordings page look like a
   control panel for something that had gone wrong. Borderless until hovered.

   Scoped to td/th rather than applied by a class, so it works on markup nobody
   has touched — which is most of it.
   ======================================== */
td .btn,
th .btn,
.table .btn,
.row-actions .btn {
  --btn-bg: transparent;
  --btn-border: transparent;
  --btn-ink: var(--text-secondary);
  --btn-bg-hover: var(--surface-hover);
  --btn-border-hover: var(--border);
  padding: 0.3rem 0.5rem;
  font-size: 0.75rem;
}

td .btn-danger,
td .btn-warning,
.table .btn-danger,
.table .btn-warning,
.row-actions .btn-danger {
  --btn-ink: var(--text-muted);
  --btn-ink-hover: var(--danger);
  --btn-bg-hover: var(--danger-soft);
  --btn-border-hover: var(--danger);
}

/* A row's primary action keeps the brand's ink but never the fill: a table of
   twenty rows would otherwise be twenty page-level calls to action. */
td .btn-primary,
.table .btn-primary,
.row-actions .btn-primary {
  --btn-bg: transparent;
  --btn-border: transparent;
  --btn-ink: var(--primary);
  --btn-bg-hover: var(--primary-soft);
  --btn-border-hover: var(--primary-soft);
  --btn-ink-hover: var(--primary-dark);
  font-weight: 500;
  padding-inline: 0.5rem;
}

/* An icon-only row action. Square, so a column of them lines up. */
td .btn.icon-only,
.table .btn.icon-only,
.row-actions .btn.icon-only {
  padding: 0.3rem;
  min-width: 1.9rem;
}

/* ========================================
   GROUPS

   Bootstrap's .btn-group draws its own borders and radii. Ours are hairlines,
   so the group is a single box with dividers rather than five boxes touching.
   ======================================== */
.btn-group > .btn {
  border-radius: 0;
}

.btn-group > .btn:first-child {
  border-start-start-radius: var(--radius);
  border-end-start-radius: var(--radius);
}

.btn-group > .btn:last-child {
  border-start-end-radius: var(--radius);
  border-end-end-radius: var(--radius);
}

.btn-group > .btn + .btn {
  margin-left: -1px;
}

.btn-group > .btn:hover,
.btn-group > .btn:focus-visible {
  z-index: 1;   /* so the hovered edge is not painted over by its neighbour */
}

/* A segmented control — btn-check + label — reads as a setting, not an action,
   so the selected segment is filled softly rather than in the brand colour. */
.btn-check:checked + .btn {
  --btn-bg: var(--primary-soft);
  --btn-border: var(--primary);
  --btn-ink: var(--primary-dark);
  --btn-bg-hover: var(--primary-soft);
  --btn-border-hover: var(--primary);
  --btn-ink-hover: var(--primary-dark);
  font-weight: 600;
}

.btn-check:focus-visible + .btn {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The same control built from plain buttons rather than btn-check + label —
   the recordings type filter is one, and Bootstrap only marks the selected
   segment with a bare .active class. Given the same treatment as the
   btn-check form above so the two are indistinguishable to a reader.

   This replaces a `.btn-info.active` rule that used to live in precision.css
   and was the only thing keeping the selected segment legible; it filled the
   segment with --info and forced a --primary border with !important. It was
   also the reason the filter's selected state was the one place a filled cyan
   still made sense, back when btn-info meant cyan. */
.btn-group > .btn.active {
  --btn-bg: var(--primary-soft);
  --btn-border: var(--primary);
  --btn-ink: var(--primary-dark);
  --btn-bg-hover: var(--primary-soft);
  --btn-border-hover: var(--primary);
  --btn-ink-hover: var(--primary-dark);
  font-weight: 600;
}

/* ========================================
   TOOLBARS

   The workbench tool rails are columns of icon buttons. Same tier-2 rules,
   sized for a rail and square so the column aligns.
   ======================================== */
.tool-rail .btn,
.toolbar .btn {
  --btn-bg: transparent;
  --btn-border: transparent;
  --btn-ink: var(--text-secondary);
  --btn-bg-hover: var(--surface-hover);
  --btn-border-hover: var(--border);
  padding: 0.45rem;
  min-width: 2.1rem;
}

.tool-rail .btn.active,
.toolbar .btn.active {
  --btn-bg: var(--primary-soft);
  --btn-border: var(--primary-soft);
  --btn-ink: var(--primary-dark);
}

/* ========================================
   CLOSE

   Bootstrap's .btn-close is a background-image X, so it takes none of the
   above. Tinted to the token ink rather than left at its default near-black.
   ======================================== */
.btn-close {
  opacity: 0.55;
  transition: opacity var(--transition-fast);
}

.btn-close:hover {
  opacity: 1;
}

.btn-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: none;
}

/* ========================================
   LINKS THAT ARE NOT BUTTONS

   A .btn-link is a link. Making it look like a button is what produced rows of
   six identical boxes where one of them was "Cancel".
   ======================================== */
.btn-link {
  --btn-bg: transparent;
  --btn-border: transparent;
  --btn-ink: var(--accent);
  --btn-bg-hover: transparent;
  --btn-border-hover: transparent;
  --btn-ink-hover: var(--accent-dark);
  padding-inline: 0.35rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
}