@media print { :where(html[data-sida="medlemsregister"]) body{background:#fff;} :where(html[data-sida="medlemsregister"]) .verktyg{display:none;} :where(html[data-sida="medlemsregister"]) .ark{max-width:none;margin:0;padding:0;box-shadow:none;} @page{size:A4;margin:16mm 14mm;} }
@media print {
  :where(html[data-sida="medlemsregister-1"]) body { background: #fff; }
  :where(html[data-sida="medlemsregister-1"]) .verktyg { display: none; }
  :where(html[data-sida="medlemsregister-1"]) .ark { max-width: none; margin: 0; padding: 0; box-shadow: none; }
  @page { size: A4; margin: 16mm 14mm; }
}
@media print {
  :where(html[data-sida="medlemsregister-2"]) .topp, :where(html[data-sida="medlemsregister-2"]) .flikar, :where(html[data-sida="medlemsregister-2"]) .no-print, :where(html[data-sida="medlemsregister-2"]) .toast { display: none !important; }
  :where(html[data-sida="medlemsregister-2"]) .print-only { display: block; }
  :where(html[data-sida="medlemsregister-2"]) .rl-signaturer.print-only { display: flex; }
  :where(html[data-sida="medlemsregister-2"]) body { background: var(--kort); font-size: 10pt; }
  :where(html[data-sida="medlemsregister-2"]) .wrap { max-width: none; padding: 0; }
  :where(html[data-sida="medlemsregister-2"]) .rl-status { margin-bottom: 10px; }
  :where(html[data-sida="medlemsregister-2"]) .rl-statbox { padding: 6px 12px; border-radius: 8px; }
  :where(html[data-sida="medlemsregister-2"]) .rl-rad { min-height: 0; padding: 6px 10px; margin-bottom: 4px; border-radius: 8px;
            break-inside: avoid; page-break-inside: avoid; }
  :where(html[data-sida="medlemsregister-2"]) .rl-nr { height: 26px; }
  :where(html[data-sida="medlemsregister-2"]) .rl-tom { visibility: hidden; }
  @page { size: A4; margin: 15mm 14mm; }
}
@keyframes medlemsregister2-sigillIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
@keyframes medlemsregister2-toastIn { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }


/* ===== från styles.css ===== */

.brand-mark{
  width:60px;
  height:60px;
  background-image:url('ulvnas-white-logo.png') !important;
  background-position:center !important;
  background-size:contain !important;
  background-repeat:no-repeat !important;
  border:0 !important;
  border-radius:0 !important;
  flex:0 0 auto;
}

.footer-logo{
  width:56px;
  height:56px;
  background-image:url('ulvnas-white-logo.png') !important;
  background-position:center !important;
  background-size:contain !important;
  background-repeat:no-repeat !important;
  border:0 !important;
  border-radius:0 !important;
  flex:0 0 auto;
}

@media (max-width:760px){
  .brand-mark{
    width:52px;
    height:52px;
  }
  .footer-logo{
    width:48px;
    height:48px;
  }
}


:root:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) {
  --navy-950:#07111b;
  --navy-900:#0a1826;
  --navy-800:#102438;
  --navy-700:#17324f;
  --blue-500:#4e86b8;
  --blue-400:#6ea6d7;
  --mist:#d7e4ef;
  --mist-dim:#a4b7c8;
  --sand:#c8d3de;
  --line:rgba(110,166,215,.20);
  --panel:rgba(12,25,38,.78);
  --panel-2:rgba(9,19,30,.88);
  --shadow:0 24px 70px rgba(0,0,0,.34);
  --radius:28px;
  --display:'Bebas Neue',sans-serif;
  --heading:'Barlow',system-ui,sans-serif;
  --body:'Barlow',sans-serif;
  --condensed:'Barlow Condensed',sans-serif;
}
:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) *{box-sizing:border-box}
:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) body{
  margin:0;
  font-family:var(--body);
  color:var(--mist);
  background:
    radial-gradient(circle at 15% 18%, rgba(78,134,184,.10), transparent 26%),
    radial-gradient(circle at 80% 28%, rgba(110,166,215,.08), transparent 24%),
    linear-gradient(180deg, rgba(8,16,25,.70), rgba(8,16,25,.98)),
    linear-gradient(180deg, var(--navy-800), var(--navy-950));
}
:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='0.03' filter='url(%23n)'/%3E%3C/svg%3E");
  z-index:2;
  mix-blend-mode:soft-light;
}
:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) a{text-decoration:none;color:inherit}
:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .shell{width:min(1180px, calc(100% - 40px)); margin:0 auto; position:relative; z-index:3;}
:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .nav{
  position:sticky; top:0; z-index:30;
  backdrop-filter:blur(16px);
  background:rgba(6,13,20,.80);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  min-height:78px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{display:flex; align-items:center; gap:14px}
.footer-brand{
  display:flex; align-items:center; gap:14px;
}
.brand-text{display:flex; flex-direction:column; gap:2px}
.brand-text strong{
  font-family:var(--display);
  font-size:1.75rem; letter-spacing:2px; font-weight:400; color:#fff;
}
.brand-text span{
  font-family:var(--condensed); text-transform:uppercase; letter-spacing:2.5px;
  font-size:.8125rem; color:var(--mist-dim);
}
.nav-toggle{
  display:none;
  width:48px; height:48px; border:1px solid rgba(255,255,255,.12); border-radius:14px;
  background:rgba(255,255,255,.03); align-items:center; justify-content:center; cursor:pointer;
}
.nav-links{display:flex; justify-content:flex-end; align-items:center}
.nav-links a{
  font-family:var(--condensed);
  font-size:.92rem; transition:color .22s ease;
}
.hero{
  position:relative;
  overflow:hidden;
}
.hero::before{
  filter: saturate(.92) contrast(1.02);
  content:"";
  position:absolute; inset:0;
}
.hero::after{ position:absolute; left:0; right:0; bottom:0;
}
:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .eyebrow{
  font-family:var(--condensed);
  font-size:.84rem; color:var(--blue-400); margin:0 0 18px;
}
:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) h1,:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) h2,:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) h3{margin:0; line-height:.98}
:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:50px; padding:0 24px; border-radius:999px;
  border:1px solid rgba(215,228,239,.14);
  background:rgba(255,255,255,.04); color:#fff;
  font-family:var(--condensed); text-transform:uppercase; letter-spacing:2px; font-size:.92rem;
  transition:transform .22s ease, background .22s ease, border-color .22s ease;
}
:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .btn:hover{transform:translateY(-2px); background:rgba(255,255,255,.07); border-color:rgba(215,228,239,.24)}
:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .panel{
  justify-self:end; width:min(360px,100%); padding:30px;
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(12,25,38,.66), rgba(8,16,25,.84));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .panel h3{font-family:var(--display); font-size:2.05rem; letter-spacing:2px; color:#fff}
:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .panel p{margin:12px 0 0; color:var(--mist-dim); line-height:1.8}
.section{padding:102px 0; position:relative}
:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .copy p{
  color:var(--mist-dim); line-height:1.9; font-size:1.08rem; margin:0 0 18px;
}
:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .copy strong{color:#fff}
.card{
  padding:28px; border-radius:26px;
  background:linear-gradient(180deg, rgba(15,33,50,.78), rgba(9,19,30,.92));
  border:1px solid var(--line); box-shadow:var(--shadow);
}
.card h3{font-family:var(--display); font-size:2.1rem; letter-spacing:2px; color:#fff; margin-bottom:12px}
.card p{color:var(--mist-dim); line-height:1.8; margin:0}
.page-hero{
  position:relative;
}
.page-hero::before{
  content:""; position:absolute; inset:0;
  opacity:.45;
}
.page-hero .shell{ z-index:1}
.page-hero h1{
  font-family:var(--display); font-size:clamp(3.3rem,8vw,6rem); color:#fff;
}
.page-hero p{max-width:700px; color:var(--mist-dim); margin:18px 0 0}
.content-wrap{padding:50px 0 96px}
.article{
  border-radius:30px; background:linear-gradient(180deg, rgba(13,27,41,.72), rgba(8,16,25,.92));
  border:1px solid var(--line); box-shadow:var(--shadow); padding:34px;
}
.article h2{
  font-family:var(--heading); font-size:2rem; color:#fff; margin:0 0 18px;
}
.article h3{
  font-family:var(--heading); font-size:1.24rem; color:#fff; margin:26px 0 10px;
}
.article p,.article li{
  color:var(--mist-dim); line-height:1.9; font-size:1.04rem;
}
.article ul{padding-left:20px}
:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .footer{
  border-top:1px solid var(--line); padding:34px 0 42px;
}
.footer-inner{
  display:flex; justify-content:space-between; gap:24px; align-items:center; flex-wrap:wrap;
  color:var(--mist-dim);
}
.footer-title{font-family:var(--display); font-size:1.9rem; letter-spacing:2px; color:#fff}
.footer-sub{font-family:var(--condensed); text-transform:uppercase; letter-spacing:2px; font-size:.82rem; margin-top:6px}
.small{font-size:.92rem}
@media (max-width:980px){
  :where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .panel{justify-self:start; width:min(520px,100%)}
}
@media (max-width:760px){
  .nav-inner{padding:16px 0}
  .nav-toggle{display:inline-flex}
  .section{padding:82px 0}
  .card,.article{padding:22px}
}


/* V4 additions */
.nav-toggle{
  transition: transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.nav-toggle:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
}

.staff-grid{
  margin-top:22px;
}
.chip-link{
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  font-family: var(--condensed);
  font-size: .8125rem;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.chip-link:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.08);
  border-color: rgba(110,166,215,.28);
}
@media (max-width: 760px){
  :where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .nav{
    background: rgba(6,13,20,.90);
  }
  .nav-inner{
    align-items:center;
    justify-content: space-between;
    min-height:72px;
  }
  .brand{
    min-width:0;
    flex: 1;
    overflow: hidden;
  }
  .brand-text strong{ font-size:1.55rem; }
  .brand-text span{ letter-spacing:2px; }
  .nav-auth-slot {
    flex-shrink: 0;
  }
  :where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .nav-auth-namn {
    display: none !important;
  }
  :where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .nav-auth-user {
    justify-content: flex-end;
  }
  .nav-links{
    display:none;
    position:absolute;
    top:100%;
    left:12px;
    right:12px;
    padding:12px;
    border-radius:22px;
    background: linear-gradient(180deg, rgba(12,25,38,.98), rgba(8,16,25,.98));
    border:1px solid rgba(110,166,215,.18);
    box-shadow: 0 24px 60px rgba(0,0,0,.42);
  }
  .nav-links.open{
    display:flex;
    flex-direction:column;
  }
  :where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .btn{
    width:100%;
    min-height:52px;
  }
  :where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .panel{
    width:100%;
    padding:22px;
  }
  .section{ padding:74px 0; }
  .content-wrap{ padding:28px 0 74px; }
  .article{
    padding:20px;
    border-radius:22px;
  }
}
@media (max-width: 520px){
  .chip-link{
    width:100%;
  }
}


/* V5 logo refinements */


/* V7 premium refinements */
:root:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])){
  --premium-glow: rgba(110,166,215,.18);
}
:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 0%, rgba(110,166,215,.06), transparent 24%),
    radial-gradient(circle at 10% 80%, rgba(110,166,215,.05), transparent 20%);
  z-index:1;
}
:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .panel{
  backdrop-filter: blur(16px);
  background:
    linear-gradient(180deg, rgba(15,31,48,.68), rgba(8,16,25,.88));
  border:1px solid rgba(110,166,215,.22);
  box-shadow:
    0 28px 80px rgba(0,0,0,.38),
    0 0 0 1px rgba(255,255,255,.03) inset;
}
:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .panel::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(110,166,215,.35), transparent);
}
.page-hero h1{
  text-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.card,
.article{
  backdrop-filter: blur(10px);
}
.card{
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(110,166,215,.04), transparent 35%);
  pointer-events:none;
}
.card:hover{
  transform: translateY(-3px);
  border-color: rgba(110,166,215,.28);
  box-shadow: 0 30px 80px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.02) inset;
}
.card{
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease, background .24s ease;
}
:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .footer{
  background:
    linear-gradient(180deg, rgba(5,10,16,.76), rgba(5,10,16,.88));
}
@media (max-width:760px){
  :where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .panel{
    padding:20px;
  }
}


/* V9 cinematic */
@keyframes cinematicDrift {
  0% { transform: scale(1.03) translate3d(0,0,0); }
  50% { transform: scale(1.08) translate3d(-1.2%, -0.6%, 0); }
  100% { transform: scale(1.05) translate3d(0.8%, -1%, 0); }
}

@keyframes shimmerSweep {
  0% { transform: translateX(-120%) skewX(-18deg); opacity: 0; }
  20% { opacity: .18; }
  55% { opacity: .10; }
  100% { transform: translateX(220%) skewX(-18deg); opacity: 0; }
}

.hero {
  isolation: isolate;
}

.hero::before{
  animation: cinematicDrift 22s ease-in-out infinite alternate;
}

.hero::after{
  height: 260px;
  background:
    linear-gradient(180deg, transparent, rgba(7,17,27,.72) 40%, rgba(7,17,27,.96)),
    radial-gradient(circle at 50% 100%, rgba(110,166,215,.10), transparent 42%);
}

.hero .shell::before{
  position:absolute;
  inset:-6% -10% auto auto;
  width:38vw;
  height:38vw;
  max-width:520px;
  max-height:520px;
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(255,255,255,.10), rgba(110,166,215,.06) 34%, rgba(110,166,215,0) 68%);
  filter: blur(26px);
  opacity:.55;
  z-index:-1;
  pointer-events:none;
}

.hero .shell::after{
  position:absolute;
  top:12%;
  left:-18%;
  width:36%;
  height:120%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  filter: blur(18px);
  opacity:.16;
  animation: shimmerSweep 10s linear infinite;
  pointer-events:none;
  z-index:-1;
}

.hero-sub{
  text-wrap: balance;
}



:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .panel{
  position: relative;
  overflow: hidden;
}

:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .panel::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 15% 18%, rgba(255,255,255,.06), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 40%);
  pointer-events:none;
}

:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .panel .eyebrow{
  position: relative;
  z-index: 1;
}

:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .panel h3,
:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .panel p{
  position: relative;
  z-index: 1;
}

.card,
.article,
:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .panel{
  box-shadow:
    0 30px 80px rgba(0,0,0,.38),
    0 0 0 1px rgba(255,255,255,.02) inset;
}

.page-hero{
  isolation:isolate;
}

.page-hero::before{
  animation: cinematicDrift 26s ease-in-out infinite alternate;
}

.page-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(7,17,27,.10), rgba(7,17,27,.64)),
    radial-gradient(circle at 50% 0%, rgba(110,166,215,.08), transparent 30%);
  pointer-events:none;
}

.article h2,
.page-hero h1{
  text-wrap: balance;
}

@media (max-width: 760px){
  .hero .shell::before{
    width:60vw;
    height:60vw;
    right:-10%;
    top:-2%;
    opacity:.48;
  }

  .hero .shell::after{
    width:60%;
    left:-40%;
    top:2%;
    opacity:.12;
  }

  .hero::after{
    height: 180px;
  }
}


/* Final clean logo fix */


/* ═══════════════════════════════════════════════════════════════════════════
   V23 – DESIGN HOTUP
   1. Undersidans typografi (article h2/h3, starkare hierarki)
   2. Ken Burns på hero (aktivera + smoothare drift)
   3. Glassmorfism på fact-strip + contact-block
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. ARTICLE TYPOGRAFI ──────────────────────────────────────────────────── */

.article h2 {
  font-family: var(--display);
  font-size: 2.6rem;
  letter-spacing: 2px;
  color: #f0f6fc;
  margin: 0 0 6px;
  line-height: 1.08;
}

.article h3 {
  font-family: var(--heading);
  font-size: 1.18rem;
  letter-spacing: .5px;
  color: #cfe3f2;
  margin: 36px 0 10px;
  padding-top: 28px;
  border-top: 1px solid rgba(110,166,215,.10);
}

/* Första h3 direkt efter h2 behöver ingen bordertop */
.article h2 + h3 {
  margin-top: 22px;
  padding-top: 0;
  border-top: none;
}

.article h4 {
  font-family: var(--condensed);
  font-size: 1rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue-400);
  margin: 22px 0 8px;
}

.article > p:first-of-type {
  font-size: 1.1rem;
  color: #9abdd4;
  line-height: 1.85;
}

.article strong {
  color: #d8eaf8;
  font-weight: 600;
}

.article a {
  color: var(--blue-400);
  text-decoration: none;
  border-bottom: 1px solid rgba(110,166,215,.25);
  transition: border-color .18s ease;
}
.article a:hover {
  border-bottom-color: rgba(110,166,215,.6);
}

/* Undvik att chip-links, btns och contact-block-länkar ärver article-länk-stilen */
.article .chip-link,
.article .btn,
.article .doc-card {
  border-bottom: none;
}

/* ── 2. KEN BURNS – starkare + mjukare drift ──────────────────────────────── */

@keyframes kenBurns {
  0%   { transform: scale(1.00) translate3d(0, 0, 0); }
  33%  { transform: scale(1.06) translate3d(-1.5%, -0.8%, 0); }
  66%  { transform: scale(1.04) translate3d(0.8%, -1.4%, 0); }
  100% { transform: scale(1.08) translate3d(-0.6%, 0.6%, 0); }
}

.hero::before {
  animation: kenBurns 28s ease-in-out infinite alternate !important;
  transform-origin: 55% 45%;
}

.page-hero::before {
  animation: kenBurns 34s ease-in-out infinite alternate !important;
  transform-origin: 50% 55%;
  animation-delay: -8s !important;
}

/* ── 3. GLASSMORFISM – fact-strip, contact-block, qf-item, status-card ────── */

/* Fact-strip items */

/* Contact-block glassmorfism */

/* Quick-facts items (om.html) */

/* Status-cards (vatten.html) */

/* Road-cards (vagforening.html) */

/* Bastu-items (hamn-strand.html) */
.bastu-item {
  background: rgba(14,32,52,.50) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(110,166,215,.10) !important;
}

/* Info-tiles (ovrigt.html) */

/* Emergency-cards (grannsamverkan.html) */

/* Staff-cards glassmorfism */

/* Note-block */

/* Doc-cards (protokoll.html) */
.doc-card {
  background: rgba(14,32,52,.50) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.doc-card:hover {
  background: rgba(110,166,215,.09) !important;
  border-color: rgba(110,166,215,.24) !important;
}



/* ═══════════════════════════════════════════════════════════════════════════
   V24 – KICKASS MOBILE + DESKTOP POLISH
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── GLOBALT: mjukare scroll, bättre tap-targets ──────────────────────────── */
html:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) { scroll-behavior: smooth; }
:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) * { -webkit-tap-highlight-color: transparent; }

/* ── HERO: skalning och luft ──────────────────────────────────────────────── */
@media (max-width: 760px) {
  /* Panel dold på mobil - info finns i faktastripen */
  :where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .panel {
    display: none;
  }
}

/* ── PAGE-HERO undersidor ─────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .page-hero {
    min-height: 44svh;
    display: flex;
    align-items: flex-end;
  }
  .page-hero h1 {
    margin-bottom: 12px;
  }
  .page-hero p {
    max-width: 100%;
  }
}

/* ── FAKTASTRIP ───────────────────────────────────────────────────────────── */

/* ── CONTENT-GRID: side-nav kollapsad på mobil ────────────────────────────── */

/* ── ARTICLE TYPOGRAFI MOBIL ──────────────────────────────────────────────── */
@media (max-width: 760px) {
  .article {
    padding: 24px 20px;
    border-radius: 24px;
  }
  .article h2 {
    font-size: clamp(1.9rem, 8vw, 2.6rem);
    letter-spacing: 1px;
    margin-bottom: 14px;
  }
  .article h3 {
    font-size: 1.08rem;
    margin-top: 28px;
    padding-top: 20px;
  }
  .article > p:first-of-type {
    font-size: 1rem;
  }
}

/* ── CARDS 3-GRID ─────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .card {
    padding: 22px 20px;
    border-radius: 20px;
    /* Horizontal layout on mobile */
    display: flex;
    gap: 16px;
    align-items: flex-start;
  }
  .card .eyebrow {
    font-size: 1.6rem;
    min-width: 32px;
    margin-bottom: 0;
    margin-top: 2px;
    color: rgba(110,166,215,.35);
  }
  .card h3 { font-size: 1rem; margin-bottom: 6px; }
  .card p  { font-size: .92rem; }
}

/* ── INFO + AKTUELLT GRID ──────────────────────────────────────────────────── */

/* ── QUOTE BAND ──────────────────────────────────────────────────────────────*/

/* ── STAFF-GRID ──────────────────────────────────────────────────────────────*/

/* ── CONTACT-BLOCK ────────────────────────────────────────────────────────── */

/* ── WARN-NOTE ────────────────────────────────────────────────────────────── */

/* ── EMERGENCY GRID (grannsamverkan) ─────────────────────────────────────── */
@media (max-width: 500px) {
  .emergency-card .num { font-size: 2.4rem; }
}

/* ── STATUS ROW (vatten) ──────────────────────────────────────────────────── */

/* ── BASTU ROW ────────────────────────────────────────────────────────────── */
@media (max-width: 680px) {
  .bastu-row { grid-template-columns: 1fr; gap: 10px; }
}

/* ── ROAD GRID ────────────────────────────────────────────────────────────── */

/* ── INFO ROW (övrigt) ────────────────────────────────────────────────────── */

/* ── FOOTER ──────────────────────────────────────────────────────────────────*/
@media (max-width: 760px) {
  .footer-inner {
    flex-direction: column;
    gap: 20px;
    padding-bottom: 40px;
  }
  .footer-title { font-size: 1.4rem; }
  .footer-sub { font-size: .8125rem; }
  .small { font-size: .85rem; }
}

/* ── SECTION SPACING ─────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .section { padding: 52px 0; }
}

/* ── QUICK-FACTS (om.html) ───────────────────────────────────────────────── */

/* ── DOC-GRID (protokoll) ────────────────────────────────────────────────── */

/* ── NAV HAMBURGER – bättre touch ────────────────────────────────────────── */
@media (max-width: 760px) {
  .nav-toggle {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
  }
}

/* ── DESKTOP POLISH: section-header förstärkt ────────────────────────────── */

/* Cards desktop: lite mer djup */
.card {
  position: relative;
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(110,166,215,.2), transparent);
}

/* Info-grid desktop: bättre proportioner */



/* ═══════════════════════════════════════════════════════════════════════════
   V24 HOTFIX – Mobilfixar baserade på screenshot
   ═══════════════════════════════════════════════════════════════════════════ */

/* Fix 1: Hero-bilden syns — opacity upp, gradient mjukare */
.hero::before {
  opacity: .88;
  background:
    linear-gradient(180deg,
      rgba(4,10,18,.15) 0%,
      rgba(4,10,18,.25) 40%,
      rgba(4,10,18,.82) 100%),
    var(--hero-bild) center 40% / cover !important;
}

/* Fix 2: Hero full skärmhöjd på mobil, text nertill */

/* Fix 3: Korten – tätare, bättre radbrytning */
@media (max-width: 760px) {
  .card {
    padding: 18px 16px !important;
    border-radius: 18px !important;
    gap: 14px !important;
    align-items: center !important;
  }
  .card p {
    font-size: .93rem !important;
    line-height: 1.55 !important;
  }
  .card h3 {
    font-size: .95rem !important;
    margin-bottom: 4px !important;
  }
  .card .eyebrow {
    font-size: 1.3rem !important;
    color: rgba(110,166,215,.3) !important;
    min-width: 28px !important;
  }
}

/* Fix 4: Sektionsavståndet mellan hero och cards */
@media (max-width: 760px) {
  .section {
    padding: 44px 0 !important;
  }
}

/* Fix 5: Info/aktuellt-korten — kompaktare */



/* ═══════════════════════════════════════════════════════════════════════════
   V25 KORTFIX – Rätt mobildesign för cards-3
   ═══════════════════════════════════════════════════════════════════════════ */

/* Mobil: kort = kompakt, vertikal stack, snygg rubrikrad */
@media (max-width: 760px) {

  /* Återställ flex-layouten från v24 */
  .card {
    display: grid !important;
    grid-template-columns: 44px 1fr !important;
    grid-template-rows: auto auto !important;
    column-gap: 14px !important;
    row-gap: 0 !important;
    align-items: start !important;
    padding: 20px 18px !important;
    border-radius: 18px !important;
  }

  /* Siffran: vänster kolumn, båda raderna */
  .card .eyebrow {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    font-size: 1.8rem !important;
    color: rgba(110,166,215,.28) !important;
    font-family: var(--display) !important;
    letter-spacing: 1px !important;
    line-height: 1.1 !important;
    padding-top: 3px !important;
    min-width: unset !important;
  }

  /* Rubrik: höger kolumn, rad 1 */
  .card h3 {
    grid-column: 2 !important;
    grid-row: 1 !important;
    font-size: 1rem !important;
    letter-spacing: 1.5px !important;
    margin: 0 0 6px !important;
    line-height: 1.2 !important;
    color: #e8f2fa !important;
  }

  /* Brödtext: höger kolumn, rad 2 */
  .card p {
    grid-column: 2 !important;
    grid-row: 2 !important;
    font-size: .9rem !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    color: var(--mist-dim) !important;
  }

  /* Ta bort ::before-glansen på mobil (stör grid-layout) */
  .card::before {
    display: none !important;
  }
}



/* ── FORUM OLÄST (upgraded) ──────────────────────────────────────────── */
@keyframes badge-pulse {
  0%,100% { box-shadow: 0 2px 8px rgba(226,75,74,.40); }
  50% { box-shadow: 0 2px 16px rgba(226,75,74,.65); }
}
.forum-trad-olast {
  border-color: rgba(110,166,215,.32) !important;
  background: rgba(110,166,215,.08) !important;
  box-shadow: inset 3px 0 0 #6ea6d7;
}
.forum-olast-prick {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6ea6d7, #5a9cd4);
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(110,166,215,.65);
  animation: prick-glow 2s ease-in-out infinite;
}
@keyframes prick-glow {
  0%,100% { box-shadow: 0 0 8px rgba(110,166,215,.65); }
  50% { box-shadow: 0 0 16px rgba(110,166,215,.90); }
}
.forum-trad-titel-olast {
  font-weight: 800 !important;
  color: #fff !important;
}
.forum-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: linear-gradient(135deg, #e24b4a 0%, #d63031 100%);
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 700;
  color: #fff;
  margin-left: 6px;
  box-shadow: 0 2px 8px rgba(226,75,74,.40);
  animation: badge-pulse 2s ease-in-out infinite;
}
/* ── TAB NAV (v2) ──────────────────────────────────────────────────── */
.tab-nav { gap:6px; margin-bottom:26px; flex-wrap:wrap; padding:6px; background:rgba(110,166,215,.03); border:1px solid rgba(110,166,215,.08); border-radius:16px; }
.tab-link { padding:9px 18px; border-radius:12px; font-family:var(--condensed); font-size:.8125rem; text-transform:uppercase; text-decoration:none; color:var(--mist-dim); border:1px solid transparent; transition:all .18s; position:relative; white-space:nowrap; }
.tab-link.active { background:rgba(110,166,215,.18); border-color:rgba(110,166,215,.35); color:#e0edf8; box-shadow:0 2px 12px rgba(110,166,215,.12); }
.tab-link:hover:not(.active) { background:rgba(110,166,215,.06); color:#e0edf8; }

/* ── OLÄST-BANNER ──────────────────────────────────────────────────── */

/* ── FORUM (v2) ────────────────────────────────────────────────────── */
.forum-trad-list { display:flex; flex-direction:column; gap:10px; max-width:900px; }
.forum-trad-row {
  display:flex; align-items:center; gap:16px; padding:18px 22px;
  background:rgba(110,166,215,.04); border:1px solid rgba(110,166,215,.10);
  border-radius:16px; text-decoration:none; color:inherit;
  transition:background .18s, border-color .18s, transform .18s;
}
.forum-trad-row:hover { background:rgba(110,166,215,.09); border-color:rgba(110,166,215,.26); transform:translateX(3px); }
.forum-trad-avatar { width:42px; height:42px; border-radius:50%; background:rgba(110,166,215,.12); border:1px solid rgba(110,166,215,.22); display:flex; align-items:center; justify-content:center; font-family:var(--condensed); font-size:.85rem; font-weight:700; color:var(--blue-400); flex-shrink:0; }
.forum-trad-info { flex:1; min-width:0; }
.forum-trad-titel { font-size:1rem; font-weight:600; color:#e0edf8; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.forum-trad-meta { font-size:.8125rem; color:var(--mist-dim); }
.forum-trad-badge { display:flex; flex-direction:column; align-items:flex-end; gap:2px; flex-shrink:0; }
.forum-trad-svar-count { font-family:var(--condensed); font-size:.8125rem; letter-spacing:.08em; color:var(--blue-400); }
.forum-trad-svar-label { font-size:.8125rem; color:rgba(110,166,215,.40); }
.forum-inlagg {
  background:rgba(110,166,215,.04); border:1px solid rgba(110,166,215,.10);
  border-radius:20px; padding:22px 24px; margin-bottom:14px; max-width:900px;
}
.forum-inlagg-text { font-size:.94rem; color:#b8d4ea; line-height:1.75; white-space:pre-wrap; }
.forum-bild-wrap { margin-top:16px; }
.forum-bild { max-width:100%; max-height:420px; border-radius:14px; object-fit:contain; border:1px solid rgba(110,166,215,.12); }
.forum-svar-form-wrap { margin-top:28px; padding:24px; background:rgba(110,166,215,.04); border:1px solid rgba(110,166,215,.12); border-radius:20px; max-width:900px; }
.forum-form .field-input { width:100%; background:rgba(18,35,52,.90); border:1px solid rgba(110,166,215,.20); border-radius:12px; padding:12px 16px; color:#e0edf8; font-family:var(--body); font-size:.92rem; outline:none; transition:border-color .18s; box-sizing:border-box; }
.forum-form .field-input:focus { border-color:rgba(110,166,215,.45); }
.forum-form textarea.field-input { min-height:100px; resize:vertical; }
.forum-del-btn { padding:6px 14px; background:rgba(226,75,74,.08); border:1px solid rgba(226,75,74,.22); border-radius:999px; color:#f08080; font-size:.8125rem; cursor:pointer; font-family:var(--condensed); letter-spacing:.06em; transition:background .15s,transform .15s; }
.forum-del-btn:hover { background:rgba(226,75,74,.18); transform:scale(1.05); }
.forum-bild-label { border:1px solid rgba(110,166,215,.18); border-radius:999px; transition:background .15s; }
.forum-bild-label:hover { background:rgba(110,166,215,.15); }
.forum-tom { text-align:center; padding:48px 20px; color:var(--mist-dim); }
.forum-tom-icon { font-size:2.5rem; margin-bottom:12px; }
@media(max-width:600px) {
  .forum-trad-avatar { display:none; }
  .forum-trad-row { padding:14px 16px; }
}

/* ── NAV DROPDOWNS (v2) ────────────────────────────────────────────── */
.nav-dropdown {
  position: relative;
}
.nav-dropdown-trigger {
  font-family: var(--condensed);
  font-size: .92rem;
  cursor: pointer;
  transition: color .22s ease;
}
.nav-caret {
  font-size: .8125rem;
  transition: transform .2s ease;
}
.nav-dropdown:hover .nav-caret {
  transform: rotate(180deg);
  opacity: 1;
}
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  min-width: 200px;
  padding-top: 12px;
  z-index: 1000;
  opacity: 0;
  animation: dropdown-in .2s ease forwards;
}
@keyframes dropdown-in {
  0% { opacity:0; transform:translateX(-50%) translateY(-6px); }
  100% { opacity:1; transform:translateX(-50%) translateY(0); }
}
/* Klick och tangentbord öppnar också menyn på dator (2026-10-30) */
@media (min-width: 761px) {
  .nav-dropdown.open .nav-dropdown-menu { display: block; }
  .nav-dropdown.open .nav-caret { transform: rotate(180deg); opacity: 1; }
}
.nav-dropdown-trigger:focus-visible,
.nav-dropdown-menu-inner a:focus-visible,
.nav-toggle:focus-visible { outline: 2px solid #8cc4f0; outline-offset: 2px; border-radius: 8px; }
.nav-dropdown-menu-inner a {
  transition: background .15s ease;
}
.nav-dropdown-menu-inner a:hover {
  background: rgba(110,166,215,.10);
}

/* ── NAV COMPACT (reduce gap on desktop) ──────────────────────────── */

/* ── NAV SEPARATOR (hidden on desktop with dropdowns) ──────────────── */

/* ── LOGIN TOAST ───────────────────────────────────────────────────── */
.login-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.95);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 32px;
  background: linear-gradient(135deg, rgba(12,25,38,.98), rgba(8,16,25,.99));
  border: 1px solid rgba(110,166,215,.35);
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(0,0,0,.6), 0 0 0 1px rgba(110,166,215,.10), 0 0 80px rgba(110,166,215,.08);
  z-index: 10001;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  opacity: 0;
  animation: toast-in .5s .3s cubic-bezier(.16,1,.3,1) forwards;
  max-width: calc(100vw - 40px);
}
.login-toast:hover {
  border-color: rgba(110,166,215,.55);
  box-shadow: 0 24px 64px rgba(0,0,0,.6), 0 0 30px rgba(110,166,215,.18);
}
.login-toast-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(3,8,15,.5);
  backdrop-filter: blur(4px);
  z-index: 10000;
  opacity: 0;
  animation: backdrop-in .4s .2s ease forwards;
}
@keyframes backdrop-in {
  0% { opacity:0; }
  100% { opacity:1; }
}
@keyframes backdrop-out {
  0% { opacity:1; }
  100% { opacity:0; }
}
@keyframes toast-in {
  0% { opacity:0; transform:translate(-50%, -50%) scale(.95); }
  100% { opacity:1; transform:translate(-50%, -50%) scale(1); }
}
@keyframes toast-out {
  0% { opacity:1; transform:translate(-50%, -50%) scale(1); }
  100% { opacity:0; transform:translate(-50%, -50%) scale(.95); }
}
.login-toast-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}
.login-toast-content {
  flex: 1;
  min-width: 0;
}
.login-toast-title {
  font-family: var(--condensed);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: #e0edf8;
}
.login-toast-sub {
  font-size: .8125rem;
  color: var(--mist-dim);
  margin-top: 2px;
}
.login-toast-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  background: linear-gradient(135deg, #e24b4a, #d63031);
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(226,75,74,.45);
}
.login-toast-close {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(30,50,70,.95);
  border: 1px solid rgba(110,166,215,.25);
  color: var(--mist-dim);
  font-size: .8125rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.login-toast-close:hover {
  background: rgba(226,75,74,.2);
  color: #f08080;
}

/* ── MOBILE DROPDOWN OVERRIDE ──────────────────────────────────────── */
@media (max-width: 760px) {
  .nav-dropdown-menu {
    position: static;
    display: none;
    min-width: 0;
    padding-top: 0;
    animation: none;
    opacity: 1;
    z-index: auto;
  }
  .nav-dropdown.open:hover .nav-dropdown-menu {
    display: block;
  }
}

/* ── FORUM PIN STYLES ──────────────────────────────────────────────── */
.forum-trad-pinnad {
  border-color: rgba(240,180,60,.25) !important;
  background: rgba(240,180,60,.04) !important;
  box-shadow: inset 3px 0 0 rgba(240,180,60,.6);
}
.forum-pin-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.forum-pin-label {
  font-family: var(--condensed);
  font-size: .8125rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(240,180,60,.8);
  font-weight: 700;
  margin-right: 4px;
}

/* ── FORUM SEARCH ──────────────────────────────────────────────────── */
.forum-search-wrap {
  margin-bottom: 18px;
  max-width: 900px;
}
.forum-search-input {
  width: 100%;
  background: rgba(18,35,52,.90);
  border: 1px solid rgba(110,166,215,.20);
  border-radius: 12px;
  padding: 11px 16px 11px 42px;
  color: #e0edf8;
  font-family: var(--body);
  font-size: .92rem;
  outline: none;
  transition: border-color .18s;
  box-sizing: border-box;
}
.forum-search-input:focus {
  border-color: rgba(110,166,215,.45);
}
.forum-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--blue-400);
  font-size: .9rem;
  pointer-events: none;
}

/* ── NEWS ADMIN CARDS ──────────────────────────────────────────────── */

/* ── NEWS FRESH TAG ────────────────────────────────────────────────── */

/* ── NEWS ITEM FRESH (startsidan) ──────────────────────────────────── */

/* ── GALLERY ADMIN DRAG-AND-DROP ───────────────────────────────────── */
.galleri-admin-card {
  position: relative;
  border: 1px solid rgba(110,166,215,.12);
  border-radius: 14px;
  transition: transform .18s, box-shadow .18s, border-color .18s, opacity .18s;
}
.galleri-admin-card:hover {
  border-color: rgba(110,166,215,.30);
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
  transform: translateY(-2px);
}
.galleri-admin-card.is-dragging {
  opacity: .5;
  transform: scale(.95);
  border-color: rgba(110,166,215,.50);
  box-shadow: 0 0 20px rgba(110,166,215,.25);
  cursor: grabbing;
}
.galleri-admin-placeholder {
  border: 2px dashed rgba(110,166,215,.35);
  border-radius: 14px;
  background: rgba(110,166,215,.04);
  min-height: 160px;
}
.galleri-admin-drag-handle {
  position: absolute;
  top: 6px;
  left: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  z-index: 2;
  transition: background .15s;
}
.galleri-admin-card:hover .galleri-admin-drag-handle {
  opacity: 1;
}
.galleri-admin-thumb {
  overflow: hidden;
}
.galleri-admin-thumb img {
  width: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.galleri-admin-card:hover .galleri-admin-thumb img {
  transform: scale(1.05);
}
.galleri-admin-action {
  border-radius: 8px;
  background: rgba(8,18,30,.75);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(110,166,215,.20);
  justify-content: center;
  font-size: .8125rem;
  color: #e0edf8;
  cursor: pointer;
  transition: background .15s;
}
.galleri-admin-action:hover {
  background: rgba(110,166,215,.25);
}
.galleri-admin-delete {
  border-color: rgba(226,75,74,.25);
  color: #f08080;
}
.galleri-admin-delete:hover {
  background: rgba(226,75,74,.20);
}

/* ── DOCUMENT VIEW (member) ────────────────────────────────────────── */
.dok-grid {
  gap: 8px;
}
.dok-card {
  border: 1px solid rgba(110,166,215,.09);
  border-radius: 14px;
  transition: background .18s, border-color .18s, transform .18s;
}
.dok-card:hover {
  background: rgba(110,166,215,.07);
  border-color: rgba(110,166,215,.24);
  transform: translateX(4px);
}

/* ── DOCUMENT ADMIN ────────────────────────────────────────────────── */

/* ── DOCUMENT DRAG-AND-DROP ADMIN ──────────────────────────────────── */
.dok-admin-grid {
  display: grid;
  gap: 8px;
}
.dok-drag-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(110,166,215,.09);
  border-radius: 12px;
  cursor: grab;
  transition: transform .18s, box-shadow .18s, border-color .18s, opacity .18s;
}
.dok-drag-card:hover {
  border-color: rgba(110,166,215,.22);
  background: rgba(110,166,215,.03);
}
.dok-drag-card.is-dragging {
  opacity: .4;
  transform: scale(.98);
  border-color: rgba(110,166,215,.40);
  cursor: grabbing;
}
.dok-drag-handle {
  font-size: .85rem;
  flex-shrink: 0;
  padding: 4px;
  transition: color .15s;
}
.dok-drag-card:hover .dok-drag-handle {
  color: rgba(180,210,235,.7);
}
.dok-drag-icon {
  justify-content: center;
}
.dok-drag-form {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dok-drag-title {
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 3px 8px;
  font-family: var(--body);
  font-size: .88rem;
  font-weight: 600;
  transition: border-color .18s, background .18s;
}
.dok-drag-title:hover,
.dok-drag-title:focus {
  border-color: rgba(110,166,215,.25);
  background: rgba(18,35,52,.60);
}
.dok-drag-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.dok-drag-select {
  border: 1px solid rgba(110,166,215,.18);
  border-radius: 6px;
  padding: 2px 8px;
  font-family: var(--condensed);
  font-size: .8125rem;
  letter-spacing: .06em;
  cursor: pointer;
}
.dok-drag-meta {
  font-size: .8125rem;
  font-family: var(--condensed);
  letter-spacing: .04em;
}
.dok-drag-actions {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .dok-drag-card {
    flex-wrap: wrap;
  }
  .dok-drag-handle {
    order: -1;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   NAV-LAYOUT FIX (tillagt 2026-05-16, v2)
   Tre problem som löses:
   1. Anslagstavla-länken (SVG istället för 📋-emoji) wrap:ade tidigare
      → flex-wrap: nowrap (gjort på rad 115 ovan)
   2. .nav-auth-slot klipps av till höger
      → flex-shrink: 0 + margin-left
   3. På smal skärm visades både nav-länkar OCH hamburger
      → restaurerar default mobile-beteende (max-width: 760px)
   ═══════════════════════════════════════════════════════════════════ */

/* Endast desktop (över 760px): se till att inget i navet krymper bort */
@media (min-width: 761px) {
  .brand,
  .nav-auth-slot {
    flex-shrink: 0;
  }
  .nav-links {
    flex: 1 1 auto;
    min-width: 0;
  }
  .nav-auth-slot {
    margin-left: 4px;
  }
}

/* SVG-ikon i Anslagstavla – håll ihop ikon och text */
.nav-anslagstavla {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.nav-anslagstavla svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  opacity: .85;
  flex-shrink: 0;
}

/* På smal desktop: minska font och gap så allt får plats utan att wrap:a */


/* ═══════════════════════════════════════════════════════════════════
   BOTTOM NAV (mobil) — visas under 760px, döljs på desktop
   Touch-vänlig design: större ikoner, extra luft i botten för
   att inte krocka med iOS hem-indikator.
   ═══════════════════════════════════════════════════════════════════ */

.bottom-nav {
  display: none;  /* default: dold på desktop */
}

@media (max-width: 760px) {
  .bottom-nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    /* iOS: addera EXTRA luft utöver safe-area så texten inte ligger
       precis ovanför hem-indikator-strecket. 14px utöver iOS:s eget värde. */
    padding-bottom: calc(var(--sa-bottom, env(safe-area-inset-bottom, 0px)) + 14px);
    padding-top: 4px;

    /* iOS Chrome fix: tvinga ett eget composite-lager så position:fixed
       respekteras även när adressfältet växer/krymper vid scroll.
       Utan detta kan navet "rida med" innehållet under scroll på Chrome iOS. */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
  }

  .bnav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Mer rymlig padding så hela ytan känns klickbar */
    transition: color .15s;
    position: relative;
  }

  .bnav-item span {
    font-family: var(--condensed);
    font-size: .8125rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    text-align: center;
  }

  .bnav-item:active {
    color: #fff;
    background: rgba(110, 166, 215, .10);
  }

  .bnav-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 30px;
    height: 3px;
    background: var(--blue-400);
    border-radius: 0 0 3px 3px;
  }

  /* Lägg padding i botten av body så bottom-nav inte täcker innehållet.
     Total nav-höjd: ~72px innehåll + 14px bottom-padding + 4px top + safe-area
     = ~90px + safe-area. Extra 8px andningsrum. */
}

/* Större iPhones (Pro/Pro Max): ännu rymligare nav */
@media (max-width: 760px) and (min-width: 420px) {
  .bnav-item {
    min-height: 76px;
    padding: 16px 4px 12px;
    gap: 8px;
  }
  .bnav-item svg {
    width: 30px;
    height: 30px;
  }
  .bnav-item span {
    font-size: .8125rem;
  }
  :where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) body {
    padding-bottom: calc(104px + var(--sa-bottom, env(safe-area-inset-bottom, 0px)));
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   MIGRERAT FRÅN styles-patch2.css (2026-07-29)
   ─────────────────────────────────────────────────────────────────────
   Hela innehållet i styles-patch2.css flyttades hit och patchfilen
   raderades — den externa beroendekedjan orsakade två buggar (CSS som
   inte laddade i desktop, och notissiffran som klipptes av en för brett
   skriven ellipsis-regel). Ellipsis-regeln är rättad i flytten:
   ".bnav-item span" → ".bnav-item > span:last-child" så den bara träffar
   etiketten, inte ikon-wrappern med sifferbrickan.
   Blocket ligger SIST i filen för att bevara exakt samma kaskadordning
   som när patchen laddades som separat fil efter styles.css.
   ═══════════════════════════════════════════════════════════════════ */



/* =====================================================================
   styles-patch2.css - PWA fixes
   Loser sidled-scroll-problem i PWA-lage
   ===================================================================== */

/* iOS autozoom-fix:
   Nar man fokuserar en input/textarea med font-size < 16px zoomar iOS
   automatiskt in. Detta gor att sidan blir 7% bredare an viewporten,
   vilket triggar sidled-scroll. Fix: tvinga 16px pa alla fokuserbara falt. */
:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) input, :where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) textarea, :where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) select, :where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) button {
  font-size: 16px !important;
}

@media (display-mode: standalone) {
  :where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) input, :where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) textarea, :where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) select {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
}

/* Basskydd overallt */
html:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])), :where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) body {
  max-width: 100%;
  margin: 0;
  overscroll-behavior-x: none;
}

/* PWA-specifika atgarder */
@media (display-mode: standalone) {
  html:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) {
    touch-action: pan-y pinch-zoom !important;   /* v40: zoom med två fingrar ska alltid gå (slutgranskningen UX H2) */
    -ms-touch-action: pan-y pinch-zoom !important;
    overflow-x: clip !important;
  }

  :where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) body {
    touch-action: pan-y pinch-zoom !important;   /* v40: zoom med två fingrar ska alltid gå (slutgranskningen UX H2) */
    -ms-touch-action: pan-y pinch-zoom !important;
    overflow-x: clip !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
  }

  :where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) body > * {
    touch-action: pan-y pinch-zoom;
    max-width: 100%;
  }
}

/* Specifika element som tenderar att spranga sidan */
:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) textarea, :where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) input, :where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) select {
  max-width: 100%;
}

:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) pre, :where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) code, .forum-inlagg-text pre, .forum-inlagg-text code {
  max-width: 100%;
  overflow-x: auto;
  word-wrap: break-word;
  word-break: break-word;
}

.forum-inlagg-text {
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  max-width: 100%;
}

.forum-inlagg-text a,
.forum-inlagg a {
  word-break: break-all;
  overflow-wrap: anywhere;
}

:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) img, :where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) video, :where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) iframe, :where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) svg {
  max-width: 100%;
  height: auto;
}

.forum-citat,
:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) blockquote {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) table {
  max-width: 100%;
}

form.forum-form,
.forum-inlagg form {
  max-width: 100%;
}

@media (max-width: 380px) {
  .forum-inlagg,
  :where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .kort {
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* Bottom-nav */
@media (max-width: 420px) {
  .bottom-nav .bnav-item {
    padding-left: 2px !important;
    padding-right: 2px !important;
    min-width: 0;
  }
}

@media (max-width: 360px) {
  .bottom-nav .bnav-item > span:last-child {
    font-size: .8125rem !important;   /* 11 px på de minsta telefonerna */
  }
}

/* Header pa mobil */

/* =====================================================================
   DM (Inkorg) - Radera-knappar
   ===================================================================== */

/* Radera HELA konversationen (knapp i headern) */
.dm-radera-konv-btn {
  padding: 8px 14px;
  background: rgba(226, 75, 74, 0.08);
  border: 1px solid rgba(226, 75, 74, 0.25);
  border-radius: 999px;
  color: #f08080;
  font-family: var(--condensed, sans-serif);
  font-size: .8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.dm-radera-konv-btn:hover {
  background: rgba(226, 75, 74, 0.18);
  transform: scale(1.04);
}

/* Radera ENSKILT meddelande (visas vid hover bredvid mina egna bubblor) */
.dm-bubbel-rad {
  position: relative;
}
.dm-bubbel-radera {
  margin: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity 0.15s;
  margin-left: 4px;
}
.dm-bubbel-rad:hover .dm-bubbel-radera,
.dm-bubbel-rad:focus-within .dm-bubbel-radera {
  opacity: 1;
}
/* Pa touch-enheter (utan hover) visa alltid knappen pa mina bubblor */
@media (hover: none) {
  .dm-bubbel-radera {
    opacity: 0.5;
  }
  .dm-bubbel-radera:active {
    opacity: 1;
  }
}
.dm-bubbel-radera-btn {
  background: transparent;
  border: 0;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 0.85rem;
  color: rgba(240, 128, 128, 0.7);
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.dm-bubbel-radera-btn:hover,
.dm-bubbel-radera-btn:active {
  background: rgba(226, 75, 74, 0.15);
  color: #f08080;
}

/* Radera-knapp pa konversation i listvyn (swipe-style) */
.dm-konv-rad-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 6px;
}
.dm-konv-rad-wrap .dm-konv-rad {
  flex: 1;
}
.dm-konv-radera-form {
  margin: 0;
  display: flex;
  align-items: center;
}
.dm-konv-radera-btn {
  background: rgba(226, 75, 74, 0.06);
  border: 1px solid rgba(226, 75, 74, 0.18);
  color: rgba(240, 128, 128, 0.6);
  padding: 0 14px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 1.05rem;
  height: 100%;
  min-height: 56px;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.dm-konv-radera-btn:hover,
.dm-konv-radera-btn:active {
  background: rgba(226, 75, 74, 0.18);
  color: #f08080;
  transform: scale(1.05);
}

/* Pa smala skarmar - mindre padding sa allt ryms */
@media (max-width: 480px) {
  .dm-radera-konv-btn {
    padding: 6px 10px;
    font-size: .8125rem;
  }
  .dm-konv-radera-btn {
    padding: 0 10px;
    font-size: 0.95rem;
  }
}

/* =====================================================================
   DESIGN-UPPGRADE: DM-konversation
   ===================================================================== */

/* Kompaktare header - ta bort onodig vertikal yta */
.dm-chat-header-kompakt {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: rgba(13, 30, 46, 0.55);
  border: 1px solid rgba(110, 166, 215, 0.16);
  border-radius: 14px;
  flex-wrap: nowrap;
}
.dm-chat-header-kompakt h2 {
  margin: 0 !important;
  font-size: 1.05rem !important;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dm-chat-header-kompakt .section-kicker {
  display: none;
}
.dm-chat-header-kompakt .dm-radera-konv-btn {
  padding: 6px 10px;
  font-size: .8125rem;
  flex-shrink: 0;
}

/* Tom-state - mindre fluffig */
.dm-chat .dm-tom {
  padding: 40px 20px !important;
  min-height: 200px !important;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* DM-chat sjalv - mer hojd, mindre padding pa mobil */
.dm-chat {
  min-height: 400px !important;
  max-height: 65vh !important;
  padding: 16px !important;
}

/* MINA BUBBLOR - solid bla, tydligt utstickande */
.dm-bubbel-rad.mitt .dm-bubbel {
  background: linear-gradient(135deg, #4d8bc4 0%, #3d7cb4 100%) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(77, 139, 196, 0.25);
}
.dm-bubbel-rad.mitt .dm-bubbel-text {
  color: #fff !important;
  font-weight: 400;
}
.dm-bubbel-rad.mitt .dm-bubbel-tid {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* ANDRAS BUBBLOR - ljusa, vita-ish med mork text */
.dm-bubbel-rad.andras .dm-bubbel {
  background: rgba(220, 235, 248, 0.95) !important;
  border: 0 !important;
  color: #14253a !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.dm-bubbel-rad.andras .dm-bubbel-text {
  color: #14253a !important;
  font-weight: 400;
}
.dm-bubbel-rad.andras .dm-bubbel-tid {
  color: rgba(20, 37, 58, 0.55) !important;
}

/* Bubblor far lite mer luft */
.dm-bubbel {
  padding: 11px 16px !important;
  max-width: 80% !important;
}
@media (max-width: 640px) {
  .dm-bubbel { max-width: 85% !important; }
}

/* Radera-knappen pa bubblan ar svar att se mot vit bakgrund - ge den bra kontrast */
.dm-bubbel-rad.mitt .dm-bubbel-radera-btn {
  color: rgba(255, 200, 200, 0.85);
}
.dm-bubbel-rad.mitt .dm-bubbel-radera-btn:hover,
.dm-bubbel-rad.mitt .dm-bubbel-radera-btn:active {
  background: rgba(255, 100, 100, 0.20);
  color: #ffb0b0;
}

/* =====================================================================
   DESIGN-UPPGRADE: DM-skrivruta - auto-resize, storre default
   ===================================================================== */
.dm-skriv-form {
  padding: 14px !important;
  align-items: stretch !important;
  flex-direction: row;
  position: sticky;
  z-index: 6;
  /* Fix 2026-07-29 (Maths fynd): bottom:0 la rutan BAKOM den fasta
     bottenraden (~90px + safe-area hög, se main-paddingen ovan), så den
     "jackade i" först när sidan var helt skrollad. Rätt ankare är
     ovanför bottenraden — samma formel som main's padding-bottom.
     Solid bakgrund + blur så chatten inte lyser igenom när den svävar. */
  bottom: calc(98px + var(--sa-bottom, env(safe-area-inset-bottom, 0px)));
  background: rgba(10, 22, 36, .94) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, .35);
}
/* Desktop (ingen bottenrad): fäst strax ovanför fönsterkanten */
@media (min-width: 761px) {
  .dm-skriv-form { bottom: 12px; }
}
.dm-skriv-form textarea {
  min-height: 90px !important;        /* ~3 rader default */
  max-height: 220px !important;       /* ~8 rader */
  font-size: 16px !important;         /* stoppa iOS autozoom */
  line-height: 1.5 !important;
  padding: 12px 16px !important;
  resize: none !important;             /* JS hanterar auto-resize */
}
.dm-skriv-form button {
  align-self: flex-end;
  flex-shrink: 0;
}

/* =====================================================================
   DESIGN-UPPGRADE: Anslagstavlan - avsandare har egen accent-farg
   ===================================================================== */

/* Avsandare-accent-farger. 12 farger som fordelas via medlem_nr modulo.
   Sjalva farg-klassen sattas i PHP. */
:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .av-1  { --av-farg: #6ea6d7; --av-farg-mork: #2c5984; }  /* bla */
:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .av-2  { --av-farg: #a8d8b8; --av-farg-mork: #3a754e; }  /* gron */
:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .av-3  { --av-farg: #d8b86e; --av-farg-mork: #7e662a; }  /* gul */
:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .av-4  { --av-farg: #e09b9b; --av-farg-mork: #8a4848; }  /* rosa */
:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .av-5  { --av-farg: #c298d8; --av-farg-mork: #6e4a85; }  /* lila */
:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .av-6  { --av-farg: #6ed8c9; --av-farg-mork: #2c756b; }  /* tealgron */
:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .av-7  { --av-farg: #d89870; --av-farg-mork: #8a5a32; }  /* orange */
:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .av-8  { --av-farg: #9fc3e8; --av-farg-mork: #3b6790; }  /* ljusbla */
:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .av-9  { --av-farg: #b8d894; --av-farg-mork: #567339; }  /* limegron */
:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .av-10 { --av-farg: #d8a4cc; --av-farg-mork: #855073; }  /* gammelrosa */
:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .av-11 { --av-farg: #88d4d8; --av-farg-mork: #3b757a; }  /* turkos */
:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .av-12 { --av-farg: #c0c0d8; --av-farg-mork: #6a6a84; }  /* gragra */

/* Avatar i forum-inlagg - anvand avsandar-fargen */

/* Vansterkant pa inlagget = avsandar-fargen */
.forum-inlagg {
  border-left: 3px solid var(--av-farg, rgba(110, 166, 215, 0.3)) !important;
  padding-left: 18px !important;
}

/* Avsandar-namn far en liten accent ocksa */

/* Avatar i konv-listan ocksa */
.dm-konv-rad .dm-konv-avatar {
  background: linear-gradient(135deg, var(--av-farg, #6ea6d7), var(--av-farg-mork, #2c5984)) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
}

/* Flode-lista (anslagstavlan, kort-vy) - avsandar-farg pa avatar + kant */

/* Vansterkant pa flode-trad-kort */

/* Avsandar-namn i flode-meta */

/* =====================================================================
   DASHBOARD - Hem-fliken
   ===================================================================== */

/* Aktivitets-kort (olästa) - mer iögonfallande */

/* Tom-state */

/* Snabblänkar-rad */

/* Mobil-anpassning */

/* =====================================================================
   INSTALLNINGAR - hopfallbara sektioner
   ===================================================================== */

:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .installningar {
  flex-direction: column;
}

.instalg-sektion {
  border: 1px solid rgba(110, 166, 215, 0.18);
  border-radius: 14px;
  transition: border-color 0.18s;
}

/* Summary-raden ar klickbar header */
.instalg-summary {
  list-style: none;
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}

.instalg-summary::-webkit-details-marker { display: none; }

.instalg-summary:hover {
  background: rgba(110, 166, 215, 0.06);
}

.instalg-ikon {
  text-align: center;
}

.instalg-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.instalg-pil {
  font-size: 1.2rem;
  flex-shrink: 0;
  transition: transform 0.2s;
}

/* Innehall (det som expanderar) */

/* Pa mobil - lite mindre padding */

/* =====================================================================
   TAB-NAV pa mobil - horisontell scroll istallet for wrap
   ===================================================================== */
@media (max-width: 640px) {
  .tab-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Snap-points for snyggare scrollning */
    scroll-snap-type: x proximity;
    /* Lite mer luft fran sidkanten */
    padding: 6px 10px;
    /* Gom scrollbar i Webkit-baserade browsers */
    scrollbar-width: none;
    /* Indikera att man kan scrolla med en gradient pa hogerkanten */
    mask-image: linear-gradient(to right, black 0%, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 0%, black 90%, transparent 100%);
  }
  .tab-nav::-webkit-scrollbar { display: none; }

  .tab-link {
    flex-shrink: 0;
    scroll-snap-align: start;
    /* Knapparna ska INTE bli for ihoptryckta */
    padding: 9px 16px;
  }

  /* Active flik ska vara synlig - scroll automatiskt nar den ar aktiv */
  .tab-link.active {
    /* Centrum-ankare for auto-scroll */
    scroll-snap-align: center;
  }
}

/* =====================================================================
   MATRIS - medlemskort: ren rad, modal handlar resten
   ===================================================================== */

/* =====================================================================
   SHOUT (admin) - skicka meddelande till alla
   ===================================================================== */

.shout-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: rgba(13, 30, 46, 0.55);
  border: 1px solid rgba(110, 166, 215, 0.18);
  border-radius: 16px;
  margin-bottom: 28px;
}

.shout-label {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shout-label-text {
  font-family: var(--condensed, sans-serif);
  font-size: .8125rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--mist-dim, #8fa3b7);
}

.shout-hint {
  text-transform: none;
  letter-spacing: 0;
  font-style: italic;
  opacity: 0.75;
  font-weight: normal;
}

.shout-input {
  width: 100%;
  padding: 12px 14px;
  background: rgba(7, 17, 28, 0.6);
  border: 1px solid rgba(110, 166, 215, 0.2);
  border-radius: 10px;
  color: #e0edf8;
  font-size: 16px !important;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.shout-input:focus {
  outline: none;
  border-color: rgba(110, 166, 215, 0.55);
}

.shout-textarea {
  resize: none;
  min-height: 90px;
  line-height: 1.5;
}

.shout-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(7, 17, 28, 0.4);
  border-radius: 10px;
}

.shout-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--mist, #c8d3de);
  cursor: pointer;
  line-height: 1.45;
}

.shout-check input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 3px;
}

.shout-check-viktig {
  padding: 10px 12px;
  background: rgba(240, 128, 128, 0.06);
  border: 1px solid rgba(240, 128, 128, 0.25);
  border-radius: 8px;
}

.shout-knappar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.shout-skicka-btn {
  font-size: 0.92rem !important;
  padding: 12px 24px !important;
}

.shout-feedback {
  padding: 14px 18px;
  border-radius: 10px;
  margin-bottom: 18px;
  font-size: 0.94rem;
  line-height: 1.5;
}

.shout-feedback-ok {
  background: rgba(168, 216, 184, 0.10);
  border: 1px solid rgba(168, 216, 184, 0.35);
  color: #a8d8b8;
}

.shout-feedback-fel {
  background: rgba(240, 128, 128, 0.10);
  border: 1px solid rgba(240, 128, 128, 0.35);
  color: #f0a0a0;
}

/* Historik */
.shout-historik {
  margin-top: 32px;
}

.shout-historik-rubrik {
  font-family: var(--condensed, sans-serif);
  font-size: 0.85rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--mist-dim, #8fa3b7);
  margin: 0 0 16px;
}

.shout-historik-rad {
  background: rgba(13, 30, 46, 0.40);
  border: 1px solid rgba(110, 166, 215, 0.12);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 12px;
}

.shout-historik-rad.shout-historik-viktig {
  border-color: rgba(240, 128, 128, 0.35);
  background: linear-gradient(135deg, rgba(240, 128, 128, 0.04), rgba(13, 30, 46, 0.40));
}

.shout-historik-toppstrip {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: .8125rem;
  color: var(--mist-dim, #8fa3b7);
  font-family: var(--condensed, sans-serif);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.shout-historik-typ {
  font-weight: 600;
  color: #6ea6d7;
}

.shout-historik-viktig .shout-historik-typ {
  color: #f0a0a0;
}

.shout-historik-tid {
  margin-left: auto;
  opacity: 0.75;
}

.shout-historik-titel {
  font-size: 1.02rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
}

.shout-historik-text {
  color: var(--mist, #c8d3de);
  line-height: 1.5;
  margin-bottom: 10px;
  font-size: 0.92rem;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.shout-historik-stat {
  font-size: .8125rem;
  color: var(--mist-dim, #8fa3b7);
  border-top: 1px solid rgba(110, 166, 215, 0.10);
  padding-top: 8px;
}

@media (max-width: 480px) {
  .shout-form {
    padding: 16px;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   ETAPP 2 — Agera som Styrelsen
   ═════════════════════════════════════════════════════════════════════ */

/* Banner högst upp när admin agerar som Styrelsen.
   Distinkt röd-orange ton som inte kan missas. */
.agera-som-banner {
  border: 1px solid rgba(220,90,90,.45);
  border-radius: 12px;
}

.agera-som-banner-text em {
  font-style: normal;
  font-weight: 500;
}

.agera-som-banner-btn {
  border: 1px solid rgba(220,90,90,.50);
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 500;
  transition: background .15s, transform .05s;
}

.agera-som-banner-btn:hover {
  background: rgba(220,90,90,.30);
  color: #fff;
}

.agera-som-banner-btn:active {
  transform: translateY(1px);
}

/* Toggle-knapp i auth-bar (när inte aktiv) — diskret men hittbar */

.auth-toggle.agera-som-toggle:hover {
  background: rgba(110,166,215,.16);
  border-color: rgba(110,166,215,.40);
  color: #e0edf8;
}

/* Subtle ram runt skrivrutor när admin agerar som Styrelsen — så man inte
   råkar skriva från fel "person". Aktiveras via body-klass (om vi vill
   slå på den senare i en framtida etapp). */

/* Mobil — banner stackar */


/* ═══════════════════════════════════════════════════════════════════════
   MIGRERAT FRÅN styles-patch1.css (2026-07-29)
   ─────────────────────────────────────────────────────────────────────
   Denna patch låg som föräldralös fil i assets/ — den länkades aldrig
   och klistrades aldrig in i styles.css, så bryggprick-fixen har ALDRIG
   varit live förrän nu. Blocket ligger sist och vinner därmed över den
   gamla .forum-olast-prick-regeln högre upp i filen (11px utan slot),
   enligt patchens egen instruktion. Den gamla regeln kan städas bort
   vid tillfälle men är ofarlig så länge detta block ligger efter den.
   ═══════════════════════════════════════════════════════════════════ */

/* Pricken får exakt samma slott som .forum-trad-avatar (42×42)
   så layouten blir identisk oavsett om raden har avatar eller prick.
   Pricken (11×11) centreras inuti slotten. */
.forum-olast-prick {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: none;
  box-shadow: none;
  border-radius: 0;
  animation: none;
}
.forum-olast-prick::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6ea6d7, #5a9cd4);
  box-shadow: 0 0 8px rgba(110,166,215,.65);
  animation: prick-glow 2s ease-in-out infinite;
}
@keyframes prick-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(110,166,215,.65); }
  50%      { box-shadow: 0 0 16px rgba(110,166,215,.90); }
}

@media (max-width: 600px) {
  /* På mobil krymper vi prick-slotten så den inte tar onödig plats,
     men den syns fortfarande tydligt vid sidan av titeln. */
  .forum-olast-prick {
    width: 18px;
    height: 18px;
  }
}

/* Flikraden i botten på webbplatsen ser ut som den i Mitt Ulvnäs (2026-10-29):
   samma höjd, ikonstorlek, linjetjocklek, typsnitt och markering av aktiv flik. */
@media (max-width: 760px) {
  .bottom-nav {
    padding: 6px 4px max(8px, var(--sa-bottom, env(safe-area-inset-bottom, 0px)));
    background: rgba(7,17,27,.96);
    border-top: 1px solid var(--line);
  }
  .bottom-nav .bnav-item {
    min-height: 54px;
    padding: 4px 2px;
    gap: 4px;
    color: var(--mist-dim);
  }
  .bottom-nav .bnav-item svg { width: 24px; height: 24px; }
  .bottom-nav .bnav-item > span:last-child {
    font: 600 .8125rem/1.1 var(--body);
    text-transform: none;
  }
  .bottom-nav .bnav-item.active { color: #fff; }
  .bottom-nav .bnav-item.active svg { color: var(--blue-400); }
  .bottom-nav .bnav-item.active::before { display: none; }
  :where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) body { padding-bottom: calc(76px + max(8px, var(--sa-bottom, env(safe-area-inset-bottom, 0px)))); }
}

/* ── Granskning 2026-10-30 ─────────────────────────────────────────── */
/* Dokumentkort får inte bli bredare än skärmen; titeln får två rader */
.dok-grid { grid-template-columns: minmax(0, 1fr); }
/* Textfält med klassen field-input utanför forumformuläret (Ny händelse, Nyheter) */
:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) :where(textarea.field-input) { display: block; width: 100%; box-sizing: border-box; min-height: 110px; resize: vertical;
  background: var(--yta-sankt, rgba(18,35,52,.90)); border: 1px solid var(--linje, rgba(110,166,215,.20)); border-radius: 12px;
  padding: 12px 16px; color: var(--text, #e0edf8); font-family: var(--body); font-size: 16px; line-height: 1.45; }
:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) :where(textarea.field-input):focus-visible { outline: 2px solid var(--blue-400); outline-offset: 1px; }
/* Bottenraden: samma etiketter som i Mitt Ulvnäs, utan avklippta ord på smala telefoner */
@media (max-width: 400px) {
  .bottom-nav .bnav-item > span:last-child { letter-spacing: 0; }
}
:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) :where(input.field-input, select.field-input) { width: 100%; box-sizing: border-box; min-height: 42px;
  background: var(--yta-sankt, rgba(18,35,52,.90)); border: 1px solid var(--linje, rgba(110,166,215,.20)); border-radius: 10px;
  padding: 9px 14px; color: var(--text, #e0edf8); font-family: var(--body); font-size: 16px; }
:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) :where(input.field-input, select.field-input):focus-visible { outline: 2px solid var(--blue-400); outline-offset: 1px; }
:where(html:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) :where(.field-label) { display: block; font-family: var(--condensed); font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-400); margin-bottom: 6px; }
/* Mobilmenyns underlänkar får radbrytas och har luft mot kanten (2026-10-30) */


/* ===== från delad.css ===== */
/* Delade komponenter för hela webbplatsen (fas 3, 2026-10-29).
   Klocka, profilmeny och sifferbricka i sidhuvudet. Används både i Mitt Ulvnäs
   och på föreningens sidor för den som är inloggad. Flyttat från medlemssystem.css. */
.ms-bricka {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; font: 700 .8125rem/1 var(--body);
}
.ms-bricka[hidden] { display: none; }

/* ── Sidhuvudet: klocka och profilmeny ───────────────────────────────── */
.ms-profil { display: flex; align-items: center; gap: 10px; position: relative; }
.ms-klocka-knapp {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); cursor: pointer;
}
.ms-klocka-knapp svg { height: 20px; }
.ms-klocka-knapp .ms-bricka { position: absolute; top: -3px; right: -3px; border: 2px solid var(--navy-950, #07111b); }
.ms-profil-knapp {
  display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 12px 0 4px;
  border-radius: 999px; border: 1px solid var(--line); cursor: pointer;
}
.ms-avatar {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 50%;
}
.ms-profil-pil { width: 16px; height: 16px; opacity: .7; }
.ms-profil-meny {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 10050; min-width: 250px;
  padding: 8px; border-radius: 16px; border: 1px solid var(--line);
}
.ms-profil-huvud { padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.ms-profil-huvud strong { display: block; }
.ms-profil-meny a, .ms-profil-ut {
  display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 12px; border-radius: 10px; text-decoration: none; background: none; border: 0; cursor: pointer; text-align: left;
}
.ms-profil-meny a:hover, .ms-profil-ut:hover { background: rgba(110,166,215,.1); color: #fff; }
.ms-profil-ut { border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; margin-top: 6px; }

@media (max-width: 760px) {
  .ms-profil-namn, .ms-profil-pil { display: none; }
  .ms-profil-knapp { padding: 0 4px; }
  .ms-profil-meny { position: fixed; top: 70px; right: 12px; left: 12px; min-width: 0; }
  .ms-profil-meny { max-height: calc(100vh - 160px); overflow-y: auto; }
}
/* På webbplatsens sidor ligger menyknappen kvar bredvid klockan och profilen */
.nav-auth-slot .ms-profil { gap: 8px; }

/* ══ Fas 4b: appkänsla (2026-10-29) ═══════════════════════════════════════ */

/* Mjuk övergång mellan sidor. Sidhuvudet och flikraden står still medan innehållet tonas över.
   Fungerar i Chrome, Edge och Safari 18.2 och senare; andra webbläsare byter sida som vanligt. */
@view-transition { navigation: auto; }
:where(html:not([data-sida^="medlemsregister"])) header.nav { view-transition-name: sidhuvud; }
.ms-botten, .bottom-nav { view-transition-name: flikrad; }
:where(html:not([data-sida^="medlemsregister"])) ::view-transition-old(root) { animation: 140ms ease-out both vt-ut; }
:where(html:not([data-sida^="medlemsregister"])) ::view-transition-new(root) { animation: 200ms ease-out both vt-in; }
:where(html:not([data-sida^="medlemsregister"])) ::view-transition-group(sidhuvud), :where(html:not([data-sida^="medlemsregister"])) ::view-transition-group(flikrad) { animation-duration: 0s; }
@keyframes vt-ut { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }

/* Sidhuvudet krymper när man skrollar på mobilen */
@media (max-width: 760px) {
  header.nav .nav-inner { transition: min-height .2s ease, padding .2s ease; }
  header.nav .brand-mark { transition: width .2s ease, height .2s ease; }
  html.nav-krympt header.nav .nav-inner { min-height: 54px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
  html.nav-krympt header.nav .brand-mark { width: 36px !important; height: 36px !important; }
  html.nav-krympt header.nav .brand-text strong { font-size: 1.15rem !important; }
  html.nav-krympt:where(:not([data-sida^="medlemsregister"])) header.nav :is(.ms-klocka-knapp, .ms-profil-knapp, .nav-toggle) { width: 44px; height: 44px; min-height: 0; } /* tryckytan behålls vid scroll (2026-10-30) */
  html.nav-krympt header.nav .ms-profil-knapp { width: auto; padding: 0 2px; }
  html.nav-krympt header.nav .ms-avatar { width: 32px; height: 32px; }
  html.nav-krympt .ms-profil-meny { top: calc(56px + var(--sa-top, env(safe-area-inset-top, 0px))) !important; }
}

/* Tydlig respons när man trycker */
@media (prefers-reduced-motion: no-preference) {
  :where(html:not([data-sida^="medlemsregister"])) :is(.ms-botten-flik, .bnav-item, .ft-chip, .ft-skriv, .ft-skicka, .ft-publicera, .btn-p, .btn-g, .hem-knapp, .hush-andra, .ms-mer-ruta, .tema-knapp, .ms-klocka-knapp, .ms-profil-knapp):active {
    transform: scale(.96); transition: transform .08s ease;
  }
  .ms-botten-flik.aktiv .ms-nav-ikon { animation: flik-in .25s ease-out; }
  @keyframes flik-in { 0% { transform: scale(.85); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  header.nav .nav-inner, header.nav .brand-mark { transition: none; }
}

/* Sidhuvudet ska ligga kvar överst när man skrollar. overflow-x: hidden på html och body
   gjorde body till en egen skrollyta, så position: sticky slutade fungera. clip klipper
   likadant utan att skapa en skrollyta. Äldre webbläsare behåller hidden. */
html:where(:not([data-sida^="medlemsregister"])), :where(html:not([data-sida^="medlemsregister"])) body { overflow-x: clip; }

/* Textrutor använder sajtens typsnitt, aldrig skrivmaskinsstil (2026-10-30) */
/* Hoppa till innehållet: syns bara när den får fokus med tangentbordet */
:where(html:not([data-sida^="medlemsregister"])) .hoppa-till { position: absolute; left: 12px; top: -60px; z-index: 100000; padding: 10px 16px; border-radius: 10px; background: #6ea6d7; color: #07111c; font: 600 15px/1.2 var(--body, system-ui); text-decoration: none; transition: top .15s; }
:where(html:not([data-sida^="medlemsregister"])) .hoppa-till:focus { top: 12px; outline: 2px solid #fff; outline-offset: 2px; }
:where(html:not([data-sida^="medlemsregister"])) main:focus { outline: none; }

/* ══ Fas 8 (2026-10-30): klocka, profilmeny och sifferbricka i designsystemets form ══
   Bara tokens från ds.css, så att båda lägena följer samma regler på alla sidor.
   :root[data-tema] väger tyngre än de genererade reglerna i tema-ljus.css. */
:root[data-tema] .ms-bricka { background: var(--ds-fara); color: var(--ds-accent-text); }
:root[data-tema] .ms-klocka-knapp .ms-bricka { border-color: var(--ds-bg); }
:root[data-tema]:where(:not([data-sida^="medlemsregister"])) :is(.ms-klocka-knapp, .ms-profil-knapp) { background: var(--ds-yta); border: 1px solid var(--ds-linje-stark); color: var(--ds-text); }
:root[data-tema]:where(:not([data-sida^="medlemsregister"])) :is(.ms-klocka-knapp, .ms-profil-knapp):hover { background: var(--ds-accent-svag); border-color: var(--ds-accent); color: var(--ds-stark); }
:root[data-tema] .ms-profil-knapp { font: 600 15px var(--ds-font); }
:root[data-tema] .ms-avatar { background: var(--ds-accent); color: var(--ds-accent-text); font: 600 13px var(--ds-font); letter-spacing: .02em; }
:root[data-tema] .ms-profil-meny { background: var(--ds-yta); border: 1px solid var(--ds-linje); border-radius: 18px; box-shadow: var(--ds-skugga); }
:root[data-tema] .ms-profil-huvud { border-bottom-color: var(--ds-linje); }
:root[data-tema] .ms-profil-huvud strong { color: var(--ds-stark); font: 600 1rem var(--ds-font); }
:root[data-tema] .ms-profil-huvud span { font-size: 14px; color: var(--ds-svag); }
:root[data-tema]:where(:not([data-sida^="medlemsregister"])) :is(.ms-profil-meny a, .ms-profil-ut) { color: var(--ds-text); font: 500 1rem var(--ds-font); }
:root[data-tema]:where(:not([data-sida^="medlemsregister"])) :is(.ms-profil-meny a, .ms-profil-ut):hover { background: var(--ds-accent-svag); color: var(--ds-stark); }
:root[data-tema] .ms-profil-ut { border-top-color: var(--ds-linje); }
:root[data-tema] .ms-profil-ut:hover { background: var(--ds-fara-svag); color: var(--ds-fara); }
:root[data-tema] .ms-profil-meny .tema-valjare { border-top-color: var(--ds-linje); }
:root[data-tema] .ms-profil-meny :is(a, .ms-profil-ut):focus-visible { outline: 3px solid var(--ds-accent); outline-offset: -3px; }
/* Menyknappen bredvid klockan får samma form som klockan när man är inloggad */
:root[data-tema] header.nav:has(.ms-profil) .nav-toggle { background: var(--ds-yta); border: 1px solid var(--ds-linje-stark); color: var(--ds-text); }
:root[data-tema] header.nav:has(.ms-profil) .nav-toggle:hover { background: var(--ds-accent-svag); border-color: var(--ds-accent); }


/* ===== från tema-ljus.css ===== */
/* Ljust tema. Genereras av verktyg/gen_ljus.py, redigera inte för hand.
   Handskrivna justeringar ligger i assets/tema.css. */
/* ── assets/styles.css */
html[data-tema="ljus"] .brand-text strong{color:#141f29}
html[data-tema="ljus"] .nav-toggle{border:1px solid rgba(14,33,52,0.208);background:rgba(14,33,52,0.033);color:#141f29}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .btn{border:1px solid rgba(14,33,52,0.236);background:rgba(14,33,52,0.044);color:#141f29}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .btn:hover{background:rgba(14,33,52,0.077);border-color:rgba(14,33,52,0.376)}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .panel{background:linear-gradient(180deg, rgba(245,248,251,0.66), rgba(249,250,252,0.84))}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .panel h3{color:#141f29}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .copy strong{color:#141f29}
html[data-tema="ljus"] .card{background:linear-gradient(180deg, rgba(242,246,250,0.78), rgba(247,249,252,0.92))}
html[data-tema="ljus"] .card h3{color:#141f29}
html[data-tema="ljus"] .article{background:linear-gradient(180deg, rgba(244,247,250,0.72), rgba(249,250,252,0.92))}
html[data-tema="ljus"] .article h2{color:#141f29}
html[data-tema="ljus"] .article h3{color:#141f29}
html[data-tema="ljus"] .footer-title{color:#141f29}
html[data-tema="ljus"] .nav-toggle:hover{background:rgba(14,33,52,0.077);border-color:rgba(14,33,52,0.348);box-shadow:0 10px 22px rgba(20,40,62,0.07)}
html[data-tema="ljus"] .chip-link:hover{background:rgba(14,33,52,0.088);border-color:rgba(46,110,167,0.46)}
@media (max-width: 760px){
html[data-tema="ljus"] .nav-links{background:linear-gradient(180deg, rgba(245,248,251,0.98), rgba(249,250,252,0.98));border:1px solid rgba(46,110,167,0.31);box-shadow:0 24px 60px rgba(20,40,62,0.134)}
}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .panel{background:linear-gradient(180deg, rgba(243,246,250,0.68), rgba(249,250,252,0.88));border:1px solid rgba(46,110,167,0.37);box-shadow:0 28px 80px rgba(20,40,62,0.122),
    0 0 0 1px rgba(14,33,52,0.018) inset}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .panel::after{background:linear-gradient(90deg, transparent, rgba(48,116,175,0.42), transparent)}
html[data-tema="ljus"] .card::before{background:linear-gradient(180deg, rgba(48,116,175,0.048), transparent 35%)}
html[data-tema="ljus"] .card:hover{border-color:rgba(46,110,167,0.46);box-shadow:0 30px 80px rgba(20,40,62,0.134), 0 0 0 1px rgba(14,33,52,0.012) inset}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .footer{background:linear-gradient(180deg, rgba(251,252,253,0.76), rgba(251,252,253,0.88))}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .panel::before{background:radial-gradient(circle at 15% 18%, rgba(14,33,52,0.066), transparent 24%),
    linear-gradient(180deg, rgba(14,33,52,0.028), transparent 40%)}
html[data-tema="ljus"] .card,html[data-tema="ljus"] .article,html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .panel{box-shadow:0 30px 80px rgba(20,40,62,0.122),
    0 0 0 1px rgba(14,33,52,0.012) inset}
html[data-tema="ljus"] .article h2{color:#0d2843}
html[data-tema="ljus"] .article h3{color:#1b4463;border-top:1px solid rgba(46,110,167,0.19)}
html[data-tema="ljus"] .article > p:first-of-type{color:#3a6988}
html[data-tema="ljus"] .article strong{color:#113c5d}
html[data-tema="ljus"] .article a{border-bottom:1px solid rgba(46,110,167,0.415)}
html[data-tema="ljus"] .article a:hover{border-bottom-color:rgba(46,110,167,0.94)}
html[data-tema="ljus"] .bastu-item{background:rgba(242,246,249,0.5) !important;border:1px solid rgba(46,110,167,0.19) !important}
html[data-tema="ljus"] .doc-card{background:rgba(242,246,249,0.5) !important}
html[data-tema="ljus"] .doc-card:hover{background:rgba(48,116,175,0.108) !important;border-color:rgba(46,110,167,0.4) !important}
@media (max-width: 760px){
html[data-tema="ljus"] .card .eyebrow{color:rgba(42,101,152,0.8)}
}
html[data-tema="ljus"] .card::before{background:linear-gradient(90deg, transparent, rgba(48,116,175,0.24), transparent)}
@media (max-width: 760px){
html[data-tema="ljus"] .card .eyebrow{color:rgba(42,101,152,0.8) !important}
}
@media (max-width: 760px){
html[data-tema="ljus"] .card .eyebrow{color:rgba(42,101,152,0.8) !important}
html[data-tema="ljus"] .card h3{color:#10314a !important}
}
html[data-tema="ljus"] .forum-trad-olast{border-color:rgba(46,110,167,0.52) !important;background:rgba(48,116,175,0.096) !important;box-shadow:inset 3px 0 0 rgba(48,116,175,0.6)}
html[data-tema="ljus"] .forum-olast-prick{background:linear-gradient(135deg, #6ea6d7, #5a9cd4);box-shadow:0 0 8px rgba(48,116,175,0.39)}
html[data-tema="ljus"] .forum-trad-titel-olast{color:#141f29 !important}
html[data-tema="ljus"] .forum-badge{background:linear-gradient(135deg, #e24b4a 0%, #d63031 100%);color:#141f29;box-shadow:0 2px 8px rgba(171,28,27,0.24)}
html[data-tema="ljus"] .tab-nav{background:rgba(48,116,175,0.036);border:1px solid rgba(46,110,167,0.16)}
html[data-tema="ljus"] .tab-link.active{background:rgba(48,116,175,0.216);border-color:rgba(46,110,167,0.565);color:#133552;box-shadow:0 2px 12px rgba(48,116,175,0.072)}
html[data-tema="ljus"] .tab-link:hover:not(.active){background:rgba(48,116,175,0.072);color:#133552}
html[data-tema="ljus"] .forum-trad-row{background:rgba(48,116,175,0.048);border:1px solid rgba(46,110,167,0.19)}
html[data-tema="ljus"] .forum-trad-row:hover{background:rgba(48,116,175,0.108);border-color:rgba(46,110,167,0.43)}
html[data-tema="ljus"] .forum-trad-avatar{background:rgba(48,116,175,0.144);border:1px solid rgba(46,110,167,0.37)}
html[data-tema="ljus"] .forum-trad-titel{color:#133552}
html[data-tema="ljus"] .forum-trad-svar-label{color:rgba(42,101,152,0.8)}
html[data-tema="ljus"] .forum-inlagg{background:rgba(48,116,175,0.048);border:1px solid rgba(46,110,167,0.19)}
html[data-tema="ljus"] .forum-inlagg-text{color:#24547a}
html[data-tema="ljus"] .forum-bild{border:1px solid rgba(46,110,167,0.22)}
html[data-tema="ljus"] .forum-svar-form-wrap{background:rgba(48,116,175,0.048);border:1px solid rgba(46,110,167,0.22)}
html[data-tema="ljus"] .forum-form .field-input{background:rgba(241,245,249,0.9);border:1px solid rgba(46,110,167,0.34);color:#133552}
html[data-tema="ljus"] .forum-form .field-input:focus{border-color:rgba(46,110,167,0.715)}
html[data-tema="ljus"] .forum-del-btn{background:rgba(171,28,27,0.096);border:1px solid rgba(162,27,26,0.37);color:#ad1414}
html[data-tema="ljus"] .forum-del-btn:hover{background:rgba(171,28,27,0.216)}
html[data-tema="ljus"] .forum-bild-label:hover{background:rgba(48,116,175,0.18)}
html[data-tema="ljus"] .nav-dropdown-menu-inner a:hover{background:rgba(48,116,175,0.12)}
html[data-tema="ljus"] .forum-trad-pinnad{border-color:rgba(174,121,13,0.415) !important;background:rgba(184,127,14,0.048) !important;box-shadow:inset 3px 0 0 rgba(184,127,14,0.36)}
html[data-tema="ljus"] .forum-pin-label{color:rgba(180,125,14,0.8)}
html[data-tema="ljus"] .forum-search-input{background:rgba(241,245,249,0.9);border:1px solid rgba(46,110,167,0.34);color:#133552}
html[data-tema="ljus"] .forum-search-input:focus{border-color:rgba(46,110,167,0.715)}
html[data-tema="ljus"] .galleri-admin-card:hover{border-color:rgba(46,110,167,0.49);box-shadow:0 8px 24px rgba(20,40,62,0.064)}
html[data-tema="ljus"] .galleri-admin-card.is-dragging{border-color:rgba(46,110,167,0.79);box-shadow:0 0 20px rgba(48,116,175,0.15)}
html[data-tema="ljus"] .galleri-admin-placeholder{border:2px dashed rgba(46,110,167,0.565);background:rgba(48,116,175,0.048)}
html[data-tema="ljus"] .galleri-admin-action{background:rgba(248,249,252,0.75);border:1px solid rgba(46,110,167,0.34);color:#133552}
html[data-tema="ljus"] .galleri-admin-action:hover{background:rgba(48,116,175,0.3)}
html[data-tema="ljus"] .galleri-admin-delete{border-color:rgba(162,27,26,0.415);color:#ad1414}
html[data-tema="ljus"] .galleri-admin-delete:hover{background:rgba(171,28,27,0.24)}
html[data-tema="ljus"] .dok-card:hover{background:rgba(48,116,175,0.084);border-color:rgba(46,110,167,0.4)}
html[data-tema="ljus"] .dok-drag-card:hover{border-color:rgba(46,110,167,0.37);background:rgba(48,116,175,0.036)}
html[data-tema="ljus"] .dok-drag-card.is-dragging{border-color:rgba(46,110,167,0.64)}
html[data-tema="ljus"] .dok-drag-card:hover .dok-drag-handle{color:rgba(34,85,127,0.8)}
html[data-tema="ljus"] .dok-drag-title:hover,html[data-tema="ljus"] .dok-drag-title:focus{border-color:rgba(46,110,167,0.415);background:rgba(241,245,249,0.6)}
@media (max-width: 760px){
html[data-tema="ljus"] .bnav-item:active{color:#141f29;background:rgba(48,116,175,0.12)}
}
html[data-tema="ljus"] .dm-radera-konv-btn{background:rgba(171,28,27,0.096);border:1px solid rgba(162,27,26,0.415);color:#ad1414}
html[data-tema="ljus"] .dm-radera-konv-btn:hover{background:rgba(171,28,27,0.216)}
html[data-tema="ljus"] .dm-bubbel-radera-btn{color:rgba(173,20,20,0.8)}
html[data-tema="ljus"] .dm-bubbel-radera-btn:hover,html[data-tema="ljus"] .dm-bubbel-radera-btn:active{background:rgba(171,28,27,0.18);color:#ad1414}
html[data-tema="ljus"] .dm-konv-radera-btn{background:rgba(171,28,27,0.072);border:1px solid rgba(162,27,26,0.31);color:rgba(173,20,20,0.8)}
html[data-tema="ljus"] .dm-konv-radera-btn:hover,html[data-tema="ljus"] .dm-konv-radera-btn:active{background:rgba(171,28,27,0.216);color:#ad1414}
html[data-tema="ljus"] .dm-chat-header-kompakt{background:rgba(243,247,250,0.55);border:1px solid rgba(46,110,167,0.28)}
html[data-tema="ljus"] .dm-bubbel-rad.mitt .dm-bubbel{background:linear-gradient(135deg, #4d8bc4 0%, #3d7cb4 100%) !important;color:#141f29 !important;box-shadow:0 2px 8px rgba(46,94,138,0.15)}
html[data-tema="ljus"] .dm-bubbel-rad.mitt .dm-bubbel-text{color:#141f29 !important}
html[data-tema="ljus"] .dm-bubbel-rad.mitt .dm-bubbel-tid{color:rgba(20,31,41,0.8) !important}
html[data-tema="ljus"] .dm-bubbel-rad.andras .dm-bubbel{background:rgba(220,235,248,0.95) !important;color:#14253a !important;box-shadow:0 2px 8px rgba(20,40,62,0.048)}
html[data-tema="ljus"] .dm-bubbel-rad.andras .dm-bubbel-text{color:#14253a !important}
html[data-tema="ljus"] .dm-bubbel-rad.andras .dm-bubbel-tid{color:rgba(20,37,58,0.55) !important}
html[data-tema="ljus"] .dm-bubbel-rad.mitt .dm-bubbel-radera-btn{color:rgba(119,0,0,0.85)}
html[data-tema="ljus"] .dm-bubbel-rad.mitt .dm-bubbel-radera-btn:hover,html[data-tema="ljus"] .dm-bubbel-rad.mitt .dm-bubbel-radera-btn:active{background:rgba(253,0,0,0.24);color:#900000}
html[data-tema="ljus"] .dm-skriv-form{background:rgba(246,248,251,0.94) !important;box-shadow:0 -6px 18px rgba(20,40,62,0.112)}
html[data-tema="ljus"] .dm-konv-rad .dm-konv-avatar{color:#141f29 !important;box-shadow:0 0 0 1px rgba(14,33,52,0.09)}
html[data-tema="ljus"] .instalg-summary:hover{background:rgba(48,116,175,0.072)}
html[data-tema="ljus"] .shout-form{background:rgba(243,247,250,0.55);border:1px solid rgba(46,110,167,0.31)}
html[data-tema="ljus"] .shout-input{background:rgba(248,250,252,0.6);border:1px solid rgba(46,110,167,0.34);color:#133552}
html[data-tema="ljus"] .shout-input:focus{border-color:rgba(46,110,167,0.865)}
html[data-tema="ljus"] .shout-options{background:rgba(248,250,252,0.4)}
html[data-tema="ljus"] .shout-check-viktig{background:rgba(229,37,37,0.072);border:1px solid rgba(228,28,28,0.415)}
html[data-tema="ljus"] .shout-feedback-ok{background:rgba(98,184,127,0.12);border:1px solid rgba(91,181,121,0.565);color:#3c8654}
html[data-tema="ljus"] .shout-feedback-fel{background:rgba(229,37,37,0.12);border:1px solid rgba(228,28,28,0.565);color:#991818}
html[data-tema="ljus"] .shout-historik-rad{background:rgba(243,247,250,0.4);border:1px solid rgba(46,110,167,0.22)}
html[data-tema="ljus"] .shout-historik-rad.shout-historik-viktig{border-color:rgba(228,28,28,0.565);background:linear-gradient(135deg, rgba(229,37,37,0.048), rgba(243,247,250,0.4))}
html[data-tema="ljus"] .shout-historik-typ{color:#2a6598}
html[data-tema="ljus"] .shout-historik-viktig .shout-historik-typ{color:#991818}
html[data-tema="ljus"] .shout-historik-titel{color:#141f29}
html[data-tema="ljus"] .shout-historik-stat{border-top:1px solid rgba(46,110,167,0.19)}
html[data-tema="ljus"] .agera-som-banner-btn:hover{background:rgba(172,36,36,0.36);color:#141f29}
html[data-tema="ljus"] .auth-toggle.agera-som-toggle:hover{background:rgba(48,116,175,0.192);border-color:rgba(46,110,167,0.64);color:#133552}
html[data-tema="ljus"] .forum-olast-prick::before{background:linear-gradient(135deg, #6ea6d7, #5a9cd4);box-shadow:0 0 8px rgba(48,116,175,0.39)}
@media (max-width: 760px){
html[data-tema="ljus"] .bottom-nav .bnav-item.active{color:#141f29}
}
/* ── assets/medlemssystem.css */
html[data-tema="ljus"] .field input,html[data-tema="ljus"] .field select{background:rgba(241,245,249,0.9);border:1px solid rgba(46,110,167,0.34);color:#133552}
html[data-tema="ljus"] .field input:focus{border-color:rgba(46,110,167,0.79)}
html[data-tema="ljus"] .btn-g{border:1px solid rgba(46,110,167,0.46)}
html[data-tema="ljus"] .btn-g:hover{background:rgba(48,116,175,0.12)}
html[data-tema="ljus"] .auth-toggle:hover{background:rgba(48,116,175,0.12);border-color:rgba(46,110,167,0.715);color:#133552}
html[data-tema="ljus"] .notis-klocka:hover{background:rgba(48,116,175,0.144);border-color:rgba(46,110,167,0.79);color:#133552}
html[data-tema="ljus"] .notis-klocka[aria-expanded="true"]{background:rgba(8,161,255,0.168);border-color:rgba(0,157,253,0.865);color:#004870}
html[data-tema="ljus"] .notis-klocka-badge{border:2px solid #d1dbe6;color:#141f29;box-shadow:0 2px 8px rgba(178,34,34,0.27)}
html[data-tema="ljus"] .notis-panel::before{background:#f4f7fa;border-left:1px solid rgba(46,110,167,0.565);border-top:1px solid rgba(46,110,167,0.565)}
html[data-tema="ljus"] .notis-item:hover{background:rgba(48,116,175,0.096)}
html[data-tema="ljus"] .gdpr-overlay{background:rgba(251,252,253,0.88)}
html[data-tema="ljus"] .bek-falt input{background:rgba(14,33,52,0.055);border:1px solid rgba(46,110,167,0.415);color:#1a3047}
html[data-tema="ljus"] .bek-intyg{background:rgba(48,116,175,0.084);border:1px solid rgba(46,110,167,0.37);color:#2c455c}
html[data-tema="ljus"] .gdpr-modal{background:#f4f7fa;border:1px solid rgba(46,110,167,0.565);box-shadow:0 30px 80px rgba(20,40,62,0.16)}
html[data-tema="ljus"] .gdpr-ikon{background:rgba(8,161,255,0.144);border:1px solid rgba(0,157,253,0.64)}
html[data-tema="ljus"] .gdpr-titel{color:#141f29}
html[data-tema="ljus"] .gdpr-lista{color:#2d4a64}
html[data-tema="ljus"] .gdpr-lista strong{color:#10314a}
html[data-tema="ljus"] .gdpr-btn{background:linear-gradient(180deg, #7ab3dc, #4178ad);color:#07111c;box-shadow:0 14px 34px rgba(48,116,175,0.18)}
html[data-tema="ljus"] .agera-som-banner-btn:hover{background:rgba(172,36,36,0.36);color:#141f29}
html[data-tema="ljus"] .auth-toggle.agera-som-toggle:hover{background:rgba(48,116,175,0.192);border-color:rgba(46,110,167,0.64);color:#133552}
@media (max-width: 640px){
html[data-tema="ljus"] .auth-toggle.agera-som-toggle:hover,html[data-tema="ljus"] .auth-toggle.agera-som-toggle:active{background:rgba(172,36,36,0.216);border-color:rgba(163,35,35,0.865);color:#771100}
}
html[data-tema="ljus"] .dm-konv-styrelse-tag{background:rgba(48,116,175,0.18);border:1px solid rgba(46,110,167,0.52)}
html[data-tema="ljus"] .styrelse-logg-rad{background:rgba(48,116,175,0.06);border:1px solid rgba(46,110,167,0.31)}
html[data-tema="ljus"] .styrelse-logg-av strong{color:#133552}
html[data-tema="ljus"] .styrelse-logg-rubrik{color:#133552}
html[data-tema="ljus"] .styrelse-logg-lank:hover{color:#133552}
html[data-tema="ljus"] .medl-rad:hover{border-color:rgba(46,110,167,0.37);background:rgba(48,116,175,0.06)}
html[data-tema="ljus"] .modal-close:hover{color:#133552}
html[data-tema="ljus"] .admin-rad{background:rgba(14,33,52,0.022);border:1px solid rgba(46,110,167,0.16)}
html[data-tema="ljus"] .admin-navn{color:#133552}
html[data-tema="ljus"] .btn-tiny{border:1px solid rgba(46,110,167,0.415)}
html[data-tema="ljus"] .btn-tiny:hover{background:rgba(48,116,175,0.12)}
html[data-tema="ljus"] .btn-bastu-on{background:rgba(184,108,14,0.12);border:1px solid rgba(174,103,13,0.46);color:#b17c11}
html[data-tema="ljus"] .btn-bastu-off{border:1px solid rgba(14,33,52,0.208)}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .nav-auth-btn{background:rgba(48,116,175,0.18);border:1px solid rgba(46,110,167,0.46)}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .nav-auth-btn:hover{background:rgba(48,116,175,0.3)}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .nav-auth-namn{color:#133552}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .nav-admin-badge{background:rgba(48,116,175,0.18);border:1px solid rgba(46,110,167,0.49)}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .nav-auth-logout{border:1px solid rgba(46,110,167,0.37)}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .nav-auth-logout:hover{background:rgba(171,28,27,0.12);border-color:rgba(162,27,26,0.415);color:#ad1414}
html[data-tema="ljus"] .tab-group > summary:hover{background:rgba(48,116,175,0.072);color:#133552}
html[data-tema="ljus"] .tab-group.has-active > summary{background:rgba(48,116,175,0.216);border-color:rgba(46,110,167,0.565);color:#133552;box-shadow:0 2px 12px rgba(48,116,175,0.072)}
html[data-tema="ljus"] .tab-group-menu{background:#f4f7fa;border:1px solid rgba(46,110,167,0.37);box-shadow:0 10px 30px rgba(20,40,62,0.128)}
html[data-tema="ljus"] .tab-group-menu a:hover{background:rgba(48,116,175,0.096);color:#133552}
html[data-tema="ljus"] .tab-group-menu a.active{background:rgba(48,116,175,0.216);color:#133552}
@media (max-width: 700px){
html[data-tema="ljus"] .tab-group-menu{border-color:rgba(46,110,167,0.49)}
}
html[data-tema="ljus"] .brygga-item.is-open{border-color:rgba(46,110,167,0.37);box-shadow:0 20px 48px rgba(20,40,62,0.07)}
html[data-tema="ljus"] .bridge-back-btn{border:1px solid rgba(46,110,167,0.31);background:rgba(14,33,52,0.044);color:#141f29}
html[data-tema="ljus"] .bridge-map-wrap{border:1px solid rgba(46,110,167,0.25);background:radial-gradient(circle at 50% 0%, rgba(48,116,175,0.096), transparent 28%),
        linear-gradient(180deg, rgba(14,33,52,0.033), rgba(14,33,52,0.022));box-shadow:inset 0 1px 0 rgba(14,33,52,0.018)}
html[data-tema="ljus"] .bridge-hotspot{border:2px solid #2e6ea7;box-shadow:0 0 0 2px rgba(48,116,175,0.108),
        0 0 12px rgba(48,116,175,0.3)}
html[data-tema="ljus"] .bridge-hotspot:hover,html[data-tema="ljus"] .bridge-hotspot:focus-visible{border-color:#2e6ea7;box-shadow:0 0 0 3px rgba(48,116,175,0.15),
        0 0 20px rgba(48,116,175,0.42)}
html[data-tema="ljus"] .bridge-hotspot.active{border-color:#2e6ea7;box-shadow:0 0 0 4px rgba(48,116,175,0.18),
        0 0 28px rgba(48,116,175,0.48)}
html[data-tema="ljus"] .bridge-hotspot.active::after{border:2px solid #2e6ea7}
html[data-tema="ljus"] .bridge-row-hotspot:hover,html[data-tema="ljus"] .bridge-row-hotspot:focus-visible{background:rgba(48,116,175,0.144);border-color:rgba(46,110,167,0.49)}
html[data-tema="ljus"] .bridge-row-hotspot.active{background:rgba(48,116,175,0.216);border-color:rgba(46,110,167,0.94);box-shadow:0 0 0 2px rgba(48,116,175,0.12), inset 0 0 12px rgba(48,116,175,0.048)}
html[data-tema="ljus"] .gang-row-btn:hover,html[data-tema="ljus"] .gang-row-btn.active{background:rgba(48,116,175,0.168);border-color:rgba(46,110,167,0.61)}
html[data-tema="ljus"] .gang-row-arrow{color:rgba(42,101,152,0.8)}
html[data-tema="ljus"] .jarso-btn:hover,html[data-tema="ljus"] .jarso-btn.active{background:rgba(48,116,175,0.168);border-color:rgba(46,110,167,0.61)}
html[data-tema="ljus"] .bridge-card-close:hover{background:rgba(14,33,52,0.132);color:#141f29}
html[data-tema="ljus"] .bc-muted{color:rgba(34,85,127,0.8)}
html[data-tema="ljus"] .forum-edit-form input[type="text"],html[data-tema="ljus"] .forum-edit-form textarea{background:rgba(241,245,249,0.9);border:1px solid rgba(46,110,167,0.415);color:#133552}
html[data-tema="ljus"] .forum-edit-form input[type="text"]:focus,html[data-tema="ljus"] .forum-edit-form textarea:focus{border-color:rgba(46,110,167,0.79)}
html[data-tema="ljus"] .forum-reaktionsbar{border-top:1px solid rgba(46,110,167,0.16)}
html[data-tema="ljus"] .forum-reaktion-btn{border:1px solid rgba(46,110,167,0.31);color:rgba(34,85,127,0.8)}
html[data-tema="ljus"] .forum-reaktion-btn:hover{background:rgba(48,116,175,0.096);border-color:rgba(46,110,167,0.565)}
html[data-tema="ljus"] .forum-reaktion-btn.aktiv{background:rgba(48,116,175,0.18);border-color:rgba(46,110,167,0.715);color:#133552;box-shadow:0 0 12px rgba(48,116,175,0.108)}
html[data-tema="ljus"] .forum-tagg{background:rgba(48,116,175,0.168);border:1px solid rgba(46,110,167,0.49)}
html[data-tema="ljus"] .forum-tagg:hover{background:rgba(48,116,175,0.264);border-color:rgba(46,110,167,0.79)}
html[data-tema="ljus"] .forum-tagg-popup{background:#f4f7fa;border:1px solid rgba(46,110,167,0.49);box-shadow:0 12px 32px rgba(20,40,62,0.144)}
html[data-tema="ljus"] .forum-tagg-popup-item{color:#133552}
html[data-tema="ljus"] .forum-tagg-popup-item:hover,html[data-tema="ljus"] .forum-tagg-popup-item.aktiv{background:rgba(48,116,175,0.216)}
html[data-tema="ljus"] .forum-tagg-popup-avatar{background:linear-gradient(135deg, rgba(48,116,175,0.336), rgba(48,116,175,0.12));border:1px solid rgba(46,110,167,0.49)}
html[data-tema="ljus"] .forum-citat{background:rgba(48,116,175,0.06);border-left:3px solid rgba(46,110,167,0.715)}
html[data-tema="ljus"] .forum-citat-text{color:rgba(34,85,127,0.8)}
html[data-tema="ljus"] .forum-citat .forum-citat{background:rgba(48,116,175,0.036)}
html[data-tema="ljus"] .dm-konv-rad{background:rgba(243,247,250,0.55);border:1px solid rgba(46,110,167,0.22)}
html[data-tema="ljus"] .dm-konv-rad:hover{background:rgba(243,247,250,0.85);border-color:rgba(46,110,167,0.49)}
html[data-tema="ljus"] .dm-konv-avatar{background:linear-gradient(135deg, rgba(48,116,175,0.36), rgba(48,116,175,0.12));border:1px solid rgba(46,110,167,0.46);color:#133552}
html[data-tema="ljus"] .dm-konv-namn{color:#133552}
html[data-tema="ljus"] .dm-konv-rad.olast .dm-konv-namn{color:#141f29}
html[data-tema="ljus"] .dm-konv-badge{color:#07111c}
html[data-tema="ljus"] .dm-tom{background:rgba(243,247,250,0.4);border:1px dashed rgba(46,110,167,0.31)}
html[data-tema="ljus"] .dm-tom-titel{color:#133552}
html[data-tema="ljus"] .dm-chat{background:rgba(248,250,252,0.4);border:1px solid rgba(46,110,167,0.22)}
html[data-tema="ljus"] .dm-dag-skiljare::before{background:rgba(48,116,175,0.12)}
html[data-tema="ljus"] .dm-dag-skiljare span{background:rgba(243,247,250,0.85);border:1px solid rgba(46,110,167,0.25)}
html[data-tema="ljus"] .dm-bubbel-rad.mitt .dm-bubbel{background:linear-gradient(135deg, rgba(48,116,175,0.42), rgba(48,116,175,0.24));border:1px solid rgba(46,110,167,0.49);color:#141f29}
html[data-tema="ljus"] .dm-bubbel-rad.andras .dm-bubbel{background:rgba(14,33,52,0.044);border:1px solid rgba(46,110,167,0.22);color:#133552}
html[data-tema="ljus"] .dm-bubbel-tid{color:rgba(34,85,127,0.8)}
html[data-tema="ljus"] .dm-kvitto{color:rgba(34,61,81,0.8)}
html[data-tema="ljus"] .dm-skriv-form{background:rgba(243,247,250,0.55);border:1px solid rgba(46,110,167,0.31)}
html[data-tema="ljus"] .dm-skriv-form textarea{background:rgba(241,245,249,0.9);border:1px solid rgba(46,110,167,0.34);color:#133552}
html[data-tema="ljus"] .dm-skriv-form textarea:focus{border-color:rgba(46,110,167,0.715)}
html[data-tema="ljus"] .tab-nav-medlem .tab-link:hover{background:rgba(48,116,175,0.108);border-color:rgba(46,110,167,0.49)}
html[data-tema="ljus"] .tab-nav-wrap::after{background:linear-gradient(90deg, transparent, rgba(247,249,251,0.92) 60%)}
html[data-tema="ljus"] .karta-progress{border:1px solid rgba(58,124,190,0.415)}
html[data-tema="ljus"] .karta-intro strong{color:#b86e00}
html[data-tema="ljus"] .karta-tabort{border:1.5px solid rgba(255,38,38,0.565);color:#a70000}
html[data-tema="ljus"] .karta-hint{background:rgba(38,132,216,0.12);border:1px dashed rgba(36,127,207,0.79)}
html[data-tema="ljus"] .karta-nal-egen{background:#ffd08a}
html[data-tema="ljus"] .karta-nal-vald{background:#ffd08a !important;box-shadow:0 0 0 4px rgba(255,167,36,0.21), 0 2px 8px rgba(20,40,62,0.16)}
html[data-tema="ljus"] .karta-etikett-vald{background:rgba(255,208,138,0.95) !important;color:#07111c !important;border-color:#ffa31a !important}
html[data-tema="ljus"] .mark-verktyg{background:rgba(14,33,52,0.033);border:1px solid rgba(58,124,190,0.31)}
html[data-tema="ljus"] .mark-rita-rad{border-top:1px dashed rgba(255,163,26,0.49);color:#a35200}
html[data-tema="ljus"] .mark-rita-rad strong{color:#141f29}
html[data-tema="ljus"] .mark-chip{background:rgba(38,132,216,0.12);border:1px solid rgba(36,127,207,0.49)}
html[data-tema="ljus"] .mark-chip-x{color:#a70000}
html[data-tema="ljus"] .karta-legend-yta{background:rgba(38,132,216,0.3);border:1.5px solid #247fcf}
html[data-tema="ljus"] .karta-fokus{background:rgba(255,167,36,0.108);border:1px solid rgba(255,163,26,0.565);color:#904b00}
html[data-tema="ljus"] .karta-fokus strong{color:#141f29}
html[data-tema="ljus"] .karta-fokus-rensa{border-bottom:1px dashed rgba(36,127,207,0.64)}
html[data-tema="ljus"] .karta-las-oppen{background:rgba(243,118,0,0.108);border-color:rgba(233,113,0,0.715);color:#a35200}
html[data-tema="ljus"] .karta-las-oppen strong{color:#904b00}
html[data-tema="ljus"] .karta-las-knapp:hover{background:rgba(38,132,216,0.12)}
html[data-tema="ljus"] .karta-las-knapp-stang{border-color:rgba(233,113,0,0.79);color:#a35200}
html[data-tema="ljus"] .karta-las-knapp-stang:hover{background:rgba(243,118,0,0.144)}
html[data-tema="ljus"] .karta-zoomhint{background:rgba(38,132,216,0.072);border:1px dashed rgba(36,127,207,0.415)}
html[data-tema="ljus"] .karta-etikett{background:rgba(245,248,251,0.85);color:#223d51;border:1px solid rgba(36,127,207,0.565)}
html[data-tema="ljus"] .dm-ny-panel{background:rgba(14,33,52,0.044);border:1px solid rgba(58,124,190,0.37)}
html[data-tema="ljus"] .dm-ny-rad{border-bottom:1px solid rgba(58,124,190,0.16)}
html[data-tema="ljus"] .dm-ny-rad:hover,html[data-tema="ljus"] .dm-ny-rad:active{background:rgba(38,132,216,0.108)}
html[data-tema="ljus"] .dm-ny-rad-styrelse{background:rgba(38,132,216,0.072);border:1px solid rgba(36,127,207,0.415)}
html[data-tema="ljus"] .dm-ny-avatar{color:#141f29}
html[data-tema="ljus"] .ev-kort{background:rgba(14,33,52,0.044);border:1px solid rgba(58,124,190,0.31)}
html[data-tema="ljus"] .ev-datum{background:rgba(38,132,216,0.108);border:1px solid rgba(36,127,207,0.415)}
html[data-tema="ljus"] .ev-fullt{background:rgba(213,98,0,0.18);color:#c25700;border:1px solid rgba(223,102,0,0.64)}
html[data-tema="ljus"] .ev-min-status{color:#258c4f}
html[data-tema="ljus"] .ev-antal{background:rgba(14,33,52,0.066);border:1px solid rgba(58,124,190,0.415)}
html[data-tema="ljus"] .ev-lank-rod{color:#a70000}
html[data-tema="ljus"] .ev-admin-rad{border-top:1px dashed rgba(58,124,190,0.265)}
html[data-tema="ljus"] .ev-installd-pill{background:rgba(255,28,28,0.18);color:#900000;border:1px solid rgba(255,18,18,0.64)}
html[data-tema="ljus"] .ev-passerad .ev-datum{background:rgba(14,33,52,0.044);border-color:rgba(58,124,190,0.265)}
html[data-tema="ljus"] .ev-skapa{background:rgba(38,132,216,0.06);border:1px solid rgba(36,127,207,0.415)}
html[data-tema="ljus"] .ev-fel{background:rgba(255,28,28,0.12);border:1px solid rgba(255,18,18,0.565);color:#900000}
html[data-tema="ljus"] .ms-flik:hover{color:#141f29}
html[data-tema="ljus"] .hem-ingress a{color:#141f29}
html[data-tema="ljus"] .hem-uppgift:hover{background:rgba(48,116,175,0.192)}
html[data-tema="ljus"] a.hem-kort:hover{border-color:rgba(46,110,167,0.64)}
html[data-tema="ljus"] .hem-nyhet-titel{color:#141f29}
html[data-tema="ljus"] .hem-knapp:hover{background:#8dbbe3}
html[data-tema="ljus"] .hem-knapp-lugn:hover{background:rgba(48,116,175,0.12)}
html[data-tema="ljus"] .hem-datumbricka{background:rgba(48,116,175,0.096)}
html[data-tema="ljus"] .hem-datumbricka span{color:#141f29}
html[data-tema="ljus"] .hush-ta-bort.bekrafta{color:#141f29}
html[data-tema="ljus"] .ft-meny-lista{box-shadow:0 16px 40px rgba(20,40,62,0.096)}
html[data-tema="ljus"][data-tema="ljus"] .ft-meny-lista{background:var(--ds-yta);box-shadow:0 16px 40px rgba(20,40,62,0.051)}
@media (max-width: 760px){
html[data-tema="ljus"] .ms-forum-trad .ft-svarsform{background:#f5f8fb}
html[data-tema="ljus"][data-tema="ljus"] .ms-forum-trad .ft-svarsform{background:#fafcfe}
}
html[data-tema="ljus"] .pk-ta-bort.bekrafta{color:#141f29}
/* ── assets/delad.css */
html[data-tema="ljus"] .ms-profil-meny a:hover,html[data-tema="ljus"] .ms-profil-ut:hover{background:rgba(48,116,175,0.12);color:#141f29}
/* ── admin.php (admin) */
/* ── bastu-neka.php (bastu-neka) */
/* ── bastuboka.php (bastuboka) */
/* ── bastuboka.php (bastuboka-1) */
/* ── galleri.php (galleri) */
/* ── grannsamverkan.php (grannsamverkan) */
/* ── hamn-strand.php (hamn-strand) */
/* ── footer.php */
html[data-tema="ljus"] .footer-kontakt a:hover,html[data-tema="ljus"] .footer-lankar a:hover{border-bottom-color:rgba(46,110,167,0.865)}
/* ── nav.php */
/* ── tillbaka.php */
html[data-tema="ljus"] .ulv-tillbaka{background:rgba(248,250,252,0.92);border-bottom:1px solid rgba(58,124,190,0.28)}
html[data-tema="ljus"] .ulv-tillbaka-lank{color:#1d65a5;border:1px solid rgba(36,127,207,0.565)}
html[data-tema="ljus"] .ulv-tillbaka-lank:hover,html[data-tema="ljus"] .ulv-tillbaka-lank:focus-visible{background:rgba(38,132,216,0.144);color:#141f29}
/* ── om.php (om) */
/* ── ovrigt.php (ovrigt) */
/* ── prognos.php (prognos) */
/* ── protokoll.php (protokoll) */
/* ── protokoll.php (protokoll) */
/* ── styrelse.php (styrelse) */
/* ── vader_diag.php */
/* ── vagforening.php (vagforening) */
/* ── vatten.php (vatten) */
/* ── inline-stilar i sidorna */
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="color:#ffb070"]{color:#c25700 !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="color:#fff"]{color:#141f29 !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="color:#c00"]{color:#c20000 !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="color:#e0edf8"]{color:#133552 !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="color:#f0c060"]{color:#b17c11 !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="color:#e89a9a"]{color:#9c2424 !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="stroke:#f0b450"]{stroke:#b2750f !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="color:#1b2d40"]{color:var(--ds-text) !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="color:#9fb2c2"]{color:#497497 !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="color:#cee5f7"]{color:#114268 !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="color:#7a8a9a"]{color:#497097 !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="color:#ffb0a8"]{color:#990e00 !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="color:#8edda3"]{color:#2d9549 !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="color:#f09090"]{color:#aa1717 !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="color:#6de89a"]{color:#1aa74e !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="color:#e8c890"]{color:#a17221 !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="color:#6ea6d7"]{color:#2a6598 !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="color:#c8d3de"]{color:#3a4d60 !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="color:#6e8193"]{color:#497197 !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="color:#9fb3c6"]{color:#53708b !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="color:#8ea3b6"]{color:#497297 !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="color:#f0b37e"]{color:#ae5c14 !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="color:#8ba3b8"]{color:#497397 !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="color:#7cb5e8"]{color:#1d65a5 !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="border-color:rgba(255,176,112,.5)"]{border-color:rgba(255,114,0,0.79) !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="background:#8a6d1f"]{background:#8a6d1f !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="background:rgba(0,0,0,.25)"]{background:rgba(255,255,255,0.25) !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="border-bottom:1px solid rgba(110,166,215,.10)"]{border-bottom:1px solid rgba(46,110,167,0.19) !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="border-color:rgba(110,166,215,.50)"]{border-color:rgba(46,110,167,0.79) !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="border-color:rgba(110,166,215,.20)"]{border-color:rgba(46,110,167,0.34) !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="border-top:1px solid rgba(110,166,215,.10)"]{border-top:1px solid rgba(46,110,167,0.19) !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="background:rgba(110,166,215,.06)"]{background:rgba(48,116,175,0.072) !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="border:1px solid rgba(110,166,215,.22)"]{border:1px solid rgba(46,110,167,0.37) !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="border-color:rgba(110,166,215,.22)"]{border-color:rgba(46,110,167,0.37) !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="background:rgba(50,180,90,.06)"]{background:rgba(40,144,72,0.072) !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="border-color:rgba(50,180,90,.22)"]{border-color:rgba(38,136,68,0.37) !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="border-left-color:rgba(240,180,80,.55)"]{border-left-color:rgba(191,126,16,0.865) !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="border-left:3px solid ' . ($p['typ'] === 'php-krasch' ? '#b3362b' : '#9a5410') . '"]{border-left:3px solid " . ($p["typ"] === "php-krasch" ? "#8c2a22" : "#9d5610") . " !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="background:#f6f8fa"]{background:#f6f8fa !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="border:1px solid rgba(110,166,215,.30)"]{border:1px solid rgba(46,110,167,0.49) !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="border-left:3px solid #a8d8b8"]{border-left:3px solid #5bb579 !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="background:rgba(110,166,215,.04)"]{background:rgba(48,116,175,0.048) !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="background:rgba(220,90,90,.18)"]{background:rgba(172,36,36,0.216) !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="border-color:rgba(220,90,90,.45)"]{border-color:rgba(163,35,35,0.715) !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="border:1px solid rgba(140,180,220,.3)"]{border:1px solid rgba(58,124,190,0.49) !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="border-color:rgba(226,75,74,.35)"]{border-color:rgba(162,27,26,0.565) !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="background:rgba(226,75,74,.12)"]{background:rgba(171,28,27,0.144) !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="border:1px solid rgba(226,75,74,.4)"]{border:1px solid rgba(162,27,26,0.64) !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="border-color:rgba(125,219,161,.5)"]{border-color:rgba(50,182,101,0.79) !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="background:rgba(50,180,90,.10)"]{background:rgba(40,144,72,0.12) !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="border:1px solid rgba(50,180,90,.25)"]{border:1px solid rgba(38,136,68,0.415) !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="border:1px solid rgba(220,160,90,.35)"]{border:1px solid rgba(163,104,35,0.565) !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="border-left:3px solid #d0a05a"]{border-left:3px solid #916729 !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="background:#1a3a5c"]{background:#e8eef5 !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="background:#07111b"]{background:#f8fafc !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="background:#0a1826"]{background:#f6f8fb !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="border-bottom:1px solid rgba(110,166,215,.12)"]{border-bottom:1px solid rgba(46,110,167,0.22) !important}
html[data-tema="ljus"]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) [style*="border-left:3px solid #6ea6d7"]{border-left:3px solid #2e6ea7 !important}


/* ===== från tema.css ===== */
/* Designtokens och ljust läge, handskrivet (fas 3, 2026-10-29).
   tema-ljus.css genereras och skriver om alla fasta färger. Här ligger det som
   behöver ett omdöme: tokens, logga, knappar, foton och väljaren. */

/* ── Tokens ───────────────────────────────────────────────────────────── */
:root:where(:not([data-sida^="medlemsregister"])) {
  --yta-1: rgba(12,25,38,.78);       /* kort */
  --yta-2: rgba(9,19,30,.88);        /* upphöjt kort, ark */
  --yta-sankt: rgba(255,255,255,.04);/* fält, chips */
  --text: #d7e4ef;
  --text-svag: #a4b7c8;
  --text-stark: #fff;
  --accent: #6ea6d7;
  --accent-text: #07111c;            /* text på accentknapp */
  --linje: rgba(110,166,215,.20);
  --fara: #e8786e;
  --varning: #f0b37e;
  --ok: #7ccf9a;
  --skugga-kort: 0 24px 70px rgba(0,0,0,.34);
  --radie-kort: 22px;
  --radie-knapp: 999px;
}

html[data-tema="ljus"]:where(:not([data-sida^="medlemsregister"])) {
  --navy-950: #f3f7fb;
  --navy-900: #eef3f8;
  --navy-800: #e7eef5;
  --navy-700: #d6e2ee;
  --blue-500: #2c6aa3;
  --blue-400: #2a679f;
  --mist: #1b2d40;
  --mist-dim: #4a5e72;
  --sand: #34485c;
  --line: rgba(30,74,116,.16);
  --panel: rgba(255,255,255,.86);
  --panel-2: rgba(255,255,255,.96);
  --shadow: 0 10px 30px rgba(20,44,70,.10);

  --yta-1: #ffffff;
  --yta-2: #ffffff;
  --yta-sankt: rgba(14,33,52,.04);
  --text: #1b2d40;
  --text-svag: #4a5e72;
  --text-stark: #0e2134;
  --accent: #2a679f;
  --accent-text: #ffffff;
  --linje: rgba(30,74,116,.16);
  --fara: #b3362b;
  --varning: #9a5410;
  --ok: #1f7a45;
  --skugga-kort: 0 8px 24px rgba(20,44,70,.08);
  /* tokens från medlemssystem.css (admin- och formulärpaneler) */
  --surface: #ffffff;
  --border: rgba(30,74,116,.14);
  --blue: #2a679f;
}
html[data-tema="ljus"]:where(:not([data-sida^="medlemsregister"])) body::before { opacity: .35; }

/* Logga: den vita loggan blir mörkblå */
html[data-tema="ljus"] .brand-mark,
html[data-tema="ljus"] .footer-logo,
html[data-tema="ljus"]:where(:not([data-sida^="medlemsregister"])) img[src*="white-logo"] { filter: brightness(0) invert(13%) sepia(40%) saturate(900%) hue-rotate(180deg); }

/* Toppraden: på iPhone ligger statusfältet över raden med vit text, så den delen hålls mörk */
html[data-tema="ljus"]:where(:not([data-sida^="medlemsregister"])) header.nav {
  background:
    linear-gradient(var(--ds-stark), var(--ds-stark)) top / 100% var(--sa-top, env(safe-area-inset-top, 0px)) no-repeat,
    rgba(250,252,254,.92) !important;
  border-bottom-color: rgba(30,74,116,.12);
  box-shadow: 0 1px 0 rgba(255,255,255,.6), 0 6px 18px rgba(20,44,70,.05);
}
html[data-tema="ljus"] .bottom-nav,
html[data-tema="ljus"] .ms-botten {
  background: rgba(250,252,254,.96) !important;
  border-top: 1px solid rgba(30,74,116,.12) !important;
  box-shadow: 0 -6px 18px rgba(20,44,70,.05);
}

/* Kort och paneler: vita med tunn kant och mjuk skugga i stället för glas */
html[data-tema="ljus"] .card,
html[data-tema="ljus"]:where(:not([data-sida^="medlemsregister"])) .panel,
html[data-tema="ljus"] .hem-kort {
  border-color: rgba(30,74,116,.13) !important;
}

/* Primärknappar: mörkblå med vit text */
html[data-tema="ljus"] .btn-p,
html[data-tema="ljus"] .hero-cta-primary {
  background: #2a679f;
  color: #fff;
  border-color: #2a679f;
  box-shadow: 0 6px 16px rgba(42,103,159,.22);
}
html[data-tema="ljus"] .btn-p:hover { background: #22588a !important; }

/* Fält */
html[data-tema="ljus"]:where(:not([data-sida^="medlemsregister"])) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html[data-tema="ljus"]:where(:not([data-sida^="medlemsregister"])) select,
html[data-tema="ljus"]:where(:not([data-sida^="medlemsregister"])) textarea {
  background-color: var(--ds-yta);
  color: var(--ds-text);
  border-color: rgba(30,74,116,.24);
}
html[data-tema="ljus"]:where(:not([data-sida^="medlemsregister"])) input::placeholder,
html[data-tema="ljus"]:where(:not([data-sida^="medlemsregister"])) textarea::placeholder { color: #6b7d8f; }
html[data-tema="ljus"]:where(:not([data-sida^="medlemsregister"])) select option { background: var(--ds-yta); color: var(--ds-text); }

/* Foton: ytor med bild bakom behåller mörk ton och vit text */
html[data-tema="ljus"] .page-hero,
html[data-tema="ljus"] .hero,
html[data-tema="ljus"] .hem-halsning,
html[data-tema="ljus"] .break-section {
  --mist: #d7e4ef;
  --mist-dim: #c4d4e2;
  --blue-400: #8fc0ea;
  --text: #d7e4ef;
  --text-svag: #c4d4e2;
  --text-stark: #fff;
  --navy-950: #07111b;
  --navy-900: #0a1826;
  --navy-800: #102438;
  color: #d7e4ef;
  background-color: #0b1826;
}

/* Skrollist och markering */
html[data-tema="ljus"]:where(:not([data-sida^="medlemsregister"])) ::selection { background: rgba(42,103,159,.22); color: var(--ds-stark); }

/* ── Väljaren för utseende ────────────────────────────────────────────── */
:where(html:not([data-sida^="medlemsregister"])) .tema-valjare { display: flex; flex-direction: column; gap: 8px; }
:where(html:not([data-sida^="medlemsregister"])) .tema-valjare-rubrik {
  font: 600 .8125rem/1.2 var(--condensed); letter-spacing: .12em; text-transform: uppercase;
  color: var(--mist-dim);
}
:where(html:not([data-sida^="medlemsregister"])) .tema-valjare-knappar {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px;
  border-radius: 14px; background: var(--yta-sankt); border: 1px solid var(--line);
}
:where(html:not([data-sida^="medlemsregister"])) .tema-knapp {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 4px; border: 0; border-radius: 10px; background: transparent;
  color: var(--mist-dim); font: 600 .8125rem/1.1 var(--body); cursor: pointer;
  transition: background .15s, color .15s;
}
:where(html:not([data-sida^="medlemsregister"])) .tema-knapp svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:where(html:not([data-sida^="medlemsregister"])) .tema-knapp:hover { color: var(--mist); }
:where(html:not([data-sida^="medlemsregister"])) .tema-knapp:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 2px; }

/* I profilmenyn */
.ms-profil-meny .tema-valjare { padding: 10px 12px 12px; border-top: 1px solid var(--line); margin-top: 4px; }
/* I sidfoten */
:where(html:not([data-sida^="medlemsregister"])) .footer .tema-valjare { flex-direction: row; align-items: center; gap: 12px; }
:where(html:not([data-sida^="medlemsregister"])) .footer .tema-valjare-knappar { grid-template-columns: repeat(3, auto); }
:where(html:not([data-sida^="medlemsregister"])) .footer .tema-knapp { flex-direction: row; padding: 6px 10px; }

@media (prefers-reduced-motion: no-preference) {
  html.tema-byter:where(:not([data-sida^="medlemsregister"])), html.tema-byter:where(:not([data-sida^="medlemsregister"])) * { transition: background-color .25s, color .25s, border-color .25s !important; }
}

/* Knappar och brickor med accentfärgad yta får vit text i ljust läge */
html[data-tema="ljus"]:where(:not([data-sida^="medlemsregister"])) :is(.deny-btn, .gdpr-btn) { background: var(--ds-accent) !important; color: var(--ds-accent-text) !important; }
/* Initialavatarer: färgad cirkel med vit text, som i mörkt läge */
/* Halvgenomskinliga hjälptexter blir för bleka på vitt */
html[data-tema="ljus"]:where(:not([data-sida^="medlemsregister"])) [style*="opacity:.6"] { opacity: 1 !important; }
/* Mörka slöjor bakom ark och rutor blir en lätt blå slöja */
html[data-tema="ljus"]:where(:not([data-sida^="medlemsregister"])) :is(.ms-mer-bakgrund, .gdpr-overlay) { background: rgba(14,33,52,.38) !important; }
html[data-tema="ljus"] .gdpr-modal { background: var(--ds-yta) !important; }
:where(html:not([data-sida^="medlemsregister"])) .footer .tema-knapp span { white-space: nowrap; }
/* Inloggningsraden på webbplatsen byggs av nav-status.js med fasta färger */
html[data-tema="ljus"]:where(:not([data-sida^="medlemsregister"])) .nav-auth-namn { color: var(--ds-text) !important; }
html[data-tema="ljus"]:where(:not([data-sida^="medlemsregister"])) .nav-auth-logout { color: var(--ds-svag) !important; border-color: rgba(30,74,116,.24) !important; }
html[data-tema="ljus"] .nav-auth-slot a[href$="login.php"] { background: rgba(42,103,159,.08); border-color: rgba(42,103,159,.3); }
/* Inloggningsknappen från navAuthBar() saknade stil på sidor utan medlemssystem.css (t.ex. prognos.php) */
:where(html:not([data-sida^="medlemsregister"])) .nav-auth-btn { background: rgba(110,166,215,.15); border: 1px solid rgba(110,166,215,.28); border-radius: 999px; color: var(--blue-400); font-family: var(--condensed); font-size: .8125rem; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
/* Hälsningen på Översikt ligger på foto: datum, rubrik och ingress behåller ljus text och skugga */
html[data-tema="ljus"] .hem-halsning .hem-ingress { color: #e3eef7; }
html[data-tema="ljus"] .hem-halsning .hem-ingress a { color: #fff; }
/* Mobilmenyn under ☰: helt täckande bakgrund så att texten bakom inte lyser igenom */
@media (max-width: 760px) {
  header.nav .nav-links { background: #0c1926 !important; }
  html[data-tema="ljus"] header.nav .nav-links { background: var(--ds-yta) !important; box-shadow: 0 20px 50px rgba(20,44,70,.18) !important; }
}

/* ══ Typografi (fas 3, 2026-10-29) ═════════════════════════════════════════
   Allt man trycker på skrivs med vanlig text i läsbar storlek, som i flikraden
   och profilmenyn. Smala versaler finns kvar i små etiketter och rubrikrader,
   och de stora rubrikerna behåller sitt typsnitt (Bebas Neue). */
:where(html:not([data-sida^="medlemsregister"])) :is(
  .nav-links a, .nav-dropdown-trigger, .nav-dropdown-menu a, .nav-auth-btn, .nav-auth-logout,
  .btn, .btn-p, .btn-g, .btn-s, .btn-d, .btn-tiny, .btn-pill, .fbtn, .tab-btn, .tab-link, .filter-btn,
  .hero-cta-primary, .hero-cta-secondary, .hamnkapten-cta, .featured-cta, .styrelse-intro-cta, .contact-cta a,
  .chip-link, .doc-filter-pill, .flode-chip, .flode-lasall-btn, .flode-skriv-knapp,
  .forum-redigera-btn, .forum-svara-btn, .gdpr-btn, .deny-btn, .deny-btn-alt, .login-btn, .li-btn,
  .bridge-back-btn, .bridge-reset-btn, .brygga-doc-btn, .sjobod-reset-btn, .styrelse-logg-lank,
  .dash-snabb-knapp, .dm-radera-konv-btn, .ulv-tillbaka-lank, .auth-toggle, .tab-group > summary, .tab-group-menu a,
  .quicklink-text, .link-item span:last-child, .vader-mer, .badtemp-form button, .p-tillbaka
) {
  font-family: var(--body) !important;
  text-transform: none;
  letter-spacing: .005em !important;
  font-weight: 600 !important;
}
/* Storlekar: menyer och vanliga knappar 15 px, små knappar och filter 14 px */
:where(html:not([data-sida^="medlemsregister"])) :is(.nav-auth-btn, .nav-auth-logout, .btn-g, .btn-tiny, .fbtn, .tab-btn, .tab-link, .filter-btn, .chip-link,
    .doc-filter-pill, .flode-chip, .flode-lasall-btn, .forum-redigera-btn, .forum-svara-btn,
    .bridge-back-btn, .bridge-reset-btn, .brygga-doc-btn, .sjobod-reset-btn, .styrelse-logg-lank,
    .dash-snabb-knapp, .dm-radera-konv-btn, .ulv-tillbaka-lank, .auth-toggle, .tab-group > summary, .tab-group-menu a,
    .quicklink-text, .link-item span:last-child, .vader-mer, .badtemp-form button, .p-tillbaka) { font-size: .875rem !important; }
/* Siffror i filterknappar ska inte ärva versalfärgen och storleken */
/* Mobilmenyn under ☰ får lite större text och vänsterställda rader */
/* Hover på Logga in och knappar som saknade det (2026-10-30) */
.nav-auth-slot a[href$="login.php"], :where(html:not([data-sida^="medlemsregister"])) .nav-auth-btn { transition: background .15s, border-color .15s; }
.nav-auth-slot a[href$="login.php"]:hover, :where(html:not([data-sida^="medlemsregister"])) .nav-auth-btn:hover { background: rgba(110,166,215,.26) !important; border-color: rgba(110,166,215,.5) !important; }
html[data-tema="ljus"] .nav-auth-slot a[href$="login.php"]:hover { background: rgba(42,103,159,.16) !important; border-color: rgba(42,103,159,.5) !important; }
.hem-kort-lank:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Sökfält och mottagarfält i Meddelanden: ingen vit inre ruta i ljust läge */
html[data-tema="ljus"] .msg-sok input, html[data-tema="ljus"] .msg-till input, html[data-tema="ljus"] .msg-gruppnamn input { background: transparent !important; border: 0 !important; }
/* Kontrast (2026-10-30) */
html:not([data-tema="ljus"]) .msg-pill-ny { color: #b3d6f3; }
/* Större tryckytor på pekskärm (2026-10-30) */
@media (hover: none) {
  :where(html:not([data-sida^="medlemsregister"])) .nav-auth-btn, .nav-auth-slot a[href$="login.php"] { min-height: 44px; }
  :where(html:not([data-sida^="medlemsregister"])) .footer .tema-knapp { min-height: 44px; }
  .filter-btn { min-height: 44px; }
}
/* Fokusmärket syns tydligt i ljust läge, minst 3:1 (2026-10-30) */
html[data-tema="ljus"]:where(:not([data-sida^="medlemsregister"])) :focus-visible { outline-color: #1f5f93 !important; }


/* ===== från ds.css ===== */
/* ═══════════════════════════════════════════════════════════════════════════
   Ulvnäs designsystem (2026-10-30)

   Laddas sist på varje sida via includes/tema.php. Tre delar:
     1. Tokens: samma namn i ljust och mörkt läge.
     2. Komponenter med prefixet ds-: .ds-knapp, .ds-chip, .ds-marke,
        .ds-kort, .ds-falt, .ds-segment, .ds-besked, .ds-tabell, .ds-etikett.
     3. Samordning: äldre klasser på de öppna sidorna, bastun och
        medlemsdelen får samma knappar, filter och etiketter.

   Regler: ingen text under 13 px, brödtext 16 px, knappar med vanlig text
   (Barlow 600 15 px), allt som går att trycka på är minst 44 px högt (även filterchips).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
:root {
  --ds-bg: #08131f;
  --ds-yta: #0e1d2c;
  --ds-yta-2: #13263a;
  --ds-sankt: #0b1825;
  --ds-text: #d7e4ef;
  --ds-svag: #a4b7c8;
  --ds-stark: #ffffff;
  --ds-accent: #6ea6d7;
  --ds-accent-stark: #a9cdee;
  --ds-accent-text: #07111c;
  --ds-accent-svag: #13293f;
  --ds-linje: #1f3448;
  --ds-linje-stark: #2f4d69;
  --ds-falt-kant: #5a7894;
  --ds-fara: #e8786e;
  --ds-fara-svag: #3a1f25;
  --ds-varning: #f0b37e;
  --ds-varning-svag: #33281d;
  --ds-ok: #7ccf9a;
  --ds-ok-svag: #15302a;
  --ds-guld: #f0c27e;
  --ds-guld-svag: #332a1b;
  --ds-guld-kant: rgba(240,194,126,.38);
  --ds-skugga: 0 18px 50px rgba(0,0,0,.30);
  --ds-radie: 20px;
  --ds-display: 'Bebas Neue', 'Barlow Condensed', sans-serif;
  --ds-font: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ds-cond: 'Barlow Condensed', 'Barlow', sans-serif;
}
html[data-tema="ljus"] {
  --ds-bg: #f3f7fb;
  --ds-yta: #ffffff;
  --ds-yta-2: #ffffff;
  --ds-sankt: #eef3f8;
  --ds-text: #1b2d40;
  --ds-svag: #4a5e72;
  --ds-stark: #0e2134;
  --ds-accent: #2a679f;
  --ds-accent-stark: #1d4f7c;
  --ds-accent-text: #ffffff;
  --ds-accent-svag: #e7f0f8;
  --ds-linje: #d5e0ea;
  --ds-linje-stark: #b5c7d8;
  --ds-falt-kant: #8296aa;
  --ds-fara: #b3362b;
  --ds-fara-svag: #fbeceb;
  --ds-varning: #9a5410;
  --ds-varning-svag: #fbf0e4;
  --ds-ok: #1f7a45;
  --ds-ok-svag: #e6f3eb;
  --ds-guld: #7a5300;
  --ds-guld-svag: #fbf3dc;
  --ds-guld-kant: #e4c878;
  --ds-skugga: 0 8px 24px rgba(20,44,70,.08);
}
/* Ytor med foto bakom behåller mörka värden även i ljust läge */
html[data-tema="ljus"] :is(.hero, .hem-halsning, .quote-band, .break-section, .visual, .mote-band) {
  --ds-text: #d7e4ef;
  --ds-svag: #c4d4e2;
  --ds-stark: #ffffff;
  --ds-accent: #8fc0ea;
  --ds-accent-text: #07111c;
  --ds-accent-svag: rgba(143,192,234,.16);
  --ds-linje: rgba(143,192,234,.30);
}

/* ── 2. Komponenter ────────────────────────────────────────────────────── */
.ds-etikett {
  font: 600 13px/1.2 var(--ds-cond);
  letter-spacing: .09em; text-transform: uppercase; color: var(--ds-svag);
}
.ds-display { margin: 0; font: 400 clamp(2.5rem, 7vw, 3.75rem)/.95 var(--ds-display); letter-spacing: .02em; color: var(--ds-stark); }
.ds-h1 { margin: 0; font: 400 clamp(2.5rem, 6vw, 3.25rem)/1 var(--ds-display); letter-spacing: .02em; color: var(--ds-stark); }
.ds-h3 { margin: 0; font: 600 1.125rem/1.3 var(--ds-font); color: var(--ds-stark); }

.ds-knapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 22px; box-sizing: border-box;
  border-radius: 999px; border: 1.5px solid transparent;
  font: 600 15px/1.2 var(--ds-font); letter-spacing: 0; text-transform: none;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.ds-knapp svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ds-knapp:hover { transform: translateY(-1px); }
.ds-knapp:active { transform: none; }
.ds-knapp:disabled, .ds-knapp[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.ds-knapp-primar { background: var(--ds-accent); border-color: var(--ds-accent); color: var(--ds-accent-text); }
.ds-knapp-primar:hover { filter: brightness(1.06); }
.ds-knapp-sekundar { background: transparent; border-color: var(--ds-accent); color: var(--ds-accent); }
.ds-knapp-sekundar:hover { background: var(--ds-accent-svag); }
.ds-knapp-tyst { background: transparent; border-color: var(--ds-linje-stark); color: var(--ds-text) !important; }
.ds-knapp-tyst:hover { border-color: var(--ds-accent); color: var(--ds-accent) !important; }
.ds-knapp-fara { background: transparent; border-color: var(--ds-fara); color: var(--ds-fara); }
.ds-knapp-fara:hover { background: var(--ds-fara-svag); }
.ds-knapp-stor { min-height: 52px; padding: 0 28px; font-size: 16px; }
.ds-knapp-ikon { width: 44px; padding: 0; }
.ds-knapp-text { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--ds-accent); font: 600 15px/1.2 var(--ds-font); letter-spacing: 0; text-transform: none; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }

.ds-chip {
  display: inline-flex; align-items: center; gap: 8px; position: relative;
  min-height: 44px; padding: 0 16px; box-sizing: border-box;
  border-radius: 999px; border: 1.5px solid var(--ds-linje-stark);
  background: var(--ds-yta); color: var(--ds-text);
  font: 600 15px/1 var(--ds-font); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.ds-chip::after { content: ''; position: absolute; inset: -2px 0; }
.ds-chip:hover { border-color: var(--ds-accent); }
.ds-chip.aktiv, .ds-chip[aria-pressed="true"], .ds-chip[aria-current="page"], .ds-chip[aria-current="true"] { background: var(--ds-accent); border-color: var(--ds-accent); color: var(--ds-accent-text); }
.ds-chip .antal { font: 700 13px/1 var(--ds-cond); padding: 4px 8px; border-radius: 999px; background: var(--ds-accent-svag); color: inherit; }
.ds-chip.aktiv .antal, .ds-chip[aria-pressed="true"] .antal { background: var(--ds-accent-text); color: var(--ds-accent); }

.ds-marke {
  display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 0 10px;
  border-radius: 999px; white-space: nowrap;
  font: 700 13px/1 var(--ds-cond); letter-spacing: .07em; text-transform: uppercase;
  background: var(--ds-accent-svag); color: var(--ds-accent);
}
.ds-marke-ok { background: var(--ds-ok-svag); color: var(--ds-ok); }
.ds-marke-fara { background: var(--ds-fara-svag); color: var(--ds-fara); }
.ds-marke-guld { background: var(--ds-guld-svag); color: var(--ds-guld); }
.ds-marke-neutral { background: var(--ds-sankt); color: var(--ds-svag); }

.ds-kort {
  background: var(--ds-yta); border: 1px solid var(--ds-linje);
  border-radius: var(--ds-radie); padding: 24px; box-shadow: var(--ds-skugga);
}

.ds-falt {
  width: 100%; box-sizing: border-box; min-height: 48px; padding: 0 14px;
  border-radius: 12px; border: 1.5px solid var(--ds-linje-stark);
  background: var(--ds-sankt); color: var(--ds-text);
  font: 400 16px/1.4 var(--ds-font);
}
textarea.ds-falt { padding: 12px 14px; min-height: 96px; resize: vertical; }
select.ds-falt { padding-right: 36px; }
/* Datum och tid på iPhone (v42): Safari ger fälten en egen minsta bredd och centrerad text,
   så att de sticker ut ur sin kolumn. Fälten får krympa och texten står till vänster som i övriga fält. */
input.ds-falt:is([type="date"], [type="time"], [type="datetime-local"]) { min-width: 0; max-width: 100%; -webkit-appearance: none; appearance: none; text-align: left; display: block; }
input.ds-falt:is([type="date"], [type="time"], [type="datetime-local"])::-webkit-date-and-time-value { text-align: left; margin: 0; }
.ds-falt-grupp { min-width: 0; }
.ds-falt:focus { border-color: var(--ds-accent); outline: none; box-shadow: 0 0 0 3px var(--ds-accent-svag); }
.ds-falt[aria-invalid="true"] { border-color: var(--ds-fara); }
.ds-falt-grupp { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ds-falt-hjalp { font-size: .875rem; line-height: 1.45; color: var(--ds-svag); }

.ds-besked { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-radius: 14px; font-size: 1rem; line-height: 1.5; color: var(--ds-text); background: var(--ds-accent-svag); }
.ds-besked > svg { flex: none; width: 20px; height: 20px; margin-top: 2px; fill: none; stroke: var(--ds-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ds-besked-ok { background: var(--ds-ok-svag); } .ds-besked-ok > svg { stroke: var(--ds-ok); }
.ds-besked-fara { background: var(--ds-fara-svag); } .ds-besked-fara > svg { stroke: var(--ds-fara); }

:is(.ds-knapp, .ds-chip, .ds-falt, .ds-segment > *):focus-visible { outline: 3px solid var(--ds-accent); outline-offset: 2px; }

/* ── 3. Samordning av äldre klasser ────────────────────────────────────── */
/* Knappar och fält ärver sidans typsnitt i stället för webbläsarens */
:where(button, input, select, textarea) { font-family: inherit; }
/* Primära knappar */
html[data-tema]:not([data-sida^="medlemsregister"]) :is(.btn.primary, .hero-cta-primary, .li-btn-primary, .login-btn:not(.login-btn-admin), .contact-cta a.btn-pill, .featured-cta) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 22px; box-sizing: border-box;
  border-radius: 999px; border: 1.5px solid var(--ds-accent);
  background: var(--ds-accent); color: var(--ds-accent-text);
  font: 600 15px/1.2 var(--ds-font); letter-spacing: 0; text-transform: none;
  box-shadow: none; text-decoration: none; opacity: 1;
}
html[data-tema]:not([data-sida^="medlemsregister"]) :is(.btn.primary, .hero-cta-primary, .li-btn-primary, .login-btn:not(.login-btn-admin), .contact-cta a.btn-pill, .featured-cta):hover { filter: brightness(1.06); background: var(--ds-accent); }
html[data-tema]:not([data-sida^="medlemsregister"]) :is(.btn.primary, .hero-cta-primary, .li-btn-primary, .login-btn, .contact-cta a.btn-pill, .featured-cta, .li-btn-secondary, .chip-link, .hamnkapten-cta) svg { stroke: currentColor; }
/* Sekundära knappar */
html[data-tema]:not([data-sida^="medlemsregister"]) :is(.btn:not(.primary), .li-btn-secondary, .login-btn-admin, .chip-link, .hamnkapten-cta) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; box-sizing: border-box;
  border-radius: 999px; border: 1.5px solid var(--ds-accent);
  background: transparent; color: var(--ds-accent);
  font: 600 15px/1.2 var(--ds-font); letter-spacing: 0; text-transform: none;
  box-shadow: none; text-decoration: none;
}
html[data-tema]:not([data-sida^="medlemsregister"]) :is(.btn:not(.primary), .li-btn-secondary, .login-btn-admin, .chip-link, .hamnkapten-cta):hover { background: var(--ds-accent-svag); border-color: var(--ds-accent); }
html[data-tema]:not([data-sida^="medlemsregister"]) .chip-link.is-placeholder { border-style: dashed; border-color: var(--ds-linje-stark); }
/* Medlemsdelens knappar följer samma skala */
html[data-tema]:not([data-sida^="medlemsregister"]) .btn-p { min-height: 44px; font-size: 15px; }
/* Filter: samma chip överallt */
html[data-tema]:not([data-sida^="medlemsregister"]) :is(.filter-btn, .doc-filter-pill, .logg-filterknapp) {
  display: inline-flex; align-items: center; gap: 8px; position: relative;
  min-height: 44px; padding: 0 16px; box-sizing: border-box;
  border-radius: 999px; border: 1.5px solid var(--ds-linje-stark);
  background: var(--ds-yta); color: var(--ds-text);
  font: 600 15px/1 var(--ds-font); letter-spacing: 0; text-transform: none; text-decoration: none; cursor: pointer;
}
html[data-tema]:not([data-sida^="medlemsregister"]) :is(.filter-btn, .doc-filter-pill, .logg-filterknapp)::after { content: ''; position: absolute; inset: -2px 0; }
html[data-tema]:not([data-sida^="medlemsregister"]) :is(.filter-btn, .doc-filter-pill, .logg-filterknapp):hover { border-color: var(--ds-accent); }
html[data-tema]:not([data-sida^="medlemsregister"]) :is(.filter-btn.active, .doc-filter-pill.active, .logg-filter-aktiv) { background: var(--ds-accent); border-color: var(--ds-accent); color: var(--ds-accent-text); }
/* Sidhuvudet: inloggning och menyknappar går att träffa */
html[data-tema]:not([data-sida^="medlemsregister"]) :is(.nav-auth-btn, .nav-auth-slot a[href$="login.php"]) {
  min-height: 44px; padding: 0 18px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; font: 600 15px/1.2 var(--ds-font) !important; letter-spacing: 0 !important; text-transform: none;
}
html[data-tema]:not([data-sida^="medlemsregister"]) .tema-knapp { min-height: 44px; }
/* Etiketter ovanför rubriker */
html[data-tema]:not([data-sida^="medlemsregister"]) [class*="eyebrow"] { font-family: var(--ds-cond) !important; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }

/* Efter granskningen (2026-10-30) */
html[data-tema]:not([data-sida^="medlemsregister"]) :is(.doc-filter-pill.active, .filter-btn.active) :is(span, b, small) { background: var(--ds-accent-text); color: var(--ds-accent); }
html[data-tema]:not([data-sida^="medlemsregister"]) :is(.btn, .li-btn, .login-btn, .chip-link, .hamnkapten-cta, .featured-cta, .contact-cta a.btn-pill, .hero-cta-primary, .vader-mer, .p-tillbaka) { font-family: var(--ds-font) !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0 !important; }

/* Väderikoner (vader_api.php: vaderIkon) */
.vader-ikon { width: 1.25em; height: 1.25em; display: inline-block; vertical-align: -0.2em; color: var(--ds-accent); }
.vader-ikon.vi-sol, .vader-ikon.vi-halv { color: #e0a53a; }
html[data-tema="ljus"] .vader-ikon.vi-sol, html[data-tema="ljus"] .vader-ikon.vi-halv { color: #b7791f; }
.vader-ikon.vi-aska { color: var(--ds-varning); }

/* Ljust läge: lugn, jämn bakgrund på alla sidor (2026-10-30) */
html[data-tema="ljus"] body { background: var(--ds-bg) !important; }
html[data-tema="ljus"] body::after { background: none !important; }

/* Sidhuvudets inloggningsknapp i samma form som övriga knappar */

/* Inaktiva knappar: tyst knapp med halv styrka, inte en egen stil */


/* Dolda komponenter ska alltid vara dolda */
:is(.ds-knapp, .ds-besked, .ds-chip, .ds-marke)[hidden] { display: none !important; }

/* Temaväljaren: valt läge fyllt i accentfärg, som övriga val */
html[data-tema] .tema-knapp[aria-pressed="true"] { background: var(--ds-accent); color: var(--ds-accent-text) !important; }

/* Primärknappar: bakgrund och text kommer alltid från samma tokens, även på foton (2026-10-31) */

/* Menyerna under Föreningen och Om Ulvnäs, samma form som profilmenyn (2026-10-31) */
html[data-tema]:not([data-sida^="medlemsregister"]) .nav-dropdown-menu-inner {
  background: var(--ds-yta) !important; border: 1px solid var(--ds-linje) !important;
  border-radius: 18px !important; box-shadow: var(--ds-skugga) !important; padding: 8px; min-width: 240px;
}
html[data-tema]:not([data-sida^="medlemsregister"]) .nav-dropdown-menu-inner a {
  display: flex; align-items: center; min-height: 44px; box-sizing: border-box;
  padding: 0 12px; border: 0 !important; border-radius: 10px !important;
  font: 500 1rem/1.3 var(--ds-font) !important; letter-spacing: 0 !important; background: none; white-space: nowrap;
}
html[data-tema]:not([data-sida^="medlemsregister"]) .nav-dropdown-menu-inner a:hover { background: var(--ds-accent-svag) !important; color: var(--ds-stark) !important; }
html[data-tema]:not([data-sida^="medlemsregister"]) .nav-dropdown-menu-inner a.active { background: var(--ds-accent-svag); color: var(--ds-accent); font-weight: 600 !important; }
html[data-tema]:not([data-sida^="medlemsregister"]) .nav-dropdown-menu-inner a:focus-visible { outline: 3px solid var(--ds-accent); outline-offset: -3px; }
html[data-tema] svg.nav-caret { width: 16px; height: 16px; flex: none; opacity: .7; transition: transform .2s ease; }
@media (max-width: 760px) {
  html[data-tema]:not([data-sida^="medlemsregister"]) .nav-dropdown-menu-inner {
    background: transparent !important; border: 0 !important; border-left: 2px solid var(--ds-linje) !important;
    border-radius: 0 !important; box-shadow: none !important; padding: 0 0 0 12px; margin: 4px 0 4px 8px; min-width: 0;
  }
  html[data-tema]:not([data-sida^="medlemsregister"]) .nav-dropdown-menu-inner a { white-space: normal; min-height: 48px; }
  html[data-tema] header.nav .nav-links { left: 12px; right: 12px; box-sizing: border-box; }
  html[data-tema] .nav-dropdown { width: 100%; align-self: stretch; }
  html[data-tema] .nav-dropdown-trigger { display: flex; width: 100%; justify-content: space-between; text-align: left; }
}

/* Platt meny i sidhuvudet (2026-10-31) */
html[data-tema] header.nav .nav-links { gap: 4px; }
html[data-tema] header.nav :is(.nav-links > a.nav-lank, .nav-dropdown-trigger) {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; box-sizing: border-box;
  border: 0 !important; border-radius: 10px; background: transparent;
  color: var(--ds-text); font: 600 1rem/1.2 var(--ds-font) !important; letter-spacing: 0 !important;
  text-transform: none !important; text-decoration: none; white-space: nowrap;
}
html[data-tema] header.nav :is(.nav-links > a.nav-lank, .nav-dropdown-trigger):hover { background: var(--ds-accent-svag); color: var(--ds-stark); }
html[data-tema] header.nav :is(.nav-links > a.nav-lank.active, .nav-dropdown.has-active > .nav-dropdown-trigger) { color: var(--ds-accent); background: var(--ds-accent-svag); }
html[data-tema] header.nav .nav-links > a.nav-lank:focus-visible { outline: 3px solid var(--ds-accent); outline-offset: 2px; }
@media (max-width: 760px) {
  html[data-tema] header.nav .nav-links { gap: 0; max-height: calc(100dvh - 170px - var(--sa-bottom, env(safe-area-inset-bottom, 0px))); overflow-y: auto; overscroll-behavior: contain; }
  html[data-tema] header.nav .nav-links > a.nav-lank { display: flex; width: 100%; min-height: 48px; border-radius: 0; border-bottom: 1px solid var(--ds-linje) !important; }
  html[data-tema] header.nav .nav-links > a.nav-lank.active { background: transparent; }
}
/* Mellanbredd: loggan utan text och profilen utan namn så att menyn får plats på en rad */
@media (max-width: 1080px) {
  html[data-tema] header.nav .brand-text span { display: none; }
}
@media (min-width: 761px) and (max-width: 1080px) {
  html[data-tema] header.nav :is(.nav-links > a.nav-lank, .nav-dropdown-trigger) { padding: 0 9px; }
  html[data-tema] header.nav :is(.ms-profil-namn, .ms-profil-pil) { display: none; }
}
@media (min-width: 761px) and (max-width: 960px) {
  html[data-tema] header.nav .brand-text { display: none; }
}

/* Undersidornas rubrik utan foto, samma form som Väder (2026-10-31). Startsidan behåller sitt foto. */
html[data-tema]:not([data-sida^="medlemssystem"]) .page-hero {
  min-height: 0; display: block; padding: 40px 0 8px;
  background: none; color: var(--ds-text); isolation: auto;
}
html[data-tema]:not([data-sida^="medlemssystem"]) .page-hero::before,
html[data-tema]:not([data-sida^="medlemssystem"]) .page-hero::after { content: none; display: none; animation: none !important; }
html[data-tema]:not([data-sida^="medlemssystem"]) .page-hero .eyebrow {
  margin: 0; font: 600 13px/1.2 var(--ds-cond); letter-spacing: .09em; text-transform: uppercase; color: var(--ds-svag); text-shadow: none !important;
}
html[data-tema]:not([data-sida^="medlemssystem"]) .page-hero h1 {
  margin: 6px 0 10px; font: 400 clamp(2.5rem, 6vw, 3.25rem)/1 var(--ds-display); letter-spacing: .02em;
  text-transform: uppercase; color: var(--ds-stark); text-shadow: none !important;
}
html[data-tema]:not([data-sida^="medlemssystem"]) .page-hero p {
  margin: 0; max-width: 640px; line-height: 1.55; color: var(--ds-text);
}
@media (max-width: 760px) {
  html[data-tema]:not([data-sida^="medlemssystem"]) .page-hero { padding: 28px 0 4px; }
}


/* ===== från publik.css ===== */
/* ═══════════════════════════════════════════════════════════════════════════
   Ulvnäs öppna sidor: gemensamma mönster (2026-10-30)

   Byggd från grunden på designsystemets tokens (assets/ds.css). Laddas efter
   ds.css via includes/tema.php. Sidornas egna stilblock innehåller bara det
   som är unikt för sidan och använder samma tokens, så ljust och mörkt läge
   kommer av sig självt utan särskilda regler för ljust läge.

   Mönster här:
     .h-section …            avsnitt med ikonruta, etikett och rubrik
     .quicklinks …           snabblänkar under sidans bild
     .chip-link              sekundär knapp (ring, mejla, läs mer)
     .cta-card, .contact-cta kontaktruta längst ner på sidan
     .pub-kort, .pub-rad     kort och rader för sidornas eget innehåll
     .pub-person             personkort (avatar, roll, namn, knappar)
     .pub-ikonruta           liten ruta med linjeikon
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Avsnitt ───────────────────────────────────────────────────────────── */
html[data-tema] .h-section { padding: 56px 0 8px; }
html[data-tema] .h-section > .shell > p { font-size: 1rem; line-height: 1.6; color: var(--ds-text); max-width: 760px; margin: 0 0 20px; }
html[data-tema] .h-section-head { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; margin-bottom: 20px; }
html[data-tema] .h-section-icon {
  width: 52px; height: 52px; border-radius: 16px; flex: none;
  background: var(--ds-accent-svag); border: 0;
  display: flex; align-items: center; justify-content: center; color: var(--ds-accent);
}
html[data-tema] .h-section-icon svg { height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html[data-tema] .h-section-eyebrow { font: 600 13px/1.2 var(--ds-cond); letter-spacing: .09em; color: var(--ds-svag); margin: 0 0 4px; }
html[data-tema] .h-section-eyebrow.danger { color: var(--ds-fara); }
html[data-tema] .h-section-titel { margin: 0; font: 400 clamp(2rem, 4vw, 2.5rem)/1 var(--ds-display); letter-spacing: .02em; color: var(--ds-stark); }

/* ── Snabblänkar under sidans bild ─────────────────────────────────────── */
html[data-tema] .quicklinks { background: var(--ds-yta); border-bottom: 1px solid var(--ds-linje); padding: 16px 0; }
html[data-tema] .quicklinks-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
html[data-tema] .quicklink {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px;
  background: var(--ds-yta); border: 1px solid var(--ds-linje-stark); border-radius: 14px; transition: border-color .15s, background .15s;
}
html[data-tema] .quicklink:hover { border-color: var(--ds-accent); background: var(--ds-accent-svag); transform: none; }
html[data-tema] .quicklink-ikon { width: 36px; height: 36px; border-radius: 10px; flex: none; background: var(--ds-accent-svag); border: 0; display: flex; align-items: center; justify-content: center; color: var(--ds-accent); }
html[data-tema] .quicklink-ikon svg { height: 18px; stroke: currentColor; stroke-width: 1.8; }
html[data-tema] .quicklink-text { font: 600 15px/1.2 var(--ds-font) !important; letter-spacing: 0 !important; }
@media (max-width: 880px) { html[data-tema] .quicklinks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 380px) { html[data-tema] .quicklinks-grid { grid-template-columns: 1fr; } }

/* ── Kontaktruta längst ner ────────────────────────────────────────────── */
html[data-tema]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) :is(.cta-card, .contact-cta) {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  background: var(--ds-yta); border: 1px solid var(--ds-linje); border-radius: var(--ds-radie);
  padding: 24px 28px; box-shadow: var(--ds-skugga); margin-top: 32px;
}
html[data-tema]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) :is(.cta-text, .contact-cta-text) { flex: 1 1 320px; line-height: 1.55; }
html[data-tema]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) :is(.cta-text, .contact-cta-text) strong { display: block; font: 600 1.125rem/1.3 var(--ds-font); color: var(--ds-stark); margin-bottom: 4px; }

/* ── Kort och rader för sidornas eget innehåll ─────────────────────────── */
html[data-tema] .pub-kort { background: var(--ds-yta); border: 1px solid var(--ds-linje); border-radius: var(--ds-radie); padding: 22px 24px; box-shadow: var(--ds-skugga); }
html[data-tema] .pub-kort h3 { margin: 0 0 6px; font: 600 1.125rem/1.3 var(--ds-font); color: var(--ds-stark); }
html[data-tema] .pub-kort p { margin: 0; line-height: 1.55; }
html[data-tema] .pub-rad { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 12px 18px; background: var(--ds-yta); border: 1px solid var(--ds-linje); border-radius: 14px; }
html[data-tema] a.pub-rad:hover { border-color: var(--ds-accent); }
html[data-tema] .pub-ikonruta { width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--ds-accent-svag); color: var(--ds-accent); display: flex; align-items: center; justify-content: center; }
html[data-tema] .pub-ikonruta svg { height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html[data-tema] .pub-avatar { width: 56px; height: 56px; flex: none; border-radius: 50%; background: var(--ds-accent-svag); color: var(--ds-accent); display: flex; align-items: center; justify-content: center; font: 400 1.5rem/1 var(--ds-display); letter-spacing: .04em; }
html[data-tema] .pub-roll { font: 600 13px/1.2 var(--ds-cond); letter-spacing: .09em; text-transform: uppercase; color: var(--ds-svag); }
html[data-tema] .pub-namn { font: 600 1.125rem/1.3 var(--ds-font); color: var(--ds-stark); }
html[data-tema] .pub-liten { font-size: .875rem; line-height: 1.45; color: var(--ds-svag); }
html[data-tema] .pub-knappar { display: flex; gap: 10px; flex-wrap: wrap; }

/* Besked i sidornas innehåll (varning, fara, ok) */
html[data-tema] .pub-besked { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 16px; background: var(--ds-accent-svag); line-height: 1.55; }
html[data-tema] .pub-besked.fara { background: var(--ds-fara-svag); }
html[data-tema] .pub-besked.varning { background: var(--ds-varning-svag); }
html[data-tema] .pub-besked.ok { background: var(--ds-ok-svag); }

/* ── Sidfot: inga avskiljande punkter först på raden ───────────────────── */
html[data-tema] .footer-lankar { column-gap: 20px; row-gap: 4px; }
html[data-tema] .footer-lankar a + a::before { content: none; display: none; }
html[data-tema] .footer-lankar a { display: inline-flex; align-items: center; min-height: 44px; }

/* Gemensamt efter ombyggnaden (2026-10-30) */
html[data-tema] .chip-link svg { height: 16px; flex: none; }

/* Efter andra granskningen (2026-10-30) */
html[data-tema]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .footer { margin-top: 56px; }
html[data-tema]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .footer .tema-knapp svg { width: 16px; height: 16px; flex: none; }
html[data-tema] .chip-link.is-placeholder { border-style: solid !important; border-color: var(--ds-linje-stark) !important; color: var(--ds-svag) !important; }
@media (max-width: 600px) {
  html[data-tema]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .shell { width: 100%; padding-left: 16px !important; padding-right: 16px !important; }
  html[data-tema]:where(:not([data-sida="admin"]):not([data-sida^="medlemsregister"])) .shell .shell { padding-left: 0 !important; padding-right: 0 !important; }
  html[data-tema] .chip-link { white-space: nowrap; }
}


/* ================================================================
   Sidornas egna regler. Varje block gäller bara på sin sida (data-sida).
   ================================================================ */

/* ---- index.php, data-sida="index-ds" ---- */
/* Startsidan (fas 7, 2026-10-30): bara det som är unikt för sidan, byggt på ds.css */

    /* ── Hjälten: fotot och dess toning behålls ─────────────────────────── */
    html[data-tema]:where([data-sida="index-ds"]) .hero { display: flex; align-items: center; padding: 56px 0 52px; }
    @media (min-width: 721px) {
      html[data-tema]:where([data-sida="index-ds"]) .hero::before {
        background:
          linear-gradient(90deg, rgba(4,10,18,.78) 0%, rgba(4,10,18,.5) 38%, rgba(4,10,18,.08) 70%, rgba(4,10,18,0) 100%),
          linear-gradient(180deg, rgba(4,10,18,0) 55%, rgba(4,10,18,.45) 100%),
          var(--hero-bild) center 64% / cover !important;
      }
    }
    html[data-tema]:where([data-sida="index-ds"]) .hero .eyebrow { margin: 0 0 12px; font-size: 13px; color: var(--ds-svag); }
    html[data-tema]:where([data-sida="index-ds"]) .hero h1 { margin: 0 0 12px; font: 400 clamp(3.5rem, 8vw, 5.5rem)/.95 var(--ds-display); letter-spacing: .02em; color: var(--ds-stark); text-shadow: none; }
    html[data-tema]:where([data-sida="index-ds"]) .hero-sub { margin: 0 0 12px; max-width: 620px; font: 400 clamp(1.25rem, 2vw, 1.5rem)/1.35 var(--ds-font); color: var(--ds-stark); }
    html[data-tema]:where([data-sida="index-ds"]) .hero-copy { margin: 0 0 24px; max-width: 560px; font-size: 1rem; line-height: 1.55; color: var(--ds-text); text-wrap: pretty; }
    html[data-tema]:where([data-sida="index-ds"]) .hero-cta-primary svg { width: 18px; height: 18px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    @media (max-width: 720px) {
      html[data-tema]:where([data-sida="index-ds"]) .hero { padding: 36px 0 32px; align-items: flex-start; }
      html[data-tema]:where([data-sida="index-ds"]) .hero h1 { font-size: clamp(3.25rem, 16vw, 4.25rem); }
      html[data-tema]:where([data-sida="index-ds"]) .hero-sub { font-size: 1.125rem; }
    }

    /* ── Väder och läget just nu ───────────────────────────────────────── */
    html[data-tema]:where([data-sida="index-ds"]) .live-strip { padding: 28px 0 0; }
    html[data-tema]:where([data-sida="index-ds"]) a.vader-rad {
      display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px;
      margin: 0 0 16px; padding: 20px 24px;
      background: var(--ds-yta); border: 1px solid var(--ds-linje); border-radius: var(--ds-radie); box-shadow: var(--ds-skugga);
      color: var(--ds-text); text-decoration: none; transition: border-color .15s;
    }
    html[data-tema]:where([data-sida="index-ds"]) a.vader-rad:hover { border-color: var(--ds-accent); }
    html[data-tema]:where([data-sida="index-ds"]) a.vader-rad:focus-visible { outline: 3px solid var(--ds-accent); outline-offset: 2px; }
    html[data-tema]:where([data-sida="index-ds"]) .vader-kort { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 14px; row-gap: 4px; align-items: center; min-width: 0; }
    html[data-tema]:where([data-sida="index-ds"]) .vader-emoji { grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 12px; background: var(--ds-accent-svag); color: var(--ds-accent); display: flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; }
    html[data-tema]:where([data-sida="index-ds"]) .vader-emoji .vader-ikon { width: 24px; height: 24px; vertical-align: 0; }
    html[data-tema]:where([data-sida="index-ds"]) .vader-grader { font: 400 2.25rem/1 var(--ds-display); letter-spacing: .02em; color: var(--ds-stark); }
    html[data-tema]:where([data-sida="index-ds"]) .vader-enhet { margin-left: 2px; font: 600 1rem/1 var(--ds-font); color: var(--ds-svag); }
    html[data-tema]:where([data-sida="index-ds"]) .vader-text { font-size: .875rem; line-height: 1.45; color: var(--ds-svag); }
    html[data-tema]:where([data-sida="index-ds"]) .vader-kort-tolkning { display: block; margin-left: auto; }
    html[data-tema]:where([data-sida="index-ds"]) .vader-tolkning strong { font-weight: 600; color: var(--ds-stark); }
    html[data-tema]:where([data-sida="index-ds"]) .vader-mer {
      flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 20px; box-sizing: border-box;
      border: 1.5px solid var(--ds-accent); border-radius: 999px; color: var(--ds-accent); white-space: nowrap;
      font: 600 15px/1.2 var(--ds-font);
    }
    html[data-tema]:where([data-sida="index-ds"]) a.vader-rad:hover .vader-mer { background: var(--ds-accent-svag); }

    html[data-tema]:where([data-sida="index-ds"]) .live-strip-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    html[data-tema]:where([data-sida="index-ds"]) .live-item { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; background: var(--ds-yta); border: 1px solid var(--ds-linje); border-radius: 16px; box-shadow: var(--ds-skugga); min-width: 0; }
    html[data-tema]:where([data-sida="index-ds"]) .live-icon { width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--ds-accent-svag); color: var(--ds-accent); display: flex; align-items: center; justify-content: center; }
    html[data-tema]:where([data-sida="index-ds"]) .live-icon svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.8; }
    html[data-tema]:where([data-sida="index-ds"]) .live-body { flex: 1; min-width: 0; }
    html[data-tema]:where([data-sida="index-ds"]) .live-label { margin: 0 0 4px; font: 600 13px/1.2 var(--ds-cond); letter-spacing: .09em; text-transform: uppercase; color: var(--ds-svag); }
    html[data-tema]:where([data-sida="index-ds"]) .live-value { font-size: 1rem; line-height: 1.45; color: var(--ds-text); overflow-wrap: anywhere; }
    html[data-tema]:where([data-sida="index-ds"]) .live-value a { color: var(--ds-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
    html[data-tema]:where([data-sida="index-ds"]) .live-value a.live-value-muted { font-weight: 400; color: var(--ds-svag); }
    html[data-tema]:where([data-sida="index-ds"]) .live-value-muted { font-size: .875rem; color: var(--ds-svag); }
    html[data-tema]:where([data-sida="index-ds"]) .live-pulse { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--ds-ok); vertical-align: middle; }

    @media (max-width: 720px) {
      html[data-tema]:where([data-sida="index-ds"]) a.vader-rad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 0; overflow: hidden; }
      html[data-tema]:where([data-sida="index-ds"]) a.vader-rad.har-badtemp { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      html[data-tema]:where([data-sida="index-ds"]) .vader-kort { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 8px; align-content: start; padding: 16px; }
      html[data-tema]:where([data-sida="index-ds"]) .vader-kort + .vader-kort:not(.vader-kort-tolkning) { border-left: 1px solid var(--ds-linje); }
      html[data-tema]:where([data-sida="index-ds"]) .vader-emoji { grid-row: auto; width: 36px; height: 36px; border-radius: 10px; }
      html[data-tema]:where([data-sida="index-ds"]) .vader-emoji .vader-ikon { width: 20px; height: 20px; }
      html[data-tema]:where([data-sida="index-ds"]) .vader-grader { font-size: 2rem; }
      html[data-tema]:where([data-sida="index-ds"]) a.vader-rad.har-badtemp .vader-kort { padding: 14px 12px; }
      html[data-tema]:where([data-sida="index-ds"]) a.vader-rad.har-badtemp .vader-grader { font-size: 1.75rem; }
      html[data-tema]:where([data-sida="index-ds"]) .vader-kort-tolkning { grid-column: 1 / -1; margin: 0; padding: 14px 16px; border-top: 1px solid var(--ds-linje); }
      html[data-tema]:where([data-sida="index-ds"]) .vader-mer { grid-column: 1 / -1; margin: 0 16px 16px; }
      html[data-tema]:where([data-sida="index-ds"]) .live-strip-grid { grid-template-columns: 1fr; gap: 12px; }
    }

    /* ── Nyheter ───────────────────────────────────────────────────────── */
    html[data-tema]:where([data-sida="index-ds"]) .nyheter-hero { padding: 56px 0 8px; }
    html[data-tema]:where([data-sida="index-ds"]) .nyheter-hero-grid { display: grid; grid-template-columns: 300px minmax(0, 780px); gap: 40px; align-items: start; }
    html[data-tema]:where([data-sida="index-ds"]) .nyheter-intro { position: sticky; top: 96px; }
    html[data-tema]:where([data-sida="index-ds"]) .nyheter-intro h2 { margin: 0 0 14px; font: 400 clamp(2rem, 4vw, 2.75rem)/1 var(--ds-display); letter-spacing: .02em; color: var(--ds-stark); }
    html[data-tema]:where([data-sida="index-ds"]) .nyheter-intro p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--ds-text); }
    html[data-tema]:where([data-sida="index-ds"]) .nyheter-intro p a { color: var(--ds-accent); text-decoration: underline; text-underline-offset: 3px; }
    html[data-tema]:where([data-sida="index-ds"]) .nyheter-lista { display: flex; flex-direction: column; gap: 16px; }
    html[data-tema]:where([data-sida="index-ds"]) .nyhet-card { display: grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: start; padding: 22px 24px; background: var(--ds-yta); border: 1px solid var(--ds-linje); border-radius: var(--ds-radie); box-shadow: var(--ds-skugga); }
    html[data-tema]:where([data-sida="index-ds"]) .nyhet-card.is-fresh { border-color: var(--ds-accent); }
    html[data-tema]:where([data-sida="index-ds"]) .nyhet-datum { text-align: center; padding-top: 2px; }
    html[data-tema]:where([data-sida="index-ds"]) .nyhet-datum-dag { font: 400 2.25rem/1 var(--ds-display); color: var(--ds-accent); }
    html[data-tema]:where([data-sida="index-ds"]) :is(.nyhet-datum-mn, .nyhet-datum-ar) { margin-top: 4px; font: 600 13px/1.2 var(--ds-cond); letter-spacing: .09em; text-transform: uppercase; color: var(--ds-svag); }
    html[data-tema]:where([data-sida="index-ds"]) .nyhet-body { min-width: 0; }
    html[data-tema]:where([data-sida="index-ds"]) .nyhet-tagrad { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
    html[data-tema]:where([data-sida="index-ds"]) .nyhet-tag-fresh { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; font: 700 13px/1 var(--ds-cond); letter-spacing: .07em; text-transform: uppercase; background: var(--ds-accent-svag); color: var(--ds-accent); }
    html[data-tema]:where([data-sida="index-ds"]) .nyhet-titel { margin: 0 0 8px; font: 600 1.125rem/1.3 var(--ds-font); color: var(--ds-stark); }
    /* Radbrytningar i nyhetstexten ska synas */
    html[data-tema]:where([data-sida="index-ds"]) .nyhet-text { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--ds-text); white-space: pre-line; overflow-wrap: anywhere; }
    html[data-tema]:where([data-sida="index-ds"]) .nyhet-text a { display: flex; width: fit-content; align-items: center; min-height: 44px; margin-top: 4px; white-space: normal; color: var(--ds-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
    html[data-tema]:where([data-sida="index-ds"]) .nyhet-laddar { margin: 0; padding: 20px 0; font-size: 1rem; color: var(--ds-svag); }
    @media (max-width: 980px) {
      html[data-tema]:where([data-sida="index-ds"]) .nyheter-hero-grid { grid-template-columns: 1fr; gap: 24px; }
      html[data-tema]:where([data-sida="index-ds"]) .nyheter-intro { position: static; }
    }
    @media (max-width: 720px) {
      html[data-tema]:where([data-sida="index-ds"]) .nyhet-card { grid-template-columns: 48px 1fr; gap: 14px; padding: 18px; }
      html[data-tema]:where([data-sida="index-ds"]) .nyhet-datum-dag { font-size: 1.875rem; }
    }

    /* ── Citatband med foto ────────────────────────────────────────────── */
    html[data-tema]:where([data-sida="index-ds"]) .break-section { position: relative; height: 360px; margin-top: 64px; overflow: hidden; background: var(--ds-sankt) url('mist-water.webp') center 50% / cover no-repeat; }
    html[data-tema]:where([data-sida="index-ds"]) .break-section::before { content: ''; position: absolute; inset: 0; background: rgba(7,17,27,.48); }
    html[data-tema]:where([data-sida="index-ds"]) .break-quote { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; padding: 0 24px; text-align: center; }
    html[data-tema]:where([data-sida="index-ds"]) .break-quote blockquote { margin: 0; max-width: 760px; font: 400 clamp(1.75rem, 3.2vw, 2.75rem)/1.15 var(--ds-display); letter-spacing: .02em; color: var(--ds-stark); text-shadow: none; }
    html[data-tema]:where([data-sida="index-ds"]) .break-quote-attribution { font: 600 13px/1.2 var(--ds-cond); letter-spacing: .09em; text-transform: uppercase; color: var(--ds-svag); }
    @media (max-width: 720px) { html[data-tema]:where([data-sida="index-ds"]) .break-section { height: 260px; margin-top: 48px; } }

    /* ── Avsnitt längre ner ────────────────────────────────────────────── */
    html[data-tema]:where([data-sida="index-ds"]) .hem-avsnitt { padding: 64px 0 0; }
    html[data-tema]:where([data-sida="index-ds"]) .hem-avsnitt:last-of-type { padding-bottom: 72px; }
    html[data-tema]:where([data-sida="index-ds"]) .hem-rubrik { margin: 0 auto 32px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
    html[data-tema]:where([data-sida="index-ds"]) .hem-rubrik h2 { margin: 0; font: 400 clamp(2.25rem, 5vw, 3.25rem)/1 var(--ds-display); letter-spacing: .02em; color: var(--ds-stark); text-wrap: balance; }
    html[data-tema]:where([data-sida="index-ds"]) .hem-streck { width: 48px; height: 3px; margin: 8px auto 0; border-radius: 999px; background: var(--ds-accent); }

    html[data-tema]:where([data-sida="index-ds"]) .hem-om { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
    html[data-tema]:where([data-sida="index-ds"]) .hem-pastaende { margin: 0 0 20px; font: 400 clamp(2.25rem, 4.5vw, 3.25rem)/1 var(--ds-display); letter-spacing: .02em; color: var(--ds-stark); }
    html[data-tema]:where([data-sida="index-ds"]) .hem-pastaende span { color: var(--ds-accent); }
    html[data-tema]:where([data-sida="index-ds"]) .hem-om p:not(.hem-pastaende) { margin: 0 0 16px; max-width: 600px; font-size: 1rem; line-height: 1.6; color: var(--ds-text); }
    html[data-tema]:where([data-sida="index-ds"]) .hem-om .ds-knapp { margin-top: 8px; }
    html[data-tema]:where([data-sida="index-ds"]) .hem-bild { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--ds-radie); border: 1px solid var(--ds-linje); background: var(--ds-sankt); box-shadow: var(--ds-skugga); }
    html[data-tema]:where([data-sida="index-ds"]) .hem-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }

    html[data-tema]:where([data-sida="index-ds"]) .hem-tre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
    html[data-tema]:where([data-sida="index-ds"]) .hem-kort { padding: 24px; background: var(--ds-yta); border: 1px solid var(--ds-linje); border-radius: var(--ds-radie); box-shadow: var(--ds-skugga); }
    html[data-tema]:where([data-sida="index-ds"]) .hem-nr { width: 52px; height: 52px; margin: 0 0 18px; border-radius: 16px; background: var(--ds-accent-svag); color: var(--ds-accent); display: flex; align-items: center; justify-content: center; font: 400 1.75rem/1 var(--ds-display); letter-spacing: .04em; }
    html[data-tema]:where([data-sida="index-ds"]) .hem-kort h3 { margin: 0 0 8px; font: 600 1.125rem/1.3 var(--ds-font); color: var(--ds-stark); }
    html[data-tema]:where([data-sida="index-ds"]) .hem-kort p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--ds-text); }

    html[data-tema]:where([data-sida="index-ds"]) .hem-lankar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    html[data-tema]:where([data-sida="index-ds"]) .hem-lankar .pub-rad { box-shadow: var(--ds-skugga); }
    html[data-tema]:where([data-sida="index-ds"]) .hem-lankar .pub-rad > span:not(.pub-ikonruta) { flex: 1; min-width: 0; font: 600 1rem/1.3 var(--ds-font); color: var(--ds-stark); }
    html[data-tema]:where([data-sida="index-ds"]) .hem-pil { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--ds-svag); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .15s, transform .15s; }
    html[data-tema]:where([data-sida="index-ds"]) .hem-lankar .pub-rad:hover .hem-pil { stroke: var(--ds-accent); transform: translateX(2px); }

    @media (max-width: 880px) {
      html[data-tema]:where([data-sida="index-ds"]) .hem-om { grid-template-columns: 1fr; gap: 28px; }
      html[data-tema]:where([data-sida="index-ds"]) .hem-tre { grid-template-columns: 1fr; gap: 14px; }
    }
    @media (max-width: 720px) {
      html[data-tema]:where([data-sida="index-ds"]) .hem-avsnitt { padding-top: 48px; }
      html[data-tema]:where([data-sida="index-ds"]) .hem-rubrik { margin-bottom: 24px; }
      html[data-tema]:where([data-sida="index-ds"]) .hem-lankar { grid-template-columns: 1fr; gap: 10px; }
      html[data-tema]:where([data-sida="index-ds"]) .hem-kort { display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; padding: 20px; }
      html[data-tema]:where([data-sida="index-ds"]) .hem-nr { grid-row: 1 / 3; margin: 0; }
      html[data-tema]:where([data-sida="index-ds"]) .hem-kort h3 { align-self: center; margin-top: 12px; }
    }

/* ---- om.php, data-sida="om-ds" ---- */
/* Om föreningen (fas 7, 2026-10-30): bara det som är unikt för sidan, byggt på ds.css och publik.css */
    :where([data-sida="om-ds"]) .page-hero::before {
      background-image: url('mist-water.webp') !important;
      background-position: center 45% !important;
    }

    /* Ingress under sidans bild */
    html[data-tema]:where([data-sida="om-ds"]) .intro-band { background: var(--ds-yta); border-bottom: 1px solid var(--ds-linje); padding: 32px 0; }
    html[data-tema]:where([data-sida="om-ds"]) .intro-text { max-width: 780px; margin: 0 auto; text-align: center; font: 400 1.125rem/1.6 var(--ds-font); color: var(--ds-text); }
    html[data-tema]:where([data-sida="om-ds"]) .intro-text strong { font-weight: 600; color: var(--ds-stark); }

    /* Snabbfakta */
    html[data-tema]:where([data-sida="om-ds"]) .fact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    html[data-tema]:where([data-sida="om-ds"]) .fact-card { display: flex; align-items: center; gap: 16px; padding: 20px 22px; background: var(--ds-yta); border: 1px solid var(--ds-linje); border-radius: 16px; box-shadow: var(--ds-skugga); }
    html[data-tema]:where([data-sida="om-ds"]) :is(.fact-ikon, .ansvar-ikon, .ar-ikon, .info-box-ikon) { width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--ds-accent-svag); color: var(--ds-accent); display: flex; align-items: center; justify-content: center; }
    html[data-tema]:where([data-sida="om-ds"]) :is(.fact-ikon, .ansvar-ikon, .ar-ikon, .info-box-ikon, .regel-ikon) svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    html[data-tema]:where([data-sida="om-ds"]) .fact-body { min-width: 0; }
    html[data-tema]:where([data-sida="om-ds"]) .fact-label { margin: 0 0 4px; font: 600 13px/1.2 var(--ds-cond); letter-spacing: .09em; text-transform: uppercase; color: var(--ds-svag); }
    html[data-tema]:where([data-sida="om-ds"]) .fact-value { font: 600 1.125rem/1.3 var(--ds-font); color: var(--ds-stark); }

    /* Brödtext direkt i avsnitten */
    html[data-tema]:where([data-sida="om-ds"]) .h-section > p { max-width: 760px; margin: 0 0 20px; font-size: 1rem; line-height: 1.6; color: var(--ds-text); }
    html[data-tema]:where([data-sida="om-ds"]) .h-section a:not([class]) { color: var(--ds-accent); text-decoration: underline; text-underline-offset: 3px; }

    /* Föreningens ansvar */
    html[data-tema]:where([data-sida="om-ds"]) .ansvar-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
    html[data-tema]:where([data-sida="om-ds"]) .ansvar-card { display: flex; flex-direction: column; gap: 6px; padding: 22px; background: var(--ds-yta); border: 1px solid var(--ds-linje); border-radius: var(--ds-radie); box-shadow: var(--ds-skugga); text-decoration: none; transition: border-color .15s; }
    html[data-tema]:where([data-sida="om-ds"]) .ansvar-card:hover { border-color: var(--ds-accent); }
    html[data-tema]:where([data-sida="om-ds"]) .ansvar-ikon { margin-bottom: 10px; }
    html[data-tema]:where([data-sida="om-ds"]) .ansvar-titel { font: 600 1.125rem/1.3 var(--ds-font); color: var(--ds-stark); }
    html[data-tema]:where([data-sida="om-ds"]) .ansvar-text { font-size: 1rem; line-height: 1.5; color: var(--ds-text); }

    /* Föreningsåret */
    html[data-tema]:where([data-sida="om-ds"]) .ar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
    html[data-tema]:where([data-sida="om-ds"]) .ar-kort { padding: 22px 24px; background: var(--ds-yta); border: 1px solid var(--ds-linje); border-radius: var(--ds-radie); box-shadow: var(--ds-skugga); }
    html[data-tema]:where([data-sida="om-ds"]) .ar-ikon { margin-bottom: 14px; }
    html[data-tema]:where([data-sida="om-ds"]) .ar-kort h3 { margin: 0 0 8px; font: 600 1.125rem/1.3 var(--ds-font); color: var(--ds-stark); letter-spacing: 0; text-transform: none; }
    html[data-tema]:where([data-sida="om-ds"]) .ar-kort p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--ds-text); }
    html[data-tema]:where([data-sida="om-ds"]) .ar-kort p + p { margin-top: 10px; }
    html[data-tema]:where([data-sida="om-ds"]) .ar-kort strong { font-weight: 600; color: var(--ds-stark); }

    /* Trivselregler */
    html[data-tema]:where([data-sida="om-ds"]) .regel-lista { display: flex; flex-direction: column; gap: 10px; }
    html[data-tema]:where([data-sida="om-ds"]) .regel-pillar { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 12px 18px; background: var(--ds-yta); border: 1px solid var(--ds-linje); border-radius: 14px; }
    html[data-tema]:where([data-sida="om-ds"]) .regel-ikon { width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--ds-ok-svag); color: var(--ds-ok); display: flex; align-items: center; justify-content: center; }
    html[data-tema]:where([data-sida="om-ds"]) .regel-pillar.viktigt { background: var(--ds-varning-svag); border-color: transparent; }
    html[data-tema]:where([data-sida="om-ds"]) .regel-pillar.viktigt .regel-ikon { background: var(--ds-yta); color: var(--ds-varning); }
    html[data-tema]:where([data-sida="om-ds"]) .regel-pillar-text { font-size: 1rem; line-height: 1.5; color: var(--ds-text); }
    html[data-tema]:where([data-sida="om-ds"]) .regel-pillar-text strong { font-weight: 600; color: var(--ds-stark); }

    /* Medlemsinformation */
    html[data-tema]:where([data-sida="om-ds"]) .info-box { display: flex; align-items: flex-start; gap: 16px; padding: 20px 22px; border-radius: 16px; background: var(--ds-accent-svag); }
    html[data-tema]:where([data-sida="om-ds"]) .info-box-ikon { background: var(--ds-yta); }
    html[data-tema]:where([data-sida="om-ds"]) .info-box-body { font-size: 1rem; line-height: 1.55; color: var(--ds-text); }
    html[data-tema]:where([data-sida="om-ds"]) .info-box-body strong { display: block; margin-bottom: 4px; font: 600 1.125rem/1.3 var(--ds-font); color: var(--ds-stark); }
    html[data-tema]:where([data-sida="om-ds"]) .info-box-body a { color: var(--ds-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
    @media (max-width: 760px) {
      html[data-tema]:where([data-sida="om-ds"]) .fact-grid { grid-template-columns: 1fr; gap: 12px; }
      html[data-tema]:where([data-sida="om-ds"]) .intro-text { font-size: 1.0625rem; text-align: left; }
    }
    @media (max-width: 460px) {
      html[data-tema]:where([data-sida="om-ds"]) .ansvar-grid { grid-template-columns: 1fr; gap: 12px; }
      html[data-tema]:where([data-sida="om-ds"]) .ansvar-card { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 14px; padding: 16px 18px; }
      html[data-tema]:where([data-sida="om-ds"]) .ansvar-ikon { margin: 0; }
      html[data-tema]:where([data-sida="om-ds"]) .ansvar-text { flex-basis: 100%; }
    }

/* ---- styrelse.php, data-sida="styrelse-ds" ---- */
/* Styrelse: bara det som är unikt för sidan. Färger från ds.css, mönster från publik.css. */
    :where([data-sida="styrelse-ds"]) .page-hero::before { background-image: url('dock-water.webp') !important; background-position: center 55% !important; }

    /* Intro under sidans bild */
    html[data-tema]:where([data-sida="styrelse-ds"]) .styrelse-intro { background: var(--ds-yta); border-bottom: 1px solid var(--ds-linje); padding: 24px 0; }
    html[data-tema]:where([data-sida="styrelse-ds"]) .styrelse-intro-grid { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; }
    html[data-tema]:where([data-sida="styrelse-ds"]) .styrelse-intro-text { flex: 1 1 420px; max-width: 640px; font-size: 1rem; line-height: 1.55; color: var(--ds-text); }
    html[data-tema]:where([data-sida="styrelse-ds"]) .knapp-adress { white-space: normal; text-align: center; }
    html[data-tema]:where([data-sida="styrelse-ds"]) .knapp-adress.ds-knapp-sekundar { letter-spacing: .01em; }

    /* Avsnitt */
    html[data-tema]:where([data-sida="styrelse-ds"]) .styrelse-section { padding: 56px 0 8px; }
    html[data-tema]:where([data-sida="styrelse-ds"]) .styrelse-section-eyebrow { margin: 0 0 6px; font: 600 13px/1.2 var(--ds-cond); letter-spacing: .09em; text-transform: uppercase; color: var(--ds-svag); }
    html[data-tema]:where([data-sida="styrelse-ds"]) .styrelse-section h2 { margin: 0 0 8px; font: 400 clamp(2rem, 4vw, 2.5rem)/1 var(--ds-display); letter-spacing: .02em; color: var(--ds-stark); }
    html[data-tema]:where([data-sida="styrelse-ds"]) .styrelse-section-sub { margin: 0 0 24px; max-width: 760px; font-size: 1rem; line-height: 1.55; color: var(--ds-text); }

    /* Ordförande */
    html[data-tema]:where([data-sida="styrelse-ds"]) .pub-kort.lead-card { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; margin-bottom: 20px; padding: 28px; }
    html[data-tema]:where([data-sida="styrelse-ds"]) .pub-avatar.lead-avatar { width: 112px; height: 112px; font-size: 2.75rem; overflow: hidden; }
    html[data-tema]:where([data-sida="styrelse-ds"]) .pub-avatar.lead-avatar img, html[data-tema]:where([data-sida="styrelse-ds"]) .staff-avatar img { width: 100%; height: 100%; object-fit: cover; }
    html[data-tema]:where([data-sida="styrelse-ds"]) .lead-card .lead-name { margin: 4px 0 8px; font: 400 clamp(2rem, 4vw, 2.5rem)/1 var(--ds-display); letter-spacing: .02em; color: var(--ds-stark); }
    html[data-tema]:where([data-sida="styrelse-ds"]) .lead-meta { margin: 0; max-width: 520px; font-size: 1rem; line-height: 1.55; color: var(--ds-text); }
    html[data-tema]:where([data-sida="styrelse-ds"]) .pub-knappar.lead-contact { flex-direction: column; }

    /* Övriga ledamöter */
    html[data-tema]:where([data-sida="styrelse-ds"]) .staff-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
    html[data-tema]:where([data-sida="styrelse-ds"]) .styrelse-kort { display: flex; flex-direction: column; gap: 4px; }
    html[data-tema]:where([data-sida="styrelse-ds"]) .staff-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
    html[data-tema]:where([data-sida="styrelse-ds"]) .staff-avatar { overflow: hidden; }
    html[data-tema]:where([data-sida="styrelse-ds"]) .styrelse-kort .pub-namn { margin-bottom: 4px; }
    html[data-tema]:where([data-sida="styrelse-ds"]) .staff-meta { flex: 1; margin: 0 0 16px; font-size: 1rem; line-height: 1.55; color: var(--ds-text); }

    /* Telefon och platshållare (styrs av skriptet längst ner) */
    html[data-tema]:where([data-sida="styrelse-ds"]) .chip-link.is-placeholder { cursor: default; pointer-events: none; }
    html[data-tema]:where([data-sida="styrelse-ds"]) .tel-dold { cursor: pointer; }

    /* Revisorer, webbansvarig och valberedning */
    html[data-tema]:where([data-sida="styrelse-ds"]) .compact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    html[data-tema]:where([data-sida="styrelse-ds"]) .pub-rad.compact-card { align-items: center; padding: 16px 18px; }
    html[data-tema]:where([data-sida="styrelse-ds"]) .pub-avatar.compact-avatar { width: 44px; height: 44px; font-size: 1.125rem; }
    html[data-tema]:where([data-sida="styrelse-ds"]) .compact-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    html[data-tema]:where([data-sida="styrelse-ds"]) .compact-body .pub-namn { font-size: 1rem; }
    html[data-tema]:where([data-sida="styrelse-ds"]) .compact-body .pub-knappar { margin-top: 10px; }

    /* Band med foto: mörk ton och ljus text i båda lägena */
    html[data-tema]:where([data-sida="styrelse-ds"]) .mote-band {
      --ds-text: #d7e4ef; --ds-svag: #c4d4e2; --ds-stark: #ffffff; --ds-accent: #8fc0ea; --ds-accent-svag: rgba(143,192,234,.16);
      margin-top: 56px; padding: 56px 0; text-align: center; color: var(--ds-text);
      background: linear-gradient(rgba(7,17,28,.78), rgba(7,17,28,.78)), url('mist-water.webp') center 45% / cover no-repeat;
    }
    html[data-tema]:where([data-sida="styrelse-ds"]) .mote-band .eyebrow { margin: 0 0 10px; font: 600 13px/1.2 var(--ds-cond); letter-spacing: .09em; text-transform: uppercase; color: var(--ds-svag); }
    html[data-tema]:where([data-sida="styrelse-ds"]) .mote-band h3 { margin: 0 0 12px; font: 400 clamp(2rem, 4vw, 2.5rem)/1 var(--ds-display); letter-spacing: .02em; color: var(--ds-stark); }
    html[data-tema]:where([data-sida="styrelse-ds"]) .mote-band p { max-width: 560px; margin: 0 auto 22px; font-size: 1rem; line-height: 1.55; color: var(--ds-text); }
    @media (max-width: 720px) {
      html[data-tema]:where([data-sida="styrelse-ds"]) .pub-kort.lead-card { grid-template-columns: 1fr; justify-items: start; gap: 18px; padding: 24px 20px; }
      html[data-tema]:where([data-sida="styrelse-ds"]) .pub-avatar.lead-avatar { width: 88px; height: 88px; font-size: 2.25rem; }
      html[data-tema]:where([data-sida="styrelse-ds"]) .pub-knappar.lead-contact { flex-direction: row; }
    }
    @media (max-width: 560px) {
      html[data-tema]:where([data-sida="styrelse-ds"]) .staff-grid, html[data-tema]:where([data-sida="styrelse-ds"]) .compact-grid { grid-template-columns: 1fr; }
      html[data-tema]:where([data-sida="styrelse-ds"]) .styrelse-intro .ds-knapp { width: 100%; }
      html[data-tema]:where([data-sida="styrelse-ds"]) .pub-knappar .chip-link { width: auto; flex: 1 1 130px; }
    }

/* ---- hamn-strand.php, data-sida="hamn-strand-ds" ---- */
/* Hamn och strand: bara det som är unikt för sidan. Färger från ds.css, mönster från publik.css. */
    :where([data-sida="hamn-strand-ds"]) .page-hero::before { background-image: url('dock-water.webp') !important; background-position: center 60% !important; }

    html[data-tema]:where([data-sida="hamn-strand-ds"]) .h-section > p { margin: 0 0 20px; max-width: 760px; font-size: 1rem; line-height: 1.6; color: var(--ds-text); }
    html[data-tema]:where([data-sida="hamn-strand-ds"]) .hamn-h3 { margin: 32px 0 14px; font: 600 1.125rem/1.3 var(--ds-font); color: var(--ds-stark); }
    html[data-tema]:where([data-sida="hamn-strand-ds"]) .hamn-not a { color: var(--ds-accent); font-weight: 600; }

    /* Hamnkapten */
    html[data-tema]:where([data-sida="hamn-strand-ds"]) .hamnkapten-card { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; margin-bottom: 8px; }
    html[data-tema]:where([data-sida="hamn-strand-ds"]) .pub-avatar.hamnkapten-avatar { width: 72px; height: 72px; font-size: 1.75rem; }
    html[data-tema]:where([data-sida="hamn-strand-ds"]) .hamnkapten-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    html[data-tema]:where([data-sida="hamn-strand-ds"]) .hamnkapten-backup { margin-top: 2px; font-size: .875rem; line-height: 1.45; color: var(--ds-svag); }
    html[data-tema]:where([data-sida="hamn-strand-ds"]) .hamnkapten-backup a { color: var(--ds-accent); font-weight: 600; }
    html[data-tema]:where([data-sida="hamn-strand-ds"]) .hamnkapten-cta svg { width: 18px; height: 18px; fill: none; }

    /* Bryggorna */
    html[data-tema]:where([data-sida="hamn-strand-ds"]) .bryggor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    html[data-tema]:where([data-sida="hamn-strand-ds"]) .pub-kort.brygga-card { display: flex; gap: 16px; align-items: flex-start; padding: 20px; }
    html[data-tema]:where([data-sida="hamn-strand-ds"]) .brygga-body { flex: 1; min-width: 0; }
    html[data-tema]:where([data-sida="hamn-strand-ds"]) .pub-kort .brygga-namn { margin: 0 0 4px; }
    html[data-tema]:where([data-sida="hamn-strand-ds"]) .brygga-meta { font-size: .875rem; line-height: 1.45; color: var(--ds-svag); }

    /* Informationsrader med ikon */
    html[data-tema]:where([data-sida="hamn-strand-ds"]) .info-pillar { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; padding: 12px 18px; background: var(--ds-yta); border: 1px solid var(--ds-linje); border-radius: 14px; }
    html[data-tema]:where([data-sida="hamn-strand-ds"]) .info-pillar > svg { flex: none; box-sizing: border-box; width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: var(--ds-accent-svag); stroke: var(--ds-accent); fill: none; }
    html[data-tema]:where([data-sida="hamn-strand-ds"]) .info-pillar-text { font-size: 1rem; line-height: 1.55; color: var(--ds-text); }
    html[data-tema]:where([data-sida="hamn-strand-ds"]) .info-pillar-text strong { color: var(--ds-stark); }
    html[data-tema]:where([data-sida="hamn-strand-ds"]) .info-pillar.varning { background: var(--ds-varning-svag); border-color: transparent; }
    html[data-tema]:where([data-sida="hamn-strand-ds"]) .info-pillar.varning > svg { background: var(--ds-yta); stroke: var(--ds-varning); }

    /* Fartregler */
    html[data-tema]:where([data-sida="hamn-strand-ds"]) .speed-card { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; margin-bottom: 8px; padding: 28px; background: var(--ds-fara-svag); border-radius: var(--ds-radie); }
    html[data-tema]:where([data-sida="hamn-strand-ds"]) .speed-badge { width: 96px; height: 96px; flex: none; border-radius: 50%; background: var(--ds-yta); border: 6px solid var(--ds-fara); display: flex; flex-direction: column; align-items: center; justify-content: center; }
    html[data-tema]:where([data-sida="hamn-strand-ds"]) .speed-badge-num { font: 400 2.75rem/.9 var(--ds-display); color: var(--ds-stark); }
    html[data-tema]:where([data-sida="hamn-strand-ds"]) .speed-badge-unit { font: 700 13px/1 var(--ds-cond); letter-spacing: .09em; text-transform: uppercase; color: var(--ds-svag); }
    html[data-tema]:where([data-sida="hamn-strand-ds"]) .speed-text { font-size: 1rem; line-height: 1.6; color: var(--ds-text); }
    html[data-tema]:where([data-sida="hamn-strand-ds"]) .speed-text strong { display: block; margin-bottom: 6px; font: 600 1.125rem/1.3 var(--ds-font); color: var(--ds-fara); }

    /* Bastuföreningens styrelse */
    html[data-tema]:where([data-sida="hamn-strand-ds"]) .bastu-personal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    html[data-tema]:where([data-sida="hamn-strand-ds"]) .bastu-person { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; background: var(--ds-yta); border: 1px solid var(--ds-linje); border-radius: 14px; }
    html[data-tema]:where([data-sida="hamn-strand-ds"]) .bastu-person .pub-namn { font-size: 1rem; }

    @media (max-width: 720px) {
      html[data-tema]:where([data-sida="hamn-strand-ds"]) .bryggor-grid, html[data-tema]:where([data-sida="hamn-strand-ds"]) .bastu-personal { grid-template-columns: 1fr; }
      html[data-tema]:where([data-sida="hamn-strand-ds"]) .hamnkapten-card { grid-template-columns: auto 1fr; gap: 16px 18px; }
      html[data-tema]:where([data-sida="hamn-strand-ds"]) .hamnkapten-card .hamnkapten-cta { grid-column: 1 / -1; }
    }
    @media (max-width: 600px) {
      html[data-tema]:where([data-sida="hamn-strand-ds"]) .speed-card { grid-template-columns: 1fr; justify-items: start; gap: 18px; padding: 24px 20px; }
    }

/* ---- vatten.php, data-sida="vatten-ds" ---- */
:where([data-sida="vatten-ds"]) .page-hero::before {
      background-image: url('mist-water.webp') !important;
      background-position: center 50% !important;
    }

    /* Vattnet: bara det som är unikt för sidan. Avsnitt, snabblänkar, kort,
       rader och personkort kommer från publik.css, knappar från ds.css. */
    html[data-tema]:where([data-sida="vatten-ds"]) .h-section > p { font-size: 1rem; line-height: 1.6; color: var(--ds-text); max-width: 760px; margin: 0 0 20px; }
    html[data-tema]:where([data-sida="vatten-ds"]) .h-section strong { color: var(--ds-stark); }
    html[data-tema]:where([data-sida="vatten-ds"]) .h-section > p.vatten-not { font-size: .875rem; line-height: 1.5; color: var(--ds-svag); margin: 16px 0 0; }
    html[data-tema]:where([data-sida="vatten-ds"]) .h-section:last-child { padding-bottom: 64px; }
    html[data-tema]:where([data-sida="vatten-ds"]) .vatten-not a { color: var(--ds-accent); text-decoration: underline; text-underline-offset: 3px; }

    /* Läget just nu */
    html[data-tema]:where([data-sida="vatten-ds"]) .vatten-status-band { padding: 32px 0 24px; }
    html[data-tema]:where([data-sida="vatten-ds"]) .vatten-status-grid.pub-kort { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 24px; padding: 28px; }
    :where([data-sida="vatten-ds"]) .vatten-status-indikator { width: 64px; height: 64px; flex: none; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: var(--ds-accent-svag); color: var(--ds-accent); }
    :where([data-sida="vatten-ds"]) .vatten-status-band.pa .vatten-status-indikator { background: var(--ds-ok-svag); color: var(--ds-ok); }
    :where([data-sida="vatten-ds"]) .vatten-status-band.overgang .vatten-status-indikator { background: var(--ds-varning-svag); color: var(--ds-varning); }
    :where([data-sida="vatten-ds"]) .vatten-status-indikator svg { width: 30px; height: 30px; stroke: currentColor; }
    :where([data-sida="vatten-ds"]) .vatten-status-body { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
    html[data-tema]:where([data-sida="vatten-ds"]) .vatten-status-titel { margin: 0; font: 400 clamp(2rem, 5vw, 2.5rem)/1 var(--ds-display); letter-spacing: .02em; color: var(--ds-stark); }
    :where([data-sida="vatten-ds"]) .vatten-status-info { font-size: 1rem; line-height: 1.55; color: var(--ds-text); }
    :where([data-sida="vatten-ds"]) .vatten-status-nasta { flex: 0 1 280px; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 14px; background: var(--ds-sankt); border: 1px solid var(--ds-linje); }
    :where([data-sida="vatten-ds"]) .vatten-status-nasta-text { font-weight: 600; line-height: 1.45; color: var(--ds-stark); }
    @media (max-width: 720px) {
      html[data-tema]:where([data-sida="vatten-ds"]) .vatten-status-grid.pub-kort { padding: 22px 20px; }
      :where([data-sida="vatten-ds"]) .vatten-status-nasta { flex-basis: 100%; }
    }

    /* Personkort (ansvarig och läckage) */
    :where([data-sida="vatten-ds"]) .ansvarig-card { display: flex; align-items: center; gap: 18px 20px; flex-wrap: wrap; }
    :where([data-sida="vatten-ds"]) .ansvarig-body { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

    /* Sätts på och stängs av */
    :where([data-sida="vatten-ds"]) .datum-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    :where([data-sida="vatten-ds"]) .datum-card { display: flex; align-items: flex-start; gap: 16px; }
    :where([data-sida="vatten-ds"]) .datum-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
    :where([data-sida="vatten-ds"]) .datum-varde { font-size: 1rem; line-height: 1.55; color: var(--ds-text); }
    @media (max-width: 600px) { :where([data-sida="vatten-ds"]) .datum-grid { grid-template-columns: 1fr; } }

    /* Regler: förbjudet och tillåtet. Tonad yta, signalfärg på ikon och rubrik. */
    :where([data-sida="vatten-ds"]) .regel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
    :where([data-sida="vatten-ds"]) .regel-deny, :where([data-sida="vatten-ds"]) .regel-ok { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; color: var(--ds-text); }
    :where([data-sida="vatten-ds"]) .regel-deny { background: var(--ds-fara-svag); }
    :where([data-sida="vatten-ds"]) .regel-ok { background: var(--ds-ok-svag); }
    :where([data-sida="vatten-ds"]) .regel-deny-ikon, :where([data-sida="vatten-ds"]) .regel-ok-ikon { width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--ds-yta); display: flex; align-items: center; justify-content: center; }
    :where([data-sida="vatten-ds"]) .regel-deny-ikon { color: var(--ds-fara); }
    :where([data-sida="vatten-ds"]) .regel-ok-ikon { color: var(--ds-ok); }
    :where([data-sida="vatten-ds"]) .regel-deny-ikon svg, :where([data-sida="vatten-ds"]) .regel-ok-ikon svg { width: 22px; height: 22px; stroke: currentColor; }
    :where([data-sida="vatten-ds"]) .regel-deny-text, :where([data-sida="vatten-ds"]) .regel-ok-text { font-size: 1rem; line-height: 1.45; }
    html[data-tema]:where([data-sida="vatten-ds"]) .regel-deny-text strong { display: block; font: 600 1.125rem/1.3 var(--ds-font); color: var(--ds-fara); }
    html[data-tema]:where([data-sida="vatten-ds"]) .regel-ok-text strong { font-weight: 600; color: var(--ds-ok); }
    @media (max-width: 760px) { :where([data-sida="vatten-ds"]) .regel-grid { grid-template-columns: 1fr; } }

    /* Viktigt om eget vatten */
    :where([data-sida="vatten-ds"]) .varning-card { display: flex; align-items: flex-start; gap: 18px; padding: 22px 24px; border-radius: var(--ds-radie); background: var(--ds-varning-svag); color: var(--ds-text); }
    :where([data-sida="vatten-ds"]) .varning-ikon { width: 48px; height: 48px; flex: none; border-radius: 14px; background: var(--ds-yta); color: var(--ds-varning); display: flex; align-items: center; justify-content: center; }
    :where([data-sida="vatten-ds"]) .varning-ikon svg { width: 24px; height: 24px; stroke: currentColor; }
    html[data-tema]:where([data-sida="vatten-ds"]) .varning-titel { margin: 0 0 6px; font: 600 1.125rem/1.3 var(--ds-font); color: var(--ds-varning); }
    :where([data-sida="vatten-ds"]) .varning-text { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--ds-text); }
    @media (max-width: 600px) { :where([data-sida="vatten-ds"]) .varning-card { flex-direction: column; padding: 20px; gap: 14px; } }

    /* Tips */
    html[data-tema]:where([data-sida="vatten-ds"]) .vatten-underrubrik { margin: 28px 0 12px; font: 600 1.125rem/1.3 var(--ds-font); color: var(--ds-stark); }
    :where([data-sida="vatten-ds"]) .tips-pillar { display: flex; align-items: center; gap: 14px; padding: 12px 18px; margin-bottom: 10px; background: var(--ds-yta); border: 1px solid var(--ds-linje); border-radius: 14px; }
    :where([data-sida="vatten-ds"]) .tips-pillar svg { width: 40px; height: 40px; flex: none; padding: 10px; box-sizing: border-box; border-radius: 12px; background: var(--ds-accent-svag); stroke: var(--ds-accent); }
    :where([data-sida="vatten-ds"]) .tips-pillar-text { font-size: 1rem; line-height: 1.55; color: var(--ds-text); }

    /* VA-plan att fälla ut */
    html[data-tema]:where([data-sida="vatten-ds"]) .va-details.pub-kort { overflow: hidden; padding: 0; }
    :where([data-sida="vatten-ds"]) .va-summary { list-style: none; cursor: pointer; min-height: 44px; padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
    :where([data-sida="vatten-ds"]) .va-summary::-webkit-details-marker { display: none; }
    :where([data-sida="vatten-ds"]) .va-summary:focus-visible { outline: 3px solid var(--ds-accent); outline-offset: -3px; border-radius: var(--ds-radie); }
    :where([data-sida="vatten-ds"]) .va-summary-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
    html[data-tema]:where([data-sida="vatten-ds"]) .va-summary-text strong { font: 600 1.125rem/1.3 var(--ds-font); color: var(--ds-stark); }
    :where([data-sida="vatten-ds"]) .va-summary-text span { font-size: .875rem; line-height: 1.45; color: var(--ds-svag); }
    :where([data-sida="vatten-ds"]) .va-summary-caret { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--ds-accent-svag); color: var(--ds-accent); display: flex; align-items: center; justify-content: center; transition: transform .25s; }
    :where([data-sida="vatten-ds"]) .va-summary-caret svg { width: 18px; height: 18px; stroke: currentColor; }
    :where([data-sida="vatten-ds"]) .va-details[open] .va-summary-caret { transform: rotate(180deg); }
    :where([data-sida="vatten-ds"]) .va-content { padding: 0 24px 20px; font-size: 1rem; line-height: 1.6; color: var(--ds-text); }
    :where([data-sida="vatten-ds"]) .va-content p { margin: 0 0 12px; max-width: 760px; }

    /* Vattenanalysen */
    :where([data-sida="vatten-ds"]) .analys-rad { max-width: 640px; }
    :where([data-sida="vatten-ds"]) .analys-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    :where([data-sida="vatten-ds"]) .analys-titel { font-weight: 600; font-size: 1rem; line-height: 1.35; color: var(--ds-stark); }
    :where([data-sida="vatten-ds"]) .analys-pil { width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--ds-accent-svag); color: var(--ds-accent); display: flex; align-items: center; justify-content: center; }
    :where([data-sida="vatten-ds"]) .analys-pil svg { width: 16px; height: 16px; stroke: currentColor; }

/* ---- vagforening.php, data-sida="vagforening-ds" ---- */
:where([data-sida="vagforening-ds"]) .page-hero::before {
      background-image: url('dock-water.webp') !important;
      background-position: center 65% !important;
    }

    /* Vägföreningen: bara det som är unikt för sidan. Avsnitt, snabblänkar,
       kort och personkort kommer från publik.css, knappar från ds.css. */
    html[data-tema]:where([data-sida="vagforening-ds"]) .h-section > p { font-size: 1rem; line-height: 1.6; color: var(--ds-text); max-width: 760px; margin: 0 0 20px; }
    html[data-tema]:where([data-sida="vagforening-ds"]) .h-section > p.vag-not { font-size: .875rem; line-height: 1.5; color: var(--ds-svag); margin: 16px 0 0; }
    html[data-tema]:where([data-sida="vagforening-ds"]) .h-section:last-child { padding-bottom: 64px; }

    /* De fem vägarna */
    :where([data-sida="vagforening-ds"]) .vagar-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
    html[data-tema]:where([data-sida="vagforening-ds"]) .vag-card.pub-kort { padding: 18px 20px; border-radius: 16px; display: flex; flex-direction: column; gap: 8px; }
    :where([data-sida="vagforening-ds"]) .vag-num { font: 400 2rem/1 var(--ds-display); letter-spacing: .02em; color: var(--ds-accent); }
    :where([data-sida="vagforening-ds"]) .vag-namn { font: 600 1rem/1.3 var(--ds-font); color: var(--ds-stark); overflow-wrap: anywhere; }
    @media (max-width: 520px) { :where([data-sida="vagforening-ds"]) .vagar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

    /* Underhåll året om */
    :where([data-sida="vagforening-ds"]) .underhall-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
    html[data-tema]:where([data-sida="vagforening-ds"]) .underhall-card.pub-kort { padding: 20px; border-radius: 16px; display: flex; flex-direction: column; gap: 4px; }
    :where([data-sida="vagforening-ds"]) .underhall-card .pub-ikonruta { margin-bottom: 10px; }
    :where([data-sida="vagforening-ds"]) .underhall-titel { font: 600 1rem/1.3 var(--ds-font); color: var(--ds-stark); }
    :where([data-sida="vagforening-ds"]) .underhall-meta { font-size: .875rem; line-height: 1.45; color: var(--ds-svag); }
    @media (max-width: 760px) { :where([data-sida="vagforening-ds"]) .underhall-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 380px) { :where([data-sida="vagforening-ds"]) .underhall-grid { grid-template-columns: 1fr; } }

    /* Vägmästaren */
    :where([data-sida="vagforening-ds"]) .kontakt-card { display: flex; align-items: center; gap: 18px 20px; flex-wrap: wrap; }
    :where([data-sida="vagforening-ds"]) .kontakt-body { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

    /* Törrövägen */
    :where([data-sida="vagforening-ds"]) .extern-head { display: flex; align-items: flex-start; gap: 16px; }
    :where([data-sida="vagforening-ds"]) .extern-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
    :where([data-sida="vagforening-ds"]) .extern-tjanster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 20px 0; }
    :where([data-sida="vagforening-ds"]) .extern-tjanst { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--ds-sankt); border: 1px solid var(--ds-linje); }
    :where([data-sida="vagforening-ds"]) .extern-tjanst svg { width: 20px; height: 20px; flex: none; stroke: var(--ds-accent); }
    :where([data-sida="vagforening-ds"]) .extern-tjanst-text { font-size: 1rem; line-height: 1.4; color: var(--ds-text); }
    @media (max-width: 720px) { :where([data-sida="vagforening-ds"]) .extern-tjanster { grid-template-columns: 1fr; } }

/* ---- grannsamverkan.php, data-sida="grannsamverkan-ds" ---- */
:where([data-sida="grannsamverkan-ds"]) .page-hero::before {
      background-image: url('mist-water.webp') !important;
      background-position: center 50% !important;
    }

    /* Grannsamverkan: bara det som är unikt för sidan. Avsnitt, snabblänkar,
       rader och kontaktrutan kommer från publik.css, knappar från ds.css. */
    html[data-tema]:where([data-sida="grannsamverkan-ds"]) .h-section > p { font-size: 1rem; line-height: 1.6; color: var(--ds-text); max-width: 760px; margin: 0 0 20px; }
    html[data-tema]:where([data-sida="grannsamverkan-ds"]) .h-section strong { color: var(--ds-stark); }
    html[data-tema]:where([data-sida="grannsamverkan-ds"]) .h-section:last-child { padding-bottom: 64px; }

    /* Nödnummer: stora tryckytor direkt under bilden */
    :where([data-sida="grannsamverkan-ds"]) .emergency-band { padding: 28px 0; background: var(--ds-yta); border-bottom: 1px solid var(--ds-linje); }
    :where([data-sida="grannsamverkan-ds"]) .emergency-band-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px 20px; align-items: center; }
    :where([data-sida="grannsamverkan-ds"]) .emergency-titel { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
    html[data-tema]:where([data-sida="grannsamverkan-ds"]) .emergency-eyebrow { color: var(--ds-fara); }
    :where([data-sida="grannsamverkan-ds"]) .emergency-text { font: 400 clamp(1.75rem, 4vw, 2.25rem)/1 var(--ds-display); letter-spacing: .02em; color: var(--ds-stark); }
    html[data-tema]:where([data-sida="grannsamverkan-ds"]) .emergency-card { display: flex; align-items: center; gap: 16px; min-width: 240px; min-height: 76px; padding: 12px 24px 12px 14px; box-sizing: border-box; border-radius: 18px; border: 1px solid var(--ds-linje); background: var(--ds-accent-svag); color: var(--ds-text); text-decoration: none; -webkit-backdrop-filter: none; backdrop-filter: none; transition: transform .15s, border-color .15s; touch-action: manipulation; }
    html[data-tema]:where([data-sida="grannsamverkan-ds"]) .emergency-card.red { background: var(--ds-fara-svag); }
    :where([data-sida="grannsamverkan-ds"]) .emergency-card:hover { transform: translateY(-1px); }
    :where([data-sida="grannsamverkan-ds"]) .emergency-card:focus-visible { outline: 3px solid var(--ds-accent); outline-offset: 2px; }
    :where([data-sida="grannsamverkan-ds"]) .emergency-card-ikon { width: 48px; height: 48px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ds-accent); color: var(--ds-accent-text); }
    :where([data-sida="grannsamverkan-ds"]) .emergency-card.red .emergency-card-ikon { background: var(--ds-fara); }
    :where([data-sida="grannsamverkan-ds"]) .emergency-card-ikon svg { width: 22px; height: 22px; stroke: currentColor; }
    :where([data-sida="grannsamverkan-ds"]) .emergency-card-num { font: 400 2.25rem/1 var(--ds-display); letter-spacing: .04em; color: var(--ds-stark); white-space: nowrap; }
    @media (max-width: 900px) {
      :where([data-sida="grannsamverkan-ds"]) .emergency-titel { grid-column: 1 / -1; }
      html[data-tema]:where([data-sida="grannsamverkan-ds"]) .emergency-card { min-width: 0; }
    }
    @media (max-width: 520px) { :where([data-sida="grannsamverkan-ds"]) .emergency-band-inner { grid-template-columns: 1fr; } }

    /* Inledning */
    :where([data-sida="grannsamverkan-ds"]) .intro-band { padding: 40px 0 0; }
    :where([data-sida="grannsamverkan-ds"]) .intro-text { max-width: 760px; margin: 0; font: 400 clamp(1.125rem, 2vw, 1.25rem)/1.55 var(--ds-font); color: var(--ds-text); }
    html[data-tema]:where([data-sida="grannsamverkan-ds"]) .intro-text strong { font-weight: 600; color: var(--ds-stark); }

    /* Avsnittsikon för båtstölder */
    html[data-tema]:where([data-sida="grannsamverkan-ds"]) .h-section-icon.danger { background: var(--ds-fara-svag); color: var(--ds-fara); }

    /* Polisen varnar: tonad yta, signalfärg på ikon och rubrik */
    :where([data-sida="grannsamverkan-ds"]) .varning-card { display: flex; align-items: flex-start; gap: 18px; padding: 22px 24px; margin-bottom: 20px; border-radius: var(--ds-radie); background: var(--ds-fara-svag); color: var(--ds-text); }
    :where([data-sida="grannsamverkan-ds"]) .varning-ikon { width: 48px; height: 48px; flex: none; border-radius: 14px; background: var(--ds-yta); color: var(--ds-fara); display: flex; align-items: center; justify-content: center; }
    :where([data-sida="grannsamverkan-ds"]) .varning-ikon svg { width: 24px; height: 24px; stroke: currentColor; }
    html[data-tema]:where([data-sida="grannsamverkan-ds"]) .varning-titel { margin: 0 0 6px; font: 600 1.125rem/1.3 var(--ds-font); color: var(--ds-fara); }
    :where([data-sida="grannsamverkan-ds"]) .varning-text { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--ds-text); }
    @media (max-width: 600px) { :where([data-sida="grannsamverkan-ds"]) .varning-card { flex-direction: column; padding: 20px; gap: 14px; } }

    /* Tips i rader */
    :where([data-sida="grannsamverkan-ds"]) .info-pillar { display: flex; align-items: center; gap: 14px; padding: 12px 18px; margin-bottom: 10px; background: var(--ds-yta); border: 1px solid var(--ds-linje); border-radius: 14px; }
    :where([data-sida="grannsamverkan-ds"]) .info-pillar svg { width: 40px; height: 40px; flex: none; padding: 10px; box-sizing: border-box; border-radius: 12px; background: var(--ds-accent-svag); stroke: var(--ds-accent); }
    :where([data-sida="grannsamverkan-ds"]) .info-pillar-text { font-size: 1rem; line-height: 1.55; color: var(--ds-text); }

    /* Länk till polisen.se */
    :where([data-sida="grannsamverkan-ds"]) .polisen-rad { max-width: 640px; }
    :where([data-sida="grannsamverkan-ds"]) .polisen-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    :where([data-sida="grannsamverkan-ds"]) .polisen-titel { font-weight: 600; font-size: 1rem; line-height: 1.35; color: var(--ds-stark); }
    :where([data-sida="grannsamverkan-ds"]) .polisen-pil { width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--ds-accent-svag); color: var(--ds-accent); display: flex; align-items: center; justify-content: center; }
    :where([data-sida="grannsamverkan-ds"]) .polisen-pil svg { width: 16px; height: 16px; stroke: currentColor; }

/* ---- protokoll.php, data-sida="protokoll-ds" ---- */
:where([data-sida="protokoll-ds"]) .page-hero::before {
      background-image: url('dock-water.webp') !important;
      background-position: center 55% !important;
    }

    /* Statistik under sidans bild */
    :where([data-sida="protokoll-ds"]) .doc-stats { background: var(--ds-yta); border-bottom: 1px solid var(--ds-linje); padding: 20px 0; }
    :where([data-sida="protokoll-ds"]) .doc-stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
    :where([data-sida="protokoll-ds"]) .doc-stat { display: flex; align-items: center; gap: 14px; min-width: 0; }
    :where([data-sida="protokoll-ds"]) .doc-stat + .doc-stat { border-left: 1px solid var(--ds-linje); padding-left: 20px; }
    :where([data-sida="protokoll-ds"]) .doc-stat-ikon { width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--ds-accent-svag); color: var(--ds-accent); display: flex; align-items: center; justify-content: center; }
    :where([data-sida="protokoll-ds"]) .doc-stat-ikon svg { width: 20px; height: 20px; stroke: currentColor; }
    :where([data-sida="protokoll-ds"]) .doc-stat-num { font: 400 1.875rem/1 var(--ds-display); letter-spacing: .02em; color: var(--ds-stark); }
    :where([data-sida="protokoll-ds"]) .doc-stat-text { margin-top: 4px; font: 600 13px/1.2 var(--ds-cond); letter-spacing: .09em; text-transform: uppercase; color: var(--ds-svag); }

    /* Utvalt dokument */
    :where([data-sida="protokoll-ds"]) .featured-section { padding: 40px 0 0; }
    :where([data-sida="protokoll-ds"]) .featured-card {
      display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center;
      background: var(--ds-yta); border: 1px solid var(--ds-linje); border-radius: var(--ds-radie);
      padding: 28px; box-shadow: var(--ds-skugga); text-decoration: none; color: var(--ds-text);
      transition: border-color .15s;
    }
    :where([data-sida="protokoll-ds"]) .featured-card:hover { border-color: var(--ds-accent); }
    :where([data-sida="protokoll-ds"]) .featured-icon { width: 64px; height: 64px; flex: none; border-radius: 18px; background: var(--ds-guld-svag); color: var(--ds-guld); display: flex; align-items: center; justify-content: center; }
    :where([data-sida="protokoll-ds"]) .featured-icon svg { width: 30px; height: 30px; stroke: currentColor; }
    :where([data-sida="protokoll-ds"]) .featured-body { min-width: 0; }
    :where([data-sida="protokoll-ds"]) .featured-eyebrow { margin: 0 0 6px; font: 600 13px/1.2 var(--ds-cond); letter-spacing: .09em; text-transform: uppercase; color: var(--ds-svag); }
    html[data-tema]:where([data-sida="protokoll-ds"]) .featured-titel { margin: 0 0 6px; font: 400 clamp(1.75rem, 3vw, 2.25rem)/1 var(--ds-display); letter-spacing: .02em; color: var(--ds-stark); }
    :where([data-sida="protokoll-ds"]) .featured-text { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--ds-text); }
    :where([data-sida="protokoll-ds"]) .featured-cta { white-space: nowrap; }
    :where([data-sida="protokoll-ds"]) .featured-cta svg { width: 18px; height: 18px; fill: none; }
    @media (max-width: 720px) {
      :where([data-sida="protokoll-ds"]) .featured-card { grid-template-columns: auto 1fr; padding: 22px 20px; gap: 16px; }
      :where([data-sida="protokoll-ds"]) .featured-icon { width: 52px; height: 52px; border-radius: 16px; }
      :where([data-sida="protokoll-ds"]) .featured-cta { grid-column: 1 / -1; justify-self: start; }
    }

    /* Sök och filter */
    :where([data-sida="protokoll-ds"]) .doc-section { padding: 32px 0 0; }
    :where([data-sida="protokoll-ds"]) .doc-toolbar { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
    :where([data-sida="protokoll-ds"]) .doc-search { position: relative; display: flex; align-items: center; max-width: 560px; }
    :where([data-sida="protokoll-ds"]) .doc-search svg { position: absolute; left: 14px; width: 18px; height: 18px; stroke: var(--ds-svag); pointer-events: none; }
    :where([data-sida="protokoll-ds"]) .doc-search input {
      width: 100%; box-sizing: border-box; min-height: 48px; padding: 0 14px 0 42px;
      border-radius: 12px; border: 1.5px solid var(--ds-linje-stark); background: var(--ds-sankt);
      color: var(--ds-text); font: 400 1rem/1.4 var(--ds-font);
    }
    :where([data-sida="protokoll-ds"]) .doc-search input:focus { border-color: var(--ds-accent); outline: none; box-shadow: 0 0 0 3px var(--ds-accent-svag); }
    :where([data-sida="protokoll-ds"]) .doc-search input::placeholder { color: var(--ds-svag); }
    :where([data-sida="protokoll-ds"]) .doc-filter-pills { display: flex; gap: 8px; flex-wrap: wrap; }
    :where([data-sida="protokoll-ds"]) .doc-filter-count { font: 700 13px/1 var(--ds-cond); padding: 4px 8px; border-radius: 999px; background: var(--ds-accent-svag); color: inherit; }

    /* Dokumentlistan */
    :where([data-sida="protokoll-ds"]) .doc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    html[data-tema]:where([data-sida="protokoll-ds"]) .doc-card {
      display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center;
      background: var(--ds-yta); border: 1px solid var(--ds-linje); border-radius: 16px;
      padding: 16px 18px; box-shadow: var(--ds-skugga); text-decoration: none; color: var(--ds-text);
      transition: border-color .15s;
    }
    :where([data-sida="protokoll-ds"]) .doc-card:hover { border-color: var(--ds-accent); }
    :where([data-sida="protokoll-ds"]) .doc-card-ikon { width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--ds-accent-svag); color: var(--ds-accent); display: flex; align-items: center; justify-content: center; }
    :where([data-sida="protokoll-ds"]) .doc-card-ikon svg { width: 22px; height: 22px; stroke: currentColor; }
    :where([data-sida="protokoll-ds"]) .doc-card[data-kat="jubileum"] .doc-card-ikon { background: var(--ds-guld-svag); color: var(--ds-guld); }
    :where([data-sida="protokoll-ds"]) .doc-card-body { min-width: 0; }
    :where([data-sida="protokoll-ds"]) .doc-card-kategori { display: block; margin-bottom: 4px; font: 600 13px/1.2 var(--ds-cond); letter-spacing: .09em; text-transform: uppercase; color: var(--ds-accent); }
    :where([data-sida="protokoll-ds"]) .doc-card-titel { margin: 0 0 4px; font: 600 1.0625rem/1.3 var(--ds-font); color: var(--ds-stark); overflow-wrap: anywhere; }
    :where([data-sida="protokoll-ds"]) .doc-card-meta { font-size: .875rem; line-height: 1.45; color: var(--ds-svag); }
    :where([data-sida="protokoll-ds"]) .doc-card-meta-sep { margin: 0 6px; color: var(--ds-linje-stark); }
    :where([data-sida="protokoll-ds"]) .doc-card-arrow { width: 36px; height: 36px; flex: none; border-radius: 50%; border: 1.5px solid var(--ds-linje-stark); color: var(--ds-accent); display: flex; align-items: center; justify-content: center; transition: border-color .15s, background .15s; }
    :where([data-sida="protokoll-ds"]) .doc-card-arrow svg { width: 16px; height: 16px; stroke: currentColor; }
    :where([data-sida="protokoll-ds"]) .doc-card:hover .doc-card-arrow { border-color: var(--ds-accent); background: var(--ds-accent-svag); }
    :where([data-sida="protokoll-ds"]) .doc-card.is-hidden { display: none; }
    :where([data-sida="protokoll-ds"]) .doc-empty { display: none; padding: 40px 24px; text-align: center; font-size: 1rem; color: var(--ds-svag); background: var(--ds-yta); border: 1px dashed var(--ds-linje-stark); border-radius: 16px; }
    :where([data-sida="protokoll-ds"]) .doc-empty.is-visible { display: block; }

    @media (max-width: 760px) {
      :where([data-sida="protokoll-ds"]) .doc-stats-grid { grid-template-columns: 1fr; gap: 12px; }
      :where([data-sida="protokoll-ds"]) .doc-stat + .doc-stat { border-left: 0; padding-left: 0; border-top: 1px solid var(--ds-linje); padding-top: 12px; }
      :where([data-sida="protokoll-ds"]) .doc-grid { grid-template-columns: 1fr; }
    }
    :where([data-sida="protokoll-ds"]) .contact-cta { margin-bottom: 32px; }
    :where([data-sida="protokoll-ds"]) .contact-cta a.btn-pill { white-space: nowrap; }
    :where([data-sida="protokoll-ds"]) .contact-cta a.btn-pill svg { width: 18px; height: 18px; flex: none; fill: none; }

/* ---- PDF-visaren (includes/pdf_visare.php), alla sidor ---- */
#pdf-visare { position: fixed; inset: 0; z-index: 10000; background: var(--ds-bg); display: flex; flex-direction: column; padding-bottom: var(--sa-bottom, env(safe-area-inset-bottom, 0px)); box-sizing: border-box; }
  #pdf-visare[hidden] { display: none; }
  .pdfv-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px;
    padding-top: calc(10px + var(--sa-top, env(safe-area-inset-top, 0px)));
    background: var(--ds-yta); border-bottom: 1px solid var(--ds-linje); }
  .pdfv-tillbaka { flex: none; }
  .pdfv-titel { flex: 1; min-width: 0; font: 600 1rem/1.3 var(--ds-font); color: var(--ds-stark);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pdfv-nytt { flex: none; }
  #pdfv-ram { flex: 1; width: 100%; border: 0; background: var(--ds-yta); }
  @media (max-width: 520px) { .pdfv-nytt { display: none; } }

/* ---- ovrigt.php, data-sida="ovrigt-ds" ---- */
/* Övrigt: bara det som är unikt för sidan. Färger från ds.css, mönster från publik.css. */
    :where([data-sida="ovrigt-ds"]) .page-hero::before { background-image: url('dock-water.webp') !important; background-position: center 60% !important; }

    html[data-tema]:where([data-sida="ovrigt-ds"]) .h-section > p { margin: 0 0 20px; max-width: 760px; font-size: 1rem; line-height: 1.6; color: var(--ds-text); }
    html[data-tema]:where([data-sida="ovrigt-ds"]) .h-section > p strong { color: var(--ds-stark); }

    /* Sophämtning i korthet */
    html[data-tema]:where([data-sida="ovrigt-ds"]) .sop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 28px; }
    html[data-tema]:where([data-sida="ovrigt-ds"]) .sop-kort { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--ds-yta); border: 1px solid var(--ds-linje); border-radius: 16px; box-shadow: var(--ds-skugga); }
    html[data-tema]:where([data-sida="ovrigt-ds"]) .sop-kort .pub-roll { margin-bottom: 2px; }
    html[data-tema]:where([data-sida="ovrigt-ds"]) .sop-varde { font-size: 1rem; line-height: 1.45; color: var(--ds-text); }
    html[data-tema]:where([data-sida="ovrigt-ds"]) .sop-varde strong { color: var(--ds-stark); }

    /* Länkar till återvinningscentralerna */
    html[data-tema]:where([data-sida="ovrigt-ds"]) .link-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    html[data-tema]:where([data-sida="ovrigt-ds"]) .link-card-body { flex: 1; min-width: 0; }
    html[data-tema]:where([data-sida="ovrigt-ds"]) .link-card-label { font: 600 1rem/1.3 var(--ds-font); color: var(--ds-stark); }
    html[data-tema]:where([data-sida="ovrigt-ds"]) .link-card-pil { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--ds-accent); }

    /* Sotare */
    html[data-tema]:where([data-sida="ovrigt-ds"]) .kontakt-card { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; }
    html[data-tema]:where([data-sida="ovrigt-ds"]) .pub-ikonruta.kontakt-ikon { width: 52px; height: 52px; border-radius: 16px; }
    html[data-tema]:where([data-sida="ovrigt-ds"]) .pub-ikonruta.kontakt-ikon svg { width: 24px; height: 24px; }
    html[data-tema]:where([data-sida="ovrigt-ds"]) .pub-kort .kontakt-namn { margin: 2px 0 0; }

    /* Lokala kontakter */
    html[data-tema]:where([data-sida="ovrigt-ds"]) .lokal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
    html[data-tema]:where([data-sida="ovrigt-ds"]) .lokal-card { display: flex; flex-direction: column; gap: 4px; }
    html[data-tema]:where([data-sida="ovrigt-ds"]) .lokal-card .pub-avatar { margin-bottom: 10px; }
    html[data-tema]:where([data-sida="ovrigt-ds"]) .pub-kort .lokal-meta { flex: 1; margin: 2px 0 16px; }
    html[data-tema]:where([data-sida="ovrigt-ds"]) .lokal-meta a { color: var(--ds-accent); font-weight: 600; }

    /* Hantverkare från databasen */
    html[data-tema]:where([data-sida="ovrigt-ds"]) .tips-lista { margin: 0 0 8px; background: var(--ds-yta); border: 1px solid var(--ds-linje); border-radius: 16px; box-shadow: var(--ds-skugga); overflow: hidden; }
    html[data-tema]:where([data-sida="ovrigt-ds"]) .tips-rad { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; min-height: 56px; padding: 6px 18px; }
    html[data-tema]:where([data-sida="ovrigt-ds"]) .tips-rad + .tips-rad { border-top: 1px solid var(--ds-linje); }
    html[data-tema]:where([data-sida="ovrigt-ds"]) .tips-namn { font-weight: 600; color: var(--ds-stark); }
    html[data-tema]:where([data-sida="ovrigt-ds"]) .tips-tel { display: inline-flex; align-items: center; min-height: 44px; margin-left: auto; font-weight: 600; color: var(--ds-accent); text-decoration: none; white-space: nowrap; }
    html[data-tema]:where([data-sida="ovrigt-ds"]) .tips-tel:hover { text-decoration: underline; }

    @media (max-width: 900px) { html[data-tema]:where([data-sida="ovrigt-ds"]) .lokal-grid { grid-template-columns: 1fr; } }
    @media (max-width: 760px) { html[data-tema]:where([data-sida="ovrigt-ds"]) .sop-grid, html[data-tema]:where([data-sida="ovrigt-ds"]) .link-grid { grid-template-columns: 1fr; } }
    @media (max-width: 720px) {
      html[data-tema]:where([data-sida="ovrigt-ds"]) .kontakt-card { grid-template-columns: auto 1fr; gap: 16px 18px; }
      html[data-tema]:where([data-sida="ovrigt-ds"]) .kontakt-card .pub-knappar { grid-column: 1 / -1; }
    }
    @media (max-width: 560px) {
      html[data-tema]:where([data-sida="ovrigt-ds"]) .tips-rad { padding: 10px 16px; }
      html[data-tema]:where([data-sida="ovrigt-ds"]) .tips-tel { margin-left: 0; width: 100%; min-height: 44px; }
      html[data-tema]:where([data-sida="ovrigt-ds"]) .pub-knappar .chip-link { width: auto; flex: 1 1 130px; }
    }

/* ---- galleri.php, data-sida="galleri-ds" ---- */
:where([data-sida="galleri-ds"]) .page-hero::before {
      background-image: var(--hero-bild) !important;
      background-position: center 50% !important;
    }

    /* Filter */
    :where([data-sida="galleri-ds"]) .filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0 24px; }

    /* Bilderna */
    :where([data-sida="galleri-ds"]) .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 56px; }
    :where([data-sida="galleri-ds"]) .gallery-item {
      position: relative; display: block; overflow: hidden; cursor: pointer;
      border-radius: 16px; border: 1px solid var(--ds-linje); background: var(--ds-sankt); box-shadow: var(--ds-skugga);
    }
    :where([data-sida="galleri-ds"]) .gallery-item img { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; background: var(--ds-sankt); transition: transform .45s cubic-bezier(.25,.46,.45,.94); }
    :where([data-sida="galleri-ds"]) .gallery-item:hover img { transform: scale(1.04); }
    :where([data-sida="galleri-ds"]) .gallery-item:focus-visible { outline: 3px solid var(--ds-accent); outline-offset: 2px; }
    /* Bildtexten ligger på fotot och behåller mörk ton */
    :where([data-sida="galleri-ds"]) .gallery-item-overlay {
      position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 16px;
      background: linear-gradient(180deg, transparent 45%, rgba(4,10,18,.82) 100%);
      opacity: 0; transition: opacity .25s ease;
    }
    :where([data-sida="galleri-ds"]) .gallery-item:hover .gallery-item-overlay, :where([data-sida="galleri-ds"]) .gallery-item:focus-visible .gallery-item-overlay { opacity: 1; }
    :where([data-sida="galleri-ds"]) .gallery-item-caption { font-size: .875rem; line-height: 1.45; color: #ffffff; }
    :where([data-sida="galleri-ds"]) .gallery-item-cat { display: block; margin-bottom: 4px; font: 600 13px/1.2 var(--ds-cond); letter-spacing: .09em; text-transform: uppercase; color: #c4d4e2; }
    :where([data-sida="galleri-ds"]) .gallery-item.hidden { display: none; }

    /* Inga bilder */
    :where([data-sida="galleri-ds"]) .no-images { margin-bottom: 56px; padding: 48px 24px; text-align: center; background: var(--ds-yta); border: 1px dashed var(--ds-linje-stark); border-radius: var(--ds-radie); color: var(--ds-svag); font-size: 1rem; line-height: 1.55; }
    :where([data-sida="galleri-ds"]) .no-images h3 { margin: 0 0 6px; font: 600 1.125rem/1.3 var(--ds-font); color: var(--ds-stark); }
    :where([data-sida="galleri-ds"]) .no-images p { margin: 0; }

    /* Bildvisaren */
    :where([data-sida="galleri-ds"]) .lightbox { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; padding: 72px 72px 24px; background: var(--ds-bg); }
    :where([data-sida="galleri-ds"]) .lightbox.active { display: flex; }
    :where([data-sida="galleri-ds"]) .lightbox-inner { position: relative; max-width: min(1000px, 100%); max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
    :where([data-sida="galleri-ds"]) .lightbox img { max-width: 100%; max-height: 76vh; object-fit: contain; border-radius: 14px; box-shadow: var(--ds-skugga); user-select: none; }
    :where([data-sida="galleri-ds"]) .lightbox-meta { text-align: center; display: flex; flex-direction: column; gap: 4px; }
    :where([data-sida="galleri-ds"]) .lightbox-cat { font: 600 13px/1.2 var(--ds-cond); letter-spacing: .09em; text-transform: uppercase; color: var(--ds-accent); }
    :where([data-sida="galleri-ds"]) .lightbox-caption { font-size: 1rem; line-height: 1.55; color: var(--ds-text); }
    :where([data-sida="galleri-ds"]) .lightbox-counter { font-size: .875rem; color: var(--ds-svag); }
    :where([data-sida="galleri-ds"]) .lightbox-prev, :where([data-sida="galleri-ds"]) .lightbox-next, :where([data-sida="galleri-ds"]) .lightbox-close {
      position: fixed; width: 48px; height: 48px; padding: 0; border-radius: 50%;
      display: flex; align-items: center; justify-content: center; cursor: pointer;
      border: 1.5px solid var(--ds-linje-stark); background: var(--ds-yta); color: var(--ds-text); box-shadow: var(--ds-skugga);
      transition: border-color .15s, color .15s;
    }
    :where([data-sida="galleri-ds"]) .lightbox-prev, :where([data-sida="galleri-ds"]) .lightbox-next { top: 50%; transform: translateY(-50%); }
    :where([data-sida="galleri-ds"]) .lightbox-prev { left: 16px; }
    :where([data-sida="galleri-ds"]) .lightbox-next { right: 16px; }
    :where([data-sida="galleri-ds"]) .lightbox-close { top: 16px; right: 16px; }
    :where([data-sida="galleri-ds"]) :is(.lightbox-prev, .lightbox-next, .lightbox-close):hover { border-color: var(--ds-accent); color: var(--ds-accent); }
    :where([data-sida="galleri-ds"]) :is(.lightbox-prev, .lightbox-next, .lightbox-close):focus-visible { outline: 3px solid var(--ds-accent); outline-offset: 2px; }
    :where([data-sida="galleri-ds"]) :is(.lightbox-prev, .lightbox-next, .lightbox-close) svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

    @media (max-width: 560px) {
      :where([data-sida="galleri-ds"]) .lightbox { padding: 72px 12px 88px; }
      :where([data-sida="galleri-ds"]) .lightbox-prev, :where([data-sida="galleri-ds"]) .lightbox-next { top: auto; bottom: 20px; transform: none; }
      :where([data-sida="galleri-ds"]) .lightbox-prev { left: calc(50% - 60px); }
      :where([data-sida="galleri-ds"]) .lightbox-next { right: calc(50% - 60px); }
    }

/* ---- prognos.php, data-sida="prognos-ds" ---- */
:where([data-sida="prognos-ds"]) .p-shell { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
    :where([data-sida="prognos-ds"]) .p-hero { padding: 40px 0 8px; }

    /* Sidans rubrik och läget just nu */
    :where([data-sida="prognos-ds"]) .p-eyebrow { font: 600 13px/1.2 var(--ds-cond); letter-spacing: .09em; text-transform: uppercase; color: var(--ds-svag); }
    :where([data-sida="prognos-ds"]) .p-titel { margin: 6px 0 10px; font: 400 clamp(2.5rem, 6vw, 3.25rem)/1 var(--ds-display); letter-spacing: .02em; text-transform: uppercase; color: var(--ds-stark); }
    :where([data-sida="prognos-ds"]) .p-ingress { margin: 0; max-width: 600px; font-size: 1rem; line-height: 1.55; color: var(--ds-text); }
    :where([data-sida="prognos-ds"]) .p-nu {
      display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 24px; padding: 20px 24px;
      background: var(--ds-yta); border: 1px solid var(--ds-linje); border-radius: var(--ds-radie); box-shadow: var(--ds-skugga);
    }
    :where([data-sida="prognos-ds"]) .p-nu-emoji { font-size: 3rem; line-height: 1; display: flex; }
    :where([data-sida="prognos-ds"]) .p-nu-temp { font: 400 3.5rem/1 var(--ds-display); letter-spacing: .02em; color: var(--ds-stark); }
    :where([data-sida="prognos-ds"]) .p-nu-text { flex: 1 1 220px; font-size: 1rem; line-height: 1.55; color: var(--ds-text); }
    :where([data-sida="prognos-ds"]) .p-nu-text strong { font-weight: 600; color: var(--ds-stark); }

    /* Avsnitt */
    :where([data-sida="prognos-ds"]) .p-sektion { margin: 48px 0; }
    /* html[data-tema] först: tema-ljus.css färgar alla h2 */
    html[data-tema]:where([data-sida="prognos-ds"]) .p-rubrik { margin: 0 0 6px; font: 400 2rem/1 var(--ds-display); letter-spacing: .02em; text-transform: uppercase; color: var(--ds-stark); }
    :where([data-sida="prognos-ds"]) .p-underrubrik { margin-bottom: 18px; max-width: 720px; font-size: 1rem; line-height: 1.55; color: var(--ds-text); }
    :where([data-sida="prognos-ds"]) .p-kort { background: var(--ds-yta); border: 1px solid var(--ds-linje); border-radius: var(--ds-radie); padding: 22px 24px; box-shadow: var(--ds-skugga); }
    :where([data-sida="prognos-ds"]) .p-fot { margin: 14px 0 0; font-size: .875rem; line-height: 1.55; color: var(--ds-svag); }
    :where([data-sida="prognos-ds"]) .p-fot a { color: var(--ds-accent); }
    :where([data-sida="prognos-ds"]) .p-tom { font-size: 1rem; color: var(--ds-svag); }
    :where([data-sida="prognos-ds"]) .p-ikon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

    /* Dygnskorten (knappar som öppnar timme för timme) */
    :where([data-sida="prognos-ds"]) .p-dagar { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
    @media (min-width: 700px) and (max-width: 1000px) { :where([data-sida="prognos-ds"]) .p-dagar { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } }
    :where([data-sida="prognos-ds"]) button.p-dag {
      display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 16px; text-align: left; cursor: pointer;
      font: inherit; color: var(--ds-text); background: var(--ds-yta); border: 1px solid var(--ds-linje); border-radius: 16px; box-shadow: var(--ds-skugga);
      transition: border-color .15s;
    }
    :where([data-sida="prognos-ds"]) button.p-dag:hover { border-color: var(--ds-accent); }
    :where([data-sida="prognos-ds"]) button.p-dag:focus-visible { outline: 3px solid var(--ds-accent); outline-offset: 2px; }
    :where([data-sida="prognos-ds"]) .p-dag.idag { border: 1.5px solid var(--ds-accent); }
    :where([data-sida="prognos-ds"]) .p-dag-namn { font: 700 15px/1.2 var(--ds-cond); letter-spacing: .07em; text-transform: uppercase; color: var(--ds-stark); }
    :where([data-sida="prognos-ds"]) .p-dag-emoji { font-size: 2.25rem; line-height: 1; display: flex; }
    :where([data-sida="prognos-ds"]) .p-dag-temp { font: 400 2rem/1 var(--ds-display); letter-spacing: .02em; color: var(--ds-stark); }
    :where([data-sida="prognos-ds"]) .p-dag-temp small { margin-left: 6px; font: 400 1.25rem/1 var(--ds-display); color: var(--ds-svag); }
    :where([data-sida="prognos-ds"]) .p-dag-vader { min-height: 2.9em; font-size: .875rem; line-height: 1.45; color: var(--ds-text); }
    :where([data-sida="prognos-ds"]) .p-dag-rad { display: flex; gap: 6px; align-items: flex-start; font-size: .875rem; line-height: 1.45; color: var(--ds-svag); }
    :where([data-sida="prognos-ds"]) .p-dag-rad .p-ikon { width: 16px; height: 16px; margin-top: 2px; color: var(--ds-accent); }
    :where([data-sida="prognos-ds"]) .p-dag-rad strong { font-weight: 600; color: var(--ds-text); }
    :where([data-sida="prognos-ds"]) .p-dag-mer { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 4px; font: 600 13px/1.2 var(--ds-cond); letter-spacing: .09em; text-transform: uppercase; color: var(--ds-accent); }
    :where([data-sida="prognos-ds"]) .p-dag-mer .p-ikon { width: 14px; height: 14px; }

    /* Detaljvy för ett dygn */
    :where([data-sida="prognos-ds"]) .p-modal { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center; padding: 20px; }
    :where([data-sida="prognos-ds"]) .p-modal[hidden] { display: none; }
    :where([data-sida="prognos-ds"]) .p-modal-bak { position: absolute; inset: 0; background: var(--ds-bg); opacity: .86; }
    :where([data-sida="prognos-ds"]) .p-modal-kort {
      position: relative; display: flex; flex-direction: column; width: 100%; max-width: 540px; max-height: 86vh; overflow: hidden;
      background: var(--ds-yta); border: 1px solid var(--ds-linje); border-radius: var(--ds-radie); box-shadow: var(--ds-skugga);
    }
    :where([data-sida="prognos-ds"]) .p-modal-huvud { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none; padding: 14px 18px 14px 22px; border-bottom: 1px solid var(--ds-linje); }
    html[data-tema]:where([data-sida="prognos-ds"]) .p-modal-titel { margin: 0; font: 400 1.75rem/1 var(--ds-display); letter-spacing: .02em; text-transform: uppercase; color: var(--ds-stark); }
    :where([data-sida="prognos-ds"]) .p-modal-stang svg { width: 20px; height: 20px; }
    :where([data-sida="prognos-ds"]) .p-modal-kropp { padding: 18px 22px 22px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    :where([data-sida="prognos-ds"]) .p-detalj-topp { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
    :where([data-sida="prognos-ds"]) .p-detalj-emoji { font-size: 2.5rem; line-height: 1; display: flex; }
    :where([data-sida="prognos-ds"]) .p-detalj-temp { display: block; font: 400 2rem/1 var(--ds-display); letter-spacing: .02em; color: var(--ds-stark); }
    :where([data-sida="prognos-ds"]) .p-detalj-temp small { font-size: 1.25rem; color: var(--ds-svag); }
    :where([data-sida="prognos-ds"]) .p-detalj-sammanfattning { display: block; margin-top: 4px; font-size: .875rem; line-height: 1.45; color: var(--ds-svag); }
    :where([data-sida="prognos-ds"]) .p-timmar { margin-top: 14px; }
    :where([data-sida="prognos-ds"]) .p-tim { display: grid; grid-template-columns: 36px 28px 56px 1fr auto; align-items: center; gap: 8px; padding: 9px 2px; border-bottom: 1px solid var(--ds-linje); font-size: .9375rem; color: var(--ds-text); }
    :where([data-sida="prognos-ds"]) .p-tim:last-child { border-bottom: 0; }
    :where([data-sida="prognos-ds"]) .p-tim-huvud { padding-bottom: 8px; font: 600 13px/1.2 var(--ds-cond); letter-spacing: .09em; text-transform: uppercase; color: var(--ds-svag); }
    :where([data-sida="prognos-ds"]) .p-tim-kl { font: 600 15px/1.2 var(--ds-font); color: var(--ds-stark); }
    :where([data-sida="prognos-ds"]) .p-tim-emoji { font-size: 1.375rem; display: flex; }
    :where([data-sida="prognos-ds"]) .p-tim-temp { font-weight: 600; color: var(--ds-stark); }
    :where([data-sida="prognos-ds"]) .p-tim-riktn { color: var(--ds-svag); }
    :where([data-sida="prognos-ds"]) .p-tim-by { display: block; font-size: .8125rem; color: var(--ds-svag); }
    :where([data-sida="prognos-ds"]) .p-tim-nederb { text-align: right; font-size: .875rem; color: var(--ds-accent); }
    @media (max-width: 640px) {
      :where([data-sida="prognos-ds"]) .p-modal { padding: 12px; align-items: flex-end; }
      :where([data-sida="prognos-ds"]) .p-modal-kort { max-height: 88vh; }
      :where([data-sida="prognos-ds"]) .p-tim { grid-template-columns: 32px 26px 52px 1fr auto; font-size: .875rem; }
    }

    /* Kurvorna (SVG från pKurva). Färgerna kommer från tokens så de fungerar i båda lägena */
    :where([data-sida="prognos-ds"]) .p-kurva { width: 100%; height: auto; display: block; --p-farg: var(--ds-accent); }
    :where([data-sida="prognos-ds"]) .p-kurva-mobil, :where([data-sida="prognos-ds"]) .p-kurva-mellan { display: none; }
    @media (max-width: 899px) { :where([data-sida="prognos-ds"]) .p-kurva-dator { display: none; } }
    @media (max-width: 600px) { :where([data-sida="prognos-ds"]) .p-kurva-mellan { display: none; } :where([data-sida="prognos-ds"]) .p-kurva-mobil { display: block; } }
    :where([data-sida="prognos-ds"]) .p-kurva line { stroke: var(--ds-linje); }
    :where([data-sida="prognos-ds"]) .p-kurva text { fill: var(--ds-svag); }
    :where([data-sida="prognos-ds"]) .p-kurva polyline { stroke: var(--p-farg); }
    :where([data-sida="prognos-ds"]) .p-kurva polygon, :where([data-sida="prognos-ds"]) .p-kurva circle { fill: var(--p-farg); }
    :where([data-sida="prognos-ds"]) .p-varm .p-kurva { --p-farg: var(--ds-varning); }
    :where([data-sida="prognos-ds"]) .p-gron .p-kurva { --p-farg: var(--ds-ok); }

    /* Badtemperatur */
    :where([data-sida="prognos-ds"]) .badtemp-rad { margin-bottom: 16px; }
    :where([data-sida="prognos-ds"]) .badtemp-kort { display: inline-flex; align-items: center; gap: 14px; min-width: 240px; padding: 16px 20px; background: var(--ds-yta); border: 1px solid var(--ds-linje); border-radius: 16px; box-shadow: var(--ds-skugga); }
    :where([data-sida="prognos-ds"]) .badtemp-ikon { width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--ds-accent-svag); color: var(--ds-accent); display: flex; align-items: center; justify-content: center; }
    :where([data-sida="prognos-ds"]) .badtemp-ikon .p-ikon { width: 22px; height: 22px; }
    :where([data-sida="prognos-ds"]) .badtemp-grader { font: 400 2.25rem/1 var(--ds-display); letter-spacing: .02em; color: var(--ds-stark); }
    :where([data-sida="prognos-ds"]) .badtemp-tom { color: var(--ds-svag); }
    :where([data-sida="prognos-ds"]) .badtemp-meta { margin-top: 4px; font-size: .875rem; color: var(--ds-svag); }
    :where([data-sida="prognos-ds"]) .badtemp-kurva { margin-bottom: 16px; }
    :where([data-sida="prognos-ds"]) .badtemp-kurva-rubrik { margin-bottom: 10px; font: 600 13px/1.2 var(--ds-cond); letter-spacing: .09em; text-transform: uppercase; color: var(--ds-svag); }
    :where([data-sida="prognos-ds"]) .badtemp-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 16px 18px; background: var(--ds-yta); border: 1px solid var(--ds-linje); border-radius: 16px; }
    :where([data-sida="prognos-ds"]) .badtemp-form input.ds-falt { width: 120px; }
    @media (max-width: 520px) { :where([data-sida="prognos-ds"]) .badtemp-form-etikett { flex: 1 1 100%; } :where([data-sida="prognos-ds"]) .badtemp-form input.ds-falt { flex: 1 1 100px; } }

    /* Havsvattenstånd och grundvatten */
    :where([data-sida="prognos-ds"]) .p-vatten-tal { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 16px; }
    :where([data-sida="prognos-ds"]) .p-vatten-tal div span, :where([data-sida="prognos-ds"]) .p-gv-sido div span { display: block; }
    :where([data-sida="prognos-ds"]) .p-tal { font: 400 2rem/1.05 var(--ds-display); letter-spacing: .02em; color: var(--ds-stark); }
    :where([data-sida="prognos-ds"]) .p-tal-etikett { margin-top: 2px; font: 600 13px/1.2 var(--ds-cond); letter-spacing: .09em; text-transform: uppercase; color: var(--ds-svag); }
    :where([data-sida="prognos-ds"]) .p-gv-topp { display: flex; gap: 32px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 18px; }
    :where([data-sida="prognos-ds"]) .p-gv-matare { flex: 0 1 280px; min-width: 200px; --p-ton: var(--ds-accent); --p-ton-svag: var(--ds-accent-svag); }
    :where([data-sida="prognos-ds"]) .p-gv-matare.ton-fara { --p-ton: var(--ds-fara); --p-ton-svag: var(--ds-fara-svag); }
    :where([data-sida="prognos-ds"]) .p-gv-matare.ton-varning { --p-ton: var(--ds-varning); --p-ton-svag: var(--ds-varning-svag); }
    :where([data-sida="prognos-ds"]) .p-gv-matare.ton-ok { --p-ton: var(--ds-ok); --p-ton-svag: var(--ds-ok-svag); }
    :where([data-sida="prognos-ds"]) .p-gv-tal { font: 400 3.25rem/1 var(--ds-display); letter-spacing: .02em; color: var(--ds-stark); }
    :where([data-sida="prognos-ds"]) .p-gv-av { font-size: 1.5rem; color: var(--ds-svag); }
    :where([data-sida="prognos-ds"]) .p-gv-skala { position: relative; height: 10px; margin: 12px 0 10px; border-radius: 999px; background: var(--p-ton-svag); overflow: hidden; }
    :where([data-sida="prognos-ds"]) .p-gv-skala span { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--p-ton); }
    :where([data-sida="prognos-ds"]) .p-gv-lage { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; background: var(--p-ton-svag); color: var(--p-ton); font: 700 13px/1 var(--ds-cond); letter-spacing: .07em; text-transform: uppercase; }
    :where([data-sida="prognos-ds"]) .p-gv-etikett { margin-top: 8px; font-size: .875rem; color: var(--ds-svag); }
    :where([data-sida="prognos-ds"]) .p-gv-sido { display: flex; gap: 24px; flex-wrap: wrap; padding-top: 6px; }
    :where([data-sida="prognos-ds"]) .p-gv-sido .p-tal { font-size: 1.625rem; }

    @media (max-width: 640px) {
      :where([data-sida="prognos-ds"]) .p-shell { padding: 0 16px; }
      :where([data-sida="prognos-ds"]) .p-nu { padding: 18px; gap: 14px; }
      :where([data-sida="prognos-ds"]) .p-nu-temp { font-size: 3rem; }
      :where([data-sida="prognos-ds"]) .p-kort { padding: 18px 16px; }
      :where([data-sida="prognos-ds"]) .p-dagar > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    }

/* ---- integritetspolicy.php, data-sida="integritetspolicy-ds" ---- */
/* Integritetspolicy (fas 7, 2026-10-30): textsida byggd på ds.css */
    html[data-tema]:where([data-sida="integritetspolicy-ds"]) .policy { max-width: 760px; margin: 0 auto; padding: 48px 20px 72px; font-size: 1rem; line-height: 1.6; color: var(--ds-text); }
    html[data-tema]:where([data-sida="integritetspolicy-ds"]) .policy .ds-etikett { margin: 0 0 8px; }
    html[data-tema]:where([data-sida="integritetspolicy-ds"]) .policy h1 { margin: 0 0 10px; font: 400 clamp(2.5rem, 6vw, 3.25rem)/1 var(--ds-display); letter-spacing: .02em; color: var(--ds-stark); }
    html[data-tema]:where([data-sida="integritetspolicy-ds"]) .policy .version { margin: 0 0 28px; font-size: .875rem; line-height: 1.45; color: var(--ds-svag); }
    html[data-tema]:where([data-sida="integritetspolicy-ds"]) .policy h2 { margin: 40px 0 12px; padding-top: 24px; border-top: 1px solid var(--ds-linje); font: 400 clamp(1.75rem, 4vw, 2rem)/1.05 var(--ds-display); letter-spacing: .02em; text-transform: none; color: var(--ds-stark); }
    html[data-tema]:where([data-sida="integritetspolicy-ds"]) .policy :is(p, li) { font-size: 1rem; line-height: 1.6; color: var(--ds-text); }
    html[data-tema]:where([data-sida="integritetspolicy-ds"]) .policy p { margin: 0 0 14px; }
    html[data-tema]:where([data-sida="integritetspolicy-ds"]) .policy ul { margin: 0 0 14px; padding-left: 22px; }
    html[data-tema]:where([data-sida="integritetspolicy-ds"]) .policy li { margin-bottom: 8px; }
    html[data-tema]:where([data-sida="integritetspolicy-ds"]) .policy li::marker { color: var(--ds-accent); }
    html[data-tema]:where([data-sida="integritetspolicy-ds"]) .policy strong { font-weight: 600; color: var(--ds-stark); }
    html[data-tema]:where([data-sida="integritetspolicy-ds"]) .policy a:not([class]) { color: var(--ds-accent); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
    html[data-tema]:where([data-sida="integritetspolicy-ds"]) .policy .pub-besked { margin: 16px 0 8px; }
    html[data-tema]:where([data-sida="integritetspolicy-ds"]) .policy .pub-besked svg { width: 22px; height: 22px; flex: none; margin-top: 1px; fill: none; stroke: var(--ds-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    html[data-tema]:where([data-sida="integritetspolicy-ds"]) .policy .tillbaka { margin-top: 40px; }
    @media (max-width: 720px) { html[data-tema]:where([data-sida="integritetspolicy-ds"]) .policy { padding: 32px 16px 56px; } }

/* ---- manual.php, data-sida="manual-ds" ---- */
/* Guiden (fas 7, 2026-10-30): textsida byggd på ds.css. Utskriften längst ner används för PDF. */
    html[data-tema]:where([data-sida="manual-ds"]) .manual { max-width: 760px; margin: 0 auto; padding: 48px 20px 72px; font-size: 1rem; line-height: 1.6; color: var(--ds-text); }
    html[data-tema]:where([data-sida="manual-ds"]) .manual .overrad { margin: 0 0 8px; font: 600 13px/1.2 var(--ds-cond); letter-spacing: .09em; text-transform: uppercase; color: var(--ds-svag); }
    html[data-tema]:where([data-sida="manual-ds"]) .manual h1 { margin: 0 0 14px; font: 400 clamp(2.5rem, 6vw, 3.25rem)/1 var(--ds-display); letter-spacing: .02em; color: var(--ds-stark); }
    html[data-tema]:where([data-sida="manual-ds"]) .manual .ingress { margin: 0 0 20px; max-width: 640px; font-size: 1.125rem; line-height: 1.55; color: var(--ds-text); }
    html[data-tema]:where([data-sida="manual-ds"]) .manual .innehall { margin: 32px 0 8px; padding: 20px 24px 12px; background: var(--ds-yta); border: 1px solid var(--ds-linje); border-radius: var(--ds-radie); box-shadow: var(--ds-skugga); }
    html[data-tema]:where([data-sida="manual-ds"]) .manual .innehall h2 { margin: 0 0 6px; padding: 0; border: 0; font: 600 13px/1.2 var(--ds-cond); letter-spacing: .09em; text-transform: uppercase; color: var(--ds-svag); }
    html[data-tema]:where([data-sida="manual-ds"]) .manual .innehall ol { list-style: none; margin: 0; padding: 0; columns: 2 260px; column-gap: 24px; }
    html[data-tema]:where([data-sida="manual-ds"]) .manual .innehall li { margin: 0; break-inside: avoid; }
    html[data-tema]:where([data-sida="manual-ds"]) .manual .innehall li a { display: flex; align-items: center; min-height: 44px; color: var(--ds-accent); font-weight: 600; text-decoration: none; }
    html[data-tema]:where([data-sida="manual-ds"]) .manual .innehall li a:hover { text-decoration: underline; text-underline-offset: 3px; }
    html[data-tema]:where([data-sida="manual-ds"]) .manual section { scroll-margin-top: 90px; }
    html[data-tema]:where([data-sida="manual-ds"]) .manual section > h2 { margin: 48px 0 12px; padding-top: 24px; border-top: 1px solid var(--ds-linje); font: 400 clamp(1.75rem, 4vw, 2.25rem)/1.05 var(--ds-display); letter-spacing: .02em; color: var(--ds-stark); }
    html[data-tema]:where([data-sida="manual-ds"]) .manual h3 { margin: 24px 0 8px; font: 600 1.125rem/1.3 var(--ds-font); color: var(--ds-stark); }
    html[data-tema]:where([data-sida="manual-ds"]) .manual p { margin: 0 0 12px; font-size: 1rem; color: var(--ds-text); }
    html[data-tema]:where([data-sida="manual-ds"]) .manual :is(ol, ul) { margin: 0 0 14px; padding-left: 24px; }
    html[data-tema]:where([data-sida="manual-ds"]) .manual li { margin-bottom: 8px; color: var(--ds-text); }
    html[data-tema]:where([data-sida="manual-ds"]) .manual li::marker { color: var(--ds-accent); font-weight: 600; }
    html[data-tema]:where([data-sida="manual-ds"]) .manual strong { font-weight: 600; color: var(--ds-stark); }
    html[data-tema]:where([data-sida="manual-ds"]) .manual a:not([class]) { color: var(--ds-accent); text-decoration: underline; text-underline-offset: 3px; }
    html[data-tema]:where([data-sida="manual-ds"]) .manual .tips { margin: 14px 0 18px; padding: 14px 18px; border-radius: 14px; background: var(--ds-accent-svag); font-size: 1rem; line-height: 1.55; color: var(--ds-text); }
    html[data-tema]:where([data-sida="manual-ds"]) .manual .tabell-ram { margin: 6px 0 16px; overflow-x: auto; background: var(--ds-yta); border: 1px solid var(--ds-linje); border-radius: 16px; }
    html[data-tema]:where([data-sida="manual-ds"]) .manual .tabell { width: 100%; border-collapse: collapse; font-size: 1rem; }
    html[data-tema]:where([data-sida="manual-ds"]) .manual .tabell :is(th, td) { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--ds-linje); color: var(--ds-text); }
    html[data-tema]:where([data-sida="manual-ds"]) .manual .tabell tr:last-child td { border-bottom: 0; }
    html[data-tema]:where([data-sida="manual-ds"]) .manual .tabell th { font: 600 13px/1.2 var(--ds-cond); letter-spacing: .09em; text-transform: uppercase; color: var(--ds-svag); }
    html[data-tema]:where([data-sida="manual-ds"]) .manual .tabell td:first-child { font-weight: 600; color: var(--ds-stark); }
    html[data-tema]:where([data-sida="manual-ds"]) .manual .fot { margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--ds-linje); font-size: .875rem; color: var(--ds-svag); }
    @media (max-width: 720px) { html[data-tema]:where([data-sida="manual-ds"]) .manual { padding: 32px 16px 56px; } html[data-tema]:where([data-sida="manual-ds"]) .manual .innehall { padding: 16px 18px 8px; } }
    @media print {
      :where([data-sida="manual-ds"]) header.nav, :where([data-sida="manual-ds"]) .bottom-nav, :where([data-sida="manual-ds"]) footer, :where([data-sida="manual-ds"]) .hoppa-till, :where([data-sida="manual-ds"]) .pdf-lank { display: none !important; }
      html[data-tema]:where([data-sida="manual-ds"]) .manual { max-width: none; color: #000; padding: 0; }
      html[data-tema]:where([data-sida="manual-ds"]) .manual :is(h1, h3, strong, p, li, td, th, .ingress), html[data-tema]:where([data-sida="manual-ds"]) .manual section > h2 { color: #000; }
      html[data-tema]:where([data-sida="manual-ds"]) .manual :is(.innehall, .tips, .tabell-ram) { box-shadow: none; background: none; }
      html[data-tema]:where([data-sida="manual-ds"]) .manual section { break-inside: auto; }
    }

/* ---- 404.php, data-sida="404-ds" ---- */
/* Sidan finns inte (fas 7, 2026-10-30): byggd på ds.css */
    html:where([data-sida="404-ds"]), :where([data-sida="404-ds"]) body { min-height: 100%; }
    :where([data-sida="404-ds"]) body { display: flex; flex-direction: column; min-height: 100vh; }
    html[data-tema]:where([data-sida="404-ds"]) .fel-sida { flex: 1 0 auto; width: 100%; max-width: 640px; box-sizing: border-box; margin: 0 auto; padding: 72px 20px 96px; text-align: center; display: flex; flex-direction: column; align-items: center; }
    html[data-tema]:where([data-sida="404-ds"]) .fel-ikon { width: 64px; height: 64px; margin-bottom: 20px; border-radius: 18px; background: var(--ds-accent-svag); color: var(--ds-accent); display: flex; align-items: center; justify-content: center; }
    html[data-tema]:where([data-sida="404-ds"]) .fel-ikon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    html[data-tema]:where([data-sida="404-ds"]) .fel-sida .ds-etikett { margin: 0 0 8px; }
    html[data-tema]:where([data-sida="404-ds"]) .fel-sida h1 { margin: 0 0 12px; font: 400 clamp(2.5rem, 7vw, 3.25rem)/1 var(--ds-display); letter-spacing: .02em; color: var(--ds-stark); }
    html[data-tema]:where([data-sida="404-ds"]) .fel-sida p { margin: 0 0 28px; max-width: 520px; font-size: 1rem; line-height: 1.55; color: var(--ds-text); }
    html[data-tema]:where([data-sida="404-ds"]) .fel-lankar { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---- login.php, data-sida="login-lank-ds" ---- */
:where([data-sida="login-lank-ds"]) body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; background: var(--ds-bg); color: var(--ds-text); font-family: var(--ds-font); }
            :where([data-sida="login-lank-ds"]) .li-card { width: 100%; max-width: 420px; padding: 36px 28px; text-align: center; background: var(--ds-yta); border: 1px solid var(--ds-linje); border-radius: var(--ds-radie); box-shadow: var(--ds-skugga); }
            :where([data-sida="login-lank-ds"]) .li-check { width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 50%; background: var(--ds-ok-svag); color: var(--ds-ok); display: flex; align-items: center; justify-content: center; }
            :where([data-sida="login-lank-ds"]) .li-check svg { width: 34px; height: 34px; stroke: currentColor; }
            :where([data-sida="login-lank-ds"]) .li-eyebrow { margin-bottom: 6px; font: 600 13px/1.2 var(--ds-cond); letter-spacing: .09em; text-transform: uppercase; color: var(--ds-svag); }
            :where([data-sida="login-lank-ds"]) .li-titel { margin: 0 0 8px; font: 400 2.5rem/1 var(--ds-display); letter-spacing: .02em; color: var(--ds-stark); }
            :where([data-sida="login-lank-ds"]) .li-namn { margin-bottom: 24px; font-size: 1.0625rem; color: var(--ds-text); }
            :where([data-sida="login-lank-ds"]) .li-btn { width: 100%; }
            :where([data-sida="login-lank-ds"]) .li-btn svg { width: 18px; height: 18px; fill: none; }
            :where([data-sida="login-lank-ds"]) .li-btn-primary { margin-bottom: 10px; }
            :where([data-sida="login-lank-ds"]) .li-app-hint { margin-bottom: 18px; padding: 16px 20px; border-radius: 14px; background: var(--ds-accent-svag); font-size: 1rem; line-height: 1.5; color: var(--ds-text); }
            :where([data-sida="login-lank-ds"]) .li-app-hint strong { display: block; margin-bottom: 4px; font-weight: 600; color: var(--ds-stark); }
            :where([data-sida="login-lank-ds"]) .li-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; font: 600 13px/1.2 var(--ds-cond); letter-spacing: .09em; text-transform: uppercase; color: var(--ds-svag); }
            :where([data-sida="login-lank-ds"]) .li-divider::before, :where([data-sida="login-lank-ds"]) .li-divider::after { content: ''; flex: 1; height: 1px; background: var(--ds-linje); }
            :where([data-sida="login-lank-ds"]) .li-countdown { margin-top: 14px; font-size: .875rem; color: var(--ds-svag); }
            :where([data-sida="login-lank-ds"]) #li-countdown-num { font-weight: 600; color: var(--ds-stark); }

            /* Visa olika knappar baserat på enhetstyp */
            :where([data-sida="login-lank-ds"]) .for-mobile { display: none; }
            :where([data-sida="login-lank-ds"]) .for-desktop { display: block; }
            @media (max-width: 760px) {
              :where([data-sida="login-lank-ds"]) .for-mobile { display: block; }
              :where([data-sida="login-lank-ds"]) .for-desktop { display: none; }
            }

/* ---- login.php (block 2), data-sida="login-ds" ---- */
/* Fotot bakom rutan tonas med sidans bakgrund, så att båda lägena fungerar */
    :where([data-sida="login-ds"]) .login-wrap { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; box-sizing: border-box; }
    :where([data-sida="login-ds"]) .login-wrap::before { content: ''; position: fixed; inset: 0; z-index: 0; background: url('mist-water.webp') center 40% / cover no-repeat; }
    :where([data-sida="login-ds"]) .login-wrap::after { content: ''; position: fixed; inset: 0; z-index: 0; background: var(--ds-bg); opacity: .78; }
    :where([data-sida="login-ds"]) .login-box {
      position: relative; z-index: 1; width: 100%; max-width: 440px; box-sizing: border-box; padding: 36px 32px; text-align: center;
      background: var(--ds-yta); border: 1px solid var(--ds-linje); border-radius: var(--ds-radie); box-shadow: var(--ds-skugga);
    }
    :where([data-sida="login-ds"]) .login-logo { display: block; width: 64px; height: 64px; margin: 0 auto 18px; object-fit: contain; }
    :where([data-sida="login-ds"]) .login-eyebrow { margin-bottom: 8px; font: 600 13px/1.2 var(--ds-cond); letter-spacing: .09em; text-transform: uppercase; color: var(--ds-svag); }
    :where([data-sida="login-ds"]) .login-title { margin-bottom: 10px; font: 400 3rem/1 var(--ds-display); letter-spacing: .02em; color: var(--ds-stark); }
    :where([data-sida="login-ds"]) .login-sub { margin-bottom: 28px; font-size: 1rem; line-height: 1.55; color: var(--ds-text); }
    :where([data-sida="login-ds"]) .login-sub strong { font-weight: 600; color: var(--ds-stark); overflow-wrap: anywhere; }

    :where([data-sida="login-ds"]) .login-field { margin-bottom: 16px; text-align: left; }
    :where([data-sida="login-ds"]) .login-field label { display: block; margin-bottom: 8px; font: 600 13px/1.2 var(--ds-cond); letter-spacing: .09em; text-transform: uppercase; color: var(--ds-svag); }
    :where([data-sida="login-ds"]) .login-field input {
      width: 100%; box-sizing: border-box; min-height: 48px; padding: 0 14px;
      border-radius: 12px; border: 1.5px solid var(--ds-linje-stark); background: var(--ds-sankt);
      color: var(--ds-text); font: 400 1rem/1.4 var(--ds-font);
    }
    :where([data-sida="login-ds"]) .login-field input:focus, :where([data-sida="login-ds"]) .kod-input:focus { border-color: var(--ds-accent); outline: none; box-shadow: 0 0 0 3px var(--ds-accent-svag); }
    :where([data-sida="login-ds"]) .login-field input::placeholder { color: var(--ds-svag); }

    :where([data-sida="login-ds"]) .login-btn, :where([data-sida="login-ds"]) .login-omstart { width: 100%; min-height: 48px; }
    :where([data-sida="login-ds"]) .pk-knapp { width: 100%; }
    :where([data-sida="login-ds"]) .login-btn svg { width: 18px; height: 18px; fill: none; flex: none; }
    :where([data-sida="login-ds"]) .val-form { margin-bottom: 10px; }

    /* Koden */
    :where([data-sida="login-ds"]) .kod-form { margin-bottom: 8px; }
    :where([data-sida="login-ds"]) .kod-input-wrap { margin-bottom: 16px; }
    :where([data-sida="login-ds"]) .kod-input {
      width: 100%; box-sizing: border-box; padding: 16px 12px; text-align: center;
      border-radius: 16px; border: 1.5px solid var(--ds-linje-stark); background: var(--ds-sankt); color: var(--ds-stark);
      font: 600 2.25rem/1.2 var(--ds-font); font-variant-numeric: tabular-nums; letter-spacing: .4em;
    }
    :where([data-sida="login-ds"]) .kod-input::placeholder { color: var(--ds-svag); letter-spacing: .3em; }

    /* Besked */
    :where([data-sida="login-ds"]) .login-error, :where([data-sida="login-ds"]) .login-info { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 16px; padding: 12px 14px; border-radius: 14px; text-align: left; font-size: 1rem; line-height: 1.5; color: var(--ds-text); }
    :where([data-sida="login-ds"]) .login-error { background: var(--ds-fara-svag); }
    :where([data-sida="login-ds"]) .login-info { background: var(--ds-ok-svag); }
    :where([data-sida="login-ds"]) .login-error svg, :where([data-sida="login-ds"]) .login-info svg { width: 20px; height: 20px; flex: none; margin-top: 2px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    :where([data-sida="login-ds"]) .login-error svg { stroke: var(--ds-fara); }
    :where([data-sida="login-ds"]) .login-info svg { stroke: var(--ds-ok); }

    :where([data-sida="login-ds"]) .login-hint { margin-top: 22px; font-size: .875rem; line-height: 1.55; color: var(--ds-svag); }
    :where([data-sida="login-ds"]) .login-hint a { color: var(--ds-accent); }

    /* Hopfällbara tips under koden */
    :where([data-sida="login-ds"]) .admin-toggle { margin-top: 16px; padding-top: 8px; border-top: 1px solid var(--ds-linje); }
    :where([data-sida="login-ds"]) .admin-toggle summary {
      display: flex; align-items: center; justify-content: center; min-height: 44px; cursor: pointer; list-style: none;
      font: 600 13px/1.2 var(--ds-cond); letter-spacing: .09em; text-transform: uppercase; color: var(--ds-svag);
    }
    :where([data-sida="login-ds"]) .admin-toggle summary::-webkit-details-marker { display: none; }
    :where([data-sida="login-ds"]) .admin-toggle summary:hover, :where([data-sida="login-ds"]) .admin-toggle[open] summary { color: var(--ds-accent); }
    :where([data-sida="login-ds"]) .admin-toggle summary:focus-visible { outline: 3px solid var(--ds-accent); outline-offset: 2px; border-radius: 8px; }
    :where([data-sida="login-ds"]) .login-not { margin: 4px 0 8px; font-size: .875rem; line-height: 1.5; color: var(--ds-text); }

    /* Passkey */
    :where([data-sida="login-ds"]) .pk-eller { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; font: 600 13px/1.2 var(--ds-cond); letter-spacing: .09em; text-transform: uppercase; color: var(--ds-svag); }
    :where([data-sida="login-ds"]) .pk-eller::before, :where([data-sida="login-ds"]) .pk-eller::after { content: ""; flex: 1; height: 1px; background: var(--ds-linje); }
    :where([data-sida="login-ds"]) .pk-hjalp { margin: 8px 0 0; font-size: .875rem; line-height: 1.45; color: var(--ds-svag); }
    :where([data-sida="login-ds"]) .pk-fel { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--ds-fara-svag); color: var(--ds-text); font-size: .875rem; }

    /* Länken till guiden */
    :where([data-sida="login-ds"]) .li-guide-lank {
      display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; margin-top: 18px; padding: 8px 14px;
      border: 1px solid var(--ds-linje); border-radius: 14px; background: var(--ds-sankt); text-decoration: none; font-size: .9375rem; line-height: 1.3;
    }
    :where([data-sida="login-ds"]) .li-guide-lank:hover { border-color: var(--ds-accent); }
    :where([data-sida="login-ds"]) .li-guide-lank:focus-visible { outline: 3px solid var(--ds-accent); outline-offset: 2px; }
    :where([data-sida="login-ds"]) .li-guide-ikon { width: 32px; height: 32px; flex: none; border-radius: 10px; background: var(--ds-accent-svag); color: var(--ds-accent); display: flex; align-items: center; justify-content: center; }
    :where([data-sida="login-ds"]) .li-guide-ikon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

    @media (max-width: 420px) { :where([data-sida="login-ds"]) .login-box { padding: 28px 20px; } :where([data-sida="login-ds"]) .login-title { font-size: 2.5rem; } }

/* ---- bastu-neka.php, data-sida="bastu-neka-ds" ---- */
/* Ingen bastubehörighet. Kortet följer designsystemet; fotot bakom har en mörk slöja. */
    :where([data-sida="bastu-neka-ds"]) .deny-wrap { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; box-sizing: border-box; position: relative; }
    :where([data-sida="bastu-neka-ds"]) .deny-wrap::before { content: ''; position: fixed; inset: 0; z-index: 0; background: rgba(7,17,28,.72) url('mist-water.webp') center 40%/cover no-repeat; background-blend-mode: multiply; }
    html[data-tema]:where([data-sida="bastu-neka-ds"]) .deny-box { position: relative; z-index: 1; max-width: 520px; width: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 32px 28px; }
    :where([data-sida="bastu-neka-ds"]) .deny-ikon { width: 64px; height: 64px; border-radius: 18px; background: var(--ds-accent-svag); color: var(--ds-accent); display: flex; align-items: center; justify-content: center; }
    :where([data-sida="bastu-neka-ds"]) .deny-ikon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    html[data-tema]:where([data-sida="bastu-neka-ds"]) .deny-title { margin: 0; font: 400 clamp(2rem, 8vw, 2.5rem)/1 var(--ds-display); letter-spacing: .02em; color: var(--ds-stark); }
    :where([data-sida="bastu-neka-ds"]) .deny-text { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--ds-text); }
    :where([data-sida="bastu-neka-ds"]) .deny-text strong { color: var(--ds-stark); font-weight: 600; }
    :where([data-sida="bastu-neka-ds"]) .deny-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; }
    @media (max-width: 480px) { html[data-tema]:where([data-sida="bastu-neka-ds"]) .deny-box { padding: 26px 20px; } :where([data-sida="bastu-neka-ds"]) .deny-actions { flex-direction: column; align-self: stretch; } }

/* ---- includes/nav.php (gäller alla sidor med sidhuvud och sidfot) ---- */
  html:not([data-inloggad="1"]) .bnav-in,
  html[data-inloggad="1"] .bnav-ut { display: none; }
  .bnav-notis-ikon { position: relative; display: inline-flex; }
  /* Sifferbrickan ligger utanför ikonens ruta och får inte klippas (Tinas fynd 2026-07-29) */
  .bnav-notis-badge {
    position: absolute; top: -6px; right: -12px;
    min-width: 18px; height: 18px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #c9443c; border: 2px solid #07111c; border-radius: 999px;
    color: #fff; font-size: .75rem; font-weight: 700; line-height: 1; box-sizing: border-box;
  }
  .bnav-notis-badge[hidden] { display: none; }
  .bottom-nav .bnav-item .bnav-notis-badge { font-size: .75rem; letter-spacing: 0; }
  html[data-tema="ljus"] .bnav-notis-badge { border-color: #fafcfe; }


/* ---- includes/footer.php, gäller sidorna som använder den gemensamma sidfoten ---- */
:where([data-sidfot]) .footer-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 9px;
    font-size: .9rem;
    line-height: 1.5;
  }
  :where([data-sidfot]) .footer-kontakt a,
  :where([data-sidfot]) .footer-lankar a {
    color: var(--blue-400);
    text-decoration: none;
    border-bottom: 1px solid transparent;
  }
  :where([data-sidfot]) .footer-kontakt a:hover,
  :where([data-sidfot]) .footer-lankar a:hover { border-bottom-color: rgba(110,166,215,.55); }

  :where([data-sidfot]) .footer-lankar {
    display: flex;
    align-items: center;
    gap: 10px 18px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  /* Punkt mellan länkarna, aldrig efter den sista. Den hör till länken och
     kan därför inte hamna ensam på en ny rad. */
  :where([data-sidfot]) .footer-lankar a + a::before {
    content: '·';
    opacity: .4;
    margin-right: 18px;
    color: var(--mist-dim);
  }
  :where([data-sidfot]) .footer-copy {
    font-size: .86rem;
    color: var(--mist-dim);   /* läsbar kontrast i båda lägena (2026-10-30) */
  }

  /* På mobil reserverar body redan ~100 px för den fasta tabbraden. Sidfotens
     egen bottenmarginal blir då dubbelt utrymme och ser ut som ett hål. */
  /* Vid ~900 px bryts sidfotens rad till två — då ska metablocket vänsterställas
     så att det inte hamnar högerställt under en vänsterställd logga. */
  @media (max-width: 900px) {
    :where([data-sidfot]) .footer-inner { align-items: flex-start; }
    :where([data-sidfot]) .footer-meta {
      align-items: flex-start;
      gap: 12px;
      width: 100%;
    }
    :where([data-sidfot]) .footer-lankar {
      justify-content: flex-start;
      gap: 8px 16px;
    }
    :where([data-sidfot]) .footer-lankar a + a::before { margin-right: 16px; }
  }

  /* Mobil: body reserverar redan ~100 px för den fasta tabbraden, så
     sidfotens egna bottenmarginaler blir dubbelt utrymme och ser ut som ett hål. */
  @media (max-width: 760px) {
    :where([data-sidfot]) .footer-inner { padding-bottom: 0; }
    :where([data-sidfot]) .footer { padding-bottom: 14px; }
    :where([data-sidfot]) .footer-kontakt { word-break: break-word; }
  }

  /* Bryts bara om länkarna faktiskt inte får plats — och då hamnar punkten
     kvar hos den andra länken i stället för ensam i radslutet. */
  @media (max-width: 420px) {
    :where([data-sidfot]) .footer-lankar a + a::before { margin-right: 12px; }
  }
    @keyframes notisPanelIn {
      from { opacity: 0; transform: translateY(-6px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes bryggaReveal {
      from { opacity: 0; transform: translateY(-4px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes bridgePulse {
      0%   { transform: scale(.88); opacity: .9; }
      100% { transform: scale(1.65); opacity: 0; }
    }
    @keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ms-blad-upp { from { transform: translateY(24px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes hush-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
  :where([data-sida="medlemssystem"]) .hush-ark { padding: 0; align-items: flex-end; }
  :where([data-sida="medlemssystem"]) .hush-ark-blad {
    width: 100%; max-height: calc(100vh - 40px - var(--sa-top, env(safe-area-inset-top, 0px))); border-radius: 22px 22px 0 0; border-bottom: 0;
    padding-bottom: var(--sa-bottom, env(safe-area-inset-bottom, 0px)); animation: hush-upp .26s cubic-bezier(.2,.8,.2,1);
  }
  :where([data-sida="medlemssystem"]) .hush-ark-handtag { display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--linje); margin: 10px auto 0; }
  :where([data-sida="medlemssystem"]) .hush-ark-fot { position: sticky; bottom: 0; background: inherit; }
  :where([data-sida="medlemssystem"]) .hush-ark-fot .btn-p { flex: 1; }
  @keyframes hush-upp { from { transform: translateY(100%); } to { transform: none; } }
}
@keyframes ft-snurra { to { transform: translateX(-50%) translateY(50px) rotate(360deg); } }
@keyframes mk-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes msg-hopp { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* ================================================================
   Sidhuvud och flikrad i botten: samma på alla sidor (2026-10-31)
   Alla sidor med sidhuvud fyller nu hela iPhone-skärmen (viewport-fit=cover),
   så toppraden flyttas ner under statusfältet och flikraden lägger sig ovanför
   hemknappsfältet, precis som i Mitt Ulvnäs.
   ================================================================ */
header.nav {
  padding-top: var(--sa-top, env(safe-area-inset-top, 0px));
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
@media (max-width: 760px) {
  html[data-tema] :is(.bottom-nav, .ms-botten) {
    background: color-mix(in srgb, var(--ds-yta) 96%, transparent) !important;
    border-top: 1px solid var(--ds-linje) !important;
    -webkit-backdrop-filter: blur(14px) !important; backdrop-filter: blur(14px) !important;
    box-shadow: none !important;
  }
  /* Ingen egen GPU-lager-hack på webbplatsens flikrad. I appen på iPhone gjorde den att raden
     ritades fel under sidbytet (texten försvann en bildruta), medan Mitt Ulvnäs rad inte har den. */
  html[data-tema] .bottom-nav { transform: none !important; -webkit-transform: none !important; will-change: auto !important; }
  /* Samma kolumner i båda raderna, så att ikoner och text står på exakt samma plats */
  html[data-tema] :is(.ms-botten, .bottom-nav) { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}
/* Sidbyte: flikraden visar direkt den nya sidans rad i stället för att tona mellan två bilder.
   I appen på iPhone ritades den gamla bilden ibland fel (utan text) under övergången. */
::view-transition-old(flikrad) { display: none; }
::view-transition-new(flikrad) { animation: none; }

/* ================================================================
   Flikraden i botten (2026-10-31). En komponent för alla sidor:
   includes/flikrad.php skriver ut den både i Mitt Ulvnäs och på webbplatsens sidor.
   ================================================================ */
.flikrad { display: none; }
@media (max-width: 760px) {
  html[data-tema] .flikrad {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000; box-sizing: border-box;
    margin: 0; padding: 6px 4px max(8px, var(--sa-bottom, env(safe-area-inset-bottom, 0px)));
    background: color-mix(in srgb, var(--ds-yta) 96%, transparent);
    border: 0; border-top: 1px solid var(--ds-linje); box-shadow: none;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    view-transition-name: flikrad;
  }
  html[data-tema] .flikrad-flik {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-width: 0; min-height: 54px; box-sizing: border-box; margin: 0; padding: 4px 2px;
    border: 0; border-radius: 0; background: none; color: var(--ds-svag);
    font: 600 13px/1.1 var(--ds-font); letter-spacing: normal; text-transform: none; text-decoration: none;
    cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  }
  html[data-tema] .flikrad-flik.aktiv { color: var(--ds-accent); }
  html[data-tema] .flikrad-ikon { display: block; width: 24px; height: 24px; flex: none; }
  html[data-tema] .flikrad-ikonruta { position: relative; display: inline-flex; }
  html[data-tema] .flikrad-text { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html[data-tema] .flikrad-bricka {
    position: absolute; top: -6px; right: -12px; display: flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 999px;
    border: 2px solid var(--ds-yta); background: var(--ds-fara); color: var(--ds-accent-text);
    font: 700 13px/1 var(--ds-font); letter-spacing: 0;
  }
  html[data-tema] .flikrad-bricka[hidden] { display: none; }
  /* Där sidan själv behöver hela skärmen göms raden */
  html[data-tema] .ms-forum-trad .flikrad,
  html.msg-oppen[data-tema] .flikrad { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  html[data-tema] .flikrad-flik:active { transform: scale(.96); transition: transform .08s ease; }
  html[data-tema] .flikrad-flik.aktiv .flikrad-ikon { animation: flik-in .25s ease-out; }
}
@media (max-width: 760px) {
  /* Mer är en knapp i Mitt Ulvnäs och en länk på övriga sidor: samma text och höjd i båda */
  html[data-tema] button.flikrad-flik { -webkit-appearance: none; appearance: none; font: 600 13px/1.1 var(--ds-font); }
  html[data-tema] .flikrad-flik .flikrad-text { font: inherit; line-height: inherit; letter-spacing: inherit; }
}
@media (max-width: 760px) {
  /* Bara en av raderna syns: inloggad eller utloggad */
  html[data-tema]:not([data-inloggad="1"]) .flikrad.bnav-in,
  html[data-tema][data-inloggad="1"] .flikrad.bnav-ut { display: none; }
}

/* ================================================================
   Toppen som i en vanlig app (2026-10-31): statusfältet är en fast yta i samma färg
   som sidhuvudet (apple-mobile-web-app-status-bar-style: default, theme-color i tema.php).
   Inget ritas under klockan, och sidhuvudet är helt täckande.
   ================================================================ */
html[data-tema] header.nav {
  background: #fafcfe !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html[data-tema="mork"] header.nav { background: #07111b !important; }

/* Flikraden: hela etiketter och samma storlek på alla fem (v18) */
@media (max-width: 760px) {
  html[data-tema] .flikrad .flikrad-text { overflow: visible; text-overflow: clip; max-width: none; }
  html[data-tema] .flikrad .flikrad-flik, html[data-tema] .flikrad .flikrad-flik .flikrad-text { font-family: var(--ds-font) !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.1 !important; letter-spacing: 0 !important; }
}

/* Toppen som i de andra apparna (v18b): sidhuvudet har samma färg som sidan,
   utan skugga, med en tunn linje under. Statusfältet får samma färg (theme-color i tema.php). */
html[data-tema] header.nav { background: var(--ds-bg) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; border-bottom: 1px solid var(--ds-linje) !important; }
html[data-tema="ljus"] header.nav .nav-auth-btn { color: #1f5687; }

/* v20: i appen på iPhone ritades flikraden bara till hälften i 2 eller 3 bildrutor vid varje sidbyte
   (texten och nedre delen saknades). Därför: ingen övergång mellan sidor i appen, och en helt
   täckande flikrad utan oskärpa överallt. */
@media (display-mode: standalone) {
  @view-transition { navigation: none; }
}
html.app-lage { view-transition-name: none; }
html.app-lage :is(header.nav, .flikrad, .ms-botten, .bottom-nav) { view-transition-name: none !important; }
@media (max-width: 760px) {
  html[data-tema] .flikrad { background: var(--ds-yta) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

/* v22: hamburgaren lika stor på alla sidor som i Mitt Ulvnäs */
html[data-tema] header.nav .nav-toggle { font-size: 1.3rem !important; }
/* v22: klockan och profilknappen står på samma plats på alla sidor. På de öppna sidorna bygger
   nav-status.js profildelen, och där var avståndet 8 px i stället för 10 px. */
html[data-tema] header.nav .ms-profil { gap: 10px !important; }

/* Utskrift (2026-11-01): flikraden, PDF-visaren och sidfoten skrivs inte ut */
@media print {
  .flikrad, .ms-botten, .bottom-nav, #pdf-visare, .hoppa-till { display: none !important; }
  :where([data-sida="manual-ds"]) :is(footer, .site-footer, .pdf-lank) { display: none !important; }
}
@media print {
  :where([data-sida="manual-ds"]) :is([data-sidfot], .sidfot, body > footer) { display: none !important; }
  :where([data-sida="manual-ds"]) .manual :is(h2, h3) { break-after: avoid; page-break-after: avoid; }
  :where([data-sida="manual-ds"]) .manual :is(li, .tips, tr) { break-inside: avoid; }
}
@media print { html[data-tema][data-sida="manual-ds"], html[data-tema][data-sida="manual-ds"] body { background: #fff !important; } }
/* 2. Hemsidans sidor samlade i en meny på dator */
@media (min-width: 761px) {
  header.nav .nav-links.nav-har-samlad > :not(.nav-samlad) { display: none !important; }
}
@media (max-width: 760px) {
  header.nav .nav-samlad { display: none !important; }
}
html[data-tema] .nav-samlad-rubrik {
  display: block; margin: 6px 4px 0; padding: 12px 8px 6px; border-top: 1px solid var(--ds-linje);
  font: 600 12px/1.2 var(--ds-cond); letter-spacing: .09em; text-transform: uppercase; color: var(--ds-svag);
}
@media (min-width: 761px) {
  header.nav .nav-samlad .nav-dropdown-menu { left: auto; right: 0; animation: samlad-in .2s ease forwards; }
}
@keyframes samlad-in { 0% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 1; transform: translateY(0); } }
/* Galleriet: reservera plats medan rutnätet byggs, så att innehållet nedanför inte hoppar */
:where([data-sida="galleri-ds"]) .gallery:empty { min-height: 70vh; }

/* Startbilden (v28): mindre fil i mobilen. Laddas i förväg från sidhuvudet. */
:root { --hero-bild: url('hero-bg.webp'); }
@media (max-width: 760px) { :root { --hero-bild: url('hero-bg-828.webp'); } }
/* Ingen rörelse i bakgrundsbilden för den som valt Reducera rörelse (WCAG 2.2.2) */
@media (prefers-reduced-motion: reduce) {
  .hero::before, .page-hero::before { animation: none !important; }
  html { scroll-behavior: auto !important; }
}
/* Text på startbilden (v28, WCAG 1.4.3): mörkare överkant och skugga bakom texten */
html[data-tema]:where([data-sida="index-ds"]) .hero .eyebrow { color: #fff !important; text-shadow: 0 1px 3px rgba(0,0,0,.75), 0 0 12px rgba(0,0,0,.45); }
html[data-tema]:where([data-sida="index-ds"]) .hero :is(h1, .hero-sub, p) { text-shadow: 0 1px 3px rgba(0,0,0,.6), 0 0 14px rgba(0,0,0,.35); }
@media (max-width: 720px) {
  html[data-tema]:where([data-sida="index-ds"]) .hero::before {
    background:
      linear-gradient(180deg, rgba(4,10,18,.62) 0%, rgba(4,10,18,.42) 45%, rgba(4,10,18,.82) 100%),
      var(--hero-bild) center 40% / cover !important;
  }
}
html[data-tema]:where([data-sida="index-ds"]) .break-quote-attribution { color: #d5e2ee !important; text-shadow: 0 1px 3px rgba(0,0,0,.6); }

/* Kanter på textfält med minst 3:1 kontrast (v28, WCAG 1.4.11) */
html[data-tema] :is(.ds-falt, .ft-falt, .kod-input, .login-field input, textarea.ds-falt, .mr-sok .ds-falt, #sokInput, #doc-search-input),
html[data-tema] :where([data-sida="medlemssystem"]) .ms-sida :is(input[type=text], input[type=email], input[type=tel], input[type=search], input:not([type]), textarea, select):not([class*="msg-"]):not(.ds-falt-ingen) {
  border-color: var(--ds-falt-kant, #8296aa) !important;
}
html[data-tema] :is(.ds-falt, .ft-falt, .kod-input, .login-field input, #sokInput, #doc-search-input):focus,
html[data-tema] :where([data-sida="medlemssystem"]) .ms-sida :is(input, textarea, select):focus { border-color: var(--ds-accent) !important; }
:where([data-sida="login-ds"]) .kod-etikett { display: block; margin-bottom: 8px; text-align: left; font: 600 13px/1.2 var(--ds-cond); letter-spacing: .09em; text-transform: uppercase; color: var(--ds-svag); }
:where([data-sida="login-ds"]) .kod-input::placeholder { color: var(--ds-text) !important; opacity: .7; }
/* Fokus hamnar aldrig bakom sidhuvudet eller bottenraden (v28, WCAG 2.4.11) */
html { scroll-padding-top: 96px; }
@media (max-width: 760px) { html { scroll-padding-bottom: calc(96px + var(--sa-bottom, env(safe-area-inset-bottom, 0px))); } }
:root[data-tema] .ms-avatar[class*=" av-"] { background: var(--av-farg-mork) !important; color: #fff !important; }
.mk-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── v33 (2026-11-02): smala skärmar, 320 px (granskning A6) ── */
@media (max-width: 380px) {
  html[data-tema] .footer .tema-valjare { flex-direction: column; align-items: stretch; }
  html[data-tema] .footer .tema-valjare-knappar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html[data-tema] .footer .tema-knapp { min-width: 0; padding-left: 6px; padding-right: 6px; }
}
@media (max-width: 359px) {
  html[data-tema] .flikrad .flikrad-flik .flikrad-text { font-size: 11px !important; }
}
/* Länkar i löptext stryks under, så att de inte bara skiljs med färg (A13) */
html[data-tema] :is(.p-fot, .leaflet-control-attribution) a { text-decoration: underline; text-underline-offset: 2px; }
/* Startbildens långsamma zoom går en gång och stannar (A17) */
html[data-tema] :is(.hero, .page-hero)::before { animation-iteration-count: 1 !important; animation-fill-mode: forwards !important; }
/* Inloggningen: rubriken är en h1 och det finns en väg tillbaka (A12, U6) */
html[data-tema]:where([data-sida="login-ds"]) h1.login-title { margin-top: 0; }
html[data-tema]:where([data-sida="login-ds"]) .login-logo-lank { display: inline-block; border-radius: 12px; }
html[data-tema]:where([data-sida="login-ds"]) .login-tillbaka { margin: 18px 0 0; text-align: center; }
html[data-tema]:where([data-sida="login-ds"]) .login-tillbaka a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--ds-accent); text-decoration: underline; text-underline-offset: 3px; }

/* ── v34 (2026-11-02): integritetspolicyns tabeller ── */
html[data-tema]:where([data-sida="integritetspolicy-ds"]) .policy .policy-tabell-wrap { margin: 8px 0 18px; overflow-x: auto; }
html[data-tema]:where([data-sida="integritetspolicy-ds"]) .policy .policy-tabell { width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.5; }
html[data-tema]:where([data-sida="integritetspolicy-ds"]) .policy .policy-tabell :is(th, td) { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--ds-linje); text-align: left; vertical-align: top; color: var(--ds-text); }
html[data-tema]:where([data-sida="integritetspolicy-ds"]) .policy .policy-tabell th { font-weight: 600; color: var(--ds-stark); }
html[data-tema]:where([data-sida="integritetspolicy-ds"]) .policy .policy-tabell td:first-child { font-weight: 600; color: var(--ds-stark); min-width: 9rem; }

/* ── Bekräftelsearket (v38): grundutseende för Förvaltning och Liggaren. Mitt Ulvnäs har egna regler i medlem.css ── */
.ms-bekrafta { position: fixed; inset: 0; z-index: 2147483100; display: flex; align-items: center; justify-content: center; padding: 24px; font-family: var(--ds-font); }
.ms-bekrafta .ft-ark-bakgrund { position: absolute; inset: 0; background: color-mix(in srgb, var(--ds-bg) 72%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ms-bekrafta .ft-ark-blad { position: relative; width: min(460px, 100%); background: var(--ds-yta); color: var(--ds-text); border: 1px solid var(--ds-linje); border-radius: var(--ds-radie); box-shadow: var(--ds-skugga); overflow: hidden; }
.ms-bekrafta .ft-ark-handtag { display: none; }
.ms-bekrafta .ft-ark-huvud { padding: 22px 24px 4px; }
.ms-bekrafta .ft-ark-huvud h3 { margin: 0; font: 400 1.75rem/1.05 var(--ds-display); letter-spacing: .02em; text-transform: uppercase; color: var(--ds-stark); }
.ms-bekrafta .ft-ark-innehall { padding: 6px 24px 8px; }
.ms-bekrafta .ft-ark-innehall p { margin: 0; line-height: 1.5; font-size: 16px; white-space: pre-line; }
.ms-bekrafta .ft-ark-fot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding: 16px 24px 20px; border-top: 1px solid var(--ds-linje); margin-top: 10px; }
@media (max-width: 600px) {
  .ms-bekrafta { padding: 0; align-items: flex-end; }
  .ms-bekrafta .ft-ark-blad { width: 100%; border-radius: var(--ds-radie) var(--ds-radie) 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .ms-bekrafta .ft-ark-handtag { display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--ds-linje-stark); margin: 10px auto 0; }
}

/* ── v38 (T19): dimbilden i mobilstorlek, 25 KB i stället för 83 KB ── */
@media (max-width: 700px) {
  html[data-tema]:where([data-sida="index-ds"]) .break-section { background-image: url('mist-water-828.webp'); }
  :where([data-sida="om-ds"], [data-sida="vatten-ds"], [data-sida="grannsamverkan-ds"]) .page-hero::before { background-image: url('mist-water-828.webp') !important; }
  html[data-tema]:where([data-sida="styrelse-ds"]) .mote-band { background-image: linear-gradient(rgba(7,17,28,.78), rgba(7,17,28,.78)), url('mist-water-828.webp'); }
  :where([data-sida="login-ds"]) .login-wrap::before { background-image: url('mist-water-828.webp'); }
  :where([data-sida="bastu-neka-ds"]) .deny-wrap::before { background-image: url('mist-water-828.webp'); }
}

/* v40 (slutgranskningen A11y M1): fotobandet på Styrelse och kontakt får mörkare ton, vit etikett och en fylld knapp */
html[data-tema]:where([data-sida="styrelse-ds"]) .mote-band .eyebrow { color: #ffffff; }
html[data-tema]:where([data-sida="styrelse-ds"]) .mote-band .ds-knapp { background: #ffffff; border-color: #ffffff; color: #0e2134 !important; }
html[data-tema]:where([data-sida="styrelse-ds"]) .mote-band .ds-knapp:hover { background: #e7f0f8; border-color: #e7f0f8; }

/* v40 (slutgranskningen UX L1, A11y L4): temaväljaren i sidfoten radbryts i stället för att klippas */
@media (max-width: 520px) {
  html[data-tema] .footer .tema-valjare { flex-direction: column; align-items: stretch; }
  html[data-tema] .footer .tema-valjare-knappar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html[data-tema] .footer .tema-knapp { min-width: 0; padding-left: 6px; padding-right: 6px; }
}
html[data-tema] .footer .tema-valjare-knappar { max-width: 100%; }
html[data-tema] .footer .tema-knapp span { overflow-wrap: anywhere; }
/* Ordmärket i sidhuvudet krymper på de smalaste skärmarna, så att det inte klipps */
@media (max-width: 340px) {
  html[data-tema] .brand-text { min-width: 0; }
  html[data-tema] .brand-text > * { font-size: 85%; }
}
:where([data-sida="login-ds"]) .login-kod-val { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 14px 0 6px; }

/* v40 (slutgranskningen A11y L9): bakgrundsbilderna rör sig en gång i fem sekunder och stannar sedan */
.hero::before { animation: kenBurns 5s ease-out 1 both !important; }
.page-hero::before { animation: kenBurns 5s ease-out 1 both !important; animation-delay: 0s !important; }
@media (prefers-reduced-motion: reduce) { .hero::before, .page-hero::before { animation: none !important; } }
@media (max-width: 520px) {
  html[data-tema] .footer .tema-knapp { flex-direction: column; gap: 4px; padding-top: 8px; padding-bottom: 8px; text-align: center; }
}