/* ================================================================
 * COMPONENTS  |  Law of Loss Trading Platform  v0.4
 * ================================================================
 * Changes from v0.3:
 *   H4  Field state system: .field-done, .field-error, error labels
 *   H5  Contrast: label colours now use --text-2 (darker)
 *   H7  metrics-row now 5-cell grid; pos-size-hero removed
 * ================================================================ */

/* ── Direction toggle (Buy / Sell radio pill) ─────────────── */
.direction-toggle {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  border:                1px solid var(--border);
  border-radius:         var(--radius-sm);
  overflow:              hidden;
}

/* Visually hidden but still focusable & keyboard-operable (was display:none,
 * which removed it from the tab order and broke keyboard selection). */
.direction-toggle input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

/* Keyboard focus indicator on the visible label */
.direction-toggle input[type="radio"]:focus-visible + label {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.direction-toggle label {
  margin:         0;
  padding:        10px 0;
  text-align:     center;
  font-size:      14px;
  font-weight:    600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color:          var(--text-3);
  background:     var(--surface-2);
  cursor:         pointer;
  transition:     all 0.15s;
  border:         none;
}

.direction-toggle label:first-of-type { border-right: 1px solid var(--border); }

.direction-toggle input[type="radio"]:checked + label {
  background: var(--surface-3);
  color:      var(--text);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* ── Output card (risk metrics + loss hero) ───────────────── */
.output-card {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow:      hidden;
  box-shadow:    var(--shadow);
}

/* ── Four-cell metrics row (Position Size promoted to .qty-hero) ── */
.metrics-row {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  border-bottom:         1px solid var(--border);
}

.metric-cell {
  padding:      0.85rem 0.6rem;
  border-right: 1px solid var(--border);
}

.metric-cell:last-child { border-right: none; }

/* H5: darker label colour */
.metric-label {
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color:          var(--text-3);
  margin-bottom:  5px;
}

.metric-value {
  font-family: var(--font-mono);
  font-size:   13px;
  font-weight: 600;
  color:       var(--text);
}

.metric-value.empty { color: var(--border-2); }

/* RRR cell: green tint */
.rrr-cell .metric-value       { color: var(--green-md); }
.rrr-cell .metric-value.empty { color: var(--border-2); }

/* Potential Loss hero block */
.loss-hero {
  background:  var(--loss-bg);
  padding:     1.4rem 1.25rem;
  text-align:  center;
  border-top:  2px solid var(--loss-border);
}

.loss-hero-eyebrow {
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--loss-red);
  opacity:        0.7;
  margin-bottom:  6px;
}

.loss-hero-amount {
  font-family:    var(--font-mono);
  font-size:      2.6rem;
  font-weight:    700;
  color:          var(--loss-red);
  line-height:    1;
  letter-spacing: -0.02em;
}

.loss-hero-amount.empty { color: var(--border-2); font-size: 2rem; }

/* H5: darker caption */
.loss-hero-caption { font-size: 12px; color: var(--text-3); margin-top: 6px; }

@media (min-width: 640px) {
  .loss-hero-amount { font-size: 3.2rem; }
}

/* H7: pos-size-hero retained for success screen summary only */
.pos-size-hero {
  padding:         1rem 1.25rem;
  background:      var(--surface-2);
  border-top:      1px solid var(--border);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             1rem;
}

.pos-size-label {
  font-size:      11px;
  font-weight:    600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--text-3);
}

.pos-size-value {
  font-family: var(--font-mono);
  font-size:   1.6rem;
  font-weight: 700;
  color:       var(--text);
}

.pos-size-value.empty { color: var(--border-2); }
.pos-size-unit        { font-size: 12px; color: var(--text-3); margin-top: 2px; }

@media (min-width: 640px) {
  .pos-size-value { font-size: 2rem; }
}

/* 4-col responsive — wraps to a clean 2×2 grid on narrow screens */
@media (max-width: 560px) {
  .metrics-row               { grid-template-columns: 1fr 1fr; }
  .metric-cell:nth-child(2)  { border-right: none; }
  .metric-cell:nth-child(3),
  .metric-cell:nth-child(4)  { border-top: 1px solid var(--border); }
  .metric-cell:nth-child(4)  { border-right: none; }
}

/* ── H4: Field state system ───────────────────────────────── */

/* Completed field: green border + tinted background */
input.field-done,
select.field-done {
  border-color: var(--field-done-border);
  background:   var(--field-done-bg);
}

/* Error field: red border + tinted background */
input.field-error,
select.field-error {
  border-color: var(--field-error-border);
  background:   var(--field-error-bg);
}

/* Error label: turns red when paired with .label-error class */
label.label-error {
  color: var(--field-error-text);
}

/* Inline field-level error message */
.field-msg {
  font-size:   11px;
  margin-top:  4px;
  display:     none;
  line-height: 1.4;
}

.field-msg.visible        { display: block; }
.field-msg.field-msg-error { color: var(--field-error-text); }

/* ── Commitment card (Section 4 of Screen 1) ──────────────── */
.commitment-card {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       1.25rem;
  box-shadow:    var(--shadow);
}

.commitment-statement {
  font-family:   var(--font-body);
  font-size:     1.05rem;
  line-height:   1.65;
  color:         var(--text-2);
  margin-bottom: 1.1rem;
  padding:       1rem;
  background:    var(--surface-2);
  border-radius: var(--radius-sm);
  border-left:   3px solid var(--loss-red);
}

.commitment-statement .loss-amount {
  font-family: var(--font-mono);
  font-weight: 700;
  color:       var(--loss-red);
  font-size:   1.1em;
}

.checkbox-row {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  margin-bottom: 1.25rem;
  cursor:      pointer;
}

.checkbox-row input[type="checkbox"] {
  width:       18px;
  height:      18px;
  flex-shrink: 0;
  margin-top:  2px;
  accent-color: var(--accent);
  cursor:      pointer;
}

/* H5: darker checkbox label */
.checkbox-label { font-size: 14px; color: var(--text-2); line-height: 1.5; cursor: pointer; }

/* ── Button row (Clear + CTA side by side) ────────────────── */
.btn-row {
  display:     flex;
  gap:         10px;
  align-items: stretch;
}

@media (max-width: 360px) {
  .btn-row             { flex-direction: column; }
  .btn-row .clear-btn  { width: 100%; }
}

/* ── Clear Form button ────────────────────────────────────── */
.clear-btn {
  flex:          0 0 auto;
  padding:       14px 16px;
  background:    transparent;
  color:         var(--text-3);
  border:        1px solid var(--border);
  border-radius: var(--radius-md);
  font-family:   var(--font-ui);
  font-size:     14px;
  font-weight:   500;
  cursor:        pointer;
  transition:    all 0.15s;
  white-space:   nowrap;
  -webkit-appearance: none;
}

.clear-btn:hover  { background: var(--surface-2); color: var(--text-2); border-color: var(--border-2); }
.clear-btn:active { transform: scale(0.97); }

/* ── Primary CTA (green, Screen 1) ───────────────────────── */
.cta-btn {
  flex:          1;
  padding:       14px 1rem;
  background:    var(--btn-bg);
  color:         var(--btn-text);
  border:        none;
  border-radius: var(--radius-md);
  font-family:   var(--font-ui);
  font-size:     15px;
  font-weight:   600;
  letter-spacing: 0.02em;
  cursor:        pointer;
  box-shadow:    none;
  transition:    all var(--t) var(--ease);
  -webkit-appearance: none;
}

.cta-btn:disabled               { background: var(--surface-2); color: var(--text-3); cursor: not-allowed; border: 1px solid var(--border); box-shadow: none; }
.cta-btn:not(:disabled):hover   { background: var(--btn-bg-hover); }
.cta-btn:not(:disabled):active  { opacity: 0.92; }

/* ── Primary button (blue, Screen 2 execute) ──────────────── */
.primary-btn {
  width:         100%;
  padding:       14px 1rem;
  background:    var(--btn-bg);
  color:         var(--btn-text);
  border:        none;
  border-radius: var(--radius-md);
  font-family:   var(--font-ui);
  font-size:     15px;
  font-weight:   600;
  letter-spacing: 0.02em;
  cursor:        pointer;
  box-shadow:    none;
  transition:    all var(--t) var(--ease);
  -webkit-appearance: none;
}

.primary-btn:disabled              { background: var(--surface-2); color: var(--text-3); cursor: not-allowed; border: 1px solid var(--border); box-shadow: none; }
.primary-btn:not(:disabled):hover  { background: var(--btn-bg-hover); }
.primary-btn:not(:disabled):active { opacity: 0.92; }

/* ── H6: Trade Complete button (was "Close Trade") ────────── */
.close-btn {
  width:         100%;
  padding:       14px 1rem;
  background:    var(--btn-bg);
  color:         var(--btn-text);
  border:        none;
  border-radius: var(--radius-md);
  font-family:   var(--font-ui);
  font-size:     15px;
  font-weight:   600;
  cursor:        pointer;
  box-shadow:    none;
  transition:    all var(--t) var(--ease);
  -webkit-appearance: none;
}

.close-btn:disabled              { background: var(--surface-2); color: var(--text-3); cursor: not-allowed; border: 1px solid var(--border); box-shadow: none; }
.close-btn:not(:disabled):hover  { background: var(--btn-bg-hover); }

/* ── Ghost / outline button ───────────────────────────────── */
.ghost-btn {
  width:         100%;
  padding:       13px;
  background:    transparent;
  color:         var(--text-2);
  border:        1px solid var(--border-2);
  border-radius: var(--radius-md);
  font-family:   var(--font-ui);
  font-size:     14px;
  font-weight:   600;
  cursor:        pointer;
  margin-top:    0.75rem;
  transition:    all 0.15s;
}

.ghost-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-2); }

/* ── Back-button link ─────────────────────────────────────── */
.back-btn { color: var(--blue-md); }
.back-btn:hover { color: var(--text); }

/* ── Success header block ─────────────────────────────────── */
.success-header {
  padding:    2rem 1.25rem 1.5rem;
  text-align: center;
}

.success-header h2 {
  font-family:   var(--font-body);
  font-size:     1.4rem;
  font-weight:   400;
  color:         var(--text);
  margin-bottom: 6px;
}

.success-header .trade-id-display {
  font-family: var(--font-mono);
  font-size:   13px;
  opacity:     0.85;
}

.success-checkmark {
  width:         52px;
  height:        52px;
  border-radius: 50%;
  background:    var(--profit-bg);
  border:        1px solid var(--profit-border);
  margin:        0 auto 1rem;
  display:       flex;
  align-items:   center;
  justify-content: center;
}

.success-checkmark svg { display: block; }

/* ── Risk context panel (Screen 2 top read-only area) ─────── */
.risk-context {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow:      hidden;
  box-shadow:    var(--shadow);
  margin-top:    1.5rem;
}

.risk-context-header {
  padding:         0.85rem 1.1rem;
  background:      var(--surface-2);
  border-bottom:   1px solid var(--border);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

.risk-context-title {
  font-size:      11px;
  font-weight:    600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--text-3);
}

.context-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
}

.context-cell {
  padding:       0.8rem 1rem;
  border-right:  1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.context-cell:nth-child(even)      { border-right: none; }
.context-cell:nth-last-child(-n+2) { border-bottom: none; }

/* H5: darker context labels */
.context-label {
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color:          var(--text-3);
  margin-bottom:  4px;
}

.context-value      { font-size: 14px; font-weight: 700; color: var(--text); }
.context-value.mono { font-family: var(--font-mono); font-weight: 700; color: var(--text); }

.planned-risk-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         0.8rem 1rem;
  border-top:      1px solid var(--border);
  background:      var(--loss-bg);
  gap:             1rem;
}

.planned-risk-label {
  font-size:      11px;
  font-weight:    600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--loss-red);
  opacity:        0.8;
}

.planned-risk-value {
  font-family: var(--font-mono);
  font-size:   18px;
  font-weight: 700;
  color:       var(--loss-red);
}

@media (max-width: 480px) {
  .context-grid                      { grid-template-columns: 1fr; }
  .context-cell                      { border-right: none !important; }
  .context-cell:nth-last-child(-n+2) { border-bottom: 1px solid var(--border); }
  .context-cell:last-child           { border-bottom: none; }
}

/* ── P&L result card (Section B preview + closed summary) ─── */
.calc-result-card {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow:      hidden;
  box-shadow:    var(--shadow);
}

.result-hero {
  padding:    1.4rem 1.25rem;
  text-align: center;
}

.result-hero.profit  { background: var(--profit-bg);  border-top: 2px solid var(--profit-border); }
.result-hero.loss    { background: var(--loss-bg);    border-top: 2px solid var(--loss-border);   }
.result-hero.neutral { background: var(--surface-2);  border-top: 2px solid var(--border);        }

.result-eyebrow {
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom:  6px;
  opacity:        0.7;
}

.result-hero.profit  .result-eyebrow { color: var(--profit-green); }
.result-hero.loss    .result-eyebrow { color: var(--loss-red);     }
.result-hero.neutral .result-eyebrow { color: var(--text-3);       }

.result-amount {
  font-family:    var(--font-mono);
  font-size:      2.6rem;
  font-weight:    700;
  line-height:    1;
  letter-spacing: -0.02em;
}

.result-hero.profit  .result-amount { color: var(--profit-green); }
.result-hero.loss    .result-amount { color: var(--loss-red);     }
.result-hero.neutral .result-amount { color: var(--text-3); font-size: 2rem; }

.result-caption { font-size: 12px; color: var(--text-3); margin-top: 6px; }

.result-metrics {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-top:            1px solid var(--border);
}

.result-metric {
  padding:      0.85rem 0.75rem;
  border-right: 1px solid var(--border);
}

.result-metric:last-child { border-right: none; }

/* H5: darker metric labels */
.result-metric-label {
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color:          var(--text-3);
  margin-bottom:  5px;
}

.result-metric-value {
  font-family: var(--font-mono);
  font-size:   14px;
  font-weight: 600;
  color:       var(--text);
}

@media (min-width: 640px) {
  .result-amount { font-size: 3.2rem; }
}

@media (max-width: 480px) {
  .result-metrics           { grid-template-columns: 1fr; }
  .result-metric            { border-right: none; border-bottom: 1px solid var(--border); }
  .result-metric:last-child { border-bottom: none; }
}

/* ── H3: Lot size helper row ──────────────────────────────── */
.lot-size-row {
  display:    none;           /* shown by JS when category needs lots */
  margin-top: 1rem;
}

.lot-size-row.visible { display: block; }

.lot-calc-display {
  margin-top:    0.5rem;
  padding:       8px 12px;
  background:    var(--surface-2);
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size:     13px;
  color:         var(--text-2);
  font-family:   var(--font-mono);
}

/* ── Review navigation button (used on Screen 2 closed summary) ─ */
/* Purple palette values are inlined here so this button works
   without screen3.css being loaded on execution.html.            */
.review-btn {
  width:         100%;
  padding:       14px 1rem;
  background:    var(--btn-bg);
  color:         var(--btn-text);
  border:        none;
  border-radius: var(--radius-md);
  font-family:   var(--font-ui);
  font-size:     15px;
  font-weight:   600;
  cursor:        pointer;
  margin-top:    1.5rem;
  box-shadow:    none;
  transition:    all var(--t) var(--ease);
  -webkit-appearance: none;
}

.review-btn:hover { background: var(--btn-bg-hover); }