/* MAHŌNO AI 2 — WordPress-specific styles layered on the mockup design system (main.css). */

/* ---------- Layout fixes ---------- */
@media (min-width: 881px) { body { padding-bottom: 0; } }
.admin-bar .site-header { top: 32px; }
.admin-bar .read-progress { top: 96px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } .admin-bar .read-progress { top: 106px; } }
.skip-link:focus { position: fixed; left: 12px; top: 12px; width: auto; height: auto; clip: auto; z-index: 999; padding: 10px 14px; background: var(--surface); color: var(--text); border-radius: 10px; outline: 2px solid var(--accent); }
.screen.active { display: block; }

/* Links used where the mockup had buttons */
.seg a { display: inline-block; padding: 5px 11px; border-radius: var(--r-pill); font-size: 13px; color: var(--text-2); }
.seg a[aria-pressed="true"], .seg a[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.seg a:hover:not([aria-pressed="true"]):not([aria-selected="true"]) { color: var(--text); }
@media (max-width: 880px) { .seg a { padding: 4px 8px; } }
.filters a { border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-pill); padding: 6px 14px; font-size: 13px; color: var(--text-2); transition: border-color .2s, color .2s; }
.filters a:hover { border-color: var(--accent); color: var(--text); }
.filters a[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.filters a.cat { border-style: dashed; }
.pager a, .pager span { min-width: 42px; height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); display: inline-grid; place-items: center; }
.pager a:hover { border-color: var(--accent); color: var(--text); }
.pager span[aria-current="page"] { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 700; }
.pager span.disabled { opacity: .4; }
.pager span.gap { border: 0; background: none; min-width: 20px; }
.user-panel a { display: block; padding: 9px 12px; border-radius: 10px; font-size: 14px; color: var(--text); }
.user-panel a:hover, .user-panel a:focus-visible { background: var(--accent-soft); }
.user-panel .logout { color: var(--bad); }
a.chip, a.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; text-decoration: none; }
.chip.sm, .chip-sm { padding: 4px 11px; font-size: 12px; }
.chip:hover { border-color: var(--accent); color: var(--text); }
.ticker-track a { display: inline-block; color: var(--text-2); }
.ticker-track a:hover { color: var(--accent); }
.ticker:hover .ticker-track { animation-play-state: paused; }

/* Whole-card links (keeps buttons inside cards clickable) */
.card { position: relative; }
.card-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.card-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.card .rx, .card button, .card form, .card .chip { position: relative; z-index: 2; }
.news-card.is-done { opacity: .9; }
.path-card.is-locked { opacity: .78; }
a.card { color: inherit; }
.card.empty { text-align: center; padding: 34px 20px; }

/* Theme toggle icon */
.ic-sun, [data-theme="dark"] .ic-moon { display: none; }
[data-theme="dark"] .ic-sun { display: inline; }
.ic-moon svg, .ic-sun svg { width: 16px; height: 16px; vertical-align: -3px; }
.avatar img, .avatar.has-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.avatar.has-photo { padding: 0; overflow: hidden; }

/* Save button state */
[data-save] .ic-on { display: none; }
[data-save][aria-pressed="true"] .ic-on { display: inline; }
[data-save][aria-pressed="true"] .ic-off { display: none; }
[data-save][aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }

/* Radio groups shown as segmented controls */
.radio-seg label, .kind-seg label { position: relative; cursor: pointer; }
.radio-seg input, .kind-seg input { position: absolute; opacity: 0; pointer-events: none; }
.radio-seg span, .kind-seg span { display: inline-block; padding: 5px 12px; border-radius: var(--r-pill); font-size: 13px; color: var(--text-2); }
.radio-seg input:checked + span, .kind-seg input:checked + span { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.radio-seg input:focus-visible + span, .kind-seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Switch driven by a real checkbox */
.switch-wrap { position: relative; display: inline-block; }
.switch-input { position: absolute; opacity: 0; width: 44px; height: 24px; margin: 0; cursor: pointer; z-index: 1; }
.switch-input:checked + .switch { background: var(--accent); border-color: var(--accent); }
.switch-input:checked + .switch::after { transform: translateX(20px); background: var(--accent-ink); }
.switch-input:focus-visible + .switch { outline: 2px solid var(--accent); outline-offset: 3px; }
.check { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; font-size: 13px; color: var(--text-2); }

/* Flash messages */
.flash.ok { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.flash.err { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); }

/* Account tabs */
.auth-wrap[data-tabs="login"] [data-panel="reg"], .auth-wrap[data-tabs="reg"] [data-panel="login"] { display: none; }
.auth-wrap[data-tabs="login"] [data-tab-title] [data-for="reg"], .auth-wrap[data-tabs="reg"] [data-tab-title] [data-for="login"] { display: none; }
.resend summary { cursor: pointer; font-size: 14px; color: var(--text-2); }
.social-login { display: grid; gap: 8px; }

/* Forms */
.news-search { margin: -8px 0 22px; max-width: 520px; }
.settings-form .form-row .field { max-width: 420px; }
.inline-form { display: inline; }
textarea.field { resize: vertical; }
.field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* Profile */
.saved-row { display: block; padding: 12px 0; border-bottom: 1px solid var(--border); }
.saved-row:hover h3 { color: var(--accent); }
.card.badge.locked-badge { opacity: .55; filter: grayscale(.6); }
.card.badge.earned .badge-ico { background: linear-gradient(135deg, var(--accent), var(--tech)); color: #fff; }
.xp-log .rank-row { grid-template-columns: 90px 1fr auto; display: grid; gap: 10px; }
.rank-row.me { background: var(--accent-soft); margin: 0 -12px; padding: 12px; border-radius: var(--r-md); }
a.step-row { color: inherit; }
a.step-row:hover { border-color: var(--accent); }
.tips { margin: 10px 0 16px; padding-left: 18px; color: var(--text-2); font-size: 14px; }
.tips li { margin: 6px 0; }

/* Article body (editor content) */
.entry-content { font-size: 1.04rem; line-height: 1.85; color: var(--text); overflow-wrap: anywhere; }
.entry-content > * { margin-block: 0 1.05em; }
.entry-content h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); margin-top: 1.6em; }
.entry-content h3 { font-size: 1.2rem; margin-top: 1.4em; }
.entry-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.entry-content img, .entry-content video, .entry-content iframe { max-width: 100%; height: auto; border-radius: var(--r-md); }
.entry-content figure { margin: 1.4em 0; }
.entry-content figcaption, .wp-caption-text { font-size: 13px; color: var(--text-3); text-align: center; margin-top: 6px; }
.entry-content blockquote { margin: 1.4em 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--accent); color: var(--text-2); }
.entry-content pre, .entry-content code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }
.entry-content pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 16px; overflow: auto; }
.entry-content :not(pre) > code { background: var(--surface-2); padding: 1px 6px; border-radius: 6px; }
.entry-content table { width: 100%; border-collapse: collapse; font-size: .95em; }
.entry-content th, .entry-content td { border: 1px solid var(--border); padding: 8px 10px; text-align: left; }
.entry-content ul, .entry-content ol { padding-left: 1.3em; }
.alignwide { margin-inline: calc(-1 * min(8vw, 80px)); max-width: none; }
.alignfull { margin-inline: calc(50% - 50vw); max-width: 100vw; }
.alignleft { float: left; margin: .3em 1.2em 1em 0; }
.alignright { float: right; margin: .3em 0 1em 1.2em; }
.aligncenter { margin-inline: auto; display: block; }
.article-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.source { font-size: 14px; margin-top: 18px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.tags a { font-size: 12px; padding: 3px 10px; border-radius: var(--r-pill); border: 1px solid var(--border); color: var(--text-2); }
.page-article { max-width: 760px; }
.sticky, .bypostauthor, .gallery-caption { outline: 0; }

/* Community comments */
.comment-list .children { margin: 0; padding: 0; }
.cmt.accepted { border-top-color: var(--ok); }
.cmt.accepted > .cmt-t { border-left: 3px solid var(--ok); padding-left: 12px; }
.cmt-h time { margin-left: auto; font-size: 12px; }
.cmt-t p { margin: 6px 0 10px; }
.comment-form { margin-top: 20px; display: grid; gap: 10px; }
.comment-form .comment-reply-title { margin: 0; font-size: 1.1rem; }
.comment-form .form-submit { margin: 0; }
.comment-reply-link { color: inherit; }
.must-log-in { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; margin: 0; }
.thread-body p { margin: 0 0 .8em; font-size: 1.02rem; }

/* XP toast + celebration */
.mh-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); opacity: 0; z-index: 200; padding: 10px 18px; border-radius: var(--r-pill);
	background: linear-gradient(135deg, var(--accent), var(--tech)); color: #fff; font-weight: 700; box-shadow: 0 14px 40px -12px rgba(0,0,0,.5); transition: opacity .3s var(--ease), transform .3s var(--ease); pointer-events: none; }
.mh-toast.show { opacity: 1; transform: translate(-50%, 0); }
.mh-toast.bad { background: var(--surface); color: var(--text); border: 1px solid var(--bad); }
@media (max-width: 880px) { .mh-toast { bottom: 90px; } }
.mh-burst { position: absolute; left: 50%; top: 40%; width: 0; height: 0; pointer-events: none; z-index: 5; }
.mh-burst i { position: absolute; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); animation: mhBurst 1s var(--ease) forwards; }
.mh-burst i:nth-child(3n) { background: var(--tech); }
.mh-burst i:nth-child(4n) { background: #7ef0d2; border-radius: 50%; }
@keyframes mhBurst { from { transform: rotate(var(--a)) translateX(0) scale(1); opacity: 1; } to { transform: rotate(var(--a)) translateX(var(--d)) scale(.4); opacity: 0; } }

/* Quiz + Arena */
.quiz .opt, .arena .opt { width: 100%; }
.arena .opt.sel { border-color: var(--accent); background: var(--accent-soft); }
.quiz .opt:focus-visible, .arena .opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Footer */
.ft-social a { display: inline-flex; }
.ft-social a:hover span { border-color: var(--accent); color: var(--accent); }
.site-footer a:hover { color: var(--accent); }
.ft-form { display: flex; }

/* Admin quick links (optional) */
.mock-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 95; padding: 8px 16px; background: #000; color: #bbb; font-size: 12px; }
.mock-bar .row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mock-bar a { border: 1px solid #333; background: #111; color: #ccc; padding: 4px 10px; border-radius: 999px; }
@media (max-width: 880px) { .mock-bar { display: none; } }

/* Performance mode: no motion layers */
.no-fx .hero-fx, .no-fx .deco .beam { display: none; }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* Static lamp: transparent artwork in light mode */
.lamp3d.no-gl .lamp-fallback-light { display: none; }
[data-theme="light"] .lamp3d.no-gl .lamp-fallback-dark { display: none; }
[data-theme="light"] .lamp3d.no-gl .lamp-fallback-light { display: block; }

/* Header on small phones */
.site-header .tools .btn.sm, .site-header .tools .chip { white-space: nowrap; }
@media (max-width: 420px) { .site-header .only-guest .chip { display: none; } .site-header .tools .btn.sm { padding: 6px 12px; font-size: 13px; } .seg a { padding: 4px 6px; font-size: 12px; } }
input[type="file"].field { padding: 8px 10px; font-size: 13px; }
input[type="file"].field::file-selector-button { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: var(--r-pill); padding: 5px 12px; margin-right: 10px; cursor: pointer; }

/* Thai / Japanese read better without wide tracking */
:lang(th) .eyebrow, :lang(ja) .eyebrow, :lang(th) .tag, :lang(ja) .tag { letter-spacing: .04em; }