/*!
 * dxf-doctor.css
 * -----------------------------------------------------------------------
 * Styles for the DXF Doctor tool panel (dxf-doctor-ui.js). Matches the
 * existing dxfstudio.com look: light theme, rounded cards, soft shadows,
 * Inter font stack. Accent uses the cobalt #2563eb requested for this
 * tool; site-wide pages use a close sibling cobalt (#1A4FBF) — both read
 * as the same "cobalt/blue" family so the tool feels native to the site.
 * Fully responsive down to narrow mobile widths.
 * -----------------------------------------------------------------------
 */

.dxfdoc-root {
  --dxfdoc-cobalt: #1A4FBF;
  --dxfdoc-cobalt-d: #123a8f;
  --dxfdoc-cobalt-soft: #eaf0fd;
  --dxfdoc-cobalt-line: #d4e0fb;
  --dxfdoc-ink: #0d1426;
  --dxfdoc-slate: #5b6678;
  --dxfdoc-line: #dce3f0;
  --dxfdoc-bg: #f6f8fc;
  --dxfdoc-card: #ffffff;
  --dxfdoc-ok: #1f9d57;
  --dxfdoc-warn: #b45309;
  --dxfdoc-fail: #dc2626;
  --dxfdoc-radius: 14px;
  --dxfdoc-radius-sm: 9px;
  --dxfdoc-shadow: 0 12px 32px -16px rgba(13, 20, 38, 0.18);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--dxfdoc-ink);
  box-sizing: border-box;
}
.dxfdoc-root, .dxfdoc-root * , .dxfdoc-root *::before, .dxfdoc-root *::after {
  box-sizing: border-box;
}
.dxfdoc-hidden { display: none !important; }

/* ---- Drop zone --------------------------------------------------- */
.dxfdoc-drop {
  background: var(--dxfdoc-card);
  border: 2px dashed var(--dxfdoc-line);
  border-radius: var(--dxfdoc-radius);
  padding: 44px 28px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
}
.dxfdoc-drop:hover { border-color: var(--dxfdoc-cobalt-line); background: #fbfcff; }
.dxfdoc-drop:focus-visible { outline: 2px solid var(--dxfdoc-cobalt); outline-offset: 3px; }
.dxfdoc-drop.dxfdoc-drag-over {
  border-color: var(--dxfdoc-cobalt);
  background: var(--dxfdoc-cobalt-soft);
  transform: scale(1.005);
}
.dxfdoc-drop-icon {
  width: 56px; height: 56px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 16px; background: var(--dxfdoc-cobalt-soft); color: var(--dxfdoc-cobalt);
  font-size: 1.6rem; font-weight: 700;
}
.dxfdoc-drop h3 { margin: 0 0 6px; font-size: 1.2rem; letter-spacing: -0.01em; }
.dxfdoc-drop p { margin: 0 0 18px; color: var(--dxfdoc-slate); font-size: 0.92rem; max-width: 46ch; margin-left: auto; margin-right: auto; }
.dxfdoc-hidden-input { display: none; }

/* ---- Buttons ------------------------------------------------------ */
.dxfdoc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-weight: 600; font-size: 0.92rem;
  padding: 10px 20px; border-radius: 9px; border: none; cursor: pointer;
  transition: background .15s, transform .1s, color .15s, border-color .15s;
}
.dxfdoc-btn-primary { background: var(--dxfdoc-cobalt); color: #fff; box-shadow: 0 8px 20px -10px var(--dxfdoc-cobalt); }
.dxfdoc-btn-primary:hover { background: var(--dxfdoc-cobalt-d); transform: translateY(-1px); }
.dxfdoc-btn-ghost { background: var(--dxfdoc-cobalt-soft); color: var(--dxfdoc-cobalt); border: 1px solid var(--dxfdoc-cobalt-line); }
.dxfdoc-btn-ghost:hover { background: var(--dxfdoc-cobalt); color: #fff; }

/* ---- Progress ------------------------------------------------------ */
.dxfdoc-progress {
  margin-top: 18px; background: var(--dxfdoc-card); border: 1px solid var(--dxfdoc-line);
  border-radius: var(--dxfdoc-radius-sm); padding: 14px 16px;
}
.dxfdoc-progress-bar {
  height: 8px; border-radius: 6px; background: var(--dxfdoc-cobalt);
  width: 0%; transition: width .2s ease-out; margin-bottom: 8px;
}
.dxfdoc-progress::before { content: ''; }
.dxfdoc-progress-label { font-size: 0.85rem; color: var(--dxfdoc-slate); }

/* ---- Privacy note --------------------------------------------------- */
.dxfdoc-privacy-note {
  margin: 16px 0 0; font-size: 0.86rem; color: var(--dxfdoc-slate);
  display: flex; align-items: center; gap: 8px;
}
.dxfdoc-privacy-dot { color: var(--dxfdoc-ok); font-size: 0.6rem; }

/* ---- Score card ------------------------------------------------------ */
.dxfdoc-score-card {
  margin-top: 18px; display: flex; align-items: center; gap: 22px;
  background: var(--dxfdoc-card); border: 1px solid var(--dxfdoc-line);
  border-radius: var(--dxfdoc-radius); padding: 22px 26px; box-shadow: var(--dxfdoc-shadow);
}
.dxfdoc-score-ring {
  --score: 0;
  width: 84px; height: 84px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: conic-gradient(var(--ring-color, var(--dxfdoc-cobalt)) calc(var(--score) * 1%), #eef1f8 0);
  position: relative;
}
.dxfdoc-score-ring::before {
  content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--dxfdoc-card);
}
.dxfdoc-score-num { position: relative; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
.dxfdoc-score-good .dxfdoc-score-ring { --ring-color: var(--dxfdoc-ok); }
.dxfdoc-score-mid .dxfdoc-score-ring { --ring-color: var(--dxfdoc-warn); }
.dxfdoc-score-bad .dxfdoc-score-ring { --ring-color: var(--dxfdoc-fail); }
.dxfdoc-score-band { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
.dxfdoc-score-good .dxfdoc-score-band { color: var(--dxfdoc-ok); }
.dxfdoc-score-mid .dxfdoc-score-band { color: var(--dxfdoc-warn); }
.dxfdoc-score-bad .dxfdoc-score-band { color: var(--dxfdoc-fail); }
/* The score describes the file as uploaded, not the repaired preview sitting
   next to it in the viewer. Saying so stops the red band reading as a verdict
   on the download. */
.dxfdoc-score-eyebrow {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--dxfdoc-slate); margin-bottom: 2px;
}
.dxfdoc-score-file { color: var(--dxfdoc-slate); font-size: 0.86rem; margin-top: 2px; word-break: break-all; }
.dxfdoc-score-sub { color: var(--dxfdoc-slate); font-size: 0.82rem; margin-top: 6px; }

/* ---- Layout: viewer + issues side by side --------------------------- */
.dxfdoc-layout {
  margin-top: 18px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; align-items: start;
}
@media (max-width: 920px) { .dxfdoc-layout { grid-template-columns: 1fr; } }

/* ---- Viewer panel ----------------------------------------------------- */
.dxfdoc-viewer-panel {
  background: var(--dxfdoc-card); border: 1px solid var(--dxfdoc-line);
  border-radius: var(--dxfdoc-radius); padding: 16px; box-shadow: var(--dxfdoc-shadow);
}
.dxfdoc-viewer-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.dxfdoc-zoom-controls { display: flex; gap: 6px; }
.dxfdoc-zoom-controls .dxfdoc-btn { padding: 6px 12px; font-size: 1rem; line-height: 1; }
.dxfdoc-before-after { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--dxfdoc-slate); font-weight: 600; }
.dxfdoc-before-after input[type="range"] { accent-color: var(--dxfdoc-cobalt); width: 110px; }
/* While the repair is still running the Before view is already on screen and
   the After half of the control is muted, with the slider held at Before. */
.dxfdoc-before-after input[type="range"]:disabled { cursor: progress; opacity: 0.5; }
.dxfdoc-before-after.dxfdoc-computing .dxfdoc-ba-after { color: var(--dxfdoc-cobalt); font-weight: 700; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .dxfdoc-before-after.dxfdoc-computing .dxfdoc-ba-after { animation: dxfdoc-pulse 1.2s ease-in-out infinite; }
}
@keyframes dxfdoc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.dxfdoc-canvas-wrap {
  border: 1px solid var(--dxfdoc-line); border-radius: var(--dxfdoc-radius-sm); overflow: hidden;
  background: #fff; background-image: linear-gradient(#eef1f8 1px, transparent 1px), linear-gradient(90deg, #eef1f8 1px, transparent 1px);
  background-size: 24px 24px;
}
.dxfdoc-canvas { display: block; width: 100%; cursor: grab; touch-action: none; }
.dxfdoc-canvas:active { cursor: grabbing; }
.dxfdoc-layers-box { margin-top: 14px; }
.dxfdoc-layers-box h4 { margin: 0 0 8px; font-size: 0.85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--dxfdoc-slate); }
.dxfdoc-layer-list { display: flex; flex-wrap: wrap; gap: 10px; }
.dxfdoc-layer-row { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; background: var(--dxfdoc-bg); border: 1px solid var(--dxfdoc-line); border-radius: 100px; padding: 4px 10px 4px 8px; cursor: pointer; }
.dxfdoc-layer-row input { accent-color: var(--dxfdoc-cobalt); }

/* ---- Issues panel ------------------------------------------------------ */
.dxfdoc-issues-panel {
  background: var(--dxfdoc-card); border: 1px solid var(--dxfdoc-line);
  border-radius: var(--dxfdoc-radius); padding: 20px; box-shadow: var(--dxfdoc-shadow);
  max-height: 720px; overflow-y: auto;
}
.dxfdoc-issues-panel h3 { margin: 0 0 14px; font-size: 1.05rem; letter-spacing: -0.01em; }
.dxfdoc-group { margin-bottom: 20px; }
.dxfdoc-group-head { margin-bottom: 8px; }
.dxfdoc-group-title { display: block; font-weight: 700; font-size: 0.95rem; }
.dxfdoc-group-blockingtitle { color: var(--dxfdoc-fail); }
.dxfdoc-group-blocking .dxfdoc-group-title { color: var(--dxfdoc-fail); }
.dxfdoc-group-quality .dxfdoc-group-title { color: var(--dxfdoc-warn); }
.dxfdoc-group-info .dxfdoc-group-title { color: var(--dxfdoc-slate); }
.dxfdoc-group-blurb { display: block; font-size: 0.8rem; color: var(--dxfdoc-slate); margin-top: 2px; }
.dxfdoc-group-clean { font-size: 0.85rem; color: var(--dxfdoc-ok); background: #eefbf2; border: 1px solid #cdeedb; padding: 8px 12px; border-radius: var(--dxfdoc-radius-sm); }

.dxfdoc-issue-card {
  border: 1px solid var(--dxfdoc-line); border-left-width: 4px; border-radius: var(--dxfdoc-radius-sm);
  padding: 12px 14px; margin-bottom: 10px; background: #fdfdff;
}
.dxfdoc-sev-fail { border-left-color: var(--dxfdoc-fail); }
.dxfdoc-sev-warn { border-left-color: var(--dxfdoc-warn); }
.dxfdoc-sev-info { border-left-color: var(--dxfdoc-slate); }
.dxfdoc-issue-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.dxfdoc-issue-badge {
  font-size: 0.65rem; font-weight: 800; letter-spacing: .05em; padding: 2px 7px; border-radius: 100px;
  background: var(--dxfdoc-bg); color: var(--dxfdoc-slate);
}
.dxfdoc-sev-fail .dxfdoc-issue-badge { background: #fde8e8; color: var(--dxfdoc-fail); }
.dxfdoc-sev-warn .dxfdoc-issue-badge { background: #fef3e0; color: var(--dxfdoc-warn); }
.dxfdoc-issue-label { font-weight: 700; font-size: 0.92rem; flex: 1; }
.dxfdoc-issue-count { font-size: 0.8rem; color: var(--dxfdoc-slate); font-weight: 600; }
.dxfdoc-issue-detail { font-size: 0.85rem; margin: 0 0 6px; }
.dxfdoc-issue-why, .dxfdoc-issue-fix { font-size: 0.83rem; color: var(--dxfdoc-slate); margin: 0 0 4px; }
.dxfdoc-issue-why b, .dxfdoc-issue-fix b { color: var(--dxfdoc-ink); }

/* position:relative is load-bearing, not cosmetic. The real checkbox is
   visually hidden and absolutely positioned; without a positioning context
   here, its containing block resolves to a positioned ancestor OUTSIDE the
   scrolling issues panel. The switch you see then scrolls with the panel
   while the invisible input stays behind, so clicking the switch moves focus
   to an element that is now hundreds of pixels down the page -- and the
   browser dutifully scrolls there. Anchoring the input to its own label
   keeps the two together at every scroll position. */
.dxfdoc-toggle { display: flex; align-items: center; gap: 8px; margin-top: 8px; cursor: pointer; font-size: 0.82rem; position: relative; }
.dxfdoc-toggle input {
  position: absolute; left: 0; top: 50%; width: 34px; height: 19px; margin: -10px 0 0 0;
  opacity: 0; pointer-events: none;
}
/* The input is invisible, so keyboard focus needs a visible target. */
.dxfdoc-toggle input:focus-visible + .dxfdoc-toggle-slider {
  outline: 2px solid var(--dxfdoc-cobalt, #1A4FBF); outline-offset: 2px;
}
.dxfdoc-toggle-slider {
  width: 34px; height: 19px; border-radius: 100px; background: #d7deec; position: relative; flex: none; transition: background .15s;
}
.dxfdoc-toggle-slider::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%;
  background: #fff; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.dxfdoc-toggle input:checked + .dxfdoc-toggle-slider { background: var(--dxfdoc-cobalt); }
.dxfdoc-toggle input:checked + .dxfdoc-toggle-slider::after { transform: translateX(15px); }
.dxfdoc-toggle-text { color: var(--dxfdoc-ink); font-weight: 500; }

.dxfdoc-locate-btn { margin-top: 8px; padding: 6px 12px; font-size: 0.78rem; }

.dxfdoc-passed-details { margin-top: 6px; font-size: 0.82rem; color: var(--dxfdoc-slate); }
.dxfdoc-passed-details summary { cursor: pointer; font-weight: 600; }
.dxfdoc-passed-item { padding: 4px 0 4px 12px; color: var(--dxfdoc-ok); }

/* ---- Download bar (the only gated action) ----------------------------- */
.dxfdoc-download-bar {
  margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(135deg, #0d1426, #16233f); color: #dfe6f5;
  border-radius: var(--dxfdoc-radius); padding: 20px 24px;
}
.dxfdoc-download-copy { font-size: 0.92rem; max-width: 56ch; }
.dxfdoc-download-copy strong { color: #fff; }
.dxfdoc-download-note { display: inline-block; margin-top: 6px; font-size: 0.82rem; opacity: 0.78; line-height: 1.45; }
.dxfdoc-download-btn { white-space: nowrap; }

/* Post-handoff status strip. Shown while the file is handed over so a slow
   (cold-starting) app server never looks like a broken button. */
.dxfdoc-handoff-note {
  margin-top: 14px; padding: 14px 18px;
  border: 1px solid var(--dxfdoc-line, #dce3f0);
  border-left: 4px solid var(--dxfdoc-cobalt, #1A4FBF);
  border-radius: var(--dxfdoc-radius, 14px);
  background: #f6f8fc; color: #0d1426;
  font-size: 0.9rem; line-height: 1.5;
  display: flex; flex-direction: column; gap: 4px;
}
.dxfdoc-handoff-note strong { color: var(--dxfdoc-cobalt, #1A4FBF); }
.dxfdoc-handoff-note a {
  align-self: flex-start; margin-top: 4px;
  color: var(--dxfdoc-cobalt, #1A4FBF); font-weight: 600;
}

/* ---- Small screens ------------------------------------------------------ */
@media (max-width: 640px) {
  .dxfdoc-drop { padding: 30px 16px; }
  .dxfdoc-score-card { flex-direction: column; align-items: flex-start; text-align: left; }
  .dxfdoc-viewer-toolbar { flex-direction: column; align-items: stretch; }
  .dxfdoc-zoom-controls { justify-content: center; }
  .dxfdoc-before-after { justify-content: center; }
  .dxfdoc-download-bar { flex-direction: column; align-items: stretch; text-align: center; }
  .dxfdoc-issues-panel { max-height: none; }
}

/* "Try a sample" link inside the drop zone ------------------------------- */
.dxfdoc-samplelink{
  display:block; margin:14px auto 0; background:none; border:0; padding:4px 8px;
  font:inherit; font-size:.85rem; color:#1A4FBF; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px;
}
.dxfdoc-samplelink:hover{ color:#123a8f; }

/* Keep the drawing column pinned while the (much taller) issues column
   scrolls past it, instead of leaving dead whitespace under the canvas. */
@media (min-width: 981px){
  .dxfdoc-viewer-panel{ position:sticky; top:16px; align-self:start; }
}


/* ---- Before / projected score pair (DXFstudio_18) ---------------------
   The card used to show one number -- the file as supplied -- so a visitor
   read "0, not machine-ready" and had no idea what the token would buy. The
   pair shows the same arithmetic the engine already did, plus what is left
   once the ticked fixes are applied. */
.dxfdoc-scoreduo {
  margin-top: 18px; display: grid;
  grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 14px;
}
.dxfdoc-scoreduo .dxfdoc-score-card { margin-top: 0; height: 100%; }
.dxfdoc-scoreduo-arrow {
  align-self: center; font-size: 1.6rem; font-weight: 700;
  color: var(--dxfdoc-slate); opacity: 0.55; user-select: none;
}
.dxfdoc-score-after { border-color: var(--dxfdoc-cobalt-line); background: linear-gradient(180deg, #fbfdff, #f4f8ff); }
.dxfdoc-score-delta {
  margin-top: 3px; font-size: 0.84rem; font-weight: 600; color: var(--dxfdoc-cobalt);
}
.dxfdoc-score-sub { color: var(--dxfdoc-slate); font-size: 0.8rem; margin-top: 4px; line-height: 1.45; }
@media (max-width: 860px) {
  .dxfdoc-scoreduo { grid-template-columns: 1fr; }
  .dxfdoc-scoreduo-arrow { transform: rotate(90deg); justify-self: center; }
}

/* The free-first-token line inside the dark export bar. */
.dxfdoc-download-free {
  display: inline-block; margin-top: 6px; font-size: 0.86rem; font-weight: 600;
  color: #cfe0ff; line-height: 1.45;
}

/* ---- Keep-a-copy / email the report ---------------------------------- */
.dxfdoc-report-actions {
  margin-top: 18px; background: var(--dxfdoc-card);
  border: 1px solid var(--dxfdoc-line); border-radius: var(--dxfdoc-radius);
  padding: 22px 26px; box-shadow: var(--dxfdoc-shadow);
}
.dxfdoc-report-actions h3 { margin: 0 0 4px; font-size: 1.05rem; letter-spacing: -0.01em; }
.dxfdoc-report-blurb { margin: 0 0 14px; color: var(--dxfdoc-slate); font-size: 0.9rem; line-height: 1.5; }
.dxfdoc-report-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dxfdoc-report-emailform { display: flex; gap: 8px; flex: 1 1 340px; min-width: 0; }
.dxfdoc-report-input {
  flex: 1 1 auto; min-width: 0; padding: 10px 13px; font: inherit; font-size: 0.92rem;
  color: var(--dxfdoc-ink); background: #fff;
  border: 1px solid var(--dxfdoc-line); border-radius: var(--dxfdoc-radius-sm);
}
.dxfdoc-report-input:focus {
  outline: none; border-color: var(--dxfdoc-cobalt);
  box-shadow: 0 0 0 3px var(--dxfdoc-cobalt-soft);
}
.dxfdoc-report-status { margin: 12px 0 0; font-size: 0.88rem; min-height: 1.2em; }
.dxfdoc-report-ok { color: var(--dxfdoc-ok); font-weight: 600; }
.dxfdoc-report-err { color: var(--dxfdoc-fail); font-weight: 600; }
.dxfdoc-report-fineprint { margin: 10px 0 0; font-size: 0.78rem; color: var(--dxfdoc-slate); line-height: 1.5; }
@media (max-width: 620px) {
  .dxfdoc-report-row { flex-direction: column; align-items: stretch; }
  .dxfdoc-report-emailform { flex-direction: column; }
}