/* Study checkout — scoped .ck-
   Same skin as the rest of the platform: PP Telegraf, #3a8518 as the single
   accent, cool-gray neutrals, light ground. No new palette, no new type.

   The page shell, card grammar and order summary are the previous checkout
   build's, unchanged. What replaced the two sliders is the audience: a chip
   set that answers the same four questions the builder's Audience tab asks,
   and under it the Digital Twin panels that audience scores against.

   The chip and field grammar is deliberately explore-intake's .i4-audf /
   .i4-chip redrawn at this page's density rather than a system of its own —
   a merchant who edits the audience in the builder and then edits it again
   here should not have to learn it twice.

   One viewport. Nothing is meant to scroll at 1440x900, so every block is
   budgeted; the page keeps overflow:auto only as a safety valve for short
   windows, never as a layout the design leans on. */

.ck-page{position:fixed;inset:0;z-index:90;background:#f6fafd;overflow:auto;
  font-family:'PP Telegraf',sans-serif;color:#050301;animation:ckpage .3s cubic-bezier(.2,.9,.25,1) both}
@keyframes ckpage{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---- top bar ---- */
.ck-bar{position:sticky;top:0;z-index:5;height:56px;display:flex;align-items:center;gap:14px;
  padding:0 24px;background:#fff;border-bottom:1px solid #e5ebf1}
.ck-bar__logo{font-size:13px;font-weight:700;letter-spacing:.02em}
.ck-bar__logo b{color:#3a8518}
.ck-bar__k{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#9aa4af;
  padding-left:14px;border-left:1px solid #e5ebf1}
/* The study name lost its page header to the one-viewport rule, so it rides
   in the bar rather than disappearing altogether. */
.ck-bar__nm{font-size:12.5px;font-weight:600;color:#636c79;padding-left:14px;border-left:1px solid #e5ebf1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40ch}
.ck-bar__sp{flex:1}
.ck-bar__x{width:32px;height:32px;border-radius:900px;border:1px solid #e5ebf1;background:#fff;
  color:#636c79;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .14s,color .14s}
.ck-bar__x:hover:not(:disabled){background:#eef2f6;color:#050301}

/* ---- shell ---- */
.ck-wrap{max-width:1140px;margin:0 auto;padding:18px 28px 16px;
  display:grid;grid-template-columns:minmax(0,1fr) 344px;gap:24px;align-items:start}
@media (max-width:1080px){.ck-wrap{grid-template-columns:minmax(0,1fr)}}
.ck-main{min-width:0;display:flex;flex-direction:column;gap:14px}

/* ---- cards ---- */
.ck-card{background:#fff;border:1px solid #e5ebf1;border-radius:16px;padding:18px 24px 20px;
  transition:opacity .18s,border-color .18s}
.ck-card__hd{display:flex;align-items:baseline;gap:12px;margin-bottom:5px}
.ck-card__hd h2{margin:0;font-size:17px;font-weight:700;letter-spacing:-.024em;line-height:1.3}
.ck-card__n{margin-left:auto;font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#b3bec9;
  white-space:nowrap}
.ck-card__lede{margin:0;font-size:12.5px;line-height:1.55;color:#7e8da0;max-width:66ch;text-wrap:pretty}
/* Stood down, not disabled: the panels are still legible and still clickable —
   clicking one is how you bring them back — they just are not what this study
   is running on. Opacity alone would make the badges unreadable, so the card
   loses its saturation instead. */
.ck-card.is-dim{background:#fbfcfe;border-color:#eef2f6}
.ck-card.is-dim .ck-pan{filter:saturate(.25);opacity:.78}

.ck-warn{display:flex;gap:11px;align-items:flex-start;background:#fcf5e6;border:1px solid #fce3b0;
  border-radius:12px;padding:11px 14px;font-size:12.5px;line-height:1.5;color:#735d32;text-wrap:pretty}
.ck-warn i{color:#d69d2b;font-size:16px;flex:none;margin-top:-1px}
.ck-warn b{color:#453413;font-weight:700}
.ck-warn a{color:#7a4d00;font-weight:700;cursor:pointer;text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:2px}

/* ---- the audience ----
   Label left, options right, one row per question. The label column is fixed
   so the four rows read as one form rather than four stacked ones. */
.ck-aud{margin-top:14px;display:flex;flex-direction:column}
.ck-af{display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;align-items:start;
  padding:11px 0;border-top:1px solid #f1f5f9}
.ck-af:first-child{border-top:none;padding-top:4px}
@media (max-width:720px){.ck-af{grid-template-columns:minmax(0,1fr);gap:8px}}
.ck-af__l{font-size:12.5px;font-weight:700;letter-spacing:-.012em;color:#3f4a57;padding-top:5px}
.ck-af__l span{display:block;font-size:11px;font-weight:500;color:#9aa4af;letter-spacing:0;margin-top:2px;
  line-height:1.35;text-wrap:pretty}
.ck-af__c{display:flex;flex-wrap:wrap;gap:6px;min-width:0}

/* A chosen value. Green because it is set, and carrying its own remove —
   the row shows the answer, so the only edit it needs in place is taking
   something out of it. Everything not chosen lives behind .ck-add. */
.ck-tag{display:inline-flex;align-items:center;gap:2px;padding:6px 4px 6px 11px;border-radius:900px;
  background:#f1f8ec;border:1px solid #a9d38c;color:#2b6418;
  font-size:11.5px;font-weight:600;letter-spacing:-.006em;line-height:1}
.ck-tag button{width:17px;height:17px;border:none;background:none;padding:0;cursor:pointer;border-radius:900px;
  display:flex;align-items:center;justify-content:center;color:#6a9c4d;font-size:12px;
  transition:background .13s,color .13s}
.ck-tag button:hover{background:#d9ecc9;color:#2b6418}
.ck-tag button:focus-visible{outline:2px solid rgba(58,133,24,.45);outline-offset:1px}
.ck-tag--none{padding:6px 11px;background:#fff;border-style:dashed;border-color:#e5ebf1;color:#b3bec9;
  font-weight:500}

/* The add control and its menu. A popover rather than an inline expansion:
   this page is budgeted to one viewport, and a row that grows by two lines
   when you open it pushes the panels below out of the fold. */
.ck-add{position:relative;display:inline-flex}
/* Icon-only, sized to match the tag remove buttons (17px) it sits beside —
   a text pill here read as a second control competing with the tags for
   the same "this is an option" weight, when it is really the one action
   that isn't a value: adding one. */
.ck-add__b{display:flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:900px;border:1px dashed #dbe3ec;background:#fff;color:#9aa4af;cursor:pointer;
  font:inherit;padding:0;flex:none;transition:border-color .13s,color .13s,background .13s}
.ck-add__b i{font-size:14px}
.ck-add__b:hover,.ck-add__b.is-on{border-color:#a9d38c;color:#2b6418;background:#f6fafd;border-style:solid}
.ck-add__b:focus-visible{outline:2px solid rgba(58,133,24,.45);outline-offset:2px}

.ck-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:30;width:max-content;max-width:340px;
  display:flex;flex-wrap:wrap;gap:5px;padding:9px;background:#fff;border:1px solid #e5ebf1;border-radius:13px;
  box-shadow:0 12px 30px rgba(4,12,21,.14);animation:ckpop .13s cubic-bezier(.2,.9,.25,1) both}
@keyframes ckpop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.ck-pop__o{border:1px solid #e5ebf1;background:#fff;color:#636c79;cursor:pointer;font:inherit;
  font-size:11.5px;font-weight:600;letter-spacing:-.006em;line-height:1;padding:7px 11px;border-radius:900px;
  transition:background .13s,border-color .13s,color .13s}
.ck-pop__o:hover{border-color:#a9d38c;background:#f1f8ec;color:#2b6418}
.ck-pop__o:focus-visible{outline:2px solid rgba(58,133,24,.45);outline-offset:2px}

/* ---- the panels ----
   A row, not a tile: the four facts a merchant reads (who, how many, how
   close, how old) are all short, and a row lets three of them sit on one
   screen with the audience above still visible. */
.ck-pans{margin-top:14px;display:flex;flex-direction:column;gap:7px}
.ck-pan{display:flex;align-items:center;gap:13px;padding:11px 14px;border:1px solid #e5ebf1;
  border-radius:13px;background:#fff;transition:border-color .14s,background .14s,opacity .18s,filter .18s}
.ck-pan:hover{border-color:#cfd8e2}
.ck-pan.is-off{background:#fbfcfe;border-style:dashed;border-color:#e5ebf1}
.ck-pan.is-off .ck-pan__nm,.ck-pan.is-off .ck-pan__meta{color:#9aa4af}
.ck-pan.is-off .ck-pan__nm{font-weight:600}

.ck-pan__tick{width:26px;height:26px;flex:none;border-radius:8px;cursor:pointer;font-size:14px;
  display:flex;align-items:center;justify-content:center;border:1px solid #a9d38c;background:#3a8518;color:#fff;
  transition:background .14s,border-color .14s,color .14s}
.ck-pan__tick:hover{background:#2b6418}
.ck-pan.is-off .ck-pan__tick{background:#fff;border-color:#dbe3ec;color:#9aa4af}
.ck-pan.is-off .ck-pan__tick:hover{border-color:#a9d38c;color:#3a8518;background:#f1f8ec}
.ck-pan__tick:focus-visible{outline:2px solid rgba(58,133,24,.45);outline-offset:2px}

.ck-pan__b{flex:1;min-width:0}
.ck-pan__hd{display:flex;align-items:center;gap:9px;min-width:0}
.ck-pan__nm{font-size:13px;font-weight:700;letter-spacing:-.014em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.ck-pan__meta{margin-top:3px;display:flex;align-items:center;gap:8px;font-size:11.5px;color:#7e8da0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ck-pan__meta b{color:#3f4a57;font-weight:700;font-variant-numeric:tabular-nums}
.ck-pan__meta em{font-style:normal;color:#b3bec9}
.ck-pan__dot{width:3px;height:3px;border-radius:900px;background:#cfd8e2;flex:none}

.ck-pan__n{flex:none;text-align:right;min-width:64px}
.ck-pan__n b{display:block;font-size:15px;font-weight:700;letter-spacing:-.024em;color:#2b6418;
  font-variant-numeric:tabular-nums;line-height:1.15}
.ck-pan__n em{font-style:normal;font-size:10.5px;color:#b3bec9;letter-spacing:.02em}

/* ---- the similarity badge ----
   High / Medium / Low carry a colour each because the whole point of the
   badge is to be read at a glance across three rows. The reason is a
   tooltip on it rather than a line under it — see the note in the JSX. */
.ck-badge{position:relative;flex:none;display:inline-flex;align-items:center;gap:4px;
  height:19px;padding:0 8px;border-radius:900px;cursor:help;
  font-size:10.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.ck-badge i{font-size:11px;opacity:.55}
.ck-badge--high{background:#e7f3de;color:#2b6418}
.ck-badge--medium{background:#fcf1dc;color:#8c5800}
.ck-badge--low{background:#eef2f6;color:#7e8da0}
.ck-badge:focus-visible{outline:2px solid rgba(58,133,24,.45);outline-offset:2px}

.ck-badge__tip{position:absolute;top:calc(100% + 8px);left:-6px;z-index:20;width:310px;
  background:#050301;color:#e8edf2;border-radius:11px;padding:10px 13px;
  font-size:11.5px;font-weight:500;line-height:1.5;letter-spacing:0;text-transform:none;text-wrap:pretty;
  box-shadow:0 10px 26px rgba(4,12,21,.24);
  opacity:0;visibility:hidden;transform:translateY(-3px);transition:opacity .13s,transform .13s,visibility .13s}
.ck-badge__tip b{display:block;color:#fff;font-weight:700;margin-bottom:3px;font-size:11.5px}
.ck-badge__tip::before{content:"";position:absolute;bottom:100%;left:14px;
  border:5px solid transparent;border-bottom-color:#050301}
.ck-badge:hover .ck-badge__tip,.ck-badge:focus-visible .ck-badge__tip{opacity:1;visibility:visible;transform:none}
/* The last row's tooltip would hang off the bottom of a short window, so it
   flips above the badge instead. */
.ck-pan:last-child .ck-badge__tip{top:auto;bottom:calc(100% + 8px)}
.ck-pan:last-child .ck-badge__tip::before{bottom:auto;top:100%;border-bottom-color:transparent;border-top-color:#050301}

.ck-pans__flag{margin-top:11px;padding:10px 13px;font-size:11.5px;gap:9px}
.ck-pans__flag i{font-size:15px}

/* ---- order summary ---- */
.ck-side{position:sticky;top:80px}
@media (max-width:1080px){.ck-side{position:static}}
.ck-sum{background:#fff;border:1px solid #e5ebf1;border-radius:16px;padding:24px 26px;
  box-shadow:0 10px 30px rgba(4,12,21,.05)}
.ck-sum__k{display:flex;align-items:baseline;margin:20px 0 10px;
  font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#9aa4af}
.ck-sum__k em{margin-left:auto;font-style:normal;font-size:11.5px;font-weight:600;color:#636c79;
  letter-spacing:0;text-transform:none}

/* the segmented control — who does the answering */
.ck-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:4px;background:#eef2f6;border-radius:900px}
.ck-seg button{border:none;background:none;cursor:pointer;padding:9px 2px;border-radius:900px;font:inherit;
  font-size:11.5px;font-weight:600;color:#636c79;white-space:nowrap;transition:background .14s,color .14s}
.ck-seg button.is-on{background:#fff;color:#050301;box-shadow:0 1px 3px rgba(4,12,21,.12)}
/* Reserved height so switching tabs doesn't shunt the whole rail up and down,
   but only as much as the longest of the three lines actually needs. */
.ck-segline{margin:9px 0 0;font-size:11.5px;line-height:1.5;color:#7e8da0;min-height:52px;text-wrap:pretty}

/* The breakdown. One row per panel that is answering, plus one for the
   shoppers we go and find — this list is a read-out of the left-hand side,
   which is why nothing in it is clickable. */
.ck-grps{display:flex;flex-direction:column;gap:2px}
.ck-grp{display:flex;align-items:center;gap:9px;padding:7px 0;border-top:1px solid #f1f5f9}
.ck-grp:first-child{border-top:none;padding-top:3px}
.ck-grp__nm{flex:1;min-width:0;font-size:12.5px;font-weight:600;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ck-grp__nm em{display:block;font-style:normal;font-size:11px;font-weight:500;color:#9aa4af;margin-top:1px}
.ck-grp__n{font-size:12px;color:#7e8da0;font-variant-numeric:tabular-nums}
.ck-grp--empty{font-size:12px;color:#b3bec9;padding:9px 0}
/* The same three bands as the badge, at the size a rail can carry. */
.ck-dot{width:7px;height:7px;border-radius:900px;flex:none}
.ck-dot--high{background:#3a8518}
.ck-dot--medium{background:#d69d2b}
.ck-dot--low{background:#cfd8e2}

/* The Digital Twins / New audience split is drawn with explore-intake's own
   .i4-split, hatch and legend — same fact, same picture, one definition. */
.ck-split{margin-top:16px;padding-top:16px;border-top:1px solid #eef2f6}

.ck-sum__rows{margin-top:16px;padding-top:16px;border-top:1px solid #eef2f6;
  display:flex;flex-direction:column;gap:10px}
.ck-sum__r{display:flex;align-items:baseline;gap:10px;font-size:12.5px;color:#636c79}
.ck-sum__r b{margin-left:auto;font-weight:600;color:#050301;font-size:13px;font-variant-numeric:tabular-nums}
/* The one-day gap between the two dates above is the claim, so it gets a line
   of its own rather than living in a tooltip. */
.ck-sum__note{margin-top:-2px;font-size:11.5px;line-height:1.45;color:#8a929c}

.ck-go{width:100%;height:44px;margin-top:16px;border:none;border-radius:900px;background:#3a8518;color:#fff;
  font:inherit;font-size:13.5px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:9px;
  cursor:pointer;transition:background .14s,transform .14s;box-shadow:0 6px 16px rgba(58,133,24,.24)}
.ck-go:hover:not(:disabled){background:#2b6418;transform:translateY(-1px)}
.ck-go i{transition:transform .16s}
.ck-go:hover:not(:disabled) i{transform:translateX(3px)}
.ck-go:disabled{cursor:not-allowed;background:#eef2f6;color:#b3bec9;box-shadow:none;transform:none}
.ck-back{width:100%;height:34px;margin-top:6px;border:none;border-radius:900px;background:none;
  font:inherit;font-size:12.5px;font-weight:600;color:#636c79;cursor:pointer;transition:background .14s,color .14s}
.ck-back:hover:not(:disabled){background:#eef2f6;color:#050301}
.ck-sum__fine{margin-top:12px;font-size:11px;line-height:1.5;color:#b3bec9;text-align:center;text-wrap:pretty}

/* ---- short windows ----
   The left column is the taller of the two now, and at four audience rows
   plus three panels it needs more than a 1280x800 laptop has. Rather than
   let the Launch button fall below the fold, both columns tighten: the
   ledes go (every one of them is scaffolding for a control that is
   directly underneath it), paddings come in, and the panel rows lose the
   months-ago gloss — the month itself is still on the row. */
@media (max-height:830px){
  .ck-wrap{padding:12px 28px 10px;gap:18px}
  .ck-main{gap:10px}
  .ck-card{padding:13px 20px 15px}
  .ck-card__lede{display:none}
  .ck-aud{margin-top:9px}
  .ck-af{padding:7px 0}
  .ck-tag{padding:5px 3px 5px 10px}
  .ck-add__b{width:23px;height:23px}
  .ck-pans{margin-top:9px;gap:5px}
  .ck-pan{padding:8px 12px}
  .ck-pan__meta em{display:none}
  .ck-pans__flag{margin-top:8px;padding:8px 11px}
  .ck-sum{padding:14px 18px}
  .ck-seg button{padding:6px 2px}
  .ck-segline{margin-top:7px;min-height:35px}
  .ck-sum__k{margin:11px 0 5px}
  .ck-grp{padding:4px 0}
  .ck-split{margin-top:9px;padding-top:9px}
  .i4-legend{flex-direction:row;gap:14px}
  .i4-legend span{flex:1;min-width:0;white-space:nowrap}
  .ck-sum__rows{margin-top:9px;padding-top:10px}
  .ck-go{height:40px;margin-top:11px}
  .ck-back{height:30px}
  .ck-sum__fine{margin-top:7px}
}