/*
  DoAdvert Rider Portal — public CSS (v1.2)
  Brand tokens come from the brand guidelines (Royal Orange #F55600, Dark Night,
  Outfit font, -4% / -2% tracking, pill buttons, solid colour fills).
  All selectors prefixed `.dorp-` so we don't clash with the host theme.
*/

:root {
  --dorp-orange:       #F55600;
  --dorp-orange-deep:  #C24400;
  --dorp-orange-soft:  #FCE5D5;
  --dorp-orange-tint:  #FFF1E5;
  --dorp-ink:          #000000;
  --dorp-ink-soft:     #1A1A1A;
  --dorp-white:        #FFFFFF;
  --dorp-silver:       #C4C4C4;
  --dorp-paper:        #F8F8F6;
  --dorp-line:         #E5E3DE;
  --dorp-muted:        #8B8B85;

  --dorp-r-pill:       999px;
  --dorp-r-card:       14px;
  --dorp-r-large:      24px;
  --dorp-r-nav:        18px;

  --dorp-tracking-tight: -0.04em;
  --dorp-tracking-bold:  -0.02em;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body.dorp-page,
body.dorp-login {
  margin: 0;
  background: var(--dorp-paper);
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
  color: var(--dorp-ink);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ==================== SHARED: PAGE WRAPPER ==================== */

.dorp-wrap {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 0 40px;
}

/* ==================== SHARED: NAV BAR ==================== */
/*
  Used on every portal page (login pages + dashboard). Black rounded-rectangle
  bar with the orange/white logo on the left and a button on the right:
   - Login pages: "Support" white-outline button → contact-us page
   - Dashboard:   "Sign out" white-fill button   → logout
*/
.dorp-nav {
  margin: 12px 14px 0;
  background: var(--dorp-ink);
  border-radius: 18px;
  padding: 12px 16px 12px 20px;
  display: flex; align-items: center; justify-content: space-between;
  color: var(--dorp-white);
  min-height: 68px;
}
.dorp-nav__logo {
  display: inline-flex; align-items: center;
  height: 38px;
  text-decoration: none;
}
.dorp-nav__logo img { height: 100%; width: auto; display: block; }

/* Sign-out: white fill, used on the dashboard */
.dorp-nav__action {
  font: inherit; font-weight: 600; font-size: 14px;
  padding: 11px 22px;
  border-radius: var(--dorp-r-pill);
  cursor: pointer; text-decoration: none;
  letter-spacing: var(--dorp-tracking-bold); line-height: 1;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.05s;
  display: inline-block;
}
.dorp-nav__action--filled {
  background: var(--dorp-white); color: var(--dorp-ink);
  border: 1.5px solid var(--dorp-white);
}
.dorp-nav__action--filled:hover {
  background: var(--dorp-orange); color: var(--dorp-white);
  border-color: var(--dorp-orange);
}
/* Support: white border + transparent fill, used on login pages */
.dorp-nav__action--ghost {
  background: transparent; color: var(--dorp-white);
  border: 1.5px solid var(--dorp-white);
}
.dorp-nav__action--ghost:hover {
  background: var(--dorp-white); color: var(--dorp-ink);
}
.dorp-nav__action:active { transform: scale(0.97); }

/* ==================== SHARED: BACK ARROW BAR ==================== */
/*
  Sits below the main nav on inner login pages (e.g. /portal/rider).
  Just a small "← Back" link.
*/
.dorp-backbar {
  padding: 12px 24px 0;
}
.dorp-backbar a {
  color: var(--dorp-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: var(--dorp-tracking-bold);
  text-decoration: none;
  transition: color 0.15s;
}
.dorp-backbar a:hover { color: var(--dorp-orange); }

/* ==================== SHARED: SECTION HEADERS WITH PLAY ARROW ==================== */
.dorp-section-h {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 26px 22px 12px;
  font-size: 13px; font-weight: 700;
  letter-spacing: var(--dorp-tracking-bold);
  color: var(--dorp-ink);
}
.dorp-section-h__left { display: flex; align-items: center; gap: 8px; }
.dorp-section-h__icon {
  width: 13px; height: 15px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 459.577 511.285' fill='%23F55600'><g transform='translate(-26.167,511.954) scale(0.1,-0.1)'><path d='M1305 5109 c-236 -34 -498 -169 -672 -345 -206 -209 -329 -511 -363 -889 -8 -82 -10 -531 -7 -1400 4 -1420 1 -1348 71 -1579 102 -331 336 -620 616 -761 183 -92 345 -128 570 -128 339 0 540 76 1065 404 154 97 548 341 875 544 926 573 938 582 1058 710 304 324 415 815 287 1260 -61 210 -170 400 -309 539 -95 95 -216 178 -606 418 -157 96 -573 354 -924 572 -352 218 -687 423 -745 455 -300 166 -639 240 -916 200z'/></g></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  flex-shrink: 0;
}
.dorp-section-h__toggle {
  background: transparent; color: var(--dorp-muted);
  font: inherit; font-weight: 600;
  font-size: 11px; letter-spacing: 0.04em;
  text-transform: uppercase;
  border: none; cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--dorp-r-pill);
  transition: color 0.15s, background 0.15s;
}
.dorp-section-h__toggle:hover {
  color: var(--dorp-orange);
  background: var(--dorp-orange-tint);
}
.dorp-section-h__toggle .arrow {
  display: inline-block; margin-left: 4px;
  transition: transform 0.2s;
}
.dorp-section-h__toggle.is-expanded .arrow { transform: rotate(180deg); }

/* ============================================================
   ROLE PICKER (/portal)
   ============================================================ */
.dorp-role { display: flex; flex-direction: column; padding-bottom: 24px; }
.dorp-role__main {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
  padding: 40px 22px 0;
  text-align: center;
}
.dorp-role__title {
  font-size: 28px; font-weight: 700;
  letter-spacing: var(--dorp-tracking-bold);
  line-height: 1.1; color: var(--dorp-ink);
  margin: 0 0 6px;
}
.dorp-role__title strong { color: var(--dorp-orange); font-weight: 700; }
.dorp-role__sub {
  font-size: 14px; color: var(--dorp-muted);
  font-weight: 500; margin: 0 0 24px;
}
.dorp-role__cards {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; width: 100%; max-width: 360px;
}
.dorp-role-card {
  display: flex; flex-direction: column;
  background: var(--dorp-white);
  border: 1.5px solid var(--dorp-line);
  border-radius: var(--dorp-r-card); padding: 14px;
  text-decoration: none; color: var(--dorp-ink);
  transition: border-color 0.15s, transform 0.1s, box-shadow 0.15s;
  cursor: pointer; position: relative;
}
.dorp-role-card:active { transform: scale(0.99); }
.dorp-role-card--rider:hover {
  border-color: var(--dorp-orange);
  box-shadow: 0 8px 24px -10px rgba(245, 86, 0, 0.25);
}
.dorp-role-card--soon { cursor: not-allowed; }

.dorp-role-card__panel {
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
  background:
    radial-gradient(circle at 30% 30%, rgba(245,86,0,0.22) 0%, transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(245,86,0,0.16) 0%, transparent 50%),
    var(--dorp-orange-tint);
}
.dorp-role-card--soon .dorp-role-card__panel {
  background:
    radial-gradient(circle at 30% 30%, rgba(0,0,0,0.06) 0%, transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(0,0,0,0.04) 0%, transparent 50%),
    var(--dorp-paper);
}
.dorp-role-card__icon { width: 56px; height: 56px; color: var(--dorp-ink); }
.dorp-role-card__icon--small { width: 50px; height: 50px; }
.dorp-role-card--soon .dorp-role-card__icon { color: var(--dorp-muted); }

.dorp-role-card__title {
  font-size: 16px; font-weight: 700;
  letter-spacing: var(--dorp-tracking-bold);
  color: var(--dorp-ink); text-align: center;
  margin-bottom: 4px;
  transition: color 0.15s;
}
.dorp-role-card__title .arrow {
  margin-left: 4px; display: inline-block;
  transition: transform 0.15s;
}
.dorp-role-card--rider:hover .dorp-role-card__title { color: var(--dorp-orange); }
.dorp-role-card--rider:hover .dorp-role-card__title .arrow { transform: translateX(3px); }
.dorp-role-card--soon .dorp-role-card__title { color: var(--dorp-muted); }
.dorp-role-card__desc {
  font-size: 12px; color: var(--dorp-muted);
  text-align: center; line-height: 1.4;
}
.dorp-role-card__soon-pill {
  position: absolute; top: 10px; right: 10px;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.12em; padding: 3px 7px;
  background: var(--dorp-orange); color: var(--dorp-white);
  border-radius: var(--dorp-r-pill);
  text-transform: uppercase; z-index: 2;
}

.dorp-role__foot {
  text-align: center;
  padding: 24px 20px 0;
  flex-shrink: 0;
}
.dorp-role__foot a {
  color: var(--dorp-muted);
  font-size: 13px; font-weight: 600;
  letter-spacing: var(--dorp-tracking-bold);
  text-decoration: none;
  transition: color 0.15s;
}
.dorp-role__foot a:hover { color: var(--dorp-orange); }

/* ============================================================
   RIDER LOGIN (/portal/rider)
   ============================================================ */
.dorp-rl { display: flex; flex-direction: column; padding-bottom: 24px; }
.dorp-rl__main {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
  padding: 30px 24px 0;
  text-align: center;
}
.dorp-rl__title {
  font-size: 28px; font-weight: 700;
  letter-spacing: var(--dorp-tracking-bold);
  line-height: 1.15; margin: 0 0 8px;
  color: var(--dorp-ink);
}
.dorp-rl__title strong { color: var(--dorp-orange); font-weight: 700; }
.dorp-rl__sub {
  font-size: 14px; color: var(--dorp-muted);
  margin: 0 0 22px;
  max-width: 320px; line-height: 1.5;
}
.dorp-rl__card {
  width: 100%; max-width: 320px;
  background: var(--dorp-white);
  border: 1px solid var(--dorp-line);
  border-radius: var(--dorp-r-card);
  padding: 20px;
}
.dorp-rl__field {
  display: flex; flex-direction: column; gap: 6px;
  text-align: left; margin-bottom: 12px;
}
.dorp-rl__label {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dorp-muted);
}
.dorp-rl__input {
  font: inherit; font-size: 16px; padding: 12px 14px;
  border: 1.5px solid var(--dorp-line);
  border-radius: 10px;
  background: var(--dorp-white); color: var(--dorp-ink);
  transition: border-color 0.15s;
}
.dorp-rl__input:focus { outline: none; border-color: var(--dorp-ink); }
.dorp-rl__btn {
  width: 100%;
  font: inherit; font-weight: 700; font-size: 14px;
  padding: 14px 24px;
  background: var(--dorp-ink); color: var(--dorp-white);
  border: 1.5px solid var(--dorp-ink);
  border-radius: var(--dorp-r-pill);
  letter-spacing: var(--dorp-tracking-bold);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.dorp-rl__btn:hover { background: var(--dorp-orange); border-color: var(--dorp-orange); }
.dorp-rl__hint {
  margin: 14px 0 0;
  font-size: 11px; color: var(--dorp-muted);
  line-height: 1.5; text-align: center;
}
.dorp-rl__hint a {
  color: var(--dorp-orange);
  text-decoration: none; font-weight: 600;
}

/* Flash messages on the rider login form */
.dorp-msg {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.45;
}
.dorp-msg--success { background: var(--dorp-orange-soft); color: var(--dorp-ink); border: 1px solid #f5cfb5; }
.dorp-msg--error   { background: #fdecec; color: #8b1c1c; border: 1px solid #f5c0c0; }
.dorp-msg--info    { background: var(--dorp-paper); color: var(--dorp-ink); border: 1px solid var(--dorp-line); }

/* ============================================================
   ADVERTISER COMING SOON (/portal/advertiser)
   ============================================================ */
.dorp-as { display: flex; flex-direction: column; padding-bottom: 24px; }
.dorp-as__main {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
  padding: 40px 24px 0; text-align: center;
}
.dorp-as__pill {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 5px 11px;
  background: var(--dorp-orange); color: var(--dorp-white);
  border-radius: var(--dorp-r-pill);
  margin-bottom: 14px;
}
.dorp-as__title {
  font-size: 28px; font-weight: 700;
  letter-spacing: var(--dorp-tracking-bold);
  line-height: 1.1; margin: 0 0 12px;
  color: var(--dorp-ink);
}
.dorp-as__title strong { color: var(--dorp-orange); font-weight: 700; }
.dorp-as__sub {
  font-size: 14px; color: var(--dorp-muted);
  line-height: 1.5; max-width: 320px;
  margin: 0 0 20px;
}
.dorp-as__list {
  width: 100%; max-width: 320px;
  background: var(--dorp-white);
  border: 1px solid var(--dorp-line);
  border-radius: var(--dorp-r-card);
  padding: 8px 18px;
  text-align: left;
}
.dorp-as__row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  font-size: 13px; color: var(--dorp-ink);
  line-height: 1.4;
  border-bottom: 1px solid var(--dorp-line);
}
.dorp-as__row:last-child { border-bottom: none; }
.dorp-as__row::before {
  content: '';
  width: 11px; height: 13px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 459.577 511.285' fill='%23F55600'><g transform='translate(-26.167,511.954) scale(0.1,-0.1)'><path d='M1305 5109 c-236 -34 -498 -169 -672 -345 -206 -209 -329 -511 -363 -889 -8 -82 -10 -531 -7 -1400 4 -1420 1 -1348 71 -1579 102 -331 336 -620 616 -761 183 -92 345 -128 570 -128 339 0 540 76 1065 404 154 97 548 341 875 544 926 573 938 582 1058 710 304 324 415 815 287 1260 -61 210 -170 400 -309 539 -95 95 -216 178 -606 418 -157 96 -573 354 -924 572 -352 218 -687 423 -745 455 -300 166 -639 240 -916 200z'/></g></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  flex-shrink: 0;
}

/* ============================================================
   DASHBOARD (/portal/rider when logged in)
   ============================================================ */

/* Greeting */
.dorp-hero { padding: 22px 22px 4px; }
.dorp-hero__eyebrow {
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--dorp-muted);
  font-weight: 600; margin-bottom: 8px;
}
.dorp-hero__title {
  font-size: 28px; font-weight: 700;
  letter-spacing: var(--dorp-tracking-bold);
  line-height: 1.1; color: var(--dorp-ink);
  margin: 0 0 14px;
}
.dorp-hero__title strong { color: var(--dorp-orange); font-weight: 700; }
.dorp-hero__meta {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center;
  font-size: 12px; color: var(--dorp-muted); font-weight: 500;
}
.dorp-hero__pill {
  display: inline-block;
  padding: 4px 10px;
  background: var(--dorp-ink); color: var(--dorp-white);
  border-radius: var(--dorp-r-pill);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em;
  transition: background 0.15s;
}
.dorp-hero__pill:hover { background: var(--dorp-orange); }
.dorp-hero__rate { color: var(--dorp-orange); font-weight: 700; }

/* Dashboard disclaimer banner */
.dorp-disclaimer {
  margin: 14px 16px 0;
  padding: 10px 14px;
  background: var(--dorp-paper);
  border: 1px solid var(--dorp-line);
  border-radius: 10px;
  font-size: 12px;
  color: var(--dorp-muted);
  line-height: 1.45;
  display: flex; align-items: center; gap: 8px;
}
.dorp-disclaimer__icon {
  flex-shrink: 0;
  width: 14px; height: 14px;
  color: var(--dorp-orange);
}

/* Subtle inline footnote (e.g. the 90s sync allowance explainer under breakdown) */
.dorp-footnote {
  margin: 8px 16px 0;
  padding: 0 6px;
  font-size: 11px;
  color: var(--dorp-muted);
  line-height: 1.5;
}
.dorp-footnote strong {
  color: var(--dorp-ink);
  font-weight: 600;
}

/* Hero period card (This month) */
.dorp-period-hero {
  margin: 0 16px;
  background: var(--dorp-ink); color: var(--dorp-white);
  border-radius: var(--dorp-r-card); padding: 20px 22px;
  position: relative; overflow: hidden;
  cursor: default;
  transition: transform 0.15s, box-shadow 0.2s;
}
.dorp-period-hero:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -16px rgba(245,86,0,0.5);
}
.dorp-period-hero::after {
  content: '';
  position: absolute; top: -10%; right: -25%;
  width: 70%; height: 130%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M22 12 Q22 4 30 4 L88 46 Q98 50 88 54 L30 96 Q22 96 22 88 Z' fill='%23F55600' fill-opacity='0.12'/></svg>");
  background-size: contain; background-repeat: no-repeat;
  background-position: right center;
  pointer-events: none;
  transition: opacity 0.3s; opacity: 0;
}
.dorp-period-hero:hover::after { opacity: 1; }
.dorp-period-hero__inner { position: relative; z-index: 1; }
.dorp-period-hero__label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.6); margin-bottom: 8px;
}
.dorp-period-hero__amount {
  font-size: 44px; font-weight: 700;
  letter-spacing: var(--dorp-tracking-tight);
  line-height: 1; margin-bottom: 8px;
  color: var(--dorp-orange);
}
.dorp-period-hero__amount .pence {
  font-size: 0.55em; font-weight: 500; opacity: 0.85;
}
.dorp-period-hero__hours {
  font-size: 14px; font-weight: 500;
  color: rgba(255,255,255,0.85);
}
.dorp-period-hero__hours strong { color: var(--dorp-white); font-weight: 700; }
.dorp-period-hero__hours .dot { opacity: 0.5; margin: 0 6px; }
.dorp-period-hero__hours .meta { color: rgba(255,255,255,0.6); }
.dorp-period-hero__hours .empty { color: rgba(255,255,255,0.55); }

/* Two support cards (Yesterday / This week) */
.dorp-support-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px 16px 0;
}
.dorp-support-card {
  background: var(--dorp-white);
  border: 1.5px solid var(--dorp-line);
  border-radius: var(--dorp-r-card);
  padding: 14px 16px;
  cursor: default;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.2s;
}
.dorp-support-card:hover {
  border-color: var(--dorp-orange);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -10px rgba(245,86,0,0.25);
}
.dorp-support-card__label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--dorp-muted); margin-bottom: 6px;
}
.dorp-support-card__amount {
  font-size: 22px; font-weight: 700;
  letter-spacing: var(--dorp-tracking-tight);
  line-height: 1.1;
  color: var(--dorp-orange);
  margin-bottom: 2px;
}
.dorp-support-card__amount .pence {
  font-size: 0.62em; font-weight: 500;
}
.dorp-support-card--zero .dorp-support-card__amount { color: var(--dorp-silver); }
.dorp-support-card__hours {
  font-size: 12px; color: var(--dorp-muted); font-weight: 500;
}
.dorp-support-card__hours strong { color: var(--dorp-ink); font-weight: 700; }
.dorp-support-card--zero .dorp-support-card__hours { color: var(--dorp-silver); }

/* Earnings breakdown / Monthly history (same shell, different content) */
.dorp-breakdown {
  margin: 0 16px;
  background: var(--dorp-white);
  border: 1px solid var(--dorp-line);
  border-radius: var(--dorp-r-card);
  overflow: hidden;
}
.dorp-breakdown__head {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  padding: 12px 18px;
  background: var(--dorp-paper);
  border-bottom: 1px solid var(--dorp-line);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dorp-muted);
}
.dorp-breakdown__head span:nth-child(2),
.dorp-breakdown__head span:nth-child(3) { text-align: right; }
.dorp-breakdown__row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  padding: 13px 18px;
  border-bottom: 1px solid var(--dorp-line);
  align-items: baseline;
  cursor: default;
  transition: background 0.15s;
}
.dorp-breakdown__row:last-child { border-bottom: none; }
.dorp-breakdown__row:hover { background: var(--dorp-paper); }
.dorp-breakdown__row.is-active:hover { background: var(--dorp-orange-tint); }
.dorp-breakdown__period {
  font-size: 13px; font-weight: 500;
  letter-spacing: var(--dorp-tracking-bold);
  color: var(--dorp-ink);
}
.dorp-breakdown__period .month {
  color: var(--dorp-muted); font-weight: 500; margin-left: 3px;
}
.dorp-breakdown__hours {
  font-size: 13px; font-weight: 600;
  text-align: right;
  letter-spacing: var(--dorp-tracking-bold);
  color: var(--dorp-ink);
}
.dorp-breakdown__hours.is-zero { color: var(--dorp-silver); font-weight: 500; }
.dorp-breakdown__pay {
  font-size: 14px; font-weight: 700;
  text-align: right; color: var(--dorp-orange);
  letter-spacing: var(--dorp-tracking-bold);
}
.dorp-breakdown__pay.is-zero { color: var(--dorp-silver); }
/* Hide rows by default if 'is-hidden' (used for collapsed Monthly history) */
.dorp-breakdown__row.is-hidden { display: none; }
.dorp-breakdown.is-expanded .dorp-breakdown__row.is-hidden { display: grid; }

/* Last 7 days list */
.dorp-days {
  margin: 0 16px;
  background: var(--dorp-white);
  border: 1px solid var(--dorp-line);
  border-radius: var(--dorp-r-card);
  padding: 6px 0;
  overflow: hidden;
}
.dorp-day {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid var(--dorp-line);
  transition: background 0.15s; cursor: default;
}
.dorp-day:last-child { border-bottom: none; }
.dorp-day:hover { background: var(--dorp-paper); }
.dorp-day.is-active:hover { background: var(--dorp-orange-tint); }
.dorp-day__name { font-size: 13px; font-weight: 600; letter-spacing: var(--dorp-tracking-bold); }
.dorp-day__name small {
  display: block; font-size: 11px;
  color: var(--dorp-muted); margin-top: 1px; font-weight: 400;
}
.dorp-day__right { text-align: right; }
.dorp-day__time { font-size: 14px; font-weight: 600; letter-spacing: var(--dorp-tracking-bold); }
.dorp-day__time.is-zero { color: var(--dorp-silver); font-weight: 500; }
.dorp-day__pay { font-size: 11px; color: var(--dorp-orange); font-weight: 700; margin-top: 1px; }

/* Lifetime card */
.dorp-alltime {
  margin: 0 16px;
  background: var(--dorp-white); border: 1px solid var(--dorp-line);
  border-radius: var(--dorp-r-card); padding: 16px 18px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; cursor: default;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.2s;
}
.dorp-alltime:hover {
  border-color: var(--dorp-orange);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -10px rgba(245,86,0,0.25);
}
.dorp-alltime__left { flex: 1; min-width: 0; }
.dorp-alltime__label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--dorp-muted); margin-bottom: 4px;
}
.dorp-alltime__period {
  font-size: 13px; font-weight: 500;
  color: var(--dorp-ink); line-height: 1.3;
}
.dorp-alltime__period strong { font-weight: 700; }
.dorp-alltime__period .meta { color: var(--dorp-muted); font-weight: 500; }
.dorp-alltime__right { text-align: right; flex-shrink: 0; }
.dorp-alltime__amount {
  font-size: 22px; font-weight: 700;
  letter-spacing: var(--dorp-tracking-tight);
  color: var(--dorp-orange); line-height: 1;
}
.dorp-alltime__amount .pence { font-size: 0.65em; font-weight: 500; }
.dorp-alltime__hours {
  font-size: 11px; color: var(--dorp-muted);
  font-weight: 600; margin-top: 4px;
  letter-spacing: var(--dorp-tracking-bold);
}

/* Bottom sign-out (black, matches nav action) */
.dorp-bottom-signout {
  text-align: center;
  padding: 24px 16px 12px;
}
.dorp-bottom-signout a {
  background: var(--dorp-ink); color: var(--dorp-white);
  font: inherit; font-weight: 600; font-size: 13px;
  padding: 11px 26px;
  border: 1.5px solid var(--dorp-ink);
  border-radius: var(--dorp-r-pill);
  cursor: pointer; text-decoration: none;
  letter-spacing: var(--dorp-tracking-bold);
  display: inline-block; line-height: 1;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.dorp-bottom-signout a:hover {
  background: var(--dorp-orange);
  border-color: var(--dorp-orange);
}
.dorp-bottom-signout a:active { transform: scale(0.98); }

/* Multi-assignment history (only shown if rider has more than 1 assignment) */
.dorp-history {
  margin: 0 16px;
  background: var(--dorp-white);
  border: 1px solid var(--dorp-line);
  border-radius: var(--dorp-r-card);
  padding: 6px 0;
}
.dorp-history__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--dorp-line);
}
.dorp-history__row:last-child { border-bottom: none; }
.dorp-history__box {
  display: inline-block;
  padding: 3px 8px;
  background: var(--dorp-ink); color: var(--dorp-white);
  border-radius: var(--dorp-r-pill);
  font-size: 11px; font-weight: 600;
}
.dorp-history__dates {
  font-size: 13px; color: var(--dorp-muted);
}
.dorp-history__rate {
  font-size: 13px; font-weight: 700;
  color: var(--dorp-orange);
}

/* ============================================================
   DESKTOP RESPONSIVE LAYOUT (≥ 900px)
   ============================================================

   IMPORTANT: selectors target `.dorp-dashboard` (a class on the wrap div)
   directly rather than inheriting from `body.dorp-page`. This makes the
   rules robust against:
     - CSS minifiers / combiners that may reorder declarations
     - Themes that filter/strip body classes via body_class hooks
     - Plugins that wrap content in extra divs

   The dashboard becomes a 2-column CSS grid at ≥900px:
     - Left col:  This-month hero + Yesterday/This-week support cards
     - Right col: Earnings breakdown
     - Below the split (full-width): Monthly history, Last 7 days, Lifetime
   Login pages stay narrow + centred on desktop (focused single-task screens).
*/

@media (min-width: 900px) {

  /* Subtle paper backdrop with orange-tinted vignette on portal pages */
  body.dorp-page,
  body.dorp-login {
    background:
      radial-gradient(ellipse 80% 60% at top, var(--dorp-orange-tint) 0%, transparent 70%),
      var(--dorp-paper);
  }

  /* ─── DASHBOARD: wider container, 2-column grid ─── */

  .dorp-dashboard {
    max-width: 960px;
    padding: 24px 28px 60px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    row-gap: 24px;
    align-items: start;
  }

  /* Full-width items: nav, hero greeting, disclaimer, sign-out */
  .dorp-dashboard > .dorp-nav,
  .dorp-dashboard > .dorp-hero,
  .dorp-dashboard > .dorp-disclaimer,
  .dorp-dashboard > .dorp-bottom-signout {
    grid-column: 1 / -1;
  }

  /* Section positioning via explicit class names — predictable */
  .dorp-dashboard .dorp-section--this-month { grid-column: 1; }
  .dorp-dashboard .dorp-section--breakdown  { grid-column: 2; }

  /* History, days, lifetime: full-width below the 2-col split */
  .dorp-dashboard .dorp-section--history,
  .dorp-dashboard .dorp-section--days,
  .dorp-dashboard .dorp-section--lifetime {
    grid-column: 1 / -1;
  }

  /* Strip the mobile horizontal margins since the grid handles spacing */
  .dorp-dashboard .dorp-section .dorp-section-h {
    padding: 0 4px 12px;
  }
  .dorp-dashboard .dorp-section .dorp-period-hero,
  .dorp-dashboard .dorp-section .dorp-support-row,
  .dorp-dashboard .dorp-section .dorp-breakdown,
  .dorp-dashboard .dorp-section .dorp-days,
  .dorp-dashboard .dorp-section .dorp-alltime,
  .dorp-dashboard .dorp-section .dorp-footnote {
    margin-left: 0;
    margin-right: 0;
  }

  /* Tighten support-row padding on desktop */
  .dorp-dashboard .dorp-section--this-month .dorp-support-row {
    padding: 12px 0 0;
  }

  /* Greeting feels too tight at desktop scale */
  .dorp-dashboard .dorp-hero {
    padding: 28px 8px 6px;
  }
  .dorp-dashboard .dorp-hero__title {
    font-size: 36px;
  }

  /* Bigger hero card on desktop */
  .dorp-dashboard .dorp-period-hero {
    padding: 28px;
  }
  .dorp-dashboard .dorp-period-hero__amount {
    font-size: 52px;
  }

  /* Lifetime card gets more breathing room */
  .dorp-dashboard .dorp-alltime {
    padding: 22px 26px;
  }
  .dorp-dashboard .dorp-alltime__amount {
    font-size: 28px;
  }

  /* ─── LOGIN PAGES: top-aligned with comfortable spacing on desktop ─── */
  /* On mobile, .dorp-role / .dorp-rl / .dorp-as use min-height:100vh +
     justify-content:center to vertically centre content. That looks great
     on a phone but creates a huge empty area on a desktop viewport. We
     reset those rules here so content sits naturally near the top, with
     room to breathe but no awkward middle-of-screen positioning. */

  body.dorp-login {
    display: block;   /* clear any inherited flex behaviour */
  }
  body.dorp-login .dorp-wrap {
    max-width: 720px;     /* wider than mobile so cards have room to grow */
    padding: 32px 28px 60px;
    width: 100%;
    margin: 0 auto;
  }

  /* Role-picker (and the matching layouts on login + advertiser-soon)
     stop being viewport-height. Content sits below the nav with a
     comfortable gap, not centred vertically on the page. */
  body.dorp-login .dorp-role,
  body.dorp-login .dorp-rl,
  body.dorp-login .dorp-as {
    min-height: auto;
    padding-bottom: 16px;
  }
  body.dorp-login .dorp-role__main,
  body.dorp-login .dorp-rl__main,
  body.dorp-login .dorp-as__main {
    flex: none;
    justify-content: flex-start;
    padding: 48px 22px 24px;
  }

  /* Make the headline bigger to match desktop scale */
  body.dorp-login .dorp-role__title,
  body.dorp-login .dorp-rl__title,
  body.dorp-login .dorp-as__title {
    font-size: 36px;
  }

  /* Role picker: cards stay side-by-side but get noticeably bigger
     so they read as the focal point of the page, not tiny mobile thumbs */
  body.dorp-login .dorp-role__cards {
    max-width: 560px;
    gap: 18px;
  }
  body.dorp-login .dorp-role-card__panel {
    height: 200px;            /* taller panels look right on desktop */
  }
  body.dorp-login .dorp-role-card__icon {
    width: 84px; height: 84px;
  }
  body.dorp-login .dorp-role-card__icon--small {
    width: 70px; height: 70px;
  }
  body.dorp-login .dorp-role-card__title {
    font-size: 18px;
  }

  /* Magic-link form + advertiser list stay narrow + centred — they're
     focused single-task widgets, no benefit to making them wider */
  body.dorp-login .dorp-rl__card,
  body.dorp-login .dorp-as__list {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Wide desktop (≥ 1280px) — extra breathing room */
@media (min-width: 1280px) {
  .dorp-dashboard {
    max-width: 1080px;
    column-gap: 28px;
  }
}

/* ============================================================
   TOUCH-DEVICE HIGHLIGHTS

   On mobile/touch the `:hover` pseudo-class triggers oddly (often only
   at the END of a tap, briefly before navigation). The user sees no
   visual feedback while their finger is down. Solution: replay every
   meaningful :hover effect on :active too. Combined into one rule per
   element so we keep markup tidy.

   Scope: focused on tappable cards and pills only (role picker, sign-out
   button, nav actions, period hero). Smaller list items don't need it.
   ============================================================ */

.dorp-role-card--rider:active {
  border-color: var(--dorp-orange);
  box-shadow: 0 8px 20px rgba(245, 86, 0, 0.12);
}
.dorp-role-card--rider:active .dorp-role-card__title { color: var(--dorp-orange); }
.dorp-role-card--rider:active .dorp-role-card__title .arrow { transform: translateX(3px); }

.dorp-nav__action--filled:active {
  background: var(--dorp-orange-deep);
  border-color: var(--dorp-orange-deep);
}
.dorp-nav__action--ghost:active { background: rgba(255,255,255,0.08); }
.dorp-backbar a:active { color: var(--dorp-orange); }
.dorp-role__foot a:active { color: var(--dorp-orange); }
.dorp-hero__pill:active { background: var(--dorp-orange); }
.dorp-bottom-signout a:active { background: var(--dorp-orange-tint); color: var(--dorp-orange-deep); }

/* ============================================================
   INFO BUTTON — small (i) icon next to a card label that taps to
   reveal an explanatory note. Used on the dashboard's "Yesterday"
   card to explain why the figure may not be final yet.
   ============================================================ */

.dorp-support-card__label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dorp-info {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--dorp-muted);
  cursor: pointer;
  border-radius: 50%;
  transition: color 0.15s ease, background 0.15s ease;
}
.dorp-info svg { width: 100%; height: 100%; }
.dorp-info:hover { color: var(--dorp-orange); }
.dorp-info:active { color: var(--dorp-orange); background: var(--dorp-orange-tint); }
.dorp-info[aria-expanded="true"] { color: var(--dorp-orange); background: var(--dorp-orange-tint); }

.dorp-info-note {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--dorp-orange-tint);
  border: 1px solid rgba(245, 86, 0, 0.18);
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--dorp-ink);
  /* Span the full card width even though the button is just the icon */
  grid-column: 1 / -1;
}

/* ============================================================
   OUTSTANDING SUPPORT CARD + PAYMENTS SECTION

   Outstanding card: shown as a third card in the support row when the
   rider has a non-zero unpaid balance. Visually distinct (orange-tinted
   background, deeper border) so it draws the eye — this is the most
   actionable number on the page.

   Payments section: list of past pay runs the rider is part of, with
   paid/pending/issue status badges. Visual rhythm matches the existing
   .dorp-breakdown rows for consistency.
   ============================================================ */

.dorp-support-row--triple { grid-template-columns: 1fr 1fr 1fr; }

.dorp-support-card--outstanding {
  background: var(--dorp-orange-tint);
  border-color: var(--dorp-orange);
}
.dorp-support-card--outstanding .dorp-support-card__amount { color: var(--dorp-orange-deep); }
.dorp-support-card--outstanding .dorp-support-card__hours { color: var(--dorp-orange-deep); opacity: 0.85; }

.dorp-section--payments .dorp-payments {
  background: #fff;
  border: 1px solid var(--dorp-line);
  border-radius: 14px;
  overflow: hidden;
}
.dorp-payments__head {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.4fr;
  padding: 12px 16px;
  background: var(--dorp-paper);
  border-bottom: 1px solid var(--dorp-line);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--dorp-muted);
  font-weight: 600;
}
.dorp-payments__head span:nth-child(2) { text-align: right; }
.dorp-payments__head span:nth-child(3) { text-align: right; }
.dorp-payments__row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.4fr;
  padding: 14px 16px;
  border-bottom: 1px solid var(--dorp-line);
  align-items: center;
  font-size: 14px;
}
.dorp-payments__row:last-child { border-bottom: 0; }
.dorp-payments__period { font-weight: 600; }
.dorp-payments__amount {
  text-align: right;
  font-weight: 700;
  color: var(--dorp-orange);
  font-variant-numeric: tabular-nums;
}
.dorp-payments__status {
  text-align: right;
  font-size: 13px;
  font-weight: 600;
}
.dorp-payments__row--is-paid    .dorp-payments__status { color: #1a7f37; }
.dorp-payments__row--is-pending .dorp-payments__status { color: #a02914; }
.dorp-payments__row--is-issue   .dorp-payments__status { color: #bf6700; }

.dorp-payments__note {
  margin: 10px 4px 0;
  font-size: 12px;
  color: var(--dorp-muted);
  line-height: 1.5;
}

/* On narrower screens, status badge wraps below the amount to keep
   numbers comfortable to read */
@media (max-width: 460px) {
  .dorp-payments__head,
  .dorp-payments__row {
    grid-template-columns: 1.2fr 1fr;
    grid-template-rows: auto auto;
  }
  .dorp-payments__head span:nth-child(3),
  .dorp-payments__status {
    grid-column: 2;
    grid-row: 2;
    padding-top: 2px;
  }
}

/* ============================================================
   v1.13 DASHBOARD REDESIGN — Tabs + cleaner Activity layout

   The original dashboard had multiple overlapping sections (Earnings
   breakdown, Last 7 days, Monthly history, Lifetime) that confused riders.
   This redesign splits the dashboard into two tabs:

     - Activity: what you earned (hero card + compact strip + 7-day list)
     - Payments: what you've been paid (outstanding card + month list)

   Tap targets are all 44px+ for reliable mobile interaction. The (i) info
   button is gone — the explanation is baked into a single inline note
   below the hero amount, so there's no broken JS interaction to maintain.
   ============================================================ */

/* Tab bar */
.dorp-tabs {
  display: flex;
  gap: 8px;
  margin: 4px 0 20px;
  padding: 4px;
  background: var(--dorp-paper);
  border: 1px solid var(--dorp-line);
  border-radius: 999px;
}
.dorp-tab {
  flex: 1;
  padding: 12px 18px;
  border: 0;
  background: transparent;
  border-radius: 999px;
  color: var(--dorp-muted);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  min-height: 44px;
}
.dorp-tab:hover { color: var(--dorp-ink); }
.dorp-tab:active { background: rgba(0,0,0,0.06); }
.dorp-tab.is-active {
  background: var(--dorp-ink);
  color: #fff;
}
.dorp-tab__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dorp-orange);
  margin-left: 6px;
  vertical-align: 1px;
}

/* Panels */
.dorp-panel { display: none; }
.dorp-panel.is-active { display: block; }

/* Hero card (used in both Activity for "This month" and Payments for "Outstanding") */
.dorp-hero-card {
  background: #fff;
  border: 1px solid var(--dorp-line);
  border-radius: 16px;
  padding: 22px 22px 18px;
  margin-bottom: 16px;
}
.dorp-hero-card__label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--dorp-muted);
  font-weight: 600;
}
.dorp-hero-card__amount {
  font-size: 38px;
  font-weight: 700;
  color: var(--dorp-orange);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 8px 0 2px;
  font-variant-numeric: tabular-nums;
}
.dorp-hero-card__amount .pence { font-size: 0.6em; opacity: 0.85; }
.dorp-hero-card__hours {
  font-size: 15px;
  color: var(--dorp-ink);
  font-weight: 500;
}
.dorp-hero-card__hours strong { font-weight: 700; }
.dorp-hero-card__note {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--dorp-line);
  font-size: 12px;
  line-height: 1.55;
  color: var(--dorp-muted);
}
.dorp-hero-card__note strong { color: var(--dorp-ink); font-weight: 600; }

/* Outstanding variant */
.dorp-hero-card--outstanding {
  background: var(--dorp-orange-tint);
  border-color: var(--dorp-orange);
}
.dorp-hero-card--outstanding .dorp-hero-card__amount { color: var(--dorp-orange-deep); }
.dorp-hero-card--outstanding .dorp-hero-card__note { border-top-color: rgba(245, 86, 0, 0.2); }

/* 2-up stat strip (Yesterday | This week) */
.dorp-stat-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}
.dorp-stat-card {
  background: #fff;
  border: 1px solid var(--dorp-line);
  border-radius: 12px;
  padding: 14px 14px 12px;
}
.dorp-stat-card__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--dorp-muted);
  font-weight: 600;
  margin-bottom: 4px;
}
.dorp-stat-card__amount {
  font-size: 20px;
  font-weight: 700;
  color: var(--dorp-orange);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.dorp-stat-card__amount .pence { font-size: 0.65em; opacity: 0.85; }
.dorp-stat-card__hours {
  font-size: 12px;
  color: var(--dorp-muted);
  margin-top: 2px;
}
.dorp-stat-card__hours strong { color: var(--dorp-ink); font-weight: 600; }
.dorp-stat-card--zero .dorp-stat-card__amount { color: var(--dorp-silver, #c8c8c0); }
.dorp-stat-card--zero .dorp-stat-card__hours  { color: var(--dorp-silver, #c8c8c0); }

/* Generic content block (Last 7 days, Monthly history, Payments) */
.dorp-block {
  margin-bottom: 20px;
}
.dorp-block__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--dorp-ink);
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.dorp-block__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.dorp-block__title-row .dorp-block__title { margin: 0; }
.dorp-block__toggle {
  background: transparent;
  border: 0;
  color: var(--dorp-orange);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
}
.dorp-block__toggle:hover { background: var(--dorp-orange-tint); }
.dorp-block__toggle:active { background: var(--dorp-orange-tint); }
.dorp-block__note {
  margin: 10px 4px 0;
  font-size: 12px;
  color: var(--dorp-muted);
  line-height: 1.55;
}

/* Day list (Last 7 days) */
.dorp-daylist {
  background: #fff;
  border: 1px solid var(--dorp-line);
  border-radius: 12px;
  overflow: hidden;
}
.dorp-day {
  display: grid;
  grid-template-columns: 1.1fr 1fr 0.9fr;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--dorp-line);
}
.dorp-day:last-child { border-bottom: 0; }
.dorp-day__date {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.dorp-day__dow {
  font-size: 13px;
  font-weight: 600;
  color: var(--dorp-ink);
}
.dorp-day__num {
  font-size: 11px;
  color: var(--dorp-muted);
  margin-top: 1px;
}
.dorp-day__hours {
  font-size: 13px;
  color: var(--dorp-ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.dorp-day__hours strong { font-weight: 700; }
.dorp-day__amount {
  font-size: 14px;
  font-weight: 700;
  color: var(--dorp-orange);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.dorp-day__amount .pence { font-size: 0.7em; opacity: 0.85; }
.dorp-day--off { color: var(--dorp-muted); }
.dorp-day--off .dorp-day__dow,
.dorp-day--off .dorp-day__num,
.dorp-day--off .dorp-day__amount { color: var(--dorp-muted); font-weight: 500; }
.dorp-day__off {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dorp-muted);
}

/* Monthly history / Payments list */
.dorp-monthlist {
  background: #fff;
  border: 1px solid var(--dorp-line);
  border-radius: 12px;
  overflow: hidden;
}
.dorp-month {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.3fr;
  align-items: center;
  padding: 14px 14px;
  border-bottom: 1px solid var(--dorp-line);
  gap: 8px;
}
.dorp-month:last-child { border-bottom: 0; }
.dorp-month__period {
  font-size: 14px;
  font-weight: 600;
  color: var(--dorp-ink);
}
.dorp-month__hours {
  font-size: 12px;
  color: var(--dorp-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.dorp-month__hours strong { color: var(--dorp-ink); font-weight: 700; }
.dorp-month__amount {
  text-align: right;
  font-size: 15px;
  font-weight: 700;
  color: var(--dorp-orange);
  font-variant-numeric: tabular-nums;
}
.dorp-month__amount .pence { font-size: 0.7em; opacity: 0.85; }
.dorp-month__status {
  text-align: right;
  font-size: 12px;
  font-weight: 600;
  grid-column: 3;
}
.dorp-month--is-paid    .dorp-month__status { color: #1a7f37; }
.dorp-month--is-pending .dorp-month__status { color: #a02914; }
.dorp-month--is-issue   .dorp-month__status { color: #bf6700; }

/* Empty state for Payments tab when there are no payments yet */
.dorp-empty {
  background: #fff;
  border: 1px dashed var(--dorp-line);
  border-radius: 12px;
  padding: 30px 22px;
  text-align: center;
}
.dorp-empty__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--dorp-ink);
  margin-bottom: 8px;
}
.dorp-empty__body {
  font-size: 13px;
  color: var(--dorp-muted);
  line-height: 1.6;
  margin: 0;
}

/* Lifetime "Total paid" footer strip (Payments tab) */
.dorp-lifetime-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  margin-top: 16px;
  background: var(--dorp-paper);
  border: 1px solid var(--dorp-line);
  border-radius: 12px;
  font-size: 13px;
  color: var(--dorp-muted);
}
.dorp-lifetime-strip strong {
  color: var(--dorp-orange);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.dorp-lifetime-strip strong .pence { font-size: 0.7em; opacity: 0.85; }

/* Desktop: relax tab widths, expand hero a bit */
@media (min-width: 700px) {
  .dorp-tabs { max-width: 360px; }
  .dorp-hero-card { padding: 28px 28px 22px; }
  .dorp-hero-card__amount { font-size: 46px; }
  .dorp-stat-strip { grid-template-columns: 1fr 1fr; gap: 14px; }
}

/* ============================================================
   v1.13 FIXES — edge-to-edge spacing + sub-tabs + lifetime cards
   ============================================================ */

/* Outer horizontal padding for the tabbed content.
   The legacy .dorp-nav and .dorp-hero each have their own horizontal
   padding/margin built in (14px and 22px respectively). The new tabs +
   panels live below them and have no horizontal padding of their own,
   which caused everything to hug the screen edge on mobile.
   We match the 14px the nav uses for visual consistency. */
.dorp-tabs    { margin-left: 14px; margin-right: 14px; }
.dorp-panel   { padding: 0 14px; }
.dorp-bottom-signout { margin-left: 14px; margin-right: 14px; }

/* Sub-tabs (segmented control inside Activity panel).
   Smaller than main tabs but same overall pill style.
   On mobile each is 33% width, big tap targets. */
.dorp-subtabs {
  display: flex;
  gap: 4px;
  margin: 4px 0 16px;
  padding: 4px;
  background: var(--dorp-paper);
  border: 1px solid var(--dorp-line);
  border-radius: 999px;
}
.dorp-subtab {
  flex: 1;
  padding: 10px 8px;
  border: 0;
  background: transparent;
  border-radius: 999px;
  color: var(--dorp-muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  min-height: 38px;
}
.dorp-subtab:hover { color: var(--dorp-ink); }
.dorp-subtab:active { background: rgba(0,0,0,0.05); }
.dorp-subtab.is-active {
  background: #fff;
  color: var(--dorp-ink);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 0 0 1px var(--dorp-line);
}

.dorp-subpanel { display: none; }
.dorp-subpanel.is-active { display: block; }

/* Lifetime cards — 2-up grid of compact stat blocks */
.dorp-lifetime-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.dorp-lifetime-card {
  background: #fff;
  border: 1px solid var(--dorp-line);
  border-radius: 12px;
  padding: 14px 14px 12px;
}
.dorp-lifetime-card--full {
  grid-column: 1 / -1; /* span both columns */
}
.dorp-lifetime-card__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--dorp-muted);
  font-weight: 600;
  margin-bottom: 6px;
}
.dorp-lifetime-card__value {
  font-size: 22px;
  font-weight: 700;
  color: var(--dorp-orange);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.dorp-lifetime-card__value .pence { font-size: 0.65em; opacity: 0.85; }
.dorp-lifetime-card__value-plain {
  font-size: 17px;
  font-weight: 600;
  color: var(--dorp-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.dorp-lifetime-card__value-plain strong { font-weight: 700; }

/* ============================================================
   Lifetime cards — neutral treatment.
   Previously each card had its own tinted background + coloured left
   stripe (--orange / --ink / --teal / --gold / --purple). That felt
   busy against the rest of the dashboard which uses clean white cards.
   Now all lifetime cards share the base card style (white bg, subtle
   border). The one accent kept is the orange money-value colour on
   "Total earned" so it still reads as the standout stat — but even
   that comes from the base .dorp-lifetime-card__value rule which uses
   var(--dorp-orange), no variant class needed.
   ============================================================ */

/* Sub-text below the main stat (used for Best month).
   Same colour as the main value above (ink) so the two feel like a
   unified stat rather than two disconnected coloured strings. The
   size hierarchy alone establishes primary vs secondary. */
.dorp-lifetime-card__sub {
  margin-top: 4px;
  font-size: 13px;
  color: var(--dorp-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* "In progress" tag in Monthly list for the current month */
.dorp-month--current .dorp-month__period {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.dorp-month__current-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--dorp-orange-tint);
  color: var(--dorp-orange-deep);
  padding: 2px 7px;
  border-radius: 999px;
}

/* Rider tags — small coloured badges next to a name */
.dorp-tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  vertical-align: middle;
}
.dorp-tag {
  display: inline-block;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.4;
}

/* Dashboard header tags row — sits between name and "Active since" meta */
.dorp-hero__tags {
  margin: 6px 0 10px;
}

/* ============================================================
   v1.18 — UI refinements
   • Consistent duration styling everywhere ("16h 24m" formatted same way
     on hero, strip cards, day rows, month rows)
   • Header rows on 7-day and Monthly lists
   • Date sub-labels on Yesterday/This week cards
   ============================================================ */

/* CONSISTENT DURATION FORMATTING — all places where $hm() output renders.
   The numbers are bold (700), the unit letters (h / m) are lighter (500)
   and a touch muted so the eye lands on the number. Same look across
   every card and row. */
.dorp-hero-card__hours,
.dorp-stat-card__hours,
.dorp-day__hours,
.dorp-month__hours {
  font-weight: 500;        /* default weight for the unit letters */
  color: var(--dorp-ink);
}
.dorp-hero-card__hours strong,
.dorp-stat-card__hours strong,
.dorp-day__hours strong,
.dorp-month__hours strong {
  font-weight: 700;
  color: var(--dorp-ink);
}
/* Hero/strip duration text is a touch lighter in colour (matches the
   muted feel of "Yesterday" labels). The strong numbers stay ink-coloured. */
.dorp-hero-card__hours,
.dorp-stat-card__hours { color: var(--dorp-muted); }

/* Date sub-label on Yesterday / This week (e.g. "27 Jun" / "21–27 Jun") */
.dorp-stat-card__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}
.dorp-stat-card__sub {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--dorp-muted);
  opacity: 0.9;
  font-variant-numeric: tabular-nums;
}

/* Table-header rows for the 7-day and Monthly lists */
.dorp-day--header,
.dorp-month--header {
  background: var(--dorp-paper);
  padding-top: 8px;
  padding-bottom: 8px;
}
.dorp-day--header > div,
.dorp-month--header > div {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--dorp-muted);
  font-weight: 700;
}
/* Right-align the Duration + Earned headers to match the columns below */
.dorp-day--header .dorp-day__hours,
.dorp-day--header .dorp-day__amount,
.dorp-month--header .dorp-month__hours,
.dorp-month--header .dorp-month__amount {
  text-align: right;
  color: var(--dorp-muted);
}