/* More (#/more) and Inbox (#/inbox, #/inbox/:app), from r3prep/more-inbox/html/mi.css. Linked after css/routes.css (both after css/steps.css).
   Tokens only (app.css), so dark mode keeps working. No shadows except the selected segment. The bull wait screen is not here: it is
   PlonaChrome.bullwait, styled in /css/chrome.css (round 3A plan C3).
   Icons are PlonaChrome.icon(name, cls) (24 viewBox, stroke 1.9): the class lands on the <svg>; these rules only size and color it. */

/* ---------- More ---------- */
.mo{max-width:640px;margin:0 auto;padding:14px 16px 32px}
.mo-prof{display:flex;align-items:center;gap:14px;padding:6px 8px 6px 4px;margin:0 -4px;min-height:80px;color:var(--ink);text-decoration:none;border-radius:var(--r-lg)}
.mo-prof:hover{background:var(--wait)}
.mo-prof .pav{width:64px;height:64px;font-size:26px;background-color:var(--tint);color:var(--ot)}
.mo-pn{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.mo-name{font:600 24px/1.15 'Clash Grotesk','Instrument Sans',sans-serif;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mo-view{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:15px;font-weight:600;color:var(--ot)}
.mo-view u{text-underline-offset:3px}
.mo-view .tag{font-size:12px}
.mo-ic{flex:none;display:block;width:24px;height:24px;color:var(--ink)}
.mo-chev{flex:none;display:block;width:20px;height:20px;color:var(--sub);transition:transform .15s}
.mo-grp{margin-top:18px}
.mo-gh{font:700 12px/1.2 'Instrument Sans',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--sub);margin:0 4px 8px}
.mo-list{list-style:none;margin:0;padding:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.mo-list>li+li{border-top:1px solid var(--line)}
.mo-row{display:flex;align-items:center;gap:14px;width:100%;min-height:60px;padding:10px 14px 10px 16px;color:var(--ink);text-decoration:none;background:none;border:0;font:inherit;text-align:left;cursor:pointer}
.mo-row:hover{background:var(--wait)}
.mo-row:focus-visible{outline-offset:-3px}
.mo-t{flex:1;min-width:0;display:flex;flex-direction:column}
.mo-t b{font-weight:600;font-size:16px;line-height:1.3}
.mo-t span{font-size:13.5px;color:var(--sub);line-height:1.35}
.mo-row[aria-expanded=true] .mo-chev.dn{transform:rotate(180deg)}
.mo-pane{padding:0 16px 14px 54px}
.mo-pane[hidden]{display:none}
.mo-pl{list-style:none;margin:0;padding:0}
.mo-pl li{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-top:1px dashed var(--line)}
.mo-pl li:first-child{border-top:0}
.mo-pl .mo-ic{width:20px;height:20px;margin-top:2px;color:var(--sub)}
.mo-pl b{display:block;font-size:14.5px}
.mo-pl a{color:var(--ot);font-weight:600}
.mo-pl .mo-link{display:inline-flex;align-items:center;min-height:44px;margin:-10px 0}
.mo-pl p{font-size:14.5px;line-height:1.4}
.mo-pl .pill{padding:2px 10px;font-size:12px;margin-left:6px;vertical-align:1px}
.mo-pl .mo-ask{margin:-6px 0 -10px -6px;color:var(--ot)}
.mo-who{text-align:center;margin-top:22px;overflow-wrap:anywhere}
.mo-out{margin-top:8px}
.mo-oi{flex:none;display:block;width:20px;height:20px}
/* signed out: the log in card */
.mo-join{background:var(--tint);border:1px solid var(--tint-line);border-radius:var(--r-lg);padding:16px}
.mo-jt{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.mo-jt img{flex:none;width:56px;height:56px}
.mo-jt h2{font-size:21px}
.mo-jt p{font-size:15px;color:var(--sub);margin-top:2px}
.mo-join .mo-jl{margin-top:10px;background:var(--card)}
/* signed out: the owner tile under the log in card (account first: it opens the one-page sign-up, then the post flow) */
.mo-own{margin-top:12px}
.mo-oc{width:40px;height:40px;padding:8px;border-radius:50%;background:var(--tint);color:var(--ot)}

/* ---------- the mode switch (More, signed in; mode changes 2026-10-09) ----------
   Labeled with the OTHER mode, in that mode's role color (PRD-37: switching is a choose-a-side moment): owner orange, driver black.
   It carries the other mode's count, the same number as the More tab's badge. */
.mo-sw{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;margin-top:12px;padding:10px 14px 10px 16px;border:0;border-radius:var(--r-lg);
  font:700 17px/1.25 'Instrument Sans',sans-serif;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mo-sw.to-owner{background:var(--ob);color:#fff}
.mo-sw.to-driver{background:var(--ink);color:var(--bg)}
.mo-sw:hover{filter:brightness(1.12)}
.mo-sw:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.mo-sw.to-driver:focus-visible{outline-color:var(--orange)}
.mo-swi{flex:none;display:block;width:26px;height:26px}
.mo-swt{flex:1;min-width:0}
.mo-swb{flex:none;min-width:24px;height:24px;padding:0 7px;border-radius:12px;font:700 13px/24px 'Instrument Sans',sans-serif;text-align:center}
.mo-swb[hidden]{display:none}
.mo-sw.to-owner .mo-swb{background:#fff;color:var(--ob)}
.mo-sw.to-driver .mo-swb{background:var(--ob);color:#fff}
.mo-sw .mo-chev{color:inherit;opacity:.85}
.mo-sw[aria-busy=true]{opacity:.7;cursor:progress}
/* founder 2026-10-09: before the first listing, the same spot is "List your car" (a link to the posting steps) with one line under it */
a.mo-sw{text-decoration:none}
.mo-swn{margin:6px 4px 0;font-size:13.5px;line-height:1.35;color:var(--sub)}
/* not known yet whether they have listed (a new device, for a moment): a blank of the same size, so nothing jumps when the button comes */
.mo-swph{background:var(--wait)}
/* team mode (3.4.2, team-mode-design 8.5 and 10.4): one switch per other mode, in a fixed order (driver, owner, team); team blue for
   team mode; a badge at a row's end is part of the More tab's number, text at a row's end is news counted elsewhere (Board) */
.mo-sws{margin-top:12px}.mo-sws>.mo-sw:first-child{margin-top:0}.mo-sws .mo-sw+.mo-sw,.mo-sws .mo-swn+.mo-sw{margin-top:8px}
.mo-sw.to-team{background:var(--team);color:#fff}
.mo-sw.to-team:hover{background:var(--team-h);filter:none}
.mo-sw.to-team .mo-swb{background:#fff;color:var(--team)}
.mo-sw.to-team:focus-visible{outline-color:var(--team)}
.mo-rb{flex:none;min-width:24px;height:24px;padding:0 7px;border-radius:12px;background:var(--ob);color:#fff;font:700 13px/24px 'Instrument Sans',sans-serif;text-align:center}
.mo-rb[hidden]{display:none}
.mo-rn{flex:none;font-size:13.5px;font-weight:600;color:var(--ot);white-space:nowrap}
.mo-t span b.mo-new{font-size:13.5px;font-weight:700;color:var(--ot)}
.mo-lvl{font-size:14px;line-height:1.3;color:var(--sub);overflow-wrap:anywhere}

/* ---------- Inbox ---------- */
div.ib{max-width:720px;margin:0 auto;padding:14px 16px 32px}   /* div only: kit.js info buttons are .cp-i.ib (part2.css) */
.ib-h1{font-size:28px;margin:0 0 12px}
.ib-seg{display:flex;gap:4px;padding:4px;background:var(--wait);border-radius:12px}
.ib-seg [role=tab]{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 8px;border:0;border-radius:9px;background:transparent;color:var(--sub);font:600 15.5px 'Instrument Sans',sans-serif;cursor:pointer;white-space:nowrap}
.ib-seg [role=tab]:hover{color:var(--ink)}
@media(max-width:299px){.ib-seg{flex-direction:column}.ib-seg [role=tab]{flex:none;white-space:normal}}   /* 200% zoom (195px): the two tabs stack */
.ib-seg [aria-selected=true]{background:var(--card);color:var(--ink);font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.ib-n{display:inline-block;min-width:22px;height:22px;padding:0 7px;border-radius:11px;background:var(--ob);color:#fff;font:700 12px/22px 'Instrument Sans',sans-serif;text-align:center}
.ib-n[hidden]{display:none}
.ib-panel{margin-top:14px}
.ib-panel[hidden]{display:none}
.ib-list{list-style:none;margin:0;padding:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.ib-list>li+li{border-top:1px solid var(--line)}
/* a conversation row */
.ib-row{display:flex;gap:12px;align-items:flex-start;padding:14px;min-height:84px;color:var(--ink);text-decoration:none}
.ib-row:hover{background:var(--wait)}
.ib-row:focus-visible{outline-offset:-3px}
.ib-row .pav{width:48px;height:48px;background-color:var(--tint);color:var(--ot)}
.ib-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ib-top{display:flex;align-items:baseline;gap:8px;min-width:0}
.ib-top b{font-weight:600;font-size:16.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ib-role{flex:none;font-size:12px;font-weight:700;color:var(--sub);background:var(--wait);border-radius:99px;padding:1px 8px}
.ib-test{flex:none;font-size:12px;font-weight:700;color:var(--warn-d);background:var(--warn-bg);border:1px dashed var(--warn-d);border-radius:99px;padding:0 8px}   /* 0196: a conversation about a test route (the tester mark), on the row only */
.ib-time{flex:none;margin-left:auto;font-size:13px;color:var(--sub);white-space:nowrap}
.ib-route{font-size:13.5px;color:var(--sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ib-last{font-size:15px;color:var(--sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ib-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--ob);align-self:center;margin-left:2px}
.ib-dot.off{background:transparent}
.ib-row.unread .ib-top b{font-weight:700}
.ib-row.unread .ib-time{color:var(--ot);font-weight:700}
.ib-row.unread .ib-last{color:var(--ink);font-weight:600}
/* notifications */
.ib-ntop{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px 2px}
.ib-ntop .small b{color:var(--ink)}
.ib-alert{display:flex;align-items:center;gap:12px;margin-bottom:12px;padding:10px 10px 10px 14px;background:var(--tint);border:1px solid var(--tint-line);border-radius:var(--r-md);font-size:14.5px;line-height:1.35}
.ib-alert p{flex:1;min-width:0}
.ib-alert .btn{flex:none}
.ib-note{display:flex;align-items:flex-start;transition:transform .2s;touch-action:pan-y;background:var(--card)}
.ib-note.unread{box-shadow:inset 4px 0 0 var(--ob)}
.ib-nlink{flex:1;min-width:0;display:flex;gap:12px;padding:14px 4px 14px 16px;color:var(--ink);text-decoration:none;background:none;border:0;font:inherit;text-align:left;cursor:pointer}
.ib-nlink:hover{background:var(--wait)}
.ib-nlink:focus-visible{outline-offset:-3px}
.ib-nic{flex:none;width:38px;height:38px;padding:9px;border-radius:50%;background:var(--wait);color:var(--sub);display:inline-flex}
.ib-nic svg{display:block;width:20px;height:20px}
.ib-note.unread .ib-nic{background:var(--tint);color:var(--ot)}
.ib-nm{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ib-cat{font-size:12.5px;font-weight:600;color:var(--sub)}
.ib-note.unread .ib-cat{color:var(--ot)}
.ib-nm b{font-size:15.5px;line-height:1.3;font-weight:500}
.ib-note.unread .ib-nm b{font-weight:700}
.ib-nb{font-size:14px;line-height:1.4;color:var(--sub);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ib-note .nx{margin:6px 4px 0 0}
.ib-note.going{background:var(--bad-bg)}
.ib-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
.ib-foot a{font-weight:600;color:var(--ink);display:inline-flex;align-items:center;min-height:44px;padding:0 6px}
/* empty states: the bull in a soft circle, a small line drawing and one line of words */
.ib-empty{text-align:center;padding:36px 16px 20px}
.ib-pic{position:relative;width:116px;height:116px;margin:0 auto 16px;border-radius:50%;background:var(--tint);display:flex;align-items:center;justify-content:center}
.ib-pic img{width:68px;height:68px;display:block}
.ib-pic .ib-art{position:absolute;right:-10px;top:-2px;width:50px;height:50px}
.ib-pic .bub{fill:var(--card);stroke:var(--ob);stroke-width:2.4;stroke-linejoin:round}
.ib-pic .dot{fill:var(--ob)}
.ib-pic .ln{fill:none;stroke:var(--ob);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ib-pic .ray{fill:none;stroke:var(--orange);stroke-width:2.4;stroke-linecap:round}
.ib-empty p{font-size:16.5px;line-height:1.45;max-width:28ch;margin:0 auto}

/* ---------- one conversation (#/inbox/:app) ---------- */
.ic{max-width:720px;margin:0 auto;padding:4px 16px 0}
/* the conversation head is the shared page head (.phead.ic-ph in part2.css): Back alone, then the name, the relation line, the one link, the photo */
.ic-room{display:inline-flex;align-items:center;min-height:44px;margin:-8px 0 -12px;font-size:14.5px;font-weight:600;color:var(--ot)}
.ic .thread .msgs{max-height:none;min-height:0;overflow:visible;padding:12px 0 4px}
.ic .thread .msg{align-self:flex-start;max-width:min(85%,560px)}
.ic .thread .msg.me{align-self:flex-end}
.ic .thform{position:sticky;bottom:0;background:var(--bg);padding:8px 0 calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.ic .chatnote{margin:10px 0 0;text-align:center}

@media (prefers-reduced-motion:reduce){.mo-chev,.ib-note{transition:none}}

/* ===== manual-note (apply-design, round 2b): the Manual transmission page and the Inbox list rows ===== */
/* ---------- 4. the Manual transmission page (#/settings/manual), under page-tops' head ---------- */
.mn-set{max-width:560px;margin:0 auto;padding:8px 16px 32px}
.mn-q{font-size:17px;line-height:1.4;margin:0 0 14px}
.mn-set .savedst{margin:12px 0 6px}
.mn-why{margin-top:12px}
/* ---------- 7. Inbox > Messages, the list (founder 2026-10-10). Goes to app/css/more-inbox.css next to the .ib-row rules (94 to 109).
   One row per conversation: photo or initial, name and time, the relation and route, a one-line preview, the unread dot. The relation
   word replaces the role chip (.ib-role) on the row and in the conversation head. ---------- */
.ib-route .ib-rel{font-weight:700;color:var(--ink)}
.ib-row.unread .ib-route .ib-rel{color:var(--ot)}
.ib-last .ib-you{color:var(--sub);font-weight:500}
.ib-fn{margin:14px 4px 0;text-align:center;line-height:1.4}
.ib-row .pav.has{background:var(--wait)}
.ic-ph .phead-sub .ib-rel{font-weight:700;color:var(--ink)}   /* the conversation head: the same relation line as its row */
/* the clock after Pending, Pending owner payment and Offer for you (inbox.js relLine): the row and the conversation head */
.ib-route .ib-clk,.ic-ph .phead-sub .ib-clk{display:inline-flex;vertical-align:-3px;margin-left:4px;color:var(--ot)}
.ib-clk svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}