/* Styles for Note to your officer (views/note.js).
   Loaded after /app/app.css on every /app/ page. Only the builder of that view edits this file, so
   parallel work never touches the same file. Use the shared classes in app.css first (see the
   class list at its top and CONTRACTS.md §10); put only this screen's own additions here, and
   start every selector with the view's root class (for example .view-note) so nothing leaks into
   other screens. Tokens (colors, fonts) come from /shared/tokens.css. */

/* The bold intro, as MessageView starts. */
.view-note .note-intro{font-weight:600;font-size:1.05rem;padding-inline:4px}

/* To: the officer, with the number large enough to read off and selectable. */
.view-note .note-to{display:grid;gap:2px;padding:10px 16px 12px}
.view-note .note-to-name{font-size:.82rem;color:var(--muted)}
.view-note .note-to-phone{font-size:1.2rem;-webkit-user-select:text;user-select:text}
.view-note .fields input:focus-visible{outline-offset:1px}

/* The note itself: at least 8 lines, in the card like the other fields. */
.view-note .note-box{padding:8px 16px}
.view-note .note-box:focus-within{background:var(--pen-wash)}
.view-note .note-box textarea{display:block;min-height:12em}
.view-note .note-box textarea:focus-visible{outline-offset:6px}
.view-note .form-section > .link{justify-self:start;padding-inline:4px}
.view-note .note-actions .row .link{padding-inline:4px}