/* ==========================================================================
   GalilAI redesign — phase 1: global layer.

   Everything here is gated behind `body.rd`, which is only set when the
   redesign flag is on. With the flag off this file must be completely inert:
   a rule that misses the `body.rd` prefix is a bug, not a style choice.

   The `body.rd` prefix is also what wins the cascade. The app's own stylesheet
   is an inline <style> inside the creator markup, so it comes *after* this file
   in document order and would win every specificity tie. Prefixing adds one
   class and puts us ahead of its single-class rules. Where it uses !important
   (it does, in ~70 places), we have to match it.

   The base theme is Bootstrap 5.3, whose components are driven by --bs-*
   custom properties. That is why most of this file remaps variables instead of
   restyling elements: it reaches every button, card, badge and modal at once
   without touching a line of markup.
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   Declared on `body.rd` rather than :root so they don't leak when the flag is
   off. Descendants inherit them normally.
   ========================================================================== */

body.rd {
    /* Brand */
    --rd-accent: #5B2EE0;
    --rd-accent-strong: #4A24C4;
    --rd-accent-hi: #7A4FFF;
    --rd-accent-soft: #F1ECFF;
    --rd-accent-soft-hi: #E5DBFF;
    --rd-accent-line: #DED2F7;
    --rd-accent-ink: #4A2FA8;

    /* Neutrals. No pure black anywhere — the dark neutral is a deep purple,
       the same one the generated posts already use. */
    --rd-ink: #241733;
    --rd-ink-deep: #1B0F2B;
    --rd-muted: #6F6884;
    --rd-faint: #9B95A8;
    --rd-hairline: #ECE9F2;
    --rd-canvas: #EEEBF5;
    --rd-surface: #FFFFFF;
    --rd-sunken: #F8F7FB;
    --rd-segment: #F2F0F7;

    /* State tints. Washed backgrounds with a dark readable text pair, replacing
       the saturated orange/blue/red currently in use. */
    --rd-pending-bg: #FDF1E3;   --rd-pending-fg: #8A6414;
    --rd-scheduled-bg: #E9F0FB; --rd-scheduled-fg: #2F5A94;
    --rd-published-bg: #E7F4EC; --rd-published-fg: #1C6B46;
    --rd-new-bg: #FDEAE5;       --rd-new-fg: #B8442A;
    --rd-danger-bg: #FBEAE7;    --rd-danger-fg: #A5372A;

    /* Radius scale, derived from a single value. */
    --rd-radius: 20px;
    --rd-radius-inner: 16px;
    --rd-radius-micro: 12px;
    --rd-radius-badge: 5px;
    --rd-radius-pill: 999px;

    /* Elevation. The grey canvas does the separating; the shadow is only
       material. Never a large diffuse blur, and never together with a border. */
    --rd-shadow: 0 1px 2px rgba(36, 23, 51, .06),
                 0 6px 16px -12px rgba(36, 23, 51, .35);
    --rd-shadow-pop: 0 2px 6px rgba(36, 23, 51, .08),
                     0 30px 60px -30px rgba(36, 23, 51, .5);
    --rd-shadow-raised: 0 1px 2px rgba(36, 23, 51, .08);

    /* Spacing. One value per role, on every screen. */
    --rd-pad-content: 24px;
    --rd-pad-card: 22px;
    --rd-gap-card: 18px;
    /* Distance from the header band to the first block of content. Its own
       value because it is the one gap that has to read identically on every
       page — an inconsistency there is visible when switching sections. */
    --rd-gap-top: 10px;

    /* Bootstrap token remap. The theme ships a complete --bs-* set that its own
       CSS reads but the app never did; pointing them at the tokens above is the
       cheapest reach into components we never touch directly. */
    --bs-primary: #5B2EE0;
    --bs-primary-rgb: 91, 46, 224;
    --bs-link-color: #5B2EE0;
    --bs-link-hover-color: #4A24C4;
    --bs-body-color: #6F6884;
    --bs-heading-color: #241733;
    --bs-border-color: #ECE9F2;
    --bs-border-radius: 12px;
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: 16px;
    --bs-border-radius-xl: 20px;
}


/* ==========================================================================
   2. SHELL AND CANVAS
   ========================================================================== */

/* The lilac-grey content background. `.bg-white` on <body> is a Bootstrap
   utility carrying !important, so this needs !important too — it wins on
   specificity, not on order. */
body.rd.bg-white {
    background-color: var(--rd-canvas) !important;
}

body.rd {
    color: var(--rd-ink);
}

/* The marketing hero above the app. Its title and description are already
   hidden once logged in, but the container still holds its vertical padding,
   leaving a gap between the header and the app.

   The second selector covers the logged-out flow: once posts exist on screen the
   pitch has done its job, and a full-height "Editor Mágico" above them pushes the
   actual result below the fold. `.parent-item` is only in the DOM once a post has
   been generated — measured as 0 elements on the landing before generating — so it
   reads as "there is something to look at now". */
body.rd.logged-in #header-creator-top,
body.rd:has(.parent-item) #header-creator-top {
    display: none !important;
}

/* The section tabs live inside this container, which is sized by its content —
   so their left edge landed anywhere from 24px to 358px depending on which page
   was open, and the whole nav appeared to jump as you moved between sections.
   A stable width pins them. `.small-container` is the sign-up state, which is
   deliberately narrow and must keep its own width. */
body.rd .ideas-container:not(.small-container) {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

/* Content gutter. The wrapper carries an inline `padding: 0px 20px`, which
   only !important can override. */
body.rd .editor-wrapper {
    padding-left: var(--rd-pad-content) !important;
    padding-right: var(--rd-pad-content) !important;
}


/* ==========================================================================
   3. HEADER — three stacked rows reading as one white band

   The rows come from three different places: the logo and module selector live
   in a server-rendered navbar, while the account list and the section tabs are
   two adjacent <ul> siblings inside the app. Nothing is moved; they are only
   painted so the seams disappear.
   ========================================================================== */

body.rd .navbar.navbar-default {
    background-color: var(--rd-surface);
    box-shadow: none;
    border-bottom: 0;
    position: sticky;
    top: 0;
    z-index: 1030;
    padding-top: 12px;
    /* Tight at the bottom: the account row sits directly below with no margin
       between them, so this padding and its own were stacking into one large
       empty band across the top of every page. */
    padding-bottom: 4px;
}

body.rd .navbar.navbar-default .navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
}

/* Module selector pill. */
body.rd .mod-badge {
    background: var(--rd-accent-soft);
    border: 0;
    border-radius: var(--rd-radius-pill);
    color: var(--rd-accent);
    font-size: .84rem;
    font-weight: 700;
    padding: .42rem .95rem;
}

body.rd .mod-badge:hover {
    background: var(--rd-accent-soft-hi);
}

/* Account row and section tabs: shared band treatment.
   `> ul.nav-tabs:not(.main-tabs)` is the account row — the two lists are
   adjacent siblings, and this separates them without adding a class. */
body.rd .ideas-container > ul.nav-tabs:not(.main-tabs),
body.rd .ideas-container > ul.main-tabs {
    background: var(--rd-surface);
    border-bottom: 0;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
    margin-top: 0 !important;
}

/* Account row: right-aligned pills. The markup carries
   `justify-content-center` and an inline `margin-bottom`, so both need
   overriding by force. */
body.rd .ideas-container > ul.nav-tabs:not(.main-tabs) {
    justify-content: center !important;
    align-items: center;
    gap: 8px;
    padding-top: 2px;
    padding-bottom: 2px;
    margin-bottom: 0 !important;
    text-align: center !important;
}

/* With more than one account these were all identical grey pills, so nothing
   said which one you were actually working in. The current account stays a
   solid chip; the others read as quiet switch targets. */
body.rd .ideas-container > ul.nav-tabs:not(.main-tabs) .nav-link {
    background: transparent;
    border: 0;
    border-radius: var(--rd-radius-pill);
    color: var(--rd-muted);
    font-size: .82rem;
    font-weight: 600;
    padding: .4rem .9rem;
    margin: 0;
}

body.rd .ideas-container > ul.nav-tabs:not(.main-tabs) .nav-link:hover {
    background: var(--rd-segment);
    color: var(--rd-ink);
}

body.rd .ideas-container > ul.nav-tabs:not(.main-tabs) .nav-link.active {
    background: var(--rd-segment);
    color: var(--rd-ink);
    font-weight: 700;
    box-shadow: none;
}

/* No status dot here. It came from the reference mockup, but nothing in the app
   computes it: it was hardcoded green for every account regardless of whether
   the network is actually connected. On the dashboard it sat directly above the
   notice saying the account is not ready to publish, asserting the opposite. A
   light that is always green is worse than no light. */

/* "add account" reads as an empty slot, so it gets the dashed treatment. */
body.rd .ideas-container > ul.nav-tabs:not(.main-tabs) > li:last-child .nav-link {
    background: transparent;
    border: 1.5px dashed var(--rd-accent-line);
    color: var(--rd-accent);
    font-weight: 700;
}

/* Section tabs: pills, and the bottom padding the active pill needs so it stops
   touching the edge of the band and looking clipped. */
body.rd .ideas-container > ul.main-tabs {
    gap: 4px;
    padding-top: 4px;
    padding-bottom: 10px;
    margin-bottom: var(--rd-gap-top) !important;
}

body.rd .main-tabs .nav-link {
    border: 0;
    border-radius: var(--rd-radius-pill);
    color: var(--rd-muted);
    font-size: .88rem;
    font-weight: 600;
    padding: .5rem 1.05rem;
    margin-bottom: 0;
}

/* The icons stay. The spec asks for them to go, but its reason is that the app
   was falling back to box glyphs; these are real icons and they carry real
   recognition value across six sections. They inherit the link colour, so they
   go muted when inactive and accent when current. */
body.rd .main-tabs .nav-link > i.mdi {
    margin-right: 6px;
    font-size: .95em;
    opacity: .9;
}

body.rd .main-tabs .nav-link:hover {
    background: var(--rd-sunken);
    color: var(--rd-ink);
}

/* Scoped through `.ideas-container` on purpose: the generic segmented-bar rule
   in section 4.4 ties with this on specificity and, coming later in the file,
   would win — painting the current section white on the white band instead of
   accent. The extra class is what keeps the active tab purple. */
body.rd .ideas-container > ul.main-tabs .nav-link.active {
    background: var(--rd-accent-soft);
    color: var(--rd-accent);
    font-weight: 700;
    box-shadow: none;
}

/* Bleed the band edge-to-edge without changing layout width. box-shadow paints
   outside the border box and clip-path trims it back vertically, so no element
   is ever wider than the viewport — the `100vw` version of this trick produces
   a horizontal scrollbar as soon as a vertical one appears.

   Desktop only: clip-path also clips descendants, which would swallow the
   mobile menu dropdown that lives inside the tab list. */
@media only screen and (min-width: 769px) {
    /* The band is painted from the tab row alone, with the spread shadow offset
       upwards so it covers the account row above it and stops exactly at the tab
       row's bottom edge. The clip then only has to trim the bottom.

       The account row must not carry a clip of its own: it now hosts the account
       menu, and clip-path clips descendants — including a dropdown, and including
       one positioned fixed. This is the same trap that would have swallowed the
       mobile menu. It gets lifted instead, so the tab row's shadow, painted later
       in sibling order, does not cover its content. */
    body.rd .ideas-container > ul.nav-tabs:not(.main-tabs) {
        position: relative;
        z-index: 1;
    }

    body.rd .ideas-container > ul.main-tabs {
        box-shadow: 0 -100vmax 0 100vmax var(--rd-surface);
        clip-path: inset(-100vmax -100vmax 0 -100vmax);
    }
}


/* ==========================================================================
   4. BOOTSTRAP COMPONENT REMAP
   ========================================================================== */

/* --- 4.1 Buttons ---------------------------------------------------------
   If it is a pill, it is clickable. Status never gets this shape (see 4.3). */

body.rd .btn {
    --bs-btn-border-radius: var(--rd-radius-pill);
    --bs-btn-font-weight: 700;
    --bs-btn-font-size: .84rem;
    --bs-btn-padding-y: .6rem;
    --bs-btn-padding-x: 1.1rem;
    --bs-btn-box-shadow: none;
    --bs-btn-focus-shadow-rgb: 91, 46, 224;
}

body.rd .btn-primary {
    --bs-btn-bg: var(--rd-accent);
    --bs-btn-border-color: var(--rd-accent);
    --bs-btn-hover-bg: var(--rd-accent-strong);
    --bs-btn-hover-border-color: var(--rd-accent-strong);
    --bs-btn-active-bg: var(--rd-accent-strong);
    --bs-btn-active-border-color: var(--rd-accent-strong);
    --bs-btn-disabled-bg: var(--rd-accent);
    --bs-btn-disabled-border-color: var(--rd-accent);
}

/* This is the app's de-facto secondary button (~260 uses), so it becomes the
   soft-filled secondary rather than an outline. Single largest visual change
   in this file. */
body.rd .btn-outline-primary {
    --bs-btn-color: var(--rd-accent-ink);
    --bs-btn-bg: var(--rd-accent-soft);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--rd-accent-ink);
    --bs-btn-hover-bg: var(--rd-accent-soft-hi);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--rd-accent-ink);
    --bs-btn-active-bg: #DCCFFF;
    --bs-btn-active-border-color: transparent;
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #9B8FC4;
    --bs-btn-disabled-bg: var(--rd-accent-soft);
    --bs-btn-disabled-border-color: transparent;
}

/* The active state has to stay loud. This class is toggled by `ng-class` in ~139
   places to mark the current format, size, media kind and so on; as a soft tint
   it was almost indistinguishable from the resting state, and unreadable once it
   sat on the canvas rather than a card. Solid accent, like it was before. */
body.rd .btn-outline-primary.active,
body.rd .btn-outline-primary:active,
body.rd .btn-check:checked + .btn-outline-primary {
    --bs-btn-bg: var(--rd-accent);
    --bs-btn-color: #fff;
    --bs-btn-border-color: var(--rd-accent);
    background-color: var(--rd-accent);
    color: #fff;
}

/* Buttons the template explicitly strips the border from are toolbar controls,
   not actions — the author's intent was flat. Filling them turned the editor
   strips into rows of glued lilac lozenges that vanish against the canvas. */
body.rd .btn-outline-primary[style*="border: 0px"],
body.rd .btn-outline-primary[style*="border:0px"] {
    --bs-btn-bg: transparent;
    --bs-btn-color: var(--rd-accent);
    --bs-btn-hover-bg: var(--rd-accent-soft);
    --bs-btn-hover-color: var(--rd-accent-ink);
}

/* `.w-100` on a flex child only sets width, which flex then shrinks by content,
   so paired buttons come out at different widths. Equalise them. */
body.rd .d-flex > .btn.w-100 {
    flex: 1 1 0;
}

body.rd .btn-outline-secondary {
    --bs-btn-color: var(--rd-ink);
    --bs-btn-bg: var(--rd-segment);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--rd-ink);
    --bs-btn-hover-bg: #E7E4EE;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--rd-ink);
    --bs-btn-active-bg: #E7E4EE;
    --bs-btn-active-border-color: transparent;
}

body.rd .btn-outline-danger {
    --bs-btn-color: var(--rd-danger-fg);
    --bs-btn-bg: var(--rd-danger-bg);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--rd-danger-fg);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--rd-danger-fg);
    --bs-btn-active-border-color: transparent;
}

body.rd .btn-link {
    --bs-btn-color: var(--rd-accent);
    --bs-btn-hover-color: var(--rd-accent-strong);
    --bs-btn-font-weight: 600;
    text-decoration: none;
}

/* Sizes. `.btn-xs` (~190 uses) and `.btn-md` set plain properties in the base
   theme rather than variables, so they need real values here or they fall back
   to whatever the minified theme happens to say. */
body.rd .btn-xs {
    font-size: .72rem;
    padding: .28rem .7rem;
}

body.rd .btn-sm {
    --bs-btn-padding-y: .42rem;
    --bs-btn-padding-x: .9rem;
    --bs-btn-font-size: .78rem;
}

body.rd .btn-md {
    --bs-btn-padding-y: .6rem;
    --bs-btn-padding-x: 1.1rem;
    --bs-btn-font-size: .84rem;
}

body.rd .btn-lg {
    --bs-btn-padding-y: .8rem;
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-font-size: .95rem;
}


/* --- 4.2 Cards -----------------------------------------------------------
   Grey canvas plus white surface plus minimal shadow. Border or shadow, never
   both; and a card inside a card never gets a shadow of its own. */

body.rd .card {
    --bs-card-border-width: 0;
    --bs-card-border-color: transparent;
    --bs-card-border-radius: var(--rd-radius);
    --bs-card-inner-border-radius: var(--rd-radius);
    --bs-card-bg: var(--rd-surface);
    --bs-card-cap-bg: var(--rd-surface);
    --bs-card-spacer-x: var(--rd-pad-card);
    --bs-card-spacer-y: var(--rd-pad-card);
    --bs-card-cap-padding-x: var(--rd-pad-card);
    --bs-card-cap-padding-y: 16px;
    box-shadow: var(--rd-shadow);
}

body.rd .card .card {
    --bs-card-bg: var(--rd-sunken);
    --bs-card-border-radius: var(--rd-radius-inner);
    --bs-card-inner-border-radius: var(--rd-radius-inner);
    --bs-card-spacer-x: 16px;
    --bs-card-spacer-y: 16px;
    box-shadow: none;
}

body.rd .card-title {
    color: var(--rd-ink);
    font-weight: 800;
    letter-spacing: -.02em;
}


/* --- 4.3 Badges ----------------------------------------------------------
   The other half of the pill rule: status is not clickable, so it never gets a
   pill. Small, uppercase, washed tint, 5px corners.

   Post status colours are chosen in JavaScript, but what it returns are
   Bootstrap background utilities — so redefining them *scoped to .badge* is
   enough, and no JavaScript has to change. The utilities carry !important, and
   the markup adds `.text-dark` on top, so both need beating. */

body.rd .badge {
    --bs-badge-border-radius: var(--rd-radius-badge);
    --bs-badge-font-size: 11px;
    --bs-badge-font-weight: 700;
    --bs-badge-padding-x: .5rem;
    --bs-badge-padding-y: .32rem;
    top: 0;
}

/* Uppercase belongs to status, not to `.badge` as a whole. The same class also
   carries user content — topic names, area names, counters — and shouting those
   back at the user is wrong: a theme they typed as "Calendário Editorial
   Automatizado" was rendering as "CALENDÁRIO EDITORIAL AUTOMATIZADO". */
body.rd .badge.bg-warning,
body.rd .badge.bg-info,
body.rd .badge.bg-success,
body.rd .badge.bg-danger {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

body.rd .badge.bg-warning { background-color: var(--rd-pending-bg) !important;   color: var(--rd-pending-fg) !important; }
body.rd .badge.bg-info    { background-color: var(--rd-scheduled-bg) !important; color: var(--rd-scheduled-fg) !important; }
body.rd .badge.bg-success { background-color: var(--rd-published-bg) !important; color: var(--rd-published-fg) !important; }
body.rd .badge.bg-danger  { background-color: var(--rd-danger-bg) !important;    color: var(--rd-danger-fg) !important; }
body.rd .badge.bg-primary { background-color: var(--rd-accent-soft) !important;  color: var(--rd-accent-ink) !important; }
body.rd .badge.bg-light   { background-color: var(--rd-segment) !important;      color: var(--rd-muted) !important; }

/* Counters inside tab bars are numbers, not status labels — they keep their
   pill and stay readable. */
body.rd .badge.rounded-pill {
    font-size: 11px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}


/* --- 4.4 Tabs ------------------------------------------------------------
   One segmented bar replaces the four different active-state mechanics the app
   currently uses for internal tabs. The two header lists opt out — they are
   handled in section 3. */

body.rd .nav-tabs {
    --bs-nav-tabs-border-width: 0;
    --bs-nav-tabs-border-color: transparent;
    --bs-nav-tabs-link-active-bg: var(--rd-surface);
    --bs-nav-tabs-link-active-color: var(--rd-ink);
    --bs-nav-tabs-link-active-border-color: transparent;
    --bs-nav-tabs-link-hover-border-color: transparent;
    border-bottom: 0;
    background: var(--rd-segment);
    /* Not a pill radius. Several of these bars carry 6+ items and wrap to two or
       three rows on narrow screens; at 999px the container renders as one giant
       stadium blob around the whole block. A panel radius survives wrapping. */
    border-radius: var(--rd-radius-inner);
    padding: 3px;
    gap: 2px;
    display: inline-flex;
    flex-wrap: wrap;
    vertical-align: middle;
}

body.rd .nav-tabs .nav-link {
    border: 0;
    border-radius: var(--rd-radius-pill);
    margin-bottom: 0;
    color: var(--rd-muted);
    font-size: .84rem;
    font-weight: 600;
    padding: .45rem 1rem;
}

body.rd .nav-tabs .nav-link:hover {
    color: var(--rd-ink);
}

body.rd .nav-tabs .nav-item.show .nav-link,
body.rd .nav-tabs .nav-link.active {
    background: var(--rd-surface);
    color: var(--rd-ink);
    font-weight: 700;
    box-shadow: var(--rd-shadow-raised);
}

body.rd .nav-pills {
    --bs-nav-pills-border-radius: var(--rd-radius-pill);
    --bs-nav-pills-link-active-bg: var(--rd-accent);
    --bs-nav-pills-link-active-color: #fff;
}

/* The header rows are .nav-tabs too, so they have to opt out of the segmented
   container. Section 3 supplies their own look — including the vertical padding
   the active pill needs, which is why this must not use the `padding` shorthand:
   it ties with section 3 on specificity and, coming later, would win. */
body.rd .ideas-container > ul.nav-tabs {
    background: var(--rd-surface);
    border-radius: 0;
    display: flex;
}

/* The posts filter bar hand-rolled an underline indicator that fights the
   segmented style. */
body.rd .post-filter-tabs .nav-link.active::after {
    display: none;
}

body.rd .post-filter-tabs .nav-link.active {
    color: var(--rd-ink);
}


/* --- 4.5 Popovers, dropdowns and modals ---------------------------------- */

body.rd .dropdown-menu {
    --bs-dropdown-border-width: 0;
    --bs-dropdown-border-color: transparent;
    --bs-dropdown-border-radius: var(--rd-radius);
    --bs-dropdown-inner-border-radius: var(--rd-radius);
    --bs-dropdown-box-shadow: var(--rd-shadow-pop);
    --bs-dropdown-padding-x: 6px;
    --bs-dropdown-padding-y: 6px;
    --bs-dropdown-link-color: var(--rd-ink);
    --bs-dropdown-link-hover-bg: var(--rd-accent-soft);
    --bs-dropdown-link-hover-color: var(--rd-accent);
    --bs-dropdown-link-active-bg: var(--rd-accent-soft);
    --bs-dropdown-link-active-color: var(--rd-accent);
    box-shadow: var(--rd-shadow-pop);
    /* The theme squares off the top corners so menus can butt against a tab. */
    border-top-left-radius: var(--rd-radius);
    border-top-right-radius: var(--rd-radius);
}

/* Menus read as far airier than before, and it was not the padding — that was
   already down to 5.6px. The theme carries a second `.dropdown-item` rule with
   `line-height: 28px`, a 28px line box around a 14px font, and this rule wins on
   specificity but never set line-height, so those 28px survived untouched.
   Measured: 39px per item before, ~30px after. */
body.rd .dropdown-item {
    border-radius: var(--rd-radius-micro);
    font-weight: 500;
    font-size: .84rem;
    line-height: 1.4;
    padding: .35rem .6rem;
}

body.rd .module-panel {
    border: 0;
    border-radius: var(--rd-radius);
    box-shadow: var(--rd-shadow-pop);
}

body.rd .modal-content {
    --bs-modal-border-width: 0;
    --bs-modal-border-color: transparent;
    --bs-modal-border-radius: var(--rd-radius);
    --bs-modal-inner-border-radius: var(--rd-radius);
    box-shadow: var(--rd-shadow-pop);
}

body.rd .modal-header,
body.rd .modal-footer {
    border-color: var(--rd-hairline);
}


/* --- 4.6 Form controls ---------------------------------------------------
   The only components the theme styles with plain properties instead of
   variables, so these are direct rules. */

body.rd .form-control,
body.rd .form-select,
body.rd .input-group-text {
    background-color: var(--rd-sunken);
    border: 1px solid var(--rd-hairline);
    border-radius: var(--rd-radius-inner);
    color: var(--rd-ink);
    padding: 12px 14px;
}

/* A three-line box that scrolls its own content is the pattern the spec calls
   out; give the typical answer room to sit without a scrollbar. */
body.rd textarea.form-control {
    min-height: 84px;
}

body.rd .form-control:focus,
body.rd .form-select:focus {
    background-color: var(--rd-surface);
    border-color: var(--rd-accent-line);
    box-shadow: 0 0 0 3px rgba(91, 46, 224, .12);
    outline: 0;
}

body.rd .form-control::placeholder {
    color: var(--rd-faint);
}

body.rd .form-control-sm,
body.rd .form-select-sm,
body.rd .form-select-xs {
    padding: 8px 12px;
    border-radius: var(--rd-radius-micro);
    font-size: .8rem;
}

body.rd .form-label,
body.rd .col-form-label {
    color: var(--rd-ink);
    font-weight: 700;
    font-size: 13.5px;
}

body.rd .form-text {
    color: var(--rd-faint);
    font-size: 11.5px;
}

body.rd .form-check-input:checked {
    background-color: var(--rd-accent);
    border-color: var(--rd-accent);
}

body.rd .form-check-input:focus {
    border-color: var(--rd-accent-line);
    box-shadow: 0 0 0 3px rgba(91, 46, 224, .12);
}


/* --- 4.7 List groups, alerts and progress -------------------------------- */

body.rd .list-group {
    --bs-list-group-border-color: var(--rd-hairline);
    --bs-list-group-border-radius: var(--rd-radius-inner);
    --bs-list-group-active-bg: var(--rd-accent);
    --bs-list-group-active-border-color: var(--rd-accent);
    --bs-list-group-action-hover-bg: var(--rd-sunken);
}

body.rd .alert {
    --bs-alert-border-radius: var(--rd-radius-inner);
    border: 0;
}

body.rd .progress {
    --bs-progress-bg: var(--rd-segment);
    --bs-progress-bar-bg: var(--rd-accent);
    --bs-progress-border-radius: var(--rd-radius-pill);
}


/* ==========================================================================
   5. TYPOGRAPHY AND SHARED PURPLE

   Hierarchy is resolved by size, not weight — today it is the other way round.
   The family stays as the theme loads it; only the scale changes here.

   Purple reconciliation is deliberately bounded to shared primitives. The app
   also hardcodes a second purple inside screen-specific classes; unifying those
   means redesigning each screen, which is a later phase.
   ========================================================================== */

body.rd h1, body.rd h2, body.rd h3,
body.rd h4, body.rd h5, body.rd h6 {
    color: var(--rd-ink);
    letter-spacing: -.02em;
}

body.rd h3 { font-size: 20px; font-weight: 800; }
body.rd h4 { font-size: 17px; font-weight: 800; }
body.rd h5 { font-size: 15px; font-weight: 700; }

body.rd .text-muted {
    color: var(--rd-muted) !important;
}

body.rd .text-primary {
    color: var(--rd-accent) !important;
}

body.rd .bg-primary {
    background-color: var(--rd-accent) !important;
}

body.rd .text-dark {
    color: var(--rd-ink) !important;
}

/* Section labels above tile groups. */
body.rd .create-section-label {
    color: #8D86A3;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}


/* ==========================================================================
   6. MOBILE

   Only what the shell needs so it doesn't regress. The full-width section
   selector and the 1–2 column grids depend on the individual screens and come
   with them.
   ========================================================================== */

@media only screen and (max-width: 768px) {
    body.rd .editor-wrapper {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* No clip-path here, so the band is reached with matching negative margins
       instead — the mobile menu dropdown lives inside the tab list and would be
       clipped by the desktop technique. */
    body.rd .ideas-container > ul.nav-tabs:not(.main-tabs),
    body.rd .ideas-container > ul.main-tabs {
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Centred here too, matching desktop — this row was still left-aligned from
       before the desktop change. */
    body.rd .ideas-container > ul.nav-tabs:not(.main-tabs) {
        justify-content: center !important;
        flex-wrap: wrap;
    }

    /* Minimum touch target — for list-shaped controls only. This deliberately no
       longer touches `.btn`: forcing inline-flex onto every button collapsed the
       editor toolbar buttons, which stack an icon over a label with a <br> and
       need to stay block-level to do it. */
    body.rd .nav-link,
    body.rd .dropdown-item {
        min-height: 40px;
        display: flex;
        align-items: center;
    }

    body.rd .dropdown-item {
        width: 100%;
    }

    body.rd .nav-tabs {
        display: flex;
    }


    /* The app widens this container past the viewport on small screens. That was
       survivable on a white page; against the canvas it shows as content sliding
       under the right edge and a clipped left gutter. */
    body.rd .ideas-container {
        width: 100% !important;
    }
}


/* ==========================================================================
   7. LOGGED-OUT LANDING AND POST GRID

   Section 3 assumed the navbar was there to start the white header block. Logged
   out it is not: the hero sits on the canvas and the account row paints a lone
   white stripe under it, which reads as an accident. These rules close that gap
   and give the two surfaces that were left floating — the sign-up form and each
   generated post — an actual card.
   ========================================================================== */

/* --- 7.1 One continuous header block ------------------------------------- */

body.rd #header-creator-top {
    background: var(--rd-surface);
    padding-top: 28px !important;
    padding-bottom: 22px !important;
}

/* --- 7.2 The sign-up form gets a surface --------------------------------- */

/* The container is sized by its content, so the card swings between ~340px and
   ~880px depending on viewport and locale — at the narrow end the two footer
   links, laid out with `space-between`, end up reading as one run-on sentence.
   `.small-container` is set by the app exactly while the sign-up inputs are
   showing, which makes it a safe place to pin a width; it already caps at
   600px, so this only settles where inside that range the card lands. */
body.rd .ideas-container.small-container {
    width: min(460px, 100%);
}

body.rd .ideas-container > form {
    background: var(--rd-surface);
    border-radius: var(--rd-radius);
    box-shadow: var(--rd-shadow);
    padding: var(--rd-pad-card);
    /* Collapses with the band's bottom margin, so it has to use the same value
       or this page ends up lower than the others. */
    margin-top: var(--rd-gap-top);
    margin-left: auto;
    margin-right: auto;
    /* No width here. This selector catches every direct-child form, including
       the "Meu negócio" settings form, and pinning 460px on that one squeezed
       its option cards into narrow columns with the page half empty beside them.
       The sign-up width is set on `.ideas-container.small-container` instead,
       which the app only applies while the sign-up inputs are showing. */
}

/* Give them room to sit apart, and a gap so they can never touch. */
body.rd .ideas-container > form > .mt-1 {
    gap: 12px;
    flex-wrap: wrap;
}

/* --- 7.3 Input group: the addon rejoins the field ------------------------
   This markup predates Bootstrap 5: the addon is wrapped in
   `.input-group-prepend`, a class BS5 dropped. The corner-joining selectors
   therefore land on that wrapper instead of the field, which is why the "@" box
   ends up fully rounded next to a square-cornered input. Those selectors carry
   six :not() arguments worth of specificity, so re-joining by hand needs
   !important rather than a longer selector. */

body.rd .input-group > .input-group-prepend,
body.rd .input-group > .input-group-append {
    display: flex;
}

body.rd .input-group > .input-group-prepend > .input-group-text {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: 0;
}

body.rd .input-group > .input-group-prepend ~ .form-control {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: var(--rd-radius-inner) !important;
    border-bottom-right-radius: var(--rd-radius-inner) !important;
}

body.rd .input-group > .input-group-append > .input-group-text {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left: 0;
}

/* The addon is sometimes a button rather than a text span — the plan quantity
   stepper is `[- ] [ 1 ] [ +]`. Those buttons inherit the pill radius from
   section 4.1, so they detached into two lozenges with a square field wedged
   between them. Same join, applied to the button case. */
body.rd .input-group > .input-group-prepend > .btn {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: var(--rd-radius-inner) !important;
    border-bottom-left-radius: var(--rd-radius-inner) !important;
}

body.rd .input-group > .input-group-append > .btn {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: var(--rd-radius-inner) !important;
    border-bottom-right-radius: var(--rd-radius-inner) !important;
}

/* With an append following it, the field must stay square on both inner edges. */
body.rd .input-group > .input-group-prepend ~ .form-control:has(~ .input-group-append),
body.rd .input-group > .form-control:has(~ .input-group-append) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* --- 7.4 Generation toolbar ----------------------------------------------
   The textarea, the media link, the two buttons and the three secondary actions
   were laid out one under another with nothing tying them together, so they read
   as loose fragments on the canvas rather than one control.

   This container has no class of its own — only `.mb-0` and an inline max-width.
   That inline value is unique in the template, which makes the attribute
   selector the only stable hook available without touching the markup. If the
   template ever changes that number, these rules stop applying: the toolbar goes
   back to looking like the screenshot, which is a visible failure rather than a
   silent one. */

body.rd .ideas-container > div[style*="max-width:1500px"] {
    background: var(--rd-surface);
    border-radius: var(--rd-radius);
    box-shadow: var(--rd-shadow);
    padding: var(--rd-pad-card);
    /* The header band above is also white, so without a gap the two surfaces
       fuse into one shapeless block. `.mb-0` is !important. */
    margin-top: var(--rd-gap-card);
    margin-bottom: var(--rd-gap-card) !important;
    text-align: left;
}

body.rd .ideas-container > div[style*="max-width:1500px"] textarea.form-control {
    min-height: 76px;
}

/* The row holding "use my images" and the personalised toggle. */
body.rd .ideas-container > div[style*="max-width:1500px"] textarea.form-control + div {
    margin-top: 12px;
    font-size: .82rem;
}

/* The action pair. `.gap-1` is a utility carrying !important. */
body.rd .ideas-container > div[style*="max-width:1500px"] .d-flex.gap-1 {
    gap: 10px !important;
    margin-top: 16px !important;
}

/* The three secondary actions become chips. As bare links they were the loosest
   thing on the screen; as chips they read as one group of equal-weight options,
   clearly below the two real buttons. */
body.rd .ideas-container > div[style*="max-width:1500px"] .text-center > .btn-link {
    background: var(--rd-segment);
    border-radius: var(--rd-radius-pill);
    color: var(--rd-ink);
    font-size: .78rem;
    font-weight: 600;
    padding: .45rem .95rem !important;   /* overrides an inline padding */
    margin: 14px 6px 0 0;
    text-decoration: none;
}

body.rd .ideas-container > div[style*="max-width:1500px"] .text-center > .btn-link:hover {
    background: #E7E4EE;
    color: var(--rd-ink);
}

/* Text-only, like the section tabs. */
body.rd .ideas-container > div[style*="max-width:1500px"] .text-center > .btn-link > i.mdi {
    display: none;
}

/* Left-aligned inside the card; `.text-center` is on the wrapper. */
body.rd .ideas-container > div[style*="max-width:1500px"] .text-center {
    text-align: left !important;
}

/* This media block has to live here, not up in section 6: it targets the same
   selector as the chip rule above and ties with it on specificity, so it only
   wins by coming later in the file. */
@media only screen and (max-width: 768px) {
    /* The three secondary actions are the least important control in the card,
       but at full size they wrapped onto three rows and dominated it. They are
       inline elements, so shrinking is enough to bring them back to one line —
       a flex container would also catch the button pair sharing this wrapper
       and drag it onto the same row. */
    body.rd .ideas-container > div[style*="max-width:1500px"] .text-center > .btn-link {
        font-size: .66rem;
        padding: .34rem .55rem !important;
        margin: 12px 2px 0 0;
        white-space: nowrap;
    }
}


/* --- 7.5 Generated posts become cards ------------------------------------
   `.parent-item` wraps the post image and its two action rows. Against a white
   page the missing card went unnoticed; against the canvas the actions look
   like they are lying loose on the background. */

/* No `overflow: hidden` here. In the editor this same node hosts overlays that
   sit outside its box — the element toolbar, the "more actions" menu — and
   clipping them cut the footer off and pushed the menu icon inside the artwork. */
body.rd:not(.animation-wrapper) .parent-item {
    background: var(--rd-surface);
    border-radius: var(--rd-radius);
    box-shadow: var(--rd-shadow);
    padding-bottom: 8px;
}

/* Gutters for the action rows only — the image stays flush to the card edge. */
body.rd:not(.animation-wrapper) .parent-item > .d-flex,
body.rd:not(.animation-wrapper) .parent-item > .w-100 {
    padding-left: 10px;
    padding-right: 10px;
}

/* The delete button is the only one in the row without `.w-100`, so it stays
   content-sized while the others stretch — as an icon in a pill that reads as a
   squashed blob. Give it a real square so the pill resolves to a circle. */
body.rd:not(.animation-wrapper) .parent-item .d-flex > .btn:not(.w-100) {
    flex: 0 0 auto;
    width: 30px;
    min-width: 30px;
    height: 30px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Compact the action row: these are per-post controls, not page-level actions. */
body.rd:not(.animation-wrapper) .parent-item .d-flex > .btn.w-100 {
    font-size: .7rem;
    padding: .3rem .5rem;
}

body.rd:not(.animation-wrapper) .parent-item .btn-link {
    font-size: .72rem;
}

body.rd:not(.animation-wrapper) galilai-canvas > div {
    gap: var(--rd-gap-card);
    /* Flex items stretch to the row height by default, so one tall post left
       every card beside it padded out with empty white below its buttons. */
    align-items: flex-start;
}

/* Render output needs no guard here: the `rd` class is never set when the page
   is loaded for rendering, so this whole file is inert there. What remains is
   the in-browser video preview, which absolutely-positions these nodes to
   animate them — a card would follow them around the screen. !important because
   `.is-animating` scores below the :not() above. */
body.rd.animation-wrapper .parent-item,
body.rd .is-animating .parent-item {
    background: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    padding: 0 !important;
}


/* ==========================================================================
   8. POST EDITOR — intentionally empty

   The editor runs without this layer. `views.html` removes the `rd` class while
   the editor panel is open, so nothing here would apply anyway; rules kept in
   this file would just look active while being dead.

   Why it is switched off rather than patched: the editor sizes and positions its
   toolbars with inline styles and absolute positioning, and every general rule in
   this file that touched it — button padding, fills, wrapper surfaces — collided
   with one of them. It needs its own pass, starting from a full read of
   canvas.html, not exceptions bolted onto the global layer.
   ========================================================================== */

/* ==========================================================================
   9. CORRECTIONS FROM REVIEW
   ========================================================================== */

/* A tab bar with a single item is not a segmented control — it is a panel
   heading. Wrapped in the segment container it floated above its own panel as a
   stray white pill, which is not what the markup meant. */
body.rd .nav-tabs:not(:has(> :nth-child(2))) {
    background: none;
    padding: 0;
    border-radius: 0;
    justify-content: flex-start;
    margin-bottom: 0 !important;
}

/* Sitting flush on the panel below, with only its top corners rounded, is what
   made this read as a tab before. */
body.rd .nav-tabs:not(:has(> :nth-child(2))) .nav-link.active {
    background: var(--rd-surface);
    border-radius: var(--rd-radius-micro) var(--rd-radius-micro) 0 0;
    box-shadow: none;
    color: var(--rd-ink);
}

/* Grouped buttons: section 4.1 makes the outline variant border-transparent, so
   in a group the two halves of a split button were separated by a 1px line of
   background showing through the seam. Collapse it. */
body.rd .btn-group > .btn + .btn {
    border-left-width: 0;
    margin-left: 0;
}

/* Calendar generation toolbar. Its buttons sat loose on the canvas directly
   above the day grid, with nothing marking them as one control. */
body.rd .calendar-actions {
    background: var(--rd-surface);
    border-radius: var(--rd-radius);
    box-shadow: var(--rd-shadow);
    padding: 16px;
    align-items: center;
    margin-bottom: var(--rd-gap-card);
}

/* Day-column footer: the format select and the "more actions" button sat on
   different baselines because their paddings no longer matched. */
body.rd .post-card-container .d-flex,
body.rd .calendar-col .d-flex {
    align-items: center;
}


/* ==========================================================================
   10. VERIFIED AGAINST THE LOGGED-IN APP

   Everything below was checked against the real screens rather than inferred
   from markup, so the hooks are the ones the app actually renders.
   ========================================================================== */

/* Brand settings panel. All five sub-tabs — colours, fonts, logo, profile,
   content — render inside this one form, which sat directly on the canvas with
   its controls floating loose. One hook covers the whole section. */
body.rd .branding-tab {
    background: var(--rd-surface);
    border-radius: var(--rd-radius);
    box-shadow: var(--rd-shadow);
    /* The app pins padding-left with !important, which left the content hard
       against the card edge on one side only. */
    padding: var(--rd-pad-card) !important;
    margin-bottom: var(--rd-gap-card);
}

/* The sub-tab bar is the first row inside that form; let it sit flush with the
   card's top padding instead of adding its own. */
body.rd .branding-tab > .row.mb-3 {
    margin-bottom: 14px !important;
}

/* The calendar toolbar's "edit themes / edit products" links live in a separate
   form right after the button row, so the card stopped short of them and they
   fell onto the canvas. Continue the surface across both. */
body.rd .calendar-actions {
    margin-bottom: 0;
    padding-bottom: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    /* No shadow on the upper half: it would cast onto the lower half and draw a
       visible seam straight across what should read as one card. */
    box-shadow: none;
}

body.rd .calendar-actions + form {
    background: var(--rd-surface);
    /* The form carries `.mt-1`, a utility with !important, which opened a 4px
       canvas stripe straight across the seam. */
    margin-top: 0 !important;
    border-bottom-left-radius: var(--rd-radius);
    border-bottom-right-radius: var(--rd-radius);
    box-shadow: var(--rd-shadow);
    padding: 0 16px 14px;
    margin-bottom: 8px;
}

/* Day-column footer. The format select and the "more actions" menu are inline
   blocks in different parents, so they cannot be aligned with flex — they need
   a shared baseline. The select's own bottom margin was the offset. */
body.rd .post-type-selector {
    margin-bottom: 0 !important;
    vertical-align: middle;
    min-width: 96px;
}

body.rd .calendar-col .dropdown {
    vertical-align: middle;
}


/* ==========================================================================
   11. FIXES FOUND BY MEASURING THE LIVE APP
   ========================================================================== */

/* The post-type select rendered empty. Not a colour problem: the app pins
   `height: 23px` on this control, and the generic `.form-select-xs` padding in
   section 4.6 (8px top and bottom) left barely 7px of content box for a 12.8px
   line, clipping the label out of view. Height and padding have to be set
   together. */
body.rd select.post-type-selector {
    height: 30px;
    /* Sized so the type select and "more actions" share one row: the day column
       has 169px of usable width, and at 96px the select left only 73px for an
       89px link, pushing it to a line of its own. */
    min-width: 72px;
    width: 72px;
    padding: 2px 22px 2px 8px;
    line-height: 1.3;
    font-size: .75rem;
    color: var(--rd-ink);
}

/* Trimmed to match. The link carries `.fs-6`, a utility with !important, so a
   plain font-size lost to it and the pair still overflowed by a few pixels. */
body.rd .calendar-col .dropdown > a {
    font-size: .72rem !important;
}

/* `.ms-2` puts 8px between the two, which was the last of the overflow. */
body.rd .calendar-col .dropdown.ms-2 {
    margin-left: 4px !important;
}

/* Getting-started guide. Its checklist sat straight on the canvas while every
   other section had gained a surface.

   Keyed on the inline max-width, which is unique to this panel in the template.
   The obvious selector — `.ideas-container > div > .container` — matches the
   dashboard too, and wrapped that whole page in a second card. `:has()` is no
   help either: the guide's markup is present in the DOM on every page, just
   hidden, so a structural test cannot tell them apart. */
body.rd .container[style*="max-width: 700px"] {
    background: var(--rd-surface);
    border-radius: var(--rd-radius);
    box-shadow: var(--rd-shadow);
    padding: var(--rd-pad-card);
    margin-bottom: var(--rd-gap-card);
}

/* Task rows are cards inside that card, so they take the sunken treatment
   rather than a second shadow. */
body.rd .onboarding-tasks .task-card {
    background: var(--rd-sunken);
    border: 0;
    border-radius: var(--rd-radius-inner);
    box-shadow: none;
}

/* Brand settings is wrapped in a row carrying an inline `padding: 5px`, which
   pushed this one page 5px lower than every other. Measured: 23px against 18px
   elsewhere — small, but it reads as the nav shifting when you switch sections. */
body.rd .row:has(> .branding-tab) {
    padding-top: 0 !important;
}


/* Account switcher trigger. It carries no `.active` class — the active state now
   lives on the item inside the menu — so the chip treatment is attached here. */
body.rd .ideas-container > ul.nav-tabs [data-ref="project-menu"] > .nav-link {
    background: var(--rd-segment);
    color: var(--rd-ink);
    font-weight: 700;
}

body.rd .ideas-container > ul.nav-tabs [data-ref="project-menu"] > .nav-link:hover {
    background: #E7E4EE;
}

body.rd [data-ref="project-menu"] .dropdown-menu {
    min-width: 220px;
    text-align: left;
}

body.rd [data-ref="project-menu"] .dropdown-item.active {
    background: var(--rd-accent-soft);
    color: var(--rd-accent);
    font-weight: 700;
}

/* Business shortcuts. They open a modal rather than switching the panel below,
   so they never carry `.active` — a separator and a lighter weight keep them
   from reading as sections you are currently in. */
/* The first shortcut is the one preceded by a real tab. `:first-of-type` cannot
   express this: every item here is an <li>, so it would only ever match the very
   first tab, which is not a shortcut. */
body.rd .nav-item:not([data-ref]) + [data-ref="business-shortcut"] {
    margin-left: 10px;
    padding-left: 12px;
    border-left: 1px solid var(--rd-hairline);
}

body.rd [data-ref="business-shortcut"] > .nav-link {
    font-weight: 600;
    color: var(--rd-accent);
}

body.rd [data-ref="business-shortcut"] > .nav-link:hover {
    background: var(--rd-accent-soft);
    color: var(--rd-accent-ink);
}


/* ==========================================================================
   12. CALENDAR GRID
   ========================================================================== */

/* Sunday disappeared at wide viewports. The columns are flex items sized
   `0 0 14.2857%`, and seven of them come to 1303.96px inside a 1304px row — it
   fits by four hundredths of a pixel, so sub-pixel rounding pushes the seventh
   onto the next line. It happened to survive at 1300px and not at 1600px, which
   is why it looked intermittent.

   Grid removes the arithmetic: seven equal tracks always fit, whatever the
   width. `minmax(0, …)` keeps a long post title from forcing a track wider. */
body.rd .calendar-wrapper,
body.rd .weekdays-wrapper {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    /* Both carry Bootstrap's `.row`, whose -12px side margins used to be absorbed
       by a content-sized container. Now that the container has a fixed width they
       push the grid past the viewport instead. Grid supplies its own gutters. */
    margin-left: 0;
    margin-right: 0;
}

/* These mirror the app's own breakpoints exactly — it steps the calendar down
   7 → 4 → 3 → 2 columns as the viewport narrows (views.html:1200-1219). The
   first version of this rule set seven tracks unconditionally and flattened all
   three steps, so the month stayed seven columns wide on a phone. */
@media only screen and (max-width: 800px) {
    body.rd .calendar-wrapper {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* The app hides the weekday header below this width, because the columns no
       longer map to weekdays once there are four of them. Setting `display: grid`
       above outranked that rule and brought the header back, labelling columns
       with days they do not correspond to. */
    body.rd .weekdays-wrapper {
        display: none;
    }
}

@media only screen and (max-width: 600px) {
    body.rd .calendar-wrapper {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 500px) {
    body.rd .calendar-wrapper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* The percentage basis has to go, or it fights the track sizing. */
body.rd .calendar-wrapper > .calendar-col,
body.rd .weekdays-wrapper > * {
    flex: none;
    width: auto;
    max-width: 100%;
    /* Grid items default to `min-width: auto`, i.e. min-content, so a day's
       generation panel could push the track wider than its share and spill the
       page sideways. The track is already capped by minmax(0, …); the item has
       to be told it may shrink too. */
    min-width: 0;
}

/* The divider between the toolbar card and the calendar. The card already
   separates them, so its margins were pure distance. */
body.rd .calendar-actions + form + hr {
    margin-top: 4px;
    margin-bottom: 4px;
    opacity: .5;
}

/* "Usar assuntos" wrapped onto two lines inside a day column, which turned the
   split button into a tall lozenge twice the height of everything beside it.

   Only where a column is actually wide enough to hold the label: below this the
   month is still seven columns, each around 120px, and forcing one line there
   raises the panel's min-content width until it spills the page sideways. */
@media only screen and (min-width: 1200px) {
    body.rd .calendar-col button-split .btn,
    body.rd .calendar-col .btn-group > .btn {
        white-space: nowrap;
    }
}

/* The empty-day panel could not shrink below 168px, because its tile grid is a
   hard two columns. Between 800px and about 1200px the month is still seven
   columns, each narrower than that, so the panel spilled past the last column
   and pushed the page sideways. `auto-fit` lets it fall to a single column when
   the day is narrow and go back to two when there is room, instead of holding a
   floor the layout cannot honour. */
body.rd .post-grid {
    grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
}


/* ==========================================================================
   13. APP CHROME
   ========================================================================== */

/* The marketing footer — affiliate programme, blog, cancellation policy — is
   inherited from the site layout and rendered under every app screen. Inside a
   working surface it is navigation away from the task, and it stretches every
   page by a screenful of links nobody came for. It stays on the logged-out
   landing, which is where it belongs.

   Gated on `rd-app`, not `rd`: this is a call about the app, not about the visual
   layer, so it holds inside the editor too — where the footer is just as unwanted
   even though the redesign itself is switched off there. */
body.rd-app.logged-in > .footer,
body.rd-app.logged-in .footer {
    display: none;
}



/* On a phone the toolbar's four buttons sit two per row (the markup pins them at
   49%), and the longest label — "Criar post profissional" — wrapped onto a second
   line while its neighbours stayed on one, so the row came out ragged. Measured:
   at .72rem two of the four still wrap; at .66rem all four are a single 36px line.
   Below 560px is where the 49% share stops fitting the label. */
@media only screen and (max-width: 560px) {
    body.rd .calendar-actions .btn {
        font-size: .66rem;
        padding-left: .5rem;
        padding-right: .5rem;
    }
}

/* Narrower than that, two per row cannot hold the label at any size worth
   reading — shrinking further would put it under 10px. One per row instead; the
   markup pins 49% inline, so this needs !important. */
@media only screen and (max-width: 400px) {
    body.rd .calendar-actions .btn {
        width: 100% !important;
        font-size: .7rem;
    }

    /* One of the four is a split button. Widening its inner <button> is not
       enough — the <button-split> element and its group wrap it and keep their
       own natural width, so the label still had nowhere to go. */
    body.rd .calendar-actions button-split,
    body.rd .calendar-actions button-split > .btn-group {
        /* A custom element is display:inline by default, so width alone does
           nothing to it. */
        display: flex;
        width: 100%;
    }

    body.rd .calendar-actions button-split > .btn-group > .btn:first-child {
        flex: 1 1 auto;
    }
}


/* The "access menu" control shares the tab row but is a .btn, not a .nav-link,
   so it missed the 40px minimum the tabs get and came out 5px shorter. Both are
   top-aligned in that row, so the difference showed up as the button sitting
   high rather than simply being smaller. Measured: 35px against 40px. */
body.rd .main-tabs .mobile_show > .btn {
    min-height: 40px;
    font-size: .84rem;
    padding: 7.2px 16px;
    border-color: transparent;
}


/* The colour panel's frame. `.picker-wrapper` carries a border on three sides
   with rounded bottom corners — it was drawn to hang off the bottom of the old
   attached tab, forming one tab-and-panel shape. With the section in a card and
   the tabs now a detached pill, that outline no longer joins anything and reads
   as a stray box inside the card. */
body.rd .picker-wrapper {
    border: 0;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
}


/* "Usar minhas imagens" in the generation toolbar. Removed from the surface at the
   product's request: it competes with the two real actions for a path few take, and
   the same picker is reachable from Meu negócio → Imagens. The control still exists
   and still works — only the entry point here is hidden, so this is one line to undo. */
body.rd [ng-click="selectImage()"] {
    display: none;
}