/* productize.life/blog — shared post layer (served at /blog/assets/post.css).
   Linked AFTER each post's inline <style> so shared, additive component rules live
   in ONE place and propagate to every post — fixes the frozen-copy CSS drift where a
   class (e.g. .compare) used in a post had no style because that post's inline <style>
   predated the rule. Keep this to SAFE additive components (tables, etc.), not the
   per-post design system, so it never conflicts with a post's own inline styles.
   New shared/fixable component CSS goes HERE, then it reaches every linked post. */

/* scored / verdict tables (wrap: <div class="tbl"><table>…); mark winner with <span class="pick">) */
.tbl{overflow-x:auto;margin:2rem 0;border:1px solid var(--rule,#e6e4df);border-radius:18px}
.tbl table{border-collapse:collapse;width:100%;font-size:.98rem;font-family:var(--body)}
.tbl td,.tbl th{padding:.7rem .9rem;border-bottom:1px solid var(--rule,#e6e4df);vertical-align:top;text-align:left}
.tbl tr:last-child td{border-bottom:0}
.tbl .pick{color:var(--accent-deep,#a23c22);font-weight:600}

/* plain side-by-side comparison grid: <table class="compare"> */
.compare{width:100%;border-collapse:collapse;margin:1.8rem 0;font-size:.96rem;line-height:1.55}
.compare th,.compare td{border:1px solid var(--rule,#e6e4df);padding:.6rem .85rem;text-align:left;vertical-align:top}
.compare thead th{background:var(--paper-2);font-weight:600;color:var(--ink)}
.compare tbody td:first-child{font-weight:600;color:var(--ink)}
.compare tbody tr:nth-child(even) td{background:rgba(0,0,0,.025)}
[data-theme="dark"] .compare th,[data-theme="dark"] .compare td{border-color:rgba(255,255,255,.14)}
[data-theme="dark"] .compare tbody tr:nth-child(even) td{background:rgba(255,255,255,.04)}
@media(max-width:560px){.compare{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}}