/* Instagram — the account's insights as a ledger: who, how far the posts went, then every post.
   The screen wears Loss Prevention's skin (the owner asked for the two to be siblings): the --lp-*
   tokens, the Fraunces/Karla pair, the top bar, badge and sidebar come from web/styles.css, where
   the Lovable-derived block names .instagram-main beside .loss-main. What is here is this screen's
   own components drawn in that language -- one card surface with a hairline and a soft shadow,
   small-caps labels over display-face figures, the title with its filters unboxed beneath it, a
   filled dark-brown pill for the chosen range and a terracotta Apply, charts on a value scale with
   light gridlines. Colour means one of three things only: the chosen range, the direction of a
   change, and the chart's own marks. */

.instagram-main{
  --ig-good:#2f7a5b;
  --ig-bad:var(--lp-high);
  /* A change's pill: a light tint of its direction with a darker shade inside (5.2:1 and 5.6:1). */
  --ig-good-tint:color-mix(in srgb, var(--ig-good) 14%, var(--lp-card));
  --ig-good-ink:color-mix(in srgb, var(--ig-good) 80%, var(--lp-ink));
  --ig-bad-tint:color-mix(in srgb, var(--ig-bad) 12%, var(--lp-card));
  --ig-bad-ink:color-mix(in srgb, var(--ig-bad) 85%, var(--lp-ink));
  /* Net followers diverge around zero: a net gain in the terracotta, a net loss in a blue from the
     other side of the wheel. The pair passes the palette validator on the card (CVD ΔE 18.4,
     normal-vision ΔE 23.5, both 3:1 against it), and the sign is also the bar's side of the line. */
  --ig-gain:var(--lp-accent);
  --ig-loss:#4a72b5;
  --ig-mark:color-mix(in srgb, var(--terracotta) 78%, var(--brown));
  --ig-grid:color-mix(in srgb, var(--lp-line) 80%, transparent);
  --ig-focus:0 0 0 3px color-mix(in srgb, var(--lp-accent) 28%, transparent);
}
/* The main is a grid, so its header and shell are grid items with min-width:auto; both may shrink. */
.instagram-main .topbar,.instagram-main .module-shell{min-width:0}
.instagram-main .module-shell{overflow-y:auto;overflow-x:hidden;min-height:0;height:100%;padding:0 clamp(20px,3vw,44px) 54px}
.ig-page{max-width:1320px;margin:0 auto;padding-top:32px;display:grid;gap:22px;min-width:0}
.ig-page>*,.ig-body>*,.ig-charts>*,.ig-kpis>*{min-width:0}
.ig-body{display:grid;gap:22px;transition:opacity .18s ease}
.ig-page.is-loading .ig-body{opacity:.55}

/* One ring for everything that takes focus on this screen: Loss Prevention's terracotta halo. */
.instagram-main :is(button,a,select,input,[tabindex]):focus-visible{outline:2px solid var(--lp-accent);outline-offset:2px}

/* ── The account, then its range beneath it ─────────────────────────────────────────────────── */
.ig-head{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.ig-account{display:grid;gap:6px;min-width:0}
/* The page title names the account; the range is on the controls under it, so no eyebrow. */
.ig-account .eyebrow{display:none}
.ig-account h2{margin:0;font-family:var(--lp-display);font-size:34px;font-weight:600;line-height:1.1;letter-spacing:-.015em;color:var(--lp-ink);overflow-wrap:anywhere}
.ig-at{color:var(--lp-muted);margin-right:1px;font-weight:500}
.ig-followers{margin:0;color:var(--lp-muted);font-size:14px}
.ig-followers strong{color:var(--lp-ink);font-weight:700;font-variant-numeric:tabular-nums}

.ig-range{display:flex;align-items:flex-end;flex-wrap:wrap;gap:12px 18px;min-width:0;max-width:100%}
.ig-presets{display:flex;flex-wrap:wrap;gap:6px}
.ig-preset{height:38px;min-height:38px;padding:0 14px;border:1px solid var(--lp-line);border-radius:8px;background:var(--lp-card);color:var(--lp-ink);font-size:14px;font-weight:500;white-space:nowrap;cursor:pointer;transition:background .15s ease,border-color .15s ease}
.ig-preset.active{border-color:var(--lp-primary);background:var(--lp-primary);color:var(--lp-primary-ink);font-weight:600}
.ig-preset-short{display:none}
.ig-custom{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.ig-date{display:grid;gap:6px;color:var(--lp-muted);font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.ig-date input{height:38px;min-height:38px;padding:0 10px;border:1px solid var(--lp-line);border-radius:8px;background:var(--lp-card);color:var(--lp-ink);font-size:14px;font-variant-numeric:tabular-nums;letter-spacing:0;text-transform:none;color-scheme:light}
.ig-date input:focus-visible{outline:none;border-color:var(--lp-accent);box-shadow:var(--ig-focus)}
.ig-apply{height:38px;min-height:38px;padding:0 16px;border:0;border-radius:8px;background:var(--lp-accent);color:var(--paper);font-size:14px;font-weight:600;cursor:pointer;transition:filter .15s ease}
.ig-apply:focus-visible{outline:none;box-shadow:var(--ig-focus)}
@media (hover:hover){
  .ig-preset:hover:not(.active){background:var(--lp-soft)}
  .ig-apply:hover{filter:brightness(.94)}
}

.ig-error{margin:0;padding:12px 16px;border:1px solid var(--ig-bad);border-radius:10px;background:var(--lp-card);color:var(--ig-bad);font-weight:600}
.ig-coverage{margin:0;color:var(--lp-muted);font-size:12.5px;line-height:1.5}

/* ── Figures: a small-caps label over a figure in the display face ─────────────────────────── */
.ig-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
/* The account's seven cards on two rows: its three figures across, then the four its posts earned. */
.ig-kpis-account{grid-template-columns:repeat(12,minmax(0,1fr))}
.ig-kpis-account>.ig-kpi{grid-column:span 3}
.ig-kpis-account>.ig-kpi:nth-child(-n+3){grid-column:span 4}
/* Each card is a subgrid of the row's four lines -- label, figure, change, hint -- so a label that
   wraps to two lines moves every figure in its row down with it, and the figures stay on one line. */
.ig-kpi{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start;padding:18px 18px 16px;border:1px solid var(--lp-line);border-radius:12px;background:var(--lp-card);box-shadow:var(--lp-shadow)}
.ig-kpi p{margin:0}
.ig-kpi-label{color:var(--lp-muted);font-size:11px;font-weight:600;letter-spacing:.09em;line-height:1.35;text-transform:uppercase}
.ig-kpi-value{margin:10px 0 6px;color:var(--lp-ink);font-family:var(--lp-display);font-size:30px;font-weight:600;line-height:1.1;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
/* The figure is the hover target for its details; nothing in the card says so but the cursor. */
/* `.ig-kpi p` zeroes every margin in the card, so the figure's own spacing is set at that weight:
   a clear gap under the large figure before its change pill. */
.ig-kpi .ig-kpi-value{position:relative;margin:8px 0 12px}
.ig-kpi-figure{display:inline-block;border-radius:6px;cursor:default;outline:none}
.ig-kpi-figure:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb, var(--brown) 22%, transparent)}
.ig-kpi-delta{position:relative;display:flex;align-items:center}
/* A change is a round pill tinted by its direction (Square's badge): the tint carries up or down at
   a glance, the ink inside it is the darker shade so the figure keeps 4.5:1 on its own tint. */
.ig-pill{display:inline-flex;align-items:center;gap:8px;padding:4px 11px 4px 10px;border-radius:999px;background:var(--ig-pill-bg,color-mix(in srgb, var(--lp-muted) 13%, var(--lp-card)));color:var(--ig-pill-ink,var(--lp-muted));font-size:12.5px;line-height:1.35;white-space:nowrap;cursor:default;outline:none}
.ig-pill:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb, var(--brown) 22%, transparent)}
.ig-pill strong{font-weight:700;font-variant-numeric:tabular-nums}
.ig-kpi-delta[data-direction="up"]{--ig-pill-bg:var(--ig-good-tint);--ig-pill-ink:var(--ig-good-ink)}
.ig-kpi-delta[data-direction="down"]{--ig-pill-bg:var(--ig-bad-tint);--ig-pill-ink:var(--ig-bad-ink)}
/* A cost is the other way round: the arrow still says which way it went, the tint says whether that
   was good. Only Ads' cost per link click carries a tone. */
.ig-kpi-delta[data-tone="good"]{--ig-pill-bg:var(--ig-good-tint);--ig-pill-ink:var(--ig-good-ink)}
.ig-kpi-delta[data-tone="bad"]{--ig-pill-bg:var(--ig-bad-tint);--ig-pill-ink:var(--ig-bad-ink)}
.ig-arrow{font-size:9px}
/* A hint, on hover or focus: a dark label under what it explains, as Square shows its comparisons.
   It opens rightward from its target and leftward when that would leave the screen. */
.ig-hint-tip{position:absolute;left:0;top:calc(100% + 8px);z-index:5;display:grid;gap:3px;width:max-content;max-width:260px;padding:10px 12px;border-radius:10px;background:var(--lp-ink);color:var(--lp-card);font-family:var(--lp-body);font-size:12.5px;font-weight:400;letter-spacing:0;line-height:1.4;white-space:normal;box-shadow:0 6px 18px color-mix(in srgb, var(--lp-ink) 22%, transparent);opacity:0;visibility:hidden;transform:translateY(-3px);transition:opacity .12s ease,transform .12s ease,visibility 0s linear .12s;pointer-events:none}
.ig-hint-tip.is-flipped{left:auto;right:0}
.ig-hint-tip strong{font-weight:700;font-variant-numeric:tabular-nums}
.ig-hint-tip span{color:color-mix(in srgb, var(--lp-card) 76%, transparent)}
:is(.ig-pill,.ig-kpi-figure):is(:hover,:focus)+.ig-hint-tip{opacity:1;visibility:visible;transform:none;transition:opacity .12s ease,transform .12s ease}

/* ── One card, everywhere ───────────────────────────────────────────────────────────────────── */
.ig-panel{display:grid;align-content:start;gap:16px;padding:22px 22px 20px;border:1px solid var(--lp-line);border-radius:12px;background:var(--lp-card);box-shadow:var(--lp-shadow)}
.ig-panel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ig-panel h3{margin:0;font-family:var(--lp-display);font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--lp-ink)}
.ig-panel-sub{margin:4px 0 0;color:var(--lp-muted);font-size:12.5px;font-variant-numeric:tabular-nums}
.ig-panel-foot{margin:0;color:var(--lp-muted);font-size:12.5px}
.ig-empty{margin:0;padding:14px 0 6px;color:var(--lp-muted);font-size:14px}
.ig-charts{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:22px}

/* ── Charts: a value scale with light gridlines ─────────────────────────────────────────────── */
.ig-plot{position:relative;height:200px;margin:22px 0 0 46px;touch-action:pan-y}
.ig-grid{position:absolute;inset:0;pointer-events:none}
.ig-gridline{position:absolute;left:0;right:0;height:0;border-top:1px solid var(--ig-grid)}
.ig-gridline.base{border-top-color:var(--lp-line)}
.ig-gridline.zero{border-top-color:color-mix(in srgb, var(--lp-muted) 55%, var(--lp-line))}
.ig-tick{position:absolute;right:calc(100% + 8px);top:0;transform:translateY(-50%);color:var(--lp-muted);font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}
.ig-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ig-line{fill:none;stroke:var(--lp-primary);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ig-area{fill:var(--ig-mark);fill-opacity:.14;stroke:none}
.ig-dot{position:absolute;width:10px;height:10px;margin:0 0 -5px -5px;border-radius:50%;background:var(--lp-primary);box-shadow:0 0 0 2px var(--lp-card);pointer-events:none}
.ig-crosshair{position:absolute;top:0;bottom:0;width:0;border-left:1px solid color-mix(in srgb, var(--lp-ink) 32%, transparent);pointer-events:none}
.ig-tip{position:absolute;bottom:calc(100% + 6px);z-index:3;display:flex;flex-direction:column;gap:1px;padding:8px 11px 9px;border:1px solid var(--lp-line);border-radius:10px;background:var(--lp-card);box-shadow:var(--lp-shadow-lifted);pointer-events:none;white-space:nowrap}
.ig-tip-date{color:var(--lp-primary);font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.ig-tip-row{color:var(--lp-muted);font-size:12px;font-variant-numeric:tabular-nums}
.ig-tip-row strong{color:var(--lp-ink);font-size:17px;font-weight:700;line-height:1.25}
.ig-tip-muted{color:var(--lp-muted);font-size:11.5px;font-variant-numeric:tabular-nums}
.ig-axis{display:flex;justify-content:space-between;margin:-8px 0 0 46px;color:var(--lp-muted);font-size:12px}
.ig-columns{position:absolute;inset:0;display:flex;align-items:stretch;gap:2px;pointer-events:none}
.ig-column{position:relative;flex:1 1 0;min-width:1px}
.ig-bar{position:absolute;left:50%;transform:translateX(-50%);width:min(100%,24px);min-height:1.5px}
.ig-bar.gain{background:var(--ig-gain);border-radius:4px 4px 0 0}
.ig-bar.loss{background:var(--ig-loss);border-radius:0 0 4px 4px}
.ig-column.zero::after{content:"";position:absolute;left:15%;right:15%;height:2px;bottom:var(--zero);margin-bottom:-1px;border-radius:2px;background:color-mix(in srgb, var(--lp-muted) 45%, var(--lp-line))}
.ig-column.hover .ig-bar{filter:brightness(.86)}
.ig-legend{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0;padding:0;list-style:none;color:var(--lp-muted);font-size:12px}
.ig-legend li{display:inline-flex;align-items:center;gap:6px}
.ig-swatch{width:10px;height:10px;border-radius:3px;background:var(--ig-gain)}
.ig-swatch.loss{background:var(--ig-loss)}
.ig-chart-note{margin:0;color:var(--lp-muted);font-size:12px}

/* ── Tables: small-caps heads, hairline rows ────────────────────────────────────────────────── */
.ig-table{width:100%;border-collapse:collapse;font-size:14px}
.ig-table th{padding:0 10px 10px;border-bottom:1px solid var(--lp-line);color:var(--lp-muted);font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;text-align:left;white-space:nowrap;vertical-align:bottom}
.ig-table td{padding:12px 10px;border-bottom:1px solid color-mix(in srgb, var(--lp-line) 70%, transparent);vertical-align:middle}
.ig-table tbody tr:last-child td{border-bottom:0}
.ig-table :is(th,td).num{text-align:right}
.ig-table :is(th,td):first-child{padding-left:0}
.ig-table :is(th,td):last-child{padding-right:0}
.ig-figure{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--lp-ink)}
.ig-sub{display:block;color:var(--lp-muted);font-size:12px;white-space:nowrap}
.ig-types td.ig-kind{width:40%}

/* A kind of post is a chip, Loss Prevention's signal chip with the kind's glyph. */
.ig-type{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px 0 8px;border:1px solid var(--lp-line);border-radius:999px;background:var(--lp-soft);color:color-mix(in srgb, var(--lp-ink) 85%, var(--lp-muted));font-size:11.5px;font-weight:600;white-space:nowrap}
.ig-type svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.ig-table-scroll{min-width:0;overflow-x:auto;margin:0 -2px;padding:0 2px}
.ig-posts th{padding-bottom:0}
.ig-sort-button{display:inline-flex;align-items:center;gap:4px;min-height:40px;border:0;background:transparent;color:inherit;padding:0;font:inherit;font-weight:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}
.ig-posts th.num .ig-sort-button{justify-content:flex-end;width:100%}
.ig-posts th[aria-sort] .ig-sort-button{color:var(--lp-ink)}
.ig-sort-arrow{font-size:12px}
.ig-posts td.ig-post{min-width:260px;max-width:440px}
.ig-posts td.sorted .ig-figure{font-weight:700}
.ig-post-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.ig-post-date{color:var(--lp-muted);font-size:12.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.ig-rising{color:var(--lp-muted);font-size:12px}
.ig-rising::before{content:"·";margin-right:6px}
.ig-post-link{display:flex;align-items:flex-start;gap:6px;color:var(--lp-ink);text-decoration:none;border-radius:4px}
.ig-caption{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:14px;line-height:1.4;overflow-wrap:anywhere}
.ig-caption.none{color:var(--lp-muted)}
.ig-out{flex:0 0 auto;width:14px;height:14px;margin-top:3px;fill:none;stroke:var(--lp-muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){
  .ig-sort-button:hover{color:var(--lp-ink)}
  .ig-posts tbody tr:hover td{background:color-mix(in srgb, var(--lp-soft) 55%, var(--lp-card))}
  .ig-post-link:hover .ig-caption{text-decoration:underline;text-underline-offset:3px}
  .ig-post-link:hover .ig-out{stroke:var(--lp-ink)}
}
.ig-awaiting-cell{color:var(--lp-muted);font-size:13px;text-align:right;white-space:nowrap}
.ig-sort{display:none;align-items:center;gap:8px;color:var(--lp-muted);font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.ig-sort select{height:38px;min-height:38px;border:1px solid var(--lp-line);border-radius:8px;background:var(--lp-card);color:var(--lp-ink);padding:0 32px 0 12px;font-size:14px;font-weight:500;letter-spacing:0;text-transform:none}

.ig-unavailable{max-width:620px}
.ig-unavailable .ig-apply{justify-self:start}

/* ── Loading ─────────────────────────────────────────────────────────────────────────────────── */
.ig-skeleton{min-height:118px;box-shadow:none;background:linear-gradient(100deg,var(--lp-card) 20%,var(--lp-soft) 50%,var(--lp-card) 80%);background-size:220% 100%;animation:ig-shimmer 1.4s linear infinite}
.ig-skeleton-chart{min-height:290px}

/* ── Ads: the ad account over the same range, under its own heading ───────────────────────────── */
.ig-ads{display:grid;gap:14px;min-width:0}
.ig-ads>*{min-width:0}
.ig-section-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;margin-top:6px}
.ig-section-head h2{margin:0;color:var(--lp-ink);font-family:var(--lp-display);font-size:24px;font-weight:600;letter-spacing:-.01em}
.ig-section-head .ig-panel-sub{margin:0}
.ig-ads-empty{padding:18px 20px;border:1px dashed var(--lp-line);border-radius:12px;background:var(--lp-card)}
.ig-ads-empty a{color:var(--lp-accent);font-weight:600}
/* Every figure column ends on the table's right edge, so the amounts line up down the list. */
.ig-campaigns td.ig-campaign{width:100%;min-width:220px;max-width:0}
.ig-campaign-name{display:block;overflow:hidden;color:var(--lp-ink);font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.ig-campaigns td.num{white-space:nowrap}
/* A campaign's name opens its sales while it ran, under the row. */
.ig-campaign-row{cursor:pointer}
.ig-campaign-open{display:block;width:100%;min-width:0;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;border-radius:4px}
.ig-campaign-cue{color:var(--lp-accent);font-weight:600}
.ig-campaign-row.is-open td{border-bottom-color:transparent}
@media (hover:hover){
  .ig-campaign-row:hover td{background:color-mix(in srgb, var(--lp-soft) 55%, var(--lp-card))}
  .ig-campaign-row:hover .ig-campaign-cue{text-decoration:underline;text-underline-offset:3px}
}
/* Sales while it ran: a quiet well under the row, never a card inside the card. The tiles keep
   the page's rule (label, figure, change pill) without their own borders, divided by hairlines. */
.ig-campaigns td.ig-impact-cell{padding:0 0 16px}
.ig-impact{display:grid;gap:18px;padding:18px 20px 16px;border-radius:10px;background:color-mix(in srgb, var(--lp-soft) 62%, var(--lp-card));cursor:auto;min-width:0}
.ig-impact>*{min-width:0}
.ig-impact-head{display:grid;gap:4px}
.ig-impact-head h4{margin:0;color:var(--lp-ink);font-family:var(--lp-display);font-size:17px;font-weight:600;letter-spacing:-.01em}
.ig-impact-dates,.ig-impact-spend{margin:0;color:var(--lp-muted);font-size:13px;font-variant-numeric:tabular-nums}
.ig-impact-dates strong{color:var(--lp-ink);font-weight:600}
.ig-impact-wait{margin:0;color:var(--lp-muted);font-size:13.5px}
.ig-impact .ig-impact-tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.ig-impact .ig-impact-tiles>.ig-kpi{grid-column:auto}
.ig-impact .ig-kpi{padding:2px 18px 0;border:0;border-left:1px solid var(--lp-line);border-radius:0;background:transparent;box-shadow:none}
.ig-impact .ig-kpi:first-child{padding-left:0;border-left:0}
.ig-impact .ig-kpi-value{font-size:26px}
/* One row per store; the three figures end on one right edge down the list (a subgrid). */
.ig-impact-stores{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,max-content);column-gap:28px;margin:0;padding:0;list-style:none;font-size:14px}
.ig-impact-store{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;align-items:baseline;padding:9px 0;border-top:1px solid color-mix(in srgb, var(--lp-line) 70%, transparent)}
.ig-impact-store .num{text-align:right}
.ig-impact-store-name{min-width:0;overflow:hidden;color:var(--lp-ink);font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.ig-impact-pct::before{content:" · "}
.ig-impact-store-head{padding:0 0 8px;border-top:0;color:var(--lp-muted);font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.ig-impact-flags{display:grid;gap:4px;margin:0;padding:0;list-style:none;color:var(--lp-muted);font-size:12.5px;line-height:1.45}
.ig-impact-flags li{position:relative;padding-left:14px}
.ig-impact-flags li::before{content:"";position:absolute;left:2px;top:.6em;width:5px;height:5px;border-radius:50%;background:color-mix(in srgb, var(--lp-muted) 70%, transparent)}
.ig-impact-note{margin:0;color:var(--lp-muted);font-size:12px;line-height:1.45}
.ig-more{justify-self:start;height:34px;padding:0 14px;border:1px solid var(--lp-line);border-radius:8px;background:var(--lp-card);color:var(--lp-ink);font-size:13.5px;font-weight:600;cursor:pointer}
@keyframes ig-shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){.ig-skeleton{animation:none}.ig-hint-tip{transition:none!important}.ig-body{transition:none}.ig-preset,.ig-apply{transition:none}}

/* ── Narrower ────────────────────────────────────────────────────────────────────────────────── */
@media (max-width:1180px){
  .ig-kpis{grid-template-columns:repeat(6,minmax(0,1fr))}
  .ig-kpi{grid-column:span 2}
  .ig-kpi:nth-child(-n+2){grid-column:span 3}
  .ig-kpis-account>.ig-kpi{grid-column:span 3}
  .ig-kpis-account>.ig-kpi:nth-child(-n+3){grid-column:span 2}
}
@media (max-width:980px){
  .ig-charts{grid-template-columns:minmax(0,1fr)}
}

/* ── Phone: one column, 16px gutter, the list as cards ──────────────────────────────────────── */
@media (max-width:720px){
  .instagram-main .topbar{height:60px;min-height:60px}
  .instagram-main .module-shell{padding:0 16px 32px}
  .ig-page{padding-top:22px;gap:16px}
  .ig-account h2{font-size:28px}
  .ig-range{flex-direction:column;align-items:stretch;width:100%}
  .ig-presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
  .ig-preset{padding:0 4px}
  .ig-preset-long{display:none}
  .ig-preset-short{display:inline}
  .ig-custom{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}
  .ig-date{min-width:0;font-size:10px}
  .ig-date input{width:100%;min-width:0;padding:0 8px;font-size:16px}

  .ig-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ig-kpi,.ig-kpi:nth-child(-n+2),.ig-kpis-account>.ig-kpi,.ig-kpis-account>.ig-kpi:nth-child(-n+3){grid-column:auto}
  .ig-kpi:first-child,.ig-kpis-account>.ig-kpi:first-child{grid-column:1 / -1}
  .ig-kpi{padding:14px}
  .ig-kpi-label{font-size:10px}
  .ig-kpi-value{font-size:26px}

  .ig-panel{padding:18px 16px}
  .ig-plot{height:170px;margin-left:40px}
  .ig-axis{margin-left:40px}

  .ig-sort{display:flex}
  .ig-sort select{max-width:170px}

  /* Both tables become one card per row: the name on its line, the figures in a grid beneath it,
     each with its label, so nothing scrolls sideways on a phone. */
  .ig-table thead{display:none}
  .ig-table,.ig-table tbody{display:block}
  .ig-table tr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 8px;padding:14px 0;border-bottom:1px solid color-mix(in srgb, var(--lp-line) 70%, transparent)}
  .ig-table tbody tr:last-child{border-bottom:0}
  .ig-table td{display:block;padding:0;border:0}
  .ig-table td.num{text-align:left}
  .ig-table td.num::before{content:attr(data-label);display:block;color:var(--lp-muted);font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;margin-bottom:2px}
  .ig-table td.ig-post,.ig-table td.ig-kind{grid-column:1 / -1;min-width:0;max-width:none;width:auto}
  .ig-types tr{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ig-types td.ig-kind{margin-bottom:2px}
  .ig-awaiting-cell{grid-column:1 / -1;text-align:left;white-space:normal}
  .ig-table-scroll{overflow:visible;margin:0;padding:0}
  .ig-posts tbody tr:hover td{background:transparent}
  .ig-section-head h2{font-size:21px}
  .ig-table td.ig-campaign{grid-column:1 / -1;min-width:0;max-width:none;width:auto}
  .ig-campaign-name{white-space:normal}
  /* Four figures with long labels do not fit a phone's width in one line, so a campaign's figures
     sit two by two under its name. */
  .ig-table.ig-campaigns tr{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ig-table.ig-campaigns tr.ig-campaign-row.is-open{border-bottom:0}
  .ig-table.ig-campaigns tr.ig-impact-row{display:block;padding:0 0 14px}
  .ig-campaigns td.ig-impact-cell{padding:0}
  .ig-impact{padding:16px 14px 14px;gap:16px}
  .ig-impact .ig-impact-tiles{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px}
  .ig-impact .ig-impact-tiles>.ig-kpi,.ig-impact .ig-impact-tiles>.ig-kpi:first-child{grid-column:auto;padding:0 10px 0 0;border-left:0}
  .ig-impact .ig-impact-tiles>.ig-kpi:nth-child(even){padding:0 0 0 12px;border-left:1px solid var(--lp-line)}
  .ig-impact .ig-kpi-value{font-size:23px}
  /* A store is its name, then its three figures, each under its own small label. */
  .ig-impact-stores{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:10px}
  .ig-impact-store-head{display:none}
  .ig-impact-store{row-gap:4px}
  .ig-impact-store-name{grid-column:1 / -1;white-space:normal}
  .ig-impact-store .num{text-align:left}
  .ig-impact-store .num::before{content:attr(data-label);display:block;color:var(--lp-muted);font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;margin-bottom:2px}
  .ig-impact-pct{display:block;color:var(--lp-muted);font-size:12.5px}
  .ig-impact-pct::before{content:none}
}