/* ============================================================
   tool-incoterms.css — Incoterms 2020 Allocator
   Logical properties only (RTL-ready). Loaded after main.css.
   ============================================================ */

.tool-main { padding-block: var(--space-8); }
.tool-head { max-inline-size: 62ch; margin-block-end: var(--space-6); }
.tool-head h1 { font-size: var(--fs-xl); line-height: 1.25; }
.tool-head p { color: var(--color-text-muted); margin-block-start: var(--space-2); }

/* ---------- Term selector ---------- */
.incoterm-controls { margin-block-end: var(--space-6); max-inline-size: 32rem; }
.incoterm-controls select {
  inline-size: 100%;
  min-block-size: var(--tap-min);
  padding-inline: var(--space-3);
  font-size: var(--fs-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
}
.incoterm-controls select:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }

/* ---------- Diagram ---------- */
.diagram-card { padding: var(--space-4); }
.incoterm-svg { inline-size: 100%; }
.incoterm-svg svg { inline-size: 100%; block-size: auto; display: block; }

/* SVG element theming (classes set by JS) */
.seg-seller { fill: var(--color-seller); }
.seg-buyer  { fill: var(--color-buyer); }
.seg-hybrid {
  fill: color-mix(in srgb, var(--color-warning) 14%, transparent);
  stroke: var(--color-warning);
  stroke-dasharray: 5 4;
  stroke-width: 1.5;
  rx: 8;
}
.axis-line   { stroke: var(--color-border); stroke-width: 2; }
.axis-dot    { fill: var(--color-text-muted); }
.axis-dot--active { fill: var(--color-primary); }
.axis-label  { fill: var(--color-text-muted); font-size: 12px; text-anchor: middle; font-family: var(--font-base); }
.track-label { fill: var(--color-text); font-size: 15px; font-weight: 700; font-family: var(--font-base); }
.divider-line { stroke: var(--color-text); stroke-width: 2; stroke-dasharray: 4 4; opacity: 0.7; }
.divider-pill { fill: var(--color-surface); stroke: var(--color-primary); stroke-width: 1.5; }
.divider-text { fill: var(--color-text); font-size: 12.5px; font-weight: 600; text-anchor: middle; font-family: var(--font-base); }

/* ---------- Legend ---------- */
.diagram-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-block-start: var(--space-3);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--color-border);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.legend-item { display: inline-flex; align-items: center; gap: var(--space-2); }
.legend-swatch { inline-size: 16px; block-size: 16px; border-radius: 4px; }
.legend-swatch--seller { background: var(--color-seller); }
.legend-swatch--buyer  { background: var(--color-buyer); }
.legend-swatch--hybrid { background: color-mix(in srgb, var(--color-warning) 30%, transparent); border: 1.5px dashed var(--color-warning); }

/* ---------- Detail panel ---------- */
.incoterm-detail { margin-block-start: var(--space-6); }

.term-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-block-end: var(--space-3);
}
.term-code {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-base);
  color: #fff;
  background: var(--color-primary);
  padding-inline: var(--space-3);
  padding-block: var(--space-1);
  border-radius: var(--radius-sm);
}
.term-head h2 { font-size: var(--fs-lg); margin-inline-end: auto; }

.badge { font-size: var(--fs-xs); font-weight: 700; padding-inline: var(--space-2); padding-block: 2px; border-radius: 999px; }
.badge--sea { background: color-mix(in srgb, var(--color-buyer) 16%, transparent); color: var(--color-buyer); }
.badge--any { background: color-mix(in srgb, var(--color-accent) 16%, transparent); color: var(--color-accent); }

.term-summary { color: var(--color-text); font-size: var(--fs-lg); line-height: 1.5; margin-block-end: var(--space-4); }

.term-facts {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
  margin: 0;
}
@media (min-width: 40rem) { .term-facts { grid-template-columns: 1fr 1fr; } }
.term-facts > div {
  padding: var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.term-facts dt { font-size: var(--fs-xs); font-weight: 600; color: var(--color-text-muted); margin-block-end: var(--space-1); }
.term-facts dd { margin: 0; font-weight: 600; }
.fact-risk { color: var(--color-warning); }
.fact-cost { color: var(--color-primary); }

.hybrid-note {
  margin-block-start: var(--space-4);
  padding: var(--space-3);
  font-size: var(--fs-sm);
  background: color-mix(in srgb, var(--color-warning) 10%, transparent);
  border-inline-start: 3px solid var(--color-warning);
  border-radius: var(--radius-sm);
}