/* Moved from websites/templates/websites/_google_ads_feed_merchant_campaign_styles.html (redesign checklist: local CSS out of the
   templates). Loaded only by the pages that include that partial. */

.fmc-page {
    --fmc-ink: var(--color-text, var(--navy));
    --fmc-muted: var(--color-neutral-600, var(--color-neutral-600));
    --fmc-line: var(--color-neutral-300, var(--color-neutral-300));
    --fmc-track: var(--color-neutral-200, var(--color-neutral-200));
    --fmc-paper: var(--color-neutral-100, var(--color-neutral-100));
    --fmc-bad: var(--coral-text);
    --fmc-warn: var(--amber-text);
    --fmc-good: var(--color-success-text, var(--mint-text));
    --fmc-good-bg: var(--color-success-bg, var(--mint-bg));
    font-variant-numeric: tabular-nums; }
.fmc-page .num { text-align: right; white-space: nowrap; }
.fmc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-4); }
.fmc-head h1 { margin: 0; }
.fmc-source { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; padding: 2px 10px;
    border-radius: 999px; border: 1px solid var(--fmc-line); }
.fmc-source--live { background: var(--fmc-good-bg); color: var(--fmc-good); border-color: transparent; font-weight: 700; }
.fmc-small { font-size: 12px; color: var(--fmc-muted); margin: 4px 0 0; }
.fmc-bad { color: var(--fmc-bad); font-weight: 700; }
.fmc-warn { color: var(--fmc-warn); font-weight: 700; }
.fmc-good { color: var(--fmc-good); font-weight: 700; }
.fmc-alert { border-left: 4px solid var(--fmc-bad); background: var(--fmc-paper); padding: var(--space-2) var(--space-3);
    margin: 0 0 var(--space-3); border-radius: 0 6px 6px 0; }
.fmc-alert--info { border-left-color: var(--fmc-line); }
.fmc-alert ul { margin: 4px 0 0; padding-left: 1.2em; }
.fmc-alert--verdict { border-left-width: 6px; padding: var(--space-3); }
.fmc-alert--verdict p { margin: 0 0 4px; }
.fmc-alert--verdict ul + p { margin-top: var(--space-2); }

/* — What to do now + wasted spend — */
.fmc-now { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-3); margin: 0 0 var(--space-4); }
.fmc-card { border: 1px solid var(--fmc-line); border-radius: 8px; padding: var(--space-3); background: var(--fmc-paper);
    min-width: 0; }
.fmc-card h2, .fmc-card h3 { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 800;
    margin: 0 0 var(--space-2); }
.fmc-actions { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.fmc-actions li { padding-left: 12px; border-left: 3px solid var(--fmc-line); }
.fmc-actions li.fmc-tone--bad { border-left-color: var(--fmc-bad); }
.fmc-actions li.fmc-tone--warn { border-left-color: var(--fmc-warn); }
.fmc-actions li.fmc-tone--good { border-left-color: var(--fmc-good); }
.fmc-big { font-size: 28px; font-weight: 800; line-height: 1.1; margin: 0; }
.fmc-big small { font-size: 14px; font-weight: 600; color: var(--fmc-muted); }

/* — Settings form — */
.fmc-form { display: grid; gap: var(--space-4); margin: 0 0 var(--space-6); }
/* Settings fieldsets wear the kit card (section 4) and their legends the card title. */
.fmc-form fieldset { border: 1px solid var(--border); border-radius: 22px; background: var(--white);
    padding: 16px 18px; margin: 0; min-width: 0; }
.fmc-form legend { float: left; width: 100%; margin: 0 0 12px; padding: 0;
    font: 900 17px/1.3 var(--font); color: var(--navy); }
.fmc-form legend + * { clear: both; }
.fmc-advice { display: block; font-size: 12px; line-height: 1.4; color: var(--fmc-muted); margin-top: 4px; }
.fmc-advice::before { content: "AkOOre advises: "; font-weight: 700; color: var(--fmc-ink); }
.fmc-text { display: block; font-size: 13px; line-height: 1.45; color: var(--fmc-ink); margin-top: 2px; font-weight: 400; }
.fmc-why-grey { display: block; font-size: 12px; color: var(--fmc-muted); font-style: italic; }
.fmc-lead { font-size: 15px; line-height: 1.5; margin: 0 0 var(--space-2); max-width: 72ch; }
.fmc-explain { font-size: 14px; line-height: 1.5; margin: 0 0 var(--space-3); max-width: 75ch; }
.fmc-what { font-size: 12.5px; line-height: 1.4; color: var(--fmc-muted); margin: -4px 0 var(--space-2); }
.fmc-block { display: block; margin: 0; }
.fmc-field.fmc-field--wide { max-width: 40rem; }
.fmc-field.fmc-field--wide select { max-width: 100%; }
.fmc-field.fmc-field--full { max-width: none; width: 100%; }
.fmc-check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; margin: var(--space-3) 0 0; }
.fmc-check input { margin-top: 3px; }
.fmc-check--inline { margin: 0; max-width: 36rem; }
.fmc-values-head { flex-basis: 100%; margin: 0; }
.fmc-intro-pair { margin: 0 0 var(--space-4); }
.fmc-card { --hn-page: var(--fmc-paper); }
.fmc-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.fmc-type { display: grid; gap: 4px; border: 1px solid var(--fmc-line); border-radius: 8px; padding: var(--space-2) var(--space-3);
    cursor: pointer; background: var(--color-bg, var(--ground)); }
.fmc-type:has(input:checked) { border-color: var(--fmc-ink); box-shadow: inset 0 0 0 1px var(--fmc-ink); }
.fmc-type--disabled { opacity: .7; cursor: not-allowed; background: var(--fmc-track); }
.fmc-type b { display: flex; gap: 6px; align-items: center; }
.fmc-chip { font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 999px; background: var(--fmc-good-bg);
    color: var(--fmc-good); }
.fmc-fields { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); }
.fmc-field { display: grid; gap: 6px; font: 800 13px/1.3 var(--font); color: var(--slate); max-width: 22rem; }
.fmc-field .fmc-text, .fmc-field .fmc-advice { font-weight: 400; }
.fmc-field input[type=number] { max-width: 14rem; }
.fmc-field select { max-width: 22rem; }
.fmc-field[hidden] { display: none; }
.fmc-values { display: flex; flex-wrap: wrap; gap: 4px var(--space-3); margin: var(--space-2) 0 0; }
.fmc-values[hidden] { display: none; }
.fmc-values label { display: inline-flex; gap: 6px; align-items: baseline; font-size: 13px; }
.fmc-values .fmc-count { color: var(--fmc-muted); font-size: 12px; }
.fmc-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.fmc-form textarea { width: 100%; min-height: 8rem; font-family: inherit; }
.fmc-form select[multiple] { width: 100%; min-height: 9rem; }
.fmc-yard { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: 13px; margin: var(--space-2) 0 0; }
.fmc-submit { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }

/* — Preview dialog — */
.fmc-dialog { max-width: 40rem; width: calc(100% - 32px); border: 1px solid var(--fmc-line); border-radius: 10px;
    padding: var(--space-4); color: var(--fmc-ink); background: var(--color-bg, var(--ground)); }
.fmc-dialog::backdrop { background: rgb(0 0 0 / .35); }
.fmc-dialog h2 { margin-top: 0; }
.fmc-dialog ol { padding-left: 1.4em; }
.fmc-dialog .fmc-buttons { display: flex; gap: var(--space-2); justify-content: flex-end; flex-wrap: wrap; }

/* — Monitoring rows: the owner's proportions, each row full width — */
.fmc-row { display: grid; gap: var(--space-3); margin: 0 0 var(--space-3); align-items: start; }
.fmc-row--1-2-1 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); }
.fmc-row--2-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr); }
.fmc-row--full { grid-template-columns: minmax(0, 1fr); }
.fmc-table-wrap { overflow-x: auto; max-height: 26rem; overflow-y: auto; }
.fmc-table-wrap .table { width: 100%; font-size: 13px; }
.fmc-table-wrap td.fmc-title { max-width: 18rem; overflow-wrap: anywhere; }
.fmc-verdict { font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 999px; white-space: nowrap;
    background: var(--fmc-track); }
.fmc-verdict--waste { background: var(--coral-bg); color: var(--fmc-bad); }
.fmc-verdict--sells { background: var(--fmc-good-bg); color: var(--fmc-good); }
.fmc-words { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--space-2); }
.fmc-word { font-size: 12px; border: 1px solid var(--fmc-line); border-radius: 999px; padding: 1px 8px; background: none;
    cursor: pointer; color: var(--fmc-ink); }
.fmc-word:hover, .fmc-word[aria-pressed=true] { border-color: var(--fmc-bad); color: var(--fmc-bad); }
.fmc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); max-height: 26rem; overflow-y: auto; }
.fmc-list li { font-size: 13px; border-bottom: 1px solid var(--fmc-track); padding-bottom: 4px; overflow-wrap: anywhere; }
.fmc-mini { font-size: 11px; padding: 0 6px; border: 1px solid var(--fmc-line); border-radius: 4px; background: none;
    cursor: pointer; color: var(--fmc-ink); }

/* Spend against budget: two bars per day on one scale. */
.fmc-pairs { display: grid; gap: 6px; }
.fmc-pair { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 9rem; gap: var(--space-2); align-items: center; font-size: 12px; }
.fmc-pair-bars { display: grid; gap: 2px; }
.fmc-bar { display: block; height: 9px; border-radius: 2px; min-width: 1px; }
.fmc-bar--cost { background: var(--fmc-ink); }
.fmc-bar--cost.fmc-bar--limited { background: var(--fmc-bad); }
.fmc-bar--budget { background: var(--fmc-track); border: 1px dashed var(--fmc-ink); height: 8px; box-sizing: border-box; }
.fmc-change { display: inline-block; font-size: 10px; background: var(--fmc-track); border-radius: 3px; padding: 0 4px; margin-left: 4px; }
.fmc-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: 12px; color: var(--fmc-muted); margin: var(--space-2) 0 0; }
.fmc-key::before { content: ""; display: inline-block; width: 12px; height: 8px; margin-right: 4px; vertical-align: middle; }
.fmc-key--cost::before { background: var(--fmc-ink); }
.fmc-key--budget::before { background: var(--fmc-track); border: 1px dashed var(--fmc-ink); box-sizing: border-box; }
.fmc-key--limited::before { background: var(--fmc-bad); }
.fmc-key--target::before { height: 0; border-top: 2px solid var(--fmc-good); }
.fmc-key--even::before { height: 0; border-top: 2px dashed var(--fmc-bad); }
.fmc-key--change::before { width: 0; height: 12px; border-left: 2px solid var(--fmc-muted); }

/* ROAS: inline SVG, geometry from report_figures.time_plot. */
.fmc-plot { width: 100%; height: 170px; display: block; }
.fmc-plot .fmc-line { fill: none; stroke: var(--fmc-ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.fmc-plot .fmc-line--counting { stroke-dasharray: 5 4; stroke: var(--fmc-muted); }
.fmc-plot .fmc-target { stroke: var(--fmc-good); stroke-width: 2; vector-effect: non-scaling-stroke; }
.fmc-plot .fmc-even { stroke: var(--fmc-bad); stroke-width: 1.5; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.fmc-plot .fmc-marker { stroke: var(--fmc-muted); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.fmc-plot .fmc-counting { fill: var(--fmc-track); }
.fmc-plot .fmc-dot { fill: var(--fmc-ink); }
.fmc-plot .fmc-dot--bad { fill: var(--fmc-bad); }
.fmc-plot .fmc-dot--counting { fill: var(--fmc-muted); }
.fmc-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--fmc-muted); margin: 2px 0 0; }

/* Cost per sale by product group: bars by cost, toned by cost per sale. */
.fmc-groups { display: grid; gap: 6px; }
.fmc-group { display: grid; grid-template-columns: 11rem minmax(0, 1fr) 15rem; gap: var(--space-2); align-items: center; font-size: 13px; }
.fmc-group-bar { height: 12px; border-radius: 2px; background: var(--fmc-muted); min-width: 1px; }
.fmc-group-bar--good { background: var(--fmc-good); }
.fmc-group-bar--warn { background: var(--amber); }
.fmc-group-bar--bad { background: var(--fmc-bad); }
.fmc-group-bar--muted { background: var(--fmc-line); }

@media (max-width: 900px) {
  .fmc-row--1-2-1, .fmc-row--2-2-1, .fmc-now, .fmc-two { grid-template-columns: minmax(0, 1fr); }
  .fmc-group { grid-template-columns: 7rem minmax(0, 1fr); }
  .fmc-group > :last-child { grid-column: 1 / -1; }
  .fmc-pair { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .fmc-pair > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .fmc-types { grid-template-columns: minmax(0, 1fr); }
}
/* Countries and languages: grouped ticks, the biggest group open. */
.fmc-col-head { font-weight: 800; margin: 0 0 var(--space-2); }
.fmc-choices { border: 1px solid var(--fmc-line); border-radius: 6px; margin: 0 0 var(--space-2); background: var(--color-bg, var(--ground)); }
.fmc-choices summary { cursor: pointer; padding: 6px 10px; font-size: 13px; font-weight: 700; }
.fmc-choice-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 2px var(--space-3);
    padding: 4px 10px 10px; max-height: 16rem; overflow-y: auto; }
.fmc-choice-list label { font-size: 13px; display: flex; gap: 6px; align-items: baseline; }
.fmc-choice-list .fmc-count { white-space: nowrap; }
.fmc-check--off { opacity: .75; }
.fmc-legend-verdicts { display: grid; gap: 2px; font-size: 12px; color: var(--fmc-muted); margin: 0 0 var(--space-2); }
/* ROAS: the Y values outside the stretched SVG. */
.fmc-plot-wrap { position: relative; padding: 0 92px 0 40px; }
.fmc-yaxis span { position: absolute; left: 0; width: 34px; text-align: right; transform: translateY(-50%);
    font-size: 11px; color: var(--fmc-muted); }
.fmc-grid i { position: absolute; left: 40px; right: 92px; border-top: 1px solid var(--fmc-track); }
.fmc-line-label { position: absolute; right: 0; width: 88px; transform: translateY(-50%); font-size: 11px; font-weight: 700; }
.fmc-line-label--target { color: var(--fmc-good); }
.fmc-line-label--even { color: var(--fmc-bad); }
.fmc-plot { position: relative; }
.fmc-axis { padding: 0 92px 0 40px; }
/* Cost per sale: the table and its colours. */
.fmc-groups-table td, .fmc-groups-table th { vertical-align: middle; }
.fmc-bar-cell { min-width: 8rem; width: 22%; }
.fmc-bar-cell .fmc-group-bar { display: block; }
.fmc-tone-text--good { color: var(--fmc-good); }
.fmc-tone-text--warn { color: var(--amber-text); }
.fmc-tone-text--bad { color: var(--fmc-bad); }
.fmc-tone-text--muted { color: var(--fmc-muted); }
@media (max-width: 520px) {
  .fmc-plot-wrap, .fmc-axis { padding-right: 0; }
  .fmc-grid i { right: 0; }
  .fmc-line-label { display: none; }
}
/* Feed selector: one campaign per feed (one feed per language). */
.fmc-feeds { border: 1px solid var(--fmc-line); border-radius: 8px; padding: var(--space-3); margin: 0 0 var(--space-3);
    background: var(--fmc-paper); }
.fmc-feeds-head { margin: 0 0 var(--space-2); font-size: 14px; line-height: 1.5; }
.fmc-feed-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fmc-feed-tab { display: grid; gap: 1px; min-width: 9.5rem; padding: 6px 10px; border: 1px solid var(--fmc-line);
    border-radius: 6px; background: var(--color-bg, var(--ground)); color: var(--fmc-ink); text-decoration: none; font-size: 12px; }
.fmc-feed-tab:hover { border-color: var(--fmc-ink); }
.fmc-feed-tab--active { border-color: var(--fmc-ink); box-shadow: inset 0 0 0 1px var(--fmc-ink); }
.fmc-feed-tab b { font-size: 14px; }
.fmc-feed-share { color: var(--fmc-ink); }
.fmc-feed-state { color: var(--fmc-muted); }
.fmc-feed-state--live { color: var(--fmc-good); font-weight: 700; }
.fmc-feed-state--paused { color: var(--amber-text); font-weight: 700; }
.fmc-feeds-small { margin-top: var(--space-2); }
.fmc-feeds-small summary { cursor: pointer; font-size: 13px; margin-bottom: var(--space-2); }
.fmc-feed-title { font-size: 20px; margin: var(--space-3) 0 var(--space-3); }
/* On / off (header), the estimate, the folds, the feeds table, the
   changes card, the month-by-month strip (2026-10-13). */
.fmc-status-form { display: inline-flex; margin: 0; }
.fmc-estimate { font-size: 14px; line-height: 1.5; margin: var(--space-2) 0 0; padding: var(--space-2) var(--space-3);
    border-left: 4px solid var(--fmc-line); background: var(--fmc-paper); border-radius: 0 6px 6px 0; max-width: 80ch; }
.fmc-estimate--good { border-left-color: var(--fmc-good); }
.fmc-estimate--warn { border-left-color: var(--amber); }
.fmc-estimate--bad { border-left-color: var(--fmc-bad); }
.fmc-fold { border: 1px solid var(--fmc-line); border-radius: 8px; background: var(--color-bg, var(--ground)); }
.fmc-fold > summary { cursor: pointer; padding: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3);
    align-items: baseline; list-style: none; }
.fmc-fold > summary::-webkit-details-marker { display: none; }
.fmc-fold > summary::before { content: "▸"; margin-right: 6px; color: var(--fmc-muted); }
.fmc-fold[open] > summary::before { content: "▾"; }
.fmc-fold-title { font-weight: 800; }
.fmc-fold-state { font-size: 13px; color: var(--fmc-muted); }
.fmc-fold .fmc-fold-body { border: 0; border-top: 1px solid var(--fmc-line); border-radius: 0; margin: 0; }
.fmc-below-line { margin: var(--space-2) 10px 0; }
.fmc-feeds-table-card { margin: 0 0 var(--space-3); }
.fmc-totals td { font-weight: 700; border-top: 2px solid var(--fmc-line); }
.fmc-other-feeds { border: 1px solid var(--fmc-line); border-radius: 6px; padding: var(--space-2) var(--space-3);
    margin: 0 0 var(--space-3); font-size: 13px; }
.fmc-other-feeds p { margin: 0 0 6px; }
.fmc-other-feeds label { display: inline-flex; gap: 6px; margin-right: var(--space-3); }
.fmc-history { margin: var(--space-3) 0 0; }
.fmc-strip { display: flex; gap: 4px; align-items: flex-end; height: 64px; margin: 0 0 var(--space-2); }
.fmc-strip-cell { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
    height: 100%; min-width: 0; }
.fmc-strip-cell i { display: block; width: 100%; background: var(--fmc-muted); border-radius: 2px 2px 0 0; min-height: 1px; }
.fmc-strip-cell--peak i { background: var(--fmc-ink); }
.fmc-strip-cell small { font-size: 10px; color: var(--fmc-muted); }
.fmc-history-table td, .fmc-history-table th { font-size: 12px; }
/* — Parts A (products in Google), B (campaign), C (how it runs) — */
.fmc-part { margin: 0 0 var(--space-4); }
.fmc-part-title { font-size: 18px; font-weight: 800; margin: var(--space-6) 0 var(--space-3); }
.fmc-part .fmc-fold-body { padding: var(--space-3); display: grid; gap: var(--space-3); }
.fmc-part .fmc-card { background: var(--fmc-paper); }
.fmc-sub > summary { cursor: pointer; padding: var(--space-1) 0; }
.fmc-sub.fmc-card > summary { padding: 0; }
.fmc-sub[open] > summary { margin-bottom: var(--space-2); }
.fmc-part-c { display: grid; gap: var(--space-3); margin-top: var(--space-4); }