/* ===== HS Code Structure Diagram (desktop) ===== */

.code-structure {
  margin-bottom: var(--su24);
}

.code-structure__title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--bs-emphasis-color);
  text-align: center;
  margin: var(--su16) 0 0;
}

.code-structure__subtitle {
  font-size: 0.9rem;
  color: var(--bs-secondary-color);
  text-align: center;
  margin-bottom: var(--su8);
}

/* Diagram container — 750x340, centered */
.code-structure__diagram {
  position: relative;
  width: 750px;
  height: 340px;
  margin: var(--su32) auto;
  background: var(--bs-light);
  border: 1px solid var(--bs-border-color);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* Digit groups — absolute positioned */
.code-structure__digit {
  position: absolute;
  top: 170px;
  width: 50px;
  text-align: center;
  font-family: var(--bs-body-font-family);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  background: var(--so-white);
  padding: var(--su6);
  border-radius: 6px;
  border: 2px solid;
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
  transform: translateX(-50%);
  z-index: 3;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

/* Level-coloured digit groups */
.code-structure__digit.group-1 { color: var(--bs-primary);          border-color: var(--bs-primary); }
.code-structure__digit.group-2 { color: var(--bs-secondary-color);  border-color: var(--bs-border-color); }
.code-structure__digit.group-3 { color: var(--bs-secondary-color);  border-color: var(--bs-border-color); }
.code-structure__digit.group-4 { color: var(--bs-secondary-color);  border-color: var(--bs-border-color); }

.code-structure__digit:hover {
  background: var(--bs-light);
  box-shadow: 0 4px 8px rgba(0,0,0,0.12);
  transform: translateX(-50%) translateY(-1px);
}

.code-structure__digit:active {
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.12);
  transform: translateX(-50%) translateY(0);
}

.code-structure__digit.group-extra {
  color: var(--so-black-400);
  border-color: var(--so-black-225);
  font-weight: normal;
}

/* Callout cards */
.code-structure__callout {
  position: absolute;
  left: 535px;
  width: 185px;
  background: var(--so-white);
  border: 1px solid var(--so-black-225);
  border-left: 3px solid;
  border-radius: 6px;
  padding: var(--su8) var(--su12);
  font-size: 0.9rem;
  line-height: 1.4;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  z-index: 3;
  overflow-wrap: break-word;
  word-break: break-word;
}

.code-structure__callout .badge {
  font-size: 0.7rem;
  vertical-align: middle;
  margin-left: var(--su4);
}

.code-structure__callout--chap { top: 85px;  left: 30px; border-left: none; border-right: 3px solid var(--bs-primary); }
.code-structure__callout--chap strong { color: var(--bs-primary); }

.code-structure__callout--head { top: 244px; left: 30px; border-left: none; border-right: 3px solid var(--bs-border-color); }
.code-structure__callout--head strong { color: var(--bs-secondary-color); }

.code-structure__callout--sub  { top: 85px;  border-left-color: var(--bs-border-color); }
.code-structure__callout--sub  strong { color: var(--bs-secondary-color); }

.code-structure__callout--nat  { top: 244px; border-left-color: var(--bs-border-color); }
.code-structure__callout--nat  strong { color: var(--bs-secondary-color); }

/* Class/category text */
.code-structure__class-text {
  color: var(--hsc-category-purple);
  font-weight: 500;
}

/* SVG connector layer */
.code-structure__svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.code-structure__svg polyline {
  fill: none;
  stroke-width: 2.5;
  stroke-linejoin: round;
}

.code-structure__svg .line-chap { stroke: var(--bs-primary); }
.code-structure__svg .line-head { stroke: var(--bs-border-color); }
.code-structure__svg .line-sub  { stroke: var(--bs-border-color); }
.code-structure__svg .line-nat  { stroke: var(--bs-border-color); }

.code-structure__svg circle {
  stroke: var(--so-white);
  stroke-width: 1.5;
}

.code-structure__svg .dot-chap { fill: var(--bs-primary); }
.code-structure__svg .dot-head { fill: var(--bs-border-color); }
.code-structure__svg .dot-sub  { fill: var(--bs-border-color); }
.code-structure__svg .dot-nat  { fill: var(--bs-border-color); }

.code-structure__note {
  text-align: center;
  margin-top: var(--su4);
}