/* =========================================================
   HSTL — Chip + Second Level + Manage Modal
   NOTE: Modals use the GLOBAL glass modal system in style.css.
   So we DO NOT override modal positioning here.
========================================================= */

/* ---------- HSTL chip ---------- */
#hstl-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:12px;
  font-weight:500;
  color:rgb(var(--accent-rgb));
  text-shadow:0 0 6px rgb(var(--accent-rgb)/.35);
  user-select:none;
}
#hstl-chip .unit{ font-size:.8em; opacity:.7; }
#hstl-chip img{ filter:drop-shadow(0 0 2px rgb(var(--accent-rgb)/.35)); }

#hstl-chip.pulse{ animation:chipPulse .6s ease; }
@keyframes chipPulse{
  0%{transform:scale(1)}
  40%{transform:scale(1.08)}
  100%{transform:scale(1)}
}
@media (prefers-reduced-motion: reduce){
  #hstl-chip.pulse{ animation:none !important; }
}

/* ---------- HSTL progress (optional) ---------- */
#hstl-progress{
  display:inline-flex; align-items:center;
  width:80px; height:6px; margin-left:8px;
  background:rgba(255,255,255,.08);
  border-radius:6px; overflow:hidden;
}
#hstl-progress-bar{
  height:100%; width:0%;
  background:rgb(var(--accent-rgb));
  box-shadow:0 0 8px rgb(var(--accent-rgb)/.45);
  transition:width .25s ease;
}
@media (prefers-reduced-motion: reduce){
  #hstl-progress-bar{ transition:none !important; }
}

/* ===============================
   HSTL Second Level
================================= */
#view-hstl{ animation:fadeIn .3s ease; }

#view-hstl .title-wrap h1{
  color:var(--gold);
  text-shadow:0 0 8px rgb(var(--accent-rgb)/.25);
  letter-spacing:.4px;
}
#view-hstl .muted{
  color:color-mix(in srgb,var(--muted) 85%,var(--gold) 15%);
}
#view-hstl .card h3{
  color:var(--accent);
  text-shadow:0 0 6px rgb(var(--accent-rgb)/.35);
  margin-top:0;
}
#view-hstl .card strong{
  color:var(--fg);
  font-weight:700;
}

/* (only used if list appears later) */
#view-hstl .list .list-item::before{
  content:"•";
  color:var(--gold);
  font-weight:700;
}
#view-hstl .list .list-item:hover strong{ color:var(--gold); }

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

/* ===============================
   HSTL Modals (size + vibe ONLY)
   Centering/backdrop handled globally by:
   [role="dialog"] .modal-content / .modal-backdrop
================================= */

/* keep them same width as other small modals */
#hstl-about-modal .modal-content,
#hstl-manage-modal .modal-content{
  width:min(100% - 32px, 480px);
}

/* optional: tiny gold glow to feel “HSTL branded” */
#hstl-about-modal .modal-content,
#hstl-manage-modal .modal-content{
  box-shadow:
    var(--glass-shadow),
    0 0 18px rgb(var(--accent-rgb)/.18);
}

/* ===============================
   HSTL Control Center (Manage Modal)
   Layout + buttons + quick stats
================================= */

/* Slightly tighter, more "control center" feel */
#hstl-manage-modal .modal-content.hstl-cc {
  width: min(100% - 32px, 520px);
  box-shadow:
    var(--glass-shadow, 0 18px 40px rgba(0,0,0,0.65)),
    0 0 22px rgb(var(--accent-rgb, 212 175 55) / 0.22);
}

/* ------- Quick stats row at the top ------- */
#hstl-manage-modal .hstl-cc-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

#hstl-manage-modal .cc-stat {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06); /* flat grey glass */
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
}

#hstl-manage-modal .cc-label {
  display: block;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
  margin-bottom: 2px;
}

#hstl-manage-modal .cc-stat strong {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--fg, #e5e7eb);
}

/* ------- Section titles (reuse existing vibe) ------- */
#hstl-manage-modal .hstl-block {
  display: grid;
  gap: 8px;
}

#hstl-manage-modal .hstl-block-title {
  margin: 0;
  color: var(--accent, var(--gold));
  text-shadow: 0 0 6px rgb(var(--accent-rgb, 212 175 55) / 0.25);
  font-size: 1.05rem;
}

/* ------- Actions grid (2 columns on desktop) ------- */
#hstl-manage-modal .hstl-actions-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 520px) {
  #hstl-manage-modal .hstl-actions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* All action buttons same height + internal layout */
#hstl-manage-modal .hstl-actions-grid .btn {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  padding: 10px 12px;
  line-height: 1.2;
  white-space: normal;
}

/* Left text in buttons */
#hstl-manage-modal .hstl-actions-grid .btn span:first-child {
  font-size: 0.9rem;
}

/* Pill locked to right edge */
#hstl-manage-modal .hstl-pill {
  margin-left: auto;
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--gold);
  white-space: nowrap;
}

/* Red pill variant for spend actions */
#hstl-manage-modal .hstl-pill.red {
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.55);
  background: rgba(127, 29, 29, 0.45);
}

/* ------- Status line at bottom ------- */
#hstl-manage-modal .modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

#hstl-manage-modal .hstl-status {
  flex: 1;
  min-height: 18px;
  margin: 0;
  color: var(--muted, #9ca3af);
}

#hstl-manage-modal .hstl-status.ok {
  color: #22c55e;
  text-shadow: none;
}

#hstl-manage-modal .hstl-status.err {
  color: #ef4444;
  text-shadow: none;
}

/* ------- Small-screen tweaks ------- */
@media (max-width: 480px) {
  #hstl-manage-modal .hstl-cc-stats {
    grid-template-columns: 1fr 1fr;
  }

  #hstl-manage-modal .cc-stat:last-child {
    grid-column: 1 / -1;
  }
}

/* ------- Streak box: reacts to tiers ------- */
#hstl-manage-modal .cc-stat-streak {
  transition:
    border-color 0.18s ease-out,
    box-shadow 0.18s ease-out,
    background-color 0.18s ease-out;
}

/* 1–2 days: small green hint */
#hstl-manage-modal .cc-stat-streak.streak-tier-1 {
  border-color: rgba(34, 197, 94, 0.35); /* green-ish border */
}

/* 3–6 days: stronger green glow */
#hstl-manage-modal .cc-stat-streak.streak-tier-2 {
  border-color: rgba(34, 197, 94, 0.7);
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.28);
}

/* 7+ days: gold flex */
#hstl-manage-modal .cc-stat-streak.streak-tier-3 {
  border-color: var(--gold);
  box-shadow: 0 0 18px rgba(212, 175, 55, 0.45);
}

/* Daily login locked state */
.hstl-earn-btn.hstl-daily-locked {
  opacity: 0.6;
  cursor: default;
}

.hstl-earn-btn.hstl-daily-locked .hstl-pill {
  opacity: 0.8;
}

/* ===============================
   HSTL Overview + Chart (CLEAN)
================================= */

/* header row (same pattern as income/expenses/debt/hustles) */
#hstl-overview-card .card-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

#hstl-overview-card .headline-amount strong {
  font-size: 1.4rem;
}

#hstl-overview-card .metric {
  margin-bottom: 8px;
}

#hstl-overview-card .tiny-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ==== Layout: header left + main row ===================== */
#hstl-overview-card .hstl-header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 4px;
}

#hstl-overview-card .hstl-header-left h3 {
  margin: 0;
}

#hstl-overview-card .hstl-total-left {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 0 12px rgb(var(--accent-rgb) / 0.32);
  margin-top: 2px;
}

/* main row: KPIs left + chart right */
#hstl-overview-card .hstl-main-card {
  display: flex !important;
  gap: 24px;
  align-items: flex-start;
  margin-top: -6px;
}

#hstl-overview-card .hstl-summary {
  flex: 1 1 260px;
}

#hstl-overview-card .hstl-summary .metric {
  line-height: 1.25;
}

.hstl-kpi-value {
  font-weight: 500;
}

/* chart column */
#hstl-overview-card .hstl-chart-col {
  flex: 1.5 1 340px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

/* ===========================
   Chart Card Shell
   (same style as other cards)
=========================== */
.hstl-chart-card {
  position: relative;
  margin-top: -30px;
  width: 100%;
  max-width: 640px;
  padding: 0.30rem 1.25rem 0.30rem;
  border-radius: 18px;
  overflow: hidden;
}

/* inside header */
.hstl-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .25rem;
}

/* ===========================
   Chart Container (NO HEIGHT)
   — blueprint look only
=========================== */
.hstl-chart-container {
  position: relative;
  border-radius: 8px;
  border: 1px dashed rgba(148,163,184,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
  box-shadow: inset 0 0 20px rgba(15,23,42,0.45);
  background: transparent;
}

/* === HSTL inner glow — match income chart vibe === */
/* === Light blueprint gradient like income/debt/hustles === */
.hstl-chart-container::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;

  /* same palette as other blueprint charts */
  background: radial-gradient(
    circle at 50% 35%,
    rgba(255,255,255,0.08) 0%,     /* soft white haze */
    rgba(255,255,255,0.03) 45%,    /* gentle mid-tone */
    rgba(0,0,0,0.0) 100%           /* fade out */
  );

  border: 1px dashed rgba(180,180,180,0.15); /* same dashed border */
  box-shadow: inset 0 0 20px rgba(255,255,255,0.03);

  opacity: 0.9;   /* adjust 0.5–1.0 for strength */
  pointer-events: none;
  z-index: 0;
}

/* keep canvas above the glow */
.hstl-chart-container canvas,
.hstl-chart-container > canvas {
  background: transparent !important;
  width: 100% !important;
  height: 100% !important;
  position: relative;
  z-index: 1;
}

/* Subtle entrance for HSTL chart container */
.hstl-chart-container.chart-entrance {
  opacity: 0;
  transform: translateY(8px);
}

.hstl-chart-container.chart-entrance.is-on {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 260ms ease, transform 260ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .hstl-chart-container.chart-entrance,
  .hstl-chart-container.chart-entrance.is-on {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ===========================
   Activity list under chart
=========================== */
.hstl-activity-list {
  margin: 0.3rem 0 0;
  padding: 0.4rem 0 0;
  list-style: none;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 0.78rem;
  max-height: 80px;
  overflow-y: auto;
}

.hstl-activity-list li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.12rem 0;
  opacity: 0.9;
}

.hstl-activity-list li .hstl-activity-amount {
  font-weight: 500;
}

.hstl-activity-list li .hstl-activity-meta {
  opacity: 0.7;
}

.hstl-activity-empty {
  opacity: 0.6;
}

/* =====================================
   HSTL: Subtitle row + Inline Tip (toast)
   ===================================== */

/* Row under the H1: left subtitle + right tip */
#view-hstl .hstl-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 40px; /* prevents jump when tip appears */
}

/* Tip box (toast-style) */
#view-hstl #hstl-inline-tip {
  margin-left: auto;
  max-width: 360px;
  width: fit-content;

  background: rgba(0, 0, 0, 0.86);
  color: #fff;
  padding: 10px 14px;
  border-radius: 14px;

  font-size: 14px;
  line-height: 1.4;

  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  cursor: pointer;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  opacity: 0;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease;
}

#view-hstl #hstl-inline-tip.is-on {
  opacity: 1;
  transform: translateY(0);
}

#view-hstl #hstl-inline-tip:hover {
  opacity: 0.92;
}

/* ---------------- HSTL Levels ---------------- */
.levels-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.level-row{
  padding:10px 12px;
  border-radius:12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}

.level-bar{
  height:10px;
  border-radius:999px;
  background: rgba(255,255,255,0.08);
  overflow:hidden;
  margin-top:8px;
}

.level-bar-fill{
  height:100%;
  width:0%;
  border-radius:999px;

  /* ✅ Follows theme (animated) */
  background: rgb(var(--accent-rgb) / 0.90);
  box-shadow: 0 0 10px rgb(var(--accent-rgb) / 0.25);

  transition: width 260ms ease;
}

/* Optional: highlight current band */
.level-row.is-current{
  border-color: rgb(var(--accent-rgb) / 0.28);
  background: rgb(var(--accent-rgb) / 0.06);
}

/* HSTL Focus Card (top of modal) */
.hstl-focus-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 16px;
  border-radius:16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: inset 0 10px 30px rgba(0,0,0,0.35);
  margin: 0 0 12px 0;
}

.hstl-focus-kicker{
  font-size:13px;
  opacity:0.75;
}

.hstl-focus-title{
  font-size:24px;
  font-weight:700;
  margin-top:4px;
}

.hstl-focus-sub{
  margin-top:6px;
  font-size:14px;
  opacity:0.82;
}

/* Gentle ring */
.hstl-ring{
  position:relative;
  width:72px;
  height:72px;
}

.hstl-ring svg{ display:block; }

.hstl-ring-bg{
  fill:none;
  stroke: rgba(255,255,255,0.10);
  stroke-width:6;
}

.hstl-ring-fg{
  fill:none;
  stroke: #ff4fa3; /* switch to gold later if you want */
  stroke-width:6;
  stroke-linecap:round;
  transform: rotate(-90deg);
  transform-origin: 36px 36px;
}

.hstl-ring-text{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:14px;
}

/* HSTL focus: reuse pinned card, just align the right side nicely */
.hstl-focus-pinned-card .focus-pinned-right.hstl-focus-right{
  display:flex;
  flex-direction:column;
  align-items:center;   /* 👈 center horizontally */
  justify-content:center;
  min-width: 120px;
  text-align:center;    /* 👈 ensures text centers */
}

/* Gentle ring (uses accent color automatically) */
.hstl-ring{
  position:relative;
  width:72px;
  height:72px;
  margin-top:8px;
}

.hstl-ring-fg{
  fill:none;
  stroke: rgb(var(--accent-rgb) / .95); /* matches your theme accent */
  stroke-width:6;
  stroke-linecap:round;
  transform: rotate(-90deg);
  transform-origin: 36px 36px;
}

.hstl-ring-text{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:14px;
}

/* =====================================
   Responsive
   ===================================== */

@media (max-width: 520px) {
  #view-hstl .hstl-subhead {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  #view-hstl #hstl-inline-tip {
    max-width: 100%;
    white-space: normal;
  }
}

@media (max-width: 900px) {
  #hstl-overview-card .hstl-main-card {
    flex-direction: column;
    margin-top: 0;
  }

  #hstl-overview-card .hstl-chart-card {
    margin-top: 0;
  }
}