/* Note: HR legal updates 2569. Shares pay.css (short answer, chips, pairs, tools, FAQ, sources, citations). */
.law-scope { margin-top: 14px; font-size: var(--fs-small); color: var(--ink-2); max-width: 70ch; }
.law-wrap { max-width: calc(1080px + 2 * var(--gutter)); }
.law-h { font-family: var(--display); font-weight: 650; font-size: 1.6rem; letter-spacing: -.015em; }
:lang(th) .law-h { letter-spacing: 0; font-weight: 600; }
.law-intro { margin-top: 8px; color: var(--ink-2); max-width: 64ch; }

/* The five-step way of working: one line that draws once, then stays. */
.law-flow { margin-top: clamp(48px, 6vw, 72px); }
.flow { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 18px; margin-top: 22px; }
.flow::before { content: ''; position: absolute; left: 14px; right: 14px; top: 14px; height: 2px; background: var(--accent); transform-origin: left; transform: scaleX(1); }
.js .flow::before { animation: flow-draw 1100ms var(--ease-out) 200ms both; }
@keyframes flow-draw { from { transform: scaleX(0); } }
.flow li { position: relative; display: grid; gap: 4px; align-content: start; }
.flow-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 8px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--accent); color: var(--accent); font-size: .85rem; font-weight: 700; }
.js .flow-dot { animation: dot-in 500ms var(--ease-out) both; animation-delay: calc(200ms + var(--i) * 200ms); }
@keyframes dot-in { from { background: var(--bg); box-shadow: inset 0 0 0 2px var(--line-strong); color: var(--ink-2); } }
.flow strong { font-size: 1.02rem; }
.flow span:last-child { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.55; }

/* Overview */
.law-overview { margin-top: clamp(48px, 6vw, 72px); }
.law-filters { margin-top: 18px; }
.law-filters[hidden] { display: none; }
.lu-list-main { display: grid; gap: 16px; margin-top: 20px; }
.lu { padding: clamp(18px, 2.4vw, 26px); scroll-margin-top: 96px; }
.lu[hidden] { display: none; }
.lu:target { box-shadow: 0 0 0 2px var(--accent), var(--sh-1); }
.lu-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.lu-state { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 8px; border-radius: 999px; font-size: var(--fs-micro); font-weight: 700; }
.st-icon { width: 18px; height: 18px; stroke-width: 2; }
.st-inForce { background: var(--accent-tint); color: var(--accent); }
.st-upcoming { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--accent); }
.st-monitor { background: var(--tint); color: var(--ink-2); }
.lu-cat { font-size: var(--fs-micro); color: var(--ink-2); }
.lu h3 { margin-top: 12px; font-family: var(--display); font-size: 1.3rem; font-weight: 650; line-height: 1.35; }
:lang(th) .lu h3 { font-weight: 600; line-height: 1.45; }
.lu-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; margin-top: 14px; }
.lu-facts dt { font-size: var(--fs-micro); font-weight: 600; color: var(--ink-2); }
.lu-facts dd { margin-top: 2px; font-size: var(--fs-small); line-height: 1.6; }
.lu-do dd { font-weight: 600; color: var(--ink); }
.lu-src { margin-top: 14px; font-size: var(--fs-micro); color: var(--ink-2); }

.lu-plan { margin-top: 16px; border-top: 1px solid var(--line); }
.lu-plan > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font-weight: 600; color: var(--accent); cursor: pointer; list-style: none; }
.lu-plan > summary::-webkit-details-marker { display: none; }
.lu-plan > summary::after { content: '+'; font-size: 1.2rem; line-height: 1; }
.lu-plan[open] > summary::after { content: '−'; }
.lu-plan > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* From legal change to evidence: the four stages light up in order when a plan opens. */
.rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 4px 0 18px; }
.rail li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-field); background: var(--accent-tint); font-size: var(--fs-micro); font-weight: 600; color: var(--ink); }
.rail-n { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff; font-size: .7rem; }
.lu-plan[open] .rail li { animation: rail-on 420ms var(--ease-out) both; animation-delay: calc(var(--i) * 240ms); }
@keyframes rail-on { from { background: var(--surface-2); color: var(--ink-2); } }
.lu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.lu-part { padding: 14px 0 6px; border-top: 1px solid var(--line); }
.lu-plan[open] .lu-part { animation: part-in 520ms var(--ease-out) both; animation-delay: calc(var(--s, 0) * 240ms); }
.lu-part[data-stage='1'] { --s: 1; } .lu-part[data-stage='2'] { --s: 2; } .lu-part[data-stage='3'] { --s: 3; }
@keyframes part-in { from { opacity: 0; transform: translateY(8px); } }
.lu-part h4 { margin: 10px 0 6px; font-size: var(--fs-small); font-weight: 700; }
.lu-part h4:first-child { margin-top: 0; }
.lu-list { display: grid; gap: 6px; padding-left: 1.1em; list-style: disc; font-size: var(--fs-small); line-height: 1.6; }
.lu-list > li { display: list-item; list-style: disc outside; }
.lu-list li::marker { color: var(--ink-2); }
/* Tag and text as two explicit cells (never bare text beside inline elements in a grid). */
.lu-tasks { padding-left: 0; }
.lu-tasks > li, .lc-area li { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 10px; align-items: baseline; list-style: none; }
.lu-note { font-size: var(--fs-micro); color: var(--ink-2); }
.lt { display: inline-block; margin-right: 4px; padding: 1px 8px; border-radius: 999px; font-size: .72rem; font-weight: 700; white-space: nowrap; vertical-align: 1px; }
.lt-legal { background: var(--ink); color: var(--on-dark); }
.lt-practice { background: var(--surface); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.lu-ba, .lu-rates { font-size: var(--fs-small); }
.lu-ba th, .lu-ba td, .lu-rates th, .lu-rates td { padding: 8px 10px; vertical-align: top; text-align: left !important; }
.lu-ba td:last-child { font-weight: 600; }
.lu-ba th[scope='row'] { width: 30%; }
.lu-ba td { width: 35%; }
.lu-rates caption { caption-side: bottom; padding-top: 6px; text-align: left; font-size: var(--fs-micro); color: var(--ink-2); }
.lu-rates td { text-align: right !important; font-weight: 600; font-variant-numeric: tabular-nums; }
.lu-when { display: grid; gap: 8px; font-size: var(--fs-small); }
.lu-when dt { font-size: var(--fs-micro); font-weight: 700; color: var(--ink-2); }
.w-statutory dt { color: var(--ink); }
.w-statutory dd { font-weight: 600; }

/* Reading sections */
.law-dates { display: grid; margin-top: 12px; border-left: 2px solid var(--line-strong); }
.law-dates li { position: relative; display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 4px 16px; padding: 10px 0 10px 18px; }
.law-dates li::before { content: ''; position: absolute; left: -6px; top: 17px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--accent); }
.law-dates time { font-weight: 700; font-variant-numeric: tabular-nums; }
.law-dates a { color: var(--ink); text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.law-dates a:hover { color: var(--accent); }
.law-table { min-width: 640px; }
.law-table th[scope='row'] { min-width: 180px; }
.law-table th[scope='row'] a { color: var(--accent); }
.law-table td { text-align: left !important; vertical-align: top; }
.law-table td:nth-child(3) { white-space: nowrap; }
.law-areas { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 6px; padding: 0; border: 0; }
.law-areas[hidden] { display: none; }
.law-areas legend { margin-bottom: 8px; font-size: var(--fs-small); font-weight: 600; }
.law-print-head { display: none; }
.lc-area { margin-top: 18px; }
.lc-area[hidden] { display: none; }
.lc-area h3 { font-size: 1.05rem; }
.lc-area ul { display: grid; gap: 8px; margin-top: 8px; }
.lc-area li { padding: 10px 0; border-top: 1px solid var(--line); font-size: var(--fs-small); line-height: 1.6; }
.lc-from { display: block; margin-top: 2px; font-size: var(--fs-micro); color: var(--ink-2); }
.law-start-note { margin-top: 14px; font-size: var(--fs-small); color: var(--ink-2); }
.law-history li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.law-history time { font-weight: 600; margin-right: 8px; }

@media (max-width: 860px) {
  .flow { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .flow::before { left: 14px; right: auto; top: 14px; bottom: 14px; width: 2px; height: auto; transform-origin: top; }
  @keyframes flow-draw { from { transform: scaleY(0); } }
  .flow li { grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px; }
  .flow-dot { grid-row: span 2; margin-bottom: 0; }
  .lu-facts, .lu-grid, .rail { grid-template-columns: minmax(0, 1fr); }
  .law-dates li { grid-template-columns: minmax(0, 1fr); }
  .lu-tasks > li, .lc-area li { grid-template-columns: minmax(0, 1fr); }
  .lt { justify-self: start; }
}
/* Narrow screens: before/after as stacked pairs, never three squeezed columns. */
@media (max-width: 600px) {
  .lu-ba thead { display: none; }
  .lu-ba, .lu-ba tbody, .lu-ba tr, .lu-ba th, .lu-ba td { display: block; width: auto; }
  .lu-ba tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .lu-ba th[scope='row'], .lu-ba td { width: auto; padding: 2px 0; border: 0; }
  .lu-ba td::before { content: attr(data-label) ': '; font-weight: 600; color: var(--ink-2); }
}
@media (prefers-reduced-motion: reduce) {
  .js .flow::before, .js .flow-dot, .lu-plan[open] .rail li, .lu-plan[open] .lu-part { animation: none; }
}

/* Print: the whole article prints readably; "Print the checklist" prints only the checklist. */
@media print {
  .lu-plan > *:not(summary) { display: block; }
  .law-filters, .law-areas, [data-law-print] { display: none !important; }
  body[data-print='checklist'] .site-header, body[data-print='checklist'] .site-footer, body[data-print='checklist'] .skip-link,
  body[data-print='checklist'] .law-article > header, body[data-print='checklist'] .law-wrap,
  body[data-print='checklist'] .law-body > section:not(#start) { display: none !important; }
  body[data-print='checklist'] .law-print-head { display: block; font-weight: 700; margin-bottom: 8px; }
  .lc-from { color: #444; }
}