/*
 * Shared shell for the 12 Freight Tools pages — ported from
 * src/components/tools/ToolShell.tsx (Labelled, ResultTile, ToolShell) plus
 * per-tool styles appended below as each tool is built.
 */

.tool-section { padding-top: 64px; }
@media (min-width: 640px) { .tool-section { padding-top: 96px; } }

.tool-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted-foreground);
  transition: color 0.2s;
}
.tool-back:hover { color: var(--primary); }
.tool-back svg { width: 16px; height: 16px; }

.tool-notes {
  margin-top: 40px;
  max-width: 48rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--muted-foreground);
}
.tool-notes p + p { margin-top: 12px; }

.tool-cta-wrap { margin-top: 56px; }
.tool-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 28px;
}
@media (min-width: 640px) {
  .tool-cta { flex-direction: row; align-items: center; justify-content: space-between; }
}
.tool-cta-title { font-size: 1.125rem; font-weight: 600; color: var(--foreground); }
.tool-cta-body { margin-top: 4px; font-size: 0.875rem; color: var(--muted-foreground); }
.tool-cta .btn { padding: 12px 24px; flex-shrink: 0; }

/* Labelled */
.tool-field-group .eyebrow { display: block; }
.tool-field-group .tool-field-control { margin-top: 12px; }
.tool-hint { margin-top: 8px; display: block; font-size: 0.75rem; color: var(--muted-foreground); }

/* ResultTile */
.tool-result { border-radius: var(--radius-xl); padding: 20px; }
.tool-result:not(.is-accent) { border: 1px solid color-mix(in oklab, var(--steel) 18%, transparent); }
.tool-result.is-accent {
  border: 1px solid color-mix(in oklab, var(--primary) 50%, transparent);
  background: color-mix(in oklab, var(--primary) 10%, transparent);
}
.tool-result-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.tool-result-value {
  margin-top: 8px;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 640px) { .tool-result-value { font-size: 1.875rem; } }
.tool-result-unit { margin-inline-start: 4px; font-size: 0.875rem; font-weight: 500; color: var(--muted-foreground); }

/* Generic responsive input grid reused by several tools */
.tool-grid-2 { display: grid; gap: 16px; }
@media (min-width: 640px) { .tool-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tool-results-grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .tool-results-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tool-panel { padding: 24px; }
@media (min-width: 640px) { .tool-panel { padding: 32px; } }

/* ===== Volumetric weight calculator ===================================== */
.tool-grid-vwc { display: grid; gap: 32px; }
@media (min-width: 1024px) { .tool-grid-vwc { grid-template-columns: 1.25fr 0.75fr; } }
/* This is the one select in the tools that opts out of the native arrow
   ("${field} appearance-none" in VolumetricCalculator.tsx specifically). */
#vwc-mode { appearance: none; }

/* align-items:flex-start stops the flex column's default "stretch" from
   forcing the "Add piece" button (an inline-sized element in the source's
   plain block layout) to full width. */
.vwc-pieces { margin-top: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.vwc-pieces > * { width: 100%; }
.vwc-pieces > .vwc-add-btn { width: auto; }
.vwc-piece-list { display: flex; flex-direction: column; gap: 16px; }
.vwc-piece { padding: 16px; }
.vwc-piece-head { display: flex; align-items: center; justify-content: space-between; }
.vwc-piece-label { font-size: 0.75rem; font-weight: 600; color: var(--muted-foreground); }
.vwc-piece-remove { color: var(--muted-foreground); transition: color 0.2s; }
.vwc-piece-remove:hover { color: var(--destructive); }
.vwc-piece-remove svg { width: 16px; height: 16px; }
.vwc-piece-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .vwc-piece-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.vwc-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-md);
  padding: 8px 16px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--foreground);
  transition: border-color 0.2s;
}
.vwc-add-btn:hover { border-color: color-mix(in oklab, var(--primary) 60%, transparent); }
.vwc-add-btn svg { width: 16px; height: 16px; }
.vwc-results { display: grid; align-content: start; gap: 16px; }
.vwc-disclaimer { font-size: 0.75rem; line-height: 1.625; color: var(--muted-foreground); }

/* ===== Unit converter ==================================================== */
.tool-uc { max-width: 48rem; margin-inline: auto; }
.uc-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.uc-cat {
  border-radius: var(--radius-md);
  padding: 8px 16px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted-foreground);
  border: 1px solid color-mix(in oklab, var(--steel) 18%, transparent);
  background: transparent;
  transition: color 0.2s;
}
.uc-cat:hover { color: var(--foreground); }
.uc-cat.is-active { background: var(--primary); color: var(--primary-foreground); border-color: transparent; }

.uc-grid { margin-top: 32px; display: grid; align-items: end; gap: 16px; }
@media (min-width: 640px) { .uc-grid { grid-template-columns: 1fr auto 1fr; } }
.uc-col { display: flex; flex-direction: column; gap: 12px; }

.uc-swap {
  margin-inline: auto;
  display: flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  color: var(--primary);
  border: 1px solid color-mix(in oklab, var(--steel) 18%, transparent);
  background: transparent;
  transition: transform 0.3s;
}
.uc-swap:hover { transform: rotate(180deg); }
.uc-swap svg { width: 20px; height: 20px; }

.uc-result {
  display: flex;
  min-height: 46px;
  align-items: center;
  border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--primary) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--steel) 18%, transparent);
  padding-inline: 16px;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

/* ===== Freight glossary ================================================= */
.gloss-search-row { display: grid; gap: 16px; }
@media (min-width: 640px) { .gloss-search-row { grid-template-columns: 1fr auto; } }
.gloss-search-wrap { position: relative; }
svg.gloss-search-icon {
  position: absolute;
  inset-inline-start: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--muted-foreground);
  pointer-events: none;
}
.gloss-search-input { padding-inline-start: 44px; }
.gloss-groups { display: flex; flex-wrap: wrap; gap: 8px; }
.gloss-chip {
  border-radius: var(--radius-md);
  padding: 8px 16px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted-foreground);
  border: 1px solid color-mix(in oklab, var(--steel) 18%, transparent);
  background: transparent;
  transition: color 0.2s;
}
.gloss-chip:hover { color: var(--foreground); }
.gloss-chip.is-active { background: var(--primary); color: var(--primary-foreground); border-color: transparent; }
.gloss-count { margin-top: 16px; font-size: 0.75rem; color: var(--muted-foreground); }

.gloss-results { margin-top: 32px; display: grid; gap: 16px; }
@media (min-width: 768px) { .gloss-results { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gloss-card { padding: 24px; }
.gloss-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.gloss-card-head h3 { font-size: 1rem; font-weight: 600; color: var(--foreground); }
.gloss-card-group { flex-shrink: 0; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary); }
.gloss-card p { margin-top: 8px; font-size: 0.875rem; line-height: 1.625; color: var(--muted-foreground); }
.gloss-empty { grid-column: 1 / -1; padding: 32px; text-align: center; font-size: 0.875rem; color: var(--muted-foreground); }

/* ===== HS code lookup ==================================================== */
.hs-lookup { display: flex; flex-direction: column; gap: 32px; }
.hs-search-wrap { position: relative; }
svg.hs-search-icon {
  position: absolute;
  inset-inline-start: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--muted-foreground);
  pointer-events: none;
}
.hs-search-input { padding-inline-start: 44px; }
.hs-section-title { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-foreground); }
.hs-headings-grid { margin-top: 16px; display: grid; gap: 12px; }
@media (min-width: 640px) { .hs-headings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hs-chapters-grid { margin-top: 16px; display: grid; gap: 12px; }
@media (min-width: 640px) { .hs-chapters-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .hs-chapters-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hs-heading-card, .hs-chapter-card { padding: 16px; }
.hs-code { font-family: monospace; font-size: 0.875rem; font-weight: 600; color: var(--primary); }
.hs-chapter-code { font-family: monospace; font-size: 0.75rem; font-weight: 600; color: var(--primary); }
.hs-label { margin-top: 4px; font-size: 0.875rem; color: var(--foreground); }
.hs-section-label { margin-top: 8px; font-size: 0.75rem; color: var(--muted-foreground); }
.hs-empty { grid-column: 1 / -1; padding: 24px; font-size: 0.875rem; color: var(--muted-foreground); }
.hs-empty a { font-weight: 600; color: var(--primary); text-decoration: underline; text-underline-offset: 4px; }

/* ===== Port & airport code lookup ======================================= */
.loc-lookup { display: flex; flex-direction: column; gap: 24px; }
.loc-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.loc-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-md);
  padding: 10px 16px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted-foreground);
  border: 1px solid color-mix(in oklab, var(--steel) 18%, transparent);
  background: transparent;
  transition: color 0.2s;
}
.loc-tab:hover { color: var(--foreground); }
.loc-tab.is-active { background: var(--primary); color: var(--primary-foreground); border-color: transparent; }
.loc-tab svg { width: 16px; height: 16px; }

.loc-search-wrap { position: relative; }
svg.loc-search-icon {
  position: absolute;
  inset-inline-start: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--muted-foreground);
  pointer-events: none;
}
.loc-search-input { padding-inline-start: 44px; }
.loc-count { font-size: 0.75rem; color: var(--muted-foreground); }

.loc-table-wrap { overflow: hidden; }
.loc-table-scroll { max-height: 28rem; overflow-y: auto; }
.loc-table { width: 100%; text-align: start; font-size: 0.875rem; border-collapse: collapse; }
.loc-table thead { position: sticky; top: 0; background: color-mix(in oklab, var(--background) 95%, transparent); backdrop-filter: blur(4px); }
.loc-table th { padding: 12px 16px; text-align: start; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-foreground); font-weight: 600; }
.loc-table td { padding: 12px 16px; border-top: 1px solid color-mix(in oklab, var(--border) 60%, transparent); }
.loc-code { font-family: monospace; font-size: 0.75rem; font-weight: 600; color: var(--primary); }
.loc-muted { color: var(--muted-foreground); }
.loc-city { display: block; font-size: 0.75rem; color: var(--muted-foreground); }
.loc-empty { padding: 40px 16px; text-align: center; color: var(--muted-foreground); }

/* ===== Transit time estimator ============================================ */
.tool-grid-transit { display: grid; gap: 32px; }
@media (min-width: 1024px) { .tool-grid-transit { grid-template-columns: 1.05fr 0.95fr; } }

.transit-direction { display: flex; gap: 8px; }
.transit-dir-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-md);
  padding: 10px 16px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted-foreground);
  border: 1px solid color-mix(in oklab, var(--steel) 18%, transparent);
  background: transparent;
  transition: color 0.2s;
}
.transit-dir-btn:hover { color: var(--foreground); }
.transit-dir-btn.is-active { background: var(--primary); color: var(--primary-foreground); border-color: transparent; }
.transit-dir-btn svg { width: 16px; height: 16px; }

.transit-checkbox { margin-top: 24px; display: flex; align-items: center; gap: 12px; font-size: 0.875rem; color: var(--foreground); }
.transit-checkbox input { width: 16px; height: 16px; accent-color: var(--primary); }

.transit-results { display: flex; flex-direction: column; gap: 16px; }
.transit-included { padding: 20px; font-size: 0.875rem; color: var(--muted-foreground); }
.transit-included-title { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--foreground); }
.transit-included-title svg { width: 16px; height: 16px; }
.transit-included ul { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; list-style: none; }

/* ===== Dangerous goods quick check ======================================= */
.dg-check { display: flex; flex-direction: column; gap: 32px; }
.dg-search-row { display: grid; gap: 16px; }
@media (min-width: 640px) { .dg-search-row { grid-template-columns: 1.4fr 1fr; } }
.dg-search-wrap { position: relative; }
svg.dg-search-icon {
  position: absolute;
  inset-inline-start: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--muted-foreground);
  pointer-events: none;
}
.dg-search-input { padding-inline-start: 44px; }
.dg-count { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-foreground); }

.dg-entries { display: grid; gap: 12px; }
@media (min-width: 640px) { .dg-entries { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dg-entry-card { padding: 20px; }
.dg-entry-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dg-un { font-family: monospace; font-size: 0.875rem; font-weight: 600; color: var(--primary); }
.dg-name { margin-top: 4px; font-size: 0.875rem; font-weight: 500; color: var(--foreground); }
.dg-dot { display: inline-block; width: 12px; height: 12px; flex-shrink: 0; border-radius: 9999px; margin-top: 4px; }
.dg-meta { margin-top: 12px; font-size: 0.75rem; color: var(--muted-foreground); }
.dg-air-badge { margin-top: 12px; display: inline-flex; border-radius: var(--radius-md); border: 1px solid; padding: 4px 10px; font-size: 0.75rem; font-weight: 600; }
.dg-air-forbidden { border-color: color-mix(in oklab, var(--destructive) 50%, transparent); background: color-mix(in oklab, var(--destructive) 10%, transparent); color: var(--destructive); }
.dg-air-cargo { border-color: color-mix(in oklab, var(--primary) 50%, transparent); background: color-mix(in oklab, var(--primary) 10%, transparent); color: var(--primary); }
.dg-air-allowed { border-color: color-mix(in oklab, #10b981 50%, transparent); background: color-mix(in oklab, #10b981 10%, transparent); color: #10b981; }

.dg-empty { grid-column: 1 / -1; padding: 28px; text-align: center; }
.dg-empty-title { font-size: 0.875rem; font-weight: 600; color: var(--foreground); }
.dg-empty-body { margin: 8px auto 0; max-width: 28rem; font-size: 0.875rem; line-height: 1.625; color: var(--muted-foreground); }
.dg-empty-btn { margin-top: 20px; padding: 10px 20px; white-space: nowrap; }

.dg-classes-title { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-foreground); }
.dg-classes-grid { margin-top: 16px; display: grid; gap: 12px; }
@media (min-width: 640px) { .dg-classes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .dg-classes-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dg-class-card { padding: 20px; }
.dg-class-head { display: flex; align-items: center; gap: 8px; }
.dg-class-head p { font-size: 0.875rem; font-weight: 600; color: var(--foreground); }
.dg-class-note { margin-top: 8px; font-size: 0.75rem; line-height: 1.625; color: var(--muted-foreground); }

.dg-guidance { border-radius: var(--radius-xl); border: 1px solid color-mix(in oklab, var(--primary) 40%, transparent); background: color-mix(in oklab, var(--primary) 5%, transparent); padding: 20px; font-size: 0.875rem; color: var(--muted-foreground); }
.dg-guidance-title { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--foreground); }
.dg-guidance-title svg { width: 16px; height: 16px; color: var(--primary); }
.dg-guidance-body { margin-top: 8px; line-height: 1.625; }
.dg-guidance-foot { margin-top: 12px; display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: color-mix(in oklab, var(--foreground) 80%, transparent); }
.dg-guidance-foot svg { width: 16px; height: 16px; color: var(--primary); }

/* ===== Print helpers (PrintLetterhead.tsx: "hidden print:block" / "print:hidden") == */
.print-show { display: none; }
@media print { .print-show { display: block; } }
.print-show-flex { display: none; }
@media print { .print-show-flex { display: flex; } }
@media print { .doc-print-hide, .specs-print-hide { display: none !important; } }

/* No unconditional display here on purpose — visibility is fully owned by
   the .print-show / .print-show-flex companion class on the same element;
   this bare class only carries layout that applies once print reveals it. */
.print-letterhead { align-items: center; gap: 16px; }
.print-letterhead img { height: 48px; width: auto; }
.pl-name { font-weight: 700; font-size: 1.125rem; letter-spacing: 0.05em; color: #111; }
.pl-tag { font-size: 0.75rem; color: #555; }
.print-doc-title { margin-top: 16px; font-size: 1.25rem; font-weight: 700; color: #111; }
.print-footer { margin-top: 24px; gap: 16px; flex-wrap: wrap; font-size: 0.75rem; color: #555; border-top: 1px solid #ccc; padding-top: 12px; }

/* ===== Shipping document checklist ======================================= */
.tool-grid-doc { display: grid; gap: 32px; }
@media (min-width: 1024px) { .tool-grid-doc { grid-template-columns: 0.85fr 1.15fr; } }
.doc-disclaimer { margin-top: 24px; font-size: 0.75rem; line-height: 1.625; color: var(--muted-foreground); }
/* Source's print button is standalone (px-5 py-3), not the shared .btn's
   default 14px/24px padding. */
.doc-print-btn { margin-top: 24px; width: 100%; justify-content: center; padding: 12px 20px; border: none; }
.doc-list { display: flex; flex-direction: column; gap: 12px; }
/* #doc-rows is the JS-render wrapper the individual document cards actually
   land in (a level deeper than .doc-list) -- same gap needed here too, same
   root cause as the earlier #cc-fill-list fix. */
#doc-rows { display: flex; flex-direction: column; gap: 12px; }
.doc-row { display: flex; gap: 16px; padding: 20px; }
.doc-row-icon svg { margin-top: 2px; width: 20px; height: 20px; flex-shrink: 0; color: var(--primary); }
.doc-row-title { font-size: 0.875rem; font-weight: 600; color: var(--foreground); }
.doc-row-why { margin-top: 4px; font-size: 0.875rem; line-height: 1.625; color: var(--muted-foreground); }
.doc-mode-sub { font-size: 0.875rem; color: var(--muted-foreground); }

/* ===== Incoterms 2020 explorer =========================================== */
.tool-grid-incoterms { display: grid; gap: 32px; }
@media (min-width: 1024px) { .tool-grid-incoterms { grid-template-columns: 0.34fr 0.66fr; } }
.incoterms-sidebar { display: grid; align-content: start; gap: 12px; }
.incoterms-btn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 640px) { .incoterms-btn-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .incoterms-btn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.incoterms-term-btn {
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  text-align: start;
  border: 1px solid color-mix(in oklab, var(--steel) 18%, transparent);
  background: transparent;
  transition: border-color 0.2s, background-color 0.2s;
}
.incoterms-term-btn:hover { border-color: color-mix(in oklab, var(--primary) 50%, transparent); }
.incoterms-term-btn.is-active { border-color: color-mix(in oklab, var(--primary) 70%, transparent); background: color-mix(in oklab, var(--primary) 10%, transparent); }
.incoterms-term-code { display: block; font-size: 0.875rem; font-weight: 700; color: var(--foreground); }
.incoterms-term-name { margin-top: 2px; display: block; font-size: 0.6875rem; line-height: 1.2; color: var(--muted-foreground); }

.incoterms-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.incoterms-code { border-radius: var(--radius-md); background: var(--primary); padding: 4px 12px; font-size: 0.875rem; font-weight: 700; color: var(--primary-foreground); }
.incoterms-head h2 { font-size: 1.25rem; font-weight: 600; color: var(--foreground); }
.incoterms-mode-badge { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radius-md); padding: 4px 12px; font-size: 0.75rem; font-weight: 600; color: var(--muted-foreground); }
.incoterms-mode-badge svg { width: 14px; height: 14px; }

.incoterms-summary { margin-top: 16px; font-size: 0.875rem; line-height: 1.625; color: var(--muted-foreground); }

.incoterms-points { margin-top: 24px; display: grid; gap: 12px; }
@media (min-width: 640px) { .incoterms-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.incoterms-point { padding: 16px; }
.incoterms-point-label { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-foreground); }
.incoterms-point-label svg { width: 14px; height: 14px; color: var(--primary); }
.incoterms-point-value { margin-top: 8px; font-size: 0.875rem; color: var(--foreground); }

.incoterms-duties { margin-top: 32px; }
.incoterms-duties ul { margin-top: 16px; display: flex; flex-direction: column; }
.incoterms-duty-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; border-top: 1px solid var(--border); }
.incoterms-duty-row:first-child { border-top: none; }
.incoterms-duty-row span:first-child { font-size: 0.875rem; color: var(--foreground); }
.incoterms-duty-badge { flex-shrink: 0; border-radius: var(--radius-md); padding: 4px 12px; font-size: 0.75rem; font-weight: 600; }
.incoterms-duty-badge.is-seller { background: color-mix(in oklab, var(--primary) 15%, transparent); color: var(--primary); }
.incoterms-duty-badge.is-buyer { background: color-mix(in oklab, var(--foreground) 10%, transparent); color: var(--foreground); }
.incoterms-duty-badge.is-none { color: var(--muted-foreground); }

/* ===== CBM & container load calculator =================================== */
.tool-grid-cc { display: grid; gap: 32px; }
@media (min-width: 1024px) { .tool-grid-cc { grid-template-columns: 1.15fr 0.85fr; } }
.cc-line-list { display: flex; flex-direction: column; gap: 16px; }
.cc-results-grid { margin-top: 32px; display: grid; gap: 16px; }
@media (min-width: 640px) { .cc-results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cc-fill-col { display: grid; align-content: start; gap: 16px; }
/* Source has the eyebrow + all 4 fill cards as flat grid siblings sharing
   one 16px gap; #cc-fill-list is an extra JS-render wrapper div this port
   needed, so it needs the same gap applied a level deeper to match. */
.cc-fill-col #cc-fill-list { display: grid; gap: 16px; }
.cc-fill-card { padding: 20px; }
.cc-fill-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cc-fill-head span:first-child { font-size: 0.875rem; font-weight: 600; color: var(--foreground); }
.cc-fill-pct { font-size: 0.875rem; font-weight: 600; color: var(--primary); font-variant-numeric: tabular-nums; }
.cc-fill-bar { margin-top: 12px; height: 8px; overflow: hidden; border-radius: 9999px; background: color-mix(in oklab, var(--foreground) 10%, transparent); }
.cc-fill-bar-inner { height: 100%; border-radius: 9999px; background: var(--primary); transition: width 0.5s; }
.cc-fill-caption { margin-top: 8px; font-size: 0.75rem; color: var(--muted-foreground); }
.cc-recommendation { border-radius: var(--radius-xl); border: 1px solid color-mix(in oklab, var(--primary) 50%, transparent); background: color-mix(in oklab, var(--primary) 10%, transparent); padding: 20px; font-size: 0.875rem; line-height: 1.625; color: var(--foreground); }

/* ===== Container dimensions & specs ====================================== */
.specs-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
/* Source's print button is standalone (px-5 py-2.5), not the shared .btn's
   default 14px/24px padding. */
#specs-print-btn { padding: 10px 20px; border: none; }
.specs-unit-toggle { display: inline-flex; padding: 4px; border-radius: var(--radius-md); }
.specs-unit-toggle button { border-radius: calc(var(--radius-md) - 2px); padding: 6px 16px; font-size: 0.75rem; font-weight: 600; color: var(--muted-foreground); background: transparent; }
.specs-unit-toggle button.is-active { background: var(--primary); color: var(--primary-foreground); }

.specs-print { margin-top: 32px; }
.specs-intro { margin-bottom: 24px; }
.specs-intro p { margin-top: 4px; font-size: 0.875rem; color: var(--muted-foreground); }

.specs-grid { display: grid; gap: 20px; }
@media (min-width: 768px) { .specs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.spec-card { padding: 24px; }
.spec-img { margin-inline: auto; height: 112px; width: auto; object-fit: contain; display: block; }
.spec-head { margin-top: 16px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.spec-head h3 { font-size: 1rem; font-weight: 600; color: var(--foreground); }
.spec-cbm { font-size: 0.875rem; font-weight: 600; color: var(--primary); font-variant-numeric: tabular-nums; }
.spec-dl { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; font-size: 0.875rem; }
@media (min-width: 640px) { .spec-dl { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.spec-dl dt { font-size: 0.75rem; color: var(--muted-foreground); }
.spec-dl dd { margin-top: 2px; font-weight: 500; color: var(--foreground); font-variant-numeric: tabular-nums; }

/* ===== 3D container load planner ========================================= */
.c3d { display: flex; flex-direction: column; gap: 40px; }
.c3d-step { padding: 24px; }
@media (min-width: 640px) { .c3d-step { padding: 32px; } }
.c3d-step-head { display: flex; align-items: center; gap: 12px; }
.c3d-step-head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.c3d-step-num { display: flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 9999px; background: var(--primary); font-size: 0.75rem; font-weight: 700; color: var(--primary-foreground); flex-shrink: 0; }
.c3d-step-head h3 { font-size: 1.125rem; font-weight: 600; color: var(--foreground); }

.c3d-preset-grid { margin-top: 20px; display: grid; gap: 12px; }
@media (min-width: 640px) { .c3d-preset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .c3d-preset-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Non-active buttons combine "hairline" (a shorthand `border: 1px solid
   steel/18%`) with Tailwind's "border-2 border-transparent" -- since
   hairline's shorthand comes later in the source order, it wins outright
   (both the width AND color), so the resting state actually shows a real
   1px hairline border, not an invisible transparent one. Confirmed via
   computed style on localhost:8080 (border-width:1px, not 2px). Only the
   *active* state (no "hairline" class there) genuinely gets border-2. */
.c3d-preset-btn { border-radius: var(--radius-xl); border: 1px solid color-mix(in oklab, var(--steel) 18%, transparent); padding: 16px; text-align: start; transition: border-color 0.2s, background-color 0.2s; background: transparent; }
.c3d-preset-btn:hover { border-color: color-mix(in oklab, var(--primary) 40%, transparent); }
.c3d-preset-btn.is-active { border: 2px solid var(--primary); background: color-mix(in oklab, var(--primary) 10%, transparent); }
.c3d-preset-name { font-size: 0.875rem; font-weight: 600; color: var(--foreground); }
.c3d-preset-dims { margin-top: 4px; font-size: 0.75rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }

.c3d-step-note { margin-top: 8px; font-size: 0.75rem; color: var(--muted-foreground); }

.c3d-add-cargo-btn { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radius-md); border: 1px solid color-mix(in oklab, var(--primary) 50%, transparent); padding: 6px 12px; font-size: 0.75rem; font-weight: 600; color: var(--primary); background: transparent; transition: background-color 0.2s; }
.c3d-add-cargo-btn:hover { background: color-mix(in oklab, var(--primary) 10%, transparent); }
.c3d-add-cargo-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.c3d-add-cargo-btn svg { width: 14px; height: 14px; }

.c3d-item-list { margin-top: 20px; display: flex; flex-direction: column; gap: 16px; }
.c3d-item { padding: 16px; }
.c3d-item-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.c3d-item-label { font-size: 0.75rem; font-weight: 600; color: var(--muted-foreground); flex-shrink: 0; }
.c3d-item-name { flex: 1; min-width: 140px; }
.c3d-color-group { display: flex; flex-shrink: 0; align-items: center; gap: 4px; }
.c3d-color-swatch { width: 16px; height: 16px; border-radius: 2px; opacity: 0.6; transition: transform 0.2s, opacity 0.2s; border: none; }
.c3d-color-swatch:hover { opacity: 1; }
.c3d-color-swatch.is-active { opacity: 1; transform: scale(1.1); box-shadow: 0 0 0 2px var(--background), 0 0 0 4px color-mix(in oklab, var(--foreground) 60%, transparent); }
.c3d-item-remove { flex-shrink: 0; border-radius: var(--radius-md); padding: 8px; color: var(--muted-foreground); transition: background-color 0.2s, color 0.2s; }
.c3d-item-remove:hover { background: color-mix(in oklab, var(--destructive) 10%, transparent); color: var(--destructive); }
.c3d-item-remove svg { width: 16px; height: 16px; }

.c3d-item-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 640px) { .c3d-item-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.c3d-item-checks { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 20px; }
.c3d-item-checks label { display: inline-flex; align-items: center; gap: 8px; font-size: 0.75rem; color: var(--muted-foreground); cursor: pointer; }
.c3d-item-checks input { width: 16px; height: 16px; accent-color: #fcb040; }

.c3d-actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }
.c3d-actions .btn { padding: 12px 28px; }
.c3d-reset-btn { display: inline-flex; align-items: center; gap: 8px; border-radius: var(--radius-md); border: 1px solid var(--border); padding: 12px 20px; font-size: 0.875rem; font-weight: 600; color: var(--muted-foreground); background: transparent; transition: color 0.2s; }
.c3d-reset-btn:hover { color: var(--foreground); }
.c3d-reset-btn svg { width: 16px; height: 16px; }

.c3d-result-step { padding: 16px; }
@media (min-width: 640px) { .c3d-result-step { padding: 24px; } }
.c3d-empty { display: flex; height: 380px; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; font-size: 0.875rem; color: var(--muted-foreground); }
@media (min-width: 640px) { .c3d-empty { height: 460px; } }

.c3d-hint { padding: 4px 8px 0; font-size: 0.75rem; color: var(--muted-foreground); }
.c3d-canvas { height: 380px; width: 100%; cursor: grab; touch-action: none; user-select: none; display: block; }
@media (min-width: 640px) { .c3d-canvas { height: 460px; } }
.c3d-canvas:active { cursor: grabbing; }

.c3d-fillbars { margin-top: 16px; display: grid; gap: 16px; padding-inline: 8px; }
@media (min-width: 640px) { .c3d-fillbars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.c3d-fillbar-head { display: flex; align-items: baseline; justify-content: space-between; font-size: 0.75rem; }
.c3d-fillbar-head span:first-child { color: var(--muted-foreground); }
.c3d-fillbar-pct { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--foreground); }
.c3d-fillbar-pct.is-warn { color: var(--destructive); }
.c3d-fillbar-track { margin-top: 6px; height: 8px; overflow: hidden; border-radius: 9999px; background: var(--muted); }
.c3d-fillbar-fill { height: 100%; border-radius: 9999px; background: var(--primary); transition: width 0.5s; }
.c3d-fillbar-fill.is-warn { background: var(--destructive); }

.c3d-order { margin-top: 20px; padding-inline: 8px; display: flex; flex-direction: column; gap: 8px; }
.c3d-order-row { display: flex; align-items: center; gap: 12px; font-size: 0.875rem; }
.c3d-order-swatch { width: 12px; height: 12px; flex-shrink: 0; border-radius: 2px; }
.c3d-order-name { font-weight: 500; color: var(--foreground); }
.c3d-order-status { margin-inline-start: auto; font-variant-numeric: tabular-nums; color: var(--muted-foreground); }

.c3d-disclaimer { padding: 16px 8px 0; text-align: center; font-size: 0.75rem; color: var(--muted-foreground); }

/* ===== Print isolation (ported verbatim from src/styles.css:453-602) ====
   Uses the modern :has() selector to hide the entire page except whatever
   sits inside #print-checklist when printing, so "Print checklist" /
   "Print spec sheet" only ever prints that one element, not the full page
   with header/nav/footer. Colors here are the source's own literal hex
   values (a print stylesheet, not tied to the site's oklch tokens). */
@media print {
	body:has(#print-checklist) * {
		visibility: hidden;
	}
	body:has(#print-checklist)
		*:not(:has(#print-checklist)):not(#print-checklist):not(#print-checklist *) {
		display: none !important;
	}
	body:has(#print-checklist),
	body:has(#print-checklist) *:not(#print-checklist):not(#print-checklist *) {
		min-height: 0 !important;
		height: auto !important;
	}
	body:has(#print-checklist) #print-checklist,
	body:has(#print-checklist) #print-checklist * {
		visibility: visible;
	}
	body:has(#print-checklist) #print-checklist {
		position: absolute;
		top: 0;
		left: 0;
		margin: 0;
		padding: 0;
		width: 100%;
		background: #fff;
		color: #14181f;
	}
	body:has(#print-checklist) #print-checklist .print-row {
		padding: 8px 12px;
		border: 1px solid #999;
		border-radius: 0;
		break-inside: avoid;
		box-shadow: none;
		animation: none;
		opacity: 1 !important;
		transform: none !important;
	}
	body:has(#print-checklist) #print-checklist .icon-float {
		animation: none;
	}

	.print-letterhead {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		padding-bottom: 10px;
		border-bottom: 3px solid #fcb040;
		margin-bottom: 12px;
	}
	.print-letterhead img {
		height: 50px;
		width: auto;
	}
	.print-letterhead-text {
		text-align: end;
	}
	.print-letterhead .pl-name {
		font-size: 17px;
		font-weight: 700;
		letter-spacing: 0.05em;
		color: #0b1220;
	}
	.print-letterhead .pl-tag {
		font-size: 10.5px;
		color: #555;
		margin-top: 2px;
	}
	.print-doc-title {
		font-size: 15px;
		font-weight: 700;
		color: #0b1220;
		margin: 0 0 10px;
	}
	.print-doc-sub {
		font-size: 11px;
		color: #444;
		margin: -6px 0 10px;
	}
	.print-footer {
		margin-top: 14px;
		padding-top: 8px;
		border-top: 1px solid #ccc;
		font-size: 10.5px;
		color: #444;
		display: flex;
		justify-content: space-between;
		gap: 12px;
		flex-wrap: wrap;
	}

	/* Container spec sheet: fill the full page */
	#print-checklist.specs-print .specs-grid {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}
	#print-checklist.specs-print .spec-card {
		display: block;
		padding: 12px 14px !important;
		margin: 0 !important;
		border: 1px solid #bbb !important;
		border-radius: 8px !important;
		break-inside: avoid;
		animation: none;
		opacity: 1 !important;
		transform: none !important;
	}
	#print-checklist.specs-print .spec-card img {
		height: 64px;
		width: auto;
		margin: 0 auto;
		display: block;
	}
	#print-checklist.specs-print .print-letterhead img {
		height: 42px;
	}
	#print-checklist.specs-print .print-letterhead {
		margin-bottom: 6px;
		padding-bottom: 6px;
	}
	#print-checklist.specs-print .specs-grid {
		gap: 8px;
	}
	#print-checklist.specs-print .spec-card {
		padding: 8px 12px !important;
	}
	#print-checklist.specs-print .spec-card h3 {
		font-size: 13px;
	}
	#print-checklist.specs-print .spec-card .spec-cbm {
		font-size: 12.5px;
	}
	#print-checklist.specs-print .spec-card dl {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 6px 12px;
		margin-top: 8px !important;
		font-size: 10.5px;
	}
	#print-checklist.specs-print .spec-card dt {
		font-size: 9px;
	}
	#print-checklist.specs-print .specs-intro {
		display: none;
	}
}