/* myRaceGENIE web (MG-8, the "Pit Wall" design chosen 18 Oct). Values come from tokens.css, generated from the phone
   app's tokens.json. Phone first: one column with the views in a bottom bar; from 760 px the views sit in the header
   and wide pages use two columns. admin.css stays underneath for the shared GenieCloud scripts' markup. */

/* ---------------------------------------------------------------------------------------------------- base */
body.my {
  --bg: var(--c-bg);
  --panel: var(--c-panel);
  --raised: var(--c-raised);
  --line: var(--c-line);
  --text: var(--c-text);
  --muted: var(--c-text2);
  --lime: var(--c-lime);
  --blue: var(--c-lime);
  --amber: var(--c-amber);
  --red: var(--c-danger);
  --ink: var(--c-on-lime);
  background: var(--c-bg);
  color: var(--c-text);
  font: 400 var(--t-base) / 1.45 var(--f-body);
  -webkit-text-size-adjust: 100%;
}
.my a {
  color: var(--c-lime);
}
.my a:hover {
  color: var(--c-lime-hover);
}
.my :focus-visible {
  outline: 2px solid var(--c-lime);
  outline-offset: 2px;
}
.my .muted {
  color: var(--c-text2);
}
.mr-skip {
  position: absolute;
  left: -999px;
  top: 8px;
  z-index: 50;
  background: var(--c-lime);
  color: var(--c-on-lime) !important;
  padding: 10px 14px;
  border-radius: var(--r-control);
}
.mr-skip:focus {
  left: 8px;
}
.mr-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.my h1 {
  font: 800 var(--t-xxl) / 1 var(--f-display);
  text-transform: uppercase;
  letter-spacing: 0.2px;
  margin: 6px 0 10px;
  color: var(--c-text);
}
.my h2 {
  font: 700 var(--t-lg) / 1.15 var(--f-display);
  text-transform: uppercase;
  letter-spacing: 0.2px;
  color: var(--c-text);
  margin: 0 0 8px;
}
.my h3 {
  font: 700 var(--t-base) / 1.2 var(--f-display);
  text-transform: uppercase;
  color: var(--c-text);
  margin: 10px 0 4px;
}
.my h4 {
  font: 600 var(--t-sm) / 1.3 var(--f-body);
  color: var(--c-text2);
  margin: 8px 0 4px;
}
.my section {
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-radius: var(--r-panel);
  padding: 14px;
  margin: 0 0 14px;
}
.my .tag {
  font: 500 var(--t-xs) / 1.4 var(--f-mono);
  border-color: var(--c-line-strong);
  color: var(--c-lime);
}

/* ---------------------------------------------------------------------------------------------- controls */
.my button,
.my input,
.my select,
.my textarea {
  font: 400 var(--t-base) var(--f-body);
  color: var(--c-text);
  background: var(--c-bg);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-control);
  padding: 0 14px;
  min-height: var(--touch);
}
.my textarea {
  padding: 10px 14px;
}
.my input[type='checkbox'],
.my input[type='radio'] {
  min-height: 0;
  width: 20px;
  height: 20px;
  padding: 0;
  accent-color: var(--c-lime);
}
.my input[type='file'] {
  border: none;
  padding: 0;
  background: none;
}
.my button {
  background: transparent;
  font-weight: 500;
}
.my button:hover:not(:disabled) {
  border-color: var(--c-text2);
}
.my button.primary,
.my .mr-btn {
  background: var(--c-lime);
  border-color: var(--c-lime);
  color: var(--c-on-lime);
  font: 800 19px / 1 var(--f-display);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  min-height: 48px;
  padding: 0 20px;
}
.my button.primary:hover:not(:disabled),
.my .mr-btn:hover:not(:disabled) {
  background: var(--c-lime-hover);
}
.my .mr-btn-secondary {
  background: transparent;
  border-color: var(--c-line-strong);
  color: var(--c-text);
  font: 500 var(--t-base) var(--f-body);
  text-transform: none;
  letter-spacing: 0;
}
.my .mr-btn-secondary:hover:not(:disabled) {
  background: var(--c-raised);
}
.my button.link,
.my button.my-link,
.my .mr-link {
  background: none;
  border: none;
  color: var(--c-lime);
  text-decoration: underline;
  padding: 0 4px;
  min-height: var(--touch);
  font-size: 13px;
}
.my label {
  color: var(--c-text);
}
.my-error {
  color: var(--c-danger);
}

/* ---------------------------------------------------------------------------------------------- header */
.my .bar {
  display: block;
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 0;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
}
.my .bar-in {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 10px 20px;
  min-height: 60px;
}
.my .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--c-lime);
  min-height: var(--touch);
}
.my #wordmark {
  font: 700 var(--t-xl) / 1 var(--f-display);
  color: var(--c-text);
  letter-spacing: 0;
}
.my #wordmark b {
  color: var(--c-lime);
  font-weight: 700;
}
.my .mr-mark,
.my .brand span {
  display: inline-flex;
}
.mr-side {
  display: contents;
}
.my #user-button {
  margin-left: auto;
  min-width: var(--touch);
  min-height: var(--touch);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.my .views {
  display: flex;
  gap: 4px;
  margin-left: 20px;
}
.my .views[hidden] {
  display: none;
}
.my .views button {
  border: none;
  background: none;
  color: var(--c-muted);
  font: 500 var(--t-md) var(--f-body);
  padding: 0 12px;
  position: relative;
}
.my .views button:hover {
  color: var(--c-text);
}
.my .views button[aria-pressed='true'] {
  color: var(--c-lime);
}
.my .views button[aria-pressed='true']::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 2px;
  background: var(--c-lime);
  border-radius: 1px;
}

/* ---------------------------------------------------------------------------------------------- layout */
.my main {
  max-width: 1120px;
  margin: 0 auto;
  padding: 14px 20px 32px;
}
.my #my-top {
  max-width: 1120px;
  margin: 0 auto;
  padding: 14px 20px 0;
}
#my-top:empty {
  display: none;
}
.my-foot {
  max-width: 1120px;
  margin: 0 auto !important;
  padding: 0 20px 28px !important;
  font-size: var(--t-sm);
  color: var(--c-muted) !important;
}
.my .grid {
  gap: 14px;
}
.my .grid > section {
  margin: 0;
}
.my #toast {
  background: var(--c-raised);
  border: 1px solid var(--c-line-strong);
  border-left: 3px solid var(--c-lime);
  border-radius: var(--r-control);
  padding: 10px 14px;
  color: var(--c-text);
  z-index: 40;
}
.my #toast.error {
  border-left-color: var(--c-danger);
}

/* ---------------------------------------------------------------------------------------------- shared components */
.mr-eyebrow {
  font: 500 var(--t-sm) / 1.3 var(--f-mono);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-lime);
  margin: 0 0 8px;
}
.my .mr-h {
  font: 700 var(--t-lg) / 1.15 var(--f-display);
  text-transform: uppercase;
  margin: 0;
  color: inherit;
}
.mr-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 24px;
  margin: -10px 0 0;
}
.mr-card-head .mr-h {
  padding-top: 10px;
}
.my .mr-card {
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-radius: var(--r-panel);
  padding: 14px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.my .mr-paper {
  background: var(--c-paper);
  color: var(--c-paper-ink);
  border: none;
  border-radius: var(--r-programme);
  padding: 14px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.my .mr-paper .mr-link {
  color: var(--c-paper-ink);
}
.mr-paper-note {
  color: var(--c-paper-muted);
  margin: 0;
}
.my .mr-empty p {
  margin: 0;
  color: var(--c-text2);
}
.my .mr-empty .mr-h {
  color: var(--c-text);
}
.mr-mono,
.my .num {
  font-family: var(--f-mono);
  font-weight: 500;
}
.mr-tag {
  font: 500 var(--t-xs) var(--f-mono);
  color: var(--c-paper-muted);
  text-transform: uppercase;
}
.mr-big {
  font: 800 var(--t-xl) / 1.05 var(--f-display);
  text-transform: uppercase;
}
.mr-sub {
  margin: 0;
  color: var(--c-text2);
  font-size: var(--t-md);
}
.mr-card .mr-mono {
  margin: 0;
  color: var(--c-lime);
  font-size: 13px;
}

/* the lime Next up card */
.my button.mr-next {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  text-align: left;
  background: var(--c-lime);
  color: var(--c-on-lime);
  border: none;
  border-radius: var(--r-hero);
  padding: 16px;
  font: 400 var(--t-md) / 1.35 var(--f-body);
  cursor: pointer;
}
.my button.mr-next:hover {
  background: var(--c-lime-hover);
}
.mr-next-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.mr-next .mr-eyebrow {
  color: var(--c-on-lime);
  font-size: var(--t-xs);
  letter-spacing: 1.5px;
  margin: 0;
}
.mr-pill {
  font: 500 var(--t-xs) var(--f-mono);
  text-transform: uppercase;
  background: var(--c-on-lime);
  color: var(--c-lime);
  border-radius: var(--r-pill);
  padding: 2px 7px;
  white-space: nowrap;
}
.mr-next-title {
  font: 800 var(--t-xxl) / 1 var(--f-display);
  text-transform: uppercase;
}

/* programme rows: a mono time and what happens; the driver's own rows in lime */
.mr-prog {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  row-gap: 9px;
  column-gap: 8px;
  font-size: var(--t-md);
}
.mr-when {
  font: 500 13px / 1.5 var(--f-mono);
  padding: 0 3px;
  align-self: start;
}
.mr-mine {
  background: var(--c-lime);
  border-radius: 2px;
}
.mr-mine-title {
  font-weight: 600;
}

/* label and value rows on a white card */
.mr-rows {
  margin: 0;
  display: grid;
}
.mr-rows div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--c-paper-line);
  font-size: var(--t-base);
}
.mr-rows div:first-child {
  padding-top: 0;
}
.mr-rows div:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.mr-rows dd {
  margin: 0;
}
.mr-message {
  margin: 0;
  font-size: var(--t-md);
  line-height: 1.4;
}

/* chart card */
.mr-pace {
  width: 100%;
  height: 96px;
  display: block;
}
.mr-chart-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 12px;
  font-size: 13px;
  color: var(--c-text2);
}
.mr-chart-foot b {
  color: var(--c-text);
  font-weight: 500;
}

/* stat tiles (History, Home): a grid, label above a big mono number (MG-2c) */
.my .hx-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
@media (min-width: 760px) {
  .my .hx-tiles {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}
.my .hx-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-radius: var(--r-programme);
  padding: 10px 12px;
}
.my .hx-tile-label {
  font: 500 var(--t-xs) / 1.3 var(--f-mono);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-text2);
}
.my .hx-tile b {
  font: 500 var(--t-xl) / 1.15 var(--f-mono);
  color: var(--c-text);
  overflow-wrap: anywhere;
}
.my .hx-tile-note {
  font-size: var(--t-xs);
  color: var(--c-text2);
}
.my .hx-pair,
.my .hx-circuit-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 760px) {
  .my .hx-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .my .hx-circuit-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}
.my .hx-records .mr-rows div {
  font-size: var(--t-md);
}
.my .hx-records dd {
  text-align: right;
  font-size: 13px;
}
.my .hx-line,
.my .hx-finish {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--c-text2);
}
.my .hx-finish {
  font: 600 var(--t-md) var(--f-mono);
  color: var(--c-lime);
}
.my .hx-best {
  color: var(--c-lime);
  padding-top: 10px;
}
.my .hx-trend-mini {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
  font-size: var(--t-sm);
}
.my .hx-trend-mini li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 70px;
  gap: 8px;
  color: var(--c-text2);
}
.my .hx-trend-mini b {
  color: var(--c-text);
  font-weight: 500;
}
.my .hx-trend-mini span:last-child {
  text-align: right;
}
.my .hx-season {
  display: grid;
  gap: 6px;
}
.my .hx-season .mr-eyebrow {
  margin: 0;
}
.mr-slim {
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-control);
  font-size: var(--t-sm);
  color: var(--c-text2);
}
.mr-slim b {
  color: var(--c-text);
}

/* ---------------------------------------------------------------------------------------------- home */
.mr-home {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
.mr-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

/* ---------------------------------------------------------------------------------------------- landing */
.mr-landing {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'hero' 'example' 'signin' 'features';
  gap: 20px;
  padding-top: 10px;
}
.mr-hero {
  grid-area: hero;
}
.my .mr-landing > section {
  margin: 0;
}
.my .mr-landing .mr-hero,
.my .mr-landing .mr-features,
.my .mr-landing .mr-signin {
  background: none;
  border: none;
  padding: 0;
}
.my .mr-display {
  font: 800 50px / 0.95 var(--f-display);
  text-transform: uppercase;
  margin: 0 0 14px;
}
.mr-lead {
  color: var(--c-text2);
  font-size: 16px;
  max-width: 34em;
  margin: 0;
}
.mr-example {
  grid-area: example;
}
.mr-example svg {
  width: 100%;
  height: auto;
  max-height: 180px;
}
.mr-legend {
  display: flex;
  gap: 14px;
  font-size: var(--t-sm);
  color: var(--c-paper-text2);
}
.mr-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mr-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-paper-ink);
  display: inline-block;
}
.mr-dot-mate {
  background: var(--c-mate);
}
.my .mr-signin {
  grid-area: signin;
}
.my .mr-signin .signin {
  margin: 0;
}
.mr-fine {
  text-align: center;
  color: var(--c-muted);
  font-size: var(--t-sm);
  margin: 10px 0 0;
}
.mr-features {
  grid-area: features;
}
.mr-features ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.mr-features li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 6px;
  border-top: 1px solid var(--c-line);
  padding-top: 12px;
}
.mr-features p {
  margin: 4px 0 0;
  color: var(--c-text2);
  font-size: var(--t-md);
}
.mr-num {
  font: 500 var(--t-sm) / 1.6 var(--f-mono);
  color: var(--c-lime);
}
/* Clerk's sign-in, dressed for the page */
.my .mr-clerk,
.my .mr-clerk-card {
  width: 100%;
  max-width: none;
}
.my .mr-clerk-card {
  background: var(--c-panel-alt);
  border: 1px solid var(--c-line);
  box-shadow: none;
}
.my .mr-clerk-title {
  font: 700 var(--t-xl) / 1.1 var(--f-display);
  text-transform: none;
}
.my .mr-clerk-primary {
  /* the page's own button rules would otherwise reach into Clerk's form */
  background: var(--c-lime) !important;
  color: var(--c-on-lime) !important;
  border: none !important;
  box-shadow: none !important;
  font: 800 19px / 1 var(--f-display);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  min-height: 48px;
}
.my .mr-clerk-input,
.my .mr-clerk-social {
  min-height: var(--touch);
}

/* ---------------------------------------------------------------------------------------------- age check */
.my .my-gate {
  max-width: 560px;
  margin: 10px auto 0;
  background: none;
  border: none;
  padding: 0;
}
.my .my-gate fieldset {
  border: none;
  padding: 0;
  margin: 12px 0;
  display: grid;
  gap: 8px;
}
.my .my-gate legend {
  color: var(--c-text2);
  padding: 0 0 6px;
}
.my .my-gate fieldset label {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 14px;
  background: var(--c-panel);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-control);
  cursor: pointer;
}
.my .my-gate fieldset label:has(input:checked) {
  border-color: var(--c-lime);
  background: var(--c-lime-soft);
}
.my-consent {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--touch);
}
.my-consent[hidden] {
  display: none;
}
.my-error {
  min-height: 1.4em;
  margin: 4px 0;
}

/* ---------------------------------------------------------------------------------------------- profile and CV */
.my-subnav {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  margin-bottom: 14px;
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-radius: var(--r-control);
}
.my .my-subnav button {
  border: none;
  min-height: 38px;
  border-radius: 8px;
  color: var(--c-text2);
}
.my .my-subnav button[aria-pressed='true'] {
  background: var(--c-lime);
  color: var(--c-on-lime);
  font-weight: 600;
}
.my .my-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 0;
}
.my-avatar {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--c-lime);
  background: var(--c-line);
}
.my-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 var(--t-xl) var(--f-display);
  color: var(--c-lime);
}
.my-photo-text {
  min-width: 0;
  flex: 1 1 auto;
}
.my-photo-text p {
  margin: 6px 0 0;
  font-size: var(--t-sm);
}
.my-file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-control);
  padding: 4px 12px;
  min-height: var(--touch);
}
.my-file {
  position: relative;
}
.my-file input {
  /* the label is the button; the input stays in the page for keyboards and screen readers */
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.my-file:has(input:focus-visible) {
  outline: 2px solid var(--c-lime);
  outline-offset: 2px;
}
.my div.row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.my .fields label,
.my .chk {
  color: var(--c-text2);
  font-size: var(--t-sm);
}
.my .fields label.chk,
.my .chk {
  min-height: var(--touch);
  align-items: center;
}
.my form.row {
  gap: 8px;
}
.my .warn {
  border-color: var(--c-amber);
}
.cv section {
  margin-bottom: 14px;
}
.cv fieldset {
  border: 1px solid var(--c-line);
  border-radius: var(--r-control);
  margin: 10px 0;
  padding: 8px 12px;
  display: grid;
  gap: 2px;
}
.cv legend {
  color: var(--c-text2);
  padding: 0 4px;
}
.cv label {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-height: var(--touch);
}
.cv input[type='text'] {
  max-width: 100%;
}
.cv-link {
  overflow-wrap: anywhere;
  font: 500 var(--t-sm) var(--f-mono);
  margin: 4px 0;
}
/* GC-10b: Your data (exports and account deletion) */
.data-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  gap: 4px;
}
.data-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
#my-data button.danger {
  color: var(--c-danger);
}

/* ---------------------------------------------------------------------------------------------- tables */
.my table {
  font-size: var(--t-md);
}
.my th {
  font: 600 var(--t-xs) / 1.3 var(--f-body);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--c-muted);
  padding: 6px 8px 6px 0;
}
.my td {
  border-bottom: 1px solid var(--c-line);
  padding: 7px 8px 7px 0;
}
.my td.num {
  font-family: var(--f-mono);
  font-size: 13px;
}

/* ---------------------------------------------------------------------------------------------- meetings (driving.js) */
.my .dv {
  max-width: 860px;
}
.my .dv h1 {
  margin-bottom: 8px;
}
.my .dv-team,
.my .dv-session,
.my .dv-debriefs,
.my .dv-videos,
.my .dv-plans,
.my .dv-copy {
  margin-bottom: 14px;
}
.my .dv-list {
  gap: 8px;
}
.my .dv-meet {
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-programme);
  padding: 12px 14px;
  gap: 3px;
}
.my .dv-meet b {
  font: 700 var(--t-xl) / 1.05 var(--f-display);
  text-transform: uppercase;
}
.my .dv-meet span:not(.muted):not(.dv-ask) {
  font: 500 13px var(--f-mono);
  color: var(--c-lime);
}
.my .dv-figures {
  font: 500 13px var(--f-mono);
  color: var(--c-lime);
}
.my .dv-figures b {
  font-weight: 500;
}
/* The timetable is the white programme card. */
.my .dv-timetable {
  background: var(--c-paper);
  color: var(--c-paper-ink);
  border: none;
  border-radius: var(--r-programme);
  margin-bottom: 14px;
}
.my .dv-timetable h2 {
  color: var(--c-paper-ink);
}
.my .dv-timetable th {
  color: var(--c-paper-muted);
}
.my .dv-timetable td {
  border-bottom-color: var(--c-paper-line);
}
.my .dv-timetable td:last-child {
  font: 500 13px var(--f-mono);
}
.my .dv-timetable .tag {
  color: var(--c-paper-muted);
  border-color: var(--c-paper-line);
}
.my .dv-table tr.dv-me td,
.my .dv-table tr.dv-best td {
  background: var(--c-lime);
  color: var(--c-on-lime);
  font-weight: 600;
}
.my .dv-table tr.dv-me td:first-child,
.my .dv-table tr.dv-best td:first-child {
  padding-left: 6px;
  border-radius: 3px 0 0 3px;
}
.my .dv-table tr.dv-unclean td {
  color: var(--c-muted);
}
.my .dv details summary {
  color: var(--c-lime);
  min-height: var(--touch);
  display: flex;
  align-items: center;
}
.my .dv-ask {
  color: var(--c-amber);
}
.my .dv-tag {
  border-top: 1px solid var(--c-line);
  padding: 8px 0;
}
.my .dv-tag button[aria-pressed='true'] {
  border-color: var(--c-lime);
  color: var(--c-lime);
}

/* ---------------------------------------------------------------------------------------------- notices (notices.js) */
.my .nt-item {
  font-size: var(--t-md);
  border-top-color: var(--c-line);
  padding: 10px 0;
}
.my .nt-unread {
  border-left: 3px solid var(--c-lime);
  padding-left: 10px;
}
.my .nt-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--touch);
}

/* ---------------------------------------------------------------------------------------------- history (history.js) */
.my .hx h3 {
  font-size: var(--t-base);
}
.my .hx .dv-table {
  font-size: 13px;
}
.my .hx-faster {
  color: var(--c-lime);
}
.my .hx-slower {
  color: var(--c-danger);
}
.my .hx-flag {
  color: var(--c-amber);
  font-size: var(--t-sm);
}
.my .hx-scroll {
  max-width: 100%;
  overflow-x: auto;
}
.my .hx-review fieldset,
.my .hx-confirm {
  border: 1px solid var(--c-line);
  border-radius: var(--r-control);
  margin: 10px 0;
  padding: 8px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.my .hx-confirm {
  display: grid;
  border-color: var(--c-lime);
}
.my .hx-review label,
.my .hx-fix label,
.my .hx-confirm label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-sm);
  flex-wrap: wrap;
}
.my .hx-review select,
.my .hx-review input,
.my .hx-fix select,
.my .hx-fix input {
  max-width: 100%;
}
.my .hx-groups button[aria-pressed='true'] {
  border-color: var(--c-lime);
  color: var(--c-lime);
}
.my .hx-preview tr.hx-head td {
  color: var(--c-lime);
  font-weight: 600;
}
.my .hx-session {
  border-top: 1px solid var(--c-line);
  padding-top: 6px;
}
/* MG-2b: driver codes and stints */
.my .hx-code {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--c-lime);
  border: 1px solid var(--c-line-strong);
  border-radius: 3px;
  padding: 0 3px;
}
.my .hx-stints {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--c-text2);
  white-space: nowrap;
}
.my .hx-stints b {
  color: var(--c-text);
  font-weight: 500;
}
.my .hx-stint-row td {
  border-top: 0;
  padding-top: 0;
}
/* MG-2c: a name like the driver's is a dark row with a lime marker and says why (never lime on lime). */
.my .hx .dv-table tr.hx-match td {
  background: var(--c-raised);
  color: var(--c-text);
}
.my .hx .dv-table tr.hx-match td:first-child {
  box-shadow: inset 3px 0 0 var(--c-lime);
}
.my .hx-match-tag {
  font-size: var(--t-xs);
  color: var(--c-lime);
  white-space: nowrap;
}
.my .hx .dv-table tr.hx-asking td {
  background: var(--c-lime-soft);
  color: var(--c-text);
}
.my .hx-confirm-row td {
  padding: 0 0 6px;
}
.my .hx-confirm-row .hx-confirm {
  margin: 0;
  background: var(--c-panel);
}
.my .hx-also {
  display: grid;
  gap: 4px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-control);
  padding: 6px 10px;
  margin: 0;
}
.my .hx-also legend {
  font-size: var(--t-sm);
  color: var(--c-text);
}
.my .hx-mono {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--c-text2);
}
.my .hx-outdated {
  font-size: var(--t-sm);
}

/* ---------------------------------------------------------------------------------------------- phone */
@media (max-width: 759px) {
  .my .bar-in {
    padding: 8px 16px;
    min-height: 56px;
    flex-wrap: nowrap;
  }
  .my main,
  .my #my-top {
    padding-left: 16px;
    padding-right: 16px;
  }
  .my-foot {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* The views as a bottom bar, clear of the home indicator. */
  .my .views {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    background: var(--c-bg);
    border-top: 1px solid var(--c-line);
    padding: 4px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .my .views button {
    min-height: 50px;
    padding: 0 2px;
    font-size: var(--t-sm);
    flex: none;
  }
  .my .views button[aria-pressed='true']::after {
    top: 0;
    bottom: auto;
    left: 30%;
    right: 30%;
  }
  .my.mr-in {
    padding-bottom: calc(70px + env(safe-area-inset-bottom));
  }
  .my.mr-in #toast {
    bottom: calc(76px + env(safe-area-inset-bottom));
  }
  .my section {
    overflow-x: auto;
  }
  .my .mr-display {
    font-size: 46px;
  }
  .my .my-card {
    gap: 12px;
  }
  .my-avatar {
    width: 60px;
    height: 60px;
    flex-basis: 60px;
  }
}
@media (max-width: 359px) {
  .my #wordmark {
    font-size: 19px;
  }
  .my .views button {
    font-size: var(--t-xs);
  }
  .mr-prog {
    grid-template-columns: 74px minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------------------------------------- desktop */
@media (min-width: 900px) {
  .mr-home {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
  }
  .mr-col {
    gap: 20px;
  }
  .mr-landing {
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
    grid-template-areas:
      'hero side'
      'features side';
    grid-template-rows: auto 1fr;
    column-gap: 56px;
    row-gap: 28px;
    align-items: start;
    padding-top: 36px;
  }
  .my .mr-display {
    font-size: 84px;
  }
  .mr-lead {
    font-size: 18px;
  }
  .mr-features ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
  }
  .mr-side {
    grid-area: side;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 84px;
  }
}
.my .hx-last .hx-stints {
  white-space: normal;
}

/* MG-2c: the account chip (photo or initials) and its menu */
.my-chip {
  position: relative;
}
.my-chip summary {
  list-style: none;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--c-lime);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-raised);
}
.my-chip summary::-webkit-details-marker {
  display: none;
}
.my-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.my-chip-initials {
  font: 700 var(--t-md) var(--f-display);
  color: var(--c-lime);
  letter-spacing: 0.5px;
}
.my-chip-menu {
  position: absolute;
  right: 0;
  top: 42px;
  z-index: 40;
  display: grid;
  min-width: 150px;
  background: var(--c-panel);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-control);
  padding: 4px;
}
.my-chip-menu button {
  text-align: left;
  border: none;
  min-height: 40px;
  padding: 0 10px;
  color: var(--c-text);
}
.my-chip-menu button:hover {
  background: var(--c-raised);
}

/* FX-5: a team's invite to add the driver, across both columns */
.mr-home > .mr-wide {
  grid-column: 1 / -1;
}
.mr-invite + .mr-invite {
  border-top: 1px solid var(--c-paper-line);
  padding-top: 8px;
}
.mr-invite-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* FX-5b: an answer that failed says why, with Retry */
.mr-invite-error {
  color: var(--c-danger);
  margin: 6px 0 0;
}

/* FX-C: meetings by phase and the published plan's line */
.my .dv-phase-title {
  margin: 10px 0 2px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.my .dv-pub button {
  font-size: 12px;
}