/* === Z-index Token Scale === */ :root { --z-dropdown: 100; --z-nav: 200; --z-modal: 300; --z-modal-top: 350; /* Phase 24 Plan 07 — stacked modal layer for crop popup that opens from inside another modal (edit-client → photo crop). */ --z-popover: 360; /* Snippet autocomplete + tag suggestions — must sit ABOVE modals so the popover is usable when its textarea lives inside a modal (e.g. the export editor, --z-modal 300). Below --z-toast so notifications still surface. */ --z-modal-confirm: 370; /* Discard/confirm dialog — a blocking interrupt that can be summoned from inside any other modal (e.g. the export modal's "your changes won't be saved" prompt). Must sit ABOVE every other modal layer so it never renders behind the modal that triggered it. */ --z-toast: 400; --z-banner: 500; } /* Body scroll lock — prevents scroll-behind on mobile modals */ body.is-modal-open { overflow: hidden; position: fixed; inset-inline: 0; width: 100%; } * { box-sizing: border-box; } /* The page background lives on . When a modal opens, the scroll lock `body.is-modal-open { position: fixed }` lifts out of flow, so give the same themed base colour — otherwise the browser-default white canvas shows through behind the modal (a glaring flash in dark mode). */ html { background: var(--color-background); } body { margin: 0; background: radial-gradient(circle at top, var(--color-background-gradient-start) 0%, var(--color-background) 55%, var(--color-background-gradient-end) 100%); color: var(--color-text); font-family: Rubik, system-ui, sans-serif; overflow-x: hidden; } html[dir="rtl"] { font-family: Rubik, system-ui, sans-serif; } a { text-decoration: none; color: inherit; } .app-shell { padding: 2.5rem 1.5rem 4rem; } .container { max-width: 1120px; margin: 0 auto; } .app-header { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem 1.25rem; justify-content: space-between; margin-bottom: 2rem; width: 100%; } .brand { display: flex; align-items: center; gap: 1rem; } .brand-mark { width: 40px; height: 40px; border-radius: 12px; background: var(--color-primary-soft); color: var(--color-primary-dark); display: grid; place-items: center; font-weight: 800; box-shadow: var(--shadow-brand); } .brand-title { font-size: 1.25rem; font-weight: 800; } .brand-subtitle { display: none; } .app-nav { display: flex; gap: 0.5rem; flex-wrap: wrap; } .nav-divider{ width:1px; background:var(--color-border); align-self:stretch; border-radius:999px; margin:0 0.15rem; } .app-nav a { padding: 0.45rem 0.9rem; border-radius: 999px; background: var(--color-surface); box-shadow: var(--shadow-nav); font-weight: 700; font-size: 0.9rem; color: var(--color-text); transition: transform 0.2s ease, box-shadow 0.2s ease; white-space: nowrap; } .app-nav a.active, .app-nav a:hover { background: var(--color-primary); color: var(--color-surface); transform: translateY(-1px); } .header-actions { display: flex; align-items: center; gap: var(--space-xs, 0.5rem); margin-inline-start: auto; } /* --- Header controls (globe + theme toggle) --- */ .header-control-btn { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); cursor: pointer; font-size: 1.1rem; padding: 0; transition: background 0.15s, border-color 0.15s; } .header-control-btn:hover { background: var(--color-hover, var(--color-primary-soft)); border-color: var(--color-primary); } /* Legal topbar controls (back link + globe + theme toggle) */ .legal-topbar-controls { display: flex; align-items: center; gap: var(--space-sm, 0.5rem); } /* Language selector popover */ .lang-selector { position: relative; } .lang-popover { position: absolute; top: calc(100% + 4px); inset-inline-end: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 0.5rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); padding: 0.25rem; z-index: var(--z-dropdown); min-width: 120px; } .lang-option { display: block; width: 100%; padding: 0.5rem 0.75rem; background: none; border: none; text-align: start; cursor: pointer; border-radius: 0.375rem; font-size: 0.9rem; color: var(--color-text); } .lang-option:hover { background: var(--color-hover, var(--color-primary-soft)); } .lang-option.active { font-weight: 600; color: var(--color-primary); } /* Help entry "?" popover (Phase 39, D-09 — mirrors .lang-selector/.lang-popover) */ .help-entry { position: relative; } .help-entry-popover { position: absolute; top: calc(100% + 4px); inset-inline-end: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 0.5rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); padding: 0.25rem; z-index: var(--z-dropdown); min-width: 160px; } .help-entry-item { /* Native-