/* Buttons: one component for every action button in the app.
   .button.primary   the main action in an area (one per card or section)
   .button.secondary an alternative action (also the look of a plain .button)
   .button.tertiary  a quiet action: header links, "how to" links, see-all links
   .sm               compact size for cards, rows and section headers
   Inline links inside sentences stay as links (.link-button for a <button>). */
:root{--line-strong:#d4d5d9}
body.dark{--line-strong:#3a3c42}

.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border:1px solid var(--line-strong);border-radius:10px;background:var(--paper);color:var(--ink);font:600 var(--fs-ui)/1.25 var(--sans);letter-spacing:0;text-align:center;text-decoration:none;white-space:normal;cursor:pointer;box-shadow:none;transition:background-color .15s,border-color .15s,color .15s}
.button .icon,.button>svg{width:16px;height:16px;flex:none}
.button:hover{border-color:var(--ink);color:var(--ink)}
.button.primary{background:var(--action);border-color:var(--action);color:var(--action-ink);font-weight:600}
.button.primary:hover{background:var(--action-hover);border-color:var(--action-hover);color:var(--action-ink)}
.button.secondary{background:var(--paper);border:1px solid var(--line-strong);color:var(--ink);font-weight:600}
.button.secondary:hover{border-color:var(--ink);background:var(--paper);color:var(--ink)}
.button.tertiary{background:transparent;border-color:transparent;color:var(--ink);padding:0 10px}
.button.tertiary:hover{background:var(--soft);background:color-mix(in srgb,currentColor 8%,transparent);border-color:transparent;color:var(--ink)}
.button.selected{background:var(--action-soft);border-color:var(--action);color:var(--action)}
.button.sm{min-height:32px;padding:0 12px;gap:6px;border-radius:8px;font-size:var(--fs-caption)}
.button.sm .icon,.button.sm>svg{width:14px;height:14px}
.button.tertiary.sm{padding:0 8px}
.button:disabled,.button[aria-disabled=true]{opacity:.45;cursor:not-allowed}
.button:focus-visible{outline:3px solid var(--action);outline-offset:2px}
.prose a.button,.prose a.button:hover{text-decoration:none}
.prose a.button.primary{color:var(--action-ink)}

/* Places that lay buttons out */
.module-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.home-review .button{flex:none}
.assessment-next .button.tertiary{justify-content:flex-start;margin-left:-8px}
.course-tools,.course-lead-links{display:flex;flex-wrap:wrap;gap:4px;margin-left:-8px}
@media(max-width:640px){.home-review .button{margin-top:12px}}