/* =========================================================================
   Signal — ROAS Calculator widget styles.
   Uses var(--token, fallback): if the Signal theme is active it inherits
   the exact same brand tokens automatically; on any other theme it falls
   back to the same values, so it always looks intentional and on-brand.
   ========================================================================= */
.src-calc{
  --src-bg:      var(--bg-elev, #111115);
  --src-bg-2:    var(--bg-elev-2, #16161B);
  --src-text:    var(--text, #F5F5F7);
  --src-muted:   var(--muted, #86868B);
  --src-line:    var(--line, rgba(255,255,255,.09));
  --src-line-2:  var(--line-strong, rgba(255,255,255,.16));
  --src-accent:  var(--accent, #0A84FF);
  --src-accent-2:var(--accent-2, #0066CC);
  --src-glow:    var(--accent-glow, rgba(10,132,255,.30));
  --src-grow:    var(--grow, #30D158);
  --src-stall:   var(--stall, #FF453A);
  --src-warn:    #FFD60A;
  --src-radius:  var(--radius, 18px);
  --src-font:    var(--font-body, "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif);
  --src-mono:    var(--font-mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace);
  --src-ease:    cubic-bezier(.22,1,.36,1);

  all: unset;
  display: block;
  box-sizing: border-box;
  font-family: var(--src-font);
  color: var(--src-text);
  background: var(--src-bg);
  border: 1px solid var(--src-line);
  border-radius: var(--src-radius);
  padding: clamp(1.3rem, 3vw, 2rem);
  max-width: 100%;
  position: relative;
  overflow: hidden;
}
.src-calc *, .src-calc *::before, .src-calc *::after{ box-sizing: border-box; }
.src-calc::before{
  content:""; position:absolute; inset:-30% 20% auto auto; height:60%; width:60%;
  background: radial-gradient(60% 60% at 70% 20%, var(--src-glow), transparent 70%);
  pointer-events:none; z-index:0;
}
.src-calc > *{ position:relative; z-index:1; }

.src-calc__head{ margin-bottom: 1.4rem; }
.src-eyebrow{
  font-family: var(--src-mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--src-accent); display:inline-flex; align-items:center; gap:.6ch; margin-bottom:.6rem;
}
.src-eyebrow::before{ content:""; width:22px; height:1px; background: var(--src-accent); opacity:.7; }
.src-calc h3{ font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight:800; line-height:1.15; margin:0 0 .5rem; letter-spacing:-.01em; }
.src-muted{ color: var(--src-muted); margin:0; font-size:.95rem; }

.src-hp{ position:absolute; left:-9999px; }

.src-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 3vw, 2rem); align-items:start; }
@media (max-width: 720px){ .src-grid{ grid-template-columns: 1fr; } }

.src-field{ margin-bottom: 1rem; }
.src-field label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:.35rem; }
.src-optional{ font-weight:400; color: var(--src-muted); font-size:.8rem; }
.src-input-wrap{
  display:flex; align-items:stretch; border:1px solid var(--src-line-2); border-radius:12px;
  background: var(--src-bg-2); overflow:hidden; transition: border-color .2s, box-shadow .2s;
}
.src-input-wrap:focus-within{ border-color: var(--src-accent); box-shadow: 0 0 0 3px var(--src-glow); }
.src-prefix, .src-suffix{
  display:flex; align-items:center; padding: 0 .7rem; color: var(--src-muted);
  font-family: var(--src-mono); font-size:.9rem; flex:none; user-select:none;
}
.src-input-wrap input{
  all:unset; box-sizing:border-box; width:100%; padding:.75rem .85rem; font: inherit; color: var(--src-text);
  font-family: var(--src-mono); font-size:1rem;
}
.src-input-wrap input::placeholder{ color: var(--src-muted); opacity:.6; }
/* hide native number spinners for a cleaner look, keep keyboard entry */
.src-input-wrap input[type=number]::-webkit-outer-spin-button,
.src-input-wrap input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.src-input-wrap input[type=number]{ -moz-appearance:textfield; }

.src-results{
  border:1px solid var(--src-line); border-radius: 14px; background: rgba(255,255,255,.03);
  padding: 1.3rem; min-height: 220px; display:flex; flex-direction:column; justify-content:center;
}
.src-placeholder{ color: var(--src-muted); font-size:.92rem; text-align:center; padding: 1rem; }

.src-result-row{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; margin-bottom:1rem; }
.src-result{
  border:1px solid var(--src-line); border-radius:12px; padding:.9rem 1rem; background: var(--src-bg-2);
}
.src-result--accent{ border-color: var(--src-accent); box-shadow: 0 0 0 1px var(--src-accent) inset; }
.src-result__label{
  display:flex; align-items:center; gap:.4ch; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;
  color: var(--src-muted); margin-bottom:.4rem; font-family: var(--src-mono);
}
.src-result--accent .src-result__label{ color: var(--src-accent); }
.src-result__num{ display:block; font-family: var(--src-mono); font-weight:700; font-size:1.6rem; color: var(--src-text); }
.src-result--accent .src-result__num{ color: var(--src-accent); }

.src-tip{
  all:unset; width:15px; height:15px; border-radius:50%; border:1px solid var(--src-line-2);
  display:inline-flex; align-items:center; justify-content:center; font-size:.62rem; line-height:1;
  color: var(--src-muted); cursor:help; position:relative; flex:none;
}
.src-tip:hover::after, .src-tip:focus-visible::after{
  content: attr(data-tip); position:absolute; bottom:130%; left:50%; transform:translateX(-50%);
  width:200px; max-width:60vw; background: var(--src-bg-2); border:1px solid var(--src-line-2);
  color: var(--src-text); font-size:.75rem; font-family: var(--src-font); font-weight:400;
  text-transform:none; letter-spacing:normal; padding:.6rem .7rem; border-radius:8px; z-index:5;
  box-shadow: 0 10px 30px -8px rgba(0,0,0,.5); pointer-events:none;
}

.src-cpa-row{
  display:flex; flex-wrap:wrap; gap:.5rem; font-family: var(--src-mono); font-size:.78rem;
  color: var(--src-muted); margin-bottom:1.1rem;
}
.src-cpa-row span{ background: var(--src-bg-2); border:1px solid var(--src-line); border-radius:8px; padding:.3rem .6rem; }
.src-cpa-row span:empty{ display:none; }

.src-scale{ margin-bottom:1.1rem; }
.src-scale__track{ position:relative; height:6px; border-radius:100px; background: var(--src-line-2); margin: 1.6rem .5rem .5rem; }
.src-scale__marker{ position:absolute; top:50%; transform:translate(-50%,-50%); width:12px; height:12px; border-radius:50%; }
.src-scale__marker span{
  position:absolute; top:-1.6rem; left:50%; transform:translateX(-50%); font-family: var(--src-mono);
  font-size:.65rem; white-space:nowrap; color: var(--src-muted);
}
.src-scale__marker--breakeven{ background: var(--src-stall); }
.src-scale__marker--profitable{ background: var(--src-accent); }
.src-scale__marker--current{ background: var(--src-grow); }
.src-scale__marker--current span{ color: var(--src-grow); font-weight:600; }

.src-status{
  border-radius:10px; padding:.7rem .9rem; font-size:.85rem; margin-bottom:1.1rem; line-height:1.5;
}
.src-status--losing{ background: color-mix(in srgb, var(--src-stall) 16%, transparent); border:1px solid var(--src-stall); }
.src-status--breakeven{ background: color-mix(in srgb, var(--src-warn) 16%, transparent); border:1px solid var(--src-warn); }
.src-status--below{ background: color-mix(in srgb, var(--src-warn) 16%, transparent); border:1px solid var(--src-warn); }
.src-status--profitable{ background: color-mix(in srgb, var(--src-grow) 16%, transparent); border:1px solid var(--src-grow); }

.src-error{
  background: color-mix(in srgb, var(--src-stall) 14%, transparent); border:1px solid var(--src-stall);
  border-radius:10px; padding:.9rem 1rem; font-size:.88rem; text-align:center;
}

.src-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5ch; width:100%;
  padding:.8rem 1.2rem; border-radius:100px; font-weight:600; font-size:.92rem; border:1px solid transparent;
  cursor:pointer; transition: transform .2s var(--src-ease), box-shadow .2s var(--src-ease), background .2s var(--src-ease);
  font-family: var(--src-font); text-decoration:none;
}
.src-btn:hover{ transform: translateY(-2px); }
.src-btn--primary{ background: var(--src-accent); color:#fff; box-shadow: 0 10px 26px -8px var(--src-glow); }
.src-btn--primary:hover{ background: var(--src-accent-2); }
.src-btn--ghost{ background: var(--src-bg-2); color: var(--src-text); border-color: var(--src-line-2); width:auto; flex:none; padding:.8rem 1.1rem; }
.src-btn--ghost:hover{ border-color: var(--src-accent); }
.src-cta{ margin-top:.3rem; }

.src-lead{ border-top:1px solid var(--src-line); padding-top:1rem; margin-bottom:1rem; }
.src-lead label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:.5rem; }
.src-lead__row{ display:flex; gap:.6rem; }
.src-lead__row input{
  all:unset; box-sizing:border-box; flex:1; min-width:0; border:1px solid var(--src-line-2); border-radius:10px;
  background: var(--src-bg-2); padding:.75rem .9rem; font: inherit; color: var(--src-text);
}
.src-lead__row input:focus{ border-color: var(--src-accent); box-shadow: 0 0 0 3px var(--src-glow); }
.src-btn[disabled]{ opacity:.6; cursor:default; transform:none; }
.src-lead__msg{ margin:.6rem 0 0; font-size:.82rem; color: var(--src-muted); }
.src-lead__msg--ok{ color: var(--src-grow); }
.src-lead__msg--err{ color: var(--src-stall); }

@media (prefers-reduced-motion: reduce){ .src-btn{ transition:none; } .src-btn:hover{ transform:none; } }