/* the note window (notewin.js): the record's right column in three sizes, with an edge to drag
   Side  a third of the record area (320–540 px), never more than 40%: always clearly narrower than Half
   Half  50/50, the note's form spread across its half (labels beside the fields once there's room)
   Full  the note alone */
.pbody.nw-on{position:relative;--nw-sw:min(var(--nw-w,clamp(320px,34%,540px)),40%,calc(100% - 380px))}
.pbody.nw-side{grid-template-columns:minmax(0,1fr) var(--nw-sw)}
.pbody.nw-half{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.pbody.nw-full{grid-template-columns:minmax(0,1fr)}
.pbody.nw-full>.pleft{display:none}
.pbody.nw-on>.pright{container:nwcol/inline-size;gap:12px}
.pbody.nw-on .rtabs{position:static}
/* the record's own tabs (History, Treatment plan, …) wrap rather than run under the note */
.pbody.nw-on>.pleft .recbar .tabs{flex-wrap:wrap}.pbody.nw-on>.pleft .recbar .tabs button{white-space:nowrap}
.pbody.nw-full>.pright{border-inline-start:0}
.pbody.nw-full .nw-win,.pbody.nw-full>.pright>.rtabs{width:100%;max-width:1240px;margin-inline:auto}
.nw-grip{position:absolute;top:0;bottom:0;width:14px;inset-inline-end:calc(var(--nw-sw) - 7px);z-index:6;cursor:col-resize;display:grid;place-items:center;touch-action:none;outline:none}
.pbody.nw-half>.nw-grip{inset-inline-end:calc(50% - 7px)}
.nw-grip i{width:4px;height:44px;border-radius:4px;background:#c7c7cc;opacity:.55;transition:opacity .15s,background .15s,height .15s}
.nw-grip:hover i,.nw-grip:focus-visible i,.nw-dragging .nw-grip i{opacity:1;background:var(--c1);height:64px}
.pbody.nw-dragging{cursor:col-resize;user-select:none;-webkit-user-select:none}
.pbody.nw-dragging>*{pointer-events:none}.pbody.nw-dragging>.nw-grip{pointer-events:auto}

/* the window's head: what note, its size, close */
.nw-win.notesheet.docked{gap:10px}
.nw-head{display:flex;align-items:center;justify-content:space-between;gap:8px 10px;flex-wrap:wrap}
.nw-ttl{display:flex;flex-direction:column;gap:1px;min-width:0}
.nw-ttl b{font-size:var(--fs-15);font-weight:600;color:var(--ink)}
.nw-ttl .sub3{padding:0}
.nw-ctl{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-inline-start:auto}
.nw-sizes{flex:none}.nw-sizes button{white-space:nowrap;padding:5px 12px;min-height:30px}
.nw-peek{white-space:nowrap}
.nw-x{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--ink2);background:transparent}
.nw-x:hover{background:#f0f1f3}
.nw-x svg{width:15px;height:15px}

/* the head and the tooth line stay in view while the note scrolls under them */
.nw-top{position:sticky;top:-18px;z-index:4;display:flex;flex-direction:column;gap:8px;margin:-6px -18px 0;padding:10px 18px 10px;background:#fcfcfd;border-bottom:1px solid var(--sep2)}
/* tooth first: the tapped tooth's last notes */
.nw-hint{font-size:var(--fs-12);color:var(--ink3);margin-top:-4px}
.nw-tooth{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:10px;background:#f3f7fd;border:1px solid #dfe8f5;font-size:var(--fs-12_5);line-height:1.45;color:var(--ink)}
.nw-tn{white-space:nowrap;color:var(--c1t,#0a5bd3);font-weight:600}
.nw-tl{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.nw-te{overflow-wrap:anywhere}.nw-te>b{font-weight:600}.nw-te small{color:var(--ink3)}
.nw-tx{flex:none;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;color:var(--ink3);background:transparent}
.nw-tx:hover{background:#e6edf7}.nw-tx svg{width:12px;height:12px}

/* the form fills the window's width in every size (it shrank to its widest field, so Half looked like Side) */
.nw-win.notesheet.docked .nf-wrap{align-items:stretch}
/* a wide window lays the form out as the full sheet did: labels beside the fields, then the form beside what it writes */
@container nwcol (min-width:470px){
  .nw-win.notesheet.docked .nf-row{grid-template-columns:120px minmax(0,1fr);gap:4px 10px}
  .nw-win.notesheet.docked .nf-row:not(:has(.nf-lbl)){grid-template-columns:minmax(0,1fr)}
  .nw-win.notesheet.docked .nfoot{flex-direction:row;align-items:center}
}
@container nwcol (min-width:760px){
  .nw-win.notesheet.docked .nf-wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px;align-items:start}
  .nw-win.notesheet.docked .nf-out{position:sticky;top:0;max-height:calc(100vh - 210px)}
  .nw-win .nf-jump{display:none}
}

/* a narrow screen (an iPad upright): the record and the note share it top and bottom */
@media (max-width:960px){
  .pbody.nw-on{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr);padding:0;gap:0;overflow:hidden}
  .pbody.nw-on>.pleft{display:flex;flex-direction:column;overflow:auto;padding:12px 16px 24px;gap:14px}
  .pbody.nw-on>.pright{overflow:auto;border:0;border-top:1px solid var(--sep);border-radius:0;padding:12px 16px 24px;box-shadow:0 -6px 18px rgba(0,0,0,.06)}
  .nw-top{top:-12px;margin:-6px -16px 0;padding:10px 16px 10px}
  .pbody.nw-full{grid-template-rows:minmax(0,1fr)}
  .pbody.nw-full>.pright{border-top:0;box-shadow:none}
  .nw-win.notesheet.docked .notearea{min-height:calc(50vh - 200px)}
  .pbody.nw-full .nw-win.notesheet.docked .notearea{min-height:calc(100vh - 330px)}
}
/* an addendum is a few lines under the original: its box leaves "Sign addendum" in view at 1366×800 (TODO-from-manual #12) */
.notesheet .notearea.nadd,.notesheet.docked .notearea.nadd,.nw-win.notesheet.docked .notearea.nadd,.pbody.nw-full .nw-win.notesheet.docked .notearea.nadd{min-height:150px;max-height:calc(100vh - 420px)}