/* ============================================================================
   ReturnGuard admin — design tokens and composition primitives.

   Polaris supplies the components, the colour system and the type ramp. This
   file supplies only what Polaris does not express: page composition, spacing
   rhythm, density and the few structures (KPI, resource row, timeline) that
   need to look identical on every screen.

   Deliberately NOT here: a parallel colour palette, custom buttons, custom
   inputs, bespoke card chrome. Those would put a competing design language on
   top of Polaris, which is the thing to avoid.
   ========================================================================= */

:root {
  /* Spacing — one scale, used everywhere. */
  --rg-1:  4px;
  --rg-2:  8px;
  --rg-3:  12px;
  --rg-4:  16px;
  --rg-5:  20px;
  --rg-6:  24px;
  --rg-8:  32px;
  --rg-10: 40px;
  --rg-12: 48px;

  /* Type — ONE ramp, matching Polaris's own steps. Nothing in this app may use
     a size that is not on this list; the 11/15/17/19/22px one-offs that grew
     up across the views are what made the text look unresolved.

       xs  dense numerals inside a bar or chip, never prose
       sm  supporting text: hints, sublabels, table meta
       md  body — the default for anything a merchant reads
       lg  card and section titles
       xl  page title
       2xl a headline figure */
  --rg-t-xs:  12px;
  --rg-t-sm:  13px;
  --rg-t-md:  14px;
  --rg-t-lg:  16px;
  --rg-t-xl:  20px;
  --rg-t-2xl: 24px;

  /* Weights, so "how bold is a title" has one answer. */
  --rg-w-body:  450;
  --rg-w-med:   550;
  --rg-w-strong: 600;
  --rg-w-title: 650;

  /* Surfaces and text are derived from Polaris rather than declared.
     Polaris owns the theme — the merchant's admin may be light or dark, and it
     does not necessarily follow the OS preference. Hardcoding a palette here
     produced light text on a white card the moment the two disagreed, so
     everything below is expressed relative to the inherited colour instead. */
  --rg-surface: transparent;
  --rg-inset:   color-mix(in srgb, currentColor 4%, transparent);
  --rg-hover:   color-mix(in srgb, currentColor 5%, transparent);

  --rg-line:      color-mix(in srgb, currentColor 12%, transparent);
  --rg-line-firm: color-mix(in srgb, currentColor 26%, transparent);

  /* Raised from 68/52: at 13px on a white Polaris card the old values read as
     greyed-out rather than secondary. */
  --rg-muted: color-mix(in srgb, currentColor 76%, transparent);
  --rg-faint: color-mix(in srgb, currentColor 62%, transparent);

  /* Semantic colour carries meaning, so it is stated. These are chosen to hold
     contrast against both a light and a dark Polaris surface. */
  --rg-info:   #2d7ff9;
  --rg-good:   #2f9e6b;
  --rg-warn:   #c08a00;
  --rg-bad:    #dc4a3a;
  --rg-accent: currentColor;

  --rg-r-sm: 6px;
  --rg-r:    8px;
  --rg-r-lg: 12px;

  --rg-max: 1400px;
}

body { margin: 0; }

/* Inherited base: unstyled text is body text, not the browser default. */
.rg-page { font-size: var(--rg-t-md); line-height: 1.5; }

/* ---------------------------------------------------------------------------
   Page composition
   ------------------------------------------------------------------------ */

/* Data-heavy indexes run full width; everything else is bounded so a 27"
   display does not leave a column of content stranded in a field of grey. */
.rg-page      { max-width: var(--rg-max); margin: 0 auto; }
.rg-page-wide { max-width: none; }

.rg-head        { display: flex; gap: var(--rg-4); align-items: flex-start;
                  justify-content: space-between; flex-wrap: wrap;
                  margin: 0 0 var(--rg-5); }
.rg-head-main   { min-width: 0; flex: 1 1 340px; }
.rg-head-back   { display: inline-flex; align-items: center; gap: var(--rg-1);
                  font-size: var(--rg-t-sm); color: var(--rg-muted); text-decoration: none;
                  margin: 0 0 var(--rg-2); cursor: pointer; background: none; border: 0; padding: 0; }
.rg-head-back:hover { }
.rg-head-title  { font-size: var(--rg-t-xl); line-height: 1.25; font-weight: 650;
                  letter-spacing: -.01em; margin: 0; }
.rg-head-sub    { font-size: var(--rg-t-sm); color: var(--rg-muted); margin: var(--rg-1) 0 0; max-width: 68ch; }
.rg-head-meta   { display: flex; gap: var(--rg-2); align-items: center;
                  flex-wrap: wrap; margin: var(--rg-3) 0 0; }
.rg-head-actions{ display: flex; gap: var(--rg-2); align-items: center; flex-wrap: wrap; }

/* A tertiary button has no border or background, so its 12px of internal
   padding reads as the label being indented from everything above it. Pulled
   back by exactly that padding when it leads a row, so the text sits on the
   same left edge as the content it belongs to. Bordered variants are left
   alone: there the border, not the text, is the edge. */
/* The negative margin goes on the ROW, never on the button: every Polaris
   s-* element is display:contents, and a margin on one of those is discarded
   by the browser — the same trap that silently collapsed the gaps between
   sections. .rg-head-actions is a real box, so its margin holds. */
.rg-head-actions:has(> s-button[variant="tertiary"]:first-child) { margin-inline-start: -12px; }

/* Titles that appear inside a card the view builds itself (a rule, a plan, an
   insight). One class, so these stop being inline font-size guesses. */
.rg-card-title { font-size: var(--rg-t-lg); font-weight: var(--rg-w-title);
                 letter-spacing: -.005em; margin: 0; }
.rg-amount     { font-size: var(--rg-t-lg); font-weight: var(--rg-w-strong);
                 font-variant-numeric: tabular-nums; }

/* A heading and a footer for cards that carry full-bleed content. Polaris's
   own `heading` inherits padding="none" and ends up flush against the edge. */
.rg-sec-head  { padding: var(--rg-4) var(--rg-4) var(--rg-3); }
.rg-sec-title { font-size: var(--rg-t-lg); font-weight: 650; letter-spacing: -.005em; margin: 0; }
.rg-sec-foot  { display: flex; justify-content: center; align-items: center;
                gap: var(--rg-2); padding: var(--rg-4); border-top: 1px solid var(--rg-line); }
/* A footnote under full-bleed content. Left-aligned and padded on all four
   sides — these used to be bare paragraphs carrying only a top margin, so they
   sat hard against the card's left and bottom edges. */
.rg-sec-note  { margin: 0; padding: var(--rg-3) var(--rg-4) var(--rg-4);
                font-size: var(--rg-t-sm); color: var(--rg-faint);
                line-height: 1.55; max-width: 76ch; }
.rg-sec-foot + .rg-sec-note { padding-top: 0; }

/* Sections stack with rhythm.
   Grid, not margins: Polaris renders <s-section> as display:contents, and a
   margin on a display:contents element is dropped entirely. Every gap between
   cards silently collapsed to zero until this became a grid gap, which applies
   to the boxes the section actually contributes. */
.rg-stack   { display: grid; gap: var(--rg-6); align-content: start; }
.rg-stack-4 { display: grid; gap: var(--rg-4); align-content: start; }
.rg-stack-2 { display: grid; gap: var(--rg-2); align-content: start; }

.rg-split   { display: grid; gap: var(--rg-4); grid-template-columns: minmax(0,2fr) minmax(0,1fr); align-items: start; }
.rg-split-even { display: grid; gap: var(--rg-4); grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); align-items: start; }
@media (max-width: 940px) { .rg-split { grid-template-columns: 1fr; } }

.rg-grid    { display: grid; gap: var(--rg-3); }
.rg-grid-4  { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.rg-grid-3  { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.rg-grid-2  { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
@media (max-width: 600px) {
  /* Two across on a phone reads better than one enormous card per row. */
  .rg-grid-4 { grid-template-columns: 1fr 1fr; gap: var(--rg-2); }
}

/* ---------------------------------------------------------------------------
   Metric
   ------------------------------------------------------------------------ */

.rg-kpi        { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rg-kpi-label  { font-size: var(--rg-t-sm); color: var(--rg-muted); font-weight: 500;
                 display: flex; align-items: center; gap: var(--rg-1); }
.rg-kpi-value  { font-size: var(--rg-t-2xl); line-height: 1.15; font-weight: 650;
                 letter-spacing: -.02em; font-variant-numeric: tabular-nums;
                 }
.rg-kpi-value.sm { font-size: var(--rg-t-xl); }
.rg-kpi-note   { font-size: var(--rg-t-sm); color: var(--rg-faint); }
.rg-kpi-delta  { font-size: var(--rg-t-sm); font-weight: 550; display: inline-flex; align-items: center; gap: 3px; }
.rg-up   { color: var(--rg-warn); }   /* more returns is not good news */
.rg-down { color: var(--rg-good); }
.rg-flat { color: var(--rg-faint); }

@media (max-width: 600px) { .rg-kpi-value { font-size: var(--rg-t-xl); } }

/* ---------------------------------------------------------------------------
   Resource rows — one row design, every list
   ------------------------------------------------------------------------ */

.rg-rows  { display: flex; flex-direction: column; }
.rg-row   { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--rg-4);
            padding: var(--rg-3) var(--rg-2); border-top: 1px solid var(--rg-line);
            align-items: center; min-height: 44px; }
.rg-rows > .rg-row:first-child { border-top: 0; }
.rg-row-tap { cursor: pointer; border-radius: var(--rg-r-sm); transition: background .12s ease; }
.rg-row-tap:hover  { background: var(--rg-hover); }
.rg-row-tap:focus-visible { outline: 2px solid var(--rg-info); outline-offset: -2px; }
.rg-row-title { font-size: var(--rg-t-md); font-weight: 550;
                display: flex; align-items: center; gap: var(--rg-2); min-width: 0; }
.rg-row-sub   { grid-column: 1; font-size: var(--rg-t-sm); color: var(--rg-muted);
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rg-row-right { text-align: right; font-variant-numeric: tabular-nums;
                font-weight: 600; font-size: var(--rg-t-md); white-space: nowrap; }
.rg-row-rsub  { grid-column: 2; text-align: right; }

/* ---------------------------------------------------------------------------
   Table density and alignment
   ------------------------------------------------------------------------ */

.rg-num  { font-variant-numeric: tabular-nums; text-align: right; display: block; }
.rg-trunc{ display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 26ch; }
.rg-tap  { cursor: pointer; }

/* ---------------------------------------------------------------------------
   Bars, meters, flow
   ------------------------------------------------------------------------ */

.rg-bars  { display: flex; flex-direction: column; gap: var(--rg-3); }
.rg-bar   { display: grid; grid-template-columns: 1fr auto; gap: var(--rg-1) var(--rg-3); align-items: baseline; }
.rg-bar-l { display: flex; align-items: center; gap: var(--rg-2); font-size: var(--rg-t-sm); min-width: 0; }
.rg-bar-v { font-size: var(--rg-t-sm); font-variant-numeric: tabular-nums; color: var(--rg-muted); }
.rg-track { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: var(--rg-line); overflow: hidden; }
.rg-track > i { display: block; height: 100%; background: currentColor; border-radius: 999px; opacity: .82; }

.rg-meter { height: 8px; border-radius: 999px; background: var(--rg-line); overflow: hidden; }
.rg-meter > i { display: block; height: 100%; background: currentColor; opacity: .82; }
.rg-meter.warn > i { background: var(--rg-warn); }

/* Value flow: requested splits into refunded and retained. */
.rg-flow      { display: grid; gap: var(--rg-3); }
.rg-flow-bar  { display: flex; height: 34px; border-radius: var(--rg-r); overflow: hidden; background: var(--rg-line); }
.rg-flow-seg  { display: flex; align-items: center; justify-content: center;
                font-size: var(--rg-t-xs); font-weight: 600; color: #fff; min-width: 0;
                overflow: hidden; white-space: nowrap; }
.rg-flow-refund   { background: #8a8a8a; }
.rg-flow-retained { background: var(--rg-good); }
.rg-flow-key  { display: flex; gap: var(--rg-4); flex-wrap: wrap; font-size: var(--rg-t-sm); color: var(--rg-muted); }
.rg-flow-key i{ width: 9px; height: 9px; border-radius: 2px; display: inline-block; margin-right: 5px; }

/* ---------------------------------------------------------------------------
   Checklist, timeline, media
   ------------------------------------------------------------------------ */

.rg-check     { display: flex; flex-direction: column; gap: var(--rg-2); }
.rg-check-i   { display: flex; align-items: center; gap: var(--rg-2); font-size: var(--rg-t-sm); }
.rg-check-box { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--rg-line-firm);
                display: flex; align-items: center; justify-content: center; flex: none; color: #fff; }
.rg-check-i.on .rg-check-box { background: var(--rg-good); border-color: var(--rg-good); }
.rg-check-i.on { color: var(--rg-muted); }

.rg-timeline    { display: flex; flex-direction: column; }
.rg-tl          { display: grid; grid-template-columns: 20px 1fr; gap: var(--rg-3);
                  padding-bottom: var(--rg-4); position: relative; }
.rg-tl:not(:last-child)::before { content: ''; position: absolute; left: 9px; top: 20px; bottom: 0;
                  width: 2px; background: var(--rg-line); }
.rg-tl-dot      { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--rg-line-firm);
                   display: flex; align-items: center;
                  justify-content: center; color: #fff; z-index: 1; }
.rg-tl.done .rg-tl-dot { background: var(--rg-good); border-color: var(--rg-good); }
.rg-tl.now  .rg-tl-dot { border-color: var(--rg-info); box-shadow: 0 0 0 3px rgba(0,148,213,.16); }
.rg-tl-t    { font-size: var(--rg-t-md); font-weight: 550; }
.rg-tl.todo .rg-tl-t { color: var(--rg-faint); font-weight: 450; }
.rg-tl-s    { font-size: var(--rg-t-sm); color: var(--rg-muted); margin-top: 2px; }

.rg-media   { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--rg-2); }
.rg-media img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--rg-r);
                display: block; cursor: zoom-in; background: var(--rg-inset);
                border: 1px solid var(--rg-line); transition: transform .12s ease; }
.rg-media img:hover { transform: scale(1.015); }

/* ---------------------------------------------------------------------------
   Loading — skeletons match the height of what replaces them
   ------------------------------------------------------------------------ */

.rg-skel      { border-radius: var(--rg-r-sm); background: var(--rg-line);
                position: relative; overflow: hidden; }
.rg-skel::after { content: ''; position: absolute; inset: 0;
                background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
                animation: rg-sh 1.5s ease-in-out infinite; }
.rg-skel.row  { height: 44px; }
.rg-skel.kpi  { height: 78px; }
.rg-skel.tall { height: 180px; }
.rg-skel.line { height: 13px; }
@keyframes rg-sh { 0% { transform: translateX(-100%) } 100% { transform: translateX(100%) } }
@media (prefers-reduced-motion: reduce) { .rg-skel::after { animation: none; } }

/* ---------------------------------------------------------------------------
   Icons — recognition, not decoration
   ------------------------------------------------------------------------ */

.rg-ico   { width: 16px; height: 16px; flex: none; display: inline-block; vertical-align: -3px; }
.rg-ico-l { width: 20px; height: 20px; }
.rg-ico-c { width: 34px; height: 34px; padding: 8px; border-radius: var(--rg-r);
            background: var(--rg-inset); color: var(--rg-muted); box-sizing: border-box; }

.rg-hint { font-size: var(--rg-t-sm); color: var(--rg-faint); }
.rg-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--rg-t-xs);
           background: var(--rg-inset); border: 1px solid var(--rg-line);
           border-radius: var(--rg-r-sm); padding: 6px 9px; display: inline-block;
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* Filters that scroll rather than wrap onto three ragged lines. */
.rg-filters { display: flex; gap: var(--rg-2); overflow-x: auto; padding-bottom: var(--rg-1);
              scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rg-filters::-webkit-scrollbar { display: none; }
.rg-filters > * { flex: none; }

@media (max-width: 600px) {
  .rg-row { padding: var(--rg-3) var(--rg-1); }
}

/* ---------------------------------------------------------------------------
   Lightbox

   Styles live here rather than inline because an inline `display:flex` beats
   the `hidden` attribute's UA rule, which left the overlay permanently open.
   ------------------------------------------------------------------------ */
.rg-lb            { position: fixed; inset: 0; background: rgba(0,0,0,.86); z-index: 9999;
                    display: flex; align-items: center; justify-content: center; padding: 24px; }
.rg-lb[hidden]    { display: none !important; }
.rg-lb img        { max-width: 92vw; max-height: 82vh; border-radius: var(--rg-r); object-fit: contain; }
.rg-lb-btn        { position: absolute; width: 44px; height: 44px; border-radius: 50%; border: 0;
                    background: rgba(255,255,255,.14); color: #fff; cursor: pointer;
                    font-size: var(--rg-t-xl); line-height: 1; display: flex; align-items: center; justify-content: center; }
.rg-lb-btn:hover  { background: rgba(255,255,255,.24); }
.rg-lb-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.rg-lb-prev       { left: 16px;  top: 50%; transform: translateY(-50%); }
.rg-lb-next       { right: 16px; top: 50%; transform: translateY(-50%); }
.rg-lb-close      { top: 16px; right: 16px; width: 40px; height: 40px; }
.rg-lb-count      { position: absolute; bottom: 20px; color: rgba(255,255,255,.75); font-size: var(--rg-t-sm); }
@media (max-width: 600px) {
  .rg-lb-prev { left: 8px; } .rg-lb-next { right: 8px; }
}

/* ---------------------------------------------------------------------------
   Disclosure

   Configuration pages are scannable only when the detail is folded away. The
   summary line has to carry enough to decide whether to open it.
   ------------------------------------------------------------------------ */
/* A disclosure row, not a card. These live inside a section that is already a
   card; giving each its own border and radius produced a card inside a card
   with the outer edge flush against the first row. They read as one list now,
   divided by a rule. */
.rg-acc           { border-top: 1px solid var(--rg-line); }
.rg-acc:first-of-type { border-top: 0; }
.rg-acc[open]     { background: var(--rg-inset); }
.rg-acc summary  { list-style: none; cursor: pointer; padding: var(--rg-3) var(--rg-4);
                   display: flex; gap: var(--rg-3); align-items: center; min-height: 52px; }
.rg-acc summary::-webkit-details-marker { display: none; }
.rg-acc summary:hover { background: var(--rg-hover); }
.rg-acc summary:focus-visible { outline: 2px solid var(--rg-info); outline-offset: -2px; }
.rg-acc-t        { font-size: var(--rg-t-md); font-weight: 600; }
.rg-acc-s        { font-size: var(--rg-t-sm); color: var(--rg-muted); margin-top: 1px; }
.rg-acc-chev     { margin-left: auto; color: var(--rg-faint); transition: transform .16s ease; }
.rg-acc[open] .rg-acc-chev { transform: rotate(90deg); }
.rg-acc-body     { padding: 0 var(--rg-4) var(--rg-4); border-top: 1px solid var(--rg-line); }
.rg-acc-body > *:first-child { margin-top: var(--rg-4); }
@media (prefers-reduced-motion: reduce) { .rg-acc-chev { transition: none; } }

/* Settings: label and control side by side on desktop, stacked on a phone. */
.rg-set        { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
                 gap: var(--rg-4) var(--rg-8); padding: var(--rg-4) 0;
                 border-top: 1px solid var(--rg-line); align-items: start; }
.rg-set:first-child { border-top: 0; padding-top: 0; }
.rg-set-l      { font-size: var(--rg-t-md); font-weight: 550; }
.rg-set-d      { font-size: var(--rg-t-sm); color: var(--rg-muted); margin-top: 3px; line-height: 1.5; }
@media (max-width: 760px) { .rg-set { grid-template-columns: 1fr; gap: var(--rg-2); } }

.rg-swatch     { width: 38px; height: 38px; border-radius: var(--rg-r-sm);
                 border: 1px solid var(--rg-line-firm); padding: 0; cursor: pointer; background: none; }

/* Plan cards: the current plan and the recommended one must not look identical
   to the other two. */
.rg-plan        { position: relative; }
.rg-plan.on     { box-shadow: 0 0 0 2px var(--rg-info); }
.rg-plan-price  { font-size: var(--rg-t-2xl); font-weight: 650; letter-spacing: -.02em; }
.rg-plan-price small { font-size: var(--rg-t-sm); font-weight: 450; color: var(--rg-muted); }