/* Apple original: Forms/CurrentForm/CurrentFormView.swift and CurrentRow/ - a form covering the
   whole window. The header copies the spreadsheet reports' (ReportListView.css): the same buttons,
   margins and title line, with the vessel's name above the title. The rows are Apple's, given the
   same extra room as the title (--formRowInset). */
.CurrentFormView { --reportInset: 26px; --formRowInset: 19.5px; }
.CurrentFormView {
  position: absolute; inset: 0; z-index: 70;
  display: flex; flex-direction: column;
}
/* The header, buttons included, sits on the page (--pageSide, ContentView.css) */
.CurrentFormView-header { flex: none; position: relative; padding-bottom: 20px; margin: 0 calc(var(--pageSide) + 6.5px + var(--reportInset)); border-bottom: 0.65px solid rgb(235, 235, 235); }
.CurrentFormView-buttons { height: 79.2px; position: relative; margin: 0 calc(-1 * var(--reportInset)); }
.CurrentFormView-back, .CurrentFormView-group {
  position: absolute; top: var(--toolbarItemTop); height: 44.8px;
  border-radius: 22.4px; background: rgba(252, 252, 252, 0.95);
  box-shadow: 0 0 0 0.65px rgba(0, 0, 0, 0.07), 0 1px 5px rgba(0, 0, 0, 0.06);
  color: var(--titanium);
}
.CurrentFormView-back { left: calc(var(--reportInset) - 3.9px); width: 44.8px; display: grid; place-items: center; }
.CurrentFormView-group { right: calc(var(--reportInset) - 5.4px); display: flex; align-items: center; gap: 15.6px; padding: 0 10px; min-width: 44.8px; justify-content: center; }
.CurrentFormView-icon { display: grid; place-items: center; height: 44.8px; color: var(--titanium); }
.CurrentFormView-back .Icon, .CurrentFormView-icon .Icon { width: 26px; height: 26px; stroke-width: 1.2; }
/* HeaderTextIcon: "JSON" in the symbols' titanium */
.CurrentFormView-icon.text { font-size: 17px; font-weight: var(--lightWeight); letter-spacing: 0.3px; padding: 0 4px; }
/* The vessel: caption (12), upper case, titanium; 3 above the title. Placed so the title sits on
   the reports' title line (12 closer to the buttons since 2026-10-16). */
.CurrentFormView-vessel { padding: 6.2px 20px 0 13px; min-height: 22.2px; font-size: 12px; line-height: 16px; letter-spacing: 0.3px; color: var(--titanium); }
/* formTitleTextStyle: 17 semibold textCharcoal */
.CurrentFormView-title { padding: 3px 20px 0 13px; font-size: 17px; font-weight: 600; line-height: 22px; color: var(--textCharcoal); white-space: pre-wrap; }

/* The rows scroll on the page (ContentView.css), which ends with its own gap and corners */
.CurrentFormView-rows { flex: 1; min-height: 0; overflow-y: auto; }
.CurrentFormView-page { padding-bottom: 60px; }

/* CurrentRowView: 30 in from each side (plus the web's room), 26 above, 18 below; who edited it
   and when; a fine line under every row. See-through, so a signature can run over its neighbours. */
.CurrentRowView { position: relative; border-bottom: 0.65px solid rgba(0, 0, 0, 0.09); cursor: pointer; }
.CurrentRowView.static { cursor: default; }
/* Apple: 26 above, 18 below. The web draws them 6 closer each way (Barney 2026-10-16: with a
   mouse's accuracy the rows can sit closer, "a more cohesive looking list") */
.CurrentRowView-content { padding: 20px calc(30px + var(--formRowInset)) 12px; }
.Row-edited { padding: 0 calc(30px + var(--formRowInset)) 4px; text-align: right; font-size: 10px; font-weight: 300; line-height: 13px; color: var(--titanium); }

/* firstLineMarker: the 5 pt circle in a 30 wide frame, centred on the title's first line; the
   pen tick (30 x 14) over it once answered */
.Row-line { display: flex; align-items: flex-start; gap: 8px; }
.Row-marker { position: relative; flex: none; width: 30px; height: 20px; display: grid; place-items: center; }
.Row-marker i { width: 5px; height: 5px; border-radius: 50%; border: 0.85px solid var(--textCharcoal); }
.Row-marker img { position: absolute; left: 0; top: 3px; width: 30px; height: 14px; object-fit: contain; }
.Row-body { flex: 1; min-width: 0; }
/* listRowTitleStyle: 16 light */
.Row-title { font-size: 16px; font-weight: var(--lightWeight); line-height: 20px; letter-spacing: 0.3px; color: var(--textCharcoal); white-space: pre-wrap; }
.Row-required { color: rgb(255, 59, 48); }
/* rowDescriptionText: 16 light titanium */
.Row-description { font-size: 16px; font-weight: var(--lightWeight); line-height: 20px; letter-spacing: 0.3px; color: var(--titanium); white-space: pre-wrap; }
/* rowData_TextStyle: the pen - Architects Daughter 19, kerning 1.2 */
/* Apple pads 2 above, but its pen font sits lower in its line than in browsers: measured on the
   Mac, the answer's letters are 13 further below the title than with 2 (2026-10-16) */
.Row-answer { padding-top: 15px; font-family: "ArchitectsDaughter", var(--ui); font-size: 19px; line-height: 26px; letter-spacing: 1.2px; color: var(--pen); white-space: pre-wrap; overflow-wrap: anywhere; }
.Row-answer.ref { padding-top: 21px; }   /* Apple 8, plus the same 13 */

/* rowHeadingStyle: 16 semibold, tracking 1.1, highlight colour; rowInfoStyle: 16 medium titanium */
.Row-heading { padding-top: 10px; font-size: 16.8px; font-weight: var(--semiboldWeight); line-height: 20px; letter-spacing: 1.4px; color: var(--highlight); }
.Row-info { font-size: 16.8px; font-weight: 550; line-height: 20px; letter-spacing: 1.2px; color: var(--titanium); }
.Row-description.heading { padding-top: 5px; }
.Row-description.info { padding-top: 3px; }
/* sectionTitleTextStyle: a filled row's answer as a heading, 16 semibold titanium */
.Row-sectionTitle { font-size: 16px; font-weight: var(--semiboldWeight); line-height: 20px; color: var(--titanium); }

/* A signature: laid over a one-line space at its own size, CENTRED on it (Sign_RowView's
   .overlay(alignment: .leading)), so it runs up over its title and down over the next row, like ink
   on a paper form. It hung from the top of the space before, sitting low (Barney 2026-10-17).
   Measured on the Mac: 8 below the title (the VStack's spacing), 32 high, so the row is as tall
   as the Mac's (less the web's 6 + 6) and the ink's centre 33 below the title's centre (web 34). */
.Row-signature { position: relative; margin-top: 8px; height: 32px; overflow: visible; }
.Row-signature img { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 2; pointer-events: none; visibility: hidden; }
.Row-signature img.shown { visibility: visible; }

/* A photo: its title (unless empty or ">>"), then the picture full width, rounded */
.Row-pictureTitle { padding-bottom: 10px; }
.Row-picture { display: block; width: 100%; height: auto; border-radius: 8px; }
.Row-picture.missing { display: none; }
/* A PDF's pages: full width, rounded as a photo (the app: 8), a fine edge so a white page shows */
.Row-pdf { display: flex; flex-direction: column; gap: 10px; }
/* Under a PDF of several pages: ‹ Page 2 of 8 › - the arrows as the calendar's, the words small and grey */
.Row-pdfBar { display: flex; align-items: center; justify-content: center; gap: 14px; cursor: default; }
.Row-pdfBar span { min-width: 90px; text-align: center; font-size: 13px; color: var(--titanium); }
.Row-pdfTurn { width: 36px; height: 30px; display: grid; place-items: center; color: rgb(119, 119, 119); }
.Row-pdfTurn .Icon { width: 18px; height: 18px; stroke-width: 1.8; }
.Row-pdfTurn:disabled { opacity: 0.3; cursor: default; }
.Row-pdfPage { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 0 0 0.65px rgba(0, 0, 0, 0.12); }
.Row-document { display: inline-block; padding: 6px 0; font-size: 16px; color: var(--titanium); text-decoration: underline; }

/* Edited (FormHeaderView): Back goes - the menu is the way out - and the ≡ turns red and heavier */
.CurrentFormView-back[hidden] { display: none; }
.CurrentFormView-icon.edited { color: rgb(255, 59, 48); }
.CurrentFormView-icon.edited .Icon { stroke-width: 2; }

/* A photo or file full screen (DisplayViews): on the form's page; the title (rowTitleTextStyle, 17 semibold)
   under the buttons - clickable while the form can be changed, "Add a Title" in titanium when there is none */
.DisplayView { z-index: 75; }
.DisplayView .CurrentFormView-header { border-bottom: 0; padding-bottom: 12px; }
.DisplayView-title { padding: 6px 20px 0 13px; min-height: 28px; font-size: 17px; font-weight: 600; line-height: 22px; color: var(--textCharcoal); }
.DisplayView-title.empty { color: var(--titanium); }
.DisplayView-title.editable { cursor: text; }
.DisplayView-content { padding: 0 calc(6.5px + var(--reportInset)) 40px; display: flex; flex-direction: column; gap: 10px; }
.DisplayView-picture { display: block; width: 100%; height: auto; border-radius: 8px; cursor: zoom-in; }
.DisplayView-picture.actual { width: auto; max-width: none; cursor: zoom-out; }
.DisplayView-content:has(.actual) { overflow-x: auto; }
.DisplayView-page { display: block; width: 100%; height: auto; box-shadow: 0 0 0 0.65px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08); }