/* payroll.css -- session 305, the Payroll page as a pay run (public/payroll.js). Ported from the stylesheet of
   briefs/s305-mockup-payroll-1440.html (option A), which the brief names as the specification for the look: its colours,
   radii, shadows, pills, day dots, group bands and the 40 / name / 70 / 190 / 80 / 110 / 110 / 120 row grid. Everything is
   under .py so no other page changes. The Resort comparison keeps the old .s-payroll rules in index.html (its own box). */
.py{ max-width:1320px; margin:0 auto; padding:28px clamp(16px,3vw,40px) 64px; box-sizing:border-box; display:flex; flex-direction:column; gap:20px;
  font-family:Inter, system-ui, sans-serif; color:#16181a }
.py *{ box-sizing:border-box }
.py a{ color:#1d6e77; text-decoration:none }
.py a:hover{ color:#144d54; text-decoration:underline }
.py-box{ background:#ffffff; border-radius:16px; box-shadow:0 1px 2px rgba(16,24,26,.06),0 2px 8px rgba(16,24,26,.05) }
.py-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 18px; border-radius:10px; font-family:inherit;
  font-size:14.5px; font-weight:700; border:1px solid #c9d0d4; background:#ffffff; color:#16181a; cursor:pointer; text-decoration:none; white-space:nowrap }
.py a.py-btn{ color:#16181a; text-decoration:none }
.py-btn:hover{ border-color:#1d6e77; background:#f6f8f9 }
.py-btn:focus-visible, .py-link:focus-visible, .py-weekbtn:focus-visible, .py-chip:focus-visible, .py-cbx:focus-visible{ outline:3px solid #6fd5d4; outline-offset:2px }
.py-btn:disabled{ opacity:.5; cursor:default; background:#ffffff; border-color:#c9d0d4 }
.py-btn.py-y{ background:linear-gradient(#ffd13a,#f5c21c); border-color:#f5c21c; box-shadow:0 3px 0 #d96a18 }
.py-btn.py-y:disabled{ box-shadow:none; background:linear-gradient(#ffd13a,#f5c21c); opacity:.55 }
.py-btn.py-btn-p{ background:#144d54; border-color:#144d54; color:#ffffff }
.py-btn.py-s-btn{ min-height:36px; padding:0 12px; font-size:13px }
.py-link{ background:none; border:none; padding:0; font:inherit; color:#1d6e77; cursor:pointer; font-weight:600 }
.py-link:hover{ color:#144d54; text-decoration:underline }
.py-k{ font-size:12.5px; font-weight:600; color:#4d545a; margin-bottom:8px; letter-spacing:.02em }
.py-s{ font-size:13px; color:#5c646b; line-height:1.4 }
.py-err{ font-size:13px; color:#a3341c; margin-top:6px }
.py-err:empty{ display:none }
.py-good{ color:#08513f }
.py-mt{ margin-top:10px }
.py-pill{ display:inline-flex; align-items:center; min-height:26px; padding:0 10px; border-radius:999px; font-size:12.5px; font-weight:700; white-space:nowrap }
.py-pill-unpaid{ background:#e9ecee; color:#4d545a }
.py-pill-paid{ background:#e2f4ee; color:#08513f }
.py-pill-mig{ background:#dceff0; color:#0e363b }
.py-pill-warn{ background:#fdf0d8; color:#6e4a0c }
.py-pill-rate{ background:#e9ecee; color:#16181a; font-weight:600 }
.py-in{ min-height:36px; padding:0 10px; border:1px solid #c9d0d4; border-radius:8px; font:inherit; font-size:14px; color:#16181a; background:#ffffff; min-width:0 }
.py-in:focus{ outline:3px solid #6fd5d4; outline-offset:0; border-color:#1d6e77 }
.py-in-rate{ width:80px }
.py-in-amt{ width:90px }

/* the top: title, the rate line and the one week picker */
.py-top{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:16px }
.py-h1{ margin:0; font-size:34px; font-weight:800; letter-spacing:-.5px; color:#16181a; font-family:inherit }
.py-rate{ margin-top:4px; display:flex; flex-wrap:wrap; align-items:center; gap:6px }
.py-rateedit{ display:inline-flex; align-items:center; gap:6px }
.py-weekpick{ display:flex; align-items:center; gap:8px }
.py-weekbtn{ display:flex; flex-direction:column; align-items:center; min-width:170px; padding:4px 10px; background:none; border:1px solid transparent; border-radius:10px;
  cursor:pointer; font:inherit; color:#16181a }
.py-weekbtn:hover{ border-color:#c9d0d4; background:#ffffff }
.py-weeklbl{ font-size:17px; font-weight:800 }
.py-weeks{ background:#ffffff; border-radius:16px; padding:16px 18px; box-shadow:0 1px 2px rgba(16,24,26,.06),0 2px 8px rgba(16,24,26,.05) }
.py-weeks[hidden]{ display:none }
.py-weekchips{ display:flex; flex-wrap:wrap; gap:8px }
.py-chip{ min-height:36px; padding:0 12px; border-radius:999px; border:1px solid #c9d0d4; background:#ffffff; font:inherit; font-size:13px; font-weight:600; color:#16181a; cursor:pointer }
.py-chip small{ font-weight:600; color:#5c646b; margin-left:4px }
.py-chip.on{ background:#144d54; border-color:#144d54; color:#ffffff }
.py-chip.on small{ color:#6fd5d4 }

/* the dark summary */
.py-panel{ background:linear-gradient(135deg,#144d54,#0e363b); border-radius:18px; color:#ffffff; padding:22px 26px; display:flex; flex-wrap:wrap; gap:24px 44px; align-items:center }
.py-panel .errbox{ color:#16181a }
.py-panel-k{ font-size:13px; font-weight:700; color:#6fd5d4 }
.py-panel-total{ font-size:52px; font-weight:800; letter-spacing:-1.5px; line-height:1.05; font-variant-numeric:tabular-nums }
.py-panel-sub{ font-size:13.5px; opacity:.85 }
.py-stats{ display:flex; flex-wrap:wrap; gap:34px }
.py-stat-v{ font-size:28px; font-weight:800; font-variant-numeric:tabular-nums }
.py-stat-v.py-yel{ color:#ffd13a }
.py-stat-l{ font-size:12.5px; font-weight:600; opacity:.85 }
.py-panel-flag{ flex-basis:100%; font-size:13px; opacity:.85; margin-top:-8px }

/* the three steps */
.py-steps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; align-items:start }
.py-step{ padding:18px; border:2px solid transparent }
.py-step-warn{ border-color:#ff8a33 }
.py-step-ok{ border-color:#bfe6d6 }
.py-stephead{ display:flex; align-items:center; gap:10px }
.py-steptitle{ margin:0; font-size:16px; font-weight:800; color:#16181a; font-family:inherit }
.py-stepn{ flex:0 0 30px; width:30px; height:30px; border-radius:50%; background:#dceff0; color:#0e363b; display:inline-flex; align-items:center; justify-content:center; font-weight:800 }
.py-stepn.warn{ background:#ff8a33; color:#ffffff }
.py-stepn.ok{ background:#08513f; color:#ffffff }
.py-stepsub{ margin:8px 0 12px }
.py-stepnote{ margin-top:8px }
.py-fixlist{ list-style:none; margin:0; padding:0; font-size:14px; line-height:1.5; display:flex; flex-direction:column; gap:8px }
.py-fixlist li{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px }
.py-fixlist i{ font-style:normal; color:#6e4a0c; font-weight:600 }
.py-fix{ font-weight:700; white-space:nowrap }
.py-step3btns{ display:flex; flex-wrap:wrap; gap:8px }
.py-confirm{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; background:#fdf0d8; border-radius:12px; padding:12px }
.py-confirm > div{ flex-basis:100%; font-size:14px }

/* the Resort comparison, full width under the steps */
.py-compare{ padding:18px 20px; max-width:none }
.py-compare .tbl-wrap{ overflow-x:auto }

/* the list */
.py-list{ overflow:hidden }
.py-listhead{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; padding:16px 20px }
.py-listtitle{ margin:0; font-size:19px; font-weight:800; color:#16181a; font-family:inherit }
.py-empty{ padding:20px; border-top:1px solid #e3e7e9; color:#5c646b }
.py-row, .py-hdr{ display:grid; grid-template-columns:40px minmax(220px,2fr) 70px 190px 80px 110px 120px 100px; gap:12px; align-items:center; padding:14px 20px }
.py-row{ border-top:1px solid #e3e7e9 }
/* Session 383: a week with a loan adds Loan payment and Paid to her after Earned (mh-loans-mockups-v1, 06). */
.py-list.py-loans .py-row, .py-list.py-loans .py-hdr{ grid-template-columns:40px minmax(170px,2fr) 56px 64px 100px minmax(200px,1.6fr) 100px 100px 90px }
.py-list.py-loans .py-row > :nth-child(4), .py-list.py-loans .py-hdr > :nth-child(4){ display:none }   /* Days worked: in Details on a loan week */
.py-loancell{ min-width:0 }
.py-paid{ font-weight:700; color:#16181a; font-variant-numeric:tabular-nums }
.py-hdr{ padding:10px 20px; background:#e9ecee; font-size:12.5px; font-weight:600; color:#4d545a }
.py-num{ text-align:right; font-variant-numeric:tabular-nums }
.py-pay{ font-weight:800 }
.py-nm{ font-size:15px; font-weight:700; color:#16181a !important; overflow-wrap:anywhere }
.py-pills{ display:flex; flex-wrap:wrap; gap:6px; margin-top:4px }
.py-c-det{ text-align:right }
.py-grp{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 20px; background:#dceff0; font-size:14px; font-weight:800; color:#0e363b }
.py-grpsum{ font-weight:700; font-variant-numeric:tabular-nums }
.py-grpsum b{ margin-left:12px }
.py-cbx{ width:20px; height:20px; accent-color:#144d54; cursor:pointer; margin:0 }
.py-cbx:disabled{ cursor:default; opacity:.4 }
.py-dots{ display:flex; gap:4px }
.py-d{ display:inline-flex; width:22px; height:22px; border-radius:50%; align-items:center; justify-content:center; font-size:11px; font-weight:700; background:#e9ecee; color:#6b737a }
.py-d.on{ background:#ffd13a; color:#16181a }

/* Details, in place under the row */
.py-det{ background:#f6f8f9; border-top:1px solid #e3e7e9; padding:16px 20px 20px 72px }
.py-det[hidden]{ display:none }
.py-detgrid{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr); gap:20px; align-items:start }
.py-detside{ display:flex; flex-direction:column; gap:12px }
.py-detbox{ padding:16px }
.py-detfacts{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; font-size:13.5px; color:#4d545a; margin-bottom:12px }
.py-cleans{ display:grid; grid-template-columns:96px minmax(0,1fr) 60px 110px; gap:8px 10px; font-size:14px; line-height:1.5; align-items:start }
.py-cl-prop{ overflow-wrap:anywhere }
.py-cl-prop a{ color:#16181a }
.py-cl-prop > .py-s{ display:block }
.py-btnrow{ display:flex; flex-wrap:wrap; gap:8px }
.py-extra{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; font-size:14px; padding:4px 0 }
.py-extra > span:first-child{ overflow-wrap:anywhere }
.py-extra-act{ white-space:nowrap }
.py-extra-total{ border-top:1px solid #e3e7e9; margin-top:6px; padding-top:8px }
.py-bonus{ display:flex; align-items:center; gap:8px; font-size:14px; padding:4px 0; cursor:pointer }
.py-addform{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px }
.py-addform .py-in:first-child{ flex:1 1 160px }
.py-money{ display:inline-flex; align-items:center; gap:4px; font-weight:600 }
.py-miles summary{ cursor:pointer; font-size:13px; color:#5c646b }
.py-milesdays{ margin-top:6px; font-size:12.5px; color:#4d545a; display:grid; gap:2px }

@media (max-width:1100px){
  .py-steps{ grid-template-columns:minmax(0,1fr) }
  .py-detgrid{ grid-template-columns:minmax(0,1fr) }
  .py-det{ padding-left:20px }
}
@media (max-width:900px){
  .py-row{ grid-template-columns:28px minmax(0,1fr) auto auto }
  .py-row > .py-hide-sm{ display:none }
  .py-hdr{ display:none }
  .py-list.py-loans .py-row{ grid-template-columns:28px minmax(0,1fr) auto auto }
  .py-list.py-loans .py-hdr{ display:none }
}
/* Phone (390): one column; each row shows her name, pay and Details; the rest is inside Details. */
@media (max-width:640px){
  .py{ padding:16px 16px 48px; gap:14px }
  .py-h1{ font-size:28px }
  .py-top{ align-items:stretch }
  .py-weekpick{ width:100%; justify-content:space-between }
  .py-weekbtn{ min-width:0; flex:1 }
  .py-panel{ padding:18px; gap:16px }
  .py-panel-total{ font-size:40px }
  .py-stats{ gap:18px }
  .py-row, .py-list.py-loans .py-row{ grid-template-columns:minmax(0,1fr) auto auto; padding:12px 16px; gap:10px }
  .py-row > .py-c-cbx{ display:none }
  .py-grp, .py-listhead{ padding-left:16px; padding-right:16px }
  .py-grp{ flex-wrap:wrap }
  .py-det{ padding:12px }
  .py-cleans{ grid-template-columns:minmax(0,1fr) auto auto }
  .py-cleans > .py-s{ grid-column:1 / -1; margin-top:6px; font-weight:600 }
  .py-fixlist li{ flex-direction:column; gap:2px }
}