/* CheckoutSwitch design system v3 (docs/redesign/magic-patterns/SYSTEM.md).
   One stylesheet for the merchant app, the wizard and the operator portal.
   Served from /_ui/<hash>/app.css on the app, admin and www hosts only; the
   shopper checkout never loads it.

   Order: fonts, tokens, base, type, parts, shells, utilities.
   Rules that hold everywhere: Inter, body text 16px, nothing under 14px
   (13px badges in dense tables only), inputs 48px, buttons 44px (48 for a
   page action, 36 in table rows), page titles 28px, green only for the one
   primary action and for paid / live / passed. Data tables use the dense
   mode (SYSTEM.md section 11). */

/* ---- fonts (self-hosted, latin) ---------------------------------------- */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/inter-latin.woff2) format("woff2")}

/* ---- tokens ------------------------------------------------------------ */
/* The names are v2's, kept so every part keeps its rules; the values are
   v3's. SYSTEM.md name in brackets. */
:root{
  --paper:#FAFAF8;--paper-2:#F3F3EF;--paper-3:#F1F1EE;--card:#FFFFFF;
  /* [bg] [surface-muted] [neutral-bg] [surface] */
  --ink:#111827;--ink-2:#4B5563;--ink-3:#5F6673;--neutral:#374151;
  /* [text] [text-muted] [text-subtle] [neutral-text] */
  --line:#E4E3DE;--line-2:#ECEBE6;--line-strong:#CFCDC5;--field-line:#8E8C83;
  /* [border] (divider) [border-strong] [field-border] */
  --green:#15724D;--green-hover:#0F5A3C;--green-tint:#E9F4EE;--green-line:#BFE3CC;--mint:#3DDC97;
  /* [accent] [accent-hover] [accent-subtle] [success-border] [brand-mint] */
  --ok:#166534;--ok-tint:#ECF7F0;
  /* [success-text] [success-bg] */
  --amber:#8A4B00;--amber-strong:#C98A1B;--amber-tint:#FEF5E4;--amber-line:#F1D49A;
  --red:#B42318;--red-strong:#B42318;--red-tint:#FEF1EF;--red-line:#F5C6BF;
  --blue:#1E4E8C;--blue-tint:#EEF3FB;--blue-line:#C9D7EE;
  --brand-ink:#0E1A2B;
  --on-ink:#FFFFFF;--on-ink-2:#C3CAD4;--ink-raised:#1F2B3C;--ink-line:#2A3A52;
  --focus:0 0 0 3px rgba(21,114,77,.25);
  --shadow-2:0 1px 2px rgba(16,24,40,.05);
  --shadow-3:0 12px 32px rgba(16,24,40,.12);
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --r-chip:6px;--r-field:8px;--r-inner:12px;--r-card:12px;--r-panel:16px;--r-pill:999px;
  --gutter:32px;--frame:1120px;
  /* Status icons (Lucide, 24 grid), drawn by masks so the badge markup stays a word. */
  --i-ok:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  --i-wait:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
  --i-bad:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E");
  --i-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
  --i-dot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E");
}

/* ---- base -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;font-feature-settings:"cv11" 1}
h1,h2,h3,h4,p,ol,ul,dl,dd,figure{margin:0}
ol,ul{padding:0;list-style:none}
img,svg{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--ink);text-underline-offset:4px}
a:hover{color:var(--green-hover)}
b,strong{font-weight:600}
code,kbd,pre{font-family:var(--mono);font-weight:400;font-size:14px}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:4px}
[hidden]{display:none!important}
.cs-skip{position:absolute;left:16px;top:-80px;z-index:50;background:var(--ink);color:var(--on-ink);
  padding:12px 16px;border-radius:var(--r-field);font-weight:600;text-decoration:none}
.cs-skip:focus{top:16px;color:var(--on-ink)}
.cs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#section-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cs-tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"cv11" 1}

/* ---- type -------------------------------------------------------------- */
.cs-title{font-family:var(--display);font-weight:650;font-size:28px;line-height:1.25;
  letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.cs-h2{font-weight:600;font-size:20px;line-height:1.4;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.cs-h3{font-weight:600;font-size:17px;line-height:1.45;color:var(--ink)}
.cs-h4{font-weight:600;font-size:17px;line-height:1.45;color:var(--ink)}
.cs-lead{font-size:18px;line-height:1.6;color:var(--ink-2)}
.cs-p{font-size:16px;line-height:1.6;color:var(--ink-2)}
.cs-content .cs-p,.cs-content .cs-lead,.cs-content .cs-msg__text,.se-list{max-width:70ch}
.cs-p--ink{color:var(--ink)}
.cs-label{font-size:14px;font-weight:500;line-height:1.45;color:var(--ink)}
.cs-small{font-size:14px;line-height:1.5;color:var(--ink-3)}
.cs-eyebrow{font-size:14px;font-weight:600;line-height:1.45;color:var(--green)}
.cs-mono{font-family:var(--mono);font-weight:400;font-size:14px;font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere}
.cs-num{font-family:var(--display);font-weight:650;font-size:32px;line-height:1.1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"cv11" 1}
.cs-link{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:4px}
.cs-link:hover{color:var(--ink);text-decoration-color:var(--ink)}
.cs-link--quiet{color:var(--ink-2)}
.cs-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:14px;font-weight:500;
  color:var(--ink-2);text-decoration:none;border-radius:var(--r-field)}
.cs-back:hover{color:var(--ink)}
.cs-back .cs-icon{width:16px;height:16px}
.cs-icon{flex-shrink:0;display:block}

/* ---- layout helpers ---------------------------------------------------- */
.cs-row{display:flex;align-items:center;gap:16px}
.cs-row--top{align-items:flex-start}
.cs-row--end{align-items:flex-end}
.cs-row--stretch{align-items:stretch}
.cs-row--base{align-items:baseline}
.cs-row--between{justify-content:space-between}
.cs-row--wrap{flex-wrap:wrap}
.cs-col{display:flex;flex-direction:column;gap:16px}
.cs-grow{flex:1 1 0;min-width:0}
.cs-grid{display:grid;gap:20px;align-items:stretch}
.cs-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cs-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cs-g0{gap:0}.cs-g2{gap:2px}.cs-g4{gap:4px}.cs-g8{gap:8px}.cs-g10{gap:10px}.cs-g12{gap:12px}.cs-g16{gap:16px}
.cs-g20{gap:20px}.cs-g24{gap:24px}.cs-g32{gap:32px}.cs-g40{gap:40px}.cs-g48{gap:48px}.cs-g64{gap:64px}
.cs-divider{height:1px;background:var(--line);border:0;margin:0;flex-shrink:0}

/* ---- brand ------------------------------------------------------------- */
.cs-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;border-radius:var(--r-field)}
.cs-wordmark{font-family:var(--sans);font-weight:600;font-size:17px;letter-spacing:-.01em;color:var(--ink);
  line-height:1;white-space:nowrap}
.cs-wordmark span{color:inherit}
.cs-wordmark--dark{color:var(--on-ink)}

/* The switch shape belongs to the logo (SYSTEM.md section 1). These rules
   stay for the pages that have not been redrawn yet. --sw is the width. */
.cs-switch{--sw:64px;width:var(--sw);height:calc(var(--sw)/2);border-radius:var(--r-pill);background:var(--paper-3);
  display:inline-flex;align-items:center;padding:0 4px;flex-shrink:0;justify-content:flex-start}
.cs-switch::before{content:"";width:calc(var(--sw)/2 - 8px);height:calc(var(--sw)/2 - 8px);border-radius:var(--r-pill);
  background:var(--ink)}
.cs-switch.is-on{background:var(--brand-ink);justify-content:flex-end}
.cs-switch.is-on::before{background:var(--mint)}
.cs-switch--dark{background:var(--ink-raised)}
.cs-switch--dark::before{background:var(--on-ink-2)}
.cs-switch--dark.is-on{background:var(--paper)}
.cs-switch--dark.is-on::before{background:var(--green)}
.cs-switch--turn.is-on::before{animation:cs-turn .9s var(--ease) both}
@keyframes cs-turn{from{transform:translateX(calc(-1*(var(--sw) - var(--sw)/2)))}to{transform:none}}

/* ---- buttons ----------------------------------------------------------- */
/* Sizes: 44 default; --56 and --48 are the page action (48px); --44 and
   --36 sit in table rows (36px). */
.cs-btn{height:44px;padding:0 16px;border-radius:var(--r-field);background:var(--green);color:#fff;
  border:1px solid var(--green);font-family:var(--sans);font-size:15px;font-weight:500;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;
  white-space:nowrap;cursor:pointer;transition:background .12s var(--ease),border-color .12s var(--ease),color .12s var(--ease);
  -webkit-appearance:none;appearance:none;max-width:100%;user-select:none;-webkit-user-select:none}
.cs-btn .cs-icon{width:18px;height:18px}
.cs-btn:hover{background:var(--green-hover);border-color:var(--green-hover);color:#fff}
.cs-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:var(--r-field)}
.cs-btn--secondary{background:var(--card);color:var(--ink);border-color:var(--line-strong)}
.cs-btn--secondary:hover{background:var(--paper-2);color:var(--ink);border-color:var(--line-strong)}
.cs-btn--quiet{background:transparent;color:var(--ink);border-color:transparent;text-underline-offset:4px}
.cs-btn--quiet:hover{background:transparent;color:var(--ink);border-color:transparent;text-decoration:underline}
.cs-btn--danger{background:var(--card);color:var(--red);border-color:var(--red-line)}
.cs-btn--danger:hover{background:var(--red-tint);color:var(--red);border-color:var(--red-line)}
.cs-btn--danger-fill{background:var(--red);color:#fff;border-color:var(--red)}
.cs-btn--danger-fill:hover{background:#912018;border-color:#912018;color:#fff}
.cs-btn--on-ink{background:#fff;color:var(--ink);border-color:#fff}
.cs-btn--on-ink:hover{background:var(--paper-2);color:var(--ink);border-color:var(--paper-2)}
.cs-btn--56,.cs-btn--48{height:48px;padding:0 20px;font-size:16px}
.cs-btn--44,.cs-btn--36{height:36px;padding:0 12px;font-size:14px;gap:6px}
.cs-btn--44 .cs-icon,.cs-btn--36 .cs-icon{width:16px;height:16px}
.cs-btn--full{width:100%}
.cs-btn--wrap{white-space:normal;height:auto;min-height:44px;padding-top:10px;padding-bottom:10px;line-height:1.3;text-align:center}
.cs-btn[disabled],.cs-btn.is-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
.cs-btn.is-busy{pointer-events:none;cursor:progress}
.cs-btn.is-busy::before{content:"";width:16px;height:16px;border-radius:50%;flex-shrink:0;
  border:2px solid rgba(255,255,255,.45);border-top-color:#fff;animation:cs-spin .8s linear infinite}
.cs-btn--secondary.is-busy::before,.cs-btn--quiet.is-busy::before,.cs-btn--danger.is-busy::before{
  border-color:rgba(17,24,39,.25);border-top-color:var(--ink)}
@keyframes cs-spin{to{transform:rotate(360deg)}}

/* ---- fields ------------------------------------------------------------ */
.cs-field{display:flex;flex-direction:column;gap:6px;min-width:0;position:relative}
.cs-field__action{position:absolute;top:0;right:0;font-size:14px;line-height:1.45}
.cs-field__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.cs-field__head label,.cs-field__label{font-size:14px;font-weight:500;color:var(--ink);line-height:1.45}
.cs-field__ctl{height:48px;border:1px solid var(--field-line);border-radius:var(--r-field);background:var(--card);
  display:flex;align-items:stretch;overflow:hidden;transition:border-color .12s var(--ease),box-shadow .12s var(--ease)}
.cs-field__ctl:focus-within{border-color:var(--green);box-shadow:var(--focus)}
.cs-field__ctl input,.cs-field__ctl select{flex:1 1 0;min-width:0;height:100%;border:0;outline:0;background:transparent;
  padding:0 12px;font-family:var(--sans);font-size:16px;color:var(--ink);border-radius:0}
.cs-field__ctl input::placeholder{color:var(--ink-3);opacity:1}
.cs-field--mono .cs-field__ctl input{font-family:var(--mono);font-weight:400;font-size:15px}
.cs-field__tail{padding-right:12px;display:flex;align-items:center;color:var(--ink-3)}
.cs-field__tail--ok,.cs-field__tail--saved{color:var(--green)}
.cs-field__tail .cs-icon{width:18px;height:18px}
.cs-field__reveal{border:0;background:transparent;width:44px;height:100%;display:flex;align-items:center;
  justify-content:center;color:var(--ink-2);cursor:pointer;border-radius:0 7px 7px 0}
.cs-field__reveal:hover{color:var(--ink)}
.cs-field__reveal .cs-icon{width:18px;height:18px}
.cs-field__suffix{padding:0 12px;font-family:var(--mono);font-size:15px;font-weight:400;color:var(--ink-2);height:100%;
  display:flex;align-items:center;border-left:1px solid var(--line);background:var(--paper-2);white-space:nowrap}
.cs-field__hint{font-size:14px;line-height:1.5;color:var(--ink-3)}
.cs-field__error{display:flex;gap:6px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--red)}
.cs-field__error .cs-icon{width:16px;height:16px;color:var(--red);margin-top:2px}
.cs-field.is-error .cs-field__ctl{border-color:var(--red);box-shadow:0 0 0 3px rgba(180,35,24,.12)}
.cs-field.is-ok .cs-field__ctl{border-color:var(--green)}
.cs-field__ctl input:disabled,.cs-field__ctl input[readonly]{color:var(--ink-2)}
.cs-field.is-disabled .cs-field__ctl{background:var(--paper-2);border-color:var(--line)}
.cs-textarea{width:100%;min-height:120px;border:1px solid var(--field-line);border-radius:var(--r-field);background:var(--card);
  padding:12px;font-size:16px;line-height:1.5;resize:vertical}
.cs-textarea:focus{outline:0;border-color:var(--green);box-shadow:var(--focus)}

/* A read-only value with a Copy button. Without the script one click on the
   value selects all of it. */
.cs-copy{border:1px solid var(--line);border-radius:var(--r-field);background:var(--paper-2);
  padding:8px 8px 8px 12px;display:flex;align-items:center;gap:8px;min-width:0}
.cs-copy__value{font-family:var(--mono);font-weight:400;font-size:14px;color:var(--ink);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;flex:1 1 0;min-width:0;user-select:all;-webkit-user-select:all}
.cs-copy--block{padding:12px;align-items:flex-start;gap:12px}
.cs-copy--block .cs-copy__value{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6;overflow:visible;margin:0;padding:4px 0}
.cs-copy__btn{height:36px;padding:0 12px;border-radius:var(--r-field);border:1px solid var(--line-strong);background:var(--card);
  color:var(--ink);font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:6px;flex-shrink:0;cursor:pointer}
.cs-copy__btn .cs-icon{width:16px;height:16px}
.cs-copy__btn:hover{background:var(--paper-2)}
.cs-copy__done{display:none}
.cs-copy__btn.is-copied .cs-copy__done{color:var(--ok)}
.is-copied .cs-copy__done{display:block}
.is-copied .cs-copy__idle{display:none}
html:not(.cs-js) [data-copy],html:not(.cs-js) [data-copy-text]{display:none}
html:not(.cs-js) .cs-copy{padding:12px}

/* Radio card: the whole card is the target. Selected: a 2px green edge, the
   light green ground and a filled dot. */
.cs-radio{position:relative;display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);
  border-radius:var(--r-card);background:var(--card);padding:16px;flex:1 1 0;min-width:0;cursor:pointer}
.cs-radio input{position:absolute;opacity:0;width:1px;height:1px}
.cs-radio__dot{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--field-line);display:flex;
  align-items:center;justify-content:center;flex-shrink:0;margin-top:3px;background:var(--card)}
.cs-radio__dot::after{content:"";width:8px;height:8px;border-radius:50%;background:transparent}
.cs-radio__text{display:flex;flex-direction:column;gap:2px;flex:1 1 0;min-width:0}
.cs-radio__title{font-size:17px;font-weight:600;line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.cs-radio__sub{font-size:14px;line-height:1.5;color:var(--ink-2)}
.cs-radio:hover{border-color:var(--line-strong)}
.cs-radio__title::after{content:"";position:absolute;inset:0;border-radius:inherit;cursor:pointer}
.cs-radio__body,.cs-radio__right{position:relative;z-index:1}
.cs-radio__body{padding-top:6px}
div.cs-radio:has(input:checked),.cs-radio.is-selected{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green);
  background:var(--green-tint)}
div.cs-radio:has(input:checked) .cs-radio__dot,.cs-radio.is-selected .cs-radio__dot{border-color:var(--green);background:var(--green)}
div.cs-radio:has(input:checked) .cs-radio__dot::after,.cs-radio.is-selected .cs-radio__dot::after{background:#fff}
div.cs-radio:has(input:not(:checked)){border-color:var(--line);box-shadow:none;background:var(--card)}
div.cs-radio:has(input:not(:checked)):hover{border-color:var(--line-strong)}
div.cs-radio:has(input:not(:checked)) .cs-radio__dot{border-color:var(--field-line);background:var(--card)}
div.cs-radio:has(input:not(:checked)) .cs-radio__dot::after{background:transparent}
.cs-radio.is-disabled .cs-radio__title::after{cursor:not-allowed}
.cs-radio.is-disabled .cs-radio__title{color:var(--ink-3)}
.cs-radio:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.cs-radio.is-disabled{background:var(--paper-2);cursor:not-allowed}
.cs-check{display:flex;gap:10px;align-items:flex-start;min-height:44px;padding:10px 0;cursor:pointer;font-size:16px;line-height:1.5}
.cs-check input{width:18px;height:18px;margin:3px 0 0;accent-color:var(--green);flex-shrink:0}

/* ---- status ------------------------------------------------------------ */
/* A badge: tinted, 6px corners, an icon and a word. Never clickable. */
.cs-pill{--i:var(--i-dot);display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 8px;border-radius:var(--r-chip);
  background:var(--paper-3);color:var(--neutral);border:1px solid var(--line);font-size:14px;font-weight:500;
  white-space:nowrap;line-height:1;vertical-align:middle}
.cs-pill::before{content:"";width:14px;height:14px;flex-shrink:0;background:currentColor;
  -webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.cs-pill--nodot::before{display:none}
.cs-pill--good{--i:var(--i-ok);background:var(--ok-tint);color:var(--ok);border-color:var(--green-line)}
.cs-pill--setup{--i:var(--i-dot);background:var(--paper-3);color:var(--neutral);border-color:var(--line)}
.cs-pill--wait{--i:var(--i-wait);background:var(--amber-tint);color:var(--amber);border-color:var(--amber-line)}
.cs-pill--bad{--i:var(--i-bad);background:var(--red-tint);color:var(--red);border-color:var(--red-line)}
.cs-pill--info{--i:var(--i-info);background:var(--blue-tint);color:var(--blue);border-color:var(--blue-line)}

/* Alert: the tone's ground and edge, its icon, a title in ink. */
.cs-msg{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r-card);
  padding:16px;background:var(--paper-2)}
.cs-msg>.cs-icon{width:20px;height:20px;margin-top:2px}
.cs-msg__body{display:flex;flex-direction:column;gap:4px;flex:1 1 0;min-width:0}
.cs-msg__body>.cs-col,.cs-msg__body>div:not(.cs-msg__title):not(.cs-msg__text){margin-top:8px}
.cs-msg__title{font-size:17px;font-weight:600;line-height:1.45;color:var(--ink)}
.cs-msg__text{font-size:16px;line-height:1.6;color:var(--ink-2);overflow-wrap:anywhere}
.cs-msg__fixtitle{font-size:14px;font-weight:500;color:var(--ink)}
.cs-msg__fixes{display:flex;flex-direction:column;gap:4px;counter-reset:fix}
.cs-msg__fixes li{display:flex;gap:8px;align-items:flex-start;font-size:16px;line-height:1.6;color:var(--ink-2);counter-increment:fix}
.cs-msg__fixes li::before{content:counter(fix) ".";min-width:18px;font-weight:500;color:var(--ink-2);flex-shrink:0}
.cs-msg--success{background:var(--ok-tint);border-color:var(--green-line)}
.cs-msg--success>.cs-icon{color:var(--ok)}
.cs-msg--waiting{background:var(--amber-tint);border-color:var(--amber-line)}
.cs-msg--waiting>.cs-icon{color:var(--amber)}
.cs-msg--problem{background:var(--red-tint);border-color:var(--red-line)}
.cs-msg--problem>.cs-icon{color:var(--red)}
.cs-msg--info{background:var(--blue-tint);border-color:var(--blue-line)}
.cs-msg--info>.cs-icon{color:var(--blue)}
.cs-msg--banner{align-items:center}
.cs-msg--banner .cs-msg__body{gap:2px}
.cs-msg__close{border:0;background:transparent;width:44px;height:44px;margin:-10px -10px -10px 0;border-radius:var(--r-field);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-2);flex-shrink:0}
.cs-msg__close:hover{color:var(--ink)}
.cs-msg__close .cs-icon{width:18px;height:18px}
html:not(.cs-js) .cs-msg__close{display:none}

/* One verification result per row ("What we check"). */
.cs-checkrow{display:flex;gap:10px;align-items:flex-start}
.cs-checkrow__mark{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;margin-top:2px;color:var(--ink-3);border:1.75px solid currentColor}
.cs-checkrow__mark .cs-icon{width:12px;height:12px}
.cs-checkrow__text{display:flex;flex-direction:column;gap:2px;flex:1 1 0;min-width:0;font-size:16px;line-height:1.5;color:var(--ink-2)}
.cs-checkrow__sub{font-size:14px;line-height:1.5;color:var(--ink-2);overflow-wrap:anywhere}
.cs-checkrow--pass .cs-checkrow__mark{color:var(--ok)}
.cs-checkrow--fail .cs-checkrow__mark{color:var(--red)}
.cs-checkrow--wait .cs-checkrow__mark{color:var(--amber);border-color:transparent}
.cs-checkrow--wait .cs-checkrow__mark .cs-icon{width:20px;height:20px}
.cs-checkrow--skip .cs-checkrow__mark{color:var(--ink-3)}
.cs-checkrow--pass .cs-checkrow__text,.cs-checkrow--wait .cs-checkrow__text{color:var(--ink)}
.cs-checkrow--fail .cs-checkrow__text{color:var(--red);font-weight:500}
.cs-checkrow--fail .cs-checkrow__sub{font-weight:400}

/* ---- cards ------------------------------------------------------------- */
/* Border only, no shadow. */
.cs-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:24px;min-width:0}
.cs-card--28{padding:24px}.cs-card--24{padding:20px}
.cs-card--20{padding:16px}
.cs-card--16{padding:16px}
.cs-card--raised{box-shadow:none}
.cs-card--inset{background:var(--paper-2)}
.cs-card--dark{background:var(--brand-ink);border-color:var(--brand-ink);color:var(--on-ink)}
.cs-card--dark .cs-h2,.cs-card--dark .cs-h3,.cs-card--dark .cs-title{color:var(--on-ink)}
.cs-card--dark .cs-p,.cs-card--dark .cs-lead,.cs-card--dark .cs-small{color:var(--on-ink-2)}
.cs-card--good{background:var(--ok-tint);border-color:var(--green-line)}
.cs-card--bad{background:var(--red-tint);border-color:var(--red-line)}

/* ---- progress ---------------------------------------------------------- */
.cs-segs{display:flex;gap:6px}
.cs-segs i{width:44px;height:6px;border-radius:var(--r-pill);background:var(--line-strong);display:block}
.cs-segs--52 i{width:52px}.cs-segs--40 i{width:40px}
.cs-segs--fluid{width:100%}.cs-segs--fluid i{flex:1 1 0;width:auto}
.cs-segs i.is-done{background:var(--green)}
.cs-segs i.is-current{background:var(--ink)}
.cs-segs--dark i{background:var(--ink-line)}
.cs-segs--dark i.is-done{background:var(--mint)}

.cs-rail{display:flex;flex-direction:column;gap:4px}
.cs-rail__step{display:flex;gap:10px;align-items:flex-start;padding:10px;border-radius:var(--r-field);border:1px solid transparent;text-decoration:none;color:inherit}
a.cs-rail__step:hover{background:var(--paper-2);color:inherit}
.cs-rail__dot{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-size:14px;font-weight:600;background:var(--card);color:var(--ink-3);border:1px solid var(--line-strong)}
.cs-rail__dot .cs-icon{width:14px;height:14px}
.cs-rail__text{display:flex;flex-direction:column;gap:2px;flex:1 1 0;min-width:0;padding-top:2px}
.cs-rail__title{font-size:15px;font-weight:500;line-height:1.35;color:var(--ink-2)}
.cs-rail__line{font-size:14px;line-height:1.45;color:var(--ink-3);overflow-wrap:anywhere}
.cs-rail__step--done .cs-rail__dot{background:var(--ok-tint);border-color:var(--green-line);color:var(--ok)}
.cs-rail__step--done .cs-rail__title{color:var(--ink)}
.cs-rail__step[aria-current="page"],a.cs-rail__step[aria-current="page"]:hover{background:var(--card);border-color:var(--line);
  box-shadow:inset 3px 0 0 var(--ink)}
.cs-rail__step[aria-current="page"] .cs-rail__title{font-weight:600;color:var(--ink)}
.cs-rail__step--done:not([aria-current="page"]) .cs-rail__line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-rail__step--current .cs-rail__title,.cs-rail__step--failed .cs-rail__title,.cs-rail__step--waiting .cs-rail__title{color:var(--ink)}
.cs-rail__step--current .cs-rail__dot{background:var(--ink);border-color:var(--ink);color:#fff}
.cs-rail__step--failed .cs-rail__dot{background:var(--red-tint);border-color:var(--red);color:var(--red)}
.cs-rail__step--failed .cs-rail__line{color:var(--red)}
.cs-rail__step--waiting .cs-rail__dot{background:var(--amber-tint);border-color:var(--amber-strong);color:var(--amber)}
.cs-rail__step--waiting .cs-rail__line{color:var(--amber)}

/* ---- guide: what to do outside our app ---------------------------------- */
.cs-move{border:1px solid var(--line);border-radius:var(--r-card);background:var(--card)}
.cs-move>summary{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;list-style:none;
  border-radius:var(--r-card);min-height:56px}
.cs-move>summary::-webkit-details-marker{display:none}
.cs-move__num{width:26px;height:26px;border-radius:50%;background:var(--card);color:var(--ink);border:1px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px;font-weight:600}
.cs-move__num .cs-icon{width:14px;height:14px}
.cs-move__title{font-size:17px;font-weight:600;color:var(--ink);flex:1 1 0;min-width:0;line-height:1.4}
.cs-move__chev{color:var(--ink-3);transition:transform .18s var(--ease)}
.cs-move__body{padding:0 20px 20px 54px;display:flex;flex-direction:column;gap:16px}
.cs-move[open]{background:var(--card);border-color:var(--line-strong)}
.cs-move[open]>summary .cs-move__num{background:var(--ink);border-color:var(--ink);color:#fff}
.cs-move[open]>summary .cs-move__chev{transform:rotate(180deg)}
.cs-move.is-done>summary .cs-move__num{background:var(--ok-tint);border-color:var(--green-line);color:var(--ok)}
.cs-move.is-flagged{border-color:var(--amber-line)}
.cs-move.is-flagged[open]{background:var(--card);border-color:var(--amber-strong)}
.cs-move.is-flagged>summary .cs-move__num{background:var(--amber-tint);border-color:var(--amber-strong);color:var(--amber)}
.cs-move>summary:focus-visible{outline-offset:-2px}
.cs-move__body p b{font-weight:500;color:var(--ink)}

.cs-path{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--ink-2)}
.cs-path .cs-icon{color:var(--ink-3);width:14px;height:14px}
.cs-path span:last-child{font-weight:600;color:var(--ink)}

.cs-scopes{display:flex;flex-direction:column;gap:8px}
.cs-scopes__head{font-size:14px;line-height:1.5;color:var(--ink-2)}
.cs-scopes__head b{color:var(--ink)}
.cs-scopes__chips{display:flex;flex-wrap:wrap;gap:6px}
.cs-chip{font-family:var(--mono);font-size:14px;font-weight:400;padding:4px 8px;border-radius:var(--r-chip);
  display:inline-flex;align-items:center;gap:6px;background:var(--paper-2);color:var(--ink);border:1px solid var(--line);
  overflow-wrap:anywhere}
.cs-chip.is-missing{background:var(--red-tint);color:var(--red);border-color:var(--red-line)}
.cs-chip.is-missing .cs-icon{color:var(--red)}

/* Our own simplified drawing of a Shopify or Whop screen. */
.cs-schem{display:flex;flex-direction:column;gap:8px}
.cs-schem__win{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:var(--card)}
.cs-schem__bar{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--paper-2);
  border-bottom:1px solid var(--line);font-size:14px;color:var(--ink-3)}
.cs-schem__dots{display:flex;gap:6px}
.cs-schem__dots i{width:10px;height:10px;border-radius:50%;background:var(--line-strong);display:block}
.cs-schem__body{display:flex;align-items:stretch}
.cs-schem__nav{width:150px;flex-shrink:0;padding:12px 8px;border-right:1px solid var(--line);display:flex;
  flex-direction:column;gap:2px}
.cs-schem__nav span{padding:6px 10px;border-radius:var(--r-chip);font-size:14px;color:var(--ink-3)}
.cs-schem__nav span.is-lit{font-weight:600;background:var(--paper-2);color:var(--ink)}
.cs-schem__main{flex:1 1 0;min-width:0;padding:16px 18px;display:flex;flex-direction:column;gap:14px}
.cs-schem__top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cs-schem__heading{font-size:17px;font-weight:600;color:var(--ink)}
.cs-schem__ring{padding:4px;border-radius:var(--r-field);border:2px dashed var(--green);flex-shrink:0}
.cs-schem__press{height:36px;padding:0 14px;border-radius:6px;background:var(--green);color:#fff;font-size:14px;
  font-weight:500;display:flex;align-items:center;white-space:nowrap}
.cs-schem__lines{display:flex;flex-direction:column;gap:10px}
.cs-schem__lines i{height:8px;border-radius:var(--r-pill);background:var(--paper-3);display:block}

/* ---- tabs -------------------------------------------------------------- */
.cs-tabs{position:relative;display:flex;gap:24px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.cs-tabs::-webkit-scrollbar{display:none}
.cs-tabs a{min-height:44px;padding:0;display:flex;align-items:center;font-size:14px;font-weight:500;color:var(--ink-2);
  text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;flex-shrink:0}
.cs-tabs a:hover{color:var(--ink);border-bottom-color:var(--line-strong)}
.cs-tabs a[aria-current]{font-weight:600;color:var(--ink);border-bottom-color:var(--ink)}
.cs-tabs a:focus-visible{outline-offset:-2px}

/* ---- tables -------------------------------------------------------------- */
/* Normal: 16px text, 48px rows. Dense (SYSTEM.md section 11, for records
   that can pass ten rows): 14px text, about 38px rows, 13px heads that stay
   in view inside a scroll box. */
.cs-tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-card);background:var(--card)}
.cs-table{width:100%;border-collapse:collapse;font-size:16px;font-variant-numeric:tabular-nums}
.cs-table th{font-size:14px;font-weight:500;text-align:left;color:var(--ink-2);background:var(--paper-2);
  padding:10px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
.cs-table td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.cs-table tr:last-child td{border-bottom:0}
.cs-table tbody tr:hover td{background:var(--paper)}
.cs-table__empty{text-align:center;color:var(--ink-2);padding:32px 16px}
.cs-table--dense{font-size:14px;line-height:1.45}
.cs-table--dense th{font-size:13px;padding:8px 12px;position:sticky;top:0;z-index:1}
.cs-table--dense td{padding:8px 12px}
.cs-table--dense .cs-mono{font-size:13.5px}
.cs-table--dense .cs-pill{height:22px;font-size:13px;padding:0 6px;gap:4px}
.cs-table--dense .cs-pill::before{width:12px;height:12px}
.cs-tablewrap--scroll{max-height:min(1900px,calc(100vh - 160px));overflow:auto}
.cs-card .cs-tablewrap{border:0;border-radius:0;background:transparent}
.cs-card .cs-table th{background:transparent;padding-top:0}
.cs-card .cs-table :is(th,td):first-child{padding-left:0}
.cs-card .cs-table :is(th,td):last-child{padding-right:0}
.cs-card .cs-table tbody tr:hover td{background:transparent}

/* Key figure: the label over the number. "—" and a reason when unread. */
.cs-figure{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:4px}
.cs-figure__label{font-size:14px;font-weight:400;color:var(--ink-2);display:flex;align-items:center;gap:8px}
.cs-figure__dot{display:none}
.cs-figure--warn .cs-num{color:var(--amber)}
.cs-figure--bad .cs-num{color:var(--red)}

.cs-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;padding:40px 24px}
.cs-skel{background:var(--paper-3);border-radius:var(--r-chip);min-height:16px;animation:cs-pulse 1.4s ease-in-out infinite}
@keyframes cs-pulse{50%{opacity:.55}}

.cs-help{display:flex;flex-direction:column;gap:6px}
.cs-help__mail{font-family:var(--mono);font-weight:400;font-size:14px;color:var(--ink);user-select:all;
  -webkit-user-select:all;overflow-wrap:anywhere}

/* ---- the setup wizard (PLAN.md section 6, v3 design 2026-10-11) ----------- */
/* The step's title, why, and the five steps as one bar; under it the task
   card (440px) beside the guide from 1280px, the task first below that. */
.wz{display:flex;flex-direction:column;gap:24px;min-width:0}
.wz-head{display:flex;flex-direction:column;min-width:0}
.wz-eyebrow{font-size:14px;font-weight:500;line-height:1.5;color:var(--ink-3)}
.wz-title{margin-top:2px;font-family:var(--display);font-weight:650;font-size:28px;line-height:1.25;
  letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.wz-why{margin-top:4px;max-width:860px;font-size:16px;line-height:1.6;color:var(--ink-2)}
.wz-nav{margin-top:16px;min-width:0}
.wz-count{font-size:14px;line-height:1.5;color:var(--ink-2)}
.wz-segs{margin-top:8px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.wz-seg{min-width:0}
.wz-seg__link{display:flex;flex-direction:column;gap:8px;min-height:44px;padding:4px 0;border-radius:6px;
  color:var(--ink-2);text-decoration:none}
a.wz-seg__link:hover{color:var(--ink)}
a.wz-seg__link:hover .wz-seg__t{text-decoration:underline;text-underline-offset:3px}
.wz-seg__bar{display:block;height:6px;border-radius:var(--r-pill);background:var(--line-strong)}
.wz-seg--done .wz-seg__bar{background:var(--green)}
.wz-seg--current .wz-seg__bar{background:var(--ink)}
.wz-seg--failed .wz-seg__bar{background:var(--red)}
.wz-seg--waiting .wz-seg__bar{background:var(--amber)}
.wz-seg--locked .wz-seg__bar{background:var(--line)}
.wz-seg__label{display:flex;align-items:center;gap:4px;min-width:0;font-size:14px;line-height:1.5}
.wz-seg__label .cs-icon{width:14px;height:14px}
.wz-seg__t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wz-seg--done .wz-seg__label .cs-icon{color:var(--ok)}
.wz-seg--failed .wz-seg__label .cs-icon{color:var(--red)}
.wz-seg--waiting .wz-seg__label .cs-icon{color:var(--amber)}
.wz-seg.is-here .wz-seg__label{font-weight:600;color:var(--ink)}
.wz-locks{margin-top:8px;display:flex;flex-wrap:wrap;gap:4px 24px;font-size:14px;line-height:1.5;color:var(--ink-3)}
.wz-locks li{display:flex;align-items:flex-start;gap:6px}
.wz-locks .cs-icon{width:14px;height:14px;margin-top:3px}
.wz-locks b{font-weight:500;color:var(--ink-2)}
.wz-cols{display:flex;flex-direction:column;gap:32px;min-width:0}
.wz-task,.wz-guide{display:flex;flex-direction:column;gap:16px;min-width:0}
.wz-guide{container-type:inline-size}
/* Cards: a title and one line under it, then what to do; "Stuck?" at the foot. */
.wz-card{display:flex;flex-direction:column;gap:20px;min-width:0;padding:24px;border:1px solid var(--line);
  border-radius:var(--r-card);background:var(--card)}
.wz-card--bad{border-color:var(--red-line);box-shadow:0 0 0 1px var(--red-line)}
.wz-card--muted{background:var(--paper-2);gap:12px}
.wz-card__head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:8px 12px;
  margin-bottom:4px}
.wz-card__titles{display:flex;flex-direction:column;gap:2px;min-width:0}
.wz-card__head>.wz-card__titles{flex:1 1 220px}
.wz-card--muted>.wz-card__titles{margin-bottom:4px}
.wz-card__t{font-size:17px;font-weight:600;line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.wz-card__sub{font-size:14px;line-height:1.5;color:var(--ink-2)}
.wz-card--muted .cs-p{color:var(--ink-2)}
.wz-help{padding-top:16px;border-top:1px solid var(--line);font-size:14px;line-height:1.5;color:var(--ink-2)}
.wz-help .cs-link{font-weight:500;color:var(--ink);text-decoration-color:currentColor;text-underline-offset:2px}
.wz-help .cs-link:hover{text-decoration:none}
.wz-what{display:flex;flex-direction:column;gap:8px}
.wz-what__t{font-size:14px;font-weight:500;line-height:1.45;color:var(--ink)}
.wz-note,.wz-gnote{font-size:14px;line-height:1.5;color:var(--ink-2)}
.wz-note b,.wz-gnote b{font-weight:600;color:var(--ink)}
.wz-sub{color:var(--ink-2)}
.wz-break{overflow-wrap:anywhere}
.wz-code{background:var(--paper-3);padding:2px 6px;border-radius:6px;overflow-wrap:anywhere}
.wz-btns{display:flex;flex-direction:column;gap:12px}
.wz-host{padding:16px 12px;border-radius:var(--r-field);background:var(--paper-2);border:1px solid var(--line);text-align:center}
.wz-lockline{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--ink-2)}
.wz-lockline .cs-icon{width:16px;height:16px;margin-top:2px;color:var(--ink-3)}
/* A fold, as the shared parts draw it (Partners keeps this look)... */
.wz-more{border-top:1px solid var(--line-2);padding-top:8px}
.wz-more>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;cursor:pointer;
  list-style:none;font-size:17px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.wz-more>summary::-webkit-details-marker{display:none}
.wz-more__chev{color:var(--ink-3);transition:transform .2s var(--ease)}
.wz-more[open] .wz-more__chev{transform:rotate(180deg)}
.wz-more__body{padding:12px 0 4px;display:flex;flex-direction:column;gap:16px}
/* ...and in a task card a quiet line under a rule (v3 Fold "line"); in a
   guide move or the live summary a bordered row (v3 Fold "box"). */
.wz-card .wz-more{border-top:1px solid var(--line);padding-top:4px}
.wz-card .wz-more>summary{justify-content:flex-start;gap:6px;min-height:44px;font-size:16px;font-weight:400;
  color:var(--ink-2);text-decoration:none}
.wz-card .wz-more>summary:hover{color:var(--ink)}
.wz-card .wz-more__chev,.wz-moves .wz-more__chev,.wz-done .wz-more__chev{width:16px;height:16px;color:currentColor}
.wz-card .wz-more__body{padding:8px 0 4px}
.wz-moves .wz-more,.wz-done .wz-more{border:1px solid var(--line);border-radius:var(--r-card);background:var(--card);
  padding:0}
.wz-moves .wz-more>summary,.wz-done .wz-more>summary{min-height:48px;padding:10px 16px;border-radius:var(--r-card);
  font-size:16px;font-weight:400;color:var(--ink);text-decoration:none}
.wz-moves .wz-more>summary:hover,.wz-done .wz-more>summary:hover{background:var(--paper-2)}
.wz-moves .wz-more__body,.wz-done .wz-more__body{padding:16px 16px 20px;border-top:1px solid var(--line);gap:20px}
/* The guide: a heading with how many moves, then the moves (v3 GuideMove). */
.wz-gsec{display:flex;flex-direction:column;gap:12px;min-width:0}
.wz-ghead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 16px}
.wz-ghead__t{font-size:20px;font-weight:600;line-height:1.4;letter-spacing:-.01em;color:var(--ink)}
.wz-ghead__m{font-size:14px;line-height:1.5;color:var(--ink-3)}
.wz-gsec>.cs-msg{margin-top:4px}
.wz-moves{display:flex;flex-direction:column;gap:12px}
.wz-moves .cs-move,.wz-moves .cs-move[open]{border-color:var(--line);overflow:hidden}
.wz-moves .cs-move>summary{gap:12px;padding:12px 16px;min-height:56px}
.wz-moves .cs-move>summary:hover{background:var(--paper)}
.wz-moves .cs-move__num,.wz-moves .cs-move[open]>summary .cs-move__num{width:28px;height:28px;background:var(--card);
  border-color:var(--line-strong);color:var(--ink);font-variant-numeric:tabular-nums}
.wz-moves .cs-move.is-flagged,.wz-moves .cs-move.is-flagged[open]{border-color:var(--amber-line);
  border-left:4px solid var(--amber)}
.wz-moves .cs-move.is-flagged>summary .cs-move__num{background:var(--amber-tint);border-color:var(--amber-line);
  color:var(--amber)}
.wz-moves .cs-move__title{display:flex;flex-direction:column;gap:2px}
.wz-mv__flag{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:500;line-height:1.5;color:var(--amber)}
.wz-mv__flag .cs-icon{width:16px;height:16px}
.wz-moves .cs-move__body{padding:4px 16px 20px 56px;gap:16px}
.wz-moves .cs-move__body b{font-weight:600;color:var(--ink)}
.wz-moves .cs-move__body>.cs-small{color:var(--ink-2)}
.wz-mv__split{display:flex;flex-direction:column;gap:20px}
.wz-mv__main{display:flex;flex-direction:column;gap:16px;flex:1 1 0;min-width:0}
@container (min-width:600px){.wz-mv__split{flex-direction:row;align-items:flex-start}}
.wz-pic{display:flex;flex-direction:column;gap:6px;width:100%;max-width:220px;flex-shrink:0}
.wz-pic__win{display:flex;flex-direction:column;padding:8px;border:1px solid var(--line);border-radius:var(--r-field);
  background:var(--paper-2)}
.wz-pic__nav{display:flex;flex-direction:column;gap:2px}
.wz-pic__nav li{display:flex;align-items:center;gap:8px;height:32px;padding:0 8px;font-size:14px;color:var(--ink-3)}
.wz-pic__nav .cs-icon,.wz-pic__lit .cs-icon{width:16px;height:16px}
.wz-pic__rule{margin:8px 0;border-top:1px dashed var(--line-strong)}
.wz-pic__lit{display:flex;align-items:center;gap:8px;height:36px;padding:0 8px;border:2px solid var(--ink);
  border-radius:6px;background:var(--card);font-size:14px;font-weight:600;color:var(--ink)}
.wz-scopes{display:flex;flex-direction:column;gap:16px}
.wz-scopes__t{font-size:14px;font-weight:500;line-height:1.45;color:var(--ink)}
.wz-scopes__why{font-size:14px;line-height:1.5;color:var(--ink-2)}
.wz-chips{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}
.wz-chips .cs-chip{padding:2px 8px;line-height:1.53}
.wz-chips .cs-chip.is-missing{background:var(--amber-tint);color:var(--amber);border-color:var(--amber-line);font-weight:600}
.wz-chips .cs-chip.is-missing .cs-icon{width:14px;height:14px;color:var(--amber)}
/* Whop's permissions: chips that copy their name and stay green once copied. */
.wz-ticklist{display:flex;flex-direction:column;gap:20px}
.wz-ticks{display:flex;flex-direction:column;gap:4px}
.wz-ticks>p{font-size:14px;line-height:1.5;color:var(--ink-2)}
.wz-ticks.is-flagged{padding:12px;border:1px solid var(--amber-line);border-radius:var(--r-field);background:var(--amber-tint)}
.wz-ticks__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px}
.wz-ticks__title{font-size:14px;font-weight:500;color:var(--ink)}
.wz-ticks__head .cs-small{white-space:nowrap}
.wz-perms{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 0;padding:0;list-style:none}
.wz-perms>li{display:flex;min-width:0;max-width:100%}
.wz-perm{position:relative;display:inline-flex;align-items:center;gap:6px;max-width:100%;min-height:36px;padding:6px 10px;
  border:1px solid var(--line);border-radius:var(--r-field);background:var(--paper-2);color:var(--ink);font:inherit;
  text-align:left;cursor:pointer}
.wz-perm:hover{border-color:var(--line-strong)}
.wz-perm:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.wz-perm__name{min-width:0;overflow-wrap:anywhere;font-size:14px;user-select:text}
.wz-perm__act{display:flex;align-items:center;flex-shrink:0;color:var(--ink-3)}
.wz-perm__act .cs-icon{width:16px;height:16px}
.wz-perm__say{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wz-perm__done{display:none}
.wz-perm.is-done{background:var(--green-tint);border-color:var(--green)}
.wz-perm.is-done .wz-perm__act{color:var(--green-hover)}
.wz-perm.is-done .wz-perm__copy{display:none}
.wz-perm.is-done .wz-perm__done{display:block}
.wz-perms__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:14px;color:var(--ink-2)}
.wz-perms__bar b{color:var(--ink)}
.cs-linkbtn{border:0;background:none;padding:10px 0;min-height:44px;font:inherit;font-size:15px;color:var(--ink-2);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cs-linkbtn:hover{color:var(--ink)}
.wz-perm__plain{display:none}
html:not(.cs-js) .wz-perm__plain{display:block;padding:6px 10px;border:1px solid var(--line);border-radius:var(--r-field);
  background:var(--paper-2);font-size:14px;overflow-wrap:anywhere}
html:not(.cs-js) .wz-perms__bar,html:not(.cs-js) .cs-js-only{display:none}
/* Choices as radio cards: the chosen one shows its tick (v3 RadioCard). */
.wz-set{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:10px}
.wz-set>legend{padding:0;margin-bottom:8px}
.wz-set--row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.wz-set--row>legend{grid-column:1/-1}
.wz .wz-set{gap:12px}
.wz-tick{display:none;width:20px;height:20px;margin-top:3px;border:1.75px solid var(--green);border-radius:50%;
  color:var(--green);align-items:center;justify-content:center}
.wz-tick .cs-icon{width:12px;height:12px}
.cs-radio:has(input:checked) .wz-tick{display:flex}
.cs-radio__title .cs-pill{margin-left:6px;vertical-align:middle;position:relative}
.cs-radio__sub .cs-mono{color:var(--ink-2)}
.wz-bullets{margin-top:4px;display:flex;flex-direction:column;gap:4px}
.wz-bullets li{display:flex;gap:8px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.wz-bullets .cs-icon{width:16px;height:16px;margin-top:3px;color:var(--ink-3)}
.wz-own{display:none}
.wz:has(#mode-own:checked) .wz-own{display:flex;flex-direction:column;gap:12px}
/* The DNS records: a table from 640px, one block per record on a phone. */
.wz-dnsbox{overflow:hidden;border:1px solid var(--line);border-radius:var(--r-card);background:var(--card)}
.wz-dns,.wz-dns tbody{display:block;width:100%;border-collapse:collapse;text-align:left}
.wz-dns thead{display:none}
.wz-dns tr{display:flex;flex-direction:column;gap:10px;padding:14px 16px}
.wz-dns tr+tr{border-top:1px solid var(--line)}
.wz-dns td{display:flex;flex-direction:column;gap:2px;padding:0;min-width:0}
.wz-dns__k{font-size:14px;color:var(--ink-2)}
.wz-dns__type{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--ink)}
.wz-dns__val{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.wz-dns__v{min-width:0;padding-top:7px;color:var(--ink);overflow-wrap:anywhere;user-select:all;-webkit-user-select:all}
.wz-hints{display:flex;flex-direction:column;gap:4px;padding-left:20px;list-style:disc;font-size:14px;line-height:1.5;color:var(--ink-2)}
/* The plan: a receipt (v3 ReceiptTable), the month or the year one shown. */
.wz-rcpt{margin:0;border:1px solid var(--line);border-radius:var(--r-card)}
.wz-rcpt__row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:12px 16px;font-size:14px;line-height:1.5}
.wz-rcpt__row+.wz-rcpt__row{border-top:1px solid var(--line)}
.wz-rcpt dt{flex-shrink:0;color:var(--ink-2)}
.wz-rcpt dd{margin:0;text-align:right;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.wz-receipt{display:flex;align-items:baseline;justify-content:space-between;gap:16px;font-size:16px;color:var(--ink-2)}
.wz-receipt .cs-mono{color:var(--ink);text-align:right}
.wz-if-year{display:none}
.wz:has(#interval-year:checked) .wz-if-year{display:block}
.wz:has(#interval-year:checked) .wz-if-month{display:none}
.wz-keeps{display:flex;gap:12px;align-items:flex-start;padding:20px;border:1px solid var(--blue-line);border-radius:var(--r-card);
  background:var(--blue-tint)}
.wz-keeps>.cs-icon{margin-top:3px;color:var(--blue)}
.wz-keeps .cs-p{color:var(--ink)}
/* Step 5: the two ways, chosen with two radios and no script. */
.wz-way--line{display:none}
.wz:has(#way-line:checked) .wz-way--line{display:block}
.wz:has(#way-line:checked) .wz-way--access{display:none}
.wz-auto{display:flex;gap:12px;align-items:flex-start;padding:16px;border:1px solid var(--blue-line);border-radius:var(--r-card);
  background:var(--blue-tint)}
.wz-auto__pulse{width:10px;height:10px;margin:7px 5px 0;border-radius:50%;background:var(--blue);flex-shrink:0;
  animation:cs-pulse 1.4s ease-in-out infinite}
.wz-auto__b{display:flex;flex-direction:column;gap:4px;min-width:0}
.wz-auto__t{font-size:17px;font-weight:600;line-height:1.45;color:var(--ink)}
.wz-auto__s{font-size:16px;line-height:1.6;color:var(--ink-2)}
.wz-auto.is-stopped{border-color:var(--line);background:var(--paper-2)}
.wz-auto.is-stopped>.cs-icon{margin-top:2px;color:var(--ink-3)}
.wz-auto.is-stopped .wz-auto__t{font-size:16px;font-weight:500;line-height:1.5}
/* Tracking's "Where to find these in Google Ads": open, numbered moves in one card. */
.wz-steps{display:flex;flex-direction:column}
.wz-step{display:flex;gap:12px;align-items:flex-start;padding:16px 0;border-top:1px solid var(--line-2)}
.wz-step:first-child{border-top:0;padding-top:0}
.wz-step:last-child{padding-bottom:0}
.wz-step__n{width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;
  justify-content:center;flex-shrink:0;font-size:14px;font-weight:600}
.wz-step__b{display:flex;flex-direction:column;gap:12px;flex:1 1 0;min-width:0}
.wz-step__t{font-size:17px;font-weight:600;color:var(--ink);line-height:1.3;padding-top:4px}
.wz-step.is-flagged{background:var(--red-tint);border:1px solid var(--red-line);border-radius:var(--r-inner);padding:16px;margin:8px -16px}
/* The live moment: what's set up, and next (v3 summary). */
.wz-done{display:grid;gap:16px 24px;align-items:start;min-width:0}
.wz-one{max-width:720px}
.wz-done__more{display:flex;flex-direction:column;gap:16px;min-width:0}
.wz-done__more:empty{display:none}
.wz-sum{margin:0;display:flex;flex-direction:column}
.wz-sum__row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 16px;padding:12px 0}
.wz-sum__row+.wz-sum__row{border-top:1px solid var(--line)}
.wz-sum__row:first-child{padding-top:0}
.wz-sum__row:last-child{padding-bottom:0}
.wz-sum dt{grid-column:1;grid-row:1;font-size:14px;font-weight:500;line-height:1.45;color:var(--ink)}
.wz-sum__v{grid-column:1/-1;grid-row:2;margin:0;min-width:0;font-size:14px;line-height:1.5;color:var(--ink-2);overflow-wrap:anywhere}
.wz-sum__v .cs-mono{color:var(--ink)}
.wz-sum__b{grid-column:2;grid-row:1;margin:0;justify-self:end}
.wz-next{gap:12px}
.wz-next__more{display:flex;flex-direction:column;gap:8px;padding-top:16px;border-top:1px solid var(--line)}
@media (min-width:640px){
  .wz-dns{display:table;table-layout:fixed}
  .wz-dns thead{display:table-header-group}
  .wz-dns tbody{display:table-row-group}
  .wz-dns tr{display:table-row;padding:0}
  .wz-dns th{height:40px;padding:0 16px;background:var(--paper-2);font-size:14px;font-weight:500;color:var(--ink-2)}
  .wz-dns th:first-child{width:96px}
  .wz-dns td{display:table-cell;padding:12px 16px;vertical-align:top;border-top:1px solid var(--line)}
  .wz-dns td+td{padding-left:0}
  .wz-dns td .wz-dns__k{display:none}
  .wz-dns td:first-child .wz-dns__type{display:block;padding-top:7px}
  .wz-sum__row{grid-template-columns:140px minmax(0,1fr) auto}
  .wz-sum__v{grid-column:2;grid-row:1}
  .wz-sum__b{grid-column:3}
}
@media (min-width:1280px){
  .wz-cols{flex-direction:row;align-items:flex-start}
  .wz-task{width:440px;flex-shrink:0}
  .wz-guide{flex:1 1 0}
  .wz-done{grid-template-columns:minmax(0,1fr) 380px}
  .wz-done>.wz-next{grid-column:2;grid-row:1/span 2}
}
@media (max-width:639px){
  .wz-title{font-size:24px}
  .wz-seg__link{min-height:24px;padding:9px 0}
  .wz-seg__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .wz-locks{flex-direction:column}
  .wz-card{padding:20px}
  .wz-moves .cs-move>summary{padding:12px 14px}
  .wz-moves .cs-move__body{padding:0 16px 20px}
  .wz-set--row{grid-template-columns:minmax(0,1fr);gap:12px}
  .wz-step{flex-wrap:wrap}
  .wz-step__b{flex-basis:100%}
  .wz-step__t{flex:1 1 0;min-width:0}
}

/* ---- sign up, sign in and the one-card pages (PLAN.md 7.2) --------------- */
.au-form{width:100%;max-width:460px}
.au-stack{display:flex;flex-direction:column;gap:20px}
.au-rule{height:1px;border:0;margin:4px 0;background:var(--line-2)}
.au-fine{font-size:16px;line-height:1.55;color:var(--ink-2);text-align:center}
.au-page{min-height:100vh;display:flex;flex-direction:column;align-items:center}
.au-top{width:100%;max-width:1200px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:24px var(--gutter)}
.au-top a.cs-link{min-height:44px;display:inline-flex;align-items:center;font-size:16px;color:var(--ink-2)}
.au-cardwrap{flex:1 1 auto;width:100%;display:flex;align-items:center;justify-content:center;padding:24px 16px 80px}
.au-card{width:100%;max-width:480px;padding:40px;border-radius:var(--r-panel);display:flex;flex-direction:column;gap:24px}
.au-badge{width:56px;height:56px;border-radius:50%;background:var(--green-tint);color:var(--green);display:flex;
  align-items:center;justify-content:center;flex-shrink:0}
.au-badge--info{background:var(--blue-tint);color:var(--blue)}
.au-badge--neutral{background:var(--paper-3);color:var(--neutral)}
.au-badge--wait{background:var(--amber-tint);color:var(--amber)}
.au-badge--good{background:var(--ok-tint);color:var(--ok)}
.au-card .cs-title{font-size:32px;line-height:1.2}
.au-form .cs-lead{font-size:16px}
.au-page>.au-foot{max-width:480px;padding:0 16px 40px;font-size:14px;line-height:1.5;color:var(--ink-3);text-align:center}
@media (max-width:639px){
  .au-card{padding:28px 20px}
}

/* ---- merchant app: stores, overview, design, tracking, settings ---------- */
.st-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 24px;flex-wrap:wrap}
.st-cont{display:flex;align-items:center;justify-content:space-between;gap:24px 32px;flex-wrap:wrap}
.st-cont__eyebrow{color:var(--ink-2);font-weight:500}
.st-cont .cs-h2{font-size:20px}
.st-cont__progress{margin-top:4px;display:flex;align-items:center;gap:12px}
.st-cont__bar{display:flex;gap:4px}
.st-cont__bar span{display:block;width:28px;height:4px;border-radius:2px;background:var(--line)}
.st-cont__bar span.is-done{background:var(--green)}
.st-list{display:flex;flex-direction:column}
.st-rows{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-card);background:var(--card)}
.st-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 24px}
.st-row+.st-row{border-top:1px solid var(--line)}
.st-row__main{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1}
.st-row__id{display:flex;flex-direction:column;gap:4px;min-width:0}
.st-row__name{font-size:17px;font-weight:600;line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.st-row__host{color:var(--ink-2)}
.st-row__state{display:flex;flex-direction:column;gap:2px;min-width:0;align-items:flex-start}
.st-row__title{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px}
.st-row__line{font-size:14px;line-height:1.5;color:var(--ink)}
.st-row__line+.st-row__line{color:var(--ink-3);font-variant-numeric:tabular-nums}
.st-row__go{display:flex;align-items:center;gap:8px;justify-content:flex-end;flex-shrink:0}
.bl-cancel__acts{display:flex;flex-wrap:wrap;gap:12px}
.st-proof--good{color:var(--ink)}
.st-proof--wait{color:var(--amber)}
.st-proof--bad{color:var(--red);font-weight:600}
.st-foot{padding:0 4px;max-width:70ch}
.st-first{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:40px;align-items:start}
.st-first__steps{display:flex;flex-direction:column;gap:12px;max-width:520px}
.st-first__steps li{display:flex;align-items:center;gap:14px;min-height:40px}
.st-first>.cs-card{background:transparent;border:0;border-left:1px solid var(--line-2);border-radius:0;padding:0 0 0 40px;align-self:stretch}
.st-first__n{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--ink);display:flex;align-items:center;
  justify-content:center;font-size:15px;font-weight:600;flex-shrink:0}
.st-first__t{font-size:16px;font-weight:600;flex:1 1 0;min-width:0}
.st-first__price{display:flex;align-items:baseline;gap:8px}
/* Billing (v3 design, 2026-10-11): the total with its breakdown, the plans, two notes. */
.bl{margin-top:8px;display:flex;flex-direction:column;gap:32px}
.bl-pay{display:grid;gap:20px}
.bl-paytitle{font-size:22px;font-weight:600;line-height:1.3;color:var(--ink);display:flex;align-items:baseline;flex-wrap:wrap;
  column-gap:6px}
.bl-total{font-size:34px}
.bl-next{margin-top:12px;display:flex;align-items:flex-start;gap:10px;font-size:16px;line-height:1.55;color:var(--ink-2)}
.bl-next .cs-icon{margin-top:3px;flex-shrink:0;color:var(--ink-3)}
.bl-break{padding:16px;border-radius:var(--r-card);background:var(--paper-2);display:flex;flex-direction:column;gap:10px;
  font-size:14px;color:var(--ink)}
.bl-line{display:flex;justify-content:space-between;gap:16px}
.bl-sub{color:var(--ink-3)}
.bl-line--total{margin-top:4px;padding-top:12px;border-top:1px solid var(--line-strong)}
.bl-note{color:var(--ink-3);font-size:14px}
.bl-plans .cs-h2{font-size:20px}
.bl-row .st-row__line{color:var(--ink-2)}
.bl-row .st-row__line:first-child{color:var(--ink)}
.bl-manage{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:15px;font-weight:500;white-space:nowrap}
.bl-manage .cs-icon{width:16px;height:16px}
.bl-buy{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.bl-terms{border:0;margin:0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.bl-term{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--line-strong);
  border-radius:var(--r-field);background:var(--card);font-size:15px;cursor:pointer;white-space:nowrap}
.bl-term:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.bl-term input{width:18px;height:18px;margin:0;accent-color:var(--ink)}
.bl-info{display:grid;gap:16px}
@media (min-width:768px){.bl-info{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.bl-pay{grid-template-columns:minmax(0,1fr) minmax(0,360px);align-items:start;gap:32px}}
/* Plan payment (/billing/pay, v3 2026-10-11): the receipt, Whop's own box beside it from 1280, then the notes. */
.py{display:grid;gap:24px;align-items:start;max-width:720px}
.py-main,.py-side,.py-notes{min-width:0}
.py-main{display:flex;flex-direction:column;gap:24px}
.py-receipt{margin:0;padding:12px 24px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--card)}
.py-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:12px 0}
.py-row+.py-row{border-top:1px solid var(--line)}
.py-row dt{font-size:14px;color:var(--ink-2)}
.py-row dd{margin:0;font-size:16px;color:var(--ink);text-align:right}
.py-coupon{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.py-coupon .cs-field{flex:1 1 200px;min-width:0}
div.py-coupon{flex-direction:column;align-items:stretch}
.py-box{display:flex;flex-direction:column;gap:16px;padding:24px;border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--card)}
.py-cap{margin-top:12px;font-size:14px;color:var(--ink-3)}
.py-notes{display:flex;flex-direction:column;gap:8px}
.py-notes .cs-p{font-size:14px;color:var(--ink-2)}
.py-noscript{padding:16px;border:1px solid var(--line);border-radius:var(--r-field);background:var(--paper-2)}
@media (min-width:1280px){.py{max-width:none;grid-template-columns:minmax(0,1fr) 440px;grid-template-rows:auto 1fr;column-gap:48px}
  .py-main{grid-column:1;grid-row:1}.py-side{grid-column:2;grid-row:1/span 2}.py-notes{grid-column:1;grid-row:2}}
@media (max-width:639px){.py-receipt{padding:8px 20px}.py-box{padding:20px}}
.ac-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:stretch}
.ac-email{font-size:17px;user-select:all;-webkit-user-select:all}
.nw,.wa{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:32px;align-items:start}
/* Store Overview (v3 design, 2026-10-11): state, attention, today, payments; details beside. */
.ov{display:grid;gap:24px;padding-top:8px}
.ov-main{display:flex;flex-direction:column;gap:32px;min-width:0}
.ov-side{min-width:0}
.ov-status{border-color:var(--line)}
.ov-status--bad{border-color:var(--red-line)}
.ov-status .cs-h2{font-size:20px}
.ov-status .cs-pill{align-self:flex-start}
.ov-act>.cs-btn{width:100%}
.ov-sechead{margin-bottom:12px;display:flex;flex-direction:column}
.ov-sechead--split{flex-direction:row;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;column-gap:16px;row-gap:4px}
.ov-sechead .cs-small{color:var(--ink-3)}
.ov-att{overflow:hidden;border:1px solid var(--red-line);border-radius:var(--r-card);background:var(--card)}
.ov-att__row{display:flex;flex-direction:column;gap:8px;padding:14px 16px}
.ov-att__row+.ov-att__row{border-top:1px solid var(--line)}
.ov-att__when{font-size:16px;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.ov-check{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.ov-check .cs-icon{width:16px;height:16px}
.ov-check--ok .cs-icon{color:var(--ok)}
.ov-check--late .cs-icon{color:var(--amber)}
.ov-check--unknown .cs-icon{color:var(--ink-3)}
.ov-figs{display:grid;grid-template-columns:minmax(0,1fr);border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--card)}
.ov-fig{display:flex;flex-direction:column;padding:16px}
.ov-fig+.ov-fig{border-top:1px solid var(--line)}
.ov-fig__label{font-size:14px;color:var(--ink-2)}
.ov-fig .cs-num{margin-top:4px}
.ov-fig--bad .cs-num{color:var(--red)}
.ov-fig__why{margin-top:4px;font-size:14px;color:var(--ink-3)}
.ov-paybox{overflow:hidden;border:1px solid var(--line);border-radius:var(--r-card);background:var(--card)}
.ov-table{display:none;width:100%;border-collapse:collapse;text-align:left;font-variant-numeric:tabular-nums}
.ov-table th{padding:10px 20px;background:var(--paper-2);font-size:14px;font-weight:500;color:var(--ink-2)}
.ov-table td{padding:14px 20px;border-top:1px solid var(--line);font-size:14px;color:var(--ink);white-space:nowrap}
.ov-table .cs-mono{font-family:var(--sans);font-size:14px}
.ov-table td.ov-r .cs-mono{font-weight:500}
.ov-r{text-align:right}
.ov-table tr.ov-miss td{background:var(--red-tint)}
.ov-table tr.ov-miss td:first-child{box-shadow:inset 3px 0 0 var(--red)}
.ov-plist li{padding:14px 16px}
.ov-plist li+li{border-top:1px solid var(--line)}
.ov-plist li.ov-miss{background:var(--red-tint);box-shadow:inset 3px 0 0 var(--red)}
.ov-plist__a{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;column-gap:12px;font-size:16px}
.ov-amt{font-weight:500;font-variant-numeric:tabular-nums}
.ov-plist__b{margin-top:6px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.ov-empty{display:flex;flex-direction:column;align-items:center;padding:40px 24px;text-align:center}
.ov-empty__icon{margin-bottom:12px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--paper-2);color:var(--ink-3)}
.ov-empty__text{font-size:16px;font-weight:500;color:var(--ink)}
.ov-note{padding:20px;border:1px dashed var(--line-strong);border-radius:var(--r-card);background:var(--paper-2)}
.ov-note__title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--ink)}
.ov-note__title .cs-icon{width:16px;height:16px;color:var(--ink-3)}
.ov-note .cs-small{display:block;margin-top:4px;color:var(--ink-2)}
.ov-det{padding:20px 0}
.ov-det:first-child{padding-top:0}
.ov-det:last-child{padding-bottom:0}
.ov-det+.ov-det{border-top:1px solid var(--line)}
.ov-det .cs-h3{margin-bottom:4px}
.ov-det .cs-small{color:var(--ink-2)}
.ov-det .cs-link{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:500}
@media (min-width:640px){
  .ov-act>.cs-btn{width:auto}
  .ov-att__row{flex-direction:row;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px}
  .ov-figs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ov-fig{padding:16px 20px}
  .ov-fig+.ov-fig{border-top:0;border-left:1px solid var(--line)}
  .ov-table{display:table}
  .ov-plist{display:none}
}
@media (min-width:1280px){
  .ov{grid-template-columns:minmax(0,1fr) 320px;align-items:start;gap:32px}
  .ov-side{position:sticky;top:80px}
}
/* Store Settings (v3 design, 2026-10-11): the tab's title, the store's facts with Theme Access beside
   them on a wide screen, then the danger zone -- what deleting does, and its form or the wait in its place. */
.se{display:flex;flex-direction:column;gap:24px;padding-top:8px}
.se-head #section-title{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}
.se-top{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
.se-card{display:flex;flex-direction:column}
.se-facts{margin-top:12px}
.se-facts .se-fact{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:12px 0}
.se-facts .se-fact+.se-fact{border-top:1px solid var(--line)}
.se-facts .se-fact dt{font-size:14px;line-height:1.5;color:var(--ink-2)}
.se-facts .se-fact dd{margin:0;min-width:0;font-size:16px;line-height:1.6;color:var(--ink);overflow-wrap:anywhere}
.se-facts .se-fact .cs-mono{font-size:15px;word-break:break-all}
.se-ta{gap:8px}
.se-ta__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
.se-ta__go{margin-top:8px}
.se-danger{border-color:var(--red-line);box-shadow:0 0 0 1px var(--red-line)}
.se-dz__head{display:flex;flex-direction:column}
.se-dz__head .cs-eyebrow{font-weight:500;color:var(--red)}
.se-dz__head .cs-h3{margin-top:4px}
.se-dz__head .cs-p{margin-top:8px;max-width:68ch}
.se-list{margin-top:16px;display:flex;flex-direction:column;gap:8px;padding-left:24px;list-style:disc;max-width:68ch}
.se-list li{font-size:16px;line-height:1.6;color:var(--ink-2)}
.se-list li::marker{color:var(--ink-3)}
.se-list b{color:var(--ink)}
.se-list a{color:var(--ink);font-weight:500}
.se-code{font-size:14px;color:var(--ink);overflow-wrap:anywhere}
.se-code--block{display:block;margin-top:8px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-field);
  background:var(--paper-2);line-height:1.5;word-break:break-all}
.se-dz__act{margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}
.se-form{display:flex;flex-direction:column;gap:20px}
.se-confirm{max-width:480px}
.se-btns{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
/* The Whop and Shopify cards (2026-10-15): the facts, then the form that
   changes them under a rule; side by side on a wide screen. */
.se-conns{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
.se-conn{gap:8px}
.se-conn__form{margin-top:8px;padding-top:24px;border-top:1px solid var(--line)}
.se-conn .wz-note{margin:0}
.se-fact__name{display:block;color:var(--ink)}
.se-fact__note{display:block;font-size:14px;line-height:1.5;color:var(--ink-2)}
@media (min-width:640px){
  .se-facts .se-fact{grid-template-columns:180px minmax(0,1fr);column-gap:24px}
}
@media (min-width:1280px){
  .se-top:not(.se-top--one){grid-template-columns:minmax(0,1fr) 340px}
  .se-conns{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:639px){
  .se{padding-top:4px}
}
/* "Do you have a Whop account?" over Add a store, before the first store
   (2026-10-06). No script: both answers are links and the whole shell behind
   is inert; it does not scroll while the question is up, and the skip link
   (into the inert page) is gone with it. */
body:has(.cs-ask){overflow:hidden}
body:has(.cs-ask) .cs-skip{display:none}
.cs-ask{position:fixed;inset:0;z-index:60;display:flex;padding:24px 16px;background:rgba(14,26,43,.56);overflow-y:auto}
.cs-ask__card{width:100%;max-width:560px;margin:auto;background:var(--card);border-radius:var(--r-card);padding:32px;
  box-shadow:var(--shadow-3);display:flex;flex-direction:column;gap:24px}
/* The question in the v3 dialog look: the page title's size over the body's text. */
.cs-ask .cs-h2{font-family:var(--display);font-weight:650;font-size:28px;line-height:1.25;letter-spacing:-.015em}
.cs-ask__go{display:flex;flex-wrap:wrap;gap:12px}
.cs-ask__go .cs-btn{flex:1 1 200px}
/* Add a store (v3 design, 2026-10-11): one column, the form, then what setup looks like. */
.nw{display:flex;flex-direction:column;align-items:stretch;gap:24px;max-width:640px}
.nw-form{padding:24px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--card)}
.nw-form .wz-more{min-width:0;border-top:0;padding-top:0}
.nw-form .wz-more>summary{justify-content:flex-start;gap:6px;min-height:44px;font-size:16px;font-weight:500;
  text-underline-offset:4px}
.nw-form .wz-more__chev{width:16px;height:16px;color:currentColor}
.nw-form .wz-more__body{padding:4px 0 8px}
.nw-lock{display:flex;gap:8px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--ink-2)}
.nw-lock .cs-icon{margin-top:2px;color:var(--ink-3)}
.nw-how{display:flex;flex-direction:column;gap:12px;padding:24px;border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--paper-2)}
.nw-how__t{font-size:17px;font-weight:600;line-height:1.45;color:var(--ink)}
.nw-steps{display:flex;flex-direction:column;gap:8px}
.nw-steps li{display:flex;align-items:center;gap:12px;min-height:32px}
.nw-steps__n{width:28px;height:28px;border:1px solid var(--line-strong);border-radius:50%;background:var(--card);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px;font-weight:500;
  font-variant-numeric:tabular-nums}
.nw-steps__t{flex:1 1 0;min-width:0;font-size:16px;color:var(--ink)}
.nw-steps__m{font-size:14px;color:var(--ink-3);white-space:nowrap}
.nw-cost{padding-top:12px;border-top:1px solid var(--line)}
.nw-cost .cs-p{font-size:14px;line-height:1.5}
.nw-cost b{color:var(--ink)}
/* /whop-account, our own guide to making a Whop account (2026-10-06; v3
   2026-10-11): one list of moves, the last one always open, beside what to
   have ready (first on one column). */
.wa{grid-template-columns:minmax(0,1fr) 320px;gap:24px 40px}
.wa-moves{min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-card);background:var(--card)}
.wa-moves>li+li{border-top:1px solid var(--line)}
.wa-moves .cs-move,.wa-moves .cs-move[open]{border:0;border-radius:0}
.wa-moves .cs-move>summary{gap:16px;min-height:64px;padding:16px 24px;border-radius:0}
.wa-moves .cs-move>summary:hover{background:var(--paper-2)}
.wa-moves .cs-move__num{width:32px;height:32px;font-variant-numeric:tabular-nums}
.wa-moves .cs-move__chev{color:var(--ink-2)}
.wa-moves .cs-move__body{padding:0 24px 24px 72px;gap:16px}
.wa-moves .cs-move__body .cs-p{color:var(--ink)}
.wa-moves .cs-move__body b{font-weight:600;color:var(--ink)}
.wa-moves .cs-path span,.wa-moves .cs-path span:last-child{padding:4px 10px;border:1px solid var(--line);
  border-radius:var(--r-chip);background:var(--paper-2);font-weight:500;color:var(--ink)}
.wa-last__head{display:flex;align-items:center;gap:16px;min-height:64px;padding:16px 24px}
.wa-last .cs-move__num{background:var(--ink);border-color:var(--ink);color:#fff}
.wa-fill{margin:0;display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--line);
  border-radius:var(--r-field);background:var(--paper-2)}
.wa-fill__row{display:flex;flex-direction:column;gap:2px}
.wa-fill dt{font-size:14px;font-weight:500;line-height:1.45;color:var(--ink)}
.wa-fill dd{margin:0;font-size:16px;line-height:1.5;color:var(--ink-2)}
.wa-need{display:flex;flex-direction:column;gap:10px}
.wa-need li{display:flex;gap:10px;align-items:flex-start;font-size:16px;line-height:1.5;color:var(--ink)}
.wa-need .cs-icon{margin-top:2px;color:var(--green)}
.wa-side .cs-small{color:var(--ink-2)}
/* Our own drawing of a Whop screen (v3 WhopSchematic), the button to press ringed. */
.wa-pic{display:flex;flex-direction:column;gap:8px;padding-top:4px}
.wa-pic__win{width:100%;max-width:460px;overflow:hidden;border:1px solid var(--line-strong);border-radius:var(--r-field);
  background:var(--card)}
.wa-pic__bar{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--paper-2)}
.wa-pic__dots{display:flex;gap:4px;flex-shrink:0}
.wa-pic__dots i{display:block;width:8px;height:8px;border-radius:50%;background:var(--line-strong)}
.wa-pic__tab{flex:1 1 0;min-width:0;padding:0 8px;border-radius:4px;background:var(--card);font-size:14px;font-weight:500;
  color:var(--ink-3);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.wa-pic__body{display:flex}
.wa-pic__nav{width:112px;flex-shrink:0;display:flex;flex-direction:column;gap:4px;padding:8px;border-right:1px solid var(--line);
  background:var(--paper-2)}
.wa-pic__nav span{padding:2px 8px;border-radius:4px;font-size:14px;color:var(--ink-3);overflow:hidden;white-space:nowrap;
  text-overflow:ellipsis}
.wa-pic__nav .wa-pic__logo{width:40px;height:8px;margin-bottom:4px;padding:0;background:var(--line-strong)}
.wa-pic__nav .is-lit{border:1px solid var(--line);background:var(--card);font-weight:600;color:var(--ink)}
.wa-pic__main{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:10px;padding:12px 16px}
.wa-pic__h{font-size:14px;font-weight:600;color:var(--neutral);overflow-wrap:anywhere}
.wa-pic__lines{display:flex;flex-direction:column;gap:6px}
.wa-pic__lines i{display:block;width:80%;height:6px;border-radius:4px;background:var(--line)}
.wa-pic__lines i+i{width:60%}
.wa-pic__fs{display:flex;flex-direction:column;gap:8px}
.wa-pic__f{display:flex;flex-direction:column;gap:4px}
.wa-pic__k{font-size:14px;color:var(--ink-2);overflow-wrap:anywhere}
.wa-pic__box{display:flex;align-items:center;height:28px;padding:0 8px;border:1px solid var(--line-strong);border-radius:4px;
  background:var(--card)}
.wa-pic__ph{display:block;width:33%;height:6px;border-radius:4px;background:var(--line)}
.wa-pic__acts{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:4px}
.wa-pic__decoy{display:flex;align-items:center;justify-content:center;width:128px;max-width:100%;height:28px;
  border:1px solid var(--line-strong);border-radius:4px;background:var(--card)}
.wa-pic__decoy .wa-pic__ph{width:64px}
.wa-pic__press{display:inline-flex;align-items:center;max-width:100%;min-height:30px;padding:2px 10px;border-radius:4px;
  background:var(--neutral);color:#fff;font-size:14px;font-weight:500;line-height:1.3;
  box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--green)}
.wa-pic figcaption{font-size:14px;line-height:1.5;color:var(--ink-3)}
@media (min-width:640px){
  .wa-fill__row{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);column-gap:24px;align-items:baseline}
}
@media (min-width:1024px){
  .wa-side{position:sticky;top:88px}
}
@media (max-width:639px){
  .cs-ask__card{padding:24px;gap:20px}
  .cs-ask .cs-h2{font-size:24px}
  .cs-ask__go .cs-btn{flex-basis:100%}
  .nw-form,.nw-how{padding:20px}
  .wa-moves .cs-move>summary,.wa-last__head{padding:16px}
  .wa-moves .cs-move__body{padding:0 16px 24px}
  .wa-last .cs-btn{width:100%}
}
/* Store Tracking setup (v3 design, 2026-10-11): the tab's title, the Google Ads card -- its badge (the state),
   its notes, what the checkout sends, the form, Turn off, where to find the values -- then a note on the
   store's own pages and the Meta, TikTok and GA4 cards in the same shape (pixels.py). */
.tk{display:flex;flex-direction:column;gap:24px;padding-top:8px}
.tk>.cs-msg--banner{gap:12px;padding:8px 8px 8px 16px}
.tk>.cs-msg--banner>.cs-icon{margin-top:0;color:var(--ok)}
.tk>.cs-msg--banner .cs-msg__body{flex-direction:row;flex-wrap:wrap;column-gap:5px;row-gap:0}
.tk>.cs-msg--banner :is(.cs-msg__title,.cs-msg__text){font-size:16px;font-weight:500;line-height:1.5;color:var(--ok)}
.tk>.cs-msg--banner .cs-msg__close{margin:0;color:var(--ok)}
.tk-head #section-title{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}
.tk-g{display:flex;flex-direction:column;gap:24px}
.tk-g__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.tk-g__what{display:flex;flex-direction:column;gap:4px;min-width:0}
.tk-g__what .cs-p{max-width:68ch}
.tk-g__head>.cs-pill{flex-shrink:0;margin-top:1px}
.tk-g__notes{display:flex;flex-direction:column;gap:16px;margin-top:-4px}
.tk-sends{display:flex;flex-direction:column;gap:8px;min-width:0;overflow-wrap:anywhere}
.tk-sends .cs-checkrow--skip .cs-checkrow__mark .cs-icon{display:none}
.tk-sends .cs-checkrow--skip .cs-checkrow__text{color:var(--ink)}
.tk-form{display:flex;flex-direction:column;gap:20px}
.tk-labels{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.tk-off{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:20px;
  border-top:1px solid var(--line)}
.tk-code{padding:1px 6px;border-radius:var(--r-chip);background:var(--paper-2);font-size:14px;color:var(--ink);
  overflow-wrap:anywhere}
.tk-where{border:1px solid var(--line);border-radius:var(--r-field)}
.tk-where>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:0 16px;
  border-radius:var(--r-field);font-size:15px;font-weight:500;color:var(--ink);cursor:pointer;list-style:none}
.tk-where>summary::-webkit-details-marker{display:none}
.tk-where>summary:hover{background:var(--paper-2)}
.tk-where>summary:focus-visible{outline-offset:-2px}
.tk-where[open]>summary{border-radius:var(--r-field) var(--r-field) 0 0}
.tk-where__chev{width:18px;height:18px;color:var(--ink-2);transition:transform .18s var(--ease)}
.tk-where[open] .tk-where__chev{transform:rotate(180deg)}
.tk-where__steps{display:flex;flex-direction:column;gap:20px;padding:20px 16px;border-top:1px solid var(--line)}
.tk-where__steps>li{display:flex;gap:12px}
.tk-where__n{width:28px;height:28px;border-radius:50%;border:1px solid var(--line-strong);display:flex;align-items:center;
  justify-content:center;flex-shrink:0;font-size:14px;font-weight:600;color:var(--ink)}
.tk-where__b{display:flex;flex-direction:column;gap:4px;min-width:0}
.tk-where__t{font-weight:600;color:var(--ink)}
.tk-where__path{margin-top:4px;display:flex}
.tk-where .cs-path{padding:4px 10px;border:1px solid var(--line);border-radius:var(--r-chip);background:var(--paper-2);
  font-weight:400;color:var(--ink)}
.tk-where .cs-path span:last-child{font-weight:400;color:var(--ink)}
/* A saved secret: said, never drawn. */
.tk-saved{display:flex;align-items:center;gap:8px;min-width:0;font-size:15px;font-weight:500;color:var(--ink)}
.tk-saved .cs-icon{width:18px;height:18px;flex-shrink:0;color:var(--ok)}
.tk-note>.cs-msg{margin:0}
@media (min-width:768px){
  .tk-labels{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:639px){
  .tk{padding-top:4px}
}
/* Checkout design (account_views.customize_page, v3 2026-10-11): the settings
   in a 440px column of cards, a picture of the store's checkout beside them.
   #preview (.cd.pv) wraps both: app.js writes the header into its
   data-header, the colours and the corners into its variables, so the
   picture and the colour chip follow. data-template is the store's page
   (Checkout page, 2026-10-12), drawn by the server: [data-template^="flow-"]
   is both Flows, [data-template^="assured-"] both Assureds. */
.cd{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:32px;align-items:start}
.cd-main{display:flex;flex-direction:column;gap:20px;min-width:0}
.cd-head{display:flex;flex-direction:column;gap:4px}
.cd-head #section-title{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}
.cd-head .cs-small{color:var(--ink-2)}
.cd-form{display:flex;flex-direction:column;gap:20px;min-width:0}
.cd-card .cs-small{color:var(--ink-2)}
.cd-set{border:0;margin:0;padding:0;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.cd-set>legend{padding:0}
/* The chosen top: a green tick at the card's right. */
.cd-tops .cs-radio:has(input:checked){padding-right:48px}
.cd-tops .cs-radio:has(input:checked)::after{content:"";position:absolute;
  top:16px;right:16px;width:20px;height:20px;background:var(--green);-webkit-mask:var(--i-ok) center/contain no-repeat;
  mask:var(--i-ok) center/contain no-repeat}
/* The page the store uses (2026-10-12), over the form: its sketch, its
   name, and Change, to Checkout page. */
.cd-page{display:flex;align-items:center;gap:16px}
.cd-page__words{display:flex;flex-direction:column;flex:1 1 0;min-width:0}
.cd-page__k{font-size:14px;line-height:1.45;color:var(--ink-2)}
.cd-page__name{font-size:17px;font-weight:600;line-height:1.4;color:var(--ink)}
.cd-page__go{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-weight:500}
/* A layout drawn small (2026-10-12, one for each of the five): its top,
   grey bars for the form, the order column. */
.cd-sk{display:flex;flex-direction:column;width:86px;height:60px;flex-shrink:0;overflow:hidden;
  border:1px solid var(--line-strong);border-radius:5px;background:#fff}
.cd-sk i{display:block;flex-shrink:0;height:3px;border-radius:2px;background:var(--line-strong)}
.cd-sk__head{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;height:13px;padding:0 6px;
  border-bottom:1px solid var(--line)}
.cd-sk .cd-sk__ink{width:24px;background:var(--ink-2)}
.cd-sk .cd-sk__bag{width:4px;height:4px;border-radius:1px;background:var(--ink-3)}
.cd-sk .cd-sk__pill{width:42px;height:5px;border:1px solid var(--ink-3);background:transparent}
.cd-sk .cd-sk__amber{height:6px;border-radius:0;background:var(--amber-line)}
.cd-sk__body{display:flex;flex:1 1 0;min-height:0}
.cd-sk__form{display:flex;flex-direction:column;gap:3px;width:46px;flex-shrink:0;padding:5px 0 0 5px}
.cd-sk__side{display:flex;flex-direction:column;gap:3px;flex:1 1 0;min-width:0;padding:4px;background:var(--paper-2)}
.cd-sk .cd-sk__box{width:100%;height:8px;border-radius:2px;border:1px solid var(--line-strong);background:#fff}
.cd-sk .cd-sk__box--low{height:6px}
.cd-sk .cd-sk__box--tall{height:14px}
.cd-sk .cd-sk__ann{height:4px;border-radius:0;background:var(--blue)}
.cd-sk__steps{display:flex;justify-content:center;gap:9px;flex-shrink:0;padding:3px 0 0}
.cd-sk__steps b{display:block;width:5px;height:5px;border-radius:50%;background:var(--blue)}
.cd-sk__steps b:last-child{background:var(--line-strong)}
.cd-sk .cd-sk__lane{width:2px;height:auto;margin:5px 0 4px 4px;border-radius:1px;
  background:linear-gradient(var(--blue) 55%,var(--line-strong) 55%)}
.cd-sk .cd-sk__panel{width:40px;height:14px;margin-top:2px;border-radius:2px;border:1px solid var(--line-strong);background:#fff}
.cd-sk .cd-sk__panel--edge{border-top:2px solid var(--blue)}
.cd-sk .cd-sk__dots{width:100%;height:0;border-radius:0;border-top:1px dotted var(--ink-3);background:none;margin:2px 0}
.cd-sk .cd-sk__band{width:100%;height:5px;border-radius:1px;background:var(--blue-line)}
.cd-sk--flow-max .cd-sk__head,.cd-sk--flow-medium .cd-sk__head{flex-direction:column;justify-content:flex-start;gap:3px;
  height:19px;padding:4px 0 0}
.cd-sk--flow-max .cd-sk__head{border-bottom:0;height:16px}
.cd-sk--flow-max .cd-sk__steps{border-bottom:1px solid var(--line);padding-bottom:3px}
.cd-sk--assured-max .cd-sk__head,.cd-sk--assured-medium .cd-sk__head{height:12px;justify-content:flex-start;padding:0 5px}
.cd-sk--assured-medium .cd-sk__side{background:var(--paper-3)}
.cd-sk--flow-medium .cd-sk__form{width:40px}
.cd-tops{grid-template-columns:minmax(0,1fr)}
/* Colour: six swatches (they fill the box, so they need the script), then
   the box with a chip of the colour in use beside it -- the pay button's and
   the links' halves, one colour once a colour is typed. */
.cd-swatches{display:flex;flex-wrap:wrap;gap:8px}
.cd-swatch{width:44px;height:44px;border-radius:var(--r-field);border:0;padding:0;cursor:pointer}
.cd-swatch:hover{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--line-strong)}
.cd-swatch:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
html:not(.cs-js) .cd-swatches{display:none}
.cd-colour{display:flex;align-items:flex-start;gap:12px}
.cd-colour>.cs-field{flex:1 1 0}
.cd-chip{width:48px;height:48px;flex-shrink:0;margin-top:26px;border:1px solid var(--line);border-radius:var(--r-field);
  background:linear-gradient(135deg,var(--pv-pay) 50%,var(--pv-accent) 50%)}
/* Corners: three cards, the shape on top. */
.cd-shapes{grid-template-columns:repeat(3,minmax(0,1fr))}
.cd-shapes .cs-radio{flex-direction:column;align-items:center;gap:0;padding:28px 8px 12px;text-align:center}
.cd-shapes .cs-radio__dot{position:absolute;top:12px;left:12px;margin:0}
.cd-shapes .cs-radio__text{align-items:center;gap:0}
.cd-shapes .cs-radio__body{order:-1;position:static;padding:4px 0 12px}
.cd-shapes .cs-radio__title{font-size:14px;font-weight:500;line-height:1.45}
.cd-shapes .cs-radio__sub{color:var(--ink-3);font-variant-numeric:tabular-nums}
.cd-shape{display:block;width:64px;height:36px;max-width:100%;border:2px solid var(--ink-2);background:var(--card)}
/* Extras: one row each, its words, the pages that show it, On or Off, and
   the fields when open. The Classic note shows while the page is Classic
   (drawn so by the server, 2026-10-12). */
.cd-extras{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.cd-extra+.cd-extra{border-top:1px solid var(--line)}
.cd-extra>summary{display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 16px;cursor:pointer;list-style:none}
.cd-extra>summary::-webkit-details-marker{display:none}
.cd-extra>summary:hover{background:var(--paper-2)}
.cd-extra>summary:focus-visible{outline-offset:-2px}
.cd-extra__text{display:flex;flex-direction:column;flex:1 1 0;min-width:0}
.cd-extra__t{font-size:16px;font-weight:500;line-height:1.5;color:var(--ink)}
.cd-extra__sub{font-size:14px;line-height:1.5;color:var(--ink-2)}
.cd-extra__on{display:block;font-size:14px;line-height:1.5;color:var(--ink-3)}
.cd-extra__on.is-off{color:var(--amber)}
.cd-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cd-faq+.cd-faq{padding-top:16px;border-top:1px solid var(--line-2)}
/* Arrival dates: up to four rows, a method's name and its days. */
.cd-arr{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:8px}
.cd-arr__head,.cd-arr__row{display:grid;grid-template-columns:minmax(0,1fr) 88px 88px;gap:8px}
.cd-arr__head{font-size:14px;font-weight:500;line-height:1.45;color:var(--ink-2)}
.cd-arr__in{width:100%;min-width:0;height:48px;padding:0 12px;border:1px solid var(--field-line);border-radius:var(--r-field);
  background:var(--card);color:var(--ink);font:inherit;font-size:16px}
.cd-arr__in:focus{outline:none;border-color:var(--green);box-shadow:var(--focus)}
.cd-arr[aria-invalid="true"] .cd-arr__in{border-color:var(--red)}
.cd-extra__bad{display:flex;color:var(--red)}
.cd-extra__chev{color:var(--ink-3);transition:transform .18s var(--ease)}
.cd-extra[open]>summary .cd-extra__chev{transform:rotate(180deg)}
.cd-extra__body{display:flex;flex-direction:column;gap:16px;padding:4px 16px 20px}
/* The discount code field (2026-10-11): a switch, on by default. The box is
   the real control (keyboard, screen reader: role=switch); the track beside
   it is drawn from its state. */
.cd-switch{position:relative;display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 16px;cursor:pointer}
.cd-switch:hover{background:var(--paper-2)}
.cd-switch__t{font-size:16px;font-weight:500;line-height:1.5;color:var(--ink)}
.cd-switch__box{position:absolute;right:16px;width:44px;height:24px;margin:0;opacity:0;cursor:pointer}
.cd-switch__track{position:relative;flex-shrink:0;width:44px;height:24px;border-radius:999px;background:var(--line-strong);
  transition:background .18s var(--ease)}
.cd-switch__track::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .18s var(--ease)}
.cd-switch__box:checked+.cd-switch__track{background:var(--green)}
.cd-switch__box:checked+.cd-switch__track::after{transform:translateX(20px)}
.cd-switch__box:focus-visible+.cd-switch__track{outline:2px solid var(--ink);outline-offset:2px}
.cd-extra--switch .cs-field__error{padding:0 16px 12px}
@media (prefers-reduced-motion:reduce){.cd-switch__track,.cd-switch__track::after{transition:none}}
.cd-badges{display:grid;grid-template-columns:minmax(0,1fr);column-gap:16px}
.cd-badge>span{display:inline-flex;align-items:center;gap:8px}
.cd-badge__ico{width:18px;height:18px;flex-shrink:0;color:var(--ink-2)}
.bp-box{min-height:480px}
.bp-card iframe{display:block;width:100%;border:0}
/* The save bar: it sticks to the bottom of the screen while the form is on it,
   and whatever gets the focus scrolls clear of it (and of the sticky top bar). */
html:has(.cd-bar){scroll-padding-top:80px;scroll-padding-bottom:96px}
.cd-bar{position:sticky;bottom:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:12px 16px;
  margin-top:4px;padding:16px 0;border-top:1px solid var(--line);background:var(--paper)}
.cd-bar__say{display:flex;align-items:flex-start;gap:8px;min-width:0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.cd-bar__say .cs-icon{width:16px;height:16px;margin-top:3px}
.cd-bar__say.is-bad{color:var(--red)}
.cd-bar__say.is-ok{color:var(--ok)}
.cd-bar__words>div{display:inline}
.cd-bar__go{display:flex;align-items:center;gap:12px;flex-shrink:0;margin-left:auto}
.cd-bar__pv{display:none}
/* The picture beside the form. Its body scrolls when the screen is short. */
.cd-side{position:sticky;top:88px;min-width:0}
.cd-pv{border:1px solid var(--line);border-radius:var(--r-card);background:var(--card);overflow:hidden}
.cd-pv__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;
  border-bottom:1px solid var(--line)}
.cd-pv__t{font-size:14px;font-weight:500;line-height:1.45;color:var(--ink)}
.cd-pv__layout{font-size:14px;line-height:1.45;color:var(--ink-2);text-align:right}
.cd-pv__body{max-height:calc(100vh - 160px);overflow-y:auto;padding:12px;background:var(--paper-2)}
.cd-pv__body:focus-visible,.cd-sheet__body:focus-visible{outline-offset:-2px}
.cd-pv__cap{margin-top:12px;padding:0 4px;font-size:14px;line-height:1.5;color:var(--ink-2)}
/* On a phone the picture opens over the page from the save bar (a popover:
   the browser opens and closes it, Escape included, with no script). */
.cd-sheet__head{display:flex;align-items:center;gap:12px;flex-shrink:0;padding:8px 8px 8px 16px;
  border-bottom:1px solid var(--line)}
.cd-sheet__words{flex:1 1 0;min-width:0}
.cd-sheet__t{font-size:17px;font-weight:600;line-height:1.45;color:var(--ink)}
.cd-sheet__sub{font-size:14px;line-height:1.5;color:var(--ink-2)}
.cd-sheet__x{width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border:0;
  border-radius:var(--r-field);background:transparent;color:var(--ink);cursor:pointer}
.cd-sheet__x:hover{background:var(--paper-2)}
.cd-sheet__body{flex:1 1 0;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:12px;background:var(--paper-2)}
.cd-sheet__body>*{max-width:420px;margin-left:auto;margin-right:auto}
@supports not selector(:popover-open){.cd-sheet__x{display:none}}
/* The picture (_preview). Wide, it is the desktop checkout drawn at 960px and
   scaled to its frame: every size is n x --u, one 960th of the frame. Narrow
   (under 480px: the phone's sheet, a tight column) it is the phone checkout.
   The shopper's checkout uses the system's fonts, so the picture does too.
   --pv-radius is a bare number of pixels, sized the same way. */
.pv{--pv-accent:#005bd1;--pv-pay:#111111;--pv-radius:12}
.pv-shot{container-type:inline-size;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-field);background:#fff}
.pv-page{--u:calc(100cqw/960);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:calc(14*var(--u));line-height:1.5;color:#1a1a1a;text-align:left;overflow-wrap:anywhere}
.pv-page b{font-weight:600}
.pv-ico{display:block;flex-shrink:0;width:calc(18*var(--u));height:calc(18*var(--u))}
.pv-ann{padding:calc(10*var(--u)) calc(16*var(--u));text-align:center;font-size:calc(15*var(--u));font-weight:600;line-height:1.4;
  background:var(--pv-accent);color:#fff}
@supports (color:oklch(from red l c h)){.pv-ann{color:oklch(from var(--pv-accent) clamp(.21,(.711 - l)*1000,1) 0 0)}}
.pv-tbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:calc(6*var(--u)) calc(10*var(--u));
  padding:calc(10*var(--u)) calc(16*var(--u));background:#fff8e6;border-bottom:1px solid #f0dca8;color:#5c4400;
  font-size:calc(15*var(--u));line-height:1.4}
.pv-tbar b,.pv-pill b{font-variant-numeric:tabular-nums;font-size:calc(17*var(--u))}
.pv-tbar .pv-when{color:#7a5d12}
.pv:not([data-template="assured-max"]) .pv-tbar{display:none}
.pv-top{position:relative;padding:calc(20*var(--u)) calc(40*var(--u));border-bottom:1px solid #e1e3e5}
.pv[data-header="none"] .pv-top{display:none}
.pv-top__row{display:flex;align-items:center;justify-content:space-between;gap:calc(12*var(--u));min-height:calc(36*var(--u))}
.pv-brand{display:none;align-items:center;gap:calc(10*var(--u));min-width:0;font-size:calc(16*var(--u));font-weight:600}
.pv[data-header="logo"] .pv-brand--logo,.pv[data-header="name"] .pv-brand--name,
.pv[data-header="checkout"] .pv-brand--checkout{display:flex}
.pv-brand--logo{font-size:calc(15*var(--u));letter-spacing:.16em;text-transform:uppercase}
.pv-brand--plain{font-size:calc(16*var(--u));letter-spacing:0;text-transform:none}
.pv-mark{display:block;flex-shrink:0;width:calc(36*var(--u));height:calc(36*var(--u));border-radius:50%;background:#1f1f1f;
  box-shadow:inset 0 0 0 calc(11*var(--u)) #1f1f1f,inset 0 0 0 calc(18*var(--u)) #fff}
.pv-brand--checkout{font-size:calc(26*var(--u));font-weight:700}
.pv-bag{color:#1a1a1a;margin-left:auto}
.pv-bag .pv-ico{width:calc(22*var(--u));height:calc(22*var(--u))}
.pv-strip,.pv-pill{display:none}
/* Flow Max and Flow Medium: a centred header with the badges and the timer pill under the name. */
.pv[data-template^="flow-"] .pv-top{display:flex;flex-direction:column;align-items:center;gap:calc(12*var(--u));
  padding:calc(18*var(--u)) calc(16*var(--u)) calc(14*var(--u))}
.pv[data-template^="flow-"][data-header="none"] .pv-top{display:none}
.pv[data-template^="flow-"][data-header="none"] .pv-top--more{display:flex}
.pv[data-template^="flow-"][data-header="none"] .pv-top__row{display:none}
.pv[data-template^="flow-"] .pv-top__row{justify-content:center;width:100%;padding:0 calc(64*var(--u))}
.pv[data-template^="flow-"] .pv-brand{font-size:calc(26*var(--u));font-weight:700;letter-spacing:-.01em;text-transform:none}
.pv[data-template^="flow-"] .pv-brand--logo:not(.pv-brand--plain){font-size:calc(18*var(--u));font-weight:600;
  letter-spacing:.16em;text-transform:uppercase}
.pv[data-template^="flow-"] .pv-bag{position:absolute;right:calc(40*var(--u));top:calc(25*var(--u))}
.pv[data-template^="flow-"] .pv-strip{display:flex;flex-wrap:wrap;justify-content:center;row-gap:calc(6*var(--u));
  font-size:calc(14*var(--u));line-height:1.3;color:#6d7175}
.pv-strip>span{display:flex;align-items:center;gap:calc(7*var(--u));padding:0 calc(16*var(--u));border-left:1px solid #e3e5e8}
.pv-strip>span:first-child{border-left:0}
.pv-strip .pv-ico,.pv-pill .pv-ico{color:var(--pv-accent)}
.pv[data-template^="flow-"] .pv-pill{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:calc(4*var(--u)) calc(10*var(--u));padding:calc(8*var(--u)) calc(18*var(--u));border-radius:999px;
  border:1px solid color-mix(in srgb,var(--pv-accent) 28%,#fff);background:color-mix(in srgb,var(--pv-accent) 7%,#fff);
  font-size:calc(14*var(--u));line-height:1.4}
.pv-pill b{color:var(--pv-accent);font-size:calc(16*var(--u));font-weight:700}
.pv-pill .pv-when{color:#5f6368}
.pv-sumbar{display:none}
/* The form beside the order, 1.15 : 1, as the checkout splits its page. */
.pv-cols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:auto 1fr}
.pv-main{grid-area:1/1;display:flex;flex-direction:column;gap:calc(28*var(--u));padding:calc(32*var(--u)) calc(40*var(--u)) calc(8*var(--u))}
.pv-powered{grid-area:2/1;align-self:start;padding:calc(12*var(--u)) calc(40*var(--u)) calc(32*var(--u));text-align:center;
  font-size:calc(12*var(--u));color:#707070}
.pv-sec{display:flex;flex-direction:column;gap:calc(12*var(--u))}
.pv-h{font-size:calc(20*var(--u));line-height:1.2}
.pv-in{display:flex;align-items:center;justify-content:space-between;gap:calc(8*var(--u));height:calc(48*var(--u));
  padding:0 calc(12*var(--u));border:1px solid #dedede;border-radius:calc(12*var(--u));background:#fff;color:#707070;
  white-space:nowrap;overflow:hidden}
.pv-in small{display:block;font-size:calc(11*var(--u));line-height:1.25;color:#707070}
.pv-in--val{color:#1a1a1a}
.pv-in .pv-ico{width:calc(16*var(--u));height:calc(16*var(--u));color:#707070}
.pv-two,.pv-three{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(12*var(--u))}
.pv-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.pv-opt,.pv-method{display:flex;align-items:center;gap:calc(12*var(--u));padding:calc(14*var(--u)) calc(16*var(--u));
  border-radius:calc(12*var(--u));box-shadow:inset 0 0 0 1px var(--pv-accent);background:color-mix(in srgb,var(--pv-accent) 6%,#fff)}
.pv-opt>span,.pv-method>span:nth-child(2){flex:1 1 0;min-width:0}
.pv-method{min-height:calc(50*var(--u));padding:0 calc(14*var(--u));font-weight:600}
.pv-dot{display:block;flex-shrink:0;width:calc(18*var(--u));height:calc(18*var(--u));border-radius:50%;
  border:calc(5*var(--u)) solid var(--pv-accent);background:#fff}
/* The delivery dates under the shipping method: every page but Classic. */
.pv-arr{display:flex;align-items:center;gap:calc(10*var(--u));font-size:calc(15*var(--u));line-height:1.5;color:#545454}
.pv[data-template="classic"] .pv-arr{display:none}
.pv-arr .pv-ico{width:calc(20*var(--u));height:calc(20*var(--u));color:var(--pv-accent)}
.pv-sub{margin-top:calc(-8*var(--u));font-size:calc(13*var(--u));color:#707070}
.pv-cards{display:flex;gap:calc(4*var(--u))}
.pv-cards i{display:block;width:calc(30*var(--u));height:calc(19*var(--u));border:1px solid #d9d9d9;border-radius:calc(3*var(--u));
  background:#fff linear-gradient(#1a1f71,#1a1f71) center/58% 32% no-repeat}
.pv-cards i:nth-child(2){background-image:radial-gradient(circle at 38% 50%,#eb001b 26%,transparent 27%),
  radial-gradient(circle at 62% 50%,#f79e1b 26%,transparent 27%);background-size:100% 100%}
.pv-cards i:nth-child(3){background:#016fd0;border-color:#016fd0}
.pv-cards--card{margin-left:calc(32*var(--u))}
.pv-bill{display:flex;align-items:center;gap:calc(10*var(--u));min-height:calc(48*var(--u));padding:0 calc(14*var(--u));
  border:1px solid #dedede;border-radius:calc(12*var(--u))}
.pv-box{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:calc(20*var(--u));height:calc(20*var(--u));
  border-radius:calc(4*var(--u));background:#005bd1;color:#fff}
.pv-box .pv-ico{width:calc(14*var(--u));height:calc(14*var(--u))}
/* Whop's box: its fields and its button take the corners and the pay colour. */
.pv-whop{display:flex;flex-direction:column;gap:calc(12*var(--u));padding-top:calc(4*var(--u))}
.pv-wl{font-size:calc(13*var(--u));font-weight:500;color:#707070}
.pv-win{display:flex;align-items:center;justify-content:space-between;height:calc(46*var(--u));padding:0 calc(12*var(--u));
  border:1px solid #e1e3e5;border-radius:calc(var(--pv-radius)*var(--u));background:#fff;color:#707070}
.pv-win .pv-ico{width:calc(16*var(--u));height:calc(16*var(--u))}
.pv-pay{display:flex;align-items:center;justify-content:center;height:calc(50*var(--u));margin-top:calc(4*var(--u));
  background:var(--pv-pay);color:#fff;font-weight:600;font-size:calc(16*var(--u));border-radius:calc(var(--pv-radius)*var(--u))}
/* The button's words (Button text, 2026-10-22): all three are drawn, the
   chosen one shows, by #preview's data-pay-button; Pay now when it has none. */
.pv-pay__w{display:none}
.pv:not([data-pay-button]) .pv-pay__w[data-pb="pay_now"],.pv[data-pay-button="pay_now"] .pv-pay__w[data-pb="pay_now"],
.pv[data-pay-button="buy_now"] .pv-pay__w[data-pb="buy_now"],
.pv[data-pay-button="complete_order"] .pv-pay__w[data-pb="complete_order"]{display:inline}
.pv-trust{display:none;flex-wrap:wrap;gap:calc(8*var(--u)) calc(24*var(--u));font-size:calc(13*var(--u));color:#6d7175}
.pv-trust>span{display:flex;align-items:center;gap:calc(8*var(--u))}
/* Assured Max and Assured Medium: the payment in its own white panel, the trust words under it. */
.pv[data-template^="assured-"] .pv-trust{display:flex}
.pv[data-template^="assured-"] .pv-paysec{padding:calc(20*var(--u)) calc(20*var(--u)) calc(22*var(--u));border:1px solid #e1e1e1;
  border-radius:calc(14*var(--u));background:#fff;box-shadow:0 calc(2*var(--u)) calc(14*var(--u)) rgba(0,0,0,.06)}
/* The order column, and what each layout puts under the order. */
.pv-side{grid-area:1/2/3/3;display:flex;flex-direction:column;gap:calc(14*var(--u));padding:calc(32*var(--u));
  background:#f5f5f5;border-left:1px solid #e1e3e5}
.pv[data-template^="flow-"] .pv-side{background:#f6f7f9}
.pv[data-template^="assured-"] .pv-side{background:#f3f4f6}
.pv-order{display:flex;flex-direction:column;gap:calc(10*var(--u))}
.pv[data-template^="flow-"] .pv-order{padding:calc(20*var(--u));border:1px solid #e3e5e8;border-radius:calc(14*var(--u));background:#fff}
.pv-item{display:flex;align-items:center;gap:calc(14*var(--u));margin-bottom:calc(10*var(--u))}
.pv-thumb{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:calc(64*var(--u));
  height:calc(64*var(--u));border:1px solid #dedede;border-radius:calc(8*var(--u));background:#efebe4}
.pv-thumb i{display:block;width:calc(40*var(--u));height:calc(24*var(--u));border-radius:calc(3*var(--u));background:#cdbfa8}
.pv-thumb b{position:absolute;top:calc(-8*var(--u));right:calc(-8*var(--u));display:flex;align-items:center;justify-content:center;
  min-width:calc(20*var(--u));height:calc(20*var(--u));border-radius:999px;background:#666;color:#fff;font-size:calc(11*var(--u))}
.pv-item__t{display:flex;flex-direction:column;flex:1 1 0;min-width:0;font-weight:500}
.pv-item__t small,.pv-line--total small{font-size:calc(12*var(--u));font-weight:400;color:#666}
/* The discount code field under the lines, as the checkout draws it; it
   follows the switch as it is flipped. */
.pv-disc{display:flex;gap:calc(10*var(--u));margin-bottom:calc(10*var(--u))}
.pv-disc--off{display:none}
.pv:has(#discount_field:checked) .pv-disc{display:flex}
.pv:has(#discount_field:not(:checked)) .pv-disc{display:none}
.pv-disc__in{flex:1 1 0;min-width:0}
.pv-disc__go{display:flex;align-items:center;justify-content:center;flex-shrink:0;height:calc(48*var(--u));
  padding:0 calc(18*var(--u));border:1px solid #dedede;border-radius:calc(12*var(--u));background:#f5f5f5;
  color:#707070;font-weight:600}
.pv-line{display:flex;justify-content:space-between;gap:calc(12*var(--u))}
.pv-line--total{align-items:baseline;padding-top:calc(6*var(--u));font-size:calc(18*var(--u));font-weight:600}
.pv-line--total small{margin-right:calc(6*var(--u))}
.pv-line--total b{font-size:calc(20*var(--u))}
.pv-flow,.pv-assured{display:none;flex-direction:column;gap:calc(14*var(--u))}
.pv[data-template^="flow-"] .pv-flow,.pv[data-template^="assured-"] .pv-assured{display:flex}
/* Flow Medium: one card of proof, no "What you can count on"; the
   questions are the Max pages' alone; the meter is the Flows', the points
   Flow Max's (2026-10-12). */
.pv[data-template="flow-medium"] .pv-count,.pv-faq,.pv-meter,.pv-points{display:none}
.pv[data-template$="-max"] .pv-faq{display:flex}
.pv[data-template^="flow-"] .pv-meter{display:flex}
.pv[data-template="flow-max"] .pv-points{display:block}
.pv-meter{flex-direction:column;gap:calc(8*var(--u));margin-bottom:calc(12*var(--u));font-size:calc(14*var(--u))}
.pv-meter i{display:block;height:calc(6*var(--u));border-radius:999px;background:#e8eaed;overflow:hidden}
.pv-meter b{display:block;height:100%;background:var(--pv-accent)}
.pv-points{padding-top:calc(4*var(--u));font-size:calc(14*var(--u));color:#545454;text-align:right}
.pv-score{display:block;font-size:calc(15*var(--u));line-height:1.4}
.pv-score b{color:#1a1a1a}
.pv-q{display:flex;align-items:center;justify-content:space-between;gap:calc(10*var(--u));
  padding:calc(10*var(--u)) 0;border-top:1px solid #eceef0;font-size:calc(15*var(--u))}
.pv-q .pv-ico{width:calc(16*var(--u));height:calc(16*var(--u));color:#6d7175}
.pv-card{display:flex;flex-direction:column;gap:calc(12*var(--u));padding:calc(18*var(--u)) calc(20*var(--u));
  border:1px solid #e3e5e8;border-radius:calc(14*var(--u));background:#fff}
.pv-card__t{font-size:calc(16*var(--u));line-height:1.3}
.pv-row{display:flex;align-items:flex-start;gap:calc(12*var(--u));font-size:calc(15*var(--u));line-height:1.5}
.pv-row .pv-ico{width:calc(20*var(--u));height:calc(20*var(--u));margin-top:calc(2*var(--u));color:var(--pv-accent)}
.pv-row b,.pv-row small{display:block}
.pv-row small{font-size:calc(14*var(--u));color:#545454}
.pv-quote{display:block;font-size:calc(16*var(--u));line-height:1.55}
.pv-by{display:block;margin-top:calc(8*var(--u));font-size:calc(14*var(--u));color:#545454}
.pv-assured .pv-card{gap:calc(14*var(--u));padding:calc(18*var(--u))}
.pv-rev{display:block;padding:calc(4*var(--u)) 0 calc(4*var(--u)) calc(14*var(--u));border-left:calc(3*var(--u)) solid var(--pv-accent)}
.pv-badges{display:flex;flex-direction:column;gap:calc(14*var(--u))}
/* Narrow: the phone checkout -- the order folded into a bar, the extras
   under the payment box, as checkout_blocks puts them on a phone. */
@container (max-width:479px){
  .pv-page{--u:min(1px,calc(100cqw/364))}
  .pv-top{padding:calc(16*var(--u)) calc(20*var(--u))}
  .pv[data-template^="flow-"] .pv-top{padding:calc(16*var(--u)) calc(16*var(--u)) calc(12*var(--u));gap:calc(10*var(--u))}
  .pv[data-template^="flow-"] .pv-top__row{padding:0 calc(40*var(--u))}
  .pv[data-template^="flow-"] .pv-brand{font-size:calc(22*var(--u))}
  .pv[data-template^="flow-"] .pv-bag{right:calc(16*var(--u));top:calc(21*var(--u))}
  .pv[data-template^="flow-"] .pv-strip{gap:calc(6*var(--u)) calc(18*var(--u))}
  .pv-strip>span{padding:0;border-left:0}
  .pv[data-template^="flow-"] .pv-pill{display:flex;width:calc(100% - 32*var(--u))}
  .pv-sumbar{display:flex;align-items:center;justify-content:space-between;gap:calc(12*var(--u));
    padding:calc(16*var(--u)) calc(20*var(--u));background:#f5f5f5;border-bottom:1px solid #e1e3e5}
  .pv-sumbar>span{display:flex;align-items:center;gap:calc(4*var(--u));color:var(--pv-accent)}
  .pv-sumbar b{font-size:calc(18*var(--u))}
  .pv-cols{display:flex;flex-direction:column}
  .pv-main{padding:calc(24*var(--u)) calc(20*var(--u)) 0}
  .pv-side{padding:0 calc(20*var(--u));background:none!important;border-left:0}
  .pv-order{display:none!important}
  .pv-flow,.pv-assured{margin-top:calc(20*var(--u))}
  .pv-powered{padding:calc(16*var(--u)) calc(20*var(--u)) calc(24*var(--u))}
  .pv[data-template^="assured-"] .pv-paysec{padding:calc(16*var(--u)) calc(14*var(--u)) calc(18*var(--u))}
}
@media (max-width:1023px){
  .cd{grid-template-columns:minmax(0,1fr)}
  .cd-side{display:none}
  .cd-tops,.cd-badges{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cd-bar{margin-left:calc(-1*var(--gutter));margin-right:calc(-1*var(--gutter));padding:16px var(--gutter)}
  .cd-sheet:popover-open{position:fixed;inset:12px 0 0;width:auto;height:auto;max-width:none;max-height:none;margin:0;
    padding:0;display:flex;flex-direction:column;overflow:hidden;border:0;border-radius:var(--r-panel) var(--r-panel) 0 0;
    background:var(--card);color:var(--ink);box-shadow:var(--shadow-3)}
  .cd-sheet::backdrop{background:rgba(17,24,39,.4)}
  body:has(.cd-sheet:popover-open){overflow:hidden}
}
@supports selector(:popover-open){@media (max-width:1023px){.cd-bar__pv{display:inline-flex}}}
@media (min-width:1024px){.cd-sheet{display:none}}
@media (max-width:639px){
  .cd-tops,.cd-badges{grid-template-columns:minmax(0,1fr)}
  .cd-bar{flex-wrap:wrap}
  .cd-bar__say{width:100%}
  .cd-bar__say:not(.is-bad):not(.is-ok){display:none}
  html:has(.cd-bar){scroll-padding-bottom:140px}
  .cd-two{grid-template-columns:minmax(0,1fr)}
  .cd-arr__head,.cd-arr__row{grid-template-columns:minmax(0,1fr) 72px 72px}
}
/* Checkout page (account_views.page_picker, 2026-10-12): the five pages as
   cards, two to a row on a wide screen, one on a phone. Each: a sketch on a
   grey tile, the name and its tag, its line, what it shows, then Use this
   page (a small form) or In use, and See it live. */
.cp{display:flex;flex-direction:column;gap:20px;max-width:1040px}
.cp-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.cp-card{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--card);overflow:hidden}
.cp-card.is-inuse{border-color:var(--green-line);box-shadow:0 0 0 1px var(--green-line)}
.cp-pic{display:flex;align-items:center;justify-content:center;padding:20px;background:var(--paper-2);
  border-bottom:1px solid var(--line)}
.cp-pic .cd-sk{zoom:2}
.cp-body{display:flex;flex-direction:column;gap:12px;flex:1 1 auto;padding:20px}
.cp-top{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.cp-name{font-size:20px;font-weight:600;line-height:1.3;color:var(--ink)}
.cp-tag{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:var(--r-pill);
  font-size:14px;font-weight:500;line-height:1.4;background:var(--paper-3);color:var(--neutral)}
.cp-tag--max{background:var(--blue-tint);color:var(--blue)}
.cp-tag--classic{background:var(--green-tint);color:var(--ok)}
.cp-line{font-size:16px;line-height:1.55;color:var(--ink-2)}
.cp-shows{display:flex;flex-direction:column;gap:6px}
.cp-shows>li{position:relative;padding-left:24px;font-size:14px;line-height:1.5;color:var(--ink)}
.cp-shows>li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;background:var(--ink-3);
  -webkit-mask:var(--i-ok) center/contain no-repeat;mask:var(--i-ok) center/contain no-repeat}
.cp-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 16px;margin-top:auto;
  padding-top:16px;border-top:1px solid var(--line-2)}
.cp-use{margin:0}
.cp-inuse{display:inline-flex;align-items:center;gap:8px;min-height:52px;font-size:16px;font-weight:600;color:var(--ok)}
.cp-live{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:500}
.cp-note{font-size:14px;line-height:1.5;color:var(--ink-2)}
@media (max-width:899px){.cp-list{grid-template-columns:minmax(0,1fr)}}
@media (max-width:1023px){
  .cd,.nw,.wa,.se,.ac-grid,.st-first{grid-template-columns:minmax(0,1fr)}
  /* One column: what to have ready comes before the steps, not after them. */
  .wa>.cs-card{order:-1}
  .cd-side{position:static}
  .bl-buy{justify-content:flex-start}
}
@media (max-width:639px){
  .st-row{flex-direction:column;gap:16px;padding:20px}
  .st-row__go{width:100%;justify-content:flex-start;flex-wrap:wrap}
  .st-row__go>.cs-btn,.st-row__go>form{flex:1}
  .st-row__go>form .cs-btn{width:100%}
  .st-cont .cs-btn,.st-head>.cs-btn{width:100%}
}

/* ---- shells ------------------------------------------------------------ */
/* Merchant app: a 232px account menu on the left (logo; Stores and the store
   sections -- Setup, Checkout design, Tracking setup, Store settings; then
   Partners, Billing, Account; Help at its foot), a white bar on top with the
   store switcher, content up to 1120px. Under 1024px the menu folds into the bar. */
.cs-app{display:flex;align-items:stretch;min-height:100vh}
.cs-siderail{position:sticky;top:0;height:100vh;width:232px;flex-shrink:0;background:var(--card);
  border-right:1px solid var(--line);padding:0 12px;display:flex;flex-direction:column;gap:4px;overflow-y:auto}
.cs-siderail__brand{height:64px;flex-shrink:0;display:flex;align-items:center;gap:10px;padding:0 8px;margin-bottom:12px;
  text-decoration:none;border-radius:var(--r-field)}
.cs-siderail__item{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:var(--r-field);
  text-decoration:none;font-size:16px;font-weight:400;color:var(--ink-2)}
.cs-siderail__item .cs-icon{width:20px;height:20px}
.cs-siderail__item:hover{background:var(--paper-2);color:var(--ink)}
.cs-siderail__item[aria-current]{background:var(--paper-2);color:var(--ink);font-weight:600}
.cs-siderail__foot{margin-top:auto;border-top:1px solid var(--line);padding:12px 0;display:flex;flex-direction:column;gap:4px}
.cs-app__main{flex:1 1 0;min-width:0;display:flex;flex-direction:column}
.cs-topbar{position:sticky;top:0;z-index:20;height:64px;padding:0 var(--gutter);background:var(--card);
  border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0}
.cs-topbar__right{display:flex;align-items:center;gap:12px;font-size:15px}
.cs-topbar__right a{color:var(--ink-2);min-height:44px;display:inline-flex;align-items:center}
.cs-topbar__brand{display:none}
.cs-topbar__left,.cs-topbar__switch{min-width:0}
.cs-topbar__div{display:none;width:1px;height:20px;background:var(--line);flex-shrink:0}
.cs-userchip{display:flex;align-items:center;gap:8px;min-height:44px;padding:4px 12px 4px 4px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--card);font-size:14px;font-weight:500;color:var(--ink);max-width:300px}
.cs-userchip span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-userchip__ini{width:32px;height:32px;border-radius:50%;background:var(--paper-3);color:var(--neutral);font-size:14px;
  font-weight:500;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cs-content{padding:40px var(--gutter) 96px;display:flex;flex-direction:column;gap:24px;width:100%;
  max-width:calc(var(--frame) + 2*var(--gutter));margin:0 auto}
.cs-content--narrow{max-width:calc(var(--frame) + 2*var(--gutter))}

/* Menus built on <details>: the store switcher, "more", the phone menu. */
.cs-menu{position:relative}
.cs-menu>summary{list-style:none;cursor:pointer;border-radius:var(--r-field)}
.cs-menu>summary::-webkit-details-marker{display:none}
.cs-menu__btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 12px;border-radius:var(--r-field);
  border:1px solid var(--line);background:var(--card);font-size:16px;font-weight:600;color:var(--ink);max-width:320px}
.cs-menu__btn .cs-icon{width:16px;height:16px;color:var(--ink-2)}
.cs-menu>summary:hover .cs-menu__btn{background:var(--paper-2)}
.cs-menu__btn>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-menu__btn--round{width:44px;height:44px;padding:0;justify-content:center;border-radius:50%;border-color:var(--line);background:var(--card)}
.cs-menu__btn--round .cs-icon{width:20px;height:20px;color:var(--ink)}
.cs-menu>summary:hover .cs-menu__btn--round,.cs-menu[open] .cs-menu__btn--round{background:var(--paper-2)}
.cs-menu__list{position:absolute;z-index:30;top:calc(100% + 8px);left:0;min-width:288px;max-width:calc(100vw - 32px);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-3);padding:6px;
  display:flex;flex-direction:column;gap:2px}
.cs-menu--right .cs-menu__list{left:auto;right:0}
.cs-menu__list a,.cs-menu__list button{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 10px;border-radius:var(--r-field);
  text-decoration:none;font-size:16px;font-weight:400;color:var(--ink);border:0;background:transparent;width:100%;
  text-align:left;cursor:pointer}
.cs-menu__list .cs-icon{width:18px;height:18px;color:var(--ink-2)}
.cs-menu__list a:hover,.cs-menu__list button:hover{background:var(--paper-2);color:var(--ink)}
.cs-menu__list a[aria-current]{background:var(--paper-2);font-weight:600}
.cs-menu__list a.cs-menu__danger{background:var(--red-tint);color:var(--red);font-weight:600;margin-top:4px}
.cs-menu__list a.cs-menu__danger:hover{background:var(--red-strong);color:#fff}
.cs-menu__sep{height:1px;background:var(--line);margin:6px 4px}

/* Store header: back link, name, state, address, tabs. */
.cs-storehead{display:flex;flex-direction:column;gap:20px}
.cs-storehead__top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cs-storehead__left{display:flex;flex-direction:column;min-width:0;align-items:flex-start}
.cs-storehead__left>.cs-back{margin-left:-2px}
.cs-storehead__name{margin-top:4px;display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}
.cs-storehead__host{margin-top:4px;display:flex;flex-wrap:wrap;align-items:center;column-gap:4px}
.cs-storehead__addr{color:var(--ink-2);word-break:break-all}
.cs-storehead__copy{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 8px;border:0;
  border-radius:var(--r-field);background:transparent;font-size:14px;font-weight:500;color:var(--ink);cursor:pointer}
.cs-storehead__copy:hover{background:var(--paper-2)}
.cs-storehead__copy .cs-icon{width:16px;height:16px;color:var(--ink-3)}
.cs-storehead__copy.is-copied .cs-copy__done{color:var(--ok)}
html:not(.cs-js) .cs-storehead__copy{display:none}

/* The left menu's two groups (2026-10-11): Stores and what is set for each
   store, then the account's own places, under a rule. */
.cs-siderail__sep{height:1px;flex-shrink:0;background:var(--line);margin:8px 0}
/* "Store: <name>" in the head of Tracking and Checkout design: the account's
   stores, each to the same tab. At the head's right, wrapped or not, so its
   list (right-aligned) never opens off the screen. */
.cs-storepick{margin-left:auto;min-width:0;max-width:100%}
.cs-storepick__k{flex-shrink:0;font-weight:400;color:var(--ink-2)}
/* Choose a store (/setup, /design, /tracking, /store-settings when the store
   is not known): one row per store, the whole row the link; or, with no
   store yet, the empty state with the way to add one. */
.cs-pick,.cs-pick__empty{width:100%;max-width:720px}
.cs-pick{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.cs-pick li+li{border-top:1px solid var(--line-2)}
.cs-pick__row{display:flex;align-items:center;gap:16px;min-height:76px;padding:14px 20px;text-decoration:none;
  color:var(--ink)}
.cs-pick__row:hover{background:var(--paper-2);color:var(--ink)}
.cs-pick__row:focus-visible{outline-offset:-3px;border-radius:var(--r-card)}
.cs-pick__row>.cs-icon{color:var(--ink-3)}
.cs-pick__id{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.cs-pick__title{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px}
.cs-pick__name{font-size:17px;font-weight:600;line-height:1.45;overflow-wrap:anywhere}
.cs-pick__host{color:var(--ink-2)}
.cs-pick__icon{width:48px;height:48px;border-radius:50%;background:var(--paper-2);color:var(--ink-2);display:flex;
  align-items:center;justify-content:center}
@media (max-width:639px){
  /* On a phone the store menu is a row of its own, as wide as the page, and so is its list. */
  .cs-storehead__top{row-gap:16px}
  .cs-storepick{flex:1 1 100%}
  .cs-storepick .cs-menu__btn{display:flex;width:100%;max-width:none}
  .cs-storepick .cs-menu__btn>.cs-icon:last-child{margin-left:auto}
  .cs-storepick .cs-menu__list{left:0;right:0;min-width:0}
  .cs-pick__row{padding:14px 16px}
}

/* Operator: deliberately dark side menu. */
.cs-op{display:flex;min-height:100vh}
.cs-op__side{width:232px;flex-shrink:0;background:var(--brand-ink);color:var(--on-ink);padding:20px 12px;display:flex;
  flex-direction:column;gap:24px}
.cs-op__nav{display:flex;flex-direction:column;gap:4px}
.cs-op__nav a{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:var(--r-field);
  color:var(--on-ink-2);text-decoration:none;font-size:15px;font-weight:500}
.cs-op__nav a .cs-icon{width:18px;height:18px}
.cs-op__nav a:hover{background:rgba(255,255,255,.05);color:var(--on-ink)}
.cs-op__nav a[aria-current]{background:rgba(255,255,255,.1);color:var(--on-ink);font-weight:600}
.cs-op__nav a:focus-visible,.cs-op__side a:focus-visible{outline-color:var(--mint)}
.cs-op__main{flex:1 1 0;min-width:0;padding:32px var(--gutter) 80px}
.cs-op__inner{max-width:1120px;margin:0 auto;display:flex;flex-direction:column;gap:24px}

/* Bare: one centred card. */
.cs-bare{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:24px 16px 64px;gap:32px}
.cs-bare__card{width:100%;max-width:540px}
.cs-bare__top,.cs-bare__card--wide{width:100%;max-width:1120px}

/* ---- operator portal (PLAN.md 7.4) -------------------------------------- */
/* admin.checkoutswitch.com/app, the owner's portal, drawn to the v3 design
   (docs/redesign/session-windows/designs/admin-*: OperatorShell and the dense
   tables). Scoped under body.op so nothing here reaches a merchant page. The
   rail is deliberately dark, so the portal is never taken for the merchant
   app; under 1024px it opens from the Menu button (a popover: no script).
   Sizes: body 16px, card text 15px, hints 14px, inputs 48px, buttons 44px
   (36px in table rows, 48px for a page action), page titles 28px. Tables are
   dense (SYSTEM.md section 11): 14px text, 13px heads that stay in view, 40px
   rows; past 50 rows a list shows "Show all". Nothing is under 14px but the
   dense tables' heads, figures and badges. Tests pin the renderers' inner
   markup (<td class=ok>, <button class="lite small">), so much of the look
   comes from where a tag sits rather than from a class on it. */
body.op{--op-tri:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
  margin:0;min-height:100vh;background:var(--paper);color:var(--ink);font:16px/1.6 var(--sans)}
body.op a{color:var(--green);text-underline-offset:3px}
body.op a:hover{color:var(--green-hover)}
body.op :focus-visible{outline:2px solid var(--ink);outline-offset:2px}
body.op h1,body.op h2,body.op h3{font-family:var(--sans);color:var(--ink);text-wrap:balance}
body.op h1{margin:0;font-size:28px;line-height:1.25;font-weight:650;letter-spacing:-.015em}
body.op h2{margin:24px 0 8px;font-size:17px;line-height:1.45;font-weight:600}
body.op h3{margin:20px 0 8px;font-size:15px;line-height:1.5;font-weight:600}
body.op p{margin:12px 0}
body.op b,body.op strong{font-weight:600}
body.op ul,body.op ol{margin:8px 0;padding-left:1.4rem;list-style:disc}
body.op ol{list-style:decimal}
body.op li{margin:4px 0}
body.op code{font-family:var(--mono);font-size:14px;background:var(--paper-2);border-radius:4px;padding:1px 5px;overflow-wrap:anywhere}
body.op pre{margin:12px 0;padding:16px;border-radius:var(--r-field);background:var(--brand-ink);color:#E4EAF1;font:14px/1.55 var(--mono);overflow:auto;max-height:32rem;white-space:pre-wrap;overflow-wrap:anywhere}
body.op pre.steps{background:var(--paper-2);color:var(--ink);border:1px solid var(--line);font:15px/1.6 var(--sans);max-height:none}
body.op pre.code{white-space:pre;background:var(--paper-2);color:var(--ink);border:1px solid var(--line);max-height:18rem}
body.op details>summary{cursor:pointer}
body.op .muted{color:var(--ink-2)}
body.op p.muted,body.op ol.muted,body.op ul.muted{font-size:14px;line-height:1.6}
body.op .ok{color:var(--ok)}
body.op .bad{color:var(--red);font-weight:500}
body.op .warn{color:var(--amber);font-weight:500}
body.op .op-mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
body.op .cs-skip:focus{color:var(--on-ink)}

/* Alerts. A finding in a box: its tone's ground and edge, its icon, the words
   in ink. In a card's own text (Needs you, Setup) the same classes are a line
   in the tone's colour instead, the way the design draws "Could not be read". */
body.op p.ok,body.op p.bad,body.op p.warn,body.op p.err,body.op p.stop{--i:var(--i-info);position:relative;margin:12px 0;
  padding:12px 16px 12px 44px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper-2);
  font-size:15px;line-height:1.6;font-weight:400;color:var(--ink)}
body.op p.ok::before,body.op p.bad::before,body.op p.warn::before,body.op p.err::before,body.op p.stop::before{content:"";
  position:absolute;left:16px;top:14px;width:18px;height:18px;background:currentColor;
  -webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
body.op p.ok{--i:var(--i-ok);background:var(--ok-tint);border-color:var(--green-line)}
body.op p.ok::before{background:var(--ok)}
body.op p.bad,body.op p.err,body.op p.stop{--i:var(--i-bad);background:var(--red-tint);border-color:var(--red-line)}
body.op p.bad::before,body.op p.err::before,body.op p.stop::before{background:var(--red)}
body.op p.warn{--i:var(--i-wait);background:var(--amber-tint);border-color:var(--amber-line)}
body.op p.warn::before{background:var(--amber)}
body.op p.ok b,body.op p.bad b,body.op p.warn b,body.op p.err b,body.op p.stop b{font-weight:600}
body.op .op-say p.ok,body.op .op-say p.bad,body.op .op-say p.warn,body.op .op-say p.err{padding:0 0 0 26px;border:0;background:none;
  border-radius:0;margin:0}
body.op .op-say p.ok::before,body.op .op-say p.bad::before,body.op .op-say p.warn::before,body.op .op-say p.err::before{left:0;top:4px;width:16px;height:16px}
body.op .op-say p.bad,body.op .op-say p.err{--i:var(--op-tri);color:var(--red)}
body.op .op-say p.ok{color:var(--ok)}
body.op .op-say p.warn{color:var(--amber)}
body.op .op-say p.muted,body.op .op-say>p:not([class]){margin:0;font-size:15px;line-height:1.6}
body.op .op-ncard .op-say p.ok{padding-left:0;color:var(--ink-2)}
body.op .op-ncard .op-say p.ok::before{display:none}
body.op .op-ncard:not(.op-unread) .op-say p.bad{padding-left:0;color:var(--ink)}
body.op .op-ncard:not(.op-unread) .op-say p.bad::before{display:none}
body.op .op-ncard:not(.op-unread) .op-say p.bad b{font-weight:500;color:var(--red)}
body.op .op-say>*+*{margin-top:12px}
body.op .op-alert{display:flex;flex-direction:column;gap:6px;padding:16px 16px 16px 48px;position:relative;
  border:1px solid var(--red-line);border-radius:var(--r-card);background:var(--red-tint)}
body.op .op-alert::before{content:"";position:absolute;left:16px;top:18px;width:20px;height:20px;background:var(--red);
  -webkit-mask:var(--i-bad) center/contain no-repeat;mask:var(--i-bad) center/contain no-repeat}
body.op .op-alert>*{margin:0}
body.op .op-alert p.bad{margin:0;padding:0;border:0;background:none;font-size:17px;font-weight:600;color:var(--ink)}
body.op .op-alert p.bad::before{display:none}
body.op .op-alert ul,body.op .op-alert ol{margin:0;color:var(--ink-2);list-style:decimal}
body.op .op-alert p.muted{margin:4px 0 0}

/* ---- shell ---------------------------------------------------------------- */
body.op .app{display:flex;align-items:stretch;min-height:100vh}
body.op .side{position:sticky;inset:0 auto auto 0;display:flex;flex-direction:column;flex-shrink:0;width:232px;height:100vh;
  margin:0;padding:0;border:0;overflow-y:auto;background:var(--brand-ink);color:#fff}
body.op .side-logo{display:flex;align-items:center;gap:10px;padding:20px 20px 24px}
body.op .logo{display:inline-flex;align-items:center;gap:10px;min-width:0;max-width:100%;color:var(--ink);text-decoration:none;
  border-radius:var(--r-field)}
body.op .logo:hover{color:inherit}
body.op .op-tile{display:block;width:32px;height:32px;flex-shrink:0}
body.op .op-brand{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
body.op .logo .word{font-family:var(--sans);font-size:16px;line-height:20px;font-weight:600;letter-spacing:-.01em;color:inherit}
body.op .side .logo{color:#fff}
body.op .op-tag{margin-top:4px;padding:1px 6px;border:1px solid rgba(255,255,255,.25);border-radius:var(--r-chip);font-size:14px;
  line-height:18px;font-weight:500;color:rgba(255,255,255,.85)}
body.op .op-close{display:none}
body.op .nav{flex:1 1 auto;display:flex;flex-direction:column;gap:4px;padding:0 12px}
body.op .nav a{position:relative;display:flex;align-items:center;gap:12px;height:44px;padding:0 12px;border-radius:var(--r-field);
  font-size:15px;font-weight:500;color:rgba(255,255,255,.7);text-decoration:none;white-space:nowrap}
body.op .nav a:hover{background:rgba(255,255,255,.05);color:#fff}
body.op .nav a.on{background:rgba(255,255,255,.1);color:#fff}
body.op .nav a.on::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--mint)}
body.op .nav svg{width:18px;height:18px;flex-shrink:0}
body.op .side :focus-visible{outline-color:#fff}
body.op .side-foot{margin:0;padding:16px 16px 20px 20px;font-size:14px;line-height:20px;color:rgba(255,255,255,.62)}
body.op .side-foot .op-mono{font-family:var(--mono);letter-spacing:-.03em;white-space:nowrap}
body.op .app-body{flex:1 1 0;min-width:0;display:flex;flex-direction:column}
body.op .app-head{display:flex;align-items:center;gap:12px;width:100%;max-width:1280px;margin:0 auto;padding:16px 32px}
body.op .op-menubtn{display:none}
body.op .crumb{flex:1 1 auto;min-width:0}
body.op .crumb ol{display:flex;align-items:center;gap:6px;min-width:0;margin:0;padding:0;list-style:none;font-size:14px;color:var(--ink-2)}
body.op .crumb li{display:flex;align-items:center;gap:6px;min-width:0;margin:0;white-space:nowrap}
body.op .crumb li svg{width:14px;height:14px;flex-shrink:0}
body.op .crumb a{color:inherit;text-decoration:none}
body.op .crumb a:hover{color:var(--ink);text-decoration:underline}
body.op .crumb [aria-current]{overflow:hidden;text-overflow:ellipsis;font-weight:500;color:var(--ink)}
body.op .head-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
body.op .chip{display:flex;align-items:center;gap:8px;height:44px;padding:0 12px 0 6px;border:1px solid var(--line);
  border-radius:999px;background:var(--card);font-size:14px;font-weight:500;color:var(--ink)}
body.op .avatar{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;
  background:var(--brand-ink);color:#fff;font-size:14px;font-weight:600}
body.op .app-head form{margin:0}
body.op .app-head form button{height:44px;padding:0 16px;border:0;background:transparent;color:var(--ink);font-size:15px}
body.op .app-head form button:hover{background:transparent;text-decoration:underline;text-underline-offset:4px}
body.op .app-main{display:flex;flex-direction:column;gap:24px;width:100%;max-width:1280px;margin:0 auto;padding:8px 32px 112px}
body.op .app-main>*{margin-top:0;margin-bottom:0}
body.op .op-stack{display:flex;flex-direction:column;gap:24px}
body.op .op-stack--32{gap:32px}
body.op .op-stack--20{gap:20px}
body.op .op-gap12{display:flex;flex-direction:column;gap:12px}
body.op .op-gap12>*{margin:0}
body.op .op-stack>*{margin:0}
body.op [id]{scroll-margin-top:16px}

/* The one-card pages: sign-in, the merchant's link pages, the refusal. */
body.op .bare{display:flex;flex-direction:column;min-height:100vh}
body.op .bare-top{display:flex;justify-content:flex-end;align-items:center;padding:12px 24px}
body.op .bare-top .help{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:500;color:var(--ink-2);text-decoration:none}
body.op .bare-top .help:hover{color:var(--ink);text-decoration:underline}
body.op .bare-main{flex:1 1 auto;display:flex;align-items:center;justify-content:center;padding:0 16px 96px}
body.op .bare-main.top{align-items:flex-start;padding-top:8px}
body.op .bare-card{width:100%;max-width:420px;padding:32px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--card);
  overflow-wrap:break-word}
body.op .bare-card.wide{max-width:820px}
body.op .bare-card>:last-child{margin-bottom:0}
body.op .op-cardbrand{display:flex;margin-bottom:24px}
body.op .op-cardbrand+*{margin-top:0}
body.op .bare-card h2{margin:28px 0 8px;font-size:20px;line-height:1.4;letter-spacing:-.01em}
body.op .op-cardbrand+h2,body.op .bare-card>h2:first-child{margin-top:0;font-size:28px;line-height:1.25;font-weight:650;letter-spacing:-.015em}
body.op .bare-card p{font-size:16px;line-height:1.6}
body.op .bare-card p.muted{font-size:14px}
body.op .op-eyebrow{margin:0;font-size:14px;font-weight:500;line-height:1.5;color:var(--ink-2)}
body.op .op-lead{margin:6px 0 0;font-size:16px;line-height:1.5;color:var(--ink-2)}
body.op form.login{display:flex;flex-direction:column;gap:16px;margin:24px 0 0}
body.op form.login .cs-field__ctl input{height:100%;border:0;box-shadow:none;border-radius:0}
body.op form.login button[type=submit],body.op form.login>button{width:100%;height:48px;font-size:16px}
body.op .cs-field__reveal{width:44px;height:100%;padding:0;border:0;border-radius:0;background:transparent;color:var(--ink-2)}
body.op .cs-field__reveal:hover{background:transparent;color:var(--ink)}
body.op .cs-field__error svg{width:16px;height:16px;margin-top:3px;flex-shrink:0}
body.op .cs-field__error p.err{margin:0;padding:0;border:0;background:none;font-size:14px;line-height:1.5;color:var(--red)}
body.op .cs-field__error p.err::before{display:none}
html:not(.cs-js) body.op .op-reveal{display:none}

/* The confirm step and the delete pages: a focused page, the brand on top,
   one card that says what will happen and repeats the verb on its button. */
body.op .op-focus{display:flex;flex-direction:column;min-height:100vh}
body.op .op-focus__top{display:flex;align-items:center;padding:16px 24px}
body.op .op-focus__top .logo{gap:10px}
body.op .op-focus__top .op-brand{flex-direction:row;align-items:center;gap:10px}
body.op .op-focus__top .word{font-size:15px}
body.op .op-focus__top .op-tag{margin:0;border-color:var(--line);color:var(--ink-2)}
body.op .op-focus__main{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px 16px 96px}
body.op .op-focus__main>*{width:100%;max-width:560px;margin:0}
body.op .op-focus__main>.back{align-self:center}
body.op .op-confirm{padding:32px;border:1px solid var(--red-line);border-radius:var(--r-card);background:var(--card)}
body.op .op-confirm.calm{border-color:var(--line)}
body.op .op-confirm .sec-label{display:none}
body.op .op-confirm h1{margin:0;overflow-wrap:anywhere}
body.op .op-confirm>p{margin:12px 0 0;font-size:16px;line-height:1.75}
body.op .op-confirm>p.bad,body.op .op-confirm>p.warn{font-size:15px}
body.op .op-confirm form{margin:0}
body.op .op-confirm .op-type{display:flex;flex-direction:column;gap:6px;margin:20px 0 0}
body.op .op-confirm .op-type label{font-size:14px;font-weight:500}
body.op .op-confirm .op-type input{width:100%;font-family:var(--mono)}
body.op .op-confirm .acts{display:flex;justify-content:flex-end;gap:8px;margin:24px 0 0}
body.op .op-confirm .acts .btn,body.op .op-confirm .acts button{height:48px;padding:0 20px;font-size:16px}
body.op .op-confirm .acts form{display:flex}

/* ---- parts ------------------------------------------------------------------ */
body.op button,body.op .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;margin:0;padding:0 16px;
  border:1px solid var(--line-strong);border-radius:var(--r-field);background:var(--card);color:var(--ink);font:500 15px/1 var(--sans);
  text-decoration:none;white-space:nowrap;cursor:pointer;vertical-align:middle;transition:background-color .12s,border-color .12s}
body.op button:hover,body.op .btn:hover{background:var(--paper-2);color:var(--ink)}
body.op .btn,body.op button.pri{background:var(--green);border-color:var(--green);color:#fff}
body.op .btn:hover,body.op button.pri:hover{background:var(--green-hover);border-color:var(--green-hover);color:#fff}
body.op .btn.lite,body.op button.lite{background:var(--card);border-color:var(--line-strong);color:var(--ink)}
body.op .btn.lite:hover,body.op button.lite:hover{background:var(--paper-2);color:var(--ink)}
body.op button.ink{background:var(--brand-ink);border-color:var(--brand-ink);color:#fff}
body.op button.danger-fill{background:var(--red);border-color:var(--red);color:#fff}
body.op button.danger-fill:hover{background:#912018;border-color:#912018;color:#fff}
body.op button.op-danger,body.op .danger button{border-color:var(--red-line);color:var(--red)}
body.op button.op-danger:hover,body.op .danger button:hover{background:var(--red-tint);color:var(--red)}
body.op button.small,body.op td button,body.op td .btn{height:36px;padding:0 12px;font-size:14px}
body.op .btn svg,body.op button svg{width:16px;height:16px;flex-shrink:0}
body.op .page-head .btn{height:48px;padding:0 20px;font-size:16px}
body.op form{margin:12px 0}
body.op form[style*="display:inline"]{margin:0}
body.op label{cursor:pointer}
body.op input:not([type]),body.op input[type=text],body.op input[type=password],body.op input[type=email],body.op input[type=url],
body.op input[type=date],body.op select,body.op textarea{height:48px;max-width:100%;padding:0 12px;border:1px solid var(--field-line);
  border-radius:var(--r-field);background:var(--card);color:var(--ink);font:400 16px/1.25 var(--sans);vertical-align:middle}
body.op select{padding-right:36px;-webkit-appearance:none;appearance:none;background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center/16px 16px no-repeat}
body.op textarea{height:auto;padding:12px;font:14px/1.5 var(--mono);width:100%;resize:vertical}
body.op input::placeholder,body.op textarea::placeholder{color:var(--ink-3);opacity:1}
body.op input:hover,body.op select:hover,body.op textarea:hover{border-color:var(--ink-2)}
body.op input:focus,body.op select:focus,body.op textarea:focus{outline:0;border-color:var(--green);box-shadow:var(--focus)}
body.op input[readonly]{background:var(--paper-2);font-family:var(--mono);font-size:15px}
body.op input[type=radio],body.op input[type=checkbox]{width:20px;height:20px;margin:0 10px 0 0;accent-color:var(--green);vertical-align:-4px;flex-shrink:0}
body.op .op-check{display:flex;align-items:center;gap:0;min-height:44px;font-size:15px;line-height:1.4}
body.op .op-check .muted{margin-left:.3em}
body.op .op-inputgroup{display:flex;align-items:stretch;height:48px;flex:1 1 auto;min-width:0;max-width:520px;
  border:1px solid var(--field-line);border-radius:var(--r-field);background:var(--card);overflow:hidden}
body.op .op-inputgroup:focus-within{border-color:var(--green);box-shadow:var(--focus)}
body.op .op-inputgroup input,body.op .op-inputgroup input:focus,body.op .op-inputgroup input:hover{flex:1 1 auto;min-width:0;height:100%;border:0;
  border-radius:0;box-shadow:none;font-family:var(--mono);font-size:15px}
body.op .op-suffix{display:flex;align-items:center;padding:0 12px;font-family:var(--mono);font-size:14px;color:var(--ink-2);white-space:nowrap}
body.op .op-field{display:flex;flex-direction:column;gap:6px;min-width:0}
body.op .op-field>label,body.op .op-field>.op-label,body.op legend.op-label{font-size:14px;font-weight:500;line-height:1.45;color:var(--ink)}
body.op .op-field input,body.op .op-field select{width:100%}
body.op .op-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
body.op .back{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;min-height:44px;font-size:15px;color:var(--ink-2);text-decoration:none}
body.op .back:hover{color:var(--ink)}
body.op .back svg{width:16px;height:16px}

/* A badge: an icon and a word on its tone's tint. A tag in a row (Free,
   Paying, test) is the word alone. */
body.op .pill{--i:var(--i-dot);display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border:1px solid var(--line);
  border-radius:var(--r-chip);background:var(--paper-3);color:var(--neutral);font-size:14px;font-weight:500;line-height:1;
  white-space:nowrap;vertical-align:middle}
body.op .pill::before{content:"";width:14px;height:14px;flex-shrink:0;background:currentColor;
  -webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
body.op .pill.p-good{--i:var(--i-ok);background:var(--ok-tint);color:var(--ok);border-color:var(--green-line)}
body.op .pill.p-warn{--i:var(--i-wait);background:var(--amber-tint);color:var(--amber);border-color:var(--amber-line)}
body.op .pill.p-bad{--i:var(--i-bad);background:var(--red-tint);color:var(--red);border-color:var(--red-line)}
body.op .pill.p-blue{--i:var(--i-info);background:var(--blue-tint);color:var(--blue);border-color:var(--blue-line)}
body.op .pill.p-ink{background:var(--brand-ink);color:#fff;border-color:var(--brand-ink)}
body.op .op-flag{display:inline-flex;align-items:center;height:22px;padding:0 6px;border:1px solid var(--blue-line);
  border-radius:var(--r-chip);background:var(--blue-tint);color:var(--blue);font-size:14px;font-weight:400;line-height:1;vertical-align:middle}
body.op .dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--ink-3);vertical-align:1px}
body.op .dot.d-live{background:var(--ok)}
body.op .dot.d-paused,body.op .dot.d-attn{background:var(--red)}
body.op .dot.d-test{background:var(--blue)}

/* Card: a white surface, 1px edge, 12px corners, no shadow. */
body.op .card{min-width:0;padding:24px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--card);overflow-wrap:break-word}
body.op .card>:first-child{margin-top:0}
body.op .card>:last-child{margin-bottom:0}
body.op .card>h2:first-child{margin-bottom:16px}
body.op .card p{font-size:15px;line-height:1.6}
body.op .card p.muted{font-size:14px}
body.op .card.attn,body.op .card.danger{border-color:var(--red-line);box-shadow:0 0 0 1px var(--red-line)}
body.op .card-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 16px}
body.op .card-head>div{min-width:0}
body.op .card-head h2{margin:0}
body.op .card-head p{margin:2px 0 0;font-size:14px;line-height:1.5;color:var(--ink-2)}
body.op .card-head form{margin:0}
body.op .page-card{max-width:880px}
body.op .result{display:flex;flex-direction:column;gap:12px}
body.op .result>*{margin:0}
body.op .result h2{margin:0}
body.op .op-h2{margin:0 0 12px;font-size:20px;line-height:1.4;font-weight:600;letter-spacing:-.01em}
body.op .sec-label{font-size:14px;font-weight:600;color:var(--ink-2);margin:0}

/* Page head: the title and its line, the one page action on the right. */
body.op .page-head{display:flex;flex-direction:column;gap:16px;padding:8px 0 24px}
body.op .page-head>div{max-width:68ch}
body.op .page-head>.btn{align-self:flex-start}
body.op .page-head p{margin:6px 0 0;font-size:16px;line-height:1.5;color:var(--ink-2)}

/* Dense tables: a bordered box that scrolls inside itself (an edge shadow
   says there is more), heads that stay in view, 40px rows. */
body.op .op-tscroll{position:relative;max-width:100%;overflow:auto;border:1px solid var(--line);border-radius:var(--r-field);
  background:linear-gradient(to right,var(--card) 30%,rgba(255,255,255,0)) left center/40px 100% no-repeat local,
    linear-gradient(to left,var(--card) 30%,rgba(255,255,255,0)) right center/40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(16,24,40,.2),rgba(16,24,40,0)) left center/14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,rgba(16,24,40,.2),rgba(16,24,40,0)) right center/14px 100% no-repeat scroll,var(--card)}
body.op .op-tscroll:focus-visible{outline-offset:-2px}
body.op .op-tscroll--tall{max-height:min(1040px,calc(100vh - 120px))}
body.op table{width:100%;margin:0;border-collapse:separate;border-spacing:0;font-size:14px;line-height:1.45}
body.op th{height:36px;padding:0 12px;border-bottom:1px solid var(--line);background:var(--paper-2);color:var(--ink-2);
  font-size:14px;font-weight:500;line-height:1.3;text-align:left;vertical-align:middle;white-space:nowrap}
body.op td{height:40px;padding:8px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle;overflow-wrap:break-word}
body.op tr:last-child>td{border-bottom:0}
body.op td code{background:none;padding:0;white-space:nowrap}
body.op td.ok,body.op td.bad,body.op td.warn{font-weight:500}
body.op .op-tscroll th{position:sticky;top:0;z-index:1}
body.op .cs-table--dense th{font-size:13px}
body.op .cs-table--dense td code,body.op .cs-table--dense .op-mono,body.op .cs-table--dense .op-sub,body.op .cs-table--dense td .muted{font-size:13px}
body.op .cs-table--dense .pill{height:22px;padding:0 6px;gap:4px;font-size:13px}
body.op .cs-table--dense .pill::before{width:12px;height:12px}
body.op .cs-table--dense .op-flag{height:20px;font-size:13px}
body.op .cs-table--dense td[data-k=Account] .pill{height:20px;border-color:transparent;font-size:13px}
body.op .op-tscroll td[data-k=Account] .pill::before{display:none}
body.op td a{font-weight:500;text-decoration:none}
body.op td a:hover{text-decoration:underline}
body.op .op-num{text-align:right;white-space:nowrap;font-family:var(--mono);font-variant-numeric:tabular-nums}
body.op th.op-num{font-family:var(--sans)}
body.op .op-sub{display:block;color:var(--ink-2);line-height:1.35}
body.op .op-trunc{display:inline-block;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
body.op .op-nowrap{white-space:nowrap}
body.op tr.op-x{display:none}
body.op .op-more__box{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
body.op .op-more__box:checked~.op-tscroll tr.op-x{display:table-row}
body.op .op-more{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0}
body.op .op-more__btn{display:inline-flex;align-items:center;height:40px;padding:0 12px;border:1px solid var(--line-strong);
  border-radius:var(--r-field);background:var(--card);font-size:14px;font-weight:500;color:var(--ink);cursor:pointer}
body.op .op-more__btn:hover{background:var(--paper-2)}
body.op .op-more__box:focus-visible~.op-more .op-more__btn{outline:2px solid var(--ink);outline-offset:2px}
body.op .op-more__box:checked~.op-more{display:none}
body.op .op-more span{font-size:14px;color:var(--ink-2)}

/* Filter chips: a link per state, with its count. */
body.op .filters{display:flex;flex-wrap:wrap;gap:8px}
body.op .filters a{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px;border:1px solid var(--line);
  border-radius:var(--r-field);background:var(--card);font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;white-space:nowrap}
body.op .filters a:hover{border-color:var(--line-strong);color:var(--ink)}
body.op .filters a.on{border-color:var(--green);background:var(--green-tint);color:var(--green)}
body.op .filters .c{font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums;color:var(--ink-2)}
body.op .filters a.on .c{color:var(--green)}

/* ---- the first page --------------------------------------------------------------- */
body.op .kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
body.op .kpi{display:flex;flex-direction:column;justify-content:space-between;min-width:0;min-height:92px;padding:16px;
  border:1px solid var(--line);border-radius:var(--r-card);background:var(--card);color:var(--ink);text-decoration:none;
  transition:border-color .12s}
body.op .kpi:hover{border-color:var(--line-strong);color:var(--ink)}
body.op .kpi.hot{border-color:var(--red-line)}
body.op .kpi.hot:hover{border-color:var(--red)}
body.op .kpi.on{border-color:var(--green);box-shadow:var(--focus)}
body.op .kpi .l{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;font-size:14px;font-weight:500;line-height:1.4;
  color:var(--ink-2);white-space:nowrap;text-overflow:ellipsis}
body.op .kpi .n{margin-top:8px;font-family:var(--mono);font-size:30px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
body.op .kpi.hot .n{color:var(--red)}
body.op .needs{display:flex;flex-direction:column;gap:16px}
body.op .needs-row{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
body.op .needs .card{height:100%}
body.op .needs .card p{margin:0}
body.op .needs .card p.muted{margin-top:12px}
body.op .op-reqs{display:flex;flex-direction:column;gap:12px}
body.op .op-req{margin:0;border:1px solid var(--line);border-radius:var(--r-field);font-size:14px}
body.op .op-req>div{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;padding:8px 12px;border-top:1px solid var(--line)}
body.op .op-req>div:first-child{justify-content:space-between;border-top:0}
body.op .op-req dt{font-size:14px;color:var(--ink-2)}
body.op .op-req dd{margin:0;min-width:0;overflow-wrap:anywhere}
body.op .op-req code{background:none;padding:0}
body.op .req-dns{width:auto;font-size:14px}
body.op .req-dns td{height:auto;padding:0 12px 2px 0;border:0;overflow-wrap:anywhere;word-break:break-all}
body.op .req-dns code{white-space:normal}
body.op .newform{margin:0;display:flex;flex-direction:column;gap:8px}
body.op .newform .op-row{flex-wrap:nowrap;align-items:stretch}
body.op .newform button{height:48px;padding:0 20px;font-size:16px}
body.op #new .muted{max-width:68ch}

/* ---- a store --------------------------------------------------------------- */
body.op .t-head{display:flex;flex-direction:column;gap:16px}
body.op .t-name{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
body.op .t-name h1{overflow-wrap:anywhere}
body.op .t-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
body.op .t-meta>span{display:inline-flex;align-items:center;gap:6px;min-height:32px;max-width:100%;padding:4px 10px;
  border:1px solid var(--line);border-radius:var(--r-chip);background:var(--paper-2);font-size:14px;line-height:1.4;font-weight:500;
  color:var(--ink);overflow-wrap:anywhere}
body.op .t-meta>span.op-hp{padding-right:4px}
body.op .t-meta .k{flex-shrink:0;font-weight:400;color:var(--ink-2)}
body.op .t-meta code{min-width:0}
body.op .t-meta code{background:none;padding:0;font-size:14px}
body.op .t-meta .op-m{font-family:var(--mono);font-weight:400}
body.op .t-meta .op-m .k,body.op .t-meta .op-m .pill,body.op .t-meta .op-m .muted{font-family:var(--sans)}
body.op .t-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
body.op .t-actions form{margin:0}
body.op .t-actions form[action$="/confirm"] button{border-color:transparent;background:transparent;color:var(--red)}
body.op .t-actions form[action$="/confirm"] button:hover{background:var(--red-tint)}
body.op .tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line)}
body.op .tabs::-webkit-scrollbar{display:none}
body.op .tabs a{position:relative;display:inline-flex;align-items:center;flex-shrink:0;height:44px;padding:0 12px;font-size:15px;
  font-weight:500;color:var(--ink-2);text-decoration:none;white-space:nowrap}
body.op .tabs a:hover{color:var(--ink)}
body.op .tabs a[href="#danger"]{color:var(--red)}
body.op .tabs a::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;border-radius:2px;background:transparent}
body.op .tabs a:focus-visible{outline-offset:-2px}
body.op .op-tabbed{display:flex;flex-direction:column;gap:20px}
body.op .op-tabbed>section{scroll-margin-top:100vh}
body.op .sec{display:flex;flex-direction:column;gap:16px}
body.op .sec>*{margin:0}
body.op .grid2{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
body.op .op-ops{margin:0;padding:0;list-style:none}
body.op .op-ops>li{display:flex;flex-direction:column;gap:6px;margin:0;padding:10px 0;border-top:1px solid var(--line)}
body.op .op-ops>li:first-child{padding-top:0;border-top:0}
body.op .op-ops>li:last-child{padding-bottom:0}
body.op .op-ops form{margin:0}
body.op .op-ops button{width:100%}
body.op .op-ops p{margin:0;font-size:14px;line-height:1.5;color:var(--ink-2)}
body.op .op-ops--wide button{white-space:normal;height:auto;min-height:44px;padding-top:10px;padding-bottom:10px;line-height:1.3}
body.op details.human{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
body.op details.human>summary{font-size:15px}
body.op .flash{display:flex;flex-direction:column;gap:8px}
body.op .flash p{margin:0}
body.op .danger h2{color:var(--ink)}
body.op .danger a{display:inline-flex;align-items:center;min-height:44px;font-weight:500;color:var(--red);text-decoration:underline}
body.op .op-kv{margin:12px 0}
body.op .op-kv td{height:auto;padding:8px 0;border-bottom:1px solid var(--line);font-size:15px}
body.op .op-kv td:first-child{width:40%;padding-right:16px;color:var(--ink-2)}
body.op .op-kv tr:last-child td{border-bottom:0}
body.op .op-check-row td:first-child{min-width:240px}
body.op tr.op-fail>td{background:rgba(254,241,239,.6)}
body.op .op-end{text-align:right}
body.op .op-st{display:inline}
body.op .op-st .dot{margin-right:8px}
body.op .op-st--bad{font-weight:500;color:var(--red)}
body.op .op-st--bad .muted{font-weight:400}
body.op td[data-k=Status] br{display:none}
body.op td[data-k=Status] .op-st .muted{margin-left:6px}
body.op .op-sum{margin:0 0 12px;font-size:15px}
body.op .op-gate{margin:0 0 4px;font-size:16px}
body.op .op-gate form{margin:0}
body.op .op-row>form,body.op .op-owner form{margin:0}
body.op .op-row>.muted{font-size:14px;line-height:1.5}
body.op .op-owner form button,body.op .op-hosts td form button{border-color:transparent;background:transparent;color:var(--red)}
body.op .op-owner form button:hover,body.op .op-hosts td form button:hover{background:var(--red-tint);color:var(--red)}
body.op form.op-row{margin:12px 0}
body.op form.op-row input[type=email]{width:min(100%,320px)}
body.op .op-addhost{margin:16px 0 0}
body.op .op-addhost input{width:min(100%,420px);font-family:var(--mono);font-size:15px}
body.op form[action$="/brand"] p{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
body.op form[action$="/brand"] p label{display:inline-flex;align-items:center;gap:8px;font-size:15px}
body.op input[name=accent]{width:140px;font-family:var(--mono)}
body.op input[name=radius]{width:96px}
body.op select[name=how]{max-width:100%}
body.op input[name=note]{width:100%}
body.op .op-stores{min-width:880px}
body.op .op-stores td:first-child{white-space:nowrap}
body.op .op-stores td[data-k=Status]{min-width:150px}
body.op .op-stores td[data-k=Health]{min-width:160px}
body.op .op-stores td[data-k=Health] .ok+.muted,body.op .op-stores td[data-k=Health] .bad+.muted{white-space:nowrap}
body.op .op-stores td[data-k=Account]{white-space:nowrap}
body.op .op-stores td[data-k=Account] .op-trunc{max-width:220px}
body.op .op-stuck{min-width:880px}
body.op .op-coupons{min-width:760px}
body.op .op-smoke{min-width:960px}
body.op .op-checks{min-width:640px}
body.op .op-checks td:nth-child(2){white-space:nowrap}
body.op .op-plans{min-width:900px}
body.op .op-subs{min-width:920px}
body.op .op-refunds{min-width:720px}
body.op .op-hosts{min-width:520px}
body.op .op-coupons th:nth-child(3),body.op .op-coupons td:nth-child(3){text-align:right;white-space:nowrap}
body.op .op-subs td,body.op .op-smoke td:first-child,body.op .op-smoke td[data-k=Status]{white-space:nowrap}
body.op .cs-table--dense td:first-child>a{font-family:var(--mono);font-size:13px}
body.op .cs-table--dense.op-vars td:last-child,body.op .cs-table--dense.op-subs td:nth-child(2),body.op .cs-table--dense.op-subs td:nth-child(n+5){font-family:var(--mono);font-size:13px}
body.op form.choices label{display:block;margin:0;padding:6px 0;font-size:15px}

/* ---- accounts ------------------------------------------------------------- */
body.op .op-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;border:1px solid var(--line);
  border-radius:var(--r-card);background:var(--card);overflow:hidden}
body.op .op-stats>div{display:flex;flex-direction:column;padding:12px 16px;border-color:var(--line);border-style:solid;border-width:0 1px 1px 0}
body.op .op-stats>div:nth-child(2n){border-right-width:0}
body.op .op-stats>div:last-child{border-bottom-width:0;border-right-width:0}
body.op .op-stats dt{font-size:14px;line-height:1.4;color:var(--ink-2)}
body.op .op-stats dd{margin:0;font-family:var(--mono);font-size:22px;line-height:1.3;font-weight:600;font-variant-numeric:tabular-nums}
body.op .acct-new{display:flex;flex-direction:column;align-items:flex-start;gap:12px;max-width:560px;margin:0}
body.op .acct-new .op-field{align-self:stretch}
body.op .acct-new label.op-check{font-size:15px}
body.op .acct-new>button{height:48px;padding:0 20px;font-size:16px}
body.op #new>p.muted{max-width:560px;margin:12px 0 0;line-height:1.7}
body.op .acts{display:flex;gap:8px;flex-wrap:nowrap}
body.op .acts form{margin:0}
body.op .copyrow{display:flex;align-items:center;gap:8px;padding:4px 4px 4px 12px;border:1px solid var(--line);border-radius:var(--r-field);background:var(--card)}
body.op .copyrow input,body.op .copyrow input:focus{flex:1 1 auto;min-width:0;height:36px;padding:0;border:0;box-shadow:none;background:none;font-size:14px}
body.op .copyrow button{height:36px;border-color:transparent}
body.op .result.op-note{padding:16px;border-color:var(--green-line);background:var(--ok-tint)}
body.op .result.op-note.op-note--bad{border-color:var(--red-line);background:var(--red-tint)}
body.op .op-note p.ok,body.op .op-note p.err{padding:0 0 0 30px;border:0;background:none;font-size:16px;line-height:1.5}
body.op .op-note p.ok::before,body.op .op-note p.err::before{left:0;top:3px;width:20px;height:20px}
body.op .op-note p.warn{margin:0}

/* ---- billing --------------------------------------------------------------- */
body.op .op-setup>h3{margin:20px 0 8px}
body.op .op-hook{display:flex;flex-direction:column;gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
body.op .op-hook>*{margin:0}
body.op .coupon-new{display:flex;flex-direction:column;gap:16px;margin:20px 0 0;padding-top:16px;border-top:1px solid var(--line)}
body.op .coupon-new>h3{margin:0}
body.op .op-fgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px 16px}
body.op .coupon-plans{margin:0;padding:0;border:0;min-width:0}
body.op .coupon-plans legend{padding:0;margin-bottom:4px}
body.op .op-opts{display:grid;grid-template-columns:minmax(0,1fr);column-gap:16px}
body.op .coupon-new>button{align-self:flex-start}

/* ---- the operator's onboarding wizard --------------------------------------- */
body.op .wz-steps{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
body.op .wz-steps li{display:flex;align-items:center;gap:8px;height:40px;margin:0;padding:0 12px 0 6px;border:1px solid var(--line);
  border-radius:999px;background:var(--card);font-size:14px;font-weight:500;color:var(--ink-2)}
body.op .wz-steps li.cur{border-color:var(--ink);color:var(--ink)}
body.op .wz-steps li.done{color:var(--ok)}
body.op .wz-num{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;border-radius:50%;
  background:var(--paper-3);color:var(--ink-2);font:500 14px var(--mono)}
body.op .wz-num.done{background:var(--green);color:#fff}
body.op .wz-num.cur{background:var(--brand-ink);color:#fff}
body.op .wz-card{padding:0 24px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--card)}
body.op .wz-card[open]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
body.op .wz-card>summary{display:flex;align-items:center;gap:12px;padding:16px 0;list-style:none;font-size:17px}
body.op .wz-card>summary::-webkit-details-marker{display:none}
body.op .wz-card>summary b{font-weight:600}
body.op .wz-card>summary .pill{margin-left:auto}
body.op .wz-body{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;padding:4px 0 24px;border-top:1px solid var(--line)}
body.op .wz-h{margin:16px 0 8px;font-size:14px;font-weight:600;color:var(--ink-2)}
body.op .wz-form{position:static;display:block;max-height:none;overflow:visible;border-radius:0;box-shadow:none}
body.op .wz-form label{display:block;margin:12px 0;font-size:15px}
body.op .wz-form label input:not([type=radio]):not([type=checkbox]),body.op .wz-form select{display:block;width:100%;margin-top:6px}
body.op .wz-form label.radio{display:flex;align-items:center}
body.op .wz-human{display:flex;align-items:flex-start;gap:12px;margin:10px 0;font-size:15px}
body.op .wz-human span{padding-top:8px;min-width:0;overflow-wrap:anywhere}
body.op .wz-help{padding:4px 16px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper-2);font-size:15px;line-height:1.6}
body.op .wz-res{margin:16px 0 0;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper-2);
  font-size:15px;color:var(--ink-2)}
body.op .wz-res.good{background:var(--ok-tint);border-color:var(--green-line);color:var(--ok)}
body.op .wz-res.fail{background:var(--red-tint);border-color:var(--red-line);color:var(--red)}
body.op .wz-foot{grid-column:1/-1}

/* Every stored value of a store (Edit settings) and the merchant's intake form. */
body.op form.intake label{display:block;margin:20px 0;font-size:15px}
body.op form.intake input:not([type=checkbox]),body.op form.intake select{display:block;width:100%;max-width:560px;margin-top:6px}
body.op form.intake br{display:none}
body.op form.intake input+br+span,body.op form.intake select+br+span{display:block;margin-top:6px;font-size:14px}
body.op form.intake>button{margin-top:8px;background:var(--green);border-color:var(--green);color:#fff}

/* ---- accounts first (2026-10-11) ------------------------------------------ */
/* Every store reached through who owns it: the Overview's three group cards,
   the Accounts list, one account's page, Your stores and System's stores
   (docs/redesign/session-windows/designs/admin-accounts-v2-*). */
body.op .owners{display:flex;flex-direction:column;gap:16px}
body.op .owners-pair{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
body.op .op-gcard{display:flex;flex-direction:column;gap:12px}
body.op .op-gcard>*{margin:0}
body.op .op-gcard .card-head{margin:0}
body.op .op-gcard h3{margin:0;font-size:17px;line-height:1.45;font-weight:600}
body.op .op-gline{font-size:14px;line-height:1.5;color:var(--ink-2)}
body.op .card p.op-gline{font-size:14px}
body.op .op-gline b{font-family:var(--mono);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
body.op .op-gcard .op-gmore{margin-top:auto;padding-top:4px;font-size:15px}
body.op .op-gmore a{font-weight:500;text-decoration:none}
body.op .op-gmore a:hover{text-decoration:underline}
body.op .op-glist{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
body.op .op-glist>li{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;margin:0;padding:8px 0;
  border-bottom:1px solid var(--line)}
body.op .op-glist>li.op-x{display:none}
body.op .op-glist>li>div:first-child{min-width:0}
body.op .op-glist a.op-mono{font-size:14px;font-weight:500;text-decoration:none}
body.op .op-glist a.op-mono:hover{text-decoration:underline}
body.op .op-glist .op-sub{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.op .op-gside{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0;font-size:14px;line-height:1.4;text-align:right}
body.op .op-gside .op-st br,body.op .op-gside .op-st .muted{display:none}
body.op tr.op-grp>td{height:36px;padding:6px 12px;background:var(--paper-2);font-size:14px;font-weight:600;color:var(--ink)}
body.op tr.op-grp .c{margin-left:6px;font-family:var(--mono);font-weight:500;color:var(--ink-2)}
/* The Accounts list: the email is the row's link, so the whole row opens it. */
body.op .op-alist{min-width:1000px}
body.op .op-alist tbody tr{position:relative}
body.op .op-alist tbody tr:hover>td{background:var(--paper-2)}
body.op .cs-table--dense .op-acct{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--green);text-decoration:none}
/* No stretched link: a positioned ::after over a table row covers the whole table in
   browsers that do not position rows (Safari), so every row opened one account. */
body.op .op-pill-free{display:inline-block;margin-left:6px;padding:0 8px;border-radius:999px;background:var(--ok-tint);color:var(--ok);font-size:14px;font-weight:500;white-space:nowrap}
body.op .op-chev a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;color:inherit;border-radius:var(--r-field)}
body.op .op-chev a:hover{background:var(--paper-3);color:var(--ink)}
body.op .op-acct:hover{text-decoration:underline}
body.op .op-alist td:first-child,body.op .op-alist td[data-k=Plan],body.op .op-alist td[data-k=State]{white-space:nowrap}
body.op .op-alist td[data-k=Stores]{max-width:260px}
body.op .cs-table--dense td[data-k=Joined],body.op .cs-table--dense td[data-k="Last sign-in"],
body.op .cs-table--dense td[data-k="Last order"],body.op .cs-table--dense td[data-k=Made]{font-family:var(--mono);font-size:13px;white-space:nowrap}
body.op .op-chev{width:40px;color:var(--ink-3)}
body.op .op-chev svg{display:block}
body.op .op-search{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0}
body.op .op-search input[type=search]{flex:1 1 280px;min-width:0;max-width:520px;height:48px;padding:0 12px 0 40px;
  border:1px solid var(--field-line);border-radius:var(--r-field);font:400 16px/1.25 var(--sans);color:var(--ink);
  background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") 12px center/18px 18px no-repeat}
body.op .op-search input[type=search]:hover{border-color:var(--ink-2)}
body.op .op-search input[type=search]:focus{outline:0;border-color:var(--green);box-shadow:var(--focus)}
body.op .op-search button{height:48px;padding:0 20px;font-size:16px}
body.op .op-clear{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-size:15px}
body.op .card p.op-found{margin:0;font-size:15px}
/* One account: the head card says who and what it pays; its buttons sit
   under a rule, then its stores. */
body.op .op-ahead .t-name h1{overflow-wrap:anywhere}
body.op .op-aacts{padding-top:16px;border-top:1px solid var(--line)}
body.op .op-aacts form[action$="/confirm"] button{border-color:var(--line-strong);background:var(--card);color:var(--ink)}
body.op .op-aacts form[action$="/confirm"] button:hover{background:var(--paper-2);color:var(--ink)}
body.op .op-astable{min-width:920px}
body.op .op-astable td:first-child,body.op .op-astable td[data-k=Plan]{white-space:nowrap}
body.op .op-astable td[data-k=Status],body.op .op-astable td[data-k=Health]{min-width:150px}
body.op .op-info{position:relative;padding:14px 16px 14px 46px;border:1px solid var(--blue-line);border-radius:var(--r-card);
  background:var(--blue-tint);color:var(--ink)}
body.op .op-info::before{content:"";position:absolute;left:16px;top:17px;width:18px;height:18px;background:var(--blue);
  -webkit-mask:var(--i-info) center/contain no-repeat;mask:var(--i-info) center/contain no-repeat}
body.op .op-info p,body.op .card .op-info p{margin:0;font-size:15px;line-height:1.6}
body.op .card .op-info{margin-top:16px}
body.op .op-kept p{margin:8px 0 0}
body.op details.op-deleted>summary{font-size:15px}
body.op .op-dlist{margin:12px 0 0;padding:0;list-style:none}
body.op .op-dlist li{display:flex;flex-wrap:wrap;gap:4px 12px;margin:0;padding:8px 0;border-top:1px solid var(--line);font-size:14px}
body.op .op-ystores{min-width:960px}
body.op .op-ystores td:first-child,body.op .op-ystores td[data-k=Billing]{white-space:nowrap}
body.op .op-ystores td[data-k=Status],body.op .op-ystores td[data-k=Health]{min-width:150px}
body.op .op-smoke td[data-k="Last smoke (UTC)"]{min-width:220px;max-width:320px;white-space:normal}
body.op .op-smoke td[data-k=Health]{min-width:160px}
body.op .op-smoke td[data-k=Role]{min-width:150px}
body.op .op-alist td[data-k=Stores]{min-width:200px}
body.op .op-alist td[colspan],body.op .op-ystores td[colspan],body.op .op-astable td[colspan],
body.op .op-stores td[colspan]{white-space:normal}
@media (min-width:1024px){
body.op .owners-pair{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1280px){
body.op .t-head.op-ahead{flex-direction:column;align-items:stretch}
body.op .op-ahead .t-actions{justify-content:flex-start}
}
@media (max-width:767px){
/* A dense list becomes a stack of cards on a phone: each row a card, each
   cell a line with its column's name. */
body.op .op-cards .op-tscroll{max-height:none;overflow:visible;border:0;border-radius:0;background:none}
body.op .op-cards table{min-width:0}
body.op .op-cards table,body.op .op-cards tbody,body.op .op-cards tr,body.op .op-cards td{display:block;width:auto;height:auto}
body.op .op-cards thead{display:none}
body.op .op-cards tbody>tr{position:relative;margin:0 0 12px;padding:12px 16px;border:1px solid var(--line);
  border-radius:var(--r-card);background:var(--card)}
body.op .op-cards tbody>tr:last-child{margin-bottom:0}
body.op .op-cards tbody>tr.op-x{display:none}
body.op .op-cards .op-more__box:checked~.op-tscroll tr.op-x{display:block}
body.op .op-cards td{padding:0;border:0;white-space:normal;max-width:none;min-width:0}
body.op .op-cards tbody td:nth-child(n){white-space:normal}
body.op .op-cards td:first-child{padding-bottom:6px}
body.op .op-cards td[data-k]{position:relative;padding:3px 0 3px 116px;font-size:14px}
body.op .op-cards td[data-k]::before{content:attr(data-k);position:absolute;left:0;top:3px;width:104px;color:var(--ink-2);
  font-family:var(--sans);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.op .op-cards td[data-k="Last smoke (UTC)"]::before{content:"Last smoke"}
body.op .op-cards td a,body.op .op-cards .op-sub{overflow-wrap:anywhere}
body.op .op-cards td[data-k] .op-trunc{max-width:100%}
body.op .op-cards td.op-end{padding-top:10px}
body.op .op-cards td.op-end .btn{width:100%;height:44px;font-size:15px}
body.op .op-cards tbody>tr.op-grp{margin:16px 0 8px;padding:0;border:0;background:none}
body.op .op-cards tbody>tr.op-grp:first-child{margin-top:0}
body.op .op-cards tr.op-grp>td{height:auto;padding:0;background:none}
body.op .op-alist tbody>tr{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:12px 44px 12px 16px}
body.op .op-alist td:first-child{order:1;flex:1 0 100%;padding:0}
body.op .op-alist td[data-k=Plan]{order:2;padding:2px 0}
body.op .op-alist td[data-k=State]{order:3;padding:2px 0}
body.op .op-alist td[data-k=Stores]{order:4;flex:1 0 100%;padding:2px 0}
body.op .op-alist td[data-k=Joined],body.op .op-alist td[data-k="Last sign-in"],
body.op .op-alist td[data-k="Last order"]{flex:1 0 100%;padding:0 0 0 104px}
body.op .op-alist td[data-k=Joined]{order:5}
body.op .op-alist td[data-k="Last sign-in"]{order:6}
body.op .op-alist td[data-k="Last order"]{order:7}
body.op .op-alist td[data-k=Plan]::before,body.op .op-alist td[data-k=State]::before,
body.op .op-alist td[data-k=Stores]::before{content:none}
body.op .op-alist td[data-k=Joined]::before,body.op .op-alist td[data-k="Last sign-in"]::before,
body.op .op-alist td[data-k="Last order"]::before{top:0;width:96px}
body.op .op-alist td.op-chev{position:absolute;top:12px;right:12px;width:auto;padding:0}
body.op .op-alist td[colspan]{flex:1 0 100%}
body.op .op-search input[type=search]{flex-basis:100%;max-width:none}
body.op .op-search button{flex:1 1 auto}
}

/* The store page's tabs: one section at a time, chosen by the address (#setup);
   Overview when it names none. Where :has() is not known every section shows. */
@supports selector(:has(a)){
body.op .op-tabbed>section{display:none}
body.op .op-tabbed>section:target{display:flex}
body.op .op-tabbed>section.card:target{display:block}
body.op .op-tabbed:not(:has(>section:target))>#overview{display:flex}
body.op main:not(:has(.op-tabbed>section:target)) .tabs a[href="#overview"],
body.op main:has(#overview:target) .tabs a[href="#overview"],body.op main:has(#setup:target) .tabs a[href="#setup"],
body.op main:has(#checkout:target) .tabs a[href="#checkout"],body.op main:has(#account:target) .tabs a[href="#account"],
body.op main:has(#refunds:target) .tabs a[href="#refunds"],body.op main:has(#testing:target) .tabs a[href="#testing"],
body.op main:has(#danger:target) .tabs a[href="#danger"]{color:var(--ink)}
body.op main:not(:has(.op-tabbed>section:target)) .tabs a[href="#overview"]::after,
body.op main:has(#overview:target) .tabs a[href="#overview"]::after,body.op main:has(#setup:target) .tabs a[href="#setup"]::after,
body.op main:has(#checkout:target) .tabs a[href="#checkout"]::after,body.op main:has(#account:target) .tabs a[href="#account"]::after,
body.op main:has(#refunds:target) .tabs a[href="#refunds"]::after,body.op main:has(#testing:target) .tabs a[href="#testing"]::after,
body.op main:has(#danger:target) .tabs a[href="#danger"]::after{background:var(--green)}
}
@media (min-width:640px){
body.op .page-head{flex-direction:row;align-items:flex-end;justify-content:space-between}
body.op .page-head>a,body.op .page-head>form{flex-shrink:0}
body.op .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
body.op .op-ops>li{flex-direction:row;align-items:center;gap:16px}
body.op .op-ops form,body.op .op-ops>li>.btn{flex:0 0 180px}
body.op .op-ops--wide form{flex:0 0 340px}
body.op .op-opts{grid-template-columns:repeat(2,minmax(0,1fr))}
body.op .op-check-row td:first-child{min-width:0}
}
@media (min-width:768px){
body.op .op-fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
body.op .kpis{grid-template-columns:repeat(5,minmax(0,1fr))}
body.op .needs-row--3{grid-template-columns:repeat(3,minmax(0,1fr))}
body.op .needs-row--2{grid-template-columns:repeat(2,minmax(0,1fr))}
body.op .grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
body.op .op-stats{grid-template-columns:repeat(5,minmax(0,1fr))}
body.op .op-stats>div,body.op .op-stats>div:nth-child(2n){border-width:0 1px 0 0}
body.op .op-stats>div:last-child{border-right-width:0}
body.op .op-fgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
body.op .op-billing-who{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
body.op .wz-body{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
}
@media (min-width:1280px){
body.op .t-head{flex-direction:row;align-items:flex-start;justify-content:space-between}
body.op .t-actions{flex-shrink:0;justify-content:flex-end}
}
@media (max-width:1023px){
body.op .app{flex-direction:column}
body.op .side{position:static;width:auto;height:auto}
body.op .side:not(:popover-open){display:none}
body.op .side:popover-open{position:fixed;inset:0 auto 0 0;width:288px;max-width:85vw;height:auto;box-shadow:var(--shadow-3)}
body.op .side::backdrop{background:rgba(14,26,43,.4)}
body.op .side-logo{padding:16px 12px 20px 20px}
body.op .op-close{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-left:auto;padding:0;
  border:0;background:transparent;color:rgba(255,255,255,.8)}
body.op .op-close:hover{background:rgba(255,255,255,.1);color:#fff}
body.op .op-close svg{width:20px;height:20px}
body.op .op-menubtn{display:inline-flex;flex-shrink:0;height:44px;padding:0 12px;border-color:var(--line);font-size:15px}
body.op .op-menubtn svg{width:18px;height:18px}
body.op .app-head{padding:12px 24px}
body.op .app-main{padding:4px 24px 96px}
body.op .tabs{margin:0 -24px;padding:0 24px}
}
@media (max-width:639px){
body.op .app-head{padding:12px 16px}
body.op .app-main{padding:4px 16px 96px}
body.op .crumb li:not(:last-child){display:none}
body.op .crumb li svg{display:none}
body.op .tabs{margin:0 -16px;padding:0 16px}
body.op .chip{padding:0 5px}
body.op .chip>span:last-child{display:none}
body.op .card{padding:20px}
body.op .t-meta{gap:6px}
body.op .t-meta>span{padding:4px 8px}
body.op .bare-card{padding:24px}
body.op .bare-top{padding:12px 16px}
body.op .op-focus__top{padding:16px}
body.op .op-confirm{padding:24px}
body.op .op-confirm .acts{flex-direction:column-reverse}
body.op .op-confirm .acts .btn,body.op .op-confirm .acts form,body.op .op-confirm .acts button{width:100%}
body.op .newform .op-row{flex-direction:column}
body.op .newform .op-inputgroup{max-width:none}
body.op .acct-new>button{width:auto}
body.op .wz-card{padding:0 16px}
}

/* ---- motion ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---- breakpoints: 1280 wide, 1024 fold, 640 phone ----------------------- */
@media (max-width:1023px){
  :root{--gutter:24px}
  .cs-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs-op{flex-direction:column}
  .cs-op__side{width:auto;padding:12px 16px;gap:12px}
  .cs-op__nav{flex-direction:row;overflow-x:auto;scrollbar-width:none}
  .cs-op__nav a{white-space:nowrap;flex-shrink:0}
  /* The account menu folds into the bar: logo on the left, a menu button on the right. */
  .cs-app{flex-direction:column}
  .cs-siderail{display:none}
  .cs-topbar__brand{display:inline-flex}
  .cs-topbar__wide{display:none}
  .cs-topbar__left{flex:1 1 auto}
  .cs-topbar__div{display:block}
  .cs-topbar__switch .cs-menu__btn{max-width:100%}
  .cs-content{padding:32px var(--gutter) 80px}
  /* The phone menu opens as a sheet under the bar, so its button stays in reach to close it. */
  .cs-topbar__phone .cs-menu__list{position:fixed;top:64px;left:0;right:0;min-width:0;max-width:none;
    max-height:calc(100vh - 64px);overflow-y:auto;border-width:0 0 1px;border-radius:0 0 var(--r-panel) var(--r-panel);padding:12px 16px 16px}
  .cs-topbar__phone .cs-menu__list a,.cs-topbar__phone .cs-menu__list button{min-height:48px}
}
@media (max-width:639px){
  :root{--gutter:16px}
  .cs-title{font-size:24px}
  .cs-grid--2,.cs-grid--3{grid-template-columns:minmax(0,1fr)}
  .cs-card{padding:20px}
  .cs-content{padding:24px var(--gutter) 64px;gap:20px}
  .cs-move>summary{padding:12px 14px}
  .cs-move__body{padding:0 16px 18px}
  .cs-schem__nav{width:104px;padding:10px 6px}
  .cs-schem__nav span{padding:6px 8px;font-size:14px}
  .cs-schem__main{padding:14px}
  .cs-row--fold{flex-direction:column;align-items:stretch}
  .cs-grid{gap:16px}
  .cs-copy:not(.cs-copy--block){flex-wrap:wrap;row-gap:8px}
  .cs-copy:not(.cs-copy--block) .cs-copy__value{flex:1 1 auto;white-space:normal;overflow-wrap:anywhere;overflow:visible}
  .cs-copy:not(.cs-copy--block) .cs-copy__btn{margin-left:auto}
  .cs-op__main{padding:24px var(--gutter) 48px}
  .cs-topbar__left{gap:8px}
  /* A tab row wider than the phone runs to the screen's edges and fades there. */
  .cs-tabs{margin:0 calc(-1*var(--gutter));padding:0 var(--gutter);
    -webkit-mask-image:linear-gradient(to right,transparent,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent);
    mask-image:linear-gradient(to right,transparent,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent)}
  .cs-topbar__brand--store .cs-wordmark{display:none}
  /* The store list opens under the bar, the screen's width less the gutters, so it never runs off a small phone. */
  .cs-topbar__switch .cs-menu__list{position:fixed;top:64px;left:var(--gutter);right:var(--gutter);min-width:0;max-width:none}
}
@media (min-width:1024px){
  .cs-topbar__phone{display:none}
}
/* Between the fold and 1280 the bar holds the switcher, the plan pill, the account and Sign out: none of them may push it wide. */
@media (min-width:1024px) and (max-width:1279px){
  .cs-topbar__switch .cs-menu__btn{max-width:240px}
  .cs-userchip{max-width:220px}
}

[data-focus]:focus{outline:none}

/* ---- calmer layout below 1024px (design pass, 2026-10-05) ----------------- */
@media (max-width:1023px){
  .st-first>.cs-card{border-left:0;border-top:1px solid var(--line-2);padding:24px 0 0}
}

/* ---- Partners (partner_views) --------------------------------------------- */
/* The owner's Partners pages and the partner's portal, in the v3 Partners
   design (2026-10-11): cards with a title and a quiet line under it, dense
   tables (14px, 40px rows, 13px heads in a grey band) that become small cards
   on a phone, disclosures with a chevron, key figures in a row. pt- is the
   page, pp- the portal's bar (the store switcher and where the page is). */
.pt-head{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.pt-card__head{display:flex;flex-direction:column;gap:2px;margin-bottom:16px}
.pt-card__head:last-child{margin-bottom:0}
.pt-desc{font-size:14px;line-height:1.5;color:var(--ink-2)}
.cs-content .pt-desc,.cs-content .pt-empty,.cs-content .pt-note{max-width:none}
.cs-content .pt-paused,.cs-content .pt-hint{max-width:576px}
.pt-fine{font-size:14px;line-height:1.5;color:var(--ink-3)}
.pt-sub{font-size:16px;font-weight:600;line-height:1.5;color:var(--ink);margin-bottom:12px}
.pt-sec .pt-fine{margin-top:12px}
.pt-label{font-size:14px;font-weight:500;line-height:1.45;color:var(--ink-2);margin-bottom:4px}
.pt-back{font-size:16px;margin-left:-8px;padding:0 8px;align-self:flex-start}
.pt-back .cs-icon{width:16px;height:16px}
.pt-titlerow{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-top:8px;min-width:0}
.pt-titlerow--sm{margin-top:0}
.pt-titlerow .cs-title{overflow-wrap:anywhere}
.pt-line{margin-top:4px}
.pt-line+.pt-line{margin-top:0}
.pt-linkbox{margin-top:20px;max-width:576px}
.pt-paused{margin-top:16px;max-width:576px;border:1px solid var(--line);border-radius:var(--r-field);
  background:var(--paper-2);padding:12px 16px}
.pt-hint{margin-top:12px;max-width:576px;color:var(--ink-2)}
.pt-ohead{display:flex;flex-direction:column}
.pt-grow{flex:1 1 auto;min-width:0}
.pt-lines{display:flex;flex-direction:column;gap:2px}
.pt-lines .pt-titlerow{margin-bottom:2px}
.pt-cardrow{display:flex;flex-direction:column;gap:16px}
.pt-acts{display:flex;flex-wrap:wrap;gap:12px;flex-shrink:0}
.pt-acts--head{margin-top:20px}
.pt-btnrow{display:flex;flex-wrap:wrap;gap:12px}
.pt-answer{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pt-stores{display:flex;flex-direction:column;gap:16px;padding-top:8px}
.pt-stores>.pt-h2{margin-bottom:-4px}
.pt-own{margin-top:16px}
.pt-filters{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.pt-filters>.pt-storetabs,.pt-filters>.cs-msg{align-self:stretch}
.pt-storetabs{margin-bottom:4px}
.pt-person__head{display:flex;flex-direction:column;gap:2px;margin-bottom:16px}
.pt-person .pt-folds{margin-top:12px}
.pt-split{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
.pt-side,.pt-stack{display:flex;flex-direction:column;gap:24px;min-width:0}
.pt-dim{color:var(--ink-3)}
.pt-quiet{font-size:14px;color:var(--ink-3);white-space:nowrap}
.pt-strong{font-weight:600}
.pt-ink{color:var(--ink)}
.pt-neg,.pt-neg .cs-mono{color:var(--red)}
.pt-break{overflow-wrap:anywhere}
.pt-nowrap{white-space:nowrap}
.pt-card .cs-msg__title{overflow-wrap:anywhere}
.pt-code{font-family:var(--mono);font-size:14px;color:var(--ink);background:var(--paper-2);border-radius:4px;
  padding:0 4px;overflow-wrap:anywhere}

/* Notes: below zero, an empty list, a destructive step. */
.pt-note{border-radius:var(--r-field);padding:12px 16px}
.pt-note--bad{border:1px solid var(--red-line);background:var(--red-tint);color:var(--red)}
.pt-empty{border:1px dashed var(--line-strong);border-radius:var(--r-field);padding:16px}
.pt-danger{border:1px solid var(--red-line);background:var(--red-tint);border-radius:var(--r-field);padding:16px;
  display:flex;flex-direction:column;gap:12px}

/* Disclosures: a chevron and a quiet label; the list of them under a line. */
.pt-fold>summary{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:0 -8px;padding:0 8px;
  border-radius:var(--r-field);font-size:16px;font-weight:500;color:var(--ink-2);cursor:pointer;list-style:none}
.pt-fold>summary::-webkit-details-marker{display:none}
.pt-fold>summary:hover{color:var(--ink)}
.pt-fold__chev{width:16px;height:16px;transition:transform .15s var(--ease)}
.pt-fold[open]>summary .pt-fold__chev{transform:rotate(90deg)}
.pt-fold__body{padding:8px 0 8px}
.pt-folds{border-top:1px solid var(--line);padding-top:8px;display:flex;flex-direction:column;gap:4px}
.pt-steps{list-style:decimal;padding-left:24px;display:flex;flex-direction:column;gap:8px}
.pt-steps li{padding-left:4px;font-size:16px;line-height:1.6;color:var(--ink)}
.pt-steps li::marker{color:var(--ink-2)}

/* How partners work: the whole card is the disclosure. */
.pt-how{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card)}
.pt-how>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:12px 24px;
  border-radius:var(--r-card);cursor:pointer;list-style:none}
.pt-how>summary::-webkit-details-marker{display:none}
.pt-how__title{font-size:17px;font-weight:600;line-height:1.45;color:var(--ink)}
.pt-how__chev{color:var(--ink-2);transition:transform .15s var(--ease)}
.pt-how[open] .pt-how__chev{transform:rotate(180deg)}
.pt-how__list{display:grid;grid-template-columns:minmax(0,1fr);gap:20px 32px;border-top:1px solid var(--line);padding:20px 24px}
.pt-how__list dt{font-size:16px;font-weight:600;line-height:1.5;color:var(--ink)}
.pt-how__list dd{margin-top:4px;font-size:16px;line-height:1.6;color:var(--ink-2)}

/* Key figures: two a row on a phone, then four (or five, a notch smaller). */
.pt-figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px}
.pt-figs .cs-figure{min-width:0}
.pt-figs--5 .cs-num{font-size:22px;line-height:1.15}

/* Add partner: stores side by side, the consent in its own box. */
.pt-set{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:2px}
.pt-set>legend{padding:0;margin-bottom:2px}
.pt-checks{display:flex;flex-direction:column}
.pt-consent{border:1px solid var(--line);border-radius:var(--r-field);background:var(--paper-2);padding:6px 16px}
.pt-consent .cs-field__error{margin:-4px 0 8px 28px}
.pt-connect{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}

/* An order to send (owner side). */
.pt-ocard{border:1px solid var(--line);border-radius:var(--r-field);padding:20px;display:flex;flex-direction:column;gap:16px}
.pt-ocard__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
.pt-onum{font-variant-numeric:tabular-nums}
.pt-odate{font-size:16px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.pt-ocard__where{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pt-ocard__part{min-width:0}
.pt-contact{margin-top:4px;font-size:14px;line-height:1.5;color:var(--ink-2);overflow-wrap:anywhere}
.pt-items li{font-size:16px;line-height:1.6;color:var(--ink)}
.pt-ocard__form{border-top:1px solid var(--line);padding-top:20px;display:flex;flex-direction:column;gap:16px}

/* Your share of one order. */
.pt-kvs{display:flex;flex-direction:column;gap:8px}
.pt-kv{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.pt-kv dt{font-size:16px;line-height:1.6;color:var(--ink-2)}
.pt-kv dd{margin:0;text-align:right}
.pt-kv dd .cs-mono{font-size:15px;color:var(--ink);white-space:nowrap}
.pt-kv:last-child{border-top:1px solid var(--line);padding-top:8px}
.pt-kv:last-child dt{color:var(--ink);font-weight:600}
.pt-kv:last-child dd .cs-mono{font-weight:600}
.pt-track .cs-icon{display:inline-block;width:14px;height:14px;margin-left:4px;vertical-align:-1px}

/* Dense tables (SYSTEM.md section 11): the system's cs-table--dense gives the
   13px heads and badges and the 13.5px figures; these rules give the frame. */
.pt-twrap{position:relative;border:1px solid var(--line);border-radius:var(--r-field);background:var(--card);overflow-x:auto}
.pt-tbl{width:100%;border-collapse:collapse;font-size:14px;line-height:20px;font-variant-numeric:tabular-nums}
.pt-tbl th{height:36px;padding:8px 12px;background:var(--paper-2);font-weight:500;line-height:20px;
  color:var(--ink-2);text-align:left;white-space:nowrap}
.pt-tbl td{height:40px;padding:6px 12px;border-top:1px solid var(--line);text-align:left;vertical-align:middle;color:var(--ink)}
.pt-tbl .pt-r{text-align:right}
.pt-tbl tbody tr:hover td{background:rgba(243,243,239,.6)}
.pt-tbl .cs-mono{white-space:nowrap;overflow-wrap:normal}
.pt-tbl b{font-weight:500;white-space:nowrap}
.pt-twrap--phone .pt-tbl b,.pt-twrap .pt-tbl .pt-olink{font-weight:600}
.pt-olink{font-weight:600;white-space:nowrap}
.pt-trunc{display:block;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-trunc--link{max-width:300px}
.pt-bal+.pt-bal{margin-top:2px}
.pt-link{display:flex;align-items:center;gap:4px;min-width:0;max-width:250px}
.pt-link__url{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:all;-webkit-user-select:all}
.pt-link__copy{width:44px;height:44px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border:0;
  border-radius:var(--r-field);background:transparent;color:var(--ink-2);cursor:pointer}
.pt-link__copy:hover{background:var(--paper-2);color:var(--ink)}
.pt-link__copy.is-copied .cs-copy__done{color:var(--ok)}
.pt-tfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;font-size:14px;color:var(--ink-2)}
.pt-all>summary{list-style:none}
.pt-all>summary::-webkit-details-marker{display:none}
@supports selector(:has(a)){
  .pt-list:not(:has(.pt-all[open])) .pt-more{display:none}
  .pt-list:has(.pt-all[open]) .pt-tfoot{display:none}
}
@supports not selector(:has(a)){.pt-tfoot{display:none}}

/* Sales on a phone: one compact row per order; the row opens it. */
.pt-slist{display:none}
.pt-slist>li+li{border-top:1px solid var(--line)}
.pt-srow{display:flex;align-items:center;gap:8px;padding:10px 12px;color:var(--ink);text-decoration:none}
.pt-srow:hover{background:var(--paper-2);color:var(--ink)}
.pt-srow:focus-visible{outline-offset:-2px}
.pt-srow__main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.pt-srow__line{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.pt-srow__id{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.pt-srow__id b{font-size:16px;font-weight:600}
.pt-srow__date{font-size:14px;color:var(--ink-2)}
.pt-srow__line--2{margin-top:2px;font-size:14px;color:var(--ink-2)}
.pt-srow__who{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-srow__share{flex-shrink:0;white-space:nowrap}
.pt-srow__pills{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px}
.pt-srow__store{font-size:14px;color:var(--ink-2)}
.pt-srow .cs-mono{color:var(--ink);white-space:nowrap}
.pt-srow__chev{width:16px;height:16px;color:var(--ink-3)}

/* Filter: All / To send / Sent, as a segmented control. */
.pt-seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:4px;border:1px solid var(--line);border-radius:var(--r-field);
  background:var(--card)}
.pt-seg a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:6px;font-size:14px;
  font-weight:500;color:var(--ink-2);text-decoration:none}
.pt-seg a:hover{background:var(--paper-2);color:var(--ink)}
.pt-seg a[aria-current]{background:var(--green-tint);color:var(--ink);font-weight:600}
.pt-seg a:focus-visible{outline-offset:0}

/* The portal's bar: the store switcher, a line, where the page is. */
.pp-bar{display:flex;align-items:center;gap:12px;min-width:0}
.pp-bar__sep{width:1px;height:20px;background:var(--line);flex-shrink:0}
.pp-crumbs{min-width:0}
.pp-crumbs ol{display:flex;align-items:center;gap:8px;font-size:14px;line-height:1.5;color:var(--ink-2);min-width:0}
.pp-crumbs li{display:flex;align-items:center;gap:8px;min-width:0}
.pp-crumbs a{color:var(--ink-2);text-decoration:none;white-space:nowrap}
.pp-crumbs a:hover{color:var(--ink);text-decoration:underline}
.pp-crumbs [aria-current]{font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-crumbs__sep{width:16px;height:16px;color:var(--ink-3)}
.pp-switch__name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-bar .pp-switch__on{width:18px;height:18px;color:var(--ink)}

/* Partners: from 640px. */
@media (min-width:640px){
  .pt-cardrow{flex-direction:row;align-items:center;justify-content:space-between;gap:24px}
  .pt-checks{flex-direction:row;flex-wrap:wrap;column-gap:24px}
  .pt-connect{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pt-figs--5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pt-figs--5 .cs-num{font-size:26px}
}
@media (min-width:768px){
  .pt-how__list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
  .pt-figs{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pt-figs--5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .pt-connect{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 160px auto}
  .pt-connect__go{padding-top:26px}
}
@media (min-width:1280px){
  .pt-split--order{grid-template-columns:minmax(0,1fr) 360px}
}
@media (min-width:1440px){
  .pt-split{grid-template-columns:minmax(0,1fr) 360px}
}
@media (min-width:1440px) and (min-height:940px){
  .pt-split:not(.pt-split--order)>.pt-side{position:sticky;top:88px}
}
/* Under 1280px: a partner's stores and the partnerships become cards; Sales, the compact list. */
@media (max-width:1279px){
  .pt-twrap--lg{border:0;border-radius:0;overflow:visible;background:transparent}
  .pt-twrap--lg .pt-tbl,.pt-twrap--lg .pt-tbl tbody,.pt-twrap--lg .pt-tbl tr,.pt-twrap--lg .pt-tbl td{display:block}
  .pt-twrap--lg .pt-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .pt-twrap--lg .pt-tbl tr{border:1px solid var(--line);border-radius:var(--r-field);background:var(--card);padding:8px 12px}
  .pt-twrap--lg .pt-tbl tr+tr{margin-top:8px}
  .pt-twrap--lg .pt-tbl td{height:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;
    padding:6px 0;border-top:1px solid var(--line);text-align:right;min-width:0}
  .pt-twrap--lg .pt-tbl td>:first-child{margin-left:auto}
  .pt-twrap--lg .pt-tbl td::before{content:attr(data-label);flex-shrink:0;font-size:14px;font-weight:500;line-height:1.45;
    color:var(--ink-2);text-align:left}
  .pt-twrap--lg .pt-tbl td:first-child,.pt-twrap--lg .pt-tbl td.pt-t+td{border-top:0}
  .pt-twrap--lg .pt-tbl td.pt-t{display:block;text-align:left;font-size:16px;font-weight:600;padding:2px 0 8px}
  .pt-twrap--lg .pt-tbl td.pt-t b{font-weight:600}
  .pt-twrap--lg .pt-tbl td.pt-a{justify-content:flex-start;border-top:0;padding:10px 0 4px}
  .pt-twrap--lg .pt-tbl td.pt-t>:first-child,.pt-twrap--lg .pt-tbl td.pt-a>:first-child{margin-left:0}
  .pt-twrap--lg .pt-tbl td.pt-t::before,.pt-twrap--lg .pt-tbl td.pt-a::before{content:none}
  .pt-twrap--lg .pt-tbl td.pt-a:empty{display:none}
  .pt-twrap--lg .pt-tbl tbody tr:hover td{background:transparent}
  .pt-twrap--lg .pt-link{max-width:none;flex:0 1 auto}
  .pt-twrap--phone{display:none}
  .pt-slist{display:block;border:1px solid var(--line);border-radius:var(--r-field);background:var(--card);overflow:hidden}
}
/* Under 640px: every table is a stack of small cards; the setup list, one compact row each. */
@media (max-width:639px){
  .pt-twrap{border:0;border-radius:0;overflow:visible;background:transparent}
  .pt-twrap .pt-tbl,.pt-twrap .pt-tbl tbody,.pt-twrap .pt-tbl tr,.pt-twrap .pt-tbl td{display:block}
  .pt-twrap .pt-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .pt-twrap .pt-tbl tr{border:1px solid var(--line);border-radius:var(--r-field);background:var(--card);padding:8px 12px}
  .pt-twrap .pt-tbl tr+tr{margin-top:8px}
  .pt-twrap .pt-tbl td{height:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;
    padding:6px 0;border-top:1px solid var(--line);text-align:right;min-width:0}
  .pt-twrap .pt-tbl td>:first-child{margin-left:auto}
  .pt-twrap .pt-tbl td::before{content:attr(data-label);flex-shrink:0;font-size:14px;font-weight:500;line-height:1.45;
    color:var(--ink-2);text-align:left}
  .pt-twrap .pt-tbl td:first-child,.pt-twrap .pt-tbl td.pt-t+td{border-top:0}
  .pt-twrap .pt-tbl td.pt-t{display:block;text-align:left;font-size:16px;font-weight:600;padding:2px 0 8px}
  .pt-twrap .pt-tbl td.pt-t b{font-weight:600}
  .pt-twrap .pt-tbl td.pt-a{justify-content:flex-start;border-top:0;padding:10px 0 4px}
  .pt-twrap .pt-tbl td.pt-t>:first-child,.pt-twrap .pt-tbl td.pt-a>:first-child{margin-left:0}
  .pt-twrap .pt-tbl td.pt-t::before,.pt-twrap .pt-tbl td.pt-a::before{content:none}
  .pt-twrap .pt-tbl td.pt-a:empty{display:none}
  .pt-twrap .pt-tbl tbody tr:hover td{background:transparent}
  .pt-twrap .pt-trunc{max-width:none}
  .pt-twrap--setup .pt-tbl tbody{border:1px solid var(--line);border-radius:var(--r-field);background:var(--card);overflow:hidden}
  .pt-twrap--setup .pt-tbl tr{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;
    border:0;border-radius:0;padding:8px 12px}
  .pt-twrap--setup .pt-tbl tr+tr{margin-top:0;border-top:1px solid var(--line)}
  .pt-twrap--setup .pt-tbl td{display:block;border:0;padding:0;text-align:left}
  .pt-twrap--setup .pt-tbl td.pt-t{grid-column:1;padding:0}
  .pt-twrap--setup .pt-tbl td:nth-child(2){grid-column:1;margin-top:2px}
  .pt-twrap--setup .pt-tbl td.pt-a{grid-column:2;grid-row:1/span 2;padding:0}
  .pt-twrap--setup .pt-tbl td::before{content:none}
  .pt-ocard{padding:16px}
  .pt-ocard__where{grid-template-columns:minmax(0,1fr)}
  .pt-how>summary{padding:12px 20px}
  .pt-how__list{padding:20px}
  .pt-tfoot{flex-wrap:wrap}
}

/* Own domain (2026-10-11): the Address step's way to the DNS guide, the guide's
   providers, and the portal's form for records set up by hand. */
.wz-dnshelp{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.dg-provs{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.dg-prov{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-field)}
body.op .op-recform{margin:8px 0 16px}
body.op .op-recform summary{cursor:pointer;font-weight:600}
body.op .op-recform form{display:flex;flex-direction:column;gap:8px;margin-top:8px}
body.op .op-recrow{display:grid;grid-template-columns:96px 1fr 2fr;gap:8px}
@media (max-width:640px){body.op .op-recrow{grid-template-columns:1fr}}

/* The numbers on top of an overview (2026-10-12): the dashboard, a store's
   Overview, the partner's Overview and partnership page (account_views.
   stats_block). Each tile is its own box, the label over the value as on
   .ov-fig; two a row on a phone, four wide, Sales taking two columns so seven
   tiles fill the rows. The period is a segmented control like Partners'
   filter. The operator's row is op-stats, four a row with hairlines. */
.cs-statblock{display:flex;flex-direction:column;gap:12px;min-width:0}
.cs-stats__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.cs-period{display:inline-flex;gap:2px;padding:4px;border:1px solid var(--line);border-radius:var(--r-field);
  background:var(--card)}
.cs-period a{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border-radius:6px;font-size:14px;
  font-weight:500;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.cs-period a:hover{background:var(--paper-2);color:var(--ink)}
.cs-period a[aria-current]{background:var(--green-tint);color:var(--ink);font-weight:600}
.cs-period a:focus-visible{outline-offset:0}
.cs-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0}
.cs-stat{display:flex;flex-direction:column;min-width:0;padding:14px 16px;border:1px solid var(--line);
  border-radius:var(--r-card);background:var(--card)}
.cs-stat--lead{grid-column:span 2}
.cs-stat__label{font-size:14px;line-height:1.4;color:var(--ink-2)}
.cs-stat__value{margin-top:4px;font-size:22px;line-height:1.2;overflow-wrap:break-word}
.cs-stat--lead .cs-stat__value{font-size:28px}
.cs-stat__cur{font-size:14px;font-weight:500;letter-spacing:0;color:var(--ink-2)}
.cs-stat__sub{margin-top:4px;font-size:14px;line-height:1.4;color:var(--ink-3);font-variant-numeric:tabular-nums}
.cs-stats__unread{display:flex;align-items:center;gap:12px;padding:16px;border:1px dashed var(--line-strong);
  border-radius:var(--r-card);background:var(--paper-2)}
.cs-stats__unread .cs-icon{color:var(--ink-3)}
@media (min-width:1024px){
  .cs-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cs-stat__value{font-size:26px}
  .cs-stat--lead .cs-stat__value{font-size:32px}
}
body.op .op-numbers{display:flex;flex-direction:column;gap:12px}
body.op .op-numbers>p{margin:0}
body.op .op-numhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
body.op .op-numhead .op-h2{margin:0}
body.op .op-stats.op-stats--4{gap:1px;background:var(--line)}
body.op .op-stats.op-stats--4>div:nth-child(n){border-width:0;background:var(--card)}
body.op .op-stats .op-stats__sub{font-family:var(--sans);font-size:14px;font-weight:400;line-height:1.4;color:var(--ink-2)}
@media (min-width:1024px){
  body.op .op-stats.op-stats--4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* Integration navigation and focused setup. Keep the existing brand tokens. */
.cs-siderail__context{padding:8px 14px 18px;display:flex;flex-direction:column;gap:4px;min-width:0}
.cs-siderail__context-label{font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.cs-siderail__context-name{font-size:14px;font-weight:600;overflow-wrap:anywhere}
.wz-cols.wz-cols--focused{display:flex;flex-direction:column;max-width:920px;gap:20px}
.wz-cols--focused>.wz-task,.wz-cols--focused>.wz-guide-fold{width:100%;min-width:0}
.wz-guide-fold{border:1px solid var(--line);border-radius:var(--r-card);background:var(--card);padding:18px 22px}
.wz-guide-fold>summary{cursor:pointer;font-size:15px;font-weight:600;min-height:28px}
.wz-guide-fold[open]>.wz-guide{margin-top:20px;position:static;max-height:none}
.se-conns{align-items:start}
.se-conns .wz-fold{margin-top:0}
.se-conns .wz-fold>summary{font-weight:600}
.se-next{display:flex;justify-content:flex-end}
.cs-replacement-confirm{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.cs-replacement-confirm input{width:20px;height:20px;flex-shrink:0;margin:2px 0}
.cs-domain-stack{display:flex;flex-direction:column;gap:20px;max-width:960px}
.cs-domain-card{padding:24px}
.cs-domain-alias{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:14px 0;border-top:1px solid var(--line)}
.cs-domain-alias>.cs-mono{flex:1;min-width:180px}
.cs-domain-alias form{margin:0}
.cs-activity{margin-top:24px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--card)}
.cs-activity__item{display:flex;justify-content:space-between;align-items:start;gap:20px;padding:22px 24px;border-bottom:1px solid var(--line)}
.cs-activity__item:last-child{border-bottom:0}
.cs-activity__body{min-width:0;overflow-wrap:anywhere}
.cs-activity__item time{flex-shrink:0}
.py-help{padding:16px 0;border-top:1px solid var(--line)}
.py-help>summary{font-size:14px;cursor:pointer;font-weight:500}
.py-help[open] .py-cap{padding-top:12px}
@media(max-width:767px){
  .wz-guide-fold,.cs-domain-card{padding:18px}
  .cs-activity__item{padding:18px;flex-direction:column;gap:6px}
  .cs-domain-alias{align-items:flex-start}
  .cs-domain-alias form{width:100%}
}

/* Merchant workspace: compact controls, quiet surfaces and a distinct navigation
   rail. Scope every rule to the app; operator and shopper surfaces are separate. */
.cs-app{font-size:14px;line-height:1.5;--cs-border:var(--line);--cs-muted:var(--ink-2);--gutter:24px}
.cs-app .cs-siderail{background:var(--brand-ink);border-right-color:var(--brand-ink);color:var(--on-ink);gap:3px}
.cs-app .cs-siderail__brand{margin-bottom:8px}
.cs-app .cs-siderail__brand .cs-wordmark{color:var(--on-ink);font-size:16px}
.cs-app .cs-siderail__item{min-height:40px;gap:10px;font-size:14px;color:var(--on-ink-2)}
.cs-app .cs-siderail__item .cs-icon{width:18px;height:18px}
.cs-app .cs-siderail__item:hover{background:var(--ink-raised);color:var(--on-ink)}
.cs-app .cs-siderail__item[aria-current]{background:var(--ink-raised);color:var(--on-ink);box-shadow:inset 3px 0 var(--mint)}
.cs-app .cs-siderail__sep,.cs-app .cs-siderail__foot{border-color:var(--ink-line)}
.cs-app .cs-siderail__sep{background:var(--ink-line);margin:10px 0}
.cs-app .cs-siderail__context{padding:8px 12px 12px;gap:3px}
.cs-app .cs-siderail__context-label{color:var(--on-ink-2);font-size:12px;text-transform:none;letter-spacing:0}
.cs-app .cs-siderail__context-name{color:var(--on-ink);font-size:14px}
.cs-app .cs-siderail :focus-visible{outline-color:var(--mint)}
.cs-app .cs-integration-nav{position:relative;min-width:0}
.cs-app .cs-integration-nav>.cs-siderail__item,.cs-app .cs-menu__list .cs-integration-nav>a{padding-right:44px}
.cs-app .cs-integration-nav__toggle{position:absolute;right:0;top:0;width:40px;height:40px;display:flex;align-items:center;
  justify-content:center;list-style:none;cursor:pointer;border-radius:var(--r-field);color:var(--on-ink-2)}
.cs-app .cs-integration-nav__toggle::-webkit-details-marker{display:none}
.cs-app .cs-integration-nav__toggle .cs-icon{width:16px;height:16px;transition:transform .15s var(--ease)}
.cs-app .cs-integration-nav__details[open]>.cs-integration-nav__toggle .cs-icon{transform:rotate(180deg)}
.cs-app .cs-integration-nav__toggle:hover{background:var(--ink-raised);color:var(--on-ink)}
.cs-app .cs-integration-nav__list{display:flex;flex-direction:column;gap:2px;max-height:220px;overflow-y:auto;
  margin:4px 0 6px 20px;padding:2px 0 2px 10px;border-left:1px solid var(--ink-line);scrollbar-width:thin}
.cs-app .cs-integration-nav__link{display:flex;align-items:center;min-height:36px;gap:8px;padding:7px 10px;border-radius:6px;
  color:var(--on-ink-2);font-size:14px;line-height:1.4;text-decoration:none;overflow-wrap:anywhere}
.cs-app .cs-integration-nav__link:hover{color:var(--on-ink);background:var(--ink-raised)}
.cs-app .cs-integration-nav__link[aria-current]{color:var(--mint);background:rgba(61,220,151,.08);font-weight:500}
.cs-app .cs-topbar{height:56px}
.cs-app .cs-topbar__integration{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:600}
.cs-app .cs-topbar__integration>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-app .cs-topbar__integration .cs-icon{width:17px;height:17px;color:var(--ink-3);flex-shrink:0}
.cs-app .cs-userchip{min-height:36px;border:0;background:transparent;padding-right:0;font-weight:400}
.cs-app .cs-userchip__ini{width:30px;height:30px;font-size:12px}
.cs-app .cs-content{padding-top:16px;padding-bottom:36px;gap:16px}
.cs-app .cs-title,.cs-app .wz-title{font-size:22px}
.cs-app .cs-h2{font-size:18px}
.cs-app .cs-lead,.cs-app .cs-p,.cs-app .wz-why{font-size:14px;line-height:1.5}
.cs-app .cs-storehead{gap:12px}
.cs-app .cs-storehead__top{gap:16px}
.cs-app .cs-storehead__left>.cs-back{min-height:28px;margin-bottom:4px}
.cs-app .cs-storehead__host{margin-top:2px;font-size:13px}
.cs-app .cs-storehead__copy{min-height:32px;font-size:13px}
.cs-app .cs-card{padding:16px}
.cs-app .cs-card--20,.cs-app .cs-card--16{padding:16px}
.cs-app .cs-btn{height:36px;font-size:13px;padding-left:12px;padding-right:12px}
.cs-app .cs-btn--wrap{height:auto;min-height:36px;padding-top:8px;padding-bottom:8px}
.cs-app .cs-field__ctl{height:36px;border-color:#8E949A}
.cs-app .cs-field__ctl:focus-within{border-color:var(--green)}
.cs-app .cs-field__ctl input,.cs-app .cs-field__ctl select{font-size:14px}
.cs-app .cs-field.is-error .cs-field__ctl{border-color:var(--red)}
.cs-app .cs-field.is-ok .cs-field__ctl{border-color:var(--green)}
.cs-app .cs-grid,.cs-app .se,.cs-app .se-top,.cs-app .se-conns{gap:12px}
.cs-app .se{padding-top:0}
.cs-app .se-facts{margin-top:8px}
.cs-app .se-facts .se-fact{padding:8px 0;column-gap:12px}
.cs-app .se-facts .se-fact dd{font-size:14px}
.cs-app .se-conn__form{padding-top:0;margin-top:4px;border-top:0}
.cs-app .se-form{gap:12px}
.cs-app .wz-more>summary{min-height:36px;font-size:14px;text-decoration:none}
.cs-app .wz-more>summary:hover{text-decoration:underline}
.cs-app .wz,.cs-app .wz-cols.wz-cols--focused{gap:16px}
.cs-app .wz-cols.wz-cols--focused{max-width:860px}
.cs-app .wz-card{padding:16px;gap:12px}
.cs-app .wz-card__head{margin-bottom:0}
.cs-app .wz-card__t{font-size:16px}
.cs-app .wz-nav{margin-top:12px}
.cs-app .wz-seg__bar{height:4px}
.cs-app .wz-locks{column-gap:16px;font-size:13px}
.cs-app .wz-guide-fold{padding:12px 0;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent}
.cs-app .wz-guide-fold>summary{min-height:32px;font-size:14px}
.cs-app .wz-guide-fold[open]>.wz-guide{margin-top:12px}
.cs-app .wz-help{padding-top:12px}
.cs-app .cs-checkrow__text{font-size:14px}
.cs-app .cs-checkrow__mark{width:18px;height:18px}
.cs-app .st-row{padding:12px 16px;gap:12px}
.cs-app .st-row__main{gap:6px}
.cs-app .st-row__name{font-size:16px}
.cs-app .ov{gap:20px}
.cs-app .ov-main,.cs-app .ov-side{gap:16px}
.cs-app .cs-domain-stack{gap:16px}
.cs-app .cs-domain-card{padding:16px}
.cs-app .cs-activity__item{padding:12px 16px;gap:12px}
.cs-app .bl2{gap:16px}
.cs-app .bl2-stats,.cs-app .bl2-columns,.cs-app .bl2-stack{gap:12px}
.cs-app .bl2-stat{padding:14px 16px}
.cs-app .bl2-stat h2{margin-bottom:8px;font-size:14px;font-weight:500}
.cs-app .bl2-value{font-size:24px}
.cs-app .bl2-note{margin-top:8px;font-size:14px;line-height:1.5}
.cs-app .bl2-boxhead{padding:12px 16px;background:var(--paper)}
.cs-app .bl2-boxhead h2{font-size:16px}
.cs-app .bl2-boxbody{padding:12px 16px}
.cs-app .bl2-box>.st-rows,.cs-app .bl2-boxbody>.st-rows{border:0;border-radius:0}
.cs-app .bl2-box .bl-row{border-radius:0}
/* Consistent workspace density across account, integrations and partner pages. */
.cs-app .cs-content :is(.cs-g20,.cs-g24,.cs-g32,.cs-g40,.cs-g48,.cs-g64){gap:16px}
.cs-app :is(.cs-h3,.cs-h4,.cs-radio__title,.se-facts .cs-mono,.ac-email){font-size:15px}
.cs-app :is(.cs-small,.cs-field__hint,.cs-label,.cs-field__head label,.cs-field__label,.cs-mono,
  .wz-note,.wz-card__sub,.wz-help,.wz-eyebrow,.wz-count,.wz-seg__label,.cs-checkrow__sub){font-size:13px}
.cs-app .cs-pill{font-size:12px}
.cs-app :is(.cs-radio,.cs-msg){padding:12px}
.cs-app .cs-msg__title{font-size:14px}
.cs-app .cs-msg__text{font-size:13px}
.cs-app .cs-check{font-size:14px;min-height:36px;padding:6px 0}
.cs-app :is(.ac-grid,.tk-g,.tk-form,.tk-labels,.pt-split,.pt-stack,.pt-side,.pt-stores){gap:16px}
.cs-app :is(.st-first,.st-cont){gap:20px}
.cs-app :is(.ov-att__when,.ov-empty__text,.pt-steps li,.pt-items li,.pt-kv dt,.pt-odate,.pt-how__list dd){font-size:14px}
.cs-app :is(.ov-empty,.cs-empty){padding:24px 16px;gap:12px}
.cs-app .ov-note{padding:12px 16px}
.cs-app .ov-det{padding:12px 0}
.cs-app :is(.ov-table td,.ov-table th){padding:10px 16px;font-size:13px}
.cs-app .cs-stat{padding:12px 14px}
.cs-app .cs-stat__value,.cs-app .cs-stat--lead .cs-stat__value{font-size:24px}
.cs-app .cs-stat__label,.cs-app .cs-stat__sub{font-size:13px}
.cs-app .pt-card__head{margin-bottom:12px}
.cs-app .pt-acts--head{margin-top:12px}
.cs-app .pt-how>summary{min-height:40px;padding:10px 16px}
.cs-app .pt-how__title{font-size:15px}
.cs-app .pt-how__list{padding:16px;gap:16px}
.cs-app .pt-ocard{padding:16px;gap:12px}
.cs-app .pt-figs{gap:16px}
.cs-app .pt-fold>summary{font-size:14px;min-height:36px}
.cs-app .tk-where>summary{font-size:14px;min-height:40px}
.cs-app .tk-where__steps{gap:12px;padding:12px 16px}
.cs-app .tk-off{padding-top:12px}
.cs-app .ac-settings{padding:0;max-width:880px}
.cs-app .ac-setting{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px}
.cs-app .ac-setting+.ac-setting{border-top:1px solid var(--line)}
.cs-app .ac-setting .cs-h2{font-size:14px}
.cs-app .ac-setting .cs-p{font-size:13px}
.cs-app .ac-setting form{margin:0;flex-shrink:0}
.cs-app .ac-setting--plan{align-items:flex-start}
.cs-app .ac-setting--plan>.cs-h2{flex:0 0 100px}
.cs-app .ac-setting--plan>.cs-p{flex:1;max-width:none}
/* Both connection summaries share their bottom action row. Public IDs reveal
   their complete value without forcing a narrow facts column to wrap. */
.cs-app .se-conns{align-items:stretch}
.cs-app .se-conns:has(.se-conn__form>details[open]){align-items:start}
.cs-app .se-conns .se-conn{gap:8px;min-width:0}
.cs-app .se-conns .se-conn__form{margin-top:auto;padding-top:8px}
.cs-app .se-conns .se-facts{margin-top:0}
.cs-app .se-conns .se-fact{grid-template-columns:112px minmax(0,1fr);align-items:start}
.cs-app .se-conns .se-fact dt{font-size:13px}
.cs-app .se-conns .se-fact dd{min-width:0;overflow:visible}
.cs-app .se-conns .se-fact__name{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-app .se-conns .se-fact__note{font-size:12px}
.cs-app .se-value{min-width:0;max-width:100%}
.cs-app .se-value>summary{display:flex;align-items:center;gap:6px;min-width:0;min-height:22px;cursor:pointer;list-style:none;border-radius:4px}
.cs-app .se-value>summary::-webkit-details-marker{display:none}
.cs-app .se-value>summary:hover{color:var(--green)}
.cs-app .se-value .se-value__short{display:block;flex:1;min-width:0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;word-break:normal}
.cs-app .se-value>summary .cs-icon{color:var(--ink-3);width:14px;height:14px}
.cs-app .se-value[open]>summary .cs-icon{transform:rotate(180deg)}
.cs-app .se-value__body{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0 2px;padding:8px;background:var(--paper-2);border-radius:6px}
.cs-app .se-value .se-value__full{display:block;width:100%;font-size:13px;overflow-wrap:anywhere;word-break:break-word;user-select:all}
.cs-app .se-value__copy{height:28px;padding:0 8px;font-size:12px}
/* A single domain settings surface replaces repeated address summary cards. */
.cs-app .cs-domain-stack{max-width:none;gap:12px}
.cs-app .cs-domain-settings{padding:0;max-width:880px}
.cs-app .cs-domain-section{padding:14px 16px}
.cs-app .cs-domain-section+.cs-domain-section{border-top:1px solid var(--line)}
.cs-app .cs-domain-section>.cs-h3{font-size:14px;margin-bottom:4px}
.cs-app .cs-domain-alias{padding:8px 0;border-top:0;gap:8px}
.cs-app .cs-domain-alias+.cs-domain-alias{border-top:1px solid var(--line-2)}
.cs-app .cs-domain-alias>.cs-domain-host{flex:1 1 220px;min-width:0;font-size:13px;overflow-wrap:anywhere}
.cs-app .cs-domain-alias form{flex:0 0 auto}
.cs-app .cs-domain-section>.wz-more{margin-top:4px;padding-top:0}
.cs-app .cs-domain-section>.wz-more>summary{font-size:13px;font-weight:500;min-height:36px}
.cs-app .cs-domain-settings>.wz-more{margin:0;padding:0 16px}
.cs-app .cs-domain-settings>.wz-more>summary{font-size:13px;font-weight:400}
.cs-app .cs-domain-settings .wz-more__body{max-width:640px;padding-top:8px;gap:12px}
.cs-app .cs-domain-settings form>.cs-col{gap:12px}
.cs-app .cs-domain-settings form .cs-btn{align-self:flex-start}
/* Tracking and partner configuration open only when the merchant needs them. */
.cs-app .cs-card.tk-provider{display:block;padding:0}
.cs-app .tk-provider__summary{display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 16px;cursor:pointer;list-style:none}
.cs-app .tk-provider__summary::-webkit-details-marker{display:none}
.cs-app .tk-provider__summary .tk-g__head{flex:1;min-width:0;align-items:center}
.cs-app .tk-provider__summary .cs-h3{font-size:14px}
.cs-app .tk-provider__name{flex:1;min-width:0;font-size:14px;font-weight:600}
.cs-app .tk-provider__action{font-size:13px;color:var(--ink-2);display:flex;align-items:center;gap:6px;flex-shrink:0}
.cs-app .tk-provider__chev{width:16px;height:16px;color:var(--ink-3);flex-shrink:0}
.cs-app .tk-provider[open] .tk-provider__chev{transform:rotate(180deg)}
.cs-app .tk-provider__body{padding:12px 16px 16px;border-top:1px solid var(--line)}
.cs-app .tk-provider__body>.cs-col{gap:12px}
.cs-app .tk-action{margin-top:8px}
.cs-app :is(.pt-manage-fold,.pt-add-fold,.pt-setup-fold){margin-top:4px}
.cs-app :is(.pt-manage-fold,.pt-add-fold,.pt-setup-fold)>summary{display:flex;justify-content:space-between;gap:12px;margin:0;padding:4px 0;min-height:36px}
.cs-app :is(.pt-manage-fold,.pt-add-fold,.pt-setup-fold)>summary>span[id]{flex:1;min-width:0}
.cs-app :is(.pt-manage-fold,.pt-add-fold,.pt-setup-fold)>.pt-fold__body{padding:12px 0 0;border-top:1px solid var(--line)}
/* Branding controls retain their existing form and preview, with shorter
   option rows inside the settings column. */
.cs-app .cd{gap:20px}
.cs-app .cd-main,.cs-app .cd-form{gap:16px}
.cs-app .cd-card{padding:16px}
.cs-app .cd-set{gap:8px}
.cs-app .cd .cs-radio{padding:10px;gap:8px;min-height:44px}
.cs-app .cd .cs-radio__title{font-size:13px;line-height:1.4}
.cs-app .cd .cs-radio__sub{font-size:12px;line-height:1.4}
.cs-app .cd .cs-radio__dot{width:16px;height:16px;margin-top:2px}
.cs-app .cd-tops .cs-radio:has(input:checked){padding-right:36px}
.cs-app .cd-tops .cs-radio:has(input:checked)::after{top:12px;right:10px;width:16px;height:16px}
.cs-app .cd-shapes .cs-radio{padding:24px 8px 10px;gap:0}
.cs-app .cd-shapes .cs-radio__body{padding:0 0 8px}
.cs-app .cd-shape{width:48px;height:28px}
.cs-app .cd-page{gap:12px}
.cs-app .cd-page .cd-sk{width:66px;height:46px}
.cs-app .cd-page__k{font-size:13px}
.cs-app .cd-page__name{font-size:15px}
.cs-app .cd-page__go{min-height:36px;font-size:13px}
.cs-app .cd-chip{width:36px;height:36px}
.cs-app .cd-swatch{width:36px;height:36px}
.cs-app .cd-extra>summary,.cs-app .cd-switch{min-height:48px;padding:10px 12px}
.cs-app .cd-extra__t,.cs-app .cd-switch__t{font-size:14px}
.cs-app .cd-extra__sub,.cs-app .cd-extra__on{font-size:13px}
.cs-app .cd-arr__in{height:36px;font-size:14px}
.cs-app .cd-bar{padding-top:10px;padding-bottom:10px}
.cs-app .cd-side{top:72px}
@media(max-width:639px),(pointer:coarse){
  .cs-app .cd-swatch{width:44px;height:44px}
  .cs-app .cd-arr__in{height:44px;font-size:16px}
  .cs-app .cd-page__go{min-height:44px}
}
/* Checkout page selection: a compact radio row and one preview. Native radio
   selection works without JavaScript; saving keeps the existing POST action. */
.cs-app .cp{gap:12px;max-width:none}
.cs-app .cp-picker{display:flex;flex-wrap:wrap;gap:6px;border:0;margin:0;padding:0;min-width:0}
.cs-app .cp-picker>legend{font-size:13px;font-weight:500;margin-bottom:8px;padding:0}
.cs-app .cp-choice-label{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 12px;border:1px solid var(--line-strong);border-radius:6px;cursor:pointer;font-size:13px;background:var(--card)}
.cs-app .cp-choice-status{font-size:12px;font-weight:400;padding:1px 5px;border-radius:4px;background:var(--green-tint);color:var(--green-hover)}
.cs-app .cp-choice:checked+.cp-choice-label{border-color:var(--green);background:var(--green-tint);color:var(--green-hover);font-weight:600}
.cs-app .cp-choice:focus-visible+.cp-choice-label{outline:2px solid var(--green);outline-offset:2px}
.cs-app .cp-list--preview{grid-template-columns:1fr;gap:12px}
.cs-app .cp-list--preview .cp-card{flex-direction:row}
.cs-app .cp-list--preview .cp-pic{flex:0 0 180px;padding:16px;border-bottom:0;border-right:1px solid var(--line);min-height:0}
.cs-app .cp-list--preview .cp-pic .cd-sk{zoom:1.5}
.cs-app .cp-list--preview .cp-body{padding:16px;gap:8px;min-width:0}
.cs-app .cp-name{font-size:17px}
.cs-app .cp-line{font-size:14px}
.cs-app .cp-shows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px}
.cs-app .cp-shows>li{font-size:13px;padding-left:20px}
.cs-app .cp-foot{padding-top:10px;gap:8px}
.cs-app .cp-inuse,.cs-app .cp-live{min-height:36px;font-size:13px}
.cs-app .cp-tag,.cs-app .cp-note{font-size:12px}
@supports selector(:has(*)){
  .cs-app .cp-list--preview>.cp-card{display:none}
  .cs-app .cp:has(#cp-choice-classic:checked) [data-template="classic"],
  .cs-app .cp:has(#cp-choice-flow-max:checked) [data-template="flow-max"],
  .cs-app .cp:has(#cp-choice-assured-max:checked) [data-template="assured-max"],
  .cs-app .cp:has(#cp-choice-flow-medium:checked) [data-template="flow-medium"],
  .cs-app .cp:has(#cp-choice-assured-medium:checked) [data-template="assured-medium"]{display:flex}
}
@media(min-width:1024px){
  .cs-app .cs-siderail{width:216px}
  .cs-app .cs-siderail__brand{height:56px;margin-bottom:4px;padding-left:4px;gap:8px}
  .cs-app .cs-siderail__brand .cs-wordmark{font-size:15px}
  .cs-app .cs-siderail__item{min-height:36px;font-size:13px}
  .cs-app .cs-integration-nav__toggle{height:36px}
  .cs-app .cs-integration-nav__link{min-height:32px;font-size:13px}
  .cs-app .cs-siderail__context{padding-top:4px;padding-bottom:8px}
}
@media(min-width:800px){.cs-app .se-conns{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:799px){
  .cs-app .se-conns{grid-template-columns:1fr}
  .cs-app .cp-list--preview .cp-pic{flex-basis:140px}
  .cs-app .cp-list--preview .cp-pic .cd-sk{zoom:1.2}
  .cs-app .cp-shows{grid-template-columns:1fr}
}
@media(max-width:1279px){
  .cs-app .pt-tbl td.pt-t>b{white-space:normal;overflow-wrap:anywhere;min-width:0}
}
@media(max-width:639px){
  .cs-app .se-conns .se-fact{grid-template-columns:92px minmax(0,1fr)}
  .cs-app .se-value>summary{min-height:32px}
  .cs-app .se-value__copy{min-height:44px}
  .cs-app .cs-domain-card.cs-domain-settings{padding:0}
  .cs-app .cs-card.ac-settings{padding:0}
  .cs-app .ac-setting{flex-wrap:wrap;gap:10px}
  .cs-app .ac-setting--plan{flex-direction:column;gap:6px}
  .cs-app .ac-setting--plan>.cs-h2{flex-basis:auto}
  .cs-app .ac-setting>.cs-btn,.cs-app .ac-setting form,.cs-app .ac-setting form .cs-btn{width:100%}
  .cs-app .cs-domain-alias{align-items:center}
  .cs-app .cs-domain-alias form{width:auto}
  .cs-app .cp-list--preview .cp-card{flex-direction:column}
  .cs-app .cp-list--preview .cp-pic{flex-basis:auto;padding:12px;border-right:0;border-bottom:1px solid var(--line)}
  .cs-app .cp-list--preview .cp-pic .cd-sk{zoom:1}
  .cs-app .cp-choice-label{min-height:44px;padding:8px 10px}
  .cs-app :is(.wz-more>summary,.pt-fold>summary,.cs-check){min-height:44px}
  .cs-app .tk-provider__summary{min-height:56px}
}
@media(pointer:coarse){
  .cs-app .cs-btn,.cs-app .cs-field__ctl,.cs-app .cs-copy__btn,.cs-app .cp-choice-label{min-height:44px}
  .cs-app :is(.cs-siderail__item,.cs-integration-nav__toggle,.cs-integration-nav__link,.se-value>summary){min-height:44px}
}
@media(max-width:1023px){
  .cs-app .cs-topbar{height:64px}
  .cs-app .cs-topbar__phone .cs-menu__list{background:var(--brand-ink);border-color:var(--ink-line);color:var(--on-ink);padding:12px}
  .cs-app .cs-topbar__phone .cs-menu__list a,.cs-app .cs-topbar__phone .cs-menu__list button{color:var(--on-ink-2);font-size:14px;min-height:44px}
  .cs-app .cs-topbar__phone .cs-menu__list a:hover,.cs-app .cs-topbar__phone .cs-menu__list a[aria-current]{background:var(--ink-raised);color:var(--on-ink)}
  .cs-app .cs-topbar__phone .cs-menu__list .cs-icon{color:inherit}
  .cs-app .cs-topbar__phone .cs-menu__sep{background:var(--ink-line)}
  .cs-app .cs-topbar__phone .cs-menu__list :focus-visible{outline-color:var(--mint)}
  .cs-app .cs-topbar__phone .cs-integration-nav__toggle{height:44px;width:44px}
  .cs-app .cs-topbar__phone .cs-menu__list .cs-integration-nav__link[aria-current]{color:var(--mint);background:rgba(61,220,151,.08)}
  .cs-app .cs-topbar__phone .cs-menu__list .cs-menu__danger{color:#FFB4AA;background:transparent}
}
@media(max-width:639px){
  .cs-app{--gutter:16px}
  .cs-app .cs-content{padding-top:16px;gap:16px}
  .cs-app .cs-title,.cs-app .wz-title{font-size:22px}
  .cs-app .cs-card,.cs-app .wz-card,.cs-app .cs-domain-card{padding:16px}
  .cs-app .cs-btn,.cs-app .cs-field__ctl{height:44px}
  .cs-app .cs-btn--wrap{height:auto;min-height:44px}
  .cs-app .cs-field__ctl input,.cs-app .cs-field__ctl select{font-size:16px}
  .cs-app .cs-storehead__copy{min-height:44px}
  .cs-app .bl2-stat,.cs-app .bl2-boxhead,.cs-app .bl2-boxbody,.cs-app .st-row{padding:16px}
  .cs-app .bl2-value{font-size:24px}
}
/* Operator workspaces. All selectors stay under body.op so checkout and the
   merchant portal keep their own layout, typography and interaction sizing.
   2026-10-29: c1ef677/834f40b opw labels (eyebrow, stat labels, th, badge,
   tab count, review target, td labels, progress meta, step labels) raised
   from 10-11px to the 12px floor (test_ui). */
body.op .opw{display:flex;flex-direction:column;gap:18px;width:100%;min-width:0;font-size:14px;line-height:1.5}
body.op .opw *,body.op .opw *::before,body.op .opw *::after{box-sizing:border-box}
body.op .opw h1{font-size:25px;line-height:1.25;letter-spacing:-.025em;margin:0;font-weight:650}
body.op .opw h2{font-size:16px;line-height:1.4;margin:0;font-weight:650}
body.op .opw h3{font-size:15px;line-height:1.45;margin:8px 0 0;font-weight:650}
body.op .opw p{margin:0}
body.op .opw a{overflow-wrap:anywhere}
body.op .opw-head{display:flex;justify-content:space-between;align-items:center;gap:18px;min-width:0;padding:2px 0 0}
body.op .opw-head>div:first-child{min-width:0}
body.op .opw-description{color:var(--ink-2);font-size:14px;margin-top:7px!important;max-width:78ch}
body.op .opw-eyebrow{color:var(--green);font-size:12px;font-weight:650;text-transform:uppercase;letter-spacing:.11em;margin-bottom:6px!important}
body.op .opw-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;min-width:0}
body.op .opw-stat{min-width:0;border:1px solid var(--line);border-radius:10px;background:var(--card);padding:15px 16px;display:flex;flex-direction:column;gap:6px}
body.op .opw-stat-label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.075em;color:var(--ink-2)}
body.op .opw-stat strong{font-size:18px;line-height:1.3;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
body.op .opw-sub{display:block;color:var(--ink-2);font-size:12px;line-height:1.45;margin-top:3px;overflow-wrap:anywhere;font-weight:400}
body.op .opw-stat .opw-sub{margin-top:0}
body.op .opw-primary{font-weight:600;color:var(--ink);text-decoration:none}
body.op .opw-primary:hover{text-decoration:underline;color:var(--green)}
body.op .opw-panel{border:1px solid var(--line);border-radius:10px;background:var(--card);min-width:0;overflow:hidden}
body.op .opw-panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 17px;border-bottom:1px solid var(--line)}
body.op .opw-panel-head>div:first-child{min-width:0}
body.op .opw-panel-head p{margin-top:4px;font-size:12px;line-height:1.45;color:var(--ink-2)}
body.op .opw-panel-body{padding:16px 17px}
body.op .opw-panel-body>.opw-actions{margin-top:14px}
body.op .opw-table-wrap{max-width:100%;min-width:0;overflow-x:auto}
body.op .opw-table{width:100%;margin:0;border-collapse:collapse;table-layout:auto;font-size:13px;line-height:1.45}
body.op .opw-table th{background:var(--paper-2);font-size:12px;letter-spacing:.055em;font-weight:650;text-transform:uppercase;color:var(--ink-2);text-align:left;white-space:nowrap;padding:10px 16px;border-bottom:1px solid var(--line)}
body.op .opw-table td{height:auto;padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere;max-width:270px}
body.op .opw-table tbody tr:last-child td{border-bottom:0}
body.op .opw-table tbody tr:hover{background:color-mix(in srgb,var(--paper-2) 55%,var(--card))}
body.op .opw-table td:first-child{min-width:155px}
body.op .opw-table .opw-row-end{width:1%;text-align:right;white-space:nowrap;vertical-align:middle}
body.op .opw-row-link{font-size:12px;text-decoration:none;display:inline-flex;align-items:center;min-height:32px;white-space:nowrap}
body.op .opw-row-link:hover{text-decoration:underline}
body.op .opw-badge{display:inline-flex;align-items:center;max-width:100%;gap:5px;min-height:23px;padding:2px 8px;border:1px solid transparent;border-radius:5px;font-size:12px;font-weight:600;line-height:1.4;white-space:normal}
body.op .opw-badge-good{color:#196948;background:#edf7f0;border-color:#d5eadd}
body.op .opw-badge-warn{color:#8b5712;background:#fff7e9;border-color:#f2e1c1}
body.op .opw-badge-bad{color:#ad352a;background:#fff1ef;border-color:#f3d7d2}
body.op .opw-badge-neutral{color:#556476;background:#f0f3f5;border-color:#e2e7ec}
body.op .opw-filters{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0;padding:0;border:0;background:none}
body.op .opw-filters>label{margin:0;min-width:0;display:block}
body.op .opw-filters .opw-search{flex:1 1 220px;max-width:430px}
body.op .opw input,body.op .opw select,body.op .opw textarea{font:inherit;width:100%;max-width:100%;min-width:0;min-height:38px;margin:0;padding:8px 11px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--ink);box-shadow:none}
body.op .opw select{padding-right:30px}
body.op .opw textarea{resize:vertical;min-height:90px}
body.op .opw input:focus,body.op .opw select:focus,body.op .opw textarea:focus{border-color:var(--green)}
body.op .opw-button,body.op a.opw-action{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:8px 12px;font-size:12px;font-weight:600;line-height:1.35;border-radius:6px;border:1px solid var(--line);background:var(--card);color:var(--ink);text-decoration:none;box-shadow:none;cursor:pointer;max-width:100%}
body.op .opw-button:hover,body.op a.opw-action:hover{background:var(--paper-2);color:var(--green);border-color:#a9c2b7}
body.op .opw-button-danger{color:#fff;background:#b73e31;border-color:#b73e31}
body.op .opw-button-danger:hover{color:#fff;background:#952d24;border-color:#952d24}
body.op a.opw-action-danger{color:#a13329}
body.op .opw-clear{font-size:12px;padding:8px;white-space:nowrap}
body.op .opw-actions{display:flex;align-items:center;flex-wrap:wrap;gap:7px;min-width:0}
body.op .opw-actions-stack{display:flex;flex-direction:column;align-items:stretch;gap:0}
body.op .opw-actions-stack a.opw-action{display:block;border:0;border-bottom:1px solid var(--line);border-radius:0;text-align:left;padding:12px 0;background:none;font-size:13px;font-weight:500}
body.op .opw-actions-stack a.opw-action:first-child{padding-top:0}
body.op .opw-actions-stack a.opw-action:last-child{border-bottom:0;padding-bottom:0}
body.op .opw-actions-stack a.opw-action .opw-sub{font-size:12px;font-weight:400}
body.op .opw-tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding:0 0 0;margin:0}
body.op .opw-tabs a{display:inline-flex;align-items:center;gap:6px;padding:9px 12px;min-height:38px;border-bottom:2px solid transparent;color:var(--ink-2);font-size:13px;font-weight:500;text-decoration:none;margin-bottom:-1px;white-space:nowrap}
body.op .opw-tabs a:hover{color:var(--green)}
body.op .opw-tabs a[aria-current="page"]{color:var(--green);border-bottom-color:var(--green);font-weight:650}
body.op .opw-tab-count{padding:0 5px;border-radius:4px;background:var(--paper-2);color:var(--ink-2);font-size:12px;line-height:18px;font-variant-numeric:tabular-nums}
body.op .opw-entitlement{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:-8px;font-size:12px;color:var(--ink-2)}
body.op .opw-entitlement .opw-sub{display:inline;margin:0}
body.op .opw-columns{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:16px;align-items:start;min-width:0}
body.op .opw-main-column,body.op .opw-side-column{display:flex;flex-direction:column;gap:16px;min-width:0}
body.op .opw-two-up{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start;min-width:0}
body.op .opw-facts{display:block;margin:0;min-width:0}
body.op .opw-facts>div{display:grid;grid-template-columns:minmax(110px,.8fr) minmax(0,1.2fr);gap:15px;padding:10px 0;border-bottom:1px solid var(--line)}
body.op .opw-facts>div:last-child{border-bottom:0}
body.op .opw-facts dt{color:var(--ink-2);font-weight:400;font-size:13px}
body.op .opw-facts dd{margin:0;font-size:13px;overflow-wrap:anywhere;min-width:0}
body.op .opw-empty{padding:28px 20px;text-align:center;color:var(--ink-2);font-size:13px}
body.op .opw-empty strong{display:block;color:var(--ink);font-size:14px;font-weight:500}
body.op .opw-empty p{margin-top:6px;max-width:62ch;margin-inline:auto}
body.op .opw-notice{padding:12px 14px;border:1px solid var(--line);background:var(--paper-2);border-radius:7px;font-size:13px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
body.op .opw-notice-warn{background:#fff9ef;border-color:#eedfc5}
body.op .opw-notice-bad{background:#fff3f1;border-color:#edcbc6}
body.op .opw-notice-good{background:#eff8f2;border-color:#cfe6d7}
body.op .opw-panel>.opw-notice{margin:14px 16px}
body.op .opw-issues{display:flex;flex-direction:column;gap:10px;min-width:0}
body.op .opw-panel>.opw-issues{padding:14px 16px}
body.op .opw-issue{padding:15px 16px;background:var(--card);border:1px solid var(--line);border-radius:8px;min-width:0}
body.op .opw-issue-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
body.op .opw-issue-head>div{min-width:0}
body.op .opw-issue .opw-badge{margin-right:5px}
body.op .opw-issue p{font-size:13px;color:var(--ink-2);margin-top:7px;max-width:95ch}
body.op .opw-affected{display:flex;flex-wrap:wrap;gap:5px;font-size:12px;margin:8px 0}
body.op .opw-activity{margin:0!important;padding:0!important;list-style:none!important}
body.op .opw-activity>li{padding:13px 17px;margin:0;border-bottom:1px solid var(--line)}
body.op .opw-activity>li:last-child{border-bottom:0}
body.op .opw-activity-title{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px}
body.op .opw-footnote{font-size:12px;color:var(--ink-2);max-width:88ch}
body.op .opw-mono{font-family:var(--mono);font-size:12px;overflow-wrap:anywhere}
body.op .opw-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body.op .opw-review-target{padding:14px 16px;border:1px solid var(--line);background:var(--card);border-radius:8px;display:flex;flex-direction:column;gap:4px;overflow-wrap:anywhere}
body.op .opw-review-target>span{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-2)}
body.op .opw-review-form{margin:0;display:flex;flex-direction:column;gap:15px;padding:0;border:0;background:none}
body.op .opw-panel>.opw-review-form.opw-panel-body{padding:16px 17px}
body.op .opw-field{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:500;margin:0}
body.op .opw-field strong{display:inline}
body.op .opw-form-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
body.op .opw-inline-form{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:0;margin:0;border:0;background:none;min-width:0}
body.op .opw-inline-form input:not([type=hidden]){flex:1 1 160px;max-width:250px;font-size:12px}
body.op .opw-inline-reason{display:block;flex:1 1 160px;min-width:0;margin:0}
body.op .opw-issue-controls{display:flex;flex-direction:column;gap:7px;max-width:370px}
body.op .opw-triage{padding:0;margin:0;border:0;background:none;min-width:0}
body.op .opw-triage>summary{font-size:12px;color:var(--green);padding:6px 0;cursor:pointer;white-space:nowrap}
body.op .opw-triage>div{display:flex;flex-direction:column;gap:8px;padding-top:6px}
body.op .opw-domain-request{border:0;border-bottom:1px solid var(--line);margin:0;padding:0;border-radius:0;background:none}
body.op .opw-domain-request:last-child{border-bottom:0}
body.op .opw-domain-request>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 17px;font-size:13px;cursor:pointer;overflow-wrap:anywhere}
body.op .opw-dns-row{display:grid;grid-template-columns:95px minmax(0,1fr) minmax(0,1.4fr);gap:8px}
body.op .opw-dns-row label{min-width:0;margin:0}
body.op .opw-panel-body>.opw-stats{margin-bottom:12px}
body.op .opw-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
body.op .opw-check{display:flex;align-items:flex-start;gap:9px;font-size:13px;margin:0;font-weight:400}
body.op .opw-check input[type=checkbox]{appearance:auto;flex:0 0 17px;width:17px;height:17px;min-height:17px;margin:2px 0 0;accent-color:var(--green)}
body.op .opw-check-group{border:0;border-top:1px solid var(--line);padding:15px 0 0;margin:0;min-width:0}
body.op .opw-check-group legend{font-size:13px;font-weight:600;padding:0 10px 0 0}
@media(min-width:1024px){
  body.op .side{width:216px}
  body.op .side-logo{padding:19px 18px 22px}
  body.op .nav{padding-left:12px;padding-right:12px}
  body.op .nav a{font-size:14px;min-height:40px;height:40px;gap:10px}
  body.op .side-foot{font-size:12px}
  body.op .app-head{padding:14px 24px;max-width:1440px}
  body.op .app-main{padding:8px 24px 56px;gap:18px;max-width:1440px}
  body.op .opw-columns .opw-table td,body.op .opw-columns .opw-table th{padding-left:12px;padding-right:12px}
  body.op .opw-columns .opw-table td:first-child{min-width:130px}
}
@media(max-width:1199px){
  body.op .opw-columns{grid-template-columns:minmax(0,1fr) 225px;gap:14px}
  body.op .opw-stats{gap:10px}
  body.op .opw-stat{padding:13px}
  body.op .opw-table td,body.op .opw-table th{padding-left:12px;padding-right:12px}
}
@media(max-width:900px){
  body.op .opw-columns{grid-template-columns:minmax(0,1fr)}
  body.op .opw-controls .opw-actions-stack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 22px}
  body.op .opw-controls .opw-actions-stack a.opw-action{padding:7px 0}
}
@media(max-width:700px){
  body.op .opw-dns-row{grid-template-columns:82px minmax(0,1fr)}
  body.op .opw-dns-row>label:last-child{grid-column:1 / -1}
  body.op .opw-form-grid{grid-template-columns:minmax(0,1fr)}
  body.op .opw{gap:15px}
  body.op .opw-head{align-items:flex-start;flex-direction:column;gap:12px}
  body.op .opw h1{font-size:23px}
  body.op .opw-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  body.op .opw-stat strong{font-size:16px}
  body.op .opw-panel-head{padding:13px 14px;align-items:flex-start}
  body.op .opw-panel-head .opw-actions{flex-shrink:0;max-width:44%}
  body.op .opw-panel-body{padding:14px}
  body.op .opw-two-up{grid-template-columns:minmax(0,1fr)}
  body.op .opw-filters .opw-search{flex:1 0 100%;max-width:none}
  body.op .opw-filters>label{flex:1 1 130px}
  body.op .opw-table-wrap{overflow:visible}
  body.op .opw-table,body.op .opw-table tbody,body.op .opw-table tr,body.op .opw-table td{display:block;width:100%;max-width:none;min-width:0}
  body.op .opw-table thead{display:table-header-group;position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  body.op .opw-table tr{padding:12px 14px;border-bottom:1px solid var(--line)}
  body.op .opw-table tr:last-child{border-bottom:0}
  body.op .opw-table td{display:grid;grid-template-columns:105px minmax(0,1fr);gap:4px 10px;padding:6px 0;border:0;white-space:normal;font-size:13px;height:auto}
  body.op .opw-table td::before{content:attr(data-label);font-size:12px;font-weight:500;color:var(--ink-2);grid-column:1;grid-row:1 / span 5}
  body.op .opw-table td>*{grid-column:2;justify-self:start}
  body.op .opw-table td:first-child{display:block;padding:0 0 9px;min-width:0;height:auto}
  body.op .opw-table td:first-child::before{display:none}
  body.op .opw-table td:first-child .opw-primary{font-size:14px}
  body.op .opw-table .opw-row-end{display:flex;justify-content:flex-end;padding:5px 0 0;width:100%;height:auto}
  body.op .opw-table .opw-row-end::before{display:none}
  body.op .opw-table .opw-sub{margin-top:0}
  body.op .opw-table td:first-child .opw-sub{margin-top:3px}
  body.op .opw-issue-head{flex-direction:column;gap:10px}
  body.op .opw-issue{padding:13px 14px}
  body.op .opw-tabs{gap:0}
  body.op .opw-tabs a{font-size:12px;padding:9px 10px}
}
@media(max-width:440px){
  body.op .opw-stat-label{font-size:12px;letter-spacing:.045em}
  body.op .opw-stat{padding:12px}
  body.op .opw-controls .opw-actions-stack{grid-template-columns:minmax(0,1fr)}
  body.op .opw-facts>div{grid-template-columns:100px minmax(0,1fr);gap:12px}
  body.op .opw-panel-head{flex-wrap:wrap}
  body.op .opw-panel-head .opw-actions{max-width:100%}
}
@media(pointer:coarse){
  body.op .opw-button,body.op a.opw-action,body.op .opw input,body.op .opw select,body.op .opw-row-link,body.op .opw-tabs a{min-height:44px}
  body.op .nav a{min-height:44px;height:auto}
  body.op .opw-check{min-height:44px}
}

/* Integration setup visibility, scoped to the operator's list and checklist. */
body.op .opw-list-summary{font-size:13px;color:var(--ink-2);margin:0}
body.op .opw-integration-progress-list{display:flex;flex-direction:column;gap:14px;min-width:0}
body.op .opw-integration-progress{border:1px solid var(--line);border-radius:10px;background:var(--card);overflow:hidden;min-width:0}
body.op .opw-integration-progress>header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:16px 18px 12px}
body.op .opw-integration-progress>header>div:first-child{min-width:0;overflow-wrap:anywhere}
body.op .opw-integration-progress .opw-primary{font-size:16px}
body.op .opw-integration-owner{font-size:12px;margin-top:5px;color:var(--ink-2)}
body.op .opw-integration-owner a{color:inherit;text-decoration:none}
body.op .opw-integration-owner a:hover{text-decoration:underline}
body.op .opw-integration-status{display:flex;align-items:center;gap:12px;flex-shrink:0}
body.op .opw-integration-status .opw-button{display:inline-flex;align-items:center;text-decoration:none;white-space:nowrap}
body.op .opw-integration-progress-body{padding:0 18px 14px}
body.op .opw-progress-summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
body.op .opw-setup-count{font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums}
body.op .opw-step-track{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;list-style:none;padding:0;margin:0}
body.op .opw-step-track li{position:relative;min-width:0;border-top:3px solid var(--line);padding-top:5px}
body.op .opw-step-track li.is-done{border-color:var(--green)}
body.op .opw-step-track li.is-current{border-color:var(--blue)}
body.op .opw-step-track li.is-blocked{border-color:var(--red)}
body.op .opw-step-track li.is-waiting{border-color:var(--amber-strong)}
body.op .opw-step-track li>a{display:flex;align-items:center;gap:7px;text-decoration:none;color:var(--ink-2);min-height:36px;border-radius:4px}
body.op .opw-step-track li>a:hover{background:var(--paper-2);color:var(--ink)}
body.op .opw-step-track li.is-current>a,body.op .opw-step-track li.is-blocked>a,body.op .opw-step-track li.is-waiting>a{font-weight:600;color:var(--ink)}
body.op .opw-step-label{font-size:12px;line-height:1.4;overflow-wrap:anywhere}
body.op .opw-step-mark{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex:0 0 24px;border:1px solid var(--line-strong);border-radius:50%;font-size:12px;font-weight:600;color:var(--ink-2);background:var(--card)}
body.op .is-done>.opw-step-mark,body.op .is-done>a>.opw-step-mark{color:var(--green);border-color:var(--green-line);background:var(--green-tint)}
body.op .is-current>.opw-step-mark,body.op .is-current>a>.opw-step-mark{color:var(--blue);border-color:var(--blue-line);background:var(--blue-tint)}
body.op .is-blocked>.opw-step-mark,body.op .is-blocked>a>.opw-step-mark{color:var(--red);border-color:var(--red-line);background:var(--red-tint)}
body.op .is-waiting>.opw-step-mark,body.op .is-waiting>a>.opw-step-mark{color:var(--amber);border-color:var(--amber-line);background:var(--amber-tint)}
body.op .opw-next-line{font-size:13px;color:var(--ink-2);margin:8px 0 0;line-height:1.55;overflow-wrap:anywhere}
body.op .opw-next-line.is-attention{color:var(--amber)}
body.op .opw-integration-progress>footer{padding:10px 18px;border-top:1px solid var(--line-2);display:flex;justify-content:space-between;gap:16px;align-items:center;background:var(--paper)}
body.op .opw-progress-meta{display:flex;flex-wrap:wrap;gap:3px 18px;color:var(--ink-2);font-size:12px;line-height:1.5;min-width:0;overflow-wrap:anywhere}
body.op .opw-progress-meta>span{display:block}
body.op .opw-setup-summary{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
body.op .opw-setup-summary>div{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
body.op .opw-setup-summary strong{font-size:14px}
body.op .opw-setup-panel>.opw-panel-body{padding-bottom:16px}
body.op .opw-setup-steps{padding:0;margin:0;list-style:none}
body.op .opw-setup-step{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:14px;align-items:flex-start;padding:18px;border-top:1px solid var(--line);scroll-margin-top:90px;min-width:0}
body.op .opw-setup-step>.opw-step-mark{width:28px;height:28px;flex-basis:28px;margin-top:1px}
body.op .opw-setup-step.is-current{background:var(--blue-tint)}
body.op .opw-setup-step.is-waiting{background:var(--amber-tint)}
body.op .opw-setup-step.is-blocked{background:var(--red-tint)}
body.op .opw-setup-step-content{min-width:0}
body.op .opw-setup-step-title{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
body.op .opw-setup-step-title h3{font-size:15px;line-height:1.5;margin:0}
body.op .opw-step-state{font-size:12px;color:var(--ink-2)}
body.op .is-done .opw-step-state{color:var(--green)}
body.op .is-blocked .opw-step-state{color:var(--red)}
body.op .is-waiting .opw-step-state{color:var(--amber)}
body.op .opw-setup-step-content>p{font-size:13px;line-height:1.6;color:var(--ink-2);margin:4px 0 0;overflow-wrap:anywhere}
body.op .opw-setup-step-actions{max-width:220px;min-width:0}
body.op .opw-setup-step-actions .opw-action{min-height:40px;border:1px solid var(--line-strong);border-radius:6px;padding:8px 12px;background:var(--card);text-align:center;justify-content:center;font-size:12px}
body.op .opw-setup-step.is-current .opw-action,body.op .opw-setup-step.is-blocked .opw-action,body.op .opw-setup-step.is-waiting .opw-action{color:var(--on-ink);background:var(--green);border-color:var(--green)}
body.op .opw-setup-secondary{border:1px solid var(--line);border-radius:10px;background:var(--card);padding:0;margin:0;min-width:0}
body.op .opw-setup-secondary>summary{font-size:13px;font-weight:600;padding:14px 18px;cursor:pointer;min-height:44px}
body.op .opw-setup-secondary>.opw-stats{padding:0 18px 18px;margin:0}
body.op .opw-setup-secondary>.opw-controls{border:0;border-radius:0}
@media(max-width:767px){
  body.op .opw-integration-progress>header{padding:14px;gap:10px}
  body.op .opw-integration-progress-body{padding:0 14px 14px}
  body.op .opw-integration-status{flex-direction:column;align-items:flex-end;gap:7px}
  body.op .opw-integration-status .opw-button{font-size:12px;padding:7px 10px}
  body.op .opw-step-track{gap:6px}
  body.op .opw-step-track li>a{flex-direction:column;align-items:flex-start;gap:5px;min-height:60px;padding:4px 0}
  body.op .opw-step-label{font-size:12px}
  body.op .opw-integration-progress>footer{padding:10px 14px}
  body.op .opw-setup-step{grid-template-columns:28px minmax(0,1fr);gap:8px 12px;padding:16px 14px}
  body.op .opw-setup-step-actions{grid-column:2;max-width:none}
  body.op .opw-setup-step-actions .opw-action{min-height:44px}
  body.op .opw-setup-step-title{gap:4px 10px}
}
@media(max-width:399px){
  body.op .opw-integration-progress>header{flex-direction:column}
  body.op .opw-integration-status{flex-direction:row;width:100%;justify-content:space-between;align-items:center}
  body.op .opw-step-label{font-size:12px}
}