/*
 * Reusable components. Class vocabulary shared with every UI module:
 *   .btn (+ --primary --secondary --ghost --icon --sm --block, state: disabled / .is-busy)
 *   .segmented > .segmented__btn[aria-pressed="true"]
 *   .field > .field__label + .input|.select|.slider|.textarea + .field__hint
 *   .field-group (fieldset) > .field-group__legend, .input-group, .switch, .disclosure
 *   .card, .stat-grid > .stat, .badge (+ --warning), .alert (+ --warning)
 *   .toast (+ --success --warning --danger) inside #toast-root, .modal inside #modal-root
 *   .is-busy, .stack, .cluster
 */

/* ---- Buttons ---- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sg-space-2);
  min-height: var(--sg-control-height);
  padding: 0 var(--sg-space-4);
  border: 1px solid transparent;
  border-radius: var(--sg-radius-2);
  background: transparent;
  color: var(--sg-color-text);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  user-select: none;
  transition:
    background-color var(--sg-motion-fast) ease,
    border-color var(--sg-motion-fast) ease,
    color var(--sg-motion-fast) ease,
    transform var(--sg-motion-fast) ease;
}

.btn--primary {
  border-color: var(--sg-color-accent);
  background: var(--sg-color-accent);
  color: var(--sg-color-accent-text);
}

.btn--secondary {
  border-color: var(--sg-color-border);
  background: var(--sg-color-surface-2);
}

.btn--icon {
  width: var(--sg-control-height);
  padding: 0;
}

.btn--sm {
  min-height: 2rem;
  padding: 0 var(--sg-space-3);
  font-size: var(--sg-font-size-sm);
}

.btn--sm.btn--icon {
  width: 2rem;
  padding: 0;
}

.btn--block {
  width: 100%;
}

.btn--primary:where(:hover, :active):not(:disabled) {
  border-color: var(--sg-color-accent-hover);
  background: var(--sg-color-accent-hover);
}

.btn--secondary:where(:hover, :active):not(:disabled),
.btn--ghost:where(:hover, :active):not(:disabled) {
  background: var(--sg-color-hover);
}

.btn:active:not(:disabled) {
  transform: translateY(1px);
}

.btn:disabled {
  border-color: var(--sg-color-divider);
  border-style: dashed;
  background: var(--sg-color-surface-2);
  color: var(--sg-color-disabled-text);
  cursor: not-allowed;
}

.btn--ghost:disabled {
  border-color: transparent;
  background: transparent;
}

/* ---- Busy state ---- */
.is-busy,
[aria-busy="true"] {
  cursor: progress;
}

.btn.is-busy {
  pointer-events: none;
}

.btn.is-busy::after {
  content: "";
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  border: 0.15em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: sg-spin 0.8s linear infinite;
}

.controls-form.is-busy {
  opacity: 0.6;
  pointer-events: none;
}

.board-frame.is-busy {
  position: relative;
  overflow: hidden;
}

.board-frame.is-busy::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 35%;
  height: 3px;
  background: var(--sg-color-accent);
  animation: sg-indeterminate 1.2s ease-in-out infinite;
}

/* ---- Segmented control (language, theme) ---- */
.segmented {
  display: inline-flex;
  max-width: 100%;
}

.segmented__btn {
  position: relative;
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  margin-inline-start: -1px;
  padding: 0 var(--sg-space-3);
  border: 1px solid var(--sg-color-border);
  background: var(--sg-color-surface);
  color: var(--sg-color-text);
  font-size: var(--sg-font-size-sm);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transition:
    background-color var(--sg-motion-fast) ease,
    color var(--sg-motion-fast) ease;
}

.segmented__btn:first-child {
  margin-inline-start: 0;
  border-radius: var(--sg-radius-2) 0 0 var(--sg-radius-2);
}

.segmented__btn:last-child {
  border-radius: 0 var(--sg-radius-2) var(--sg-radius-2) 0;
}

.segmented__btn--icon {
  flex: none;
  width: 2.25rem;
  padding: 0;
}

.segmented__btn:hover {
  background: var(--sg-color-hover);
}

.segmented__btn[aria-pressed="true"] {
  z-index: 1;
  border-color: var(--sg-color-accent);
  background: var(--sg-color-accent);
  color: var(--sg-color-accent-text);
}

.segmented__btn:focus-visible {
  z-index: 2;
}

/* ---- Form fields ---- */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--sg-space-1);
  min-width: 0;
}

.field__label {
  font-size: var(--sg-font-size-sm);
  font-weight: 650;
}

.field__hint {
  color: var(--sg-color-text-muted);
  font-size: 0.8125rem;
}

.field--inline {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--sg-space-3);
}

/* Label row of a field: the label and its small help icon. The tooltip is laid over the control below. */
.field__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sg-space-1);
  min-height: 1.5rem;
}

.field__title {
  display: inline-flex;
  align-items: center;
  gap: var(--sg-space-1);
  min-width: 0;
}

.help-tip {
  display: inline-flex;
  flex: none;
}

.help-tip[hidden] {
  display: none;
}

.help-tip__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--sg-radius-pill);
  background: transparent;
  color: var(--sg-color-text-muted);
  cursor: help;
}

.help-tip__btn .icon {
  width: 1rem;
  height: 1rem;
}

.help-tip__btn:hover,
.help-tip[data-open] .help-tip__btn {
  color: var(--sg-color-accent);
}

.help-tip__pop {
  position: absolute;
  top: 100%;
  inset-inline: 0;
  z-index: 20;
  display: none;
  padding: var(--sg-space-2) var(--sg-space-3);
  border: 1px solid var(--sg-color-border);
  border-radius: var(--sg-radius-2);
  background: var(--sg-color-surface);
  color: var(--sg-color-text);
  box-shadow: var(--sg-shadow-2);
  font-size: var(--sg-font-size-sm);
  font-weight: 400;
  line-height: 1.45;
}

.help-tip__pop p + p {
  margin-top: var(--sg-space-2);
}

.help-tip:hover .help-tip__pop,
.help-tip:focus-within .help-tip__pop,
.help-tip[data-open] .help-tip__pop {
  display: block;
}

.help-tip[data-dismissed] .help-tip__pop {
  display: none;
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: var(--sg-space-3);
  padding: var(--sg-space-3);
  border: 1px solid var(--sg-color-divider);
  border-radius: var(--sg-radius-2);
}

.field-group__legend {
  padding: 0 var(--sg-space-1);
  font-size: var(--sg-font-size-sm);
  font-weight: 650;
}

.input-group {
  display: flex;
  align-items: stretch;
  gap: var(--sg-space-2);
}

.input-group > :is(.input, input) {
  flex: 1 1 auto;
  min-width: 0;
}

.input,
.select,
.textarea,
input[type="text"],
input[type="number"],
select,
textarea {
  width: 100%;
  min-height: var(--sg-control-height);
  padding: 0 var(--sg-space-3);
  border: 1px solid var(--sg-color-border);
  border-radius: var(--sg-radius-2);
  background-color: var(--sg-color-surface);
  color: var(--sg-color-text);
}

.textarea,
textarea {
  padding: var(--sg-space-2) var(--sg-space-3);
}

.input:hover,
.select:hover,
.textarea:hover,
input[type="text"]:hover,
input[type="number"]:hover,
select:hover,
textarea:hover {
  border-color: var(--sg-color-text-muted);
}

.input:disabled,
.select:disabled,
.textarea:disabled,
input[type="text"]:disabled,
input[type="number"]:disabled,
select:disabled,
textarea:disabled {
  border-style: dashed;
  background-color: var(--sg-color-surface-2);
  color: var(--sg-color-disabled-text);
}

/* The browser default placeholder grey fails 4.5:1 on dark surfaces. */
.input::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--sg-color-text-muted);
  opacity: 1;
}

.select,
select {
  padding-inline-end: 2.25rem;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 1.3rem) 50%,
    calc(100% - 0.9rem) 50%;
  background-size: 0.4rem 0.4rem;
  background-repeat: no-repeat;
  -webkit-appearance: none;
  appearance: none;
  text-overflow: ellipsis;
}

/* ---- Slider ---- */
.slider,
input[type="range"] {
  width: 100%;
  height: 1.75rem;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}

.slider::-webkit-slider-runnable-track,
input[type="range"]::-webkit-slider-runnable-track {
  height: 0.5rem;
  border: 1px solid var(--sg-color-border);
  border-radius: var(--sg-radius-pill);
  background: var(--sg-color-track);
}

.slider::-moz-range-track,
input[type="range"]::-moz-range-track {
  height: 0.5rem;
  border: 1px solid var(--sg-color-border);
  border-radius: var(--sg-radius-pill);
  background: var(--sg-color-track);
}

.slider::-webkit-slider-thumb,
input[type="range"]::-webkit-slider-thumb {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: -0.4375rem;
  border: 2px solid var(--sg-color-surface);
  border-radius: 50%;
  background: var(--sg-color-accent);
  box-shadow: 0 0 0 1px var(--sg-color-accent);
  -webkit-appearance: none;
  appearance: none;
}

.slider::-moz-range-thumb,
input[type="range"]::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--sg-color-surface);
  border-radius: 50%;
  background: var(--sg-color-accent);
  box-shadow: 0 0 0 1px var(--sg-color-accent);
}

.slider:disabled,
input[type="range"]:disabled {
  opacity: 0.55;
}

/* ---- Switch: <label class="switch"><input class="switch__input" type="checkbox" role="switch">
        <span class="switch__track" aria-hidden="true"></span><span class="switch__text">…</span></label> ---- */
.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sg-space-3);
  cursor: pointer;
}

.switch__input {
  position: absolute;
  width: 2.5rem;
  height: 1.5rem;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}

.switch__track {
  position: relative;
  flex: none;
  width: 2.5rem;
  height: 1.5rem;
  border: 2px solid var(--sg-color-border);
  border-radius: var(--sg-radius-pill);
  background: var(--sg-color-surface-2);
  transition:
    background-color var(--sg-motion-fast) ease,
    border-color var(--sg-motion-fast) ease;
}

.switch__track::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.125rem;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  background: var(--sg-color-text-muted);
  transform: translateY(-50%);
  transition:
    transform var(--sg-motion-fast) ease,
    background-color var(--sg-motion-fast) ease;
}

.switch__input:checked + .switch__track {
  border-color: var(--sg-color-accent);
  background: var(--sg-color-accent);
}

.switch__input:checked + .switch__track::after {
  background: var(--sg-color-accent-text);
  transform: translate(1rem, -50%);
}

.switch__input:focus-visible + .switch__track {
  outline: var(--sg-focus-width) solid var(--sg-color-focus);
  outline-offset: var(--sg-focus-offset);
}

.switch__input:disabled + .switch__track {
  opacity: 0.6;
}

/* ---- Disclosure (<details class="disclosure"><summary>…</summary><div class="disclosure__body">) ---- */
.disclosure {
  border: 1px solid var(--sg-color-divider);
  border-radius: var(--sg-radius-2);
}

.disclosure > summary {
  display: flex;
  align-items: center;
  gap: var(--sg-space-2);
  min-height: var(--sg-control-height);
  padding: var(--sg-space-2) var(--sg-space-3);
  border-radius: var(--sg-radius-2);
  font-weight: 650;
  list-style: none;
}

.disclosure > summary::-webkit-details-marker {
  display: none;
}

.disclosure > summary::before {
  content: "";
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--sg-motion-fast) ease;
}

.disclosure[open] > summary::before {
  transform: rotate(45deg);
}

.disclosure__body {
  display: flex;
  flex-direction: column;
  gap: var(--sg-space-3);
  padding: var(--sg-space-1) var(--sg-space-3) var(--sg-space-3);
}

/* ---- Cards, stat cards ---- */
.card {
  padding: var(--sg-space-4);
  border: 1px solid var(--sg-color-divider);
  border-radius: var(--sg-radius-3);
  background: var(--sg-color-surface);
  box-shadow: var(--sg-shadow-1);
}

.card--flat {
  background: var(--sg-color-surface-2);
  box-shadow: none;
}

.card__title {
  margin: 0 0 var(--sg-space-3);
  font-size: var(--sg-font-size-lg);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr));
  gap: var(--sg-space-3);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  padding: var(--sg-space-3);
  border: 1px solid var(--sg-color-divider);
  border-radius: var(--sg-radius-2);
  background: var(--sg-color-surface-2);
}

.stat__label {
  color: var(--sg-color-text-muted);
  font-size: 0.8125rem;
}

.stat__value {
  font-size: var(--sg-font-size-lg);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* ---- Badges and alerts ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sg-space-1);
  padding: 0.125rem 0.625rem;
  border: 1px solid var(--sg-color-border);
  border-radius: var(--sg-radius-pill);
  background: var(--sg-color-surface);
  color: var(--sg-color-text);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.badge--warning {
  border-color: var(--sg-color-warning);
  background: var(--sg-color-warning-bg);
  color: var(--sg-color-warning);
}

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--sg-space-3);
  padding: var(--sg-space-3) var(--sg-space-4);
  border: 1px solid var(--sg-color-border);
  border-inline-start-width: 4px;
  border-radius: var(--sg-radius-2);
  background: var(--sg-color-surface-2);
  color: var(--sg-color-text);
}

.alert > .icon {
  margin-top: 0.125rem;
}

.alert--warning {
  border-color: var(--sg-color-warning);
  background: var(--sg-color-warning-bg);
}

.alert--warning > .icon {
  color: var(--sg-color-warning);
}

/* ---- Toasts (announced by #toast-root, role="status") ---- */
.toast-root {
  position: fixed;
  right: var(--sg-space-4);
  bottom: var(--sg-space-4);
  z-index: var(--sg-z-toast);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sg-space-2);
  width: min(26rem, calc(100vw - 2rem));
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--sg-space-3);
  width: 100%;
  padding: var(--sg-space-3) var(--sg-space-4);
  border: 1px solid var(--sg-color-border);
  border-inline-start: 4px solid var(--sg-color-accent);
  border-radius: var(--sg-radius-2);
  background: var(--sg-color-surface);
  color: var(--sg-color-text);
  box-shadow: var(--sg-shadow-2);
  pointer-events: auto;
  animation: sg-toast-in var(--sg-motion-base) ease-out;
}

.toast--success {
  border-inline-start-color: var(--sg-color-success);
}

.toast--warning {
  border-inline-start-color: var(--sg-color-warning);
}

.toast--danger {
  border-inline-start-color: var(--sg-color-danger);
}

.toast__message {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.toast__close {
  flex: none;
}

@media (max-width: 767.98px) {
  .toast-root {
    right: var(--sg-space-3);
    bottom: calc(var(--sg-actions-bar-height) + var(--sg-space-3) + env(safe-area-inset-bottom, 0px));
    left: var(--sg-space-3);
    width: auto;
  }
}

/* ---- Modal: <dialog class="modal"> (preferred, showModal()) or <div class="modal" role="dialog"> ---- */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--sg-z-modal);
  display: grid;
  place-items: center;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: var(--sg-space-4);
  overflow: auto;
  border: 0;
  background: var(--sg-color-backdrop);
  color: var(--sg-color-text);
  animation: sg-fade-in var(--sg-motion-base) ease-out;
}

dialog.modal:not([open]) {
  display: none;
}

.modal::backdrop {
  background: transparent;
}

.modal__panel {
  display: flex;
  flex-direction: column;
  width: min(100%, 34rem);
  max-height: calc(100vh - 2 * var(--sg-space-4));
  max-height: calc(100dvh - 2 * var(--sg-space-4));
  overflow: hidden;
  border: 1px solid var(--sg-color-border);
  border-radius: var(--sg-radius-3);
  background: var(--sg-color-surface);
  box-shadow: var(--sg-shadow-2);
}

.modal__panel--wide {
  width: min(100%, 52rem);
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sg-space-3);
  padding: var(--sg-space-3) var(--sg-space-4);
  border-bottom: 1px solid var(--sg-color-divider);
}

.modal__title {
  margin: 0;
  font-size: var(--sg-font-size-lg);
}

.modal__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--sg-space-3);
  padding: var(--sg-space-4);
  overflow: auto;
}

.modal__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sg-space-2);
  padding: var(--sg-space-3) var(--sg-space-4);
  border-top: 1px solid var(--sg-color-divider);
  background: var(--sg-color-surface-2);
}

/* ---- Print dialog: the saved puzzles to choose from, puzzles per page, solutions ---- */
.print-dialog {
  display: flex;
  flex-direction: column;
  gap: var(--sg-space-3);
}

.print-dialog__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sg-space-2) var(--sg-space-3);
}

.print-dialog__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sg-space-2);
}

.print-dialog__count {
  margin: 0;
  color: var(--sg-color-text-muted);
  font-size: var(--sg-font-size-sm);
  font-variant-numeric: tabular-nums;
}

.print-list {
  max-height: 12rem;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  border: 1px solid var(--sg-color-divider);
  border-radius: var(--sg-radius-2);
  list-style: none;
}

.print-list[hidden] {
  display: none;
}

.print-list__item + .print-list__item {
  border-top: 1px solid var(--sg-color-divider);
}

.print-pick {
  display: flex;
  align-items: center;
  gap: var(--sg-space-2);
  padding: var(--sg-space-2) var(--sg-space-3);
  cursor: pointer;
}

.print-pick:hover {
  background: var(--sg-color-hover);
}

.print-pick > input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
}

.print-dialog__status {
  min-height: 1.25rem;
  margin: 0;
  color: var(--sg-color-text-muted);
  font-size: var(--sg-font-size-sm);
}

/* ---- Layout helpers ---- */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--sg-space-3);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sg-space-2);
}

/* ---- Keyframes (neutralised by the reduced-motion rules in base.css) ---- */
@keyframes sg-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes sg-indeterminate {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(290%);
  }
}

@keyframes sg-toast-in {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes sg-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (forced-colors: active) {
  .switch__track,
  .badge {
    border: 2px solid currentColor;
  }
}

/* ---- List of generated puzzles (js/ui/history.js, inside #history-root) ---- */
.history-list {
  display: flex;
  flex-direction: column;
  gap: var(--sg-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.history-list[hidden] {
  display: none;
}

.history-item {
  position: relative;
  min-width: 0;
}

.history-item:hover {
  background: var(--sg-color-hover);
}

.history-item__open {
  display: flex;
  width: 100%;
  flex-direction: column;
  min-width: 0;
  padding: 0.5rem 2rem 0.5rem var(--sg-space-3);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  line-height: 1.35;
  text-align: start;
}

.history-item__open[aria-current="true"] {
  box-shadow: inset 3px 0 0 var(--sg-color-accent);
  background: var(--sg-color-accent-soft);
}

.history-item__title {
  overflow: hidden;
  font-size: var(--sg-font-size-base);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-item__meta {
  color: var(--sg-color-text-muted);
  font-size: var(--sg-font-size-sm);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.history-item__level {
  font-weight: 650;
}

.history-item .history-item__remove.btn--sm.btn--icon {
  position: absolute;
  top: 0.25rem;
  inset-inline-end: 0.25rem;
  width: 1.5rem;
  height: 1.5rem;
  min-height: 0;
  padding: 0;
}

.history-item__remove .icon {
  width: 0.875rem;
  height: 0.875rem;
}

@media (forced-colors: active) {
  .history-item__open[aria-current="true"] {
    outline: 2px solid currentColor;
  }
}

/* ---- Result panel (js/ui/result-view.js, inside #result-root) and its warning state ---- */
.result {
  display: flex;
  flex-direction: column;
  gap: var(--sg-space-4);
}

.result__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sg-space-2) var(--sg-space-3);
}

.result__header > .card__title {
  margin: 0;
}

.result__warning-body {
  align-items: flex-start;
  gap: var(--sg-space-2);
  min-width: 0;
}

.result__warning-detail {
  color: var(--sg-color-text-muted);
  font-size: var(--sg-font-size-sm);
}

.stat-grid--sm {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 12rem));
  gap: var(--sg-space-2);
}

/* On a phone the boxes (Difficulty, Clues) share one row, each at most as wide as on a desktop. */
@media (max-width: 767.98px) {
  .stat-grid--sm {
    grid-template-columns: repeat(2, minmax(0, 12rem));
  }
}

.stat--sm {
  padding: var(--sg-space-2) var(--sg-space-3);
}

.stat--sm .stat__label,
.stat__sub {
  color: var(--sg-color-text-muted);
  font-size: 0.75rem;
}

.stat--sm .stat__value {
  font-size: var(--sg-font-size-base);
}

.result__section {
  min-width: 0;
}

/* Desktop: Difficulty, Clues and the key word share one row; the word takes what is left. */
.stat-grid--word {
  grid-template-columns: repeat(2, minmax(8rem, 12rem)) minmax(0, 1fr);
}

/* Phone: the word box goes on a row of its own below the other two. */
@media (max-width: 767.98px) {
  .stat-grid--word {
    grid-template-columns: repeat(2, minmax(0, 12rem));
  }

  .stat--wide {
    grid-column: 1 / -1;
  }
}

.result-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--sg-font-size-sm);
}

.result-table th,
.result-table td {
  padding: var(--sg-space-1) var(--sg-space-2);
  border-bottom: 1px solid var(--sg-color-divider);
  text-align: start;
  overflow-wrap: anywhere;
}

.result-table thead th {
  color: var(--sg-color-text-muted);
  font-weight: 600;
}

.result-table tbody th {
  font-weight: 400;
}

.result-table .result-table__num {
  text-align: end;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.result-table tbody th[scope="colgroup"] {
  padding-top: var(--sg-space-2);
  color: var(--sg-color-text-muted);
  font-weight: 600;
}

.result-table tfoot th,
.result-table tfoot td {
  border-bottom: 0;
  font-weight: 650;
}

.result-table__name {
  display: inline-flex;
  align-items: center;
  gap: var(--sg-space-1);
}

/* Short column names and their legend are for phones only. */
.result-table__short,
.result-table__legend {
  display: none;
}

/* Phone: tighter cells and short column names leave the technique column the room it needs. */
@media (max-width: 767.98px) {
  .result-table th,
  .result-table td {
    padding-inline: var(--sg-space-1);
  }

  .result-table__short {
    display: inline;
  }

  .result-table__legend {
    display: block;
  }

  .result-table__legend span {
    display: block;
  }

  .result-table__full {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.help-tip--inline {
  position: relative;
}

.help-tip--inline .help-tip__pop {
  top: calc(100% + 0.25rem);
  inset-inline: 0 auto;
  width: min(20rem, 70vw);
  text-align: start;
  white-space: normal;
}

/* The tooltip of a score in the last column opens towards the start, so it stays inside the panel. */
.help-tip--inline.help-tip--end .help-tip__pop {
  inset-inline: auto 0;
  width: min(26rem, 85vw);
}

/* Set by SG.stepView.placeTip when the pop-up does not fit under the icon: it opens above it. */
.help-tip--inline[data-above] .help-tip__pop {
  top: auto;
  bottom: calc(100% + 0.25rem);
}

/* While the pop-up is measured: laid out but invisible. */
.help-tip[data-measure] .help-tip__pop {
  display: block;
  visibility: hidden;
}

.score-tip__line + .score-tip__line {
  margin-top: var(--sg-space-2);
}

.score-tip__label {
  color: var(--sg-color-text-muted);
  font-size: 0.8125rem;
}

.score-tip__math {
  font-family: "Cambria Math", "STIX Two Math", "Latin Modern Math", Cambria, "Times New Roman", serif;
  font-size: 1rem;
  line-height: 1.9;
  font-variant-numeric: tabular-nums;
}

.score-tip__math var {
  font-style: italic;
  margin-inline-end: 0.08em;
}

.score-tip__math sub {
  font-size: 0.75em;
  line-height: 0;
}

.score-tip__math strong {
  font-weight: 700;
}

.score-tip__note {
  margin-top: var(--sg-space-2);
  color: var(--sg-color-text-muted);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.score-tip__line--result {
  padding-top: var(--sg-space-1);
  border-top: 1px solid var(--sg-color-divider);
}

.math-frac {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: middle;
  margin-inline: 0.15em;
  line-height: 1.25;
  text-align: center;
}

.math-frac__top {
  padding-inline: 0.2em;
  border-bottom: 1px solid currentColor;
}

.math-frac__bottom {
  padding-inline: 0.2em;
}

.result-table__score {
  display: inline-flex;
  align-items: center;
  gap: var(--sg-space-1);
}

.result__note {
  margin-top: var(--sg-space-2);
  font-size: var(--sg-font-size-sm);
  text-align: end;
}

/* ---- Settings dialog (js/ui/a11y.js): radio choices as buttons, switch rows ---- */
.choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sg-space-2);
}

.choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--sg-control-height);
  min-height: var(--sg-control-height);
  padding: 0 var(--sg-space-3);
  border: 1px solid var(--sg-color-border);
  border-radius: var(--sg-radius-2);
  background: var(--sg-color-surface);
  color: var(--sg-color-text);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition:
    background-color var(--sg-motion-fast) ease,
    color var(--sg-motion-fast) ease;
}

.choice > input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}

.choice:hover {
  background: var(--sg-color-hover);
}

.choice:has(> input:checked) {
  border-color: var(--sg-color-accent);
  background: var(--sg-color-accent);
  color: var(--sg-color-accent-text);
}

.choice:has(> input:focus-visible) {
  outline: var(--sg-focus-width) solid var(--sg-color-focus);
  outline-offset: var(--sg-focus-offset);
}

.choice__text--small {
  font-size: var(--sg-font-size-sm);
}

.choice__text--large {
  font-size: var(--sg-font-size-xl);
}

.setting {
  display: flex;
  flex-direction: column;
  gap: var(--sg-space-1);
}

.setting__note {
  margin: 0;
}

@media (forced-colors: active) {
  .choice:has(> input:checked),
  .segmented__btn[aria-pressed="true"] {
    border-width: 3px;
    text-decoration: underline;
  }
}