/* Loaded last on portal and public pages. Keep mobile readability independent
   of the compact desktop styles; never conceal page overflow to make it fit. */
@media (max-width: 900px) {
    html { -webkit-text-size-adjust: 100%; }
    body { font-size: 16px !important; }

    /* Forms must remain readable without triggering input zoom on iOS. */
    html body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    html body select, html body textarea {
        min-width: 0;
        max-width: 100%;
        min-height: 44px !important;
        font-size: 16px !important;
        line-height: 1.4;
    }
    html body button, html body .btn, html body .button, html body summary,
    html body .event-text-button {
        min-height: 44px !important;
        font-size: 14px !important;
        line-height: 1.4;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    html body :is(.close-btn, .notification-close, .sidebar-close, .burger-btn, .btn-icon-only) {
        min-width: 44px !important;
        min-height: 44px !important;
        flex-shrink: 0;
    }
    html body :is(.close-btn, .notification-close) { font-size: 24px !important; }
    input[type="checkbox"], input[type="radio"] { flex-shrink: 0; }
    label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) {
        min-height: 44px;
        align-content: center;
        white-space: normal !important;
        overflow-wrap: anywhere;
        cursor: pointer;
    }

    /* Secondary text conveys dates, status and responsibility, so it needs
       the same readable minimum across all workspaces. */
    html body :is(small, label, legend, th, dt, .badge, .meta, .muted, .meta-key,
        .eyebrow, .stat-label, .stat-link, .nav-section-label, .member-subline,
        .task-pill, .case-task-count, .case-tag-add, .case-tag-delete,
        .request-source-meta, .attention-row-copy, .workspace-tabs a,
        .workspace-tabs a span, .case-section-links a span,
        .case-overview-primary p, .case-overview-people strong,
        .case-overview-progress span, .case-overview-progress strong,
        .case-record-kicker, .case-record-kicker strong, .case-view-key strong,
        .case-view-key > div > span, .case-public-state strong,
        .case-relationship-card strong, .case-relationship-card span span,
        .case-next-step > span > span, .member-stat span, .member-pagination,
        .visibility-toggle strong, .request-record-kicker, .request-filter-feedback,
        .request-action-group h4, .request-workspace-controls > summary strong,
        .news-author-hint, .news-image-note, .news-optional-badge,
        .news-jhv-tag-note, .news-jhv-tag-preview, .news-frontmatter,
        .reimbursement-toolbar-hint, .reimbursement-filter-tab span,
        .reimbursement-filter-tab strong, .reimbursement-assignment-state,
        .transaction-eyebrow, .transaction-metric > span, .transaction-sync-state,
        .transaction-year-select span, .transaction-overview-results,
        .transaction-cash-account, .transaction-substatus, .transaction-status,
        .calendar-weekday, .calendar-day-head, .calendar-chip,
        .calendar-sync-meta, .calendar-sync-meta strong,
        .calendar-privacy-note strong, .calendar-connection-state strong,
        .chat-meta, .chat-text, .conversation-message-meta,
        .voting-meta, .voting-result-label, .notification-message,
        .event-eyebrow, .event-hero-meta, .event-todo-group-title,
        .event-staffing, .event-subtask-meta, .event-panel-context,
        .event-summary-metrics > button > span, .event-workspace-tabs button span,
        .event-switch strong,
        .event-panel-heading p, .event-empty p, .event-chat-meta,
        .event-timeline-scale, .event-timeline-row p,
        .event-person p, .event-person strong, .event-route,
        .event-logistics-point, .event-supply-heading p, .event-invite-card p,
        .event-back-link, .event-guest-header nav a, .event-guest-footer,
        .hint, .step-kicker, .progress-meta,
        .status-journey-head .eyebrow, .status-journey-head > span:last-child,
        .status-journey li strong, .status-journey li > span) {
        font-size: 14px !important;
        line-height: 1.5;
    }
    html body :is(.attention-row-copy, .event-description p, .event-summary-card p, .event-note-card p) {
        font-size: 16px !important;
        line-height: 1.55;
    }
    .attention-row-copy { white-space: normal; }
    .field, .form-grid > *, .grid > *, .section-title > *, .modal-head > *,
    .event-hero-copy, .event-item > *, .event-task-suggestion > * { min-width: 0; }
    h1, h2, h3, h4, .section-title, .modal-head, .wiki-content, .chat-text,
    .attention-row, .case-list-title, .member-subline { overflow-wrap: anywhere; }
    .wiki-content :is(img, video, iframe), .chat-text img { max-width: 100%; }
    .wiki-content pre { max-width: 100%; overflow-x: auto; }

    /* Labeled icon actions inherit their visible label from the base CSS. */
    html body .page-actions .btn.btn-icon-only {
        width: auto !important;
        min-width: 44px;
        max-width: 100%;
    }
    html body .sidebar .nav a { min-height: 44px !important; font-size: 16px !important; }
    html body .mobile-dock :is(a, button) { font-size: 14px !important; padding-inline: 0; }
    .mobile-dock { grid-template-columns: repeat(var(--dock-items, 4), auto); gap: 0; padding-inline: max(2px, env(safe-area-inset-left)); }
    .mobile-dock a, .mobile-dock button { overflow-wrap: normal; }
    .mobile-page-title { max-width: none; white-space: normal; }

    .modal-card { padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important; }
    .modal-head { gap: 12px; align-items: flex-start; }
    .modal-head h3 { flex: 1; }
    .notification-actions { flex-wrap: wrap; }
    .notification-actions .btn { flex: 1 1 auto; }
    .transaction-year-select { flex-wrap: wrap; gap: 8px; }
    .transaction-year-select select { padding: 8px 30px 8px 10px; flex: 1; }
    .transaction-filter-chip { height: auto; }
    .case-tag-catalog-row { display: flex; flex-wrap: wrap; }
    .case-tag-catalog-row > input[type="color"] { flex: 0 0 44px; }
    .case-tag-catalog-row > div { min-width: 0; flex: 1 1 calc(100% - 54px); }
    .case-tag-catalog-row :is(.btn, .case-tag-delete) { flex: 1 1 calc(50% - 5px); }
    .case-tag-create { grid-template-columns: minmax(0, 1fr) 44px; }
    .case-tag-create button { grid-column: 1 / -1; }
    .event-workspace .event-task-title-button { font-size: 16px !important; }
    .event-workspace .event-todo-check { width: 44px !important; height: 44px !important; }
    .event-task-panel .event-task-save { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
    .event-task-panel-body { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
    .event-hero-title { flex-wrap: wrap; gap: 4px 12px; }
    .event-hero-title h1 { flex-basis: 100%; }
    .event-actions-menu > summary { width: auto; }
    .event-guest-header, .event-guest-header nav { flex-wrap: wrap; }
    .event-guest-header nav a { display: inline-flex; align-items: center; min-height: 44px; }
    .event-workspace, .event-guest-page { --event-muted: #52655d; }
}

@media (max-width: 700px) {
    /* Allow full action labels to wrap, with every action visible. */
    .page-actions { flex-wrap: wrap; overflow: visible; }
    html body .page-actions .btn { min-width: 0; max-width: 100%; flex: 0 1 auto; }
    .case-actions-line { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .case-action-btn { width: 100%; }
    table.mobile-card-table tbody td[data-mobile-label]::before { font-size: 14px !important; }
    .reimbursement-summary { grid-template-columns: minmax(0, 1fr); }
    .reimbursement-metric { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
    .reimbursement-metric .meta-key { text-align: left; }
    .status-journey ol { grid-template-columns: 1fr; gap: 8px; }
    .status-journey li { display: flex; align-items: center; gap: 12px; text-align: left; color: var(--public-muted); }
    .status-journey li::before { display: none; }
}

@media (max-width: 650px) {
    body[data-view="event"] .event-workspace.section { margin-top: 0 !important; }
    .event-workspace .event-task-composer { padding-block: 8px; margin: 8px 0; }
    .event-workspace .event-todo-group-title { padding-block: 5px; }
    /* Four everyday event areas fit on one row. The secondary area's full
       name stays visible in its own selector instead of being truncated. */
    .event-workspace-navigation { flex-wrap: wrap; padding: 0 6px 6px; gap: 0; }
    .event-workspace .event-workspace-navigation .event-workspace-tabs { flex: 1 1 100%; justify-content: space-between; gap: 0; }
    .event-workspace-navigation .event-workspace-tabs button { padding-inline: 4px; gap: 3px; flex-shrink: 0; }
    .event-more-areas { width: 100%; max-width: none; }
    .event-more-areas select { width: 100%; padding-left: 10px; border-color: var(--event-line); }
    .event-workspace .event-task-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
    .event-task-filters > label:first-child { grid-column: 1 / -1; }
    .event-actions-menu > summary { width: 44px; }
    .event-hero-title { padding-right: 48px; }
    .event-task-suggestion { flex-wrap: wrap; gap: 8px; }
    .event-task-suggestion > div { flex-basis: 100%; }
    .event-transfer-footer { flex-wrap: wrap; }
    .event-topic-shell { grid-template-columns: minmax(0, 1fr); }
    .event-topic-shell > * { min-width: 0; }
}

@media (max-width: 360px) {
    .event-workspace-navigation .event-workspace-tabs button { padding-inline: 2px; }
    .event-hero { padding: 12px !important; }
}

@media (min-width: 480px) and (max-width: 650px) {
    .event-workspace-navigation { column-gap: 8px; }
    .event-workspace .event-workspace-navigation .event-workspace-tabs { flex: 1; }
    .event-workspace .event-workspace-navigation:has(.event-more-areas.is-selected) .event-workspace-tabs { flex: 1 1 100%; }
    .event-more-areas:not(.is-selected) { width: 74px; }
    .event-more-areas.is-selected { flex-basis: 100%; }
}