/* TanQuant public pages — v5.2 light surface compatibility layer.
   Loaded last on legacy public pages so their semantic variables resolve to
   the same readable light system as start.html. Calculation behavior is untouched. */
:root{
  --tq-bg:#F5F6F8;--tq-surface:#FFFFFF;--tq-surface-2:#F5F6F8;
  --tq-border:#D9DEE5;--tq-border-2:#C9D0DA;
  --tq-text:#191F28;--tq-text-mut:#5F6B7A;--tq-text-faint:#7B8794;
  --tq-bg-alt:#F5F6F8;--tq-surface-alt:#FFFFFF;--tq-surface-alt-2:#F5F6F8;
  --tq-text-alt:#191F28;--tq-text-mut-alt:#5F6B7A;--tq-text-faint-alt:#7B8794;
  --tq-ctv-surface:#FFFFFF;--tq-ctv-border:#D9DEE5;--tq-ctv-text:#191F28;
  --tq-ctv-text-mut:#5F6B7A;--tq-ctv-text-mut-2:#6B7684;
  --tq-white:#191F28;--tq-panel-deep:#EEF1F4;--tq-panel:#FFFFFF;
  --tq-panel-2:#F7F8FA;--tq-panel-3:#F1F3F5;--tq-line:#D9DEE5;
  --tq-line-2:#D0D6DE;--tq-line-3:#C8CFD8;--tq-line-4:#B8C0CB;
  --tq-ink:#191F28;--tq-ink-2:#333D4B;--tq-ink-3:#4E5968;--tq-ink-4:#5F6B7A;
  --tq-body:#4E5968;--tq-mut:#6B7684;--tq-mut-2:#7B8794;--tq-mut-soft:#8B95A1;
  --tq-mut-3:#8B95A1;--tq-mut-deep:#9AA3AD;--ink:#191F28;--line-soft:#E7EAEF;
}
html{background:var(--tql-bg-deep)}
body{background:var(--tql-bg,#F5F6F8);color:var(--tql-ink,#191F28)}
body.tq-simulator,body.tq-manual{--tq-accent:var(--tql-action,#0064FF);--tq-accent-2:var(--tql-action-press,#0050CC)}

/* Shared desktop header and wordmark. */
.xa-bar,.bar{background:rgba(255,255,255,.96);border-color:var(--tql-line-2,#E4E7EB)}
.xa-brand,.bar .brand,.brand{color:var(--tql-ink,#191F28)}
.xa-bdg{color:var(--tql-ink-sub,#6B7684);border-color:var(--tql-line-2,#E4E7EB)}
.xa-go{color:var(--tql-white,#FFF);background:var(--tql-action,#0064FF)}
.bar-in{max-width:1120px;min-height:64px}.bar .nav{gap:22px;font-size:14px}
.xa-site-nav{display:none}

/* Strategy simulator chooser. */
body.tq-simulator .wrap{max-width:1120px}
body.tq-simulator .card{background:var(--tql-card,#FFF);border-color:var(--tql-line-2,#E4E7EB)}
body.tq-simulator .card:before{background:radial-gradient(420px 200px at 85% -20%,rgba(0,100,255,.10),transparent 60%)}
body.tq-simulator .card:hover{border-color:var(--tql-action,#0064FF)}
body.tq-simulator .c-name{color:var(--tql-ink,#191F28)}
body.tq-simulator .c-desc,body.tq-simulator .c-ko{color:var(--tql-ink-2,#4E5968)}
body.tq-simulator .c-tag,body.tq-simulator .c-cta,body.tq-simulator .glyph{color:var(--tql-action,#0064FF)}
body.tq-simulator .hero h1 .g{color:var(--tql-action,#0064FF)}
body.tq-simulator .hero h1 .dim{color:var(--tql-ink-2,#4E5968)}
body.tq-simulator .hero p,body.tq-simulator .back,body.tq-simulator footer{color:var(--tql-ink-sub,#6B7684)}
body.tq-simulator .brand .mark{background:#111827;border-color:#111827}
body.tq-simulator .wrap>header .nav{display:none}
body.tq-simulator .wrap>header{padding-top:0}

/* Detailed strategy manuals: preserve structure, repair light-surface contrast. */
body.tq-manual .site-nav{display:none}
body.tq-manual .site-nav .sn-brand{color:var(--tql-ink,#191F28)}
body.tq-manual .site-nav .sn-links a{color:var(--tql-ink-2,#4E5968)}
body.tq-manual .site-nav .sn-links a:hover{color:var(--tql-action,#0064FF);background:var(--tql-action-weak,#E8F0FF)}
body.tq-manual .ns-manual,body.tq-manual .ns-manual section{background:var(--tql-bg,#F5F6F8);color:var(--tql-ink,#191F28)}
body.tq-manual .ns-manual .glow::before{display:none}
body.tq-manual .ns-manual .hero{padding-top:clamp(54px,8vw,84px)}
body.tq-manual .ns-manual h1,body.tq-manual .ns-manual h2,body.tq-manual .ns-manual h3,
body.tq-manual .ns-manual h4,body.tq-manual .ns-manual strong,body.tq-manual .ns-manual b,
body.tq-manual .site-cta h2{color:var(--tql-ink,#191F28)}
body.tq-manual .ns-manual .card,body.tq-manual .ns-manual .chartcard,
body.tq-manual .ns-manual .legendpanel,body.tq-manual .ns-manual .kv,
body.tq-manual .ns-manual .exit,body.tq-manual .ns-manual .scn,body.tq-manual .ns-manual .st{
  background:var(--tql-card,#FFF);border-color:var(--tql-line-2,#E4E7EB)}
body.tq-manual .ns-manual .lead,body.tq-manual .ns-manual .card p,
body.tq-manual .ns-manual .legendpanel .lp-txt,body.tq-manual .ns-manual .scn p,
body.tq-manual .ns-manual .st p{color:var(--tql-ink-2,#4E5968)}
body.tq-manual .ns-manual .lead{font-size:max(15px,clamp(15px,1.9vw,18px))}
body.tq-manual .site-cta,body.tq-manual .site-foot{background:var(--tql-card,#FFF)}
body.tq-manual .btn.s,body.tq-manual .btn-s{background:var(--tql-card,#FFF);color:var(--tql-ink,#191F28);border-color:var(--tql-line-2,#E4E7EB)}

/* Community: calmer, wider editorial surface and visible brand. */
body.tq-community .wrap{max-width:1120px;padding-top:28px}
body.tq-community .list{border-color:var(--tql-line-2,#E4E7EB)}
body.tq-community .row{border-bottom-color:var(--tql-line,#F0F1F3);min-height:68px}
body.tq-community .row:hover{background:var(--tql-card-sub,#F5F6F8)}
body.tq-community .brand{font-size:20px;letter-spacing:-.02em}

/* Desktop public surfaces use the browser canvas directly, like the new Home.
   Keep readable inner widths, but do not frame the whole site as a floating app. */
@media(min-width:1024px){
  html{background:var(--tql-bg,#F5F6F8)}
  body.tq-manual,body.tq-community,body.tq-simulator{
    box-sizing:border-box;width:100%;max-width:none;min-height:100vh;
    margin:0;border:0;border-radius:0;box-shadow:none}
  body.tq-manual>.xa-bar,body.tq-community>.bar,body.tq-simulator>.xa-bar{
    border-radius:0}
  body.tq-manual .xa-bar,body.tq-simulator .xa-bar{
    min-height:76px;padding:18px clamp(22px,4vw,68px)}
  body.tq-community .bar-in{
    width:100%;max-width:none;min-height:76px;
    padding-left:clamp(22px,4vw,68px);padding-right:clamp(22px,4vw,68px)}
  body.tq-community .wrap{
    width:100%;max-width:1440px;padding-left:clamp(32px,4vw,76px);padding-right:clamp(32px,4vw,76px)}
  body.tq-simulator .wrap{width:100%;max-width:1440px;padding-left:clamp(32px,4vw,76px);padding-right:clamp(32px,4vw,76px)}
  body.tq-manual .ns-manual .wrap{width:100%;max-width:1360px;padding-left:clamp(32px,4vw,76px);padding-right:clamp(32px,4vw,76px)}
  .xa-bdg{display:none}
  .xa-site-nav,.bar .nav{display:flex;align-items:center;gap:clamp(16px,2.2vw,34px);margin-left:clamp(24px,5vw,78px)}
  .xa-site-nav{margin-left:calc(clamp(24px,5vw,78px) - 3px)}
  .bar .nav{margin-left:calc(clamp(24px,5vw,78px) - 5px)}
  .xa-site-nav a,.bar .nav a{min-height:40px;display:flex;align-items:center;padding:0;border-radius:0;
    color:var(--tql-ink-sub);font-size:12px;font-weight:700;letter-spacing:-.25px;white-space:nowrap}
  .xa-site-nav a:hover{background:var(--tql-action-weak);color:var(--tql-action)}
  .xa-site-nav a[aria-current="page"]{background:var(--tql-action-weak);color:var(--tql-action)}
  body.tq-manual .xa-go,body.tq-simulator .xa-go,body.tq-community #authArea{margin-right:190px}
  body.tq-manual #tq-lang,body.tq-community #tq-lang,body.tq-simulator #tq-lang{
    top:15px;right:clamp(32px,4vw,76px)}
  body.tq-community .fab{right:clamp(32px,4vw,76px)!important;bottom:40px!important}
}

@media(min-width:1024px) and (max-width:1180px){
  body.tq-manual .xa-bar,body.tq-simulator .xa-bar{padding-left:28px;padding-right:28px}
  body.tq-community .bar-in{padding-left:28px;padding-right:28px}
  .xa-site-nav,.bar .nav{gap:12px;margin-left:22px}
  .xa-site-nav a,.bar .nav a{font-size:11px}
  body.tq-manual .xa-go,body.tq-simulator .xa-go,body.tq-community #authArea{margin-right:172px}
}

@media(max-width:760px){
  .bar-in{min-height:56px;padding:10px 14px}
  body.tq-simulator .xa-bar .xa-go.alt{display:none}
  body.tq-simulator .hero{padding-top:20px}body.tq-simulator .grid{padding-top:22px}
  body.tq-manual .site-nav{min-height:56px}
  body.tq-community .wrap{padding:18px 14px 90px}
}