/* Fjordvik Site Assistant. Mowi-inspired look: charcoal, coral, soft grey, Century-Gothic-like Jost. */
@font-face{font-family:"Jost";src:url(/fonts/jost.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Jost";src:url(/fonts/jost-italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/fonts/jbmono.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Jost Fallback";src:local("Arial");size-adjust:98%;ascent-override:100%;descent-override:26%;line-gap-override:0%}

:root{
  --page:#ebebe9; --card:#ffffff; --inset:#f4f3f1; --deep:#2c2a29; --deep-2:#3a3736; --navy:#03204a; --navy-2:#0a2f63;
  --coral:#ff6f4a; --coral-d:#c2431f; --coral-soft:#ffe4dc;
  --ok:#3d7a14; --ok-bg:#e3f0d6; --warn:#8a5a00; --warn-bg:#fbeacb; --crit:#b3261e; --crit-bg:#fbdcd8;
  --ink:30 6% 17%;
  --t1:hsl(var(--ink) / .96); --t2:hsl(var(--ink) / .76); --t3:hsl(var(--ink) / .66);
  --line:hsl(var(--ink) / .13); --line-soft:hsl(var(--ink) / .07);
  --inv:0 0% 100%; --i1:hsl(var(--inv) / .96); --i2:hsl(var(--inv) / .78); --i3:hsl(var(--inv) / .66); --iline:hsl(var(--inv) / .16);
  --root:2.4rem;
  --t-h1:clamp(1.9rem,3.6vw,calc(var(--root)*1.5));
  --t-h2:clamp(1.3rem,1.8vw,1.6rem);
  --t-num:clamp(2rem,3.4vw,3rem);
  --t-body:1rem; --t-small:.875rem; --t-label:.6875rem;
  --f:"Jost","Jost Fallback",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",monospace;
  --r:12px; --r-sm:8px; --r-pill:999px;
  --sh:0 1px 2px rgb(44 42 41 / .08),0 8px 24px -12px rgb(44 42 41 / .25);
  --side:244px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--t1);font:400 var(--t-body)/1.55 var(--f);-webkit-tap-highlight-color:transparent;overflow-x:hidden}
img{max-width:100%;display:block}
h1,h2,h3,p{margin:0}
button,select,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--coral);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;background:var(--deep);color:#fff;padding:8px 12px;border-radius:var(--r-sm);z-index:99}
.skip:focus{left:8px}

.app{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100dvh}
.side{background:var(--deep);color:var(--i1);padding:24px 16px;position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;gap:24px}
.brand{display:flex;gap:12px;align-items:center;color:inherit;text-decoration:none;padding:0 8px}
.brand b{display:block;font-weight:500;font-size:1.25rem;letter-spacing:.02em}
.brand small{display:block;font:500 var(--t-label)/1.2 var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--i3)}
.mark{width:34px;height:34px;border-radius:50%;background:var(--coral);position:relative;flex:none}
.mark::after{content:"";position:absolute;inset:9px 7px;border-radius:50% 50% 50% 50%/70% 70% 30% 30%;background:var(--deep);transform:rotate(-18deg)}
#nav{display:flex;flex-direction:column;gap:2px}
#nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-sm);color:var(--i2);text-decoration:none;font-weight:400;min-height:44px}
#nav a svg{width:20px;height:20px;flex:none}
#nav a:hover{background:var(--deep-2);color:var(--i1)}
#nav a[aria-current="page"]{background:var(--coral);color:#2c2a29;font-weight:500}
#nav .badge{margin-left:auto;font:500 .75rem/1 var(--mono);background:var(--coral);color:#2c2a29;border-radius:var(--r-pill);padding:4px 7px}
#nav a[aria-current="page"] .badge{background:#2c2a29;color:#fff}
.side-note{margin-top:auto;font-size:.8rem;line-height:1.45;color:var(--i3);padding:0 8px}

.main{min-width:0}
.top{display:flex;gap:16px;align-items:end;flex-wrap:wrap;padding:16px 32px;background:var(--card);border-bottom:1px solid var(--line)}
.who{display:flex;flex-direction:column;gap:2px}
.who label{font:500 var(--t-label)/1.2 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--t3)}
select{appearance:none;background:var(--inset) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%232c2a29' stroke-width='2'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center;border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 34px 9px 12px;min-height:44px;font-weight:500}
.left{margin-left:auto;display:flex;align-items:baseline;gap:8px;font-size:var(--t-small);color:var(--t2)}
.left b{font:500 1.4rem/1 var(--mono);color:var(--t1)}
#view{padding:32px;max-width:1180px;outline:none}
.loading{color:var(--t2);padding:24px 0}
.loading::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-radius:50%;background:var(--coral);animation:pulse 1s infinite alternate}
@keyframes pulse{to{opacity:.2;transform:scale(1.8)}}

/* page heads */
.ph{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:end;justify-content:space-between;margin-bottom:24px}
.ph h1{font-weight:300;font-size:var(--t-h1);line-height:1.1;letter-spacing:-.01em}
.ph p{color:var(--t2);max-width:60ch;margin-top:8px}
.eyebrow{font:500 var(--t-label)/1.2 var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--coral-d);margin-bottom:8px}
h2{font-weight:500;font-size:var(--t-h2);line-height:1.2}
h3{font-weight:500;font-size:1.05rem;line-height:1.3}
.mono{font-family:var(--mono);font-weight:500}

/* surfaces */
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:24px}
.inset{background:var(--inset);border-radius:var(--r-sm);padding:16px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:start}
.stack>*+*{margin-top:16px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:var(--r-pill);border:1.5px solid var(--deep);background:transparent;font-weight:500;text-decoration:none;color:var(--t1);transition:background .15s,color .15s,transform .1s}
.btn:hover{background:var(--deep);color:#fff}
.btn:active{transform:translateY(1px)}
.btn.p{background:var(--coral-d);border-color:var(--coral-d);color:#fff}
.btn.p:hover{background:#a53819;border-color:#a53819}
.btn.sm{min-height:40px;padding:6px 14px;font-size:var(--t-small)}
.btn[disabled]{opacity:.55;cursor:default;pointer-events:none}
.btn svg{width:18px;height:18px}

/* Today band */
.band{border-radius:var(--r);overflow:hidden;position:relative;color:var(--i1);background:var(--navy) url(/media/fjord.webp) center/cover;margin-bottom:16px;isolation:isolate}
.band::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgb(3 32 74 / .95) 0%,rgb(3 32 74 / .78) 55%,rgb(3 32 74 / .35) 100%);z-index:-1}
.band-in{padding:32px;display:grid;gap:24px;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.band h1{font-weight:300;font-size:var(--t-h1);line-height:1.1}
.band .eyebrow{color:var(--coral)}
.band p.sub{color:var(--i2);margin-top:8px}
.kv{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.kv div{border-top:1px solid var(--iline);padding-top:8px}
.kv dt{font:500 var(--t-label)/1.2 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--i3)}
.kv dd{margin:4px 0 0;font-weight:300;font-size:var(--t-num);line-height:1}
.kv dd small{font-size:.9rem;color:var(--i2);margin-left:4px;font-weight:400}

/* briefing */
.brief{display:grid;gap:16px}
.lines{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.lines li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline}
.lines li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--coral);margin-top:.5em}
.prose p+p{margin-top:12px}
.meta{font:500 var(--t-label)/1.4 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--t3)}

/* status chips */
.chip{display:inline-flex;align-items:center;gap:6px;font:500 .75rem/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;padding:5px 9px;border-radius:var(--r-pill)}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.chip.ok{background:var(--ok-bg);color:var(--ok)}
.chip.warn{background:var(--warn-bg);color:var(--warn)}
.chip.crit{background:var(--crit);color:#fff}
.stamp{display:inline-block;font:500 .6875rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:4px 7px;border-radius:4px;border:1.5px solid currentColor;white-space:nowrap}
.stamp.ok{color:var(--ok)} .stamp.bad{color:#fff;background:var(--crit);border-color:var(--crit)} .stamp.miss{color:var(--warn)}

/* pen strip */
.pens-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.pstrip{background:var(--card);border:0;border-radius:var(--r-sm);box-shadow:var(--sh);padding:12px;text-align:left;display:grid;gap:6px;min-height:44px}
.pstrip b{font-weight:500;font-size:1.25rem}
.pstrip span.m{font-size:.8rem;color:var(--t2);line-height:1.3}
.pstrip:hover{outline:2px solid var(--coral)}
.pstrip.crit{background:var(--crit);color:#fff}
.pstrip.crit span.m{color:var(--i2)}

/* proposals */
.prop{display:grid;gap:8px;padding:16px;border-radius:var(--r-sm);background:var(--inset)}
.prop-h{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.role{font:500 .6875rem/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;padding:4px 8px;border-radius:4px;background:var(--deep);color:#fff}
.urg{font:500 .6875rem/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;padding:4px 8px;border-radius:4px}
.urg.u3{background:var(--crit);color:#fff} .urg.u2{background:var(--warn-bg);color:var(--warn)} .urg.u1{background:var(--ok-bg);color:var(--ok)}
.prop .what{font-weight:500}
.prop .why{color:var(--t2);font-size:var(--t-small)}
.prop-a{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.prop.done{background:var(--ok-bg)}
.prop.gone{opacity:.5}

/* ask */
.askbox{display:grid;gap:12px}
.askbox textarea{width:100%;min-height:92px;resize:vertical;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;background:var(--inset);line-height:1.5}
.askbox textarea:focus{outline:3px solid var(--coral);outline-offset:0;background:#fff}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.qchip{display:inline-flex;gap:8px;align-items:center;text-align:left;padding:8px 14px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--card);min-height:44px;font-size:var(--t-small)}
.qchip i{font:500 .65rem/1 var(--mono);font-style:normal;background:var(--deep);color:#fff;border-radius:4px;padding:3px 5px}
.qchip:hover{border-color:var(--coral);background:var(--coral-soft)}
.thread{display:grid;gap:16px;margin-top:24px}
.q-bubble{justify-self:end;max-width:70ch;background:var(--deep);color:#fff;border-radius:var(--r) var(--r) 4px var(--r);padding:12px 16px}
.a-card{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:24px;display:grid;gap:16px}
.chart-wrap{background:var(--inset);border-radius:var(--r-sm);padding:12px 12px 8px}
.chart-wrap h4{margin:0 0 4px;font:500 var(--t-label)/1.3 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--t3)}
svg{display:block;max-width:100%;height:auto}
.verify{border-top:1px dashed var(--line);padding-top:12px}
.verify summary{cursor:pointer;display:flex;gap:12px;align-items:center;min-height:44px;font-weight:500}
.vlist{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:6px}
.vlist li{display:grid;grid-template-columns:3.2rem 1fr auto;gap:8px;align-items:center;font:500 .8rem/1.3 var(--mono);padding:6px 0;border-bottom:1px solid var(--line-soft)}
.vlist .tm{color:var(--t3)}
.err{background:var(--crit-bg);color:#6b140f;border-radius:var(--r-sm);padding:12px 16px}
.skel{height:14px;border-radius:6px;background:linear-gradient(90deg,var(--inset),#e6e4e0,var(--inset));background-size:200% 100%;animation:sh 1.2s infinite}
@keyframes sh{to{background-position:-200% 0}}
.empty{padding:24px;text-align:center;color:var(--t2);background:var(--inset);border-radius:var(--r-sm)}

/* map and pens */
.mapbox{background:var(--navy);border-radius:var(--r);padding:12px}
.mapbox svg{width:100%}
.pen-g{cursor:pointer}
.pen-g:focus-visible{outline:none}
.pen-g:focus-visible .ring-o,.pen-g:hover .ring-o{stroke-width:9}
table{width:100%;border-collapse:collapse}
th{font:500 var(--t-label)/1.2 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--t3);text-align:left;padding:8px 12px;border-bottom:1px solid var(--line)}
td{padding:12px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
tbody tr{cursor:pointer}
tbody tr:hover td{background:var(--inset)}
tbody tr.sel td{background:var(--coral-soft)}
td.num{font:500 .9rem/1 var(--mono);white-space:nowrap}
.bar{height:6px;border-radius:3px;background:var(--inset);overflow:hidden;min-width:60px}
.bar i{display:block;height:100%;background:var(--coral)}
.bar i.hi{background:var(--crit)}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tab{border:1px solid var(--line);background:var(--card);border-radius:var(--r-pill);padding:8px 14px;min-height:40px;font-size:var(--t-small)}
.tab[aria-pressed="true"]{background:var(--deep);color:#fff;border-color:var(--deep)}
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.fact{border-top:1px solid var(--line);padding-top:8px}
.fact dt{font:500 var(--t-label)/1.2 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--t3)}
.fact dd{margin:4px 0 0;font-weight:300;font-size:1.7rem;line-height:1.1}
.fact dd small{font-size:.8rem;font-weight:400;color:var(--t2);margin-left:3px}

/* alarms */
.alist{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.al{background:var(--card);border-radius:var(--r-sm);box-shadow:var(--sh);padding:16px;display:grid;gap:12px}
.al-h{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}
.lp{display:inline-grid;place-items:center;min-width:42px;height:32px;border-radius:6px;font:500 .85rem/1 var(--mono);color:#fff;background:var(--deep)}
.lp.l3{background:var(--crit)} .lp.l2{background:#8a5a00}
.al time{font:500 .75rem/1.2 var(--mono);color:var(--t3)}
.al .txt{font-weight:400}
.al .sim{font:500 .625rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;background:var(--coral);color:#2c2a29;border-radius:3px;padding:3px 5px;margin-left:6px;vertical-align:middle}
.tri{border-top:1px dashed var(--line);padding-top:12px;display:grid;gap:12px}

/* simulate */
.ev{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:20px}
.ev.on{outline:2px solid var(--coral)}
.sw{position:relative;width:52px;height:30px;flex:none}
.sw input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;width:100%;height:100%}
.sw span{position:absolute;inset:0;border-radius:var(--r-pill);background:#c9c7c3;transition:background .15s}
.sw span::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgb(0 0 0 / .3);transition:transform .15s}
.sw input:checked+span{background:var(--coral-d)}
.sw input:checked+span::after{transform:translateX(22px)}
.sw input:focus-visible+span{outline:3px solid var(--coral);outline-offset:2px}
.ba{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ba .arr{color:var(--t3)}

/* tasks */
.board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.col{background:var(--inset);border-radius:var(--r);padding:12px;display:grid;gap:12px;align-content:start;min-height:160px}
.col>h2{font:500 var(--t-label)/1 var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--t2);padding:8px 4px 0;display:flex;justify-content:space-between}
.task{background:var(--card);border-radius:var(--r-sm);box-shadow:var(--sh);padding:16px;display:grid;gap:8px}
.task .src{font-size:.8rem;color:var(--t3)}
.addrow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px}
.addrow input{border:1.5px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;background:var(--inset);min-height:44px;min-width:0}

/* about */
.prose{max-width:68ch}
.prose h2{margin:32px 0 8px}
.prose h2:first-child{margin-top:0}
.prose ul{padding-left:1.2em;margin:8px 0}
.prose li+li{margin-top:6px}
.clients{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.clients span{background:var(--inset);border-radius:var(--r-pill);padding:6px 14px;font-weight:500;font-size:var(--t-small)}
.step{display:grid;grid-template-columns:5.5rem 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.step time{font:500 .8rem/1.5 var(--mono);color:var(--coral-d)}

.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,24px);background:var(--deep);color:#fff;border-radius:var(--r-pill);padding:12px 20px;max-width:min(92vw,520px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:50;font-size:var(--t-small);box-shadow:var(--sh)}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width:1100px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split{grid-template-columns:minmax(0,1fr)}
  .pens-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .board{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:sticky;top:0;height:auto;z-index:20;padding:8px 12px;flex-direction:row;align-items:center;gap:8px}
  .brand{padding:0}.brand small,.side-note{display:none}
  .brand b{font-size:1rem}.mark{width:28px;height:28px}
  #nav{flex-direction:row;overflow-x:auto;scrollbar-width:none;gap:4px;flex:1;min-width:0}
  #nav a{padding:8px 12px;white-space:nowrap;flex:none}
  #nav a svg{display:none}
  .top{padding:12px 16px;gap:12px}
  .top .who{flex:1 1 140px}.top select{width:100%}
  .left{margin-left:0;flex:1 1 100%}
  #view{padding:16px}
  .band-in{grid-template-columns:minmax(0,1fr);padding:24px 20px}
  .g2,.g3{grid-template-columns:minmax(0,1fr)}
  .card,.a-card{padding:20px}
  .step{grid-template-columns:1fr;gap:4px}
}
@media (max-width:520px){
  .pens-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g4{grid-template-columns:minmax(0,1fr)}
  .addrow{grid-template-columns:minmax(0,1fr)}
  .facts{grid-template-columns:minmax(0,1fr)}
  .vlist li{grid-template-columns:2.8rem 1fr}.vlist li .stamp{grid-column:2;justify-self:start}
  table.resp thead{display:none}
  table.resp tr{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;padding:12px 0;border-bottom:1px solid var(--line-soft)}
  table.resp td{border:0;padding:0}
  table.resp td:first-child{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:520px){
  table.resp td[data-l]::before{content:attr(data-l);display:block;font:500 .625rem/1.2 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--t3);margin-bottom:2px}
}