> ## Documentation Index
> Fetch the complete documentation index at: https://docs.supercycle.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Cycle actions

> Step-by-step guides for creating, fulfilling, updating, and canceling cycles

export const adminCyclesScope = () => ({
  AdminAddCyclesModalBody,
  AdminCycleBadge,
  AdminCycleBillingCard,
  AdminCycleCalendar,
  AdminCycleCardHead,
  AdminCycleChangeItemModal,
  AdminCycleCheckbox,
  AdminCycleConvertModal,
  AdminCycleDateModal,
  AdminCycleEditDatesModal,
  AdminCycleField,
  AdminCycleFulfill,
  AdminCycleFulfillmentCard,
  AdminCycleIcon,
  AdminCycleMethodCard,
  AdminCycleModal,
  AdminCyclePageHeader,
  AdminCyclePageLayout,
  AdminCyclePopover,
  AdminCycleReceivalCard,
  AdminCycleShopifyOrder,
  AdminCycleSidebar,
  AdminCycleStatusBadge,
  AdminCycleStatusCard,
  AdminCycleThumb,
  AdminCycleTimeline,
  AdminCycleTimelineCard,
  AdminCyclesIndexPage,
  AdminCyclesTable,
  AdminWindow,
  BorderBox,
  PBlockStack,
  PBox,
  PButton,
  PCard,
  PDivider,
  PIcon,
  PInlineStack,
  PLayout,
  PLink,
  PPage,
  PSection,
  PSelect,
  PTabs,
  PText,
  PTextField,
  SaveBar,
  SupercycleMark
});

export const AdminCreateCycleOrder = () => {
  const {AdminCycleBadge, AdminCycleField, AdminCycleIcon, AdminCycleThumb, AdminWindow, PBlockStack, PButton, PCard, PDivider, PInlineStack, PLayout, PLink, PPage, PSection, PSelect, PText, PTextField} = adminCyclesScope();
  const [method, setMethod] = useState("Calendar");
  const [period, setPeriod] = useState("15 days + Cleaning fee + Insurance");
  const price = ({
    "4 days": "£8.00",
    "7 days": "£12.00",
    "15 days + Cleaning fee + Insurance": "£18.00"
  })[period] || "£18.00";
  return <AdminWindow url="admin.shopify.com/store/summit/apps/supercycle/cycles/new">
      <style>{CYC_CSS}</style>
      <div className="scc">
      <PPage title="Create cycle order">
        <PLayout>
          <PSection>
            <PBlockStack gap="400">
              <PCard><PBlockStack gap="300"><PText variant="headingSm" as="h2">Add cycle product</PText><PTextField id="co-search" label="Search for a product" labelHidden prefix={<AdminCycleIcon name="search" tone="Subdued" />} suffix={<AdminCycleIcon name="barcode" tone="Subdued" />} placeholder="Search for a product" value="" onChange={() => {}} /></PBlockStack></PCard>
              <PCard>
                <PBlockStack gap="400">
                  <PInlineStack align="space-between" blockAlign="start" wrap={false}>
                    <PInlineStack gap="300" blockAlign="start" wrap={false}><AdminCycleThumb size="Large" /><PBlockStack gap="100"><PText>Coastal Breeze Top</PText><div><AdminCycleBadge tone="neutral">Small / White</AdminCycleBadge></div></PBlockStack></PInlineStack>
                    <PButton variant="Plain" tone="Critical">Remove</PButton>
                  </PInlineStack>
                  <AdminCycleField label="Cycle method"><PSelect id="co-method" label="Cycle method" options={["Calendar", "Subscription", "Membership"]} value={method} onChange={setMethod} /></AdminCycleField>
                  {method === "Calendar" && <PInlineStack gap="300" wrap={false}>
                      <div style={{
    flex: 1
  }}><AdminCycleField label="Rental period" right={<PLink>{price}</PLink>}><PSelect id="co-period" label="Rental period" options={["4 days", "7 days", "15 days + Cleaning fee + Insurance"]} value={period} onChange={setPeriod} /></AdminCycleField></div>
                      <div style={{
    flex: 1
  }}><PTextField id="co-dates" label="Rental dates" prefix={<AdminCycleIcon name="calendar" tone="Subdued" />} value="Oct 16, 2025 - Oct 30, 2025" onChange={() => {}} /></div>
                    </PInlineStack>}
                  {method === "Subscription" && <AdminCycleField label="Minimum term"><PSelect id="co-term" label="Minimum term" options={["1 month", "3 months"]} value="1 month" /></AdminCycleField>}
                  <div className="scc-avail"><AdminCycleIcon name="check" tone="Inherit" />3 items available</div>
                </PBlockStack>
              </PCard>
              <div />
            </PBlockStack>
          </PSection>
          <PSection variant="oneThird">
            <PCard><PBlockStack gap="200"><PText variant="headingSm" as="h2">Summary</PText><PInlineStack align="space-between"><PText>Coastal Breeze Top</PText><PText>{price}</PText></PInlineStack><PDivider /><PInlineStack align="space-between"><PText fontWeight="semibold">1 cycle</PText><PText fontWeight="semibold">{price}</PText></PInlineStack></PBlockStack></PCard>
          </PSection>
        </PLayout>
      </PPage>
      </div>
    </AdminWindow>;
};

export const AdminAddCyclesModal = () => {
  const {AdminAddCyclesModalBody, AdminCycleShopifyOrder, AdminWindow} = adminCyclesScope();
  const initialLines = [{
    product: "Coastal Breeze Top",
    variant: "Small / White",
    summary: "1 month minimum",
    price: "£20.00"
  }];
  const [orderLines, setOrderLines] = useState(initialLines);
  const [menuOpen, setMenuOpen] = useState(false);
  const [modal, setModal] = useState(false);
  const [method, setMethod] = useState("Select method");
  const [duration, setDuration] = useState("10 days");
  const [start, setStart] = useState("2025-10-16");
  const [lines, setLines] = useState([]);
  const [toast, setToast] = useToast();
  const windowRef = useRef(null);
  const stepsRef = useRef(() => []);
  const resetRef = useRef(() => {});
  const timer = useRef(null);
  const openModal = () => {
    setMenuOpen(false);
    setMethod("Select method");
    setLines([]);
    setModal(true);
  };
  const preset = p => {
    setMethod(p.method);
    if (p.duration) {
      setDuration(p.duration);
      setStart(p.start);
    }
  };
  const addProduct = () => {
    setLines([{
      product: "Coastal Breeze Top",
      variant: "Large / White",
      avail: "checking"
    }]);
    clearTimeout(timer.current);
    timer.current = setTimeout(() => setLines(ls => ls.map(l => ({
      ...l,
      avail: "ready"
    }))), 900);
  };
  const addToOrder = () => {
    setModal(false);
    setOrderLines(ls => [...ls, {
      product: "Coastal Breeze Top",
      variant: "Large / White",
      summary: duration + " (16 Oct - 25 Oct)",
      price: "£40.00"
    }]);
    setToast("1 cycle added to order #1009");
  };
  useEffect(() => () => clearTimeout(timer.current), []);
  stepsRef.current = () => [{
    to: w => adminCycleFind(w, '[data-tour="more-actions"]'),
    click: () => setMenuOpen(true),
    hold: 900
  }, {
    to: w => adminCycleFind(w, '[data-tour="add-cycles"]'),
    click: openModal,
    hold: 1200
  }, {
    to: w => w.querySelector('[data-tour="preset"]'),
    click: () => preset(CYC_PRESETS[1]),
    hold: 1000
  }, {
    to: w => w.querySelector('[data-tour="add-products"]'),
    click: addProduct,
    hold: 1800
  }, {
    to: w => w.querySelector('[data-tour="add-to-order"]'),
    click: addToOrder,
    hold: 3000
  }];
  resetRef.current = () => {
    clearTimeout(timer.current);
    setOrderLines(initialLines);
    setMenuOpen(false);
    setModal(false);
    setMethod("Select method");
    setLines([]);
    setToast(null);
    adminCycleScrollTop(windowRef.current);
  };
  const {cursor, bind} = useTour(windowRef, stepsRef, resetRef);
  return <AdminWindow windowRef={windowRef} cursor={cursor} bind={bind} url="admin.shopify.com/store/summit/orders/1009" toast={toast} modal={modal && <AdminAddCyclesModalBody open onClose={() => setModal(false)} onAdd={addToOrder} method={method} setMethod={setMethod} duration={duration} setDuration={setDuration} start={start} lines={lines} onAddProduct={addProduct} onPreset={preset} />}>
      <style>{CYC_CSS}</style>
      <div className="scc">
      <AdminCycleShopifyOrder lines={orderLines} menuOpen={menuOpen} onMenu={() => setMenuOpen(v => !v)} onAddCycles={openModal} />
      </div>
    </AdminWindow>;
};

export const AdminAddCyclesModalBody = ({open, onClose, onAdd, method, setMethod, duration, setDuration, start, lines, onAddProduct, onPreset}) => {
  const {AdminCycleBadge, AdminCycleField, AdminCycleIcon, AdminCycleModal, AdminCycleThumb, PBlockStack, PBox, PButton, PDivider, PInlineStack, PSelect, PText, PTextField, SupercycleMark} = adminCyclesScope();
  const ready = method !== "Select method" && lines.length > 0 && lines.every(l => l.avail === "ready");
  return <AdminCycleModal open={open} title="Add cycles" titleIcon={<SupercycleMark size={16} />} onClose={onClose} maxWidth="40rem" footer={<><PButton onClick={onClose}>Cancel</PButton>{ready ? <PButton variant="Primary" onClick={onAdd} tour="add-to-order">Add to order</PButton> : <button type="button" className="Polaris-Button Polaris-Button--variantPrimary Polaris-Button--sizeMedium Polaris-Button--textAlignCenter" disabled aria-disabled="true"><span className="Polaris-Text--root Polaris-Text--bodySm Polaris-Text--semibold">Add to order</span></button>}</>}>
      <PBox padding="400">
        <PBlockStack gap="400">
          <AdminCycleField label="Method"><PSelect id="ac-method" label="Method" options={["Select method", "Calendar", "Subscription", "Membership"]} value={method} onChange={setMethod} /></AdminCycleField>
          {method === "Calendar" && <PInlineStack gap="300" wrap={false}>
              <div style={{
    flex: 1
  }}><AdminCycleField label="Duration"><PSelect id="ac-duration" label="Duration" options={["4 days", "7 days", "10 days", "14 days"]} value={duration} onChange={setDuration} /></AdminCycleField></div>
              <div style={{
    flex: 1
  }}><PTextField id="ac-start" label="Start date" prefix={<AdminCycleIcon name="calendar" tone="Subdued" />} value={adminCycleLong(start)} onChange={() => {}} /></div>
            </PInlineStack>}
          {method === "Subscription" && <AdminCycleField label="Minimum term"><PSelect id="ac-term" label="Minimum term" options={["1 month", "3 months", "6 months"]} value="1 month" /></AdminCycleField>}
          <PInlineStack gap="200">{CYC_PRESETS.map(p => <button key={p.label} type="button" className="scc-chip" onClick={() => onPreset(p)} data-tour={p.method === "Calendar" ? "preset" : undefined}>{p.label}</button>)}</PInlineStack>
        </PBlockStack>
      </PBox>
      <PDivider />
      {lines.map((l, i) => <div key={i}>
          <PBox padding="400">
            <PInlineStack align="space-between" blockAlign="center" wrap={false}>
              <PInlineStack gap="300" blockAlign="start" wrap={false}><AdminCycleThumb size="Large" /><PBlockStack gap="100"><PText fontWeight="semibold">{l.product}</PText><div><AdminCycleBadge tone="neutral">{l.variant}</AdminCycleBadge></div><PText tone="subdued">{duration} - £40.00</PText></PBlockStack></PInlineStack>
              <PInlineStack gap="200" blockAlign="center" wrap={false}>
                {l.avail === "ready" ? <AdminCycleBadge tone="success" icon="checkCircle">9 items available</AdminCycleBadge> : <AdminCycleBadge tone="neutral">Checking availability</AdminCycleBadge>}
                <PButton variant="Tertiary" iconOnly icon="x" ariaLabel="Remove" />
              </PInlineStack>
            </PInlineStack>
          </PBox>
          <PDivider />
        </div>)}
      <PBox padding="300" background="bg-surface-secondary"><PInlineStack align="center"><PButton variant="Tertiary" onClick={onAddProduct} tour="add-products"><span className="scc-menu-label"><AdminCycleIcon name="plusCircle" /> Add products</span></PButton></PInlineStack></PBox>
    </AdminCycleModal>;
};

export const CYC_PRESETS = [{
  label: "Subscription (1 month minimum)",
  method: "Subscription"
}, {
  label: "Calendar (16 Oct - 25 Oct)",
  method: "Calendar",
  duration: "10 days",
  start: "2025-10-16"
}];

export const AdminCycleShopifyOrder = ({lines, menuOpen, onMenu, onAddCycles}) => {
  const {AdminCycleBadge, AdminCyclePageHeader, AdminCyclePopover, AdminCycleThumb, BorderBox, PBlockStack, PBox, PButton, PCard, PDivider, PInlineStack, PLayout, PLink, PSection, PText, SupercycleMark} = adminCyclesScope();
  return <div className="Polaris-Page">
      <AdminCyclePageHeader title="#1009" status={undefined} subtitle="October 8, 2025 at 3:19 pm from Online Store" actions={[<PButton>Refund</PButton>, <PButton>Return</PButton>, <PButton>Edit</PButton>, <PButton disclosure>Print</PButton>, <span className="scc-anchor"><PButton disclosure onClick={onMenu} tour="more-actions">More actions</PButton><AdminCyclePopover open={!!menuOpen} items={[{
    label: "Duplicate"
  }, {
    label: "Archive"
  }, {
    label: "View order status page"
  }, {
    label: <span className="scc-menu-label"><SupercycleMark size={14} /> Add cycles</span>,
    onClick: onAddCycles,
    tour: "add-cycles"
  }]} /></span>]} />
      <PLayout>
        <PSection>
          <PBlockStack gap="400">
            <PCard>
              <PBlockStack gap="300">
                <PInlineStack gap="200"><AdminCycleBadge tone="attention" icon="circle">Unfulfilled ({lines.length})</AdminCycleBadge><AdminCycleBadge tone="neutral">Main warehouse</AdminCycleBadge></PInlineStack>
                <BorderBox padding="0">
                  <PBox padding="300"><PText>Standard</PText></PBox>
                  {lines.map((l, i) => <div key={i}><PDivider /><PBox padding="300"><PInlineStack align="space-between" blockAlign="start" wrap={false}>
                      <PInlineStack gap="300" blockAlign="start" wrap={false}><AdminCycleThumb size="Medium" /><PBlockStack gap="100"><PText>{l.product}</PText><div><AdminCycleBadge tone="neutral">{l.variant}</AdminCycleBadge></div><PText tone="subdued">{l.summary}</PText></PBlockStack></PInlineStack>
                      <PInlineStack gap="600" wrap={false}><PText>{l.price} × 1</PText><PText>{l.price}</PText></PInlineStack>
                    </PInlineStack></PBox></div>)}
                </BorderBox>
                <PInlineStack align="end" gap="200"><PButton>Fulfill items</PButton><PButton variant="Primary">Create shipping label</PButton></PInlineStack>
              </PBlockStack>
            </PCard>
            <PCard><PBlockStack gap="300"><AdminCycleBadge icon="dot">Paid</AdminCycleBadge><BorderBox padding="0"><PBox padding="300"><PBlockStack gap="200">
              <PInlineStack align="space-between"><PText>Subtotal</PText><PText>{lines.length} {lines.length === 1 ? "item" : "items"}</PText><PText>£{(lines.length * 20).toFixed(2)}</PText></PInlineStack>
              <PInlineStack align="space-between"><PText>Shipping</PText><PText>Standard</PText><PText>£4.99</PText></PInlineStack>
              <PInlineStack align="space-between"><PText fontWeight="semibold">Total</PText><PText /><PText fontWeight="semibold">£{(lines.length * 20 + 4.99).toFixed(2)}</PText></PInlineStack>
            </PBlockStack></PBox></BorderBox></PBlockStack></PCard>
            <div />
          </PBlockStack>
        </PSection>
        <PSection variant="oneThird">
          <PBlockStack gap="300">
            <PCard><PBlockStack gap="200"><PText variant="headingSm" as="h2">Notes</PText><PText tone="subdued">No notes from customer</PText></PBlockStack></PCard>
            <PCard><PBlockStack gap="200"><PText variant="headingSm" as="h2">Customer</PText><PLink>Renton McBorrow</PLink><PText tone="subdued">1 order</PText><PText variant="headingSm">Contact information</PText><PLink>renton.mcborrow@example.com</PLink></PBlockStack></PCard>
            <PCard><PBlockStack gap="200"><PText variant="headingSm" as="h2">Tags</PText><PInlineStack gap="100"><AdminCycleBadge tone="neutral">Has rental items</AdminCycleBadge><AdminCycleBadge tone="neutral">Subscription items</AdminCycleBadge></PInlineStack></PBlockStack></PCard>
          </PBlockStack>
        </PSection>
      </PLayout>
    </div>;
};

export const AdminCycleMarkReturned = () => {
  const {AdminCycleFulfill} = adminCyclesScope();
  return <AdminCycleFulfill action="returned" />;
};

export const AdminCycleFulfill = ({action = "fulfilled"}) => {
  const {AdminCyclesIndexPage, AdminWindow} = adminCyclesScope();
  const targets = action === "returned" ? [1006, 1005] : [1009, 1008];
  const [rows, setRows] = useState(CYC_ROWS);
  const [selected, setSelected] = useState([]);
  const [bulkOpen, setBulkOpen] = useState(false);
  const [toast, setToast] = useToast();
  const windowRef = useRef(null);
  const stepsRef = useRef(() => []);
  const resetRef = useRef(() => {});
  const toggle = id => setSelected(s => s.includes(id) ? s.filter(x => x !== id) : [...s, id]);
  const toggleAll = () => setSelected(s => s.length === rows.length ? [] : rows.map(r => r.id));
  const mark = what => setSelected(s => {
    setRows(rs => rs.map(r => s.includes(r.id) ? {
      ...r,
      status: what === "fulfilled" ? "Fulfilled" : "Received",
      fulfill: what === "fulfilled" ? adminCycleKey(CYC_TODAY) : r.fulfill
    } : r));
    setToast(s.length + (s.length === 1 ? " cycle" : " cycles") + (what === "fulfilled" ? " marked as fulfilled" : " marked as returned"));
    setBulkOpen(false);
    return [];
  });
  stepsRef.current = () => [{
    to: w => w.querySelector('[data-tour="check-' + targets[0] + '"]'),
    click: () => toggle(targets[0]),
    hold: 600
  }, {
    to: w => w.querySelector('[data-tour="check-' + targets[1] + '"]'),
    click: () => toggle(targets[1]),
    hold: 800
  }, {
    to: w => w.querySelector('[data-tour="bulk-menu"]'),
    click: () => setBulkOpen(true),
    hold: 1000
  }, {
    to: w => w.querySelector('[data-tour="mark-' + action + '"]'),
    click: () => mark(action),
    hold: 3000
  }];
  resetRef.current = () => {
    setRows(CYC_ROWS);
    setSelected([]);
    setBulkOpen(false);
    setToast(null);
  };
  const {cursor, bind} = useTour(windowRef, stepsRef, resetRef);
  return <AdminWindow windowRef={windowRef} cursor={cursor} bind={bind} url="admin.shopify.com/store/summit/apps/supercycle/cycles" toast={toast}>
      <style>{CYC_CSS}</style>
      <div className="scc">
      <AdminCyclesIndexPage rows={rows} selectable selected={selected} onToggle={toggle} onToggleAll={toggleAll} bulkOpen={bulkOpen} onBulk={() => setBulkOpen(v => !v)} onMark={mark} />
      </div>
    </AdminWindow>;
};

export const AdminCyclesIndex = ({scene}) => {
  const {AdminCyclesIndexPage, AdminWindow} = adminCyclesScope();
  const [filtersOpen, setFiltersOpen] = useState(false);
  const [dateFilterOpen, setDateFilterOpen] = useState(false);
  const [dateFilter, setDateFilter] = useState(null);
  const windowRef = useRef(null);
  const stepsRef = useRef(() => []);
  const resetRef = useRef(() => {});
  const rows = dateFilter === "Today" ? CYC_ROWS.filter(r => r.today) : CYC_ROWS;
  stepsRef.current = () => scene === "filter" ? [{
    to: w => w.querySelector('[data-tour="filters"]'),
    click: () => setFiltersOpen(true),
    hold: 900
  }, {
    to: w => w.querySelector('[data-tour="date-filter"]'),
    click: () => setDateFilterOpen(true),
    hold: 900
  }, {
    to: w => w.querySelector('[data-tour="filter-today"]'),
    click: () => {
      setDateFilter("Today");
      setDateFilterOpen(false);
    },
    hold: 3200
  }] : [];
  resetRef.current = () => {
    setFiltersOpen(false);
    setDateFilterOpen(false);
    setDateFilter(null);
  };
  const tour = useTour(windowRef, stepsRef, resetRef);
  const live = scene === "filter";
  return <AdminWindow windowRef={windowRef} cursor={live ? tour.cursor : undefined} bind={live ? tour.bind : undefined} url="admin.shopify.com/store/summit/apps/supercycle/cycles">
      <style>{CYC_CSS}</style>
      <div className="scc">
      <AdminCyclesIndexPage rows={rows} filtersOpen={filtersOpen} onFilters={() => setFiltersOpen(v => !v)} dateFilter={dateFilter} dateFilterOpen={dateFilterOpen} onDateFilterOpen={() => setDateFilterOpen(v => !v)} onDateFilter={o => {
    setDateFilter(o);
    setDateFilterOpen(false);
  }} />
      </div>
    </AdminWindow>;
};

export const AdminCyclesIndexPage = ({rows, selected = [], onToggle, onToggleAll, selectable, filtersOpen, onFilters, dateFilter, onDateFilterOpen, dateFilterOpen, onDateFilter, bulkOpen, onBulk, onMark, tab = 0}) => {
  const {AdminCycleCheckbox, AdminCycleIcon, AdminCyclePopover, AdminCyclesTable, PBox, PButton, PCard, PDivider, PIcon, PInlineStack, PPage, PTabs, PText} = adminCyclesScope();
  return <PPage title="Cycles" actions={[<PButton>Export</PButton>, <PButton variant="Primary">Create cycle order</PButton>]}>
      <PCard padding="0">
        <div className="scc-toolbar">
          <PTabs tabs={["All", "Next 7 days", "Unfulfilled", "Unreceived"]} selected={tab} right={null} />
          <PInlineStack gap="200" wrap={false}>
            <PButton iconOnly icon="filter" ariaLabel="Search and filter" onClick={onFilters} tour="filters" pressed={!!filtersOpen} />
            <PButton iconOnly ariaLabel="Sort"><AdminCycleIcon name="sort" /></PButton>
          </PInlineStack>
        </div>
        {filtersOpen && <div className="scc-filters">
            <button type="button" className="scc-filter on">Fulfillment status <PIcon name="caretDown" tone="Subdued" /></button>
            <button type="button" className="scc-filter on">Receival status <PIcon name="caretDown" tone="Subdued" /></button>
            <span className="scc-anchor">
              <button type="button" className="scc-filter on" onClick={onDateFilterOpen} data-tour="date-filter">Expected fulfillment date{dateFilter ? ": " + dateFilter : ""} <PIcon name="caretDown" tone="Subdued" /></button>
              {dateFilterOpen && <div className="scc-popover scc-popover--left scc-popover--wide" role="menu">
                  {["Today", "Next 7 days", "Next 30 days", "Custom"].map(o => <button key={o} type="button" className="scc-action" role="menuitemradio" aria-checked={dateFilter === o} onClick={() => onDateFilter(o)} data-tour={o === "Today" ? "filter-today" : undefined}><span className={"scc-radio" + (dateFilter === o ? " on" : "")} />{o}</button>)}
                  <hr /><button type="button" className="scc-action" onClick={() => onDateFilter(null)}>Clear</button>
                </div>}
            </span>
            <button type="button" className="scc-filter">Add filter <AdminCycleIcon name="plusCircle" tone="Subdued" /></button>
          </div>}
        {selectable && selected.length > 0 && <div className="scc-bulkbar">
            <PInlineStack gap="300" blockAlign="center"><AdminCycleCheckbox checked={selected.length === rows.length} some={selected.length < rows.length} onChange={onToggleAll} ariaLabel="Select all cycles" /><PText fontWeight="medium">{selected.length} selected</PText></PInlineStack>
            <PInlineStack gap="200" blockAlign="center" wrap={false}>
              <PButton size="Slim">View orders</PButton><PButton size="Slim">Print packing slips</PButton>
              <span className="scc-anchor">
                <PButton size="Slim" iconOnly icon="menuHorizontal" ariaLabel="More actions" onClick={onBulk} tour="bulk-menu" />
                <AdminCyclePopover open={!!bulkOpen} items={[{
    title: "Update"
  }, {
    label: "Packing status"
  }, {
    label: "Item status"
  }, {
    label: "Item condition"
  }, "-", {
    title: "Mark as"
  }, {
    label: "Fulfilled",
    onClick: () => onMark("fulfilled"),
    tour: "mark-fulfilled"
  }, {
    label: "Returned",
    onClick: () => onMark("returned"),
    tour: "mark-returned"
  }]} />
              </span>
            </PInlineStack>
          </div>}
        <AdminCyclesTable rows={rows} selected={selected} onToggle={onToggle} onToggleAll={onToggleAll} selectable={selectable} />
        <PDivider />
        <PBox padding="300"><PText tone="subdued" alignment="center">1-{rows.length} of {rows.length} cycles</PText></PBox>
      </PCard>
    </PPage>;
};

export const AdminCyclesTable = ({rows, selected = [], onToggle, onToggleAll, selectable}) => {
  const {AdminCycleCheckbox, AdminCycleIcon, AdminCycleStatusBadge, AdminCycleThumb, PInlineStack, PText} = adminCyclesScope();
  const all = rows.length > 0 && rows.every(r => selected.includes(r.id));
  const some = !all && rows.some(r => selected.includes(r.id));
  return <div className="Polaris-IndexTable"><div className="Polaris-IndexTable__IndexTableWrapper"><div className="Polaris-IndexTable-ScrollContainer">
      <table className="Polaris-IndexTable__Table Polaris-IndexTable__Table--sticky">
        <thead><tr>
          <th className="Polaris-IndexTable__TableHeading Polaris-IndexTable__TableHeading--second" style={{
    width: 40
  }}>{selectable && <AdminCycleCheckbox checked={all} some={some} onChange={onToggleAll} ariaLabel="Select all cycles" />}</th>
          {CYC_HEADINGS.map((h, i) => <th key={h} className={"Polaris-IndexTable__TableHeading" + (i === CYC_HEADINGS.length - 1 ? " Polaris-IndexTable__TableHeading--last" : "")}><span className="Polaris-Text--root Polaris-Text--bodySm Polaris-Text--medium">{h}</span></th>)}
        </tr></thead>
        <tbody>
          {rows.map(r => {
    const sel = selected.includes(r.id);
    return <tr key={r.id} className={"Polaris-IndexTable__TableRow scc-row" + (sel ? " sel" : "")} data-tour={"row-" + r.id}>
                <td className="Polaris-IndexTable__TableCell">{selectable && <AdminCycleCheckbox checked={sel} onChange={() => onToggle(r.id)} ariaLabel={"Select cycle #" + r.id} tour={"check-" + r.id} />}</td>
                <td className="Polaris-IndexTable__TableCell"><PText fontWeight="semibold">#{r.id}</PText></td>
                <td className="Polaris-IndexTable__TableCell"><PText>{r.customer}</PText></td>
                <td className="Polaris-IndexTable__TableCell"><PInlineStack gap="200" blockAlign="center" wrap={false}><AdminCycleThumb size="ExtraSmall" /><PText>{r.product}{r.variant ? " - " + r.variant : ""}</PText></PInlineStack></td>
                <td className="Polaris-IndexTable__TableCell"><AdminCycleStatusBadge status={r.status} /></td>
                <td className="Polaris-IndexTable__TableCell"><PText>#{r.item}</PText></td>
                <td className="Polaris-IndexTable__TableCell">{r.fulfill ? <span className="scc-menu-label"><AdminCycleIcon name={r.status === "Fulfillment scheduled" ? "clock" : "calendar"} tone={r.status === "Fulfillment scheduled" ? "Base" : "Subdued"} /><PText>{adminCycleShort(r.fulfill)}</PText></span> : null}</td>
                <td className="Polaris-IndexTable__TableCell">{r.period ? <PText>{r.period[1] ? adminCycleShort(r.period[0]) + " - " + adminCycleShort(r.period[1]) + " (" + adminCycleDays(r.period[0], r.period[1]) + " days)" : "From " + adminCycleShort(r.period[0])}</PText> : null}</td>
              </tr>;
  })}
        </tbody>
      </table>
    </div></div></div>;
};

export const CYC_HEADINGS = ["Cycle", "Customer", "Product", "Status", "Item", "Fulfill", "Rental period"];

export const AdminConvertToPurchase = () => {
  const {AdminCycleConvertModal, AdminCyclePageLayout, AdminWindow} = adminCyclesScope();
  const base = {
    ...CYC_CYCLE,
    ret: null
  };
  const [c, setC] = useState(base);
  const [modal, setModal] = useState(false);
  const [amount, setAmount] = useState("65.00");
  const [sold, setSold] = useState(false);
  const [toast, setToast] = useToast();
  const windowRef = useRef(null);
  const stepsRef = useRef(() => []);
  const resetRef = useRef(() => {});
  const open = () => {
    setAmount("65.00");
    setModal(true);
  };
  const confirm = () => {
    setModal(false);
    setSold(true);
    setC(x => ({
      ...x,
      sold: true
    }));
    setToast("Cycle converted to purchase");
  };
  stepsRef.current = () => [{
    to: w => adminCycleFind(w, '[data-tour="convert"]'),
    click: open,
    hold: 1600
  }, {
    to: w => w.querySelector('[data-tour="confirm-convert"]'),
    click: confirm,
    hold: 3000
  }];
  resetRef.current = () => {
    setC(base);
    setModal(false);
    setSold(false);
    setToast(null);
    adminCycleScrollTop(windowRef.current);
  };
  const {cursor, bind} = useTour(windowRef, stepsRef, resetRef);
  const events = sold ? [["Converted to sale. Charge #1009 created for £65.00", "Just now"], ["Cycle fulfilled from order #1007", "25 September 2025"]] : [["Cycle fulfilled from order #1007", "25 September 2025"]];
  return <AdminWindow windowRef={windowRef} cursor={cursor} bind={bind} url="admin.shopify.com/store/summit/apps/supercycle/cycles/1007" toast={toast} modal={modal && <AdminCycleConvertModal open onClose={() => setModal(false)} onConfirm={confirm} amount={amount} setAmount={setAmount} />}>
      <style>{CYC_CSS}</style>
      <div className="scc">
      <AdminCyclePageLayout c={c} convertible={!sold} sold={sold} onConvert={open} events={events} />
      </div>
    </AdminWindow>;
};

export const AdminCycleChangeItem = () => {
  const {AdminCycleChangeItemModal, AdminCyclePageLayout, AdminWindow, SaveBar} = adminCyclesScope();
  const [c, setC] = useState(CYC_CYCLE);
  const [modal, setModal] = useState(false);
  const [selected, setSelected] = useState(CYC_CYCLE.item);
  const [query, setQuery] = useState("");
  const [dirty, setDirty] = useState(false);
  const [toast, setToast] = useToast();
  const windowRef = useRef(null);
  const stepsRef = useRef(() => []);
  const resetRef = useRef(() => {});
  const open = () => {
    setSelected(c.item);
    setQuery("");
    setModal(true);
  };
  const pick = () => setSelected(s => {
    setC(x => ({
      ...x,
      item: s
    }));
    setDirty(true);
    setModal(false);
    return s;
  });
  const save = () => {
    setDirty(false);
    setToast("Cycle updated");
  };
  stepsRef.current = () => [{
    to: w => adminCycleFind(w, '[data-tour="change-item"]'),
    click: open,
    hold: 1000
  }, {
    to: w => w.querySelector('[data-tour="item-1009"] .scc-check'),
    click: () => setSelected(1009),
    hold: 900
  }, {
    to: w => w.querySelector('[data-tour="select-item"]'),
    click: pick,
    hold: 1200
  }, {
    to: w => w.querySelector('[data-tour="save"]'),
    click: save,
    hold: 2600
  }];
  resetRef.current = () => {
    setC(CYC_CYCLE);
    setModal(false);
    setSelected(CYC_CYCLE.item);
    setQuery("");
    setDirty(false);
    setToast(null);
    adminCycleScrollTop(windowRef.current);
  };
  const {cursor, bind} = useTour(windowRef, stepsRef, resetRef);
  return <AdminWindow windowRef={windowRef} cursor={cursor} bind={bind} url="admin.shopify.com/store/summit/apps/supercycle/cycles/1007" toast={toast} saveBar={dirty && <SaveBar onDiscard={() => {
    setC(CYC_CYCLE);
    setDirty(false);
  }} onSave={save} />} modal={modal && <AdminCycleChangeItemModal open onClose={() => setModal(false)} onSelect={pick} selected={selected} setSelected={setSelected} query={query} setQuery={setQuery} c={c} />}>
      <style>{CYC_CSS}</style>
      <div className="scc">
      <AdminCyclePageLayout c={c} onChangeItem={open} />
      </div>
    </AdminWindow>;
};

export const AdminCycleEditDates = ({field = "period"}) => {
  const {AdminCycleDateModal, AdminCycleEditDatesModal, AdminCyclePageLayout, AdminWindow, SaveBar} = adminCyclesScope();
  const [c, setC] = useState(CYC_CYCLE);
  const [menus, setMenus] = useState({});
  const [modal, setModal] = useState(null);
  const [range, setRange] = useState([CYC_CYCLE.arriveBy, null]);
  const [date, setDate] = useState(null);
  const [dirty, setDirty] = useState(false);
  const [toast, setToast] = useToast();
  const windowRef = useRef(null);
  const stepsRef = useRef(() => []);
  const resetRef = useRef(() => {});
  const toggleMenu = k => setMenus(m => ({
    [k]: !m[k]
  }));
  const openPeriod = () => {
    setMenus({});
    setRange([c.arriveBy, c.returnBy]);
    setModal("period");
  };
  const openFulfillment = () => {
    setMenus({});
    setDate(c.fulfilled);
    setModal("fulfillment");
  };
  const openReceival = () => {
    setMenus({});
    setDate(c.received || null);
    setModal("receival");
  };
  const applyPeriod = () => setRange(r => {
    setC(x => ({
      ...x,
      arriveBy: r[0] || x.arriveBy,
      returnBy: r[1]
    }));
    setDirty(true);
    setModal(null);
    return r;
  });
  const saveFulfillment = () => setDate(d => {
    if (d) setC(x => ({
      ...x,
      fulfilled: d,
      fulfilledNote: adminCycleDays(d, "2025-09-29") > 0 ? adminCycleDays(d, "2025-09-29") + " days early" : null
    }));
    setModal(null);
    setToast("Fulfillment date updated");
    return d;
  });
  const saveReceival = () => setDate(d => {
    if (d) setC(x => ({
      ...x,
      received: d,
      restock: "2025-10-10",
      status: "Received"
    }));
    setModal(null);
    setToast("Receival date updated");
    return d;
  });
  const save = () => {
    setDirty(false);
    setToast("Cycle updated");
  };
  stepsRef.current = () => field === "period" ? [{
    to: w => adminCycleFind(w, '[data-tour="method-menu"]'),
    click: () => setMenus({
      method: true
    }),
    hold: 900
  }, {
    to: w => adminCycleFind(w, '[data-tour="edit-dates"]'),
    click: openPeriod,
    hold: 1100
  }, {
    to: w => w.querySelector('[data-tour="day"]'),
    click: () => setRange(r => [r[0], "2025-10-30"]),
    hold: 900
  }, {
    to: w => w.querySelector('[data-tour="apply"]'),
    click: applyPeriod,
    hold: 1200
  }, {
    to: w => w.querySelector('[data-tour="save"]'),
    click: save,
    hold: 2600
  }] : field === "fulfillment" ? [{
    to: w => adminCycleFind(w, '[data-tour="fulfillment-menu"]'),
    click: () => setMenus({
      fulfillment: true
    }),
    hold: 900
  }, {
    to: w => adminCycleFind(w, '[data-tour="edit-fulfillment"]'),
    click: openFulfillment,
    hold: 1100
  }, {
    to: w => w.querySelector('[data-tour="day"]'),
    click: () => setDate("2025-09-26"),
    hold: 900
  }, {
    to: w => w.querySelector('[data-tour="modal-save"]'),
    click: saveFulfillment,
    hold: 2600
  }] : [{
    to: w => adminCycleFind(w, '[data-tour="receival-menu"]'),
    click: () => setMenus({
      receival: true
    }),
    hold: 900
  }, {
    to: w => adminCycleFind(w, '[data-tour="edit-receival"]'),
    click: openReceival,
    hold: 1100
  }, {
    to: w => w.querySelector('[data-tour="day"]'),
    click: () => setDate("2025-10-08"),
    hold: 900
  }, {
    to: w => w.querySelector('[data-tour="modal-save"]'),
    click: saveReceival,
    hold: 2600
  }];
  resetRef.current = () => {
    setC(CYC_CYCLE);
    setMenus({});
    setModal(null);
    setRange([CYC_CYCLE.arriveBy, null]);
    setDate(null);
    setDirty(false);
    setToast(null);
    adminCycleScrollTop(windowRef.current);
  };
  const {cursor, bind} = useTour(windowRef, stepsRef, resetRef);
  return <AdminWindow windowRef={windowRef} cursor={cursor} bind={bind} url="admin.shopify.com/store/summit/apps/supercycle/cycles/1007" toast={toast} saveBar={dirty && <SaveBar onDiscard={() => {
    setC(CYC_CYCLE);
    setDirty(false);
  }} onSave={save} />} modal={modal === "period" ? <AdminCycleEditDatesModal open onClose={() => setModal(null)} onApply={applyPeriod} range={range} setRange={setRange} /> : modal === "fulfillment" ? <AdminCycleDateModal open kind="fulfillment" onClose={() => setModal(null)} onSave={saveFulfillment} date={date} setDate={setDate} due="2025-09-29" tourKey="2025-09-26" /> : modal === "receival" ? <AdminCycleDateModal open kind="receival" onClose={() => setModal(null)} onSave={saveReceival} date={date} setDate={setDate} due="2025-10-06" tourKey="2025-10-08" /> : null}>
      <style>{CYC_CSS}</style>
      <div className="scc">
      <AdminCyclePageLayout c={c} menus={menus} onMenu={toggleMenu} onEditDates={openPeriod} onEditFulfillment={openFulfillment} onEditReceival={openReceival} />
      </div>
    </AdminWindow>;
};

export const AdminCyclePage = () => {
  const {AdminCyclePageLayout, AdminWindow} = adminCyclesScope();
  return <AdminWindow url="admin.shopify.com/store/summit/apps/supercycle/cycles/1007">
      <style>{CYC_CSS}</style>
      <div className="scc"><AdminCyclePageLayout c={CYC_CYCLE} /></div>
    </AdminWindow>;
};

export const AdminCycleConvertModal = ({open, onClose, onConfirm, amount, setAmount}) => {
  const {AdminCycleModal, BorderBox, PBlockStack, PBox, PButton, PDivider, PInlineStack, PText, PTextField} = adminCyclesScope();
  return <AdminCycleModal open={open} title="Convert to purchase" onClose={onClose} footer={<><PButton onClick={onClose}>Cancel</PButton><PButton variant="Primary" onClick={onConfirm} tour="confirm-convert">Convert to purchase</PButton></>}>
      <PBox padding="400">
        <PBlockStack gap="400">
          <PText tone="subdued">The item is marked as sold, the cycle ends, and upcoming cycles on this item move to alternative stock.</PText>
          <BorderBox padding="0">
            {[["Resale price", "£85.00"], ["Paid", "£20.00"], ["Suggested charge", "£65.00"]].map(([k, v], i) => <div key={k}>{i > 0 && <PDivider />}<PBox padding="300"><PInlineStack align="space-between"><PText>{k}</PText><PText fontWeight={i === 2 ? "semibold" : undefined}>{v}</PText></PInlineStack></PBox></div>)}
          </BorderBox>
          <PTextField id="cv-amount" label="Charge amount" prefix="£" value={amount} onChange={setAmount} placeholder="0.00" helpText="Leave blank to convert without creating a charge." />
          <PBlockStack gap="100"><PText fontWeight="semibold">Upcoming cycles</PText><PText tone="subdued">No upcoming cycles on this item.</PText></PBlockStack>
        </PBlockStack>
      </PBox>
    </AdminCycleModal>;
};

export const AdminCycleChangeItemModal = ({open, onClose, onSelect, selected, setSelected, query, setQuery, c}) => {
  const {AdminCycleBadge, AdminCycleCheckbox, AdminCycleIcon, AdminCycleModal, AdminCycleThumb, PBlockStack, PBox, PButton, PDivider, PInlineStack, PLink, PText, PTextField} = adminCyclesScope();
  const rows = CYC_ITEMS.filter(it => !query || String(it.id).includes(query.replace("#", "")));
  return <AdminCycleModal open={open} title="Change item" onClose={onClose} maxWidth="58rem" footer={<><PButton onClick={onClose}>Cancel</PButton><PButton variant="Primary" onClick={onSelect} tour="select-item">Select item</PButton></>}>
      <PBox padding="400">
        <PInlineStack gap="300" blockAlign="start" wrap={false}>
          <AdminCycleThumb size="Large" />
          <PBlockStack gap="100"><PText fontWeight="semibold">{c.product}</PText><div><AdminCycleBadge tone="neutral">{c.variant}</AdminCycleBadge></div><PText tone="subdued">From {adminCycleLong(c.prepare)}</PText></PBlockStack>
        </PInlineStack>
      </PBox>
      <PDivider />
      <PBox padding="300"><PTextField id="ci-search" label="Search items" labelHidden prefix={<AdminCycleIcon name="search" tone="Subdued" />} placeholder="Search items" value={query} onChange={setQuery} /></PBox>
      <PBox paddingInline="300" paddingBlockEnd="300"><button type="button" className="scc-filter">Add filter <AdminCycleIcon name="plusCircle" tone="Subdued" /></button></PBox>
      <PDivider />
      <div className="Polaris-IndexTable"><div className="Polaris-IndexTable__IndexTableWrapper"><div className="Polaris-IndexTable-ScrollContainer">
        <table className="Polaris-IndexTable__Table Polaris-IndexTable__Table--sticky">
          <thead><tr>
            <th className="Polaris-IndexTable__TableHeading Polaris-IndexTable__TableHeading--second" style={{
    width: 40
  }}><AdminCycleCheckbox ariaLabel="Select all" /></th>
            {["Item", "Condition", "Availability", "Active", "Upcoming", "Previous"].map((h, i, a) => <th key={h} className={"Polaris-IndexTable__TableHeading" + (i === a.length - 1 ? " Polaris-IndexTable__TableHeading--last" : "")}><span className="Polaris-Text--root Polaris-Text--bodySm Polaris-Text--medium">{h}</span></th>)}
          </tr></thead>
          <tbody>
            {rows.map(it => <tr key={it.id} className={"Polaris-IndexTable__TableRow scc-row" + (selected === it.id ? " sel" : "")} onClick={() => setSelected(it.id)} style={{
    cursor: "pointer"
  }} data-tour={"item-" + it.id}>
                <td className="Polaris-IndexTable__TableCell"><AdminCycleCheckbox checked={selected === it.id} onChange={() => setSelected(it.id)} ariaLabel={"Select item #" + it.id} /></td>
                <td className="Polaris-IndexTable__TableCell"><PBlockStack gap="0"><PText fontWeight="semibold">#{it.id}</PText><PText tone="subdued" variant="bodySm">{it.current ? "Current item" : "No serial"}</PText></PBlockStack></td>
                <td className="Polaris-IndexTable__TableCell"><PText>{it.condition}</PText></td>
                <td className="Polaris-IndexTable__TableCell"><AdminCycleBadge tone={it.avail === "Available" ? "success" : "critical"}>{it.avail}</AdminCycleBadge></td>
                <td className="Polaris-IndexTable__TableCell">{it.active && !it.current ? <PLink>{it.active}</PLink> : <PText tone="subdued">-</PText>}</td>
                <td className="Polaris-IndexTable__TableCell"><PText>{it.upcoming}</PText></td>
                <td className="Polaris-IndexTable__TableCell"><PText>{it.previous}</PText></td>
              </tr>)}
          </tbody>
        </table>
      </div></div></div>
      <PDivider />
      <PBox padding="300"><PText tone="subdued" alignment="center">1-{rows.length} of {rows.length} items</PText></PBox>
    </AdminCycleModal>;
};

export const AdminCycleDateModal = ({open, kind, onClose, onSave, date, setDate, due, tourKey}) => {
  const {AdminCycleCalendar, AdminCycleIcon, AdminCycleModal, PBlockStack, PBox, PButton, PDivider, PInlineStack, PText, PTextField} = adminCyclesScope();
  return <AdminCycleModal open={open} title={kind === "receival" ? "Edit receival date" : "Edit fulfillment date"} onClose={onClose} maxWidth="52rem" footerLeft={<PText tone="subdued">Due {adminCycleLong(due)}</PText>} footer={<><PButton onClick={onClose}>Cancel</PButton><PButton variant="Primary" onClick={onSave} tour="modal-save">Save</PButton></>}>
      <PBox padding="400"><AdminCycleCalendar year={2025} month={kind === "receival" ? 9 : 8} selected={date} tourKey={tourKey} onSelect={setDate} /></PBox>
      <PDivider />
      <PBox padding="400">
        <PBlockStack gap="200">
          <PText>{kind === "receival" ? "Received on" : "Fulfilled on"}</PText>
          <PInlineStack gap="200" blockAlign="center" wrap={false}>
            <div style={{
    flex: 2
  }}><PTextField id="dm-date" label="Date" labelHidden value={date ? adminCycleLong(date) : ""} placeholder="No date" disabled /></div>
            <div style={{
    flex: 1
  }}><PTextField id="dm-time" label="Time" labelHidden prefix={<AdminCycleIcon name="clock" tone="Subdued" />} value={date ? "1:55 pm" : ""} placeholder="Time" onChange={() => {}} /></div>
            <PButton onClick={() => setDate(null)}>Clear</PButton>
          </PInlineStack>
        </PBlockStack>
      </PBox>
    </AdminCycleModal>;
};

export const AdminCycleEditDatesModal = ({open, onClose, onApply, range, setRange}) => {
  const {AdminCycleCalendar, AdminCycleModal, PBlockStack, PBox, PButton, PIcon, PInlineStack, PTextField} = adminCyclesScope();
  return <AdminCycleModal open={open} title="Edit dates" onClose={onClose} maxWidth="52rem" footer={<><PButton onClick={onClose}>Cancel</PButton><PButton variant="Primary" onClick={onApply} tour="apply">Apply</PButton></>}>
      <PBox padding="400">
        <PBlockStack gap="400">
          <PInlineStack gap="300" blockAlign="end" wrap={false}>
            <div style={{
    flex: 1
  }}><PTextField id="ed-arrive" label="Arrive by" value={range[0] ? adminCycleLong(range[0]) : ""} placeholder="No date" onChange={() => {}} /></div>
            <div style={{
    paddingBottom: 8
  }}><PIcon name="chevronRight" tone="Subdued" /></div>
            <div style={{
    flex: 1
  }}><PTextField id="ed-return" label="Return by" value={range[1] ? adminCycleLong(range[1]) : ""} placeholder="No date" onChange={() => {}} /></div>
          </PInlineStack>
          <AdminCycleCalendar year={2025} month={9} selected={range} tourKey="2025-10-30" onSelect={k => setRange(r => !r[0] || r[0] && r[1] || k < r[0] ? [k, null] : [r[0], k])} />
        </PBlockStack>
      </PBox>
    </AdminCycleModal>;
};

export const AdminCyclePageLayout = ({c, menus = {}, onMenu = () => {}, onEditDates, onEditFulfillment, onEditReceival, onChangeItem, onConvert, convertible, sold, events}) => {
  const {AdminCycleBillingCard, AdminCycleFulfillmentCard, AdminCycleMethodCard, AdminCyclePageHeader, AdminCycleReceivalCard, AdminCycleSidebar, AdminCycleStatusCard, AdminCycleTimelineCard, PBlockStack, PButton, PLayout, PSection} = adminCyclesScope();
  return <div className="Polaris-Page">
      <AdminCyclePageHeader title={"Cycle #" + c.id} status={c.status} subtitle={c.created} actions={[<PButton>View order</PButton>, <PButton>Print packing slip</PButton>]} />
      <PLayout>
        <PSection>
          <PBlockStack gap="400">
            <AdminCycleStatusCard c={c} />
            <div className={menus.method ? "scc-open" : undefined}><AdminCycleMethodCard c={c} menuOpen={menus.method} onMenu={() => onMenu("method")} onEditDates={onEditDates} onChangeItem={onChangeItem} sold={sold} /></div>
            <div className={menus.fulfillment ? "scc-open" : undefined}><AdminCycleFulfillmentCard c={c} menuOpen={menus.fulfillment} onMenu={() => onMenu("fulfillment")} onEdit={onEditFulfillment} /></div>
            <div className={menus.receival ? "scc-open" : undefined}><AdminCycleReceivalCard c={c} menuOpen={menus.receival} onMenu={() => onMenu("receival")} onEdit={onEditReceival} onConvert={onConvert} convertible={convertible} /></div>
            <AdminCycleBillingCard />
            <AdminCycleTimelineCard events={events || [["Cycle fulfilled from order #" + c.order, "25 September 2025"], ["Return #1005 created", "6 October 2025"]]} />
            <div />
          </PBlockStack>
        </PSection>
        <PSection variant="oneThird"><AdminCycleSidebar c={c} /></PSection>
      </PLayout>
    </div>;
};

export const AdminCycleSidebar = ({c}) => {
  const {AdminCycleBadge, PBlockStack, PButton, PCard, PIcon, PInlineStack, PLink, PSelect, PText, PTextField} = adminCyclesScope();
  return <PBlockStack gap="300">
      <PCard><PBlockStack gap="200"><PText variant="headingSm" as="h2">Order summary</PText><PInlineStack align="space-between" blockAlign="center"><PLink>Order #{c.order}</PLink><PInlineStack gap="100"><AdminCycleBadge icon="dot">Paid</AdminCycleBadge><AdminCycleBadge icon="dot">Fulfilled</AdminCycleBadge></PInlineStack></PInlineStack></PBlockStack></PCard>
      <PCard>
        <PBlockStack gap="300">
          <PInlineStack align="space-between" blockAlign="center"><PText variant="headingSm" as="h2">Customer</PText><PButton variant="Tertiary" iconOnly icon="menuHorizontal" ariaLabel="Customer actions" /></PInlineStack>
          <PLink>{c.customer}</PLink>
          <PBlockStack gap="100"><PText variant="headingSm">Contact information</PText><PLink>renton.mcborrow@example.com</PLink><PText tone="subdued">No phone number</PText></PBlockStack>
          <PBlockStack gap="100"><PText variant="headingSm">Shipping address</PText><PText>{c.customer}</PText><PText>123 Borrow St</PText><PText>Borrowtown</PText><PText>12345</PText><PText>United States</PText><PLink>View map</PLink></PBlockStack>
          <PBlockStack gap="100"><PText variant="headingSm">Outstanding charges</PText><PInlineStack align="space-between" blockAlign="center"><PText>{c.outstanding}</PText><PIcon name="chevronRight" tone="Subdued" /></PInlineStack></PBlockStack>
        </PBlockStack>
      </PCard>
      <PCard><PBlockStack gap="200"><PText variant="headingSm" as="h2">Tags</PText><PTextField id="cycle-tags" label="Tags" labelHidden placeholder="Search" value="" onChange={() => {}} /></PBlockStack></PCard>
      <PCard><PBlockStack gap="200"><PText variant="headingSm" as="h2">Packing status</PText><PSelect id="cycle-packing" label="Packing status" options={["Pending", "Printed", "Packed"]} value="Pending" /></PBlockStack></PCard>
    </PBlockStack>;
};

export const AdminCycleTimelineCard = ({events}) => {
  const {PBlockStack, PBox, PButton, PCard, PDivider, PIcon, PInlineStack, PText, PTextField} = adminCyclesScope();
  return <PBlockStack gap="300">
      <PText variant="headingSm" as="h2">Timeline</PText>
      <PCard padding="0">
        <div className="scc-comment"><span className="scc-avatar"><PIcon name="person" tone="Inherit" /></span><div style={{
    flex: 1
  }}><PTextField id="cycle-comment" label="Comment" labelHidden placeholder="Leave a comment..." value="" onChange={() => {}} /></div></div>
        <PDivider />
        <PBox padding="300" background="bg-surface-secondary"><PInlineStack align="end"><PButton variant="Primary">Post</PButton></PInlineStack></PBox>
      </PCard>
      <div style={{
    paddingLeft: sp(400)
  }}>
        {events.map((e, i) => <div key={i} className="scc-event"><span className="scc-event-dot" /><div style={{
    flex: 1
  }}><PText>{e[0]}</PText></div><PText tone="subdued" variant="bodySm">{e[1]}</PText></div>)}
      </div>
    </PBlockStack>;
};

export const AdminCycleBillingCard = () => {
  const {AdminCycleBadge, AdminCycleCardHead, BorderBox, PBlockStack, PBox, PButton, PCard, PDivider, PInlineStack, PLink, PText} = adminCyclesScope();
  const row = (a, b, c, bold) => <PInlineStack key={a} align="space-between" blockAlign="center" wrap={false}>
      <div style={{
    flex: 1
  }}><PText fontWeight={bold ? "semibold" : undefined}>{a}</PText></div>
      <div style={{
    flex: 1.4
  }}>{typeof b === "string" ? <PText>{b}</PText> : b}</div>
      <div style={{
    flex: 1,
    textAlign: "right"
  }}><PText fontWeight={bold ? "semibold" : undefined} alignment="end">{c}</PText></div>
    </PInlineStack>;
  return <PCard>
      <PBlockStack gap="300">
        <AdminCycleCardHead badge={<AdminCycleBadge tone="success" icon="check">Billing active</AdminCycleBadge>} menu={[{
    label: "Stop payment collection",
    icon: "disabled"
  }]} />
        <BorderBox padding="0">
          <PBox padding="300"><PBlockStack gap="200">
            {row("Next charge", "", "28 October 2025")}{row("Recurring price", "", "£10.00 monthly")}{row("Billing start", "Expected delivery date", "28 September 2025")}{row("Billing end", "Receival", "From 2 November 2025")}{row("Payment method", "", "-")}
          </PBlockStack></PBox>
          <PDivider />
          <PBox padding="300"><PBlockStack gap="200">
            {row("First payment", <PLink>Charge #1008</PLink>, "£20.00")}{row("Total", <PLink>1 charge</PLink>, "£20.00")}{row("Paid", <PLink>1 charge</PLink>, "£20.00")}{row("Outstanding", "", "£0.00", true)}
          </PBlockStack></PBox>
        </BorderBox>
        <PInlineStack align="end"><PButton>Create charge</PButton></PInlineStack>
      </PBlockStack>
    </PCard>;
};

export const AdminCycleReceivalCard = ({c, menuOpen, onMenu, onEdit, onConvert, convertible}) => {
  const {AdminCycleCardHead, AdminCycleStatusBadge, BorderBox, PBlockStack, PBox, PButton, PCard, PDivider, PInlineStack, PLink, PText} = adminCyclesScope();
  return <PCard>
      <PBlockStack gap="300">
        <AdminCycleCardHead badge={<AdminCycleStatusBadge status={c.received ? "Received" : "Unreceived"} />} caption={c.received ? adminCycleLong(c.received) : undefined} menuTour="receival-menu" menuOpen={menuOpen} onMenu={onMenu} chevron="up" menu={[{
    label: "Edit receival date",
    icon: "calendar",
    onClick: onEdit,
    tour: "edit-receival"
  }, {
    label: "Edit restock by date",
    icon: "calendar"
  }]} />
        <BorderBox padding="0">
          <PBox padding="300">{c.ret ? <PBlockStack gap="050"><PLink><PText as="span" fontWeight="semibold">Return #{c.ret.id}</PText></PLink><PText tone="subdued">{c.ret.created}</PText></PBlockStack> : <PText fontWeight="semibold">No return</PText>}</PBox>
          <PDivider />
          <PBox padding="300">
            <PInlineStack gap="800">
              <PBlockStack gap="050"><PText tone="subdued">Received</PText><PText>{c.received ? adminCycleLong(c.received) : "-"}</PText></PBlockStack>
              {!c.received && <PBlockStack gap="050"><PText tone="subdued">Receival expected</PText><PText>{c.sold ? "-" : adminCycleLong(c.returnOn)}</PText></PBlockStack>}
            </PInlineStack>
          </PBox>
        </BorderBox>
        <PInlineStack align="end" gap="200">
          {c.ret ? <PButton>View return</PButton> : <PButton>Create return</PButton>}
          {convertible && !c.received && <PButton onClick={onConvert} tour="convert">Convert to purchase</PButton>}
        </PInlineStack>
      </PBlockStack>
    </PCard>;
};

export const AdminCycleFulfillmentCard = ({c, menuOpen, onMenu, onEdit}) => {
  const {AdminCycleCardHead, AdminCycleStatusBadge, PCard} = adminCyclesScope();
  return <PCard>
      <AdminCycleCardHead badge={<AdminCycleStatusBadge status="Fulfilled" />} caption={adminCycleLong(c.fulfilled) + (c.fulfilledNote ? " (" + c.fulfilledNote + ")" : "")} menuTour="fulfillment-menu" menuOpen={menuOpen} onMenu={onMenu} chevron="down" menu={[{
    label: "Edit fulfillment date",
    icon: "calendar",
    onClick: onEdit,
    tour: "edit-fulfillment"
  }, {
    label: "Edit prepare from date",
    icon: "calendar"
  }]} />
    </PCard>;
};

export const AdminCycleMethodCard = ({c, menuOpen, onMenu, onEditDates, onChangeItem, sold}) => {
  const {AdminCycleBadge, AdminCycleCardHead, AdminCycleThumb, BorderBox, PBlockStack, PBox, PButton, PCard, PDivider, PInlineStack, PLink, PText} = adminCyclesScope();
  return <PCard>
      <PBlockStack gap="300">
        <AdminCycleCardHead badge={<AdminCycleBadge tone="neutral" icon={c.methodIcon}>{c.method}</AdminCycleBadge>} menuTour="method-menu" menuOpen={menuOpen} onMenu={onMenu} menu={[{
    label: "Edit dates",
    icon: "calendar",
    onClick: onEditDates,
    tour: "edit-dates"
  }]} />
        <BorderBox padding="0">
          <PBox padding="300">
            <PInlineStack gap="800">
              <PBlockStack gap="050"><PText tone="subdued">Arrive by</PText><PText>{adminCycleLong(c.arriveBy)}</PText></PBlockStack>
              {c.returnBy && <PBlockStack gap="050"><PText tone="subdued">Return by</PText><PText>{adminCycleLong(c.returnBy)}</PText></PBlockStack>}
            </PInlineStack>
          </PBox>
          <PDivider />
          <PBox padding="300">
            <PInlineStack gap="300" blockAlign="start" wrap={false}>
              <AdminCycleThumb size="Large" />
              <PBlockStack gap="100"><PLink>{c.product}</PLink><div><AdminCycleBadge tone="neutral">{c.variant}</AdminCycleBadge></div><PText tone="subdued">SKU: {c.sku}</PText></PBlockStack>
            </PInlineStack>
          </PBox>
          <PDivider />
          <PBox padding="300"><PBlockStack gap="050"><PInlineStack gap="200" blockAlign="center"><PLink>Item #{c.item}</PLink>{sold && <AdminCycleBadge tone="neutral">Sold</AdminCycleBadge>}</PInlineStack><PText tone="subdued">{c.serial ? "Serial " + c.serial : "No serial number"}</PText></PBlockStack></PBox>
        </BorderBox>
        <PInlineStack align="end"><PButton onClick={onChangeItem} tour="change-item">Change item</PButton></PInlineStack>
      </PBlockStack>
    </PCard>;
};

export const AdminCycleCardHead = ({badge, caption, menu, menuTour, menuOpen, onMenu, chevron}) => {
  const {AdminCyclePopover, PButton, PInlineStack, PText} = adminCyclesScope();
  return <PInlineStack align="space-between" blockAlign="center" wrap={false}>
      <PInlineStack gap="300" blockAlign="center">{badge}{caption && <PText>{caption}</PText>}</PInlineStack>
      <PInlineStack gap="100" blockAlign="center" wrap={false}>
        <span className="scc-anchor"><PButton variant="Tertiary" iconOnly icon="menuHorizontal" ariaLabel="More actions" onClick={onMenu} tour={menuTour} /><AdminCyclePopover open={!!menuOpen} items={menu || []} /></span>
        {chevron && <PButton variant="Tertiary" iconOnly icon={chevron === "up" ? "caretUp" : "caretDown"} ariaLabel={chevron === "up" ? "Collapse" : "Expand"} />}
      </PInlineStack>
    </PInlineStack>;
};

export const AdminCycleStatusCard = ({c}) => {
  const {AdminCycleTimeline, PBlockStack, PBox, PCard, PDivider, PText} = adminCyclesScope();
  return <PCard padding="0">
      <PBox padding="400"><PBlockStack gap="100"><PText variant="headingLg" as="h2">{c.sold ? "Converted to purchase" : c.received ? "Received" : "Return in progress"}</PText><PText tone="subdued">{c.sold ? "The customer kept the item. No return is expected." : c.received ? "Received on " + adminCycleLong(c.received) : "Expected to be received on " + adminCycleLong(c.returnOn)}</PText></PBlockStack></PBox>
      <PDivider />
      <PBox padding="400"><AdminCycleTimeline c={c} /></PBox>
    </PCard>;
};

export const AdminCycleTimeline = ({c}) => {
  const stages = [["Prepare", c.prepare, "done"], ["Fulfilled", c.fulfilled, "done"], ["Arrival", c.arrival, "done"], ["Return", c.returnOn, "done"], ["Receive", c.received || null, c.received ? "done" : "part"], ["Restock", c.received ? c.restock : null, c.received ? "done" : ""]];
  return <div className="scc-tl">
      {stages.map(([label, date, state]) => <div key={label}>
          <div className="scc-tl-label">{label}</div>
          <div className="scc-tl-value">{date ? adminCycleShort(date) : "-"}</div>
          <div className={"scc-tl-bar " + state} />
        </div>)}
    </div>;
};

export const AdminCyclePageHeader = ({title, status, subtitle, actions}) => {
  const {AdminCycleStatusBadge, PBox, PButton, PInlineStack} = adminCyclesScope();
  return <PBox style={{
    "--pc-box-padding-block-start-xs": sp(400),
    "--pc-box-padding-block-start-md": sp(600),
    "--pc-box-padding-block-end-xs": sp(400),
    "--pc-box-padding-block-end-md": sp(600),
    "--pc-box-padding-inline-start-xs": sp(400),
    "--pc-box-padding-inline-start-sm": sp(0),
    "--pc-box-padding-inline-end-xs": sp(400),
    "--pc-box-padding-inline-end-sm": sp(0),
    position: "relative"
  }}>
      <div className="Polaris-Page-Header--mediumTitle">
        <div className="Polaris-Page-Header__Row">
          <div className="Polaris-Page-Header__BreadcrumbWrapper"><PBox className="Polaris-Box--printHidden" maxWidth="100%" paddingInlineEnd="100"><PButton iconOnly icon="arrowLeft" ariaLabel="Cycles" /></PBox></div>
          <div className="Polaris-Page-Header__TitleWrapper">
            <div className="Polaris-Header-Title__TitleWrapper">
              <PInlineStack gap="200" blockAlign="center"><h1 className="Polaris-Header-Title"><span className="Polaris-Text--root Polaris-Text--headingLg Polaris-Text--bold">{title}</span></h1>{status && <AdminCycleStatusBadge status={status} />}</PInlineStack>
              {subtitle && <div className="scc-page-sub">{subtitle}</div>}
            </div>
          </div>
          {actions && <div className="Polaris-Page-Header__RightAlign">
              <div className="Polaris-ActionMenu"><div className="Polaris-ActionMenu-Actions__ActionsLayoutOuter"><div className="Polaris-ActionMenu-Actions__ActionsLayout">
                {actions.map((a, i) => <div key={i} className="Polaris-ActionMenu-SecondaryAction">{a}</div>)}
              </div></div></div>
            </div>}
        </div>
      </div>
    </PBox>;
};

export const CYC_ROWS = [{
  id: 1011,
  customer: "Renton McBorrow",
  product: "Coastal Breeze Top",
  variant: "Large / White",
  status: "Fulfillment scheduled",
  item: 1037,
  order: 1011,
  delivery: "Standard",
  fulfill: "2025-10-16",
  period: ["2025-10-16", "2025-10-25"],
  today: true
}, {
  id: 1010,
  customer: "Renton McBorrow",
  product: "Ball Gown",
  variant: "8 / Midnight Blue",
  status: "Fulfillment scheduled",
  item: 1010,
  order: 1010,
  delivery: "Standard",
  fulfill: "2025-10-16",
  period: ["2025-10-16", "2025-10-25"],
  today: true
}, {
  id: 1009,
  customer: "Renton McBorrow",
  product: "Moonlit Cardigan",
  variant: "M / Slate",
  status: "Unfulfilled",
  item: 1009,
  order: 1009,
  delivery: "Standard",
  fulfill: null,
  period: null
}, {
  id: 1008,
  customer: "Renton McBorrow",
  product: "Horizon Blazer",
  variant: "40 / Navy",
  status: "Unfulfilled",
  item: 1008,
  order: 1008,
  delivery: "Standard",
  fulfill: null,
  period: null
}, {
  id: 1007,
  customer: "Renton McBorrow",
  product: "Coastal Breeze Top",
  variant: "Small / White",
  status: "Unreceived",
  item: 1007,
  order: 1007,
  delivery: "Standard",
  fulfill: "2025-09-25",
  period: ["2025-10-02", null]
}, {
  id: 1006,
  customer: "Renton McBorrow",
  product: "Classic Denim Jacket",
  variant: "L / Indigo",
  status: "Unreceived",
  item: 1006,
  order: 1006,
  delivery: "Standard",
  fulfill: "2025-10-01",
  period: null
}, {
  id: 1005,
  customer: "Renton McBorrow",
  product: "Coastal Breeze Top",
  variant: "Small / White",
  status: "Unreceived",
  item: 1005,
  order: 1005,
  delivery: "Standard",
  fulfill: "2025-10-01",
  period: null
}, {
  id: 1004,
  customer: "Renton McBorrow",
  product: "Ball Gown",
  variant: "10 / Midnight Blue",
  status: "Received",
  item: 1004,
  order: 1004,
  delivery: "Standard",
  fulfill: "2025-10-01",
  period: null
}, {
  id: 1003,
  customer: "Renton McBorrow",
  product: "Moonlit Cardigan",
  variant: "S / Slate",
  status: "Canceled",
  item: 1003,
  order: 1003,
  delivery: "Standard",
  fulfill: null,
  period: null
}, {
  id: 1002,
  customer: "Renton McBorrow",
  product: "Horizon Blazer",
  variant: "38 / Navy",
  status: "Unfulfilled",
  item: 1002,
  order: 1002,
  delivery: "Standard",
  fulfill: null,
  period: null
}, {
  id: 1001,
  customer: "Renton McBorrow",
  product: "Coastal Breeze Top",
  variant: "Medium / White",
  status: "Fulfillment scheduled",
  item: 1001,
  order: 1001,
  delivery: "Standard international",
  fulfill: "2025-10-10",
  period: ["2025-10-13", "2025-10-17"]
}];

export const CYC_ITEMS = [{
  id: 1010,
  condition: "Excellent",
  avail: "Available",
  active: "",
  upcoming: 0,
  previous: 0
}, {
  id: 1009,
  condition: "Excellent",
  avail: "Available",
  active: "",
  upcoming: 1,
  previous: 2
}, {
  id: 1008,
  condition: "Good",
  avail: "Available",
  active: "",
  upcoming: 0,
  previous: 4
}, {
  id: 1007,
  condition: "Good",
  avail: "Available",
  active: "Cycle #1007",
  upcoming: 0,
  previous: 3,
  current: true
}, {
  id: 1006,
  condition: "Good",
  avail: "Overlaps",
  active: "Cycle #1006",
  upcoming: 1,
  previous: 5
}, {
  id: 1005,
  condition: "Fair",
  avail: "Overlaps",
  active: "Cycle #1005",
  upcoming: 0,
  previous: 6
}];

export const CYC_CYCLE = {
  id: 1007,
  status: "Unreceived",
  created: "Created 2 October 2025 at 10:02am",
  method: "Subscription",
  methodIcon: "refresh",
  arriveBy: "2025-10-02",
  returnBy: null,
  prepare: "2025-09-24",
  fulfilled: "2025-09-25",
  arrival: "2025-09-28",
  returnOn: "2025-10-06",
  product: "Coastal Breeze Top",
  variant: "Small / White",
  sku: "coastal-breeze-top-small-white",
  item: 1007,
  serial: null,
  fulfilledNote: "4 days early",
  ret: {
    id: 1005,
    created: "Created 6 October 2025 at 4:58pm"
  },
  order: 1007,
  customer: "Renton McBorrow",
  outstanding: "£30.00"
};

export const adminCycleScrollTop = w => {
  const page = w && w.querySelector(".sca-page");
  if (page) page.scrollTop = 0;
};

export const adminCycleFind = (w, sel) => {
  const el = w.querySelector(sel);
  const page = w.querySelector(".sca-page");
  if (el && page) {
    const pr = page.getBoundingClientRect();
    const r = el.getBoundingClientRect();
    if (r.top < pr.top + 24 || r.bottom > pr.bottom - 24) page.scrollTop += r.top - pr.top - (pr.height / 2 - r.height / 2);
  }
  return el;
};

export const AdminCycleCalendar = ({year = 2025, month = 9, selected, onSelect, tourKey}) => {
  const {PButton, PInlineStack} = adminCyclesScope();
  const sel = Array.isArray(selected) ? selected : [selected, selected];
  const monthGrid = (y, m) => {
    const first = new Date(y, m, 1);
    const offset = (first.getDay() + 6) % 7;
    const count = new Date(y, m + 1, 0).getDate();
    const cells = [];
    for (let i = 0; i < offset; i++) cells.push(<span key={"e" + i} />);
    for (let d = 1; d <= count; d++) {
      const k = adminCycleKey(new Date(y, m, d));
      const isSel = k === sel[0] || k === sel[1];
      const inRange = sel[0] && sel[1] && k > sel[0] && k < sel[1];
      cells.push(<button key={k} type="button" className={"scc-day" + (isSel ? " sel" : inRange ? " in" : "") + (k === adminCycleKey(CYC_TODAY) ? " today" : "")} onClick={() => onSelect && onSelect(k)} data-tour={k === tourKey ? "day" : undefined} aria-label={adminCycleLong(k)}>{d}</button>);
    }
    return cells;
  };
  const heads = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
  const title = (y, m) => new Date(y, m, 1).toLocaleDateString("en-GB", {
    month: "long",
    year: "numeric"
  });
  const m2 = month === 11 ? 0 : month + 1;
  const y2 = month === 11 ? year + 1 : year;
  return <PInlineStack gap="600" wrap={false}>
      {[[year, month], [y2, m2]].map(([y, m], i) => <div key={i} style={{
    flex: 1
  }}>
          <PInlineStack align="space-between" blockAlign="center" wrap={false}>
            <div style={{
    width: 28
  }}>{i === 0 && <PButton variant="Tertiary" iconOnly icon="chevronLeft" ariaLabel="Previous month" />}</div>
            <div className="scc-month" style={{
    flex: 1
  }}>{title(y, m)}</div>
            <div style={{
    width: 28
  }}>{i === 1 && <PButton variant="Tertiary" iconOnly icon="chevronRight" ariaLabel="Next month" />}</div>
          </PInlineStack>
          <div className="scc-cal">{heads.map(h => <div key={h} className={"scc-cal-head" + (h === "Th" && m === 9 ? " today" : "")}>{h}</div>)}{monthGrid(y, m)}</div>
        </div>)}
    </PInlineStack>;
};

export const adminCycleDays = (a, b) => Math.round((adminCycleParse(b) - adminCycleParse(a)) / 86400000);

export const adminCycleParse = k => {
  const [y, m, d] = k.split("-").map(Number);
  return new Date(y, m - 1, d);
};

export const adminCycleShort = d => {
  const x = typeof d === "string" ? adminCycleParse(d) : d;
  return x.getDate() + " " + CYC_MONTHS[x.getMonth()];
};

export const CYC_MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

export const adminCycleLong = d => (typeof d === "string" ? adminCycleParse(d) : d).toLocaleDateString("en-GB", {
  day: "numeric",
  month: "long",
  year: "numeric"
});

export const adminCycleKey = d => d.getFullYear() + "-" + adminCyclePad(d.getMonth() + 1) + "-" + adminCyclePad(d.getDate());

export const adminCyclePad = n => (n < 10 ? "0" : "") + n;

export const CYC_TODAY = new Date(2025, 9, 16);

export const AdminCycleField = ({label, right, children}) => <div>
    <div className="scc-label-row"><div className="Polaris-Label"><span className="Polaris-Label__Text"><span className="Polaris-Text--root Polaris-Text--bodyMd">{label}</span></span></div>{right}</div>
    {children}
  </div>;

export const AdminCycleModal = ({open, title, titleIcon, onClose, footer, footerLeft, maxWidth, children}) => {
  const {PBox, PButton, PInlineStack, PText} = adminCyclesScope();
  if (!open) return null;
  return <>
      <div className="Polaris-Backdrop" onClick={onClose} />
      <div className="Polaris-Modal-Dialog__Container" data-polaris-layer="true" data-polaris-overlay="true">
        <div>
          <div role="dialog" aria-modal="true" tabIndex={-1} className="Polaris-Modal-Dialog Polaris-Modal-Dialog--entered">
            <div className="Polaris-Modal-Dialog__Modal" style={maxWidth ? {
    maxWidth
  } : undefined}>
              <PBox background="bg-surface-tertiary" borderColor="border" borderBlockEndWidth="025" padding="400">
                <div className="Polaris-InlineGrid" style={{
    "--pc-inline-grid-grid-template-columns-xs": "1fr auto",
    "--pc-inline-grid-gap-xs": sp(400)
  }}>
                  <PInlineStack gap="200" blockAlign="center">{titleIcon}<PText variant="headingMd" as="h2" className="Polaris-Text--break">{title}</PText></PInlineStack>
                  <PButton variant="Tertiary" iconOnly icon="x" ariaLabel="Close" onClick={onClose} />
                </div>
              </PBox>
              <div className="Polaris-Scrollable Polaris-Scrollable--vertical Polaris-Modal__Body" data-polaris-scrollable="true">{children}</div>
              {footer && <PInlineStack gap="400" blockAlign="center">
                  <PBox borderColor="border" borderBlockStartWidth="025" padding="400" width="100%">
                    <PInlineStack align="space-between" blockAlign="center" gap="400"><div className="Polaris-Box">{footerLeft}</div><PInlineStack gap="200">{footer}</PInlineStack></PInlineStack>
                  </PBox>
                </PInlineStack>}
            </div>
          </div>
        </div>
      </div>
    </>;
};

export const AdminCyclePopover = ({open, align = "right", wide, items}) => {
  const {AdminCycleIcon} = adminCyclesScope();
  return open ? <div className={"scc-popover" + (align === "left" ? " scc-popover--left" : "") + (wide ? " scc-popover--wide" : "")} role="menu">
      {items.map((it, i) => it === "-" ? <hr key={i} /> : it.title ? <div key={i} className="scc-action-title">{it.title}</div> : <button key={i} type="button" className="scc-action" role="menuitem" onClick={it.onClick} data-tour={it.tour}>{it.icon && <AdminCycleIcon name={it.icon} tone="Base" />}{it.label}</button>)}
    </div> : null;
};

export const AdminCycleThumb = ({size = "Small"}) => <span className={"Polaris-Thumbnail Polaris-Thumbnail--size" + size}><span className="scc-thumb" /></span>;

export const AdminCycleCheckbox = ({checked, some, onChange, ariaLabel, tour}) => <button type="button" className={"scc-check" + (checked ? " on" : some ? " some" : "")} role="checkbox" aria-checked={checked ? "true" : "false"} aria-label={ariaLabel} data-tour={tour} onClick={e => {
  e.stopPropagation();
  onChange && onChange(!checked);
}}>
    {some && !checked ? <svg viewBox="0 0 16 16"><rect x="3" y="7" width="10" height="2" rx="1" /></svg> : <svg viewBox="0 0 16 16"><path d="M13.3 4.3a1 1 0 0 1 0 1.4l-6 6a1 1 0 0 1-1.4 0l-3-3a1 1 0 1 1 1.4-1.4l2.3 2.3 5.3-5.3a1 1 0 0 1 1.4 0Z" /></svg>}
  </button>;

export const AdminCycleStatusBadge = ({status}) => {
  const {AdminCycleBadge} = adminCyclesScope();
  const [tone, icon] = CYC_STATUS[status] || ["neutral", "dot"];
  return <AdminCycleBadge tone={tone} icon={icon}>{status}</AdminCycleBadge>;
};

export const CYC_STATUS = {
  "Unfulfilled": ["attention", "circle"],
  "Fulfillment scheduled": ["info", "clock"],
  "Fulfillment overdue": ["critical", "clock"],
  "Fulfilled": ["success", "check"],
  "With customer": ["info", "dot"],
  "Receival scheduled": ["info", "clock"],
  "Receival overdue": ["critical", "clock"],
  "Unreceived": ["warning", "disabled"],
  "Received": ["neutral", "dot"],
  "Canceled": ["critical", "disabled"]
};

export const AdminCycleBadge = ({tone, icon, children}) => {
  const {AdminCycleIcon} = adminCyclesScope();
  const polaris = tone === "success" ? " Polaris-Badge--toneSuccess" : tone === "warning" ? " Polaris-Badge--toneWarning" : "";
  const own = ["info", "critical", "attention", "neutral"].includes(tone) ? " scc-badge--" + tone : "";
  return <span className={"Polaris-Badge scc-badge" + polaris + own}>
      {icon && <span className="Polaris-Badge__Icon"><AdminCycleIcon name={icon} tone="Inherit" /></span>}
      <span className="Polaris-Text--root Polaris-Text--bodySm">{children}</span>
    </span>;
};

export const CYC_CSS = `
  .sca .scc-badge .Polaris-Icon { width: .875rem; height: .875rem; margin: 0 var(--p-space-100) 0 0; }
  .sca .scc-badge--info { background-color: var(--p-color-bg-fill-info-secondary); color: var(--p-color-text-info); }
  .sca .scc-badge--critical { background-color: var(--p-color-bg-fill-critical-secondary); color: var(--p-color-text-critical); }
  .sca .scc-badge--attention { background-color: var(--p-color-bg-fill-caution-secondary); color: var(--p-color-text-caution); }
  .sca .scc-badge--neutral { background-color: var(--p-color-bg-fill-secondary); color: var(--p-color-text); }
  /* Popover + ActionList */
  .sca .scc-anchor { position: relative; display: inline-flex; }
  .sca .scc-popover { position: absolute; top: calc(100% + var(--p-space-100)); right: 0; z-index: 20; min-width: 12.5rem; background: var(--p-color-bg-surface); border-radius: var(--p-border-radius-300); box-shadow: var(--p-shadow-300); padding: var(--p-space-150); }
  .sca .scc-popover--left { right: auto; left: 0; }
  .sca .scc-popover--wide { min-width: 17rem; }
  .sca .scc-action { display: flex; align-items: center; gap: var(--p-space-200); width: 100%; padding: var(--p-space-150) var(--p-space-200); border: 0; background: none; border-radius: var(--p-border-radius-200); font: inherit; font-size: var(--p-font-size-325); line-height: 1.25rem; color: var(--p-color-text); text-align: left; cursor: pointer; }
  .sca .scc-action:hover { background: var(--p-color-bg-surface-hover); }
  .sca .scc-action .Polaris-Icon { margin: 0; }
  .sca .scc-action-title { padding: var(--p-space-150) var(--p-space-200) var(--p-space-050); font-size: var(--p-font-size-300); font-weight: 650; color: var(--p-color-text); }
  .sca .scc-popover hr { border: 0; border-top: var(--p-border-width-025) solid var(--p-color-border-secondary); margin: var(--p-space-100) 0; }
  /* Checkbox */
  .sca .scc-check { display: inline-flex; flex: none; width: 1.125rem; height: 1.125rem; padding: 0; align-items: center; justify-content: center; border-radius: var(--p-border-radius-100); border: var(--p-border-width-025) solid var(--p-color-border); background: var(--p-color-bg-surface); color: transparent; cursor: pointer; }
  .sca .scc-check.on, .sca .scc-check.some { background: var(--p-color-bg-fill-brand); border-color: var(--p-color-bg-fill-brand); color: var(--p-color-text-brand-on-bg-fill); }
  .sca .scc-check svg { width: .75rem; height: .75rem; fill: currentColor; }
  /* DatePicker */
  .sca .scc-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
  .sca .scc-cal-head { font-size: var(--p-font-size-300); color: var(--p-color-text-secondary); text-align: center; padding: var(--p-space-100) 0; }
  .sca .scc-cal-head.today { color: var(--p-color-text); font-weight: 650; }
  .sca .scc-day { height: 2rem; border: 0; background: none; border-radius: var(--p-border-radius-200); font: inherit; font-size: var(--p-font-size-325); color: var(--p-color-text); cursor: pointer; }
  .sca .scc-day:hover { background: var(--p-color-bg-surface-hover); }
  .sca .scc-day.in { background: var(--p-color-bg-surface-secondary); border-radius: 0; }
  .sca .scc-day.sel { background: var(--p-color-bg-fill-brand); color: var(--p-color-text-brand-on-bg-fill); }
  .sca .scc-day.today { font-weight: 650; }
  .sca .scc-month { text-align: center; font-weight: 650; font-size: var(--p-font-size-325); padding: var(--p-space-100) 0 var(--p-space-200); }
  /* Schedule timeline on the status card */
  .sca .scc-tl { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--p-space-200); }
  .sca .scc-tl-label { font-size: var(--p-font-size-300); color: var(--p-color-text-secondary); text-decoration: underline dotted; text-underline-offset: 2px; }
  .sca .scc-tl-value { font-size: var(--p-font-size-325); margin-top: var(--p-space-050); }
  .sca .scc-tl-bar { height: .5rem; border-radius: var(--p-border-radius-100); background: var(--p-color-bg-fill-tertiary); margin-top: var(--p-space-200); }
  .sca .scc-tl-bar.done { background: var(--p-color-bg-fill-info); }
  .sca .scc-tl-bar.part { background: linear-gradient(90deg, var(--p-color-bg-fill-info), var(--p-color-bg-fill-tertiary)); }
  /* Product thumbnail placeholder */
  .sca .scc-thumb { display: block; width: 100%; height: 100%; border-radius: var(--p-border-radius-100); background: linear-gradient(160deg, #f6dbe1 0%, #e8b7c3 55%, #d79aab 100%); }
  /* IndexFilters pills, Tag chips, availability banner */
  .sca .scc-filter { display: inline-flex; align-items: center; gap: var(--p-space-100); padding: var(--p-space-100) var(--p-space-200); border-radius: var(--p-border-radius-200); border: var(--p-border-width-025) dashed var(--p-color-border); background: var(--p-color-bg-surface); font: inherit; font-size: var(--p-font-size-300); color: var(--p-color-text); cursor: pointer; }
  .sca .scc-filter.on { border-style: solid; background: var(--p-color-bg-surface-secondary); }
  .sca .scc-filter .Polaris-Icon { width: .875rem; height: .875rem; margin: 0; }
  .sca .scc-chip { display: inline-flex; align-items: center; gap: var(--p-space-100); padding: var(--p-space-100) var(--p-space-200); border-radius: var(--p-border-radius-200); background: var(--p-color-bg-fill-tertiary); border: 0; font: inherit; font-size: var(--p-font-size-300); color: var(--p-color-text); cursor: pointer; }
  .sca .scc-chip:hover { background: var(--p-color-bg-fill-secondary); }
  .sca .scc-chip .Polaris-Icon { width: .875rem; height: .875rem; margin: 0; }
  .sca .scc-avail { display: flex; align-items: center; gap: var(--p-space-200); padding: var(--p-space-300); border-radius: var(--p-border-radius-200); background: var(--p-color-bg-fill-success-secondary); color: var(--p-color-text-success); font-size: var(--p-font-size-325); }
  .sca .scc-avail .Polaris-Icon { margin: 0; }
  .sca .scc-bulkbar { display: flex; align-items: center; justify-content: space-between; gap: var(--p-space-200); padding: var(--p-space-200) var(--p-space-300); border-bottom: var(--p-border-width-025) solid var(--p-color-border-secondary); background: var(--p-color-bg-surface); }
  .sca .scc-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--p-space-200); padding: var(--p-space-200) var(--p-space-300); border-bottom: var(--p-border-width-025) solid var(--p-color-border-secondary); }
  .sca .scc-toolbar .Polaris-Tabs__Outer .Polaris-Box { padding: 0; }
  .sca .scc-filters { display: flex; align-items: center; gap: var(--p-space-200); padding: var(--p-space-200) var(--p-space-300); border-bottom: var(--p-border-width-025) solid var(--p-color-border-secondary); }
  .sca .scc-row.sel td { background: var(--p-color-bg-surface-selected); }
  .sca .scc-row td { white-space: nowrap; }
  .sca .scc-page-sub { font-size: var(--p-font-size-325); color: var(--p-color-text-secondary); margin-top: var(--p-space-100); }
  .sca .scc-comment { display: flex; align-items: center; gap: var(--p-space-300); padding: var(--p-space-300) var(--p-space-400); }
  .sca .scc-avatar { width: 2.5rem; height: 2.5rem; border-radius: var(--p-border-radius-200); background: var(--p-color-bg-fill-tertiary); display: grid; place-items: center; color: var(--p-color-icon-secondary); flex: none; }
  .sca .scc-event { display: flex; gap: var(--p-space-300); align-items: baseline; padding: var(--p-space-200) 0 var(--p-space-200) var(--p-space-400); border-left: var(--p-border-width-025) solid var(--p-color-border-secondary); }
  .sca .scc-event-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--p-color-icon-secondary); flex: none; margin-left: -1.25rem; align-self: center; }
  .sca .scc-radio { display: inline-flex; width: 1.125rem; height: 1.125rem; border-radius: 50%; border: var(--p-border-width-025) solid var(--p-color-border); background: var(--p-color-bg-surface); flex: none; align-items: center; justify-content: center; }
  .sca .scc-radio.on { border: 6px solid var(--p-color-bg-fill-brand); }
  .sca .scc-menu-label { display: inline-flex; align-items: center; gap: var(--p-space-100); }
  .sca .scc-menu-label .Polaris-Icon { margin: 0; }
  /* The page header's action layout repaints every button as tertiary; keep the primary one primary. */
  .sca .sca-polaris .Polaris-ActionMenu-SecondaryAction button.Polaris-Button--variantPrimary { background: var(--p-color-bg-fill-brand) !important; color: var(--p-color-text-brand-on-bg-fill); }
  .sca .scc-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--p-space-100); }
  /* Card menus open past the card's edge, so cards in these scenes don't clip. */
  .sca .scc .Polaris-ShadowBevel, .sca .scc .Polaris-ShadowBevel > .Polaris-Box { overflow: visible !important; }
  .sca .scc .scc-open .Polaris-ShadowBevel { z-index: 40 !important; }
`;

export const AdminCycleIcon = ({name, tone}) => {
  const {PIcon} = adminCyclesScope();
  return <PIcon paths={CYC_ICONS[name]} tone={tone} />;
};

export const CYC_ICONS = {
  search: [{
    fr: true,
    d: "M12.323 13.383a5.5 5.5 0 1 1 1.06-1.06l2.897 2.897a.75.75 0 1 1-1.06 1.06l-2.897-2.897Zm.677-4.383a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"
  }],
  sort: [{
    d: "M7.25 3.75a.75.75 0 0 0-1.5 0v10.19l-1.72-1.72a.75.75 0 0 0-1.06 1.06l3 3a.75.75 0 0 0 1.06 0l3-3a.75.75 0 1 0-1.06-1.06l-1.72 1.72v-10.19Z"
  }, {
    d: "M14.25 16.25a.75.75 0 0 1-1.5 0v-10.19l-1.72 1.72a.75.75 0 1 1-1.06-1.06l3-3a.75.75 0 0 1 1.06 0l3 3a.75.75 0 1 1-1.06 1.06l-1.72-1.72v10.19Z"
  }],
  calendar: [{
    fr: true,
    d: "M7.75 3.5a.75.75 0 0 0-1.5 0v.407a3.075 3.075 0 0 0-.702.252 3.75 3.75 0 0 0-1.64 1.639c-.226.444-.32.924-.365 1.47-.043.531-.043 1.187-.043 2v1.513c0 .79 0 1.428.041 1.944.042.532.131 1 .346 1.434a3.75 3.75 0 0 0 1.704 1.704c.435.215.902.304 1.434.346.517.041 1.154.041 1.944.041h2.062c.79 0 1.428 0 1.944-.041.532-.042 1-.131 1.434-.346a3.75 3.75 0 0 0 1.704-1.704c.215-.435.304-.902.346-1.434.041-.517.041-1.154.041-1.944v-1.513c0-.813 0-1.469-.043-2-.045-.546-.14-1.026-.366-1.47a3.75 3.75 0 0 0-1.639-1.64 3.076 3.076 0 0 0-.702-.251v-.407a.75.75 0 0 0-1.5 0v.259c-.373-.009-.794-.009-1.268-.009h-1.964c-.474 0-.895 0-1.268.009v-.259Zm-1.52 2a2.25 2.25 0 0 0-.983.984c-.1.197-.17.458-.207.912-.014.18-.023.38-.03.609h9.983c-.006-.229-.015-.43-.03-.61-.037-.453-.106-.714-.206-.911a2.25 2.25 0 0 0-.984-.984c-.197-.1-.458-.17-.912-.207-.462-.037-1.056-.038-1.909-.038h-1.9c-.852 0-1.447 0-1.91.038-.453.037-.714.107-.911.207Zm-1.23 4.005v1.245c0 .829 0 1.406.036 1.856.035.442.1.696.196.889a2.25 2.25 0 0 0 1.023 1.022c.193.096.447.16.889.196.45.035 1.027.036 1.856.036h1.9c.829 0 1.406 0 1.856-.036.442-.035.696-.1.889-.196a2.25 2.25 0 0 0 1.023-1.022c.096-.193.16-.447.196-.89.035-.45.036-1.026.036-1.855v-1.245h-9.9Z"
  }],
  clock: [{
    d: "M10 6.5a.75.75 0 0 1 .75.75v2.44l1.53 1.53a.75.75 0 1 1-1.06 1.06l-1.75-1.75a.75.75 0 0 1-.22-.53v-2.75a.75.75 0 0 1 .75-.75Z"
  }, {
    fr: true,
    d: "M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0Zm-1.5 0a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0Z"
  }],
  plusCircle: [{
    d: "M10.75 6.75a.75.75 0 0 0-1.5 0v2.5h-2.5a.75.75 0 0 0 0 1.5h2.5v2.5a.75.75 0 0 0 1.5 0v-2.5h2.5a.75.75 0 0 0 0-1.5h-2.5v-2.5Z"
  }, {
    fr: true,
    d: "M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0Zm-1.5 0a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0Z"
  }],
  check: [{
    d: "M15.78 5.97a.75.75 0 0 1 0 1.06l-6.5 6.5a.75.75 0 0 1-1.06 0l-3-3a.75.75 0 1 1 1.06-1.06l2.47 2.47 5.97-5.97a.75.75 0 0 1 1.06 0Z"
  }],
  checkCircle: [{
    d: "M13.28 8.28a.75.75 0 0 0-1.06-1.06l-3.22 3.22-1.22-1.22a.75.75 0 0 0-1.06 1.06l1.75 1.75a.75.75 0 0 0 1.06 0l3.75-3.75Z"
  }, {
    fr: true,
    d: "M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0Zm-1.5 0a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0Z"
  }],
  disabled: [{
    fr: true,
    d: "M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0Zm-1.5 0a5.5 5.5 0 0 1-8.966 4.398l7.864-7.864a5.478 5.478 0 0 1 1.102 3.466Zm-9.398 3.398a5.5 5.5 0 0 1 7.796-7.796l-7.796 7.796Z"
  }],
  circle: [{
    fr: true,
    d: "M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0Zm-1.5 0a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0Z"
  }],
  dot: [{
    d: "M13 10a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
  }],
  barcode: [{
    d: "M4 4.75a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 0 1.5h-.75v.75a.75.75 0 0 1-1.5 0v-1.5Z"
  }, {
    d: "M13.75 4a.75.75 0 0 0 0 1.5h.75v.75a.75.75 0 0 0 1.5 0v-1.5a.75.75 0 0 0-.75-.75h-1.5Z"
  }, {
    d: "M4 13.75a.75.75 0 0 1 1.5 0v.75h.75a.75.75 0 0 1 0 1.5h-1.5a.75.75 0 0 1-.75-.75v-1.5Z"
  }, {
    d: "M16 13.75a.75.75 0 0 0-1.5 0v.75h-.75a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 .75-.75v-1.5Z"
  }, {
    d: "M7.5 7.25a.75.75 0 0 1 1.5 0v5.5a.75.75 0 0 1-1.5 0v-5.5Z"
  }, {
    d: "M11 7.25a.75.75 0 0 1 1.5 0v5.5a.75.75 0 0 1-1.5 0v-5.5Z"
  }]
};

export const adminCalendarSetupScope = () => ({
  AdminWindow,
  AvailabilityCard,
  BooleanTitle,
  BorderBox,
  CalendarSettings,
  HeaderCard,
  InventoryCard,
  Knob,
  MethodsCard,
  MethodsPage,
  OptionModal,
  PBadge,
  PBlockStack,
  PBox,
  PButton,
  PCard,
  PDataTable,
  PDivider,
  PIcon,
  PIndexTable,
  PInlineStack,
  PLayout,
  PLink,
  PPage,
  PSection,
  PSelect,
  PTabs,
  PText,
  PTextField,
  RentalMethod,
  SaveBar,
  SettingToggleCard,
  StatsCard,
  SupercycleMark,
  ToggleSection,
  TourCursor
});

export const BALL_GOWN_OPTIONS = [{
  name: "4 days",
  days: 4,
  price: 155.99
}, {
  name: "7 days",
  days: 7,
  price: 217.99
}, {
  name: "14 days",
  days: 14,
  price: 327.99
}];

export const MethodsPage = ({title, activeKeys, settings, selectedKey = "calendar"}) => {
  const {MethodsCard, PBlockStack, PLayout, PPage, PSection} = adminCalendarSetupScope();
  return <PPage title={title}>
      <PLayout>
        <PSection variant="oneThird"><PBlockStack gap="300"><MethodsCard activeKeys={activeKeys} selectedKey={selectedKey} /></PBlockStack></PSection>
        <PSection>{settings}</PSection>
      </PLayout>
    </PPage>;
};

export const OptionModal = ({open, onClose, onAdd, fields, setFields}) => {
  const {PBlockStack, PBox, PButton, PInlineStack, PSelect, PText, PTextField, ToggleSection} = adminCalendarSetupScope();
  const [toggles, setToggles] = useState({});
  if (!open) return null;
  const {name, price, days} = fields;
  const setName = v => setFields(f => ({
    ...f,
    name: v
  }));
  const setPrice = v => setFields(f => ({
    ...f,
    price: v
  }));
  const setDays = v => setFields(f => ({
    ...f,
    days: v
  }));
  const n = parseInt(days, 10) || 1;
  const placeholder = n + (n > 1 ? " days" : " day");
  const add = () => onAdd({
    name: name.trim() || placeholder,
    days: n,
    price: parseFloat(price) || 0
  });
  const sections = [{
    title: "Contract",
    icon: "note"
  }, {
    title: "Deposit",
    icon: "lock"
  }, {
    title: "Require ID verification",
    icon: "person"
  }, {
    title: "Apply to specific markets",
    icon: "globe"
  }, {
    title: "Apply to specific variants",
    icon: "checkbox"
  }, {
    title: "Apply to specific item conditions",
    icon: "catalog"
  }];
  return <>
      <div className="Polaris-Backdrop" onClick={onClose} />
      <div className="Polaris-Modal-Dialog__Container" data-polaris-layer="true" data-polaris-overlay="true">
        <div>
          <div role="dialog" aria-modal="true" aria-labelledby="option-modal-title" tabIndex={-1} className="Polaris-Modal-Dialog Polaris-Modal-Dialog--entered">
            <div className="Polaris-Modal-Dialog__Modal">
              <PBox background="bg-surface-tertiary" borderColor="border" borderBlockEndWidth="025" padding="400">
                <div className="Polaris-InlineGrid" style={{
    "--pc-inline-grid-grid-template-columns-xs": "1fr auto",
    "--pc-inline-grid-gap-xs": sp(400)
  }}>
                  <PInlineStack gap="400" blockAlign="center"><PText variant="headingMd" as="h2" id="option-modal-title" className="Polaris-Text--break">Add new option</PText></PInlineStack>
                  <PButton variant="Tertiary" iconOnly icon="x" ariaLabel="Close" onClick={onClose} />
                </div>
              </PBox>
              <div className="Polaris-Scrollable Polaris-Scrollable--vertical Polaris-Modal__Body" data-polaris-scrollable="true">
                <div className="Polaris-Modal-Section">
                  <PBox as="section" padding="400">
                    <PBlockStack gap="400">
                      <div className="Polaris-FormLayout__Item Polaris-FormLayout--grouped"><PTextField id="opt-name" label="Name" placeholder={placeholder} value={name} onChange={setName} /></div>
                      <PBlockStack gap="200" role="group">
                        <PInlineStack gap="300">
                          <div className="Polaris-FormLayout__Item Polaris-FormLayout--grouped"><PTextField id="opt-price" label="Checkout price" prefix="£" placeholder="0.00" value={price} onChange={setPrice} /></div>
                          <div className="Polaris-FormLayout__Item Polaris-FormLayout--grouped">
                            <PTextField id="opt-days" label="Duration" placeholder="0" value={days} onChange={setDays} connectedRight={<PSelect id="opt-interval" label="Interval" options={[n === 1 ? "Day" : "Days"]} />} />
                          </div>
                        </PInlineStack>
                      </PBlockStack>
                    </PBlockStack>
                  </PBox>
                </div>
                {sections.map(sec => <ToggleSection key={sec.title} icon={sec.icon} title={sec.title} enabled={!!toggles[sec.title]} onToggle={() => setToggles(t => ({
    ...t,
    [sec.title]: !t[sec.title]
  }))} />)}
              </div>
              <PInlineStack gap="400" blockAlign="center">
                <PBox borderColor="border" borderBlockStartWidth="025" padding="400" width="100%">
                  <PInlineStack align="space-between" blockAlign="center" gap="400">
                    <div className="Polaris-Box" />
                    <PInlineStack gap="200"><PButton onClick={onClose}>Cancel</PButton><PButton variant="Primary" onClick={add} tour="modal-add">Add</PButton></PInlineStack>
                  </PInlineStack>
                </PBox>
              </PInlineStack>
            </div>
          </div>
        </div>
      </div>
    </>;
};

export const ToggleSection = ({icon, title, enabled, onToggle}) => {
  const {Knob, PBox, PButton, PIcon, PInlineStack, PText} = adminCalendarSetupScope();
  return <div className="Polaris-Modal-Section">
      <section className="Polaris-Box" style={{
    "--pc-box-background": "var(--p-color-bg-surface-tertiary)",
    "--pc-box-padding-block-start-xs": sp(0),
    "--pc-box-padding-block-end-xs": sp(0),
    "--pc-box-padding-inline-start-xs": sp(0),
    "--pc-box-padding-inline-end-xs": sp(0)
  }}>
        <div style={{
    cursor: "pointer"
  }}>
          <PBox padding="400">
            <PInlineStack gap="200" align="space-between">
              <PInlineStack gap="200" blockAlign="center"><div className="Polaris-Box"><PIcon name={icon} /></div><PText>{title}</PText></PInlineStack>
              <div style={{
    flex: 1
  }} />
              <Knob selected={enabled} onClick={onToggle} ariaLabel={title} />
              <PButton variant="Tertiary" iconOnly icon="caretDown" ariaLabel={"Expand " + title} />
            </PInlineStack>
          </PBox>
        </div>
      </section>
    </div>;
};

export const Knob = ({selected, onClick, ariaLabel}) => <button className={"Knob-track" + (selected ? " on" : "")} aria-label={ariaLabel} role="switch" type="button" aria-checked={selected ? "true" : "false"} onClick={e => {
  e.stopPropagation();
  onClick && onClick();
}}>
    <div className={"Knob" + (selected ? " on" : "")} />
  </button>;

export const CalendarSettings = ({enabled, onToggle, options, onAddOption, onRowClick, fees = DEFAULT_FEES, onFeeChange}) => {
  const {BorderBox, HeaderCard, PBlockStack, PButton, PCard, PIndexTable, PInlineStack, PSelect, PText, PTextField, SettingToggleCard} = adminCalendarSetupScope();
  return <PBlockStack gap="300">
      <SettingToggleCard label="Calendar" description="Allow customers to rent this product for a specific period of time." enabled={enabled} onToggle={onToggle} />
      <PCard>
        <PBlockStack gap="300">
          <PBlockStack gap="050"><PText variant="headingSm">Options</PText><PText tone="subdued">Offer customers different rental lengths for this product.</PText></PBlockStack>
          <BorderBox padding="0">
            <PIndexTable headings={["Name", "Duration", "Checkout price", "Contract", "Deposit", "Applies to"]} onRowClick={onRowClick} emptyState="No calendar options" rows={options.map(o => [<PText>{o.name}</PText>, <PText>{o.days} {o.days === 1 ? "day" : "days"}</PText>, <PText>£{o.price.toFixed(2)}</PText>, null, null, <PText tone="subdued">All</PText>])} />
          </BorderBox>
          <PInlineStack gap="200" align="end"><PButton variant="Primary" onClick={onAddOption} tour="add-option">Add option</PButton></PInlineStack>
        </PBlockStack>
      </PCard>
      <HeaderCard title="Fixed fees" description="Fixed fees are added to the cost of the rental period and form part of the full price of the rental shown to the customer. Fixed fees set to 0 won't be shown to the customer." action="Manage fixed fees">
        <PBlockStack gap="400" inlineAlign="stretch">
          {fees.map(f => <PTextField key={f.id} id={f.id} label={f.label} prefix="£" placeholder={f.placeholder} value={f.value} onChange={v => onFeeChange && onFeeChange(f.id, v)} />)}
        </PBlockStack>
      </HeaderCard>
      <HeaderCard title="Custom restock time" description="Setting this will override your store's default restock time for this product.">
        <PTextField id="restock" label="Custom restock duration" placeholder="Use store default" value="" onChange={() => {}} connectedRight={<PSelect id="restock-unit" label="Custom restock duration unit" options={["Day/s"]} />} />
      </HeaderCard>
      <div />
    </PBlockStack>;
};

export const DEFAULT_FEES = [{
  id: "fee-dry-cleaning",
  label: "Dry Cleaning",
  value: "",
  placeholder: "15.00"
}];

export const sleep = ms => new Promise(r => setTimeout(r, ms));

export const TourCursor = ({cursor}) => <div className={"sca-cursor" + (cursor.down ? " is-down" : "")} style={{
  transform: "translate(" + cursor.x + "px, " + cursor.y + "px)",
  opacity: cursor.visible ? 1 : 0
}} aria-hidden="true">
    <span key={cursor.ripple} className={"sca-ripple" + (cursor.ripple ? " go" : "")} />
    <svg viewBox="0 0 18 22"><path d="M2 1.5v16.2l4.4-4.1 3.1 6.9 2.6-1.2-3-6.6h6.3z" fill="#fff" stroke="#111" strokeWidth="1.3" strokeLinejoin="round" /></svg>
  </div>;

export const ADMIN_CSS = `
  .sca { width: 100%; min-width: 0; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
  .sca *, .sca *::before, .sca *::after { box-sizing: border-box; }
  .sca-window { position: relative; width: 100%; min-width: 0; max-width: 640px; height: 520px; margin: 0 auto; display: flex; flex-direction: column; background: #fff; border-radius: 10px; overflow: hidden;
    box-shadow: 0 0 0 1px rgba(11,13,24,.06), 0 1px 2px rgba(11,13,24,.024), 0 3px 6px rgba(11,13,24,.03), 0 8px 14px rgba(11,13,24,.035), 0 16px 28px rgba(11,13,24,.04); }
  /* Polaris' title metadata slot isn't in polaris-css.jsx; it sits inline with
     the h1 with a small gap, which is all the rule does. */
  .sca .Polaris-Header-Title__TitleWrapper { display: flex; align-items: center; gap: var(--p-space-200); flex-wrap: wrap; }
  .sca .Polaris-Header-Title__TitleMetadata { display: inline-flex; align-items: center; }
  /* Mintlify rewrites native <table> in MDX and adds its own utilities:
     my-[1em] and py-[1em] for rhythm, a negative -mx to bleed to the page edge,
     and an oversized width to match. It also hoists the className onto a wrapper
     div, so this can't be qualified with a table element selector. Inside a
     render every one of those is wrong; the margin and padding showed as an empty
     band under the bulk bar whenever a selection replaced the header row. */
  .sca-polaris .Polaris-IndexTable__Table,
  .sca-polaris .Polaris-DataTable__Table { margin: 0; padding: 0; width: 100%; max-width: 100%; }
  .sca-titlebar { flex: none; display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid #ebebeb; background: #fff; font-size: 12px; }
  .sca-dot { width: 9px; height: 9px; border-radius: 50%; background: #e3e3e3; }
  .sca-url { margin: 0 auto; min-width: 0; max-width: calc(100% - 48px); font-size: 11px; color: #85817a; background: #f3f2ee; border-radius: 6px; padding: 3px 10px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sca-page { flex: 1; min-height: 0; min-width: 0; overflow: auto; overscroll-behavior: contain; background: #f1f1f1; scrollbar-width: thin; scrollbar-color: #c9c9c9 transparent; }
  .sca-page::-webkit-scrollbar { width: 6px; }
  .sca-page::-webkit-scrollbar-thumb { background: #c9c9c9; border-radius: 3px; }
  /* Drawn at full size, zoomed to 60%: the app's 998px page fills a 640px frame. */
  .sca-zoom { zoom: 0.6; min-height: 100%; display: flex; flex-direction: column; }
  @supports not (zoom: 0.6) { .sca-zoom { transform: scale(0.6); transform-origin: top left; width: 166.667%; } }
  .sca-polaris { background: var(--p-color-bg); min-height: 100%; }
  .sca-polaris .Polaris-Page { padding-bottom: var(--p-space-400); }
  /* Shopify top bar with the App Bridge contextual save bar */
  .sca-topbar { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 6px 12px; background: #1a1a1a; color: #e3e3e3; font-size: 12px; min-height: 36px; }
  .sca-topbar-logo { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; font-size: 13px; color: #fff; }
  .sca-topbar-logo .sc-bag { width: 16px; height: 16px; border-radius: 4px; background: #95bf47; display: grid; place-items: center; color: #fff; }
  .sca-topbar-logo .sc-bag svg { width: 11px; height: 11px; }
  .sca-topbar-store { display: inline-flex; justify-content: flex-end; align-items: center; gap: 6px; color: #e3e3e3; font-weight: 550; }
  .sca-topbar-store .sc-av { width: 16px; height: 16px; border-radius: 50%; background: #08b27d; display: grid; place-items: center; color: #f7f5ec; }
  .sca-savebar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 3px 4px 3px 12px; background: #303030; border-radius: 10px; min-width: 260px; }
  .sca-savebar-msg { display: inline-flex; align-items: center; gap: 8px; font-weight: 550; white-space: nowrap; }
  .sca-savebar-msg svg { width: 16px; height: 16px; flex: none; }
  .sca-sbtn { font: inherit; height: 26px; padding: 0 12px; border-radius: 8px; border: 0; font-size: 12px; font-weight: 550; cursor: pointer; }
  .sca-sbtn-dark { background: #4a4a4a; color: #e3e3e3; } .sca-sbtn-dark:hover { background: #616161; }
  .sca-sbtn-light { background: #fff; color: #303030; } .sca-sbtn-light:hover { background: #f1f1f1; }
  /* Shopify admin's embedded-app title bar */
  .sca-appbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid #e3e3e3; background: #f1f1f1; font-size: 14px; }
  .sca-appbar-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; color: #303030; }
  .sca-applogo { width: 20px; height: 20px; display: block; }
  .sca-appbar .Polaris-Icon { color: #4a4a4a; }
  /* App-specific styles from web/frontend/src/assets/App.scss */
  .sca-polaris .RentalMethod { cursor: pointer; }
  .sca-polaris .RentalMethod > .Polaris-Box { transition: all var(--p-motion-duration-500) var(--p-motion-ease-out); background-color: var(--p-color-bg-surface); border: var(--p-border-width-025) solid var(--p-color-border); border-radius: var(--p-border-radius-200); position: relative; }
  .sca-polaris .RentalMethod .VerticalTabs__Item__Pip { opacity: 0; display: block; position: absolute; top: 0.8rem; bottom: 0.8rem; left: 0; width: 0.1875rem; background-color: var(--p-color-bg-fill-brand-selected); border-top-right-radius: var(--p-border-radius-100); border-bottom-right-radius: var(--p-border-radius-100); }
  .sca-polaris .RentalMethod:hover > .Polaris-Box, .sca-polaris .RentalMethod.hover > .Polaris-Box { color: var(--p-color-text-primary-hover); border-color: var(--p-color-border-hover); background-color: var(--p-color-bg-surface-hover); }
  .sca-polaris .RentalMethod.active > .Polaris-Box { color: var(--p-color-text-primary-selected); border-color: var(--p-color-border-selected); background-color: var(--p-color-bg-surface-selected); }
  /* Knob toggle, from components/Knob.module.css */
  .sca .Knob-track { --track-height: 1.25rem; position: relative; height: var(--track-height); width: 2rem; flex: none; background: var(--p-color-icon-secondary); padding: 0.25rem; box-shadow: inset 0 0.0625rem 0.25rem rgba(0,0,0,.05); border: none; border-radius: 0.375rem; cursor: pointer; outline: none; transition: background var(--p-motion-duration-50) var(--p-motion-ease); }
  .sca .Knob-track:hover { background: rgba(97,97,97,1); }
  .sca .Knob-track.on { background: var(--p-color-bg-inverse); }
  .sca .Knob-track.on:hover { background: rgba(48,48,48,1); }
  .sca .Knob { height: 0.75rem; width: 0.75rem; border-radius: 0.1875rem; background: var(--p-color-bg-surface); transition: transform var(--p-motion-duration-50) var(--p-motion-ease); }
  .sca .Knob.on { transform: translate(100%); }
  /* Overlays (Modal, Toast) live in the window, not the viewport */
  .sca-overlay { position: absolute; inset: 0; z-index: 5; }
  .sca-overlay .sca-zoom { position: absolute; inset: 0; min-height: 0; display: block; }
  .sca .sca-polaris .Polaris-Backdrop { position: absolute; }
  .sca .sca-polaris .Polaris-Modal-Dialog__Container { position: absolute; inset: 0; }
  .sca .sca-polaris .Polaris-Frame-ToastManager { position: absolute; top: auto; left: 0; right: 0; bottom: var(--p-space-800); height: auto; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; pointer-events: none; }
  .sca .sca-polaris .Polaris-Frame-ToastManager__ToastWrapper { position: relative; inset: auto; transform: none; translate: none; margin: 0; pointer-events: auto; }
  /* Guided cursor: glides to the control, presses, ripples */
  .sca-cursor { position: absolute; left: 0; top: 0; z-index: 30; pointer-events: none; transition: transform 700ms cubic-bezier(.22,.8,.26,1), opacity 300ms ease; will-change: transform; }
  .sca-cursor svg { display: block; width: 18px; height: 22px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); transition: transform 120ms ease; transform-origin: 2px 2px; }
  .sca-cursor.is-down svg { transform: scale(.82); }
  .sca-ripple { position: absolute; left: -12px; top: -12px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #202603; opacity: 0; }
  .sca-ripple.go { animation: sca-ripple 520ms ease-out; }
  @keyframes sca-ripple { 0% { transform: scale(.3); opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } }
  @media (max-width: 640px) { .sca-topbar-store, .sca-topbar-logo { display: none; } .sca-topbar { grid-template-columns: 1fr; justify-items: center; } }
`;

export const InventoryCard = () => {
  const {BorderBox, PBlockStack, PBox, PButton, PCard, PDataTable, PInlineStack, PLink, PTabs, PText} = adminCalendarSetupScope();
  const variant = (title, sku) => <PLink monochrome removeUnderline>
      <PInlineStack gap="200" blockAlign="center" align="start" wrap={false}>
        <span className="Polaris-Thumbnail Polaris-Thumbnail--sizeExtraSmall"><span style={{
    display: "block",
    width: "100%",
    height: "100%",
    background: "var(--p-color-bg-fill-tertiary)",
    borderRadius: "var(--p-border-radius-100)"
  }} /></span>
        <PBlockStack><PText variant="bodyMd" truncate>{title}</PText><PText variant="bodyXs" tone="subdued">{sku}</PText></PBlockStack>
      </PInlineStack>
    </PLink>;
  return <PCard>
      <PBox paddingBlockEnd="400"><PBlockStack gap="050"><PText variant="headingSm">Inventory</PText></PBlockStack></PBox>
      <BorderBox padding="0">
        <PTabs tabs={["Active", "Draft", "All"]} selected={0} right={<PBox paddingInlineEnd="200"><PButton iconOnly icon="filter" ariaLabel="Filter" /></PBox>} />
        <PDataTable headings={["Variant", "Uncommitted", "On hand", "On order", <b>Total</b>]} numeric={[false, true, true, true, true]} totals={["Ball Gown", 27, 27, 1, 28]} rows={[[variant("6 / Midnight Blue", "ball-gown-6-blue"), 6, 6, 0, <b>6</b>], [variant("8 / Midnight Blue", "ball-gown-8-blue"), 7, 7, 1, <b>8</b>], [variant("10 / Midnight Blue", "ball-gown-10-blue"), 7, 7, 0, <b>7</b>], [variant("12 / Midnight Blue", "ball-gown-12-blue"), 7, 7, 0, <b>7</b>]]} />
      </BorderBox>
      <PBox paddingBlockStart="300"><PInlineStack gap="200" align="end"><PButton>View inventory</PButton><PButton>Add inventory</PButton></PInlineStack></PBox>
    </PCard>;
};

export const AvailabilityCard = () => {
  const {HeaderCard, PBlockStack, PInlineStack, PText} = adminCalendarSetupScope();
  const weeks = 35, size = 12, gap = 4, labelW = 30, top = 20;
  const months = ["Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar"];
  const booked = {
    "1-4": "#1dd099",
    "2-4": "#8ee8cc",
    "0-12": "#c4f3e5",
    "3-20": "#8ee8cc",
    "1-21": "#1dd099",
    "2-21": "#1dd099"
  };
  const today = "3-1";
  const w = labelW + weeks * (size + gap), hgt = top + 7 * (size + gap);
  return <HeaderCard title="Availability" description="View upcoming availability of this product" action="View cycles">
      <PBlockStack gap="500">
        <PInlineStack align="space-between" blockAlign="center"><PText variant="bodySm" fontWeight="medium">Next 8 months</PText></PInlineStack>
        <article className="react-activity-calendar" style={{
    fontFamily: "var(--p-font-family-sans)",
    fontWeight: "var(--p-font-weight-regular)",
    color: "var(--p-color-text)",
    fontSize: 12
  }}>
          <div style={{
    overflowX: "auto"
  }}>
            <svg width={w} height={hgt} viewBox={"0 0 " + w + " " + hgt} style={{
    display: "block",
    maxWidth: "100%"
  }}>
              {months.map((m, i) => <text key={m} x={labelW + Math.round(i * (weeks / months.length)) * (size + gap)} y={12} fill="currentColor">{m}</text>)}
              {["Tue", "Thu", "Sat"].map((d, i) => <text key={d} x={0} y={top + (1 + i * 2) * (size + gap) + size - 2} fill="currentColor">{d}</text>)}
              {Array.from({
    length: weeks
  }, (_, x) => Array.from({
    length: 7
  }, (_, y) => {
    const k = y + "-" + x;
    const isToday = k === today;
    return <rect key={k} x={labelW + x * (size + gap)} y={top + y * (size + gap)} width={size} height={size} rx="2" ry="2" fill={isToday ? "white" : booked[k] || "hsl(0, 0%, 92%)"} style={isToday ? {
      stroke: "var(--p-color-border-emphasis-active)",
      strokeWidth: "1.5px"
    } : undefined} />;
  }))}
            </svg>
          </div>
          <footer style={{
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    marginTop: 8,
    color: "var(--p-color-text)"
  }}>
            <div>1 cycles</div>
            <div style={{
    display: "flex",
    alignItems: "center",
    gap: 3
  }}>
              <span style={{
    marginRight: 4
  }}>No cycles</span>
              {["hsl(0, 0%, 92%)", "#c4f3e5", "#8ee8cc", "#53dcb2", "#1dd099"].map(c => <svg key={c} width={size} height={size}><rect width={size} height={size} rx="2" ry="2" fill={c} /></svg>)}
              <span style={{
    marginLeft: 4
  }}>Fully booked</span>
            </div>
          </footer>
        </article>
      </PBlockStack>
    </HeaderCard>;
};

export const StatsCard = ({stats}) => {
  const {PBlockStack, PBox, PButton, PCard, PText} = adminCalendarSetupScope();
  return <PCard padding="0">
      <PBox paddingBlock="200">
        <div style={{
    display: "flex"
  }}>
          {stats.map((s, i) => <div key={s.label} style={{
    flex: 1,
    display: "flex",
    flexWrap: "wrap",
    flexDirection: "column",
    borderRight: i !== stats.length - 1 ? "1px solid var(--p-color-border)" : "none"
  }}>
              <PBox paddingInline="200">
                <PButton variant="Tertiary" textAlign="Left" fullWidth>
                  <PBlockStack><PText variant="bodySm">{s.label}</PText><PText variant="bodyLg" fontWeight="medium">{s.value}</PText></PBlockStack>
                </PButton>
              </PBox>
            </div>)}
        </div>
      </PBox>
    </PCard>;
};

export const MethodsCard = ({activeKeys, selectedKey, hoverKey, heading}) => {
  const {BooleanTitle, PBlockStack, PCard, PText, RentalMethod} = adminCalendarSetupScope();
  const active = METHODS.filter(m => activeKeys.includes(m.key));
  const inactive = METHODS.filter(m => !activeKeys.includes(m.key));
  return <PCard>
      <PBlockStack gap="300">
        {heading && <PText variant="headingSm">{heading}</PText>}
        <BooleanTitle enabled>Active</BooleanTitle>
        {active.length ? active.map(m => <RentalMethod key={m.key} m={m} active={m.key === selectedKey} hover={m.key === hoverKey} />) : <PText tone="subdued">No active methods</PText>}
        <BooleanTitle>Inactive</BooleanTitle>
        {inactive.length ? inactive.map(m => <RentalMethod key={m.key} m={m} active={m.key === selectedKey} hover={m.key === hoverKey} />) : <PText tone="subdued">No inactive methods</PText>}
      </PBlockStack>
    </PCard>;
};

export const RentalMethod = ({m, active, hover, onClick}) => {
  const {PBlockStack, PBox, PIcon, PInlineStack, PText} = adminCalendarSetupScope();
  return <div className={["RentalMethod", active && "active", hover && "hover", "enabled"].filter(Boolean).join(" ")} onClick={onClick} role="button" tabIndex={0} data-method={m.key}>
      <PBox paddingBlock="200" paddingInline="300">
        <div className="VerticalTabs__Item__Pip" />
        <PInlineStack gap="200" align="space-between" blockAlign="center" wrap={false}>
          <PInlineStack gap="200" align="center" blockAlign="center" wrap={false}>
            <div><PIcon name={m.icon} /></div>
            <PBlockStack><PText>{m.title}</PText><PText tone="subdued" variant="bodySm">{m.description}</PText></PBlockStack>
          </PInlineStack>
          <div><PIcon name="chevronRight" tone="Base" /></div>
        </PInlineStack>
      </PBox>
    </div>;
};

export const SettingToggleCard = ({label, description, enabled, onToggle}) => {
  const {PBadge, PBlockStack, PBox, PButton, PCard, PInlineStack, PText} = adminCalendarSetupScope();
  return <PCard>
      <PBlockStack gap="400">
        <PBox width="100%">
          <PInlineStack gap="12" align="space-between" blockAlign="start" wrap={false}>
            <PInlineStack gap="200" wrap={false}>
              <PInlineStack gap="200" align="start" blockAlign="baseline">
                <label htmlFor="setting-toggle"><PText variant="headingMd" as="h6">{label}</PText></label>
                <PInlineStack gap="200" align="center" blockAlign="center"><PBadge tone={enabled ? "Success" : undefined}>{enabled ? "Active" : "Inactive"}</PBadge></PInlineStack>
              </PInlineStack>
            </PInlineStack>
            <PBox minWidth="fit-content"><PInlineStack align="end"><PButton size="Slim" role="switch" id="setting-toggle" ariaChecked={enabled ? "true" : "false"} onClick={onToggle} tour="toggle">{enabled ? "Turn off" : "Turn on"}</PButton></PInlineStack></PBox>
          </PInlineStack>
        </PBox>
        <PText variant="bodyMd" tone="subdued">{description}</PText>
      </PBlockStack>
    </PCard>;
};

export const HeaderCard = ({title, description, action, children}) => {
  const {PBlockStack, PBox, PButton, PCard, PDivider, PInlineStack, PText} = adminCalendarSetupScope();
  return <PCard padding="0">
      <PBox padding="400">
        <PBlockStack gap="050">
          <PInlineStack align="space-between"><PText variant="headingSm">{title}</PText>{action && <PButton variant="Plain">{action}</PButton>}</PInlineStack>
          {description && <PText tone="subdued" variant="bodyMd">{description}</PText>}
        </PBlockStack>
      </PBox>
      <PDivider />
      <PBox padding="400">{children}</PBox>
    </PCard>;
};

export const BooleanTitle = ({enabled, children}) => {
  const {PInlineStack, PText} = adminCalendarSetupScope();
  return <PInlineStack gap="200" blockAlign="center">
      <div className={"Polaris-Badge-Pip " + (enabled ? "Polaris-Badge-Pip--toneSuccess Polaris-Badge-Pip--progressComplete" : "Polaris-Badge-Pip--toneNeutral Polaris-Badge-Pip--progressIncomplete")} />
      <PText as="span">{children}</PText>
    </PInlineStack>;
};

export const PDataTable = ({headings, numeric, totals, rows}) => {
  const cell = extra => ["Polaris-DataTable__Cell", "Polaris-DataTable__Cell--verticalAlignMiddle", ...extra].filter(Boolean).join(" ");
  return <div className="Polaris-DataTable Polaris-DataTable__ShowTotals">
      <div className="Polaris-DataTable__ScrollContainer">
        <table className="Polaris-DataTable__Table">
          <thead>
            <tr>{headings.map((h, i) => <th key={i} data-polaris-header-cell="true" className={cell(["Polaris-DataTable__Cell--header", numeric[i] && "Polaris-DataTable__Cell--numeric"])} scope="col">{h}</th>)}</tr>
            {totals && <tr>{totals.map((t, i) => i === 0 ? <th key={i} className={cell(["Polaris-DataTable__Cell--firstColumn", "Polaris-DataTable__Cell--total"])} scope="row">{t}</th> : <td key={i} className={cell(["Polaris-DataTable__Cell--total", numeric[i] && "Polaris-DataTable__Cell--numeric"])}>{t}</td>)}</tr>}
          </thead>
          <tbody>
            {rows.map((r, ri) => <tr key={ri} className="Polaris-DataTable__TableRow Polaris-DataTable--hoverable">
                {r.map((c, i) => i === 0 ? <th key={i} className={cell(["Polaris-DataTable__Cell--firstColumn"])} scope="row">{c}</th> : <td key={i} className={cell([numeric[i] && "Polaris-DataTable__Cell--numeric"])}>{c}</td>)}
              </tr>)}
          </tbody>
        </table>
      </div>
    </div>;
};

export const PIndexTable = ({headings, rows, onRowClick, emptyState}) => {
  const {PBox, PText} = adminCalendarSetupScope();
  return <div className="Polaris-IndexTable">
      <div className="Polaris-IndexTable__IndexTableWrapper">
        {rows.length === 0 ? <PBox padding="400"><PText tone="subdued" alignment="center">{emptyState}</PText></PBox> : <div className="Polaris-IndexTable-ScrollContainer">
            <table className="Polaris-IndexTable__Table Polaris-IndexTable__Table--unselectable Polaris-IndexTable__Table--sticky">
              <thead>
                <tr>
                  {headings.map((h, i) => <th key={h} className={["Polaris-IndexTable__TableHeading", i === 0 && "Polaris-IndexTable__TableHeading--second", i === headings.length - 1 && "Polaris-IndexTable__TableHeading--last", "Polaris-IndexTable__TableHeading--unselectable"].filter(Boolean).join(" ")} data-index-table-heading="true">
                      <div style={{
    "--pc-index-table-heading-extra-padding-right": 0
  }}><span className="Polaris-Text--root Polaris-Text--bodySm Polaris-Text--medium">{h}</span></div>
                    </th>)}
                </tr>
              </thead>
              <tbody>
                {rows.map((r, ri) => <tr key={ri} className="Polaris-IndexTable__TableRow" onClick={() => onRowClick && onRowClick(ri)} style={onRowClick ? {
    cursor: "pointer"
  } : undefined}>
                    {r.map((c, ci) => <td key={ci} className="Polaris-IndexTable__TableCell">{c}</td>)}
                  </tr>)}
              </tbody>
            </table>
          </div>}
      </div>
    </div>;
};

export const PBadge = ({tone, children}) => <span className={"Polaris-Badge" + (tone ? " Polaris-Badge--tone" + tone : "")}>
    {tone === "Success" && <span className="Polaris-Text--root Polaris-Text--visuallyHidden">Success</span>}
    <span className="Polaris-Text--root Polaris-Text--bodySm">{children}</span>
  </span>;

export const boxStyle = p => {
  const s = {};
  const set = (k, v) => {
    if (v !== undefined && v !== null) s["--pc-box-" + k] = v;
  };
  const pad = (side, v) => set("padding-" + side + "-xs", sp(v));
  if (p.padding !== undefined) ["block-start", "block-end", "inline-start", "inline-end"].forEach(k => pad(k, p.padding));
  if (p.paddingBlock !== undefined) ["block-start", "block-end"].forEach(k => pad(k, p.paddingBlock));
  if (p.paddingInline !== undefined) ["inline-start", "inline-end"].forEach(k => pad(k, p.paddingInline));
  if (p.paddingBlockStart !== undefined) pad("block-start", p.paddingBlockStart);
  if (p.paddingBlockEnd !== undefined) pad("block-end", p.paddingBlockEnd);
  if (p.paddingInlineStart !== undefined) pad("inline-start", p.paddingInlineStart);
  if (p.paddingInlineEnd !== undefined) pad("inline-end", p.paddingInlineEnd);
  set("background", p.background && "var(--p-color-" + p.background + ")");
  set("border-color", p.borderColor && "var(--p-color-" + p.borderColor + ")");
  set("border-style", p.borderColor && "solid");
  set("border-width", p.borderWidth && "var(--p-border-width-" + p.borderWidth + ")");
  set("border-block-start-width", p.borderBlockStartWidth && "var(--p-border-width-" + p.borderBlockStartWidth + ")");
  set("border-block-end-width", p.borderBlockEndWidth && "var(--p-border-width-" + p.borderBlockEndWidth + ")");
  set("border-radius", p.borderRadius && "var(--p-border-radius-" + p.borderRadius + ")");
  set("width", p.width);
  set("min-width", p.minWidth);
  set("max-width", p.maxWidth);
  set("min-height", p.minHeight);
  set("overflow-x", p.overflowX);
  set("overflow-y", p.overflowY);
  return {
    ...s,
    ...p.style || ({})
  };
};

export const ICONS = {
  passkey: [{
    fr: true,
    d: "M5.5 6.5c0-1.933 1.567-3.5 3.5-3.5s3.5 1.567 3.5 3.5-1.567 3.5-3.5 3.5-3.5-1.567-3.5-3.5Zm3.5-2c-1.105 0-2 .895-2 2s.895 2 2 2 2-.895 2-2-.895-2-2-2Z"
  }, {
    d: "M9 12.5c-1.734 0-3.33.94-4.173 2.455l-.302.545h5.725c.414 0 .75.336.75.75s-.336.75-.75.75h-6.001c-1.02 0-1.665-1.096-1.17-1.987l.437-.786c1.106-1.992 3.206-3.227 5.484-3.227.414 0 .75.336.75.75s-.336.75-.75.75Z"
  }, {
    d: "M15.5 11.375c0 .483-.392.875-.875.875s-.875-.392-.875-.875.392-.875.875-.875.875.392.875.875Z"
  }, {
    fr: true,
    d: "M11.25 11.376c0-1.865 1.511-3.376 3.376-3.376 1.864 0 3.376 1.511 3.376 3.376v.726c0 .731-.365 1.377-.923 1.766.05.353-.002.713-.145 1.036.295.752.117 1.65-.542 2.226l-.397.347c-.915.798-2.324.604-2.989-.412l-.326-.498c-.213-.325-.326-.706-.326-1.095v-1.492c-.659-.367-1.104-1.07-1.104-1.879v-.725Zm2.41 1.457c-.074-.051-.163-.081-.26-.081-.359 0-.65-.291-.65-.65v-.726c0-1.036.84-1.876 1.876-1.876s1.876.84 1.876 1.876v.726c0 .359-.291.65-.65.65h-.247c-.106 0-.205.034-.285.092-.114.082-.19.212-.201.361l-.001.015v.02c0 .112.038.222.11.309l.282.345c.164.2.087.502-.153.6l-.003.001c-.193.08-.274.288-.22.466.02.07.062.135.125.187l.133.109c.014.01.026.021.038.033.196.196.19.523-.025.71l-.397.347c-.16.14-.383.158-.559.067-.01-.005-.021-.011-.031-.018l-.005-.002c-.034-.022-.065-.047-.094-.077l-.006-.007c-.019-.02-.036-.042-.052-.066l-.326-.498c-.053-.082-.082-.177-.082-.274v-2.267c0-.154-.076-.29-.194-.372Z"
  }],
  calendarTime: [{
    fr: true,
    d: "M6 2.25c.414 0 .75.336.75.75v.528c.487-.028 1.07-.028 1.768-.028h2.482v-.5c0-.414.336-.75.75-.75s.75.336.75.75v.604c1.296.347 2.25 1.53 2.25 2.936 0 .835-.678 1.513-1.513 1.513h-8.733c-.004.288-.004.617-.004.997v2.468c0 1.233 1 2.232 2.232 2.232.414 0 .75.336.75.75s-.336.75-.75.75c-2.061 0-3.732-1.67-3.732-3.732v-2.5c0-.813 0-1.469.043-2 .045-.546.14-1.026.366-1.47.36-.706.933-1.28 1.639-1.64.066-.033.134-.064.202-.093v-.815c0-.414.336-.75.75-.75Zm7.237 4.303h-8.61c.033-.13.072-.234.118-.324.216-.424.56-.768.984-.984.197-.1.458-.17.912-.207.462-.037 1.057-.038 1.909-.038h3.16c.85 0 1.54.69 1.54 1.54v.005l-.004.004-.004.003h-.005Z"
  }, {
    d: "M14.25 12c0-.414-.336-.75-.75-.75s-.75.336-.75.75v1.293c0 .331.132.65.366.884l.854.853c.293.293.767.293 1.06 0 .293-.293.293-.767 0-1.06l-.78-.78v-1.19Z"
  }, {
    fr: true,
    d: "M13.5 18c2.485 0 4.5-2.015 4.5-4.5s-2.015-4.5-4.5-4.5-4.5 2.015-4.5 4.5 2.015 4.5 4.5 4.5Zm0-1.5c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3Z"
  }],
  refresh: [{
    d: "M3.5 9.25a.75.75 0 0 0 1.5 0 3 3 0 0 1 3-3h6.566l-1.123 1.248a.75.75 0 1 0 1.114 1.004l2.25-2.5a.75.75 0 0 0-.027-1.032l-2.25-2.25a.75.75 0 1 0-1.06 1.06l.97.97h-6.44a4.5 4.5 0 0 0-4.5 4.5Z"
  }, {
    d: "M16.5 10.75a.75.75 0 0 0-1.5 0 3 3 0 0 1-3 3h-6.566l1.123-1.248a.75.75 0 1 0-1.114-1.004l-2.25 2.5a.75.75 0 0 0 .027 1.032l2.25 2.25a.75.75 0 0 0 1.06-1.06l-.97-.97h6.44a4.5 4.5 0 0 0 4.5-4.5Z"
  }],
  bill: [{
    fr: true,
    d: "M5.5 3.5a2 2 0 0 0-2 2v3.75c0 .414.336.75.75.75h2v5.769a.85.85 0 0 0 1.433.618l1.442-1.357 1.611 1.516a.75.75 0 0 0 1.028 0l1.611-1.516 1.442 1.357a.85.85 0 0 0 1.433-.618v-10.269a2 2 0 0 0-2-2h-8.494l.005.017a2.02 2.02 0 0 0-.261-.017Zm-.5 2a.5.5 0 0 1 1 0v3h-1v-3Zm2.75-.48-.006-.02h6.506a.5.5 0 0 1 .5.5v8.764l-.69-.649a1 1 0 0 0-1.37 0l-1.44 1.355-1.44-1.355a1 1 0 0 0-1.37 0l-.69.65v-9.245Zm2 1.48a.75.75 0 0 0 0 1.5h3a.75.75 0 0 0 0-1.5h-3Zm-.75 3.75a.75.75 0 0 1 .75-.75h3a.75.75 0 0 1 0 1.5h-3a.75.75 0 0 1-.75-.75Z"
  }],
  payoutDollar: [{
    d: "M10 4.5c-3.038 0-5.5 2.462-5.5 5.5 0 .915.223 1.777.617 2.534.191.368.048.82-.32 1.012-.367.19-.82.048-1.01-.32-.503-.966-.787-2.064-.787-3.226 0-3.866 3.134-7 7-7s7 3.134 7 7c0 1.162-.284 2.26-.786 3.226-.192.368-.644.51-1.012.32-.367-.191-.51-.644-.32-1.012.395-.757.618-1.619.618-2.534 0-3.038-2.462-5.5-5.5-5.5Z"
  }, {
    d: "M16.5 15.5c.414 0 .75.336.75.75s-.336.75-.75.75h-13c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h13Z"
  }, {
    d: "M10.9 11.375c0 .276-.224.5-.5.5h-2.25c-.415 0-.75.336-.75.75s.335.75.75.75h.5c0 .414.335.75.75.75.414 0 .75-.336.75-.75h.25c1.104 0 2-.895 2-2s-.896-2-2-2h-1c-.277 0-.5-.224-.5-.5s.223-.5.5-.5h2.25c.414 0 .75-.336.75-.75s-.336-.75-.75-.75h-1v-.25c0-.414-.336-.75-.75-.75-.415 0-.75.336-.75.75v.265c-.987.123-1.75.965-1.75 1.985 0 1.105.895 2 2 2h1c.276 0 .5.224.5.5Z"
  }],
  chevronRight: [{
    fr: true,
    d: "M7.72 14.53a.75.75 0 0 1 0-1.06l3.47-3.47-3.47-3.47a.75.75 0 0 1 1.06-1.06l4 4a.75.75 0 0 1 0 1.06l-4 4a.75.75 0 0 1-1.06 0Z"
  }],
  chevronLeft: [{
    fr: true,
    d: "M12.28 5.47a.75.75 0 0 1 0 1.06L8.81 10l3.47 3.47a.75.75 0 1 1-1.06 1.06l-4-4a.75.75 0 0 1 0-1.06l4-4a.75.75 0 0 1 1.06 0Z"
  }],
  chevronDown: [{
    fr: true,
    d: "M5.72 8.47a.75.75 0 0 1 1.06 0l3.47 3.47 3.47-3.47a.75.75 0 1 1 1.06 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 0-1.06Z"
  }],
  arrowLeft: [{
    fr: true,
    d: "M16.5 10a.75.75 0 0 1-.75.75h-9.69l2.72 2.72a.75.75 0 0 1-1.06 1.06l-4-4a.75.75 0 0 1 0-1.06l4-4a.75.75 0 1 1 1.06 1.06l-2.72 2.72h9.69a.75.75 0 0 1 .75.75Z"
  }],
  delete: [{
    d: "M11.5 8.25a.75.75 0 0 1 .75.75v4.25a.75.75 0 0 1-1.5 0v-4.25a.75.75 0 0 1 .75-.75Z"
  }, {
    d: "M9.25 9a.75.75 0 0 0-1.5 0v4.25a.75.75 0 0 0 1.5 0v-4.25Z"
  }, {
    fr: true,
    d: "M7.25 5.25a2.75 2.75 0 0 1 5.5 0h3a.75.75 0 0 1 0 1.5h-.75v5.45c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311c-.642.327-1.482.327-3.162.327h-.4c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311c-.327-.642-.327-1.482-.327-3.162v-5.45h-.75a.75.75 0 0 1 0-1.5h3Zm1.5 0a1.25 1.25 0 1 1 2.5 0h-2.5Zm-2.25 1.5h7v5.45c0 .865-.001 1.423-.036 1.848-.033.408-.09.559-.128.633a1.5 1.5 0 0 1-.655.655c-.074.038-.225.095-.633.128-.425.035-.983.036-1.848.036h-.4c-.865 0-1.423-.001-1.848-.036-.408-.033-.559-.09-.633-.128a1.5 1.5 0 0 1-.656-.655c-.037-.074-.094-.225-.127-.633-.035-.425-.036-.983-.036-1.848v-5.45Z"
  }],
  x: [{
    d: "M13.97 15.03a.75.75 0 1 0 1.06-1.06l-3.97-3.97 3.97-3.97a.75.75 0 0 0-1.06-1.06l-3.97 3.97-3.97-3.97a.75.75 0 0 0-1.06 1.06l3.97 3.97-3.97 3.97a.75.75 0 1 0 1.06 1.06l3.97-3.97 3.97 3.97Z"
  }],
  xSmall: [{
    d: "M12.72 13.78a.75.75 0 1 0 1.06-1.06l-2.72-2.72 2.72-2.72a.75.75 0 0 0-1.06-1.06l-2.72 2.72-2.72-2.72a.75.75 0 0 0-1.06 1.06l2.72 2.72-2.72 2.72a.75.75 0 1 0 1.06 1.06l2.72-2.72 2.72 2.72Z"
  }],
  select: [{
    d: "M10.884 4.323a1.25 1.25 0 0 0-1.768 0l-2.646 2.647a.75.75 0 0 0 1.06 1.06l2.47-2.47 2.47 2.47a.75.75 0 1 0 1.06-1.06l-2.646-2.647Z"
  }, {
    d: "m13.53 13.03-2.646 2.647a1.25 1.25 0 0 1-1.768 0l-2.646-2.647a.75.75 0 0 1 1.06-1.06l2.47 2.47 2.47-2.47a.75.75 0 0 1 1.06 1.06Z"
  }],
  menuHorizontal: [{
    d: "M6 10a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
  }, {
    d: "M11.5 10a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
  }, {
    d: "M17 10a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
  }],
  alertCircle: [{
    d: "M10 6a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5a.75.75 0 0 1 .75-.75Z"
  }, {
    d: "M11 13a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
  }, {
    fr: true,
    d: "M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0Zm-1.5 0a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0Z"
  }],
  note: [{
    d: "M6.55 7.25a.7.7 0 0 1 .7-.7h5.5a.7.7 0 0 1 0 1.4h-5.5a.7.7 0 0 1-.7-.7Z"
  }, {
    d: "M7 9.05a.7.7 0 0 0 0 1.4h2.25a.7.7 0 1 0 0-1.4h-2.25Z"
  }, {
    fr: true,
    d: "M3.5 6.25a2.75 2.75 0 0 1 2.75-2.75h7.5a2.75 2.75 0 0 1 2.75 2.75v5.5a.75.75 0 0 1-.22.53l-4 4a.75.75 0 0 1-.53.22h-5.5a2.75 2.75 0 0 1-2.75-2.75v-7.5Zm2.75-1.25c-.69 0-1.25.56-1.25 1.25v7.5c0 .69.56 1.25 1.25 1.25h4.75v-2.25c0-.966.784-1.75 1.75-1.75h2.25v-4.75c0-.69-.56-1.25-1.25-1.25h-7.5Zm7.69 7.5h-1.19a.25.25 0 0 0-.25.25v1.19l1.44-1.44Z"
  }],
  lock: [{
    d: "M10.75 13.05a1.5 1.5 0 1 0-1.5 0v.45a.75.75 0 0 0 1.5 0v-.45Z"
  }, {
    fr: true,
    d: "M6.25 7.095v-.345a3.75 3.75 0 1 1 7.5 0v.345a3.001 3.001 0 0 1 2.25 2.905v4a3 3 0 0 1-3 3h-6a3 3 0 0 1-3-3v-4a3 3 0 0 1 2.25-2.905Zm1.5-.345a2.25 2.25 0 0 1 4.5 0v.25h-4.5v-.25Zm-2.25 3.25a1.5 1.5 0 0 1 1.5-1.5h6a1.5 1.5 0 0 1 1.5 1.5v4a1.5 1.5 0 0 1-1.5 1.5h-6a1.5 1.5 0 0 1-1.5-1.5v-4Z"
  }],
  person: [{
    fr: true,
    d: "M10 3a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7Zm-2 3.5a2 2 0 1 1 4 0 2 2 0 0 1-4 0Z"
  }, {
    fr: true,
    d: "M15.484 14.227a6.274 6.274 0 0 0-10.968 0l-.437.786a1.338 1.338 0 0 0 1.17 1.987h9.502a1.338 1.338 0 0 0 1.17-1.987l-.437-.786Zm-9.657.728a4.773 4.773 0 0 1 8.346 0l.302.545h-8.95l.302-.545Z"
  }],
  globe: [{
    fr: true,
    d: "M3 10a7 7 0 1 1 14 0 7 7 0 0 1-14 0Zm7-5.5a5.497 5.497 0 0 0-4.737 2.703l2 1.999c.472.472.737 1.113.737 1.78v.518a.5.5 0 0 0 .5.5 2 2 0 0 1 2 2v1.478a5.504 5.504 0 0 0 4.52-3.228h-1.02a.75.75 0 0 1-.75-.75v-.5a.75.75 0 0 0-.75-.75h-2.5a1.755 1.755 0 0 1-1.07-3.144l.463-.356a.393.393 0 0 0 .152-.312v-.04c0-.885.62-1.624 1.449-1.808a5.531 5.531 0 0 0-.994-.09Zm2.875.81a1.85 1.85 0 0 1-1.477.735.352.352 0 0 0-.353.353v.04c0 .587-.271 1.14-.736 1.499l-.462.356a.256.256 0 0 0 .153.457h2.5a2.25 2.25 0 0 1 2.236 2h.713a5.497 5.497 0 0 0-2.574-5.44Zm-8.375 4.69c0-.443.052-.875.152-1.288l1.55 1.55c.19.191.298.45.298.72v.518a2 2 0 0 0 2 2 .5.5 0 0 1 .5.5v1.41a5.502 5.502 0 0 1-4.5-5.41Z"
  }],
  checkbox: [{
    d: "M13.28 8.78a.75.75 0 0 0-1.06-1.06l-2.97 2.97-1.22-1.22a.75.75 0 0 0-1.06 1.06l1.75 1.75a.75.75 0 0 0 1.06 0l3.5-3.5Z"
  }, {
    fr: true,
    d: "M6.25 3.5a2.75 2.75 0 0 0-2.75 2.75v7.5a2.75 2.75 0 0 0 2.75 2.75h7.5a2.75 2.75 0 0 0 2.75-2.75v-7.5a2.75 2.75 0 0 0-2.75-2.75h-7.5Zm-1.25 2.75c0-.69.56-1.25 1.25-1.25h7.5c.69 0 1.25.56 1.25 1.25v7.5c0 .69-.56 1.25-1.25 1.25h-7.5c-.69 0-1.25-.56-1.25-1.25v-7.5Z"
  }],
  catalog: [{
    fr: true,
    d: "M14.772 9c-.63 0-1.232.254-1.669.704l-2.628 2.709c-.642.661-.632 1.712.023 2.361l1.79 1.777c.595.59 1.557.6 2.164.02l2.933-2.802c.393-.376.615-.894.615-1.436v-1.34c0-1.1-.899-1.993-2.008-1.993h-1.22Zm.978 3c.414 0 .75-.336.75-.75s-.336-.75-.75-.75-.75.336-.75.75.336.75.75.75Z"
  }, {
    d: "M4.95 6.7c0-1.27 1.03-2.3 2.3-2.3h5.55c1.27 0 2.3 1.03 2.3 2.3v.4c0 .387.313.7.7.7.387 0 .7-.313.7-.7v-.4c0-2.043-1.656-3.7-3.7-3.7h-5.55c-2.043 0-3.7 1.657-3.7 3.7v6.55c0 2.044 1.657 3.7 3.7 3.7h1.75c.387 0 .7-.313.7-.7 0-.386-.313-.7-.7-.7h-1.75c-1.27 0-2.3-1.03-2.3-2.3v-6.55Z"
  }, {
    d: "M7 7c0-.414.336-.75.75-.75h4.5c.414 0 .75.336.75.75s-.336.75-.75.75h-4.5c-.414 0-.75-.336-.75-.75Z"
  }, {
    d: "M7 10c0-.414.336-.75.75-.75h2c.414 0 .75.336.75.75s-.336.75-.75.75h-2c-.414 0-.75-.336-.75-.75Z"
  }],
  caretDown: [{
    fr: true,
    d: "M6.24 8.2a.75.75 0 0 1 1.06.04l2.7 2.908 2.7-2.908a.75.75 0 1 1 1.1 1.02l-3.25 3.5a.75.75 0 0 1-1.1 0l-3.25-3.5a.75.75 0 0 1 .04-1.06Z"
  }],
  caretUp: [{
    fr: true,
    d: "M6.24 11.8a.75.75 0 0 0 1.06-.04l2.7-2.908 2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5a.75.75 0 0 0-1.1 0l-3.25 3.5a.75.75 0 0 0 .04 1.06Z"
  }],
  filter: [{
    d: "M3 6a.75.75 0 0 1 .75-.75h12.5a.75.75 0 0 1 0 1.5h-12.5a.75.75 0 0 1-.75-.75Z"
  }, {
    d: "M6.75 14a.75.75 0 0 1 .75-.75h5a.75.75 0 0 1 0 1.5h-5a.75.75 0 0 1-.75-.75Z"
  }, {
    d: "M5.5 9.25a.75.75 0 0 0 0 1.5h9a.75.75 0 0 0 0-1.5h-9Z"
  }]
};

export const METHODS = [{
  key: "membership",
  title: "Membership",
  description: "Swap items within a plan.",
  icon: "passkey"
}, {
  key: "calendar",
  title: "Calendar",
  description: "Rent for set dates.",
  icon: "calendarTime"
}, {
  key: "subscription",
  title: "Subscription",
  description: "Recurring payments until return.",
  icon: "refresh"
}, {
  key: "resale",
  title: "Resale",
  description: "Purchase item from any condition.",
  icon: "bill"
}, {
  key: "tradein",
  title: "Trade-In",
  description: "Store credit for owned items.",
  icon: "payoutDollar"
}];

export const useToast = () => {
  const [toast, setToast] = useState(null);
  useEffect(() => {
    if (!toast) return undefined;
    const id = setTimeout(() => setToast(null), 2500);
    return () => clearTimeout(id);
  }, [toast]);
  return [toast, setToast];
};

export const SaveBar = ({onDiscard, onSave}) => {
  const {PIcon} = adminCalendarSetupScope();
  return <div className="sca-savebar">
      <span className="sca-savebar-msg"><PIcon name="alertCircle" /> Unsaved changes</span>
      <span style={{
    display: "inline-flex",
    gap: 8
  }}>
        <button type="button" className="sca-sbtn sca-sbtn-dark" onClick={onDiscard}>Discard</button>
        <button type="button" className="sca-sbtn sca-sbtn-light" onClick={onSave} data-tour="save">Save</button>
      </span>
    </div>;
};

export const AdminWindow = ({url, children, saveBar, toast, modal, windowRef, cursor, bind}) => {
  const {PIcon, PInlineStack, SupercycleMark, TourCursor} = adminCalendarSetupScope();
  return <div className="not-prose sca">
      <style>{POLARIS_CSS}</style>
      <style>{ADMIN_CSS}</style>
      <div className="sca-window" ref={windowRef} {...bind || ({})}>
        <div className="sca-titlebar"><span className="sca-dot" /><span className="sca-dot" /><span className="sca-dot" /><span className="sca-url">{url}</span></div>
        <div className="sca-page">
          <div className="sca-zoom">
            {saveBar && <div className="sca-topbar">
                <span className="sca-topbar-logo"><span className="sc-bag"><svg viewBox="0 0 20 20" fill="currentColor"><path d="M13.4 5.2c-.2-.1-.6 0-.6 0s-.9-1-1.2-1.3c-.4-.4-1.1-.3-1.4-.2 0 0-.1 0-.2.1-.3-.9-.8-1.7-1.8-1.7C5.9 2.1 4.6 5 4.2 6.5l-1.5.5c-.5.1-.5.2-.6.6L1 16.2l9.2 1.7 5-1.1L13.4 5.2z" /></svg></span>Shopify</span>
                {saveBar}
                <span className="sca-topbar-store"><span className="sc-av"><SupercycleMark size={11} /></span>Supercycle Demo</span>
              </div>}
            <div className="sca-polaris">
              <div className="sca-appbar">
                <span className="sca-appbar-name"><img className="sca-applogo" src="/images/logo/logomark-dark.svg" alt="" width="20" height="20" />Supercycle</span>
                <PIcon name="menuHorizontal" />
              </div>
              {children}
            </div>
          </div>
        </div>
        {(modal || toast) && <div className="sca-overlay"><div className="sca-zoom"><div className="sca-polaris" style={{
    background: "transparent",
    position: "absolute",
    inset: 0
  }}>
            {modal}
            {toast && <div className="Polaris-Frame-ToastManager" aria-live="polite">
                <div className="Polaris-Frame-ToastManager__ToastWrapper Polaris-Frame-ToastManager--toastWrapperEnterDone" style={{
    "--pc-frame-toast-manager-translate-y-in": "0px",
    "--pc-frame-toast-manager-translate-y-out": "150px",
    "--pc-frame-toast-manager-scale-in": "1"
  }}>
                  <div className="Polaris-Frame-Toast" aria-live="assertive">
                    <PInlineStack gap="400" blockAlign="center"><span className="Polaris-Text--root Polaris-Text--bodyMd Polaris-Text--medium">{toast}</span></PInlineStack>
                    <button type="button" className="Polaris-Frame-Toast__CloseButton"><PIcon name="xSmall" tone="Inherit" /></button>
                  </div>
                </div>
              </div>}
          </div></div></div>}
        {cursor && <TourCursor cursor={cursor} />}
      </div>
    </div>;
};

export const useTour = (windowRef, stepsRef, resetRef) => {
  const [cursor, setCursor] = useState({
    x: 60,
    y: 60,
    visible: false,
    down: false,
    ripple: 0
  });
  const paused = useRef(false);
  const alive = useRef(true);
  useEffect(() => {
    alive.current = true;
    if (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return undefined;
    const run = async () => {
      await sleep(1500);
      while (alive.current) {
        let restart = false;
        const steps = stepsRef.current();
        for (const step of steps) {
          let wasPaused = false;
          while (paused.current && alive.current) {
            wasPaused = true;
            await sleep(200);
          }
          if (!alive.current) return;
          if (wasPaused) {
            restart = true;
            break;
          }
          const el = step.to && windowRef.current && step.to(windowRef.current);
          if (el) {
            const wr = windowRef.current.getBoundingClientRect();
            const r = el.getBoundingClientRect();
            setCursor(c => ({
              ...c,
              visible: true,
              x: r.left + r.width / 2 - wr.left,
              y: r.top + r.height / 2 - wr.top
            }));
            await sleep(780);
            if (!alive.current) return;
            step.pre && step.pre();
            if (step.pre) await sleep(220);
          }
          if (step.click) {
            setCursor(c => ({
              ...c,
              down: true,
              ripple: c.ripple + 1
            }));
            await sleep(140);
            setCursor(c => ({
              ...c,
              down: false
            }));
            step.click();
          }
          if (step.type) {
            const [set, text] = step.type();
            for (let i = 1; i <= text.length; i++) {
              set(text.slice(0, i));
              await sleep(85);
              if (!alive.current) return;
            }
          }
          await sleep(step.hold ?? 900);
        }
        if (!alive.current) return;
        if (!restart) {
          setCursor(c => ({
            ...c,
            visible: false
          }));
          await sleep(700);
        }
        resetRef.current();
        await sleep(restart ? 400 : 1100);
      }
    };
    run();
    return () => {
      alive.current = false;
    };
  }, []);
  const bind = {
    onMouseEnter: () => {
      paused.current = true;
    },
    onMouseLeave: () => {
      paused.current = false;
    }
  };
  return {
    cursor,
    bind
  };
};

export const BorderBox = ({children, padding = "300"}) => {
  const {PBox} = adminCalendarSetupScope();
  return <div className="BorderBox"><PBox borderColor="border" borderWidth="025" borderRadius="200" padding={padding} overflowY="hidden" overflowX="hidden">{children}</PBox></div>;
};

export const PSection = ({variant, children}) => <div className={"Polaris-Layout__Section" + (variant ? " Polaris-Layout__Section--" + variant : "")}>{children}</div>;

export const PLayout = ({children}) => <div className="Polaris-Layout">{children}</div>;

export const PPage = ({title, titleMetadata, subtitle, actions, children}) => {
  const {PBox, PButton, PText} = adminCalendarSetupScope();
  return <div className="Polaris-Page">
      <PBox style={{
    "--pc-box-padding-block-start-xs": sp(400),
    "--pc-box-padding-block-start-md": sp(600),
    "--pc-box-padding-block-end-xs": sp(400),
    "--pc-box-padding-block-end-md": sp(600),
    "--pc-box-padding-inline-start-xs": sp(400),
    "--pc-box-padding-inline-start-sm": sp(0),
    "--pc-box-padding-inline-end-xs": sp(400),
    "--pc-box-padding-inline-end-sm": sp(0),
    position: "relative"
  }}>
        <div className={"Polaris-Page-Header--mediumTitle" + (actions ? "" : " Polaris-Page-Header--isSingleRow")}>
          <div className="Polaris-Page-Header__Row">
            <div className="Polaris-Page-Header__BreadcrumbWrapper">
              <PBox className="Polaris-Box--printHidden" maxWidth="100%" paddingInlineEnd="100"><PButton iconOnly icon="arrowLeft" ariaLabel="Back" /></PBox>
            </div>
            <div className={"Polaris-Page-Header__TitleWrapper" + (actions ? "" : " Polaris-Page-Header__TitleWrapperExpand")}>
              <div className="Polaris-Header-Title__TitleWrapper">
                <h1 className="Polaris-Header-Title"><span className="Polaris-Text--root Polaris-Text--headingLg Polaris-Text--bold">{title}</span></h1>
                {titleMetadata && <div className="Polaris-Header-Title__TitleMetadata">{titleMetadata}</div>}
              </div>
              {subtitle && <div className="Polaris-Header-Title__SubTitle"><PText variant="bodySm" tone="subdued">{subtitle}</PText></div>}
            </div>
            {actions && <div className="Polaris-Page-Header__RightAlign">
                <div className="Polaris-ActionMenu"><div className="Polaris-ActionMenu-Actions__ActionsLayoutOuter"><div className="Polaris-ActionMenu-Actions__ActionsLayout">
                  {actions.map((a, i) => <div key={i} className="Polaris-ActionMenu-SecondaryAction">{a}</div>)}
                </div></div></div>
              </div>}
          </div>
        </div>
      </PBox>
      <div>{children}</div>
    </div>;
};

export const PTabs = ({tabs, selected, right}) => {
  const {PBox, PInlineStack} = adminCalendarSetupScope();
  return <div className="Polaris-Tabs__Outer">
      <PBox style={{
    "--pc-box-padding-block-start-md": sp(200),
    "--pc-box-padding-block-end-md": sp(200),
    "--pc-box-padding-inline-start-md": sp(200),
    "--pc-box-padding-inline-end-md": sp(200)
  }}>
        <PInlineStack align="space-between" blockAlign="center" wrap={false}>
          <div className="Polaris-Tabs__Wrapper"><div className="Polaris-Tabs__ButtonWrapper">
            <ul className="Polaris-Tabs" data-tabs-focus-catchment="true">
              {tabs.map((t, i) => <li key={t} className="Polaris-Tabs__TabContainer" role="presentation">
                  <button className={"Polaris-Tabs__Tab" + (i === selected ? " Polaris-Tabs__Tab--active" : "")} role="tab" type="button" aria-selected={i === selected}>
                    <PInlineStack align="center" blockAlign="center" gap="200" wrap={false}><span className="Polaris-Text--root Polaris-Text--bodySm Polaris-Text--medium">{t}</span></PInlineStack>
                  </button>
                </li>)}
            </ul>
          </div></div>
          {right}
        </PInlineStack>
      </PBox>
    </div>;
};

export const PSelect = ({id, label, options, value, onChange}) => {
  const {PIcon} = adminCalendarSetupScope();
  return <div className="Polaris-Labelled--hidden">
      <div className="Polaris-Labelled__LabelWrapper"><div className="Polaris-Label"><label id={id + "Label"} htmlFor={id} className="Polaris-Label__Text"><span className="Polaris-Text--root Polaris-Text--bodyMd">{label}</span></label></div></div>
      <div className="Polaris-Select">
        <select id={id} className="Polaris-Select__Input" aria-invalid="false" value={value ?? options[0]} onChange={e => onChange && onChange(e.target.value)}>{options.map(o => <option key={o} value={o}>{o}</option>)}</select>
        <div className="Polaris-Select__Content" aria-hidden="true"><span className="Polaris-Select__SelectedOption">{value ?? options[0]}</span><span className="Polaris-Select__Icon"><PIcon name="select" /></span></div>
        <div className="Polaris-Select__Backdrop" />
      </div>
    </div>;
};

export const PTextField = ({id, label, labelHidden, prefix, suffix, value, placeholder, onChange, connectedRight, helpText, disabled, tour}) => {
  const hasValue = value !== undefined && value !== null && value !== "";
  return <div className={labelHidden ? "Polaris-Labelled--hidden" : ""} data-tour={tour}>
      <div className="Polaris-Labelled__LabelWrapper">
        <div className="Polaris-Label">
          <label id={id + "Label"} htmlFor={id} className="Polaris-Label__Text"><span className="Polaris-Text--root Polaris-Text--bodyMd">{label}</span></label>
        </div>
      </div>
      <div className="Polaris-Connected">
        <div className="Polaris-Connected__Item Polaris-Connected__Item--primary">
          <div className={"Polaris-TextField" + (hasValue ? " Polaris-TextField--hasValue" : "") + (disabled ? " Polaris-TextField--disabled" : "")}>
            {prefix && <div className="Polaris-TextField__Prefix" id={id + "-Prefix"}><span className="Polaris-Text--root Polaris-Text--bodyMd">{prefix}</span></div>}
            <input id={id} className={"Polaris-TextField__Input" + (suffix ? " Polaris-TextField__Input--suffixed" : "")} type="text" inputMode="decimal" autoComplete="off" placeholder={placeholder} value={value ?? ""} onChange={e => onChange && onChange(e.target.value)} readOnly={!onChange} disabled={disabled} aria-labelledby={id + "Label"} aria-invalid="false" />
            {suffix && <div className="Polaris-TextField__Suffix" id={id + "-Suffix"}><span className="Polaris-Text--root Polaris-Text--bodyMd">{suffix}</span></div>}
            <div className="Polaris-TextField__Backdrop" />
          </div>
        </div>
        {connectedRight && <div className="Polaris-Connected__Item">{connectedRight}</div>}
      </div>
      {helpText && <div className="Polaris-Labelled__HelpText" id={id + "HelpText"}><span className="Polaris-Text--root Polaris-Text--bodyMd Polaris-Text--break Polaris-Text--subdued">{helpText}</span></div>}
    </div>;
};

export const PLink = ({children, monochrome, removeUnderline, onClick}) => <a className={["Polaris-Link", monochrome && "Polaris-Link--monochrome", removeUnderline && "Polaris-Link--removeUnderline"].filter(Boolean).join(" ")} href="#" onClick={e => {
  e.preventDefault();
  onClick && onClick();
}} data-polaris-unstyled="true">{children}</a>;

export const PButton = ({children, variant = "Secondary", size = "Medium", tone, icon, disclosure, iconOnly, fullWidth, textAlign = "Center", onClick, ariaLabel, role, ariaChecked, id, pressed, tour}) => {
  const {PIcon} = adminCalendarSetupScope();
  const cls = ["Polaris-Button", "Polaris-Button--pressable", "Polaris-Button--variant" + variant, "Polaris-Button--size" + size, "Polaris-Button--textAlign" + textAlign, fullWidth && "Polaris-Button--fullWidth", iconOnly && "Polaris-Button--iconOnly", icon && !iconOnly && "Polaris-Button--iconWithText", disclosure && "Polaris-Button--disclosure", tone && "Polaris-Button--tone" + tone, pressed && "Polaris-Button--pressed"].filter(Boolean).join(" ");
  const textCls = variant === "Primary" ? "Polaris-Text--root Polaris-Text--bodySm Polaris-Text--semibold" : variant === "Plain" ? "Polaris-Text--root Polaris-Text--bodyMd Polaris-Text--regular" : "Polaris-Text--root Polaris-Text--bodySm Polaris-Text--medium";
  return <button type="button" className={cls} onClick={onClick} aria-label={ariaLabel} role={role} aria-checked={ariaChecked} id={id} aria-pressed={pressed} data-tour={tour}>
      {icon && <span className="Polaris-Button__Icon"><PIcon name={icon} /></span>}
      {children !== undefined && children !== null && <span className={textCls}>{children}</span>}
      {disclosure && <span className="Polaris-Button__Icon"><PIcon name="chevronDown" /></span>}
    </button>;
};

export const PDivider = () => <hr className="Polaris-Divider" style={{
  borderBlockStart: "var(--p-border-width-025) solid var(--p-color-border-secondary)"
}} />;

export const PCard = ({padding = "400", children}) => {
  const {PBox} = adminCalendarSetupScope();
  return <div className="Polaris-ShadowBevel" style={{
    "--pc-shadow-bevel-z-index": 32,
    "--pc-shadow-bevel-content-xs": '""',
    "--pc-shadow-bevel-box-shadow-xs": "var(--p-shadow-100)",
    "--pc-shadow-bevel-border-radius-xs": "var(--p-border-radius-0)",
    "--pc-shadow-bevel-border-radius-sm": "var(--p-border-radius-300)"
  }}>
      <PBox background="bg-surface" minHeight="100%" overflowX="clip" overflowY="clip" padding={padding}>{children}</PBox>
    </div>;
};

export const PInlineStack = ({gap, align, blockAlign, wrap = true, children}) => {
  const s = {};
  if (align) s["--pc-inline-stack-align"] = align;
  if (blockAlign) s["--pc-inline-stack-block-align"] = blockAlign;
  s["--pc-inline-stack-wrap"] = wrap ? "wrap" : "nowrap";
  if (gap) s["--pc-inline-stack-gap-xs"] = sp(gap);
  s["--pc-inline-stack-flex-direction-xs"] = "row";
  return <div className="Polaris-InlineStack" style={s}>{children}</div>;
};

export const PBlockStack = ({gap, inlineAlign, role, children}) => {
  const s = {
    "--pc-block-stack-order": "column"
  };
  if (gap) s["--pc-block-stack-gap-xs"] = sp(gap);
  if (inlineAlign) s["--pc-block-stack-inline-align"] = inlineAlign;
  return <div className="Polaris-BlockStack" style={s} role={role}>{children}</div>;
};

export const PBox = p => {
  const Tag = p.as || "div";
  return <Tag className={"Polaris-Box" + (p.className ? " " + p.className : "")} style={boxStyle(p)}>{p.children}</Tag>;
};

export const PText = ({variant, tone, fontWeight, as, truncate, alignment, children, id, className = ""}) => {
  const Tag = as || "p";
  const cls = ["Polaris-Text--root", variant && "Polaris-Text--" + variant, fontWeight && "Polaris-Text--" + fontWeight, tone && "Polaris-Text--" + tone, truncate && "Polaris-Text--block Polaris-Text--truncate", alignment && "Polaris-Text--" + alignment, className].filter(Boolean).join(" ");
  return <Tag className={cls} id={id}>{children}</Tag>;
};

export const PIcon = ({name, tone, paths}) => <span className={"Polaris-Icon" + (tone ? " Polaris-Icon--tone" + tone : "")}>
    <svg viewBox="0 0 20 20" className="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
      {(paths || ICONS[name] || []).map((p, i) => <path key={i} d={p.d} fillRule={p.fr ? "evenodd" : undefined} />)}
    </svg>
  </span>;

export const sp = n => "var(--p-space-" + n + ")";

export const SupercycleMark = ({size = 12}) => <svg viewBox="20.19 33.55 194.46 168.09" width={size} height={size} fill="currentColor" aria-hidden="true">
    <path d="M201.77,131.22l12.66-25.31c.54-1.08.1-2.38-.97-2.92-.3-.15-.63-.23-.97-.23h-10.93c-1.03,0-1.91-.73-2.1-1.74-9.13-45.49-53.4-74.97-98.89-65.84-29.17,5.85-53.06,26.69-62.83,54.79-.39,1.15.24,2.4,1.39,2.79.22.07.46.11.69.11h46.71c1.08-.01,2.03-.74,2.31-1.79,4.06-13.6,16.57-22.92,30.76-22.93,16.99,0,30.9,15.45,32.06,32.33.05,1.2-.88,2.22-2.08,2.27-.04,0-.08,0-.12,0h-18.92c-1.2,0-2.18.97-2.18,2.18,0,.34.08.67.23.97l12.66,25.31c.37.74,1.12,1.2,1.95,1.2h56.63c.82,0,1.58-.47,1.95-1.2" />
    <path d="M33.08,103.96l-12.66,25.31c-.54,1.08-.1,2.38.97,2.92.3.15.63.23.97.23h10.93c1.03,0,1.91.73,2.1,1.74,9.13,45.49,53.41,74.96,98.9,65.83,29.16-5.85,53.05-26.69,62.82-54.78.39-1.15-.24-2.4-1.39-2.79-.22-.07-.46-.11-.69-.11h-46.71c-1.08.01-2.03.74-2.31,1.79-4.06,13.6-16.57,22.92-30.76,22.93-16.99,0-30.9-15.45-32.06-32.33-.05-1.2.88-2.22,2.08-2.27.04,0,.08,0,.12,0h18.92c1.2,0,2.18-.97,2.18-2.18,0-.34-.08-.67-.23-.97l-12.66-25.31c-.37-.74-1.12-1.2-1.95-1.2h-56.63c-.82,0-1.58.47-1.95,1.2" />
  </svg>;

export const POLARIS_CSS = ".sca-polaris{--p-border-radius-0:0rem;--p-border-radius-050:0.125rem;--p-border-radius-100:0.25rem;--p-border-radius-150:0.375rem;--p-border-radius-200:0.5rem;--p-border-radius-300:0.75rem;--p-border-radius-400:1rem;--p-border-radius-500:1.25rem;--p-border-radius-750:1.875rem;--p-border-radius-full:624.9375rem;--p-border-width-0:0rem;--p-border-width-0165:0.04125rem;--p-border-width-025:0.0625rem;--p-border-width-050:0.125rem;--p-border-width-100:0.25rem;--p-breakpoints-xs:0rem;--p-breakpoints-sm:30.625rem;--p-breakpoints-md:48rem;--p-breakpoints-lg:65rem;--p-breakpoints-xl:90rem;color-scheme:light;--p-color-bg:rgba(241, 241, 241, 1);--p-color-bg-inverse:rgba(26, 26, 26, 1);--p-color-bg-surface:rgba(255, 255, 255, 1);--p-color-bg-surface-hover:rgba(247, 247, 247, 1);--p-color-bg-surface-active:rgba(243, 243, 243, 1);--p-color-bg-surface-selected:rgba(241, 241, 241, 1);--p-color-bg-surface-disabled:rgba(0, 0, 0, 0.05);--p-color-bg-surface-secondary:rgba(247, 247, 247, 1);--p-color-bg-surface-secondary-hover:rgba(241, 241, 241, 1);--p-color-bg-surface-secondary-active:rgba(235, 235, 235, 1);--p-color-bg-surface-secondary-selected:rgba(235, 235, 235, 1);--p-color-bg-surface-tertiary:rgba(243, 243, 243, 1);--p-color-bg-surface-tertiary-hover:rgba(235, 235, 235, 1);--p-color-bg-surface-tertiary-active:rgba(227, 227, 227, 1);--p-color-bg-surface-brand:rgba(227, 227, 227, 1);--p-color-bg-surface-brand-hover:rgba(235, 235, 235, 1);--p-color-bg-surface-brand-active:rgba(241, 241, 241, 1);--p-color-bg-surface-brand-selected:rgba(241, 241, 241, 1);--p-color-bg-surface-info:rgba(234, 244, 255, 1);--p-color-bg-surface-info-hover:rgba(224, 240, 255, 1);--p-color-bg-surface-info-active:rgba(202, 230, 255, 1);--p-color-bg-surface-success:rgba(205, 254, 212, 1);--p-color-bg-surface-success-hover:rgba(175, 254, 191, 1);--p-color-bg-surface-success-active:rgba(146, 252, 172, 1);--p-color-bg-surface-caution:rgba(255, 248, 219, 1);--p-color-bg-surface-caution-hover:rgba(255, 244, 191, 1);--p-color-bg-surface-caution-active:rgba(255, 239, 157, 1);--p-color-bg-surface-warning:rgba(255, 241, 227, 1);--p-color-bg-surface-warning-hover:rgba(255, 235, 213, 1);--p-color-bg-surface-warning-active:rgba(255, 228, 198, 1);--p-color-bg-surface-critical:rgba(254, 232, 235, 1);--p-color-bg-surface-critical-hover:rgba(254, 225, 230, 1);--p-color-bg-surface-critical-active:rgba(254, 217, 223, 1);--p-color-bg-surface-emphasis:rgba(240, 242, 255, 1);--p-color-bg-surface-emphasis-hover:rgba(234, 237, 255, 1);--p-color-bg-surface-emphasis-active:rgba(226, 231, 255, 1);--p-color-bg-surface-magic:rgba(248, 247, 255, 1);--p-color-bg-surface-magic-hover:rgba(243, 241, 255, 1);--p-color-bg-surface-magic-active:rgba(233, 229, 255, 1);--p-color-bg-surface-inverse:rgba(48, 48, 48, 1);--p-color-bg-surface-transparent:rgba(0, 0, 0, 0);--p-color-bg-fill:rgba(255, 255, 255, 1);--p-color-bg-fill-hover:rgba(250, 250, 250, 1);--p-color-bg-fill-active:rgba(247, 247, 247, 1);--p-color-bg-fill-selected:rgba(204, 204, 204, 1);--p-color-bg-fill-disabled:rgba(0, 0, 0, 0.05);--p-color-bg-fill-secondary:rgba(241, 241, 241, 1);--p-color-bg-fill-secondary-hover:rgba(235, 235, 235, 1);--p-color-bg-fill-secondary-active:rgba(227, 227, 227, 1);--p-color-bg-fill-secondary-selected:rgba(227, 227, 227, 1);--p-color-bg-fill-tertiary:rgba(227, 227, 227, 1);--p-color-bg-fill-tertiary-hover:rgba(212, 212, 212, 1);--p-color-bg-fill-tertiary-active:rgba(204, 204, 204, 1);--p-color-bg-fill-brand:rgba(48, 48, 48, 1);--p-color-bg-fill-brand-hover:rgba(26, 26, 26, 1);--p-color-bg-fill-brand-active:rgba(26, 26, 26, 1);--p-color-bg-fill-brand-selected:rgba(48, 48, 48, 1);--p-color-bg-fill-brand-disabled:rgba(0, 0, 0, 0.17);--p-color-bg-fill-info:rgba(145, 208, 255, 1);--p-color-bg-fill-info-hover:rgba(81, 192, 255, 1);--p-color-bg-fill-info-active:rgba(0, 148, 213, 1);--p-color-bg-fill-info-secondary:rgba(213, 235, 255, 1);--p-color-bg-fill-success:rgba(4, 123, 93, 1);--p-color-bg-fill-success-hover:rgba(3, 94, 76, 1);--p-color-bg-fill-success-active:rgba(1, 75, 64, 1);--p-color-bg-fill-success-secondary:rgba(175, 254, 191, 1);--p-color-bg-fill-warning:rgba(255, 184, 0, 1);--p-color-bg-fill-warning-hover:rgba(229, 165, 0, 1);--p-color-bg-fill-warning-active:rgba(178, 132, 0, 1);--p-color-bg-fill-warning-secondary:rgba(255, 214, 164, 1);--p-color-bg-fill-caution:rgba(255, 230, 0, 1);--p-color-bg-fill-caution-hover:rgba(234, 211, 0, 1);--p-color-bg-fill-caution-active:rgba(225, 203, 0, 1);--p-color-bg-fill-caution-secondary:rgba(255, 235, 120, 1);--p-color-bg-fill-critical:rgba(199, 10, 36, 1);--p-color-bg-fill-critical-hover:rgba(163, 10, 36, 1);--p-color-bg-fill-critical-active:rgba(142, 11, 33, 1);--p-color-bg-fill-critical-selected:rgba(142, 11, 33, 1);--p-color-bg-fill-critical-secondary:rgba(254, 209, 215, 1);--p-color-bg-fill-emphasis:rgba(0, 91, 211, 1);--p-color-bg-fill-emphasis-hover:rgba(0, 66, 153, 1);--p-color-bg-fill-emphasis-active:rgba(0, 46, 106, 1);--p-color-bg-fill-magic:rgba(128, 81, 255, 1);--p-color-bg-fill-magic-secondary:rgba(233, 229, 255, 1);--p-color-bg-fill-magic-secondary-hover:rgba(228, 222, 255, 1);--p-color-bg-fill-magic-secondary-active:rgba(223, 217, 255, 1);--p-color-bg-fill-inverse:rgba(48, 48, 48, 1);--p-color-bg-fill-inverse-hover:rgba(74, 74, 74, 1);--p-color-bg-fill-inverse-active:rgba(97, 97, 97, 1);--p-color-bg-fill-transparent:rgba(0, 0, 0, 0.02);--p-color-bg-fill-transparent-hover:rgba(0, 0, 0, 0.05);--p-color-bg-fill-transparent-active:rgba(0, 0, 0, 0.08);--p-color-bg-fill-transparent-selected:rgba(0, 0, 0, 0.08);--p-color-bg-fill-transparent-secondary:rgba(0, 0, 0, 0.06);--p-color-bg-fill-transparent-secondary-hover:rgba(0, 0, 0, 0.08);--p-color-bg-fill-transparent-secondary-active:rgba(0, 0, 0, 0.11);--p-color-text:rgba(48, 48, 48, 1);--p-color-text-secondary:rgba(97, 97, 97, 1);--p-color-text-disabled:rgba(181, 181, 181, 1);--p-color-text-link:rgba(0, 91, 211, 1);--p-color-text-link-hover:rgba(0, 66, 153, 1);--p-color-text-link-active:rgba(0, 46, 106, 1);--p-color-text-brand:rgba(74, 74, 74, 1);--p-color-text-brand-hover:rgba(48, 48, 48, 1);--p-color-text-brand-on-bg-fill:rgba(255, 255, 255, 1);--p-color-text-brand-on-bg-fill-hover:rgba(227, 227, 227, 1);--p-color-text-brand-on-bg-fill-active:rgba(204, 204, 204, 1);--p-color-text-brand-on-bg-fill-disabled:rgba(255, 255, 255, 1);--p-color-text-info:rgba(0, 58, 90, 1);--p-color-text-info-hover:rgba(0, 58, 90, 1);--p-color-text-info-active:rgba(0, 33, 51, 1);--p-color-text-info-secondary:rgba(0, 124, 180, 1);--p-color-text-info-on-bg-fill:rgba(0, 33, 51, 1);--p-color-text-success:rgba(1, 75, 64, 1);--p-color-text-success-hover:rgba(7, 54, 48, 1);--p-color-text-success-active:rgba(2, 38, 34, 1);--p-color-text-success-secondary:rgba(4, 123, 93, 1);--p-color-text-success-on-bg-fill:rgba(250, 255, 251, 1);--p-color-text-caution:rgba(79, 71, 0, 1);--p-color-text-caution-hover:rgba(51, 46, 0, 1);--p-color-text-caution-active:rgba(31, 28, 0, 1);--p-color-text-caution-secondary:rgba(130, 117, 0, 1);--p-color-text-caution-on-bg-fill:rgba(51, 46, 0, 1);--p-color-text-warning:rgba(94, 66, 0, 1);--p-color-text-warning-hover:rgba(65, 45, 0, 1);--p-color-text-warning-active:rgba(37, 26, 0, 1);--p-color-text-warning-secondary:rgba(149, 111, 0, 1);--p-color-text-warning-on-bg-fill:rgba(37, 26, 0, 1);--p-color-text-critical:rgba(142, 11, 33, 1);--p-color-text-critical-hover:rgba(95, 7, 22, 1);--p-color-text-critical-active:rgba(47, 4, 11, 1);--p-color-text-critical-secondary:rgba(199, 10, 36, 1);--p-color-text-critical-on-bg-fill:rgba(255, 250, 251, 1);--p-color-text-emphasis:rgba(0, 91, 211, 1);--p-color-text-emphasis-hover:rgba(0, 66, 153, 1);--p-color-text-emphasis-active:rgba(0, 46, 106, 1);--p-color-text-emphasis-on-bg-fill:rgba(252, 253, 255, 1);--p-color-text-emphasis-on-bg-fill-hover:rgba(226, 231, 255, 1);--p-color-text-emphasis-on-bg-fill-active:rgba(213, 220, 255, 1);--p-color-text-magic:rgba(87, 0, 209, 1);--p-color-text-magic-secondary:rgba(113, 38, 255, 1);--p-color-text-magic-on-bg-fill:rgba(253, 253, 255, 1);--p-color-text-inverse:rgba(227, 227, 227, 1);--p-color-text-inverse-secondary:rgba(181, 181, 181, 1);--p-color-text-link-inverse:rgba(197, 208, 255, 1);--p-color-border:rgba(227, 227, 227, 1);--p-color-border-hover:rgba(204, 204, 204, 1);--p-color-border-disabled:rgba(235, 235, 235, 1);--p-color-border-secondary:rgba(235, 235, 235, 1);--p-color-border-tertiary:rgba(204, 204, 204, 1);--p-color-border-focus:rgba(0, 91, 211, 1);--p-color-border-brand:rgba(227, 227, 227, 1);--p-color-border-info:rgba(168, 216, 255, 1);--p-color-border-success:rgba(146, 252, 172, 1);--p-color-border-caution:rgba(255, 235, 120, 1);--p-color-border-warning:rgba(255, 200, 121, 1);--p-color-border-critical:rgba(254, 193, 199, 1);--p-color-border-critical-secondary:rgba(142, 11, 33, 1);--p-color-border-emphasis:rgba(0, 91, 211, 1);--p-color-border-emphasis-hover:rgba(0, 66, 153, 1);--p-color-border-emphasis-active:rgba(0, 46, 106, 1);--p-color-border-magic:rgba(228, 222, 255, 1);--p-color-border-magic-secondary:rgba(148, 116, 255, 1);--p-color-border-magic-secondary-hover:rgba(128, 81, 255, 1);--p-color-border-inverse:rgba(97, 97, 97, 1);--p-color-border-inverse-hover:rgba(204, 204, 204, 1);--p-color-border-inverse-active:rgba(227, 227, 227, 1);--p-color-tooltip-tail-down-border:rgba(212, 212, 212, 1);--p-color-tooltip-tail-up-border:rgba(227, 227, 227, 1);--p-color-icon:rgba(74, 74, 74, 1);--p-color-icon-hover:rgba(48, 48, 48, 1);--p-color-icon-active:rgba(26, 26, 26, 1);--p-color-icon-disabled:rgba(204, 204, 204, 1);--p-color-icon-secondary:rgba(138, 138, 138, 1);--p-color-icon-secondary-hover:rgba(97, 97, 97, 1);--p-color-icon-secondary-active:rgba(74, 74, 74, 1);--p-color-icon-brand:rgba(26, 26, 26, 1);--p-color-icon-info:rgba(0, 148, 213, 1);--p-color-icon-success:rgba(4, 123, 93, 1);--p-color-icon-caution:rgba(153, 138, 0, 1);--p-color-icon-warning:rgba(178, 132, 0, 1);--p-color-icon-critical:rgba(226, 44, 56, 1);--p-color-icon-emphasis:rgba(0, 91, 211, 1);--p-color-icon-emphasis-hover:rgba(0, 66, 153, 1);--p-color-icon-emphasis-active:rgba(0, 46, 106, 1);--p-color-icon-magic:rgba(128, 81, 255, 1);--p-color-icon-inverse:rgba(227, 227, 227, 1);--p-color-avatar-bg-fill:rgba(181, 181, 181, 1);--p-color-avatar-five-bg-fill:rgba(253, 75, 146, 1);--p-color-avatar-five-text-on-bg-fill:rgba(255, 246, 248, 1);--p-color-avatar-four-bg-fill:rgba(81, 192, 255, 1);--p-color-avatar-four-text-on-bg-fill:rgba(0, 33, 51, 1);--p-color-avatar-one-bg-fill:rgba(197, 48, 197, 1);--p-color-avatar-one-text-on-bg-fill:rgba(253, 239, 253, 1);--p-color-avatar-seven-bg-fill:rgba(148, 116, 255, 1);--p-color-avatar-seven-text-on-bg-fill:rgba(248, 247, 255, 1);--p-color-avatar-six-bg-fill:rgba(37, 232, 43, 1);--p-color-avatar-six-text-on-bg-fill:rgba(3, 61, 5, 1);--p-color-avatar-text-on-bg-fill:rgba(255, 255, 255, 1);--p-color-avatar-three-bg-fill:rgba(44, 224, 212, 1);--p-color-avatar-three-text-on-bg-fill:rgba(3, 60, 57, 1);--p-color-avatar-two-bg-fill:rgba(82, 244, 144, 1);--p-color-avatar-two-text-on-bg-fill:rgba(1, 75, 64, 1);--p-color-backdrop-bg:rgba(0, 0, 0, 0.71);--p-color-button-gradient-bg-fill:linear-gradient(180deg, rgba(48, 48, 48, 0) 63.53%, rgba(255, 255, 255, 0.15) 100%);--p-color-checkbox-bg-surface-disabled:rgba(0, 0, 0, 0.08);--p-color-checkbox-icon-disabled:rgba(255, 255, 255, 1);--p-color-input-bg-surface:rgba(253, 253, 253, 1);--p-color-input-bg-surface-hover:rgba(250, 250, 250, 1);--p-color-input-bg-surface-active:rgba(247, 247, 247, 1);--p-color-input-border:rgba(138, 138, 138, 1);--p-color-input-border-hover:rgba(97, 97, 97, 1);--p-color-input-border-active:rgba(26, 26, 26, 1);--p-color-nav-bg:rgba(235, 235, 235, 1);--p-color-nav-bg-surface:rgba(0, 0, 0, 0.02);--p-color-nav-bg-surface-hover:rgba(241, 241, 241, 1);--p-color-nav-bg-surface-active:rgba(250, 250, 250, 1);--p-color-nav-bg-surface-selected:rgba(250, 250, 250, 1);--p-color-radio-button-bg-surface-disabled:rgba(0, 0, 0, 0.08);--p-color-radio-button-icon-disabled:rgba(255, 255, 255, 1);--p-color-video-thumbnail-play-button-bg-fill-hover:rgba(0, 0, 0, 0.81);--p-color-video-thumbnail-play-button-bg-fill:rgba(0, 0, 0, 0.71);--p-color-video-thumbnail-play-button-text-on-bg-fill:rgba(255, 255, 255, 1);--p-color-scrollbar-thumb-bg-hover:rgba(138, 138, 138, 1);--p-color-scrollbar-thumb-bg:rgba(181, 181, 181, 1);--p-font-family-sans:'Inter', -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;--p-font-family-mono:ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;--p-font-size-275:0.6875rem;--p-font-size-300:0.75rem;--p-font-size-325:0.8125rem;--p-font-size-350:0.875rem;--p-font-size-400:1rem;--p-font-size-450:1.125rem;--p-font-size-500:1.25rem;--p-font-size-550:1.375rem;--p-font-size-600:1.5rem;--p-font-size-750:1.875rem;--p-font-size-800:2rem;--p-font-size-900:2.25rem;--p-font-size-1000:2.5rem;--p-font-weight-regular:450;--p-font-weight-medium:550;--p-font-weight-semibold:650;--p-font-weight-bold:700;--p-font-letter-spacing-densest:-0.03375rem;--p-font-letter-spacing-denser:-0.01875rem;--p-font-letter-spacing-dense:-0.0125rem;--p-font-letter-spacing-normal:0rem;--p-font-line-height-300:0.75rem;--p-font-line-height-400:1rem;--p-font-line-height-500:1.25rem;--p-font-line-height-600:1.5rem;--p-font-line-height-700:1.75rem;--p-font-line-height-800:2rem;--p-font-line-height-1000:2.5rem;--p-font-line-height-1200:3rem;--p-height-0:0rem;--p-height-025:0.0625rem;--p-height-050:0.125rem;--p-height-100:0.25rem;--p-height-150:0.375rem;--p-height-200:0.5rem;--p-height-300:0.75rem;--p-height-400:1rem;--p-height-500:1.25rem;--p-height-600:1.5rem;--p-height-700:1.75rem;--p-height-800:2rem;--p-height-900:2.25rem;--p-height-1000:2.5rem;--p-height-1200:3rem;--p-height-1600:4rem;--p-height-2000:5rem;--p-height-2400:6rem;--p-height-2800:7rem;--p-height-3200:8rem;--p-motion-duration-0:0ms;--p-motion-duration-50:50ms;--p-motion-duration-100:100ms;--p-motion-duration-150:150ms;--p-motion-duration-200:200ms;--p-motion-duration-250:250ms;--p-motion-duration-300:300ms;--p-motion-duration-350:350ms;--p-motion-duration-400:400ms;--p-motion-duration-450:450ms;--p-motion-duration-500:500ms;--p-motion-duration-5000:5000ms;--p-motion-ease:cubic-bezier(0.25, 0.1, 0.25, 1);--p-motion-ease-in:cubic-bezier(0.42, 0, 1, 1);--p-motion-ease-out:cubic-bezier(0.19, 0.91, 0.38, 1);--p-motion-ease-in-out:cubic-bezier(0.42, 0, 0.58, 1);--p-motion-linear:cubic-bezier(0, 0, 1, 1);--p-motion-keyframes-bounce:p-motion-keyframes-bounce;--p-motion-keyframes-fade-in:p-motion-keyframes-fade-in;--p-motion-keyframes-pulse:p-motion-keyframes-pulse;--p-motion-keyframes-spin:p-motion-keyframes-spin;--p-motion-keyframes-appear-above:p-motion-keyframes-appear-above;--p-motion-keyframes-appear-below:p-motion-keyframes-appear-below;--p-shadow-0:none;--p-shadow-100:0rem 0.0625rem 0rem 0rem rgba(26, 26, 26, 0.07);--p-shadow-200:0rem 0.1875rem 0.0625rem -0.0625rem rgba(26, 26, 26, 0.07);--p-shadow-300:0rem 0.25rem 0.375rem -0.125rem rgba(26, 26, 26, 0.20);--p-shadow-400:0rem 0.5rem 1rem -0.25rem rgba(26, 26, 26, 0.22);--p-shadow-500:0rem 0.75rem 1.25rem -0.5rem rgba(26, 26, 26, 0.24);--p-shadow-600:0rem 1.25rem 1.25rem -0.5rem rgba(26, 26, 26, 0.28);--p-shadow-bevel-100:0.0625rem 0rem 0rem 0rem rgba(0, 0, 0, 0.13) inset, -0.0625rem 0rem 0rem 0rem rgba(0, 0, 0, 0.13) inset, 0rem -0.0625rem 0rem 0rem rgba(0, 0, 0, 0.17) inset, 0rem 0.0625rem 0rem 0rem rgba(204, 204, 204, 0.5) inset;--p-shadow-inset-100:0rem 0.0625rem 0.125rem 0rem rgba(26, 26, 26, 0.15) inset, 0rem 0.0625rem 0.0625rem 0rem rgba(26, 26, 26, 0.15) inset;--p-shadow-inset-200:0rem 0.125rem 0.0625rem 0rem rgba(26, 26, 26, 0.20) inset, 0.0625rem 0rem 0.0625rem 0rem rgba(26, 26, 26, 0.12) inset, -0.0625rem 0rem 0.0625rem 0rem rgba(26, 26, 26, 0.12) inset;--p-shadow-button:0rem -0.0625rem 0rem 0rem #b5b5b5 inset, 0rem 0rem 0rem 0.0625rem rgba(0, 0, 0, 0.1) inset, 0rem 0.03125rem 0rem 0.09375rem #FFF inset;--p-shadow-button-hover:0rem 0.0625rem 0rem 0rem #EBEBEB inset, -0.0625rem 0rem 0rem 0rem #EBEBEB inset, 0.0625rem 0rem 0rem 0rem #EBEBEB inset, 0rem -0.0625rem 0rem 0rem #CCC inset;--p-shadow-button-inset:-0.0625rem 0rem 0.0625rem 0rem rgba(26, 26, 26, 0.122) inset, 0.0625rem 0rem 0.0625rem 0rem rgba(26, 26, 26, 0.122) inset, 0rem 0.125rem 0.0625rem 0rem rgba(26, 26, 26, 0.2) inset;--p-shadow-button-primary:0rem -0.0625rem 0rem 0.0625rem rgba(0, 0, 0, 0.8) inset, 0rem 0rem 0rem 0.0625rem rgba(48, 48, 48, 1) inset, 0rem 0.03125rem 0rem 0.09375rem rgba(255, 255, 255, 0.25) inset;--p-shadow-button-primary-hover:0rem 0.0625rem 0rem 0rem rgba(255, 255, 255, 0.24) inset, 0.0625rem 0rem 0rem 0rem rgba(255, 255, 255, 0.20) inset, -0.0625rem 0rem 0rem 0rem rgba(255, 255, 255, 0.20) inset, 0rem -0.0625rem 0rem 0rem #000 inset, 0rem -0.0625rem 0rem 0.0625rem #1A1A1A;--p-shadow-button-primary-inset:0rem 0.1875rem 0rem 0rem rgb(0, 0, 0) inset;--p-shadow-button-primary-critical:0rem -0.0625rem 0rem 0.0625rem rgba(142, 31, 11, 0.8) inset, 0rem 0rem 0rem 0.0625rem rgba(181, 38, 11, 0.8) inset, 0rem 0.03125rem 0rem 0.09375rem rgba(255, 255, 255, 0.349) inset;--p-shadow-button-primary-critical-hover:0rem 0.0625rem 0rem 0rem rgba(255, 255, 255, 0.48) inset, 0.0625rem 0rem 0rem 0rem rgba(255, 255, 255, 0.20) inset, -0.0625rem 0rem 0rem 0rem rgba(255, 255, 255, 0.20) inset, 0rem -0.09375rem 0rem 0rem rgba(0, 0, 0, 0.25) inset;--p-shadow-button-primary-critical-inset:-0.0625rem 0rem 0.0625rem 0rem rgba(0, 0, 0, 0.2) inset, 0.0625rem 0rem 0.0625rem 0rem rgba(0, 0, 0, 0.2) inset, 0rem 0.125rem 0rem 0rem rgba(0, 0, 0, 0.6) inset;--p-shadow-button-primary-success:0rem -0.0625rem 0rem 0.0625rem rgba(12, 81, 50, 0.8) inset, 0rem 0rem 0rem 0.0625rem rgba(19, 111, 69, 0.8) inset, 0rem 0.03125rem 0rem 0.09375rem rgba(255, 255, 255, 0.251) inset;--p-shadow-button-primary-success-hover:0rem 0.0625rem 0rem 0rem rgba(255, 255, 255, 0.48) inset, 0.0625rem 0rem 0rem 0rem rgba(255, 255, 255, 0.20) inset, -0.0625rem 0rem 0rem 0rem rgba(255, 255, 255, 0.20) inset, 0rem -0.09375rem 0rem 0rem rgba(0, 0, 0, 0.25) inset;--p-shadow-button-primary-success-inset:-0.0625rem 0rem 0.0625rem 0rem rgba(0, 0, 0, 0.2) inset, 0.0625rem 0rem 0.0625rem 0rem rgba(0, 0, 0, 0.2) inset, 0rem 0.125rem 0rem 0rem rgba(0, 0, 0, 0.6) inset;--p-shadow-border-inset:0rem 0rem 0rem 0.0625rem rgba(0, 0, 0, 0.08) inset;--p-space-0:0rem;--p-space-025:0.0625rem;--p-space-050:0.125rem;--p-space-100:0.25rem;--p-space-150:0.375rem;--p-space-200:0.5rem;--p-space-300:0.75rem;--p-space-400:1rem;--p-space-500:1.25rem;--p-space-600:1.5rem;--p-space-800:2rem;--p-space-1000:2.5rem;--p-space-1200:3rem;--p-space-1600:4rem;--p-space-2000:5rem;--p-space-2400:6rem;--p-space-2800:7rem;--p-space-3200:8rem;--p-space-button-group-gap:var(--p-space-200);--p-space-card-gap:var(--p-space-400);--p-space-card-padding:var(--p-space-400);--p-space-table-cell-padding:var(--p-space-150);--p-text-heading-3xl-font-family:var(--p-font-family-sans);--p-text-heading-3xl-font-size:var(--p-font-size-900);--p-text-heading-3xl-font-weight:var(--p-font-weight-bold);--p-text-heading-3xl-font-letter-spacing:var(--p-font-letter-spacing-densest);--p-text-heading-3xl-font-line-height:var(--p-font-line-height-1200);--p-text-heading-2xl-font-family:var(--p-font-family-sans);--p-text-heading-2xl-font-size:var(--p-font-size-750);--p-text-heading-2xl-font-weight:var(--p-font-weight-bold);--p-text-heading-2xl-font-letter-spacing:var(--p-font-letter-spacing-denser);--p-text-heading-2xl-font-line-height:var(--p-font-line-height-1000);--p-text-heading-xl-font-family:var(--p-font-family-sans);--p-text-heading-xl-font-size:var(--p-font-size-600);--p-text-heading-xl-font-weight:var(--p-font-weight-bold);--p-text-heading-xl-font-letter-spacing:var(--p-font-letter-spacing-dense);--p-text-heading-xl-font-line-height:var(--p-font-line-height-800);--p-text-heading-lg-font-family:var(--p-font-family-sans);--p-text-heading-lg-font-size:var(--p-font-size-500);--p-text-heading-lg-font-weight:var(--p-font-weight-semibold);--p-text-heading-lg-font-letter-spacing:var(--p-font-letter-spacing-dense);--p-text-heading-lg-font-line-height:var(--p-font-line-height-600);--p-text-heading-md-font-family:var(--p-font-family-sans);--p-text-heading-md-font-size:var(--p-font-size-350);--p-text-heading-md-font-weight:var(--p-font-weight-semibold);--p-text-heading-md-font-letter-spacing:var(--p-font-letter-spacing-normal);--p-text-heading-md-font-line-height:var(--p-font-line-height-500);--p-text-heading-sm-font-family:var(--p-font-family-sans);--p-text-heading-sm-font-size:var(--p-font-size-325);--p-text-heading-sm-font-weight:var(--p-font-weight-semibold);--p-text-heading-sm-font-letter-spacing:var(--p-font-letter-spacing-normal);--p-text-heading-sm-font-line-height:var(--p-font-line-height-500);--p-text-heading-xs-font-family:var(--p-font-family-sans);--p-text-heading-xs-font-size:var(--p-font-size-300);--p-text-heading-xs-font-weight:var(--p-font-weight-semibold);--p-text-heading-xs-font-letter-spacing:var(--p-font-letter-spacing-normal);--p-text-heading-xs-font-line-height:var(--p-font-line-height-400);--p-text-body-lg-font-family:var(--p-font-family-sans);--p-text-body-lg-font-size:var(--p-font-size-350);--p-text-body-lg-font-weight:var(--p-font-weight-regular);--p-text-body-lg-font-letter-spacing:var(--p-font-letter-spacing-normal);--p-text-body-lg-font-line-height:var(--p-font-line-height-500);--p-text-body-md-font-family:var(--p-font-family-sans);--p-text-body-md-font-size:var(--p-font-size-325);--p-text-body-md-font-weight:var(--p-font-weight-regular);--p-text-body-md-font-letter-spacing:var(--p-font-letter-spacing-normal);--p-text-body-md-font-line-height:var(--p-font-line-height-500);--p-text-body-sm-font-family:var(--p-font-family-sans);--p-text-body-sm-font-size:var(--p-font-size-300);--p-text-body-sm-font-weight:var(--p-font-weight-regular);--p-text-body-sm-font-letter-spacing:var(--p-font-letter-spacing-normal);--p-text-body-sm-font-line-height:var(--p-font-line-height-400);--p-text-body-xs-font-family:var(--p-font-family-sans);--p-text-body-xs-font-size:var(--p-font-size-275);--p-text-body-xs-font-weight:var(--p-font-weight-regular);--p-text-body-xs-font-letter-spacing:var(--p-font-letter-spacing-normal);--p-text-body-xs-font-line-height:var(--p-font-line-height-300);--p-width-0:0rem;--p-width-025:0.0625rem;--p-width-050:0.125rem;--p-width-100:0.25rem;--p-width-150:0.375rem;--p-width-200:0.5rem;--p-width-300:0.75rem;--p-width-400:1rem;--p-width-500:1.25rem;--p-width-600:1.5rem;--p-width-700:1.75rem;--p-width-800:2rem;--p-width-900:2.25rem;--p-width-1000:2.5rem;--p-width-1200:3rem;--p-width-1600:4rem;--p-width-2000:5rem;--p-width-2400:6rem;--p-width-2800:7rem;--p-width-3200:8rem;--p-z-index-0:auto;--p-z-index-1:100;--p-z-index-2:400;--p-z-index-3:510;--p-z-index-4:512;--p-z-index-5:513;--p-z-index-6:514;--p-z-index-7:515;--p-z-index-8:516;--p-z-index-9:517;--p-z-index-10:518;--p-z-index-11:519;--p-z-index-12:520;}\n\n.sca-polaris .p-theme-light-mobile{--p-color-button-gradient-bg-fill:none;--p-shadow-100:none;--p-shadow-bevel-100:none;--p-shadow-button:0 0 0 var(--p-border-width-025) var(--p-color-border) inset;--p-shadow-button-hover:0 0 0 var(--p-border-width-025) var(--p-color-border) inset;--p-shadow-button-inset:0 0 0 var(--p-border-width-025) var(--p-color-border) inset;--p-shadow-button-primary:none;--p-shadow-button-primary-hover:none;--p-shadow-button-primary-inset:none;--p-shadow-button-primary-critical:none;--p-shadow-button-primary-critical-hover:none;--p-shadow-button-primary-critical-inset:none;--p-shadow-button-primary-success:none;--p-shadow-button-primary-success-hover:none;--p-shadow-button-primary-success-inset:none;--p-space-card-gap:var(--p-space-200);--p-text-heading-2xl-font-size:var(--p-font-size-800);--p-text-heading-xl-font-size:var(--p-font-size-550);--p-text-heading-xl-font-line-height:var(--p-font-line-height-700);--p-text-heading-lg-font-size:var(--p-font-size-450);--p-text-heading-md-font-size:var(--p-font-size-400);--p-text-heading-sm-font-size:var(--p-font-size-350);--p-text-body-lg-font-size:var(--p-font-size-450);--p-text-body-lg-font-line-height:var(--p-font-line-height-700);--p-text-body-md-font-size:var(--p-font-size-400);--p-text-body-md-font-line-height:var(--p-font-line-height-600);--p-text-body-sm-font-size:var(--p-font-size-350);--p-text-body-sm-font-line-height:var(--p-font-line-height-500);--p-text-body-xs-font-size:var(--p-font-size-300);--p-text-body-xs-font-line-height:var(--p-font-line-height-400);}\n\n.sca-polaris .p-theme-light-high-contrast-experimental{--p-color-text:rgba(26, 26, 26, 1);--p-color-text-secondary:rgba(26, 26, 26, 1);--p-color-text-brand:rgba(26, 26, 26, 1);--p-color-icon-secondary:rgba(74, 74, 74, 1);--p-color-border:rgba(138, 138, 138, 1);--p-color-input-border:rgba(74, 74, 74, 1);--p-color-border-secondary:rgba(138, 138, 138, 1);--p-color-bg-surface-secondary:rgba(241, 241, 241, 1);--p-shadow-bevel-100:0rem 0.0625rem 0rem 0rem rgba(26, 26, 26, 0.07), 0rem 0.0625rem 0rem 0rem rgba(208, 208, 208, 0.40) inset, 0.0625rem 0rem 0rem 0rem #CCC inset, -0.0625rem 0rem 0rem 0rem #CCC inset, 0rem -0.0625rem 0rem 0rem #999 inset;}\n\n.sca-polaris .p-theme-dark-experimental{color-scheme:dark;--p-color-bg:rgba(26, 26, 26, 1);--p-color-bg-surface:rgba(48, 48, 48, 1);--p-color-bg-fill:rgba(48, 48, 48, 1);--p-color-icon:rgba(227, 227, 227, 1);--p-color-icon-secondary:rgba(181, 181, 181, 1);--p-color-icon-disabled:rgba(74, 74, 74, 1);--p-color-text:rgba(227, 227, 227, 1);--p-color-text-secondary:rgba(181, 181, 181, 1);--p-color-text-disabled:rgba(74, 74, 74, 1);--p-color-bg-surface-secondary-active:rgba(255, 255, 255, 0.14);--p-color-bg-surface-secondary-hover:rgba(255, 255, 255, 0.06);--p-color-bg-fill-transparent:rgba(255, 255, 255, 0.11);--p-color-bg-fill-brand:rgba(255, 255, 255, 1);--p-color-text-brand-on-bg-fill:rgba(48, 48, 48, 1);--p-color-bg-surface-hover:rgba(74, 74, 74, 1);--p-color-bg-fill-hover:rgba(255, 255, 255, 0.05);--p-color-bg-fill-transparent-hover:rgba(255, 255, 255, 0.14);--p-color-bg-fill-brand-hover:rgba(243, 243, 243, 1);--p-color-bg-surface-selected:rgba(97, 97, 97, 1);--p-color-bg-fill-selected:rgba(97, 97, 97, 1);--p-color-bg-fill-transparent-selected:rgba(255, 255, 255, 0.22);--p-color-bg-fill-brand-selected:rgba(212, 212, 212, 1);--p-color-bg-surface-active:rgba(97, 97, 97, 1);--p-color-bg-fill-active:rgba(97, 97, 97, 1);--p-color-bg-fill-transparent-active:rgba(255, 255, 255, 0.17);--p-color-bg-fill-brand-active:rgba(247, 247, 247, 1);--p-color-bg-fill-secondary:rgba(255, 255, 255, 0.08);--p-color-bg-fill-secondary-hover:rgba(255, 255, 255, 0.11);--p-color-bg-fill-secondary-selected:rgba(255, 255, 255, 0.17);--p-color-bg-surface-brand-selected:rgba(74, 74, 74, 1);--p-color-border-secondary:rgba(74, 74, 74, 1);--p-color-bg-surface-tertiary:rgba(255, 255, 255, 0.08);--p-color-icon-brand:rgba(74, 74, 74, 1);--p-color-bg-fill-disabled:rgba(255, 255, 255, 0.05);--p-color-text-brand-on-bg-fill-disabled:rgba(138, 138, 138, 1);--p-color-bg-fill-brand-disabled:rgba(255, 255, 255, 0.22);--p-color-bg-fill-tertiary:rgba(48, 48, 48, 1);--p-color-tooltip-tail-down-border:rgba(60, 60, 60, 1);--p-color-tooltip-tail-up-border:rgba(71, 71, 71, 1);--p-shadow-bevel-100:0.0625rem 0rem 0rem 0rem rgba(204, 204, 204, 0.08) inset, -0.0625rem 0rem 0rem 0rem rgba(204, 204, 204, 0.08) inset, 0rem -0.0625rem 0rem 0rem rgba(204, 204, 204, 0.08) inset, 0rem 0.0625rem 0rem 0rem rgba(204, 204, 204, 0.16) inset;}\n\n.sca-polaris{\n  --polaris-version-number:'13.9.5';\n\n  --pg-navigation-width:15rem;\n  --pg-dangerous-magic-space-4:1rem;\n  --pg-dangerous-magic-space-5:1.25rem;\n  --pg-dangerous-magic-space-8:2rem;\n\n  --pg-layout-width-primary-min:30rem;\n  --pg-layout-width-primary-max:41.375rem;\n  --pg-layout-width-secondary-min:15rem;\n  --pg-layout-width-secondary-max:20rem;\n  --pg-layout-width-one-half-width-base:28.125rem;\n  --pg-layout-width-one-third-width-base:15rem;\n  --pg-layout-width-nav-base:var(--pg-navigation-width);\n  --pg-layout-width-page-content-partially-condensed:28.125rem;\n  --pg-layout-width-inner-spacing-base:var(--pg-dangerous-magic-space-4);\n  --pg-layout-width-outer-spacing-min:var(--pg-dangerous-magic-space-5);\n  --pg-layout-width-outer-spacing-max:var(--pg-dangerous-magic-space-8);\n  --pg-layout-relative-size:2;\n\n  --pg-dismiss-icon-size:2rem;\n\n  --pg-top-bar-height:3.5rem;\n\n  --pg-mobile-nav-width:calc(100vw - var(--pg-dismiss-icon-size) - var(--pg-dangerous-magic-space-8));\n\n  --pg-control-height:2rem;\n  --pg-control-vertical-padding:calc((2.25rem - var(--p-font-line-height-600) - var(--p-space-050))/2);\n}\n\n.sca-polaris,\n.sca-polaris{\n  font-size:var(--p-font-size-325);\n  line-height:var(--p-font-line-height-500);\n  font-weight:var(--p-font-weight-regular);\n  font-feature-settings:'calt' 0;\n  letter-spacing:initial;\n  color:var(--p-color-text);\n  -webkit-tap-highlight-color:transparent;\n}\n\n.sca-polaris,\n.sca-polaris,\n.sca-polaris button{\n  font-family:var(--p-font-family-sans);\n}\n\n.sca-polaris{\n  position:relative;\n  font-size:100%;\n  -webkit-font-smoothing:antialiased;\n  -moz-osx-font-smoothing:grayscale;\n\n  -webkit-text-size-adjust:100%;\n\n     -moz-text-size-adjust:100%;\n\n          text-size-adjust:100%;\n  text-rendering:optimizeLegibility;\n  scrollbar-width:thin;\n  scrollbar-color:var(--p-color-bg) var(--p-color-bg);\n  transition:scrollbar-color var(--p-motion-duration-100) var(--p-motion-ease-in);\n}\n\n.sca-polaris::-webkit-scrollbar{\n    width:0.6875rem;\n    background-color:var(--p-color-bg);\n  }\n\n.sca-polaris::-webkit-scrollbar-thumb{\n    background-color:var(--p-color-bg);\n    border:var(--p-border-width-050) solid transparent;\n    border-radius:var(--p-border-radius-300);\n    background-clip:content-box;\n  }\n\n.sca-polaris:hover{\n    scrollbar-color:var(--p-color-scrollbar-thumb-bg-hover) var(--p-color-bg);\n  }\n\n.sca-polaris:hover::-webkit-scrollbar-thumb{\n      background-color:var(--p-color-scrollbar-thumb-bg-hover);\n    }\n\n@supports (font: -apple-system-body){\n  @media (max-width: 30.6225em){\n    .sca-polaris{\n      font:-apple-system-body;\n    }\n  }\n}\n\n.sca-polaris{\n  min-height:100%;\n  margin:0;\n  padding:0;\n  background-color:rgba(241, 242, 244, 1);\n  scrollbar-color:var(--p-color-scrollbar-thumb-bg-hover) transparent;\n}\n\n@media print{\n\n.sca-polaris{\n    background-color:transparent !important;\n}\n  }\n\n.sca-polaris *,\n.sca-polaris *::before,\n.sca-polaris *::after{\n  box-sizing:border-box;\n}\n\n.sca-polaris h1,\n.sca-polaris h2,\n.sca-polaris h3,\n.sca-polaris h4,\n.sca-polaris h5,\n.sca-polaris h6,\n.sca-polaris p{\n  margin:0;\n  font-size:1em;\n  font-weight:var(--p-font-weight-regular);\n}\n\n.sca-polaris button::-moz-focus-inner,\n.sca-polaris [type='button']::-moz-focus-inner,\n.sca-polaris [type='reset']::-moz-focus-inner,\n.sca-polaris [type='submit']::-moz-focus-inner{\n  border-style:none;\n}\n\n.sca-polaris[class~='Polaris-Safari-16-Font-Optical-Sizing-Patch']{\n  font-variation-settings:'opsz' 14;\n}\n\n\n.sca-polaris .Polaris-Text--root{\n  margin:0;\n  text-align:inherit;\n}\n\n.sca-polaris .Polaris-Text--block{\n  display:block;\n}\n\n.sca-polaris .Polaris-Text--truncate{\n  overflow:hidden;\n  white-space:nowrap;\n  text-overflow:ellipsis;\n}\n\n.sca-polaris .Polaris-Text--visuallyHidden{\n  position: absolute !important;\n  top: 0;\n  width: 0.0625rem !important;\n  height: 0.0625rem !important;\n  margin: 0 !important;\n  padding: 0 !important;\n  overflow: hidden !important;\n  clip-path: inset(50%) !important;\n  border: 0 !important;\n  white-space: nowrap !important;\n}\n\n.sca-polaris .Polaris-Text--start{\n  text-align:start;\n}\n\n.sca-polaris .Polaris-Text--center{\n  text-align:center;\n}\n\n.sca-polaris .Polaris-Text--end{\n  text-align:end;\n}\n\n.sca-polaris .Polaris-Text--justify{\n  text-align:justify;\n}\n\n.sca-polaris .Polaris-Text--base{\n  color:var(--p-color-text);\n}\n\n.sca-polaris .Polaris-Text--inherit{\n  color:inherit;\n}\n\n.sca-polaris .Polaris-Text--disabled{\n  color:var(--p-color-text-disabled);\n}\n\n.sca-polaris .Polaris-Text--success{\n  color:var(--p-color-text-success);\n}\n\n.sca-polaris .Polaris-Text--critical{\n  color:var(--p-color-text-critical);\n}\n\n.sca-polaris .Polaris-Text--caution{\n  color:var(--p-color-text-caution);\n}\n\n.sca-polaris .Polaris-Text--subdued{\n  color:var(--p-color-text-secondary);\n}\n\n.sca-polaris .Polaris-Text--magic{\n  color:var(--p-color-text-magic);\n}\n\n.sca-polaris .Polaris-Text__magic--subdued{\n  color:var(--p-color-text-magic-secondary);\n}\n\n.sca-polaris .Polaris-Text__text--inverse{\n  color:var(--p-color-text-inverse);\n}\n\n.sca-polaris .Polaris-Text--textInverseSecondary{\n  color:var(--p-color-text-inverse-secondary);\n}\n\n.sca-polaris .Polaris-Text--headingXs{\n  font-size:var(--p-text-heading-xs-font-size);\n  font-weight:var(--p-text-heading-xs-font-weight);\n  letter-spacing:var(--p-text-heading-xs-font-letter-spacing);\n  line-height:var(--p-text-heading-xs-font-line-height);\n}\n\n.sca-polaris .Polaris-Text--headingSm{\n  font-size:var(--p-text-heading-sm-font-size);\n  font-weight:var(--p-text-heading-sm-font-weight);\n  letter-spacing:var(--p-text-heading-sm-font-letter-spacing);\n  line-height:var(--p-text-heading-sm-font-line-height);\n}\n\n.sca-polaris .Polaris-Text--headingMd{\n  font-size:var(--p-text-heading-md-font-size);\n  font-weight:var(--p-text-heading-md-font-weight);\n  letter-spacing:var(--p-text-heading-md-font-letter-spacing);\n  line-height:var(--p-text-heading-md-font-line-height);\n}\n\n.sca-polaris .Polaris-Text--headingLg{\n  font-size:var(--p-text-heading-lg-font-size);\n  font-weight:var(--p-text-heading-lg-font-weight);\n  letter-spacing:var(--p-text-heading-lg-font-letter-spacing);\n  line-height:var(--p-text-heading-lg-font-line-height);\n}\n\n.sca-polaris .Polaris-Text--headingXl{\n  font-size:var(--p-font-size-500);\n  font-weight:var(--p-font-weight-semibold);\n  letter-spacing:var(--p-font-letter-spacing-dense);\n  line-height:var(--p-font-line-height-600);\n}\n\n@media (min-width: 48em){\n\n.sca-polaris .Polaris-Text--headingXl{\n    font-size:var(--p-text-heading-xl-font-size);\n    font-weight:var(--p-text-heading-xl-font-weight);\n    letter-spacing:var(--p-text-heading-xl-font-letter-spacing);\n    line-height:var(--p-text-heading-xl-font-line-height);\n}\n  }\n\n.sca-polaris .Polaris-Text--heading2xl{\n  font-size:var(--p-font-size-600);\n  font-weight:var(--p-font-weight-bold);\n  letter-spacing:var(--p-font-letter-spacing-dense);\n  line-height:var(--p-font-line-height-800);\n}\n\n@media (min-width: 48em){\n\n.sca-polaris .Polaris-Text--heading2xl{\n    font-size:var(--p-text-heading-2xl-font-size);\n    font-weight:var(--p-text-heading-2xl-font-weight);\n    letter-spacing:var(--p-text-heading-2xl-font-letter-spacing);\n    line-height:var(--p-text-heading-2xl-font-line-height);\n}\n  }\n\n.sca-polaris .Polaris-Text--heading3xl{\n  font-size:var(--p-font-size-750);\n  font-weight:var(--p-font-weight-bold);\n  letter-spacing:var(--p-font-letter-spacing-denser);\n  line-height:var(--p-font-line-height-1000);\n}\n\n@media (min-width: 48em){\n\n.sca-polaris .Polaris-Text--heading3xl{\n    font-size:var(--p-text-heading-3xl-font-size);\n    font-weight:var(--p-text-heading-3xl-font-weight);\n    letter-spacing:var(--p-text-heading-3xl-font-letter-spacing);\n    line-height:var(--p-text-heading-3xl-font-line-height);\n}\n  }\n\n.sca-polaris .Polaris-Text--bodyXs{\n  font-size:var(--p-text-body-xs-font-size);\n  font-weight:var(--p-text-body-xs-font-weight);\n  letter-spacing:var(--p-text-body-xs-font-letter-spacing);\n  line-height:var(--p-text-body-xs-font-line-height);\n}\n\n.sca-polaris .Polaris-Text--bodySm{\n  font-size:var(--p-text-body-sm-font-size);\n  font-weight:var(--p-text-body-sm-font-weight);\n  letter-spacing:var(--p-text-body-sm-font-letter-spacing);\n  line-height:var(--p-text-body-sm-font-line-height);\n}\n\n.sca-polaris .Polaris-Text--bodyMd{\n  font-size:var(--p-text-body-md-font-size);\n  font-weight:var(--p-text-body-sm-font-weight);\n  letter-spacing:var(--p-text-body-md-font-letter-spacing);\n  line-height:var(--p-text-body-md-font-line-height);\n}\n\n.sca-polaris .Polaris-Text--bodyLg{\n  font-size:var(--p-text-body-lg-font-size);\n  font-weight:var(--p-text-body-sm-font-weight);\n  letter-spacing:var(--p-text-body-lg-font-letter-spacing);\n  line-height:var(--p-text-body-lg-font-line-height);\n}\n\n.sca-polaris .Polaris-Text--regular{\n  font-weight:var(--p-font-weight-regular);\n}\n\n.sca-polaris .Polaris-Text--medium{\n  font-weight:var(--p-font-weight-medium);\n}\n\n.sca-polaris .Polaris-Text--semibold{\n  font-weight:var(--p-font-weight-semibold);\n}\n\n.sca-polaris .Polaris-Text--bold{\n  font-weight:var(--p-font-weight-bold);\n}\n\n.sca-polaris .Polaris-Text--break{\n  overflow-wrap:anywhere;\n  word-break:normal;\n}\n\n.sca-polaris .Polaris-Text--numeric{\n  font-variant-numeric:tabular-nums lining-nums;\n}\n\n.sca-polaris .Polaris-Text__line--through{\n  -webkit-text-decoration-line:line-through;\n          text-decoration-line:line-through;\n}\n\n\n.sca-polaris .Polaris-Icon{\n  display:block;\n  height:1.25rem;\n  width:1.25rem;\n\n  max-height:100%;\n  max-width:100%;\n  margin:auto;\n}\n\n.sca-polaris .Polaris-Icon svg{\n  fill:currentColor;\n}\n\n.sca-polaris .Polaris-Icon--toneInherit svg{\n  color:inherit;\n}\n\n.sca-polaris .Polaris-Icon--toneBase svg{\n  color:var(--p-color-icon);\n}\n\n.sca-polaris .Polaris-Icon--toneSubdued svg{\n  color:var(--p-color-icon-secondary);\n}\n\n.sca-polaris .Polaris-Icon__Svg,\n.sca-polaris .Polaris-Icon__Img{\n  position:relative;\n  display:block;\n  width:100%;\n  max-width:100%;\n  max-height:100%;\n}\n\n.sca-polaris .Polaris-Icon__Placeholder{\n  padding-bottom:100%;\n  background:var(--p-color-bg-fill-tertiary);\n  border-radius:var(--p-border-radius-100);\n}\n\n\n.sca-polaris .Polaris-Button{\n  --pc-button-gap:var(--p-space-050);\n  --pc-button-bg:transparent;\n  --pc-button-bg_hover:var(--pc-button-bg);\n  --pc-button-bg_active:var(--pc-button-bg);\n  --pc-button-bg_pressed:var(--pc-button-bg_active);\n  --pc-button-bg_disabled:var(--p-color-bg-fill-disabled);\n  --pc-button-color:inherit;\n  --pc-button-color_hover:var(--pc-button-color);\n  --pc-button-color_active:var(--pc-button-color);\n  --pc-button-color_pressed:var(--pc-button-color_active);\n  --pc-button-color_disabled:var(--p-color-text-disabled);\n  --pc-button-box-shadow:transparent;\n  --pc-button-box-shadow_hover:var(--pc-button-box-shadow);\n  --pc-button-box-shadow_active:var(--pc-button-box-shadow);\n  --pc-button-box-shadow_pressed:var(--pc-button-box-shadow_active);\n  --pc-button-box-shadow_disabled:var(--pc-button-box-shadow);\n  --pc-button-icon-fill:currentColor;\n  --pc-button-icon-fill_hover:var(--pc-button-icon-fill);\n  --pc-button-icon-fill_active:var(--pc-button-icon-fill);\n  --pc-button-icon-fill_pressed:var(--pc-button-icon-fill_active);\n  --pc-button-icon-fill_disabled:var(--p-color-icon-disabled);\n  all:unset;\n  position:relative;\n  box-sizing:border-box;\n  display:inline-flex;\n  align-items:center;\n  gap:var(--pc-button-gap);\n  padding:var(--pc-button-padding-block) var(--pc-button-padding-inline);\n  background:var(--pc-button-bg);\n  border:none;\n  border-radius:var(--p-border-radius-200);\n  box-shadow:var(--pc-button-box-shadow);\n  color:var(--pc-button-color);\n  cursor:pointer;\n  -webkit-user-select:none;\n          user-select:none;\n  touch-action:manipulation;\n  -webkit-tap-highlight-color:transparent;\n}\n\n.sca-polaris .Polaris-Button.Polaris-Button svg{\n  fill:var(--pc-button-icon-fill);\n}\n\n.sca-polaris .Polaris-Button.Polaris-Button:hover svg{\n  fill:var(--pc-button-icon-fill_hover);\n}\n\n.sca-polaris .Polaris-Button.Polaris-Button:active,\n.sca-polaris .Polaris-Button.Polaris-Button[data-state='open'] svg{\n  fill:var(--pc-button-icon-fill_active);\n}\n\n.sca-polaris .Polaris-Button.Polaris-Button:disabled,\n.sca-polaris .Polaris-Button.Polaris-Button[disabled],\n.sca-polaris .Polaris-Button--disabled.Polaris-Button--disabled svg{\n  fill:var(--pc-button-icon-fill_disabled);\n}\n\n.sca-polaris .Polaris-Button--pressed.Polaris-Button--pressed,\n.sca-polaris .Polaris-Button--pressed.Polaris-Button--pressed:hover,\n.sca-polaris .Polaris-Button--pressed.Polaris-Button--pressed:active,\n.sca-polaris .Polaris-Button--pressed.Polaris-Button--pressed:focus-visible svg{\n  fill:var(--pc-button-icon-fill_pressed);\n}\n\n.sca-polaris .Polaris-Button:hover{\n  background:var(--pc-button-bg_hover);\n  color:var(--pc-button-color_hover);\n  box-shadow:var(--pc-button-box-shadow_hover);\n}\n\n.sca-polaris .Polaris-Button:active,\n.sca-polaris .Polaris-Button[data-state='open']{\n  background:var(--pc-button-bg_active);\n  color:var(--pc-button-color_active);\n  box-shadow:var(--pc-button-box-shadow_active);\n}\n\n.sca-polaris .Polaris-Button:focus-visible{\n  background:var(--pc-button-bg_hover);\n  color:var(--pc-button-color_hover);\n  outline:var(--p-border-width-050) solid var(--p-color-border-focus);\n  outline-offset:var(--p-space-025);\n}\n\n.sca-polaris .Polaris-Button:focus-visible::after{\n    content:none;\n  }\n\n.sca-polaris .Polaris-Button:disabled,\n.sca-polaris .Polaris-Button[disabled],\n.sca-polaris .Polaris-Button--disabled{\n  background:var(--pc-button-bg_disabled);\n  color:var(--pc-button-color_disabled);\n  box-shadow:none;\n  -webkit-user-select:none;\n          user-select:none;\n  pointer-events:none;\n}\n\n.sca-polaris .Polaris-Button--pressed,\n.sca-polaris .Polaris-Button--pressed:hover,\n.sca-polaris .Polaris-Button--pressed:active,\n.sca-polaris .Polaris-Button--pressed:focus-visible{\n  background:var(--pc-button-bg_pressed);\n  color:var(--pc-button-color_pressed);\n  box-shadow:var(--pc-button-box-shadow_pressed);\n}\n\n.sca-polaris .Polaris-Button--variantPrimary{\n  --pc-button-bg-gradient:var(--p-color-button-gradient-bg-fill);\n  --pc-button-box-shadow:var(--p-shadow-button-primary);\n  --pc-button-box-shadow_active:var(--p-shadow-button-primary-inset);\n  --pc-button-bg:var(--pc-button-bg-gradient), var(--p-color-bg-fill-brand);\n  --pc-button-bg_hover:var(--pc-button-bg-gradient), var(--p-color-bg-fill-brand-hover);\n  --pc-button-bg_active:var(--pc-button-bg-gradient), var(--p-color-bg-fill-brand-active);\n  --pc-button-bg_disabled:var(--p-color-bg-fill-brand-disabled);\n  --pc-button-color:var(--p-color-text-brand-on-bg-fill);\n  --pc-button-color_disabled:var(--p-color-text-brand-on-bg-fill-disabled);\n  --pc-button-icon-fill:var(--p-color-text-brand-on-bg-fill);\n  --pc-button-icon-fill_disabled:var(--p-color-text-brand-on-bg-fill-disabled);\n}\n\n.sca-polaris .Polaris-Button--variantSecondary{\n  --pc-button-box-shadow:var(--p-shadow-button);\n  --pc-button-box-shadow_active:var(--p-shadow-button-inset);\n  --pc-button-bg:var(--p-color-bg-fill);\n  --pc-button-bg_hover:var(--p-color-bg-fill-hover);\n  --pc-button-bg_active:var(--p-color-bg-fill-active);\n  --pc-button-bg_pressed:var(--p-color-bg-fill-selected);\n  --pc-button-color:var(--p-color-text);\n  --pc-button-icon-fill:var(--p-color-icon);\n}\n\n.sca-polaris .Polaris-Button--variantTertiary{\n  --pc-button-bg_hover:var(--p-color-bg-fill-transparent-hover);\n  --pc-button-bg_active:var(--p-color-bg-fill-transparent-active);\n  --pc-button-bg_pressed:var(--p-color-bg-fill-selected);\n  --pc-button-bg_disabled:transparent;\n  --pc-button-color:var(--p-color-text);\n  --pc-button-icon-fill:var(--p-color-icon);\n}\n\n.sca-polaris .Polaris-Button--variantPlain{\n  --pc-button-color:var(--p-color-text-link);\n  --pc-button-color_hover:var(--p-color-text-link-hover);\n  --pc-button-color_active:var(--p-color-text-link-active);\n}\n\n.sca-polaris .Polaris-Button--variantPlain:is(:hover, :active, :focus-visible):not(.Polaris-Button--removeUnderline){\n  text-decoration:underline;\n}\n\n.sca-polaris .Polaris-Button--variantPlain{\n  --pc-button-bg_disabled:transparent;\n  margin:calc(var(--pc-button-padding-block)*-1) calc(var(--pc-button-padding-inline)*-1);\n}\n\n.sca-polaris .Polaris-Button--variantPlain:focus-visible{\n  border-radius:var(--p-border-radius-300);\n  outline-offset:calc(var(--pc-button-padding-block)*-1);\n}\n\n.sca-polaris .Polaris-Button--toneSuccess:is(.Polaris-Button--variantSecondary, .Polaris-Button--variantTertiary, .Polaris-Button--variantPlain){\n  --pc-button-color:var(--p-color-text-success);\n  --pc-button-color_hover:var(--p-color-text-success-hover);\n  --pc-button-color_active:var(--p-color-text-success-active);\n  --pc-button-icon-fill:currentColor;\n}\n\n.sca-polaris .Polaris-Button--toneCritical:is(.Polaris-Button--variantSecondary, .Polaris-Button--variantTertiary, .Polaris-Button--variantPlain){\n  --pc-button-color:var(--p-color-text-critical);\n  --pc-button-color_hover:var(--p-color-text-critical-hover);\n  --pc-button-color_active:var(--p-color-text-critical-active);\n  --pc-button-icon-fill:currentColor;\n}\n\n.sca-polaris .Polaris-Button--toneSuccess:is(.Polaris-Button--variantPrimary){\n  --pc-button-box-shadow:var(--p-shadow-button-primary-success);\n  --pc-button-box-shadow_active:var(--p-shadow-button-primary-success-inset);\n  --pc-button-bg:var(--p-color-bg-fill-success);\n  --pc-button-bg_hover:var(--p-color-bg-fill-success-hover);\n  --pc-button-bg_active:var(--p-color-bg-fill-success-active);\n  --pc-button-bg_pressed:var(--p-color-bg-fill-success-selected);\n}\n\n.sca-polaris .Polaris-Button--toneCritical:is(.Polaris-Button--variantPrimary){\n  --pc-button-box-shadow:var(--p-shadow-button-primary-critical);\n  --pc-button-box-shadow_active:var(--p-shadow-button-primary-critical-inset);\n  --pc-button-bg:var(--p-color-bg-fill-critical);\n  --pc-button-bg_hover:var(--p-color-bg-fill-critical-hover);\n  --pc-button-bg_active:var(--p-color-bg-fill-critical-active);\n  --pc-button-bg_pressed:var(--p-color-bg-fill-critical-selected);\n}\n\n.sca-polaris .Polaris-Button--sizeMicro{\n  --pc-button-padding-block:var(--p-space-100);\n  --pc-button-padding-inline:var(--p-space-200);\n  min-height:var(--p-height-700);\n  min-width:var(--p-width-700);\n}\n\n@media (min-width: 48em){\n\n.sca-polaris .Polaris-Button--sizeMicro{\n    min-height:var(--p-height-600);\n    min-width:var(--p-width-600);\n}\n  }\n\n.sca-polaris .Polaris-Button--sizeSlim,\n.sca-polaris .Polaris-Button--sizeMedium{\n  --pc-button-padding-block:var(--p-space-150);\n  --pc-button-padding-inline:var(--p-space-300);\n  min-height:var(--p-height-800);\n  min-width:var(--p-width-800);\n}\n\n@media (min-width: 48em){\n\n.sca-polaris .Polaris-Button--sizeSlim,\n.sca-polaris .Polaris-Button--sizeMedium{\n    min-height:var(--p-height-700);\n    min-width:var(--p-width-700);\n}\n  }\n\n.sca-polaris .Polaris-Button--sizeLarge{\n  --pc-button-padding-block:var(--p-space-150);\n  --pc-button-padding-inline:var(--p-space-300);\n  min-height:var(--p-height-900);\n  min-width:var(--p-height-900);\n}\n\n@media (min-width: 48em){\n\n.sca-polaris .Polaris-Button--sizeLarge{\n    min-height:var(--p-height-800);\n    min-width:var(--p-width-800);\n}\n  }\n\n.sca-polaris .Polaris-Button--textAlignCenter{\n  justify-content:center;\n  text-align:center;\n}\n\n.sca-polaris .Polaris-Button--textAlignStart,\n.sca-polaris .Polaris-Button--textAlignLeft{\n  justify-content:start;\n  text-align:start;\n}\n\n.sca-polaris .Polaris-Button--textAlignEnd,\n.sca-polaris .Polaris-Button--textAlignRight{\n  justify-content:end;\n  text-align:end;\n}\n\n.sca-polaris .Polaris-Button--fullWidth{\n  width:100%;\n}\n\n.sca-polaris .Polaris-Button--iconOnly{\n  --pc-button-padding-block:var(--p-space-100);\n  --pc-button-padding-inline:var(--p-space-100);\n}\n\n.sca-polaris .Polaris-Button--iconOnly:is(.Polaris-Button--sizeLarge){\n  --pc-button-padding-block:var(--p-space-150);\n  --pc-button-padding-inline:var(--p-space-150);\n}\n\n.sca-polaris .Polaris-Button--iconOnly:is(.Polaris-Button--sizeMicro){\n  --pc-button-padding-block:var(--p-space-050);\n  --pc-button-padding-inline:var(--p-space-050);\n}\n\n.sca-polaris .Polaris-Button--iconOnly:is(.Polaris-Button--variantTertiary){\n  margin:calc(var(--pc-button-padding-block)*-1) calc(var(--pc-button-padding-inline)*-1);\n}\n\n.sca-polaris .Polaris-Button--iconOnly:is(.Polaris-Button--variantTertiary, .Polaris-Button--variantPlain):not(.Polaris-Button--toneCritical){\n  --pc-button-icon-fill:var(--p-color-icon-secondary);\n  --pc-button-icon-fill_hover:var(--p-color-icon-secondary-hover);\n  --pc-button-icon-fill_active:var(--p-color-icon-secondary-active);\n  --pc-button-icon-fill_disabled:var(--p-color-icon-disabled);\n}\n\n.sca-polaris .Polaris-Button--disclosure:is(.Polaris-Button--textAlignStart, .Polaris-Button--textAlignLeft){\n  justify-content:space-between;\n}\n\n.sca-polaris .Polaris-Button--hidden{\n  visibility:hidden;\n}\n\n.sca-polaris .Polaris-Button__Icon{\n  margin:calc(var(--p-space-050)*-1) 0;\n}\n\n.sca-polaris [data-buttongroup-variant='segmented']\n  > *:not(:first-child)\n  .Polaris-Button:is(.Polaris-Button--variantPrimary){\n  margin-left:calc(var(--p-space-025)*-1);\n}\n\n.sca-polaris [data-buttongroup-variant='segmented'] > *:not(:first-child) .Polaris-Button{\n  border-top-left-radius:var(--p-border-radius-0);\n  border-bottom-left-radius:var(--p-border-radius-0);\n}\n\n.sca-polaris [data-buttongroup-variant='segmented'] > *:not(:last-child) .Polaris-Button{\n  border-top-right-radius:var(--p-border-radius-0);\n  border-bottom-right-radius:var(--p-border-radius-0);\n}\n\n.sca-polaris [data-buttongroup-full-width='true'] .Polaris-Button{\n  width:100%;\n}\n\n@media (min-width: 48em){\n\n.sca-polaris [data-buttongroup-full-width='true'] .Polaris-Button{\n    white-space:nowrap;\n}\n  }\n\n.sca-polaris [data-buttongroup-connected-top='true'] > *:first-child .Polaris-Button{\n  border-top-left-radius:var(--p-border-radius-0);\n}\n\n.sca-polaris [data-buttongroup-connected-top='true'] > *:last-child .Polaris-Button{\n  border-top-right-radius:var(--p-border-radius-0);\n}\n\n\n.sca-polaris .Polaris-Box--listReset{\n  list-style-type:none;\n  margin-block-start:0;\n  margin-block-end:0;\n  outline:none;\n  padding-inline-start:0;\n}\n\n.sca-polaris .Polaris-Box{\n  --pc-box-padding-block-end-xs: initial;\n  --pc-box-padding-block-end-sm: initial;\n  --pc-box-padding-block-end-md: initial;\n  --pc-box-padding-block-end-lg: initial;\n  --pc-box-padding-block-end-xl: initial;\n  padding-block-end: var(--pc-box-padding-block-end-xs);\n  --pc-box-padding-block-start-xs: initial;\n  --pc-box-padding-block-start-sm: initial;\n  --pc-box-padding-block-start-md: initial;\n  --pc-box-padding-block-start-lg: initial;\n  --pc-box-padding-block-start-xl: initial;\n  padding-block-start: var(--pc-box-padding-block-start-xs);\n  --pc-box-padding-inline-start-xs: initial;\n  --pc-box-padding-inline-start-sm: initial;\n  --pc-box-padding-inline-start-md: initial;\n  --pc-box-padding-inline-start-lg: initial;\n  --pc-box-padding-inline-start-xl: initial;\n  padding-inline-start: var(--pc-box-padding-inline-start-xs);\n  --pc-box-padding-inline-end-xs: initial;\n  --pc-box-padding-inline-end-sm: initial;\n  --pc-box-padding-inline-end-md: initial;\n  --pc-box-padding-inline-end-lg: initial;\n  --pc-box-padding-inline-end-xl: initial;\n  padding-inline-end: var(--pc-box-padding-inline-end-xs);\n  --pc-box-shadow:initial;\n  --pc-box-background:initial;\n  --pc-box-border-radius:initial;\n  --pc-box-border-end-start-radius:var(--pc-box-border-radius);\n  --pc-box-border-end-end-radius:var(--pc-box-border-radius);\n  --pc-box-border-start-start-radius:var(--pc-box-border-radius);\n  --pc-box-border-start-end-radius:var(--pc-box-border-radius);\n  --pc-box-color:initial;\n  --pc-box-min-height:initial;\n  --pc-box-min-width:initial;\n  --pc-box-max-width:initial;\n  --pc-box-outline-color:initial;\n  --pc-box-outline-style:initial;\n  --pc-box-outline-width:initial;\n  --pc-box-overflow-x:initial;\n  --pc-box-overflow-y:initial;\n  --pc-box-width:initial;\n  --pc-box-border-style:initial;\n  --pc-box-border-color:initial;\n  --pc-box-border-width:0;\n  --pc-box-border-block-start-width:var(--pc-box-border-width);\n  --pc-box-border-block-end-width:var(--pc-box-border-width);\n  --pc-box-border-inline-start-width:var(--pc-box-border-width);\n  --pc-box-border-inline-end-width:var(--pc-box-border-width);\n  --pc-box-inset-block-start:initial;\n  --pc-box-inset-block-end:initial;\n  --pc-box-inset-inline-start:initial;\n  --pc-box-inset-inline-end:initial;\n  inset-block-start:var(--pc-box-inset-block-start);\n  inset-block-end:var(--pc-box-inset-block-end);\n  inset-inline-start:var(--pc-box-inset-inline-start);\n  inset-inline-end:var(--pc-box-inset-inline-end);\n  background-color:var(--pc-box-background);\n  box-shadow:var(--pc-box-shadow);\n  border-end-start-radius:var(--pc-box-border-end-start-radius);\n  border-end-end-radius:var(--pc-box-border-end-end-radius);\n  border-start-start-radius:var(--pc-box-border-start-start-radius);\n  border-start-end-radius:var(--pc-box-border-start-end-radius);\n  border-color:var(--pc-box-border-color);\n  border-style:var(--pc-box-border-style);\n  border-block-start-width:var(--pc-box-border-block-start-width);\n  border-block-end-width:var(--pc-box-border-block-end-width);\n  border-inline-start-width:var(--pc-box-border-inline-start-width);\n  border-inline-end-width:var(--pc-box-border-inline-end-width);\n  color:var(--pc-box-color);\n  min-height:var(--pc-box-min-height);\n  min-width:var(--pc-box-min-width);\n  max-width:var(--pc-box-max-width);\n  outline-color:var(--pc-box-outline-color);\n  outline-style:var(--pc-box-outline-style);\n  outline-width:var(--pc-box-outline-width);\n  overflow-x:var(--pc-box-overflow-x);\n  overflow-y:var(--pc-box-overflow-y);\n  width:var(--pc-box-width);\n  -webkit-overflow-scrolling:touch;\n}\n\n@media (min-width: 30.625em) {\n\n.sca-polaris .Polaris-Box{\n    padding-block-end: var(\n        --pc-box-padding-block-end-sm,\n        var(--pc-box-padding-block-end-xs)\n      );\n}\n}\n\n@media (min-width: 48em) {\n\n.sca-polaris .Polaris-Box{\n    padding-block-end: var(\n        --pc-box-padding-block-end-md,\n        var(\n          --pc-box-padding-block-end-sm,\n          var(--pc-box-padding-block-end-xs)\n        )\n      );\n}\n}\n\n@media (min-width: 65em) {\n\n.sca-polaris .Polaris-Box{\n    padding-block-end: var(\n        --pc-box-padding-block-end-lg,\n        var(\n          --pc-box-padding-block-end-md,\n          var(\n            --pc-box-padding-block-end-sm,\n            var(--pc-box-padding-block-end-xs)\n          )\n        )\n      );\n}\n}\n\n@media (min-width: 90em) {\n\n.sca-polaris .Polaris-Box{\n    padding-block-end: var(\n        --pc-box-padding-block-end-xl,\n        var(\n          --pc-box-padding-block-end-lg,\n          var(\n            --pc-box-padding-block-end-md,\n            var(\n              --pc-box-padding-block-end-sm,\n              var(--pc-box-padding-block-end-xs)\n            )\n          )\n        )\n      );\n}\n}\n\n@media (min-width: 30.625em) {\n\n.sca-polaris .Polaris-Box{\n    padding-block-start: var(\n        --pc-box-padding-block-start-sm,\n        var(--pc-box-padding-block-start-xs)\n      );\n}\n}\n\n@media (min-width: 48em) {\n\n.sca-polaris .Polaris-Box{\n    padding-block-start: var(\n        --pc-box-padding-block-start-md,\n        var(\n          --pc-box-padding-block-start-sm,\n          var(--pc-box-padding-block-start-xs)\n        )\n      );\n}\n}\n\n@media (min-width: 65em) {\n\n.sca-polaris .Polaris-Box{\n    padding-block-start: var(\n        --pc-box-padding-block-start-lg,\n        var(\n          --pc-box-padding-block-start-md,\n          var(\n            --pc-box-padding-block-start-sm,\n            var(--pc-box-padding-block-start-xs)\n          )\n        )\n      );\n}\n}\n\n@media (min-width: 90em) {\n\n.sca-polaris .Polaris-Box{\n    padding-block-start: var(\n        --pc-box-padding-block-start-xl,\n        var(\n          --pc-box-padding-block-start-lg,\n          var(\n            --pc-box-padding-block-start-md,\n            var(\n              --pc-box-padding-block-start-sm,\n              var(--pc-box-padding-block-start-xs)\n            )\n          )\n        )\n      );\n}\n}\n\n@media (min-width: 30.625em) {\n\n.sca-polaris .Polaris-Box{\n    padding-inline-start: var(\n        --pc-box-padding-inline-start-sm,\n        var(--pc-box-padding-inline-start-xs)\n      );\n}\n}\n\n@media (min-width: 48em) {\n\n.sca-polaris .Polaris-Box{\n    padding-inline-start: var(\n        --pc-box-padding-inline-start-md,\n        var(\n          --pc-box-padding-inline-start-sm,\n          var(--pc-box-padding-inline-start-xs)\n        )\n      );\n}\n}\n\n@media (min-width: 65em) {\n\n.sca-polaris .Polaris-Box{\n    padding-inline-start: var(\n        --pc-box-padding-inline-start-lg,\n        var(\n          --pc-box-padding-inline-start-md,\n          var(\n            --pc-box-padding-inline-start-sm,\n            var(--pc-box-padding-inline-start-xs)\n          )\n        )\n      );\n}\n}\n\n@media (min-width: 90em) {\n\n.sca-polaris .Polaris-Box{\n    padding-inline-start: var(\n        --pc-box-padding-inline-start-xl,\n        var(\n          --pc-box-padding-inline-start-lg,\n          var(\n            --pc-box-padding-inline-start-md,\n            var(\n              --pc-box-padding-inline-start-sm,\n              var(--pc-box-padding-inline-start-xs)\n            )\n          )\n        )\n      );\n}\n}\n\n@media (min-width: 30.625em) {\n\n.sca-polaris .Polaris-Box{\n    padding-inline-end: var(\n        --pc-box-padding-inline-end-sm,\n        var(--pc-box-padding-inline-end-xs)\n      );\n}\n}\n\n@media (min-width: 48em) {\n\n.sca-polaris .Polaris-Box{\n    padding-inline-end: var(\n        --pc-box-padding-inline-end-md,\n        var(\n          --pc-box-padding-inline-end-sm,\n          var(--pc-box-padding-inline-end-xs)\n        )\n      );\n}\n}\n\n@media (min-width: 65em) {\n\n.sca-polaris .Polaris-Box{\n    padding-inline-end: var(\n        --pc-box-padding-inline-end-lg,\n        var(\n          --pc-box-padding-inline-end-md,\n          var(\n            --pc-box-padding-inline-end-sm,\n            var(--pc-box-padding-inline-end-xs)\n          )\n        )\n      );\n}\n}\n\n@media (min-width: 90em) {\n\n.sca-polaris .Polaris-Box{\n    padding-inline-end: var(\n        --pc-box-padding-inline-end-xl,\n        var(\n          --pc-box-padding-inline-end-lg,\n          var(\n            --pc-box-padding-inline-end-md,\n            var(\n              --pc-box-padding-inline-end-sm,\n              var(--pc-box-padding-inline-end-xs)\n            )\n          )\n        )\n      );\n}\n}\n\n.sca-polaris .Polaris-Box--visuallyHidden{\n  position: absolute !important;\n  top: 0;\n  width: 0.0625rem !important;\n  height: 0.0625rem !important;\n  margin: 0 !important;\n  padding: 0 !important;\n  overflow: hidden !important;\n  clip-path: inset(50%) !important;\n  border: 0 !important;\n  white-space: nowrap !important;\n}\n\n@media print{\n\n.sca-polaris .Polaris-Box--printHidden{\n    display:none !important;\n}\n  }\n\n\n.sca-polaris .Polaris-ShadowBevel{\n  overflow:clip;\n  z-index:0;\n\n  --pc-shadow-bevel-z-index: initial;\n\n  --pc-shadow-bevel-box-shadow-xs: initial;\n\n  --pc-shadow-bevel-box-shadow-sm: initial;\n\n  --pc-shadow-bevel-box-shadow-md: initial;\n\n  --pc-shadow-bevel-box-shadow-lg: initial;\n\n  --pc-shadow-bevel-box-shadow-xl: initial;\n\n  --pc-shadow-bevel-box-shadow: var(--pc-shadow-bevel-box-shadow-xs);\n  --pc-shadow-bevel-border-radius-xs: initial;\n  --pc-shadow-bevel-border-radius-sm: initial;\n  --pc-shadow-bevel-border-radius-md: initial;\n  --pc-shadow-bevel-border-radius-lg: initial;\n  --pc-shadow-bevel-border-radius-xl: initial;\n  --pc-shadow-bevel-border-radius: var(--pc-shadow-bevel-border-radius-xs);\n  --pc-shadow-bevel-content-xs: initial;\n  --pc-shadow-bevel-content-sm: initial;\n  --pc-shadow-bevel-content-md: initial;\n  --pc-shadow-bevel-content-lg: initial;\n  --pc-shadow-bevel-content-xl: initial;\n  --pc-shadow-bevel-content: var(--pc-shadow-bevel-content-xs);\n\n  position: relative;\n\n  box-shadow: var(--pc-shadow-bevel-box-shadow);\n\n  border-radius: var(--pc-shadow-bevel-border-radius);\n}\n@media (min-width: 30.625em) {\n  .sca-polaris .Polaris-ShadowBevel{\n    --pc-shadow-bevel-box-shadow: var(\n        --pc-shadow-bevel-box-shadow-sm,\n        var(--pc-shadow-bevel-box-shadow-xs)\n      );\n}\n}\n@media (min-width: 48em) {\n  .sca-polaris .Polaris-ShadowBevel{\n    --pc-shadow-bevel-box-shadow: var(\n        --pc-shadow-bevel-box-shadow-md,\n        var(\n          --pc-shadow-bevel-box-shadow-sm,\n          var(--pc-shadow-bevel-box-shadow-xs)\n        )\n      );\n}\n}\n@media (min-width: 65em) {\n  .sca-polaris .Polaris-ShadowBevel{\n    --pc-shadow-bevel-box-shadow: var(\n        --pc-shadow-bevel-box-shadow-lg,\n        var(\n          --pc-shadow-bevel-box-shadow-md,\n          var(\n            --pc-shadow-bevel-box-shadow-sm,\n            var(--pc-shadow-bevel-box-shadow-xs)\n          )\n        )\n      );\n}\n}\n@media (min-width: 90em) {\n  .sca-polaris .Polaris-ShadowBevel{\n    --pc-shadow-bevel-box-shadow: var(\n        --pc-shadow-bevel-box-shadow-xl,\n        var(\n          --pc-shadow-bevel-box-shadow-lg,\n          var(\n            --pc-shadow-bevel-box-shadow-md,\n            var(\n              --pc-shadow-bevel-box-shadow-sm,\n              var(--pc-shadow-bevel-box-shadow-xs)\n            )\n          )\n        )\n      );\n}\n}\n@media (min-width: 30.625em) {\n  .sca-polaris .Polaris-ShadowBevel{\n    --pc-shadow-bevel-border-radius: var(\n        --pc-shadow-bevel-border-radius-sm,\n        var(--pc-shadow-bevel-border-radius-xs)\n      );\n}\n}\n@media (min-width: 48em) {\n  .sca-polaris .Polaris-ShadowBevel{\n    --pc-shadow-bevel-border-radius: var(\n        --pc-shadow-bevel-border-radius-md,\n        var(\n          --pc-shadow-bevel-border-radius-sm,\n          var(--pc-shadow-bevel-border-radius-xs)\n        )\n      );\n}\n}\n@media (min-width: 65em) {\n  .sca-polaris .Polaris-ShadowBevel{\n    --pc-shadow-bevel-border-radius: var(\n        --pc-shadow-bevel-border-radius-lg,\n        var(\n          --pc-shadow-bevel-border-radius-md,\n          var(\n            --pc-shadow-bevel-border-radius-sm,\n            var(--pc-shadow-bevel-border-radius-xs)\n          )\n        )\n      );\n}\n}\n@media (min-width: 90em) {\n  .sca-polaris .Polaris-ShadowBevel{\n    --pc-shadow-bevel-border-radius: var(\n        --pc-shadow-bevel-border-radius-xl,\n        var(\n          --pc-shadow-bevel-border-radius-lg,\n          var(\n            --pc-shadow-bevel-border-radius-md,\n            var(\n              --pc-shadow-bevel-border-radius-sm,\n              var(--pc-shadow-bevel-border-radius-xs)\n            )\n          )\n        )\n      );\n}\n}\n@media (min-width: 30.625em) {\n  .sca-polaris .Polaris-ShadowBevel{\n    --pc-shadow-bevel-content: var(\n        --pc-shadow-bevel-content-sm,\n        var(--pc-shadow-bevel-content-xs)\n      );\n}\n}\n@media (min-width: 48em) {\n  .sca-polaris .Polaris-ShadowBevel{\n    --pc-shadow-bevel-content: var(\n        --pc-shadow-bevel-content-md,\n        var(\n          --pc-shadow-bevel-content-sm,\n          var(--pc-shadow-bevel-content-xs)\n        )\n      );\n}\n}\n@media (min-width: 65em) {\n  .sca-polaris .Polaris-ShadowBevel{\n    --pc-shadow-bevel-content: var(\n        --pc-shadow-bevel-content-lg,\n        var(\n          --pc-shadow-bevel-content-md,\n          var(\n            --pc-shadow-bevel-content-sm,\n            var(--pc-shadow-bevel-content-xs)\n          )\n        )\n      );\n}\n}\n@media (min-width: 90em) {\n  .sca-polaris .Polaris-ShadowBevel{\n    --pc-shadow-bevel-content: var(\n        --pc-shadow-bevel-content-xl,\n        var(\n          --pc-shadow-bevel-content-lg,\n          var(\n            --pc-shadow-bevel-content-md,\n            var(\n              --pc-shadow-bevel-content-sm,\n              var(--pc-shadow-bevel-content-xs)\n            )\n          )\n        )\n      );\n}\n}\n.sca-polaris .Polaris-ShadowBevel::before {\n  content: var(--pc-shadow-bevel-content);\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: var(--pc-shadow-bevel-z-index);\n  box-shadow: var(--p-shadow-bevel-100);\n  border-radius: var(--pc-shadow-bevel-border-radius);\n  pointer-events: none;\n  mix-blend-mode: luminosity;\n}\n\n\n.sca-polaris .Polaris-InlineStack{\n  --pc-inline-stack-gap-xs: initial;\n  --pc-inline-stack-gap-sm: initial;\n  --pc-inline-stack-gap-md: initial;\n  --pc-inline-stack-gap-lg: initial;\n  --pc-inline-stack-gap-xl: initial;\n  gap: var(--pc-inline-stack-gap-xs);\n  --pc-inline-stack-flex-direction-xs: initial;\n  --pc-inline-stack-flex-direction-sm: initial;\n  --pc-inline-stack-flex-direction-md: initial;\n  --pc-inline-stack-flex-direction-lg: initial;\n  --pc-inline-stack-flex-direction-xl: initial;\n  flex-direction: var(--pc-inline-stack-flex-direction-xs);\n  display:flex;\n  flex-wrap:var(--pc-inline-stack-wrap);\n  align-items:var(--pc-inline-stack-block-align);\n  justify-content:var(--pc-inline-stack-align);\n}\n@media (min-width: 30.625em) {\n  .sca-polaris .Polaris-InlineStack{\n    gap: var(\n        --pc-inline-stack-gap-sm,\n        var(--pc-inline-stack-gap-xs)\n      );\n}\n}\n@media (min-width: 48em) {\n  .sca-polaris .Polaris-InlineStack{\n    gap: var(\n        --pc-inline-stack-gap-md,\n        var(\n          --pc-inline-stack-gap-sm,\n          var(--pc-inline-stack-gap-xs)\n        )\n      );\n}\n}\n@media (min-width: 65em) {\n  .sca-polaris .Polaris-InlineStack{\n    gap: var(\n        --pc-inline-stack-gap-lg,\n        var(\n          --pc-inline-stack-gap-md,\n          var(\n            --pc-inline-stack-gap-sm,\n            var(--pc-inline-stack-gap-xs)\n          )\n        )\n      );\n}\n}\n@media (min-width: 90em) {\n  .sca-polaris .Polaris-InlineStack{\n    gap: var(\n        --pc-inline-stack-gap-xl,\n        var(\n          --pc-inline-stack-gap-lg,\n          var(\n            --pc-inline-stack-gap-md,\n            var(\n              --pc-inline-stack-gap-sm,\n              var(--pc-inline-stack-gap-xs)\n            )\n          )\n        )\n      );\n}\n}\n@media (min-width: 30.625em) {\n  .sca-polaris .Polaris-InlineStack{\n    flex-direction: var(\n        --pc-inline-stack-flex-direction-sm,\n        var(--pc-inline-stack-flex-direction-xs)\n      );\n}\n}\n@media (min-width: 48em) {\n  .sca-polaris .Polaris-InlineStack{\n    flex-direction: var(\n        --pc-inline-stack-flex-direction-md,\n        var(\n          --pc-inline-stack-flex-direction-sm,\n          var(--pc-inline-stack-flex-direction-xs)\n        )\n      );\n}\n}\n@media (min-width: 65em) {\n  .sca-polaris .Polaris-InlineStack{\n    flex-direction: var(\n        --pc-inline-stack-flex-direction-lg,\n        var(\n          --pc-inline-stack-flex-direction-md,\n          var(\n            --pc-inline-stack-flex-direction-sm,\n            var(--pc-inline-stack-flex-direction-xs)\n          )\n        )\n      );\n}\n}\n@media (min-width: 90em) {\n  .sca-polaris .Polaris-InlineStack{\n    flex-direction: var(\n        --pc-inline-stack-flex-direction-xl,\n        var(\n          --pc-inline-stack-flex-direction-lg,\n          var(\n            --pc-inline-stack-flex-direction-md,\n            var(\n              --pc-inline-stack-flex-direction-sm,\n              var(--pc-inline-stack-flex-direction-xs)\n            )\n          )\n        )\n      );\n}\n}\n\n\n.sca-polaris .Polaris-BlockStack{\n  --pc-block-stack-gap-xs: initial;\n  --pc-block-stack-gap-sm: initial;\n  --pc-block-stack-gap-md: initial;\n  --pc-block-stack-gap-lg: initial;\n  --pc-block-stack-gap-xl: initial;\n  gap: var(--pc-block-stack-gap-xs);\n  --pc-block-stack-align:initial;\n  --pc-block-stack-inline-align:initial;\n  --pc-block-stack-order:initial;\n  display:flex;\n  flex-direction:var(--pc-block-stack-order);\n  align-items:var(--pc-block-stack-inline-align);\n  justify-content:var(--pc-block-stack-align);\n}\n\n@media (min-width: 30.625em) {\n\n.sca-polaris .Polaris-BlockStack{\n    gap: var(\n        --pc-block-stack-gap-sm,\n        var(--pc-block-stack-gap-xs)\n      );\n}\n}\n\n@media (min-width: 48em) {\n\n.sca-polaris .Polaris-BlockStack{\n    gap: var(\n        --pc-block-stack-gap-md,\n        var(\n          --pc-block-stack-gap-sm,\n          var(--pc-block-stack-gap-xs)\n        )\n      );\n}\n}\n\n@media (min-width: 65em) {\n\n.sca-polaris .Polaris-BlockStack{\n    gap: var(\n        --pc-block-stack-gap-lg,\n        var(\n          --pc-block-stack-gap-md,\n          var(\n            --pc-block-stack-gap-sm,\n            var(--pc-block-stack-gap-xs)\n          )\n        )\n      );\n}\n}\n\n@media (min-width: 90em) {\n\n.sca-polaris .Polaris-BlockStack{\n    gap: var(\n        --pc-block-stack-gap-xl,\n        var(\n          --pc-block-stack-gap-lg,\n          var(\n            --pc-block-stack-gap-md,\n            var(\n              --pc-block-stack-gap-sm,\n              var(--pc-block-stack-gap-xs)\n            )\n          )\n        )\n      );\n}\n}\n\n.sca-polaris .Polaris-BlockStack--listReset{\n  list-style-type:none;\n  margin-block-start:0;\n  margin-block-end:0;\n  padding-inline-start:0;\n}\n\n.sca-polaris .Polaris-BlockStack--fieldsetReset{\n  border:none;\n  margin:0;\n  padding:0;\n}\n\n\n.sca-polaris .Polaris-Label{\n  -webkit-tap-highlight-color:transparent;\n}\n\n.sca-polaris .Polaris-Label--hidden{\n  position: absolute !important;\n  top: 0;\n  width: 0.0625rem !important;\n  height: 0.0625rem !important;\n  margin: 0 !important;\n  padding: 0 !important;\n  overflow: hidden !important;\n  clip-path: inset(50%) !important;\n  border: 0 !important;\n  white-space: nowrap !important;\n}\n\n.sca-polaris .Polaris-Label__Text{\n  display:block;\n  flex:1 1 auto;\n  color:currentColor;\n  -webkit-tap-highlight-color:transparent;\n}\n\n.sca-polaris .Polaris-Label__RequiredIndicator::after{\n  content:'*';\n  color:var(--p-color-text-critical);\n  margin-left:var(--p-space-100);\n}\n\n\n.sca-polaris .Polaris-Labelled--hidden > .Polaris-Labelled__LabelWrapper{\n  position: absolute !important;\n  top: 0;\n  width: 0.0625rem !important;\n  height: 0.0625rem !important;\n  margin: 0 !important;\n  padding: 0 !important;\n  overflow: hidden !important;\n  clip-path: inset(50%) !important;\n  border: 0 !important;\n  white-space: nowrap !important;\n}\n\n.sca-polaris .Polaris-Labelled--disabled > .Polaris-Labelled__LabelWrapper{\n  color:var(--p-color-text-disabled);\n}\n\n.sca-polaris .Polaris-Labelled--disabled > .Polaris-Labelled__HelpText > span{\n  color:var(--p-color-text-disabled);\n}\n\n.sca-polaris .Polaris-Labelled--readOnly > .Polaris-Labelled__LabelWrapper{\n  color:var(--p-color-text-secondary);\n}\n\n.sca-polaris .Polaris-Labelled__LabelWrapper{\n  word-wrap:break-word;\n  word-break:break-word;\n  overflow-wrap:break-word;\n  display:flex;\n  flex-wrap:wrap;\n  justify-content:space-between;\n  align-items:baseline;\n  margin-bottom:var(--p-space-100);\n}\n\n.sca-polaris .Polaris-Labelled__HelpText{\n  margin-top:var(--p-space-100);\n}\n\n.sca-polaris .Polaris-Labelled__Error{\n  word-wrap:break-word;\n  word-break:break-word;\n  overflow-wrap:break-word;\n  margin-top:var(--p-space-100);\n}\n\n.sca-polaris .Polaris-Labelled__Action{\n  flex:0 0 auto;\n}\n\n\n.sca-polaris .Polaris-Connected{\n  --pc-connected-item:10;\n  --pc-connected-primary:20;\n  --pc-connected-focused:30;\n  position:relative;\n  display:flex;\n  align-items:center;\n}\n\n.sca-polaris .Polaris-Connected__Item{\n  position:relative;\n  z-index:var(--pc-connected-item);\n  flex:0 0 auto;\n}\n\n.sca-polaris .Polaris-Connected__Item:not(:first-child){\n    margin-left:var(--p-space-100);\n  }\n\n.sca-polaris .Polaris-Connected__Item--primary{\n  z-index:var(--pc-connected-primary);\n  flex:1 1 auto;\n}\n\n.sca-polaris .Polaris-Connected__Item--focused{\n  z-index:var(--pc-connected-focused);\n}\n\n\n.sca-polaris .Polaris-TextField{\n  --pc-text-field-contents:20;\n  --pc-text-field-backdrop:10;\n  font-size:var(--p-font-size-325);\n  font-weight:var(--p-font-weight-regular);\n  line-height:var(--p-font-line-height-500);\n  border:none;\n  letter-spacing:initial;\n  position:relative;\n  display:flex;\n  align-items:center;\n  color:var(--p-color-text);\n  cursor:text;\n}\n\n.sca-polaris .Polaris-TextField svg{\n    fill:var(--p-color-icon-secondary);\n  }\n\n.sca-polaris .Polaris-TextField:not(.Polaris-TextField--disabled):not(.Polaris-TextField--error):not(.Polaris-TextField--readOnly)\n    > .Polaris-TextField__Input:hover:not(:focus-visible) ~ .Polaris-TextField__Backdrop{\n      border-color:var(--p-color-input-border-hover);\n      background-color:var(--p-color-input-bg-surface-hover);\n    }\n\n.sca-polaris .Polaris-TextField--multiline{\n  padding:0;\n  flex-wrap:wrap;\n}\n\n.sca-polaris .Polaris-TextField--multiline > .Polaris-TextField__Input{\n    overflow:auto;\n    padding-left:var(--p-space-300);\n    padding-right:var(--p-space-300);\n    resize:none;\n  }\n\n.sca-polaris .Polaris-TextField--hasValue{\n  color:var(--p-color-text);\n}\n\n.sca-polaris .Polaris-TextField--focus > .Polaris-TextField__Input,\n.sca-polaris .Polaris-TextField--focus > .Polaris-TextField__InputAndSuffixWrapper,\n.sca-polaris .Polaris-TextField:focus-within > .Polaris-TextField__Input,\n.sca-polaris .Polaris-TextField__Input:focus-visible{\n  outline:none;\n}\n\n.sca-polaris .Polaris-TextField--focus > .Polaris-TextField__Input ~ .Polaris-TextField__Backdrop, .sca-polaris .Polaris-TextField--focus > .Polaris-TextField__InputAndSuffixWrapper ~ .Polaris-TextField__Backdrop, .sca-polaris .Polaris-TextField:focus-within > .Polaris-TextField__Input ~ .Polaris-TextField__Backdrop, .sca-polaris .Polaris-TextField__Input:focus-visible ~ .Polaris-TextField__Backdrop{\n    border-color:var(--p-color-input-border-active);\n    border-width:var(--p-border-width-025);\n    background-color:var(--p-color-input-bg-surface-active);\n    outline:var(--p-border-width-050) solid var(--p-color-border-focus);\n    outline-offset:var(--p-space-025);\n  }\n\n.sca-polaris .Polaris-TextField--focus > .Polaris-TextField__Input ~ .Polaris-TextField__Backdrop::after, .sca-polaris .Polaris-TextField--focus > .Polaris-TextField__InputAndSuffixWrapper ~ .Polaris-TextField__Backdrop::after, .sca-polaris .Polaris-TextField:focus-within > .Polaris-TextField__Input ~ .Polaris-TextField__Backdrop::after, .sca-polaris .Polaris-TextField__Input:focus-visible ~ .Polaris-TextField__Backdrop::after{\n    content:none;\n  }\n\n.sca-polaris .Polaris-TextField--error .Polaris-TextField__Input:hover ~ .Polaris-TextField__Backdrop,\n  .sca-polaris .Polaris-TextField--error .Polaris-TextField__Input:focus-visible ~ .Polaris-TextField__Backdrop{\n    border-color:var(--p-color-border-critical-secondary);\n    background-color:var(--p-color-bg-surface-critical);\n  }\n\n.sca-polaris .Polaris-TextField--error .Polaris-TextField__Input:active ~ .Polaris-TextField__Backdrop,\n  .sca-polaris .Polaris-TextField--error .Polaris-TextField__Input:focus-visible ~ .Polaris-TextField__Backdrop{\n    border-width:var(--p-border-width-025);\n  }\n\n.sca-polaris .Polaris-TextField--error > .Polaris-TextField__Input ~ .Polaris-TextField__Backdrop,\n  .sca-polaris .Polaris-TextField--error > .Polaris-TextField__InputAndSuffixWrapper ~ .Polaris-TextField__Backdrop{\n    background-color:var(--p-color-bg-surface-critical);\n    border-color:var(--p-color-border-critical-secondary);\n  }\n\n.sca-polaris .Polaris-TextField--error > .Polaris-TextField__Input ~ .Polaris-TextField__Backdrop::after, .sca-polaris .Polaris-TextField--error > .Polaris-TextField__InputAndSuffixWrapper ~ .Polaris-TextField__Backdrop::after{\n      border-color:var(--p-color-border-focus);\n    }\n\n.sca-polaris .Polaris-TextField--readOnly.Polaris-TextField--readOnly > .Polaris-TextField__Input{\n    color:var(--p-color-text-secondary);\n  }\n\n.sca-polaris .Polaris-TextField--readOnly.Polaris-TextField--readOnly > .Polaris-TextField__Backdrop{\n    background-color:var(--p-color-bg-surface-disabled);\n    border-color:transparent;\n  }\n\n.sca-polaris .Polaris-TextField--readOnly.Polaris-TextField--readOnly.Polaris-TextField--focus > .Polaris-TextField__Backdrop{\n      background-color:var(--p-color-bg-surface-disabled);\n      border-color:transparent;\n    }\n\n.sca-polaris .Polaris-TextField--toneMagic .Polaris-TextField__Prefix,\n  .sca-polaris .Polaris-TextField--toneMagic .Polaris-TextField__Suffix{\n    color:var(--p-color-text-magic-secondary);\n  }\n\n.sca-polaris .Polaris-TextField--toneMagic > .Polaris-TextField__Input{\n    color:var(--p-color-text-magic);\n  }\n\n.sca-polaris .Polaris-TextField--toneMagic > .Polaris-TextField__Backdrop{\n    background-color:var(--p-color-bg-surface-magic);\n    border-color:var(--p-color-border-magic-secondary);\n  }\n\n.sca-polaris .Polaris-TextField--toneMagic svg{\n    fill:var(--p-color-icon-magic);\n  }\n\n.sca-polaris .Polaris-TextField--toneMagic:not(.Polaris-TextField--disabled):not(.Polaris-TextField--error):not(.Polaris-TextField--readOnly)\n    > .Polaris-TextField__Input:hover:not(:focus-visible) ~ .Polaris-TextField__Backdrop{\n      background-color:var(--p-color-bg-surface-magic-hover);\n      border-color:var(--p-color-border-magic-secondary-hover);\n    }\n\n.sca-polaris .Polaris-TextField--toneMagic.Polaris-TextField--focus > .Polaris-TextField__Input,\n  .sca-polaris .Polaris-TextField--toneMagic.Polaris-TextField:focus-within > .Polaris-TextField__Input,\n  .sca-polaris .Polaris-TextField--toneMagic.Polaris-TextField__Input:focus-visible{\n    color:var(--p-color-text);\n  }\n\n.sca-polaris .Polaris-TextField--toneMagic.Polaris-TextField--focus .Polaris-TextField__Prefix,\n    .sca-polaris .Polaris-TextField--toneMagic.Polaris-TextField--focus .Polaris-TextField__Suffix{\n      color:var(--p-color-text-secondary);\n    }\n\n.sca-polaris .Polaris-TextField--toneMagic.Polaris-TextField--focus svg{\n      fill:var(--p-color-icon-secondary);\n    }\n\n.sca-polaris .Polaris-TextField--disabled{\n  color:var(--p-color-text-disabled);\n  cursor:initial;\n}\n\n.sca-polaris .Polaris-TextField--disabled > .Polaris-TextField__Backdrop{\n    border:none;\n    background-color:var(--p-color-bg-surface-disabled);\n  }\n\n.sca-polaris .Polaris-TextField--disabled svg{\n    fill:var(--p-color-icon-disabled);\n  }\n\n.sca-polaris .Polaris-TextField__InputAndSuffixWrapper{\n  display:flex;\n  align-items:center;\n  flex:1 1;\n  width:100%;\n}\n\n.sca-polaris .Polaris-TextField__AutoSizeWrapper{\n  position:relative;\n  display:inline-grid;\n  align-items:center;\n}\n\n.sca-polaris .Polaris-TextField__AutoSizeWrapper::after{\n    content:attr(data-auto-size-value);\n    visibility:hidden;\n    white-space:pre-wrap;\n    max-height:var(--pg-control-height);\n  }\n\n.sca-polaris .Polaris-TextField__AutoSizeWrapper::after,\n  .sca-polaris .Polaris-TextField__AutoSizeWrapper input,\n  .sca-polaris .Polaris-TextField__AutoSizeWrapper textarea{\n    width:auto;\n    min-width:1em;\n    grid-area:1 / 2;\n    padding:0 var(--p-space-300);\n    font-size:var(--p-font-size-400);\n    font-weight:var(--p-font-weight-regular);\n    line-height:var(--p-font-line-height-600);\n  }\n\n@media (min-width: 48em){\n\n.sca-polaris .Polaris-TextField__AutoSizeWrapper::after,\n  .sca-polaris .Polaris-TextField__AutoSizeWrapper input,\n  .sca-polaris .Polaris-TextField__AutoSizeWrapper textarea{\n      font-size:var(--p-font-size-325);\n      line-height:var(--p-font-line-height-500);\n  }\n    }\n\n.sca-polaris .Polaris-TextField__Prefix + .Polaris-TextField__InputAndSuffixWrapper .Polaris-TextField__AutoSizeWrapper::after,\n  .sca-polaris .Polaris-TextField__Prefix + .Polaris-TextField__InputAndSuffixWrapper input,\n  .sca-polaris .Polaris-TextField__Prefix + .Polaris-TextField__InputAndSuffixWrapper textarea{\n    padding-left:0;\n  }\n\n.sca-polaris .Polaris-TextField__AutoSizeWrapperWithSuffix::after,\n  .sca-polaris .Polaris-TextField__AutoSizeWrapperWithSuffix input,\n  .sca-polaris .Polaris-TextField__AutoSizeWrapperWithSuffix textarea{\n    padding-right:0;\n  }\n\n.sca-polaris .Polaris-TextField__Input{\n  font-size:var(--p-font-size-400);\n  font-weight:var(--p-font-weight-regular);\n  line-height:var(--p-font-line-height-600);\n  letter-spacing:initial;\n  position:relative;\n  z-index:var(--pc-text-field-contents);\n  display:flex;\n  flex:1 1;\n  width:100%;\n  min-width:0;\n  min-height:var(--pg-control-height);\n  padding:var(--p-space-150) var(--p-space-300);\n  background:none;\n  border:none;\n  font-family:var(--p-font-family-sans);\n  -webkit-appearance:none;\n          appearance:none;\n  caret-color:var(--p-color-text);\n  color:var(--p-color-text);\n  align-items:center;\n}\n\n@media (min-width: 48em){\n\n.sca-polaris .Polaris-TextField__Input{\n    font-size:var(--p-font-size-325);\n    line-height:var(--p-font-line-height-500);\n}\n  }\n\n.sca-polaris .Polaris-TextField__Prefix + .Polaris-TextField__Input{\n    padding-left:0;\n  }\n\n.sca-polaris .Polaris-TextField__Input:disabled{\n    opacity:1;\n    background:none;\n    color:var(--p-color-text-disabled);\n    -webkit-text-fill-color:var(--p-color-text-disabled);\n  }\n\n.sca-polaris .Polaris-TextField__Input:invalid{\n    box-shadow:none;\n  }\n\n.sca-polaris .Polaris-TextField__Input::placeholder{\n    color:var(--p-color-text-secondary);\n  }\n\n.sca-polaris .Polaris-TextField__Input[type='number']{\n    -webkit-appearance:textfield;\n            appearance:textfield;\n  }\n\n.sca-polaris .Polaris-TextField__Input[type='number']::-webkit-outer-spin-button,\n    .sca-polaris .Polaris-TextField__Input[type='number']::-webkit-inner-spin-button{\n      -webkit-appearance:none;\n              appearance:none;\n      margin:0;\n    }\n\n.sca-polaris .Polaris-TextField__Input:-webkit-autofill{\n    border-radius:var(--p-border-radius-100);\n  }\n\n.sca-polaris .Polaris-TextField__Input.Polaris-TextField--suggestion::selection{\n      color:var(--p-color-text-disabled);\n      background:transparent;\n    }\n\n.sca-polaris .Polaris-TextField--borderless .Polaris-TextField__Input,\n  .sca-polaris .Polaris-TextField--borderless .Polaris-TextField__Backdrop{\n    border:none;\n    min-height:var(--p-space-800);\n  }\n\n.sca-polaris .Polaris-TextField--slim .Polaris-TextField__Input,\n  .sca-polaris .Polaris-TextField--slim .Polaris-TextField__Backdrop{\n    min-height:1.75rem;\n    padding-block:var(--p-space-050);\n  }\n\n.sca-polaris .Polaris-TextField--slim.Polaris-TextField--borderless.Polaris-TextField--slim.Polaris-TextField--borderless .Polaris-TextField__Input,\n  .sca-polaris .Polaris-TextField--slim.Polaris-TextField--borderless.Polaris-TextField--slim.Polaris-TextField--borderless .Polaris-TextField__Backdrop{\n    outline-offset:0;\n  }\n\n.sca-polaris .Polaris-TextField__Input--hasClearButton[type='search']::-webkit-search-cancel-button{\n      -webkit-appearance:none;\n              appearance:none;\n    }\n\n.sca-polaris .Polaris-TextField__Input--suffixed{\n  padding-right:0;\n}\n\n.sca-polaris .Polaris-TextField__Input--alignRight{\n  text-align:right;\n}\n\n.sca-polaris .Polaris-TextField__Input--alignLeft{\n  text-align:left;\n}\n\n.sca-polaris .Polaris-TextField__Input--alignCenter{\n  text-align:center;\n}\n\n.sca-polaris .Polaris-TextField__Input--autoSize{\n  flex:initial;\n  width:auto;\n}\n\n.sca-polaris .Polaris-TextField__Backdrop{\n  position: relative;\n  position:absolute;\n  z-index:var(--pc-text-field-backdrop);\n  top:0;\n  right:0;\n  bottom:0;\n  left:0;\n  background-color:var(--p-color-input-bg-surface);\n  border:var(--p-border-width-0165) solid var(--p-color-input-border);\n  border-top-color:#898f94;\n  border-radius:var(--p-border-radius-200);\n  pointer-events:none;\n}\n\n.sca-polaris .Polaris-TextField__Backdrop::after {\n  content: '';\n  position: absolute;\n  z-index: 1;\n  top: -0.125rem;\n  right: -0.125rem;\n  bottom: -0.125rem;\n  left: -0.125rem;\n  display: block;\n  pointer-events: none;\n  box-shadow: 0 0 0 -0.125rem var(--p-color-border-focus);\n  border-radius: var(--p-border-radius-100);\n}\n\n.sca-polaris .Polaris-TextField__Prefix,\n.sca-polaris .Polaris-TextField__Suffix{\n  position:relative;\n  z-index:var(--pc-text-field-contents);\n  flex:0 0 auto;\n  color:var(--p-color-text-secondary);\n  -webkit-user-select:none;\n          user-select:none;\n}\n\n.sca-polaris .Polaris-TextField__Prefix{\n  margin-left:var(--p-space-300);\n  margin-right:var(--p-space-150);\n}\n\n.sca-polaris .Polaris-TextField__PrefixIcon{\n  margin-left:var(--p-space-200);\n  margin-right:var(--p-space-100);\n}\n\n.sca-polaris .Polaris-TextField__Suffix{\n  margin-left:var(--p-space-100);\n  margin-right:var(--p-space-300);\n}\n\n.sca-polaris .Polaris-TextField__Loading{\n  z-index:var(--pc-text-field-contents);\n  margin-right:var(--p-space-300);\n}\n\n.sca-polaris .Polaris-TextField__Loading svg{\n    display:block;\n  }\n\n.sca-polaris .Polaris-TextField__AlignFieldBottom{\n  align-self:flex-end;\n  width:100%;\n  padding-bottom:var(--p-space-200);\n}\n\n.sca-polaris .Polaris-TextField__DummyInput{\n  font-size:var(--p-font-size-325);\n  font-weight:var(--p-font-weight-regular);\n  line-height:var(--p-font-line-height-500);\n  border:none;\n  letter-spacing:initial;\n  padding:var(--pg-control-vertical-padding) var(--p-space-300);\n  word-wrap:break-word;\n  word-break:break-word;\n  overflow-wrap:break-word;\n  white-space:pre-wrap;\n}\n\n.sca-polaris .Polaris-TextField--monospaced{\n  font-family:var(--p-font-family-mono);\n}\n\n\n.sca-polaris .Polaris-Scrollable{\n  --pc-scrollable-shadow-size:var(--p-space-500);\n  --pc-scrollable-shadow-color:rgba(0, 0, 0, 0.15);\n  --pc-scrollable-shadow-bottom:0 var(--pc-scrollable-shadow-size) var(--pc-scrollable-shadow-size) var(--pc-scrollable-shadow-size) var(--pc-scrollable-shadow-color);\n  --pc-scrollable-shadow-top:0 calc(var(--pc-scrollable-shadow-size)*-1) var(--pc-scrollable-shadow-size) var(--pc-scrollable-shadow-size) var(--pc-scrollable-shadow-color);\n  --pc-scrollable-max-height:none;\n  -webkit-overflow-scrolling:touch;\n  position:relative;\n  max-height:var(--pc-scrollable-max-height);\n  overflow-x:hidden;\n  overflow-y:hidden;\n  isolation:isolate;\n}\n\n.sca-polaris .Polaris-Scrollable:focus{\n    outline:var(--p-border-width-050) solid var(--p-color-border-focus);\n    outline-offset:var(--p-space-050);\n  }\n\n.sca-polaris .Polaris-Scrollable.Polaris-Scrollable--hasTopShadow::before,\n    .sca-polaris .Polaris-Scrollable.Polaris-Scrollable--hasBottomShadow::before,\n    .sca-polaris .Polaris-Scrollable.Polaris-Scrollable--hasTopShadow::after,\n    .sca-polaris .Polaris-Scrollable.Polaris-Scrollable--hasBottomShadow::after{\n      content:'';\n      position:sticky;\n\n      left:0;\n      display:block;\n      pointer-events:none;\n      height:var(--p-space-0);\n      width:100%;\n      z-index:32;\n    }\n\n.sca-polaris .Polaris-Scrollable.Polaris-Scrollable--hasTopShadow::before, .sca-polaris .Polaris-Scrollable.Polaris-Scrollable--hasBottomShadow::before{\n      top:0;\n    }\n\n.sca-polaris .Polaris-Scrollable.Polaris-Scrollable--hasTopShadow::after, .sca-polaris .Polaris-Scrollable.Polaris-Scrollable--hasBottomShadow::after{\n      bottom:0;\n    }\n\n.sca-polaris .Polaris-Scrollable.Polaris-Scrollable--hasTopShadow::before{\n    box-shadow:var(--pc-scrollable-shadow-top);\n  }\n\n.sca-polaris .Polaris-Scrollable.Polaris-Scrollable--hasBottomShadow::after{\n    box-shadow:var(--pc-scrollable-shadow-bottom);\n  }\n\n.sca-polaris .Polaris-Scrollable--horizontal{\n  overflow-x:auto;\n}\n\n.sca-polaris .Polaris-Scrollable--vertical{\n  overflow-y:auto;\n}\n\n.sca-polaris .Polaris-Scrollable--scrollbarWidthThin{\n  scrollbar-width:thin;\n}\n\n.sca-polaris .Polaris-Scrollable--scrollbarWidthNone{\n  scrollbar-width:none;\n}\n\n.sca-polaris .Polaris-Scrollable--scrollbarWidthAuto{\n  scrollbar-width:auto;\n}\n\n.sca-polaris .Polaris-Scrollable--scrollbarGutterStable{\n  scrollbar-gutter:stable;\n}\n\n.sca-polaris .Polaris-Scrollable__scrollbarGutterStableboth--edges{\n  scrollbar-gutter:stable both-edges;\n}\n\n\n.sca-polaris .Polaris-Badge{\n  --pc-badge-horizontal-padding:var(--p-space-200);\n  --pc-badge-vertical-padding:var(--p-space-050);\n  display:inline-flex;\n  align-items:center;\n  padding:var(--pc-badge-vertical-padding) var(--pc-badge-horizontal-padding);\n  background-color:var(--p-color-bg-fill-transparent-secondary);\n  border-radius:var(--p-border-radius-200);\n  color:var(--p-color-text-secondary);\n  font-weight:var(--p-font-weight-medium);\n}\n\n.sca-polaris .Polaris-Badge svg{\n    fill:var(--p-color-text-secondary);\n  }\n\n@media print{\n\n.sca-polaris .Polaris-Badge{\n    border:solid var(--p-border-width-025) var(--p-color-border);\n}\n  }\n\n.sca-polaris .Polaris-Badge--toneSuccess{\n  background-color:var(--p-color-bg-fill-success-secondary);\n  color:var(--p-color-text-success);\n}\n\n.sca-polaris .Polaris-Badge--toneSuccess svg{\n    fill:var(--p-color-icon-success);\n  }\n\n.sca-polaris .Polaris-Badge--toneWarning{\n  background-color:var(--p-color-bg-fill-warning-secondary);\n  color:var(--p-color-text-warning);\n}\n\n.sca-polaris .Polaris-Badge--toneWarning svg{\n    fill:var(--p-color-icon-warning);\n  }\n\n.sca-polaris .Polaris-Badge__Icon{\n  margin:calc(var(--p-space-050)*-1) 0 calc(var(--p-space-050)*-1) calc(var(--p-space-200)*-1);\n}\n\n.sca-polaris .Polaris-Badge__Icon svg{\n    display:inline-block;\n    vertical-align:top;\n  }\n\n.sca-polaris .Polaris-Badge__Icon + *{\n    margin-left:0;\n  }\n\n.sca-polaris .Polaris-Badge__PipContainer{\n  display:grid;\n  align-items:center;\n  margin-left:calc(var(--p-space-050)*-1);\n  margin-right:var(--p-space-100);\n}\n\n\n.sca-polaris .Polaris-Badge-Pip{\n  --pc-pip-size:var(--p-space-200);\n  --pc-pip-color:var(--p-color-text-secondary);\n  --pc-border-width:0.07813rem;\n  display:inline-block;\n  color:var(--pc-pip-color);\n  height:var(--pc-pip-size);\n  width:var(--pc-pip-size);\n  border:var(--p-border-width-050) solid var(--pc-pip-color);\n  flex-shrink:0;\n  border-radius:0.1875rem;\n  border-width:var(--pc-border-width);\n}\n\n.sca-polaris .Polaris-Badge-Pip--toneSuccess{\n  --pc-pip-color:var(--p-color-icon-success);\n}\n\n.sca-polaris .Polaris-Badge-Pip--toneWarning{\n  --pc-pip-color:var(--p-color-icon-warning);\n}\n\n.sca-polaris .Polaris-Badge-Pip--progressIncomplete{\n  background:transparent;\n}\n\n.sca-polaris .Polaris-Badge-Pip--progressPartiallyComplete{\n  background:linear-gradient(\n    to top,\n    currentColor,\n    currentColor 50%,\n    transparent 50%,\n    transparent\n  );\n}\n\n.sca-polaris .Polaris-Badge-Pip--progressPartiallyComplete.Polaris-Badge-Pip{\n    background:none;\n    position:relative;\n    overflow:hidden;\n  }\n\n.sca-polaris .Polaris-Badge-Pip--progressPartiallyComplete.Polaris-Badge-Pip::after{\n      content:'';\n      position:absolute;\n      top:calc(var(--pc-border-width)*-1);\n      left:calc(var(--pc-border-width)*-1);\n      width:0.25rem;\n      height:0.5rem;\n      margin:0 0.1275rem;\n      border-right:var(--pc-border-width) solid currentColor;\n      border-left:var(--pc-border-width) solid currentColor;\n      font-size:0;\n      transform:rotate(-45deg);\n    }\n\n@media print{\n\n.sca-polaris .Polaris-Badge-Pip--progressPartiallyComplete{\n    background:none;\n    box-shadow:0 -6.375rem 0 -6.25rem currentColor inset;\n}\n  }\n\n.sca-polaris .Polaris-Badge-Pip--progressComplete{\n  background:currentColor;\n}\n\n@media print{\n\n.sca-polaris .Polaris-Badge-Pip--progressComplete{\n    background:none;\n    box-shadow:0 0 0 6.25rem currentColor inset;\n}\n  }\n\n.sca-polaris [data-polaris-tooltip-activator]{\n  outline:0;\n  position: relative;\n}\n\n.sca-polaris [data-polaris-tooltip-activator]::after {\n  content: '';\n  position: absolute;\n  z-index: 1;\n  top: -0.0625rem;\n  right: -0.0625rem;\n  bottom: -0.0625rem;\n  left: -0.0625rem;\n  display: block;\n  pointer-events: none;\n  box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus);\n  border-radius: var(--p-border-radius-100);\n}\n\n.sca-polaris [data-polaris-tooltip-activator]:focus-visible::after {\n  box-shadow: 0 0 0 0.125rem var(--p-color-border-focus);\n  outline: var(--p-border-width-025) solid transparent;\n}\n\n\n.sca-polaris .Polaris-ActionMenu-SecondaryAction{\n  --pc-secondary-action-button-spacing:var(--p-space-300);\n}\n.sca-polaris .Polaris-ActionMenu-SecondaryAction a,\n  .sca-polaris .Polaris-ActionMenu-SecondaryAction button{\n    position: relative;\n    --pc-button-padding-block:var(--p-space-100);\n    --pc-button-padding-inline:var(--p-space-300);\n    background:var(--p-color-bg-fill-tertiary) !important;\n    box-shadow:none !important;\n    border:none;\n    border-radius:var(--p-border-radius-200) !important;\n    min-height:1.75rem;\n  }\n.sca-polaris .Polaris-ActionMenu-SecondaryAction a::after, .sca-polaris .Polaris-ActionMenu-SecondaryAction button::after {\n  content: '';\n  position: absolute;\n  z-index: 1;\n  top: -0.125rem;\n  right: -0.125rem;\n  bottom: -0.125rem;\n  left: -0.125rem;\n  display: block;\n  pointer-events: none;\n  box-shadow: 0 0 0 -0.125rem var(--p-color-border-focus);\n  border-radius: var(--p-border-radius-100);\n}\n.sca-polaris .Polaris-ActionMenu-SecondaryAction a:is(:hover, :focus), .sca-polaris .Polaris-ActionMenu-SecondaryAction button:is(:hover, :focus){\n      background-color:var(--p-color-bg-fill-tertiary-hover) !important;\n    }\n.sca-polaris .Polaris-ActionMenu-SecondaryAction a:active,\n    .sca-polaris .Polaris-ActionMenu-SecondaryAction button:active,\n    .sca-polaris .Polaris-ActionMenu-SecondaryAction a[aria-expanded='true'],\n    .sca-polaris .Polaris-ActionMenu-SecondaryAction button[aria-expanded='true']{\n      background-color:var(--p-color-bg-fill-tertiary-active) !important;\n      box-shadow:var(--p-shadow-inset-200) !important;\n    }\n.sca-polaris .Polaris-ActionMenu-SecondaryAction a:focus-visible, .sca-polaris .Polaris-ActionMenu-SecondaryAction button:focus-visible{\n      outline:var(--p-border-width-050) solid var(--p-color-border-focus);\n      outline-offset:var(--p-space-050);\n    }\n.sca-polaris .Polaris-ActionMenu-SecondaryAction a:focus-visible::after, .sca-polaris .Polaris-ActionMenu-SecondaryAction button:focus-visible::after{\n    content:none;\n  }\n.sca-polaris .Polaris-ActionMenu-SecondaryAction a[aria-disabled='true'], .sca-polaris .Polaris-ActionMenu-SecondaryAction button[aria-disabled='true']{\n      background-color:var(--p-color-bg-fill-disabled) !important;\n    }\n@media (min-width: 48em){\n  .sca-polaris .Polaris-ActionMenu-SecondaryAction a,\n  .sca-polaris .Polaris-ActionMenu-SecondaryAction button{\n      border:none !important;\n      position: relative;\n  }\n      .sca-polaris .Polaris-ActionMenu-SecondaryAction a::after, .sca-polaris .Polaris-ActionMenu-SecondaryAction button::after {\n    content: '';\n    position: absolute;\n    z-index: 1;\n    top: -0.0625rem;\n    right: -0.0625rem;\n    bottom: -0.0625rem;\n    left: -0.0625rem;\n    display: block;\n    pointer-events: none;\n    box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus);\n    border-radius: var(--p-border-radius-100);\n  }\n    }\n.sca-polaris .Polaris-ActionMenu-SecondaryAction.Polaris-ActionMenu-SecondaryAction--critical a,\n    .sca-polaris .Polaris-ActionMenu-SecondaryAction.Polaris-ActionMenu-SecondaryAction--critical button{\n      color:var(--p-color-text-critical) !important;\n    }\n.sca-polaris .Polaris-ActionMenu-SecondaryAction.Polaris-ActionMenu-SecondaryAction--critical a svg, .sca-polaris .Polaris-ActionMenu-SecondaryAction.Polaris-ActionMenu-SecondaryAction--critical button svg{\n        fill:var(--p-color-text-critical);\n      }\n.sca-polaris .Polaris-ActionMenu-SecondaryAction.Polaris-ActionMenu-SecondaryAction--critical a:is(:hover, :focus), .sca-polaris .Polaris-ActionMenu-SecondaryAction.Polaris-ActionMenu-SecondaryAction--critical button:is(:hover, :focus){\n        background-color:var(--p-color-bg-fill-tertiary-hover) !important;\n      }\n.sca-polaris .Polaris-ActionMenu-SecondaryAction.Polaris-ActionMenu-SecondaryAction--critical a:active, .sca-polaris .Polaris-ActionMenu-SecondaryAction.Polaris-ActionMenu-SecondaryAction--critical button:active{\n        background-color:var(--p-color-bg-fill-tertiary-active) !important;\n      }\n\n\n.sca-polaris .Polaris-ActionMenu-Actions__ActionsLayoutOuter{\n  position:relative;\n  width:100%;\n}\n\n.sca-polaris .Polaris-ActionMenu-Actions__ActionsLayout{\n  display:flex;\n  flex-wrap:wrap;\n  align-items:center;\n  justify-content:flex-end;\n  flex:1 1 auto;\n  gap:var(--p-space-200);\n}\n\n.sca-polaris .Polaris-ActionMenu-Actions__ActionsLayout > *{\n    flex:0 0 auto;\n  }\n\n.sca-polaris .Polaris-ActionMenu-Actions--actionsLayoutMeasuring{\n  visibility:hidden;\n  height:0;\n}\n\n.sca-polaris .Polaris-ActionMenu-Actions__ActionsLayoutMeasurer{\n  position:absolute;\n  display:flex;\n  flex-wrap:wrap;\n  align-items:center;\n  justify-content:flex-end;\n  flex:1 1 auto;\n  gap:0;\n  padding:0;\n  visibility:hidden;\n  height:0;\n}\n\n.sca-polaris .Polaris-ActionMenu-Actions__ActionsLayoutMeasurer > *{\n    flex:0 0 auto;\n  }\n\n\n.sca-polaris .Polaris-ActionMenu{\n  width:100%;\n  display:flex;\n  justify-content:flex-end;\n}\n@media print{\n  .sca-polaris .Polaris-ActionMenu{\n    display:none !important;\n}\n  }\n\n\n.sca-polaris .Polaris-Choice{\n  --pc-choice-space-0:0rem;\n  --pc-choice-bleed-block-start-xs: initial;\n  --pc-choice-bleed-block-start-sm: initial;\n  --pc-choice-bleed-block-start-md: initial;\n  --pc-choice-bleed-block-start-lg: initial;\n  --pc-choice-bleed-block-start-xl: initial;\n  --pc-choice-bleed-block-start: var(--pc-choice-bleed-block-start-xs);\n  --pc-choice-bleed-block-end-xs: initial;\n  --pc-choice-bleed-block-end-sm: initial;\n  --pc-choice-bleed-block-end-md: initial;\n  --pc-choice-bleed-block-end-lg: initial;\n  --pc-choice-bleed-block-end-xl: initial;\n  --pc-choice-bleed-block-end: var(--pc-choice-bleed-block-end-xs);\n  --pc-choice-bleed-inline-start-xs: initial;\n  --pc-choice-bleed-inline-start-sm: initial;\n  --pc-choice-bleed-inline-start-md: initial;\n  --pc-choice-bleed-inline-start-lg: initial;\n  --pc-choice-bleed-inline-start-xl: initial;\n  --pc-choice-bleed-inline-start: var(--pc-choice-bleed-inline-start-xs);\n  --pc-choice-bleed-inline-end-xs: initial;\n  --pc-choice-bleed-inline-end-sm: initial;\n  --pc-choice-bleed-inline-end-md: initial;\n  --pc-choice-bleed-inline-end-lg: initial;\n  --pc-choice-bleed-inline-end-xl: initial;\n  --pc-choice-bleed-inline-end: var(--pc-choice-bleed-inline-end-xs);\n  --pc-choice-fill-xs: initial;\n  --pc-choice-fill-sm: initial;\n  --pc-choice-fill-md: initial;\n  --pc-choice-fill-lg: initial;\n  --pc-choice-fill-xl: initial;\n  --pc-choice-fill: var(--pc-choice-fill-xs);\n  display:inline-flex;\n  align-items:center;\n  justify-content:flex-start;\n  cursor:pointer;\n  padding-block-start:calc(var(--pc-choice-bleed-block-start, var(--pc-choice-space-0)) + var(--p-space-100));\n  padding-block-end:calc(var(--pc-choice-bleed-block-end, var(--pc-choice-space-0)) + var(--p-space-100));\n  padding-inline-start:var(\n    --pc-choice-bleed-inline-start,\n    var(--pc-choice-space-0)\n  );\n  padding-inline-end:var(\n    --pc-choice-bleed-inline-end,\n    var(--pc-choice-space-0)\n  );\n  margin-block-start:calc(var(--pc-choice-bleed-block-start, var(--pc-choice-space-0))*-1);\n  margin-block-end:calc(var(--pc-choice-bleed-block-end, var(--pc-choice-space-0))*-1);\n  margin-inline-start:calc(var(--pc-choice-bleed-inline-start, var(--pc-choice-space-0))*-1);\n  margin-inline-end:calc(var(--pc-choice-bleed-inline-end, var(--pc-choice-space-0))*-1);\n  inline-size:calc(var(--pc-choice-fill, auto) + var(--pc-choice-bleed-inline-start, var(--pc-choice-space-0)) + var(--pc-choice-bleed-inline-end, var(--pc-choice-space-0)));\n  block-size:calc(var(--pc-choice-fill, auto) + var(--pc-choice-bleed-block-start, var(--pc-choice-space-0)) + var(--pc-choice-bleed-block-end, var(--pc-choice-space-0)));\n}\n@media (min-width: 30.625em) {\n.sca-polaris .Polaris-Choice{\n    --pc-choice-bleed-block-start: var(\n        --pc-choice-bleed-block-start-sm,\n        var(--pc-choice-bleed-block-start-xs)\n      );\n}\n}\n@media (min-width: 48em) {\n.sca-polaris .Polaris-Choice{\n    --pc-choice-bleed-block-start: var(\n        --pc-choice-bleed-block-start-md,\n        var(\n          --pc-choice-bleed-block-start-sm,\n          var(--pc-choice-bleed-block-start-xs)\n        )\n      );\n}\n}\n@media (min-width: 65em) {\n.sca-polaris .Polaris-Choice{\n    --pc-choice-bleed-block-start: var(\n        --pc-choice-bleed-block-start-lg,\n        var(\n          --pc-choice-bleed-block-start-md,\n          var(\n            --pc-choice-bleed-block-start-sm,\n            var(--pc-choice-bleed-block-start-xs)\n          )\n        )\n      );\n}\n}\n@media (min-width: 90em) {\n.sca-polaris .Polaris-Choice{\n    --pc-choice-bleed-block-start: var(\n        --pc-choice-bleed-block-start-xl,\n        var(\n          --pc-choice-bleed-block-start-lg,\n          var(\n            --pc-choice-bleed-block-start-md,\n            var(\n              --pc-choice-bleed-block-start-sm,\n              var(--pc-choice-bleed-block-start-xs)\n            )\n          )\n        )\n      );\n}\n}\n@media (min-width: 30.625em) {\n.sca-polaris .Polaris-Choice{\n    --pc-choice-bleed-block-end: var(\n        --pc-choice-bleed-block-end-sm,\n        var(--pc-choice-bleed-block-end-xs)\n      );\n}\n}\n@media (min-width: 48em) {\n.sca-polaris .Polaris-Choice{\n    --pc-choice-bleed-block-end: var(\n        --pc-choice-bleed-block-end-md,\n        var(\n          --pc-choice-bleed-block-end-sm,\n          var(--pc-choice-bleed-block-end-xs)\n        )\n      );\n}\n}\n@media (min-width: 65em) {\n.sca-polaris .Polaris-Choice{\n    --pc-choice-bleed-block-end: var(\n        --pc-choice-bleed-block-end-lg,\n        var(\n          --pc-choice-bleed-block-end-md,\n          var(\n            --pc-choice-bleed-block-end-sm,\n            var(--pc-choice-bleed-block-end-xs)\n          )\n        )\n      );\n}\n}\n@media (min-width: 90em) {\n.sca-polaris .Polaris-Choice{\n    --pc-choice-bleed-block-end: var(\n        --pc-choice-bleed-block-end-xl,\n        var(\n          --pc-choice-bleed-block-end-lg,\n          var(\n            --pc-choice-bleed-block-end-md,\n            var(\n              --pc-choice-bleed-block-end-sm,\n              var(--pc-choice-bleed-block-end-xs)\n            )\n          )\n        )\n      );\n}\n}\n@media (min-width: 30.625em) {\n.sca-polaris .Polaris-Choice{\n    --pc-choice-bleed-inline-start: var(\n        --pc-choice-bleed-inline-start-sm,\n        var(--pc-choice-bleed-inline-start-xs)\n      );\n}\n}\n@media (min-width: 48em) {\n.sca-polaris .Polaris-Choice{\n    --pc-choice-bleed-inline-start: var(\n        --pc-choice-bleed-inline-start-md,\n        var(\n          --pc-choice-bleed-inline-start-sm,\n          var(--pc-choice-bleed-inline-start-xs)\n        )\n      );\n}\n}\n@media (min-width: 65em) {\n.sca-polaris .Polaris-Choice{\n    --pc-choice-bleed-inline-start: var(\n        --pc-choice-bleed-inline-start-lg,\n        var(\n          --pc-choice-bleed-inline-start-md,\n          var(\n            --pc-choice-bleed-inline-start-sm,\n            var(--pc-choice-bleed-inline-start-xs)\n          )\n        )\n      );\n}\n}\n@media (min-width: 90em) {\n.sca-polaris .Polaris-Choice{\n    --pc-choice-bleed-inline-start: var(\n        --pc-choice-bleed-inline-start-xl,\n        var(\n          --pc-choice-bleed-inline-start-lg,\n          var(\n            --pc-choice-bleed-inline-start-md,\n            var(\n              --pc-choice-bleed-inline-start-sm,\n              var(--pc-choice-bleed-inline-start-xs)\n            )\n          )\n        )\n      );\n}\n}\n@media (min-width: 30.625em) {\n.sca-polaris .Polaris-Choice{\n    --pc-choice-bleed-inline-end: var(\n        --pc-choice-bleed-inline-end-sm,\n        var(--pc-choice-bleed-inline-end-xs)\n      );\n}\n}\n@media (min-width: 48em) {\n.sca-polaris .Polaris-Choice{\n    --pc-choice-bleed-inline-end: var(\n        --pc-choice-bleed-inline-end-md,\n        var(\n          --pc-choice-bleed-inline-end-sm,\n          var(--pc-choice-bleed-inline-end-xs)\n        )\n      );\n}\n}\n@media (min-width: 65em) {\n.sca-polaris .Polaris-Choice{\n    --pc-choice-bleed-inline-end: var(\n        --pc-choice-bleed-inline-end-lg,\n        var(\n          --pc-choice-bleed-inline-end-md,\n          var(\n            --pc-choice-bleed-inline-end-sm,\n            var(--pc-choice-bleed-inline-end-xs)\n          )\n        )\n      );\n}\n}\n@media (min-width: 90em) {\n.sca-polaris .Polaris-Choice{\n    --pc-choice-bleed-inline-end: var(\n        --pc-choice-bleed-inline-end-xl,\n        var(\n          --pc-choice-bleed-inline-end-lg,\n          var(\n            --pc-choice-bleed-inline-end-md,\n            var(\n              --pc-choice-bleed-inline-end-sm,\n              var(--pc-choice-bleed-inline-end-xs)\n            )\n          )\n        )\n      );\n}\n}\n@media (min-width: 30.625em) {\n.sca-polaris .Polaris-Choice{\n    --pc-choice-fill: var(\n        --pc-choice-fill-sm,\n        var(--pc-choice-fill-xs)\n      );\n}\n}\n@media (min-width: 48em) {\n.sca-polaris .Polaris-Choice{\n    --pc-choice-fill: var(\n        --pc-choice-fill-md,\n        var(\n          --pc-choice-fill-sm,\n          var(--pc-choice-fill-xs)\n        )\n      );\n}\n}\n@media (min-width: 65em) {\n.sca-polaris .Polaris-Choice{\n    --pc-choice-fill: var(\n        --pc-choice-fill-lg,\n        var(\n          --pc-choice-fill-md,\n          var(\n            --pc-choice-fill-sm,\n            var(--pc-choice-fill-xs)\n          )\n        )\n      );\n}\n}\n@media (min-width: 90em) {\n.sca-polaris .Polaris-Choice{\n    --pc-choice-fill: var(\n        --pc-choice-fill-xl,\n        var(\n          --pc-choice-fill-lg,\n          var(\n            --pc-choice-fill-md,\n            var(\n              --pc-choice-fill-sm,\n              var(--pc-choice-fill-xs)\n            )\n          )\n        )\n      );\n}\n}\n.sca-polaris .Polaris-Choice--labelHidden{\n  padding-block-start:var(\n    --pc-choice-bleed-block-start,\n    var(--pc-choice-space-0)\n  );\n  padding-block-end:var(--pc-choice-bleed-block-end, var(--pc-choice-space-0));\n}\n.sca-polaris .Polaris-Choice--labelHidden > .Polaris-Choice__Label{\n    position: absolute !important;\n    top: 0;\n    width: 0.0625rem !important;\n    height: 0.0625rem !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    overflow: hidden !important;\n    clip-path: inset(50%) !important;\n    border: 0 !important;\n    white-space: nowrap !important;\n  }\n.sca-polaris .Polaris-Choice--labelHidden .Polaris-Choice__Control{\n    margin-top:0;\n    margin-right:0;\n  }\n.sca-polaris .Polaris-Choice--disabled{\n  cursor:default;\n}\n.sca-polaris .Polaris-Choice--disabled > .Polaris-Choice__Label{\n    color:var(--p-color-text-disabled);\n  }\n.sca-polaris .Polaris-Choice--disabled > .Polaris-Choice__Label:hover{\n      cursor:default;\n    }\n@media (-ms-high-contrast: active){\n.sca-polaris .Polaris-Choice--disabled > .Polaris-Choice__Label{\n      color:grayText;\n  }\n    }\n.sca-polaris .Polaris-Choice--toneMagic > .Polaris-Choice__Label{\n  color:var(--p-color-text-magic);\n}\n.sca-polaris .Polaris-Choice--disabled + .Polaris-Choice__Descriptions{\n  color:var(--p-color-text-disabled);\n}\n.sca-polaris .Polaris-Choice__Control{\n  --pc-choice-size:1.125rem;\n  display:flex;\n  flex:0 0 auto;\n  align-items:stretch;\n  width:var(--pc-choice-size);\n  height:var(--pc-choice-size);\n  margin-right:var(--p-space-200);\n}\n@media (max-width: 47.9975em){\n.sca-polaris .Polaris-Choice__Control{\n    --pc-choice-size:1.25rem;\n}\n  }\n.sca-polaris .Polaris-Choice__Control > *{\n    width:100%;\n  }\n.sca-polaris .Polaris-Choice__Label{\n  -webkit-tap-highlight-color:transparent;\n}\n.sca-polaris .Polaris-Choice__Label:hover{\n    cursor:pointer;\n  }\n.sca-polaris .Polaris-Choice__Descriptions{\n  --pc-choice-size:1.125rem;\n  padding-left:calc(var(--p-space-200) + var(--pc-choice-size));\n}\n@media (max-width: 47.9975em){\n.sca-polaris .Polaris-Choice__Descriptions{\n    --pc-choice-size:1.25rem;\n}\n  }\n.sca-polaris .Polaris-Choice__HelpText{\n  margin-bottom:var(--p-space-100);\n}\n\n\n.sca-polaris [data-lock-scrolling]{\n  overflow-y:scroll;\n  margin:0;\n}\n.sca-polaris [data-lock-scrolling][data-lock-scrolling-hidden]{\n    overflow-y:hidden;\n  }\n.sca-polaris [data-lock-scrolling] [data-lock-scrolling-wrapper]{\n    overflow:hidden;\n    height:100%;\n  }\n\n\n.sca-polaris .Polaris-Backdrop{\n  position:fixed;\n  z-index:var(--p-z-index-10);\n  top:0;\n  right:0;\n  bottom:0;\n  left:0;\n  display:block;\n  background-color:rgba(0, 0, 0, 0.5);\n  animation:var(--p-motion-keyframes-fade-in) var(--p-motion-duration-200) 1 forwards;\n  opacity:0;\n  -webkit-backface-visibility:hidden;\n          backface-visibility:hidden;\n  will-change:opacity;\n}\n\n.sca-polaris .Polaris-Backdrop--transparent{\n  background-color:transparent;\n}\n\n.sca-polaris .Polaris-Backdrop--belowNavigation{\n  z-index:var(--p-z-index-7);\n}\n\n\n.sca-polaris .Polaris-Banner{\n  background-color:var(--p-color-bg-surface);\n  position:relative;\n  display:flex;\n}\n\n.sca-polaris .Polaris-Banner:focus{\n    outline:none;\n  }\n\n.sca-polaris .Polaris-Banner.Polaris-Banner--keyFocused{\n    outline:var(--p-border-width-050) solid var(--p-color-border-focus);\n  }\n\n.sca-polaris .Polaris-Banner--withinContentContainer{\n  border-radius:var(--p-border-radius-200);\n}\n\n.sca-polaris .Polaris-Banner--withinContentContainer + .Polaris-Banner{\n    margin-top:var(--p-space-200);\n  }\n\n.sca-polaris .Polaris-Banner--withinPage{\n  position: relative;\n  box-shadow: var(--p-shadow-200);\n  border-radius: var(--p-border-radius-0);\n}\n\n.sca-polaris .Polaris-Banner--withinPage::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 0;\n  box-shadow: var(--p-shadow-bevel-100);\n  border-radius: var(--p-border-radius-0);\n  pointer-events: none;\n  mix-blend-mode: luminosity;\n}\n\n@media (min-width: 30.625em){\n\n.sca-polaris .Polaris-Banner--withinPage{\n    position: relative;\n    box-shadow: var(--p-shadow-200);\n    border-radius: var(--p-border-radius-300);\n}\n    .sca-polaris .Polaris-Banner--withinPage::before {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 0;\n    box-shadow: var(--p-shadow-bevel-100);\n    border-radius: var(--p-border-radius-300);\n    pointer-events: none;\n    mix-blend-mode: luminosity;\n  }\n  }\n\n.sca-polaris .Polaris-Banner--withinPage + .Polaris-Banner{\n    margin-top:var(--p-space-400);\n  }\n\n.sca-polaris .Polaris-Banner__DismissIcon{\n  display:flex;\n}\n\n.sca-polaris .Polaris-Banner--textSuccessOnBgFill.Polaris-Banner--textSuccessOnBgFill.Polaris-Banner--textSuccessOnBgFill svg,\n  .sca-polaris .Polaris-Banner--textSuccessOnBgFill.Polaris-Banner--textSuccessOnBgFill.Polaris-Banner--textSuccessOnBgFill path{\n    fill:var(--p-color-text-success-on-bg-fill);\n  }\n\n.sca-polaris .Polaris-Banner__text--success.Polaris-Banner__text--success.Polaris-Banner__text--success svg,\n  .sca-polaris .Polaris-Banner__text--success.Polaris-Banner__text--success.Polaris-Banner__text--success path{\n    fill:var(--p-color-text-success);\n  }\n\n.sca-polaris .Polaris-Banner--textWarningOnBgFill.Polaris-Banner--textWarningOnBgFill.Polaris-Banner--textWarningOnBgFill svg,\n  .sca-polaris .Polaris-Banner--textWarningOnBgFill.Polaris-Banner--textWarningOnBgFill.Polaris-Banner--textWarningOnBgFill path{\n    fill:var(--p-color-text-warning-on-bg-fill);\n  }\n\n.sca-polaris .Polaris-Banner__text--warning.Polaris-Banner__text--warning.Polaris-Banner__text--warning svg,\n  .sca-polaris .Polaris-Banner__text--warning.Polaris-Banner__text--warning.Polaris-Banner__text--warning path{\n    fill:var(--p-color-text-warning);\n  }\n\n.sca-polaris .Polaris-Banner--textCriticalOnBgFill.Polaris-Banner--textCriticalOnBgFill.Polaris-Banner--textCriticalOnBgFill svg,\n  .sca-polaris .Polaris-Banner--textCriticalOnBgFill.Polaris-Banner--textCriticalOnBgFill.Polaris-Banner--textCriticalOnBgFill path{\n    fill:var(--p-color-text-critical-on-bg-fill);\n  }\n\n.sca-polaris .Polaris-Banner__text--critical.Polaris-Banner__text--critical.Polaris-Banner__text--critical svg,\n  .sca-polaris .Polaris-Banner__text--critical.Polaris-Banner__text--critical.Polaris-Banner__text--critical path{\n    fill:var(--p-color-text-critical);\n  }\n\n.sca-polaris .Polaris-Banner--textInfoOnBgFill.Polaris-Banner--textInfoOnBgFill.Polaris-Banner--textInfoOnBgFill svg,\n  .sca-polaris .Polaris-Banner--textInfoOnBgFill.Polaris-Banner--textInfoOnBgFill.Polaris-Banner--textInfoOnBgFill path{\n    fill:var(--p-color-text-info-on-bg-fill);\n  }\n\n.sca-polaris .Polaris-Banner__text--info.Polaris-Banner__text--info.Polaris-Banner__text--info svg,\n  .sca-polaris .Polaris-Banner__text--info.Polaris-Banner__text--info.Polaris-Banner__text--info path{\n    fill:var(--p-color-text-info);\n  }\n\n.sca-polaris .Polaris-Banner__icon--secondary.Polaris-Banner__icon--secondary.Polaris-Banner__icon--secondary svg,\n  .sca-polaris .Polaris-Banner__icon--secondary.Polaris-Banner__icon--secondary.Polaris-Banner__icon--secondary path{\n    fill:var(--p-color-icon-secondary);\n  }\n\n\n.sca-polaris .Polaris-Bleed{\n  --pc-bleed-margin-block-start-xs:initial;\n  --pc-bleed-margin-block-start-sm:var(--pc-bleed-margin-block-start-xs);\n  --pc-bleed-margin-block-start-md:var(--pc-bleed-margin-block-start-sm);\n  --pc-bleed-margin-block-start-lg:var(--pc-bleed-margin-block-start-md);\n  --pc-bleed-margin-block-start-xl:var(--pc-bleed-margin-block-start-lg);\n  --pc-bleed-margin-block-end-xs:initial;\n  --pc-bleed-margin-block-end-sm:var(--pc-bleed-margin-block-end-xs);\n  --pc-bleed-margin-block-end-md:var(--pc-bleed-margin-block-end-sm);\n  --pc-bleed-margin-block-end-lg:var(--pc-bleed-margin-block-end-md);\n  --pc-bleed-margin-block-end-xl:var(--pc-bleed-margin-block-end-lg);\n  --pc-bleed-margin-inline-start-xs:initial;\n  --pc-bleed-margin-inline-start-sm:var(--pc-bleed-margin-inline-start-xs);\n  --pc-bleed-margin-inline-start-md:var(--pc-bleed-margin-inline-start-sm);\n  --pc-bleed-margin-inline-start-lg:var(--pc-bleed-margin-inline-start-md);\n  --pc-bleed-margin-inline-start-xl:var(--pc-bleed-margin-inline-start-lg);\n  --pc-bleed-margin-inline-end-xs:initial;\n  --pc-bleed-margin-inline-end-sm:var(--pc-bleed-margin-inline-end-xs);\n  --pc-bleed-margin-inline-end-md:var(--pc-bleed-margin-inline-end-sm);\n  --pc-bleed-margin-inline-end-lg:var(--pc-bleed-margin-inline-end-md);\n  --pc-bleed-margin-inline-end-xl:var(--pc-bleed-margin-inline-end-lg);\n  margin-block-start:calc(var(--pc-bleed-margin-block-start-xs)*-1);\n  margin-block-end:calc(var(--pc-bleed-margin-block-end-xs)*-1);\n  margin-inline-start:calc(var(--pc-bleed-margin-inline-start-xs)*-1);\n  margin-inline-end:calc(var(--pc-bleed-margin-inline-end-xs)*-1);\n}\n@media (min-width: 30.625em){\n  .sca-polaris .Polaris-Bleed{\n    margin-block-start:calc(var(--pc-bleed-margin-block-start-sm)*-1);\n    margin-block-end:calc(var(--pc-bleed-margin-block-end-sm)*-1);\n    margin-inline-start:calc(var(--pc-bleed-margin-inline-start-sm)*-1);\n    margin-inline-end:calc(var(--pc-bleed-margin-inline-end-sm)*-1);\n}\n  }\n@media (min-width: 48em){\n  .sca-polaris .Polaris-Bleed{\n    margin-block-start:calc(var(--pc-bleed-margin-block-start-md)*-1);\n    margin-block-end:calc(var(--pc-bleed-margin-block-end-md)*-1);\n    margin-inline-start:calc(var(--pc-bleed-margin-inline-start-md)*-1);\n    margin-inline-end:calc(var(--pc-bleed-margin-inline-end-md)*-1);\n}\n  }\n@media (min-width: 65em){\n  .sca-polaris .Polaris-Bleed{\n    margin-block-start:calc(var(--pc-bleed-margin-block-start-lg)*-1);\n    margin-block-end:calc(var(--pc-bleed-margin-block-end-lg)*-1);\n    margin-inline-start:calc(var(--pc-bleed-margin-inline-start-lg)*-1);\n    margin-inline-end:calc(var(--pc-bleed-margin-inline-end-lg)*-1);\n}\n  }\n@media (min-width: 90em){\n  .sca-polaris .Polaris-Bleed{\n    margin-block-start:calc(var(--pc-bleed-margin-block-start-xl)*-1);\n    margin-block-end:calc(var(--pc-bleed-margin-block-end-xl)*-1);\n    margin-inline-start:calc(var(--pc-bleed-margin-inline-start-xl)*-1);\n    margin-inline-end:calc(var(--pc-bleed-margin-inline-end-xl)*-1);\n}\n  }\n\n\n.sca-polaris .Polaris-LegacyCard{\n  background-color:var(--p-color-bg-surface);\n  box-shadow:var(--p-shadow-300);\n  outline:var(--p-border-width-025) solid transparent;\n  overflow:clip;\n\n  position: relative;\n\n  box-shadow: var(--p-shadow-100);\n\n  border-radius: var(--p-border-radius-0);\n}\n\n.sca-polaris .Polaris-LegacyCard::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 101;\n  box-shadow: var(--p-shadow-bevel-100);\n  border-radius: var(--p-border-radius-0);\n  pointer-events: none;\n  mix-blend-mode: luminosity;\n}\n\n.sca-polaris .Polaris-LegacyCard + .Polaris-LegacyCard{\n    margin-top:var(--p-space-400);\n  }\n\n@media print{\n\n.sca-polaris .Polaris-LegacyCard + .Polaris-LegacyCard{\n      margin-top:calc(var(--p-space-200)*-1);\n  }\n    }\n\n@media (min-width: 30.625em){\n\n.sca-polaris .Polaris-LegacyCard{\n    border-radius:var(--p-border-radius-200);\n\n    position: relative;\n\n    box-shadow: var(--p-shadow-100);\n\n    border-radius: var(--p-border-radius-300);\n}\n\n    .sca-polaris .Polaris-LegacyCard::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 101;\n    box-shadow: var(--p-shadow-bevel-100);\n    border-radius: var(--p-border-radius-300);\n    pointer-events: none;\n    mix-blend-mode: luminosity;\n  }\n\n    .sca-polaris .Polaris-LegacyCard .Polaris-LegacyCard__Section:first-child{\n      border-top-left-radius:var(--p-border-radius-300);\n      border-top-right-radius:var(--p-border-radius-300);\n    }\n\n    .sca-polaris .Polaris-LegacyCard .Polaris-LegacyCard__Section:last-child{\n      border-bottom-left-radius:var(--p-border-radius-300);\n      border-bottom-right-radius:var(--p-border-radius-300);\n    }\n  }\n\n@media print{\n\n.sca-polaris .Polaris-LegacyCard{\n    box-shadow:none;\n\n    position: relative;\n\n    box-shadow: none;\n\n    border-radius: var(--p-border-radius-0);\n\n    border: none;\n}\n\n    .sca-polaris .Polaris-LegacyCard::before {\n    content: none;\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 0;\n    box-shadow: var(--p-shadow-bevel-100);\n    border-radius: var(--p-border-radius-0);\n    pointer-events: none;\n    mix-blend-mode: luminosity;\n  }\n  }\n\n.sca-polaris .Polaris-LegacyCard--subdued{\n  background-color:var(--p-color-bg-surface-secondary);\n}\n\n@media print{\n\n.sca-polaris .Polaris-LegacyCard__Section--hideOnPrint,\n.sca-polaris .Polaris-LegacyCard--hideOnPrint{\n    display:none !important;\n}\n  }\n\n.sca-polaris .Polaris-LegacyCard__Header{\n  padding:var(--p-space-400) var(--p-space-400) 0;\n}\n\n@media (min-width: 30.625em){\n\n.sca-polaris .Polaris-LegacyCard__Header{\n    padding:var(--p-space-200) var(--p-space-400) 0;\n}\n  }\n\n@media print and (min-width: 30.625em){\n  .sca-polaris .Polaris-LegacyCard__Header{\n    padding:var(--p-space-200) var(--p-space-400) 0;\n  }\n}\n\n.sca-polaris .Polaris-LegacyCard__Section{\n  padding:var(--p-space-200) var(--p-space-400);\n}\n\n@media (min-width: 30.625em){\n\n.sca-polaris .Polaris-LegacyCard__Section{\n    padding:var(--p-space-200) var(--p-space-400);\n}\n  }\n\n.sca-polaris .Polaris-LegacyCard__Section + .Polaris-LegacyCard__Section{\n    border-top:0;\n  }\n\n@media print{\n\n.sca-polaris .Polaris-LegacyCard__Section + .Polaris-LegacyCard__Section{\n      border-top:0;\n  }\n    }\n\n@media print{\n\n.sca-polaris .Polaris-LegacyCard__Section{\n    padding-top:var(--p-space-100);\n    padding-bottom:var(--p-space-100);\n}\n  }\n\n.sca-polaris .Polaris-LegacyCard__Section--fullWidth{\n  padding:var(--p-space-400) 0;\n}\n\n@media (min-width: 30.625em){\n\n.sca-polaris .Polaris-LegacyCard__Section--fullWidth{\n    padding:var(--p-space-400) 0;\n}\n  }\n\n.sca-polaris .Polaris-LegacyCard__Section--flush{\n  padding:0;\n}\n\n@media (min-width: 30.625em){\n\n.sca-polaris .Polaris-LegacyCard__Section--flush{\n    padding:0;\n}\n  }\n\n.sca-polaris .Polaris-LegacyCard__Section--subdued{\n  background-color:var(--p-color-bg-surface-secondary);\n  padding:var(--p-space-300) var(--p-space-400);\n}\n\n@media (-ms-high-contrast: active){\n\n.sca-polaris .Polaris-LegacyCard__Section--subdued{\n    background-color:transparent;\n}\n  }\n\n.sca-polaris .Polaris-LegacyCard__Header + .Polaris-LegacyCard__Section--subdued{\n    border-top:0;\n    margin-top:0;\n  }\n\n.sca-polaris .Polaris-LegacyCard__Section--subdued:last-child{\n  padding:var(--p-space-400);\n}\n\n@media print{\n\n.sca-polaris .Polaris-LegacyCard__Section--subdued:last-child{\n    padding-top:var(--p-space-200);\n    padding-bottom:var(--p-space-200);\n}\n  }\n\n.sca-polaris .Polaris-LegacyCard__SectionHeader{\n  padding-bottom:var(--p-space-200);\n}\n\n.sca-polaris .Polaris-LegacyCard__Section--fullWidth .Polaris-LegacyCard__SectionHeader{\n    padding-left:var(--p-space-400);\n    padding-right:var(--p-space-400);\n  }\n\n@media (min-width: 30.625em){\n\n.sca-polaris .Polaris-LegacyCard__Section--fullWidth .Polaris-LegacyCard__SectionHeader{\n      padding-left:var(--p-space-400);\n      padding-right:var(--p-space-400);\n  }\n    }\n\n.sca-polaris .Polaris-LegacyCard__Subsection + .Polaris-LegacyCard__Subsection{\n    border-top:0;\n    margin-top:0;\n    padding-top:var(--p-space-200);\n  }\n\n@media print{\n\n.sca-polaris .Polaris-LegacyCard__Subsection + .Polaris-LegacyCard__Subsection{\n      border-top:0;\n  }\n    }\n\n@media print{\n\n.sca-polaris .Polaris-LegacyCard__Subsection{\n    padding-top:var(--p-space-100);\n    padding-bottom:var(--p-space-100);\n}\n  }\n\n.sca-polaris .Polaris-LegacyCard__Footer{\n  display:flex;\n  justify-content:flex-end;\n\n  padding:0 var(--p-space-400) var(--p-space-400);\n}\n\n@media (min-width: 30.625em){\n\n.sca-polaris .Polaris-LegacyCard__Footer{\n    padding:0 var(--p-space-400) var(--p-space-400);\n}\n  }\n\n.sca-polaris .Polaris-LegacyCard__Footer.Polaris-LegacyCard__LeftJustified{\n    justify-content:flex-start;\n  }\n\n.sca-polaris .Polaris-LegacyCard__Section--subdued + .Polaris-LegacyCard__Footer{\n    padding:var(--p-space-400);\n    border-top:0;\n  }\n\n.sca-polaris .Polaris-LegacyCard__FirstSectionPadding{\n  padding-top:var(--p-space-400);\n}\n\n.sca-polaris .Polaris-LegacyCard__LastSectionPadding{\n  padding-bottom:var(--p-space-400);\n}\n\n\n.sca-polaris .Polaris-RadioButton{\n  position:relative;\n  margin:var(--p-space-025);\n}\n\n.sca-polaris .Polaris-RadioButton__Input{\n  position: absolute !important;\n  top: 0;\n  width: 0.0625rem !important;\n  height: 0.0625rem !important;\n  margin: 0 !important;\n  padding: 0 !important;\n  overflow: hidden !important;\n  clip-path: inset(50%) !important;\n  border: 0 !important;\n  white-space: nowrap !important;\n}\n\n.sca-polaris .Polaris-RadioButton__Input:focus-visible + .Polaris-RadioButton__Backdrop{\n    outline:var(--p-border-width-050) solid var(--p-color-border-focus);\n    outline-offset:var(--p-space-025);\n  }\n\n.sca-polaris .Polaris-RadioButton__Input:focus-visible + .Polaris-RadioButton__Backdrop::after{\n      border-radius:var(--p-border-radius-full);\n    }\n\n.sca-polaris .Polaris-RadioButton__Input:checked + .Polaris-RadioButton__Backdrop,\n    \n    \n    \n    \n    .sca-polaris .Polaris-RadioButton__ChoiceLabel:hover .Polaris-RadioButton__Input:checked + .Polaris-RadioButton__Backdrop{\n      border-color:var(--p-color-border-emphasis);\n    }\n\n.sca-polaris .Polaris-RadioButton__Input:checked + .Polaris-RadioButton__Backdrop::before, .sca-polaris .Polaris-RadioButton__ChoiceLabel:hover .Polaris-RadioButton__Input:checked + .Polaris-RadioButton__Backdrop::before{\n        background-color:var(--p-color-text-brand-on-bg-fill);\n        transition:opacity var(--p-motion-duration-150) var(--p-motion-ease-out), transform var(--p-motion-duration-150) var(--p-motion-ease-out);\n        opacity:1;\n        transform:translate(-50%, -50%) scale(1);\n      }\n\n.sca-polaris .Polaris-RadioButton__Input:checked:not([disabled]) + .Polaris-RadioButton__Backdrop,\n    .sca-polaris .Polaris-RadioButton__ChoiceLabel:hover .Polaris-RadioButton__Input:checked:not([disabled]) + .Polaris-RadioButton__Backdrop{\n      background-color:var(--p-color-bg-fill-brand-selected);\n      border-color:var(--p-color-bg-fill-brand-selected);\n    }\n\n.sca-polaris .Polaris-RadioButton__Input.Polaris-RadioButton--toneMagic:checked:not([disabled]) + .Polaris-RadioButton__Backdrop,\n    .sca-polaris .Polaris-RadioButton__ChoiceLabel:hover .Polaris-RadioButton__Input.Polaris-RadioButton--toneMagic:checked:not([disabled]) + .Polaris-RadioButton__Backdrop{\n      background-color:var(--p-color-bg-fill-magic);\n      border-color:var(--p-color-bg-fill-magic);\n    }\n\n.sca-polaris .Polaris-RadioButton__Input.Polaris-RadioButton--toneMagic:checked:not([disabled]) + .Polaris-RadioButton__Backdrop::before,\n      .sca-polaris .Polaris-RadioButton__ChoiceLabel:hover .Polaris-RadioButton__Input.Polaris-RadioButton--toneMagic:checked:not([disabled]) + .Polaris-RadioButton__Backdrop::before{\n        background-color:var(--p-color-text-magic-on-bg-fill);\n      }\n\n.sca-polaris .Polaris-RadioButton__ChoiceLabel:hover .Polaris-RadioButton__Input + .Polaris-RadioButton__Backdrop{\n      cursor:pointer;\n      border-color:var(--p-color-input-border-hover);\n      background:var(--p-color-input-bg-surface-hover);\n    }\n\n.sca-polaris .Polaris-RadioButton__ChoiceLabel:active .Polaris-RadioButton__Input + .Polaris-RadioButton__Backdrop{\n      border-color:var(--p-color-bg-fill-brand);\n      border-width:var(--p-border-width-050);\n    }\n\n.sca-polaris .Polaris-RadioButton__Input:disabled + .Polaris-RadioButton__Backdrop,\n    .sca-polaris .Polaris-RadioButton__ChoiceLabel:hover .Polaris-RadioButton__Input:disabled + .Polaris-RadioButton__Backdrop{\n      cursor:default;\n      background-color:var(--p-color-radio-button-bg-surface-disabled);\n      border:none;\n    }\n\n.sca-polaris .Polaris-RadioButton__Input:disabled + .Polaris-RadioButton__Backdrop::before, .sca-polaris .Polaris-RadioButton__ChoiceLabel:hover .Polaris-RadioButton__Input:disabled + .Polaris-RadioButton__Backdrop::before{\n        background-color:var(--p-color-border-disabled);\n      }\n\n.sca-polaris .Polaris-RadioButton__Input:disabled:checked + .Polaris-RadioButton__Backdrop::before,\n    .sca-polaris .Polaris-RadioButton__ChoiceLabel:hover .Polaris-RadioButton__Input:disabled:checked + .Polaris-RadioButton__Backdrop::before{\n      background-color:var(--p-color-radio-button-icon-disabled);\n    }\n\n.sca-polaris .Polaris-RadioButton__Backdrop{\n  --pc-icon-size-small:0.5rem;\n  position:relative;\n  top:0;\n  left:0;\n  display:block;\n  width:100%;\n  height:100%;\n  border:var(--p-border-width-0165) solid var(--p-color-input-border);\n  border-radius:var(--p-border-radius-full);\n  background-color:var(--p-color-input-bg-surface);\n  transition:border-color var(--p-motion-duration-100) var(--p-motion-ease-out);\n}\n\n@media (max-width: 47.9975em){\n\n.sca-polaris .Polaris-RadioButton__Backdrop{\n    --pc-icon-size-small:0.625rem;\n}\n  }\n\n.sca-polaris .Polaris-RadioButton__Backdrop::before{\n    content:'';\n    position:absolute;\n    top:50%;\n    left:50%;\n    opacity:0;\n    transform:translate(-50%, -50%) scale(0.1);\n    transform-origin:50% 50%;\n    height:var(--pc-icon-size-small);\n    width:var(--pc-icon-size-small);\n    background-color:var(--p-color-bg-fill-brand);\n    border-radius:var(--p-border-radius-full);\n    transition:opacity var(--p-motion-duration-100) var(--p-motion-ease-out), transform var(--p-motion-duration-100) var(--p-motion-ease-out);\n  }\n\n@media (forced-colors: active){\n\n.sca-polaris .Polaris-RadioButton__Backdrop::before{\n      border:var(--p-border-width-100) solid transparent;\n  }\n    }\n\n.sca-polaris .Polaris-RadioButton__Backdrop{\n  position: relative;\n}\n\n.sca-polaris .Polaris-RadioButton__Backdrop::after {\n  content: '';\n  position: absolute;\n  z-index: 1;\n  top: calc(var(--p-border-width-050)*-1 + -0.0625rem);\n  right: calc(var(--p-border-width-050)*-1 + -0.0625rem);\n  bottom: calc(var(--p-border-width-050)*-1 + -0.0625rem);\n  left: calc(var(--p-border-width-050)*-1 + -0.0625rem);\n  display: block;\n  pointer-events: none;\n  box-shadow: 0 0 0 calc(var(--p-border-width-050)*-1 + -0.0625rem) var(--p-color-border-focus);\n  border-radius: var(--p-border-radius-100);\n}\n\n.sca-polaris .Polaris-RadioButton__Backdrop::after{\n    border-radius:var(--p-border-radius-full);\n  }\n\n\n.sca-polaris .Polaris-Collapsible{\n  padding-top:0;\n  padding-bottom:0;\n  max-height:0;\n  overflow:hidden;\n  transition-property:max-height;\n  transition-duration:var(--p-motion-duration-100);\n  transition-timing-function:var(--p-motion-ease-out);\n}\n\n.sca-polaris .Polaris-Collapsible--isFullyClosed{\n  display:none;\n}\n\n@media print{\n\n.sca-polaris .Polaris-Collapsible--expandOnPrint{\n    max-height:none !important;\n    max-width:none !important;\n    overflow:visible;\n    display:block;\n}\n  }\n\n.sca-polaris .Polaris-Collapsible--inline{\n  max-height:none;\n  transition-property:max-width;\n}\n\n.sca-polaris .Polaris-Collapsible--inline.Polaris-Collapsible--animateIn{\n    max-width:0;\n  }\n\n\n.sca-polaris .Polaris-InlineGrid{\n  --pc-inline-grid-gap-xs: initial;\n  --pc-inline-grid-gap-sm: initial;\n  --pc-inline-grid-gap-md: initial;\n  --pc-inline-grid-gap-lg: initial;\n  --pc-inline-grid-gap-xl: initial;\n  gap: var(--pc-inline-grid-gap-xs);\n  --pc-inline-grid-grid-template-columns-xs: initial;\n  --pc-inline-grid-grid-template-columns-sm: initial;\n  --pc-inline-grid-grid-template-columns-md: initial;\n  --pc-inline-grid-grid-template-columns-lg: initial;\n  --pc-inline-grid-grid-template-columns-xl: initial;\n  grid-template-columns: var(--pc-inline-grid-grid-template-columns-xs);\n  --pc-inline-grid-align-items:initial;\n  display:grid;\n  align-items:var(--pc-inline-grid-align-items);\n}\n@media (min-width: 30.625em) {\n  .sca-polaris .Polaris-InlineGrid{\n    gap: var(\n        --pc-inline-grid-gap-sm,\n        var(--pc-inline-grid-gap-xs)\n      );\n}\n}\n@media (min-width: 48em) {\n  .sca-polaris .Polaris-InlineGrid{\n    gap: var(\n        --pc-inline-grid-gap-md,\n        var(\n          --pc-inline-grid-gap-sm,\n          var(--pc-inline-grid-gap-xs)\n        )\n      );\n}\n}\n@media (min-width: 65em) {\n  .sca-polaris .Polaris-InlineGrid{\n    gap: var(\n        --pc-inline-grid-gap-lg,\n        var(\n          --pc-inline-grid-gap-md,\n          var(\n            --pc-inline-grid-gap-sm,\n            var(--pc-inline-grid-gap-xs)\n          )\n        )\n      );\n}\n}\n@media (min-width: 90em) {\n  .sca-polaris .Polaris-InlineGrid{\n    gap: var(\n        --pc-inline-grid-gap-xl,\n        var(\n          --pc-inline-grid-gap-lg,\n          var(\n            --pc-inline-grid-gap-md,\n            var(\n              --pc-inline-grid-gap-sm,\n              var(--pc-inline-grid-gap-xs)\n            )\n          )\n        )\n      );\n}\n}\n@media (min-width: 30.625em) {\n  .sca-polaris .Polaris-InlineGrid{\n    grid-template-columns: var(\n        --pc-inline-grid-grid-template-columns-sm,\n        var(--pc-inline-grid-grid-template-columns-xs)\n      );\n}\n}\n@media (min-width: 48em) {\n  .sca-polaris .Polaris-InlineGrid{\n    grid-template-columns: var(\n        --pc-inline-grid-grid-template-columns-md,\n        var(\n          --pc-inline-grid-grid-template-columns-sm,\n          var(--pc-inline-grid-grid-template-columns-xs)\n        )\n      );\n}\n}\n@media (min-width: 65em) {\n  .sca-polaris .Polaris-InlineGrid{\n    grid-template-columns: var(\n        --pc-inline-grid-grid-template-columns-lg,\n        var(\n          --pc-inline-grid-grid-template-columns-md,\n          var(\n            --pc-inline-grid-grid-template-columns-sm,\n            var(--pc-inline-grid-grid-template-columns-xs)\n          )\n        )\n      );\n}\n}\n@media (min-width: 90em) {\n  .sca-polaris .Polaris-InlineGrid{\n    grid-template-columns: var(\n        --pc-inline-grid-grid-template-columns-xl,\n        var(\n          --pc-inline-grid-grid-template-columns-lg,\n          var(\n            --pc-inline-grid-grid-template-columns-md,\n            var(\n              --pc-inline-grid-grid-template-columns-sm,\n              var(--pc-inline-grid-grid-template-columns-xs)\n            )\n          )\n        )\n      );\n}\n}\n\n\n.sca-polaris .Polaris-DataTable{\n  --pc-data-table-first-column-width:9.0625rem;\n  position:relative;\n  max-width:100vw;\n  background-color:var(--p-color-bg-surface);\n  border-radius:0;\n  overflow:hidden;\n}\n\n@media (min-width: 30.625em){\n\n.sca-polaris .Polaris-DataTable{\n    border-radius:var(--p-border-radius-300);\n}\n  }\n\n.sca-polaris .Polaris-DataTable__Pip{\n  height:0.375rem;\n  width:0.375rem;\n  background:var(--p-color-icon-secondary);\n  border-radius:var(--p-border-radius-100);\n}\n\n.sca-polaris .Polaris-DataTable__Pip:not(:last-of-type){\n    margin-right:var(--p-space-100);\n  }\n\n.sca-polaris .Polaris-DataTable__Pip:first-of-type{\n    margin-left:var(--p-space-100);\n  }\n\n.sca-polaris .Polaris-DataTable__Pip:last-of-type{\n    margin-right:var(--p-space-100);\n  }\n\n.sca-polaris .Polaris-DataTable__Pip--visible{\n  background:var(--p-color-icon);\n}\n\n.sca-polaris .Polaris-DataTable__ScrollContainer{\n  overflow-x:auto;\n  -webkit-overflow-scrolling:touch;\n  scroll-behavior:smooth;\n  background-color:inherit;\n}\n\n.sca-polaris .Polaris-DataTable__Table{\n  width:100%;\n  border-spacing:0;\n}\n\n.sca-polaris .Polaris-DataTable__TableRow + .Polaris-DataTable__TableRow .Polaris-DataTable__Cell{\n    border-top:var(--p-border-width-025) solid var(--p-color-border-secondary);\n  }\n\n.sca-polaris .Polaris-DataTable__Cell{\n  font-weight:var(--p-font-weight-regular);\n  color:var(--p-color-text);\n  white-space:nowrap;\n  text-align:left;\n  transition:background-color var(--p-motion-duration-200) var(--p-motion-ease-in-out);\n\n  padding:var(--p-space-200) var(--p-space-150);\n}\n\n.sca-polaris .Polaris-DataTable__Cell:first-child{\n    padding-left:var(--p-space-300);\n  }\n\n.sca-polaris .Polaris-DataTable__Cell:last-child{\n    padding-right:var(--p-space-300);\n  }\n\n.sca-polaris .Polaris-DataTable__IncreasedTableDensity .Polaris-DataTable__Cell{\n    padding:var(--p-space-150);\n  }\n\n.sca-polaris .Polaris-DataTable__IncreasedTableDensity .Polaris-DataTable__Cell:first-child{\n      padding-left:var(--p-space-300);\n    }\n\n.sca-polaris .Polaris-DataTable__IncreasedTableDensity .Polaris-DataTable__Cell:last-child{\n      padding-right:var(--p-space-300);\n    }\n\n.sca-polaris .Polaris-DataTable__ZebraStripingOnData .Polaris-DataTable__TableRow:nth-child(2n + 1) .Polaris-DataTable__Cell,\n  .sca-polaris .Polaris-DataTable__ZebraStripingOnData.Polaris-DataTable__RowCountIsEven .Polaris-DataTable__TableRow:nth-child(2n) .Polaris-DataTable__Cell,\n  .sca-polaris .Polaris-DataTable__ZebraStripingOnData.Polaris-DataTable__ShowTotalsInFooter .Polaris-DataTable__TableRow:nth-child(2n) .Polaris-DataTable__Cell,\n  .sca-polaris .Polaris-DataTable__ZebraStripingOnData.Polaris-DataTable__ShowTotalsInFooter.Polaris-DataTable__RowCountIsEven .Polaris-DataTable__TableRow:nth-child(2n + 1) .Polaris-DataTable__Cell{\n    background:none;\n  }\n\n.sca-polaris .Polaris-DataTable__ZebraStripingOnData .Polaris-DataTable__TableRow:nth-child(2n) .Polaris-DataTable__Cell,\n  .sca-polaris .Polaris-DataTable__ZebraStripingOnData.Polaris-DataTable__RowCountIsEven .Polaris-DataTable__TableRow:nth-child(2n + 1) .Polaris-DataTable__Cell,\n  .sca-polaris .Polaris-DataTable__ZebraStripingOnData.Polaris-DataTable__ShowTotalsInFooter .Polaris-DataTable__TableRow:nth-child(2n + 1) .Polaris-DataTable__Cell,\n  .sca-polaris .Polaris-DataTable__ZebraStripingOnData.Polaris-DataTable__ShowTotalsInFooter.Polaris-DataTable__RowCountIsEven .Polaris-DataTable__TableRow:nth-child(2n) .Polaris-DataTable__Cell{\n    background:var(--p-color-bg-surface-secondary);\n  }\n\n.sca-polaris .Polaris-DataTable__Cell--separate::after{\n  content:'';\n  position:absolute;\n  top:0;\n  right:0;\n  bottom:0;\n  border-right:var(--p-border-width-025) solid var(--p-color-border);\n}\n\n.sca-polaris .Polaris-DataTable__Cell--firstColumn{\n  text-align:left;\n  white-space:normal;\n}\n\n.sca-polaris .Polaris-DataTable__Cell--numeric{\n  text-align:right;\n}\n\n.sca-polaris .Polaris-DataTable__Cell--truncated{\n  white-space:nowrap;\n  overflow-x:hidden;\n  text-overflow:ellipsis;\n  max-width:var(--pc-data-table-first-column-width);\n}\n\n.sca-polaris .Polaris-DataTable__Cell--header{\n  font-weight:var(--p-font-weight-regular);\n  color:var(--p-color-text);\n  border-bottom:var(--p-border-width-025) solid var(--p-color-border);\n  border-top:0;\n  padding-top:var(--p-space-300);\n  padding-bottom:var(--p-space-300);\n}\n\n.sca-polaris .Polaris-DataTable__IncreasedTableDensity .Polaris-DataTable__Cell--header{\n    font-weight:var(--p-font-weight-regular);\n  }\n\n.sca-polaris .Polaris-DataTable__Cell--verticalAlignTop{\n  vertical-align:top;\n}\n\n.sca-polaris .Polaris-DataTable__Cell--verticalAlignBottom{\n  vertical-align:bottom;\n}\n\n.sca-polaris .Polaris-DataTable__Cell--verticalAlignMiddle{\n  vertical-align:middle;\n}\n\n.sca-polaris .Polaris-DataTable__Cell--verticalAlignBaseline{\n  vertical-align:baseline;\n}\n\n@media (min-width: 48em){\n\n.sca-polaris .Polaris-DataTable--hoverable .Polaris-DataTable__Cell--hovered{\n      background:var(--p-color-bg-surface-hover);\n  }\n    }\n\n.sca-polaris .Polaris-DataTable__Cell--sorted:hover svg{\n    fill:var(--p-color-icon);\n  }\n\n.sca-polaris .Polaris-DataTable__Cell--total{\n  font-weight:var(--p-font-weight-semibold);\n  background:var(--p-color-bg-surface-secondary);\n  border-bottom:var(--p-border-width-025) solid var(--p-color-border);\n}\n\n.sca-polaris .Polaris-DataTable__ZebraStripingOnData.Polaris-DataTable__ShowTotals .Polaris-DataTable__Cell--total{\n    background:var(--p-color-bg-surface-secondary);\n  }\n\n.sca-polaris .Polaris-DataTable__ZebraStripingOnData.Polaris-DataTable__ShowTotals.Polaris-DataTable__RowCountIsEven .Polaris-DataTable__Cell--total,\n  .sca-polaris .Polaris-DataTable__ZebraStripingOnData.Polaris-DataTable__ShowTotalsInFooter .Polaris-DataTable__Cell--total{\n    background:none;\n  }\n\n.sca-polaris .Polaris-DataTable--cellTotalFooter{\n  border-top:var(--p-border-width-025) solid var(--p-color-border);\n  border-bottom:none;\n}\n\n.sca-polaris .Polaris-DataTable__Footer{\n  padding:var(--p-space-200) var(--p-space-300);\n  background:var(--p-color-bg-surface-secondary);\n  color:var(--p-color-text-secondary);\n  text-align:center;\n  border-top:var(--p-border-width-025) solid var(--p-color-border);\n}\n\n.sca-polaris .Polaris-DataTable__IncreasedTableDensity .Polaris-DataTable__Footer{\n    padding:var(--p-space-150) var(--p-space-300);\n  }\n\n.sca-polaris .Polaris-DataTable__ZebraStripingOnData .Polaris-DataTable__Footer{\n    background:none;\n  }\n\n.sca-polaris .Polaris-DataTable__StickyHeaderEnabled .Polaris-DataTable__StickyHeaderWrapper{\n    position:relative;\n    top:0;\n    left:0;\n    right:0;\n    visibility:hidden;\n    z-index:var(--p-z-index-1);\n  }\n\n.sca-polaris .Polaris-DataTable__StickyHeaderEnabled .Polaris-DataTable__StickyHeaderInner{\n    position:absolute;\n    display:flex;\n    flex-direction:column;\n    width:100%;\n    overflow:hidden;\n    border-spacing:0;\n  }\n\n.sca-polaris .Polaris-DataTable__StickyHeaderEnabled .Polaris-DataTable__StickyHeaderInner:not(.Polaris-DataTable__StickyHeaderInner--isSticky){\n      top:-624.9375rem;\n      left:-624.9375rem;\n    }\n\n.sca-polaris .Polaris-DataTable__StickyHeaderEnabled .Polaris-DataTable__StickyHeaderTable{\n    border-collapse:collapse;\n    display:block;\n    overflow-x:auto;\n    width:100%;\n    scrollbar-width:none;\n  }\n\n.sca-polaris .Polaris-DataTable__StickyHeaderEnabled .Polaris-DataTable__StickyHeaderTable::-webkit-scrollbar{\n      -webkit-appearance:none;\n              appearance:none;\n      height:0;\n      width:0;\n    }\n\n.sca-polaris .Polaris-DataTable__StickyHeaderEnabled .Polaris-DataTable__StickyHeaderInner--isSticky{\n    visibility:visible;\n    background-color:var(--p-color-bg-surface);\n    box-shadow:var(--p-shadow-100);\n  }\n\n.sca-polaris .Polaris-DataTable__TooltipContent{\n  display:block;\n  overflow:hidden;\n  white-space:nowrap;\n  text-overflow:ellipsis;\n}\n\n\n.sca-polaris .Polaris-Divider{\n  border:0;\n  margin:0;\n}\n\n\n.sca-polaris .Polaris-FormLayout__Item{\n  --pc-form-layout-item-min-size:13.75rem;\n  flex:1 1;\n}\n.sca-polaris .Polaris-FormLayout__Item.Polaris-FormLayout--grouped{\n    min-width:var(--pc-form-layout-item-min-size);\n  }\n@media (min-width: 0em) and (max-width: 30.6225em){\n  .sca-polaris .Polaris-FormLayout__Item.Polaris-FormLayout--grouped{\n      min-width:100%;\n  }\n    }\n\n\n.sca-polaris .Polaris-Frame-Toast{\n  display:inline-flex;\n  max-width:31.25rem;\n  padding:var(--p-space-200) var(--p-space-300);\n  border-radius:var(--p-border-radius-100);\n  background:var(--p-color-bg-inverse);\n  color:var(--p-color-text-inverse);\n  margin-bottom:var(--p-space-500);\n  box-shadow:var(--p-shadow-500);\n\n  position: relative;\n\n  box-shadow: var(--p-shadow-400);\n\n  border-radius: var(--p-border-radius-200);\n}\n\n.sca-polaris .Polaris-Frame-Toast::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 0;\n  box-shadow: var(--p-shadow-bevel-100);\n  border-radius: var(--p-border-radius-200);\n  pointer-events: none;\n  mix-blend-mode: luminosity;\n}\n\n@media (min-width: 30.625em){\n\n.sca-polaris .Polaris-Frame-Toast{\n    padding:var(--p-space-300);\n}\n  }\n\n@media (forced-colors: active){\n\n.sca-polaris .Polaris-Frame-Toast{\n    border:var(--p-border-width-050) solid transparent;\n}\n  }\n\n.sca-polaris .Polaris-Frame-Toast__CloseButton{\n  display:flex;\n  align-self:center;\n  flex-direction:column;\n  justify-content:flex-start;\n  padding:0;\n  border:none;\n  -webkit-appearance:none;\n          appearance:none;\n  background:transparent;\n  color:var(--p-color-icon-inverse);\n  cursor:pointer;\n  margin-left:var(--p-space-200);\n}\n\n.sca-polaris .Polaris-Frame-Toast__CloseButton:focus{\n    outline:none;\n  }\n\n.sca-polaris .Polaris-Frame-Toast__CloseButton:focus,\n  .sca-polaris .Polaris-Frame-Toast__CloseButton:hover{\n    color:var(--p-color-text-inverse);\n  }\n\n\n.sca-polaris{\n  --pc-toast-manager-translate-y-out:9.375rem;\n  --pc-toast-manager-translate-y-in:0;\n  --pc-toast-manager-scale-in:1;\n  --pc-toast-manager-scale-out:0.9;\n  --pc-toast-manager-blur-in:0;\n  --pc-toast-manager-transition-delay-in:0s;\n}\n\n.sca-polaris .Polaris-Frame-ToastManager{\n  position:fixed;\n  z-index:var(--p-z-index-12);\n  right:0;\n  left:0;\n  text-align:center;\n  bottom:var(--pc-frame-global-ribbon-height);\n  display:flex;\n  flex-direction:column;\n  align-items:center;\n}\n\n.sca-polaris .Polaris-Frame-ToastManager__ToastWrapper{\n  position:absolute;\n  display:inline-flex;\n  opacity:0;\n  transition:transform var(--p-motion-duration-400) var(--p-motion-ease-out), opacity var(--p-motion-duration-400) var(--p-motion-ease-out);\n  transform:translateY(var(--pc-toast-manager-translate-y-out));\n}\n\n.sca-polaris .Polaris-Frame-ToastManager__ToastWrapper--enter,\n.sca-polaris .Polaris-Frame-ToastManager__ToastWrapper--exit{\n  transition-timing-function:var(--p-motion-ease-in);\n  transform:translateY(var(--pc-toast-manager-translate-y-out)) scale(var(--pc-toast-manager-scale-out));\n  opacity:0;\n}\n\n.sca-polaris .Polaris-Frame-ToastManager__ToastWrapper--exit{\n  transition-duration:var(--p-motion-duration-200);\n}\n\n.sca-polaris .Polaris-Frame-ToastManager--toastWrapperEnterDone{\n  transform:translateY(var(--pc-toast-manager-translate-y-in)) scale(var(--pc-toast-manager-scale-in));\n  filter:blur(var(--pc-toast-manager-blur-in));\n  opacity:1;\n  transition-delay:var(--pc-toast-manager-transition-delay-in);\n}\n\n.sca-polaris .Polaris-Frame-ToastManager--toastWrapperHoverable{\n  cursor:pointer;\n}\n\n\n.sca-polaris .Polaris-Modal-Dialog__Container{\n  position:fixed;\n  z-index:var(--p-z-index-11);\n  top:0;\n  right:0;\n  bottom:0;\n  left:0;\n  display:flex;\n  flex-direction:column;\n  justify-content:flex-end;\n  pointer-events:none;\n}\n\n@media (min-width: 48em){\n\n.sca-polaris .Polaris-Modal-Dialog__Container{\n    justify-content:center;\n}\n  }\n\n.sca-polaris .Polaris-Modal-Dialog:focus{\n  outline:0;\n}\n\n.sca-polaris .Polaris-Modal-Dialog__Modal{\n  --pc-modal-dialog-vertical-spacing:3.75rem;\n  pointer-events:initial;\n  position:fixed;\n  right:0;\n  bottom:0;\n  left:0;\n  display:flex;\n  flex-direction:column;\n  width:100%;\n  max-height:calc(100vh - var(--pc-modal-dialog-vertical-spacing));\n  background:var(--p-color-bg-surface);\n  box-shadow:var(--p-shadow-600);\n  overflow:hidden;\n}\n\n@media (forced-colors: active){\n\n.sca-polaris .Polaris-Modal-Dialog__Modal{\n    border:var(--p-border-width-025) solid transparent;\n}\n  }\n\n@media (max-width: 47.9975em){\n\n.sca-polaris .Polaris-Modal-Dialog__Modal{\n    bottom:0;\n    max-height:100%;\n}\n  }\n\n@media (min-width: 48em){\n\n.sca-polaris .Polaris-Modal-Dialog__Modal{\n    position:relative;\n    max-width:38.75rem;\n    margin:0 auto;\n    border-radius:var(--p-border-radius-400);\n}\n  }\n\n@media (min-width: 48em) and (min-height: 41.25em){\n\n.sca-polaris .Polaris-Modal-Dialog__Modal.Polaris-Modal-Dialog--limitHeight{\n        max-height:37.5rem;\n  }\n      }\n\n.sca-polaris .Polaris-Modal-Dialog--animateFadeUp{\n  -webkit-backface-visibility:hidden;\n          backface-visibility:hidden;\n  will-change:transform, opacity;\n  opacity:1;\n  transform:translateY(0);\n  transition:transform var(--p-motion-ease) var(--p-motion-duration-200), opacity var(--p-motion-ease) var(--p-motion-duration-200);\n}\n\n.sca-polaris .Polaris-Modal-Dialog--animateFadeUp.Polaris-Modal-Dialog--entering,\n  .sca-polaris .Polaris-Modal-Dialog--animateFadeUp.Polaris-Modal-Dialog--exiting,\n  .sca-polaris .Polaris-Modal-Dialog--animateFadeUp.Polaris-Modal-Dialog--exited{\n    opacity:0;\n    transform:translateY(12.5rem);\n  }\n\n.sca-polaris .Polaris-Modal-Dialog--animateFadeUp.Polaris-Modal-Dialog--entered{\n    opacity:1;\n    transform:translateY(0);\n  }\n\n\n.sca-polaris .Polaris-Modal-Section{\n  flex:0 0 auto;\n}\n\n.sca-polaris .Polaris-Modal-Section:not(:last-of-type){\n    border-bottom:var(--p-border-width-025) solid var(--p-color-border-secondary);\n  }\n\n.sca-polaris .Polaris-Modal-Section--titleHidden{\n  padding-right:calc(var(--p-space-1200) + var(--p-space-100) + var(--p-space-100));\n}\n\n\n.sca-polaris .Polaris-Modal__Body,\n.sca-polaris .Polaris-Modal__NoScrollBody{\n  flex-grow:1;\n}\n\n@media (min-width: 48em){\n\n.sca-polaris .Polaris-Modal__Body,\n.sca-polaris .Polaris-Modal__NoScrollBody{\n    flex-grow:unset;\n}\n  }\n\n\n.sca-polaris{\n  --item-min-height:var(--p-space-400);\n  --item-min-width:3.125rem;\n  --item-vertical-padding:var(--p-space-200);\n}\n\n@media (max-width: 47.9975em){\n\n.sca-polaris .Polaris-Tabs__Outer{\n    max-width:100%;\n    overflow:hidden;\n    height:unset;\n    padding:0;\n}\n  }\n\n@media (max-width: 47.9975em){\n\n.sca-polaris .Polaris-Tabs__Wrapper{\n    overflow:auto;\n    -webkit-overflow-scrolling:touch;\n    padding:var(--p-space-200);\n}\n  }\n\n@media (min-width: 48em){\n\n.sca-polaris .Polaris-Tabs__WrapperWithNewButton{\n    position:relative;\n    display:inline-flex;\n    padding-right:var(--p-space-800);\n}\n  }\n\n@media (max-width: 47.9975em){\n\n.sca-polaris .Polaris-Tabs__ButtonWrapper{\n    display:flex;\n    align-items:center;\n    justify-content:flex-start;\n}\n  }\n\n.sca-polaris .Polaris-Tabs{\n  display:flex;\n  align-items:center;\n  justify-content:flex-start;\n  margin:0;\n  padding:0;\n  list-style:none;\n  gap:var(--p-space-100);\n}\n\n@media (min-width: 48em){\n\n.sca-polaris .Polaris-Tabs{\n    padding:0 var(--p-space-100);\n    flex-wrap:wrap;\n    align-items:stretch;\n}\n  }\n\n.sca-polaris .Polaris-Tabs__Tab{\n  position: relative;\n  -webkit-tap-highlight-color:rgba(0, 0, 0, 0);\n  position:relative;\n  display:inline-flex;\n  justify-content:center;\n  align-items:center;\n  padding:var(--p-space-100) var(--p-space-300);\n  border:0;\n  border-radius:var(--p-border-radius-200);\n  background-color:transparent;\n  color:var(--p-color-text-brand);\n  cursor:pointer;\n  text-decoration:none;\n  width:100%;\n  height:var(--p-height-700);\n  min-width:100%;\n  margin-top:var(--p-space-025);\n  margin-bottom:calc(var(--p-space-025)*-1);\n  outline:none;\n  text-align:center;\n  white-space:nowrap;\n}\n\n.sca-polaris .Polaris-Tabs__Tab::after {\n  content: '';\n  position: absolute;\n  z-index: 1;\n  top: -0.0625rem;\n  right: -0.0625rem;\n  bottom: -0.0625rem;\n  left: -0.0625rem;\n  display: block;\n  pointer-events: none;\n  box-shadow: 0 0 0 -0.0625rem var(--p-color-border-focus);\n  border-radius: var(--p-border-radius-200);\n}\n\n.sca-polaris .Polaris-Tabs__Tab[aria-disabled='true']{\n    cursor:default;\n    color:var(--p-color-text-disabled);\n  }\n\n.sca-polaris .Polaris-Tabs__Tab[aria-disabled='true'] path{\n      fill:var(--p-color-icon-disabled);\n    }\n\n.sca-polaris .Polaris-Tabs__Tab:not([aria-disabled='true']):hover{\n    background-color:var(--p-color-bg-fill-transparent-hover);\n    color:var(--p-color-text-brand);\n  }\n\n.sca-polaris .Polaris-Tabs__Tab:not([aria-disabled='true']):focus{\n    background-color:var(--p-color-bg-surface-hover);\n    color:var(--p-color-text);\n  }\n\n.sca-polaris .Polaris-Tabs__Tab:not([aria-disabled='true']):focus-visible{\n    background-color:transparent;\n    color:var(--p-color-text-brand);\n  }\n\n.sca-polaris .Polaris-Tabs__Tab:not([aria-disabled='true']):focus-visible::after {\n  box-shadow: 0 0 0 0.125rem var(--p-color-border-focus);\n  outline: var(--p-border-width-025) solid transparent;\n}\n\n.sca-polaris .Polaris-Tabs__Tab:not([aria-disabled='true']):focus-visible:not(:active){\n    outline:0;\n  }\n\n.sca-polaris .Polaris-Tabs__Tab:not([aria-disabled='true']):focus-visible:not(:active)::after {\n  box-shadow: 0 0 0 0.125rem var(--p-color-border-focus);\n  outline: var(--p-border-width-025) solid transparent;\n}\n\n.sca-polaris .Polaris-Tabs__Tab:not([aria-disabled='true']):active{\n    background-color:var(--p-color-bg-surface-tertiary);\n    color:var(--p-color-text-brand);\n    z-index:var(--p-z-index-1);\n  }\n\n.sca-polaris .Polaris-Tabs__Tab path{\n    fill:currentColor;\n  }\n\n.sca-polaris .Polaris-Tabs__Tab--active{\n  background:var(--p-color-bg-fill-transparent-selected);\n  border-radius:var(--p-border-radius-200);\n  color:var(--p-color-text);\n}\n\n.sca-polaris .Polaris-Tabs__Tab--active[aria-disabled='true']{\n    background:var(--p-color-bg-surface-disabled);\n    color:var(--p-color-text-disabled);\n  }\n\n.sca-polaris .Polaris-Tabs__Tab--active:not([aria-disabled='true']):hover,\n  .sca-polaris .Polaris-Tabs__Tab--active:not([aria-disabled='true']):focus{\n    background-color:var(--p-color-bg-fill-transparent-hover);\n    color:var(--p-color-text-brand);\n  }\n\n.sca-polaris .Polaris-Tabs__Tab--active:not([aria-disabled='true']):active{\n    background-color:var(--p-color-bg-fill-transparent-selected);\n    color:var(--p-color-text-brand);\n  }\n\n.sca-polaris .Polaris-Tabs__Tab--hasActions{\n  padding-right:var(--p-space-200);\n}\n\n.sca-polaris .Polaris-Tabs__Tab--iconOnly{\n  padding-left:var(--p-space-100);\n  padding-right:var(--p-space-100);\n  width:var(--p-space-800);\n}\n\n.sca-polaris .Polaris-Tabs--fillSpace .Polaris-Tabs__TabContainer{\n    flex:1 1 auto;\n  }\n\n.sca-polaris .Polaris-Tabs--fitted{\n  flex-wrap:nowrap;\n}\n\n.sca-polaris .Polaris-Tabs--fitted .Polaris-Tabs__TabContainer{\n    flex:1 1 100%;\n  }\n\n.sca-polaris .Polaris-Tabs__TabContainer{\n  display:flex;\n  margin:0;\n  padding:0;\n}\n\n.sca-polaris .Polaris-Tabs--titleWithIcon{\n  display:flex;\n}\n\n.sca-polaris .Polaris-Tabs__TabsMeasurer{\n  display:flex;\n  gap:0;\n  padding:0;\n  visibility:hidden;\n  height:0;\n}\n\n.sca-polaris .Polaris-Tabs__NewTab{\n  padding:0 var(--p-space-200) 0 var(--p-space-100);\n}\n\n@media (min-width: 48em){\n\n.sca-polaris .Polaris-Tabs__NewTab{\n    position:absolute;\n    right:0;\n    top:0;\n    padding:0;\n}\n  }\n\n.sca-polaris .Polaris-Tabs__ActionListWrap{\n  display:block;\n}\n\n\n.sca-polaris .Polaris-IndexTable{\n  --pc-index-table-translate-offset:2.1875rem;\n  --pc-index-table-table-header-offset:var(--pg-control-height);\n  --pc-index-table-cell:1;\n  --pc-index-table-sticky-cell:29;\n  --pc-index-table-bulk-actions:31;\n  --pc-index-table-loading-panel:31;\n  --pc-index-table-checkbox-offset-left:var(--p-space-300);\n  --pc-index-table-checkbox-offset-right:var(--p-space-200);\n  position:relative;\n  border-radius:0;\n  scrollbar-color:auto;\n}\n\n@media (min-width: 30.625em){\n\n.sca-polaris .Polaris-IndexTable{\n    border-radius:inherit;\n    border-start-start-radius:0;\n    border-start-end-radius:0;\n}\n  }\n\n.sca-polaris .Polaris-IndexTable__IndexTableWrapper{\n  border-radius:0;\n}\n\n.sca-polaris .Polaris-IndexTable__IndexTableWrapper .Polaris-IndexTable__IndexTableWrapper--scrollBarHidden{\n    border-radius:inherit;\n  }\n\n.sca-polaris .Polaris-IndexTable__IndexTableWrapperWithSelectAllActions{\n  --pc-index-table-bulk-actions-offset:2.5625rem;\n  padding-bottom:var(--pc-index-table-bulk-actions-offset);\n  border-radius:0;\n}\n\n.sca-polaris .Polaris-IndexTable__Table{\n  width:100%;\n  min-width:100%;\n  border-collapse:collapse;\n}\n\n.sca-polaris .Polaris-IndexTable__TableRow{\n  background-color:var(--p-color-bg-surface);\n  cursor:pointer;\n  border-top:var(--p-border-width-025) solid var(--p-color-border-secondary);\n}\n\n.sca-polaris .Polaris-IndexTable__TableRow:first-child{\n    border-top:var(--p-border-width-025) solid var(--p-color-border);\n  }\n\n.sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--unclickable{\n    cursor:auto;\n  }\n\n.sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable--toneSuccess,\n    .sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable--toneSuccess .Polaris-IndexTable__TableCell:last-child{\n      background-color:var(--p-color-bg-surface-success);\n    }\n\n.sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneSuccess::before{\n        background-color:var(--p-color-bg-surface-success);\n      }\n\n.sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable--toneWarning,\n    .sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable--toneWarning .Polaris-IndexTable__TableCell:last-child{\n      background-color:var(--p-color-bg-surface-warning);\n    }\n\n.sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneWarning::before{\n        background-color:var(--p-color-bg-surface-warning);\n      }\n\n.sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable--toneCritical,\n    .sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable--toneCritical .Polaris-IndexTable__TableCell:last-child{\n      background-color:var(--p-color-bg-surface-critical);\n    }\n\n.sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneCritical::before{\n        background-color:var(--p-color-bg-surface-critical);\n      }\n\n.sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable--toneSubdued,\n    .sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable--toneSubdued .Polaris-IndexTable__TableCell:last-child{\n      background-color:var(--p-color-bg-surface-secondary);\n      color:var(--p-color-text-secondary);\n    }\n\n.sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneSubdued::before{\n        background-color:var(--p-color-bg-surface-secondary);\n      }\n\n.sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--subheader{\n    cursor:default;\n  }\n\n.sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--subheader,\n    .sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--subheader .Polaris-IndexTable__TableCell:first-child,\n    .sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--subheader .Polaris-IndexTable__TableCell:last-child{\n      color:var(--p-color-text-secondary);\n      font-weight:var(--p-font-weight-medium);\n      font-size:var(--p-font-size-300);\n      background-color:var(--p-color-bg-surface-secondary);\n      border-top:var(--p-border-width-025) solid var(--p-color-border);\n      border-bottom:var(--p-border-width-025) solid var(--p-color-border);\n      border-color:var(--p-color-border);\n    }\n\n.sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--child{\n    --pc-index-table-checkbox-width:var(--p-space-500);\n    --pc-index-table-checkbox-width-sm:calc(var(--pc-index-table-checkbox-width) + var(--p-width-050));\n    --pc-index-table-checkbox-padding-left:var(--p-space-300);\n    --pc-index-table-checkbox-padding-right:var(--p-width-150);\n    --pc-index-table-checkbox-child-offset:calc(var(--pc-index-table-checkbox-width) + var(--pc-index-table-checkbox-padding-left));\n    --pc-index-table-checkbox-child-offset-sm:calc(var(--pc-index-table-checkbox-width-sm) + var(--pc-index-table-checkbox-padding-left));\n    --pc-table-shifted-checkbox-z-index:30;\n  }\n\n.sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled),\n    .sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:last-child{\n      background-color:var(--p-color-bg-surface-hover);\n    }\n\n.sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--child:not(.Polaris-IndexTable__TableRow--disabled)::before{\n          background-color:var(--p-color-bg-surface-hover);\n        }\n\n.sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSuccess:not(.Polaris-IndexTable__TableRow--disabled),\n      .sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSuccess:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:last-child{\n        background-color:var(--p-color-bg-surface-success-hover);\n      }\n\n.sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneSuccess:not(.Polaris-IndexTable__TableRow--disabled)::before{\n          background-color:var(--p-color-bg-surface-success-hover);\n        }\n\n.sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneCritical:not(.Polaris-IndexTable__TableRow--disabled),\n      .sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneCritical:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:last-child{\n        background-color:var(--p-color-bg-surface-critical-hover);\n      }\n\n.sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneCritical:not(.Polaris-IndexTable__TableRow--disabled)::before{\n          background-color:var(--p-color-bg-surface-critical-hover);\n        }\n\n.sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneWarning:not(.Polaris-IndexTable__TableRow--disabled),\n      .sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneWarning:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:last-child{\n        background-color:var(--p-color-bg-surface-warning-hover);\n      }\n\n.sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneWarning:not(.Polaris-IndexTable__TableRow--disabled)::before{\n          background-color:var(--p-color-bg-surface-warning-hover);\n        }\n\n.sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSubdued:not(.Polaris-IndexTable__TableRow--disabled),\n      .sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSubdued:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:last-child{\n        background-color:var(--p-color-bg-surface-secondary-hover);\n      }\n\n.sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--child.Polaris-IndexTable--toneSubdued:not(.Polaris-IndexTable__TableRow--disabled)::before{\n          background-color:var(--p-color-bg-surface-secondary-hover);\n        }\n\n.sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--subheader:not(.Polaris-IndexTable__TableRow--disabled),\n      .sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--subheader:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:first-child,\n      .sca-polaris .Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--subheader:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:last-child{\n        background-color:var(--p-color-bg-surface-secondary);\n      }\n\n.sca-polaris .Polaris-IndexTable__TableRow--disabled{\n  cursor:default;\n  color:var(--p-color-text-secondary);\n}\n\n.sca-polaris .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow:nth-child(2n + 1),\n    .sca-polaris .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow:nth-child(2n + 1) .Polaris-IndexTable__TableCell:first-child,\n    .sca-polaris .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow:nth-child(2n + 1) .Polaris-IndexTable__TableCell:last-child{\n      background-color:var(--p-color-bg-surface);\n    }\n\n.sca-polaris .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow:nth-child(2n),\n    .sca-polaris .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow:nth-child(2n) .Polaris-IndexTable__TableCell:first-child,\n    .sca-polaris .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow:nth-child(2n) .Polaris-IndexTable__TableCell:last-child{\n      background:var(--p-color-bg-surface-secondary);\n    }\n\n.sca-polaris .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--child:nth-child(2n)::before{\n        background-color:var(--p-color-bg-surface-secondary);\n      }\n\n.sca-polaris .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n + 1),\n    .sca-polaris .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n),\n    .sca-polaris .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n + 1) .Polaris-IndexTable__TableCell:first-child,\n    .sca-polaris .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n) .Polaris-IndexTable__TableCell:first-child,\n    .sca-polaris .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n + 1) .Polaris-IndexTable__TableCell:last-child,\n    .sca-polaris .Polaris-IndexTable__ZebraStriping .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled):nth-child(2n) .Polaris-IndexTable__TableCell:last-child{\n      background-color:var(--p-color-bg-surface-hover);\n    }\n\n.sca-polaris .Polaris-IndexTable__TableHeading{\n  --pc-index-table-heading-padding-x:var(--p-space-150);\n  --pc-index-table-heading-padding-y:var(--p-space-200);\n  background:var(--p-color-bg-surface-secondary);\n  padding:var(--pc-index-table-heading-padding-y) var(--pc-index-table-heading-padding-x);\n  text-align:left;\n  font-weight:var(--p-font-weight-medium);\n  color:var(--p-color-text-secondary);\n  font-size:var(--p-font-size-300);\n  white-space:nowrap;\n  border:0;\n}\n\n.sca-polaris .Polaris-IndexTable__TableHeading:first-child:not(.Polaris-IndexTable__TableHeading--flush){\n    padding-left:var(--p-space-300);\n  }\n\n.sca-polaris .Polaris-IndexTable__TableHeading:last-child:not(.Polaris-IndexTable__TableHeading--flush){\n    padding-right:var(--p-space-300);\n    overflow-x:hidden;\n  }\n\n.sca-polaris .Polaris-IndexTable--tableHeadingAlignCenter{\n  text-align:center;\n}\n\n.sca-polaris .Polaris-IndexTable--tableHeadingAlignCenter [class*='TooltipContainer']{\n    justify-content:center;\n  }\n\n.sca-polaris .Polaris-IndexTable--tableHeadingAlignEnd{\n  text-align:right;\n}\n\n.sca-polaris .Polaris-IndexTable--tableHeadingAlignEnd [class*='TooltipContainer'],\n  .sca-polaris .Polaris-IndexTable--tableHeadingAlignEnd [class*='SortableTableHeadingWithCustomMarkup']{\n    justify-content:end;\n  }\n\n.sca-polaris .Polaris-IndexTable--tableHeadingExtraPaddingRight{\n  --pc-index-table-heading-extra-padding-right:0rem;\n  padding-right:var(--pc-index-table-heading-extra-padding-right);\n}\n\n.sca-polaris .Polaris-IndexTable__TableHeading--sortable{\n  background:var(--p-color-bg-surface-secondary);\n}\n\n.sca-polaris .Polaris-IndexTable__TableHeading--flush{\n  --pc-index-table-heading-padding-x:0rem;\n  padding:var(--pc-index-table-heading-padding-y) var(--pc-index-table-heading-padding-x);\n}\n\n.sca-polaris .Polaris-IndexTable__TableHeading--first{\n  position:sticky;\n  left:0;\n  padding-left:var(--pc-index-table-checkbox-offset-left);\n  padding-right:var(--pc-index-table-checkbox-offset-right);\n  width:var(--p-space-500);\n  z-index:var(--pc-index-table-sticky-cell);\n}\n\n.sca-polaris .Polaris-IndexTable__TableHeadingSortButton{\n  position:relative;\n  background:none;\n  padding:0;\n  border:0;\n  cursor:pointer;\n  display:inline-flex;\n  align-items:center;\n  justify-content:center;\n  font-weight:var(--p-font-weight-medium);\n  color:var(--p-color-text-secondary);\n  font-size:var(--p-font-size-300);\n  line-height:var(--p-font-line-height-500);\n}\n\n.sca-polaris .Polaris-IndexTable__TableHeadingSortButton:hover .Polaris-IndexTable__TableHeadingSortIcon, .sca-polaris .Polaris-IndexTable__TableHeadingSortButton:focus .Polaris-IndexTable__TableHeadingSortIcon{\n      opacity:1;\n    }\n\n.sca-polaris .Polaris-IndexTable--tableHeadingSortButtonHeadingAlignEnd{\n  transform:translateX(var(--p-space-500));\n  transition-delay:var(--p-motion-duration-50);\n}\n\n.sca-polaris .Polaris-IndexTable--tableHeadingSortButtonHeadingAlignEnd:hover,\n  .sca-polaris .Polaris-IndexTable--tableHeadingSortButtonHeadingAlignEnd:focus{\n    transition-delay:none;\n    transform:translateX(var(--p-space-100));\n  }\n\n.sca-polaris .Polaris-IndexTable--tableHeadingSortButtonHeadingAlignEnd:hover::before{\n  content:'';\n  position:absolute;\n  top:0;\n  left:calc(100% - var(--p-space-200));\n  height:100%;\n  width:var(--p-space-600);\n  display:block;\n  animation:none;\n  transition:none;\n}\n\n.sca-polaris .Polaris-IndexTable--tableHeadingSortButtonHeadingAlignEndCurrentlySorted{\n  transform:translateX(var(--p-space-100));\n}\n\n.sca-polaris .Polaris-IndexTable--tableHeadingSortButtonHeadingAlignEndCurrentlySorted .Polaris-IndexTable--tableHeadingSortIconHeadingAlignEnd{\n    animation:none;\n  }\n\n.sca-polaris .Polaris-IndexTable--tableHeadingSortButtonHeadingAlignEndPreviouslySorted{\n  animation:Polaris-IndexTable--rightAlignedSortButtonSlideOut var(--p-motion-duration-50) var(--p-motion-ease);\n}\n\n.sca-polaris .Polaris-IndexTable__TableHeadingSortIcon{\n  order:1;\n  opacity:0;\n  height:var(--p-space-500);\n  width:var(--p-space-500);\n}\n\n.sca-polaris .Polaris-IndexTable__TableHeadingSortIcon:not(.Polaris-IndexTable--tableHeadingSortIconHeadingAlignEnd:hover),\n  .sca-polaris .Polaris-IndexTable__TableHeadingSortIcon:not(.Polaris-IndexTable--tableHeadingSortButtonHeadingAlignEndPreviouslySorted){\n    transition:opacity var(--p-motion-duration-50) var(--p-motion-ease);\n  }\n\n.sca-polaris .Polaris-IndexTable__TableHeadingSortButton:hover .Polaris-IndexTable--tableHeadingSortIconHeadingAlignEnd{\n    animation:Polaris-IndexTable--revealRightAlignedSortButtonIcon var(--p-motion-duration-200) var(--p-motion-ease);\n  }\n\n.sca-polaris .Polaris-IndexTable--tableHeadingSortButtonHeadingAlignEndCurrentlySorted:hover .Polaris-IndexTable--tableHeadingSortIconHeadingAlignEnd{\n    animation:none;\n  }\n\n.sca-polaris .Polaris-IndexTable__TableHeadingUnderline::after{\n  content:'';\n  position:absolute;\n  left:0;\n  bottom:calc(var(--p-border-width-050)*-1);\n  width:100%;\n  height:var(--p-border-width-050);\n  border-bottom:var(--p-border-width-050) dotted var(--p-color-border-tertiary);\n}\n\n.sca-polaris .Polaris-IndexTable__TableHeadingTooltipUnderlinePlaceholder{\n  border-bottom:var(--p-border-width-050) dotted transparent;\n}\n\n.sca-polaris .Polaris-IndexTable__TableHeadingSortIcon--visible{\n  opacity:1;\n}\n\n.sca-polaris .Polaris-IndexTable__TableHeadingSortSvg{\n  display:block;\n  width:100%;\n  max-width:100%;\n  max-height:100%;\n}\n\n.sca-polaris .Polaris-IndexTable__SortableTableHeadingWithCustomMarkup{\n  display:flex;\n  flex-wrap:nowrap;\n}\n\n.sca-polaris .Polaris-IndexTable__SortableTableHeaderWrapper{\n  cursor:pointer;\n}\n\n.sca-polaris .Polaris-IndexTable__FirstStickyHeaderElement{\n  padding-right:0;\n}\n\n.sca-polaris .Polaris-IndexTable__TableHeading--second:not(.Polaris-IndexTable__TableHeading--unselectable){\n  padding-left:0;\n}\n\n.sca-polaris .Polaris-IndexTable__TableHeading--second:not(.Polaris-IndexTable__TableHeading--unselectable):not(.Polaris-IndexTable__TableHeading--flush){\n    padding-left:var(--pc-index-table-heading-padding-x);\n  }\n\n.sca-polaris .Polaris-IndexTable__TableCell{\n  z-index:var(--pc-index-table-cell);\n  text-align:left;\n  padding:var(--p-space-200) var(--p-space-400);\n  white-space:nowrap;\n}\n\n.sca-polaris .Polaris-IndexTable__TableCell:not(.Polaris-IndexTable__TableCell--flush){\n    padding:var(--p-space-150);\n  }\n\n.sca-polaris .Polaris-IndexTable__TableCell:not(.Polaris-IndexTable__TableCell--flush):first-child{\n      padding-left:var(--p-space-300);\n    }\n\n.sca-polaris .Polaris-IndexTable__Table:not(.Polaris-IndexTable__Table--unselectable) .Polaris-IndexTable__TableCell:not(.Polaris-IndexTable__TableCell--flush):first-child{\n        padding-right:var(--pc-index-table-checkbox-offset-right);\n      }\n\n.sca-polaris .Polaris-IndexTable__TableCell:not(.Polaris-IndexTable__TableCell--flush):last-child{\n      padding-right:var(--p-space-300);\n    }\n\n.sca-polaris .Polaris-IndexTable__TableCell--flush{\n  padding:0;\n}\n\n.sca-polaris .Polaris-IndexTable__TableCell--flush:first-child{\n    padding:0;\n  }\n\n@media (min-width: 30.625em){\n\n.sca-polaris .Polaris-IndexTable__Table--sticky .Polaris-IndexTable__TableHeading--second:not(.Polaris-IndexTable__TableHeading--unselectable){\n        position:sticky;\n        left:0;\n        z-index:var(--pc-index-table-sticky-cell);\n    }\n      }\n\n.sca-polaris .Polaris-IndexTable__Table--sticky .Polaris-IndexTable__TableHeading--second.Polaris-IndexTable__TableHeading--unselectable{\n      position:sticky;\n      left:0;\n      z-index:var(--pc-index-table-sticky-cell);\n    }\n\n.sca-polaris .Polaris-IndexTable__Table--unselectable{\n  --pc-index-table-checkbox-width:var(--p-space-500);\n  --pc-index-table-checkbox-width-sm:calc(var(--pc-index-table-checkbox-width) + var(--p-width-050));\n  --pc-index-table-checkbox-padding-left:var(--p-space-300);\n  --pc-index-table-checkbox-child-offset:calc(var(--pc-index-table-checkbox-width) + var(--pc-index-table-checkbox-padding-left));\n  --pc-index-table-checkbox-child-offset-sm:calc(var(--pc-index-table-checkbox-width-sm) + var(--pc-index-table-checkbox-padding-left));\n}\n\n.sca-polaris .Polaris-IndexTable__Table--unselectable.Polaris-IndexTable__Table--sticky .Polaris-IndexTable__TableCell:first-child{\n      left:0;\n      background-color:var(--p-color-bg-surface);\n      z-index:var(--pc-index-table-sticky-cell);\n      position:sticky;\n    }\n\n.sca-polaris .Polaris-IndexTable__Table--unselectable.Polaris-IndexTable__Table--sticky .Polaris-IndexTable__TableRow--subheader .Polaris-IndexTable__TableCell:first-child{\n        background-color:var(--p-color-bg-surface-secondary);\n      }\n\n.sca-polaris .Polaris-IndexTable__Table--unselectable.Polaris-IndexTable__Table--sticky .Polaris-IndexTable__TableRow--child .Polaris-IndexTable__TableCell:first-child{\n    padding-left:var(--pc-index-table-checkbox-child-offset);\n  }\n\n@media (max-width: 30.6225em){\n\n.sca-polaris .Polaris-IndexTable__Table--unselectable.Polaris-IndexTable__Table--sticky .Polaris-IndexTable__TableRow--child .Polaris-IndexTable__TableCell:first-child{\n      padding-left:var(--pc-index-table-checkbox-child-offset-sm);\n  }\n    }\n\n.sca-polaris .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--child .Polaris-IndexTable__TableCell:not(.Polaris-IndexTable__TableCell--flush):first-child{\n        padding-left:var(--pc-index-table-checkbox-child-offset);\n      }\n\n.sca-polaris .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled),\n    .sca-polaris .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:first-child,\n    .sca-polaris .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:last-child{\n      background-color:var(--p-color-bg-surface-hover);\n    }\n\n.sca-polaris .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSuccess:not(.Polaris-IndexTable__TableRow--disabled),\n      .sca-polaris .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSuccess:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:first-child,\n      .sca-polaris .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSuccess:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:last-child{\n        background-color:var(--p-color-bg-surface-success-hover);\n      }\n\n.sca-polaris .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneWarning:not(.Polaris-IndexTable__TableRow--disabled),\n      .sca-polaris .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneWarning:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:first-child,\n      .sca-polaris .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneWarning:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:last-child{\n        background-color:var(--p-color-bg-surface-warning-hover);\n      }\n\n.sca-polaris .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneCritical:not(.Polaris-IndexTable__TableRow--disabled),\n      .sca-polaris .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneCritical:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:first-child,\n      .sca-polaris .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneCritical:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:last-child{\n        background-color:var(--p-color-bg-surface-critical-hover);\n      }\n\n.sca-polaris .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSubdued:not(.Polaris-IndexTable__TableRow--disabled),\n      .sca-polaris .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSubdued:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:first-child,\n      .sca-polaris .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable--toneSubdued:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:last-child{\n        background-color:var(--p-color-bg-surface-secondary-hover);\n      }\n\n.sca-polaris .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--subheader:not(.Polaris-IndexTable__TableRow--disabled),\n      .sca-polaris .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--subheader:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:first-child,\n      .sca-polaris .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable__TableRow--hovered.Polaris-IndexTable__TableRow--subheader:not(.Polaris-IndexTable__TableRow--disabled) .Polaris-IndexTable__TableCell:last-child{\n        background-color:var(--p-color-bg-surface-secondary);\n      }\n\n.sca-polaris .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable--toneSuccess .Polaris-IndexTable__TableCell:first-child{\n      background-color:var(--p-color-bg-surface-success);\n    }\n\n.sca-polaris .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable--toneWarning .Polaris-IndexTable__TableCell:first-child{\n      background-color:var(--p-color-bg-surface-warning);\n    }\n\n.sca-polaris .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable--toneCritical .Polaris-IndexTable__TableCell:first-child{\n      background-color:var(--p-color-bg-surface-critical);\n    }\n\n.sca-polaris .Polaris-IndexTable__Table--unselectable .Polaris-IndexTable--toneSubdued .Polaris-IndexTable__TableCell:first-child{\n      background-color:var(--p-color-bg-surface-secondary);\n      color:var(--p-color-text-secondary);\n    }\n\n@media (min-width: 30.625em){\n\n.sca-polaris .Polaris-IndexTable--tableStickyScrolling .Polaris-IndexTable__TableCell:last-child,\n  .sca-polaris .Polaris-IndexTable--stickyTableHeaderStickyScrolling .Polaris-IndexTable__TableCell:last-child,\n  .sca-polaris .Polaris-IndexTable--tableStickyScrolling .Polaris-IndexTable__TableHeading--last,\n  .sca-polaris .Polaris-IndexTable--stickyTableHeaderStickyScrolling .Polaris-IndexTable__TableHeading--last{\n      filter:drop-shadow(-0.0625rem 0 0 var(--p-color-border));\n  }\n    }\n\n@media (min-width: 30.625em){\n\n.sca-polaris .Polaris-IndexTable--tableStickyLast .Polaris-IndexTable__TableCell:last-child, .sca-polaris .Polaris-IndexTable--stickyTableHeaderStickyLast .Polaris-IndexTable__TableCell:last-child{\n      position:sticky;\n      right:0;\n      background-color:var(--p-color-bg-surface);\n      z-index:var(--pc-index-table-sticky-cell);\n  }\n    }\n\n@media (min-width: 30.625em){\n\n.sca-polaris .Polaris-IndexTable--tableStickyLast .Polaris-IndexTable__TableHeading--last, .sca-polaris .Polaris-IndexTable--stickyTableHeaderStickyLast .Polaris-IndexTable__TableHeading--last{\n      position:sticky;\n      right:0;\n      background-color:var(--p-color-bg-surface-secondary);\n      z-index:auto;\n  }\n    }\n\n.sca-polaris .Polaris-IndexTable__Table--sortable .Polaris-IndexTable__TableHeading{\n    background-color:var(--p-color-bg-surface-secondary);\n  }\n\n.sca-polaris .Polaris-IndexTable--stickyTableHeadingSecondScrolling{\n  padding:0 var(--p-space-025) 0 calc(var(--pc-index-table-checkbox-offset-right) + var(--pc-index-table-heading-padding-x));\n  display:none;\n}\n\n@media (min-width: 30.625em){\n\n.sca-polaris .Polaris-IndexTable--stickyTableHeadingSecondScrolling{\n    display:block;\n}\n  }\n\n.sca-polaris .Polaris-IndexTable:hover .Polaris-IndexTable__ScrollLeft{\n    display:block;\n  }\n\n.sca-polaris .Polaris-IndexTable:hover .Polaris-IndexTable__ScrollRight{\n    display:block;\n  }\n\n.sca-polaris .Polaris-IndexTable .Polaris-IndexTable__ScrollRight--onboarding{\n  display:block;\n}\n\n.sca-polaris .Polaris-IndexTable__SelectAllActionsWrapper{\n  visibility:visible;\n  position:absolute;\n  z-index:var(--pc-index-table-bulk-actions);\n  left:0;\n  width:100%;\n  display:flex;\n  align-items:center;\n  justify-content:flex-start;\n}\n\n.sca-polaris .Polaris-IndexTable__SelectAllActionsWrapperWithPagination{\n  width:100%;\n}\n\n@media (min-width: 48em){\n\n.sca-polaris .Polaris-IndexTable__SelectAllActionsWrapperWithPagination{\n    width:calc(100% - 3.5rem - var(--p-space-200));\n}\n  }\n\n.sca-polaris .Polaris-IndexTable__SelectAllActionsWrapperSticky{\n  position:fixed;\n  top:auto;\n  bottom:0;\n}\n\n.sca-polaris .Polaris-IndexTable__SelectAllActionsWrapperAtEnd{\n  opacity:0;\n  transition:opacity var(--p-motion-duration-100) var(--p-motion-ease);\n}\n\n.sca-polaris .Polaris-IndexTable__SelectAllActionsWrapperAtEndAppear{\n  opacity:1;\n}\n\n.sca-polaris .Polaris-IndexTable__PaginationWrapper{\n  --pc-pagination-index:30;\n  z-index:var(--pc-pagination-index);\n}\n\n@media (min-width: 48em){\n\n.sca-polaris .Polaris-IndexTable__PaginationWrapper{\n    position:sticky;\n    bottom:0;\n}\n  }\n\n@media (min-width: 48em){\n\n.sca-polaris .Polaris-IndexTable__PaginationWrapperScrolledPastTop{\n    position:absolute;\n    bottom:auto;\n    top:var(--pc-index-table-pagination-top-offset);\n    width:100%;\n}\n  }\n\n.sca-polaris .Polaris-IndexTable--scrollBarContainerCondensed{\n  visibility:hidden;\n  pointer-events:none;\n}\n\n.sca-polaris .Polaris-IndexTable--scrollBarContainerHidden{\n  height:0;\n  padding:0;\n}\n\n.sca-polaris .Polaris-IndexTable--disableTextSelection{\n  -webkit-user-select:none;\n          user-select:none;\n}\n\n.sca-polaris .Polaris-IndexTable__EmptySearchResultWrapper{\n  padding:var(--p-space-400);\n}\n\n.sca-polaris .Polaris-IndexTable__CondensedList{\n  list-style-type:none;\n  margin:0;\n  padding:0;\n  overflow:hidden;\n  border-top:0;\n}\n\n.sca-polaris .Polaris-IndexTable__CondensedList .Polaris-IndexTable__TableRow:first-child{\n    border-top:0;\n  }\n\n.sca-polaris .Polaris-IndexTable__HeaderWrapper{\n  position:relative;\n  display:flex;\n  align-items:center;\n  width:100%;\n  min-height:3.5rem;\n  padding:var(--p-space-200) var(--p-space-400);\n  background-color:var(--p-color-bg-surface);\n}\n\n.sca-polaris .Polaris-IndexTable__HeaderWrapper.Polaris-IndexTable--unselectable{\n    min-height:auto;\n    padding:0;\n  }\n\n@keyframes Polaris-IndexTable--rightAlignedSortButtonSlideOut{\n  0%{\n    transform:translateX(var(--p-space-100));\n  }\n\n  80%{\n    transform:translateX(var(--p-space-100));\n  }\n\n  100%{\n    transform:translateX(var(--p-space-500));\n  }\n}\n\n@keyframes Polaris-IndexTable--revealRightAlignedSortButtonIcon{\n  0%{\n    transform:translateX(calc(var(--p-space-500)*-1));\n    opacity:0;\n  }\n\n  40%{\n    opacity:0;\n  }\n\n  50%{\n    transform:translateX(0);\n  }\n\n  100%{\n    opacity:1;\n  }\n}\n\n\n.sca-polaris .Polaris-IndexTable-ScrollContainer{\n  overflow-x:auto;\n  overscroll-behavior-x:contain;\n  -ms-overflow-style:none;\n  scrollbar-width:none;\n  border-radius:inherit;\n}\n\n.sca-polaris .Polaris-IndexTable-ScrollContainer::-webkit-scrollbar{\n  display:none;\n}\n\n\n.sca-polaris .Polaris-Layout{\n  display:flex;\n  flex-wrap:wrap;\n  justify-content:center;\n  align-items:flex-start;\n  margin-top:calc(var(--p-space-400)*-1);\n  margin-left:calc(var(--p-space-400)*-1);\n}\n\n@media print{\n    .sca-polaris .Polaris-Layout{\n      font-size:var(--p-font-size-300);\n      line-height:var(--p-font-line-height-400);\n    }\n\n    .sca-polaris .Polaris-Layout a,\n    .sca-polaris .Polaris-Layout button{\n      color:var(--p-color-text);\n    }\n  }\n\n.sca-polaris .Polaris-Layout__Section{\n  flex:var(--pg-layout-relative-size) var(--pg-layout-relative-size) var(--pg-layout-width-primary-min);\n  min-width:51%;\n}\n\n@media print{\n\n.sca-polaris .Polaris-Layout__Section{\n    flex:2 2 22.5rem;\n}\n  }\n\n.sca-polaris .Polaris-Layout__Section--fullWidth{\n  flex:1 1 100%;\n}\n\n.sca-polaris .Polaris-Layout__Section--oneHalf{\n  flex:1 1 var(--pg-layout-width-one-half-width-base);\n  min-width:0;\n}\n\n.sca-polaris .Polaris-Layout__Section--oneThird{\n  flex:1 1 var(--pg-layout-width-one-third-width-base);\n  min-width:0;\n}\n\n.sca-polaris .Polaris-Layout__Section{\n  max-width:calc(100% - var(--p-space-400));\n  margin-top:var(--p-space-400);\n  margin-left:var(--p-space-400);\n}\n\n\n.sca-polaris .Polaris-Link{\n  -webkit-appearance:none;\n          appearance:none;\n  display:inline;\n  text-align:inherit;\n  padding:0;\n  background:none;\n  border:0;\n  font-size:inherit;\n  font-weight:inherit;\n  color:var(--p-color-text-link);\n  text-decoration:underline;\n  cursor:pointer;\n  touch-action:manipulation;\n}\n\n.sca-polaris .Polaris-Link:hover{\n    color:var(--p-color-text-link-hover);\n    text-decoration:underline;\n  }\n\n.sca-polaris .Polaris-Link:focus,\n  .sca-polaris .Polaris-Link:focus-visible{\n    outline:var(--p-color-border-focus) auto var(--p-border-width-050);\n    outline-offset:var(--p-space-050);\n    border-radius:var(--p-border-radius-150);\n  }\n\n.sca-polaris .Polaris-Link:active{\n    position:relative;\n    color:var(--p-color-text-link-active);\n  }\n\n@media print{\n\n.sca-polaris .Polaris-Link{\n    -webkit-text-decoration-color:var(--p-color-border-tertiary);\n            text-decoration-color:var(--p-color-border-tertiary);\n}\n  }\n\n.sca-polaris .Polaris-Link--monochrome{\n  color:inherit;\n}\n\n.sca-polaris .Polaris-Link--monochrome:hover,\n  .sca-polaris .Polaris-Link--monochrome:focus,\n  .sca-polaris .Polaris-Link--monochrome:active{\n    color:inherit;\n  }\n\n.sca-polaris .Polaris-Link--removeUnderline{\n  text-decoration:none;\n}\n\n.sca-polaris .Polaris-Link--removeUnderline:hover{\n    text-decoration:underline;\n  }\n\n\n.sca-polaris .Polaris-List{\n  padding-left:var(--p-space-500);\n  margin-top:0;\n  margin-bottom:0;\n  list-style:disc outside none;\n}\n\n.sca-polaris .Polaris-List + .Polaris-List{\n    margin-top:var(--p-space-400);\n  }\n\n.sca-polaris .Polaris-List--typeNumber{\n  padding-left:var(--p-space-800);\n  list-style:decimal outside none;\n}\n\n.sca-polaris .Polaris-List__Item .Polaris-List:first-child{\n    margin-top:var(--p-space-200);\n  }\n\n.sca-polaris .Polaris-List--spacingLoose .Polaris-List__Item{\n    margin-bottom:var(--p-space-100);\n  }\n\n\n\n  .sca-polaris .Polaris-Header-Title.Polaris-Header-Title__TitleWithSubtitle{\n    margin-top:0;\n  }\n\n.sca-polaris .Polaris-Header-Title__TitleWrapper{\n  display:flex;\n  flex-wrap:wrap;\n  align-items:center;\n  row-gap:var(--p-space-200);\n  padding-block:var(--p-space-050);\n}\n\n.sca-polaris .Polaris-Header-Title__TitleWrapper .Polaris-Header-Title{\n    display:inline;\n    margin-right:var(--p-space-200);\n  }\n\n.sca-polaris .Polaris-Header-Title__TitleWrapper .Polaris-Header-Title > *{\n      display:inline;\n    }\n\n.sca-polaris .Polaris-Header-Title__SubTitle{\n  margin-top:var(--p-space-050);\n}\n\n.sca-polaris .Polaris-Header-Title__SubTitle.Polaris-Header-Title__SubtitleCompact{\n    margin-top:var(--p-space-050);\n  }\n\n.sca-polaris .Polaris-Header-Title__SubTitle.Polaris-Header-Title__SubtitleMaxWidth{\n    max-width:45ch;\n  }\n\n\n.sca-polaris .Polaris-Page-Header__TitleWrapper{\n  grid-area:title;\n  margin-top:var(--p-space-100);\n  align-self:center;\n}\n\n@media (min-width: 30.625em){\n\n.sca-polaris .Polaris-Page-Header__TitleWrapper{\n    margin-top:0;\n}\n  }\n\n.sca-polaris .Polaris-Page-Header__TitleWrapper.Polaris-Page-Header__TitleWrapperExpand{\n    flex:1 1 auto;\n  }\n\n.sca-polaris .Polaris-Page-Header__BreadcrumbWrapper{\n  grid-area:breadcrumbs;\n}\n\n.sca-polaris .Polaris-Page-Header__BreadcrumbWrapper a,\n  .sca-polaris .Polaris-Page-Header__BreadcrumbWrapper button{\n    background:transparent;\n    border-radius:var(--p-border-radius-200);\n    box-shadow:none;\n  }\n\n.sca-polaris .Polaris-Page-Header__BreadcrumbWrapper a:is(:hover, :focus, :focus-visible), .sca-polaris .Polaris-Page-Header__BreadcrumbWrapper button:is(:hover, :focus, :focus-visible){\n      box-shadow:none !important;\n    }\n\n.sca-polaris .Polaris-Page-Header__BreadcrumbWrapper a:is(:hover, :focus-visible), .sca-polaris .Polaris-Page-Header__BreadcrumbWrapper button:is(:hover, :focus-visible){\n      background:var(--p-color-bg-fill-tertiary-hover);\n    }\n\n.sca-polaris .Polaris-Page-Header__BreadcrumbWrapper a:focus, .sca-polaris .Polaris-Page-Header__BreadcrumbWrapper button:focus{\n      background:var(--p-color-bg-fill-tertiary-active);\n      box-shadow:var(--p-shadow-inset-200) !important;\n    }\n\n.sca-polaris .Polaris-Page-Header__PrimaryActionWrapper{\n  margin-top:0;\n  margin-left:var(--p-space-100);\n}\n\n@media (min-width: 48em){\n\n.sca-polaris .Polaris-Page-Header__PrimaryActionWrapper{\n    margin-left:var(--p-space-200);\n}\n  }\n\n.sca-polaris .Polaris-Page-Header__Row{\n  display:flex;\n  justify-content:space-between;\n  line-height:normal;\n}\n\n.sca-polaris .Polaris-Page-Header__Row:first-child{\n    min-height:1.75rem;\n  }\n\n.sca-polaris .Polaris-Page-Header__Row + .Polaris-Page-Header__Row{\n    margin-top:var(--p-space-050);\n  }\n\n.sca-polaris .Polaris-Page-Header__Row + .Polaris-Page-Header__Row .Polaris-Page-Header__RightAlign{\n      margin-left:0;\n    }\n\n.sca-polaris .Polaris-Page-Header__RightAlign{\n  grid-area:actions;\n  display:flex;\n  align-content:flex-end;\n  flex:1 1 auto;\n  align-items:center;\n  align-self:flex-start;\n  justify-content:flex-end;\n  margin-left:var(--p-space-400);\n  white-space:nowrap;\n}\n\n.sca-polaris .Polaris-Page-Header__Actions{\n  width:100%;\n  display:flex;\n  align-items:center;\n  justify-content:flex-end;\n  text-align:right;\n}\n\n\n.sca-polaris,\n.sca-polaris{\n  min-height:100%;\n  height:100%;\n}\n\n.sca-polaris .Polaris-Page{\n  margin:0 auto;\n  padding:0;\n  max-width:calc(var(--pg-layout-width-primary-max) + var(--pg-layout-width-secondary-max) + var(--pg-layout-width-inner-spacing-base));\n}\n\n@media (min-width: 30.625em){\n\n.sca-polaris .Polaris-Page{\n    padding:0 var(--p-space-600);\n}\n  }\n\n.sca-polaris .Polaris-Page::after{\n    content:'';\n    display:table;\n  }\n\n.sca-polaris .Polaris-Page__Content{\n  padding:var(--p-space-200) 0;\n}\n\n@media (min-width: 48em){\n\n.sca-polaris .Polaris-Page__Content{\n    padding-top:var(--p-space-500);\n}\n  }\n\n\n.sca-polaris .Polaris-Select{\n  --pc-select-backdrop:10;\n  --pc-select-content:20;\n  --pc-select-input:30;\n  position:relative;\n}\n\n.sca-polaris .Polaris-Select select::-ms-expand{\n    display:none;\n  }\n\n.sca-polaris .Polaris-Select:not(.Polaris-Select--disabled):not(.Polaris-Select--error):hover .Polaris-Select__Backdrop{\n      border-color:var(--p-color-input-border-hover);\n      background-color:var(--p-color-input-bg-surface-hover);\n    }\n\n.sca-polaris .Polaris-Select:not(.Polaris-Select--disabled):not(.Polaris-Select--error) .Polaris-Select__Input:active ~ .Polaris-Select__Backdrop{\n      border:none;\n      box-shadow:var(--p-shadow-inset-200);\n      background-color:var(--p-color-input-bg-surface-active);\n    }\n\n.sca-polaris .Polaris-Select--disabled .Polaris-Select__Content{\n    color:var(--p-color-text-disabled);\n  }\n\n.sca-polaris .Polaris-Select--disabled .Polaris-Select__InlineLabel{\n    color:inherit;\n  }\n\n.sca-polaris .Polaris-Select--disabled .Polaris-Select__Icon svg{\n    fill:var(--p-color-icon-disabled);\n  }\n\n.sca-polaris .Polaris-Select--disabled .Polaris-Select__Backdrop{\n    border-color:var(--p-color-border-disabled);\n    background-color:var(--p-color-bg-surface-disabled);\n  }\n\n.sca-polaris .Polaris-Select--disabled .Polaris-Select__Backdrop::before{\n      background-color:var(--p-color-input-bg-surface);\n    }\n\n.sca-polaris .Polaris-Select--disabled .Polaris-Select__Backdrop:hover{\n      cursor:default;\n    }\n\n.sca-polaris .Polaris-Select__Content{\n  font-size:var(--p-font-size-325);\n  font-weight:var(--p-font-weight-regular);\n  line-height:var(--p-font-line-height-500);\n  border:none;\n  letter-spacing:initial;\n  position:relative;\n  z-index:var(--pc-select-content);\n  display:flex;\n  align-items:center;\n  width:100%;\n  min-height:var(--pg-control-height);\n  padding:var(--p-space-150) var(--p-space-200) var(--p-space-150) var(--p-space-300);\n\n  font-size:var(--p-font-size-400);\n  line-height:var(--p-font-line-height-600);\n}\n\n@media (min-width: 48em){\n\n.sca-polaris .Polaris-Select__Content{\n    line-height:var(--p-font-line-height-500);\n    font-size:var(--p-font-size-325);\n}\n  }\n\n@media (max-width: 47.9975em){\n    .sca-polaris .Polaris-Select__Content div > span{\n      font-size:var(--p-font-size-400);\n      line-height:var(--p-font-line-height-500);\n    }\n  }\n\n.sca-polaris .Polaris-Select__SelectedOption{\n  flex:1 1;\n  white-space:nowrap;\n  overflow:hidden;\n  text-overflow:ellipsis;\n}\n\n.sca-polaris .Polaris-Select__Prefix{\n  padding-right:var(--p-space-100);\n}\n\n.sca-polaris .Polaris-Select__Icon svg{\n  fill:var(--p-color-icon-secondary);\n}\n\n.sca-polaris .Polaris-Select__Input{\n  font-size:var(--p-font-size-400);\n  font-weight:var(--p-font-weight-regular);\n  line-height:var(--p-font-line-height-600);\n  font-family:var(--p-font-family-sans);\n  letter-spacing:initial;\n  position:absolute;\n  text-rendering:auto;\n  top:0;\n  left:0;\n  z-index:var(--pc-select-input);\n  width:100%;\n  height:100%;\n  margin:0;\n  opacity:0;\n  -webkit-appearance:none;\n          appearance:none;\n  border:none;\n  padding:var(--p-space-150) var(--p-space-200) var(--p-space-150) var(--p-space-300);\n}\n\n@media (min-width: 48em){\n\n.sca-polaris .Polaris-Select__Input{\n    font-size:var(--p-font-size-325);\n    line-height:var(--p-font-line-height-500);\n}\n  }\n\n.sca-polaris .Polaris-Select__Backdrop{\n  z-index:var(--pc-select-backdrop);\n  top:0;\n  right:0;\n  bottom:0;\n  left:0;\n  border:var(--p-border-width-0165) solid var(--p-color-input-border);\n  border-radius:var(--p-border-radius-200);\n  background-color:var(--p-color-input-bg-surface);\n  position:absolute;\n}\n\n.sca-polaris .Polaris-Select--error .Polaris-Select__Backdrop{\n    border-color:var(--p-color-border-critical-secondary);\n    background-color:var(--p-color-bg-surface-critical);\n  }\n\n.sca-polaris .Polaris-Select--error .Polaris-Select__Backdrop.Polaris-Select--hover,\n    .sca-polaris .Polaris-Select--error .Polaris-Select__Backdrop:hover{\n      border-color:var(--p-color-border-critical);\n    }\n\n.sca-polaris .Polaris-Select--error .Polaris-Select__Input:focus-visible ~ .Polaris-Select__Backdrop{\n    border-color:var(--p-color-border-critical-secondary);\n    border-width:var(--p-border-width-025);\n    background-color:var(--p-color-bg-surface-critical);\n  }\n\n.sca-polaris .Polaris-Select__Input:focus-visible ~ .Polaris-Select__Backdrop{\n    border-color:var(--p-color-input-border-active);\n    border-width:var(--p-border-width-025);\n    background-color:var(--p-color-input-bg-surface-active);\n    outline:var(--p-border-width-050) solid var(--p-color-border-focus);\n    outline-offset:var(--p-space-025);\n  }\n\n.sca-polaris .Polaris-Select--toneMagic .Polaris-Select__Content{\n    color:var(--p-color-text-magic);\n  }\n\n.sca-polaris .Polaris-Select--toneMagic .Polaris-Select__InlineLabel{\n    color:inherit;\n  }\n\n.sca-polaris .Polaris-Select--toneMagic .Polaris-Select__Backdrop{\n    border-color:var(--p-color-border-magic-secondary);\n    background-color:var(--p-color-bg-surface-magic);\n  }\n\n.sca-polaris .Polaris-Select--toneMagic .Polaris-Select__Icon svg{\n    fill:var(--p-color-icon-magic);\n  }\n\n.sca-polaris .Polaris-Select--toneMagic:not(.Polaris-Select--disabled):not(.Polaris-Select--error):not(:focus-within):hover .Polaris-Select__Backdrop{\n        border-color:var(--p-color-border-magic-secondary-hover);\n        background-color:var(--p-color-bg-surface-magic-hover);\n      }\n\n.sca-polaris .Polaris-Select--toneMagic:not(.Polaris-Select--disabled):not(.Polaris-Select--error) .Polaris-Select__Input:focus-visible ~ .Polaris-Select__Content{\n        color:var(--p-color-text);\n      }\n\n.sca-polaris .Polaris-Select--toneMagic:not(.Polaris-Select--disabled):not(.Polaris-Select--error) .Polaris-Select__Input:focus-visible ~ .Polaris-Select__Content .Polaris-Select__Icon svg{\n          fill:var(--p-color-icon-secondary);\n        }\n\n@media (-ms-high-contrast: active){\n  .sca-polaris .Polaris-Select__Content{\n    color:windowText;\n    -ms-high-contrast-adjust:none;\n  }\n\n  .sca-polaris .Polaris-Select__InlineLabel{\n    color:inherit;\n  }\n\n    .sca-polaris .Polaris-Select__InlineLabel::after{\n      content:':';\n    }\n\n  .sca-polaris .Polaris-Select__SelectedOption{\n    color:inherit;\n  }\n\n  .sca-polaris .Polaris-Select__Icon svg{\n    fill:buttonText;\n  }\n    .sca-polaris .Polaris-Select__Backdrop::after{\n      display:none;\n    }\n    .sca-polaris .Polaris-Select__Input:focus ~ .Polaris-Select__Content{\n      color:highlightText;\n    }\n\n    .sca-polaris .Polaris-Select__Input:focus ~ .Polaris-Select__Backdrop{\n      background-color:highlight;\n    }\n    .sca-polaris .Polaris-Select--disabled .Polaris-Select__Content{\n      color:grayText;\n    }\n\n    .sca-polaris .Polaris-Select--disabled .Polaris-Select__Icon{\n      opacity:1;\n    }\n      .sca-polaris .Polaris-Select--disabled .Polaris-Select__Icon svg{\n        fill:grayText;\n      }\n}\n\n\n.sca-polaris{\n  --pc-skeleton-page-max-width:62.375rem;\n  --pc-skeleton-page-max-width-narrow:41.375rem;\n}\n\n\n.sca-polaris .Polaris-Thumbnail{\n  --pc-thumbnail-extra-small-size:1.5rem;\n  --pc-thumbnail-small-size:2.5rem;\n  --pc-thumbnail-medium-size:3.75rem;\n  --pc-thumbnail-large-size:5rem;\n  position:relative;\n  display:block;\n  overflow:hidden;\n  background:var(--p-color-bg-surface);\n  min-width:var(--pc-thumbnail-extra-small-size);\n  max-width:100%;\n  border-radius:var(--p-border-radius-200);\n}\n\n.sca-polaris .Polaris-Thumbnail::after{\n    content:'';\n    top:0;\n    left:0;\n    right:0;\n    bottom:0;\n    position:absolute;\n    border-radius:var(--p-border-radius-200);\n    box-shadow:var(--p-shadow-border-inset);\n    display:block;\n    padding-bottom:100%;\n  }\n\n.sca-polaris .Polaris-Thumbnail.Polaris-Thumbnail--sizeExtraSmall,\n  .sca-polaris .Polaris-Thumbnail.Polaris-Thumbnail--sizeExtraSmall::after{\n    border-radius:var(--p-border-radius-150);\n  }\n\n.sca-polaris .Polaris-Thumbnail::before{\n    content:'';\n    display:block;\n    padding-bottom:100%;\n  }\n\n.sca-polaris .Polaris-Thumbnail--sizeExtraSmall{\n  width:var(--pc-thumbnail-extra-small-size);\n}\n\n.sca-polaris .Polaris-Thumbnail--sizeSmall{\n  width:var(--pc-thumbnail-small-size);\n}\n\n.sca-polaris .Polaris-Thumbnail--sizeMedium{\n  width:var(--pc-thumbnail-medium-size);\n}\n\n.sca-polaris .Polaris-Thumbnail--sizeLarge{\n  width:var(--pc-thumbnail-large-size);\n}\n\n.sca-polaris .Polaris-Thumbnail--transparent{\n  background:transparent;\n}\n\n.sca-polaris .Polaris-Thumbnail > *{\n  position:absolute;\n  top:0;\n  right:0;\n  bottom:0;\n  left:0;\n  margin:auto;\n  max-width:100%;\n  max-height:100%;\n  color:var(--p-color-icon-secondary);\n}\n\n.sca-polaris .Polaris-Thumbnail > * svg{\n    fill:currentColor;\n  }\n";

Everything you can do to a cycle, from creating one to canceling it.

### Create cycles

<AccordionGroup>
  <Accordion title="From the admin">
    You can create a cycle order on a customer's behalf from the Supercycle admin. Supercycle builds a Shopify draft order for you to take payment on.

    <Note>
      An in-app create order flow is in beta. It's described on [Create cycle order](/documentation/manage/cycles/create-cycles-order-beta) under the **New create order flow** beta feature.
    </Note>

    <Steps>
      <Step title="Open Cycles">
        Go to <Icon icon="shopify" iconType="solid" /> **[Cycles](https://admin.shopify.com/apps/supercycle/cycles)** and select **Create cycle order**.
      </Step>

      <Step title="Pick or add a customer">
        Supercycle asks who the order is for before it opens the Shopify draft order. Search for a Shopify customer by name or email and select them. If they don't exist yet, select **Add new customer** and enter their first name, last name, and email. Email is required.

        <Note>
          The customer picker searches every customer in your Shopify store, not only the customers already synced to Supercycle.
        </Note>
      </Step>

      <Step title="Continue to the draft order">
        Select **Continue**. Supercycle creates a Shopify draft order for the customer you selected.
      </Step>

      <Step title="Add a product">
        Search for the product, select its cycle method, and for a calendar rental select the rental period and dates. Supercycle checks the item's availability. Add more products if the order needs them.
      </Step>

      <Step title="Save to the draft order">
        Select **Save**. Supercycle adds the cycles to the Shopify draft order.
      </Step>

      <Step title="Customize the draft order (optional)">
        On the draft order, apply discounts, add shipping, or add tags and a note.

        <Note>
          Adding a product directly on the draft order doesn't create a cycle for it. Add cycles from Supercycle.
        </Note>
      </Step>

      <Step title="Take payment and create the order">
        Select **Collect payment** to mark the order as paid or enter card details, or tick **Payment due later**. Then create the order. The order appears in Shopify, and its cycles appear on <Icon icon="shopify" iconType="solid" /> **[Cycles](https://admin.shopify.com/apps/supercycle/cycles)**.
      </Step>
    </Steps>
  </Accordion>
</AccordionGroup>

### Find cycles to fulfill

Find the cycles due to go out from the Cycles table, or find their orders in Shopify.

<AccordionGroup>
  <Accordion title="From the admin">
    <Steps>
      <Step title="Open the Cycles table">
        Go to <Icon icon="shopify" iconType="solid" /> **[Cycles](https://admin.shopify.com/apps/supercycle/cycles)**. The **Unfulfilled** tab lists every cycle that hasn't gone out yet.
      </Step>

      <Step title="Filter to today">
        Select the search and filter icon, open **Expected fulfillment date**, and select **Today**.

        <Frame type="glass" caption="Open the filters, then set Expected fulfillment date to Today.">
          <AdminCyclesIndex scene="filter" />
        </Frame>
      </Step>
    </Steps>
  </Accordion>

  <Accordion title="From the Shopify order">
    <Steps>
      <Step title="Open Orders">
        Go to <Icon icon="shopify" iconType="solid" /> **[Orders](https://admin.shopify.com/orders)**.
      </Step>

      <Step title="Filter to unfulfilled cycle orders">
        Set **Fulfillment status** to **Unfulfilled** and **Tagged with** to **Has rental items**. Supercycle adds that tag to every order that contains a cycle.

        <Frame type="glass" caption="Unfulfilled orders tagged Has rental items">
          <img src="https://mintcdn.com/supercycle/Omgmq0rsgqX1BZKa/images/screenshots/supercycle-admin/find-orders-to-fulfill-in-shopify.png?fit=max&auto=format&n=Omgmq0rsgqX1BZKa&q=85&s=29cc834292821fee0fa96837ea7ddc7c" alt="Shopify's Orders list filtered to open, unfulfilled orders with the Tagged with filter set to Has rental items" width="2748" height="1010" data-path="images/screenshots/supercycle-admin/find-orders-to-fulfill-in-shopify.png" />
        </Frame>
      </Step>
    </Steps>
  </Accordion>

  <Accordion title="From the Operators MCP">
    Use the [`list_cycles`](/ai/operators-mcp/tools#cycles) tool with:

    * `status`: `to_fulfill`
    * `packing_status`: `pending`, `printed`, or `packed`
  </Accordion>

  <Accordion title="From the API">
    Use the [List all cycles](/api-reference/admin/cycles/list-all-cycles) endpoint with the status and packing filters.
  </Accordion>
</AccordionGroup>

### Fulfill the order

Fulfilling the Shopify order is what fulfills its cycles. When the order is fulfilled in Shopify, Supercycle sets each of its cycles to **Fulfilled**.

<AccordionGroup>
  <Accordion title="From the admin">
    <Note>
      Marking cycles as fulfilled on the Cycles table updates the cycles in Supercycle only. It doesn't fulfill the Shopify order, so fulfill the order in Shopify as well.
    </Note>

    <Steps>
      <Step title="Select the cycles">
        On <Icon icon="shopify" iconType="solid" /> **[Cycles](https://admin.shopify.com/apps/supercycle/cycles)**, tick the cycles to fulfill.
      </Step>

      <Step title="Mark as fulfilled">
        Select **...** in the selection bar, then **Mark as > Fulfilled**. The cycles' status changes to **Fulfilled**.

        <Frame type="glass" caption="Tick the cycles, open the ... menu, then select Mark as > Fulfilled.">
          <AdminCycleFulfill />
        </Frame>
      </Step>
    </Steps>
  </Accordion>

  <Accordion title="From the Shopify order">
    <Steps>
      <Step title="Open the order">
        On <Icon icon="shopify" iconType="solid" /> **[Orders](https://admin.shopify.com/orders)**, select the order to fulfill.
      </Step>

      <Step title="Fulfill the items">
        In the **Unfulfilled** card, select **Fulfill items**. Add a tracking number and carrier if you have them.
      </Step>

      <Step title="Send shipment details (optional)">
        Tick **Send shipment details to your customer now** to email the customer the tracking information.
      </Step>

      <Step title="Confirm">
        Select **Fulfill items**. Shopify marks the order **Fulfilled** and Supercycle sets each of its cycles to **Fulfilled**.
      </Step>
    </Steps>
  </Accordion>

  <Accordion title="From the Operators MCP">
    Use the [`update_cycle`](/ai/operators-mcp/tools#cycles) tool with:

    * `id`: the cycle ID, for example `SC-1234`
    * `fulfilled_at`: the fulfillment date as `YYYY-MM-DD`
  </Accordion>

  <Accordion title="From the API">
    Use the [Update a cycle](/api-reference/admin/cycles/update-a-cycle) endpoint with the `fulfilledAt` parameter.
  </Accordion>
</AccordionGroup>

### Print a shipping label

Shipping labels are created on the Shopify order.

<AccordionGroup>
  <Accordion title="From the Shopify order">
    <Steps>
      <Step title="Open the order">
        On the cycle page, select **View order** to open the Shopify order. You can also open it from <Icon icon="shopify" iconType="solid" /> **[Orders](https://admin.shopify.com/orders)**.
      </Step>

      <Step title="Create the label">
        In the **Unfulfilled** card, select **Create shipping label** and follow Shopify's steps to buy and print the label with [Shopify Shipping](https://help.shopify.com/en/manual/shipping/shopify-shipping).

        <Frame type="glass" caption="Create shipping label on the order's Unfulfilled card">
          <img src="https://mintcdn.com/supercycle/Omgmq0rsgqX1BZKa/images/screenshots/supercycle-admin/create-shipping-label.png?fit=max&auto=format&n=Omgmq0rsgqX1BZKa&q=85&s=83d04d82359a4e695cffc508957db8c9" alt="A Shopify order's Unfulfilled card for a Coastal Breeze Top cycle with the Create shipping label button" width="1755" height="935" data-path="images/screenshots/supercycle-admin/create-shipping-label.png" />
        </Frame>
      </Step>
    </Steps>

    <Tip>
      If you use a third-party shipping tool such as ShipStation, print the label there and add the tracking number to the Shopify order.
    </Tip>
  </Accordion>
</AccordionGroup>

### Change item

Swap the item allocated to a cycle for another item of the same product.

<AccordionGroup>
  <Accordion title="From the admin">
    The item picker shows every candidate item with these columns:

    | Column           | What it tells you                                                                                                       |
    | ---------------- | ----------------------------------------------------------------------------------------------------------------------- |
    | **Condition**    | The item's current [condition grade](/documentation/manage/inventory/item-conditions)                                   |
    | **Availability** | Whether the item is free for this cycle's dates, **Available** or **Overlaps**                                          |
    | **Active**       | The cycle the item is out on, if any                                                                                    |
    | **Upcoming**     | How many unfulfilled cycles are already booked on the item. The cycle you're editing isn't counted against its own item |
    | **Previous**     | How many cycles the item will have completed by the time this cycle starts                                              |

    When [consignment](/documentation/manage/consignment/overview) is enabled, **Consignor** and **Revenue share** columns show who earns from the cycle and how much.

    <Steps>
      <Step title="Open Change item">
        On the cycle page, select **Change item** on the method card.

        <Frame type="glass" caption="Select Change item, pick the new item, Select item, then Save.">
          <AdminCycleChangeItem />
        </Frame>
      </Step>

      <Step title="Select the new item">
        Search by product or variant name, or by item ID or serial, then select a row or tick its checkbox. Select **Select item**.

        <Note>
          Supercycle limits how many items the search returns. If the item you're looking for doesn't show, add more of the serial or product name to narrow it.
        </Note>
      </Step>

      <Step title="Save">
        Select **Save** in the save bar.
      </Step>
    </Steps>
  </Accordion>

  <Accordion title="From the Supercycle Scanner">
    <Steps>
      <Step title="Scan the new item">
        Scan the barcode, QR code, or RFID tag of the item you want to send out instead. If the same product and variant has an active rental with a different item allocated, the Scanner lists those rentals.
      </Step>

      <Step title="Tap the rental">
        Tap the rental to move onto the scanned item, then confirm. The rental's allocated item changes and the previous item is freed.
      </Step>
    </Steps>

    You can also start from the rental: open it in the Scanner, tap the item, and scan the replacement.
  </Accordion>

  <Accordion title="From the Operators MCP">
    Use the [`update_cycle`](/ai/operators-mcp/tools#cycles) tool with:

    * `id`: the cycle ID, for example `SC-1234`
    * `item_id`: the item to assign
  </Accordion>

  <Accordion title="From the API">
    Use the [Update a cycle](/api-reference/admin/cycles/update-a-cycle) endpoint with the `itemId` parameter.
  </Accordion>
</AccordionGroup>

### Change product or variant

You can change the item on a cycle to an item from any product or variant. Changing the product on a cycle doesn't change the product on the Shopify order. If the order needs to match, refund the line item in Shopify to cancel the existing cycle, then create a new cycle for the new product.

<Note>
  Changing the product doesn't charge or refund the difference. Partially refund the original order, or create a draft order with a custom line item, to settle it.
</Note>

<AccordionGroup>
  <Accordion title="From the admin">
    <Steps>
      <Step title="Open Change item">
        On the cycle page, select **Change item** on the method card.

        <Frame type="glass" caption="Select Change item, search for an item from the new product, Select item, then Save.">
          <AdminCycleChangeItem />
        </Frame>
      </Step>

      <Step title="Search for an item from the new product">
        Search by product or variant name, or by item ID or serial, then select a row. Select **Select item**.

        <Note>
          Supercycle limits how many items the search returns. If the item you're looking for doesn't show, add more of the serial or product name to narrow it.
        </Note>
      </Step>

      <Step title="Save">
        Select **Save** in the save bar.
      </Step>
    </Steps>
  </Accordion>
</AccordionGroup>

### Change rental period

Move the **Arrive by** and **Return by** dates of a cycle.

<Note>
  Changing the rental period doesn't adjust the customer's charges, and the new dates aren't checked against other bookings. Check the item's availability first, and charge or refund the difference separately.
</Note>

<AccordionGroup>
  <Accordion title="From the admin">
    <Steps>
      <Step title="Open Edit dates">
        On the cycle page, open the method card's **...** menu and select **Edit dates**.

        <Frame type="glass" caption="Open the method card's menu, select Edit dates, pick the new dates, Apply, then Save.">
          <AdminCycleEditDates field="period" />
        </Frame>
      </Step>

      <Step title="Pick the new dates">
        Under **Arrive by** and **Return by**, select new dates for either or both, then select **Apply**.
      </Step>

      <Step title="Save">
        Select **Save** in the save bar. Closing the modal doesn't save the change.
      </Step>
    </Steps>
  </Accordion>

  <Accordion title="From the Operators MCP">
    Use the [`update_cycle`](/ai/operators-mcp/tools#cycles) tool with:

    * `id`: the cycle ID, for example `SC-1234`
    * `rental_start` and `rental_end`: the new dates as `YYYY-MM-DD`
  </Accordion>

  <Accordion title="From the API">
    Use the [Update a cycle](/api-reference/admin/cycles/update-a-cycle) endpoint with the `rentalStart` and `rentalEnd` parameters.
  </Accordion>
</AccordionGroup>

### Change fulfillment date

Set or correct the date and time a cycle went out.

<AccordionGroup>
  <Accordion title="From the admin">
    <Steps>
      <Step title="Open Edit fulfillment date">
        On the cycle page, open the fulfillment card's **...** menu and select **Edit fulfillment date**.

        <Frame type="glass" caption="Open the fulfillment card's menu, select Edit fulfillment date, pick a date, then Save.">
          <AdminCycleEditDates field="fulfillment" />
        </Frame>
      </Step>

      <Step title="Pick the date and time">
        Select a date on the calendar and set the time under **Fulfilled on**. Select **Clear** to remove the fulfillment date.
      </Step>

      <Step title="Save">
        Select **Save** in the modal.
      </Step>
    </Steps>

    To mark several cycles as fulfilled today at once, use the **Mark as** menu on the Cycles table. See [Fulfill the order](/documentation/manage/cycles/cycle-actions#fulfill-the-order).
  </Accordion>

  <Accordion title="From the Shopify order">
    When the order is fulfilled in Shopify, the cycle's fulfillment date updates to match.
  </Accordion>

  <Accordion title="From the Operators MCP">
    Use the [`update_cycle`](/ai/operators-mcp/tools#cycles) tool with:

    * `id`: the cycle ID, for example `SC-1234`
    * `fulfilled_at`: the fulfillment date as `YYYY-MM-DD`
  </Accordion>

  <Accordion title="From the API">
    Use the [Update a cycle](/api-reference/admin/cycles/update-a-cycle) endpoint with the `fulfilledAt` parameter.
  </Accordion>
</AccordionGroup>

### Change receival date

Set or correct the date and time a cycle's item came back.

<AccordionGroup>
  <Accordion title="From the admin">
    <Steps>
      <Step title="Open Edit receival date">
        On the cycle page, open the receival card's **...** menu and select **Edit receival date**.

        <Frame type="glass" caption="Open the receival card's menu, select Edit receival date, pick a date, then Save.">
          <AdminCycleEditDates field="receival" />
        </Frame>
      </Step>

      <Step title="Pick the date and time">
        Select a date on the calendar and set the time under **Received on**. Select **Clear** to remove the receival date.
      </Step>

      <Step title="Save">
        Select **Save** in the modal. The cycle's status changes to **Received**.
      </Step>
    </Steps>

    To mark several cycles as received at once, tick them on the Cycles table, select **...** in the selection bar, then **Mark as > Returned**.

    <Frame type="glass" caption="Tick the cycles, open the ... menu, then select Mark as > Returned.">
      <AdminCycleMarkReturned />
    </Frame>

    <Note>
      Marking a return as received also sets the receival date on its cycle.
    </Note>
  </Accordion>

  <Accordion title="From the Operators MCP">
    Use the [`update_cycle`](/ai/operators-mcp/tools#cycles) tool with:

    * `id`: the cycle ID, for example `SC-1234`
    * `received_at`: the receival date as `YYYY-MM-DD`
  </Accordion>

  <Accordion title="From the API">
    Use the [Update a cycle](/api-reference/admin/cycles/update-a-cycle) endpoint with the `receivedAt` parameter.
  </Accordion>
</AccordionGroup>

### Edit restock by and prepare from dates

Override the buffer dates on one cycle when its item needs more or less preparation or restock time than the shop-wide [logistics buffers](/documentation/configuration/logistics/buffers) give it. The date you set stays until the leg's anchor date next moves. **Revert to automatic date** recalculates it from your logistics settings.

<AccordionGroup>
  <Accordion title="From the admin">
    <Steps>
      <Step title="Open the card's menu">
        On the cycle page, open the **...** menu on the fulfillment card for the prepare from date, or on the receival card for the restock by date.
      </Step>

      <Step title="Select the edit action">
        Select **Edit prepare from date** or **Edit restock by date**.
      </Step>

      <Step title="Set a date or revert">
        Pick a new date, or tick **Revert to automatic date** to recalculate it from the preparation or restock buffer in your logistics settings. Select **Save**.
      </Step>
    </Steps>
  </Accordion>

  <Accordion title="From the Operators MCP">
    Use the [`update_cycle`](/ai/operators-mcp/tools#cycles) tool with:

    * `id`: the cycle ID, for example `SC-1234`
    * `prepare_from`: the preparation start date as `YYYY-MM-DD`, or `null` to revert to automatic
    * `restock_by`: the restock date as `YYYY-MM-DD`, or `null` to revert to automatic
  </Accordion>

  <Accordion title="From the API">
    Use the [Update a cycle](/api-reference/admin/cycles/update-a-cycle) endpoint with the `prepareFrom` and `restockBy` parameters. Pass `null` to revert either date to the automatic value.
  </Accordion>

  <Accordion title="From Shopify Flow">
    Use the [Update cycle](/documentation/manage/automation/automation#available-actions) action with the `prepareFrom` and `restockBy` fields. Pass `null` to clear the override and recalculate from your logistics settings.
  </Accordion>
</AccordionGroup>

### Cancel a cycle

Refunding a line item on the Shopify order cancels its cycle.

<AccordionGroup>
  <Accordion title="From the Shopify order">
    <Steps>
      <Step title="Open the order">
        On the cycle page, select **View order** to open the Shopify order. You can also open it from <Icon icon="shopify" iconType="solid" /> **[Orders](https://admin.shopify.com/orders)**.
      </Step>

      <Step title="Start a refund">
        Select **Refund**.

        <Frame type="glass" caption="Refund in the order's header">
          <img src="https://mintcdn.com/supercycle/FB21qCJ7pWgA4GNp/images/screenshots/supercycle-admin/shopify-order-refund.png?fit=max&auto=format&n=FB21qCJ7pWgA4GNp&q=85&s=2006ad8f617ae7cd1f736f95d186f1c7" alt="A Shopify order page for a fulfilled Coastal Breeze Top cycle with the Refund action in the header" width="2972" height="2725" data-path="images/screenshots/supercycle-admin/shopify-order-refund.png" />
        </Frame>
      </Step>

      <Step title="Refund the line items">
        Set a quantity on each line item whose cycle you want to cancel. The refund amount is up to you and doesn't affect whether the cycle is canceled.

        <Frame type="glass" caption="A quantity of 1 on the line item, then Refund">
          <img src="https://mintcdn.com/supercycle/FB21qCJ7pWgA4GNp/images/screenshots/supercycle-admin/shopify-order-process-refund.png?fit=max&auto=format&n=FB21qCJ7pWgA4GNp&q=85&s=37acb2ebbcb10e6bf35f7c23c197a2b0" alt="Shopify's Refund page with a quantity of 1 on the Coastal Breeze Top line item and the refund amount and Refund button in the summary" width="2274" height="1472" data-path="images/screenshots/supercycle-admin/shopify-order-process-refund.png" />
        </Frame>
      </Step>

      <Step title="Confirm the refund">
        Select **Refund**.

        <Warning>
          Refunding a line item cancels its cycle whatever the cycle's status, including a cycle whose item is already with the customer.
        </Warning>
      </Step>
    </Steps>
  </Accordion>
</AccordionGroup>