/* Tűzfalon túl — one stylesheet.
   Palette taken from the subject: fired brick, lime render, soot, and the pale sky a firewall
   is always seen against. Mobile-first; half the use is standing in front of a wall. */

:root{
  --brick:#9c4a2f; --brick-dk:#7a3722; --ochre:#c98b3a; --soot:#2b2724;
  --ink:#1d1a18; --body:#3c3733; --muted:#7a736c;
  --paper:#faf7f2; --card:#fff; --line:#e4dcd1; --sky:#eef1f3;
  --ok:#3f7d5a; --warn:#c2410c;
  --r:14px; --shadow:0 1px 2px rgba(43,39,36,.06), 0 8px 24px rgba(43,39,36,.06);
  --wrap:1120px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--body);
  font:16px/1.6 ui-sans-serif,system-ui,"Segoe UI",Inter,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{color:var(--ink); line-height:1.22; margin:0 0 .4em; font-weight:650; letter-spacing:-.01em}
h1{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.3rem)}
h2{font-size:clamp(1.25rem,1.05rem + .8vw,1.6rem)}
h3{font-size:1.05rem}
p{margin:0 0 1em}
a{color:var(--brick); text-underline-offset:2px}
a:hover{color:var(--brick-dk)}
img{max-width:100%; height:auto; display:block}
code{font:.9em ui-monospace,SFMono-Regular,Consolas,monospace; background:#f0ebe3; padding:.1em .35em; border-radius:5px}
.muted{color:var(--muted)}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 18px}
main.wrap{padding-top:26px; padding-bottom:64px}

.skip{position:absolute; left:-9999px}
.skip:focus{left:8px; top:8px; z-index:99; background:#fff; padding:10px 14px; border-radius:8px}
:focus-visible{outline:2.5px solid var(--ochre); outline-offset:2px; border-radius:4px}

/* ---------- header ---------- */
.top{background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:40}
.topbar{display:flex; align-items:center; gap:20px; min-height:64px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); flex:0 0 auto}
.brand-mark{
  width:30px; height:30px; border-radius:7px; flex:0 0 auto;
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0/100% 7.5px,
    linear-gradient(90deg,var(--line) 1px, transparent 1px) 0 0/10px 100%,
    linear-gradient(160deg,var(--brick),var(--ochre));
}
.brand-text{display:flex; flex-direction:column; line-height:1.15}
.brand-text b{font-size:1.02rem; letter-spacing:-.015em}
.brand-text small{color:var(--muted); font-size:.72rem}
.mainnav{display:none; gap:2px; margin-left:auto}
.mainnav a{
  padding:9px 13px; border-radius:9px; text-decoration:none; color:var(--body);
  font-size:.94rem; font-weight:500; white-space:nowrap;
}
.mainnav a:hover{background:#f3eee6; color:var(--ink)}
.mainnav a[aria-current=page]{background:var(--soot); color:#fff}
.account{margin-left:auto; display:flex; align-items:center; gap:9px}
.mainnav + .account{margin-left:0}
.who{font-size:.9rem; color:var(--body); text-decoration:none; font-weight:500}
@media(min-width:940px){ .mainnav{display:flex} }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:10px 17px; border-radius:10px; border:1px solid transparent;
  font:inherit; font-size:.93rem; font-weight:560; text-decoration:none; cursor:pointer;
  transition:background .15s, border-color .15s, transform .06s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--brick); color:#fff}
.btn-primary:hover{background:var(--brick-dk); color:#fff}
.btn-ghost{background:#fff; border-color:var(--line); color:var(--body)}
.btn-ghost:hover{background:#f6f2ec; color:var(--ink)}
.btn-block{width:100%}
.btn[disabled],.btn.is-off{opacity:.5; pointer-events:none}

/* ---------- page head ---------- */
.pagehead{background:linear-gradient(180deg,#fff,var(--paper)); border-bottom:1px solid var(--line); padding:30px 0 24px}
.pagehead h1{margin-bottom:.25em}
.lede{font-size:1.06rem; color:var(--muted); max-width:62ch; margin:0}

/* ---------- flash ---------- */
.flash{margin:16px 0 0; padding:12px 15px; border-radius:10px; border:1px solid; font-size:.95rem}
.flash-ok{background:#eef6f1; border-color:#c5e0d2; color:#265c41}
.flash-err{background:#fdeee8; border-color:#f3ccbb; color:#8b2f12}

/* ---------- cards & grids ---------- */
.grid{display:grid; gap:16px}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
@media(min-width:640px){ .grid-2,.grid-3{grid-template-columns:repeat(2,1fr)} }
@media(min-width:960px){ .grid-3{grid-template-columns:repeat(3,1fr)} }

.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:18px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:8px;
}
.card h3{margin:0}
.card a.title{text-decoration:none; color:var(--ink)}
.card a.title:hover{color:var(--brick)}
.card .meta{font-size:.85rem; color:var(--muted); margin:0}
.card-link{text-decoration:none; color:inherit}

.section{margin:38px 0 0}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:14px}
.section-head h2{margin:0}
.section-head a{font-size:.9rem; font-weight:500; text-decoration:none}

/* ---------- badges ---------- */
.badge{
  display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px;
  font-size:.76rem; font-weight:600; letter-spacing:.01em; color:#fff; white-space:nowrap;
}
.badge-soft{background:#f0ebe3; color:var(--body)}
.dot{width:8px; height:8px; border-radius:50%; display:inline-block; flex:0 0 auto}

/* ---------- map ---------- */
#map{height:min(62vh,540px); border-radius:var(--r); border:1px solid var(--line); background:var(--sky); z-index:1}
.maplegend{display:flex; flex-wrap:wrap; gap:8px 16px; margin:12px 0 0; padding:0; list-style:none; font-size:.85rem; color:var(--muted)}
.maplegend li{display:flex; align-items:center; gap:7px}
.mapempty{
  display:flex; align-items:center; justify-content:center; text-align:center; padding:40px 24px;
  height:min(62vh,540px); border:1px dashed var(--line); border-radius:var(--r); background:var(--sky); color:var(--muted);
}

/* ---------- gallery ---------- */
.photos{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.photo{position:relative; border-radius:11px; overflow:hidden; background:#e9e3da; aspect-ratio:4/3; border:1px solid var(--line)}
.photo img{width:100%; height:100%; object-fit:cover}
.photo figcaption{
  position:absolute; inset:auto 0 0 0; padding:22px 10px 8px; color:#fff; font-size:.78rem;
  background:linear-gradient(transparent,rgba(29,26,24,.82));
}

/* ---------- forms ---------- */
form.stack{display:flex; flex-direction:column; gap:14px; max-width:560px}
label{display:flex; flex-direction:column; gap:5px; font-size:.9rem; font-weight:560; color:var(--ink)}
label .hint{font-weight:400; color:var(--muted); font-size:.83rem}
input[type=text],input[type=email],input[type=number],input[type=url],input[type=datetime-local],select,textarea{
  font:inherit; padding:11px 13px; border:1px solid var(--line); border-radius:10px;
  background:#fff; color:var(--ink); width:100%;
}
textarea{min-height:130px; resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--ochre); outline:none; box-shadow:0 0 0 3px rgba(201,139,58,.18)}
.check{flex-direction:row; align-items:flex-start; gap:10px; font-weight:400}
.check input{margin-top:3px; width:auto}
.filters{display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin-bottom:20px}
.filters label{flex:1 1 150px; max-width:220px}

/* ---------- chat ---------- */
.chat{display:flex; flex-direction:column; gap:12px; height:min(60vh,520px)}
.chat-log{
  flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding:14px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
}
.msg{max-width:76%; padding:9px 13px; border-radius:13px; background:#f2ede6; align-self:flex-start}
.msg.mine{background:var(--soot); color:#fff; align-self:flex-end}
.msg .who{display:block; font-size:.76rem; font-weight:600; color:var(--muted); margin-bottom:2px}
.msg.mine .who{color:#c8bfb5}
.msg .when{font-size:.7rem; opacity:.6; margin-left:6px}
.chat-form{display:flex; gap:9px}
.chat-form input{flex:1}

/* ---------- empty state ---------- */
.empty{
  border:1px dashed var(--line); border-radius:var(--r); padding:34px 22px; text-align:center;
  color:var(--muted); background:#fff;
}
.empty h3{color:var(--ink); margin-bottom:.35em}

/* ---------- table ---------- */
.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:#fff}
table{border-collapse:collapse; width:100%; font-size:.92rem}
th,td{padding:11px 14px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap}
th{background:#f7f3ed; font-weight:600; color:var(--ink)}
tr:last-child td{border-bottom:0}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line); background:#fff; padding:26px 0 96px; font-size:.9rem; color:var(--muted)}
.foot p{margin:0 0 .5em}

/* ---------- mobile tab bar ---------- */
.tabbar{
  position:fixed; inset:auto 0 0 0; z-index:50; display:flex;
  background:rgba(255,255,255,.96); backdrop-filter:blur(8px);
  border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom);
}
.tabbar a{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 2px 7px;
  text-decoration:none; color:var(--muted); font-size:.66rem; font-weight:560;
}
.tabbar svg{width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.tabbar a[aria-current=page]{color:var(--brick)}
@media(min-width:940px){ .tabbar{display:none} .foot{padding-bottom:26px} }

@media(prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important} }