/* Find Your Food Forest — app styles * ============================================================================ * DESIGN TOKENS — the single source of truth for the visual system. * Brand: calm, competent land steward. Earthy but WCAG-AA accessible. * Legacy variables (--bg, --panel, --accent…) are aliased onto the tokens so * every pre-existing rule retheres automatically. A light theme only needs to * re-map the --ink/--surface families (print styles already prove the palette). * ==========================================================================*/ :root { /* -- color · surfaces (soft black neutrals — chrome recedes, imagery and brand * greens carry the identity; v0.8.5 shift from the green-tinted darks) -- */ /* v0.10 Studio v2: cool graphite neutrals — no green tint in the greys, no brown in the * chrome. Plants stay green on the drawing because they are plants. */ --surface-0: #141518; /* app background */ --surface-1: #1b1c20; /* panels, cards */ --surface-2: #232428; /* raised / hover */ --surface-3: #2c2d33; /* highest elevation */ --line-1: #34363d; /* hairline borders */ /* -- color · ink (text) -- */ --ink-900: #e6e9ee; /* headlines */ --ink-700: #cfd4dc; /* body */ --ink-500: #8a93a0; /* secondary */ --ink-300: #5f6774; /* disabled/hints */ /* -- color · accent (user-customisable: Settings › Appearance sets --accent-* on ) * default Cyanotype blue; the brand-* names are kept so every existing rule retheres -- */ --accent-base: #4c9be0; --brand-400: color-mix(in srgb, var(--accent-base) 78%, white); /* on dark text/icons */ --brand-500: var(--accent-base); /* primary accent */ --brand-600: color-mix(in srgb, var(--accent-base) 82%, black); /* buttons / active */ --brand-700: color-mix(in srgb, var(--accent-base) 64%, black); /* pressed */ --accent-dim: color-mix(in srgb, var(--accent-base) 16%, transparent); --accent-ink: #f2f7fc; --earth-400: #a8845a; /* loam / wood accents */ --earth-600: #6b4f2e; /* deep soil */ --straw-400: #d9b96a; /* highlights, annotations */ --water-500: #4a8fbf; /* water features / info */ --warn-500: #c9913f; /* advisories */ --danger-500:#d9634f; /* destructive */ --focus-ring: color-mix(in srgb, var(--accent-base) 70%, white); /* :focus-visible outline */ /* -- hero imagery (photo slots + always-on scrims so any photo stays legible) * landing.js swaps these to url(…) when the files exist; fallbacks are designed. */ --hero-img: none; --hero-scrim: linear-gradient(180deg, rgba(8,12,8,.32) 0%, rgba(8,12,8,.44) 55%, var(--surface-0) 100%); --hero-fallback: radial-gradient(120% 90% at 20% 0%, #2a3340 0%, #1c2230 42%, #141518 100%); --meadow-img: none; --meadow-scrim: linear-gradient(180deg, rgba(10,14,8,.22) 0%, rgba(10,14,8,.30) 60%, rgba(10,14,8,.42) 100%); --meadow-fallback: linear-gradient(180deg, #8a9a5e 0%, #5d7a40 45%, #3a5530 100%); /* closing-CTA photo slot (meadow) — landing.js fills it when the file exists */ --cta-img: none; --cta-scrim: linear-gradient(180deg, rgba(12,18,10,.38) 0%, rgba(12,18,10,.46) 100%); --cta-fallback: linear-gradient(180deg, #6f8a4e 0%, #46603a 100%); /* -- landing (v0.9.14 — warm cream, airy marketing surface; photography carries * the calm, chrome stays quiet) -- */ /* v0.10: soft light — off-white cards on a cool grey ground, never pure white */ --lp-bg: #eceef2; --lp-bg-2: #e2e5ea; --lp-ink: #2a303a; --lp-ink-soft: #525b68; --lp-line: #cfd4dc; --lp-band: #1f2632; /* deep band section */ --font-land: "Fraunces", "Source Serif 4", ui-serif, Georgia, serif; /* -- type: modern humanist pairing, chosen for long-session legibility. * Loaded from Google Fonts in index.html; the stacks below fall back to * system faces offline, so nothing ever blocks. -- */ --font-ui: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-display: "Source Serif 4", ui-serif, "New York", Georgia, serif; --text-xs: 12.5px; --text-sm: 13.5px; --text-base: 15px; --text-lg: 17px; --text-xl: 20px; --text-2xl: 25px; --text-3xl: 32px; /* -- space (4-base) · radius · elevation · motion -- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --glass: rgba(20,21,24,.92); /* translucent chrome over the map (hints, tooltips) */ --shadow-1: 0 1px 3px rgba(0,0,0,.3); --shadow-2: 0 4px 14px rgba(0,0,0,.35); --shadow-3: 0 10px 32px rgba(0,0,0,.45); --ease-out: cubic-bezier(.22,.61,.36,1); --dur-fast: 150ms; --dur-med: 250ms; /* -- legacy aliases (existing rules consume these) -- */ --bg: var(--surface-0); --panel: var(--surface-1); --panel-2: var(--surface-2); --border: var(--line-1); --text: var(--ink-700); --muted: var(--ink-500); --accent: var(--brand-500); --accent-dark: var(--brand-600); --danger: var(--danger-500); --radius: var(--r-md); font-size: var(--text-base); } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-med: 0ms; } * { animation: none !important; transition: none !important; } } :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--r-sm); } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; overflow: hidden; font-family: var(--font-ui); background: var(--bg); color: var(--text); } .hidden { display: none !important; } .muted { color: var(--muted); font-size: 0.85em; } .spacer { flex: 1; } .row { display: flex; gap: 8px; align-items: center; } .btn { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 14px; font-size: 0.95rem; cursor: pointer; transition: background .15s; } .btn:hover { background: var(--surface-3); } .btn:disabled { opacity: .4; cursor: default; } .btn-primary { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--accent-ink); } .btn-primary:hover { background: var(--accent); } .btn-lg { font-size: 1.1rem; padding: 12px 24px; } .btn-icon { padding: 8px 10px; } .btn-block { display: block; width: 100%; margin-bottom: 10px; text-align: left; } /* ---------- Screens ---------- */ .screen { position: fixed; inset: 0; } /* Database review screen (v0.9.60): a slim bar + the curator tool filling the rest */ #review-screen { z-index: 400; background: var(--bg); display: flex; flex-direction: column; } #review-screen.hidden { display: none !important; } #review-bar { height: 52px; flex: 0 0 52px; display: flex; align-items: center; gap: 10px; padding: 0 12px; background: var(--panel); border-bottom: 1px solid var(--border); } #review-bar .review-title { font-weight: 600; } #review-bar .review-hint { font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #review-frame { flex: 1 1 auto; width: 100%; border: 0; background: #fff; } @media (max-width: 720px) { #review-bar .review-hint { display: none; } } #home-screen { overflow-y: auto; background: var(--bg); } /* Home/CRM background tweak (◐ background in the footer): "light" swaps the green-dark * surfaces for white by remapping the token families — scoped to the home + client screens, * so the editor/map studio keeps its dark, high-contrast chrome (per design brief). */ html[data-home-theme="light"] #home-screen, html[data-home-theme="light"] #crm-screen { color: var(--text); /* re-apply — body's computed color is outside this scope */ /* v0.9.15 continuity PROTOTYPE: the light home/CRM inherits the landing's warm cream * palette + Fraunces display, so entering the studio feels like the same place */ --surface-0: var(--lp-bg); --surface-1: #f5f6f8; --surface-2: #e6e9ee; --surface-3: #dfe2e7; --line-1: var(--lp-line); --ink-900: #2a303a; --ink-700: #3a414d; --ink-500: #525b68; --ink-300: #8790a0; --glass: rgba(245,246,248,.94); --accent-ink: #f4f6f9; --brand-600: color-mix(in srgb, var(--accent-base) 70%, black); --brand-500: color-mix(in srgb, var(--accent-base) 84%, black); /* legacy aliases compute at :root, so they must be re-pointed here explicitly */ --bg: var(--lp-bg); --panel: #f5f6f8; --panel-2: #e6e9ee; --border: var(--lp-line); --text: #3a414d; --muted: #525b68; } /* the hero keeps its photo + dark scrim, so its text stays light in both themes; * its bottom fade lands on the cream so it blends into the page */ html[data-home-theme="light"] #home-screen .home-hero { --ink-900: #eef2ec; --ink-700: #d8e0d6; --ink-500: #9aa89a; --hero-scrim: linear-gradient(180deg, rgba(8,12,8,.32) 0%, rgba(8,12,8,.46) 55%, #f7f6f0 100%); } /* ---------- Workspace shell nav (v0.10): Projects · Clients · Plant library ---------- */ .appnav { height: 54px; display: flex; align-items: center; gap: 6px; padding: 0 22px; background: var(--surface-0); border-bottom: 1px solid var(--line-1); position: sticky; top: 0; z-index: 5; } .appnav-wm { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--ink-900); margin-right: 16px; display: flex; align-items: center; gap: 9px; white-space: nowrap; } .appnav-wm i { width: 22px; height: 22px; border-radius: 6px; background: var(--brand-600); display: block; } .appnav-link { height: 32px; padding: 0 11px; border-radius: 6px; border: 0; background: transparent; font: inherit; font-weight: 600; font-size: 13.5px; color: var(--ink-500); cursor: pointer; } .appnav-link:hover { background: var(--surface-2); color: var(--ink-900); } .appnav-link.on { background: var(--surface-3); color: var(--ink-900); } .appnav .btn { height: 32px; padding: 6px 12px; } @media (max-width: 720px) { .appnav { padding: 0 12px; gap: 4px; } .appnav-wm { font-size: 15px; margin-right: 6px; } .appnav .btn:not(.btn-primary) { display: none; } } .eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-500); margin: 0 0 2px; } .home-sub { margin: 2px 0 0; max-width: 60ch; } /* ---------- Home: hero (retired in v0.10; rules kept for the About/landing page) ---------- */ .home-hero { background-image: var(--hero-scrim), var(--hero-img), var(--hero-fallback); background-size: cover, cover, cover; background-position: center, center 88%, center; /* keep text over the darker forest floor, not the sun gap */ border-bottom: 1px solid var(--line-1); } .home-hero-inner { max-width: 1040px; margin: 0 auto; padding: var(--sp-10) var(--sp-6) var(--sp-8); } .wordmark { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-6); } .wordmark-mark { width: 56px; height: 56px; flex: none; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); } .wordmark h1 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-3xl); letter-spacing: .2px; color: var(--ink-900); text-shadow: 0 1px 12px rgba(8,12,8,.7); } .tagline { color: var(--ink-900); margin: var(--sp-1) 0 0; font-size: var(--text-lg); max-width: 46ch; text-shadow: 0 1px 10px rgba(8,12,8,.75); } .home-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; } .home-inner { max-width: 1180px; margin: 0 auto; padding: var(--sp-6) var(--sp-6) var(--sp-10); } .home-section-title { font-family: var(--font-display); font-weight: 600; font-size: 28px; color: var(--ink-900); margin: 0; } .home-projects-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; } .home-projects-head input[type=search] { width: min(240px, 45%); padding: 8px 12px; border-radius: var(--r-md); border: 1px solid var(--line-1); background: var(--surface-1); color: var(--ink-700); } .home-version { text-align: center; margin-top: var(--sp-8); font-size: var(--text-xs); } /* how-it-works strip */ .home-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-top: var(--sp-8); } .home-step { background: var(--surface-1); border: 1px solid var(--line-1); border-radius: var(--r-lg); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--text-sm); color: var(--ink-500); box-shadow: var(--shadow-1); } .home-step b { color: var(--ink-900); font-size: var(--text-base); font-family: var(--font-display); } .step-n { width: 24px; height: 24px; border-radius: 50%; background: var(--brand-600); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--text-xs); margin-bottom: var(--sp-1); } @media (max-width: 640px) { .home-steps { grid-template-columns: 1fr; } } /* empty state */ .home-empty { text-align: center; padding: var(--sp-10) var(--sp-6); background: var(--surface-1); border: 1px dashed var(--line-1); border-radius: var(--r-xl); } .home-empty-art { font-size: 44px; margin-bottom: var(--sp-2); } .home-empty h3 { font-family: var(--font-display); font-size: var(--text-xl); color: var(--ink-900); margin: 0 0 var(--sp-2); } .home-empty p { max-width: 52ch; margin: 0 auto var(--sp-5); line-height: 1.5; } .project-list { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .project-list > p, .project-list > .home-empty { grid-column: 1 / -1; } .project-card { background: var(--surface-1); border: 1px solid var(--line-1); border-radius: var(--r-md); padding: 0 0 12px; cursor: pointer; display: grid; grid-template-columns: 1fr auto auto auto; grid-template-areas: "art art art art" "info dup bk del"; align-items: center; gap: 0 2px; overflow: hidden; } .project-card:hover { border-color: var(--brand-500); box-shadow: var(--shadow-2); } .project-card .pc-art { grid-area: art; aspect-ratio: 16 / 7; background: var(--surface-2); display: flex; align-items: center; justify-content: center; margin-bottom: 10px; } .project-card .pc-info { grid-area: info; padding: 0 14px; min-width: 0; } .project-card .pc-name { font-weight: 600; font-family: var(--font-display); font-size: 15.5px; color: var(--ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .project-card .pc-meta { font-size: 11.5px; color: var(--ink-300); margin-top: 6px; } .project-card .pc-meta b { color: var(--ink-500); font-weight: 600; } .project-card .pc-del { color: var(--muted); background: none; border: none; cursor: pointer; font-size: 1rem; padding: 6px; } .project-card .pc-del:hover { color: var(--danger); } /* ---------- Modals ---------- */ .modal { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 300; } .modal-card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 24px; width: min(480px, 92vw); max-height: 88vh; overflow-y: auto; } .modal-card h2 { margin-top: 0; } .modal-card label { display: block; margin-bottom: 14px; font-size: 0.9rem; color: var(--muted); } .modal-card input[type=text], .modal-card input[type=search], .modal-card select { display: block; width: 100%; margin-top: 5px; padding: 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 1rem; } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; } .np-result { background: var(--panel-2); border-radius: 8px; padding: 10px 14px; margin-top: 12px; font-size: .9rem; } /* ---------- Editor chrome ---------- */ #topbar { /* v0.9.62: above the tool rail (100), drawers (110) and the first-run card (130) so an open * menu is never drawn underneath them; modals (300) still cover it. */ position: absolute; top: 0; left: 0; right: 0; height: 52px; z-index: 140; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: var(--panel); border-bottom: 1px solid var(--border); } .project-title { font-weight: 600; margin-left: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30vw; } /* v0.9.68: labelled Undo / Redo beside the title, with a note naming the next undo */ .undo-group { display: flex; align-items: center; gap: 4px; margin-left: 6px; padding-left: 10px; border-left: 1px solid var(--border); } .undo-group .btn { padding: 6px 10px; font-size: .9rem; white-space: nowrap; } .undo-group .btn:disabled { opacity: .35; } .undo-glyph { font-size: 1.05em; line-height: 1; } .undo-note { font-size: .78rem; margin-left: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22vw; } @media (max-width: 1100px) { .undo-note { display: none; } } /* v0.9.68: point-editing mode control in the inspector */ .editmode { display: flex; border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; margin: 6px 0 4px; } .editmode button { flex: 1; background: var(--panel); color: var(--text); border: 0; padding: 6px 8px; font-size: .82rem; cursor: pointer; } .editmode button + button { border-left: 1px solid var(--border); } .editmode button.active { background: var(--accent-dark); color: var(--accent-ink); } .editmode-hint { font-size: .78rem; color: var(--muted); margin: 0 0 6px; line-height: 1.35; } #toolrail { position: absolute; left: 10px; top: 96px; z-index: 100; max-height: calc(100vh - 130px); overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 0; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 4px 4px 6px; } #toolrail .rail-g { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 3px 0 4px; } #toolrail .rail-g + .rail-g { border-top: 1px solid var(--border); } #toolrail .rail-gl { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-300); font-weight: 700; padding: 3px 0 2px; user-select: none; } #toolrail .tool { width: 36px; height: 36px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--ink-700); font-size: 1rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } #toolrail .tool:hover { background: var(--panel-2); color: var(--ink-900); } #toolrail .tool.active { background: var(--accent-dim); border-color: var(--accent); color: var(--brand-400); } @media (pointer: coarse) { #toolrail .tool { width: 44px; height: 44px; } } .rail-sep { height: 1px; background: var(--border); margin: 4px 2px; } #map { position: absolute; top: 86px; bottom: 24px; left: 0; right: 300px; } #map.full { right: 0; } /* ---------- Status bar (v0.10) ---------- */ #statusbar { position: absolute; left: 0; right: 0; bottom: 0; height: 24px; z-index: 95; display: flex; align-items: center; gap: 14px; padding: 0 12px; background: var(--surface-1); border-top: 1px solid var(--border); font-size: 11.5px; color: var(--ink-500); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; } #statusbar #st-sheet { color: var(--ink-700); font-weight: 600; } #statusbar .st-mono { font-variant-numeric: tabular-nums; } #statusbar #st-terrain.ok, #statusbar #st-catalog.ok { color: var(--brand-400); } #statusbar span:empty { display: none; } /* v0.11 cloud pill (nav + status bar) */ #statusbar #st-cloud { cursor: pointer; } #statusbar #st-cloud.ok { color: var(--brand-400); } #statusbar #st-cloud.warn { color: var(--danger); } .cloud-pill { position: relative; padding-left: 22px !important; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cloud-pill::before { content: ""; position: absolute; left: 9px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--ink-500); } .cloud-pill[data-state="synced"]::before { background: var(--brand-400); } .cloud-pill[data-state="pending"]::before, .cloud-pill[data-state="syncing"]::before { background: #e0b34c; } .cloud-pill[data-state="error"]::before, .cloud-pill[data-state="offline"]::before { background: var(--danger); } .ac-deleted { margin-top: 12px; display: grid; gap: 6px; } .ac-delrow { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--line-1); border-radius: 6px; } .ac-delrow > span:first-child { flex: 1; font-weight: 600; } @media (max-width: 720px) { #statusbar #st-coords, #statusbar #st-offline { display: none; } } /* ---------- Sheets strip (v0.9.69) ---------- */ #sheetstrip { position: absolute; top: 52px; left: 0; right: 0; height: 34px; z-index: 135; display: flex; align-items: stretch; gap: 0; padding: 0 10px 0 0; background: var(--surface-0); border-bottom: 1px solid var(--border); } #sheetstrip .lbl { display: flex; align-items: center; padding: 0 12px 0 14px; font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-500); border-right: 1px solid var(--border); } #sheetstrip .tabs { display: flex; align-items: stretch; overflow-x: auto; scrollbar-width: none; } #sheetstrip .stab { display: flex; align-items: center; gap: 7px; padding: 0 12px; border: 0; border-right: 1px solid var(--border); background: transparent; color: var(--ink-500); font: inherit; font-size: 13px; white-space: nowrap; position: relative; cursor: pointer; } #sheetstrip .stab .tp { width: 7px; height: 7px; border-radius: 2px; background: var(--ink-300); flex: none; } #sheetstrip .stab.sec .tp { border-radius: 50%; } #sheetstrip .stab .sc { color: var(--ink-300); font-size: 11px; font-variant-numeric: tabular-nums; } #sheetstrip .stab:hover { background: var(--surface-1); color: var(--ink-900); } #sheetstrip .stab.on { color: var(--ink-900); background: var(--surface-1); } #sheetstrip .stab.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); } #sheetstrip .stab.on .tp { background: var(--accent); } #sheetstrip .stab.working .tt { opacity: .7; font-style: italic; } #sheetstrip .add { display: flex; align-items: center; gap: 6px; padding: 0 12px; border: 0; background: transparent; color: var(--ink-500); font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; } #sheetstrip .add:hover { color: var(--ink-900); } #sheetstrip .set { display: flex; align-items: center; color: var(--ink-500); font-size: 12px; white-space: nowrap; padding: 0 6px; } @media (max-width: 900px) { #sheetstrip .lbl, #sheetstrip .set { display: none; } } /* ---------- Side panel tabs (v0.10): Layers · Sheet · Selection ---------- */ .side-tabs { display: flex; height: 36px; border-bottom: 1px solid var(--border); margin: -12px -12px 8px; padding: 0 4px; position: sticky; top: -12px; background: var(--panel); z-index: 2; } .side-tab { flex: 1; background: none; border: 0; color: var(--ink-500); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; position: relative; } .side-tab:hover { color: var(--ink-900); } .side-tab.on { color: var(--ink-900); } .side-tab.on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--accent); } #sidebar[data-pane="layers"] #sheet-panel, #sidebar[data-pane="layers"] #inspector, #sidebar[data-pane="sheet"] #layers-panel, #sidebar[data-pane="sheet"] #inspector, #sidebar[data-pane="selection"] #layers-panel, #sidebar[data-pane="selection"] #sheet-panel { display: none; } /* Generate docks to the right of the map instead of covering it (v0.10) */ .modal.docked { background: transparent; pointer-events: none; justify-content: flex-end; align-items: stretch; } .modal.docked .modal-card { pointer-events: auto; border-radius: 0; border-width: 0 0 0 1px; max-height: none; height: calc(100vh - 110px); overflow-y: auto; margin: 86px 0 24px; width: min(420px, 92vw); box-shadow: -12px 0 32px rgba(0,0,0,.35); } /* Appearance */ .ap-presets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0 4px; } .ap-preset { display: inline-flex; align-items: center; gap: 6px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: 4px 10px 4px 6px; font: inherit; font-size: .85rem; cursor: pointer; } .ap-preset i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; } .ap-preset.on { border-color: var(--accent); background: var(--accent-dim); } .ap-custom { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--muted); } .ap-custom input { width: 34px; height: 26px; padding: 0; border: 1px solid var(--border); background: none; } /* per-sheet layer buttons */ .layer-eye.sheet-tg { display: inline-flex; align-items: center; justify-content: center; } .layer-eye.sheet-tg.off { opacity: .38; } .layer-eye.sheet-tg.locked { color: var(--warn-500); } /* This sheet panel */ #sheet-panel-body .sheet-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .85rem; color: var(--muted); margin: 4px 0; } #sheet-panel-body .sheet-row input[type="text"], #sheet-panel-body .sheet-row select { flex: 1; min-width: 0; max-width: 62%; } /* New sheet dialog */ .newsheet-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 8px; } .newsheet-types .type { text-align: left; border: 1px solid var(--border); border-radius: 9px; background: var(--panel-2); color: var(--text); padding: 10px; cursor: pointer; font: inherit; } .newsheet-types .type b { display: block; font-size: .92rem; margin-bottom: 2px; } .newsheet-types .type span { font-size: .78rem; color: var(--muted); line-height: 1.35; } .newsheet-types .type.on { border-color: var(--accent); background: var(--accent-dim); } .newsheet-layers { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; margin-top: 6px; } .newsheet-layers .layer-swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; } @media (max-width: 640px) { .newsheet-types, .newsheet-layers { grid-template-columns: 1fr; } } /* layers × sheets print matrix (export modal) */ .exp-matrix-wrap { width: 100%; margin: 4px 0; font-size: .85rem; } .exp-matrix-wrap summary { cursor: pointer; color: var(--muted); } .sheet-matrix { border-collapse: collapse; width: 100%; margin-top: 6px; font-size: .8rem; } .sheet-matrix th, .sheet-matrix td { border-bottom: 1px solid var(--border); padding: 4px 6px; text-align: left; white-space: nowrap; } .sheet-matrix th.sh { text-align: center; font-weight: 600; max-width: 110px; overflow: hidden; text-overflow: ellipsis; } .sheet-matrix td.ln i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 7px; vertical-align: -1px; } .sheet-matrix td.c { text-align: center; } .sheet-matrix .mt { width: 20px; height: 20px; border-radius: 5px; border: 1.5px solid var(--border); background: transparent; color: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .sheet-matrix .mt.on { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--accent-ink); } .draw-hint { position: absolute; bottom: 48px; left: 50%; transform: translateX(-50%); z-index: 120; background: var(--glass); border: 1px solid var(--border); border-radius: 20px; padding: 8px 18px; font-size: .9rem; pointer-events: none; } /* Canopy-view legend (v0.8.3): role colour key, floats over the map's lower-left. * v0.9.37: INTERACTIVE (pointer-events:none made the close/rename buttons dead to real * clicks), DRAGGABLE (grab the title to park it anywhere; position persists), and * stacked UNDER the side panels/drawers so open menus always win. */ .canopy-legend { position: absolute; bottom: 48px; left: 64px; z-index: 60; background: var(--glass); border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 12px; font-size: var(--text-xs); color: var(--ink-700); display: flex; flex-direction: column; gap: 3px; pointer-events: auto; max-height: 46vh; overflow-y: auto; user-select: none; } .canopy-legend .cl-title { cursor: grab; } .canopy-legend.dragging .cl-title { cursor: grabbing; } .canopy-legend .cl-row { display: flex; align-items: center; gap: 7px; } .canopy-legend .cl-swatch { width: 12px; height: 12px; border-radius: 50%; flex: none; border: 1px solid rgba(255, 255, 255, .55); } /* hollow swatch = clamped-to-minimum marker (not to scale at this zoom) */ .canopy-legend .cl-swatch-clamp { background: none; border: 2px solid var(--brand-400); } .canopy-legend .cl-clamp { color: var(--warn-500); } /* ---------- First-run guidance card ---------- */ .first-run { position: absolute; top: 110px; left: 50%; transform: translateX(-50%); z-index: 130; width: min(440px, calc(100vw - 340px)); background: var(--surface-1); border: 1px solid var(--line-1); border-radius: var(--r-lg); padding: var(--sp-5) var(--sp-5) var(--sp-4); box-shadow: var(--shadow-3); } .first-run h3 { margin: 0 0 var(--sp-2); font-family: var(--font-display); font-size: var(--text-xl); color: var(--ink-900); } .first-run p { margin: 0 0 var(--sp-3); line-height: 1.5; font-size: var(--text-sm); color: var(--ink-700); } .first-run .fr-hint { color: var(--ink-500); font-size: var(--text-xs); margin: var(--sp-3) 0 0; } .fr-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; } .fr-close { position: absolute; top: 8px; right: 8px; background: none; border: none; color: var(--ink-500); cursor: pointer; font-size: var(--text-base); padding: 6px; } .fr-close:hover { color: var(--ink-900); } @media (max-width: 700px) { .first-run { width: min(440px, calc(100vw - 32px)); } } /* ---------- Sidebar ---------- */ #sidebar { position: absolute; top: 86px; right: 0; bottom: 24px; width: 300px; z-index: 90; background: var(--panel); border-left: 1px solid var(--border); overflow-y: auto; padding: 12px; } .panel { margin-bottom: 18px; } .panel h3 { margin: 4px 0 10px; font-size: 0.95rem; } #layer-list { list-style: none; margin: 0; padding: 0; } #layer-list li { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; cursor: pointer; font-size: 0.9rem; } #layer-list li:hover { background: var(--panel-2); } #layer-list li.active { background: var(--panel-2); outline: 1px solid var(--accent-dark); } .layer-swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; } .layer-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .layer-eye { background: none; border: none; cursor: pointer; font-size: 0.95rem; opacity: .9; color: var(--text); display: inline-flex; align-items: center; } .layer-eye.off { opacity: .3; } /* Layer visibility switch (v0.8.5) — replaces the eye emoji with a proper toggle */ .layer-switch { flex: none; width: 28px; height: 16px; border-radius: 999px; cursor: pointer; background: var(--brand-600); border: 1px solid var(--line-1); padding: 0; position: relative; transition: background var(--dur-fast) var(--ease-out); } .layer-switch::after { content: ""; position: absolute; top: 1.5px; left: 13px; width: 11px; height: 11px; border-radius: 50%; background: #fff; transition: left var(--dur-fast) var(--ease-out); } .layer-switch.off { background: var(--surface-3); } .layer-switch.off::after { left: 2px; } .layer-switch:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; } /* project-card art chip (replaces the map emoji) */ .project-card .pc-art { color: var(--brand-500); display: flex; align-items: center; } /* per-zone controls (layers panel, v0.8.9) */ .zone-panel { display: block !important; padding: 4px 4px 6px 22px; background: var(--surface-2); border-radius: var(--r-sm); cursor: default; } .zone-panel .zone-bulk { display: flex; gap: 10px; align-items: center; font-size: var(--text-xs); margin: 2px 0 4px; } .zone-panel .zone-row { display: flex; gap: 7px; align-items: center; padding: 3px 0; } .zone-panel .zone-color { width: 20px; height: 20px; padding: 0; border: none; background: none; cursor: pointer; flex: none; } .zone-panel .zone-label { flex: 1 1 90px; min-width: 60px; background: var(--surface-1); color: var(--ink-700); border: 1px solid var(--line-1); border-radius: var(--r-sm); font-size: var(--text-xs); padding: 3px 6px; } .zone-panel .layer-opacity { width: 64px; flex: none; } /* editable teaching-point rows (AI Studio, v0.9.5) */ .ai-pt-row { display: flex; align-items: center; gap: 7px; padding: 3px 0; border-bottom: 1px solid var(--line-1); } .ai-pt-row select { flex: 1; } /* plant-artwork manager rows (Section modal, v0.8.5) */ .art-row { display: flex; align-items: center; gap: var(--sp-2); padding: 5px 0; border-bottom: 1px solid var(--line-1); flex-wrap: wrap; } .art-row .art-thumb { width: 34px; height: 34px; border-radius: var(--r-sm); flex: none; overflow: hidden; background: #fff; border: 1px solid var(--line-1); display: flex; align-items: center; justify-content: center; } .art-row .art-thumb.empty { background: var(--surface-2); } .art-row .art-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; } .art-row .art-name { flex: 1 1 160px; font-size: var(--text-sm); } .art-row .btn { padding: 3px 10px; font-size: var(--text-xs); } .layer-opacity { width: 44px; flex: none; } /* v0.10: the opacity slider shows on the active (drawing-into) row only, so names have room */ #layer-list li:not(.active) > .layer-opacity { display: none; } #inspector-body label { display: block; margin: 8px 0; font-size: .85rem; color: var(--muted); } #inspector-body input[type=text], #inspector-body textarea, #inspector-body select { width: 100%; margin-top: 4px; padding: 7px; border-radius: 7px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: .9rem; } #inspector-body textarea { resize: vertical; min-height: 56px; } .insp-meta { font-size: .82rem; color: var(--muted); margin: 6px 0; } .insp-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } /* ---------- Plant drawer ---------- */ #plant-drawer { position: absolute; top: 86px; left: 62px; bottom: 34px; width: 340px; z-index: 110; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; } .drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 4px; } .drawer-head h3 { margin: 0; } .drawer-tabs { display: flex; gap: 4px; padding: 8px 12px; } .dtab { flex: 1; padding: 7px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; } .dtab.active { background: var(--accent-dark); border-color: var(--accent-dark); } .drawer-filters { padding: 4px 12px 8px; } .drawer-filters input[type=search] { width: 100%; padding: 9px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); margin-bottom: 8px; } .filter-row { display: flex; gap: 6px; } .filter-row select { flex: 1; padding: 6px; border-radius: 7px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: .82rem; min-width: 0; } .drawer-list { flex: 1; overflow-y: auto; padding: 4px 10px 12px; } .db-item { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; background: var(--panel-2); } .db-item:hover { border-color: var(--accent-dark); } .db-item .db-name { font-weight: 600; font-size: .92rem; } .db-item .db-bot { font-style: italic; color: var(--muted); font-size: .8rem; } .db-item .db-tags { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 4px; } .tag { font-size: .7rem; padding: 2px 7px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); color: var(--muted); } .tag.role { border-color: var(--accent-dark); color: var(--accent); } .place-banner { padding: 10px 14px; background: var(--accent-dark); font-size: .88rem; text-align: center; } /* ---------- AI Training Studio (v0.8) ---------- */ #ai-panel { position: absolute; top: 86px; left: 62px; bottom: 34px; width: 360px; z-index: 110; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; } .ai-pane { flex: 1; overflow-y: auto; padding-bottom: 12px; } .ai-learn { padding: 6px 14px 2px; font-size: var(--text-xs); align-items: flex-start; } .ai-learn input { margin-top: 2px; } .ai-item .ai-name { flex: 1; padding: 5px 8px; border-radius: var(--r-sm); font-size: var(--text-sm); border: 1px solid transparent; background: transparent; color: var(--ink-900); } .ai-item .ai-name:hover, .ai-item .ai-name:focus { border-color: var(--line-1); background: var(--bg); } .ai-item .ai-cat { flex: 1; min-width: 0; padding: 5px; border-radius: var(--r-sm); font-size: var(--text-xs); border: 1px solid var(--border); background: var(--bg); color: var(--text); } .ai-section { padding: 12px 14px 4px; border-bottom: 1px solid var(--line-1); } .ai-section h4 { margin: 0 0 6px; font-size: var(--text-sm); color: var(--ink-900); } .ai-sample-row { display: flex; align-items: center; gap: var(--sp-2); padding: 3px 0; font-size: var(--text-xs); } .ai-sample-k { width: 108px; color: var(--ink-500); } .ai-sample-bar { flex: 1; height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; } .ai-sample-fill { display: block; height: 100%; background: var(--brand-600); border-radius: 4px; } .ai-sample-n { width: 32px; text-align: right; color: var(--ink-700); } .ai-sample-row .act-btn { color: var(--ink-500); background: none; border: none; cursor: pointer; } .ai-sample-row .act-btn:hover { color: var(--danger-500); } .ai-knob { display: block; margin: 10px 0; font-size: var(--text-xs); color: var(--ink-500); } .ai-knob input[type=range] { display: block; width: 100%; margin: 4px 0 2px; accent-color: var(--brand-600); } @media (max-width: 700px) { #ai-panel { left: 12px; right: 12px; width: auto; } } /* ---------- Plant source ---------- */ .pstab { flex: 1; padding: 7px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; font-size: .82rem; } .pstab.active { background: var(--accent-dark); border-color: var(--accent-dark); } .ps-pane { margin-top: 10px; } .ps-pane .filter-row input { flex: 1; padding: 8px; border-radius: 7px; border: 1px solid var(--border); background: var(--bg); color: var(--text); min-width: 0; } /* ---------- Check design ---------- */ .check-item { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; } .check-head { display: flex; align-items: center; gap: 8px; } .check-name { font-weight: 600; } .tox-badge { font-size: .68rem; padding: 2px 7px; border-radius: 10px; font-weight: 700; letter-spacing: .3px; } .tox-unverified { background: #5a4a14; color: #f5e6b8; } /* ---- Design-screen conventions: compass rose, ratio scale, map key (v0.9.31) ---- */ .compass-rose { cursor: pointer; margin: 0 10px 10px 0; filter: drop-shadow(0 1px 3px rgba(0,0,0,.4)); } .ratio-scale { background: rgba(20,28,24,.78); color: #e6efe8; font-size: .68rem; padding: 2px 8px; border-radius: 6px; margin-left: 8px; } .cl-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 700; font-size: .72rem; margin-bottom: 4px; } .cl-hide { background: none; border: none; color: inherit; cursor: pointer; font-size: .7rem; opacity: .7; padding: 0 2px; } .cl-hide:hover { opacity: 1; } .cl-chip { background: rgba(20,28,24,.78); color: #e6efe8; border: 1px solid rgba(255,255,255,.25); border-radius: 12px; font-size: .7rem; padding: 3px 10px; cursor: pointer; } .cl-rowbtn { background: none; border: none; color: inherit; cursor: pointer; font-size: .62rem; opacity: 0; padding: 0 2px; } .cl-row:hover .cl-rowbtn { opacity: .75; } .cl-rowbtn:hover { opacity: 1 !important; } .layer-swatch-input { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; padding: 0; border: 1px solid rgba(255,255,255,.35); border-radius: 4px; background: none; cursor: pointer; } .db-edit { float: right; opacity: .55; padding: 1px 5px; } .db-item:hover .db-edit { opacity: 1; } .layer-swatch-input::-webkit-color-swatch-wrapper { padding: 0; } .layer-swatch-input::-webkit-color-swatch { border: none; border-radius: 3px; } /* ---- Customer management hub + full profile (js/crmhub.js) ---- */ .crm-stale { background: #4a3a14; color: #f5e6b8; padding: 8px 12px; border-radius: 8px; margin-bottom: 10px; font-size: .82rem; } .crm-strip { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; } .crm-chip { display: inline-block; font-size: .72rem; padding: 3px 9px; border-radius: 12px; background: var(--accent-dim); border: 1px solid transparent; color: inherit; cursor: default; margin: 1px 2px; } button.crm-chip { cursor: pointer; } .crm-chip.on { border-color: var(--accent); } .crm-chip.stage-lead { background: rgba(150,150,150,.18); } .crm-chip.stage-intake_received { background: rgba(107,150,181,.2); } .crm-chip.stage-profile_ready { background: rgba(160,140,90,.22); } .crm-chip.stage-design_in_progress { background: color-mix(in srgb, var(--accent-base) 24%, transparent); } .crm-chip.stage-complete { background: color-mix(in srgb, var(--accent-base) 38%, transparent); } .crm-toolbar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .crm-toolbar input[type="search"] { flex: 1; min-width: 180px; } .crm-tablewrap { overflow-x: auto; } .crm-table { width: 100%; border-collapse: collapse; font-size: .85rem; } .crm-table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .4px; opacity: .7; padding: 6px 8px; border-bottom: 1px solid var(--border, #3a4340); } .crm-table td { padding: 8px; border-bottom: 1px solid rgba(255,255,255,.06); vertical-align: top; } .crm-table tbody tr { cursor: pointer; } .crm-table tbody tr:hover { background: color-mix(in srgb, var(--accent-base) 7%, transparent); } .crm-status-sel { font-size: .78rem; padding: 3px 6px; max-width: 130px; } .crm-actions { display: flex; gap: 4px; flex-wrap: wrap; } .crm-kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 8px; } .crm-kcol { background: rgba(255,255,255,.03); border: 1px solid var(--border, #3a4340); border-radius: 10px; padding: 8px; min-height: 120px; } .crm-kcol.over { border-color: var(--accent); } .crm-khead { font-weight: 600; font-size: .78rem; margin-bottom: 8px; } .crm-kcard { background: rgba(255,255,255,.05); border: 1px solid var(--border, #3a4340); border-radius: 8px; padding: 8px; margin-bottom: 8px; cursor: grab; } .crm-sec { border: 1px solid var(--border, #3a4340); border-radius: 8px; margin: 8px 0; padding: 0 10px; } .crm-sec summary { cursor: pointer; padding: 9px 0; font-weight: 600; font-size: .85rem; } .crm-sec-body { padding: 2px 0 10px; } .crm-frow { display: grid; grid-template-columns: 200px 1fr; gap: 10px; padding: 4px 0; font-size: .84rem; border-top: 1px solid rgba(255,255,255,.05); } .crm-flabel { opacity: .72; } .crm-thumbs { display: flex; flex-wrap: wrap; gap: 6px; } .crm-thumbs img { width: 86px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border, #3a4340); } @media (max-width: 700px) { .crm-frow { grid-template-columns: 1fr; } } /* ---- v0.13 client card (js/crmcard.js): pipeline chips by position, provenance badges, timeline, company mode ---- */ .crm-chip.empty { opacity: .55; } .crm-chip.stage-k0 { background: rgba(150,150,150,.16); } .crm-chip.stage-k1 { background: color-mix(in srgb, var(--accent-base) 10%, transparent); } .crm-chip.stage-k2 { background: color-mix(in srgb, var(--accent-base) 14%, transparent); } .crm-chip.stage-k3 { background: color-mix(in srgb, var(--accent-base) 18%, transparent); } .crm-chip.stage-k4 { background: color-mix(in srgb, var(--accent-base) 22%, transparent); } .crm-chip.stage-k5 { background: color-mix(in srgb, var(--accent-base) 26%, transparent); } .crm-chip.stage-k6 { background: color-mix(in srgb, var(--accent-base) 30%, transparent); } .crm-chip.stage-k7 { background: color-mix(in srgb, var(--accent-base) 34%, transparent); } .crm-chip.stage-k8 { background: color-mix(in srgb, var(--accent-base) 38%, transparent); } .crm-chip.stage-k9 { background: color-mix(in srgb, var(--accent-base) 44%, transparent); } .crm-chip.stage-k10, .crm-chip.stage-kx { background: rgba(150,150,150,.28); } .crm-badge { display: inline-block; font-size: .66rem; line-height: 1.4; padding: 1px 7px; border-radius: 10px; border: 1px solid var(--line-1, rgba(255,255,255,.14)); color: var(--muted); vertical-align: middle; white-space: nowrap; } .crm-badge.studio { border-color: var(--accent); color: var(--accent); } .crm-answers h4 { font-family: var(--font-display); font-weight: 600; font-size: .95rem; } .crm-notes-text { white-space: pre-wrap; font: inherit; margin: 0 0 4px; font-size: .84rem; } .crm-timeline { display: flex; flex-direction: column; gap: 2px; } .crm-ev { display: grid; grid-template-columns: 150px 110px 1fr; gap: 10px; font-size: .82rem; padding: 4px 0; border-top: 1px solid rgba(255,255,255,.05); } .crm-ev-when { color: var(--muted); white-space: nowrap; } .crm-ev-who { color: var(--accent); } @media (max-width: 700px) { .crm-ev { grid-template-columns: 1fr; gap: 0; } } .crm-cq { max-height: 60vh; overflow-y: auto; padding-right: 4px; } .crm-cq-banner { background: color-mix(in srgb, var(--accent-base) 16%, transparent); border: 1px solid var(--accent); border-radius: var(--r-md, 8px); padding: 8px 12px; font-size: .84rem; margin-bottom: 10px; } .crm-cq-sect { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 12px 0 2px; } .crm-cq-q { margin: 8px 0; } .crm-cq-l { display: block; font-size: .84rem; margin-bottom: 4px; color: var(--ink-700, inherit); } .crm-cq-q input[type=text], .crm-cq-q input[type=date], .crm-cq-q input[type=number], .crm-cq-q select, .crm-cq-q textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 6px 8px; border-radius: var(--r-md, 8px); border: 1px solid var(--line-1, rgba(255,255,255,.14)); background: var(--surface-1, transparent); color: inherit; } .crm-cq-checks { display: flex; flex-wrap: wrap; gap: 4px 14px; } .crm-cq-check { display: flex; align-items: center; gap: 6px; font-size: .84rem; } .crm-cq-addr { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 6px; } .crm-cq-addr label { font-size: .74rem; color: var(--muted); } @media (max-width: 700px) { .crm-cq-addr { grid-template-columns: 1fr 1fr; } } .crm-cq-rank { margin: 0; padding-left: 22px; } .crm-cq-rank li { display: flex; align-items: center; gap: 6px; padding: 2px 0; font-size: .84rem; } .crm-cq-rank li span { flex: 1; } .modal-card .crm-cq-rank .btn { padding: 1px 7px; font-size: .78rem; } /* ---- Plant Library (js/plantlib.js) ---- */ .plib-modalcard { max-width: min(1180px, 96vw); width: 96vw; height: 92vh; display: flex; flex-direction: column; overflow: hidden; padding: 14px 16px; } .plib-root { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; } .plib-head { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border, #3a4340); } .plib-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 250px 1fr; gap: 0; } .plib-side { padding: 12px 14px 12px 2px; border-right: 1px solid var(--border, #3a4340); overflow-y: auto; } .plib-side h4 { margin: 12px 0 6px; font-size: .8rem; } .plib-main { overflow-y: auto; padding: 12px; } .plib-chips { display: flex; flex-wrap: wrap; gap: 5px; } .plib-chip { padding: 4px 10px; border-radius: 14px; border: 1px solid var(--border, #3a4340); background: transparent; color: inherit; cursor: pointer; font-size: .76rem; } .plib-chip.on { background: var(--accent); color: #10211a; border-color: var(--accent); } .plib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; } .plib-card { border: 1px solid var(--border, #3a4340); border-radius: 10px; overflow: hidden; cursor: pointer; background: rgba(255,255,255,.03); } .plib-card:hover, .plib-card:focus-visible { border-color: var(--accent); outline: none; } .plib-thumb { height: 96px; background: color-mix(in srgb, var(--accent-base) 12%, transparent); } .plib-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .plib-badges { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; } .plib-badge { font-size: .66rem; padding: 2px 6px; border-radius: 6px; background: color-mix(in srgb, var(--accent-base) 18%, transparent); } .plib-badge.nfix { background: rgba(107,150,181,.25); } .plib-badge.ed { background: rgba(181,160,107,.25); } .plib-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.35); display: flex; justify-content: flex-end; z-index: 5; } .plib-drawer { width: min(440px, 95%); height: 100%; overflow-y: auto; padding: 16px; background: var(--panel, #1d2724); border-left: 1px solid var(--border, #3a4340); } .plib-facts { list-style: none; padding: 0; font-size: .85rem; margin: 10px 0; } .plib-facts li { margin: 2px 0; } .plib-tox { padding: 9px 11px; border-radius: 8px; margin: 8px 0; font-size: .82rem; } .plib-tox.warn { background: #4a2620; color: #ffd2c8; } .plib-tox.unknown { background: #3a3426; color: #e8dfc0; } .plib-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; } .plib-guildhead { font-weight: 600; color: var(--accent); margin-top: 10px; font-size: .84rem; } .plib-guildrow { display: flex; align-items: center; gap: 6px; font-size: .84rem; padding: 2px 0; } .plib-sources { font-size: .76rem; background: rgba(255,255,255,.04); padding: 10px; border-radius: 8px; margin-bottom: 12px; } @media (max-width: 760px) { .plib-body { grid-template-columns: 1fr; } .plib-side { border-right: none; border-bottom: 1px solid var(--border, #3a4340); max-height: 38vh; } .plib-drawer { width: 100%; } } .tox-mild { background: #4a5a1e; color: #eaf5c0; } .tox-moderate { background: #6b4a1e; color: #ffe0b8; } .tox-severe { background: #6e2626; color: #ffd2d2; } .check-alts { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .alt-btn { padding: 5px 10px; font-size: .82rem; } /* ---------- Footprint (resource ledger) ---------- */ .fp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); } .fp-grid > :last-child { grid-column: 1 / -1; } .fp-stat { background: var(--surface-2); border: 1px solid var(--line-1); border-radius: var(--r-md); padding: var(--sp-3); } .fp-val { font-family: var(--font-display); font-size: var(--text-lg); color: var(--ink-900); } .fp-label { font-size: var(--text-xs); color: var(--ink-500); margin-top: 2px; } .fp-route { display: flex; justify-content: space-between; gap: var(--sp-2); padding: 5px 0; border-bottom: 1px solid var(--line-1); font-size: var(--text-sm); } .fp-route:last-child { border-bottom: none; } .fp-route-name { color: var(--ink-700); } /* ---------- Toast (advisories) ---------- */ .toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px); max-width: 560px; z-index: 400; padding: 12px 18px; border-radius: 10px; font-size: .9rem; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; box-shadow: 0 6px 24px rgba(0,0,0,.4); } .toast.show { opacity: 1; transform: translate(-50%, 0); } .toast.warn { background: #6b4a1e; border: 1px solid #b8863f; color: #ffe8c4; } .toast.ok { background: #2e4a2a; border: 1px solid var(--accent-dark); color: #dff0d6; } /* ---------- Generate ---------- */ .goal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; margin: 6px 0 14px; } .chk { display: flex; align-items: center; gap: 7px; font-size: .88rem; color: var(--text); cursor: pointer; } .chk input { accent-color: var(--accent-dark); } #gen-ai-details label { margin-top: 8px; } /* ---------- Export modal: sheet picker ---------- */ .exp-views { display: grid; gap: var(--sp-1); margin: 0 0 var(--sp-4); background: var(--surface-2); border: 1px solid var(--line-1); border-radius: var(--r-md); padding: var(--sp-3); } .exp-views > .muted { margin-bottom: var(--sp-1); } #exp-savecrm:disabled { opacity: .45; } /* ---------- Import ---------- */ .dropzone { border: 2px dashed var(--border); border-radius: 12px; text-align: center; padding: 28px 16px; cursor: pointer; margin-bottom: 14px; } .dropzone.dragover { border-color: var(--accent); background: var(--panel-2); } .import-log { font-size: .85rem; max-height: 140px; overflow-y: auto; } .import-log div { padding: 3px 0; } .import-log .ok { color: var(--accent); } .import-log .err { color: var(--danger); } /* ---------- Print layout ---------- */ @media print { body > *:not(#print-root) { display: none !important; } #print-root { display: block !important; position: static; } html, body { overflow: visible; background: #fff; color: #111; height: auto; } @page { size: 17in 11in landscape; margin: 0.4in; } } #print-root { background: #fff; color: #111; font-family: Georgia, serif; } /* v0.9.67: sheets are designed for 17×11 landscape. Safari ignores @page size and prints * on the paper chosen in its dialog (usually letter portrait), which used to crop every * sheet at the right edge and spill blank pages. In print, media queries see the PAGE box, * so a smaller paper zooms the whole sheet down uniformly — map, scale bar and text keep * their relation, and the scale statement still reads "at full-size print (17×11in)". */ .print-sheet { width: 15.9in; min-height: 10in; padding: .3in; page-break-after: always; break-after: page; position: relative; } @media print and (max-width: 9.5in) { #print-root .print-sheet { zoom: 0.47; } } /* letter / A4 portrait */ @media print and (min-width: 9.5in) and (max-width: 12.5in) { #print-root .print-sheet { zoom: 0.63; } } /* letter / A4 landscape, legal */ @media print and (min-width: 12.5in) and (max-width: 15.5in) { #print-root .print-sheet { zoom: 0.84; } } /* legal landscape */ .print-head { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 3px solid #2e5230; padding-bottom: 8px; margin-bottom: 14px; } .print-head h1 { margin: 0; font-size: 22pt; color: #2e5230; } .print-head .ph-meta { text-align: right; font-size: 9.5pt; color: #444; } .print-map-wrap { display: flex; gap: .25in; } .print-map-wrap img { width: 11in; border: 1px solid #999; } .print-legend { flex: 1; font-size: 9pt; } .print-legend h3 { font-size: 11pt; margin: 0 0 6px; color: #2e5230; } .legend-item { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; } .legend-swatch { width: 14px; height: 14px; border: 1px solid #777; flex: none; } .print-foot { display: flex; justify-content: space-between; margin-top: 12px; font-size: 9pt; color: #444; align-items: center; } .north-arrow { font-size: 20pt; } .print-table { width: 100%; border-collapse: collapse; font-size: 9pt; margin-top: 10px; } .print-table th, .print-table td { border: 1px solid #999; padding: 4px 8px; text-align: left; } .print-table th { background: #e5eee5; } /* ---------- Responsive / iPad ---------- */ @media (max-width: 900px) { #sidebar { width: 260px; } #map { right: 260px; } } @media (max-width: 700px) { #sidebar { display: none; } #map { right: 0; } } /* ---------- Activity strip (v0.7 item 2 — non-modal progress over the map) ---------- */ #activity-dock { position: fixed; bottom: 84px; left: calc((100vw - 300px) / 2); transform: translateX(-50%); z-index: 250; display: flex; flex-direction: column; gap: var(--sp-2); width: min(430px, calc(100vw - 380px)); pointer-events: none; } @media (max-width: 700px) { #activity-dock { left: 50vw; width: min(430px, calc(100vw - 24px)); } } .act-task { pointer-events: auto; background: var(--surface-1); border: 1px solid var(--line-1); border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: var(--sp-2) var(--sp-3); font-size: var(--text-sm); transition: opacity var(--dur-med) var(--ease-out); } .act-task.act-fading { opacity: .88; } .act-task.act-error { border-color: var(--danger-500); } .act-head { display: flex; align-items: center; gap: var(--sp-2); } .act-head b { color: var(--ink-900); white-space: nowrap; } .act-step { color: var(--ink-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .act-spin { width: 13px; height: 13px; flex: none; border-radius: 50%; border: 2px solid var(--line-1); border-top-color: var(--brand-500); animation: act-rot 0.9s linear infinite; } @keyframes act-rot { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .act-spin { animation: none; border-top-color: var(--straw-400); } } .act-ok { color: var(--brand-400); font-weight: 700; } .act-err { color: var(--danger-500); font-weight: 700; } .act-btn { background: none; border: none; color: var(--ink-500); cursor: pointer; font-size: var(--text-xs); padding: 2px 6px; border-radius: var(--r-sm); } .act-btn:hover { color: var(--ink-900); background: var(--surface-2); } .act-log { margin-top: var(--sp-2); max-height: 130px; overflow-y: auto; border-top: 1px solid var(--line-1); padding-top: var(--sp-2); font-size: var(--text-xs); color: var(--ink-500); } .act-log .ok { color: var(--accent); } .act-log .err { color: var(--danger); } /* "why?" edit-feedback card (optional, in the activity dock) */ .fb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--sp-2) 0; } .fb-chip { background: var(--surface-2); color: var(--ink-700); border: 1px solid var(--line-1); border-radius: 20px; padding: 4px 11px; font-size: var(--text-xs); cursor: pointer; } .fb-chip:hover { background: var(--brand-700); border-color: var(--brand-600); color: #fff; } .fb-note { width: 100%; padding: 6px 9px; border-radius: var(--r-sm); font-size: var(--text-xs); border: 1px solid var(--line-1); background: var(--surface-0); color: var(--ink-700); } /* ---------- Landing page (v0.9.14 — calm, airy, photography-led. Rhythm: quiet nav / full-bleed forest hero / four values / numbered journey / forest band with aerial photo / meadow closing CTA. Generous vertical air (--lp-pad), warm cream surfaces, Fraunces display for warmth. ---------- */ #landing-screen { overflow-y: auto; background: var(--lp-bg); color: var(--lp-ink); font-family: var(--font-ui); --lp-pad: clamp(56px, 9vw, 112px); /* one knob controls how much the page breathes */ } .lp-nav { position: sticky; top: 0; z-index: 20; background: rgba(247,246,240,.88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--lp-line); } .lp-nav-inner { max-width: 1120px; margin: 0 auto; padding: 12px var(--sp-6); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); } .lp-brand { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-land); font-weight: 500; font-size: var(--text-lg); color: var(--lp-ink); letter-spacing: .2px; } .lp-mark { width: 32px; height: 32px; flex: none; } .lp-links { display: flex; align-items: center; gap: var(--sp-6); } .lp-links a, .lp-linkbtn { color: var(--lp-ink-soft); text-decoration: none; font-size: var(--text-sm); font-weight: 600; background: none; border: none; cursor: pointer; padding: 6px 2px; font-family: var(--font-ui); letter-spacing: .2px; } .lp-links a:hover, .lp-linkbtn:hover { color: var(--brand-700); } .lp-links .btn { border-radius: 999px; padding: 9px 20px; white-space: nowrap; } @media (max-width: 700px) { .lp-links a, .lp-linkbtn { display: none; } .lp-links .btn { padding: 8px 16px; font-size: var(--text-sm); } } /* landing buttons: soft pills — invitation, not alarm */ .lp-btn-primary { background: var(--brand-600); border: 1px solid var(--brand-600); color: #f7faf3; border-radius: 999px; padding: 14px 34px; font-size: var(--text-lg); font-weight: 600; letter-spacing: .2px; box-shadow: 0 6px 22px rgba(20,40,16,.28); transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast), box-shadow var(--dur-fast); } .lp-btn-primary:hover { background: var(--brand-500); transform: translateY(-1px); box-shadow: 0 10px 28px rgba(20,40,16,.32); } .lp-btn-ghost { display: inline-flex; align-items: center; border-radius: 999px; padding: 13px 26px; border: 1px solid rgba(247,250,243,.55); color: #f2f6ea; text-decoration: none; font-size: var(--text-base); font-weight: 600; letter-spacing: .2px; background: rgba(14,22,12,.18); backdrop-filter: blur(2px); transition: background var(--dur-fast), border-color var(--dur-fast); } .lp-btn-ghost:hover { background: rgba(14,22,12,.34); border-color: rgba(247,250,243,.8); } .lp-hero { min-height: min(88vh, 860px); display: flex; align-items: center; justify-content: center; text-align: center; background-image: var(--meadow-scrim), var(--meadow-img), var(--meadow-fallback); background-size: cover, cover, cover; background-position: center 62%; } .lp-hero-inner { max-width: 780px; padding: var(--lp-pad) var(--sp-6); } .lp-eyebrow { color: #e9efdd; font-size: var(--text-xs); font-weight: 600; letter-spacing: 3.2px; text-transform: uppercase; margin: 0 0 var(--sp-5); text-shadow: 0 1px 8px rgba(10,18,8,.45); } .lp-headline { font-family: var(--font-land); font-weight: 500; color: #fbfcf6; font-size: clamp(38px, 6vw, 64px); line-height: 1.08; letter-spacing: -0.5px; margin: 0 0 var(--sp-5); text-wrap: balance; text-shadow: 0 2px 16px rgba(10,18,8,.45); } .lp-sub { color: #edf1e2; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.75; max-width: 52ch; margin: 0 auto var(--sp-8); text-wrap: pretty; text-shadow: 0 1px 10px rgba(10,18,8,.45); } .lp-cta { display: flex; justify-content: center; align-items: center; gap: var(--sp-4); flex-wrap: wrap; } .lp-trust { color: #dde5cd; font-size: var(--text-xs); margin-top: var(--sp-6); letter-spacing: .6px; text-shadow: 0 1px 6px rgba(10,18,8,.45); } .lp-h2 { font-family: var(--font-land); font-weight: 500; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.15; letter-spacing: -0.3px; margin: 0 0 var(--sp-4); text-wrap: balance; } .lp-lede { color: var(--lp-ink-soft); font-size: var(--text-lg); line-height: 1.75; max-width: 58ch; margin: 0 auto; text-wrap: pretty; } .lp-values { border-bottom: 1px solid var(--lp-line); } .lp-values-grid { max-width: 1120px; margin: 0 auto; padding: var(--lp-pad) var(--sp-6); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-8) var(--sp-8); } .lp-v { text-align: center; } .lp-vicon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; color: var(--brand-700); background: var(--lp-bg-2); border: 1px solid var(--lp-line); } .lp-vicon svg { width: 24px; height: 24px; } .lp-v h3 { font-family: var(--font-land); font-weight: 500; font-size: var(--text-xl); margin: var(--sp-4) 0 var(--sp-2); color: var(--lp-ink); } .lp-v p { margin: 0 auto; color: var(--lp-ink-soft); font-size: var(--text-sm); line-height: 1.7; text-wrap: pretty; max-width: 30ch; } @media (max-width: 860px) { .lp-values-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .lp-values-grid { grid-template-columns: 1fr; } } /* the journey: six quiet numbered steps on white — a path, not a feature wall */ .lp-tiles-wrap { background: #fdfdfa; border-top: 1px solid var(--lp-line); border-bottom: 1px solid var(--lp-line); } .lp-tiles { max-width: 1120px; margin: 0 auto; padding: var(--lp-pad) var(--sp-6); text-align: center; } .lp-tiles .lp-lede { margin-bottom: calc(var(--sp-10) + var(--sp-4)); } .lp-tgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8) var(--sp-10); text-align: left; } .lp-tile { border-top: 1px solid var(--lp-line); padding-top: var(--sp-5); } .lp-step { font-family: var(--font-land); font-size: var(--text-sm); font-weight: 600; color: var(--brand-600); letter-spacing: 2px; } .lp-tile h3 { font-family: var(--font-land); font-weight: 500; font-size: var(--text-xl); color: var(--lp-ink); margin: var(--sp-2) 0 var(--sp-2); } .lp-tile p { margin: 0; color: var(--lp-ink-soft); font-size: var(--text-sm); line-height: 1.7; text-wrap: pretty; } @media (max-width: 860px) { .lp-tgrid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .lp-tgrid { grid-template-columns: 1fr; } } .lp-band { background: var(--lp-band); color: #eef3e4; } .lp-band-grid { max-width: 1120px; margin: 0 auto; padding: var(--lp-pad) var(--sp-6); display: grid; grid-template-columns: 1.05fr 1fr; gap: calc(var(--sp-10) + var(--sp-4)); align-items: center; } .lp-band .lp-h2 { color: #f6f8ee; margin-bottom: var(--sp-5); } .lp-who-item { display: flex; flex-direction: column; gap: 4px; padding: var(--sp-5) 0; border-top: 1px solid rgba(238,243,228,.16); } .lp-who-item b { font-family: var(--font-land); font-weight: 500; font-size: var(--text-lg); color: #f6f8ee; } .lp-who-item span { color: #ccdab8; font-size: var(--text-sm); line-height: 1.7; } .lp-band-photo { margin: 0; } .lp-band-photo img { width: 100%; display: block; border-radius: var(--r-xl); box-shadow: 0 18px 48px rgba(0,0,0,.4); } @media (max-width: 780px) { .lp-band-grid { grid-template-columns: 1fr; } } /* testimonial strip (PROTOTYPE content — sample voices, clearly labelled in-page) */ .lp-quotes { background: var(--lp-bg); border-top: 1px solid var(--lp-line); } .lp-quotes-inner { max-width: 1120px; margin: 0 auto; padding: var(--lp-pad) var(--sp-6); text-align: center; } .lp-sample-note { font-size: var(--text-xs); letter-spacing: .4px; text-transform: uppercase; color: var(--warn-500); margin-bottom: calc(var(--sp-10) + var(--sp-2)); } .lp-qgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); text-align: left; } .lp-quote { margin: 0; background: #fdfdfa; border: 1px solid var(--lp-line); border-radius: var(--r-xl); padding: var(--sp-6); box-shadow: 0 2px 10px rgba(34,51,31,.05); } .lp-quote blockquote { margin: 0 0 var(--sp-5); font-family: var(--font-land); font-style: italic; font-weight: 400; font-size: var(--text-lg); line-height: 1.6; color: var(--lp-ink); text-wrap: pretty; } .lp-quote figcaption { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--lp-line); padding-top: var(--sp-4); } .lp-quote figcaption b { font-size: var(--text-sm); color: var(--lp-ink); } .lp-quote figcaption span { font-size: var(--text-xs); color: var(--lp-ink-soft); } @media (max-width: 860px) { .lp-qgrid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } } /* closing CTA over the meadow — end the walk outdoors */ .lp-cta-band { text-align: center; background-image: var(--cta-scrim), var(--cta-img), var(--cta-fallback); background-size: cover, cover, cover; background-position: center 40%; } .lp-cta-inner { padding: calc(var(--lp-pad) + var(--sp-6)) var(--sp-6); } .lp-cta-band .lp-h2 { color: #fbfcf6; max-width: 20ch; margin: 0 auto var(--sp-6); text-shadow: 0 2px 14px rgba(10,18,8,.5); } .lp-cta-band .lp-trust { color: #e2e8d2; } /* soft waitlist capture (PROTOTYPE — local-only, honest about it) */ .lp-wait { max-width: 460px; margin: calc(var(--sp-10) + var(--sp-2)) auto 0; } .lp-wait-label { display: block; color: #e6ecd7; font-size: var(--text-sm); margin-bottom: var(--sp-3); text-shadow: 0 1px 8px rgba(10,18,8,.45); } .lp-wait-row { display: flex; gap: var(--sp-2); } .lp-wait-row input { flex: 1; min-width: 0; border-radius: 999px; border: 1px solid rgba(247,250,243,.45); background: rgba(12,18,10,.32); color: #f4f7ec; padding: 12px 20px; font-size: var(--text-base); backdrop-filter: blur(3px); } .lp-wait-row input::placeholder { color: rgba(230,236,215,.55); } .lp-wait-row input:focus { outline: 2px solid var(--focus-ring); border-color: transparent; } .lp-wait-btn { border-radius: 999px; padding: 12px 22px; background: rgba(247,250,243,.14); border: 1px solid rgba(247,250,243,.5); color: #f4f7ec; font-weight: 600; white-space: nowrap; } .lp-wait-btn:hover { background: rgba(247,250,243,.24); } .lp-wait-note { color: #cfd9bd; font-size: var(--text-xs); margin: var(--sp-3) 0 0; text-shadow: 0 1px 6px rgba(10,18,8,.45); } @media (max-width: 480px) { .lp-wait-row { flex-direction: column; } } /* gentle motion (PROTOTYPE) — everything inside no-preference, so reduced-motion users * get a perfectly still page with all content visible (the global kill-switch alone * would freeze opacity-0 reveals as blank space) */ @media (prefers-reduced-motion: no-preference) { .lp-hero { animation: lp-drift 46s ease-in-out infinite alternate; } @keyframes lp-drift { from { background-position: center 66%, center 66%, center; } to { background-position: center 54%, center 54%, center; } } .lp-reveal, .lp-v, .lp-tile, .lp-who-item, .lp-band-photo { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); } .lp-in { opacity: 1 !important; transform: none !important; } } /* ---------- Designer dashboard / CRM (v0.7 items 7–8) ---------- */ #crm-screen { overflow-y: auto; background: var(--bg); } .crm-inner { max-width: 1040px; margin: 0 auto; padding: var(--sp-6); } .crm-title { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--ink-900); margin: 0; } .crm-panel { background: var(--surface-1); border: 1px solid var(--line-1); border-radius: var(--r-lg); padding: var(--sp-5); margin-top: var(--sp-4); } .crm-panel h2 { margin-top: 0; font-family: var(--font-display); } .crm-panel label { display: block; margin-bottom: 12px; font-size: .9rem; color: var(--muted); } .crm-panel input[type=text], .crm-panel select { display: block; width: 100%; margin-top: 5px; padding: 9px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); } #crm-search { padding: 9px 12px; border-radius: var(--r-md); border: 1px solid var(--line-1); background: var(--surface-1); color: var(--ink-700); } #crm-status-filter { padding: 9px; border-radius: var(--r-md); border: 1px solid var(--line-1); background: var(--surface-1); color: var(--ink-700); } .crm-card { cursor: pointer; } .crm-empty { text-align: center; padding: var(--sp-8) var(--sp-5); background: var(--surface-1); border: 1px dashed var(--line-1); border-radius: var(--r-xl); } .crm-empty h3 { font-family: var(--font-display); color: var(--ink-900); margin: 0 0 var(--sp-2); } .crm-grid { display: grid; grid-template-columns: minmax(150px, auto) 1fr; gap: 6px 16px; font-size: var(--text-sm); } .crm-k { color: var(--ink-500); } .crm-v { color: var(--ink-700); } .linklike { background: none; border: none; color: var(--accent); cursor: pointer; font-size: inherit; padding: 0; text-decoration: underline; } /* MapLibre tweaks */ .maplibregl-ctrl-bottom-left { bottom: 6px; left: 66px; } /* v0.12: clear of the tool rail — the scale readout was hidden behind it */ .map-tooltip { background: var(--glass); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: .8rem; max-width: 240px; } .maplibregl-popup-content { background: var(--panel); color: var(--text); border-radius: 10px; } .maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--panel); } /* ---------- Touch drafting (v0.9.45) ---------- */ /* ✓ Finish — the shape-closing control that exists on every input device. Desktop keeps * double-click; touch has neither double-click-to-finish nor right-click, so this button * is the only universal path. Sized to the 44px minimum tap target. */ .draw-finish { position: absolute; left: 50%; bottom: 74px; transform: translateX(-50%); z-index: 30; min-height: 44px; padding: 10px 22px; font: 600 15px/1 var(--font-ui, ui-sans-serif, system-ui, sans-serif); color: #fff; background: var(--accent-dark); border: none; border-radius: 22px; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.3); touch-action: manipulation; } .draw-finish.hidden { display: none; } .draw-finish:active { transform: translateX(-50%) scale(.96); } /* inline label editor — replaces prompt(), which several PWA webviews block outright */ .draw-text-editor { position: absolute; z-index: 31; transform: translate(-8px, -110%); display: flex; gap: 6px; align-items: flex-start; background: #fff; border: 1px solid var(--line, #d9d6cc); border-radius: 8px; padding: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.25); } .draw-text-editor textarea { font: 14px/1.4 inherit; min-width: 160px; max-width: 260px; border: 1px solid var(--line, #d9d6cc); border-radius: 5px; padding: 6px 8px; resize: none; } .draw-text-editor .btn { min-height: 36px; } /* coarse pointers: reach the 44px Apple/Android minimum everywhere that matters. * The toolrail is already 44px; buttons, selects and inputs in the inspector were not. */ @media (pointer: coarse) { .btn { min-height: 44px; } .inspector select, .inspector input[type="number"], .inspector input[type="text"] { min-height: 40px; font-size: 16px; /* 16px stops iOS Safari auto-zooming the page on focus */ } .layer-eye, .btn-icon { min-width: 44px; min-height: 44px; } .draw-finish { bottom: 86px; } /* clear of the home-indicator swipe zone */ } /* kill the 300ms double-tap-to-zoom delay on every control — double-tap zoom on a button * is never what a designer wants, and the delay makes the whole app feel sluggish */ button, .btn, .tool, select, input, .layer-row { touch-action: manipulation; } /* ---- shade / growth / wind view panel (v0.9.49) ---- */ .view-panel { position: absolute; bottom: 48px; right: 16px; z-index: 60; background: var(--glass); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; font-size: var(--text-xs); color: var(--ink-700); display: flex; flex-direction: column; gap: 6px; width: 250px; pointer-events: auto; } .view-panel .vp-row { display: flex; gap: 10px; align-items: flex-end; } .view-panel label { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-xs); flex: 1; } .view-panel label.chk { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 5px; } .view-panel input[type="range"] { width: 100%; margin: 0; } .view-panel select { font-size: var(--text-xs); } .view-panel .vp-note { font-size: .68rem; opacity: .8; } @media (pointer: coarse) { .view-panel { width: 280px; } .view-panel input[type="range"] { height: 28px; } } /* ---- topbar dropdown menus (v0.9.50) ---- */ .menu { position: relative; } .menu-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 210; display: flex; flex-direction: column; gap: 4px; min-width: 220px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: 6px; box-shadow: 0 10px 28px rgba(0, 0, 0, .38); } .menu-pop .btn { display: block; width: 100%; text-align: left; white-space: nowrap; } #topbar > .btn, #topbar .menu-btn { white-space: nowrap; } @media (max-width: 960px) { /* narrow windows: tighter bar so Generate / Export never fall off the edge */ #topbar { gap: 4px; padding: 0 8px; } #topbar > .btn, #topbar .menu-btn { padding: 8px 9px; font-size: .9rem; } #topbar .project-title { max-width: 18vw; } } /* pressed state for view toggles — visible in the menu AND summarised on the menu button */ #topbar .btn.active, .menu-pop .btn.active { background: var(--accent-dark); border-color: var(--accent); } @media (pointer: coarse) { .menu-pop { min-width: 260px; } } /* v0.9.62: labelled sections inside a menu, the lidar-terrain switch, its style picker * (segmented control) and the opacity row. Section labels are small caps in the muted ink so * the buttons stay the loudest thing in the list. */ .menu-pop { gap: 3px; padding: 6px 6px 8px; } .menu-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 9px 8px 3px; font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); user-select: none; white-space: nowrap; } .menu-pop > .menu-head:first-child { padding-top: 3px; } .menu-head .menu-hint { font-weight: 400; letter-spacing: 0; text-transform: none; opacity: .85; white-space: nowrap; } .menu-pop .btn.menu-switch { display: flex; align-items: center; gap: 10px; } #topbar .btn.menu-switch.active { background: var(--panel-2); border-color: var(--border); } .switch-track { flex: none; position: relative; width: 34px; height: 18px; border-radius: 9px; background: var(--border); transition: background .15s; } .switch-knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--text); opacity: .75; box-shadow: 0 1px 2px rgba(0, 0, 0, .35); transition: left .15s, opacity .15s; } .menu-switch.active .switch-track { background: var(--accent); } .menu-switch.active .switch-knob { left: 18px; opacity: 1; background: #fff; } .menu-seg { display: flex; margin: 1px 2px 2px; border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; } .menu-seg .seg { flex: 1; padding: 6px 6px; font-size: .8rem; white-space: nowrap; cursor: pointer; background: var(--panel-2); color: var(--text); border: 0; border-right: 1px solid var(--border); transition: background .15s; } .menu-seg .seg:last-child { border-right: 0; } .menu-seg .seg:hover { background: var(--surface-3); } .menu-seg .seg.armed { box-shadow: inset 0 -2px 0 var(--accent); } /* the style that will draw once switched on */ .menu-seg .seg.active { background: var(--accent-dark); color: #fff; } .menu-pop .menu-row { display: flex; align-items: center; gap: 8px; padding: 2px 8px 4px; font-size: .82rem; color: var(--muted); } .menu-pop .menu-row input[type="range"] { flex: 1; min-width: 0; } .menu-pop .menu-row.is-off { opacity: .45; } .menu-status { padding: 0 8px 4px; font-size: .74rem; line-height: 1.3; color: var(--muted); white-space: normal; max-width: 260px; } .menu-status.is-loading::before { content: "⏳ "; } .menu-status.is-ready { color: var(--accent); } .menu-status.is-error { color: #e0a06a; } @media (pointer: coarse) { .menu-seg .seg { padding: 9px 6px; } .switch-track { width: 40px; height: 22px; } .switch-knob { width: 18px; height: 18px; } .menu-switch.active .switch-knob { left: 20px; } } /* ---- magic wand confirm chip (v0.9.52) ---- */ .wand-chip { position: absolute; z-index: 220; transform: translateX(-50%); background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, .4); max-width: 260px; } .wand-chip select { font-size: var(--text-xs); } #tool-wand.active { background: var(--accent-dark); border-color: var(--accent); } /* ---------- Map key v0.9.63: sections, reference text, editable swatches, customise panel ---------- */ .canopy-legend .cl-title { display: flex; align-items: center; gap: 4px; } .canopy-legend .cl-title-text { flex: 1; font-weight: 600; } .canopy-legend .cl-sec { font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-500); margin: 5px 0 1px; } .canopy-legend .cl-note { font-size: .6rem; color: var(--ink-500); margin: 1px 0 3px; } .canopy-legend .cl-ref { color: var(--ink-500); font-size: .66rem; } .canopy-legend .cl-sw-square { border-radius: 2px; } .canopy-legend .cl-sw-gradient { border-radius: 2px; width: 22px; } .canopy-legend .cl-sw-hollow { border-width: 2px; } .canopy-legend .cl-sw-line { height: 2px; width: 18px; border-radius: 0; border: none; } .canopy-legend .cl-sw-edit { cursor: pointer; } .canopy-legend .cl-sw-edit:hover { transform: scale(1.25); box-shadow: 0 0 0 2px rgba(255,255,255,.35); } .canopy-legend .cl-color { position: absolute; width: 0; height: 0; opacity: 0; border: 0; padding: 0; pointer-events: none; } .canopy-legend .cl-gear { font-size: .8rem; } #modal-key .kp-top { display: flex; gap: 18px; align-items: end; flex-wrap: wrap; margin-bottom: 6px; } #modal-key .kp-top label { margin-bottom: 8px; } #modal-key .kp-top .chk, #modal-key .kp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } #modal-key .kp-head { font-weight: 600; color: var(--text); font-size: .9rem; flex-wrap: wrap; } #modal-key .kp-head .muted { font-weight: 400; } #modal-key .kp-sec { border-top: 1px solid var(--line-1); padding: 8px 0 4px; } #modal-key .kp-sec.is-off .kp-row { opacity: .45; } #modal-key .kp-group { font-size: .7rem; color: var(--ink-500); text-transform: uppercase; letter-spacing: .05em; margin: 6px 0 2px 26px; } #modal-key .kp-row { display: grid; grid-template-columns: 18px 26px minmax(110px, 1fr) minmax(130px, 1.3fr) auto; gap: 6px; align-items: center; margin: 3px 0; } #modal-key .kp-row.is-off input[type=text] { opacity: .55; } #modal-key .kp-row input[type=text] { width: 100%; box-sizing: border-box; font-size: .82rem; padding: 3px 6px; margin: 0; } #modal-key .kp-row input[type=color] { width: 24px; height: 22px; padding: 0; border: 1px solid var(--line-1); border-radius: 4px; background: none; cursor: pointer; } #modal-key .kp-sw { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line-1); display: inline-block; justify-self: center; } #modal-key .kp-sw-square { border-radius: 3px; } #modal-key .kp-sw-gradient { border-radius: 3px; width: 24px; } #modal-key .kp-sw-hollow { background: none !important; border-width: 2px; } #modal-key .kp-sw-line { height: 2px; width: 20px; border-radius: 0; border: none; } #modal-key .kp-tail { display: flex; gap: 4px; align-items: center; min-width: 28px; } #modal-key .kp-del { padding: 2px 7px; font-size: .75rem; } #modal-key .kp-empty { margin: 4px 0 0 26px; } /* ---------- Section sheet v0.9.64 ---------- */ #section-body svg { width: 100%; height: auto; display: block; } .section-ctl .chk select, .section-ctl .chk input[type=text] { margin-left: 4px; } .section-ctl .btn { padding: 4px 10px; font-size: .84rem; } /* ---------- Buildings + existing plants v0.9.65 ---------- */ /* v0.9.66 — section sheet editor + inspector symbol row */ .section-sched { display: grid; grid-template-columns: 30px minmax(150px, 1fr) 130px 70px 70px 34px 34px 34px; gap: 4px 6px; align-items: center; font-size: .84rem; max-height: 240px; overflow-y: auto; padding: 4px 2px; } .section-sched .ss-head { color: var(--text-2, #9aa79e); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; } .section-sched .ss-tag { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; align-items: center; justify-content: center; font-size: .7rem; font-weight: 600; background: #2e6b2e; color: #fff; } .section-sched .ss-tag.existing { background: #fff; color: #5f7a5f; border: 1px solid #5f7a5f; } .section-sched .ss-tag.custom { background: transparent; color: var(--text-2, #9aa79e); border: 1px dashed var(--line-1); } .section-sched input[type=text], .section-sched input[type=number], .section-sched select { width: 100%; box-sizing: border-box; padding: 3px 5px; font-size: .82rem; } .section-sched .btn.mini { padding: 2px 6px; font-size: .78rem; line-height: 1.2; min-width: 0; } .section-sched .ss-hidden input[type=text] { opacity: .55; text-decoration: line-through; } .insp-symbol { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; } .insp-symbol select, .insp-symbol input[type=number] { font-size: .82rem; padding: 3px 5px; } .insp-species { max-height: 160px; overflow-y: auto; border: 1px solid var(--line-1); border-radius: 6px; margin: -8px 0 10px; } .insp-species:empty { display: none; } .insp-species .db-item:hover { background: var(--surface-2, rgba(255,255,255,.06)); } .insp-row input[type=number] { margin: 0; } /* ---- v0.12 phasing ---- */ .phasing-types { grid-template-columns: repeat(3, 1fr); } .phasing-table { margin-top: 4px; } .phasing-table td { white-space: normal; } .phasing-table td.ln { white-space: nowrap; font-weight: 600; } .modal-card .phasing-table input[type=text] { width: 100%; min-width: 120px; margin: 0; padding: 4px 6px; font-size: .82rem; } .phasing-table tr.total td { font-weight: 600; border-top: 2px solid var(--border); border-bottom: 0; } .phasing-table tr.muted td { color: var(--muted); } .phase-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; } .phasing-rates { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 14px; } .modal-card .phasing-rates label.rate { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; font-size: .8rem; } .modal-card .phasing-rates label.rate input { width: 88px; margin: 0; padding: 3px 6px; } #layer-list li.phase-filter { cursor: default; gap: 8px; border: 1px dashed var(--border); } #layer-list li.phase-filter:hover { background: transparent; } #layer-list li.phase-filter select { flex: 1; min-width: 0; font-size: .8rem; padding: 3px 6px; } /* ---- v0.12 review fixes ---- */ .insp-measure { display: flex; align-items: center; gap: 8px; margin: 4px 0; } .insp-measure input[type=number] { width: 78px; margin: 0; } .insp-measure > span.muted:first-child { min-width: 88px; }