/* ==========================================================================
   NOTES — a generous ruled leaf for free-form table notes.
   ========================================================================== */
.notes-field{width:100%}
.notes-label{display:block;margin-bottom:var(--s2);color:var(--gold-deep)}
.notes-editor{
  display:block;
  width:100%;
  min-height:clamp(16rem,42vh,28rem);
  resize:vertical;
  padding:var(--s2) var(--s4) var(--s3);
  border:1px solid var(--rule-soft);
  border-radius:var(--r-sm);
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0 calc(1.6rem - 1px),
      color-mix(in srgb,var(--rule-soft) 58%,transparent) calc(1.6rem - 1px) 1.6rem
    ),
    color-mix(in srgb,var(--panel-2) 92%,transparent);
  background-attachment:local;
  color:var(--ink);
  font:1rem/1.6rem var(--font-scribal);
  caret-color:var(--rubric);
  overflow-wrap:anywhere;
  transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease;
}
.notes-editor::placeholder{color:var(--ink-faint);font-style:italic;opacity:.75}
.notes-editor:hover{border-color:var(--rule)}
.notes-editor:focus{
  outline:2px solid var(--gold-deep);
  outline-offset:2px;
  border-color:var(--gold-deep);
  box-shadow:inset 3px 0 0 color-mix(in srgb,var(--rubric) 55%,transparent);
}
.notes-meta{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--s3);
}
.notes-meta .marginalia{margin-top:var(--s2)}
.notes-status{
  min-height:1.2em;
  margin-top:var(--s2);
  font-family:var(--font-display);
  font-size:var(--label-size);
  font-weight:var(--label-weight);
  letter-spacing:var(--label-track);
  text-transform:uppercase;
  color:var(--ink-faint);
  white-space:nowrap;
}
.notes-status[data-state="retrying"]{color:var(--rubric)}
.notes-status[data-state="saved"]{color:var(--mend)}

@media (max-width:480px){
  .notes-editor{min-height:20rem;padding-inline:var(--s3)}
  .notes-meta{align-items:flex-start;flex-direction:column;gap:0}
}