/**
 * NOTICE OF LICENSE
 *
 * This file is proprietary software and is not open source.
 * Your subscription grants you a limited, non-transferable right to use this code
 * solely as part of the Retail Media Manager platform, and only for the duration
 * of your valid subscription.
 *
 * You are not permitted to copy, redistribute, resell, lease, license, sub-license,
 * or otherwise make this code or its resources available to any third party.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file. If you require customizations, please
 * contact Corebuilt Labs for professional services.
 *
 * @author     Corebuilt Labs <info@corebuilt.com>
 * @copyright  2026 Corebuilt Labs
 * @license    Limited to use within an active subscription to Retail Media Manager
 */

/* ============================================================
   RMM Campaign Manager — Front Office Styles
   Values: rmm-advertiser-design.md 1.8 (§8.1 content width and shape, §8.3
   buttons, §8.4 fields, §8.6 badges, §8.8 alerts, §8.9 dialogs, §8.11 cards,
   §11 focus, §14 tokens) — rmmcore 0.21.0, RDEV-283 row 4.4. The census of
   the literals this file carried and what each became: rmmplatform
   .ai/items/RDEV-280-big-beautiful-build/notes/design-rules-fo.md §5.
   ============================================================ */

.campaigns-page,
.campaign-detail,
.dashboard-page,
.media-kit-page,
.product-detail-page,
.quote-page,
.rmm-account-orders,
.dialog {
    /* The --rmm-* names below are this file's aliases of the Advertiser Portal
       design system tokens (rmm-advertiser-design.md 1.8 §14; the §4.2 derived
       tokens and the §4.3 / §4.4 fixed ones). The theme declares the tokens
       (rmmtheme 0.9.x _app-tokens.scss over App\Styling\TokenEmitter's --primary);
       this file declares none of its own. Every var() carries the §14 literal as
       its fallback — for a derived token the value computed for the default
       Primary #1F4788 — so the page renders before the theme build is deployed.
       Values: rmmplatform/.ai/items/RDEV-280-big-beautiful-build/notes/design-rules-fo.md. */
    --rmm-primary:       var(--primary, #1F4788);
    --rmm-secondary:     var(--text-muted, #6B7280);        /* 1.8 §4.4: no secondary brand color */
    --rmm-accent:        var(--status-success, #198754);    /* 1.8 §8.6: accent maps to success */
    --rmm-primary-hover: var(--primary-hover, #1C407A);
    --rmm-on-primary:    var(--on-primary, #FFFFFF);
    --rmm-success:       var(--status-success, #198754);
    --rmm-info-blue:     var(--status-info-strong, #087990);
    --rmm-danger:        var(--status-danger, #DC3545);
    --rmm-danger-hover:  var(--status-danger-strong, #B02A37);
    --rmm-warning:       var(--status-warning, #FFC107);
    --rmm-warning-bg:    var(--status-warning-subtle, #FFF3CD);
    --rmm-warning-fg:    var(--status-warning-text, #664D03);

    /* Subtle tints (1.8 §8.6 badge tones, §8.8 alerts) */
    --rmm-primary-bg:    var(--primary-subtle, #EDF0F5);
    --rmm-primary-bg-strong: var(--primary-border, #BCC8DB);
    --rmm-accent-bg:     var(--status-success-subtle, #D1E7DD);
    --rmm-accent-fg:     var(--status-success-strong, #146C43);
    --rmm-danger-bg:     var(--status-danger-subtle, #F8D7DA);

    --rmm-text:          var(--text-strong, #2C3E50);
    --rmm-muted:         var(--text-muted, #6B7280);
    --rmm-faint:         var(--neutral-400, #9CA3AF);

    --rmm-surface:       var(--surface-card, #FFFFFF);
    --rmm-subtle:        var(--surface-muted, #ECEEF0);
    --rmm-border:        var(--border-subtle, #E5E7EB);
    --rmm-border-subtle: var(--neutral-100, #F3F4F6);
    --rmm-border-input:  var(--border-field, #6B7280);     /* 1.8 §8.4: neutral 500 replaces neutral 300 */

    /* Radii (1.8 §8.1: sm 4 segments and chips / md 8 buttons, fields, menus / lg 16 cards and dialogs) */
    --rmm-radius:        var(--radius-md, 8px);
    --rmm-radius-lg:     var(--radius-lg, 16px);
    --rmm-radius-sm:     var(--radius-sm, 4px);

    /* Elevation (1.8 §8.1) and focus (§11: halo on controls, never on fields) */
    --rmm-shadow-card:   var(--shadow-card, 0 1px 3px rgba(0, 0, 0, 0.1));
    --rmm-shadow-hover:  var(--shadow-card-hover, 0 4px 12px rgba(31, 71, 136, 0.12));
    --rmm-shadow-pop:    var(--shadow-pop, 0 8px 24px rgba(17, 24, 39, 0.12));
    --rmm-shadow-modal:  var(--shadow-dialog, 0 12px 40px rgba(0, 0, 0, 0.28));
    --rmm-shadow-focus:  0 0 0 4px var(--focus-ring, rgba(31, 71, 136, 0.4));
    --rmm-backdrop:      var(--backdrop, rgba(16, 20, 28, 0.45));

    /* Motion */
    --rmm-ease:          var(--ease-standard, cubic-bezier(0.2, 0, 0, 1));
    --rmm-dur-fast:      var(--dur-fast, 120ms);
    --rmm-dur-base:      var(--dur-base, 180ms);

    /* Control heights */
    --rmm-control-h:     var(--control-h, 40px);
    --rmm-control-h-sm:  var(--control-h-sm, 32px);
    --rmm-control-h-lg:  var(--control-h-lg, 48px);

    /* Campaign / line-item bar tones: active = Primary, scheduled = muted neutral
       (the retired secondary blue, 1.8 §4.4), completed = success. */
    --rmm-st-active:     var(--primary, #1F4788);
    --rmm-st-scheduled:  var(--text-muted, #6B7280);
    --rmm-st-completed:  var(--status-success, #198754);

    --rmm-focus-ring:    var(--focus-ring, rgba(31, 71, 136, 0.4));

    /* 1.8 §7.1: Inter, self-hosted by the theme (@font-face in assets/css/theme.css). */
    font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
    font-size: 16px;
    line-height: 1.6;
    color: var(--rmm-text);
}

/* Muted contexts (rmmtheme 0.9.1, D1): where this file paints --rmm-subtle
   (= --surface-muted) under muted text, the theme raises --text-muted to
   neutral 600 on the same selectors. --rmm-muted is re-aliased here, on the
   context element, so every --rmm-muted consumer inside re-resolves to that
   value — the page-root alias above resolves at the root and would keep
   neutral 500. One-consumer contexts (.rmm-detail__banner--muted, the
   checkout split meta and card count, the premium calendar day) read
   --text-muted directly instead. */
.items-table tfoot,
.items-table tbody tr:hover,
.attn-row:hover,
.add-summary,
.addprod-result:hover,
.pdp-hero {
    --rmm-muted: var(--text-muted, #6B7280);
}

/* Primary buttons on module pages follow the design's navy primary. */
.campaigns-page .btn-primary,
.campaign-detail .btn-primary,
.dashboard-page .btn-primary,
.media-kit-page .btn-primary,
.product-detail-page .btn-primary,
.quote-page .btn-primary,
.dialog .btn-primary {
    --bs-btn-bg: var(--rmm-primary);
    --bs-btn-border-color: var(--rmm-primary);
    --bs-btn-color: var(--rmm-on-primary);
    --bs-btn-hover-bg: var(--rmm-primary-hover);
    --bs-btn-hover-border-color: var(--rmm-primary-hover);
    --bs-btn-hover-color: var(--rmm-on-primary);
    --bs-btn-active-bg: var(--rmm-primary-hover);
    --bs-btn-active-border-color: var(--rmm-primary-hover);
    --bs-btn-active-color: var(--rmm-on-primary);
    border-radius: var(--rmm-radius);
    font-weight: 600;
}

/* 0.29.0 (RDEV-299 phase 3 review C1; rmm-advertiser-design.md 1.8 §8.3, §11): a link drawn as a primary button keeps
   the button's text colour in every state. The theme's .btn / .btn-primary sit in its cascade layers, so any unlayered
   `a { color }` (stsitebuilder's post-global-setting-css-1.css loads on portal pages) beat them and painted Primary text
   on the Primary fill: the focused skip links ("Skip to main content", "Back to top") were an empty box and an empty
   campaign's "+ Add products" a blank button. This rule is unlayered and outranks a bare `a` from any bundle position. */
a.btn.btn-primary,
a.btn.btn-primary:link,
a.btn.btn-primary:visited {
    color: var(--bs-btn-color, var(--on-primary, #FFFFFF));
}

a.btn.btn-primary:hover,
a.btn.btn-primary:focus,
a.btn.btn-primary:focus-visible {
    color: var(--bs-btn-hover-color, var(--on-primary, #FFFFFF));
}

a.btn.btn-primary:active {
    color: var(--bs-btn-active-color, var(--on-primary, #FFFFFF));
}

/* 0.29.0 (RDEV-299 Phase 3 review F9; rmm-advertiser-design.md 1.8 §8.3 md): a theme .btn drawn as a page's main action
   — "New campaign" on the campaign list, "+ Add products" in an empty campaign — at 40 px, padding 0 18 px, the 14/600
   label and the 8 px icon gap, as the other primary buttons of the portal (the theme's .btn was 38 px, 16/600). */
.btn.rmm-btn--md {
    height: var(--rmm-control-h);
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    border-radius: var(--rmm-radius);
}

/* A button whose label is preceded by a glyph (design: lucide plus on
   "New campaign", arrow on the dashboard action cards). */
.btn-icon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ----- Buttons -----------------------------------------------
   Buttons use the theme's Bootstrap classes (.btn, .btn-primary,
   .btn-secondary, .btn-danger, .btn-outline-secondary, .btn-sm …)
   so they inherit the shop's button styling. JS-hook classes
   (.order-btn, .bulk-remove-btn, .add-btn) and ids stay
   on the elements for behaviour only — not for styling. Add a
   targeted override class only when a specific button needs it. */

/* The theme's .btn-secondary is gray-on-gray here; 1.8 §8.3's secondary is
   transparent, text --primary, border --border-field (neutral 500), with a
   --primary-subtle wash on hover and 45 % opacity disabled. Override via
   Bootstrap 5.3 button vars, scoped to our pages and dialogs. */
.campaigns-page .btn-secondary,
.campaign-detail .btn-secondary,
.media-kit-page .btn-secondary,
.product-detail-page .btn-secondary,
.quote-page .btn-secondary,
.dashboard-page .btn-secondary,
.dialog .btn-secondary {
    --bs-btn-bg: transparent;
    --bs-btn-color: var(--rmm-primary);
    --bs-btn-border-color: var(--rmm-border-input);
    --bs-btn-hover-bg: var(--rmm-primary-bg);
    --bs-btn-hover-color: var(--rmm-primary);
    --bs-btn-hover-border-color: var(--rmm-border-input);
    --bs-btn-active-bg: var(--rmm-primary-bg);
    --bs-btn-active-color: var(--rmm-primary);
    --bs-btn-active-border-color: var(--rmm-border-input);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-color: var(--rmm-primary);
    --bs-btn-disabled-border-color: var(--rmm-border-input);
    --bs-btn-disabled-opacity: 0.45;
    border-radius: var(--rmm-radius);
    font-weight: 600;
}


.columns-container{
    margin-top: 16px;
    
}
/* ----- Checkbox --------------------------------------------- */

.check-wrap {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

/* Bootstrap ships .form-check-input with margin-top: .25em for its own
   block-level .form-check layout. Inside this inline-flex row that margin is
   dead weight AND breaks the centring: align-items centres the MARGIN box, so
   the 4px top margin pushed the control ~6px below the label's centre
   (measured, consolidated findings 4.4). Zero it and let align-items do it. */
.check-wrap .form-check-input {
    margin-top: 0;
    margin-bottom: 0;
    flex: none;
}

/* Checkboxes use the theme's .form-check-input. */

/* Ruling 2026-08-20: a non-draft line-item row (quoted/ordered) renders NO
   checkbox at all — it cannot be requested for quotation. This spacer stands
   where the checkbox would, so draft and locked rows keep their text aligned
   on both the Plan and List tabs. 1em tracks .form-check-input's own em-based
   width in each row's font (measured 16px on Plan, 14px on List). */
.item-check-spacer {
    flex: 0 0 auto;
    display: inline-block;
    width: 1em;
    height: 1em;
}

/* ----- Status badges (design Badge: soft tint + 1px border, pill) ------ */

/* 1.8 §8.6 Badge: pill, `small` 600 (13/18), padding 3px 10px, gap 5px, no
   border; tones are a subtle fill with the text-on-subtle colour. */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    padding: 3px 10px;
    border-radius: var(--radius-pill, 999px);
    border: 0;
    white-space: nowrap;
    line-height: 18px;
}

/* Author display beats the UA [hidden] rule — restore it (the modal header
   badge toggles via the hidden attribute). */
.status-pill[hidden] { display: none; }

/* Neutral tone is the base/default — unknown and custom pre-order statuses
   (rmmorderflow codes "s<id>") deliberately render this way. */
.status-pill--li {
    background: var(--neutral-100, #F3F4F6);
    color: var(--neutral-600, #4B5563);
}

/* Campaign Active / Inactive pill (detail header). DS Badge tone=accent/neutral. */
.status-pill--active {
    background: var(--rmm-accent-bg);
    color: var(--rmm-accent-fg);
}

.status-pill--inactive {
    background: var(--neutral-100, #F3F4F6);
    color: var(--neutral-600, #4B5563);
}

/* Scheduled / pending — amber, from the shared warning design tokens (a fixed
   status tone, not a literal color). Used by the dashboard "Recent campaigns"
   status column for campaigns whose flight has not started yet. */
.status-pill--scheduled {
    background: var(--rmm-warning-bg);
    color: var(--rmm-warning-fg); /* 1.8 §8.6 warning tone: text on subtle */
}

/* ============================================================
   Campaign calendar (list page)
   ============================================================ */

.cal-topbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.cal-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-eyebrow {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--rmm-primary);
}

.page-title {
    font-size: 28px;
    font-weight: 700;
    margin: 0;
    color: var(--rmm-text);
    letter-spacing: -0.02em;
}

.page-subtitle {
    font-size: 14px;
    color: var(--rmm-muted);
    margin: 0;
}

.cal-card {
    background: var(--rmm-surface);
    border: 1px solid var(--rmm-border);
    border-radius: var(--rmm-radius-lg); /* 1.9 §8.11 cards (row 3.7) */
    box-shadow: var(--rmm-shadow-card);
    overflow: hidden;
}

.calendar-container {
    overflow-x: auto;
}

/* Fixed-year calendar (design: Gantt year view, Jan–Dec) */
.calendar {
    min-width: 1100px;
    padding: 24px;
    position: relative;
    box-sizing: border-box;
}

/* Period label — centered above the month header, inside the card (design
   campaign-list.dc.html). Tabular so the width does not jump between "2026"
   and "2026Q3" as you page. */
.cal-period {
    font-size: 14px; /* campaign-list.dc.html (row 3.7) */
    font-weight: 700;
    color: var(--rmm-text);
    text-align: center;
    padding-bottom: 10px;
    font-variant-numeric: tabular-nums;
}

/* ── Header (12 months + 13 week ticks) ──────────────────── */
.cal-months {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    border-bottom: 1px solid var(--rmm-border);
}

.cal-months .month-col {
    font-size: 13px; /* 1.9 §7.2 floor (row 3.7) */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rmm-muted);
    padding-bottom: 6px;
    padding-left: 8px;
    border-left: 1px solid var(--rmm-border-subtle);
    white-space: nowrap;
    overflow: hidden;
}

.cal-weeks {
    display: grid;
    grid-template-columns: repeat(13, 1fr);
    border-bottom: 1px solid var(--rmm-border-subtle);
}

.cal-weeks .week-col {
    font-size: 13px; /* 1.9 §7.2 floor (row 3.7) */
    color: var(--neutral-500, #6B7280);
    padding: 4px 0 6px 8px;
    font-variant-numeric: tabular-nums;
}

/* ── Body ────────────────────────────────────────────────── */
.cal-body {
    position: relative;
    padding: 20px 0 8px; /* campaign-list.dc.html (row 3.7): room for the Today label */
}

/* When schedule bands are rendered, reserve a strip at the top for their
   name labels so campaign lanes never cover them. The absolutely
   positioned bands/grid still span the full height behind everything. */
.cal-body--with-bands {
    padding-top: 26px;
}

.cal-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.grid-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
}

.grid-line--week  { background: var(--rmm-border-subtle); }
.grid-line--month { background: var(--rmm-border); }

/* Grayed-out background bands for ad-schedule slot periods (schedules
   flagged "show on year wheel"). Same layer as the grid — campaign
   lanes/bars (z-index 1) render on top; pointer-events off so the bands
   never intercept clicks meant for the bars. */
.cal-schedule-band {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(16, 24, 40, 0.06);
    z-index: 0;
    pointer-events: none;
    text-align: center;
}

/* Schedule name pinned to the top of its band. Sits in the band layer, so
   campaign bars still render above it when they overlap. */
.cal-schedule-band__label {
    display: inline-block;
    max-width: calc(100% - 8px);
    margin-top: 2px;
    padding: 1px 6px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--rmm-muted);
    background: var(--rmm-surface);
    border: 1px solid var(--rmm-border-subtle);
    border-radius: var(--radius-pill, 999px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* D572 (Uffe 2026-10-19): the Plan tab's today marker is ink as well, never red (red is for errors, D177). */
.today-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--rmm-text);
    z-index: 2;
    pointer-events: none;
}

/* 0.29.0 (RDEV-299 row 3.7, D177): the campaign calendar's today marker is a thin ink line labeled "Today"
   (campaign-list.dc.html), never red; the Plan tab keeps its own marker below. */
.cal-body .today-line {
    width: 0;
    background: none;
    border-left: 1px solid var(--rmm-text);
    z-index: 3;
}

.cal-body .today-flag {
    position: absolute;
    top: -2px;
    left: 4px;
    transform: none;
    font-size: 13px;
    line-height: 16px;
    font-weight: 600;
    color: var(--rmm-text);
    background: var(--rmm-surface);
    padding: 0 4px;
    border-radius: var(--rmm-radius-sm);
    white-space: nowrap;
}

.today-flag {
    position: absolute;
    top: -4px;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 700;
    color: var(--rmm-text);
    background: var(--rmm-surface);
    padding: 0 4px;
    z-index: 3;
    pointer-events: none;
}

.cal-lane {
    position: relative;
    height: 48px;
    z-index: 1;
}

.cal-bar {
    position: absolute;
    top: 6px;
    height: 36px;
    background: var(--rmm-st-active);
    color: var(--rmm-on-primary);
    border: none;
    border-radius: var(--radius-md, 8px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    padding: 0 12px;
    font-size: 13px; /* 1.9 §8.7: name small 600, second line small 400 (row 3.7) */
    line-height: 16px; /* two lines inside the 36 px bar */
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.12s;
    z-index: 1;
    min-width: 24px;
    box-sizing: border-box;
}

.cal-bar:hover {
    opacity: 0.9;
    text-decoration: none;
    /* The bar is an <a>, so Bootstrap's a:hover repainted the label in
       --bs-link-hover-color (#0a58ca) — blue text on the retailer primary,
       effectively illegible. This rule set opacity but never colour, so the
       link rule won. Hold the resting colour; hover changes opacity only.
       Consolidated findings §1, instance 1. */
    color: var(--rmm-on-primary);
}

.cal-bar__name {
    font-size: 13px;
    font-weight: 600;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-bar__sub {
    font-weight: 400;
    font-size: 13px;
    opacity: 0.85;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Inactive campaign (is_active = 0) — design: solid neutral-200 bar,
   strong text, no border, full opacity (design GREY bar spec). */
.cal-bar--inactive { background: var(--neutral-200, #E5E7EB); color: var(--rmm-text); }
.cal-bar--inactive:hover { color: var(--rmm-text); }

/* 0.29.0 (RDEV-299 row 3.7, D178): a bar too narrow for its text draws empty; the name and
   "manager · budget" sit beside it, to the right (campaign-list.dc.html). */
.cal-bar-label,
.cal-bar-label:hover,
.cal-bar-label:focus {
    position: absolute;
    top: 6px;
    height: 36px;
    padding-left: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    font-size: 13px;
    line-height: 18px;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    z-index: 1;
}

.cal-bar-label__name { font-weight: 600; color: var(--rmm-text); }
.cal-bar-label__sub { font-weight: 400; color: var(--rmm-muted); }

/* Phase 3 review F8: a label with no room on the right (a bar at the year's end) sits on the bar's left, right-aligned
   (front_v21.js placeBarLabels()), so it stays inside the card. */
.cal-bar-label.cal-bar-label--left {
    padding-left: 0;
    padding-right: 8px;
    align-items: flex-end;
    text-align: right;
}

/* ----- Active toggle field (create/edit campaign modals) ------ */

.field--toggle .check-wrap { gap: 8px; }
.field--toggle .form-label--inline { margin: 0; }

/* Row 4.1 review F6 (rmm-advertiser-design.md 1.8 §7.2: nothing below 13 px; small 13/18): the hint under Active in the
   New campaign dialog and Campaign settings, and every other .field-hint */
.field-hint {
    font-size: 13px;
    line-height: 18px;
    color: var(--rmm-muted);
    margin: 4px 0 0;
}

.fo-link--disabled {
    color: var(--rmm-muted);
    cursor: not-allowed;
    opacity: 0.6;
}


/* ----- Empty state (§8.8) ------------------------------------
   0.29.0 (RDEV-299 plan D67, log D706, D707; rmm-advertiser-design.md 1.8 §8.8, the EmptyState component): the ONE
   empty state of every empty list on the Advertiser Portal — centred, a 40 px Lucide icon in --neutral-400
   (.rmm-empty__icon), a group-title 16/24 600 (.rmm-empty__title), one `small` line (.rmm-empty__text) and an
   optional button. Inside a card it is bare (.rmm-empty); on its own on the page it is the card (.rmm-empty--card,
   §8.11). This file loads on every rmmcore front page (Campaigns FrontOfficeMedia), so Messages, Notifications and
   Financials use it too; it reads the design tokens directly, with the §14 literals as fallbacks, because those
   pages sit outside the --rmm-* alias roots above. The Dashboard's "Nothing needs action" check card is not an
   empty list and keeps its own drawing (.dash-empty, D707). */

.rmm-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2, 8px);
    padding: 40px 24px;
    text-align: center;
}

.rmm-empty[hidden] { display: none; }

.rmm-empty--card {
    background: var(--surface-card, #FFFFFF);
    border: 1px solid var(--neutral-200, #E5E7EB);
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-card, 0 1px 3px rgba(0, 0, 0, 0.1));
}

.rmm-empty__icon {
    flex: none;
    width: 40px;
    height: 40px;
    color: var(--neutral-400, #9CA3AF);
}

.rmm-empty__title {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--text-strong, #2C3E50);
}

.rmm-empty__text {
    margin: 0;
    max-width: 68ch;
    font-size: 13px;
    line-height: 18px;
    color: var(--text-muted, #6B7280);
}

/* RDEV-299 log D727 (Uffe 2026-10-20; rmm-advertiser-design.md 1.8 §8.3, §8.8): ONE size for an empty state's one
   button, md on every page: 40 px, padding 0 18 px, the 14/600 label. Set here, in the shared empty state, over each
   page's own button classes (0,1,1 beats a page's single size class such as .rmm-org-btn--sm and .rmm-fin-btn--sm),
   so no page's empty state can draw a smaller or larger one. */
.rmm-empty > a,
.rmm-empty > button {
    height: var(--control-h, 40px);
    padding: 0 18px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}

/* ============================================================
   Campaign detail
   ============================================================ */

.back-link {
    font-size: 0.8125rem;
    color: var(--rmm-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 14px;
}

.back-link:hover {
    color: var(--rmm-primary);
}

/* 1.8 §8.11 card: --surface-card, 1 px --border-subtle, --radius-lg, --shadow-card. */
.detail-card {
    background: var(--rmm-surface);
    border: 1px solid var(--rmm-border);
    border-radius: var(--rmm-radius-lg);
    box-shadow: var(--rmm-shadow-card);
}

.detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px; /* 1.9 §8.11 (row 3.7) */
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.detail-head__left {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.detail-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.detail-title {
    font-size: 28px; /* 1.9 §7.2 page-title (row 3.7) */
    line-height: 34px;
    font-weight: 700;
    margin: 0;
    color: var(--rmm-text);
    letter-spacing: -0.02em;
}

.detail-meta {
    font-size: 0.875rem;
    color: var(--rmm-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.dot-sep { color: var(--rmm-faint); }

.detail-stats {
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
}

/* 0.29.0 (RDEV-299 row 3.7, D185; campaign-detail.dc.html): four amounts at one size and colour, Total budget set
   apart by a 1 px rule; Ordered, Pending and Planned 40 px apart. */
.detail-stats { align-items: center; }

.stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    padding: 0 20px;
    text-align: right;
}

.stat--total { padding: 0 24px 0 0; }
.stat__rule + .stat { padding-left: 24px; }
.stat:last-child { padding-right: 0; }

.stat__rule {
    flex: none;
    width: 1px;
    height: 44px;
    background: var(--neutral-300, #D1D5DB);
}

.stat__label {
    font-size: 13px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rmm-muted);
}

.stat__value {
    font-size: 28px;
    line-height: 34px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--rmm-text);
}

/* ── Underline tabs (design: Plan / Products left, Orders right + Edit link) ── */
.detail-toolbar {
    display: flex;
    align-items: flex-end;
    gap: 28px;
    padding: 0 6px;
    border-bottom: 1px solid var(--rmm-border);
    min-height: 64px;
    margin-bottom: 12px;
}

.toggle {
    display: contents; /* tab buttons participate directly in the toolbar row */
}

.toggle__btn {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--rmm-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color var(--rmm-dur-fast) var(--rmm-ease),
        border-color var(--rmm-dur-fast) var(--rmm-ease);
}

.toggle__btn.is-active {
    color: var(--rmm-primary);
    border-bottom-color: var(--rmm-primary);
}

/* Design (current): Plan · List · Orders are all left-hand tabs; the right of
   the spacer holds the Add products and Edit campaign links. (Earlier the
   Orders tab was pulled right with `order: 1` — the design moved it back to a
   normal third tab, so no `order` override here.) */

.detail-toolbar__spacer { flex: 1; }

.detail-actions {
    display: flex;
    gap: 16px;
    align-items: center;
    order: 2;
}

/* Hairline divider between the Add products and Edit campaign links (design). */
.detail-divider {
    width: 1px;
    height: 18px;
    background: var(--rmm-border);
    align-self: flex-end;
    margin-bottom: 13px;
}

.edit-campaign-link,
.add-products-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 0 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--rmm-primary);
    cursor: pointer;
    text-decoration: none;
}

.edit-campaign-link:hover,
.add-products-link:hover { color: var(--rmm-primary-hover); }

.edit-campaign-link svg,
.add-products-link svg { width: 16px; height: 16px; }

/* ── Per-tab toolbar row (no container box, design) ──────── */
.tab-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 6px;
    min-height: 40px;
    margin-bottom: 12px;
}

.tab-toolbar__left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tab-toolbar__right {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: auto;
}

/* Phones: the Plan toolbar's right cluster (Today · zoom · Auto fit · Events · Add group)
   is wider than the viewport below ~560px; let both clusters wrap instead of overflowing
   (RDEV-277 F12 — measured at 400px: 526px of controls in a 368px toolbar, two off-screen). */
@media (max-width: 767px) {
    .tab-toolbar { flex-wrap: wrap; row-gap: 8px; }
    .tab-toolbar__right { flex-wrap: wrap; justify-content: flex-end; gap: 6px 14px; }
}

.bulk-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.selected-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--rmm-muted);
    margin-right: 4px;
}

/* Request quotation + Place order: outlined-primary, ranked equally (design) —
   white surface, brand-primary border + text, primary-subtle on hover. The
   theme paints .btn-secondary grey and .btn-primary filled; override both here
   (higher specificity than the page-level .btn-* rules above). */
.campaign-detail .bulk-actions .quotation-btn,
.campaign-detail .bulk-actions .order-btn {
    --bs-btn-bg: var(--rmm-surface);
    --bs-btn-color: var(--rmm-primary);
    --bs-btn-border-color: var(--rmm-primary);
    --bs-btn-hover-bg: var(--rmm-primary-bg);
    --bs-btn-hover-color: var(--rmm-primary);
    --bs-btn-hover-border-color: var(--rmm-primary);
    --bs-btn-active-bg: var(--rmm-primary-bg);
    --bs-btn-active-color: var(--rmm-primary);
    --bs-btn-active-border-color: var(--rmm-primary);
    --bs-btn-disabled-bg: var(--rmm-surface);
    --bs-btn-disabled-color: var(--rmm-primary);
    --bs-btn-disabled-border-color: var(--rmm-primary);
    border-radius: var(--rmm-radius);
    font-weight: 600;
}

/* Link-style toolbar buttons (Today / Auto fit / + Add phase / + Add products) */
.fo-link {
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--rmm-primary);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.fo-link:hover { color: var(--rmm-primary-hover); text-decoration: none; }

/* Zoom select, borderless (design) */
.plan-zoom {
    height: 28px;
    padding: 0 8px;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--rmm-primary);
    cursor: pointer;
}

/* Line-item status filter (Products tab) */
.li-filter-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--rmm-muted);
    margin: 0;
    white-space: nowrap;
}

/* Design: borderless toolbar select (same idiom as the Plan zoom control). */
.li-status-filter {
    height: 28px;
    padding: 0 8px;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--rmm-primary);
    cursor: pointer;
}

/* Outlined danger "Remove" (design) */
.btn-remove-outline {
    height: var(--rmm-control-h-sm);
    padding: 0 14px;
    border: 1px solid var(--rmm-danger);
    border-radius: var(--rmm-radius);
    background: var(--rmm-surface);
    font-family: inherit;
    font-size: 14px; /* log D754 (Uffe 2026-10-21): 14/600 as rmm-advertiser-design.md 1.8 §8.3 */
    font-weight: 600;
    color: var(--rmm-danger);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-remove-outline:hover:not(:disabled) { opacity: 0.85; }
.btn-remove-outline:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-remove-outline svg { width: 14px; height: 14px; }

/* Small primary in toolbars */
.tab-toolbar .btn-primary.btn-sm {
    height: var(--rmm-control-h-sm);
    padding: 0 14px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tab-toolbar .btn-primary.btn-sm svg { width: 14px; height: 14px; }

/* Toolbar/selection button icons are 14px (design). Deliberately variant- and
   container-agnostic: the rule above only matched .btn-primary, so
   .quotation-btn — a .btn-secondary — fell through it and its inline SVG (which
   carries only a viewBox, no width/height) computed to `auto`, i.e. the
   browser's default SVG box. That rendered a hugely oversized icon. Size every
   icon in these toolbars so a new button cannot hit the same gap. */
.bulk-actions .btn svg,
.tab-toolbar .btn.btn-sm svg {
    width: 14px;
    height: 14px;
    flex: none;
}

/* ── List table ──────────────────────────────────────────── */
.table-card {
    background: var(--rmm-surface);
    border: 1px solid var(--rmm-border);
    border-radius: var(--rmm-radius);
    box-shadow: var(--rmm-shadow-card);
    overflow: hidden;
}

.items-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.items-table thead th {
    /* 1.8 §8.7 table header: label role on --neutral-50 */
    text-align: left;
    font-size: 13px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rmm-muted);
    padding: 12px 16px;
    background: var(--neutral-50, #F9FAFB);
    border-bottom: 1px solid var(--rmm-border-subtle);
    white-space: nowrap;
}

.th-right { text-align: right; }
.th-check, .td-check { width: 44px; padding-right: 0 !important; }

.items-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--rmm-border-subtle);
    vertical-align: middle;
    color: var(--rmm-text);
}

.items-table tbody tr:hover { background: var(--rmm-subtle); }

.td-right { text-align: right; }

.td-product__name {
    font-weight: 700;
    color: var(--rmm-text);
}

.td-product__sub {
    font-size: 0.75rem;
    color: var(--rmm-muted);
    margin-top: 2px;
}

.td-format { color: var(--rmm-text); }

.td-attrs { font-size: 0.8125rem; }

.attr { line-height: 1.5; }
.attr__k { font-weight: 600; color: var(--rmm-text); }
.attr__v { color: var(--rmm-muted); }
.attr__empty { color: var(--rmm-faint); }

.td-dates {
    color: var(--rmm-muted);
    white-space: nowrap;
    font-size: 0.8125rem;
}

.td-budget {
    font-weight: 700;
    color: var(--rmm-text);
    white-space: nowrap;
}

.td-status { white-space: nowrap; }

/* Design: the per-row trash is RED at all times (color: var(--brand-error)) on a
   transparent field with a 6px radius; hover adds a neutral grey wash rather
   than changing the colour. Ours previously did the inverse — grey until hover
   — which read as a disabled control. */
.remove-item-btn {
    border: none;
    background: transparent;
    color: var(--rmm-danger);
    border-radius: var(--rmm-radius);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    margin-left: 8px;
    padding: 2px 4px;
    vertical-align: middle;
    transition: background-color var(--rmm-dur-fast) var(--rmm-ease);
}

.remove-item-btn:hover {
    color: var(--rmm-danger);
    background: var(--rmm-subtle);
}

/* ── Row controls appear on hover ─────────────────────────────────────────
   The per-item checkbox and its remove (trash) button stay out of the way until
   the row is moused over, so a long list reads as content rather than controls.

   Deliberate choices:
   · `opacity` (not display/visibility) so the controls keep their space — the
     row must not reflow on hover — and stay in the tab order.
   · Revealed on :focus-within too, so keyboard users can reach them at all.
   · A CHECKED box stays visible when the pointer leaves; otherwise your own
     selection would vanish, which is worse than the clutter this hides.
   · Ordered rows have no controls to reveal — untouched. */
/* TWO row renderings carry these controls and BOTH must be covered:
     · List tab  — .tree-row--item, checkbox wrapped in label.tree-item__check,
                   plus a .remove-item-btn in .tree-item__actions
     · Plan tab  — .gantt-row (the DEFAULT tab), a BARE .item-check inside
                   .gantt-row__label, and NO remove control at all
   Scoping only to the List tab left the Plan tab's checkboxes permanently
   visible. Target the control itself, then reveal from either row type. */
/* 0.29.0 (RDEV-299 row 3.7, D182): the checkbox is always visible on a New row (Plan and List); only the trash
   stays hover-only. */
.tree-row--item .remove-item-btn,
.gantt-row .remove-item-btn {
    opacity: 0;
    /* Design: a hidden control is also unclickable — matches the design's
       [data-hoveronly] rule, which pairs opacity:0 with pointer-events:none. */
    pointer-events: none;
    transition: opacity 140ms var(--rmm-ease);
}

.tree-row--item:hover .remove-item-btn,
.tree-row--item:focus-within .remove-item-btn,
.gantt-row:hover .remove-item-btn,
.gantt-row:focus-within .remove-item-btn {
    opacity: 1;
    pointer-events: auto;
}

/* Plan-tab trash, sat after the row's text: since log D764 (Uffe 2026-10-21; rmm-advertiser-design.md 1.8 §8.1, §6)
   design.md's compact control, 32 px, its icon 16 px (an icon inside a small button). */
.gantt-row__remove {
    width: var(--rmm-control-h-sm);
    height: var(--rmm-control-h-sm);
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 0;
}

.gantt-row__remove svg { width: 16px; height: 16px; }

/* Keep a made selection visible after the pointer moves away — hiding your own
   selection would be worse than the clutter this removes.

   These are two SEPARATE rules on purpose. A rule-level selector list is not
   forgiving: if one selector in it fails to parse, the whole rule is dropped.
   Grouping the :has() selector with the plain one risked taking the plain one
   down with it, so they are kept independent. */
/* Keyboard focus must never be invisible. */
.tree-row--item .item-check:focus-visible,
.tree-row--item .remove-item-btn:focus-visible,
.gantt-row .item-check:focus-visible,
.gantt-row .remove-item-btn:focus-visible {
    opacity: 1;
    pointer-events: auto;
}

/* 0.29.0 (row 3.7 review Fix 1; 1.9 §11): the leaf row's keyboard opener is visually hidden, so the row draws its
   focus ring (2 px Primary, as the Orders rows). Kept apart from the rule above: a :has() selector in a list would
   take the list down where it does not parse. */
.tree-row--item:has(.tree-item__open:focus-visible) {
    outline: 2px solid var(--rmm-primary);
    outline-offset: -2px;
}

/* D570 (Uffe 2026-10-19, D529): the List tab's unflagged row, a gray en dash. */
.tree-item__flag-none { color: var(--rmm-faint, #9CA3AF); }

.items-table tfoot td {
    padding: 14px 16px;
    border-top: 1px solid var(--rmm-border-subtle);
    background: var(--rmm-subtle);
    font-weight: 600;
}

.tfoot-label { color: var(--rmm-muted); }
.tfoot-total { font-weight: 700; color: var(--rmm-text); white-space: nowrap; }

/* ── Gantt view (design: weekly plan with phases, sticky left column) ── */
.gantt-scroll {
    overflow-x: auto;
}

.gantt {
    /* Fallback only — front_v21.js writes the live value inline (the label
       column is user-resizable and persisted, T8), alongside the total width
       (px-per-day) so the track overflows the viewport and scrolls. */
    --label-w: 240px;
    position: relative;
}

.gantt-head {
    display: flex;
    align-items: stretch;
    background: var(--rmm-surface);
    border-bottom: 1px solid var(--rmm-border);
}

.gantt-head__label {
    flex: 0 0 var(--label-w);
    width: var(--label-w);
    box-sizing: border-box;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--rmm-text);
    background: var(--rmm-surface);
    border-right: 1px solid var(--rmm-border);
    position: sticky;
    left: 0;
    z-index: 4;
}

.gantt-head__label .check-wrap { margin: 0; }

/* Drag divider on the label column (T8): sits on the header cell's right
   border; front_v21.js updates --label-w live while it is dragged. */
.gantt-label-resize {
    position: absolute;
    top: 0;
    right: -4px;
    bottom: 0;
    width: 8px;
    cursor: col-resize;
    z-index: 5;
    touch-action: none;
}

.gantt-label-resize:hover,
.gantt-label-resize:active {
    background: color-mix(in srgb, var(--rmm-primary) 35%, transparent);
}

.gantt-head__track {
    position: relative;
    flex: 1;
}

.gantt-months {
    position: relative;
    height: 28px;
}

.gantt-months .month-col {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding-left: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--rmm-text);
    white-space: nowrap;
    overflow: hidden;
    border-left: 1px solid var(--rmm-border);
}

.gantt-months .month-col:first-child { border-left: none; }

/* Week zoom: the upper row is the week number ("W14"), centred over its span
   (campaign-detail.dc.html). Other zooms keep the left-aligned label above. */
.gantt-months .month-col--centered {
    justify-content: center;
    padding-left: 0;
}

.gantt-weeks {
    position: relative;
    height: 20px;
}

.gantt-weeks .week-col {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-bottom: 6px;
    font-size: 10px;
    font-weight: 600;
    color: var(--rmm-muted);
    border-left: 1px solid var(--rmm-border-subtle);
    overflow: hidden;
}

.gantt-body {
    position: relative;
}

.gantt-grid {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--label-w);
    right: 0;
    pointer-events: none;
    z-index: 0;
}

.gantt-row {
    display: flex;
    align-items: stretch;
    position: relative;
    z-index: 1;
    border-bottom: 1px solid var(--rmm-border-subtle);
    /* Decision 3: the whole row (label + bar) opens the Line-item modal, so the
       whole row reads as clickable. Dragging still works — the JS opens the
       modal only when the pointer didn't move, and .dragging gives feedback. */
    cursor: pointer;
}

.gantt-row:last-child { border-bottom: none; }
.gantt-row.dragging { opacity: 0.4; }
.gantt-row.drag-over { box-shadow: inset 0 2px 0 var(--rmm-primary); }

.gantt-row__label {
    flex: 0 0 var(--label-w);
    width: var(--label-w);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    min-height: 48px;
    background: var(--rmm-surface);
    border-right: 1px solid var(--rmm-border);
    position: sticky;
    left: 0;
    z-index: 2;
    /* cursor: pointer inherited from .gantt-row (decision 3) — the old grab
       cursor promised a drag-only region that no longer matches the behaviour. */
}

.gantt-grip {
    color: var(--rmm-faint);
    cursor: grab;
    font-size: 1.05rem;
    flex-shrink: 0;
    line-height: 1;
    letter-spacing: -2px;
}

.gantt-grip:active { cursor: grabbing; }

.gantt-row__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    line-height: 1.25;
}

.gantt-row__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--rmm-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gantt-row__sub {
    font-size: 11px;
    color: var(--rmm-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gantt-row__track {
    position: relative;
    flex: 1;
    height: 48px;
}

.gantt-bar {
    position: absolute;
    top: 13px;
    height: 22px;
    border-radius: var(--rmm-radius-sm);
    display: flex;
    align-items: center;
    padding: 0 8px;
    overflow: hidden;
    min-width: 6px;
    box-sizing: border-box;
    z-index: 1;
}

.gantt-bar__label {
    font-size: 11px;
    font-weight: 600;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── The four bar treatments (campaign-detail design, 0.41.0) ─────────────
   'new' is an outline, 'provisional' (awaiting approval / reserved) is
   hatched, 'active' is a tint of the primary whose fill is ELAPSED TIME
   against the flight (DM v8 retired stage-count progress: "the planning
   surfaces express prep and flight as time"). Done means Delivered (the
   Cancelled/Expired stages are retired, rmmorderflow 0.13.0) and keeps the
   active treatment. The class comes from barTreatment() in front_v21.js.
   color-mix with white keeps the tint mathematically the SAME HUE as the
   primary — only lightness and saturation move. */
.gantt-bar--t-new {
    background: transparent;
    border: 1px solid var(--rmm-faint, #9CA3AF);
    color: var(--rmm-muted);
}

.gantt-bar--t-provisional {
    background: repeating-linear-gradient(45deg, var(--rmm-subtle, #ECEEF0) 0 6px, var(--rmm-faint, #9CA3AF) 6px 12px);
    border: none;
    color: var(--rmm-muted);
}

.gantt-bar--t-active {
    background: color-mix(in srgb, var(--rmm-primary) 32%, #fff);
    border: none;
    color: var(--rmm-on-primary);
}


.gantt-bar__fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: var(--rmm-primary);
    /* No entry sliver: the fill is elapsed time (0.41.0), and a flight that
       has not started has genuinely elapsed nothing. The tinted track alone
       is the 'active, not yet live' reading — per the design's own legend
       chip, whose fill also starts at the left edge. */
    min-width: 0;
    /* The bar clips (overflow:hidden) and owns the radius; the fill only needs
       to round its own leading edge to sit flush inside it. */
    border-radius: 5px 0 0 5px;
    pointer-events: none;
}

/* ── Gantt bar tooltip ────────────────────────────────────────────────────
   Replaces the native `title`, which could not carry Stage / Schedule /
   Progress as separate labelled lines. pointer-events:none is load-bearing:
   Plan rows are draggable and the whole row opens the modal (decision 3), so
   the tooltip must never become an event target. */
.gantt-tip {
    position: fixed;
    z-index: 1080;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 320px;
    padding: 8px 10px;
    border-radius: var(--radius-md, 8px);
    /* The tooltip is appended to <body>, OUTSIDE the wrapper classes that
       declare the --rmm-* aliases, so it reads the theme's :root tokens
       directly (1.8 §14): a neutral dark chip, no brand colour. */
    background: var(--neutral-800, #2C3E50);
    color: var(--surface-card, #FFFFFF);
    font-size: 13px;
    line-height: 18px;
    box-shadow: var(--shadow-pop, 0 8px 24px rgba(17, 24, 39, 0.12));
}

.gantt-tip[hidden] { display: none; }

.gantt-tip__line {
    display: flex;
    gap: 6px;
    white-space: nowrap;
}

.gantt-tip__label {
    opacity: 0.7;
}

.gantt-tip__label::after { content: ":"; }

.gantt-tip__value {
    font-weight: 600;
}

/* 0.41.0 — the design's 'Not committed' outline is SOLID (its legend chip
   too); the old dashed shape cue is retired with the per-status variants. */

/* ── Prep segment (0.41.0, campaign-detail design) ────────────────────────
   "The product's lead time, ending where the flight opens. Renders in every
   state and always carries the same treatment as the flight bar" — at a
   third the height. Except on To-do rows: at 7px an outline reads as a
   stray rule and a hatch turns to mush, so both fall back to a plain tint,
   one step apart so each still pairs with its flight bar. Nothing fills
   until the row is ordered — a To-do prep bar is a projection. */
.gantt-prep {
    position: absolute;
    top: 20.5px;
    height: 7px;
    border-radius: 3.5px 0 0 3.5px;
    overflow: hidden;
    z-index: 1;
    box-sizing: border-box;
}

.gantt-prep__fill {
    display: block;
    height: 100%;
    background: var(--rmm-primary);
}

.gantt-prep--t-new { background: var(--rmm-subtle, #ECEEF0); }
.gantt-prep--t-provisional { background: var(--rmm-faint, #9CA3AF); }
.gantt-prep--t-active {
    /* Same tint as the flight bar; the fill inside is elapsed prep time.
       The hatch pitch would halve at this height, so tint, not texture. */
    background: color-mix(in srgb, var(--rmm-primary) 32%, #fff);
}

/* ── Deadline diamond (0.41.0) ────────────────────────────────────────────
   One milestone: the date the advertiser's materials are due. A rotated
   square — its diagonal is 1.41x the side, so the 8px square reads ~11px
   and overhangs the 7px prep bar rather than shrinking to fit. Knocked out,
   not outlined: the row background fills the shape so it separates from a
   filled prep segment as readily as a tinted one. A diamond left of the
   today line was met — position already says so, so there is no filled
   "met" variant. Overdue inverts — solid red with a background-colour
   ring, one size up. */
.gantt-diamond {
    position: absolute;
    top: 20px;
    width: 8px;
    height: 8px;
    margin-left: -4px;
    transform: rotate(45deg);
    border-radius: 1.5px;
    background: var(--rmm-surface, #FFFFFF);
    border: 1.5px solid var(--rmm-primary);
    box-sizing: border-box;
    z-index: 2;
}

.gantt-diamond--todo { border-color: var(--rmm-faint, #9CA3AF); }

.gantt-diamond--overdue {
    top: 19px;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    background: var(--rmm-danger);
    border-color: var(--rmm-surface, #FFFFFF);
}

/* ── Legend swatches (0.41.0): the four bar treatments + the diamonds ──── */
.legend-swatch {
    display: inline-block;
    width: 20px;
    height: 9px;
    border-radius: 5px;
    box-sizing: border-box;
}

.legend-swatch--new { border: 1px solid var(--rmm-faint, #9CA3AF); background: transparent; }
.legend-swatch--provisional { background: repeating-linear-gradient(45deg, var(--rmm-subtle, #ECEEF0) 0 6px, var(--rmm-faint, #9CA3AF) 6px 12px); }

.legend-swatch--active {
    width: 24px;
    background: color-mix(in srgb, var(--rmm-primary) 32%, #fff);
    overflow: hidden;
    display: inline-flex;
}

.legend-swatch--active > span { width: 60%; background: var(--rmm-primary); }

.legend-diamond {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 1px;
    transform: rotate(45deg);
    border-radius: 1.5px;
    border: 1.5px solid var(--rmm-primary);
    box-sizing: border-box;
}

.legend-diamond--overdue {
    width: 9px;
    height: 9px;
    border: none;
    background: var(--rmm-danger);
}

/* ── Phase group header row ──────────────────────────────── */
.gantt-phase {
    display: flex;
    align-items: stretch;
    background: var(--rmm-subtle);
    border-bottom: 1px solid var(--rmm-border);
    position: relative;
    z-index: 1;
}

.gantt-phase.drag-over-phase {
    background: color-mix(in srgb, var(--rmm-primary) 15%, var(--rmm-surface));
}

.gantt-phase__label {
    flex: 0 0 var(--label-w);
    width: var(--label-w);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    min-height: 40px;
    background: var(--rmm-subtle);
    border-right: 1px solid var(--rmm-border);
    font-size: 14px;
    font-weight: 700;
    color: var(--rmm-text);
    position: sticky;
    left: 0;
    z-index: 2;
}

.gantt-phase__name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gantt-phase__count {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radius-pill, 999px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: var(--rmm-border);
    color: var(--neutral-600, #4B5563); /* 1.8 §8.6 neutral badge text; neutral 500 is 3.9:1 on this fill */
    flex-shrink: 0;
}

/* Right-aligned action cluster on a phase label row: move up/down + delete. */
.gantt-phase__actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.gantt-phase__move {
    border: none;
    background: transparent;
    color: var(--rmm-faint);
    cursor: pointer;
    font-size: 0.625rem;
    line-height: 1;
    padding: 4px 5px;
    border-radius: var(--radius-sm, 4px);
    flex-shrink: 0;
}

.gantt-phase__move:hover:not(:disabled) {
    color: var(--rmm-text);
    background: var(--rmm-border-subtle);
}

.gantt-phase__move:disabled {
    opacity: 0.35;
    cursor: default;
}

.gantt-phase__del {
    border: none;
    background: transparent;
    color: var(--rmm-faint);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 2px 6px;
    border-radius: var(--radius-sm, 4px);
    flex-shrink: 0;
}

.gantt-phase__del:hover {
    color: var(--rmm-danger);
    background: color-mix(in srgb, var(--rmm-danger) 12%, var(--rmm-surface));
}

.gantt-phase__track {
    position: relative;
    flex: 1;
    height: 40px;
}

.gantt-phase__band {
    position: absolute;
    top: 16px;
    height: 8px;
    /* v3 E4: "Group summary bars are neutral." They were primary-tinted, which
       read as a status and competed with the item bars underneath — the group
       span is context, not a state. */
    background: color-mix(in srgb, var(--neutral-400, #9CA3AF) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--neutral-400, #9CA3AF) 30%, transparent);
    border-radius: var(--radius-sm, 4px);
    min-width: 2px;
    box-sizing: border-box;
}

.gantt-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--rmm-border-subtle);
    background: var(--rmm-surface);
    flex-wrap: wrap;
}

.gantt-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 0.78rem;
    color: var(--rmm-text);
}

.legend-title {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--rmm-muted);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ============================================================
   Modal
   ============================================================ */

.dialog {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1050;
    align-items: center;
    justify-content: center;
}

.dialog.is-open {
    display: flex;
}

.dialog__backdrop {
    position: absolute;
    inset: 0;
    background: var(--rmm-backdrop);
}

/* 1.8 §8.9 dialog: 480 px (small) or 1120 px (.rmm-detail__shell, large),
   max-width calc(100vw - 32px) through the 16 px margin, radius --radius-lg,
   --shadow-dialog, backdrop --backdrop. */
.dialog__panel {
    position: relative;
    background: var(--rmm-surface);
    border-radius: var(--rmm-radius-lg);
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    margin: 16px;
    box-shadow: var(--rmm-shadow-modal);
    z-index: 1;
}

/* Confirm dialogs: the same 480 px (§8.9 has no third width). */
.dialog__panel--sm {
    max-width: 480px;
}

.dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--rmm-border);
}

.dialog__title {
    /* 1.8 §8.9: title is section-title (20/28 600) */
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    margin: 0;
    color: var(--rmm-text);
}

/* 1.8 §8.9 ghost X close = §8.3 ghost button, sm (32 px): no border, --primary text, radius md,
   --primary-subtle wash on hover; §11 control focus (2 px outline + halo). Phase 3 review C2: the one close of every
   Advertiser Portal dialog (the org and Financials dialogs draw the same values in org-access.css / financials.css),
   the Lucide x at §8.3's 16 px icon size, in Primary at rest as the prototype's close (never the gray "×"). */
.dialog__close {
    flex: none;
    width: var(--rmm-control-h-sm);
    height: var(--rmm-control-h-sm);
    padding: 0;
    border: none;
    background: transparent;
    border-radius: var(--rmm-radius);
    cursor: pointer;
    color: var(--rmm-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--rmm-dur-fast) var(--rmm-ease);
}

.dialog__close-icon {
    width: 16px;
    height: 16px;
    flex: none;
}

.dialog__close:hover {
    background: var(--rmm-primary-bg);
    color: var(--rmm-primary);
}

.dialog__close:focus-visible {
    outline: 2px solid var(--rmm-primary);
    outline-offset: 2px;
    box-shadow: var(--rmm-shadow-focus);
}

.dialog__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--rmm-border);
    margin-top: 4px;
}

.dialog__footer--split {
    justify-content: space-between;
}

.dialog__footer-right {
    display: flex;
    gap: 10px;
    align-items: center;
    /* Right-aligned also when it is the only visible child (Campaign settings › Access hides Delete; review F13). */
    margin-left: auto;
}

.dialog__body {
    padding: 24px 24px 4px;
}

/* ----- Forms (design 520px dialog: 24px body, 20px field rhythm) ----- */

#rmm-campaign-form,
#rmm-edit-form {
    padding: 24px 24px 4px;
}

.field {
    margin-bottom: 20px;
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Fields per 1.8 §8.4 (label body-strong 14/600 --text-heading, gap 6 px;
   field 40 px, padding 0 12 px, value 16 px, border --border-field, radius
   --radius-md; focus = the border turns --primary, no outline, no halo) —
   scoped to dialogs on top of the theme's Bootstrap. */
.dialog .form-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-heading, #374151);
    margin-bottom: 6px;
}

/* …but NOT the inline label sitting beside a checkbox. That 8px bottom margin
   makes the label's MARGIN box 8px taller than its content, and .check-wrap
   centres margin boxes (align-items:center) — which pushed the control ~4px
   below the text (consolidated findings 4.4). Specificity (0,3,0) so it wins
   regardless of source order; the earlier `.field--toggle .form-label--inline`
   reset at ~line 468 loses to this block on order alone. */
.dialog .check-wrap .form-label--inline {
    margin: 0;
}

.dialog .form-control {
    height: var(--rmm-control-h);
    min-height: 0;
    padding: 0 12px;
    border: 1px solid var(--rmm-border-input);
    border-radius: var(--rmm-radius);
    font-size: 16px;
    color: var(--rmm-text);
    background: var(--rmm-surface);
    transition: border-color var(--rmm-dur-fast) var(--rmm-ease);
}

.dialog textarea.form-control,
.dialog select[multiple].form-control {
    height: auto;
    padding: 8px 12px;
}

.dialog .form-control::placeholder {
    color: var(--text-placeholder, #9CA3AF);
}

.dialog .form-control:focus {
    border-color: var(--rmm-primary);
    box-shadow: none;
    outline: none;
}

/* Dialog footer buttons: 1.8 §8.3 md — 40 px, padding 0 18 px, radius
   --radius-md, label 14/600 at every size (the 700 primary label is gone). */
.dialog__footer .btn {
    min-height: var(--rmm-control-h);
    padding: 0 18px;
    border-radius: var(--rmm-radius);
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}

.dialog .btn-outline-danger {
    --bs-btn-color: var(--rmm-danger);
    --bs-btn-border-color: var(--rmm-danger);
    --bs-btn-bg: var(--rmm-surface);
    --bs-btn-hover-color: var(--rmm-danger);
    --bs-btn-hover-bg: var(--rmm-danger-bg);
    --bs-btn-hover-border-color: var(--rmm-danger);
    --bs-btn-active-color: var(--rmm-danger);
    --bs-btn-active-bg: var(--rmm-danger-bg);
    --bs-btn-active-border-color: var(--rmm-danger);
}

.dialog .btn-danger {
    --bs-btn-bg: var(--rmm-danger);
    --bs-btn-border-color: var(--rmm-danger);
    --bs-btn-color: var(--on-status, #FFFFFF); /* 1.8 §8.3 danger: white text */
    --bs-btn-hover-bg: var(--rmm-danger-hover);
    --bs-btn-hover-border-color: var(--rmm-danger-hover);
    --bs-btn-hover-color: var(--on-status, #FFFFFF);
}

/* The required marker (.text-danger) and form errors (.alert.alert-danger)
   remain the theme's Bootstrap styling. */

.delete-msg {
    padding: 8px 24px 0;
    font-size: 0.9rem;
    color: var(--rmm-text);
    line-height: 1.5;
}

/* ============================================================
   Products browsing page (S5 / D-A — the design's product-search,
   evolved from the Media Kit variant tables)
   ============================================================ */

/* ── Filter bar ── */

/* Design product-search.dc.html: one card, search row above the chip row. */
.ps-filters {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
    padding: 20px 24px;
    /* Resolve through the RMM token chain, not literals — --rmm-surface-raised
       was never defined, so this card was painting from the #fff fallback and
       could not follow a rebranded surface. */
    background: var(--rmm-surface);
    border: 1px solid var(--rmm-border);
    border-radius: var(--rmm-radius-lg);
    box-shadow: var(--rmm-shadow-card);
}

.ps-filters__row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* Search takes the full row; the count sits hard right. */
.ps-filters__search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 240px;
    min-width: 240px;
}

.ps-filters__search-icon {
    position: absolute;
    left: 12px;
    width: 16px;
    height: 16px;
    color: var(--rmm-muted);
    pointer-events: none;
}

.ps-filters__count {
    margin-left: auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--rmm-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Phase 3 review F2: §7.2's label role, 13/16 600 uppercase +0.08em (product-search.dc.html "Category" 13 px) */
.ps-filters__legend {
    flex: none;
    width: 64px;
    font-size: 13px;
    line-height: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--rmm-muted);
}

.ps-filters__clear {
    margin-left: 4px;
    padding: 0 4px;
    background: none;
    border: none;
    font-size: 13px;
    font-weight: 500;
    color: var(--rmm-primary);
    text-decoration: underline;
    cursor: pointer;
}

.ps-filters__search .form-control {
    width: 100%;
    height: 40px;
    padding-left: 38px;
    border: 1px solid var(--rmm-border-input);
    border-radius: var(--rmm-radius);
    background: var(--rmm-surface);
    color: var(--rmm-text);
}

.ps-filters__search .form-control:focus {
    border-color: var(--rmm-primary);
    box-shadow: none;
    outline: none;
}

.ps-filters__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ⚠ Control vocabulary divergence, recorded not resolved: this page's design
   (product-search.dc.html) specifies 40px controls / 8px radius, while the
   campaign calendar (campaign-list.dc.html) specifies 42px / 6px. Two pages
   authored at different times. This page follows ITS OWN design; harmonising
   the two is a decision for Uffe, not a unilateral edit here. */
.ps-chip {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--rmm-muted);
    background: var(--rmm-surface);
    border: 1px solid var(--rmm-border-input);
    border-radius: var(--radius-pill, 999px);
    cursor: pointer;
    transition: background-color 140ms var(--rmm-ease),
                color 140ms var(--rmm-ease),
                border-color 140ms var(--rmm-ease);
}

.ps-chip:hover {
    background: var(--rmm-subtle);
    color: var(--rmm-text);
}

.ps-chip:focus-visible {
    outline: none;
    box-shadow: var(--rmm-shadow-focus);
}

.ps-chip.is-active {
    font-weight: 600;
    color: var(--rmm-on-primary);
    background: var(--rmm-primary);
    border-color: var(--rmm-primary);
}

/* JS-only affordances stay hidden until products-page.js flips .js-on */
/* 1.8 §8.1: Products is a data page — capped at 1440 px, left-aligned; the card grid adds columns, not width.
   0.29.0 (RDEV-299 row 3.4, product-search.dc.html): the title, the filter card and the grid 24 px apart. */
.media-kit-page { max-width: 1440px; margin-inline: 0; display: flex; flex-direction: column; gap: 24px; }
.media-kit-page > .toolbar { margin: 0; }

.media-kit-page:not(.js-on) .ps-filters,
.media-kit-page:not(.js-on) .ps-card__qa {
    display: none;
}

/* ── Card grid ── */

/* 0.29.0 (RDEV-299 row 3.4): rmm-advertiser-design.md 1.9 §8.1 and product-search.dc.html — a card grid
   adds columns instead of widening cards: auto-fill tracks of at least 280 px (4 columns at 1440 px);
   one column on a phone. Replaces the 3 / 2 / 1 ladder of the older design. */
.ps-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 768px) {
    .ps-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

.ps-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--rmm-surface);
    border: 1px solid var(--rmm-border);
    border-radius: var(--rmm-radius-lg);
    box-shadow: var(--rmm-shadow-card);
    transition: box-shadow 160ms var(--rmm-ease),
                transform 160ms var(--rmm-ease),
                border-color 160ms var(--rmm-ease);
}

.ps-card:hover,
.ps-card:focus-within {
    border-color: var(--rmm-secondary);
    box-shadow: var(--rmm-shadow-hover);
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .ps-card {
        transition: box-shadow 160ms var(--rmm-ease),
                    border-color 160ms var(--rmm-ease);
    }

    .ps-card:hover,
    .ps-card:focus-within {
        transform: none;
    }
}

/* Media frame — 16:9, fixed. The design puts an abstract placement schematic
   in here; this build puts the product's PrestaShop image in it (see the note
   in products.tpl). The frame is what holds every card in a row to the same
   height, so it renders image or not. `position: relative` anchors both the
   media link and the quick-add button. */
.ps-card__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--rmm-subtle);
    border-bottom: 1px solid var(--rmm-border);
}

/* The link fills the frame; the quick-add button is its sibling, stacked over
   it. Anchoring the colour closes the latent Bootstrap-blue trap — nothing
   inside is text today, but a currentColor SVG would inherit #0d6efd. */
.ps-card__media-link {
    position: absolute;
    inset: 0;
    color: inherit;
    text-decoration: none;
}

.ps-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ps-card__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Design body box is `16px 20px 18px` with the footer row inside it. The
       footer is a sibling element here, so the 18px bottom lives on the footer
       and the body stops at 0. */
    padding: 16px 20px 0;
}

/* Channel pill — where the ad sits (the product's ad category).
   ⚠ The design puts this pill INLINE with the product name in one title row.
   It stays on its own line here because the real category labels run to 36
   characters ("Content Production and Collaboration"); inline they would crush
   the name to one or two words per line in a 3-column card. The design's pill
   METRICS (20px tall, 0 8px, 11/600, primary-subtle) are applied as specified.
   Raise with Uffe if the design intends a short channel label distinct from the
   ad category. */
/* 0.29.0 (RDEV-299 row 3.4, D144, product-search.dc.html): the category badge above the name in
   sentence case, 13 px (1.9 §8.6 sm badge: small 600, padding 0 8, Primary tone). */
.ps-card__placement {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    height: 22px;
    max-width: 100%;
    padding: 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--rmm-primary);
    background: var(--rmm-primary-bg);
    border-radius: var(--radius-pill, 999px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ps-card__name {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}

.ps-card__link {
    color: var(--rmm-text);
    text-decoration: none;
}

.ps-card__link:hover {
    color: var(--rmm-primary);
    text-decoration: none;
}

/* 2 lines, not 3, and a min-height equal to exactly two of them (13px × 1.5
   = 19.5px → 39px). The min-height is what makes every card in a row the same
   height when the descriptions differ in length — clamping alone only caps the
   tall ones, it does not lift the short ones. */
.ps-card__desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    min-height: 39px;
    color: var(--rmm-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-wrap: pretty;
}

/* Divider + footer row. Design: 1px rule at `6px 0 2px`, then the row (8 px under it, the body's gap), then the
   body box's 18px bottom. 0.29.0 (RDEV-299 row 3.4, D145): the row wraps rather than cut the availability. */
.ps-card__footer {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin: 6px 20px 18px;
    padding-top: 10px;
    border-top: 1px solid var(--rmm-border);
    font-size: 13px;
    color: var(--rmm-muted);
}

.ps-card__price {
    font-size: 14px;
    font-weight: 700;
    color: var(--rmm-text);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ps-card__from {
    font-size: 13px;
    font-weight: 400;
    color: var(--rmm-muted);
}

.ps-card__unit {
    font-size: 13px;
    font-weight: 400;
    color: var(--rmm-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* 0.9.0 (D24): "/ flight" or "/ day" beside the price; a product with nothing
   bookable yet states it instead of a price. */
.ps-card__per {
    font-size: 13px;
    font-weight: 400;
    color: var(--rmm-muted);
}

.ps-card__price--none {
    font-size: 13px;
    font-weight: 400;
    color: var(--rmm-muted);
}

/* Quick add sits on the media, bottom-right (design product-search.dc.html). */
.ps-card__qa {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 14px;
    font-size: 14px; /* plan D67, log D723 (Uffe 2026-10-20): design.md 1.8 §8.3's 14/600 button label (F2 had the prototype's 13) */
    font-weight: 600;
    line-height: 1;
    border-radius: var(--rmm-radius);
    box-shadow: var(--rmm-shadow-pop);
}

/* Quick add reveals on hover / keyboard focus (design: hover affordance).
   `pointer-events` is gated with the opacity so an invisible button is not
   silently clickable — but it is restored on :focus-within/:focus-visible, and
   pointer-events never blocks keyboard activation, so tabbing to the button
   reveals it and Enter/Space still fire. A hover-only control would be an
   accessibility defect; this one is reachable without a pointer. */
.media-kit-page.js-on .ps-card__qa {
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms var(--rmm-ease);
}

.media-kit-page.js-on .ps-card:hover .ps-card__qa,
.media-kit-page.js-on .ps-card:focus-within .ps-card__qa,
.media-kit-page.js-on .ps-card__qa:focus-visible {
    opacity: 1;
    pointer-events: auto;
}

/* Hover-less (touch) devices: the affordance is always visible */
@media (hover: none) {
    .media-kit-page.js-on .ps-card__qa {
        opacity: 1;
        pointer-events: auto;
    }
}

/* ── Quick add dialog extras ── */

.dialog__panel--wide {
    max-width: 640px;
}

/* Row 3.4 round 2 (D539, Uffe 2026-10-19): the quick add at product-search.dc.html's 680 px. */
.dialog__panel--wide.dialog__panel--qa {
    max-width: 680px;
}

/* 0.29.0 (RDEV-299 row 3.4, product-search.dc.html "configure"): the header holds the product's image
   (104 × 58, radius md), its name and the route to its page; the body is the shared configurator with the
   campaign field on its quantity row and the CTA beside its summary. */
.dialog__header.qa-head {
    align-items: flex-start;
    justify-content: flex-start;
    gap: 14px;
    padding: 20px 24px 16px;
}

.qa-head__thumb {
    flex: none;
    width: 104px;
    height: 58px;
    overflow: hidden;
    background: var(--neutral-100, #F3F4F6);
    border: 1px solid var(--rmm-border);
    border-radius: var(--rmm-radius);
}

.qa-head__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.qa-head__text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.qa-head__title {
    /* Phase 3 review C2: §8.9's section-title, 20/28 600 --text-strong (product-search.dc.html draws 16/700; the
       design.md decides styling) */
    margin: 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: var(--rmm-text);
}

.media-kit-page ~ .dialog .qa-head__link,
.qa-head__link {
    font-size: 13px;
    color: var(--rmm-primary);
    text-decoration: none;
}

.qa-head__link:hover { text-decoration: underline; }

.qa-head__link[hidden] { display: none; }

.qa-body {
    padding: 20px 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.qa-slots[hidden] { display: none; }

.qa-campaign {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* 1.9 §8.4: label above (body-strong), 40 px field, 16 px value, --border-field, Primary border on focus. */
.qa-campaign__label {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--rmm-text);
}

.qa-campaign .form-control {
    height: var(--rmm-control-h);
    padding: 0 12px;
    border: 1px solid var(--rmm-border-input);
    border-radius: var(--rmm-radius);
    font-size: 16px;
    color: var(--rmm-text);
}

.qa-campaign .form-control:focus {
    outline: none;
    border-color: var(--rmm-primary);
    box-shadow: none;
}

.qa-campaign__new {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}

/* 1.9 §8.3 primary, md. */
.dialog .qa-submit {
    height: var(--rmm-control-h);
    padding: 0 18px;
    border-radius: var(--rmm-radius);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.dialog .qa-submit:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* The add's toast (the product page's own toast, here outside .product-detail-page). */
.qa-toast .qa-toast__action,
.qa-toast .qa-toast__action:link,
.qa-toast .qa-toast__action:visited,
.qa-toast .qa-toast__action:hover,
.qa-toast .qa-toast__action:focus {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-50, #F9FAFB);
    text-decoration: underline;
}

.qa-loading {
    margin: 0;
    padding: 12px 4px;
    font-size: 0.875rem;
    color: var(--rmm-muted);
}

/* ----- Add to Campaign dialog extras ------------------------- */

.add-form {
    padding: 20px 24px 0;
}

.add-summary {
    background: var(--rmm-subtle);
    border: 1px solid var(--rmm-border);
    border-radius: var(--rmm-radius-sm);
    padding: 12px 14px;
    margin-bottom: 16px;
}

.add-summary__name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--rmm-text);
    margin-bottom: 4px;
}

.add-summary__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--rmm-muted);
}

.add-summary__slot {
    font-weight: 500;
    color: var(--rmm-text);
}

.add-summary__price::before {
    content: '·';
    margin-right: 4px;
}

.add-success-body {
    padding: 28px 24px 8px;
    text-align: center;
}

.add-success-icon {
    width: 48px;
    height: 48px;
    background: color-mix(in srgb, var(--rmm-success) 15%, var(--rmm-surface));
    color: var(--rmm-success);
    border-radius: 50%;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.add-success-text {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--rmm-text);
    margin-bottom: 4px;
}

.add-success-campaign {
    font-size: 0.875rem;
    color: var(--rmm-muted);
    margin: 0;
}

/* ----- Campaign Add-products modal (S2b: search-first) -------- */

/* Visually hidden, still read by screen readers (search label). */
.rmm-vh {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.addprod-results {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--rmm-border);
    border-radius: var(--rmm-radius-sm);
    margin-bottom: 16px;
}

/* Design row (campaign-detail.dc.html "Add products"): 44px schematic thumb ·
   name + category pill · from-price · availability · chevron. */
.addprod-result {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto auto 20px;
    gap: 14px;
    align-items: center;
    width: 100%;
    padding: 10px 12px;
    background: var(--rmm-surface);
    border: 0;
    border-bottom: 1px solid var(--rmm-border);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--rmm-dur-fast) var(--rmm-ease);
}

.addprod-result:last-child {
    border-bottom: 0;
}

.addprod-result:hover {
    background: var(--rmm-subtle);
}

.addprod-result:focus-visible {
    outline: none;
    box-shadow: inset var(--rmm-shadow-focus);
}

.addprod-result__thumb {
    width: 44px;
    height: 44px;
    object-fit: cover;
    background: var(--neutral-100, #F3F4F6);
    border: 1px solid var(--rmm-border);
    border-radius: var(--radius-md, 8px);
    display: block;
}

.addprod-result__thumb--empty { border-style: dashed; }

.addprod-result__main {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.addprod-result__name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--rmm-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.addprod-result__pill {
    flex: 0 0 auto;
    height: 20px;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border-radius: var(--radius-pill, 999px);
    background: var(--primary-subtle, #EDF0F5);
    color: var(--rmm-primary);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.addprod-result__price {
    font-size: 0.8125rem;
    color: var(--rmm-muted);
    white-space: nowrap;
}

.addprod-result__price strong {
    font-weight: 700;
    color: var(--rmm-text);
    font-variant-numeric: tabular-nums;
}

.addprod-result__avail {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--rmm-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.addprod-result__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rmm-accent, #198754);
    flex: 0 0 auto;
}

.addprod-result__dot--none { background: var(--rmm-danger, #DC3545); }

.addprod-result__chevron {
    width: 16px;
    height: 16px;
    color: var(--rmm-muted);
}

.addprod-empty {
    margin: 0;
    padding: 16px 14px;
    font-size: 0.875rem;
    color: var(--rmm-muted);
}

/* The design's dialog sizing (campaign-detail.dc.html: a 760px host,
   min-height 520px, the results list flex-growing instead of a fixed cap).
   Scoped to this modal — products.tpl's quick-add keeps the 640px --wide. */
.dialog__panel--addprod {
    max-width: 760px;
    min-height: 520px;
    display: flex;
    flex-direction: column;
}
/* F-004: the min-height is the picker's; on the "Added to campaign" step the panel fits its content. */
.dialog__panel--addprod.dialog__panel--addprod-done { min-height: 0; }

/* The step wrappers fill the panel; JS toggles display "" ↔ "none", and ""
   falls back to this rule, so the flex layout survives step switches. */
.dialog__panel--addprod > div { display: flex; flex-direction: column; flex: 1; min-height: 0; }

.addprod-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.addprod-form .addprod-results {
    flex: 1;
    min-height: 0;
    max-height: none;
}

/* 4.5.1: the container-footer quantity control (design: 64px number input
   next to the Add button; shared by the Add-products modal and the products
   quick-add — the PDP has its own pdp-qty flavor). */
/* The configure-state footer is the same full-width bar as the find state's
   (design tpl 615): page-surface background, top border, ends aligned. */
.addprod-pick-footer {
    align-items: flex-end;
    gap: 12px;
    margin-top: 4px;
    padding: 16px 24px;
    border-top: 1px solid var(--rmm-border);
    background: var(--neutral-50, #F9FAFB);
    border-radius: 0 0 var(--rmm-radius-lg) var(--rmm-radius-lg);
}
.addprod-pick-footer__spacer { flex: 1; }
.addprod-pick-footer .addprod-footer__browse { align-self: center; }

/* Stacked variant (design tpl 618/619): uppercase micro-label above the box. */
.addprod-qty--stacked { flex-direction: column; align-items: flex-start; gap: 6px; }
.addprod-qty--stacked .addprod-qty__label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* CTA column (design tpl 621): the count summary above the primary button. */
.addprod-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.addprod-cta__summary {
    font-size: 12px;
    color: var(--rmm-muted);
    font-variant-numeric: tabular-nums;
    min-height: 15px;
}

.addprod-qty {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.addprod-qty__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--rmm-muted);
}

.dialog .form-control.addprod-qty__input {
    width: 64px;
    min-height: 40px;
    height: 40px;
    padding: 0 8px;
    text-align: center;
}

/* Header subtitle: "Adding to {campaign}". */
.addprod-header { align-items: flex-start; }
.addprod-header__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.addprod-subtitle { font-size: 0.8125rem; color: var(--rmm-muted); }

/* Search-with-icon + the category filter, one row. */
.addprod-controls {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.addprod-searchwrap {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.addprod-searchicon {
    position: absolute;
    left: 12px;
    width: 16px;
    height: 16px;
    color: var(--rmm-muted);
    pointer-events: none;
}

/* Outrank `.dialog .form-control` (padding + white bg): the design's search
   field is icon-inset and sits on the PAGE surface, not the raised one. */
.dialog .form-control.addprod-search {
    height: 40px;
    min-height: 40px;
    padding-left: 38px;
    background: var(--surface-page, #F6F8FA);
    border-radius: var(--radius-md, 8px);
}

.addprod-channel { width: 180px; flex: 0 0 auto; }

.dialog .form-control.addprod-channel {
    height: 40px;
    min-height: 40px;
    border-radius: var(--radius-md, 8px);
}

/* Footer bar: Browse-all escape hatch + bottom Close (design). */
.addprod-footer {
    /* Sibling of .add-form (which carries the panel's side padding), so it
       spans the panel full-bleed on its own. */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
    padding: 16px 24px;
    border-top: 1px solid var(--rmm-border);
    background: var(--neutral-50, #F9FAFB);
    border-radius: 0 0 var(--rmm-radius-lg) var(--rmm-radius-lg);
}

.addprod-footer__browse {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--rmm-primary);
    text-decoration: none;
}

.addprod-footer__browse:hover { text-decoration: underline; }

.addprod-footer__close {
    height: 40px;
    padding: 0 20px;
    border: 1px solid var(--rmm-border-input, #6B7280);
    border-radius: var(--rmm-radius, 8px);
    background: var(--rmm-surface);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--rmm-text);
    cursor: pointer;
}

.addprod-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 12px;
    padding: 0;
    background: none;
    border: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--rmm-primary);
    cursor: pointer;
}

.addprod-back:hover {
    text-decoration: underline;
}

.addprod-back:focus-visible {
    outline: none;
    box-shadow: var(--rmm-shadow-focus);
    border-radius: var(--rmm-radius-sm);
}

/* ----- Element Flow widget button ---------------------------- */

.widget-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: var(--primary, #1F4788);
    color: var(--on-primary, #FFFFFF);
    border: none;
    border-radius: var(--radius-md, 8px); /* 1.8 §8.3 buttons: --radius-md */
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
    width: 100%;
    justify-content: center;
}

.widget-btn:hover {
    opacity: 0.88;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 768px) {
    .detail-head {
        flex-direction: column;
    }

    .detail-stats {
        width: 100%;
        justify-content: space-between;
    }

    .stat {
        align-items: flex-start;
        text-align: left;
        padding: 0;
    }

    .stat__rule {
        display: none;
    }
}

@media (max-width: 640px) {
    .cal-topbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .cal-topbar__actions {
        width: 100%;
    }

    .field-row {
        grid-template-columns: 1fr;
    }

    .dialog__panel {
        margin: 8px;
        max-height: 95vh;
    }

    .detail-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .detail-actions {
        justify-content: space-between;
    }
}

/* ============================================================
   Quotes (RFQ) — line-item "quoted" pill + Quotes tab
   ============================================================ */

/* Tab count badge on the Orders tab button (design: primary-tinted chip). */
.toggle__count {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-pill, 999px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    background: var(--rmm-primary-bg);
    border: 1px solid var(--rmm-primary-bg-strong);
    color: var(--rmm-primary);
}

/* Segmented Quotations | Orders control (design) */
.seg-control {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--surface-card, #FFFFFF);
    border: 1px solid var(--rmm-border);
    border-radius: var(--radius-md, 8px);
}

.seg-control__btn {
    height: 32px;
    padding: 0 16px;
    border: none;
    border-radius: var(--rmm-radius-sm); /* 1.8 §8.4 segments: --radius-sm */
    cursor: pointer;
    font-family: inherit;
    font-size: 14px; /* log D754 (Uffe 2026-10-21): `body-strong` 14/600 as rmm-advertiser-design.md 1.8 §8.3, §8.4 */
    font-weight: 600;
    background: transparent;
    color: var(--rmm-muted);
}

.seg-control__btn.is-active {
    background: var(--rmm-primary);
    color: var(--rmm-on-primary);
}

/* Orders tab: one consolidated quotations + orders table (0.8.0 / design) */
.quotes-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.order-table {
    background: var(--rmm-surface);
    border: 1px solid var(--rmm-border);
    border-radius: var(--rmm-radius);
    box-shadow: var(--rmm-shadow-card);
    overflow: hidden;
}

.order-table__head,
.order-table__row {
    display: grid;
    grid-template-columns: 1.3fr 1fr 130px 140px 90px;
    gap: 0 16px;
    align-items: center;
    padding: 12px 24px;
}

.order-table__head {
    border-bottom: 1px solid var(--rmm-border);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rmm-muted);
}

.order-table__row {
    border-bottom: 1px solid var(--rmm-border-subtle);
    font-size: 14px;
}

.order-table__row:last-child { border-bottom: none; }

/* Design: whole row opens the Order/Quote modal; actionable quotations get a
   warning edge + tinted row. */
.order-table--consolidated .order-table__row {
    border-left: 4px solid transparent;
    cursor: pointer;
    transition: background var(--rmm-dur-fast) var(--rmm-ease);
}

.order-table--consolidated .order-table__row:hover {
    background: var(--neutral-50, #F9FAFB);
}

.order-table__row--action {
    border-left-color: var(--rmm-warning);
    background: var(--rmm-warning-bg);
}

/* "Ready to accept" — shown INSTEAD of the status pill on a row the advertiser
   must act on (campaign-detail.dc.html: badgeDisplay/readyDisplay are mutually
   exclusive). Solid warning fill, uppercase, so it reads as a call to action
   rather than one more status among five. */
.status-pill--ready {
    background: var(--rmm-warning);
    /* Deliberately NOT --rmm-text: that is the tenant-repointable
       --text-strong, and contrast against a fixed amber fill must not drift
       with the theme. Matches the design's own var(--neutral-900, #1F2937). */
    color: var(--neutral-900, #1F2937);
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    border-radius: var(--radius-pill, 999px);
    padding: 0 10px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    flex: none;
}

.order-ref {
    font-weight: 700;
    color: var(--rmm-text);
    font-variant-numeric: tabular-nums;
}

.order-items { color: var(--rmm-muted); }

.order-created {
    color: var(--rmm-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.order-amount {
    text-align: right;
    font-weight: 700;
    color: var(--rmm-text);
    font-variant-numeric: tabular-nums;
}

/* Quote status pills (orders table) — design Badge tones:
   in-flight = warning, terminal-positive = accent, terminal-negative = error. */
/* Booking status chips — fo-bookings.js chip(): Approved = warning solid,
   Confirmed = accent solid, Completed = accent soft, Requested = neutral solid,
   every exit (Declined / Expired / Rejected / Cancelled) = neutral soft. */
/* 1.8 §8.6 tones: Requested and every exit = neutral; Approved = warning
   subtle with the warning text colour (base warning is never text, §4.4);
   Confirmed = the solid success variant (allowed for success and danger only);
   Completed = success subtle / strong. */
.status-pill--requested {
    background: var(--neutral-100, #F3F4F6);
    color: var(--neutral-600, #4B5563);
}
.status-pill--pending,
.status-pill--approved {
    background: var(--rmm-warning-bg);
    color: var(--rmm-warning-fg);
}
.status-pill--ordered {
    background: var(--rmm-accent);
    color: var(--on-status, #FFFFFF);
}
.status-pill--completed {
    background: var(--rmm-accent-bg);
    color: var(--rmm-accent-fg);
}
.status-pill--rejected,
.status-pill--cancelled,
.status-pill--declined,
.status-pill--expired {
    background: var(--neutral-100, #F3F4F6);
    color: var(--neutral-600, #4B5563);
}
.rmm-detail__secondary-title { display: block; margin: 8px 0 2px; font-size: 14px; }
.rmm-detail__secondary-lede { margin: 0 0 8px; font-size: 13px; color: var(--rmm-muted); }
.rmm-detail__secondary-label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; }
/* Modal CTA that leaves the dialog for a full page (the Quotation modal's
   "Open quotation" → the approval surface, S3 stage 2). */
.rmm-detail__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--rmm-control-h-sm);
    padding: 0 14px;
}

/* Quotation STAGE pills (approval page, S3 stage 2): the stage vocabulary is
   its own (in_review / awaiting_approval / expired / declined), mapped onto the
   same three design tones as the quote statuses above. */
.status-pill--in_review,
.status-pill--awaiting_approval {
    background: var(--rmm-warning-bg);
    color: var(--rmm-warning-fg);
}
/* expired / declined: neutral soft — the booking exits rule above. */

/* Expiry countdown (S3 stage 2 / D-C): "Expires in N days" beside the status
   of a quotation (validity). Muted while
   there is time, warning on the last day, error once it has passed. */
.order-expiry {
    font-size: 0.75rem;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--rmm-muted);
}
.order-expiry--today {
    color: var(--rmm-warning-fg);
    font-weight: 700;
}
.order-expiry--expired {
    color: var(--rmm-danger-hover); /* --status-danger-strong: text on white, 1.8 §4.4 */
    font-weight: 700;
}

/* ============================================================
   "New order" review page (quote compose)
   ============================================================ */
.neworder { max-width: 980px; margin: 0 auto; }
.neworder__title { font-size: 1.375rem; font-weight: 800; margin: 8px 0 2px; color: var(--rmm-text); }
.neworder__sub { color: var(--rmm-muted); font-size: 0.875rem; margin: 0 0 20px; }

.neworder__grid { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; }
@media (max-width: 820px) { .neworder__grid { grid-template-columns: 1fr; } }

.neworder .card,
.ordertype__cards .otype-card {
    background: var(--rmm-surface);
    border: 1px solid var(--rmm-border);
    border-radius: var(--rmm-radius-lg);
}
.neworder .card { padding: 16px; margin-bottom: 20px; }
.neworder .card__title { font-size: 0.9375rem; font-weight: 700; color: var(--rmm-text); margin-bottom: 12px; }
.neworder .card__title .muted { color: var(--rmm-muted); font-weight: 400; }

/* Order type */
.ordertype { margin-bottom: 20px; }
.ordertype__label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; color: var(--rmm-muted); margin-bottom: 8px; }
.ordertype__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 560px) { .ordertype__cards { grid-template-columns: 1fr; } }
.otype-card { position: relative; padding: 16px; cursor: pointer; display: block; transition: border-color .12s, background .12s; }
.otype-card input { position: absolute; top: 14px; left: 14px; }
.otype-card__title { font-weight: 700; color: var(--rmm-text); padding-left: 24px; margin-bottom: 6px; }
.otype-card__desc { font-size: 0.75rem; color: var(--rmm-muted); line-height: 1.45; }
.otype-card__foot { font-size: 0.75rem; color: var(--rmm-success); margin-top: 10px; }
.otype-card.is-selected { border-color: var(--rmm-success); background: color-mix(in srgb, var(--rmm-success) 8%, var(--rmm-surface)); }

/* Items */
.ni-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--rmm-border-subtle); }
.ni-item:first-child { border-top: none; }
.ni-item__info { flex: 1; min-width: 0; }
.ni-item__name { font-weight: 600; color: var(--rmm-text); }
.ni-item__sub { font-size: 0.75rem; color: var(--rmm-muted); }
.ni-item__price { font-weight: 700; white-space: nowrap; }
.ni-item__del { border: none; background: transparent; color: var(--rmm-muted); cursor: pointer; font-size: 1rem; padding: 4px 6px; border-radius: var(--rmm-radius); }
.ni-item__del:hover { color: var(--rmm-danger, #DC3545); background: var(--rmm-subtle); }

/* Ordering company */
.company { font-size: 0.875rem; color: var(--rmm-text); line-height: 1.55; }
.company__name { font-weight: 700; }
.company__vat { color: var(--rmm-muted); margin-top: 4px; }

/* Summary */
.summary .sum-line { display: flex; justify-content: space-between; gap: 12px; font-size: 0.875rem; padding: 3px 0; color: var(--rmm-text); }
.summary .sum-total { display: flex; justify-content: space-between; font-weight: 800; font-size: 1rem; padding: 12px 0; margin-top: 6px; border-top: 1px solid var(--rmm-border); }
.summary .btn-block { display: block; width: 100%; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700; }
.summary .sum-help { font-size: 0.75rem; color: var(--rmm-muted); text-align: center; margin: 10px 0 0; }

/* ── Calendar | Tree view toggle ─────────────────────────────────────────── */
.cal-topbar__actions {
  display: flex;
  align-items: center;
  gap: 16px; /* design: 16px between control groups */
  flex-wrap: wrap;
}

/* Design clusters the period zoom control with the prev/next arrows. */
.cal-period-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* The calendar filter (All|Active|Inactive) and zoom (Year|Quarter) reuse the
   shared .seg-control / .seg-control__btn component defined above (also used by
   the detail-page Quotes toggle). The list design uses slightly smaller
   buttons (30px / 0 12px) than the shared 32px / 0 16px — scoped here so the
   detail page keeps its adopted sizing. */
.campaigns-page .seg-control__btn {
  height: 32px; /* campaign-list.dc.html (row 3.7): 32 px segments, 0 12px */
  padding: 0 12px;
}

/* Only additive hover/focus states below (design specifies none). */
.seg-control__btn:hover:not(.is-active) {
  color: var(--rmm-text);
  background: var(--rmm-subtle);
}

.seg-control__btn:focus-visible {
  outline: 2px solid var(--rmm-focus-ring);
  outline-offset: 1px;
}

/* Prev / next period navigation buttons. */
.cal-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cal-nav__btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;  /* design: 32×32 with neutral-300 border */
  height: 32px;
  padding: 0;
  background: var(--surface-card, #FFFFFF);
  border: 1px solid var(--rmm-border-input);
  border-radius: var(--rmm-radius);
  color: var(--rmm-text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s;
}

.cal-nav__btn:hover {
  background: var(--rmm-subtle);
  border-color: var(--rmm-faint);
}

.cal-nav__btn:focus-visible {
  outline: 2px solid var(--rmm-focus-ring);
  outline-offset: 1px;
}

/* ── Tree base (shared by the campaign line-item tree below) ─────────────── */
.rmm-tree {
  font-size: 0.95rem;
}

.tree-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
}

.tree-row--category {
  cursor: pointer;
  user-select: none;
  padding-left: 34px;
  border-top: 1px solid var(--rmm-border);
  font-weight: 600;
  color: var(--rmm-text);
}

.tree-row--category:hover {
  background: var(--neutral-50, #F9FAFB);
}

.tree-row--item {
  padding-left: 62px;
  border-top: 1px solid var(--rmm-border-subtle);
  color: var(--text-body, #4B5563);
  /* Decision 3: the whole leaf row opens the Line-item modal. */
  cursor: pointer;
}

.tree-caret {
  width: 1em;
  flex: 0 0 auto;
  color: var(--rmm-muted);
  font-size: 0.8rem;
}

.tree-label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tree-count {
  background: var(--neutral-100, #F3F4F6);
  color: var(--neutral-600, #4B5563);
  border-radius: var(--radius-pill, 999px);
  padding: 0 8px;
  font-size: 0.72rem;
  line-height: 1.4rem;
  min-width: 22px;
  text-align: center;
}

.tree-budget {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-heading, #374151);
}

/* ── Campaign line-item tree (Category → Product → Combination) ────────────
   Design: single card, header row "N draft items | Amount", gray category
   rows, indented product rows, variant leaf rows with checkbox + badge. */

.tree-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--rmm-border);
}

.tree-header .check-wrap { margin: 0; }

.tree-header__label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--rmm-text);
}

.tree-header__amount {
  flex: 0 0 130px;
  text-align: right;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rmm-muted);
}

.rmm-tree--items .tree-node--category {
  border: none;
  border-radius: 0;
  margin-bottom: 0;
  overflow: hidden;
  background: var(--rmm-surface);
}

.rmm-tree--items .tree-row {
  padding: 12px 24px;
}

.rmm-tree--items .tree-row--category {
  background: var(--rmm-subtle);
  font-weight: 700;
  font-size: 14px;
  color: var(--rmm-text);
  border-top: none;
  border-bottom: 1px solid var(--rmm-border);
  cursor: pointer;
  user-select: none;
}

.rmm-tree--items .tree-row--category:hover {
  background: color-mix(in srgb, var(--rmm-subtle) 80%, #fff);
}

.rmm-tree--items .tree-row--product {
  padding-left: 44px;
  background: var(--rmm-surface);
  border-top: none;
  border-bottom: 1px solid var(--rmm-border-subtle);
  font-weight: 600;
  font-size: 14px;
  color: var(--rmm-text);
  cursor: pointer;
  user-select: none;
}

.rmm-tree--items .tree-row--product:hover {
  background: var(--neutral-50, #F9FAFB);
}

.rmm-tree--items .tree-row--item {
  padding-left: 24px;
  gap: 10px;
  align-items: center;
  border-top: none;
  border-bottom: 1px solid var(--rmm-border-subtle);
  font-size: 14px;
  /* Decision 3: the whole leaf row opens the Line-item modal. */
  cursor: pointer;
}

.rmm-tree--items .tree-row--item:hover {
  background: var(--neutral-50, #F9FAFB);
}

.rmm-tree--items .tree-caret {
  width: 16px;
  flex: 0 0 auto;
  color: var(--rmm-muted);
  font-size: 12px;
}

/* Count reads "(n)" in plain muted text (design) */
.rmm-tree--items .tree-count {
  background: none;
  color: var(--rmm-muted);
  border-radius: 0;
  padding: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: inherit;
  min-width: 0;
  text-align: left;
}

.rmm-tree--items .tree-count::before { content: "("; }
.rmm-tree--items .tree-count::after  { content: ")"; }

/* Name + (count) sit together on the left; budget is pushed right. */
.rmm-tree--items .tree-row--category .tree-label,
.rmm-tree--items .tree-row--product .tree-label {
  flex: 0 1 auto;
}

.rmm-tree--items .tree-count { margin-right: auto; }

.rmm-tree--items .tree-item__actions {
  flex: 0 0 24px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.rmm-tree--items .tree-budget {
  flex: 0 0 130px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--rmm-text);
}

.rmm-tree--items .tree-row--product .tree-budget { font-weight: 600; }

.rmm-tree--items .tree-item__check {
  flex: 0 0 auto;
  margin: 0;
  display: flex;
  align-items: center;
}

.rmm-tree--items .tree-item__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-left: 26px;
}

.rmm-tree--items .tree-item__title {
  font-weight: 400;
  color: var(--rmm-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The ad-schedule slot, pinned at the bottom of the leaf as its anchor line. */
.rmm-tree--items .tree-item__slot {
  font-weight: 600;
  color: var(--rmm-text);
}

.rmm-tree--items .tree-item__attrs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 12px;
  color: var(--rmm-muted);
}

.rmm-tree--items .tree-item__attrs .attr__k {
  color: var(--rmm-faint);
}

.rmm-tree--items .tree-item__dates {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--rmm-muted);
  white-space: nowrap;
}

.rmm-tree--items .tree-item__budget {
  flex: 0 0 110px;
  min-width: 0;
  text-align: right;
  font-weight: 600;
}

.rmm-tree--items .tree-item__status {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 90px;
  justify-content: center;
}

/* FlagMarker on List rows (T9): stacked UNDER the pill so the fixed status
   cell never widens uncapped; the name truncates via the marker's own
   ellipsis. Dot/colours come from the shared .flag-marker block. */
.rmm-tree--items .tree-item__status .flag-marker {
  max-width: 180px;
}

/* ── Line-item pill tones (0.30.0) ─────────────────────────────────────────
   Pills no longer read a stored colour. Nothing does: `status_color` is gone
   from every payload and the `color` columns (campaign status AND
   rmm_line_item_state) are unread, so the FO cannot be recoloured from the
   database and rmmorderflow dropping its own colour column cannot break us.

   Two layers, in this order:

     1. the BAND (v3 flow rule 6 — "colour expresses the band, not the stage"):
        three fixed tones covering every ORDERED stage and any custom pre-order
        status, so a pill can never render tone-less;
     2. the three FIXED pre-order stages, which keep their design Badge tones
        because To-do is where the advertiser reads "mine / waiting / held" and
        one flat grey would collapse that distinction.

   Same specificity in both layers (0,3,0) — layer 2 wins on source order. */

.li-row[data-band="todo"] .status-pill--li,
.attn-row[data-band="todo"] .status-pill--li,
.status-pill--band-todo {
  background: var(--neutral-100, #F3F4F6);
  color: var(--neutral-600, #4B5563);
}

.li-row[data-band="processing"] .status-pill--li,
.attn-row[data-band="processing"] .status-pill--li,
.status-pill--band-processing {
  background: var(--rmm-accent-bg);
  color: var(--rmm-accent-fg);
}

/* Done is muted, never red: a cancelled or expired line is over, not an error
   (the same call the gantt bars already make). */
.li-row[data-band="done"] .status-pill--li,
.attn-row[data-band="done"] .status-pill--li,
.status-pill--band-done {
  background: var(--neutral-100, #F3F4F6);
  color: var(--neutral-600, #4B5563);
}

/* New — neutral: the advertiser's own, nothing pending on anyone. */
.li-row[data-status="new"] .status-pill--li,
.attn-row[data-status="new"] .status-pill--li {
  background: var(--neutral-100, #F3F4F6);
  color: var(--neutral-600, #4B5563);
}

/* Awaiting approval — warning: waiting on the retailer. `quote_approved` is the
   Dashboard queue's synthetic row for a quotation waiting on the advertiser;
   same "someone must act" tone. */
.li-row[data-status="awaiting_approval"] .status-pill--li,
.li-row[data-status="quote"] .status-pill--li,
.attn-row[data-status="awaiting_approval"] .status-pill--li,
.attn-row[data-status="quote"] .status-pill--li,
.attn-row[data-status="quote_approved"] .status-pill--li {
  background: var(--rmm-warning-bg);
  color: var(--rmm-warning-fg);
}

/* Reserved (the line-item STAGE) — primary: inventory is held for this advertiser. */
.li-row[data-status="reserved"] .status-pill--li,
.attn-row[data-status="reserved"] .status-pill--li {
  background: var(--rmm-primary-bg);
  color: var(--rmm-primary-hover);
  border-color: var(--rmm-primary);
}

/* === 0.8.0: detail modals (Line Item / Order / Quote) ===================== */

/* Type badge (design: Order = solid primary Badge, Quotation = soft neutral) */
.order-type__badge {
  display: inline-flex; align-items: center; padding: 1px 10px; border-radius: var(--radius-pill, 999px);
  border: 1px solid transparent;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.5;
  white-space: nowrap;
}
.order-type__badge--order {
  background: var(--rmm-primary);
  border-color: var(--rmm-primary);
  color: var(--rmm-on-primary);
}
.order-type__badge--quotation {
  background: var(--rmm-subtle);
  border-color: var(--rmm-border-input);
  color: var(--neutral-700, #374151);
}
/* Design columns: Type | Line items | Reference (+status) | Created | Amount */
.order-table--consolidated .order-table__head,
.order-table--consolidated .order-table__row {
  grid-template-columns: 100px 88px minmax(215px, 1.3fr) 110px 100px;
  gap: 0 10px;
}
/* Reference + status badge cluster */
.order-ref-cell {
  display: flex; align-items: center; gap: 10px; min-width: 0;
}
/* The status cluster stacks its pill and the expiry countdown so a long
   "Expires in 30 days" never squeezes the reference out of its column. */
.order-status {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0;
}

/* Design frame (0.9.0, D2/D3): 1120 × min(720px, 100vh−48px), content region
   left + PERSISTENT Timeline side panel right. Fixed footprint — the regions
   scroll inside it, the shell itself never resizes on tab switches. */
.rmm-detail__shell {
  width: 1120px;
  max-width: calc(100vw - 32px);
  height: min(720px, calc(100vh - 48px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Modal header (design: 16/20 padding, bordered, title 18/700 + badge). */
.rmm-detail__shell .dialog__header {
  padding: 16px 20px;
  flex: 0 0 auto;
  gap: 16px;
}

.rmm-detail__head-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.rmm-detail__shell .dialog__title {
  /* Phase 3 review C2: §8.9's section-title, 20/28 600, as every dialog */
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rmm-detail__badge { flex: 0 0 auto; }

/* T9 FlagMarker beside the header badge — shrinks (and ellipsizes) before the
   title does; hides entirely (JS `hidden`) when the flag is 'none'. */
.rmm-detail__flag {
  flex: 0 1 auto;
  min-width: 0;
  display: inline-flex;
}

.rmm-detail__flag[hidden] { display: none; }

.rmm-detail__flag .flag-marker { min-width: 0; }

.rmm-detail__head-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.rmm-detail__head-actions { display: inline-flex; align-items: center; gap: 8px; }

/* Bordered "Remove line item" — error-red on hover (design). */
.rmm-detail__remove {
  height: var(--rmm-control-h-sm);
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--rmm-border-input);
  border-radius: var(--radius-md, 8px);
  background: var(--rmm-surface);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-700, #374151);
  cursor: pointer;
  transition: color var(--rmm-dur-fast) var(--rmm-ease),
      border-color var(--rmm-dur-fast) var(--rmm-ease);
}

.rmm-detail__remove:hover {
  border-color: var(--rmm-danger);
  color: var(--rmm-danger);
}

.rmm-detail__iconwrap { display: inline-flex; align-items: center; justify-content: center; }

/* Two regions: content (1.15fr) | Timeline panel (1fr) — the design grid. */
.rmm-detail__grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}

.rmm-detail__main {
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--rmm-border);
}

.rmm-detail__tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--rmm-border); padding: 0 24px; flex: 0 0 auto; }
.rmm-detail__tab {
  border: 0; background: transparent; cursor: pointer; height: 40px; padding: 0 2px;
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--rmm-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--rmm-dur-fast) var(--rmm-ease),
      border-color var(--rmm-dur-fast) var(--rmm-ease);
}
.rmm-detail__tab.is-active { color: var(--rmm-primary); border-bottom-color: var(--rmm-primary); }
.rmm-detail__body { padding: 24px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.rmm-detail__section { margin-bottom: 24px; }
.rmm-detail__section h4 {
  margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--rmm-text);
  padding-bottom: 4px; border-bottom: 1px solid var(--rmm-border);
}

/* Description island: BO-authored HTML must not break the layout. */
.rmm-detail__html { font-size: 14px; line-height: 1.65; color: var(--neutral-700, #374151); max-width: 100%; overflow-wrap: break-word; }
.rmm-detail__html img, .rmm-detail__html video, .rmm-detail__html iframe { max-width: 100%; height: auto; }
.rmm-detail__html table { max-width: 100%; }

/* Bordered spec list (design "Specification" card). */
/* 0.29.0 (row 3.9 review Fix 12; campaign-detail.dc.html): one rule per row, the label regular muted text, the value
   600 in ink. */
.rmm-detail__kv {
  margin: 0;
  border: 1px solid var(--rmm-border); border-radius: var(--rmm-radius); padding: 2px 16px;
  font-size: 13px;
}
.rmm-detail__kv-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 16px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--rmm-border-subtle);
}
.rmm-detail__kv-row:last-child { border-bottom: none; }
.rmm-detail__kv dt { margin: 0; font-weight: 400; color: var(--rmm-muted); }
.rmm-detail__kv dd {
  margin: 0; text-align: right; font-weight: 600; color: var(--rmm-text); overflow-wrap: break-word;
}

/* Uppercase-label meta grid (design order-dialog fields). */
.rmm-detail__meta {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 20px; margin-bottom: 24px;
}
.rmm-detail__meta-item { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rmm-detail__meta-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--rmm-muted);
}
.rmm-detail__meta-value { font-size: 14px; color: var(--rmm-text); overflow-wrap: break-word; }

/* Bordered rounded item table (design order-lines card). */
.rmm-detail__table { border: 1px solid var(--rmm-border); border-radius: var(--rmm-radius); overflow: hidden; }
.rmm-detail__table-head,
.rmm-detail__table-row {
  display: grid; grid-template-columns: minmax(0, 1.6fr) 64px 100px;
  gap: 0 10px; padding: 10px 16px; align-items: baseline;
}
.rmm-detail__table--2col .rmm-detail__table-head,
.rmm-detail__table--2col .rmm-detail__table-row { grid-template-columns: minmax(0, 1.6fr) 110px; }
.rmm-detail__table-head {
  background: var(--neutral-50, #F9FAFB); border-bottom: 1px solid var(--rmm-border);
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--rmm-muted);
}
.rmm-detail__table-row { padding: 12px 16px; border-bottom: 1px solid var(--rmm-border-subtle); font-size: 14px; }
.rmm-detail__table-row:last-child { border-bottom: none; }
.rmm-detail__cell--main { min-width: 0; font-weight: 600; color: var(--rmm-text); overflow-wrap: break-word; }
.rmm-detail__cell--num { text-align: right; font-variant-numeric: tabular-nums; color: var(--rmm-muted); white-space: nowrap; }
.rmm-detail__table-row .rmm-detail__cell--num:last-child { font-weight: 600; color: var(--rmm-text); }

/* Order modal item table (design: Item · Period · Qty · Amount, the item cell
   stacking name / placement / wallet). */
.rmm-detail__table--order .rmm-detail__table-head,
.rmm-detail__table--order .rmm-detail__table-row {
  grid-template-columns: minmax(0, 1.6fr) 92px 64px 92px;
  align-items: start;
}
.rmm-detail__table--order .rmm-detail__table-head span:nth-child(2) { text-align: left; }
.rmm-detail__table--order .rmm-detail__cell--main {
  display: flex; flex-direction: column; gap: 2px; font-weight: 400;
}
.rmm-detail__cell-name {
  font-weight: 600; color: var(--rmm-text);
  overflow: hidden; text-overflow: ellipsis;
}
/* Clickable, but the row's own text colour — not a primary-blue link. */
.rmm-detail__cell-name--open { cursor: pointer; text-decoration: none; }
.rmm-detail__cell-name--open:hover { color: var(--rmm-text); text-decoration: underline; }
.rmm-detail__cell-sub {
  font-size: 12px; color: var(--rmm-muted);
  overflow: hidden; text-overflow: ellipsis;
}
.rmm-detail__cell-wallet { display: flex; align-items: center; gap: 5px; min-width: 0; }
.rmm-detail__cell-wallet .rmm-detail__iconwrap { flex: 0 0 auto; display: inline-flex; }
.rmm-detail__cell-wallet > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rmm-detail__cell--period {
  font-size: 12px; color: var(--rmm-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Total row closing the table (design: tinted footer, no bottom border). */
.rmm-detail__table-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; font-size: 14px;
  background: var(--neutral-50, #F9FAFB); border-top: 1px solid var(--rmm-border);
}
.rmm-detail__table-foot-label { font-weight: 600; color: var(--rmm-muted); }
.rmm-detail__table-foot-value { font-weight: 700; color: var(--rmm-text); font-variant-numeric: tabular-nums; }

/* Download affordance (design: icon + primary link). */
.rmm-detail__download {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--rmm-primary); text-decoration: none;
}
.rmm-detail__download:hover { color: var(--rmm-primary-hover); }

.rmm-detail__link { color: var(--rmm-primary); cursor: pointer; }

.rmm-detail__loading { color: var(--rmm-muted); padding: 20px 0; text-align: center; }

/* ---- Timeline side panel (persistent, D2) ---- */
.rmm-detail__side {
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--neutral-50, #F9FAFB);
}

.rmm-detail__side-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--rmm-border); flex: 0 0 auto;
  background: var(--rmm-surface);
}

.rmm-detail__side-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--rmm-text); }

/* Composer BELOW the feed (oldest-first), per the design: the block sits after
   the feed and carries a top border. Drafts still survive tab switches because
   the composer lives outside the tabbed content region. */
.rmm-detail__composer {
  flex: 0 0 auto;
  padding: 14px 20px;
  border-top: 1px solid var(--rmm-border);
  background: var(--rmm-surface);
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

.rmm-detail__composer .rmm-conv__input {
  padding: 10px 12px; border: 1px solid var(--rmm-border-input); border-radius: var(--radius-md, 8px);
  font-family: inherit; font-size: 16px; color: var(--rmm-text); /* 1.8 §8.4 field value, §11 16 px minimum in fields */
  background: var(--rmm-surface); resize: none;
}

.rmm-detail__composer .rmm-conv__input:focus {
  border-color: var(--rmm-primary);
  box-shadow: none;
  outline: none;
}

.rmm-detail__composer .rmm-conv__actions { margin-top: 0; justify-content: flex-end; }

/* Row 4.1 review F3 (rmm-advertiser-design.md 1.8 §8.3, campaign-detail.dc.html, D213): the composer's Send is the md
   button in both modals and on the Accept page, 40 px, 0 18 px, label body-strong 14/600 */
.rmm-detail__send {
  height: 40px; padding: 0 18px; font-size: 14px; font-weight: 600;
  border-radius: var(--radius-md, 8px); display: inline-flex; align-items: center;
}

.rmm-detail__feed {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Shared composer bits */
.rmm-conv__empty { color: var(--rmm-muted); text-align: center; padding: 16px 0; }
.rmm-conv__error { color: var(--rmm-danger); font-size: 0.85rem; margin: 0; }
.rmm-conv__input { width: 100%; resize: vertical; }
.rmm-conv__actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

/* ---- Timeline feed items (design single-column idiom, D2) ----
   Messages align by actor side (LEFT retailer/system · RIGHT advertiser,
   accent-tinted). Status changes are centered full-bleed bands whose accent
   color follows the event color (server tokens or retailer hex, D5). */
.rmm-tlf__msg { display: flex; }
.rmm-tlf__msg--left { justify-content: flex-start; }
.rmm-tlf__msg--right { justify-content: flex-end; }

.rmm-tlf__bubble {
  max-width: 82%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: var(--rmm-radius);
  border: 1px solid var(--rmm-border);
  background: var(--rmm-surface);
}

.rmm-tlf__msg--right .rmm-tlf__bubble {
  background: var(--rmm-accent-bg);
  border-color: var(--rmm-accent);
}

.rmm-tlf__when { font-size: 13px; color: var(--rmm-muted); font-variant-numeric: tabular-nums; } /* 1.9 §7.2 floor (row 3.9) */
.rmm-tlf__who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rmm-tlf__author { font-size: 13px; font-weight: 700; color: var(--rmm-text); }
/* 0.29.0 (RDEV-299 row 3.9, D257; 1.9 §8.12): the retailer's name after the author, a neutral sm badge (§8.6). */
.rmm-tlf__org {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-pill, 999px);
  background: var(--neutral-100, #F3F4F6); color: var(--neutral-600, #4B5563);
  font-size: 13px; font-weight: 600; line-height: 18px; white-space: nowrap;
}
.rmm-tlf__body { font-size: 13px; line-height: 1.55; color: var(--rmm-text); white-space: pre-wrap; overflow-wrap: break-word; }

.rmm-tlf__status {
  margin: 0 -20px;
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  border-top: 1px solid var(--rmm-primary);
  border-bottom: 1px solid var(--rmm-primary);
  background: color-mix(in srgb, var(--rmm-primary) 8%, #fff);
  text-align: center;
}

.rmm-tlf__status-line {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 13px; line-height: 18px; color: var(--rmm-text);
}

/* RDEV-299 log D777 (Uffe 2026-10-21; rmm-advertiser-design.md 1.8 §7.2): the booking's band is one lifecycle line
   (D776, "Approved by … · order number … · valid until …"), the `small` 13/18 role; a line too long for the ~500 px
   timeline wraps as one centred text, its lines balanced, the dot inline before its first word (quote-timeline.js). */
.rmm-tlf__dot { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: var(--rmm-primary); vertical-align: middle; }
.rmm-tlf__status-label { font-weight: 700; text-wrap: balance; }
/* Transition band (design): "Status changed: <old struck through> → <new>". */
.rmm-tlf__status-lead { font-weight: 600; }
.rmm-tlf__status-from { text-decoration: line-through; opacity: 0.7; }
.rmm-tlf__status-arrow { width: 14px; height: 14px; flex: 0 0 auto; }
.rmm-tlf__status-when { font-size: 13px; color: var(--rmm-muted); font-variant-numeric: tabular-nums; }

/* D580 (Uffe 2026-10-19; campaign-detail.dc.html STATUS_COLORS): a line item's band in its stage's tone (§8.6). */
.rmm-tlf__status--success { border-color: var(--rmm-success); background: var(--rmm-accent-bg); }
.rmm-tlf__status--warning { border-color: var(--status-warning-strong, #B78103); background: var(--rmm-warning-bg); }
.rmm-tlf__status--primary { border-color: var(--rmm-primary); background: var(--rmm-primary-bg); }
.rmm-tlf__status--neutral { border-color: var(--neutral-300, #D1D5DB); background: var(--neutral-100, #F3F4F6); }
.rmm-tlf__status--success .rmm-tlf__status-line,
.rmm-tlf__status--success .rmm-tlf__status-when { color: var(--rmm-accent-fg); }
.rmm-tlf__status--warning .rmm-tlf__status-line,
.rmm-tlf__status--warning .rmm-tlf__status-when { color: var(--status-warning-strong, #B78103); }
.rmm-tlf__status--primary .rmm-tlf__status-line,
.rmm-tlf__status--primary .rmm-tlf__status-when { color: var(--primary-active, var(--rmm-primary-hover)); }
.rmm-tlf__status--neutral .rmm-tlf__status-line,
.rmm-tlf__status--neutral .rmm-tlf__status-when { color: var(--neutral-700, #374151); }

/* Stacked regions on narrow viewports (D3: verify smallest supported). */
@media (max-width: 900px) {
  .rmm-detail__grid {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1.2fr) minmax(0, 1fr);
  }

  .rmm-detail__main {
    border-right: none;
    border-bottom: 1px solid var(--rmm-border);
  }

  .rmm-detail__meta { grid-template-columns: 1fr 1fr; }
}

/* (The 0.8.1 two-sided center-rail timeline — .rmm-tl* — was replaced by the
   single-column .rmm-tlf* feed above, per design decision D2.) */

/* 4.5.1: the PDP's quantity control, beside the Add CTA. */
.pdp-qty { display: inline-flex; flex-direction: column; gap: 4px; margin: 0; }
.pdp-qty__input { width: 64px; text-align: center; }

/* ============================================================
   Advertiser Dashboard (logged-in home — RDEV-251)
   Design: dashboard.dc.html — "the single logged-in landing page:
   two actions, the advertiser's attention queue, and the account
   team." Renders inside the rmmapp App shell; reuses the shared
   tokens, .btn-* and .status-pill primitives.
   ============================================================ */

.dashboard-page {
    display: flex;
    flex-direction: column;
    /* Design: 40px between the landing page's sections (wider than the 32px
       used on the working pages — this one is meant to breathe). */
    gap: 40px;
}

/* ── Welcome ── */
.dash-welcome {
    margin: 0;
    font-size: 28px; /* 0.29.0 (RDEV-299 row 3.3, log D133): page-title 28/34 (rmm-advertiser-design.md 1.9 §7.2) */
    line-height: 34px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--rmm-text);
}



/* ── The two action cards ── */
.dash-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 860px) {
    .dash-actions { grid-template-columns: 1fr; }
}

/* 0.29.0 (RDEV-299 plan D67, log D709, Uffe 2026-10-20): a user who may not create campaigns has one action card,
   Explore products; it takes the whole row instead of the left half */
.dash-actions > .dash-action:only-child {
    grid-column: 1 / -1;
}

.dash-action {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background: var(--rmm-surface);
    border: 1px solid var(--rmm-border);
    border-radius: var(--rmm-radius);
    box-shadow: var(--rmm-shadow-card);
    transition: box-shadow var(--rmm-dur-base) var(--rmm-ease),
                transform var(--rmm-dur-base) var(--rmm-ease);
}

/* The card IS the link — kill every themed anchor colour/underline state so a
   retailer theme's link styling cannot repaint the title and body text. */
.dashboard-page .dash-action,
.dashboard-page .dash-action:link,
.dashboard-page .dash-action:visited,
.dashboard-page .dash-action:hover,
.dashboard-page .dash-action:focus,
.dashboard-page .dash-action:active {
    color: var(--rmm-text);
    text-decoration: none;
}

.dash-action:hover {
    box-shadow: var(--rmm-shadow-hover);
    transform: translateY(-1px);
}

.dash-action:focus-visible {
    outline: none;
    box-shadow: var(--rmm-shadow-focus);
}

/* Design `highlight`: the primary action is the emphasized one. The loud part
   of that emphasis is the solid icon tile below; the card itself only takes a
   brand edge, so two cards side by side still read as a pair. */
.dash-action--primary {
    border-color: var(--rmm-primary);
}

.dash-action__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.dash-action__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--rmm-radius);
    background: var(--rmm-subtle);
    color: var(--rmm-primary);
}

.dash-action__icon--solid {
    background: var(--rmm-primary);
    color: var(--rmm-on-primary);
}

.dash-action__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.dash-action__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--rmm-text);
}

.dash-action__sub {
    font-size: 14px;
    line-height: 1.5;
    color: var(--rmm-muted);
}

.dash-action__go {
    flex: none;
    display: inline-flex;
    align-items: center;
    color: var(--rmm-muted);
}

.dash-action__go--primary { color: var(--rmm-primary); }

/* ── Section scaffolding (shared by "Needs attention" and "Need help?") ── */
.dash-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dash-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.dash-section__title {
    margin: 0;
    font-size: 20px; /* row 3.3 review Fix 2: section-title 20/28 (design.md 1.9 §7.2) */
    line-height: 28px;
    font-weight: 600;
    color: var(--rmm-text);
}

.dash-section__meta {
    font-size: 13px;
    color: var(--rmm-muted);
    font-variant-numeric: tabular-nums;
}

.dash-card {
    background: var(--rmm-surface);
    border: 1px solid var(--rmm-border);
    border-radius: var(--rmm-radius);
    box-shadow: var(--rmm-shadow-card);
    padding: 24px;
}

/* Design Card padding="0": the table draws its own row padding. */
.dash-card--flush {
    padding: 0;
    overflow: hidden;
}

/* ── "Needs attention" table ── */
.attn-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* Design column proportions: 1.1fr 1.6fr 130px 190px 90px. */
.attn-table th:nth-child(1), .attn-table td:nth-child(1) { width: 22%; }
.attn-table th:nth-child(2), .attn-table td:nth-child(2) { width: 32%; }
.attn-table th:nth-child(3), .attn-table td:nth-child(3) { width: 130px; }
.attn-table th:nth-child(4), .attn-table td:nth-child(4) { width: 190px; }
.attn-table th:nth-child(5), .attn-table td:nth-child(5) { width: 90px; }

/* 0.29.0 (RDEV-299 plan D61, log D512; rmm-advertiser-design.md 1.9 §8.7): the header row in the `label` role,
   --text-muted on --neutral-50; 48 px rows of `small` (13/18) cells with 1 px --neutral-200 rules between them; the
   hover wash --neutral-50; Waiting right-aligned in tabular figures. */
.attn-table thead th {
    text-align: left;
    padding: 12px 24px;
    background: var(--neutral-50, #F9FAFB);
    border-bottom: 1px solid var(--neutral-200, #E5E7EB);
    font-size: 13px; /* row 3.3 review Fix 6: the `label` role 13/16 600 +0.08em (§7.2) */
    line-height: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--rmm-muted);
    white-space: nowrap;
}

.attn-table thead th.is-right { text-align: right; }

.attn-table tbody td {
    height: 48px; /* a two-line cell (a name over its second line, 38 px) fits inside the 48 px too */
    padding: 4px 24px;
    border-bottom: 1px solid var(--neutral-200, #E5E7EB);
    font-size: 13px;
    line-height: 18px;
    vertical-align: middle;
}

.attn-table tbody tr:last-child td { border-bottom: 0; }

.attn-table td.is-right { text-align: right; }

.attn-row { cursor: pointer; }

.attn-row:hover { background: var(--neutral-50, #F9FAFB); }

.attn-row__campaign {
    color: var(--rmm-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attn-row__name {
    display: block;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The whole row is the affordance — the name is bold body text, not a coloured
   link (same rule the campaign rows follow). */
.dashboard-page .attn-row__name,
.dashboard-page .attn-row__name:link,
.dashboard-page .attn-row__name:visited,
.dashboard-page .attn-row__name:hover,
.dashboard-page .attn-row__name:focus {
    color: var(--rmm-text);
    text-decoration: none;
}

.attn-row__format {
    display: block;
    margin-top: 2px;
    font-size: 13px; /* row 3.3: §7 nothing below 13 px (the prototype's second line) */
    color: var(--rmm-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attn-row__waited {
    font-variant-numeric: tabular-nums;
    color: var(--rmm-muted);
    white-space: nowrap;
}

/* D515: the line under the capped table, `small` in --text-muted with a §8.2 link to the campaign list */
.attn-more {
    margin: 0;
    padding: 12px 24px;
    border-top: 1px solid var(--neutral-200, #E5E7EB);
    font-size: 13px;
    line-height: 18px;
    color: var(--rmm-muted);
}
.dashboard-page .attn-more__link,
.dashboard-page .attn-more__link:visited {
    color: var(--rmm-primary);
    text-decoration: none;
}
.dashboard-page .attn-more__link:hover { text-decoration: underline; }

/* Narrow: one cell per line with its header inlined. The design drops the
   header row entirely below 1100px — a five-cell row cannot be split into two
   columns without scrambling the reading order — and labels each value
   instead. */
@media (max-width: 1100px) {
    .attn-table, .attn-table tbody, .attn-table tr, .attn-table td { display: block; width: auto; }
    .attn-table thead { display: none; }
    .attn-table th:nth-child(n), .attn-table td:nth-child(n) { width: auto; }
    .attn-table tbody tr { padding: 14px 20px; border-bottom: 1px solid var(--neutral-200, #E5E7EB); }
    .attn-table tbody td { height: auto; }
    .attn-table tbody tr:last-child { border-bottom: 0; }
    .attn-table tbody td { padding: 3px 0; border-bottom: 0; }
    .attn-table tbody td.is-right { text-align: left; }
    .attn-row__waited::before {
        content: attr(data-label) " ";
        color: var(--rmm-faint);
    }
}

/* ── Flag marker (design FlagMarker, row variant) ──
   Deliberately NOT a badge: the Stage column owns the badge treatment and must
   stay dominant, so the flag reads as a dot plus quiet text. The halo derives
   from the same token as the dot, so a retailer rebrand carries. 0.29.0 (Phase 3 review F1): 13 px, as the
   prototype's FlagMarker in every variant (rmm-advertiser-design.md 1.8 §7.2: nothing below 13 px). */
.flag-marker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.flag-marker__dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.flag-marker__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The ball is with the RETAILER — brand primary. */
.flag-marker--retailer { color: var(--rmm-primary); }
.flag-marker--retailer .flag-marker__dot {
    background: var(--rmm-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rmm-primary) 18%, transparent);
}

/* The ball is with YOU — warning amber, so your own queue is the one that
   catches the eye. */
.flag-marker--advertiser { color: var(--status-warning-strong, #997404); }
.flag-marker--advertiser .flag-marker__dot {
    background: var(--rmm-warning);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rmm-warning) 18%, transparent);
}

/* 'none' never reaches this queue, but the tone exists for reuse elsewhere. */
.flag-marker--none { color: var(--rmm-muted); font-weight: 500; }
.flag-marker--none .flag-marker__dot { background: var(--rmm-faint); }

/* ── Empty state ── */
.dash-empty {
    display: flex;
    align-items: center;
    gap: 16px;
}

.dash-empty__mark {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--rmm-subtle);
    color: var(--rmm-accent);
}

.dash-empty__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.dash-empty__title {
    font-size: 14px; /* row 3.3 review Fix 16: body-strong 14/600 (the prototype) */
    font-weight: 600;
    color: var(--rmm-text);
}

.dash-empty__body {
    font-size: 14px;
    line-height: 1.6;
    color: var(--rmm-muted);
}

/* ── Help card ── */
.dash-help {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.dash-help__text {
    flex: 1;
    min-width: 220px;
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--rmm-muted);
}

/* 0.29.0 (RDEV-299 row 3.3, log D135, D138; dashboard.dc.html): the Owner beside the line, a 56 px Primary circle with
   their initials, the name 16/600 over "Account manager"; the quotation row's second line in the warning text color
   while the date is close and in danger once it has passed. */
.dash-help__person { display: flex; align-items: center; gap: 16px; min-width: 0; }
.dash-help__avatar {
    width: 56px; height: 56px; flex: none; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--rmm-primary); color: var(--on-primary, #fff);
    font-size: 20px; font-weight: 600; letter-spacing: 0.02em;
}
.dash-help__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dash-help__name { font-size: 16px; font-weight: 600; color: var(--rmm-text); }
.dash-help__role { font-size: 14px; color: var(--rmm-muted); }
.attn-row__format--warning { color: var(--status-warning-text, #664D03); }
.attn-row__format--danger { color: var(--status-danger, #DC3545); }

/* ============================================================
   Native advertiser Product Detail page (design product-detail.dc.html)
   Wrapper: .product-detail-page — LISTED in the --rmm-* token scope at the
   top of this file. Adding a page here without adding its wrapper class
   there renders it completely unthemed (tasks/lessons.md).
   ============================================================ */

/* Design <main>: flex column, gap 24px. The App shell owns the page padding.
   1.8 §8.1: a data page — capped at 1440 px, left-aligned (no auto margin). */
.product-detail-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 1440px;
    margin-inline: 0;
}

/* ── Breadcrumb: 13px muted, links in the design's --text-link (= Primary) ── */
.pdp-crumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--rmm-muted);
}

.pdp-crumbs__sep { color: var(--rmm-faint); }

/* Anchors: pin the colour through every link state, or the theme/Bootstrap
   link blue outranks it (same trap as the dashboard header buttons). */
.product-detail-page .pdp-crumbs__link,
.product-detail-page .pdp-crumbs__link:link,
.product-detail-page .pdp-crumbs__link:visited,
.product-detail-page .pdp-crumbs__link:hover,
.product-detail-page .pdp-crumbs__link:focus,
.product-detail-page .pdp-crumbs__link:active {
    color: var(--rmm-primary);
    text-decoration: none;
}

.product-detail-page .pdp-crumbs__link:hover { text-decoration: underline; }

.pdp-crumbs__current { color: var(--rmm-muted); }

/* ── Two-column grid (product-detail.dc.html: 0.9fr 1.25fr, gap 28, the columns stretch to one
      height; 1fr below desktop). 0.29.0 (RDEV-299 row 3.4, D148): the left column is the image card,
      then the Delivery lead times and Can be funded via card, which grows to the product card's foot. ── */
.pdp-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: stretch;
}

@media (min-width: 992px) {
    .pdp-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr); }
    .pdp-grid--flexible { grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.7fr); }
}

.pdp-aside {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

/* ── Shared card chrome (1.9 §8.11: white, 1px neutral-200, radius-lg, card shadow) ── */
.pdp-card {
    background: var(--rmm-surface);
    border: 1px solid var(--rmm-border);
    border-radius: var(--rmm-radius-lg);
    box-shadow: var(--rmm-shadow-card);
}

.pdp-media {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* D148: Delivery lead times, then Can be funded via, under a rule. */
.pdp-delivery {
    flex: 1 1 auto;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pdp-delivery__title {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    color: var(--rmm-text);
}

.pdp-delivery__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pdp-delivery__item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--neutral-700, #374151);
}

.pdp-delivery__item::before {
    content: "";
    flex: none;
    width: 5px;
    height: 5px;
    margin-top: 6px;
    align-self: flex-start;
    border-radius: 50%;
    background: var(--neutral-400, #9CA3AF);
}

.pdp-delivery__note {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--rmm-muted);
}

.pdp-main {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.pdp-head {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pdp-divider {
    height: 1px;
    margin: 0;
    border: 0;
    background: var(--rmm-border);
}

/* ── Placement schematic ── */
.pdp-hero {
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rmm-subtle);
    border: 1px solid var(--rmm-border);
    border-radius: var(--rmm-radius);
    overflow: hidden;
}

.pdp-hero__img {
    width: 100%;
    height: 100%;
    /* Row 3.4 round 2 (D538, Uffe 2026-10-19): the whole photo, contained on the frame's neutral background
       (--surface-muted), never cropped; the product cards keep D147's cover. */
    object-fit: contain;
    display: block;
}

.pdp-hero__empty {
    padding: 0 16px;
    font-size: 13px;
    text-align: center;
    color: var(--rmm-muted);
}

/* ── Thumbnail row (design: 4 columns, gap 12, 1/1 buttons) ── */
.pdp-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.pdp-thumb {
    aspect-ratio: 1 / 1;
    padding: 0;
    overflow: hidden;
    background: var(--rmm-subtle);
    border: 1px solid var(--rmm-border);
    border-radius: var(--rmm-radius);
    cursor: pointer;
}

.pdp-thumb.is-selected {
    border-color: var(--rmm-primary);
    box-shadow: 0 0 0 2px var(--rmm-primary);
}

.pdp-thumb:focus-visible {
    outline: none;
    box-shadow: var(--rmm-shadow-focus);
}

.pdp-thumb__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* ── Title row + channel pill ── */
.pdp-titlerow {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pdp-title {
    margin: 0;
    font-size: 28px;
    line-height: 34px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--rmm-text);
}

.pdp-channel {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    border-radius: var(--radius-pill, 999px);
    background: var(--rmm-primary-bg);
    color: var(--rmm-primary);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.pdp-lede {
    margin: 0;
    max-width: 68ch;
    font-size: 14px;
    line-height: 1.6;
    color: var(--neutral-700, #374151);
    text-wrap: pretty;
}

/* ── Configurator host ── */
.pdp-config { min-width: 0; }

/* Configurator options (design: label row + a 220×36 select). Rendered but
   INERT — see the template comment. Shown disabled so the UI does not promise
   behaviour that isn't there. */
.pdp-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.pdp-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.pdp-option__label {
    font-size: 13px;
    color: var(--rmm-text);
}

.pdp-option__select {
    width: 220px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--rmm-border-input);
    border-radius: var(--rmm-radius);
    background: var(--rmm-surface);
    font-family: inherit;
    font-size: 13px;
    color: var(--rmm-text);
}

.pdp-option__select:disabled {
    color: var(--rmm-muted);
    background: var(--rmm-subtle);
    cursor: not-allowed;
}

.pdp-config__nojs {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--rmm-muted);
}

.pdp-config__nojs-list {
    margin: 0;
    padding-left: 20px;
    font-size: 13px;
    color: var(--rmm-text);
}

/* ── Add-to-campaign row (design: align-items flex-end, gap 12) ── */
.pdp-add {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.pdp-add__field {
    flex: 1 1 260px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 1.9 §8.4: the field label above, body-strong, sentence case (ProductConfigurator.dc.html: "Add to campaign"). */
.pdp-add__label {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--rmm-text);
}

/* Inside the configurator's quantity row (D148 layout): label above the selector, 4 px apart. */
.rmm-ap__campaign .pdp-add__field { gap: 4px; }

.pdp-add__new { display: flex; flex-direction: column; gap: 6px; }
.pdp-add__new[hidden] { display: none; }

.product-detail-page .pdp-add__new .form-control {
    height: var(--rmm-control-h);
    padding: 0 12px;
    border: 1px solid var(--rmm-border-input);
    border-radius: var(--rmm-radius);
    font-size: 16px;
    color: var(--rmm-text);
}

.product-detail-page .pdp-add__new .form-control:focus {
    outline: none;
    border-color: var(--rmm-primary);
    box-shadow: none;
}

/* ── Campaign selector: plan D67 (log D711, Uffe 2026-10-20) the native select, drawn by the portal's one select rule
   (end of this file); it fills the field (the select-styled button and popover panel of 0.9.0 are gone) ── */
.pdp-add__select { width: 100%; }

/* ── Primary CTA (design: 44px, 0 20px, r8, 15px/600, .5 when disabled) ── */
.product-detail-page .pdp-cta,
.product-detail-page .pdp-cta:link,
.product-detail-page .pdp-cta:visited,
.product-detail-page .pdp-cta:hover,
.product-detail-page .pdp-cta:focus,
.product-detail-page .pdp-cta:active {
    /* 1.8 §8.3 md: 40 px, padding 0 18, label 14/600 */
    height: var(--rmm-control-h);
    padding: 0 18px;
    border-radius: var(--rmm-radius);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    color: var(--rmm-on-primary);
    background: var(--rmm-primary);
    border-color: var(--rmm-primary);
}

.product-detail-page .pdp-cta:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.pdp-error {
    margin: 0;
    font-size: 13px;
    color: var(--rmm-danger);
}

.pdp-error[hidden] { display: none; }

/* ── Tab card (product-detail.dc.html: padding 0 32 32, a 56 px tab row; 1.9 §8.10 tabs: active
      --text-strong 700 over a 2 px Primary rule, inactive --text-muted 500) ── */
.pdp-tabcard { padding: 0 32px 32px; }

.pdp-tabs {
    display: flex;
    align-items: flex-end;
    gap: 28px;
    height: 56px;
    border-bottom: 1px solid var(--rmm-border);
}

.pdp-tab {
    padding: 0 0 12px;
    margin-bottom: -1px;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    font-size: 14px;
    font-weight: 500;
    color: var(--rmm-muted);
    cursor: pointer;
}

.pdp-tab.is-active {
    border-bottom-color: var(--rmm-primary);
    font-weight: 700;
    color: var(--rmm-text);
}

.pdp-panel {
    padding-top: 20px;
    max-width: 72ch;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* An author `display` beats the UA's [hidden] rule, so the inactive tab panel
   needs this explicitly or both panels paint at once (tasks/lessons.md). */
.pdp-panel[hidden] { display: none; }

.pdp-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pdp-section__title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--rmm-text);
}

/* Retailer-authored description: keep it inside the design's type scale (product-detail.dc.html: 14 / 1.65, --text-body). */
.pdp-rte {
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-body, var(--rmm-text));
}

.pdp-rte > *:first-child { margin-top: 0; }
.pdp-rte > *:last-child { margin-bottom: 0; }

.pdp-rte h2,
.pdp-rte h3,
.pdp-rte h4,
.pdp-rte h5 {
    margin: 16px 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--rmm-text);
}

/* The theme resets list markers away globally, so restore them here — a
   retailer's bulleted "What you get" copy is unreadable as a flat indent. */
.pdp-rte ul,
.pdp-rte ol {
    margin: 0 0 12px;
    padding-left: 20px;
}

.pdp-rte ul { list-style: disc outside; }
.pdp-rte ol { list-style: decimal outside; }

.pdp-rte li { margin-bottom: 4px; }

/* ── Specifications table (design: 180px 1fr rows, 1px dividers) ── */
.pdp-spec {
    border: 1px solid var(--rmm-border);
    border-radius: var(--rmm-radius);
    overflow: hidden;
}

.pdp-spec__row {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 16px;
    padding: 10px 16px;
    font-size: 13px;
    border-bottom: 1px solid var(--rmm-border);
}

.pdp-spec__row:last-child { border-bottom: 0; }

.pdp-spec__label { color: var(--rmm-muted); }
.pdp-spec__value { color: var(--rmm-text); }

@media (max-width: 640px) {
    .pdp-spec__row { grid-template-columns: 1fr; gap: 2px; }
    .pdp-tabcard { padding: 0 20px 24px; }
}

/* ── Toast (design: fixed bottom-right, ink surface, accent dot) ── */
.pdp-toast {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: min(420px, calc(100vw - 56px));
    padding: 14px 18px;
    border-radius: var(--rmm-radius);
    background: var(--neutral-900, #1F2937);
    color: var(--neutral-50, #F9FAFB);
    box-shadow: var(--rmm-shadow-modal);
    font-size: 14px;
}

.pdp-toast[hidden] { display: none; }

.pdp-toast__dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill, 999px);
    background: var(--rmm-accent);
}

.pdp-toast__text { flex: 1 1 auto; }

.product-detail-page .pdp-toast__action,
.product-detail-page .pdp-toast__action:link,
.product-detail-page .pdp-toast__action:visited,
.product-detail-page .pdp-toast__action:hover,
.product-detail-page .pdp-toast__action:focus,
.product-detail-page .pdp-toast__action:active {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-50, #F9FAFB);
    text-decoration: underline;
}

/* ── Internal (retailer-only) messages ───────────────────────────────────────
   ps_customer_message.private = 1 — PrestaShop's "Display to customer?"
   inverted. These rows only ever reach a retailer-employee session; the server
   filters them out of every other session's query, so nothing here is load-
   bearing for secrecy. It exists so a retailer can tell AT A GLANCE what the
   advertiser cannot read, and it says so in words as well as colour — the
   distinction must survive greyscale, colour-blindness and a dark theme. */
/* Design (campaign-detail.dc.html) marks internal entries in NEUTRAL GREY, not a
   warning colour — an internal note is a normal act, not an alarm — with a dashed
   border and an inset left rail. */
.rmm-tlf__bubble--internal,
.rmm-tl__panel--internal {
    border: 1px dashed var(--neutral-400, #9CA3AF);
    box-shadow: inset 3px 0 0 var(--neutral-400, #9CA3AF);
    background: var(--neutral-100, #F3F4F6);
}

.rmm-tlf__internal-tag,
.rmm-tl__internal-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--neutral-700, #374151);
    border: 1px solid var(--neutral-400, #9CA3AF);
    white-space: nowrap;
}

/* ── Message-visibility switch (design: campaign-detail.dc.html, retailerView) ──
   A segmented Internal / Public control, not a checkbox. The design's own note is
   that "composer chrome changes with visibility so an internal note can never be
   posted publicly by accident" — so the whole composer repaints per mode, and the
   distinction never rests on colour alone: icon (padlock vs globe), wording, border
   style and the Send label all move together. */
.rmm-conv__vis {
    display: inline-flex;
    margin-right: auto;
    padding: 2px;
    border: 1px solid var(--rmm-border, #E5E7EB);
    border-radius: var(--radius-md, 8px);
    background: var(--rmm-surface, #FFFFFF);
}

.rmm-conv__vis-opt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--rmm-radius);
    background: transparent;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--rmm-muted, #6B7280);
    cursor: pointer;
}

/* Pressed: Public takes the brand tint, Internal a neutral one — internal is a
   normal act, not an alarm, so it never borrows a warning colour. */
.rmm-conv__vis-opt.is-on[data-vis="public"] {
    background: var(--primary-subtle, #EDF0F5);
    color: var(--primary, #1F4788);
}

.rmm-conv__vis-opt.is-on[data-vis="internal"] {
    background: var(--neutral-200, #E5E7EB);
    color: var(--neutral-700, #374151);
}

.rmm-conv__vis-icon { width: 13px; height: 13px; flex: none; }

/* Banner above the field: says what posting will do, before anything is typed. */
.rmm-conv__vis-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--primary, #1F4788);
}

.rmm-conv__vis-banner.is-internal { color: var(--rmm-muted, #6B7280); }

/* Internal mode repaints the composer itself — dashed field, tinted panel, an
   inset top rule, and an outlined Send so it cannot be mistaken for the public one. */
.rmm-detail__composer.is-internal {
    background: var(--neutral-100, #F3F4F6);
    box-shadow: inset 0 3px 0 var(--neutral-400, #9CA3AF);
}

.rmm-detail__composer.is-internal .rmm-conv__input {
    border: 1px dashed var(--neutral-400, #9CA3AF);
}

.rmm-detail__send--internal {
    background: var(--rmm-surface, #FFFFFF);
    border: 1px solid var(--neutral-400, #9CA3AF);
    color: var(--neutral-700, #374151);
}

/* ── Plan-view availability glyphs (v3 E4) ───────────────────────────────────
   "The two must differ in outer silhouette, not only interior detail" and
   "never expressed as colour". So the distinction is carried by the SVG outline
   (triangle vs circle) and by each glyph's <title>; colour here is only a mild
   emphasis and the meaning survives without it. Sized in em so they track the
   row's type scale rather than fighting it. */
.gantt-row__glyph {
    width: 1em;
    height: 1em;
    flex: none;
    margin-left: 6px;
    vertical-align: -0.12em;
    color: var(--rmm-muted, #6B7280);
}

/* Deliberately NOT a red/amber pair — that would make colour the signal. Both
   sit in the same muted family; the shape is what differs. */
.gantt-row__glyph--warn { color: var(--neutral-700, #374151); }
.gantt-row__glyph--elapsed { color: var(--rmm-muted, #6B7280); }

/* ── Notes as a Specification row (v3 E4) ────────────────────────────────────
   "Renders as plain text like every other row until clicked." So the resting
   state carries NO input chrome and no pencil — the text is the control. */
.rmm-detail__note-text {
    display: inline-block;
    cursor: pointer;
    border-bottom: 1px dashed transparent;
    white-space: pre-line;
}

.rmm-detail__note-text:hover,
.rmm-detail__note-text:focus-visible {
    border-bottom-color: var(--rmm-border, #E5E7EB);
    outline: none;
}

/* Empty: a faint "Add a note" affordance that is itself the click target, so an
   empty note is still reachable without a persistent edit button. */
.rmm-detail__note-text.is-empty {
    color: var(--rmm-muted, #6B7280);
    font-style: italic;
    opacity: 0.75;
}

.rmm-detail__note-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--rmm-border-input, #6B7280);
    border-radius: var(--rmm-radius, 8px);
    font: inherit;
    font-size: 13px;
    resize: vertical;
}

/* Save/Cancel exist only while editing — they are built on enter and destroyed
   on exit, so there is nothing to hide here. */
.rmm-detail__note-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px;
}

/* "Changes are recorded in the timeline." — the design's reassurance under the
   editor, so nobody wonders whether an edit is silent. */
.rmm-detail__note-hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--rmm-muted, #6B7280);
}

/* Compact pair (design: 30px, bordered Cancel + primary Save). */
.rmm-detail__note-save,
.rmm-detail__note-cancel {
    height: 30px;
    padding: 0 12px;
    border-radius: var(--rmm-radius);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.rmm-detail__note-save {
    border: 0;
    background: var(--rmm-primary);
    color: var(--rmm-on-primary);
}

.rmm-detail__note-save:hover { opacity: 0.9; }
.rmm-detail__note-save[disabled] { opacity: 0.5; cursor: default; }

.rmm-detail__note-cancel {
    border: 1px solid var(--rmm-border, #E5E7EB);
    background: var(--rmm-surface, #FFFFFF);
    font: inherit;
    font-size: 13px;
    color: var(--rmm-text);
    text-decoration: none;
    cursor: pointer;
}

/* ── Plan legend (v3 E4: below the grid, left-aligned, single line) ───────────
   The glyphs are the new visual language on this view, so the legend explains
   them — and it repeats each glyph's own SVG rather than a coloured dot, since
   the requirement is that shape carries the meaning. */
.gantt-legend--plan {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 18px;
    margin: 10px 0 0;
    padding: 0 2px;
    font-size: 12px;
    color: var(--rmm-muted, #6B7280);
    overflow-x: auto;
}

.gantt-legend--plan .legend-entry {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.gantt-legend--plan .gantt-row__glyph { margin-left: 0; }

/* ── Action-flag selector (v3 Part 2) ────────────────────────────────────────
   Lives on the PUBLIC composer only; setMsgVis() hides the row entirely in
   internal mode rather than disabling it, so an internal note structurally
   cannot carry a flag. */
.rmm-conv__flag { margin-top: 8px; }
.rmm-conv__flag[hidden] { display: none; }

.rmm-conv__flag-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--rmm-muted, #6B7280);
}

.rmm-conv__flag-select {
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--rmm-border-input, #6B7280);
    border-radius: var(--radius-md, 8px);
    background: var(--rmm-surface, #FFFFFF);
    font: inherit;
    font-size: 12px;
    color: var(--rmm-text, #2C3E50);
    cursor: pointer;
}

/* A3: with no usable schematic the hero must not hold a full-size empty square —
   that void is what read as an oversized card. Collapse it to a message-sized
   band and drop the 1:1 reservation. */
.pdp-hero.is-empty {
    aspect-ratio: auto;
    min-height: 96px;
    padding: 20px;
}

/* 0.39.0 — delivery schedule (Delivery Management v8): the line-item modal's
   deadline table tags, and the short-notice warnings on the add flows. */
/* 1.8 §8.6 sm badge (2px 8px) in the neutral and danger tones. */
.rmm-detail__sched-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--radius-pill, 999px);
  background: var(--neutral-100, #F3F4F6);
  color: var(--neutral-600, #4B5563);
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  vertical-align: baseline;
}
.rmm-detail__sched-tag--overdue {
  background: var(--rmm-danger-bg);
  color: var(--rmm-danger-hover);
}
/* 1.8 §8.8 alert, warning tone: subtle fill, 1 px base border, radius md, 12/16 padding, small text. */
.rmm-detail__sched-notice,
.rmm-add-short-notice {
  margin-top: 10px;
  padding: 12px 16px;
  border-radius: var(--rmm-radius);
  background: var(--rmm-warning-bg);
  border: 1px solid var(--rmm-warning);
  color: var(--rmm-warning-fg);
  font-size: 13px;
  line-height: 18px;
}

/* ==========================================================================
   Confirmation page (confirmation.dc.html; 0.29.0 RDEV-299 row 1.4, D162, D163):
   one left-aligned 720 px column (§8.1: content never centers), cards §8.11,
   buttons §8.3 md, badge §8.6 neutral, type §7.2. `.rmm-done`: `.rmm-confirm`
   is the confirm dialog (R13).
   ========================================================================== */
.rmm-done { padding: 0; }
.rmm-done__col { max-width: 720px; width: 100%; display: flex; flex-direction: column; gap: 24px; }
.rmm-done__hero,
.rmm-done__card {
    background: var(--rmm-surface);
    border: 1px solid var(--neutral-200, var(--rmm-border));
    border-radius: var(--rmm-radius-lg);
    box-shadow: var(--rmm-shadow-card);
}
.rmm-done__hero { padding: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.rmm-done__mark { width: 56px; height: 56px; border-radius: 999px; display: flex; align-items: center; justify-content: center; }
.rmm-done__mark svg { width: 28px; height: 28px; }
.rmm-done__mark--sent { background: var(--rmm-primary-bg); color: var(--rmm-primary); }
.rmm-done__mark--ok { background: var(--rmm-accent-bg); color: var(--rmm-success); }
.rmm-done__headings { display: flex; flex-direction: column; gap: 8px; }
.rmm-done__title { margin: 0; font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.02em; color: var(--rmm-text); text-wrap: pretty; }
.rmm-done__lede { margin: 0; font-size: 14px; line-height: 1.6; color: var(--rmm-muted); max-width: 68ch; text-wrap: pretty; }
.rmm-done__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 4px; }
.rmm-done__ref {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px;
    background: var(--neutral-100, var(--rmm-border-subtle)); color: var(--neutral-600, var(--rmm-muted));
    font-size: 13px; line-height: 18px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.rmm-done__ref svg { width: 16px; height: 16px; }
.rmm-done__stamp { font-size: 13px; line-height: 18px; color: var(--rmm-muted); }
.rmm-done__card { overflow: hidden; }
.rmm-done__card-head { padding: 16px 24px; border-bottom: 1px solid var(--neutral-200, var(--rmm-border)); }
.rmm-done__card-title { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; color: var(--rmm-text); }
.rmm-done__summary { padding: 8px 24px 24px; }
.rmm-done__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--neutral-100, var(--rmm-border-subtle)); font-size: 14px; line-height: 20px; }
.rmm-done__row-label { flex: none; color: var(--rmm-muted); }
.rmm-done__row-value { text-align: right; font-weight: 600; color: var(--rmm-text); font-variant-numeric: tabular-nums; }
.rmm-done__total { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 0 4px; }
.rmm-done__total-label { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--rmm-text); }
.rmm-done__total-value { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--rmm-text); font-variant-numeric: tabular-nums; }
.rmm-done__total-note { margin: 2px 0 0; font-size: 13px; line-height: 18px; font-style: italic; color: var(--rmm-muted); }
.rmm-done__next { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.rmm-done__steps { display: flex; flex-direction: column; gap: 2px; }
.rmm-done__step { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; padding: 0 0 16px; }
.rmm-done__step-rail { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rmm-done__dot {
    width: 26px; height: 26px; flex: none; border-radius: 999px; display: flex; align-items: center; justify-content: center;
    background: var(--rmm-surface); border: 1px solid var(--neutral-300, #D1D5DB); color: var(--rmm-muted);
    font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.rmm-done__dot--done { background: var(--rmm-success); border-color: var(--rmm-success); color: var(--rmm-surface); }
.rmm-done__dot svg { width: 14px; height: 14px; }
.rmm-done__rail { width: 1px; flex: 1; min-height: 14px; background: var(--neutral-200, var(--rmm-border)); }
.rmm-done__step-body { display: flex; flex-direction: column; gap: 3px; padding-top: 3px; }
.rmm-done__step-title { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--rmm-text); }
.rmm-done__step-text { font-size: 13px; line-height: 1.55; color: var(--rmm-muted); max-width: 68ch; text-wrap: pretty; }
.rmm-done__prose { margin: 0; font-size: 14px; line-height: 1.6; color: var(--rmm-muted); max-width: 68ch; text-wrap: pretty; }
.rmm-done__prose-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 2px; }
.rmm-done__actions { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 8px; }
.rmm-done__btn {
    height: var(--rmm-control-h); padding: 0 18px; border-radius: var(--rmm-radius); display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; line-height: 20px; font-weight: 600; text-decoration: none; transition: background var(--rmm-dur-fast) var(--rmm-ease);
}
.rmm-done__btn:hover, .rmm-done__btn:focus { text-decoration: none; }
.rmm-done__btn--primary { background: var(--rmm-primary); border: 1px solid var(--rmm-primary); color: var(--rmm-on-primary); }
.rmm-done__btn--primary:hover { background: var(--rmm-primary-hover); border-color: var(--rmm-primary-hover); color: var(--rmm-on-primary); }
.rmm-done__btn--secondary { background: var(--rmm-surface); border: 1px solid var(--rmm-border-input); color: var(--rmm-primary); }
.rmm-done__btn--secondary:hover { background: var(--rmm-primary-bg); color: var(--rmm-primary); }
.rmm-done__btn:focus-visible,
.rmm-done__link:focus-visible { outline: 2px solid var(--rmm-primary); outline-offset: 2px; box-shadow: var(--rmm-shadow-focus); }
.rmm-done__link { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--text-link, var(--rmm-primary)); text-decoration: none; }
.rmm-done__link:hover { text-decoration: underline; }
@media (max-width: 767px) {
    .rmm-done__hero { padding: 20px; }
    .rmm-done__actions { grid-template-columns: 1fr; }
}

/* ── Line-item modal: the deadline chain (0.41.0, campaign-detail design) ─
   Fixed length — passed rows stay. Deadlines only, no ranges or durations.
   The current stage carries the left rule and the bold; overdue is derived
   and marked on the DATE itself, in the same red as the timeline diamond. */
.rmm-sched__title {
    padding-bottom: 4px;
    border-bottom: 1px solid var(--rmm-border, #E5E7EB);
}

.rmm-sched__note {
    margin: 6px 0 2px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--rmm-muted, #6B7280);
}

.rmm-sched__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 9px 0 9px 10px;
    border-bottom: 1px solid var(--rmm-subtle, #ECEEF0);
    border-left: 2px solid transparent;
    font-size: 13px;
    color: var(--rmm-text, #2C3E50);
}

.rmm-sched__row--head {
    padding: 8px 0 6px 10px;
    border-bottom: 1px solid var(--rmm-border, #E5E7EB);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rmm-muted, #6B7280);
}

.rmm-sched__row--current {
    border-left-color: var(--rmm-primary);
}

.rmm-sched__row--current .rmm-sched__stage {
    font-weight: 700;
    color: var(--rmm-text, #2C3E50);
}

.rmm-sched__stage { font-weight: 500; }

.rmm-sched__date {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 6px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.rmm-sched__date--overdue > span:first-child { color: var(--rmm-danger); }


/* ── 0.16.0 Orders tab + order detail banner (Campaign Planning v12) ─────── */
.order-table--bookings .order-table__head, .order-table--bookings .order-table__row { grid-template-columns: 110px 90px minmax(0, 1fr) 110px 110px 110px; }
.order-action { text-align: right; }
/* 1.8 §8.8 alerts: subtle status fill, 1 px border in the base colour, radius md, padding 12/16, small text in the text-on-subtle colour. */
.rmm-detail__banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: var(--rmm-radius); margin-bottom: 14px; font-size: 13px; line-height: 18px; background: var(--rmm-subtle); border: 1px solid var(--rmm-border); }
.rmm-detail__banner--approved { background: var(--rmm-warning-bg); border-color: var(--rmm-warning); color: var(--rmm-warning-fg); }
.rmm-detail__banner--ordered, .rmm-detail__banner--completed { background: var(--rmm-accent-bg); border-color: var(--rmm-accent); color: var(--rmm-accent-fg); }
.rmm-detail__banner--rejected, .rmm-detail__banner--declined, .rmm-detail__banner--expired, .rmm-detail__banner--cancelled { background: var(--rmm-danger-bg); border-color: var(--rmm-danger); color: var(--rmm-danger-hover); }
.rmm-detail__banner-text { font-weight: 600; }
.rmm-detail__secondary { flex-basis: 100%; }
.rmm-detail__secondary-confirm { display: grid; gap: 8px; grid-template-columns: 1fr auto auto; align-items: start; margin-top: 6px; }
.rmm-detail__secondary-confirm textarea { grid-column: 1 / -1; }
/* ── Event calendars (0.16.0, RDEV-266) ──────────────────────────────────────
   Retailer commercial moments drawn behind the bars on the campaign calendar
   and the Plan tab. Translucent tint + ink come from Platform\Events\Palette
   (inline styles); overlaps stack and read darker. pointer-events off so the
   bands never intercept clicks meant for bars; the native title carries
   "name / YYYY-MM-DD – YYYY-MM-DD". Bands are decoration on the axis — no lane,
   no effect on the range, the fit or the group spans. */
.cal-event-band {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  text-align: left;
  overflow: hidden;
}
.gantt-event-band {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
/* Grid lines stay under the bands; the today line stays above them. */
.gantt-grid .grid-line { z-index: 0; }
.gantt-grid .today-line, .gantt-grid .today-flag { z-index: 2; }

/* The Events dropdown (design fo-events.js FOEventsDropdown). Box variant
   sits among the calendar toolbar's bordered controls; link variant matches
   the Plan toolbar's text controls (.fo-link). */
.ev-dropdown { position: relative; display: inline-flex; flex: none; }
.ev-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.ev-dropdown--box .ev-dropdown__trigger {
  height: 32px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--rmm-border-input);
  border-radius: var(--rmm-radius);
  background: var(--surface-card, #FFFFFF);
  color: var(--rmm-text);
}
.ev-dropdown--box .ev-dropdown__trigger:hover { background: var(--rmm-subtle); border-color: var(--rmm-faint); }
.ev-dropdown--link .ev-dropdown__trigger { gap: 6px; height: 28px; }
/* The same 2px brand-primary ring as the options below (RDEV-277 F11): the halo token alone is 1.35:1 on white. */
.ev-dropdown__trigger:focus-visible { outline: 2px solid var(--rmm-primary); outline-offset: 1px; }
.ev-dropdown__swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; border: 1px solid rgba(0, 0, 0, 0.08); }
/* RDEV-299 log D735 (Uffe 2026-10-20; rmm-advertiser-design.md 1.8 §8.5): the caret is D711's chevron (Lucide
   chevron-down, 16 px, --text-muted), drawn by the select chevron's rule at the end of this file, in both variants
   (the muted chevron beside Primary text, as the borderless toolbar selects, D734); the "▾" glyph is gone. */
.ev-dropdown__caret {
  flex: none;
  display: inline-block;
  width: 16px;
  height: 16px;
  background-position: center;
}
.ev-dropdown__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  min-width: 220px;
  max-width: calc(100vw - 16px);
  padding: 6px;
  background: var(--surface-card, #FFFFFF);
  border: 1px solid var(--rmm-border);
  border-radius: var(--rmm-radius);
  box-shadow: var(--rmm-shadow-pop);
}
.ev-dropdown__option {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  border-radius: var(--rmm-radius);
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  color: var(--rmm-text);
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}
.ev-dropdown__option:hover { background: var(--rmm-subtle); }
/* Keyboard focus must be visible on the options too (RDEV-277 F11, WCAG 2.4.7): the design
   system's focus is a 2px outline in the brand primary (its --border-focus), not the 18% halo
   token alone — that halo is invisible on the option's grey hover tint. */
.ev-dropdown__option:focus-visible { background: var(--rmm-subtle); outline: 2px solid var(--rmm-primary); outline-offset: -2px; }
.ev-dropdown__option > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.ev-dropdown__option.is-selected { background: var(--rmm-primary-bg); font-weight: 600; }
.ev-dropdown__dot { width: 12px; height: 12px; border-radius: 3px; flex: none; border: 1px solid rgba(0, 0, 0, 0.08); }
.ev-dropdown__dot--none { border: 1px dashed var(--rmm-border-input); background: transparent; }
/* The menu stays right-aligned at every width; front_v21.js shifts it back inside the
   viewport when the trigger sits near an edge (RDEV-277 F12 — the former left:0 flip below
   768px pushed it 29px off the right edge on the Plan tab). */

/* ── Event label row (RDEV-266 fixes §7) ────────────────────────────────────
   One row under the date axis, present only with a calendar selected: the
   calendar's swatch + name at the left, then one dot per event at its start
   date with the name to the right (body text; ellipsis on collision; dot alone
   for single-day events). The dot is a hover target: title = name + ISO range;
   the same text is in a visually hidden span for screen readers, and the bands
   are aria-hidden (RDEV-277 F9). Bands carry no text any more. */
.rmm-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.cal-events-row {
  position: relative;
  height: 28px;
  border-bottom: 1px solid var(--rmm-border-subtle);
}
.cal-events-row__cal {
  position: absolute;
  left: 0;
  top: 0;
  height: 28px;
  z-index: 1; /* under the labels (review F8): a dot in January still paints and stays hoverable */
  max-width: 150px;
  box-sizing: border-box;
  background: var(--rmm-surface);
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 12px;
}
.cal-events-row__swatch, .gantt-events-row__swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: none;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.cal-events-row__calname, .gantt-events-row__calname {
  font-size: 12px;
  font-weight: 600;
  color: var(--rmm-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-events-row__label, .gantt-events-row__label {
  position: absolute;
  top: 0;
  height: 28px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding-left: 2px;
  white-space: nowrap;
  z-index: 2;
  cursor: default;
}
.cal-events-row__dot, .gantt-events-row__dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
}
.cal-events-row__name, .gantt-events-row__name {
  font-size: 11px;
  font-weight: 600;
  line-height: 12px;
  color: var(--rmm-text);
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.gantt-events-row {
  display: flex;
  align-items: stretch;
  height: 28px;
  border-bottom: 1px solid var(--rmm-border);
  background: var(--rmm-surface);
}
.gantt-events-row__cal {
  display: flex;
  align-items: center;
  position: sticky;
  left: 0;
  top: auto;
  height: auto;
  z-index: 4;
  flex: 0 0 var(--label-w);
  width: var(--label-w);
  box-sizing: border-box;
  gap: 8px;
  padding: 0 16px;
  background: var(--rmm-surface);
  border-right: 1px solid var(--rmm-border);
  white-space: nowrap;
}
.gantt-events-row__track {
  position: relative;
  flex: 1;
  overflow: hidden;
}
/* §8: group header rows are translucent so the event bands in the grid layer
   run the full chart height behind them (the rows keep z-index 1). */
.gantt-phase {
  background: color-mix(in srgb, var(--rmm-subtle) 55%, transparent);
}
.gantt-phase__label {
  background: var(--rmm-subtle);
}

/* 0.18.0 (D4): overdue / extension requested / soon tones on the Orders tab and the order modal */
.order-expiry--overdue { color: var(--rmm-danger); font-weight: 500; }
.order-expiry--asked, .order-expiry--soon { color: var(--rmm-warning-fg); font-weight: 500; }
.rmm-detail__banner--overdue { background: var(--rmm-danger-bg); border-color: var(--rmm-danger); color: var(--rmm-danger-hover); }
.rmm-detail__banner--asked { background: var(--rmm-warning-bg); border-color: var(--rmm-warning); color: var(--rmm-warning-fg); }
.rmm-detail__extend { margin-top: 8px; }
.approval-blocked { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.approval-blocked--muted { background: var(--neutral-50, #F9FAFB); color: var(--text-muted, #6B7280); }
.approval-blocked__action { flex: 0 0 auto; }

/* 0.18.0 (row 4.4): the order modal's list price + discount under the amount. */
.rmm-detail__cell-discount { display: block; font-size: 12px; color: var(--neutral-600, #4B5563); }

/* ── 0.18.0 Advertiser Portal bookings (Phase 6, advertiser spec §1) ──────────
   0.21.0 (RDEV-283 row 4.4): the :root block of --rmm-bk-* aliases this section
   declared is gone — tokens are declared once, in the theme — and every rule
   below reads the §14 status tokens through the page-scoped --rmm-* aliases. */

/* 6.1 — selection toolbar: two outline Request buttons + a ghost Remove */
.book-btn {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
    border: 1px solid var(--rmm-primary); border-radius: var(--rmm-radius); background: var(--rmm-surface); color: var(--rmm-primary);
    font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; /* log D754: 14/600 (§8.3) */
}
.book-btn svg { width: 14px; height: 14px; }
.book-btn:hover:not(:disabled) { background: var(--rmm-primary-bg); }
.book-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.bulk-remove-btn { border-color: transparent; background: transparent; color: var(--rmm-danger); }
.bulk-remove-btn:hover:not(:disabled) { background: var(--rmm-danger-bg); opacity: 1; }
.bulk-remove-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* 6.3 — the Orders tab badge (spec §1.1: primary pill, no number in the label) */
.toggle__count {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill, 999px); font-size: 13px; border: none;
    background: var(--rmm-primary); color: var(--rmm-on-primary);
}

/* 6.3 — Orders tab: seven columns */
.order-table--bookings .order-table__head,
.order-table--bookings .order-table__row {
    grid-template-columns: minmax(120px, 1.1fr) 0.8fr 0.9fr 0.9fr 1fr 1.3fr auto;
    gap: 0 12px; padding: 12px 16px;
}
.order-table--bookings .order-table__head { font-size: 13px; }
.order-table--bookings .order-table__row { border-left: none; }
.order-table--bookings .order-table__row--action { background: transparent; }
.order-table--bookings .order-table__row--overdue { background: var(--rmm-danger-bg); }
.order-table--bookings .order-ref-cell { display: flex; flex-direction: column; gap: 2px; }
.order-table--bookings .order-ref { font-weight: 700; }
.order-table--bookings .order-created { font-size: 13px; color: var(--rmm-muted); }
.order-table--bookings .order-amount { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.order-next { font-size: 13px; color: var(--neutral-700, #374151); }
.order-next--soon { color: var(--rmm-warning-fg); font-weight: 600; }
.order-next--overdue { color: var(--rmm-danger); font-weight: 600; }
.order-next--asked { color: var(--rmm-warning-fg); font-weight: 600; }

/* Status chips (spec §0 Badge): pill, 2px 8px, 13px/600 */
.bk-badge {
    display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-pill, 999px);
    font-size: 13px; font-weight: 600; line-height: 18px; white-space: nowrap;
}
.bk-badge--requested, .bk-badge--pending { background: var(--neutral-100, #F3F4F6); color: var(--neutral-600, #4B5563); } /* §8.6 neutral tone; solid is success/danger only */
.bk-badge--approved { background: var(--rmm-warning-bg); color: var(--rmm-warning-fg); } /* §8.6: warning is subtle + text, never a base fill under text */
/* 0.29.0 (RDEV-299 row 3.8, D200; rmm-advertiser-design.md 1.9 §8.6): subtle fills only: success for Order confirmed,
   neutral for Completed, the exits and awaiting the retailer. */
.bk-badge--ordered { background: var(--rmm-accent-bg); color: var(--rmm-accent-fg); }
.bk-badge--completed { background: var(--neutral-100, #F3F4F6); color: var(--neutral-600, #4B5563); }
.bk-badge--rejected, .bk-badge--declined, .bk-badge--expired, .bk-badge--cancelled { background: var(--neutral-100, #F3F4F6); color: var(--neutral-600, #4B5563); }
.rmm-detail__badge.bk-badge { margin-left: 8px; }

/* 6.4 — order modal */
.rmm-detail__banner { border: 1px solid; }
.rmm-detail__banner svg, .rmm-notice svg { width: 16px; height: 16px; flex: none; }
.rmm-detail__banner .rmm-detail__iconwrap { display: inline-flex; }
.rmm-detail__banner--info { background: var(--rmm-primary-bg); border-color: var(--rmm-primary-bg-strong); color: var(--rmm-primary); }
.rmm-detail__banner--attention { background: var(--rmm-warning-bg); border-color: var(--rmm-warning); color: var(--rmm-warning-fg); }
.rmm-detail__banner--success { background: var(--rmm-accent-bg); border-color: var(--rmm-accent); color: var(--rmm-accent-fg); }
/* Muted tone sits on --surface-muted: it reads --text-muted directly so the theme's 0.9.1 scoped
   override (neutral 600 inside .rmm-detail__banner--muted, 4.5:1+) applies — the page-root alias
   --rmm-muted would have resolved at the root and missed it. */
.rmm-detail__banner--muted { background: var(--rmm-subtle); border-color: var(--rmm-border); color: var(--text-muted, #6B7280); }
/* Row 4.1 review F4 (design.md 1.8 §8.8, a leading status icon): the text shrinks beside the icon instead of wrapping
   under it; a long sentence (an order awaiting retailer approval) wraps inside its own box */
.rmm-detail__banner-text { flex: 1 1 0; min-width: 0; }
/* Log D759 (Uffe 2026-10-21; rmm-advertiser-design.md 1.8 §8.8): a two-line alert's icon is top-aligned. The icon and the
   text are one group (campaign-detail.dc.html's booking banner), the icon beside the first line: half the line's slack
   above the 16 px icon. The group, not the icon, is centred with the banner's button or link. */
.rmm-detail__banner-lead { display: flex; align-items: flex-start; gap: 10px; flex: 1 1 0; min-width: 0; }
.rmm-detail__banner-lead > .rmm-detail__iconwrap { flex: none; margin-top: 2px; margin-top: calc((1lh - 16px) / 2); }
.rmm-detail__banner-link { font-weight: 600; color: var(--rmm-primary); white-space: nowrap; }
.rmm-detail__table--lines .rmm-detail__table-row { grid-template-columns: 1.4fr 1fr 1fr 0.7fr 1fr 0.9fr; }
.rmm-detail__sched-rows .rmm-sched__row--pending .rmm-sched__date { font-style: italic; }
.rmm-detail__secondary { margin-top: 12px; }
.btn-outline-danger { border: 1px solid var(--rmm-danger); color: var(--rmm-danger); background: var(--rmm-surface); border-radius: var(--rmm-radius); height: 32px; padding: 0 12px; font-weight: 600; font-size: 13px; }
.btn-outline-danger:hover { background: var(--rmm-danger-bg); color: var(--rmm-danger); }
.rmm-detail__side-head { display: flex; align-items: baseline; gap: 8px; }
.rmm-detail__side-count { font-size: 13px; color: var(--rmm-muted); }
/* Phase 3 review F13: "Visible to you and <retailer>." at the §7.2 floor, 13 px (booking and line item modals) */
.rmm-conv__helper { font-size: 13px; color: var(--rmm-muted); margin-right: auto; }

/* The overdue box — latest timeline entry (spec §1.2 / §1.4) */
.rmm-detail__side-notice { padding: 0 16px 12px; }
.rmm-notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: var(--rmm-radius); border: 1px solid; font-size: 13px; line-height: 18px; } /* 1.8 §8.8 alert */
.rmm-notice--overdue { background: var(--rmm-danger-bg); border-color: var(--rmm-danger); color: var(--rmm-danger-hover); } /* text on subtle = danger strong */
.rmm-notice--asked { background: var(--rmm-warning-bg); border-color: var(--rmm-warning); color: var(--rmm-warning-fg); }
.rmm-notice__body { display: grid; gap: 8px; }
.rmm-notice__text { margin: 0; }
.rmm-notice__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rmm-notice .rmm-detail__iconwrap { display: inline-flex; margin-top: 1px; }

/* Withdraw / Decline confirm dialog (480px) */
.rmm-confirm__panel { max-width: 480px; border-radius: var(--rmm-radius-lg); }
.rmm-confirm__label { display: block; font-size: 13px; font-weight: 600; margin-top: 12px; }
.rmm-confirm__label textarea { margin-top: 6px; font-weight: 400; }

/* 6.5 — a line on a quotation not accepted in time */
.tree-row--overdue-quote, .tree-row--overdue-quote:hover { background: var(--rmm-danger-bg); }
.gantt-row--overdue-quote, .gantt-row--overdue-quote .gantt-row__label { background: var(--rmm-danger-bg); }
.overdue-quote-pill {
    display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; margin-left: 8px;
    border-radius: var(--radius-pill, 999px); background: var(--rmm-surface); border: 1px solid var(--rmm-danger); color: var(--rmm-danger);
    font-size: 12px; font-weight: 600; white-space: nowrap; vertical-align: middle;
}
.overdue-quote-pill svg { width: 12px; height: 12px; }
.overdue-quote-pill--asked { border-color: var(--rmm-warning); color: var(--rmm-warning-fg); }
.overdue-quote-pill--gantt { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; margin: 0; }

/* Toast (spec §1.3). Appended to <body>, outside every page root that declares the --rmm-* aliases, so it
   reads the §14 tokens directly with literal fallbacks, as .gantt-tip does (review F12). */
.rmm-toast {
    position: fixed; right: 24px; bottom: 24px; z-index: 1200; display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; border-radius: var(--radius-md, 8px); background: var(--neutral-900, #1F2937); color: var(--neutral-50, #F9FAFB); font-size: 14px;
    box-shadow: var(--shadow-dialog, 0 12px 40px rgba(0, 0, 0, 0.28)); opacity: 0; transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease; max-width: min(480px, calc(100vw - 48px));
}
.rmm-toast.is-in { opacity: 1; transform: none; }
.rmm-toast__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--status-success, #198754); flex: none; }

/* 6.8 — product detail "Can be funded via" */
.pdp-funded { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--neutral-200, #E5E7EB); }
.pdp-funded__label { font-size: 14px; line-height: 20px; font-weight: 700; margin: 0; color: var(--rmm-text); }
.pdp-funded__pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pdp-funded__pill {
    display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: var(--radius-pill, 999px);
    border: 1px solid var(--neutral-300, #D1D5DB); font-size: 13px; font-weight: 600; color: var(--rmm-text);
}
.pdp-funded__pill svg { width: 12px; height: 12px; }

@media (max-width: 900px) {
    .order-table--bookings .order-table__head,
    .order-table--bookings .order-table__row { grid-template-columns: 1.3fr 0.8fr 0.7fr 1fr; }
    .order-table--bookings .order-type, .order-table--bookings .order-items, .order-table--bookings .order-next, .order-table--bookings .order-chevron, .order-table--bookings .order-table__head span:nth-child(n+7) { display: none; }
}
.rmm-detail__table--lines .rmm-detail__table-head span:not(:last-child),
.rmm-detail__table--lines .rmm-detail__table-row > span:not(:last-child) { text-align: left; }

/* 6.7 — Account › Orders (spec §5) */
.order-table--account .order-table__head,
.order-table--account .order-table__row {
    grid-template-columns: minmax(130px, 1.1fr) minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, 1.1fr) minmax(0, 0.9fr) 110px;
    gap: 0 12px; padding: 12px 16px;
}
.order-table--account .order-table__row { border-left: none; }
.order-table--account .order-table__row--overdue { background: var(--rmm-danger-bg); }
.order-table--account .order-ref-cell { display: flex; flex-direction: column; gap: 2px; }
.order-table--account .order-ref { font-weight: 700; }
.order-table--account .order-created { font-size: 13px; color: var(--rmm-muted); }
.order-table--account .order-amount { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.order-table--account .order-action { text-align: right; }
.order-table--account .order-action .btn { display: inline-flex; align-items: center; gap: 4px; }
/* 1.8 §8.1 (plan-3 D11): Account › Orders is a data page — 1440 px, left-aligned — not a settings list. */
.rmm-account-orders { max-width: 1440px; margin-inline: 0; }
.rmm-account-orders .rmmiam-org__sub { margin: 4px 0 0; color: var(--rmm-muted); font-size: 14px; }
.rmm-account-orders .rmmiam-org__nav-link .toggle__count { margin-left: 6px; }
@media (max-width: 900px) {
    .order-table--account .order-table__head,
    .order-table--account .order-table__row { grid-template-columns: 1.3fr 1fr 1fr; }
    .order-table--account .order-campaign, .order-table--account .order-next, .order-table--account .order-table__head span:nth-child(2), .order-table--account .order-table__head span:nth-child(4) { display: none; }
}
.pdp-funded--alone { margin-top: 0; padding-top: 0; border-top: none; }

/* 0.29.0 (RDEV-299 row 3.3 review, rmm-advertiser-design.md 1.9): the Dashboard's cards at --radius-lg 16 (§8.11, Fix 3);
   Contact support as §8.3's secondary md, 40 px, 14/600, 0 18 px (Fix 4); §11 focus on it and on the row links, a 2 px
   Primary outline, offset 2, the focus-ring halo (Fix 4, 5); a row's hover on --neutral-50 (§8.7, Fix 8: muted and
   danger text keep their contrast). */
.dashboard-page .dash-card,
.dashboard-page .dash-action { border-radius: var(--radius-lg, 16px); }
.dashboard-page .btn.dash-help__btn { height: 40px; padding: 0 18px; font-size: 14px; line-height: 1; font-weight: 600; display: inline-flex; align-items: center; }
.dashboard-page .btn.dash-help__btn:focus-visible,
.dashboard-page .attn-row__name:focus-visible,
.dashboard-page .attn-more__link:focus-visible { outline: 2px solid var(--rmm-primary); outline-offset: 2px; box-shadow: 0 0 0 4px var(--focus-ring, rgba(31, 71, 136, 0.4)); }
.dashboard-page .attn-row:hover { background: var(--neutral-50, #F9FAFB); }

/* ============================================================
   0.29.0 (RDEV-299 row 3.7): campaign detail's breadcrumb and List tab to campaign-detail.dc.html,
   rmm-advertiser-design.md 1.9 (§7.2 type, §8.6 badges, §8.7 tables, §9.4 page header).
   ============================================================ */

/* D183: Home / Campaigns / campaign (Home = the Dashboard, S7). */
.campaign-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 18px;
    color: var(--rmm-muted);
}

.campaign-detail .campaign-crumbs a,
.campaign-detail .campaign-crumbs a:visited {
    color: var(--rmm-primary);
    text-decoration: none;
}

.campaign-detail .campaign-crumbs a:hover { text-decoration: underline; }
.campaign-crumbs__current { color: var(--rmm-text); }

/* D187: one grid for the header and every row: the name column takes the rest, then Dates 96, Quantity 112,
   Stage 168, Flag 88 and Amount 104, 16 px apart. */
.rmm-tree--items .li-grid,
.tree-header.li-grid {
    display: grid;
    grid-template-columns: minmax(96px, 1fr) 96px 112px 168px 88px 104px;
    column-gap: 16px;
    align-items: center;
    padding: 12px 24px;
}

.tree-header.li-grid {
    border-bottom: 1px solid var(--rmm-border);
}

.li-grid__name {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.li-grid__head {
    font-size: 13px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rmm-muted);
}

.li-grid__amount { text-align: right; }

.tree-header.li-grid .tree-header__label {
    flex: none;
    font-size: 14px;
    color: var(--rmm-text);
}

.rmm-tree--items .tree-row--category.li-grid { padding-left: 24px; }
.rmm-tree--items .tree-row--product.li-grid { padding-left: 44px; }
.rmm-tree--items .tree-row--item.li-grid { padding-left: 64px; gap: 0 16px; }

.rmm-tree--items .tree-row--category .li-grid__name,
.rmm-tree--items .tree-row--product .li-grid__name { gap: 8px; }

.rmm-tree--items .tree-row--category .tree-label,
.rmm-tree--items .tree-row--product .tree-label {
    flex: 0 1 auto;
    white-space: nowrap;
}

.rmm-tree--items .tree-count { margin-right: 0; }

/* Carets: Lucide chevrons, turned while collapsed. */
.rmm-tree--items .tree-caret {
    display: inline-flex;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    color: var(--rmm-text);
    transition: transform var(--rmm-dur-fast) var(--rmm-ease);
}

.rmm-tree--items .tree-row--product .tree-caret { color: var(--rmm-muted); }
.rmm-tree--items .tree-row:not(.is-open) > .li-grid__name .tree-caret { transform: rotate(-90deg); }

.rmm-tree--items .tree-budget {
    flex: none;
    text-align: right;
}

/* A leaf: a 16 px checkbox slot, the variant in muted text, the trash at the end of the name cell. */
.rmm-tree--items .tree-item__slotbox {
    display: flex;
    flex: none;
    width: 16px;
    height: 16px;
}

.rmm-tree--items .tree-item__slotbox .tree-item__check { margin: 0; }
.rmm-tree--items .tree-item__slotbox .form-check-input { width: 16px; height: 16px; margin: 0; }

.rmm-tree--items .tree-item__variant {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 14px;
    color: var(--rmm-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rmm-tree--items .tree-item__fill { flex: 1; }
.rmm-tree--items .overdue-quote-pill { margin-left: 0; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }

.rmm-tree--items .remove-item-btn,
.rmm-tree--items .remove-item-off {
    width: 24px;
    height: 24px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: var(--rmm-radius-sm);
    background: transparent;
    color: var(--rmm-danger);
    cursor: pointer;
}

.rmm-tree--items .remove-item-btn:hover { background: var(--neutral-100, #F3F4F6); }
/* Not New: the trash shows disabled on hover, with its reason (campaign-detail.dc.html). */
.rmm-tree--items .remove-item-off { cursor: not-allowed; opacity: 0; transition: opacity 140ms var(--rmm-ease); }
.rmm-tree--items .tree-row--item:hover .remove-item-off { opacity: 1; }
.rmm-tree--items .remove-item-off svg { opacity: 0.35; }

.rmm-tree--items .tree-item__dates {
    display: flex;
    flex-direction: column;
    font-size: 13px;
    line-height: 18px;
    color: var(--neutral-700, #374151);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rmm-tree--items .tree-item__qty {
    font-size: 13px;
    line-height: 18px;
    color: var(--neutral-700, #374151);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rmm-tree--items .tree-item__status {
    display: flex;
    min-width: 0;
}

.rmm-tree--items .tree-item__flag {
    display: flex;
    align-items: center;
    min-width: 0;
}

.rmm-tree--items .tree-item__budget {
    font-weight: 600;
    color: var(--rmm-text);
    font-variant-numeric: tabular-nums;
}

/* D209 (List tab): every stage is a neutral badge (1.9 §8.6); the flag says who acts. */
.rmm-tree--items .li-row .status-pill--li,
.rmm-tree--items .li-row[data-status] .status-pill--li,
.rmm-tree--items .li-row[data-band] .status-pill--li {
    background: var(--neutral-100, #F3F4F6);
    color: var(--neutral-600, #4B5563);
    border: 0;
}

/* The action flag, monochrome (FlagMarker mono): neutral dot and text, 13 px. */
.flag-marker--mono {
    font-size: 13px;
    color: var(--neutral-700, #374151);
}

.flag-marker--mono .flag-marker__dot {
    background: var(--neutral-500, #6B7280);
    box-shadow: none;
}

/* D191: the stage filter reads right-aligned, so "All stages" ends at the toolbar's edge. */
.li-status-filter {
    text-align: right;
    text-align-last: right;
    padding-right: 0;
}

/* D182: the Plan tab's 16 px checkbox slot, so New and other rows align. */
.gantt-row .item-check-spacer { width: 16px; height: 16px; }

/* ============================================================
   0.29.0 (RDEV-299 row 3.8, D196, D197, D199, D201): the Orders tab to campaign-detail.dc.html, rmm-advertiser-design.md
   1.9 (§8.7 tables). One grid for the head and every row, fixed widths sized to the longest value, the number and the
   date left-aligned, no expander, a chevron at the end; the row opens the booking modal.
   ============================================================ */
.order-table--bookings { border-radius: var(--rmm-radius-lg); }

.order-table--bookings .order-table__head,
.order-table--bookings .order-table__row {
    gap: 0 16px;
    padding: 12px 24px;
}

@media (min-width: 901px) {
    .order-table--bookings .order-table__head,
    .order-table--bookings .order-table__row {
        grid-template-columns: 128px 168px 112px 104px 216px minmax(140px, 1fr) 88px 16px;
    }
}

.order-table--bookings .order-table__head {
    font-size: 13px;
    line-height: 16px;
    letter-spacing: 0.06em;
}

.order-table--bookings .order-table__row {
    border-left: none;
    border-bottom: 1px solid var(--rmm-border-subtle);
    font-size: 14px;
}

.order-table--bookings .order-table__row:hover { background: var(--surface-page, #F6F7FA); }
/* Row 3.8 review Fix 6: the keyboard opener is the number's button; the row draws its ring (a :has() rule of its own). */
.order-table--bookings .order-table__row:has(.order-ref-cell:focus-visible) { outline: 2px solid var(--rmm-primary); outline-offset: -2px; }
.order-table--bookings .order-ref-cell:focus-visible { outline: none; }

.order-table--bookings button.order-ref-cell {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.order-table--bookings .order-table__row--overdue,
.order-table--bookings .order-table__row--overdue:hover { background: var(--rmm-danger-bg); }

.order-table--bookings .order-ref-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    text-align: left;
}

.order-table--bookings .order-ref { font-weight: 700; color: var(--rmm-text); white-space: nowrap; }
.order-table--bookings .order-created { font-size: 13px; line-height: 18px; color: var(--rmm-muted); }
.order-table--bookings .order-type,
.order-table--bookings .order-items { color: var(--neutral-700, #374151); }
.order-table--bookings .order-items { font-variant-numeric: tabular-nums; }
.order-table--bookings .order-amount { text-align: right; font-weight: 700; color: var(--rmm-text); white-space: nowrap; }
.order-table--bookings .order-status { display: flex; }
.order-table--bookings .order-next { font-variant-numeric: tabular-nums; }
.order-table--bookings .order-action { display: flex; justify-content: flex-end; }

.order-table--bookings .order-table__head-num { text-align: right; }

.campaign-detail .order-table--bookings .order-action__accept,
.campaign-detail .order-table--bookings .order-action__accept:link,
.campaign-detail .order-table--bookings .order-action__accept:visited,
.campaign-detail .order-table--bookings .order-action__accept:hover,
.campaign-detail .order-table--bookings .order-action__accept:focus {
    color: var(--rmm-on-primary);
    text-decoration: none;
}

.campaign-detail .order-table--bookings .order-action__accept:hover { background: var(--rmm-primary-hover); }

.order-table--bookings .order-action__accept {
    height: var(--rmm-control-h);
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    border-radius: var(--rmm-radius);
}

.order-table--bookings .order-chevron {
    display: inline-flex;
    width: 16px;
    height: 16px;
    color: var(--rmm-muted);
}

/* 0.29.0 (RDEV-299 row 3.8; campaign-detail.dc.html booking modal, D198, D202): the header carries the number and the
   status chip over one muted line; 1120 × min(760, 100vh − 48) px; the left pane 1.25fr beside the timeline; the
   lines table on the prototype's columns with the schedule behind the product's chevron; 40 px buttons. */
.rmm-detail__subtitle {
    font-size: 13px;
    line-height: 18px;
    color: var(--rmm-muted);
    font-variant-numeric: tabular-nums;
}

.rmm-detail__subtitle[hidden] { display: none; }

.rmm-detail-dialog[data-kind="order"] .rmm-detail__shell { height: min(760px, calc(100vh - 48px)); }
.rmm-detail-dialog[data-kind="order"] .dialog__header { padding: 16px 24px; align-items: flex-start; }

.rmm-detail-dialog[data-kind="order"] .rmm-detail__head-left {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    column-gap: 12px;
    row-gap: 4px;
}

.rmm-detail-dialog[data-kind="order"] .rmm-detail__head-left .dialog__title {
    grid-column: 1;
    grid-row: 1;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600; /* Phase 3 review C2: §8.9 section-title (was 700) */
    font-variant-numeric: tabular-nums;
}

.rmm-detail-dialog[data-kind="order"] .rmm-detail__badge { grid-column: 2; grid-row: 1; margin-left: 0; }
.rmm-detail-dialog[data-kind="order"] .rmm-detail__subtitle { grid-column: 1 / -1; grid-row: 2; }
.rmm-detail-dialog[data-kind="order"] .rmm-detail__flag { display: none; }

@media (min-width: 1180px) {
    .rmm-detail-dialog[data-kind="order"] .rmm-detail__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}

.rmm-detail-dialog[data-kind="order"] .rmm-detail__body {
    padding: 20px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.rmm-detail-dialog[data-kind="order"] .rmm-detail__body .rmm-detail__section { margin-bottom: 0; }

.rmm-detail-dialog[data-kind="order"] .rmm-detail__banner {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-radius: var(--rmm-radius);
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
}

.rmm-detail-dialog .rmm-detail__banner-action,
.rmm-detail-dialog .rmm-detail__banner-action:link,
.rmm-detail-dialog .rmm-detail__banner-action:visited,
.rmm-detail-dialog .rmm-detail__banner-action:hover,
.rmm-detail-dialog .rmm-detail__banner-action:focus {
    color: var(--rmm-on-primary);
    text-decoration: none;
}

.rmm-detail-dialog[data-kind="order"] .rmm-detail__banner-action {
    height: var(--rmm-control-h);
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
}

.rmm-detail__banner-link,
.rmm-detail__banner-link:hover {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    text-decoration: none;
}

.rmm-detail__banner-link .rmm-detail__iconwrap { display: inline-flex; }

/* The lines table. */
.rmm-detail__table--lines { border-color: var(--rmm-border); border-radius: var(--rmm-radius); }

.rmm-detail__table--lines .rmm-detail__table-head,
.rmm-detail__table--lines .rmm-detail__table-row {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.7fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 0.9fr) minmax(64px, 0.7fr);
    gap: 4px 12px;
    align-items: start;
}

/* D604 (Uffe 2026-10-19): the Variant column wraps at word boundaries only. The table is one grid and the head and
   every line take its columns (subgrid), so the Variant column is at least as wide as its longest word in every row
   and the columns stay aligned; a browser without subgrid keeps the template above. Phase 3 review F10: the same for
   every column (the D604 build left Product and Flight at minmax(0, …) with words broken anywhere, so "Sponsore / d"
   and "2026-11- / 01"); a date never breaks inside itself (.rmm-detail__date, front_v21.js elWithDates()). */
.rmm-detail__table--lines {
    display: grid;
    grid-template-columns: minmax(min-content, 1.4fr) minmax(min-content, 0.7fr) minmax(min-content, 1.1fr) minmax(min-content, 1fr) minmax(min-content, 0.9fr) minmax(min-content, 0.7fr);
    column-gap: 12px;
}

.rmm-detail__date,
.rmm-tlf__date { white-space: nowrap; }

.rmm-detail__table--lines > *,
.rmm-detail__table--lines .rmm-detail__line > * { grid-column: 1 / -1; }

.rmm-detail__table--lines .rmm-detail__table-head,
.rmm-detail__table--lines .rmm-detail__line,
.rmm-detail__table--lines .rmm-detail__line > .rmm-detail__table-row {
    display: grid;
    grid-template-columns: subgrid;
}

.rmm-detail__table--lines .rmm-detail__table-head {
    padding: 10px 16px;
    background: var(--neutral-50, #F9FAFB);
    font-size: 13px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rmm-muted);
}

.rmm-detail__table--lines .rmm-detail__line { border-bottom: 1px solid var(--rmm-border-subtle); }
.rmm-detail__table--lines .rmm-detail__line .rmm-detail__table-row { border-bottom: none; padding: 12px 16px; font-size: 13px; }

.rmm-detail__line-toggle {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
    margin: 0 0 0 -6px;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--rmm-text);
    text-align: left;
    cursor: pointer;
}

.rmm-detail__line-toggle .rmm-detail__iconwrap {
    display: inline-flex;
    flex: none;
    margin-top: 2px;
    color: var(--rmm-muted);
    transition: transform var(--rmm-dur-fast) var(--rmm-ease);
}

.rmm-detail__line-toggle[aria-expanded="true"] .rmm-detail__iconwrap { transform: rotate(90deg); }
.rmm-detail__table--lines .rmm-detail__cell-name { font-weight: 600; color: var(--rmm-text); }

.rmm-detail__table--lines .rmm-detail__cell--variant,
.rmm-detail__table--lines .rmm-detail__cell--qty,
.rmm-detail__table--lines .rmm-detail__cell-wallet {
    color: var(--neutral-700, #374151);
    overflow-wrap: normal;
    word-break: normal;
    font-size: 13px;
}

/* Phase 3 review F10: the product name wraps at its spaces, never cut or broken inside a word */
.rmm-detail__table--lines .rmm-detail__cell--main,
.rmm-detail__table--lines .rmm-detail__cell-name {
    overflow: visible;
    overflow-wrap: normal;
    word-break: normal;
    text-overflow: clip;
}

.rmm-detail__table--lines .rmm-detail__cell--variant { overflow-wrap: normal; word-break: normal; }

.rmm-detail__table--lines .rmm-detail__cell--period {
    white-space: normal;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 13px; /* Phase 3 review F13: the flight dates at the §7.2 floor (the base rule's 12 px) */
    font-variant-numeric: tabular-nums;
}

.rmm-detail__table--lines .rmm-detail__cell-flight { color: var(--rmm-text); overflow-wrap: normal; }
.rmm-detail__table--lines .rmm-detail__cell-sub { font-size: 13px; color: var(--rmm-muted); }
.rmm-detail__table--lines .rmm-detail__cell-wallet--pending { font-size: 13px; font-style: normal; color: var(--rmm-muted); }

/* Row 3.8 review Fix 4: the price cell only; the headings keep their text alignment (left, Price right). */
.rmm-detail__table--lines .rmm-detail__table-row .rmm-detail__cell--num {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
}

.rmm-detail__table--lines .rmm-detail__cell-price { font-weight: 600; color: var(--rmm-text); font-variant-numeric: tabular-nums; }

/* The schedule behind the product's chevron (as on the line item modal). */
.rmm-detail__table--lines .rmm-detail__sched-rows {
    display: grid;
    margin: 0 16px 14px 30px;
    border: 1px solid var(--rmm-border);
    border-radius: var(--rmm-radius);
    overflow: hidden;
    gap: 0;
    font-size: 13px;
}

.rmm-detail__table--lines .rmm-detail__sched-rows[hidden] { display: none; }

.rmm-detail__table--lines .rmm-detail__sched-rows .rmm-sched__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px;
    gap: 0 12px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--rmm-border-subtle);
}

.rmm-detail__table--lines .rmm-detail__sched-rows .rmm-sched__row:last-child { border-bottom: none; }

.rmm-detail__table--lines .rmm-detail__sched-rows .rmm-sched__row--head {
    background: var(--surface-page, #F6F7FA);
    border-bottom: 1px solid var(--rmm-border);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rmm-muted);
}

.rmm-detail__table--lines .rmm-sched__row > span:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* Totals: Subtotal, VAT and Total in a 240 px column on the table's foot. */
.rmm-detail__table--lines .rmm-detail__table-foot {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    width: 240px;
    max-width: 100%;
    margin-left: auto;
    padding: 0;
    border: none;
    background: none;
    font-size: 13px;
    color: var(--rmm-muted);
}

.rmm-detail__table--lines .rmm-detail__table-foot--total {
    padding-top: 6px;
    border-top: 1px solid var(--rmm-border);
    font-size: 14px;
    font-weight: 700;
    color: var(--rmm-text);
}

/* Plan D65 (log D689): the voucher's code and any other cart rule's name, each over its "−X" like the Subtotal row; a
   long code is cut, the amount never */
.rmm-detail__table--lines .rmm-detail__table-foot--voucher .rmm-detail__table-foot-label,
.rmm-detail__table--lines .rmm-detail__table-foot--discount .rmm-detail__table-foot-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rmm-detail__table--lines .rmm-detail__table-foot-value { white-space: nowrap; }

/* Plan D66 (log D703, Uffe 2026-10-20; campaign-detail.dc.html): the total rows 13 px muted, labels and amounts alike
   (they were 600/700), the Total row 14/700 strong; the voucher row with its code in the accent colour, as the Accept
   page (§8.6: accent maps to success; success strong, as the row sits on neutral 50, §4.4) */
.rmm-detail__table--lines .rmm-detail__table-foot .rmm-detail__table-foot-label,
.rmm-detail__table--lines .rmm-detail__table-foot .rmm-detail__table-foot-value {
    font-weight: 400;
    color: inherit;
}

.rmm-detail__table--lines .rmm-detail__table-foot-value { font-variant-numeric: tabular-nums; }

.rmm-detail__table--lines .rmm-detail__table-foot--total .rmm-detail__table-foot-label,
.rmm-detail__table--lines .rmm-detail__table-foot--total .rmm-detail__table-foot-value {
    font-weight: 700;
    color: var(--rmm-text);
}

/* Plan D67 (log D717, Uffe 2026-10-20): every other cart rule's row styled as the voucher row, one rule for discount rows */
.rmm-detail__table--lines .rmm-detail__table-foot--voucher,
.rmm-detail__table--lines .rmm-detail__table-foot--discount {
    color: var(--status-success-strong, #146C43);
}

.rmm-detail__table--lines .rmm-detail__totals {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 12px 16px 14px;
    background: var(--neutral-50, #F9FAFB);
}

.rmm-detail-dialog[data-kind="order"] .rmm-detail__secondary { margin-top: auto; }

.rmm-detail-dialog[data-kind="order"] .rmm-detail__secondary-btn,
.rmm-detail-dialog[data-kind="order"] .rmm-notice__actions .btn {
    height: var(--rmm-control-h);
    padding: 0 18px;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--rmm-radius);
}

.rmm-detail-dialog[data-kind="order"] .rmm-detail__secondary-btn {
    border: 1px solid var(--rmm-border-input);
    background: var(--rmm-surface);
    color: var(--rmm-danger-hover);
}

.rmm-detail-dialog[data-kind="order"] .rmm-detail__secondary-btn:hover { background: var(--neutral-50, #F9FAFB); color: var(--rmm-danger-hover); }

/* ============================================================
   0.29.0 (RDEV-299 row 3.9, D206 to D210, D213, D215, D217): the line item modal to campaign-detail.dc.html,
   rmm-advertiser-design.md 1.9 (§8.6 badges, §8.9 dialogs, §8.12 timeline).
   ============================================================ */

/* Header: the product's name over its variant, a neutral stage chip, a rule, the flag sentence; Remove at 40 px. */
.rmm-detail-dialog[data-kind="line_item"] .dialog__header { padding: 16px 20px; }
.rmm-detail-dialog[data-kind="line_item"] .rmm-detail__head-left {
    display: grid;
    grid-template-columns: minmax(0, auto) auto auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 12px;
}

.rmm-detail-dialog[data-kind="line_item"] .rmm-detail__head-left .dialog__title {
    grid-column: 1;
    grid-row: 1;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600; /* Phase 3 review C2: §8.9 section-title (was 700) */
}

.rmm-detail-dialog[data-kind="line_item"] .rmm-detail__subtitle { grid-column: 1; grid-row: 2; }
.rmm-detail-dialog[data-kind="line_item"] .rmm-detail__badge { grid-column: 2; grid-row: 1 / span 2; margin: 0; }

.rmm-detail-dialog[data-kind="line_item"] .rmm-detail__flag {
    grid-column: 3;
    grid-row: 1 / span 2;
    padding-left: 12px;
    border-left: 1px solid var(--rmm-border);
}

.status-pill--neutral {
    background: var(--neutral-100, #F3F4F6);
    color: var(--neutral-600, #4B5563);
}

.rmm-detail__flag .flag-marker { font-size: 13px; }
.rmm-detail__flag .flag-marker__dot { width: 9px; height: 9px; }

.rmm-detail-dialog[data-kind="line_item"] .rmm-detail__remove {
    height: var(--rmm-control-h);
    padding: 0 18px;
    gap: 8px;
    font-size: 14px;
    color: var(--rmm-danger-hover);
    border-color: var(--rmm-border-input);
}

.rmm-detail-dialog[data-kind="line_item"] .rmm-detail__remove:hover { background: var(--rmm-danger-bg); }

/* D215: the left pane scrolls inside an 8 px inset, so its scrollbar stops short of the tab bar and the modal's
   bottom edge; the content keeps its padding. */
.rmm-detail-dialog[data-kind="line_item"] .rmm-detail__body {
    margin: 8px 4px 8px 0;
    padding: 16px 20px 16px 24px;
}

.rmm-detail-dialog[data-kind="line_item"] .rmm-detail__tabs { padding: 11px 24px 0; }

/* Description: two lines until "See more". */
.rmm-detail__html--clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rmm-detail__html--clamp.is-open { display: block; -webkit-line-clamp: unset; }

.rmm-detail__more {
    align-self: flex-start;
    margin-top: 8px;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--rmm-primary);
    cursor: pointer;
}

.rmm-detail__more[hidden] { display: none; }

.rmm-detail__soon {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--rmm-muted);
    max-width: 68ch;
}

/* D207 (D98): the schedule, display only: [box] [stage over its sub-label] [deadline]. */
.rmm-sched--boxes .rmm-sched__row {
    grid-template-columns: 20px minmax(0, 1fr) auto;
    gap: 12px;
    border-left: none;
    border-bottom-color: var(--neutral-100, #F3F4F6);
}

.rmm-sched--boxes .rmm-sched__row--head {
    padding: 0 0 6px 10px;
    font-size: 13px;
}

.rmm-sched--boxes .rmm-sched__note { font-size: 13px; }

.rmm-sched__box {
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    border-radius: var(--rmm-radius-sm);
    border: 1.5px solid var(--neutral-400, #9CA3AF);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.rmm-sched__box .rmm-detail__iconwrap { display: inline-flex; }
.rmm-sched__box svg { stroke-width: 3; }
.rmm-sched__row--done .rmm-sched__box { border-color: var(--rmm-success); background: var(--rmm-success); }
.rmm-sched__row--current .rmm-sched__box { border-color: var(--rmm-text); background: linear-gradient(to top, var(--rmm-text) 50%, transparent 50%); }
.rmm-sched__row--overdue .rmm-sched__box { border-color: var(--rmm-danger); background: linear-gradient(to top, var(--rmm-danger) 50%, transparent 50%); }

.rmm-sched__cell { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rmm-sched--boxes .rmm-sched__stage { font-weight: 500; color: var(--rmm-text); }
.rmm-sched__row--current .rmm-sched__stage,
.rmm-sched__row--overdue .rmm-sched__stage { font-weight: 700; }
.rmm-sched__row--ahead .rmm-sched__stage { color: var(--neutral-700, #374151); }
.rmm-sched__sub { color: var(--rmm-muted); }
.rmm-sched__row--overdue .rmm-sched__sub { color: var(--rmm-danger-hover); }
.rmm-sched--boxes .rmm-sched__date { color: var(--neutral-700, #374151); }
.rmm-sched__row--overdue .rmm-sched__date { color: var(--rmm-danger-hover); }

/* The overdue quotation's action at 40 px (1.9 §8.3). */
.rmm-detail-dialog .rmm-notice__action { height: var(--rmm-control-h); padding: 0 18px; font-size: 14px; font-weight: 600; justify-self: start; }

/* ── Plan D67 (log D711, Uffe 2026-10-20; rmm-advertiser-design.md 1.8 §8.4): one select on the Advertiser Portal ──
   Every single select is the browser's native control (keyboard, type-ahead and screen readers as the browser's own),
   drawn with the field tokens and ONE trailing chevron: the Lucide chevron-down at 16 px in --text-muted (#6B7280),
   12 px from the right edge, the value keeping 36 px clear of it. It replaces the three looks of the Phase 3 review
   (P-6): the UA arrow (Financials, Users and access), the Accept and Request pages' own drawn chevron (checkout.css),
   none at all (the quick add's `.form-control`, whose theme rule removes the arrow), and the select-styled button of
   product detail (now a native select). A multiple or sized select is a list box and keeps its own look.
   1. The frame is a default (zero specificity): 40 px (48 px on a phone), padding 0 12 px, 1 px --border-field,
      radius md, white, the 16 px `field` value, on focus the border Primary with no outline or halo (the browser's
      own ring went); a page's own size rule still wins (the 32 px compact selects, the borderless toolbar ones).
   2. The appearance, the chevron and the right padding are forced over the page rules ("html body" plus the two
      :not()s, 0,2,3), so no page draws a second chevron, its own, or none. */
:where(select:not([multiple]):not([size])) {
    height: var(--control-h, 40px);
    padding: 0 36px 0 12px;
    border: 1px solid var(--border-field, #6B7280);
    border-radius: var(--radius-md, 8px);
    background-color: var(--surface-card, #FFFFFF);
    font-family: inherit;
    font-size: 16px;
    line-height: 24px;
    color: var(--text-strong, #2C3E50);
}

:where(select:not([multiple]):not([size])):focus {
    outline: none;
    border-color: var(--primary, #1F4788);
    box-shadow: none;
}

/* §8.4: 48 px on a phone, as the portal's other fields (the 767 px breakpoint of Financials and Users and access). */
@media (max-width: 767px) {
    :where(select:not([multiple]):not([size])) {
        height: var(--control-h-lg, 48px);
    }
}

/* The one chevron: every single select and, since RDEV-299 log D735 (Uffe 2026-10-20), the Events filter's caret, a
   §8.5 menu button that takes the chevron and not the select frame (.ev-dropdown__caret, with the Events dropdown). */
html body select:not([multiple]):not([size]),
.ev-dropdown__caret {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 16px 16px;
}

html body select:not([multiple]):not([size]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 36px;
    background-position: right 12px center;
    cursor: pointer;
}

html body select:not([multiple]):not([size]):disabled {
    cursor: not-allowed;
}

/* ── RDEV-299 log D775 (Uffe 2026-10-21; rmm-advertiser-design.md 1.8 §7.2, §8.4): ONE compact select ──
   The portal's compact select, one rule: 32 px at every width with the `small` 13/18 value. design.md §7.2's 16 px field
   floor gives way here, as Uffe decided for the Account page's role select (D242) and the Access dialogs' add row
   (D737; the prototype draws that value at 14 px). Its users: Users and access' role select (.rmm-org-role-select,
   org-access.css keeps its width, padding and states) and the add row of Campaign settings › Access and of Financials'
   wallet Access dialog (.rmm-access-add__select, below). front_v12.css loads on every rmmcore page and neither page
   rule restates the size; `select.` (0,1,1) wins over a page's class rule whatever the stylesheet order (the Account
   page loads rmmiam-organization.css at the same priority as this file). The frame and the chevron stay D711's. */
select.rmm-org-role-select,
select.rmm-access-add__select {
    height: var(--control-h-sm, 32px);
    font-size: 13px;
    line-height: 18px;
}

/* The borderless toolbar selects (campaign-detail.dc.html: the Plan zoom and the List's status filter, 28 px, 13/600
   Primary text) keep their look with the same chevron, closer to the value as they have no frame. */
html body select.plan-zoom:not([multiple]):not([size]) {
    padding-right: 28px;
    background-position: right 8px center;
}

html body select.li-status-filter:not([multiple]):not([size]) {
    padding-right: 20px;
    background-position: right 0 center;
}

/* Having no border to turn Primary, they show the §11 focus ring of the portal's other controls. */
html body select.plan-zoom:not([multiple]):not([size]):focus-visible,
html body select.li-status-filter:not([multiple]):not([size]):focus-visible {
    outline: 2px solid var(--primary, #1F4788);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--focus-ring, rgba(31, 71, 136, 0.4));
}

/* ── RDEV-299 log D729 (Uffe 2026-10-20; rmm-advertiser-design.md 1.8 §8.3, §8.4): ONE add row for both Access dialogs ──
   Campaign settings › Access and Financials' wallet Access dialog draw the same row under "Added users": the select of
   the users who could be added, Add (primary) and Cancel (secondary), as the Campaign settings row D713 left it — the
   buttons sm (32 px, padding 0 12 px, the 14/600 label; D652, D732). The select is the portal's one select (D711, above)
   in its compact size, since log D737 (Uffe 2026-10-21; rmm-advertiser-design.md 1.8 §8.1 controls sm, §8.4): 32 px
   at every width, the `small` 13/18 value, so the row is one height (select, Add and Cancel 32 px), as the Account
   page's compact role select (D242): since log D775 (Uffe 2026-10-21) the size is the one compact select rule's (above),
   shared with that role select. The chevron and its 36 px clearance stay the one rule's. Each dialog keeps its own
   markup and script; the row's classes are these. */
.rmm-access-add {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
    margin: 0;
    padding: 0 16px 12px;
}

.rmm-access-add[hidden] { display: none; }

.rmm-access-add__select {
    flex: 1 1 220px;
    min-width: 0;
    padding-left: 12px;
}

.rmm-access-add__btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--control-h-sm, 32px);
    padding: 0 12px;
    border: 1px solid var(--border-field, #6B7280);
    border-radius: var(--radius-md, 8px);
    background: var(--surface-card, #FFFFFF);
    font: 600 14px/20px var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
    color: var(--primary, #1F4788);
    cursor: pointer;
}

.rmm-access-add__btn:hover { background: var(--primary-subtle, #EDF0F5); }
.rmm-access-add__btn:disabled { opacity: 0.45; cursor: not-allowed; }
.rmm-access-add__btn:focus-visible { outline: 2px solid var(--primary, #1F4788); outline-offset: 2px; }

.rmm-access-add__btn--primary {
    background: var(--primary, #1F4788);
    border-color: var(--primary, #1F4788);
    color: var(--on-primary, #FFFFFF);
}

.rmm-access-add__btn--primary:hover { background: var(--primary-hover, #1C407A); }

/* ── 0.29.0 (RDEV-299 row 3.18): the Plan tab, built to campaign-detail.dc.html (Plan) and its shared/fo-events.js;
   styling values from rmm-advertiser-design.md 1.8 (§7.2 nothing below 13 px, §4.3 neutrals, §8.1 radii, §8.11
   cards). Later in the file than the rules it refines, so it wins on order. ─────────────────────────────────────── */

/* §8.11: the campaign page's cards share one radius (the header card, the Plan and List cards). */
.campaign-detail .table-card { border-radius: var(--rmm-radius-lg); }

/* The toolbar: the selection count 6 px before the buttons, Remove as sm (0 12 px), the right cluster 16 px apart. */
.tab-toolbar .selected-label { margin-right: 6px; }
.tab-toolbar .bulk-remove-btn { padding: 0 12px; }
#rmm-tab-gantt .tab-toolbar__right { gap: 16px; }

/* The plan scrolls sideways with the window-bottom scrollbar below; its own scrollbar is hidden. */
#rmm-tab-gantt .gantt-scroll { scrollbar-width: none; }
#rmm-tab-gantt .gantt-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
.gantt-hbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-x: auto;
    overflow-y: hidden;
    background: var(--rmm-surface);
    border-top: 1px solid var(--neutral-200, #E5E7EB);
    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.08);
    z-index: 50;
}
.gantt-hbar[hidden] { display: none; }
.gantt-hbar__inner { height: 1px; }
.gantt-hbar::-webkit-scrollbar { height: 10px; }
.gantt-hbar::-webkit-scrollbar-thumb { background: var(--neutral-300, #D1D5DB); border-radius: 999px; }
.gantt-hbar::-webkit-scrollbar-track { background: transparent; }

/* Stacking: the rows draw no layer of their own, so the sticky label column (3) covers the bars (1), the deadline
   diamonds and the tags (2) and the today marker (2) when the plan scrolls under it. */
.gantt .gantt-row,
.gantt .gantt-phase { z-index: auto; }
.gantt .gantt-row__label,
.gantt .gantt-phase__label { z-index: 3; }
.gantt .gantt-head__label,
.gantt .gantt-events-row__cal { z-index: 5; }

/* The axis: the upper row 13/700 ink, 8 px 4 px 6 px, a neutral-200 rule before every cell; the lower row 13/600
   muted, centred, 6 px under. */
.gantt .gantt-months { height: 32px; }
.gantt .gantt-months .month-col {
    box-sizing: border-box;
    align-items: flex-start;
    /* 4 px in from the rule as text-indent, so a sliver column at the range's end stays its own width */
    padding: 8px 0 6px;
    text-indent: 4px;
    line-height: 18px;
    border-left: 1px solid var(--neutral-200, #E5E7EB);
}
.gantt .gantt-months .month-col--centered { text-indent: 0; }
.gantt .gantt-weeks { height: 24px; }
.gantt .gantt-weeks .week-col {
    box-sizing: border-box;
    font-size: 13px;
    line-height: 18px;
    padding-bottom: 6px;
    border-left: 1px solid var(--neutral-100, #F3F4F6);
}

/* The select-all box as the rows' (16 px, native, Primary). */
.gantt .gantt-head__label .form-check-input { width: 16px; height: 16px; margin: 0; flex: none; }

/* The today marker (D572 ink): the whole plan high, "Today" 13/700; since log D766 (Uffe 2026-10-21) under the axis,
   never over an axis label: front_v21.js placeGanttTodayFlag() sets its top from the header rows (2 px is the fallback). */
.gantt .gantt-today { top: 0; bottom: 0; z-index: 2; }
.gantt .gantt-today__flag {
    top: 2px;
    font-size: 13px;
    line-height: 16px;
    font-weight: 700;
    color: var(--rmm-text);
    background: var(--rmm-surface);
    padding: 0 4px;
    z-index: 2;
    white-space: nowrap;
}

/* A group's row: the count 13/700; the group's span a neutral bar (neutral-200 fill, neutral-300 rule). */
.gantt .gantt-phase__count { font-size: 13px; }
.gantt .gantt-phase__band {
    background: var(--neutral-200, #E5E7EB);
    border: 1px solid var(--neutral-300, #D1D5DB);
}

/* A line's row, 48 px: 6 px 16 px, 16 px after the checkbox slot, the name 13/600 over one muted 13 px line. */
.gantt .gantt-row__label { padding: 6px 16px; gap: 16px; }
.gantt .gantt-row__line { display: flex; align-items: center; gap: 6px; min-width: 0; height: 16px; }
.gantt .gantt-row__name { line-height: 16px; min-width: 0; }
.gantt .gantt-row__line .gantt-row__glyph { width: 13px; height: 13px; margin-left: 0; }
.gantt .gantt-row__sub { font-size: 13px; line-height: 15px; }

/* The bar treatments: Not committed outlined in neutral-300; awaiting hatched neutral-200 / neutral-400, solid
   neutral-400 below 24 px; the prep under a To-do bar neutral-200 (new) or neutral-300 (awaiting). */
.gantt .gantt-bar--t-new { border-color: var(--neutral-300, #D1D5DB); }
.gantt .gantt-bar--t-provisional {
    background: repeating-linear-gradient(45deg, var(--neutral-200, #E5E7EB) 0 6px, var(--neutral-400, #9CA3AF) 6px 12px);
}
.gantt .gantt-bar--t-provisional.gantt-bar--solid { background: var(--neutral-400, #9CA3AF); }
.gantt .gantt-prep--t-new { background: var(--neutral-200, #E5E7EB); }
.gantt .gantt-prep--t-provisional { background: var(--neutral-300, #D1D5DB); }

/* After the bar, 10 px on: the action flag (FlagMarker mono, at most 170 px), then the late-quotation pill. */
.gantt-tags {
    position: absolute;
    top: 13px;
    height: 22px;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 440px;
    white-space: nowrap;
    z-index: 2;
}
.gantt-flag {
    display: flex;
    min-width: 0;
    max-width: 170px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.gantt-flag .flag-marker { max-width: 170px; }
.gantt-tags .overdue-quote-pill--gantt {
    position: static;
    transform: none;
    margin: 0;
    flex: none;
    font-size: 13px;
}

/* The event label row (fo-events.js): the calendar's name and the events' names 13/600, a 4 px swatch corner. */
.gantt-events-row__calname,
.gantt-events-row__name { font-size: 13px; }
.gantt-events-row__swatch { border-radius: 4px; border: 0; }

/* The legend: in the card under the plan, 12 px 16 px 14 px over a neutral-100 rule, 13 px muted, wrapping. */
#rmm-gantt-legend .gantt-legend--plan {
    flex-wrap: wrap;
    gap: 14px;
    margin: 0;
    padding: 12px 16px 14px;
    border-top: 1px solid var(--neutral-100, #F3F4F6);
    font-size: 13px;
    overflow: visible;
}
#rmm-gantt-legend .legend-swatch { border-radius: 4px; }
#rmm-gantt-legend .legend-swatch--new { border-color: var(--neutral-300, #D1D5DB); }
#rmm-gantt-legend .legend-swatch--provisional {
    background: repeating-linear-gradient(45deg, var(--neutral-200, #E5E7EB) 0 6px, var(--neutral-400, #9CA3AF) 6px 12px);
}

/* The Events filter's menu (rmm-advertiser-design.md 1.8 §8.5, which names it): items 40 px, 0 12 px, hover
   neutral-50, the selected item a trailing check in Primary (the prototype's selected fill and weight stay). One
   component on the Plan tab and the campaign calendar. */
.ev-dropdown__option { height: 40px; padding: 0 12px; }
.ev-dropdown__option:hover { background: var(--neutral-50, #F9FAFB); }
.ev-dropdown__option.is-selected:hover { background: var(--rmm-primary-bg); }
.ev-dropdown__option > .ev-dropdown__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ev-dropdown__check { flex: none; width: 16px; height: 16px; color: var(--rmm-primary); }