/* Scoped, builder-safe styles */

/* =========================
   Tokens (CSS Custom Props)
   ========================= */
.gsg-gsg-calculator{
  /* Brand + palette (with safe fallbacks to existing --gsg-* tokens) */
  --brand-primary: var(--gsg-primary, #0F172A);
  --brand-accent:  var(--gsg-accent,  #FF7A18);
  --brand-muted:   var(--gsg-muted,   #F4F6F8);
  --brand-text:    var(--gsg-text,    #0B1220);

  /* Surfaces + borders + text roles */
  --surface: var(--gsg-surface, #fff);
  --border-color: var(--gsg-border, #e5e7eb);
  --border-color-strong: var(--gsg-border-strong, #cbd5e1);
  --text-secondary: var(--gsg-text-secondary, #475569);
  --text-muted: var(--gsg-text-muted, #64748b);
  --label-color: var(--gsg-label, #334155);

  /* State colors */
  --success: var(--gsg-success, #16A34A);
  --danger: var(--gsg-danger, #DC2626);
  --danger-300: var(--gsg-danger-300, #F87171);
  --danger-100: var(--gsg-danger-100, #FEE2E2);

  /* Warning block */
  --warning-bg: var(--gsg-warning-bg, #FFF7ED);
  --warning-border: var(--gsg-warning-border, #FED7AA);
  --warning-text: var(--gsg-warning-text, #9A3412);

  /* Typography + radii + elevation */
  --font-sans: var(--gsg-font, system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif);
  --radius-lg: 12px;
  --radius-md: 10px;
  --radius-sm: 6px;
  --shadow: var(--gsg-shadow, 0 8px 28px rgba(0,0,0,.08));

  /* Focus ring (3:1+ contrast on default surfaces) */
  --focus-ring: var(--gsg-focus, var(--brand-accent));
  --focus-ring-offset: var(--gsg-focus-offset, 2px);

  /* Buttons */
  --btn-bg: var(--brand-accent);
  --btn-bg-hover: var(--brand-accent); /* refined in @supports */
  --ghost-hover-bg: rgba(15, 23, 42, 0.04); /* fallback based on primary */

  font-family: var(--font-sans);
  color: var(--brand-text);
}

/* Derived color enhancements where supported, preserving identity */
@supports (color: color-mix(in oklab, white, black)) {
  .gsg-gsg-calculator{
    /* Slightly deepen accent on hover */
    --btn-bg-hover: color-mix(in oklab, var(--brand-accent) 92%, black);
    /* Subtle primary-tinted ghost hover */
    --ghost-hover-bg: color-mix(in oklab, var(--brand-primary) 6%, transparent);
  }
}

/* =========================
   Base
   ========================= */
.gsg-gsg-calculator *{ box-sizing:border-box; }
.gsg-gsg-calculator .gsg-wrap{ max-width:1100px; margin:16px auto; padding:0 0 24px; }
.gsg-gsg-calculator .gsg-h1{ font-size:28px; margin:0 0 8px; color:var(--brand-primary); letter-spacing:-.02em; }
.gsg-gsg-calculator .gsg-lead{ margin:0 0 24px; color:var(--text-secondary); }

/* =========================
   Layout
   ========================= */
.gsg-gsg-calculator .gsg-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:980px){ .gsg-gsg-calculator .gsg-grid{ grid-template-columns:1.1fr 1fr; } }
.gsg-gsg-calculator .gsg-simple-grid{ grid-template-columns:1fr !important; }

.gsg-gsg-calculator .gsg-card{ background:var(--brand-muted); border-radius:var(--radius-lg); padding:12px; box-shadow:var(--shadow); }
.gsg-gsg-calculator .gsg-h2{ margin:4px 0 10px; font-size:17px; color:var(--brand-primary); font-weight:700; letter-spacing:-.01em; }

.gsg-gsg-calculator .gsg-row{ display:grid; grid-template-columns:1fr 120px; gap:6px; align-items:center; margin:6px 0; }
.gsg-gsg-calculator .gsg-row > *{ min-width:0; } /* prevent overflow in grid items */

.gsg-gsg-calculator .gsg-row label{
  font-size:12px; color:var(--label-color);
  display:flex; flex-direction:column; gap:2px; align-items:flex-start;
  line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  overflow-wrap:anywhere; /* activates when white-space becomes normal on small screens */
}

.gsg-gsg-calculator .gsg-hint{ display:block; font-size:10px; color:var(--text-muted); white-space:normal; }

.gsg-gsg-calculator .gsg-row input{
  width:100%; padding:4px 8px; border-radius:var(--radius-sm);
  border:1px solid var(--border-color); background:var(--surface); font-size:12px;
}

/* Stack labels above inputs for COGS and below */
.gsg-gsg-calculator .gsg-stack .gsg-row{ grid-template-columns:1fr; align-items:flex-start; margin:8px 0; }
.gsg-gsg-calculator .gsg-stack .gsg-two{ gap:10px; }
.gsg-gsg-calculator .gsg-stack .gsg-row input{ width:120px; }

.gsg-gsg-calculator .gsg-two{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }

/* =========================
   Components
   ========================= */
.gsg-gsg-calculator .gsg-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; background:var(--btn-bg); color:#fff; border-radius:999px;
  border:0; cursor:pointer; font-weight:600;
  transition: background-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.gsg-gsg-calculator .gsg-ghost{ background:transparent; color:var(--brand-primary); border:1px solid var(--border-color); }
.gsg-gsg-calculator .gsg-btn-small{ padding:6px 10px; font-size:12px; }
.gsg-gsg-calculator .gsg-btn-block{ width:100%; }

.gsg-gsg-calculator .gsg-outputs{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:700px){ .gsg-gsg-calculator .gsg-outputs:not(.gsg-simple-outputs){ grid-template-columns:1fr 1fr; } }

.gsg-gsg-calculator .gsg-kpi{ padding:16px; border-radius:12px; background:var(--surface); border:1px solid var(--border-color); }
.gsg-gsg-calculator .gsg-kpi h3{
  margin:0 0 6px; font-size:12px; color:var(--text-secondary); font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; overflow-wrap:anywhere;
}
.gsg-gsg-calculator .gsg-num{ font-size:28px; font-weight:800; letter-spacing:-.02em; word-break:break-word; }
.gsg-gsg-calculator .gsg-num.gsg-pos{ color:var(--success); }
.gsg-gsg-calculator .gsg-num.gsg-neg{ color:var(--danger); }

.gsg-gsg-calculator .gsg-sep{ height:1px; background:var(--border-color); margin:12px 0; }
.gsg-gsg-calculator .gsg-foot{ font-size:12px; color:var(--text-muted); margin-top:8px; }

.gsg-gsg-calculator .gsg-warning{
  background:var(--warning-bg); border:1px solid var(--warning-border);
  padding:10px 12px; border-radius:var(--radius-md); color:var(--warning-text); font-size:13px; display:none;
}

/* Invalid input baseline */
.gsg-gsg-calculator .gsg-row input.gsg-invalid{ border-color:var(--danger-300); box-shadow:0 0 0 2px var(--danger-100); }

/* =========================
   Responsive
   ========================= */
@media (max-width:640px){
  .gsg-gsg-calculator .gsg-row{ grid-template-columns:1fr; }
  .gsg-gsg-calculator .gsg-two{ grid-template-columns:1fr; }
  .gsg-gsg-calculator .gsg-row label{ white-space:normal; flex-wrap:wrap; }
  .gsg-gsg-calculator .gsg-hint{ display:block; white-space:normal; }
  .gsg-gsg-calculator .gsg-stack .gsg-row input{ width:100%; }
  .gsg-gsg-calculator .gsg-kpi h3{ white-space:normal; } /* allow wrap on small screens */
}

/* Simple mode: horizontal input bar */
.gsg-gsg-calculator .gsg-simple-top{ display:flex; flex-wrap:wrap; gap:10px 14px; align-items:end; }
.gsg-gsg-calculator .gsg-simple-top .gsg-row{ min-width:clamp(180px, 40vw, 280px); margin:4px 0; flex:1 1 clamp(180px, 40vw, 280px); }

/* Simple mode: side-by-side layout for inputs (left) and KPI (right) */
.gsg-gsg-calculator .gsg-simple-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 768px) {
  .gsg-gsg-calculator .gsg-simple-row {
    grid-template-columns: 1fr;
  }
}

.gsg-gsg-calculator .gsg-simple-right .gsg-h2{ margin-top:0; }

/* Gear icon advanced dropdown */
.gsg-gsg-calculator .gsg-gear{ position:absolute; bottom:4px; left:12px; }
.gsg-gsg-calculator .gsg-gear-btn{ display:inline-flex; align-items:center; justify-content:center; width:auto; height:auto; border-radius:0; border:0; background:transparent; cursor:pointer; font-size:20px; line-height:1; color:var(--text-muted); }
.gsg-gsg-calculator .gsg-gear-btn::-webkit-details-marker{ display:none; }
.gsg-gsg-calculator .gsg-gear[open] .gsg-gear-btn{ background:transparent; }
.gsg-gsg-calculator .gsg-gear-panel{
  z-index:10; position:absolute; bottom:100%; left:0; margin-bottom:8px; padding:12px;
  background:var(--surface); border:1px solid var(--border-color); border-radius:var(--radius-md); box-shadow:var(--shadow);
  min-width:280px; max-width: min(90vw, 420px); width: max(280px, 60vw); overflow:auto; overscroll-behavior:contain;
}
/* Inside gear panel: stack labels above inputs to avoid overlap */
.gsg-gsg-calculator .gsg-gear-panel .gsg-two{ grid-template-columns:1fr; }
.gsg-gsg-calculator .gsg-gear-panel .gsg-row{ grid-template-columns:1fr; align-items:flex-start; }
.gsg-gsg-calculator .gsg-gear-panel .gsg-row label{ white-space:normal; }
.gsg-gsg-calculator .gsg-gear-panel .gsg-row input{ width:100%; }

/* Outputs: default responsive grid */
.gsg-gsg-calculator .gsg-outputs.gsg-3{ grid-template-columns:1fr; }
@media (min-width:700px){ .gsg-gsg-calculator .gsg-outputs.gsg-3{ grid-template-columns:repeat(3,1fr); } }
/* In simple right column we only have one KPI */
.gsg-gsg-calculator .gsg-simple-left{ position:relative; padding-bottom:32px; }
.gsg-gsg-calculator .gsg-simple-left, .gsg-gsg-calculator .gsg-simple-right { min-width: 0; }

/* =========================
   States (hover/active/disabled)
   ========================= */
.gsg-gsg-calculator .gsg-btn:hover{ background:var(--btn-bg-hover); }
.gsg-gsg-calculator .gsg-ghost:hover{ background:var(--ghost-hover-bg); border-color:var(--border-color-strong); }
.gsg-gsg-calculator .gsg-btn:active{ filter: brightness(0.98); }
.gsg-gsg-calculator .gsg-ghost:active{ background:var(--ghost-hover-bg); }
.gsg-gsg-calculator .gsg-btn:disabled, .gsg-gsg-calculator .gsg-btn[disabled]{ background:var(--border-color); color:var(--text-secondary); cursor:not-allowed; box-shadow:none; }
.gsg-gsg-calculator .gsg-ghost:disabled, .gsg-gsg-calculator .gsg-ghost[disabled]{ color:var(--text-muted); border-color:var(--border-color); background:transparent; cursor:not-allowed; opacity:.75; }
.gsg-gsg-calculator .gsg-row input:disabled, .gsg-gsg-calculator .gsg-row input[disabled], .gsg-gsg-calculator .gsg-row input[readonly]{ background:var(--brand-muted); color:var(--text-muted); border-color:var(--border-color); }

/* =========================
   Focus indicators (A11y)
   ========================= */
.gsg-gsg-calculator :is(button.gsg-btn, .gsg-ghost, input, .gsg-gear-btn):focus{ outline:none; }
.gsg-gsg-calculator :is(button.gsg-btn, .gsg-ghost, input, .gsg-gear-btn):focus-visible{ outline:2px solid var(--focus-ring); outline-offset:var(--focus-ring-offset); }
/* Stronger ring for filled button over colored background */
.gsg-gsg-calculator .gsg-btn:focus-visible{ box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--focus-ring); }
/* Invalid + focus synergy */
.gsg-gsg-calculator .gsg-row input.gsg-invalid:focus-visible{ outline-color:var(--danger); box-shadow:0 0 0 2px var(--danger-100), 0 0 0 4px var(--danger); }

/* =========================
   A11y / Media Queries
   ========================= */
@media (prefers-reduced-motion: reduce){
  .gsg-gsg-calculator *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

@media (forced-colors: active){
  .gsg-gsg-calculator .gsg-row input{ border:1px solid CanvasText; background:Canvas; color:CanvasText; }
  .gsg-gsg-calculator .gsg-btn{ background:ButtonFace; color:ButtonText; border:1px solid CanvasText; }
  .gsg-gsg-calculator .gsg-ghost{ background:Canvas; color:ButtonText; border:1px solid CanvasText; }
  .gsg-gsg-calculator :is(button.gsg-btn, .gsg-ghost, input, .gsg-gear-btn):focus-visible{ outline:2px solid Highlight; outline-offset:2px; }
  .gsg-gsg-calculator .gsg-kpi{ border:1px solid CanvasText; background:Canvas; color:CanvasText; }
  .gsg-gsg-calculator .gsg-warning{ border:1px solid CanvasText; }
}