/* ============================================================================
CIVIX — EDITOR SKIN (warm-modern restyle, sub-task A: TOPBAR + LEFT PALETTE)
----------------------------------------------------------------------------
PURPOSE
A pure RESTYLE layer. Loaded LAST (after style.css + civix-design.css) so
it overrides the editor's dark-navy topbar + light-grey palette into the
warm-modern "paper + teal" design system from /civix-design.css and the
approved mockup (tmp/firstrun-mocks/final/canvas.html).
RULES OBSERVED
- NO markup logic changed. Every #id / .class app.js queries is preserved.
- Only VISUAL properties are overridden here. Layout structure (flex column,
widths, collapse behaviour) inherited from style.css is respected.
- Scope is strictly TOPBAR (#topbar …) + LEFT PALETTE (#left-panel …).
Map, right pane, modals, popovers are LATER sub-tasks — left untouched.
TOKENS
All colours/shadows/radii reference civix-design.css custom properties
(--cv-* / --color-* / --sh-* / --r-* / --ease). No hardcoded brand hexes.
============================================================================ */
/* ============================================================================
1. TOPBAR — de-clash dark navy → clean warm "paper" masthead
============================================================================ */
#topbar{
height: 60px;
background: var(--color-surface); /* lifted paper, not navy */
border-bottom: 1px solid var(--color-border);
box-shadow: 0 1px 0 rgba(255,255,255,.6), var(--sh-1);
padding: 0 16px;
gap: 14px;
}
#topbar.saving{ opacity:.6; pointer-events:none; }
.topbar-left{ gap: 12px; }
.topbar-right{ gap: 9px; }
/* ---- brand logo: wrapper for the .cv-logo lockup (layout only) ---------- */
.brand-logo{
display: inline-flex;
align-items: center;
}
/* ---- role badge ("Owner") → neutral civic pill ------------------------- */
.role-badge{
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: .7rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--color-primary-hover);
background: var(--cv-aqua-wash);
border-radius: var(--r-pill);
padding: 5px 11px;
white-space: nowrap;
}
/* role variants ride the same warm pill; only the cool/neutral ones differ */
.role-badge.role-owner{ color: var(--color-primary-hover); background: var(--cv-aqua-wash); }
.role-badge.role-editor{ color: var(--color-text-soft); background: var(--color-surface-sink); }
.role-badge.role-public{ color: var(--color-text-faint); background: var(--color-surface-sink); }
/* ---- topbar status chip (currently hidden — keep it on-brand if shown) -- */
#topbar #topbar-status-chip{
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: .66rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--color-text-soft);
background: var(--color-surface-sink);
border: 1.5px solid var(--color-border-strong);
border-radius: var(--r-pill);
padding: 4px 11px;
}
#topbar #topbar-status-chip.published{
color: var(--color-primary-hover);
background: var(--cv-aqua-wash);
border-color: var(--color-primary);
}
/* ---- soft-card topbar controls: Team + export icons -------------------- */
#topbar .btn-share,
#topbar .toolbar-btn{
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-body);
font-weight: var(--fw-semibold);
font-size: .82rem;
color: var(--color-text);
background: var(--cv-white);
border: none;
border-radius: var(--r-sm);
box-shadow: var(--sh-1);
padding: 7px 12px;
cursor: pointer;
transition: transform .16s var(--ease), box-shadow .2s var(--ease),
color .18s var(--ease), background .18s var(--ease);
}
#topbar .btn-share:hover,
#topbar .toolbar-btn:hover{
transform: translateY(-1px);
box-shadow: var(--sh-2);
color: var(--color-primary-hover);
background: var(--cv-white);
}
#topbar .toolbar-btn.icon-only{
width: 34px;
height: 34px;
padding: 8px;
justify-content: center;
}
#topbar .toolbar-btn.active{
background: var(--cv-aqua-wash);
color: var(--color-primary-hover);
box-shadow: inset 0 0 0 1.5px var(--color-primary);
}
#topbar .toolbar-btn:disabled{
opacity: .4;
cursor: not-allowed;
transform: none !important;
box-shadow: var(--sh-1) !important;
color: var(--color-text);
}
/* ---- user menu trigger → soft pill (avatar + name + caret) ------------- */
#topbar .user-menu-trigger{
display: flex;
align-items: center;
gap: 9px;
background: var(--cv-white);
border: none;
cursor: pointer;
padding: 5px 11px 5px 6px;
border-radius: var(--r-pill);
box-shadow: var(--sh-1);
color: var(--color-text);
transition: transform .18s var(--ease), box-shadow .2s var(--ease);
}
#topbar .user-menu-trigger:hover{
background: var(--cv-white);
transform: translateY(-1px);
box-shadow: var(--sh-2);
}
#topbar .user-avatar-initials{
width: 26px;
height: 26px;
border-radius: 50%;
background: linear-gradient(150deg, var(--color-primary), var(--color-primary-hover));
box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
color: var(--cv-white);
font-weight: var(--fw-extra);
font-size: .72rem;
}
#topbar .user-display-name{
font-weight: var(--fw-bold);
font-size: .86rem;
color: var(--color-text);
}
/* ---- user dropdown → warm paper card ----------------------------------- */
#topbar .user-dropdown{
right: 0;
top: calc(100% + 8px);
width: 240px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--r-lg);
box-shadow: var(--sh-3);
padding: 8px;
}
#topbar .user-dropdown-header{
padding: 10px 12px 12px;
border-bottom: 1px solid var(--color-border);
}
/* #dropdown-display-name carries no class — target by ID. The inline
font-size/font-weight that used to out-specify this was removed from
index.html so Space Grotesk + the bold weight now apply as intended. */
#topbar #dropdown-display-name,
#dropdown-display-name{
display: block;
font-family: var(--font-display);
font-weight: var(--fw-bold);
font-size: .9rem;
letter-spacing: -.01em;
color: var(--color-text);
}
#topbar .billing-badge{
font-family: var(--font-display);
font-size: .64rem;
font-weight: var(--fw-semibold);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--color-text-faint);
background: var(--color-surface-sink);
border: 1px solid var(--color-border);
padding: 3px 8px;
border-radius: var(--r-pill);
}
#topbar .user-dropdown-divider{
background: var(--color-border);
margin: 4px 0;
}
#topbar .user-dropdown-item{
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-body);
font-size: .9rem;
font-weight: var(--fw-semibold);
color: var(--color-text-soft);
padding: 10px 12px;
border-radius: var(--r-sm);
transition: background .15s var(--ease), color .15s var(--ease);
}
#topbar .user-dropdown-item:hover{
background: var(--cv-aqua-wash);
color: var(--color-primary-hover);
}
/* logout reads as a soft danger row */
#topbar #btn-logout:hover{
background: var(--cv-terracotta-wash);
color: var(--color-accent-hover);
}
/* ============================================================================
2. LEFT PALETTE — light-grey → warm paper, soft-card tools, branded header
============================================================================ */
#left-panel{
background: var(--color-surface);
border-right: 1px solid var(--color-border);
box-shadow: 1px 0 0 rgba(255,255,255,.5);
}
#left-panel.panel-collapsed{
border-right: 1px solid var(--color-border);
box-shadow: none;
}
/* ---- project header ----------------------------------------------------- */
.left-project-header{
padding: 12px 12px 14px;
border-bottom: 1px solid var(--color-border);
background: var(--color-surface);
}
.left-project-name-row{ gap: 6px; }
/* wordless project-seal emblem, inline-left of the name (T5 wires the picker
click onto #left-project-seal). flex:none so it never shrinks; line-height:0
removes inline-box descenders so the 24px disc sits centered in the row. */
.left-project-seal{
flex: none;
display: inline-flex;
align-items: center;
line-height: 0;
}
.left-project-name-trigger{ border-radius: var(--r-sm); }
.left-project-name-trigger:hover{ background: var(--cv-aqua-wash); }
/* NOTE: app.js rewrites #left-project-name and drops its class at runtime,
so these two are targeted by ID (which app.js preserves) — not by class. */
.left-project-name,
#left-project-name{
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 1.02rem;
letter-spacing: -.01em;
color: var(--color-text);
}
.left-project-chevron{ color: var(--color-text-faint); }
.left-project-name-input{
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 1rem;
color: var(--color-text);
background: var(--cv-white);
border: 1.5px solid var(--color-primary);
border-radius: var(--r-sm);
padding: 3px 8px;
box-shadow: 0 0 0 4px var(--color-focus-ring);
/* min-width:0 lets this flex item shrink; without it, min-content text width overflows the fixed-width floating card */
min-width: 0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
/* header icon buttons (collapse / rename pencil / settings gear) */
.panel-collapse-btn,
.left-header-icon-btn{
width: 28px;
height: 28px;
border-radius: var(--r-sm);
background: transparent;
color: var(--color-text-faint);
display: grid;
place-items: center;
padding: 0;
transition: background .15s var(--ease), color .15s var(--ease);
}
.panel-collapse-btn:hover,
.left-header-icon-btn:hover{
background: var(--color-surface-sink);
color: var(--color-primary-hover);
}
/* While renaming inline, hide the pencil/gear icons and the switcher chevron
so the rename input's focus-ring never paints over them. Seal stays visible. */
.left-project-name-row.is-renaming .left-header-icon-btn{ display: none; }
.left-project-name-row.is-renaming .left-project-chevron{ display: none; }
/* status chip in the header */
.left-status-chip{
margin-top: 10px;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: .66rem;
letter-spacing: .1em;
text-transform: uppercase;
border-radius: var(--r-pill);
padding: 4px 11px;
background: var(--color-surface-sink);
color: var(--color-text-soft);
border: 1.5px solid var(--color-border-strong);
}
.left-status-chip.published{
background: var(--cv-aqua-wash);
color: var(--color-primary-hover);
border-color: var(--color-primary);
}
/* ---- project dropdown → warm paper card -------------------------------- */
.project-dropdown{
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--r-lg);
box-shadow: var(--sh-3);
padding: 8px;
min-width: 220px;
}
.project-dropdown-item{
font-family: var(--font-body);
font-size: .9rem;
font-weight: var(--fw-medium);
color: var(--color-text-soft);
padding: 9px 12px;
border-radius: var(--r-sm);
transition: background .15s var(--ease), color .15s var(--ease);
}
.project-dropdown-item:hover{ background: var(--cv-aqua-wash); color: var(--color-primary-hover); }
.project-dropdown-item.active{
color: var(--color-primary-hover);
font-weight: var(--fw-bold);
background: var(--cv-aqua-wash);
}
.project-dropdown-item.project-new-btn{ color: var(--color-primary-hover); font-weight: var(--fw-semibold); }
.project-dropdown-item.project-new-btn:hover{ background: var(--cv-aqua-wash); }
/* "All projects →" link reads as the same row */
a.project-dropdown-item#btn-all-projects{ color: var(--color-text-soft); }
a.project-dropdown-item#btn-all-projects:hover{ color: var(--color-primary-hover); }
.project-dropdown-divider{ background: var(--color-border); margin: 4px 8px; }
/* ---- DRAW TOOLS: 5 soft cards ------------------------------------------ */
.draw-tools-row{
padding: 14px 14px 0;
gap: 7px;
background: var(--color-surface);
}
.draw-tool-card{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
padding: 9px 4px;
min-height: 56px;
border: none;
border-radius: var(--r-sm);
background: var(--cv-white);
box-shadow: var(--sh-1);
color: var(--color-text-soft);
transition: transform .16s var(--ease), box-shadow .2s var(--ease),
color .18s var(--ease), background .18s var(--ease);
}
.draw-tool-card:hover{
transform: translateY(-2px);
box-shadow: var(--sh-2);
background: var(--cv-white);
color: var(--color-primary-hover);
border: none;
}
.draw-tool-card svg{ color: var(--color-primary-hover); }
.draw-tool-card.active{
/* AA: white label needs the strong action surface (#0A7B84 ≈ 5:1),
NOT --color-primary (#0FA4AF ≈ 3.02:1 — fails AA for the ~10px bold label). */
background: var(--color-primary-strong);
color: var(--cv-white);
box-shadow: var(--sh-primary);
border: none;
}
.draw-tool-card.active:hover{
background: var(--color-primary-strong-hover);
color: var(--cv-white);
}
.draw-tool-card.active svg{ color: var(--cv-white); }
.draw-tool-label{
font-family: var(--font-body);
font-size: .6rem; /* a hair smaller so "Object" fits the 5-card row */
font-weight: var(--fw-bold);
letter-spacing: -.01em; /* tighter tracking — "Object" no longer truncates */
color: inherit;
max-width: 100%;
white-space: nowrap;
overflow: visible; /* never clip to "Obj…" */
}
.draw-tool-card.active .draw-tool-label{ color: var(--cv-white); }
/* ---- UNDO / REDO secondary row ----------------------------------------- */
.draw-tools-secondary-row{
padding: 8px 14px 14px;
gap: 7px;
border-bottom: 1px solid var(--color-border);
background: var(--color-surface);
}
.draw-tool-card.draw-tool-card--secondary{
flex-direction: row;
min-height: 34px;
padding: 6px 8px;
gap: 6px;
color: var(--color-text-soft);
background: var(--cv-white);
box-shadow: var(--sh-1);
}
.draw-tool-card--secondary svg{ width: 15px; height: 15px; color: var(--color-text-soft); }
/* The SVG carries an inline `margin:0 auto 2px` (from index.html, for the
column-layout primary cards). In this ROW-layout secondary card that auto
margin absorbed all free space and shoved the icon to the far left, leaving a
lopsided gap before the label. Neutralise the inline margin so the button's
own justify-content:center + gap groups icon+label as one centred pair. */
.draw-tool-card.draw-tool-card--secondary svg{ margin: 0 !important; }
/* explicit centred pair (justify-content already inherits center, but pin it so
the row reads identically for Undo and its mirror Redo) */
.draw-tool-card.draw-tool-card--secondary{ justify-content: center; }
/* higher specificity so the intended semibold weight actually applies
(the bare .draw-tool-label base rule was winning on source order). */
.draw-tool-card.draw-tool-card--secondary .draw-tool-label{
font-size: .72rem;
font-weight: var(--fw-semibold);
letter-spacing: 0;
}
.draw-tool-card--secondary:not(:disabled):hover{
transform: translateY(-1px);
box-shadow: var(--sh-2);
background: var(--cv-white);
color: var(--color-primary-hover);
border: none;
}
.draw-tool-card--secondary:not(:disabled):hover svg{ color: var(--color-primary-hover); }
.draw-tool-card--secondary:disabled{
opacity: .4;
cursor: not-allowed;
transform: none !important;
box-shadow: var(--sh-1) !important;
color: var(--color-text-soft);
}
/* ---- STARTER PACKS ----------------------------------------------------- */
.packs-scroll{ padding: 14px 14px 22px; }
.packs-scroll::-webkit-scrollbar{ width: 8px; }
.packs-scroll::-webkit-scrollbar-thumb{
background: var(--color-border-strong);
border-radius: 99px;
border: 2px solid var(--color-surface);
}
.pack-card{
background: var(--cv-white);
border: none;
border-radius: var(--r);
box-shadow: var(--sh-1);
padding: 12px 12px 10px;
margin-bottom: 12px;
}
.pack-card-header{
font-family: var(--font-body);
font-size: .68rem;
font-weight: var(--fw-bold);
text-transform: uppercase;
letter-spacing: .14em;
color: var(--color-text-faint);
margin-bottom: 9px;
}
/* pack preset tiles — soft cards on warm paper */
.preset-tile{
border: none;
border-radius: var(--r-sm);
background: var(--color-surface);
box-shadow: var(--sh-1);
transition: transform .16s var(--ease), box-shadow .2s var(--ease), background .18s var(--ease);
}
.preset-tile:hover{
transform: translateY(-2px);
box-shadow: var(--sh-2);
background: var(--cv-white);
border: none;
}
.preset-tile.active{
background: var(--cv-aqua-wash);
box-shadow: inset 0 0 0 1.5px var(--color-primary);
border: none;
}
.preset-label{ color: var(--color-text-soft); }
/* preset type badges → brand-coherent (terracotta accent for object) */
.preset-badge.zone { background: var(--color-primary); }
.preset-badge.line { background: var(--color-primary-hover); }
.preset-badge.point { background: var(--cv-turquoise-br); color: var(--color-text); }
.preset-badge.object{ background: var(--color-accent); }
/* ---- contextual zone / object popovers anchored in the palette --------- */
/* (kept minimal — these are still "left palette region" affordances) */
#contextual-zone-modal,
#contextual-object-modal{
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--r);
box-shadow: var(--sh-3);
}
.zone-variant-tile{
border-radius: var(--r-sm);
color: var(--color-text-soft);
}
.zone-variant-tile:hover{ background: var(--cv-aqua-wash); color: var(--color-primary-hover); }
/* ============================================================================
████ SUB-TASK B — RIGHT PANE (warm-modern restyle) ████
----------------------------------------------------------------------------
RESTYLE ONLY. Every #id / .class app.js queries or toggles is preserved.
No `display` is set on JS-toggled containers (#footer-geo, #footer-normal,
#panel-geo-view, #panel-body-fields, #advanced-body, #icon-card, #stroke-card,
#fill-card, the hidden fields) — those rely on .hidden (global !important) or
inline style.display flipped by app.js, which this layer never overrides.
Visual target: tmp/firstrun-mocks/final/canvas.html right-pane states.
Token mapping: paper-2→surface, paper-sink→surface-sink, teal→primary,
teal-deep→primary-hover, teal-wash→cv-aqua-wash, ochre→accent, sh-teal→
sh-primary. Footer buttons become the mockup's `.scard` soft white cards.
============================================================================ */
/* ============================================================================
B1. PANEL SHELL + TAB BAR
============================================================================ */
#right-panel{
background: var(--color-surface);
border-left: 1px solid var(--color-border);
box-shadow: -1px 0 0 rgba(255,255,255,.5), var(--sh-1);
}
#tab-bar{
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
padding: 10px 10px 0;
gap: 4px;
}
/* underline-style tabs (mockup) — replaces the old pill fill */
#tab-bar .tab-btn{
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 11px 8px;
border: none;
background: transparent;
font-family: var(--font-body);
font-weight: var(--fw-bold);
font-size: .82rem;
color: var(--color-text-faint);
border-radius: var(--r-sm) var(--r-sm) 0 0;
border-bottom: 2.5px solid transparent;
margin-bottom: -1px;
cursor: pointer;
transition: background .16s var(--ease), color .16s var(--ease),
border-color .16s var(--ease);
}
#tab-bar .tab-btn:hover{
background: var(--color-surface-sink);
color: var(--color-text-soft);
}
#tab-bar .tab-btn.active{
background: transparent;
color: var(--color-primary-hover);
border-bottom-color: var(--color-primary);
font-weight: var(--fw-bold);
}
#tab-bar .tab-btn svg{ flex: none; }
/* collapse chevron → quiet square icon button */
#right-panel #right-panel-collapse{
width: 28px;
height: 28px;
border-radius: var(--r-sm);
background: transparent;
color: var(--color-text-faint);
display: grid;
place-items: center;
padding: 0;
flex: none;
border: none;
transition: background .15s var(--ease), color .15s var(--ease);
}
#right-panel #right-panel-collapse:hover{
background: var(--color-surface-sink);
color: var(--color-primary-hover);
}
/* scrollbar polish in scrollable panes */
.tab-pane::-webkit-scrollbar,
#layers-list::-webkit-scrollbar,
.panel-body::-webkit-scrollbar{ width: 8px; }
.tab-pane::-webkit-scrollbar-thumb,
#layers-list::-webkit-scrollbar-thumb,
.panel-body::-webkit-scrollbar-thumb{
background: var(--color-border-strong);
border-radius: 99px;
border: 2px solid var(--color-surface);
}
/* ============================================================================
B2. PROPERTIES — header card, body, empty state
============================================================================ */
.panel-header-card{
background: var(--cv-white);
border: none;
box-shadow: var(--sh-1);
border-radius: var(--r);
padding: 11px 12px;
margin: 12px 14px 0;
gap: 10px;
}
/* type badge — meaningful per-type, brand-coherent (status/semantic tokens) */
.panel-type-icon{
width: 26px;
height: 26px;
border-radius: 7px;
font-family: var(--font-display);
font-weight: var(--fw-bold);
font-size: .72rem;
color: var(--cv-white);
}
.panel-type-icon.type-zone { background: var(--cv-deep-teal); }
.panel-type-icon.type-line { background: var(--cv-terracotta); }
.panel-type-icon.type-point { background: var(--cv-turquoise-strong); }
/* AA: white glyph needs the strong surface (#0A7B84 ≈ 5.03:1).
--color-primary (#0FA4AF) is only 3.02:1 and fails AA. */
.panel-type-icon.type-object { background: var(--color-primary-strong); }
.panel-header-caption{
font-family: var(--font-body);
font-size: .72rem;
font-weight: var(--fw-semibold);
color: var(--color-text-faint);
text-transform: none;
letter-spacing: 0;
}
.panel-header-name,
#panel-title{
font-family: var(--font-display);
font-size: 1rem;
font-weight: var(--fw-semibold);
letter-spacing: -.01em;
color: var(--color-text);
}
.panel-header-name-input,
#panel-title-input{
font-family: var(--font-display);
font-size: .95rem;
font-weight: var(--fw-semibold);
color: var(--color-text);
background: transparent;
border: none;
border-bottom: 1.5px solid var(--color-primary);
}
/* header action icons (rename pencil / close) */
.panel-header-action{
color: var(--color-text-faint);
border-radius: var(--r-sm);
padding: 5px;
transition: background .15s var(--ease), color .15s var(--ease);
}
.panel-header-action:hover{
color: var(--color-primary-hover);
background: var(--color-surface-sink);
}
/* shared full-panel empty-state title — warm display-font treatment.
* Used by both #properties-empty and the Feedback empty state. */
.panel-empty-state__title{
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 1.05rem;
letter-spacing: -.01em;
color: var(--color-text-soft);
}
/* ---- prop cards (Stroke / Fill / Icon / type-fields) -------------------- */
.prop-card{
background: var(--cv-white);
border: none;
box-shadow: var(--sh-1);
border-radius: var(--r);
padding: 13px;
margin-bottom: 12px;
}
.prop-card-title{
font-family: var(--font-body);
font-size: .7rem;
font-weight: var(--fw-bold);
letter-spacing: .13em;
text-transform: uppercase;
color: var(--color-text-faint);
margin-bottom: 11px;
}
.prop-card-sublabel{
font-family: var(--font-body);
font-size: .76rem;
font-weight: var(--fw-bold);
color: var(--color-text);
}
/* panel text/number inputs */
.panel-body input[type="text"],
.panel-body input[type="number"],
.panel-body select,
.color-picker-hex{
background: var(--cv-white);
border: 1.5px solid var(--color-border-strong);
border-radius: var(--r-sm);
color: var(--color-text);
font-family: var(--font-body);
}
.panel-body input[type="text"]:focus,
.panel-body input[type="number"]:focus,
.panel-body select:focus,
.color-picker-hex:focus{
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-focus-ring);
outline: none;
}
/* ---- Advanced / Style collapse toggle ---------------------------------- */
.advanced-toggle{
font-family: var(--font-body);
font-weight: var(--fw-bold);
font-size: .78rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--color-text-soft);
border-radius: var(--r-sm);
transition: background .12s var(--ease), color .12s var(--ease);
}
.advanced-toggle:hover{
background: var(--cv-aqua-wash);
color: var(--color-primary-hover);
}
.advanced-toggle #advanced-chevron{ color: var(--color-text-faint); }
/* ---- color swatches ----------------------------------------------------- */
.color-swatch{
border-radius: var(--r-sm);
box-shadow: inset 0 0 0 1px rgb(var(--cv-ink-rgb) / .12);
border: 2px solid transparent;
transition: transform .13s var(--ease), border-color .12s var(--ease);
}
.color-swatch:hover{ transform: scale(1.08); border-color: transparent; }
.color-swatch.active{
border-color: transparent;
box-shadow: inset 0 0 0 1px rgb(var(--cv-ink-rgb) / .12),
0 0 0 2px var(--color-surface),
0 0 0 4px var(--color-primary);
}
/* eyedropper / custom-color toggle */
.eyedropper-btn{
background: var(--cv-white);
border: 1.5px solid var(--color-border-strong);
border-radius: var(--r-sm);
color: var(--color-text-soft);
transition: border-color .15s var(--ease), color .15s var(--ease);
}
.eyedropper-btn:hover,
.eyedropper-btn.active{
border-color: var(--color-primary);
color: var(--color-primary-hover);
}
.color-picker-native{ border: 1.5px solid var(--color-border-strong); border-radius: var(--r-sm); }
/* ---- line-style buttons ------------------------------------------------- */
.line-style-btn{
background: var(--cv-white);
border: none;
box-shadow: var(--sh-1);
border-radius: var(--r-sm);
color: var(--color-text-soft);
transition: transform .14s var(--ease), box-shadow .2s var(--ease),
background .14s var(--ease);
}
.line-style-btn:hover{
transform: translateY(-1px);
box-shadow: var(--sh-2);
border: none;
color: var(--color-primary-hover);
}
.line-style-btn.active{
background: var(--cv-aqua-wash);
box-shadow: inset 0 0 0 1.5px var(--color-primary);
border: none;
color: var(--color-primary-hover);
}
/* ---- range sliders (icon width / stroke width / fill opacity) ---------- */
.panel-body input[type="range"]{
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 6px;
border-radius: 99px;
background: var(--color-surface-sink);
outline: none;
}
.panel-body input[type="range"]::-webkit-slider-thumb{
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--color-primary);
box-shadow: var(--sh-1);
border: 2.5px solid var(--cv-white);
cursor: pointer;
}
.panel-body input[type="range"]::-moz-range-thumb{
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--color-primary);
border: 2.5px solid var(--cv-white);
cursor: pointer;
}
/* ---- civix toggle switch (real-world width enable) --------------------- */
.civix-toggle input:checked + .civix-toggle-slider{ background: var(--color-primary); }
/* ---- icon card (points) ------------------------------------------------- */
.icon-card-emoji{
border: 1.5px solid var(--color-border-strong);
border-radius: var(--r-sm);
background: var(--color-surface-sink);
transition: border-color .15s var(--ease);
}
.icon-card-emoji:hover{ border-color: var(--color-primary); }
.icon-card-change-btn{
font-family: var(--font-body);
font-weight: var(--fw-semibold);
color: var(--color-primary-hover);
}
/* ---- geo-edit view (Transform / Reshape body swap) --------------------- */
#panel-geo-view .geo-view-type{
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: .72rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--cv-white);
background: var(--color-primary-hover);
box-shadow: var(--sh-2);
border-radius: var(--r-pill);
padding: 7px 15px;
}
#panel-geo-view .geo-view-hint{
font-family: var(--font-body);
font-size: .85rem;
color: var(--color-text-soft);
line-height: 1.55;
}
/* ============================================================================
B3. PROPERTIES FOOTER — ⭐ SOFT WHITE CARDS (founder callout)
----------------------------------------------------------------------------
Transform / Reshape / Back / Delete (footer-normal) and Cancel / Done
(footer-geo) become white soft-cards: white bg, NO hard border, soft drop
shadow, Space-Grotesk-adjacent type, ink/teal color. Delete stays a clear
red affordance; its armed/confirm state is solid red.
Geometry (height/padding/radius/icon-only width) is INHERITED from style.css
so the JS that swaps footer rows keeps identical sizing — we override only
surface/border/shadow/color/type, never layout.
============================================================================ */
.panel-footer{
background: var(--color-surface);
border-top: 1px solid var(--color-border);
padding: 11px 14px;
}
.panel-footer .footer-btn{
border: none; /* kill hard border */
background: var(--cv-white);
box-shadow: var(--sh-1);
color: var(--color-text);
font-family: var(--font-body);
font-weight: var(--fw-semibold);
font-size: .86rem;
border-radius: var(--r-sm);
transition: transform .16s var(--ease), box-shadow .2s var(--ease),
color .18s var(--ease), background .18s var(--ease);
}
.panel-footer .footer-btn .footer-btn-label{ font-weight: var(--fw-semibold); }
.panel-footer .footer-btn:hover{
transform: translateY(-1px);
box-shadow: var(--sh-2);
background: var(--cv-white);
color: var(--color-primary-hover);
}
.panel-footer .footer-btn:active{ transform: translateY(0); }
/* Back chevron → quiet ghost card (transparent until hover) */
.panel-footer .footer-btn.btn-back-to-layers{
background: transparent !important;
box-shadow: none;
color: var(--color-text-faint);
}
.panel-footer .footer-btn.btn-back-to-layers:hover{
background: var(--color-surface-sink) !important;
box-shadow: none;
color: var(--color-primary-hover);
transform: none;
}
/* Done (geo save) → teal primary soft-card */
.panel-footer .footer-btn.btn-primary{
background: var(--color-primary-strong) !important;
color: var(--cv-white) !important;
border-color: transparent !important;
box-shadow: var(--sh-primary);
}
.panel-footer .footer-btn.btn-primary:hover{
background: var(--color-primary-strong-hover) !important;
color: var(--cv-white) !important;
box-shadow: 0 10px 26px rgb(var(--cv-deep-teal-rgb) / .3);
}
/* Cancel (geo) → plain white soft-card */
.panel-footer .footer-btn.btn-secondary{
background: var(--cv-white) !important;
color: var(--color-text) !important;
border-color: transparent !important;
box-shadow: var(--sh-1);
}
.panel-footer .footer-btn.btn-secondary:hover{
background: var(--cv-white) !important;
color: var(--color-primary-hover) !important;
box-shadow: var(--sh-2);
}
/* Delete → clear red affordance (white card, red ink → solid red on hover) */
.panel-footer .footer-btn.btn-danger{
background: var(--cv-white) !important;
color: var(--color-danger) !important;
border-color: transparent !important;
box-shadow: var(--sh-1);
}
.panel-footer .footer-btn.btn-danger:hover{
background: var(--color-danger) !important;
color: var(--cv-white) !important;
box-shadow: 0 8px 20px rgb(var(--cv-danger-rgb) / .26);
}
/* armed / confirm state — solid red */
.panel-footer .footer-btn.btn-danger.confirm-active,
.panel-footer .footer-btn.btn-danger[data-confirm-pending]{
background: var(--color-danger) !important;
color: var(--cv-white) !important;
box-shadow: 0 8px 20px rgb(var(--cv-danger-rgb) / .3);
}
.panel-error{ color: var(--color-danger); font-family: var(--font-body); }
/* ============================================================================
B4. LAYERS TAB
============================================================================ */
/* The Layers pane used to carry its own opaque fill (Properties/Feedback are
transparent, so #right-panel's inset teal seam + handshake gradient show
through them). That fill painted OVER the panel seam, so a *duplicate* seam
box-shadow was faked on this element — but it sat on a flat cv-paper fill
instead of the panel's chrome+gradient base, so it read "less green" and could
never match. Fix: make the pane transparent (like the other two tabs) and drop
the duplicate seam, so the single shared #right-panel seam renders pixel-
identically on all three tabs. The white layer cards keep their own --cv-white
fill + --sh-1, so they stay legible on the panel's chrome surface. */
#tab-layers{
background: transparent;
}
#layers-list{ background: transparent; padding: 14px 14px 4px; }
.layer-card{
background: var(--cv-white);
border: none;
box-shadow: var(--sh-1);
border-radius: var(--r);
margin-bottom: 10px;
}
.layer-card-header{
border-bottom: 1px solid var(--color-border);
padding: 9px 10px 9px 8px;
}
.layer-name-input{
font-family: var(--font-body);
font-weight: var(--fw-bold);
font-size: .9rem;
color: var(--color-text);
}
.layer-name-input:focus{
border-bottom-color: var(--color-primary);
color: var(--color-text);
}
.drag-handle,
.layer-chevron{ color: var(--color-border-strong); }
.layer-chevron:hover{ color: var(--color-text-faint); }
.layer-action-btn{
color: var(--color-text-faint);
border-radius: var(--r-sm);
transition: background .15s var(--ease), color .15s var(--ease);
}
.layer-action-btn:hover{ color: var(--color-primary-hover); background: var(--color-surface-sink); }
.layer-action-btn.vis-active{ color: var(--color-primary); }
.layer-action-btn.confirm-active{ color: var(--color-danger); background: var(--cv-terracotta-wash); }
/* element rows — soft tiles, brand-coherent type badges */
.element-row{
background: var(--cv-white);
border: none;
box-shadow: var(--sh-1);
border-radius: 9px;
padding: 7px 8px;
gap: 8px;
transition: transform .13s var(--ease), box-shadow .2s var(--ease),
background .12s var(--ease);
}
.element-row:hover{
transform: translateY(-1px);
background: var(--cv-white);
border-color: transparent;
box-shadow: var(--sh-2);
}
.element-row.selected{
background: var(--cv-aqua-wash);
border-color: transparent;
box-shadow: inset 0 0 0 1.5px var(--color-primary);
}
.element-row.selected .element-label{ color: var(--color-primary-hover); font-weight: var(--fw-bold); }
.element-label{
font-family: var(--font-body);
font-size: .86rem;
font-weight: var(--fw-semibold);
color: var(--color-text);
}
/* type badge — keep meaning, brand-coherent palette */
.elem-type-badge{
font-family: var(--font-display);
font-weight: var(--fw-bold);
border-radius: 6px;
}
.elem-type-badge.zone { background: var(--cv-deep-teal); }
.elem-type-badge.line { background: var(--cv-terracotta); }
.elem-type-badge.point { background: var(--cv-turquoise-strong); }
/* AA: white text needs the strong surface (#0A7B84 ≈ 5.03:1).
--color-primary (#0FA4AF) is only 3.02:1 and fails AA. */
.elem-type-badge.object { background: var(--color-primary-strong); }
.elem-action-btn{ color: var(--color-text-faint); border-radius: var(--r-sm); }
.elem-action-btn:hover{ color: var(--color-primary-hover); background: var(--color-surface-sink); }
.elem-action-btn.confirm-active{ color: var(--color-danger); }
/* drag affordances re-tinted to brand */
.layer-card.drag-over{ box-shadow: inset 0 0 0 2px var(--color-primary); }
.layer-elements.drag-over{ box-shadow: inset 0 0 0 2px var(--color-primary); background: var(--cv-aqua-wash); }
.element-row.drag-insert-before::before{ background: var(--color-primary); }
.layer-empty-hint{ color: var(--color-text-faint); font-family: var(--font-body); }
/* add-layer button → quiet dashed soft card */
#add-layer-btn{
border: 1px dashed var(--color-primary);
background: var(--cv-white);
box-shadow: var(--sh-1);
color: var(--color-primary-hover);
border-radius: var(--r-sm);
font-family: var(--font-body);
font-weight: var(--fw-bold);
transition: background .15s var(--ease), box-shadow .2s var(--ease);
}
#add-layer-btn:hover{
background: var(--cv-aqua-wash);
border-color: var(--color-primary);
box-shadow: var(--sh-2);
}
/* the wrapper around add-layer carries an inline grey bg — neutralize it */
#tab-layers > div[style]{ background: transparent !important; }
/* ============================================================================
B5. FEEDBACK TAB — comment catalog cards
============================================================================ */
#all-comments-header span:first-child{
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: .92rem;
color: var(--color-text);
}
#all-comments-count{ color: var(--color-text-faint); }
.civix-cp-catalog-card{
background: var(--cv-white);
border: none;
box-shadow: var(--sh-1);
border-radius: var(--r);
padding: 12px 14px;
transition: transform .16s var(--ease), box-shadow .2s var(--ease);
}
.civix-cp-catalog-card:hover{
transform: translateY(-1px);
box-shadow: var(--sh-2);
border-color: transparent;
}
.civix-cp-catalog-card--tombstone{
background: var(--color-surface-sink);
box-shadow: none;
}
.civix-cp-catalog-card--tombstone:hover{
transform: none;
box-shadow: var(--sh-1);
}
.civix-cp-catalog-author{
font-family: var(--font-body);
font-weight: var(--fw-bold);
color: var(--color-text);
}
.civix-cp-catalog-card--tombstone .civix-cp-catalog-author{ color: var(--color-text-faint); }
.civix-cp-catalog-time{ color: var(--color-text-faint); }
.civix-cp-catalog-preview{ color: var(--color-text-soft); }
.civix-cp-catalog-vote-chip,
.civix-cp-catalog-reply-chip{
background: var(--color-surface-sink);
color: var(--color-text-soft);
font-family: var(--font-body);
font-weight: var(--fw-semibold);
}
.civix-cp-catalog-empty{ color: var(--color-text-faint); }
/* feedback-tab catalog avatar (if rendered inline) → brand gradient */
#all-comments-body .civix-cp-avatar{
background: linear-gradient(150deg, var(--color-primary), var(--color-primary-hover));
}
/* ============================================================================
████ SUB-TASK C — MAP CONTROLS · COMMENT POPUPS · MODALS ████
----------------------------------------------------------------------------
RESTYLE ONLY. Every #id / .class app.js queries or toggles is preserved.
No `display` is set on JS-toggled overlays/popovers (.modal-overlay,
.contextual-modal, #share-popover, .search-expanded, .search-dropdown,
#civix-help-nudge, #civix-select-chip) — those rely on .hidden (global
!important) or inline style.display flipped by app.js, which this layer never
overrides. The Published toggle's JS-driven inline props (knob translateX,
slider on/off background set by updateStatusToggle) are respected: we restyle
the OFF base + the :checked ON state via the checkbox sibling selector with
!important (beats non-important inline), and never touch the knob `transform`.
Several target elements carry INLINE styles in index.html / generated markup
that reference legacy tokens (var(--brand,#0f9d84) etc). Inline wins over a
normal rule, so those properties are overridden here with !important and
re-pointed at the warm-modern system tokens. No markup is edited.
Visual target: tmp/firstrun-mocks/final/canvas.html (map ctrls, .map-pop
composer/thread, .modal / .danger / .switch).
Token mapping: paper-2→surface, paper-sink→surface-sink, teal→primary,
teal(filled, white text)→primary-strong, teal-deep→primary-hover,
teal-wash→cv-aqua-wash, ochre/danger→danger tokens, sh-teal→sh-primary.
============================================================================ */
/* ============================================================================
C1. MAP CONTROLS — Leaflet zoom / lock / basemap (top-right stack)
============================================================================ */
/* Default Leaflet zoom control → soft warm card group */
.leaflet-control-zoom.leaflet-bar,
.lock-map-control.leaflet-bar,
.basemap-control.leaflet-bar{
border: none !important;
background: var(--color-surface);
border-radius: var(--r);
box-shadow: var(--sh-2);
overflow: hidden;
}
/* zoom in / out buttons */
.leaflet-control-zoom a.leaflet-control-zoom-in,
.leaflet-control-zoom a.leaflet-control-zoom-out{
width: 38px;
height: 38px;
line-height: 38px;
background: var(--cv-white);
color: var(--color-text-soft);
border: none;
border-bottom: 1px solid var(--color-border);
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 1.15rem;
transition: background var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease);
}
.leaflet-control-zoom a.leaflet-control-zoom-out{ border-bottom: none; }
.leaflet-control-zoom a.leaflet-control-zoom-in:hover,
.leaflet-control-zoom a.leaflet-control-zoom-out:hover{
background: var(--cv-aqua-wash);
color: var(--color-primary-hover);
}
.leaflet-control-zoom a:focus-visible{
outline: 3px solid var(--color-primary-bright);
outline-offset: -3px;
}
/* lock-map control */
.lock-map-control{ padding: 5px; }
.lock-map-control button{
width: 38px;
height: 38px;
display: grid;
place-items: center;
border: none;
border-radius: var(--r-sm);
background: var(--cv-white);
color: var(--color-text-soft);
cursor: pointer;
box-shadow: var(--sh-1);
transition: background var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease),
box-shadow var(--dur-fast) var(--ease),
transform var(--dur-fast) var(--ease);
}
.lock-map-control button:hover{
background: var(--cv-aqua-wash); /* override style.css hover (--surface-2 cool-blue) */
color: var(--color-primary-hover);
transform: translateY(-1px);
box-shadow: var(--sh-2);
}
.lock-map-control button:focus-visible{
outline: 3px solid var(--color-primary-bright);
outline-offset: 2px;
}
.lock-map-control button svg{ width: 19px; height: 19px; }
/* locked state — engaged aqua chip + brand ring (mockup .ctrl-btn.on) */
.lock-map-control button.locked{
background: var(--cv-aqua-wash);
color: var(--color-primary-hover);
box-shadow: inset 0 0 0 1.5px var(--color-primary);
}
/* basemap switcher */
.basemap-control{ padding: 5px; display: flex; flex-direction: column; gap: 3px; }
.basemap-control .basemap-btn{
display: flex;
align-items: center;
gap: 8px;
padding: 7px 12px;
border: none;
border-radius: var(--r-sm);
background: transparent;
font-family: var(--font-body);
font-weight: var(--fw-semibold);
font-size: .8rem;
color: var(--color-text-soft);
white-space: nowrap;
cursor: pointer;
transition: background var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease);
}
.basemap-control .basemap-btn:hover{ background: var(--color-surface-sink); }
.basemap-control .basemap-btn.active{
background: var(--cv-aqua-wash);
color: var(--color-primary-hover);
}
.basemap-control .basemap-btn:focus-visible{
outline: 3px solid var(--color-primary-bright);
outline-offset: -2px;
}
/* ============================================================================
C2. SEARCH CONTROL — teal FAB → expand input + results dropdown
============================================================================ */
.search-control .search-toggle-btn{
width: 48px;
height: 48px;
border-radius: 50%;
border: none;
background: var(--color-primary-strong);
color: var(--color-on-primary);
display: grid;
place-items: center;
cursor: pointer;
box-shadow: var(--sh-primary);
transition: background var(--dur) var(--ease),
transform var(--dur) var(--ease);
}
.search-control .search-toggle-btn:hover{
background: var(--color-primary-strong-hover);
transform: translateY(-2px);
}
.search-control .search-toggle-btn:focus-visible{
outline: 3px solid var(--color-primary-bright);
outline-offset: 3px;
}
.search-control .search-toggle-btn svg{ width: 21px; height: 21px; }
/* expanded input shell */
.search-control .search-expanded{
align-items: center;
gap: 6px;
background: var(--color-surface);
border-radius: var(--r);
box-shadow: var(--sh-2);
padding: 6px 8px 6px 12px;
}
.search-control .search-input{
border: none;
background: transparent;
font-family: var(--font-body);
font-size: .9rem;
color: var(--color-text);
min-width: 220px;
outline: none;
}
.search-control .search-input::placeholder{ color: var(--color-text-faint); }
.search-control .search-close-btn{
border: none;
background: transparent;
color: var(--color-text-faint);
cursor: pointer;
width: 28px;
height: 28px;
border-radius: var(--r-sm);
display: grid;
place-items: center;
font-size: 1.1rem;
line-height: 1;
transition: background var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease);
}
.search-control .search-close-btn:hover{
background: var(--color-surface-sink);
color: var(--color-text-soft);
}
/* results dropdown */
.search-control .search-dropdown{
background: var(--color-surface);
border: none;
border-radius: var(--r);
box-shadow: var(--sh-3);
margin-top: 6px;
padding: 5px;
overflow: hidden;
}
.search-control .search-item{
padding: 9px 11px;
border-radius: var(--r-sm);
font-family: var(--font-body);
font-size: .84rem;
color: var(--color-text-soft);
cursor: pointer;
transition: background var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease);
}
.search-control .search-item:hover,
.search-control .search-item.search-item-highlighted{
background: var(--cv-aqua-wash);
color: var(--color-primary-hover);
}
.search-control .search-item-noresult{
padding: 11px;
text-align: center;
color: var(--color-text-faint);
font-size: .82rem;
}
/* ============================================================================
C3. MODE PILL · HELP FAB · NUDGE · SELECT CHIP · API STATUS
============================================================================ */
/* mode indicator pill (bottom-center) — soft paper pill */
#mode-indicator{
display: inline-flex;
align-items: center;
gap: 9px;
background: var(--color-surface);
box-shadow: var(--sh-2);
border: none;
padding: 8px 16px 8px 14px;
border-radius: var(--r-pill);
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: .82rem;
color: var(--color-text-soft);
}
/* leading status dot (mockup .mode-pill .dot) */
#mode-indicator::before{
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-text-faint);
flex: none;
transition: background var(--dur-fast) var(--ease),
box-shadow var(--dur-fast) var(--ease);
}
/* comment mode → engaged deep band pill, bright dot halo */
#mode-indicator.mode-comment{
background: var(--color-primary-hover);
color: var(--cv-on-band);
}
#mode-indicator.mode-comment::before{
background: var(--color-primary-bright);
box-shadow: 0 0 0 4px rgb(var(--cv-turquoise-rgb) / .30);
}
/* active draw modes → brand-tinted pill so the mode reads as "armed" */
#mode-indicator.mode-draw-line,
#mode-indicator.mode-draw-zone,
#mode-indicator.mode-draw-zone-rect,
#mode-indicator.mode-draw-zone-circle,
#mode-indicator.mode-draw-point,
#mode-indicator.mode-draw-object,
#mode-indicator.mode-auto-place{
background: var(--cv-aqua-wash);
color: var(--color-primary-hover);
}
#mode-indicator.mode-draw-line::before,
#mode-indicator.mode-draw-zone::before,
#mode-indicator.mode-draw-zone-rect::before,
#mode-indicator.mode-draw-zone-circle::before,
#mode-indicator.mode-draw-point::before,
#mode-indicator.mode-draw-object::before,
#mode-indicator.mode-auto-place::before{
background: var(--color-primary);
}
/* help FAB (bottom-left) — paper FAB w/ deep-teal "?" */
#civix-help-fab{
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--color-surface);
box-shadow: var(--sh-2);
border: none;
cursor: pointer;
color: var(--color-primary-hover);
font-family: var(--font-display);
font-weight: var(--fw-bold);
font-size: 1.15rem;
display: grid;
place-items: center;
transition: transform var(--dur) var(--ease),
box-shadow var(--dur) var(--ease);
}
#civix-help-fab:hover{
transform: translateY(-2px) scale(1.05);
box-shadow: var(--sh-3);
}
#civix-help-fab:focus-visible{
outline: 3px solid var(--color-primary-bright);
outline-offset: 3px;
}
/* help nudge bubble */
#civix-help-nudge{
background: var(--color-primary-hover);
color: var(--cv-on-band);
border: none;
border-radius: var(--r);
box-shadow: var(--sh-2);
font-family: var(--font-body);
font-size: .8rem;
font-weight: var(--fw-medium);
padding: 8px 12px;
}
#civix-help-nudge kbd{
background: rgb(255 255 255 / .16);
border: 1px solid rgb(255 255 255 / .28);
border-radius: 5px;
padding: 1px 6px;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: .75rem;
color: var(--cv-on-band);
}
/* select chip (N selected) — engaged aqua chip */
#civix-select-chip{
background: var(--cv-aqua-wash);
color: var(--color-primary-hover);
border: 1px solid var(--cv-aqua-wash-2);
border-radius: var(--r-pill);
box-shadow: var(--sh-1);
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: .8rem;
padding: 6px 14px;
}
/* api-status chip — neutral paper pill (JS sets text + inline color on err) */
#api-status{
font-family: var(--font-body);
font-weight: var(--fw-semibold);
font-size: .72rem;
letter-spacing: .02em;
color: var(--color-text-faint);
background: var(--color-surface-sink);
border-radius: var(--r-pill);
padding: 4px 11px;
}
/* ============================================================================
C4. ON-MAP COMMENT POPUPS — Leaflet popup .civix-comment-popup
----------------------------------------------------------------------------
Re-skin Leaflet's default popup chrome (wrapper/tip/close) + the civix card.
============================================================================ */
.civix-comment-popup .leaflet-popup-content-wrapper{
background: var(--color-surface);
border-radius: var(--r-lg);
box-shadow: var(--sh-3);
padding: 0;
overflow: hidden;
}
.civix-comment-popup .leaflet-popup-content{
margin: 0;
width: auto !important;
line-height: var(--lh-base);
}
.civix-comment-popup .leaflet-popup-tip{
background: var(--color-surface);
box-shadow: var(--sh-2);
}
.civix-comment-popup a.leaflet-popup-close-button{ display: none; }
/* card shell */
.civix-cp-card{
background: var(--color-surface);
font-family: var(--font-body);
color: var(--color-text);
width: 300px;
max-width: 100%;
}
.civix-cp-scroll{ max-height: 360px; overflow-y: auto; padding: 14px 15px 0; }
.civix-cp-composer{ padding: 0; }
/* header (root + composer title) */
.civix-cp-header{
display: flex;
align-items: center;
gap: 8px;
padding: 13px 15px 0;
}
.civix-cp-scroll .civix-cp-header{ padding: 0 0 6px; }
.civix-cp-header--tombstone{ opacity: .85; }
.civix-cp-avatar{
width: 26px;
height: 26px;
border-radius: 50%;
flex: none;
display: grid;
place-items: center;
font-family: var(--font-display);
font-weight: var(--fw-bold);
font-size: .64rem;
color: var(--color-on-primary);
background: linear-gradient(150deg, var(--color-primary), var(--color-primary-hover));
}
.civix-cp-avatar--small{ width: 22px; height: 22px; font-size: .58rem; }
.civix-cp-avatar--tombstone{
background: var(--color-surface-sink);
color: var(--color-text-faint);
}
.civix-cp-author{
flex: 1;
font-family: var(--font-body);
font-weight: var(--fw-bold);
font-size: .84rem;
color: var(--color-text);
min-width: 0;
}
.civix-cp-author--small{ font-size: .8rem; }
.civix-cp-composer .civix-cp-author{
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: .96rem;
}
.civix-cp-time{ font-size: .7rem; color: var(--color-text-faint); }
.civix-cp-close{
border: none;
background: transparent;
color: var(--color-text-faint);
cursor: pointer;
width: 26px;
height: 26px;
border-radius: var(--r-sm);
display: grid;
place-items: center;
font-size: 1.15rem;
line-height: 1;
transition: background var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease);
}
.civix-cp-close:hover{
background: var(--color-surface-sink);
color: var(--color-text-soft);
}
/* body */
.civix-cp-body{ padding: 8px 0 4px; }
.civix-cp-body p{
margin: 0;
font-size: .86rem;
color: var(--color-text-soft);
line-height: 1.45;
}
.civix-cp-removed-body{ font-style: italic; color: var(--color-text-faint) !important; }
/* meta row — votes + replies pill + delete */
.civix-cp-meta{ display: flex; align-items: center; gap: 8px; padding: 4px 0 10px; }
.civix-cp-meta--inline{ padding: 2px 0 0; }
/* vote chip pair */
.civix-cp-vote{
display: inline-flex;
align-items: center;
gap: 4px;
background: var(--color-surface-sink);
border: none;
border-radius: var(--r-pill);
padding: 3px 9px;
cursor: pointer;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: .74rem;
color: var(--color-text-soft);
transition: color var(--dur-fast) var(--ease),
background var(--dur-fast) var(--ease);
}
.civix-cp-vote:hover{ color: var(--color-primary-hover); }
.civix-cp-vote .civix-cp-vote-arrow{ color: var(--color-text-faint); transition: color var(--dur-fast) var(--ease); }
.civix-cp-vote:hover .civix-cp-vote-arrow{ color: var(--color-primary); }
.civix-cp-vote--active .civix-cp-vote-arrow{ color: var(--color-primary); }
.civix-cp-vote--down.civix-cp-vote--active .civix-cp-vote-arrow{ color: var(--color-accent); }
.civix-cp-vote--frozen{
opacity: .6;
cursor: default;
pointer-events: none;
}
.civix-cp-vote--was-mine .civix-cp-vote-arrow{ color: var(--color-primary); }
.civix-cp-vote--down.civix-cp-vote--was-mine .civix-cp-vote-arrow{ color: var(--color-accent); }
.civix-cp-replies-pill{
display: inline-flex;
align-items: center;
gap: 5px;
font-size: .74rem;
font-weight: var(--fw-semibold);
color: var(--color-text-faint);
}
.civix-cp-delete-btn{
margin-left: auto;
border: none;
background: transparent;
color: var(--color-danger);
cursor: pointer;
font-family: var(--font-body);
font-weight: var(--fw-semibold);
font-size: .74rem;
padding: 4px 9px;
border-radius: var(--r-sm);
transition: background var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease);
}
.civix-cp-delete-btn:hover{
background: var(--color-danger);
color: var(--cv-white);
}
/* divider between root + replies */
.civix-cp-divider{
height: 1px;
background: var(--color-border);
margin: 6px 0 10px;
}
/* reply cards */
.civix-cp-reply{
background: var(--color-bg);
border-radius: var(--r);
box-shadow: var(--sh-1);
padding: 10px 12px;
margin: 0 0 9px 16px;
}
.civix-cp-reply--tombstone{
background: var(--color-surface-sink);
box-shadow: none;
display: flex;
align-items: center;
gap: 7px;
flex-wrap: wrap;
}
.civix-cp-reply-header{ display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.civix-cp-reply-body{
margin: 0;
font-size: .84rem;
color: var(--color-text-soft);
line-height: 1.45;
}
.civix-cp-tombstone-author{ font-weight: var(--fw-bold); font-size: .8rem; color: var(--color-text-faint); }
.civix-cp-tombstone-label{ font-size: .74rem; font-style: italic; color: var(--color-text-faint); }
.civix-cp-tombstone-votes{ display: inline-flex; gap: 6px; margin-left: auto; }
/* reply / composer form (sticky bottom of card) */
.civix-cp-form{
padding: 11px 15px 14px;
background: var(--color-surface);
border-top: 1px solid var(--color-border);
}
.civix-cp-composer .civix-cp-form{ border-top: none !important; }
.civix-cp-textarea-wrap{ position: relative; }
.civix-cp-textarea{
width: 100%;
box-sizing: border-box;
font-family: var(--font-body);
font-size: .88rem;
color: var(--color-text);
background: var(--color-surface);
border: var(--bw-strong) solid var(--color-border-strong);
border-radius: var(--r);
padding: 10px 12px;
line-height: 1.5;
resize: vertical;
transition: border-color var(--dur-fast) var(--ease),
box-shadow var(--dur-fast) var(--ease),
background var(--dur-fast) var(--ease);
}
.civix-cp-textarea::placeholder{ color: var(--color-text-faint); }
.civix-cp-textarea:focus{
outline: none;
border-color: var(--color-primary);
background: var(--cv-white);
box-shadow: 0 0 0 4px var(--cv-aqua-wash);
}
.civix-cp-textarea--with-emoji{ padding-left: 42px; }
.civix-cp-textarea-emoji-btn{
position: absolute;
left: 9px;
bottom: 9px;
width: 26px;
height: 26px;
border: none;
background: transparent;
cursor: pointer;
display: grid;
place-items: center;
color: var(--color-text-faint);
border-radius: var(--r-sm);
transition: background var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease);
}
.civix-cp-textarea-emoji-btn:hover{
background: var(--color-surface-sink);
color: var(--color-text-soft);
}
.civix-cp-form-actions{
display: flex;
gap: 8px;
justify-content: flex-end;
margin-top: 11px;
}
/* popup buttons → soft cards / primary CTA */
.civix-cp-btn{
border: none;
border-radius: var(--r-pill);
font-family: var(--font-body);
font-weight: var(--fw-bold);
font-size: .82rem;
padding: 8px 16px;
cursor: pointer;
transition: background var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease),
box-shadow var(--dur-fast) var(--ease),
transform var(--dur-fast) var(--ease);
}
.civix-cp-btn--secondary{
background: var(--cv-white);
color: var(--color-text-soft);
box-shadow: var(--sh-1);
}
.civix-cp-btn--secondary:hover{
color: var(--color-primary-hover);
transform: translateY(-1px);
box-shadow: var(--sh-2);
}
.civix-cp-btn--primary{
background: var(--color-primary-strong);
color: var(--color-on-primary);
box-shadow: var(--sh-primary);
}
.civix-cp-btn--primary:hover{
background: var(--color-primary-strong-hover);
transform: translateY(-1px);
}
.civix-cp-btn:focus-visible{
outline: 3px solid var(--color-primary-bright);
outline-offset: 2px;
}
.civix-cp-btn:disabled{
opacity: .5;
cursor: not-allowed;
transform: none !important;
box-shadow: none;
}
/* ============================================================================
C5. MODAL CHROME — shared .modal-overlay / .modal-card / head / body / foot
----------------------------------------------------------------------------
style.css defines these with the legacy navy palette; re-skin here. Inline
widths on .modal-card (480/520/360/560px) are preserved (untouched).
============================================================================ */
.modal-overlay{
background: rgb(var(--cv-band-2-rgb) / .45) !important;
backdrop-filter: blur(3px);
/* NOTE: z-index intentionally NOT overridden — style.css sets 10000 so the
overlay clears the editor chrome (right panel, palette). The mockup's
--z-modal:61 is for a different stacking context and would render the card
behind the editor UI. */
}
.modal-card{
background: var(--color-surface) !important;
border: 1px solid var(--color-border) !important;
border-radius: var(--r-xl) !important;
box-shadow: var(--sh-3) !important;
}
.modal-header,
.modal-card .modal-header{
padding: 22px 26px 14px;
border-bottom: 1px solid var(--color-border);
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: 1.05rem;
color: var(--color-text);
}
.modal-card .modal-header h2,
.modal-card .modal-header h3,
.modal-card .modal-header .modal-title{
font-family: var(--font-display);
font-weight: var(--fw-semibold);
letter-spacing: -.015em;
color: var(--color-text);
margin: 0;
}
.modal-close{
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid var(--color-border);
background: var(--color-bg);
color: var(--color-text-soft);
display: grid;
place-items: center;
font-size: 1.05rem;
line-height: 1;
cursor: pointer;
padding: 0;
transition: background var(--dur) var(--ease),
color var(--dur) var(--ease),
transform var(--dur) var(--ease);
}
.modal-close:hover{
background: var(--color-surface-sink);
color: var(--color-text);
transform: rotate(90deg);
}
.modal-body,
.modal-card .modal-body{
padding: 20px 26px;
gap: 16px;
}
/* Tall-content scroll fix: the body is a flex column with overflow-y:auto, but its
children default to flex-shrink:1 — so on a short viewport flex CRUSHES the last/
tallest child (the .ps-danger-zone) instead of letting the body scroll. Because the
danger-zone has overflow:hidden (corner seal), the squeezed-off Delete section gets
clipped and becomes unreachable. Pinning children to flex-shrink:0 keeps their
natural height so the body actually overflows and scrolls. Applies to all modals. */
.modal-card .modal-body > *{
flex-shrink: 0;
}
.modal-footer,
.modal-card .modal-footer{
padding: 16px 26px 22px;
gap: 12px;
border-top: 1px solid var(--color-border);
}
/* modal form fields */
.modal-field label{
font-family: var(--font-body);
font-weight: var(--fw-bold);
font-size: .8rem;
letter-spacing: .01em;
text-transform: none;
color: var(--color-text);
}
.modal-field input,
.modal-field select,
.modal-card .modal-body input[type="text"],
.modal-card .modal-body input[type="email"],
.modal-card .modal-body textarea{
font-family: var(--font-body);
font-size: .94rem;
color: var(--color-text);
background: var(--color-surface) !important;
border: var(--bw-strong) solid var(--color-border-strong) !important;
border-radius: var(--r) !important;
padding: 11px 13px !important;
transition: border-color var(--dur-fast) var(--ease),
box-shadow var(--dur-fast) var(--ease),
background var(--dur-fast) var(--ease);
}
.modal-field input:focus,
.modal-field select:focus,
.modal-card .modal-body input[type="text"]:focus,
.modal-card .modal-body input[type="email"]:focus,
.modal-card .modal-body textarea:focus{
outline: none;
border-color: var(--color-primary) !important;
background: var(--cv-white) !important;
box-shadow: 0 0 0 4px var(--cv-aqua-wash);
}
.modal-field input::placeholder,
.modal-card .modal-body textarea::placeholder,
.modal-card .modal-body input::placeholder{ color: var(--color-text-faint); }
/* styled select arrow */
.modal-field select,
.modal-card .modal-body select{
appearance: none;
-webkit-appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, var(--color-text-soft) 50%),
linear-gradient(135deg, var(--color-text-soft) 50%, transparent 50%) !important;
background-position:
calc(100% - 18px) 52%,
calc(100% - 13px) 52% !important;
background-size: 5px 5px, 5px 5px !important;
background-repeat: no-repeat !important;
padding-right: 38px !important;
cursor: pointer;
}
/* modal buttons (override the legacy !important rules in style.css) */
.modal-card .btn-primary,
.modal-footer .btn-primary{
background: var(--color-primary-strong) !important;
color: var(--color-on-primary) !important;
border: none !important;
border-radius: var(--r-pill) !important;
font-family: var(--font-body);
font-weight: var(--fw-bold);
font-size: .9rem;
padding: 10px 20px;
box-shadow: var(--sh-primary);
cursor: pointer;
transition: background var(--dur-fast) var(--ease),
transform var(--dur-fast) var(--ease);
}
.modal-card .btn-primary:hover,
.modal-footer .btn-primary:hover{
background: var(--color-primary-strong-hover) !important;
transform: translateY(-1px);
}
.modal-card .btn-secondary,
.modal-footer .btn-secondary{
background: var(--cv-white) !important;
color: var(--color-text-soft) !important;
border: var(--bw-strong) solid var(--color-border-strong) !important;
border-radius: var(--r-pill) !important;
font-family: var(--font-body);
font-weight: var(--fw-bold);
font-size: .9rem;
padding: 10px 20px;
cursor: pointer;
transition: background var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease),
transform var(--dur-fast) var(--ease);
}
.modal-card .btn-secondary:hover,
.modal-footer .btn-secondary:hover{
background: var(--color-surface) !important;
border-color: var(--color-primary) !important;
color: var(--color-primary-hover) !important;
transform: translateY(-1px);
}
.modal-card .btn-danger,
.modal-footer .btn-danger{
background: var(--color-danger) !important;
color: var(--cv-white) !important;
border: none !important;
border-radius: var(--r-pill) !important;
font-family: var(--font-body);
font-weight: var(--fw-bold);
box-shadow: 0 8px 20px rgb(var(--cv-danger-rgb) / .22);
}
.modal-card .btn-danger:hover,
.modal-footer .btn-danger:hover{
background: var(--color-danger-hover) !important;
}
.modal-card .btn-primary:focus-visible,
.modal-card .btn-secondary:focus-visible,
.modal-card .btn-danger:focus-visible{
outline: 3px solid var(--color-primary-bright);
outline-offset: 2px;
}
/* ============================================================================
C6. PROJECT SETTINGS MODAL (T6) — toggle · thumbnail · DANGER ZONE
----------------------------------------------------------------------------
Several controls carry inline styles in index.html → overridden with
!important and re-pointed to system tokens. The Published toggle is driven
by JS inline (knob translateX, slider on/off bg); we restyle the base + the
:checked ON state via the sibling selector and never touch knob `transform`.
============================================================================ */
#project-settings-modal #ps-description{
font-family: var(--font-body) !important;
font-size: .94rem !important;
color: var(--color-text) !important;
background: var(--color-surface) !important;
border: var(--bw-strong) solid var(--color-border-strong) !important;
border-radius: var(--r) !important;
padding: 11px 13px !important;
}
/* thumbnail upload area (dropzone) */
#thumbnail-upload-area{
border: var(--bw-strong) dashed var(--color-border-strong) !important;
border-radius: var(--r) !important;
background: var(--color-bg) !important;
padding: 22px !important;
transition: border-color var(--dur-fast) var(--ease),
background var(--dur-fast) var(--ease);
}
#thumbnail-upload-area:hover{
border-color: var(--color-primary) !important;
background: var(--cv-aqua-wash) !important;
}
#thumbnail-placeholder{
color: var(--color-text-faint) !important;
font-family: var(--font-body);
font-weight: var(--fw-medium);
}
#thumbnail-placeholder svg{ stroke: var(--color-text-faint); }
#thumbnail-preview{ border-radius: var(--r-sm) !important; box-shadow: var(--sh-1); }
/* Published toggle — base track + knob (knob transform stays JS-owned) */
#project-settings-modal #ps-toggle-slider{
background: var(--color-border-strong) !important;
border-radius: var(--r-pill) !important;
}
/* ON state keyed off the real checkbox so JS state + visual stay in sync */
#project-settings-modal #ps-published:checked ~ #ps-toggle-slider{
background: var(--color-primary) !important;
}
#project-settings-modal #ps-toggle-knob{
background: var(--cv-white) !important;
box-shadow: var(--sh-1) !important;
}
#ps-status-label{
font-family: var(--font-body);
font-weight: var(--fw-semibold);
font-size: .86rem;
}
/* DANGER ZONE — clearly-fenced destructive area (mockup .danger) */
/* the wrapper is the inline-styled div holding the "Danger Zone" heading;
target it via :has() so no markup hook is needed */
#project-settings-modal .modal-body > div:has(> #ps-delete-confirm),
#project-settings-modal .modal-body > div:has(#ps-delete-btn){
border: var(--bw-strong) solid var(--cv-danger-line) !important;
border-radius: var(--r) !important;
background: var(--cv-danger-wash) !important;
padding: 18px !important;
}
/* the "Danger Zone" heading line (first child div w/ the red label) */
#project-settings-modal .modal-body > div:has(#ps-delete-btn) > div:first-child{
font-family: var(--font-body) !important;
font-weight: var(--fw-extra) !important;
letter-spacing: .03em;
text-transform: uppercase;
font-size: .82rem !important;
color: var(--color-danger-hover) !important;
}
/* dashed sub-divider before the wipe section */
#ps-wipe-section{ border-top: 1px dashed var(--cv-danger-line) !important; }
/* type-to-confirm inputs sit in their own .modal-field, already covered above,
but ensure the danger inputs read as part of the fenced area on focus */
#ps-delete-confirm:focus,
#ps-wipe-confirm:focus{
border-color: var(--color-danger) !important;
box-shadow: 0 0 0 4px rgb(var(--cv-danger-rgb) / .14) !important;
}
/* delete + wipe buttons — clear red destructive controls */
#ps-delete-btn,
#ps-wipe-btn{
background: var(--color-danger) !important;
color: var(--cv-white) !important;
border: none !important;
border-radius: var(--r-pill) !important;
font-family: var(--font-body) !important;
font-weight: var(--fw-bold) !important;
font-size: .88rem !important;
padding: 10px !important;
box-shadow: 0 8px 20px rgb(var(--cv-danger-rgb) / .22) !important;
transition: background var(--dur-fast) var(--ease),
opacity var(--dur-fast) var(--ease) !important;
}
/* enabled hover/active: intensify gently within the faded red family —
a touch deeper than the resting wash, but still clearly translucent
(no snap to solid --color-danger-hover, which read as a jarring flash) */
#ps-delete-btn:hover:not(:disabled),
#ps-wipe-btn:hover:not(:disabled),
#ps-delete-btn:active:not(:disabled),
#ps-wipe-btn:active:not(:disabled){
background: rgb(var(--cv-danger-rgb) / .18) !important;
color: var(--color-danger) !important;
}
/* disabled (type-to-confirm not yet armed) reads as a clearly inert state */
#ps-delete-btn:disabled,
#ps-wipe-btn:disabled{
background: var(--cv-danger-wash) !important;
color: var(--color-danger) !important;
box-shadow: none !important;
border: var(--bw-strong) solid var(--cv-danger-line) !important;
opacity: .85 !important;
cursor: not-allowed !important;
}
/* ============================================================================
C7. SHORTCUTS MODAL — kbd grid
============================================================================ */
#shortcuts-modal .modal-header h3{
font-family: var(--font-display);
font-weight: var(--fw-semibold);
color: var(--color-text);
}
#shortcuts-modal #shortcuts-close{ color: var(--color-text-faint) !important; }
#shortcuts-modal #shortcuts-close:hover{ color: var(--color-text) !important; }
.shortcut-row{
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-body);
font-size: .84rem;
color: var(--color-text-soft);
}
.shortcut-row span{ color: var(--color-text-soft); }
.shortcut-row kbd{
display: inline-grid;
place-items: center;
min-width: 22px;
padding: 3px 7px;
background: var(--color-bg);
border: 1px solid var(--color-border-strong);
border-bottom-width: 2px;
border-radius: var(--r-sm);
box-shadow: var(--sh-1);
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: .74rem;
color: var(--color-text);
line-height: 1.2;
}
/* ============================================================================
C8. TEAM MODAL — collaborator rows / invite / pending chips
============================================================================ */
#team-invite-section{ border-top: 1px solid var(--color-border); }
#team-invite-section #invite-email-input{
background: var(--color-surface) !important;
border: var(--bw-strong) solid var(--color-border-strong) !important;
border-radius: var(--r) !important;
color: var(--color-text) !important;
font-family: var(--font-body);
padding: 10px 13px !important;
}
#team-invite-section #invite-email-input:focus{
outline: none;
border-color: var(--color-primary) !important;
box-shadow: 0 0 0 4px var(--cv-aqua-wash);
}
#team-invite-section #invite-send-btn{
background: var(--color-primary-strong) !important;
color: var(--color-on-primary) !important;
border-radius: var(--r-pill) !important;
font-family: var(--font-body);
font-weight: var(--fw-bold);
box-shadow: var(--sh-primary);
}
#team-invite-section #invite-send-btn:hover{ background: var(--color-primary-strong-hover) !important; }
#invite-copy-btn{
border: var(--bw-strong) solid var(--color-border-strong) !important;
border-radius: var(--r-pill) !important;
background: var(--cv-white) !important;
color: var(--color-text-soft) !important;
font-family: var(--font-body);
font-weight: var(--fw-semibold);
}
#invite-copy-btn:hover{ color: var(--color-primary-hover) !important; border-color: var(--color-primary) !important; }
#invite-error{ color: var(--color-danger) !important; }
/* role / status chips inside team rows (status-chip + role-chip variants) */
#team-modal-body .role-chip,
#team-modal-body .status-chip{
font-family: var(--font-display);
font-weight: var(--fw-semibold);
font-size: .68rem;
letter-spacing: .04em;
text-transform: uppercase;
border-radius: var(--r-pill);
padding: 4px 10px;
}
/* ============================================================================
C9. MERGE MODAL
============================================================================ */
#merge-modal #merge-source-name{
background: var(--color-surface-sink) !important;
color: var(--color-text-soft) !important;
cursor: default;
}
/* ============================================================================
C10. SHARE POPOVER (NOT a modal-overlay — fixed dark card → warm card)
============================================================================ */
#share-popover{
background: var(--color-surface) !important;
border: 1px solid var(--color-border) !important;
border-radius: var(--r-lg) !important;
box-shadow: var(--sh-3) !important;
padding: 14px 16px !important;
}
#share-popover #share-popover-label{
color: var(--color-text-faint) !important;
font-family: var(--font-body);
font-weight: var(--fw-semibold);
}
#share-popover #share-url-input{
background: var(--color-bg) !important;
border: var(--bw-strong) solid var(--color-border-strong) !important;
border-radius: var(--r-sm) !important;
color: var(--color-text) !important;
font-family: var(--font-display) !important;
font-size: .82rem !important;
padding: 8px 10px !important;
}
#share-popover #share-copy-btn{
background: var(--color-primary-strong) !important;
color: var(--color-on-primary) !important;
border: none !important;
border-radius: var(--r-pill) !important;
font-family: var(--font-body);
font-weight: var(--fw-bold);
box-shadow: var(--sh-primary);
}
#share-popover #share-copy-btn:hover{ background: var(--color-primary-strong-hover) !important; }
/* ============================================================================
C11. NEW-PROJECT MODAL (JS-built, fully inline-styled markup)
----------------------------------------------------------------------------
Built in app.js with inline styles on the input + Cancel/Create buttons.
Re-point via !important by id. The .modal-overlay/.modal-card chrome it
reuses is already covered by C5.
============================================================================ */
#new-proj-close{ color: var(--color-text-faint) !important; }
#new-proj-close:hover{ color: var(--color-text) !important; }
#new-proj-input{
background: var(--color-surface) !important;
border: var(--bw-strong) solid var(--color-border-strong) !important;
border-radius: var(--r) !important;
color: var(--color-text) !important;
font-family: var(--font-body) !important;
font-size: .94rem !important;
padding: 11px 13px !important;
}
#new-proj-input:focus{
outline: none !important;
border-color: var(--color-primary) !important;
box-shadow: 0 0 0 4px var(--cv-aqua-wash) !important;
}
#new-proj-cancel{
background: var(--cv-white) !important;
border: var(--bw-strong) solid var(--color-border-strong) !important;
border-radius: var(--r-pill) !important;
color: var(--color-text-soft) !important;
font-family: var(--font-body) !important;
font-weight: var(--fw-bold) !important;
padding: 9px 18px !important;
}
#new-proj-cancel:hover{ border-color: var(--color-primary) !important; color: var(--color-primary-hover) !important; }
#new-proj-create{
background: var(--color-primary-strong) !important;
border: none !important;
border-radius: var(--r-pill) !important;
color: var(--color-on-primary) !important;
font-family: var(--font-body) !important;
font-weight: var(--fw-bold) !important;
padding: 9px 18px !important;
box-shadow: var(--sh-primary) !important;
}
#new-proj-create:hover{ background: var(--color-primary-strong-hover) !important; }
/* ============================================================================
C12. CONTEXTUAL POPOVERS — zone variants · object · emoji picker
============================================================================ */
.contextual-modal{
background: var(--color-surface) !important;
border: 1px solid var(--color-border) !important;
border-radius: var(--r) !important;
box-shadow: var(--sh-3) !important;
padding: 8px !important;
}
/* zone variant tiles */
.contextual-modal .zone-variant-tile{
border: none !important;
background: var(--cv-white) !important;
border-radius: var(--r-sm) !important;
box-shadow: var(--sh-1) !important;
color: var(--color-text-soft) !important;
font-family: var(--font-body);
font-weight: var(--fw-semibold);
transition: transform var(--dur-fast) var(--ease),
box-shadow var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease),
background var(--dur-fast) var(--ease) !important;
}
.contextual-modal .zone-variant-tile:hover{
background: var(--cv-aqua-wash) !important;
color: var(--color-primary-hover) !important;
box-shadow: var(--sh-2) !important;
}
.contextual-modal .zone-var-icon{ color: inherit; }
/* object modal header + preset tiles */
#contextual-object-modal .pack-card-header{
font-family: var(--font-body);
font-weight: var(--fw-bold);
font-size: .7rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--color-text-faint);
}
.contextual-modal .preset-tile{
border: none !important;
background: var(--cv-white) !important;
border-radius: var(--r-sm) !important;
box-shadow: var(--sh-1) !important;
transition: transform var(--dur-fast) var(--ease),
box-shadow var(--dur-fast) var(--ease),
background var(--dur-fast) var(--ease) !important;
}
.contextual-modal .preset-tile:hover{
background: var(--cv-aqua-wash) !important;
box-shadow: var(--sh-2) !important;
transform: translateY(-1px);
}
.contextual-modal .preset-label{
font-family: var(--font-body);
font-weight: var(--fw-semibold);
color: var(--color-text-soft);
}
/* emoji picker shell — keep zero padding (overrides C12 base) */
#emoji-picker-modal{ padding: 0 !important; }
#emoji-picker-modal emoji-picker{
--background: var(--color-surface);
--border-color: var(--color-border);
--indicator-color: var(--color-primary);
--input-border-color: var(--color-border-strong);
--input-font-color: var(--color-text);
--button-active-background: var(--cv-aqua-wash);
--button-hover-background: rgb(var(--cv-turquoise-rgb) / .08);
border-radius: var(--r);
}
/* ============================================================================
████ SUB-TASK D — THEME DEPTH PASS (close the "flat vs mock" gap) ████
----------------------------------------------------------------------------
FOUNDER FEEDBACK: "the mockup canvas/editor was a lot more stylized-with-the-
theme than the current canvas." The B/C passes restyled every control onto the
token system but landed conservative/flat versus the approved mockup
(tmp/firstrun-mocks/final/canvas.html + canvas.css + civix.css).
This pass adds the mockup's THEMING that was missing, NOT new layout:
D1. Warm body ATMOSPHERE — radial turquoise/terracotta gradient mesh +
faint paper grain. The design system ships this on `body.cv::before`
but the editor has no `.cv` class, so the app rendered on a flat
solid fill. Re-applied here on the bare editor body (restyle only).
D2. MAP DUOTONE — the signature teal/paper tile wash from civix.css's
`.cv-map`. The live Leaflet map showed raw CartoDB grey tiles (filter:
none). This re-tints ONLY the tile IMGs + seals the colour with
multiply/screen overlays scoped to the tile-pane, so drawn elements,
markers, popups and controls (higher Leaflet panes) stay true-colour
and fully interactive (pointer-events:none on the seals).
D3. DEPTH + WARMTH — richer layered elevation + hover lift on the soft
cards (draw tools, packs, layer/element/prop/comment cards) and warmer
pack-header / section-label treatment to match the mock's rhythm.
RULES (unchanged): RESTYLE ONLY. No markup, no #id/.class removed, no
`display`/`visibility` on JS-toggled containers. Tokens only; rgba via the
--cv-*-rgb channel tokens (no hardcoded brand hex).
============================================================================ */
/* ============================================================================
D1. WARM BODY ATMOSPHERE — gradient mesh + paper grain behind the app
----------------------------------------------------------------------------
Mirrors civix.css `body{ background-image: radial-gradient(...) }` + the
`body::before` fractal-noise grain. Editor chrome (topbar/palette/panes) is
opaque paper and sits above; the wash only shows through panel gaps + the map
frame edges, exactly like the mock. position:fixed grain, pointer-events:none.
============================================================================ */
body{
background-color: var(--color-bg);
/* Cool teal-only atmosphere. The old second radial used terracotta (#964734)
which cast a brown tint through panel gaps + the map frame edges, clashing
with the warm-paper scheme. Swapped to a faint aqua so the surround reads
warm-paper + teal, never brown. */
background-image:
radial-gradient(1200px 600px at 82% -12%, rgb(var(--cv-turquoise-rgb) / .09), transparent 60%),
radial-gradient(900px 500px at -10% 8%, rgb(var(--cv-aqua-rgb) / .06), transparent 55%);
background-attachment: fixed;
}
body::before{
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: .5;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}
/* keep the editor chrome painting ABOVE the fixed grain layer */
/* z-index ladder (all ≥1 so they clear the body grain at z-index:0):
body grain (0) < #map-stage (1) < panels & their overflowing popovers (2)
The panels MUST out-stack #map-stage — their contextual popovers
(#emoji-picker-modal / #contextual-zone-modal / #contextual-object-modal,
.contextual-modal z-index:1200 in style.css) are children of #left-panel and
overflow into the map area; if the panels sat at the SAME z-index as the map,
the map (a later sibling stacking context) would paint OVER them. Full-screen
.modal-overlay scrims (z-index:10000) still cover everything. */
#map-stage{ position: relative; z-index: 1; }
#left-panel,
#right-panel,
.pane-strip{ position: relative; z-index: 2; }
#topbar{ position: relative; z-index: 20; } /* above side panels so the user dropdown overlays the right pane */
/* ============================================================================
D2. CLEAN TRUE-COLOUR MAP + RESTRAINED BRANDED FRAME (Framed Canvas)
----------------------------------------------------------------------------
FOUNDER REVERSAL: the heavy teal map duotone ("grungy, saturated CRT") is
REMOVED ENTIRELY. The map now renders true-colour + fully legible on all
three basemaps (CartoDB Light, OSM Street, Esri Satellite) — no tile filter,
no multiply/screen seals, no per-basemap :has() guards (all dead once the
base tint is gone). Brand warmth now lives in the chrome AROUND the map
(D2b chrome pass below) and in a restrained inset frame on the viewport.
============================================================================ */
/* behind-tiles fill: neutral warm paper so tile-load gaps read clean (not the
old ~55% aqua flash). #map carries Leaflet's `.leaflet-container{background:#ddd}`,
so this id+id selector out-specifies it (the live map element is #map inside
#map-stage). Channel-free named token. */
#map-stage #map{ background: var(--cv-paper); }
/* RESTRAINED BRANDED FRAME — a subtle layered inset on the map viewport. Costs
zero map area (pointer-events:none). Four quiet layers, outer→inner:
1. crisp 1px matte hairline (border-strong) — defines the edge
2. thin warm paper mat band (~4px, surface) — a framed-print mat
3. VERY subtle deep-teal edge-vignette (≤8% alpha, narrow ~20px, feathered
to nothing well before centre) — invisible until looked for, NOT vintage
4. soft top depth shadow — the map sits slightly inset under the chrome
Inset box-shadows stack outer-first; spreads grow inward so the order reads
hairline → mat → vignette from the edge. */
#map-stage::after{
content: "";
position: absolute;
inset: 0;
z-index: 5; /* above tiles, below the control FABs (Leaflet controls are higher) */
pointer-events: none;
box-shadow:
inset 0 0 0 1px var(--color-border-strong), /* 1 matte hairline */
inset 0 0 0 5px var(--color-surface), /* 2 warm paper mat */
inset 0 0 20px 0 rgb(var(--cv-deep-teal-rgb) / .08), /* 3 teal edge-vignette (feathered) */
inset 0 9px 26px -6px rgb(var(--cv-ink-rgb) / .12); /* 4 soft top depth */
}
/* ============================================================================
D2b. WARM / TINTED CHROME — the brand surround for the clean map
----------------------------------------------------------------------------
Now that no map tint anchors the UI, the warmth lives in the chrome. Three
moves, all restyle-only (background / box-shadow / type colour — never
layout):
1. Nudge topbar + both side panels one step warmer onto --color-chrome
(#F1EFE7) — the single :root token added for this pass, so a future
rebrand re-points one var. Soft WHITE cards keep lifting off it
(contrast actually improves vs the lighter paper-card).
2. A faint teal "handshake" gradient on each panel intensifying toward the
MAP edge, so the clean map doesn't feel disconnected from the themed
chrome. Layered OVER the chrome fill; the opaque cards sit above it, so
the teal reads in the panel gutters near the seam. Very low alpha.
3. Strengthen the chrome→map SEAM to a low-alpha teal hairline + a soft
inner shadow falling toward the map.
============================================================================ */
/* 1+2 — warm chrome base + teal edge-handshake gradients (toward the map seam) */
#topbar{
background:
linear-gradient(to bottom,
rgb(var(--cv-turquoise-rgb) / .05),
transparent 60%),
var(--color-chrome);
}
#left-panel{ background: var(--color-chrome); }
#right-panel{ background: var(--color-chrome); }
/* sub-surfaces inside the panels that were pinned to --color-surface now read a
touch warmer too, so headers/tab-bars/footers don't reveal the seam as a
colour step against the chrome. Kept on the chrome token (rebrand-safe). */
.left-project-header,
.draw-tools-row,
.draw-tools-secondary-row,
#tab-bar,
.panel-footer{ background: var(--color-chrome); }
/* collapsed panels: drop the handshake gradient (no map seam to bridge) */
#left-panel.panel-collapsed,
#right-panel.panel-collapsed{ background: var(--color-chrome); }
/* 3 — chrome→map seams: low-alpha teal hairline + soft inner shadow toward map.
Left panel's seam is its right border; right panel's is its left border;
topbar's is its bottom border. */
#left-panel{
border-right: 1px solid rgb(var(--cv-turquoise-rgb) / .22);
box-shadow: inset -10px 0 18px -14px rgb(var(--cv-deep-teal-rgb) / .28);
}
#right-panel{
border-left: 1px solid rgb(var(--cv-turquoise-rgb) / .22);
box-shadow:
-1px 0 0 rgb(255 255 255 / .5),
inset 10px 0 18px -14px rgb(var(--cv-deep-teal-rgb) / .28),
var(--sh-1);
}
#topbar{
border-bottom: 1px solid rgb(var(--cv-turquoise-rgb) / .18);
}
/* ============================================================================
D2c. FLOATING SIDE PANELS (T1 of the 3-step panel redesign)
----------------------------------------------------------------------------
The two side panels are lifted OUT of the #app-layout flex row and become
floating modal-style cards over a now-full-width map — styled to match the
create.html "Set the scene" card family (paper surface, large radius, deep
shadow, edge margins). Collapse JS is UNTOUCHED this step (T2 will replace the
width-shrink with a fly animation).
This block is placed AFTER the D2b chrome-handshake rules above (which set
#left-panel/#right-panel box-shadow + map-seam borders for the OLD docked
layout) so it cleanly overrides them — a floating card has no map seam to
bridge, so those handshake shadows/borders are neutralized here.
Positioning: absolute relative to #app-layout (made position:relative below).
#app-layout already sits BELOW the masthead in the body flex column and keeps
overflow:hidden, so:
- panel top == an inset below the masthead (no topbar-height math needed)
- the later (T2) slide-out is naturally CLIPPED by #app-layout overflow:hidden.
#map-stage stays in the flex flow and now fills the whole row (full width)
because both panels are removed from flow.
z-index 1050 — ABOVE on-map FABs (400/700) + Leaflet controls (~1000), BELOW
.contextual-modal (1200, the panels' own popovers must clear the cards),
.modal-overlay (10000), the publish stamp (100000), the seal picker (100001). */
#app-layout{ position: relative; }
#left-panel,
#right-panel{
position: absolute;
top: 13px; /* inset below the masthead edge */
bottom: 14px; /* margin from the screen bottom */
z-index: 1050;
/* bounded track height so the right-panel flex chain
(tab-pane → element-panel → panel-footer) keeps the footer pinned and the
body scrolls INSIDE the card. top+bottom already bound it; cap as a guard. */
max-height: calc(100% - 27px); /* 13 (top) + 14 (bottom) */
/* floating card chrome — matches create.html "Set the scene" card, but tuned
for separation against the pale CartoDB Light basemap (default), which sits
at nearly the same luminance as --color-surface (#FBFAF6) and made the cards
read flat. Three subtle nudges, none overdone:
1) surface lifted to pure paper-white so it reads a hair brighter than the
cool map tiles (tonal lift without any tint),
2) crisper hairline — the stronger border token defines the card EDGE,
reinforced by an inset 1px white so the edge stays clean on satellite,
3) a slightly deeper, less-diffuse shadow so the card lifts off the map.
Editor-only override (#left/#right-panel); create.html's card is untouched. */
background: var(--cv-white);
border: var(--bw) solid var(--color-border-strong);
border-radius: var(--r-xl);
box-shadow:
inset 0 0 0 1px rgb(255 255 255 / .9),
0 4px 12px rgb(var(--cv-ink-rgb) / .10),
0 18px 44px rgb(var(--cv-ink-rgb) / .14);
overflow: hidden; /* clip card content to the rounded corners */
}
/* T2: fly animation transition */
#left-panel,
#right-panel{
transition: transform .32s var(--ease), opacity .32s var(--ease);
}
#left-panel{
left: 13px;
right: auto;
/* match the card's crisper edge (strong hairline) — this is the side that
faces the map, so it carries the visible card edge against the pale basemap */
border-right: var(--bw) solid var(--color-border-strong); /* override D2b seam border */
}
#right-panel{
right: 13px;
left: auto;
border-left: var(--bw) solid var(--color-border-strong); /* override D2b seam border */
}
/* T2: fly off-screen instead of width-shrink */
#left-panel.panel-collapsed{
width: 360px !important; min-width: 360px !important;
overflow: hidden;
border-radius: var(--r-xl); box-shadow: var(--sh-3);
transform: translateX(calc(-100% - 24px));
opacity: 0; pointer-events: none;
}
#right-panel.panel-collapsed{
width: 360px !important; min-width: 360px !important;
overflow: hidden;
border-radius: var(--r-xl); box-shadow: var(--sh-3);
transform: translateX(calc(100% + 24px));
opacity: 0; pointer-events: none;
}
/* T2: edge handle tabs — fly card back in when collapsed */
.panel-edge-handle{
position: absolute;
top: 70px;
z-index: 1040;
width: 26px; height: 46px;
display: grid; place-items: center;
background: var(--color-surface);
border: var(--bw) solid var(--color-border);
color: var(--color-text-faint);
box-shadow: var(--sh-2);
cursor: pointer;
opacity: 0; pointer-events: none;
transition: opacity .22s var(--ease), transform .22s var(--ease), background .15s var(--ease), color .15s var(--ease);
}
.panel-edge-handle--left{
left: 0;
border-left: none;
border-top-right-radius: var(--r-sm);
border-bottom-right-radius: var(--r-sm);
}
.panel-edge-handle--right{
right: 0;
border-right: none;
border-top-left-radius: var(--r-sm);
border-bottom-left-radius: var(--r-sm);
}
.panel-edge-handle:hover{
color: var(--color-primary-hover);
background: var(--color-surface-sink);
}
#app-layout.left-collapsed .panel-edge-handle--left{
opacity: 1; pointer-events: auto;
}
#app-layout.right-collapsed .panel-edge-handle--right{
opacity: 1; pointer-events: auto;
}
/* T2: suppress transition on initial load restore (also covers descendant handles) */
.no-anim,
.no-anim .panel-edge-handle{
transition: none !important;
}
/* T3: NARROW-SCREEN SANITY ─────────────────────────────────────────────────
style.css (~1623) hard-hides #left-panel with `display:none` at ≤900px — a
relic of the old docked flex layout. As a floating card that would leave the
left tools permanently unreachable (no handle, no chevron). Now that the card
floats over a full-width map, re-show it as a normal floating card on narrow
so its chevron + edge handle keep working exactly as on wide screens. We do
NOT build a bespoke mobile layout here — just guarantee the left tools stay
reachable. (editor-skin.css loads after style.css, so this wins.) */
@media (max-width: 900px){
#left-panel{ display: flex; }
}
/* ============================================================================
D3. DEPTH + WARMTH ENRICHMENT — soft-card elevation, hover lift, rhythm
----------------------------------------------------------------------------
The B/C passes used --sh-1 (very flat) on every resting card. The mock rests
cards a touch higher and lifts decisively on hover. Bump resting elevation
and warm the hover, matching canvas.css's `.tool / .pack / .layer / .prop-card`.
Only shadow/transform/background — never layout.
============================================================================ */
/* draw-tool cards — rest higher, lift on hover (mock .tool) */
.draw-tool-card{ box-shadow: var(--sh-2); }
.draw-tool-card:hover{ box-shadow: var(--sh-3); transform: translateY(-2px); }
.draw-tool-card.active{ box-shadow: var(--sh-primary); }
.draw-tool-card .draw-tool-icon svg,
.draw-tool-card svg{ filter: drop-shadow(0 1px 1px rgb(var(--cv-ink-rgb) / .06)); }
/* pack cards — rounded soft card with clear depth + warmer header divider */
.pack-card{
box-shadow: var(--sh-2);
transition: box-shadow .2s var(--ease);
}
.pack-card:hover{ box-shadow: var(--sh-3); }
.pack-card-header{
padding-bottom: 9px;
margin-bottom: 11px;
border-bottom: 1px solid var(--color-border);
}
/* section labels (DRAW / STARTER PACKS / OUTDOOR DINING …) — deeper teal-ink
so the headers read as themed dividers, not faint grey text (mock .pal-label) */
.draw-tools-row + *,
.packs-scroll .pack-card-header{ color: var(--color-text-faint); }
/* preset tiles — give resting depth + a more decisive lift (mock .preset) */
.preset-tile{ box-shadow: var(--sh-1); }
.preset-tile:hover{ box-shadow: var(--sh-2); transform: translateY(-2px); }
/* preset / element / panel type badges — align to the mock's 4-colour key
(Z = civic blue · L = violet · P = ochre · Object = turquoise) so the badge
palette reads intentional rather than all-teal. Channel-free named tokens. */
.preset-badge.zone,
.elem-type-badge.zone,
.panel-type-icon.type-zone,
.preset-badge.point,
.elem-type-badge.point,
.panel-type-icon.type-point{ color: var(--cv-white); }
.preset-badge.zone,
.elem-type-badge.zone,
.panel-type-icon.type-zone { background: var(--cv-deep-teal); }
.preset-badge.line,
.elem-type-badge.line,
.panel-type-icon.type-line { background: var(--cv-terracotta); }
.preset-badge.point,
.elem-type-badge.point,
.panel-type-icon.type-point { background: var(--cv-turquoise-strong); }
/* AA: white glyph/text needs the strong surface (#0A7B84 ≈ 5.03:1).
--color-primary (#0FA4AF) is only 3.02:1 and fails AA. */
.preset-badge.object,
.elem-type-badge.object,
.panel-type-icon.type-object { background: var(--color-primary-strong); }
/* layer cards — rest higher; element rows + prop cards gain real depth */
.layer-card{ box-shadow: var(--sh-2); }
.element-row{ box-shadow: var(--sh-1); }
.element-row:hover{ box-shadow: var(--sh-2); }
.prop-card{ box-shadow: var(--sh-2); }
.panel-header-card{ box-shadow: var(--sh-2); }
.civix-cp-catalog-card{ box-shadow: var(--sh-2); }
/* ----------------------------------------------------------------------------
FLOATING MAP CONTROLS → WARM BRAND CHIPS
Now that the map is clean true-colour (no tint to anchor them), the floating
instruments carry the teal. Bump elevation to --sh-3, give each chip a
warm-paper base + a faint aqua hairline inset (rgb(--cv-aqua / .5)) so they
read as confident brand chips, not flat overlays. The instruments carry the
teal; the map stays clean. Layout untouched (shadow/background/border only).
--------------------------------------------------------------------------- */
.leaflet-control-zoom.leaflet-bar,
.lock-map-control.leaflet-bar,
.basemap-control.leaflet-bar{
background: var(--cv-paper-card);
box-shadow:
inset 0 0 0 1px rgb(var(--cv-aqua-rgb) / .5),
var(--sh-3);
}
#mode-indicator{
background: var(--cv-paper-card);
box-shadow:
inset 0 0 0 1px rgb(var(--cv-aqua-rgb) / .5),
var(--sh-3);
}
/* armed draw / comment modes → brand ring so the pill reads as "armed". The
mode-tint backgrounds from C3 still apply; this strengthens the edge to the
primary hue (overrides the resting aqua hairline only when a mode is set). */
#mode-indicator.mode-comment,
#mode-indicator.mode-draw-line,
#mode-indicator.mode-draw-zone,
#mode-indicator.mode-draw-zone-rect,
#mode-indicator.mode-draw-zone-circle,
#mode-indicator.mode-draw-point,
#mode-indicator.mode-draw-object,
#mode-indicator.mode-auto-place{
box-shadow:
inset 0 0 0 1.5px var(--color-primary),
var(--sh-3);
}
/* Search FAB: solid, crisp control sitting ON the map — NOT a frosted lens.
There is no backdrop-filter here (the map is never actually blurred); the
"frosted" read came from a DOUBLED deep-teal drop (the big --sh-primary glow
PLUS an extra 0 2px 8px deep-teal layer) that hazed the map AROUND the FAB.
Drop the extra layer to match the mockup's `.search-fab` exactly, which uses
a single --sh-teal (identical to our --sh-primary). Stays AA-safe on
--color-primary-strong (white glyph ≈ 5:1). */
.search-control .search-toggle-btn{ box-shadow: var(--sh-primary); }
#civix-help-fab{
background: var(--cv-paper-card);
box-shadow:
inset 0 0 0 1px rgb(var(--cv-aqua-rgb) / .5),
var(--sh-3);
}
/* ============================================================================
T3. ON-MAP CONTROLS CLEAR THE FLOATING CARDS (step 3 of 3)
----------------------------------------------------------------------------
The map is now full-width and the side panels float OVER it as cards
(#left-panel: left 13 + width 360 → right edge ≈ 373px; #right-panel:
right 13 + width 360 → left edge ≈ 373px). The on-map instruments natively
pin to the map corners (Leaflet zoom top-left @10px; our custom search/lock/
basemap controls top-right @10px; the bottom-left FABs at ~12-16px) — so with
the cards IN they sit BEHIND the cards and are unreachable.
FIX: shift each side's controls into the visible map gutter just past the
card edge while the card is IN, and return them to the normal corner inset
when the card flies OUT. Driven reactively off the #app-layout collapse
classes the fly JS already toggles (.left-collapsed / .right-collapsed) — the
Leaflet control corners (.leaflet-top.leaflet-left / .leaflet-top.leaflet-right)
and the FABs are all descendants of #app-layout. The shift animates on the
SAME curve as the card fly (.32s var(--ease)) so the instruments glide WITH
the card. Only positional offset + transition — no layout reflow, no JS.
Centred instruments (#mode-indicator bottom-centre, .civix-select-chip
top-centre) are intentionally LEFT ALONE — they never collide with the cards.
Gutter offsets:
LEFT in → 386px (373 card edge + 13 gap) | out → 12px
RIGHT in → 386px (373 card edge + 13 gap) | out → 12px
The Leaflet corner containers carry the controls' own 10px margin, so the
corner `left/right` is set to (gutter - 10) to land the chip ON the target;
the FABs are positioned directly so they take the full gutter value.
============================================================================ */
:root{
--t3-gutter-left: 386px; /* left card right edge (373) + gap */
--t3-gutter-right: 386px; /* right card left edge (373) + gap */
--t3-edge-inset: 12px; /* normal corner inset when the card is flown out */
}
/* glide on the fly curve — applied to the leaflet corners + the FABs */
.leaflet-top.leaflet-left,
.leaflet-top.leaflet-right,
#api-status,
#civix-help-fab,
#civix-help-nudge{
transition: left .32s var(--ease), right .32s var(--ease);
}
/* ── LEFT SIDE — Leaflet zoom (top-left) + bottom-left FABs ──────────────────
Card IN: push into the gutter right of the left card. The zoom container's
controls carry a 10px margin, so the corner left is gutter − 10. The FABs are
positioned by their own left, so they take the full gutter value. */
#app-layout:not(.left-collapsed) .leaflet-top.leaflet-left{
left: calc(var(--t3-gutter-left) - 10px);
}
#app-layout:not(.left-collapsed) #api-status{
left: var(--t3-gutter-left);
}
#app-layout:not(.left-collapsed) #civix-help-fab{
left: var(--t3-gutter-left);
}
#app-layout:not(.left-collapsed) #civix-help-nudge{
/* nudge bubble trails the help FAB (34px wide) + a small gap */
left: calc(var(--t3-gutter-left) + 42px);
}
/* Card OUT: return to the normal edge inset. */
#app-layout.left-collapsed .leaflet-top.leaflet-left{
left: calc(var(--t3-edge-inset) - 10px);
}
#app-layout.left-collapsed #api-status{ left: var(--t3-edge-inset); }
#app-layout.left-collapsed #civix-help-fab{ left: 16px; }
#app-layout.left-collapsed #civix-help-nudge{ left: 58px; }
/* ── RIGHT SIDE — Leaflet search / lock / basemap (all top-right) ────────────
Card IN: push into the gutter left of the right card (corner right = gutter
− 10 for the 10px control margin). Card OUT: normal edge inset. */
#app-layout:not(.right-collapsed) .leaflet-top.leaflet-right{
right: calc(var(--t3-gutter-right) - 10px);
}
#app-layout.right-collapsed .leaflet-top.leaflet-right{
right: calc(var(--t3-edge-inset) - 10px);
}
/* suppress the glide on the initial-load restore (the fly JS adds .no-anim to
#app-layout on first paint, then removes it after a double-rAF) so the
controls don't slide in from the corner on page load */
.no-anim .leaflet-top.leaflet-left,
.no-anim .leaflet-top.leaflet-right,
.no-anim #api-status,
.no-anim #civix-help-fab,
.no-anim #civix-help-nudge{
transition: none !important;
}
/* topbar soft-card controls — match the lifted resting state of the mock */
#topbar .btn-share,
#topbar .toolbar-btn,
#topbar .user-menu-trigger{ box-shadow: var(--sh-1); }
#topbar .btn-share:hover,
#topbar .toolbar-btn:hover,
#topbar .user-menu-trigger:hover{ box-shadow: var(--sh-2); }
/* the topbar itself: warm hairline + soft drop so it reads as a paper masthead
floating over the themed body, not a flat band */
#topbar{ box-shadow: 0 1px 0 rgb(var(--cv-paper-rgb) / .6), var(--sh-2); }
/* ============================================================================
████ USER-SELECT DISCIPLINE ████
----------------------------------------------------------------------------
PROBLEM: dragging / double-clicking / marquee-selecting on the map natively
"selects" surrounding chrome text (zoom +/- glyphs, control labels, tab
labels, button text) — visually noisy and never intended.
FIX: disable text selection on ALL interactive chrome + the map surface, then
explicitly RE-ENABLE it on genuinely copyable CONTENT (project name/desc,
layer/element labels, comment & property field values) so real text stays
click-drag-copyable. Native form fields (/