/* Shared public-site sizing. Load after page styles so breakpoints agree. */
:root { --inbox-hero-background: linear-gradient(90deg, #e5f5ff 0%, #eef0ff 49%, #eee3ff 100%); }
[data-theme="dark"] { --inbox-hero-background: linear-gradient(90deg, #131522 0%, #1a1c2e 49%, #221d36 100%); }
body .public-page-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--inbox-hero-background);
  background-attachment: scroll;
}
.public-hero-decoration {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .65;
}
[data-theme="dark"] .public-hero-decoration { opacity: .2; }
@media (max-width: 768px) {
  .public-hero-decoration { opacity: .35; }
  [data-theme="dark"] .public-hero-decoration { opacity: .15; }
}
.inbox-navigation {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
}
.inbox-navigation + .hero { background: var(--inbox-hero-background); padding-top: 59px; }
.inbox-navigation.is-scrolled {
  background: var(--bg);
  border-bottom-color: var(--card-border);
  box-shadow: 0 2px 8px rgb(0 0 0 / 5%);
}
body .faq-navigation.hero-navigation {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  box-shadow: none;
}
.hero-navigation + .public-page-hero { padding-top: 59px; }
body .faq-navigation.hero-navigation.is-scrolled {
  background: var(--bg);
  border-bottom-color: var(--card-border);
  box-shadow: 0 2px 8px rgb(0 0 0 / 5%);
}
@media (max-width: 768px) {
  .hero-navigation + .public-page-hero { padding-top: 65px; }
}
body { overflow-wrap: anywhere; }
img, video, canvas { max-width: 100%; }
input, select, textarea { min-width: 0; max-width: 100%; }
:is(.article-grid, .blog-grid, .footer-main, .footer-navigation, .faq-layout,
    .about-intro, .about-steps, .about-use-grid, .about-reading-tips,
    .contact-report, .contact-email) > * { min-width: 0; }
.article-prose :is(img, video) { height: auto; }
.article-prose iframe { max-width: 100%; }
.article-prose :is(pre, table) { max-width: 100%; overflow-x: auto; }
.article-prose table { display: block; }
.article-breadcrumbs, .article-header-meta, .article-author-box { flex-wrap: wrap; }
.reader-sender { flex: 1; overflow-wrap: anywhere; }
.reader-body, .viewer, .message-text { min-width: 0; max-width: 100%; }
.message-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.reader-toolbar, .reader-actions { flex-wrap: wrap; }
.reader-date { max-width: 100%; overflow-wrap: anywhere; }
.footer-inbox-actions, .footer-meta, .privacy-hero-buttons { flex-wrap: wrap; }
.contact-topic-trigger { white-space: normal; }
.contact-topic-options { max-height: min(260px, 50dvh); }
dialog { max-width: calc(100% - 32px); max-height: calc(100dvh - 32px); overflow: auto; }

@media (max-width: 900px) {
  .wrap { width: calc(100% - 40px); padding-left: 0; padding-right: 0; }
  .intro { width: min(690px, calc(100% - 40px)); margin-inline: auto; }
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .inbox-navigation + .hero { padding-top: 69px; }
  .nav.wrap { height: auto; min-height: 64px; padding: 8px 0; gap: 8px; }
  .nav .brand { position: static; transform: none; }
  .nav-spacer { display: none; }
  .nav-link {
    width: 44px !important; height: 44px !important;
    min-width: 44px !important; min-height: 44px !important;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .theme-toggle, .copy-round { width: 44px; height: 44px; flex: 0 0 44px; }
  .inbox-nav-actions { gap: 8px; }
  .inbox-nav-actions > .nav-link {
    height: 44px !important; min-height: 44px !important; max-height: none !important;
    gap: 8px !important;
  }
  .nav.inbox-nav { min-height: 68px; }
  .toolbar .actions { max-width: 690px; margin-inline: auto; gap: 12px; }
  .toolbar .actions button { min-width: 0; min-height: 44px; }
  .address-section, .inbox-wrap { width: calc(100% - 40px); padding-inline: 0; }
  .address-box { padding: 24px 18px 16px; }
  .address-box h1 { font-size: clamp(19px, 4vw, 26px); line-height: 1.3; }
  .article-grid { grid-template-columns: minmax(0, 1fr); }
  .article-card { gap: 14px; padding: 18px; }
  .article-card > div { min-width: 0; }
  .articles-page .blog-featured-card {
    padding: 0; min-height: 0; flex-direction: column; align-items: stretch;
    justify-content: flex-start; border-radius: 18px;
  }
  .articles-page .blog-featured-img {
    position: static; display: block; width: 100%; height: auto;
    aspect-ratio: 16 / 9; object-fit: cover;
  }
  .articles-page .blog-featured-box {
    width: 100%; max-width: none; min-width: 0; margin: 0;
    padding: 20px; border: 0; border-radius: 0; box-shadow: none;
    background: var(--card-bg);
  }
  .articles-page .blog-featured-title { font-size: clamp(18px, 4.5vw, 22px); line-height: 1.4; letter-spacing: -.3px; }
  .articles-page .blog-featured-meta { flex-wrap: wrap; gap: 6px 12px; }
  .articles-page .blog-featured-tag-top { top: 12px; left: 12px; }
  .articles-page .blog-featured-card:hover .blog-featured-box { transform: none; box-shadow: none; }
  .reader-toolbar button { min-height: 44px; font-size: 12px; }
  .reader-meta { flex-wrap: wrap; }
  .reader-date { flex-basis: calc(100% - 58px); min-width: 0; text-align: left; margin-left: 58px; }
  .attachment-dropdown { right: 0; max-width: calc(100vw - 64px); max-height: 50dvh; overflow-y: auto; }
  .faq-topics, .privacy-page .privacy-section-guide { grid-template-columns: minmax(0, 1fr); }
  .about-inbox-tabs { flex-wrap: wrap; justify-content: center; }
  .about-inbox-tabs button { min-height: 44px; flex: 1; }
  .privacy-hero-buttons > a { min-height: 44px; }
  .footer-link-group a { min-height: 44px; }
  summary { min-height: 44px; }
  .cat-pill, .blog-category-arrow { min-height: 44px; }
  .footer-inbox-actions > a, .footer-back-top { min-height: 44px; display: inline-flex; align-items: center; }
}

@media (max-width: 600px) {
  .wrap, .address-section, .inbox-wrap { width: calc(100% - 32px); }
  .intro { width: calc(100% - 32px); padding-block: 30px; }
  .nav.wrap { padding-inline: 0; }
  .faq-navigation .nav { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .faq-navigation .nav > div:last-child { display: contents !important; }
  .faq-navigation .nav > .brand { grid-column: 2; grid-row: 1; justify-self: center; }
  .faq-navigation .nav .theme-toggle { grid-column: 3; grid-row: 1; }
  .faq-navigation .nav .nav-pill { display: none; }
  .brand, .brand span { font-size: 16px; }
  .inbox-nav .brand { gap: 5px; }
  .inbox-nav .brand .site-logo { width: 22px; height: 22px; }
  .inbox-nav-actions { gap: 6px; }
  .address-box { padding: 20px 14px 14px; border-radius: 18px; }
  .address-field { padding-left: 12px; gap: 8px; }
  .address { font-size: 15px; }
  .hero-description { font-size: 13px; }
  .hero-description br { display: none; }
  .toolbar .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px; }
  .toolbar .actions button { width: 100%; padding: 12px 10px; gap: 8px; }
  .inbox-heading, .message-card { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) 28px; gap: 8px; padding: 14px 12px; font-size: 12px; }
  .message-sender, .message-subject { min-width: 0; }
  .message-sender strong { font-size: 12px; }
  .message-sender small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .reader-toolbar { gap: 8px; padding: 8px 12px; }
  .reader-actions { gap: 12px; }
  .reader-meta { margin-inline: 12px; }
  .reader-subject { margin-inline: 12px; }
  .reader-body { padding: 14px 10px; min-height: 280px; }
  .gmail-message-metadata dl { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .gmail-message-metadata dd { margin-bottom: 12px; }
  .articles-page .blog-grid, .blog-grid { grid-template-columns: minmax(0, 1fr); }
  .article-title { overflow-wrap: anywhere; }
  .article-prose blockquote { margin-inline: 0; padding-inline: 16px; }
  .contact-compose, .contact-email, .contact-report, .contact-grid article,
  .contact-note, .contact-callout { padding: 20px 16px; }
  .contact-compose :is(input, select, textarea), .contact-compose .contact-topic-trigger { font-size: 16px; }
  .contact-compose-actions > button { min-height: 44px; flex: 1 1 140px; }
  .about-page .about-centered-hero h1 { font-size: clamp(28px, 7vw, 38px); letter-spacing: -1px; }
  .about-reading-tips, .about-steps, .about-comparison article, .about-resource-grid > a { padding: 20px 16px; }
  .about-jump-nav { flex-wrap: wrap; }
  .about-jump-nav a { min-height: 44px; }
  .privacy-page .policy-content { padding: 20px 16px; }
  .privacy-document-meta { flex-wrap: wrap; }
  .policy-inbox-options { padding: 20px 16px; }
  .site-footer { padding-top: 28px; }
  .footer-main { gap: 24px; padding-bottom: 24px; }
  .footer-brand-panel .brand { font-size: 18px; }
  .footer-brand-panel .brand span { font-size: inherit; }
  .footer-brand-panel h2 { font-size: 26px; line-height: 1.25; margin: 16px 0 12px; }
  .footer-brand-panel p { font-size: 13px; }
  .footer-inbox-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
  .footer-inbox-actions > a { justify-content: space-between; padding: 10px 12px; gap: 8px; }
  .footer-navigation { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
  .footer-link-group h3 { margin-bottom: 8px; font-size: 12px; }
  .footer-link-group a { display: flex; align-items: center; min-height: 44px; margin: 0; padding: 8px 0; line-height: 1.5; }
  .footer-link-group:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .footer-link-group:last-child h3 { grid-column: 1 / -1; }
  .footer-meta { flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px 0 20px; font-size: 12px; }
  .footer-meta > span { max-width: 100%; }
}

@media (max-width: 360px) {
  .inbox-nav .brand, .inbox-nav .brand span { font-size: 16px; }
  .inbox-nav-actions > .nav-link {
    width: 104px !important; min-width: 104px !important; max-width: 104px !important;
    flex-basis: 104px; padding-inline: 6px !important;
  }
  .reader-actions { width: 100%; justify-content: flex-end; }
}

/* Diagnostic tables scroll within the page on small screens. */
body > main:not([class]) { min-width: 0; }
body > main:not([class]) table { display: block; max-width: 100%; overflow-x: auto; }