/* Shared portal styling, loaded after each page's own <style> so these rules win.
   Until 9/21/26 not one portal page had a single media query, so the header was
   a fixed desktop row that fell apart on a phone: the title wrapped to three
   lines, the email ran off the right edge, and "Request a quote" turned into a
   giant red circle, because a border-radius:999px pill whose text wraps to two
   lines IS a circle. Polo's standing rule is that everything works decently on
   a phone, so the fixes live here once instead of in eight <style> blocks. */

/* The customer's own logo already says who they are, so the "<Name> Tracking"
   heading beside it just repeats it (Polo, 9/21/26). Kept in the markup for
   screen readers and the document outline, hidden from sight when there's a
   logo to say it instead. */
.srOnly {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}

/* A pill has to stay one line at any width. This is the circle bug. */
.quoteBtn { white-space: nowrap; }

@media (max-width: 640px) {
  header {
    flex-wrap: wrap;
    padding: 10px 16px;
    gap: 10px;
    row-gap: 10px;
  }

  /* Identity on its own row, so nothing competes with it for width. */
  header .id {
    flex: 1 1 100%;
    gap: 10px;
    min-width: 0;
  }
  header img { height: 22px; }
  .logoDivider { height: 30px; }
  /* The partner logo is carrying the name now, so give it a little more room
     than it had on desktop rather than less. */
  .partnerLogo { height: 38px; }
  header h1 { font-size: 14px; line-height: 1.25; }

  /* Actions on their own row, spread across it. */
  header .hdr-right {
    flex: 1 1 100%;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
  }
  .quoteBtn {
    font-size: 12.5px;
    padding: 9px 15px;
    box-shadow: 0 1px 5px -2px rgba(237, 28, 36, .5);
  }
  /* A phone screen is too narrow to spend on an address the reader already
     knows: Sign out is the part they need. font-size:0 on the wrapper drops
     the bare "&middot;" text node between them too, which otherwise leaves a
     stray dot floating in front of Sign out. */
  header .who { display: none; }
  header .hdr-right > span { margin-left: auto; font-size: 0; }
  header .hdr-right > span a.out { font-size: 13px; }

  /* The rest of the page: match the header's 16px gutter. */
  nav.tabs { padding: 10px 16px 0; gap: 4px; overflow-x: auto; }
  nav.tabs a { font-size: 12.5px; padding: 9px 13px; white-space: nowrap; }
  main { padding: 16px 16px 24px; }
  /* Two gauges per row on a phone, never a lonely stretched one. */
  .kpis { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .kpi { padding: 12px 13px !important; }
  .kpi .v { font-size: 24px !important; }
  .kpi .l { font-size: 11px !important; }
}

/* Very narrow (iPhone SE and the like): let the buttons share the row evenly
   instead of one of them wrapping alone onto a third line. */
@media (max-width: 400px) {
  .quoteBtn { flex: 1 1 auto; justify-content: center; padding: 9px 12px; font-size: 12px; }
  header .hdr-right > span { flex: 0 0 100%; margin-left: 0; text-align: right; }
}

/* ---------------------------------------------------------------- gauges
   Polo, 9/21/26: the percentages should look like something, not a bare
   number with a percent sign. Each one is a dial: a full ring in the page's
   line colour with the value drawn over it as an arc, the number reading
   from the middle, and the sample it was measured from underneath, so a
   confident-looking 100% can never hide that it counted eleven loads.

   The arc is pure SVG with stroke-dasharray, no JavaScript and no library.
   r=42 in a 100x100 box, so the circumference is 2*pi*42 = 263.9; the
   template sets stroke-dashoffset to 263.9 * (1 - pct/100) inline, and the
   keyframe below only supplies the "from", letting that inline value be the
   "to". Rotated -90deg so the arc starts at twelve o'clock. */
.kpi.gauge {
  cursor: default;
  display: flex;
  align-items: center;
  gap: 13px;
}
.kpi.gauge:hover { border-color: var(--line); }

.gaugeDial {
  position: relative;
  flex: 0 0 auto;
  width: 62px;
  height: 62px;
}
.gaugeDial svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  display: block;
  overflow: visible;
}
.gTrack { fill: none; stroke: var(--line); stroke-width: 9; }
.gVal {
  fill: none;
  stroke: var(--accent);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 263.9;
  animation: gFill 1s cubic-bezier(.22, .9, .3, 1) both;
}
@keyframes gFill { from { stroke-dashoffset: 263.9; } }
@media (prefers-reduced-motion: reduce) { .gVal { animation: none; } }

.gaugeDial .gCenter {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.02em;
  color: var(--ink);
}
.gaugeDial .gCenter .gPct { font-size: 10px; font-weight: 700; margin-left: 1px; color: var(--dim); }

.kpi.gauge .gMeta { min-width: 0; }
.kpi.gauge .gMeta .l { white-space: normal; font-size: 12.5px; line-height: 1.3; }

@media (max-width: 640px) {
  .kpi.gauge { gap: 10px; padding: 12px 11px !important; }
  .gaugeDial { width: 54px; height: 54px; }
  .gaugeDial .gCenter { font-size: 15px; }
}

/* "Successfully tracked" on a finished load, in place of the live-position
   line that only makes sense while the truck is still moving. Reads as a
   quiet statement of fact next to the DELIVERED pill rather than competing
   with it, so green but not the same green. */
.trackedBadge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--good, #1a7f37);
  background: rgba(26, 127, 55, .09);
  border: 1px solid rgba(26, 127, 55, .22);
  border-radius: 999px;
  padding: 3px 11px 3px 9px;
  white-space: nowrap;
}
.trackedBadge::before {
  content: "";
  width: 12px; height: 12px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--good, #1a7f37);
  /* a small check, drawn rather than typed, so no emoji font to depend on */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zm3.9 5.9l-4.6 5a1 1 0 01-1.5 0L3.9 8.8a1 1 0 011.4-1.4l1.2 1.3 3.9-4.2a1 1 0 011.5 1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zm3.9 5.9l-4.6 5a1 1 0 01-1.5 0L3.9 8.8a1 1 0 011.4-1.4l1.2 1.3 3.9-4.2a1 1 0 011.5 1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
}