/* The no-photo picture on logbook and sightings cards (beta): a route map
   in a box, the class beside it, and the front of the unit's drawing
   underneath. 12px all round and between. Every body is drawn 50px tall,
   roof to rail, with room above for pantographs (the strip is 76px). */
.rfp { padding: 12px; display: flex; flex-direction: column; gap: 12px; background: var(--bg); overflow: hidden; color: inherit; text-decoration: none; }
.rfp-top { display: flex; gap: 12px; align-items: center; }
.rfp-map { width: 112px; height: 112px; flex: none; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #11161d; }
.rfp-map svg { display: block; }
.rfp-txt { flex: 1 1 auto; display: flex; flex-direction: column; gap: 5px; min-width: 0; container-type: inline-size; }
.rfp-hc { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 13px; font-weight: 700; color: #e6edf3; }
/* Boxed like the tags under a photo (feed_cards.php .fb-hc, .fb-unit). */
.rfp-hcbox { padding: 1px 6px; border: 1px solid var(--border); border-radius: 6px; font-weight: 400; color: var(--text); }
.rfp-cls { display: flex; flex-wrap: wrap; gap: 4px; line-height: 1.15;
    /* 26px, or less when a six-digit unit wouldn't fit the narrowest cards */
    font-size: clamp(16px, calc((100cqi - 18px) / 3.7), 26px); }
.rfp-unit { padding: 1px 7px; border: 1px solid rgba(88,166,255,0.5); border-radius: 6px; font-family: var(--mono); font-weight: 700; color: var(--blue); text-decoration: none; }
a.rfp-unit:hover { background: rgba(88,166,255,0.1); }
.rfp-unit-hc { border-color: var(--border); color: var(--text); }
.rfp-cls-long { font-size: 16px; }
.rfp-sub { font-size: 13px; color: var(--dim); }
.rfp-train { position: relative; height: 76px; margin-right: -12px; overflow: hidden; display: flex; align-items: flex-end; }
.rfp-train img { display: block; width: auto; max-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 60%, transparent 92%); mask-image: linear-gradient(90deg, #000 60%, transparent 92%); }
.rfp-credit { font-size: 11px; color: var(--dim); margin-top: -8px; text-decoration: none; align-self: flex-start; }
.rfp-credit:hover { color: var(--text); text-decoration: underline; }
/* With the panel showing, the unit and headcode tags under it go: an empty tag row takes no space. */
.fb-tags:empty { display: none; }