/* Wild Tokyo, extra components: tables, quotes, UGC, steps, calculators */

.table-wrap{width:100%;overflow-x:auto;margin:1.5rem 0;border-radius:.75rem;border:1px solid hsl(var(--border));background:hsl(var(--card))}
table.data-table{width:100%;border-collapse:collapse;font-size:.85rem;min-width:520px}
table.data-table thead th{background:linear-gradient(135deg,hsl(43 90% 55% / .16),hsl(35 85% 40% / .08));color:hsl(43 90% 68%);text-align:left;font-weight:700;padding:.7rem .9rem;white-space:nowrap;border-bottom:1px solid hsl(var(--border))}
table.data-table td{padding:.65rem .9rem;border-bottom:1px solid hsl(var(--border) / .6);color:hsl(var(--foreground) / .88);vertical-align:top;line-height:1.55}
table.data-table tbody tr:last-child td{border-bottom:0}
table.data-table tbody tr:nth-child(even){background:hsl(var(--foreground) / .025)}
table.data-table tbody tr:hover{background:hsl(43 90% 55% / .05)}
.table-cap{font-size:.75rem;color:hsl(var(--muted-foreground));padding:.6rem .9rem;margin:0}

figure.pull-quote{margin:1.75rem 0;padding:1.25rem 1.25rem 1.25rem 2.75rem;position:relative;background:hsl(var(--card));border:1px solid hsl(var(--border));border-left:3px solid hsl(43 90% 55%);border-radius:.75rem}
figure.pull-quote:before{content:"\201C";position:absolute;left:.75rem;top:.15rem;font-size:2.75rem;line-height:1;color:hsl(43 90% 55% / .55);font-family:Georgia,serif}
figure.pull-quote blockquote{margin:0;font-size:1.02rem;line-height:1.65;color:hsl(var(--foreground));font-style:italic}
figure.pull-quote figcaption{margin-top:.6rem;font-size:.78rem;color:hsl(43 90% 62%);font-weight:600}

.ugc-grid{display:grid;gap:1rem;margin:1.5rem 0}
@media(min-width:768px){.ugc-grid{grid-template-columns:repeat(2,1fr)}}
.ugc-card{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:.75rem;padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.5rem}
.ugc-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.ugc-src{font-size:.72rem;font-weight:700;padding:.15rem .55rem;border-radius:.35rem;letter-spacing:.02em}
.ugc-src.reddit{background:hsl(16 100% 50% / .16);color:hsl(16 100% 66%)}
.ugc-src.trustpilot{background:hsl(153 62% 40% / .18);color:hsl(153 62% 58%)}
.ugc-src.forum{background:hsl(217 91% 60% / .16);color:hsl(217 91% 70%)}
.ugc-score{font-size:.8rem;color:hsl(43 90% 60%);letter-spacing:.05em}
.ugc-text{font-size:.86rem;line-height:1.65;color:hsl(var(--foreground) / .9);margin:0}
.ugc-meta{font-size:.72rem;color:hsl(var(--muted-foreground));margin:0}

.steps{display:flex;flex-direction:column;gap:.85rem;margin:1.4rem 0}
.step{display:flex;gap:.85rem;align-items:flex-start;background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:.7rem;padding:.9rem 1rem}
.step-n{flex-shrink:0;width:1.85rem;height:1.85rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.8rem;background:linear-gradient(135deg,hsl(43 90% 55%),hsl(35 85% 42%));color:hsl(222 47% 8%)}
.step h4{margin:0 0 .2rem;font-size:.95rem;color:hsl(var(--foreground));font-weight:700}
.step p{margin:0;font-size:.85rem;line-height:1.65;color:hsl(var(--foreground) / .85)}

.mini-card{background:hsl(43 90% 55% / .05);border:1px solid hsl(43 90% 55% / .25);border-radius:.75rem;padding:1rem 1.1rem;margin:1.4rem 0}
.mini-card h4{margin:0 0 .35rem;font-size:.92rem;color:hsl(43 90% 66%);font-weight:700}
.mini-card p{margin:0;font-size:.85rem;line-height:1.7;color:hsl(var(--foreground) / .88)}

.footnote{font-size:.75rem;color:hsl(var(--muted-foreground));line-height:1.6;border-top:1px dashed hsl(var(--border));padding-top:.6rem;margin-top:1.1rem}
.footnote sup{color:hsl(43 90% 62%);font-weight:700}

.content-figure{margin:1.5rem 0}
.content-figure img{width:100%;height:auto;border-radius:.75rem;border:1px solid hsl(var(--border));display:block}
.content-figure figcaption{font-size:.75rem;color:hsl(var(--muted-foreground));margin-top:.45rem;text-align:center}

/* calculator */
.calc{background:linear-gradient(160deg,hsl(222 40% 11%),hsl(222 47% 8%));border:1px solid hsl(43 90% 55% / .28);border-radius:1rem;padding:1.25rem;margin:1.75rem 0}
.calc-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.25rem}
.calc-tag{font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:hsl(222 47% 8%);background:linear-gradient(135deg,hsl(43 90% 58%),hsl(35 85% 45%));padding:.2rem .5rem;border-radius:.3rem}
.calc h3{margin:0;font-size:1.05rem;color:hsl(var(--foreground));font-weight:700}
.calc-sub{font-size:.8rem;color:hsl(var(--muted-foreground));margin:.25rem 0 1rem}
.calc-grid{display:grid;gap:.75rem;grid-template-columns:1fr}
@media(min-width:640px){.calc-grid{grid-template-columns:repeat(3,1fr)}}
.calc-field{display:flex;flex-direction:column;gap:.3rem}
.calc-field span{font-size:.75rem;color:hsl(var(--foreground) / .75);font-weight:600}
.calc-field input,.calc-field select{background:hsl(222 47% 6%);border:1px solid hsl(var(--border));border-radius:.5rem;padding:.55rem .7rem;color:hsl(var(--foreground));font-size:.9rem;width:100%}
.calc-field input:focus,.calc-field select:focus{outline:none;border-color:hsl(43 90% 55% / .7)}
.calc-out{margin-top:1rem;background:hsl(43 90% 55% / .07);border:1px solid hsl(43 90% 55% / .22);border-radius:.75rem;padding:.9rem 1rem;display:flex;flex-direction:column;gap:.3rem}
.calc-num{font-size:1.75rem;font-weight:800;background:linear-gradient(135deg,hsl(43 95% 65%),hsl(35 85% 48%));-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.15}
.calc-txt{font-size:.83rem;color:hsl(var(--foreground) / .85);margin:0;line-height:1.6}
.calc-note{font-size:.72rem;color:hsl(var(--muted-foreground));margin:.5rem 0 0}

.subpage-cta{background:linear-gradient(160deg,hsl(222 40% 12%),hsl(222 47% 7%));border:1px solid hsl(43 90% 55% / .3);border-radius:1rem;padding:1.75rem;text-align:center;margin:2rem 0}
.subpage-cta h3{margin:0 0 .5rem;font-size:1.3rem;color:hsl(43 90% 66%);font-weight:800}
.subpage-cta p{margin:0 auto 1.1rem;max-width:46rem;font-size:.9rem;line-height:1.7;color:hsl(var(--foreground) / .85)}
.cta-buttons{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}

.related-block{margin:2.5rem 0 1rem}
.related-block h2{font-size:1.25rem;font-weight:700;margin-bottom:1rem;color:hsl(var(--foreground))}
.related-grid{display:grid;gap:.75rem}
@media(min-width:640px){.related-grid{grid-template-columns:repeat(2,1fr)}}
.related-link{display:flex;gap:.75rem;align-items:flex-start;background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:.7rem;padding:.85rem 1rem;text-decoration:none;transition:border-color .2s}
.related-link:hover{border-color:hsl(43 90% 55% / .5)}
.related-title{margin:0;font-size:.92rem;font-weight:700;color:hsl(43 90% 66%)}
.related-desc{margin:.15rem 0 0;font-size:.78rem;color:hsl(var(--muted-foreground));line-height:1.55}