/* Layout only. Cards, alerts, buttons and type come from style.css.
   These grids and the activity chart are page-local because the compiled
   Tailwind sheet is purged. */

.afd-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.afd-layout{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);gap:1.5rem}
.afd-chart{height:185px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem;align-items:end;padding:1.5rem .75rem 0;margin-top:1.25rem;border-bottom:1px solid rgba(255,255,255,.1);background:repeating-linear-gradient(to top,transparent 0,transparent 45px,rgba(255,255,255,.05) 46px)}
.afd-bar{height:var(--height);border-radius:.55rem .55rem 0 0;background:linear-gradient(to top,rgba(124,58,237,.28),rgba(45,212,191,.88));position:relative;min-height:4px}
.afd-bar span{position:absolute;top:-22px;width:100%;text-align:center;font-size:.7rem;color:rgba(255,255,255,.65)}
.afd-axis{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;padding:.75rem;font-size:.65rem;text-align:center;color:rgba(255,255,255,.45)}
.afd-progress{height:7px;border-radius:9px;background:rgba(255,255,255,.08);margin:1rem 0 .5rem;overflow:hidden}
.afd-progress span{display:block;width:67%;height:100%;background:linear-gradient(90deg,#a78bfa,#2dd4bf);border-radius:9px}
.afd-activity{list-style:none;padding:0;margin:1.25rem 0 0}
.afd-activity li{display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:1rem;padding:1rem 0;border-top:1px solid rgba(255,255,255,.08);align-items:center;margin:0}
.afd-clicks-table{width:100%;border-collapse:collapse}
.afd-clicks-table th{text-align:left;padding:.65rem 0;font-size:.7rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.45);border-bottom:1px solid rgba(255,255,255,.1)}
.afd-clicks-table td{padding:.75rem 0;border-top:1px solid rgba(255,255,255,.08);font-size:.8125rem;vertical-align:top;max-width:14rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.afd-btn[disabled]{opacity:.5;cursor:not-allowed}

@media (max-width:767px){
  .afd-layout{grid-template-columns:1fr}
  .afd-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:639px){
  .afd-stats{grid-template-columns:1fr}
  .afd-activity li{grid-template-columns:1fr;gap:.5rem}
  .afd-chart,.afd-axis{gap:.75rem}
}
