/* Matches jack.art/credits: SF Mono 11px uppercase, black on white, hairlines. CMY inks used only as highlights. */
:root{--ink:#111;--paper:#fff;--muted:#929292;--faint:#bbb;--line:#e3e3e3;--line2:#e8e8e8;--c:#00B5E2;--m:#E4007C;--y:#FFD100}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:11px/1.65 'SF Mono',SFMono-Regular,Menlo,monospace;text-transform:uppercase}
button,a,input,select,textarea{font:inherit;color:inherit;text-transform:inherit}
a{text-decoration:none}
button{cursor:pointer;background:none;border:0;padding:5px 0}
a:hover,button:hover{opacity:.6}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:1px solid var(--ink);outline-offset:5px}
h1,h2,h3,p{font:inherit;margin:0}
h1,h2,h3{font-weight:700}
.muted{color:var(--muted)}
.faint{color:var(--faint)}

header{display:flex;justify-content:space-between;align-items:center;padding:30px 40px;gap:24px}
header nav{display:flex;gap:28px;align-items:center}
header nav a[aria-current=page]{text-decoration:underline;text-underline-offset:5px}
.acting{display:flex;gap:10px;align-items:center}
.acting button{border-bottom:1px solid var(--line);padding:2px 0;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
main{max-width:1440px;margin:auto;padding:55px 40px 80px}

.intro{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:45px}
.intro p{margin-top:8px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);margin-bottom:64px}
.stats>div{padding:22px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.stats>div:last-child{border-right:0}
.stats strong{font-weight:400;font-size:22px;letter-spacing:-.02em}
.stats span{color:#999}

.bar{height:3px;background:var(--line2);position:relative;overflow:hidden}
.bar i{position:absolute;inset:0 auto 0 0;background:var(--c)}

/* party index */
.parties{display:grid;grid-template-columns:repeat(3,1fr);gap:64px 48px}
.party-card{display:flex;flex-direction:column;gap:14px}
.party-card .caption{min-height:0}

/* statement frame, as on jack.art */
.frame{border:1px solid var(--line);background:var(--paper)}
.statement{aspect-ratio:4/5;padding:8%;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(10,1fr)}
.statement>*{display:block;min-width:0;min-height:0;padding:0;border:0;background:transparent;position:relative}
.statement img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.statement .empty{outline:1px solid #f1f1f1;outline-offset:-3px}
.statement .mine::after{content:"";position:absolute;left:18%;right:18%;bottom:-3px;height:2px;background:var(--y)}
.statement button:hover{opacity:1;outline:1px solid #eee}
.statement button[aria-pressed=true]{outline:1px solid var(--ink);outline-offset:-1px}
.statement.dragging button{cursor:grab}
.statement .over{outline:1px dashed var(--c);outline-offset:-1px}

.caption{display:flex;justify-content:space-between;align-items:center;min-height:58px;gap:12px}
.modes{display:flex;gap:18px;flex-wrap:wrap}
.modes button{padding:6px 0;color:#aaa}
.modes button[aria-pressed=true]{color:var(--ink);text-decoration:underline;text-underline-offset:5px}

/* party page */
.works{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.panel+.panel{margin-top:48px}
.panel h2{margin-bottom:14px}
.rows>div{display:flex;justify-content:space-between;gap:24px;padding:7px 0;border-bottom:1px solid var(--line2)}
.rows>div:first-child{border-top:1px solid var(--line2)}
.rows span{color:#999;flex-shrink:0}
.rows strong{font-weight:400;text-align:right;overflow-wrap:anywhere}
.tag{display:inline-block;padding:0 6px;border:1px solid var(--line)}
.state-OPEN{color:var(--ink)}
.dot{display:inline-block;width:7px;height:7px;margin-right:8px;vertical-align:1px}
.dot.c{background:var(--c)}.dot.m{background:var(--m)}.dot.y{background:var(--y)}.dot.k{background:var(--ink)}

.detail{display:grid;grid-template-columns:96px 1fr;gap:18px;align-items:center;padding:14px 0;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);min-height:126px}
.detail img{width:96px;height:96px;border:1px solid var(--line)}

.proposal{padding:14px 0;border-bottom:1px solid var(--line2)}
.proposal:first-of-type{border-top:1px solid var(--line2)}
.tally{display:grid;grid-template-columns:1fr auto;gap:8px 16px;align-items:center;margin-top:10px}
.tally .bar i{background:var(--c)}
.tally .bar.no i{background:var(--m)}
.pass{color:var(--ink);box-shadow:inset 0 -2px 0 var(--y)}
.blocked{color:var(--m)}
.actions{display:flex;gap:22px;flex-wrap:wrap;margin-top:8px}
.actions button{color:#999}
.actions button:hover{color:var(--ink);opacity:1}

.chat{border-top:1px solid var(--line2);max-height:340px;overflow:auto}
.msg{padding:10px 0;border-bottom:1px solid var(--line2);display:grid;grid-template-columns:120px 1fr;gap:16px}
.msg p{text-transform:none;font-size:12px}
.compose{display:flex;gap:16px;margin-top:12px;align-items:end}
.compose textarea{flex:1;border:0;border-bottom:1px solid var(--line);padding:6px 0;resize:none;text-transform:none;font-size:12px;min-height:30px}

.picker{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;margin:12px 0}
.picker button{padding:0;aspect-ratio:1;border:1px solid transparent;position:relative}
.picker button img{width:100%;height:100%;display:block}
.picker button[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 -3px 0 var(--y)}
.picker button:disabled{opacity:.18;cursor:not-allowed}

/* forms */
form.new{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.field{padding:12px 0;border-bottom:1px solid var(--line2);display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:center}
.field:first-child{border-top:1px solid var(--line2)}
.field label{color:#999}
.field input,.field select{border:0;border-bottom:1px solid var(--line);background:none;padding:3px 0;width:100%}
.chips{display:flex;flex-wrap:wrap;gap:6px 14px}
.chips button{color:#aaa;padding:2px 0}
.chips button[aria-pressed=true]{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.cta{border:1px solid var(--ink);padding:10px 18px;margin-top:22px}
.cta:hover{background:var(--ink);color:var(--paper);opacity:1}
.error{color:var(--m);min-height:18px;margin-top:10px}
.note{margin-top:4px;color:#999}
.demo{color:var(--ink);box-shadow:inset 0 -2px 0 var(--y);padding:0 2px}

.table{width:100%;border-collapse:collapse}
.table td,.table th{padding:7px 8px 7px 0;border-bottom:1px solid var(--line2);text-align:left;font-weight:400}
.table th{color:#999}
.table img{width:28px;height:28px;display:block}

.foot{border-top:1px solid #ddd;padding:26px 0 40px;margin-top:80px;display:flex;justify-content:space-between;gap:24px}

@media(max-width:1000px){.parties{grid-template-columns:1fr 1fr}.stats{grid-template-columns:1fr 1fr}.stats>div:nth-child(2){border-right:0}.stats>div:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media(max-width:700px){
 header{padding:22px;flex-wrap:wrap}header nav{gap:16px;flex-wrap:wrap}
 main{padding:38px 16px 60px}
 .intro{display:block;margin-bottom:30px}
 .works,form.new,.parties{grid-template-columns:1fr;gap:35px}
 .field{grid-template-columns:1fr;gap:6px}
 .msg{grid-template-columns:1fr;gap:2px}
 .picker{grid-template-columns:repeat(6,1fr)}
}

.hint{color:var(--faint);margin-top:4px;font-size:10px}
.actions .cta{margin-top:0;padding:6px 14px}
.terms strong{text-transform:none;font-size:12px;text-align:left;max-width:560px}
.terms>div{align-items:flex-start}
.check{display:flex;gap:12px;align-items:flex-start;text-transform:none;font-size:12px;cursor:pointer}
.check input{margin-top:3px}
.cta:disabled{opacity:.3;cursor:not-allowed}
.cta:disabled:hover{background:none;color:var(--ink)}
.terms>div{display:grid;grid-template-columns:190px 1fr;gap:20px}
@media(max-width:700px){.terms>div{grid-template-columns:1fr;gap:4px}}

.site-foot{max-width:1440px;margin:0 auto;padding:26px 40px 40px;border-top:1px solid #ddd;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.modal-back{position:fixed;inset:0;background:rgba(255,255,255,.86);display:grid;place-items:center;z-index:50;padding:24px}
.modal{background:var(--paper);border:1px solid var(--ink);width:min(820px,100%);max-height:min(86vh,900px);display:flex;flex-direction:column}
.modal-head{padding:22px 28px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:baseline}
.modal-body{padding:22px 28px;overflow-y:auto;flex:1;overscroll-behavior:contain}
.modal-foot{padding:18px 28px 22px;border-top:1px solid var(--line)}
.modal-foot .check{opacity:1}
.check input:disabled+span{color:var(--faint)}
@media(max-width:700px){.modal-back{padding:0}.modal{max-height:100vh;height:100%;border:0}.modal-head,.modal-body,.modal-foot{padding-left:16px;padding-right:16px}.site-foot{padding:22px 16px 32px}}

.fit{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-bottom:40px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fit details{min-width:0}
.fit summary{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;cursor:pointer;list-style:none}
.fit summary::-webkit-details-marker{display:none}
.fit summary h2::before{content:"+ ";color:var(--faint)}
.fit details[open] summary h2::before{content:"− "}
.fit details[open]{padding-bottom:14px}
.fit .rows>div{align-items:center;padding:4px 0}
.fit .rows strong{white-space:nowrap}
.mini{display:inline-flex;gap:3px;vertical-align:middle}
.mini img{width:16px;height:16px}
@media(max-width:1000px){.fit{grid-template-columns:1fr;gap:0}.fit details+details{border-top:1px solid var(--line)}}

.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.cards figure{margin:0}
.cards img{width:100%;display:block}
.cards figcaption{margin-top:4px}

.prop{padding:16px 0;border-top:1px solid var(--line2)}
.prop-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.prop-what{margin:6px 0 10px;font-size:13px}
.chip{padding:1px 7px;border:1px solid var(--line);color:#999}
.chip.pass{border-color:var(--ink);color:var(--ink);box-shadow:inset 0 -2px 0 var(--y)}
.chip.blocked{border-color:var(--m);color:var(--m)}
.chip.done{border-color:var(--ink);color:var(--ink)}
.chip.open{border-color:var(--c);color:var(--ink)}
.prop.s-muted .prop-what,.prop.s-muted .meter{opacity:.45}
.meter{position:relative;height:8px;background:var(--line2)}
.meter .yes{position:absolute;inset:0 auto 0 0;background:var(--c)}
.meter b{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ink)}
.prop-nums{display:flex;justify-content:space-between;margin-top:6px}
.prop-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap}
.prop-foot .actions button{border:1px solid var(--line);padding:4px 12px;color:var(--ink)}
.prop-foot .actions button.on{border-color:var(--ink);box-shadow:inset 0 -2px 0 var(--c)}
.prop-foot .actions button.on.no{box-shadow:inset 0 -2px 0 var(--m)}
.you{color:var(--ink);box-shadow:inset 0 -2px 0 var(--y)}
.rules-box{border:1px solid var(--line);padding:4px 14px;margin-bottom:14px}
.rules-box>div{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:6px 0;border-bottom:1px solid var(--line2)}
.rules-box>div:last-child{border:0}
.rules-box span{color:#999}.rules-box strong{font-weight:400}
.composer{margin-top:24px;padding:16px 18px;border:1px solid var(--line)}
.composer select,.composer input{border:0;border-bottom:1px solid var(--line);background:none;padding:3px 0}

.desc{text-transform:none;font-size:13px;max-width:620px;margin:8px 0 4px}
.card-desc{text-transform:none;font-size:12px;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.field textarea{border:0;border-bottom:1px solid var(--line);background:none;padding:3px 0;width:100%;text-transform:none;font-size:12px;resize:vertical}

.alert-c{color:var(--c)}
.chips button[data-arr="Manual"][aria-pressed=true]{color:var(--c);text-decoration-color:var(--c)}

.price-line{display:flex;gap:10px;align-items:baseline}
.price-line strong{font-size:16px;font-weight:700}
.price-line .muted{margin-left:auto}
.buy-box{border:1px solid var(--ink);padding:18px 20px;margin-top:32px}
.buy-box .big{font-size:20px}

.sim-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.sim-card{display:grid;grid-template-columns:64px 1fr;gap:10px;border:1px solid var(--ink);padding:10px}
.sim-card img{width:64px;height:64px}
.sim-card div{display:flex;flex-direction:column;gap:2px}
.sim-card span{color:#999}
@media(max-width:700px){.sim-steps{flex-direction:column}.sim-steps span{border-right:0;border-bottom:1px solid var(--line)}}

/* hover definitions */
[data-def]{position:relative;cursor:help;text-decoration:underline dotted #ccc;text-underline-offset:4px}
[data-def]:hover::after,[data-def]:focus::after{content:attr(data-def);position:absolute;left:0;top:calc(100% + 6px);z-index:20;width:260px;padding:10px 12px;background:var(--paper);color:var(--ink);border:1px solid var(--ink);font-size:11px;line-height:1.5;text-transform:none;white-space:normal;pointer-events:none}

.store-only{border:2px solid var(--ink);padding:14px 18px;margin:0 0 32px;text-transform:none;font-size:13px;line-height:1.5}
.store-only strong{text-transform:uppercase;font-size:11px;letter-spacing:.04em;margin-right:6px}
.alert-k{color:var(--ink);font-weight:700;text-transform:none;font-size:12px;margin-bottom:8px}

.rows>div.rule-strong{border:2px solid var(--ink);padding:10px 12px;margin:6px 0}
.rule-strong strong{font-weight:700}

.src{border:1px solid var(--line);padding:0 6px;color:#999;white-space:nowrap}
.os-frame{display:grid!important;place-items:center;color:#999}

.fee-box{border:1px solid var(--ink);padding:10px 14px;margin:14px 0 6px;text-transform:none;font-size:12px;line-height:1.5}
.fee-box strong{text-transform:uppercase;font-size:11px}

.agree{padding:18px 0 4px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.rows.terms>div.agree{display:flex;flex-direction:column;align-items:flex-start;gap:14px;border-bottom:0;padding-top:18px}

/* profiles */
a.addr{border-bottom:1px solid var(--line)}
.thumbs{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;margin:4px 0 8px}
.thumbs span{display:block;aspect-ratio:1;position:relative}
.thumbs img{width:100%;height:100%;display:block}
.thumbs .in-party img{opacity:.25}
a.sim-card:hover{opacity:1;border-color:var(--c)}
@media(max-width:700px){.thumbs{grid-template-columns:repeat(8,1fr)}}

/* Wallet picker */
.alert-m{color:var(--m)}
.wallet-modal{width:min(520px,100%)}
.wallets{list-style:none;margin:0;padding:0}
.wallets li{border-bottom:1px solid var(--line2)}
.w-row{display:grid;grid-template-columns:24px 1fr auto;gap:14px;align-items:center;width:100%;padding:12px 0;text-align:left}
.w-row.off{color:var(--muted)}
.w-row.off a{color:var(--ink)}
.w-row img,.w-inline img{width:24px;height:24px;display:block}
.w-ico{width:24px;height:24px;border:1px solid var(--line);display:grid;place-items:center;font-size:10px}
.w-row.off .w-ico{color:var(--faint)}
.w-row:disabled{cursor:progress}
.w-inline{display:inline-flex;gap:10px;align-items:center}
.wc-qr{margin-top:18px;display:grid;justify-items:start;gap:8px}
.wc-qr img{width:220px;height:220px;image-rendering:pixelated;border:1px solid var(--line)}

/* landing: the name and Connect wallet, centered, nothing else */
body.bare header,body.bare .site-foot{display:none}
body.bare main{padding:0;max-width:none}
.landing{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:16px;text-align:center}
.landing .cta{margin-top:18px}

/* launch phase: The Four and the Minute pages */
.four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:56px 32px}
.statement .out img{opacity:.3}
.panel.lookup{max-width:900px;margin-top:64px}
.mgrid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:14px 10px;border:1px solid var(--line);padding:18px}
.mcell{display:flex;flex-direction:column;min-width:0;position:relative}
.mcell button{padding:0;display:block;width:100%;aspect-ratio:1;border:1px solid var(--line2)}
.mcell button:hover{opacity:1;border-color:var(--muted)}
.mcell img{width:100%;height:100%;display:block;pointer-events:none}
.mcell.out img{opacity:.25}
.mcell.mine button{border-color:var(--y);box-shadow:inset 0 -3px 0 var(--y)}
.mcell button[aria-pressed=true]{border-color:var(--ink);outline:1px solid var(--ink)}
.mcell .l{display:block;font-size:10px;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mcell .l:first-of-type{margin-top:4px}
.mcell .s{color:var(--muted)}
.mcell:not(.out) .s{color:var(--ink)}
.mcell .o a.addr{border:0}
.key-in{color:var(--ink)}.key-out{color:var(--faint)}
.works.embed{grid-template-columns:minmax(0,900px)}
@media(max-width:1000px){.four{grid-template-columns:1fr 1fr}.mgrid{gap:10px 6px;padding:10px}.mcell .l{font-size:9px}}
@media(max-width:700px){
 .four{grid-template-columns:1fr;gap:44px}
 .mgrid{gap:6px 3px;padding:6px}
 .mcell .l{font-size:7px;letter-spacing:-.02em}
 .mcell .o,.mcell .s{display:none}
 .detail{grid-template-columns:72px 1fr}.detail img{width:72px;height:72px}
}
.burn-gas{display:block;text-transform:none;font-size:12px;line-height:1.5;margin:10px 0}
.rows strong .burn-gas{margin:0;text-align:left}
.cards-box summary{display:flex;justify-content:space-between;align-items:baseline;gap:16px;cursor:pointer;list-style:none;flex-wrap:wrap}
.cards-box summary::-webkit-details-marker{display:none}
.cards-box summary h2{margin:0}
.cards-box summary h2::before{content:"+ ";color:var(--faint)}
.cards-box[open] summary h2::before{content:"− "}
.landing .view-only{color:var(--muted);margin-top:10px}
.mgrid.burned .mcell>span:first-child{display:block;aspect-ratio:1;border:1px solid var(--line2)}
.mgrid[hidden],#mstatement[hidden],#vst[hidden]{display:none}
#mdetail[hidden]{display:none}