/* Apple original: the row input screens (InputViews/*, DefaultRowTitleView) - Catalyst sheets, the size
   of Settings' (SettingsView.css). Every sheet is spaced as the Date sheet, measured on the Mac and lifted
   (Barney 2026-10-17): ↶ and SAVE (18 light, highlight colour), the row title 17 semibold and its
   description over a line, then the sheet's own content. Text: the hint and the text in the pen. */
.InputView {
  position: absolute; inset: 0; z-index: 90;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.2);
}
.InputView-sheet {
  position: relative; display: flex; flex-direction: column;
  width: 580.5px; height: 640.3px; max-width: calc(100% - 40px); max-height: calc(100% - 40px);
  padding: 16px 16px 20px; border-radius: 26px; overflow: hidden;
  background: var(--systemBackground);
  box-shadow: 0 0 0 0.65px rgba(0, 0, 0, 0.12), 0 20px 60px rgba(0, 0, 0, 0.25);
}
.InputView-toolbar { flex: none; display: flex; justify-content: space-between; align-items: center; margin: 6.6px 9.5px 0; }
.InputView-back { padding: 16px; color: var(--titanium); }
.InputView-back .Icon { width: 26px; height: 26px; stroke-width: 1.2; }
.InputView-save { padding: 16px; font-size: 18px; font-weight: 300; color: var(--highlight); }
.InputView-rowTitle { flex: none; padding: 22.4px 10px 0; }
.InputView-title { padding: 0 16px; font-size: 17px; font-weight: 600; line-height: 22px; color: var(--textCharcoal); white-space: pre-wrap; }
.InputView-description { padding: 2px 16px 0; font-size: 16px; font-weight: var(--lightWeight); line-height: 20px; color: var(--titanium); white-space: pre-wrap; }
.InputView-rowTitle::after { content: ""; display: block; margin-top: 26px; border-top: 0.65px solid rgba(60, 60, 67, 0.29); }

/* ScrollableTextView: 20 in; the hint in the pen, grey; the text in the pen colour */
.Text_InputView-hint { flex: none; padding: 12px 20px 0; font-family: "ArchitectsDaughter", var(--ui); font-size: 19px; letter-spacing: 1.2px; color: var(--systemGray2); }
.Text_InputView-hint .Icon { width: 18px; height: 18px; vertical-align: -2px; }
.Text_InputView-text {
  flex: 1; min-height: 0; margin: 4px 20px 0; padding: 0; border: 0; outline: none; resize: none;
  font-family: "ArchitectsDaughter", var(--ui); font-size: 19px; line-height: 26px; letter-spacing: 1.2px;
  color: var(--pen); background: transparent;
}

/* The screen's own part, under the line */
.InputView-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 20px; }
.InputView-body.Text_InputView { padding: 0; }

/* Lists, laid out as Android's (ListGroup): the group in the middle of the sheet; a long list scrolls in its
   own area, fading at the bottom, so what is above and below it stays in view */
.ListGroup { justify-content: center; padding: 12px 20px; }
.ListGroup.selection { justify-content: flex-start; }
.ListGroup-list {
  position: relative; flex: 0 1 auto; min-height: 0; overflow-y: auto;
  /* As the login's crew list: a thin scroll bar, and the sheet does not move when the list ends */
  scrollbar-width: thin; overscroll-behavior: contain;
  --fadeTop: 0px; --fadeBottom: 0px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fadeTop), #000 calc(100% - var(--fadeBottom)), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fadeTop), #000 calc(100% - var(--fadeBottom)), transparent 100%);
}
.ListGroup-list.moreAbove { --fadeTop: 24px; }
.ListGroup-list.moreBelow { --fadeBottom: 24px; }
.ListGroup.selection .ListGroup-list { flex: 1 1 auto; margin-top: 16px; }
.InputView-item {
  display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 12px 0;
  text-align: left; font-size: 16px; font-weight: var(--lightWeight); line-height: 20px; letter-spacing: 0.3px; color: var(--textCharcoal);
}
.InputView-item .Row-marker { flex: none; }
/* "…or Enter Text…": quiet - small and pale, centred, no box; what is typed is in the pen */
.OtherTextField {
  flex: none; width: 100%; margin-top: 20px; padding: 8px 0; border: 0; outline: none; background: transparent;
  text-align: center; font-family: "ArchitectsDaughter", var(--ui); font-size: 16px; letter-spacing: 1.2px; color: var(--pen);
}
.OtherTextField::placeholder { color: rgba(160, 160, 150, 0.7); }
/* SAVE under the answer */
.InputView-bottomSave { flex: none; align-self: center; margin-top: 24px; padding: 8px 16px; font-size: 18px; font-weight: 700; color: var(--highlight); }
.ListGroup.selection .InputView-bottomSave { margin-bottom: 24px; }
/* Add Item and Select All, close under the line */
.Selection-buttons { flex: none; display: flex; justify-content: space-between; padding-top: 12px; }
.Selection-button { padding: 8px 0; font-size: 16px; font-weight: var(--lightWeight); letter-spacing: 0.3px; color: var(--textCharcoal); }

/* ── Date_InputView, measured on the Mac's Date sheet (2026-10-17), iPad points ──
   on the Mac ↶ and SAVE are centred 63.6 down and 54.5 / 41.5 in, the title 136 down, the line 173. The web
   lifts the buttons, title and calendar (Barney 2026-10-17): ↶ and SAVE 12 higher, the title 10 higher - the
   spacing EVERY input sheet now uses (.InputView-toolbar / -rowTitle above, Barney: "for all pop ups") - the
   calendar 28 under the line with N/A - SAVE - DELETE 36 under it, the room left at the bottom. */
.DatePicker { justify-content: flex-start; align-items: center; padding: 28px 0 8px; gap: 36px; }
/* The calendar: on the Mac 7 columns 55.5 apart, rows 55.5 high, days 20, the chosen day in a 44 grey
   circle; drawn 15% smaller on the web (Barney 2026-10-17) - 47, 18 and 38. The month 17 semibold, the
   arrows grey; weekdays 12.5 semibold grey. */
.Calendar { --cell: 47px; width: calc(7 * var(--cell)); }
.Calendar-header { display: flex; align-items: center; height: 30px; padding: 0 0 0 12px; }
.Calendar-month { flex: 1; display: flex; align-items: center; gap: 4px; font-size: 17px; font-weight: 600; color: rgb(25, 25, 25); }
.Calendar-month .Icon { width: 13px; height: 13px; stroke-width: 2.2; color: rgb(119, 119, 119); }
.Calendar-nav { width: 44px; height: 30px; display: grid; place-items: center; color: rgb(119, 119, 119); }
.Calendar-nav .Icon { width: 20px; height: 20px; stroke-width: 1.8; }
.Calendar-nav#next { margin-left: 2px; margin-right: -8px; }
.Calendar-weekdays { display: grid; grid-template-columns: repeat(7, var(--cell)); margin-top: 14px; }
.Calendar-weekdays span { text-align: center; font-size: 12.5px; font-weight: 600; letter-spacing: 0.3px; color: rgb(113, 113, 113); }
.Calendar-days { display: grid; grid-template-columns: repeat(7, var(--cell)); grid-auto-rows: var(--cell); margin-top: 6px; }
.Calendar-day { display: grid; place-items: center; width: 38px; height: 38px; margin: auto; border-radius: 50%; font-size: 18px; font-weight: 400; color: rgb(28, 28, 28); }
.Calendar-day:hover { background: rgba(0, 0, 0, 0.05); }
.Calendar-day.today { color: rgb(152, 152, 152); font-weight: 600; }
.Calendar-day.selected { background: rgb(152, 152, 152); color: #fff; font-weight: 600; }
/* N/A and DELETE 18 light charcoal, SAVE 22 light in the highlight colour, 190 apart */
.DatePicker-buttons { display: grid; grid-template-columns: repeat(3, 110px); justify-items: center; align-items: center; }
.DatePicker-text { padding: 8px 12px; font-size: 18px; font-weight: 300; color: var(--charcoal); }
.DatePicker-save { padding: 8px 12px; font-size: 22px; font-weight: 300; letter-spacing: 1.05px; color: var(--highlight); }

/* The time wheel, measured on the Mac's Time sheet: numbers 29 apart, the chosen one 22 on a 34 high grey band
   302 wide, the rest grey and fading towards the top and bottom; 7 numbers in view */
.TimeWheel { position: relative; display: flex; justify-content: center; gap: 30px; width: 302px; height: 203px; }
.TimeWheel-band { position: absolute; left: 0; right: 0; top: calc(50% - 17px); height: 34px; border-radius: 17px; background: rgba(118, 118, 128, 0.12); pointer-events: none; }
.TimeWheel-column {
  position: relative; width: 44px; height: 100%; overflow-y: auto; scrollbar-width: none; outline: none;
  padding: 87px 0; scroll-snap-type: y mandatory; overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 65%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 65%, transparent);
}
.TimeWheel-column::-webkit-scrollbar { display: none; }
.TimeWheel-item { height: 29px; line-height: 29px; text-align: center; scroll-snap-align: center; cursor: pointer; font-size: 20px; font-variant-numeric: tabular-nums; color: rgb(140, 140, 140); }
.TimeWheel-item.chosen { font-size: 22px; color: rgb(28, 28, 28); }

/* Time and date: the calendar and the wheel side by side, the wheel as tall as the calendar's days */
.DatePicker-pickers { display: flex; align-items: center; gap: 28px; }
.TimePicker.side { align-self: stretch; display: flex; flex-direction: column; }
.TimePicker.side .Calendar-header { padding-left: 0; justify-content: center; }
.TimePicker.side .Calendar-month { flex: none; }
.TimeWheel.side { width: 150px; gap: 14px; margin-top: auto; margin-bottom: 16px; }   /* centred on the days, not the month */
/* Labelled as the calendar labels itself (Barney 2026-10-17): HR and MIN over the columns in the weekdays'
   small grey capitals; side by side, "Time" level with the month */
.TimeWheel-labels { display: flex; justify-content: center; gap: 30px; margin-top: 14px; }
.TimeWheel-labels span { width: 44px; text-align: center; font-size: 12.5px; font-weight: 600; letter-spacing: 0.3px; color: rgb(113, 113, 113); }
.TimePicker.side .TimeWheel-labels { gap: 14px; }
.TimePicker:not(.side) .TimeWheel-labels { margin: 0 0 8px; }

/* Time only (Barney 2026-10-17): N/A - SAVE - DELETE as low as on the Date sheet (a 5-row month: 28 + 301
   + 36 under the line), the wheel centred in the space above them */
.DatePicker.timeOnly { padding-top: 60px; gap: 78px; }   /* the HR / MIN line and wheel centred above the buttons */

/* The electronic signature (ElectronicSignatureView): one block in the middle of the space, 60 up from true
   centre; the request (body, centred, 44 above the Name), the login's Name row and password field, a line
   for the message (red, caption), SIGN (22 light; titanium until a password is typed) */
.Signature { justify-content: center; align-items: center; padding: 0 30px 60px; }
.Signature-block { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 400px; }
.Signature-request { font-size: 17px; line-height: 26px; text-align: center; color: var(--label); margin-bottom: 44px; }
.Signature-picker { margin-bottom: 12px; padding-top: 0; }
.Signature-field.password { margin-top: 0; }
.Signature-message { min-height: 16px; margin: 10px 0; font-size: 12px; line-height: 16px; text-align: center; color: rgb(255, 59, 48); }
.Signature-sign { color: var(--charcoal); }
.Signature-sign:disabled { color: var(--titanium); cursor: default; }

/* EmailView (Supporting Views/EmailView.js): the Mail sheet's fields - a label, the value, a fine line under each;
   the message, which the sender can change (Barney), then the PDF's name with its icon under it (Barney) */
.EmailView .InputView-rowTitle::after { margin-top: 16px; }
.EmailView-field { display: flex; gap: 8px; align-items: baseline; padding: 12px 0; border-bottom: 0.65px solid rgba(60, 60, 67, 0.29); font-size: 16px; line-height: 21px; }
.EmailView-label { flex: none; color: var(--titanium); font-weight: var(--lightWeight); }
.EmailView-to, .EmailView-subject { flex: 1; min-width: 0; color: var(--textCharcoal); overflow-wrap: anywhere; }
.EmailView-typed { width: 100%; margin: 0; padding: 0; border: 0; outline: none; resize: none; overflow: hidden; font: inherit; line-height: 21px; color: var(--textCharcoal); background: transparent; }
.EmailView-attachment { flex: none; display: flex; gap: 8px; align-items: center; padding: 18px 0 0; font-size: 15px; color: var(--textCharcoal); }
.EmailView-attachment .Icon { flex: none; width: 22px; height: 22px; color: var(--highlight); }
.EmailView-message { flex: 0 1 auto; min-height: 110px; height: 150px; margin: 16px 0 0; padding: 8px 10px; border: 0.65px solid rgba(60, 60, 67, 0.29); border-radius: 8px; outline: none; resize: vertical; font: inherit; font-size: 15px; line-height: 20px; font-weight: var(--lightWeight); color: var(--textCharcoal); background: transparent; }