/* ==========================================================================
   INCOTERMS EXPLAINER — reusable, data-driven per-rule diagram
   ========================================================================== */

.ic-intro-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:32px 0 8px;}
.ic-intro-card{
  border:1px solid var(--line-dark);border-radius:2px;padding:22px 24px;background:var(--white);
}
.ic-intro-card .num{
  display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;background:var(--accent);color:var(--navy-deep);
  font-family:'Manrope',sans-serif;font-weight:800;font-size:0.85rem;margin-bottom:12px;
}
.ic-intro-card h4{font-size:1rem;margin-bottom:8px;color:var(--heading);}
.ic-intro-card p{font-size:0.88rem;color:var(--ink-soft);line-height:1.6;margin:0;}
@media (max-width:640px){.ic-intro-grid{grid-template-columns:1fr;}}

/* ---------- group tabs (Any mode / Sea & inland waterway) ---------- */
.ic-tabs{display:flex;gap:10px;margin:40px 0 28px;flex-wrap:wrap;}
.ic-tab{
  font-family:'Manrope',sans-serif;font-weight:700;font-size:0.86rem;
  padding:11px 20px;border-radius:2px;border:1px solid var(--line-dark);
  background:var(--white);color:var(--ink-soft);cursor:pointer;transition:all .25s var(--ease);
}
.ic-tab:hover{border-color:var(--accent);color:var(--ink);}
.ic-tab.active{background:var(--navy);border-color:var(--navy);color:var(--pure-white);}
[data-theme="dark"] .ic-tab.active{background:var(--accent);border-color:var(--accent);color:var(--navy-deep);}

.ic-group{display:none;}
.ic-group.active{display:block;}

/* ---------- per-rule card ---------- */
.ic-rule{
  border:1px solid var(--line-dark);border-radius:2px;background:var(--white);
  padding:32px;margin-bottom:22px;
}
.ic-rule-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:6px;}
.ic-rule-code{
  font-family:'Manrope',sans-serif;font-weight:800;font-size:1.5rem;color:var(--heading);
  letter-spacing:0.01em;
}
.ic-rule-name{font-size:0.98rem;color:var(--ink-soft);}
.ic-rule-desc{font-size:0.92rem;color:var(--ink-soft);line-height:1.65;margin:14px 0 36px;max-width:640px;}

/* ---------- the diagram itself ---------- */
.ic-diagram{position:relative;padding:0 6px;margin-bottom:34px;}
.ic-checkpoints{display:flex;justify-content:space-between;margin-bottom:56px;}
.ic-checkpoint{flex:1;text-align:center;position:relative;}
.ic-checkpoint .ic-icon{
  width:38px;height:38px;margin:0 auto 8px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--ivory-dim);border:2px solid var(--line-dark);color:var(--ink-soft);
  transition:transform .5s var(--ease),background .5s var(--ease),border-color .5s var(--ease),color .5s var(--ease);
  transform:scale(0.6);opacity:0;
}
.ic-rule.in .ic-checkpoint .ic-icon{transform:scale(1);opacity:1;}
.ic-checkpoint .ic-icon svg{width:18px;height:18px;}
.ic-checkpoint.seller .ic-icon{background:var(--navy);border-color:var(--navy);color:var(--pure-white);}
.ic-checkpoint.buyer .ic-icon{background:var(--accent);border-color:var(--accent);color:var(--navy-deep);}
.ic-checkpoint.neutral .ic-icon{background:var(--ivory-dim);border-color:var(--line-dark);color:var(--ink-soft);}
.ic-checkpoint .ic-label{font-size:0.68rem;font-weight:700;letter-spacing:0.02em;text-transform:uppercase;color:var(--ink-soft);line-height:1.3;}
.ic-checkpoint .ic-who{display:block;font-size:0.66rem;font-weight:800;margin-top:3px;}
.ic-checkpoint.seller .ic-who{color:var(--navy);}
[data-theme="dark"] .ic-checkpoint.seller .ic-who{color:#8f95d6;}
.ic-checkpoint.buyer .ic-who{color:var(--accent-dim);}
.ic-checkpoint.neutral .ic-who{color:var(--ink-soft);}

/* staggered entrance for checkpoints */
.ic-rule .ic-checkpoint:nth-child(1) .ic-icon{transition-delay:.05s;}
.ic-rule .ic-checkpoint:nth-child(2) .ic-icon{transition-delay:.15s;}
.ic-rule .ic-checkpoint:nth-child(3) .ic-icon{transition-delay:.25s;}
.ic-rule .ic-checkpoint:nth-child(4) .ic-icon{transition-delay:.35s;}
.ic-rule .ic-checkpoint:nth-child(5) .ic-icon{transition-delay:.45s;}

/* the responsibility bar */
.ic-bar-wrap{position:relative;height:14px;margin:0 19px 30px;}
.ic-bar-track{position:absolute;inset:0;border-radius:8px;background:var(--ivory-dim);border:1px solid var(--line-dark);overflow:hidden;}
.ic-bar-seller{
  position:absolute;top:0;bottom:0;left:0;width:0;background:var(--navy);
  transition:width 1.1s cubic-bezier(.22,.9,.3,1);
}
[data-theme="dark"] .ic-bar-seller{background:#4952b8;}
.ic-bar-buyer{
  position:absolute;top:0;bottom:0;right:0;width:0;background:var(--accent);
  transition:width 1.1s cubic-bezier(.22,.9,.3,1);
}
.ic-rule.in .ic-bar-seller{width:var(--risk-pct);}
.ic-rule.in .ic-bar-buyer{width:calc(100% - var(--risk-pct));}

/* risk-transfer marker (flag) */
.ic-marker{
  position:absolute;top:-46px;left:var(--risk-pct);transform:translateX(-50%) translateY(-8px);
  opacity:0;transition:opacity .4s var(--ease) .9s,transform .5s var(--ease) .9s;
}
.ic-rule.in .ic-marker{opacity:1;transform:translateX(-50%) translateY(0);}
.ic-marker-pin{
  width:16px;height:16px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 3px var(--white),0 4px 10px rgba(0,0,0,0.25);position:relative;margin:0 auto;
}
.ic-marker-pin::after{
  content:'';position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--gold);
  opacity:0;animation:ic-pulse 2.2s ease-out infinite;animation-delay:1.4s;
}
.ic-rule:not(.in) .ic-marker-pin::after{animation:none;}
.ic-marker-label{
  position:absolute;top:20px;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-size:0.66rem;font-weight:800;letter-spacing:0.02em;text-transform:uppercase;
  color:var(--navy);background:var(--gold);padding:3px 8px;border-radius:2px;
}
/* near either edge, centering the label would push it outside the
   diagram's own bounds (e.g. EXW at 3% or DDP at 97%) — anchor it to
   the marker's pin instead of centering when close to an edge */
.ic-marker.edge-left .ic-marker-label{left:0;transform:none;}
.ic-marker.edge-right .ic-marker-label{left:auto;right:0;transform:none;}
[data-theme="dark"] .ic-marker-label{color:var(--navy-deep);}
@keyframes ic-pulse{
  0%{transform:scale(1);opacity:0.7;}
  100%{transform:scale(2.4);opacity:0;}
}

/* optional secondary "cost transfer" marker, for CPT/CIP/CFR/CIF where
   who PAYS for carriage differs from where RISK transfers */
.ic-cost-marker{
  position:absolute;bottom:-26px;left:var(--cost-pct);transform:translateX(-50%) translateY(8px);
  opacity:0;transition:opacity .4s var(--ease) 1.3s,transform .5s var(--ease) 1.3s;
}
.ic-rule.in .ic-cost-marker{opacity:1;transform:translateX(-50%) translateY(0);}
.ic-cost-marker .ic-cost-line{width:1px;height:10px;background:var(--ink-soft);opacity:0.5;margin:0 auto;}
.ic-cost-marker .ic-cost-tag{
  position:absolute;top:12px;left:50%;transform:translateX(-50%);
  font-size:0.64rem;font-weight:800;color:var(--ink-soft);
  border:1px dashed var(--line-dark);border-radius:2px;padding:2px 7px;white-space:nowrap;
}
/* same reasoning as .ic-marker's edge-left/edge-right: centering the tag
   on the cost point (typically 85%) pushed it 9px past the right edge on
   a 390px-wide viewport (iPhone 13 Pro) — confirmed by direct
   measurement — while wider phones had enough margin to hide it */
.ic-cost-marker.edge-right .ic-cost-tag{left:auto;right:0;transform:none;}
.ic-cost-marker.edge-left .ic-cost-tag{left:0;right:auto;transform:none;}

.ic-endpoints{display:flex;justify-content:space-between;font-size:0.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:0.03em;color:var(--ink-soft);margin-top:2px;}
.ic-endpoints .seller-end{color:var(--navy);}
[data-theme="dark"] .ic-endpoints .seller-end{color:#8f95d6;}
.ic-endpoints .buyer-end{color:var(--accent-dim);}

.ic-legend{display:flex;gap:20px;flex-wrap:wrap;margin-top:8px;padding-top:20px;border-top:1px solid var(--line-dark);}
.ic-legend-item{display:flex;align-items:center;gap:7px;font-size:0.78rem;color:var(--ink-soft);}
.ic-legend-dot{width:11px;height:11px;border-radius:3px;flex-shrink:0;}
.ic-legend-dot.seller{background:var(--navy);}
[data-theme="dark"] .ic-legend-dot.seller{background:#4952b8;}
.ic-legend-dot.buyer{background:var(--accent);}
.ic-legend-dot.point{background:var(--gold);border-radius:50%;}

@media (max-width:767px){
  .ic-rule{padding:22px 16px;}
  .ic-checkpoints{gap:4px;}
  .ic-checkpoint{padding:0 2px;}
  .ic-checkpoint .ic-label{font-size:0.56rem;line-height:1.25;}
  .ic-checkpoint .ic-who{font-size:0.54rem;}
  .ic-checkpoint .ic-icon{width:28px;height:28px;}
  .ic-checkpoint .ic-icon svg{width:14px;height:14px;}
  .ic-marker-label,.ic-cost-marker .ic-cost-tag{font-size:0.56rem;padding:2px 5px;}
}

/* ---------- quick reference table ---------- */
.ic-table-wrap{overflow-x:auto;margin:32px 0;border:1px solid var(--line-dark);border-radius:2px;}
.ic-table{width:100%;border-collapse:collapse;font-size:0.82rem;min-width:640px;}
.ic-table th,.ic-table td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line-dark);}
.ic-table th{
  font-family:'Manrope',sans-serif;font-weight:700;font-size:0.7rem;text-transform:uppercase;
  letter-spacing:0.03em;color:var(--ink-soft);background:var(--ivory-dim);white-space:nowrap;
}
.ic-table td:first-child{font-family:'Manrope',sans-serif;font-weight:800;color:var(--heading);white-space:nowrap;}
.ic-table tr:last-child td{border-bottom:0;}
.ic-table td.s{color:var(--navy);font-weight:700;}
[data-theme="dark"] .ic-table td.s{color:#8f95d6;}
.ic-table td.b{color:var(--accent-dim);font-weight:700;}
.ic-table td.n{color:var(--ink-soft);}