/*
 * SMSocial interface presentation modes.
 * Modern deliberately has no visual overrides: it remains the canonical SMSocial UI.
 * Simple is a materially flatter, denser, more conventional social-network layout.
 */

html[data-sms-presentation="simple"] body.sms-app-page {
    --sms-simple-card-radius: 4px;
    --sms-simple-control-radius: 4px;
    --sms-simple-page-bg: color-mix(in srgb, var(--sms-surface-soft) 88%, #e7eaf0);
    --sms-card-radius: var(--sms-simple-card-radius);
    --sms-card-shadow: none;
    --sms-radius-sm: 4px;
    --sms-radius: 4px;
    --sms-radius-lg: 5px;
    --sms-shadow-sm: none;
    --sms-shadow: none;
    background: var(--sms-simple-page-bg) !important;
}

html[data-sms-presentation="simple"] .sms-app-root {
    --sms-simple-card-radius: 4px;
    --sms-simple-control-radius: 4px;
    --sms-simple-page-bg: color-mix(in srgb, var(--sms-surface-soft) 88%, #e7eaf0);
    --sms-card-radius: var(--sms-simple-card-radius);
    --sms-card-shadow: none;
    --sms-radius-sm: 4px;
    --sms-radius: 4px;
    --sms-radius-lg: 5px;
    --sms-shadow-sm: none;
    --sms-shadow: none;
    --sms-topbar-height: 58px;
    --sms-left-rail: 224px;
    --sms-right-rail: 284px;
    --sms-feed-width: 760px;
    background: var(--sms-simple-page-bg) !important;
}

/* Header: opaque, compact and square instead of glassy/decorative. */
html[data-sms-presentation="simple"] .sms-app-topbar {
    background: var(--sms-surface) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border-block-end: 1px solid var(--sms-border-strong) !important;
}
html[data-sms-presentation="simple"] .sms-app-topbar__inner {
    padding-inline: max(14px, var(--sms-safe-left)) max(14px, var(--sms-safe-right)) !important;
    grid-template-columns: minmax(170px, var(--sms-left-rail)) minmax(240px, 520px) minmax(300px, 1fr) !important;
    gap: 14px !important;
}
html[data-sms-presentation="simple"] .sms-app-brand { gap: 8px !important; }
html[data-sms-presentation="simple"] .sms-app-brand__mark {
    inline-size: 34px !important;
    block-size: 34px !important;
    border-radius: 4px !important;
    background: var(--sms-primary) !important;
    box-shadow: none !important;
}
html[data-sms-presentation="simple"] .sms-app-brand__name { font-size: 16px !important; }
html[data-sms-presentation="simple"] .sms-app-search {
    block-size: 34px !important;
    border-radius: 4px !important;
    background: var(--sms-surface) !important;
    padding-inline: 10px 8px !important;
}
html[data-sms-presentation="simple"] .sms-app-search kbd { box-shadow: none !important; border-radius: 3px !important; }
html[data-sms-presentation="simple"] .sms-app-topbar__actions { gap: 5px !important; }
html[data-sms-presentation="simple"] .sms-app-action {
    inline-size: 34px !important;
    block-size: 34px !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}
html[data-sms-presentation="simple"] .sms-app-action--create {
    inline-size: auto !important;
    padding-inline: 11px !important;
}
html[data-sms-presentation="simple"] .sms-app-account { gap: 7px !important; padding-inline-start: 8px !important; }
html[data-sms-presentation="simple"] .sms-app-account__avatar { inline-size: 32px !important; block-size: 32px !important; }
html[data-sms-presentation="simple"] .sms-app-account__copy strong { font-size: 12px !important; }
html[data-sms-presentation="simple"] .sms-app-account__copy small { font-size: 10px !important; }

/* Three-column shell: remove visual ambience and reduce dead space. */
html[data-sms-presentation="simple"] .sms-app-shell { gap: 0 !important; }
html[data-sms-presentation="simple"] .sms-app-rail {
    background: var(--sms-surface-soft) !important;
    box-shadow: none !important;
}
html[data-sms-presentation="simple"] .sms-app-rail__scroll {
    padding: 12px max(10px, var(--sms-safe-right)) max(18px, var(--sms-safe-bottom)) max(10px, var(--sms-safe-left)) !important;
}
html[data-sms-presentation="simple"] .sms-app-rail--left .sms-app-rail__scroll {
    padding-block-start: 10px !important;
    padding-inline: max(8px, var(--sms-safe-left)) 8px !important;
}
html[data-sms-presentation="simple"] .sms-app-navigation { gap: 1px !important; }
html[data-sms-presentation="simple"] .sms-app-navigation__item {
    min-block-size: 34px !important;
    padding: 5px 7px !important;
    grid-template-columns: 17px minmax(0, 1fr) auto !important;
    gap: 7px !important;
    border-radius: 3px !important;
    font-size: 12px !important;
    box-shadow: none !important;
}
html[data-sms-presentation="simple"] .sms-app-navigation__item > .sms-icon { inline-size: 16px !important; block-size: 16px !important; }
html[data-sms-presentation="simple"] .sms-app-navigation__item.is-active {
    background: color-mix(in srgb, var(--sms-primary) 8%, var(--sms-surface)) !important;
    border-color: color-mix(in srgb, var(--sms-primary) 24%, var(--sms-border)) !important;
    box-shadow: none !important;
}
html[data-sms-presentation="simple"] .sms-app-navigation__item.is-active::after {
    inline-size: 3px !important;
    block-size: 18px !important;
    border-radius: 0 !important;
}
html[data-sms-presentation="simple"] .sms-app-rail-card,
html[data-sms-presentation="simple"] .sms-app-context-card,
html[data-sms-presentation="simple"] .sms-app-admin-link,
html[data-sms-presentation="simple"] .sms-app-user-card,
html[data-sms-presentation="simple"] .sms-app-theme-card,
html[data-sms-presentation="simple"] .sms-app-language-card,
html[data-sms-presentation="simple"] .sms-app-incognito-card,
html[data-sms-presentation="simple"] .sms-app-guest-card {
    border-radius: 4px !important;
    box-shadow: none !important;
}
html[data-sms-presentation="simple"] .sms-app-rail-card { margin-block-start: 14px !important; padding: 11px !important; }
html[data-sms-presentation="simple"] .sms-app-context-card { padding: 11px !important; }
html[data-sms-presentation="simple"] .sms-app-context-card + .sms-app-context-card,
html[data-sms-presentation="simple"] .sms-app-admin-link { margin-block-start: 7px !important; }
html[data-sms-presentation="simple"] .sms-app-context-card__icon { inline-size: 31px !important; block-size: 31px !important; border-radius: 3px !important; }
html[data-sms-presentation="simple"] .sms-app-context-card h2 { font-size: 14px !important; margin-block: 5px 6px !important; }
html[data-sms-presentation="simple"] .sms-app-context-card p { font-size: 11px !important; margin-block-end: 9px !important; }
html[data-sms-presentation="simple"] .sms-app-context-card li { min-block-size: 31px !important; }
html[data-sms-presentation="simple"] .sms-app-context-links { gap: 4px !important; margin-block-start: 6px !important; }
html[data-sms-presentation="simple"] .sms-app-context-link {
    min-block-size: 42px !important;
    padding: 6px 8px !important;
    gap: 7px !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Centre column: plain background, denser headings and much smaller gutters. */
html[data-sms-presentation="simple"] .sms-app-centre {
    background: var(--sms-simple-page-bg) !important;
}
html[data-sms-presentation="simple"] .sms-app-centre__stream {
    inline-size: min(100%, calc(var(--sms-feed-width) + 18px)) !important;
    padding: 12px max(9px, var(--sms-safe-right)) max(34px, calc(18px + var(--sms-safe-bottom))) max(9px, var(--sms-safe-left)) !important;
}
html[data-sms-presentation="simple"] .sms-app-view-heading {
    min-block-size: 40px !important;
    margin-block-end: 9px !important;
    gap: 10px !important;
}
html[data-sms-presentation="simple"] .sms-app-view-heading h1 { font-size: 20px !important; letter-spacing: -0.02em !important; }
html[data-sms-presentation="simple"] .sms-app-section-heading { margin-block-end: 10px !important; }
html[data-sms-presentation="simple"] .sms-app-section-heading h2 { font-size: 16px !important; }
html[data-sms-presentation="simple"] .sms-app-kicker,
html[data-sms-presentation="simple"] .sms-panel__kicker,
html[data-sms-presentation="simple"] .sms-app-rail-card__eyebrow,
html[data-sms-presentation="simple"] .sms-app-context-card__eyebrow,
html[data-sms-presentation="simple"] .sms-app-view-heading > div > span,
html[data-sms-presentation="simple"] .sms-app-section-heading > div > span {
    letter-spacing: .035em !important;
    text-transform: none !important;
}

/* Generic content cards: flat, nearly square and without lift animations. */
html[data-sms-presentation="simple"] :is(
    .sms-profile-card,
    .sms-profile-stream,
    .sms-profile-settings,
    .sms-profile-state,
    .sms-profile-settings__panel,
    .sms-profile-privacy-panel,
    .sms-profile-account-panel,
    .sms-activity-card,
    .sms-composer,
    .sms-group-card,
    .sms-group-panel,
    .sms-group-manage-card,
    .sms-page-card,
    .sms-page-panel,
    .sms-page-workspace-card,
    .sms-network-card,
    .sms-person-card,
    .sms-event-card,
    .sms-event-info,
    .sms-marketplace-card,
    .sms-classified-card,
    .sms-classified-category-card,
    .sms-feed-shortcut-card,
    .sms-blog-news-card,
    .sms-learn-course-card,
    .sms-learn-progress-card,
    .sms-learn-placement-card,
    .sms-app-hero,
    .sms-app-contract,
    .sms-app-reserved
) {
    border-radius: var(--sms-simple-card-radius) !important;
    box-shadow: none !important;
    transform: none !important;
}
html[data-sms-presentation="simple"] :is(
    .sms-group-card,
    .sms-page-card,
    .sms-network-card,
    .sms-person-card,
    .sms-event-card,
    .sms-marketplace-card,
    .sms-classified-card,
    .sms-classified-category-card,
    .sms-feed-shortcut-card,
    .sms-blog-news-card,
    .sms-learn-course-card
):hover {
    transform: none !important;
    box-shadow: none !important;
}
html[data-sms-presentation="simple"] .sms-app-hero { padding: 17px !important; }
html[data-sms-presentation="simple"] .sms-app-hero::after { display: none !important; }
html[data-sms-presentation="simple"] .sms-app-hero__icon { inline-size: 36px !important; block-size: 36px !important; margin-block-end: 12px !important; border-radius: 4px !important; }
html[data-sms-presentation="simple"] .sms-app-hero h2 { font-size: clamp(22px, 3vw, 30px) !important; }
html[data-sms-presentation="simple"] .sms-app-contract,
html[data-sms-presentation="simple"] .sms-app-reserved { margin-block-start: 8px !important; padding: 14px !important; }
html[data-sms-presentation="simple"] .sms-app-contract__grid { gap: 6px !important; }
html[data-sms-presentation="simple"] .sms-app-contract__grid article { padding: 10px !important; border-radius: 3px !important; }

/* Feed: posts become conventional flat rows rather than floating cards. */
html[data-sms-presentation="simple"] .sms-activity-stream { gap: 5px !important; }
html[data-sms-presentation="simple"] .sms-activity-card {
    border-color: var(--sms-border-strong) !important;
    background: var(--sms-surface) !important;
}
html[data-sms-presentation="simple"] .sms-activity-card__header {
    padding: 9px 11px !important;
    gap: 8px !important;
}
html[data-sms-presentation="simple"] .sms-activity-card__avatar {
    inline-size: 34px !important;
    block-size: 34px !important;
}
html[data-sms-presentation="simple"] .sms-activity-card__body { padding: 0 11px 9px !important; }
html[data-sms-presentation="simple"] .sms-activity-card__footer { padding: 6px 11px !important; }
html[data-sms-presentation="simple"] .sms-activity-card__header .sms-activity-more-trigger {
    min-inline-size: 30px !important;
    min-block-size: 30px !important;
    border-radius: 3px !important;
}
html[data-sms-presentation="simple"] .sms-activity-card__header .sms-activity-more-menu {
    border-radius: 4px !important;
    box-shadow: 0 4px 14px rgba(15,20,35,.12) !important;
}
html[data-sms-presentation="simple"] .sms-activity-card__header .sms-activity-more-menu button { border-radius: 2px !important; }
html[data-sms-presentation="simple"] .sms-social-actions,
html[data-sms-presentation="simple"] .sms-activity-actions { gap: 2px !important; }
html[data-sms-presentation="simple"] :is(.sms-reaction-trigger,.sms-comment-trigger,.sms-share-trigger,.sms-save-trigger) {
    border-radius: 3px !important;
    box-shadow: none !important;
}

/* Composer: intentionally smaller and closer to a classic status form. */
html[data-sms-presentation="simple"] .sms-composer { margin-block-end: 6px !important; }
html[data-sms-presentation="simple"] .sms-composer__header {
    padding: 8px 10px !important;
    gap: 8px !important;
}
html[data-sms-presentation="simple"] .sms-composer__avatar { inline-size: 34px !important; block-size: 34px !important; }
html[data-sms-presentation="simple"] .sms-composer__modes { padding: 7px 10px 0 !important; gap: 4px !important; }
html[data-sms-presentation="simple"] .sms-composer__modes button {
    padding: 5px 9px !important;
    border-radius: 3px !important;
    background: var(--sms-surface) !important;
    font-size: .74rem !important;
}
html[data-sms-presentation="simple"] .sms-composer form { padding: 6px 10px 9px !important; }
html[data-sms-presentation="simple"] .sms-composer__text textarea {
    min-block-size: 72px !important;
    padding: 6px 1px 18px !important;
    font-size: .94rem !important;
    line-height: 1.45 !important;
}
html[data-sms-presentation="simple"] .sms-composer__picker { border-radius: 3px !important; padding: 10px !important; }
html[data-sms-presentation="simple"] .sms-composer-preview { border-radius: 3px !important; }
html[data-sms-presentation="simple"] .sms-composer-preview__image { border-radius: 2px !important; }
html[data-sms-presentation="simple"] .sms-composer__footer { padding-block-start: 8px !important; gap: 8px !important; }
html[data-sms-presentation="simple"] .sms-composer__footer select,
html[data-sms-presentation="simple"] .sms-composer__reset,
html[data-sms-presentation="simple"] .sms-composer__publish,
html[data-sms-presentation="simple"] .sms-composer__cancel {
    border-radius: 3px !important;
    padding-block: 7px !important;
}

/* Profile and directory surfaces. */
html[data-sms-presentation="simple"] .sms-profile-button,
html[data-sms-presentation="simple"] .sms-profile-settings__nav button,
html[data-sms-presentation="simple"] .sms-profile-form button,
html[data-sms-presentation="simple"] .sms-public-profile__actions button,
html[data-sms-presentation="simple"] .sms-public-profile__actions a {
    border-radius: 3px !important;
    box-shadow: none !important;
}
html[data-sms-presentation="simple"] .sms-public-profile__identity { gap: 9px !important; }
html[data-sms-presentation="simple"] .sms-network-card { padding: 9px !important; }
html[data-sms-presentation="simple"] .sms-network-card__avatar { inline-size: 42px !important; block-size: 42px !important; }
html[data-sms-presentation="simple"] .sms-group-card__cover { min-height: 92px !important; }
html[data-sms-presentation="simple"] .sms-group-card__body { padding: 9px 10px !important; }
html[data-sms-presentation="simple"] .sms-event-card__copy,
html[data-sms-presentation="simple"] .sms-blog-news-card__body,
html[data-sms-presentation="simple"] .sms-marketplace-card__body { padding: 9px 10px !important; }

/* Forms, panels and dialogs: less visual chrome. */
html[data-sms-presentation="simple"] :is(input,textarea,select):not([type="checkbox"]):not([type="radio"]),
html[data-sms-presentation="simple"] :is(
    .sms-event-create-panel__card,
    .sms-marketplace-create-panel__card,
    .sms-event-create-dialog,
    .sms-marketplace-create-dialog,
    .sms-page-create-dialog,
    .sms-group-create-modal,
    .sms-profile-gallery__modal,
    .sms-activity-report-modal
) {
    border-radius: 4px !important;
}
html[data-sms-presentation="simple"] :is(
    .sms-event-create-panel__card,
    .sms-marketplace-create-panel__card,
    .sms-event-create-dialog,
    .sms-marketplace-create-dialog,
    .sms-page-create-dialog,
    .sms-group-create-modal,
    .sms-profile-gallery__modal,
    .sms-activity-report-modal
) {
    box-shadow: 0 8px 28px rgba(15,20,35,.14) !important;
}

/* Presentation selector itself. */
.sms-ui-presentation-card__options,
.sms-ui-presentation-choice {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.sms-ui-presentation-card__options button,
.sms-ui-presentation-choice button {
    display: grid;
    gap: 3px;
    text-align: left;
    border: 1px solid var(--sms-border);
    border-radius: 10px;
    background: var(--sms-surface);
    color: var(--sms-text);
    padding: 10px 11px;
    cursor: pointer;
}
.sms-ui-presentation-card__options button strong,
.sms-ui-presentation-choice button strong { font-size: .84rem; }
.sms-ui-presentation-card__options button small,
.sms-ui-presentation-choice button small { color: var(--sms-muted); font-size: .72rem; line-height: 1.35; }
.sms-ui-presentation-card__options button.is-active,
.sms-ui-presentation-choice button.is-active {
    border-color: color-mix(in srgb, var(--sms-primary) 55%, var(--sms-border));
    background: var(--sms-primary-soft);
}
.sms-ui-presentation-status { display: block; margin-top: 8px; color: var(--sms-muted); font-size: .72rem; }
html[data-sms-presentation="simple"] :is(.sms-ui-presentation-card__options button,.sms-ui-presentation-choice button) {
    border-radius: 3px !important;
    padding: 7px 8px !important;
}

/* Mobile Simple is intentionally edge-to-edge, like a classic social feed. */
@media (max-width: 767px) {
    html[data-sms-presentation="simple"] .sms-app-root { --sms-topbar-height: 54px; }
    html[data-sms-presentation="simple"] .sms-app-topbar__inner { padding-inline: max(8px, var(--sms-safe-left)) max(8px, var(--sms-safe-right)) !important; gap: 7px !important; }
    html[data-sms-presentation="simple"] .sms-app-brand__mark { inline-size: 32px !important; block-size: 32px !important; }
    html[data-sms-presentation="simple"] .sms-app-action { inline-size: 32px !important; block-size: 32px !important; }
    html[data-sms-presentation="simple"] .sms-app-centre__stream {
        padding-inline: 0 !important;
        padding-block-start: 6px !important;
    }
    html[data-sms-presentation="simple"] .sms-app-view-heading { padding-inline: 10px !important; margin-block-end: 5px !important; }
    html[data-sms-presentation="simple"] .sms-activity-stream { gap: 4px !important; }
    html[data-sms-presentation="simple"] :is(.sms-activity-card,.sms-composer,.sms-profile-card,.sms-profile-stream) {
        border-inline: 0 !important;
        border-radius: 0 !important;
    }
    html[data-sms-presentation="simple"] .sms-composer { margin-block-end: 4px !important; }
    html[data-sms-presentation="simple"] .sms-activity-card__header { padding: 8px 10px !important; }
    html[data-sms-presentation="simple"] .sms-activity-card__body { padding: 0 10px 8px !important; }
    html[data-sms-presentation="simple"] .sms-activity-card__footer { padding: 5px 10px !important; }
    html[data-sms-presentation="simple"] .sms-mobile-bottom-nav {
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-radius: 0 !important;
    }
    html[data-sms-presentation="simple"] .sms-mobile-bottom-nav__item { border-radius: 3px !important; }
}