/* "What is this number?" chrome: the dotted affordance, the hover tooltip and the detail card.
   Paired with Scripts/metric-help.js.

   Colours come from the game tokens when the page defines them (--game-panel / --bf-* on /Game/*)
   and fall back to a neutral dark card everywhere else, so one stylesheet serves the game, the
   portal and the office screens without a per-host variant. */

/* The affordance appears only after the script has confirmed an article exists, hence the
   data-metric-state="ok" gate rather than styling [data-metric] directly. */
[data-metric][data-metric-state="ok"] {
    cursor: help;
    border-bottom: 1px dotted currentColor;
    text-decoration: none;
}
[data-metric][data-metric-state="ok"]:hover,
[data-metric][data-metric-state="ok"]:focus {
    border-bottom-style: solid;
    outline: none;
}

.mhelp-tip {
    position: fixed;
    z-index: 12000;
    max-width: 280px;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--game-panel, #1e1408);
    color: var(--game-text, #f3e6c8);
    border: 1px solid var(--game-border-bright, #6f4824);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    font-size: 12px;
    line-height: 1.4;
    opacity: 0;
    pointer-events: none;      /* never eat the hover that opened it */
    transition: opacity 0.12s ease;
}
.mhelp-tip.is-on { opacity: 1; }
.mhelp-tip-h { font-weight: 700; margin-bottom: 3px; }
.mhelp-tip-b { opacity: 0.92; }
.mhelp-tip-f { margin-top: 5px; font-size: 11px; opacity: 0.6; }
.mhelp-unit { font-weight: 400; opacity: 0.7; font-size: 0.9em; }

.mhelp-card-wrap {
    position: fixed; inset: 0;
    z-index: 12001;
    display: none;
    align-items: center; justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.45);
}
.mhelp-card-wrap.is-on { display: flex; }
.mhelp-card {
    position: relative;
    width: 100%; max-width: 460px;
    max-height: 82vh; overflow: auto;
    padding: 18px 20px 20px;
    border-radius: 10px;
    background: var(--game-panel, #1e1408);
    color: var(--game-text, #f3e6c8);
    border: 1px solid var(--game-border-bright, #6f4824);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
    font-size: 13px; line-height: 1.5;
}
.mhelp-close {
    position: absolute; right: 8px; top: 6px;
    background: none; border: 0; cursor: pointer;
    color: inherit; opacity: 0.6;
    font-size: 22px; line-height: 1;
}
.mhelp-close:hover { opacity: 1; }
.mhelp-card-h {
    font-size: 16px; font-weight: 700;
    margin-bottom: 6px; padding-right: 24px;
    font-family: var(--game-display, inherit);
}
.mhelp-card-h i { color: var(--game-accent-2, #caa14f); }
.mhelp-card-s { opacity: 0.92; margin-bottom: 12px; }
.mhelp-sec { margin-top: 12px; }
.mhelp-sec-h {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
    opacity: 0.65; margin-bottom: 4px;
}
.mhelp-sec ul { margin: 0; padding-left: 18px; }
.mhelp-sec li { margin: 2px 0; }
/* Direction is carried by the bullet colour, so a player scanning the card can tell "makes it grow"
   from "makes it shrink" without reading. */
.mhelp-up   li::marker { color: #6dd66d; }
.mhelp-down li::marker { color: #ef5350; }
.mhelp-aff  li::marker { color: var(--game-accent-2, #caa14f); }
.mhelp-lim  li::marker { color: #90a4ae; }
.mhelp-formula {
    padding: 6px 8px; border-radius: 5px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
}
.mhelp-links { display: flex; flex-wrap: wrap; gap: 8px; }
.mhelp-links a {
    color: var(--game-accent, #3ddc97);
    text-decoration: none;
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12px;
}
.mhelp-links a:hover { filter: brightness(1.15); }

/* Light hosts (the portal and the office screens) - the card inherits nothing from a game palette
   there, so give it one that is legible on white. */
body:not(.game-body):not(.gr-body) .mhelp-tip,
body:not(.game-body):not(.gr-body) .mhelp-card {
    background: #ffffff;
    color: #1a2a44;
    border-color: #d5dce6;
}
body:not(.game-body):not(.gr-body) .mhelp-formula {
    background: #f4f6f9;
    border-color: #e1e6ee;
}

@media (max-width: 520px) {
    .mhelp-card { max-width: 100%; padding: 16px; }
}