/*
 * 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: #f2f5f1;
    --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;
}

: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-component-group-header {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
}

.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-group-header > h1 {
    grid-column: 2;
    margin: 0;
    align-self: center;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    text-align: right;
}

.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-list {
    border-color: var(--ombox-mobile-border, #dce5df);
    border-radius: 16px;
    box-shadow: 0 5px 18px rgba(15, 23, 42, .04);
}

.surface-component-group-page .surface-component-item-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-group-page .surface-component-item-list .ombox-list-body {
    grid-column: 1;
    grid-row: 1;
}

.surface-component-group-page .surface-component-item-list .ombox-list-body strong {
    font-size: 16px;
}

.surface-component-group-page .surface-component-item-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-group-page .surface-component-item-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-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;
}