/* Mirrify — Tudástár „élő mini-widgetek". Kis, önálló interaktív demók a cikkek
   végén, amik az adott app-funkciót idézik. A legal.css tokenjeire épül
   (--panel, --ink, --line, --neon tokenek). A markupot a tudastar-widgets.js építi. */

/* Tömör, kiemelt doboz — a mozgó neon/lila víz-háttérről leemelve. Sötétben
   fekete (--panel #111114), világosban fehér (#fff). A belső neon/színes szöveg
   marad. Markáns árnyék + tömör alap, hogy sose olvadjon a háttérbe. */
.mw{border:1px solid var(--line-2);border-radius:20px;background:radial-gradient(120% 80% at 50% 0%,rgba(210,251,69,.06),transparent 60%),var(--panel);padding:26px 24px;margin:40px 0 8px;position:relative;z-index:1;overflow:hidden;box-shadow:0 40px 90px -55px rgba(0,0,0,.95),0 0 0 1px var(--line)}
.mw-eye{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--neon);font-weight:800}
.mw-h{font-family:var(--sans);font-weight:800;font-size:20px;margin:9px 0 4px;color:var(--ink);letter-spacing:-.01em}
.mw-sub{color:var(--ink-3);font-size:14px;line-height:1.5;margin:0 0 20px}
.mw-body{margin:0}

/* Közös vezérlők */
.mw-field{width:100%;background:var(--bg);border:1px solid var(--line-2);border-radius:11px;
  padding:11px 13px;color:var(--ink);font:inherit;font-size:14.5px;outline:none;transition:border-color .18s}
.mw-field:focus{border-color:var(--neon)}
.mw-field::placeholder{color:var(--ink-3)}

.mw-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:22px}
.mw-note{font-size:12.5px;color:var(--ink-3);line-height:1.4}
.mw-cta{display:inline-flex;align-items:center;gap:8px;background:var(--neon);color:var(--neon-ink);
  font-weight:700;font-size:14.5px;padding:11px 20px;border-radius:100px;text-decoration:none;
  transition:transform .15s,filter .15s;white-space:nowrap}
.mw-cta:hover{transform:translateY(-2px);filter:brightness(1.04)}

/* ——— Életkerék (radar) ——— */
.mw-wheel{display:grid;grid-template-columns:1fr 210px;gap:26px;align-items:center}
.mw-sliders{display:flex;flex-direction:column;gap:11px}
.mw-slider{display:grid;grid-template-columns:104px 1fr 24px;align-items:center;gap:11px;font-size:13.5px;color:var(--ink-2)}
.mw-slider input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:4px;background:var(--line-2);outline:none;cursor:pointer}
.mw-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%;background:var(--neon);border:2px solid var(--panel);cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.mw-slider input[type=range]::-moz-range-thumb{width:17px;height:17px;border-radius:50%;background:var(--neon);border:2px solid var(--panel);cursor:pointer}
.mw-slider b{text-align:right;color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.mw-radar-wrap{text-align:center}
.mw-radar{width:100%;max-width:210px;height:auto}
.mw-radar .grid{fill:none;stroke:var(--line);stroke-width:1}
.mw-radar .axis{stroke:var(--line);stroke-width:1}
.mw-radar .area{fill:color-mix(in srgb,var(--neon) 22%,transparent);stroke:var(--neon);stroke-width:2;stroke-linejoin:round;transition:all .25s ease}
.mw-radar .pt{fill:var(--neon)}
.mw-balance{font-size:13px;color:var(--ink-3);margin-top:10px}
.mw-balance b{color:var(--ink);font-size:18px;font-weight:800}
@media(max-width:600px){.mw-wheel{grid-template-columns:1fr;gap:18px}.mw-radar-wrap{order:-1}.mw-slider{grid-template-columns:92px 1fr 22px}}

/* ——— Chip-sorok / checklist ——— */
.mw-checklist{display:flex;flex-direction:column;gap:11px}
.mw-check{display:flex;align-items:flex-start;gap:12px}
.mw-check .box{flex:0 0 auto;width:22px;height:22px;border-radius:7px;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;color:transparent;margin-top:9px;transition:all .2s}
.mw-check.on .box{background:var(--neon);border-color:var(--neon);color:var(--neon-ink)}
.mw-check .box svg{width:13px;height:13px}
.mw-check .in{flex:1}
.mw-check .cl{font-size:12px;color:var(--ink-3);margin-bottom:5px;font-weight:600}
.mw-preview{border:1px dashed var(--line-2);border-radius:14px;padding:16px 18px;margin-top:18px;background:var(--bg);
  font-size:15px;line-height:1.6;color:var(--ink)}
.mw-preview .ph{color:var(--ink-3)}
.mw-preview .hl{color:var(--ink);font-weight:600;border-bottom:2px solid color-mix(in srgb,var(--neon) 55%,transparent)}

/* ——— Hangulat: arcok + heti oszlopok ——— */
.mw-faces{display:flex;gap:10px;justify-content:space-between;margin-bottom:22px}
.mw-face{flex:1;aspect-ratio:1;max-width:60px;border:1px solid var(--line-2);border-radius:14px;background:var(--bg);
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .18s;padding:0}
.mw-face svg{width:60%;height:60%;stroke:var(--ink-3);transition:stroke .18s}
.mw-face:hover{border-color:var(--ink-3)}
.mw-face.on{border-color:var(--neon);background:color-mix(in srgb,var(--neon) 12%,transparent)}
.mw-face.on svg{stroke:var(--ink)}
.mw-week{display:flex;align-items:flex-end;gap:8px;height:88px;padding-top:6px}
.mw-week .day{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;height:100%;justify-content:flex-end}
.mw-week .bar{width:100%;max-width:26px;background:linear-gradient(var(--ink-3),var(--line-2));border-radius:5px;min-height:5px;transition:height .3s ease,background .3s}
.mw-week .day.today .bar{background:linear-gradient(color-mix(in srgb,var(--neon) 90%,#fff),var(--neon))}
.mw-week .dl{font-size:11px;color:var(--ink-3)}
.mw-week .day.today .dl{color:var(--ink);font-weight:700}
.mw-moodlbl{text-align:center;font-size:14px;color:var(--ink-2);margin-top:14px}
.mw-moodlbl b{color:var(--ink)}

/* ——— Szokás: 7 nap kör ——— */
.mw-days{display:flex;gap:9px;justify-content:space-between;margin:6px 0 4px}
.mw-days .d{flex:1;aspect-ratio:1;max-width:46px;border-radius:50%;border:1px solid var(--line-2);background:var(--bg);
  color:var(--ink-3);font-size:12.5px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .18s;padding:0}
.mw-days .d:hover{border-color:var(--ink-3)}
.mw-days .d.on{background:var(--neon);border-color:var(--neon);color:var(--neon-ink)}
.mw-streak{text-align:center;margin-top:16px;font-size:14px;color:var(--ink-2)}
.mw-streak b{color:var(--ink);font-size:22px;font-weight:800;font-family:var(--serif)}

/* ——— Ikigai: 4 kvadráns + közép ——— */
.mw-ikigai{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mw-iq{border:1px solid var(--line-2);border-radius:14px;padding:14px 15px;background:var(--bg)}
.mw-iq .ql{font-size:12px;color:var(--neon);font-weight:700;margin-bottom:8px}
.mw-iq textarea,.mw-iq input{width:100%;background:transparent;border:0;color:var(--ink);font:inherit;font-size:14px;outline:none;resize:none}
.mw-ikigai-center{grid-column:1/-1;text-align:center;border:1px dashed var(--line-2);border-radius:14px;padding:18px;margin-top:2px;
  color:var(--ink-3);font-size:14px;transition:all .3s}
.mw-ikigai-center.on{border-style:solid;border-color:var(--neon);background:color-mix(in srgb,var(--neon) 8%,transparent);color:var(--ink)}
.mw-ikigai-center b{display:block;font-family:var(--serif);font-size:22px;color:var(--ink);margin-bottom:3px}
@media(max-width:520px){.mw-ikigai{grid-template-columns:1fr}}

/* ——— Több-mezős (hála / reflexió / séma) ——— */
.mw-rows{display:flex;flex-direction:column;gap:12px}
.mw-row-lbl{font-size:12px;color:var(--ink-3);font-weight:600;margin-bottom:6px;display:block}
.mw-count{font-size:12.5px;color:var(--ink-3)}
.mw-count b{color:var(--neon)}