/* ConverNova, the three tools as an application panel on a light landing.
   Generated by make-tools-css.js from review/opciones-visuales (option 3,
   light blue). Edit those files and run the script, not this file. */

/* The action bar sticks to the bottom of the screen while the form is in view,
   with the button on the right, where the eye ends a form. A second search no
   longer means hunting for the button. */
.sp-act {
  position: sticky; bottom: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px 22px; flex-wrap: nowrap;
}
.sp-act .sp-note { order: 1; flex: 1 1 auto; }
.sp-act .fd-region { order: 2; flex: 0 0 auto; }
.sp-act .btn { order: 3; margin-left: auto; flex: 0 0 auto; padding: 14px 30px; font-size: 14px; }
.sp-act .btn::after { content: "\2192"; margin-left: 4px; }

/* The tool as an application panel on a light landing page.
   The landing (title, explanations, footer) stays as it is. The block that
   holds the tool becomes a panel with its own palette, set by the --app-*
   variables in each option file: near black, night blue or a light blue. */

.sec:has(.spec) > .wrap {
  --text: var(--app-text); --text-dim: var(--app-dim); --text-nav: var(--app-text);
  --panel: var(--app-input); --panel-hi: var(--app-card2);
  --line: var(--app-line); --line-strong: var(--app-line2);
  --accent: var(--app-accent); --accent-deep: var(--app-btn); --accent-hi: var(--app-btn-hi);
  --accent-muted: var(--app-accent-soft); --copper: var(--app-copper);
  position: relative; color: var(--app-text);
  background: var(--app-bg); border-radius: 26px;
  padding: 30px 30px 34px; margin-top: 4px;
  box-shadow: 0 40px 90px -40px rgba(7,14,28,.55), 0 0 0 1px var(--app-frame);
  overflow: clip;
}
/* faint engineering grid and a glow, as in the motion posts */
.sec:has(.spec) > .wrap::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(700px 360px at 92% 0%, var(--app-glow), transparent 65%),
    linear-gradient(var(--app-grid) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, var(--app-grid) 1px, transparent 1px) 0 0 / 32px 32px;
}
.sec:has(.spec) > .wrap > * { position: relative; z-index: 1; }
.sec:has(.spec.finder) > .wrap { max-width: min(1720px, calc(100% - 2 * var(--gutter))); }
/* the finder table stays inside the panel */
.fd-results { position: static; width: auto; left: 0; transform: none; border-top-color: var(--app-line); }

.sec:has(.spec) > .wrap .spec {
  --sp-sunk: var(--app-input); --sp-faint: var(--app-dim); --sp-copper-bg: var(--app-copper-soft);
}

.sec:has(.spec) { padding-top: 44px; }

/* the steps as cards */
.sp-pick, .fd-specs, .cv-step, .sp-work, .sp-contact {
  background: var(--app-card); border: 1px solid var(--app-line); border-radius: 18px;
  padding: 24px 26px 26px; margin-top: 16px; box-shadow: var(--app-card-shadow);
}
.sp-pick { margin-top: 0; }
.cv-step:first-of-type { padding-top: 24px; margin-top: 0; }
.sp-colhead h2, .spec h2 { color: var(--app-text); font-size: 21px; }
.sp-colhead .n {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  color: #fff; background: var(--app-btn); letter-spacing: 0; font-size: 11px;
  box-shadow: 0 0 0 4px var(--app-accent-soft), 0 0 20px var(--app-btn-glow);
}
.sp-change { color: var(--app-accent); }
.sp-f label, .sp-gt, .sp-hint, .fd-how, .sp-why { color: var(--app-dim); }
.fd-how b { color: var(--app-text); }
.sp-f input, .sp-f textarea, .finder .sp-f select, .cv-form select, .cv-pair select {
  background: var(--app-input); color: var(--app-text); border: 1px solid var(--app-line2);
}
.sp-f input:hover { background: var(--app-input); }
.sp-f input:focus, .finder .sp-f select:focus, .sp-f textarea:focus {
  background: var(--app-input); border-color: var(--app-accent);
  box-shadow: 0 0 0 3px var(--app-accent-soft), 0 0 24px var(--app-btn-glow);
}
.sp-in .u { color: var(--app-accent); }
.sp-chk { background: var(--app-input); border: 1px solid var(--app-line2); color: var(--app-text); }
.sp-chk:has(input:checked) {
  border-color: var(--app-copper); background: var(--app-copper-soft); color: var(--app-text);
  box-shadow: 0 0 0 1px var(--app-copper), 0 0 22px var(--app-copper-glow);
}
.sp-chk input { accent-color: var(--app-copper); }
.fd-tol, .cv-seg { background: var(--app-input); }
.fd-tol label { color: var(--app-dim); }
.fd-tol label:has(input:checked) { background: var(--app-btn); color: #fff; box-shadow: 0 0 12px var(--app-btn-glow); }

/* the action bar */
.sp-act {
  background: var(--app-bar); border: 1px solid var(--app-line); border-radius: 16px;
  padding: 14px 16px 14px 22px; margin-top: 16px; backdrop-filter: blur(10px);
  box-shadow: 0 -12px 40px -10px rgba(5,10,20,.35);
}
.sp-act .sp-note { color: var(--app-dim); }
.sec:has(.spec) > .wrap .btn-primary {
  background: linear-gradient(180deg, var(--app-btn-hi), var(--app-btn)); color: #fff;
  box-shadow: 0 0 0 1px var(--app-btn-ring), 0 10px 28px -8px var(--app-btn-glow);
}
.sec:has(.spec) > .wrap .btn-ghost { color: var(--app-text); border-color: var(--app-line2); background: transparent; }

/* finder results */
.fd-src { background: var(--app-input); color: var(--app-dim); }
.fd-none { color: var(--app-text); }
.fd-custom {
  background: linear-gradient(90deg, var(--app-copper-soft), transparent); border: 1px solid var(--app-copper);
  box-shadow: 0 0 40px -14px var(--app-copper-glow);
}
.fd-custom h3 { color: var(--app-text); }
.fd-custom p, .fd-bar, .fd-again { color: var(--app-dim); }
.fd-bar b { color: var(--app-text); }
.fd-scroll { background: var(--app-input); border: 1px solid var(--app-line); border-radius: 14px; }
.fd-table thead th, .fd-table .lim td { background: var(--app-head); color: var(--app-dim); }
.fd-table tbody th, .fd-table td { background: var(--app-input); color: var(--app-text);
  border-bottom-color: var(--app-line); }
.fd-table tbody tr:nth-child(even) td, .fd-table tbody tr:nth-child(even) th { background: var(--app-zebra); }
.fd-table tbody tr:hover td, .fd-table tbody tr:hover th { background: var(--app-hover); }
.fd-table tbody th b { color: var(--app-text); }
.fd-table tbody th span { color: var(--app-dim); }
.fd-table .lim input, .fd-table .lim select { background: var(--app-card); color: var(--app-text); border-color: var(--app-line2); }
.fd-table .bdg.ok { background: var(--app-ok-bg); color: var(--app-ok); }
.fd-table .bdg.cl { background: var(--app-copper-soft); color: var(--app-copper-text); }
.fd-table td.off { background: var(--app-copper-soft) !important; color: var(--app-copper-text); }
.fd-table td.off small { color: var(--app-copper-text); }
.fd-table td.sk.si { color: var(--app-ok); } .fd-table td.sk.no { color: var(--app-bad); }
.fd-table td.pr a { color: var(--app-accent); border-bottom-color: var(--app-accent-soft); }
.fd-table thead th.t0, .fd-table .lim td.t0 { background: var(--app-t0); }
.fd-table thead th.t1, .fd-table .lim td.t1 { background: var(--app-t1); }
.fd-table thead th.t2, .fd-table .lim td.t2 { background: var(--app-t2); }
.fd-table th.t0 button em { color: var(--app-t0-text); }
.fd-table th.t1 button em { color: var(--app-t1-text); }
.fd-table th.t2 button em { color: var(--app-t2-text); }
.fd-table td.t0, .fd-table td.t1, .fd-table td.t2 { box-shadow: inset 2px 0 0 -1px var(--app-line2); }

/* calculator readout */
.cv-card {
  background: var(--app-readout); border: 1px solid var(--app-line); border-top: 2px solid var(--app-copper);
  border-radius: 18px; box-shadow: var(--app-card-shadow), 0 0 60px -24px var(--app-copper-glow);
}
.cv-num .v { color: var(--app-text); text-shadow: 0 0 22px var(--app-btn-glow); }
.cv-num .v small { color: var(--app-accent); }
.cv-num .k, .cv-facts dt, .cv-notes, .cv-empty { color: var(--app-dim); }
.cv-facts dd { color: var(--app-text); }
.cv-card[data-state="empty"] .cv-num .v { color: var(--app-line2); text-shadow: none; }
.cv-draw { color: var(--app-dim); }
.cv-draw .bx { fill: var(--app-card2); }
.cv-small { color: var(--app-dim); }

/* specification form */
.sp-topo { background: var(--app-input); border-color: var(--app-line2); color: var(--app-dim); }
.sp-topo .nm { color: var(--app-dim); }
.sp-topo:has(input:checked) { background: var(--app-copper-soft); border-color: var(--app-copper);
  box-shadow: 0 0 26px -6px var(--app-copper-glow); color: var(--app-text); }
.sp-topo:has(input:checked) .nm { color: var(--app-text); }
.sp-hero { background: var(--app-input); border-color: var(--app-line); color: var(--app-dim); }
.sp-hero figcaption b { color: var(--app-text); }
.sp-topo .cu, .sp-hero .cu { filter: drop-shadow(0 0 3px var(--app-copper-glow)); }
.sp-topo .bx, .sp-hero .bx, .sp-topo .tm, .sp-hero .tm,
.sp-topo .plate, .sp-hero .plate { fill: var(--app-input); }
.sp-topo:has(input:checked) .bx, .sp-topo:has(input:checked) .tm,
.sp-topo:has(input:checked) .plate { fill: var(--app-input); }
.sp-status { color: var(--app-dim); }
.sp-status .pct { color: var(--app-text); }
.sp-status .bar { background: var(--app-input); }
.sp-status .bar i { background: var(--app-copper); box-shadow: 0 0 10px var(--app-copper-glow); }
.consent { color: var(--app-dim); }

/* on a phone the panel gives its width back to the form */
@media (max-width: 700px) {
  .sec:has(.spec) > .wrap { padding: 14px 12px 18px; border-radius: 18px;
    width: calc(100% - 16px); margin-left: auto; margin-right: auto; }
  .sp-pick, .fd-specs, .cv-step, .sp-work, .sp-contact {
    padding: 18px 16px 20px; border-radius: 14px; }
  .sp-act { padding: 10px 10px 10px 14px; gap: 10px; }
  .sp-act .sp-note { font-size: 11.5px; line-height: 1.35; }
  .sp-act .btn { padding: 12px 18px; }
}

/* PALETTE 3, "Light blue". A softer contrast: a blue panel lighter than the motion
   posts, white cards on it, navy text. The tool still stands out from the page. */
.sec:has(.spec) > .wrap {
  --app-bg: #D6E4F7; --app-frame: rgba(31,79,160,.18);
  --app-card: #FFFFFF; --app-card2: #EAF1FB; --app-input: #F4F8FD; --app-bar: rgba(255,255,255,.92);
  --app-readout: linear-gradient(180deg, #13305F, #0C2148);
  --app-head: #E3ECF9; --app-zebra: #F6F9FE; --app-hover: #E6EFFC;
  --app-text: #0A1A33; --app-dim: #42597E; --app-line: rgba(31,79,160,.14); --app-line2: rgba(31,79,160,.28);
  --app-accent: #1659C7; --app-accent-soft: rgba(22,89,199,.14);
  --app-btn: #1659C7; --app-btn-hi: #2C70E0; --app-btn-ring: rgba(22,89,199,.25); --app-btn-glow: rgba(22,89,199,.3);
  --app-copper: #C9682A; --app-copper-soft: rgba(201,104,42,.1); --app-copper-glow: rgba(201,104,42,.25); --app-copper-text: #A44F18;
  --app-ok: #157A3E; --app-ok-bg: #D7F2E1; --app-bad: #C0392B;
  --app-t0: #DCE8FB; --app-t1: #D8F1EE; --app-t2: #E7E1FA;
  --app-t0-text: #1659C7; --app-t1-text: #0E7C7B; --app-t2-text: #6D3FC0;
  --app-glow: rgba(255,255,255,.55); --app-grid: rgba(31,79,160,.06);
  --app-card-shadow: 0 1px 2px rgba(10,26,51,.06), 0 14px 30px -16px rgba(10,26,51,.25);
}
/* on the light panel the calculator readout stays dark, so the answer is the strongest thing on screen */
.cv-card { --app-text: #F1F6FF; --app-dim: #A9BEDD; --app-accent: #8CBDFF; --app-card2: #1A3460; --app-line2: rgba(160,195,245,.3); }
.cv-card .btn-ghost { color: #F1F6FF; border-color: rgba(160,195,245,.4); }
.sp-colhead .n { box-shadow: 0 0 0 4px var(--app-accent-soft); }
.fd-table td.off, .fd-table .bdg.cl { color: #A44F18; }