/* track.css — the public lookup, and it is a map.
   The page is one band of real map tiles with the trip drawn over them, and the whole lookup lives in a small
   card that floats on the map: the field with a lens in it, the button, the answer, the code's own line, and
   the history down a green rail. Below the band, what the book holds besides the journey, behind a button.

   The figures that matter: the map's field is a fixed grid of tiles measured in pixels — TRACK_MAP_W by
   TRACK_MAP_H in server/track-read.php — and the trace and the pins are drawn in that same pixel space, so a
   pin sits on its bend at any width. On a narrow screen the whole field is scaled as one picture, which is
   why nothing drifts there either. The card is HTML on top of it and never scales.

   The colours are the site's: ink #101317, mute #5b6270, hairline #ececef, brand red #d40511, yellow #ffc400,
   the same five status tones the admin book wears. No animation moves the map: where a load stands is a fact
   from the book, and a fact does not need to be shuffled. */

/* ---- one status colour for the band, the pins and the card's own mark ---- */
.t-go       { --tone: #2457a8; --tone-ink: #1d478c; --tone-wash: #eaf1fb; }
.t-transit  { --tone: #ffc400; --tone-ink: #8a6a00; --tone-wash: #fff8e2; }
.t-stop     { --tone: #d40511; --tone-ink: #b8040f; --tone-wash: #fdf0f1; }
.t-arrived  { --tone: #0f766e; --tone-ink: #0d655e; --tone-wash: #e8f5f2; }
.t-done     { --tone: #14683a; --tone-ink: #14683a; --tone-wash: #eef7f1; }

/* ---- the band: a map, edge to edge, with the card over it ---- */
.tr-mapfull { position: relative; overflow: hidden; min-height: clamp(520px, 72vh, 768px);
              background: #e9ebee; border-bottom: 1px solid #ececef; }
.tr-fieldmap { position: absolute; inset: 0; display: grid; place-items: center; }
.tr-tiles { position: relative; }
.tr-tile { position: absolute; width: 256px; height: 256px; display: block; }
.tr-trace { position: absolute; left: 0; top: 0; }
.tr-attr { position: absolute; right: 10px; bottom: 8px; margin: 0; padding: 3px 7px; border-radius: 7px;
           background: rgba(255, 255, 255, .84); font-size: 10.5px; line-height: 1.3; color: #5b6270;
           letter-spacing: -.004em; }
.tr-attr a { color: #101317; text-decoration: underline; text-decoration-color: #ffc400;
             text-decoration-thickness: 2px; text-underline-offset: 2px; }

/* the pins, in the map's own pixels: a dot on the place, and its words on a chip so they read over any tile */
.tr-pins { position: absolute; inset: 0; }
.tr-pin { position: absolute; transform: translate(-50%, -50%); }
.tr-dot { display: block; width: 11px; height: 11px; margin: 0 auto; border-radius: 999px; background: #fff;
          border: 2px solid #a9afb9; box-shadow: 0 2px 6px rgba(16, 19, 23, .35); }
.is-done .tr-dot { border-color: #d40511; }
.tr-pin-from .tr-dot, .tr-pin-to .tr-dot { width: 13px; height: 13px; border-color: #101317; }
.tr-tag { display: block; margin-top: 6px; text-align: center; }
.tr-tag b { display: inline-block; max-width: 190px; font-size: 11.5px; font-weight: 650; letter-spacing: -.006em;
            color: #101317; background: rgba(255, 255, 255, .78); border-radius: 6px; padding: 1px 5px;
            line-height: 1.35; }
.tr-tag em { display: inline-block; margin-top: 2px; font-style: normal; font-size: 10.5px; line-height: 1.3;
             color: #3b4250; background: rgba(255, 255, 255, .7); border-radius: 6px; padding: 1px 4px; }
.tr-pin-to { display: flex; flex-direction: column-reverse; }
.tr-pin-to .tr-tag { margin: 0 0 6px; }
.tr-pin-to .tr-dot { margin: 6px auto 0; }

/* where it stands: the word the job wears, over the place it was put there */
.tr-now { position: absolute; transform: translate(-50%, -158%); padding: 6px 10px 7px; border-radius: 10px;
          background: #101317; white-space: nowrap; box-shadow: 0 16px 32px -18px rgba(16, 19, 23, .85); }
.tr-now b { display: block; font: 600 10px/1.2 ui-monospace, SFMono-Regular, monospace; letter-spacing: .16em;
            text-transform: uppercase; color: var(--tone, #ffc400); }
.tr-now em { display: block; margin-top: 2px; font-style: normal; font-size: 11.5px; line-height: 1.3;
             color: rgba(255, 255, 255, .88); }

/* ---- the map's own controls: the page can be looked at closer or from further, and put back ---- */
.tr-zoom { position: absolute; right: 10px; bottom: 34px; z-index: 3; display: flex; flex-direction: column;
           align-items: flex-end; gap: 8px; }
.tr-zmrow { display: flex; align-items: center; gap: 6px; padding: 5px; border-radius: 15px;
            border: 1px solid rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .62);
            -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
            box-shadow: 0 20px 44px -28px rgba(16, 19, 23, .6); }
.tr-zm { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid #dcdde2;
         background: #fff; color: #101317; font-size: 19px; font-weight: 600; line-height: 1; text-decoration: none;
         transition: background-color .14s, border-color .14s, transform .12s; }
.tr-zm:hover { background: #fbfbfc; border-color: #101317; }
.tr-zm:active { transform: translateY(1px); }
.tr-zm:focus-visible { outline: 2px solid #101317; outline-offset: 2px; }
.tr-zm.is-off { color: #a3a9b4; background: #f6f7f9; border-color: #ececef; cursor: default; }
.tr-zlvl { min-width: 18px; text-align: center; font: 600 11.5px/1 ui-monospace, SFMono-Regular, monospace;
           color: #5b6270; }
.tr-zfit { display: inline-flex; align-items: center; min-height: 34px; padding: 7px 12px; border-radius: 11px;
           background: #101317; color: #fff; font-size: 12.5px; font-weight: 600; text-decoration: none;
           box-shadow: 0 20px 44px -28px rgba(16, 19, 23, .6); transition: background-color .16s, transform .12s; }
.tr-zfit:hover { background: #000; }
.tr-zfit:active { transform: translateY(1px); }
.tr-zfit:focus-visible { outline: 2px solid #101317; outline-offset: 2px; }

/* ---- the map the page can drive: the same trip, dragged and zoomed, when the library answers ---- */
.tr-live { position: absolute; inset: 0; z-index: 2; background: #e9ebee; }
.tr-live[hidden] { display: none; }
.tr-mapfull.is-live { background: #e9ebee; }
.tr-mapfull.is-live .tr-fieldmap, .tr-mapfull.is-live .tr-attr, .tr-mapfull.is-live .tr-zoom { display: none; }
.tr-live .leaflet-container { background: #e9ebee; font: inherit; }
.tr-live .leaflet-bar { border: 1px solid rgba(16, 19, 23, .1); border-radius: 14px; overflow: hidden;
                        box-shadow: 0 20px 44px -28px rgba(16, 19, 23, .6); }
.tr-live .leaflet-bar a { width: 38px; height: 38px; line-height: 38px; border-bottom: 1px solid #ececef;
                          background: rgba(255, 255, 255, .8); color: #101317; font-size: 19px; font-weight: 600; }
.tr-live .leaflet-bar a:hover { background: #fff; color: #000; }
.tr-live .leaflet-bar a.leaflet-disabled { color: #a3a9b4; background: #f6f7f9; }
.tr-live .leaflet-control-attribution { margin: 0 8px 8px 0; padding: 2px 7px; border-radius: 7px;
                                        background: rgba(255, 255, 255, .84); color: #5b6270; font-size: 10.5px; }
.tr-live .leaflet-control-attribution a { color: #101317; }
.tr-live .leaflet-div-icon { background: none; border: 0; }
/* the library sets the marker element on the coordinate, so the dot is centred on that point and the words hang
   off it — the same chips the drawn map uses, measured from the same figure */
.tr-live .tr-pin-live { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.tr-live .tr-pin-live .tr-dot { position: absolute; left: -6px; top: -6px; margin: 0; }
.tr-live .tr-pin-live .tr-tag { position: absolute; left: 0; top: 12px; transform: translateX(-50%);
                                margin: 0; white-space: nowrap; }
.tr-live .tr-pin-to .tr-tag { top: auto; bottom: 14px; }
.tr-live .tr-chip { position: absolute; left: 0; bottom: 16px; transform: translateX(-50%); padding: 5px 9px 6px;
                    border-radius: 9px; background: #101317; white-space: nowrap; text-align: center;
                    box-shadow: 0 16px 32px -18px rgba(16, 19, 23, .85); }
.tr-live .tr-pin-to .tr-chip { bottom: auto; top: 16px; }
.tr-live .tr-chip b { display: block; font: 600 9.5px/1.2 ui-monospace, SFMono-Regular, monospace;
                      letter-spacing: .16em; text-transform: uppercase; color: var(--tone, #ffc400); }

/* ---- the card on the map: the lookup, the answer and the history, in one small box ---- */
/* the card floats over the map, so it hands the map the pointer everywhere the card is not: without this the
   row is a full width sheet laid over the whole band, and a laptop can drag nothing but its own edges */
.tr-over { position: relative; z-index: 3; display: flex; padding: 26px 0 66px; pointer-events: none; }
/* glass, not paper: what the map is showing behind the card stays readable through it, so the box never hides
   the thing you are looking at, it only holds the words over it */
.tr-box { width: min(430px, 100%); align-self: flex-start; padding: 14px 14px 15px; border-radius: 20px;
          pointer-events: auto; border: 1px solid rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .5);
          -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
          box-shadow: 0 34px 74px -42px rgba(16, 19, 23, .62); }
.tr-sr { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%);
         white-space: nowrap; }

.tr-field { display: flex; align-items: center; gap: 9px; padding: 6px 6px 6px 12px; border: 1px solid #dcdde2;
            border-radius: 14px; background: #fff; transition: border-color .16s, box-shadow .18s; }
.tr-field:focus-within { border-color: #101317; box-shadow: 0 0 0 3px rgba(16, 19, 23, .07); }
.tr-lens { position: relative; flex: 0 0 auto; width: 17px; height: 17px; border: 2px solid #7a808c;
           border-radius: 50%; }
.tr-lens::after { content: ""; position: absolute; right: -7px; bottom: -1px; width: 8px; height: 2px;
                  background: #7a808c; border-radius: 2px; transform: rotate(45deg); }
.tr-field input { flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: none; color: #101317;
                  font: 700 15px/1.2 ui-monospace, SFMono-Regular, monospace; letter-spacing: .05em; }
.tr-field input::placeholder { color: #a3a9b4; font-weight: 600; letter-spacing: 0;
                               font-family: inherit; text-transform: none; }
.tr-field input[aria-invalid="true"] { color: #b8040f; }
.tr-field:has(input[aria-invalid="true"]) { border-color: #d40511; box-shadow: 0 0 0 3px rgba(212, 5, 17, .12); }
.tr-go { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; border: 0;
         border-radius: 12px; background: #d40511; cursor: pointer; transition: background-color .16s, transform .14s; }
.tr-go:hover { background: #b8040f; }
.tr-go:active { transform: translateY(1px); }
.tr-go:focus-visible { outline: 2px solid #101317; outline-offset: 2px; }

/* ---- the answer, in the same card, so it cannot be mistaken for nothing ---- */
.tr-res { margin-top: 12px; padding: 12px 13px 13px; border: 1px solid #dcdde2; border-left: 3px solid #c9ccd3;
          border-radius: 13px; background: #fff; }
.tr-res[hidden] { display: none; }
.tr-res.ok  { border-left-color: #14683a; background: #f5faf7; }
.tr-res.bad { border-left-color: #d40511; background: #fffafb; }
.tr-res-h { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.3; letter-spacing: -.022em; color: #101317; }
.tr-res-b { margin: 5px 0 0; font-size: 13px; line-height: 1.55; color: #3b4250; }
.tr-res-b:empty { display: none; }

/* the same glass for what sits inside the card, and it comes after their own rules on purpose: the
   field and the answer are white on their own, translucent here */
.tr-field { background: rgba(255, 255, 255, .66); }
.tr-res { background: rgba(255, 255, 255, .52); }
.tr-res.ok  { background: rgba(245, 250, 247, .6); }
.tr-res.bad { background: rgba(255, 250, 251, .6); }
.tr-res-g { margin: 10px 0 0; }
.tr-res-a { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 8px 13px;
            border-radius: 10px; background: #101317; color: #fff; font-size: 13px; font-weight: 600;
            text-decoration: none; transition: background-color .16s, transform .14s; }
.tr-res-a:hover { background: #000; }
.tr-res-a:active { transform: translateY(1px); }
.tr-res-a:focus-visible { outline: 2px solid #101317; outline-offset: 2px; }
.tr-res-n { margin: 10px 0 0; padding-top: 9px; border-top: 1px solid rgba(16, 19, 23, .09);
            font-size: 11.5px; line-height: 1.5; color: #5b6270; }

/* the code's own line: what it is, the word it wears and the day the book last spoke about it */
.tr-flag { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px; margin: 13px 0 0;
           padding: 9px 11px; border-radius: 12px; background: rgba(255, 255, 255, .5);
           background: color-mix(in srgb, var(--tone-wash, #f7f8fa) 62%, transparent);
           border: 1px solid rgba(255, 255, 255, .55); }
.tr-flag-d { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 999px; background: var(--tone, #c9ccd3);
             box-shadow: 0 0 0 3px rgba(255, 255, 255, .8); }
.tr-flag b { font-size: 13px; letter-spacing: .01em; color: #101317; }
.tr-flag span { font-size: 12px; font-weight: 650; color: var(--tone-ink, #4b5361); }
.tr-flag em { margin-left: auto; font-style: normal; font-size: 11.5px; color: #5b6270; }
.tr-mono { font-family: ui-monospace, SFMono-Regular, monospace; font-weight: 700; letter-spacing: .01em; }

/* ---- the tree: one green rail, a node on every line, the newest at the top; the rail and the quiet nodes
        stay green the way the journey is always drawn, and the node the load actually stands on fills with
        the word the job is wearing and breathes, so the eye lands on the place first ---- */
.tr-hist-k { margin: 15px 0 0; font: 600 10px/1 ui-monospace, SFMono-Regular, monospace; letter-spacing: .2em;
             text-transform: uppercase; color: var(--tone-ink, #7a808c); }
.tr-hist { position: relative; display: grid; margin: 12px 0 0; padding: 0 0 0 1px; list-style: none; }
.tr-hist::before { content: ""; position: absolute; left: 13px; top: 12px; bottom: 14px; width: 2px;
                   border-radius: 2px; background: #14683a; } /* full green, not a faded one: the trip ran */
.tr-line { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0 11px;
           padding: 0 0 14px; }
.tr-line:last-child { padding-bottom: 1px; }
.tr-mark { position: relative; z-index: 1; display: grid; place-items: center; margin-top: 2px;
           width: 28px; height: 28px; border-radius: 999px;
           background: #14683a; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(20, 104, 58, .5); }
/* the mark has to survive being the size of a grain of rice: a 17px glyph with a stroke weighted up
   from the hairline sl_icon ships at, so it reads on the node and not just beside it */
.tr-mark svg { width: 18px; height: 18px; color: #fff; stroke-width: 2.3; }
/* a node whose line moved the job wears that status's colour; the rail between stays green all the way */
.tr-line.t-go .tr-mark, .tr-line.t-transit .tr-mark, .tr-line.t-stop .tr-mark,
.tr-line.t-arrived .tr-mark, .tr-line.t-done .tr-mark { background: var(--tone); border-color: #fff;
           box-shadow: 0 0 0 1px color-mix(in srgb, var(--tone) 52%, #fff); }
/* white on gold reads as nothing, so the transit node's mark goes dark inside the same gold */
.tr-line.t-transit .tr-mark svg { color: #4d3900; }
.tr-line.is-now .tr-mark { background: var(--tone, #d40511); border-color: #fff;
                           box-shadow: 0 0 0 1px color-mix(in srgb, var(--tone, #d40511) 45%, transparent),
                                        0 0 0 4px color-mix(in srgb, var(--tone, #d40511) 15%, transparent); }
.tr-line.is-now .tr-mark::after { content: ""; position: absolute; inset: -2px; border-radius: 999px;
                                  border: 2px solid var(--tone, #d40511); opacity: 0;
                                  animation: tr-now-ping 2.2s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes tr-now-ping { 0% { transform: scale(1); opacity: .5; }
                         70% { opacity: 0; }
                         100% { transform: scale(2.7); opacity: 0; } }
.tr-line.is-now .tr-line-h { color: var(--tone-ink, #101317); }
.tr-line-h { margin: 0; font-size: 13.5px; font-weight: 600; letter-spacing: -.012em; line-height: 1.35; color: #101317; }
.tr-line-m { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 3px 0 0;
             font-size: 12px; line-height: 1.45; color: #5b6270; }
.tr-line-m b { font-weight: 650; color: #101317; }
.tr-line-m b svg { vertical-align: -2px; margin-right: 4px; color: #7a808c; stroke-width: 1.9; }
.tr-when svg { vertical-align: -2px; margin-right: 4px; color: #a9afb9; stroke-width: 1.9; }
.tr-line-d { margin: 5px 0 0; font-size: 12.5px; line-height: 1.5; color: #3b4250; }
.tr-line-n { font: 600 9.5px/1 ui-monospace, SFMono-Regular, monospace; letter-spacing: .14em;
             text-transform: uppercase; font-style: normal; color: #14683a; }
.tr-empty { margin: 12px 0 0; font-size: 13px; line-height: 1.55; color: #5b6270; }
.tr-card-f { display: flex; align-items: center; gap: 9px; margin: 13px 0 0; padding-top: 11px;
             border-top: 1px solid rgba(16, 19, 23, .08); font-size: 12px; font-weight: 600; color: #101317; }
.tr-card-f span { min-width: 0; display: inline-flex; align-items: center; gap: 4px; }
.tr-card-f svg { stroke-width: 1.9; }
.tr-card-f span:first-child svg { color: #d40511; }
.tr-card-f span:last-child svg { color: #14683a; }
.tr-way { flex: 1 1 auto; height: 2px; border-radius: 2px;
          background: repeating-linear-gradient(90deg, #c9ccd3 0 5px, transparent 5px 9px); }

/* ---- what the book holds besides the journey, behind a button ---- */
.tr-more { margin-top: 4px; }
.tr-more-b { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 12px 18px;
             border: 1px solid #dcdde2; border-radius: 12px; background: #fff; color: #101317; cursor: pointer;
             font-size: 14px; font-weight: 650; letter-spacing: -.014em; list-style: none;
             transition: border-color .16s, background-color .16s, transform .14s; }
.tr-more-b::-webkit-details-marker { display: none; }
.tr-more-b:hover { border-color: #101317; background: #fbfbfc; }
.tr-more-b:active { transform: translateY(1px); }
.tr-more-b:focus-visible { outline: 2px solid #101317; outline-offset: 2px; }
.tr-more-c { width: 9px; height: 9px; border-right: 2px solid #5b6270; border-bottom: 2px solid #5b6270;
             transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s ease; }
.tr-more[open] .tr-more-c { transform: rotate(225deg) translate(-2px, -2px); }
.tr-more .tr-grid { margin-top: 14px; }
.tr-more .tr-foot-n { margin-top: 16px; }
.tr-call { margin: 18px 0 0; }

.tr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 4px;
           border: 1px solid #ececef; border-radius: 18px; overflow: hidden; background: #ececef; }
.tr-cell { padding: 15px 16px 17px; background: #fff; }
.tr-cell-wide { grid-column: span 2; }
.tr-f { margin: 0; display: flex; align-items: center; gap: 6px;
        font: 600 10px/1 ui-monospace, SFMono-Regular, monospace; letter-spacing: .18em;
        text-transform: uppercase; color: #7a808c; }
.tr-f svg { flex: 0 0 auto; color: #8f96a3; stroke-width: 1.9; }
.tr-hist-k { display: flex; align-items: center; gap: 6px; }
.tr-hist-k svg { color: #7a808c; stroke-width: 1.9; }
.tr-v { margin: 8px 0 0; font-size: 15.5px; font-weight: 600; line-height: 1.35; letter-spacing: -.016em;
        color: #101317; }
.tr-x { margin: 5px 0 0; font-size: 13px; line-height: 1.55; color: #5b6270; }
.tr-foot-n { margin: 0; max-width: 64ch; font-size: 12.5px; line-height: 1.55; color: #5b6270; }
.tr-foot-c { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 11px 16px;
             border-radius: 11px; background: #d40511; color: #fff; font-size: 13.5px; font-weight: 600;
             text-decoration: none; white-space: nowrap; transition: background-color .16s, transform .14s; }
.tr-foot-c:hover { background: #b8040f; }
.tr-foot-c:active { transform: translateY(1px); }
.tr-foot-c:focus-visible { outline: 2px solid #101317; outline-offset: 2px; }

@media (min-width: 900px) {
  .tr-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tr-cell-wide { grid-column: span 2; }
  .tr-over { padding: 34px 0 84px; }
  .tr-tag b { max-width: 220px; }
}
/* the map is a picture on a small screen and the card is the page: the field scales as one piece, so the pins
   and the trace keep their place on it, while the card stays full width and unscaled */
/* the field is 1792 x 768 of map; below that the whole field is scaled as one picture, so the pins and the
   trace keep their place on it while the card stays crisp and full width */
/* a narrow screen stacks the two instead of overlapping them: the map is a band you can drag, the card sits
   under it, and nothing the trip was written at is ever behind the box */
@media (max-width: 1100px) {
  .tr-mapfull { min-height: 0; }
  .tr-fieldmap, .tr-live { position: relative; inset: auto; height: 296px; }
  .tr-tiles { transform: translateX(-90px) scale(.62); }
  .tr-attr, .tr-zoom { top: 252px; bottom: auto; }
  .tr-over { padding: 14px 0 26px; }
  .tr-tag b { max-width: 128px; }           /* named stops on a pocket map: the chips narrow, never vanish */
  .tr-tag em { max-width: 128px; }
}
@media (max-width: 700px) {
  .tr-zm { width: 34px; height: 34px; font-size: 17px; }
  .tr-fieldmap, .tr-live { height: 250px; }
  .tr-tiles { transform: translateX(-60px) scale(.44); }
  .tr-attr, .tr-zoom { top: 206px; }
  .tr-box { padding: 12px 12px 13px; border-radius: 17px; }
  .tr-cell-wide, .tr-cell { grid-column: span 2; }
}
@media (prefers-reduced-motion: reduce) {
  .tr-line.is-now .tr-mark::after { animation: none; opacity: .28; transform: scale(1.7); }
  .tr-go, .tr-res-a, .tr-foot-c, .tr-more-b, .tr-field { transition: none; }
  .tr-more-c { transition: none; }
}
/* a printed tracking page is read, not driven: the card and the sheet, none of the tiles */
@media print {
  .tr-mapfull { min-height: 0; }
  .tr-fieldmap, .tr-attr, .tr-zoom, .tr-live { display: none; }
  .tr-over { padding: 0; }
  .tr-box { width: 100%; border: 0; box-shadow: none; background: none; -webkit-backdrop-filter: none;
            backdrop-filter: none; }
  .tr-go, .tr-more-b { display: none; }
}