/* Sky Isles · navigation R1 (3 Nov 2026) — overrides on top of sky-isles.css (which is GENERATED; never edit it).
   Loaded by components/sky/sky-shell.tsx (<link precedence>), so every rule is prefixed with [data-sky] to win over
   sky-isles.css whatever the load order. Covers: 5-slot tab bar, nav/pill/footer targets >= 44px, active ink
   #0A6E65 on #DDF6F2 (5.4:1), breadcrumb + back bar, grouped footer, sticky footer, compact mobile hubs, homepage
   order, shortcut grid, StartHere card, login prompt, skip link, Sky 404/error card. */

[data-sky] .sk { --teal-ink: #0A6E65; }

/* ---------- skip link + screen-reader text ---------- */
[data-sky] .sk-skip { position: fixed; z-index: 60; left: 12px; top: -80px; padding: 12px 18px; border-radius: 14px; background: #fff; color: #15284B; font: 600 16px/1.2 Kanit, 'IBM Plex Sans Thai Looped', sans-serif; box-shadow: 0 10px 24px -10px rgba(10, 30, 60, .5); text-decoration: none; }
[data-sky] .sk-skip:focus { top: 12px; }
[data-sky] .sk-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[data-sky] main:focus { outline: none; }

/* ---------- visible focus everywhere in the shell ---------- */
[data-sky] .sk-top a:focus-visible, [data-sky] .sk-crumbs a:focus-visible, [data-sky] .sk-gate a:focus-visible, [data-sky] .sk-gate button:focus-visible, [data-sky] .sk-lost a:focus-visible, [data-sky] .sk-lost button:focus-visible { outline: 3px solid #8154C8; outline-offset: 3px; }
[data-sky] .sk-tabbar a:focus-visible, [data-sky] .sk-foot a:focus-visible { outline: 3px solid #FFC93C; outline-offset: 2px; border-radius: 12px; }

/* ---------- top bar ---------- */
[data-sky] .sk-nav a { min-height: 48px; padding: 0 22px; line-height: 1.25; white-space: nowrap; transition: background .15s; }
[data-sky] .sk-nav a:hover { background: #EEF3F8; }
[data-sky] .sk-nav a[aria-current] { background: #DDF6F2; color: #0A6E65; }
[data-sky] .sk-nav a[aria-current]::after { bottom: 5px; }
[data-sky] .sk-nav .sk-badge { position: static; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; font: 600 11.5px/20px var(--body); margin-left: -2px; }
[data-sky] .sk-wallet > a { min-height: 44px; }
[data-sky] .sk-wallet .sk-me { min-height: 46px; padding-right: 4px; border-radius: 999px; }
[data-sky] .sk-wallet .sk-me[aria-current] small { color: #0A6E65; }
[data-sky] .sk-wallet .sk-profile-label { font: 600 14px/1 var(--head); color: #0A6E65; padding-right: 8px; }
[data-sky] .sk-wallet--guest a { min-height: 44px; height: auto; gap: 8px; }
[data-sky] .sk-wallet--guest .sk-teacher { display: flex; color: var(--ink); }
[data-sky] .sk-wallet--guest .sk-teacher svg.sk-i { width: 20px; height: 20px; color: #0A6E65; }
[data-sky] .sk-wallet--guest .sk-teacher[aria-current] { background: #DDF6F2; color: #0A6E65; }
[data-sky] .sk-short-l { display: none; }
@media (max-width: 1180px) { [data-sky] .sk-nav a { padding: 0 14px; } }
@media (max-width: 1000px) and (min-width: 761px) { [data-sky] .sk-nav a { padding: 0 12px; } }
@media (max-width: 760px) {
  [data-sky] .sk-wallet--guest .sk-teacher { padding: 0 10px; }
  [data-sky] .sk-wallet--guest .sk-full { display: none; }
  [data-sky] .sk-wallet--guest .sk-short-l { display: inline; }
}

/* ---------- mobile tab bar: 5 slots ---------- */
@media (max-width: 760px) {
  [data-sky] .sk-tabbar { grid-template-columns: repeat(5, 1fr); gap: 2px; }
  [data-sky] .sk-tabbar a { min-height: 44px; gap: 4px; font: 600 12.5px/1.2 var(--head); white-space: nowrap; letter-spacing: -.01em; }
  [data-sky] .sk-tabbar a[aria-current] { color: #3FE0CF; background: rgba(31, 199, 182, .16); }
  [data-sky] .sk-tabbar a[aria-current]::before { content: ''; position: absolute; top: 3px; left: 50%; width: 20px; height: 3px; margin-left: -10px; border-radius: 3px; background: var(--teal); }
  [data-sky] .sk-tabbar .sk-badge { top: 2px; right: auto; left: calc(50% + 6px); }
  [data-sky] .sk-tabbar .sk-tl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- breadcrumb + กลับ ---------- */
[data-sky] .sk-crumbs { position: relative; z-index: 4; display: flex; align-items: center; gap: 12px; width: min(1416px, calc(100% - 64px)); margin: 0 auto 18px; padding: 7px; border-radius: 18px; background: #fff; box-shadow: 0 12px 28px -18px rgba(16, 34, 70, .5); font: 400 15px/1.5 var(--body); color: var(--muted); }
[data-sky] .sk-back { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px 0 12px; border-radius: 14px; background: var(--navy); color: #fff; font: 600 16px/1.25 var(--head); flex: none; }
[data-sky] .sk-crumbs a.sk-back, [data-sky] .sk-crumbs a.sk-back:hover { color: #fff; }
[data-sky] .sk-crumbs a.sk-back:hover { background: #1C3A66; }
[data-sky] .sk-crumbs ol { display: flex; align-items: center; gap: 2px; min-width: 0; list-style: none; overflow: hidden; font: 600 15.5px/1.4 var(--head); }
[data-sky] .sk-crumbs li { display: flex; align-items: center; gap: 2px; min-width: 0; }
[data-sky] .sk-crumbs li > svg.sk-i { width: 16px; height: 16px; color: #B8C2D0; flex: none; }
[data-sky] .sk-crumbs a { display: flex; align-items: center; gap: 7px; min-height: 46px; padding: 0 10px; border-radius: 12px; white-space: nowrap; color: var(--muted); }
[data-sky] .sk-crumbs a svg.sk-i { width: 18px; height: 18px; }
[data-sky] .sk-crumbs a:hover { background: #EEF3F8; color: var(--ink); }
[data-sky] .sk-crumbs [aria-current] { display: flex; align-items: center; min-height: 46px; padding: 0 12px; border-radius: 12px; background: #DDF6F2; color: #0A6E65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-width: 1180px) { [data-sky] .sk-crumbs { width: calc(100% - 32px); } }
@media (max-width: 760px) {
  [data-sky] .sk-crumbs { width: calc(100% - 28px); margin-bottom: 14px; gap: 6px; padding: 5px; }
  [data-sky] .sk-back { min-height: 44px; padding: 0 12px 0 8px; font-size: 15px; }
  [data-sky] .sk-crumbs ol { font-size: 14.5px; }
  [data-sky] .sk-crumbs a, [data-sky] .sk-crumbs [aria-current] { min-height: 44px; padding: 0 8px; }
  [data-sky] .sk-crumbs .sk-crumb--far { display: none; }
}

/* ---------- grouped footer ---------- */
[data-sky] .sk-foot--groups .sk-in { grid-template-columns: 1.3fr repeat(4, 1fr); align-items: start; gap: 24px; padding: 30px 32px 44px; }
[data-sky] .sk-foot--groups .sk-brand { align-items: flex-start; font-size: 19px; }
[data-sky] .sk-foot--groups .sk-brand img { width: 44px; height: 44px; }
[data-sky] .sk-foot--groups nav { display: block; font-size: 15px; }
[data-sky] .sk-foot--groups h2 { margin-bottom: 4px; font: 600 15px/1.3 var(--head); color: var(--gold); letter-spacing: .01em; }
[data-sky] .sk-foot--groups ul { list-style: none; }
[data-sky] .sk-foot--groups li a { display: flex; align-items: center; min-height: 44px; color: #DCE6F5; }
[data-sky] .sk-foot--groups li a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
[data-sky] .sk-foot--groups nav a + a::before { content: none; }
@media (max-width: 1000px) { [data-sky] .sk-foot--groups .sk-in { grid-template-columns: repeat(4, 1fr); } [data-sky] .sk-foot--groups .sk-brand { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  [data-sky] .sk-foot--groups .sk-in { grid-template-columns: 1fr 1fr; justify-items: stretch; text-align: left; gap: 14px 18px; padding: 24px 16px 108px; }
  [data-sky] .sk-foot--groups li a { font-size: 14.5px; }
  [data-sky] body.sk-has-tabbar:has(> .sk-foot) { padding-bottom: 0; }
}

/* ---------- footer stays at the bottom of short pages ---------- */
[data-sky] body:has(> .sk-foot) { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
[data-sky] body:has(> .sk-foot) > * { flex-shrink: 0; }
[data-sky] body:has(> .sk-foot) > :where(main, div, section, article, form) { width: -moz-available; width: -webkit-fill-available; width: stretch; }
[data-sky] body > .sk-foot { margin-top: auto; }

/* ---------- homepage: one order on every screen; even shortcut grid ---------- */
/* desktop: the hero grows with its panel instead of clipping it (title, CTAs, start here, video) */
@media (min-width: 1001px) {
  [data-sky] .sk-hero:not(.sk-sub) { height: auto; min-height: 600px; padding: 96px 0 48px; }
  [data-sky] .sk-hero:not(.sk-sub) > .sk-panel { position: relative; left: auto; top: auto; margin-left: 40px; }
}
[data-sky] .sk-guestlinks { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 14px; margin: 0; }
[data-sky] .sk-guestlinks a { display: inline-flex; align-items: center; min-height: 44px; color: #fff; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .45); }
[data-sky] .sk-short:not(.sk-four) { grid-template-columns: 170px repeat(4, 1fr); }
@media (max-width: 1180px) { [data-sky] .sk-short:not(.sk-four) { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1000px) { [data-sky] .sk-short:not(.sk-four) { grid-template-columns: repeat(2, 1fr); } [data-sky] .sk-short a:nth-last-child(-n+2) { grid-column: auto; } }
@media (max-width: 760px) {
  [data-sky] .sk-short:not(.sk-four) { grid-template-columns: 1fr 1fr; }
  [data-sky] .sk-short:not(.sk-four) a:last-child { grid-column: auto; }
  [data-sky] .sk-short a { min-height: 58px; height: auto; line-height: 1.25; }
  [data-sky] .sk-panel > * { order: 1; }
  [data-sky] .sk-hero:not(.sk-sub) > .sk-stage { order: 2; height: 320px; max-width: 300px; margin: 6px auto 10px; }
  [data-sky] .sk-hero > .sk-stats { order: 3; }
  [data-sky] .sk-panel > .sk-tasks { margin-top: 12px; }
  [data-sky] .sk-panel > .start-here, [data-sky] .sk-panel > section[aria-label="คลิปแนะนำเว็บ"] { position: relative; z-index: 3; }
}

/* ---------- mobile: all five subject worlds visible (2 columns, the last one wide) instead of a sideways strip ---------- */
@media (max-width: 760px) {
  [data-sky] .sk-worlds { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; overflow: visible; margin: 0; padding: 0; }
  [data-sky] .sk-world { height: 128px; }
  [data-sky] .sk-world:last-child { grid-column: 1 / -1; height: 112px; }
  [data-sky] .sk-world b { font-size: 18px; }
  [data-sky] .sk-world div { left: 12px; right: 10px; bottom: 10px; }
  [data-sky] .sk-world .sk-row { font-size: 12px; line-height: 1.35; margin-top: 4px; white-space: normal; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } /* site text fix R1: wrap to 2 lines, no "…" */
  [data-sky] .sk-world .sk-go { width: 30px; height: 30px; }
}

/* ---------- mobile hubs: something tappable above the fold; the 3D stage collapses on /learn, /exams, /games ---------- */
@media (max-width: 760px) {
  [data-sky] .sk-hero.sk-sub > .sk-stage { display: none; }
  [data-sky] .sk-hero.sk-sub, [data-sky] .sk-hero.sk-sub.sk-exams, [data-sky] .sk-hero.sk-sub.sk-play, [data-sky] .sk-hero.sk-sub.sk-learnhub { padding: 70px 14px 16px; min-height: 0; }
  [data-sky] .sk-hero.sk-sub .sk-htitle h1 { font-size: 32px; }
  [data-sky] .sk-hero.sk-play .sk-games2 { margin-top: 12px; }
  [data-sky] .sk-hero.sk-sub .sk-hpanel { margin-top: 0; }
}

/* ---------- StartHere: a clean card instead of the clipped light-blue boxes ---------- */
[data-sky] .start-here { margin: 14px 0 0; padding: 16px 16px 12px; border: 1px solid var(--hair, #E6E1D6); border-radius: 16px; background: #fff; color: #15284B; box-shadow: 0 8px 18px -16px rgba(16, 34, 70, .5); }
[data-sky] .start-here h2 { margin: 0 0 10px; font: 600 19px/1.4 Kanit, 'IBM Plex Sans Thai Looped', sans-serif; color: #15284B; }
[data-sky] .start-here ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; list-style: none; margin: 0; padding: 0; }
[data-sky] .start-here li a { display: flex; flex-direction: column; justify-content: center; min-height: 64px; padding: 10px 12px; border-radius: 12px; border: 1px solid #E6E1D6; background: #F7F9FB; color: #15284B; text-decoration: none; }
[data-sky] .start-here li a:hover { border-color: #1FC7B6; background: #fff; }
[data-sky] .start-here li b { font: 600 15.5px/1.35 Kanit, 'IBM Plex Sans Thai Looped', sans-serif; }
[data-sky] .start-here li span { color: #5E6B80; font-size: 13.5px; line-height: 1.4; }
[data-sky] .start-here details { margin-top: 8px; color: #5E6B80; font-size: 14px; }
[data-sky] .start-here summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600; color: #15284B; }
[data-sky] .start-here details a { color: #0A6E65; font-weight: 600; }
[data-sky] .sk-panel .start-here ol { grid-template-columns: 1fr; }
[data-sky] .sk-panel .start-here li a { min-height: 52px; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
@media (max-width: 760px) { [data-sky] .start-here ol { grid-template-columns: 1fr; } [data-sky] .start-here li a { min-height: 52px; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; } }

/* ---------- hubs: teacher band, inline links, lock chip once ---------- */
[data-sky] .sk-teachband { grid-template-columns: 64px 1fr auto; margin-top: 22px; }
[data-sky] .sk-teachband__em { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: #DDF6F2; color: #0A6E65; }
[data-sky] .sk-teachband__em svg.sk-i { width: 32px; height: 32px; }
[data-sky] .sk-inlink { color: #0A6E65; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
[data-sky] .sk-box .sk-inlink { color: #F7C64A; }
[data-sky] .sk-linkgrid a { min-height: 68px; }
@media (max-width: 760px) { [data-sky] .sk-teachband { grid-template-columns: 52px 1fr; } [data-sky] .sk-teachband__em { width: 52px; height: 52px; } }

/* ---------- friendly login prompt ---------- */
[data-sky] .sk-gate { position: fixed; inset: 0; margin: auto; width: min(440px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 26px 24px 20px; border: 0; border-radius: 24px; background: #fff; color: #15284B; text-align: center; box-shadow: 0 30px 60px -20px rgba(8, 22, 48, .6); font: 400 15.5px/1.6 'IBM Plex Sans Thai Looped', sans-serif; }
[data-sky] .sk-gate::backdrop { background: rgba(8, 22, 48, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
[data-sky] .sk-gate__em { width: 60px; height: 60px; margin: 0 auto 8px; border-radius: 18px; display: grid; place-items: center; background: #FFF1D6; color: #B45309; }
[data-sky] .sk-gate__em svg.sk-i { width: 30px; height: 30px; }
[data-sky] .sk-gate h2 { font: 600 24px/1.3 var(--head); margin-bottom: 4px; }
[data-sky] .sk-gate p { color: #5E6B80; }
[data-sky] .sk-gate p b { color: #15284B; }
[data-sky] .sk-gate__acts { display: grid; gap: 10px; margin: 18px 0 10px; }
[data-sky] .sk-gate .sk-cta { height: 52px; font-size: 19px; }
[data-sky] .sk-gate__ghost { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 16px; border: 1.5px solid #E6E1D6; font: 600 17px/1.2 var(--head); color: #15284B; }
[data-sky] .sk-gate__more { font-size: 14px; }
[data-sky] .sk-gate__more a { color: #0A6E65; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; min-height: 44px; align-items: center; }
[data-sky] .sk-gate__x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: #5E6B80; font: 400 28px/1 sans-serif; cursor: pointer; }
[data-sky] .sk-gate__x:hover { background: #EEF3F8; }

/* ---------- Sky 404 / error ---------- */
[data-sky] body:has(.sk-lost) .sk-top--flow { position: absolute; left: 28px; right: 22px; top: 12px; margin: 0; }
[data-sky] .sk-lost { position: relative; flex: 1 0 auto; min-height: 760px; display: grid; place-items: center; padding: 110px 24px 60px; background: #0E2A55 url(/sky/img/plate-question.webp) center / cover no-repeat; }
[data-sky] .sk-lost::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 22, 48, .25), rgba(8, 22, 48, .45)); }
[data-sky] .sk-lostcard { position: relative; z-index: 2; width: min(640px, 100%); padding: 30px 32px 26px; border-radius: 24px; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 24px 50px -24px rgba(8, 22, 48, .7); text-align: center; }
[data-sky] .sk-lostcode { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 999px; background: var(--navy); color: var(--gold); font: 600 14px/1 var(--head); letter-spacing: .02em; }
[data-sky] .sk-lostcode svg.sk-i { width: 18px; height: 18px; }
[data-sky] .sk-lostcard h1 { margin: 12px 0 4px; font: 600 38px/1.3 var(--head); color: var(--ink); text-wrap: balance; }
[data-sky] .sk-lostcard > p { color: var(--muted); font-size: 16px; }
[data-sky] .sk-lostacts { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 20px 0 18px; }
[data-sky] .sk-lostacts .sk-cta { height: 52px; padding: 0 26px; font-size: 19px; border: 0; cursor: pointer; }
[data-sky] .sk-ghostbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 22px; border-radius: 999px; border: 1.5px solid var(--hair); background: #fff; color: var(--ink); font: 600 17px/1.25 var(--head); cursor: pointer; }
[data-sky] .sk-lostquick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
[data-sky] .sk-lostquick a { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 44px; padding: 12px 6px; border-radius: 14px; background: #fff; border: 1px solid var(--hair); font: 600 15px/1.3 var(--head); color: var(--ink); }
[data-sky] .sk-lostquick a:hover { border-color: var(--teal); }
[data-sky] .sk-em { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; }
[data-sky] .t-blue { background: #E0ECFF; color: #2563EB; } [data-sky] .t-teal { background: #DDF6F2; color: #0A6E65; } [data-sky] .t-amber { background: #FFF1D6; color: #B45309; } [data-sky] .t-violet { background: #EDE9FE; color: #6D28D9; }
[data-sky] .sk-losthint { margin-top: 16px; font-size: 13.5px; color: var(--muted); }
[data-sky] .sk-losthint a { color: #0A6E65; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  [data-sky] body:has(.sk-lost) .sk-top--flow { left: 14px; right: 14px; top: 10px; }
  [data-sky] .sk-lost { min-height: 0; padding: 84px 14px 28px; background-image: url(/sky/img/plate-question-768.webp); }
  [data-sky] .sk-lostcard { padding: 22px 18px; }
  [data-sky] .sk-lostcard h1 { font-size: 28px; }
  [data-sky] .sk-lostquick { grid-template-columns: 1fr 1fr; }
}

/* ---------- old pages inside the Sky shell: ranking tabs, fund skeleton, login aside ---------- */
[data-sky] .board-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
[data-sky] .board-tabs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid #E6E1D6; background: #fff; color: #15284B; font-weight: 600; text-decoration: none; }
[data-sky] .board-tabs a[aria-current] { background: #13284A; border-color: #13284A; color: #fff; }
[data-sky] .fund-skeleton .metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 14px 0; }
[data-sky] .skel-card, [data-sky] .skel-line { border-radius: 14px; background: linear-gradient(90deg, #E9EEF4 25%, #F6F8FB 50%, #E9EEF4 75%); background-size: 200% 100%; animation: sk-skel 1.3s ease-in-out infinite; }
[data-sky] .skel-card { height: 86px; }
[data-sky] .skel-line { height: 18px; margin: 10px 0; border-radius: 9px; }
[data-sky] .skel-line--short { width: 60%; }
@keyframes sk-skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { [data-sky] .skel-card, [data-sky] .skel-line { animation: none; } }
[data-sky] .login-aside { max-width: 560px; margin: 10px auto 0; text-align: center; }
[data-sky] .login-aside a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: #fff; color: #0A6E65; font-weight: 600; text-decoration: none; box-shadow: 0 6px 16px -12px rgba(16, 34, 70, .5); }
[data-sky] .tc-staff { margin-top: 18px; text-align: center; }
[data-sky] .tc-staff a { display: inline-flex; align-items: center; min-height: 44px; }