/*
 * The scan card (#pp-scan): the registry entry of whatever the crosshair has
 * rested on, beside the name js/three/world-tip.js draws for
 * js/three/world-names.js. js/three/scan.js fills it, places it and stands
 * it down; this file draws it.
 *
 * It wears the tip's own box (world-tip.js writes that one inline): the
 * same dark tint, radius and padding, so the two read as one readout. White
 * text on it, the faction's name in the faction's color as text, an icon per
 * row, and no border.
 *
 * WHERE IT STANDS. On a desktop, and anywhere out of flight, scan.js writes
 * left and top: beside the tip, or above the point named where neither side
 * of the tip has room. In flight on a touch screen the thumbs own the
 * bottom corners and the comms ticker and the range readout the bottom
 * middle, so the card stands over the crosshair and the tip stands on the
 * card (world-tip.js writes this same foot). The foot clears the larger of
 * the sight's near ring taken at the middle, which js/three/sight.js draws
 * at 5.5 percent of the frame's half height (2.75vh), and the crosshair's
 * own 26 px mark, by 6 px. MEASURED, the ring stands under the middle (its
 * centre 18.5 px low at 375 by 812, 8.5 at 812 by 375) and stays there
 * while the view is turned, so over the crosshair the mark is what has to be
 * cleared, and on its side the phone has no room to spare for more. MEASURED
 * with a card of three lines and the widest tip the roster makes: at 375 by
 * 812 the card stands at 320.7 to 377.7 and the tip, its note wrapped, at
 * 263.7 to 316.7, under the heat card (foot 239) and left of the counters
 * (from x 289.6); at 812 by 375 the card stands at 111.5 to 168.5 and the
 * tip at 66.5 to 107.5, under the level cards (foot 63.9). There the heat
 * card ends at x 276 and the counters start at x 565, so the card is held to
 * 250 px round the middle.
 *
 * Its rows run one line each on a touch screen and are cut with an ellipsis,
 * so the three lines it is allowed are three rows; on a desktop they wrap
 * and scan.js drops rows until the card is five lines or fewer.
 */

.pp-scan {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 41;
    display: none;
    box-sizing: border-box;
    width: max-content;
    max-width: min(440px, calc(100vw - 32px));
    padding: 7px 12px;
    border-radius: 8px;
    background: rgba(20, 26, 38, 0.92);
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 12px;
    line-height: 16px;
    text-align: left;
    pointer-events: none;
}

.pp-scan.pp-scan-on {
    display: block;
}

/* A row that wraps carries on under its own text, not under its icon. */
.pp-scan-row {
    padding-left: 20px;
    text-indent: -20px;
}

/* The icon keeps its width whether or not the icon font has arrived, so
   the rows measure the same either way. */
.pp-scan-row i {
    display: inline-block;
    width: 14px;
    margin-right: 6px;
    text-indent: 0;
    font-size: 10px;
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
}

.pp-scan-f {
    font-weight: 700;
}

/* Down with whatever the page says is going on, from the frame it happens;
   scan.js adds pp-scan-down for the rest (a page panel, the comms log). The
   tip goes with the card: world-names.js hides it for all of these, but a
   paused run skips the frame it is stepped from, and a shown tip leaves its
   display to the page for these rules. */
.pp-scan.pp-scan-down,
body:not(.pp-3d) .pp-scan,
body.pp-warping .pp-scan,
body.pp-paused .pp-scan,
body.pp-held .pp-scan,
body.pp-arcade .pp-scan,
body.pp-run:not(.pp-expedition) .pp-scan,
body:not(.pp-3d) .pp-world-tip,
body.pp-warping .pp-world-tip,
body.pp-paused .pp-world-tip,
body.pp-held .pp-world-tip,
body.pp-arcade .pp-world-tip,
body.pp-run:not(.pp-expedition) .pp-world-tip {
    display: none;
}

/* ---------------- a touch screen ---------------- */

body.pp-touch-device .pp-scan {
    padding: 6px 10px;
    font-size: 11px;
    line-height: 15px;
}

body.pp-touch-device .pp-scan-row {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

body.pp-touch-device.fly-mode .pp-scan {
    left: 50%;
    top: auto;
    bottom: calc(50% + max(2.75vh, 13px) + 6px);
    transform: translateX(-50%);
}

@media (orientation: landscape) and (max-height: 500px) {
    body.pp-touch-device.fly-mode .pp-scan {
        max-width: 250px;
    }
}