/* ══════════════════════════════════════════════════════════════════════
   digitalismunkahely.hu — a telephely.

   A nyitókép nem dísz, hanem a felület: minden épület egy lap, és MINDEN
   ELINTÉZETLEN DOLOG EGY ALAK, aki odakint jár. Ahány embert látsz az
   udvaron, annyi a teendőd — ha végzel eggyel, elmegy.

   🪤 Nincs build-lépés: ez a fájl statikusan a public/-ban él.
   A grafika Kenney CC0 készleteiből RENDERELT — a lánc: tools/colony/.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --sky-1:#2B2637; --sky-2:#1D1A28;
  --ink:#F2EEE6; --muted:#B0A9C0; --faint:#847C96;
  --page:#15121C; --card:#1E1A28; --rule:#2E2839; --sunk:#191521;
  --act:#4FC38C; --act-ink:#06231A;
  --warn:#F2A65A; --alarm:#F0705F;
  --f-disp:"Fraunces",Georgia,serif;
  --f:"Figtree","Segoe UI",system-ui,sans-serif;
  --page-w:1240px;
  color-scheme:dark;
}
/* A telep fényképe nem változik a témával — egy telephely nappal is olyan,
   amilyen. Csak a lap kerete világosodik köré. */
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --ink:#221E2C; --muted:#5C5666; --faint:#8A8494;
    --page:#F5F3F7; --card:#FFFFFF; --rule:#E3DFE9; --sunk:#EDEAF2;
    --act:#1F7A52; --act-ink:#FFFFFF;
    --warn:#9A5A12; --alarm:#B23B2E;
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --ink:#221E2C; --muted:#5C5666; --faint:#8A8494;
  --page:#F5F3F7; --card:#FFFFFF; --rule:#E3DFE9; --sunk:#EDEAF2;
  --act:#1F7A52; --act-ink:#FFFFFF;
  --warn:#9A5A12; --alarm:#B23B2E;
  color-scheme:light;
}

*{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--ink);
  font-family:var(--f);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--f-disp);line-height:1.15;text-wrap:balance}
h1{font-size:clamp(26px,3vw,34px);font-weight:600}
h2{font-size:22px;font-weight:600}
h3{font-size:18px;font-weight:600}
a{color:var(--act)}
.wrap{max-width:var(--page-w);margin:0 auto;padding:0 26px}
:focus-visible{outline:2px solid var(--act);outline-offset:3px;border-radius:5px}

.notice{padding:9px 26px;background:var(--sunk);border-bottom:1px solid var(--rule);
  font-size:12.5px;color:var(--faint);letter-spacing:.04em}

/* ── fejléc ──────────────────────────────────────────────────────────── */
.top{background:var(--card);border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  padding-top:14px;padding-bottom:14px}
.top .brand{font-family:var(--f-disp);font-weight:600;font-size:18px;text-decoration:none;color:inherit}
.picker{position:relative}
.picker summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;
  padding:6px 13px;border:1px solid var(--rule);border-radius:22px;background:var(--sunk);
  font-size:14.5px;color:var(--ink)}
.picker summary::-webkit-details-marker{display:none}
.picker .menu{position:absolute;top:calc(100% + 6px);left:0;min-width:270px;z-index:30;
  background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:6px;
  box-shadow:0 8px 30px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:2px}
.picker .menu a{display:flex;gap:10px;align-items:baseline;padding:9px 11px;border-radius:7px;
  text-decoration:none;color:var(--ink);font-size:14.5px}
.picker .menu a:hover{background:var(--sunk)}
.picker .menu a[aria-current]{background:var(--sunk);font-weight:600}
.picker .menu .role{margin-left:auto;font-size:12.5px;color:var(--faint)}
.nav{display:flex;gap:3px;flex-wrap:wrap}
.nav a{font-size:14.5px;padding:6px 12px;border-radius:20px;text-decoration:none;color:var(--muted)}
.nav a:hover{background:var(--sunk);color:var(--ink)}
.nav a[aria-current]{background:var(--sunk);color:var(--ink);font-weight:600}
.top .me{margin-left:auto;display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14.5px}
.top .me .swap{font-size:13px;text-decoration:none;color:var(--muted);
  padding:5px 11px;border-radius:18px;border:1px solid var(--rule)}
.top .me .swap:hover{color:var(--ink);background:var(--sunk)}
.top .me i{width:31px;height:31px;border-radius:50%;background:var(--act);color:var(--act-ink);
  display:grid;place-items:center;font-style:normal;font-weight:700;font-size:12px}

/* ── a telephely ─────────────────────────────────────────────────────── */
.colony{background:linear-gradient(180deg,var(--sky-1),var(--sky-2));border-bottom:1px solid var(--rule)}
.land{position:relative;max-width:var(--page-w);margin:0 auto;container-type:inline-size}
.land>img.map{display:block;width:100%;height:auto}

/* 🪤 A helyeken NINCS z-index: a takarást a lap sorrendje adja (hátulról előre,
   lásd config/colony.php). Ha z-indexet teszel rá, a felirata beragad a saját
   rétegébe, és a szomszéd épület kitakarja. */
.place{position:absolute;line-height:0;text-decoration:none;
  transition:transform .18s cubic-bezier(.2,.7,.3,1),filter .18s ease}
.place>img{width:100%;height:auto;display:block}
/* A kattinthatóság jele: fény gyúl a talpánál, ha ráállsz. */
.place::before{content:"";position:absolute;left:50%;bottom:6%;width:78%;padding-top:26%;
  transform:translate(-50%,50%) scale(.55);border-radius:50%;opacity:0;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--act) 52%,transparent),transparent 72%);
  transition:opacity .18s ease,transform .18s ease}
.place:hover,.place:focus-visible{transform:translateY(-6px);
  filter:drop-shadow(0 12px 9px rgba(0,0,0,.45))}
.place:hover::before,.place:focus-visible::before{opacity:1;transform:translate(-50%,50%) scale(1)}

/* A felirat KELL: készletgrafikán a forma önmagában nem mondja meg, mi micsoda.
   Az irányt a config adja, hogy ne fedjék egymást. */
.tag{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:3px;z-index:9;
  white-space:nowrap;line-height:1.32;text-align:center;pointer-events:none;
  font-size:12px;color:var(--muted);padding:4px 10px;border-radius:14px;
  background:rgba(18,15,26,.78);opacity:.84;
  transition:opacity .18s ease,background .18s ease}
.tag b{display:block;font-weight:600;font-size:13px;color:#F2EEE6}
.place:hover .tag,.place:focus-visible .tag{opacity:1;background:rgba(18,15,26,.94)}
.place.t-above .tag{top:0;margin-top:0;transform:translate(-50%,-112%)}
.place.t-left  .tag{top:50%;left:0;margin-top:0;transform:translate(-96%,-50%)}
.place.t-right .tag{top:50%;left:100%;margin-top:0;transform:translate(-4%,-50%)}
/* A székház a cég: a felirata is ezt mondja. */
#p-hq .tag{background:rgba(11,42,31,.86)}
#p-hq .tag b{color:#8CE9BE}

/* ── az alakok: minden teendő egy ember ──────────────────────────────── */
/* Egy PNG, nyolc járáskocka × négy irány. A cella a vászon szélességének
   6,4706%-a — ugyanaz a lépték, amivel a telep készült. */
.worker{position:absolute;z-index:20;width:6.4706cqw;aspect-ratio:1;overflow:hidden;
  text-decoration:none;
  animation:patrol 26s linear infinite;animation-delay:var(--d,0s)}
.worker>img{position:absolute;left:0;top:0;width:800%;height:400%;
  animation:film 1.2s steps(8,end) infinite, turn 26s steps(4,end) infinite;
  animation-delay:0s,var(--d,0s)}
@keyframes film{from{left:0}   to{left:-800%}}
@keyframes turn{from{top:0}    to{top:-400%}}
/* A járás izometrikus: másfél csempét lép oldalra, felet lefelé — ezért néz ki
   sétának. A sprite sorai ugyanebben a sorrendben állnak (jobbra-le, balra-le,
   balra-fel, jobbra-fel), ezért fordul a megfelelő irányba. */
@keyframes patrol{
  0%   {transform:translate(0,0)}
  25%  {transform:translate(5.435cqw,3.138cqw)}
  50%  {transform:translate(0,6.276cqw)}
  75%  {transform:translate(-5.435cqw,3.138cqw)}
  100% {transform:translate(0,0)}
}
/* A fej fölötti pont: a sürgősség. Ez teszi megtalálhatóvá az apró alakot. */
.worker::after{content:"";position:absolute;left:50%;top:6%;transform:translateX(-50%);
  width:9px;height:9px;border-radius:50%;background:var(--act);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--act) 30%,transparent);
  transition:transform .16s ease}
.worker[data-urgency="soon"]::after{background:var(--warn);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--warn) 30%,transparent)}
.worker[data-urgency="overdue"]::after{background:var(--alarm);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--alarm) 32%,transparent)}
.worker:hover,.worker:focus-visible{filter:drop-shadow(0 0 7px rgba(255,255,255,.55))}
.worker:hover::after,.worker:focus-visible::after{transform:translateX(-50%) scale(1.5)}

@media (prefers-reduced-motion:reduce){
  .worker,.worker>img{animation:none}
  .place{transition:none}
}

/* ── a lap alja ──────────────────────────────────────────────────────── */
.deck{padding:34px 0 62px}
.deck .lede{color:var(--muted);max-width:58ch;margin-top:10px}
.jobs{margin:26px 0 0;padding:0;list-style:none}
.jobs li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:center;
  padding:19px 0;border-top:1px solid var(--rule)}
.jobs li:last-child{border-bottom:1px solid var(--rule)}
.jobs .from{font-size:13.5px;color:var(--faint);margin-bottom:2px}
.jobs .said{color:var(--muted);margin-top:3px;max-width:62ch}
.jobs .act{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.jobs .left{font-size:14px;color:var(--faint);white-space:nowrap}
.jobs .left.soon{color:var(--warn);font-weight:600}
.jobs .left.overdue{color:var(--alarm);font-weight:600}
.jobs .go{font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap;
  padding:9px 19px;border-radius:24px;background:var(--act);color:var(--act-ink)}
.jobs .go.quiet{background:transparent;color:var(--act);box-shadow:inset 0 0 0 1px var(--act)}

.empty{margin-top:24px;padding:26px;border:1px dashed var(--rule);border-radius:12px;color:var(--muted)}
.empty strong{display:block;font-family:var(--f-disp);font-size:17px;color:var(--ink);margin-bottom:5px}

.since{padding:0 0 66px}
.since h2{font-size:19px}
.since ol{margin:16px 0 0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr))}
.since li{padding:13px 20px 13px 0;border-top:1px solid var(--rule)}
.since time{display:block;font-size:13.5px;color:var(--faint);margin-bottom:2px}
.since p{font-size:14.5px}
.since p span{color:var(--muted)}

footer{border-top:1px solid var(--rule);background:var(--card)}
footer .wrap{padding-top:20px;padding-bottom:32px;color:var(--faint);font-size:13.5px;
  display:flex;gap:24px;flex-wrap:wrap}

@media (max-width:760px){
  .jobs li{grid-template-columns:1fr}
  .jobs .act{flex-direction:row;align-items:center;justify-content:space-between}
  .worker{display:none}
  .tag{font-size:10.5px;padding:3px 7px}
  .tag b{font-size:11px}
}