/* Apple original: ContentView.swift (NavigationSplitView), Sidebar/SidebarView.swift,
   Detail/DetailView.swift, Forms/ListView.swift, Forms/ListRowView.swift and their styles in
   Ext-Mod-Cons/Modifiers.swift.

   Measured from the YachtForms Catalyst app on M.Y. Ismo (2026-10-16), in iPad points
   (Mac points / 0.77), from the top-left of the window. The Mac draws its toolbar in the
   window's title bar; the web app keeps that band, so everything below sits where it does on
   the Mac. Barney: the darker shading at the top of the Mac sidebar is NOT copied; the two
   headings (vessel name and list title) share one baseline, 133.4 from the top. */

:root {
  /* Apple's .light draws heavier on a Mac than Roboto 300: these weights match the Mac's ink
     (measured 2026-10-16) */
  --lightWeight: 370;
  --semiboldWeight: 650;
  /* systemBackground blended 10% towards titanium (Modifiers.swift sidebarWash) */
  --sidebarWash: rgb(245.5, 245.5, 244.5);
  /* Web only (Barney 2026-10-17): on a wide window a form or report is a centred page, like a sheet
     of A4, on the sidebar's grey - the width of an iPad held upright (820) plus 15% (Barney). --pageSide
     is the grey on each side (0 on a narrower window); the % is the screen's width. */
  --pageWidth: 944px;
  --pageSide: max(0px, (100% - var(--pageWidth)) / 2);
  --pageTop: 0px;
  --pageRadius: 0px;
  --toolbarHeight: 101.9px;
  /* Barney 2026-10-16: the Mac's toolbar sits low to clear the window title bar, which a web page
     does not have - so it is 20 Mac pt higher here, leaving more room above the headings. */
  --toolbarItemTop: 14.3px;
  /* Barney 2026-10-16: more left margin in the sidebar than the Mac's - the web has room. Moves
     everything in the sidebar right by this much, and widens the sidebar to match. */
  --sidebarInset: 10px;
  /* Wide enough that the sidebar button's circle ends as far from the right edge as the info
     circle starts from the left (Barney 2026-10-16) */
  --sidebarMaxWidth: calc(347.4px + var(--sidebarInset) + 17.5px);
  /* Web only (Barney 2026-10-17): the sidebar can be dragged narrower, for a browser on one side of
     a split screen, down to where every toolbar button still shows - the button group as close to
     the info button as the sidebar button is to the group (12.4) - and back out to the full width.
     = the info button's right edge (5.5 + inset + 44.8) + 12.4 + the group (159.7) + its right margin (83.8) */
  --sidebarMinWidth: calc(306.2px + var(--sidebarInset));
  --sidebarWidth: var(--sidebarMaxWidth);
  /* ...and it narrows by itself, down to the same minimum, when the window leaves the list side
     less than --detailMinWidth (Barney 2026-10-17). --sidebarShown (.ContentView) is the width drawn.
     734 = it starts narrowing below an 854-wide window (Barney's Safari window, 854 / 0.77 - 374.9)
     and reaches its narrowest at about 809. */
  --detailMinWidth: 734px;
  /* Barney 2026-10-16: the same for the list side - more room on a desktop. Moves the title,
     description and list in from the left, and the list's lines in from the right. */
  --detailInset: 8px;
}

.ContentView {
  /* Set here, not in :root, so it follows the width dragged (set on this element); the % is the
     window's width */
  --sidebarShown: min(var(--sidebarWidth), max(var(--sidebarMinWidth), 100% - var(--detailMinWidth)));
  position: relative;
  display: grid;
  grid-template-columns: var(--sidebarShown) 1fr;
  height: 100%;
  min-width: 700px;
}
.ContentView.sidebarHidden { grid-template-columns: 0 1fr; }
.ContentView.sidebarHidden .SidebarColumn { visibility: hidden; }

/* ── Sidebar column ───────────────────────────────────── */
.SidebarColumn {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 0;
  background: var(--sidebarWash);
  box-shadow: inset -0.65px 0 0 rgba(0, 0, 0, 0.04);
  overflow: hidden;
}
.Toolbar { position: relative; height: var(--toolbarHeight); flex: none; }

/* Toolbar items. Barney 2026-10-16: the same light format as the report screens' buttons - thin
   titanium symbols on barely-there round glass - rather than the Mac's darker, heavier toolbar */
.ToolbarButton {
  position: absolute; top: var(--toolbarItemTop); height: 44.8px;
  display: grid; place-items: center;
  color: var(--titanium);
}
.ToolbarButton .Icon { width: 26px; height: 26px; stroke-width: 1.2; }
.ToolbarButton.info { left: calc(5.5px + var(--sidebarInset)); width: 44.8px; }
/* The trailing group: one rounded capsule */
.ToolbarGroup {
  /* Kept a fixed distance from the right edge (as the sidebar button), so it slides towards the
     info button when the sidebar is dragged narrower; at full width it sits where it did, 121.4 in */
  position: absolute; top: var(--toolbarItemTop); right: 83.8px; width: 159.7px; height: 44.8px;
  display: flex; align-items: center; justify-content: space-around; padding: 0 6px;
  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);
}
.ToolbarGroup .ToolbarButton { position: static; width: 44.8px; }
.ToolbarButton.sidebarToggle {
  right: 26.6px; width: 44.8px;   /* full width: 293.5 in from the left */
  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);
}
.ContentView.sidebarHidden .ToolbarButton.sidebarToggle.detail { display: grid; }
.ToolbarButton.sidebarToggle.detail { display: none; left: 16px; right: auto; }

/* The divider can be dragged (see --sidebarMinWidth); a double-click puts it back to full width */
.SidebarResizer { position: absolute; top: 0; bottom: 0; left: calc(var(--sidebarShown) - 5px); width: 10px; z-index: 5; cursor: col-resize; touch-action: none; }
.ContentView.sidebarHidden .SidebarResizer { display: none; }
.ContentView.resizing { cursor: col-resize; user-select: none; -webkit-user-select: none; }

/* ── SidebarView ──────────────────────────────────────── */
.SidebarView { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* Fixed: the vessel and the user's name. The sections scroll under it (Barney 2026-10-16). */
.SidebarView-header { flex: none; padding-bottom: 6px; }
.SidebarView-list { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 20px; scrollbar-width: none; margin-top: -6px; }
.SidebarView-list::-webkit-scrollbar { display: none; }
/* Vessel name: Gothic A1 SemiBold 26, tracking 1.5, highlight colour. Baseline 133.4. */
.SidebarView-vessel {
  padding: 0 16px 0 calc(16px + var(--sidebarInset)); margin-top: 6.1px;
  font-family: "GothicA1", var(--ui); font-weight: 600; font-size: 26px; line-height: 34px;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--highlight);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The user's name: Herbert 26, titanium */
.SidebarView-user {
  display: block; padding: 0 16px 0 calc(16px + var(--sidebarInset)); margin-top: 0;
  font-family: "Herbert", var(--ui); font-size: 26px; line-height: 34px; color: var(--titanium);
  text-align: left;
}
/* Section heading: 16 semibold, tracking 1.1, titanium, upper case. Its block runs from the
   row above to the next row: 79.2 high, letters 44.2 down. */
.SidebarView-section {
  height: 79.2px; padding: 40.1px 16px 0 calc(16.9px + var(--sidebarInset));
  font-size: 16.8px; font-weight: var(--semiboldWeight); line-height: 20px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--titanium);
}
.SidebarView-section.first { margin-top: 3.3px; }
/* Rows: 57.1 apart; icon in a 45 x 30 frame, 18 light textCharcoal; the selected row a rounded
   transtitanium band, 8 in from each side, radius 18 */
.SidebarView-row {
  position: relative; display: flex; align-items: center;
  width: 100%; height: 57.1px; padding: 0 16px 0 calc(15.8px + var(--sidebarInset));
  font-size: 18px; font-weight: var(--lightWeight); letter-spacing: 0.2px; color: var(--textCharcoal); text-align: left;
}
.SidebarView-row::before {
  content: ""; position: absolute; inset: 0 8px; border-radius: 18px; background: transparent; z-index: 0;
}
.SidebarView-row.selected::before { background: var(--transtitanium); }
.SidebarView-row > * { position: relative; z-index: 1; }
.SidebarView-row .Icon { width: 22px; height: 22px; margin: 0 20.2px 0 11.5px; flex: none; }
.SidebarView-row span { padding-top: 1px; }

/* ── Detail column ────────────────────────────────────── */
.DetailColumn { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.DetailColumn .Toolbar { flex: none; }
/* .searchable: a capsule field at the right of the toolbar */
.SearchField {
  /* As far from the right edge as the sidebar's heading (the vessel name) is from the left
     (Barney 2026-10-17; the Mac: 9.1) */
  position: absolute; top: var(--toolbarItemTop); right: calc(16px + var(--sidebarInset)); width: 240.9px; height: 44.8px;
  display: flex; align-items: center; gap: 8px; padding: 0 16px 0 18px;
  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: rgb(135, 135, 135);
}
.SearchField .Icon { width: 24px; height: 24px; color: var(--titanium); stroke-width: 1.2; flex: none; }
.SearchField input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font-size: 19px; color: var(--label);
}
.SearchField input::placeholder { color: rgb(135, 135, 135); opacity: 1; }
.SearchField input::-webkit-search-cancel-button { display: none; }

.DetailView { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* Fixed: the title and the list's description. The list scrolls under it (Barney 2026-10-16). */
.ListView-header { flex: none; }
.ListView-list { flex: 1; min-height: 0; overflow-y: auto; }
/* While scrolled, the list fades into the fixed part above it, as Apple's scroll edge does */
.SidebarView-list.scrolled, .ListView-list.scrolled {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px);
          mask-image: linear-gradient(to bottom, transparent 0, #000 18px);
}
/* Large title ": activity": Gothic A1 SemiBold 26, highlight colour; baseline 133.4 */
.ListView-title {
  padding: 0 20px 0 calc(20.5px + var(--detailInset)); margin-top: 6.1px;
  font-family: "GothicA1", var(--ui); font-weight: 600; font-size: 26px; line-height: 34px;
  color: var(--highlight); white-space: nowrap;
}
/* ScopeView: 14 light italic titanium. Roboto runs narrower than Apple's font at small sizes, so
   the letter-spacing here and on the rows brings each line to the Mac's width (measured). */
.ListView-scope {
  /* As the Mac's list subtitle row: at least 37.3 high with a short description centred in it;
     a longer one (Scheduled Forms, Open) starts at its top and pushes the list down */
  display: flex; flex-direction: column; justify-content: center;
  min-height: 37.3px; padding: 0 calc(46.4px + var(--detailInset)) 0 calc(30px + var(--detailInset)); margin-top: 13.85px;
  font-size: 14px; font-weight: 420; font-style: italic; line-height: 16.6px; letter-spacing: 0.45px;
  color: var(--titanium); white-space: pre-line;
}
/* The date line: darker and heavier on purpose so it stands out (Barney) - 14 medium textCharcoal;
   weight and spacing set to the Mac's width */
.ListView-scopeDate { font-style: normal; font-weight: 560; letter-spacing: 0.8px; color: var(--textCharcoal); }
.ListView-list { padding: 13.35px calc(46.4px + var(--detailInset)) 40px calc(33.8px + var(--detailInset)); }
.ListView-empty { padding: 30px 0; color: var(--titanium); font-size: 16px; font-weight: 300; }

/* ListRowView: a marker (circle / filled circle for closed), the title (16 light), an expiry
   line in footnote; 64.9 apart, fine lines between */
.ListRowView {
  display: flex; align-items: flex-start; width: 100%;
  min-height: 64.9px; padding: 22.5px 0 20.8px;
  border-top: 0.65px solid rgba(0, 0, 0, 0.09);
  text-align: left; cursor: pointer;
}
.ListRowView:first-child, .ListSectionLabel + .ListRowView { border-top: 0; }
/* Sectioned lists (New Blank Forms, Certificates, Reference, Notices), measured on the Mac's
   New Blank Forms: rows 44 Mac pt apart (Activity's are 50) and 3.5 further left; a heading
   34 above its first row's letters and 44.5 below the previous section's last row. */
.ListView-list.sectioned { padding-left: calc(29.3px + var(--detailInset)); }
.ListView-list.sectioned .ListRowView { min-height: 56.5px; padding-top: 18.6px; padding-bottom: 16.1px; }
.ListView-section { padding-bottom: 0; }
/* ListSectionLabel: 16 semibold, tracking 1.1, titanium, upper case; pinned while its section
   scrolls, painting its whole row so the rows pass behind it */
.ListSectionLabel {
  /* Pinned at the very top of the scrolling list - not below the list's top padding, which left
     a strip where the rows showed through (Barney 2026-10-16) */
  position: sticky; top: -13.35px; z-index: 1;
  padding: 21.1px 0 4.7px 2px;
  background: var(--systemBackground);
  font-size: 16.8px; font-weight: var(--semiboldWeight); line-height: 20px; letter-spacing: 1.4px;
  color: var(--titanium);
}
.ListView-section:first-child .ListSectionLabel { padding-top: 20.5px; }
/* Spreadsheet Reports' menu uses ReportMenuView's own heading (padding 6 above and below):
   on the Mac its headings sit 2.5 lower under the description and 3.5 lower between sections */
.ListView-list.reportMenu .ListSectionLabel { padding-top: 25.6px; padding-bottom: 5.3px; }
.ListView-list.reportMenu .ListView-section:first-child .ListSectionLabel { padding-top: 23.7px; }
.ListView-list.reportMenu .ListRowView { min-height: 56.85px; }
/* A fine line under the list's last row, as Apple's list ends */
.ListView-list > .ListRowView:last-child,
.ListView-list > .ListView-section:last-child > .ListRowView:last-child { border-bottom: 0.65px solid rgba(0, 0, 0, 0.09); }
.ListRowView-marker { width: 11px; flex: none; display: flex; justify-content: center; padding-top: 7.9px; margin-left: 0.3px; margin-right: 17.9px; }
.ListRowView-marker i { width: 4.8px; height: 4.8px; border-radius: 50%; border: 0.85px solid var(--textCharcoal); }
.ListRowView-marker i.closed { background: var(--textCharcoal); }
.ListRowView-title { font-size: 16px; font-weight: var(--lightWeight); line-height: 20px; letter-spacing: 0.3px; color: var(--textCharcoal); white-space: pre-wrap; }
.ListRowView-expiry { font-size: 14px; letter-spacing: 0.15px; line-height: 16px; margin-top: 2px; margin-bottom: 1.8px; }
.ListRowView-expiry.good { color: var(--titanium); }
.ListRowView-expiry.due { color: var(--gold); }
.ListRowView-expiry.expired { color: rgb(255, 59, 48); }
.ListView-loader { display: flex; justify-content: center; padding-top: 60px; }

/* The hosts the sidebar and the list are drawn into take the rest of their column's height,
   so each scrolls on its own */
.SidebarView-host, .DetailView-host { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ── Crew (Users/UsersListView) - sizes from UsersListView.swift; TO MEASURE on the Mac ── */
.SearchField[hidden] { display: none; }
.ToolbarGroup.detail { left: auto; right: 9.1px; width: auto; gap: 4px; padding: 0 6px; }
.UsersListView-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.UsersListView-searchBar { padding: 10px calc(16px + var(--detailInset)) 0; }
.SearchField.inline { position: static; width: 100%; max-width: 500px; }
.UsersListView-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px; padding: 13.4px calc(16px + var(--detailInset)) 40px;
}
.UsersListView-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  max-width: 150px; min-height: 200px; justify-self: center; text-align: center;
}
.UsersListView-cell img { width: 120px; height: 120px; border-radius: 10px; }
.UsersListView-cell img.photo { object-fit: contain; margin: 16px; }
.UsersListView-cell img.avatar { object-fit: contain; }
.UsersListView-name { font-size: 13px; font-weight: 700; color: var(--textCharcoal); margin-top: 4px; }
.UsersListView-position { font-size: 13px; font-weight: var(--lightWeight); color: var(--textCharcoal); margin-top: 2px; }

/* The page (see --pageWidth): white, dropped a little from the top of the window with rounded top
   corners, so it reads as an item on the screen (Barney 2026-10-17). Only once there is grey either
   side: a narrower window is all page, as before. 727 = 944 x 0.77 (--scale). */
@media (min-width: 728px) {
  :root { --pageTop: 22px; --pageRadius: 12px; }
}
.CurrentFormView, .ReportListView, .CurrentUserView { background: var(--sidebarWash); padding-top: var(--pageTop); }
.CurrentFormView::before, .ReportListView::before, .CurrentUserView::before {
  content: ""; position: absolute; z-index: 0;
  top: var(--pageTop); bottom: 0; left: var(--pageSide); right: var(--pageSide);
  background: var(--systemBackground);
  border-radius: var(--pageRadius) var(--pageRadius) 0 0;
  box-shadow: 0 0 0 0.65px rgba(0, 0, 0, 0.05), 0 1px 6px rgba(0, 0, 0, 0.04);
}
.CurrentFormView-header, .CurrentFormView-rows, .ReportListView-header, .ReportListView-scroll,
.CurrentUserView-header, .CurrentUserView-scroll { position: relative; z-index: 1; }
/* The scrolling part: grey, holding the rest of the page. Once scrolled to the end the page stops
   short of the window's bottom by the same gap as at the top, with the same rounded corners - the
   sign the form has ended (Barney 2026-10-17). A short form or report still reaches that gap. */
.CurrentFormView-rows, .ReportListView-scroll, .CurrentUserView-scroll {
  padding: 0 var(--pageSide) var(--pageTop);
  /* Behind it, white in the page's column over the top half: pulling down past the top (the
     trackpad's bounce) shows white, not grey; the bottom half stays grey for the end gap */
  background: linear-gradient(var(--systemBackground), var(--systemBackground)) center top / calc(100% - 2 * var(--pageSide)) 50% no-repeat,
              var(--sidebarWash);
}
.CurrentFormView-page, .ReportListView .ReportListView-list, .CurrentUserView-list {
  min-height: 100%;
  background: var(--systemBackground);
  border-radius: 0 0 var(--pageRadius) var(--pageRadius);
  box-shadow: 0 0 0 0.65px rgba(0, 0, 0, 0.05), 0 1px 6px rgba(0, 0, 0, 0.04);
  clip-path: inset(0 -12px -12px -12px);    /* no shadow along its top, where it joins the header */
}

/* ADD on Issues, Tasks, Certificates, Reference and Notices (ListView): a round glass button just left of
   the search field, its symbol in its own colours (a green plus) */
.ToolbarButton.addNew {
  right: calc(16px + var(--sidebarInset) + 240.9px + 12px); width: 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: rgb(52, 199, 89);
}