/* Shared styles for all physicsoftheuniverse.com calculators. Served once, cached across every page. */
:root{ --accent:#5b3a8c; --accent2:#8e6bc4; --ink:#1f2430; }
body{ color:var(--ink); }
header{ background:#fff; border-bottom:2px solid plum; padding:.85rem 1rem; display:flex; align-items:center; }
.brand{ color:#111 !important; font-size:1.15rem; text-decoration:none !important; font-weight:600; }
.crumb{ font-size:.82rem; color:#6a7080; margin:.75rem 0 .25rem; }
.crumb a{ color:#6a7080; text-decoration:none; }
h1{ font-size:1.7rem; font-weight:700; margin:.25rem 0 .5rem; }
.lead-sub{ color:#525a6b; font-size:1.02rem; max-width:760px; }
.calc-card{ position:relative; border:1px solid #e4e6ee; border-radius:14px; padding:1.4rem 1.4rem .6rem;
  max-width:760px; box-shadow:0 6px 24px rgba(40,30,70,.07); background:#fff; overflow:hidden; }
.calc-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--accent), var(--accent2)); }
.form-group{ margin-bottom:1.05rem; }
label{ display:block; font-weight:600; font-size:.9rem; color:#3a4152; margin-bottom:.35rem; }
.unit{ color:#8a90a2; font-weight:400; }
.calc-input, select.form-control{ border:1px solid #c9cddb; background:#fbfcff; border-radius:.4rem;
  height:calc(2.5rem + 2px); font-size:1rem; }
.calc-input:focus, select.form-control:focus{ border-color:var(--accent2); box-shadow:0 0 0 .18rem rgba(142,107,196,.18); }
/* inline value + unit selector */
.field-row{ display:flex; gap:.5rem; align-items:stretch; }
.field-row .calc-input{ flex:1 1 auto; min-width:0; }
.unit-select{ flex:0 0 auto; min-width:92px; max-width:160px; border:1px solid #d5d0e6; border-radius:.4rem;
  background:#f3f0fb; color:#4a2f73; font-size:.85rem; font-weight:600; padding:0 .55rem; cursor:pointer; }
.unit-select:focus{ outline:none; border-color:var(--accent2); box-shadow:0 0 0 .18rem rgba(142,107,196,.18); }
.btn-solve{ background:linear-gradient(180deg, var(--accent2), var(--accent)); border:none; font-weight:600;
  color:#fff; padding:.5rem 1.4rem; border-radius:.45rem; box-shadow:0 2px 8px rgba(91,58,140,.25); }
.btn-solve:hover{ filter:brightness(1.06); color:#fff; }
.btn-reset{ background:#fff; color:#6a7080; border:1px solid #c9cddb; border-radius:.45rem; padding:.5rem 1rem; }
.btn-reset:hover{ background:#f6f6fa; color:#3a4152; }
#result{ margin:1.1rem 0 .4rem; border-radius:10px; padding:1rem 1.15rem; display:none; }
#result.ok{ display:block; background:linear-gradient(180deg,#f4fcf6,#eef9f1); border:1px solid #b9e6c4; }
#result.err{ display:block; background:#fdf2f2; border:1px solid #f0c2c2; color:#8a1f1f; }
#result .answer{ font-size:1.6rem; font-weight:800; color:#15683a; line-height:1.25; }
#result .sub{ color:#4a5566; font-size:.9rem; margin-top:.4rem; }
/* Compatibility for older calculator templates that still use Bootstrap defaults. */
.calc-card .form-control{ border:1px solid #c9cddb; background:#fbfcff; border-radius:.4rem; min-height:calc(2.5rem + 2px); font-size:1rem; }
.calc-card .form-control:focus{ border-color:var(--accent2); box-shadow:0 0 0 .18rem rgba(142,107,196,.18); }
.calc-card .btn-primary{ background:linear-gradient(180deg, var(--accent2), var(--accent)); border:none; font-weight:600;
  color:#fff; padding:.5rem 1.35rem; border-radius:.45rem; box-shadow:0 2px 8px rgba(91,58,140,.25); }
.calc-card .btn-primary:hover,.calc-card .btn-primary:focus{ filter:brightness(1.06); color:#fff; background:linear-gradient(180deg, var(--accent2), var(--accent)); }
#result.error,.error,#resultDiv .text-danger{ display:block; background:#fdf2f2; border:1px solid #f0c2c2; color:#8a1f1f !important;
  border-radius:10px; padding:1rem 1.15rem; font-weight:600; }
#result.validresult,.validresult,#resultDiv .text-success{ display:block; background:linear-gradient(180deg,#f4fcf6,#eef9f1); border:1px solid #b9e6c4;
  color:#15683a !important; border-radius:10px; padding:1rem 1.15rem; font-weight:700; }
section.block{ max-width:760px; margin-top:2rem; }
section.block h2{ font-size:1.25rem; font-weight:700; border-bottom:1px solid #eceef4; padding-bottom:.35rem; }
.formula-box{ background:#faf9fe; border:1px solid #ece7f6; border-radius:10px; padding:.6rem 1rem; overflow-x:auto; }
.formula-box .sub{ color:#8a90a2; font-size:.85rem; margin-top:.35rem; }
.example{ background:#f7f9fc; border-left:3px solid var(--accent2); padding:.75rem 1rem; border-radius:0 8px 8px 0; }
details.faq{ border-bottom:1px solid #eceef4; padding:.6rem 0; }
details.faq summary{ font-weight:600; cursor:pointer; list-style:none; }
details.faq summary::-webkit-details-marker{ display:none; }
details.faq summary::before{ content:"+ "; color:var(--accent); font-weight:700; }
details.faq[open] summary::before{ content:"\2212 "; }
details.faq p{ margin:.5rem 0 0; color:#3f4656; }
.rel-list{ list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.rel-list a{ display:inline-block; border:1px solid #d9dbe6; border-radius:20px; padding:.3rem .8rem;
  font-size:.88rem; color:var(--accent); text-decoration:none; background:#fff; }
.rel-list a:hover{ background:var(--accent); color:#fff; }
footer.site{ margin-top:2.5rem; padding:1.25rem 0; color:#8a90a2; font-size:.85rem; border-top:1px solid #eceef4; }
@media(max-width:768px){ .container{width:100%;} h1{font-size:1.4rem;} }