@charset "utf-8";
/* Bullion Tracker - app.css
   Main stylesheet entry point.
   Templates should keep linking to css/app.css.
   Global base/layout are loaded here, then the split component/page loader.
*/

@import url("./base.css");
@import url("./layout.css");
@import url("./components.css");

/* =========================================================
   BT PATCH: Progress page mobile overflow fixes
   Keeps progress cards inside viewport and clamps long coin pills.
   ========================================================= */

.progress-page,
.progress-wrap,
.progress-section,
.progress-group,
.progress-list,
.progress-row,
.progress-row--spotlight{
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}

.progress-list{
  display:grid;
  gap:16px;
}

.progress-row,
.progress-row--spotlight{
  overflow:hidden;
}

.progress-row *,
.progress-row--spotlight *{
  box-sizing:border-box;
  max-width:100%;
}

.progress-row-head{
  min-width:0;
}

.progress-row-copy{
  min-width:0;
}

.progress-row-title,
.progress-row-sub{
  min-width:0;
  overflow-wrap:anywhere;
}

.progress-detail-block{
  min-width:0;
  overflow:hidden;
}

.progress-inline-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  min-width:0;
}

.progress-next-inline-label{
  flex:0 0 auto;
}

.progress-next-pill{
  min-width:0;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.btn-complete-set{
  flex:0 0 auto;
}

.progress-child-breakdowns,
.progress-child-list,
.progress-child-card,
.progress-child-row{
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}

.progress-child-list{
  display:grid;
  gap:12px;
}

.progress-child-card,
.progress-child-row{
  overflow:hidden;
}

.progress-child-card *,
.progress-child-row *{
  max-width:100%;
  box-sizing:border-box;
}

.progress-meter,
.progress-child-meter{
  max-width:100%;
  overflow:hidden;
}

@media (max-width:720px){
  .progress-section,
  .progress-group{
    padding-left:0;
    padding-right:0;
  }

  .progress-row,
  .progress-row--spotlight{
    width:100%;
    padding:18px 16px;
    border-radius:18px;
  }

  .progress-row-head{
    display:grid;
    grid-template-columns:1fr auto;
    gap:10px;
    align-items:start;
  }

  .progress-row-title{
    font-size:20px;
    line-height:1.15;
  }

  .progress-row-pct{
    font-size:20px;
    line-height:1;
    white-space:nowrap;
  }

  .progress-inline-row{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }

  .progress-next-inline-label{
    font-size:13px;
    letter-spacing:.08em;
    text-transform:uppercase;
  }

  .progress-next-pill{
    display:block;
    width:100%;
    padding:10px 14px;
    border-radius:999px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .btn-complete-set{
    width:max-content;
    max-width:100%;
  }

  .progress-child-breakdowns{
    margin-top:18px;
  }

  .progress-child-list{
    gap:12px;
  }

  .progress-child-card,
  .progress-child-row{
    padding:14px;
    border-radius:16px;
  }
}

@media (max-width:430px){
  .progress-row,
  .progress-row--spotlight{
    padding:16px 14px;
  }

  .progress-row-title{
    font-size:18px;
  }

  .progress-row-sub{
    font-size:14px;
  }

  .progress-next-pill{
    font-size:15px;
  }

  .progress-group-head{
    gap:8px;
    align-items:flex-start;
  }
}