/* ===== HTML Viewer — CalcMojo =====
   Editor and preview sit side by side at a FIXED height so CodeMirror only has
   to draw the lines on screen (fast with very large documents). */
.cm-tool {
  --brand-orange: #FF6B35;
  --brand-orange-dark: #e85d26;
  --brand-navy: #1A1A2E;
  --text-primary: #333333;
  --text-secondary: #666666;
  --bg-white: #FFFFFF;
  --bg-light: #F8F9FA;
  --border: #E5E7EB;
  --input-focus: #FF6B35;
}
.cm-tool * { box-sizing: border-box; margin: 0; padding: 0; }
.cm-tool { max-width: 100%; overflow-x: hidden; }
.cm-tool { font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.6; color: var(--text-primary); background: transparent; }

.cm-tool .tool { width: 100%; margin: 0 auto; }
.cm-tool .tool * { min-width: 0; }
.cm-tool .tool-title { font-size: 22px; font-weight: 700; color: var(--brand-navy); margin-bottom: 16px; }

/* ----- toolbar ----- */
.cm-tool .hv-toolbar { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 10px; }
.cm-tool .hv-group { display: flex; flex-wrap: wrap; gap: 6px; }
.cm-tool .btn {
  background: var(--bg-white); border: 1px solid var(--border); padding: 7px 12px; border-radius: 8px;
  font-size: 14px; font-weight: 600; cursor: pointer; color: var(--text-secondary); font-family: inherit;
  transition: border-color .2s, color .2s, background .2s; min-height: 36px; white-space: nowrap;
}
.cm-tool .btn:hover { border-color: var(--brand-orange); color: var(--brand-orange); }
.cm-tool .btn:focus-visible { outline: 3px solid var(--input-focus); outline-offset: 2px; }
.cm-tool .btn-primary { background: var(--brand-orange); border-color: var(--brand-orange); color: #fff; }
.cm-tool .btn-primary:hover { background: var(--brand-orange-dark); color: #fff; }
.cm-tool .btn-small { min-height: 30px; padding: 4px 10px; font-size: 13px; }

.cm-tool .hv-options { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-bottom: 12px; font-size: 14px; color: var(--text-secondary); }
.cm-tool .hv-options label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.cm-tool .hv-options input { accent-color: var(--brand-orange); width: 16px; height: 16px; }
.cm-tool .hv-status { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 13px; }

/* ----- split pane (fixed height) ----- */
/* tall workspace: nearly a full screen once scrolled to */
.cm-tool .split-pane { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; height: clamp(520px, calc(100vh - 150px), 1300px); }
.cm-tool .pane { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg-white); }
.cm-tool .pane-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px; background: var(--bg-light); border-bottom: 1px solid var(--border); min-height: 36px; }
.cm-tool .pane-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.cm-tool .pane-exit { border: 0; background: var(--brand-orange); color: #fff; font: inherit; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 6px; cursor: pointer; }
.cm-tool .editor-host { flex: 1; min-height: 0; position: relative; }
.cm-tool .editor-host .ace_gutter { background: var(--bg-light); color: #9aa3a0; }
.cm-tool .preview-iframe { flex: 1; width: 100%; min-height: 0; border: 0; background: #fff; display: block; }

/* dark editor pane */
.cm-tool .hv-dark .pane-input { background: #0d1117; border-color: #30363d; }
.cm-tool .hv-dark .pane-input .pane-header { background: #161b22; border-color: #30363d; }
.cm-tool .hv-dark .pane-input .pane-label { color: #c9d1d9; }

/* editor expanded to the whole screen */
.cm-tool .hv-app.hv-editor-full .pane-input { position: fixed; inset: 0; z-index: 9999; border-radius: 0; border: 0; height: auto !important; min-height: 0 !important; }

/* ----- full page preview ----- */
.cm-tool .hv-full { position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column; background: #fff; }
.cm-tool .hv-full[hidden] { display: none; }
.cm-tool .hv-full-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; background: var(--brand-navy); color: #fff; font-size: 14px; font-weight: 600; }
.cm-tool .hv-full-bar .btn { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.cm-tool .hv-full-bar .btn-primary { background: var(--brand-orange); border-color: var(--brand-orange); }
.cm-tool .hv-full-frame { flex: 1; width: 100%; border: 0; background: #fff; }

.cm-tool .toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--brand-navy); color: #fff; padding: 8px 16px; border-radius: 8px; font-size: 14px; z-index: 10001; }
.cm-tool .toast[hidden] { display: none; }

@media (max-width: 820px) {
  /* phones: one compact flowing toolbar instead of a tall column of groups */
  .cm-tool .hv-toolbar { gap: 6px; }
  .cm-tool .hv-group { display: contents; }
  .cm-tool .hv-toolbar .btn { padding: 5px 10px; font-size: 13px; min-height: 34px; }
  .cm-tool .hv-options { gap: 6px 14px; font-size: 13px; }
  .cm-tool .split-pane { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; height: auto; }
  .cm-tool .pane { height: 60vh; min-height: 340px; }
  .cm-tool .hv-status { margin-left: 0; width: 100%; }
}


.cm-tool {
  --brand-orange: #17645f;
  --brand-orange-dark: #11524e;
  --brand-navy: #10302d;
  --brand-blue: #17645f;
  --text-primary: #10302d;
  --text-secondary: #4b5f5b;
  --bg-white: #fffdfa;
  --bg-light: #f6f2ec;
  --border: #e0d8cd;
  --input-border: #cfc5b8;
  --input-focus: #17645f;
  font-family: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--text-primary);
}
.cm-tool .calc-wrapper { width: 100%; padding: 0; }
.cm-tool .calc-wrapper > h2:first-child { display: none; }
/* Result numbers were sized by screen width (8-10vw) inside half-width cards, so long figures
   like "₹1,98,88,715" overflowed and split mid-number. Size them to fit the card instead. */
.cm-tool .result-big { font-size: clamp(22px, 3.6vw, 42px); overflow-wrap: break-word; word-break: normal; font-variant-numeric: tabular-nums; }
.cm-tool .result-hero .result-big { font-size: clamp(26px, 4.4vw, 50px); }