/* Paysheet Crew — redesign pass (Home screen first). Loaded AFTER crew.css; CSS only, no app logic changes.
   Values follow the redesign skill's Design Values: Poppins, Tailwind type scale, spacing scale, Tailwind radii,
   one accent (blue), flat surfaces, base curve cubic-bezier(0.22,1,0.36,1). */
:root{
  --fb:'Poppins',system-ui,sans-serif;
  --fl:'Poppins',system-ui,sans-serif;
  --ease:cubic-bezier(0.22,1,0.36,1);
  --acc2:var(--acc);                       /* one accent: the teal goes */
  --shadow:0 8px 24px rgba(27,79,216,.10); /* tinted toward the brand hue, one light source (above) */
}

/* ── Type: one family, Tailwind scale, no weight above bold ── */
body{font-family:var(--fb);font-size:14px;line-height:20px}
.logo{font-family:var(--fb);font-weight:700;font-size:18px;line-height:28px;letter-spacing:-.02em}
.logo span{color:var(--acc);font-weight:500}
.big-n{font-size:24px;line-height:32px;font-weight:700;letter-spacing:-.025em;text-wrap:balance;
  background:linear-gradient(90deg,#000000,#666666);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (prefers-color-scheme: dark){ .big-n{background-image:linear-gradient(90deg,#FFFFFF,#9B9B9B)} }
.t1{font-size:16px;line-height:24px;font-weight:600;text-wrap:balance}
.t2{font-size:12px;line-height:16px}
.t3{font-size:14px;line-height:20px;text-wrap:pretty}
.lbl{font-size:14px;line-height:20px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--txt2)}
.tile small{font-size:12px;line-height:16px}
.tile b{font-size:14px;line-height:20px;font-weight:600}
.datebox i{font-size:12px;line-height:16px;font-weight:500;letter-spacing:.04em}
.datebox b{font-size:24px;line-height:32px;font-weight:700;letter-spacing:-.02em}
.card .t1[style*="font-size:17px"]{font-size:18px!important;line-height:28px;font-weight:700!important}

/* ── Surfaces: flat, background-only cards; borders only where they carry meaning ── */
.card{border:none;border-radius:16px;padding:16px;gap:12px;box-shadow:none!important}
.card.warn{border:1px solid var(--oraB)}
.card.hi{border:1px solid var(--acc)}
.card.flat{padding:0}
.tile{border-radius:12px;padding:8px 12px}
.row{padding:12px 16px}

/* ── Badges: small squares, sentence case ── */
.badge{border-radius:6px;font-size:12px;line-height:16px;font-weight:500;letter-spacing:0;text-transform:none;padding:2px 8px}

/* ── Buttons: text-base semibold, 8 / 12 padding, live states ── */
.btn{height:auto;min-height:40px;padding:8px 12px;border-radius:12px;font-size:16px;line-height:24px;font-weight:600;
  transition:background-color 300ms var(--ease),border-color 300ms var(--ease),transform 300ms var(--ease)}
.btn.lg{min-height:48px;padding:12px 16px;border-radius:12px}
.btn.sm{min-height:32px;padding:4px 12px;font-size:14px;line-height:20px}
.btn:hover{background:var(--s2)}
.btn.pri:hover{background:#163FB0;border-color:#163FB0}
.btn.ok:hover{background:#18723F;border-color:#18723F}
.btn:active{transform:scale(.98)}
.btn:focus-visible,.icon-btn:focus-visible,.tabbar a:focus-visible,.row:focus-visible,.avatar:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.btn.danger{border-color:transparent;background:transparent}
.btn.danger:hover{background:var(--redT)}

/* ── Header: translucent, sized to content ── */
.hdr{background:color-mix(in srgb,var(--s1) 80%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid color-mix(in srgb,var(--bdr) 60%,transparent);padding:0 16px}
.avatar{border-radius:12px;width:40px;height:40px;font-weight:600}

/* ── Tab bar: floats off the bottom edge on a blurred surface ── */
.tabbar{left:12px;right:12px;bottom:calc(12px + var(--sb));padding:0;border:1px solid color-mix(in srgb,var(--bdr) 60%,transparent);border-radius:24px;
  background:color-mix(in srgb,var(--s1) 80%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--shadow)}
.tabbar nav{height:64px}
.tabbar a{font-size:12px;line-height:16px;font-weight:500;transition:color 300ms var(--ease)}
.tabbar a.on{font-weight:600}
.tabbar a.on::before{content:'';position:absolute;top:8px;width:40px;height:32px;border-radius:12px;background:var(--accT);z-index:-1}
.tabbar a{z-index:0}
.tabbar a .dot{border-radius:6px}
main{padding:16px 16px calc(112px + var(--sb));gap:24px}
.sec{gap:12px}

/* ── Loading: skeleton shaped like the home screen, not a spinner ── */
.spin{border:none;border-radius:16px;width:auto;height:96px;margin:24px 16px;background:var(--s3);animation:pulse 1.4s var(--ease) infinite alternate}
@keyframes pulse{from{opacity:1}to{opacity:.5}}

/* ── Motion: sections rise in once, 600ms on the base curve; plain fade when motion is reduced ── */
main > *{animation:rise 600ms var(--ease) both}
main > *:nth-child(2){animation-delay:60ms} main > *:nth-child(3){animation-delay:120ms}
main > *:nth-child(4){animation-delay:180ms} main > *:nth-child(5){animation-delay:240ms}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  main > *{animation:fade 300ms linear both} .spin{animation:none}
  @keyframes fade{from{opacity:0}to{opacity:1}}
}
.toast{border-radius:12px;font-weight:500;bottom:calc(96px + var(--sb))}

/* Decline becomes a quiet text action on its own line, so the two real choices get full width */
.btns{flex-wrap:wrap}
.btns > .btn.danger{flex:1 1 100%!important;min-height:32px;padding:4px 12px;font-size:14px;line-height:20px;font-weight:500}
.avatar{text-decoration:none}

/* ── Paysheet brand: blue accent, cyan only in the logo word and date labels ── */
:root{--acc2:#0891B2}
.logo{font-family:'Bebas Neue','Arial Black',Impact,sans-serif;font-weight:400;font-size:26px;letter-spacing:2px;line-height:1;color:var(--acc)}
.logo span{color:var(--acc2);font-weight:400}
.datebox i{color:var(--acc2)}
.hdr{background:color-mix(in srgb,#fff 85%,transparent)}
@media (prefers-color-scheme: dark){
  :root{--bg:#000000;--s1:#181818;--s2:#1F1F1F;--s3:#272727;--bdr:#313131;--acc2:#22D3EE;--accT:#0F1D36;--shadow:0 8px 24px rgba(0,0,0,.5)}
  .hdr{background:color-mix(in srgb,#181818 80%,transparent)}
  .btn.pri,.avatar{color:#000}
  .btn.pri:hover{background:#3A74D8;border-color:#3A74D8}
}