/* ========================================================= TEMPORARY styling for the "Brokk Regions" switcher panel. Plugin classes: .brokk-region-picker / .brokk-language-switcher NOTE: the plugin prints its own CSS inline (in ), which would otherwise win over this file. So every rule here is scoped with the root class (e.g. .brokk-region-picker .brokk-region-picker__groups) to raise specificity above the plugin's single-class rules — this works WHETHER OR NOT "Output plugin CSS" is enabled. No plugin edits. Isolated + easy to remove; another dev builds the final version. ========================================================= */ .brokk-region-picker, .brokk-language-switcher { font-family: "Geist", -apple-system, sans-serif; color: var(--text-dark, #111); } /* ── Section titles — equal size, large ───────────────────── */ .brokk-region-picker .brokk-region-picker__title, .brokk-language-switcher .brokk-language-switcher__title { margin: 0 0 1.25rem; font-family: "Saira Semi Condensed", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; font-size: 2rem; line-height: 1.05; } .brokk-language-switcher { margin-top: 2.5rem; } /* ── Region picker — force ONE column ─────────────────────── */ .brokk-region-picker .brokk-region-picker__groups { display: block; columns: 1; column-gap: 0; } .brokk-region-picker .brokk-region-picker__group { margin: 0 0 1.4rem; break-inside: avoid; } /* Global = default/superset → first, emphasised, with a divider */ .brokk-region-picker .brokk-region-picker__group--global { margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .brokk-region-picker .brokk-region-picker__group--global .brokk-region-picker__region { font-weight: 700; } /* Continent group label — consistent, readable (not tiny) */ .brokk-region-picker .brokk-region-picker__continent { margin: 0 0 0.5rem; font-family: "Saira Semi Condensed", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--h4, 2rem); color: var(--text-dark-muted, #666); } /* Countries indented under their continent → clear hierarchy */ .brokk-region-picker .brokk-region-picker__list { list-style: none; margin: 0; padding-left: 0.9rem; border-left: 2px solid rgba(0, 0, 0, 0.08); } .brokk-region-picker .brokk-region-picker__list li { margin: 0.2rem 0; } .brokk-region-picker .brokk-region-picker__region { display: inline-block; background: none; border: 0; padding: 0.12em 0.4em; margin-left: -0.4em; border-radius: 3px; font: inherit; font-size: var(--text-s, 1.4rem); line-height: 1.3; color: inherit; text-align: left; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .brokk-region-picker .brokk-region-picker__region:hover { text-decoration: underline; text-underline-offset: 3px; } /* ── Language switcher → chips/pills ──────────────────────── */ .brokk-language-switcher .brokk-language-switcher__list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; } .brokk-language-switcher .brokk-language-switcher__lang { display: inline-flex; align-items: center; padding: 0.45rem 1rem; border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 999px; text-decoration: none; color: inherit; font-size: var(--text-s, 1.4rem); line-height: 1; transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease; } .brokk-language-switcher .brokk-language-switcher__lang:hover { border-color: var(--text-dark, #111); } /* ── CURRENT selection — unmistakable (both controls) ─────── */ .brokk-region-picker .brokk-region-picker__region.is-current { background: var(--primary, #ffcd00); color: #111; font-weight: 700; text-decoration: none; } .brokk-language-switcher .brokk-language-switcher__lang.is-current { background: var(--primary, #ffcd00); border-color: var(--primary, #ffcd00); color: #111; font-weight: 700; }