/* Achievements page (#7) — trophy room
   Brand: #E8613A. Dark surface. Big numbers. SVG chart. */

.ach-page { padding-bottom: 60px; }

.ach-loading { padding: 40px 0; }

.ach-error { padding: 40px; text-align: center; color: var(--text-secondary); }


/* ───────── Hero ───────── */

.ach-hero {
  position: relative;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: var(--r-lg);
  padding: 38px 40px 30px;
  margin-bottom: 18px;
  isolation: isolate;
}

.ach-hero-glow {
  position: absolute;
  inset: -40% -10% auto auto;
  width: 65%;
  height: 220%;
  background: radial-gradient(closest-side, rgba(232, 97, 58, 0.55), rgba(232, 97, 58, 0.18) 35%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
  animation: ach-glow-drift 18s ease-in-out infinite alternate;
}

@keyframes ach-glow-drift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-6%, 4%) scale(1.08); }
}

.ach-hero-grain {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(232,97,58,0.06) 0, transparent 40%),
    radial-gradient(circle at 82% 78%, rgba(232,97,58,0.04) 0, transparent 35%);
  pointer-events: none;
  z-index: 0;
}

.ach-hero-inner { position: relative; z-index: 1; }

.ach-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 18px;
}
.ach-hero-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 12px rgba(232,97,58,0.85);
  animation: ach-pulse 2s ease-in-out infinite;
}
@keyframes ach-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.45; transform: scale(0.85); }
}

.ach-hero-amount {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 4px 0 4px;
  line-height: 1;
}
.ach-hero-num {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-weight: 600;
  font-size: clamp(54px, 10vw, 104px);
  letter-spacing: -0.04em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff 0%, #FBE9E1 60%, var(--brand) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 60px rgba(232,97,58,0.20);
}
.ach-hero-currency {
  font-family: var(--font-sans);
  font-size: clamp(16px, 2.4vw, 24px);
  font-weight: 500;
  color: var(--brand);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ach-hero-label {
  font-size: 13px;
  color: var(--text-secondary);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 26px;
}

.ach-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin-bottom: 26px;
}
.ach-hero-meta-item { display: flex; flex-direction: column; gap: 2px; }
.ach-hero-meta-item .val {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.ach-hero-meta-item .lbl {
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ach-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--brand);
  color: #fff;
  border: 0;
  border-radius: var(--r-pill);
  padding: 11px 22px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(232,97,58,0.32), inset 0 1px 0 rgba(255,255,255,0.20);
  transition: transform 160ms cubic-bezier(.4,0,.2,1), box-shadow 160ms cubic-bezier(.4,0,.2,1);
}
.ach-hero-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 36px rgba(232,97,58,0.45), inset 0 1px 0 rgba(255,255,255,0.25);
}
.ach-hero-btn:active { transform: translateY(0); }


/* ───────── Stats strip ───────── */

.ach-stats-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.ach-strip-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 500ms cubic-bezier(.4,0,.2,1), transform 500ms cubic-bezier(.4,0,.2,1), border-color 200ms;
  transition-delay: calc(var(--i) * 80ms);
}
.ach-strip-card.is-in { opacity: 1; transform: translateY(0); }
.ach-strip-card:hover { border-color: rgba(232,97,58,0.45); }
.ach-strip-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, var(--brand), transparent);
  opacity: 0.65;
}

.ach-strip-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(232,97,58,0.10);
  color: var(--brand);
}

.ach-strip-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ach-strip-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.ach-strip-value {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.ach-strip-detail {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ───────── Card frame ───────── */

.ach-card {
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  margin-bottom: 18px;
}
.ach-card-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
}
.ach-card-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
}
.ach-card-head .sub {
  font-size: 12px;
  color: var(--text-tertiary);
}


/* ───────── Growth chart ───────── */

.ach-card-chart { padding-bottom: 16px; }
.ach-chart-wrap { position: relative; }
.ach-chart {
  width: 100%;
  height: 280px;
  display: block;
}

/* Custom hover tooltip — replaces the slow native SVG <title> popup. */
.ach-chart-tooltip {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateX(-50%);
  pointer-events: none;
  background: linear-gradient(180deg, #2C2826, #1F1C1A);
  border: 1px solid rgba(232,97,58,0.40);
  border-radius: 10px;
  padding: 10px 14px;
  min-width: 180px;
  max-width: 280px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.55), 0 0 0 1px rgba(232,97,58,0.10), 0 0 24px rgba(232,97,58,0.15);
  opacity: 0;
  visibility: hidden;
  transition: opacity 140ms ease, visibility 0s linear 140ms, transform 140ms cubic-bezier(.34,1.56,.64,1);
  z-index: 5;
  text-align: left;
}
.ach-chart-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 140ms ease, visibility 0s, transform 180ms cubic-bezier(.34,1.56,.64,1);
}
/* Arrow pointing down at the dot when tooltip is above. */
.ach-chart-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: #1F1C1A;
  border-right: 1px solid rgba(232,97,58,0.40);
  border-bottom: 1px solid rgba(232,97,58,0.40);
}
/* Flip arrow up when tooltip is shown below the dot. */
.ach-chart-tooltip.is-below::after {
  bottom: auto;
  top: -6px;
  border-right: 0;
  border-bottom: 0;
  border-left: 1px solid rgba(232,97,58,0.40);
  border-top: 1px solid rgba(232,97,58,0.40);
  background: #2C2826;
}

.ach-tt-badge {
  display: inline-block;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brand);
  background: rgba(232,97,58,0.15);
  border-radius: var(--r-pill);
  padding: 3px 8px;
  margin-bottom: 6px;
}
.ach-tt-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ach-tt-date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.ach-tt-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 8px;
}
.ach-tt-earn {
  color: var(--brand);
  font-weight: 600;
}
.ach-tt-sep {
  color: var(--text-tertiary);
}
.ach-tt-total {
  color: var(--text-secondary);
}

.ach-chart-grid {
  stroke: var(--border-light);
  stroke-width: 1;
  stroke-dasharray: 2 4;
  opacity: 0.5;
}

.ach-chart-axis {
  font-family: var(--font-mono);
  font-size: 10px;
  fill: var(--text-tertiary);
  letter-spacing: 0.04em;
}

.ach-chart-area {
  opacity: 0;
  transition: opacity 1200ms ease 400ms;
}
.ach-chart-area.is-in { opacity: 1; }

.ach-chart-line {
  stroke: var(--brand);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 4000;
  stroke-dashoffset: 4000;
  transition: stroke-dashoffset 1800ms cubic-bezier(.4,0,.2,1);
}
.ach-chart-line.is-in { stroke-dashoffset: 0; }

.ach-chart-dot {
  opacity: 0;
  transition: opacity 280ms ease;
  transition-delay: calc(800ms + var(--i) * 100ms);
  cursor: pointer;
}
.ach-chart-dot.is-in { opacity: 1; }
.ach-chart-dot .ach-dot-halo {
  fill: var(--brand);
  opacity: 0.18;
  transition: opacity 200ms ease;
  /* SVG transforms default to the (0,0) corner — pin them to each
     circle's own center so hover scaling doesn't fling the dot
     across the chart. */
  transform-box: fill-box;
  transform-origin: center;
}
.ach-chart-dot .ach-dot-core {
  fill: var(--brand);
  stroke: var(--card);
  stroke-width: 2;
  transition: transform 200ms cubic-bezier(.4,0,.2,1);
  transform-box: fill-box;
  transform-origin: center;
}
.ach-chart-dot.is-big .ach-dot-halo { opacity: 0.32; }
.ach-chart-dot.is-big .ach-dot-core {
  fill: #FFD9C9;
  stroke: var(--brand);
  stroke-width: 2.5;
}
.ach-chart-dot:hover .ach-dot-halo { opacity: 0.50; }
.ach-chart-dot:hover .ach-dot-core { transform: scale(1.30); }

.ach-chart-today {
  stroke: var(--text-secondary);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0.55;
}
.ach-chart-today-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  fill: var(--text-secondary);
  text-transform: uppercase;
}


/* ───────── By compound bars ───────── */

.ach-bars { display: flex; flex-direction: column; gap: 14px; }

.ach-bar {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 400ms ease, transform 400ms cubic-bezier(.4,0,.2,1);
  transition-delay: calc(var(--i) * 60ms);
}
.ach-bar.is-in { opacity: 1; transform: translateY(0); }

.ach-bar-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}
.ach-bar-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.ach-bar-meta {
  font-size: 11.5px;
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
}

.ach-bar-track {
  position: relative;
  height: 26px;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  overflow: hidden;
}
.ach-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, rgba(232,97,58,0.85), var(--brand));
  border-radius: 8px;
  box-shadow: 0 0 24px rgba(232,97,58,0.30) inset;
  transition: width 1100ms cubic-bezier(.4,0,.2,1);
  transition-delay: calc(var(--i) * 80ms);
}
.ach-bar-fill.is-in { width: var(--target); }
.ach-bar-amount {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  z-index: 1;
}


/* ───────── Timeline ───────── */

.ach-card-timeline { padding-left: 24px; }

.ach-tl {
  position: relative;
  padding: 8px 0 8px 0;
}

/* Vertical spine */
.ach-tl::before {
  content: "";
  position: absolute;
  top: 12px; bottom: 12px;
  left: 19px;
  width: 2px;
  background: linear-gradient(180deg,
    rgba(232,97,58,0.55) 0%,
    rgba(232,97,58,0.30) 12%,
    rgba(232,97,58,0.30) 88%,
    rgba(232,97,58,0.55) 100%);
  border-radius: 1px;
}

.ach-tl-marker {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 0 14px 0;
  position: relative;
}
.ach-tl-marker .ach-tl-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  margin-left: 13px;
  background: var(--card);
  border: 2px solid var(--brand);
  box-shadow: 0 0 0 4px var(--card), 0 0 14px rgba(232,97,58,0.55);
  z-index: 1;
}
.ach-tl-marker.ach-tl-now .ach-tl-dot { animation: ach-pulse 2s ease-in-out infinite; }
.ach-tl-marker-body { padding: 4px 0; }
.ach-tl-marker-eyebrow {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
  font-weight: 600;
  margin-bottom: 4px;
}
.ach-tl-marker-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.ach-tl-marker-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* Deal entry */
.ach-tl-deal {
  display: flex;
  align-items: stretch;
  gap: 18px;
  padding: 8px 0;
  position: relative;
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 500ms cubic-bezier(.4,0,.2,1), transform 500ms cubic-bezier(.4,0,.2,1);
  transition-delay: calc(var(--i) * 100ms + 200ms);
}
.ach-tl-deal.is-in { opacity: 1; transform: translateX(0); }

.ach-tl-spine {
  flex-shrink: 0;
  width: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 18px;
}
.ach-tl-deal-num {
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--brand);
  color: var(--brand);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 0 0 4px var(--card), 0 6px 16px rgba(232,97,58,0.20);
  z-index: 1;
  transition: transform 200ms cubic-bezier(.4,0,.2,1), box-shadow 200ms;
}
.ach-tl-deal:hover .ach-tl-deal-num {
  transform: scale(1.06);
  box-shadow: 0 0 0 4px var(--card), 0 8px 22px rgba(232,97,58,0.40);
}

.ach-tl-card {
  flex: 1;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01));
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  padding: 18px 20px;
  position: relative;
  transition: border-color 200ms, transform 200ms cubic-bezier(.4,0,.2,1);
}
.ach-tl-card:hover {
  border-color: rgba(232,97,58,0.40);
  transform: translateY(-1px);
}
.ach-tl-card.is-biggest {
  border-color: rgba(232,97,58,0.40);
  background: linear-gradient(180deg, rgba(232,97,58,0.06), rgba(232,97,58,0.02));
  box-shadow: 0 0 0 1px rgba(232,97,58,0.18), 0 12px 32px rgba(232,97,58,0.10);
}

.ach-tl-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.ach-tl-name {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
}
.ach-tl-date {
  font-size: 12px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

.ach-tl-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(232,97,58,0.18);
  color: var(--brand);
  border-radius: var(--r-pill);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ach-tl-stones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.ach-tl-stone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(255,255,255,0.04);
  border-radius: var(--r-pill);
  font-size: 11.5px;
}
.ach-tl-stone .lbl { color: var(--text-tertiary); letter-spacing: 0.04em; }
.ach-tl-stone .val { color: var(--text); font-weight: 500; }

.ach-tl-amounts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
.ach-tl-amt {
  padding: 10px 12px;
  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 10px;
}
.ach-tl-amt-lbl {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}
.ach-tl-amt-val {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}
.ach-tl-amt.is-earn {
  background: linear-gradient(180deg, rgba(232,97,58,0.14), rgba(232,97,58,0.06));
  border-color: rgba(232,97,58,0.30);
}
.ach-tl-amt.is-earn .ach-tl-amt-val { color: var(--brand); }

.ach-tl-notes {
  font-size: 12.5px;
  color: var(--text-secondary);
  font-style: italic;
  padding: 8px 12px;
  background: rgba(255,255,255,0.02);
  border-left: 2px solid var(--brand);
  border-radius: 4px;
  margin-bottom: 12px;
}

.ach-tl-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity 200ms;
}
.ach-tl-card:hover .ach-tl-actions { opacity: 1; }

.ach-tl-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  border-radius: 6px;
  font-size: 11.5px;
  cursor: pointer;
  transition: background 160ms, color 160ms, border-color 160ms;
}
.ach-tl-action:hover {
  background: rgba(255,255,255,0.04);
  color: var(--text);
  border-color: var(--text-tertiary);
}
.ach-tl-action-danger:hover {
  background: rgba(161,63,40,0.15);
  color: var(--danger);
  border-color: var(--danger);
}


/* ───────── Empty state ───────── */

.ach-empty {
  position: relative;
  text-align: center;
  padding: 90px 32px;
  background: var(--card);
  border: 1px dashed var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.ach-empty-glow {
  position: absolute;
  inset: -50% auto auto -10%;
  width: 70%;
  height: 200%;
  background: radial-gradient(closest-side, rgba(232,97,58,0.18), transparent 60%);
  filter: blur(40px);
  pointer-events: none;
}
.ach-empty-icon {
  position: relative;
  width: 56px; height: 56px;
  margin: 0 auto 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(232,97,58,0.14);
  color: var(--brand);
  border-radius: 16px;
}
.ach-empty-icon svg { width: 28px; height: 28px; }
.ach-empty h2 {
  position: relative;
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.ach-empty p {
  position: relative;
  max-width: 460px;
  margin: 0 auto 24px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
}
.ach-empty .ach-hero-btn { position: relative; }


/* ───────── Mobile ───────── */

/* ───────── Form: counterparty section ───────── */

.ach-mk-party { display: flex; flex-direction: column; gap: 12px; }

.ach-mk-role-row { display: flex; gap: 8px; }
.ach-mk-role {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 12px;
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 160ms, border-color 160ms, color 160ms;
}
.ach-mk-role input { display: none; }
.ach-mk-role:hover { border-color: var(--text-tertiary); color: var(--text); }
.ach-mk-role.is-on {
  background: rgba(232,97,58,0.12);
  border-color: rgba(232,97,58,0.55);
  color: var(--brand);
  font-weight: 600;
}

.ach-mk-search { position: relative; }
.ach-mk-search > input {
  width: 100%;
  height: 36px;
  padding: 0 12px 0 34px;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23877' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px center;
  border: 1px solid var(--border-light);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  box-sizing: border-box;
  outline: 0;
}
.ach-mk-search > input:focus { border-color: var(--brand-dim, rgba(232,97,58,0.55)); background-color: rgba(232,97,58,0.03); }
.ach-mk-search > input::placeholder { color: var(--text-tertiary); }

.ach-mk-search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #1F1C1A;
  border: 1px solid rgba(232,97,58,0.32);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.6);
  max-height: 240px;
  overflow-y: auto;
  display: none;
  z-index: 10;
}
.ach-mk-search-results.is-open { display: block; }

.ach-mk-search-empty {
  padding: 14px 16px;
  font-size: 12.5px;
  color: var(--text-tertiary);
  text-align: center;
}

.ach-mk-search-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 120ms;
}
.ach-mk-search-result:last-child { border-bottom: 0; }
.ach-mk-search-result:hover { background: rgba(232,97,58,0.10); }
.ach-mk-result-main { display: flex; flex-direction: column; min-width: 0; }
.ach-mk-result-name { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ach-mk-result-phone { font-size: 11.5px; color: var(--text-tertiary); font-family: var(--font-mono); margin-top: 1px; letter-spacing: 0.02em; }

.ach-mk-role-pill {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.06);
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.ach-mk-role-pill.role-broker { background: rgba(232,97,58,0.16); color: var(--brand); }
.ach-mk-role-pill.role-buyer  { background: rgba(106,138,112,0.18); color: #9CC0A2; }

.ach-mk-linked {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: rgba(232,97,58,0.08);
  border: 1px solid rgba(232,97,58,0.30);
  border-radius: var(--r-sm);
  font-size: 12px;
  color: var(--text-secondary);
}
.ach-mk-linked.is-shown { display: flex; }
.ach-mk-linked svg { color: var(--brand); flex-shrink: 0; }
.ach-mk-linked strong { color: var(--text); font-weight: 600; }
.ach-mk-unlink {
  margin-left: auto;
  background: transparent;
  border: 0;
  color: var(--text-tertiary);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  transition: background 120ms, color 120ms;
}
.ach-mk-unlink:hover { background: rgba(255,255,255,0.06); color: var(--text); }


/* ───────── Form: highlight the "Your win" earnings field ───────── */

.ach-mk-earn input {
  background: linear-gradient(180deg, rgba(232,97,58,0.12), rgba(232,97,58,0.04)) !important;
  border-color: rgba(232,97,58,0.40) !important;
  font-family: var(--font-mono);
  font-size: 15px !important;
  font-weight: 600;
  color: var(--brand) !important;
  height: 42px !important;
  letter-spacing: 0.01em;
}
.ach-mk-earn input::placeholder {
  color: rgba(232,97,58,0.45) !important;
  font-weight: 400;
}
.ach-mk-earn input:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(232,97,58,0.15);
}


@media (max-width: 720px) {
  .ach-hero { padding: 28px 22px 24px; }
  .ach-hero-meta { gap: 12px 18px; }
  .ach-hero-meta-item .val { font-size: 15px; }

  .ach-card { padding: 18px 16px; }
  .ach-card-timeline { padding-left: 16px; }

  .ach-tl-deal { gap: 12px; }
  .ach-tl-spine { width: 32px; padding-top: 16px; }
  .ach-tl-deal-num { width: 32px; height: 32px; font-size: 12px; }
  .ach-tl-card { padding: 14px 14px; }
  .ach-tl-amounts { grid-template-columns: 1fr; }
  .ach-tl::before { left: 15px; }

  .ach-chart { height: 220px; }
}

/* ============================================================
   Responsive — broader breakpoints (additive only)
   Tablets (≤1024px) and phones (≤640px). Pre-existing 720px
   block above covers some phone styles already.
   ============================================================ */

@media (max-width: 1024px) {
  /* Hero scales down */
  .ach-hero { padding: 30px 28px 26px; }
  .ach-hero-meta { gap: 10px 22px; }

  /* Stats strip already auto-fits to min 200px; that yields 2 cols at iPad-portrait widths */

  /* Bars + timeline cards: keep responsive width */
  .ach-card { padding: 18px 18px; }
}

@media (max-width: 640px) {
  /* Hero */
  .ach-hero { padding: 22px 16px 20px; margin-bottom: 14px; }
  .ach-hero-eyebrow { margin-bottom: 12px; font-size: 10px; letter-spacing: 0.14em; }
  .ach-hero-amount { gap: 8px; flex-wrap: wrap; }
  .ach-hero-label { margin-bottom: 18px; }
  .ach-hero-meta { gap: 10px 18px; margin-bottom: 18px; }

  /* Stats strip: 1 col */
  .ach-stats-strip { grid-template-columns: 1fr; gap: 10px; margin-bottom: 14px; }
  .ach-strip-card { padding: 12px 14px; }
  .ach-strip-icon { width: 32px; height: 32px; }
  .ach-strip-value { font-size: 18px; }

  /* Cards */
  .ach-card { padding: 14px 14px; margin-bottom: 14px; }
  .ach-card-head { gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
  .ach-card-head h3 { font-size: 14px; }

  /* Chart shorter */
  .ach-chart { height: 200px; }

  /* Bars */
  .ach-bar-track { height: 22px; }
  .ach-bar-amount { font-size: 11px; right: 8px; }

  /* Timeline: tighten further */
  .ach-card-timeline { padding-left: 12px; padding-right: 12px; }
  .ach-tl-deal { gap: 10px; }
  .ach-tl-spine { width: 28px; padding-top: 14px; }
  .ach-tl-deal-num { width: 28px; height: 28px; font-size: 11px; }
  .ach-tl-card { padding: 12px 12px; }
  .ach-tl-card-head { flex-wrap: wrap; gap: 8px; }
  .ach-tl-name { font-size: 14px; }
  .ach-tl-amounts { grid-template-columns: 1fr; gap: 8px; }
  .ach-tl-amt-val { font-size: 14px; }
  .ach-tl-stones { gap: 6px; margin-bottom: 12px; }
  .ach-tl-actions { flex-wrap: wrap; }

  /* Empty state */
  .ach-empty { padding: 60px 20px; }

  /* Form atoms: prevent iOS zoom */
  .ach-mk-search > input,
  .ach-mk-earn input { font-size: 16px; }
}

@media (hover: none) and (pointer: coarse) {
  /* Hover-only timeline actions visible on touch */
  .ach-tl-actions { opacity: 1; }

  /* Touch tap targets */
  .ach-hero-btn { min-height: 40px; }
  .ach-tl-action { min-height: 36px; }
  .ach-mk-role { min-height: 40px; }
  .ach-mk-search-result { min-height: 44px; }
  .ach-mk-unlink { min-height: 32px; }
  /* Search input — comfortable touch height */
  .ach-mk-search > input { min-height: 40px; }
  /* Disable expensive hover-only transforms so taps don't trigger lingering states */
  .ach-tl-card:hover { transform: none; }
  .ach-tl-deal:hover .ach-tl-deal-num { transform: none; }
}

/* ============================================================
   Responsive — gap fixes (additive only)
   Hero amount can shrink at very narrow widths, stats strip
   detail wraps, bar head wraps, tooltip width caps on phone,
   timeline card head ensures badge wraps to next line.
   ============================================================ */

@media (max-width: 1024px) {
  /* Hero amount lets the number stay readable but currency wraps if needed */
  .ach-hero-amount { flex-wrap: wrap; row-gap: 4px; }

  /* Stats strip: 200px minmax → 2-up at iPad portrait. Let detail wrap to
     a second line if it's long instead of clipping with ellipsis. */
  .ach-strip-detail { white-space: normal; overflow: visible; text-overflow: clip; }

  /* Bar head: name + meta wrap so meta drops below name on long names */
  .ach-bar-head { flex-wrap: wrap; row-gap: 2px; }
  .ach-bar-name { flex: 1 1 auto; word-break: break-word; }
  .ach-bar-meta { flex: 0 0 auto; }

  /* Timeline card head: badge wraps below title on tablet */
  .ach-tl-card-head { flex-wrap: wrap; }
  .ach-tl-card-head > div:first-child { flex: 1 1 200px; min-width: 0; }
  .ach-tl-name { word-break: break-word; }

  /* Tooltip width caps to viewport */
  .ach-chart-tooltip { max-width: min(280px, calc(100vw - 32px)); }
}

@media (max-width: 640px) {
  /* Page bottom padding (avoid the bottom-tab bar from shell) */
  .ach-page { padding-bottom: 90px; }

  /* Hero number: clamp already handles fluid sizing, but cap at very narrow widths
     so the gradient text fits without horizontal scroll */
  .ach-hero-num { font-size: clamp(40px, 13vw, 64px); }
  .ach-hero-currency { font-size: 14px; }
  .ach-hero-meta-item .val { font-size: 14px; }
  .ach-hero-meta-item .lbl { font-size: 10px; letter-spacing: 0.06em; }
  .ach-hero-btn { padding: 10px 18px; font-size: 12.5px; }

  /* Stats strip: detail font slightly smaller; allow icon column to shrink */
  .ach-strip-card { gap: 10px; }
  .ach-strip-label { font-size: 10px; }
  .ach-strip-detail { font-size: 11.5px; }

  /* Bars: amount overlay can collide with long compound names */
  .ach-bar-amount { font-size: 10.5px; right: 6px; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
  .ach-bar-name { font-size: 12.5px; }
  .ach-bar-meta { font-size: 11px; }

  /* Timeline card amounts already 1col at 640; tighten label */
  .ach-tl-amt { padding: 8px 10px; }
  .ach-tl-amt-lbl { font-size: 10px; }
  .ach-tl-amt-val { font-size: 13px; }

  /* Stones (chips): smaller font, tighter padding so the row doesn't dominate */
  .ach-tl-stone { padding: 4px 8px; font-size: 11px; }

  /* Timeline notes: smaller indent so it reads well in a narrow card */
  .ach-tl-notes { font-size: 12px; padding: 6px 10px; }

  /* Timeline marker dot: smaller spine pad on phone */
  .ach-tl-marker { gap: 12px; }
  .ach-tl-marker .ach-tl-dot { margin-left: 9px; }
  .ach-tl-marker-title { font-size: 13px; }
  .ach-tl-marker-sub { font-size: 11.5px; }

  /* Chart tooltip — clamp width tightly */
  .ach-chart-tooltip { min-width: 140px; max-width: min(220px, calc(100vw - 24px)); padding: 8px 10px; }
  .ach-tt-name { font-size: 12px; }
  .ach-tt-date { font-size: 10.5px; }
  .ach-tt-row { font-size: 11px; }

  /* Empty state */
  .ach-empty h2 { font-size: 17px; }
  .ach-empty p { font-size: 12px; }

  /* Counterparty form (achievements modal): role buttons stay side-by-side
     but allow stacking if both labels grow */
  .ach-mk-role-row { flex-wrap: wrap; }
  .ach-mk-role { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .ach-mk-role span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Linked-contact strip: wrap if name is long */
  .ach-mk-linked { flex-wrap: wrap; row-gap: 4px; }
  .ach-mk-unlink { margin-left: 0; }

  /* Search result row: name can wrap to 2 lines */
  .ach-mk-result-name { white-space: normal; }
}

@media (max-width: 380px) {
  /* Last-resort tightening for the smallest viewports (e.g. iPhone SE).
     Keep desktop untouched. */
  .ach-hero { padding: 18px 12px 16px; }
  .ach-hero-num { font-size: clamp(34px, 14vw, 48px); }
  .ach-tl-deal { gap: 8px; }
  .ach-tl-spine { width: 24px; padding-top: 12px; }
  .ach-tl-deal-num { width: 24px; height: 24px; font-size: 10px; }
  .ach-card { padding: 12px 10px; }
}