into a flex item that shrank to its content: a 402px column on a 1536px screen that no max-width could widen. This page is a scrolling document, and says so. */ display: block; height: auto; min-height: 100vh; overflow-x: hidden; overflow-y: auto; } /* ── HEADER ── */ .app-header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-h); background: linear-gradient(90deg, var(--panel), var(--panel)); border-bottom: 1px solid var(--app-border); display: flex; align-items: center; /* The inset as padding, not just as height. --header-h already grew to cover the status bar, but `align-items:center` would then centre the logo and the back button in the taller box, half of the offset above them and half below, which puts them a little too high and leaves the bar looking bottom-heavy. Padding the top pushes the row clear of the clock and keeps it centred in the part of the bar that is actually drawn. */ padding: env(safe-area-inset-top) 16px 0; gap: 12px; z-index: 100; box-shadow: 0 2px 20px rgba(0,0,0,0.5); } .app-back-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(var(--brand-rgb),0.1); border: 1px solid var(--app-border); color: var(--app-green); text-decoration: none; font-size: 18px; flex-shrink: 0; transition: background 0.2s; } .app-back-btn:hover { background: rgba(var(--brand-rgb),0.2); } /* An since it became the way home. It should not look like a link, it should look exactly like the wordmark it already was, but it does have to behave like a target. */ .app-header-logo { display: flex; align-items: center; gap: 8px; flex: 1; text-decoration: none; min-height: 44px; } .app-header-logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; } .app-logo-icon { font-size: 22px; } /* The logo in the header, on every page that has one. A raster mark, so it takes an explicit box and the radius of the tile inside it: a 192px icon drawn at 30 shows the PNG's own square corners otherwise. */ .app-logo-mark { width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; display: block; } .app-logo-text { font-size: 18px; font-weight: 800; color: var(--app-green); letter-spacing: -0.3px; } .app-header-right { display: flex; align-items: center; gap: 10px; } .app-user-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-600), var(--accent)); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--on-accent); font-size:14px; overflow: hidden; cursor: pointer; border: 2px solid rgba(var(--brand-rgb),0.3); } /* ── MAIN ── */ .app-main { margin-top: var(--header-h); padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 24px); min-height: calc(100vh - var(--header-h)); overflow-y: auto; } /* On a page carrying the shared .tabbar, shared.css has already reserved the bar's height on . Reserving it again here left a screen's worth of empty parchment under the last event on What's On. */ body:has(.tabbar) .app-main{padding-bottom:24px} /* ── TABS ── */ .app-tab-content { display: none; padding: 16px; padding-bottom: 32px; animation: tabFadeIn 0.25s ease; } .app-tab-content.active { display: block; } /* Opacity only, deliberately. A transform on the pane makes it the containing block for every position:fixed thing inside it, which is how the chat thread, an inset:0 full-screen sheet on a phone, ended up trapped in a 396px box below the header for the length of the animation and for as long as a throttled tab left it unfinished. The eight-pixel rise was not worth a whole class of misplaced overlays. */ @keyframes tabFadeIn { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion:reduce){ .app-tab-content{animation:none} } /* ── SECTION HEADER ── */ .app-section-header { margin-bottom: 16px; } .app-section-title { font-size: 22px; font-weight: 800; color: var(--app-text); margin: 0 0 4px; } .app-section-sub { font-size:14px; color: var(--app-muted); margin: 0; } /* ── CITY SELECT ── */ .app-pub-stats { font-size:13px; color: var(--app-muted); font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; margin-bottom: 10px; padding: 0 2px; } .app-pub-stats span { color: var(--app-green); } /* ── PUB LIST ── */ .app-pub-list { display: flex; flex-direction: column; gap: 8px; } .app-pub-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--app-card); border: 1px solid var(--app-border); border-radius: var(--app-radius); cursor: pointer; transition: background 0.18s, border-color 0.18s, transform 0.15s; -webkit-tap-highlight-color: transparent; } .app-pub-item:hover, .app-pub-item:active { background: rgba(var(--brand-rgb),0.07); border-color: rgba(var(--brand-rgb),0.3); transform: translateX(2px); } .app-pub-item.visited { border-left: 3px solid var(--app-green); } .app-pub-number { font-size:13px; color: var(--app-muted); font-weight: 700; min-width: 24px; text-align: center; } .app-pub-visited-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--app-green); flex-shrink: 0; box-shadow: 0 0 6px rgba(var(--brand-rgb),0.5); } .app-pub-unvisited-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.15); flex-shrink: 0; } .app-pub-info { flex: 1; min-width: 0; } .app-pub-name { font-size: 15px; font-weight: 700; color: var(--app-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-pub-addr { font-size:13px; color: var(--app-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-pub-rating { font-size:13px; color: var(--warn); font-weight: 700; flex-shrink: 0; } .app-pub-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; } .app-pub-price { font-size:13px; color: var(--app-green); font-weight: 700; white-space: nowrap; } .app-pub-arrow { font-size: 16px; color: var(--app-muted); flex-shrink: 0; } /* ── EMPTY STATE ── */ .app-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; text-align: center; gap: 10px; } .app-empty-icon { font-size: 40px; } .app-empty-text { font-size: 15px; color: var(--app-muted); font-weight: 500; } .app-cta-btn { margin-top: 8px; padding: 10px 24px; background: var(--app-green); color: var(--on-accent); border-radius: 99px; font-weight: 700; font-size:15px; text-decoration: none; display: inline-block; } /* ════════════════════════════ CHAT ════════════════════════════ */ /* Friend conversation list */ .chat-friend-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--app-card); border: 1px solid var(--app-border); border-radius: var(--app-radius); cursor: pointer; margin-bottom: 8px; transition: background 0.18s; position: relative; } .chat-friend-row:hover, .chat-friend-row:active { background: rgba(var(--brand-rgb),0.07); } .chat-friend-avatar { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-600), var(--accent)); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--on-accent); font-size: 16px; overflow: hidden; flex-shrink: 0; position: relative; } .chat-online-indicator { position: absolute; bottom: 1px; right: 1px; width: 12px; height: 12px; border-radius: 50%; background: var(--brand-500); border: 2px solid var(--app-card); } .chat-friend-info { flex: 1; min-width: 0; } .chat-friend-name { font-size: 15px; font-weight: 700; color: var(--app-text); } .chat-friend-preview { font-size:13px; color: var(--app-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-friend-time { font-size:13px; color: var(--app-muted); flex-shrink: 0; } /* Conversation view */ /* A full-screen thread, so it covers the nav rather than stopping short of it, --z-sheet is the band for exactly that. It sat at 200 back when this page had its own bottom bar at 100; the shared .tabbar sits at 1300, which would have left a row of tabs painted across the bottom of an open conversation with the message composer underneath it. The composer already carries the home-indicator inset itself, so there is nothing left to reserve once the bar is out of the way. */ .chat-conversation-view { position: fixed; inset: 0; background: var(--app-bg); z-index: var(--z-sheet); display: flex; flex-direction: column; } .chat-conv-header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: linear-gradient(90deg, var(--panel), var(--panel)); border-bottom: 1px solid var(--app-border); flex-shrink: 0; padding-top: max(12px, env(safe-area-inset-top)); } .chat-back-btn { background: none; border: none; color: var(--app-green); font-size: 22px; cursor: pointer; padding: 4px 8px 4px 0; font-family: inherit; } .chat-conv-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-600), var(--accent)); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--on-accent); font-size: 15px; overflow: hidden; flex-shrink: 0; } .chat-conv-name { font-size: 16px; font-weight: 700; color: var(--app-text); } .chat-conv-status { display: flex; align-items: center; gap: 5px; font-size:13px; color: var(--app-muted); margin-top: 2px; } .chat-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-2); } .chat-status-dot.online { background: var(--brand-500); box-shadow: 0 0 5px var(--brand-500); } /* Messages area */ .chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; } .chat-loading { color: var(--app-muted); font-size:14px; text-align: center; padding: 24px; } .chat-msg { max-width: 72%; padding: 9px 13px; border-radius: 16px; font-size:15px; line-height: 1.45; word-break: break-word; } .chat-msg.mine { align-self: flex-end; background: var(--app-green); color: var(--on-accent); font-weight: 500; border-bottom-right-radius: 4px; } .chat-msg.theirs { align-self: flex-start; background: var(--app-card); border: 1px solid var(--app-border); color: var(--app-text); border-bottom-left-radius: 4px; } .chat-msg-time { font-size:12px; color: rgba(5,46,22,0.6); margin-top: 3px; text-align: right; } .chat-msg.theirs .chat-msg-time { color: var(--app-muted); } /* ── A CRAWL IN A BUBBLE ── The link came out of the sentence and went back as this. It sits beside the crawl's name rather than under it, because the two are one offer: what is on, and the way in. Full width only when the name has pushed it to its own line. */ .chat-msg-text { display: inline; } .chat-crawl-join { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; padding: 5px 13px; border-radius: 999px; background: var(--app-green); color: var(--on-accent); border: 1px solid var(--app-green); font-size: 13px; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; vertical-align: middle; } .chat-crawl-join:hover { filter: brightness(1.06); } /* In your own bubble the ground is already the accent, so a filled pill on it is a green square on a green square. Outlined instead. */ .chat-msg.mine .chat-crawl-join { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.5); color: var(--on-accent); } .chat-date-divider { text-align: center; font-size:13px; color: var(--app-muted); margin: 8px 0; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; } /* ── A CRAWL SENT OVER FROM THE MAP ── Two small notices, one either side of picking a thread. Without them the "Send in chat" button on the crawl builder just dumps you on a friend list with no explanation and a message box that has mysteriously filled itself in. */ .chat-share-pending { margin: 0 0 12px; padding: 11px 14px; background: var(--brand-ghost); border: 1px solid var(--brand-ring); border-radius: var(--r-md); color: var(--accent); font-size: var(--t-sm); font-weight: 600; } .chat-share-pending[hidden] { display: none; } .chat-share-note { padding: 7px 16px; background: var(--brand-ghost); border-top: 1px solid var(--brand-ring); color: var(--accent); font-size: var(--t-xs); font-weight: 600; text-align: center; flex-shrink: 0; } .chat-share-note[hidden] { display: none; } /* Input bar */ .chat-input-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; padding-bottom: max(10px, env(safe-area-inset-bottom)); background: var(--app-surface); border-top: 1px solid var(--app-border); flex-shrink: 0; } .chat-input { flex: 1; padding: 10px 14px; background: var(--app-card); border: 1px solid var(--app-border); border-radius: 99px; color: var(--app-text); font-size:15px; font-family: var(--font-sans); outline: none; } .chat-input:focus { border-color: rgba(var(--brand-rgb),0.4); } .chat-send-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--app-green); border: none; color: var(--on-accent); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.2s; } .chat-send-btn:hover { background: var(--brand-500); } /* ════════════════════════════ SETTINGS ════════════════════════════ */ .settings-card { background: var(--app-card); border: 1px solid var(--app-border); border-radius: var(--app-radius); padding: 16px; margin-bottom: 12px; } .settings-card-title { font-size:15px; font-weight: 700; color: var(--app-green); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 14px; } /* Avatar row */ .settings-avatar-row { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .settings-avatar { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-600), var(--accent)); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; color: var(--on-accent); cursor: pointer; position: relative; overflow: hidden; flex-shrink: 0; border: 2px solid rgba(var(--brand-rgb),0.3); } .settings-avatar-hint { position: absolute; inset: 0; background: rgba(0,0,0,0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; opacity: 0; transition: opacity 0.2s; } .settings-avatar:hover .settings-avatar-hint { opacity: 1; } .settings-avatar-name { font-size: 17px; font-weight: 700; color: var(--app-text); } .settings-avatar-sub { font-size:13px; color: var(--app-muted); margin-top: 2px; } /* Form fields */ .settings-field { margin-bottom: 12px; } .settings-label { display: block; font-size:13px; font-weight: 700; color: var(--app-muted); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px; } .settings-input { width: 100%; padding: 11px 14px; background: rgba(255,255,255,0.04); border: 1px solid var(--app-border); border-radius: 10px; color: var(--app-text); font-size:15px; font-family: var(--font-sans); outline: none; box-sizing: border-box; } .settings-input:focus { border-color: rgba(var(--brand-rgb),0.4); background: rgba(var(--brand-rgb),0.04); } .settings-save-btn { width: 100%; padding: 11px; background: rgba(var(--brand-rgb),0.15); border: 1px solid rgba(var(--brand-rgb),0.3); border-radius: 10px; color: var(--app-green); font-size:15px; font-weight: 700; font-family: var(--font-sans); cursor: pointer; transition: background 0.2s; } .settings-save-btn:hover { background: rgba(var(--brand-rgb),0.25); } /* Toggle rows */ .settings-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--app-border); } .settings-toggle-row:last-child { border-bottom: none; } .settings-toggle-label { font-size:15px; font-weight: 600; color: var(--app-text); } .settings-toggle-sub { font-size:13px; color: var(--app-muted); margin-top: 2px; } /* Toggle switch */ .settings-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; } .settings-toggle input { opacity: 0; width: 0; height: 0; } .settings-toggle-slider { position: absolute; inset: 0; background: rgba(255,255,255,0.1); border-radius: 99px; cursor: pointer; transition: background 0.2s; } .settings-toggle-slider::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: var(--panel); border-radius: 50%; transition: transform 0.2s; } .settings-toggle input:checked + .settings-toggle-slider { background: var(--app-green); } .settings-toggle input:checked + .settings-toggle-slider::before { transform: translateX(20px); } /* Danger zone */ .settings-danger-card { border-color: rgba(var(--danger-rgb),0.2); } .settings-danger-text { font-size:14px; color: var(--app-muted); margin: 0 0 14px; line-height: 1.5; } .settings-delete-btn { width: 100%; padding: 11px; background: var(--app-danger-bg); border: 1px solid rgba(var(--danger-rgb),0.3); border-radius: 10px; color: var(--app-danger); font-size:15px; font-weight: 700; font-family: var(--font-sans); cursor: pointer; transition: background 0.2s; } .settings-delete-btn:hover { background: rgba(var(--danger-rgb),0.15); } /* ════════════════════════════ MODAL ════════════════════════════ */ /* Dialogs on this page are the same kind of thing as dialogs on the map, so they use the same band. 500 was below the shared .tabbar's 1300, which meant the delete-account and claim-your-pub dialogs opened with a live, clickable row of navigation sitting on top of them. */ .app-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: var(--z-dialog); display: flex; align-items: center; justify-content: center; padding: 24px; backdrop-filter: blur(6px); } .app-modal { background: var(--app-card); border: 1px solid var(--app-border); border-radius: 18px; padding: 24px; width: 100%; max-width: 360px; } .app-modal-title { font-size: 18px; font-weight: 800; color: var(--app-text); margin-bottom: 10px; } .app-modal-text { font-size:14px; color: var(--app-muted); line-height: 1.55; margin-bottom: 16px; } .app-modal-actions { display: flex; gap: 10px; } .app-modal-cancel { flex: 1; padding: 11px; background: rgba(255,255,255,0.06); border: 1px solid var(--app-border); border-radius: 10px; color: var(--app-muted); font-size:15px; font-weight: 700; cursor: pointer; font-family: var(--font-sans); } .app-modal-confirm { flex: 1; padding: 11px; background: var(--app-danger-bg); border: 1px solid rgba(var(--danger-rgb),0.3); border-radius: 10px; color: var(--app-danger); font-size:15px; font-weight: 700; cursor: pointer; font-family: var(--font-sans); } /* ── TOAST ── */ /* .app-toast is styled in shared.css, with .toast, because they are the same object and were drifting apart. */ /* ── ACROSS DEVICES ────────────────────────────────────────────────────── One width for all three panes was the compromise that made this page look like a phone on a laptop. They want different things: a directory of 5,700 pubs wants every pixel, a settings form wants a readable column, and a chat wants two panes. So the pane decides, and the header follows it so the wordmark and the avatar line up with the content underneath. */ @media (min-width: 640px) { .app-main { max-width: 640px; margin-left: auto; margin-right: auto; } .chat-conversation-view { max-width: 640px; left: 50%; transform: translateX(-50%); } .app-header { justify-content: center; } .app-header-logo { max-width: 640px; width: 100%; } } /* ── PUB LIST TOOLS ─────────────────────────────────────────────────────── 71 pubs in a flat list is a scroll, not a browse. */ .app-list-tools{ display:flex;align-items:center;gap:10px; margin:0 0 12px; } .app-list-tools[hidden]{display:none} .app-list-search{ flex:1;min-width:0;display:flex;align-items:center;gap:8px; height:40px;padding:0 12px; background:var(--panel-2);border:1px solid var(--border); border-radius:999px; transition:border-color .15s ease, box-shadow .15s ease; } .app-list-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--brand-ring)} .app-list-search-ico{font-size:14px;flex-shrink:0;opacity:.75} .app-list-search-input{ flex:1;min-width:0;background:transparent;border:none;outline:none; color:var(--text);font-family:inherit;font-size:15px; } .app-list-search-input::placeholder{color:var(--text-3)} .app-list-search-input::-webkit-search-cancel-button{filter:grayscale(1);opacity:.6} .app-list-toggle{ display:flex;align-items:center;gap:7px;flex-shrink:0; height:40px;padding:0 13px; background:var(--panel-2);border:1px solid var(--border); border-radius:999px;cursor:pointer; font-size:14px;font-weight:600;color:var(--text-2); white-space:nowrap;user-select:none; } .app-list-toggle:hover{border-color:var(--border-strong);color:var(--text)} .app-list-toggle input{accent-color:var(--accent-solid);width:15px;height:15px;cursor:pointer} .app-list-toggle:has(input:checked){ background:var(--brand-ghost);border-color:var(--accent);color:var(--text); } /* Progress under the counts, the list is a checklist, so show the score. */ .app-pub-stats-line{margin-bottom:7px} .app-pub-progress{ height:5px;border-radius:999px;overflow:hidden; background:var(--panel-2);border:1px solid var(--border); } .app-pub-progress-fill{ height:100%;background:var(--accent-solid); border-radius:999px;transition:width .45s var(--ease-out,ease); } /* Rows became