/* The settings cog in the top bar. Loaded together with js/settings.js. */
.settings-panel{width:min(340px,calc(100vw - 24px))}
.settings-panel form{padding:12px 16px 4px}
.set-label{display:block;margin-bottom:6px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.65}
.set-seg{display:flex;margin:0;padding:3px;border:0;border-radius:12px;background:rgba(127,140,155,.2)}
.set-seg label{flex:1;position:relative;margin:0}
.settings-panel .set-seg input{position:absolute;opacity:0;inset:0;width:100%!important;height:100%;margin:0;padding:0;cursor:pointer}
.set-seg span{display:block;padding:7px 4px;border-radius:9px;text-align:center;font-size:13px;font-weight:600;transition:background .15s,box-shadow .15s}
.set-seg input:checked+span{background:#fff;color:#16324a;box-shadow:0 2px 8px rgba(0,0,0,.22)}
.set-seg input:focus-visible+span{outline:2px solid #2f8fbf}
html[data-theme=dark] .set-seg input:checked+span{background:#2f8fbf;color:#fff}
.set-status{display:block;min-height:16px;margin-top:5px;font-size:11.5px;opacity:.7}
.set-rows{padding:2px 8px 4px}
.set-row{display:flex;align-items:center;gap:12px;padding:8px;border-radius:10px;cursor:pointer}
.set-row:hover{background:rgba(127,140,155,.12)}
.set-row span{flex:1;min-width:0}
.set-row strong{display:block;font-size:14px}
.set-row small{display:block;font-size:12px;opacity:.68;line-height:1.35}
html .settings-panel input.set-switch:not([type=hidden]){appearance:none;-webkit-appearance:none;flex:none;position:relative;width:38px!important;height:22px!important;min-width:38px;margin:0;padding:0!important;border:0!important;border-radius:999px;background:rgba(127,140,155,.5)!important;box-shadow:none;cursor:pointer;transition:background .2s}
.settings-panel input.set-switch::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .2s}
html .settings-panel input.set-switch:not([type=hidden]):checked{background:#2f8fbf!important}
.settings-panel input.set-switch:checked::after{transform:translateX(16px)}
.set-switch:focus-visible{outline:2px solid #2f8fbf;outline-offset:2px}
.set-links{display:flex;flex-wrap:wrap;gap:6px 16px;padding:10px 16px 14px;border-top:1px solid rgba(127,140,155,.25);margin-top:4px}
.set-links a{font-size:13px;font-weight:600}
/* Animations off (setting): no motion anywhere. */
html[data-motion=off] *,html[data-motion=off] *::before,html[data-motion=off] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}

/* "Installera som app" banner (js/install.js) */
.tt-install{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:1450;display:flex;align-items:center;gap:12px;max-width:460px;margin:0 auto;padding:12px 14px;border-radius:16px;color:#e6eff6;background:linear-gradient(160deg,#182c42,#0f1c2b);border:1px solid rgba(160,205,230,.25);box-shadow:0 18px 44px rgba(3,10,20,.5);opacity:0;transform:translateY(20px);transition:opacity .3s,transform .4s cubic-bezier(.2,1.2,.4,1)}
.tt-install.in{opacity:1;transform:none}
.tt-install img{flex:none;border-radius:12px}
.tt-install-text{flex:1;min-width:0;font-size:13px;line-height:1.35}
.tt-install-text strong{display:block;font-size:14.5px}
.tt-install-text span{display:block;opacity:.8}
.tt-install-actions{display:flex;flex-direction:column;gap:6px;flex:none}
.tt-install button{padding:7px 14px;border:0;border-radius:10px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.tt-install-yes{background:#2f8fbf;color:#fff}
.tt-install-no{background:rgba(127,140,155,.25);color:inherit}
.set-install{width:100%;text-align:left;border:0;background:transparent;color:inherit;font:inherit;padding:8px 16px;cursor:pointer;font-weight:600}
.set-install[hidden]{display:none}
.settings-panel>.set-row{margin:0 8px}
.settings-panel>.set-row small{white-space:normal}
.set-push-test{margin:0 16px 6px;display:grid;gap:6px}
.set-test{justify-self:start;padding:6px 12px;border:1px solid rgba(127,140,155,.45);border-radius:9px;background:transparent;color:inherit;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.set-test[hidden]{display:none}
.set-push-test small{font-size:11.5px;opacity:.75;overflow-wrap:anywhere}

/* The top bar hides every <span> inside it on narrow screens (.account span{display:none}): the texts inside the settings panel are spans too and must stay visible. */
header.topbar .account .settings-panel span{display:block!important}
header.topbar .account .settings-panel .set-seg span{display:block!important}

/* the test button: small, in the normal flow, never over the text */
.settings-panel .set-push-test{position:static!important;display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:0 16px 8px;padding:0}
.settings-panel .set-push-test .set-test{position:static!important;width:auto!important;min-width:0!important;height:auto!important;min-height:0!important;margin:0!important;padding:5px 11px!important;font-size:12.5px!important;line-height:1.2!important;border-radius:9px}
.settings-panel .set-push-test small{display:block!important;margin:0;width:100%}
.settings-panel .set-push-test .set-test[hidden]{display:none!important}

/* notification help + "did you hear it?" */
.settings-panel .set-push-help{margin:0 16px 6px}
.settings-panel .set-help{font-size:12.5px;border:1px solid rgba(127,140,155,.3);border-radius:10px;padding:6px 10px}
.settings-panel .set-help summary{cursor:pointer;font-weight:700;list-style-position:inside}
.settings-panel .set-help ol{margin:8px 0 6px;padding-left:18px;display:grid;gap:5px}
.settings-panel .set-help small{display:block;opacity:.7;font-size:11px}
.settings-panel .set-heard{display:grid;gap:6px;font-size:12.5px;margin-top:4px}
.settings-panel .set-heard div{display:flex;gap:8px}
.settings-panel .set-heard button{padding:5px 14px!important;border:1px solid rgba(127,140,155,.45)!important;border-radius:9px;background:transparent;color:inherit;font:inherit;font-weight:700;cursor:pointer;min-height:0!important;width:auto!important}

/* Everything in the settings panel wraps onto several lines instead of running off to the right. */
header.topbar .account .settings-panel,header.topbar .account .settings-panel *{white-space:normal!important;overflow-wrap:anywhere;word-break:normal}
header.topbar .account .settings-panel{overflow-x:hidden;max-width:calc(100vw - 16px)}
header.topbar .account .settings-panel .set-row>span,header.topbar .account .settings-panel .set-row>div{min-width:0;flex:1 1 0}
header.topbar .account .settings-panel .set-links{gap:6px 14px}
header.topbar .account .settings-panel .set-seg span{white-space:nowrap!important}

/* Phone: the menu is always shown at the top (no Meny button), kept compact so it does not eat the screen. */
@media (max-width:700px){
 header.topbar{padding-block:8px;gap:6px;min-height:0}
 header.topbar nav{padding-block:4px 0;gap:0 2px}
 header.topbar nav a{min-height:36px!important;padding:6px 8px!important;font-size:14px}
 header.topbar .account.nav-tools{padding-block:0}
}