/* ===== Tokens (adjust colors here) ===== */
.tl-mod-acc{
  --brand:#CC1818;        /* red headers */
  --brand-ink:#fff;       /* white text on red */
  --ink:#1a1a1a;
  --muted:#5f6673;
  --card:#fff;
  /* --stroke:#e7e9ef;
  --radius-lg:12px;
  --radius-sm:8px; */
  /* --shadow:0 1px 2px rgba(16,24,40,.06); */
}

/* ===== Layout ===== */
.tl-grid{
  display:grid;
  grid-template-columns: 50% 50%;
  gap:28px;
  align-items:start;
}

.tl-left{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--radius-lg);
  box-shadow:0 0 0 1px var(--stroke) inset;
  overflow:hidden;
}

.tl-right-inner{ padding:0; }
.tl-dynamic{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:28px;
}

/* ===== Group headers ===== */
.tl-acc-toggle{
  width:100%; text-align:left; padding:16px 14px;
  font-weight:800; letter-spacing:.2px;
  background:var(--brand); color:var(--brand-ink);
  border:0; cursor:pointer; position:relative;
}
.tl-acc-group + .tl-acc-group .tl-acc-toggle{ border-top:1px solid rgba(0,0,0,.05); }
.tl-caret{
  position:absolute; right:14px; top:50%;
  width:8px; height:8px;
  border-right:2px solid var(--brand-ink);
  border-bottom:2px solid var(--brand-ink);
  transform:translateY(-50%) rotate(-45deg);
}
.tl-acc-group.is-open .tl-caret{ transform:translateY(-50%) rotate(45deg); }

.tl-acc-panel{ display:none; background:#fff; }
.tl-acc-group.is-open .tl-acc-panel{ display:block; }

/* ===== Button list ===== */
.tl-item-list{
  list-style:none; margin:0; padding:12px;
  /* display:grid; gap:10px; */
  display: inline-block;
}
.tl-item-link{
  display:block; padding:12px 14px;
  background:#f7dede; color:#6b2323;
  border:1px solid #efc9c9; border-radius:var(--radius-sm);
  text-decoration:none; font-weight:700;
  transition:box-shadow .15s, border-color .15s;
}
.tl-item-link:hover{ border-color:#dd8b8b; }
.tl-item-link.is-active{ border-color:#CC1818; box-shadow:0 0 0 2px rgba(204,24,24,.12) inset; }

/* ===== Right pane typography ===== */
.tl-dynamic h2{ font-size:clamp(28px,2.8vw,40px); line-height:1.2; margin:0 0 10px; color:#51565c;}
.tl-dynamic p{ color:var(--muted); font-size:17px; line-height:1.7; margin:8px 0 0; }

.tl-empty{ color:#889; padding:12px 14px; }
.tl-store{ display:none !important; }

/* ===== MOBILE: content under buttons ===== */
@media (max-width:900px){
  .tl-grid{ grid-template-columns:1fr !important; gap:16px !important; }
  .tl-right{ display:none !important; }            /* hide right pane on mobile */
  .tl-left{ display:block !important; }

  .tl-mobile-content{
    display:block;                     /* JS will fill this on click */
    margin:12px 12px 4px;
    padding:16px;
    background:#fff;
    border:1px solid var(--stroke);
    border-radius:12px;
    box-shadow:var(--shadow);
  }
  .tl-item-link{ padding:14px 16px; font-size:16px; }
}