/* profile-settings.css — the Profile / Settings sheet and the buttons that open it.
   Loaded by all three shells (index.html, team-clean.html, employees.html), every
   one of which loads system.css first.

   2026-09-05 (Apple-style restyle): this file used to type #1d1d1f twenty-four
   times and carry its own greys, its own shadows and weights of 850 / 950 that
   only a webfont could render. Every colour, shadow, radius and weight below now
   reads a --sys-* token; nothing is typed here.
     · cards (hero, the settings cards): white, NO border, --sys-r-card, lifted by
       --sys-shadow-card
     · inputs: --sys-fill ground, no border, 16px, --sys-r-control
     · primary buttons (Save, Update Password) and the avatar: --sys-accent, not ink
     · secondary buttons (Done, Change Photo, the test notification): white with
       the accent as text
     · the toast keeps its dark ink pill — that is the app's error vocabulary
     · the nav rules further down are paint-only changes: their !important geometry
       (72px, bottom: max(...)) is untouched and counted by qa:layout-contract
   Layout is byte-for-byte what it was, apart from the borders the contract removes. */

.profile-settings-open {
  border: 0;
  border-radius: var(--sys-r-pill);
  background: var(--sys-panel);
  color: var(--sys-ink);
  font-weight: var(--sys-w-semibold);
}

body.apple-manager .manager-nav .profile-settings-open {
  min-height: 54px;
  display: grid;
  place-items: center;
  gap: 2px;
  font-size: 11px;
}

body.apple-manager .manager-nav .profile-settings-open span,
body.apple-manager .profile-settings-open .icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--sys-line);
  border-radius: var(--sys-r-pill);
  color: var(--sys-ink);
}

body.apple-manager .apple-profile-dot {
  cursor: pointer;
}

body.apple-manager .apple-rail .profile-settings-open {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  box-shadow: var(--sys-shadow-card);
}

.profile-settings-chip {
  position: fixed;
  top: max(14px, var(--sys-safe-t));
  right: calc(14px + var(--sys-safe-r));
  z-index: 180;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: var(--sys-tap);
  border: 0;
  border-radius: var(--sys-r-pill);
  background: var(--sys-panel);
  color: var(--sys-ink);
  padding: 5px 10px 5px 5px;
  font: inherit;
  font-size: 12px;
  font-weight: var(--sys-w-semibold);
  box-shadow: var(--sys-shadow-pill);
}

.profile-settings-chip span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--sys-r-pill);
  background: var(--sys-accent);
  color: #fff;
}

.profile-settings-tool {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: var(--sys-r-card);
  background: var(--sys-panel);
  color: var(--sys-ink);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font: inherit;
  font-size: 13px;
  font-weight: var(--sys-w-semibold);
  box-shadow: var(--sys-shadow-card);
}

.profile-settings-tool span {
  color: var(--sys-muted);
}

/* The two nav rules below describe bars nothing in the two apps renders today
   (nothing sets aria-label="Team app menu" or .team-bottom-nav in a loaded file;
   body.apple-manager only exists under ?classic=1). Their geometry is deliberately
   untouched — qa:layout-contract counts it — and only the paint moved onto the
   tokens: frosted white over a blur (same idea as the shared pill), the hairline,
   the pill shadow, and an active item that is the accent colour with NO dark pill. */
body.apple-team .team-bottom-nav,
body:not(.apple-manager) .team-bottom-nav,
body:not(.apple-manager) nav.nav[aria-label="Team app menu"] {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: max(10px, env(safe-area-inset-bottom)) !important;
  transform: translateX(-50%) !important;
  width: min(94vw, 540px) !important;
  min-height: 72px !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 4px !important;
  border: 1px solid var(--sys-line) !important;
  border-radius: 30px !important;
  background: rgba(255, 255, 255, .88) !important;
  box-shadow: var(--sys-shadow-pill) !important;
  backdrop-filter: blur(22px) !important;
  padding: 8px !important;
}

body.apple-team .team-bottom-nav button,
body:not(.apple-manager) .team-bottom-nav button,
body:not(.apple-manager) nav.nav[aria-label="Team app menu"] button {
  min-height: 56px !important;
  width: auto !important;
  border: 0 !important;
  border-radius: 22px !important;
  background: transparent !important;
  color: var(--sys-muted) !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 4px !important;
  font-size: 11px !important;
  font-weight: var(--sys-w-medium) !important;
  line-height: 1 !important;
  box-shadow: none !important;
  transform: none !important;
}

body.apple-team .team-bottom-nav .icon,
body:not(.apple-manager) .team-bottom-nav .icon {
  display: none !important;
}

body.apple-team .team-bottom-nav button.active,
body:not(.apple-manager) .team-bottom-nav button.active,
body:not(.apple-manager) nav.nav[aria-label="Team app menu"] button.active {
  background: transparent !important;
  color: var(--sys-accent) !important;
  font-weight: var(--sys-w-semibold) !important;
}

body.apple-manager.apple-modern .manager-nav {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: max(10px, env(safe-area-inset-bottom)) !important;
  transform: translateX(-50%) !important;
  width: min(94vw, 540px) !important;
  min-height: 72px !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 4px !important;
  border: 1px solid var(--sys-line) !important;
  border-radius: 30px !important;
  background: rgba(255, 255, 255, .88) !important;
  box-shadow: var(--sys-shadow-pill) !important;
  backdrop-filter: blur(22px) !important;
  padding: 8px !important;
  align-items: stretch !important;
}

body.apple-manager.apple-modern .manager-nav button {
  min-height: 56px !important;
  width: auto !important;
  border: 0 !important;
  border-radius: 22px !important;
  background: transparent !important;
  color: var(--sys-muted) !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 4px !important;
  font-size: 11px !important;
  font-weight: var(--sys-w-medium) !important;
  line-height: 1 !important;
  box-shadow: none !important;
  transform: none !important;
}

body.apple-manager.apple-modern .manager-nav button span {
  display: none !important;
}

body.apple-manager.apple-modern .manager-nav button.active {
  background: transparent !important;
  color: var(--sys-accent) !important;
  font-weight: var(--sys-w-semibold) !important;
}

body.apple-manager.apple-modern .manager-nav button[data-manager-nav="today"] {
  order: initial !important;
  min-height: 56px !important;
  width: auto !important;
  justify-self: auto !important;
  transform: none !important;
  border-radius: 22px !important;
  background: transparent !important;
  color: var(--sys-muted) !important;
  box-shadow: none !important;
}

body.apple-manager.apple-modern .manager-nav button[data-manager-nav="today"].active {
  background: transparent !important;
  color: var(--sys-accent) !important;
  font-weight: var(--sys-w-semibold) !important;
}

body.apple-manager .manager-logout {
  display: none !important;
}

body.apple-manager #drawer.open .drawer-inner {
  padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important;
}

body.apple-manager #drawer.open .drawer-inner > .actions {
  position: sticky !important;
  bottom: max(12px, env(safe-area-inset-bottom)) !important;
  z-index: 80 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 14px -2px 0 !important;
  padding: 10px !important;
  border: 1px solid var(--sys-line) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: var(--sys-shadow-sheet) !important;
  backdrop-filter: blur(22px) !important;
}

body.apple-manager #drawer.open .drawer-inner > .actions .button {
  min-height: 48px !important;
  border-radius: 17px !important;
  padding-inline: 8px !important;
}

body.apple-manager #drawer.open #deleteSelected,
body.apple-manager #drawer.open #archiveSelected,
body.apple-manager #drawer.open #editSelected {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.apple-manager #editor.open {
  inset: 0 !important;
  z-index: 360 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-height: none !important;
  overflow: hidden !important;
  background: var(--sys-page) !important;
}

body.apple-manager #editor.open .modal-inner {
  max-width: 980px !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  padding: max(16px, var(--sys-safe-t)) 16px calc(160px + env(safe-area-inset-bottom)) !important;
}

body.apple-manager #editor.open #houseForm > .actions.wide:last-child,
body.apple-manager #editor.open .editor-save-bar {
  position: sticky !important;
  bottom: max(12px, env(safe-area-inset-bottom)) !important;
  z-index: 120 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin: 18px -2px 0 !important;
  padding: 10px !important;
  border: 1px solid var(--sys-line) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, .97) !important;
  box-shadow: var(--sys-shadow-sheet) !important;
  backdrop-filter: blur(22px) !important;
}

body.apple-manager #editor.open #houseForm > .actions.wide:last-child .button {
  min-height: 54px !important;
  border-radius: 18px !important;
  font-size: 15px !important;
}

body.apple-manager #editor.open #houseForm > .actions.wide:last-child .button.primary {
  background: var(--sys-accent) !important;
  border-color: var(--sys-accent) !important;
}

/* THE TOP SAFE AREA IS PAID BY THE STICKY HEADER, NOT THE SCROLLER (2026-09-17).
   The modal used to pad itself by max(18px, env(safe-area-inset-top)). A sticky
   header sticks at the scroller's padding edge, so on a notched phone the cards
   scrolled up through a 62pt band ABOVE "Settings / Done", under the clock, and
   the sheet looked broken. The same space now sits inside .profile-settings-head,
   whose background covers it, so nothing scrolls above the header; at rest the
   first card is exactly where it was (18-or-inset + 2).
   Both edges pay env() in the base rule. Where the iOS shell has already put the
   page below the status bar / above the home indicator (html.ni-top / ni-bottom,
   set live by native-inset.js; the inset it pays changes with the scroll state
   while env() does not), the companions below take exactly that inset back out. */
.profile-settings-modal {
  position: fixed;
  inset: 0 var(--sys-safe-r) 0 var(--sys-safe-l);
  z-index: 9500;
  display: none;
  overflow-y: auto;
  overflow-x: hidden;          /* never let the sheet drift sideways / get cut off */
  overscroll-behavior: contain;
  padding: 0 16px calc(28px + env(safe-area-inset-bottom));
  background: var(--sys-page);
  color: var(--sys-ink);
  font-family: var(--sys-font);
}

.profile-settings-modal.open {
  display: block;
}

.profile-settings-sheet {
  max-width: 720px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
}

.profile-settings-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(max(18px, var(--sys-safe-t)) + 2px) 0 10px;
  background: var(--sys-page);
}

html.ni-top .profile-settings-head {
  padding-top: 20px;
}

html.ni-bottom .profile-settings-modal {
  padding-bottom: 28px;
}

.profile-settings-head h2,
.profile-settings-card h3 {
  margin: 0;
  letter-spacing: 0;
}

.profile-settings-head h2 {
  font-size: 28px;
  font-weight: var(--sys-w-bold);
  letter-spacing: -.03em;
  line-height: 1;
}

.profile-settings-close {
  min-height: var(--sys-tap);
  border: 0;
  border-radius: var(--sys-r-pill);
  background: var(--sys-panel);
  color: var(--sys-accent);
  padding: 0 14px;
  font-weight: var(--sys-w-semibold);
  box-shadow: var(--sys-shadow-card);
}

.profile-settings-hero,
.profile-settings-card {
  border: 0;
  border-radius: var(--sys-r-card);
  background: var(--sys-panel);
  box-shadow: var(--sys-shadow-card);
}

.profile-settings-hero {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
}

.profile-avatar {
  width: 86px;
  height: 86px;
  border-radius: var(--sys-r-card);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--sys-accent);
  color: #fff;
  font-size: 34px;
  font-weight: var(--sys-w-bold);
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-settings-hero strong {
  display: block;
  font-size: 24px;
  font-weight: var(--sys-w-bold);
  letter-spacing: -.02em;
  line-height: 1.04;
}

.profile-settings-hero span,
.profile-settings-card p,
.profile-settings-note {
  color: var(--sys-muted);
  font-size: 13px;
  font-weight: var(--sys-w-medium);
  line-height: 1.35;
}

.profile-settings-card {
  display: grid;
  gap: 12px;
  padding: 14px;
}

/* display:grid above beats the hidden attribute's own rule, and Team & access is
   in the markup, empty and hidden, for everybody who is not a manager. */
.profile-settings-card[hidden] {
  display: none;
}

/* "You sign in with …": its own line under the role, and an address may be long. */
.profile-settings-hero .profile-signin {
  display: block;
  overflow-wrap: anywhere;
}

.profile-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/* UI-120: three fields in two columns put Current | New on one row and Confirm
   alone under Current, away from the field it confirms (iPad). Current takes its
   own row; New and Confirm sit side by side. A phone is one column anyway. */
.profile-settings-grid-security > .profile-settings-field:first-child {
  grid-column: 1 / -1;
}

.profile-settings-field {
  display: grid;
  gap: 6px;
}

.profile-settings-field.wide {
  grid-column: 1 / -1;
}

.profile-settings-field label {
  color: var(--sys-muted);
  font-size: 11px;
  font-weight: var(--sys-w-semibold);
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* A SETTINGS ROW, NOT FINE PRINT (2026-09-17). The toggle's title and subtitle
   shared the field labels' 11px uppercase rule, so "NEW JOBS" and its explanation
   were shouted micro-type. iOS Settings sets a row's title in ink with its
   explanation below it in the secondary grey, both in sentence case. */
.profile-settings-toggle span {
  color: var(--sys-muted);
  font-size: var(--sys-t-body);
  font-weight: var(--sys-w-regular);
  letter-spacing: 0;
  text-transform: none;
}

/* 16px, explicitly: `font: inherit` alone takes the shell's size, and under 16px
   iOS zooms the page in on focus and never zooms back out. */
.profile-settings-field input,
.profile-settings-field select,
.profile-settings-field textarea {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: var(--sys-r-control);
  background: var(--sys-fill);
  color: var(--sys-ink);
  padding: 10px 12px;
  outline: none;
  font: inherit;
  font-size: var(--sys-t-field);
}

/* The app's one focus ring — the same 2px accent the crew fields, the bento
   fields, the pull list and team home wear. 2026-09-06 wave 2. */
.profile-settings-field input:focus,
.profile-settings-field select:focus,
.profile-settings-field textarea:focus {
  box-shadow: 0 0 0 2px var(--sys-accent);
}

.profile-settings-field input::placeholder,
.profile-settings-field textarea::placeholder {
  color: var(--sys-placeholder);
}

.profile-settings-field textarea {
  min-height: 88px;
  resize: vertical;
}

.profile-settings-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.profile-settings-actions button,
.profile-settings-file {
  min-height: 46px;
  border: 0;
  border-radius: var(--sys-r-pill);
  background: var(--sys-panel);
  color: var(--sys-accent);
  padding: 0 14px;
  font: inherit;
  font-size: 13px;
  font-weight: var(--sys-w-semibold);
  box-shadow: var(--sys-shadow-card);
}

.profile-settings-actions .primary {
  background: var(--sys-accent);
  color: #fff;
  box-shadow: none;
}

.profile-settings-file {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.profile-settings-file input {
  display: none;
}

.profile-settings-toggles {
  display: grid;
  gap: 9px;
}

.profile-settings-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 0;
  border-radius: var(--sys-r-control);
  background: var(--sys-fill);
  padding: 11px;
}

.profile-settings-toggle strong {
  display: block;
  font-size: var(--sys-t-lead);
  font-weight: var(--sys-w-semibold);
  color: var(--sys-ink);
}

/* No typed size (2026-09-17): the input carries `switch`, and WebKit draws the
   system switch at the system's size; a typed 48x28 would override it. The whole
   row is the label, so the tap target is the row, not the control. */
.profile-settings-toggle input {
  accent-color: var(--sys-accent);
}

/* The way into the Notification Center (2026-09-30): the toggle row's look, as one
   button the height of a finger, with the chevron iOS uses for "opens a page". */
.profile-settings-door {
  width: 100%;
  min-height: var(--sys-tap);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.profile-settings-door-chev {
  font-size: 22px;
  line-height: 1;
  color: var(--sys-muted);
}

/* The Face ID / Touch ID row's place under Security. Empty on the web and on a
   phone without biometry, and then it takes no room in the card's grid gap. */
.profile-settings-biometric:empty {
  display: none;
}

/* Privacy Policy and Terms were 15pt-tall text links (2026-09-17). 44pt tall now,
   with the side padding hanging into the card's own padding (the <p> is pulled
   10px left in profile-settings.js) so the text still lines up with the card's content. */
.profile-settings-legal a {
  display: inline-flex;
  align-items: center;
  min-height: var(--sys-tap);
  padding: 0 10px;
}

/* The toast keeps its dark ink pill on purpose — it is the app's error vocabulary. */
.profile-settings-toast {
  position: fixed;
  left: var(--sys-center-x);
  bottom: calc(92px + env(safe-area-inset-bottom));
  z-index: 9700;
  display: none;
  transform: translateX(-50%);
  border-radius: var(--sys-r-pill);
  background: var(--sys-ink);
  color: #fff;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: var(--sys-w-semibold);
  box-shadow: var(--sys-shadow-sheet);
}

.profile-settings-toast.show {
  display: block;
}

@media (max-width: 520px) {
  body.apple-manager #drawer.open .drawer-inner > .actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* 2026-09-06 wave 2: the narrow branch drops the name, not the tap floor. */
  .profile-settings-chip {
    min-height: var(--sys-tap);
    padding-right: 8px;
  }

  .profile-settings-chip strong {
    display: none;
  }

  .profile-settings-grid,
  .profile-settings-hero {
    grid-template-columns: 1fr;
  }

  .profile-avatar {
    width: 76px;
    height: 76px;
  }
}