.oic-tool {
  --oic-ink: #25322b;
  --oic-muted: #4d6156;
  --oic-green: #215644;
  --oic-border: #cbd8ce;
  --oic-paper: #fcfaf4;
  color: var(--oic-ink);
  margin-block: 1.5rem 2.5rem;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}
.oic-tool:has(> .oic-side) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.oic-tool *, .oic-tool *::before, .oic-tool *::after { box-sizing: border-box; }
.oic-tool [hidden] { display: none !important; }
.oic-tool .oic-sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.oic-calculator {
  min-inline-size: 0;
  padding: clamp(1rem, 3vw, 2rem);
  background: var(--oic-paper);
  border: 1px solid var(--oic-border);
  border-radius: 1.4rem;
}
.oic-tool .oic-eyebrow {
  font-size: .75rem;
  font-weight: 750;
  letter-spacing: .08em;
  line-height: 1.4;
  text-transform: uppercase;
  margin: 0 0 .8rem;
}
.oic-workbench {
  display: grid;
  gap: clamp(1rem, 2.8vw, 1.6rem);
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
}
.oic-side {
  display: grid;
  gap: .85rem;
  min-inline-size: 0;
}
.oic-field-column { min-inline-size: 0; }
.oic-tool .oic-fields {
  min-inline-size: 0;
  border: 0;
  padding: 0;
  margin: 0;
}
.oic-tool label {
  display: block;
  color: inherit;
  min-inline-size: 0;
  font-weight: 650;
  line-height: 1.45;
}
.oic-tool input, .oic-tool select {
  appearance: auto;
  display: block;
  font: inherit;
  font-size: max(1rem, 16px);
  font-weight: 500;
  line-height: 1.3;
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: 44px;
  color: var(--oic-ink);
  background: #fff;
  border: 1px solid #9cad9f;
  border-radius: .65rem;
  padding: .64rem .72rem;
  margin-block-start: .25rem;
}
.oic-tool [data-oic-amount] { direction: ltr; }
.oic-tool :is(input, select, button, a):focus-visible {
  outline: 2px solid #9d3c20;
  outline-offset: 3px;
}
.oic-tool button {
  font: inherit;
  font-size: .88rem;
  font-weight: 680;
  line-height: 1.2;
  cursor: pointer;
  color: var(--oic-green);
  background: #fff;
  border: 1px solid #9cad9f;
  border-radius: .6rem;
  padding: .54rem .8rem;
  min-block-size: 44px;
  min-inline-size: 44px;
  max-inline-size: 100%;
}
.oic-tool button:hover:not(:disabled) { background: #e6efe7; }
.oic-tool button:disabled { opacity: .65; cursor: default; }
.oic-mode, .oic-quick, .oic-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.oic-mode { margin-block-end: 1rem; }
.oic-tool .oic-mode button[aria-pressed="true"] {
  background: var(--oic-green);
  border-color: var(--oic-green);
  color: #fff;
}
.oic-quick { margin-block: .65rem 1rem; }
.oic-quick button { direction: ltr; padding-inline: .65rem; }
.oic-units {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
  align-items: end;
  gap: .48rem;
}
.oic-tool .oic-swap { padding: .3rem; font-size: 1.3rem; }
.oic-tool .oic-unit-note { margin: .45rem 0 0; color: var(--oic-muted); font-size: .78rem; line-height: 1.45; }
.oic-tool .oic-note, .oic-tool .oic-source-note, .oic-tool .oic-error {
  color: var(--oic-muted);
  font-size: .85rem;
  line-height: 1.5;
  margin-block: .4rem .75rem;
}
.oic-tool .oic-source-note a, .oic-reference a { color: var(--oic-green); text-decoration: underline; }
.oic-tool .oic-error { color: #8a241b; }
.oic-tool [aria-invalid="true"] { border-color: #8a241b; }
.oic-tool [data-oic-ingredient-fields] { margin-block-end: .8rem; }
.oic-result-card {
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--oic-green);
  color: #fff;
  border-radius: 1rem;
  padding: clamp(1rem, 2.9vw, 1.65rem);
}
.oic-tool .oic-result {
  font-size: clamp(1.65rem, 4vw, 2.8rem);
  line-height: 1.12;
  font-weight: 780;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  margin-block: 0 .4rem;
}
.oic-tool .oic-equation, .oic-tool .oic-result-source {
  color: #e4efe7;
  font-size: .92rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
  margin-block: 0 .5rem;
}
.oic-tool .oic-result-source { font-size: .8rem; }
.oic-actions { margin-block-start: .6rem; }
.oic-tool .oic-result-card button {
  background: transparent;
  border-color: #b7d0c4;
  color: #fff;
}
.oic-tool .oic-result-card button:hover:not(:disabled) { background: #396d5a; }
.oic-tool .oic-result-card :focus-visible { outline-color: #fff; }
.oic-tool .oic-action-status { font-size: .82rem; margin-block: .45rem 0; }
.oic-tool .oic-action-status:empty { display: none; }
.oic-tool .oic-manual-copy { margin-block-start: .65rem; font-size: .85rem; }
.oic-reference { margin-block-start: 1.6rem; min-inline-size: 0; }
.oic-reference table { border-collapse: collapse; table-layout: fixed; inline-size: 100%; margin: 0; }
.oic-reference caption { font-weight: 700; text-align: start; margin-block-end: .55rem; }
.oic-reference :is(th, td) {
  border-bottom: 1px solid var(--oic-border);
  padding: .55rem .65rem;
  text-align: start;
  vertical-align: top;
}
.oic-reference thead { background: #ecf2eb; }
.oic-reference tbody tr:nth-child(even) { background: #f7f8f3; }
.oic-side > :is(.oic-reference, .oic-related) {
  min-inline-size: 0;
  margin: 0;
  padding: clamp(.75rem, 1.6vw, 1.15rem);
  border: 1px solid var(--oic-border);
  border-radius: 1rem;
  background: #fff;
}
.oic-side .oic-reference :is(th, td) {
  padding: .3rem .5rem;
  font-size: .87rem;
  line-height: 1.42;
  overflow-wrap: anywhere;
}
.oic-side .oic-reference .oic-note { margin-block-end: 0; }
.oic-side .oic-related :is(h2, h3, p) { font-size: 1.02rem; font-weight: 700; margin: 0 0 .35rem; }
.oic-side .oic-related ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .2rem .65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.oic-side .oic-related li { padding: 0; }
.oic-side .oic-related a {
  display: flex;
  align-items: center;
  min-block-size: 44px;
  min-inline-size: 44px;
  font-size: .9rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

@media (min-width: 60rem) {
  .oic-tool:has(> .oic-side) {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(1.15rem, 2.1vw, 1.8rem);
  }
}

@media (max-width: 43rem) {
  .oic-workbench { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 25rem) {
  .oic-units { grid-template-columns: minmax(0, 1fr) 44px; gap: .5rem; }
  .oic-units label:last-child { grid-column: 1 / -1; }
  .oic-reference :is(th, td) { padding-inline: .35rem; font-size: .85rem; }
}
@media screen {
  .oic-print-sheet { display: none; }
}
@media print {
  body.oic-printing > :not(.oic-print-sheet) { display: none !important; }
  body.oic-printing > .oic-print-sheet {
    display: block !important;
    padding: 1rem;
    color: #000;
    overflow-wrap: anywhere;
  }
  .oic-print-equation { font-size: 1.45rem; font-weight: bold; }
  .oic-tool:has(> .oic-side), .oic-side { display: block; }
  .oic-tool :is(.oic-field-column, .oic-mode, .oic-actions, .oic-manual-copy, .oic-action-status) { display: none !important; }
  .oic-result-card { color: #000; background: #fff; }
  .oic-tool :is(.oic-equation, .oic-result-source) { color: #000; }
}