/**
 * @file tooltip.css
 * @author Jouni Miikki
 * SPDX-License-Identifier: MIT
 * @description The tooltip (components/Tooltip.js): a dark block beside a control, its small heading
 *   on the sun, the words, a quiet line under them, and a pointer towards the control. The ground is
 *   the ink ground, which stays dark in the dark theme so the sun heading reads. Reads the theme's
 *   tokens and shape values only (the corner, the action's shadow, the label's case and tracking), so
 *   a theme changes it without CSS of its own.
 *   NOTE: this file must be linked in spa.html.
 * @version-history
 *   v1.0.0 — 2026-10-02 — Initial (wish "Ohjenappi ja vihjeteksti asetuksille").
 */

.tooltip-anchor {
  display: inline-flex;
  align-items: center;
}

.tooltip {
  position: fixed;
  z-index: 1000;
  display: block;
  box-sizing: border-box;
  width: max-content;
  max-width: min(300px, calc(100vw - 16px));
  padding: .7rem .85rem .75rem;
  border-radius: var(--shape-corner);
  background: var(--ink-ground);
  color: var(--on-ink-ground);
  box-shadow: var(--shape-shadow-action);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: 1.5;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
  animation: tooltip-in .12s ease-out;
}
/* The pointer towards the control: a triangle of borders, under the tooltip or above it. */
.tooltip::after {
  content: '';
  position: absolute;
  left: var(--tooltip-arrow, 50%);
  top: 100%;
  margin-left: -7px;
  border: 7px solid transparent;
  border-top-color: var(--ink-ground);
}
.tooltip--below::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--ink-ground);
}
.tooltip-title {
  display: block;
  margin-bottom: .3rem;
  color: var(--sun);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  text-transform: var(--shape-case-label);
  letter-spacing: var(--shape-tracking-label);
}
.tooltip-more {
  display: block;
  margin-top: .45rem;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  opacity: .75;
}
/* The words for a screen reader while the tooltip itself is not shown. */
.tooltip-said {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@keyframes tooltip-in {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tooltip { animation: none; }
}