/* The money-back guarantee line above a run button (js/views/first-run.js):
   amber warning with an icon, text in ink, never red. */
.fr-guar {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 14px 0 0; padding: 9px 12px; border-radius: 9px;
  font-size: 13px; line-height: 1.45; color: var(--text-primary);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
}
.fr-guar svg { flex: none; margin-top: 1px; color: var(--warn); }
.fr-guar a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
:is(body.new-ui, #viewNewdiagnosis) .fr-guar {
  color: var(--ui-ink); background: var(--ui-warn-soft);
  border-color: color-mix(in srgb, var(--ui-warn) 35%, transparent);
}
:is(body.new-ui, #viewNewdiagnosis) .fr-guar svg { color: var(--ui-warn); }

/* Surfaces modal: selected is the border plus the checkmark, always both.
   Hover only tints the tile and keyboard focus is an outside ring, so neither
   can be mistaken for a ticked surface (Valentina, design). */
.surf-tile:not(.on):not(.soon):hover { border-color: var(--border); background: var(--neutral-wash); }
body.new-ui .surf-tile:not(.on):not(.soon):hover { border-color: var(--ui-line); background: var(--ui-hover); }
.surf-tile:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
body.new-ui .surf-tile:has(input:focus-visible) { outline-color: var(--ui-accent); }