/* New mobile content is hidden by default, including in print.
   Existing desktop rules remain in their original component stylesheets. */
.app-mobile-only,
.app-mobile-icon { display: none; }
.app-mobile-range-picker { display: contents; }
.users-directory-name-line { display: grid; gap: var(--space-2xs); }
.account-profile-name-line { display: contents; }

@media screen and (max-width: 767.98px) {
  /* Touch should not leave a hover tint behind. Selected states and keyboard
     focus outlines remain controlled by their existing component rules. */
  * { -webkit-tap-highlight-color: transparent; }
  body {
    --color-accent-hover: var(--color-accent);
    --color-accent-text-hover: var(--color-accent-text);
    --color-contact-divider: color-mix(in srgb, var(--color-border-subtle) 45%, transparent);
  }
  body :is(button, a, summary):not(.active):not([aria-current]):not([aria-pressed="true"]):not([aria-expanded="true"]):is(:hover, :active, :focus:not(:focus-visible)) { --color-bg-interactive: var(--color-bg-surface); }
  .v2-chart-column:hover { background: transparent; }
  .v2-calendar-day:not(.is-selected):hover { background: var(--color-bg-surface); }
  .users-directory-identity:hover { color: var(--color-text-primary); }
  .user-row-actions-toggle:is(:hover, :active, :focus:not(:focus-visible)) { background: transparent; }
  .account-profile-image-button:hover .account-profile-image { filter: none; }
  body .btn:not(.active):not([aria-pressed="true"]):not([aria-current="true"]):is(:hover, :active, :focus:not(:focus-visible)) {
    color: var(--bs-btn-color) !important;
    background-color: var(--bs-btn-bg, transparent) !important;
    border-color: var(--bs-btn-border-color, var(--color-border-subtle)) !important;
  }
  .app-menu .dropdown-item:not(.active):is(:hover, :active, :focus:not(:focus-visible)) { color: var(--color-text-primary); background: transparent; }
  .app-mobile-only { display: block; }
  .empty-state.app-mobile-only { display: grid; }
  .app-mobile-only[popover]:not(:popover-open),
  .app-desktop-only { display: none !important; }
  /* Shared, accessible actions for the explicitly selected page headers. */
  .app-mobile-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-sm);
  }
  .app-mobile-header > div:first-child { display: contents; }
  .app-mobile-header .app-page-title {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    align-self: center;
    min-width: 0;
    font-size: clamp(1.75rem, 6vw, 2.25rem);
    overflow-wrap: anywhere;
  }
  .app-mobile-header .app-page-lead { grid-column: 1 / -1; grid-row: 2; margin: 0; }
  .app-mobile-header .app-page-actions {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    width: auto;
    flex-wrap: nowrap;
    gap: var(--space-xs);
    align-items: center;
  }
  .app-mobile-header > .app-mobile-action { grid-column: 2; grid-row: 1; }
  .app-mobile-action,
  .app-mobile-header .user-row-actions-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--touch-target-min) !important;
    height: var(--touch-target-min);
    min-width: var(--touch-target-min);
    padding: 0;
    border-radius: var(--radius-control);
  }
  .app-mobile-header .user-row-actions-toggle {
    border: 0;
    background: transparent;
    color: var(--color-text-primary);
  }
  .app-mobile-header .user-row-actions-toggle:is(:hover, :active, :focus:not(:focus-visible)) { background: transparent; }
  .app-mobile-action .app-mobile-action-label,
  .user-row-actions-toggle :is(.app-mobile-action-label, .user-actions-chevron) { display: none; }
  .app-mobile-icon {
    display: block;
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .user-row-actions-toggle .app-mobile-icon { display: block; width: 1.25rem; height: 1.25rem; fill: currentColor; stroke-width: 3; }
  .app-mobile-block-heading { display: flex; flex-direction: row; align-items: flex-start; }
  .app-mobile-block-heading > div { flex: 1; min-width: 0; }
  .mobile-updated-line { display: block; margin-top: var(--space-2xs); font-size: var(--font-size-caption); }

  /* A restrained watermark, clear of the form and its touch targets. */
  .login-form-panel { position: relative; isolation: isolate; overflow-x: hidden; overflow-y: auto; }
  .login-mobile-watermark {
    position: absolute;
    width: clamp(28rem, 130vw, 36rem);
    height: auto;
    top: -8%;
    right: -38%;
    transform: rotate(20deg);
    opacity: .035;
    pointer-events: none;
    z-index: -1;
  }

  .v2-week-picker-chevron { display: flex; align-items: center; flex: 0 0 auto; }
  .v2-week-picker-chevron .app-mobile-icon { transition: transform var(--motion-fast); }
  .v2-week-picker[open] .v2-week-picker-chevron .app-mobile-icon { transform: rotate(180deg); }
  .v2-week-picker input[type="week"] { cursor: pointer; min-width: 0; }
  .realtime-period-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
  .app-mobile-range-picker.v2-week-picker { display: block; flex-basis: 100%; max-width: none; }
  .app-mobile-range-picker > summary > span:nth-child(2) { min-width: 0; font-size: var(--font-size-label); }
  .app-mobile-range-picker .v2-period-form { width: 100%; grid-template-columns: minmax(0, 1fr); }
  .app-mobile-range-picker input[type="datetime-local"] { cursor: pointer; min-width: 0; }
  .app-mobile-range-picker .realtime-range-actions { flex-direction: column; }
  .app-mobile-range-picker .realtime-range-actions > .btn { width: 100%; }
  .v2-overview-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); }
  .v2-overview-label { overflow-wrap: anywhere; }

  .statistics-audience-legend .audience-group-list {
    grid-template-columns: repeat(2, minmax(0, max-content));
    justify-content: space-evenly;
    max-width: 26rem;
    margin-inline: auto;
    gap: var(--space-md);
  }
  .statistics-audience-legend .audience-group-row {
    display: grid;
    grid-template-columns: .625rem minmax(0, 1fr);
    grid-template-rows: auto auto;
    justify-content: start;
    align-items: center;
    gap: var(--space-2xs);
    column-gap: calc(var(--space-2xs) + 2px);
    text-align: left;
  }
  .statistics-audience-legend .audience-group-dot { grid-column: 1; grid-row: 1; justify-self: end; }
  .statistics-audience-legend .audience-group-row strong { grid-column: 2; grid-row: 1; white-space: normal; }
  .statistics-audience-legend .audience-group-row > span:last-child { grid-column: 2; grid-row: 2; white-space: normal; }

  /* One pagination layout for reports, realtime, history and modal lists. */
  :is(.app-pagination, .recent-pagination) { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; gap: var(--space-sm); }
  :is(.app-pagination, .recent-pagination) > .app-section-meta { margin: 0; text-align: center; }
  :is(.app-pagination, .recent-pagination) > div,
  .app-mobile-pagination-links {
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: var(--space-sm);
  }
  :is(.app-pagination, .recent-pagination) > div > .btn,
  .app-mobile-pagination-links > .btn { min-height: var(--touch-target-min); flex: 0 1 auto; }

  /* Current configuration is redundant when versioning is disabled. */
  .mobile-current-configuration {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-sm);
    align-items: center;
  }
  .mobile-current-configuration .preset-scenario-history-title { display: contents; }
  .mobile-current-configuration :is(.preset-configuration-title, .preset-current-version-heading, .preset-scenario-description) { display: none; }
  .mobile-current-configuration .preset-current-version { grid-column: 1; grid-row: 1; padding: 0; background: transparent; }
  .mobile-current-configuration .preset-current-version p { margin: 0 !important; }
  .mobile-current-configuration .history-actor-avatar { grid-column: 2; grid-row: 1; }

  /* Version history remains readable inside the scenario card. */
  .preset-scenario-history-copy:not(.mobile-current-configuration) { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  .preset-scenario-table .scenario-version-table { display: block; min-width: 0; width: 100%; }
  .scenario-version-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .scenario-version-table tbody { display: grid; gap: var(--space-md); }
  .scenario-version-table tbody tr { display: grid; gap: var(--space-sm); padding-block: var(--space-sm); border-bottom: var(--border-width) solid var(--color-border-subtle); }
  .scenario-version-table tbody tr:last-child { border-bottom: 0; }
  .preset-scenario-table .scenario-version-table tbody :is(th, td) { display: block; width: auto; max-width: none; padding: 0; border: 0; white-space: normal; overflow-wrap: anywhere; }
  .scenario-version-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: var(--space-2xs); color: var(--color-text-secondary); font-size: var(--font-size-caption); }
  .scenario-version-table .history-row-details .preset-version-factors { min-width: 0; }

  .factor-timeline-row {
    grid-template-columns: 2.25rem minmax(0, 1fr) 2rem 1rem;
    grid-template-areas: "event factor actor chevron" "event details details details" ". period period period";
    align-items: center;
  }
  .factor-history-shell.is-static .factor-timeline-row {
    grid-template-columns: 2.25rem minmax(0, 1fr) 2rem;
    grid-template-areas: "event factor actor" "event details details" ". period period";
  }
  .factor-history-mobile-actor { display: none; }
  .factor-history-user { display: flex; grid-area: actor; justify-content: center; align-items: center; }
  .factor-timeline-expanded { padding: var(--space-md) var(--space-md) var(--space-xl); }
  .factor-timeline-expanded .factor-comment-panel:has(.factor-detail-heading) { display: none; }
  .factor-values-panel { border: 0; padding: 0; }
  .preset-scenario-detail-section > h3,
  .factor-values-panel > .factor-detail-heading { display: none; }
  .preset-current-factors { margin-top: 0; padding: 0; }
  :is(.preset-version-factors, .factor-values-grid) {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: var(--space-xs);
  }
  :is(.preset-version-factors, .factor-values-grid) > :is(span, div) {
    display: grid;
    grid-template-rows: minmax(2.6em, auto) auto;
    gap: var(--space-2xs);
    min-width: 0;
    text-align: center;
  }
  :is(.preset-version-factors, .factor-values-grid) > :is(span, div) > :is(small, span) {
    display: flex;
    align-items: end;
    justify-content: center;
    min-width: 0;
    font-size: var(--font-size-caption);
    line-height: var(--line-height-label);
  }
  :is(.preset-version-factors, .factor-values-grid) strong { align-self: start; justify-self: center; font-size: var(--font-size-body); }
  /* Preserve the directory's table semantics while rendering each row as a card. */
  .mobile-people-shell { background: transparent; border: 0; box-shadow: none; overflow: visible; }
  .users-directory-table { display: block; min-width: 0; width: 100%; }
  .users-directory-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .users-directory-table tbody { display: grid; gap: var(--space-md); }
  .users-directory-table [data-profile-row] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-sm);
    padding: var(--space-md);
    border: var(--border-width) solid var(--color-border-subtle);
    border-radius: var(--radius-panel);
    background: var(--color-bg-surface);
    box-shadow: var(--shadow-subtle);
  }
  .users-directory-table [data-profile-row] > :is(th, td) { display: block; padding: 0; border: 0; background: transparent; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  .users-directory-table [data-profile-row]::before { content: ""; grid-column: 1 / -1; grid-row: 2; border-top: var(--border-width) solid var(--color-contact-divider); }
  .users-directory-table [data-label="Användare"] { grid-column: 1; grid-row: 1; }
  .users-directory-table [data-label="Åtgärder"] { grid-column: 2; grid-row: 1; align-self: start; }
  .users-directory-table :is([data-label="E-post"], [data-label="Telefon"]) { grid-column: 1 / -1; grid-row: 3; width: calc((100% - var(--space-sm)) / 2); color: var(--color-text-secondary); font-size: var(--font-size-caption); }
  .users-directory-table [data-label="E-post"] { justify-self: start; }
  .users-directory-table [data-label="E-post"] > span:not(.app-contact-missing) { display: block; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .users-directory-table [data-label="Telefon"] { justify-self: end; }
  .users-directory-table [data-profile-row] > :is([data-label="E-post"], [data-label="Telefon"]) { display: flex; align-items: center; gap: var(--space-xs); }
  .users-directory-table :is([data-label="E-post"], [data-label="Telefon"]) .app-mobile-icon { width: 1rem; height: 1rem; flex-shrink: 0; }
  .users-directory-table :is([data-label="E-post"], [data-label="Telefon"]) > span { min-width: 0; }
  .users-directory-table .users-directory-identity { min-width: 0; align-items: flex-start; }
  .users-directory-table .users-directory-identity > span:last-child { min-width: 0; }
  .users-directory-table .users-directory-name-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs) var(--space-xs); }
  .users-directory-table .user-row-actions-toggle { align-items: baseline; justify-content: flex-end; min-width: var(--touch-target-min); min-height: var(--touch-target-min); padding: 0; line-height: var(--line-height-body); }

  .account-profile-card { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); padding: var(--space-md); align-items: start; }
  .account-profile-card .account-profile-contact { border-top: var(--border-width) solid var(--color-contact-divider); padding-top: var(--space-md); }
  .account-profile-card .account-public-identity { display: grid; grid-template-columns: 4rem minmax(0, 1fr); column-gap: var(--space-md); align-items: center; text-align: left; justify-content: start; padding-right: 0; }
  .account-profile-card .account-public-identity > :is(.account-profile-image-button, .account-profile-image) { grid-column: 1; grid-row: 1 / 3; align-self: start; }
  .account-profile-card .account-public-identity > :is(.account-profile-name-line, .app-badge) { grid-column: 2; justify-self: start; }
  .account-profile-card .account-profile-name-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs) var(--space-xs); min-width: 0; }
  .account-profile-card .account-profile-image { width: 4rem; height: 4rem; flex-basis: 4rem; font-size: 1.5rem; }
  .account-profile-card .account-public-identity :is(.app-section-title, .app-section-meta) { max-width: 100%; overflow-wrap: anywhere; }
  .account-profile-card .account-public-identity .app-section-title { font-family: var(--font-family-body); font-size: var(--font-size-body); }
  .account-profile-card .account-public-identity .app-section-meta { font-size: var(--font-size-caption); }
  .account-profile-card .account-profile-image-hint { display: none; }
  .account-profile-contact-header { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .account-profile-table { margin: 0; overflow: visible; }
  .account-profile-table :is(table, tbody) { display: block; min-width: 0; width: 100%; }
  .account-profile-table tbody { display: grid; gap: var(--space-md); }
  .account-profile-table tr { position: relative; display: grid; grid-template-columns: 1rem minmax(0, 1fr); column-gap: var(--space-md); min-width: 0; width: 100%; }
  .account-profile-card .account-profile-table :is(th, td) { display: block; grid-column: 2; width: auto; padding: 0; border: 0; overflow-wrap: anywhere; }
  .account-profile-table th .app-mobile-icon { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; }
  .account-profile-card .account-profile-table th { font-size: var(--font-size-caption); margin-bottom: var(--space-2xs); }
  .account-profile-table td { font-size: var(--font-size-caption); }
  .account-profile-contact:has(.account-settings-form) { grid-column: 1 / -1; }
  .account-profile-card:has(.account-settings-form) .account-public-identity { grid-column: 1 / -1; }

  /* Keep data inside its surface; scrolling belongs to large detail tables only. */
  .import-layout, .import-info-card, .import-upload-card { min-width: 0; max-width: 100%; }
  .import-door-table { overflow: visible; }
  .import-door-table .table { min-width: 0; width: 100%; table-layout: fixed; }
  .import-door-table :is(th, td) { padding: var(--space-xs); white-space: normal; overflow-wrap: anywhere; }
  .import-door-table th:first-child { width: 22%; }
  .import-door-table th:nth-child(2) { width: 25%; }
  .import-door-table td:nth-child(2) { white-space: nowrap; }
  .v2-print-page .v2-print-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-print-page .v2-print-actions > .btn { min-width: 0; white-space: nowrap; padding-inline: var(--space-xs); }
  .v2-print-page .statistics-print-door-table { display: block; min-width: 0; width: 100%; }
  .statistics-print-door-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .statistics-print-door-table tbody { display: block; }
  .statistics-print-door-table tbody tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-sm);
    padding-block: var(--space-md);
    border-bottom: var(--border-width) solid var(--color-border-subtle);
  }
  .statistics-print-door-table tbody tr:last-child { border-bottom: 0; }
  .v2-print-page .statistics-print-door-table tbody :is(th, td) { display: block; width: auto; padding: 0; border: 0; white-space: normal; overflow-wrap: anywhere; text-align: left !important; }
  .statistics-print-door-table tbody th { grid-column: 1 / -1; }
  .statistics-print-door-table td::before { content: attr(data-label); display: block; min-height: calc(var(--font-size-caption) * var(--line-height-body) * 2); margin-bottom: var(--space-2xs); color: var(--color-text-secondary); font-size: var(--font-size-caption); line-height: var(--line-height-body); }
}

@media screen and (max-width: 359.98px) {
  :is(.preset-version-factors, .factor-values-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .v2-week-picker-chevron .app-mobile-icon { transition: none; }
}