/* ---------------------------------------------------------------------------
   The NavLogic app, rebuilt in HTML. Used in place of product screenshots on
   the freight-management-software page and the product page.
   Each mock is laid out at a fixed "window" size (data-aw × data-ah on
   .nl-view, in px) like a real browser window, then nl-app.js scales it to
   the width of its frame, so it keeps real app proportions.
   - transform: scale() rather than `zoom`: with zoom the text's real size
     becomes ~7px, and browsers with a minimum-font-size setting enlarge it
     while the boxes stay small, breaking the layout.
   - Everything is drawn at 2× (a 2080px-wide window, smallest text 18px) and
     scaled down twice as far, so no text is ever small enough for that
     setting to touch. On screen it looks the same.
   - Below 480px of frame the compact layout drops the sidebar.
   - Motion is gated by .nl-motion on <html> (set by nl-app.js); without it,
     or without JS, the mocks are still frames.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
}
.nl-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.nl-view { --aw: 2080; --ah: 1560; position: relative; overflow: hidden; height: 520px; background: #f6f7f9; }
.nl-app {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: calc(var(--aw) * 1px);
  height: calc(var(--ah) * 1px);
  transform: scale(var(--s, .3));
  transform-origin: 0 0;
  background: #f6f7f9;
  color: #1f2633;
  font: 400 26px/1.4 'Inter', 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: 0;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.nl-app svg { display: inline-block; flex: none; width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nl-app b { font-weight: 600; }
.nl-app small, .nl-app em, .nl-app i { font-style: normal; }

/* --- sidebar ---------------------------------------------------------------- */
.nl-side { flex: 0 0 392px; padding: 36px 20px; background: #0f1a2c; overflow: hidden; }
.nl-rq .nl-side { flex-basis: 356px; }
/* (the page's old screenshot rule `.real-ui-frame img` would stretch the logo) */
.nl-view .nl-side img { width: 248px; min-height: 0; height: auto; margin: 0 16px 36px; object-fit: contain; }
.nl-side nav { display: grid; gap: 4px; }
.nl-side nav > span { display: flex; align-items: center; gap: 20px; height: 62px; padding: 0 22px; border-radius: 14px; color: #d3d9e3; font-size: 25px; white-space: nowrap; }
.nl-side nav > .on { background: #e0702f; color: #fff; font-weight: 500; }
.nl-side nav > .sub { padding-left: 66px; color: #aeb8c8; font-size: 24px; }
.nl-side .chev { width: 24px; height: 24px; margin-left: auto; opacity: .7; }
.nl-side em { margin-left: auto; padding: 2px 14px; border-radius: 18px; background: #ffffff1f; color: #fff; font-size: 21px; font-weight: 600; }
.nl-side .on em { background: #fff; color: #e0702f; }

/* --- page chrome ------------------------------------------------------------ */
.nl-main { display: flex; flex: 1; flex-direction: column; gap: 28px; min-width: 0; padding: 44px 52px; overflow: hidden; }
.nl-head { display: flex; flex: none; justify-content: space-between; align-items: flex-start; gap: 40px; }
.nl-head h4 { margin: 0; color: #111827; font-size: 44px; font-weight: 650; letter-spacing: -.02em; }
.nl-head p { margin: 8px 0 0; color: #6b7280; font-size: 25px; }
.nl-tools { display: flex; align-items: center; gap: 20px; color: #6b7280; font-size: 23px; white-space: nowrap; }
.nl-tools b { color: #4b5563; font-weight: 500; font-variant-numeric: tabular-nums; }
.nl-date { display: flex; align-items: center; gap: 28px; padding: 16px 20px; border: 2px solid #e3e6eb; border-radius: 14px; background: #fff; color: #a0a7b4; }
.nl-date svg { width: 26px; height: 26px; }
.nl-ibtn { display: grid; place-items: center; width: 64px; height: 64px; border: 2px solid #e3e6eb; border-radius: 14px; background: #fff; color: #4b5563; }
.nl-refresh.is-spin svg { animation: nl-spin .7s cubic-bezier(.3, 0, .2, 1); }
@keyframes nl-spin { to { transform: rotate(360deg); } }
.nl-seg { display: flex; overflow: hidden; border: 2px solid #e3e6eb; border-radius: 16px; background: #fff; font-size: 23px; }
.nl-seg span, .nl-seg b { padding: 14px 24px; }
.nl-seg span { color: #6b7280; }
.nl-seg b { border-left: 2px solid #e3e6eb; color: #1f2633; }

.nl-card { flex: none; overflow: hidden; border: 2px solid #e7e9ee; border-radius: 20px; background: #fff; }
.nl-card-h { display: flex; justify-content: space-between; align-items: center; padding: 22px 32px; border-bottom: 2px solid #eef0f3; }
.nl-card-h b { color: #374151; font-size: 27px; }
.nl-card-h span { display: flex; align-items: center; gap: 12px; color: #9aa1ad; font-size: 22px; }
.nl-live { width: 12px; height: 12px; border-radius: 50%; background: #22a06b; box-shadow: 0 0 0 6px #22a06b26; }

/* icon tiles */
.nl-app i[class^="t-"] { display: grid; flex: none; place-items: center; width: 60px; height: 60px; border-radius: 14px; }
.t-or { background: #fdeee5; color: #e0702f; }
.t-gray { background: #f1f2f4; color: #6b7280; }
.t-blue { background: #eaf0fb; color: #4f74c8; }
.t-teal { background: #e5f3f1; color: #3b8f86; }
.t-green { background: #e8f4ea; color: #3f8f4c; }
.t-violet { background: #f0ecfa; color: #7c63c4; }
.t-red { background: #fdeceb; color: #d0473c; }

/* --- dashboard -------------------------------------------------------------- */
.nl-stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.nl-stats.c3 { grid-template-columns: repeat(3, 1fr); }
.nl-stats + .nl-stats { border-top: 2px solid #eef0f3; }
.nl-stat { display: flex; gap: 24px; min-width: 0; padding: 32px; border-right: 2px solid #eef0f3; }
.nl-stat:last-child { border-right: 0; }
.nl-stat.w2 { grid-column: span 2; }
.nl-stat > div { min-width: 0; }
.nl-stat small { display: block; color: #6b7280; font-size: 24px; font-weight: 500; }
.nl-stat b { display: block; margin-top: 6px; color: #2b3240; font-size: 50px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; transition: color .6s; }
.nl-stats.sm .nl-stat b { margin-top: 14px; font-size: 40px; }
.nl-stat b.red { color: #d0473c; }
.nl-stat em { display: block; overflow: hidden; margin-top: 4px; color: #a0a7b4; font-size: 21px; white-space: nowrap; text-overflow: ellipsis; }
.nl-app .is-bump { color: #e0702f; animation: nl-bump .5s cubic-bezier(.2, .7, .2, 1); }
@keyframes nl-bump { from { opacity: .2; transform: translateY(12px); } }

.nl-split { display: grid; grid-template-columns: 1fr 1fr; }
.nl-split > div { padding: 28px 32px; }
.nl-split > div + div { border-left: 2px solid #eef0f3; }
.nl-sub { display: flex; justify-content: space-between; margin: 0 0 16px; font-size: 24px; }
.nl-sub b { color: #374151; }
.nl-sub span { color: #4f74c8; font-size: 22px; }
.nl-bar { display: grid; grid-template-columns: 184px 1fr 88px; align-items: center; gap: 24px; height: 50px; margin: 0; color: #6b7280; font-size: 23px; }
.nl-bar i { height: 10px; overflow: hidden; border-radius: 6px; background: #eef0f3; }
.nl-bar s { display: block; width: var(--w); height: 100%; border-radius: 6px; background: #e9a27c; }
.nl-bar.m s { background: #86b5b0; }
.nl-bar b { color: #374151; text-align: right; font-variant-numeric: tabular-nums; }
/* bars fill in when the dashboard first comes into view */
.nl-motion .nl-dash:not(.is-live) .nl-bar s { transform: scaleX(0); }
.nl-motion .nl-bar s { transform-origin: left; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1) calc(var(--k) * .07s + .2s); }

/* --- review queue ------------------------------------------------------------ */
.nl-rq .nl-head h4 { margin-top: 8px; }
.nl-kpis { display: grid; flex: none; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.nl-kpi { display: flex; gap: 24px; padding: 24px 28px; border: 2px solid #e7e9ee; border-radius: 20px; background: #fff; }
.nl-kpi small { display: block; color: #6b7280; font-size: 23px; font-weight: 500; }
.nl-kpi b { display: block; color: #1f2633; font-size: 40px; font-weight: 650; line-height: 1.3; font-variant-numeric: tabular-nums; }
.nl-kpi em { color: #9aa1ad; font-size: 21px; }

.rq { display: grid; flex: 1; grid-template-columns: minmax(0, 1fr) 536px; gap: 24px; min-height: 0; }
.rq > .nl-card { display: flex; flex-direction: column; min-height: 0; }
.rq-rows { flex: 1; min-height: 0; overflow: hidden; }
.rq-cols, .rq-row { display: grid; grid-template-columns: 132px 212px minmax(0, 1fr) 120px 248px 156px; align-items: center; column-gap: 16px; padding: 0 24px; }
.rq-cols { flex: none; height: 64px; border-bottom: 2px solid #eef0f3; background: #fafbfc; color: #9aa1ad; font-size: 19px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.rq-row { position: relative; height: 84px; overflow: hidden; border-bottom: 2px solid #f0f1f4; color: #4b5563; font-size: 23px; transition: background .3s, height .45s cubic-bezier(.6, 0, .2, 1), opacity .3s; }
.rq-row > * { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rq-row > b { color: #1f2633; }
.rq-row > em { color: #b0602c; font-weight: 600; }
.rq-row.is-sel { background: #fdf3ec; }
.rq-row.is-sel::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 6px; background: #e0702f; }
.rq-row.is-gone { height: 0; border-bottom-width: 0; opacity: 0; }
.rq-row.is-new { animation: rq-new .7s cubic-bezier(.2, .7, .2, 1); }
@keyframes rq-new { from { background: #fdf3ec; opacity: 0; transform: translateY(20px); } }
.nl-pill { display: inline-block; padding: 6px 14px; border-radius: 10px; font-size: 19px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.p-review, .p-ready { background: #fdeee5; color: #c45f24; }
.p-draft { background: #eaf0fb; color: #3d63b8; }
.p-sent, .p-posted { background: #e6f4ea; color: #2e8a4f; }
.rq-foot { display: flex; flex: none; justify-content: space-between; align-items: center; padding: 18px 24px; border-top: 2px solid #eef0f3; color: #9aa1ad; font-size: 22px; }
.nl-pager { display: flex; gap: 8px; }
.nl-pager span { display: grid; place-items: center; min-width: 44px; height: 44px; border: 2px solid #e3e6eb; border-radius: 10px; color: #6b7280; font-size: 21px; }
.nl-pager .on { border-color: #e0702f; background: #e0702f; color: #fff; }

.rd-swap { flex: 1; min-height: 0; overflow: hidden; transition: opacity .22s; }
.rd-swap.is-out { opacity: 0; }
.rd-h { display: flex; justify-content: space-between; align-items: center; padding: 22px 28px; border-bottom: 2px solid #eef0f3; }
.rd-h b { font-size: 26px; }
.rd-b { padding: 0 28px; }
.rd-label { display: block; margin: 22px 0 2px; color: #9aa1ad; font-size: 19px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.rd-id { font-size: 28px; font-weight: 650; }
.rd-grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 18px; border: 2px solid #eef0f3; border-radius: 16px; }
.rd-grid div { min-width: 0; padding: 12px 20px; }
.rd-grid div:nth-child(odd) { border-right: 2px solid #eef0f3; }
.rd-grid div:nth-child(-n+2) { border-bottom: 2px solid #eef0f3; }
.rd-grid small { color: #9aa1ad; font-size: 18px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.rd-grid b { display: block; overflow: hidden; font-size: 23px; white-space: nowrap; text-overflow: ellipsis; }
.rd-draft { margin-top: 18px; padding: 18px 20px; border: 2px solid #eef0f3; border-radius: 16px; background: #fafbfc; color: #4b5563; font-size: 21px; }
.rd-draft p { overflow: hidden; margin: 0 0 10px; white-space: nowrap; text-overflow: ellipsis; }
.rd-draft .t { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid #eef0f3; color: #1f2633; font-size: 22px; font-weight: 600; }
.rd-draft .t svg { width: 26px; height: 26px; }
.rd-file { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border: 2px solid #f1d5c4; border-radius: 10px; background: #fff; color: #c45f24; font-size: 20px; font-weight: 500; }
.rd-file svg { width: 24px; height: 24px; }
.rd-act { margin-top: 18px; border: 2px solid #eef0f3; border-radius: 16px; }
.rd-act > p { margin: 0; padding: 14px 20px; border-bottom: 2px solid #eef0f3; background: #fafbfc; font-size: 22px; font-weight: 600; }
.rd-act ol { margin: 0; padding: 10px 20px; }
.rd-act li { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; column-gap: 16px; padding: 4px 0; }
.rd-act li svg { width: 30px; height: 30px; color: #2e8a4f; }
.rd-act li b { font-size: 22px; }
.rd-act li small { color: #9aa1ad; font-size: 19px; }
/* the activity trail ticks in when a record opens */
.nl-motion .rd-act li { transition: opacity .3s, transform .3s; transition-delay: calc(var(--i) * .14s + .1s); }
.nl-motion .rd-swap:not(.is-ready) .rd-act li { opacity: 0; transform: translateX(-5px); transition: none; }
.rd-foot { display: flex; flex: none; justify-content: flex-end; gap: 16px; padding: 20px 28px; border-top: 2px solid #eef0f3; }
.nl-btn { display: inline-flex; align-items: center; gap: 12px; height: 58px; padding: 0 24px; border: 2px solid #e3e6eb; border-radius: 12px; background: #fff; color: #374151; font-size: 22px; font-weight: 600; transition: background .25s, border-color .25s, transform .12s, filter .12s; }
.nl-btn.pri { border-color: #e0702f; background: #e0702f; color: #fff; }
.nl-btn.is-press { filter: brightness(.9); transform: scale(.95); }
.nl-btn.is-done { border-color: #2e8a4f; background: #2e8a4f; }

/* the operator's cursor */
.nl-cursor { display: none; }
.nl-motion .nl-cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  display: block;
  width: 36px;
  height: 44px;
  opacity: 0;
  pointer-events: none;
  transform: translate(var(--cx, 1520px), var(--cy, 1280px));
  transition: transform .8s cubic-bezier(.45, .05, .2, 1), opacity .4s;
}
.nl-motion .nl-cursor.on { opacity: 1; }
.nl-cursor svg { position: relative; z-index: 1; width: 36px; height: 44px; fill: #111827; stroke: #fff; stroke-width: 1.3; stroke-linejoin: round; filter: drop-shadow(0 4px 6px #0000004d); }
.nl-cursor::after { content: ""; position: absolute; top: -9px; left: -9px; width: 40px; height: 40px; border-radius: 50%; background: #e0702f66; opacity: 0; }
.nl-cursor.is-click::after { animation: nl-click .5s ease-out; }
@keyframes nl-click { from { opacity: 1; transform: scale(.3); } to { opacity: 0; transform: scale(1.6); } }

/* --- compact (narrow frames) ------------------------------------------------ */
.nl-view.is-compact .nl-side { display: none; }
.nl-view.is-compact .rq { grid-template-columns: minmax(0, 1fr); }
.nl-view.is-compact .rq-detail { display: none; }
.nl-view.is-compact .nl-date, .nl-view.is-compact .nl-kpi i { display: none; }

/* --- product page: six screens in one window ------------------------------- */
/* The inbox explorer switches screens: the panes are stacked and cross-fade,
   and the sidebar highlight follows (product-mock.js). */
.pm-view { width: 100%; height: 100%; }
.pm-screens { position: relative; flex: 1; min-width: 0; }
.pm-pane { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; }
.pm-pane.is-on { opacity: 1; visibility: visible; transition: opacity .25s; }

/* extra pill tones */
.p-ok { background: #e6f4ea; color: #2e8a4f; }
.p-warn { background: #fdeee5; color: #c45f24; }
.p-bad { background: #fdeceb; color: #c8392f; }
.p-info { background: #eaf0fb; color: #3d63b8; }

/* emails */
.pm-meta { display: flex; align-items: baseline; gap: 12px; color: #4b5563; font-size: 25px; }
.pm-meta small { margin-left: 24px; color: #9aa1ad; font-size: 20px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.pm-meta small:first-child { margin-left: 0; }
.pm-mail { display: grid; flex: 1; grid-template-columns: 580px minmax(0, 1fr) 600px; gap: 24px; min-height: 0; }
.pm-mail > .nl-card { display: flex; flex-direction: column; min-height: 0; }
.pm-list { flex: 1; min-height: 0; overflow: hidden; }
.pm-mi { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 20px; padding: 20px 28px; border-bottom: 2px solid #f0f1f4; }
.pm-mi > svg { margin-top: 40px; color: #9aa1ad; }
.pm-mi small { display: block; color: #9aa1ad; font-size: 20px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; }
.pm-mi b, .pm-mi span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pm-mi b { margin: 4px 0 2px; color: #1f2633; font-size: 25px; }
.pm-mi div > span { color: #6b7280; font-size: 22px; }
.pm-mi-r { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; padding-top: 24px; color: #6b7280; font-size: 22px; white-space: nowrap; }
.pm-mi-r em { padding: 4px 14px; border-radius: 10px; background: #f1f2f4; color: #6b7280; font-size: 20px; }
.pm-mi.is-sel { background: #fdf6f1; }
.pm-mi.is-sel::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 6px; background: #e0702f; }
.pm-mi.is-new { animation: rq-new .7s cubic-bezier(.2, .7, .2, 1); }

.pm-body { flex: 1; min-height: 0; overflow: hidden; padding: 28px 32px; color: #374151; font-size: 25px; }
.pm-body p { margin: 0 0 20px; line-height: 1.55; }
.pm-from { display: grid; grid-template-columns: 88px 1fr; gap: 12px 20px; margin: 0 0 28px; padding-bottom: 24px; border-bottom: 2px solid #eef0f3; }
.pm-from dt { color: #9aa1ad; }
.pm-from dd { margin: 0; color: #1f2633; font-weight: 600; }
.pm-keys { display: grid; grid-template-columns: 1fr auto; gap: 16px; margin: 0 0 28px; padding: 24px 28px; border-radius: 16px; background: #f6f7f9; }
.pm-keys dt { color: #6b7280; }
.pm-keys dd { margin: 0; color: #1f2633; font-weight: 600; text-align: right; }
.pm-files { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pm-files .rd-file { min-width: 0; overflow: hidden; padding: 16px 20px; border-color: #eef0f3; background: #fafbfc; font-size: 22px; white-space: nowrap; text-overflow: ellipsis; }

.pm-ctx .rd-b { display: flex; flex: 1; flex-direction: column; min-height: 0; padding-bottom: 28px; }
.pm-ctx .rd-id { margin-top: 24px; }
.pm-sub { display: block; color: #6b7280; font-size: 22px; }
.pm-ctx .rd-act { flex: 1; min-height: 0; overflow: hidden; border: 0; }
.pm-ctx .rd-act ol { padding: 8px 0; }
.pm-wide { justify-content: center; width: 100%; height: 68px; margin-top: 20px; font-size: 24px; }
.pm-field { margin: 24px 0 0; }
.pm-field small { display: block; color: #9aa1ad; font-size: 20px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.pm-field b { display: block; overflow: hidden; font-size: 24px; white-space: nowrap; text-overflow: ellipsis; }
.pm-draft { min-height: 240px; margin-top: 24px; padding: 24px; border: 2px solid #eef0f3; border-radius: 16px; background: #fafbfc; color: #374151; font-size: 24px; }
.pm-draft p { margin: 0 0 16px; line-height: 1.55; }
.pm-draft.is-typing p:last-child::after { content: ""; display: inline-block; width: 3px; height: 26px; margin-left: 2px; background: #e0702f; vertical-align: -2px; animation: pm-caret .8s steps(1) infinite; }
@keyframes pm-caret { 50% { opacity: 0; } }

/* shipment */
.pm-ship-h { display: flex; flex: none; justify-content: space-between; align-items: flex-end; }
.pm-ship-h > div > small { color: #9aa1ad; font-size: 20px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.pm-ship-h h4 { margin: 4px 0 8px; color: #111827; font-size: 52px; font-weight: 700; letter-spacing: -.02em; }
.pm-tabs { display: flex; flex: none; gap: 8px; padding: 0 16px; border: 2px solid #e7e9ee; border-radius: 20px; background: #fff; }
.pm-tabs span { padding: 22px 24px 20px; border-bottom: 4px solid transparent; color: #4b5563; font-size: 25px; }
.pm-tabs .on { border-color: #e0702f; color: #e0702f; font-weight: 600; }
.pm-route { display: grid; flex: none; grid-template-columns: 1fr 40px 1fr 40px 1fr auto; align-items: center; gap: 20px; padding: 24px 32px; border: 2px solid #e7e9ee; border-radius: 20px; background: #fff; }
.pm-route small { display: block; color: #9aa1ad; font-size: 20px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.pm-route b { display: block; margin: 4px 0; font-size: 27px; }
.pm-route span { color: #6b7280; font-size: 23px; }
.pm-route > svg { color: #9aa1ad; }
.pm-lfd { display: flex; align-items: center; gap: 16px; padding-left: 32px; border-left: 2px solid #eef0f3; color: #e0702f; white-space: nowrap; }
.pm-lfd small { color: #9aa1ad; }
.pm-lfd b { color: #1f2633; }
.pm-ship { display: grid; flex: 1; grid-template-columns: minmax(0, 1fr) 760px; gap: 24px; min-height: 0; }
.pm-ship > .nl-card, .pm-side-col { display: flex; flex-direction: column; min-height: 0; }
.pm-side-col { gap: 24px; }
.pm-tl { flex: 1; min-height: 0; overflow: hidden; }
.pm-ev { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto 28px; align-items: center; gap: 24px; height: 100px; padding: 0 32px; border-bottom: 2px solid #f0f1f4; }
.pm-ev > i { width: 14px; height: 14px; border-radius: 50%; background: #3b8f86; }
.pm-ev > i.r { background: #d0473c; } .pm-ev > i.o { background: #e0702f; } .pm-ev > i.b { background: #4f74c8; }
.pm-ev b { display: block; overflow: hidden; font-size: 25px; white-space: nowrap; text-overflow: ellipsis; }
.pm-ev small { color: #9aa1ad; font-size: 21px; }
.pm-ev > span { color: #9aa1ad; font-size: 22px; }
.pm-ev > svg { width: 26px; height: 26px; color: #b6bcc6; }
.pm-ev.is-new { animation: pm-ev-new 1.6s cubic-bezier(.2, .7, .2, 1); }
@keyframes pm-ev-new { 0% { height: 0; opacity: 0; } 30% { height: 100px; opacity: 1; background: #fdeceb; } 100% { background: transparent; } }
.pm-det { display: grid; grid-template-columns: 1fr 1fr; margin: 20px 24px 24px; border: 2px solid #eef0f3; border-radius: 16px; }
.pm-det div { min-width: 0; padding: 14px 20px; border-bottom: 2px solid #eef0f3; }
.pm-det div:nth-child(odd) { border-right: 2px solid #eef0f3; }
.pm-det div:nth-last-child(-n+2) { border-bottom: 0; }
.pm-det small { color: #9aa1ad; font-size: 19px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.pm-det b { display: block; overflow: hidden; font-size: 24px; white-space: nowrap; text-overflow: ellipsis; }
.pm-next { display: flex; align-items: center; gap: 24px; padding: 24px 32px; }
.pm-next > svg { color: #c8392f; }
.pm-next div { flex: 1; min-width: 0; }
.pm-next b { display: block; font-size: 25px; }
.pm-next small { color: #6b7280; font-size: 22px; }

/* queues (arrival notices, pickup notices, carrier invoices) */
.pm-q .rq { grid-template-columns: minmax(0, 1fr) 600px; }
.pm-q .rq-cols, .pm-q .rq-row { grid-template-columns: 152px 248px 256px 232px minmax(0, 1fr) 184px; }
.pm-q .rq-row { height: 92px; }
.pm-q .rq-detail { position: relative; }
.pm-q .rd-swap { display: block; }

/* compact (phones): no sidebar; emails drop the inbox list, the shipment
   drops its side column, queues drop the detail panel */
.nl-view.is-compact .pm-mail { grid-template-columns: minmax(0, 1fr) 540px; }
.nl-view.is-compact .pm-inbox, .nl-view.is-compact .pm-side-col, .nl-view.is-compact .pm-meta, .nl-view.is-compact .pm-lfd { display: none; }
.nl-view.is-compact .pm-ship { grid-template-columns: minmax(0, 1fr); }
.nl-view.is-compact .pm-route { grid-template-columns: 1fr 40px 1fr 40px 1fr; }
.nl-view.is-compact .pm-q .rq-cols, .nl-view.is-compact .pm-q .rq-row { grid-template-columns: 152px 248px 224px minmax(0, 1fr); }
.nl-view.is-compact .pm-q .rq-cols > :nth-child(3), .nl-view.is-compact .pm-q .rq-row > :nth-child(3),
.nl-view.is-compact .pm-q .rq-cols > :nth-child(6), .nl-view.is-compact .pm-q .rq-row > :nth-child(6) { display: none; }
/* activity trails tick in each time a screen opens */
.nl-motion .pm-pane:not(.is-ready) .rd-act li { opacity: 0; transform: translateX(-5px); transition: none; }
.nl-motion .pm-files .rd-file { transition: opacity .3s, transform .35s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i) * .09s + .25s); }
.nl-motion .pm-pane:not(.is-ready) .pm-files .rd-file { opacity: 0; transform: translateY(12px); transition: none; }
.nl-motion .pm-pane.is-ready .pm-pop { animation: pm-pop .5s cubic-bezier(.34, 1.56, .64, 1) 1.2s both; }
@keyframes pm-pop { from { opacity: 0; transform: scale(.6); } }