/* legal.css — owned by the legal workstream (careers + privacy + terms). Uses tokens.css variables only.
   Shared primitives (.band*, .section, .container, .btn, .eyebrow, .h1/.h2, .section-heading, tmm_mark / tmm_shape /
   tmm_display_type, .card-hover, .card-link, .grain, .pattern-hairline, .reading-progress) live in base.css.
   Visual system v2 (DESIGN.md): editorial, calm, premium. No doodles, glows, rings, tilts. */

.legal-nowrap{white-space:nowrap}

/* ======================================== Careers ======================================== */
.careers-heading{max-width:none}
.careers-heading .section-heading__desc{max-width:62ch}
@media (min-width:1200px){.careers-heading .section-heading__desc{max-width:61.25rem}} /* Figma desc box 980px */
/* Figma mobile (166:5471): h1 32px so "Đồng hành cùng TMM" holds one line; never wider than the column allows. */

/* ---------- Hero: warm band + one lime parallelogram slab bleeding off the right edge ---------- */
.careers-hero__rule{width:clamp(120px,24vw,240px);margin-top:32px}
/* Slab: phones/tablets — in the extra space below the text, bleeding off the right edge and under the next band's lip. */
.careers-hero__field{right:0;bottom:0;--shape-w:min(64vw,380px);--shape-h:min(30vw,170px);--slab-cut:34%}
.careers-page .careers-hero{padding-bottom:calc(var(--section-y) + min(24vw,130px))}
@media (min-width:768px){
  .careers-hero__field{--shape-w:44vw;--shape-h:150px;--slab-cut:30%}
  .careers-page .careers-hero{padding-bottom:calc(var(--section-y) + 100px)}
}
/* Desktop: text column on the left, the slab fills the right third (never behind text). */
@media (min-width:1200px){
  .careers-page .careers-hero{padding-bottom:calc(var(--section-y) + 40px)}
  .careers-hero__heading{max-width:min(58rem,66%)}
  .careers-hero__heading .section-heading__desc{max-width:min(61.25rem,100%)}
  .careers-hero__field{top:22%;bottom:22%;right:0;--shape-w:min(27vw,520px);--shape-h:auto;--slab-cut:38%}
}

/* ---------- Jobs: cream band, editorial rows, oversized outline "3" as texture ---------- */
.careers-jobs__num{display:none;top:-.02em;right:-.08em;--dt-size:clamp(260px,34vw,560px)}
@media (min-width:1200px){.careers-jobs__num{display:block}}

.job-list{list-style:none;margin:var(--heading-gap) 0 0;padding:0;display:grid;gap:16px}
.job-list > li{display:flex;min-width:0}
@media (min-width:768px){.job-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}} /* Figma tablet: the third card sits half-width */
@media (min-width:1200px){.job-list{grid-template-columns:minmax(0,1fr);gap:20px}}

.job-card{
  container-type:inline-size;position:relative;isolation:isolate;flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:20px;
  padding:24px;border-radius:var(--radius-card);background:var(--c-cream);border:1px solid rgba(var(--c-ink-rgb),.16);
}
.job-card__main{display:flex;flex-direction:column;gap:16px;min-width:0;width:100%}
/* Title units are no-break; the longest ("Lớp học (Academic Operations)", ≈ 17.6em) must fit the card, so the size is
   capped by the card's inline size (container query units). */
.job-card__title{margin:0;line-height:1.22;font-weight:700;color:var(--c-ink);text-wrap:balance;font-size:min(calc(var(--fs-h3) - 1px),100cqi / 17.8)}
@media (min-width:768px) and (max-width:1199.98px){.job-card__title{font-size:min(calc(var(--fs-h3) - 4px),100cqi / 17.8)}}
/* Meta: a hairline rule above, items separated by thin vertical rules (hung on the END of each item, so a wrapped
   line never starts with a rule). */
.job-card__meta{list-style:none;margin:0;padding:16px 0 0;border-top:1px solid rgba(var(--c-ink-rgb),.16);font-size:var(--fs-small);line-height:1.6;color:var(--c-ink)}
.job-card__meta li{display:inline;white-space:nowrap}
.job-card__meta li:not(:last-child)::after{content:"";display:inline-block;width:1px;height:.9em;margin:0 .75em;vertical-align:-.1em;background:rgba(var(--c-ink-rgb),.35)}
.job-card__cta{margin-top:auto;position:static;min-height:44px}
/* Stretched link: the whole card is the target, one tab stop */
.job-card__cta::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1}
/* Keyboard: a 3px INK ring around the whole card (the click target) + the card-link title underline (base.css). */
.job-card .job-card__cta:focus-visible{outline:none}
.job-card:has(.job-card__cta:focus-visible){outline:3px solid var(--c-ink);outline-offset:4px}
@supports not selector(:has(*)){.job-card__cta:focus-visible::after{outline:3px solid var(--c-ink);outline-offset:4px;border-radius:var(--radius-card)}}
@media (hover:hover){
  .job-card:hover .job-card__cta{background:var(--c-ink);color:var(--c-cream);border-color:var(--c-ink)}
  .job-card:hover .icon-arrow{transform:translate(4px,-2px)}
}
/* Desktop: one editorial row per job — title + meta on the left, CTA on the right. */
@media (min-width:1200px){
  .job-card{flex-direction:row;align-items:center;justify-content:space-between;gap:48px;padding:36px 44px}
  .job-card__title{font-size:min(var(--fs-h3),100cqi / 26)}
  .job-card__cta{margin-top:0;flex:none}
}

/* ---------- Values: ink band, editorial index (rule-index + small numerals) ---------- */
.value-index{list-style:none;margin:var(--heading-gap) 0 0;padding:0;display:grid;gap:36px}
@media (min-width:768px){.value-index{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 40px}}
@media (min-width:1200px){.value-index{grid-template-columns:repeat(4,minmax(0,1fr));gap:40px}}
.value-item{min-width:0;display:flex;flex-direction:column;gap:12px}
.value-item__num{margin-top:6px;font-size:var(--fs-small);font-weight:600;letter-spacing:.08em;font-variant-numeric:tabular-nums;color:var(--c-lime);line-height:1}
.value-item__title{margin:0;font-size:var(--fs-h3);line-height:1.25;font-weight:700;color:var(--c-cream);text-wrap:balance}
.value-item__desc{margin:0;font-size:var(--fs-body);line-height:1.6;color:rgba(255,250,243,.82);text-wrap:pretty}
/* Desktop: 4 columns ~250px wide; title scaled so each no-wrap unit fits. */
@media (min-width:1200px){.value-item__title{font-size:calc(var(--fs-h3) * .8)}.value-item__desc{font-size:calc(var(--fs-body) * .9)}}

/* ======================================== Legal (privacy, terms) ========================================
   Figma 120:5381 / 120:5454: one column, no TOC. v2: warm-cream head band + flat field → cream body band with a vertical
   margin hairline, numbered headings (pilcrow + numeral in an index column, rule-index above), generous measure. */
.legal-doc__head{max-width:68ch}
.legal-doc__updated{text-wrap:balance}
.legal-doc__title{margin:12px 0 0;max-width:18ch;text-wrap:balance}
.legal-doc__lede{margin:20px 0 0;max-width:62ch;font-size:var(--fs-body);line-height:1.6;color:var(--c-ink);text-wrap:pretty}
/* Phones: "bảo mật thông tin" (title line 2) fits the container instead of splitting "thông tin". */
@media (max-width:767.98px){.legal-doc__title{font-size:min(var(--fs-h1),calc((100vw - 2 * var(--gutter)) / 9.1))}}
/* Slab: below the lede on phones/tablets (extra bottom space), right-hand whitespace on desktop; bleeds off the right. */
.legal-head__field{right:0;bottom:0;--shape-w:min(56vw,320px);--shape-h:min(22vw,110px);--slab-cut:36%}
.legal-page .legal-head{padding-bottom:calc(var(--section-y) + min(22vw,120px))}
@media (min-width:768px){.legal-head__field{--shape-w:40vw;--shape-h:120px;--slab-cut:30%}.legal-page .legal-head{padding-bottom:calc(var(--section-y) + 96px)}}
@media (min-width:1200px){
  .legal-page .legal-head{padding-bottom:calc(var(--section-y) + 40px)}
  .legal-head__field{top:24%;bottom:30%;right:0;--shape-w:min(24vw,460px);--shape-h:auto;--slab-cut:40%}
  .legal-doc__head{max-width:min(68ch,62%)}
}

/* Body band */
.legal-doc{--idx:0px;position:relative}
.legal-doc__body{position:relative;min-width:0;max-width:calc(68ch + var(--idx));display:grid;gap:40px;padding-left:20px}
/* Vertical margin hairline beside the text column */
.legal-doc__body::before{content:"";position:absolute;top:6px;bottom:0;left:0;width:1px;background:rgba(var(--c-green-rgb),.9)}
.legal-block{position:relative;scroll-margin-top:calc(var(--header-h) + 24px)}
.legal-block__rule{margin-bottom:18px}
.legal-block__title{margin:0 0 12px;font-size:var(--fs-h3);line-height:1.3;font-weight:700;color:var(--c-ink);text-wrap:balance}
.legal-block__num{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:var(--fs-small);font-weight:600;letter-spacing:.06em;font-variant-numeric:tabular-nums;line-height:1}
.legal-block__pilcrow{display:block;width:14px}
@media (min-width:1200px){.legal-block__pilcrow{width:16px}}
.legal-block__text{display:block}
.legal-block__body{margin:0;font-size:var(--fs-body);line-height:1.75;color:var(--c-ink);text-wrap:pretty}
/* Small text stays ink: links are ink with an olive underline that thickens on hover. */
.legal-block__body a{color:var(--c-ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--c-green);text-decoration-thickness:2px;text-underline-offset:3px;overflow-wrap:anywhere}
.legal-block__body a:focus-visible{outline:3px solid var(--c-ink);outline-offset:2px;border-radius:var(--radius-sm)}
.legal-block__body a:active{opacity:.75}
@media (hover:hover){.legal-block__body a:hover{text-decoration-color:var(--c-ink)}}

/* Tablet+: numerals move into an index column left of the hairline; the text keeps a generous measure. */
@media (min-width:768px){
  .legal-doc{--idx:6rem}
  .legal-doc__body{padding-left:0;gap:48px}
  .legal-doc__body::before{left:calc(var(--idx) - 28px)}
  .legal-block__rule{margin-left:var(--idx);width:calc(100% - var(--idx))}
  .legal-block__title{display:grid;grid-template-columns:var(--idx) minmax(0,1fr);align-items:baseline}
  .legal-block__num{margin:0;align-self:start;padding-top:.3em;padding-right:44px}
  .legal-block__body{margin-left:var(--idx)}
}
@media (min-width:1200px){
  .legal-doc{--idx:8rem}
  .legal-doc__body{gap:56px;max-width:calc(64ch + var(--idx))}
  .legal-block__title{margin-bottom:16px}
}
/* The section under the pointer: its olive index segment runs the full length of the rule (pointer only). */
@media (hover:hover){.legal-block:hover .legal-block__rule .tmm-mark__seg{width:100%}}

/* ---------- Reduced motion: static, fully visible ---------- */
@media (prefers-reduced-motion:reduce){
  .legal-block__rule .tmm-mark__seg{transition:none}
  .job-card:hover,.job-card:active{transform:none}
  .job-card:hover .icon-arrow{transform:none}
}

/* ---------- Round 4: swipe rails on phones/tablets (base.css §18.2) ---------- */
@media (max-width:1023.98px){
  .job-list.rail{margin-top:var(--heading-gap)!important}
  .value-index.rail > *{padding:22px 20px;border:1px solid rgba(255,250,243,.14);border-radius:var(--radius-card);background:rgba(255,250,243,.05)}
}

/* Careers hero with the team photo (24 Sep): heading | photo on desktop, stacked on phones; no colour slab. */
.careers-hero__field{display:none}
.careers-page .careers-hero{padding-bottom:calc(var(--section-y) + 40px)}
.careers-hero__inner--photo{display:grid;gap:32px;align-items:center}
.careers-hero__media{margin:0;min-width:0}
.careers-hero__img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius-card);box-shadow:0 2px 6px rgba(var(--c-ink-rgb),.06),0 40px 80px -44px rgba(var(--c-ink-rgb),.55)}
@media (min-width:1024px){
  .careers-hero__inner--photo{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px}
  .careers-hero__inner--photo .careers-hero__heading{max-width:none}
}
.job-card__cta{white-space:nowrap}

/* ======================================== Round 6 (QA, 24 Sep evening) ======================================== */
/* Careers h1: the one h1 style (sentence case, --fs-h1) in balanced lines (no staircase); on phones it is
   capped by the column so "Đồng hành cùng TMM" holds one line (never below the h2 size). */
.careers-hero .h1{font-size:var(--fs-h1);line-height:1.15;text-transform:none;text-wrap:balance}
@media (max-width:767.98px){.careers-hero .h1{font-size:max(var(--fs-h2),min(var(--fs-h1),calc((100vw - 2 * var(--gutter)) / 11)))}}

/* Job titles: 18px bold in the phone/tablet rail (the no-break units may wrap there), capped by the card on desktop rows. */
@media (max-width:1023.98px){
  .job-card__title{font-size:18px;line-height:1.3}
  .job-card__title .legal-nowrap{white-space:normal}
}
/* Meta: wrapping chips; the thin separator is each item's ::before and sits in a clipped gutter, so a wrapped line
   never starts or ends with a dangling rule. The hairline above stays aligned with the card text. */
.job-card__meta{display:flex;flex-wrap:wrap;row-gap:2px;margin-left:-17px;clip-path:inset(0 0 0 17px)}
.job-card__meta li{position:relative;display:block;padding-left:17px;white-space:nowrap}
.job-card__meta li:not(:last-child)::after{content:none}
.job-card__meta li::before{content:"";position:absolute;left:8px;top:.35em;width:1px;height:.95em;background:rgba(var(--c-ink-rgb),.35)}
.job-card__meta{border-top:0;background:linear-gradient(rgba(var(--c-ink-rgb),.16),rgba(var(--c-ink-rgb),.16)) 17px 0 / calc(100% - 17px) 1px no-repeat}

/* Legal: one pilcrow (first section only); ≥1200 a sticky section index on the right (scroll-spy in main.js). */
.legal-block:not(:first-child) .legal-block__pilcrow{display:none}
.legal-toc{display:none}
@media (min-width:1200px){
  .legal-doc__inner{display:grid;grid-template-columns:minmax(0,1fr) 264px;gap:56px;align-items:start}
  .legal-toc{display:block;position:sticky;top:calc(var(--header-h) + 40px);padding-left:20px;border-left:1px solid rgba(var(--c-ink-rgb),.14)}
  .legal-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:4px}
  .legal-toc a{position:relative;display:grid;grid-template-columns:2.2em minmax(0,1fr);gap:4px;padding:8px 0;font-size:var(--fs-small);line-height:1.4;color:rgba(var(--c-ink-rgb),.72);text-decoration:none;transition:color .2s var(--ease)}
  .legal-toc a::before{content:"";position:absolute;left:-21px;top:8px;bottom:8px;width:2px;background:var(--c-green);transform:scaleY(0);transition:transform .3s var(--ease)}
  .legal-toc a[aria-current]{color:var(--c-ink);font-weight:700}
  .legal-toc a[aria-current]::before{transform:none}
  .legal-toc__num{font-variant-numeric:tabular-nums;font-weight:600;color:var(--c-green)}
  .legal-toc a:focus-visible{outline:3px solid var(--c-ink);outline-offset:2px;border-radius:var(--radius-sm)}
}
@media (hover:hover) and (min-width:1200px){.legal-toc a:hover{color:var(--c-ink)}}
@media (prefers-reduced-motion:reduce){.legal-toc a,.legal-toc a::before{transition:none}}
/* The heading column is wide enough for "Đồng hành cùng TMM" on one line at the h1 size (≈465px at 44px, ≈592px at
   56px); the em part then balances over two lines — four even lines instead of a five-step staircase. */
@media (min-width:1024px){.careers-hero__inner--photo{grid-template-columns:minmax(0,480px) minmax(0,1fr);gap:48px}}
@media (min-width:1200px){.careers-hero__inner--photo{grid-template-columns:minmax(0,604px) minmax(0,1fr)}}