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

# Subscription actions

> Step-by-step guides for changing what a contract bills, when it bills, and which card it charges

export const adminChargesScope = () => ({
  AdminWindow,
  BorderBox,
  ChgBadge,
  ChgBanner,
  ChgBillingCard,
  ChgCardRow,
  ChgCustomerCard,
  ChgIcon,
  ChgMenu,
  ChgModal,
  ChgPage,
  ChgTagsCard,
  ChgTimeline,
  FIcon,
  Knob,
  PBlockStack,
  PBox,
  PButton,
  PCard,
  PChoiceList,
  PDivider,
  PIcon,
  PIndexTable,
  PInlineStack,
  PLayout,
  PLink,
  PPage,
  PRadio,
  PSection,
  PSelect,
  PText,
  PTextField,
  RiskDunningSettings,
  SaveBar,
  SettingSection,
  SettingsPage
});

export const AdminCreateCharge = () => {
  const {AdminWindow, BorderBox, ChgBadge, ChgBillingCard, ChgCustomerCard, ChgModal, ChgPage, ChgTagsCard, PBlockStack, PButton, PCard, PChoiceList, PIndexTable, PLayout, PLink, PSection, PSelect, PText, PTextField} = adminChargesScope();
  const [modal, setModal] = useState(false);
  const [fields, setFields] = useState({
    type: CHARGE_TYPES[0],
    amount: "",
    description: "",
    tax: "taxable"
  });
  const [charges, setCharges] = useState([]);
  const [toast, setToast] = useToast();
  const windowRef = useRef(null);
  const stepsRef = useRef(() => []);
  const resetRef = useRef(() => {});
  const open = () => {
    setFields({
      type: CHARGE_TYPES[0],
      amount: "",
      description: "",
      tax: "taxable"
    });
    setModal(true);
  };
  const create = () => setFields(f => {
    setCharges(cs => [...cs, {
      amount: parseFloat(f.amount) || 0,
      description: f.description
    }]);
    setModal(false);
    setToast("Charge created");
    return f;
  });
  stepsRef.current = () => [{
    to: w => w.querySelector('[data-tour="create-charge"]'),
    click: open,
    hold: 900
  }, {
    to: w => w.querySelector("#chg-amount"),
    click: () => {},
    type: () => [v => setFields(f => ({
      ...f,
      amount: v
    })), "45.00"],
    hold: 400
  }, {
    to: w => w.querySelector("#chg-description"),
    click: () => {},
    type: () => [v => setFields(f => ({
      ...f,
      description: v
    })), "Late return fee"],
    hold: 600
  }, {
    to: w => w.querySelector('[data-tour="charge-create"]'),
    click: create,
    hold: 3000
  }];
  resetRef.current = () => {
    setModal(false);
    setCharges([]);
    setFields({
      type: CHARGE_TYPES[0],
      amount: "",
      description: "",
      tax: "taxable"
    });
    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/2317" toast={toast} modal={<ChgModal open={modal} id="chg-create-title" title="Create charge" onClose={() => setModal(false)} footer={<><PButton onClick={() => setModal(false)}>Cancel</PButton><PButton variant="Primary" onClick={create} tour="charge-create">Create charge</PButton></>}>
        <PBlockStack gap="400">
          <PSelect id="chg-type" label="Charge type" options={CHARGE_TYPES} value={fields.type} onChange={v => setFields(f => ({
    ...f,
    type: v
  }))} />
          <PTextField id="chg-amount" label="Amount" prefix="£" placeholder="0.00" value={fields.amount} onChange={v => setFields(f => ({
    ...f,
    amount: v
  }))} />
          <PTextField id="chg-description" label="Description" placeholder="What the charge is for" value={fields.description} onChange={v => setFields(f => ({
    ...f,
    description: v
  }))} helpText="Shown to the customer on the charge and in the payment request." />
          {fields.type === CHARGE_TYPES[0] && <PBlockStack gap="200">
              <PText variant="headingSm">Tax</PText>
              <PChoiceList name="chg-tax" selected={fields.tax} onChange={v => setFields(f => ({
    ...f,
    tax: v
  }))} choices={[{
    value: "taxable",
    label: "Apply shop tax rates"
  }, {
    value: "exempt",
    label: "No tax (0%)"
  }]} />
            </PBlockStack>}
        </PBlockStack>
      </ChgModal>}>
      <style>{CHG_CSS}</style><style>{MEM_CSS}</style>
      <ChgPage title="Cycle #2317" badges={<ChgBadge tone="Info" pip="PartiallyComplete">With customer</ChgBadge>} subtitle="Coastal Breeze Top - Large / White · Subscription" actions={[<PButton>Create return</PButton>, <PButton disclosure>More actions</PButton>]}>
        <PLayout>
          <PSection>
            <PBlockStack gap="400">
              <ChgBillingCard card={CHG_CARDS[0]} menu={false} onMenu={() => {}} onChangeMethod={() => {}} onCreateCharge={open} charges={charges} />
              {charges.length > 0 && <PCard><PBlockStack gap="300"><PText variant="headingSm">Charges</PText><BorderBox padding="0"><PIndexTable headings={["Charge", "Description", "Status", "Amount"]} rows={charges.map((c, i) => [<PLink>#{2920 + i}</PLink>, <PText>{c.description}</PText>, <ChgBadge tone="Info" pip="Incomplete">Pending</ChgBadge>, <PText fontWeight="semibold">£{c.amount.toFixed(2)}</PText>])} /></BorderBox></PBlockStack></PCard>}
            </PBlockStack>
          </PSection>
          <PSection variant="oneThird"><PBlockStack gap="400"><ChgCustomerCard /><ChgTagsCard /></PBlockStack></PSection>
        </PLayout>
      </ChgPage>
    </AdminWindow>;
};

export const AdminDunningRetry = () => {
  const {AdminWindow, BorderBox, ChgBadge, ChgBanner, ChgCustomerCard, ChgModal, ChgPage, ChgTagsCard, PBlockStack, PButton, PCard, PIndexTable, PInlineStack, PLayout, PLink, PSection, PText} = adminChargesScope();
  const [modal, setModal] = useState(false);
  const [retried, setRetried] = useState(false);
  const [toast, setToast] = useToast();
  const windowRef = useRef(null);
  const stepsRef = useRef(() => []);
  const resetRef = useRef(() => {});
  const retry = () => {
    setModal(false);
    setRetried(true);
    setToast("Payment attempt created");
  };
  stepsRef.current = () => [{
    to: w => w.querySelector('[data-tour="retry-now"]'),
    click: () => setModal(true),
    hold: 1000
  }, {
    to: w => w.querySelector('[data-tour="retry-confirm"]'),
    click: retry,
    hold: 3000
  }];
  resetRef.current = () => {
    setModal(false);
    setRetried(false);
    setToast(null);
  };
  const {cursor, bind} = useTour(windowRef, stepsRef, resetRef);
  const rows = [[<PText>03 December at 0:00</PText>, <PInlineStack gap="200" blockAlign="center"><PLink>Billing attempt</PLink><ChgBadge tone="Critical">Failed</ChgBadge></PInlineStack>, <PText fontWeight="semibold">£0.00</PText>]];
  if (retried) rows.unshift([<PText>Today at 9:41</PText>, <PInlineStack gap="200" blockAlign="center"><PLink>Billing attempt</PLink><ChgBadge tone="Info" pip="Incomplete">Pending</ChgBadge></PInlineStack>, <PText fontWeight="semibold">£0.00</PText>]);
  return <AdminWindow windowRef={windowRef} cursor={cursor} bind={bind} url="admin.shopify.com/store/summit/apps/supercycle/charges/1042" toast={toast} modal={<ChgModal open={modal} id="chg-retry-title" title="Retry payment now?" onClose={() => setModal(false)} footer={<><PButton onClick={() => setModal(false)}>Cancel</PButton><PButton variant="Primary" onClick={retry} tour="retry-confirm">Retry now</PButton></>}>
        <PText>Supercycle creates a new billing attempt straight away instead of waiting for the next scheduled retry. The attempt still counts toward the maximum retries.</PText>
      </ChgModal>}>
      <style>{CHG_CSS}</style>
      <ChgPage title="Charge #1042" badges={<ChgBadge tone="Critical" pip="Incomplete">Failed</ChgBadge>} subtitle="3 December 2025 at 0:00" actions={[<PButton>Cancel charge</PButton>]}>
        <PLayout>
          <PSection>
            <PCard>
              <PBlockStack gap="300">
                <PText variant="headingSm">Payment attempts</PText>
                <ChgBanner tone="critical" icon="alertDiamond" title="Last payment failed">
                  <PText>The payment method was declined by the processor. Advise the customer to contact their bank or try another payment method.</PText>
                  <PText>Response from Shopify:</PText>
                  <ul><li><PText as="span">PAYMENT_METHOD_DECLINED: Your card has insufficient funds.</PText></li></ul>
                </ChgBanner>
                <ChgBanner tone="info" icon="card" title="Dunning active">
                  <PText>{retried ? "Dunning attempt 2 of 6. A new attempt is in progress." : "Dunning attempt 1 of 6. Next attempt on 4 December 2025 at 0:00"}</PText>
                  {!retried && <PInlineStack><PButton onClick={() => setModal(true)} tour="retry-now">Retry now</PButton></PInlineStack>}
                </ChgBanner>
                <BorderBox padding="0"><PIndexTable headings={["Date", "Method", "Paid"]} rows={rows} /></BorderBox>
                <PInlineStack align="end"><PButton variant="Primary">Create payment attempt</PButton></PInlineStack>
              </PBlockStack>
            </PCard>
          </PSection>
          <PSection variant="oneThird"><PBlockStack gap="400"><ChgCustomerCard outstanding="£12.50" /><ChgTagsCard /></PBlockStack></PSection>
        </PLayout>
      </ChgPage>
    </AdminWindow>;
};

export const AdminDunningSettings = () => {
  const {AdminWindow, RiskDunningSettings, SaveBar, SettingsPage} = adminChargesScope();
  const initial = {
    retries: "6",
    interval: "1",
    unit: "Days",
    vaulting: false,
    deposits: false
  };
  const [s, setS] = useState(initial);
  const [dirty, setDirty] = useState(false);
  const [toast, setToast] = useToast();
  const windowRef = useRef(null);
  const stepsRef = useRef(() => []);
  const resetRef = useRef(() => {});
  const set = k => v => {
    setS(o => ({
      ...o,
      [k]: v
    }));
    setDirty(true);
  };
  const save = () => {
    setDirty(false);
    setToast("Settings saved successfully");
  };
  stepsRef.current = () => [{
    to: w => w.querySelector("#dunning-retries"),
    click: () => set("retries")(""),
    type: () => [set("retries"), "3"],
    hold: 700
  }, {
    to: w => w.querySelector("#dunning-interval"),
    click: () => set("interval")(""),
    type: () => [set("interval"), "2"],
    hold: 900
  }, {
    to: w => w.querySelector('[data-tour="save"]'),
    click: save,
    hold: 2600
  }];
  resetRef.current = () => {
    setS(initial);
    setDirty(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/settings/risk" toast={toast} saveBar={dirty && <SaveBar onDiscard={() => {
    setS(initial);
    setDirty(false);
  }} onSave={save} />}>
      <style>{FEES_CSS}</style><style>{CHG_CSS}</style>
      <SettingsPage selected="risk">
        <RiskDunningSettings retries={s.retries} onRetries={set("retries")} interval={s.interval} onInterval={set("interval")} unit={s.unit} onUnit={set("unit")} vaulting={s.vaulting} onVaulting={set("vaulting")} deposits={s.deposits} onDeposits={set("deposits")} />
      </SettingsPage>
    </AdminWindow>;
};

export const RiskDunningSettings = ({retries, onRetries, interval, onInterval, unit, onUnit, vaulting, onVaulting, deposits, onDeposits}) => {
  const {FIcon, Knob, PBlockStack, PButton, PCard, PInlineStack, PPage, PSelect, PText, PTextField, SettingSection} = adminChargesScope();
  return <div className="settings-page-content">
      <PPage title="Risk">
        <PBlockStack gap="400">
          <SettingSection title="Dunning" description="Configure how Supercycle should handle failed subscription charges.">
            <div className="Polaris-InlineGrid" style={{
    "--pc-inline-grid-grid-template-columns-xs": "1fr 1fr",
    "--pc-inline-grid-gap-xs": sp(400)
  }}>
              <PTextField id="dunning-retries" label="Maximum retries" value={retries} onChange={onRetries} tour="retries" />
              <PTextField id="dunning-interval" label="Time between retries" value={interval} onChange={onInterval} connectedRight={<PSelect id="dunning-unit" label="Unit" options={["Days", "Hours"]} value={unit} onChange={onUnit} />} />
            </div>
          </SettingSection>
          <PCard>
            <PInlineStack align="space-between" blockAlign="start" wrap={false} gap="400">
              <PBlockStack gap="050"><PInlineStack gap="100" blockAlign="center"><PText variant="headingSm">Card vaulting</PText><FIcon name="info" tone="Subdued" /></PInlineStack><PText tone="subdued">Save a customer's payment method to enable you to charge that card.</PText></PBlockStack>
              <Knob selected={vaulting} onClick={() => onVaulting(!vaulting)} ariaLabel="Card vaulting" />
            </PInlineStack>
          </PCard>
          <PCard>
            <PInlineStack align="space-between" blockAlign="start" wrap={false} gap="400">
              <PBlockStack gap="050"><PInlineStack gap="100" blockAlign="center"><PText variant="headingSm">Deposits</PText><FIcon name="info" tone="Subdued" /></PInlineStack><PText tone="subdued">Use deposits to secure bookings and protect against cancellations.</PText></PBlockStack>
              <Knob selected={deposits} onClick={() => onDeposits(!deposits)} ariaLabel="Deposits" />
            </PInlineStack>
          </PCard>
          <PCard>
            <PInlineStack align="space-between" blockAlign="center" wrap={false} gap="400">
              <PBlockStack gap="050"><PInlineStack gap="100" blockAlign="center"><PText variant="headingSm">Identity verification</PText><FIcon name="info" tone="Subdued" /></PInlineStack><PText tone="subdued">Verify customer identity before allowing them to rent items.</PText></PBlockStack>
              <PButton icon="lock">Upgrade</PButton>
            </PInlineStack>
          </PCard>
        </PBlockStack>
      </PPage>
    </div>;
};

export const AdminManagePaymentMethods = () => {
  const {AdminWindow, ChgCardRow, ChgCustomerCard, ChgModal, ChgPage, PBlockStack, PButton, PCard, PLayout, PSection, PText} = adminChargesScope();
  const [menu, setMenu] = useState(true);
  return <AdminWindow url="admin.shopify.com/store/summit/apps/supercycle/customers/renton-mcborrow" modal={<ChgModal open id="chg-manage-title" title="Manage payment methods" onClose={() => {}}>
        <PBlockStack gap="200">
          <ChgCardRow card={CHG_CARDS[0]} right={<PButton variant="Tertiary" iconOnly icon="menuHorizontal" ariaLabel="Card actions" onClick={() => setMenu(m => !m)} />} />
          {menu && <div className="sca-chg-popover sca-chg-popover--inline" role="menu"><button type="button" role="menuitem" onClick={() => setMenu(false)}>Send link to update card</button><button type="button" role="menuitem" onClick={() => setMenu(false)}>Replace card</button><button type="button" role="menuitem" disabled>Delete card</button></div>}
        </PBlockStack>
      </ChgModal>}>
      <style>{CHG_CSS}</style>
      <ChgPage title="Renton McBorrow">
        <PLayout>
          <PSection><PCard><PBlockStack gap="300"><PText variant="headingSm">Rentals</PText><PText tone="subdued">7 rentals</PText></PBlockStack></PCard></PSection>
          <PSection variant="oneThird"><ChgCustomerCard outstanding="£30.00" /></PSection>
        </PLayout>
      </ChgPage>
    </AdminWindow>;
};

export const AdminChangePaymentMethod = () => {
  const {AdminWindow, ChgBadge, ChgBillingCard, ChgCardRow, ChgCustomerCard, ChgModal, ChgPage, ChgTagsCard, PBlockStack, PBox, PButton, PInlineStack, PLayout, PRadio, PSection, PText} = adminChargesScope();
  const [cardId, setCardId] = useState("visa");
  const [pick, setPick] = useState("visa");
  const [menu, setMenu] = useState(false);
  const [modal, setModal] = useState(false);
  const [toast, setToast] = useToast();
  const windowRef = useRef(null);
  const stepsRef = useRef(() => []);
  const resetRef = useRef(() => {});
  const openModal = () => {
    setMenu(false);
    setPick(cardId);
    setModal(true);
  };
  const save = () => {
    setCardId(pick);
    setModal(false);
    setToast("Payment method updated");
  };
  stepsRef.current = () => [{
    to: w => w.querySelector('[data-tour="billing-menu"]'),
    click: () => setMenu(true),
    hold: 900
  }, {
    to: w => w.querySelector('[data-tour="change-method"]'),
    click: openModal,
    hold: 1000
  }, {
    to: w => w.querySelector('[data-tour="pick-mc"]'),
    click: () => setPick("mc"),
    hold: 900
  }, {
    to: w => w.querySelector('[data-tour="method-save"]'),
    click: save,
    hold: 2800
  }];
  resetRef.current = () => {
    setCardId("visa");
    setPick("visa");
    setMenu(false);
    setModal(false);
    setToast(null);
  };
  const {cursor, bind} = useTour(windowRef, stepsRef, resetRef);
  const card = CHG_CARDS.find(c => c.id === cardId);
  return <AdminWindow windowRef={windowRef} cursor={cursor} bind={bind} url="admin.shopify.com/store/summit/apps/supercycle/cycles/2317" toast={toast} modal={<ChgModal open={modal} id="chg-method-title" title="Change payment method" onClose={() => setModal(false)} footer={<><PButton onClick={() => setModal(false)}>Cancel</PButton><PButton variant="Primary" onClick={save} tour="method-save">Save</PButton></>}>
        <PBlockStack gap="300">
          <PText tone="subdued">Future payments for this cycle are taken from the selected card.</PText>
          {CHG_CARDS.map(c => <div key={c.id} className="BorderBox sca-radiobox" onClick={() => setPick(c.id)} data-tour={"pick-" + c.id}>
              <PBox borderColor={pick === c.id ? "border-inverse" : "border"} borderWidth="025" borderRadius="200" padding="300">
                <PInlineStack gap="300" blockAlign="center" wrap={false}><PRadio id={"chg-card-" + c.id} name="chg-card" label="" checked={pick === c.id} onChange={() => setPick(c.id)} /><div style={{
    flex: 1
  }}><ChgCardRow card={c} /></div></PInlineStack>
              </PBox>
            </div>)}
        </PBlockStack>
      </ChgModal>}>
      <style>{CHG_CSS}</style><style>{MEM_CSS}</style>
      <ChgPage title="Cycle #2317" badges={<ChgBadge tone="Info" pip="PartiallyComplete">With customer</ChgBadge>} subtitle="Coastal Breeze Top - Large / White · Subscription" actions={[<PButton>Create return</PButton>, <PButton disclosure>More actions</PButton>]}>
        <PLayout>
          <PSection><ChgBillingCard card={card} menu={menu} onMenu={() => setMenu(m => !m)} onChangeMethod={openModal} /></PSection>
          <PSection variant="oneThird"><PBlockStack gap="400"><ChgCustomerCard /><ChgTagsCard /></PBlockStack></PSection>
        </PLayout>
      </ChgPage>
    </AdminWindow>;
};

export const ChgCardRow = ({card, right, children}) => {
  const {ChgIcon, PBlockStack, PInlineStack, PText} = adminChargesScope();
  return <PInlineStack gap="300" blockAlign="center" wrap={false}>
      <span className="sca-chg-cardicon"><ChgIcon name={card.icon} /></span>
      <div style={{
    flex: 1
  }}><PBlockStack gap="050"><PText fontWeight="semibold">{card.brand} •••• {card.last4}</PText><PText tone="subdued">Expires {card.expires}</PText></PBlockStack></div>
      {right}{children}
    </PInlineStack>;
};

export const ChgModal = ({open, title, id, onClose, footer, children}) => {
  const {PBox, PButton, PInlineStack, PText} = adminChargesScope();
  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" aria-labelledby={id} 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={id}>{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">
            <div className="Polaris-Modal-Section"><PBox as="section" padding="400">{children}</PBox></div>
          </div>
          {footer && <PInlineStack gap="400" blockAlign="center"><PBox borderColor="border" borderBlockStartWidth="025" padding="400" width="100%"><PInlineStack align="end" blockAlign="center" gap="200">{footer}</PInlineStack></PBox></PInlineStack>}
        </div></div></div>
      </div>
    </>;
};

export const ChgBillingCard = ({card, menu, onMenu, onChangeMethod, onCreateCharge, charges = []}) => {
  const {BorderBox, ChgBadge, ChgMenu, PBlockStack, PButton, PCard, PInlineStack, PLink, PText} = adminChargesScope();
  return <PCard>
      <PBlockStack gap="300">
        <PInlineStack align="space-between" blockAlign="center">
          <ChgBadge icon="card">Billing pending</ChgBadge>
          <ChgMenu open={menu} onToggle={onMenu} tour="billing-menu" items={[{
    label: "Pause billing",
    icon: "pause",
    onClick: onMenu
  }, {
    label: "Resume billing",
    icon: "play",
    onClick: onMenu,
    disabled: true
  }, {
    label: "Edit billing",
    icon: "calendarEdit",
    onClick: onMenu
  }, {
    label: "Change payment method",
    icon: "card",
    onClick: onChangeMethod,
    tour: "change-method"
  }]} />
        </PInlineStack>
        <div className="BorderBoxContainer">
          <BorderBox padding="300">
            <div className="sca-chg-row"><PText>Next charge</PText><PText>1 November</PText></div>
            <div className="sca-chg-row"><PText>Recurring price</PText><PText>£12.50 monthly</PText></div>
            <div className="sca-chg-row"><PText>Billing start</PText><PText>On rental start</PText></div>
            <div className="sca-chg-row"><PText>Billing end</PText><PText>On receival</PText></div>
            <div className="sca-chg-row"><PText>Payment method</PText><PInlineStack blockAlign="center" wrap={false}><span className="sca-chg-shop">shop</span><PText>{card.brand} •••• {card.last4}</PText></PInlineStack></div>
          </BorderBox>
          <BorderBox padding="300">
            <div className="sca-chg-row"><PText>Deposit</PText><PLink>Order #4920</PLink><PText>£300.00</PText></div>
            <div className="sca-chg-row"><PText>Refunded</PText><span /><PText>-£0.00</PText></div>
          </BorderBox>
          <BorderBox padding="300">
            <div className="sca-chg-row"><PText>First payment</PText><PLink>Charge #2919</PLink><PText>£0.00</PText></div>
            <div className="sca-chg-row"><PText>Total</PText><PLink>{1 + charges.length} charge{charges.length ? "s" : ""}</PLink><PText>£{(12.5 + charges.reduce((a, c) => a + c.amount, 0)).toFixed(2)}</PText></div>
            <div className="sca-chg-row"><PText>Paid</PText><PLink>1 charge</PLink><PText>£0.00</PText></div>
            <div className="sca-chg-row"><PText fontWeight="semibold">Outstanding</PText><span /><PText fontWeight="semibold">£{charges.reduce((a, c) => a + c.amount, 0).toFixed(2)}</PText></div>
          </BorderBox>
        </div>
        {onCreateCharge && <PInlineStack align="end"><PButton onClick={onCreateCharge} tour="create-charge">Create charge</PButton></PInlineStack>}
      </PBlockStack>
    </PCard>;
};

export const CHG_CARDS = [{
  id: "visa",
  brand: "Visa",
  last4: "4242",
  expires: "01/26",
  icon: "visa"
}, {
  id: "mc",
  brand: "Mastercard",
  last4: "3005",
  expires: "09/27",
  icon: "mastercard"
}];

export const AdminChargePage = () => {
  const {AdminWindow, BorderBox, ChgBadge, ChgCustomerCard, ChgPage, ChgTagsCard, ChgTimeline, PBlockStack, PBox, PButton, PCard, PDivider, PIndexTable, PInlineStack, PLayout, PLink, PSection, PText} = adminChargesScope();
  return <AdminWindow url="admin.shopify.com/store/summit/apps/supercycle/charges/1013">
      <style>{CHG_CSS}</style><style>{MEM_CSS}</style>
      <ChgPage title="Charge #1013" subtitle="16 February 2025 at 12:00" actions={[<PButton>Cancel charge</PButton>]}>
        <PLayout>
          <PSection>
            <PBlockStack gap="400">
              <PCard><PInlineStack gap="300" blockAlign="center" wrap={false}><span className="sca-chg-thumb" /><PLink>Bronze Plan membership</PLink></PInlineStack></PCard>
              <PCard>
                <div className="BorderBoxContainer">
                  <BorderBox padding="300"><PBlockStack gap="050"><PText tone="subdued">Category</PText><PText>Billing cycle</PText></PBlockStack></BorderBox>
                  <BorderBox padding="300">
                    <div className="Polaris-InlineGrid" style={{
    "--pc-inline-grid-grid-template-columns-xs": "1fr 1fr",
    "--pc-inline-grid-gap-xs": sp(400)
  }}>
                      <PBlockStack gap="050"><PText tone="subdued">From</PText><PText>16 February 2025</PText></PBlockStack>
                      <PBlockStack gap="050"><PText tone="subdued">To</PText><PText>16 March 2025</PText></PBlockStack>
                    </div>
                  </BorderBox>
                </div>
              </PCard>
              <PCard>
                <PBlockStack gap="300">
                  <PInlineStack><ChgBadge icon="paid">Paid</ChgBadge></PInlineStack>
                  <BorderBox padding="0">
                    <PBox padding="300"><div className="sca-chg-row"><PText>Subtotal</PText><PText>£25.00</PText></div><div className="sca-chg-row"><PText>Paid</PText><PText>£25.00</PText></div></PBox>
                    <PDivider />
                    <PBox padding="300" background="bg-surface-secondary"><div className="sca-chg-row"><PText fontWeight="semibold">Due</PText><PText fontWeight="semibold">£0.00</PText></div></PBox>
                  </BorderBox>
                </PBlockStack>
              </PCard>
              <PCard>
                <PBlockStack gap="300">
                  <PText variant="headingSm">Payments</PText>
                  <BorderBox padding="0">
                    <PIndexTable headings={["Attempt date", "Payment", "Paid"]} rows={[[<PText>16 February at 12:00</PText>, <PInlineStack gap="200" blockAlign="center"><PLink>Billing attempt</PLink><ChgBadge pip="Complete">Paid</ChgBadge></PInlineStack>, <PText fontWeight="semibold">£25.00</PText>]]} />
                  </BorderBox>
                  <PInlineStack align="end"><PButton variant="Primary">Create payment</PButton></PInlineStack>
                </PBlockStack>
              </PCard>
              <ChgTimeline />
            </PBlockStack>
          </PSection>
          <PSection variant="oneThird"><PBlockStack gap="400"><ChgCustomerCard /><ChgTagsCard /></PBlockStack></PSection>
        </PLayout>
      </ChgPage>
    </AdminWindow>;
};

export const ChgTimeline = () => {
  const {PBlockStack, PBox, PButton, PCard, PDivider, PIcon, PInlineStack, PText, PTextField} = adminChargesScope();
  return <PBlockStack gap="300">
      <PText variant="headingSm">Timeline</PText>
      <PCard padding="0">
        <PBox padding="400"><PInlineStack gap="300" blockAlign="center" wrap={false}><span className="sca-chg-avatar"><PIcon name="person" /></span><div style={{
    flex: 1
  }}><PTextField id="chg-comment" label="Comment" labelHidden placeholder="Leave a comment..." value="" onChange={() => {}} /></div></PInlineStack></PBox>
        <PDivider />
        <PBox padding="300" background="bg-surface-secondary"><PInlineStack align="end"><PButton>Post</PButton></PInlineStack></PBox>
      </PCard>
      <PText tone="subdued" variant="bodySm">Billing attempt paid £25.00 on 16 February at 12:00</PText>
    </PBlockStack>;
};

export const ChgTagsCard = () => {
  const {PBlockStack, PCard, PText, PTextField} = adminChargesScope();
  return <PCard><PBlockStack gap="200"><PText variant="headingSm">Tags</PText><PTextField id="chg-tags" label="Tags" labelHidden placeholder="Search" value="" onChange={() => {}} /></PBlockStack></PCard>;
};

export const ChgCustomerCard = ({outstanding = "£0.00"}) => {
  const {PBlockStack, PButton, PCard, PIcon, PInlineStack, PLink, PText} = adminChargesScope();
  return <PCard>
      <PBlockStack gap="300">
        <PInlineStack align="space-between" blockAlign="center"><PText variant="headingSm">Customer</PText><PButton variant="Tertiary" iconOnly icon="menuHorizontal" ariaLabel="Customer actions" /></PInlineStack>
        <PLink>Renton McBorrow</PLink>
        <PBlockStack gap="100"><PText fontWeight="semibold">Contact information</PText><PLink>renton.mcborrow@example.com</PLink></PBlockStack>
        <PBlockStack gap="100"><PText fontWeight="semibold">Default address</PText><PText>123 Borrow St</PText><PText>Borrowtown</PText><PText>12345</PText><PText>United States</PText><PLink>View map</PLink></PBlockStack>
        <PInlineStack align="space-between" blockAlign="center"><PBlockStack gap="050"><PText fontWeight="semibold">Outstanding charges</PText><PText>{outstanding}</PText></PBlockStack><PIcon name="chevronRight" tone="Subdued" /></PInlineStack>
      </PBlockStack>
    </PCard>;
};

export const ChgPage = ({title, badges, subtitle, actions, children}) => {
  const {PBlockStack, PBox, PButton, PInlineStack, PText} = adminChargesScope();
  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">
                <PBlockStack gap="050">
                  <PInlineStack gap="200" blockAlign="center" wrap={false}><h1 className="Polaris-Header-Title"><span className="Polaris-Text--root Polaris-Text--headingLg Polaris-Text--bold">{title}</span></h1>{badges}</PInlineStack>
                  {subtitle && <PText tone="subdued" variant="bodySm">{subtitle}</PText>}
                </PBlockStack>
              </div>
            </div>
            {actions && <div className="Polaris-Page-Header__RightAlign">
                <PInlineStack gap="200" blockAlign="center" wrap={false}>{actions.map((a, i) => <span key={i}>{a}</span>)}</PInlineStack>
              </div>}
          </div>
        </div>
      </PBox>
      <div>{children}</div>
    </div>;
};

export const ChgMenu = ({open, onToggle, items, tour}) => {
  const {ChgIcon, PButton} = adminChargesScope();
  return <span className="sca-chg-menu">
      <PButton variant="Tertiary" iconOnly icon="menuHorizontal" ariaLabel="More actions" onClick={onToggle} tour={tour} />
      {open && <div className="sca-chg-popover" role="menu">
          {items.map(it => <button key={it.label} type="button" role="menuitem" disabled={it.disabled} onClick={it.onClick} data-tour={it.tour}>
              {it.icon && <ChgIcon name={it.icon} />}{it.label}
            </button>)}
        </div>}
    </span>;
};

export const ChgBanner = ({tone, icon, title, children}) => {
  const {ChgIcon, PBlockStack, PText} = adminChargesScope();
  return <div className={"sca-chg-banner sca-chg-banner--" + tone} role="status">
      <ChgIcon name={icon} />
      <PBlockStack gap="100">
        <PText variant="headingSm" as="h3">{title}</PText>
        {children}
      </PBlockStack>
    </div>;
};

export const ChgBadge = ({tone, icon, pip, children}) => {
  const {ChgIcon} = adminChargesScope();
  return <span className={"Polaris-Badge" + (tone ? " Polaris-Badge--tone" + tone : "")}>
      {pip && <span className="Polaris-Badge__PipContainer"><span className={"Polaris-Badge-Pip" + (tone ? " Polaris-Badge-Pip--tone" + tone : "") + " Polaris-Badge-Pip--progress" + pip} /></span>}
      {icon && <ChgIcon name={icon} />}
      <span className="Polaris-Text--root Polaris-Text--bodySm">{children}</span>
    </span>;
};

export const CHG_CSS = `
  .sca-polaris .Polaris-Badge--toneInfo { background-color: var(--p-color-bg-fill-info-secondary); color: var(--p-color-text-info); }
  .sca-polaris .Polaris-Badge--toneAttention { background-color: var(--p-color-bg-fill-caution-secondary); color: var(--p-color-text-caution); }
  .sca-polaris .Polaris-Badge--toneCritical { background-color: var(--p-color-bg-fill-critical-secondary); color: var(--p-color-text-critical); }
  .sca-polaris .Polaris-Badge-Pip--toneInfo { --pc-pip-color: var(--p-color-icon-info); }
  .sca-polaris .Polaris-Badge-Pip--toneCritical { --pc-pip-color: var(--p-color-icon-critical); }
  .sca-polaris .Polaris-Badge .Polaris-Icon { width: 1rem; height: 1rem; margin: 0 var(--p-space-100) 0 0; }
  /* Banner inside a card, in Polaris 13's critical and info tones */
  .sca-polaris .sca-chg-banner { display: flex; gap: var(--p-space-200); align-items: flex-start; padding: var(--p-space-300); border-radius: var(--p-border-radius-200); }
  .sca-polaris .sca-chg-banner--critical { background: var(--p-color-bg-surface-critical); color: var(--p-color-text-critical); }
  .sca-polaris .sca-chg-banner--critical .Polaris-Icon svg { fill: var(--p-color-icon-critical); }
  .sca-polaris .sca-chg-banner--info { background: var(--p-color-bg-surface-info); color: var(--p-color-text-info); }
  .sca-polaris .sca-chg-banner--info .Polaris-Icon svg { fill: var(--p-color-icon-info); }
  .sca-polaris .sca-chg-banner .Polaris-Text--root { color: inherit; }
  .sca-polaris .sca-chg-banner > .Polaris-Icon { margin: 0; flex: none; }
  .sca-polaris .sca-chg-popover.sca-chg-popover--inline { position: static; margin-top: var(--p-space-200); min-width: 0; width: 100%; }
  .sca-polaris .sca-chg-banner ul { margin: 0; padding-left: var(--p-space-500); }
  /* Popover action list */
  .sca-polaris .sca-chg-menu { position: relative; display: inline-flex; }
  .sca-polaris .sca-chg-popover { position: absolute; right: 0; top: calc(100% + var(--p-space-100)); z-index: 20; min-width: 13.75rem; padding: var(--p-space-150); background: var(--p-color-bg-surface); border-radius: var(--p-border-radius-300); box-shadow: var(--p-shadow-400); border: var(--p-border-width-025) solid var(--p-color-border-secondary); }
  .sca-polaris .sca-chg-popover button { display: flex; align-items: center; gap: var(--p-space-200); width: 100%; border: 0; background: none; text-align: left; padding: var(--p-space-150) var(--p-space-200); border-radius: var(--p-border-radius-200); font: inherit; font-size: var(--p-font-size-325); line-height: var(--p-font-line-height-500); color: var(--p-color-text); cursor: pointer; white-space: nowrap; }
  .sca-polaris .sca-chg-popover button:hover { background: var(--p-color-bg-surface-hover); }
  .sca-polaris .sca-chg-popover button[disabled] { color: var(--p-color-text-disabled); cursor: default; }
  /* Rows of label/value pairs, as the Billing card draws them */
  .sca-polaris .sca-chg-row { display: flex; justify-content: space-between; align-items: center; gap: var(--p-space-400); padding: var(--p-space-150) 0; }
  .sca-polaris .sca-chg-row > :first-child { color: var(--p-color-text); }
  .sca-polaris .sca-chg-shop { display: inline-block; padding: 0 var(--p-space-150); border-radius: var(--p-border-radius-100); background: #5a31f4; color: #fff; font-size: var(--p-font-size-275); font-weight: var(--p-font-weight-semibold); line-height: 1.5; margin-right: var(--p-space-200); }
  .sca-polaris .sca-chg-cardicon { display: inline-grid; place-items: center; width: 2.5rem; height: 1.75rem; 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: #1a1f71; flex: none; }
  .sca-polaris .sca-chg-cardicon .Polaris-Icon svg { fill: currentColor; }
  .sca-polaris .sca-chg-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; flex: none; }
  .sca-polaris .sca-chg-avatar .Polaris-Icon svg { fill: var(--p-color-icon-secondary); }
  .sca-polaris .sca-chg-thumb { width: 3.75rem; height: 3.75rem; border-radius: var(--p-border-radius-200); background: repeating-linear-gradient(45deg, #e6e6e6 0 6px, #f6f6f6 6px 12px); box-shadow: var(--p-shadow-border-inset); flex: none; }
`;

export const ChgIcon = ({name, tone}) => {
  const {PIcon} = adminChargesScope();
  return <PIcon paths={CHG_ICONS[name]} tone={tone} />;
};

export const CHG_ICONS = {
  card: [{
    fr: true,
    d: "M3.5 6.25A1.75 1.75 0 0 1 5.25 4.5h9.5a1.75 1.75 0 0 1 1.75 1.75v7.5a1.75 1.75 0 0 1-1.75 1.75h-9.5A1.75 1.75 0 0 1 3.5 13.75v-7.5ZM5 8.5v5.25c0 .14.11.25.25.25h9.5a.25.25 0 0 0 .25-.25V8.5H5Zm10-1.5v-.75A.25.25 0 0 0 14.75 6h-9.5A.25.25 0 0 0 5 6.25V7h10Zm-8.75 4a.75.75 0 0 1 .75-.75h2a.75.75 0 0 1 0 1.5H7a.75.75 0 0 1-.75-.75Z"
  }],
  alertDiamond: [{
    fr: true,
    d: "M8.76 3.26a1.75 1.75 0 0 1 2.48 0l5.5 5.5a1.75 1.75 0 0 1 0 2.48l-5.5 5.5a1.75 1.75 0 0 1-2.48 0l-5.5-5.5a1.75 1.75 0 0 1 0-2.48l5.5-5.5Zm1.42 1.06a.25.25 0 0 0-.36 0l-5.5 5.5a.25.25 0 0 0 0 .36l5.5 5.5a.25.25 0 0 0 .36 0l5.5-5.5a.25.25 0 0 0 0-.36l-5.5-5.5ZM10 6.75a.75.75 0 0 1 .75.75v3a.75.75 0 0 1-1.5 0v-3a.75.75 0 0 1 .75-.75Zm0 6.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
  }],
  paid: [{
    fr: true,
    d: "M5.25 3.5A1.75 1.75 0 0 0 3.5 5.25v9.5a1.75 1.75 0 0 0 1.75 1.75h9.5a1.75 1.75 0 0 0 1.75-1.75v-9.5A1.75 1.75 0 0 0 14.75 3.5h-9.5ZM5 5.25A.25.25 0 0 1 5.25 5h9.5a.25.25 0 0 1 .25.25v9.5a.25.25 0 0 1-.25.25h-9.5A.25.25 0 0 1 5 14.75v-9.5Zm8.28 2.97a.75.75 0 0 0-1.06-1.06L9 10.38 7.78 9.16a.75.75 0 1 0-1.06 1.06l1.75 1.75a.75.75 0 0 0 1.06 0l3.75-3.75Z"
  }],
  pause: [{
    fr: true,
    d: "M10 3a7 7 0 1 0 0 14 7 7 0 0 0 0-14Zm-5.5 7a5.5 5.5 0 1 1 11 0 5.5 5.5 0 0 1-11 0Zm3.75-2.75a.75.75 0 0 1 .75.75v4a.75.75 0 0 1-1.5 0V8a.75.75 0 0 1 .75-.75Zm3.5 0a.75.75 0 0 1 .75.75v4a.75.75 0 0 1-1.5 0V8a.75.75 0 0 1 .75-.75Z"
  }],
  play: [{
    fr: true,
    d: "M10 3a7 7 0 1 0 0 14 7 7 0 0 0 0-14Zm-5.5 7a5.5 5.5 0 1 1 11 0 5.5 5.5 0 0 1-11 0Zm3.75-2.53c0-.6.65-.97 1.16-.66l3.75 2.28a.77.77 0 0 1 0 1.32l-3.75 2.28a.77.77 0 0 1-1.16-.66V7.47Z"
  }],
  calendarEdit: [{
    fr: true,
    d: "M7 2.75a.75.75 0 0 1 .75.75v.5h4.5v-.5a.75.75 0 0 1 1.5 0v.53A2.75 2.75 0 0 1 16.25 6.75v3a.75.75 0 0 1-1.5 0V8.5h-9.5v5.75c0 .69.56 1.25 1.25 1.25h3a.75.75 0 0 1 0 1.5h-3a2.75 2.75 0 0 1-2.75-2.75v-7.5A2.75 2.75 0 0 1 6.25 4.03V3.5A.75.75 0 0 1 7 2.75ZM14.75 7v-.25c0-.69-.56-1.25-1.25-1.25h-7c-.69 0-1.25.56-1.25 1.25V7h9.5Zm.72 4.53a1.5 1.5 0 0 1 2.12 2.12l-3 3a.75.75 0 0 1-.36.2l-1.5.37a.75.75 0 0 1-.91-.91l.38-1.5a.75.75 0 0 1 .2-.35l3.07-2.93Z"
  }],
  visa: [{
    d: "M2.5 7.5h2.1l1 3.9 1.2-3.9h2.1l-2.4 5.5H4.6L2.5 7.5Zm7.4 0h2v5.5h-2V7.5Zm5.6-.1c.6 0 1.2.1 1.6.3l-.3 1.3a3 3 0 0 0-1.3-.3c-.5 0-.7.2-.7.4 0 .6 2.3.5 2.3 2.2 0 1.1-1 1.8-2.5 1.8-.7 0-1.4-.2-1.8-.4l.3-1.3c.4.2 1 .4 1.5.4.5 0 .8-.2.8-.4 0-.7-2.3-.5-2.3-2.2 0-1 .9-1.8 2.4-1.8Z"
  }],
  mastercard: [{
    d: "M7.5 6a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z"
  }, {
    d: "M12.5 6a4 4 0 0 0-2.5.9 4 4 0 0 1 0 6.2 4 4 0 1 0 2.5-7.1Z"
  }]
};

export const adminMembershipScope = () => ({
  AdminWindow,
  BorderBox,
  FIcon,
  Knob,
  MIcon,
  MembershipMethodSettings,
  MembershipOptionModal,
  MembershipSettings,
  MethodsPage,
  MethodsSettingsList,
  NavigationButton,
  PBadge,
  PBanner,
  PBlockStack,
  PBox,
  PButton,
  PCard,
  PCheckbox,
  PChoiceList,
  PDivider,
  PIcon,
  PIndexTable,
  PInlineStack,
  PLayout,
  PLegacyCard,
  PLink,
  PList,
  PPage,
  PRadio,
  PSection,
  PSelect,
  PText,
  PTextField,
  PlanForm,
  PlanOptionModal,
  RadioBox,
  SaveBar,
  SettingSection,
  SettingToggleCard,
  SettingToggleM,
  SettingsPage,
  ToggleSection
});

export const AdminRemovePlan = () => {
  const {AdminWindow, MembershipMethodSettings, PButton, PPage, PlanForm, SettingsPage} = adminMembershipScope();
  const [view, setView] = useState("plan");
  const [plans, setPlans] = useState(PLANS);
  const [plan, setPlan] = useState(SILVER_PLAN);
  const st = useMembershipSettings("credits");
  const [toast, setToast] = useToast();
  const windowRef = useRef(null);
  const stepsRef = useRef(() => []);
  const resetRef = useRef(() => {});
  const remove = () => {
    setPlans(PLANS.filter(p => p.id !== 2));
    setView("list");
    setToast("Plan deleted successfully");
  };
  stepsRef.current = () => [{
    to: w => w.querySelector('[data-tour="remove-plan"]'),
    click: remove,
    hold: 3200
  }];
  resetRef.current = () => {
    setView("plan");
    setPlans(PLANS);
    setToast(null);
  };
  const {cursor, bind} = useTour(windowRef, stepsRef, resetRef);
  return <AdminWindow windowRef={windowRef} cursor={cursor} bind={bind} toast={toast} url={view === "plan" ? "admin.shopify.com/store/summit/apps/supercycle/plans/2" : "admin.shopify.com/store/summit/apps/supercycle/settings/methods/membership"}>
      <style>{FEES_CSS}</style><style>{MEM_CSS}</style>
      {view === "plan" ? <PPage title="Silver Plan" actions={[<PButton>Edit product</PButton>, <PButton icon="delete" tone="Critical" onClick={remove} tour="remove-plan">Remove</PButton>]}><PlanForm plan={plan} setPlan={setPlan} onAddOption={() => {}} /></PPage> : <SettingsPage selected="methods"><MembershipMethodSettings plans={plans} onAddPlan={() => {}} {...st.props} /></SettingsPage>}
    </AdminWindow>;
};

export const AdminPlanField = ({field}) => {
  const {AdminWindow, PButton, PPage, PlanForm} = adminMembershipScope();
  const [plan, setPlan] = useState(SILVER_PLAN);
  const [spot, setSpot] = useState(null);
  const windowRef = useRef(null);
  const stepsRef = useRef(() => []);
  const resetRef = useRef(() => {});
  const target = ({
    title: "#plan-title",
    credits: "#plan-credits",
    swap: "#plan-orders",
    options: '[data-tour="plan-add-option"]'
  })[field];
  stepsRef.current = () => [{
    to: w => w.querySelector(target),
    pre: () => setSpot(field),
    hold: 3600
  }];
  resetRef.current = () => setSpot(null);
  const {cursor, bind} = useTour(windowRef, stepsRef, resetRef);
  return <AdminWindow windowRef={windowRef} cursor={cursor} bind={bind} url="admin.shopify.com/store/summit/apps/supercycle/plans/2">
      <style>{MEM_CSS}</style>
      <PPage title="Silver Plan" actions={[<PButton>Edit product</PButton>, <PButton icon="delete" tone="Critical">Remove</PButton>]}><PlanForm plan={plan} setPlan={setPlan} onAddOption={() => {}} spot={spot} /></PPage>
    </AdminWindow>;
};

export const AdminPlanSettings = () => {
  const {AdminWindow, PPage, PlanForm, PlanOptionModal, SaveBar} = adminMembershipScope();
  const [plan, setPlan] = useState(EMPTY_PLAN);
  const [modal, setModal] = useState(false);
  const [fields, setFields] = useState({
    price: "",
    every: "1",
    unit: "Month/s"
  });
  const [dirty, setDirty] = useState(false);
  const [toast, setToast] = useToast();
  const windowRef = useRef(null);
  const stepsRef = useRef(() => []);
  const resetRef = useRef(() => {});
  const setP = fn => {
    setPlan(fn);
    setDirty(true);
  };
  const addOption = () => setFields(f => {
    setPlan(p => ({
      ...p,
      options: [...p.options, {
        price: Number(f.price || 0).toFixed(2),
        every: Number(f.every) || 1,
        unit: f.unit.replace("/s", "").toLowerCase()
      }]
    }));
    setDirty(true);
    setModal(false);
    return f;
  });
  const save = () => {
    setDirty(false);
    setToast("Plan created successfully");
  };
  stepsRef.current = () => [{
    to: w => w.querySelector("#plan-title"),
    click: () => {},
    type: () => [v => setP(p => ({
      ...p,
      title: v
    })), "Bronze membership"],
    hold: 400
  }, {
    to: w => w.querySelector("#plan-credits"),
    click: () => {},
    type: () => [v => setP(p => ({
      ...p,
      credits: v
    })), "20"],
    hold: 500
  }, {
    to: w => w.querySelector('[data-tour="plan-add-option"]'),
    click: () => {
      setFields({
        price: "",
        every: "1",
        unit: "Month/s"
      });
      setModal(true);
    },
    hold: 800
  }, {
    to: w => w.querySelector("#po-price"),
    click: () => {},
    type: () => [v => setFields(f => ({
      ...f,
      price: v
    })), "20.00"],
    hold: 500
  }, {
    to: w => w.querySelector('[data-tour="po-add"]'),
    click: addOption,
    hold: 1200
  }, {
    to: w => w.querySelector('[data-tour="save"]'),
    click: save,
    hold: 2600
  }];
  resetRef.current = () => {
    setPlan(EMPTY_PLAN);
    setDirty(false);
    setModal(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/plans/new" toast={toast} saveBar={dirty && <SaveBar onDiscard={() => {
    setPlan(EMPTY_PLAN);
    setDirty(false);
  }} onSave={save} />} modal={<PlanOptionModal open={modal} onClose={() => setModal(false)} onAdd={addOption} fields={fields} setFields={setFields} />}>
      <style>{MEM_CSS}</style>
      <PPage title="Add plan"><PlanForm plan={plan} setPlan={setP} onAddOption={() => {
    setFields({
      price: "",
      every: "1",
      unit: "Month/s"
    });
    setModal(true);
  }} /></PPage>
    </AdminWindow>;
};

export const AdminAddPlan = () => {
  const {AdminWindow, MembershipMethodSettings, PPage, PlanForm, SettingsPage} = adminMembershipScope();
  const [view, setView] = useState("list");
  const st = useMembershipSettings("credits");
  const [plan, setPlan] = useState(EMPTY_PLAN);
  const windowRef = useRef(null);
  const stepsRef = useRef(() => []);
  const resetRef = useRef(() => {});
  stepsRef.current = () => [{
    to: w => w.querySelector('[data-tour="add-plan"]'),
    click: () => setView("form"),
    hold: 3200
  }];
  resetRef.current = () => {
    setView("list");
    setPlan(EMPTY_PLAN);
  };
  const {cursor, bind} = useTour(windowRef, stepsRef, resetRef);
  return <AdminWindow windowRef={windowRef} cursor={cursor} bind={bind} url={view === "list" ? "admin.shopify.com/store/summit/apps/supercycle/settings/methods/membership" : "admin.shopify.com/store/summit/apps/supercycle/plans/new"}>
      <style>{FEES_CSS}</style><style>{MEM_CSS}</style>
      {view === "list" ? <SettingsPage selected="methods"><MembershipMethodSettings plans={PLANS} onAddPlan={() => setView("form")} {...st.props} /></SettingsPage> : <PPage title="Add plan"><PlanForm plan={plan} setPlan={setPlan} onAddOption={() => {}} /></PPage>}
    </AdminWindow>;
};

export const AdminNavigateToPlan = () => {
  const {AdminWindow, MembershipMethodSettings, MethodsSettingsList, SettingsPage} = adminMembershipScope();
  const [view, setView] = useState("methods");
  const st = useMembershipSettings("credits");
  const windowRef = useRef(null);
  const stepsRef = useRef(() => []);
  const resetRef = useRef(() => {});
  stepsRef.current = () => [{
    to: w => w.querySelector('[data-tour="open-membership"]'),
    click: () => setView("membership"),
    hold: 3200
  }];
  resetRef.current = () => setView("methods");
  const {cursor, bind} = useTour(windowRef, stepsRef, resetRef);
  return <AdminWindow windowRef={windowRef} cursor={cursor} bind={bind} url={"admin.shopify.com/store/summit/apps/supercycle/settings/methods" + (view === "membership" ? "/membership" : "")}>
      <style>{FEES_CSS}</style><style>{MEM_CSS}</style>
      <SettingsPage selected="methods">{view === "methods" ? <MethodsSettingsList onOpen={() => setView("membership")} /> : <MembershipMethodSettings plans={PLANS} onAddPlan={() => {}} {...st.props} />}</SettingsPage>
    </AdminWindow>;
};

export const AdminEnableMembership = () => {
  const {AdminWindow, MembershipSettings, MethodsPage, SaveBar} = adminMembershipScope();
  const [enabled, setEnabled] = useState(false);
  const [saved, setSaved] = useState(false);
  const [toast, setToast] = useToast();
  const windowRef = useRef(null);
  const stepsRef = useRef(() => []);
  const resetRef = useRef(() => {});
  const dirty = enabled !== saved;
  stepsRef.current = () => [{
    to: w => w.querySelector('[data-tour="toggle"]'),
    click: () => setEnabled(true),
    hold: 1500
  }, {
    to: w => w.querySelector('[data-tour="save"]'),
    click: () => {
      setSaved(true);
      setToast("Saved successfully");
    },
    hold: 2600
  }];
  resetRef.current = () => {
    setEnabled(false);
    setSaved(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/products/horizon-blazer/methods/membership" toast={toast} saveBar={dirty && <SaveBar onDiscard={() => setEnabled(saved)} onSave={() => {
    setSaved(enabled);
    setToast("Saved successfully");
  }} />}>
      <style>{MEM_CSS}</style>
      <MethodsPage title="Horizon Blazer methods" selectedKey="membership" activeKeys={enabled ? ["membership", "calendar", "subscription", "resale"] : ["calendar", "subscription", "resale"]} settings={<MembershipSettings enabled={enabled} options={COASTAL_MEMBERSHIP_OPTIONS} onAddOption={() => {}} onToggle={() => setEnabled(!enabled)} />} />
    </AdminWindow>;
};

export const AdminMembershipCreditCost = () => {
  const {AdminWindow, MembershipOptionModal, MembershipSettings, MethodsPage, SaveBar} = adminMembershipScope();
  const [options, setOptions] = useState(COASTAL_MEMBERSHIP_OPTIONS);
  const [modal, setModal] = useState(false);
  const [fields, setFields] = useState({
    name: "Membership",
    credits: "1",
    price: "0.00"
  });
  const [dirty, setDirty] = useState(false);
  const [toast, setToast] = useToast();
  const windowRef = useRef(null);
  const stepsRef = useRef(() => []);
  const resetRef = useRef(() => {});
  const openRow = () => {
    setFields({
      name: options[0].name,
      credits: String(options[0].credits),
      price: Number(options[0].price).toFixed(2)
    });
    setModal(true);
  };
  const apply = () => setFields(f => {
    setOptions([{
      name: f.name,
      credits: f.credits,
      price: f.price
    }]);
    setDirty(true);
    setModal(false);
    return f;
  });
  const save = () => {
    setDirty(false);
    setToast("Saved successfully");
  };
  stepsRef.current = () => [{
    to: w => w.querySelector(".Polaris-IndexTable__TableRow"),
    click: openRow,
    hold: 800
  }, {
    to: w => w.querySelector("#mo-credits"),
    click: () => setFields(f => ({
      ...f,
      credits: ""
    })),
    type: () => [v => setFields(f => ({
      ...f,
      credits: v
    })), "2"],
    hold: 700
  }, {
    to: w => w.querySelector('[data-tour="mo-apply"]'),
    click: apply,
    hold: 1200
  }, {
    to: w => w.querySelector('[data-tour="save"]'),
    click: save,
    hold: 2600
  }];
  resetRef.current = () => {
    setOptions(COASTAL_MEMBERSHIP_OPTIONS);
    setDirty(false);
    setModal(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/products/coastal-breeze-top/methods/membership" toast={toast} saveBar={dirty && <SaveBar onDiscard={() => {
    setOptions(COASTAL_MEMBERSHIP_OPTIONS);
    setDirty(false);
  }} onSave={save} />} modal={<MembershipOptionModal open={modal} title="Edit option" applyLabel="Apply" onClose={() => setModal(false)} onApply={apply} fields={fields} setFields={setFields} />}>
      <style>{MEM_CSS}</style>
      <MethodsPage title="Coastal Breeze Top methods" selectedKey="membership" activeKeys={["membership", "calendar", "subscription", "resale"]} settings={<MembershipSettings enabled options={options} onAddOption={() => {}} onToggle={() => {}} onRowClick={openRow} />} />
    </AdminWindow>;
};

export const COASTAL_MEMBERSHIP_OPTIONS = [{
  name: "Membership",
  credits: 1,
  price: 0
}];

export const AdminChooseCreditSystem = () => {
  const {AdminWindow, MembershipMethodSettings, SaveBar, SettingsPage} = adminMembershipScope();
  const st = useMembershipSettings("items");
  const [toast, setToast] = useToast();
  const windowRef = useRef(null);
  const stepsRef = useRef(() => []);
  const resetRef = useRef(() => {});
  const save = () => {
    st.setDirty(false);
    setToast("Settings saved successfully");
  };
  stepsRef.current = () => [{
    to: w => w.querySelector('[data-tour="cs-credits"]'),
    click: () => st.props.onCreditSystem("credits"),
    hold: 1400
  }, {
    to: w => w.querySelector('[data-tour="save"]'),
    click: save,
    hold: 2600
  }];
  resetRef.current = () => {
    st.reset();
    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/settings/methods/membership" toast={toast} saveBar={st.dirty && <SaveBar onDiscard={st.reset} onSave={save} />}>
      <style>{FEES_CSS}</style><style>{MEM_CSS}</style>
      <SettingsPage selected="methods"><MembershipMethodSettings plans={PLANS} onAddPlan={() => {}} {...st.props} /></SettingsPage>
    </AdminWindow>;
};

export const useMembershipSettings = creditSystemInitial => {
  const [creditSystem, setCreditSystem] = useState(creditSystemInitial);
  const [recredit, setRecredit] = useState("return_order_created");
  const [cancel, setCancel] = useState({
    enabled: true,
    when: "credits_recredited"
  });
  const [renewal, setRenewal] = useState({
    enabled: true,
    days: "1",
    always: false
  });
  const [dirty, setDirty] = useState(false);
  const mark = fn => v => {
    fn(v);
    setDirty(true);
  };
  const reset = () => {
    setCreditSystem(creditSystemInitial);
    setRecredit("return_order_created");
    setCancel({
      enabled: true,
      when: "credits_recredited"
    });
    setRenewal({
      enabled: true,
      days: "1",
      always: false
    });
    setDirty(false);
  };
  return {
    creditSystem,
    recredit,
    cancel,
    renewal,
    dirty,
    setDirty,
    reset,
    props: {
      creditSystem,
      onCreditSystem: mark(setCreditSystem),
      recredit,
      onRecredit: mark(setRecredit),
      cancel,
      onCancel: mark(setCancel),
      renewal,
      onRenewal: mark(setRenewal)
    }
  };
};

export const MembershipOptionModal = ({open, title, onClose, onApply, applyLabel, fields, setFields}) => {
  const {PBlockStack, PBox, PButton, PInlineStack, PText, PTextField, ToggleSection} = adminMembershipScope();
  if (!open) return null;
  const sections = [{
    title: "Contract",
    icon: "note"
  }, {
    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="mo-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="mo-title" 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">
            <div className="Polaris-Modal-Section"><PBox as="section" padding="400">
              <PBlockStack gap="400">
                <PBlockStack gap="200" role="group"><PInlineStack gap="300"><div className="Polaris-FormLayout__Item Polaris-FormLayout--grouped"><PTextField id="mo-name" label="Name" value={fields.name} onChange={v => setFields(f => ({
    ...f,
    name: v
  }))} /></div></PInlineStack></PBlockStack>
                <PBlockStack gap="200" role="group"><PInlineStack gap="300">
                  <div className="Polaris-FormLayout__Item Polaris-FormLayout--grouped"><PTextField id="mo-credits" label="Credit cost" placeholder="0" value={fields.credits} onChange={v => setFields(f => ({
    ...f,
    credits: v
  }))} /></div>
                  <div className="Polaris-FormLayout__Item Polaris-FormLayout--grouped"><PTextField id="mo-price" label="Checkout price" prefix="£" placeholder="0.00" value={fields.price} onChange={v => setFields(f => ({
    ...f,
    price: v
  }))} /></div>
                </PInlineStack></PBlockStack>
              </PBlockStack>
            </PBox></div>
            {sections.map(s => <ToggleSection key={s.title} icon={s.icon} title={s.title} enabled={false} onToggle={() => {}} />)}
          </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">{applyLabel === "Apply" && <PInlineStack gap="200"><PButton>Duplicate</PButton><PButton tone="Critical">Remove option</PButton></PInlineStack>}</div>
              <PInlineStack gap="200"><PButton onClick={onClose}>View items</PButton><PButton variant="Primary" onClick={onApply} tour="mo-apply">{applyLabel}</PButton></PInlineStack>
            </PInlineStack>
          </PBox></PInlineStack>
        </div></div></div>
      </div>
    </>;
};

export const MembershipSettings = ({enabled, onToggle, options, onAddOption, onRowClick}) => {
  const {BorderBox, PBlockStack, PButton, PCard, PIndexTable, PInlineStack, PText, SettingToggleCard} = adminMembershipScope();
  return <PBlockStack gap="300">
      <SettingToggleCard label="Membership" description="Allow customers to rent this product with a membership." enabled={enabled} onToggle={onToggle} />
      <PCard>
        <PBlockStack gap="300">
          <PBlockStack gap="050"><PText variant="headingSm">Options</PText><PText tone="subdued">Configure how this product works with memberships.</PText></PBlockStack>
          <BorderBox padding="0">
            <PIndexTable headings={["Name", "Credit cost", "Checkout price", "Contract", "Applies to"]} emptyState="No membership options" onRowClick={onRowClick} rows={options.map(o => [<PText>{o.name}</PText>, <PText>{o.credits}</PText>, <PText>£{Number(o.price).toFixed(2)}</PText>, null, <PText tone="subdued">{o.appliesTo || "All"}</PText>])} />
          </BorderBox>
          <PInlineStack gap="200" align="end"><PButton variant="Primary" onClick={onAddOption} tour="add-option">Add option</PButton></PInlineStack>
        </PBlockStack>
      </PCard>
    </PBlockStack>;
};

export const PlanOptionModal = ({open, onClose, onAdd, fields, setFields}) => {
  const {PBlockStack, PBox, PButton, PInlineStack, PSelect, PText, PTextField, ToggleSection} = adminMembershipScope();
  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" aria-labelledby="plan-option-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="plan-option-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="200" role="group"><PInlineStack gap="300">
                <div className="Polaris-FormLayout__Item Polaris-FormLayout--grouped"><PTextField id="po-price" label="Price" prefix="£" placeholder="0.00" value={fields.price} onChange={v => setFields(f => ({
    ...f,
    price: v
  }))} /></div>
                <div className="Polaris-FormLayout__Item Polaris-FormLayout--grouped"><PTextField id="po-every" label="Billing interval" prefix="Every" value={fields.every} onChange={v => setFields(f => ({
    ...f,
    every: v
  }))} connectedRight={<PSelect id="po-unit" label="Interval" options={["Day/s", "Week/s", "Month/s", "Year/s"]} value={fields.unit} onChange={v => setFields(f => ({
    ...f,
    unit: v
  }))} />} /></div>
              </PInlineStack></PBlockStack>
            </PBox></div>
            <ToggleSection icon="calendarTime" title="Minimum term" enabled={false} onToggle={() => {}} />
          </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={onAdd} tour="po-add">Add</PButton></PInlineStack></PInlineStack>
          </PBox></PInlineStack>
        </div></div></div>
      </div>
    </>;
};

export const PlanForm = ({plan, setPlan, onAddOption, spot}) => {
  const {BorderBox, MIcon, PBlockStack, PBox, PButton, PCard, PIndexTable, PInlineStack, PLayout, PLegacyCard, PList, PSection, PSelect, PText, PTextField} = adminMembershipScope();
  const set = k => v => setPlan(p => ({
    ...p,
    [k]: v
  }));
  const cls = k => spot === k ? "sca-spot" : undefined;
  const unit = plan.interval.replace("/s", "").toLowerCase();
  return <PLayout>
      <PSection>
        <PBlockStack gap="400">
          <PCard><div className={cls("title")}><PBlockStack gap="400"><PTextField id="plan-title" label="Product title" value={plan.title} onChange={set("title")} placeholder="Bronze membership" helpText="This will be shown in the cart" tour="plan-title" /></PBlockStack></div></PCard>
          <PCard>
            <PBlockStack gap="400">
              <div className={cls("credits")}><PBlockStack gap="200" role="group"><PInlineStack gap="300"><div className="Polaris-FormLayout__Item Polaris-FormLayout--grouped"><PTextField id="plan-credits" label="Credit allowance" helpText="The number of credits a customer will receive when they subscribe to this plan." placeholder="0" value={plan.credits} onChange={set("credits")} tour="plan-credits" /></div></PInlineStack></PBlockStack></div>
              <div className={cls("swap")}>
                <PBlockStack gap="400">
                  <PBlockStack gap="200" role="group"><PInlineStack gap="300">
                    <div className="Polaris-FormLayout__Item Polaris-FormLayout--grouped"><PTextField id="plan-orders" label="Order allowance" placeholder="Unlimited" value={plan.maxOrders} onChange={set("maxOrders")} /></div>
                    <div className="Polaris-FormLayout__Item Polaris-FormLayout--grouped"><PTextField id="plan-returns" label="Return allowance" placeholder="Unlimited" value={plan.maxReturns} onChange={set("maxReturns")} /></div>
                  </PInlineStack></PBlockStack>
                  <PBlockStack gap="200" role="group">
                    <PInlineStack gap="300"><div className="Polaris-FormLayout__Item Polaris-FormLayout--grouped">
                      <PTextField id="plan-renewal" label="Renewal interval" labelHidden prefix="Every" value={plan.every} onChange={set("every")} connectedRight={<PSelect id="plan-renewal-unit" label="Interval" options={["Day/s", "Week/s", "Month/s", "Year/s"]} value={plan.interval} onChange={set("interval")} />} />
                    </div></PInlineStack>
                    <div className="Polaris-Box" style={{
    "--pc-box-color": "var(--p-color-text-secondary)"
  }}>Use order and return allowance to limit the number of times a customer can swap their items.</div>
                  </PBlockStack>
                </PBlockStack>
              </div>
            </PBlockStack>
          </PCard>
          <PCard>
            <div className={cls("options")}>
              <PBlockStack gap="300">
                <PBlockStack gap="050"><PText variant="headingSm">Purchase options</PText><PText tone="subdued">Set up different ways to pay for this plan.</PText></PBlockStack>
                <div className="BorderBoxContainer"><BorderBox padding="0">
                  <PIndexTable headings={["Price", "Billing interval", "Cart permalink"]} emptyState="No purchase options" rows={plan.options.map(o => [<PText>£{o.price}</PText>, <PText>{o.every} {o.unit}{o.every > 1 ? "s" : ""}</PText>, <PInlineStack gap="200" align="end"><PButton size="Slim" variant="Tertiary" iconOnly ariaLabel="Copy cart permalink"><MIcon name="clipboard" /></PButton></PInlineStack>])} />
                </BorderBox></div>
                <PInlineStack gap="200" align="end"><PButton variant={plan.options.length === 0 ? "Primary" : "Secondary"} onClick={onAddOption} tour="plan-add-option">Add option</PButton></PInlineStack>
              </PBlockStack>
            </div>
          </PCard>
        </PBlockStack>
      </PSection>
      <PSection variant="oneThird">
        <PBlockStack gap="300">
          <PCard><PBox paddingBlockEnd="200"><PText variant="headingSm">Status</PText></PBox><PSelect id="plan-status" label="Status" options={["Active", "Inactive"]} value={plan.status} onChange={set("status")} /></PCard>
          <PLegacyCard title="Summary" sections={[{
    content: plan.credits ? <PText>{plural(plan.credits, "credit")}</PText> : <PText tone="subdued">No credits</PText>
  }, {
    title: "Settings",
    content: <PList items={[plan.maxOrders ? plural(plan.maxOrders, "order") + " every " + plan.every + " " + unit + "/s" : "Unlimited orders", plan.maxReturns ? plural(plan.maxReturns, "return") + " every " + plan.every + " " + unit + "/s" : "Unlimited returns"]} />
  }, {
    title: "Purchase options",
    content: plan.options.length ? <PList items={plan.options.map(o => "£" + o.price + " every " + o.every + " " + o.unit + "/s")} /> : <PText tone="subdued">No purchase options</PText>
  }]} />
        </PBlockStack>
      </PSection>
    </PLayout>;
};

export const plural = (n, word) => n + " " + word + (Number(n) === 1 ? "" : "s");

export const SILVER_PLAN = {
  title: "Silver Plan",
  credits: "30",
  maxOrders: "1",
  maxReturns: "1",
  every: "1",
  interval: "Month/s",
  status: "Active",
  options: [{
    price: "30.00",
    every: 1,
    unit: "month"
  }]
};

export const EMPTY_PLAN = {
  title: "",
  credits: "",
  maxOrders: "",
  maxReturns: "",
  every: "1",
  interval: "Month/s",
  status: "Active",
  options: []
};

export const SettingToggleM = ({title, description, icon, enabled, onChange, children}) => {
  const {BorderBox, Knob, MIcon, PBlockStack, PBox, PDivider, PInlineStack, PText} = adminMembershipScope();
  return <BorderBox padding="0">
      <PBlockStack gap="0">
        <div style={{
    width: "100%",
    height: "100%",
    padding: "var(--p-space-300)"
  }}>
          <PInlineStack blockAlign="center" gap="300" wrap={false}>
            <div className="Polaris-Box"><MIcon name={icon} tone="Subdued" /></div>
            <div style={{
    flex: 1,
    minWidth: 0
  }}><PBlockStack><PText>{title}</PText><PText variant="bodyMd" tone="subdued">{description}</PText></PBlockStack></div>
            <Knob selected={enabled} onClick={() => onChange && onChange(!enabled)} ariaLabel={title} />
          </PInlineStack>
        </div>
        {children && enabled && <><PDivider /><PBox padding="300">{children}</PBox></>}
      </PBlockStack>
    </BorderBox>;
};

export const MembershipMethodSettings = ({plans, onAddPlan, onOpenPlan, creditSystem, onCreditSystem, recredit, onRecredit, cancel, onCancel, renewal, onRenewal}) => {
  const {BorderBox, PBadge, PBanner, PBlockStack, PBox, PButton, PCheckbox, PChoiceList, PIndexTable, PInlineStack, PLink, PPage, PText, PTextField, RadioBox, SettingSection, SettingToggleM} = adminMembershipScope();
  return <div className="settings-page-content">
      <PPage title="Membership method" actions={[<PButton>Learn more</PButton>]}>
        <PBlockStack gap="400">
          <SettingSection title="Plans" description="Create membership plans that your customers can subscribe to." learnMore>
            <BorderBox padding="0">
              <PIndexTable headings={["Title", "Status", "Credits", "Billing"]} emptyState="No plans created" onRowClick={onOpenPlan} rows={plans.map(p => [<PText truncate><PLink monochrome removeUnderline>{p.title}</PLink></PText>, p.status === "active" ? <PBadge tone="Success">Active</PBadge> : <PBadge tone="Warning">Inactive</PBadge>, <PText>{p.credits}</PText>, <PText truncate>{p.billing}</PText>])} />
            </BorderBox>
            <PBox paddingBlockStart="300"><PInlineStack align="end" gap="200"><PButton onClick={onAddPlan} tour="add-plan">Add plan</PButton></PInlineStack></PBox>
          </SettingSection>
          <SettingSection title="Credits" description="Configure how credits are used for your memberships" learnMore>
            <PBlockStack gap="300">
              <PBlockStack gap="200">
                <PText>Credit system</PText>
                <div className="Polaris-InlineGrid" style={{
    "--pc-inline-grid-grid-template-columns-xs": "repeat(2, minmax(0, 1fr))",
    "--pc-inline-grid-gap-xs": sp(200)
  }}>
                  <RadioBox id="cs-items" label="Items" description="Each item is worth one credit." checked={creditSystem === "items"} onSelect={() => onCreditSystem("items")} tour="cs-items" />
                  <RadioBox id="cs-credits" label="Credits" description="Items can be worth multiple credits." checked={creditSystem === "credits"} onSelect={() => onCreditSystem("credits")} tour="cs-credits" />
                </div>
              </PBlockStack>
              <SettingToggleM title="Automatically return credits" description="Automatically recredit the customer's membership." icon="cashDollar" enabled={!!recredit} onChange={v => onRecredit(v ? "return_order_created" : null)}>
                <PBlockStack gap="200"><PChoiceList name="recredit" choices={[{
    value: "return_order_created",
    label: "When a return is created"
  }, {
    value: "received_at",
    label: "Once received"
  }]} selected={recredit} onChange={onRecredit} /></PBlockStack>
              </SettingToggleM>
            </PBlockStack>
          </SettingSection>
          <SettingSection title="Customer accounts" description="Customize what your customers can do from customer accounts.">
            <SettingToggleM title="Cancel and pause membership" description="Allow customers to cancel and pause their membership." icon="creditCardCancel" enabled={cancel.enabled} onChange={v => onCancel({
    ...cancel,
    enabled: v
  })}>
              <PBlockStack gap="200">
                <PChoiceList name="cancel" choices={[{
    value: "credits_recredited",
    label: "Once all credits have been returned"
  }, {
    value: "none",
    label: "At any time"
  }]} selected={cancel.when} onChange={v => onCancel({
    ...cancel,
    when: v
  })} />
                <PBanner>Excluding after the cancellation window and before the minimum term if set</PBanner>
              </PBlockStack>
            </SettingToggleM>
          </SettingSection>
          <SettingSection title="Emails" description="Configure reminder emails sent to your customers">
            <SettingToggleM title="Upcoming renewal" description="Send a reminder email to customers before their membership renews." icon="reset" enabled={renewal.enabled} onChange={v => onRenewal({
    ...renewal,
    enabled: v
  })}>
              <PBlockStack gap="400">
                <PTextField id="renewal-days" label="Days in advance" value={renewal.days} onChange={v => onRenewal({
    ...renewal,
    days: v
  })} />
                <PCheckbox id="renewal-always" label="Send even if the membership has unlimited orders and returns" checked={renewal.always} onChange={v => onRenewal({
    ...renewal,
    always: v
  })} />
              </PBlockStack>
            </SettingToggleM>
          </SettingSection>
        </PBlockStack>
      </PPage>
    </div>;
};

export const RadioBox = ({id, label, description, checked, onSelect, tour}) => {
  const {PBox, PRadio} = adminMembershipScope();
  return <div className="BorderBox sca-radiobox" onClick={onSelect} data-tour={tour}>
      <PBox borderColor={checked ? "border-inverse" : "border"} borderWidth="025" borderRadius="200" padding="0">
        <PBox padding="300"><PRadio id={id} name="credit-system" label={label} helpText={description} checked={checked} onChange={onSelect} /></PBox>
      </PBox>
    </div>;
};

export const PLANS = [{
  id: 1,
  title: "Bronze Plan",
  status: "active",
  credits: 20,
  billing: "£20.00 monthly"
}, {
  id: 2,
  title: "Silver Plan",
  status: "active",
  credits: 30,
  billing: "£30.00 monthly"
}, {
  id: 3,
  title: "Gold plan",
  status: "active",
  credits: 50,
  billing: "£40.00 monthly"
}];

export const MethodsSettingsList = ({onOpen}) => {
  const {BorderBox, NavigationButton, PBlockStack, PBox, PButton, PInlineStack, PPage, PText, SettingSection} = adminMembershipScope();
  return <div className="settings-page-content">
      <PPage title="Methods">
        <PBlockStack gap="300">
          <SettingSection title="Methods" description="Manage how your customers can access your products." learnMore>
            <div className="BorderBoxContainer">
              <BorderBox padding="0"><NavigationButton title="Calendar" icon="calendarTime" description="Customers pay upfront for a fixed period of time" /></BorderBox>
              <BorderBox padding="0"><NavigationButton title="Subscription" icon="refresh" description="Customers pay a recurring fee for the duration of their access." /></BorderBox>
              <BorderBox padding="0"><NavigationButton title="Membership" icon="passkey" description="Customers pay a recurring fee for access to a library of products." onClick={onOpen} tour="open-membership" /></BorderBox>
            </div>
          </SettingSection>
          <SettingSection title="Add-ons" description="Manage extra features that can be added to your products." learnMore>
            <BorderBox><PText tone="subdued" alignment="center">Create add-ons to offer extras like damage protection.</PText></BorderBox>
            <PBox paddingBlockStart="200"><PInlineStack gap="200" align="end"><PButton variant="Primary">Add add-on</PButton></PInlineStack></PBox>
          </SettingSection>
        </PBlockStack>
      </PPage>
    </div>;
};

export const NavigationButton = ({title, description, icon, onClick, tour}) => {
  const {PBlockStack, PIcon, PInlineStack, PText} = adminMembershipScope();
  return <a data-polaris-unstyled="true" href="#" data-tour={tour} className="Polaris-Button Polaris-Button--pressable Polaris-Button--variantTertiary Polaris-Button--sizeLarge Polaris-Button--textAlignLeft Polaris-Button--fullWidth" style={{
    borderRadius: 0,
    padding: "var(--p-space-300)"
  }} onClick={e => {
    e.preventDefault();
    onClick && onClick();
  }}>
      <div style={{
    width: "100%",
    height: "100%"
  }}>
        <PInlineStack align="space-between" blockAlign="center" gap="200">
          <PInlineStack align="start" blockAlign="center" gap="300">
            <div className="Polaris-Box"><PIcon name={icon} /></div>
            <PBlockStack gap="0"><PInlineStack gap="150" blockAlign="center"><PText>{title}</PText></PInlineStack><PText tone="subdued">{description}</PText></PBlockStack>
          </PInlineStack>
          <div style={{
    flexGrow: 1
  }} />
          <div className="Polaris-Box"><PIcon name="chevronRight" tone="Subdued" /></div>
        </PInlineStack>
      </div>
    </a>;
};

export const PList = ({items}) => <ul className="Polaris-List Polaris-List--spacingLoose">{items.map((it, i) => <li key={i} className="Polaris-List__Item">{it}</li>)}</ul>;

export const PLegacyCard = ({title, sections}) => <div className="Polaris-LegacyCard">
    <div className="Polaris-LegacyCard__Header"><h2 className="Polaris-Text--root Polaris-Text--headingSm">{title}</h2></div>
    {sections.map((s, i) => <div key={i} className="Polaris-LegacyCard__Section">
        {s.title && <div className="Polaris-LegacyCard__SectionHeader"><h3 className="Polaris-Text--root Polaris-Text--headingSm Polaris-Text--medium">{s.title}</h3></div>}
        {s.content}
      </div>)}
  </div>;

export const PBanner = ({children}) => {
  const {FIcon, PBlockStack, PBox, PInlineStack} = adminMembershipScope();
  return <div className="Polaris-Banner Polaris-Banner--withinPage" role="status">
      <PBox borderRadius="300" padding="300" width="100%">
        <PInlineStack align="space-between" blockAlign="center" wrap={false}>
          <PBox width="100%">
            <PInlineStack blockAlign="center" gap="200" wrap={false}>
              <div><PBox background="bg-fill-info" borderRadius="200" padding="100"><span className="Polaris-Banner--textInfoOnBgFill"><FIcon name="info" /></span></PBox></div>
              <PBox width="100%"><PBlockStack gap="200"><div><span className="Polaris-Text--root Polaris-Text--bodyMd">{children}</span></div></PBlockStack></PBox>
            </PInlineStack>
          </PBox>
        </PInlineStack>
      </PBox>
    </div>;
};

export const PCheckbox = ({id, label, checked, onChange}) => <label className="Polaris-Choice Polaris-Checkbox__ChoiceLabel" htmlFor={id}>
    <span className="Polaris-Choice__Control">
      <span className="Polaris-Checkbox">
        <input id={id} type="checkbox" className="Polaris-Checkbox__Input" checked={!!checked} onChange={() => onChange && onChange(!checked)} aria-invalid="false" role="checkbox" aria-checked={!!checked} />
        <span className="Polaris-Checkbox__Backdrop" />
        <span className="Polaris-Checkbox__Icon Polaris-Checkbox--animated">
          <svg viewBox="0 0 16 16" shapeRendering="geometricPrecision" textRendering="geometricPrecision"><path d="M1.5,5.5L3.44655,8.22517C3.72862,8.62007,4.30578,8.64717,4.62362,8.28044L10.5,1.5" transform="translate(2 2.980376)" opacity={checked ? 1 : 0} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" pathLength="1" /></svg>
        </span>
      </span>
    </span>
    <span className="Polaris-Choice__Label"><span className="Polaris-Text--root Polaris-Text--bodyMd">{label}</span></span>
  </label>;

export const PChoiceList = ({name, choices, selected, onChange}) => {
  const {PRadio} = adminMembershipScope();
  return <fieldset className="Polaris-BlockStack Polaris-BlockStack--fieldsetReset" style={{
    "--pc-block-stack-order": "column",
    "--pc-block-stack-gap-xs": sp(400),
    "--pc-block-stack-gap-md": sp(0)
  }}>
      <ul className="Polaris-BlockStack Polaris-BlockStack--listReset" style={{
    "--pc-block-stack-order": "column",
    "--pc-block-stack-gap-xs": sp(400),
    "--pc-block-stack-gap-md": sp(0)
  }}>
        {choices.map(c => <li key={c.value}><div className="Polaris-Bleed" style={{
    "--pc-bleed-margin-block-end-xs": sp(0)
  }}>
            <PRadio id={name + "-" + c.value} name={name} label={c.label} checked={selected === c.value} onChange={() => onChange && onChange(c.value)} />
          </div></li>)}
      </ul>
    </fieldset>;
};

export const PRadio = ({id, name, label, helpText, checked, onChange}) => <div>
    <label className="Polaris-Choice Polaris-RadioButton__ChoiceLabel" htmlFor={id} style={{
  "--pc-choice-fill-xs": "100%",
  "--pc-choice-fill-sm": "auto"
}}>
      <span className="Polaris-Choice__Control">
        <span className="Polaris-RadioButton">
          <input id={id} name={name} type="radio" className="Polaris-RadioButton__Input" checked={!!checked} onChange={() => onChange && onChange()} />
          <span className="Polaris-RadioButton__Backdrop" />
        </span>
      </span>
      <span className="Polaris-Choice__Label"><span className="Polaris-Text--root Polaris-Text--bodyMd">{label}</span></span>
    </label>
    {helpText && <div className="Polaris-Choice__Descriptions"><div className="Polaris-Choice__HelpText"><span className="Polaris-Text--root Polaris-Text--subdued">{helpText}</span></div></div>}
  </div>;

export const MEM_CSS = `
  /* assets/BorderBoxContainer.scss */
  .sca .BorderBoxContainer .BorderBox:not(:last-child) .Polaris-Box { border-end-end-radius: 0; border-end-start-radius: 0; }
  .sca .BorderBoxContainer .BorderBox:not(:first-child) .Polaris-Box { border-start-end-radius: 0; border-start-start-radius: 0; border-top-width: 0; }
  .sca .sca-radiobox { cursor: pointer; }
  /* A field the tour is pointing at */
  .sca .sca-spot { outline: 2px solid var(--p-color-border-focus); outline-offset: 2px; border-radius: var(--p-border-radius-200); transition: outline-color 150ms ease; }
`;

export const MIcon = ({name, tone}) => {
  const {PIcon} = adminMembershipScope();
  return <PIcon paths={MEM_ICONS[name]} tone={tone} />;
};

export const MEM_ICONS = {
  cashDollar: [{
    d: "M9.5 6.5a.75.75 0 0 1 1.5 0v.25h.75a.75.75 0 0 1 0 1.5h-2.25a.5.5 0 0 0 0 1h1a2 2 0 1 1 0 4v.25a.75.75 0 0 1-1.5 0v-.25h-.75a.75.75 0 0 1 0-1.5h2.25a.5.5 0 0 0 0-1h-1a2 2 0 1 1 0-4v-.25Z"
  }, {
    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"
  }],
  creditCardCancel: [{
    fr: true,
    d: "M2.75 7.25a2.75 2.75 0 0 1 2.75-2.75h9.5a2.75 2.75 0 0 1 2.75 2.75v2.5a.75.75 0 0 1-1.5 0v-.5h-12v3.5c0 .69.56 1.25 1.25 1.25h5.02a.75.75 0 0 1 0 1.5h-5.02a2.75 2.75 0 0 1-2.75-2.75v-5.5Zm12.25-1.25c.69 0 1.25.56 1.25 1.25h-12c0-.69.56-1.25 1.25-1.25h9.5Z"
  }, {
    d: "M6.25 11.25a.75.75 0 0 0 0 1.5h2.75a.75.75 0 0 0 0-1.5h-2.75Z"
  }, {
    d: "M16.78 11.72a.75.75 0 0 1 0 1.06l-.97.97.97.97a.75.75 0 1 1-1.06 1.06l-.97-.97-.97.97a.75.75 0 1 1-1.06-1.06l.97-.97-.97-.97a.75.75 0 1 1 1.06-1.06l.97.97.97-.97a.75.75 0 0 1 1.06 0Z"
  }],
  reset: [{
    d: "M17 9.25a.75.75 0 0 1-1.5 0 3 3 0 0 0-3-3h-6.566l1.123 1.248a.75.75 0 1 1-1.114 1.004l-2.25-2.5a.75.75 0 0 1 .027-1.032l2.25-2.25a.75.75 0 0 1 1.06 1.06l-.97.97h6.44a4.5 4.5 0 0 1 4.5 4.5Z"
  }, {
    d: "M3 10.75a.75.75 0 0 1 1.5 0 3 3 0 0 0 3 3h6.566l-1.123-1.248a.75.75 0 1 1 1.114-1.004l2.25 2.5a.75.75 0 0 1-.027 1.032l-2.25 2.25a.75.75 0 1 1-1.06-1.06l.97-.97h-6.44a4.5 4.5 0 0 1-4.5-4.5Z"
  }],
  clipboard: [{
    fr: true,
    d: "M6.515 4.75a2 2 0 0 1 1.985-1.75h3a2 2 0 0 1 1.985 1.75h.265a2.25 2.25 0 0 1 2.25 2.25v7.75a2.25 2.25 0 0 1-2.25 2.25h-7.5a2.25 2.25 0 0 1-2.25-2.25v-7.75a2.25 2.25 0 0 1 2.25-2.25h.265Zm1.985-.25h3a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5Zm-1.987 1.73.002.02h-.265a.75.75 0 0 0-.75.75v7.75c0 .414.336.75.75.75h7.5a.75.75 0 0 0 .75-.75v-7.75a.75.75 0 0 0-.75-.75h-.265a2 2 0 0 1-1.985 1.75h-3a2 2 0 0 1-1.987-1.77Z"
  }]
};

export const adminFixedFeesScope = () => ({
  AdminWindow,
  BorderBox,
  CalendarMethodSettings,
  CalendarSettings,
  FIcon,
  Knob,
  MethodsPage,
  PBlockStack,
  PBox,
  PButton,
  PCard,
  PDivider,
  PIcon,
  PIndexTable,
  PInlineStack,
  PLayout,
  PPage,
  PSection,
  PText,
  PTextField,
  SaveBar,
  SettingSection,
  SettingToggle,
  SettingsPage,
  VerticalTabs
});

export const COASTAL_OPTIONS = [{
  name: "4 days",
  days: 4,
  price: 30
}, {
  name: "7 days",
  days: 7,
  price: 45
}, {
  name: "14 days",
  days: 14,
  price: 70
}];

export const SETTINGS_TABS = [["methods", "Methods", "transaction"], ["channels", "Channels", "store"], ["risk", "Risk", "personLock"], ["logistics", "Logistics and locations", "delivery"], ["portal", "Customer accounts", "person"], ["custom-data", "Custom data", "metafields"], ["languages", "Languages", "language"], ["emails", "Emails", "email"], ["integrations", "Integrations", "code"], ["plan", "Plan", "plan"], ["features", "Beta features", "toggleOn"]];

export const FEES_CSS = `
  /* assets/VerticalTabs.scss */
  .sca .VerticalTabs .VerticalTabs__Item { cursor: pointer; }
  .sca .VerticalTabs .VerticalTabs__Item:hover { background-color: var(--p-color-bg-surface-secondary-hover); }
  .sca .VerticalTabs .VerticalTabs__Item__Pip { opacity: 0; display: block; position: absolute; top: 0.6rem; bottom: 0.6rem; 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 .VerticalTabs .VerticalTabs__Item--Active .VerticalTabs__Item__Pip { opacity: 1; }
  /* assets/Settings.scss */
  .sca .settings-page-content > .Polaris-Page { padding: 0; }
  .sca .settings-page-content > .Polaris-Page > .Polaris-Box { padding-top: 0; padding-bottom: var(--p-space-300); }
`;

export const FEE_ICONS = {
  transaction: [{
    d: "M4.5 4.75a.75.75 0 0 0-1.5 0v10.5a.75.75 0 0 0 1.5 0v-6.75h6.94l-.72.72a.75.75 0 1 0 1.06 1.06l2-2a.75.75 0 0 0 0-1.06l-2-2a.75.75 0 1 0-1.06 1.06l.72.72h-6.94v-2.25Z"
  }, {
    d: "M17 4.75a.75.75 0 0 0-1.5 0v7.25h-6.94l.72-.72a.75.75 0 1 0-1.06-1.06l-2 2a.75.75 0 0 0 0 1.06l2 2a.75.75 0 0 0 1.06-1.06l-.72-.72h6.94v1.75a.75.75 0 0 0 1.5 0v-10.5Z"
  }],
  store: [{
    fr: true,
    d: "M13.257 3h-6.514a1.25 1.25 0 0 0-.983.478l-2.386 3.037a1.75 1.75 0 0 0-.374 1.08v.655a2.75 2.75 0 0 0 1.5 2.45v4.55c0 .966.784 1.75 1.75 1.75h7.5a1.75 1.75 0 0 0 1.75-1.75v-4.55a2.75 2.75 0 0 0 1.5-2.45v-.481c0-.504-.17-.994-.48-1.39l-2.28-2.901a1.25 1.25 0 0 0-.983-.478Zm-.257 12.5h.75a.25.25 0 0 0 .25-.25v-4.25a2.742 2.742 0 0 1-2-.863 2.742 2.742 0 0 1-2 .863 2.742 2.742 0 0 1-2-.863 2.742 2.742 0 0 1-2 .863v4.25c0 .138.112.25.25.25h3.75v-2.5a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v2.5Zm-7-6h-.25c-.69 0-1.25-.56-1.25-1.25v-.654a.25.25 0 0 1 .053-.155l2.312-2.941h6.27l2.205 2.805a.75.75 0 0 1 .16.464v.481c0 .69-.56 1.25-1.25 1.25h-.25c-.69 0-1.25-.56-1.25-1.25v-.5a.75.75 0 0 0-1.5 0v.5a1.25 1.25 0 1 1-2.5 0v-.5a.75.75 0 0 0-1.5 0v.5c0 .69-.56 1.25-1.25 1.25Z"
  }],
  personLock: [{
    fr: true,
    d: "M8 4.5a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-3.5 2a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0Zm10.25 3a.75.75 0 0 1 .75.75v1.75h-3.5a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1v-1.75a2.25 2.25 0 0 0-4.5 0 .75.75 0 0 0 1.5 0 .75.75 0 0 1 .75-.75Zm-2.25 4v2h4v-2h-4Zm-7.193-.153a5.24 5.24 0 0 0-1.718 2.16h5.724a.75.75 0 1 1 0 1.5h-5.93c-.407 0-.804-.167-1.073-.478a1.263 1.263 0 0 1-.24-1.243c.322-.96 1.094-2.246 2.361-3.157 1.298-.932 3.084-1.445 5.33-.854a.75.75 0 1 1-.382 1.45c-1.798-.473-3.126-.058-4.072.622Z"
  }],
  delivery: [{
    fr: true,
    d: "M4 5.25a.75.75 0 0 1 .75-.75h6.991a2.75 2.75 0 0 1 2.645 1.995l.427 1.494a.25.25 0 0 0 .18.173l1.681.421a1.75 1.75 0 0 1 1.326 1.698v1.219a1.75 1.75 0 0 1-1.032 1.597 2.5 2.5 0 1 1-4.955.153h-3.025a2.5 2.5 0 1 1-4.78-.75h-.458a.75.75 0 0 1 0-1.5h2.5c.03 0 .06.002.088.005a2.493 2.493 0 0 1 1.947.745h4.43a2.493 2.493 0 0 1 1.785-.75c.698 0 1.33.286 1.783.748a.25.25 0 0 0 .217-.248v-1.22a.25.25 0 0 0-.19-.242l-1.682-.42a1.75 1.75 0 0 1-1.258-1.217l-.427-1.494a1.25 1.25 0 0 0-1.202-.907h-6.991a.75.75 0 0 1-.75-.75Zm2.5 9.25a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm8 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
  }, {
    d: "M3.25 8a.75.75 0 0 0 0 1.5h5a.75.75 0 0 0 0-1.5h-5Z"
  }],
  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"
  }],
  metafields: [{
    d: "M6.25 9.5c-.414 0-.75.336-.75.75s.336.75.75.75h7.5c.414 0 .75-.336.75-.75s-.336-.75-.75-.75h-7.5Z"
  }, {
    fr: true,
    d: "M6.5 4c-1.105 0-2 .895-2 2v.505l-.083.036c-1.011.433-1.667 1.428-1.667 2.528v4.181c0 1.519 1.231 2.75 2.75 2.75h9c1.519 0 2.75-1.231 2.75-2.75v-4.181c0-1.1-.656-2.095-1.667-2.528l-.083-.036v-.505c0-1.105-.895-2-2-2h-.5c-1.105 0-2 .895-2 2h-2c0-1.105-.895-2-2-2h-.5Zm-.5 2c0-.276.224-.5.5-.5h.5c.276 0 .5.224.5.5v.75c0 .414.336.75.75.75h3.5c.414 0 .75-.336.75-.75v-.75c0-.276.224-.5.5-.5h.5c.276 0 .5.224.5.5v1c0 .3.179.571.455.69l.537.23c.46.197.758.649.758 1.149v4.181c0 .69-.56 1.25-1.25 1.25h-9c-.69 0-1.25-.56-1.25-1.25v-4.181c0-.5.298-.952.758-1.15l.537-.23c.276-.118.455-.389.455-.689v-1Z"
  }],
  language: [{
    fr: true,
    d: "M7.705 5.494a.75.75 0 0 0-1.41 0l-2 5.5a.75.75 0 1 0 1.41.512l.187-.514a.743.743 0 0 0 .108.008h2.111l.184.506a.75.75 0 1 0 1.41-.512l-2-5.5Zm-.705 2.45.566 1.556h-1.132l.566-1.555Z"
  }, {
    fr: true,
    d: "M15.25 8.25h-.1a6.831 6.831 0 0 1-.495 1.84 5.808 5.808 0 0 1-.795 1.334c.295.164.631.3 1.016.4a.75.75 0 0 1-.377 1.452 5.665 5.665 0 0 1-1.78-.793 5.666 5.666 0 0 1-1.78.793.75.75 0 1 1-.377-1.452c.385-.1.721-.236 1.016-.4a5.808 5.808 0 0 1-.794-1.334 6.831 6.831 0 0 1-.496-1.84h-.038a.75.75 0 1 1 0-1.5h1.75v-.75a.75.75 0 0 1 1.5 0v.75h1.75a.75.75 0 0 1 0 1.5Zm-3.447 0c.053.331.157.779.359 1.248.136.318.316.644.557.952.24-.308.42-.634.557-.952a5.38 5.38 0 0 0 .359-1.248h-1.832Z"
  }, {
    fr: true,
    d: "M14.5 15.75h-3.879l-1.56 1.56a1.5 1.5 0 0 1-2.561-1.06v-.5h-1a3.5 3.5 0 0 1-3.5-3.5v-6a3.5 3.5 0 0 1 3.5-3.5h9a3.5 3.5 0 0 1 3.5 3.5v6a3.5 3.5 0 0 1-3.5 3.5Zm-6.5.5 2-2h4.5a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2h-9a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2.5v2Z"
  }],
  email: [{
    fr: true,
    d: "M5.75 4.5c-1.519 0-2.75 1.231-2.75 2.75v5.5c0 1.519 1.231 2.75 2.75 2.75h8.5c1.519 0 2.75-1.231 2.75-2.75v-5.5c0-1.519-1.231-2.75-2.75-2.75h-8.5Zm-1.25 2.75c0-.69.56-1.25 1.25-1.25h8.5c.69 0 1.25.56 1.25 1.25v5.5c0 .69-.56 1.25-1.25 1.25h-8.5c-.69 0-1.25-.56-1.25-1.25v-5.5Zm2.067.32c-.375-.175-.821-.013-.997.363-.175.375-.013.821.363.997l3.538 1.651c.335.156.723.156 1.058 0l3.538-1.651c.376-.176.538-.622.363-.997-.175-.376-.622-.538-.997-.363l-3.433 1.602-3.433-1.602Z"
  }],
  code: [{
    d: "M12.221 4.956a.75.75 0 0 0-1.442-.412l-3 10.5a.75.75 0 1 0 1.442.412l3-10.5Z"
  }, {
    d: "M7.03 6.22a.75.75 0 0 1 0 1.06l-2.72 2.72 2.72 2.72a.75.75 0 0 1-1.06 1.06l-3.25-3.25a.75.75 0 0 1 0-1.06l3.25-3.25a.75.75 0 0 1 1.06 0Z"
  }, {
    d: "M12.97 13.78a.75.75 0 0 1 0-1.06l2.72-2.72-2.72-2.72a.75.75 0 0 1 1.06-1.06l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0Z"
  }],
  plan: [{
    d: "m14.208 4.688 1.533-2.3a.25.25 0 0 0-.208-.388h-3.066a.25.25 0 0 0-.208.389l1.533 2.299a.25.25 0 0 0 .416 0Z"
  }, {
    fr: true,
    d: "M11.25 7c0-.69.56-1.25 1.25-1.25h3.25c.69 0 1.25.56 1.25 1.25v8.75c0 .69-.56 1.25-1.25 1.25h-11.5c-.69 0-1.25-.56-1.25-1.25v-2.75c0-.69.56-1.25 1.25-1.25h2.75v-1.75c0-.69.56-1.25 1.25-1.25h3v-1.75Zm2.25 2.5v-2.25h2v8.25h-10.25v-2.25h3.25a.75.75 0 0 0 .75-.75v-2.25h3.5a.75.75 0 0 0 .75-.75Z"
  }],
  toggleOn: [{
    d: "M12 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"
  }, {
    fr: true,
    d: "M8 4.5a5.5 5.5 0 1 0 0 11h4a5.5 5.5 0 1 0 0-11h-4Zm-4 5.5a4 4 0 0 1 4-4h4a4 4 0 0 1 0 8h-4a4 4 0 0 1-4-4Z"
  }],
  calendarCheck: [{
    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.041h.031a.75.75 0 0 0 0-1.5c-.829 0-1.406 0-1.856-.036-.442-.035-.696-.1-.89-.196a2.25 2.25 0 0 1-1.022-1.023c-.095-.193-.16-.447-.196-.889-.035-.45-.036-1.027-.036-1.856v-1.25h10v1.5a.75.75 0 0 0 1.5 0v-1.732c0-.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-.259Zm7.241 4.5a10.674 10.674 0 0 0-.03-.61c-.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.207a2.25 2.25 0 0 0-.984.984c-.1.197-.17.458-.207.912-.014.18-.023.38-.03.609h9.983Z"
  }, {
    d: "M17.28 12.72a.75.75 0 0 1 0 1.06l-3.5 3.5a.75.75 0 0 1-1.06 0l-1.75-1.75a.75.75 0 1 1 1.06-1.06l1.22 1.22 2.97-2.97a.75.75 0 0 1 1.06 0Z"
  }],
  emailFollowUp: [{
    d: "M3 7.25a2.75 2.75 0 0 1 2.75-2.75h8.5a2.75 2.75 0 0 1 2.75 2.75v2.5a.75.75 0 0 1-1.5 0v-2.5c0-.69-.56-1.25-1.25-1.25h-8.5c-.69 0-1.25.56-1.25 1.25v5.5c0 .69.56 1.25 1.25 1.25h4.25a.75.75 0 0 1 0 1.5h-4.25a2.75 2.75 0 0 1-2.75-2.75v-5.5Z"
  }, {
    d: "M11.75 14.25a.75.75 0 0 1 .75-.75h2.94l-.72-.72a.75.75 0 1 1 1.06-1.06l2 2a.75.75 0 0 1 0 1.06l-2 2a.75.75 0 1 1-1.06-1.06l.72-.72h-2.94a.75.75 0 0 1-.75-.75Z"
  }, {
    d: "M6.567 7.57a.75.75 0 0 0-.634 1.36l3.538 1.651a1.25 1.25 0 0 0 1.058 0l3.538-1.651a.75.75 0 0 0-.634-1.36l-3.433 1.603-3.433-1.602Z"
  }],
  info: [{
    d: "M10 14a.75.75 0 0 1-.75-.75v-3.5a.75.75 0 0 1 1.5 0v3.5a.75.75 0 0 1-.75.75Z"
  }, {
    d: "M9 7a1 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"
  }]
};

export const FIcon = ({name, tone}) => {
  const {PIcon} = adminFixedFeesScope();
  return <PIcon paths={FEE_ICONS[name]} tone={tone} />;
};

export const SettingToggle = ({title, description, icon, enabled, onChange, children}) => {
  const {BorderBox, FIcon, Knob, PBlockStack, PBox, PDivider, PInlineStack, PText} = adminFixedFeesScope();
  return <BorderBox padding="0">
      <PBlockStack gap="0">
        <div style={{
    width: "100%",
    height: "100%",
    padding: "var(--p-space-300)"
  }}>
          <PInlineStack blockAlign="center" gap="300" wrap={false}>
            {icon && <div className="Polaris-Box"><FIcon name={icon} tone="Subdued" /></div>}
            <div style={{
    flex: 1,
    minWidth: 0
  }}>
              <PBlockStack><PText>{title}</PText><PText variant="bodyMd" tone="subdued">{description}</PText></PBlockStack>
            </div>
            <Knob selected={enabled} onClick={() => onChange && onChange(!enabled)} ariaLabel={title} />
          </PInlineStack>
        </div>
        {children && enabled && <><PDivider /><PBox padding="300">{children}</PBox></>}
      </PBlockStack>
    </BorderBox>;
};

export const SettingSection = ({title, description, learnMore, children}) => {
  const {FIcon, PBlockStack, PBox, PButton, PCard, PInlineStack, PText} = adminFixedFeesScope();
  return <PCard padding="0">
      <PBox paddingBlock="300" paddingInline="400">
        <PInlineStack blockAlign="center" align="space-between" gap="300" wrap={false}>
          <PInlineStack gap="200" blockAlign="center" align="start">
            <PBox paddingBlock="100">
              <PBlockStack gap="050">
                <PInlineStack gap="150" blockAlign="baseline">
                  <PInlineStack gap="100" blockAlign="center">
                    <PText variant="headingSm" truncate>{title}</PText>
                    {learnMore && <PButton variant="Plain" iconOnly ariaLabel="Learn more"><FIcon name="info" /></PButton>}
                  </PInlineStack>
                </PInlineStack>
                {description && <PText tone="subdued">{description}</PText>}
              </PBlockStack>
            </PBox>
          </PInlineStack>
        </PInlineStack>
      </PBox>
      {children && <PBox padding="400" paddingBlockStart="0">{children}</PBox>}
    </PCard>;
};

export const VerticalTabs = ({selected}) => {
  const {FIcon, PBlockStack, PBox, PCard, PDivider, PInlineStack, PText} = adminFixedFeesScope();
  return <div className="VerticalTabs">
      <PCard padding="0">
        <PBox padding="400"><PInlineStack blockAlign="center" gap="300"><PText variant="headingMd">Settings</PText></PInlineStack></PBox>
        {SETTINGS_TABS.map(([id, label, icon]) => {
    const active = id === selected;
    return <div key={id}>
              <PDivider />
              <div className={"VerticalTabs__Item" + (active ? " VerticalTabs__Item--Active" : "")}>
                <PBox padding="300" paddingInlineStart="400" style={{
      position: "relative",
      "--pc-box-color": active ? "var(--p-color-text-primary)" : "var(--p-color-text)"
    }}>
                  <div className="VerticalTabs__Item__Pip" />
                  <PInlineStack gap="300" align="start" blockAlign="center" wrap={false}>
                    <div className="Polaris-Box"><FIcon name={icon} /></div>
                    <div style={{
      flex: 1
    }}><PBlockStack gap="0"><PText fontWeight="medium">{label}</PText></PBlockStack></div>
                  </PInlineStack>
                </PBox>
              </div>
            </div>;
  })}
      </PCard>
    </div>;
};

export const SettingsPage = ({selected, children}) => {
  const {PBox, PLayout, PSection, VerticalTabs} = adminFixedFeesScope();
  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)
  }} />
      <PLayout>
        <PSection variant="oneThird"><VerticalTabs selected={selected} /></PSection>
        <PSection>{children}</PSection>
      </PLayout>
    </div>;
};

export const CalendarMethodSettings = ({fees, onFeeChange, onAddFee, onRemoveFee, fixedDates, onFixedDates, reminder, onReminder}) => {
  const {BorderBox, PBlockStack, PBox, PButton, PIndexTable, PInlineStack, PPage, PTextField, SettingSection, SettingToggle} = adminFixedFeesScope();
  return <div className="settings-page-content">
      <PPage title="Calendar method" actions={[<PButton>Learn more</PButton>]}>
        <PBlockStack gap="400">
          <SettingSection title="Fixed dates">
            <SettingToggle title="Fix all cycles in an order to the same dates" description="A single shipping fee will apply to all cycles for that order." icon="calendarCheck" enabled={fixedDates} onChange={onFixedDates} />
          </SettingSection>
          <SettingSection title="Fixed fees" description="Define fees that are added to every booking." learnMore>
            <BorderBox padding="0">
              <PIndexTable headings={["Name", "Amount", ""]} emptyState="No fixed fees" rows={fees.map((f, i) => [<PTextField id={"fee-name-" + f.id} label="Name" labelHidden value={f.name} placeholder="Cleaning fee" onChange={v => onFeeChange(f.id, "name", v)} />, <PTextField id={"fee-amount-" + f.id} label="Amount" labelHidden prefix="£" value={f.amount} placeholder="0.00" onChange={v => onFeeChange(f.id, "amount", v)} />, <PInlineStack align="end"><PButton iconOnly icon="delete" tone="Critical" ariaLabel="Remove fixed fee" onClick={() => onRemoveFee(f.id)} /></PInlineStack>])} />
            </BorderBox>
            <PBox paddingBlockStart="400"><PInlineStack align="end"><PButton onClick={onAddFee} tour="add-fee">Add fixed fee</PButton></PInlineStack></PBox>
          </SettingSection>
          <SettingSection title="Emails" description="Configure reminder emails sent to your customers">
            <SettingToggle title="Return item reminder" description="Send a reminder email to customers before their items are due to be returned." icon="emailFollowUp" enabled={reminder} onChange={onReminder}>
              <PTextField id="reminder-days" label="Days in advance" value="2" onChange={() => {}} />
            </SettingToggle>
          </SettingSection>
        </PBlockStack>
      </PPage>
    </div>;
};

export const AdminExcludeFixedFee = () => {
  const {AdminWindow, CalendarSettings, MethodsPage, SaveBar} = adminFixedFeesScope();
  const initial = {
    "fee-cleaning": "20.00",
    "fee-insurance": "5.00"
  };
  const [values, setValues] = useState(initial);
  const [dirty, setDirty] = useState(false);
  const [toast, setToast] = useToast();
  const windowRef = useRef(null);
  const stepsRef = useRef(() => []);
  const resetRef = useRef(() => {});
  const save = () => {
    setDirty(false);
    setToast("Saved successfully");
  };
  stepsRef.current = () => [{
    to: w => w.querySelector("#fee-cleaning"),
    click: () => {
      setValues(v => ({
        ...v,
        "fee-cleaning": ""
      }));
      setDirty(true);
    },
    type: () => [t => setValues(v => ({
      ...v,
      "fee-cleaning": t
    })), "0.00"],
    hold: 900
  }, {
    to: w => w.querySelector('[data-tour="save"]'),
    click: save,
    hold: 2600
  }];
  resetRef.current = () => {
    setValues(initial);
    setDirty(false);
    setToast(null);
  };
  const {cursor, bind} = useTour(windowRef, stepsRef, resetRef);
  const fees = [{
    id: "fee-cleaning",
    label: "Cleaning fee",
    value: values["fee-cleaning"],
    placeholder: "20.00"
  }, {
    id: "fee-insurance",
    label: "Insurance",
    value: values["fee-insurance"],
    placeholder: "12.00"
  }];
  return <AdminWindow windowRef={windowRef} cursor={cursor} bind={bind} url="admin.shopify.com/store/summit/apps/supercycle/products/horizon-blazer/methods/calendar" toast={toast} saveBar={dirty && <SaveBar onDiscard={() => {
    setValues(initial);
    setDirty(false);
  }} onSave={save} />}>
      <style>{FEES_CSS}</style>
      <MethodsPage title="Horizon Blazer methods" activeKeys={["membership", "calendar", "subscription", "resale"]} settings={<CalendarSettings enabled options={COASTAL_OPTIONS} onAddOption={() => {}} onToggle={() => {}} fees={fees} onFeeChange={(id, v) => {
    setValues(s => ({
      ...s,
      [id]: v
    }));
    setDirty(true);
  }} />} />
    </AdminWindow>;
};

export const AdminCreateFixedFee = () => {
  const {AdminWindow, CalendarMethodSettings, SaveBar, SettingsPage} = adminFixedFeesScope();
  const initial = [{
    id: 1,
    name: "Cleaning fee",
    amount: "20.00"
  }];
  const [fees, setFees] = useState(initial);
  const [dirty, setDirty] = useState(false);
  const [fixedDates, setFixedDates] = useState(false);
  const [reminder, setReminder] = useState(true);
  const [toast, setToast] = useToast();
  const windowRef = useRef(null);
  const stepsRef = useRef(() => []);
  const resetRef = useRef(() => {});
  const edit = (id, key, v) => {
    setFees(fs => fs.map(f => f.id === id ? {
      ...f,
      [key]: v
    } : f));
    setDirty(true);
  };
  const add = () => {
    setFees(fs => [...fs, {
      id: Date.now(),
      name: "",
      amount: ""
    }]);
    setDirty(true);
  };
  const remove = id => {
    setFees(fs => fs.filter(f => f.id !== id));
    setDirty(true);
  };
  const save = () => {
    setDirty(false);
    setToast("Settings saved successfully");
  };
  const lastId = () => fees[fees.length - 1] && fees[fees.length - 1].id;
  stepsRef.current = () => [{
    to: w => w.querySelector('[data-tour="add-fee"]'),
    click: add,
    hold: 700
  }, {
    to: w => {
      const rows = w.querySelectorAll('[id^="fee-name-"]');
      return rows[rows.length - 1];
    },
    click: () => {},
    type: () => [v => setFees(fs => fs.map((f, i) => i === fs.length - 1 ? {
      ...f,
      name: v
    } : f)), "Insurance"],
    hold: 400
  }, {
    to: w => {
      const rows = w.querySelectorAll('[id^="fee-amount-"]');
      return rows[rows.length - 1];
    },
    click: () => {},
    type: () => [v => setFees(fs => fs.map((f, i) => i === fs.length - 1 ? {
      ...f,
      amount: v
    } : f)), "12.00"],
    hold: 700
  }, {
    to: w => w.querySelector('[data-tour="save"]'),
    click: save,
    hold: 2600
  }];
  resetRef.current = () => {
    setFees(initial);
    setDirty(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/settings/methods/calendar" toast={toast} saveBar={dirty && <SaveBar onDiscard={() => {
    setFees(initial);
    setDirty(false);
  }} onSave={save} />}>
      <style>{FEES_CSS}</style>
      <SettingsPage selected="methods">
        <CalendarMethodSettings fees={fees} onFeeChange={edit} onAddFee={add} onRemoveFee={remove} fixedDates={fixedDates} onFixedDates={v => {
    setFixedDates(v);
    setDirty(true);
  }} reminder={reminder} onReminder={v => {
    setReminder(v);
    setDirty(true);
  }} />
      </SettingsPage>
    </AdminWindow>;
};

export const AdminFixedFeesOnProduct = () => {
  const {AdminWindow, CalendarSettings, MethodsPage} = adminFixedFeesScope();
  return <AdminWindow url="admin.shopify.com/store/summit/apps/supercycle/products/coastal-breeze-top/methods/calendar">
      <style>{FEES_CSS}</style>
      <MethodsPage title="Coastal Breeze Top methods" activeKeys={["membership", "calendar", "subscription", "resale"]} settings={<CalendarSettings enabled options={COASTAL_OPTIONS} onAddOption={() => {}} onToggle={() => {}} fees={[{
    id: "fee-cleaning",
    label: "Cleaning fee",
    value: "20.00",
    placeholder: "20.00"
  }, {
    id: "fee-insurance",
    label: "Insurance",
    value: "12.00",
    placeholder: "12.00"
  }]} />} />
    </AdminWindow>;
};

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 DEFAULT_FEES = [{
  id: "fee-dry-cleaning",
  label: "Dry Cleaning",
  value: "",
  placeholder: "15.00"
}];

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 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 sleep = ms => new Promise(r => setTimeout(r, ms));

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 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 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 sp = n => "var(--p-space-" + n + ")";

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

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

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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 useToast = () => {
  const [toast, setToast] = useState(null);
  useEffect(() => {
    if (!toast) return undefined;
    const id = setTimeout(() => setToast(null), 2500);
    return () => clearTimeout(id);
  }, [toast]);
  return [toast, setToast];
};

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

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

export const AdminCalendarTurnOn = () => {
  const {AdminWindow, CalendarSettings, MethodsPage, SaveBar} = adminCalendarSetupScope();
  const [enabled, setEnabled] = useState(false);
  const [saved, setSaved] = useState(false);
  const [toast, setToast] = useToast();
  const windowRef = useRef(null);
  const stepsRef = useRef(() => []);
  const resetRef = useRef(() => {});
  const dirty = enabled !== saved;
  stepsRef.current = () => [{
    to: w => w.querySelector('[data-tour="toggle"]'),
    click: () => setEnabled(true),
    hold: 1500
  }, {
    to: w => w.querySelector('[data-tour="save"]'),
    click: () => {
      setSaved(true);
      setToast("Saved successfully");
    },
    hold: 2600
  }];
  resetRef.current = () => {
    setEnabled(false);
    setSaved(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/products/coffee-machine/methods/calendar" saveBar={dirty && <SaveBar onDiscard={() => setEnabled(saved)} onSave={() => {
    setSaved(enabled);
    setToast("Saved successfully");
  }} />} toast={toast}>
      <MethodsPage title="Coffee Machine methods" activeKeys={enabled ? ["calendar", "subscription", "resale"] : ["subscription", "resale"]} settings={<CalendarSettings enabled={enabled} options={[{
    name: "3 days",
    days: 3,
    price: 25
  }]} onAddOption={() => {}} onToggle={() => setEnabled(!enabled)} />} />
    </AdminWindow>;
};

export const AdminCalendarOptions = () => {
  const {AdminWindow, CalendarSettings, MethodsPage, OptionModal, SaveBar} = adminCalendarSetupScope();
  const [options, setOptions] = useState(BALL_GOWN_OPTIONS);
  const [modal, setModal] = useState(false);
  const [fields, setFields] = useState({
    name: "",
    price: "",
    days: "1"
  });
  const [dirty, setDirty] = useState(false);
  const [toast, setToast] = useToast();
  const windowRef = useRef(null);
  const stepsRef = useRef(() => []);
  const resetRef = useRef(() => {});
  const openModal = () => {
    setFields({
      name: "",
      price: "",
      days: "1"
    });
    setModal(true);
  };
  const addOption = o => {
    setOptions(os => [...os, o]);
    setDirty(true);
    setModal(false);
  };
  const addFromFields = () => setFields(f => {
    const n = parseInt(f.days, 10) || 1;
    addOption({
      name: f.name.trim() || n + (n > 1 ? " days" : " day"),
      days: n,
      price: parseFloat(f.price) || 0
    });
    return f;
  });
  const save = () => {
    setDirty(false);
    setToast("Saved successfully");
  };
  stepsRef.current = () => [{
    to: w => w.querySelector('[data-tour="add-option"]'),
    click: openModal,
    hold: 900
  }, {
    to: w => w.querySelector("#opt-price"),
    click: () => {},
    type: () => [v => setFields(f => ({
      ...f,
      price: v
    })), "467.99"],
    hold: 500
  }, {
    to: w => w.querySelector("#opt-days"),
    click: () => setFields(f => ({
      ...f,
      days: ""
    })),
    type: () => [v => setFields(f => ({
      ...f,
      days: v
    })), "30"],
    hold: 600
  }, {
    to: w => w.querySelector('[data-tour="modal-add"]'),
    click: addFromFields,
    hold: 1400
  }, {
    to: w => w.querySelector('[data-tour="save"]'),
    click: save,
    hold: 2400
  }];
  resetRef.current = () => {
    setOptions(BALL_GOWN_OPTIONS);
    setDirty(false);
    setModal(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/products/ball-gown/methods/calendar" saveBar={dirty && <SaveBar onDiscard={() => {
    setOptions(BALL_GOWN_OPTIONS);
    setDirty(false);
  }} onSave={save} />} toast={toast} modal={<OptionModal open={modal} onClose={() => setModal(false)} onAdd={addOption} fields={fields} setFields={setFields} />}>
      <MethodsPage title="Ball Gown methods" activeKeys={["membership", "calendar", "resale"]} settings={<CalendarSettings enabled options={options} onAddOption={openModal} onToggle={() => {}} />} />
    </AdminWindow>;
};

export const AdminProductMethods = () => {
  const {AdminWindow, AvailabilityCard, CalendarSettings, InventoryCard, MethodsCard, MethodsPage, PBlockStack, PButton, PLayout, PPage, PSection, StatsCard} = adminCalendarSetupScope();
  const [view, setView] = useState("product");
  const [hover, setHover] = useState(false);
  const windowRef = useRef(null);
  const stepsRef = useRef(() => []);
  const resetRef = useRef(() => {});
  stepsRef.current = () => [{
    to: w => w.querySelector('[data-method="calendar"]'),
    pre: () => setHover(true),
    click: () => setView("methods"),
    hold: 3200
  }];
  resetRef.current = () => {
    setView("product");
    setHover(false);
  };
  const {cursor, bind} = useTour(windowRef, stepsRef, resetRef);
  const active = ["membership", "calendar", "resale"];
  return <AdminWindow windowRef={windowRef} cursor={cursor} bind={bind} url={"admin.shopify.com/store/summit/apps/supercycle/products/ball-gown" + (view === "methods" ? "/methods/calendar" : "")}>
      {view === "product" ? <PPage title="Ball Gown" actions={[<PButton>View</PButton>, <PButton>Edit</PButton>, <PButton icon="delete" tone="Critical">Remove</PButton>, <PButton disclosure>More actions</PButton>]}>
          <PLayout>
            <PSection variant="fullWidth"><StatsCard stats={[{
    label: "Upcoming cycles",
    value: 0
  }, {
    label: "Active cycles",
    value: 1
  }, {
    label: "Complete cycles",
    value: 1
  }]} /></PSection>
            <PSection><PBlockStack gap="300"><AvailabilityCard /><InventoryCard /><div className="Polaris-Box" /></PBlockStack></PSection>
            <PSection variant="oneThird"><PBlockStack gap="300"><MethodsCard heading="Methods" activeKeys={active} hoverKey={hover ? "calendar" : undefined} /></PBlockStack></PSection>
          </PLayout>
        </PPage> : <MethodsPage title="Ball Gown methods" activeKeys={active} settings={<CalendarSettings enabled options={BALL_GOWN_OPTIONS} onAddOption={() => {}} onToggle={() => {}} />} />}
    </AdminWindow>;
};

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

Everything you can do to a subscription contract, whether it was sold as a subscription rental or a membership. Each one works on a single contract from its billing card, and most work across many at once from <Icon icon="shopify" iconType="solid" /> **[Subscription contracts](https://admin.shopify.com/apps/supercycle/subscription-contracts)**.

### Pause billing

<AccordionGroup>
  <Accordion title="From the admin">
    <Steps>
      <Step title="Open the billing menu">
        On a cycle, open the **•••** menu on the card holding its **Subscription** section. On a membership, open the **•••** menu on the **Billing** card.
      </Step>

      <Step title="Select Pause billing">
        Nothing is collected while billing is paused. The next charge date is kept, and shown struck through.
      </Step>
    </Steps>

    Select **Resume billing** on the same menu to start collecting again.

    <Note>
      Pausing billing doesn't end the rental. The customer keeps the item and it's still due back. To end the rental itself, see [Cancel a cycle](/documentation/manage/cycles/cycle-actions#cancel-a-cycle).
    </Note>
  </Accordion>

  <Accordion title="From the subscription contracts table">
    <Steps>
      <Step title="Select the contracts">
        On <Icon icon="shopify" iconType="solid" /> **[Subscription contracts](https://admin.shopify.com/apps/supercycle/subscription-contracts)**, tick the rows you want. Tick the header checkbox and then **Select all N subscription contracts** to take everything matching your search and filters.
      </Step>

      <Step title="Select Change status">
        Choose **Paused**, then **Update**. Contracts already paused are left alone.
      </Step>
    </Steps>
  </Accordion>
</AccordionGroup>

### Edit billing

<AccordionGroup>
  <Accordion title="From the admin">
    <Steps>
      <Step title="Open Edit billing">
        Open the **•••** menu on the billing card and select **Edit billing**.
      </Step>

      <Step title="Set the price and frequency">
        Enter the **Recurring price** and set **Billing frequency** to how often the contract bills, for example every `1` month.
      </Step>

      <Step title="Save">
        Select **Save**. The change applies from the next charge onward.
      </Step>
    </Steps>

    <Note>
      A contract is expected to carry one line. When it has more, the modal warns you and only the first line is repriced.
    </Note>
  </Accordion>
</AccordionGroup>

### Update the next charge date

<AccordionGroup>
  <Accordion title="From the admin">
    <Steps>
      <Step title="Open Update next charge date">
        Open the **•••** menu on the billing card and select **Update next charge date**.
      </Step>

      <Step title="Pick the date">
        Set **Next charge date**. You can't pick a date in the past.
      </Step>

      <Step title="Save">
        Select **Save**. Every later charge is rescheduled from the new date, so moving it also moves the whole billing cycle.
      </Step>
    </Steps>
  </Accordion>
</AccordionGroup>

### Add a billing discount

<AccordionGroup>
  <Accordion title="From the admin">
    <Steps>
      <Step title="Open Add discount">
        Open the **•••** menu on the billing card and select **Add discount**.
      </Step>

      <Step title="Describe the discount">
        Enter a **Reason for discount**. The customer sees it, so write it for them: `Goodwill credit`, not `retention`.
      </Step>

      <Step title="Set the amount">
        Set **Type** to **Percentage** or **Amount**, then enter the **Discount value**.
      </Step>

      <Step title="Choose how long it lasts">
        Under **Applies to**, pick **Next payment only**, **A number of payments**, or **All future payments**. Choosing a number asks how many.
      </Step>

      <Step title="Add it">
        Select **Add discount**. The billing card shows the old price struck through next to the new one, with the reason and how many payments are left.
      </Step>
    </Steps>
  </Accordion>
</AccordionGroup>

### Remove a billing discount

<AccordionGroup>
  <Accordion title="From the admin">
    <Steps>
      <Step title="Open Remove discount">
        Open the **•••** menu on the billing card and select **Remove discount**. It only appears once the contract has a discount.
      </Step>

      <Step title="Pick the discount">
        Select the discount, then **Remove discount**. The recurring price returns to its full amount from the next charge.
      </Step>
    </Steps>
  </Accordion>
</AccordionGroup>

### Change the payment method on a contract

<AccordionGroup>
  <Accordion title="From the admin">
    <Steps>
      <Step title="Open Change payment method">
        Open the **•••** menu on the billing card and select **Change payment method**.
      </Step>

      <Step title="Pick the card">
        Select one of the customer's other saved payment methods, then **Save**.

        <Frame type="glass" caption="Open the billing menu, select Change payment method, pick the card, then Save.">
          <AdminChangePaymentMethod />
        </Frame>
      </Step>
    </Steps>

    <Note>
      Only cards vaulted for this customer are listed. Turn on [card vaulting](/documentation/configuration/risk/card-vaulting) to save cards at checkout.
    </Note>
  </Accordion>

  <Accordion title="From the subscription contracts table">
    <Steps>
      <Step title="Find the contracts on a bad card">
        On <Icon icon="shopify" iconType="solid" /> **[Subscription contracts](https://admin.shopify.com/apps/supercycle/subscription-contracts)**, filter **Payment method** to **Expired** or **Revoked**.
      </Step>

      <Step title="Select the contracts">
        Tick the rows, or tick the header checkbox and then **Select all N subscription contracts**.
      </Step>

      <Step title="Select Change payment method">
        Confirm with **Update**. Each contract moves to the newest other payment method its own customer has on file that is neither expired nor revoked.
      </Step>
    </Steps>

    <Note>
      A card belongs to one customer, so bulk can't move contracts onto a card you choose. Contracts whose customer has no other usable payment method are left alone.
    </Note>
  </Accordion>
</AccordionGroup>

### Send a link to update the card

<AccordionGroup>
  <Accordion title="From the admin">
    <Steps>
      <Step title="Open Send link to update card">
        Open the **•••** menu on the billing card and select **Send link to update card**. It's unavailable when the contract has no card.
      </Step>

      <Step title="Send it">
        Check the card shown, then select **Send email**. Shopify emails the customer a secure link to enter new details.
      </Step>
    </Steps>
  </Accordion>

  <Accordion title="From the subscription contracts table">
    <Steps>
      <Step title="Find the cards that need replacing">
        On <Icon icon="shopify" iconType="solid" /> **[Subscription contracts](https://admin.shopify.com/apps/supercycle/subscription-contracts)**, filter **Payment method** to **Expired**, or **Payment method expiry** to **Next month** to reach customers before their card lapses.
      </Step>

      <Step title="Select the contracts">
        Tick the rows, or tick the header checkbox and then **Select all N subscription contracts**.
      </Step>

      <Step title="Open Send link to update card">
        It's in the **•••** menu. Select **Send emails** to confirm.
      </Step>
    </Steps>

    <Note>
      One email goes out per card, so a customer whose contracts share a card is emailed once. Contracts with no card, or a revoked one, are skipped.
    </Note>
  </Accordion>

  <Accordion title="From the customer page">
    <Steps>
      <Step title="Open the customer's payment methods">
        Open the customer from <Icon icon="shopify" iconType="solid" /> **[Customers](https://admin.shopify.com/apps/supercycle/customers)** and select **Payment methods** on the **Customer** card.
      </Step>

      <Step title="Choose an action for the card">
        In **Manage payment methods**, open the **•••** menu on the card. **Send link to update card** emails the customer, and **Replace card** lets you enter new details yourself.

        <Frame type="glass" caption="Open the card's menu to send an update link or replace the card.">
          <AdminManagePaymentMethods />
        </Frame>
      </Step>
    </Steps>
  </Accordion>
</AccordionGroup>

### Replace a deleted product

<AccordionGroup>
  <Accordion title="From the subscription contracts table">
    <Steps>
      <Step title="Find the affected contracts">
        On <Icon icon="shopify" iconType="solid" /> **[Subscription contracts](https://admin.shopify.com/apps/supercycle/subscription-contracts)**, filter **Product presence** to **Missing**. Those rows carry a red **Product deleted** badge.
      </Step>

      <Step title="Select the contracts">
        Tick the rows, or tick the header checkbox and then **Select all N subscription contracts**.
      </Step>

      <Step title="Open Replace deleted product">
        It's in the **•••** menu. Search for the variant the contracts should bill against and select it.
      </Step>

      <Step title="Replace">
        Select **Replace**. Only lines whose product is gone move to the new variant. Lines still on a live product, and every price on the contract, are left as they are.
      </Step>
    </Steps>
  </Accordion>
</AccordionGroup>

### Cancel billing

<AccordionGroup>
  <Accordion title="From the admin">
    <Steps>
      <Step title="Open Cancel billing">
        Open the **•••** menu on the billing card and select **Cancel billing**.
      </Step>

      <Step title="Decide what happens to open charges">
        Leave **End after collection** ticked and a contract with a charge still being collected pauses now and ends once that charge settles. Untick it and any open charges are written off.
      </Step>

      <Step title="Confirm">
        Confirm in the modal. While charges are still out, the billing card reads **Billing will cancel once 2 unpaid charges are collected** and links to them.
      </Step>
    </Steps>
  </Accordion>

  <Accordion title="From the subscription contracts table">
    <Steps>
      <Step title="Select the contracts">
        On <Icon icon="shopify" iconType="solid" /> **[Subscription contracts](https://admin.shopify.com/apps/supercycle/subscription-contracts)**, tick the rows, or tick the header checkbox and then **Select all N subscription contracts**.
      </Step>

      <Step title="Select Change status">
        Choose **Canceled**, decide on **End after collection**, then select **Update**.
      </Step>
    </Steps>
  </Accordion>
</AccordionGroup>