> ## 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.

# Convert to purchase

> Turn an active cycle into a sale so the customer keeps the item instead of returning it

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; } }
  .sca-polaris { background: var(--p-color-bg); min-height: 100%; }
  .sca-polaris .Polaris-Page { padding-bottom: var(--p-space-400); }
  /* Shopify top bar with the App Bridge contextual save bar */
  .sca-topbar { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 6px 12px; background: #1a1a1a; color: #e3e3e3; font-size: 12px; min-height: 36px; }
  .sca-topbar-logo { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; font-size: 13px; color: #fff; }
  .sca-topbar-logo .sc-bag { width: 16px; height: 16px; border-radius: 4px; background: #95bf47; display: grid; place-items: center; color: #fff; }
  .sca-topbar-logo .sc-bag svg { width: 11px; height: 11px; }
  .sca-topbar-store { display: inline-flex; justify-content: flex-end; align-items: center; gap: 6px; color: #e3e3e3; font-weight: 550; }
  .sca-topbar-store .sc-av { width: 16px; height: 16px; border-radius: 50%; background: #08b27d; display: grid; place-items: center; color: #f7f5ec; }
  .sca-savebar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 3px 4px 3px 12px; background: #303030; border-radius: 10px; min-width: 260px; }
  .sca-savebar-msg { display: inline-flex; align-items: center; gap: 8px; font-weight: 550; white-space: nowrap; }
  .sca-savebar-msg svg { width: 16px; height: 16px; flex: none; }
  .sca-sbtn { font: inherit; height: 26px; padding: 0 12px; border-radius: 8px; border: 0; font-size: 12px; font-weight: 550; cursor: pointer; }
  .sca-sbtn-dark { background: #4a4a4a; color: #e3e3e3; } .sca-sbtn-dark:hover { background: #616161; }
  .sca-sbtn-light { background: #fff; color: #303030; } .sca-sbtn-light:hover { background: #f1f1f1; }
  /* Shopify admin's embedded-app title bar */
  .sca-appbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid #e3e3e3; background: #f1f1f1; font-size: 14px; }
  .sca-appbar-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; color: #303030; }
  .sca-applogo { width: 20px; height: 20px; display: block; }
  .sca-appbar .Polaris-Icon { color: #4a4a4a; }
  /* App-specific styles from web/frontend/src/assets/App.scss */
  .sca-polaris .RentalMethod { cursor: pointer; }
  .sca-polaris .RentalMethod > .Polaris-Box { transition: all var(--p-motion-duration-500) var(--p-motion-ease-out); background-color: var(--p-color-bg-surface); border: var(--p-border-width-025) solid var(--p-color-border); border-radius: var(--p-border-radius-200); position: relative; }
  .sca-polaris .RentalMethod .VerticalTabs__Item__Pip { opacity: 0; display: block; position: absolute; top: 0.8rem; bottom: 0.8rem; left: 0; width: 0.1875rem; background-color: var(--p-color-bg-fill-brand-selected); border-top-right-radius: var(--p-border-radius-100); border-bottom-right-radius: var(--p-border-radius-100); }
  .sca-polaris .RentalMethod:hover > .Polaris-Box, .sca-polaris .RentalMethod.hover > .Polaris-Box { color: var(--p-color-text-primary-hover); border-color: var(--p-color-border-hover); background-color: var(--p-color-bg-surface-hover); }
  .sca-polaris .RentalMethod.active > .Polaris-Box { color: var(--p-color-text-primary-selected); border-color: var(--p-color-border-selected); background-color: var(--p-color-bg-surface-selected); }
  /* Knob toggle, from components/Knob.module.css */
  .sca .Knob-track { --track-height: 1.25rem; position: relative; height: var(--track-height); width: 2rem; flex: none; background: var(--p-color-icon-secondary); padding: 0.25rem; box-shadow: inset 0 0.0625rem 0.25rem rgba(0,0,0,.05); border: none; border-radius: 0.375rem; cursor: pointer; outline: none; transition: background var(--p-motion-duration-50) var(--p-motion-ease); }
  .sca .Knob-track:hover { background: rgba(97,97,97,1); }
  .sca .Knob-track.on { background: var(--p-color-bg-inverse); }
  .sca .Knob-track.on:hover { background: rgba(48,48,48,1); }
  .sca .Knob { height: 0.75rem; width: 0.75rem; border-radius: 0.1875rem; background: var(--p-color-bg-surface); transition: transform var(--p-motion-duration-50) var(--p-motion-ease); }
  .sca .Knob.on { transform: translate(100%); }
  /* Overlays (Modal, Toast) live in the window, not the viewport. 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 = ({url, children, saveBar, toast, modal, windowRef, cursor, bind}) => {
  const {PIcon, PInlineStack, SupercycleMark, TourCursor} = adminCalendarSetupScope();
  const ownRef = useRef(null);
  const boxRef = windowRef || ownRef;
  const [zoom, setZoom] = useState(0.6);
  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]);
  const zoomStyle = {
    zoom,
    width: 1066
  };
  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}>
            {saveBar && <div className="sca-topbar">
                <span className="sca-topbar-logo"><span className="sc-bag"><svg viewBox="0 0 20 20" fill="currentColor"><path d="M13.4 5.2c-.2-.1-.6 0-.6 0s-.9-1-1.2-1.3c-.4-.4-1.1-.3-1.4-.2 0 0-.1 0-.2.1-.3-.9-.8-1.7-1.8-1.7C5.9 2.1 4.6 5 4.2 6.5l-1.5.5c-.5.1-.5.2-.6.6L1 16.2l9.2 1.7 5-1.1L13.4 5.2z" /></svg></span>Shopify</span>
                {saveBar}
                <span className="sca-topbar-store"><span className="sc-av"><SupercycleMark size={11} /></span>Supercycle Demo</span>
              </div>}
            <div className="sca-polaris">
              <div className="sca-appbar">
                <span className="sca-appbar-name"><img className="sca-applogo" src="/images/logo/logomark-dark.svg" alt="" width="20" height="20" />Supercycle</span>
                <PIcon name="menuHorizontal" />
              </div>
              {children}
            </div>
          </div>
        </div>
        {(modal || toast) && <div className="sca-overlay"><div className="sca-zoom" 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";

export const customerAccountRentalsScope = () => ({
  AccountBtn,
  AccountCard,
  AccountDivider,
  AccountH2,
  AccountH3,
  AccountIcon,
  AccountRow,
  AccountSub,
  RenderReset,
  RenderWindow
});

export const ACCOUNT = {
  text: "#000000",
  subdued: "rgba(0, 0, 0, 0.56)",
  border: "#dfdfdf",
  accent: "#0071e3",
  critical: "#dd1d1d",
  pageBg: "#f4f4f4",
  cardBg: "#ffffff",
  badgeBg: "#f6f6f6",
  font: '-apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
  size: {
    xs: 10,
    sm: 12,
    base: 14,
    md: 16,
    lg: 18,
    xl: 20,
    xxl: 22
  },
  space: {
    xs: 4,
    sm: 8,
    md: 10,
    base: 14,
    lg: 16,
    xl: 20,
    xxl: 24
  },
  radius: {
    sm: 8,
    base: 12,
    lg: 16,
    pill: 36
  },
  shadow: "0 0 0 0.5px rgba(0,0,0,.08), 0 2px 12px rgba(0,0,0,.08)"
};

export const AccountRow = ({label, value, strong}) => <div style={{
  display: "flex",
  justifyContent: "space-between",
  gap: 14,
  fontWeight: strong ? 600 : 400
}}>
    <span style={{
  color: strong ? ACCOUNT.text : ACCOUNT.subdued
}}>{label}</span>
    <span>{value}</span>
  </div>;

export const AccountBadge = ({children}) => <span style={{
  display: "inline-flex",
  alignItems: "center",
  height: 22,
  padding: "0 6px",
  borderRadius: ACCOUNT.radius.pill,
  background: ACCOUNT.badgeBg,
  fontSize: ACCOUNT.size.sm,
  fontWeight: 600,
  lineHeight: "16.2px"
}}>
    {children}
  </span>;

export const AccountDivider = () => <div style={{
  height: 1,
  background: ACCOUNT.border
}} />;

export const AccountSub = ({children, size = ACCOUNT.size.base}) => <div style={{
  fontSize: size,
  color: ACCOUNT.subdued,
  lineHeight: size === 12 ? "16.2px" : "18.9px"
}}>{children}</div>;

export const AccountH3 = ({children}) => <div style={{
  fontSize: ACCOUNT.size.md,
  fontWeight: 600,
  lineHeight: "19.2px"
}}>{children}</div>;

export const AccountH2 = ({children}) => <div style={{
  fontSize: ACCOUNT.size.md,
  fontWeight: 600,
  lineHeight: "19.2px"
}}>{children}</div>;

export const AccountCard = ({children, gap = ACCOUNT.space.lg}) => <div style={{
  background: ACCOUNT.cardBg,
  borderRadius: ACCOUNT.radius.lg,
  boxShadow: ACCOUNT.shadow,
  padding: ACCOUNT.space.lg,
  display: "grid",
  gap
}}>
    {children}
  </div>;

export const AccountBtn = ({kind = "secondary", children, onClick, disabled, full = true}) => {
  const kinds = {
    primary: {
      background: ACCOUNT.accent,
      color: "#ffffff",
      boxShadow: "none"
    },
    secondary: {
      background: "transparent",
      color: ACCOUNT.accent,
      boxShadow: "inset 0 0 0 1px " + ACCOUNT.border
    },
    critical: {
      background: "#ffffff",
      color: ACCOUNT.critical,
      boxShadow: "inset 0 0 0 1px " + ACCOUNT.critical
    },
    plain: {
      background: "transparent",
      color: ACCOUNT.accent,
      boxShadow: "none",
      fontWeight: 400,
      padding: "14px 0"
    }
  };
  return <button type="button" className={onClick && !disabled && kind !== "plain" ? "scr-pressable" : undefined} onClick={disabled ? undefined : onClick} aria-disabled={disabled || undefined} style={{
    font: "inherit",
    fontSize: ACCOUNT.size.base,
    fontWeight: 600,
    lineHeight: "18.9px",
    padding: ACCOUNT.space.base,
    border: 0,
    borderRadius: ACCOUNT.radius.base,
    cursor: disabled ? "default" : "pointer",
    width: full ? "100%" : undefined,
    opacity: disabled ? 0.5 : 1,
    ...kinds[kind]
  }}>
      {children}
    </button>;
};

export const AccountIcon = ({name, size = 18, color = ACCOUNT.text}) => {
  const common = {
    width: size,
    height: size,
    viewBox: "0 0 20 20",
    fill: "none",
    xmlns: "http://www.w3.org/2000/svg",
    "aria-hidden": true
  };
  if (name === "clock") return <svg {...common}>
        <circle cx="10" cy="10" r="7.25" stroke={color} strokeWidth="1.5" />
        <path d="M10 5.75V10l2.75 1.75" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
      </svg>;
  if (name === "check") return <svg {...common}>
        <circle cx="10" cy="10" r="7.25" stroke={color} strokeWidth="1.5" />
        <path d="M6.5 10.2l2.3 2.3 4.7-4.9" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
      </svg>;
  if (name === "back") return <svg {...common}>
        <path d="M11.5 4.5L6 10l5.5 5.5" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M6.5 10H15" stroke={color} strokeWidth="1.5" strokeLinecap="round" />
      </svg>;
  if (name === "image") return <svg {...common}>
        <rect x="3" y="4.5" width="14" height="11" rx="1.5" stroke={color} strokeWidth="1.4" />
        <circle cx="7.5" cy="8.5" r="1.4" stroke={color} strokeWidth="1.4" />
        <path d="M4 14l4-3.5 2.5 2.2 2.5-2 3.5 3.3" stroke={color} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
      </svg>;
  if (name === "close") return <svg {...common}>
        <path d="M5.5 5.5l9 9M14.5 5.5l-9 9" stroke={color} strokeWidth="1.5" strokeLinecap="round" />
      </svg>;
  return null;
};

export const AccountConvertToPurchase = () => {
  const {AccountBtn, AccountCard, AccountDivider, AccountH2, AccountH3, AccountIcon, AccountRow, AccountSub, RenderReset, RenderWindow} = customerAccountRentalsScope();
  const [modal, setModal] = useState(false);
  const [purchased, setPurchased] = useState(false);
  const money = n => "$" + n.toFixed(2);
  const RESALE = 420;
  const PAID = 63.99;
  const TODAY = RESALE - PAID;
  const purchase = () => {
    setPurchased(true);
    setModal(false);
  };
  const reset = () => {
    setPurchased(false);
    setModal(false);
  };
  return <RenderWindow label="Example rental page in customer accounts" url="shopify.com/account/pages/rentals/1042" designWidth={1168} gutter={40} background="#f4f4f4" actions={purchased && <RenderReset onClick={reset} />} overlay={({zoom}) => modal && <div className="sc-acct sc-acct-overlay" role="dialog" aria-modal="true" aria-label="Purchase this item">
            <div className="sc-acct-modal" style={{
    zoom,
    width: 480
  }}>
              <div className="sc-acct-modal-head">
                <div style={{
    fontSize: 20,
    fontWeight: 600,
    lineHeight: "24px"
  }}>Purchase this item</div>
                <button type="button" className="sc-acct-modal-x" aria-label="Close" onClick={() => setModal(false)}>
                  <AccountIcon name="close" size={18} />
                </button>
              </div>
              <div className="sc-acct-modal-body">
                <AccountSub>Keep this item for good. We'll charge the difference between the resale price and what you've already paid.</AccountSub>
                <div className="sc-acct-figures sc-acct-modal-figures">
                  <div>
                    <AccountSub>Resale value</AccountSub>
                    <AccountH3>{money(RESALE)}</AccountH3>
                  </div>
                  <div>
                    <AccountSub>Already paid</AccountSub>
                    <AccountH3>{money(PAID)}</AccountH3>
                  </div>
                  <div>
                    <AccountSub>Pay today</AccountSub>
                    <AccountH3>{money(TODAY)}</AccountH3>
                  </div>
                </div>
              </div>
              <div className="sc-acct-modal-foot">
                <AccountBtn kind="plain" full={false} onClick={() => setModal(false)}>
                  Cancel
                </AccountBtn>
                <AccountBtn kind="primary" full={false} onClick={purchase}>
                  Purchase this item
                </AccountBtn>
              </div>
            </div>
          </div>}>
      <div className="sc-acct">
      <style>{`
        .sc-acct { font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #000; font-size: 14px; line-height: 18.9px; }
        .sc-acct-header { display: flex; align-items: center; justify-content: space-between; height: 64px; }
        .sc-acct-brand { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
        .sc-acct-avatar { width: 32px; height: 32px; border-radius: 50%; background: #fff; color: #000; display: grid; place-items: center; font-size: 14px; font-weight: 600; box-shadow: 0 0 0 0.5px rgba(0,0,0,.08), 0 2px 12px rgba(0,0,0,.08); }
        .sc-acct-shell { display: grid; grid-template-columns: 133px minmax(0, 976px); column-gap: 59px; padding-top: 20px; align-items: start; }
        .sc-acct-nav { display: grid; row-gap: 6px; padding: 5px 5px 14px; }
        .sc-acct-nav span { font-size: 20px; font-weight: 600; line-height: 24px; color: rgba(0,0,0,.56); }
        .sc-acct-nav span[data-active] { color: #000; }
        .sc-acct-body { display: grid; gap: 20px; min-width: 0; padding-top: 4px; }
        .sc-acct-pagehead { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; align-items: start; min-height: 48px; }
        .sc-acct-pagehead-title { display: grid; grid-template-columns: 18px 1fr; column-gap: 8px; row-gap: 0; align-items: center; }
        .sc-acct-title { font-size: 20px; font-weight: 600; line-height: 24px; }
        .sc-acct-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; align-items: start; }
        .sc-acct-col-primary { grid-column: span 7; display: grid; gap: 20px; }
        .sc-acct-col-secondary { grid-column: span 5; display: grid; gap: 16px; }
        .sc-acct-thumb { width: 64px; height: 64px; border-radius: 12px; background: #f4f4f4; box-shadow: inset 0 0 0 1px #dfdfdf; display: grid; place-items: center; color: rgba(0,0,0,.56); }
        .sc-acct-footer { display: flex; gap: 14px; padding: 40px 0 16px; font-size: 14px; color: #0071e3; }
        /* Modal, measured on the live account: gray #f4f4f4 dialog, 1px #d4d4d4 border, 16px radius,
           480px max, 14px 20px head and foot padding, actions right-aligned with an 8px gap,
           rgba(0,0,0,.6) blurred backdrop. */
        .sc-acct-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: grid; place-items: center; padding: 24px; z-index: 5; }
        .sc-acct-modal { width: 100%; max-width: 480px; background: #f4f4f4; border: 1px solid #d4d4d4; border-radius: 16px; overflow: hidden;
          box-shadow: 0 1px 2px -.5px rgba(0,0,0,.05), 0 2px 4px -1px rgba(0,0,0,.08), 0 3px 6px -1.5px rgba(0,0,0,.08), 0 8px 16px -6px rgba(0,0,0,.06), 0 24px 40px -12px rgba(0,0,0,.06), 0 32px 48px -12px rgba(0,0,0,.06); }
        .sc-acct-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px 0; }
        .sc-acct-modal-x { width: 26px; height: 26px; border-radius: 12px; border: 0; background: #f4f4f4; cursor: pointer; display: grid; place-items: center; padding: 4px; }
        .sc-acct-modal-x:hover { background: #e8e8e8; }
        .sc-acct-modal-body { padding: 14px 20px 0; display: grid; gap: 14px; }
        .sc-acct-modal-figures { background: #fff; border: 1px solid #dedede; border-radius: 12px; padding: 14px; }
        .sc-acct-modal-foot { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 14px 20px; }
        .sc-acct-figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
      `}</style>

            <div className="sc-acct-header" aria-hidden="true">
              <span className="sc-acct-brand">Summit store</span>
              <span className="sc-acct-avatar">M</span>
            </div>

            <div className="sc-acct-shell">
              <nav className="sc-acct-nav" aria-hidden="true">
                <span data-active="">Dashboard</span>
                <span>Orders</span>
                <span>Back to Shop</span>
                <span>Profile</span>
              </nav>

              <div className="sc-acct-body">
                <div className="sc-acct-pagehead">
                  <div className="sc-acct-pagehead-title">
                    <AccountIcon name="back" />
                    <div className="sc-acct-title">Rental SC-1042</div>
                    <span />
                    <AccountSub>Created 10 January 9:14am</AccountSub>
                  </div>
                  <AccountBtn kind="secondary" full={false}>
                    View order
                  </AccountBtn>
                </div>

                <div className="sc-acct-grid">
                  <div className="sc-acct-col-primary">
                    <AccountCard>
                      <div style={{
    display: "grid",
    gridTemplateColumns: "auto 1fr",
    columnGap: 14,
    alignItems: "center"
  }}>
                        <span className="sc-acct-thumb">
                          <AccountIcon name="image" size={22} color="rgba(0,0,0,.56)" />
                        </span>
                        <div style={{
    display: "grid",
    gap: 4
  }}>
                          <AccountH2>All-mountain ski set</AccountH2>
                          <AccountSub>170 cm</AccountSub>
                        </div>
                      </div>
                    </AccountCard>

                    <AccountCard>
                      <div style={{
    display: "grid",
    gridTemplateColumns: "18px 1fr",
    columnGap: 14,
    rowGap: 4,
    alignItems: "center"
  }}>
                        <AccountIcon name={purchased ? "check" : "clock"} color={purchased ? ACCOUNT.text : ACCOUNT.text} />
                        <AccountH2>{purchased ? "Complete" : "Return in 12 days"}</AccountH2>
                        <span />
                        <AccountSub>{purchased ? "Converted to purchase" : "Return by 24 Jan"}</AccountSub>
                      </div>
                      <AccountDivider />
                      <AccountSub>
                        {purchased ? "This item is yours to keep. Pay the outstanding balance below to complete your purchase." : "This item is due to be returned on 24 Jan. Follow the return instructions in your account to complete the process."}
                      </AccountSub>
                      {!purchased && <div style={{
    display: "grid",
    gap: 14
  }}>
                          <AccountBtn kind="secondary">Return</AccountBtn>
                          <AccountBtn kind="secondary" onClick={() => setModal(true)}>
                            Purchase this item
                          </AccountBtn>
                        </div>}
                    </AccountCard>

                    <AccountCard>
                      <div style={{
    display: "grid",
    gap: 4
  }}>
                        <AccountH2>Payments</AccountH2>
                        <AccountSub>{purchased ? money(TODAY) + " outstanding" : "You have no outstanding charges"}</AccountSub>
                      </div>
                      <AccountDivider />
                      <div style={{
    display: "grid",
    gap: 6
  }}>
                        <AccountRow label="Rental, 10 to 24 Jan" value={money(PAID)} />
                        {purchased && <AccountRow label="Purchase" value={money(TODAY)} />}
                      </div>
                      <AccountDivider />
                      <div style={{
    display: "grid",
    gap: 6
  }}>
                        <AccountRow label="Paid" value={money(PAID)} strong />
                        <AccountRow label="Outstanding" value={money(purchased ? TODAY : 0)} strong />
                      </div>
                      {purchased && <AccountBtn kind="primary">Pay {money(TODAY)}</AccountBtn>}
                    </AccountCard>
                  </div>

                  <div className="sc-acct-col-secondary">
                    <AccountCard>
                      <AccountH2>Schedule</AccountH2>
                      <div style={{
    display: "grid",
    gridTemplateColumns: "1fr 1fr",
    gap: 14
  }}>
                        <div>
                          <AccountSub>Delivery</AccountSub>
                          <div>10 Jan 2026</div>
                        </div>
                        <div>
                          <AccountSub>Return</AccountSub>
                          <div>24 Jan 2026</div>
                        </div>
                      </div>
                    </AccountCard>
                    <AccountCard>
                      <AccountH2>Address</AccountH2>
                      <div>
                        <div style={{
    marginBottom: 4
  }}>Shipping address</div>
                        <AccountSub>Lisa Lendme</AccountSub>
                        <AccountSub>18 Ridge Road</AccountSub>
                        <AccountSub>Chamonix</AccountSub>
                        <AccountSub>74400</AccountSub>
                        <AccountSub>France</AccountSub>
                      </div>
                    </AccountCard>
                  </div>
                </div>
              </div>
            </div>

            <div className="sc-acct-footer" aria-hidden="true">
              <span>Cookie preferences</span>
              <span>Privacy policy</span>
            </div>
      </div>
    </RenderWindow>;
};

export const renderKitScope = () => ({
  RenderStyles
});

export const RENDER_CSS = `
  .scr { width: 100%; min-width: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
  .scr button { margin: 0; appearance: none; text-align: center; }
  .scr button:focus-visible { outline: 2px solid #0071e3; outline-offset: 2px; }

  /* Browser window: neutral traffic dots, centered URL, the docs' layered shadow. */
  .scr-window { position: relative; width: 100%; margin: 0 auto; display: flex; flex-direction: column; 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); }
  .scr-titlebar { flex: none; display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid #ebebeb; background: #fff; }
  .scr-dot { width: 9px; height: 9px; border-radius: 50%; background: #e3e3e3; }
  .scr-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; }
  .scr-page { position: relative; overflow: hidden; }
  /* container-name: scr is what polaris-css.jsx's @container queries measure,
     so a phone viewport cannot switch the page to a mobile layout. */
  .scr-zoom { margin: 0 auto; box-sizing: border-box; container-type: inline-size; container-name: scr; }

  /* Reset: quiet text control in the chrome, shown once a render has moved on from its resting state. */
  .scr-reset { font-size: 11px; color: #85817a; background: none; border: 0; cursor: pointer; padding: 2px 4px; font-family: inherit; }
  .scr-reset:hover { color: #1a1a1a; }

  /* Tablet: iPad in landscape, near-black bezel, camera on the left edge, iPadOS status bar. */
  .scr-tablet { position: relative; width: 100%; margin: 0 auto; box-sizing: border-box; padding: 12px 12px 12px 20px; background: #1c1c1e; border-radius: 24px; touch-action: pan-y;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 12px 28px rgba(11,13,24,.18); }
  .scr-camera { position: absolute; left: 7px; top: 50%; width: 5px; height: 5px; transform: translateY(-50%); border-radius: 50%; background: #3a3a3c; box-shadow: inset 0 0 0 1px #111; }
  .scr-screen { position: relative; overflow: hidden; border-radius: 12px; background: #000; }
  .scr-tablet .scr-reset { position: absolute; right: 16px; top: 14px; z-index: 7; color: rgba(255,255,255,.55); }
  .scr-tablet .scr-reset:hover { color: #fff; }

  /* Main buttons the reader can press ripple softly so it's clear what responds. Plain text
     links and decorative controls don't. Paused on hover, off under reduced motion. */
  .scr-pressable { position: relative; }
  .scr-pressable::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; animation: scr-ripple 2.4s ease-out infinite; }
  @keyframes scr-ripple {
    0% { box-shadow: 0 0 0 0 var(--scr-ripple, rgba(0, 113, 227, .45)); }
    60% { box-shadow: 0 0 0 10px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
  }
  .scr-pressable:hover::after { animation: none; }
  @media (prefers-reduced-motion: reduce) { .scr-pressable::after { animation: none; } }
`;

export const useRenderZoom = (ref, designWidth) => {
  const [zoom, setZoom] = useState(0.6);
  useEffect(() => {
    const el = ref.current;
    if (!el || typeof ResizeObserver === "undefined") return undefined;
    const fit = () => setZoom(Math.max(0.2, Math.min(1, el.clientWidth / designWidth)));
    fit();
    const ro = new ResizeObserver(fit);
    ro.observe(el);
    return () => ro.disconnect();
  }, [designWidth]);
  return zoom;
};

export const RenderReset = ({onClick, className}) => <button type="button" className={"scr-reset" + (className ? " " + className : "")} onClick={onClick}>
    Reset
  </button>;

export const RenderStyles = () => <style>{RENDER_CSS}</style>;

export const RenderWindow = ({url, label, designWidth = 1168, gutter = 40, background = "#ffffff", actions, overlay, children}) => {
  const {RenderStyles} = renderKitScope();
  const ref = useRef(null);
  const total = designWidth + gutter * 2;
  const zoom = useRenderZoom(ref, total);
  const body = typeof children === "function" ? children({
    zoom
  }) : children;
  return <div className="not-prose scr" aria-label={label}>
      <RenderStyles />
      <div className="scr-window" ref={ref}>
        <div className="scr-titlebar">
          <span className="scr-dot" />
          <span className="scr-dot" />
          <span className="scr-dot" />
          <span className="scr-url">{url}</span>
          {actions}
        </div>
        <div className="scr-page" style={{
    background
  }}>
          <div className="scr-zoom" style={{
    zoom,
    width: total,
    padding: "0 " + gutter + "px"
  }}>
            {body}
          </div>
          {typeof overlay === "function" ? overlay({
    zoom
  }) : overlay}
        </div>
      </div>
    </div>;
};

Convert to purchase turns an active cycle into a sale. The item is marked as **sold**, the cycle stops, and any upcoming cycles on that item move to alternative stock. Use it when a customer decides to keep something they're renting.

***

## How it works

A cycle can be converted while it's out with the customer and nothing has come back yet. Supercycle allows it when all of these are true:

* The cycle has been fulfilled but not yet received back.
* The receival has exactly one rental on it.
* Any upcoming cycles on the same item have alternative stock to move to.

If one of them isn't met, the **Convert to purchase** modal shows the reason and blocks the action.

The charge Supercycle suggests is the item's resale price minus what the customer has already paid on the cycle, never less than zero. Where no resale price is set on the product, the retail price is used instead.

***

## Convert a cycle to a purchase

<Steps>
  <Step title="Open the cycle">
    From <Icon icon="shopify" iconType="solid" /> **[Cycles](https://admin.shopify.com/apps/supercycle/cycles)**, open the cycle to convert.
  </Step>

  <Step title="Select Convert to purchase">
    On the receival card, select **Convert to purchase**. It sits next to **Create return**.

    <Frame type="glass" caption="Select Convert to purchase on the receival card, then confirm in the modal.">
      <AdminConvertToPurchase />
    </Frame>
  </Step>

  <Step title="Review the charge">
    The modal shows the **Resale price**, the **Paid** total across the cycle's rental charges, and the **Suggested charge** between them. **Charge amount** is prefilled with the suggestion. Change it to charge something else, or clear it to convert without a charge.
  </Step>

  <Step title="Review upcoming cycles">
    Any upcoming cycles on the item are listed. They're reallocated to alternative items when you confirm.
  </Step>

  <Step title="Confirm">
    Select **Convert to purchase**.
  </Step>
</Steps>

On confirmation, Supercycle creates the charge if the amount is above zero, marks the item as **sold** so it can't be booked again, ends the cycle and clears its return dates, cancels the subscription if the cycle is on one, reallocates upcoming cycles on the item, and logs a **Converted to sale** event on the timeline.

***

## Let customers convert to purchase <Badge color="yellow" size="sm">Beta</Badge>

You can let customers convert their own rentals from [customer accounts](/documentation/online-store/portal).

<Steps>
  <Step title="Open Customer accounts settings">
    Go to <Icon icon="shopify" iconType="solid" /> **[Customer accounts](https://admin.shopify.com/apps/supercycle/settings/portal)**.
  </Step>

  <Step title="Turn on the setting">
    Turn on **Customers can convert to purchase**, then select **Save**.
  </Step>
</Steps>

***

## What the customer sees

Eligible rentals carry a **Purchase this item** button on the rental page in customer accounts. Selecting it opens a summary of the resale value, what the customer has already paid, and what they pay today. When they confirm, the cycle converts and the outstanding balance appears under **Payments** for them to pay.

<Frame type="glass" caption="Select Purchase this item, then confirm in the modal to see the converted rental.">
  <AccountConvertToPurchase />
</Frame>

<Note>
  The button appears only when a resale price is set on the product and the suggested charge can be calculated. The eligibility rules are the same as the admin flow.
</Note>

### Return item reminder email

When convert to purchase is on for customers, the [return item reminder](/supercycle-notifications) email carries a **Complete your purchase** button for each eligible rental on that reminder. The button runs the same eligibility checks and links the customer to their account rental page to finish. Rentals that aren't eligible show the usual reminder content without the button.

***

## Convert to purchase FAQs

<AccordionGroup>
  <Accordion title="Can I convert a cycle that's already been received?">
    No. Once a receival is marked as received, the cycle can't be converted. Handle it as a new sale order in Shopify instead.
  </Accordion>

  <Accordion title="What happens to upcoming cycles on the same item?">
    Supercycle reallocates them to other available items of the same variant. If one of them has no alternative stock, the conversion is blocked and Supercycle names the cycle that can't be reallocated.
  </Accordion>

  <Accordion title="Does converting to purchase refund earlier rental charges?">
    No. Earlier charges stay on the cycle. **Charge amount** is the extra the customer pays to keep the item, not an adjustment to what they've already paid.
  </Accordion>

  <Accordion title="Can I convert without charging the customer?">
    Yes. Leave **Charge amount** blank to convert without creating a charge.
  </Accordion>
</AccordionGroup>