/* public/note/style.css — DROP-IN OVERWRITE
   NoteLink-specific overrides
   --------------------------------------
   Most styling lives in /assets/ui.css.
   This file is intentionally lightweight,
   matching the design pattern for Slot/Vote/Sheet/List.

   Spec: NoteLink — Shared Note Tool (V1)
   Spec version: 2026-01-23-NOTE-V1
*/

/* Keep textareas sane (create + admin) */
.section-card textarea {
  resize: vertical;
}

/* Preview wrapper parity */
.previewWrap img {
  border-radius: var(--radius);
  max-width: 100%;
  display: block;
}

.previewWrap {
  border: 1px solid var(--ring);
  border-radius: 12px;
  overflow: hidden;
  background: var(--card);
}

/* Admin danger copy (reused pattern) */
.admin-danger {
  margin-top: 6px;
  font-size: 0.85rem;
  color: #b91c1c;
}

/* Simple two-col helper that works even if /assets/ui.css doesn't define .grid */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 720px) {
  .grid { grid-template-columns: 1fr 1fr; }
}

/* Tighten gaps to match other creator/admin pages (safe, minimal) */
form > * + * {
  margin-top: 8px;
}

main > .page-header {
  padding-bottom: 4px !important;
  margin-bottom: 4px !important;
}

main > .section-card {
  margin-top: 6px !important;
  padding-top: 10px !important;
}

.section-card > h2:first-child {
  margin-top: 2px !important;
}

/* Creator live preview hero styling (same as List pattern; safe if unused elsewhere) */
.preview-hero { position: relative; }
.previewWrap-hero { margin-top: 8px; margin-bottom: 6px; }

#draftPreview {
  border-radius: var(--radius-lg);
  background: var(--card-soft);
  border: 1px solid var(--ring);
  padding: 0;
  display: block;
  overflow: hidden;
}

#draftPreviewImg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

.draft-placeholder-inner {
  text-align: center;
  padding: 16px;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Mobile tightening */
@media (max-width: 768px) {
  main > .page-header {
    padding-bottom: 2px !important;
    margin-bottom: 2px !important;
  }

  main > .section-card {
    margin-top: 4px !important;
    padding-top: 8px !important;
  }

  .section-card > h2:first-child {
    margin-top: 0 !important;
  }
}