/* TTB Handwriting Worksheet Maker - Styles (per-line rails) */
.ttb-hwm * { box-sizing: border-box; }
.ttb-hwm { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: #0b1220; }
.ttb-hwm-card { background: #fff; border-radius: 16px; box-shadow: 0 6px 24px rgba(0,0,0,.08); padding: 20px; max-width: 980px; margin: 20px auto; }
.ttb-hwm-title { font-size: 22px; margin-bottom: 12px; }
.ttb-hwm-subtitle { font-size: 16px; margin: 16px 0 8px; }

.ttb-hwm-row { margin: 12px 0; }
.ttb-hwm-controls label { font-weight: 600; display:block; margin-bottom: 6px; }
.ttb-hwm-controls input[type="number"],
.ttb-hwm-controls select,
.ttb-hwm-controls textarea { width: 100%; padding: 10px 12px; border: 1px solid #d7d9e0; border-radius: 10px; background: #fff; }
.ttb-hwm-controls textarea { min-height: 120px; resize: vertical; }
.ttb-hwm-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ttb-hwm-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

.ttb-hwm-actions { display:flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.ttb-btn { background: #0ea5e9; color: #fff; padding: 10px 14px; border-radius: 10px; border: none; cursor: pointer; font-weight: 700; }
.ttb-btn:hover { filter: brightness(0.95); }
.ttb-btn-secondary { background: #64748b; }

.ttb-hwm-preview-wrap { background: #f7f7fb; border: 1px solid #e5e7f2; border-radius: 12px; padding: 12px; margin-top: 20px; }
.ttb-hwm-preview { min-height: 300px; background: #fff; border: 1px dashed #c5c7d1; border-radius: 8px; padding: 16px; overflow:auto; }

/* Each visual line (computed in JS) */
.hwm-line{
  box-sizing: border-box;
  width: 100%;
  border-top:2px solid #000; border-bottom:2px solid #000;
  font-size: var(--font, 18pt);
  line-height: calc(var(--font, 18pt) - 3pt);
  letter-spacing: 0.5px;
  color: rgba(0,0,0,var(--letters,.5));
  white-space: pre;
  text-decoration-line: line-through;
  text-decoration-style: dashed;          /* ALWAYS dashed */
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(0,0,0,var(--mid,.3));
  text-decoration-skip-ink: none;
  margin: 0 0 3mm 0;
  padding: 0;
  padding-right: .2ch; 
}

/* Responsive */
@media (max-width: 720px){
  .ttb-hwm-grid-2, .ttb-hwm-grid-3 { grid-template-columns: 1fr; }
}