/* Halvorsen & Lund v2: klassisk familie, stil Marine (PLAYBOOK 3b v2: ro og præcision).
   Public Sans til alt, også overskrifter (600, samlet i --head) og alle tal (tabular + lining).
   Ingen versaler, ingen spatiering på småt, ingen streg under titlen, ingen kursiv som stemning.
   Motorkontrakt: alt UI inde i #app, ingen vw/vh, rem sættes af PH.fitRem('#app') (10 px ved 1600×1000). */
:root{
  color-scheme:dark;
  --bg:#0C1624;
  --side:#09121D;
  --card:#132036;
  --in:#18283F;
  --in-2:#1F3250;
  --ink:#F3EDE1;
  --ink-2:rgba(243,237,225,.78);
  --ink-3:rgba(243,237,225,.6);
  --ink-4:rgba(243,237,225,.3);
  --line:rgba(243,237,225,.08);
  --brass:#C8A15A;
  --sea:#6E9FC9;
  --ok:#7FBF9A;
  --crit:#E07A6B;
  --paper:#F4EFE4;
  --r-card:20px;
  --r-in:14px;
  --sh:inset 0 1px 0 rgba(255,255,255,.04),0 1px 2px rgba(0,0,0,.28),0 22px 44px -22px rgba(0,0,0,.72);
  --head:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sans:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --ph-ripple:rgba(200,161,90,.85);
  --ph-frame-bg:#0C1624;
}
*{box-sizing:border-box}
html{font-size:10px;background:var(--bg)}
body{margin:0;overflow:hidden;font-family:var(--sans);font-size:1.4rem;line-height:1.5;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums lining-nums}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid rgba(200,161,90,.85);outline-offset:3px}
svg.i{width:1.8rem;height:1.8rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sprite{position:absolute;width:0;height:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.lbl{font-size:1.28rem;font-weight:500;color:var(--ink-3)}
.muted{color:var(--ink-3)}
.r{margin-left:auto}
.grow{flex:1}
.num,.big,.mid,.amt{font-variant-numeric:tabular-nums lining-nums}
.top .m-only{display:none}

/* ---------- Ramme ---------- */
#app{position:fixed;inset:0;overflow:hidden;background:var(--bg)}
.shell{position:relative;display:grid;grid-template-columns:23rem minmax(0,1fr);height:100%}

/* ---------- Sidebjælke ---------- */
.side{position:relative;z-index:6;display:flex;flex-direction:column;gap:2.2rem;min-height:0;padding:2.4rem 1.6rem 2rem 1.8rem;background:var(--side);box-shadow:1px 0 0 rgba(0,0,0,.28),10px 0 32px -18px rgba(0,0,0,.6)}
.brand{display:flex;align-items:center;gap:1.2rem}
/* Mærket: halvskjoldet, venstre halvdel fyldt og højre tegnet (#logo i spriten) */
.ring{display:block;width:4.4rem;height:4.4rem;flex:none;color:var(--brass)}
.ring svg{display:block;width:100%;height:100%}
.brand-t b .amp{color:var(--brass)}
.brand-t b{display:block;font-size:1.5rem;font-weight:600;line-height:1.2}
.brand-t small{display:block;font-size:1.25rem;color:var(--ink-3)}
.nav{display:flex;flex-direction:column;gap:.2rem;min-height:0}
.nav-h{margin:1.4rem 0 .4rem 1.2rem;font-size:1.25rem;font-weight:600;color:var(--ink-3)}
.nav-h:first-child{margin-top:0}
.nav-i{position:relative;display:flex;align-items:center;gap:1.1rem;height:4rem;padding:0 1rem 0 1.2rem;border:0;border-radius:99px;background:none;color:var(--ink-2);font:500 1.4rem var(--sans);text-align:left;white-space:nowrap;transition:background .25s,color .25s}
.nav-i svg.i{width:1.9rem;height:1.9rem;color:var(--ink-3)}
.nav-i:hover,.nav-i[data-ph-hover]{color:var(--ink);background:rgba(243,237,225,.04)}
.nav-i.on{color:var(--ink);font-weight:600;background:rgba(243,237,225,.07)}
.nav-i.on svg.i{color:var(--brass)}
.nav-i.on::before{content:"";position:absolute;left:-1.8rem;top:1rem;bottom:1rem;width:.3rem;border-radius:0 3px 3px 0;background:var(--brass)}
.cnt{margin-left:auto;font-style:normal;min-width:2.3rem;height:2.1rem;padding:0 .7rem;border-radius:99px;display:grid;place-items:center;font-size:1.15rem;font-weight:700;background:rgba(243,237,225,.08);color:var(--ink-2)}
.cnt:empty{display:none}
.cnt.brass{background:var(--brass);color:#0C1624}
.cnt.sea{background:var(--sea);color:#0C1624}
.side-adv{margin-top:auto;display:flex;align-items:center;gap:1rem;padding:1rem 1.2rem;border:0;border-radius:var(--r-in);background:var(--card);color:var(--ink);text-align:left;box-shadow:var(--sh);transition:background .2s}
.side-adv:hover,.side-adv[data-ph-hover]{background:var(--in)}
.side-adv b{display:block;font-size:1.35rem;font-weight:600}
.side-adv small{display:block;font-size:1.25rem;color:var(--ink-3)}
.nav-more{display:none}
.more{display:none}

/* ---------- Hovedområde og header på én linje ---------- */
.main{display:grid;grid-template-rows:auto minmax(0,1fr);gap:1.8rem;min-width:0;min-height:0;padding:2.4rem 2.8rem}
.top{display:flex;align-items:center;gap:1.6rem;min-width:0;height:4.6rem;container-type:inline-size}
#h1{margin:0;font:600 2.4rem/1.1 var(--head);letter-spacing:-.01em;white-space:nowrap}
.ctx{flex:1;min-width:0;margin:0;font-size:1.4rem;color:var(--ink-3);white-space:nowrap;overflow:hidden}
.ctx b{color:var(--ink-2);font-weight:600}
.ctx i{display:inline-block;width:.4rem;height:.4rem;margin:0 1rem .25rem;border-radius:50%;background:var(--ink-4);vertical-align:middle}
@container (max-width:112rem){.ctx .xtra{display:none}}
.search{display:flex;align-items:center;gap:1rem;width:30rem;flex:none;height:4.4rem;padding:0 .8rem 0 1.5rem;border:0;border-radius:99px;background:var(--card);color:var(--ink-3);font:500 1.35rem var(--sans);box-shadow:var(--sh);transition:background .25s}
.search:hover,.search[data-ph-hover]{background:var(--in)}
.search svg{color:var(--brass)}
.search span{white-space:nowrap;overflow:hidden}
.search kbd{margin-left:auto}
.me{display:flex;align-items:center;gap:1rem;flex:none;height:4.4rem;padding:0 1.4rem 0 .5rem;border-radius:99px;background:var(--card);box-shadow:var(--sh);white-space:nowrap}
.me-av{display:grid;place-items:center;width:3.4rem;height:3.4rem;border-radius:50%;font:600 1.3rem var(--sans);color:#0C1624;background:var(--ink)}
.me b{display:block;font-size:1.3rem;font-weight:600;line-height:1.2}
.me small{display:flex;align-items:center;gap:.5rem;font-size:1.15rem;color:var(--ink-3);line-height:1.3}
.me small::before{content:"";width:.6rem;height:.6rem;border-radius:50%;background:var(--brass)}
kbd{display:inline-grid;place-items:center;min-width:2.2rem;height:2.2rem;padding:0 .6rem;border-radius:99px;font:600 1.15rem var(--sans);color:var(--ink-2);background:rgba(243,237,225,.08);white-space:nowrap}

/* ---------- Visninger og kort ---------- */
.views{position:relative;min-width:0;min-height:0}
.view{position:absolute;inset:0;display:none;gap:2rem;min-width:0;min-height:0}
.view.on{display:grid}
.col{display:flex;flex-direction:column;gap:2rem;min-width:0;min-height:0}
.card{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;padding:2.4rem 2.6rem;border-radius:var(--r-card);background:var(--card);box-shadow:var(--sh)}
.card.ping{animation:ping 1.1s var(--ease)}
@keyframes ping{0%{box-shadow:var(--sh),0 0 0 0 rgba(200,161,90,.5)}100%{box-shadow:var(--sh),0 0 0 1.2rem rgba(200,161,90,0)}}
.c-head{display:flex;align-items:center;gap:1.2rem;min-height:3.2rem;flex:none}
.c-head h2{margin:0;font:600 1.7rem/1.25 var(--head);color:var(--ink);white-space:nowrap}
.c-head .ctx-r{margin-left:auto;font-size:1.3rem;color:var(--ink-3);white-space:nowrap}
.c-ico{display:grid;place-items:center;width:3.6rem;height:3.6rem;border-radius:50%;flex:none;background:var(--in);color:var(--brass)}
.c-ico svg.i{width:1.8rem;height:1.8rem}
.big{font-family:var(--sans);font-weight:500;font-size:6.4rem;line-height:1;letter-spacing:-.025em;white-space:nowrap;color:var(--ink)}
.big .u{font-size:1.8rem;font-weight:500;color:var(--ink-2);margin-left:.8rem;letter-spacing:0}
.big.brass{color:var(--brass)}
.mid{font:500 3.2rem/1 var(--sans);letter-spacing:-.015em;white-space:nowrap}
.mid small{font-size:1.4rem;font-weight:500;color:var(--ink-3);letter-spacing:0;margin-left:.4rem}
.say{margin:1rem 0 0;font-size:1.45rem;line-height:1.45;color:var(--ink-2)}
.link{display:inline-flex;align-items:center;gap:.5rem;padding:0;border:0;background:none;font:600 1.3rem var(--sans);color:var(--brass)}
.link svg.i{width:1.5rem;height:1.5rem;transition:transform .3s var(--ease)}
.link:hover svg.i,.link[data-ph-hover] svg.i{transform:translateX(3px)}
.hint{margin:0;font-size:1.25rem;color:var(--ink-3)}
.foot{display:flex;align-items:center;gap:1rem;margin-top:auto;padding-top:1.6rem;flex:none}

/* ---------- Knapper, chips og kontroller ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.8rem;height:4.2rem;padding:0 1.8rem;border:0;border-radius:99px;font:600 1.38rem var(--sans);color:var(--ink);
  background:var(--in);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 1px 2px rgba(0,0,0,.25);white-space:nowrap;transition:background .25s,color .25s,transform .2s}
.btn svg.i{width:1.7rem;height:1.7rem}
.btn:hover,.btn[data-ph-hover]{background:var(--in-2)}
.btn:active{transform:translateY(1px)}
.btn.pri{background:var(--brass);color:#0C1624;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 14px -8px rgba(0,0,0,.7)}
.btn.pri:hover,.btn.pri[data-ph-hover]{background:#D5AF69}
.btn.ghost{background:none;box-shadow:none;color:var(--ink-2)}
.btn.ghost:hover,.btn.ghost[data-ph-hover]{background:rgba(243,237,225,.05);color:var(--ink)}
.btn.sm{height:3.6rem;padding:0 1.4rem;font-size:1.3rem}
.btn.wide{width:100%}
.btn:disabled{opacity:.42;cursor:not-allowed;transform:none}
.btn:disabled:hover{background:var(--in)}
.btn.pri:disabled:hover{background:var(--brass)}
.btn kbd{margin:0 -.7rem 0 .1rem}
.btn.pri kbd{background:rgba(12,22,36,.14);color:#0C1624}
.btn.done{opacity:1;background:rgba(127,191,154,.13);color:var(--ok);cursor:default}
.chip{display:inline-flex;align-items:center;gap:.5rem;height:2.8rem;padding:0 1.2rem;border-radius:99px;font-size:1.25rem;font-weight:600;white-space:nowrap;background:rgba(243,237,225,.07);color:var(--ink-2)}
.chip svg.i{width:1.4rem;height:1.4rem;stroke-width:2}
.chip.ok{background:rgba(127,191,154,.13);color:var(--ok)}
.chip.brass{background:rgba(200,161,90,.14);color:var(--brass)}
.chip.sea{background:rgba(110,159,201,.15);color:var(--sea)}
.chip.crit{background:rgba(224,122,107,.14);color:var(--crit)}
.chip.mute{background:rgba(243,237,225,.06);color:var(--ink-3)}
.seg{display:inline-flex;gap:.2rem;padding:.4rem;border-radius:99px;background:var(--bg);box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
.seg button{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;height:3.4rem;padding:0 1.5rem;border:0;border-radius:99px;background:none;color:var(--ink-3);font:600 1.3rem var(--sans);white-space:nowrap;transition:background .25s,color .25s}
.seg button:hover,.seg button[data-ph-hover]{color:var(--ink)}
.seg button.on{background:var(--in-2);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.35)}
.seg button em{font-style:normal;font-size:1.2rem;color:var(--ink-3)}
.seg.wide{display:flex}
.seg.wide button{flex:1;padding:0 1rem}
.chips{display:flex;flex-wrap:wrap;gap:.8rem}
.chip-b{display:inline-flex;align-items:center;gap:.7rem;height:3.8rem;padding:0 1.6rem;border:0;border-radius:99px;background:var(--in);color:var(--ink-2);font:600 1.32rem var(--sans);white-space:nowrap;transition:background .25s,color .25s}
.chip-b svg.i{width:1.6rem;height:1.6rem}
.chip-b:hover,.chip-b[data-ph-hover]{background:var(--in-2);color:var(--ink)}
.chip-b.on{background:rgba(200,161,90,.15);color:var(--brass);box-shadow:inset 0 0 0 1.5px rgba(200,161,90,.55)}
.chip-b em{font-style:normal;font-size:1.2rem;color:var(--ink-3)}
.chip-b.on em{color:var(--brass)}
.chip-b.sm{height:3.4rem;padding:0 1.4rem;font-size:1.28rem}
.field{width:100%;padding:1.2rem 1.5rem;border:0;border-radius:var(--r-in);background:var(--bg);color:var(--ink);font:500 1.45rem/1.5 var(--sans);resize:none;outline:none;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.35),inset 0 0 0 1px rgba(243,237,225,.07);transition:box-shadow .25s}
.field:focus{box-shadow:inset 0 1px 2px rgba(0,0,0,.35),0 0 0 2px rgba(200,161,90,.6)}