/* Hallmark · genre: warm-utilitarian · macrostructure: shared task card · design-system: design.md · designed-as-app
 * pre-emit critique: P5 H5 E5 S5 R5 V4 · contrast: pass (40–41) · mobile: pass (34,49–57)
 */
:root{
  --color-paper:#FBF6EC;
  --color-paper-2:#F3EBDB;
  --color-paper-3:#E8DECB;
  --color-card:#FFFDF7;
  --color-ink:#1E1A16;
  --color-ink-2:#4A413A;
  --color-muted:#6B6055;
  --color-rule:#D9CDB8;
  --color-rule-2:#E6DCCB;
  /* 2026-09-06 (Astra proposal, founder-approved) — the SSR page had its own
     hand-written tomato (#B4452C and a lighter hover/deep pair), so the public
     /j/:id primary was a different colour from the SPA and the app. These are
     design.md § 2's generated values for oklch(50% .15 33) and its states;
     regenerate them with 'bun run design:tokens', never by eye. */
  --color-primary:#A73923;
  --color-primary-ink:#FCF5E7;
  --color-primary-hover:#9A2B16;
  --color-primary-deep:#892312;
  --color-primary-tint:#FEE0D8;
  --color-accent:#D9603F;
  --color-accent-tint:#F3EBDB;
  --color-tag-ink:#1E1A16;
  --color-focus:#2F5FD6;
  --status-pending:#4F5661;
  --status-pending-bg:#E7EAED;
  --status-contacted:#005187;
  --status-contacted-bg:#D8EDFC;
  --status-hired:#005725;
  --status-hired-bg:#D7F4DC;
  --status-completed:#01421A;
  --status-completed-bg:#D7F4DC;
  --status-rejected:#8C2E23;
  --status-rejected-bg:#FFE4DF;
  --status-withdrawn:#4F5661;
  --status-withdrawn-bg:#E7EAED;
  --font-ui:"Sarabun","Noto Sans Myanmar","Noto Sans",system-ui,sans-serif;
  --font-display:"Mitr","Noto Sans Myanmar","Sarabun",sans-serif;
  --font-numeral:"Sarabun","Noto Sans Myanmar",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
  --text-sm:.875rem;
  --text-xl:1.5rem;
  --radius-chip:10px;
  --radius-input:12px;
  --radius-tag:10px;
  --radius-card:18px;
  --radius-doc:8px;
  --radius-pill:999px;
  --shadow-card:0 1px 0 var(--color-rule-2),0 12px 28px -18px rgba(30,26,22,.35);
  --shadow-doc:6px 6px 0 var(--color-rule-2);
  --shadow-sheet:0 -4px 24px rgba(30,26,22,.16);
  --layout-read:640px;
  --layout-task:480px;
  font-family:var(--font-ui);
  color:var(--color-ink);
  background:var(--color-paper);
  font-synthesis:none;
}
*{box-sizing:border-box}
html,body{overflow-x:clip}
html{font-size:16px}
body{margin:0;min-width:320px;min-height:100vh;background:var(--color-paper);line-height:1.55}
:lang(my){line-height:1.65}
h1,h2{font-family:var(--font-display);font-style:normal;font-weight:700}
a{color:inherit}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea,summary{-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%}
.skip-link{position:fixed;z-index:99;left:1rem;top:-5rem;min-height:48px;padding:.75rem 1rem;display:flex;align-items:center;background:var(--color-card);border:2px solid var(--color-primary);border-radius:var(--radius-input)}
.skip-link:focus{top:1rem}
.site-header{height:72px;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0 max(1rem,env(safe-area-inset-left));max-width:760px;margin:auto}
.wordmark{display:flex;align-items:center;gap:.5rem;min-height:48px;text-decoration:none;color:var(--color-primary);font-size:var(--text-xl);font-family:var(--font-display);line-height:1.4;white-space:nowrap}
.wordmark-glyph{width:24px;height:24px;flex:none;border-radius:var(--radius-chip);background:var(--color-primary)}
.wordmark strong{font-weight:700}
.language-menu{position:relative}
.language-menu summary{min-width:96px;min-height:48px;padding:0 .75rem;display:flex;align-items:center;justify-content:center;gap:.5rem;border:1px solid var(--color-muted);border-radius:var(--radius-input);background:var(--color-card);cursor:pointer;list-style:none}
.language-menu summary::-webkit-details-marker{display:none}
.language-options{position:absolute;right:0;z-index:10;top:54px;width:160px;padding:.35rem;background:var(--color-card);border-radius:var(--radius-card);box-shadow:var(--shadow-card)}
.language-options a{display:flex;align-items:center;min-height:48px;padding:0 .75rem;border-radius:var(--radius-chip);text-decoration:none}
.language-options a[aria-current=true]{background:var(--color-primary-tint);color:var(--color-primary-deep)}
.page{width:min(100%,760px);margin:auto;padding:1rem 1rem 7rem}
.job-page{max-width:calc(var(--layout-read) + 2rem)}
.narrow-page{max-width:calc(var(--layout-task) + 2rem)}
.job-card,.apply-card,.state-card{background:var(--color-card);border-radius:var(--radius-card);box-shadow:var(--shadow-card)}
.job-card{overflow:hidden}
.job-hero{width:100%;background:var(--color-paper-2)}
.hero-image{width:100%;max-height:300px;aspect-ratio:16/9;object-fit:cover}
.job-content{padding:1.25rem}
.job-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:start;margin-bottom:1.4rem}
@media(max-width:480px){.job-heading{grid-template-columns:minmax(0,1fr)}.job-side{align-items:flex-start;flex-direction:row;flex-wrap:wrap;align-items:center}}
.title-block{min-width:0}
.title-block p,.eyebrow,.context-line{margin:0 0 .25rem;color:var(--color-muted);font-size:.875rem;font-weight:500;font-family:var(--font-ui);overflow-wrap:anywhere}
.context-line{margin:.25rem 0 .75rem}
.title-block h1{font-size:clamp(1.55rem,6vw,2.25rem);line-height:1.4;margin:0;overflow-wrap:anywhere;hyphens:none}
.title-block h1+p{margin-top:.3rem}
:lang(my) .title-block h1{line-height:1.5}
.job-side{display:flex;flex-direction:column;align-items:flex-end;gap:.75rem;min-width:0}
.status-chip{min-height:32px;display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .65rem;border-radius:var(--radius-pill);font-size:.875rem;font-weight:700;white-space:nowrap}
.status-chip svg{width:16px;height:16px;flex:none}
.landing-group{margin:1.5rem 0 .5rem;font-size:1rem;font-weight:700;color:var(--color-ink-2)}
.fact-note{margin:.25rem 0 0;font-size:1rem;font-weight:400;line-height:1.6;color:var(--color-ink-2);overflow-wrap:anywhere}
.status-open{background:var(--status-hired-bg);color:var(--status-hired)}
.status-full{background:var(--status-completed-bg);color:var(--status-completed)}
.status-start_passed{background:var(--status-pending-bg,var(--color-paper-2));color:var(--color-ink-2)}
.status-expired,.status-missing,.status-closed{background:var(--status-withdrawn-bg);color:var(--status-withdrawn)}
/* NM-067 — remaining-vacancy chip; a quiet fact, never louder than the status. */
.status-slots{background:var(--color-paper-2);color:var(--color-ink-2)}
/* Founder 2026-09-03 — pay-timing chip. Quiet paper by default; same_day gets
   the accent tint (mirrors .pay-timing-chip--accent in apps/web app.css). */
.status-pay-timing{background:var(--color-paper-2);color:var(--color-ink-2)}
.status-pay-timing-accent{background:var(--color-accent-tint);color:var(--color-ink)}
.state-body{margin:.6rem 0 0;color:var(--color-ink);line-height:1.6}
.price-tag{max-width:12rem;padding:.55rem .75rem;border-radius:var(--radius-tag);background:var(--color-tag-ink);color:var(--color-primary-ink);font-family:var(--font-numeral);font-variant-numeric:tabular-nums;text-align:center;transform:rotate(-2deg);transform-origin:center}
.price-amount{display:block;font-size:clamp(1.55rem,7vw,1.875rem);font-weight:700;line-height:1.25;white-space:nowrap}
.price-unit{display:block;margin-top:.1rem;font-size:var(--text-sm);font-weight:500;line-height:1.35;white-space:normal}
.pay-copy{max-width:12rem;margin:0;color:var(--color-ink);font-family:var(--font-numeral);font-weight:700;text-align:right;overflow-wrap:anywhere}
.facts{display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem;margin:0 0 1.4rem}
.facts>div{min-width:0;padding:1rem;border-radius:var(--radius-input);background:var(--color-paper-2)}
.facts dt{display:flex;align-items:center;gap:.4rem;color:var(--color-ink-2);font-size:.875rem;font-weight:500}
.facts dt svg{width:20px;height:20px;color:var(--color-ink-2);flex:none}
.facts dd{margin:.35rem 0 0;font-weight:700;font-size:1rem;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.text-action{display:inline-flex;align-items:center;min-height:48px;margin-top:.35rem;color:var(--color-primary);font-weight:700}
.job-card section{padding:1.25rem 0;border-top:1px solid var(--color-rule-2)}
h2{margin:0 0 .6rem;font-size:1.125rem;line-height:1.4}
:lang(my) h2{line-height:1.5}
.prose{margin:0;white-space:pre-line;overflow-wrap:anywhere}
.trust-card{margin-top:.25rem}
.employer-line{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.shop-avatar{width:40px;height:40px;border-radius:var(--radius-input);object-fit:cover;background:var(--color-paper-2);flex:0 0 auto}
.verified{font-size:.875rem;background:var(--status-hired-bg);color:var(--status-hired);padding:.25rem .6rem;border-radius:var(--radius-pill);font-weight:700}
.trust-card p{margin:.4rem 0 0;color:var(--color-ink-2);font-weight:500}
.primary{min-height:56px;padding:.75rem 1.25rem;border:0;border-radius:var(--radius-input);background:var(--color-primary);color:var(--color-primary-ink);text-decoration:none;font-weight:700;font-size:1.125rem;display:flex;align-items:center;justify-content:center;text-align:center;cursor:pointer;line-height:1.35}
.primary:active{background:var(--color-primary-deep);transform:translateY(1px)}
.primary:focus-visible,.text-action:focus-visible,.back-link:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,a:focus-visible,.star-options input:focus-visible+svg,.tag-options input:focus-visible+span{outline:2px solid var(--color-focus);outline-offset:2px}
.primary:disabled{background:var(--color-paper-3);color:var(--color-muted);cursor:wait}
.desktop-action{display:none}
.sticky-action{position:fixed;z-index:5;bottom:0;left:0;right:0;display:grid;gap:.5rem;padding:.75rem 1rem max(.75rem,env(safe-area-inset-bottom));background:var(--color-card);box-shadow:var(--shadow-sheet)}
/* Human review #28 — "รับงานนี้" was smaller here than the SPA's. margin:auto
   on a grid item is an auto margin: it absorbs the free space, which cancels
   the default justify-self:stretch, so the button shrank to the width of its
   own label and sat centred. width + a horizontal-only auto margin keeps the
   centring AND the full width, at the SPA's 56px height (.primary). */
.sticky-action .primary{width:min(100%,var(--layout-read));margin:0 auto}
.detail-trust-line{width:min(100%,var(--layout-read));margin:0 auto;color:var(--color-ink-2);font-size:1rem;font-weight:500;line-height:1.55;text-align:center;overflow-wrap:anywhere}
/* Human review #28 — a tall empty gap between the card and the footer. The
   clearance under the job page exists for exactly one reason: the fixed
   .sticky-action bar covers the bottom of the viewport, so the page must be
   able to scroll that far past its last line. It was a hand-picked 10rem,
   which is neither the bar's height when the safety notice is collapsed nor
   when it is expanded. --sticky-action-h is measured from the real element by
   the inline script below and re-measured whenever the notice is toggled or
   the window resizes.

   Round 5, Sol finding 5 — the FALLBACK is what a reader gets with JS off, or
   in the window before the deferred script runs, and the HTML deliberately
   ships the notice as <details open> with four bullets. 7.5rem modelled a
   collapsed bar that does not exist at first paint, so the expanded bar
   covered the end of the page and, on a short MY viewport, most of it.

   Two changes make the no-JS layout structurally non-overlapping, with no
   the :has selector (which the older Android WebViews in this fleet lack) and no script:
   the open notice's body is CAPPED and scrolls inside itself, which bounds the
   bar's height for good; and the fallback is that bound, not a guess. The
   pieces of --sticky-action-chrome, top to bottom: .75rem padding, the 48px
   summary row, the notice's own .5rem margin, two .5rem grid gaps, two lines
   of the 1rem/1.55 trust line, the 56px primary, and .75rem padding —
   ~12.4rem, rounded up to 13rem. */
:root{--sticky-notice-max:30vh;--sticky-action-chrome:13rem;--sticky-action-max:calc(var(--sticky-notice-max) + var(--sticky-action-chrome))}
.sticky-action .safety-body{max-height:var(--sticky-notice-max);overflow-y:auto;overscroll-behavior:contain}
.job-page-active{padding-bottom:calc(var(--sticky-action-h, var(--sticky-action-max)) + 1rem)}
.support-link{min-height:48px;display:flex;align-items:center;justify-content:center;margin-top:.75rem;color:var(--color-muted);font-weight:500;text-align:center}
.unavailable{margin-top:1rem;padding:1rem;background:var(--color-paper-2);border-radius:var(--radius-input)}
.unavailable p{margin:.25rem 0 0}
.back-link{min-height:48px;display:inline-flex;align-items:center;font-weight:700;text-decoration:none;color:var(--color-primary)}
.apply-card{padding:clamp(1.25rem,5vw,2rem)}
.apply-card h1{font-size:clamp(1.65rem,7vw,2.35rem);line-height:1.4;margin:.25rem 0;overflow-wrap:anywhere}
:lang(my) .apply-card h1{line-height:1.5}
.lede{color:var(--color-ink-2);margin:.5rem 0 1.5rem;overflow-wrap:anywhere}
.step-mark{display:flex;gap:.4rem;margin-bottom:1.5rem}
.step-mark span{height:5px;flex:1;border-radius:var(--radius-pill);background:var(--color-rule-2)}
.step-mark span.on{background:var(--color-primary)}
.form-stack{display:grid;gap:1rem}
.form-stack label{display:grid;gap:.4rem;font-weight:500;font-size:.875rem;color:var(--color-ink-2);min-width:0}
.form-stack input,.form-stack select,.form-stack textarea{width:100%;min-height:56px;padding:.75rem .9rem;border:1px solid var(--color-muted);border-radius:var(--radius-input);background:var(--color-paper-2);color:var(--color-ink);font-size:1.125rem}
.form-stack textarea{min-height:112px;resize:vertical}
.field-note{color:var(--color-muted);font-size:.875rem;margin:-.4rem 0 .2rem}
.notice,.form-error{padding:.85rem 1rem;border-radius:var(--radius-input);margin:0 0 1rem;overflow-wrap:anywhere}
.notice{background:var(--color-primary-tint);color:var(--color-primary-deep)}
.notice-icon{width:20px;height:20px;vertical-align:-.25rem;margin-right:.35rem}
.form-error{background:var(--status-rejected-bg);color:var(--status-rejected);border:1px solid var(--status-rejected)}
.verified-notice{margin-bottom:.25rem}
.masked-phone{font-size:1.15rem;font-weight:700;margin:0;font-family:var(--font-numeral);font-variant-numeric:tabular-nums}
.state-page{min-height:70vh;display:grid;place-items:center}
.state-card{width:min(100%,var(--layout-task));padding:clamp(1.5rem,7vw,2.5rem);text-align:center}
.state-card h1{font-size:clamp(1.7rem,7vw,2.4rem);line-height:1.4;margin:1rem 0 .5rem;overflow-wrap:anywhere}
:lang(my) .state-card h1{line-height:1.5}
.state-card p{color:var(--color-ink-2)}
.state-icon{display:grid;place-items:center;width:72px;height:72px;border-radius:var(--radius-card);margin:auto;background:var(--color-paper-2);color:var(--color-ink);font-size:2rem;font-weight:700}
.success-card .state-icon{background:var(--status-hired-bg);color:var(--status-hired)}
.state-card .primary{margin-top:1.5rem}
.secondary{background:transparent;color:var(--color-primary);border:1.5px solid var(--color-primary);box-shadow:none}
.secondary:active{background:var(--color-primary-tint);color:var(--color-primary-deep)}
.confirmation{text-align:left;margin:1.5rem 0;padding:1rem;background:var(--color-paper-2);border-radius:var(--radius-input)}
.confirmation div+div{border-top:1px solid var(--color-rule-2);padding-top:.75rem;margin-top:.75rem}
.confirmation dt{color:var(--color-muted);font-size:.875rem}
.confirmation dd{margin:.1rem 0 0;font-weight:700;overflow-wrap:anywhere}
footer{display:flex;flex-direction:column;align-items:center;padding:2.5rem 1rem 3rem;color:var(--color-muted);font-size:.875rem;text-align:center}
footer strong{color:var(--color-ink);font-size:1rem;font-family:var(--font-display)}
.rating-form fieldset{border:0;padding:0;margin:0}
.rating-form legend{font-weight:700;margin-bottom:.55rem;color:var(--color-ink)}
.star-options{display:grid;grid-template-columns:repeat(5,minmax(48px,1fr));gap:.125rem}
.star-options label{position:relative;display:grid;place-items:center;min-width:48px;height:52px;cursor:pointer}
.star-options input{position:absolute;opacity:0}
.star-options svg{width:34px;height:34px;color:var(--color-rule);fill:currentColor}
.star-options input:checked+svg{color:var(--color-primary)}
/* NM-069 — the apply form's skill chips reuse .tag-options (48dp targets, no
   JavaScript); the fieldset only needs the reset the rating form already has. */
.skills-field{border:0;padding:0;margin:0}
.skills-field legend{font-weight:500;font-size:.875rem;color:var(--color-ink-2);margin-bottom:.4rem;padding:0}
.skills-field .field-note{margin:.5rem 0 0}
.prefill-notice{margin:-.4rem 0 .2rem;color:var(--color-ink-2)}
/* NM-036 — the age gate's three selects. One row on a phone, because a worker
   should see day/month/year as one question; each select keeps the 56px form
   height, so every target clears 48dp. */
.birth-date{border:0;padding:0;margin:0;min-width:0}
.birth-date legend{font-weight:500;font-size:.875rem;color:var(--color-ink-2);margin-bottom:.4rem;padding:0}
/* One column by default: at 320px, or at 200% text, three boxes side by side
   leave ~63px for "กุมภาพันธ์" and the month name is unreadable. Three across
   only once there is room for them. */
.birth-date-row{display:grid;grid-template-columns:1fr;gap:.5rem}
@media (min-width:401px){.birth-date-row{grid-template-columns:minmax(0,3fr) minmax(0,4fr) minmax(0,4fr)}}
.birth-date-row label{gap:.3rem}
.birth-date-row select{width:100%;min-height:56px;padding:.75rem .55rem;border:1px solid var(--color-muted);border-radius:var(--radius-input);background:var(--color-paper-2);color:var(--color-ink);font-size:1.125rem}
.birth-date.field-missing legend{color:var(--status-rejected)}
.birth-date.field-missing select{border-color:var(--status-rejected)}
.field-error{color:var(--status-rejected);font-size:.875rem;margin:.4rem 0 0}
.age-gate-card h1{margin-top:0}
.tag-options{display:flex;flex-wrap:wrap;gap:.55rem}
.tag-options label{display:block;cursor:pointer}
.tag-options input{position:absolute;opacity:0}
.tag-options span{min-height:48px;display:flex;align-items:center;padding:.55rem .8rem;border:1px solid var(--color-muted);border-radius:var(--radius-chip);background:var(--color-card)}
.tag-options input:checked+span{background:var(--color-primary-tint);border-color:var(--color-primary);color:var(--color-primary-deep)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.record-page{max-width:calc(var(--layout-read) + 2rem);padding-bottom:3rem}
.record-card{position:relative;background:var(--color-card);border:1.5px solid var(--color-ink);border-radius:var(--radius-doc);box-shadow:var(--shadow-doc);padding:1.25rem;display:grid;gap:1rem;font-variant-numeric:tabular-nums}
.record-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:start}
.record-head>div{min-width:0}
.record-card h1{margin:0;font-size:clamp(1.35rem,5vw,1.75rem);line-height:1.4;overflow-wrap:anywhere}
.record-card h2{margin:.5rem 0 0;font-size:1.1rem}
.record-stamp{width:92px;aspect-ratio:1;display:grid;place-content:center;gap:.1rem;border:2px solid var(--color-primary);border-radius:50%;color:var(--color-primary);font-family:var(--font-display);font-size:.67rem;font-weight:700;line-height:1.2;text-align:center;transform:rotate(-7deg);text-transform:none}
.record-stamp span:first-child{font-size:.78rem;letter-spacing:.04em}
.record-number,.record-big,.record-amount{font-family:var(--font-mono);font-weight:600;font-variant-numeric:tabular-nums}
.record-number{white-space:nowrap}
.record-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin:0;padding:1rem 0;border-top:1px solid var(--color-ink);border-bottom:1px solid var(--color-ink)}
.record-facts dt{font-size:.875rem;color:var(--color-ink-2)}
.record-facts dd{margin:.2rem 0 0}
.record-big{font-size:clamp(1.75rem,8vw,2.75rem);line-height:1.15;overflow-wrap:anywhere}
.record-list{list-style:none;margin:0;padding:0;display:grid}
.record-row{display:flex;justify-content:space-between;gap:.75rem;align-items:flex-start;padding:.8rem 0;border-bottom:1px solid var(--color-rule-2)}
.record-row-main{display:grid;gap:.2rem;min-width:0}
.record-title{font-weight:700;overflow-wrap:anywhere}
.record-meta{font-size:.875rem;color:var(--color-ink-2);margin:0;overflow-wrap:anywhere}
.record-amount{white-space:nowrap}
.record-footer{font-size:.875rem;color:var(--color-muted);margin:0;padding-top:1rem;border-top:1px solid var(--color-rule)}
@media(max-width:400px){
  .title-block h1{font-size:1.75rem}
}
@media(max-width:399px){
  .job-heading{grid-template-columns:1fr}
  .job-side{align-items:flex-start}
  .pay-copy{text-align:left}
  .record-head{grid-template-columns:1fr}
  .record-stamp{justify-self:end}
  .record-row{display:grid}
  .record-amount{justify-self:start}
}
@media(min-width:414px){
  .page{padding-left:1.5rem;padding-right:1.5rem}
  .job-page,.record-page{max-width:calc(var(--layout-read) + 3rem)}
  .narrow-page{max-width:calc(var(--layout-task) + 3rem)}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts .fact-location{grid-column:1/-1}
}
@media(min-width:700px){
  .site-header{height:88px}
  .page{padding-top:1.5rem}
  .job-content{padding:2rem}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts.facts-with-start{grid-template-columns:repeat(3,minmax(0,1fr))}
  .facts .fact-location{grid-column:auto}
  .sticky-action{left:50%;right:auto;width:min(calc(100% - 3rem),var(--layout-read));transform:translateX(-50%);border-radius:var(--radius-card) var(--radius-card) 0 0}
  .job-page-active{padding-bottom:calc(var(--sticky-action-h, var(--sticky-action-max)) + 1rem)}
  .record-card{padding:2rem}
}
@media(hover:hover) and (pointer:fine){
  .primary:hover{background:var(--color-primary-hover)}
  .secondary:hover{background:var(--color-primary-tint);color:var(--color-primary-deep)}
  .language-options a:hover{background:var(--color-primary-tint);color:var(--color-primary-deep)}
}
/* NM-038 notice & takedown */
.report-entry{display:grid;gap:.5rem;margin-top:1rem}
.report-link{min-height:48px;display:flex;align-items:center;justify-content:center;padding:.75rem 1rem;border:1px solid var(--color-rule);border-radius:var(--radius-input);background:var(--color-paper-2);color:var(--color-ink-2);font-weight:600;text-align:center}
.report-link:hover{background:var(--color-paper-3)}
.hotline-card{display:grid;gap:.4rem;padding:.85rem 1rem;border:1px solid var(--color-rule);border-radius:var(--radius-input);background:var(--color-card)}
.hotline-card p{margin:0;font-size:.875rem;color:var(--color-muted)}
.hotline-call{min-height:48px;display:flex;align-items:center;font-weight:700;color:var(--color-primary-deep)}
.check-row{grid-template-columns:auto 1fr;align-items:start;gap:.75rem!important;font-weight:400!important}
.check-row input[type=checkbox]{width:28px!important;min-height:28px!important;margin-top:.15rem;accent-color:var(--color-primary)}
.form-stack label em{font-style:normal;color:var(--color-primary-deep)}
.form-stack label.field-missing span{color:var(--status-rejected)}
.form-stack label.field-missing input,.form-stack label.field-missing textarea{border-color:var(--status-rejected)}
.legal-note{margin:0;font-size:.8125rem;line-height:1.6;color:var(--color-muted);overflow-wrap:anywhere}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}
@media(forced-colors:active){
  .status-chip,.verified,.notice,.record-stamp{border:1px solid currentColor}
  .primary{border:2px solid ButtonText}
}

/* NM-039 badge · NM-042 track record · NM-043 safety notice (design.md v2 tokens) */
.verified-badge{display:inline-flex;align-items:center;gap:.3rem;margin-left:.5rem;padding:.2rem .5rem;border-radius:var(--radius-tag);background:var(--status-hired-bg);color:var(--status-hired);font-size:.8125rem;font-weight:600;white-space:nowrap}
.verified-badge svg{width:16px;height:16px;flex:none}
.track-record{margin:.5rem 0 0;padding:0;list-style:none;color:var(--color-ink-2);font-size:var(--text-sm);line-height:1.6}
.track-record li{padding-left:1rem;position:relative}
.track-record li::before{content:"";position:absolute;left:.25rem;top:.65em;width:4px;height:4px;border-radius:50%;background:var(--color-rule)}
.track-record-new{color:var(--color-muted);font-style:normal}
.safety-notice{width:min(100%,var(--layout-read));margin:0 auto .5rem;border:1px solid var(--color-rule);border-radius:var(--radius-input);background:var(--color-card);color:var(--color-ink)}
.safety-notice>summary{display:flex;align-items:center;gap:.5rem;min-height:48px;padding:.6rem .85rem;cursor:pointer;list-style:none;font-size:var(--text-sm);line-height:1.5}
.safety-notice>summary::-webkit-details-marker{display:none}
.safety-notice>summary:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}
.safety-short{flex:1;color:var(--color-ink-2)}
.safety-reopen{flex:none;color:var(--color-primary);font-weight:600;text-decoration:underline}
.safety-notice[open]>summary .safety-short{display:none}
.safety-notice[open]>summary .safety-reopen{margin-left:auto}
.safety-body{padding:0 .85rem .85rem}
.safety-body h2{margin:0 0 .5rem;font-family:var(--font-display);font-size:1rem}
.safety-body ul{margin:0;padding-left:1.1rem;color:var(--color-ink-2);font-size:var(--text-sm);line-height:1.65}
.safety-body li+li{margin-top:.4rem}
.safety-closing{margin:.6rem 0 0;color:var(--color-ink);font-size:var(--text-sm);font-weight:600;line-height:1.55}
/* NM-060 privacy policy page. A plain reading column: the point is that
   someone can actually read it, not that it looks designed. Astra public-SSR
   pass (2026-09-06): bumped body text to 18px (was the 16px default) — a
   legal document is exactly the surface where "larger reading text" pays
   for itself, and a TOC + back link that a reader can actually tap. */
.prose-page{max-width:68ch;margin:0 auto;padding:0 16px 48px;font-size:18px}
.prose-page h2{font-family:var(--font-display);font-size:22px;margin:28px 0 8px;line-height:1.35}
.prose-page h3{font-family:var(--font-display);font-size:18px;margin:22px 0 6px}
.prose-page h4{font-size:16px;margin:18px 0 4px}
.prose-page p{margin:0 0 12px;line-height:1.75}
.prose-page ul{margin:0 0 14px;padding-left:20px}
.prose-page li{margin-bottom:6px;line-height:1.75}
.prose-page strong{font-weight:700}
/* The effective-date line — always the first paragraph of the document —
   reads as a caption above the policy, not as body text. */
.legal-effective-date{font-size:15px;font-weight:600;color:var(--color-ink-2);margin:0 0 20px}
/* Native contents list, built from the document's own h2s (legal.ts). A
   muted card so it reads as navigation, not as the first section of the
   policy itself. */
.legal-toc{margin:0 0 24px;padding:14px 16px;background:var(--color-paper-2);border-radius:12px}
.legal-toc h2{font-family:var(--font-display);font-size:15px;margin:0 0 8px;color:var(--color-muted)}
.legal-toc ol{margin:0;padding-left:20px;list-style:decimal}
.legal-toc li{margin-bottom:4px}
.legal-toc a{display:inline-flex;align-items:center;min-height:48px;color:var(--color-primary-deep);text-decoration:underline}
/* A back link that survives the locale switch (renderPolicyPage passes its
   own locale into pathWithLocale) — a real 48px tap target, not a small
   inline link at the bottom of a long document. */
.legal-back{margin:28px 0 0}
.legal-back a{display:inline-flex;align-items:center;min-height:48px;padding:0 4px;color:var(--color-primary-deep);font-weight:700;text-decoration:none}

/* NM SEO landing pages (/หางาน...) */
.job-meta{margin:0;color:var(--color-muted);font-size:14px}
.landing-page{max-width:720px;margin:0 auto;padding:0 16px 48px}
.landing-page h1{font-family:var(--font-display);font-size:clamp(1.5rem,5vw,2rem);line-height:1.35;margin:8px 0 4px}
.landing-explainer{margin:0 0 16px;color:var(--color-ink-2)}
.landing-count{margin:0 0 8px;font-weight:700}
.landing-count-inline{font-size:14px;font-weight:400;color:var(--color-muted)}
.landing-empty{margin:0 0 16px;padding:16px;background:var(--color-paper-2);border-radius:12px;color:var(--color-ink-2)}
.landing-jobs{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:10px}
.landing-job a{display:flex;flex-direction:column;gap:4px;min-height:48px;padding:14px 16px;background:var(--color-card);border:1px solid var(--color-rule-2);border-radius:12px;text-decoration:none;color:var(--color-ink)}
.landing-job a:hover{border-color:var(--color-primary)}
.landing-job-row1{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.landing-job-title{font-size:20px;font-weight:700;line-height:1.4;overflow-wrap:anywhere}
.landing-job-pay{flex:0 0 auto;color:var(--color-primary-deep);font-weight:700}
/* Astra § 3.2 (founder-approved 2026-09-06) — the card's decision facts, one
   row each: a glyph plus the value, the label carried in the row's aria-label.
   16px ink, never a chip and never truncated. Replaces the joined meta string
   and the pay-timing chip. */
.landing-job-fact{display:flex;align-items:flex-start;gap:8px;color:var(--color-ink);font-size:16px;overflow-wrap:anywhere}
.landing-job-fact svg{flex:0 0 auto;width:20px;height:20px;margin-top:2px;color:var(--color-ink-2)}
.landing-job-slots{color:var(--color-ink);font-size:16px}
/* One action per card, and it navigates. 48px is a floor, so a wrapped label
   grows the row instead of clipping it. */
.landing-job-action{display:flex;align-items:center;justify-content:center;min-height:48px;margin-top:4px;border:1.5px solid var(--color-primary);border-radius:var(--radius-input);color:var(--color-primary);font-weight:700}
.landing-links{margin:0 0 20px}
.landing-links h2{font-family:var(--font-display);font-size:18px;margin:0 0 8px}
.landing-links h2 a{color:inherit}
.area-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.area-chips a{display:inline-flex;align-items:center;min-height:48px;padding:0 14px;background:var(--color-paper-2);border-radius:999px;text-decoration:none;color:var(--color-ink)}
.area-chips a:hover{background:var(--color-primary-tint)}
.landing-station-line{margin:0 0 12px}
.landing-station-line h3{font-size:14px;font-weight:700;color:var(--color-muted);margin:0 0 6px}
.landing-region{margin:0 0 12px}
.landing-region h3{font-size:14px;font-weight:700;color:var(--color-muted);margin:0 0 6px}
.landing-post-cta{margin:8px 0 0;display:flex;flex-wrap:wrap;gap:16px}

/* Evergreen landing content (2026-09-04): the intro paragraph, the
   statutory-wage fact block and the per-page FAQ. The wage block is the
   only card here — it is a cited fact about the reader's own province and
   earns being visually separate from the prose around it. */
.landing-intro{margin:0 0 16px;color:var(--color-ink-2);line-height:1.6}
/* Astra public-SSR pass (2026-09-06) — the statutory minimum wage is a legal
   reference, not an offered price: it used to share the same bold tomato
   figure as an actual job's pay (.landing-job-pay), which reads as if the
   two were comparable amounts. Muted card, muted ink, no primary color —
   deliberately the opposite treatment from a job's price tag. */
.landing-wage{margin:0 0 20px;padding:14px 16px;background:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:12px}
.landing-wage h2{font-family:var(--font-display);font-size:13px;margin:0 0 6px;color:var(--color-muted);text-transform:uppercase;letter-spacing:.02em}
.wage-fact{margin:0;font-size:16px;font-weight:600;color:var(--color-ink-2)}
.wage-note{margin:6px 0 0;font-size:14px;color:var(--color-ink-2);line-height:1.5}
.wage-source{margin:6px 0 0;font-size:13px;color:var(--color-muted)}
/* The area picker at the top of /หางาน and its hub — pick a place first.
   The long province/station lists collapse behind a native <details>. */
.landing-area-first{margin:0 0 24px}
.landing-more-areas{margin:12px 0 0}
.landing-more-areas>summary{cursor:pointer;min-height:48px;display:flex;align-items:center;color:var(--color-primary-deep);font-weight:700;list-style:none}
.landing-more-areas>summary::-webkit-details-marker{display:none}
.landing-more-areas[open]>summary{margin-bottom:8px}
/* Zero-result state: alternatives are grouped under their own heading so
   they read as a distinct offer, not a continuation of "no jobs here". */
.landing-nearby-alternatives{margin:0 0 20px;padding:14px 16px;background:var(--color-paper-2);border-radius:12px}
.landing-nearby-alternatives>h2{font-family:var(--font-display);font-size:16px;margin:0 0 10px}
.landing-nearby-alternatives .landing-links{margin:0 0 14px}
.landing-nearby-alternatives .landing-links:last-child{margin-bottom:0}
.breadcrumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px;font-size:14px;color:var(--color-muted)}
.breadcrumbs li+li::before{content:"›";margin:0 4px;color:var(--color-rule)}
.breadcrumbs a{color:var(--color-muted)}

/* NM employer guide (/หางาน/ลงประกาศงาน) — the same landing-page shell,
   plus a numbered step list and an FAQ definition list. */
.guide-steps{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:12px}
.guide-step{display:flex;gap:12px;align-items:flex-start}
.guide-step-num{flex:none;width:32px;height:32px;border-radius:50%;background:var(--color-primary-tint);color:var(--color-primary-deep);font-weight:700;display:flex;align-items:center;justify-content:center}
.guide-step p{margin:0;padding-top:5px;line-height:1.55}
.guide-cta{margin:4px 0 24px}
.guide-faq{margin:0}
.guide-faq dt{font-weight:700;margin-top:14px}
.guide-faq dt:first-child{margin-top:0}
.guide-faq dd{margin:4px 0 0;padding-left:0;color:var(--color-ink-2)}

/* NM employer landing (/หาคนงาน) — the landing-page shell plus a three-card
   benefit list. Cards stack on a phone and sit side by side from 560px,
   which is where three of them stop being unreadably narrow. */
.employer-benefits{list-style:none;margin:0;padding:0;display:grid;gap:12px}
@media (min-width:560px){.employer-benefits{grid-template-columns:repeat(3,1fr)}}
.employer-benefit{padding:14px 16px;background:var(--color-card);border:1px solid var(--color-rule-2);border-radius:12px}
.employer-benefit h3{font-family:var(--font-display);font-size:15px;margin:0 0 6px;line-height:1.4}
.employer-benefit p{margin:0;font-size:14px;color:var(--color-ink-2);line-height:1.55}
.employer-cta-note{margin:-16px 0 20px;font-size:14px;color:var(--color-muted)}

/* NM how-it-works (/วิธีใช้) — two numbered lists, phone first.
   The number is the landmark: it is large enough to scan down the page
   without reading, which is the whole point of a step guide for a reader
   who is on a cheap phone in a hurry. */
.howto-list{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-direction:column;gap:10px;counter-reset:none}
.howto-step{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;background:var(--color-card);border:1px solid var(--color-rule-2);border-radius:12px}
.howto-num{flex:none;width:40px;height:40px;border-radius:50%;background:var(--color-primary-tint);color:var(--color-primary-deep);font-family:var(--font-display);font-size:18px;font-weight:700;display:flex;align-items:center;justify-content:center}
.howto-body{min-width:0}
.howto-title{margin:0;font-weight:700;line-height:1.4}
.howto-detail{margin:4px 0 0;font-size:14px;color:var(--color-ink-2);line-height:1.55}
.howto-note{margin:-18px 0 24px;padding:12px 14px;background:var(--color-paper-2);border-radius:12px;font-size:14px;color:var(--color-ink-2);line-height:1.55}
/* Both CTAs clear 48dp on every screen; they stack on a phone so neither
   is ever a half-width tap target. */
.howto-ctas{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 28px}
.howto-ctas a{display:flex;align-items:center;justify-content:center;min-height:48px;flex:1 1 220px;padding:12px 20px;border-radius:12px;font-weight:700;text-decoration:none}
.howto-ctas .howto-cta-primary{background:var(--color-primary);color:var(--color-primary-ink)}
.howto-ctas .howto-cta-primary:active{background:var(--color-primary-deep);transform:translateY(1px)}
.howto-ctas .howto-cta-secondary{background:var(--color-paper-2);color:var(--color-ink);border:1px solid var(--color-rule-2)}
/* Astra public-SSR pass (2026-09-06) — "หางาน" is the primary reading path;
   "ลงประกาศงาน?" is a disclosure so an employer visitor can open it, but a
   worker visitor is never asked to scroll past six posting steps first. */
.howto-disclosure{margin:0 0 8px;padding:0}
.howto-disclosure>summary{cursor:pointer;min-height:48px;display:flex;align-items:center;font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--color-ink);list-style:none}
.howto-disclosure>summary::-webkit-details-marker{display:none}
.howto-disclosure>summary::before{content:"+";margin-right:8px;color:var(--color-primary-deep);font-weight:700}
.howto-disclosure[open]>summary::before{content:"−"}