/* Screen-only: print/PDF must keep desktop page width and must not inherit
   overflow:hidden from these breakpoints (print page width is often ~800px). */
@media screen and (max-width: 1199px) {
    .header-format .toolbar-select {
        max-width: 118px;
    }

    .header-format .style-picker {
        min-width: 104px;
    }

    .toolbar-select {
        max-width: 130px;
    }

    .document {
        padding: 20px 24px 40px;
    }
}

@media screen and (max-width: 900px) {
    .hide-tablet,
    .toolbar-sep.hide-tablet {
        display: none !important;
    }

    .brand-copy em {
        display: none;
    }

    .site-features-cta {
        padding: 22px 20px;
        margin-bottom: 0;
    }

    .site-app-phone {
        position: relative;
        order: 3;
        align-self: center;
        width: auto;
        height: min(360px, 58vh);
        margin: 8px auto 0;
    }
}

@media screen and (max-width: 768px) {
    html,
    .app {
        overflow-x: hidden;
        max-width: 100%;
    }

    /* The email card gives its label column less room on narrow screens. */
    .editor .nudi-email-label {
        width: 48px;
        font-size: 12px;
    }

    .editor .nudi-email-fields td {
        padding-left: 8px;
        padding-right: 8px;
    }

    .editor .nudi-email-title {
        display: none;
    }

    .mobile-only {
        display: inline-flex !important;
    }

    .mobile-desktop-note:not([hidden]) {
        display: flex !important;
    }

    .hide-mobile,
    .toolbar-sep.hide-mobile {
        display: none !important;
    }

    /* Borders / page-border toolbar — desktop only. */
    .border-split,
    #borderSplit {
        display: none !important;
    }

    .header-actions #btnSettings {
        display: inline-flex !important;
    }

    .sidebar-collapse {
        display: none;
    }

    .app {
        grid-template-rows: var(--header-h) minmax(0, 1fr);
    }

    .app-body {
        position: relative;
        overflow: hidden;
    }

    .app-header {
        flex-wrap: nowrap;
        height: var(--header-h);
        min-height: var(--header-h);
        max-height: var(--header-h);
        padding: 0 8px 0 4px;
        gap: 6px;
        overflow: hidden;
        position: relative;
        z-index: 55;
    }

    #btnMenu {
        order: -1;
        flex-shrink: 0;
        margin-right: 0;
        position: relative;
        z-index: 2;
        pointer-events: auto;
        -webkit-tap-highlight-color: transparent;
    }

    /* Full-screen drawer — fixed so app-body overflow cannot clip it. */
    .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(28, 25, 23, 0.45);
        z-index: 120;
        pointer-events: auto;
    }

    .sidebar-backdrop.is-visible,
    .sidebar-backdrop:not([hidden]) {
        display: block !important;
    }

    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        height: 100%;
        height: 100dvh;
        max-height: 100dvh;
        transform: translate3d(-105%, 0, 0);
        transition: transform 220ms ease;
        box-shadow: var(--shadow-menu);
        width: min(280px, 86vw);
        z-index: 130;
        padding-top: max(12px, env(safe-area-inset-top, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        visibility: visible;
        pointer-events: auto;
    }

    .sidebar.is-open {
        transform: translate3d(0, 0, 0);
    }

    .app.is-collapsed .sidebar {
        width: min(280px, 86vw);
        padding-left: 12px;
        padding-right: 12px;
    }

    .brand {
        gap: 6px;
        min-width: 0;
    }

    .brand-logo {
        width: 28px;
        height: 28px;
        flex-shrink: 0;
    }

    .brand-copy strong {
        font-size: 13px;
        white-space: nowrap;
    }

    .brand-copy em {
        display: none;
    }

    .header-title-wrap {
        order: 0;
        flex: 0 1 48px;
        min-width: 0;
        max-width: 22vw;
    }

    .tool-header-title {
        flex: 1 1 auto;
        font-size: 14px;
        padding: 0 4px;
    }

    .save-status#saveStatus {
        order: 0;
        flex-shrink: 0;
        max-width: 18px;
        padding: 0;
        font-size: 0;
        line-height: 1;
        overflow: hidden;
    }

    .header-doc-stats {
        display: inline-flex;
        height: 32px;
        gap: 6px;
        padding: 0 8px 0 7px;
        border-radius: 7px;
    }

    .header-doc-stats-ico {
        display: none;
    }

    .header-stat {
        gap: 3px;
    }

    .header-stat-value {
        font-size: 12px;
    }

    .header-stat-label {
        font-size: 10px;
    }

    .header-stat-divider {
        height: 12px;
        margin: 0 1px;
    }

    .save-status#saveStatus.is-ok::before {
        font-size: 13px;
        content: "✓";
    }

    .header-actions {
        flex: 1 1 auto;
        flex-shrink: 1;
        min-width: 0;
        margin-left: auto;
        gap: 4px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        padding-right: 2px;
    }

    .header-actions::-webkit-scrollbar {
        display: none;
    }

    .header-actions > * {
        flex-shrink: 0;
    }

    .auth-user-btn {
        max-width: min(120px, 26vw);
        height: 36px;
        font-size: 11px;
        padding: 0 6px 0 8px;
    }

    .header-guide-btn {
        width: 36px;
        padding: 0;
    }

    .header-guide-btn span {
        display: none;
    }

    .play-store-badge img,
    .windows-download-badge img {
        height: 30px;
    }

    .header-actions .icon-btn,
    .app-header > .icon-btn {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
    }

    .app.is-collapsed .btn-new-label,
    .app.is-collapsed .sidebar-search,
    .app.is-collapsed .draft-item-title,
    .app.is-collapsed .draft-item-meta,
    .app.is-collapsed .draft-group-label {
        display: initial;
    }

    .app.is-collapsed .sidebar-search {
        display: flex;
    }

    .toolbar {
        overflow-x: auto;
        overflow-y: visible;
        flex-wrap: nowrap;
        padding: 0 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .toolbar::-webkit-scrollbar {
        display: none;
    }

    .line-spacing-input {
        width: 68px;
        min-height: 36px;
        height: 36px;
        font-size: 14px;
        flex-shrink: 0;
    }

    .toolbar-more-btn {
        display: none !important;
    }

    .toolbar-overflow {
        display: flex;
        position: static;
        right: auto;
        top: auto;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        max-width: none;
        flex-wrap: nowrap;
    }

    .toolbar-overflow.is-open {
        display: flex;
    }

    .workspace {
        padding: 12px 12px 20px;
        overflow-x: hidden;
        max-width: 100%;
    }

    .converter-grid {
        grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
        gap: 3px;
        align-items: center;
    }

    .converter-pane textarea {
        min-height: clamp(400px, 68vh, 680px);
        font-size: 16px;
        padding: 10px;
        -webkit-user-select: text !important;
        user-select: text !important;
        -webkit-touch-callout: default;
        touch-action: manipulation;
        pointer-events: auto !important;
        caret-color: auto;
    }

    #converterInput,
    #converterFind,
    #converterReplaceWith {
        caret-color: auto !important;
        pointer-events: auto !important;
        -webkit-user-select: text !important;
        user-select: text !important;
    }

    .converter-swap {
        flex-direction: column;
        min-width: 0;
        width: 20px;
        height: 24px;
        padding: 2px;
        border-radius: 6px;
        align-self: center;
        justify-self: center;
    }

    .converter-swap svg {
        width: 12px;
        height: 12px;
    }

    .converter-swap span {
        display: none;
    }

    .converter-actions {
        gap: 4px;
        margin-bottom: 8px;
    }

    .conv-action {
        gap: 4px;
        padding: 3px 6px 3px 3px;
        border-radius: 8px;
    }

    .conv-action svg {
        width: 11px;
        height: 11px;
        padding: 3px;
        border-radius: 5px;
    }

    .conv-action-text strong {
        font-size: 10px;
    }

    .tool-page {
        padding: 16px;
    }

    #pageConverter {
        padding: 8px 4px 16px;
    }

    .font-grid {
        grid-template-columns: 1fr;
    }

    .font-gallery-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .font-category-tabs {
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .font-category-tabs .font-tab {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .font-gallery-toolbar input[type="search"] {
        flex: 0 0 auto;
        width: 100%;
        height: 40px;
        min-height: 40px;
        max-height: 40px;
        align-self: stretch;
    }

    .font-sample {
        font-size: 22px;
        min-height: 84px;
    }

    /* Keep the paper inside the phone width — desktop page inches are too wide.
       Override min-width + inch margins so the full sheet is visible. */
    .workspace,
    .app.is-pageless .workspace,
    .app:not(.is-pageless) .workspace {
        padding: 8px 8px 16px !important;
        overflow-x: hidden !important;
        max-width: 100%;
    }

    .app:not(.is-pageless) .document,
    .app.is-pageless .document {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        /* Keep the real vertical page margins: header/footer bands and page
           numbers are positioned from these page coordinates. */
        padding: var(--page-margin-top, 1in) 14px var(--page-margin-bottom, 1in) !important;
        overflow: visible;
        box-sizing: border-box !important;
        border-radius: 8px;
    }

    /*
     * Landscape on phones: show the real paper width/height (wider than the
     * viewport) so orientation is visible — pan the workspace horizontally.
     * Do NOT set pan-x on .editor* — that steals taps and blocks caret moves.
     */
    body.is-landscape .app .workspace,
    body.is-landscape .app.is-pageless .workspace,
    body.is-landscape .app:not(.is-pageless) .workspace {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        touch-action: pan-x pan-y !important;
    }

    body.is-landscape .app:not(.is-pageless) .document,
    body.is-landscape .app.is-pageless .document {
        width: var(--page-width, 11.69in) !important;
        min-width: var(--page-width, 11.69in) !important;
        max-width: var(--page-width, 11.69in) !important;
        min-height: var(--page-height, 8.27in) !important;
        padding: var(--page-margin-top, 1in) var(--page-margin-right, 1in)
            var(--page-margin-bottom, 1in) var(--page-margin-left, 1in) !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    body.is-landscape .app.mirrored-margins .document {
        padding-left: var(--page-margin-inside, var(--page-margin-left, 1in)) !important;
        padding-right: var(--page-margin-outside, var(--page-margin-right, 1in)) !important;
    }

    body.is-landscape .app:not(.is-pageless) [data-page-sheet] {
        left: 0 !important;
        right: auto !important;
        width: var(--page-width, 11.69in) !important;
        max-width: var(--page-width, 11.69in) !important;
        box-sizing: border-box !important;
    }

    body.is-landscape .app .editor,
    body.is-landscape .app.is-pageless .editor {
        width: 100% !important;
        max-width: 100% !important;
        min-height: calc(var(--page-height, 8.27in) - var(--page-margin-top, 1in) - var(--page-margin-bottom, 1in));
        overflow-wrap: break-word !important;
        word-break: normal !important;
        /* Keep taps for caret placement; workspace handles the horizontal pan. */
        touch-action: manipulation !important;
    }

    body.is-landscape .app .editor *,
    body.is-landscape .app.is-pageless .editor * {
        touch-action: manipulation !important;
    }

    html.is-mobile-caret body.is-landscape .app .workspace {
        touch-action: pan-x pan-y !important;
    }

    html.is-mobile-caret body.is-landscape .app .document,
    html.is-mobile-caret body.is-landscape .app .editor,
    html.is-mobile-caret body.is-landscape .app .editor * {
        touch-action: manipulation !important;
    }

    .app.is-pageless .document {
        min-height: var(--page-height, 11.69in) !important;
        background: var(--page-sheet-bg, #ffffff) !important;
        background-color: var(--page-sheet-bg, #ffffff) !important;
    }

    .app:not(.is-pageless) .document {
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
    }

    .app:not(.is-pageless) [data-page-sheet] {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .app.mirrored-margins .document {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .document {
        padding: var(--page-margin-top, 1in) 14px var(--page-margin-bottom, 1in);
        width: 100%;
        max-width: 100%;
        min-width: 0;
        border-radius: 8px;
        min-height: 100%;
        height: auto;
        max-height: none;
        overflow: visible;
        display: block;
        box-sizing: border-box;
        margin: 0;
    }

    .editor {
        min-height: 100%;
        height: auto;
        max-height: none;
        width: 100%;
        max-width: 100%;
        /* Header/footer bands live partly outside the body editor box. Clipping
           either overflow axis also clips those bands on mobile browsers. */
        overflow: visible;
        font-size: 18px;
        overflow-wrap: anywhere;
        word-break: break-word;
        box-sizing: border-box;
        -webkit-user-select: text;
        user-select: text;
        caret-color: var(--text, #1a1a1a);
    }

    .nudi-caret {
        width: 2.5px;
        background: #0b1f2a;
    }

    .app.is-pageless .editor {
        min-height: calc(var(--page-height, 11.69in) - var(--page-margin-top, 1in) - var(--page-margin-bottom, 1in));
    }

    /* Tables: fit the page, but allow drag-resize to set real column widths.
       Do NOT force width:100% !important after sizing — that blocks col drag. */
    .editor table {
        position: static !important;
        left: auto !important;
        top: auto !important;
        float: none !important;
        clear: both;
        display: table;
        width: 100%;
        max-width: 100% !important;
        table-layout: fixed !important;
        box-sizing: border-box !important;
        margin-top: 12px !important;
        margin-bottom: 12px !important;
        /* Leave left/right free so column-edge drag can indent the table. */
        margin-left: 0;
        margin-right: 0;
        z-index: auto !important;
    }

    /* Never let free-drag tables float over the toolbar / page chrome on phones. */
    .editor table.is-free {
        position: static !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        z-index: auto !important;
        width: 100%;
        max-width: 100% !important;
        margin-top: 12px !important;
        margin-bottom: 12px !important;
    }

    .table-move-handle {
        display: none !important;
    }

    /* Above the page, below modals — must receive drag hits over the sheet. */
    .table-resize-layer {
        z-index: 85;
        pointer-events: none;
    }

    .table-resize-grip {
        z-index: 86;
        pointer-events: auto !important;
        touch-action: none !important;
    }

    .table-resize-knob {
        pointer-events: auto !important;
        touch-action: none !important;
    }

    .table-resize-guide {
        z-index: 87;
    }

    .editor table[data-cols-sized="1"] {
        /* Pixel widths from drag resize must stick (still capped by max-width). */
        width: auto !important;
        max-width: 100% !important;
    }

    .editor table[data-cols-sized="1"] col {
        /* Do not reset col widths that JS sets with !important. */
        min-width: 0;
    }

    .editor td,
    .editor th {
        min-width: 28px;
        max-width: 100%;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        word-wrap: break-word !important;
        box-sizing: border-box;
        touch-action: manipulation;
        vertical-align: top;
    }

    .editor td .nudi-compose,
    .editor th .nudi-compose {
        white-space: normal !important;
        max-width: 100%;
    }

    .table-resize-grip.is-col .table-resize-knob {
        width: 14px;
        height: 56px;
        min-width: 14px;
        min-height: 56px;
    }

    .table-resize-grip.is-row .table-resize-knob {
        width: 56px;
        height: 14px;
        min-width: 56px;
        min-height: 14px;
    }

    body.is-resizing-table {
        touch-action: none !important;
        overflow: hidden;
    }

    body.is-resizing-table .editor,
    body.is-resizing-table .editor * {
        touch-action: none !important;
    }

    /* Images, drawings, charts, audio — never wider than the page. */
    .editor img,
    .editor video,
    .editor .nudi-drawing,
    .editor .nudi-chart,
    .editor .nudi-audio {
        max-width: 100% !important;
        height: auto !important;
        box-sizing: border-box !important;
    }

    /*
     * Image drag/resize must beat .editor * pan-x/pan-y and landscape
     * manipulation rules — otherwise the browser scrolls and cancels the drag.
     */
    .editor img,
    .editor .nudi-drawing,
    .editor .nudi-chart,
    body.is-landscape .app .editor img,
    body.is-landscape .app .editor .nudi-drawing,
    body.is-landscape .app .editor .nudi-chart,
    body.is-landscape .app.is-pageless .editor img,
    body.is-landscape .app.is-pageless .editor .nudi-drawing,
    body.is-landscape .app.is-pageless .editor .nudi-chart,
    html.is-mobile-caret body.is-landscape .app .editor img,
    html.is-mobile-caret body.is-landscape .app .editor .nudi-drawing,
    html.is-mobile-caret body.is-landscape .app .editor .nudi-chart,
    html.is-mobile-caret .app.is-mobile-full-page .editor img,
    html.is-mobile-caret .app.is-mobile-full-page .editor .nudi-drawing,
    html.is-mobile-caret .app.is-mobile-full-page .editor .nudi-chart {
        touch-action: none !important;
        -webkit-user-drag: none;
        user-select: none;
        -webkit-user-select: none;
    }

    .img-overlay,
    .img-frame,
    .img-handle,
    .img-crop,
    .img-crop-handle {
        touch-action: none !important;
    }

    body.is-dragging-image {
        touch-action: none !important;
    }

    body.is-dragging-image .workspace,
    body.is-dragging-image .document,
    body.is-dragging-image .editor,
    body.is-dragging-image .editor * {
        touch-action: none !important;
    }

    .editor .nudi-drawing[data-pos="free"],
    .editor .nudi-chart[data-pos="free"],
    .editor img[data-pos="free"],
    .editor table.is-free {
        max-width: 100% !important;
        /* Keep free items from sticking past the right edge of the page. */
        right: auto !important;
    }

    .editor img[data-pos="free"] {
        position: absolute !important;
        margin: 0 !important;
        z-index: 5;
    }

    .editor img.is-img-dragging {
        position: fixed !important;
        z-index: 400 !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 !important;
        opacity: 0.92;
    }

    /* Tables always stay in the document flow on phones (see rules above). */

    .editor > *,
    .editor p,
    .editor div,
    .editor h1,
    .editor h2,
    .editor h3,
    .editor h4,
    .editor h5,
    .editor h6,
    .editor li,
    .editor pre {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
        box-sizing: border-box;
    }

    .menubar {
        padding: 0 4px;
        overflow-x: auto;
        overflow-y: visible;
        scrollbar-width: none;
    }

    .menubar::-webkit-scrollbar {
        display: none;
    }

    .menubar-tools .style-picker {
        min-width: 96px;
        max-width: 112px;
    }

    .menubar-tools #fontFamily.toolbar-select {
        display: inline-block;
        min-width: 96px;
        max-width: 128px;
        flex-shrink: 0;
    }

    .menubar-btn {
        padding: 0 8px;
        font-size: 13px;
    }

    .menubar-dropdown {
        position: fixed;
        left: 8px;
        right: 8px;
        width: auto;
        top: calc(var(--header-h) + var(--menubar-h));
        max-height: min(60vh, 380px);
    }

    .menubar-submenu {
        position: static;
        margin: 4px 0 4px 10px;
        max-height: none;
        box-shadow: none;
        width: auto;
    }

    /* Bigger table size demo grid so fingers can drag to pick rows × cols. */
    .menubar-submenu.is-table-picker {
        min-width: 0;
        padding: 8px;
    }

    .table-grid {
        grid-template-columns: repeat(10, 22px);
        gap: 4px;
        padding: 8px 4px;
        justify-content: center;
    }

    .table-grid-cell {
        width: 22px;
        height: 22px;
        border-radius: 3px;
    }

    .table-grid-label {
        font-size: 13px;
        padding: 6px 4px 8px;
        font-weight: 600;
        color: var(--text);
    }

    .find-bar {
        padding: 6px 8px;
    }

    .bottom-bar {
        padding: 8px 10px;
        gap: 8px;
        flex-wrap: wrap;
        height: auto;
        min-height: var(--bottom-h);
    }

    .bottom-status {
        display: none;
    }

    .lang-btn {
        padding: 6px 10px;
        font-size: 12px;
    }

    .btn-voice,
    .btn-copy,
    .btn-full-page {
        padding: 6px 10px;
        font-size: 12px;
    }

    .btn-full-page span {
        white-space: nowrap;
    }

    .app.is-mobile-full-page .mobile-page-scrubber {
        display: flex !important;
    }

    .app.is-mobile-full-page .workspace {
        /* Keep native scrollbar out of the way — scrubber bar is the control. */
        scrollbar-width: none;
    }

    .app.is-mobile-full-page .workspace::-webkit-scrollbar {
        height: 0;
        width: 0;
        display: none;
    }

    /*
     * Mobile "Full width": restore desktop page width/height and allow
     * horizontal pan so the full A4 (or chosen) sheet is visible.
     */
    .app.is-mobile-full-page #editorChrome,
    .app.is-mobile-full-page .main {
        overflow: hidden;
        min-width: 0;
        max-width: 100%;
    }

    .app.is-mobile-full-page .workspace,
    .app.is-mobile-full-page.is-pageless .workspace,
    .app.is-mobile-full-page:not(.is-pageless) .workspace {
        padding: 12px !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        touch-action: pan-x pan-y !important;
        background-color: #f0f2f5;
    }

    /* Override mobile caret pan-y so the sheet can be dragged left/right. */
    html.is-mobile-caret .app.is-mobile-full-page .workspace,
    html.is-mobile-caret .app.is-mobile-full-page .document,
    html.is-mobile-caret .app.is-mobile-full-page .editor,
    html.is-mobile-caret .app.is-mobile-full-page .editor * {
        touch-action: pan-x pan-y !important;
    }

    .app.is-mobile-full-page .document,
    .app.is-mobile-full-page.is-pageless .document,
    .app.is-mobile-full-page:not(.is-pageless) .document {
        width: var(--page-width, 8.27in) !important;
        min-width: var(--page-width, 8.27in) !important;
        max-width: var(--page-width, 8.27in) !important;
        min-height: var(--page-height, 11.69in) !important;
        /* Left-align: margin:auto breaks horizontal scroll on many phones. */
        margin: 12px 12px 24px 12px !important;
        padding: var(--page-margin-top, 1in) var(--page-margin-right, 1in) var(--page-margin-bottom, 1in) var(--page-margin-left, 1in) !important;
        box-sizing: border-box !important;
        border-radius: 2px;
        overflow: visible;
        flex-shrink: 0;
    }

    .app.is-mobile-full-page.is-pageless .document {
        background: var(--page-sheet-bg, #ffffff) !important;
        background-color: var(--page-sheet-bg, #ffffff) !important;
        border: 1px solid #dcdfe4;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    }

    .app.is-mobile-full-page:not(.is-pageless) .document {
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
    }

    .app.is-mobile-full-page:not(.is-pageless) [data-page-sheet] {
        left: 0 !important;
        right: auto !important;
        width: var(--page-width, 8.27in) !important;
        max-width: var(--page-width, 8.27in) !important;
        box-sizing: border-box !important;
    }

    .app.is-mobile-full-page.mirrored-margins .document {
        padding-left: var(--page-margin-left, 1in) !important;
        padding-right: var(--page-margin-right, 1in) !important;
    }

    .app.is-mobile-full-page .editor {
        width: 100%;
        max-width: 100%;
        min-height: calc(var(--page-height, 11.69in) - var(--page-margin-top, 1in) - var(--page-margin-bottom, 1in));
        overflow-wrap: break-word;
        word-break: normal;
        font-size: 16px;
        touch-action: pan-x pan-y !important;
    }

    .app.is-mobile-full-page .editor table {
        width: 100%;
        max-width: 100% !important;
        table-layout: fixed !important;
        position: static !important;
    }

    .app.is-mobile-full-page .editor table[data-cols-sized="1"] {
        width: auto !important;
        max-width: 100% !important;
    }
}

@media screen and (max-width: 768px) {
    /* Social icons in the phone CTA: one row on mobile. */
    .site-app-cta .site-social {
        flex-wrap: nowrap;
        gap: 6px;
        justify-content: center;
        width: 100%;
        max-width: 100%;
        margin-top: 28px;
    }

    .site-app-cta .site-social-link {
        width: 38px;
        height: 38px;
        flex: 0 0 auto;
    }

    /* Save / Save as rename field: system keyboard + normal typing. */
    #saveModal #saveInput,
    #renameModal #renameInput {
        font-size: 16px !important;
        -webkit-user-select: text !important;
        user-select: text !important;
        pointer-events: auto !important;
        touch-action: manipulation;
        caret-color: auto !important;
    }

    .site-footer {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 14px;
        padding: 22px 18px 28px;
        text-align: center;
    }

    .site-footer-copy {
        display: block;
        width: 100%;
        padding-bottom: 14px;
        margin-bottom: 2px;
        border-bottom: 1px solid var(--border);
        font-size: 14px;
        letter-spacing: 0.02em;
    }

    .site-footer-nav {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        max-width: 420px;
        gap: 4px 8px;
        justify-content: stretch;
        justify-items: stretch;
    }

    .site-footer-nav a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 42px;
        padding: 8px 10px;
        border-radius: 8px;
        font-size: 13px;
        line-height: 1.3;
        white-space: normal;
        text-align: center;
    }

    .site-footer-nav a:hover,
    .site-footer-nav a:focus-visible {
        background: color-mix(in srgb, var(--text-muted) 8%, transparent);
        text-decoration: none;
    }

    .legal-body .site-footer {
        padding-right: 18px;
    }

    /* Legal pages: keep the app chrome on screen; article + CTA scroll in the main pane. */
    html.is-legal-view,
    html.is-legal-view body {
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }

    html.is-legal-view #app.app,
    html.is-legal-view #app {
        flex: 1 1 auto;
        height: auto !important;
        max-height: none !important;
        min-height: 0;
        overflow: hidden !important;
        grid-template-rows: var(--header-h) minmax(0, 1fr);
    }

    html.is-legal-view .app-body {
        min-height: 0 !important;
        overflow: hidden !important;
    }

    html.is-legal-view .workspace,
    html.is-legal-view main.workspace,
    html.is-legal-view .legal-tool-page {
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        flex: 1 1 auto;
        -webkit-overflow-scrolling: touch;
    }

    html.is-legal-view body > .site-app-cta {
        display: none !important;
    }

    html.is-legal-view .legal-app-cta-slot .site-footer {
        display: flex !important;
        position: relative !important;
        flex: 0 0 auto;
        z-index: 1;
        width: 100%;
        box-sizing: border-box;
    }

    html.is-legal-view body > .site-footer {
        display: none !important;
    }
}

@media screen and (max-width: 480px) {
    .bottom-actions {
        margin-left: auto;
    }

    .toolbar-select {
        max-width: 110px;
    }

    .header-title {
        font-size: 14px;
        padding: 6px 4px;
    }

    .brand-copy {
        display: none;
    }

    .font-size-input {
        width: 52px;
    }

    .feature-grid {
        grid-template-columns: 1fr;
    }

    .site-features {
        padding: 48px 16px 16px;
    }

    .site-footer {
        padding: 20px 16px 26px;
        gap: 12px;
    }

    .site-footer-nav {
        max-width: none;
        gap: 2px 8px;
    }

    .site-footer-nav a {
        min-height: 44px;
        font-size: 12.5px;
        padding: 10px 6px;
    }

    .site-features-cta {
        flex-direction: column;
        align-items: flex-start;
        padding: 22px 20px;
    }

    .site-app-cta {
        padding: 8px 16px 20px;
    }

    .site-features-cta-badges {
        flex-wrap: wrap;
        width: 100%;
    }

    /* Keep social icons on one row; slightly smaller on narrow phones. */
    .site-app-cta .site-social {
        flex-wrap: nowrap;
        gap: 4px;
        justify-content: center;
        width: 100%;
        max-width: 100%;
    }

    .site-app-cta .site-social-link {
        width: 34px;
        height: 34px;
        flex: 0 0 auto;
    }

    .suggestions {
        min-width: 180px;
        max-width: calc(100vw - 16px);
        max-height: min(42vh, 280px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        overscroll-behavior: contain;
    }

    /* Full-width: keep the list shorter so placement can stay clear of the word. */
    .app.is-mobile-full-page ~ .suggestions,
    body:has(.app.is-mobile-full-page) .suggestions {
        max-height: min(32vh, 220px);
    }

    .suggestion-item {
        min-height: 44px;
        padding: 10px 12px;
        font-size: 17px;
    }

    .suggestion-index {
        min-width: 28px;
        height: 28px;
        font-size: 14px;
    }

    .go-to-editor {
        right: auto;
        bottom: auto;
    }

    .features-scroll-hint span {
        display: none;
    }
}

@media screen and (min-width: 481px) and (max-width: 900px) {
    .feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-features-cta {
        flex-direction: column;
        align-items: flex-start;
    }
}