/* camara.nl: LansSuite tokens (SuiteDesign open-design/shared/lansmap.css), dark default, light remap. */
@font-face{font-family:"Geist";src:url("fonts/geist-latin.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("fonts/geist-mono-latin.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("fonts/barlow-condensed-600-latin.woff2") format("woff2");font-weight:600;font-display:swap}

:root{
  color-scheme:dark light;
  --surface:#0e1418;--surface-raised:#141e23;--surface-sunken:#0b0f12;
  --text-primary:#e5edf2;--text-secondary:#8899a3;--text-tertiary:#788892;
  --border:#28343b;--accent:#049cbd;--accent-strong:#049cbd;--on-accent:#0e1418;
  --state-layer:#e5edf2;--on-accent-layer:#0e1418;--fast:120ms;
  --sans:"Geist",system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --display:"Barlow Condensed","Geist",system-ui,sans-serif;
}
@media (prefers-color-scheme:light){:root{
  --surface:#ebf3f8;--surface-raised:#f2f8fb;--surface-sunken:#e5edf2;
  --text-primary:#0e1418;--text-secondary:#586c77;--text-tertiary:#586c77;
  --border:#aabac3;--accent:#00829e;--accent-strong:#05687f;--on-accent:#ffffff;
  --state-layer:#0e1418;--on-accent-layer:#ffffff;
}}

*{box-sizing:border-box}
html{background:var(--surface)}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--surface);color:var(--text-primary);font:400 16px/24px var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}

.nav{display:flex;align-items:center;gap:12px;height:56px;padding:0 24px;border-bottom:1px solid var(--border);background:var(--surface-raised)}
.nav .wm{display:flex;align-items:center;gap:10px;font:600 16px/24px var(--sans);text-decoration:none}
.nav .wm img{width:28px;height:28px}
.nav .crumb{font:400 12px/16px var(--mono);color:var(--text-secondary)}
.nav .crumb a{color:var(--text-secondary);text-decoration:none}
.nav .crumb a:hover{color:var(--text-primary)}

main{flex:1;width:100%;max-width:640px;margin:0 auto;padding:56px 24px 48px}
.label{font:400 11px/16px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-tertiary);margin:0 0 8px}
h1{font:600 57px/64px var(--display);letter-spacing:-.01em;margin:0 0 16px}
.lead{margin:0;max-width:52ch;color:var(--text-secondary)}
.sec{margin-top:40px}
.sec h2{font:600 12px/16px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);margin:0 0 16px}

.mark-hero{width:96px;height:96px;margin:0 0 24px;display:block}
.light-only{display:none}
@media (prefers-color-scheme:light){.dark-only{display:none}.light-only{display:block}}

.card{position:relative;isolation:isolate;display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px;border:1px solid var(--border);border-radius:8px;background:var(--surface-raised);text-decoration:none}
.card::after,.btn::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--state-layer);opacity:0;transition:opacity var(--fast) linear;z-index:-1;pointer-events:none}
.card:hover::after,.btn:hover::after{opacity:.08}
.card:active::after,.btn:active::after{opacity:.10;transition-duration:0ms}
.card img{width:56px;height:56px;border-radius:6px;object-fit:cover;display:block}
.card b{display:block;font:600 16px/24px var(--sans)}
.card span{font-size:14px;line-height:20px;color:var(--text-secondary)}
.card .go{font:400 12px/16px var(--mono);color:var(--text-secondary)}
.cards{display:grid;gap:12px}

.ask{margin:16px 0 0;font-size:14px;line-height:20px;color:var(--text-secondary)}
.ask a{color:var(--accent);text-underline-offset:2px}
.fine{margin:4px 0 0;font-size:12px;line-height:16px;color:var(--text-tertiary)}

.profile{display:grid;grid-template-columns:160px minmax(0,1fr);gap:32px;align-items:center}
.portrait{margin:0;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--surface-sunken)}
.portrait img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}

.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 16px;border-radius:6px;border:1px solid var(--border);color:var(--text-primary);font:500 14px/20px var(--sans);text-decoration:none;white-space:nowrap}
.btn svg{width:18px;height:18px;flex:none}
.btn.primary{background:var(--accent-strong);border-color:transparent;color:var(--on-accent)}
.btn.primary::after{background:var(--on-accent-layer)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.btn.primary:focus-visible{outline-color:var(--text-primary)}

.foot{display:flex;flex-wrap:wrap;gap:16px;align-items:center;padding:20px 24px;border-top:1px solid var(--border);font:400 12px/16px var(--sans);color:var(--text-secondary)}
.foot a{color:var(--text-secondary)}
.foot a:hover{color:var(--text-primary)}
.foot .r{margin-left:auto;font-family:var(--mono)}

.text p{max-width:65ch;color:var(--text-secondary)}
.text a,.lead a,.fine a{color:var(--accent);text-underline-offset:2px}
form{display:grid;gap:8px}
label{font:500 14px/20px var(--sans)}
input,textarea{width:100%;padding:10px 12px;color:inherit;font:inherit;background:var(--surface-raised);border:1px solid var(--border);border-radius:6px}
input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:-1px}
textarea{min-height:160px;resize:vertical}
form .btn,section .btn{justify-self:start;margin-top:8px;font-family:var(--sans);cursor:pointer}
.btn:disabled{opacity:.6;cursor:default}
[role=status]{min-height:24px;margin:8px 0 0;color:var(--text-secondary)}
#confirm-message{padding:12px;white-space:pre-wrap;overflow-wrap:anywhere;background:var(--surface-raised);border:1px solid var(--border);border-radius:6px}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
[hidden]{display:none!important}

@media (max-width:560px){
  .nav{height:48px;padding:0 16px}
  main{padding:24px 16px}
  .mark-hero{width:48px;height:48px;margin-bottom:12px}
  h1{font-size:40px;line-height:48px;margin-bottom:8px}
  .sec{margin-top:24px}
  .profile{grid-template-columns:1fr;gap:16px}
  .portrait{max-width:96px}
  .acts{flex-wrap:nowrap;margin-top:24px}
  .acts .btn.primary{flex:1 1 auto}
  .acts .btn .t{display:none}
  .acts .btn.primary .t{display:inline}
  .acts .btn:not(.primary){width:48px;padding:0}
  .foot{padding:16px}
}