/* ===================== Tech Calculators: Core Design Tokens ===================== */
/*time change*/
.tcx{
  --tc-fg:#0f172a;            /* slate-900 */
  --tc-fg-muted:#64748b;      /* slate-500 */
  --tc-bg:#ffffff;
  --tc-surface:#ffffff;
  --tc-border:#e2e8f0;        /* slate-200 */

  /* Brand */
  --tc-accent:#018ccf;        /* Primary */
  --tc-accent-solid:#0077af;  /* Darker for white-on-blue AA in filled buttons */
  --tc-secondary:#35b4ab;     /* Secondary (use with dark text) */

  --tc-accent-weak:rgba(1,140,207,.10);
  --tc-accent-ring:rgba(1,140,207,.35);

  --tc-success:#16a34a;
  --tc-danger:#ef4444;

  /* If color-mix isn’t supported, these are ignored; fallbacks appear later */
  --tc-chip-bg:color-mix(in oklab, var(--tc-accent) 10%, transparent);
  --tc-result-bg:color-mix(in oklab, var(--tc-accent) 8%, transparent);

  --tc-r-xs:6px;
  --tc-r-sm:10px;
  --tc-r-md:12px;
  --tc-r-lg:16px;
  --tc-r-2xl:20px;

  --tc-shadow-sm:0 1px 2px rgba(0,0,0,.04);
  --tc-shadow-md:0 6px 20px rgba(0,0,0,.08);

  --tc-font-sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
  --tc-font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;

  --tc-text-xs:12px;
  --tc-text-sm:14px;
  --tc-text-md:16px;
  --tc-text-lg:20px;

  --tc-line:1.4;
  --tc-ring:0 0 0 4px var(--tc-accent-ring);

  /* Component helpers */
  --tc-radius:14px;
  --tc-radius-sm:10px;
  --tc-focus:0 0 0 3px var(--tc-accent-ring);
  --tc-gap:12px;

  /* Spacing scale (8pt-ish) */
  --tc-s-1:4px;
  --tc-s-2:8px;
  --tc-s-3:12px;
  --tc-s-4:16px;
  --tc-s-5:24px;
  --tc-s-6:32px;
}

/* Dark theme */
@media (prefers-color-scheme: dark){
  .tcx{
    --tc-fg:#e5e7eb;
    --tc-fg-muted:#9ca3af;
    --tc-bg:#0b1020;
    --tc-surface:#0f172a;
    --tc-border:#1f2937;

    /* Keep the same brand hues; slightly lighter weak tint for contrast */
    --tc-accent:#29aee0;
    --tc-accent-solid:#0077af;         /* still AA vs white */
    --tc-secondary:#35b4ab;

    --tc-accent-weak:rgba(41,174,224,.14);
    --tc-accent-ring:rgba(41,174,224,.35);
    --tc-result-bg:rgba(41,174,224,.12);
    --tc-chip-bg:rgba(41,174,224,.14);
  }
}

/* ===================== Base ===================== */
.tcx{font-family:var(--tc-font-sans,ui-sans-serif,system-ui); color:var(--tc-fg,#0f172a);}
.tcx .card{
  background:var(--tc-surface,#fff);
  border:1px solid var(--tc-border,#e2e8f0);
  border-radius:var(--tc-r-md,12px);
  padding:14px;
  box-shadow:var(--tc-shadow-sm);
}
.tcx .btn{
  border:1px solid var(--tc-border,#e2e8f0);
  background:transparent;
  color:var(--tc-fg,#0f172a);
  padding:8px 12px;
  border-radius:var(--tc-r-sm,10px);
  cursor:pointer;
}
.tcx .btn:focus-visible{outline:0; box-shadow:var(--tc-ring); border-color:var(--tc-accent,#018ccf);}
.tcx .btn.primary{background:var(--tc-accent-solid,#0077af); color:#fff; border-color:transparent;}
.tcx .mut{color:var(--tc-fg-muted,#64748b);}

.tcx input,.tcx select{
  background:transparent; color:var(--tc-fg,#0f172a);
  border:1px solid var(--tc-border,#e2e8f0);
  border-radius:var(--tc-r-md,12px);
  padding:12px 14px;
  font-feature-settings:"tnum" 1,"cv05" 1;
  min-height:44px;
}
.tcx input:focus-visible,.tcx select:focus-visible{outline:0; box-shadow:var(--tc-ring); border-color:var(--tc-accent,#018ccf);}
.tcx input::placeholder,.tcx textarea::placeholder{color:var(--tc-fg-muted) !important; -webkit-text-fill-color:var(--tc-fg-muted) !important; opacity:1 !important;}
.tcx input,.tcx textarea{color:var(--tc-fg); -webkit-text-fill-color:var(--tc-fg); opacity:1;}
.tcx .out-strong output{
  background:var(--tc-result-bg,rgba(1,140,207,.08));
  border:1px solid var(--tc-border,#e2e8f0);
  border-radius:var(--tc-r-md,12px);
  padding:14px 16px; font-weight:600;
}

/* Legacy aliases */
.tcx{--fg:var(--tc-fg); --mut:var(--tc-fg-muted); --bd:var(--tc-border); --ac:var(--tc-accent); --ring:var(--tc-accent-ring); --result-bg:var(--tc-result-bg);}

/* ===================== Layout helpers ===================== */
.tcx .tc-container{display:grid; gap:var(--tc-gap);}
@media (min-width:960px){
  .tcx .tc-grid{display:grid; grid-template-columns:1fr .9fr; gap:var(--tc-s-5);}
  .tcx .tc-sticky{position:sticky; top:16px;}
}
.tcx .tc-row{display:flex; flex-wrap:wrap; gap:var(--tc-s-4);}

/* ===================== Cards ===================== */
.tcx .tc-card{
  background:var(--tc-surface);
  border:1px solid var(--tc-border);
  border-radius:var(--tc-radius);
  box-shadow:var(--tc-shadow-md);
  padding:16px;
}
.tcx .card{border-radius:var(--tc-radius); box-shadow:var(--tc-shadow-md);} /* map legacy .card */

/* spacing inside/among cards */
.tcx .tc-card > * + *{margin-top:var(--tc-s-4);}
.tcx .tc-card + .tc-card,
.tcx .tc-card + .tc-section,
.tcx .tc-section + .tc-card{margin-top:var(--tc-s-5);}

/* reset text margins inside cards */
.tcx .tc-card p,
.tcx .tc-card ul,
.tcx .tc-card ol{margin:0;}
.tcx .tc-card p + *,
.tcx .tc-card ul + *,
.tcx .tc-card ol + *{margin-top:var(--tc-s-3);}
.tcx .tc-card h2,
.tcx .tc-card h3,
.tcx .tc-card h4{margin:0;}
.tcx .tc-card h2 + *,
.tcx .tc-card h3 + *,
.tcx .tc-card h4 + *{margin-top:var(--tc-s-2);}

/* ===================== Fields ===================== */
.tcx .tc-field{display:grid; gap:6px;}
.tcx .tc-label{font-size:.925rem; color:var(--tc-fg); font-weight:600;}
.tcx .tc-help{font-size:.85rem; color:var(--tc-fg-muted);}
.tcx .tc-error{color:var(--tc-danger); font-size:.85rem;}
.tcx .tc-invalid{border-color:var(--tc-danger);}
.tcx .tc-field + .tc-field{margin-top:var(--tc-s-4);}

/* ===================== Buttons ===================== */
.tcx .tc-btn{
  --_bg:transparent; --_bd:var(--tc-border); --_fg:var(--tc-fg);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:999px;
  border:1px solid var(--_bd); background:var(--_bg); color:var(--_fg);
  font-weight:600; cursor:pointer; transition:transform .05s ease, background .15s ease, border-color .15s ease;
  min-height:44px;
}
.tcx .tc-btn:disabled{opacity:.5; cursor:not-allowed;}
.tcx .tc-btn:active{transform:translateY(1px);}
.tcx .tc-btn:focus-visible{outline:0; box-shadow:var(--tc-focus); border-color:var(--tc-accent);}
.tcx .tc-btn--primary{--_bg:var(--tc-accent-solid); --_bd:var(--tc-accent-solid); --_fg:#fff;}
.tcx .tc-btn--primary:hover{filter:brightness(.95);}
.tcx .tc-btn--secondary{--_bg:rgba(2,6,23,.02);}
.tcx .tc-btn--secondary:hover{background:rgba(2,6,23,.04);}
.tcx .tc-btn--ghost{--_bd:transparent; --_bg:transparent; color:var(--tc-fg-muted);}
.tcx .tc-btn--danger{--_bg:var(--tc-danger); --_bd:var(--tc-danger); --_fg:#fff;}

/* Actions rows spacing (supports multiple class names) */
.tcx .tc-actions,
.tcx .actions,
.tcx .btn-row{display:flex; flex-wrap:wrap; gap:var(--tc-s-3); margin-top:var(--tc-s-3);}

/* Promote Copy only when a result exists */
.tcx .tc-actions .tc-copy[disabled]{opacity:.45; pointer-events:none;}
.tcx.has-result .tc-actions .tc-copy,
.tcx .has-result .tc-actions .tc-copy{
  background:var(--tc-accent-solid);
  border-color:var(--tc-accent-solid);
  color:#fff;
}

/* ===================== Segments & Tabs ===================== */
.tcx .tc-segment{display:inline-flex; gap:2px; background:var(--tc-accent-weak); padding:4px; border-radius:999px;}
.tcx .tc-segment .tc-chip{border:none; background:transparent; color:var(--tc-fg); padding:6px 10px; border-radius:999px; font-weight:600; cursor:pointer;}
.tcx .tc-segment .tc-chip[aria-pressed="true"]{background:#fff; box-shadow:0 0 0 1px var(--tc-border), var(--tc-shadow-sm);}

.tcx .tc-tabs{display:flex; gap:var(--tc-s-2); flex-wrap:wrap;}
.tcx .tc-tab{padding:8px 12px; border-radius:999px; border:1px solid var(--tc-border); background:#fff; color:var(--tc-fg-muted); font-weight:600; cursor:pointer;}
.tcx .tc-tab[aria-selected="true"]{color:var(--tc-accent); border-color:var(--tc-accent); background:var(--tc-accent-weak);}

/* ===================== Result Panel ===================== */
.tcx .tc-result{
  /* fallback first (older engines) */
  background:var(--tc-result-bg,rgba(1,140,207,.10));
  /* preferred richer tint */
  background:color-mix(in oklab, var(--tc-accent) 12%, #fff);
  border:1px solid var(--tc-border);
  border:1px solid color-mix(in oklab, var(--tc-accent) 22%, var(--tc-border));
  border-radius:var(--tc-radius);
  padding:18px;
  display:grid; gap:10px;
}
.tcx .tc-result .tc-value{font-size:clamp(22px,4.2vw,36px); line-height:1.15; font-weight:800; color:var(--tc-fg);}
.tcx .tc-result .tc-sub{color:var(--tc-fg-muted); font-size:.93rem;}
.tcx .tc-result.pulse{animation:tcPulse .22s ease;}
@keyframes tcPulse{from{outline:0 0 0 0 var(--tc-accent-ring);} to{outline:0 0 0 8px transparent;}}

/* make .tc-result follow same rhythm as cards */
.tcx .tc-result > * + *{margin-top:16px;}
.tcx .tc-result hr,
.tcx .tc-result .tc-hr{height:1px; border:0; background:var(--tc-border); margin:16px 0;}
.tcx .tc-result .tc-value + .tc-actions,
.tcx .tc-result .tc-value + .actions,
.tcx .tc-result .tc-value + .btn-row{margin-top:16px;}

/* stack spacing between cards and results */
.tcx .tc-result + .tc-card,
.tcx .tc-card + .tc-result{margin-top:var(--tc-s-5);}

/* ===================== Example Chips ===================== */
.tcx .tc-examples{display:flex; flex-wrap:wrap; gap:var(--tc-s-2);}
.tcx .tc-example{padding:6px 10px; border-radius:999px; background:rgba(2,6,23,.04); border:1px solid var(--tc-border); cursor:pointer; transition:background .12s ease, transform .04s ease;}
.tcx .tc-example:hover{background:rgba(2,6,23,.06);}
.tcx .tc-example:active{transform:translateY(1px);}

/* ===================== Notices ===================== */
.tcx .tc-note{display:flex; gap:8px; align-items:flex-start; padding:10px 12px; border-radius:12px; border:1px solid var(--tc-border); background:#fff;}
.tcx .tc-note--warn{border-color:#f59e0b40; background:#f59e0b1a;}
.tcx .tc-note--error{border-color:#ef444440; background:#ef44441a;}

/* ===================== Bottom bar (mobile) ===================== */
@media (max-width:768px){
  .tcx .tc-bottombar{
    position:sticky; bottom:0; z-index:20;
    display:none; gap:10px; padding:10px 12px;
    background:var(--tc-surface); border-top:1px solid var(--tc-border);
  }
  .tcx.has-result .tc-bottombar{display:flex;}
}

/* ===================== Utilities ===================== */
.tcx .tc-hidden{display:none !important;}
.tcx .tc-inline{display:inline-flex; align-items:center; gap:8px;}


/* ===== Brand lock & state consistency (append at end) ===== */

/* Ensure tokens are present on every page using .tcx */
.tcx{
  --tc-accent: #018ccf;               /* Primary */
  --tc-accent-solid: #0077af;         /* AA vs white for filled CTAs */
  --tc-accent-weak: rgba(1,140,207,.10);
  --tc-accent-ring: rgba(1,140,207,.35);
  --tc-secondary: #35b4ab;            /* Use with dark text, not white */
}

/* Segmented control (chips under “Rounding”, “p% of x”, etc.) */
.tcx .tc-segment .tc-chip[aria-pressed="true"]{
  background: var(--tc-accent-solid);
  color: #fff;
  border: 1px solid var(--tc-accent-solid);
  box-shadow: none;                   /* defeat legacy shadow if any */
}
.tcx .tc-segment .tc-chip:not([aria-pressed="true"]):hover{
  background: var(--tc-accent-weak);
}

/* Tabs (if a calculator uses .tc-tabs instead of .tc-segment) */
.tcx .tc-tab[aria-selected="true"]{
  color: var(--tc-accent);
  border-color: var(--tc-accent);
  background: var(--tc-accent-weak);
}

/* Result tint + border always use the brand */
.tcx .tc-result{
  background: color-mix(in oklab, var(--tc-accent) 12%, #fff);
  border-color: color-mix(in oklab, var(--tc-accent) 22%, var(--tc-border));
}

/* Promote Copy to filled brand ONLY when result exists */
.tcx.has-result .tc-actions .tc-copy,
.tcx .has-result .tc-actions .tc-copy{
  background: var(--tc-accent-solid);
  border-color: var(--tc-accent-solid);
  color: #fff;
}

/* Focus ring (just to be sure it uses your brand) */
.tcx .tc-btn:focus-visible,
.tcx input:focus-visible,
.tcx select:focus-visible{ box-shadow: 0 0 0 3px var(--tc-accent-ring); border-color: var(--tc-accent); }


/* --- Force consistent space between adjacent panels (cards/results) --- */
.tcx .tc-card + .tc-card,
.tcx .tc-card + .tc-result,
.tcx .tc-result + .tc-card,
.tcx .tc-result + .tc-result{
  margin-top: 24px !important; /* base gap */
}

@media (min-width: 768px){
  .tcx .tc-card + .tc-card,
  .tcx .tc-card + .tc-result,
  .tcx .tc-result + .tc-card,
  .tcx .tc-result + .tc-result{
    margin-top: 28px !important; /* a touch roomier on desktop */
  }
}

/* === TC Vertical Rhythm Locks (global) === */

/* Space below header control rows used by modules */
.tcx .ctl{ margin-bottom: var(--tc-s-4); }

/* Space below segmented toggles or tab bars before the next block */
.tcx .tc-segment,
.tcx .tc-tabs{ margin-bottom: var(--tc-s-4); }

/* Field rows feel tight on larger screens — open them up a bit */
@media (min-width: 640px){
  .tcx .tc-row{ gap: var(--tc-s-5); }
}

/* Action rows: slightly more air and consistent top margin */
.tcx .tc-actions,
.tcx .actions,
.tcx .btn-row{
  gap: var(--tc-s-4);
  margin-top: var(--tc-s-4);
}

/* Keep a predictable vertical rhythm between major blocks */
.tcx .tc-card + .tc-card,
.tcx .tc-card + .tc-result,
.tcx .tc-result + .tc-card,
.tcx .tc-result + .tc-result{
  margin-top: var(--tc-s-5) !important;
}

/* ===================================================================== */
/* === Scoped fixes for Polar ↔ Cartesian only (won’t affect others) === */
/* Target the outer mount created by [tc_calc id="polar-to-cartesian"]   */
/* ===================================================================== */

.tcx[data-calc="polar-to-cartesian"],
.tcx[data-calc-id="polar-to-cartesian"]{
  /* no visual change here; selector used to increase specificity only */
}

/* 1) Lock the gap under the mode toggle regardless of which panel is shown */
.tcx[data-calc="polar-to-cartesian"] .tc-segment,
.tcx[data-calc-id="polar-to-cartesian"] .tc-segment{
  margin-bottom: var(--tc-s-5) !important;
}

/* 2) Prevent panels from adding their own top margin (no “jump” on toggle) */
.tcx[data-calc="polar-to-cartesian"] .panel,
.tcx[data-calc-id="polar-to-cartesian"] .panel{
  margin-top: 0 !important;
}

/* 3) Inside the first card, align input rows to a consistent responsive grid */
.tcx[data-calc="polar-to-cartesian"] .tc-card .row2,
.tcx[data-calc-id="polar-to-cartesian"] .tc-card .row2{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: var(--tc-s-5) !important;
  align-items: start !important;
  margin-top: var(--tc-s-4) !important;
}

/* Ensure the first row in a card doesn’t add extra top margin */
.tcx[data-calc="polar-to-cartesian"] .tc-card > .row2:first-child,
.tcx[data-calc-id="polar-to-cartesian"] .tc-card > .row2:first-child{
  margin-top: 0 !important;
}

/* 4) Make outputs match input height/padding so x,y and r,θ align perfectly */
.tcx[data-calc="polar-to-cartesian"] .ptc-out,
.tcx[data-calc-id="polar-to-cartesian"] .ptc-out{
  display:flex !important;
  align-items:center !important;
  min-height:44px !important;
  padding:12px 14px !important;
  border:1px solid var(--tc-border) !important;
  border-radius:var(--tc-r-md) !important;
  background: var(--tc-result-bg, rgba(1,140,207,.10)) !important;
  font-weight:600 !important;
}

/* 5) Action row breathing space inside this calculator */
.tcx[data-calc="polar-to-cartesian"] .actions-line,
.tcx[data-calc-id="polar-to-cartesian"] .actions-line{
  display:flex; flex-wrap:wrap;
  gap: var(--tc-s-4) !important;
  margin-top: var(--tc-s-4) !important;
}

/* --- Polar ↔ Cartesian: align outputs with inputs (scoped) --- */
.tcx[data-calc="polar-to-cartesian"] .out-strong output,
.tcx[data-calc-id="polar-to-cartesian"] .out-strong output,
.tcx[data-calc="polar-to-cartesian"] .ptc-out,
.tcx[data-calc-id="polar-to-cartesian"] .ptc-out{
  box-sizing: border-box !important;
  height: 44px !important;              /* same control height as inputs */
  padding: 12px 14px !important;        /* same padding as inputs/selects */
  display: flex !important;
  align-items: center !important;
  border-radius: var(--tc-r-md) !important;
}

/* Make the two columns stay perfectly aligned in this calc */
.tcx[data-calc="polar-to-cartesian"] .tc-card .row2,
.tcx[data-calc-id="polar-to-cartesian"] .tc-card .row2,
.tcx[data-calc="polar-to-cartesian"] .tc-card .tc-row,
.tcx[data-calc-id="polar-to-cartesian"] .tc-card .tc-row{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: var(--tc-s-5) !important;
  align-items: start !important;
}

/* Ensure the first row inside the card sits tight under the label row */
.tcx[data-calc="polar-to-cartesian"] .tc-card > .row2:first-child,
.tcx[data-calc-id="polar-to-cartesian"] .tc-card > .row2:first-child,
.tcx[data-calc="polar-to-cartesian"] .tc-card > .tc-row:first-child,
.tcx[data-calc-id="polar-to-cartesian"] .tc-card > .tc-row:first-child{
  margin-top: 0 !important;
}