/* ── Inställningar (the board settings window) in the design-system look ───────────────────────────────────────
   A large centred window: navigation on the left (one entry per group), the chosen group on the right as cards.
   Loaded after cozy-settings.css. Everything is keyed on body:not([data-look="classic"]) — classic keeps its old window. */
body:not([data-look="classic"]) .pub-backdrop.bgm-backdrop,
body:not([data-look="classic"]) .pub-backdrop.bgm-backdrop.bgm-compact { background: rgba(0,0,0,.14); align-items: center; justify-content: center; padding: 1rem; pointer-events: auto; backdrop-filter: none; -webkit-backdrop-filter: none; }
body:not([data-look="classic"]) .bgm-backdrop .bgm-modal,
body:not([data-look="classic"]) .bgm-backdrop.bgm-compact .bgm-modal,
body:not([data-look="classic"]) .bgm-backdrop:not(.bgm-compact) .bgm-modal {
  display: grid; grid-template-columns: 15.5rem minmax(0,1fr); grid-template-rows: auto minmax(0,1fr);
  width: min(70rem, 100%); height: min(46rem, 100%); max-height: 100%; min-height: 0; overflow: hidden;
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-xl);
  box-shadow: 0 .1875rem .375rem rgba(0,0,0,.12); }
body:not([data-look="classic"]) .bgm-head { grid-column: 1 / -1; padding: 1.25rem 1.75rem; border-bottom: 1px solid var(--border); background: transparent; }
body:not([data-look="classic"]) .bgm-title { font-size: 1.25rem; font-weight: 600; }
body:not([data-look="classic"]) .bgm-head .pub-close { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: transparent; border: none; color: var(--font); display: grid; place-items: center; }
body:not([data-look="classic"]) .bgm-head .pub-close:hover { background: var(--hover); }

/* navigation */
body:not([data-look="classic"]) .bgm-tabs { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; flex-wrap: nowrap; gap: .25rem; padding: 1rem .75rem; border-bottom: none; border-right: 1px solid var(--border); overflow-y: auto; background: transparent; }
body:not([data-look="classic"]) .bgm-tab { display: flex; align-items: center; gap: .75rem; width: 100%; height: 2.75rem; margin: 0; padding: 0 1rem; border: none; border-radius: var(--r-full, 999px); background: transparent; box-shadow: none; color: var(--font); font-size: .875rem; font-weight: 400; text-align: left; transform: none; transition: background .12s; }
body:not([data-look="classic"]) .bgm-tab[hidden] { display: none; }
body:not([data-look="classic"]) .bgm-tab:hover { background: var(--hover); transform: none; color: var(--font); }
body:not([data-look="classic"]) .bgm-tab.is-on { background: var(--main-sub); color: var(--font); font-weight: 600; box-shadow: none; transform: none; }
body:not([data-look="classic"]) .bgm-tab::before { color: var(--font-sub); font-size: 1.375rem; }
body:not([data-look="classic"]) .bgm-tab.is-on::before { color: var(--main); }
body:not([data-look="classic"]) .bgm-tab:focus-visible { outline: .125rem solid var(--ds-focus, #36495D); outline-offset: .125rem; }
body:not([data-look="classic"]) .bgm-tab[data-tab="style"]::before { content: 'palette'; }
body:not([data-look="classic"]) .bgm-tab[data-tab="layout"]::before { content: 'dashboard_customize'; }
body:not([data-look="classic"]) .bgm-tab[data-tab="toolbar"]::before { content: 'apps'; }
body:not([data-look="classic"]) .bgm-tab[data-tab="look"]::before { content: 'auto_awesome'; }

/* content */
body:not([data-look="classic"]) .bgm-body { grid-column: 2; grid-row: 2; padding: 1.75rem 2rem 2.25rem; overflow-y: auto; min-height: 0; background: transparent; }
body:not([data-look="classic"]) .bgm-scroll-hint { left: 15.5rem; background: linear-gradient(transparent, #fff 55%); }
body:not([data-look="classic"]) .kk-settings--embedded { max-width: 46rem; }
body:not([data-look="classic"]) .kk-settings--embedded .kk-settings-section { background: #fff; border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: none; margin: 0 0 1rem; padding: 1.25rem 1.5rem; }
body:not([data-look="classic"]) .kk-settings--embedded .kk-settings-section h3 { font-size: 1rem; font-weight: 600; margin: 0 0 1rem; }
body:not([data-look="classic"]) .kk-settings .tog-row { min-height: 3rem; padding: .25rem 0; }
body:not([data-look="classic"]) .kk-settings .tog-row > div { font-size: .9375rem !important; }
body:not([data-look="classic"]) .kk-settings .tog-row + .tog-row { border-top: 1px solid var(--border); }
body:not([data-look="classic"]) .kk-settings #settings-lockhint,
body:not([data-look="classic"]) .kk-settings #settings-toolbar-desc { font-size: .8125rem !important; margin: 0 0 .75rem; }
body:not([data-look="classic"]) #skin-grid { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)) !important; gap: .75rem !important; }
body:not([data-look="classic"]) #skin-grid .skin-opt { height: 3.25rem; padding: 0 .75rem !important; border-radius: var(--r-lg) !important; font-size: .875rem !important; font-weight: 400; transition: none; }
body:not([data-look="classic"]) #skin-grid .skin-opt:hover { transform: none; box-shadow: none; }
body:not([data-look="classic"]) #skin-grid .skin-opt.active { outline: .125rem solid var(--main); outline-offset: .125rem; }

/* Bakgrund and Mina bilder */
body:not([data-look="classic"]) .bgm-body .ns-section-label { font-size: .875rem; font-weight: 600; color: var(--font); text-transform: none; letter-spacing: 0; margin-bottom: .75rem; }
body:not([data-look="classic"]) .bgm-scene-grid { grid-template-columns: repeat(auto-fill, 10rem); gap: .75rem; } /* 10rem = the 160px the scene thumbnails are drawn at */
body:not([data-look="classic"]) .bgm-swatch { border-radius: var(--r-lg); transition: none; }
body:not([data-look="classic"]) .bgm-swatch:hover { transform: none; box-shadow: 0 0 0 .125rem var(--border); }
body:not([data-look="classic"]) .bgm-swatch.is-on { border-color: var(--main); box-shadow: none; }
body:not([data-look="classic"]) .bgm-upload-swatch { border-radius: var(--r-lg); }
body:not([data-look="classic"]) .mi-actions { box-shadow: none; border: 1px solid var(--border); border-radius: var(--r-xl); }
body:not([data-look="classic"]) .mi-thumb { box-shadow: none; border: 1px solid var(--border); transition: none; }
body:not([data-look="classic"]) .mi-thumb:hover { transform: none; box-shadow: 0 0 0 .125rem var(--border); }

@media (max-width: 40rem) {
  body:not([data-look="classic"]) .bgm-backdrop .bgm-modal { grid-template-columns: 1fr; grid-template-rows: auto auto minmax(0,1fr); }
  body:not([data-look="classic"]) .bgm-tabs { grid-row: 2; flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--border); padding: .5rem; }
  body:not([data-look="classic"]) .bgm-tab { width: auto; flex-shrink: 0; }
  body:not([data-look="classic"]) .bgm-body { grid-column: 1; grid-row: 3; padding: 1.25rem; }
  body:not([data-look="classic"]) .bgm-scroll-hint { left: 0; }
}

/* ── a jungle friend at the bottom of the menu, a different one for each group (same animals as Aktiviteter) ── */
body:not([data-look="classic"]) .bgm-tabs::after { content: ''; flex: 0 0 6rem; margin: auto 1.5rem .75rem; background: no-repeat center bottom / contain; transform-origin: 50% 100%; animation: ds-friend-sway 3.2s ease-in-out infinite; pointer-events: none; }
body:not([data-look="classic"]) .bgm-backdrop[data-tab="bg"] .bgm-tabs::after { background-image: url(../assets/jungle/lion_stand.webp); }
body:not([data-look="classic"]) .bgm-backdrop[data-tab="style"] .bgm-tabs::after { background-image: url(../assets/jungle/monkey_stand.webp); }
body:not([data-look="classic"]) .bgm-backdrop[data-tab="layout"] .bgm-tabs::after { background-image: url(../assets/jungle/tiger_stand.webp); }
body:not([data-look="classic"]) .bgm-backdrop[data-tab="toolbar"] .bgm-tabs::after { background-image: url(../assets/jungle/sloth_stand.webp); }
body:not([data-look="classic"]) .bgm-backdrop[data-tab="look"] .bgm-tabs::after { background-image: url(../assets/jungle/elephant_stand.webp); }
body:not([data-look="classic"]) .bgm-backdrop[data-tab="images"] .bgm-tabs::after { background-image: url(../assets/jungle/parrot_stand.webp); }
@keyframes ds-friend-sway { 0%,100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@media (prefers-reduced-motion: reduce) { body:not([data-look="classic"]) .bgm-tabs::after { animation: none; } }
@media (max-width: 40rem) { body:not([data-look="classic"]) .bgm-tabs::after { display: none; } }

/* classic keeps its three tabs (Layout shows every group at once) */
body[data-look="classic"] .bgm-tab-x { display: none; }
body:not([data-look="classic"]) #bgm-pane-images.bgm-body { padding-top: 1.75rem; }