/* ==========================================================================
   myagents admin theme — light only
   Visual layer only. No behaviour, routing or logic is affected here.

   Filament 5 ships its own styles inside CSS cascade layers, so these
   unlayered rules apply without !important. Colours, borders, corners and
   shadows come from the tokens below; components refer to tokens, never to
   one-off values, so a change here restyles every screen consistently.
   ========================================================================== */

:root {
    color-scheme: light;

    /* Page: near-white with a faint blue wash pinned to the window. */
    --ma-page-bg: #fdfefe;
    --ma-page-wash:
        radial-gradient(ellipse 55rem 34rem at 82% 18%, rgb(37 99 235 / .048), transparent 70%),
        radial-gradient(ellipse 45rem 30rem at 8% 95%, rgb(56 160 245 / .042), transparent 70%);

    /* Surfaces: card (white), muted tile/column/header, hover/selected. */
    --ma-surface: #ffffff;
    --ma-surface-muted: #f9fbfe;
    --ma-surface-hover: #eef5fd;
    --ma-overlay: rgb(23 43 71 / .28);

    --ma-border: #e1e9f2;
    --ma-border-strong: #c9d6e4;

    --ma-text: #172b47;
    --ma-text-secondary: #526078;
    --ma-text-muted: #5a6f88;

    --ma-accent: #2563eb;
    --ma-accent-hover: #1d4ed8;
    --ma-accent-ink: #1f5f9e;
    --ma-accent-soft: #eef5fd;
    --ma-accent-line: #d6e6f6;
    --ma-focus: rgb(37 99 235 / .28);

    /* Status pairs: colour only ever appears in small badges and status text. */
    --ma-success: #22a06b;
    --ma-success-ink: #20683a;
    --ma-success-soft: #edf7f0;
    --ma-success-line: #cfe6d7;
    --ma-warning: #d99a06;
    --ma-warning-ink: #765a0b;
    --ma-warning-soft: #fdf8e6;
    --ma-warning-line: #efe3b8;
    --ma-danger: #d14343;
    --ma-danger-ink: #9c3d1d;
    --ma-danger-soft: #fcf1eb;
    --ma-danger-line: #f0d8ca;
    --ma-info-ink: #5b4a8f;
    --ma-info-soft: #f4f1fc;
    --ma-info-line: #e2dbf6;
    --ma-neutral-ink: #526078;
    --ma-neutral-soft: #eef1f6;

    /* Shape and elevation. Nested boxes use --ma-shadow-none so shadows never stack. */
    --ma-radius: 14px;
    --ma-radius-control: 10px;
    --ma-radius-sm: 8px;
    --ma-shadow-card: 0 1px 2px rgb(16 42 79 / .05), 0 6px 18px rgb(16 42 79 / .05);
    --ma-shadow-raised: 0 2px 4px rgb(16 42 79 / .06), 0 10px 24px rgb(16 42 79 / .08);
    --ma-shadow-overlay: 0 2px 6px rgb(16 42 79 / .06), 0 16px 36px rgb(16 42 79 / .14);
    --ma-shadow-none: none;

    --ma-row: 2.5rem;
    --ma-speed: 120ms;
}

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */

/* The one page-background definition. */
.fi-body {
    background: var(--ma-page-wash), var(--ma-page-bg);
    background-attachment: fixed;
    color: var(--ma-text);
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    -webkit-font-smoothing: antialiased;
}

.fi-sidebar,
.fi-sidebar-header {
    background-color: var(--ma-surface-muted);
    border-right: 1px solid var(--ma-border);
    box-shadow: none;
}

.fi-sidebar-header {
    border-right: 0;
    border-bottom: 1px solid var(--ma-border);
    height: 3.25rem;
}

/* Top bar: the aiworkers.au header strip. */
.fi-topbar,
.fi-topbar > nav {
    background:
        radial-gradient(ellipse 36rem 10rem at 6% 50%, rgb(37 99 235 / .16), transparent 70%),
        radial-gradient(ellipse 22rem 9rem at 80% 50%, rgb(255 214 90 / .18), transparent 70%),
        linear-gradient(90deg, #e6f0fc, #f6f9fe 45%, #fff);
    border-bottom: 1px solid var(--ma-border);
    box-shadow: none;
}

.fi-topbar > nav {
    min-height: 3.25rem;
}

.fi-logo {
    color: var(--ma-text);
}

.ma-sidebar-workspace {
    position: relative;
    display: block;
    width: 100%;
    flex: none;
    border: 1px solid var(--ma-border-strong);
    border-radius: 11px;
    background: var(--ma-surface);
    padding: 0.45rem 0.7rem 0.5rem;
    cursor: pointer;
}

.ma-sidebar-workspace-label {
    display: block;
    color: var(--ma-text-muted);
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1.1;
    text-transform: uppercase;
}

.ma-sidebar-workspace-control {
    position: relative;
    display: block;
    margin-top: 0.15rem;
    border-radius: var(--ma-radius-control);
}

.ma-sidebar-workspace select {
    display: block;
    width: 100%;
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--ma-text);
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 750;
    line-height: 1.45;
    outline: 0;
    padding: 0 1.35rem 0 0;
}

.ma-sidebar-workspace-chevron {
    position: absolute;
    right: 0;
    top: 50%;
    width: 0.9rem;
    height: 0.9rem;
    color: var(--ma-text-secondary);
    pointer-events: none;
    transform: translateY(-50%);
}

.ma-sidebar-workspace:focus-within {
    border-color: var(--ma-accent);
    box-shadow: 0 0 0 3px var(--ma-focus);
}

.ma-sidebar-workspace strong {
    display: block;
    margin-top: 0.2rem;
    color: var(--ma-text-secondary);
    font-size: 0.75rem;
}

.ma-impersonation {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.ma-impersonation label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--ma-text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ma-impersonation select,
.ma-impersonation button {
    border: 1px solid var(--ma-border-strong);
    border-radius: 12px;
    background: var(--ma-surface);
    color: var(--ma-text);
    font-weight: 700;
    box-shadow: var(--ma-shadow-card);
}

.ma-impersonation select {
    max-width: 15rem;
    padding: 0.42rem 1.8rem 0.42rem 0.65rem;
    font-size: 0.75rem;
    letter-spacing: normal;
    text-transform: none;
}

.ma-impersonation button {
    padding: 0.32rem 0.55rem;
    font-size: 0.68rem;
    font-weight: 800;
}

.ma-impersonation button:hover {
    border-color: var(--ma-warning-line);
    background: var(--ma-warning-soft);
}

.ma-impersonation.is-active {
    border: 1px solid var(--ma-warning-line);
    border-radius: 9px;
    background: var(--ma-warning-soft);
    padding: 0.35rem 0.5rem;
}

.ma-impersonation-warning {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--ma-warning-ink);
    font-size: 0.72rem;
}

.ma-impersonation-warning svg {
    width: 1rem;
    height: 1rem;
}

@media (max-width: 700px) {
    .ma-impersonation,
    .ma-impersonation label,
    .ma-impersonation-warning {
        min-width: 0;
    }

    .ma-impersonation select {
        max-width: 8rem;
    }

    .ma-impersonation-warning strong {
        display: inline-block;
        max-width: 5.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: bottom;
        white-space: nowrap;
    }

    .ma-impersonation button {
        font-size: 0;
        white-space: nowrap;
    }

    /* Short labels on narrow screens; the full text stays in the DOM for screen readers. */
    .ma-impersonation button::after {
        content: 'Switch';
        font-size: 0.68rem;
    }

    .ma-impersonation.is-active button::after {
        content: 'Return';
    }
}

/* Group labels read as structure, not content. */
.fi-sidebar-group-label {
    color: var(--ma-text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.fi-sidebar-item-btn {
    border-radius: var(--ma-radius-control);
    padding-block: 0.4rem;
    gap: 0.625rem;
    transition: background-color var(--ma-speed) ease, color var(--ma-speed) ease;
}

.fi-sidebar-item-btn:hover {
    background-color: var(--ma-surface-hover);
}

/* Active item: tinted surface plus an outline, never colour alone. */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: var(--ma-accent-soft);
    box-shadow: inset 0 0 0 1px var(--ma-accent-line);
    color: var(--ma-accent-ink);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn :is(.fi-sidebar-item-label, .fi-sidebar-item-icon) {
    color: var(--ma-accent-ink);
}

.fi-sidebar-item-icon {
    width: 1.05rem;
    height: 1.05rem;
}

/* Grouped items read as a clean list without tree connector lines. */
.fi-sidebar-item-grouped-border {
    display: none;
}

/* --------------------------------------------------------------------------
   Panels, cards, sections
   -------------------------------------------------------------------------- */

.fi-section,
.fi-wi-stats-overview-stat,
.fi-ta-ctn {
    background-color: var(--ma-surface);
    border: 1px solid var(--ma-border);
    border-radius: var(--ma-radius);
    box-shadow: var(--ma-shadow-card);
    color: var(--ma-text);
    --tw-ring-shadow: 0 0 #0000;
}

/* Boxes nested inside a card do not add a second shadow. */
:is(.fi-section, .fi-ta-ctn, .fi-modal-window, .ma-webbuilder-card, .ma-dash-panel, .ma-setting-card, .ma-social-table-wrap) :is(.fi-section, .fi-ta-ctn) {
    box-shadow: var(--ma-shadow-none);
}

.fi-section-header {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--ma-border);
}

.fi-section-content {
    padding: 1rem;
}

.fi-section-header-heading {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.fi-section-header-description {
    color: var(--ma-text-muted);
    font-size: 0.8125rem;
}

/* --------------------------------------------------------------------------
   Stat tiles: the value is the loud element, everything else recedes
   -------------------------------------------------------------------------- */

.fi-wi-stats-overview-stat {
    padding: 0.9rem 1rem;
    transition: box-shadow var(--ma-speed) ease, border-color var(--ma-speed) ease;
}

.fi-wi-stats-overview-stat:hover {
    border-color: var(--ma-border-strong);
    box-shadow: var(--ma-shadow-raised);
}

.fi-wi-stats-overview-stat-label {
    color: var(--ma-text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.fi-wi-stats-overview-stat-value {
    font-size: 1.625rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

.fi-wi-stats-overview-stat-description {
    font-size: 0.75rem;
    color: var(--ma-text-muted);
}

/* --------------------------------------------------------------------------
   Tables: light header, quiet separators, built to scan
   -------------------------------------------------------------------------- */

.fi-ta-table thead tr {
    background: var(--ma-surface-muted);
    border-bottom: 1px solid var(--ma-border);
}

.fi-ta-header-cell {
    background-color: var(--ma-surface-muted);
    color: var(--ma-text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding-block: 0.5rem;
}

.fi-ta-row {
    border-bottom: 1px solid var(--ma-border);
    transition: background-color var(--ma-speed) ease;
}

.fi-ta-row:hover {
    background-color: var(--ma-surface-muted);
}

.fi-ta-row:last-child {
    border-bottom: 0;
}

.fi-ta-cell {
    padding-block: 0.4rem;
}

.fi-ta-text-item {
    font-size: 0.8125rem;
}

/* Numbers and dates line up when they share a width. */
.fi-ta-cell [class*="tabular"],
.fi-ta-cell time {
    font-variant-numeric: tabular-nums;
}

.fi-ta-header-toolbar {
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--ma-border);
}

.fi-ta-empty-state {
    padding-block: 2.5rem;
}

.fi-ta-empty-state-heading {
    font-size: 0.9375rem;
}

.fi-ta-empty-state-description {
    color: var(--ma-text-muted);
}

/* --------------------------------------------------------------------------
   Badges: the status language. Colour is paired with text, never alone.
   -------------------------------------------------------------------------- */

.fi-badge {
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding-inline: 0.5rem;
    padding-block: 0.1rem;
    box-shadow: none;
    background: var(--ma-accent-soft);
    color: var(--ma-accent-ink);
    border: 1px solid var(--ma-accent-line);
}

.fi-badge.fi-color-success { background: var(--ma-success-soft); color: var(--ma-success-ink); border-color: var(--ma-success-line); }
.fi-badge.fi-color-warning { background: var(--ma-warning-soft); color: var(--ma-warning-ink); border-color: var(--ma-warning-line); }
.fi-badge.fi-color-danger { background: var(--ma-danger-soft); color: var(--ma-danger-ink); border-color: var(--ma-danger-line); }

.fi-badge :is(.fi-badge-label, .fi-icon) {
    color: inherit;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.fi-input-wrp {
    background-color: var(--ma-surface);
    border-radius: var(--ma-radius-control);
    box-shadow: none;
    border: 1px solid var(--ma-border-strong);
    transition: border-color var(--ma-speed) ease, box-shadow var(--ma-speed) ease;
    --tw-ring-shadow: 0 0 #0000;
}

.fi-input-wrp:hover {
    border-color: var(--ma-text-muted);
}

.fi-input-wrp:focus-within {
    border-color: var(--ma-accent);
    box-shadow: 0 0 0 3px var(--ma-focus);
}

.fi-input-wrp.fi-invalid {
    border-color: var(--ma-danger);
}

.fi-input-wrp.fi-disabled {
    background-color: var(--ma-surface-muted);
}

.fi-fo-field-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ma-text-secondary);
}

.fi-fo-field-wrp-error-message {
    font-size: 0.75rem;
}

.fi-fo-repeater-item {
    background-color: var(--ma-surface-muted);
    border: 1px solid var(--ma-border);
    border-radius: var(--ma-radius-sm);
}

.fi-main :is(input:not([type=checkbox]):not([type=radio]), select, textarea, .fi-select-input) {
    border-radius: var(--ma-radius-control);
}

/* Custom (non-Filament) form controls share the same surface. */
.fi-body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), textarea, select) {
    background-color: var(--ma-surface);
    border-color: var(--ma-border-strong);
    color: var(--ma-text);
}

.fi-input-wrp :is(input, textarea, select) {
    background-color: transparent;
}

.fi-body input[type="radio"] {
    appearance: auto;
    width: 1.1rem;
    height: 1.1rem;
    min-height: 0;
    padding: 0;
    border-radius: 50%;
    accent-color: var(--ma-accent);
}

/* --------------------------------------------------------------------------
   Buttons, dropdowns, modals, notifications
   -------------------------------------------------------------------------- */

.fi-btn {
    border-radius: var(--ma-radius-control);
    font-weight: 500;
    box-shadow: none;
    transition: background-color var(--ma-speed) ease, border-color var(--ma-speed) ease;
}

/* One primary and one secondary button style across the admin. */
.fi-btn.fi-color-primary {
    background: var(--ma-accent);
    border: 1px solid var(--ma-accent);
    color: #fff;
}

.fi-btn.fi-color-primary:hover {
    background: var(--ma-accent-hover);
}

.fi-btn.fi-color-gray {
    background: var(--ma-surface);
    border: 1px solid var(--ma-border-strong);
    color: var(--ma-accent-hover);
}

.fi-btn.fi-color-gray:hover {
    background: var(--ma-surface-hover);
}

.fi-btn :is(.fi-icon, span) {
    color: inherit;
}

.fi-btn:disabled,
.fi-btn.fi-disabled {
    opacity: .55;
    cursor: not-allowed;
}

.fi-dropdown-panel,
.fi-modal-window {
    background-color: var(--ma-surface);
    border: 1px solid var(--ma-border);
    border-radius: var(--ma-radius);
    box-shadow: var(--ma-shadow-overlay);
    color: var(--ma-text);
    --tw-ring-shadow: 0 0 #0000;
}

.fi-modal-close-overlay {
    background: var(--ma-overlay);
}

.fi-dropdown-list-item:hover,
.fi-dropdown-list-item:focus-visible {
    background-color: var(--ma-surface-hover);
}

.fi-dropdown-list-item.fi-selected {
    background-color: var(--ma-accent-soft);
    color: var(--ma-accent-ink);
}

.fi-no-notification {
    background-color: var(--ma-surface);
    border: 1px solid var(--ma-border);
    border-radius: var(--ma-radius);
    box-shadow: var(--ma-shadow-overlay);
}

.fi-no {
    inset-block-start: auto;
    inset-block-end: 1rem;
}

/* --------------------------------------------------------------------------
   Typography and headings
   -------------------------------------------------------------------------- */

.fi-header-heading {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ma-text);
}

.fi-header-subheading {
    color: var(--ma-text-muted);
    font-size: 0.8125rem;
}

.fi-breadcrumbs-item-label {
    font-size: 0.75rem;
    color: var(--ma-text-muted);
}

/* --------------------------------------------------------------------------
   Focus, scrollbars, motion
   -------------------------------------------------------------------------- */

.fi-body :focus-visible {
    outline: 2px solid var(--ma-accent);
    outline-offset: 2px;
}

.ma-button:focus-visible,
.ma-tab:focus-visible,
.fi-sidebar a:focus-visible,
.fi-topbar a:focus-visible,
.fi-topbar button:focus-visible {
    outline: 3px solid var(--ma-accent);
    outline-offset: 3px;
}

.ma-skip-link {
    position: fixed;
    z-index: 100;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.6rem 0.9rem;
    border-radius: 0.5rem;
    background: var(--ma-accent);
    color: #fff;
    font-weight: 800;
    transform: translateY(-200%);
}

.ma-skip-link:focus { transform: translateY(0); }

.fi-body ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.fi-body ::-webkit-scrollbar-track {
    background: var(--ma-surface-muted);
}

.fi-body ::-webkit-scrollbar-thumb {
    background: var(--ma-border-strong);
    border-radius: 6px;
    border: 2px solid var(--ma-surface-muted);
}

@media (prefers-reduced-motion: reduce) {
    .fi-body *,
    .fi-body *::before,
    .fi-body *::after {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
        transition-duration: 0.01ms;
    }
}

/* ==========================================================================
   Tasks & Schedules — v5 dense workspace board
   ========================================================================== */

.ma-task-board {
    --ma-cyan: var(--ma-accent);
    --ma-green: var(--ma-success);
    --ma-warn: var(--ma-warning-ink);
    display: grid;
    gap: 0.75rem;
}

.ma-task-board [x-cloak] {
    display: none !important;
}

.ma-workspace-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 4.5rem;
    padding: 0.85rem 1rem;
}

.ma-workspace-bar strong,
.ma-eyebrow {
    display: block;
}

.ma-eyebrow {
    margin-bottom: 0.15rem;
    color: var(--ma-cyan);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.ma-workspace-select,
.ma-inline-editor input:not([type="checkbox"]),
.ma-inline-editor select,
.ma-inline-editor textarea {
    width: 100%;
    border: 1px solid var(--ma-border);
    border-radius: 9px;
    background: var(--ma-surface);
    color: var(--ma-text);
    padding: 0.55rem 0.65rem;
}

.ma-workspace-select {
    width: min(20rem, 42vw);
    /* Neutralize the native/panel-default arrow so our single custom chevron
       is the only one rendered — without this, the browser's native select
       arrow and Filament's own decorative arrow can both paint, stacking. */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238e8e97' stroke-width='1.6'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.65rem center;
    background-size: 1rem;
    padding-right: 2.1rem;
}

.ma-workspace-select:focus,
.ma-inline-editor input:focus,
.ma-inline-editor select:focus,
.ma-inline-editor textarea:focus {
    border-color: var(--ma-cyan);
    outline: 3px solid var(--ma-focus);
}

.ma-task-section {
    overflow: hidden;
}

.ma-section-head {
    display: flex;
    width: 100%;
    min-height: 2.9rem;
    align-items: center;
    gap: 0.55rem;
    border: 0;
    background: var(--ma-surface);
    color: var(--ma-text);
    padding: 0.65rem 0.8rem;
    text-align: left;
    cursor: pointer;
}

.ma-section-head:hover {
    background: var(--ma-surface-hover);
}

.ma-section-head.is-drop-target {
    box-shadow: inset 0 0 0 1px var(--ma-accent-line);
}

.ma-section-arrow {
    color: var(--ma-text-muted);
    transform: rotate(0deg);
    transition: transform var(--ma-speed) ease;
}

.ma-section-arrow.is-collapsed {
    transform: rotate(-90deg);
}

.ma-section-label {
    border-radius: 999px;
    background: var(--ma-accent-soft);
    color: var(--ma-accent-ink);
    padding: 0.15rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
}

.ma-section-label.is-info { background: var(--ma-info-soft); color: var(--ma-info-ink); }
.ma-section-label.is-neutral { background: var(--ma-neutral-soft); color: var(--ma-text-secondary); }
.ma-section-label.is-success { background: var(--ma-success-soft); color: var(--ma-success-ink); }
.ma-section-label.is-danger { background: var(--ma-danger-soft); color: var(--ma-danger-ink); }

.ma-section-count {
    margin-left: auto;
    color: var(--ma-text-muted);
    font-size: 0.6875rem;
}

.ma-section-body {
    overflow-x: auto;
    scrollbar-gutter: stable;
}

.ma-task-columns,
.ma-task-row {
    display: grid;
    grid-template-columns: 1.2rem 1.5rem minmax(13rem, 1fr) 5.3rem 6.2rem max-content;
    min-width: 48rem;
    align-items: center;
    column-gap: 0.55rem;
}

.ma-task-columns > :nth-child(4), .ma-task-row > :nth-child(4),
.ma-task-columns > :nth-child(5), .ma-task-row > :nth-child(5),
.ma-task-columns > :nth-child(8), .ma-task-row > :nth-child(8),
.ma-task-columns > :nth-child(9), .ma-task-row > :nth-child(9),
.ma-task-columns > :nth-child(10), .ma-task-row > :nth-child(10) { display: none; }

.ma-task-columns > :last-child,
.ma-task-row > .ma-row-actions {
    flex-wrap: nowrap;
    justify-content: flex-end;
    position: sticky;
    right: 0;
    z-index: 2;
    background: var(--ma-surface);
}

/* An open row menu sits above the sticky action cells of the rows below it. */
.ma-task-row > .ma-row-actions:has(.ma-action-menu[open]) {
    z-index: 6;
}

.ma-task-item.is-deep-linked { box-shadow: inset 3px 0 var(--ma-cyan), 0 0 0 1px var(--ma-accent-line); }

.ma-task-columns {
    min-height: 2rem;
    padding: 0 0.75rem;
    border-bottom: 1px solid var(--ma-border);
    background: var(--ma-surface-muted);
    color: var(--ma-text-muted);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ma-task-item {
    border-bottom: 1px solid var(--ma-border);
    transition: background-color var(--ma-speed) ease, box-shadow var(--ma-speed) ease;
}

.ma-task-item:last-child {
    border-bottom: 0;
}

.ma-task-row {
    min-height: 2.85rem;
    padding: 0.35rem 0.75rem;
    background: var(--ma-surface);
    transition: background-color var(--ma-speed) ease;
}

.ma-task-row:hover {
    background: var(--ma-surface-hover);
}

.ma-task-item.is-nest-target {
    box-shadow: inset 3px 0 0 var(--ma-accent-line);
}

.ma-task-item.is-nest-target:hover {
    box-shadow: inset 3px 0 0 var(--ma-cyan), inset 0 0 0 1px var(--ma-accent-line);
}

.ma-task-drop-line {
    height: 0.65rem;
    margin: -0.325rem 0;
    position: relative;
    z-index: 2;
}

.ma-task-drop-line::after {
    content: "";
    position: absolute;
    inset: calc(50% - 1px) 0.75rem auto;
    height: 2px;
    border-radius: 999px;
    background: transparent;
}

.ma-task-drop-line:hover::after {
    background: var(--ma-surface);
}

.ma-task-drop-line.is-end {
    margin-bottom: 0;
}

.ma-task-item.is-subtask .ma-task-title {
    padding-left: 1.5rem;
    position: relative;
}

.ma-task-item.is-subtask .ma-task-title::before {
    content: "↳";
    position: absolute;
    left: 0.35rem;
    color: var(--ma-text-muted);
}

.ma-drag {
    color: var(--ma-text-muted);
    cursor: grab;
    user-select: none;
}

.ma-drag:active {
    color: var(--ma-cyan);
    cursor: grabbing;
}

.ma-check {
    display: grid;
    width: 1.1rem;
    height: 1.1rem;
    place-items: center;
    border: 1px solid var(--ma-border-strong);
    border-radius: 4px;
    background: var(--ma-surface);
    color: #07130e;
    font-size: 0.7rem;
    cursor: pointer;
}

.ma-check.is-checked {
    border-color: var(--ma-green);
    background: var(--ma-green);
}

.ma-task-title {
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--ma-text);
    font-size: 0.8125rem;
    font-weight: 600;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.ma-task-title:hover {
    color: var(--ma-cyan);
}
.ma-task-title strong, .ma-task-title small { display: block; overflow: hidden; text-overflow: ellipsis; }
.ma-task-title small { margin-top: 0.15rem; color: var(--ma-text-muted); font-size: 0.64rem; font-weight: 400; }

.ma-source,
.ma-type,
.ma-due,
.ma-next,
.ma-empty {
    color: var(--ma-text-muted);
    font-size: 0.6875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ma-next.is-yes { color: var(--ma-warn); }

.ma-tags {
    display: flex;
    min-width: 0;
    gap: 0.25rem;
    overflow: hidden;
}

.ma-tag,
.ma-badge {
    display: inline-block;
    max-width: 100%;
    border-radius: 5px;
    padding: 0.12rem 0.38rem;
    font-size: 0.625rem;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: lowercase;
    white-space: nowrap;
}

.ma-tag { background: var(--ma-accent-soft); color: var(--ma-accent-ink); }
.ma-badge { background: var(--ma-warning-soft); color: var(--ma-warning-ink); }
.ma-badge.is-priority-high,
.ma-badge.is-priority-urgent { background: var(--ma-danger-soft); color: var(--ma-danger-ink); }
.ma-badge.is-priority-low { background: var(--ma-neutral-soft); color: var(--ma-text-secondary); }
.ma-badge.is-status { background: var(--ma-info-soft); color: var(--ma-info-ink); text-transform: none; }
.ma-badge.is-status.is-idea,
.ma-badge.is-status.is-needs_edit,
.ma-badge.is-status.is-ready_for_approval { background: var(--ma-warning-soft); color: var(--ma-warning-ink); }
.ma-badge.is-status.is-ai_draft_needed,
.ma-badge.is-status.is-image_needed { background: var(--ma-accent-soft); color: var(--ma-accent-ink); }
.ma-badge.is-status.is-draft_ready { background: var(--ma-info-soft); color: var(--ma-info-ink); }
.ma-badge.is-status.is-approved,
.ma-badge.is-status.is-ready_for_rss,
.ma-badge.is-status.is-sent_to_rss,
.ma-badge.is-status.is-published { background: var(--ma-success-soft); color: var(--ma-success-ink); }
.ma-badge.is-status.is-rejected { background: var(--ma-danger-soft); color: var(--ma-danger-ink); }
.ma-badge.is-status.is-active { background: var(--ma-success-soft); color: var(--ma-success-ink); }
.ma-badge.is-status.is-paused { background: var(--ma-warning-soft); color: var(--ma-warning-ink); }
.ma-badge.is-status.is-archived { background: var(--ma-neutral-soft); color: var(--ma-text-secondary); }
.ma-badge.is-status.is-ok,
.ma-badge.is-status.is-scheduled { background: var(--ma-success-soft); color: var(--ma-success-ink); }
.ma-badge.is-status.is-running,
.ma-badge.is-status.is-open { background: var(--ma-accent-soft); color: var(--ma-accent-ink); }
.ma-badge.is-status.is-pending { background: var(--ma-warning-soft); color: var(--ma-warning-ink); }
.ma-badge.is-status.is-failed,
.ma-badge.is-status.is-cancelled { background: var(--ma-danger-soft); color: var(--ma-danger-ink); }

.ma-webbuilder-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.ma-webbuilder-hero { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.9rem 1rem; }
.ma-webbuilder-hero > div { display: grid; gap: 0.15rem; }
.ma-webbuilder-hero strong { color: var(--ma-text); font-size: 1rem; }
.ma-webbuilder-hero > div > span:last-child { color: var(--ma-text-muted); font-size: 0.7rem; }
.ma-webbuilder-nav, .ma-webbuilder-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; border-bottom: 1px solid var(--ma-border); }
.ma-tab { border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--ma-text-muted); padding: 0.55rem 0.65rem; font-size: 0.72rem; font-weight: 700; cursor: pointer; }
.ma-tab:hover, .ma-tab.is-active { border-bottom-color: var(--ma-cyan, var(--ma-accent)); color: var(--ma-text); }
.ma-webbuilder-newpage { display: flex; gap: 0.5rem; }
.ma-webbuilder-filters { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(10rem, 14rem); align-items: center; gap: 0.6rem; }
.ma-loading, .ma-webbuilder-filters > span { color: var(--ma-text-secondary); font-size: 0.72rem; }
.ma-input { width: 100%; min-height: 2.35rem; border: 1px solid var(--ma-border); border-radius: 9px; background: var(--ma-surface); color: var(--ma-text); padding: 0.45rem 0.7rem; font-size: 0.75rem; }
.ma-input::placeholder { color: var(--ma-text-muted); }
.ma-input:focus { border-color: var(--ma-accent); outline: 3px solid var(--ma-focus); }
.ma-webbuilder-pagerow { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; border-bottom: 1px solid var(--ma-border); padding: 0.65rem 0; }
.ma-webbuilder-pagemeta { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.ma-webbuilder-pagemeta strong { color: var(--ma-text); font-size: 0.82rem; }
.ma-webbuilder-pagemeta span { color: var(--ma-text-muted); font-size: 0.68rem; }
.ma-webbuilder-pageactions { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.ma-webbuilder-pageactions .ma-button { display: inline-flex; align-items: center; min-height: 2rem; padding: 0.3rem 0.6rem; font-size: 0.7rem; text-decoration: none; }
.ma-button.is-danger { border: 1px solid var(--ma-danger-line); background: var(--ma-danger-soft); color: var(--ma-danger-ink); }
.ma-confirm-overlay { position: fixed; z-index: 70; inset: 0; display: grid; place-items: center; background: var(--ma-overlay); padding: 1rem; backdrop-filter: blur(3px); }
.ma-confirm-dialog { display: grid; gap: 0.8rem; width: min(28rem, 100%); border: 1px solid var(--ma-border); border-radius: 12px; background: var(--ma-surface); padding: 1.25rem; box-shadow: var(--ma-shadow-overlay); }
.ma-confirm-dialog h2, .ma-confirm-dialog p { margin: 0; }
.ma-confirm-dialog h2 { color: var(--ma-text); font-size: 1rem; }
.ma-confirm-dialog p { color: var(--ma-text-secondary); font-size: 0.78rem; line-height: 1.55; }
.ma-confirm-dialog > div { display: flex; justify-content: flex-end; gap: 0.5rem; }
.ma-confirm-icon { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--ma-danger-line); border-radius: 999px; background: var(--ma-danger-soft); color: var(--ma-danger-ink); font-weight: 800; }
.ma-webbuilder-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.ma-webbuilder-settings label { display: grid; align-content: start; gap: 0.3rem; color: var(--ma-text-secondary); font-size: 0.7rem; font-weight: 700; }
.ma-webbuilder-settings label:nth-child(3), .ma-webbuilder-settings button { grid-column: 1 / -1; }
.ma-webbuilder-settings button { justify-self: start; }
.ma-webbuilder-settings small { color: var(--ma-text-muted); font-size: 0.63rem; font-weight: 400; }
.ma-webbuilder-settings small.is-error { color: var(--ma-danger-ink); }
.ma-webbuilder-config-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }
.ma-webbuilder-config-list > div { display: grid; gap: 0.15rem; border: 1px solid var(--ma-border); border-radius: 8px; background: var(--ma-surface); padding: 0.65rem; }
.ma-webbuilder-config-list dt { color: var(--ma-text-muted); font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.ma-webbuilder-config-list dd { margin: 0; color: var(--ma-text); font-size: 0.76rem; }
.ma-webbuilder-sites { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 0.75rem; }
.ma-webbuilder-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; padding: 0.9rem; align-content: start; }
.ma-webbuilder-card > header { display: flex; align-items: start; justify-content: space-between; gap: 0.6rem; }
.ma-webbuilder-card > header strong { display: block; color: var(--ma-text); font-size: 0.9rem; }
.ma-webbuilder-card > header span { color: var(--ma-text-muted); font-size: 0.68rem; }
.ma-webbuilder-meta { color: var(--ma-text-secondary); font-size: 0.7rem; }
.ma-webbuilder-card .ma-help { color: var(--ma-text-muted); font-size: 0.68rem; }
.ma-webbuilder-card .ma-help a { color: var(--ma-accent, var(--ma-accent)); }

.ma-row-actions button {
    border: 1px solid var(--ma-border);
    border-radius: 6px;
    background: transparent;
    color: var(--ma-text-muted);
    padding: 0.28rem 0.42rem;
    cursor: pointer;
}
.ma-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem; }
.ma-row-actions button.is-codex { color: var(--ma-accent-ink); }
.ma-row-actions button.is-danger { border-color: var(--ma-danger-line); color: var(--ma-danger-ink); }
.ma-add-task-row { width: 100%; border: 0; border-top: 1px solid var(--ma-border); background: var(--ma-surface); color: var(--ma-text-secondary); padding: 0.7rem 3.4rem; text-align: left; cursor: pointer; }
.ma-add-task-row:hover { background: var(--ma-surface-hover); color: var(--ma-cyan); }

.ma-row-actions button:hover {
    background: var(--ma-surface-hover);
    color: var(--ma-text);
}

.ma-inline-editor {
    padding: 0.9rem 1rem 1rem 3.35rem;
    border-top: 1px solid var(--ma-border);
}

.ma-create-editor {
    padding-left: 1rem;
    border: 1px solid var(--ma-border);
    border-radius: 12px;
    background: var(--ma-surface);
}

.ma-edit-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.ma-edit-grid label > span {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--ma-text-secondary);
    font-size: 0.6875rem;
}

.ma-edit-grid .is-wide {
    grid-column: span 2;
}

.ma-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    align-self: end;
    min-height: 2.45rem;
}

.ma-checkbox-label span { margin: 0; }

.ma-editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.8rem;
}

.ma-button {
    min-height: 2.35rem;
    border: 1px solid var(--ma-border-strong);
    border-radius: var(--ma-radius-control);
    background: var(--ma-surface);
    padding: 0.45rem 0.85rem;
    color: var(--ma-accent-hover);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}

.ma-button:hover {
    background: var(--ma-surface-hover);
}

/* One primary and one secondary style, matching Filament's buttons. */
.ma-button.is-primary {
    border-color: var(--ma-accent);
    background: var(--ma-accent);
    color: #fff;
}

.ma-button.is-primary:hover {
    background: var(--ma-accent-hover);
}

.ma-button:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.ma-empty-section {
    padding: 1rem;
    color: var(--ma-text-muted);
    font-size: 0.75rem;
}

.ma-form-error {
    margin-top: 0.65rem;
    color: var(--ma-danger-ink);
    font-size: 0.75rem;
}

@media (max-width: 900px) {
    .ma-edit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .ma-workspace-bar { align-items: stretch; flex-direction: column; }
    .ma-workspace-select { width: 100%; }
    .ma-inline-editor { padding-left: 1rem; }
    .ma-edit-grid { grid-template-columns: 1fr; }
    .ma-edit-grid .is-wide { grid-column: auto; }
}

/* ==========================================================================
   Social workflow — real six-view content pipeline
   ========================================================================== */

.ma-social-workflow { display: grid; gap: 1rem; }

.ma-social-editor-modal {
    position: fixed;
    z-index: 70;
    inset: 0;
    display: grid;
    overflow-y: auto;
    overscroll-behavior: contain;
    place-items: center;
    padding: clamp(0.75rem, 2vw, 1.5rem);
    background: var(--ma-overlay);
    backdrop-filter: blur(5px);
}

.ma-social-editor,
.ma-social-panel,
.ma-fallback-card,
.ma-social-table-wrap {
    overflow: hidden;
    border: 1px solid var(--ma-border);
    border-radius: 12px;
    background: var(--ma-surface);
}

.ma-social-editor {
    width: min(72rem, 100%);
    max-height: calc(100dvh - 3rem);
    overflow-y: auto;
    box-shadow: var(--ma-shadow-overlay);
}

.ma-social-editor-head {
    position: sticky;
    z-index: 2;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 3.4rem;
    border-bottom: 1px solid var(--ma-border);
    background: rgb(255 255 255 / .96);
    padding: 0.75rem 1rem;
    backdrop-filter: blur(8px);
}

.ma-social-editor-head strong { color: var(--ma-text); font-size: 0.9rem; }

.ma-social-editor-head button {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border: 1px solid var(--ma-border);
    border-radius: 8px;
    background: var(--ma-surface-hover);
    color: var(--ma-text);
    font-size: 1.35rem;
    cursor: pointer;
}

.ma-social-editor-head button:hover { border-color: var(--ma-accent); background: var(--ma-surface-hover); color: var(--ma-text); }

.ma-social-editor-body { padding: 1rem; }

.ma-social-editor .ma-edit-grid input,
.ma-social-editor .ma-edit-grid select,
.ma-social-editor .ma-edit-grid textarea {
    width: 100%;
    border: 1px solid var(--ma-border);
    border-radius: 9px;
    background: var(--ma-surface);
    color: var(--ma-text);
    padding: 0.6rem 0.7rem;
}

.ma-social-editor .ma-edit-grid textarea { line-height: 1.5; resize: vertical; }

.ma-social-editor .ma-edit-grid input::placeholder,
.ma-social-editor .ma-edit-grid textarea::placeholder { color: var(--ma-text-muted); opacity: 1; }

.ma-social-editor .ma-edit-grid input:focus,
.ma-social-editor .ma-edit-grid select:focus,
.ma-social-editor .ma-edit-grid textarea:focus {
    border-color: var(--ma-accent);
    outline: 3px solid var(--ma-focus);
}

.ma-editor-actions .ma-editor-delete { margin-right: auto; }

.ma-social-editor .ma-editor-actions {
    position: sticky;
    bottom: -1rem;
    margin-inline: -1rem;
    border-top: 1px solid var(--ma-border);
    background: rgb(255 255 255 / .96);
    padding: 0.8rem 1rem;
    backdrop-filter: blur(8px);
}

.ma-social-tabs {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    padding-bottom: 0.2rem;
}

.ma-social-tabs button {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.35rem;
    border: 1px solid var(--ma-border);
    border-radius: 9px;
    background: var(--ma-surface);
    color: var(--ma-text-secondary);
    padding: 0.45rem 0.65rem;
    white-space: nowrap;
    cursor: pointer;
}

.ma-social-tabs button.is-active { border-color: var(--ma-accent); background: var(--ma-surface-hover); color: var(--ma-text); }
.ma-social-tabs button > span { border-radius: 999px; background: var(--ma-neutral-soft); padding: 0.05rem 0.35rem; font-size: 0.625rem; }
.ma-social-tabs button > em { border-radius: 999px; background: var(--ma-danger-soft); color: var(--ma-danger-ink); padding: 0.05rem 0.3rem; font-size: 0.55rem; font-style: normal; }
.ma-social-view-picker { display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.45rem; color: var(--ma-text-secondary); white-space: nowrap; }
.ma-social-view-picker > span { font-size: 0.65rem; font-weight: 700; }
.ma-social-view-picker select { min-height: 1.75rem; border: 1px solid var(--ma-border); border-radius: 6px; background: var(--ma-surface); color: var(--ma-text); padding: 0.2rem 1.8rem 0.2rem 0.45rem; font-size: 0.68rem; }

.ma-social-views { display: grid; gap: 1rem; min-width: 0; }
.ma-social-view-controls { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding: 0.8rem; }
.ma-social-view-controls > div:first-child { display: flex; align-items: end; flex-wrap: wrap; gap: 0.7rem; }
.ma-social-view-controls label { display: grid; gap: 0.3rem; color: var(--ma-text-muted); font-size: 0.65rem; }
.ma-social-view-controls select { min-width: 13rem; border: 1px solid var(--ma-border); border-radius: 8px; background: var(--ma-surface); color: var(--ma-text); padding: 0.55rem 2rem 0.55rem 0.65rem; }
.ma-social-view-controls a { color: var(--ma-accent); font-size: 0.72rem; font-weight: 700; text-decoration: none; }
.ma-social-view-controls a:hover, .ma-social-view-controls a:focus-visible { text-decoration: underline; }
.ma-social-view-switcher { display: inline-flex; gap: 0.3rem; border: 1px solid var(--ma-border); border-radius: 9px; background: var(--ma-surface); padding: 0.25rem; }
.ma-social-view-switcher button { display: inline-flex; align-items: center; gap: 0.35rem; border: 0; border-radius: 7px; background: transparent; color: var(--ma-text-secondary); padding: 0.45rem 0.65rem; font-size: 0.7rem; font-weight: 700; cursor: pointer; }
.ma-social-view-switcher button svg { width: 1rem; height: 1rem; }
.ma-social-view-switcher button.is-active { background: var(--ma-accent); color: #fff; }
.ma-social-table-scroll { max-width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-inline: contain; }
.ma-social-table-scroll > .fi-ta { min-width: 72rem; }

.ma-social-thumbnail { position: relative; display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border: 1px solid var(--ma-border); border-radius: 8px; background: var(--ma-surface); color: var(--ma-text-muted); cursor: zoom-in; }
.ma-social-thumbnail > img { width: 100%; height: 100%; border-radius: 7px; object-fit: cover; }
.ma-social-thumbnail > svg { width: 1.25rem; height: 1.25rem; }
.ma-social-thumbnail:focus-visible { outline: 2px solid var(--ma-accent); outline-offset: 2px; }
.ma-social-thumbnail-popover { position: absolute; z-index: 80; top: calc(100% + 0.45rem); left: 0; display: none; width: min(21rem, 75vw); filter: drop-shadow(0 12px 24px rgb(16 42 79 / .16)); }
.ma-social-thumbnail:hover .ma-social-thumbnail-popover, .ma-social-thumbnail:focus .ma-social-thumbnail-popover, .ma-social-thumbnail:focus-within .ma-social-thumbnail-popover { display: block; }
.ma-social-post-preview { overflow: hidden; border: 1px solid var(--ma-border); border-radius: 12px; background: #fff; color: #1f2937; text-align: left; }
.ma-social-post-preview > header { display: flex; align-items: center; gap: 0.55rem; padding: 0.75rem; }
.ma-social-post-preview > header > span:last-child { display: grid; }
.ma-social-post-preview strong { color: #111827; font-size: 0.75rem; }
.ma-social-post-preview small { color: #6b7280; font-size: 0.62rem; }
.ma-social-post-preview-avatar { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 999px; background: var(--ma-surface); color: var(--ma-text); font-size: 0.72rem; font-weight: 800; }
.ma-social-post-preview > p { padding: 0 0.75rem 0.65rem; color: #273244; font-size: 0.72rem; line-height: 1.5; white-space: pre-line; }
.ma-social-post-preview-tags { display: block; padding: 0 0.75rem 0.65rem; color: #3569a5 !important; }
.ma-social-post-preview > img { display: block; width: 100%; max-height: 16rem; object-fit: cover; }
.ma-social-post-preview > footer { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #e5e7eb; padding: 0.55rem; color: #64748b; font-size: 0.62rem; font-weight: 700; text-align: center; }

.ma-social-kanban { display: grid; grid-auto-columns: minmax(15rem, 19rem); grid-auto-flow: column; gap: 0.75rem; overflow-x: auto; padding-bottom: 0.6rem; }
.ma-social-kanban-column { min-height: 28rem; border-top: 3px solid var(--ma-accent); padding: 0.65rem; }
.ma-social-kanban-column > header { display: flex; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.7rem; }
.ma-social-kanban-column > header span { display: grid; gap: 0.2rem; }
.ma-social-kanban-column > header strong { color: var(--ma-text); font-size: 0.78rem; }
.ma-social-kanban-column > header small { color: var(--ma-text-muted); font-size: 0.62rem; line-height: 1.35; }
.ma-social-kanban-column > header b { display: grid; min-width: 1.55rem; height: 1.55rem; place-items: center; border-radius: 999px; background: var(--ma-neutral-soft); color: var(--ma-text); font-size: 0.65rem; }
.ma-social-kanban-column.is-drop-target { border-color: var(--ma-accent); background: var(--ma-surface-hover); box-shadow: 0 0 0 2px var(--ma-focus); }
.ma-social-kanban-cards { display: grid; gap: 0.65rem; }
.ma-social-kanban-card { display: grid; gap: 0.55rem; overflow: hidden; border: 1px solid var(--ma-border); border-radius: 9px; background: var(--ma-surface); padding: 0.7rem; cursor: grab; }
.ma-social-kanban-card:active { cursor: grabbing; }
.ma-social-kanban-card.is-dragging { opacity: 0.45; }
.ma-social-kanban-card > img { width: calc(100% + 1.4rem); height: 8.5rem; margin: -0.7rem -0.7rem 0; object-fit: cover; }
.ma-social-kanban-card > a { color: var(--ma-text); font-size: 0.76rem; font-weight: 800; line-height: 1.4; text-decoration: none; }
.ma-social-kanban-card > a:hover, .ma-social-kanban-card > a:focus-visible { color: var(--ma-accent); text-decoration: underline; }
.ma-social-kanban-card > .ma-badge { justify-self: start; }
.ma-social-kanban-card > p { color: var(--ma-text-secondary); font-size: 0.68rem; line-height: 1.45; }
.ma-social-kanban-card > small { color: var(--ma-text-muted); font-size: 0.6rem; }
.ma-social-kanban-move { display: grid; gap: 0.25rem; color: var(--ma-text-muted); font-size: 0.6rem; font-weight: 700; }
.ma-social-kanban-move select { min-width: 0; border: 1px solid var(--ma-border); border-radius: 6px; background: var(--ma-surface); color: var(--ma-text); padding: 0.35rem 0.45rem; font-size: 0.65rem; }

.ma-ai-suggestion { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border: 1px solid var(--ma-warning-line); border-radius: 11px; background: var(--ma-warning-soft); padding: 0.8rem 1rem; }
.ma-ai-suggestion strong, .ma-ai-suggestion span { display: block; }
.ma-ai-suggestion strong { color: var(--ma-warning-ink); }
.ma-ai-suggestion span { color: var(--ma-warning-ink); font-size: 0.7rem; }
.ma-ai-suggestion button, .ma-overview-head button, .ma-social-filters button, .ma-new-idea { border: 1px solid var(--ma-border-strong); border-radius: 8px; background: var(--ma-surface); color: var(--ma-text); padding: 0.5rem 0.7rem; font-size: 0.72rem; font-weight: 700; cursor: pointer; }
.ma-ai-suggestion button, .ma-overview-head button.is-primary, .ma-new-idea, .ma-social-filters button.is-active { border-color: var(--ma-warning-line); background: #fedc32; color: #15130b; }
.ma-overview-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.ma-overview-head h2, .ma-pipeline-heading h2 { font-size: 1rem; font-weight: 800; }
.ma-overview-head p { color: var(--ma-text-muted); font-size: 0.72rem; }
.ma-overview-head > div:last-child { display: flex; gap: 0.5rem; }
.ma-social-filters { display: flex; align-items: end; justify-content: space-between; gap: 1rem; border: 1px solid var(--ma-border); border-radius: 11px; background: var(--ma-surface); padding: 0.75rem; }
.ma-social-filters > div { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.ma-social-filters label { color: var(--ma-text-muted); font-size: 0.65rem; }
.ma-social-filters select, .ma-pipeline-cards select { display: block; border: 1px solid var(--ma-border); border-radius: 7px; background: var(--ma-surface); color: var(--ma-text); padding: 0.45rem; }
.ma-week-health { display: grid; grid-template-columns: repeat(7, minmax(8.5rem, 1fr)); gap: 0.55rem; overflow-x: auto; }
.ma-week-health > button { display: grid; min-height: 8.8rem; align-content: start; gap: 0.55rem; border: 1px solid var(--ma-border); border-top: 3px solid var(--ma-warning-line); border-radius: 10px; background: var(--ma-surface); color: var(--ma-text); padding: 0.7rem; text-align: left; cursor: pointer; }
.ma-week-health > button.is-gap { border-top-color: var(--ma-danger-line); }
.ma-week-health > button.is-covered { border-top-color: var(--ma-success-line); }
.ma-week-health > button.is-selected { outline: 2px solid var(--ma-accent); }
.ma-week-health span { display: flex; justify-content: space-between; gap: 0.4rem; }
.ma-week-health small { color: var(--ma-text-muted); font-size: 0.6rem; }
.ma-week-health b { color: var(--ma-warning-ink); font-size: 0.68rem; }
.ma-week-health .is-gap b { color: var(--ma-danger-ink); }
.ma-week-health .is-covered b { color: var(--ma-success-ink); }
.ma-week-health i { color: var(--ma-text-muted); font-size: 0.62rem; font-style: normal; }
.ma-week-health em { color: var(--ma-text-muted); font-size: 0.61rem; font-style: normal; text-transform: uppercase; }
.ma-overview-summary { display: grid; grid-template-columns: 2fr 0.55fr 0.55fr; border-block: 1px solid var(--ma-border); }
.ma-overview-summary span { padding: 0.65rem 0.8rem; color: var(--ma-text-muted); font-size: 0.6rem; text-transform: uppercase; }
.ma-overview-summary span + span { border-left: 1px solid var(--ma-border); }
.ma-overview-summary strong { display: block; color: var(--ma-text); font-size: 0.8rem; text-transform: none; }
.ma-pipeline-board { display: grid; grid-template-columns: repeat(5, minmax(14rem, 1fr)); gap: 0.65rem; overflow-x: auto; }
.ma-pipeline-lane { min-height: 24rem; padding: 0.65rem; }
.ma-pipeline-lane > header { display: flex; justify-content: space-between; gap: 0.7rem; margin-bottom: 0.65rem; }
.ma-pipeline-lane > header strong, .ma-pipeline-lane > header span { display: block; }
.ma-pipeline-lane > header span { margin-top: 0.2rem; color: var(--ma-text-muted); font-size: 0.62rem; }
.ma-pipeline-lane > header > b { display: grid; min-width: 1.5rem; height: 1.5rem; place-items: center; border-radius: 999px; background: var(--ma-neutral-soft); font-size: 0.65rem; }
.ma-new-idea { width: 100%; margin-bottom: 0.65rem; }
.ma-pipeline-cards { display: grid; gap: 0.6rem; }
.ma-pipeline-cards article, .ma-planner-board article { display: grid; gap: 0.55rem; border: 1px solid var(--ma-border); border-radius: 9px; background: var(--ma-surface); padding: 0.7rem; }
.ma-pipeline-cards article p, .ma-planner-board article p { color: var(--ma-text-secondary); font-size: 0.7rem; line-height: 1.45; }
.ma-pipeline-cards article small { color: var(--ma-text-muted); }
.ma-pipeline-cards article small.ma-post-stamps { margin-top: -0.35rem; color: var(--ma-text-muted); font-size: 0.58rem; line-height: 1.4; }
.ma-pipeline-cards article label { color: var(--ma-text-muted); font-size: 0.62rem; }
.ma-pipeline-cards article > button, .ma-planner-board article button { justify-self: start; border: 1px solid var(--ma-border); border-radius: 7px; background: var(--ma-surface); color: var(--ma-text); padding: 0.35rem 0.55rem; cursor: pointer; }
.ma-post-image { display: block; width: 100%; height: 7.5rem; border-radius: 7px; object-fit: cover; }
.ma-pipeline-empty { border: 1px dashed var(--ma-border); border-radius: 8px; color: var(--ma-text-muted); padding: 1rem; font-size: 0.7rem; text-align: center; }
.ma-planner-board { display: grid; grid-template-columns: repeat(7, minmax(14rem, 1fr)); gap: 0.65rem; overflow-x: auto; }
.ma-planner-board > section { min-height: 30rem; border: 1px solid var(--ma-border); border-radius: 11px; background: var(--ma-surface); padding: 0.65rem; }
.ma-planner-board > section > header { display: grid; gap: 0.15rem; margin-bottom: 0.7rem; }
.ma-planner-board > section > header b { color: var(--ma-warning-ink); font-size: 1rem; }
.ma-planner-board > section > header span { color: var(--ma-text-muted); font-size: 0.65rem; }
.ma-planner-board article + article { margin-top: 0.6rem; }
.ma-planner-board > .ma-pipeline-lane, .ma-planner-board .ma-pipeline-cards, .ma-planner-board .ma-pipeline-cards > article { min-width: 0; }
.ma-planner-board .ma-pipeline-cards > article > .ma-kanban-task-title { display: block; justify-self: stretch; width: 100%; min-width: 0; max-width: 100%; border: 0; border-radius: 0; padding: 0; background: transparent; color: var(--ma-text); text-align: left; white-space: normal; overflow-wrap: anywhere; font-size: 0.7rem; font-weight: 700; line-height: 1.5; }
.ma-kanban-task-title:hover { text-decoration: underline; }
/* "↳ Parent task" line on sub-task cards: small and muted so the card's own title leads. */
.ma-subtask-context { display: flex; align-items: baseline; gap: 0.3rem; margin: 0 0 0.3rem; color: var(--ma-text-secondary, var(--ma-text-secondary)); font-size: 0.64rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.ma-subtask-context > * { font-size: inherit; font-weight: inherit; color: inherit; }
.ma-kanban-task-title:focus-visible { outline: 2px solid var(--ma-cyan, var(--ma-accent)); outline-offset: 3px; }
.ma-planner-board .ma-pipeline-cards, .ma-planner-board .ma-pipeline-cards > article { grid-template-columns: minmax(0, 1fr); }
.ma-planner-board .ma-tags { flex-wrap: wrap; }
.ma-planner-board .ma-tags > span { flex: 0 1 auto; }
.ma-planner-board .ma-badge.is-task-type { background: var(--ma-success-soft); color: var(--ma-success-ink); }
.ma-planner-board .ma-badge.is-task-due { background: var(--ma-warning-soft); color: var(--ma-warning-ink); text-transform: none; }
.ma-planner-board .ma-pipeline-cards > article > p { min-width: 0; white-space: normal; overflow-wrap: anywhere; font-size: 0.65rem; font-weight: 400; }

.ma-day-grid { display: grid; grid-template-columns: repeat(7, minmax(8rem, 1fr)); gap: 0.55rem; overflow-x: auto; }
.ma-day-card { min-height: 9.25rem; padding: 0.75rem; }
.ma-day-card.is-priority { border-color: var(--ma-border); background: var(--ma-surface); }
.ma-day-card > div { display: flex; justify-content: space-between; color: var(--ma-text-secondary); font-size: 0.625rem; }
.ma-day-card i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ma-warning); }
.ma-day-card i.is-ready { background: var(--ma-success); }
.ma-day-card strong { display: block; margin-top: 1rem; font-size: 0.8rem; }
.ma-day-card p { margin-top: 0.4rem; color: var(--ma-text-muted); font-size: 0.65rem; }

.ma-social-panel > header { display: flex; justify-content: space-between; padding: 0.9rem 1rem; border-bottom: 1px solid var(--ma-border); }
.ma-social-panel > header span { color: var(--ma-text-muted); font-size: 0.7rem; }
.ma-post-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; padding: 0.8rem; }
.ma-post-cards button { min-height: 7rem; border: 1px solid var(--ma-border); border-radius: 10px; background: var(--ma-surface); color: var(--ma-text); padding: 0.8rem; text-align: left; cursor: pointer; }
.ma-post-cards button:hover { border-color: var(--ma-accent); }
.ma-post-cards button span,
.ma-post-cards button small { display: block; color: var(--ma-text-muted); font-size: 0.65rem; }
.ma-post-cards button strong { display: block; margin: 0.8rem 0 0.35rem; font-size: 0.78rem; }

.ma-fallback-card { display: grid; grid-template-columns: 1fr auto; gap: 0.6rem 1rem; padding: 1rem; }
.ma-fallback-card span,
.ma-fallback-card strong { display: block; }
.ma-fallback-card span { color: var(--ma-text-muted); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; }
.ma-fallback-card b { align-self: start; border: 1px solid var(--ma-accent-line); border-radius: 999px; background: var(--ma-accent-soft); color: var(--ma-accent-ink); padding: 0.22rem 0.55rem; font-size: 0.65rem; }
.ma-fallback-card p { grid-column: 1 / -1; color: var(--ma-text-muted); font-size: 0.72rem; }

.ma-social-table-wrap { overflow-x: auto; }
.ma-social-table { width: 100%; min-width: 62rem; border-collapse: collapse; text-align: left; }
.ma-social-table th { background: var(--ma-surface-muted); color: var(--ma-text-muted); padding: 0.6rem 0.75rem; font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; }
.ma-social-table td { border-top: 1px solid var(--ma-border); color: var(--ma-text-secondary); padding: 0.65rem 0.75rem; font-size: 0.72rem; }
.ma-social-table td:first-child { width: 32%; }
.ma-social-table td strong,
.ma-social-table td small { display: block; }
.ma-social-table td strong { color: var(--ma-text); font-size: 0.78rem; }
.ma-social-table td small { margin-top: 0.2rem; color: var(--ma-text-muted); }
.ma-social-table td button { border: 1px solid var(--ma-border); border-radius: 7px; background: var(--ma-surface-hover); color: var(--ma-text); padding: 0.3rem 0.55rem; cursor: pointer; }

@media (max-width: 900px) {
    .ma-day-grid { grid-template-columns: repeat(7, 9rem); }
    .ma-post-cards { grid-template-columns: 1fr; }
    .ma-overview-head, .ma-social-filters { align-items: stretch; flex-direction: column; }
    .ma-social-view-controls { align-items: stretch; flex-direction: column; }
    .ma-social-view-switcher { align-self: start; }
}

@media (max-width: 640px) {
    .ma-social-editor-modal { place-items: stretch; padding: 0; }
    .ma-social-editor { width: 100%; max-height: 100dvh; border-radius: 0; }
    .ma-social-editor-body { padding: 0.85rem; }
    .ma-social-editor .ma-editor-actions { bottom: -0.85rem; margin-inline: -0.85rem; padding-inline: 0.85rem; }
}

/* ==========================================================================
   Workspace settings and module catalogue
   ========================================================================== */

.ma-settings-page,
.ma-modules-page { display: grid; gap: 1rem; }
.ma-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
.ma-setting-card { padding: 1rem; }
.ma-setting-card header { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; }
.ma-setting-card header strong { font-size: 0.9rem; }
.ma-setting-card header p { margin-top: 0.2rem; color: var(--ma-text-muted); font-size: 0.7rem; }
.ma-setting-card header > span { align-self: start; border: 1px solid var(--ma-accent-line); border-radius: 999px; background: var(--ma-accent-soft); color: var(--ma-accent-ink); padding: 0.2rem 0.5rem; font-size: 0.6rem; white-space: nowrap; }
.ma-setting-card header > span.is-override { border-color: var(--ma-info-line); background: var(--ma-info-soft); color: var(--ma-info-ink); }
.ma-setting-card label { display: block; margin-top: 0.75rem; }
.ma-setting-card label > span { display: block; margin-bottom: 0.3rem; color: var(--ma-text-secondary); font-size: 0.68rem; }
.ma-setting-card input:not([type="color"]),
.ma-setting-card select,
.ma-setting-card textarea { width: 100%; border: 1px solid var(--ma-border); border-radius: 9px; background: var(--ma-surface); color: var(--ma-text); padding: 0.6rem; }
.ma-setting-card input:focus,
.ma-setting-card select:focus,
.ma-setting-card textarea:focus { border-color: var(--ma-accent); outline: 3px solid var(--ma-focus); }
.ma-logo-row { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.85rem; align-items: center; }
.ma-logo-preview { display: grid; width: 5.25rem; height: 5.25rem; place-items: center; color: var(--ma-accent); font-size: 1.35rem; font-weight: 800; }
.ma-logo-preview img { width: 100%; height: 100%; border-radius: 12px; object-fit: contain; }
.ma-logo-form { min-width: 0; }
.ma-help { margin-top: 0.75rem; color: var(--ma-text-muted); font-size: 0.65rem; }
.ma-colour-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.ma-colour-fields input[type="color"] { width: 100%; height: 3.2rem; border: 1px solid var(--ma-border); border-radius: 10px; background: var(--ma-surface); padding: 0.25rem; }
.ma-settings-actions { display: flex; justify-content: flex-end; }

.ma-modules-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.ma-module-card { color: var(--ma-text); display: grid; grid-template-columns: 2.4rem 1fr auto; gap: 0.75rem; align-items: start; padding: 0.9rem; }
.ma-module-icon { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border-radius: 10px; background: var(--ma-surface-muted); color: var(--ma-accent); }
.ma-module-card strong { color: var(--ma-text); font-size: 0.8rem; }
.ma-module-card p { margin-top: 0.25rem; color: var(--ma-text-secondary); font-size: 0.65rem; }
.ma-module-card small { display: inline-block; margin-top: 0.55rem; color: var(--ma-text-secondary); font-size: 0.58rem; text-transform: uppercase; }
.ma-module-actions { display: grid; justify-items: end; gap: 0.55rem; }
.ma-module-actions .ma-workspace-select { width: 8.5rem; font-size: 0.66rem; padding: 0.42rem; }
.ma-toggle { width: 2.5rem; height: 1.45rem; border: 1px solid var(--ma-border); border-radius: 999px; background: var(--ma-surface); padding: 0.12rem; cursor: pointer; }
.ma-toggle i { display: block; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--ma-text-muted); transition: transform var(--ma-speed) ease; }
.ma-toggle.is-on { border-color: var(--ma-accent); background: var(--ma-accent-soft); }
.ma-toggle.is-on i { transform: translateX(1rem); background: var(--ma-accent); }

.ma-agents-page { display: grid; gap: 1rem; }
.ma-agents-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.ma-agents-head h2 { font-size: 1rem; font-weight: 800; }
.ma-agents-head p { color: var(--ma-text-muted); font-size: 0.72rem; }
.ma-agents-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0.65rem; }
.ma-agent-card { display: grid; gap: 0.55rem; padding: 0.8rem; align-content: start; }
.ma-agent-card > header { display: flex; align-items: start; justify-content: space-between; gap: 0.6rem; }
.ma-agent-card > header strong { display: block; color: var(--ma-text); font-size: 0.85rem; }
.ma-agent-card > header span { display: block; margin-top: 0.15rem; color: var(--ma-text-muted); font-size: 0.68rem; }
.ma-agent-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; color: var(--ma-text-secondary); font-size: 0.68rem; }
.ma-agent-actions { display: flex; gap: 0.5rem; }
.ma-agent-actions button { border: 1px solid var(--ma-border); border-radius: 7px; background: var(--ma-surface); color: var(--ma-text); padding: 0.35rem 0.6rem; font-size: 0.68rem; cursor: pointer; }
.ma-agent-actions button.is-danger { border-color: var(--ma-danger-line); color: var(--ma-danger-ink); }

.ma-capabilities { display: grid; gap: 0.55rem; margin-top: 0.5rem; padding-top: 0.8rem; border-top: 1px solid var(--ma-border); }
.ma-capabilities-head { display: flex; align-items: center; justify-content: space-between; }
.ma-capability-row { display: grid; grid-template-columns: 1fr auto 1.4fr auto; gap: 0.5rem; align-items: center; }
.ma-capability-row select, .ma-capability-row input { border: 1px solid var(--ma-border); border-radius: 7px; background: var(--ma-surface); color: var(--ma-text); padding: 0.4rem 0.5rem; font-size: 0.72rem; }
.ma-inline-check { display: flex; align-items: center; gap: 0.35rem; color: var(--ma-text-secondary); font-size: 0.7rem; white-space: nowrap; }

.ma-conversation-thread { display: grid; gap: 0.5rem; margin-bottom: 0.8rem; }
.ma-conversation-message { display: grid; gap: 0.2rem; border: 1px solid var(--ma-border); border-radius: 8px; padding: 0.55rem 0.7rem; background: var(--ma-surface); }
.ma-conversation-message b { color: var(--ma-text-muted); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.04em; }
.ma-conversation-message p { color: var(--ma-text); font-size: 0.75rem; }
.ma-conversation-message.is-assistant { border-left: 3px solid var(--ma-accent); }
.ma-conversation-message.is-user { border-left: 3px solid #fedc32; }
.ma-conversation-composer { display: flex; gap: 0.5rem; }
.ma-conversation-composer input { flex: 1; border: 1px solid var(--ma-border); border-radius: 7px; background: var(--ma-surface); color: var(--ma-text-muted); padding: 0.5rem 0.7rem; }
.ma-conversation-composer button { border: 1px solid var(--ma-border); border-radius: 7px; background: var(--ma-surface); color: var(--ma-text-muted); padding: 0.5rem 0.8rem; cursor: not-allowed; }

@media (max-width: 720px) {
    .ma-capability-row { grid-template-columns: 1fr; }
}

/* Global agency dashboard ---------------------------------------------- */
.ma-global-workspaces > header > span {
    color: var(--ma-text-muted);
    font-size: 0.65rem;
}

.ma-global-workspace-table {
    overflow-x: auto;
}

.ma-global-workspace-head,
.ma-global-workspace-row {
    display: grid;
    grid-template-columns: minmax(12rem, 1.4fr) minmax(15rem, 1.6fr) repeat(4, minmax(5.25rem, 0.55fr)) minmax(6.5rem, 0.7fr);
    min-width: 66rem;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
}

.ma-global-workspace-head {
    border-bottom: 1px solid var(--ma-border);
    background: var(--ma-surface-muted);
    color: var(--ma-text-muted);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ma-global-workspace-row {
    min-height: 4.25rem;
    border-bottom: 1px solid var(--ma-border);
    background: var(--ma-surface);
}

.ma-global-workspace-row:last-child {
    border-bottom: 0;
}

.ma-global-workspace-row:hover {
    background: var(--ma-surface-hover);
}

.ma-global-workspace-row > strong {
    color: var(--ma-text);
    font-size: 0.78rem;
}

.ma-global-workspace-name b,
.ma-global-workspace-name small {
    display: block;
}

.ma-global-workspace-name b {
    color: var(--ma-text);
    font-size: 0.75rem;
}

.ma-global-workspace-name small {
    margin-top: 0.2rem;
    color: var(--ma-text-muted);
    font-size: 0.61rem;
}

.ma-global-module-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}


/* Standalone HTTP error pages render outside Filament's panel shell. */
.ma-error-page {
    display: grid;
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    place-items: center;
    background: var(--ma-page-wash), var(--ma-page-bg);
    color: var(--ma-text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    padding: 1.25rem;
}

.ma-error-card {
    width: min(32rem, 100%);
    border: 1px solid var(--ma-border);
    border-radius: 16px;
    background: var(--ma-surface);
    box-shadow: var(--ma-shadow-card);
    padding: clamp(1.5rem, 5vw, 2.5rem);
    text-align: center;
}

.ma-error-code {
    color: var(--ma-accent-ink);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ma-error-mark {
    display: grid;
    width: 3.25rem;
    height: 3.25rem;
    margin: 1.25rem auto;
    place-items: center;
    border: 1px solid var(--ma-accent-line);
    border-radius: 14px;
    background: var(--ma-accent-soft);
    color: var(--ma-accent-ink);
    font-size: 1.5rem;
    font-weight: 800;
}

.ma-error-card h1 {
    margin: 0;
    color: var(--ma-text);
    font-size: clamp(1.45rem, 5vw, 2rem);
    line-height: 1.18;
}

#error-title {
    color: var(--ma-text);
}

.ma-error-card p {
    max-width: 27rem;
    margin: 0.9rem auto 1.5rem;
    color: var(--ma-text-secondary);
    font-size: 0.9rem;
    line-height: 1.65;
}

.ma-error-action {
    display: inline-flex;
    min-height: 2.55rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ma-accent);
    border-radius: var(--ma-radius-control);
    background: var(--ma-accent);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 0.55rem 1rem;
    text-decoration: none;
}

.ma-error-action:hover,
.ma-error-action:focus-visible {
    background: var(--ma-accent-hover);
    outline: 3px solid var(--ma-focus);
}

@media (max-width: 1000px) {
    .ma-modules-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* V5 control centre ----------------------------------------------------- */
.ma-control-centre { display: grid; gap: 1rem; }
.ma-control-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: -0.35rem; }
.ma-control-actions p { display: flex; align-items: center; gap: 0.45rem; color: var(--ma-text-muted); font-size: 0.72rem; }
.ma-live-dot, .ma-health-dot { width: 0.48rem; height: 0.48rem; border-radius: 999px; background: var(--ma-success); flex: 0 0 auto; }
.ma-dashboard-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.ma-dashboard-metrics article { position: relative; display: grid; gap: 0.25rem; min-height: 7.5rem; padding: 1rem; overflow: hidden; border: 1px solid var(--ma-border); border-radius: 14px; background: var(--ma-surface); }
.ma-dashboard-metrics span { color: var(--ma-text-secondary); font-size: 0.7rem; }
.ma-dashboard-metrics strong { color: var(--ma-text); font-size: 1.8rem; line-height: 1.2; }
.ma-dashboard-metrics small { color: var(--ma-success-ink); font-size: 0.67rem; }
.ma-unavailable-summary { margin: 0; color: var(--ma-text-secondary); padding: 0.55rem 0.7rem; font-size: 0.7rem; }
.ma-unavailable-summary strong { color: var(--ma-text); }
.ma-layout-help { display: flex; align-items: center; gap: 0.45rem; color: var(--ma-text-muted); font-size: 0.67rem; }
.ma-layout-help span, .ma-drag-handle { color: var(--ma-accent); }
.ma-dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; }
.ma-dash-panel { min-width: 0; overflow: hidden; transition: opacity .15s, border-color .15s, transform .15s; }
.ma-dash-panel.is-wide { grid-column: 1 / -1; }
.ma-dash-panel.is-dragging { opacity: .45; border-color: var(--ma-accent); transform: scale(.99); }
.ma-dash-panel > header { display: flex; align-items: center; justify-content: space-between; min-height: 3.15rem; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--ma-border); }
.ma-dash-panel > header > div { display: flex; align-items: center; gap: 0.55rem; }
.ma-dash-panel > header strong { color: var(--ma-text); font-size: 0.78rem; }
.ma-dash-panel > header a { color: var(--ma-accent); font-size: 0.67rem; text-decoration: none; }
.ma-drag-handle { display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; cursor: grab; font-size: 1rem; }
.ma-dash-panel:active .ma-drag-handle { cursor: grabbing; }
.ma-quick-launch { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.65rem; padding: 0.75rem; }
.ma-quick-launch a { display: grid; gap: 0.3rem; min-height: 5.5rem; align-content: center; padding: 0.8rem; border: 1px solid var(--ma-border); border-radius: 10px; background: var(--ma-surface); text-decoration: none; }
.ma-quick-launch a:hover { border-color: var(--ma-accent); background: var(--ma-surface-hover); }
.ma-quick-launch b { color: var(--ma-text); font-size: 0.75rem; }
.ma-quick-launch small { color: var(--ma-text-muted); font-size: 0.65rem; }
.ma-dash-list { min-height: 8.75rem; }
.ma-dash-list > a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.65rem; min-height: 3.7rem; padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--ma-border); color: inherit; text-decoration: none; }
.ma-dash-list > a:hover { background: var(--ma-surface-hover); }
.ma-dash-list > a:last-child { border-bottom: 0; }
.ma-dash-list b, .ma-dash-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-dash-list b { color: var(--ma-text); font-size: 0.72rem; }
.ma-dash-list small { margin-top: 0.18rem; color: var(--ma-text-muted); font-size: 0.62rem; }
.ma-dash-list em { color: var(--ma-success-ink); font-size: 0.6rem; font-style: normal; }
.ma-priority { min-width: 3.4rem; padding: 0.18rem 0.36rem; border-radius: 999px; background: var(--ma-neutral-soft); color: var(--ma-text-secondary); font-size: 0.55rem; text-align: center; text-transform: lowercase; }
.ma-priority.is-high, .ma-priority.is-urgent { background: var(--ma-danger-soft); color: var(--ma-danger-ink); }
.ma-deadline-badge { display: inline-flex; margin-top: 0.3rem; border: 1px solid var(--ma-warning-line); border-radius: 999px; background: var(--ma-warning-soft); color: var(--ma-warning-ink); padding: 0.12rem 0.38rem; font-size: 0.55rem; font-weight: 700; }
.ma-channel { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--ma-border); border-radius: 7px; background: var(--ma-accent-soft); color: var(--ma-accent-ink); font-size: 0.55rem; font-weight: 800; }
.ma-dashboard-empty { display: grid; place-items: center; align-content: center; min-height: 8.75rem; padding: 1rem; color: var(--ma-text-muted); text-align: center; }
.ma-dashboard-empty b { color: var(--ma-text-secondary); font-size: 0.72rem; }
.ma-dashboard-empty span { margin: 0.2rem 0 0.65rem; font-size: 0.62rem; }
.ma-dashboard-empty a { color: var(--ma-accent); font-size: 0.67rem; text-decoration: none; }

/* Persistent bottom-left Settings entry -------------------------------- */
.ma-sidebar-settings { display: flex; align-items: center; gap: 0.7rem; margin: 0 0.75rem 0.9rem; min-height: 2.75rem; padding: 0.65rem 0.8rem; border: 1px solid var(--ma-border); border-radius: 10px; background: var(--ma-surface); color: var(--ma-text-secondary); text-decoration: none; font-size: 0.78rem; font-weight: 700; }
.ma-sidebar-settings svg { width: 1.2rem; height: 1.2rem; color: var(--ma-text-muted); }
.ma-sidebar-settings:hover, .ma-sidebar-settings.is-active { color: var(--ma-text); border-color: var(--ma-border-strong); background: var(--ma-surface-hover); }
.ma-sidebar-settings.is-active svg { color: var(--ma-accent); }
.ma-sidebar-settings-menu { margin-bottom: 0.9rem; }
.ma-sidebar-settings-menu .ma-sidebar-settings { margin-bottom: 0; }
.ma-sidebar-settings-submenu { display: grid; gap: 0.2rem; margin: 0.35rem 0.75rem 0; padding-left: 1.3rem; }
.ma-sidebar-settings-submenu a { padding: 0.42rem 0.65rem; border-left: 1px solid var(--ma-border); color: var(--ma-text-muted); font-size: 0.68rem; font-weight: 650; text-decoration: none; }
.ma-sidebar-settings-submenu a:hover, .ma-sidebar-settings-submenu a.is-active { border-left-color: var(--ma-accent); background: var(--ma-surface); color: var(--ma-text); }
.ma-sidebar-settings-submenu a { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.ma-sidebar-settings-submenu a span, .ma-sidebar-utility-links small { padding: 0.12rem 0.32rem; border: 1px solid var(--ma-border); border-radius: 0.28rem; color: var(--ma-text-secondary); font-size: 0.55rem; line-height: 1; }
.ma-sidebar-utility-links { display: grid; gap: 0.2rem; margin: auto 0.75rem 0.7rem; padding-top: 0.75rem; border-top: 1px solid var(--ma-border); }
.ma-sidebar-utility-links a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.55rem; padding: 0.5rem 0.55rem; border-radius: 0.5rem; color: var(--ma-text-secondary); font-size: 0.7rem; font-weight: 650; text-decoration: none; }
.ma-sidebar-utility-links a:hover, .ma-sidebar-utility-links a.is-active { background: var(--ma-surface); color: var(--ma-text); }
.ma-sidebar-utility-links svg { width: 1rem; height: 1rem; color: var(--ma-text-muted); }
.ma-sidebar-utility-links a:hover svg, .ma-sidebar-utility-links a.is-active svg { color: var(--ma-accent); }

/* Persistent AI assistant ------------------------------------------------ */
.ma-ai-assistant-bubble { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40; display: flex; align-items: center; gap: 0.55rem; min-height: 3rem; padding: 0.7rem 0.9rem; border: 1px solid var(--ma-border); border-radius: 999px; background: var(--ma-surface); box-shadow: var(--ma-shadow-overlay); color: var(--ma-text); font-size: 0.72rem; font-weight: 750; text-decoration: none; }
.ma-ai-assistant-bubble:hover { transform: translateY(-2px); box-shadow: var(--ma-shadow-overlay); }
.ma-ai-assistant-bubble svg { width: 1.25rem; height: 1.25rem; color: var(--ma-accent); }

@media (max-width: 640px) {
    .ma-ai-assistant-bubble { right: 0.85rem; bottom: 0.85rem; width: 3rem; padding: 0; justify-content: center; }
    .ma-ai-assistant-bubble span { display: none; }
}

/* Settings hub ---------------------------------------------------------- */
.ma-settings-hub { display: grid; gap: 0.9rem; }
.ma-settings-hub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
.ma-settings-hub-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.8rem; align-items: start; padding: 1rem; }
.ma-settings-icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 1px solid var(--ma-border); border-radius: 10px; background: var(--ma-accent-soft); color: var(--ma-accent); font-size: 1rem; }
.ma-settings-hub-card h2 { margin: 0; color: var(--ma-text); font-size: 0.9rem; font-weight: 800; }
.ma-settings-hub-card p { margin: 0.25rem 0 0; color: var(--ma-text-muted); font-size: 0.68rem; }
.ma-settings-card-actions, .ma-access-note, .ma-password-form { grid-column: 2; }
.ma-settings-card-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.35rem; }
.ma-access-note { color: var(--ma-text-muted); font-size: 0.67rem; }
.ma-password-form { display: grid; gap: 0.6rem; margin-top: 0.35rem; }
.ma-password-form label { display: grid; gap: 0.25rem; color: var(--ma-text-secondary); font-size: 0.65rem; }
.ma-password-form input { width: 100%; border: 1px solid var(--ma-border); border-radius: 8px; background: var(--ma-surface); color: var(--ma-text); padding: 0.55rem 0.65rem; }
.ma-password-form button { justify-self: start; }

@media (max-width: 900px) {
    .ma-dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ma-quick-launch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .ma-dashboard-grid, .ma-settings-hub-grid { grid-template-columns: 1fr; }
    .ma-dash-panel.is-wide { grid-column: auto; }
    .ma-control-actions { align-items: stretch; flex-direction: column; }
    .ma-webbuilder-settings, .ma-webbuilder-config-list { grid-template-columns: 1fr; }
    .ma-webbuilder-settings label:nth-child(3), .ma-webbuilder-settings button { grid-column: auto; }
    .ma-webbuilder-newpage { flex-direction: column; }
}
@media (max-width: 500px) {
    .ma-dashboard-metrics, .ma-quick-launch { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .ma-settings-grid,
    .ma-modules-grid { grid-template-columns: 1fr; }
    .ma-setting-card header { flex-direction: column; }
}

.ma-ai-ideas { margin-top: 0.5rem; padding-top: 0.8rem; border-top: 1px solid var(--ma-border); }
.ma-ai-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.ma-ai-ideas .ma-help { margin-top: 0.5rem; color: var(--ma-text-muted); font-size: 0.7rem; line-height: 1.45; }
.ma-ai-ideas-pending, .ma-ai-ideas-failed { display: flex; align-items: center; gap: 0.6rem; color: var(--ma-text-secondary); font-size: 0.75rem; }
.ma-ai-ideas-failed { flex-wrap: wrap; }
.ma-ai-ideas-pending button, .ma-ai-ideas-failed button { border: 1px solid var(--ma-border); border-radius: 7px; background: var(--ma-surface); color: var(--ma-text); padding: 0.3rem 0.6rem; font-size: 0.68rem; cursor: pointer; }
.ma-spinner { display: inline-block; width: 0.85rem; height: 0.85rem; border: 2px solid var(--ma-border); border-top-color: var(--ma-accent); border-radius: 50%; animation: ma-spin 0.7s linear infinite; }
@keyframes ma-spin { to { transform: rotate(360deg); } }
.ma-ai-ideas-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.ma-ai-ideas-head button { border: 0; background: transparent; color: var(--ma-text-muted); cursor: pointer; font-size: 0.72rem; }
.ma-ai-ideas-results { display: grid; gap: 0.55rem; }
.ma-ai-idea-card { display: grid; gap: 0.4rem; padding: 0.7rem; }
.ma-ai-idea-card img { display: block; width: 100%; max-height: 15rem; border-radius: 7px; object-fit: cover; }
.ma-ai-idea-card strong { color: var(--ma-text); font-size: 0.8rem; }
.ma-ai-idea-card p { color: var(--ma-text-secondary); font-size: 0.72rem; line-height: 1.4; }
.ma-ai-idea-card .ma-ai-image-direction { color: var(--ma-text-muted); font-style: italic; }
.ma-ai-idea-card small { color: var(--ma-text-muted); font-size: 0.65rem; }
.ma-ai-idea-card button { justify-self: start; border: 1px solid var(--ma-border); border-radius: 7px; background: var(--ma-surface); color: var(--ma-text); padding: 0.35rem 0.6rem; font-size: 0.7rem; cursor: pointer; }
.ma-ai-complete { display: grid; gap: 0.45rem; border: 1px solid var(--ma-accent-line); border-radius: 9px; background: var(--ma-accent-soft); padding: 0.75rem; }
.ma-ai-complete strong { color: var(--ma-text); font-size: 0.8rem; }
.ma-ai-complete p { color: var(--ma-text-secondary); font-size: 0.72rem; line-height: 1.5; }
.ma-ai-complete button { justify-self: start; }
.ma-ai-chat { display: grid; gap: 0.7rem; margin-top: 0.9rem; padding: 0.8rem; }
.ma-ai-chat-head div { display: grid; gap: 0.2rem; }
.ma-ai-chat-head strong { color: var(--ma-text); font-size: 0.85rem; }
.ma-ai-chat-head span, .ma-ai-chat-send small { color: var(--ma-text-muted); font-size: 0.68rem; line-height: 1.4; }
.ma-ai-chat label { display: grid; gap: 0.3rem; color: var(--ma-text-secondary); font-size: 0.7rem; font-weight: 700; }
.ma-ai-chat textarea { width: 100%; border: 1px solid var(--ma-border); border-radius: 9px; background: var(--ma-surface); color: var(--ma-text); padding: 0.65rem 0.7rem; line-height: 1.5; resize: vertical; }
.ma-ai-chat textarea:focus { border-color: var(--ma-accent); outline: 3px solid var(--ma-focus); }
.ma-ai-chat-history { display: grid; gap: 0.45rem; max-height: 15rem; overflow-y: auto; }
.ma-ai-chat-history article { display: grid; gap: 0.3rem; border-left: 2px solid var(--ma-border); padding-left: 0.6rem; }
.ma-ai-chat-history p { color: var(--ma-text-secondary); font-size: 0.7rem; line-height: 1.45; }
.ma-ai-chat-history p strong { display: inline-block; min-width: 2.2rem; margin-right: 0.35rem; color: var(--ma-text); }
.ma-ai-chat-history p.is-error { color: var(--ma-danger-ink); }
.ma-ai-chat-send { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.ma-ai-chat-send small { max-width: 38rem; }
.ma-social-image-preview { display: grid; gap: 0.35rem; margin: 0; }
.ma-social-image-preview img { display: block; width: min(100%, 42rem); max-height: 24rem; border: 1px solid var(--ma-border); border-radius: 9px; object-fit: cover; }
.ma-social-image-preview figcaption { color: var(--ma-text-muted); font-size: 0.65rem; }
@media (max-width: 640px) {
    .ma-ai-chat-send { align-items: stretch; flex-direction: column; }
}

/* MyAgents consistency additions */
.ma-edit-grid .is-full { grid-column: 1 / -1; }
.ma-edit-grid .is-full textarea { min-height: 10rem; resize: vertical; }
.ma-button.is-compact { padding: .32rem .55rem; min-height: auto; font-size: .68rem; }
.ma-post-title-link { padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.ma-post-title-link:hover strong, .ma-post-title-link:focus-visible strong { color: var(--ma-accent); text-decoration: underline; }
.ma-dashboard-metric-link { display: block; color: inherit; text-decoration: none; min-width: 0; }
.ma-dashboard-metric-link article { height: 100%; transition: transform .15s ease, border-color .15s ease; }
.ma-dashboard-metric-link:hover article, .ma-dashboard-metric-link:focus-visible article { transform: translateY(-2px); border-color: var(--ma-accent); }
.ma-global-controls { display: flex; flex-wrap: wrap; gap: .65rem; }
.agent-product-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: clamp(1rem, 2vw, 1.5rem) !important; }
@media (max-width: 720px) { .agent-product-grid { grid-template-columns: 1fr !important; gap: 1rem !important; } }

.ma-page-help-link { display: flex; justify-content: flex-end; margin: 0 0 .45rem; }
.ma-page-help-link a { color: var(--ma-accent); font-size: .72rem; font-weight: 700; text-decoration: none; }
.ma-page-help-link a:hover { text-decoration: underline; }
.ma-help-layout { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 1.25rem; }
.ma-help-topics { display: grid; align-content: start; gap: .35rem; }
.ma-help-topics a { padding: .55rem .7rem; border-radius: 8px; color: var(--ma-text-secondary); text-decoration: none; }
.ma-help-topics a.is-active,.ma-help-topics a:hover { background: var(--ma-surface-hover); color: var(--ma-text); }
.ma-help-content { padding: 1.2rem; }
@media(max-width:760px){.ma-help-layout{ grid-template-columns: 1fr; }.ma-help-topics{ grid-template-columns: repeat(2,minmax(0,1fr)); }}

/* Shared controls -------------------------------------------------------- */
select.ma-input { background-repeat: no-repeat; background-position: right .75rem center; padding-right: 2.25rem; }
.ma-agent-card > header > div { min-width: 0; }
.ma-agent-card .ma-badge { flex-shrink: 0; width: auto; min-width: max-content; white-space: nowrap; overflow: visible; }
.ma-row-actions { display: flex; flex-wrap: wrap; gap: .35rem; min-width: 0; }
.ma-row-actions .ma-button { font-size: .75rem; min-height: 2rem; }
.ma-social-tabs { flex-wrap: wrap; overflow: visible; }
.ma-social-tabs button { flex-shrink: 0; }
.ma-social-table { min-width: 0; table-layout: auto; }
.ma-social-table td { overflow-wrap: anywhere; }
.ma-social-table-wrap, .ma-agents-page { min-width: 0; max-width: 100%; }
.ma-dashboard-metrics article a { display: grid; gap: .25rem; color: inherit; text-decoration: none; }
.ma-dashboard-metrics article a:focus-visible { outline: 2px solid var(--ma-accent); outline-offset: 5px; }
.fi-body select option { background-color: var(--ma-surface); color: var(--ma-text); }

/* ==========================================================================
   Shared surfaces
   One recipe each for cards, tiles and board columns. Component rules above
   set layout only; these set the surface so every screen matches the
   Website Builder card (.ma-webbuilder-card).
   ========================================================================== */

/* Cards: white, soft border, rounded, one subtle shadow. */
:is(.ma-dash-panel, .ma-setting-card, .ma-module-card, .ma-settings-hub-card, .ma-webbuilder-card, .ma-agent-card,
    .ma-log-stat, .ma-inline-editor, .ma-pipeline-cards > article, .ma-social-view-picker, .ma-task-section,
    .ma-social-panel, .ma-fallback-card, .ma-social-table-wrap, .ma-help-content, .ma-day-card, .ma-ai-chat,
    .ma-ai-idea-card, .ma-social-view-controls, .ma-unavailable-summary) {
    border: 1px solid var(--ma-border);
    border-radius: var(--ma-radius);
    background: var(--ma-surface);
    box-shadow: var(--ma-shadow-card);
    color: var(--ma-text);
}

/* Tiles, columns and feature boxes: the muted tone, no shadow. */
:is(.ma-pipeline-lane, .ma-planner-board > section, .ma-social-kanban-column, .ma-week-health > button,
    .ma-dashboard-metrics article, .ma-quick-launch a, .ma-webbuilder-hero, .ma-workspace-bar, .ma-logo-preview,
    .ma-webbuilder-config-list > div) {
    border: 1px solid var(--ma-border);
    border-radius: var(--ma-radius);
    background: var(--ma-surface-muted);
    box-shadow: var(--ma-shadow-none);
    color: var(--ma-text);
}

/* Cards that sit inside a card or column do not add a second shadow. */
:is(.ma-dash-panel, .ma-setting-card, .ma-task-section, .ma-social-panel, .ma-pipeline-lane, .ma-planner-board > section, .ma-social-kanban-column)
    :is(.ma-dash-panel, .ma-setting-card, .ma-agent-card, .ma-pipeline-cards > article, .ma-day-card, .ma-ai-idea-card, .ma-inline-editor) {
    box-shadow: var(--ma-shadow-none);
}

.ma-pipeline-lane, .ma-planner-board > section { padding: 1rem; }
:is(.ma-pipeline-cards > article, .ma-planner-board article, .ma-inline-editor, .ma-dash-panel, .ma-setting-card) { padding: 1rem; }
:is(.ma-pipeline-board, .ma-planner-board, .ma-week-health) { gap: 1rem; padding: 0.25rem 0.15rem 1rem; }
.ma-pipeline-cards { gap: 1rem; }
.ma-planner-board article + article { margin-top: 0; }
:is(.ma-social-page, .ma-social-workflow) { gap: 1.5rem; }
.ma-inline-editor { margin-block: 1rem; }
.ma-editor-actions { border: 0; background: transparent; }
:is(.ma-social-filters, .ma-overview-summary) { border: 0; background: transparent; }
.ma-dash-panel :is(header, a, li, .ma-dash-list > *) { border-color: var(--ma-border); }
.ma-webbuilder-hero .ma-eyebrow, .ma-workspace-bar .ma-eyebrow { color: var(--ma-accent-ink); }
.ma-webbuilder-card > header span { color: var(--ma-text-muted); }
.ma-logo-preview { border-style: dashed; color: var(--ma-accent); }
.ma-dashboard-metric-link:hover article, .ma-dashboard-metric-link:focus-visible article { border-color: var(--ma-border-strong); box-shadow: var(--ma-shadow-raised); }

/* Board cards: titles lead, actions recede. */
:is(.ma-pipeline-cards article > button, .ma-planner-board article button, .ma-overview-head button, .ma-social-filters button) {
    border: 1px solid var(--ma-border);
    border-radius: var(--ma-radius-control);
    background: var(--ma-surface);
    color: var(--ma-text);
    box-shadow: none;
}
.ma-planner-board .ma-pipeline-cards > article > .ma-kanban-task-title,
.ma-pipeline-cards article > .ma-post-title-link {
    border: 0; background: transparent; color: var(--ma-text); padding: 0; text-align: left; line-height: 1.5;
}
:is(.ma-task-title, .ma-social-kanban-card > a) { color: var(--ma-text); }
.ma-post-title-link:hover strong, .ma-post-title-link:focus-visible strong { color: var(--ma-accent); text-decoration: underline; }
.ma-pipeline-empty { border-color: var(--ma-border-strong); }
.ma-pipeline-cards article > .ma-publish-now, .ma-social-kanban-card > .ma-publish-now { justify-self: start; }
:is(.ma-main-content, .fi-main) :is(img.ma-post-image, .ma-pipeline-cards img) { border-radius: var(--ma-radius-control); }

/* Social week: one colour for every day; status shows in the text only. */
.ma-week-health > button { border-top-width: 1px; }
.ma-week-health > button b { color: var(--ma-warning-ink); }
.ma-week-health > .is-covered b { color: var(--ma-success-ink); }
.ma-week-health > .is-gap b { color: var(--ma-danger-ink); }
.ma-week-health > .is-selected { border-color: var(--ma-accent); box-shadow: 0 0 0 1px var(--ma-accent); outline: 0; }

/* Social views keep a quiet grey for their selected filters and states. */
:is(.ma-social-workflow, .ma-social-views) :is(.ma-new-idea, .ma-overview-head button.is-primary, .ma-social-filters button.is-active, .ma-social-tabs button.is-active, .ma-social-view-switcher button.is-active) {
    border-color: var(--ma-border-strong);
    background: var(--ma-surface-muted);
    color: var(--ma-text);
}

/* Secondary actions on cards. */
:is(.ma-agent-actions button, .ma-publish-now, .ma-new-idea) {
    border: 1px solid var(--ma-border-strong);
    border-radius: var(--ma-radius-control);
    background: var(--ma-surface);
    color: var(--ma-accent-hover);
}
:is(.ma-agent-actions button, .ma-publish-now, .ma-new-idea):hover { background: var(--ma-surface-hover); }
.ma-agent-actions button.is-danger { color: var(--ma-danger-ink); }

/* Selected tabs and navigation. */
:is(.ma-help-topics a.is-active, .ma-help-topics a:hover, .ma-social-tabs .is-active, .ma-webbuilder-nav .is-active,
    .ma-sidebar-settings:hover, .ma-sidebar-settings.is-active, .ma-sidebar-settings-submenu a.is-active, .ma-sidebar-utility-links a.is-active) {
    background: var(--ma-accent-soft);
    color: var(--ma-accent-ink);
    box-shadow: inset 0 0 0 1px var(--ma-accent-line);
}
:is(.ma-sidebar-workspace-control, .ma-social-tabs button, .ma-tab) { border-radius: var(--ma-radius-control); }

/* Chips. */
:is(.ma-setting-card header > span, .ma-fallback-card b, .ma-channel, .ma-priority.is-normal) {
    border: 1px solid var(--ma-accent-line);
    border-radius: 999px;
    background: var(--ma-accent-soft);
    color: var(--ma-accent-ink);
}
.ma-priority, .ma-deadline-badge { border-radius: 999px; }

/* Workspace Health (Global dashboard) ------------------------------------ */
.ma-global-workspaces > header { background: var(--ma-surface); }
.ma-global-workspace-head { background: var(--ma-surface-muted); border-bottom: 1px solid var(--ma-border); color: var(--ma-text-muted); }
.ma-global-workspace-row { background: var(--ma-surface); border-bottom: 1px solid var(--ma-border); }
.ma-global-workspace-row:hover { background: var(--ma-surface-hover); }
.ma-global-workspace-row > strong { color: var(--ma-text); font-variant-numeric: tabular-nums; }
.ma-global-module-list .fi-badge, .ma-global-workspace-row > .fi-badge { justify-self: start; white-space: nowrap; }

/* Logs page --------------------------------------------------------------- */
.ma-log-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 200px)); gap: .75rem; margin-bottom: 1rem; }
.ma-log-stat { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: .75rem; max-width: 200px; padding: .75rem .85rem; }
.ma-log-stat span { color: var(--ma-text-muted); font-size: .72rem; font-weight: 700; }
.ma-log-stat strong { color: var(--ma-text); font-size: 1.05rem; }
.ma-log-stat.is-error strong { color: var(--ma-danger); }
.ma-log-filters { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)) minmax(220px, 1.5fr); gap: .75rem; align-items: end; margin-bottom: 1rem; }
.ma-log-filters label { display: grid; gap: .3rem; min-width: 0; }
.ma-log-filters label > span { color: var(--ma-text-muted); font-size: .68rem; font-weight: 700; }
.ma-log-filters select,
.ma-log-filters input { width: 100%; min-height: 2.35rem; border: 1px solid var(--ma-border-strong); border-radius: var(--ma-radius-control); background: var(--ma-surface); color: var(--ma-text); padding: .5rem .65rem; }
.ma-log-filters select:focus,
.ma-log-filters input:focus { border-color: var(--ma-accent); outline: 2px solid var(--ma-focus); }
@media (max-width: 1100px) { .ma-log-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ma-log-stats { grid-template-columns: 1fr; } .ma-log-stat { max-width: none; } .ma-log-filters { grid-template-columns: 1fr; } }

/* Settings hub ------------------------------------------------------------ */
.ma-settings-icon { border-color: var(--ma-border); background: var(--ma-surface-muted); color: var(--ma-accent); }
.ma-settings-hub-card h2 { color: var(--ma-text); }
.ma-settings-hub-card p, .ma-access-note { color: var(--ma-text-muted); }

/* Authentication branding is scoped to the login and password-reset pages. */
.fi-body:has(.ma-login-brand) {
    --ma-page-bg: #f3f7fc;
    --ma-border: #d9e4ef;
    --ma-border-strong: #c5d4e4;
    --ma-text: #142d4e;
    --ma-text-secondary: #415771;
    --ma-text-muted: #5b6f87;
    --ma-accent: #0876da;
    --ma-accent-hover: #075eb1;
    background:
        radial-gradient(ellipse at 15% 15%, rgb(46 182 245 / .14), transparent 52%),
        radial-gradient(ellipse at 90% 85%, rgb(109 103 234 / .09), transparent 48%),
        var(--ma-page-bg);
}

.fi-simple-layout:has(.ma-login-brand) {
    min-height: 100svh;
    padding: 24px 16px;
}

.fi-simple-main:has(.ma-login-brand) {
    width: 100%;
    max-width: 460px;
    margin: 24px 0;
    padding: 36px;
    border: 1px solid var(--ma-border);
    border-radius: 24px;
    background: var(--ma-surface);
    box-shadow: 0 24px 80px rgb(22 53 90 / .1);
    --tw-ring-shadow: 0 0 #0000;
}

.ma-login-brand {
    margin-bottom: 20px;
    text-align: center;
}

.ma-login-logo {
    position: relative;
    width: calc(50% - 16px);
    margin-inline: auto;
}

.ma-login-logo img {
    display: block;
    width: 100%;
    height: auto;
}

.ma-login-logo .ma-login-wordmark {
    display: none;
}

.fi-simple-page:has(.ma-login-brand) .fi-simple-header .fi-logo {
    display: none;
}

.fi-simple-page:has(.ma-login-brand) .fi-simple-header-heading {
    color: var(--ma-text);
    font-size: 1.625rem;
    letter-spacing: -.025em;
}

.fi-simple-page:has(.ma-login-brand) .fi-input-wrp {
    background: var(--ma-page-bg);
}

.fi-simple-page:has(.ma-login-brand) .fi-input {
    min-height: 46px;
    color: var(--ma-text);
    font-size: .9375rem;
}

.fi-simple-page:has(.ma-login-brand) .fi-btn[type="submit"] {
    min-height: 48px;
    font-size: .9375rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgb(8 118 218 / .16);
}

@media (max-width: 480px) {
    .fi-simple-main:has(.ma-login-brand) { padding: 28px 22px; border-radius: 20px; }
    .ma-login-logo { width: calc(50% - 12px); }
}

/* Agent Plugins: upload row, compact metadata row and actions on each installed plugin card. */
.ma-plugin-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; font-size: 0.8rem; }
.ma-plugin-upload label { color: var(--ma-text-secondary); font-weight: 600; }
.ma-plugin-upload input[type=file] { color: var(--ma-text-secondary); font-size: 0.75rem; }
.ma-plugin-upload p { flex-basis: 100%; margin: 0; font-size: 0.75rem; }
.ma-plugin-hint { margin: 0.75rem 0; color: var(--ma-text-secondary); font-size: 0.75rem; }
.ma-plugin-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; margin-bottom: 0.75rem; color: var(--ma-text-secondary); font-size: 0.72rem; }
.ma-plugin-meta code { color: var(--ma-text); font-size: 0.7rem; }
.ma-plugin-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Task status badges match the board columns. */
.ma-badge.is-status.is-todo { background: var(--ma-neutral-soft); color: var(--ma-neutral-ink); }
.ma-badge.is-status.is-in_progress { background: var(--ma-accent-soft); color: var(--ma-accent-ink); }
.ma-badge.is-status.is-blocked { background: var(--ma-danger-soft); color: var(--ma-danger-ink); }
.ma-badge.is-status.is-ai_working { background: var(--ma-info-soft); color: var(--ma-info-ink); }
.ma-badge.is-status.is-review { background: var(--ma-warning-soft); color: var(--ma-warning-ink); }
.ma-badge.is-status.is-done { background: var(--ma-success-soft); color: var(--ma-success-ink); }

/* AI Agents catalogue search and filters. */
.ma-agent-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 0.6rem; margin: 0.75rem 0; }
.ma-agent-filters label { display: grid; gap: 0.25rem; color: var(--ma-text-secondary); font-size: 0.68rem; font-weight: 600; }
.ma-agent-filters label.is-search { flex: 1 1 14rem; }
.ma-agent-filters input, .ma-agent-filters select { min-height: 2.1rem; border: 1px solid var(--ma-border-strong); border-radius: var(--ma-radius-sm); background: var(--ma-surface); color: var(--ma-text); font-size: 0.75rem; padding: 0.35rem 0.6rem; }
.ma-agent-filter-count { margin-left: auto; color: var(--ma-text-secondary); font-size: 0.7rem; }

/* Keep destructive and secondary actions behind an explicit menu. */
.ma-action-menu { position: relative; display: inline-block; }
.ma-action-menu > summary { cursor: pointer; list-style: none; white-space: nowrap; }
.ma-action-menu > summary::-webkit-details-marker { display: none; }
.ma-action-menu-items { position: absolute; right: 0; top: 100%; z-index: 50; min-width: 160px; padding: 8px; display: grid; gap: 8px; background: var(--ma-surface); border: 1px solid var(--ma-border); border-radius: var(--ma-radius-sm); box-shadow: var(--ma-shadow-overlay); }
.ma-action-menu:not([open]) > .ma-action-menu-items { display: none; }
.ma-action-menu-items > button { white-space: nowrap; text-align: left; }

/* Pop-up editors. */
.ma-social-editor-head button { border: 1px solid var(--ma-border-strong); border-radius: var(--ma-radius-control); background: var(--ma-surface); color: var(--ma-text-muted); }
.ma-social-editor-head button:hover { border-color: var(--ma-accent-line); background: var(--ma-accent-soft); color: var(--ma-accent-ink); }
.ma-edit-media > span { display: block; margin-bottom: 0.3rem; color: var(--ma-text-muted); font-size: 0.6875rem; }

/* Bottom-left Settings entry. */
.ma-sidebar-settings { border-color: var(--ma-border); background: var(--ma-surface); color: var(--ma-text-muted); box-shadow: none; }
.ma-sidebar-settings svg { color: currentColor; }
.ma-sidebar-settings:hover, .ma-sidebar-settings.is-active { border-color: var(--ma-accent-line); }

/* Collapsed menu rail (desktop): narrow 72px rail, every icon 20px in a 44px rounded target, even 6px gaps. */
@media (min-width: 1024px) {
    .fi-sidebar:not(.fi-sidebar-open) { width: 4.5rem; }
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-header { justify-content: center; padding-inline: 0; }
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav { align-items: center; gap: 1rem; padding: 1rem 0; scrollbar-width: none; }
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav::-webkit-scrollbar { display: none; }
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav-groups { width: 100%; margin: 0; gap: 0.375rem; align-items: center; }
    .fi-sidebar:not(.fi-sidebar-open) :is(.fi-sidebar-group, .fi-sidebar-group-items) { width: 100%; gap: 0.375rem; align-items: center; }
    .fi-sidebar:not(.fi-sidebar-open) :is(.fi-sidebar-group-btn, .fi-sidebar-group-dropdown-trigger-btn, .fi-sidebar-item-btn) { width: 2.75rem; height: 2.75rem; padding: 0; justify-content: center; border-radius: 12px; }
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav :is(.fi-sidebar-item-icon, .fi-sidebar-group-btn svg, .fi-dropdown-trigger svg, li svg) { width: 1.25rem; height: 1.25rem; }
    /* Workspace switcher becomes a 44px square with a building icon; the select still works. */
    .fi-sidebar:not(.fi-sidebar-open) .ma-sidebar-workspace { width: 2.75rem; height: 2.75rem; padding: 0; border-radius: 12px; background: var(--ma-surface); border: 1px solid var(--ma-border-strong); overflow: hidden; }
    .fi-sidebar:not(.fi-sidebar-open) .ma-sidebar-workspace-label,
    .fi-sidebar:not(.fi-sidebar-open) .ma-sidebar-workspace-chevron { display: none; }
    .fi-sidebar:not(.fi-sidebar-open) .ma-sidebar-workspace-control { margin: 0; height: 100%; }
    .fi-sidebar:not(.fi-sidebar-open) .ma-sidebar-workspace select { height: 2.75rem; padding: 0; color: transparent; background: center / 1.25rem no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%235a6f88'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21'/%3E%3C/svg%3E"); }
    .fi-sidebar:not(.fi-sidebar-open) .ma-sidebar-workspace select option { color: var(--ma-text); }
    /* Settings entry: same 44px square, centred. */
    .fi-sidebar:not(.fi-sidebar-open) .ma-sidebar-settings-menu { display: flex; justify-content: center; margin-inline: 0; }
    .fi-sidebar:not(.fi-sidebar-open) .ma-sidebar-settings { width: 2.75rem; height: 2.75rem; min-height: 0; margin: 0 auto 0.9rem; padding: 0; justify-content: center; border-radius: 12px; }
    .fi-sidebar:not(.fi-sidebar-open) .ma-sidebar-settings svg { width: 1.25rem; height: 1.25rem; }
    .fi-sidebar:not(.fi-sidebar-open) .ma-sidebar-settings > :not(svg) { display: none; }
}

/* Keep form help next to its title, using Filament's native hint tooltip. */
.ma-inline-field-help .fi-fo-field-label-ctn {
    justify-content: flex-start;
    column-gap: 0.375rem;
}

.ma-inline-field-help .fi-fo-field-label-ctn > .fi-sc {
    flex: 0 0 auto;
    justify-content: flex-start;
}

/* Layout helpers for custom page markup (Filament 5 no longer ships general utility classes). */
.ma-stack { display: grid; gap: 1rem; }
.ma-stack.is-tight { gap: 0.75rem; }
.ma-stack.is-loose { gap: 1.5rem; }
.ma-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.ma-inline.is-loose { gap: 1.5rem; }
.ma-field { display: grid; gap: 0.35rem; min-width: 0; }
.ma-field-row { display: flex; align-items: flex-start; gap: 0.5rem; }
.ma-field-row > .ma-field { flex: 1 1 auto; }
.ma-field-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.ma-field-head > label { color: var(--ma-text); font-size: 0.875rem; font-weight: 500; }
.ma-check-label { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ma-text); font-size: 0.875rem; }
.ma-check-label.is-strong { font-weight: 500; }
.ma-field-help { color: var(--ma-text-muted); font-size: 0.75rem; }
.ma-field-error { color: var(--ma-danger); font-size: 0.8125rem; }
.ma-help-icon { display: inline-flex; color: var(--ma-text-muted); cursor: help; }
.ma-help-icon .fi-icon { width: 1.25rem; height: 1.25rem; }

/* Help articles rendered from Markdown. */
.ma-prose { color: var(--ma-text-secondary); font-size: 0.9375rem; line-height: 1.7; }
.ma-prose > :first-child { margin-top: 0; }
.ma-prose :is(h1, h2, h3, h4) { color: var(--ma-text); font-weight: 700; line-height: 1.3; }
.ma-prose h1 { margin: 0 0 1rem; font-size: 1.5rem; }
.ma-prose h2 { margin: 1.75rem 0 0.75rem; font-size: 1.2rem; }
.ma-prose h3 { margin: 1.5rem 0 0.5rem; font-size: 1rem; }
.ma-prose :is(p, ul, ol, table, pre, blockquote) { margin: 0 0 1rem; }
.ma-prose :is(ul, ol) { padding-left: 1.25rem; }
.ma-prose ul { list-style: disc; }
.ma-prose ol { list-style: decimal; }
.ma-prose li + li { margin-top: 0.35rem; }
.ma-prose a { color: var(--ma-accent); text-decoration: underline; }
.ma-prose strong { color: var(--ma-text); font-weight: 600; }
.ma-prose code { border-radius: 4px; background: var(--ma-surface-muted); padding: 0.1rem 0.3rem; font-size: 0.85em; }
.ma-prose pre { overflow-x: auto; border: 1px solid var(--ma-border); border-radius: var(--ma-radius-sm); background: var(--ma-surface-muted); padding: 0.75rem; }
.ma-prose blockquote { border-left: 3px solid var(--ma-border-strong); padding-left: 1rem; color: var(--ma-text-muted); }
.ma-prose table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.ma-prose :is(th, td) { border-bottom: 1px solid var(--ma-border); padding: 0.45rem 0.6rem; text-align: left; }
.ma-prose th { background: var(--ma-surface-muted); color: var(--ma-text); }

/* Destination drafts share the editor's fields and controls. */
.ma-ghl-drafts { margin-block: 24px; padding-block: 20px; border-block: 1px solid var(--ma-border, #d1d5db); }
.ma-ghl-drafts-head { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 16px; }
.ma-ghl-drafts-head > div { flex: 1 1 280px; }
.ma-ghl-drafts h3, .ma-ghl-drafts h4 { font-weight: 600; margin-bottom: 8px; }
.ma-ghl-draft-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; margin-top: 16px; }
.ma-ghl-draft-card { min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--ma-border, #d1d5db); border-radius: 12px; }
.ma-ghl-draft-card label { display: flex; flex-direction: column; gap: 6px; }
.ma-ghl-draft-card textarea, .ma-ghl-draft-card select { width: 100%; border: 1px solid var(--ma-border, #9ca3af); border-radius: 8px; padding: 8px 12px; background: transparent; color: inherit; }
.ma-ghl-draft-card .ma-button { white-space: normal; min-height: 40px; }
.ma-ghl-draft-image { width: 100%; height: auto; border-radius: 8px; }
.ma-ghl-draft-caption { white-space: pre-wrap; overflow-wrap: anywhere; }
.ma-ghl-draft-card .ma-help { overflow-wrap: anywhere; }

/* Dedicated social composer: existing admin controls, editor left and preview right. */
.ma-social-editor.ma-social-editor-page { width: 100%; min-width: 0; max-height: none; overflow: visible; box-shadow: none; border: 0; background: transparent; }
.ma-composer-heading { display: flex; gap: 24px; align-items: center; margin-bottom: 20px; }
.ma-composer-heading h2 { flex: 1; font-size: 1rem; font-weight: 600; overflow-wrap: anywhere; }
.ma-composer-columns { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.ma-composer-columns > * { min-width: 0; }
.ma-composer-main { display: grid; gap: 16px; min-width: 0; }
.ma-composer-panel { padding: 24px; border: 1px solid var(--ma-border); border-radius: var(--ma-radius-control); background: var(--ma-surface); min-width: 0; }
.ma-composer-panel h3 { font-weight: 600; margin-bottom: 12px; }
.ma-composer-channels { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.ma-composer-channels legend { font-size: .875rem; font-weight: 600; margin-bottom: 4px; }
.ma-composer-channels label { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-size: .875rem; }
.ma-composer-channels input { width: 20px; height: 20px; accent-color: var(--ma-accent); }
.ma-composer-selection-help { margin-block: 8px 20px; }
.ma-social-editor-page .ma-edit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ma-social-editor-page .ma-edit-grid .is-wide { grid-column: 1 / -1; }
.ma-social-editor-page .ma-edit-grid label > span { font-size: .875rem; }
.ma-social-editor-page .ma-edit-grid textarea { min-height: 0; }
.ma-composer-tabs { display: flex; gap: 16px; overflow-x: auto; margin-block: 12px 20px; border-bottom: 1px solid var(--ma-border); }
.ma-composer-tabs button { flex-shrink: 0; min-height: 44px; padding: 8px 0; border-bottom: 2px solid transparent; color: var(--ma-text-secondary); font-size: .875rem; }
.ma-composer-tabs button.is-active { color: var(--ma-accent-ink); border-bottom-color: var(--ma-accent-ink); font-weight: 600; }
.ma-composer-tabs button:focus-visible, .ma-composer-options > summary:focus-visible, .ma-composer-channels input:focus-visible { outline: 2px solid var(--ma-accent-ink); outline-offset: 2px; }
.ma-composer-preview { position: sticky; top: 88px; padding: 20px; max-height: calc(100dvh - 112px); overflow-y: auto; border-left: 1px solid var(--ma-border); min-width: 0; overflow-wrap: anywhere; }
.ma-composer-preview > h3 { font-weight: 600; }
.ma-composer-preview-card { border: 1px solid var(--ma-border); border-radius: var(--ma-radius-control); background: var(--ma-surface); padding: 16px; }
.ma-composer-preview-card h3 { font-size: .875rem; font-weight: 600; margin-bottom: 8px; }
.ma-composer-preview img { width: 100%; height: auto; max-height: 480px; object-fit: contain; margin-block: 16px; }
.ma-composer-empty { display: grid; place-items: center; min-height: 180px; color: var(--ma-text-muted); }
.ma-composer-details { border-top: 1px solid var(--ma-border); padding-top: 16px; }
.ma-composer-details summary, .ma-composer-options > summary { min-height: 44px; cursor: pointer; font-weight: 600; }
.ma-composer-options[open] > summary { margin-bottom: 16px; }
.ma-composer-footer { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 12px; padding: 16px; margin-top: 24px; background: var(--ma-surface); border-top: 1px solid var(--ma-border-strong); }
.ma-composer-footer > span { flex: 1; }
.ma-social-editor-page .ma-button { min-height: 44px; }
.ma-social-editor-page input:not([type=checkbox]), .ma-social-editor-page textarea, .ma-social-editor-page select { font-size: 16px; }
.ma-social-editor-page .ma-ghl-drafts { border: 0; padding: 0; margin: 0; }
.ma-social-editor-page .ma-ghl-draft-image { max-height: 480px; object-fit: contain; }
@media (max-width: 1100px) {
    .ma-composer-columns { grid-template-columns: minmax(0, 1fr); }
    .ma-composer-preview { position: static; max-height: none; overflow-y: visible; border-left: 0; border-top: 1px solid var(--ma-border); padding-inline: 0; }
}
@media (max-width: 767px) {
    .ma-composer-heading { flex-direction: column; align-items: start; gap: 12px; }
    .ma-social-editor-page .ma-edit-grid { grid-template-columns: minmax(0, 1fr); }
    .ma-composer-panel { padding: 16px; }
    .ma-composer-footer { position: static; padding-inline: 0; }
    .ma-composer-channels { flex-direction: column; gap: 4px; }
}