/* The note editor and the sticky's state shapes (docs/design/EDITABLE_NOTES_LLD.md 6 and 8). */

/* ---------- the sticky: a shape for each state ---------- */
/* Shortened by the film: the lower corner is folded -- a page not read to the end. */
.review-note .sticky::after { content: ""; display: none; position: absolute; inset-block-end: 0; inset-inline-end: 0; width: 16px; height: 16px;
  background: linear-gradient(to top left, #b89a3e 50%, #f2dd7e 50%); }
.review-note.shortened .sticky::after { display: block; }
html[dir="rtl"] .review-note .sticky::after { background: linear-gradient(to top right, #b89a3e 50%, #f2dd7e 50%); }
/* Emptied by him: the album's words stay, struck through and dimmed. */
.review-note.emptied .sticky-preview { text-decoration: line-through; opacity: .6; }
/* Written by him: a pencil badge in the corner opposite the tick; with three bars when only the lines changed. A tap on it is a tap on the
   face, which opens the editor. */
.review-note .note-edit-badge { position: absolute; top: 2px; inset-inline-start: 6px; z-index: 1; width: 20px; height: 20px; border-radius: 50%;
  background: var(--gold); border: 1px solid var(--gold); color: #1a1206; }
.review-note .note-edit-badge[hidden] { display: none; }
.review-note .note-edit-badge::before { content: ""; position: absolute; top: 4px; inset-inline-start: 9px; width: 2px; height: 9px; border-radius: 1px; background: currentColor;
  transform: rotate(40deg); }
.review-note .note-edit-badge::after { content: ""; position: absolute; top: 12px; inset-inline-start: 4px; width: 0; height: 0; border-style: solid; border-width: 3px 0 0 3px;
  border-color: transparent transparent transparent currentColor; transform: rotate(0deg); }
.review-note .note-edit-badge[data-kind="lines"]::before { top: 5px; inset-inline-start: 5px; width: 10px; height: 2px; border-radius: 1px; transform: none; box-shadow: 0 4px 0 currentColor, 0 8px 0 currentColor; }
.review-note .note-edit-badge[data-kind="lines"]::after { display: none; }
html.note-editor-open { overflow: hidden; }

/* ---------- the sheet ---------- */
.note-editor-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(20, 16, 10, .5); }
.note-editor { position: fixed; z-index: 61; inset-inline: 0; inset-block-end: 0; display: flex; flex-direction: column; gap: 8px; height: calc(100svh - 12px); max-height: calc(100svh - 12px);
  padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: var(--surface); color: var(--ink); box-shadow: 0 -10px 30px rgba(0, 0, 0, .3); }
.note-editor[hidden] { display: none; }
.ne-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ne-title { margin: 0; min-width: 0; font-size: 1.1rem; overflow-wrap: anywhere; }
.ne-x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
/* Left and right are the owner's words and hold in a right-to-left page too, so the grid is laid out left to right and each pane reads in the page's own direction. */
.ne-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 8px; direction: ltr; align-content: start;
  grid-template-columns: minmax(0, 1fr); grid-template-areas: "before" "edit" "after" "orig"; }
html[dir="rtl"] .ne-body > * { direction: rtl; }
.ne-slot-before { grid-area: before; }
.ne-edit { grid-area: edit; }
.ne-slot-after { grid-area: after; }
.ne-original { grid-area: orig; }
.ne-pane { min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.ne-pane h4 { margin: 0; min-width: 0; font-size: .9rem; color: var(--ink-dim); overflow-wrap: anywhere; }
.ne-pane-head { display: flex; align-items: center; gap: 8px; }
.ne-thumb { flex: none; width: 48px; height: 48px; border-radius: 6px; object-fit: cover; }
.ne-thumb[hidden] { display: none; }
.ne-field { box-sizing: border-box; width: 100%; min-height: 4.2em; resize: none; padding: 8px 10px; border: 1.5px solid var(--line-strong); border-radius: 10px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: 1rem; line-height: 1.4; }
.ne-original-text { max-height: 35vh; overflow-y: auto; white-space: pre-wrap; overflow-wrap: break-word; font-size: .95rem; line-height: 1.4; color: var(--ink); }

/* The preview: the customer's photograph with the note drawn on it as the film draws it (the server's label-preview), in the film's shape;
   until it is there, or where the film draws no label here, the server's rows over a dark strip. A shortened one has its corner folded
   like the sticky's. */
.ne-strip { position: relative; padding: 10px 12px; border-radius: 10px; background: #14110d; color: #fff; }
.ne-strip[hidden] { display: none; }
.ne-frame { display: none; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 6px; object-fit: cover; background: #14110d; }
.ne-strip.has-frame { padding: 0; overflow: hidden; }
.ne-strip.has-frame .ne-frame { display: block; }
.ne-strip.has-frame .ne-rows { display: none; }
.ne-strip[data-shape="portrait"] .ne-frame { aspect-ratio: 9 / 16; width: auto; max-width: 100%; max-height: 42svh; margin-inline: auto; }
.ne-rows { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ne-row { max-width: 100%; font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1rem; line-height: 1.35; text-align: center; overflow-wrap: normal; }
.ne-strip.is-shortened::after { content: ""; position: absolute; inset-block-end: 0; inset-inline-end: 0; width: 16px; height: 16px; border-end-end-radius: 10px;
  background: linear-gradient(to top left, #b89a3e 50%, #14110d 50%); }
html[dir="rtl"] .ne-strip.is-shortened::after { background: linear-gradient(to top right, #b89a3e 50%, #14110d 50%); }
.ne-fit, .ne-more { margin: 0; font-size: .85rem; color: var(--ink-dim); }
.ne-fit.is-busy { opacity: .55; }
.ne-more[hidden] { display: none; }

/* The lines stepper: Auto and 1..6, each pill with that many short bars under it; the chosen one filled; one without room dashed and hollow.
   Seven equal columns on one row at any width (a phone's 360 px included): the label above, the pills a finger tall. */
.ne-steps { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: stretch; gap: 4px; }
.ne-steps-label { grid-column: 1 / -1; font-size: .85rem; color: var(--ink-dim); }
.ne-step { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; min-height: 44px; padding: 4px 2px; border: 1.5px solid var(--line-strong);
  border-radius: 10px; background: transparent; color: var(--ink); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; overflow: hidden; }
.ne-step-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ne-bars { display: flex; flex-direction: column; gap: 2px; width: 14px; }
.ne-bars i { display: block; height: 2px; border-radius: 1px; background: currentColor; opacity: .75; }
.ne-step[aria-checked="true"] { background: var(--gold); border-color: var(--gold); color: #1a1206; }
.ne-step[data-room="no"] { border-style: dashed; background: transparent; opacity: .5; cursor: not-allowed; }

/* The peeks: the neighbouring picture whole at a small size with its place in the film ("12 / 40") and an arrow toward it, a tap away from that
   neighbour's note; an end is a flat mark over a plain strip. */
.ne-slot { min-width: 0; }
.ne-peek { position: relative; display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: 100%; min-height: 52px; padding: 4px 10px; overflow: hidden; border: 0; border-radius: 10px;
  background: var(--surface-2); color: var(--ink-dim); font: inherit; font-size: .85rem; text-align: start; }
button.ne-peek { cursor: pointer; min-height: 52px; color: var(--ink); }
.ne-peek-img { flex: none; display: block; width: 56px; height: 44px; border-radius: 6px; object-fit: contain; background: #14110d; }
.ne-peek.is-off .ne-peek-img { opacity: .55; }
.ne-peek-pos { flex: 1 1 auto; min-width: 0; font-variant-numeric: tabular-nums; font-weight: 600; direction: ltr; unicode-bidi: isolate; text-align: start; }
.ne-peek-arrow { flex: none; }
.ne-peek.is-end .ne-end-mark { position: absolute; inset-block-end: 6px; inset-inline-start: 50%; transform: translateX(calc(-50% * var(--flow))); color: var(--line-strong); }
.ne-peek.is-end.ne-peek-after .ne-end-mark { inset-block-end: auto; inset-block-start: 6px; }
.ne-peek.is-end { opacity: .8; }

.ne-foot { flex: none; display: flex; align-items: stretch; gap: 8px; }
.ne-reset { flex: 0 1 auto; min-width: 0; text-align: center; line-height: 1.2; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 52px; padding: 0 14px; border: 1.5px solid var(--line-strong);
  border-radius: var(--r-pill); background: transparent; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.ne-reset:disabled { opacity: .4; cursor: default; }
.ne-done { flex: 1 1 auto; min-width: 0; min-height: 52px; border: 0; border-radius: var(--r-pill); background: var(--gold); color: #14100a; font: inherit; font-weight: 700; cursor: pointer; }

/* A phone on its side (about 640 x 360): the sheet is too short for the panes one above the other, so they stand side by side as on a
   computer, the peeks above and below the editable pane, and the body scrolls inside the sheet. */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 480px) {
  .ne-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "before ." "edit orig" "after ."; }
  .ne-original { align-self: start; }
  .ne-original-text { max-height: 45vh; }
}

/* A computer screen: editable on the left, the original on the right, side by side; the peeks frame the editable pane. */
@media (min-width: 700px) {
  .note-editor { inset-inline: 0; margin-inline: auto; width: min(880px, calc(100vw - 32px)); height: auto; max-height: calc(100svh - 48px); inset-block-end: 24px; border-radius: 22px; }
  .ne-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "before ." "edit orig" "after ."; }
  .ne-original { align-self: start; }
}