/* ─── iOS auto-zoom prevention: inputs must be >= 16px ─── */
input, select, textarea {
  font-size: 16px;
}

/* ─── Quill content rendering ─── */
.prose-body { font-family: 'Noto Serif JP', serif; font-size: 16px; line-height: 1.9; }
.prose-body p { margin: 0 0 1em; }
.prose-body h1, .prose-body h2, .prose-body h3 { font-weight: 700; margin: 1.5em 0 0.6em; line-height: 1.4; }
.prose-body h1 { font-size: 1.5em; }
.prose-body h2 { font-size: 1.25em; }
.prose-body h3 { font-size: 1.1em; }
.prose-body blockquote { border-left: 3px solid #1E3A5F; padding-left: 1em; margin: 1em 0; color: #555; }
.prose-body ul, .prose-body ol { margin: 0 0 1em; padding-left: 1.5em; }
.prose-body li { margin: 0.25em 0; }
.prose-body a { color: #1E3A5F; text-decoration: underline; }
.prose-body code { background: #f3f3f1; padding: 0.1em 0.3em; border-radius: 3px; font-size: 0.9em; }
.prose-body pre { background: #1a1a1a; color: #f0f0f0; padding: 1em; border-radius: 6px; overflow-x: auto; }

/* ─── Quill editor sizing & mobile toolbar ─── */
#editor, #commentEditor {
  min-height: 280px;
  border: 1px solid #d4d4d4 !important;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.ql-toolbar.ql-snow {
  border: 1px solid #d4d4d4 !important;
  border-bottom: none !important;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

/* On narrow screens, allow toolbar to scroll horizontally rather than wrap awkwardly,
   and enlarge tap targets. */
@media (max-width: 640px) {
  .ql-toolbar.ql-snow {
    overflow-x: auto;
    white-space: nowrap;
    padding: 6px 4px !important;
  }
  .ql-toolbar.ql-snow .ql-formats {
    display: inline-flex;
    margin-right: 8px !important;
  }
  .ql-toolbar.ql-snow button,
  .ql-toolbar.ql-snow .ql-picker {
    height: 32px !important;
    width: 32px !important;
  }
  .ql-toolbar.ql-snow .ql-picker { width: auto !important; padding: 0 4px; }
  #editor, #commentEditor { min-height: 220px; font-size: 16px; }
  .prose-body { font-size: 15px; line-height: 1.85; }
}

/* ─── Hide details summary marker ─── */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

/* ─── Sticky form action bar (mobile) ─── */
.form-actions-sticky {
  position: sticky;
  bottom: 0;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid #e5e5e5;
  margin: 0 -1rem -1.5rem;
  padding: 0.75rem 1rem env(safe-area-inset-bottom, 0.75rem);
  z-index: 10;
}

/* ─── Larger tap targets for primary actions on mobile ─── */
@media (max-width: 640px) {
  .btn-primary,
  .btn-secondary {
    min-height: 48px;
  }
}