/* PP4 FE-M1 Mobile shell (SoR Church-OS-Gate1-Mobile-Lobby.html + MOBILE-IA.md). Phone IA below 768 (D-P18): mobile.js sets
   html[data-surface="phone"] from the same media query and every rule here hangs off that attribute, so the attribute is the
   one truth (tests set it directly). Tokens only: colour, type, radius and space are the desktop tokens; the only deltas are
   the MOBILE-IA phone hit sizes (bar 56 + home indicator, top bar 48, button 44, row 56, search 44, chrome avatar 32).
   Loads last so it wins the cascade over shell.css / responsive.css. Nothing here is a second design system. */

/* Phone-only elements ship in the markup and stay off the desktop shell. */
.mob-only { display: none; }

html[data-surface="phone"] {
  --mob-top: 48px;
  --mob-bar: 56px;
  --mob-safe-top: env(safe-area-inset-top, 0px);
  --mob-home: env(safe-area-inset-bottom, 0px);
  --mob-hit: 44px;
  --mob-row: 56px;
  overflow-x: hidden;
}

/* ---------- top app bar (48 px): left slot · title · avatar ---------- */
html[data-surface="phone"] .ws-hdr {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-2);
  position: sticky;
  top: 0;
  min-height: calc(var(--mob-top) + var(--mob-safe-top));
  height: calc(var(--mob-top) + var(--mob-safe-top));
  padding: var(--mob-safe-top) var(--s-4) 0;
  background: var(--bg);
}
html[data-surface="phone"] .ws-mark,
html[data-surface="phone"] .ws-hdr-brand,
html[data-surface="phone"] .ws-areanav,
html[data-surface="phone"] .ws-hdr-search,
html[data-surface="phone"] .ws-ask-btn { display: none; }
html[data-surface="phone"] .mob-top-left { display: flex; justify-content: flex-start; min-width: 0; align-items: center; }
html[data-surface="phone"] .mob-title {
  display: block;
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60vw;
}
html[data-surface="phone"] .ws-hdr-tools { margin-left: 0; justify-content: flex-end; gap: 0; }
html[data-surface="phone"] .mob-campus { font-size: var(--t-micro); font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink2); background: var(--card); border: 1px solid var(--line); }
html[data-surface="phone"] .mob-campus::after { content: "▾"; margin-left: var(--s-1); }
html[data-surface="phone"] .mob-back {
  display: inline-flex;
  align-items: center;
  height: var(--mob-hit);
  margin-left: calc(-1 * var(--s-2));
  padding: 0 var(--s-2);
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--t-md);
  font-weight: 500;
  color: var(--ember);
  white-space: nowrap;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
/* Avatar in chrome is 32 (MOBILE-IA); the hit box grows to 44 without moving the mark. */
html[data-surface="phone"] .ws-acct-wrap { position: relative; }
html[data-surface="phone"] .ws-acct-wrap::after { content: ""; position: absolute; inset: -6px; pointer-events: none; }
html[data-surface="phone"] .ws-acct,
html[data-surface="phone"] .memini .pv { width: 32px; height: 32px; }
html[data-surface="phone"] .ws-hdr-campus,
html[data-surface="phone"] .ws-home-deskfoot { display: none; }
html[data-surface="phone"] .ws-viewbar.is-on { display: flex; padding: 0 var(--s-4); }
html[data-surface="phone"] .mob-campus[data-chip="k"] { background: var(--ink); color: var(--card); border-color: var(--ink); }
html[data-surface="phone"] #mobCampus .ws-menu { position: static; min-width: 0; border: 1px solid var(--line); border-radius: var(--r-card); padding: 0; overflow: hidden; }
html[data-surface="phone"] #mobCampus .ws-menu-row { min-height: var(--mob-row); padding: var(--s-3) var(--s-4); }
html[data-surface="phone"] #mobCampus .ws-menu-row[data-pal-row="on"] { box-shadow: inset var(--bar) 0 0 var(--ember); background: var(--bg); }
html[data-surface="phone"] #mobCampus .ws-menu-foot { display: none; }
html[data-surface="phone"][data-mob-avatar="off"] .ws-acct-wrap { display: none; }
/* Lock 7 Appearance: hide the chrome mark, never the wrap. #memenu is a child of .ws-acct-wrap. */
html[data-surface="phone"]:has(#memenu.on[data-frame="p1-m3"]) #memini,
html[data-surface="phone"]:has(#memenu.on[data-frame="p1-m3b"]) #memini { visibility: hidden; }

/* ---------- body: the room scrolls above the bar ---------- */
html[data-surface="phone"] .ws-app { padding-bottom: calc(var(--mob-bar) + var(--mob-home)); overflow-x: hidden; min-width: 0; }
html[data-surface="phone"] .ws-body { min-height: 0; overflow-x: hidden; min-width: 0; }
html[data-surface="phone"] .ws-app.is-workflow-home .ws-main,
html[data-surface="phone"] .ws-app.is-workflow-home.is-ask-open .ws-main { grid-template-columns: minmax(0, 1fr); }
html[data-surface="phone"] .ws-home,
html[data-surface="phone"] .ws-area { grid-column: 1; padding: var(--s-4) var(--s-4) var(--s-6); overflow-x: hidden; min-width: 0; }
html[data-surface="phone"] .ws-home-cards,
html[data-surface="phone"] .ws-groups-hub { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
html[data-surface="phone"] .ws-hcard {
  min-height: 0;
  gap: var(--s-2);
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
html[data-surface="phone"] button.ws-hcard { appearance: none; }
html[data-surface="phone"] button.ws-hcard:disabled { cursor: default; }
html[data-surface="phone"] .ws-hcard.is-stale { opacity: .55; }
html[data-surface="phone"] .ws-hcard-act { display: none; }
html[data-surface="phone"] .ws-hcard-figure { font-family: var(--f-display); margin: 0; }
html[data-surface="phone"] .ws-hcard-value { display: flex; align-items: baseline; gap: var(--s-2); flex: 0 0 auto; }
html[data-surface="phone"] .ws-hcard-hint { display: block; font-size: var(--t-micro); color: var(--muted); margin-top: var(--s-1); }
html[data-surface="phone"] .ws-home-head { display: contents; }
html[data-surface="phone"] .ws-home-lead { order: 1; }
html[data-surface="phone"] .ws-home-find { order: 2; display: block; }
html[data-surface="phone"] .ws-home-mode { order: 3; margin-left: 0; }
html[data-surface="phone"] .ws-home-mode-col { align-items: flex-start; }
html[data-surface="phone"] .ws-home-resume { order: 4; }
html[data-surface="phone"] .ws-home-strip { order: 5; }
html[data-surface="phone"] .ws-home-cards { order: 6; }
html[data-surface="phone"] .ws-home-deskfoot { order: 7; }
html[data-surface="phone"] .ws-home-foot { order: 8; }

/* m-a8: find door looks like the field (desktop keeps Search in the chrome). */
html[data-surface="phone"] .mob-find {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  height: var(--mob-hit);
  padding: 0 var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
  font: inherit;
  font-size: var(--t-md);
  color: var(--muted);
  text-align: left;
  cursor: pointer;
}
html[data-surface="phone"] .mob-find-glyph { font-size: var(--t-lg); }
html[data-surface="phone"] .ws-home-foot { display: block; font-size: var(--t-micro); color: var(--muted); line-height: 1.4; margin: var(--s-4) 0 0; }

/* ---------- phone hit sizes (MOBILE-IA control table; desktop unchanged) ---------- */
html[data-surface="phone"] .ws-area .btn,
html[data-surface="phone"] .ws-home .btn,
html[data-surface="phone"] .ws-sheet-host .btn,
html[data-surface="phone"] .ws-memenu .btn { min-height: var(--mob-hit); }
html[data-surface="phone"] .ws-row-main { min-height: var(--mob-row); }
html[data-surface="phone"] .ws-field input,
html[data-surface="phone"] .ws-field select,
html[data-surface="phone"] .ws-chat-col textarea { min-height: var(--mob-hit); font-size: 16px; }
/* iOS zooms a focused control under 16px. Phone fields stay at the threshold so the page scale never moves. */
html[data-surface="phone"] input,
html[data-surface="phone"] textarea,
html[data-surface="phone"] select { font-size: 16px; }

/* ---------- bottom bar (every room): five text labels, active = 3 px ember bar on top ---------- */
html[data-surface="phone"] .mob-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: calc(var(--mob-bar) + var(--mob-home));
  padding-bottom: var(--mob-home);
  border-top: 1px solid var(--line);
  background: var(--bg);
}
html[data-surface="phone"] .mob-bar[hidden] { display: none; }
html[data-surface="phone"] .mob-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--mob-bar);
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink2);
  cursor: pointer;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html[data-surface="phone"] .mob-tab.is-on { color: var(--ink); box-shadow: inset 0 var(--bar) 0 var(--ember); }
html[data-surface="phone"] .mob-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------- Ask tab (m7-1): the same rail, re-homed as a full-height sheet over the room ---------- */
/* FE-M3: only the Ask tab strip folds (#tabStrip); the rooms' own .ws-tabs (5.1 channel toggle and tabs, 5.3 board tabs) stay. */
html[data-surface="phone"] .ws-app.is-workflow-home #tabStrip { display: none; }
html[data-surface="phone"] .ws-app.is-workflow-home .ws-chat-col {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: auto;
  bottom: max(calc(var(--mob-bar) + var(--mob-home)), var(--vv-bottom-inset, 0px));
  z-index: 35;
  grid-column: auto;
  grid-row: auto;
  border-left: 0;
  background: var(--bg2);
}
html[data-surface="phone"] .ws-app.is-workflow-home:not(.is-ask-open) .ws-chat-col { display: none; }
html[data-surface="phone"] .ws-rail-head { min-height: var(--mob-top); }
html[data-surface="phone"] .ws-rail-head .ws-sheet-x { width: var(--mob-hit); height: var(--mob-hit); }
/* m7-1x: the Clear confirm rises from the bottom of the sheet. */
html[data-surface="phone"] .ws-rail-confirm:not([hidden]) {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8; /* over the composer dock (ask.css z 7) */
  padding: var(--s-3) var(--s-4) var(--s-4);
  background: var(--card);
  border-top: 1px solid var(--line);
  border-radius: var(--r-card) var(--r-card) 0 0;
  box-shadow: var(--shadow-overlay);
}
html[data-surface="phone"] .ws-rail-confirm .ws-twin-acts { flex-direction: column; }
html[data-surface="phone"] .ws-rail-confirm .btn { min-height: var(--mob-hit); }

/* ---------- More sheet (m0-4) ---------- */
/* The sheet sits over the room and above the bar's top edge; the bar stays visible with More active (m0-4). */
html[data-surface="phone"] .mob-more { position: fixed; inset: 0 0 calc(var(--mob-bar) + var(--mob-home)) 0; z-index: 38; }
html[data-surface="phone"] .mob-more[hidden] { display: none; }
html[data-surface="phone"] .mob-sheet-bg { position: absolute; inset: 0; background: color-mix(in srgb, var(--ink) 42%, transparent); }
html[data-surface="phone"] .mob-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-5) calc(var(--s-5) + var(--mob-home));
  background: var(--d-raise);
  border: 1px solid var(--d-edge);
  border-bottom: 0;
  border-radius: var(--r-card) var(--r-card) 0 0;
  color: var(--ink);
}
html[data-surface="phone"] .mob-sheet-grip { width: 36px; height: 4px; margin: 0 auto; border-radius: var(--r-chip); background: var(--line); }
html[data-surface="phone"] .mob-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
html[data-surface="phone"] .mob-sheet-head .ws-sheet-x { width: var(--mob-hit); height: var(--mob-hit); margin-right: calc(-1 * var(--s-3)); font-size: var(--t-lg); }
html[data-surface="phone"] .mob-sheet-title { margin: 0; font-size: var(--t-lg); font-weight: 600; line-height: 1.4; }
html[data-surface="phone"] .mob-sheet-sub { margin: 0; font-size: var(--t-micro); color: var(--muted); line-height: 1.4; }
html[data-surface="phone"] .mob-rows { border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
html[data-surface="phone"] .mob-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: var(--mob-row);
  padding: var(--s-3) var(--s-4);
  border: 0;
  border-top: 1px solid var(--line);
  background: var(--card);
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
html[data-surface="phone"] .mob-row:first-child { border-top: 0; }
html[data-surface="phone"] .mob-row:hover { background: var(--hover); }
html[data-surface="phone"] .mob-row:focus-visible { outline: none; box-shadow: var(--focus-ring); }
html[data-surface="phone"] .mob-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
html[data-surface="phone"] .mob-row-title { font-size: var(--t-lg); font-weight: 600; line-height: 1.4; }
html[data-surface="phone"] .mob-row-chip { font-size: var(--t-micro); flex: none; }
html[data-surface="phone"] .mob-row-sub { font-size: var(--t-micro); color: var(--muted); line-height: 1.4; }
html[data-surface="phone"] .mob-row-go { color: var(--muted); font-size: var(--t-lg); flex: none; }
html[data-surface="phone"] .mob-sheet-foot { margin: 0; font-size: var(--t-micro); color: var(--muted); line-height: 1.4; }

/* Profile P1 phone sheet (p1-m1) already keys off html[data-surface="phone"] in shell.css; it rises from the bar's top edge
   so the bar stays visible and the sheet foot is never under it. */
html[data-surface="phone"] .ws-memenu { z-index: 50; bottom: calc(var(--mob-bar) + var(--mob-home)); max-height: calc(100dvh - var(--mob-top) - var(--mob-bar) - var(--mob-home)); background: var(--d-raise); border-color: var(--d-edge); }

/* ---------- PP4 FE-M2 primary jobs (Mobile-Lobby m1-1 / m3-1 / m1-4 / m1-6 family / m7-1) ---------- */
/* Rows as cards (m1-1 queue, m3-1 find): avatar initials lead, name + subline, › at the right, 56 px rows. */
html[data-surface="phone"] .ws-row-av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg2);
  color: var(--ink2);
  font-size: var(--t-sm);
  font-weight: 600;
  grid-area: av;
}
html[data-surface="phone"] .ws-row { display: flex; align-items: stretch; }
html[data-surface="phone"] .ws-row .ws-row-main {
  flex: 1;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "av name chev" "av sub chev" "av cell chev";
  gap: 0 var(--s-3);
  padding: var(--s-2) var(--s-3);
}
html[data-surface="phone"] .ws-row .ws-row-main:has(.ws-row-status) {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "av name chev" "av sub chev" "av cell chev" "av status chev";
}
html[data-surface="phone"] .ws-row-chev { font-size: 0; }
html[data-surface="phone"] .ws-row-chev::after { content: "›"; font-size: var(--t-lg); color: var(--muted); }
/* m1-1 done check: 20 px mark inside a 44 px hit; it opens the Mark done sheet (1.11), it never writes on its own. */
html[data-surface="phone"] .ws-row-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: var(--mob-hit);
  height: var(--mob-hit);
  margin-left: var(--s-2);
  border: 0;
  background: transparent;
  cursor: pointer;
}
html[data-surface="phone"] .ws-row-check-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  font-size: var(--t-sm);
  color: var(--green);
}
html[data-surface="phone"] .ws-row.is-done .ws-row-check-mark { border-color: var(--green); }
html[data-surface="phone"] .ws-row-check:focus-visible { outline: none; box-shadow: var(--focus-ring); }
html[data-surface="phone"] .ws-guests-tools { display: flex; align-items: center; gap: var(--s-2); }
html[data-surface="phone"] .ws-guests .ws-sort .ws-menu { display: none; }
html[data-surface="phone"] .ws-phone-ghosts {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
}
html[data-surface="phone"] .ws-phone-ghost {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 64px;
  padding: var(--s-2) var(--s-3) var(--s-2) var(--s-1);
  background: transparent;
  border-top: 1px solid var(--line);
}
html[data-surface="phone"] .ws-phone-ghost-hit {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--mob-hit);
  height: var(--mob-hit);
}
html[data-surface="phone"] .ws-phone-ghost-check {
  width: 20px;
  height: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  flex: none;
}
html[data-surface="phone"] .ws-phone-ghost-av {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: var(--r-chip);
  background: var(--bg2);
  flex: none;
}
html[data-surface="phone"] .ws-phone-ghost-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
html[data-surface="phone"] .ws-phone-ghost-name { display: block; width: 132px; height: 12px; background: var(--bg2); border-radius: var(--r-chip); }
html[data-surface="phone"] .ws-phone-ghost-micro { display: block; width: 208px; max-width: 100%; height: 9px; background: var(--bg2); border-radius: var(--r-chip); }
html[data-surface="phone"][data-mode="dark"] .ws-phone-ghost-av,
html[data-surface="phone"][data-mode="dark"] .ws-phone-ghost-name,
html[data-surface="phone"][data-mode="dark"] .ws-phone-ghost-micro { background: var(--d-fill); }

/* Person (m1-4): avatar + name head; the in-body back chip folds into the top bar (E67); the cards read as one column
   in the drawn order (Worship, Return signal / Connected, Household, Giving, Pastoral, Board requests). */
html[data-surface="phone"] .ws-area-back { display: none; }
html[data-surface="phone"] .ws-person-head { display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-auto-rows: auto; gap: var(--s-1) var(--s-3); align-items: center; }
html[data-surface="phone"] .ws-person-shell { display: flex; flex-direction: column; gap: var(--s-4); }
html[data-surface="phone"] .ws-person-head .ws-person-av,
html[data-surface="phone"] .ws-person-head .ws-row-av { width: 48px; height: 48px; font-size: var(--t-md); grid-column: 1; grid-row: 1 / span 3; align-self: start; background: var(--card); border: 1px solid var(--line); }
html[data-surface="phone"] .ws-person-head > :not(.ws-person-av):not(.ws-row-av) { grid-column: 2; min-width: 0; }
html[data-surface="phone"] .ws-person-facts,
html[data-surface="phone"] .ws-facts-row { display: flex; flex-wrap: wrap; gap: var(--s-1); align-items: center; }
html[data-surface="phone"] .ws-person-contact { margin: 0; overflow-wrap: anywhere; }
html[data-surface="phone"] .ws-person-name { font-family: var(--f-display); font-size: var(--t-place); }
html[data-surface="phone"] .ws-person-grid { display: flex; flex-direction: column; gap: var(--s-3); }
html[data-surface="phone"] .ws-person-parity { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); min-width: 0; }
html[data-surface="phone"] .ws-person-parity .ws-pcard { min-width: 0; }
html[data-surface="phone"] .ws-person-kv {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-top: 1px solid var(--line);
  font-size: var(--t-sm);
}
html[data-surface="phone"] .ws-person-board {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  min-height: var(--mob-row);
  padding: var(--s-2) 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  font: inherit;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}
html[data-surface="phone"] .ws-person-board:disabled { color: var(--muted); cursor: default; }
/* Acts as rows (m1-4): name + subline, › at the right, 56 px. */
html[data-surface="phone"] .ws-acts { gap: 0; padding: 0 var(--s-4); }
html[data-surface="phone"] .ws-acts .ws-card-eyebrow { display: none; }
html[data-surface="phone"] .ws-act,
html[data-surface="phone"] .ws-act--primary,
html[data-surface="phone"] .ws-acts .ws-act.ws-act--primary {
  background: transparent;
  color: inherit;
  border-color: transparent;
}
html[data-surface="phone"] .ws-twin-gold { border-color: var(--gold); }
html[data-surface="phone"] .ws-act {
  position: relative;
  min-height: var(--mob-row);
  justify-content: center;
  padding: var(--s-2) var(--s-6) var(--s-2) 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}
html[data-surface="phone"] .ws-act::after { content: "›"; position: absolute; right: var(--s-2); top: 50%; transform: translateY(-50%); font-size: var(--t-lg); color: var(--muted); }
html[data-surface="phone"] .ws-act-name { font-size: var(--t-md); }
html[data-surface="phone"] .ws-act-sub { font-size: var(--t-sm); }
html[data-surface="phone"] .ws-act-sub .ws-chip { margin-left: var(--s-1); }
html[data-surface="phone"] .ws-acts-foot { padding: var(--s-3) 0; border-top: 1px solid var(--line); }

/* Note stage (m1-6) and confirm family (m1-6k / m1-6d / m1-6b / m1-6c / m1-6y): the sheet fills the phone above the
   bar; the staged acard stays in the DOM as the write surface but the drawn confirm card is what the staffer sees. */
html[data-surface="phone"] .ws-sheet {
  left: 0;
  right: 0;
  bottom: max(calc(var(--mob-bar) + var(--mob-home)), var(--vv-bottom-inset, 0px));
  width: auto;
  max-height: calc(100dvh - var(--mob-top) - var(--mob-bar) - var(--mob-home));
  border-radius: var(--r-card) var(--r-card) 0 0;
  z-index: 36;
}
html[data-surface="phone"] .ws-sheet-head { align-items: flex-start; }
html[data-surface="phone"] .ws-sheet-head .ws-sheet-x { width: var(--mob-hit); height: var(--mob-hit); }
html[data-surface="phone"] .ws-sheet-sub { margin: var(--s-1) 0 0; }
html[data-surface="phone"] .ws-sheet-form .ws-seg { display: flex; }
html[data-surface="phone"] .ws-sheet-form .ws-seg-opt { flex: 1; text-align: center; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; }
html[data-surface="phone"] .ws-sheet-acts { flex-direction: column-reverse; }
html[data-surface="phone"] [data-kind="thank"] .ws-sheet-acts { flex-direction: column; }
html[data-surface="phone"] .ws-sheet-acts .btn { width: 100%; }
html[data-surface="phone"] #wsSheet .ws-field,
html[data-surface="phone"] #wsSheet .ws-field input,
html[data-surface="phone"] #wsSheet .ws-field textarea,
html[data-surface="phone"] #wsSheet .ws-field select,
html[data-surface="phone"] #wsSheet .ws-sheet-acts { max-width: 100%; min-width: 0; }
/* FE-M3: only the note stage hides its acard behind the drawn confirm card (m1-6k); every other sheet (5.2 pursuit, 1.5, 1.10, 1.11)
   keeps the staged acard as its visible Approve (FE-M2 hid it for all sheets; corrected here). */
html[data-surface="phone"] .ws-sheet[data-kind="note"] .ws-sheet-stage .acard { display: none; }
html[data-surface="phone"] .ws-phone-confirm { margin-top: var(--s-2); }
html[data-surface="phone"] .ws-sheet-readcard { padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--bg2); }
html[data-surface="phone"] .ws-sheet-readchips { margin: 0 0 var(--s-2); display: flex; gap: var(--s-2); flex-wrap: wrap; }
html[data-surface="phone"] .ws-sheet-readcaption { margin: 0 0 var(--s-1); font-weight: 600; font-size: var(--t-md); color: var(--ink); }
html[data-surface="phone"] .ws-sheet-readtext { margin: 0 0 var(--s-2); font-size: var(--t-md); color: var(--ink); line-height: 1.45; white-space: pre-wrap; }
html[data-surface="phone"] .ws-twin-acts-stack { flex-direction: column; align-items: stretch; }
html[data-surface="phone"] .ws-twin-acts-stack .btn { width: 100%; }
html[data-surface="phone"] .ws-twin-denied { border-color: var(--gold); }
html[data-surface="phone"] .ws-sheet-copy-line[hidden] { display: none; }

/* Ask tab (m7-1 / m7-1a): head "Now on …" + the scope segment on its own line; composer 44 px (E66). */
html[data-surface="phone"] .ws-rail-head { flex-wrap: wrap; }
html[data-surface="phone"] .ws-rail-head-seg { width: auto; max-width: 100%; }
html[data-surface="phone"] .ws-rail-head-seg .ws-seg { width: auto; }
html[data-surface="phone"] .ws-rail-scope-seg { flex-basis: auto; display: inline-flex; width: auto; margin-top: var(--s-2); overflow: hidden; }
html[data-surface="phone"] .ws-rail-scope-seg .ws-seg-opt { flex: none; text-align: center; min-height: 24px; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
/* m7-1 A-04: one 44 px field. Hide the desktop float label. Trailing Ask in ember when there is text. */
html[data-surface="phone"] .ws-chat-col .ws-ask { flex-direction: row; align-items: stretch; gap: 0; min-height: var(--mob-hit); padding: 0; border-radius: var(--r-card); }
html[data-surface="phone"] .ws-app.is-workflow-home .ws-stage.is-empty .ws-ask,
html[data-surface="phone"] .ws-app.is-workflow-home .ws-stage:not(.is-empty) .ws-ask { min-height: var(--mob-hit); border-radius: var(--r-card); }
html[data-surface="phone"] .ws-app.is-workflow-home .ws-stage.is-empty .ws-center { padding-bottom: var(--s-2); }
html[data-surface="phone"] .ws-chat-col .ws-field--float {
  flex-direction: row;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  min-height: var(--mob-hit);
  height: var(--mob-hit);
  padding: 0 var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
}
html[data-surface="phone"] .ws-chat-col .ws-field--float > [data-role="ask-field-label"] { display: none; }
html[data-surface="phone"] .ws-chat-col .ws-field--float input {
  flex: 1;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 16px;
}
html[data-surface="phone"] .ws-chat-col .ws-field--float:focus-within {
  outline: none;
  border-color: var(--ember);
  box-shadow: 0 0 0 2px var(--ember);
}
html[data-surface="phone"] .ws-chat-col .ws-ask-go {
  display: none;
  flex: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ember);
  font: inherit;
  font-size: var(--t-md);
  font-weight: 500;
  cursor: pointer;
}
html[data-surface="phone"] .ws-chat-col .ws-ask-go:not([hidden]) { display: inline-flex; align-items: center; }
html[data-surface="phone"] .ws-chat-col textarea { height: var(--mob-hit); min-height: var(--mob-hit); max-height: 120px; padding: var(--s-3) var(--s-3); line-height: 1.3; }
html[data-surface="phone"] .ws-chat-col #askInput { min-height: 0; height: 100%; font-size: 16px; }
html[data-surface="phone"] .ws-chat-col .ws-ask-toolbar { min-height: 0; gap: 0; }
html[data-surface="phone"] .ws-chat-col .ws-ask-tools { display: none; }
html[data-surface="phone"] .ws-thread .draftcard-head { flex-wrap: wrap; }
html[data-surface="phone"] .draftcard-by { margin-left: auto; }

/* ---------- PP4 FE-M3 secondary rooms + honest moments (Mobile-Lobby m5-1 / m5-3 / m6-1 / m8-2 / m8-1s / m2-2r / m2-1x) ---------- */
/* E69: phone chips are sentence case as drawn (Desktop, Requested, Read only, Note 31 · pastoral); one chip primitive, restyled. */
html[data-surface="phone"] .ws-chip,
html[data-surface="phone"] .ws-twin .pill,
html[data-surface="phone"] .ws-pcard .pill { text-transform: none; letter-spacing: normal; }
/* Rows as cards for the secondary rooms: the column head folds away, each row is one card with 56 px minimum. */
html[data-surface="phone"] .ws-rows-cards .ws-row-head,
html[data-surface="phone"] .ws-rows-chase .ws-row-head,
html[data-surface="phone"] .ws-rows-groups .ws-row-head,
html[data-surface="phone"] .ws-rows-run .ws-row-head,
html[data-surface="phone"] .ws-rows-span .ws-row-head,
html[data-surface="phone"] .ws-rows-list .ws-row-head,
html[data-surface="phone"] .ws-rows-finder .ws-row-head,
html[data-surface="phone"] .ws-rows-requests .ws-row-head,
html[data-surface="phone"] .ws-rows-boards .ws-row-head,
html[data-surface="phone"] .ws-trow--head { display: none; }
html[data-surface="phone"] .ws-row-run,
html[data-surface="phone"] .ws-row-span,
html[data-surface="phone"] .ws-row-list,
html[data-surface="phone"] .ws-row-finder,
html[data-surface="phone"] .ws-row-request:not(.ws-row-groups),
html[data-surface="phone"] .ws-row-board { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); min-height: var(--mob-row); padding: var(--s-2) var(--s-3); }
html[data-surface="phone"] .ws-row-run .ws-row-cell,
html[data-surface="phone"] .ws-row-span .ws-row-cell,
html[data-surface="phone"] .ws-row-list .ws-row-cell,
html[data-surface="phone"] .ws-row-finder .ws-row-cell,
html[data-surface="phone"] .ws-row-run .ws-tcell,
html[data-surface="phone"] .ws-row-span .ws-tcell,
html[data-surface="phone"] .ws-row-finder .ws-tcell,
html[data-surface="phone"] .ws-row-request:not(.ws-row-groups) .ws-row-cell,
html[data-surface="phone"] .ws-row-board .ws-row-cell { flex: 1 1 100%; min-width: 0; font-size: var(--t-sm); }
html[data-surface="phone"] .ws-row-run .ws-row-cell:first-child,
html[data-surface="phone"] .ws-row-span .ws-row-cell:first-child,
html[data-surface="phone"] .ws-row-list .ws-row-cell:first-child,
html[data-surface="phone"] .ws-row-finder .ws-row-cell:first-child,
html[data-surface="phone"] .ws-row-run .ws-tcell:first-child,
html[data-surface="phone"] .ws-row-span .ws-tcell:first-child,
html[data-surface="phone"] .ws-row-finder .ws-tcell:first-child,
html[data-surface="phone"] .ws-row-request:not(.ws-row-groups) .ws-row-cell:first-child,
html[data-surface="phone"] .ws-row-board .ws-row-cell:first-child { font-size: var(--t-md); }
/* Lists m8-2: thin catalog — name + micro + Run 36 px; no span card, tabs, or column heads. */
html[data-surface="phone"] .ws-lists-span,
html[data-surface="phone"] .ws-list-tabs,
html[data-surface="phone"] .ws-lists-head,
html[data-surface="phone"] .ws-table .ws-thead { display: none; }
html[data-surface="phone"] .ws-lists .ws-search-field { margin-bottom: var(--s-3); }
html[data-surface="phone"] .ws-row-list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--mob-row);
  padding: var(--s-2) var(--s-3);
}
html[data-surface="phone"] .ws-row-list .ws-row-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
html[data-surface="phone"] .ws-lists-name { display: block; font-size: var(--t-md); font-weight: 600; }
html[data-surface="phone"] .ws-lists-micro { display: block; font-size: var(--t-sm); color: var(--ink2); }
html[data-surface="phone"] .ws-row-list .ws-row-act { flex: none; }
html[data-surface="phone"] .ws-row-list .ws-btn {
  min-height: 36px;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
}
/* Lists m8-2: saving a new DataView is desktop only; the disabled Save act folds away and the foot names it. */
html[data-surface="phone"] .ws-twin-acts:has([data-role="lists-save"]) { display: none; }
/* Chase m5-1 / m5-1w: avatar, name, subline, then one control row (owner · status ▾ · date ▾ · Done); the stage and the
   one-per-session micro line sit under it. Selects and links meet the 44 px hit. */
html[data-surface="phone"] .ws-row-chase {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) var(--mob-hit);
  grid-template-areas: "av name chev" "av sub chev" "ctl ctl ctl" "stage stage stage" "micro micro micro";
  gap: 0 var(--s-3);
  align-items: center;
  padding: var(--s-2) var(--s-3);
}
html[data-surface="phone"] .ws-row-chase .ws-row-av { grid-area: av; align-self: start; }
html[data-surface="phone"] .ws-row-chase .ws-row-name { grid-area: name; font: inherit; font-weight: 600; font-size: var(--t-md); color: var(--ink); background: transparent; border: 0; padding: 0; text-align: left; cursor: pointer; }
html[data-surface="phone"] .ws-row-chase .ws-row-sub { grid-area: sub; font-size: var(--t-sm); color: var(--muted); line-height: 1.4; }
html[data-surface="phone"] .ws-row-chase .ws-row-chev { grid-area: chev; width: var(--mob-hit); height: var(--mob-hit); border: 0; background: transparent; cursor: pointer; }
html[data-surface="phone"] .ws-row-chase .ws-row-ctl { grid-area: ctl; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-2); }
html[data-surface="phone"] .ws-row-chase .ws-row-ctl .ws-row-cell { display: inline-flex; align-items: center; min-height: var(--mob-hit); font-size: var(--t-sm); }
html[data-surface="phone"] .ws-row-chase .ws-row-ctl .ws-link { min-height: var(--mob-hit); display: inline-flex; align-items: center; padding: 0 var(--s-2); }
html[data-surface="phone"] .ws-row-select { min-height: var(--mob-hit); max-width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-chip); padding: 0 var(--s-2); }
html[data-surface="phone"] .ws-row-chase .ws-row-stage { grid-area: stage; }
html[data-surface="phone"] .ws-row-chase .ws-row-micro { grid-area: micro; margin: var(--s-1) 0 0; font-size: var(--t-micro); color: var(--muted); }
/* Place m5-3 family: request row as a card with the Requested / Placing / Placed chip; the Place card under it keeps the
   native group select and one Place act; the twins stack in the row stage. */
html[data-surface="phone"] .ws-row-groups {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  grid-template-areas: "av name status" "av sub status" "place place place" "stage stage stage";
  gap: 0 var(--s-3);
  align-items: center;
  padding: var(--s-2) var(--s-3);
}
html[data-surface="phone"] .ws-row-groups .ws-row-av { grid-area: av; align-self: start; }
html[data-surface="phone"] .ws-row-groups .ws-row-name { grid-area: name; font: inherit; font-weight: 600; font-size: var(--t-md); color: var(--ink); background: transparent; border: 0; padding: 0; text-align: left; cursor: pointer; }
html[data-surface="phone"] .ws-row-groups .ws-row-status { grid-area: status; align-self: start; }
html[data-surface="phone"] .ws-row-groups .ws-row-sub { grid-area: sub; font-size: var(--t-sm); color: var(--muted); line-height: 1.4; }
html[data-surface="phone"] .ws-row-groups .ws-place-card { grid-area: place; display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-3); padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--bg2); }
html[data-surface="phone"] .ws-place-title { margin: 0; font-size: var(--t-md); font-weight: 600; }
html[data-surface="phone"] .ws-place-card .ws-place { display: flex; flex-direction: column; gap: var(--s-1); }
html[data-surface="phone"] .ws-place-card select { min-height: var(--mob-hit); font: inherit; font-size: 16px; }
html[data-surface="phone"] .ws-place-card .btn { min-height: var(--mob-hit); width: 100%; }
html[data-surface="phone"] .ws-row-groups .ws-row-stage { grid-area: stage; }
html[data-surface="phone"] .ws-place-twin .ws-dots { color: var(--muted); }
/* Finder m6-1: the honest desktop card leads; configs are read-only rows (name, chip, signals · tiers). */
html[data-surface="phone"] .mob-desktop-moment { padding: var(--s-4); }
html[data-surface="phone"] .ws-row-finder-config {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name status" "sub status";
  gap: 0 var(--s-3);
  align-items: center;
  min-height: var(--mob-row);
  padding: var(--s-2) var(--s-3);
}
html[data-surface="phone"] .ws-row-finder-config .ws-row-name { grid-area: name; font-size: var(--t-md); }
html[data-surface="phone"] .ws-row-finder-config .ws-row-status { grid-area: status; }
html[data-surface="phone"] .ws-row-finder-config .ws-row-sub { grid-area: sub; font-size: var(--t-sm); color: var(--muted); }
/* Home resume m2-2r and the gate's kept-draft card m2-1x (D-P19). */
html[data-surface="phone"] .ws-home-resume:not([hidden]), html[data-surface="phone"] .mob-gate-draft:not([hidden]) { display: block; }
html[data-surface="phone"] .mob-resume, html[data-surface="phone"] .mob-gate-card { padding: var(--s-4); margin-bottom: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); }
html[data-surface="phone"] .mob-resume-title { margin: 0 0 var(--s-1); font-size: var(--t-lg); font-weight: 600; }
html[data-surface="phone"] .mob-gate-card .ws-sheet-readcard { margin: var(--s-3) 0; }
/* Room tabs on phone (5.1 channel toggle + Mine / Campus / Assigned, 5.3 board tabs): wrap into segments, 32 px minimum. */
html[data-surface="phone"] .ws-area-top .ws-tabs { display: flex; flex-wrap: wrap; gap: var(--s-2); }
html[data-surface="phone"] .ws-area-top .ws-tab { min-height: 32px; }
/* The staged acard in a row stage (5.3 Place) reads as a card on the phone; its Approve / Discard stay the write surface. */
html[data-surface="phone"] .ws-row-stage .acard { margin-top: var(--s-2); padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); }
html[data-surface="phone"] .ws-row-stage .acard .btn { min-height: var(--mob-hit); }

/* ---------- MOBILE-SYS (S-03..S-13, N-01 primitives) ---------- */
html[data-surface="phone"] .ws-grid,
html[data-surface="phone"] .ws-dcard,
html[data-surface="phone"] .ws-hcard,
html[data-surface="phone"] .ws-row,
html[data-surface="phone"] .ws-pcard { min-width: 0; }
html[data-surface="phone"] .ws-grid--2 { grid-template-columns: 1fr 1fr; }
html[data-surface="phone"] .ws-grid--3,
html[data-surface="phone"] .ws-grid--4 { grid-template-columns: 1fr 1fr; }
html[data-surface="phone"] .ws-seg { overflow: hidden; flex-wrap: nowrap; }
html[data-surface="phone"] .ws-seg-opt,
html[data-surface="phone"] .ws-seg-item { white-space: nowrap; font-size: 12px; min-height: 32px; }
html[data-surface="phone"] .ws-pcard .ws-seg,
html[data-surface="phone"] .ws-person .ws-seg { overflow: hidden; }
html[data-surface="phone"] .ws-pcard .ws-seg-opt,
html[data-surface="phone"] .ws-person .ws-seg-opt { min-height: 24px; font-size: 12px; }
html[data-surface="phone"] .ws-place-head .ws-place-title,
html[data-surface="phone"] .ws-search-field {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  height: var(--mob-hit);
  padding: 0 var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
}
html[data-surface="phone"] .ws-search:focus-within .ws-search-field {
  border-color: var(--ember);
  box-shadow: 0 0 0 2px var(--ember);
}
html[data-surface="phone"] .ws-search-q {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
}
html[data-surface="phone"] .ws-search-q:focus { outline: none; }
html[data-surface="phone"] .ws-search-filters,
html[data-surface="phone"] .ws-search-head { display: none; }
html[data-surface="phone"] .ws-search-table .ws-search-row {
  display: flex;
  grid-template-columns: none;
  gap: var(--s-3);
}
html[data-surface="phone"] .ws-search-who { flex: 1; min-width: 0; }
html[data-surface="phone"] .ws-search-who .ws-q-av { width: 40px; height: 40px; }
html[data-surface="phone"] .ws-search-cell[data-cell="mobile"],
html[data-surface="phone"] .ws-search-cell[data-cell="email"],
html[data-surface="phone"] .ws-search-cell[data-cell="campus"],
html[data-surface="phone"] .ws-search-cell[data-cell="signals"] { display: none; }
html[data-surface="phone"] .ws-search-open { flex: none; }
html[data-surface="phone"] .ws-search-title,
html[data-surface="phone"] .ws-guests-title,
html[data-surface="phone"] .ws-groups-title,
html[data-surface="phone"] .ws-area-h { display: none; }
html[data-surface="phone"] .ws-row-name,
html[data-surface="phone"] .ws-search-name { font-family: var(--f-display); font-size: var(--t-name); font-weight: 500; }
html[data-surface="phone"] .ws-acts {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  padding: 0;
}
html[data-surface="phone"] .ws-acts .ws-card-eyebrow,
html[data-surface="phone"] .ws-acts-foot { padding-left: var(--s-4); padding-right: var(--s-4); }
html[data-surface="phone"] .ws-act { padding-left: var(--s-4); }
html[data-surface="phone"] .ws-home .ws-busy-line,
html[data-surface="phone"] .ws-person .ws-busy-line { display: none; }
html[data-surface="phone"] .ws-pcard .pill { background: var(--card); border: 1px solid var(--line); color: var(--ink2); }
html[data-surface="phone"] .ws-pcard .pill.gold { background: var(--card); border: 1px solid var(--gold); color: var(--gold); }
html[data-surface="phone"] .ws-pcard .pill.green { background: transparent; border: 1px solid var(--green); color: var(--green); }
html[data-surface="phone"] .ws-pcard-locked { border-style: solid; }
html[data-surface="phone"] .mob-desktop-moment { border-style: dashed; }
html[data-surface="phone"] .ws-sort > .ws-btn {
  background: var(--card);
  color: var(--ink2);
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  min-height: 20px;
  font-size: var(--t-micro);
  font-weight: 500;
}
html[data-surface="phone"] .ws-field:focus-within,
html[data-surface="phone"] .ws-field:focus-within input,
html[data-surface="phone"] .ws-field:focus-within textarea,
html[data-surface="phone"] .ws-field:focus-within select,
html[data-surface="phone"] .ws-chat-col #askInput:focus,
html[data-surface="phone"] .ws-chat-col #askInput:focus-visible {
  border-color: var(--ember);
  box-shadow: 0 0 0 2px var(--ember);
  outline: none;
}
html[data-surface="phone"] .ws-pcard { width: 100%; }
html[data-surface="phone"] .btn:not(.primary):not(.ghost) { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
html[data-surface="phone"] .btn.ghost { background: transparent; color: var(--ink2); }
html[data-surface="phone"] [data-action="volunteers-remind-desktop"].btn.primary {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
}
html[data-surface="phone"] .ws-hcard-locked {
  background: var(--card);
  color: var(--gold);
  border: 1px solid var(--gold);
}

/* Gate (m2-1 / p1-m2 / p1-m7): no room chrome; the static foot says "desk" and must not appear on phone. */
html[data-surface="phone"] body.is-signed-out .ws-hdr,
html[data-surface="phone"] body.is-signed-out .mob-bar { display: none; }
html[data-surface="phone"] .signin-form-foot { display: none; }
html[data-surface="phone"] #signin button#siBtn { height: var(--mob-hit); min-height: var(--mob-hit); }