/* HYPER RED — signup */

.signup-layout {
  display: grid;
  gap: var(--sp-5);
}

@media (min-width: 960px) {
  .signup-layout {
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
  }
}

/* ---- Race brief ----
   The visual masterpiece of the application: a full-bleed editorial
   composition rather than a card. No border, no rounded surface — the
   event reads directly on the page, anchored by a giant round number,
   a hero-scale title, and a timing-tower countdown, in that priority
   order. Occupies most of the first screen so Sign Up opens cinematic. */
.race-brief {
  position: relative;
  overflow: hidden;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  min-height: var(--hero-min-height);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: clamp(var(--sp-6), 5vh, var(--sp-10));
  padding-bottom: clamp(var(--sp-5), 4vh, var(--sp-8));
  z-index: 10;
}

.race-brief::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(50% 60% at 38% 55%, rgba(255, 255, 255, 0.025), transparent 70%);
  pointer-events: none;
}

/* ---- Race imagery ----
   Map.webp (despite the filename, Hyper Red's cinematic prototype-car
   still) as a full-bleed layer behind the hero copy. The car sits toward
   the right; a left-to-right black gradient lets the copy column stay
   fully readable while the car emerges from darkness on the right. Image
   and fade are separate elements (not one background shorthand) so
   js/cinematic.js can scale/translate only the image on scroll without
   touching the fade, and so a slow image decode never delays the gradient
   painting. */
.race-brief-visual {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.race-brief-visual-img {
  position: absolute;
  /* Wider negative inset (was -4%/-4%) so the same source image renders
     noticeably larger/more zoomed within the hero — the car reads as a
     stronger visual anchor rather than a smaller element floating in a
     lot of empty frame (Section 7, item 16). */
  inset: -9% -9%;
  background-image: url("../assets/Map.webp");
  background-size: cover;
  background-position: 66% 42%;
  /* brightness 0.9 -> 0.97: the always-on legibility fade
     (.race-brief-visual-fade below) already protects text contrast, so
     this extra darkening on the image itself was mostly just hiding the
     car rather than helping readability. */
  filter: saturate(0.92) contrast(1.05) brightness(0.97);
  transform: scale(1) translate3d(0, 0, 0);
  transform-origin: 80% 45%;
  will-change: transform;
}

.race-brief-visual-fade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--bg-0) 0%, rgba(5, 5, 5, 0.94) 20%, rgba(5, 5, 5, 0.6) 46%, rgba(5, 5, 5, 0.16) 72%, rgba(5, 5, 5, 0.3) 100%),
    linear-gradient(180deg, rgba(5, 5, 5, 0.42) 0%, transparent 22%, transparent 68%, rgba(5, 5, 5, 0.58) 100%);
}

/* Progress-only darken layer, separate from the always-on legibility
   fade above (which must stay at full strength even at rest). Opacity
   driven entirely by js/cinematic.js via --hero-progress; see
   css/cinematic.css. Flat black keeps it a pure darken, not a color
   shift. */
.race-brief-visual-scrim {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
}

@media (max-width: 640px) {
  /* Mobile: the image recedes to a quiet backdrop rather than a
     compositional element competing with the stacked copy — still
     present (nothing is removed), just far more subdued. Brightness
     raised from 0.6 to 0.74 (Section 7, item 16 — "closer to ~0.70–0.75
     may work better than ~0.60") so the car doesn't disappear entirely
     on small screens; the fade gradient below still keeps the stacked
     copy fully readable over it. */
  .race-brief-visual-img { background-position: 72% 36%; filter: saturate(0.72) contrast(1.05) brightness(0.74); }
  .race-brief-visual-fade {
    background:
      linear-gradient(180deg, var(--bg-0) 0%, rgba(5, 5, 5, 0.88) 38%, rgba(5, 5, 5, 0.55) 62%, rgba(5, 5, 5, 0.82) 100%);
  }
}

.race-brief-top { position: relative; }

.race-brief-kicker {
  margin-bottom: var(--sp-3);
}

.race-brief-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.race-brief-round {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-faint);
  letter-spacing: 0.02em;
}

/* ---- The main event: giant round number + hero title, asymmetric ---- */
.race-brief-main {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  column-gap: clamp(10px, 2vw, 20px);
  margin: clamp(var(--sp-6), 6vh, 64px) 0;
}

/* Identity/scale device, never real telemetry — always aria-hidden.
   Deliberately allowed to sit slightly outside the title's baseline
   rhythm rather than being centered against it. A soft vertical
   gradient (rather than flat color) and a hairline rule before the
   title keep it from feeling pasted directly onto the copy. */
.race-brief-bignum {
  position: relative;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--font-size-num-giant);
  line-height: 0.78;
  color: var(--hr-red-bright);
  letter-spacing: -0.01em;
  transform: translateY(0.06em);
  pointer-events: none;
  user-select: none;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .race-brief-bignum {
    background: linear-gradient(165deg, var(--hr-red-bright) 0%, var(--hr-red) 62%, var(--hr-red-dim) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.race-brief-title {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--font-size-display-hero);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.9;
  max-width: 18ch;
  padding-left: clamp(20px, 4vw, 40px);
}

.race-brief-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  bottom: 0.06em;
  width: 1px;
  background: var(--hr-line-red);
}

.race-brief-bottom { position: relative; }

.race-brief-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4) var(--sp-6);
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--hr-line);
}

@media (min-width: 560px) {
  .race-brief-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Race-control information strip — the same brief data as above, framed
   as a restrained instrument row rather than a plain stat grid: a top
   rule to match the bottom one, tighter tracking, tabular values, and a
   red cue on the one value that actually changes state (registration).
   No new data — every value here is the existing #briefWeekRange /
   #briefClasses / #briefRegistration / #briefEntries text node. */
.race-brief-strip {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--hr-line);
}

.race-brief-strip .race-brief-stat-value {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

.race-brief-eyebrow #registrationBadge {
  min-height: 32px;
  padding: 7px 12px;
  font-size: 11px;
  letter-spacing: 0.08em;
}

.race-brief-strip #briefRegistration {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.race-brief-strip #briefRegistration[data-state="open"] {
  color: var(--hr-red-bright);
}

.race-brief-strip #briefRegistration[data-state="closed"] {
  color: var(--text-muted);
}

.race-brief-stat-label {
  font-family: var(--font-display);
  font-size: var(--font-size-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 5px;
}

.race-brief-stat-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.race-brief-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
}

.race-brief-countdown-block { display: flex; flex-direction: column; gap: 10px; }

.race-brief-countdown-label {
  color: var(--text-faint);
}

/* Stacked timing-tower digits: big numeral, tiny unit label beneath.
   Segments are built by JS as
   <span class="race-brief-countdown-seg"> value <span class="...-unit"> —
   see signup.js renderCountdownSegments(). Column layout puts the raw
   value text node above the appended unit span automatically. */
.race-brief-countdown {
  display: inline-flex;
  align-items: flex-start;
  gap: clamp(16px, 3vw, 30px);
}

.race-brief-countdown-seg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.race-brief-countdown-unit {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-faint);
}

.race-brief-countdown-static {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  color: var(--text-secondary);
  text-transform: none;
  letter-spacing: normal;
}

/* Closed-registration state */
.signup-closed {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  padding: var(--sp-5);
  background: var(--bg-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: inset 2px 0 0 var(--status-warn);
}

.signup-closed-icon {
  width: 22px;
  height: 22px;
  color: var(--status-warn);
  flex-shrink: 0;
  margin-top: 2px;
}

.signup-closed-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  margin-bottom: 4px;
}

/* ---- Form panel ----
   Field groups are auto-numbered with a CSS counter (01 DRIVER, 02
   ENTRY, ...) so the form reads as a short numbered sequence — the
   "01 DRIVER / 02 CLASS / ..." progression from the brief — without
   hand-maintaining index numbers in the markup or JS. */
.signup-form-panel { margin-top: var(--sp-5); scroll-margin-top: calc(var(--header-height) + var(--sp-4)); }

.signup-form-panel form { counter-reset: hr-field-group; }

.field-group-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-4);
  counter-increment: hr-field-group;
}

.field-group-title::before {
  content: counter(hr-field-group, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--hr-red-bright);
}

.field-group-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}

.field-group { margin-bottom: var(--sp-6); }
.signup-confirm-group { margin-bottom: 0; }
.signup-confirm-group .field-group-title { margin-bottom: var(--sp-4); }

.form-two-col {
  display: grid;
  gap: var(--sp-4);
}

@media (min-width: 520px) {
  .form-two-col { grid-template-columns: 1fr 1fr; }
}

/* ---- Timezone control ---- */
.tz-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
}

.tz-control-info {
  font-size: 12.5px;
  color: var(--text-muted);
}

.tz-control-info strong {
  color: var(--text-secondary);
  font-weight: 600;
}

/* ---- Sticky entry confirmation (desktop sidebar / mobile bottom sheet) ----
   Styled as a small entry docket / timing slip rather than a second
   generic card: a numbered "ENTRY" heading, monospaced values in a
   labelled column, and a live status line instead of a plain title. */
.entry-summary {
  position: sticky;
  top: calc(var(--header-height) + var(--sp-4));
  border-top: 2px solid var(--hr-red);
}

.entry-summary-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px dashed var(--hr-line);
}

.entry-summary-title > .hr-index {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-primary);
}

.entry-summary-status {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  padding: 2px 7px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
}

.entry-summary-status[data-ready="true"] {
  color: var(--status-success);
  border-color: rgba(53, 196, 106, 0.35);
}

.entry-summary-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: var(--sp-5);
}

.entry-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 13.5px;
  padding: 9px 0;
  border-bottom: 1px dotted var(--hr-line);
}

.entry-summary-row:last-child { border-bottom: none; padding-bottom: 0; }

.entry-summary-row-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}
.entry-summary-row-value {
  font-family: var(--font-mono);
  color: var(--text-primary);
  font-weight: 500;
  text-align: right;
}
.entry-summary-row-value.is-empty { color: var(--text-faint); font-weight: 400; font-family: var(--font-body); }

.entry-summary-hint {
  font-size: 11.5px;
  color: var(--text-faint);
  margin-top: var(--sp-3);
  text-align: center;
}

/* ---- Success state ---- */
.entry-success {
  text-align: center;
  padding: var(--sp-4) 0;
}

.entry-success-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto var(--sp-4);
  border-radius: 50%;
  background: var(--status-success-bg);
  color: var(--status-success);
  display: flex;
  align-items: center;
  justify-content: center;
}

.entry-success-title {
  font-size: 22px;
  margin-bottom: var(--sp-2);
}

.entry-success-detail {
  font-size: 13.5px;
  color: var(--text-secondary);
  margin-bottom: var(--sp-5);
}

.entry-success-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.entry-success-actions #successViewRoster svg {
  width: 14px;
  height: 14px;
  transition: transform var(--dur-base) var(--ease-cinematic);
}
.entry-success-actions #successViewRoster:hover svg {
  transform: translateX(4px);
}

/* ---- Grid Pass ----
   A single shareable-looking credential card, not a second success
   message. Fixed aspect ratio, near-black surface, thin red top/left
   accent, and a giant near-invisible "HR" watermark bleeding off the
   corner — text-stroke keeps it readable as a mark rather than a solid
   block of color. No QR code, barcode, or invented entry number: only
   #gridPassDriver / #gridPassClass / #gridPassRace / #gridPassSchedule,
   all populated in signup.js showSuccess() straight from the entry that
   was actually just written to Firestore. */
.grid-pass {
  position: relative;
  overflow: hidden;
  max-width: 440px;
  margin: 0 auto var(--sp-6);
  aspect-ratio: 1.7 / 1;
  background: linear-gradient(155deg, var(--bg-3) 0%, var(--bg-1) 65%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-lg);
  animation: gridPassIn 480ms var(--ease-cinematic);
}

.grid-pass::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--hr-red) 0%, transparent 65%);
}

.grid-pass::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: linear-gradient(180deg, var(--hr-red) 0%, transparent 65%);
}

/* Small brand lockup in the lower-right of the card — the wordmark
   treatment from the header (Hyper<em>Red</em>) plus the actual star
   logo mark, in red. Replaces an earlier giant near-invisible "HR"
   watermark that read as an accidental grey smudge rather than a
   deliberate brand moment. */
.grid-pass-brandmark {
  position: absolute;
  right: var(--sp-5);
  bottom: 46px;
  display: flex;
  align-items: center;
  gap: 7px;
  z-index: 0;
  pointer-events: none;
}

.grid-pass-brandmark-word {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--hr-red-bright);
}

.grid-pass-brandmark-word em {
  font-style: normal;
  color: var(--text-primary);
}

.grid-pass-brandmark-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.grid-pass-top,
.grid-pass-body,
.grid-pass-bottom {
  position: relative;
  z-index: 1;
}

.grid-pass-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.grid-pass-brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.grid-pass-brand em { font-style: normal; color: var(--hr-red-bright); }

.grid-pass-tag {
  font-family: var(--font-display);
  font-size: var(--font-size-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-faint);
}

.grid-pass-status {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--status-success);
}

.grid-pass-driver {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 5vw, 30px);
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1.05;
  margin-top: 3px;
}

.grid-pass-class {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--hr-red-bright);
  margin-top: 3px;
}

.grid-pass-race {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-top: var(--sp-3);
}

.grid-pass-schedule {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

.grid-pass-bottom {
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  border-top: 1px dashed var(--hr-line);
  padding-top: var(--sp-3);
}

@keyframes gridPassIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Driver memory chip ---- */
.driver-memory-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 10px 14px;
  background: rgba(227, 35, 43, 0.08);
  border: 1px solid var(--border-red);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-5);
  font-size: 12.5px;
  color: var(--text-secondary);
}

.driver-memory-chip button {
  background: none;
  border: none;
  color: var(--hr-red-bright);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 6px 4px;
  min-height: var(--touch-target);
}

/* ===== Event-specific circuit command layer ===== */
.race-brief-track {
  position: absolute;
  right: clamp(-36px, 1vw, 24px);
  top: 7%;
  width: min(48vw, 620px);
  height: 78%;
  z-index: 1;
  opacity: 0.42;
  pointer-events: none;
}
.track-svg { width: 100%; height: 100%; overflow: visible; }
.track-shadow, .track-line { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.track-shadow { stroke: rgba(0,0,0,.72); stroke-width: 10; }
.track-line { stroke: var(--hr-red-bright); stroke-width: 3.2; filter: drop-shadow(0 0 12px rgba(227,35,43,.28)); }
.track-tba-label { fill: var(--text-muted); font: 700 18px var(--font-display); letter-spacing: .14em; }
.track-svg.is-tba .track-line { stroke-dasharray: 8 10; opacity: .65; }
.track-svg-hero .track-line { stroke-dasharray: 1; stroke-dashoffset: var(--hero-track-offset, .28); }
.race-brief-command { min-width: 0; }
.race-brief-command-line { display:flex; align-items:center; gap:12px; margin-bottom:7px; font:700 11px var(--font-display); letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); }
.race-brief-command-line span:first-child { color: var(--hr-red-bright); }
.race-brief-location { margin-top: 8px; font:600 12px var(--font-mono); color:var(--text-faint); text-transform:uppercase; letter-spacing:.05em; }

/* ===== My Entries ===== */
.my-entries-panel { margin-bottom: var(--sp-5); border-color: rgba(227,35,43,.22); }
.my-entries-panel[hidden] { display:none; }
.my-entries-head { align-items:flex-start; }
.my-entries-empty { display:flex; flex-direction:column; gap:4px; padding:16px; border:1px dashed var(--border-subtle); border-radius:var(--radius-md); color:var(--text-muted); }
.my-entries-empty strong { color:var(--text-primary); }
.my-entry-loading { color:var(--text-muted); font-size:13px; }
#myEntriesContainer { display:grid; gap:10px; }
.my-entry-card { padding:15px; border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:linear-gradient(140deg,rgba(227,35,43,.055),var(--bg-2) 42%); }
.my-entry-card-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.my-entry-card-head h3 { margin:4px 0 0; font:800 21px var(--font-display); text-transform:uppercase; }
.my-entry-readout { display:flex; flex-wrap:wrap; gap:8px 16px; margin:12px 0; color:var(--text-secondary); font:600 12px var(--font-mono); }
.my-entry-readout span + span::before { content:"/"; margin-right:16px; color:var(--text-faint); }
.my-entry-actions, .my-entry-form-actions { display:flex; flex-wrap:wrap; gap:7px; }
.my-entry-actions[hidden] { display:none; }
.my-entry-edit[hidden] { display:none; }
.my-entry-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:14px 0; }
.my-entry-grid label { display:flex; flex-direction:column; gap:5px; font:700 10px var(--font-display); text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); }
.my-entry-grid input, .my-entry-grid select { min-height:40px; padding:0 10px; border:1px solid var(--border-subtle); border-radius:var(--radius-sm); background:var(--bg-1); color:var(--text-primary); }

.my-entry-card-badges {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.my-entry-card-recovered {
  box-shadow: inset 2px 0 0 var(--hr-red);
}