/* Lirio — Kindle-style inline word glosses (ported from mdBook theme) */
.reading { font-size: 1.08rem; line-height: 1.8; }
.reading img { max-width: 100%; height: auto; }

/* Highlighted words wear the same tinted swatch as the reader island
   (the --gloss-* tokens in site.css, which flip with the theme). This markup
   carries no word kind, so every gloss takes the default tint. */
.gloss {
    cursor: pointer;
    position: relative;
    display: inline;
    padding: 1px 5px;
    border-radius: 5px;
    background: var(--gloss-bg);
    color: var(--gloss-ink);
}
.gloss:hover,
.gloss.active {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

/* Paragraph label badge (A, B, C…) for paragraph_match exercises */
.para-label {
    display: inline-block;
    font-family: system-ui, sans-serif;
    font-size: 0.72em;
    font-weight: 700;
    color: var(--ink-soft);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 0 0.4em;
    margin-right: 0.55em;
    vertical-align: 0.12em;
    user-select: none;
}

/* Gloss hidden by the word-level filter: plain text, no tooltip */
.gloss.gloss-off {
    background: none;
    color: inherit;
    padding: 0;
    cursor: inherit;
}
.gloss.gloss-off::before,
.gloss.gloss-off::after { display: none; }

/* Definition bubble */
.gloss::before {
    content: attr(data-def);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    /* --gloss-shift is set by gloss.js to keep the bubble inside the viewport */
    transform: translateX(calc(-50% + var(--gloss-shift, 0px)));
    background: var(--tooltip-bg);
    color: var(--tooltip-ink);
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.78em;
    font-style: italic;
    line-height: 1.4;
    white-space: normal;
    width: max-content;
    max-width: min(220px, calc(100vw - 24px));
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
    z-index: 9999;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}
.gloss::after {
    content: '';
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--tooltip-bg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
    z-index: 9999;
}
.gloss:hover::before, .gloss:hover::after,
.gloss.active::before, .gloss.active::after { opacity: 1; }

/* Not enough room above (e.g. under the sticky audio player): open below */
.gloss.gloss-below::before {
    bottom: auto;
    top: calc(100% + 8px);
}
.gloss.gloss-below::after {
    bottom: auto;
    top: calc(100% + 3px);
    border-top-color: transparent;
    border-bottom-color: var(--tooltip-bg);
}

/* error_spot: clickable tokens */
.ex-tok { cursor: pointer; border-radius: 4px; padding: 0 2px; }
.ex-tok:hover { background: color-mix(in srgb, var(--reading-bg) 30%, transparent); }
.ex-tok.tok-sel { background: var(--reading-bg); color: var(--reading-fg); }
.ex-tok.tok-ok { background: var(--ok-bg); color: var(--ok); }
.ex-tok.tok-bad { background: var(--bad-bg); color: var(--bad); }