/* Wild Journal — Workspace (map + trips combined) */ .wj-ws { display: flex; flex-direction: column; height: calc(100vh - 61px); } /* The site-wide text-size preference (data-text-size on ) should only affect content inside workspace windows, not the top nav or the workspace menu bar — reset back to the default scale here, then .wj-ws-window-body re-applies it below. */ .wj-nav, .wj-ws { --wj-text-xs: 0.75rem; --wj-text-sm: 0.875rem; --wj-text-base: 1rem; --wj-text-lg: 1.125rem; --wj-text-xl: 1.375rem; --wj-text-2xl: 1.75rem; --wj-text-3xl: 2.25rem; } /* ── Mobile notice (Workspace needs a bigger viewport) ───────────── */ .wj-ws-mobile-notice { display: none; } @media (max-width: 820px) { .wj-ws { position: relative; } .wj-ws-mobile-notice { display: flex; align-items: center; justify-content: center; position: absolute; inset: 0; z-index: 5000; padding: var(--wj-space-5); text-align: center; background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(6px); } .wj-ws-mobile-notice-card { max-width: 360px; background: var(--bg-card); border: var(--wj-border-width) solid var(--border); border-radius: var(--wj-radius-lg); padding: var(--wj-space-6); } .wj-ws-mobile-notice-card svg { width: 40px; height: 40px; color: var(--text-accent); margin: 0 auto var(--wj-space-4); } .wj-ws-mobile-notice-card h2 { font-size: var(--wj-text-xl); text-transform: uppercase; margin-bottom: var(--wj-space-3); } .wj-ws-mobile-notice-card p { color: var(--text-muted); font-size: var(--wj-text-sm); } } /* ── Menu bar ─────────────────────────────────────────────────── */ .wj-ws-menubar { display: flex; align-items: stretch; gap: var(--wj-space-1); padding: 0 var(--wj-space-2); height: 44px; flex: 0 0 44px; background: var(--bg-elevated); border-bottom: 1px solid var(--border); position: relative; z-index: 1100; } .wj-ws-menu { position: relative; } .wj-ws-menu-btn { height: 100%; padding: 0 var(--wj-space-3); background: transparent; border: none; color: var(--text); font-size: var(--wj-text-sm); font-weight: 600; cursor: pointer; border-radius: var(--wj-radius-sm); } .wj-ws-menu-btn:hover, .wj-ws-menu-btn[aria-expanded="true"] { background: var(--bg-card-hover); color: var(--text-accent); } .wj-ws-menu-list { position: absolute; top: 100%; left: 0; min-width: 200px; margin: 4px 0 0; padding: var(--wj-space-1); list-style: none; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--wj-radius-md); box-shadow: var(--wj-shadow-md); z-index: 1200; } .wj-ws-menu-list[hidden] { display: none; } .wj-ws-menu-list li { display: block; } .wj-ws-menu-list button { display: block; width: 100%; text-align: left; padding: var(--wj-space-2) var(--wj-space-3); background: transparent; border: none; border-radius: var(--wj-radius-sm); color: var(--text); font-size: var(--wj-text-sm); cursor: pointer; } .wj-ws-menu-list button:hover, .wj-ws-menu-list button:focus-visible { background: var(--bg-card-hover); color: var(--text-accent); outline: none; } .wj-ws-menubar[data-logged-in="false"] .wj-ws-menu-list button[data-auth="required"]::after { content: "🔒"; float: right; opacity: 0.6; font-size: var(--wj-text-xs); } .wj-ws-menu-list button[aria-pressed]::before { display: inline-block; width: 1.2em; content: ""; } .wj-ws-menu-list button[aria-pressed="true"]::before { content: "✓"; } /* ── Map area ─────────────────────────────────────────────────── */ .wj-ws-map-area { position: relative; flex: 1 1 auto; min-height: 0; } #wsMap { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--bg-inset); } #wsMap.is-drawing { cursor: crosshair; } /* Lay out top-left map controls (zoom, layer switcher) side by side instead of stacked, and keep them above minimised windows in the dock and above open workspace windows when the layer list is expanded. */ #wsMap .leaflet-top.leaflet-left { display: flex; align-items: flex-start; gap: var(--wj-space-2); } #wsMap .leaflet-control-container, #wsMap .leaflet-top, #wsMap .leaflet-bottom { z-index: 1300; } /* ── Route stats / elevation overlay (top-centre of map) ────────── */ .wj-ws-route-overlay { position: absolute; top: var(--wj-space-3); left: 50%; transform: translateX(-50%); z-index: 950; display: flex; gap: var(--wj-space-3); align-items: flex-start; max-width: calc(100% - var(--wj-space-3) * 2); pointer-events: none; } .wj-ws-route-overlay[hidden] { display: none; } .wj-ws-route-overlay .wj-route-stats-card, .wj-ws-route-overlay .wj-route-elevation-card { position: static; margin: 0; pointer-events: auto; } /* ── "Move home radius to here" button (bottom-centre of map) ───── */ .wj-ws-move-home-btn { position: absolute; left: 50%; bottom: var(--wj-space-3); transform: translateX(-50%); z-index: 1000; } .wj-ws-move-home-btn[hidden] { display: none; } /* Override .wj-btn-primary:hover's translateY, which would otherwise replace (rather than combine with) the translateX(-50%) centring transform. */ .wj-ws-move-home-btn:hover { transform: translateX(-50%) translateY(-2px); } /* ── Windows layer ────────────────────────────────────────────── */ .wj-ws-windows { position: absolute; inset: 0; z-index: 900; pointer-events: none; } .wj-ws-window { position: absolute; display: flex; flex-direction: column; min-width: 220px; min-height: 140px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--wj-radius-md); box-shadow: var(--wj-shadow-md); pointer-events: auto; overflow: hidden; } .wj-ws-window[hidden] { display: none; } .wj-ws-window.is-focused { border-color: var(--border-accent); } .wj-ws-window-titlebar { display: flex; align-items: center; justify-content: space-between; gap: var(--wj-space-2); padding: var(--wj-space-2) var(--wj-space-3); background: var(--bg-elevated); border-bottom: 1px solid var(--border); cursor: grab; touch-action: none; user-select: none; } body.wj-ws-dragging, body.wj-ws-dragging .wj-ws-window-titlebar { cursor: grabbing; } .wj-ws-window-title { font-size: var(--wj-text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wj-ws-window-controls { display: flex; gap: var(--wj-space-1); flex: 0 0 auto; } .wj-ws-window-btn { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--wj-radius-sm); background: var(--bg-card); color: var(--text-muted); font-size: var(--wj-text-xs); line-height: 1; cursor: pointer; } .wj-ws-window-btn:hover { color: var(--text-accent); border-color: var(--border-accent); } .wj-ws-window-body { /* Slightly tighter spacing/type scale than the rest of the site, so window content stays compact within the smaller panel sizes. */ --wj-space-1: 0.2rem; --wj-space-2: 0.4rem; --wj-space-3: 0.6rem; --wj-space-4: 0.85rem; --wj-space-5: 1.25rem; --wj-text-xs: 0.7rem; --wj-text-sm: 0.8rem; --wj-text-base: 0.9rem; --wj-text-lg: 1rem; flex: 1 1 auto; overflow: auto; padding: var(--wj-space-3); font-size: var(--wj-text-sm); } .wj-ws-window-body .wj-field { margin-bottom: var(--wj-space-2); } /* Apply the user's text-size preference to window content only, scaled to the window body's tighter base sizes above. */ [data-text-size="smallest"] .wj-ws-window-body { --wj-text-xs: 0.57rem; --wj-text-sm: 0.65rem; --wj-text-base: 0.73rem; --wj-text-lg: 0.81rem; } [data-text-size="smaller"] .wj-ws-window-body { --wj-text-xs: 0.66rem; --wj-text-sm: 0.75rem; --wj-text-base: 0.84rem; --wj-text-lg: 0.94rem; } [data-text-size="large"] .wj-ws-window-body { --wj-text-xs: 0.79rem; --wj-text-sm: 0.9rem; --wj-text-base: 1.01rem; --wj-text-lg: 1.125rem; } [data-text-size="larger"] .wj-ws-window-body { --wj-text-xs: 0.875rem; --wj-text-sm: 1rem; --wj-text-base: 1.125rem; --wj-text-lg: 1.25rem; } .wj-ws-window-resize { position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; cursor: nwse-resize; touch-action: none; } .wj-ws-window-resize::after { content: "\2196"; position: absolute; right: 2px; bottom: -2px; font-size: 16px; line-height: 1; color: var(--text-accent); } /* ── Dock (minimised windows) ────────────────────────────────── */ .wj-ws-dock { position: absolute; left: var(--wj-space-3); bottom: var(--wj-space-3); z-index: 1000; display: flex; flex-wrap: wrap; gap: var(--wj-space-2); pointer-events: none; } .wj-ws-dock-item { display: flex; align-items: center; gap: var(--wj-space-2); padding: var(--wj-space-1) var(--wj-space-2); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--wj-radius-pill); box-shadow: var(--wj-shadow-sm); pointer-events: auto; } .wj-ws-dock-title { font-size: var(--wj-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wj-ws-dock-restore, .wj-ws-dock-close { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--wj-radius-sm); background: var(--bg-elevated); color: var(--text-muted); font-size: 11px; line-height: 1; cursor: pointer; } .wj-ws-dock-restore:hover, .wj-ws-dock-close:hover { color: var(--text-accent); border-color: var(--border-accent); } /* ── Location window ──────────────────────────────────────────── */ .wj-loc-tabs { display: flex; gap: var(--wj-space-1); overflow-x: auto; margin: calc(var(--wj-space-3) * -1) calc(var(--wj-space-3) * -1) var(--wj-space-2); padding: var(--wj-space-2) var(--wj-space-3) 0; border-bottom: 1px solid var(--border); } .wj-loc-tab { display: flex; align-items: center; gap: var(--wj-space-1); max-width: 9rem; padding: var(--wj-space-1) var(--wj-space-2); border: 1px solid var(--border); border-bottom: none; border-radius: var(--wj-radius-sm) var(--wj-radius-sm) 0 0; background: var(--bg-card); color: var(--text-muted); font-size: var(--wj-text-xs); cursor: pointer; white-space: nowrap; flex: 0 0 auto; } .wj-loc-tab.is-active { color: var(--text-accent); border-color: var(--border-accent); background: var(--bg); } .wj-loc-tab-title { overflow: hidden; text-overflow: ellipsis; } .wj-loc-tab-close { flex: 0 0 auto; opacity: 0.6; } .wj-loc-tab-close:hover { opacity: 1; } .wj-loc-thumb { display: block; width: 100%; border-radius: var(--wj-radius-sm); margin: var(--wj-space-2) 0; } .wj-loc-stats { display: flex; flex-wrap: wrap; gap: var(--wj-space-2); margin-bottom: var(--wj-space-2); } .wj-loc-stats .wj-pill { padding: var(--wj-space-1) var(--wj-space-3); font-size: var(--wj-text-xs); } .wj-loc-actions { display: flex; flex-wrap: wrap; gap: var(--wj-space-2); margin-top: var(--wj-space-3); } .wj-ai-info { margin-top: var(--wj-space-2); padding: var(--wj-space-2) var(--wj-space-3); border: 1px solid var(--border-accent); border-radius: var(--wj-radius-sm); background: var(--bg-card); } .wj-ai-disclaimer { margin: 0 0 var(--wj-space-2); color: var(--text-accent); font-size: var(--wj-text-xs); } .wj-ai-info-row { margin: var(--wj-space-1) 0; font-size: var(--wj-text-xs); color: var(--text-muted); } /* ── Library/picker windows ───────────────────────────────────── */ .wj-select-sm { padding: var(--wj-space-1) var(--wj-space-2); font-size: var(--wj-text-xs); height: auto; } /* ── Active Trip panel ────────────────────────────────────────── */ .wj-active-trip-head { margin-bottom: var(--wj-space-3); } .wj-at-toolbar { display: flex; gap: var(--wj-space-2); flex-wrap: wrap; margin-bottom: var(--wj-space-3); } #wsAtRoutePicker, #wsAtHikePicker { margin-bottom: var(--wj-space-3); } .wj-active-trip .wj-day-timeline { gap: var(--wj-space-2); } .wj-active-trip .wj-route-list { gap: var(--wj-space-1); } .wj-active-trip .wj-route-item { padding: var(--wj-space-1) var(--wj-space-2); } .wj-at-day { background: var(--bg-inset); border: 1px solid var(--border); border-radius: var(--wj-radius-md); padding: var(--wj-space-3); } .wj-at-day.is-current { border-color: var(--border-accent); } .wj-at-day .wj-day-head { justify-content: space-between; margin-bottom: var(--wj-space-2); } .wj-at-day-head { display: flex; align-items: center; gap: var(--wj-space-2); background: transparent; border: none; padding: 0; cursor: pointer; text-align: left; color: inherit; font: inherit; } .wj-at-day-head h3 { margin: 0; font-size: var(--wj-text-sm); text-transform: uppercase; letter-spacing: 0.04em; } .wj-at-day-badge { font-size: var(--wj-text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-accent); border: 1px solid var(--border-accent); border-radius: var(--wj-radius-pill); padding: 1px 8px; white-space: nowrap; }