/* The 3D file converter widget (assets/converter/converter.js renders it into [data-converter]).
   Loaded only by the converter pages. Same tokens as site.css: sharp corners, one blue. */

.cv {
  border: 1px solid var(--edge); border-radius: var(--r); background: var(--panel);
  padding: clamp(18px, 3vw, 30px); display: grid; gap: 16px;
  /* minmax(0, 1fr), not the implicit auto track: an auto track grows to its widest item's
     min-content, and a long file name with no spaces in it (ct40_leg_rev_C_final.step) made the
     whole widget, and the page, wider than a phone. */
  grid-template-columns: minmax(0, 1fr);
}
.cv-noscript { color: var(--dim); font-size: 15px; }
/* The widget's parts set display: grid / flex, which would otherwise beat the hidden attribute. */
.cv [hidden] { display: none !important; }

.cv-drop {
  display: grid; justify-items: center; gap: 6px; text-align: center;
  padding: clamp(28px, 5vw, 48px) 18px; cursor: pointer;
  border: 1.5px dashed var(--faint); border-radius: var(--r); background: #fff;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.cv-drop:hover, .cv-drop.is-over { border-color: var(--accent); background: #eff6ff; }
.cv-drop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cv-icon { color: var(--accent); margin-bottom: 4px; }
.cv-drop-title { font-size: clamp(17px, 1.8vw, 20px); font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.cv-drop-sub { font-size: 15px; color: var(--dim); }
.cv-link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.cv-drop-hint { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--quiet); margin-top: 4px; }
/* Visually hidden rather than display:none: some browsers refuse click() on a display:none file input. */
.cv-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cv-ready .cv-drop { position: relative; }

.cv-file { display: grid; gap: 2px; }
.cv-file-name { font-weight: 650; color: var(--ink); font-size: 15px; overflow-wrap: anywhere; }
.cv-file-sum { color: var(--dim); font-size: 15px; }

.cv-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cv-label { font-size: 14px; font-weight: 600; color: var(--ink); }
.cv-select {
  height: 50px; min-width: 220px; padding: 0 14px; font: inherit; font-size: 15px; color: var(--ink);
  border: 1px solid var(--edge); border-radius: var(--r); background: #fff;
}
.cv-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cv-row .btn[disabled] { opacity: .5; cursor: default; transform: none; box-shadow: none; }

.cv-note { color: var(--dim); font-size: 14px; line-height: 1.55; max-width: 70ch; }

.cv-progress { height: 3px; background: var(--edge); overflow: hidden; border-radius: var(--r); }
.cv-progress i { display: block; height: 100%; width: 35%; background: var(--accent); animation: cv-slide 1.3s var(--ease) infinite; }
@keyframes cv-slide { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
@media (prefers-reduced-motion: reduce) { .cv-progress i { animation: none; width: 100%; opacity: .5; } }

.cv-status { font-size: 15px; color: var(--dim); min-height: 1.6em; }
.cv-status:empty { display: none; }
.cv-status.is-ok { color: var(--ok); font-weight: 600; }
.cv-status.is-refused {
  color: var(--ink); background: #fff; border: 1px solid var(--edge); border-left: 3px solid #b45309;
  padding: 12px 14px; border-radius: var(--r);
}

.cv-result { display: grid; gap: 14px; justify-items: start; grid-template-columns: minmax(0, 1fr); }
.cv-check {
  color: var(--ink); font-size: 15px; line-height: 1.55; max-width: 72ch;
  border-left: 3px solid var(--ok); padding-left: 12px;
}
.cv-result .btn {
  white-space: normal; height: auto; min-height: 50px; padding-top: 10px; padding-bottom: 10px; text-align: center;
  max-width: 100%; overflow-wrap: anywhere;
}

.cv-cta {
  display: grid; gap: 12px; justify-items: start; border-top: 1px solid var(--edge); padding-top: 16px;
}
.cv-cta p { color: var(--dim); font-size: 15px; line-height: 1.55; max-width: 70ch; }
.cv-cta b { color: var(--ink); }

.cv-private { color: var(--quiet); font-size: 14px; margin-top: 12px; }

/* The static parts of the converter pages. */
.cv-wrap { max-width: 880px; }
@media (min-width: 1100px) {
  /* The same reading-column indent site.css gives .prose on the subpages. */
  section > .wrap > .cv-wrap, section > .wrap > .cv-faq { margin-left: clamp(0px, 4vw, 76px); }
}
.cv-pairs { margin-top: 26px; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .cv-pairs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cv-pairs { grid-template-columns: 1fr; } }
.cv-faq { max-width: 880px; }
.cv-faq h3 { font-size: clamp(19px, 2vw, 23px); line-height: 1.3; letter-spacing: -0.015em; margin: 0; }
.cv-faq .a p { color: var(--dim); font-size: 16px; line-height: 1.65; }
.credits li { font-size: 15px; }

@media (max-width: 560px) {
  .cv-select, .cv-row .btn { width: 100%; }
  .cv-label { width: 100%; }
}