/* ============================================================ LOCALE — Mobile-first hyperlocal sharing Inherits Ergo Hooks aesthetic ============================================================ */ /* ═══════════════════════════════════════════════════ Theme tokens — dark (default) and light variants. Swapped via [data-theme] on . Accent stays consistent across modes (brand identity). ═══════════════════════════════════════════════════ */ :root, :root[data-theme="dark"] { --bg: #0a0a0f; --surface: #12121a; --surface-2: #1a1a2e; --border: #2a2a3e; --text: #e0e0e8; --text-dim: #8888a0; --accent: #ff6b35; --accent-glow: rgba(255, 107, 53, 0.3); --success: #2ecc71; --danger: #e74c3c; --info: #3498db; --shadow-heavy: rgba(0, 0, 0, 0.5); --shadow-soft: rgba(0, 0, 0, 0.4); --backdrop: rgba(0, 0, 0, 0.7); --radius: 12px; --font: 'SF Mono', 'Fira Code', 'Consolas', monospace; --top-bar-h: 56px; } :root[data-theme="light"] { --bg: #f6f6f8; --surface: #ffffff; --surface-2: #eef0f4; --border: #d6d9e0; --text: #14141f; --text-dim: #62666f; /* darkened 2026-06-11: was #6b6f7d, 4.39:1 on surface-2 (AA fail); now 5.04:1 */ --accent: #e85a1f; /* slightly darker orange for contrast on white */ --accent-glow: rgba(232, 90, 31, 0.18); --success: #1f9a54; --danger: #c73432; --info: #2176bb; --shadow-heavy: rgba(0, 0, 0, 0.18); --shadow-soft: rgba(0, 0, 0, 0.08); --backdrop: rgba(20, 20, 31, 0.5); } html { /* Smooth theme swap */ transition: background-color 0.25s ease; } /* ---- Accessibility tokens (Appearance → Accessibility) -------------------- * Set as data-attrs on (preloaded inline in index.html, no flash) and * consumed here as root tokens — components need no per-feature wiring. * Text size multiplies the root font-size, so every rem in the app scales; * px-sized bits don't — convert to rem/em as they're touched. */ :root { --a11y-scale: 1; } :root[data-a11y-text="lg"] { --a11y-scale: 1.15; } :root[data-a11y-text="xl"] { --a11y-scale: 1.3; } /* High contrast: lift the two "quiet" tokens most of the UI leans on. */ :root[data-a11y-contrast="high"] { --text-dim: #b4b4cc; /* dark default #8888a0 */ --border: #4a4a6e; /* dark default #2a2a3e */ } :root[data-theme="light"][data-a11y-contrast="high"] { --text-dim: #3f434c; /* light default #62666f */ --border: #9aa2b0; /* light default #d6d9e0 */ } /* Honor the OS preference automatically — unless the user chose explicitly * in-app (any stored choice sets the attr, which wins). */ @media (prefers-contrast: more) { :root:not([data-a11y-contrast]) { --text-dim: #b4b4cc; --border: #4a4a6e; } :root[data-theme="light"]:not([data-a11y-contrast]) { --text-dim: #3f434c; --border: #9aa2b0; } } /* Scroll lock — applied to when any drawer/modal is open */ body.scroll-locked { overflow: hidden; /* iOS Safari: touch scroll bleed-through fix */ position: fixed; width: 100%; } /* Keyboard focus — visible on interactive elements for keyboard nav */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* But the default mouse-click focus should stay subtle */ :focus:not(:focus-visible) { outline: none; } /* Radius slider pending state — label pulses while debounce ticks */ #radius-label.radius-pending { animation: radius-pulse 0.4s ease-in-out; } @keyframes radius-pulse { 50% { opacity: 0.5; } } * { margin: 0; padding: 0; box-sizing: border-box; } /* Mobile: remove 300ms tap delay + hide grey tap highlight on interactive elems */ button, a, input[type="button"], input[type="submit"], [role="button"], .tag-chip, .tag-label, .tag-menu-btn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* 87.5% of the BROWSER default (16px → 14px, the historical look) instead of a * hard 14px: the phone's own text-size setting now scales every rem in the app, * and --a11y-scale stacks the in-app Text Size choice on top. */ html { font-size: calc(87.5% * var(--a11y-scale, 1)); } /* NOTE: no font-size here — body inherits the html size above; a `1rem` on * this html,body group would re-resolve against the browser default on the * root element and silently undo the a11y scale. */ html, body { background: var(--bg); color: var(--text); font-family: var(--font); -webkit-user-select: none; user-select: none; margin: 0; padding: 0; } /* Reading content the user may want to copy or quote — re-enable native text selection (the app shell is user-select:none for an app-like feel). Covers the share-detail text, the user's own posts, chat messages, and the Guide. Feed tiles are deliberately excluded so a tap opens the share rather than starting a long-press selection. */ .modal-text, .my-share-body, .msg-bubble, .guide-topic-a, .feedback-item-text, .feedback-triage, .teams-msg-text, .teams-disc-postbody, .teams-comment-text { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; } /* Fullscreen flex-column layout. Using 100dvh (dynamic viewport height) fixes iOS Safari address bar show/hide jumping. Falls back to 100vh. */ body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; } /* Screens — flex items inside the body's flex column. The top-bar is another flex item above this one. This avoids position:fixed, which is unreliable on iOS Safari. */ .screen { flex: 1; background: var(--bg); display: none; flex-direction: column; overflow-y: auto; min-height: 0; /* allow flex child to shrink */ padding-bottom: env(safe-area-inset-bottom); } .screen.active { display: flex; } /* Gate screen takes over the full viewport (no top bar visible). justify-content:flex-start + margin:auto on the child centers short content but keeps the TOP reachable/scrollable when content is taller than the viewport (justify-content:center would clip the top — un-scrollable). */ #gate-screen.active { align-items: center; justify-content: flex-start; padding-top: env(safe-area-inset-top); } #gate-screen.active .gate-content { margin: auto 0; width: 100%; box-sizing: border-box; } /* Nearby is the always-on canvas ONCE AUTHENTICATED. Visibility is governed by the standard .screen/.screen.active toggle (enterApp adds .active, the gate removes it) — do NOT force display here, or it renders on the front/gate page too and fights #gate-screen for the viewport (two competing flex:1 spaces). */ /* --- Top Bar --- */ .top-bar { flex-shrink: 0; /* never collapse */ height: calc(var(--top-bar-h) + env(safe-area-inset-top)); background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: env(safe-area-inset-top) 16px 0 16px; z-index: 50; box-sizing: border-box; } .wordmark { font-size: 1.25rem; font-weight: 800; letter-spacing: 3px; color: var(--accent); display: flex; align-items: baseline; /* NEAR.me + breadcrumb segments share a text baseline */ min-width: 0; /* let the breadcrumb shrink before the buttons do */ } /* Brand wordmark lockup — NEAR (accent orange) · dot (muted grey) · me (ink). Tokenized so it survives both themes: the light theme renders orange / dark-grey / black exactly as specified; on the dark default the "me" becomes the near-white ink so the mark stays legible (literal #000 would vanish on the #0a0a0f canvas). Shared by the top-bar .wordmark and the onboarding .ob-wordmark. */ .wm-near { color: var(--accent); } .wm-dot { color: var(--text-dim); } .wm-me { color: var(--text); } /* The top-bar wordmark is a tap-target → opens the NEAR.me menu (no "home" exists; the Spatial feed is the always-on home). Bare button, inherits the wordmark font. */ .wm-brand { background: none; border: 0; padding: 0; margin: 0; font: inherit; letter-spacing: inherit; cursor: pointer; line-height: 1; } .wm-brand:active { opacity: .7; } /* NEAR.me wordmark menu — contents inside the reused .appearance-sheet chrome. */ .bm-head { font-size: 18px; letter-spacing: 2px; } .bm-list { display: flex; flex-direction: column; margin-top: 14px; } .bm-row { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 0; border-top: 1px solid var(--border); padding: 15px 2px; font: inherit; color: var(--text); cursor: pointer; text-align: left; } .bm-row:first-child { border-top: 0; } .bm-row:hover .bm-row-label { color: var(--accent); } .bm-row-label { font-size: 1rem; font-weight: 600; } .bm-row-arrow { color: var(--text-dim); font-size: 1.25rem; line-height: 1; } .bm-back { margin-top: 14px; background: none; border: 0; color: var(--text-dim); font: inherit; cursor: pointer; padding: 6px 2px; } .bm-back:hover { color: var(--accent); } .bm-ver { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); color: var(--text-dim); font-size: .8rem; } .bm-whatsnew { color: var(--text-dim); font-size: .8rem; margin-top: 3px; } .bm-tagline { margin-top: 12px; color: var(--text); font-size: 1.05rem; } .bm-about { margin-top: 12px; color: var(--text-dim); font-size: .92rem; line-height: 1.55; } .top-actions { display: flex; gap: 6px; flex-shrink: 0; /* the breadcrumb shrinks; the action buttons don't */ } .top-btn { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-family: var(--font); display: flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 8px; cursor: pointer; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.5px; transition: all 0.15s; } .top-btn:hover { border-color: var(--accent); color: var(--accent); } .top-btn:active { transform: scale(0.96); } .top-btn-icon { font-size: 1rem; line-height: 1; } /* Feather SVG icons in actionable chrome — center within their hit-box. */ .top-btn-icon svg, .drawer-close svg, .drawer-back svg, .big-btn-icon svg { display: block; } @media (max-width: 720px) { /* Collapse the top actions to icon-only on phones AND tablets — with the added TEAMS button the labelled row crowds/overflows on mid-size screens. */ .top-btn-label { display: none; } .top-btn { padding: 6px 9px; font-size: 1rem; } } /* --- Drawer --- */ .drawer { position: fixed; /* Start BELOW the top header (instead of inset:0) so the nav buttons stay * visible + tappable while a drawer is open — tap another (Share/Inbox/Me) to * SWITCH without hitting ✕. The backdrop/panel both inherit this offset. */ top: calc(var(--top-bar-h) + env(safe-area-inset-top)); right: 0; bottom: 0; left: 0; z-index: 150; display: none; } .drawer.open { display: block; } .drawer-backdrop { position: absolute; inset: 0; background: var(--backdrop); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: fade-in 0.18s ease-out; } .drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 92vw); background: var(--bg); border-left: 1px solid var(--border); display: flex; flex-direction: column; box-shadow: -8px 0 30px var(--shadow-heavy); animation: slide-in-right 0.22s cubic-bezier(0.2, 0.9, 0.3, 1); /* No safe-area top padding: the drawer now starts below the top-bar, which * already clears the notch. */ padding-bottom: env(safe-area-inset-bottom); } @keyframes slide-in-right { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; } /* Breathing room between the in-thread Archive and the ✕ — two adjacent icon buttons need a clear gap so a thumb never files a conversation while aiming for close (owner, 2026-07-02). */ #msg-archive-btn { margin-right: 14px; } .drawer-header h2 { font-size: 1.2rem; letter-spacing: 1px; /* Truncate a long title instead of letting it squish the back/close buttons. */ flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .drawer-close { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); width: 36px; height: 36px; /* standardized close-✕ size */ flex: 0 0 auto; /* never shrink — a long title must not squish the ✕ */ border-radius: 50%; cursor: pointer; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; transition: border-color .12s, color .12s; } .drawer-close:hover { border-color: var(--accent); color: var(--accent); } .drawer-body { flex: 1; overflow-y: auto; /* iOS: momentum scroll + prevent rubber-band chaining into backdrop */ -webkit-overflow-scrolling: touch; overscroll-behavior: contain; /* Respect iPhone home indicator */ padding: 16px 20px calc(24px + env(safe-area-inset-bottom)); } .gate-content { text-align: center; padding: 40px 24px; max-width: 320px; } .gate-content h1 { font-size: 2.5rem; letter-spacing: 4px; color: var(--accent); margin-bottom: 8px; } .gate-content .subtitle { color: var(--text-dim); font-size: 0.85rem; margin-bottom: 32px; } .gate-status { margin: 24px 0; } .status-text { color: var(--text-dim); font-size: 0.85rem; margin: 12px 0; } /* Filtered shelf (mirrors followed shelf) */ .filtered-shelf { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--border); margin-top: 4px; flex-wrap: nowrap; min-width: 0; } .filtered-shelf .shelf-label { color: var(--danger); font-weight: 700; } .followed-shelf .shelf-label { color: var(--success); font-weight: 700; } /* --- Body --- */ .screen-body { flex: 1; padding: 20px; overflow-y: auto; overscroll-behavior-y: contain; /* suppress the browser's own pull-to-refresh */ } /* --- Buttons --- */ .btn { display: block; width: 100%; padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text); font-family: var(--font); font-size: 0.9rem; cursor: pointer; margin: 8px 0; text-decoration: none; text-align: center; min-height: 48px; transition: border-color .12s ease, background-color .12s ease, color .12s ease, filter .12s ease; } .btn:not(:disabled):active { transform: scale(0.98); } /* Consistent disabled feedback — buttons get disabled in JS (e.g. while sending). */ .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; } .btn-primary:not(:disabled):hover { filter: brightness(0.93); } .btn-ghost { background: transparent; color: var(--text-dim); } .btn-ghost:not(:disabled):hover { background: var(--surface-2); color: var(--text); } .btn-small { padding: 6px 12px; font-size: 0.75rem; width: auto; display: inline-block; } /* --- Share screen --- */ /* ── Home feed refresh pill (auto 30s + pull-to-refresh) ── */ .feed-refresh { position: fixed; top: calc(var(--top-bar-h, 56px) + 10px); left: 50%; transform: translateX(-50%) translateY(-160%); z-index: 60; display: flex; align-items: center; gap: 8px; padding: 7px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; box-shadow: var(--shadow-soft); font-size: 0.78rem; font-weight: 600; color: var(--text-dim); opacity: 0; pointer-events: none; transition: transform .22s ease, opacity .22s ease; } .feed-refresh.show { transform: translateX(-50%) translateY(0); opacity: 1; } .feed-refresh.armed { color: var(--accent); border-color: var(--accent); } /* (The old floating lens-indicator pill is gone — Lens + Show state read in the wordmark breadcrumb: NEAR.me... See .wordmark-seg.) */ .feed-refresh-spin { display: inline-flex; } /* Spin only while actually refreshing; static glyph during the pull. */ .feed-refresh.refreshing .feed-refresh-spin { animation: feed-refresh-spin 0.8s linear infinite; } @keyframes feed-refresh-spin { to { transform: rotate(360deg); } } .share-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 20px 0; } /* Free Share / Paid Share — two roomier buttons. */ .share-options-two { grid-template-columns: repeat(2, 1fr); } .big-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; min-height: 104px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 10px; color: var(--text); cursor: pointer; font-family: var(--font); } .big-btn:active { transform: scale(0.97); } .big-btn-icon { display: flex; align-items: center; justify-content: center; } .big-btn-label { font-size: 0.8rem; font-weight: 600; line-height: 1.2; } /* --- Stages (share flow) --- */ .stage { padding: 16px 0; } .photo-preview { width: 100%; max-height: 50vh; object-fit: contain; border-radius: var(--radius); margin-bottom: 12px; } /* Free Share — optional single photo */ .free-add-photo { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px; margin-bottom: 12px; background: var(--surface-2); border: 1px dashed var(--border); border-radius: 8px; color: var(--text-dim); font: inherit; font-weight: 600; cursor: pointer; transition: border-color .12s, color .12s, background-color .12s; } .free-add-photo:hover { border-color: var(--accent); color: var(--accent); } .free-add-photo-opt { font-weight: 400; opacity: 0.7; } /* Free Share — audience selector (who can see this: a first-class choice) */ .free-audience { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; } .free-audience-label { font-size: 0.75rem; font-weight: 600; color: var(--text-dim); } .free-audience-opts { display: flex; gap: 8px; } .free-audience-opt { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 8px; background: var(--surface-2); border: 1px dashed var(--border); border-radius: 8px; color: var(--text-dim); font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: border-color .12s, color .12s, background-color .12s; } .free-audience-opt:hover { border-color: var(--accent); } .free-audience-opt.active { border-style: solid; border-color: var(--accent); color: var(--text); background: color-mix(in srgb, var(--accent) 9%, transparent); } .free-photo-wrap { margin-bottom: 12px; } .free-photo-tools { display: flex; gap: 8px; } .free-photo-remove { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 8px; padding: 8px 12px; min-height: 36px; font: inherit; font-size: 0.8rem; cursor: pointer; transition: border-color .12s, color .12s; } .free-photo-remove:hover { border-color: var(--danger); color: var(--danger); } /* Shared box for EVERY form control — text inputs, number, textarea, AND computes its intrinsic height slightly differently from an , so even with matching padding/font they end a hair off. Pin both to one explicit height (border-box) and vertically center the text via zero vertical padding. Textarea excluded (multi-line). */ input[type="text"], input[type="search"], input[type="email"], input[type="number"], select { height: 46px; padding-top: 0; padding-bottom: 0; } /* Unified focus cue for every text input: accent border on focus (keyboard nav also keeps the global :focus-visible ring). Borderless composite inputs highlight their wrapper row via :focus-within instead. */ textarea:focus, input[type="text"]:focus, input[type="search"]:focus, input[type="email"]:focus, input[type="number"]:focus, select:focus { border-color: var(--accent); } .location-display { background: var(--surface-2); border-radius: 8px; padding: 10px 12px; font-size: 0.8rem; color: var(--text-dim); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; } /* Reassurance under the compose-screen location: precise coords stay private. */ .location-privacy-note { display: flex; align-items: flex-start; gap: 6px; margin: 0 2px 12px; font-size: 0.72rem; line-height: 1.4; color: var(--text-dim); } .location-privacy-note svg { flex-shrink: 0; margin-top: 1px; color: var(--success); } .stage-actions { display: flex; gap: 8px; } .stage-actions .btn-ghost { flex: 0 0 auto; width: auto; /* override .btn's width:100% so it sizes to content, not full row */ min-width: 96px; } .stage-actions .btn-primary { flex: 1; } /* --- Filter bar --- */ .filter-bar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; margin-bottom: 16px; } .filter-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } /* Location tile — glanceable mini-map (replaces the list/map toggle + 📍 button) */ .loc-tile { position: relative; flex-shrink: 0; width: 52px; height: 52px; padding: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; cursor: pointer; /* subtle radar depth — darker toward the edges */ background: radial-gradient(circle at 50% 50%, var(--surface-2) 0%, var(--surface) 100%); } .loc-tile:hover { border-color: var(--accent); } /* Self-contained CSS/SVG radar (no map lib). currentColor/accent → theme-aware. */ .loc-radar { width: 100%; height: 100%; display: block; pointer-events: none; } .loc-radar-ring, .loc-radar-edge { fill: none; stroke: var(--accent); stroke-opacity: 0.3; stroke-width: 2; } .loc-radar-edge { stroke-opacity: 0.6; transition: r 0.18s ease; /* grows/shrinks live with the radius slider */ } .loc-radar-dot { fill: var(--accent); } /* --- Range slider: iOS-sized (Apple HIG 44pt touch target) --- */ #radius-slider { flex: 1; min-width: 0; -webkit-appearance: none; appearance: none; background: transparent; height: 44px; accent-color: var(--accent); cursor: pointer; touch-action: pan-y; } #radius-slider:focus { outline: none; } #radius-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 40%, transparent); } #radius-slider::-webkit-slider-runnable-track { height: 4px; background: var(--border); border-radius: 2px; } #radius-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); margin-top: -9px; box-shadow: 0 1px 3px rgba(0,0,0,0.3); cursor: grab; } #radius-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.1); } #radius-slider::-moz-range-track { height: 4px; background: var(--border); border-radius: 2px; } #radius-slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,0.3); cursor: grab; } /* Tap-to-cycle radius preset chip */ .radius-chip { font-size: 0.78rem; font-weight: 600; color: var(--accent); background: color-mix(in oklab, var(--accent) 12%, transparent); border: 1px solid color-mix(in oklab, var(--accent) 28%, transparent); border-radius: 999px; padding: 6px 12px; min-width: 60px; height: 40px; /* was 32 — under the 44pt/48dp standard for a frequent control */ text-align: center; cursor: pointer; touch-action: manipulation; transition: background 0.15s, transform 0.1s; flex-shrink: 0; } .radius-chip:hover { background: color-mix(in oklab, var(--accent) 18%, transparent); } .radius-chip:active { transform: scale(0.94); } /* --- Tag chips --- */ .tag-chips { display: flex; flex-wrap: wrap; gap: 6px; } /* --- Chip rail — bounded horizontal scroll for tag-heavy regions --- */ /* Used by follow/filter shelves and feed-item tags: same vertical budget no matter how many tags (10, 20, 30). Momentum scroll + edge fade. */ .chip-rail { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scrollbar-width: none; /* Edge fade signals "more →" without a visible scrollbar */ mask-image: linear-gradient( to right, transparent 0, #000 12px, #000 calc(100% - 16px), transparent 100% ); -webkit-mask-image: linear-gradient( to right, transparent 0, #000 12px, #000 calc(100% - 16px), transparent 100% ); padding: 2px 4px; min-height: 36px; flex: 1 1 auto; min-width: 0; } .chip-rail::-webkit-scrollbar { display: none; } .chip-rail > .tag-chip { flex-shrink: 0; scroll-snap-align: start; } /* Tag and bucket names render Capitalized (each hyphen part too: vintage-wool → Vintage-Wool) — display only, for readability (beta 2026-07-02); stored/matched values stay lowercase-normalized. */ .tag-chip, .tag-label, .followed-tag-name { text-transform: capitalize; } .tag-chip { display: inline-flex; align-items: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; font-size: 0.75rem; color: var(--text-dim); cursor: pointer; overflow: hidden; transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s; /* Chips without a .tag-label child (modals, submit result, map popups) get their own inline padding so they don't look squeezed. */ padding: 4px 12px; } /* Chips that have children (dual-target design in the feed) don't need the chip-level padding — the .tag-label child provides it. */ .tag-chip:has(.tag-label) { padding: 0; } .tag-chip:hover { border-color: var(--accent); color: var(--text); } .tag-chip.active { background: var(--text); color: var(--bg); border-color: var(--text); } /* ─── The Pulse speaks (was: bottom-center toast) ─── * Beta 2026-07-02, owner: messages are WHISPERS from the Pulse, not toast * cards. The stack anchors to the Pulse corner (bottom-right, just above the * FAB); each message is a speech-capsule whose tail corner points at the * Pulse, rippling out of it and retracting back into it. Type reads as a soft * GLOW (green/red/blue), not a border stripe. The corner stays the app's * voice even where the FAB itself is hidden (drawers, desktop). */ .toast-stack { position: fixed; /* Just above the FAB: FAB top ≈ (--pulse-band-h − 24px) + 48px. */ bottom: calc(var(--pulse-band-h, 64px) + 34px); right: calc(20px + env(safe-area-inset-right, 0px)); left: auto; z-index: 2100; /* topmost — above every overlay incl. Teams (900) + modals (1000) */ display: flex; flex-direction: column-reverse; /* newest nearest the Pulse */ align-items: flex-end; gap: 7px; pointer-events: none; max-width: min(78vw, 340px); } .toast { background: color-mix(in oklab, var(--surface) 90%, transparent); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); border: none; /* Speech-capsule: soft everywhere except the corner facing the Pulse. */ border-radius: 16px 16px 4px 16px; padding: 9px 14px; font-size: 0.8rem; color: var(--text); line-height: 1.35; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.38), 0 0 0 1px color-mix(in oklab, var(--accent) 32%, transparent), 0 0 14px -2px color-mix(in oklab, var(--accent) 45%, transparent); pointer-events: auto; cursor: pointer; transform-origin: 100% 100%; /* ripple from / retract into the Pulse corner */ animation: pulse-speak-in 0.3s cubic-bezier(0.2, 0.9, 0.3, 1); white-space: pre-wrap; } /* Toast with an inline action (e.g. Undo): message + button on one row. The button is the only click target, so it doesn't inherit the toast's cursor. */ .toast:has(.toast-action) { display: flex; align-items: center; gap: 12px; cursor: default; } .toast .toast-msg { flex: 1 1 auto; } .toast .toast-action { flex: 0 0 auto; background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--accent); font: inherit; font-weight: 700; padding: 3px 10px; cursor: pointer; transition: background 0.12s, border-color 0.12s; } .toast .toast-action:hover { background: color-mix(in oklab, var(--accent) 14%, transparent); border-color: var(--accent); } /* Type = the color of the glow, not a stripe. */ .toast.toast-error { box-shadow: 0 4px 18px rgba(0, 0, 0, 0.38), 0 0 0 1px color-mix(in oklab, var(--danger) 42%, transparent), 0 0 14px -2px color-mix(in oklab, var(--danger) 55%, transparent); } .toast.toast-success { box-shadow: 0 4px 18px rgba(0, 0, 0, 0.38), 0 0 0 1px color-mix(in oklab, var(--success) 42%, transparent), 0 0 14px -2px color-mix(in oklab, var(--success) 55%, transparent); } .toast.toast-info { box-shadow: 0 4px 18px rgba(0, 0, 0, 0.38), 0 0 0 1px color-mix(in oklab, var(--info) 42%, transparent), 0 0 14px -2px color-mix(in oklab, var(--info) 55%, transparent); } .toast.toast-leaving { animation: pulse-speak-out 0.22s ease-in forwards; } @keyframes pulse-speak-in { 0% { opacity: 0; transform: translate(16px, 16px) scale(0.55); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } } @keyframes pulse-speak-out { to { opacity: 0; transform: translate(14px, 14px) scale(0.6); } } @media (prefers-reduced-motion: reduce) { .toast { animation: pulse-speak-fade 0.2s ease; } .toast.toast-leaving { animation: none; opacity: 0; transition: opacity 0.2s; } } @keyframes pulse-speak-fade { from { opacity: 0; } to { opacity: 1; } } /* ─── Confirm / Prompt dialog (blocking, replaces confirm/prompt) ─── */ .ui-dialog { position: fixed; inset: 0; background: var(--backdrop); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); z-index: 2000; /* confirm/prompt sits above every overlay incl. Teams (900) + modals (1000) */ display: none; align-items: center; justify-content: center; padding: 20px; } .ui-dialog.open { display: flex; } .ui-dialog-content { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); max-width: 440px; width: 100%; padding: 24px; animation: dialog-in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1); } @keyframes dialog-in { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } } .ui-dialog-message { font-size: 0.9rem; line-height: 1.5; margin-bottom: 16px; white-space: pre-wrap; } .ui-dialog-input { width: 100%; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; color: var(--text); padding: 10px 12px; font-family: var(--font); font-size: 0.9rem; margin-bottom: 16px; } .ui-dialog-input:focus { border-color: var(--accent); } .ui-dialog-actions { display: flex; gap: 8px; justify-content: flex-end; } .ui-dialog-actions .btn { width: auto; margin: 0; padding: 10px 20px; min-width: 100px; } /* ─── Image overlay (full-size lightbox) ─── */ .image-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.95); z-index: 300; /* above the share modal */ display: none; align-items: center; justify-content: center; cursor: zoom-out; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .image-overlay.open { display: flex; } .image-overlay img { max-width: 95vw; max-height: 95vh; object-fit: contain; border-radius: 4px; box-shadow: 0 0 40px rgba(255, 107, 53, 0.2); /* We own the pinch/pan gesture (App._bindImageZoom); stop the browser from scrolling or treating it as native zoom, and scale from the center. */ touch-action: none; transform-origin: center center; will-change: transform; -webkit-user-select: none; user-select: none; } /* Explicit ✕ on the lightbox (tap-anywhere still works) — discoverability. */ .image-overlay-close { position: fixed; top: calc(16px + env(safe-area-inset-top)); right: 16px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; color: #fff; cursor: pointer; z-index: 1; transition: border-color .12s, color .12s, background .12s; } .image-overlay-close:hover { border-color: var(--accent); color: var(--accent); background: rgba(0, 0, 0, 0.7); } .image-overlay-close svg { display: block; } /* ─── Modal (share detail) ─── */ .modal { position: fixed; inset: 0; background: var(--backdrop); z-index: 200; display: none; align-items: center; justify-content: center; /* Respect iOS safe areas so the centered card (and its ✕) never sits under the status bar / Dynamic Island or the home indicator. env() fallback first. */ padding: 20px; padding: calc(20px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom)); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .modal.open { display: flex; } .modal-content { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); max-width: 600px; width: 100%; /* Cap to the space left INSIDE the modal's safe-area padding so a tall card never overflows and re-pushes the ✕ up under the status bar. */ max-height: 90vh; /* fallback */ max-height: calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); /* Shell does NOT scroll — the inner .modal-scroll does — so the ✕ (absolutely positioned here) stays pinned to the top-right while content scrolls. */ display: flex; flex-direction: column; overflow: hidden; padding: 0; position: relative; } .modal-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 20px; min-height: 0; /* flexbox: allow the item to shrink so it scrolls (not clip) */ } .modal-close { position: absolute; top: 12px; right: 12px; z-index: 2; /* stay above the scrolling .modal-scroll content */ background: var(--surface-2); border: 1px solid var(--border); color: var(--text); width: 36px; height: 36px; /* all close-✕s standardized at 36px (UIX-AUDIT item 4) */ border-radius: 50%; cursor: pointer; font-size: 1rem; display: flex; align-items: center; justify-content: center; transition: border-color .12s, color .12s; } .modal-close:hover { border-color: var(--accent); color: var(--accent); } /* Grabber pill for the Share popup — a touch affordance + drag handle for swipe-down-to-dismiss. Pinned at the top of the card (above the scrolling content, like the ✕) so it stays visible through a long share. Touch devices only — there's no swipe with a mouse, and a pill would imply a drag that can't happen. The element is a generous transparent hit target; ::after draws the small visible bar with a soft halo so it reads over a photo OR text. */ .modal-grabber { display: none; } @media (hover: none) and (pointer: coarse) { .modal-grabber { display: block; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 2; width: 64px; height: 22px; touch-action: none; /* this handle is for dragging, never scrolling */ } .modal-grabber::after { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 40px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.65); box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.3); } } /* Share-popup loading note — the shell opens instantly on tap; this holds the space while the share data is in flight (slow connections). */ .modal-loading { text-align: center; color: var(--text-dim); font-size: 0.85rem; padding: 56px 20px; animation: modal-loading-pulse 1.1s ease-in-out infinite alternate; } @keyframes modal-loading-pulse { from { opacity: 0.45; } to { opacity: 1; } } .modal-img { width: 100%; border-radius: 8px; margin-bottom: 12px; } /* Owner photo-edit controls — a small floating toolbar ON the picture (rotate · remove). The wrap owns the spacing so the overlay can anchor to the image. */ .modal-img-wrap { position: relative; margin-bottom: 12px; } .modal-img-wrap .modal-img { margin-bottom: 0; display: block; } /* Anchored BOTTOM-right of the image, not top-right: the modal close ✕ floats over the image's top-right corner (top:12/right:12), so a top-anchored toolbar collided with it — especially the trash button on narrow mobile screens. Bottom-right clears the ✕ entirely and sits on the least-important part of most photos. */ .modal-photo-edit { position: absolute; bottom: 8px; right: 8px; display: flex; gap: 6px; z-index: 2; } .photo-edit-btn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 8px; border: none; cursor: pointer; background: rgba(0, 0, 0, 0.55); color: #fff; -webkit-tap-highlight-color: transparent; transition: background 0.15s ease; } .photo-edit-btn:hover { background: rgba(0, 0, 0, 0.74); } .photo-edit-btn svg { width: 18px; height: 18px; display: block; } /* "Add a photo" — sits in the image slot for your own photo-less share. */ .modal-add-photo { width: 100%; margin-bottom: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 22px 12px; border-radius: 8px; cursor: pointer; border: 1.5px dashed var(--border); background: transparent; color: var(--text-dim); font-size: 0.85rem; font-weight: 600; -webkit-tap-highlight-color: transparent; transition: border-color 0.15s, color 0.15s; } .modal-add-photo:hover { border-color: var(--accent); color: var(--accent); } .modal-add-photo svg { width: 22px; height: 22px; } .modal-text { font-size: 1rem; line-height: 1.5; margin-bottom: 16px; white-space: pre-wrap; } .corrected-badge { display: inline-block; margin-left: 8px; padding: 2px 8px; background: var(--surface-2); border: 1px solid var(--info); color: var(--info); border-radius: 10px; font-size: 0.65rem; vertical-align: middle; font-weight: 600; cursor: help; } /* AI-corrected + Edited pills share one row under the text (EDIT-SHARES.md P1). */ .modal-meta-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .modal-meta-badges .corrected-badge { margin-left: 0; } /* "Edited" is author action, not AI — neutral tone to distinguish from AI corrected. */ .edited-badge { border-color: var(--text-dim); color: var(--text-dim); } .corrected-badge svg { vertical-align: -1px; } .modal-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; /* tags now sit BELOW the details block */ } /* Title row: title on the left, Save/Message/Flag icon buttons on the right. */ .modal-headrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .modal-headrow.under-close { padding-right: 44px; } /* clear the ✕ on text posts */ .modal-headrow-title { flex: 1 1 auto; min-width: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.3; } .share-iconbtn { position: relative; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: 50%; color: var(--text); cursor: pointer; transition: border-color .12s, color .12s; } .iconbtn-badge { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; display: flex; align-items: center; justify-content: center; background: var(--danger); color: #fff; font-size: 0.62rem; font-weight: 700; line-height: 1; border-radius: 999px; border: 1px solid var(--surface); } /* Quick first-contact message pop-up (centered, lightweight). Sits OVER the share modal (z-index 200) so the listing stays visible/dimmed behind it. */ #quick-message-modal { z-index: 210; } .qm-content { max-width: 420px; } .qm-title { margin-bottom: 12px; font-size: 1.1rem; } .qm-listing { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-dim); background: var(--surface-2); border-radius: 8px; padding: 8px 10px; margin-bottom: 12px; } .qm-listing svg { flex-shrink: 0; } .qm-listing span { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qm-input { min-height: 84px; margin-bottom: 12px; } .qm-send { width: 100%; } .share-iconbtn svg { display: block; } .share-iconbtn:hover { border-color: var(--accent); color: var(--accent); } .share-iconbtn.is-active { color: var(--accent); border-color: var(--accent); } .share-iconbtn.is-flagged { color: var(--danger); border-color: var(--danger); } /* Owner's Delete on the detail popup — danger-tinted at rest so it can't be * mistaken for a neutral tool (#4, beta 2026-07-01). */ .share-iconbtn.is-danger { color: var(--danger); } .share-iconbtn.is-danger:hover { border-color: var(--danger); color: var(--danger); } .share-own-note { font-size: 0.72rem; color: var(--text-dim); white-space: nowrap; } .modal-meta { font-size: 0.75rem; color: var(--text-dim); display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--border); padding-top: 12px; } .modal-meta strong { color: var(--accent); } /* ─── Review queue items ─── */ .review-item { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-bottom: 12px; } .review-ai-badge { background: rgba(52, 152, 219, 0.12); border: 1px solid var(--info); color: var(--info); font-size: 0.7rem; padding: 6px 10px; border-radius: 6px; margin-bottom: 10px; font-weight: 600; } .review-img { width: 100%; max-height: 200px; object-fit: cover; border-radius: 6px; margin-bottom: 8px; } .review-text { font-size: 0.85rem; margin-bottom: 8px; white-space: pre-wrap; } .review-meta { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--text-dim); margin-bottom: 10px; } .review-vote-bar { display: flex; gap: 8px; } .review-vote-bar .btn { flex: 1; margin: 0; } .btn-success { background: rgba(46, 204, 113, 0.15); color: var(--success); border-color: var(--success); } .btn-success:hover { background: var(--success); color: #fff; } .btn-danger { background: rgba(231, 76, 60, 0.15); color: var(--danger); border-color: var(--danger); } .btn-danger:hover { background: var(--danger); color: #fff; } /* --- Feed --- */ /* Rowed-tile grid — 2 columns on mobile, image-first tiles (FB-Marketplace scan pattern). Both Following and Nearby reuse the same grid. */ .feed { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; align-items: start; /* Cap the feed width so tiles (and their thumbs) stop growing on wide desktops — they hold a comfortable size and the grid centers instead. */ max-width: 1040px; margin-inline: auto; } /* Wider viewports get more columns; tiles stay a comfortable scan size. */ @media (min-width: 720px) { .feed { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1040px) { .feed { grid-template-columns: repeat(4, 1fr); } } /* Non-tile rows (loading text, active-filter chips) span the whole grid. */ .feed > .feed-loading, .feed > .active-filters { grid-column: 1 / -1; } /* Keep each feed section (incl. the "Nearby" toggle bar) aligned with its centered, width-capped grid on wide desktops. */ #nearby-feed-followed-section, #nearby-feed-other-section { max-width: 1040px; margin-inline: auto; } /* ── LIST layout: one share per row — square thumbnail left, text right (classifieds scan pattern). Same tile DOM as Packed; CSS turns the column card into a row. Width-capped tighter than the grid so lines stay readable on desktop. (Replaced the retired uniform-GRID mode, 2026-06-11.) ── */ .feed.layout-list { display: flex; flex-direction: column; gap: 10px; max-width: 720px; /* The base .feed grid sets align-items:start, which in this flex column shrink-wraps each row to its content — stretch keeps every row full width. */ align-items: stretch; } /* Every row the SAME size: fixed height + full track width, so the list scans as an even stack regardless of how much text a share carries. The height is budgeted for the worst case (badge row + 2-line title + 1-line snippet + meta); shorter content just gets slack, absorbed above the pinned meta row. */ .feed.layout-list .feed-item { flex-direction: row; aspect-ratio: auto; height: 124px; } .feed.layout-list .feed-thumb { flex: 0 0 124px; /* square: matches the row height */ width: 124px; height: 100%; min-height: 0; aspect-ratio: auto; /* object-fit:cover crops to the square */ } .feed.layout-list .feed-body { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 9px 12px; } /* Rows are shorter than tiles — tighter clamps keep every row scannable. (.feed-item in the selector outranks the no-thumb clamp-4 rule below.) */ .feed.layout-list .feed-item .feed-title { -webkit-line-clamp: 2; flex-shrink: 0; /* never mid-line-clip the title to fit the row */ } .feed.layout-list .feed-item .feed-desc { -webkit-line-clamp: 1; max-height: 1.4em; } .feed.layout-list .feed-item-meta { margin-top: auto; } /* pin to the row bottom */ /* ── PACKED layout: row-major masonry. Tiles keep their natural height and pack tightly (short text tiles beside tall image tiles, no dead gap), but unlike a CSS multi-column masonry the reading order stays LEFT-TO-RIGHT: App._feedItemsHtml distributes tiles round-robin into N columns (tile i → column i % N), so Newest reads across the top row, then down. N (2/3/4) is chosen in JS to match the grid breakpoints and re-flows on resize. ── */ .feed.layout-packed { display: block; } .feed-cols { display: flex; gap: 12px; align-items: flex-start; max-width: 1040px; margin-inline: auto; } .feed-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; } .feed.layout-packed .feed-item { aspect-ratio: auto; /* natural, content-driven height */ } /* Full-width notices (loading / active-filter chips) sit above the columns. */ .feed.layout-packed > .feed-loading, .feed.layout-packed > .active-filters { margin-bottom: 12px; } .feed-loading { text-align: center; color: var(--text-dim); padding: 40px; font-size: 0.85rem; } .feed-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; /* clip the edge-to-edge image to the radius */ cursor: pointer; transition: border-color 0.15s, background-color 0.15s; display: flex; flex-direction: column; } .feed-item:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); } /* Following is the default canvas — no container chrome, edge-to-edge grid. */ #nearby-feed-followed-section { margin-bottom: 12px; } /* Nearby is collapsed behind a single tap bar — no container chrome either. */ #nearby-feed-other-section { margin-bottom: 14px; } /* Collapsed Nearby bar: "📍 Nearby · X · ⌄" */ /* A little space below the whole Nearby section so its bar (and, when expanded, its list) never butts up against the fixed Promoted band beneath the feed. */ #nearby-feed-other-section { margin-bottom: 14px; } .nearby-toggle { display: flex; align-items: center; gap: 8px; width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 14px; /* ≥44px row height (HIG) */ color: var(--text-dim); font-size: 0.78rem; font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.12s ease, border-color 0.12s ease; } .nearby-toggle:hover { background: var(--surface-2); border-color: var(--text-dim); } .nearby-toggle:active { transform: scale(0.995); } .nearby-toggle-pin { color: var(--text-dim); flex-shrink: 0; } .nearby-toggle-label { text-transform: uppercase; letter-spacing: 1.2px; font-size: 0.7rem; } .nearby-toggle-count { background: var(--surface-2); color: var(--text); font-weight: 600; font-size: 0.72rem; padding: 1px 8px; border-radius: 999px; min-width: 20px; text-align: center; } .nearby-toggle-chevron { margin-left: auto; color: var(--text-dim); transition: transform 0.18s ease; flex-shrink: 0; } .nearby-toggle[aria-expanded="true"] .nearby-toggle-chevron { transform: rotate(180deg); } .nearby-toggle[aria-expanded="true"] { border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0; } #nearby-other-list { margin-top: 10px; } /* Following-empty notice (shown when buckets match nothing nearby) */ .following-empty { color: var(--text-dim); font-size: 0.82rem; text-align: center; padding: 18px 12px; } .feed-item:active { transform: scale(0.99); } .active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px; background: var(--surface-2); border-radius: 8px; margin-bottom: 12px; } /* ─── Followed tags shelf ─── */ .followed-shelf { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--border); margin-top: 8px; flex-wrap: nowrap; min-width: 0; } /* Shelf label: fixed width pill with count (✓ 10 / ✕ 20) */ .followed-shelf .shelf-label, .filtered-shelf .shelf-label { flex-shrink: 0; font-size: 0.72rem; padding: 3px 8px; border-radius: 999px; white-space: nowrap; } .followed-shelf .shelf-label { background: color-mix(in oklab, var(--success) 14%, transparent); color: var(--success); } .filtered-shelf .shelf-label { background: color-mix(in oklab, var(--danger) 14%, transparent); color: var(--danger); } .shelf-label { font-size: 0.65rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; } .tag-chip.followed { background: rgba(46, 204, 113, 0.15); border-color: var(--success); color: var(--success); } /* Matched: this exact tag is *why* the share is in your feed (flat follow or a Following-bucket hit). Leads the tile and gets a ▸ marker so the "why" reads at a glance. Source-ordered after .followed so it wins when both apply. */ .tag-chip.matched { background: color-mix(in oklab, var(--accent) 20%, transparent); border-color: var(--accent); color: var(--accent); font-weight: 600; } .tag-chip.matched .tag-label::before { content: "\25B8"; /* ▸ */ margin-right: 4px; opacity: 0.85; } /* ─── Compact feed-tile tag chip ─── Single-target (whole chip opens the state-aware menu, no kebab) and tinted by match: on a tile every reason-tag is a FOLLOW match (a filter tag would exclude the share), so it reads green — echoing the Following section and the follow bucket-dots. The ▸ marker lives on the chip itself since the tile chip has no inner .tag-label. */ .tag-chip-tile { font-size: 0.62rem; font-weight: 600; padding: 2px 9px; max-width: 100%; } .tag-chip-tile.matched { background: color-mix(in oklab, var(--success) 18%, transparent); border-color: var(--success); color: var(--success); } .tag-chip-tile.matched::before { content: "\25B8"; /* ▸ */ margin-right: 4px; opacity: 0.85; } .tag-chip-tile:hover { border-color: var(--success); color: var(--success); } /* Muted (session-off) state on shelf chips — visibly disabled but still tappable to re-activate. Only removes from persistent lists via Me drawer. */ .tag-chip.muted { opacity: 0.38; background: transparent !important; border-style: dashed; font-style: italic; text-decoration: line-through; } .tag-chip.muted:hover { opacity: 0.6; } .tag-chip.filtered { background: rgba(231, 76, 60, 0.15); border-color: var(--danger); color: var(--danger); cursor: pointer; } /* ─── Dual-target tag chip: label + menu button + expandable actions ─── */ .tag-chip .tag-label { padding: 4px 4px 4px 12px; cursor: pointer; } .tag-chip .tag-menu-btn { background: transparent; border: none; color: inherit; cursor: pointer; padding: 4px 8px 4px 6px; font-size: 0.95rem; line-height: 1; opacity: 0.8; /* was 0.55 — failed the 3:1 graphics floor (UIX-AUDIT item 1) */ transition: opacity 0.15s, color 0.15s; font-family: var(--font); font-weight: 700; } .tag-chip .tag-menu-btn:hover, .tag-chip.menu-open .tag-menu-btn { opacity: 1; color: var(--accent); } .tag-chip .tag-actions { display: none; align-items: center; gap: 4px; padding-right: 6px; } .tag-chip.menu-open .tag-actions { display: inline-flex; animation: tag-actions-in 0.18s cubic-bezier(0.2, 0.9, 0.3, 1); } .tag-chip.menu-open { /* Subtle lift when the menu is open */ box-shadow: 0 2px 8px var(--shadow-soft); } @keyframes tag-actions-in { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: translateX(0); } } .tag-action { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-family: var(--font); font-size: 0.7rem; font-weight: 600; padding: 4px 10px; border-radius: 12px; cursor: pointer; white-space: nowrap; line-height: 1; } .tag-action.tag-action-follow:hover, .tag-action.tag-action-follow:focus-visible { background: rgba(46, 204, 113, 0.15); border-color: var(--success); color: var(--success); } .tag-action.tag-action-hide:hover, .tag-action.tag-action-hide:focus-visible { background: rgba(231, 76, 60, 0.15); border-color: var(--danger); color: var(--danger); } /* ─── Cascade popover (tag ⋮ menu, bucket v expand) ─── */ .tag-popover { position: fixed; display: none; z-index: 1000; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45); padding: 6px 0; min-width: 200px; max-width: 320px; font-size: 0.78rem; animation: popover-in 0.14s cubic-bezier(0.2, 0.9, 0.3, 1); } .tag-popover.open { display: block; } @keyframes popover-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .popover-section { padding: 4px 0; border-bottom: 1px solid var(--border); } .popover-section:last-child { border-bottom: none; } .popover-header { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); padding: 6px 14px 4px; } .popover-item { display: block; width: 100%; text-align: left; background: transparent; border: none; color: var(--text); font-family: var(--font); font-size: 0.78rem; padding: 8px 14px; cursor: pointer; line-height: 1.2; } .popover-item:hover, .popover-item:focus-visible { background: var(--surface-2); } .popover-item.accent { color: var(--accent); } .popover-item.destructive { color: var(--danger); } .popover-item.destructive:hover { background: rgba(231, 76, 60, 0.12); } .popover-children { display: flex; flex-wrap: wrap; gap: 5px; padding: 6px 12px 10px; } .popover-empty { padding: 4px 14px 8px; font-size: 0.7rem; color: var(--text-dim); font-style: italic; } .popover-input-row { padding: 6px 12px 8px; } .popover-input { width: 100%; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; font-family: var(--font); font-size: 0.85rem; color: var(--text); box-sizing: border-box; } .popover-input:focus { border-color: var(--accent); } /* Suggested-tag activity score badge inside a tag chip. Full opacity — at 0.55 it measured 2.5:1 (AA fail, UIX-AUDIT item 1); size differentiates. */ .tag-chip .tag-score { font-size: 0.6rem; padding: 0 4px; align-self: center; font-variant-numeric: tabular-nums; } /* ─── Reset type="search" appearance so it looks like a normal text input. We use type="search" for tag/bucket name fields to dodge iOS Safari's contact-autofill heuristics, which ignore autocomplete="off" on type="text" but skip type="search". ─── */ input[type="search"].popover-input { -webkit-appearance: none; appearance: none; border-radius: inherit; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { -webkit-appearance: none; display: none; } /* ─── Combined parent picker (popover items with color dots) ─── */ .popover-title { font-size: 0.78rem; text-transform: none; letter-spacing: 0; color: var(--text); font-weight: 700; padding: 8px 14px 6px; border-bottom: 1px solid var(--border); } .popover-subhead { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-dim); padding: 6px 14px 2px; } .popover-item.bucket-pick, .popover-item.bucket-new { display: flex; align-items: center; gap: 8px; } .popover-item.bucket-pick.follow, .popover-item.bucket-new.follow { color: var(--success); } .popover-item.bucket-pick.filter, .popover-item.bucket-new.filter { color: var(--danger); } .popover-item.bucket-pick:hover, .popover-item.bucket-new:hover { background: var(--surface-2); } .bucket-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .bucket-dot.follow { background: var(--success); } .bucket-dot.filter { background: var(--danger); } .bucket-pick-meta { margin-left: auto; font-size: 0.65rem; color: var(--text-dim); font-weight: 500; } /* Membership rows ("In your lists — tap to remove"): the tag is already in this bucket, so the row is a remove action. A faint backing + a ✓ leading dot read it as "you're in here", and the trailing ✕ + danger hover read "tap to take it out". */ .popover-item.bucket-member { display: flex; align-items: center; gap: 8px; background: color-mix(in oklab, var(--surface-2) 70%, transparent); } .popover-item.bucket-member.follow { color: var(--success); } .popover-item.bucket-member.filter { color: var(--danger); } .popover-item.bucket-member .bucket-pick-meta { color: var(--danger); opacity: 0.8; } .popover-item.bucket-member:hover { background: rgba(231, 76, 60, 0.12); } /* Make the menu button on Me's followed-row use the popover-friendly hit area */ .me-row-menu-btn { font-weight: 700; } /* ─── Bucket parent chips in shelves ─── */ .tag-chip.bucket { font-weight: 600; } .tag-chip.bucket .tag-menu-btn { font-size: 0.85rem; font-weight: 700; } /* ─── Me drawer: bucket management rows ─── */ .buckets-list { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; } .bucket-row { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; } .bucket-row-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .bucket-row-name { font-weight: 600; font-size: 0.85rem; flex: 1; } /* Action buttons read as quiet CONTROLS — neutral at rest (a light filled chip that still pops off the tinted row), revealing their intent COLOR only on hover. Default hover = Edit (neutral); .pause (accent) / .destructive (danger) below. Keeps the panel calm; color appears only when you reach for an action. */ .bucket-row-action { background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); border-radius: 6px; padding: 3px 9px; font-size: 0.75rem; cursor: pointer; transition: background-color .12s, color .12s, border-color .12s; } .bucket-row-action:hover { background: var(--surface-2); border-color: var(--text-dim); color: var(--text); } .bucket-row-children { display: flex; flex-wrap: wrap; gap: 5px; } /* Neutral bucket-child chip — quiet light pill, no kind color, not interactive itself (the bucket row's color already says follow/filter). */ .tag-chip.bucket-child { background: var(--surface); border-color: var(--border); color: var(--text); cursor: default; } .tag-chip.bucket-child:hover { background: var(--surface); border-color: var(--border); color: var(--text); box-shadow: none; } /* Red scoped-veto chip inside a bucket row — "kept out of THIS bucket only" (Option B, 2026-07-02). Distinct from the global Filter list's chips. */ .tag-chip.bucket-child.veto, .tag-chip.bucket-child.veto:hover { border-color: color-mix(in oklab, var(--danger) 55%, var(--border)); color: var(--danger); text-decoration: line-through; } .bucket-child-remove { background: transparent; border: none; color: var(--text-dim); /* no opacity — at 0.6 the × measured 2.7:1 (3:1 graphics floor) */ margin-left: 5px; padding: 1px 4px; border-radius: 50%; cursor: pointer; font-size: 0.85rem; line-height: 1; transition: background-color .12s, color .12s, opacity .12s; } /* Only the ✕ reacts — a caution (delete) wash on hover. */ .bucket-child-remove:hover { opacity: 1; background: color-mix(in oklab, var(--danger) 22%, transparent); color: var(--danger); } /* ── Bucket kind = color (no more follow/filter wording) ── Subtle tinted wash + a colored left edge so follow (green) and filter (red) buckets read apart at a glance. */ .bucket-row.followed { border-left: 3px solid var(--success); background: color-mix(in oklab, var(--success) 8%, var(--surface-2)); } .bucket-row.filtered { border-left: 3px solid var(--danger); background: color-mix(in oklab, var(--danger) 8%, var(--surface-2)); } .bucket-row.followed .bucket-row-name { color: var(--success); } .bucket-row.filtered .bucket-row-name { color: var(--danger); } /* Intent color appears only on rollover: Pause = accent (orange), Delete = danger (red). At rest both use the neutral base above. */ .bucket-row-action.pause:hover { background: color-mix(in oklab, var(--accent) 16%, var(--surface)); border-color: var(--accent); color: var(--accent); } .bucket-row-action.destructive:hover { background: color-mix(in oklab, var(--danger) 16%, var(--surface)); border-color: var(--danger); color: var(--danger); } /* Add-a-tag = constructive: reveals the success accent on rollover. */ .bucket-row-action.add-child:hover { background: color-mix(in oklab, var(--success) 16%, var(--surface)); border-color: var(--success); color: var(--success); } /* Paused: strike the name, dim the children, keep the row's kind tint + the resume button fully visible so the state is obvious and reversible. */ .bucket-row.paused .bucket-row-name { text-decoration: line-through; text-decoration-thickness: 1.5px; color: var(--text-dim); } .bucket-row.paused .bucket-row-children { opacity: 0.45; } .bucket-paused-pill { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; white-space: nowrap; } /* ── Buckets & Tags header: title (toggle) + right-justified create actions ── */ .me-accordion-headrow { display: flex; align-items: center; gap: 6px; } .me-accordion-headrow .me-accordion-header { width: auto; flex: 1 1 auto; } /* Hovering the title (toggle) greys the WHOLE row — including under the + buttons — so the rollover isn't cut off. The inner button stays transparent so there's no double-painted box. */ .me-accordion-headrow:has(.me-accordion-header:hover) { background: var(--surface-2); } .me-accordion-headrow .me-accordion-header:hover { background: transparent; } .me-bt-actions { display: flex; gap: 6px; flex-shrink: 0; padding-right: 10px; } /* Only meaningful while the section is open. */ .me-accordion-section:not(.open) .me-bt-actions { display: none; } /* Same action pills at the top of the dedicated Buckets & Tags drawer — always visible there (no accordion), pushed to the right. */ .bt-drawer-actions { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 12px; } /* ░░░ Buckets & Tags focus mode ░░░ The header TAGS button opens this same drawer showing ONLY the Buckets & Tags panel — not a Me clone. Hide the profile, stats, and every sibling section; the drawer title already reads "Buckets & Tags", so drop the now-redundant section header row too (but keep + Bucket / + Tag, aligned right). */ #me-drawer.bt-focus .me-profile, #me-drawer.bt-focus .me-stats, #me-drawer.bt-focus .me-accordion-section:not([data-me-section="buckets-tags"]) { display: none; } #me-drawer.bt-focus [data-me-section="buckets-tags"] .me-accordion-header { display: none; } #me-drawer.bt-focus [data-me-section="buckets-tags"] .me-accordion-headrow { justify-content: flex-end; padding-top: 4px; } #me-drawer.bt-focus [data-me-section="buckets-tags"] .me-accordion-body { border-top: none; } /* "+ Bucket" / "+ Tag" — neutral at rest (surface-2 pops on the white header), accent only on hover. (Reuses .bucket-row-action base for shape/size.) */ .me-bt-actions .add-new { background: var(--surface-2); border-color: var(--border); color: var(--text-dim); font-weight: 600; white-space: nowrap; } .me-bt-actions .add-new:hover { background: color-mix(in oklab, var(--accent) 16%, var(--surface-2)); border-color: var(--accent); color: var(--accent); } /* ── ME pop-ups (New Bucket / New Tag) — Search/Radius sheet, layered over the ME drawer (z 150), so they need a higher stacking context. ── */ .me-popover { position: fixed; inset: 0; z-index: 250; display: none; } .me-popover.open { display: block; } .me-popover-input { width: 100%; } /* New Bucket — explainer under the name input */ .nb-kind-hint { font-size: 0.72rem; color: var(--text-dim); line-height: 1.4; } /* New Tag — step 2 destination chooser */ .nt-dest { gap: 10px; } .nt-dest-head { font-size: 0.9rem; } .nt-dest-head strong { color: var(--accent); } .nt-bucket-list { display: flex; flex-direction: column; gap: 6px; max-height: 40vh; overflow-y: auto; } .nt-bucket { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--border); border-left-width: 3px; background: var(--surface-2); color: var(--text); font: inherit; cursor: pointer; transition: background-color .12s, border-color .12s; } .nt-bucket.followed { border-left-color: var(--success); } .nt-bucket.filtered { border-left-color: var(--danger); } .nt-bucket:hover { background: var(--surface); border-color: var(--accent); } /* Selected destination — accent ring + trailing ✓ */ .nt-bucket.is-selected { background: var(--surface); border-color: var(--accent); } .nt-bucket.is-selected::after { content: "\2713"; color: var(--accent); font-weight: 700; flex-shrink: 0; } /* Stance chooser (bucket-+ step 2): stacked label + plain-words hint. Text WRAPS — the old nowrap row ellipsized "Keep it out of…" (beta 2026-07-02). */ .nt-stance { display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border); border-left-width: 3px; background: var(--surface-2); color: var(--text); font: inherit; cursor: pointer; transition: background-color .12s, border-color .12s; } .nt-stance.followed { border-left-color: var(--success); } .nt-stance.filtered { border-left-color: var(--danger); } .nt-stance:hover { background: var(--surface); border-color: var(--accent); } .nt-stance.is-selected { background: var(--surface); border-color: var(--accent); } .nt-stance-label { display: flex; align-items: center; gap: 7px; font-weight: 600; } .nt-stance.is-selected .nt-stance-label::after { content: "\2713"; color: var(--accent); font-weight: 700; margin-left: auto; } .nt-stance-hint { display: block; margin-top: 3px; font-size: 0.72rem; color: var(--text-dim); white-space: normal; line-height: 1.35; } /* Section headers in two-section feed */ .section-header { font-size: 0.7rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1.5px; padding: 14px 4px 8px; border-bottom: 1px solid var(--border); margin-bottom: 10px; } /* Followed-row in Me screen — draggable list */ .followed-list { display: flex; flex-direction: column; gap: 4px; } .followed-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; font-size: 0.8rem; cursor: grab; transition: all 0.15s; } .followed-row.dragging { opacity: 0.4; cursor: grabbing; } .drag-handle { color: var(--text-dim); cursor: grab; } .followed-position { background: var(--success); color: #fff; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; font-weight: 700; flex-shrink: 0; } .followed-tag-name { flex: 1; color: var(--success); font-weight: 600; } .followed-row:hover { border-color: var(--success); } .arrow-btn { background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); width: 28px; height: 28px; border-radius: 4px; cursor: pointer; font-size: 0.85rem; padding: 0; } .arrow-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); } .arrow-btn:disabled { opacity: 0.3; cursor: not-allowed; } .arrow-btn.remove { color: var(--danger); } .arrow-btn.remove:hover { background: var(--danger); color: #fff; border-color: var(--danger); } /* Photo tile: square image fills the tile top, body sits beneath. */ .feed-thumb { width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; border-radius: 0; border: none; display: block; } /* Packed/masonry thumbs fill the column width, so "smaller" = shorter: drop the square to a slightly landscape ratio (~17% less height), matching the grid's smaller thumb. Text is unaffected. */ .feed.layout-packed .feed-thumb { aspect-ratio: 7 / 5; } /* flatter still than 6/5 = shorter thumb */ /* Text-only tile: no image, so the title is the hero and the tile gets a faint tinted cap so it still reads as a tile in the photo grid (the Mix). */ .feed-item.no-thumb { background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 7%, var(--surface)) 0%, var(--surface) 46%); } /* Hover tint for text-only tiles: the gradient (a background-image) sits over the plain hover color above, so re-state it with both stops lightly tinted. */ .feed-item.no-thumb:hover { background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 13%, var(--surface)) 0%, color-mix(in srgb, var(--accent) 6%, var(--surface)) 46%); } .feed-item.no-thumb .feed-title { font-size: 0.98rem; -webkit-line-clamp: 4; margin-top: 2px; } .feed-body { padding: 9px 10px 10px; min-width: 0; /* allow content to shrink */ display: flex; flex-direction: column; gap: 5px; } .feed-title { font-size: 0.88rem; font-weight: 500; color: var(--text); margin-bottom: 6px; line-height: 1.35; /* Show up to 3 lines collapsed, then ellipsize */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } /* Expanded tile: drop the line clamp so the full description shows */ .feed-item.tile-expanded .feed-title { -webkit-line-clamp: unset; display: block; overflow: visible; } /* Text-share body snippet beneath the title. Clamped to 3 lines AND given a hard max-height so a long body can never grow the tile past this ceiling — tiles stay even regardless of how much text the post carries. */ .feed-desc { font-size: 0.78rem; color: var(--text-dim); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-height: calc(1.4em * 3); /* belt-and-suspenders ceiling */ word-break: break-word; } /* Title sits tight against its snippet when one follows. */ .feed-title:has(+ .feed-desc) { margin-bottom: 0; } .feed-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 7px; font-size: 0.68rem; color: var(--text-dim); margin-top: 2px; } .feed-item-meta > span { white-space: nowrap; } /* Distance: right-justified AND given weight — it's the spatial fact the feed is organized around (Distance Presence pillar), so it reads brighter + bolder than the dimmed time on the left. */ .feed-item-meta .meta-dist { margin-left: auto; font-weight: 700; color: var(--text); } /* Unseen-share marker (posted <48h ago AND not yet opened): tinted border on the tile + a small "New" chip leading the meta row. Works in every layout with no overlay; App._markShareSeen strips both when the share is opened. */ .feed-item.is-new { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } .feed-item-meta .meta-new { color: var(--accent); font-weight: 700; font-size: 0.6rem; letter-spacing: 0.5px; text-transform: uppercase; background: color-mix(in srgb, var(--accent) 14%, transparent); padding: 1px 5px; border-radius: 4px; } /* The tile meta row is now just posted-time (left) + distance (right); the density gate no longer trims it (handle/score/loc moved to the Share view). */ /* Feed-item tags wrap within the narrow tile (matched chips lead, max 2 + a "more" affordance), so the tile height stays tight and even. */ .feed-item-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 4px; margin-top: 1px; overflow: visible; } .feed-item-tags > .tag-chip { flex-shrink: 0; } .feed-item .tag-chip { font-size: 0.65rem; padding: 2px 8px; } /* --- Me screen --- */ /* Profile header — avatar + identity + edit, the confident top of ME */ .me-profile { display: flex; align-items: center; gap: 12px; padding: 14px 0 16px; } .me-avatar { flex-shrink: 0; position: relative; width: 48px; height: 48px; padding: 0; border: none; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 800; text-transform: uppercase; cursor: pointer; overflow: hidden; -webkit-tap-highlight-color: transparent; transition: filter 0.12s ease; } .me-avatar:hover { filter: brightness(1.06); } /* The uploaded picture fills the circle; the letter is hidden behind it. */ .avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; } .me-avatar.has-img { background: var(--surface-2); } /* Camera badge — a small affordance that it's editable; pops on hover/focus. */ .me-avatar-cam { position: absolute; right: -1px; bottom: -1px; width: 19px; height: 19px; border-radius: 50%; background: var(--surface); color: var(--text); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.7); transition: opacity 0.12s ease, transform 0.12s ease; pointer-events: none; } .me-avatar:hover .me-avatar-cam, .me-avatar:focus-visible .me-avatar-cam { opacity: 1; transform: scale(1); } .modal-avatar { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; overflow: hidden; } .modal-avatar.has-img { background: var(--surface-2); } /* ── Author card (share-detail meta) ────────────────────────────────────── Replaces the old dim .modal-meta text stack. A self-contained panel: a prominent avatar + handle + trust on top, an at-a-glance stat row beneath (posted · distance · confirmations), then the full-width person-level actions. Built to hold the coming Subscribe (notify on a handle) and Share-to-linked-wallets ("friends") features. */ .author-card { margin-top: 16px; padding: 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; display: flex; flex-direction: column; gap: 12px; } .author-card-top { display: flex; align-items: center; gap: 12px; } .author-card .modal-avatar { width: 46px; height: 46px; font-size: 1.15rem; } .author-card-id { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; } .author-name-row { display: flex; align-items: center; gap: 8px; } .author-name-row strong { color: var(--text); font-size: 1rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .author-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 0.75rem; color: var(--text-dim); } .author-stat { display: inline-flex; align-items: center; gap: 5px; } .author-stat svg { opacity: .75; flex-shrink: 0; } /* Subscribe — the one person-level action; rides beside the handle, pushed to the far right of the name row. Compact pill so it doesn't crowd the name. */ .author-subscribe { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; color: var(--text); font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease; } .author-subscribe svg { flex-shrink: 0; opacity: .85; } .author-subscribe:hover { border-color: var(--accent); color: var(--accent); } .author-subscribe:hover svg { opacity: 1; } .author-subscribe:active { background: var(--surface-2); } .author-subscribe.is-subscribed { background: var(--accent); border-color: var(--accent); color: #fff; } .author-subscribe.is-subscribed svg { opacity: 1; } .author-name-row .share-own-note { margin-left: auto; flex-shrink: 0; } /* Toolbox — every per-share content tool in one row. Buttons share the width so the row reads as a deliberate strip. Reuses .share-iconbtn (round icon btns, incl. the flag-count badge + active/flagged states). */ .author-tools { display: flex; gap: 8px; border-top: 1px solid var(--border); padding-top: 12px; } .author-tools .share-iconbtn { flex: 1; border-radius: 10px; height: 40px; } /* ── Avatar editor overlay ── */ .avatar-editor { position: fixed; inset: 0; z-index: 150; display: none; } .avatar-editor.open { display: block; } .avatar-editor-backdrop { position: absolute; inset: 0; background: var(--backdrop); } .avatar-editor-sheet { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(94vw, 360px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-heavy); padding: 16px; box-sizing: border-box; } .avatar-editor-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .avatar-editor-title { font-weight: 700; font-size: 1rem; } .avatar-editor-close { background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 9px; border-radius: 8px; display: flex; /* ~38px hit zone (was ~26px) */ } .avatar-editor-close:hover { background: var(--surface-2); color: var(--text); } .avatar-empty { text-align: center; padding: 14px 6px 6px; } .avatar-empty-icon { color: var(--text-dim); margin-bottom: 8px; } .avatar-empty-copy { color: var(--text-dim); font-size: 0.84rem; line-height: 1.45; margin: 0 0 14px; } .avatar-stage { position: relative; width: 288px; max-width: 100%; height: 288px; margin: 0 auto; border-radius: 12px; overflow: hidden; background: #111; touch-action: none; } .avatar-canvas { display: block; touch-action: none; cursor: grab; } .avatar-canvas:active { cursor: grabbing; } /* Circular guide: darkens outside the crop circle via a huge ring shadow. */ .avatar-ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 9999px rgba(0,0,0,0.5); pointer-events: none; } /* ── Builder photo CROP editor (#5) — the avatar editor's overlay pattern with * a RECT viewport + aspect segs. DOM is built by App._ensureCropEditor(). ── */ .crop-editor { position: fixed; inset: 0; z-index: 1200; display: none; background: var(--backdrop); } .crop-editor.open { display: block; } .crop-sheet { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(94vw, 380px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-heavy); padding: 16px; box-sizing: border-box; text-align: center; } .crop-head { font-weight: 700; font-size: 0.92rem; margin-bottom: 10px; } .crop-aspects { display: flex; gap: 6px; justify-content: center; margin-bottom: 10px; } .crop-canvas { display: block; margin: 0 auto; border-radius: 10px; background: #111; touch-action: none; cursor: grab; border: 1px solid var(--border); } .crop-canvas:active { cursor: grabbing; } /* Zoom controls sized for thumbs (beta 2026-07-02): real − / + tap targets plus a fatter track and thumb than the browser default. */ .crop-zoom-row { display: flex; align-items: center; gap: 12px; margin: 14px 2px 6px; color: var(--text-dim); } .crop-zoom-btn { width: 40px; height: 40px; flex-shrink: 0; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text); font-size: 1.35rem; font-weight: 700; line-height: 1; cursor: pointer; } .crop-zoom-btn:active { background: var(--accent); color: #fff; border-color: var(--accent); } .crop-zoom-row input[type="range"] { flex: 1; accent-color: var(--accent); -webkit-appearance: none; appearance: none; height: 34px; background: transparent; } .crop-zoom-row input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--border); } .crop-zoom-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: var(--accent); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); } .crop-zoom-row input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--border); } .crop-zoom-row input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border: none; border-radius: 50%; background: var(--accent); } .crop-actions { display: flex; gap: 10px; margin-top: 12px; } .crop-actions .btn { flex: 1; } .avatar-zoom-row { display: flex; align-items: center; gap: 10px; margin: 14px 2px 4px; } .avatar-zoom-row input[type="range"] { flex: 1; accent-color: var(--accent); } .avatar-zoom-ic { color: var(--text-dim); font-size: 1.1rem; width: 14px; text-align: center; } .avatar-editor-actions { display: flex; gap: 10px; margin-top: 14px; } .avatar-editor-actions .btn { flex: 1; } .me-identity { flex: 1; min-width: 0; } .me-handle-row { display: flex; align-items: center; gap: 8px; } .me-handle-display { font-size: 1.35rem; color: var(--text); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .me-score { flex-shrink: 0; } .me-edit-btn { flex-shrink: 0; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); width: 40px; height: 40px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .me-edit-btn:hover { color: var(--accent); border-color: var(--accent); } .me-edit-btn svg { display: block; } .me-wallet { font-size: 0.72rem; color: var(--text-dim); margin-top: 2px; } .me-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 20px; } .stat { text-align: center; } .stat-value { font-size: 1.5rem; font-weight: 700; color: var(--accent); } .stat-label { font-size: 0.7rem; color: var(--text-dim); margin-top: 2px; } .me-section { margin: 20px 0; } .me-section-count { color: var(--text-dim); font-size: 0.65rem; } /* Me drawer — reusable helpers */ .me-hint { font-size: 0.7rem; color: var(--text-dim); margin-bottom: 8px; } /* My Shares — compact rows in Me drawer */ .my-shares-list { display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow-y: auto; } .my-share-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; transition: border-color 0.15s; } .my-share-row:hover { border-color: var(--accent); } .my-share-row.removed { opacity: 0.5; } .my-share-thumb { flex: 0 0 44px; width: 44px; height: 44px; object-fit: cover; border-radius: 4px; background: var(--surface); } .my-share-thumb.placeholder { display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--text-dim); border: 1px dashed var(--border); } .my-share-body { flex: 1; min-width: 0; } .my-share-title { font-size: 0.8rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .my-share-meta { font-size: 0.65rem; color: var(--text-dim); display: flex; align-items: center; gap: 6px; margin-top: 2px; } .my-share-dot { opacity: 0.5; } .my-share-status { font-weight: 600; letter-spacing: 0.4px; display: inline-flex; align-items: center; gap: 3px; } .my-share-status svg, .ai-corrected-mark svg { display: block; } .ai-corrected-mark { display: inline-flex; vertical-align: -1px; } .tag-chip-x { display: inline-flex; vertical-align: -1px; } .review-ai-badge { display: flex; align-items: center; gap: 6px; } .wallet-score svg { vertical-align: -2px; } /* Feather icons in tag/bucket/popover chrome. Text-flow contexts: nudge baseline (no layout change). Icon-only buttons: flex-center. */ .tag-label svg, .popover-item svg, .popover-header svg, .review-vote-bar .btn svg, .shelf-label svg { vertical-align: -2px; } .tag-menu-btn, .arrow-btn, .bucket-row-action, .drag-handle, .bucket-child-remove { display: inline-flex; align-items: center; justify-content: center; } .tag-menu-btn svg, .arrow-btn svg, .bucket-row-action svg, .drag-handle svg, .bucket-child-remove svg { display: block; } .thread-listing-btn { display: inline-flex; align-items: center; gap: 5px; } /* The share's title rendered AS the link (replaces the old "View post" button). */ .thread-listing-link { display: flex; align-items: center; gap: 6px; width: 100%; background: transparent; border: none; padding: 2px 0; color: var(--text); font-family: var(--font); font-size: 0.95rem; font-weight: 700; text-align: left; cursor: pointer; transition: color .12s ease; } .thread-listing-link-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .thread-listing-link svg { flex-shrink: 0; color: var(--text-dim); transition: color .12s ease; } .thread-listing-link:hover { color: var(--accent); } .thread-listing-link:hover svg { color: var(--accent); } /* Removed/deleted share — muted, non-interactive. */ .thread-listing-gone { display: flex; align-items: center; gap: 6px; color: var(--text-dim); font-size: 0.85rem; font-style: italic; } .thread-listing-gone svg { flex-shrink: 0; } .my-share-status.active { color: var(--success); } .my-share-status.analyzing { color: var(--info); } .my-share-status.removed { color: var(--danger); } .my-share-status.in-review { color: var(--warning, #e0a93b); } .my-share-status.archived { color: var(--text-dim); } /* Draft (REVIEW stage, #2/#3/#10) — accent: the one state waiting on the author. */ .my-share-status.draft { color: var(--accent); } /* Lifecycle clock ("ages out Jul 8" / "aged out Jun 20") — quiet, owner-only. */ .my-share-clock { color: var(--text-dim); font-style: italic; } /* ── REVIEW stage (drawer, #2/#3/#10): analyzed draft → study, Edit / Share Live ── */ .draft-review { padding: 8px 4px; text-align: center; } .draft-review-head { display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--success); font-weight: 700; font-size: 0.95rem; margin-bottom: 12px; } .draft-review-img { max-width: 100%; max-height: 220px; border-radius: var(--radius); object-fit: contain; margin-bottom: 10px; } .draft-title { font-weight: 700; font-size: 1rem; margin-bottom: 4px; } .draft-desc { color: var(--text-dim); font-size: 0.82rem; margin-bottom: 6px; } .draft-text { font-size: 0.85rem; margin: 6px 0; padding: 8px 10px; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); white-space: pre-wrap; } .draft-tags { justify-content: center; margin: 8px 0; } .draft-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; color: var(--text-dim); font-size: 0.75rem; margin: 6px 0 2px; } .draft-meta-item { display: inline-flex; align-items: center; gap: 4px; } /* Pre-publish community-review warning (#10) — visible, not scary. */ .draft-warn { display: flex; gap: 8px; align-items: flex-start; text-align: left; margin: 10px 0 2px; padding: 9px 11px; border-radius: var(--radius); font-size: 0.8rem; line-height: 1.45; color: var(--text); border: 1px solid color-mix(in srgb, var(--warning, #e0a93b) 55%, var(--border)); background: color-mix(in srgb, var(--warning, #e0a93b) 12%, transparent); } .draft-warn svg { flex: 0 0 auto; margin-top: 2px; color: var(--warning, #e0a93b); } .draft-actions { display: flex; gap: 10px; justify-content: center; margin-top: 14px; } .draft-actions .btn { min-width: 120px; } .draft-note { color: var(--text-dim); font-size: 0.72rem; margin-top: 10px; font-style: italic; } /* The stage's close button while a draft is on screen: closing = saving, so it reads "Save Draft" and stays visually quiet next to the primary Post Now. */ .save-draft-btn { font-size: 0.78rem; padding: 8px 16px; display: block; margin: 6px auto 0; width: auto; min-height: 0; } /* Group subheaders in the My Shares lifecycle viewer. */ .my-share-group-head { display: flex; align-items: center; gap: 6px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-dim); margin: 10px 2px 4px; } .my-share-group-head:first-child { margin-top: 2px; } .my-share-group-head svg { display: block; } .my-share-group-n { background: var(--surface-3, var(--surface-2)); border-radius: 8px; padding: 0 6px; font-size: 0.6rem; } /* A share in review gets a soft warning rail so it reads as "needs you". */ .my-share-row.in-review { border-left: 3px solid var(--warning, #e0a93b); align-items: flex-start; } .my-share-row.in-review .my-share-thumb { margin-top: 1px; } /* Author-only community-review detail: reason + keep/remove progress + clock. */ .my-share-review { margin-top: 6px; padding: 6px 8px; background: var(--surface, rgba(0,0,0,0.12)); border-radius: 5px; font-size: 0.64rem; } .my-share-review .msr-reason { display: flex; align-items: center; gap: 5px; color: var(--text); margin-bottom: 6px; } .my-share-review .msr-reason svg { display: block; flex: 0 0 auto; } /* "entered review Xh ago · hidden from feeds…" — plain-words context line (#9). */ .msr-since { color: var(--text-dim); margin: -2px 0 6px; } .msr-bars { display: flex; flex-direction: column; gap: 4px; } .msr-bar { display: flex; align-items: center; gap: 6px; } .msr-bar-label { flex: 0 0 86px; color: var(--text-dim); font-variant-numeric: tabular-nums; } .msr-bar-track { flex: 1; height: 5px; background: var(--surface-3, rgba(255,255,255,0.08)); border-radius: 3px; overflow: hidden; } .msr-bar-fill { display: block; height: 100%; border-radius: 3px; transition: width 0.3s; } .msr-bar.keep .msr-bar-fill { background: var(--success); } .msr-bar.remove .msr-bar-fill { background: var(--danger); } .msr-restore { display: flex; align-items: center; gap: 5px; margin-top: 6px; color: var(--text-dim); font-style: italic; } .msr-restore svg { display: block; flex: 0 0 auto; } .my-share-delete { flex-shrink: 0; background: transparent; border: 1px solid var(--border); color: var(--text-dim); width: 28px; height: 28px; border-radius: 4px; cursor: pointer; font-size: 0.85rem; display: inline-flex; align-items: center; justify-content: center; } .my-share-delete svg { display: block; } /* Action column (repost + delete stack on archived rows). */ .my-share-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; } .my-share-action { background: transparent; border: 1px solid var(--border); color: var(--text-dim); width: 28px; height: 28px; border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .my-share-action svg { display: block; } .my-share-action.repost:hover { color: var(--success); border-color: var(--success); } /* Draft "Finish" — labeled, accent-filled: the row's call to action (#3). */ .my-share-action.finish { width: auto; padding: 0 10px; font-size: 0.72rem; font-weight: 700; color: #fff; background: var(--accent); border-color: var(--accent); } /* Saved (watchlist) star is filled-gold at rest; red trash-hover doesn't apply */ .my-share-delete.saved-star { color: var(--accent); } .my-share-delete.saved-star:hover { background: var(--surface-3, var(--surface-2)); color: var(--accent); border-color: var(--accent); } .my-share-delete:hover { background: var(--danger); color: #fff; border-color: var(--danger); } /* ─── Me drawer accordion ─── */ .me-accordion { margin-top: 20px; display: flex; flex-direction: column; gap: 6px; } .me-accordion-section { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; transition: border-color 0.15s; } .me-accordion-section.open { border-color: color-mix(in oklab, var(--accent) 50%, var(--border)); } .me-accordion-header { width: 100%; background: transparent; border: none; padding: 12px 14px; display: flex; align-items: center; gap: 10px; cursor: pointer; color: var(--text); font-family: var(--font); text-align: left; } .me-accordion-header:hover { background: var(--surface-2); } .me-accordion-chev { display: inline-block; font-size: 0.7rem; color: var(--text-dim); transition: transform 0.18s ease; flex-shrink: 0; } .me-accordion-section.open .me-accordion-chev { transform: rotate(90deg); color: var(--accent); } .me-accordion-title { font-size: 0.85rem; font-weight: 600; flex: 1; } .me-accordion-body { display: none; padding: 4px 14px 16px; border-top: 1px solid var(--border); } .me-accordion-section.open .me-accordion-body { display: block; } .me-subsection { margin: 14px 0; } .me-subsection-header { font-size: 0.7rem; color: var(--text-dim); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; font-weight: 600; } .me-subsection-suggested { opacity: 0.85; } /* --- Spinner --- */ .spinner { width: 24px; height: 24px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto; } @keyframes spin { to { transform: rotate(360deg); } } /* ════════════════════════════════════════════════════════════════ MARKETPLACE UI ════════════════════════════════════════════════════════════════ */ .listing-input { width: 100%; margin-bottom: 8px; } /* ── Nearby search + sort bar (discovery is tag-driven) ── */ .mkt-bar { margin-top: 8px; display: flex; align-items: center; gap: 8px; } /* Search bar input + sort select — layout only; the shared box (height, border, chevron) comes from the global input/select rules, so they match exactly. */ .mkt-search-input { flex: 1 1 auto; min-width: 0; } .mkt-sort-select { flex: 0 0 auto; } /* ── Feed card: price + listing badges ── */ .feed-listing-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; } /* Trust-score star is pushed to the right end of the category line. */ .feed-listing-row .flr-score { margin-left: auto; display: inline-flex; align-items: center; } /* People / Place / Thing category badge (AI-assigned) — three distinct hues so the categorization is readable at a glance while we validate it. */ .feed-cat-badge { display: inline-block; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); } .feed-cat-badge.cat-people { background: color-mix(in oklab, var(--info) 16%, transparent); color: var(--info); border-color: color-mix(in oklab, var(--info) 40%, var(--border)); } .feed-cat-badge.cat-place { background: color-mix(in oklab, var(--success) 16%, transparent); color: var(--success); border-color: color-mix(in oklab, var(--success) 40%, var(--border)); } .feed-cat-badge.cat-thing { background: color-mix(in oklab, var(--accent) 16%, transparent); color: var(--accent); border-color: color-mix(in oklab, var(--accent) 40%, var(--border)); } /* Same badge inside the share detail modal. */ .modal-cat-row { margin: 2px 0 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* Broadcast mute — rides beside the "Shared with you and others" badge (the * thing it acts on), not in the generic tool tray (owner, beta round 3). */ .bcast-mute-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; color: var(--text-dim); background: transparent; border: 1px dashed var(--border); cursor: pointer; white-space: nowrap; } .bcast-mute-btn svg { display: block; } .bcast-mute-btn:hover { color: var(--text); border-color: var(--text-dim); } .feed-price { font-weight: 700; color: var(--success); /* money = green; keeps orange for navigation/accent */ font-size: 0.95rem; } .listing-badge { display: inline-block; padding: 2px 8px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; border-radius: 999px; border: 1px solid transparent; } .lt-sale { background: rgba(46,204,113,0.16); color: var(--success); border-color: rgba(46,204,113,0.4); } .lt-free { background: rgba(52,152,219,0.16); color: var(--info); border-color: rgba(52,152,219,0.4); } .lt-wanted { background: rgba(255,107,53,0.16); color: var(--accent); border-color: var(--accent-glow); } .lt-pending { background: rgba(241,196,15,0.18); color: #d4a017; border-color: rgba(241,196,15,0.45); } .lt-sold, .lt-available { background: var(--surface-2); color: var(--text-dim); border-color: var(--border); } .lt-sold { background: rgba(231,76,60,0.16); color: var(--danger); border-color: rgba(231,76,60,0.4); } /* ── Listing detail modal ── */ .modal-listing-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; } .modal-price { font-size: 1.3rem; font-weight: 800; color: var(--success); } .modal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; } .listing-action { flex: 1 1 auto; min-width: 120px; } .owner-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0; padding: 10px; background: var(--surface-2); border-radius: var(--radius); } .owner-status-label { width: 100%; font-size: 0.75rem; color: var(--text-dim); margin-bottom: 2px; } .owner-status .listing-action { flex: 1; min-width: 80px; } .owner-status .listing-action.active { border-color: var(--accent); color: var(--accent); } /* ── Top bar: unread badge ── */ .top-btn { position: relative; } .unread-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 0.62rem; font-weight: 700; line-height: 16px; text-align: center; background: var(--accent); color: #fff; border-radius: 999px; } /* ── Messages: drawer back button ── */ .drawer-back { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); width: 32px; height: 32px; flex: 0 0 auto; /* never shrink — keep the back-arrow square next to a long title */ margin-right: 10px; /* breathing room between the arrow and the "Back" label */ border-radius: 8px; cursor: pointer; align-items: center; justify-content: center; } /* ── Inbox ── */ .inbox-list { display: flex; flex-direction: column; gap: 8px; } .inbox-row { display: flex; align-items: center; gap: 10px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: border-color 0.15s; } .inbox-row:hover { border-color: var(--accent); } .inbox-row-main { flex: 1; min-width: 0; } .inbox-row-title { font-weight: 600; font-size: 0.9rem; display: flex; align-items: center; gap: 6px; } .inbox-row-last { font-size: 0.8rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .inbox-row-meta { font-size: 0.7rem; color: var(--text-dim); margin-top: 2px; } .inbox-role { color: var(--accent); } .inbox-unread { flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 6px; font-size: 0.72rem; font-weight: 700; line-height: 20px; text-align: center; background: var(--accent); color: #fff; border-radius: 999px; } /* ── Inbox tabs (Messages | Notifications) ── */ .inbox-tabs { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--border); } .inbox-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--text-dim); font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: color 0.15s, border-color 0.15s; } .inbox-tab:hover { color: var(--text); } .inbox-tab.active { color: var(--accent); border-bottom-color: var(--accent); } .inbox-tab-count { min-width: 18px; height: 18px; padding: 0 5px; font-size: 0.68rem; font-weight: 700; line-height: 18px; text-align: center; background: var(--accent); color: #fff; border-radius: 999px; } /* ── Share-with-links picker (dialog) ── */ .share-pick-list { display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow-y: auto; margin: 10px 0; } .share-pick-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; } .share-pick-row:hover { border-color: var(--accent); } .share-pick { width: 18px; height: 18px; accent-color: var(--accent); flex: 0 0 auto; } .share-pick-name { font-weight: 600; font-size: 0.88rem; } /* "All friends" master row (#12) — a MODE above the list, visually set apart; * while on, the individual rows grey out (disabled, not silently checked). */ .share-pick-all { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); } .share-pick-sub { display: block; font-weight: 400; font-size: 0.72rem; color: var(--text-dim); margin-top: 2px; } .share-pick-row.is-disabled { opacity: 0.45; pointer-events: none; } /* Owner's all-friends audience note in the detail popup (#12). */ .recip-all { color: var(--text-dim); font-size: 0.8rem; display: flex; align-items: center; gap: 6px; padding: 8px 0 8px 16px; } /* ── Link handshake flow (dialog) ── */ .link-flow-choices { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; } .link-code { font-size: 1.5rem; font-weight: 700; letter-spacing: 0.04em; text-align: center; padding: 16px 12px; margin: 12px 0; background: var(--surface); border: 2px dashed var(--accent); border-radius: var(--radius); color: var(--accent); word-spacing: 0.3em; } /* ── Links list (ME drawer) ── */ .links-list { display: flex; flex-direction: column; gap: 6px; } /* Round avatar beside handles in Links / Subscriptions / Notifications rows (same chip as the share-detail author card). */ .link-row .modal-avatar, .notif-row .modal-avatar { width: 36px; height: 36px; font-size: 0.95rem; } .link-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .link-row-main { flex: 1; min-width: 0; } .link-row-name { font-weight: 600; font-size: 0.85rem; display: flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* long names can't push the chevron off-row */ } .link-row-handle { font-size: 0.72rem; color: var(--text-dim); } .link-row-actions { display: flex; gap: 4px; flex: 0 0 auto; } /* ── Expanding friend tools (owner, beta round 3): the row holds ONE chevron; * the panel beneath has room for full-sentence actions + hints — this is what * makes "hide their All-Friends shares" self-explanatory instead of a chip. ── */ .link-row { cursor: pointer; -webkit-tap-highlight-color: transparent; } .link-row-chev { display: inline-flex; color: var(--text-dim); transition: transform .18s ease; flex: 0 0 auto; } .link-row.is-open .link-row-chev { transform: rotate(180deg); } .link-row.is-open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .link-state { display: inline-flex; color: var(--text-dim); flex: 0 0 auto; } .link-row-tools { display: flex; flex-direction: column; margin: -1px 0 8px; padding: 4px 6px 6px; background: var(--surface); border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--radius) var(--radius); } .link-tool-row { display: flex; align-items: center; gap: 10px; text-align: left; background: none; border: none; cursor: pointer; padding: 9px 8px; min-height: 40px; border-radius: 8px; font-size: 0.8rem; font-weight: 600; color: var(--text); } .link-tool-row:hover { background: var(--surface-2); } .link-tool-row svg { flex: 0 0 auto; color: var(--text-dim); } .link-tool-row.danger, .link-tool-row.danger svg { color: var(--danger); } .link-tool-hint { display: block; font-size: 0.7rem; font-weight: 400; color: var(--text-dim); margin-top: 1px; } .link-action { background: none; border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; min-height: 32px; /* was ~22px tall — under every touch standard (UIX-AUDIT item 4) */ font-size: 0.72rem; color: var(--text-dim); cursor: pointer; transition: border-color 0.15s, color 0.15s; } .link-action:hover { color: var(--text); border-color: var(--accent); } .link-action.is-muted { color: var(--accent); border-color: var(--accent); } .link-action.danger:hover { color: var(--danger); border-color: var(--danger); } /* ── Notification toolbar (Clear read) ── */ .notif-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } /* ── Notification rows — distinct from message rows on purpose (LINKS.md) ── */ /* Swipe-to-delete: row slides left over a red "Delete" backing layer. */ .notif-swipe { position: relative; overflow: hidden; border-radius: var(--radius); } .notif-swipe-back { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; padding-right: 18px; background: var(--danger); color: #fff; font-size: 0.8rem; font-weight: 700; border-radius: var(--radius); } .notif-swipe .notif-row { position: relative; will-change: transform; } .notif-row.unread { border-left: 3px solid var(--accent); } .notif-del { flex: 0 0 auto; background: none; border: none; cursor: pointer; color: var(--text-dim); padding: 9px; margin-left: 6px; /* ~34px hit zone */ opacity: 0; transition: opacity 0.15s, color 0.15s; } /* Delete mechanics. Mouse: hover-reveal the ×. Touch: swipe-left deletes, and a LONG-PRESS reveals the × for 5s as the non-drag alternative (WCAG 2.5.7) — a hover-gated × on touch would make the browser spend the FIRST tap applying :hover, so opening a row took two taps. */ @media (hover: hover) { .notif-row:hover .notif-del { opacity: 0.7; } .notif-del:hover { color: var(--danger); opacity: 1; } } @media (hover: none) { .notif-del { display: none; } } .notif-row.show-del .notif-del { display: inline-flex; opacity: 1; color: var(--danger); } /* Inbox conversation swipe — same gesture grammar as .notif-swipe, but ARCHIVE (hide-for-you, reversible) not delete, so the back layer + × use the accent colour rather than danger red. Mechanics mirror .notif-* exactly. */ .inbox-swipe { position: relative; overflow: hidden; border-radius: var(--radius); } .inbox-swipe-back { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; padding-right: 18px; background: var(--accent); color: #fff; font-size: 0.8rem; font-weight: 700; border-radius: var(--radius); } .inbox-swipe .inbox-row { position: relative; will-change: transform; } .inbox-del { flex: 0 0 auto; background: none; border: none; cursor: pointer; color: var(--text-dim); padding: 9px; margin-left: 6px; /* ~34px hit zone */ opacity: 0; transition: opacity 0.15s, color 0.15s; } @media (hover: hover) { .inbox-row:hover .inbox-del { opacity: 0.7; } .inbox-del:hover { color: var(--accent); opacity: 1; } } @media (hover: none) { .inbox-del { display: none; } } .inbox-row.show-del .inbox-del { display: inline-flex; opacity: 1; color: var(--accent); } .notif-note { font-size: 0.78rem; color: var(--text); font-style: italic; margin-top: 3px; } /* System-gift notification (faucet drip): emoji stands in for the avatar. */ .notif-gift-ic { flex: 0 0 36px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); border-radius: 50%; } /* System note about YOUR share (under review / blocked) — shield in an accent disc. */ .notif-sys-ic { flex: 0 0 36px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); border-radius: 50%; } .notif-sys-ic svg { width: 18px; height: 18px; } /* Teams forum notification — team icon in an accent disc (visibly not a Share). */ .notif-team-ic { flex: 0 0 36px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); border-radius: 50%; } .notif-team-ic svg { width: 18px; height: 18px; } /* ── Wallet Viewer — "A Bridge, Not Your Wallet" (WALLET-VIEWER.md) ── */ .wv-tagline { margin-left: auto; font-size: 0.62rem; color: var(--text-dim); font-style: italic; letter-spacing: 0.3px; white-space: nowrap; } .wv-addr { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-family: var(--font); font-size: 0.82rem; padding: 8px 12px; min-height: 36px; cursor: pointer; transition: border-color .12s; } .wv-addr:hover { border-color: var(--accent); } .wv-cap { font-size: 0.72rem; color: var(--text-dim); margin: 6px 0 12px; } .wv-balance-row { display: flex; align-items: center; gap: 10px; } .wv-bal-label { font-size: 0.78rem; color: var(--text-dim); } .wv-bal { font-size: 0.95rem; font-weight: 600; letter-spacing: 1px; flex: 1 1 auto; min-width: 0; word-break: break-word; } .wv-price { font-size: 0.7rem; color: var(--text-dim); margin: 4px 0 12px; min-height: 1em; /* no layout jump when the price arrives */ } .wv-receive-btn { margin-bottom: 10px; } .wv-receive { display: flex; flex-direction: column; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; margin-bottom: 10px; } .wv-qr { /* White quiet zone — QR scanners need light surround even in dark mode. */ background: #fff; padding: 8px; border-radius: 8px; width: 180px; height: 180px; image-rendering: pixelated; /* crisp modules when scaled */ } .wv-full-addr { font-family: var(--font); font-size: 0.68rem; color: var(--text-dim); word-break: break-all; text-align: center; -webkit-user-select: text; user-select: text; } .wv-receive-hint { font-size: 0.7rem; color: var(--text-dim); text-align: center; line-height: 1.5; } /* Balance card — balance, price, and recent activity reveal/mask together. */ .wv-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; margin-bottom: 10px; } .wv-activity { border-top: 1px solid var(--border); margin-top: 10px; padding-top: 4px; } .wv-act-row { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; padding: 6px 0; } .wv-act-ic { flex: 0 0 18px; text-align: center; } .wv-act-amt { font-weight: 600; } .wv-act-amt.in { color: var(--success); } .wv-act-amt.out { color: var(--text); } .wv-act-pending { color: var(--accent); white-space: nowrap; } .wv-act-conf { color: var(--text-dim); white-space: nowrap; } .wv-act-when { margin-left: auto; color: var(--text-dim); font-size: 0.68rem; white-space: nowrap; } /* A pending row breathes gently — the thing to watch. */ .wv-act-row.is-pending { animation: wv-pending-pulse 1.6s ease-in-out infinite alternate; } @keyframes wv-pending-pulse { from { opacity: 0.75; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .wv-act-row.is-pending { animation: none; } } .wv-edu { margin-bottom: 12px; } .wv-edu summary { cursor: pointer; font-size: 0.8rem; color: var(--info); padding: 4px 0; min-height: 32px; display: flex; align-items: center; } .wv-edu-body { font-size: 0.78rem; line-height: 1.55; } .wv-edu-body p { margin: 8px 0; } .wv-edu-body a { color: var(--info); } .wv-bright-line { font-size: 0.7rem; color: var(--text-dim); border-top: 1px solid var(--border); padding-top: 10px; line-height: 1.55; } .notif-gone { color: var(--text-dim); font-style: italic; } /* ── Wallet sheet — promoted, novice-first wallet surface (reuses the .modal/.modal-content/.modal-scroll chrome; these style its contents). ── */ .wallet-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; } .wallet-title { font-size: 1.3rem; font-weight: 800; letter-spacing: .5px; } .wallet-sub { font-size: .72rem; color: var(--text-dim); font-style: italic; } /* $-value hero — the number people love to see */ .wallet-hero { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 16px; text-align: center; margin-bottom: 14px; } .wallet-hero-usd { font-size: 2.5rem; font-weight: 800; letter-spacing: .5px; line-height: 1.1; color: var(--text); } .wallet-hero-erg { font-size: .9rem; color: var(--text-dim); margin-top: 4px; min-height: 1em; } .wallet-hero-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; } .wallet-refresh { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border); border-radius: 50%; color: var(--text-dim); cursor: pointer; transition: color .12s, border-color .12s; } .wallet-refresh:hover { color: var(--accent); border-color: var(--accent); } .wallet-refresh.spinning svg { animation: spin .8s linear infinite; } .wallet-updated { font-size: .68rem; color: var(--text-dim); margin-top: 8px; min-height: 1em; } /* Transaction lifecycle stepper (Pending → Confirming → Complete) */ .wallet-steps { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; } .wstep-head { font-size: .78rem; color: var(--text); margin-bottom: 14px; font-weight: 600; } .wstep-track { display: flex; align-items: flex-start; } .wstep { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 auto; } .wstep-line { flex: 1 1 auto; height: 2px; background: var(--border); margin: 7px 6px 0; } .wstep-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--border); transition: background .2s; } .wstep-label { font-size: .68rem; color: var(--text-dim); } .wstep.done .wstep-dot { background: var(--success); display: inline-flex; align-items: center; justify-content: center; } .wstep-check { display: inline-flex; } .wstep-check svg { width: 9px; height: 9px; stroke: #fff; } .wstep.active .wstep-dot { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); animation: wstep-pulse 1.4s ease-in-out infinite; } .wstep.active .wstep-label { color: var(--text); font-weight: 600; } @keyframes wstep-pulse { 50% { box-shadow: 0 0 0 8px transparent; } } .wstep-note { font-size: .72rem; color: var(--text-dim); margin-top: 12px; text-align: center; line-height: 1.4; } .wallet-net-note, .wallet-act-empty { font-size: .78rem; color: var(--text-dim); text-align: center; padding: 14px 8px; line-height: 1.4; } /* Activity — two-tier: "On NEAR.me" native events + "Recent" chain glance */ .wallet-activity { margin-bottom: 14px; } .wallet-act-h { font-size: .72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; } .wallet-act-h:not(:first-child) { margin-top: 14px; } /* NEAR.me-native event card (gift today; purchases later) */ .wallet-nat-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 10px; background: var(--surface-2); margin-bottom: 8px; } .wallet-nat-ic { font-size: 1.15rem; flex: 0 0 auto; } .wallet-nat-main { flex: 1 1 auto; min-width: 0; } .wallet-nat-title { font-size: .85rem; font-weight: 600; } .wallet-nat-sub { font-size: .72rem; color: var(--text-dim); } .wallet-nat-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: 0 0 auto; font-size: .8rem; } .wallet-nat-metaline { display: flex; align-items: center; gap: 6px; } /* Escape hatch to the canonical ledger (bridge, not the ledger) */ .wallet-history-link { display: inline-flex; align-items: center; gap: 4px; color: var(--text-dim); font-size: .74rem; text-decoration: none; margin-top: 10px; } .wallet-history-link:hover { color: var(--accent); } .wallet-act-row { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-top: 1px solid var(--border); font-size: .8rem; } .wallet-act-ic { width: 18px; text-align: center; flex: 0 0 auto; } .wallet-act-amt { font-weight: 600; } .wallet-act-amt.in { color: var(--success); } .wallet-act-usd { color: var(--text-dim); font-weight: 400; font-size: .72rem; } .wallet-act-stage { margin-left: auto; flex: 0 0 auto; font-size: .66rem; padding: 2px 8px; border-radius: 999px; background: var(--surface); color: var(--text-dim); } .wallet-act-stage.stage-pending { color: var(--accent); } .wallet-act-stage.stage-confirming { color: var(--info); } .wallet-act-stage.stage-settled { color: var(--success); } .wallet-act-when { color: var(--text-dim); font-size: .66rem; flex: 0 0 auto; } .wallet-act-row.is-live .wallet-act-stage { animation: wstep-pulse 1.6s ease-in-out infinite; } .wallet-receive-btn { margin-bottom: 12px; } .wallet-receive { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; margin-bottom: 14px; display: flex; flex-direction: column; align-items: center; gap: 10px; } /* Get-more-ERG + the Ergo-L1 credit */ .wallet-edu { margin-bottom: 12px; } .wallet-edu summary { cursor: pointer; color: var(--info); font-size: .85rem; font-weight: 600; } .wallet-edu-body { font-size: .82rem; color: var(--text-dim); line-height: 1.5; margin-top: 8px; } .wallet-edu-body p { margin: 6px 0; } .wallet-edu-link { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-weight: 600; text-decoration: none; margin-top: 4px; } .wallet-l1 { font-size: .75rem; color: var(--text-dim); text-align: center; padding: 12px 0; border-top: 1px solid var(--border); } .wallet-l1 strong { color: var(--accent); } .wallet-addr-foot { font-family: var(--font); font-size: .68rem; color: var(--text-dim); text-align: center; margin-top: 10px; cursor: pointer; word-break: break-all; } @media (prefers-reduced-motion: reduce) { .wstep.active .wstep-dot, .wallet-act-row.is-live .wallet-act-stage, .wallet-refresh.spinning svg { animation: none; } } /* Web Push opt-in toggle (top of the Notifications lane) */ .push-toggle-row { margin: 0 0 10px; } .push-toggle-row:empty { display: none; } .push-toggle { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; padding: 12px 14px; background: var(--surface-2, rgba(127,127,127,0.06)); border: 1px solid var(--border, rgba(127,127,127,0.18)); border-radius: var(--radius); } .push-toggle-text { flex: 1 1 auto; min-width: 0; } .push-toggle-title { font-size: 0.9rem; font-weight: 600; color: var(--text); } .push-toggle-sub { font-size: 0.76rem; color: var(--text-dim); margin-top: 2px; } .push-toggle-on .push-toggle-title { color: var(--accent); } /* iOS-style switch. appearance:none + explicit colors so desktop browsers don't paint native button chrome over the track (otherwise only the knob shows). */ .push-switch { -webkit-appearance: none; appearance: none; box-sizing: border-box; flex: 0 0 auto; display: inline-block; width: 44px; height: 26px; min-width: 44px; padding: 0; margin: 0; border: none; border-radius: 13px; cursor: pointer; background: rgba(120,120,128,0.36); position: relative; transition: background 0.18s ease; } .push-switch.on { background: var(--accent, #2f81f7); } .push-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.35); transition: transform 0.18s ease; } .push-switch.on .push-knob { transform: translateX(18px); } /* ── Thread view ── */ #thread-view { flex-direction: column; height: 100%; } .thread-listing { padding-bottom: 8px; border-bottom: 1px solid var(--border); margin-bottom: 8px; } .thread-messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 0; } .msg-bubble { max-width: 78%; padding: 8px 12px; border-radius: 14px; font-size: 0.88rem; } .msg-bubble.mine { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; } .msg-bubble.theirs { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border); border-bottom-left-radius: 4px; } .msg-time { font-size: 0.62rem; opacity: 0.85; margin-top: 3px; } /* 0.7 failed AA inside own-bubbles */ .thread-compose { display: flex; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); flex-shrink: 0; } .thread-input { flex: 1; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 999px; font-size: 0.9rem; } /* ── Payment modal ── */ .pay-modal { text-align: center; } .pay-header { display: flex; align-items: center; justify-content: space-between; font-weight: 700; margin-bottom: 14px; } .pay-node { font-size: 0.66rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; } .pay-node.live { color: var(--success); background: rgba(46,204,113,0.14); } .pay-node.mock { color: var(--text-dim); background: var(--surface-2); } .pay-amount { font-size: 2rem; font-weight: 800; color: var(--accent); margin: 8px 0; } .pay-hint { font-size: 0.82rem; color: var(--text-dim); margin-bottom: 12px; } .pay-field { display: flex; align-items: center; gap: 8px; padding: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; } .pay-field code { flex: 1; font-size: 0.72rem; word-break: break-all; text-align: left; color: var(--text); } .pay-open { display: block; width: 100%; margin-bottom: 8px; } .pay-status { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 0.85rem; color: var(--text-dim); margin: 12px 0; } .pay-actions { display: flex; gap: 8px; } .pay-actions .btn { flex: 1; } .pay-done { padding: 20px; font-size: 1.4rem; color: var(--success); } .pay-done-text { font-size: 0.8rem; color: var(--text-dim); margin-top: 8px; } .spinner-sm { width: 14px; height: 14px; border-width: 2px; display: inline-block; } /* ════════════════════════════════════════════════════════════════ ONBOARDING RIBBON (S0–S5) + device-detected install guide ════════════════════════════════════════════════════════════════ */ #onboarding-ribbon { width: 100%; max-width: 420px; margin: 0 auto; } .ob-screen { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 8px 4px; } .ob-wordmark { font-size: 2.6rem; font-weight: 800; letter-spacing: 3px; color: var(--accent); margin-bottom: 2px; } .ob-tagline { font-size: 1.05rem; color: var(--text); line-height: 1.5; } .ob-title { font-size: 1.3rem; font-weight: 700; } .ob-sub { font-size: 0.9rem; color: var(--text-dim); line-height: 1.5; } .ob-cta { width: 100%; max-width: 320px; padding: 14px; font-size: 1rem; } .ob-after-install { margin-top: 10px; } .ob-back { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; } /* Remembered-wallet banner on the mobile sign-in screen */ .ob-remembered { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; max-width: 320px; margin: 2px 0 4px; } .ob-remembered-label { font-size: 0.85rem; color: var(--text); } .ob-remembered-label strong { color: var(--accent, var(--text)); } .ob-link { background: none; border: 0; padding: 2px 4px; font-size: 0.8rem; color: var(--text-dim); text-decoration: underline; cursor: pointer; } .ob-link:hover { color: var(--text); } /* Welcome landing — two equal choice boxes (orange = sign in, grey = no wallet) */ .ob-welcome-sub { font-size: 0.92rem; color: var(--text-dim); line-height: 1.5; margin-top: -2px; } .ob-choices { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 340px; margin-top: 6px; } .ob-choice { display: flex; align-items: center; gap: 13px; width: 100%; min-height: 66px; padding: 16px 18px; border-radius: var(--radius); font-size: 1rem; font-weight: 600; cursor: pointer; text-align: left; border: 1px solid transparent; transition: transform 0.12s ease, filter 0.12s ease, border-color 0.12s ease; } .ob-choice:active { transform: scale(0.985); } .ob-choice-icon { display: inline-flex; align-items: center; flex-shrink: 0; } .ob-choice-label { flex: 1; } .ob-choice-primary { background: var(--accent); color: #fff; border-color: var(--accent); } .ob-choice-primary:hover { filter: brightness(1.06); } .ob-choice-secondary { background: var(--surface-2); color: var(--text); border-color: var(--border); } .ob-choice-secondary:hover { border-color: var(--text-dim); } /* Guide row — same footprint as the other choices so newcomers can't miss it, but outlined (not filled) to read as "learn" rather than "act". */ .ob-choice-guide { background: color-mix(in srgb, var(--accent) 7%, transparent); color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, transparent); min-height: 56px; } .ob-choice-guide .ob-choice-icon { color: var(--accent); } .ob-choice-guide:hover { border-color: var(--accent); } /* Blocked-launch fallback panel (mobile sign-in) — hidden until the launch tap demonstrably failed (page never went hidden). */ .ob-stuck { margin-top: 12px; padding: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; gap: 8px; } .ob-stuck-title { font-size: 0.85rem; font-weight: 600; color: var(--text); } .ob-stuck-tip { font-size: 0.75rem; color: var(--text-dim); line-height: 1.5; } .ob-ack { display: flex; align-items: flex-start; gap: 10px; text-align: left; font-size: 0.85rem; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; } .ob-ack input { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; } /* device-detected install card (rendered by onboarding.js) */ .ob-install { width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; } .ob-badge { display: inline-block; font-size: 0.72rem; font-weight: 700; color: var(--accent); background: var(--accent-glow); border-radius: 999px; padding: 3px 10px; margin-bottom: 8px; } .ob-install .ob-title { font-size: 1.15rem; text-align: left; } .ob-install .ob-sub { text-align: left; margin: 4px 0 12px; } .ob-install .ob-cta { display: block; text-align: center; margin-bottom: 12px; } .ob-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .ob-step { display: flex; align-items: flex-start; gap: 10px; font-size: 0.88rem; line-height: 1.45; } .ob-step-n { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 0.75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } .ob-note { font-size: 0.8rem; color: var(--text-dim); background: var(--surface-2); border-radius: 8px; padding: 10px; margin-top: 12px; } .ob-have-wallet { margin-top: 12px; width: 100%; } /* "Where do I find my address?" — collapsed 3-step helper on the paste-address sign-in screen. Progressive disclosure: confident users never open it. */ .ob-addr-help { margin: 2px 0 14px; text-align: left; } .ob-addr-help > summary { cursor: pointer; list-style: none; font-size: 0.82rem; color: var(--accent); padding: 4px 0; -webkit-tap-highlight-color: transparent; } .ob-addr-help > summary::before { content: "? "; font-weight: 700; } .ob-addr-help > summary::-webkit-details-marker { display: none; } .ob-addr-help[open] > summary { color: var(--text-dim); } .ob-addr-help .ob-steps { margin-top: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 12px; } /* ── Wallet trust score badge (on share cards + listing modal) ── */ .wallet-score { display: inline-block; font-size: 0.68rem; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border); vertical-align: middle; } .wallet-score.score-low { color: var(--text-dim); } .wallet-score.score-mid { color: var(--info); border-color: rgba(52,152,219,0.4); } .wallet-score.score-high { color: var(--success); border-color: rgba(46,204,113,0.45); background: rgba(46,204,113,0.10); } /* #7 (beta 2026-07-01): the badge is tappable — "why is the score what it is". */ .wallet-score { cursor: pointer; } /* Whose score — identity header on the explainer (beta 2026-07-02) */ .score-info-id { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--border); } .score-info-avatar { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; object-fit: cover; background: var(--surface-2); border: 1px solid var(--border); } .score-info-initial { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--accent); } .score-info-who { display: flex; flex-direction: column; min-width: 0; } .score-info-who strong { font-size: 0.95rem; } .score-info-addr { font-size: 0.68rem; color: var(--text-dim); font-family: monospace; } .score-info-now { margin-bottom: 10px; } .score-info-title { display: flex; align-items: center; gap: 6px; font-weight: 700; margin-bottom: 6px; color: var(--text); } .ui-dialog-message p { margin: 6px 0; } .score-info-list { margin: 8px 0 10px 18px; display: flex; flex-direction: column; gap: 6px; } .score-info-tiers { font-weight: 700; font-size: .8rem; } .score-info-tiers .score-low { color: var(--text-dim); } .score-info-tiers .score-mid { color: var(--info); } .score-info-tiers .score-high { color: var(--success); } .score-info-hint { color: var(--text-dim); font-size: .8rem; margin-top: 8px; } .score-info-facts-head { margin-top: 10px; color: var(--info); } /* ════════════════════════════════════════════════════════════════ OVERLAY / POPUP (sample-style; first adoption) — used by the handle gate ════════════════════════════════════════════════════════════════ */ .overlay-modal { /* Sized to the VISUAL viewport (the area above the on-screen keyboard), not the layout viewport — otherwise the centered card's button sits behind the keyboard on mobile. --vv-top/--vv-height are kept in sync with window.visualViewport by App._bindViewportSync(); they fall back to the full dynamic viewport when the API is absent (desktop / no keyboard). */ position: fixed; left: 0; right: 0; top: var(--vv-top, 0px); height: var(--vv-height, 100dvh); z-index: 1000; display: none; align-items: center; justify-content: center; box-sizing: border-box; overflow-y: auto; /* if the card is taller than the visible area, scroll it */ background: rgba(0, 0, 0, 0.7); /* sample --bg-modal-backdrop (dark) */ padding: 20px; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .overlay-modal.open { display: flex; } .overlay-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; /* sample --radius-2xl */ box-shadow: 0 10px 15px -3px rgba(0,0,0,.35), 0 4px 6px -4px rgba(0,0,0,.3); padding: 22px 20px; animation: overlay-pop var(--motion-base, 200ms) cubic-bezier(.4,0,.2,1); } @keyframes overlay-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } } .overlay-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 6px; } .overlay-sub { font-size: 0.85rem; color: var(--text-dim); line-height: 1.5; margin-bottom: 16px; } .overlay-cta { width: 100%; padding: 13px; font-size: 1rem; margin-top: 14px; } /* Two-button action row (e.g. Cancel + Send) — kept on one line, like .ui-dialog-actions. Buttons share the width; colors stay distinct. */ .overlay-actions { display: flex; gap: 8px; margin-top: 14px; } .overlay-actions .btn { flex: 1; margin: 0; } /* ── Onboarding wizard: 3-step stepper + AI bucket steps ── */ .ob-stepper { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 3px; margin-bottom: 16px; font-size: 0.7rem; color: var(--text-dim); } .ob-step { display: inline-flex; align-items: center; gap: 5px; /* Inactive steps stay full-opacity dim text (0.55 measured 2.5:1, AA fail); the active step still pops via --text + weight. */ } .ob-step.active { color: var(--text); font-weight: 600; } .ob-step.done { opacity: 1; color: var(--text-dim); } .ob-step-n { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); font-size: 0.7rem; font-weight: 700; } .ob-step.active .ob-step-n { background: var(--accent); border-color: var(--accent); color: #fff; } .ob-step.done .ob-step-n { background: var(--accent); border-color: var(--accent); color: #fff; } .ob-step-sep { flex: 0 0 10px; height: 1px; background: var(--border); } .ob-bucket-text { width: 100%; box-sizing: border-box; resize: vertical; min-height: 52px; padding: 11px 12px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: 0.95rem; } .ob-bucket-text:focus { border-color: var(--accent); } .ob-bucket-made { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin-top: 4px; } .ob-result-title { display: flex; align-items: center; justify-content: center; gap: 8px; } .ob-ok-check { display: inline-flex; color: var(--success); } .ob-bucket-made-list { display: flex; flex-direction: column; gap: 8px; max-height: 42vh; overflow-y: auto; } .ob-bucket-made-list .ob-bucket-made { margin: 0; } /* Feedback: user "my feedback" + admin CRM (the Inbox "Send feedback" button was retired — feedback opens from the NEAR.me brand menu; .inbox-feedback-row/-btn removed with it). */ .overlay-card-wide { max-width: 560px; } .feedback-admin-body { max-height: 62vh; overflow-y: auto; text-align: left; margin-bottom: 12px; } .feedback-item { padding: 12px 0; border-bottom: 1px solid var(--border); } .feedback-item-meta { font-size: 0.72rem; color: var(--text-dim); margin-bottom: 4px; } .feedback-status { text-transform: uppercase; letter-spacing: .03em; color: var(--accent); font-weight: 600; } .feedback-status.fb-shipped { color: var(--success); } .feedback-status.fb-declined { color: var(--text-dim); } .feedback-item-text { font-size: 0.9rem; white-space: pre-wrap; word-break: break-word; } .feedback-triage { font-size: 0.78rem; color: var(--text-dim); margin: 6px 0; padding: 6px 8px; background: var(--surface-2); border-radius: 8px; } .feedback-triage-meta { color: var(--text-dim); opacity: 0.85; } .feedback-status-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } .feedback-status-row .btn.active { background: var(--accent); color: #fff; } .feedback-draft { margin: 8px 0; padding: 8px; border: 1px dashed var(--border); border-radius: 8px; font-size: 0.85rem; } .feedback-draft-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-dim); margin-bottom: 4px; } .feedback-pub-reply { font-size: 0.85rem; margin: 6px 0; padding-left: 8px; border-left: 2px solid var(--accent); } .feedback-reply-author { font-weight: 600; color: var(--accent); margin-right: 4px; } .feedback-reply-row { display: flex; gap: 6px; margin-top: 8px; } .feedback-reply-input { flex: 1; min-width: 0; padding: 7px 9px; font: inherit; font-size: 0.85rem; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; } .feedback-reply-input:focus { border-color: var(--accent); } /* Inbox "Feedback Sent" folder (inline, collapsible) */ .inbox-folder { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 12px; overflow: hidden; background: var(--surface); } .inbox-folder-header { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0; cursor: pointer; padding: 11px 12px; color: var(--text); font: inherit; font-size: 0.9rem; font-weight: 600; } .inbox-folder-header .folder-chevron { display: inline-flex; color: var(--text-dim); transition: transform var(--motion-base, 180ms) ease; } .inbox-folder-header.open .folder-chevron { transform: rotate(90deg); } .folder-title { flex: 1; text-align: left; } .folder-count { font-size: 0.72rem; color: var(--text-dim); background: var(--surface-2); border-radius: 999px; padding: 1px 8px; font-weight: 600; } .inbox-folder-body { padding: 0 12px 4px; border-top: 1px solid var(--border); } .inbox-folder-body .feedback-item:last-child { border-bottom: 0; } .ob-bucket-made-label { font-size: 0.9rem; margin-bottom: 10px; } .ob-bucket-made-label strong { color: var(--accent); } .ob-bucket-chips { display: flex; flex-wrap: wrap; gap: 6px; } .ob-bucket-chips .tag-chip { cursor: default; } .handle-input-row { display: flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; } /* Borderless input inside — surface the focus on the wrapper row. */ .handle-input-row:focus-within { border-color: var(--accent); } .handle-input-row .handle-at { color: var(--text-dim); font-weight: 700; } .handle-input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--text); font-size: 16px; /* 16px: avoids iOS input auto-zoom */ } .handle-status { display: inline-flex; width: 18px; height: 18px; } .handle-status .ok { color: var(--success); } .handle-status .bad { color: var(--danger); } .handle-status .spin { color: var(--text-dim); display: inline-flex; animation: spin 0.9s linear infinite; } /* Any .spin element rotates — used by the "Thinking…" button on the AI bucket steps. */ .spin { display: inline-flex; vertical-align: middle; animation: spin 0.9s linear infinite; } .overlay-cta .spin { margin-right: 6px; } .handle-msg { font-size: 0.78rem; margin-top: 8px; min-height: 1em; } .handle-msg.ok { color: var(--success); } .handle-msg.bad { color: var(--danger); } /* ── Work-Log overlay (admin) ── sits above the Me drawer (z-index 150) ── */ .worklog-overlay { position: fixed; inset: 0; z-index: 950; /* above the Teams workspace (900) so Work-Log opens on top of it */ display: flex; /* toggled via inline display:none/flex */ flex-direction: column; background: var(--bg); } .worklog-overlay-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--border); } .worklog-overlay-title { flex: 1; font-weight: 600; font-size: 0.95rem; } .worklog-frame { flex: 1; width: 100%; border: 0; background: var(--bg); } /* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /* Paid Shares — console drawer + conditional bottom band. Token-based; reuses */ /* existing .drawer / .big-btn / .btn / .listing-input. (PAID-SHARES.md) */ /* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ .paid-badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--bg); background: var(--accent); padding: 2px 8px; border-radius: 999px; } .paid-status-draft { background: var(--text-dim); } .paid-status-confirming { background: var(--info); } .paid-status-live { background: var(--success); } .paid-status-paused { background: var(--info); } .paid-status-exhausted, .paid-status-killed { background: var(--danger); } .paid-status-closed { background: var(--border); color: var(--text-dim); } .paid-loading, .paid-empty, .paid-hint { color: var(--text-dim); font-size: 14px; line-height: 1.5; } .paid-hint { margin: 8px 0; } .paid-new-btn { width: 100%; margin-bottom: 14px; } .paid-list { display: flex; flex-direction: column; gap: 10px; } .paid-camp { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; background: var(--surface); } /* One label|value pair per row → two straight columns, value right-aligned. (Was 4-col / two-pairs-per-row, which mis-aligned when long labels like "Seen (impressions)" or the "≈ $" on Spent word-wrapped.) */ .paid-stat-grid { display: grid; grid-template-columns: 1fr auto; gap: 7px 14px; font-size: 13px; align-items: baseline; } .paid-stat-grid span { color: var(--text-dim); } .paid-stat-grid b { text-align: right; white-space: nowrap; } .paid-build, .paid-review { display: flex; flex-direction: column; gap: 10px; } .paid-build .listing-input, .paid-review .listing-input { width: 100%; } .paid-reach-label { font-size: 13px; color: var(--text-dim); display: block; } .paid-reach-label input[type=range] { width: 100%; margin-top: 4px; } .paid-build-actions { display: flex; gap: 10px; justify-content: space-between; margin-top: 6px; } .paid-rev-meta { display: flex; flex-direction: column; gap: 10px; } .paid-rev-meta > div > span { color: var(--text-dim); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; } /* Price / Estimated reach as clean key:value rows (label left, value right) */ .paid-rev-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .paid-rev-kv > strong { font-size: 15px; text-align: right; } .paid-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .paid-tag { background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; font-size: 13px; } /* The band: conditional, wide/landscape, bottom — with a right dead-margin so a Pulse hold (bottom-right) never mis-taps the CTA. Hidden until a card exists. */ #paid-band { position: fixed; left: 12px; right: 96px; bottom: 14px; z-index: 40; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-heavy); padding: 10px 12px; } .paid-band-expanded { display: flex; flex-direction: column; gap: 8px; } .paid-band-copy { color: var(--text-dim); font-size: 14px; line-height: 1.5; } @media (min-width: 640px) { #paid-band { right: 96px; max-width: 520px; } } /* ── Paid Shares: horizontal banner (v1 only format) + builder previews ── */ .paid-banner { display: flex; flex-direction: column; gap: 4px; } .paid-banner-tap { touch-action: pan-y; } /* horizontal swipe = page ads (own it); vertical still scrolls */ .paid-banner-tag { align-self: flex-start; font-size: 10px; padding: 1px 6px; } .paid-banner-row { display: flex; align-items: center; gap: 10px; } .paid-banner-thumbs { display: flex; gap: 4px; flex: none; } .paid-banner-thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; border: 1px solid var(--border); } .paid-banner-text { flex: 1; min-width: 0; } .paid-banner-headline { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Title + inline Report flag — headline shrinks/ellipsis so the flag stays right after it. */ .paid-banner-titlerow { display: flex; align-items: center; gap: 6px; } .paid-banner-titlerow .paid-banner-headline { flex: 0 1 auto; min-width: 0; } .paid-banner-copy { color: var(--text-dim); font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Whole-card click-through (consistent with opening a Share). */ .paid-banner-tap { cursor: pointer; border-radius: var(--radius); transition: background .12s ease; } .paid-banner-tap:hover, .paid-banner-tap:focus-visible { background: var(--surface-2); outline: none; } /* Expanded detail: title (left) + compact icon actions (top-right of the title) */ .paid-exp-titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .paid-exp-titlerow .paid-banner-headline { white-space: normal; } .paid-exp-icons { display: flex; gap: 6px; flex: none; } /* Builder: live preview of the banner + the thumb picker */ .paid-format-note { font-size: 12px; color: var(--text-dim); margin-top: 6px; } .paid-band-preview { border: 1px dashed var(--border); border-radius: var(--radius); padding: 10px; background: var(--surface); margin: 6px 0 10px; } .paid-field-label { font-size: 13px; font-weight: 600; display: block; margin-top: 4px; } .paid-dim { color: var(--text-dim); font-weight: 400; } .paid-credit-anchor { font-size: 12px; margin: 6px 2px 12px; } .paid-bill-note { font-size: 12px; line-height: 1.4; margin: 8px 2px 2px; } .paid-thumbs { display: flex; gap: 8px; flex-wrap: wrap; } .paid-thumb { position: relative; width: 56px; height: 56px; } .paid-thumb-img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); } .paid-thumb-x { position: absolute; top: -8px; right: -8px; width: 28px; height: 28px; border-radius: 50%; border: none; background: var(--danger); color: #fff; font-size: 14px; line-height: 1; cursor: pointer; } .paid-addimg { align-self: flex-start; } /* Expanded banner (after CTA tap) + empty state */ .paid-exp-thumbs { display: flex; gap: 6px; flex-wrap: wrap; } .paid-exp-imgwrap { display: inline-block; line-height: 0; } /* ⑦ pull-to-dismiss affordance on the opened Promoted card */ .paid-exp-grabber { width: 36px; height: 4px; border-radius: 2px; background: var(--border); margin: 2px auto 8px; } .paid-band-expanded { touch-action: pan-y; } .paid-exp-img { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); } /* ── Paid Shares: "AI is working" overlay + motion feedback ── */ /* NOTE: do NOT set position:relative on #paid-drawer .drawer-panel — the base .drawer-panel is already position:absolute (a positioned ancestor), so the inset:0 overlay anchors fine. Overriding to relative collapsed the panel's height and broke drawer scrolling. */ .paid-working-overlay { position: absolute; inset: 0; z-index: 5; background: var(--backdrop, rgba(10,10,15,.72)); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; animation: paid-fade .18s ease; } /* The overlay backdrop is dark in BOTH themes, so its text must be light — else the theme's dark text (title) / --text-dim (step) is unreadable on it. */ .paid-working { text-align: center; padding: 24px; max-width: 260px; color: #fff; } .paid-working-title { font-weight: 700; margin-top: 16px; color: #fff; } .paid-working-step { color: rgba(255, 255, 255, .78); font-size: 13px; margin-top: 6px; min-height: 1.2em; animation: paid-pulse 1.5s ease-in-out infinite; } .paid-loading { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--text-dim); font-size: 13px; padding: 24px 0; } /* When the Pulse reserved strip (#pulse-paid-band) holds a real Paid Share, neutralize its placeholder styling (centered italic) so the banner fits. */ .pulse-paid-band.has-paid-card { text-align: left; font-style: normal; color: var(--text); /* The card's internal layout (tag row · title row · copy) is LEFT-aligned — do NOT centre the text (it splits the rows apart on a wide band, the v140 bug). Instead the .paid-banner is capped + margin-auto'd below so the whole card sits centred as a block. Right padding clears the Pulse FAB; left mirrors it for symmetric centring. */ padding: 10px 92px calc(10px + env(safe-area-inset-bottom, 0px)) 92px; } /* Centre the card as a BLOCK: cap its width and auto-margin it, so on a wide screen it sits centred (internal text stays left-aligned) instead of stretching full-width. */ #pulse-paid-band .paid-banner, #pulse-paid-band .paid-band-expanded { max-width: 480px; margin-left: auto; margin-right: auto; } /* Only the pulse-on context controls visibility — never force the strip visible outside it (JS only writes into the strip when it's already shown). */ html[data-uix="pulse"] body.pulse-on .pulse-paid-band.has-paid-card { display: block; } /* Subtle reveal when a live Paid Share appears in the band (NOT the builder preview, which re-renders on every keystroke). */ #paid-band .paid-banner, #paid-band .paid-band-expanded, #pulse-paid-band .paid-banner, #pulse-paid-band .paid-band-expanded { animation: paid-slideup .26s ease; } @keyframes paid-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes paid-pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } } @keyframes paid-slideup { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .paid-working-overlay, #paid-band .paid-banner, #paid-band .paid-band-expanded { animation: none; } .paid-working-step { animation: none; } } /* ── Paid Shares: in-system funding step + inline close confirm (no JS popups) ── */ .paid-fund { display: flex; flex-direction: column; gap: 10px; } .paid-fund-presets { display: flex; gap: 8px; } .paid-fund-presets .btn { flex: 1; } .paid-fund-est { color: var(--text-dim); font-size: 13px; min-height: 1.2em; } /* Funding watcher: hosts the reused Wallet stepper (.wstep*), then a success line once the payment credits and the Paid Share launches. */ .paid-pay-status { margin: 16px 0 4px; } .paid-pay-done { margin-top: 12px; text-align: center; font-size: .8rem; font-weight: 600; color: var(--accent-green, #2e9e5b); line-height: 1.4; } /* Same-device deep link: primary, full-width; QR becomes the cross-device fallback */ .paid-pay-open { display: block; width: 100%; text-align: center; margin: 12px 0 4px; } .paid-pay-copyrow { display: flex; gap: 8px; justify-content: center; margin: 8px 0; } .paid-pay-qr-cap { color: var(--text-dim); font-size: 12px; margin: 10px 0 6px; } .paid-pay-refund { font-size: 12px; line-height: 1.4; margin: 10px 2px 2px; } /* Collapsed manual-payment fallback so the one-click path leads the screen */ .paid-pay-alt { margin: 12px 0 2px; } .paid-pay-alt > summary { cursor: pointer; color: var(--text-dim); font-size: 13px; padding: 4px 0; } /* ── Paid Shares: self-explanatory campaign card (headline + status + next step) ── */ .paid-camp-head { display: flex; gap: 10px; align-items: center; } .paid-camp-thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; border: 1px solid var(--border); flex: none; } .paid-camp-thumb-none { background: var(--surface-2); } .paid-camp-id { min-width: 0; flex: 1; } .paid-camp-headline { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .paid-camp-statusrow { display: flex; align-items: center; gap: 8px; margin-top: 3px; } .paid-camp-meta { color: var(--text-dim); font-size: 12px; } .paid-camp-hint { color: var(--text-dim); font-size: 12px; margin: 8px 0; line-height: 1.45; } /* ── Hover-timing consistency ── These interactive elements change color/background/border on hover but had no transition (they snapped) while peers like .inbox-row / .top-btn / .nearby-toggle ease in. Give them the same .12s ease so all hovers feel uniform. Timing-only — no layout or value change. */ .feed-item, .tag-chip, .tag-chip-tile, .loc-tile, .me-accordion-header, .bucket-pick, .my-share-delete, .popover-item { transition: background-color .12s ease, border-color .12s ease, color .12s ease; } /* ── Paid Shares: glanceable overview card + drill-down analytics ── */ .paid-camp-tap { cursor: pointer; transition: border-color .12s ease; } .paid-camp-tap:hover, .paid-camp-tap:focus-visible { border-color: var(--accent); outline: none; } .paid-camp-icons { display: flex; gap: 6px; margin-left: auto; flex: none; } .paid-camp-glance { color: var(--text-dim); font-size: 12px; margin-top: 8px; } .paid-camp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .paid-back { padding-left: 6px; } .paid-back svg { vertical-align: -3px; } .paid-tagbreak { display: flex; flex-direction: column; gap: 6px; } .paid-tagrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 10px; } .paid-tagrow-m { color: var(--text-dim); font-size: 12px; white-space: nowrap; } .paid-band-by { color: var(--text-dim); font-size: 12px; margin: 2px 0 4px; } /* ── Paid Shares: rotation indicator (carousel dots next to "Promoted") ── */ .paid-banner-tagrow { display: flex; align-items: center; gap: 8px; align-self: flex-start; } .paid-banner-flag { background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 2px; display: flex; flex: none; border-radius: 6px; } .paid-banner-flag svg { width: 15px; height: 15px; } .paid-banner-flag:hover, .paid-banner-flag:focus-visible { color: var(--danger); outline: none; } .paid-rot { display: inline-flex; align-items: center; gap: 4px; } .paid-rot-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--border); transition: background .2s ease, transform .2s ease; } .paid-rot-dot.on { background: var(--accent); transform: scale(1.25); } /* ── Paid-Share contact threads: "Promoted" tag in the Inbox + thread header ── */ .inbox-promoted, .promoted-label { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--bg); background: var(--accent); padding: 1px 7px; border-radius: 999px; vertical-align: middle; } .promoted-label { background: transparent; color: var(--accent); border: 1px solid var(--accent); } .promoted-label svg { width: 12px; height: 12px; vertical-align: -2px; } /* ── Paid Shares band: loading / empty messages ── */ .paid-band-msg { color: var(--text-dim); font-size: 12px; text-align: center; font-style: normal; } .paid-learn { background: none; border: none; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; padding: 0 2px; } .paid-dots { display: inline-flex; gap: 3px; margin-left: 5px; vertical-align: middle; } .paid-dots span { width: 4px; height: 4px; border-radius: 50%; background: var(--text-dim); animation: paid-blink 1.2s infinite both; } .paid-dots span:nth-child(2) { animation-delay: .2s; } .paid-dots span:nth-child(3) { animation-delay: .4s; } @keyframes paid-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .paid-dots span { animation: none; opacity: .6; } } /* ── Paid Shares: archived state + toggle ── */ .paid-camp-archived { opacity: .6; } .paid-arch-toggle { width: 100%; margin-top: 12px; font-size: 12px; color: var(--text-dim); } /* ══════════ Admin Dashboard (renders into the Teams .teams-dash surface) ══════════ */ .admin-loading { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--text-dim); padding: 40px 0; } .admin-err { color: var(--danger); padding: 24px; text-align: center; } .admin-dim { color: var(--text-dim); font-size: 13px; padding: 4px 0; } .admin-range { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; } .admin-range-btn { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 12px; cursor: pointer; } .admin-range-btn.on { background: var(--accent); color: var(--bg); border-color: var(--accent); } .admin-range-note { color: var(--text-dim); font-size: 11px; margin-left: auto; } .admin-kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .admin-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; } .admin-kpi-val { font-size: 1.5rem; font-weight: 800; line-height: 1.1; } .admin-kpi-label { color: var(--text-dim); font-size: 12px; margin-top: 3px; } .admin-kpi-sub { color: var(--text-dim); font-size: 11px; margin-top: 4px; } .admin-kpi-warn .admin-kpi-val { color: var(--danger); } .admin-section { margin-top: 22px; } .admin-section-title { font-weight: 700; font-size: 14px; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); } .admin-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; margin-bottom: 10px; } .admin-card-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--text-dim); margin-bottom: 8px; } .admin-card-head b { color: var(--text); font-size: 15px; } .admin-chart { width: 100%; height: 56px; display: block; } .admin-stats { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 8px 0; } .admin-stat { display: flex; flex-direction: column; } .admin-stat span { color: var(--text-dim); font-size: 11px; } .admin-stat b { font-size: 15px; } .admin-bd { margin: 10px 0; } .admin-bd-title { color: var(--text-dim); font-size: 12px; margin-bottom: 6px; } .admin-bd-row { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 4px; } .admin-bd-label { flex: 0 0 38%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dim); } .admin-bd-bar { flex: 1; height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; } .admin-bd-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; } .admin-bd-row b { flex: none; min-width: 36px; text-align: right; } /* Admin Dashboard: tools row + flagged-paid action rows */ .admin-tools { display: flex; gap: 8px; margin-bottom: 14px; } .admin-flagrow { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 6px 0; border-top: 1px solid var(--border); } .admin-flag-id { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dim); } .admin-flagrow .btn-small { padding: 3px 10px; font-size: 11px; } .admin-kill-btn { color: var(--danger); border-color: var(--danger); } /* Treasury wallet section: big ERG balance, copyable address, recent tx rows. */ .admin-treasury-bal { font-size: 24px; font-weight: 800; } .admin-treasury-addr { display: flex; align-items: center; gap: 8px; margin: 6px 0 10px; font-size: 12px; color: var(--text-dim); font-family: var(--mono, monospace); } .admin-treasury-addr .btn-small { padding: 2px 9px; font-size: 11px; } .admin-treasury-acts { display: flex; flex-direction: column; } .admin-tx { display: flex; align-items: center; gap: 10px; font-size: 12px; padding: 6px 0; border-top: 1px solid var(--border); } .admin-tx-amt { font-weight: 700; font-variant-numeric: tabular-nums; } .admin-tx-in { color: var(--success); } .admin-tx-out { color: var(--text); } .admin-tx-when { margin-left: auto; } /* ===================== Lens (Public/Links) surfaces (LENS-MODEL.md) ===================== */ /* The Lens CONTROL lives in the Pulse wheel (mobile-native, under Me). These are its cues. The CURRENT Public/Links pick reads SELECTED (filled accent), the same language Show uses for its active category. */ .pulse-me-slice.lens-selected .pulse-slice-ic { background: var(--accent); border-color: var(--accent); color: #fff; } .pulse-me-slice.lens-selected .pulse-slice-tx { border-color: var(--accent); color: var(--accent); } /* Wordmark breadcrumb — NEAR.me (accent) + .. segments, the live coordinate (NEAR.me.friends.place). Both segments are real buttons: lens taps flip Public/Friends, show taps open the Show picker. Replaces the old floating lens-indicator pill. */ .wordmark-seg { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--text); font-size: 0.85rem; /* secondary to NEAR.me, but not tiny */ font-weight: 600; letter-spacing: -0.2px; /* squishy — tighter than the NEAR.me tracking */ align-self: baseline; /* ride NEAR.me's baseline (lower plane), not centred */ white-space: nowrap; transition: color 0.15s; } .wordmark-seg:hover { color: var(--accent); } .wordmark-show { opacity: 0.85; } /* Settings drawer: the Teams row reuses the #teams-unread-badge (normally an absolute-positioned header chip). Lay it out inline at the row's trailing edge. */ .settings-row-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .settings-row-btn .unread-badge { position: static; top: auto; right: auto; } /* Category tint when a Show filter is active (matches the Pulse slice colours). */ .wordmark-show.cat-people { color: var(--info); opacity: 1; } .wordmark-show.cat-place { color: var(--success); opacity: 1; } .wordmark-show.cat-thing { color: var(--accent); opacity: 1; } /* Composer "Share with Links" selection — chosen via the popup picker (same as "Share a Share with Links"); the names list back here under the button. Any selection makes the new share born-private to exactly them (LENS-MODEL.md S3). */ .composer-links-list:empty { display: none; } .composer-links-list { margin: 2px 0 4px; padding: 8px 10px; border: 1px solid var(--accent); border-radius: 10px; background: color-mix(in srgb, var(--accent) 8%, transparent); } .composer-links-head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--accent); margin-bottom: 6px; } .composer-links-clear { margin-left: auto; background: none; border: none; cursor: pointer; font: inherit; font-size: 11px; font-weight: 600; color: var(--text-dim); padding: 0; } .composer-link-chips { display: flex; flex-wrap: wrap; gap: 6px; } .composer-link-chip { font-size: 11px; font-weight: 600; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; } /* Community Review feed invite — a slim civic card between the feed sections. Only appears when the wallet is eligible AND something nearby needs eyes. */ .feed-review-invite { display: flex; align-items: center; gap: 12px; margin: 10px 0; padding: 12px 14px; background: color-mix(in srgb, var(--info) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--info) 35%, var(--border)); border-radius: var(--radius); } .feed-review-invite .fri-ic { color: var(--info); display: inline-flex; flex-shrink: 0; } .feed-review-invite .fri-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .feed-review-invite .fri-tx strong { font-size: 0.85rem; } .feed-review-invite .fri-sub { font-size: 0.75rem; color: var(--text-dim); line-height: 1.4; } /* Born-private marker on a feed card (S5). */ .feed-private-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; letter-spacing: .02em; color: var(--accent); border: 1px solid var(--accent); border-radius: 6px; padding: 1px 6px; background: color-mix(in srgb, var(--accent) 12%, transparent); } /* ── Owner's friends-only share: WIRED recipient list (Share-Detail, under the * Friends-Only badge). A vertical "wire" rail with a node per recipient + a dashed * Add node at the end. Owner-only; recipients who unlinked show muted. ── */ .share-recipients { margin: 2px 0 14px; } .share-recipients-head { display: flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 700; letter-spacing: .02em; color: var(--accent); margin-bottom: 8px; } .share-recipients-head svg { width: 13px; height: 13px; } .recip-wire { position: relative; padding-left: 16px; } .recip-wire::before { /* the wire */ content: ""; position: absolute; left: 4px; top: 4px; bottom: 16px; width: 2px; background: color-mix(in srgb, var(--accent) 32%, var(--border)); border-radius: 2px; } .recip-node { position: relative; display: flex; align-items: center; gap: 7px; padding: 5px 0; font-size: 0.84rem; color: var(--text); } .recip-node::before { /* node dot */ content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface); } .recip-node svg { width: 13px; height: 13px; opacity: .65; flex: none; } .recip-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* per-node Remove (revoke) — sits at the row's right edge, danger on hover. */ .recip-remove { flex: none; margin-left: 6px; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; padding: 0; background: transparent; border: none; color: var(--text-dim); cursor: pointer; -webkit-tap-highlight-color: transparent; } .recip-remove svg { width: 13px; height: 13px; opacity: 1; } .recip-remove:hover, .recip-remove:focus-visible { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); outline: none; } /* Long list: show the first N, collapse the rest behind "Show all N". */ .recip-list.collapsed .recip-node:nth-child(n+7) { display: none; } .recip-toggle { display: inline-block; margin: 1px 0 3px; padding: 4px 0; font: inherit; font-size: .74rem; font-weight: 700; color: var(--info); background: transparent; border: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } .recip-toggle:hover, .recip-toggle:focus-visible { text-decoration: underline; outline: none; } .recip-node.recip-unlinked { opacity: .5; } .recip-node.recip-unlinked::before { background: var(--text-dim); } .recip-flag { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); border: 1px solid var(--border); border-radius: 5px; padding: 0 5px; } .recip-empty { font-size: .78rem; color: var(--text-dim); font-style: italic; padding: 3px 0; } .recip-add { /* dashed node at the end of the wire */ position: relative; display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; font: inherit; font-size: .76rem; font-weight: 700; color: var(--accent); background: transparent; border: none; cursor: pointer; padding: 5px 0; -webkit-tap-highlight-color: transparent; } .recip-add::before { content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 9px; height: 9px; border-radius: 50%; box-sizing: border-box; background: var(--surface); border: 2px dashed color-mix(in srgb, var(--accent) 55%, var(--border)); } .recip-add svg { width: 13px; height: 13px; } .recip-add:hover, .recip-add:focus-visible { text-decoration: underline; outline: none; } /* ===================== User Guide (in-app, searchable) ===================== */ .guide-overlay { position: fixed; inset: 0; z-index: 200; display: none; } .guide-overlay.open { display: block; } .guide-backdrop { position: absolute; inset: 0; background: var(--backdrop, rgba(0,0,0,.6)); } .guide-sheet { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(600px, 96vw); height: min(860px, 92vh); /* fallback */ height: min(860px, calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px)); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-soft, 0 12px 48px rgba(0,0,0,.45)); overflow: hidden; } .guide-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 12px; } .guide-title { font-size: 1.15rem; font-weight: 800; letter-spacing: .5px; color: var(--accent); } .guide-close { background: none; border: none; cursor: pointer; color: var(--text-dim); font-size: 1.05rem; line-height: 1; padding: 6px 8px; border-radius: 8px; } .guide-close:hover { color: var(--text); background: var(--surface-2, var(--bg)); } .guide-searchwrap { flex: 0 0 auto; padding: 0 18px 12px; border-bottom: 1px solid var(--border); } .guide-search { width: 100%; box-sizing: border-box; padding: 11px 14px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); color: var(--text); font: inherit; font-size: 0.95rem; -webkit-appearance: none; appearance: none; } .guide-search:focus { outline: none; border-color: var(--accent); } .guide-list { flex: 1 1 auto; overflow-y: auto; padding: 8px 18px 24px; -webkit-overflow-scrolling: touch; } .guide-cat { font-size: 0.7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); margin: 18px 2px 8px; } .guide-cat:first-child { margin-top: 6px; } .guide-topic { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px; overflow: hidden; transition: border-color .15s; } .guide-topic.open { border-color: var(--accent); } .guide-topic-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: none; border: none; cursor: pointer; text-align: left; font: inherit; font-size: 0.95rem; font-weight: 700; color: var(--text); padding: 13px 14px; } .guide-topic.open .guide-topic-q { color: var(--accent); } .guide-topic-chev { color: var(--text-dim); transition: transform .18s ease; flex: 0 0 auto; display: inline-flex; } .guide-topic.open .guide-topic-chev { transform: rotate(90deg); color: var(--accent); } .guide-topic-a { display: none; padding: 2px 14px 14px; font-size: 0.9rem; line-height: 1.55; color: var(--text); } .guide-topic.open .guide-topic-a { display: block; } .guide-topic-a p { margin: 0 0 10px; } .guide-topic-a p:last-child { margin-bottom: 0; } .guide-topic-a ol, .guide-topic-a ul { margin: 0 0 10px; padding-left: 20px; } .guide-topic-a li { margin-bottom: 6px; } .guide-topic-a a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .guide-related { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .guide-related-lbl { font-size: 0.68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); margin-right: 2px; } .guide-rel-chip { background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid var(--accent); color: var(--accent); cursor: pointer; font: inherit; font-size: 0.78rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; } .guide-rel-chip:hover { background: var(--accent); color: #fff; } .guide-empty { text-align: center; color: var(--text-dim); padding: 32px 16px; font-size: 0.92rem; line-height: 1.6; } /* ===================== Tester location picker (OSM-tile map) ===================== */ /* The composer location row, tappable for score>=25 testers. */ .location-display.is-editable { cursor: pointer; } .location-display.is-editable .loc-edit { margin-left: 6px; font-size: 0.7rem; font-weight: 700; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 1px 7px; white-space: nowrap; } .location-display.is-override { color: var(--accent); } .locpick-overlay { position: fixed; inset: 0; z-index: 210; display: none; } .locpick-overlay.open { display: block; } .locpick-backdrop { position: absolute; inset: 0; background: var(--backdrop, rgba(0,0,0,.6)); } .locpick-sheet { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, 96vw); max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-soft, 0 12px 48px rgba(0,0,0,.45)); } .locpick-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 6px; } .locpick-title { font-size: 1.1rem; font-weight: 800; letter-spacing: .3px; color: var(--accent); } .locpick-x { background: none; border: none; cursor: pointer; color: var(--text-dim); font-size: 1.05rem; padding: 4px 6px; } .locpick-hint { font-size: 0.78rem; color: var(--text-dim); padding: 0 16px 10px; } .locpick-vp { position: relative; width: 100%; height: min(58vh, 420px); overflow: hidden; background: var(--bg); cursor: grab; touch-action: none; user-select: none; } .locpick-vp:active { cursor: grabbing; } .locpick-layer { position: absolute; inset: 0; will-change: transform; } .locpick-tile { position: absolute; width: 256px; height: 256px; -webkit-user-drag: none; user-select: none; } .locpick-pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); } .locpick-zoom { position: absolute; right: 10px; bottom: 30px; display: flex; flex-direction: column; gap: 6px; } .locpick-zoom button { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 1.15rem; line-height: 1; cursor: pointer; } .locpick-attr { position: absolute; left: 6px; bottom: 5px; font-size: 10px; color: var(--text-dim); background: color-mix(in srgb, var(--surface) 72%, transparent); padding: 1px 6px; border-radius: 4px; } .locpick-coords { text-align: center; font-variant-numeric: tabular-nums; font-size: 0.9rem; color: var(--text); padding: 10px; } .locpick-actions { display: flex; gap: 8px; padding: 0 14px 14px; } .locpick-actions .btn { flex: 1; } /* ══════════ Teams workspace (TEAMS.md) ══════════ */ /* Accented top-header button — privileged tool, stands out from the ghost btns. */ .teams-btn { color: var(--accent); border: 1px solid var(--accent); background: var(--accent-glow); border-radius: 10px; } .teams-btn:hover { background: var(--accent); color: var(--bg); } .teams-btn .top-btn-label { color: inherit; } /* Full-screen workspace (not the narrow drawer — a session is sustained). */ .teams-overlay { position: fixed; inset: 0; z-index: 900; display: none; } .teams-shell { display: flex; flex-direction: column; width: 100%; height: 100%; background: var(--bg); } .teams-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .teams-title { font-weight: 800; letter-spacing: .5px; color: var(--accent); white-space: nowrap; } .teams-segs { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; } .teams-seg { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 999px; padding: 5px 16px; font: inherit; font-size: 13px; cursor: pointer; } .teams-seg.on { background: var(--accent); color: var(--bg); border-color: var(--accent); } .teams-close { flex-shrink: 0; } .teams-body { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .teams-loading { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--text-dim); padding: 48px 0; margin: auto; } .teams-err { color: var(--danger); padding: 28px; text-align: center; margin: auto; } .teams-dim { color: var(--text-dim); padding: 10px 0; font-size: 13px; } /* Strategize — the chat */ /* min-height:0 is load-bearing: without it a flex item won't shrink below its content, so a tall chat pushes the compose + sub-bar buttons out the bottom of the overflow:hidden body (they get clipped → "no click" on a full session). */ .teams-chat { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 18px 16px; display: flex; flex-direction: column; gap: 14px; } .teams-empty { color: var(--text-dim); text-align: center; margin: auto; max-width: 34ch; line-height: 1.55; } .teams-msg { max-width: min(760px, 88%); width: fit-content; } .teams-msg-me { align-self: flex-end; } .teams-msg-ai { align-self: flex-start; } .teams-msg-who { font-size: 11px; color: var(--text-dim); margin-bottom: 3px; } .teams-msg-me .teams-msg-who { text-align: right; } .teams-msg-text { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; line-height: 1.55; overflow-wrap: anywhere; } .teams-msg-me .teams-msg-text { background: var(--accent-glow); border-color: var(--accent); } .teams-msg-text p { margin: 0 0 8px; } .teams-msg-text p:last-child { margin-bottom: 0; } .teams-thinking { color: var(--text-dim); font-style: italic; } .teams-err-inline { color: var(--danger); } .teams-compose { display: flex; gap: 8px; align-items: flex-end; padding: 12px 16px; border-top: 1px solid var(--border); flex-shrink: 0; } .teams-input { flex: 1; resize: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 12px; padding: 10px 14px; font: inherit; line-height: 1.4; max-height: 160px; } .teams-send { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: var(--accent); color: var(--bg); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; } .teams-send:disabled { opacity: .5; cursor: default; } .teams-subbar { display: flex; align-items: center; justify-content: space-between; padding: 6px 16px 12px; flex-shrink: 0; gap: 12px; flex-wrap: wrap; } .teams-hint { color: var(--text-dim); font-size: 11px; } /* Real tap targets (was tiny underlined text — unreliable on touch/tablet). */ .teams-clear { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); font: inherit; font-size: 12px; cursor: pointer; border-radius: 999px; padding: 7px 14px; min-height: 34px; } .teams-clear:hover { border-color: var(--accent); color: var(--accent); } /* Team roster (owner only) */ .teams-roster { flex: 1; min-height: 0; padding: 18px 16px; overflow-y: auto; width: 100%; max-width: 760px; margin: 0 auto; } .teams-roster-title { font-weight: 700; font-size: 15px; margin-bottom: 4px; } .teams-roster-hint { color: var(--text-dim); font-size: 12px; margin-bottom: 16px; line-height: 1.55; } .teams-member { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 8px; } .teams-member-owner { border-color: var(--accent); } .teams-member-id { font-size: 13px; overflow-wrap: anywhere; } .teams-member-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; flex-wrap: wrap; } .teams-toggle { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 8px; padding: 5px 12px; font: inherit; font-size: 12px; cursor: pointer; } .teams-toggle.on { background: var(--accent); color: var(--bg); border-color: var(--accent); } .teams-remove { background: none; border: 1px solid var(--border); color: var(--danger); border-radius: 8px; padding: 5px 12px; font: inherit; font-size: 12px; cursor: pointer; } .teams-add { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; } .teams-add-input { flex: 1; min-width: 180px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 9px 12px; font: inherit; } .teams-add-btn { background: var(--accent); color: var(--bg); border: none; border-radius: 10px; padding: 9px 18px; font: inherit; font-weight: 600; cursor: pointer; } /* ── Teams · Discussions (thin-B) ── */ .teams-subactions { display: flex; gap: 14px; align-items: center; } .teams-disc-wrap { flex: 1; min-height: 0; padding: 18px 16px; overflow-y: auto; width: 100%; max-width: 760px; margin: 0 auto; } .teams-disc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font-weight: 700; font-size: 15px; } .teams-disc-list { display: flex; flex-direction: column; gap: 8px; } .teams-disc-item { text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; cursor: pointer; font: inherit; color: var(--text); } .teams-disc-item:hover { border-color: var(--accent); } .teams-disc-title { font-weight: 600; margin-bottom: 3px; } .teams-disc-meta { color: var(--text-dim); font-size: 12px; } .teams-disc-view { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px; width: 100%; max-width: 760px; margin: 0 auto; } .teams-back { background: none; border: none; color: var(--text-dim); font: inherit; font-size: 13px; cursor: pointer; padding: 0; margin-bottom: 12px; } .teams-back:hover { color: var(--accent); } .teams-disc-post { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; } .teams-disc-posttitle { font-size: 18px; font-weight: 700; line-height: 1.3; } .teams-disc-postmeta { color: var(--text-dim); font-size: 12px; margin: 4px 0 12px; } .teams-disc-postbody { line-height: 1.6; overflow-wrap: anywhere; } .teams-disc-postbody p { margin: 0 0 10px; } .teams-disc-postbody p:last-child { margin-bottom: 0; } .teams-disc-actions { display: flex; gap: 10px; margin-top: 14px; } .teams-comments { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; } .teams-comment { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; } .teams-comment-text { line-height: 1.55; overflow-wrap: anywhere; margin-top: 2px; } .teams-comment-text p { margin: 0 0 6px; } .teams-comment-text p:last-child { margin-bottom: 0; } .teams-compose-inline { border-top: none; padding: 0; } /* New / draft post forms */ .teams-form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 10px; } .teams-form-title { font-weight: 700; font-size: 15px; } .teams-form-desc { resize: vertical; min-height: 120px; max-height: none; } .teams-form-actions { display: flex; gap: 10px; align-items: center; } /* AI-draft confirm — overlay card over the session */ .teams-draftwrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.45); padding: 20px; z-index: 5; } .teams-draft { background: var(--bg); border: 1px solid var(--accent); border-radius: 14px; box-shadow: var(--shadow-heavy); padding: 18px; width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 10px; } .teams-draft-hint { color: var(--text-dim); font-size: 12px; } .teams-body { position: relative; } /* ── Teams · Dashboard (owner-only; relocated Admin Dashboard) ── */ .teams-dash { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px; width: 100%; } /* ── Teams · Decided (decision of record) ── */ .teams-disc-filter { display: flex; gap: 6px; margin-bottom: 12px; } .teams-decided-tick { color: var(--success); font-weight: 700; } .teams-disc-post.is-decided { border-color: var(--success); } .teams-decided-banner { background: color-mix(in srgb, var(--success) 12%, var(--surface)); border: 1px solid var(--success); border-radius: 10px; padding: 10px 14px; margin: 4px 0 12px; } .teams-decided-head { font-weight: 700; font-size: 13px; color: var(--success); margin-bottom: 4px; } .teams-decided-text { line-height: 1.55; overflow-wrap: anywhere; } .teams-decided-text p { margin: 0 0 6px; } .teams-decided-text p:last-child { margin-bottom: 0; } /* ── Teams · Live-data toggle (strategist-reads-live-data, opt-in) ── */ .teams-livetoggle.on { background: var(--accent); color: var(--bg); border-color: var(--accent); }