/*!
 * Long Division Visualizer — styles
 * All selectors are prefixed with .ld- to avoid clashing with your app's CSS.
 * Colors are defined as variables on .ld-widget / .ld-output-container so you
 * can override them per-instance, e.g.:
 *   <div id="box" style="--ld-accent:#2563eb"></div>
 */

.ld-widget,
.ld-output-container {
  --ld-paper: #f9fafb;
  --ld-ink: #1f2937;
  --ld-rule: #f79522;
  --ld-accent: #F68A0A;
  --ld-card: #ffffff;
  --ld-faded: #d1d5db;
  --ld-muted: #6b7280;

  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ld-ink);
}
.ld-widget *, .ld-output-container * { box-sizing: border-box; }

/* ---- full widget (mount) ---- */

.ld-widget {
  background: var(--ld-card);
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 20px 20px 18px;
  max-width: 520px;
}

.ld-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 14px;
}

.ld-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 110px;
}

.ld-field.ld-narrow { flex: 0 0 100px; }

.ld-field label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b7280;
}

.ld-input {
  font-family: 'Georgia', serif;
  font-size: 1.1rem;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #ffffff;
  color: var(--ld-ink);
  width: 100%;
}
.ld-input:focus {
  outline: none;
  border-color: var(--ld-accent);
}

.ld-button {
  font-family: Arial, sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  padding: 10px 18px;
  border: none;
  border-radius: 6px;
  background: var(--ld-accent);
  color: #ffffff;
  cursor: pointer;
  flex: 0 0 auto;
  transition: transform .12s ease, box-shadow .12s ease;
}
.ld-button:hover { box-shadow: 0 4px 10px rgba(246,138,10,0.35); }
.ld-button:active { transform: translateY(1px); }

/* ---- shared: error / notes / output ---- */

.ld-error {
  color: var(--ld-accent);
  font-size: 0.85rem;
  min-height: 1.1em;
  margin-bottom: 4px;
}

.ld-shift-note {
  color: var(--ld-muted);
  font-size: 0.78rem;
  margin-bottom: 8px;
}

.ld-trunc-note {
  color: var(--ld-muted);
  font-size: 0.78rem;
  margin-top: 10px;
}

.ld-output {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.3rem;
  line-height: 1.25;
  white-space: pre;
  overflow-x: auto;
  margin: 0;
  padding: 8px 0;
}

.ld-quotient-line { color: var(--ld-accent); font-weight: bold; }
.ld-quotient-bar {
  display: inline-block;
  border-bottom: 2px solid var(--ld-rule);
  padding-bottom: 3px;
  line-height: 1;
}

.ld-dividend-line { color: var(--ld-ink); font-weight: bold; }
.ld-dividend-virtual { color: var(--ld-faded); font-weight: normal; }

.ld-work-line { color: #374151; }
.ld-product-bar {
  display: inline-block;
  border-bottom: 2px solid var(--ld-rule);
  padding-bottom: 2px;
  line-height: 1;
}

.ld-remainder-line { color: var(--ld-accent); font-weight: bold; }