/* Ad slots shared by every hub page. Nothing here shows until ads.js turns ads on,
   so the pages look exactly as before until the AdSense IDs are filled in. */
.ad-slot { display: none; }
.ads-on .ad-layout { display: flex; justify-content: center; align-items: flex-start; gap: 24px; }
.ads-on .ad-layout > .wrap { flex: 1 1 auto; min-width: 0; margin-left: 0; margin-right: 0; }
.ads-on .ad-rail { flex: 0 0 160px; position: sticky; top: 28px; margin-top: 28px; }
.ad-label { display: block; margin-bottom: 4px; font: 600 10px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #5c5c5c); text-align: center; }
.ad-box { min-height: 90px; }
.ad-rail .ad-box { width: 160px; height: 600px; }
.ad-ph { box-sizing: border-box; height: 100%; min-height: 90px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px; border: 1px dashed var(--line, #d4d4d4); border-radius: 6px; background: var(--panel, #fff); color: var(--muted, #5c5c5c); font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }

/* Phones, tablets and small laptops: one banner just above the footer. */
.ads-on .ad-inline { display: block; margin-top: 32px; }
/* Right rail once there is room beside the tool, left rail too on big screens. */
@media (min-width: 1200px) {
  .ads-on .ad-right { display: block; }
  .ads-on .ad-inline { display: none; }
}
.ads-on .ad-right { margin-right: 16px; }
.ads-on .ad-left { margin-left: 16px; }
@media (min-width: 1580px) { .ads-on .ad-left { display: block; } }
@media print { .ad-slot { display: none !important; } }