/* 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; }
/* Add crew: only its plus badge in a calm green, so it stands out without shouting (Barney 2026-10-19) */
.ToolbarButton.addCrew .Icon circle[fill="currentColor"] { fill: rgb(70, 160, 105); }
.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.
     Sized by its buttons (Barney 2026-10-24): three (fleet's ferry) measure the old 159.7 wide; crew and vessel
     admins have two, and a fixed width left them spread apart */
  position: absolute; top: var(--toolbarItemTop); right: 83.8px; width: auto; height: 44.8px;
  display: flex; align-items: center; gap: 6.65px; 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 */
/* "N files waiting to send" under the name (W3, the Mac's task 87): footnote size, titanium, only while something waits */
.SidebarView-waiting { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 0 16px 0 calc(16px + var(--sidebarInset)); font-size: 13px; color: var(--titanium); }
.SidebarView-waiting[hidden] { display: none; }
/* Task 140: an unverified fleet login - in red (Barney) */
.SidebarView-restricted { display: block; margin-top: 8px; padding: 0 16px 0 calc(16px + var(--sidebarInset)); font-size: 13px; text-align: left; color: rgb(255, 59, 48); }
.SidebarView-waiting .Icon { width: 18px; height: 18px; stroke-width: 1.3; flex: none; }
.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); }
/* Swipe to delete (Forms/ListDelete.js, snag S10): the row's content slides left over a red Delete, as iOS */
.ListRowView.swipeable { position: relative; overflow: hidden; touch-action: pan-y; }
.ListRowView.swipeable > :not(.ListRowView-delete) { transform: translateX(var(--swipe, 0px)); }
.ListRowView.animating > * { transition: transform 0.22s ease, width 0.22s ease; }
.ListRowView-delete {
  position: absolute; top: 0; right: 0; bottom: 0; width: 0; overflow: hidden; padding: 0; border: 0;
  display: flex; align-items: center; justify-content: center; white-space: nowrap; cursor: pointer;
  background: rgb(255, 59, 48); color: #fff; font: inherit; font-size: 16px; font-weight: 500;
}
.ListRowView:not(.swiped) .ListRowView-delete { visibility: hidden; }
.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; }
/* The lists' and Crew's pill: as far in from the right as the search field was - in line with the sidebar's vessel name on
   the left (Barney 2026-10-19) */
.ToolbarGroup.detail { left: auto; right: calc(16px + var(--sidebarInset)); 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-photoFrame { width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; }
.UsersListView-photoFrame.photo { margin: 16px; }
/* Rounded on the photo itself, at its own shape (Barney 2026-11-15) - as the crew member's page (UserInfo-photo) */
.UsersListView-cell img { display: block; max-width: 120px; max-height: 120px; width: auto; height: auto; border-radius: 10px; }
.UsersListView-cell img.avatar { width: 120px; height: 120px; 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);
}
/* In a list's toolbar pill (ListView): the plus in its own green; the flat-list switch and search grey, as the others */
.ToolbarGroup .ToolbarButton.add { color: rgb(52, 199, 89); }

/* ── PHONE (task 151) ─────────────────────────────────────
   Below 600 wide (ContentView.js isPhone), as the iPhone's NavigationSplitView: one column at a time -
   the sidebar first, the chosen list over it with a Back button (.showingDetail). Drawn at full size
   (--scale 1): the iPhone app's points are the same as the iPad's. No dragged divider or sidebar
   button, and no selected row left highlighted in the sidebar (the iPhone shows none). */
.ToolbarButton.back { display: none; }
@media (max-width: 600px) {
  /* Without the desktop's extra margins (Barney 2026-10-24, on the iPhone: "an invisible border around the
     view"): no added sidebar / list inset, and a toolbar band just tall enough for its buttons - the
     desktop's 101.9 clears the Mac's title bar, which a phone does not have */
  :root { --scale: 1; --sidebarInset: 0px; --detailInset: 0px; --toolbarHeight: 66px; }
  /* Only the part of the screen above the keyboard (Supporting Views/KeyboardFit.js) */
  #app { position: fixed; top: var(--visibleTop, 0px); height: var(--visibleHeight, 100dvh); }
  .ContentView, .ContentView.sidebarHidden { grid-template-columns: 100%; min-width: 0; }
  .ContentView .SidebarColumn, .ContentView .DetailColumn { grid-area: 1 / 1; visibility: visible; }
  .ContentView.showingDetail .SidebarColumn, .ContentView:not(.showingDetail) .DetailColumn { display: none; }
  .SidebarResizer, .ToolbarButton.sidebarToggle, .ContentView.sidebarHidden .ToolbarButton.sidebarToggle.detail { display: none; }
  /* White, not the desktop's grey wash: on a phone there is no list beside it to set it apart from (Barney 2026-10-24) */
  .SidebarColumn { box-shadow: none; background: var(--systemBackground); }
  .SidebarView-row.selected::before { background: transparent; }
  .ToolbarGroup { right: calc(16px + var(--sidebarInset)); }
  /* The list keeps the desktop's left margin but not its wide right one: a phone has no room to spare */
  .ListView-scope { padding-right: 20px; }
  .ListView-list { padding-right: 20px; }
  .ToolbarButton.back {
    display: grid; left: calc(5.5px + var(--sidebarInset)); 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);
  }
}

/* A phone held sideways (Barney 2026-10-24: "prevent it from rotating"): a web page cannot lock the screen
   on an iPhone, so it asks for the phone upright instead. Tablets and computers are never this short. */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  body::after {
    content: "Please turn your phone upright";
    position: fixed; inset: 0; z-index: 10000;
    display: grid; place-items: center; padding: 24px; text-align: center;
    background: var(--systemBackground); color: var(--titanium);
    font-size: 20px; font-weight: 300; letter-spacing: 0.3px;
  }
}

/* PHONE (task 151): the sheets (row input, Settings, vessel picker, crew form, guides) - 580 wide on a
   desktop - fill the phone with a small gap all round, as an iPhone's page sheet. Their grid's one column
   is held to the screen's width, or a wide calendar would stretch it past the edge. "html" puts these
   ahead of the sheets' own files, which load after this one. */
@media (max-width: 600px) {
  html .InputView, html .SettingsView, html .GroupPickerView, html .UserFormView, html .Instructions_View, html .AlertView, html .AdminPasswordPrompt {
    grid-template-columns: 100%; justify-items: center;
  }
  html .InputView-sheet, html .SettingsView-sheet, html .GroupPickerView-sheet, html .UserFormView-sheet, html .Instructions_View-sheet {
    width: calc(100% - 16px); max-width: none; height: calc(100% - 16px); max-height: none;
  }
  html .AlertView-box, html .AdminPasswordPrompt-card { max-width: calc(100% - 40px); }
  /* Forms, reports and crew pages: the same - narrow side margins, the button band as the toolbar's */
  html .CurrentFormView, html .ReportListView, html .CurrentUserView { --reportInset: 4px; --formRowInset: 0px; }
  html .CurrentFormView-buttons, html .ReportListView-buttons { height: 66px; }
  html .CurrentUserView-buttons { height: 66px; margin: 0 0 8px; }
  /* As the iPhone app (Barney 2026-10-24, side by side): the back button 16 from the edge and the title
     on the same line as it, the header's line from edge to edge; a row's symbol 16 in and its timestamp
     16 from the right */
  html .CurrentFormView-header, html .ReportListView-header { margin: 0; }
  html .CurrentFormView-buttons, html .ReportListView-buttons { margin: 0; }
  html .CurrentFormView-back, html .ReportListView-back { left: 16px; }
  html .CurrentFormView-group, html .ReportListView-group { right: 16px; }
  html .CurrentFormView-vessel, html .CurrentFormView-title, html .ReportListView-title,
  html .ReportListView-description, html .ReportListView-problems { padding-left: 16px; padding-right: 16px; }
  html .CurrentRowView-content, html .Row-edited { padding-left: 16px; padding-right: 16px; }
  /* The lists' Back and the sidebar's info button the same 16 from the edge */
  html .ToolbarButton.back { left: 16px; }
  /* The row input sheets as the forms (Barney 2026-10-24: "the pop up screens still have quite a lot of
     padding"): ↶, SAVE, the row's title and the text 16 in from the sheet's edge, the line under the
     title across the whole sheet */
  html .InputView-sheet { padding: 0 0 20px; }
  html .InputView-toolbar { margin: 0; }
  html .InputView-rowTitle { padding: 4px 0 0; }
  html .InputView-rowTitle::after { margin-top: 14px; }
  html .InputView-title, html .InputView-description { padding-left: 16px; padding-right: 16px; }
  html .InputView-body { padding: 0 16px; }
  html .Text_InputView-hint { padding: 12px 16px 0; }
  html .Text_InputView-text { margin: 4px 16px 0; }
  /* The signature: from the top, not centred 60 up, so SIGN stays above the keyboard on most phones (Barney
     2026-10-24); the keyboard's Return - "go" - signs too (Signature_InputView.js) */
  html .Signature { justify-content: flex-start; padding: 24px 16px 16px; overflow-y: auto; }
  html .Signature-request { margin-bottom: 24px; }
  /* The fleet's vessel picker (Barney 2026-10-24, "the padding issue"): title and names 16 in, the ✕ 16 from
     the corner, the title clear of it */
  html .GroupPickerView-title { padding: 24px 76px 20px 16px; }
  html .GroupPickerView-close { top: 16px; right: 16px; }
  html .GroupPickerView-row { padding: 0 16px; }
  html .GroupPickerView-list { margin-bottom: 16px; padding-top: 0; }
  html .Instructions_View-back { margin: 16px 0 0 16px; }
  html .Instructions_View-title { padding: 24px 16px 16px; }
  /* The user guide's pages: 100 in from each side on a desktop; on a phone they need the width to be read */
  html .Instructions_View-pages { padding: 0 16px; }
  /* The calendar: 7 columns in the sheet's width (8 gap + 16 padding each side); the date and the
     time wheel one under the other (as Android's phone layout, task 147); the buttons share the width */
  html .Calendar { --cell: calc((100vw - 48px) / 7); }
  /* The month heading on the title's line, 16 in (Barney 2026-10-24: "alignment of heading off") */
  html .Calendar-header { padding-left: 0; }
  html .DatePicker-pickers { flex-direction: column; gap: 12px; }
  /* Time and date (Barney 2026-10-24: "the time drops off the bottom"): the wheel centred under its HR / MIN,
     5 numbers in view instead of 7, calendar rows 40 apart, every gap tighter (Safari's bars leave an iPhone
     ~90 shorter than a desktop's phone-size window - Barney: N/A and SAVE were off the bottom), no "Time" heading (HR / MIN say it), and the
     sheet scrolls if a phone is still too short */
  html .TimeWheel.side { margin: 0 auto; }
  html .TimeWheel { height: 145px; }
  html .TimeWheel-column { padding: 58px 0; }   /* (145 - one number's 29) / 2: the chosen number on the band */
  html .TimePicker.side > .Calendar-header { display: none; }
  html .Calendar-days { grid-auto-rows: 40px; }
  html .Calendar-weekdays { margin-top: 8px; }
  html .TimeWheel-labels { margin-top: 4px; }
  html .DatePicker { padding-top: 8px; gap: 12px; overflow-y: auto; }
  html .DatePicker-buttons { grid-template-columns: repeat(3, 1fr); width: 100%; }
  html .TimeWheel { max-width: 100%; }
}

/* HRClick (task 161 D6): "(link to website)" after Documents and Certificates - Apple's .caption, titanium, italic
   (SideBarRowLabel in HRClick's SidebarView.swift). 13 for Apple's 12, as the footer's 12 for Apple's 11. */
.SidebarView-row .SidebarView-webLink { font-size: 13px; font-style: italic; color: var(--titanium); padding-top: 3px; white-space: pre;
  margin-left: 10px; }   /* the HStack's spacing: 10.5 pt on the Mac between the title and the caption (measured 2026-11-15) */

/* HRClick's Crew grid (task 161 D8): "link to website" where Yacht Forms has add crew - Apple's .callout, titanium,
   italic (HRClick UsersListView.swift). 17 for Apple's 16, as the other Roboto text. */
.ToolbarGroup .ToolbarLink { font-size: 17px; font-style: italic; color: var(--titanium); padding: 0 10px; height: 44.8px; white-space: nowrap; }