/* Shell (owner: shell UI): top-bar chrome, plus the shell screens home, login, join, account, share and info.
   Built on the tokens and components in base.css. Phones first; targets ≥ 48 px, main actions 56 px (docs/architecture.md 12.1).
   Scoping: chrome rules sit under .topbar or :root; every screen rule sits under .shell (the root of each shell view) or
   .shell-sheet (sheets a shell view opens), so nothing here styles the trip screens (t-/tv- classes, trip.css). */

/* ---------- day color (main.js dayColor: chrome.color / chrome.colorDark) ---------- */
:root[data-dc] { --dc: var(--dc-light) }
@media (prefers-color-scheme: dark) { :root[data-dc]:not([data-theme="light"]) { --dc: var(--dc-dark) } }
:root[data-dc][data-theme="dark"] { --dc: var(--dc-dark) }

/* ---------- top bar extras ---------- */
#topbar-extra { display: flex; align-items: center; gap: 2px; min-width: 0; flex: none }
/* sync status: a dot only (48 px target), beside Share, so the trip title gets the width */
.topbar .syncdot { width: var(--tap); min-height: var(--tap); padding: 0; justify-content: center; gap: 0 }
.topbar .syncdot::before { width: 12px; height: 12px; box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--rule) }
.topbar .syncdot:hover { background: var(--sunk) }
.topbar .syncdot[data-busy="1"]::before { animation: syncpulse 1s ease-in-out infinite }
@keyframes syncpulse { 50% { opacity: .35 } }
@media (prefers-reduced-motion: reduce) { .topbar .syncdot[data-busy="1"]::before { animation: none } }
.topbar .ttl { flex: 0 1 auto }
/* chrome.titleAction: the title is a button (Day view: opens the day sheet) */
.topbar .ttlbtn { display: flex; align-items: center; gap: 6px; min-height: var(--tap); max-width: 100%; margin: 0; padding: 0 8px 0 0; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; border-radius: 10px }
.topbar .ttlbtn:hover { background: var(--sunk) }
.topbar .ttlbtn .ttltext { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.topbar .ttlbtn .ttltext > span { overflow: hidden; text-overflow: ellipsis }
.topbar .ttlbtn > .ic { width: 18px; height: 18px; flex: none; color: var(--dc) }
/* the logo on trip screens: back to the home screen */
.topbar .homebtn { display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); margin-left: -6px; border-radius: 12px; flex: none }
.topbar .homebtn:hover { background: var(--sunk) }
.topbar .homebtn img { width: 34px; height: 34px; border-radius: 7px; filter: none }
.topbar .sharebtn { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 12px; border-radius: 999px; color: var(--ink); text-decoration: none; font: 800 15px/1 var(--font-display) }
.topbar .sharebtn:hover, .topbar .sharebtn[aria-current="page"] { background: var(--sunk) }
@media (max-width: 559px) {
  .topbar .sharebtn { width: var(--tap); padding: 0; justify-content: center }
  .topbar .sharebtn span { display: none }
}

/* ---------- shared screen layout ---------- */
.shell { padding-top: 8px; padding-bottom: 32px }
.shell > * + * { margin-top: 16px }
.shell.narrow { max-width: 640px }
.shell .hello { display: grid; gap: 8px; padding: 24px 0 8px }
.shell .hello h1 { font-size: clamp(32px, 8vw, 48px) }
.shell .hello p { color: var(--ink-2) }
.shell .center { text-align: center }
.shell .mid { font-family: var(--font-mono); font-weight: 400 }   /* Overpass's middot sits against the next word */
.shell :is(.bigcode, .input.code), .shell-sheet .bigcode { font-variant-ligatures: none }
.shell .btn.big { min-height: 56px; font-size: 17px; padding: 0 22px }
.shell .btn.small { min-height: var(--tap) }   /* small type, full glove target (12.1) */
.shell .btn .ic { width: 20px; height: 20px }
.shell .formerr { color: var(--no); font-weight: 600; font-size: 15px }
:is(.shell, .shell-sheet) .note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--sunk); color: var(--ink-2); font-size: 15px }
:is(.shell, .shell-sheet) .note.warn { background: var(--warnbg); color: var(--warnink) }
:is(.shell, .shell-sheet) .note .ic { margin-top: 1px }
.shell .codein { display: flex; gap: 8px; align-items: stretch }
.shell .codein .input { flex: 1; min-width: 0 }
.shell .input.code { font: 700 22px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase }
.shell .input.code::placeholder { color: var(--ink-3); opacity: .6 }
.shell select.input { appearance: auto }
:is(.shell, .shell-sheet) .bigcode { display: block; padding: 16px 12px; border-radius: 12px; background: var(--sunk); text-align: center; font: 700 clamp(28px, 9vw, 40px)/1.1 var(--font-mono); letter-spacing: .08em; user-select: all; -webkit-user-select: all; overflow-wrap: anywhere }
.shell details.more { padding: 0 16px }
.shell details.more > summary { min-height: var(--tap); display: flex; gap: 10px; align-items: center; cursor: pointer; list-style: none }
.shell details.more > summary::-webkit-details-marker { display: none }
.shell details.more > summary::after { content: ""; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg) translateY(-3px) }
.shell details.more[open] > summary::after { transform: rotate(-135deg) }
.shell details.more[open] { padding-bottom: 14px }
.shell ul.facts { margin: 0; padding-left: 20px; display: grid; gap: 6px }

/* brand sign (ui.js brandSign, base.css .brandsign) at the top of login, join and home. justify-self keeps it at its own
   width in the .hello grid (stretched, the panel would outgrow the art). Short phones (iPhone SE, landscape) get the small
   size so Sign in / Join stays above the fold. */
.shell .hello .brandsign { justify-self: start; margin-bottom: 8px }
@media (max-height: 760px) {
  .shell .hello .brandsign:not(.small) img { width: 104px }
  .shell .hello .brandsign:not(.small) b { font-size: 22px; padding-bottom: 9px }
}
.shell .signal { display: flex; gap: 8px; align-items: center; justify-content: center; color: var(--ink-3); font-size: 14px }
.shell .signal .ic { width: 18px; height: 18px }
.shell .signal.off { color: var(--no); font-weight: 700 }

/* segmented control (theme, one person / group) */
:is(.shell, .shell-sheet) fieldset.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; margin: 0; padding: 3px; border: 1.5px solid var(--rule); border-radius: 999px; background: var(--surface); min-width: 0 }
:is(.shell, .shell-sheet) fieldset.seg label { position: relative; display: block; cursor: pointer }
:is(.shell, .shell-sheet) fieldset.seg input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer }
:is(.shell, .shell-sheet) fieldset.seg span { display: grid; place-items: center; min-height: var(--tap); padding: 0 12px; border-radius: 999px; font: 800 15px/1.1 var(--font-display); color: var(--ink-2); text-align: center }
:is(.shell, .shell-sheet) fieldset.seg input:checked + span { background: var(--ink); color: var(--bg) }
:is(.shell, .shell-sheet) fieldset.seg input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--signal) }

/* photos: a missing (not saved) image keeps its box as a sunk block with the caption, never a broken icon */
.shell figure.ph { position: relative; overflow: hidden; border-radius: var(--radius-s); background: var(--sunk) }
.shell figure.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.shell figure.ph figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 8px; color: #fff; font-size: 13px; background: linear-gradient(transparent, rgba(0,0,0,.6)) }
.shell figure.ph.gone img { display: none }
.shell figure.ph.gone figcaption { top: 0; display: grid; place-items: center; padding: 12px; text-align: center; color: var(--ink-3); background: none; font-weight: 600 }

/* ---------- home ---------- */
.shell .trips { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px }
@media (min-width: 760px) { .shell .trips { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.shell .tripcard { display: block; height: 100%; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; color: var(--ink); text-decoration: none; box-shadow: var(--shadow) }
.shell .tripcard:hover { border-color: var(--ink-3) }
.shell .tripcard figure.ph.cover { aspect-ratio: 16 / 7; border-radius: 0 }
.shell .tripcard figure.ph.cover figcaption { display: none }
.shell .tripcard figure.ph.cover.gone figcaption { display: grid; font: 800 20px/1.1 var(--font-display) }
.shell .tripbody { padding: 14px 16px 16px; display: grid; gap: 6px }
.shell .tripbody h2 { font-size: clamp(28px, 7.5vw, 34px) }
.shell .tripkick { display: grid; gap: 2px; color: var(--ink-2) }
.shell .tripkick span:first-child { font: 800 15px/1.2 var(--font-display) }
.shell .tripkick span + span { font: 600 12px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-variant-ligatures: none }
.shell .tripbody .row { gap: 6px; margin-top: 4px }
.shell .tripbody .nowrap { white-space: nowrap }
.shell .addtrip h3 { display: flex; gap: 8px; align-items: center; margin: 0 }

/* ---------- account ---------- */
.shell .devices { list-style: none; margin: 0; padding: 0 }
.shell .device { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule) }
.shell .device:last-child { border-bottom: 0 }
.shell .device small { display: block; color: var(--ink-3); font-size: 13px }
.shell .device small.how { color: var(--ink-2) }
.shell .devcode { display: grid; gap: 10px }
.shell .danger-zone h3 { color: var(--no) }
.shell .card > h3:first-child, .shell .card > div:first-child > h3:first-child { margin-bottom: 4px }

/* ---------- share ---------- */
:is(.shell, .shell-sheet) fieldset.presets { display: grid; gap: 10px; margin: 0; padding: 0; border: 0 }
:is(.shell, .shell-sheet) .preset { display: flex; gap: 12px; align-items: flex-start; padding: 14px; min-height: 56px; border: 1.5px solid var(--rule); border-radius: 12px; cursor: pointer }
:is(.shell, .shell-sheet) .preset input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--guide); flex: none }
:is(.shell, .shell-sheet) .preset span { display: grid; gap: 2px }
:is(.shell, .shell-sheet) .preset b { font: 800 17px/1.2 var(--font-display) }
:is(.shell, .shell-sheet) .preset small { color: var(--ink-2); font-size: 14px }
:is(.shell, .shell-sheet) .preset:has(input:checked) { border-color: var(--guide); box-shadow: inset 0 0 0 1px var(--guide) }
.shell .preset.dis { opacity: .55; cursor: default }
.shell .newlink h3 { display: flex; gap: 8px; align-items: center; margin: 0; color: var(--ok) }
.shell .newlink .input { font-size: 14px }
.shell .tree, .shell .tree ul { list-style: none; margin: 0; padding: 0 }
.shell .tree ul { margin-left: 15px; padding-left: 14px; border-left: 2px solid var(--rule) }
.shell .node { padding-top: 12px }
.shell .nodehead { display: flex; gap: 10px; align-items: flex-start }
.shell .nodemain { flex: 1; min-width: 0; overflow-wrap: anywhere }
.shell .nodemain small { display: block; color: var(--ink-3); font-size: 13px; margin-top: 2px }
.shell .nodemain .chip { vertical-align: 1px; white-space: normal }
.shell .nodeacts { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0 40px }
.shell .nodeacts:not(:has(.btn)) { display: none }
.shell .nodeacts .btn { min-height: var(--tap) }
.shell .node.link > .nodehead > .ic { width: 30px; height: 30px; padding: 4px; border-radius: 8px; background: var(--sunk); color: var(--ink-2) }
.shell .node.link.off > .nodehead { opacity: .65 }
:is(.shell, .shell-sheet) .avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--county); color: #fff; font: 800 14px/1 var(--font-display) }
:root[data-theme="dark"] .shell-sheet .avatar, :root[data-theme="dark"] .shell .avatar { color: #10161D }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.shell, .shell-sheet) .avatar { color: #10161D } }
.shell .node.owner > .nodehead .avatar { background: var(--guide); color: #fff }

/* ---------- info ---------- */
.shell.info { max-width: 760px }
.shell .isec { margin-top: 28px }
.shell .isec:first-child { margin-top: 16px }
.shell h2.sec { display: flex; gap: 8px; align-items: center; font: 900 22px/1.15 var(--font-display); letter-spacing: -0.01em; margin-bottom: 12px }
.shell h2.sec .ic { width: 22px; height: 22px; color: var(--ink-3) }
.shell .telgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px }
.shell .tel { display: grid; align-content: center; gap: 2px; min-height: 56px; padding: 8px 16px; border-radius: 14px; border: 1.5px solid var(--rule); background: var(--surface); color: var(--ink); text-decoration: none }
.shell .tel b { font: 800 18px/1.1 var(--font-display) }
.shell .tel small { font-size: 12.5px; color: var(--ink-3); line-height: 1.25 }
.shell .tel.sos { background: #B3261E; border-color: #B3261E; color: #fff }
.shell .tel.sos small { color: rgba(255,255,255,.88) }
.shell ul.status { list-style: none; margin: 0 0 12px; padding: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius) }
.shell ul.status li { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 14px; border-bottom: 1px solid var(--rule); font-size: 15.5px }
.shell ul.status li:last-child { border-bottom: 0 }
.shell ul.status .pill { text-align: center; margin-top: 2px }
.shell .suntable td small { font-size: 12.5px }
.shell .suntable td:first-child { white-space: nowrap }
.shell .suntable th, .shell .suntable td { padding-left: 10px; padding-right: 10px }
.shell .suntable tr.today td { background: var(--sunk) }
.shell .dirlist { display: grid; gap: 10px; margin-top: 12px }
.shell .dirrow { padding: 12px 14px; border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); display: grid; gap: 4px; font-size: 15.5px }
.shell .dirrow.now { box-shadow: inset 4px 0 0 var(--dc) }
.shell .dirhead { display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
.shell .dirhead b { font: 800 17px/1.2 var(--font-display); margin-right: auto }
.shell .lab { font: 600 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-right: 4px }
.shell #vehicle figure.ph { aspect-ratio: 3 / 2 }
.shell .bikes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px }
.shell .bike { display: grid; gap: 3px; justify-items: start; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--radius-s); background: var(--bg) }
.shell .bike b { font: 800 17px/1.2 var(--font-display) }
.shell .bike .ph { width: 100%; margin-bottom: 6px }
.shell .bike .ph img { width: 100%; height: 100%; object-fit: cover }
.shell dl.ticket { margin: 0; display: grid; gap: 8px }
.shell dl.ticket div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; align-items: baseline; padding-top: 8px; border-top: 1px solid var(--rule) }
.shell dl.ticket dt { font: 600 12px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3) }
.shell dl.ticket dd { margin: 0; font-weight: 700; overflow-wrap: anywhere }
.shell dl.ticket dd:has(> .btn) { display: flex; align-items: center; gap: 10px }
.shell dl.ticket dd > span { flex: 1; min-width: 0 }
.shell dl.ticket dd > .btn { flex: none }
.shell .offstat { font-weight: 700 }
.shell .offstat[data-s="ok"] { color: var(--ok) }
.shell .offstat[data-s="busy"] { color: var(--ink) }
.shell .okmark .ic { width: 20px; height: 20px; vertical-align: -4px }
.shell .offprog { display: grid; gap: 4px }
.shell .offprog progress { width: 100%; height: 10px; accent-color: var(--guide) }
.shell .iossteps { display: grid; gap: 12px }
.shell .steps h4 { margin-bottom: 4px }
.shell .steps ol { margin: 0; padding-left: 22px; display: grid; gap: 4px }
.shell ol.sources { padding-left: 22px; display: grid; gap: 4px; font-size: 15px }
.shell ul.credits { padding-left: 20px; display: grid; gap: 4px; font-size: 14px }
.shell .attrib { padding: 12px 14px; border-radius: 12px; background: var(--sunk); color: var(--ink-2); margin: 12px 0 }
.shell #sources h3 { margin: 16px 0 8px }

/* ---------- home: brand sign, Plan a trip, trip ideas (docs/architecture.md 15) ---------- */
.shell.home .homehero { padding-top: 20px }
.shell.home .homehero p { font: 700 19px/1.3 var(--font-display); color: var(--ink-2) }
.shell .startbtn { min-height: 64px; font-size: 19px }
.shell .startbtn .ic { width: 24px; height: 24px }
.shell .pre { white-space: pre-line }
.shell .ideas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px }
.shell .idea { display: flex; gap: 12px; align-items: center; min-height: 76px; padding: 12px 10px 12px 14px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); color: var(--ink); text-decoration: none; box-shadow: var(--shadow) }
.shell .idea:hover { border-color: var(--ink-3) }
.shell .ideaicon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--guide); color: #fff; flex: none }
.shell .ideamain { flex: 1; min-width: 0; display: grid; gap: 2px }
.shell .ideatop { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center }
.shell .ideatop b { font: 800 19px/1.2 var(--font-display); overflow-wrap: anywhere }
.shell .ideamain small { color: var(--ink-3); font: 500 13px/1.3 var(--font-mono); font-variant-ligatures: none }
.shell .ideamain small span { white-space: nowrap }
.shell .idealast { color: var(--ink-2); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.shell .idea.unread .idealast { color: var(--ink); font-weight: 700 }
.shell .idea > .ic:last-child { color: var(--ink-3); width: 20px; height: 20px }
.shell .badge { min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; background: #B3261E; color: #fff; font: 700 13px/26px var(--font-mono); text-align: center; flex: none }
.shell .ideasold .ideas { margin-top: 4px }
.shell .ideasold .idea { box-shadow: none }

/* ---------- plan: head card, decided, thread, composer ---------- */
.shell.plan { padding-bottom: 104px }
.shell .planhead { position: relative }
.shell .planhead > div:first-child { padding-right: 40px }
.shell .planmore { position: absolute; top: 6px; right: 6px }
.shell .planhead h1 { font-size: clamp(30px, 8vw, 44px); margin: 4px 0 6px; overflow-wrap: anywhere }
:is(.shell, .shell-sheet) .plandetails { color: var(--ink-2); overflow-wrap: anywhere }
.shell .tripready { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--okbg) }
.shell .tripready > .ic { color: var(--ok) }
.shell .tripready > span { flex: 1; min-width: 12em }
.shell .tripready small { color: var(--ink-2) }
.shell .planpeople { gap: 8px }
.shell .planpeople .btn { min-height: var(--tap) }
.shell .btn.faces { padding-left: 8px }
.shell .facerow { display: inline-flex }
.shell .facerow .avatar { width: 30px; height: 30px; border: 2px solid var(--surface); margin-left: -9px; font-size: 13px }
.shell .facerow .avatar:first-child { margin-left: 0 }
/* the owner's avatar is guide green with white type in both themes (the dark-theme .avatar rule above sets dark type) */
:is(.shell, .shell-sheet) .avatar.owner, :root:is([data-theme], :not([data-theme="light"])) :is(.shell, .shell-sheet) .avatar.owner { background: var(--guide); color: #fff }
.shell .decided { box-shadow: inset 5px 0 0 var(--signal); padding-left: 20px }
.shell .decided h3 { display: flex; gap: 8px; align-items: center; margin: 0 0 4px }
.shell .decided ul { list-style: none; margin: 0; padding: 0 }
.shell .decided button { display: grid; gap: 2px; width: 100%; min-height: var(--tap); padding: 8px 0; border: 0; border-top: 1px solid var(--rule); background: none; color: var(--ink); text-align: left; cursor: pointer; font-size: 16px; overflow-wrap: anywhere }
.shell .decided li:first-child button { border-top: 0 }
.shell .decided small { display: flex; gap: 14px; align-items: center; color: var(--ink-3); font-size: 13px }
.shell .decided small span { display: inline-flex; gap: 4px; align-items: center }
.shell .decided small .ic { width: 14px; height: 14px }

.shell .thread { list-style: none; margin: 0; padding: 0 }
.shell .thread .daysep { display: flex; justify-content: center; margin: 18px 0 4px }
.shell .thread .daysep span { padding: 6px 10px 5px; border-radius: 999px; background: var(--sunk); color: var(--ink-2); font: 600 12px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; font-variant-ligatures: none }
.shell .thread .joined, .shell .thread .empty { margin-top: 10px; text-align: center; color: var(--ink-3); font-size: 14px }
.shell .thread .empty { display: block; padding: 16px }
.shell .msg { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px }
.shell .msg.cont { margin-top: 0 }
.shell .msg.mine { justify-content: flex-end }
.shell .msg > .avatar { margin-top: 20px }
.shell .msg > .avspace { width: 30px; flex: none }
.shell .msgcol { display: grid; justify-items: start; min-width: 0; max-width: min(84%, 560px) }
.shell .msg.mine .msgcol { justify-items: end }
.shell .msg .who { margin: 0 0 3px 12px; font: 800 13px/1.2 var(--font-display); color: var(--ink-2) }
.shell .bubble { padding: 9px 14px 10px; border-radius: 18px; background: var(--surface); border: 1px solid var(--rule); font-size: 16.5px; line-height: 1.45; overflow-wrap: anywhere }
.shell .msg:not(.mine):not(.cont) .bubble { border-top-left-radius: 6px }
.shell .msg.mine .bubble { background: var(--guide); border-color: var(--guide); color: #fff }
.shell .msg.mine:not(.cont) .bubble { border-top-right-radius: 6px }
.shell .msg.mine .bubble a { color: #fff }
.shell .bubble i { color: var(--ink-3) }
.shell .msg.mine .bubble i { color: rgba(255,255,255,.85) }
.shell .msg.pending .bubble { opacity: .6 }
.shell .msg.pinned .bubble { box-shadow: 0 0 0 3px var(--signal) }
.shell .msg.flash .bubble { animation: tp-flash 1.6s ease-out }
@keyframes tp-flash { 0%, 50% { box-shadow: 0 0 0 5px var(--signal) } }
@media (prefers-reduced-motion: reduce) { .shell .msg.flash .bubble { animation: none; box-shadow: 0 0 0 5px var(--signal) } }
.shell .msgmeta { display: flex; align-items: center; gap: 2px; min-height: 34px; margin: 0 4px; color: var(--ink-3); font: 500 12px/1 var(--font-mono); font-variant-ligatures: none }
.shell .msgmeta time { margin-right: 4px }
.shell .msgmeta .chip { margin-right: 4px }
.shell :is(.likebtn, .msgmore) { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: var(--tap); min-height: var(--tap); margin: -7px 0; padding: 0 8px; border: 0; border-radius: 999px; background: none; color: var(--ink-3); cursor: pointer; font: 700 14px/1 var(--font-mono) }
.shell :is(.likebtn, .msgmore) .ic { width: 19px; height: 19px }
.shell :is(.likebtn, .msgmore):hover { background: var(--sunk) }
.shell .likebtn[aria-pressed="true"] { color: var(--ok) }
.shell .likebtn[disabled] { opacity: .5; pointer-events: none }

.shell .composer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; margin: 0; padding: 10px 0 calc(10px + var(--safe-b)); background: var(--surface); border-top: 1px solid var(--rule) }
.shell .composerin { display: flex; gap: 10px; align-items: flex-end; max-width: 640px }
.shell .composerin textarea.input { flex: 1; min-width: 0; min-height: 56px; max-height: 170px; padding: 14px 16px; border-radius: 22px; resize: none; line-height: 1.4 }
.shell .sendbtn { width: 56px; min-height: 56px; padding: 0; flex: none }
.shell .sendbtn .ic { width: 24px; height: 24px }
.shell .composerin.off { justify-content: space-between; align-items: center; min-height: 56px; color: var(--ink-2); font-weight: 600 }

/* plan form (/p/new and the edit sheet) */
:is(.shell, .shell-sheet) .dates2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
:is(.shell, .shell-sheet) .dates2 .input { min-width: 0; -webkit-appearance: none; appearance: none }
:is(.shell, .shell-sheet) textarea.input { min-height: 120px; resize: vertical; line-height: 1.45 }
@media (max-width: 360px) { :is(.shell, .shell-sheet) .dates2 { grid-template-columns: 1fr } }

/* plan sheets: people, links, actions, a quoted message */
.shell-sheet .plist { list-style: none; margin: 0; padding: 0 }
.shell-sheet .plist li { display: flex; gap: 10px; align-items: center; min-height: 56px; padding: 6px 0; border-bottom: 1px solid var(--rule) }
.shell-sheet .plist li:last-child { border-bottom: 0 }
.shell-sheet .pmain { flex: 1; min-width: 0; overflow-wrap: anywhere }
.shell-sheet .pmain small { display: block; color: var(--ink-3); font-size: 13px }
.shell-sheet .linkic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--sunk); color: var(--ink-2); flex: none }
.shell-sheet .linkic .ic { width: 18px; height: 18px }
.shell-sheet .btn.big { min-height: 56px; font-size: 17px }
.shell-sheet .btn.small { min-height: var(--tap) }
.plansheet .btn.block { justify-content: flex-start }
.shell-sheet .quote { margin: 0; padding: 10px 14px; border-left: 4px solid var(--rule); border-radius: 0 10px 10px 0; background: var(--sunk); overflow-wrap: anywhere }
.shell-sheet code { padding: 1px 5px; border-radius: 5px; background: var(--sunk); font: 500 .9em var(--font-mono) }
.shell-sheet .small .ic { width: 16px; height: 16px; vertical-align: -3px }
.shell-sheet h4 { margin: 4px 0 0 }

/* plan people: bike line and the bike / remove buttons */
.shell-sheet .pbike { color: var(--ink-2) }
.shell-sheet .pacts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end }

/* ---------- trip chat (16): the plan thread's look, photos, and the composer above the tab bar ---------- */
body.has-tabs .tthread .composer { bottom: calc(var(--tabbar-h) + var(--safe-b)); padding-bottom: 10px }
@media (min-width: 900px) { body.has-tabs .tthread .composer { bottom: 0; padding-bottom: calc(10px + var(--safe-b)) } }
.shell.tthread { padding-bottom: 120px }
.shell .photobtn { width: 56px; height: 56px; min-height: 56px; padding: 0; flex: none; border-radius: 50%; cursor: pointer }
.shell .photobtn .ic { width: 24px; height: 24px }
.shell .tpicked { display: flex; gap: 8px; padding: 0 0 10px; overflow-x: auto }
.shell .tpick { position: relative; flex: none }
.shell .tpick img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; border: 1px solid var(--rule) }
.shell .tpick .iconbtn { position: absolute; top: -10px; right: -10px; width: 36px; height: 36px; background: var(--surface); box-shadow: var(--shadow) }
.shell .tphotos { display: grid; gap: 4px; width: min(320px, 72vw); margin-bottom: 4px; border-radius: 16px; overflow: hidden }
.shell .tphotos.n2, .shell .tphotos.n3, .shell .tphotos.n4 { grid-template-columns: 1fr 1fr }
.shell .tphotos.n3 .tphoto:first-child { grid-column: 1 / -1 }
.shell .tphoto { display: block; padding: 0; border: 0; background: var(--sunk); cursor: zoom-in; min-height: 0 }
.shell .tphoto img { display: block; width: 100%; height: 100%; object-fit: cover }
.shell .tphotos.n1 .tphoto img { height: auto; max-height: 420px }
.shell .tphotos:not(.n1) .tphoto { aspect-ratio: 1 }
.shell .msg.mine .tphotos { justify-self: end }
.shell .msgmeta .tw { margin: 0 6px 0 2px; color: var(--ink-3) }
.shell .msgmeta .btn.small { min-height: 36px; margin: 0 2px }
.shell .tnotsent { color: var(--no); margin: 4px 4px 0 }
.photosheet { max-width: min(96vw, 1100px) }
.photosheet .sheetbody img { width: 100%; height: auto; border-radius: 10px }
.tabbar a, .topnav a { position: relative }
.tabbar a .badge, .topnav a .badge { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #B3261E; color: #fff; font: 700 11px/20px var(--font-mono); text-align: center }
.topnav a .badge { position: static; margin-left: 2px }
.shell .pushkinds { border: 0; margin: 0; padding: 0; display: grid; gap: 2px }
.shell .pushkinds legend { padding: 0 0 6px }
.shell .ttaken { margin: 0 4px 4px; font: 500 12.5px/1.2 var(--font-mono); color: var(--ink-3) }
.shell .msg.mine .ttaken { text-align: right }