/*
  SFS buttons: button classes and button state variants.
  Select controls are owned by sfs-forms.css.
  Docs: _deploy/css-compartmentalisation-readable-map-20260704.md
  Related: _deploy/css-compartmentalisation-worklog-20260704.md; _deploy/css-compartmentalisation-verification-20260704.md
*/

/* Buttons: clear, quiet, predictable. */
button,
.button,
a.button {
  display: inline-block;
  width: auto;
  margin: 0 6px 6px 0;
  padding: 7px 11px;
  border: 1px solid #c4cbd2;
  border-radius: 7px;
  background: #fff;
  color: #2f3943;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
}

button:hover,
.button:hover,
a.button:hover {
  background: var(--brand-soft);
  border-color: var(--brand-line);
  color: var(--brand);
  text-decoration: none;
}

/* Primary-looking actions stay restrained. */
main > p > a.button:first-child,
.content > p > a.button:first-child,
main > form button[type="submit"],
.content > form button[type="submit"] {
  border-color: var(--brand-line);
  background: var(--brand-soft);
  color: var(--brand);
}

main > form button[type="submit"]:hover,
.content > form button[type="submit"]:hover {
  background: #e4f0f6;
}

td button,
table button {
  padding: 5px 8px;
  margin: 0;
  font-size: 13px;
}

/* Destructive and restorative actions are visible only when present. */
button.danger,
.danger button,
form[action*="archive"] button,
form[action*="revoke"] button {
  color: var(--danger) !important;
  border-color: var(--danger-line) !important;
  background: var(--danger-soft) !important;
}

button.danger:hover,
.danger button:hover,
form[action*="archive"] button:hover,
form[action*="revoke"] button:hover {
  border-color: var(--danger) !important;
  background: #ffecec !important;
}

form[action*="restore"] button {
  color: var(--success) !important;
  border-color: var(--success-line) !important;
  background: var(--success-soft) !important;
}

form[action*="restore"] button:hover {
  border-color: var(--success) !important;
  background: #e8f4ed !important;
}

/* Warm accent only on interaction. */
button:hover,
.button:hover,
a.button:hover {
  color: var(--accent-warm);
  border-color: color-mix(in srgb, var(--accent-warm) 45%, var(--line));
}

/* Keep primary actions blue, not orange. */
main > p > a.button:first-child,
.content > p > a.button:first-child,
main > form button[type="submit"],
.content > form button[type="submit"] {
  border-color: var(--brand-line);
  background: var(--brand-soft);
  color: var(--brand-strong);
}

/* Buttons: slightly less weight by default. */
button,
.button,
a.button {
  font-weight: 600;
}

/* Primary actions still identifiable, but not saturated. */
main > p > a.button:first-child,
.content > p > a.button:first-child,
main > form button[type="submit"],
.content > form button[type="submit"] {
  color: color-mix(in srgb, var(--brand-strong) 78%, var(--text));
  background: color-mix(in srgb, var(--brand-soft) 74%, var(--surface));
  border-color: color-mix(in srgb, var(--brand-line) 76%, var(--line));
}

/* Dark mode: avoid electric-blue text weight on primary actions. */
@media (prefers-color-scheme: dark) {
  main > p > a.button:first-child,
  .content > p > a.button:first-child,
  main > form button[type="submit"],
  .content > form button[type="submit"] {
    color: color-mix(in srgb, var(--brand-strong) 76%, var(--text));
    background: color-mix(in srgb, var(--brand-soft) 62%, var(--surface));
    border-color: color-mix(in srgb, var(--brand-line) 68%, var(--line));
  }
}

/* style-pass-2o: calm action buttons. */
button,
.button,
a.button,
a.button:visited {
  background: transparent;
  color: var(--muted);
  border-color: var(--line);
  font-weight: 560;
  box-shadow: none;
}

button:hover,
.button:hover,
a.button:hover,
button:focus,
.button:focus,
a.button:focus {
  background: color-mix(in srgb, var(--surface-soft) 78%, transparent);
  color: var(--accent-warm);
  border-color: color-mix(in srgb, var(--accent-warm) 45%, var(--line));
  text-decoration: none;
}

/* First/primary action: only a little more visible, not filled and shouty. */
main > p > a.button:first-child,
.content > p > a.button:first-child,
main > form button[type="submit"],
.content > form button[type="submit"] {
  background: transparent;
  color: color-mix(in srgb, var(--brand-strong) 58%, var(--text));
  border-color: color-mix(in srgb, var(--brand-line) 58%, var(--line));
}

main > p > a.button:first-child:hover,
.content > p > a.button:first-child:hover,
main > form button[type="submit"]:hover,
.content > form button[type="submit"]:hover {
  background: color-mix(in srgb, var(--brand-soft) 44%, transparent);
  color: var(--accent-warm);
  border-color: color-mix(in srgb, var(--accent-warm) 45%, var(--line));
}

/* Keep table inline actions even quieter. */
td button,
table button,
td .button,
table .button {
  background: transparent;
  color: var(--muted);
  border-color: var(--line);
  font-weight: 540;
}

/* Dark mode button tuning. */
@media (prefers-color-scheme: dark) {
  button,
  .button,
  a.button,
  a.button:visited {
    background: transparent;
    color: #a6aaa4;
    border-color: #30342f;
  }

  button:hover,
  .button:hover,
  a.button:hover,
  button:focus,
  .button:focus,
  a.button:focus {
    background: #181a18;
    color: var(--accent-warm);
    border-color: color-mix(in srgb, var(--accent-warm) 45%, #30342f);
  }

  main > p > a.button:first-child,
  .content > p > a.button:first-child,
  main > form button[type="submit"],
  .content > form button[type="submit"] {
    background: transparent;
    color: color-mix(in srgb, var(--brand-strong) 55%, var(--text));
    border-color: color-mix(in srgb, var(--brand-line) 50%, var(--line));
  }
}

/* Central quiet button rule. */
button.sfs-plain-button,
.sfs-plain-button,
a.sfs-plain-button,
a.sfs-plain-button:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.38rem 0.75rem;
  border-radius: 0.45rem;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-soft) 72%, transparent);
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
}

button.sfs-plain-button:hover,
button.sfs-plain-button:focus,
button.sfs-plain-button:focus-visible,
.sfs-plain-button:hover,
.sfs-plain-button:focus,
.sfs-plain-button:focus-visible,
a.sfs-plain-button:hover,
a.sfs-plain-button:focus,
a.sfs-plain-button:focus-visible {
  background: color-mix(in srgb, var(--surface-soft) 72%, transparent);
  color: var(--muted);
  border-color: color-mix(in srgb, var(--accent-warm) 55%, var(--line));
  outline: none;
  text-decoration: none;
}

button.sfs-plain-button:disabled,
.sfs-plain-button[disabled],
.sfs-plain-button[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Public share download choices. */
.download-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 1rem 0;
}

.download-options .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.download-option-note {
  max-width: 46rem;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.download-options .button[aria-disabled="true"] {
  opacity: 0.58;
  pointer-events: none;
}

.torrent-preparation-status {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  max-width: 46rem;
  margin: 0.85rem 0;
  padding: 0.75rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--brand-line) 65%, var(--line));
  border-radius: 0.55rem;
  background: color-mix(in srgb, var(--brand-soft) 38%, var(--surface));
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.45;
}

.torrent-preparation-status[hidden] {
  display: none;
}

.torrent-preparation-status[data-state="ready"] {
  border-color: color-mix(in srgb, var(--success-line) 70%, var(--line));
  background: color-mix(in srgb, var(--success-soft) 42%, var(--surface));
}

.torrent-preparation-status[data-state="error"] {
  border-color: color-mix(in srgb, var(--danger) 52%, var(--line));
}

.torrent-preparation-spinner {
  box-sizing: border-box;
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 1.15rem;
  border: 2px solid color-mix(in srgb, var(--brand-strong) 25%, transparent);
  border-top-color: var(--brand-strong);
  border-radius: 50%;
  animation: torrent-preparation-spin 0.8s linear infinite;
}

.torrent-preparation-status[data-state="ready"] .torrent-preparation-spinner,
.torrent-preparation-status[data-state="error"] .torrent-preparation-spinner {
  animation: none;
  border: 0;
}

.torrent-preparation-status[data-state="ready"] .torrent-preparation-spinner::before {
  content: "✓";
  color: var(--success);
  font-weight: 800;
}

.torrent-preparation-status[data-state="error"] .torrent-preparation-spinner::before {
  content: "!";
  color: var(--danger);
  font-weight: 800;
}

@keyframes torrent-preparation-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .torrent-preparation-spinner {
    animation-duration: 1.8s;
  }
}