/* Vial Dose Optimizer styles */ :root { color-scheme: light; } /* Dark mode: Stellar flips all scales via .dark class on . Aliases resolve to dark values automatically. */ .dark { color-scheme: dark; } body { font-family: var(--font-sans); background: var(--neutral-1); color: var(--neutral-12); line-height: var(--font-line-height-1); } .container { max-width: 720px; margin: 0 auto; padding: var(--size-3) var(--size-0); } h1 { font-size: var(--font-size-2); margin-bottom: var(--size-2); } label { display: block; font-weight: var(--font-weight-semi-bold); margin-bottom: var(--size--4); font-size: var(--font-size--1); } select, input[type="number"] { width: 100%; padding: var(--size--2); border: var(--border-width-0) solid var(--neutral-5); border-radius: var(--border-radius-0); font-size: var(--font-size-0); background: var(--neutral-2); color: var(--neutral-12); } .field { margin-bottom: var(--size-0); } .row { display: flex; gap: var(--size-0); } .row > .field { flex: 1; } button.calculate { width: 100%; padding: var(--size--1); background: var(--primary-7); color: var(--primary-7-on); border: none; border-radius: var(--border-radius-0); font-size: var(--font-size-0); font-weight: var(--font-weight-semi-bold); cursor: pointer; margin-top: var(--size--2); } button.calculate:hover { background: var(--primary-8); } button.calculate:disabled { opacity: 0.5; cursor: not-allowed; } #results { margin-top: var(--size-2); } .card { background: var(--neutral-2); border-radius: var(--border-radius-1); padding: var(--size-1); box-shadow: var(--shadow-2); margin-bottom: var(--size-0); } .result-header { font-weight: var(--font-weight-semi-bold); margin-bottom: var(--size--2); } .vial-toggle { display: flex; gap: var(--size--3); margin-bottom: var(--size--2); } .vial-toggle button { background: var(--neutral-3); border: var(--border-width-0) solid var(--neutral-4); border-radius: 999px; color: var(--neutral-11); cursor: pointer; font-size: var(--font-size--2); padding: 0.2rem var(--size--1); transition: all var(--anim-duration-fast); } .vial-toggle button:hover { background: var(--neutral-4); border-color: var(--neutral-5); } .vial-list { list-style: none; padding: 0; } .vial-list li { padding: var(--size--4) 0; } .vial-list label { display: flex; align-items: center; gap: var(--size--2); cursor: pointer; } .vial-list input[type="checkbox"] { width: 1rem; height: 1rem; accent-color: var(--primary-7); } .waste-ok { color: var(--secondary-7); } .waste-warn { color: var(--tertiary-7); } .waste-over { color: var(--error-7); } .exact { color: var(--secondary-7); font-weight: var(--font-weight-semi-bold); } .meta { font-size: var(--font-size--1); color: var(--neutral-8); margin-top: var(--size--2); } .badge { display: inline-block; padding: var(--size--4) var(--size--2); border-radius: 999px; font-size: var(--font-size--2); font-weight: var(--font-weight-semi-bold); } .badge-exact { background: var(--secondary-2); color: var(--secondary-11); } .badge-up { background: var(--tertiary-2); color: var(--tertiary-11); } .badge-down { background: var(--primary-2); color: var(--primary-11); } .empty { text-align: center; padding: var(--size-3); color: var(--neutral-7); } .waste-cost { margin-top: var(--size--1); padding-top: var(--size--1); border-top: var(--border-width-0) solid var(--neutral-4); font-size: var(--font-size--1); color: var(--neutral-8); } .rate-info { margin-top: var(--size--1); padding-top: var(--size--1); border-top: var(--border-width-0) solid var(--neutral-4); font-size: var(--font-size--1); color: var(--neutral-8); } .waste-cost-header { font-weight: var(--font-weight-semi-bold); font-size: var(--font-size--1); color: var(--neutral-11); margin-bottom: var(--size--2); } .calc-table { border-collapse: collapse; width: 100%; margin-bottom: var(--size--2); } .calc-table td { padding: var(--size--4) var(--size--2) var(--size--4) 0; vertical-align: top; } .calc-table tr.calc-label td { padding-top: var(--size--3); font-weight: var(--font-weight-semi-bold); color: var(--neutral-11); font-size: var(--font-size--2); text-transform: uppercase; letter-spacing: var(--font-letter-spacing-1); } .calc-detail { color: var(--neutral-7); font-size: var(--font-size--2); } .calc-section { margin-top: var(--size--2); padding-top: var(--size--2); border-top: var(--border-width-0) dashed var(--neutral-4); } .calc-section .calc-label { font-weight: var(--font-weight-semi-bold); color: var(--neutral-11); font-size: var(--font-size--2); text-transform: uppercase; letter-spacing: var(--font-letter-spacing-1); margin-bottom: var(--size--4); } .calc-formula { font-family: var(--font-mono); font-size: var(--font-size--2); color: var(--neutral-8); margin-bottom: var(--size--4); } .savings { color: var(--secondary-7); } .savings strong { font-weight: var(--font-weight-bold); } .calc-sources { margin-top: var(--size--2); padding-top: var(--size--2); border-top: var(--border-width-0) dashed var(--neutral-4); font-size: var(--font-size--2); color: var(--neutral-7); } /* Drug picker */ .drug-picker { max-height: 20rem; overflow-y: auto; border: var(--border-width-0) solid var(--neutral-5); border-radius: var(--border-radius-0); background: var(--neutral-2); } .drug-picker input[type="search"] { width: 100%; padding: var(--size--2) var(--size--1); border: none; border-bottom: var(--border-width-0) solid var(--neutral-4); font-size: var(--font-size--1); outline: none; position: sticky; top: 0; background: var(--neutral-2); color: var(--neutral-12); z-index: 1; } .drug-picker .drug-btn { display: block; width: 100%; text-align: left; padding: var(--size--3) var(--size--1); border: none; background: none; font-size: var(--font-size--1); cursor: pointer; color: var(--neutral-12); } .drug-picker .drug-btn:hover { background: var(--primary-1); } .drug-picker .drug-btn[aria-pressed="true"] { background: var(--primary-7); color: var(--primary-7-on); font-weight: var(--font-weight-semi-bold); } .drug-picker .drug-btn .brand { font-weight: var(--font-weight-normal); opacity: 0.6; font-size: var(--font-size--1); } .drug-picker .drug-btn .hcpcs { font-family: var(--font-mono); font-size: var(--font-size--2); color: var(--neutral-7); margin-left: var(--size--4); } .drug-picker .no-results { padding: var(--size-0); text-align: center; color: var(--neutral-7); font-size: var(--font-size--1); } .selected-drug { display: flex; align-items: center; gap: var(--size--2); padding: var(--size--2) var(--size--1); margin-top: var(--size--2); background: var(--primary-7); color: var(--primary-7-on); border-radius: var(--border-radius-0); font-size: var(--font-size--1); font-weight: var(--font-weight-semi-bold); } .selected-drug button { background: none; border: none; color: var(--primary-7-on); cursor: pointer; font-size: var(--font-size-0); line-height: 1; padding: 0 var(--size--4); opacity: 0.7; } .selected-drug button:hover { opacity: 1; }