/* ===== Material-based design tokens ===== */
:root{
  /* Light scheme */
  --bg:#FAF7F3;            /* surface */
  --fg:#1B1B1F;            /* on-surface */
  --muted:#5E5E66;         /* medium emphasis text */
  --disabled:#9E9EA4;      /* disabled text */
  --line:#E5E5E5;          /* dividers/outlines */
  --accent:#6750A4;        /* primary */
  --error:#B00020;

  --radius:12px; --radius-sm:8px;
  --space:12px; --space-lg:16px;
  --shadow:none;
  --wrap-max:720px;
  --header-h:56px;

  --border: var(--line);
  --border-strong: color-mix(in srgb, var(--fg) 20%, transparent);

  --page-bg: var(--bg);
  --card-bg: transparent;
  --card-border: var(--line);
}

/* ===== Dark theme per Material guidelines ===== */
:root[data-theme="dark"]{
  --bg:#121212;                                  /* recommended dark surface */
  --fg:rgba(255,255,255,0.87);                   /* high-emphasis text */
  --muted:rgba(255,255,255,0.60);                /* medium-emphasis text */
  --disabled:rgba(255,255,255,0.38);             /* disabled text/icons */
  --line:rgba(255,255,255,0.12);                 /* outline/dividers */
  --accent:#BB86FC;                              /* primary 200-ish */
  --error:#CF6679;                               /* baseline dark error */
  --shadow:none;

  --page-bg: var(--bg);

  /* Elevated surface overlays (white % on #121212) */
  --surface-0: var(--bg);                                            
  --surface-1: color-mix(in srgb, #FFFFFF 5%,  var(--bg));           
  --surface-2: color-mix(in srgb, #FFFFFF 7%,  var(--bg));           
  --surface-3: color-mix(in srgb, #FFFFFF 8%,  var(--bg));           
  --surface-4: color-mix(in srgb, #FFFFFF 9%,  var(--bg));           
  --surface-6: color-mix(in srgb, #FFFFFF 11%, var(--bg));           
  --surface-8: color-mix(in srgb, #FFFFFF 12%, var(--bg));           
  --surface-12:color-mix(in srgb, #FFFFFF 14%, var(--bg));           
  --surface-16:color-mix(in srgb, #FFFFFF 15%, var(--bg));           
  --surface-24:color-mix(in srgb, #FFFFFF 16%, var(--bg));           

  --card-bg: var(--surface-1);
  --card-border: var(--line);
}

:root[data-theme="light"]{
  --page-bg: var(--bg);
  --card-bg: transparent;
  --card-border: var(--line);
}

/* ===== Resets & base ===== */
*{ box-sizing:border-box; }
::selection{ background: color-mix(in srgb, var(--accent) 28%, transparent); }

html,body{
  margin:0; padding:0;
  background: var(--page-bg);
  color: var(--fg);
  font:16px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  -webkit-text-size-adjust:100%;
  text-rendering: optimizeLegibility;
}
@media (max-width:480px){ html{ font-size:15.5px; } }
@media (min-width:1200px){ html{ font-size:17px; } }

a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
a.quiet{ text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--muted) 60%, transparent); }
a.quiet:hover{ border-bottom-color: currentColor; }

/* ===== Utility surfaces ===== */
.surface-0{  background: var(--surface-0);  }
.surface-1{  background: var(--surface-1);  }
.surface-2{  background: var(--surface-2);  }
.surface-3{  background: var(--surface-3);  }
.surface-4{  background: var(--surface-4);  }
.surface-6{  background: var(--surface-6);  }
.surface-8{  background: var(--surface-8);  }
.surface-12{ background: var(--surface-12); }
.surface-16{ background: var(--surface-16); }
.surface-24{ background: var(--surface-24); }

/* ===== Select (group) ===== */
select.group{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  display:inline-block; width:auto; padding:6px 28px 6px 10px;
  font:inherit; font-size:.9rem; color:inherit;
  background-color: transparent;
  border:1px solid var(--border);
  border-radius:6px;
  background-image:url("data:image/svg+xml;utf8,<svg fill='currentColor' height='12' width='12' xmlns='http://www.w3.org/2000/svg'><polygon points='0,0 12,0 6,7'/></svg>");
  background-repeat:no-repeat; background-position:right 8px center; background-size:12px;
  cursor:pointer;
}
select.group:focus{ outline:none; border-color: var(--border-strong); }

/* ===== Buttons & inputs ===== */
a.button, button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border:1px solid var(--line); border-radius: var(--radius-sm);
  background:transparent; color:inherit; font:inherit; cursor:pointer; text-decoration:none;
  touch-action:manipulation; min-height:44px; box-shadow: var(--shadow);
}
.btn-quiet{
  padding:8px 12px; min-height:38px;
  border-color: color-mix(in srgb, var(--line) 70%, transparent);
}
button:hover, a.button:hover{
  background: color-mix(in srgb, #FFFFFF 8%, transparent);
}
button:active, a.button:active{ transform:none; }
button:disabled, .disabled{
  color: var(--disabled);
  border-color: color-mix(in srgb, var(--line) 70%, transparent);
  cursor:not-allowed; opacity:.9;
}
button:focus-visible, a.button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid color-mix(in srgb, var(--accent) 30%, transparent);
  outline-offset:2px; border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
}

input, textarea, select{
  width:100%; padding:12px 12px; border:1px solid var(--line); border-radius: var(--radius-sm);
  background:transparent; color:inherit; font:inherit;
}
textarea{ resize:vertical; min-height:104px; }
input::placeholder, textarea::placeholder{ color: color-mix(in srgb, var(--muted) 65%, transparent); }

/* ===== Layout ===== */
.wrap{ max-width: var(--wrap-max); margin:0 auto; padding:16px; }
@media (max-width:480px){ .wrap{ padding:14px; } }

/* ===== Header ===== */
header.wrap{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:12px;
  height: var(--header-h);
  border-bottom:1px solid var(--line);
  background: var(--page-bg);   /* ugyanaz mint az oldal */
  padding-top:8px; padding-bottom:8px;
}
.brand a{ text-decoration:none; font-weight:700; letter-spacing:.15px; white-space:nowrap; }
.spacer{ flex:1; }
.header-right{ display:flex; align-items:center; gap:10px; }

.nav-inline{ display:none; align-items:center; gap:12px; }
@media (min-width:820px){ .nav-inline{ display:flex; } }

.hamburger{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border:1px solid color-mix(in srgb, var(--line) 60%, transparent);
  border-radius: var(--radius-sm); background:transparent; cursor:pointer;
}
.hamburger .bar{ width:18px; height:2px; background:currentColor; position:relative; }
.hamburger .bar::before, .hamburger .bar::after{
  content:""; position:absolute; left:0; width:18px; height:2px; background:currentColor;
}
.hamburger .bar::before{ top:-6px; } .hamburger .bar::after{ top:6px; }

.menu-panel{
  position:absolute; right:16px; top: calc(var(--header-h) + 8px);
  min-width:220px;
  border:1px solid var(--line); border-radius: var(--radius);
  background: var(--page-bg);
  box-shadow: var(--shadow);
  padding:8px; display:none; z-index:30;
}
.menu-panel.open{ display:block; }
.menu-grid{ display:flex; flex-direction:column; gap:6px; }
.menu-grid a, .menu-grid form button{ text-decoration:none; justify-content:flex-start; min-height:40px; padding:8px 10px; }

/* ===== Footer ===== */
.foot{
  border-top:1px solid var(--line); border-bottom:none;
  color:var(--muted); font-size:14px;
  display:flex; justify-content:space-between; align-items:center;
}

/* ===== Content blocks ===== */
.stack{ display:flex; flex-direction:column; gap: var(--space); }
.card{
  border:1px solid var(--card-border);
  padding:16px; border-radius: var(--radius);
  background: var(--card-bg);
}
.narrow{ max-width:720px; margin:32px auto; }

hr{ border:0; border-top:1px solid var(--line); margin:12px 0; }
.muted{ color:var(--muted); }
.small{ font-size:13px; }
.bar{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }

/* ===== Posts ===== */
.posts{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.posts li{ border-top:1px solid var(--line); padding-top:12px; }
.post-meta{ display:flex; gap:8px; align-items:center; color:var(--muted); font-size:14px; flex-wrap:wrap; }
.post-body{ white-space:pre-wrap; word-wrap:break-word; overflow-wrap:anywhere; }
.dot{ opacity:.6; }

/* ===== Minor links ===== */
.subtle-actions a.quiet{ font-size:14px; color:var(--muted); }
.subtle-actions a.quiet:hover{ color:inherit; border-bottom-color:currentColor; }

/* ===== Flash ===== */
.flash{ margin-top:10px; }
.flash-item{ padding:8px 12px; border:1px solid var(--line); border-radius: var(--radius-sm); }

/* ===== DM send form ===== */
#sendForm{
  position:sticky; bottom:0;
  background: var(--page-bg);
  border-top:1px solid var(--line);
  padding-top:12px; padding-bottom:4px;
}
#sendForm textarea{ min-height:84px; }
#sendBtn{ width:100%; }
.presence{ display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:14px; }
.pdot{ width:8px; height:8px; border-radius:50%; background:#4CAF50; display:inline-block; }
.pdot.off{ background:#aaa; }

/* ===== Reply preview ===== */
.reply-preview{
  padding:8px 10px; border:1px dashed var(--line);
  border-radius: var(--radius-sm); font-size:14px; color:var(--muted);
}

/* ===== Responsive tweaks ===== */
@media (max-width:480px){
  .posts li{ padding-top:10px; }
  .post-meta{ font-size:13px; gap:6px; }
  header.wrap .nav a, header.wrap .nav button{ padding:8px 10px; }
  .bar{ gap:10px; }
}

/* ===== Motion ===== */
@media (prefers-reduced-motion: no-preference){
  a, button{ transition: background .12s ease, border-color .12s ease; }
}

/* ===== Theme switch ===== */
.switch{ --w:46px; --h:26px; --knob:20px; position:relative; display:inline-flex; align-items:center; }
.switch input{ position:absolute; opacity:0; pointer-events:none; }
.switch .slider{
  width:var(--w); height:var(--h); border:1px solid var(--line);
  border-radius:999px; display:inline-block; position:relative; background:transparent;
}
.switch .slider::after{
  content:""; position:absolute; top:50%; left:3px; width:var(--knob); height:var(--knob);
  border-radius:50%; border:1px solid var(--line); background:currentColor; opacity:.85;
  transform: translate(0, -50%); transition: transform .15s ease;
}
.switch input:checked + .slider::after{ transform: translate(calc(var(--w) - var(--knob) - 6px), -50%); }

/* ===== A11y ===== */
.visually-hidden{
  position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px);
  white-space:nowrap; border:0; padding:0; margin:-1px;
}


/* ===== Toasts (flash helyett) ===== */
.toast-root{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  display:grid; gap:8px; z-index:9999; pointer-events:none;
}
.toast{
  pointer-events:auto; min-width:260px; max-width:90vw;
  background:rgba(17,18,24,.96); color:#fff;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px; padding:10px 12px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  display:flex; align-items:center; gap:10px;
  animation:toast-in .2s ease-out;
}
.toast[data-hide]{ animation:toast-out .18s ease-in forwards; }
.toast-close{
  margin-left:auto; background:none; border:0; color:inherit; font-size:18px;
  line-height:1; cursor:pointer; opacity:.7;
}
.toast-close:hover{ opacity:1; }

@media (prefers-color-scheme: light){
  .toast{ background:rgba(255,255,255,.98); color:#111; border-color:rgba(0,0,0,.12); }
}
@keyframes toast-in{ from{ transform:translateY(8px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
@keyframes toast-out{ to{ transform:translateY(4px); opacity:0; } }