/* lot size calculator (guides/lot-size-calculator) */
.rc { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0; margin: 0 0 44px; border-radius: 22px; overflow: hidden;
  background: rgba(6, 14, 10, .6); border: 1px solid rgba(46, 229, 157, .28); box-shadow: 0 40px 80px -50px rgba(46, 229, 157, .35); }
.rc-form { display: grid; gap: 18px; padding: 26px; align-content: start; }
.rc-field { display: grid; gap: 7px; }
.rc-field[hidden] { display: none; }
.rc-field > label, .rc-label { font-size: .9rem; font-weight: 600; color: #e6f4ee; }
.rc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.rc input, .rc select { width: 100%; min-height: 48px; padding: 0 14px; border-radius: 12px; font: inherit; font-size: 1rem; color: #fff;
  background: #030806; border: 1px solid rgba(255, 255, 255, .14); font-variant-numeric: tabular-nums;
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.rc select { appearance: none; padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2393a8a0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
.rc select option { background: #0b1511; color: #fff; }
.rc-row select { width: auto; min-width: 96px; }
.rc input:hover, .rc select:hover { border-color: rgba(255, 255, 255, .26); }
.rc input:focus, .rc select:focus { outline: none; border-color: rgba(46, 229, 157, .7); box-shadow: 0 0 0 3px rgba(46, 229, 157, .18); }
.rc-suffix { position: relative; }
.rc-suffix input { padding-right: 52px; }
.rc-suffix span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #93a8a0; font-size: .95rem; pointer-events: none; }
.rc-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.rc-chips button { min-height: 36px; padding: 0 14px; border-radius: 999px; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  color: #cfe3da; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12);
  transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out), transform .12s var(--ease-out); }
.rc-chips button:hover { border-color: rgba(255, 255, 255, .28); }
.rc-chips button:active { transform: scale(.97); }
.rc-chips button[aria-pressed="true"] { color: #fff; background: rgba(46, 229, 157, .12); border-color: rgba(46, 229, 157, .55); }
.rc-hint { margin: 0 !important; font-size: .85rem; color: #93a8a0 !important; }

.rc-out { display: flex; flex-direction: column; gap: 18px; padding: 26px; background: linear-gradient(160deg, rgba(46, 229, 157, .10), rgba(46, 229, 157, .02) 60%);
  border-left: 1px solid rgba(255, 255, 255, .08); }
.rc-out-label { font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: #93a8a0; font-weight: 600; }
.rc-big { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.rc-big output { font-family: var(--display); font-size: clamp(3rem, 6vw, 4.2rem); line-height: 1; font-weight: 700; letter-spacing: -0.04em; color: #fff; font-variant-numeric: tabular-nums; }
.rc-big span { font-size: 1.15rem; color: #cfe3da; }
.rc-copy { margin-left: auto; align-self: center; min-height: 36px; padding: 0 14px; border-radius: 999px; font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
  color: #e6f4ee; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); transition: background-color .2s var(--ease-out), transform .12s var(--ease-out); }
.rc-copy:hover:not(:disabled) { background: rgba(255, 255, 255, .12); }
.rc-copy:active:not(:disabled) { transform: scale(.97); }
.rc-copy:disabled { opacity: .4; cursor: default; }
.rc-lines { margin: 0; display: grid; }
.rc-lines div { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.rc-lines dt { color: #a8b8b1; }
.rc-lines dd { margin: 0; color: #fff; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.rc-streak { display: grid; gap: 12px; padding: 16px; border-radius: 14px; background: rgba(3, 8, 6, .55); border: 1px solid rgba(255, 255, 255, .08); }
.rc-streak-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; }
.rc-streak-top span { color: #a8b8b1; }
.rc-streak-top b { color: #fff; font-variant-numeric: tabular-nums; }
/* the right gutter keeps the -10% label clear of the bars, however tall they get */
.rc-bars { position: relative; display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; align-items: end; height: 70px; padding-right: 50px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.rc-bars b { display: block; height: 100%; border-radius: 4px 4px 0 0; transform-origin: bottom center; transform: scaleY(0);
  background: linear-gradient(180deg, #7CF5C2, #1fbf82); transition: transform .45s var(--ease-out), background-color .2s; }
.rc-bars b.over { background: linear-gradient(180deg, #ff8a8a, #e0525a); }
.rc-limit { position: absolute; left: 0; right: 0; bottom: 0; border-top: 1px dashed rgba(255, 255, 255, .45); pointer-events: none; transition: bottom .45s var(--ease-out); }
.rc-limit { z-index: 1; }
.rc-limit span { position: absolute; right: 0; bottom: 0; transform: translateY(50%); font-size: .75rem; font-weight: 600; font-style: normal; color: #fff; background: #0b1511; padding: 1px 6px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .2); }
.rc-streak-note { margin: 0 !important; font-size: .85rem; color: #a8b8b1 !important; }
.rc-note { margin: auto 0 0 !important; font-size: .85rem; color: #93a8a0 !important; min-height: 2.6em; }
.rc-nojs { grid-column: 1 / -1; margin: 0 !important; padding: 14px 26px; font-size: .9rem; border-top: 1px solid rgba(255, 255, 255, .08); }
.rc.is-live .rc-nojs { display: none; }

@media (max-width: 760px) {
  .rc { grid-template-columns: 1fr; border-radius: 18px; }
  .rc-form, .rc-out { padding: 20px; }
  .rc-out { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .08); }
}
@media (prefers-reduced-motion: reduce) {
  .rc input, .rc select, .rc-chips button, .rc-copy, .rc-bars b, .rc-limit { transition: none; }
}