/*:root {
   --bar-height: 44px;
   --bar-radius: 10px;
   --anim-duration: 1s;
   --anim-easing: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
   box-sizing: border-box;
}

body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   background: #0a0d12;
   color: #f1f5f9;
   padding: 28px 20px 60px;
   max-width: 480px;
   margin: 0 auto;
}*/

.header-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 6px;
}

h1II {
   font-size: 13px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   color: #64748b;
   margin: 0;
}

.global-toggle {
   display: none;
}

.global-btn {
   display: flex;
   align-items: center;
   gap: 6px;
   font-size: 12px;
   font-weight: 600;
   color: #94a3b8;
   cursor: pointer;
   padding: 5px 10px;
   border: 1px solid #1e293b;
   border-radius: 20px;
   user-select: none;
}

   .global-btn:hover {
      color: #81e6d9;
      border-color: #4fd1c5;
   }

.global-icon {
   display: inline-block;
   width: 7px;
   height: 7px;
   border-right: 2px solid currentColor;
   border-bottom: 2px solid currentColor;
   transform: rotate(45deg);
   transition: transform .25s ease;
}

.global-toggle:checked ~ .header-row .global-icon {
   transform: rotate(-135deg);
}

.global-toggle:checked ~ .header-row .global-label::after {
   content: "Collapse all";
}

.global-toggle:not(:checked) ~ .header-row .global-label::after {
   content: "Expand all";
}

.hint {
   font-size: 11px;
   color: #475569;
   margin-top: 0;
   margin-bottom: 20px;
}

.item {
   overflow: hidden;
   margin-bottom: 12px;
   margin-bottom: 5px;
   border-radius: var(--bar-radius);
   border-radius: 8px;
}

.toggle {
   display: none;
}

.bar-track {
   display: block;
   position: relative;
   width: 100%;
   background: rgba(255,255,255,.05);
   overflow: hidden;
   cursor: pointer;
   height: var(--bar-height);
   height: 32px;
   height: 26px;
   border-radius: var(--bar-radius);
   border-radius: 8px;
}

.bar-fill {
   display: flex;
   position: relative;
   height: 100%;
   width: 0%;
   align-items: center;
   padding: 0 14px;
   white-space: nowrap;
   animation: fillBar var(--anim-duration) var(--anim-easing) forwards;
   border-radius: var(--bar-radius);
   border-radius: 8px;
}

@keyframes fillBar {
   from {
      width: 0%;
   }

   to {
      width: var(--target);
   }
}

/* Each bar is addressed directly by its own class — no nth-of-type, no sibling counting.
     --target and background are the two values you will eventually swap for component parameters. */
.bar-fill.t1 {
   --target: 70%;
   background: linear-gradient(90deg, #1f6b63, #2f9188);
   animation-delay: 0s;
}

.bar-fill.t2 {
   --target: 90%;
   background: linear-gradient(90deg, #5eead4, #99f6e4);
   animation-delay: .08s;
}

.bar-fill.t3 {
   --target: 80%;
   background: linear-gradient(90deg, #2dd4bf, #5eead4);
   animation-delay: .16s;
}

.bar-fill.t4 {
   --target: 90%;
   background: linear-gradient(90deg, #5eead4, #99f6e4);
   animation-delay: .24s;
}

label{
   width:100%; /*dap added*/

}
.label {
   font-weight: 600;
   font-size: 14px;
   color: #0a0d12;
}

.score {
   margin-left: auto;
   font-weight: 700;
   font-size: 14px;
   color: #0a0d12;
   display: inline-flex;
   align-items: center;
   gap: 6px;
}

/* t1 is the darkest fill, so it needs light text instead of dark for contrast */
.bar-fill.t1 .label,
.bar-fill.t1 .score,
.bar-fill.t1 .chevron {
   color: #e6fffa;
}

.bar-fill.t1 .chevron {
   border-color: #e6fffa;
}

.chevron {
   display: inline-block;
   width: 8px;
   height: 8px;
   border-right: 2px solid #0a0d12;
   border-bottom: 2px solid #0a0d12;
   transform: rotate(45deg);
   transition: transform .25s ease;
   margin-left: 2px;
}

.toggle:checked ~ .bar-track .chevron {
   transform: rotate(-135deg);
}

.explainer {
   max-height: 0;
   overflow: hidden;
   transition: max-height .3s ease, padding .3s ease;
   background: rgba(255,255,255,.03);
   font-size: 13.5px;
   line-height: 1.5;
   color: #cbd5e1;
   border-left: 3px solid #4fd1c5;
   border-left: 1px solid darkturquoise;
}

.toggle:checked ~ .explainer {
   max-height: 240px;
   padding: 14px 16px 16px;
}

.global-toggle:checked ~ .item .explainer {
   max-height: 240px;
   padding: 14px 16px 16px;
}

.global-toggle:checked ~ .item .chevron {
   transform: rotate(-135deg);
}

.nudge {
   margin-top: 10px;
   font-size: 12.5px;
   color: #81e6d9;
   font-weight: 600;
   cursor: pointer;
}