/*
 * Manual Generator styles (SPARCE) — isolated stylesheet; style.css untouched.
 *
 * Matches the app's homepage/panel design language: an airy light-gradient
 * background with soft, floating, rounded white cards, gentle shadows, pill
 * buttons, rounded inputs, tiny uppercase micro-labels and the blue accent
 * (--accent). Calm, minimal, premium — not a flat hard-edged document.
 */

.mg-root {
  max-width: 900px;
  margin: 0 auto;
  padding: 6px 28px 96px;
  font-family: var(--font, 'Inter', system-ui, sans-serif);
  font-size: 13px;
  color: var(--text, #1f2937);
}

/* Header */
.mg-head { padding: 6px 2px 16px; }
.mg-h2 { font-size: 16px; font-weight: 600; color: #1a2233; margin: 0 0 3px; letter-spacing: -0.01em; }
.mg-sub { color: var(--gray, #6b7280); font-size: 11.5px; margin: 0; max-width: 640px; line-height: 1.55; }
.mg-sub-label { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: #9aa1ad; margin: 6px 0; }

/* Controls bar — floating pill row */
.mg-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 4px 0 18px; }
/* Type selector + Generate reuse the app's .btn-create pill (exact homepage
   button style). The container is just a flex row; the active pill uses the
   button's filled hover look so the selection reads clearly. */
.mg-seg { display: inline-flex; gap: 6px; align-items: center; }
.mg-seg-active { background: rgba(59,130,246,0.2); border-color: rgba(59,130,246,0.75); }
.mg-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--gray, #6b7280); cursor: pointer; user-select: none; }
.mg-toggle input { accent-color: var(--accent, #3b82f6); cursor: pointer; margin: 0; }

.mg-target { display: flex; align-items: center; font-size: 12px; color: var(--gray, #6b7280); }
.mg-target select {
  margin-left: 8px; padding: 8px 12px; border: 1px solid #e9edf3; border-radius: 10px; font: inherit;
  font-size: 12px; background: #fff; box-shadow: 0 2px 10px rgba(17,24,39,0.04);
}

/* Buttons — soft rounded pills */
.mg-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 16px; border-radius: 10px; font: inherit; font-size: 12px; font-weight: 500;
  cursor: pointer; transition: filter .15s, transform .1s, box-shadow .15s;
  background: #fff; color: var(--text, #1f2937); border: 1px solid #e9edf3;
  box-shadow: 0 2px 10px rgba(17,24,39,0.05);
}
.mg-btn:hover { box-shadow: 0 4px 16px rgba(17,24,39,0.09); }
.mg-btn:active { transform: scale(0.98); }
.mg-btn:disabled { opacity: .55; cursor: default; box-shadow: none; }
.mg-btn-primary {
  background: var(--accent, #3b82f6); color: #fff; border-color: transparent;
  box-shadow: 0 1px 2px rgba(59,130,246,0.25);
}
.mg-btn-primary:hover { filter: brightness(1.05); box-shadow: 0 2px 6px rgba(59,130,246,0.30); }
.mg-ghost { background: transparent; color: var(--gray, #6b7280); border: 1px dashed #d7dce4; box-shadow: none; padding: 6px 12px; }
.mg-ghost:hover { background: rgba(59,130,246,0.05); box-shadow: none; }

.mg-output { margin-top: 4px; }

/* Cards — floating soft white with rounded corners + gentle shadow */
.mg-card {
  background: #fff; border: 1px solid #eef1f6; border-radius: 16px;
  padding: 20px 22px; margin: 0 0 16px;
  box-shadow: 0 6px 24px rgba(17,24,39,0.05);
}
.mg-h3 { font-size: 12.5px; font-weight: 700; color: #1a2233; margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.mg-meta { color: var(--gray, #9ca3af); font-size: 10.5px; margin-top: 6px; }

/* Cover */
.mg-cover .mg-title-edit {
  width: 100%; font-size: 17px; font-weight: 600; color: #1a2233; border: 0;
  border-bottom: 1px solid transparent; padding: 2px 0; font-family: inherit; background: transparent;
}
.mg-cover .mg-title-edit:focus { outline: none; border-bottom-color: #e5e9f0; }
.mg-intro-edit {
  width: 100%; border: 1px solid #eaeef4; border-radius: 12px; padding: 11px 13px; margin-top: 10px;
  font: inherit; font-size: 11.5px; color: var(--gray, #6b7280); line-height: 1.5; resize: none; overflow: hidden;
  background: #f7f9fc;
}
.mg-intro-edit:focus { outline: none; border-color: #cfe0fb; background: #fff; }

/* Validation bar */
.mg-valbar { display: flex; gap: 7px; flex-wrap: wrap; margin: 2px 0 12px; }
.mg-pill { font-size: 10.5px; font-weight: 600; padding: 4px 11px; border-radius: 20px; border: 1px solid #eef1f6; color: var(--gray, #6b7280); background: #fff; box-shadow: 0 2px 8px rgba(17,24,39,0.04); }
.mg-crit { border-color: #f2d9d6; color: var(--sev-bad, #9c534c); background: #fdf4f3; }
.mg-warn-pill { border-color: #efe1cd; color: var(--sev-warn, #9a6a38); background: #fdf8f1; }
.mg-info { border-color: #d7e3f7; color: #4a648c; background: #f4f8fe; }
.mg-rev { border-color: #e3d8f0; color: #6b4f96; background: #f9f5fd; }
.mg-review-banner {
  background: #fdf4f3; border: 1px solid #f2d9d6; color: var(--sev-bad, #9c534c);
  padding: 11px 15px; border-radius: 12px; font-size: 12px; margin-bottom: 14px;
  box-shadow: 0 2px 10px rgba(156,83,76,0.06);
}

/* Warnings — soft tinted rounded blocks */
.mg-warn {
  background: #f7f8fa; border-left: 3px solid #cbd2dc;
  padding: 8px 13px; border-radius: 10px; font-size: 12px; margin: 6px 0; color: var(--text, #1f2937);
}
.mg-warn b { margin-right: 6px; font-size: 9.5px; letter-spacing: .05em; font-weight: 700; }
.mg-sev-critical { border-left-color: var(--sev-bad, #9c534c); background: #fdf4f3; }
.mg-sev-warning { border-left-color: var(--sev-warn, #9a6a38); background: #fdf8f1; }
.mg-sev-info { border-left-color: #aeb6c2; background: #f7f8fa; }

/* Safety warnings — calm list: severity chip + text, thin dividers, no loud bars */
.mg-safety { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mg-safety-item { display: flex; align-items: flex-start; gap: 12px; padding: 11px 2px; border-top: 1px solid #f0f2f6; font-size: 12.5px; }
.mg-safety-item:first-child { border-top: 0; padding-top: 2px; }
.mg-safety-chip {
  flex: 0 0 auto; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 20px; border: 1px solid; white-space: nowrap; margin-top: 1px;
}
.mg-safety-text { color: #374151; line-height: 1.5; }

/* Tools */
.mg-tools { display: flex; flex-direction: column; gap: 9px; }
.mg-tool { border: 1px solid #eef1f6; border-radius: 12px; padding: 11px 13px; background: #fcfdfe; }
.mg-tool-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mg-tool-name { font-size: 12.5px; }
.mg-tag { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 8px; border-radius: 20px; background: #f1f3f7; color: #7a828f; border: 1px solid #e9edf3; }
.mg-ok { background: #eef6f1; color: var(--sev-good, #4f8069); border-color: #d5e7dc; }
.mg-bad { background: #fdf4f3; color: var(--sev-bad, #9c534c); border-color: #f2d9d6; }
.mg-special { background: #f5f2fb; color: #6b4f96; border-color: #e3d8f0; }
.mg-tooldef { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mg-tooldef input { flex: 1 1 120px; padding: 7px 10px; border: 1px solid #e9edf3; border-radius: 9px; font: inherit; font-size: 11.5px; background: #fff; }

/* Spare parts */
.mg-spares { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; }
.mg-callout, .mg-num {
  display: inline-flex; align-items: center; justify-content: center;
  background: #2b3444; color: #fff; border-radius: 50%; font-weight: 600;
}
.mg-callout { width: 22px; height: 22px; font-size: 10.5px; margin-right: 10px; flex: 0 0 22px; }

/* BOM table — rounded soft container */
.mg-bom { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 11.5px; border: 1px solid #eef1f6; border-radius: 12px; overflow: hidden; }
.mg-bom th, .mg-bom td { padding: 8px 11px; text-align: left; border-bottom: 1px solid #f0f2f6; }
.mg-bom tr:last-child td { border-bottom: 0; }
.mg-bom th { background: #f7f9fc; font-weight: 700; font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; color: #9aa1ad; }
.mg-bad-row { background: #fdf4f3; }

/* Visuals — rounded soft grey panels */
.mg-visual { background: #f2f4f7; border: 1px solid #eaedf2; border-radius: 12px; padding: 10px; }
.mg-visual svg { display: block; width: 100%; height: auto; }
.mg-exploded { max-width: 600px; }
.mg-placeholder {
  color: #9aa1ad; font-size: 11px; text-align: center; padding: 32px 10px;
  border: 1px dashed #dbe0e8; border-radius: 12px; background: #f7f9fc;
}
/* Steps whose component has no CAD geometry show no visual box — the
   instruction spans the full width instead of an empty placeholder.
   Higher specificity so it wins over the base .mg-step grid regardless of
   source order. */
.mg-step.mg-step-noimg { grid-template-columns: 1fr; }

/* Steps — floating soft cards */
.mg-steps { display: flex; flex-direction: column; gap: 14px; }
.mg-step {
  display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: start;
  background: #fff; border: 1px solid #eef1f6; border-radius: 14px; padding: 16px;
  box-shadow: 0 3px 14px rgba(17,24,39,0.04);
}
.mg-step .mg-visual {
  background: #f2f4f7; aspect-ratio: 4 / 3; padding: 6px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.mg-step .mg-visual svg, .mg-step .mg-visual img { width: 100%; height: 100%; object-fit: contain; }
.mg-step-top { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.mg-num { width: 28px; height: 28px; font-size: 13px; flex: 0 0 28px; box-shadow: 0 2px 8px rgba(43,52,68,0.25); }
.mg-step-title { flex: 1; font-size: 13px; font-weight: 600; color: #1a2233; border: 1px solid transparent; border-radius: 8px; padding: 5px 8px; font-family: inherit; background: transparent; }
.mg-step-title:hover { background: #f7f9fc; }
.mg-step-title:focus { outline: none; border-color: #cfe0fb; background: #fff; }
.mg-step-instr, .mg-step-note, .mg-prompt-text {
  width: 100%; border: 1px solid #eaeef4; border-radius: 10px; padding: 10px 12px;
  font: inherit; font-size: 13px; resize: none; overflow: hidden; background: #fff; color: var(--text, #1f2937); line-height: 1.5;
}
.mg-step-instr { min-height: 68px; }
.mg-step-instr:focus, .mg-step-note:focus, .mg-prompt-text:focus { outline: none; border-color: #cfe0fb; }
.mg-step-note { margin-top: 8px; background: #f7f9fc; font-size: 11.5px; }
.mg-step-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0; }
.mg-badge { font-size: 10px; color: var(--gray, #6b7280); background: #f7f9fc; border: 1px solid #eef1f6; border-radius: 20px; padding: 3px 9px; }
.mg-diff-hard { color: var(--sev-bad, #9c534c); border-color: #f2d9d6; background: #fdf4f3; }
.mg-diff-moderate { color: var(--sev-warn, #9a6a38); border-color: #efe1cd; background: #fdf8f1; }
.mg-missing { font-size: 11px; color: var(--sev-warn, #9a6a38); background: #fdf8f1; border-radius: 9px; padding: 5px 10px; margin: 4px 0; }
.mg-step-actions { margin: 6px 0; }
.mg-prompt { margin: 6px 0; }

/* Reassembly / issues */
.mg-reasm { font-size: 12.5px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.mg-issues { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
.mg-issues li { padding: 2px 0; display: flex; align-items: baseline; gap: 8px; }
.mg-sev-tag-critical { background: #fdf4f3; color: var(--sev-bad, #9c534c); border-color: #f2d9d6; }
.mg-sev-tag-warning { background: #fdf8f1; color: var(--sev-warn, #9a6a38); border-color: #efe1cd; }
.mg-sev-tag-info { background: #f4f8fe; color: #4a648c; border-color: #d7e3f7; }

/* Exports */
.mg-exports { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mg-exports .mg-h3 { width: 100%; }

/* Spinner + states */
.mg-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 72px 20px; color: var(--gray, #6b7280); font-size: 12px; }
.mg-spinner { width: 34px; height: 34px; border: 3px solid rgba(59,130,246,0.18); border-top-color: var(--accent, #3b82f6); border-radius: 50%; animation: mg-spin 0.8s linear infinite; }
@keyframes mg-spin { to { transform: rotate(360deg); } }
.mg-empty { text-align: center; color: #9aa1ad; padding: 66px 20px; }
.mg-empty-title { font-size: 14px; font-weight: 500; color: #8b93a1; margin-bottom: 6px; }
.mg-empty-sub { font-size: 12px; color: #b3bac6; line-height: 1.6; }
.mg-error { background: #fdf4f3; border: 1px solid #f2d9d6; color: var(--sev-bad, #9c534c); border-radius: 14px; padding: 16px 18px; font-size: 12.5px; box-shadow: 0 4px 16px rgba(156,83,76,0.07); }

/* Dark mode — follows the app's body.dark toggle. */
body.dark .mg-root { color: #e5e7eb; }
body.dark .mg-h2, body.dark .mg-h3, body.dark .mg-cover .mg-title-edit, body.dark .mg-step-title { color: #f3f4f6; }
body.dark .mg-card, body.dark .mg-step { background: #1e2127; border-color: #2b2f37; box-shadow: 0 6px 24px rgba(0,0,0,0.28); }
body.dark .mg-tool { background: #23262d; border-color: #2b2f37; }
body.dark .mg-seg { background: #23262d; border-color: #2b2f37; }
body.dark .mg-btn { background: #23262d; color: #e5e7eb; border-color: #2b2f37; }
body.dark .mg-btn-primary { background: var(--accent, #3b82f6); color: #fff; border-color: transparent; }
body.dark .mg-num, body.dark .mg-callout { background: #e5e7eb; color: #1a1a1a; }
body.dark .mg-bom { border-color: #2b2f37; }
body.dark .mg-bom th { background: #23262d; color: #9ca3af; }
body.dark .mg-bom th, body.dark .mg-bom td { border-color: #2b2f37; }
body.dark .mg-step-instr, body.dark .mg-step-title, body.dark .mg-intro-edit, body.dark .mg-step-note, body.dark .mg-tooldef input, body.dark .mg-target select {
  background: #191c21; color: #e5e7eb; border-color: #2b2f37;
}
body.dark .mg-visual { background: #14161a; border-color: #2b2f37; }

/* Responsive */
@media (max-width: 640px) { .mg-step { grid-template-columns: 1fr; } }

/* ── Tab visibility — airy gradient background like the app canvas ────── */
body.tab-manual .tab-view[data-view="manual"] {
  display: block; pointer-events: all; overflow: auto; padding-top: 58px;
  background: linear-gradient(135deg, #f4f8fd 0%, #f9fbff 50%, #ffffff 100%);
}
body.tab-manual #panel,
body.tab-manual #tree-canvas,
body.tab-manual #tree-placeholder,
body.tab-manual #bottom-toolbar { display: none; }
body.dark.tab-manual .tab-view[data-view="manual"] { background: linear-gradient(135deg, #14161a 0%, #17191e 60%, #1a1d22 100%); }