/* THE APP'S ONE TOOLTIP (js/tip.js): a small card in the BoardUI look, in
   the theme's own colours, so a hover reads the same in Light, Dusk, Dark and
   Professional.

   "Tooltips across the app ... we need hovers way more in theme and
   readable/formatted ... proper wrapping" (2026-11-08). The browser's own tip
   is one long grey line in the system font: the Finance page's labor bars
   gave a sentence of figures on one line. This card wraps at about 280px, and
   a structured tip (a title, then label : value rows) puts each figure on its
   own row with the numbers right-aligned.

   TOKENS ONLY: every colour is a palette token every theme defines
   (tests/test_tooltips_are_themed.py), so nothing here falls back to a light
   colour in a dark theme.

   MOTION: 160 ms opacity and a 4px lift; none under reduced motion. */
.zt {
    position: fixed; inset: auto; top: 0; left: 0; margin: 0; overflow: visible; height: auto; z-index: 2147483000;
    box-sizing: border-box; max-width: min(280px, calc(100vw - 16px)); width: max-content;
    padding: 8px 11px; border-radius: 12px;
    background: var(--card-bg); color: var(--text);
    border: 1px solid var(--border); box-shadow: var(--shadow-lift);
    font: 400 13px/1.4 var(--font-body); letter-spacing: normal; text-align: left;
    white-space: normal; overflow-wrap: anywhere; pointer-events: none;
    --zt-lift: 4px; opacity: 0; transform: translateY(var(--zt-lift));
    transition: opacity 160ms ease-out, transform 160ms ease-out;
}
.zt.is-below { --zt-lift: -4px; }
.zt.is-on { opacity: 1; transform: none; }
.zt[hidden] { display: none; }
/* A plain tip: the title's sentence, wrapped. Line breaks in it are kept. */
.zt-p { margin: 0; white-space: pre-line; }
/* A structured tip: a bold title line, an optional quiet sub line (routes),
   then the rows, then a quiet note. */
.zt-h { display: block; font-weight: 600; font-size: 13.5px; line-height: 1.3; }
.zt-sub { display: block; margin-top: 1px; color: var(--text-muted); font-size: 12.5px; }
.zt-rows { display: grid; grid-template-columns: auto auto; column-gap: 16px; row-gap: 3px;
    margin: 6px 0 0; padding: 6px 0 0; border-top: 1px solid var(--border); }
.zt-rows > div { display: contents; }
.zt-rows dt { color: var(--text-muted); font-weight: 400; margin: 0; }
.zt-rows dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zt-rows .is-bad dd { color: var(--red); }
.zt-rows .is-good dd { color: var(--green); }
.zt-rows .is-warn dd { color: var(--orange); }
/* Status chips (PT'd, Rescuer, Should PT) under the rows. */
.zt-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.zt-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
    background: var(--gray-bg); color: var(--text); }
.zt-tag.is-bad { background: var(--red-bg); color: var(--red); }
.zt-tag.is-good { background: var(--green-bg); color: var(--green); }
.zt-tag.is-warn { background: var(--orange-bg); color: var(--orange); }
.zt-note { display: block; margin-top: 6px; color: var(--text-muted); font-size: 12.5px; }
/* The source of a structured tip sits in the page as a <template>; never drawn. */
template[data-tip] { display: none; }
@media (prefers-reduced-motion: reduce) {
    .zt { transition: none; transform: none; }
}