/* FUP-analys action and control system — single authoritative layer.
 *
 * WHY THIS FILE EXISTS
 * --------------------
 * Before this layer the application carried two unrelated button vocabularies that had
 * drifted apart:
 *
 *   `.action` / `.action--primary` / `.action--quiet`   declared in shell.css
 *   `.action--danger`                                    declared in hosted.css
 *   `.quiet-button`                                      declared in review.css
 *
 * `.quiet-button` is a global primitive used by the masthead, the session warning, the
 * review rail and the workspaces, but it lived in a route stylesheet. The masthead then
 * layered a partial override on top of it:
 *
 *   .masthead-account .quiet-button { border-color: …; color: var(--on-ink); }
 *
 * That override changed the *text* colour to the light on-ink value but never changed the
 * *background*, which stayed at the `.quiet-button` default of `--paper-raised` (#ffffff).
 * Because the override is more specific than the base rule, no source order could rescue
 * it. The measured result was #f4f6f7 text on #ffffff — a contrast ratio of 1.08:1 against
 * a WCAG AA requirement of 4.5:1. The "Logga ut" control was effectively invisible.
 *
 * The fix is not a hard-coded colour on one button. It is an explicit surface-context
 * hierarchy: every action declares the complete triple (background, text, border) for the
 * surface it sits on, so a variant can never inherit half of one treatment and half of
 * another. Actions on the dark masthead resolve through `--on-ink-*` tokens; actions on
 * paper resolve through `--ink-*` tokens. Nothing is left implicit.
 *
 * Measured contrast for every state defined here is recorded in the frontend verification
 * report and pinned by tests/test_fupweb_action_contrast.py.
 */

/* ---------------------------------------------------------------------------
 * Shared control geometry.
 * Every interactive control shares one height rhythm, radius and focus behaviour so a
 * button, a quiet button and a link-action never disagree by two pixels.
 * ------------------------------------------------------------------------ */
.action,
.quiet-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border-radius: var(--radius-sm);
  font-weight: var(--weight-bold);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease);
}


/* ---------------------------------------------------------------------------
 * `.view-nav` — case-context navigation.
 *
 * This is intentionally quieter than the primary application masthead and the workspace
 * tabs, but it must still read as designed navigation rather than a run of underlined
 * hyperlinks. It is shared by review-adjacent routes, so ownership belongs here with the
 * other action primitives.
 * ------------------------------------------------------------------------ */
.view-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
}

.view-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: var(--space-2) var(--space-3);
  border: var(--border-hair) solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--paper-raised);
  color: var(--ink-700);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  text-decoration: none;
}

.view-nav a:hover {
  border-color: var(--rule-strong);
  background: var(--info-tint);
  color: var(--ink-900);
}

.view-nav .technical-link {
  margin-left: auto;
  border-color: transparent;
  background: transparent;
  color: var(--slate-600);
}

@media (max-width: 680px) {
  .view-nav a {
    flex: 1 1 auto;
    justify-content: center;
  }

  .view-nav .technical-link {
    margin-left: 0;
  }
}

/* ---------------------------------------------------------------------------
 * `.action` — the standard control on a paper surface.
 * ------------------------------------------------------------------------ */
.action {
  min-height: 2.6rem;
  padding: var(--space-2) var(--space-4);
  border: var(--border-hair) solid var(--ink-900);
  background: var(--paper-raised);
  color: var(--ink-900);
  font-size: var(--text-sm);
}

.action:hover:not(:disabled):not([aria-disabled='true']) {
  background: var(--info-tint);
  color: var(--ink-900);
}

.action--primary {
  border-color: var(--ink-900);
  background: var(--ink-900);
  color: var(--on-ink);
}

.action--primary:hover:not(:disabled):not([aria-disabled='true']) {
  background: var(--ink-700);
  color: var(--on-ink);
}

.action--quiet {
  border-color: var(--rule-strong);
  color: var(--ink-700);
  font-weight: var(--weight-semibold);
}

.action--quiet:hover:not(:disabled):not([aria-disabled='true']) {
  background: var(--info-tint);
  color: var(--ink-900);
}

/* Destructive actions are deliberately *not* the same weight as "open". They carry the
 * alert tone at full strength so deletion can never read as an ordinary sibling of a
 * navigation action. */
.action--danger {
  border-color: var(--alert-rule);
  background: var(--alert-ink);
  color: var(--paper-raised);
}

.action--danger:hover:not(:disabled):not([aria-disabled='true']) {
  background: var(--alert-tint);
  color: var(--alert-ink);
}

/* ---------------------------------------------------------------------------
 * `.quiet-button` — the compact tertiary control.
 *
 * Declared here rather than in review.css because the masthead, the session warning and
 * every workspace use it. A global primitive owned by a route stylesheet was the root of
 * the logout defect.
 * ------------------------------------------------------------------------ */
.quiet-button {
  min-height: 2.25rem;
  padding: var(--space-2) var(--space-3);
  border: var(--border-hair) solid var(--rule-strong);
  background: var(--paper-raised);
  color: var(--ink-700);
  font-size: var(--text-xs);
}

.quiet-button:hover:not(:disabled):not([aria-disabled='true']) {
  background: var(--info-tint);
  color: var(--ink-900);
}

/* ---------------------------------------------------------------------------
 * Dark-surface context.
 *
 * `.on-ink-surface` marks any region painted with `--ink-900`. Controls inside it declare
 * the complete triple. This is the rule that makes the masthead logout button legible, and
 * it generalises: any future control placed on the masthead inherits a correct treatment
 * instead of needing its own patch.
 *
 * Measured: text 15.33:1, border 5.43:1, hover text 11.87:1.
 * ------------------------------------------------------------------------ */
.on-ink-surface .quiet-button,
.masthead-account .quiet-button {
  border-color: var(--slate-400);
  background: transparent;
  color: var(--on-ink);
}

.on-ink-surface .quiet-button:hover:not(:disabled),
.masthead-account .quiet-button:hover:not(:disabled) {
  border-color: var(--on-ink-muted);
  background: var(--ink-700);
  color: var(--on-ink);
}

.on-ink-surface .quiet-button:active:not(:disabled),
.masthead-account .quiet-button:active:not(:disabled) {
  background: var(--ink-500);
  color: var(--on-ink);
}

/* The standard focus ring is `--focus` (#14509b), which is a mid navy chosen for light
 * surfaces. On `--ink-900` it would nearly vanish, so dark regions switch to the light
 * on-ink ring, measured at 15.33:1. */
.on-ink-surface :where(a, button, input, select, summary, [tabindex]):focus-visible,
.masthead-account :where(a, button, [tabindex]):focus-visible {
  outline: var(--focus-width) solid var(--on-ink);
  outline-offset: var(--focus-offset);
}

/* ---------------------------------------------------------------------------
 * Disabled.
 *
 * A disabled control must still be readable: a lawyer needs to see that "Jämför förhör"
 * exists and is unavailable, not merely perceive a grey smear. Opacity is kept high enough
 * that the label stays above 4.5:1 on its own surface.
 * ------------------------------------------------------------------------ */
.action:disabled,
.action[aria-disabled='true'],
.quiet-button:disabled,
.quiet-button[aria-disabled='true'] {
  border-color: var(--rule);
  background: var(--paper-sunken);
  color: var(--slate-450);
  cursor: not-allowed;
}

.on-ink-surface .quiet-button:disabled,
.masthead-account .quiet-button:disabled {
  border-color: var(--slate-450);
  background: transparent;
  color: var(--on-ink-muted);
}

/* A control that is running work is not the same as a control that is unavailable. It
 * keeps its own tone and states the work in its label. */
.action[data-busy='true'],
.quiet-button[data-busy='true'] {
  cursor: progress;
}

/* ---------------------------------------------------------------------------
 * Forced colours / Windows high contrast.
 * System colours replace the palette; the only job left is to keep borders present so the
 * control still reads as a control.
 * ------------------------------------------------------------------------ */
@media (forced-colors: active) {
  .action,
  .quiet-button {
    border: 1px solid ButtonBorder;
    background: ButtonFace;
    color: ButtonText;
  }

  .action:disabled,
  .quiet-button:disabled {
    color: GrayText;
  }

  .on-ink-surface :where(a, button, [tabindex]):focus-visible,
  .masthead-account :where(a, button, [tabindex]):focus-visible {
    outline: var(--focus-width) solid Highlight;
  }
}

/* Compact variant.
 * For actions that sit inside a dense result row, where the standard control height
 * would dominate the row it belongs to. Same tokens, smaller box: this is a size
 * variant, never a quieter permission level. */
.action--compact {
  min-height: 2rem;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  white-space: nowrap;
}