/* Lørenpynten dørlås — «Lund» (papir + salvie). Samme tema som dørklokke-appen.
   Beholder ALLE klassenavn fra originalen slik at app.html/index.html og JS
   virker uendret — bytt kun ut denne fila. Emoji i markup byttes separat (se LES-MEG). */

/* Selv-hostede fonter (GDPR: ingen ekstern forespørsel; respekterer CSP). */
@import url('../fonts/fonts.css');

:root{
  --bg:#f0f2ec; --surface:#ffffff; --surface-2:#fafbf7;
  --ink:#232821; --muted:#616a5c; --faint:#8a9081; --dim:#8a9081;
  --hair:#e4e8db; --line:#e4e8db; --hair-soft:#eef1e8;
  --accent:#4f6a4a; --accent-d:#3d5539; --accent-soft:#e7ede2;
  --open:#5f8a55; --open-d:#4f7a47;
  --ok:#3d5539; --ok-soft:#e6efe1;
  --warn:#8a6a1f; --warn-soft:#f6ecd8;
  --red:#b23b34; --danger-soft:#f6e6e5;
  --txt:#232821;
  --serif:'Source Serif 4',Georgia,serif;
  --sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  /* Bakoverkompat med gamle token-navn (om noe fortsatt refererer dem) */
  --lime:#4f6a4a; --lime-d:#3d5539; --ink-on-lime:#ffffff;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);min-height:100vh;-webkit-tap-highlight-color:transparent}
.hidden{display:none!important}
button{font-family:inherit;cursor:pointer}
a{color:var(--accent)}a:hover{color:var(--accent-d)}

/* Login */
.login{max-width:420px;margin:0 auto;padding:56px 22px;min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.login .logo{width:60px;height:60px;border-radius:14px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:28px;font-weight:600;margin-bottom:22px}
.login h1{font-family:var(--serif);font-size:2rem;font-weight:600;letter-spacing:-.01em}
.login .tag{color:var(--muted);font-size:.95rem;margin:4px 0 30px}
label.fld{display:block;font-size:.82rem;font-weight:600;color:var(--muted);margin:0 0 7px}
.inp{width:100%;padding:15px 16px;border:1.5px solid var(--hair);border-radius:14px;font-size:1.05rem;font-family:var(--sans);background:var(--surface);color:var(--ink);margin-bottom:16px}
.inp:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.btn-lime{width:100%;padding:16px;border:none;border-radius:12px;font-size:1.05rem;font-weight:600;background:var(--accent);color:#fff;min-height:56px;transition:background .15s}
.btn-lime:hover{background:var(--accent-d)}
.btn-lime:disabled{background:var(--faint);cursor:not-allowed}
.btn-ghost{width:100%;padding:15px;border:1px solid var(--hair);border-radius:12px;font-size:1rem;font-weight:600;background:var(--surface);color:var(--ink);margin-top:10px}
.note{font-size:.82rem;color:var(--faint);margin-top:16px;text-align:center;line-height:1.5}

/* App shell */
.appbar{position:sticky;top:0;z-index:30;background:var(--surface);border-bottom:1px solid var(--hair);padding:14px 16px 12px;display:flex;align-items:center;gap:11px}
.appbar .brandlogo{width:34px;height:34px;border-radius:9px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:19px;font-weight:600;flex-shrink:0}
.appbar .title{font-family:var(--serif);font-weight:600;font-size:1.05rem;line-height:1.1}
.appbar .title small{display:block;color:var(--faint);font-family:var(--sans);font-weight:400;font-size:.74rem;margin-top:2px}
.appbar .sp{flex:1}
.ava-me{width:38px;height:38px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-family:var(--serif);font-weight:600;display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0;border:none}

.wrap{max-width:560px;margin:0 auto;padding:12px 16px 110px}
.page-h{font-family:var(--serif);font-size:1.8rem;font-weight:600;letter-spacing:-.01em;margin:10px 0 2px}
.page-sub{color:var(--muted);font-size:.95rem;margin-bottom:18px;line-height:1.45}
.empty{color:var(--faint);text-align:center;padding:48px 16px;font-size:.98rem;line-height:1.6}
.sec-lbl{font-size:.74rem;font-weight:600;color:var(--faint);letter-spacing:.1em;text-transform:uppercase;margin:22px 0 8px}

/* Dør-rader = kort (som dørklokkas seksjonsliste) */
.rows{display:flex;flex-direction:column;gap:10px}
.row{display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--hair);border-radius:16px;padding:13px 13px 13px 17px;transition:border-color .15s,box-shadow .15s}
.row:hover{border-color:#cdd6c3;box-shadow:0 6px 18px -12px rgba(35,40,33,.4)}
.ava{width:52px;height:52px;border-radius:14px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:600;font-size:1rem;flex-shrink:0;position:relative}
.ava .live-dot{position:absolute;top:-3px;right:-3px;width:13px;height:13px;border-radius:50%;background:var(--open);border:3px solid var(--surface)}
.row .meta{flex:1;min-width:0}
.row .nm{font-family:var(--serif);font-weight:600;font-size:1.15rem;line-height:1.2;color:var(--ink)}
.row .sub{color:var(--muted);font-size:.85rem;margin-top:3px;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.mini-pill{font-size:.64rem;font-weight:700;letter-spacing:.04em;border-radius:999px;padding:2px 8px;border:1px solid}
.mini-pill.live{color:var(--ok);border-color:#bcd0b8;background:var(--ok-soft)}
.mini-pill.fel{color:var(--muted);border-color:var(--hair);background:var(--hair-soft)}
.open-btn{flex-shrink:0;border:none;border-radius:12px;padding:0 24px;height:52px;font-size:1.02rem;font-weight:600;background:var(--open);color:#fff;min-width:92px;transition:background .15s}
.open-btn:hover{background:var(--open-d)}
.open-btn.ok{background:var(--open-d)}
.open-btn.busy{background:var(--faint);color:#fff}

.botnav{position:fixed;left:0;right:0;bottom:0;z-index:26;background:var(--surface);border-top:1px solid var(--hair);display:flex;justify-content:space-around;padding:9px 0 16px}
.botnav button{background:none;border:none;color:var(--faint);display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.7rem;font-weight:600;padding:4px 18px}
.botnav button .ic{font-size:1.35rem;line-height:1}
.botnav button.active{color:var(--accent)}

/* Deling / person / picker */
.card-d{background:var(--surface);border:1px solid var(--hair);border-radius:18px;padding:18px;margin-bottom:14px}
.card-d h3{font-family:var(--serif);font-size:1.1rem;font-weight:600;margin-bottom:12px}
.stoggle{display:flex;gap:6px;background:var(--hair-soft);border-radius:12px;padding:4px;margin-bottom:16px}
.stoggle button{flex:1;background:none;border:none;color:var(--muted);font-weight:600;font-size:.9rem;padding:10px;border-radius:9px}
.stoggle button.active{background:var(--accent);color:#fff}
.seg{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.opt{background:var(--surface);border:1.5px solid var(--hair);border-radius:14px;padding:13px 15px;cursor:pointer}
.opt.sel{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.opt .ot{font-weight:600;font-size:.98rem}
.opt .od{color:var(--muted);font-size:.8rem;margin-top:3px;line-height:1.4}
.door-picker{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.dp-opt{display:flex;align-items:center;gap:11px;background:var(--surface);border:1.5px solid var(--hair);border-radius:12px;padding:12px 13px;cursor:pointer}
.dp-opt.sel{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.dp-box{width:22px;height:22px;border-radius:6px;border:2px solid var(--faint);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:800;color:#fff}
.dp-opt.sel .dp-box{background:var(--accent);border-color:var(--accent)}
.dp-opt .dp-l{font-weight:600;font-size:.94rem}
.dp-opt .dp-l small{display:block;color:var(--muted);font-weight:400;font-size:.76rem}
.hint{color:var(--faint);font-size:.8rem;line-height:1.5;margin-bottom:12px}
.plist{display:flex;flex-direction:column;gap:8px}
.prow{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--hair);border-radius:14px;padding:13px 15px;width:100%;text-align:left;color:var(--ink);cursor:pointer}
.prow:hover{border-color:#cdd6c3}
.pav{width:44px;height:44px;border-radius:12px;background:var(--accent-soft);color:var(--accent);font-family:var(--serif);font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.prow .pm{flex:1;min-width:0}.prow .pn{font-family:var(--serif);font-weight:600;font-size:1.02rem}.prow .ps{color:var(--muted);font-size:.8rem;margin-top:2px}
.prow .chev{color:var(--faint);font-size:1.3rem}
.revoke{background:none;border:none;color:var(--red);font-weight:600;font-size:.85rem}
.back-link{background:none;border:none;color:var(--muted);font-weight:600;font-size:.92rem;padding:6px 0;margin-bottom:6px}
.btn-danger{width:100%;padding:14px;border:1px solid #e6c5c2;border-radius:12px;background:var(--danger-soft);color:var(--red);font-weight:600;font-size:.98rem;margin-top:8px;min-height:50px}
.status-chip{font-size:.68rem;font-weight:700;padding:3px 9px;border-radius:999px}
.status-chip.active{background:var(--ok-soft);color:var(--ok)}
.status-chip.expired,.status-chip.revoked{background:var(--hair-soft);color:var(--faint)}

/* Profil */
.prof-hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:14px 0 8px}
.prof-hero .big{width:84px;height:84px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-family:var(--serif);font-weight:600;display:flex;align-items:center;justify-content:center;font-size:2rem;margin-bottom:12px}
.prof-hero h2{font-family:var(--serif);font-size:1.5rem;font-weight:600}
.prof-hero .role{color:var(--accent);font-weight:600;font-size:.9rem;margin-top:3px}
.kv{display:flex;justify-content:space-between;padding:14px 2px;border-bottom:1px solid var(--hair);font-size:.98rem}
.kv:last-child{border-bottom:none}.kv .k{color:var(--muted)}
.privacy{margin-top:26px;padding-top:16px;border-top:1px solid var(--hair)}
.privacy .pt{font-size:.82rem;color:var(--faint);line-height:1.5;margin-bottom:10px}
.privacy a{color:var(--accent);font-size:.86rem;font-weight:600;text-decoration:underline;cursor:pointer;margin-right:16px}

/* Aktivitet */
.dlog{list-style:none}
.dlog li{display:flex;align-items:center;gap:11px;padding:13px 2px;border-bottom:1px solid var(--hair);font-size:.94rem}
.dlog li:last-child{border-bottom:none}
.dlog .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.dlog .dot.own{background:var(--open)}.dlog .dot.grant{background:var(--accent)}.dlog .dot.board{background:var(--warn)}
.dlog .when{margin-left:auto;color:var(--muted);font-size:.8rem;white-space:nowrap}

.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(20px);opacity:0;visibility:hidden;pointer-events:none;background:var(--accent);color:#fff;padding:14px 22px;border-radius:12px;font-weight:600;font-size:.92rem;box-shadow:0 10px 30px rgba(35,40,33,.35);z-index:90;transition:transform .25s,opacity .25s,visibility .25s;max-width:90vw;text-align:center}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1;visibility:visible}
.toast.err{background:var(--red)}

#printArea{display:none}
@media print{
  body *{visibility:hidden}
  #printArea,#printArea *{visibility:visible}
  #printArea{display:block;position:absolute;inset:0;padding:24px;color:#000;background:#fff;font-family:var(--sans)}
}
#printArea h1{font-family:var(--serif);font-size:1.4rem;margin-bottom:4px}
#printArea h3{font-family:var(--serif);margin:18px 0 6px;font-size:1rem;border-bottom:1px solid #ccc;padding-bottom:4px}
#printArea .pk{display:flex;justify-content:space-between;padding:4px 0;font-size:.9rem;border-bottom:1px solid #eee;gap:16px}

/* Inline SVG nav-ikoner (erstatter emoji) */
.botnav .ic svg{width:24px;height:24px;display:block}