/* The submit form's "Is this right?" step: Mac facts as taps, more categories, where to follow, the badge and the "N left" bar. */

/* Also in: up to 2 more categories, as chips after the main one */
.cfrows .alsocats{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:36px;padding:3px 0}
.alsochip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 6px 0 11px;background:#fff4c9;border:1.500px solid var(--ink);border-radius:999px;box-shadow:2px 2px 0 var(--ink);font:13px var(--sans);color:var(--ink);cursor:pointer;transition:transform .25s var(--spring)}
.alsochip:hover{transform:translateY(-2px)}.alsochip span{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;background:var(--ink);color:var(--paper);font-size:12px;line-height:1}
.cfrows .alsocats select{width:auto;max-width:100%;height:30px!important;padding:0 10px;border:1.500px dashed var(--ink)!important;border-radius:999px;background:transparent;font:13px var(--sans);color:var(--mute);cursor:pointer}
.cfrows .alsocats select:hover{background:var(--box)}.cfrows .alsocats select[hidden]{display:none}

/* Mac facts: a little window of taps */
.cffacts{margin:16px 0 4px;background:var(--paper);border:2px solid var(--ink);border-radius:10px;box-shadow:3px 3px 0 var(--ink);overflow:hidden}
.cfwbar{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;height:24px;border-bottom:1.500px solid var(--ink);background:repeating-linear-gradient(var(--ink) 0 1px,var(--paper) 1px 3px)}
.cfwbar i{position:absolute;left:8px;top:5px;width:11px;height:11px;background:var(--paper);border:1.500px solid var(--ink)}
.cfwbar span,.cfwbar small{padding:0 8px;background:var(--paper);font:10.500px/1 var(--pixel);letter-spacing:.06em}.cfwbar small{position:absolute;right:6px;padding:2px 5px;font-size:9px;color:var(--mute)}
.cffin{padding:4px 12px 10px}
.cfline{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:center;gap:8px;margin:0;padding:8px 0;border-top:1px solid var(--line)}.cfline:first-child{border-top:0}
.cfline>span{font-size:12.500px;color:var(--mute);margin:0}.cfline>span small{display:block;font-size:11px;color:var(--faint)}
.cffin .field.cfline select{height:36px;padding:0 8px;font-size:15px}
.found{display:inline-block;margin-left:6px;padding:1px 5px;font:normal 9px/1.3 var(--pixel);letter-spacing:.05em;color:#1d5b2b;background:#d8f0dd;border:1px solid #2f7a42;border-radius:4px;vertical-align:1px;animation:foundin .5s var(--spring) both}
.found[hidden]{display:none}
@keyframes foundin{from{transform:scale(.4);opacity:0}}
.taps{display:flex;flex-wrap:wrap;gap:6px}
.tap{position:relative;cursor:pointer}.tap input{position:absolute;opacity:0;pointer-events:none}
.tap span,button.tap{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;background:#fff;border:1.500px solid var(--ink);border-radius:999px;font:13.500px var(--sans);color:var(--ink);transition:transform .25s var(--spring),background .2s,box-shadow .2s}
.tap:hover span,button.tap:hover{transform:translateY(-2px)}
.tap input:checked+span{background:#fff4c9;box-shadow:2px 2px 0 var(--ink)}
.tap input:checked+span:before{content:"";width:6px;height:6px;margin-right:7px;border-radius:50%;background:var(--ink)}
.tap input:focus-visible+span,button.tap:focus-visible{outline:0;box-shadow:var(--focus)}
.tap[hidden]{display:none}button.tap{border-style:dashed;color:var(--mute);cursor:pointer}
.cftog{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0;padding:9px 0;border-top:1px solid var(--line);cursor:pointer}
.cftog>span{min-width:0}.cftog b{display:block;font-size:14px}.cftog small{display:block;font-size:12px;color:var(--mute);line-height:1.35}.cftog small a{color:inherit}
.cftog input{position:absolute;opacity:0;pointer-events:none}
/* The switch: a 46 by 26 track with 3px of air all round, and an 18px knob centered in it. Pseudo-elements are content-box by default, so both say border-box. */
.sw{position:relative;display:block;flex:none;box-sizing:border-box;width:46px;height:26px;border:1.500px solid var(--ink);border-radius:999px;background:#e6dfcd;box-shadow:inset 0 1.500px 0 rgba(29,27,23,.12);transition:background .25s ease,box-shadow .2s}
.sw:after{content:"";position:absolute;box-sizing:border-box;left:3px;top:50%;width:17px;height:17px;margin-top:-8.500px;border-radius:50%;background:#fff;border:1.500px solid var(--ink);box-shadow:0 1px 0 rgba(29,27,23,.25);transition:transform .38s cubic-bezier(.3,1.5,.5,1),width .2s ease}
.cftog:hover .sw{background:#ddd5c0}.cftog:active .sw:after{width:21px}
.cftog input:checked+.sw{background:var(--g)}.cftog input:checked+.sw:after{transform:translateX(20px)}.cftog:active input:checked+.sw:after{transform:translateX(16px)}
.cftog input:focus-visible+.sw{box-shadow:var(--focus)}

/* Where people can follow it, folded away */
.cfsoc summary small{margin-left:4px;font-size:11px;color:var(--tick);text-decoration:none}
.socgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.socgrid .field{margin-bottom:10px}.socgrid .field span{display:flex;align-items:center;gap:6px}.socgrid .sglyph{width:11px;height:11px}
.socgrid input{height:38px!important;font-size:14px!important}
.cfsoc .fine{margin:2px 0 0!important;text-align:left}

/* The badge, inside the form */
.cfbadge{margin:18px 0 6px;background:var(--paper);border:2px solid var(--ink);border-radius:10px;box-shadow:3px 3px 0 var(--ink);overflow:hidden}
.cfbin{position:relative;padding:14px 14px 14px}
.cfbin h3{margin:0 0 3px;font:500 24px/1.1 var(--serif)}.cfbin>p{margin:0 0 10px;font-size:13px;color:var(--mute)}
.bperks{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px}
.bperks li{display:flex;align-items:flex-start;gap:9px;font-size:13px;line-height:1.35}
.bperks i{flex:none;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:1.500px solid var(--ink);border-radius:5px;background:var(--w);color:#fff;font-style:normal;font-size:11px;font-weight:bold}
.cfbadge .bprev{min-height:92px}

/* The "N left" bar: little floppies that fill in, and Send it */
.cfedit #cfbtns.cfbar{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:8px 10px;align-items:center;border:1.500px solid var(--ink);box-shadow:3px 3px 0 var(--box2);background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(6px)}
.cfleft{grid-column:1/-1;display:flex;align-items:center;gap:9px;min-width:0;padding:0 2px;font-size:13px;line-height:1.3}
.cfdisks{display:flex;gap:3px;flex:none}
.cfdisks i{position:relative;width:13px;height:13px;border:1.500px solid var(--ink);border-radius:1px 4px 1px 1px;background:#fff;transition:background .3s}
.cfdisks i:after{content:"";position:absolute;left:2px;right:3px;top:0;height:4px;border:1px solid var(--ink);border-top:0;background:#fff}
.cfdisks i.f{background:var(--b)}.cfdisks i.f:after{background:#d9dad6}
.cflefttxt{min-width:0}.cfjump{padding:0;border:0;background:none;color:var(--b);font:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.cfbar .btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
@media (max-width:560px){
  .cfedit #cfbtns.cfbar{grid-template-columns:1fr 1fr;gap:8px}.cfedit #cfbtns.cfbar #cfsend{order:0}
  .cfline{grid-template-columns:minmax(0,1fr);gap:6px}.socgrid{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.found{animation:none}.sw:after,.tap span{transition:none}}

/* The same pieces in the status page's "Edit your listing" form */
.claimedit .alsocats{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:36px;padding:3px 0}
.claimedit .alsocats select{width:auto;max-width:100%;height:32px;padding:0 12px;border:1.500px dashed var(--ink);border-radius:999px;background:transparent;font:13.500px var(--sans);color:var(--mute);cursor:pointer}
.claimedit .alsocats select:hover{background:var(--box)}.claimedit .alsocats select[hidden]{display:none}
.claimedit .alsochip{position:relative;margin:0}.claimedit .alsochip b{font-weight:normal}
.claimedit .alsochip input{position:absolute;opacity:0;pointer-events:none}
.claimedit .alsochip:has(input:focus-visible){box-shadow:var(--focus)}
.claimedit .alsochip:has(input:not(:checked)){opacity:.5;box-shadow:none;text-decoration:line-through}
.claimedit .alsochip span{display:inline-flex;margin:0}
.claimedit .edalso>span small{display:inline;margin-left:4px}
.edfacts{margin:4px 0 18px}
.edfacts .cfmeasured{margin:-4px 0 6px!important;padding-left:112px;text-align:left}
.edfacts .tap span{margin:0}.edfacts button.tap{text-decoration:none}
.edfacts .cftog b{margin:0}
.edsoc{margin-top:4px}
.edsoc .field.bad input{border-color:var(--err);box-shadow:0 0 0 2px color-mix(in srgb,var(--err) 22%,transparent)}
@media (max-width:560px){.edfacts .cfmeasured{padding-left:0}}
/* No price found: a quick choice and an amount write the label, so every card shows one. Only while the price is still asked for. */
.pricequick{display:none}.cfneed .pricequick{display:block;margin:-8px 0 14px}
.pricequick .pqamt{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12.500px}.pricequick .pqamt[hidden]{display:none}
.pricequick .pqamt input{width:120px;height:36px;padding:0 8px;font-size:16px}
.cfrows .pricewrap>.field{border-top:1px solid var(--line)}

/* The small print under a field sits under the field itself, lined up with what it explains, never under the label. */
.cfrows .field>small,.cfrows .field>.fine{grid-column:2;margin:-4px 0 7px;text-align:left;font-size:12.500px;line-height:1.4;color:var(--mute)}
.cfrows .field[data-f="deal_label"]>small{padding-left:8px}
.cfrows .field[data-f="pay_options"]{align-items:start;row-gap:0;padding:6px 0 2px}
@media (max-width:760px){.cfrows .field[data-f="pay_options"]>.fine{margin-top:-6px}}
.cfrows .field[data-f="pay_options"]>#paylabel{padding-top:7px;line-height:1.35}
.cfrows .field[data-f="pay_options"]>#paylabel small{display:block;font-size:11.500px;color:var(--faint)}
.cfrows .field[data-f="pay_options"] .paychecks{grid-column:2;margin:2px 0 0}

/* Free or Premium: two even, roomy cards. Side by side when the column is wide enough, stacked when it is not. */
.planpick{container-type:inline-size}
.plans{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding-top:4px}
@container (min-width:540px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cfedit .planpick .plancard{margin:0;height:100%;padding:16px 16px 14px;gap:12px;border-radius:12px}
.cfedit .planpick .plancard>input{margin-top:6px;width:17px;height:17px;flex:none}
.cfedit .planpick .planprem{padding-top:20px}
.plbody{display:flex;flex-direction:column;gap:7px;flex:1;min-width:0}
.plhead{display:flex;align-items:baseline;justify-content:space-between;gap:4px 12px;flex-wrap:wrap}
.cfedit .planpick .plancard strong{font:500 22px/1.15 var(--serif)}
.plprice{font:500 24px/1 var(--serif);white-space:nowrap;color:var(--ink)}
.plonce{align-self:flex-start;margin-top:-2px;padding:4px 9px;border:1.500px solid #b8860b;border-radius:999px;background:#fffdf5;font:600 11.500px/1 var(--sans);color:#6b4e06}
.plperks{display:grid;gap:7px;margin:3px 0 0;padding:0;list-style:none}
.plperks li{position:relative;padding-left:25px;font:14px/1.45 var(--sans);color:#4a463c}
.plperks li:before{content:"\2713";position:absolute;left:0;top:2px;width:17px;height:17px;box-sizing:border-box;border:1.500px solid var(--ink);border-radius:5px;background:#4fb06a;color:#fff;font:700 10.500px/14px var(--sans);text-align:center}
.planprem .plperks li:before{background:#f3c63f;color:var(--ink);border-color:#8a6408}
.plperks b{font-weight:700;color:var(--ink)}
.plnext{margin-top:auto;padding-top:4px;font-size:12.500px;color:var(--mute)}
.plancard:has(input:checked) .plperks li:before{animation:pltick .5s cubic-bezier(.34,1.56,.64,1) backwards}
.plancard:has(input:checked) .plperks li:nth-child(2):before{animation-delay:.06s}.plancard:has(input:checked) .plperks li:nth-child(3):before{animation-delay:.12s}
@keyframes pltick{from{transform:scale(.4) rotate(-12deg)}}
@media (prefers-reduced-motion:reduce){.plancard:has(input:checked) .plperks li:before{animation:none}}

/* The preview row, so the name, maker, price and vote never collide and cut off cleanly. */
.cfrowwrap{container:cfrow/inline-size}
.cfrowwrap .rowlink{min-width:0}
.cfrowwrap .rowtext{flex:1 1 0;min-width:0}
.cfrowwrap .rowhead{flex-wrap:nowrap;min-width:0;align-items:center}
.cfrowwrap .rowhead strong{display:flex;align-items:center;gap:4px;min-width:0;flex:0 1 auto}
.cfrowwrap .rowhead strong>[data-pv="name"]{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cfrowwrap .rowhead .bychip{display:block;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cfrowwrap .rowprice{flex:0 1 auto;min-width:0;max-width:34%;margin-left:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
.cfrowwrap .vote{flex:none}
@container cfrow (max-width:520px){.cfrowwrap .rowhead{flex-wrap:wrap;row-gap:0}.cfrowwrap .rowhead .bychip{flex-basis:100%}
  .cfrowwrap .rowlink{flex-wrap:wrap;row-gap:3px}.cfrowwrap .rowprice{order:3;flex:1 0 100%;max-width:none;margin:0;padding-left:70px;text-align:left;font-size:13.500px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}
@media (max-width:640px){.cfrowwrap .rowprice{padding-left:57px}}

/* Icon and screenshots: what the scan found, and an easy way to swap it. */
.cfpics{margin:16px 0 4px;background:var(--paper);border:2px solid var(--ink);border-radius:10px;box-shadow:3px 3px 0 var(--ink);overflow:hidden;transition:box-shadow .25s}
.cfpics.needed{box-shadow:3px 3px 0 #e0b84a}.cfpics.needed .cfwbar small{background:#f7d774;color:#3a2c08;border-radius:4px;padding:1px 6px}
.cfpin{padding:4px 14px 12px}
.pkrow{display:flex;gap:14px;align-items:flex-start;padding:12px 0}
.pkrow+.pkrow{border-top:1px solid var(--line)}
.pkicon{flex:none;border-radius:15px;border:1.500px solid var(--ink);overflow:hidden;background:var(--box)}
.pkicon.letter{display:grid;place-items:center;font:500 28px var(--serif)}
.pkicon img{width:100%;height:100%;object-fit:cover}
.pkside{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.pkside>b{font:500 19px/1.2 var(--serif)}
.pkside>small{font-size:12.500px;line-height:1.4;color:var(--mute)}
.pkacts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:8px}
.pkacts .linkbtn{font-size:13.500px}
.pklink{margin:8px 0 0}.pklink[hidden]{display:none}
.pklink>span{display:block;font-size:12.500px;color:var(--mute);margin-bottom:3px}
.pklink input{height:38px;font-size:15px}
.pkshotlink{display:flex;align-items:flex-end;gap:8px}.pkshotlink .field{flex:1;margin:0;min-width:0}.pkshotlink .btn{height:38px;flex:none}
.pksay{margin:6px 0 0;font-size:13px;line-height:1.4;min-height:0}
.pksay:empty{display:none}
.pksay.ok{color:#2f7a45}.pksay.no{color:#b3261e}.pksay.warn{color:#7a5a08}
.pkshots{flex-direction:column;gap:0}
.pkthumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px;margin:10px 0 0;padding:0;list-style:none;width:100%}
.pkthumbs:empty{display:none}
.pkthumb{position:relative;aspect-ratio:16/10;border:1.500px solid var(--ink);border-radius:8px;overflow:hidden;background:var(--box)}
.pkthumb img{width:100%;height:100%;object-fit:cover;display:block}
.pkthumb.bad img{opacity:.25}
.pkthumb.bad:after{content:"Could not open";position:absolute;inset:auto 0 50%;translate:0 50%;text-align:center;font-size:11.500px;color:var(--mute)}
.pkcard{position:absolute;left:6px;top:6px;padding:3px 6px;border:1.500px solid var(--ink);border-radius:5px;background:#f3c63f;font:9.500px/1 var(--pixel);letter-spacing:.06em;text-transform:uppercase}
.pktools{position:absolute;right:5px;top:5px;display:flex;gap:4px}
.pktools button{height:24px;min-width:24px;padding:0 7px;border:1.500px solid var(--ink);border-radius:6px;background:var(--paper);font:600 11.500px/1 var(--sans);color:var(--ink);cursor:pointer;transition:background .15s,transform .15s}
.pktools button:hover{background:#fff;transform:translateY(-1px)}
.pktools .pkdel{font-size:15px;padding:0}
.pktools .pkfirst{opacity:0;transition:opacity .15s}.pkthumb:hover .pkfirst,.pkthumb:focus-within .pkfirst{opacity:1}
@media (hover:none){.pktools .pkfirst{opacity:1}}
.pkreal{margin:8px 0 0!important;text-align:left}
@media (max-width:560px){.pkthumbs{grid-template-columns:repeat(2,minmax(0,1fr))}.pktools button{height:30px;min-width:30px}}