/* Pin a note (decision 082): the note box and a note row, the same on the
   release file, the release page and the studio file. Tokens from the page's
   theme (frame.css and site.css name the same ones), with plain fallbacks. */

.note-box {
  position: fixed;
  z-index: 1200;
  width: min(340px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 14px;
  display: grid;
  gap: 8px;
  background: var(--surface, #fff);
  color: var(--ink, #1e1913);
  border: 1px solid var(--line, #e4dbcd);
  border-radius: var(--r-card, 10px);
  box-shadow: var(--elev-2, 0 20px 50px -24px rgba(0, 0, 0, 0.5));
  font: var(--t-body, 400 14px/1.45 "Hanken Grotesk", sans-serif);
}
.note-box.is-sheet {
  left: 16px;
  right: 16px;
  bottom: 16px;
  width: auto;
  border-radius: var(--r-sheet, 14px);
}
.note-box-title { margin: 0; font: var(--t-title, 600 15px/1.3 "Hanken Grotesk", sans-serif); }
.note-box-field {
  width: 100%;
  box-sizing: border-box;
  min-height: 88px;
  resize: vertical;
  padding: 10px;
  font: inherit;
  color: inherit;
  background: var(--bg, #fff);
  border: 1px solid var(--line, #e4dbcd);
  border-radius: var(--r-ctl, 6px);
}
.note-box-field:focus-visible { outline: none; box-shadow: var(--ring, 0 0 0 3px #b6502e); }
.note-box-meta { margin: 0; color: var(--muted, #6c6356); font-size: 12px; }
.note-box-count { font-family: "Hanken Grotesk", sans-serif; }
.note-box-err { margin: 0; color: var(--ra-err, #a63b25); font-size: 13px; }
.note-box-err:empty { display: none; }
.note-box-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.note-box-btn,
.note-row-btn,
.note-pin-btn {
  min-height: 44px;
  padding: 0 14px;
  font: var(--t-btn, 600 13px/1.2 "Hanken Grotesk", sans-serif);
  color: var(--ink, #1e1913);
  background: transparent;
  border: 1px solid var(--line, #e4dbcd);
  border-radius: var(--r-ctl, 6px);
  cursor: pointer;
}
.note-box-btn.is-primary { background: var(--accent, #b6502e); border-color: var(--accent, #b6502e); color: #fff; }
.note-box-btn:disabled { opacity: 0.6; cursor: default; }
.note-box-btn:focus-visible,
.note-row-btn:focus-visible,
.note-pin-btn:focus-visible { outline: none; box-shadow: var(--ring, 0 0 0 3px #b6502e); }

.note-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.note-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line, #e4dbcd);
  border-radius: var(--r-ctl, 6px);
}
.note-row[data-status="resolved"] { opacity: 0.7; }
.note-row-body { margin: 0; grid-column: 1; overflow-wrap: anywhere; white-space: pre-wrap; }
.note-row-meta { margin: 0; grid-column: 1; color: var(--muted, #6c6356); font-size: 12px; }
.note-row-btn { grid-column: 2; grid-row: 1 / span 3; }
@media (max-width: 420px) {
  .note-row { grid-template-columns: minmax(0, 1fr); }
  .note-row-btn { grid-column: 1; grid-row: auto; justify-self: start; }
}