/* =====================================================================
   Thai Life case: live system samples.
   One switcher (theme / mode / text size) restyles every sample on the
   page through the body data attributes set in tl.js.
   accent_action colours are sampled from the TLI Foundation "Theme Color"
   figure, nudged where needed so button labels pass WCAG AA (large bold
   text). Other colours are representative. Exact values stay confidential.
   Fonts: open stand-ins for the brand families (Global: IBM Plex Sans Thai,
   Lifestyle: Kanit). Sizes use the real sizing scale.
   ===================================================================== */

/* ---------- Semantic tokens: theme global, mode light ---------- */
body.case-page {
  --tl-bg-based: #f2f3f5; --tl-bg-lv1: #ffffff; --tl-bg-lv2: #ffffff; --tl-bg-lv3: #ffffff; --tl-bg-lv4: #ffffff;
  --tl-bg-hl: #e6f1fa;
  --tl-text-1: #1d1d1f; --tl-text-2: #4e5258; --tl-text-3: #62666e;
  --tl-border: #d5d8dd;
  --tl-act: #007ac2; --tl-act-hover: #00649f; --tl-on-act: #ffffff;
  --tl-act-soft: #dcecf7;
  --tl-dis-bg: #e3e5e8; --tl-dis-text: #5f646b;
  --tl-neutral: #2b2d31; --tl-accent: #0e4c7a; --tl-success: #1e7d3e; --tl-error: #c21f3a;
  --tl-warning: #8a5a00; --tl-info: #1f5fbf; --tl-on: #ffffff;
  --tl-sh-1: 0 1px 3px rgba(16,18,22,.12);
  --tl-sh-2: 0 4px 12px rgba(16,18,22,.12);
  --tl-sh-3: 0 8px 20px rgba(16,18,22,.14);
  --tl-sh-4: 0 16px 36px rgba(16,18,22,.18);
  --tl-sh-up: 0 -6px 16px rgba(16,18,22,.12);
  --tl-fs: 1;
  --tl-brand: #c8251c;
  /* theme-owned shape and type */
  --tl-font: "IBM Plex Sans Thai", "Inter Tight", system-ui, sans-serif;
  --tl-head-w: 500;
  --tl-btn-r: 8px;
  padding-bottom: 72px;
}
body.case-page[data-tl-theme="lifestyle"] {
  --tl-act: #0094f2; --tl-act-hover: #0080d1; --tl-act-soft: #dff1fd;
  --tl-accent: #6c3fb5; --tl-bg-hl: #e3f3fe;
  --tl-font: "Kanit", "IBM Plex Sans Thai", system-ui, sans-serif;
  --tl-head-w: 600;
  --tl-btn-r: 999px;
}
body.case-page[data-tl-mode="dark"] {
  --tl-bg-based: #111215; --tl-bg-lv1: #1a1b1f; --tl-bg-lv2: #23252a; --tl-bg-lv3: #2c2f35; --tl-bg-lv4: #363940;
  --tl-bg-hl: #1d3346;
  --tl-text-1: #f2f2f4; --tl-text-2: #c4c7ce; --tl-text-3: #a3a8b0;
  --tl-border: #3a3d44;
  --tl-act: #3395ce; --tl-act-hover: #2a85bb; --tl-on-act: #ffffff; --tl-act-soft: #17324a;
  --tl-dis-bg: #2c2f35; --tl-dis-text: #a3a8b0;
  --tl-neutral: #e4e6ea; --tl-accent: #8ec5f0; --tl-success: #6fd58f; --tl-error: #ff8fa0;
  --tl-warning: #f5c04a; --tl-info: #8ab4f8; --tl-on: #1d1d1f;
  --tl-sh-1: 0 1px 3px rgba(0,0,0,.5);
  --tl-sh-2: 0 4px 12px rgba(0,0,0,.5);
  --tl-sh-3: 0 8px 20px rgba(0,0,0,.55);
  --tl-sh-4: 0 16px 36px rgba(0,0,0,.6);
  --tl-sh-up: 0 -6px 16px rgba(0,0,0,.5);
}
body.case-page[data-tl-size="s"] { --tl-fs: .875; }
body.case-page[data-tl-size="l"] { --tl-fs: 1.2; }

.tl-surface { background: var(--tl-bg-based); color: var(--tl-text-1); border-radius: 18px; padding: 24px; font-family: var(--tl-font); }
body.tl-anim .tl-surface, body.tl-anim .tl-surface * { transition: background-color .3s, color .3s, border-color .3s, box-shadow .3s, font-size .3s, border-radius .3s; }

/* ---------- Switcher (hero + sticky dock) ---------- */
.tl-ctrl { display: grid; gap: 10px; }
.tl-ctrl .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--card); border-radius: 999px; padding: 6px 6px 6px 16px; font-size: 14px; }
.tl-ctrl .seg, .tl-dock .seg { background: var(--card-soft); }
.tl-ctrl .seg button { padding: 6px 12px; font-size: 13px; }
.seg button:disabled { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.tl-hint { font-size: 13px; color: var(--text-soft); min-height: 1.4em; padding-left: 16px; }

.tl-dock {
  position: fixed; left: 0; right: 0; bottom: 16px; z-index: 30; margin: 0 auto; width: max-content;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
  background: var(--card); border-radius: 999px; padding: 6px 8px 6px 14px;
  box-shadow: 0 8px 28px rgba(15,16,14,.18); font-size: 13px; max-width: calc(100vw - 24px);
  transition: opacity .25s, translate .25s;
}
.tl-dock[hidden] { display: flex; opacity: 0; translate: 0 20px; pointer-events: none; visibility: hidden; }
.tl-dock > span { color: var(--text-muted); }
.tl-dock .seg button { padding: 6px 10px; font-size: 13px; }
body.tldr .tl-dock { display: none; }

/* ---------- Buttons: one component, theme owns colour, font and radius.
   Labels are large bold text (>= 18.66px, 700) so the lighter blues meet AA large. ---------- */
.tl-btn {
  font: 700 max(19px, calc(19px * var(--tl-fs))) / 1.2 var(--tl-font);
  border: 0; padding: 14px 20px; border-radius: var(--tl-btn-r); cursor: pointer;
  background: var(--tl-act); color: var(--tl-on-act); text-align: center;
}
.tl-btn.s { background: transparent; color: var(--tl-act); box-shadow: inset 0 0 0 2px var(--tl-act); }
body.tl-anim .tl-btn { transition: background-color .3s, color .3s, border-radius .35s, font-size .3s; }

/* ---------- Hero: one component, annotated like the foundation docs ---------- */
.tl-demo { width: min(760px, 100%); display: grid; grid-template-columns: 1fr 1.15fr; gap: 20px; align-items: center; }
.tl-card { background: var(--tl-bg-lv1); color: var(--tl-text-1); border-radius: 16px; padding: 22px 22px 18px; box-shadow: var(--tl-sh-3); font-family: var(--tl-font); }
body.tl-anim .tl-card { transition: background-color .3s, color .3s; }
.tl-card small { color: var(--tl-text-2); font-size: calc(12px * var(--tl-fs)); }
.tl-card h4 { font-weight: var(--tl-head-w); font-size: calc(20px * var(--tl-fs)); margin: 4px 0 12px; line-height: 1.2; }
.tl-card .bar { height: 8px; border-radius: 4px; background: var(--tl-act-soft); overflow: hidden; margin-bottom: 6px; }
.tl-card .bar i { display: block; height: 100%; width: 62%; background: var(--tl-act); border-radius: 4px; }
.tl-card .tl-btn { width: 100%; display: block; }
.tl-tok { display: flex; align-items: center; gap: 6px; font: 11px ui-monospace, Menlo, monospace; color: var(--tl-text-2); margin: 10px 0 6px; }
.tl-tok b { font-weight: 700; color: var(--tl-text-1); }
.tl-tok::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tl-text-2); flex: none; }
.tl-tok.dn { justify-content: flex-end; margin: 6px 0 0; }
.tl-read { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 14px; }
.tl-read > div { background: var(--card); border-radius: 12px; padding: 8px 10px; font-size: 12px; line-height: 1.35; }
.tl-read small { display: block; color: var(--text-soft); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.tl-read [data-th] { display: none; font-weight: 500; }
body:not([data-tl-theme="lifestyle"]) .tl-read [data-th="global"],
body[data-tl-theme="lifestyle"] .tl-read [data-th="lifestyle"] { display: inline; }
.tl-onecomp { display: inline-block; font-size: 12px; font-weight: 500; background: var(--ref-ink-900); color: var(--accent); padding: 4px 10px; border-radius: 999px; margin-bottom: 10px; }

/* ---------- Chapter label (Infinify-style section opener) ---------- */
.tl-eyebrow { display: inline-block; margin-top: 56px; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; background: var(--ref-ink-900); color: var(--accent); padding: 4px 12px; border-radius: 999px; }
.tl-eyebrow + .cs-h { margin-top: 12px; }

/* ---------- What's inside ---------- */
.tl-index { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; list-style: none; padding: 0 !important; margin: 20px 0 0 !important; }
.tl-index li { margin: 0 !important; }
.tl-index a { display: block; height: 100%; background: var(--card); border-radius: 20px; padding: 16px; text-decoration: none; color: var(--text); font-size: 15px !important; line-height: 1.35; }
.tl-index a:hover { background: var(--accent-soft); }
.tl-index a:focus-visible { outline: 2px solid var(--ref-ink-900); outline-offset: 2px; }
.tl-index small { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.tl-index .pv { display: flex; gap: 4px; height: 28px; align-items: flex-end; margin-bottom: 12px; }
.tl-index .pv i { flex: 1; border-radius: 4px; background: var(--ref-ink-900); }

/* ---------- Token anatomy ---------- */
.tl-anat { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 4px; font: 500 clamp(15px, 2.4vw, 22px) ui-monospace, Menlo, monospace; padding: 18px 6px 6px; }
.tl-anat > span { display: grid; justify-items: center; gap: 8px; }
.tl-anat code { background: var(--card-soft); padding: 6px 10px; border-radius: 8px; }
.tl-anat .sl { color: var(--text-muted); padding: 6px 0; }
.tl-anat .opt code { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ref-ink-400); }
.tl-anat em { font: 400 12px var(--font); font-style: normal; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.tl-anat .req em::after { content: " · req."; }
.tl-anat .opt em::after { content: " · opt."; }

/* ---------- Colour ---------- */
.tl-ramp { display: grid; grid-template-columns: repeat(19, 1fr); gap: 3px; }
.tl-ramp div { aspect-ratio: 1 / 1.6; border-radius: 6px; background: var(--c); }
.tl-ramp div.base { outline: 2px solid var(--ref-ink-900); outline-offset: 2px; }
.tl-ramp-lbl { display: flex; justify-content: space-between; font: 12px ui-monospace, Menlo, monospace; color: var(--text-muted); margin-top: 8px; }
.tl-groups { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.tl-groups > div { border-radius: 12px; padding: 12px 12px 0; background: var(--g); color: var(--gt, var(--tl-on)); min-height: 110px; display: grid; grid-template-rows: 1fr auto; overflow: hidden; }
.tl-groups > div > div { margin: 10px -12px 0; padding: 8px 12px; background: var(--tl-bg-lv1); color: var(--tl-text-1); }
.tl-groups b { font-weight: 700; font-size: 28px; line-height: 1; font-family: var(--tl-font); }
.tl-groups code { font: 11px ui-monospace, Menlo, monospace; opacity: .95; word-break: break-all; }
.tl-groups .cr { font-size: 11px; }
.tl-groups .info-g { background: var(--tl-bg-lv1); color: var(--tl-text-1); box-shadow: inset 0 0 0 1px var(--tl-border); }
.tl-groups .info-g > div:last-child { margin-top: 10px; }
.tl-groups .info-g .strip { display: flex; gap: 3px; height: 26px; }
.tl-groups .info-g .strip i { flex: 1; border-radius: 4px; }

/* ---------- Applied tokens (annotated sample) ---------- */
.tl-apply { display: grid; grid-template-columns: 1fr minmax(260px, 340px) 1fr; gap: 16px; align-items: center; }
.tl-apply .notes { display: grid; gap: 10px; }
.tl-apply .note { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: start; background: var(--card); border-radius: 14px; padding: 10px 12px; font-size: 13px; line-height: 1.4; }
.tl-apply .note .n { grid-row: span 2; margin: 0 !important; }
.tl-apply .note b { display: block; font-weight: 500; font-size: 13px; }
.tl-apply .note code { font: 11.5px ui-monospace, Menlo, monospace; color: var(--text-soft); background: none; padding: 0; }
.tl-apply .note .n { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ref-ink-900); color: var(--accent); font-size: 11px; margin-right: 6px; }
.tl-screen { background: var(--tl-bg-based); border-radius: 20px; padding: 16px; }
.tl-screen .box { background: var(--tl-bg-lv1); border-radius: 16px; padding: 20px 16px; box-shadow: var(--tl-sh-1); display: grid; gap: 12px; }
.tl-screen h5 { font-size: calc(18px * var(--tl-fs)); font-weight: 500; line-height: 1.25; color: var(--tl-text-1); }
.tl-screen p { font-size: calc(13px * var(--tl-fs)) !important; line-height: 1.5 !important; color: var(--tl-text-2); }
.tl-screen label { font-size: calc(12px * var(--tl-fs)); color: var(--tl-text-2); display: grid; gap: 4px; }
.tl-screen .inp { border: 1.5px solid var(--tl-border); border-radius: 8px; padding: 10px 12px; font-size: calc(14px * var(--tl-fs)); color: var(--tl-text-3); background: var(--tl-bg-lv1); }
.tl-screen .inp.err { border-color: var(--tl-error); }
.tl-screen .errt { color: var(--tl-error); font-size: calc(12px * var(--tl-fs)); }
.tl-screen .tl-btn { width: 100%; }
.tl-screen .mk { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ref-ink-900); color: var(--accent); font: 500 10px var(--font); vertical-align: 2px; margin-left: 4px; }

/* ---------- Elevation ---------- */
.tl-elev { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; align-items: center; }
.tl-stack { position: relative; height: 300px; }
.tl-stack > div { position: absolute; border-radius: 14px; padding: 8px 12px; font: 12px ui-monospace, Menlo, monospace; color: var(--tl-text-2); box-shadow: inset 0 0 0 1px var(--tl-border); }
.tl-stack .l0 { inset: 0; background: var(--tl-bg-based); }
.tl-stack .l1 { inset: 30px 30px 20px 20px; background: var(--tl-bg-lv1); box-shadow: var(--tl-sh-1); }
.tl-stack .l2 { inset: 70px 60px 50px 50px; background: var(--tl-bg-lv2); box-shadow: var(--tl-sh-2); }
.tl-stack .l3 { inset: 110px 90px 80px 80px; background: var(--tl-bg-lv3); box-shadow: var(--tl-sh-3); }
.tl-stack .l4 { inset: 150px 120px 110px 110px; background: var(--tl-bg-lv4); box-shadow: var(--tl-sh-4); }
.tl-stack .hl { right: 14px; bottom: 14px; background: var(--tl-bg-hl); color: var(--tl-text-1); }
.tl-shadows { display: grid; gap: 10px; }
.tl-shadows > div { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; }
.tl-shadows i { display: block; width: 52px; height: 36px; border-radius: 8px; background: var(--tl-bg-lv1); }
.tl-shadows code { font: 12px ui-monospace, Menlo, monospace; color: var(--tl-text-1); }
.tl-shadows span { display: block; font-size: 12px; color: var(--tl-text-2); }

/* ---------- Typography ---------- */
.tl-type { display: grid; gap: 4px; }
.tl-type > div { display: grid; grid-template-columns: 140px 1fr; gap: 16px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--tl-border); }
.tl-type > div:last-child { border-bottom: 0; }
.tl-type code { font: 12px ui-monospace, Menlo, monospace; color: var(--tl-text-2); }
.tl-type p { font-size: calc(var(--s) * var(--tl-fs)) !important; line-height: 1.25 !important; color: var(--tl-text-1); font-weight: var(--w, 400); margin: 0 !important; }
.tl-type p.bd { line-height: 1.8 !important; }
.tl-size-note { font-size: 13px; color: var(--tl-text-2); margin-bottom: 12px; }

/* ---------- Sizing ---------- */
.tl-scale { display: flex; align-items: flex-end; gap: 6px; overflow-x: auto; padding: 4px 2px 0; }
.tl-scale > div { display: grid; justify-items: center; gap: 6px; flex: 0 0 auto; }
.tl-scale i { display: block; width: 16px; height: calc(var(--v) * 1px); max-height: 160px; background: var(--ref-ink-900); border-radius: 3px; }
.tl-scale i.cap { background: var(--ref-sage-500); }
.tl-scale span { font: 11px ui-monospace, Menlo, monospace; color: var(--text-muted); }
.tl-scale .big i { height: 160px; background: repeating-linear-gradient(0deg, var(--ref-ink-900) 0 10px, transparent 10px 14px); }
.tl-measure { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 22px; align-items: center; }
.tl-mcard { position: relative; background: var(--card-soft); border-radius: 16px; padding: 16px; display: grid; gap: 8px; outline: 1.5px dashed #c2410c; outline-offset: -16px; }
.tl-mcard > div { background: var(--card); border-radius: 8px; padding: 10px 12px; font-size: 14px; position: relative; }
.tl-mcard .tag { position: absolute; font: 11px ui-monospace, Menlo, monospace; background: #c2410c; color: #fff; padding: 1px 6px; border-radius: 4px; }
.tl-mcard .tag.pad { top: 0; left: 50%; translate: -50% 0; }
.tl-mcard .tag.gap { left: -2px; top: 50%; translate: 0 -50%; background: #1d4ed8; }
.tl-radius { display: flex; gap: 12px; flex-wrap: wrap; }
.tl-radius > div { display: grid; justify-items: center; gap: 6px; }
.tl-radius i { display: block; width: 56px; height: 56px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--ref-ink-900); }
.tl-radius span { font: 11px ui-monospace, Menlo, monospace; color: var(--text-muted); }

/* ---------- Components: states ---------- */
.tl-states { display: grid; grid-template-columns: auto repeat(4, 1fr); gap: 10px 12px; align-items: center; }
.tl-states > small { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--tl-text-2); text-align: center; }
.tl-states > b { font-weight: 500; font-size: 13px; color: var(--tl-text-1); }
.tl-states .tl-btn { width: 100%; padding: 12px 6px; cursor: default; }
.tl-states .tl-btn.hov { background: var(--tl-act-hover); }
.tl-states .tl-btn.foc { outline: 2px solid var(--tl-act); outline-offset: 2px; }
.tl-states .tl-btn.dis { background: var(--tl-dis-bg); color: var(--tl-dis-text); }
.tl-states .inp { border: 1.5px solid var(--tl-border); border-radius: 8px; padding: 9px 10px; font-size: calc(13px * var(--tl-fs)); color: var(--tl-text-3); background: var(--tl-bg-lv1); }
.tl-states .inp.foc { border-color: var(--tl-act); box-shadow: 0 0 0 3px var(--tl-act-soft); }
.tl-states .inp.err { border-color: var(--tl-error); }
.tl-states .inp.dis { background: var(--tl-dis-bg); color: var(--tl-dis-text); border-color: transparent; }

.tl-legend { font-size: 13px; color: var(--text-muted); text-align: center; margin-top: 10px; }

@media (max-width: 760px) {
  .tl-demo { grid-template-columns: 1fr; }
  .tl-read { grid-template-columns: 1fr; }
  .tl-index { grid-template-columns: 1fr 1fr; }
  .tl-groups { grid-template-columns: 1fr 1fr; }
  .tl-apply, .tl-elev, .tl-measure { grid-template-columns: 1fr; }
  .tl-ramp { grid-template-columns: repeat(10, 1fr); }
  .tl-type > div { grid-template-columns: 1fr; gap: 2px; }
  .tl-states { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 6px; }
  .tl-states > b { grid-column: 1 / -1; }
  .tl-states > span:empty { display: none; }
  .tl-states .tl-btn { padding: 10px 2px; }
  .tl-states .inp { padding: 9px 6px; font-size: calc(11px * var(--tl-fs)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tl-scale { flex-wrap: wrap; overflow: visible; row-gap: 14px; }
  .tl-scale .big i { height: 80px; }
  .tl-dock { gap: 4px; padding: 5px; }
  .tl-dock > span[aria-hidden] { display: none; }
  .tl-dock .seg button { padding: 6px 8px; }
  .tl-stack { height: 260px; }
}

@media (prefers-reduced-motion: reduce) {
  body.tl-anim .tl-surface, body.tl-anim .tl-surface *, .tl-card, .tl-dock { transition: none !important; }
}

/* site-wide code chips are light; inside live samples the token colours own the text */
.cs-body .tl-surface code { background: transparent; padding: 0; }