/* Kinda Famous Club — member cabinet. Loaded after style.css: same paper, ink, red and yellow, turned down a notch.
   Phone first; the tab bar sits at the bottom on a phone and becomes a row under the masthead on a wide screen. */
.app{--tab-h:62px;--card:4px 4px 0 var(--ink)}
.app.in{padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom,0px))}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--yellow);padding:12px 16px;font-weight:800}
.skip:focus{left:8px;top:8px}
.app-mast{position:static;border-bottom-width:3px;border-bottom-style:solid}
.app-mast .wrap{justify-content:space-between;padding-block:8px}
.app-who{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-main{max-width:760px;padding-block:20px 48px;min-height:70vh}
.app [hidden]{display:none !important}
.app .btn.sm{min-height:44px;box-shadow:3px 3px 0 var(--ink)}
.app .btn.sm:hover{box-shadow:4px 4px 0 var(--ink);transform:translate(-1px,-1px)}
.app .btn.sm:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.app footer ul a{padding:12px 0}
.app .m-btns{margin-top:14px;gap:12px}
.app .tiny{font:400 12.5px/1.5 var(--f-mono);color:var(--muted);margin-top:10px}
.app .m-out{overflow-wrap:anywhere}
.app-err{margin-top:12px;background:var(--white);border:3px solid var(--red-deep);padding:10px 12px;font-size:15px}

/* tabs */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--paper);border-top:3px solid var(--ink);padding-bottom:env(safe-area-inset-bottom,0px)}
.tabs-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:760px;margin:0 auto}
.tabs button{appearance:none;border:0;border-right:2px solid var(--ink);background:transparent;cursor:pointer;min-height:var(--tab-h);padding:8px 2px 7px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  font:900 12px/1 var(--f-display);font-stretch:100%;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.tabs button:last-child{border-right:0}
.tabs .ti{font:400 19px/1 var(--f-display);height:19px}
.tabs button[aria-selected=true]{background:var(--ink);color:var(--yellow)}
.tabs button:focus-visible{outline-offset:-6px}
.tabs button[aria-selected=true]:focus-visible{outline-color:var(--yellow)}
.app .ckn{bottom:calc(var(--tab-h) + env(safe-area-inset-bottom,0px))}
.panel:focus{outline:0}
.panel>h1,.panel h1.d,.gate h1{font-size:clamp(38px,11vw,60px);margin-top:4px}
.panel .meta{margin-top:8px}

/* gate, notes, skeleton */
.gate{padding-block:20px 40px;display:grid;gap:14px;justify-items:start}
.gate p{color:var(--ink-2);max-width:56ch}
.gate .keybox{margin-top:0;width:100%}
.app .keybox input{font-size:16px;min-height:48px;padding:10px 12px}
.note{margin-top:16px;background:var(--yellow);border:3px solid var(--ink);padding:12px 14px;font-size:15.5px;line-height:1.45;display:grid;gap:10px;justify-items:start}
.note .hand{font-size:24px;line-height:1.1;color:var(--red-deep)}
.note h1{font-size:38px}
.skel{display:grid;gap:12px;padding-top:8px}
.sk{background:linear-gradient(90deg,var(--paper-2) 25%,#f7f4ec 45%,var(--paper-2) 65%);background-size:300% 100%;animation:sk 1.3s linear infinite;border:2px solid rgba(14,14,14,.14)}
.sk-h{height:46px;width:70%}.sk-bar{height:16px}.sk-row{height:96px;margin-top:10px}.sk-line{height:52px}
@keyframes sk{from{background-position:100% 0}to{background-position:-50% 0}}

/* today: header, timer, progress */
.today-h{display:grid;gap:14px}
.timer{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--white);border:3px solid var(--ink);padding:8px 10px;box-shadow:var(--card)}
.timer-n{font:500 30px/1 var(--f-mono);font-variant-numeric:tabular-nums;min-width:4.6ch;margin-right:auto}
.timer.on{background:var(--yellow)}
.timer.on #tm-go{background:var(--white)}
.timer-done{margin-top:12px;background:var(--ink);color:var(--yellow);padding:12px 14px;font:900 20px/1.1 var(--f-display);font-stretch:75%;text-transform:uppercase}
.prog{display:flex;align-items:center;gap:12px;margin-top:16px;position:sticky;top:0;z-index:5;background:var(--paper);padding-block:8px}
.prog-bar{flex:1;height:16px;border:3px solid var(--ink);background:var(--white)}
.prog-bar i{display:block;height:100%;width:0;background:var(--red-deep);transition:width .25s}
.prog-n{font-size:14px;white-space:nowrap}

/* a sheet as a list */
.sec{font:900 12.5px/1 var(--f-display);font-stretch:100%;letter-spacing:.14em;text-transform:uppercase;margin:26px 0 10px;display:flex;align-items:center;gap:10px}
.sec::after{content:"";flex:1;border-top:2px dotted var(--ink)}
.its{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.it{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;background:var(--white);border:3px solid var(--ink);padding:12px;box-shadow:var(--card)}
.it.done{background:var(--paper-2);box-shadow:none}
.it.done .it-b{color:var(--muted)}
.it.done .it-t b{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--red-deep)}
.tick{appearance:none;border:0;background:transparent;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;min-height:64px;align-self:start;
  font:900 11px/1 var(--f-display);font-stretch:100%;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.tick i{width:52px;height:52px;border:3px solid var(--ink);background:var(--white);display:grid;place-items:center;font:900 30px/1 var(--f-display);font-style:normal;color:transparent;transition:background .12s}
.tick:hover i{background:var(--yellow)}
.tick[aria-pressed=true] i{background:var(--red-deep);color:var(--white)}
.tick.ro{cursor:default;min-height:0}
.tick.ro i{width:36px;height:36px;font-size:20px;color:var(--muted);border-width:2px}
.it.done .tick.ro i{background:var(--ink);color:var(--yellow);border-color:var(--ink)}
.items.ro .it{grid-template-columns:40px minmax(0,1fr);box-shadow:none}
.it-b{min-width:0;overflow-wrap:anywhere}
.it-t{font-size:16.5px;line-height:1.35}
.it-t b{font-weight:800}
.it-m{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-top:5px}
.it-l{margin-top:7px;font-size:15.5px;line-height:1.45;color:var(--ink-2)}
.it-l b{color:var(--ink);font-weight:800}
.it.done .it-l,.it.done .it-l b{color:var(--muted)}
.it-open{margin-top:10px}
.skips{display:grid;gap:8px;font-size:15px;color:var(--muted)}
.skips s{text-decoration-thickness:2px;text-decoration-color:var(--red-deep);font-weight:800}

/* wrap screen */
.wrapcard{margin-top:16px;background:var(--white);border:3px solid var(--ink);box-shadow:6px 6px 0 var(--red-deep);padding:16px;margin-right:6px}
.wrapcard:focus{outline:0}
.wrapcard h2{font-size:clamp(34px,10vw,52px);margin-top:10px}
.wrapcard .hand{font-size:22px;line-height:1.1;color:var(--red-deep);margin-top:14px}
.daycard,.nums{margin:16px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:3px solid var(--ink)}
.daycard div,.nums div{padding:10px 10px 12px;border-right:2px solid var(--ink);display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:6px;min-width:0}
.daycard div:last-child{border-right:0}
.daycard dt,.nums dt{font:500 11px/1.2 var(--f-mono);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2)}
.daycard dd,.nums dd{margin:0;font:900 44px/.85 var(--f-display);font-stretch:62%;font-variant-numeric:tabular-nums}
.daycard div:first-child{background:var(--yellow)}

/* stats */
.nums{grid-template-columns:repeat(2,minmax(0,1fr));background:var(--white);box-shadow:var(--card);margin-right:4px}
.nums div{border-bottom:2px solid var(--ink)}
.nums div:nth-child(2n){border-right:0}
.nums div:nth-last-child(-n+2){border-bottom:0}
.nums .hot{background:var(--yellow)}
.nums .hot dd{color:var(--red-deep)}
.week{font-size:16.5px}
.heat{display:grid;grid-template-columns:30px minmax(0,1fr);gap:6px;align-items:end;max-width:420px}
.heat-d{display:grid;grid-template-rows:repeat(7,minmax(0,1fr));font-size:10px;color:var(--muted);align-self:stretch;padding-top:20px;text-transform:uppercase}
.heat-d span{display:flex;align-items:center}
.heat-m{display:grid;gap:4px;height:16px;margin-bottom:4px;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2)}
.heat-m span{white-space:nowrap;grid-row:1}
.heat-g{display:grid;grid-template-rows:repeat(7,auto);gap:4px}
.hc{display:block;aspect-ratio:1;border:2px solid rgba(14,14,14,.18);background:var(--white)}
.hc.l1{background:#ffe500;border-color:var(--ink)}
.hc.l2{background:#f0142f;border-color:var(--ink)}
.hc.l3{background:var(--ink);border-color:var(--ink)}
.hc.now{outline:2px solid var(--ink);outline-offset:1px}
.heat-key{display:flex;align-items:center;gap:5px;margin-top:12px;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.heat-key .hc{width:16px}

/* archive */
.dates{margin-top:16px;border:3px solid var(--ink);background:var(--white);box-shadow:var(--card);margin-right:4px}
.dates:empty{display:none}
.dates li{border-bottom:2px solid var(--ink)}
.dates li:last-child{border-bottom:0}
.dates .sk{border:0}
.date-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;min-height:56px;padding:8px 14px;text-decoration:none}
.date-row b{font:900 21px/1 var(--f-display);font-stretch:70%;text-transform:uppercase}
.date-row .mono{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.date-row .go{font-weight:900;color:var(--red-deep)}
.date-row:hover{background:var(--yellow)}
.date-row:focus-visible{outline-offset:-5px}

/* settings */
.saved{min-height:20px;margin-top:8px;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--red-deep)}
.set{display:grid;gap:16px}
.set .sec{margin-bottom:0}
.fld{display:grid;gap:7px;font:900 12px/1.2 var(--f-display);font-stretch:100%;letter-spacing:.12em;text-transform:uppercase}
.fld small{font:400 12.5px/1.45 var(--f-mono);letter-spacing:0;text-transform:none;color:var(--muted)}
.fld select,.fld input{width:100%;min-width:0;min-height:48px;border:3px solid var(--ink);background:var(--white);padding:10px 12px;font:500 16px/1.2 var(--f-mono);color:var(--ink);border-radius:0;text-transform:none;letter-spacing:0}
.fld-row{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.fld-row>select,.fld-row>input{flex:1 1 180px;width:auto}
.sw-row{grid-template-columns:minmax(0,1fr) auto;align-items:center;min-height:48px}
.sw{appearance:none;width:68px;height:44px;padding:5px 0;border:0;background:transparent;cursor:pointer;display:block}
.sw i{display:block;height:34px;border:3px solid var(--ink);background:var(--white);position:relative;transition:background .12s}
.sw i::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;background:var(--ink);transition:transform .12s}
.sw[aria-checked=true] i{background:var(--red-deep)}
.sw[aria-checked=true] i::after{transform:translateX(34px);background:var(--white)}
.plan-line{font-size:16.5px}
#p-settings .keybox{margin-top:0}

@media (min-width:861px){
  .app.in{padding-bottom:0}
  .tabs{position:sticky;top:0;bottom:auto;border-top:0;border-bottom:3px solid var(--ink);padding-bottom:0}
  .tabs-in{max-width:760px;border-inline:2px solid var(--ink)}
  .tabs button{flex-direction:row;gap:9px;min-height:52px;font-size:13.5px}
  .app .ckn{bottom:0}
  .app-main{padding-block:30px 70px}
  .today-h{grid-template-columns:minmax(0,1fr) auto;align-items:end}
  .prog{top:55px}
  .nums{grid-template-columns:repeat(3,minmax(0,1fr))}
  .nums div:nth-child(2n){border-right:2px solid var(--ink)}
  .nums div:nth-child(3n){border-right:0}
  .nums div:nth-last-child(-n+3){border-bottom:0}
  .it{grid-template-columns:72px minmax(0,1fr);padding:14px 16px}
}
@media (max-width:380px){
  .daycard dd,.nums dd{font-size:38px}
  .it{grid-template-columns:58px minmax(0,1fr);gap:10px;padding:10px}
  .timer-n{font-size:26px}
}
@media (prefers-reduced-motion:reduce){
  .sk{animation:none}
  .prog-bar i,.tick i,.sw i,.sw i::after{transition:none}
  .app .btn.sm,.app .btn.sm:hover,.app .btn.sm:active{transform:none;transition:none}
}