/* TS IPTV — shared styles for the public pages.
   Palette mirrors composeApp/.../ui/themes/TSColors.kt so the site and app match. */

:root {
  --navy-900: #03041d;
  --navy-800: #0c0d2c;
  --navy-700: #161a32;
  --stroke: #1f2937;
  --accent: #00f5a0;
  --accent-cyan: #00d9e9;
  --text: #f3f4f6;
  --text-dim: #9ca3af;
  --max: 46rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0;
  background: var(--navy-900);
  color: var(--text);
  font: 16px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

a { color: var(--accent-cyan); }
a:hover { color: var(--accent); }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 2rem 1.25rem 5rem;
}

/* ---- header ------------------------------------------------------------ */

header.site {
  border-bottom: 1px solid var(--stroke);
  background: linear-gradient(180deg, var(--navy-800), var(--navy-900));
}

header.site .wrap {
  padding-block: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

header.site img { width: 40px; height: 40px; border-radius: 10px; }

header.site .name { font-weight: 700; font-size: 1.05rem; letter-spacing: 0.02em; }

header.site nav { margin-left: auto; display: flex; gap: 1rem; font-size: 0.9rem; }

/* ---- language switch --------------------------------------------------- */

.langbar {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}

.langbar button {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: var(--navy-800);
  color: var(--text-dim);
  cursor: pointer;
}

/* Home page: one menu with the 15 languages (options written by assets/lang.js). */
.langselect {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.35rem 2rem 0.35rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: var(--navy-800) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a5b4fc' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
  color: var(--text);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  max-width: 12rem;
}
.langselect:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.langselect option { color: #111; background: #fff; }

.langbar button[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--navy-900);
  background: var(--accent);
  font-weight: 600;
}

/* ---- typography -------------------------------------------------------- */

h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1.25; margin: 0 0 0.5rem; }
h2 { font-size: 1.2rem; margin: 2.5rem 0 0.75rem; }
h3 { font-size: 1rem; margin: 1.75rem 0 0.5rem; }

.updated { color: var(--text-dim); font-size: 0.9rem; margin: 0 0 2rem; }

ul, ol { padding-left: 1.25rem; }
li { margin: 0.35rem 0; }

/* ---- blocks ------------------------------------------------------------ */

.card {
  background: var(--navy-800);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  padding: 1.25rem 1.4rem;
  margin: 1.5rem 0;
}

.card.warn { border-color: #b45309; background: #1b1405; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  margin: 1rem 0;
}

.scroll-x { overflow-x: auto; }

th, td {
  text-align: left;
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--stroke);
  vertical-align: top;
}

th { color: var(--text-dim); font-weight: 600; }

.btn {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  border-radius: 10px;
  background: linear-gradient(120deg, var(--accent), var(--accent-cyan));
  color: var(--navy-900);
  font-weight: 700;
  text-decoration: none;
}

footer.site {
  border-top: 1px solid var(--stroke);
  color: var(--text-dim);
  font-size: 0.85rem;
}

footer.site .wrap { padding-block: 1.75rem; }

[hidden] { display: none !important; }

/* ---- format guides (F4) --------------------------------------------------
   Additions only; nothing above this line was changed. */

header.site nav { flex-wrap: wrap; row-gap: 0.25rem; }
header.site nav a[aria-current="page"] { color: var(--accent); font-weight: 600; }

@media (max-width: 400px) {
  .wrap { padding-left: 1rem; padding-right: 1rem; }
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

h2[id], h3[id] { scroll-margin-top: 1rem; }

code, pre, kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.88em;
}

:not(pre) > code {
  background: var(--navy-700);
  border: 1px solid var(--stroke);
  border-radius: 6px;
  padding: 0.05em 0.35em;
  overflow-wrap: anywhere;
}

pre {
  background: var(--navy-700);
  border: 1px solid var(--stroke);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  margin: 0 0 1rem;
  max-width: 100%;
  overflow-x: auto;
  tab-size: 2;
  line-height: 1.55;
}

pre code { background: none; border: 0; padding: 0; font-size: inherit; white-space: pre; }

main p a, main li a, main td a { overflow-wrap: anywhere; }

.breadcrumb { font-size: 0.88rem; color: var(--text-dim); margin: 0 0 0.75rem; }
.breadcrumb a { color: var(--text-dim); }
.breadcrumb a:hover { color: var(--accent); }

.lead { font-size: 1.05rem; }

.toc {
  background: var(--navy-800);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}
.toc .toc-title { margin: 0 0 0.25rem; font-weight: 600; color: var(--text-dim); font-size: 0.9rem; }
.toc ol { margin: 0; }
.toc li { margin: 0.2rem 0; }

.card.callout { border-color: #0e7490; background: #04161c; }
.card.callout p:last-child { margin-bottom: 0; }
.card.callout p:first-child { margin-top: 0; }

.badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.badge.yes { color: #00f5a0; }
.badge.no { color: #fca5a5; }
.badge.partial { color: #fcd34d; }

.codeblock { margin: 1rem 0 1.25rem; }
.codeblock pre { margin: 0; }
.codebar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  margin: 0 0 0.4rem;
}
.copy-btn, .dl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0.45rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--stroke);
  background: var(--navy-800);
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  text-decoration: none;
  cursor: pointer;
}
.copy-btn:hover, .dl-btn:hover { border-color: var(--accent); color: var(--accent); }

.features { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.features .card { margin: 0; }
.features h3 { margin-top: 0; }
.features .card p:last-child { margin-bottom: 0; }

.related { margin-top: 3rem; border-top: 1px solid var(--stroke); padding-top: 0.5rem; }

/* ---- TS IPTV Source validator (F4 wave C) --------------------------------- */

h4[id] { scroll-margin-top: 1rem; }
h4 { font-size: 0.95rem; margin: 1.5rem 0 0.5rem; }

.validator { margin: 1.5rem 0; }
.validator label { display: block; font-weight: 600; margin: 0 0 0.4rem; }
.validator textarea {
  width: 100%;
  min-height: 14rem;
  padding: 0.8rem 0.9rem;
  border-radius: 10px;
  border: 1px solid var(--stroke);
  background: var(--navy-800);
  color: var(--text);
  font: 0.88rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  tab-size: 2;
  resize: vertical;
}
.validator-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin: 0.75rem 0; }
.validator-actions .vfile-label { margin: 0; font-weight: 400; }
.validator-actions input[type=file] { min-height: 44px; max-width: 100%; color: var(--text-dim); }
.validator-actions .btn { border: 0; font: inherit; font-weight: 700; cursor: pointer; min-height: 44px; }
.vresult { border-radius: 14px; padding: 0.25rem 1.2rem; margin: 1rem 0; border: 1px solid var(--stroke); background: var(--navy-800); }
.vresult:empty { display: none; }
.vresult-ok { border-color: #00f5a0; }
.vresult-bad { border-color: #f87171; }
.vresult-head { font-weight: 700; }
.vresult-list { padding-left: 1.1rem; }
.vresult-list li { overflow-wrap: anywhere; }

/* Code names in tables stay on one line at 360 px; tables scroll inside .scroll-x. */
td code { white-space: nowrap; overflow-wrap: normal; }

/* ---- header navigation, sticky header, smooth navigation ------------------------------------
   The nav markup is generated by web/scripts/site_nav.py (same block on every page). */

header.site {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(12, 13, 44, 0.94);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  header.site {
    background: rgba(12, 13, 44, 0.72);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    backdrop-filter: saturate(140%) blur(12px);
  }
}
header.site .wrap { max-width: 72rem; padding-block: 0.6rem; row-gap: 0.5rem; }
header.site img { width: 36px; height: 36px; }

/* Icon-only buttons. The label (.nav-label) is the accessible name and appears as a tooltip
   under the icon on hover and keyboard focus. */
header.site .site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
header.site .site-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: var(--navy-800);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}
header.site .site-nav svg { flex: none; width: 24px; height: 24px; }
header.site .site-nav a:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  background: var(--navy-700);
  transform: translateY(-1px);
}
header.site .site-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
header.site .site-nav a:active { transform: translateY(0); }
header.site .site-nav a[aria-current="page"] {
  background: linear-gradient(135deg, var(--accent), var(--accent-cyan));
  border-color: transparent;
  color: var(--navy-900);
}
header.site .site-nav a[aria-current="page"]:hover { color: var(--navy-900); }

/* Tooltip */
header.site .site-nav .nav-label {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, -4px);
  padding: 0.35rem 0.65rem;
  border-radius: 8px;
  border: 1px solid var(--stroke);
  background: var(--navy-700);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 60;
}
header.site .site-nav .nav-label::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-bottom-color: var(--stroke);
}
/* The last button sits at the right edge: keep its tooltip inside the viewport. */
header.site .site-nav a:last-child .nav-label { left: auto; right: 0; transform: translate(0, -4px); }
header.site .site-nav a:last-child .nav-label::before { left: auto; right: 17px; margin-left: 0; }
header.site .site-nav a:hover .nav-label,
header.site .site-nav a:focus-visible .nav-label {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
header.site .site-nav a:last-child:hover .nav-label,
header.site .site-nav a:last-child:focus-visible .nav-label { transform: translate(0, 0); }

/* bilingual labels: show the one matching <html lang> (Vietnamese when nothing is set) */
/* Vietnamese only for <html lang="vi">; every other language uses the English span (which the home page fills
   with the 13 other languages, marked data-k; assets/lang.js). */
.nav-label [lang="en"], .nav-label [data-k] { display: none; }
html:not([lang="vi"]) .nav-label [lang="en"], html:not([lang="vi"]) .nav-label [data-k] { display: inline; }
html:not([lang="vi"]) .nav-label [lang="vi"] { display: none; }

/* sign-out button of the contributor pages, next to the nav */
header.site .linklike { min-height: 46px; }

/* Home page: the 15-language menu after the icon buttons (assets/lang.js writes its options). A globe and the
   language's name; on phones the globe alone, and the system picker lists the names. */
header.site .site-lang {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 46px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: var(--navy-800);
  color: var(--text);
  transition: border-color 0.15s ease, color 0.15s ease;
}
header.site .site-lang:hover,
header.site .site-lang:focus-within { border-color: var(--accent-cyan); color: var(--accent-cyan); }
header.site .site-lang svg { position: absolute; left: 11px; flex: none; pointer-events: none; }
header.site .site-lang .langselect {
  height: 100%;
  border: 0;
  border-radius: 14px;
  background-color: transparent;
  padding-left: 2.6rem;
  font-size: 0.9rem;
}
header.site .site-lang .langselect:focus-visible { outline-offset: 0; }

/* Phones: slightly smaller buttons on the same row as the logo; no hover, so no tooltip. */
@media (max-width: 640px) {
  header.site .site-lang { width: 42px; height: 42px; border-radius: 12px; justify-content: center; }
  header.site .site-lang svg { left: 50%; transform: translateX(-50%); }
  header.site .site-lang .langselect { width: 42px; padding: 0; border-radius: 12px; color: transparent; background-image: none; }
  header.site .wrap { flex-wrap: nowrap; }
  header.site .site-nav { gap: 0.35rem; }
  header.site .site-nav a { width: 42px; height: 42px; border-radius: 12px; }
  header.site .site-nav svg { width: 22px; height: 22px; }
}
@media (max-width: 420px) {
  header.site .name { display: none; }
  header.site .site-nav a { width: 40px; height: 40px; }
  header.site .site-lang, header.site .site-lang .langselect { width: 40px; height: 40px; }
}
@media (hover: none) {
  header.site .site-nav a:hover { transform: none; }
  header.site .site-nav a:hover .nav-label { opacity: 0; visibility: hidden; }
}
/* In-page anchors land below the sticky header. */
html { scroll-padding-top: 5rem; }
@media (max-width: 640px) { html { scroll-padding-top: 5rem; } }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* Cross-page transitions (browsers without support navigate exactly as before). */
  @view-transition { navigation: auto; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 180ms; animation-timing-function: ease-out; }
  header.site { view-transition-name: site-header; }
  ::view-transition-group(site-header) { animation-duration: 0s; }
}

/* ---- site footer (generated by web/scripts/site_nav.py on every page) -----------------------
   The footer used to inherit the 46rem text column and wrapped on wide screens; it now uses the
   header's width and lays its links out in columns. */

footer.site {
  margin-top: 2rem;
  background: linear-gradient(180deg, var(--navy-900), #02031a);
}
footer.site .wrap.foot {
  max-width: 72rem;
  padding: 3rem 1.25rem 2rem;
  display: grid;
  grid-template-columns: minmax(14rem, 1.2fr) 3fr;
  gap: 2rem 3rem;
  align-items: start;
}
.foot-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text);
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
}
.foot-logo img { border-radius: 9px; }
.foot-logo:hover { color: var(--accent); }
.foot-brand p { margin: 0.75rem 0 0; max-width: 22rem; line-height: 1.6; }
.foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.foot-h {
  margin: 0 0 0.6rem;
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col li { margin: 0.45rem 0; }
.foot-col a { color: var(--text-dim); text-decoration: none; transition: color 0.15s ease; }
.foot-col a:hover { color: var(--accent); }
.foot-bottom {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--stroke);
  font-size: 0.8rem;
}
@media (max-width: 860px) {
  footer.site .wrap.foot { grid-template-columns: 1fr; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Bilingual labels in the shared footer, like the nav labels. */
footer.site [lang="en"], footer.site [data-k] { display: none; }
html:not([lang="vi"]) footer.site [lang="en"], html:not([lang="vi"]) footer.site [data-k] { display: inline; }
html:not([lang="vi"]) footer.site [lang="vi"] { display: none; }

/* Pages without language panes (home page): elements carry data-l="vi|en"; every language but Vietnamese shows
   the English element (the home page puts the other 13 languages into it). */
html[lang="vi"] [data-l="en"],
html:not([lang="vi"]) [data-l="vi"] { display: none !important; }

/* Text for screen readers only. */
.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;
}