/* One adaptive layout; each connector follows its item in normal flow. */
.gaip-steps{
  --steps-accent:#15989b;
  --steps-current:#24d4c9;
  --steps-canvas:#fff;
  --steps-marker-size:32px;
  --steps-content-gap:10px;
  --steps-connector-gap:12px;
  --steps-connector-size:1px;
  --steps-connector-min:24px;
  --steps-connector-length:16px;
  --steps-connector-offset:calc((var(--steps-marker-size) - var(--steps-connector-size)) / 2);
  --steps-stack-gap:8px;
  color:#2f3640;
  font:inherit;
  width:100%;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
  padding:2px 0;
  container-type:inline-size;
  container-name:gaip-steps;
}
.gaip-steps ol{list-style:none;margin:0;padding:0;display:flex;gap:0;width:100%;min-width:0}
.gaip-steps li{flex:1 1 0;min-width:0;display:flex;align-items:flex-start}
.gaip-steps__connector{
  display:block;
  flex:1 0 var(--steps-connector-min);
  height:var(--steps-connector-size);
  margin-inline:var(--steps-connector-gap);
  margin-block-start:var(--steps-connector-offset);
  background:#dce3e6;
}
.gaip-steps li:last-child .gaip-steps__connector{display:none}
.gaip-steps li[data-state=complete] .gaip-steps__connector{background:#c4dfdf}
.gaip-steps__item{display:flex;flex:0 1 auto;min-width:0;align-items:flex-start;gap:var(--steps-content-gap);max-width:100%;border:0;background:transparent;padding:0;color:inherit;font:inherit;text-align:left;cursor:default;border-radius:2px}
.gaip-steps button.gaip-steps__item{cursor:pointer}
.gaip-steps__marker{position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:var(--steps-marker-size);height:var(--steps-marker-size);flex:0 0 var(--steps-marker-size);border:1px solid #cbd6d9;border-radius:50%;background:var(--steps-canvas);font-size:14px;line-height:1;color:var(--steps-accent)}
.gaip-steps__text{display:block;min-width:0}
.gaip-steps__title{display:block;white-space:normal;overflow-wrap:anywhere;font-size:14px;line-height:20px;color:#3f4853}
.gaip-steps__status{display:block;white-space:normal;overflow-wrap:anywhere;color:#6e7c87;font-size:12px;line-height:16px;margin:0}
.gaip-steps li[data-state=current] .gaip-steps__marker{background:var(--steps-current);border-color:var(--steps-current);color:#fff}
.gaip-steps li[data-state=complete] .gaip-steps__marker{background:#f3f8f8;border-color:#ccdddd}
.gaip-steps li[data-state=complete] .gaip-steps__marker:after{content:"";width:10px;height:5px;border-left:1.5px solid #76a6a7;border-bottom:1.5px solid #76a6a7;transform:translateY(-1px) rotate(-45deg)}
.gaip-steps li[data-state=complete] .gaip-steps__title,.gaip-steps li[data-state=complete] .gaip-steps__status{color:#68737d;--gaip-global-font-weight:400}
.gaip-steps li:not([data-state=complete]) .gaip-steps__title{color:#2f3640;--gaip-global-font-weight:700}
.gaip-steps li:not([data-state=complete]) .gaip-steps__status{color:#434d57;--gaip-global-font-weight:700}
.gaip-steps li[data-state=complete] [data-viewed=true] .gaip-steps__marker{background:#f3f8f8;border-color:#b7cbcd}
.gaip-steps button[aria-disabled=true]{cursor:not-allowed}.gaip-steps li[data-state=locked] .gaip-steps__title{color:#2f3640}
.gaip-steps li[data-state=locked] .gaip-steps__marker{background:var(--steps-canvas);border-color:var(--steps-accent)}
.gaip-steps li[data-state=locked] .gaip-steps__marker:before{content:"";position:absolute;width:7px;height:7px;box-sizing:border-box;border:1.3px solid var(--steps-accent);border-bottom:0;border-radius:4px 4px 0 0;top:7px}
.gaip-steps li[data-state=locked] .gaip-steps__marker:after{content:"";position:absolute;width:10px;height:8px;box-sizing:border-box;border:1.3px solid var(--steps-accent);border-radius:1px;top:14px}
.gaip-steps li:not([data-state=complete]) button.gaip-steps__item:not([aria-disabled=true]):hover .gaip-steps__title{color:#2f3640}
.gaip-steps button.gaip-steps__item:not([aria-disabled=true]):hover .gaip-steps__marker{border-color:var(--steps-accent)}
.gaip-steps button.gaip-steps__item:focus-visible{outline:2px solid #45b8b7;outline-offset:1px}

/* Shared white strip. Page layout and original comparison mode remain host-owned. */
.gaip-steps-bar{display:flex;align-items:center;box-sizing:border-box;min-width:0;height:auto;min-height:68px;flex-shrink:0;padding:14px 24px;background:#fff}

/* Opt-in browse mode: unvisited sections remain available, with no lock. */
.gaip-steps li[data-state=pending] .gaip-steps__marker{border-color:var(--steps-accent);background:var(--steps-canvas)}

/* Browse: selection and learned state are separate. Only the viewed item is emphasized. */
.gaip-steps[data-mode=browse] [data-viewed=false] .gaip-steps__title{--gaip-global-font-weight:400}
.gaip-steps[data-mode=browse] [data-viewed=false] .gaip-steps__status{--gaip-global-font-weight:400}
.gaip-steps[data-mode=browse] [data-viewed=true] .gaip-steps__title{color:#2f3640;--gaip-global-font-weight:700}
.gaip-steps[data-mode=browse] li [data-viewed=true] .gaip-steps__marker{background:var(--steps-current);border-color:var(--steps-current);color:#fff}
.gaip-steps[data-mode=browse] li [data-viewed=true] .gaip-steps__marker:after{border-color:#fff}

/* Narrow containers stack whole items, retaining the marker beside its text. */
@container gaip-steps (max-width:520px){
  .gaip-steps ol{flex-direction:column}
  .gaip-steps li{width:100%;flex:none;flex-direction:column}
  .gaip-steps .gaip-steps__item{width:100%}
  .gaip-steps .gaip-steps__connector{
    flex:none;
    width:var(--steps-connector-size);
    height:var(--steps-connector-length);
    margin-inline-start:var(--steps-connector-offset);
    margin-inline-end:0;
    margin-block:var(--steps-stack-gap);
  }
}