/* TNT 2026: plugin front ends (dividers, brackets, keywords, supporter). Layout Final plugin board. */

/* ---------- section divider: line · WUBRG · line ---------- */
.tnt-div { display: flex; align-items: center; gap: 16px; width: 100%; max-width: none; margin: 1.8em 0; padding: 4px 0; }
.tnt-div > span:not(.tnt-div__pips) { flex: 1; height: 1px; background: rgba(255, 255, 255, 0.18); }
.tnt-div__pips { display: flex; gap: 6px; }
.tnt-div__pips .tnt-pip { animation: tntPipIn .5s var(--tnt-ease) both; }
.tnt-div__pips .tnt-pip:nth-child(2) { animation-delay: .06s; } .tnt-div__pips .tnt-pip:nth-child(3) { animation-delay: .12s; }
.tnt-div__pips .tnt-pip:nth-child(4) { animation-delay: .18s; } .tnt-div__pips .tnt-pip:nth-child(5) { animation-delay: .24s; }
@keyframes tntPipIn { from { opacity: 0; transform: translateY(6px) scale(.8); } to { opacity: 1; transform: none; } }
.tnt-div--simple { height: 1px; padding: 0; background: rgba(255, 255, 255, 0.18); }
.tnt-article-body > .tnt-div { margin-top: 1.8em; margin-bottom: 1.8em; }

/* ---------- bracket block ---------- */
.tnt-bracket { max-width: none; margin: 2em 0; padding: 22px 24px; background: var(--tnt-bg-2); border-top: 3px solid var(--tnt-accent); display: flex; flex-direction: column; gap: 16px; font-size: 16px; line-height: 1.5; }
.tnt-article-body .tnt-bracket * + * { margin-top: 0; }
.tnt-bracket__track { margin: 0 !important; padding: 0 !important; list-style: none; display: flex; gap: 3px; }
.tnt-bracket__track li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 2px; background: #252525; color: var(--tnt-muted); transition: background-color .2s; }
.tnt-bracket__track li.is-past { background: rgba(79, 111, 214, 0.18); color: var(--tnt-accent-text); }
.tnt-bracket__track li.is-on { background: var(--tnt-accent-readable); color: var(--tnt-accent-ink); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); }
.tnt-bracket__track b { font-family: var(--tnt-font-display); font-weight: 400; font-size: 22px; line-height: 1; }
.tnt-bracket__track i { font-style: normal; font-family: var(--tnt-font-ui); font-weight: 700; font-size: var(--tnt-ui-small); letter-spacing: 0.04em; text-transform: uppercase; }
.tnt-bracket__body { display: flex; flex-direction: column; gap: 8px; }
.tnt-bracket__body strong { font-family: var(--tnt-font-display); font-weight: 400; font-size: 22px; text-transform: uppercase; color: var(--tnt-white); }
.tnt-bracket__body p { margin: 0; font-size: 15px; color: var(--tnt-text-2); }
.tnt-brules { margin: 4px 0 0 !important; padding: 0 !important; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.tnt-brules li { display: flex; align-items: center; gap: 10px; margin: 0 !important; font-size: 13px; line-height: 1.4; color: #d1d5db; }
.tnt-brules li span { width: 20px; height: 20px; flex: 0 0 20px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.tnt-brules li.is-yes span { background: rgba(79, 111, 214, 0.2); color: var(--tnt-accent-text); }
.tnt-brules li.is-no span { background: rgba(194, 65, 12, 0.2); color: #fdba74; }

/* ---------- keyword tooltips (TNT Keywords markup + popover) ---------- */
.tnt-kw { display: inline; }
.tnt-kw-term { display: inline; padding: 0; margin: 0; border: 0; border-bottom: 1px dashed rgba(157, 179, 242, 0.7); background: none; font: inherit; color: var(--tnt-accent-text); cursor: help; text-transform: inherit; letter-spacing: inherit; transition: color .15s, border-color .15s, background-color .15s; }
.tnt-kw-term:hover, .tnt-kw-term[aria-expanded="true"] { color: #c7d4fa; border-bottom-style: solid; background: rgba(79, 111, 214, 0.12); }
.tnt-kw-term:focus-visible { outline: 2px solid var(--tnt-accent-text); outline-offset: 2px; }
.tnt-kw-d[hidden] { display: none; }
#tnt-kw-popover { position: fixed; left: 0; top: 0; z-index: 160; width: 300px; max-width: calc(100vw - 24px); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; background: #0c0c0c; border: 1px solid rgba(157, 179, 242, 0.45); border-top: 3px solid var(--tnt-accent); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6); font-family: var(--tnt-font-body); font-size: 13px; line-height: 1.6; color: #d1d5db; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .16s, transform .16s, visibility 0s .16s; pointer-events: none; }
#tnt-kw-popover.is-open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .16s, transform .16s; }
.tnt-kw-pop-title { font-family: var(--tnt-font-display); font-size: 15px; line-height: 1.1; text-transform: uppercase; color: var(--tnt-white); }
.tnt-kw-pop-text .ms, .tnt-kw-sym { font-size: .9em; }
.tnt-kw-pop-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.tnt-kw-pop-foot a { font-family: var(--tnt-font-ui); font-weight: 700; font-size: var(--tnt-ui-small); letter-spacing: 0.04em; text-transform: uppercase; color: var(--tnt-accent-text); border: 0 !important; }
.tnt-kw-pop-foot a:hover { color: var(--tnt-white); }
.tnt-kw-pop-attr { font-family: var(--tnt-font-ui); font-weight: 700; font-size: var(--tnt-ui-small); letter-spacing: 0.04em; text-transform: uppercase; color: var(--tnt-dim); }
.tnt-kw-pop-arrow { position: absolute; width: 10px; height: 10px; background: #0c0c0c; border: 0 solid rgba(157, 179, 242, 0.45); transform: rotate(45deg); }

/* ---------- supporter (TNT Supporter markup) ---------- */
:root {
	--tnt-sup-gold: var(--tnt-gold);
	--tnt-sup-dark: #080808;
	--tnt-sup-panel: var(--tnt-bg-2);
	--tnt-sup-panel-inner: var(--tnt-bg-1);
	--tnt-sup-head-bg: var(--tnt-bg-deep);
	--tnt-sup-text: var(--tnt-text);
	--tnt-sup-muted: var(--tnt-muted);
	--tnt-sup-r: 0;
}
body.tnt-supporter .tnt-ad, body.tnt-supporter .tnt-adwrap, body.tnt-supporter [data-tnt-supporter-hide] { display: none !important; }
body.tnt-supporter [data-tnt-supporter] { pointer-events: auto; }
.tnt-sup-dock { left: 16px; bottom: 16px; z-index: 80; }
.tnt-sup-badge { border-radius: 0 !important; background: var(--tnt-bg-deep) !important; border: 1px solid rgba(197, 160, 89, 0.5) !important; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5) !important; }
.tnt-sup-badge-text { font-family: var(--tnt-font-ui) !important; font-weight: 700; letter-spacing: 0.1em !important; text-transform: uppercase; color: var(--tnt-gold-2) !important; }
.tnt-sup-overlay { z-index: 170 !important; background: rgba(6, 6, 6, 0.86) !important; backdrop-filter: none !important; }
.tnt-sup-modal { border-radius: 0 !important; border: 0 !important; border-top: 4px solid var(--tnt-gold) !important; background: var(--tnt-bg-2) !important; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7) !important; }
.tnt-sup-x { border-radius: 0 !important; background: #252525 !important; border: 0 !important; color: #fff !important; width: 40px !important; height: 40px !important; }
.tnt-sup-modal-head { border-radius: 0 !important; }
.tnt-sup-modal-tagline { font-family: var(--tnt-font-ui) !important; font-weight: 700; letter-spacing: 0.14em !important; text-transform: uppercase; }
.tnt-sup-title { font-family: var(--tnt-font-display) !important; font-weight: 400 !important; text-transform: uppercase; letter-spacing: 0 !important; color: var(--tnt-white) !important; }
.tnt-sup-mission, .tnt-sup-subtitle { font-family: var(--tnt-font-body) !important; color: var(--tnt-text-2) !important; }
.tnt-sup-perks li { font-family: var(--tnt-font-body) !important; }
.tnt-sup-perks li svg { color: var(--tnt-gold) !important; }
.tnt-sup-buy-btn { border-radius: 0 !important; background: var(--tnt-gold) !important; color: var(--tnt-gold-ink) !important; font-family: var(--tnt-font-ui) !important; font-weight: 700; letter-spacing: 0.1em !important; text-transform: uppercase; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18) !important; }
.tnt-sup-buy-btn:hover { filter: brightness(1.08); }
.tnt-sup-buy-note, .tnt-sup-divider span { font-family: var(--tnt-font-ui) !important; font-weight: 700; letter-spacing: 0.08em !important; text-transform: uppercase; }
.tnt-sup-code-input, .tnt-sup-lost-email { border-radius: 0 !important; background: var(--tnt-bg-deep) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; border-bottom: 2px solid var(--tnt-gold) !important; color: var(--tnt-white) !important; font-size: 16px !important; }
.tnt-sup-code-input::placeholder, .tnt-sup-lost-email::placeholder { color: var(--tnt-dim) !important; }
.tnt-sup-activate-btn, .tnt-sup-ghost-btn, .tnt-sup-copy-btn { border-radius: 0 !important; font-family: var(--tnt-font-ui) !important; font-weight: 700; letter-spacing: 0.1em !important; text-transform: uppercase; }
.tnt-sup-activate-btn { background: #252525 !important; color: var(--tnt-gold-2) !important; border: 0 !important; box-shadow: inset 0 -2px 0 rgba(197, 160, 89, 0.45) !important; }
.tnt-sup-code-box { border-radius: 0 !important; background: var(--tnt-bg-deep) !important; border: 1px dashed rgba(197, 160, 89, 0.5) !important; }
.tnt-sup-code-text { font-family: Menlo, Consolas, monospace !important; color: var(--tnt-gold-2) !important; }
.tnt-sup-check-icon { border-radius: 0 !important; }
@media (max-width: 760px) {
	.tnt-sup-dock { bottom: calc(var(--tnt-tabs-h) + 14px + env(safe-area-inset-bottom)); left: 12px; }
	.single-post .tnt-sup-dock { bottom: 76px; }
	.tnt-sup-overlay { align-items: flex-end !important; padding: 0 !important; }
	.tnt-sup-modal { width: 100% !important; max-width: none !important; max-height: 92dvh !important; overflow-y: auto !important; border-radius: 16px 16px 0 0 !important; border-top-width: 3px !important; }
	.tnt-div { gap: 10px; margin: 1.6em 0; }
	.tnt-div__pips .tnt-pip { --s: 20px !important; }
	.tnt-bracket { padding: 18px 16px; }
	.tnt-bracket__track i { font-size: var(--tnt-ui-small); letter-spacing: 0; }
	.tnt-bracket__track b { font-size: 19px; }
	#tnt-kw-popover { width: auto; left: 12px !important; right: 12px; }
}
@media (prefers-reduced-motion: reduce) { .tnt-div__pips .tnt-pip { animation: none; } }

/* Ad-free offer paused: no floating badge (the plugin still runs, so existing supporters stay ad-free).
   To bring it back, delete this rule and restore the "Go ad-free" links in header.php, footer.php
   and tnt_ad() (inc/home.php). */
.tnt-sup-dock, #tnt-sup-badge { display: none !important; }

/* ---- EDH bracket v2 (canvas: Plugin redesign 01) ---- */
.tnt-bracket.tnt-b2 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0; padding: 0; background: #151515; border-top: 3px solid var(--tnt-gold); box-shadow: 0 22px 50px rgba(0, 0, 0, 0.45); }
.tnt-article-body .tnt-b2 * + * { margin-top: 0; }
.b2-l { padding: 26px 28px 28px; display: flex; flex-direction: column; gap: 18px; }
.b2-r { padding: 26px 28px; background: #111; border-left: 1px solid rgba(255, 255, 255, 0.06); display: flex; flex-direction: column; gap: 14px; }
.b2-lbl { font-family: var(--tnt-font-ui); font-weight: 700; font-size: var(--tnt-ui-small); letter-spacing: 0.04em; text-transform: uppercase; color: var(--tnt-muted); }
.b2-big { display: flex; align-items: center; gap: 18px; }
.b2-num { flex: 0 0 80px; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #5a7be0, #3b55b0); color: #fff; font-family: var(--tnt-font-display); font-size: 50px; line-height: 1; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.b2-name { font-family: var(--tnt-font-display); font-size: 36px; line-height: .95; text-transform: uppercase; color: #fff; }
.b2-desc { margin-top: 6px; font-size: 14px; line-height: 1.5; color: #c4c9d0; }
.b2-gauge { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.b2-gauge div { display: flex; flex-direction: column; gap: 8px; }
.b2-gauge s { display: block; height: 12px; background: #262626; text-decoration: none; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.b2-gauge .is-on s { background: linear-gradient(90deg, #4f6fd6, #7e98ea); }
.b2-gauge .is-cur s { background: linear-gradient(90deg, #c5a059, #f0d79a); box-shadow: 0 0 18px rgba(230, 200, 133, 0.6); }
.b2-gauge span { font-family: var(--tnt-font-ui); font-weight: 700; font-size: var(--tnt-ui-small); letter-spacing: 0.04em; text-transform: uppercase; color: var(--tnt-dim); }
.b2-gauge .is-cur span { color: var(--tnt-gold-2); }
.tnt-article-body .b2-rules { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.b2-rules li { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.4; color: #e5e7eb; }
.b2-ok, .b2-no { flex: 0 0 26px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; }
.b2-ok { background: rgba(79, 111, 214, 0.18); color: #9db3f2; }
.b2-no { background: rgba(228, 153, 119, 0.14); color: #e49977; }
@media (max-width: 760px) {
	.tnt-bracket.tnt-b2 { grid-template-columns: 1fr; }
	.b2-l, .b2-r { padding: 20px 16px; }
	.b2-r { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
	.b2-num { flex-basis: 62px; width: 62px; height: 62px; font-size: 38px; }
	.b2-name { font-size: 28px; }
	.b2-gauge span { font-size: var(--tnt-ui-small); letter-spacing: 0; }
}

/* ---- Keyword popover v2 (canvas: Plugin redesign 07) ---- */
.tnt-kw-term { border-bottom: 2px dotted rgba(157, 179, 242, 0.75); color: #9db3f2; }
#tnt-kw-popover { width: 340px; padding: 0; gap: 0; background: #101010; border: 0; border-top: 3px solid var(--tnt-accent); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(157, 179, 242, 0.25); }
#tnt-kw-popover .tnt-kw-pop-title { display: block; padding: 14px 16px 0; font-size: 24px; color: #fff; }
#tnt-kw-popover .tnt-kw-pop-text { display: block; padding: 8px 16px 14px; font-size: 13.5px; line-height: 1.65; color: #c4c9d0; }
#tnt-kw-popover .tnt-kw-pop-foot { margin: 0; padding: 10px 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
@media (max-width: 760px) { #tnt-kw-popover { width: auto; } }


@media (max-width: 760px) {
	.tnt-bracket__track li { min-width: 0; }
	.tnt-bracket__track i, .b2-gauge span { max-width: 100%; overflow-wrap: anywhere; text-align: center; line-height: 1.3; }
}