/* Payroll-Lab detail page (system-payroll.html).
   The page reuses the HRcade detail layout and accent tokens (hrcade-detail.css + hrcade-compact.css);
   this file holds only the payroll mock-ups and the sections HRcade does not have.
   Every colour comes from the site tokens, so Light and Dark share one geometry. */

/* ---------- mock-ups inside the step tabs (figures from the DEMO sample set) ---------- */
.pl-mock {display:grid;gap:10px;align-content:start;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--hc-panel)}
.pl-mock-head {display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;padding:0 2px 8px;border-bottom:1px solid var(--line)}
.pl-mock-head b {color:var(--strong);font-size:14px}
.pl-mock-head span {color:var(--muted);font-size:12px}
.pl-rows {display:grid;gap:6px;margin:0;padding:0;list-style:none}
.pl-rows li {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:2px 14px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-solid)}
.pl-rows li>span {min-width:0;color:var(--text);font-size:14px}
.pl-rows li>b {color:var(--strong);font:700 14px/1.4 Manrope,"Noto Sans Thai",sans-serif;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.pl-rows li>small {grid-column:1/-1;color:var(--muted);font-size:12px;line-height:1.5}
.pl-rows li.is-total {border-color:var(--hc-accent);background:var(--hc-accent)}
.pl-rows li.is-total>span,.pl-rows li.is-total>b,.pl-rows li.is-total>small {color:var(--hc-on-accent)}
.pl-rows li.is-total>span {font-weight:700}
.pl-mock-note {margin:0 2px;color:var(--muted);font-size:12px;line-height:1.6}
.pl-mail {display:grid;gap:5px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-solid);font-size:13px;color:var(--text)}
.pl-mail>div {display:grid;grid-template-columns:56px minmax(0,1fr);gap:8px}
.pl-mail>div>span:first-child {color:var(--muted)}
.pl-mail strong {color:var(--strong)}
.pl-attach {display:flex;align-items:center;gap:8px;width:fit-content;max-width:100%;margin-top:4px;padding:7px 10px;border:1px solid var(--line);border-radius:9px;background:var(--hc-soft);color:var(--strong);font-size:12px;overflow-wrap:anywhere}
.pl-attach i {flex:0 0 auto;padding:3px 6px;border-radius:5px;background:var(--hc-accent);color:var(--hc-on-accent);font:800 10px/1.2 Manrope,sans-serif;font-style:normal}
.pl-steps {display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.pl-steps li {padding:5px 10px;border:1px solid var(--line);border-radius:var(--pill);background:var(--surface-solid);color:var(--text);font-size:12px}
.pl-steps li:last-child {border-color:var(--hc-accent);background:var(--hc-accent);color:var(--hc-on-accent);font-weight:700}

/* ---------- sections below the tabs ---------- */
.pl-section {padding:30px 0 6px;scroll-margin-top:110px}
.pl-section-head {display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:10px 28px;margin-bottom:18px}
.pl-section-head h2 {margin:10px 0 0;color:var(--strong);font-size:clamp(23px,2.5vw,30px);line-height:1.4;letter-spacing:-.02em}
.pl-section-head p {max-width:560px;margin:0;color:var(--muted);font-size:14px;line-height:1.8}
.payroll-detail-page .pl-section .eyebrow {color:var(--hc-accent)}

.pl-topics {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.pl-topics a {display:flex;flex-direction:column;gap:6px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:inherit;text-decoration:none;transition:border-color .18s,transform .18s}
.pl-topics a:hover {border-color:var(--hc-accent);transform:translateY(-2px)}
.pl-topics b {color:var(--strong);font-size:15px;line-height:1.45}
.pl-topics span {color:var(--muted);font-size:13px;line-height:1.6}
.pl-topics small {margin-top:auto;padding-top:4px;color:var(--hc-accent);font-size:12px;font-weight:700}

.pl-audience {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.pl-audience article {padding-left:17px;border-left:1px solid var(--line)}
.pl-audience h3 {margin:6px 0;color:var(--strong);font-size:16px}
.pl-audience p {margin:0;color:var(--muted);font-size:14px;line-height:1.8}

.pl-flow {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.pl-flow li {padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.pl-flow b {color:var(--hc-accent);font:800 11px/1 Manrope,sans-serif;letter-spacing:.08em}
.pl-flow strong {display:block;margin:8px 0 4px;color:var(--strong);font-size:15px}
.pl-flow span {color:var(--muted);font-size:13px;line-height:1.65}

.pl-check {display:grid;gap:8px;margin:0;padding:0;list-style:none}
.pl-check li {position:relative;padding-left:24px;color:var(--text);font-size:14px;line-height:1.65}
.pl-check li::before {content:"";position:absolute;left:3px;top:.5em;width:11px;height:6px;border-left:2px solid var(--hc-accent);border-bottom:2px solid var(--hc-accent);transform:rotate(-45deg)}

.pl-limits {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 28px;margin:0;padding:4px 0 22px;list-style:none}
.pl-limits li {position:relative;padding-left:16px;color:var(--muted);font-size:14px;line-height:1.75}
.pl-limits li::before {content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--hc-accent)}
.pl-limits b {color:var(--strong);font-weight:600}

/* ---------- first screen: promise + proof (the real sidebar) + one main action ---------- */
.pl-hero {display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;align-items:center;padding:14px 0 30px}
.pl-free-badge {display:inline-flex;margin-bottom:14px;padding:6px 14px;border:1px solid var(--hc-accent);border-radius:var(--pill);background:var(--hc-soft);color:var(--hc-accent);font:800 13px/1.3 Manrope,"Noto Sans Thai",sans-serif;letter-spacing:.02em}
.payroll-detail-page .pl-hero .eyebrow {color:var(--hc-accent)}
.pl-hero h1 {margin:10px 0 14px;color:var(--strong);font-size:clamp(30px,3.5vw,46px);line-height:1.25;letter-spacing:-.03em}
.pl-hero-copy>p {max-width:600px;margin:0;color:var(--muted);font-size:16px;line-height:1.8}
.pl-hero-points {margin-top:18px}
.pl-hero-points li {font-size:15px}
.pl-hero-actions {display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.pl-hero-actions .button {min-height:50px;padding:0 26px;font-size:15px}
.pl-hero-note {margin:14px 0 0;color:var(--muted);font-size:13px;line-height:1.6}

.pl-hero-shot {position:relative;height:600px;margin:0}
.pl-sheet {position:absolute;top:26px;right:110px;bottom:60px;left:0;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--surface-solid);box-shadow:var(--shadow)}
.pl-sheet-bar {display:flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-bottom:1px solid var(--line);background:var(--hc-panel);color:var(--muted);font:600 12px/1 Manrope,"Noto Sans Thai",sans-serif}
.pl-sheet-bar i {width:9px;height:9px;border-radius:50%;background:currentColor;opacity:.35}
.pl-sheet-bar span {margin-left:8px;white-space:nowrap}
.pl-sheet-grid {display:grid;grid-template-columns:32px 84px 118px 96px 96px;color:var(--text);font:500 12px/1 Manrope,"Noto Sans Thai",sans-serif}
.pl-sheet-grid span {display:flex;align-items:center;height:34px;padding:0 9px;overflow:hidden;border-right:1px solid var(--line);border-bottom:1px solid var(--line);white-space:nowrap}
.pl-sheet-grid span:nth-child(5n+4),.pl-sheet-grid span:nth-child(5n) {justify-content:flex-end;font-variant-numeric:tabular-nums}
.pl-sheet-grid span:nth-child(-n+5),.pl-sheet-grid span:nth-child(5n+1) {justify-content:center;background:var(--hc-panel);color:var(--muted);font-weight:700}
.pl-shot-frame {position:absolute;top:0;right:0;bottom:24px;width:min(339px,64%);overflow:hidden;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 24px 60px rgba(20,16,12,.20)}
.pl-shot-frame img {display:block;width:100%;height:auto}
.pl-shot-frame::after {content:"";position:absolute;right:0;bottom:0;left:0;height:96px;background:linear-gradient(rgba(255,255,255,0),#fff)}
.pl-chip {position:absolute;z-index:2;max-width:205px;padding:10px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface-solid);box-shadow:var(--shadow);color:var(--strong);font-size:13px;font-weight:700;line-height:1.45}
.pl-chip-a {top:232px;left:14px}
.pl-chip-b {top:326px;left:14px}
.pl-hero-shot figcaption {position:absolute;bottom:26px;left:4px;max-width:calc(100% - 350px);color:var(--muted);font-size:12px;line-height:1.5}

.pl-facts {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:4px 0 24px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}
.pl-facts>div {padding:18px 20px}
.pl-facts>div+div {border-left:1px solid var(--line)}
.pl-facts b {display:block;color:var(--hc-accent);font:800 30px/1.1 Manrope,"Noto Sans Thai",sans-serif}
.pl-facts span {display:block;margin-top:6px;color:var(--muted);font-size:13px;line-height:1.55}

.pl-audience .pl-pain {margin:2px 0 8px;color:var(--strong);font-weight:600}

/* ---------- getting the file: one panel, one current step, the value beside it ---------- */
.pl-get-panel {margin:34px 0 8px;padding:30px;border:1px solid var(--hc-accent);border-radius:26px;background:var(--hc-panel);scroll-margin-top:100px}
.payroll-detail-page .pl-get-panel .eyebrow {color:var(--hc-accent)}
.pl-get-head h2 {margin:10px 0 0;color:var(--strong);font-size:clamp(25px,2.8vw,34px);line-height:1.35;letter-spacing:-.02em}
.pl-get-head p {max-width:720px;margin:8px 0 0;color:var(--text);font-size:15px;line-height:1.75}
.pl-get-body {display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px;align-items:start;margin-top:22px}
.pl-get {display:grid;gap:12px;margin:0;padding:0;list-style:none}
.pl-get>li {display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--surface-solid);transition:border-color .2s,box-shadow .2s}
.pl-get>li.is-current {border-color:var(--hc-accent);box-shadow:0 0 0 1px var(--hc-accent)}
.pl-step-no {display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--hc-soft);color:var(--hc-accent);font:800 13px/1 Manrope,sans-serif}
.pl-get>li.is-current .pl-step-no {background:var(--hc-accent);color:var(--hc-on-accent)}
.pl-get>li.is-done .pl-step-no span {display:none}
.pl-get>li.is-done .pl-step-no::before {content:"";width:14px;height:8px;margin-top:-4px;border-bottom:2.5px solid currentColor;border-left:2.5px solid currentColor;transform:rotate(-45deg)}
.pl-get>li>div {display:flex;flex-direction:column;gap:6px;min-width:0}
.pl-get strong {color:var(--strong);font-size:17px;line-height:1.45}
.pl-get>li>div>span {color:var(--muted);font-size:14px;line-height:1.7}
.pl-get-actions {display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.pl-get-actions .button {flex:1 1 190px}
html[data-theme] .payroll-detail-page .pl-main-action {border:1px solid var(--hc-accent);background:var(--hc-accent);color:var(--hc-on-accent);box-shadow:none}
html[data-theme] .payroll-detail-page .pl-get>li:not(.is-current) .pl-main-action {background:transparent;color:var(--hc-accent)}
.pl-get-value {padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--surface-solid)}
.pl-get-value h3 {margin:0 0 12px;color:var(--strong);font-size:17px}
.pl-get-cost {display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.pl-get-cost b {color:var(--hc-accent);font:800 26px/1.1 Manrope,"Noto Sans Thai",sans-serif}
.pl-get-cost span {color:var(--muted);font-size:13px}
.pl-get-note {margin:16px 0 0;padding:12px 16px;border-left:3px solid var(--hc-accent);border-radius:0 12px 12px 0;background:var(--surface-solid);color:var(--text);font-size:13px;line-height:1.7}
.payroll-detail-page button.button {font-family:inherit}
.pl-text-action {align-self:flex-start;padding:4px 0;border:0;background:none;color:var(--hc-accent);font-family:inherit;font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

.pl-follow {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-top:14px;padding:14px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.pl-follow span {color:var(--text);font-size:14px;line-height:1.6}

.pl-faq {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start}
.pl-faq details {border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.pl-faq summary {position:relative;padding:15px 46px 15px 18px;color:var(--strong);font-size:15px;font-weight:600;line-height:1.5;list-style:none;cursor:pointer}
.pl-faq summary::-webkit-details-marker {display:none}
.pl-faq summary::after {content:"+";position:absolute;top:50%;right:18px;color:var(--hc-accent);font:700 20px/1 Manrope,sans-serif;transform:translateY(-50%)}
.pl-faq details[open] summary::after {content:"−"}
.pl-faq p {margin:0;padding:0 18px 16px;color:var(--muted);font-size:14px;line-height:1.75}

.pl-bottom-actions {display:flex;flex-wrap:wrap;gap:10px}
html[data-theme] .payroll-detail-page .button.secondary {border-color:var(--hc-accent);color:var(--hc-accent);background:transparent}
html[data-theme] .payroll-detail-page .button.secondary:hover {background:var(--hc-soft)}
.pl-section :focus-visible,.pl-hero :focus-visible,.pl-get-panel :focus-visible {outline:3px solid var(--hc-focus);outline-offset:4px}

@media (max-width:980px) {
  .pl-hero {grid-template-columns:1fr;gap:26px}
  .pl-hero-shot {width:100%;max-width:600px;margin:0 auto}
  .pl-topics {grid-template-columns:repeat(2,minmax(0,1fr))}
  .pl-flow {grid-template-columns:repeat(2,minmax(0,1fr))}
  .pl-get-body {grid-template-columns:1fr}
}
@media (max-width:760px) {
  .pl-mock {padding:14px}
  .pl-rows li {padding:9px 10px}
  .pl-rows li>span,.pl-rows li>b {font-size:13px}
  .pl-section {padding-top:24px}
  .pl-audience {grid-template-columns:1fr;gap:18px}
  .pl-limits {grid-template-columns:1fr}
  .pl-facts {grid-template-columns:repeat(2,minmax(0,1fr))}
  .pl-facts>div+div {border-left:0}
  .pl-facts>div:nth-child(even) {border-left:1px solid var(--line)}
  .pl-facts>div:nth-child(n+3) {border-top:1px solid var(--line)}
  .pl-get-panel {padding:20px;border-radius:22px}
  .pl-faq {grid-template-columns:1fr}
}
@media (max-width:560px) {
  .pl-hero-shot {display:flex;flex-direction:column;align-items:center;gap:10px;height:auto}
  .pl-sheet {display:none}
  .pl-shot-frame {position:relative;right:auto;bottom:auto;width:min(300px,86%);height:440px}
  .pl-chip {position:static;width:100%;max-width:320px;text-align:center}
  .pl-hero-shot figcaption {position:static;max-width:none;text-align:center}
  .pl-get>li {grid-template-columns:36px minmax(0,1fr);gap:12px;padding:16px}
  .pl-step-no {width:36px;height:36px}
}
@media (max-width:430px) {
  .pl-topics,.pl-flow {grid-template-columns:1fr}
  .pl-hero-actions,.pl-bottom-actions {display:grid;width:100%}
  .pl-follow .button {width:100%}
}
@media (prefers-reduced-motion:reduce) {.pl-topics a,.pl-get>li {transition:none}.pl-topics a:hover {transform:none}}