/* Unrote - /calculator/: the two calculators as tabs ("LLM API cost" and "Unrote Assist"), their forms, the blue
   result card, the cost tables and the folds, and the call band under them. After base.css and components.css.
   A change here: bump ?v= of this file in calculator/index.html. */

/* ---- the head and the tabs ---- */
.calc-head {
  padding: 56px 0 24px;
}
.calc-lead {
  margin-top: 24px;
}
.calc-tabs {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.tabb {
  border: 0;
  border-radius: 0;
  background: #dcdcd6;
  color: #181715;
  padding: 14px 20px;
  text-align: left;
  font-family: 'Inter Tight',sans-serif;
  cursor: pointer;
  min-width: 220px;
  transition: background-color 200ms ease;
}
.tabb.on {
  background: #181715;
  color: #e8e8e3;
}
.tabb b {
  display: block;
  font-weight: 600;
  font-size: 17px;
}
.tabb span {
  font-size: 15px;
}
@media (hover:hover) and (pointer:fine) {
  .tabb:hover {
    background: #ffffff;
  }
  .tabb.on:hover {
    background: #2b2a26;
  }
}

/* ---- a calculator: the form on the left, the numbers on the right ---- */
.calc-panel {
  padding: 24px 0 72px;
}
.calc-panel b {
  font-weight: 600;
}
.calc-intro {
  margin: 0 0 28px;
  max-width: 60ch;
  font-weight: 600;
}
.calc-grid {
  display: grid;
  grid-template-columns: minmax(0,5fr) minmax(0,7fr);
  gap: 48px;
  align-items: start;
}
.calc-form {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.calc-pair {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 16px;
}
.calc-hint {
  font-size: 16px;
  color: #55544f;
  max-width: 48ch;
}
.calc-hint b {
  color: #181715;
}
.calc-tiers {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.calc-label {
  display: block;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}
.calc-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
}
.calc-note {
  margin-top: 8px;
  font-size: 15px;
  color: #55544f;
}
.calc-choices {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.calc-choices .note {
  font-size: 15px;
}
.calc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.calc-check {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 16px;
}
.calc-check input {
  accent-color: #2456d6;
  width: 20px;
  height: 20px;
}

/* ---- the numbers: the result card, the tables, the call to action, the folds ---- */
.calc-results {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.calc-hero {
  background: #2456d6;
  color: #ffffff;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.calc-hero.is-cloud {
  background: #dcdcd6;
  color: #181715;
}
.calc-hero-kicker {
  font-size: 17px;
  font-weight: 600;
}
.calc-hero-num {
  font-size: clamp(44px,4.5vw,64px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.calc-hero-line {
  font-size: 18px;
}
.calc-hero-cap {
  margin-top: 4px;
  font-size: 15px;
}
.calc-hero-once {
  color: #d6e0ff;
}
.num {
  text-align: right;
}
.strong {
  font-weight: 600;
}
.calc-sub {
  font-size: 15px;
  color: #55544f;
}
.calc-detail {
  font-size: 16px;
}
.calc-pick {
  background: #dcdcd6;
}
.calc-panel tr.is-main {
  background: #2456d6;
  color: #ffffff;
}
.calc-honest {
  font-size: 16px;
  max-width: 60ch;
}
.calc-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  padding: 28px 0;
  border-top: 1px solid #c8c8c2;
  border-bottom: 1px solid #c8c8c2;
}
.calc-cta-title {
  font-size: 18px;
  font-weight: 600;
  margin-right: auto;
}
.calc-cta-alt {
  font-size: 15px;
}
.fold-hint {
  font-weight: 400;
  color: #55544f;
  font-size: 16px;
  margin-left: auto;
}
.calc-fold {
  padding: 0 0 24px;
}
.calc-fold.is-scroll {
  overflow-x: auto;
}
.calc-text {
  font-size: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 62ch;
}
.calc-footnote {
  margin-top: 12px;
  font-size: 15px;
  color: #55544f;
}

/* ---- the dark call band at the bottom ---- */
.cta-band-alt {
  font-size: 16px;
}
.cta-band-link {
  font-size: 15px;
}
.calc-band .band-body {
  max-width: 40ch;
}
.calc-band .band-actions {
  align-items: center;
}
/* the bars under the three monthly costs (shared/pages/calculator.js sets their length; hidden without JS) */
.calc-bar {
  display: none;
  height: 4px;
  min-width: 72px;
  margin-top: 6px;
  background: #e8e8e3;
}
.js-bars .calc-bar {
  display: block;
}
.calc-bar i {
  display: block;
  height: 100%;
  background: #2456d6;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 400ms cubic-bezier(.23,1,.32,1);
}
.calc-bar [data-bar="cloudCost"] {
  background: #181715;
}
@media (prefers-reduced-motion:reduce) {
  .calc-bar i {
    transition: none;
  }
}