/* Rich hover tooltips: the styled card the floating engine (js/rich-tip.js) positions beside a [data-tip]
   trigger, and the hidden [data-tip-def] content blocks it clones from. The card matches the app's reading
   chrome (card bg, hairline border, soft shadow — cf. rules.css); each tip carries an accent, an icon and an
   optional row of chips (tile swatches, penalties, bonuses). See docs/design/rules-reference.md. */

/* Authored content lives hidden in the DOM until the engine clones it into the floating card. */
.tip-defs { display: none; }

/* ── The floating card ── */
.rich-tip {
    position: fixed;
    left: 0;
    top: 0;
    z-index: var(--z-tip);                 /* above the board and its chrome, below the rules reading panel (70) */
    max-width: min(19rem, 92vw);
    padding: 0.6rem 0.7rem;
    border-radius: 0.7rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
    pointer-events: none;        /* never intercept the board underneath */
    opacity: 0;
    transform: translateY(3px);
    transition: opacity 0.14s ease, transform 0.14s ease;
}

.rich-tip--on {
    opacity: 1;
    transform: none;
}

/* A little diamond pointing at the trigger; its side depends on whether the card sits above or below. */
.rich-tip::after {
    content: "";
    position: absolute;
    left: var(--arrow-x, 50%);
    width: 10px;
    height: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    transform: translateX(-50%) rotate(45deg);
}

.rich-tip[data-place="top"]::after {
    bottom: -5px;
    border-top: none;
    border-left: none;
}

.rich-tip[data-place="bottom"]::after {
    top: -5px;
    border-bottom: none;
    border-right: none;
}

/* ── Card content ── */
/* The tip's accent is what its heading and icon glyph are *set in*, so it is an ink and not a fill: the blue
   as ink is the platform default here. Every caller sets --tip-accent inline on its own .tip (RuleTip,
   TurnBanner), and an inline custom property beats this rule, so the callers carry the same discipline — each
   names an -ink twin. This declaration is what a caller that states nothing lands on. */
.tip {
    --tip-accent: var(--accent-blue-ink);
}

.tip__head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.3rem;
}

/* The icon slot beside a tip's heading. It holds an <AppIcon> glyph, which sizes itself off the slot's
   font-size and takes its colour from it — tinting to the tip's own accent is the whole reason a mask beats a
   character here, since one drawing then reads on every accent a game assigns. */
.tip__icon {
    display: inline-flex;
    font-size: 1rem;
    line-height: 1;
    color: var(--tip-accent);
}

.tip__title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--tip-accent);
}

.tip__body {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

.tip__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.5rem;
}

/* A labelled pill — penalties read red, bonuses read gold; the default sits on the hover surface. */
.tip-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.08rem 0.4rem;
    border-radius: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
}

/* A penalty and a bonus chip read as ink on the card's pale hover fill, so both take the -ink twin of their
   accent rather than the fill hue: --stage-loss is a stage colour painted over board art with a text-shadow,
   and the bare gold is a fill. Each ink is mixed toward --text-primary, which the table scope redeclares, so
   the chips darken on the tooltip's white card and lighten wherever the card sits on the shell's navy. */
.tip-chip--pen { color: var(--accent-red-ink); }
.tip-chip--bonus { color: var(--accent-gold-ink); }

/* A small colour sample sized down to sit in the tooltip chip row; the fill colour comes from the game. Scoped
   under the tip containers (the floating hover card, the pinned inspect card, and the hidden source defs) so
   this sizing beats the game's own tile rule (which the swatch also carries, for the fill) regardless of
   stylesheet load order. */
.rich-tip .tip-swatch,
.rules-inspect-card .tip-swatch,
.tip-defs .tip-swatch {
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 0.25rem;
    flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
    .rich-tip { transition: none; }
}