> ## 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: auto; max-height: 520px; margin: 0 auto; display: flex; flex-direction: column; background: #fff; border-radius: 10px; overflow: hidden; touch-action: pan-y;
    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 1 auto; 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 1066px (the 640px frame at the old 0.6 zoom) and scaled to the
     column. container-name: scr is what polaris-css.jsx's @container queries
     measure, so a phone viewport cannot switch the page to a mobile layout. */
  .sca-zoom { display: flex; flex-direction: column; container-type: inline-size; container-name: scr; }
  /* Touch: the window is a picture of the desktop admin. Don't capture the
     page scroll the way a nested overflow:auto region would. */
  @media (pointer: coarse) { .sca-page { overflow: hidden; overscroll-behavior: auto; } }
  /* flex: 1 grows the page surface into the window's height floor, so a
     shorter tour state shows more white page, not a band of frame. */
  .sca-polaris { background: var(--p-color-bg); min-height: 100%; flex: 1 0 auto; }
  .sca-polaris .Polaris-Page { padding-bottom: var(--p-space-400); }
  /* Shopify top bar with the App Bridge contextual save bar. The row is as tall
     as the save bar needs whether or not it's showing, so raising the bar doesn't
     push the page down: 32px for the bar plus the 6px padding either side. */
  .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: 44px; }
  .sca-topbar-logo { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; font-size: 13px; color: #fff; }
  /* The official shopping bag from shopify.com/brand-assets, at its own 89:101 ratio. */
  .sca-topbar-logo svg { width: 16px; height: 18px; display: block; flex: none; }
  .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. Overlay
     scale uses transform so layout and paint share one coordinate space;
     CSS zoom plus a compensated min-height mixed the two and clipped dialogs.
     Modal max-height is the overlay, never the docs viewport. */
  .sca-overlay { position: absolute; inset: 0; z-index: 5; overflow: hidden; }
  .sca-overlay .sca-zoom { position: absolute; top: 0; left: 0; min-height: 0; display: block; transform-origin: top left; }
  .sca .sca-polaris .Polaris-Backdrop { position: absolute; }
  .sca .sca-polaris .Polaris-Modal-Dialog__Container { position: absolute; inset: 0; justify-content: center; }
  .sca .sca-polaris .Polaris-Modal-Dialog__Modal { position: relative; bottom: auto; left: auto; right: auto; width: 100%; max-width: 38.75rem; margin: 0 auto; border-radius: var(--p-border-radius-400); max-height: calc(100% - 3.75rem); }
  .sca .sca-polaris .Polaris-Modal__Body, .sca .sca-polaris .Polaris-Modal__NoScrollBody { flex: 1 1 auto; min-height: 0; overflow: auto; }
  .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; } }
`;

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 = props => {
  const {url, children, saveBar, toast, modal, windowRef, cursor, bind} = props;
  const canSave = ("saveBar" in props);
  const {PIcon, PInlineStack, SaveBar, SupercycleMark, TourCursor} = adminCalendarSetupScope();
  const ownRef = useRef(null);
  const boxRef = windowRef || ownRef;
  const zoomRef = useRef(null);
  const [zoom, setZoom] = useState(0.6);
  const [floor, setFloor] = useState(0);
  useEffect(() => {
    const el = boxRef.current;
    if (!el || typeof ResizeObserver === "undefined") return undefined;
    const fit = () => setZoom(Math.max(0.2, Math.min(1, el.clientWidth / 1066)));
    fit();
    const ro = new ResizeObserver(fit);
    ro.observe(el);
    return () => ro.disconnect();
  }, [windowRef]);
  useEffect(() => {
    const el = zoomRef.current;
    if (!el || typeof ResizeObserver === "undefined") return undefined;
    const ro = new ResizeObserver(([e]) => setFloor(h => Math.max(h, e.contentRect.height)));
    ro.observe(el);
    return () => ro.disconnect();
  }, []);
  const zoomStyle = {
    zoom,
    width: 1066,
    minHeight: floor || undefined
  };
  const overlayZoomStyle = {
    width: 1066,
    height: 100 / zoom + "%",
    transform: "scale(" + zoom + ")"
  };
  return <div className="not-prose sca">
      <style>{POLARIS_CSS}</style>
      <style>{ADMIN_CSS}</style>
      <div className="sca-window" ref={boxRef} {...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" style={zoomStyle} ref={zoomRef}>
            {canSave && <div className="sca-topbar">
                <span className="sca-topbar-logo"><svg viewBox="0 0 89 101" aria-hidden="true"><path fill="#95BF47" d="M77.667 19.756c-.07-.505-.51-.785-.877-.816-.363-.03-7.482-.139-7.482-.139s-5.954-5.781-6.542-6.37c-.588-.588-1.736-.41-2.183-.277-.006.003-1.118.347-2.99.927a20.969 20.969 0 00-1.433-3.518c-2.12-4.045-5.224-6.184-8.974-6.19h-.014c-.261 0-.52.025-.78.047a11.451 11.451 0 00-.338-.39c-1.635-1.749-3.73-2.6-6.24-2.525-4.844.138-9.668 3.637-13.58 9.851-2.752 4.373-4.847 9.866-5.44 14.119l-9.539 2.954c-2.808.883-2.896.969-3.263 3.616-.271 2-7.618 58.807-7.618 58.807L61.94 100.5l26.683-6.633S77.737 20.26 77.667 19.756zM54.51 14.035l-4.778 1.479c-.036-2.453-.327-5.865-1.47-8.814 3.676.696 5.485 4.855 6.248 7.335zm-7.999 2.477l-10.279 3.183c.994-3.804 2.877-7.591 5.191-10.074.86-.924 2.064-1.953 3.49-2.541 1.34 2.796 1.632 6.755 1.598 9.432zm-6.6-12.784c1.138-.025 2.095.225 2.913.763-1.31.68-2.574 1.657-3.762 2.93-3.076 3.301-5.435 8.426-6.375 13.37-2.933.907-5.801 1.797-8.442 2.613 1.667-7.782 8.19-19.46 15.666-19.676z" /><path fill="#5E8E3E" d="M76.793 18.943c-.363-.03-7.482-.139-7.482-.139s-5.954-5.782-6.542-6.37c-.22-.219-.516-.333-.827-.38l.003 88.443 26.68-6.63S77.74 20.263 77.67 19.758c-.07-.504-.513-.785-.877-.815z" /><path fill="#fff" d="M47.152 32.662l-3.099 11.594s-3.456-1.573-7.554-1.315c-6.01.38-6.073 4.17-6.012 5.121.327 5.186 13.969 6.318 14.734 18.463.602 9.555-5.068 16.092-13.239 16.608-9.807.618-15.206-5.166-15.206-5.166l2.078-8.84s5.435 4.101 9.785 3.827c2.841-.18 3.856-2.492 3.754-4.126-.428-6.764-11.536-6.364-12.238-17.478-.59-9.352 5.552-18.83 19.104-19.684 5.221-.336 7.893.996 7.893.996z" /></svg>Shopify</span>
                <span>{saveBar}</span>
                <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" style={overlayZoomStyle}><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  @container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (max-width: 47.9975em) {\n\n.sca-polaris .Polaris-Modal-Dialog__Modal{\n    bottom:0;\n    max-height:100%;\n}\n  }\n\n@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (min-width: 48em) {\n\n.sca-polaris .Polaris-IndexTable__PaginationWrapper{\n    position:sticky;\n    bottom:0;\n}\n  }\n\n@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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@container scr (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>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.