/* installningar-vanner.css — design "Vänner och Inställningar" (2026-09-23).
   Load after css/app.css and css/vanner.css. Fills vs ink as in earlier patches; labels on --blue are #fff. */
:root { --gold: #b8860b; --gold-soft: #f8efd4; --gold-ink: #7a5a06; }
@media (prefers-color-scheme: dark) { :root { --gold: #c9960f; --gold-soft: #2e2716; --gold-ink: #e8c46a; } }

/* ---- Inställningar ---- */
.merh { margin: 0 0 .7em; font: 500 1.6rem/1.1 Charter, 'Iowan Old Style', Georgia, serif; }
#feedbackBox { margin-bottom: 1.3em; }
.fbkort { border: 1px solid var(--line); border-radius: 16px; background: var(--card); padding: 15px; display: flex; flex-direction: column; gap: 11px; }
.fbkort.mitt { align-items: center; text-align: center; padding: 20px 15px 16px; gap: 12px; }
.fbkort.sallsynt { border: 1.5px solid var(--gold); background: var(--gold-soft); }
.fbkort small { font-size: .8rem; color: var(--granite); line-height: 1.4; }
.fbhuvud { display: flex; align-items: flex-start; gap: 12px; }
.fbhuvud > div { flex: 1; min-width: 0; display: grid; gap: 3px; } .fbhuvud b { font-size: 1rem; }
.fbmerke { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 14px; background: var(--gold-soft); color: var(--gold-ink); font-weight: 700; font-size: .74rem; flex: none; }
.fbmerke.slut { background: var(--sunk); color: var(--granite); font-weight: 600; }
.fbtyper { display: flex; flex-wrap: wrap; gap: 7px; }
.fbtyper button { padding: 7px 12px; border: 1.5px solid var(--line); border-radius: 17px; background: transparent; color: var(--ink); font-size: .8rem; font-weight: 500; }
.fbtyper button.on { background: var(--blue); border-color: var(--blue); color: var(--on-blue); font-weight: 600; }
.fbform2 { display: grid; gap: 10px; margin: 0; }
.fbform2 textarea { width: 100%; min-height: 5.2em; border: 1.5px solid var(--line); border-radius: 12px; background: var(--paper); padding: .6em .75em; font-size: .9rem; }
.fbform2 textarea:focus { outline: none; border-color: var(--blue-ink); box-shadow: 0 0 0 3px var(--blue-soft); }
.fbskicka { height: 46px; padding: 0 26px; border: 0; border-radius: 12px; background: var(--blue); color: var(--on-blue); font-weight: 600; font-size: .92rem; }
.fbskicka:disabled { opacity: .6; }
.fbmsg { font-size: .8rem; color: var(--granite); min-height: 1em; } .fbmsg:empty { display: none; }
/* the package */
.paket { position: relative; width: 112px; height: 98px; margin-top: 6px; padding: 0; border: 0; background: none; animation: gunga 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
.paket .botten { position: absolute; left: 0; right: 0; bottom: 0; height: 70px; border-radius: 10px; background: var(--gold); }
.paket .lock { position: absolute; left: -6px; right: -6px; top: 10px; height: 24px; border-radius: 8px; background: #d19e21; z-index: 2; transition: transform .45s cubic-bezier(.3,1.4,.5,1), opacity .45s; }
.paket .band { position: absolute; left: 49px; top: 10px; width: 14px; bottom: 0; background: #fff; opacity: .92; z-index: 3; }
.paket .rosett { position: absolute; top: -8px; width: 24px; height: 20px; border: 5px solid #fff; z-index: 3; transition: transform .45s, opacity .45s; }
.paket .rosett.v { left: 32px; border-radius: 50% 50% 0 50%; transform: rotate(-20deg); }
.paket .rosett.h { left: 56px; border-radius: 50% 50% 50% 0; transform: rotate(20deg); }
.paket.oppnas { animation: none; }
.paket.oppnas .lock, .paket.oppnas .rosett { transform: translateY(-38px) rotate(-14deg); opacity: 0; }
@keyframes gunga { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-4deg); } 40% { transform: rotate(3deg); } 55% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .paket { animation: none; } .paket .lock, .paket .rosett { transition: none; } }
/* what was inside */
.fbikon { width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; }
.fbikon.gron { background: var(--ok-soft); color: var(--ok-ink); } .fbikon.bla { background: var(--blue-soft); color: var(--blue-ink); }
.fbstor { font-size: 1.5rem; line-height: 1.1; } .fbstor.gron { color: var(--ok-ink); } .fbstor.bla { color: var(--blue-ink); }
.fbrad { font-size: .95rem; font-weight: 600; margin-top: -4px; }
.fbstapel { width: 100%; display: grid; gap: 5px; padding: 10px 12px; border-radius: 12px; background: var(--paper); }
.fbstapel > div { display: flex; justify-content: space-between; font-size: .76rem; font-weight: 500; color: var(--granite); }
.fbstapel .spar { height: 6px; border-radius: 3px; background: var(--sunk); overflow: hidden; }
.fbstapel .spar i { display: block; height: 100%; background: var(--ok); } .fbstapel .spar.bla i { background: var(--blue); }
.fbsallsynt { padding: 4px 10px; border-radius: 12px; background: var(--gold); color: #fff; font-weight: 700; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.fbbild { min-width: 120px; min-height: 90px; display: grid; place-items: center; }
.fbrubrik { font-size: 1.05rem; }
.fbval { display: flex; gap: 8px; width: 100%; margin-top: 4px; } .fbval button { flex: 1; height: 44px; border-radius: 12px; }
.fbkort.sallsynt .fbval .ghost { border-color: var(--gold-ink); color: var(--gold-ink); }
/* the two setting groups: the existing .mergrupp/.merkort styles apply unchanged */

/* ---- Vänner ---- */
.vantopp { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.vantopp .vanh { margin: 0; }
.vanbjud { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 13px 0 10px; border: 1.5px solid var(--blue-ink); border-radius: 19px; background: transparent; color: var(--blue-ink); font-weight: 600; font-size: .86rem; }
.vanlage { padding: 14px; border-radius: 16px; background: var(--blue); color: var(--on-blue); display: grid; gap: 4px; margin-bottom: 14px; }
.vanlage .rubrik { display: flex; justify-content: space-between; font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.vanlage b { font: 500 1.2rem/1.25 Charter, Georgia, serif; margin-top: 6px; }
.vanrad.jag { background: var(--blue-soft); opacity: 1; }
.vanrad .vannoll { font-size: .72rem; color: var(--faint); }
.vanrad.noll .vanpoang b { color: var(--faint); }
.vankodrad { margin: .8em 0 0; font-size: .76rem; color: var(--faint); }
.vankodrad b { font-family: ui-monospace, Menlo, monospace; color: var(--ink); letter-spacing: .06em; }
/* empty state */
.vanintro { margin: 0 0 16px; font-size: .92rem; color: var(--granite); line-height: 1.5; }
.vansteg { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; }
.vansteg li { display: flex; gap: 12px; align-items: center; font-size: .9rem; font-weight: 500; }
.vansteg li > span { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line); color: var(--granite); display: grid; place-items: center; font-weight: 700; font-size: .82rem; flex: none; }
.vansteg li:first-child > span { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
.vanstor { width: 100%; height: 50px; border: 0; border-radius: 14px; background: var(--blue); color: var(--on-blue); font-weight: 600; font-size: .95rem; }
.vandelare { display: flex; align-items: center; gap: 10px; margin: 16px 0 10px; font-size: .76rem; font-weight: 500; color: var(--faint); }
.vandelare::before, .vandelare::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* the Bjud in sheet (reuses .nyark from patch-las-ny if present; standalone otherwise) */
.vanark-bak { position: fixed; inset: 0; z-index: 50; background: rgba(20,22,26,.45); display: flex; align-items: flex-end; justify-content: center; }
.vanark { width: min(520px, 100%); background: var(--paper); border-radius: 20px 20px 0 0; padding: 10px 16px calc(22px + env(safe-area-inset-bottom)); display: grid; gap: 14px; }
@media (min-width: 700px) { .vanark-bak { align-items: center; } .vanark { border-radius: 20px; } }
.vanark .grepp { width: 40px; height: 5px; border-radius: 3px; background: var(--line); justify-self: center; }
.vanark .huvud { display: flex; align-items: center; justify-content: space-between; }
.vanark h2 { margin: 0; font: 500 1.3rem/1.2 Charter, Georgia, serif; }
.vanark .stang { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--sunk); color: var(--ink); display: grid; place-items: center; }
.vanark .kodruta { display: grid; justify-items: center; gap: 6px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.vanark .kodruta span { font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.vanark .kodruta b { font: 600 1.8rem/1.1 ui-monospace, Menlo, monospace; letter-spacing: .2em; }
.vanark .knappar, .vanfalt { display: flex; gap: 8px; } .vanark .knappar button { flex: 1; height: 46px; border-radius: 12px; }
.vanfalt input { flex: 1; min-width: 0; height: 46px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); padding: 0 12px; }
.vanfalt button { height: 46px; padding: 0 16px; border: 1.5px solid var(--blue-ink); border-radius: 12px; background: transparent; color: var(--blue-ink); font-weight: 600; }

/* ---- Inställningar rows (design A1/C3, 2026-09-24): a line on what each setting does, Help links, the unlock rule ---- */
#moreView .mertitel { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#moreView .mertitel h3 { margin: 0; }
#moreView .merdesc { margin: 0; font-size: .76rem; line-height: 1.35; font-weight: 400; color: var(--granite); }
#moreView #accountBox > .merdesc { margin: -.3em 0 .5em; }
#moreView .merdesc.mertips { margin: -.1em 0 .5em 1.9em; }
#moreView .merlank { display: inline-block; margin-top: .6em; padding: 0; background: none; border: 0; font-size: .84rem; font-weight: 600; color: var(--blue-ink, var(--blue)); cursor: pointer; }
/* The help row: a whole-row button, marked in blue, opening the same sheet as the ? */
#moreView .merhjalprad { display: flex; align-items: center; gap: .6em; width: 100%; padding: .85em 0; background: none; border: 0; border-radius: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
#moreView .merhjalprad h3 { color: var(--blue-ink, var(--blue)); }
#moreView .merhjalprad .merpil { flex: none; color: var(--blue-ink, var(--blue)); }
#moreView details.avancerat summary .mertitel span:first-child { color: var(--granite); }
/* C3 — Upplåsning av avsnitt: the three conditions, a stepper, what lower and higher mean */
#moreView .uvillkor-rub { margin: 0 0 .5em; font-size: .88rem; color: var(--granite); }
#moreView .uvillkor { list-style: none; margin: 0 0 .8em; padding: 13px; display: grid; gap: 9px; border: 1px solid var(--line); border-radius: 14px; background: var(--card, var(--paper)); }
#moreView .uvillkor li { display: flex; gap: 10px; align-items: center; font-size: .88rem; line-height: 1.35; }
#moreView .ubock, #moreView .unr { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; }
#moreView .ubock { background: var(--ok-soft, #e8ece8); color: var(--ok-ink, var(--ok)); }
#moreView .unr { background: var(--blue); color: var(--on-blue); font-size: .66rem; font-weight: 700; }
#moreView .ustepper { display: flex; align-items: center; gap: 10px; margin-bottom: .7em; }
#moreView .ustepper button { flex: none; width: 46px; height: 46px; padding: 0; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card, var(--paper)); color: var(--ink); font-size: 1.2rem; font-weight: 600; }
#moreView .ufalt { flex: 1; height: 46px; display: flex; align-items: center; justify-content: center; gap: .3em; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card, var(--paper)); font-weight: 700; font-size: 1.1rem; }
#moreView .ufalt input { width: 3.2ch; padding: 0; border: 0; background: none; text-align: right; font: inherit; color: inherit; -moz-appearance: textfield; }
#moreView .ufalt input::-webkit-inner-spin-button, #moreView .ufalt input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#moreView .ulh { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: .6em; }
#moreView .ulh > div { padding: 10px 11px; border-radius: 12px; background: var(--sunk, var(--blue-soft)); font-size: .78rem; line-height: 1.4; }
#moreView .ulh b { display: block; margin-bottom: 2px; }
#moreView .ufot { margin: 0; font-size: .78rem; line-height: 1.45; color: var(--faint, var(--granite)); }

/* The role in the admin's user dialog (2026-09-29). */
.anvroll { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 8px; }

.fbtyper .fbvalfritt { align-self: center; }