/* Shared article and game controls. Keep targets large, labels short and rows aligned. */
.panel-actions, .puzzle-actions { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.panel-actions { margin-top: 16px; }
.panel-button, .puzzle-page .panel-button {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; min-width: 44px; min-height: 44px; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 7px; background: var(--paper);
  color: var(--green); font: 12px/1.4 var(--sans); text-decoration: none;
  cursor: pointer; touch-action: manipulation; white-space: nowrap;
}
.panel-button .icon { flex-shrink: 0; width: 18px; height: 18px; }
.panel-button:not(:disabled):hover, .panel-help[open] > summary { background: var(--tint); border-color: #b6c7b0; }
.panel-button:disabled { cursor: default; opacity: .5; }
.panel-button:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.panel-help { position: relative; flex: 0 0 auto; padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; }
.panel-help summary { list-style: none; font-weight: 400; }
.panel-help summary::-webkit-details-marker { display: none; }
.panel-help summary::marker { content: ''; }
.panel-help-content { position: absolute; right: 0; top: calc(100% + 8px); z-index: 25; width: min(300px, calc(100vw - 48px)); max-height: 50dvh; overflow-y: auto; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); box-shadow: 0 5px 20px #282e2914; color: var(--muted); font: 13px/1.7 var(--sans); }
.panel-help-content p { margin: 0 0 10px; }
.panel-help-content p:last-child { margin-bottom: 0; }
.panel-actions > .panel-help:first-child .panel-help-content { right: auto; left: 0; }
/* Keep activity popovers below the sticky site navigation. */
.graph-widget { min-width: 0; isolation: isolate; }
.graph-widget img { max-width: 100%; height: auto; }
.graph-widget button:not(.three-cups-cup):not(.lo-light) { min-height: 44px; }
.graph-widget input[type='range'] { min-height: 44px; }
.graph-widget select { max-width: 100%; }
.graph-widget .graph-heading { align-items: center; }
.graph-widget .graph-actions { align-items: center; flex-wrap: wrap; }
.graph-widget .graph-actions .panel-actions { margin-top: 0; }
.panel-actions button, .panel-actions summary { margin: 0; }
@media (max-width: 560px) {
  .panel-help { position: static; }
  .panel-help-content { right: auto; left: 0; width: min(300px, 100%); }
  .panel-actions { gap: 6px; }
  .panel-button { padding-inline: 10px; }
}
@media print { .panel-actions, .panel-help { display: none !important; } }

/* Icon controls keep their names available on hover, focus and to assistive technology. */
.puzzle-actions { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.puzzle-icon-button { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); color: var(--green); cursor: pointer; list-style: none; }
.puzzle-icon-button::-webkit-details-marker { display: none; }
.puzzle-icon-button::marker { content: ''; }
.puzzle-icon-button:not(:disabled):hover, .puzzle-help[open] > summary { border-color: #b6c7b0; background: var(--tint); }
.puzzle-icon-button .icon { display: block; width: 22px; height: 22px; }
.puzzle-icon-button::after { content: attr(data-tooltip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); z-index: 20; width: max-content; max-width: 180px; padding: 5px 9px; border-radius: 5px; background: var(--ink); color: var(--paper); font: 12px/1.5 var(--sans); text-align: center; pointer-events: none; opacity: 0; visibility: hidden; }
.puzzle-icon-button:hover::after, .puzzle-icon-button:focus-visible::after { opacity: 1; visibility: visible; }
.puzzle-actions > :first-child::after { left: 0; transform: none; }
.puzzle-help > summary::after { left: 0; transform: none; }
.puzzle-action-confirm, .is-confirming .puzzle-action-default { display: none; }
.is-confirming .puzzle-action-confirm { display: inline; }
.puzzle-help { display: block; flex: 0 0 44px; }
.puzzle-help-content { position: absolute; top: calc(100% + 10px); left: 0; z-index: 15; width: min(320px, calc(100vw - 32px)); padding: 16px 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); box-shadow: 0 5px 20px #282e2914; color: var(--muted); font-size: 13px; line-height: 1.7; }
.puzzle-help-content p { margin: 0 0 12px; }
.puzzle-help-content p:last-child { margin-bottom: 0; }

.puzzle-icon-button:has(> span:not(.puzzle-action-default):not(.puzzle-action-confirm)) { flex-basis: auto; width: auto; padding-inline: 12px; gap: 7px; }
.puzzle-icon-button::after { display: none; }
.puzzle-icon-button:hover::after, .puzzle-icon-button:focus-visible::after { display: block; }
.hex-game-settings > summary::after { left: auto; right: 0; transform: none; }
.panel-help:not([open]) > .panel-help-content { display: none; }
.puzzle-page .panel-help > summary span { display: none; }
.puzzle-page .panel-help > summary { width: 44px; padding-inline: 10px; }