/* Sales documents (contract form, quotation letter, renewal form, treatment card): input sheet + live preview */
.sd-grid { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 16px; align-items: start; }
.sd-form { display: grid; gap: 12px; }
.sd-sec { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 12px 14px 14px; margin: 0; min-width: 0; }
.sd-sec legend { font: 700 13px/1 var(--display); padding: 0 6px; color: var(--ink); }
.sd-sec .muted { margin: 0 0 8px; font-size: 12.5px; }
.sd-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.sd-fields > .sd-f:has(textarea), .sd-fields > .sd-f:has(.sd-chips), .sd-fields > .sd-chips { grid-column: 1 / -1; }
.sd-f { display: grid; gap: 4px; min-width: 0; }
.sd-f input[type=text], .sd-f input[type=number], .sd-f input[type=date], .sd-f textarea, .sd-f select { width: 100%; min-width: 0; padding: 8px 9px; border: 1px solid var(--line); border-radius: 6px; font: inherit; background: #fff; color: var(--ink); }
.sd-f input[readonly] { background: var(--hover); }
.sd-f textarea { resize: vertical; }
.sd-lab { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.sd-f small { color: var(--muted); font-size: 11.5px; }
.sd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sd-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; font-size: 13px; cursor: pointer; line-height: 1.2; }
.sd-chip:has(input:checked) { background: var(--navy); border-color: var(--navy); color: #fff; }
.sd-chip input { accent-color: var(--red); margin: 0; }
.sd-chip:has(input:disabled) { cursor: default; opacity: .8; }
.sd-prev { position: sticky; top: 12px; }
.sd-prev-wrap { background: #cfd3da; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
#sd-frame { width: 820px; border: 0; display: block; transform-origin: 0 0; background: #e5e7eb; }
.sd-seg { display: none; }
.sd-tabs { margin-top: 4px; }
.sd-entry .btn-row { gap: 8px; }
.sd-grp { border-top: 1px solid var(--line-2); padding: 8px 0; }
.sd-grp > summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.sd-blk { display: grid; gap: 8px; padding: 10px; margin: 6px 0; border: 1px solid var(--line-2); border-radius: 8px; background: var(--hover); }
.sd-blk .f { display: grid; gap: 4px; }
.sd-new { background: #fff; border-style: dashed; }
@media (max-width: 900px) {
  .sd-grid { display: block; }
  .sd-seg { display: flex; margin: 0 0 12px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
  .sd-seg button { flex: 1; min-height: 44px; border: 0; background: none; font: 600 14px var(--body); border-right: 1px solid var(--line-2); }
  .sd-seg button:last-child { border-right: 0; }
  .sd-seg button.on { background: var(--navy); color: #fff; }
  .sd-grid[data-view=form] .sd-prev { display: none; }
  .sd-grid[data-view=prev] .sd-form { display: none; }
  .sd-prev { position: static; }
  .sd-fields { grid-template-columns: 1fr; }
  .sd-f input[type=text], .sd-f input[type=number], .sd-f input[type=date], .sd-f textarea, .sd-f select { min-height: 44px; font-size: 16px; }
  .sd-chip { min-height: 40px; }
  .sd-entry .btn-row .btn { flex: 1; min-height: 46px; }
}