/* One button style across the whole site: the GoDisai button (see .gd-btn in base.css). An ink outline, a hard
   offset shadow, and it presses down when you point at it. Loaded after every page stylesheet (templates/base.html)
   so the older per-page button classes all draw the same way. Primary is blue; ghost, outline and secondary are white. */
.btn, .btn-solid, .btn-outline, .btn-danger, .rv-btn, .pf-btn, .pl-btn, .panel-btn, .dash-btn, .dash-go, .todo-go {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .6rem 1.05rem; border-radius: 12px; border: 2px solid var(--fg) !important; box-shadow: 4px 4px 0 var(--fg);
  font: 800 .95rem/1.1 var(--display); letter-spacing: .01em; text-decoration: none !important; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
.btn, .btn-solid, .rv-btn, .pf-btn, .pl-btn, .panel-btn.primary, .dash-btn, .dash-go, .rv-btn.primary {
  background: var(--accent); color: #fff !important; }
.btn.ghost, .btn-outline, .pf-btn.ghost, .pl-btn.pl-btn-ghost, .panel-btn:not(.primary), .todo-go {
  background: #fff; color: var(--fg) !important; }
.btn-danger, .rv-btn.danger { background: #fff; color: #b91c1c !important; }
.btn:hover, .btn-solid:hover, .btn-outline:hover, .btn-danger:hover, .rv-btn:hover, .pf-btn:hover, .pl-btn:hover,
.panel-btn:hover, .dash-btn:hover, .dash-go:hover, .todo-go:hover {
  transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--fg); opacity: 1; filter: none; }
.btn:active, .btn-solid:active, .rv-btn:active, .pf-btn:active, .panel-btn:active, .dash-btn:active, .dash-go:active {
  transform: translate(4px, 4px); box-shadow: 0 0 0 var(--fg); }
.btn.ghost:hover, .btn-outline:hover, .pf-btn.ghost:hover, .panel-btn:not(.primary):hover, .todo-go:hover { background: var(--accent-soft); color: var(--fg) !important; }
.btn.sm, .panel-btn, .todo-go, .dash-btn { padding: .4rem .75rem; font-size: .85rem; border-radius: 10px; box-shadow: 3px 3px 0 var(--fg); }
.btn.block { width: 100%; }
.btn[disabled], .btn-solid[disabled], .rv-btn[disabled], .pf-btn[disabled], .panel-btn[disabled] { opacity: .55; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .btn, .btn-solid, .btn-outline, .rv-btn, .pf-btn, .pl-btn, .panel-btn, .dash-btn { transition: none; } }

/* The rest of the site's actions use the same pair as the chapter help box: a blue primary button and white
   secondary buttons beside it. Links that used to sit next to a button as plain text are white buttons now. */
.help-btn, .pending-go, .hint-btn, .dash-link, .crack-link, .pp-link, .pf-linkbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .6rem 1.05rem; border-radius: 12px; border: 2px solid var(--fg) !important; box-shadow: 4px 4px 0 var(--fg);
  background: #fff; color: var(--fg) !important; font: 800 .95rem/1.1 var(--display); letter-spacing: .01em;
  text-decoration: none !important; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
.help-btn.primary, .pending-go { background: var(--accent); color: #fff !important; }
.help-btn:hover, .pending-go:hover, .hint-btn:hover, .dash-link:hover, .crack-link:hover, .pp-link:hover,
.pf-linkbtn:hover {
  transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--fg); opacity: 1; border-color: var(--fg); }
.help-btn:not(.primary):hover, .hint-btn:hover, .dash-link:hover, .crack-link:hover, .pp-link:hover,
.pf-linkbtn:hover { background: var(--accent-soft); }
.help-btn.primary:hover, .pending-go:hover { background: var(--accent); }
.dash-link, .pending-go, .hint-btn, .pf-linkbtn {
  padding: .4rem .75rem; font-size: .85rem; border-radius: 10px; box-shadow: 3px 3px 0 var(--fg); }
.hint-btn.is-solution { color: var(--warn) !important; }
.hint-btn[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .help-btn, .pending-go, .hint-btn, .dash-link, .crack-link, .pp-link, .pf-linkbtn { transition: none; } }