/* TokForge chrome v11 (WEB-139): seven-item primary nav, a phone menu that
   works without JavaScript, and the shared page blocks the new pages use.
   Loaded after /assets/v10/site.css; everything is namespaced tf11- or tfx-. */

/* ---- header: seven items need the desktop row only from 1101px up ---- */
.tfx-header-in { position: relative; }
.tfx-nav { gap: 24px; }
.tfx-nav a { font-size: 14.5px; white-space: nowrap; }
@media (max-width: 1240px) { .tfx-nav { gap: 18px; } .tfx-nav a { font-size: 14px; } }
@media (max-width: 1100px) { .tfx-nav { display: none; } }

/* phone and tablet menu: a details/summary disclosure, no script needed */
.tf11-menu { display: none; position: static; }
@media (max-width: 1100px) { .tf11-menu { display: block; } }
.tf11-menu > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 14px; border-radius: var(--r-pill, 999px);
  border: 1px solid rgba(245, 166, 35, 0.5); background: rgba(255, 255, 255, 0.05);
  color: var(--text, #F2F5F8); font: 700 14px/1 var(--body, system-ui, sans-serif);
}
.tf11-menu > summary::-webkit-details-marker { display: none; }
.tf11-menu > summary svg { width: 18px; height: 18px; stroke: currentColor; }
.tf11-menu[open] > summary { border-color: var(--ember, #F5A623); background: rgba(245, 166, 35, 0.12); }
.tf11-menu-panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 300;
  margin: 0 12px; padding: 10px; border-radius: 16px;
  border: 1px solid var(--line, #1C2431); background: #0C1017;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.8);
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
}
.tf11-menu-panel a {
  display: block; padding: 12px 14px; border-radius: 10px; min-width: 0;
  color: var(--text, #F2F5F8); font: 600 15px/1.3 var(--body, system-ui, sans-serif);
  text-decoration: none; overflow-wrap: anywhere;
}
.tf11-menu-panel a small { display: block; margin-top: 3px; color: var(--text-dim, #7C8797); font-weight: 500; font-size: 12.5px; }
.tf11-menu-panel a:hover, .tf11-menu-panel a[aria-current="page"] { background: rgba(245, 166, 35, 0.1); }
@media (max-width: 420px) {
  .tf11-menu > summary { width: 38px; height: 38px; padding: 0; }
  .tf11-menu > summary .tf11-menu-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .tf11-menu-panel { grid-template-columns: 1fr; }
}
/* the home page keeps its own header classes */
.site-header .header-in { position: relative; }
.site-header .brand { flex: 0 0 auto; }
.site-header .nav { gap: 22px; }
.site-header .nav a { white-space: nowrap; font-size: 14.5px; }
@media (max-width: 1440px) {
  .site-header .header-cta .btn-alt { width: 42px; height: 42px; padding: 0; gap: 0; }
  .site-header .header-cta .btn-alt .btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .site-header .header-cta .btn-alt svg { width: 18px; height: 18px; }
}
@media (max-width: 1240px) { .site-header .nav { gap: 16px; } .site-header .nav a { font-size: 14px; } }
@media (max-width: 1100px) { .site-header .nav { display: none !important; } }

/* ---- footer columns (four) ---- */
.tfx-foot-grid.tf11-foot { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; }
@media (max-width: 960px) { .tfx-foot-grid.tf11-foot { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 760px) { .tfx-foot-grid.tf11-foot { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .tfx-foot-grid.tf11-foot { grid-template-columns: 1fr; } }

/* ---- shared blocks for the WEB-139 pages ---- */
.tf11-page { width: 100%; max-width: 980px; margin: 0 auto; padding: 36px var(--pad, 20px) 64px; }
.tf11-crumb { color: var(--text-dim, #7C8797); font-size: 14px; margin-bottom: 14px; }
.tf11-crumb a { color: var(--text-muted, #A9B4C2); }
.tf11-page h1 { font-size: clamp(32px, 5vw, 48px); margin: 0 0 14px; }
.tf11-lede { color: var(--text-muted, #A9B4C2); font-size: 18px; line-height: 1.6; max-width: 62ch; margin: 0 0 18px; }
.tf11-verified { display: inline-block; color: var(--text-dim, #7C8797); font-size: 13px; border: 1px solid var(--line, #1C2431); border-radius: 999px; padding: 4px 12px; margin: 0 0 22px; }
.tf11-page h2 { font-size: clamp(24px, 3.4vw, 32px); margin: 44px 0 12px; scroll-margin-top: 90px; }
.tf11-page h3 { font-size: 20px; margin: 28px 0 8px; scroll-margin-top: 90px; }
.tf11-page p, .tf11-page li { color: var(--text-muted, #A9B4C2); font-size: 16.5px; line-height: 1.7; }
.tf11-page p { margin: 0 0 14px; max-width: 72ch; }
.tf11-page ul, .tf11-page ol { margin: 0 0 16px 22px; max-width: 72ch; }
.tf11-page li { margin: 0 0 6px; }
.tf11-page a { color: var(--ember, #F5A623); }
.tf11-page code { font-family: var(--mono, monospace); font-size: 0.92em; background: rgba(255,255,255,0.06); padding: 1px 6px; border-radius: 6px; overflow-wrap: anywhere; }
.tf11-path { font-weight: 600; color: var(--text, #F2F5F8); }
.tf11-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; margin: 18px 0 8px; }
.tf11-card { border: 1px solid var(--line, #1C2431); border-radius: 16px; padding: 20px; background: rgba(255,255,255,0.02); min-width: 0; }
.tf11-card h3 { margin: 0 0 6px; font-size: 19px; }
.tf11-card p { font-size: 15.5px; margin: 0 0 12px; }
.tf11-card .tfx-btn { margin-top: 4px; }
.tf11-card-hot { border-color: rgba(245, 166, 35, 0.55); background: linear-gradient(135deg, rgba(245,166,35,0.08), rgba(255,255,255,0.015)); }
.tf11-tag { display: inline-block; font: 700 12px/1 var(--body, sans-serif); letter-spacing: 0.02em; padding: 5px 9px; border-radius: 999px; margin: 0 6px 8px 0; border: 1px solid var(--line, #1C2431); color: var(--text-muted, #A9B4C2); }
.tf11-tag-stable { border-color: rgba(70, 200, 120, 0.6); color: #8FE3AE; }
.tf11-tag-beta { border-color: rgba(245, 166, 35, 0.6); color: #F5C26B; }
.tf11-tag-next { border-color: rgba(140, 160, 255, 0.55); color: #B9C4FF; }
.tf11-note { border-left: 3px solid var(--ember, #F5A623); background: rgba(245,166,35,0.06); padding: 14px 16px; border-radius: 0 12px 12px 0; margin: 16px 0; }
.tf11-note p { margin: 0; }
.tf11-table-wrap { width: 100%; overflow-x: auto; margin: 14px 0 18px; border: 1px solid var(--line, #1C2431); border-radius: 14px; }
.tf11-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.tf11-table th, .tf11-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line, #1C2431); vertical-align: top; color: var(--text-muted, #A9B4C2); }
.tf11-table th { color: var(--text, #F2F5F8); font-weight: 700; background: rgba(255,255,255,0.03); white-space: nowrap; }
.tf11-table tr:last-child td { border-bottom: 0; }
.tf11-table td a { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  /* stacked rows on phones: no sideways scrolling, no zoom-out */
  .tf11-table.tf11-stack thead { display: none; }
  .tf11-table.tf11-stack tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line, #1C2431); }
  .tf11-table.tf11-stack tr:last-child { border-bottom: 0; }
  .tf11-table.tf11-stack td { display: block; border: 0; padding: 4px 14px; }
  .tf11-table.tf11-stack td::before { content: attr(data-label); display: block; color: var(--text-dim, #7C8797); font-size: 12.5px; font-weight: 700; }
}
.tf11-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; padding: 0; list-style: none; }
.tf11-toc li { margin: 0; }
.tf11-toc a { display: inline-block; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line, #1C2431); color: var(--text-muted, #A9B4C2); font-size: 14px; text-decoration: none; }
.tf11-toc a:hover { border-color: var(--ember, #F5A623); color: var(--text, #F2F5F8); }
.tf11-steps { counter-reset: s; list-style: none; margin-left: 0 !important; }
.tf11-steps > li { counter-increment: s; position: relative; padding-left: 40px; }
.tf11-steps > li::before { content: counter(s); position: absolute; left: 0; top: 2px; width: 26px; height: 26px; border-radius: 50%; background: rgba(245,166,35,0.15); color: var(--ember, #F5A623); font: 700 14px/26px var(--body, sans-serif); text-align: center; }
.tf11-btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 6px; }
.tf11-stub { text-align: center; padding: 90px 20px; }
.tf11-page a.tfx-btn-primary, .tf11-page a.tfx-btn-primary:hover { color: #150C02; text-decoration: none; }
.tf11-page a.tfx-btn-alt, .tf11-page a.tfx-btn-alt:hover { color: var(--text, #F2F5F8); text-decoration: none; }
.tf11-page ul.tf11-toc { margin-left: 0; max-width: none; }
.tf11-grid.tf11-two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
.tf11-card h3 a { color: var(--text, #F2F5F8); }
.tf11-card h3 a:hover { color: var(--ember-lift, #FFC55C); }
@media (max-width: 440px) {
  .tfx-header-cta .tfx-btn-primary { padding: 9px 14px; font-size: 14px; }
  .tfx-header-cta { gap: 6px; }
}
@media (max-width: 360px) {
  .tfx-header-cta .tfx-btn-primary { padding: 8px 11px; font-size: 13px; }
}
/* narrow phones: the logo stays, the wordmark goes, so the header never pushes the page wider */
@media (max-width: 430px) {
  .tfx-brand span, .site-header .brand span { display: none; }
  .tfx-header-in, .site-header .header-in { gap: 8px; }
}
.tf11-table-wrap.scroll > table { min-width: 0; }
.tf11-table-wrap.scroll td { white-space: normal; }