/*
 * OMBoxOS mobile visual theme.
 * ShellAsset loads this file; device-mobile activates the rules. Pages opt in
 * to touch surface geometry with .ombox-touch-theme.
 */
body.device-mobile:not(.eye-protection) .ombox-touch-theme {
    --ombox-touch-card-radius: 0;
    min-height: 100%;
    background: var(--ombox-touch-page-background);
}

body.device-mobile .ombox-touch-theme {
    --ombox-touch-text-primary: #111827;
    --ombox-touch-text-secondary: #4b5563;
    --ombox-touch-divider-color: #dfe3e8;
    --ombox-touch-body-font-size: 16px;
    --ombox-touch-supporting-font-size: 15px;
    --ombox-touch-section-title-size: 20px;
    --ombox-touch-page-title-size: 28px;
    --ombox-touch-control-font-size: 17px;
    --ombox-touch-control-min-height: 48px;
    --widget-label-font-size: 16px;
    --widget-small-font-size: 15px;
    --widget-control-min-height: var(--ombox-touch-control-min-height);
    --form-control-font-size: var(--ombox-touch-control-font-size);
    font-size: var(--ombox-touch-body-font-size);
    line-height: 1.6;
}

/* OMBox Mobile brand palette. Page assets consume semantic variables instead
   of introducing independent blues and near-duplicate greens. */
body.device-mobile {
    --ombox-mobile-primary: #0087F7;
    --ombox-mobile-primary-hover: #0070d9;
    --ombox-mobile-primary-soft: #e6f3fe;
    --ombox-mobile-page: #ffffff;
    --ombox-mobile-surface: #ffffff;
    --ombox-mobile-text: #18231d;
    --ombox-mobile-text-muted: #65736b;
    --ombox-mobile-border: #dce5df;
    --color-primary: var(--ombox-mobile-primary);
    --color-primary-hover: var(--ombox-mobile-primary-hover);
    --color-primary-light: var(--ombox-mobile-primary-soft);
    --primary-color: var(--ombox-mobile-primary);
    --bs-primary: var(--ombox-mobile-primary);
    --bs-primary-rgb: 0, 135, 247;
    --text-primary: var(--ombox-mobile-text);
    --text-secondary: var(--ombox-mobile-text-muted);
    --color-border: var(--ombox-mobile-border);
    --color-gray-50: var(--ombox-mobile-page);
}

body.eye-protection.device-mobile {
    --ombox-mobile-primary: #0087F7;
    --ombox-mobile-primary-hover: #0070d9;
    --ombox-mobile-primary-soft: #e6f3fe;
    --ombox-mobile-page: #edf1e9;
    --ombox-mobile-surface: #f8f9f3;
    --ombox-mobile-text: #293a31;
    --ombox-mobile-text-muted: #5d6d64;
    --ombox-mobile-border: #d5ddcf;
}

body.device-mobile :where(
    .account-identity,
    .account-password,
    .account-points,
    .login-activity
) {
    --a: var(--ombox-mobile-primary);
}

body.device-mobile .account-messages { --am-primary: var(--ombox-mobile-primary); }
body.device-mobile .account-message-detail { --amd-primary: var(--ombox-mobile-primary); }
body.device-mobile .account-about { --account-accent: var(--ombox-mobile-primary); }
body.device-mobile .account-earnings { --earn-accent: var(--ombox-mobile-primary); }

/* Account pages use links as navigation controls; inherited document-link
   decoration must not draw an underline below icon or card actions. */
body.device-mobile :where(main[class^="account-"], main.login-activity) a {
    text-decoration: none;
}

/* OMBox Mobile first-level content pattern. Business-specific canvases keep
   their own internal layout while sharing the Profile page's outer rhythm. */
.ombox-mobile-primary-page {
    box-sizing: border-box;
    width: 100%;
    padding: 10px 12px calc(24px + env(safe-area-inset-bottom));
    color: var(--ombox-mobile-text, #18251f);
    background: var(--ombox-mobile-page, #f3f5f1);
}

.ombox-mobile-primary-page > .ombox-page-header {
    gap: 12px;
    margin-bottom: 20px;
}

.ombox-mobile-primary-page > .ombox-page-header .ombox-page-title {
    font-size: 28px;
    line-height: 1.2;
}

.ombox-mobile-primary-page > .ombox-page-header .ombox-page-subtitle {
    margin-top: 8px;
    font-size: 16px;
    line-height: 1.55;
}

.ombox-mobile-primary-page > .ombox-page-header .ombox-page-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding-inline: 16px;
    border: 1px solid var(--ombox-mobile-primary, #0087F7);
    border-radius: 10px;
    color: var(--ombox-mobile-primary, #0087F7);
    background: transparent;
    text-decoration: none;
}

.surface-modules-page > .ombox-card-grid {
    gap: 12px;
}

/* Welcome uses the same mobile content rhythm as the module/catalog pages.
   The standalone footer already owns the bottom safe-area inset. */
.surface-welcome-page.ombox-mobile-primary-page > .ombox-card-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.surface-welcome-page.ombox-mobile-primary-page > .ombox-card-grid + .ombox-card-grid {
    margin-top: 24px;
}

.surface-standalone-mobile .surface-welcome-page.ombox-mobile-primary-page {
    padding-bottom: 24px;
}

:is(.surface-components-page, .surface-templates-page) > .ombox-alert {
    margin-bottom: 12px;
    border-color: var(--ombox-mobile-border, #dce5df);
    border-radius: 14px;
    background: var(--ombox-mobile-surface, #fff);
}

:is(.surface-components-page, .surface-templates-page) > .ombox-widget-gallery {
    gap: 12px;
}

:is(.surface-components-page, .surface-templates-page) .ombox-widget-gallery-group {
    gap: 12px;
    padding: 16px 12px;
    border-color: var(--ombox-mobile-border, #dce5df);
    border-radius: 16px;
}

:is(.surface-components-page, .surface-templates-page) .ombox-widget-gallery-grid {
    gap: 12px;
}

:is(.surface-components-page, .surface-templates-page) .ombox-widget-gallery-item {
    padding: 16px;
    border-color: var(--ombox-mobile-border, #dce5df);
    border-radius: 12px;
    background: var(--ombox-mobile-surface-muted, #f7f9f7);
}

.surface-component-index .surface-component-category-list {
    border-color: var(--ombox-mobile-border, #dce5df);
    border-radius: 16px;
    box-shadow: 0 5px 18px rgba(15, 23, 42, .04);
}

.surface-component-index .surface-component-category-list .ombox-list-item {
    min-height: 68px;
    grid-template-columns: minmax(0, 1fr) 14px;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 2px;
    padding: 10px 12px;
    border-color: var(--ombox-mobile-border, #dce5df);
}

.surface-component-index .surface-component-category-list .ombox-list-body {
    grid-column: 1;
    grid-row: 1;
    gap: 4px;
}

.surface-component-index .surface-component-category-list .ombox-list-body strong {
    font-size: 16px;
}

.surface-component-index .surface-component-category-list .ombox-list-meta {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    color: var(--ombox-mobile-muted, #68776f);
    font-size: 12px;
    white-space: nowrap;
}

.surface-component-index .surface-component-category-list .ombox-list-item::after {
    content: '\f105';
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    color: var(--ombox-mobile-muted, #87948d);
    font-family: 'Font Awesome 6 Free';
    font-size: 14px;
    font-weight: 900;
}

.surface-component-index-actions {
    display: grid;
    margin-top: 16px;
}

.surface-component-index-actions .btn {
    display: inline-flex;
    width: 100%;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ombox-mobile-primary, #0087F7);
    border-radius: 10px;
    color: var(--ombox-mobile-primary, #0087F7);
    background: transparent;
    text-decoration: none;
}

.surface-calendar-page .ombox-calendar {
    margin-top: 12px;
    padding: 12px;
    border-color: var(--ombox-mobile-border, #dce5df);
    border-radius: 16px;
    background: var(--ombox-mobile-surface, #fff);
    box-shadow: 0 5px 18px rgba(15, 23, 42, .04);
}

.surface-calendar-page .ombox-calendar-header h3 {
    margin-bottom: 10px;
    color: var(--ombox-mobile-text, #18251f);
    font-size: 18px;
}

.surface-calendar-page .ombox-calendar-weekdays span {
    padding: 6px 2px;
    color: var(--ombox-mobile-text-muted, #65736b);
    font-size: 12px;
}

.surface-calendar-page .ombox-calendar-weekdays span.is-weekend,
.surface-calendar-page .ombox-calendar-day.is-weekend strong {
    color: #d14b4b;
}

.surface-component-detail-page[data-component="layout"] .ombox-widget-gallery-preview {
    padding: 0;
}

.surface-component-detail-page[data-component="page_header"] .ombox-widget-gallery-preview .ombox-page-title {
    font-size: 20px;
    line-height: 1.25;
}

.surface-component-detail-page {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.surface-component-detail-page .ombox-widget-gallery,
.surface-component-detail-page .ombox-widget-gallery-group,
.surface-component-detail-page .ombox-widget-gallery-grid,
.surface-component-detail-page .ombox-widget-gallery-item {
    min-width: 0;
    max-width: 100%;
}

.surface-component-detail-page .ombox-widget-gallery-grid {
    grid-template-columns: minmax(0, 1fr);
}

.surface-mobile-layout-demo {
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--ombox-mobile-border, #dce5df);
    border-radius: 12px;
    background: var(--ombox-mobile-surface, #fff);
}

.surface-mobile-layout-demo :where(.ombox-layout-header, .ombox-layout-sidebar, .ombox-layout-content, .ombox-layout-aside, .ombox-layout-footer) {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--ombox-mobile-primary-soft, #e6f3fe);
    color: var(--ombox-mobile-text, #18251f);
    font-size: 12px;
}

.surface-mobile-layout-demo .ombox-layout-body {
    gap: 8px;
}

.surface-mobile-layout-demo :where(.ombox-layout-sidebar, .ombox-layout-aside) {
    background: var(--ombox-mobile-page, #fff);
    box-shadow: inset 0 0 0 1px var(--ombox-mobile-border, #dce5df);
}

.surface-mobile-layout-demo .ombox-layout-content {
    min-height: 62px;
    background: var(--ombox-mobile-surface, #fff);
    box-shadow: inset 0 0 0 1px var(--ombox-mobile-border, #dce5df);
}

body.surface-theme-dark .surface-mobile-layout-demo {
    border-color: #374151;
    background: #1f2937;
}

.surface-calendar-page .ombox-calendar-grid {
    gap: 4px;
}

.surface-calendar-page .ombox-calendar-day {
    min-height: 58px;
    padding: 6px;
    border: 0;
    border-radius: 10px;
    background: var(--ombox-mobile-surface, #fff);
    box-shadow: inset 0 0 0 1px var(--ombox-mobile-border, #dce5df);
}

.surface-calendar-page .ombox-calendar-day.is-empty {
    background: transparent;
    box-shadow: none;
}

.surface-calendar-page .ombox-calendar-event {
    margin-top: 4px;
    padding: 2px 4px;
    font-size: 10px;
}

body.surface-theme-dark .surface-calendar-page .ombox-calendar-day.is-weekend strong {
    color: #f28b8b;
}

.surface-component-detail-page[data-component="masonry"] .ombox-widget-gallery-preview {
    padding: 0;
}

.surface-component-detail-page[data-component="masonry"] .surface-mobile-masonry-demo {
    column-count: 2;
    column-gap: 10px;
}

.surface-component-detail-page[data-component="masonry"] .surface-mobile-masonry-demo .ombox-masonry-item {
    margin-bottom: 10px;
}

.surface-masonry-demo-card {
    overflow: hidden;
    border: 1px solid var(--ombox-mobile-border, #dce5df);
    border-radius: 12px;
    background: var(--ombox-mobile-surface, #fff);
    box-shadow: 0 4px 12px rgba(15, 23, 42, .05);
}

.surface-masonry-demo-thumb {
    display: grid;
    min-height: 74px;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #0087f7, #64b5f6);
    font-size: 22px;
    font-weight: 700;
}

.surface-masonry-demo-card:nth-child(3n) .surface-masonry-demo-thumb {
    background: linear-gradient(135deg, #8b5cf6, #c084fc);
}

.surface-masonry-demo-card:nth-child(3n + 2) .surface-masonry-demo-thumb {
    background: linear-gradient(135deg, #00a256, #5bc98a);
}

.surface-masonry-demo-card strong,
.surface-masonry-demo-card span {
    display: block;
    padding-inline: 10px;
}

.surface-masonry-demo-card strong {
    padding-top: 9px;
    color: var(--ombox-mobile-text, #18251f);
    font-size: 14px;
}

.surface-masonry-demo-card span {
    padding-top: 4px;
    padding-bottom: 10px;
    color: var(--ombox-mobile-text-muted, #65736b);
    font-size: 12px;
    line-height: 1.45;
}

body.surface-theme-dark .surface-masonry-demo-card {
    border-color: #374151;
    background: #1f2937;
}

.surface-component-header,
.surface-component-group-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ombox-mobile-border, #dce5df);
}

.surface-component-header > a,
.surface-component-group-header > a {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    place-items: center;
    border: 1px solid var(--ombox-mobile-border, #dce5df);
    border-radius: 14px;
    color: var(--ombox-mobile-text, #18251f);
    background: var(--ombox-mobile-surface, #fff);
    text-decoration: none;
}

.surface-component-header > h1,
.surface-component-group-header > h1 {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
    margin: 0;
    align-self: center;
    color: var(--ombox-mobile-text, #18251f);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.surface-component-detail-header {
    grid-template-columns: minmax(0, 1fr) 44px;
}

.surface-component-detail-header > h1 {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--ombox-mobile-text, #18251f);
    font-size: 20px;
    line-height: 1.35;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.surface-component-detail-header > a {
    grid-column: 2;
    grid-row: 1;
}

.surface-component-preview {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: 16px;
}

/* Do not clip the preview wrapper: Widget popovers own their placement and
   overflowing tables own their internal scroll container. */

/* Component demos must stay inside the phone surface. Data tables keep their
   own deliberate scroll container while cards, code and diagrams can wrap. */
.surface-component-preview :where(.ombox-table-wrap, .ombox-worker-health .ombox-table-wrap) {
    max-width: 100%;
    overflow-x: auto;
}

.surface-component-preview :where(.ombox-table-wrap table, .ombox-file-preview, .ombox-relation-map, .ombox-media-player-control, .ombox-worker-health) {
    max-width: 100%;
}

.surface-component-preview :where(pre, code, .ombox-mermaid-fallback) {
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.surface-component-preview :where(.ombox-stat-grid, .ombox-metric-trend-card, .ombox-entity-summary-strip, .ombox-completion-card, .ombox-worker-health) {
    min-width: 0;
}

.surface-mobile-panel-demo {
    margin-bottom: 0;
    padding: 16px;
    border-color: var(--ombox-mobile-border, #dce5df);
    border-radius: 14px;
    background: var(--ombox-mobile-surface, #fff);
}

.surface-mobile-panel-demo .ombox-panel-header {
    gap: 10px;
    margin-bottom: 14px;
}

.surface-mobile-panel-demo .ombox-panel-header h2 {
    font-size: 18px;
}

.surface-mobile-panel-demo .ombox-panel-header p {
    font-size: 13px;
}

.surface-mobile-panel-demo .ombox-panel-actions .btn {
    min-height: 36px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12px;
}

.surface-mobile-panel-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.surface-mobile-panel-metrics > div {
    display: grid;
    gap: 3px;
    padding: 10px 8px;
    border-radius: 10px;
    background: var(--ombox-mobile-surface-muted, #f7f9f7);
    text-align: center;
}

.surface-mobile-panel-metrics strong {
    color: var(--ombox-mobile-text, #18251f);
    font-size: 20px;
    line-height: 1.1;
}

.surface-mobile-panel-metrics span,
.surface-mobile-panel-note {
    color: var(--ombox-mobile-muted, #68776f);
    font-size: 12px;
}

.surface-mobile-panel-note {
    margin: 12px 0 0;
    line-height: 1.55;
}

body.surface-theme-dark .surface-mobile-panel-demo,
body.surface-theme-dark .surface-mobile-panel-metrics > div {
    border-color: #374151;
    background: #1f2937;
}

.surface-component-group-summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin: 12px 0;
    color: var(--ombox-mobile-muted, #68776f);
    font-size: 14px;
    line-height: 1.55;
}

.surface-component-group-summary strong {
    flex: 0 0 auto;
    padding: 4px 8px;
    border-radius: 999px;
    color: var(--ombox-mobile-primary, #0087F7);
    background: #E5F4FF;
    font-size: 12px;
    white-space: nowrap;
}

.surface-component-group-page .surface-component-item-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 16px 0 0;
}

.surface-component-group-page .surface-component-item-card {
    display: grid;
    min-width: 0;
    min-height: 88px;
    aspect-ratio: 1;
    align-items: center;
    justify-items: center;
    padding: 12px 8px;
    border: 1px solid var(--ombox-mobile-border, #dce5df);
    border-radius: 14px;
    color: var(--ombox-mobile-text, #18251f);
    background: var(--ombox-mobile-surface, #fff);
    box-shadow: 0 5px 18px rgba(15, 23, 42, .04);
    text-align: center;
    text-decoration: none;
}

.surface-component-group-page .surface-component-item-card span {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
}

.surface-component-group-page .surface-component-item-card:focus-visible {
    outline: 3px solid rgba(0, 135, 247, .28);
    outline-offset: 2px;
}

.surface-component-group-page .surface-component-item-card:hover {
    border-color: var(--ombox-mobile-primary, #0087F7);
}

.surface-component-detail-summary {
    margin: 12px 0;
    padding: 14px 16px;
    border: 1px solid var(--ombox-mobile-border, #dce5df);
    border-radius: 14px;
    background: var(--ombox-mobile-surface, #fff);
}

.surface-component-detail-summary strong {
    color: var(--ombox-mobile-primary, #0087F7);
    font-size: 13px;
}

.surface-component-detail-summary code {
    display: block;
    margin-top: 4px;
    color: var(--ombox-mobile-text, #18251f);
    font-size: 13px;
}

.surface-component-detail-summary p {
    margin: 6px 0 0;
    color: var(--ombox-mobile-muted, #68776f);
    font-size: 14px;
    line-height: 1.6;
}

.surface-template-groups {
    display: grid;
    gap: 20px;
}

.surface-template-group > header {
    display: flex;
    margin-bottom: 8px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.surface-template-group > header h2 {
    margin: 0;
    font-size: 18px;
    line-height: 1.35;
}

.surface-template-group > header span {
    color: var(--ombox-mobile-muted, #68776f);
    font-size: 12px;
    white-space: nowrap;
}

.surface-template-list {
    border-color: var(--ombox-mobile-border, #dce5df);
    border-radius: 16px;
    box-shadow: 0 5px 18px rgba(15, 23, 42, .04);
}

.surface-template-list .ombox-list-item {
    min-height: 68px;
    grid-template-columns: minmax(0, 1fr) 14px;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 2px;
    padding: 10px 12px;
    border-color: var(--ombox-mobile-border, #dce5df);
}

.surface-template-list .ombox-list-body {
    grid-column: 1;
    grid-row: 1;
}

.surface-template-list .ombox-list-meta {
    grid-column: 1;
    grid-row: 2;
    color: var(--ombox-mobile-muted, #68776f);
    font-size: 12px;
}

.surface-template-list .ombox-list-item::after {
    content: '\f105';
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    color: var(--ombox-mobile-muted, #87948d);
    font-family: 'Font Awesome 6 Free';
    font-size: 14px;
    font-weight: 900;
}

.surface-template-index-actions {
    display: grid;
    margin-top: 20px;
}

.surface-template-index-actions .btn {
    display: inline-flex;
    width: 100%;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ombox-mobile-primary, #0087F7);
    border-radius: 10px;
    color: var(--ombox-mobile-primary, #0087F7);
    background: transparent;
    text-decoration: none;
}

.surface-component-group-page > .ombox-widget-gallery .ombox-widget-gallery-group > h2 {
    font-size: 20px;
}

body.eye-protection .surface-component-group-summary strong {
    color: #6b5537;
    background: #eee7dc;
}

body.eye-protection .surface-component-detail-summary {
    border-color: #d9cbb8;
    background: #faf8f3;
}

/* OMBox Mobile secondary-page heading contract. It intentionally targets
   content headers with a leading back link, leaving Shell and first-level
   pages unchanged. DOM order may remain subtitle/title for compatibility;
   visual order is always title first, subtitle second. */
main[class] > header:has(> a:first-child):has(h1) {
    position: relative;
    padding-bottom: 30px;
}

main[class] > header:has(> a:first-child):has(h1)::after {
    position: absolute;
    right: auto;
    bottom: 0;
    left: 50%;
    width: 100vw;
    height: 10px;
    background: #FFFFFF;
    content: "";
    transform: translateX(-50%);
    pointer-events: none;
}

main[class] > header > a:first-child + div:has(> h1) {
    display: flex;
    width: 100%;
    min-width: 0;
    margin-left: auto;
    align-items: flex-end;
    flex-direction: column;
    text-align: right;
}

main[class] > header > a:first-child + div > h1 {
    order: -1;
    margin-top: 0;
    margin-bottom: 2px;
    text-align: right;
}

main[class] > header > a:first-child + h1 {
    width: 100%;
    min-width: 0;
    margin-left: auto;
    justify-self: stretch;
    text-align: right;
}

body.device-mobile :where(
    .account-points__balance,
    .account-about__identity,
    .account-earnings__hero
) {
    background: var(--ombox-mobile-primary);
}

body.device-mobile .ombox-touch-theme > :where(.ombox-panel, .ombox-card, .card) {
    width: calc(100% + (var(--ombox-touch-page-inline) * 2));
    margin-inline: calc(var(--ombox-touch-page-inline) * -1);
    border-right: 0;
    border-left: 0;
    border-radius: var(--ombox-touch-card-radius);
    padding: var(--ombox-touch-card-block-padding) var(--ombox-touch-page-inline);
}

body.device-mobile:not(.eye-protection) .ombox-touch-theme > :where(.ombox-panel, .ombox-card, .card) {
    background: var(--ombox-touch-card-background);
}

body.device-mobile .ombox-touch-theme .btn {
    border-radius: 0;
}

body.device-mobile .ombox-touch-theme .btn:not(.btn-close) {
    min-height: var(--ombox-touch-control-min-height);
}

/* Main and form actions keep one visual rhythm even when a PageLibrary page
   does not opt into the generic .ombox-touch-theme wrapper. */
body.device-mobile :where(
    .btn:not(.btn-close),
    button[type="submit"],
    input[type="submit"],
    [data-mobile-primary-action]
) {
    min-height: 48px;
}

/* OMBox Mobile interactive target baseline. Decorative icons remain unchanged. */
body.device-mobile :where(
    .ombox-icon-button,
    .ombox-icon-button-compact,
    .ombox-help-tooltip,
    .ombox-modal-close,
    .ombox-drawer-close,
    .ombox-transfer-actions button,
    .ombox-media-player-button,
    .ombox-edge-float-trigger
) {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
}

body.device-mobile :where(
    .ombox-dropdown-menu a,
    .ombox-dropdown-menu button,
    .ombox-dropdown.is-compact .ombox-dropdown-menu a,
    .ombox-dropdown.is-compact .ombox-dropdown-menu button,
    .ombox-segmented-option,
    .ombox-status-filter-tab,
    .ombox-edge-float-item,
    .ombox-command-palette-search,
    .ombox-dp-nav-btn,
    .ombox-dp-day,
    .ombox-dp-month,
    .ombox-dp-time-btn,
    .ombox-dp-time-confirm
) {
    min-height: 44px;
}

body.device-mobile .ombox-media-player-mode-cycle {
    min-height: 44px;
}

body.device-mobile .ombox-switch {
    min-width: 44px;
    min-height: 44px;
}

body.device-mobile .ombox-touch-theme :where(.form-control, .form-select, .admin-system-form-control, .admin-system-form-select, input, textarea, select, .ombox-upload-dropzone) {
    border-radius: 0;
}

body.device-mobile .ombox-touch-theme > .ombox-panel > .ombox-panel-body > .ombox-form {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--ombox-touch-control-background);
    box-shadow: none;
}

body.eye-protection.device-mobile .ombox-touch-theme > :where(.ombox-panel, .ombox-card, .card) {
    border-color: #d9cbb8;
    background: var(--color-surface, #fffdf8);
}

body.eye-protection.device-mobile .ombox-touch-theme > .ombox-panel > .ombox-panel-body > .ombox-form {
    background: var(--color-surface, #fffdf8);
}

body.eye-protection.device-mobile .ombox-touch-theme {
    --ombox-touch-text-primary: var(--color-text-primary);
    --ombox-touch-text-secondary: var(--color-text-muted);
    --ombox-touch-divider-color: #d9cbb8;
}