/* Sodefjed-app — bygget på «Sodefjed Design System».
   Sørlandet kystpalett: whitewash & driftwood, sjø & fjord, eng, strandnellik, sol. */

:root {
  /* Nøytraler */
  --white-0:#fff; --shell-50:#fbf7ef; --shell-100:#f4ede0; --sand-200:#e9dcc6;
  --sand-300:#d8c4a3; --driftwood-400:#b7a488; --driftwood-500:#8c7a63;
  --stone-600:#5e5445; --ink-800:#2c2a24; --ink-900:#1b1a15;
  /* Sjø & fjord */
  --sea-50:#eaf3f7; --sea-100:#cfe4ee; --sea-200:#a6cedf; --sea-300:#6fa9c6;
  --sea-400:#3e82a8; --sea-500:#21688f; --sea-600:#175472; --sea-700:#103f57; --sea-800:#0b2e40;
  --sky-200:#bfe0ea; --sky-300:#93cbd8;
  /* Eng / sol / blomst / bøye */
  --meadow-200:#cdd9b0; --meadow-300:#a9c48a; --meadow-400:#86a860; --meadow-500:#64863f;
  --sun-200:#fbe9b2; --sun-300:#f7d46b; --sun-400:#f2c14e; --sun-500:#e0a82e;
  --bloom-200:#f7d7df; --bloom-300:#f0b9c7; --bloom-400:#e38da4; --bloom-500:#ce6b86;
  --coral-400:#d76551; --coral-500:#c64a38; --coral-600:#a93b2b;
  /* Semantisk */
  --page:var(--shell-50); --card:var(--white-0); --sunk:var(--shell-100);
  --heading:var(--ink-900); --body:var(--ink-800); --muted:var(--stone-600); --soft:var(--driftwood-500);
  --primary:var(--sea-500); --border:var(--sand-200); --border-strong:var(--sand-300);
  /* Gren-farger */
  --branch-Lisbet:var(--meadow-500); --branch-Sigurd:var(--coral-400); --branch-Turid:var(--sun-400);
  /* Fonter */
  --font-display:'Newsreader',Georgia,serif;
  --font-sans:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'Spline Sans Mono',ui-monospace,Menlo,monospace;
  /* Radier / skygger */
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px; --r-pill:999px;
  --sh-sm:0 1px 3px rgba(16,63,87,.08),0 1px 2px rgba(16,63,87,.06);
  --sh-md:0 4px 16px -4px rgba(16,63,87,.14),0 2px 6px -2px rgba(16,63,87,.08);
  --sh-lg:0 12px 32px -8px rgba(16,63,87,.18),0 4px 12px -6px rgba(16,63,87,.10);
  --screen-max:460px;
}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-sans); font-size:16px; line-height:1.5; color:var(--body);
  background:var(--page); min-height:100vh; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--font-display); color:var(--heading); font-weight:500; line-height:1.1; letter-spacing:-.02em; margin:0 0 .4em; text-wrap:balance;}
a{color:var(--sea-600); text-decoration:none;}
a:hover{color:var(--sea-800);}
.hidden{display:none !important;}
.view{min-height:100vh;}
::selection{background:var(--sun-200); color:var(--ink-900);}
.eyebrow{font-family:var(--font-mono); font-size:.72rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--soft);}

/* App er en smal mobil-kolonne, sentrert */
.app-shell{max-width:var(--screen-max); margin:0 auto; background:var(--page); min-height:100vh; box-shadow:var(--sh-lg);}

/* ---------- Auth ---------- */
#auth-view,#pending-view{display:flex; align-items:center; justify-content:center; padding:24px; min-height:100vh;}
.auth-card{background:var(--card); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--sh-lg); padding:38px 30px; width:100%; max-width:400px; text-align:center;}
.brand-mark{display:flex; flex-direction:column; align-items:center; gap:6px; margin-bottom:16px;}
.brand-mark h1{font-size:2.3rem; margin:2px 0 0;}
.tagline{color:var(--muted); margin:0; font-size:.9rem;}
.sun-badge{width:46px; height:46px; border-radius:50%; background:radial-gradient(circle at 40% 38%,var(--sun-300),var(--sun-500)); box-shadow:0 0 0 6px var(--sun-200);}
.auth-lead{color:var(--muted); margin:6px 0 22px;}
.g-icon{display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:#fff; color:#4285F4; font-weight:700; margin-right:8px; font-family:var(--font-display);}
.auth-sep{display:flex; align-items:center; gap:12px; color:var(--soft); margin:18px 0; font-size:.8rem;}
.auth-sep::before,.auth-sep::after{content:""; flex:1; height:1px; background:var(--border);}
.email-form{display:flex; flex-direction:column; gap:10px;}
.email-form input{padding:12px 14px; border:1px solid var(--border); border-radius:var(--r-sm); font-family:var(--font-sans); font-size:1rem; background:var(--sunk);}
.email-form input:focus{outline:2px solid var(--sea-300); border-color:var(--sea-400);}
.email-actions{display:flex; gap:10px;} .email-actions .btn{flex:1;}
.msg{min-height:1.2em; margin:12px 0 0; font-size:.88rem;} .msg.err{color:var(--coral-600);} .msg.ok{color:var(--meadow-500);}

/* ---------- Knapper ---------- */
.btn{font-family:var(--font-sans); font-weight:600; font-size:.95rem; border:none; border-radius:var(--r-md); padding:11px 18px; cursor:pointer; transition:transform .08s,box-shadow .14s,background .14s; display:inline-flex; align-items:center; justify-content:center; gap:8px;}
.btn:active{transform:translateY(1px);}
.btn-lg{width:100%; padding:14px 18px; font-size:1.02rem;}
.btn-sm{padding:7px 12px; font-size:.85rem;}
.btn-primary{background:var(--sea-500); color:#fff; box-shadow:var(--sh-md);}
.btn-primary:hover{background:var(--sea-600);}
.btn-soft{background:var(--sea-100); color:var(--sea-700);}
.btn-ghost{background:transparent; color:var(--muted); border:1px solid var(--border);}
.btn-sun{background:var(--sun-400); color:var(--ink-900);}

/* ---------- Topbar + nav ---------- */
.topbar{position:sticky; top:0; z-index:100; background:rgba(251,247,239,.9); backdrop-filter:blur(8px); border-bottom:1px solid var(--border);}
.topbar-inner{max-width:var(--screen-max); margin:0 auto; display:flex; align-items:center; gap:10px; padding:10px 18px;}
.brand-mini{font-family:var(--font-display); font-weight:600; font-size:1.15rem; color:var(--sea-700); display:flex; align-items:center; gap:8px;}
.brand-mini .dot{width:10px; height:10px; border-radius:50%; background:var(--sun-400);}
.topbar-spacer{flex:1;}
.who{font-size:.82rem; color:var(--muted);}
.nav-toggle{background:transparent; border:none; color:var(--sea-700); font-size:1.35rem; cursor:pointer;}
.nav{max-width:var(--screen-max); margin:0 auto; padding:10px 14px 0; display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch;}
.nav::-webkit-scrollbar{display:none;}
.nav-link{font-family:var(--font-sans); font-weight:500; font-size:.86rem; color:var(--muted); padding:7px 14px; border-radius:var(--r-pill); cursor:pointer; background:var(--card); border:1px solid var(--border); white-space:nowrap;}
.nav-link:hover{background:var(--sea-50);}
.nav-link.active{background:var(--sea-500); color:#fff; border-color:var(--sea-500);}

.main{max-width:var(--screen-max); margin:0 auto; padding-bottom:64px;}
.loading{color:var(--soft); text-align:center; padding:60px 0;}
.section{display:none;} .section.active{display:block; animation:fade .25s ease;}
@keyframes fade{from{opacity:0; transform:translateY(6px);}to{opacity:1; transform:none;}}
.section-pad{padding:20px 20px 0;}
.section h2{font-size:1.55rem; margin-bottom:4px;} .section-lead{color:var(--muted); margin:0 0 18px; font-size:.95rem;}

/* ---------- Hjem: hero ---------- */
.hero{position:relative; height:260px; background-size:cover; background-position:center 40%; display:flex; flex-direction:column; justify-content:flex-end; padding:0 20px 22px;}
.hero-scrim{position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,46,64,.05) 30%,rgba(11,46,64,.55) 100%);}
.hero-content{position:relative;}
.hero-eyebrow{color:rgba(255,255,255,.92); margin-bottom:6px;}
.hero-title{font-family:var(--font-display); font-weight:500; font-size:2.15rem; line-height:1.05; color:#fff; margin:0; text-shadow:0 1px 10px rgba(11,46,64,.35);}

/* Hjem: «I dag ved sjøen»-kort */
.sea-card{background:linear-gradient(150deg,var(--sea-700),var(--sea-800)); color:#fff; border-radius:var(--r-xl); padding:20px 22px; box-shadow:var(--sh-md); margin-bottom:18px;}
.sea-card-top{display:flex; justify-content:space-between; align-items:flex-start;}
.sea-eyebrow{color:var(--sea-200); margin-bottom:6px;}
.sea-temp-row{display:flex; align-items:baseline; gap:10px;}
.sea-temp{font-family:var(--font-display); font-size:2.6rem; line-height:1; color:#fff;}
.sea-temp-label{color:var(--sea-100); font-size:.9rem;}
.sea-sun{color:var(--sun-300);}
.sea-card-bottom{display:flex; gap:20px; margin-top:16px; color:var(--sea-100); font-size:.85rem; flex-wrap:wrap;}
.sea-stat{display:inline-flex; align-items:center; gap:6px;}
.sea-stat svg{color:var(--sea-200);}
.sea-card-src{margin-top:12px; padding-top:10px; border-top:1px solid rgba(255,255,255,.12); font-size:.72rem; color:var(--sea-200); font-family:var(--font-mono);}

/* Hjem: snarvei-fliser */
.tiles{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:10px 0 22px;}
.tile{background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:14px; cursor:pointer; box-shadow:var(--sh-sm); transition:transform .1s,box-shadow .14s; display:flex; flex-direction:column; gap:10px;}
.tile:hover{transform:translateY(-2px); box-shadow:var(--sh-md);}
.tile-ic{width:44px; height:44px; border-radius:var(--r-md); display:inline-flex; align-items:center; justify-content:center;}
.tile-ic.sea{background:var(--sea-100); color:var(--sea-600);}
.tile-ic.meadow{background:var(--meadow-200); color:var(--meadow-500);}
.tile-ic.sun{background:var(--sun-200); color:var(--sun-500);}
.tile-ic.bloom{background:var(--bloom-200); color:var(--bloom-500);}
.tile-label{font-size:.98rem; font-weight:600; color:var(--body);}
.tile-sub{font-size:.78rem; color:var(--muted);}

/* Feature-kort (Siste nytt-inngang) */
.feature{background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh-sm); padding:16px; display:flex; gap:14px; align-items:center; cursor:pointer; transition:transform .1s,box-shadow .14s; margin-bottom:8px;}
.feature:hover{transform:translateY(-2px); box-shadow:var(--sh-md);}
.feature-ic{width:52px; height:52px; border-radius:var(--r-md); flex:0 0 auto; background:linear-gradient(135deg,var(--bloom-300),var(--sun-300)); display:grid; place-items:center; color:#fff;}
.feature-main{flex:1;} .feature-main strong{font-size:1rem; display:block;}
.feature-main .sub{font-size:.82rem; color:var(--muted); margin-top:2px;}

/* ---------- Innholdskort (seksjoner) ---------- */
.grid{display:grid; grid-template-columns:1fr; gap:12px;}
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px; box-shadow:var(--sh-sm); transition:box-shadow .14s,transform .1s;}
.card.clickable{cursor:pointer;} .card.clickable:hover{box-shadow:var(--sh-md); transform:translateY(-2px);}
.card h3{font-size:1.05rem; margin-bottom:5px;}
.card .kicker{font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color:var(--sea-400); font-weight:500;}
.card .desc{color:var(--muted); font-size:.9rem; margin:5px 0 0;}

/* Fakta */
.facts{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:22px;}
.fact{background:var(--sunk); border:1px solid var(--border); border-radius:var(--r-md); padding:12px 14px;}
.fact .label{font-family:var(--font-mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; color:var(--soft);}
.fact .value{font-family:var(--font-display); font-weight:500; font-size:1rem; margin-top:3px; color:var(--heading);}

/* ---------- Kalender ---------- */
.legend{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:16px; font-size:.82rem;}
.legend span{display:flex; align-items:center; gap:6px;} .dot{width:11px; height:11px; border-radius:50%; display:inline-block;}
.cal-year{margin-bottom:20px;} .cal-year h3{font-family:var(--font-mono); color:var(--sea-600); font-size:1.2rem;}
.cal-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--card); border:1px solid var(--border); border-left-width:5px; border-radius:var(--r-md); padding:12px 14px; margin-bottom:9px;}
.cal-row .dates{font-family:var(--font-mono); font-size:.92rem; min-width:150px;}
.cal-row .lbl{font-weight:600;}
.cal-row .note{color:var(--muted); font-size:.82rem; width:100%;}
.branch-Lisbet{border-left-color:var(--branch-Lisbet);} .branch-Sigurd{border-left-color:var(--branch-Sigurd);} .branch-Turid{border-left-color:var(--branch-Turid);}
.branch-pill{font-size:.72rem; font-weight:600; padding:3px 10px; border-radius:var(--r-pill);}
.branch-pill.Lisbet{background:var(--meadow-200); color:#33471f;} .branch-pill.Sigurd{background:#f6d3ca; color:#7a2c1c;} .branch-pill.Turid{background:var(--sun-200); color:#6b5212;}

/* ---------- Eiere ---------- */
.table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--card);}
table.owners{width:100%; border-collapse:collapse; min-width:560px;}
table.owners th,table.owners td{text-align:left; padding:11px 13px; border-bottom:1px solid var(--border); font-size:.9rem;}
table.owners th{background:var(--sea-50); font-weight:600; color:var(--sea-700); font-family:var(--font-sans);}
table.owners tr:last-child td{border-bottom:none;}
.member-row{display:flex; align-items:center; gap:12px; padding:11px 13px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--card); margin-bottom:8px;}
.avatar{width:38px; height:38px; border-radius:50%; background:var(--sea-100); color:var(--sea-700); display:grid; place-items:center; font-family:var(--font-display); font-weight:600;}
.badge{font-size:.7rem; padding:2px 8px; border-radius:var(--r-pill);} .badge.admin{background:var(--sun-400); color:var(--ink-900);} .badge.pending{background:var(--sun-200); color:#6b5212;}

/* ---------- Siste nytt ---------- */
.fb-btn{display:flex; align-items:center; justify-content:center; gap:10px; width:100%; background:#1877F2; color:#fff; padding:14px; border-radius:var(--r-md); font-weight:600; font-family:var(--font-sans); margin-bottom:20px; box-shadow:var(--sh-md);}
.fb-btn:hover{background:#0d63d4; color:#fff;}
.news-item{background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px; box-shadow:var(--sh-sm); margin-bottom:12px;}
.news-head{display:flex; align-items:center; gap:8px; margin-bottom:6px;}
.news-src{font-family:var(--font-mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; padding:2px 8px; border-radius:var(--r-pill);}
.news-src.facebook{background:#e7f0fe; color:#1877F2;} .news-src.email{background:var(--sea-100); color:var(--sea-700);} .news-src.note{background:var(--sun-200); color:#6b5212;}
.news-date{font-family:var(--font-mono); font-size:.72rem; color:var(--soft); margin-left:auto;}
.news-item h3{font-size:1.05rem; margin-bottom:5px;} .news-item p{margin:0; color:var(--body); font-size:.92rem;}
.news-item a.more{font-size:.82rem;}

/* ---------- Profil ---------- */
.form{display:flex; flex-direction:column; gap:12px;}
.form label{font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--soft);}
.form input,.form select,.form textarea{padding:11px 13px; border:1px solid var(--border); border-radius:var(--r-sm); font-family:var(--font-sans); font-size:1rem; background:var(--sunk);}

/* ---------- Modal / markdown ---------- */
.modal{position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:16px;}
.modal-bg{position:absolute; inset:0; background:rgba(11,46,64,.5); backdrop-filter:blur(2px);}
.modal-card{position:relative; background:var(--card); border-radius:var(--r-xl); box-shadow:var(--sh-lg); max-width:640px; width:100%; max-height:86vh; overflow-y:auto; padding:30px 30px;}
.modal-close{position:absolute; top:14px; right:16px; background:var(--sunk); border:none; width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:1rem; color:var(--muted);}
.markdown{color:var(--body); line-height:1.7;}
.markdown h1{font-size:1.5rem; margin-top:0;} .markdown h2{font-size:1.2rem; margin-top:1.2em;} .markdown h3{font-size:1.05rem;}
.markdown table{border-collapse:collapse; width:100%; margin:12px 0; font-size:.88rem;}
.markdown th,.markdown td{border:1px solid var(--border); padding:7px 10px; text-align:left;} .markdown th{background:var(--sea-50);}
.markdown code{background:var(--sea-50); padding:1px 6px; border-radius:6px; font-family:var(--font-mono); font-size:.85em;}
.markdown blockquote{border-left:3px solid var(--sun-400); margin:12px 0; padding:4px 16px; color:var(--muted); background:var(--sunk); border-radius:0 8px 8px 0;}
.markdown ul,.markdown ol{padding-left:22px;}

/* ---------- Meny-knapp + drawer ---------- */
.menu-btn{position:fixed; top:14px; right:calc((100vw - min(100vw,460px))/2 + 14px); z-index:200; width:42px; height:42px; border-radius:50%; border:none; background:rgba(16,63,87,.82); color:#fff; font-size:1.2rem; cursor:pointer; box-shadow:var(--sh-md); backdrop-filter:blur(4px);}
.drawer{position:fixed; inset:0; z-index:900;}
.drawer-bg{position:absolute; inset:0; background:rgba(11,46,64,.45); backdrop-filter:blur(2px);}
.drawer-panel{position:absolute; top:0; right:0; height:100%; width:min(310px,84vw); background:var(--page); box-shadow:var(--sh-lg); padding:20px; display:flex; flex-direction:column; overflow-y:auto; animation:slidein .22s ease;}
@keyframes slidein{from{transform:translateX(100%);}to{transform:none;}}
.drawer-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px;}
.drawer-x{background:var(--sunk); border:none; width:32px; height:32px; border-radius:50%; cursor:pointer; color:var(--muted); font-size:.95rem;}
.drawer .who{margin-bottom:14px; color:var(--muted); font-size:.85rem;}
.drawer-links{display:flex; flex-direction:column; gap:2px;}
.drawer-link{padding:11px 12px; border-radius:var(--r-md); color:var(--body); font-weight:500; cursor:pointer; font-size:1rem;}
.drawer-link:hover{background:var(--sunk);}
.drawer-link.active{background:var(--sea-500); color:#fff;}

@media (max-width:520px){ .facts{grid-template-columns:1fr 1fr;} }