/* Responsive layout; desktop rules above 1000px remain unchanged. */
@media screen and (max-width: 1000px) {
    html { min-width: 0; }
    #page, #header, #main, #postscript-wrapper, #preface-wrapper,
    #footer, #footer .footer-inner { width: 100%; max-width: 100%; box-sizing: border-box; }
    #sticky-anchor { position: static !important; }
    #main-wrapper { margin-top: 0 !important; }
    #header { padding: 12px 16px; }
    #header-first { float: none; width: auto; margin: 0; }
    #header-first #logo { position: static; }
    #header-middle, #header-last { float: none; width: auto; margin: 0; }
    #logo img { max-width: 100%; height: auto; }
    #primary-menu { float: none; margin: 0; padding: 0 12px; }
    #primary-menu ul.menu { display: flex; flex-wrap: wrap; gap: 4px; }
    #primary-menu ul.menu li { float: none; margin: 0; background: #e8eddf; padding: 0; border-radius: 4px; }
    #primary-menu ul.menu li a { background: none; padding: 8px 12px; }
    #primary-menu ul.menu li a:hover, #primary-menu ul.menu li a:focus-visible { background: #27638c; color: white !important; }
    #primary-menu ul.menu li a { min-height: 44px; box-sizing: border-box; display: flex; align-items: center; }
    #primary-menu ul.menu li ul,
    #primary-menu ul.menu li ul li ul.menu {
        display: block; position: static; left: auto; top: auto;
        width: auto; margin: 0; padding: 0 0 0 10px; opacity: 1;
    }
    #primary-menu ul.menu li ul li { float: none; }
    #primary-menu ul.menu li ul li a { width: auto; }
    #main { padding: 0 16px; display: flex; flex-direction: column; }
    body.layout-first-main #content-wrapper,
    body.layout-main #content-wrapper,
    body.layout-main-last #content-wrapper,
    body.layout-first-main-last #content-wrapper {
        float: none; width: 100%; min-width: 0; margin: 24px 0 0; order: 1;
    }
    body.layout-first-main #sidebar-first,
    body.layout-first-main-last #sidebar-first,
    body.layout-main-last #sidebar-last,
    body.layout-first-main-last #content-wrapper #sidebar-last {
        float: none; width: 100%; box-sizing: border-box;
        margin: 24px 0 0; padding: 0; order: 2;
    }
    #content, #content-inner, #content-content { min-width: 0; max-width: 100%; }
    #content-content { overflow-wrap: anywhere; }
    #content-content img, #content-content video { max-width: 100%; height: auto; }
    #content-content iframe { max-width: 100%; }
    #content-content pre { max-width: 100%; overflow-x: auto; }
    /* Keep table semantics and scroll only the table region. */
    .atomic-table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
    .atomic-table-scroll:focus-visible { outline: 2px solid #27638c; outline-offset: -2px; }
    #content-content input:not([type="hidden"]),
    #content-content select, #content-content textarea { max-width: 100%; box-sizing: border-box; }
    .feature-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .feature-columns li { white-space: normal; overflow: visible; text-overflow: clip; }
    .bento-grid, #atomic-policy-page .aup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .card, .tutorial-card, .aup-card { min-width: 0; }
    .card-header h3 { white-space: normal !important; flex: 1; min-width: 0; }
    .card-header > p:empty { display: none; }
    .card-header .bento-icon { flex: 0 0 auto; }
    #footer { padding: 16px; }
    #onlinehelp { font-size: 16px; line-height: 1.8; }
}
@media screen and (max-width: 600px) {
    body { font-size: 87.5%; }
    #main { padding: 0 12px; }
    h1.title { font-size: 1.7em; line-height: 1.2; overflow-wrap: anywhere; }
    .feature-columns, .bento-grid, .tutorial-bento-grid,
    #atomic-policy-page .aup-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .bento-grid { padding: 12px 0; }
    #atomic-policy-page { padding: 24px 0; }
    #atomic-policy-page h1 { font-size: 1.8rem; }
    .app-header h3 { position: static; white-space: normal; padding-right: 36px; max-width: none; }
    #content-content input:not([type="hidden"]),
    #content-content select, #content-content textarea { font-size: 16px; }
}