/*! bcs-tools.css: calculators for bestcanadianstocks.ca
 *
 * Scoped entirely under .bcs-tool so it cannot touch the rest of the site, and
 * so the theme cannot restyle a calculator embedded in an article. Uses the
 * site's own type and palette: Roboto headings, Source Serif body, Roboto Mono
 * for figures, red #c80815 on near-black #191b1d.
 *
 * Nothing here is set below 11px and every colour clears 4.5:1 on its ground.
 */

.bcs-tool{
  --bcs-ink:#191b1d; --bcs-body:#4a4a52; --bcs-faint:#5f6067;
  --bcs-rule:#e5e5e8; --bcs-wash:#f7f6f7; --bcs-red:#c80815; --bcs-up:#12683b;
  --bcs-head:Roboto,"Helvetica Neue",Arial,sans-serif;
  --bcs-serif:"Source Serif 4",Georgia,serif;
  --bcs-mono:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-family:var(--bcs-serif);
  color:var(--bcs-ink);
  border:1px solid var(--bcs-ink);
  border-radius:6px;
  overflow:hidden;
  background:#fff;
  margin:28px 0;
  max-width:100%;
}
.bcs-tool *{box-sizing:border-box}

.bcs-head{background:var(--bcs-ink);color:#fff;padding:18px 20px}
.bcs-kicker{font-family:var(--bcs-mono);font-size:11px;letter-spacing:.14em;color:#ff9ba2}
.bcs-head h3{font-family:var(--bcs-head);font-size:22px;font-weight:800;letter-spacing:-.02em;
  margin:7px 0 0;line-height:1.2;color:#fff}
.bcs-head p{margin:7px 0 0;font-size:14px;line-height:1.5;color:#c9ccd2;max-width:70ch}

/* Headless: the host page supplies the heading, so the card is just the tool.
   No top border either, since it usually sits inside a band of its own. */
.bcs-tool.bcs-bare{border:0;border-radius:5px;margin:0}

.bcs-body{display:grid;grid-template-columns:1fr 1fr}
.bcs-in{padding:20px;border-right:1px solid var(--bcs-rule)}
.bcs-out{padding:20px;background:var(--bcs-wash);display:flex;flex-direction:column}

.bcs-f{display:flex;flex-direction:column;gap:5px;margin-bottom:15px}
.bcs-f label{font-family:var(--bcs-head);font-size:13px;font-weight:700}
.bcs-hint{font-family:var(--bcs-serif);font-size:12.5px;color:var(--bcs-body);line-height:1.45}
.bcs-f input,.bcs-f select{
  font-family:var(--bcs-head);font-size:15px;font-weight:600;padding:10px 11px;
  font-variant-numeric:tabular-nums;
  border:1px solid var(--bcs-rule);border-radius:4px;background:#fff;color:var(--bcs-ink);
  width:100%;
}
.bcs-f input:focus,.bcs-f select:focus{outline:2px solid var(--bcs-red);outline-offset:1px}

.bcs-lab{font-family:var(--bcs-mono);font-size:11px;letter-spacing:.12em;color:var(--bcs-body)}
.bcs-big{font-family:var(--bcs-head);font-size:40px;font-weight:900;letter-spacing:-.03em;
  line-height:1.05;margin:7px 0 9px;font-variant-numeric:tabular-nums}
.bcs-big.bcs-neg{color:var(--bcs-red)}
.bcs-note{margin:0;font-size:13.5px;line-height:1.55;color:var(--bcs-body)}
.bcs-rows{margin-top:14px;border-top:1px solid var(--bcs-rule);padding-top:11px}
.bcs-row{display:flex;justify-content:space-between;gap:14px;font-size:13px;padding:4px 0;
  color:var(--bcs-body)}
.bcs-row b{font-family:var(--bcs-head);font-size:13.5px;font-weight:700;color:var(--bcs-ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.bcs-srcwrap{margin-top:auto;padding-top:14px}
.bcs-src{font-size:12px;color:var(--bcs-faint);line-height:1.45;
  border-top:1px solid var(--bcs-rule);padding-top:10px}

/* the ACB tracker's repeating transaction rows */
.bcs-acb-list{display:flex;flex-direction:column;gap:7px;margin:10px 0}
.bcs-acb-row{display:grid;grid-template-columns:78px 1fr 1fr 1fr 30px;gap:6px}
.bcs-acb-row select,.bcs-acb-row input{
  font-family:var(--bcs-head);font-size:13px;font-weight:600;padding:8px;
  font-variant-numeric:tabular-nums;border:1px solid var(--bcs-rule);
  border-radius:4px;background:#fff;color:var(--bcs-ink);width:100%;min-width:0}
.bcs-acb-row .a-del{border:1px solid var(--bcs-rule);background:#fff;border-radius:4px;
  color:var(--bcs-body);cursor:pointer;font-size:16px;line-height:1;padding:0}
.bcs-acb-row .a-del:hover{border-color:var(--bcs-red);color:var(--bcs-red)}
.bcs-add{font-family:var(--bcs-head);font-size:13px;font-weight:700;color:var(--bcs-red);
  background:none;border:0;padding:4px 0;cursor:pointer}
.bcs-add:hover{text-decoration:underline}
.bcs-err{padding:18px;font-size:14px;color:var(--bcs-red)}

@media (max-width:700px){
  .bcs-body{grid-template-columns:1fr}
  .bcs-in{border-right:0;border-bottom:1px solid var(--bcs-rule)}
  .bcs-big{font-size:32px}
  .bcs-acb-row{grid-template-columns:70px 1fr 1fr 1fr 28px;gap:5px}
}