/* ── Widget settings in the design-system look ───────────────────────────────────────────────────────────────
   Two shared pieces cover almost every widget: the style popover every widget has (.wgt-op-pop) and the settings
   popover most widgets build theirs on (.nm-mic-pop with .nm-mic-title / .gm-excl-row / .ck-size-btn rows).
   Wider, roomier rows, a clear title, groups divided by a line. Loaded last; classic keeps the old popovers. */
body:not([data-look="classic"]) .wgt-op-pop,
body:not([data-look="classic"]) .nm-mic-pop { background: #fff; border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: 0 .1875rem .375rem rgba(0,0,0,.12); color: var(--font); }
body:not([data-look="classic"]) .wgt-op-pop { width: 19rem; padding: 1rem 1.25rem 1.25rem; }
body:not([data-look="classic"]) .nm-mic-pop { min-width: 19rem; padding: .75rem .75rem 1rem; gap: 0; }

/* titles */
body:not([data-look="classic"]) .nm-mic-title { font-size: .875rem; font-weight: 600; color: var(--font); text-transform: none; letter-spacing: 0; padding: .5rem .75rem .75rem; margin-bottom: .25rem; border-bottom: 1px solid var(--border); }
body:not([data-look="classic"]) .wgt-op-pop-row { margin-bottom: .75rem; }
body:not([data-look="classic"]) .wgt-op-pop-row .wgt-op-pop-lbl { font-size: .875rem; font-weight: 600; color: var(--font); }

/* rows: a comfortable 2.75rem target, label in normal ink */
body:not([data-look="classic"]) .gm-excl-row { min-height: 2.75rem; padding: .25rem .75rem !important; gap: .75rem; font-size: .9375rem; border-radius: var(--r-md); }
body:not([data-look="classic"]) .gm-excl-row:hover { background: var(--hover); }
body:not([data-look="classic"]) .gm-excl-row input { width: 1.125rem; height: 1.125rem; }
body:not([data-look="classic"]) .gm-excl-row span { font-size: .9375rem !important; }
body:not([data-look="classic"]) .wgt-op-pop .tog-row { min-height: 2.75rem; padding: 0 !important; }
body:not([data-look="classic"]) .wgt-op-pop .wgt-op-pop-lbl { font-size: .9375rem; color: var(--font); }
body:not([data-look="classic"]) .wgt-op-pop > div[style*="border-top"] { margin-top: .25rem; padding-top: .75rem !important; border-top-color: var(--border) !important; }

/* choice buttons (skins, clock face, text size): chips, the chosen one clearly marked */
body:not([data-look="classic"]) .wgt-op-pop > div[style*="grid-template-columns"] { grid-template-columns: 1fr 1fr !important; gap: .5rem !important; margin-bottom: 1rem !important; }
body:not([data-look="classic"]) .wop-skin-opt { height: 2.5rem; padding: 0 .75rem !important; border-radius: var(--r-lg) !important; font-size: .8125rem !important; outline: none; box-shadow: none; transition: none; }
body:not([data-look="classic"]) .wop-skin-opt.is-on { outline: .125rem solid var(--main); outline-offset: .125rem; }
body:not([data-look="classic"]) .ck-size-btn { height: 2.5rem; padding: 0 .75rem; border: 1px solid var(--border); border-radius: var(--r-full, 999px); background: transparent; color: var(--font); font-size: .8125rem; font-weight: 400; transition: none; }
body:not([data-look="classic"]) .ck-size-btn:hover { background: var(--hover); border-color: var(--border); color: var(--font); }
body:not([data-look="classic"]) .ck-size-btn.ck-size-on { background: var(--main-sub) !important; border-color: var(--main) !important; color: var(--font) !important; font-weight: 600; }
body:not([data-look="classic"]) .wgt-op-pop > div[style*="grid-template-columns"] > .wop-skin-opt:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* a small jungle friend beside the title of every widget popover (same animals as Aktiviteter) */
body:not([data-look="classic"]) .nm-mic-title, body:not([data-look="classic"]) .wgt-op-pop > .wgt-op-pop-row:first-child { position: relative; padding-right: 3rem; min-height: 2.25rem; }
body:not([data-look="classic"]) .nm-mic-title::after, body:not([data-look="classic"]) .wgt-op-pop > .wgt-op-pop-row:first-child::after { content: ''; position: absolute; right: .25rem; bottom: -.125rem; width: 2.25rem; height: 2.5rem; background: url(../assets/jungle/monkey_stand.webp) 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"]) .wgt-op-pop > .wgt-op-pop-row:first-child::after { background-image: url(../assets/jungle/tiger_stand.webp); }
@keyframes ds-friend-sway { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { body:not([data-look="classic"]) .nm-mic-title::after, body:not([data-look="classic"]) .wgt-op-pop > .wgt-op-pop-row:first-child::after { animation: none; } }