/* Position Size Calculator — pro trader UI */

.tool-page.pos-page .hero h1{
  font-weight:500;
  letter-spacing:-0.02em;
  color:var(--text);
}

.tool-page.pos-page .pos-calculator{
  position:relative;
}

/* Direction segmented control */
.tool-page.pos-page .pos-side-toggle{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:22px;
  padding:4px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--menu-bg);
}

.tool-page.pos-page .pos-side-btn{
  min-height:44px;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid transparent;
  background:transparent;
  color:var(--muted);
  font-family:var(--f-sans,'Montserrat',sans-serif);
  font-size:14px;
  font-weight:600;
  letter-spacing:-0.01em;
  cursor:pointer;
  transition:background 150ms ease,border-color 150ms ease,color 150ms ease,box-shadow 150ms ease;
}

.tool-page.pos-page .pos-side-btn:hover:not(.is-active){
  color:var(--text);
  background:var(--hover);
}

.tool-page.pos-page .pos-side-btn:focus-visible{
  outline:2px solid var(--ring);
  outline-offset:2px;
}

.tool-page.pos-page .pos-side-btn.is-active[data-side="long"]{
  color:#22c55e;
  background:rgba(34,197,94,0.12);
  border-color:rgba(34,197,94,0.35);
  box-shadow:0 0 20px rgba(34,197,94,0.12);
}

.tool-page.pos-page .pos-side-btn.is-active[data-side="short"]{
  color:#ef4444;
  background:rgba(239,68,68,0.12);
  border-color:rgba(239,68,68,0.35);
  box-shadow:0 0 20px rgba(239,68,68,0.12);
}

/* Input grid — row pairs */
.tool-page.pos-page .pos-grid-2{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}

@media (min-width:768px){
  .tool-page.pos-page .pos-grid-2{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px;
  }
}

.tool-page.pos-page .pos-field label{
  display:block;
  margin-bottom:6px;
  font-weight:500;
  font-size:14px;
  color:var(--text);
}

.tool-page.pos-page .pos-optional{
  font-weight:400;
  font-size:12px;
  color:var(--muted);
}

.tool-page.pos-page .pos-field .input{
  font-family:'JetBrains Mono',monospace;
  font-size:14px;
  min-height:var(--control-h);
  background:var(--menu-bg);
  border-color:var(--border);
  transition:border-color 150ms ease,box-shadow 150ms ease;
}

.tool-page.pos-page .pos-field .input:focus{
  border-color:var(--brand-cyan-border);
  box-shadow:0 0 0 3px var(--brand-cyan-dim);
}

.tool-page.pos-page .pos-field .chips{
  margin-top:8px;
}

.tool-page.pos-page .pos-field--spacer{
  display:none;
}

@media (min-width:768px){
  .tool-page.pos-page .pos-field--spacer{
    display:block;
  }
}

/* Calculate CTA */
.tool-page.pos-page .pos-action-wrap{
  margin-top:22px;
  padding-top:22px;
  border-top:1px solid var(--border);
}

.tool-page.pos-page .pos-action-bar{
  display:flex;
  justify-content:center;
}

.tool-page.pos-page .pos-action-bar .btn-primary-gradient{
  width:100%;
  max-width:400px;
  min-height:48px;
  font-size:15px;
}

/* Results dashboard */
.tool-page.pos-page .pos-results{
  margin-top:8px;
}

.tool-page.pos-page .pos-result-card{
  position:relative;
  padding:16px;
  border-radius:14px;
  border:1px solid var(--brand-cyan-border);
  background:var(--brand-navy-20);
  box-shadow:0 0 32px var(--brand-cyan-dim);
  overflow:hidden;
}
@media (min-width:768px){
  .tool-page.pos-page .pos-result-card{ padding:20px; }
}

.tool-page.pos-page .pos-result-card::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,var(--brand-cyan-dim),transparent 55%);
  pointer-events:none;
}

.tool-page.pos-page .pos-result-inner{
  position:relative;
  z-index:1;
}

.tool-page.pos-page .pos-result-eyebrow{
  margin:0 0 14px;
  font-size:12px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--muted);
}

.tool-page.pos-page .pos-result-eyebrow.is-long{
  color:#22c55e;
}

.tool-page.pos-page .pos-result-eyebrow.is-short{
  color:#ef4444;
}

.tool-page.pos-page .pos-stat-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

@media (min-width:540px){
  .tool-page.pos-page .pos-stat-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (min-width:768px){
  .tool-page.pos-page .pos-stat-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .tool-page.pos-page .pos-stat--wide{
    grid-column:1 / -1;
  }
}

.tool-page.pos-page .pos-stat{
  padding:14px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--menu-bg);
}

.tool-page.pos-page .pos-stat-label{
  display:block;
  margin-bottom:6px;
  font-size:11px;
  font-weight:500;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--muted);
}

.tool-page.pos-page .pos-stat-value{
  display:block;
  font-family:'JetBrains Mono',monospace;
  font-size:18px;
  font-weight:500;
  line-height:1.25;
  letter-spacing:-0.02em;
  color:var(--text);
  word-break:break-word;
  overflow-wrap:break-word;
}
@media (min-width:768px){
  .tool-page.pos-page .pos-stat-value{ font-size:20px; }
}

.tool-page.pos-page .pos-stat--wide .pos-stat-value{
  font-size:20px;
}
@media (min-width:768px){
  .tool-page.pos-page .pos-stat--wide .pos-stat-value{ font-size:22px; }
}

.tool-page.pos-page .pos-stat-sub{
  display:block;
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
}

.tool-page.pos-page .pos-stat-value--loss{
  color:#ef4444;
}

.tool-page.pos-page .pos-stat-value--reward{
  color:#22c55e;
}

.tool-page.pos-page .pos-result-inner .warn,
.tool-page.pos-page .pos-result-inner .ok{
  margin-top:12px;
}

@media (prefers-reduced-motion: reduce){
  .tool-page.pos-page .pos-field .input,
  .tool-page.pos-page .pos-side-btn{
    transition:none;
  }
}