/* The maker side since the cleanup: the account window (/maker and its tabs), the status page (/status/<token>) and a maker's
   public page (/makers/<slug>). Built on the kit in public/cleanup.css; only what those pages need on top of it lives here.
   Sides use logical properties, so Arabic flips by itself. Colors come from the theme variables, so night.css follows. */

/* ---------- the account window ---------- */
.acct.cl-page,.acct.acwide.cl-page{max-width:1180px;padding-top:var(--cl-s6);padding-bottom:var(--cl-s7)}
.acct.cl-page:not(.acwide){max-width:900px}
.clacwin .cl-wbar h1{background:var(--paper);padding:0 10px;font:10px/1 var(--pixel);letter-spacing:.12em;text-transform:uppercase;margin:0;max-width:calc(100% - 70px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.clacwin .cl-tools nav.cl-seg{flex:none}
.clacend{margin-inline-start:auto;display:flex;align-items:center;gap:var(--cl-s3);font-size:13px}
.acct .clacwin .acbody,.acct.acwide .clacwin .acbody{padding:var(--cl-s5);background:var(--paper);background-image:none;border-top:0}
.clacnums{margin-bottom:var(--cl-s5)}
.acct .clacwin .acbody .mk-card{background:transparent}

/* ---------- Your apps: two columns ---------- */
.cld-two{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--cl-s6);align-items:start}
.cld-main>*:first-child{margin-top:0}
.acct .clacwin .cld-app{border:0;border-radius:0;box-shadow:none;padding:0 0 var(--cl-s5);margin:0 0 var(--cl-s5);border-bottom:var(--cl-hair)}
.cld-ah{display:flex;gap:var(--cl-s4);align-items:flex-start}
.cld-ah>.icon,.cld-ah>img{flex:none}
.cld-grow{flex:1;min-width:0}
.cld-app h2{font:500 26px/1.15 var(--serif);display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0}
.cld-ln{color:var(--mute);font-size:14px;margin-top:4px}
.cld-links{font-size:13px;color:var(--mute);margin-top:4px}
.cld-st.ok{background:#e3f2e6;border-color:#2f7a45}
.cld-st.wait{background:var(--paper)}
.cld-st.no{background:#fbe3e1;border-color:var(--r)}

/* the status track: Sent, Checked, Launch day */
.cld-track{display:flex;list-style:none;margin:var(--cl-s4) 0 0;padding:0}
.cld-track li{flex:1;position:relative;text-align:start;margin:0;padding-top:20px;font-size:12.5px;color:var(--mute);min-width:0}
.cld-track li:before{content:"";position:absolute;inset-inline:0;top:6px;height:3px;background:var(--line)}
.cld-track li:after{content:"";position:absolute;inset-inline-start:0;top:1px;width:12px;height:12px;border-radius:50%;border:1.5px solid var(--ink);background:var(--paper)}
.cld-track li.done{color:var(--ink)}
.cld-track li.done:before,.cld-track li.done:after{background:var(--g)}
.cld-track li.now{color:var(--ink);font-weight:600}
.cld-track li.now:after{background:var(--y)}

/* the one Next card */
.cld-next{display:flex;gap:var(--cl-s3);align-items:center;padding:var(--cl-s3) var(--cl-s4);border-radius:9px;background:var(--cream);border:1px solid var(--line);margin:0 0 var(--cl-s5)}
.cld-ring{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;background:conic-gradient(var(--g) 0 var(--p,30%),var(--box) 0);position:relative}
.cld-ring:before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--cream)}
.cld-ring b{position:relative;font:500 17px var(--serif)}
.cld-nt{display:block;font:500 17px/1.25 var(--serif)}
.cld-next small{display:block;color:var(--mute);font-size:12.5px;margin-top:2px}
.cld-link{border:0;background:none;padding:0;font:inherit;color:var(--mute);text-decoration:underline;text-underline-offset:2px;cursor:pointer;margin-inline-start:6px}
.cld-link:hover{color:var(--ink)}

/* numbers and folds */
.cld-nums{border-top:var(--cl-hair)}
.cld-nums .cl-sech{margin-bottom:var(--cl-s3)}
.cld-fine{font-size:13px;color:var(--mute)}
.cld-nums details.cl-fold{margin-top:var(--cl-s4)}
.cld-folds{border-bottom:var(--cl-hair)}
.cld-folds .cl-foldin>*+*{margin-top:var(--cl-s4)}
.cld-for{padding-top:var(--cl-s3)}
.cld-for+.cld-for{border-top:1px dashed var(--line)}
.cld-for>h3{font:500 17px var(--serif);margin:0 0 6px}
.cld-for .mk-nudge{margin:8px 0 0;font-size:13.5px}
.cld-folds .boostwin{margin-top:var(--cl-s3)}
.cld-add{margin-top:var(--cl-s5)}
.acct .fbhow{margin-top:var(--cl-s4);text-align:center}

/* the Pips column */
.cld-side{display:flex;flex-direction:column;gap:var(--cl-s5)}
.cld-ph{display:flex;align-items:center;gap:var(--cl-s3);margin-bottom:var(--cl-s2)}
.cld-ph h2{font-size:22px;margin:0}
.cld-ph .cl-tag{margin-inline-start:auto}
.cld-wal{font-size:13.5px;color:var(--mute);margin-bottom:8px}
.cld-wal b{font:500 22px var(--serif);color:var(--ink);margin-inline-end:4px}
.cld-bar{display:block;height:8px;border-radius:5px;background:var(--box);overflow:hidden}
.cld-bar i{display:block;height:100%;background:var(--stripes)}
.cld-quests{list-style:none;margin:var(--cl-s3) 0 0;padding:0}
.cld-quests li{display:flex;align-items:center;gap:var(--cl-s2);padding:9px 0;border-top:var(--cl-hair);font-size:13.5px}
.cld-quests li a{color:var(--ink);text-decoration:none}
.cld-quests li a:hover{text-decoration:underline}
.cld-quests .cl-tag{margin-inline-start:auto}
.cld-pips>.cld-fine{margin-top:8px}
.cld-race{display:block;margin-top:var(--cl-s4);padding:var(--cl-s3) var(--cl-s4);border-radius:9px;background:var(--cl-gold);border:1px solid var(--cl-goldline);color:var(--ink);text-decoration:none}
.cld-race:hover{text-decoration:none;filter:brightness(.98)}
.cld-race b{display:block;font:500 16px var(--serif)}
.cld-race small{display:block;font-size:12.5px;color:var(--mute);margin-top:2px}
.cld-nbr .nbr{margin:0}

/* ---------- the status page ---------- */
.cls{max-width:860px}
.cls .cl-wbody>*+*{margin-top:var(--cl-s4)}
.cls-head{display:flex;gap:var(--cl-s4);align-items:flex-start}
.cls-head h1{font-size:36px;line-height:1.05}
.cls-head p{color:var(--mute);margin-top:4px}
.cls .cld-next .cls-lbl{font:9.5px var(--pixel);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.cls .cld-next .pdcount{margin:0;padding:0;max-width:none;border:0;background:none;color:var(--ink);box-shadow:none;text-align:start}
.cls .cld-next .pdcl{color:var(--mute)}
.cls .cld-next .pdclock{color:var(--ink);font-size:22px}
.cls .cld-next .pdcount small{color:var(--mute)}
.cls .cl-sec{padding-bottom:0}
.cls .cl-sec>h2,.cls .cl-sech h2{font-size:22px}
.cls .cl-sec>h2{margin-bottom:var(--cl-s3)}
.cls-spots{width:100%;border-collapse:collapse;font-size:14px}
.cls-spots td{padding:10px 8px;border-top:var(--cl-hair);vertical-align:middle}
.cls-spots tr:first-child td{border-top:0}
.cls-spots td:first-child{padding-inline-start:0}
.cls-spots td:last-child{padding-inline-end:0;text-align:end}
.cls-spots b{font:500 17px var(--serif)}
.cls-spots small{display:block;color:var(--mute);font-size:12.5px}
.cls-spots .cls-pr{font:500 18px var(--serif);white-space:nowrap}
.cls-badge{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cl-s3)}
.cls-badge img{height:46px;width:auto}
.cls-badge pre.snippet{flex-basis:100%;margin:0}
.cls .mk-msg{margin-bottom:var(--cl-s4)}
.cls .mk-back{display:inline-block;margin-bottom:var(--cl-s3)}

/* ---------- a maker's public page ---------- */
.clp{max-width:860px}
.clp .makerhead{border:0;padding:0;margin:0;background:none;box-shadow:none}
.clp .cl-stats{margin:var(--cl-s5) 0 var(--cl-s2)}
.clp .cl-sec{padding-top:var(--cl-s4)}
.clp-claim{font-size:13px;color:var(--mute);margin-top:var(--cl-s3)}

/* ---------- phone ---------- */
@media (max-width:900px){
  .cld-two{grid-template-columns:minmax(0,1fr);gap:var(--cl-s5)}
  .cld-side{border-top:var(--cl-hair);padding-top:var(--cl-s5)}
}
@media (max-width:760px){
  .acct.cl-page{padding-top:var(--cl-s4)}
  .clacwin .cl-tools{flex-wrap:wrap;overflow:visible}
  .clacwin .cl-tools nav.cl-seg{overflow-x:auto;max-width:100%}
  .clacend{margin-inline-start:0;width:100%;justify-content:space-between}
  .acct .clacwin .acbody,.acct.acwide .clacwin .acbody{padding:var(--cl-s4)}
  .cld-ah{flex-wrap:wrap}
  .cld-ah .cld-grow{flex:1 1 calc(100% - 80px)}
  .cld-ah>.cl-ghost{order:3;margin-inline-start:72px;min-height:32px}
  .cld-app h2{font-size:23px}
  .cld-track li{font-size:11.5px}
  .cld-next{flex-wrap:wrap}
  .cld-next .cl-go{width:100%}
  .cls-head h1{font-size:30px}
  .cls-spots .cls-len{display:none}
}
.cld-nums.cl-sec{padding-bottom:0}
@media (max-width:760px){
  .acct details.cl-fold>summary,.cls details.cl-fold>summary{flex-wrap:wrap;row-gap:2px}
  .acct details.cl-fold>summary small,.cls details.cl-fold>summary small{order:3;flex-basis:100%}
}
.cls a.cl-go,.cls a.cl-ghost,.acct a.cl-go,.acct a.cl-ghost{text-decoration:none}
.cls .cl-sec>h2:first-child,.cls .cl-sech h2{margin-top:0}
.cls .cl-sec{margin-top:var(--cl-s5)}
.clp-head{display:flex;gap:var(--cl-s4);align-items:flex-start}
.clp-head>.makerhead{flex:1;min-width:0}
.clp-share{flex:none}
.clp .makerhead h1{font-size:36px}
.clp .cl-sec .list{margin:0}
@media (max-width:760px){.clp-head{flex-wrap:wrap}.clp .makerhead h1{font-size:30px}}
.acct .cl-stats b,.clp .cl-stats b{margin-inline-end:1px}
/* Where to follow the maker: small icon buttons, X first (functions/_profiles.js followOf). currentColor, so night and CRT follow;
   a flex row with gap, so Arabic flips by itself. */
.clp-socials{display:flex;flex-wrap:wrap;gap:6px;margin:var(--cl-s3) 0 0}
.clp-soc{display:inline-grid;place-items:center;width:32px;height:32px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);text-decoration:none}
.clp-soc:hover{background:var(--box);border-color:var(--ink);text-decoration:none}
.clp-soc:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.clp-soc .sglyph{width:15px;height:15px;fill:currentColor}
@media (pointer:coarse){.clp-soc{width:40px;height:40px}}