/* SCHITAY CSS Phase 2: Shared calculator shell, forms, results, Save/Share and standard calculator families. */

.calculator-page > .container {
width:min(var(--shell-tool-max),calc(100% - 96px)); margin-inline:auto;
}

/* Time arithmetic */
.time-calculator__form {
  display: grid;
  gap: 16px;
}

.time-calculator__mode-selector,
.time-calculator__row,
.time-calculator__clock,
.time-calculator__duration-fields {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.time-calculator__mode-selector {
  display: grid;
  gap: 8px;
}

.time-calculator__mode-selector > legend,
.time-calculator__row > legend,
.time-calculator__clock > legend,
.time-calculator__duration-fields > legend {
  margin-bottom: 8px;
  color: #58536b;
  font-size: 13px;
  font-weight: 800;
}

.time-calculator__mode-selector > legend {
  margin-bottom: 0;
}

.time-calculator__mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  gap: 8px;
}

.time-calculator__mode-grid label {
  display: flex;
  min-width: 0;
  cursor: pointer;
}

.time-calculator__mode-grid input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.time-calculator__mode-grid span {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border: 1px solid #ddd8ed;
  border-radius: 11px;
  background: #faf9fd;
  color: #59536c;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}

.time-calculator__mode-grid input:checked + span {
  border-color: #7147ef;
  background: #f1ecff;
  color: #4f28ce;
  box-shadow: inset 0 0 0 1px #7147ef;
}

.time-calculator__mode-grid input:focus-visible + span {
  outline: 3px solid rgba(113, 71, 239, .24);
  outline-offset: 2px;
}

.time-calculator__panel {
  display: grid;
  gap: 16px;
  padding: 20px;
  border: 1px solid #e9e5f0;
  border-radius: 14px;
  background: #faf9fc;
}

.time-calculator__panel[hidden] {
  display: none;
}

.time-calculator__panel-heading {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.time-calculator__panel-heading h3,
.time-calculator__panel-heading p {
  margin: 0;
}

.time-calculator__panel-heading h3 {
  font-size: 18px;
}

.time-calculator__panel-heading p {
  margin-top: 5px;
  color: #6d687c;
  font-size: 14px;
  line-height: 1.45;
}

.time-calculator__rows {
  display: grid;
  gap: 10px;
}

.time-calculator__row {
  display: grid;
  grid-template-columns: 68px repeat(3, minmax(112px, 160px)) auto;
  width: min(100%, 720px);
  align-items: end;
  gap: 10px;
  padding: 13px;
  border: 1px solid #eeeaf4;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(45, 32, 75, .04);
}

.time-calculator__row > legend {
  grid-column: 1 / -1;
  float: left;
  width: 100%;
}

.time-calculator__row .field,
.time-calculator__clock .field,
.time-calculator__duration-fields .field,
.time-calculator__shift-operation {
  min-width: 0;
  margin-bottom: 0;
}

.time-calculator .time-calculator__row .field,
.time-calculator .time-calculator__duration-fields .field {
  gap: 6px;
  font-size: 12px;
  line-height: 1.2;
}

.time-calculator .time-calculator__row input,
.time-calculator .time-calculator__row select,
.time-calculator__clock input,
.time-calculator .time-calculator__duration-fields input,
.time-calculator .time-calculator__shift-operation select {
  width: 100%;
  max-width: 100%;
  height: 48px;
  box-sizing: border-box;
  font-variant-numeric: tabular-nums;
}

.time-calculator__operation select,
.time-calculator__shift-operation select {
  font-size: 20px;
  font-weight: 800;
}

.time-calculator__remove {
  min-height: 46px;
  border: 0;
  background: transparent;
  color: #9a3155;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.time-calculator__remove:disabled {
  visibility: hidden;
}

.time-calculator__secondary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.time-calculator__secondary-actions .secondary-button {
  min-width: 0;
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 11px;
}

.time-calculator__clock-pair {
  display: grid;
  grid-template-columns: minmax(250px, 320px) 44px minmax(250px, 320px);
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.time-calculator__clock {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr) 16px minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  align-items: end;
  gap: 4px;
  padding: 12px;
  border: 1px solid #eeeaf4;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(45, 32, 75, .04);
}

.time-calculator__clock > legend {
  grid-column: 1 / -1;
  float: left;
  width: 100%;
}

.time-calculator__clock label {
  display: grid;
  min-width: 0;
  gap: 6px;
  margin: 0;
}

.time-calculator__clock label span {
  color: #6d687c;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.time-calculator__clock > span {
  display: grid;
  height: 48px;
  align-self: end;
  place-items: center;
  color: #8a8498;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.time-calculator__clock input {
  min-width: 0;
  height: 48px;
  padding-inline: 8px;
  border-color: transparent;
  border-radius: 9px;
  background: #f5f3f8;
  text-align: center;
}

.time-calculator__swap {
  display: grid;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  place-items: center;
  padding: 0;
  border-radius: 12px;
  font-size: 0;
  white-space: nowrap;
}

.time-calculator__swap::before {
  content: "⇄";
  font-size: 20px;
  line-height: 1;
}

.time-calculator__next-day {
  width: fit-content;
  margin: 0;
}

.time-calculator__helper {
  max-width: 720px;
  margin: 0;
  color: #625b75;
  font-size: 14px;
  line-height: 1.45;
}

.time-calculator__helper--warning {
  padding: 10px 12px;
  border: 1px solid #f1c97b;
  border-radius: 10px;
  background: #fff8e8;
  color: #714a00;
}

.time-calculator__shift-grid {
  display: grid;
  grid-template-columns: minmax(250px, 320px) 64px minmax(280px, 360px);
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.time-calculator__shift-operation {
  display: grid;
  width: 64px;
  align-self: center;
  justify-self: center;
  gap: 6px;
}

.time-calculator__shift-operation > span {
  color: #6d687c;
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
}

.time-calculator .time-calculator__shift-operation select {
  padding: 0 24px 0 10px;
  border-radius: 11px;
  background-position: right 9px center;
  text-align: center;
}

.time-calculator__duration-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  gap: 8px;
  padding: 12px;
  border: 1px solid #eeeaf4;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(45, 32, 75, .04);
}

.time-calculator__duration-fields > legend {
  grid-column: 1 / -1;
  float: left;
  width: 100%;
}

.time-calculator .time-calculator__duration-fields input {
  padding-inline: 8px;
  text-align: center;
}

.time-calculator__result:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.time-calculator__result-heading {
  display: grid;
  gap: 6px;
}

.time-calculator__result-heading h2,
.time-calculator__result .result-note,
.time-calculator__result .section-kicker {
  margin: 0;
}

.time-calculator__primary {
  display: grid;
  justify-items: start;
  gap: 4px;
  padding: 20px;
  border-radius: 14px;
  background: linear-gradient(135deg, #f0eaff, #f8f6ff);
}

.time-calculator__primary span,
.time-calculator__primary small {
  color: #655e76;
  font-weight: 700;
}

.time-calculator__primary strong {
  color: #35205d;
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.1;
  overflow-wrap: normal;
  word-break: normal;
}

.time-calculator__primary small {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.time-calculator__badge {
  width: fit-content;
  margin: 0;
  padding: 7px 10px;
  border-radius: 999px;
  background: #eaf8ed;
  color: #176c2c;
  font-size: 13px;
  font-weight: 800;
}

.time-calculator__metrics {
  margin-top: 0;
}

.time-calculator__ledger {
  min-width: 0;
  width: 100%;
  margin: 0;
  border: 1px solid #e2ddec;
  border-radius: 12px;
  background: #fff;
}

.time-calculator__ledger summary {
  padding: 13px 15px;
  color: #4f28ce;
  font-weight: 800;
  cursor: pointer;
}

.time-calculator__ledger > div {
  overflow-x: auto;
  max-width: 100%;
  padding: 0 15px 15px;
}

.time-calculator__ledger table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.time-calculator__ledger th,
.time-calculator__ledger td {
  padding: 8px;
  border-bottom: 1px solid #ece8f2;
  text-align: left;
  white-space: nowrap;
}

.time-calculator__result-actions {
  display: grid;
  justify-items: start;
  gap: 8px;
  padding-bottom: 8px;
}

@media (max-width: 900px) {
  .time-calculator__clock-pair,
  .time-calculator__shift-grid {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .time-calculator__clock,
  .time-calculator__duration-fields {
    max-width: 360px;
  }

  .time-calculator__swap {
    justify-self: center;
  }
}

@media (max-width: 760px) {
  .time-calculator__mode-grid {
    grid-template-columns: 1fr;
  }

  .time-calculator__mode-grid span {
    min-height: 44px;
  }

  .time-calculator__row {
    grid-template-columns: 70px repeat(3, minmax(0, 1fr));
  }

  .time-calculator__remove {
    grid-column: 1 / -1;
    min-height: 32px;
    justify-self: start;
  }

}

@media (max-width: 430px) {
  .time-calculator__form {
    gap: 14px;
  }

  .time-calculator__panel {
    gap: 14px;
    padding: 13px;
  }

  .time-calculator__panel-heading {
    align-items: center;
    gap: 10px;
  }

  .time-calculator__row {
    grid-template-columns: 64px repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 10px;
  }

  .time-calculator__row .field span,
  .time-calculator__duration-fields .field span {
    font-size: 11px;
  }

  .time-calculator__row input,
  .time-calculator__row select,
  .time-calculator__duration-fields input,
  .time-calculator__shift-operation select {
    min-height: 44px;
    padding-inline: 6px;
  }

  .time-calculator__clock {
    max-width: none;
    gap: 4px;
    padding: 10px;
  }

  .time-calculator__clock input {
    min-height: 44px;
    padding-inline: 4px;
  }

  .time-calculator__duration-fields {
    max-width: none;
    gap: 6px;
    padding: 10px;
  }
}
.calculator-page h1 {
margin: 8px 0 10px; font-size: clamp(38px, 5vw, 64px); line-height: .98; letter-spacing: -.06em;
}
.compact-heading {
align-items: center;
}
.calculator-page {
padding: 42px 0 95px;
}
.calculator-breadcrumbs {
margin-bottom: 54px;
}
.calculator-layout {
display: grid; grid-template-columns: minmax(0, 1fr) var(--tool-sidebar-width); gap: var(--tool-layout-gap); align-items: start;
}
.calculator-layout--without-sidebar {
width:100%; max-width:var(--tool-main-max); margin-inline:auto; grid-template-columns:minmax(0,1fr);
}
.calculator-layout > *,
.calculator-widget {
min-width:0; max-width:100%;
}
.calculator-layout > article > .notice {
width:100%; max-width:100%;
}
.calculator-page .saved-calculation-actions {
width:100%; max-width:100%; margin-inline:auto;
}
.calculator-demo {
padding: 27px; border: 1px solid var(--line); border-radius: 26px; background: #fff; box-shadow: 0 18px 45px rgba(29,23,62,.055);
}
.demo-head {
display: flex; align-items: center; gap: 14px; padding-bottom: 22px; border-bottom: 1px solid var(--line);
}
.demo-head > div {
display: flex; flex-direction: column; gap: 4px;
}
.demo-head strong {
font-size: 14px;
}
.demo-head small {
color: var(--muted); font-size: 10px;
}
.demo-fields {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 24px 0 16px;
}
.demo-fields label {
display: flex; flex-direction: column; gap: 8px; color: #555762; font-size: 11px; font-weight: 700;
}
.demo-fields input {
height: 53px; padding: 0 15px; border: 1px solid var(--line); border-radius: 13px; background: #faf9f6; color: #666873;
}
.calculator-demo button {
width: 100%; height: 54px; border: 0; border-radius: 14px; color: #fff; background: var(--violet); font-weight: 800; opacity: .78;
}
.prototype-note {
margin: 14px 0 0; color: #656771; font-size: 10px; line-height: 1.5; text-align: center;
}
.calculator-sidebar {
position: sticky; top: 100px;
}
.related-card {
padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: #fff;
}
.related-card h2 {
margin: 8px 0 13px; font-size: 20px;
}
.related-card a {
display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 11px 0; border-top: 1px solid #efede8; font-size: 12px; line-height: 1.35;
}
.related-card a span {
color: var(--violet);
}
.calculator-widget {
padding: 28px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(29,23,62,.055);
}
.widget-head {
display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 23px;
  border-bottom: 1px solid var(--line);
}
.widget-head > div {
display: flex; flex-direction: column; gap: 4px;
}
.widget-head strong {
font-size: 15px;
}
.widget-head small {
color: var(--muted); font-size: 10px;
}
.calc-form {
margin-top: 25px;
}
.form-grid {
display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 15px;
}

/* Birth-chart presentation shares the calculator controls and responsive shell. */
.bazi-calculator .field input, .bazi-calculator .field select { min-width: 0; max-width: 100%; box-sizing: border-box; }
.bazi-settings, .bazi-method { margin: 18px 0; }
.bazi-settings > summary, .bazi-method > summary { cursor: pointer; font-weight: 700; margin-bottom: 14px; }
.bazi-pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: 100%; }
.bazi-pillar { min-width: 0; padding: 16px; border: 1px solid var(--line, #dedbd4); border-top: 4px solid #79747f; border-radius: 14px; background: #faf9f6; }
.bazi-pillar--day { background: #f5f1ff; box-shadow: inset 0 0 0 1px var(--violet); }
.bazi-pillar h3, .bazi-pillar h4 { margin: 0 0 10px; }
.bazi-pillar p, .bazi-pillar li, .bazi-pillar summary { font-size: 14px; line-height: 1.55; overflow-wrap: break-word; }
.bazi-pillar .bazi-symbols { font-family: system-ui, sans-serif; font-size: 38px; line-height: 1.35; margin: 12px 0; }
.bazi-pillar ul { padding-left: 18px; }
.bazi-master { padding: 14px 16px; background: #f5f1ff; border-radius: 12px; font-weight: 700; }
.bazi-warnings { padding-left: 22px; color: #705217; line-height: 1.6; }
.bazi-elements { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.bazi-element { min-width: 0; padding: 12px; border: 1px solid var(--line, #dedbd4); border-top: 4px solid #79747f; border-radius: 12px; }
.bazi-element p { font-size: 13px; line-height: 1.5; margin: 8px 0 0; }
.bazi-calculator [data-element="0"] { border-top-color: #39774c; }
.bazi-calculator [data-element="1"] { border-top-color: #b54b35; }
.bazi-calculator [data-element="2"] { border-top-color: #947027; }
.bazi-calculator [data-element="3"] { border-top-color: #68727d; }
.bazi-calculator [data-element="4"] { border-top-color: #367497; }
.bazi-method dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 8px 12px; }
.bazi-method dt { font-weight: 700; }
.bazi-method dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .bazi-pillars, .bazi-elements { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .bazi-calculator .form-grid, .bazi-method dl { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 400px) {
  .bazi-pillars, .bazi-elements { grid-template-columns: minmax(0, 1fr); }
}
.field {
display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 15px;
  color: #555762;
  font-size: 11px;
  font-weight: 750;
}
.field-wide {
grid-column: 1 / -1;
}
.field input,
.field select {
width: 100%;
  height: 54px;
  padding: 0 15px;
  border: 1px solid #dedbd4;
  border-radius: 13px;
  outline: 0;
  background: #faf9f6;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  transition: border-color .2s, box-shadow .2s;
}
.field select {
-webkit-appearance:none; appearance:none; padding-right:46px; 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.25 6 6.25 11 1.25' fill='none' stroke='%2321222d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 18px center; background-size:12px 8px;
}
.field input:focus,
.field select:focus {
border-color: var(--violet);
  box-shadow: 0 0 0 4px rgba(99,62,229,.1);
}
.field input:disabled,
.field select:disabled {
color:#8a8890; background-color:#efede8; cursor:not-allowed;
}
.field > small {
margin-top:-2px; color:var(--muted); font-size:9px; font-weight:600; line-height:1.45;
}
.field-label-row {
display:flex; align-items:center; gap:7px;
}
.field-help {
width:20px; height:20px; display:grid; place-items:center; flex:0 0 20px; padding:0; border:1px solid #cfc7e7; border-radius:50%; color:var(--violet); background:#f7f4ff; cursor:help; font:inherit; font-size:10px; font-weight:850;
}
.result-item small {
color:var(--muted); font-size:10px; line-height:1.25;
}
.result-item-accent small {
color:#e8e2ff;
}
.schedule > p {
margin:-7px 0 13px; color:var(--muted); font-size:9px; line-height:1.5;
}
.check-field {
display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 18px;
  color: var(--muted);
  font-size: 12px;
}
.check-field input {
width: 18px; height: 18px; accent-color: var(--violet);
}
.field > span small {
color: var(--muted); font-size: 9px; font-weight: 650;
}
.calc-error {
margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid #f3c5c5;
  border-radius: 12px;
  background: #fff1f1;
  color: #a33434;
  font-size: 12px;
  line-height: 1.5;
}
.calc-result {
margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.result-grid {
display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 13px;
}
.result-item {
min-height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  padding: 16px;
  border-radius: 15px;
  background: #f5f3ee;
}
.result-item span {
color: var(--muted); font-size: 10px; line-height: 1.35;
}
.result-item strong {
font-size: 18px; line-height: 1.15; letter-spacing: -.025em;
}
.result-item-accent {
color: #fff; background: var(--violet);
}
.result-item-accent span {
color: #f2efff;
}
.result-note {
margin: 13px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55;
}
.schedule {
margin-top: 25px; padding-top: 23px; border-top: 1px solid var(--line);
}
.schedule h2 {
margin: 0 0 14px; font-size: 18px;
}
.table-scroll {
overflow-x: auto; border: 1px solid var(--line); border-radius: 13px;
}
.schedule table {
width: 100%; border-collapse: collapse; background: #fff; font-size: 11px;
}
.schedule th,
.schedule td {
padding: 11px 13px; border-bottom: 1px solid #eeece7; text-align: right; white-space: nowrap;
}
.schedule th:first-child,
.schedule td:first-child {
text-align: left;
}
.schedule th {
color: var(--muted); background: #f6f4ef; font-size: 9px; text-transform: uppercase;
}
.schedule.is-expanded .table-scroll {
max-height: 70vh; overflow: auto;
}
.schedule.is-expanded thead th {
position: sticky; top: 0; z-index: 3;
}
.schedule th:first-child,
.schedule td:first-child {
position: sticky; left: 0; z-index: 2; background: #fff;
}
.schedule th:first-child {
z-index: 4; background: #f6f4ef;
}
.notice {
display: grid; grid-template-columns: auto 1fr; gap: 12px 16px; margin-top: 20px; padding: 18px 20px; border: 1px solid #eadca8; border-radius: 16px; background: #fff9df;
}
.notice strong {
color: #756019; font-size: 11px; text-transform: uppercase;
}
.notice p {
margin: 0; color: #766c4b; font-size: 11px; line-height: 1.55;
}
.related-soon {
display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid #efede8;
  color: #62646f;
  font-size: 12px;
  line-height: 1.35;
}
.related-soon small {
font-size: 9px; text-transform: uppercase;
}
@media (max-width: 1199px) {
.calculator-page > .container {
width:min(var(--shell-content-max),calc(100% - 40px));
}
.calculator-layout {
grid-template-columns:minmax(0,1fr);
}
.calculator-sidebar {
position:static;
}
}
@media (max-width: 720px) {
.calculator-page > .container {
width:min(100% - 28px,var(--shell-tool-max));
}
.calculator-layout,
.demo-fields,
.form-grid,
.result-grid {
grid-template-columns: 1fr;
}
.calculator-page h1 {
font-size: 42px;
}
.calculator-sidebar {
position: static;
}
.calculator-widget {
padding: 20px;
}
}
input[data-number-format-ready="true"] {
font-variant-numeric: tabular-nums;
}
.demo-head small,
.demo-fields label,
.prototype-note,
.related-card a {
font-size: var(--text-sm);
    line-height: 1.55;
}
.widget-head strong {
font-size: var(--text-lg);
    line-height: 1.35;
}
.calculator-page h1 {
font-size: clamp(2rem, 3.2vw, 2.5rem);
    line-height: 1.08;
    letter-spacing: -.045em;
}
.notice p {
font-size: var(--text-sm);
    line-height: var(--leading-copy);
}
.related-soon {
font-size: var(--text-sm);
}
.related-soon small {
font-size: var(--text-xs) !important;
}
.demo-fields input,
.field input,
.field select {
font-size: var(--text-base);
}
.widget-head small,
.field,
.field > small,
.schedule > p,
.result-note,
.calc-error {
font-size: var(--text-sm);
    line-height: var(--leading-copy);
}
.field {
font-weight: 650;
}
.field-help,
.field > span small,
.result-item span,
.result-item small,
.notice strong {
font-size: var(--text-xs);
}
.check-field {
font-size: var(--text-sm);
}
.schedule table {
font-size: var(--text-sm);
    line-height: 1.45;
}
.schedule th {
font-size: var(--text-xs);
}
.vat-tool,
.vat-calculator,
.vat-form,
.vat-mode-selector,
.vat-rate-selector,
.vat-result,
.vat-comparison {
width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
}
.vat-mode-selector,
.vat-rate-selector {
margin:0 0 18px;
    padding:16px;
    border:1px solid #d8d1ef;
    border-radius:16px;
    background:#f8f5ff;
}
.vat-mode-selector legend,
.vat-rate-selector legend {
padding:0 7px;
    color:var(--ink);
    font-size:var(--text-sm);
    font-weight:850;
}
.vat-mode-selector > div {
display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
}
.vat-mode-selector label,
.vat-rate-option,
.vat-rate-historical {
position:relative;
    min-width:0;
    cursor:pointer;
}
.vat-mode-selector input,
.vat-rate-option input,
.vat-rate-historical input {
position:absolute;
    width:1px;
    height:1px;
    opacity:0;
}
.vat-mode-selector label > span {
min-height:62px;
    display:flex;
    min-width:0;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:3px;
    padding:9px 10px;
    border:1px solid #ddd7ef;
    border-radius:12px;
    color:#5c5668;
    background:#fff;
    line-height:1.3;
    text-align:center;
}
.vat-mode-selector label > span b {
font-size:var(--text-reading);
}
.vat-mode-selector label > span small {
font-size:var(--text-xs); font-weight:650;
}
.vat-mode-selector input:checked + span {
color:#fff; border-color:var(--violet); background:var(--violet); box-shadow:0 7px 15px rgba(99,62,229,.18);
}
.vat-mode-selector input:checked + span small {
color:#eeeaff;
}
.vat-mode-selector input:focus-visible + span,
.vat-rate-option input:focus-visible + span,
.vat-rate-historical input:focus-visible + span {
outline:3px solid rgba(99,62,229,.2); outline-offset:2px;
}
.vat-mode-selector > p,
.vat-rate-help {
margin:11px 0 0; color:#625b72; font-size:var(--text-sm); line-height:var(--leading-copy);
}
.vat-rate-grid {
display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
}
.vat-rate-option > span {
min-height:50px;
    display:flex;
    min-width:0;
    align-items:center;
    justify-content:center;
    gap:5px;
    padding:8px;
    border:1px solid #ddd7ef;
    border-radius:11px;
    color:#4f4860;
    background:#fff;
    text-align:center;
}
.vat-rate-option b {
font-size:var(--text-base);
}
.vat-rate-option small {
color:var(--muted); font-size:var(--text-xs); font-weight:750;
}
.vat-rate-option input:checked + span,
.vat-rate-historical input:checked + span {
color:#fff; border-color:var(--violet); background:var(--violet);
}
.vat-rate-option input:checked + span small,
.vat-rate-historical input:checked + span small {
color:#eeeaff;
}
.vat-rate-option--special > span {
border-color:#d4dfaa; background:#fcffe9;
}
.vat-rate-historical {
display:block; margin-top:8px;
}
.vat-rate-historical > span {
min-height:48px; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:10px; padding:9px 12px; border:1px dashed #cfc8bd; border-radius:11px; color:#56525b; background:#fff;
}
.vat-rate-historical b {
font-size:var(--text-base);
}
.vat-rate-historical small {
min-width:0; color:var(--muted); font-size:var(--text-xs); line-height:1.4;
}
.vat-custom-rate[hidden] {
display:none;
}
.vat-custom-rate input {
max-width:100%; box-sizing:border-box;
}
.vat-result-heading {
margin:8px 0 0; font-size:22px; line-height:1.2;
}
.vat-result-heading:focus {
outline:0;
}
.vat-result-grid {
grid-template-columns:repeat(3,minmax(0,1fr));
}
.vat-result-grid .result-item {
min-width:0;
}
.vat-result-grid .result-item strong {
overflow-wrap:normal; word-break:normal;
}
.vat-copy-inline {
align-self:flex-start; min-height:44px; padding:9px 0; border:0; color:var(--violet); background:transparent; font:inherit; font-size:var(--text-xs); font-weight:800; cursor:pointer;
}
.vat-result-grid .result-item-accent .vat-copy-inline {
color:#fff; text-decoration:underline; text-underline-offset:3px;
}
.vat-explanation {
margin-top:18px; padding:17px; border:1px solid var(--line); border-radius:14px; background:#faf9f6;
}
.vat-explanation h3 {
margin:0 0 10px; font-size:var(--text-base);
}
.vat-explanation ol {
display:grid; gap:7px; margin:0; padding-left:22px;
}
.vat-explanation li {
color:var(--ink); font-size:var(--text-sm); line-height:1.5; font-variant-numeric:tabular-nums;
}
.vat-explanation p {
margin:11px 0 0; color:var(--muted); font-size:var(--text-xs); line-height:1.55;
}
.vat-copy-actions {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:14px;
}
.vat-copy-actions > * {
min-width:0;
}
.vat-copy-status {
min-height:1.5em; margin:9px 0 0; color:#326211; font-size:var(--text-xs); line-height:1.5;
}
.vat-comparison {
margin-top:13px; border-top:1px solid var(--line);
}
.vat-comparison[hidden] {
display:none;
}
.vat-comparison summary {
min-height:46px; display:flex; align-items:center; color:var(--violet); cursor:pointer; font-size:var(--text-sm); font-weight:850;
}
.vat-comparison > p {
margin:0 0 12px; color:var(--muted); font-size:var(--text-sm); line-height:1.5;
}
.vat-comparison-grid {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px;
}
.vat-comparison-grid article {
display:flex; min-width:0; flex-direction:column; gap:5px; padding:13px; border:1px solid var(--line); border-radius:12px; background:#fff;
}
.vat-comparison-grid strong {
color:var(--violet); font-size:var(--text-base);
}
.vat-comparison-grid span,
.vat-comparison-grid small {
color:var(--muted); font-size:var(--text-xs); line-height:1.4; overflow-wrap:normal; word-break:normal;
}
.vat-comparison-grid span {
color:var(--ink); font-weight:750;
}
@media (max-width:720px) {
.vat-result-grid,
.vat-comparison-grid {
grid-template-columns:minmax(0,1fr);
}
}
@media (max-width:480px) {
.vat-mode-selector,
.vat-rate-selector {
padding:13px;
}
.vat-mode-selector > div {
gap:6px;
}
.vat-mode-selector label > span {
min-height:70px; padding:8px 6px;
}
.vat-rate-grid {
gap:6px;
}
.vat-rate-option > span {
padding:7px 5px;
}
.vat-rate-historical > span {
grid-template-columns:auto minmax(0,1fr); padding-inline:9px;
}
.vat-copy-actions {
grid-template-columns:minmax(0,1fr);
}
}
@media (max-width:360px) {
.vat-calculator {
padding:18px 16px;
}
.vat-rate-grid {
gap:5px;
}
.vat-rate-option > span {
min-height:48px;
}
}
.insurance-calculator,
.insurance-form,
.insurance-regime-selector,
.insurance-patents,
.insurance-period-selector,
.insurance-result,
.insurance-result-detail,
.insurance-cap {
width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
}
.insurance-regime-selector,
.insurance-patents,
.insurance-period-selector {
margin:0 0 18px;
    padding:16px;
    border:1px solid #d8d1ef;
    border-radius:16px;
    background:#f8f5ff;
}
.insurance-regime-selector legend,
.insurance-patents legend,
.insurance-period-selector legend {
padding:0 7px;
    color:var(--ink);
    font-size:var(--text-sm);
    font-weight:850;
}
.insurance-regime-grid {
display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
}
.insurance-regime-grid label,
.insurance-period-options label {
position:relative;
    min-width:0;
    cursor:pointer;
}
.insurance-regime-grid input,
.insurance-period-options input {
position:absolute;
    width:1px;
    height:1px;
    opacity:0;
}
.insurance-regime-grid label > span,
.insurance-period-options label > span {
min-height:70px;
    display:flex;
    min-width:0;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:4px;
    padding:10px;
    border:1px solid #ddd7ef;
    border-radius:12px;
    color:#514b5d;
    background:#fff;
    line-height:1.3;
    text-align:center;
}
.insurance-regime-grid b,
.insurance-period-options b {
font-size:var(--text-sm);
}
.insurance-regime-grid small,
.insurance-period-options small {
color:var(--muted); font-size:var(--text-xs); font-weight:650;
}
.insurance-regime-grid input:checked + span,
.insurance-period-options input:checked + span {
color:#fff; border-color:var(--violet); background:var(--violet); box-shadow:0 7px 15px rgba(99,62,229,.18);
}
.insurance-regime-grid input:checked + span small,
.insurance-period-options input:checked + span small {
color:#eeeaff;
}
.insurance-regime-grid input:focus-visible + span,
.insurance-period-options input:focus-visible + span {
outline:3px solid rgba(99,62,229,.2); outline-offset:2px;
}
.insurance-money-grid,
.insurance-period-dates {
display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:15px;
}
.insurance-money-grid > *,
.insurance-period-dates > * {
min-width:0;
}
.insurance-money-grid > :only-child {
grid-column:1 / -1;
}
.insurance-form [hidden],
.insurance-result [hidden] {
display:none;
}
.insurance-form .field input {
max-width:100%; box-sizing:border-box; font-size:16px;
}
.insurance-form .field small {
color:var(--muted); font-size:var(--text-xs); font-weight:550; line-height:1.45;
}
.insurance-patents > p {
margin:0 0 13px; color:var(--muted); font-size:var(--text-sm); line-height:1.5;
}
.insurance-patent-list {
display:grid; gap:10px;
}
.insurance-patent-row {
display:grid; min-width:0; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) auto; align-items:end; gap:10px; padding:12px; border:1px solid #e2ddef; border-radius:13px; background:#fff;
}
.insurance-patent-row > * {
min-width:0;
}
.insurance-patent-row .field {
margin:0;
}
.insurance-remove-patent {
min-height:44px; padding:9px 10px; border:0; color:#9a2f2f; background:transparent; font:inherit; font-size:var(--text-xs); font-weight:800; cursor:pointer;
}
.insurance-add-patent {
margin-top:11px;
}
.insurance-patent-limit {
min-height:1.5em; margin:7px 0 0 !important; color:#715c20 !important;
}
.insurance-period-options {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;
}
.insurance-period-dates {
margin-bottom:18px; padding:15px; border:1px solid var(--line); border-radius:14px; background:#faf9f6;
}
.insurance-period-dates .field {
margin:0;
}
.insurance-scope-notice {
margin:4px 0 18px; padding:15px 16px; border-left:4px solid #8ba334; border-radius:10px; background:#f7fbe9;
}
.insurance-scope-notice strong {
color:#344511; font-size:var(--text-sm);
}
.insurance-scope-notice p {
margin:6px 0 0; color:#555f3d; font-size:var(--text-xs); line-height:1.55;
}
.insurance-result-heading {
margin:8px 0 0; font-size:22px; line-height:1.2;
}
.insurance-result-heading:focus {
outline:0;
}
.insurance-total-card {
display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:7px 14px; margin-top:15px; padding:19px; border-radius:16px; color:#fff; background:var(--violet);
}
.insurance-total-card span {
grid-column:1 / -1; color:#eeeaff; font-size:var(--text-xs); font-weight:800; text-transform:uppercase; letter-spacing:.05em;
}
.insurance-total-card strong {
min-width:0; font-size:clamp(25px,4vw,35px); line-height:1.1; font-variant-numeric:tabular-nums; overflow-wrap:normal; word-break:normal;
}
.insurance-total-card button {
min-height:44px; padding:8px 0; border:0; color:#fff; background:transparent; font:inherit; font-size:var(--text-xs); font-weight:800; text-decoration:underline; text-underline-offset:3px; cursor:pointer;
}
.insurance-result-grid {
grid-template-columns:repeat(2,minmax(0,1fr));
}
.insurance-result-grid .result-item {
min-width:0;
}
.insurance-result-grid strong {
overflow-wrap:normal; word-break:normal;
}
.insurance-copy-inline {
align-self:flex-start; min-height:44px; padding:9px 0; border:0; color:var(--violet); background:transparent; font:inherit; font-size:var(--text-xs); font-weight:800; cursor:pointer;
}
.insurance-cap,
.insurance-result-detail {
margin-top:14px; padding:16px; border:1px solid var(--line); border-radius:14px; background:#faf9f6;
}
.insurance-cap {
border-color:#d5c9fa; background:#f7f4ff;
}
.insurance-cap h3,
.insurance-result-detail h3 {
margin:0 0 10px; font-size:var(--text-base);
}
.insurance-cap dl {
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin:0;
}
.insurance-cap dl > div {
min-width:0; padding:10px; border-radius:10px; background:#fff;
}
.insurance-cap dt {
color:var(--muted); font-size:var(--text-xs);
}
.insurance-cap dd {
min-width:0; margin:5px 0 0; color:var(--ink); font-size:var(--text-sm); font-weight:850; font-variant-numeric:tabular-nums; overflow-wrap:normal; word-break:normal;
}
.insurance-result-detail p {
margin:7px 0 0; color:var(--muted); font-size:var(--text-sm); line-height:1.55; overflow-wrap:normal; word-break:normal;
}
.insurance-result-detail ol,
.insurance-result-detail ul {
display:grid; gap:7px; margin:0; padding-left:22px; color:var(--ink); font-size:var(--text-sm); line-height:1.5;
}
.insurance-freshness {
display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 14px; margin:15px 0 0; color:var(--muted); font-size:var(--text-xs);
}
.insurance-freshness strong {
color:#46551c;
}
.insurance-copy-actions {
margin-top:14px;
}
.insurance-copy-status {
min-height:1.5em; margin:8px 0 0; color:#326211; font-size:var(--text-xs);
}
@media (max-width:900px) {
.insurance-regime-grid {
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media (max-width:600px) {
.insurance-regime-grid,
.insurance-money-grid,
.insurance-period-options,
.insurance-period-dates,
.insurance-result-grid,
.insurance-cap dl {
grid-template-columns:minmax(0,1fr);
}
.insurance-patent-row {
grid-template-columns:minmax(0,1fr); align-items:stretch;
}
.insurance-remove-patent {
justify-self:start;
}
.insurance-total-card {
grid-template-columns:minmax(0,1fr); align-items:start;
}
.insurance-total-card button {
justify-self:start;
}
}
@media (max-width:360px) {
.insurance-calculator {
padding:18px 16px;
}
.insurance-regime-selector,
.insurance-patents,
.insurance-period-selector {
padding:13px;
}
.insurance-regime-grid {
gap:6px;
}
}
.percent-calculator,
.percent-form,
.percent-mode-selector,
.percent-reverse-selector,
.percent-result,
.percent-result-section,
.percent-calculation-details {
width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
}
.percent-mode-selector,
.percent-reverse-selector {
margin:0 0 18px;
    padding:16px;
    border:1px solid #d8d1ef;
    border-radius:16px;
    background:#f8f5ff;
}
.percent-reverse-selector {
border-color:#d6dfae; background:#fbffe9;
}
.percent-mode-selector legend,
.percent-reverse-selector legend {
padding:0 7px; color:var(--ink); font-size:var(--text-sm); font-weight:850;
}
.percent-mode-grid {
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;
}
.percent-reverse-grid {
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;
}
.percent-mode-grid label,
.percent-reverse-grid label {
position:relative; min-width:0; cursor:pointer;
}
.percent-mode-grid input,
.percent-reverse-grid input {
position:absolute; width:1px; height:1px; opacity:0;
}
.percent-mode-grid label > span,
.percent-reverse-grid label > span {
min-height:72px;
    display:flex;
    min-width:0;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:4px;
    padding:10px 8px;
    border:1px solid #ddd7ef;
    border-radius:12px;
    color:#514b5d;
    background:#fff;
    line-height:1.3;
    text-align:center;
}
.percent-reverse-grid label > span {
border-color:#dce5bc;
}
.percent-mode-grid b,
.percent-reverse-grid b {
font-size:var(--text-reading); overflow-wrap:normal; word-break:normal;
}
.percent-mode-grid small,
.percent-reverse-grid small {
color:var(--muted); font-size:var(--text-xs); font-weight:650; overflow-wrap:normal; word-break:normal;
}
.percent-mode-grid input:checked + span,
.percent-reverse-grid input:checked + span {
color:#fff; border-color:var(--violet); background:var(--violet); box-shadow:0 7px 15px rgba(99,62,229,.18);
}
.percent-mode-grid input:checked + span small,
.percent-reverse-grid input:checked + span small {
color:#eeeaff;
}
.percent-mode-grid input:focus-visible + span,
.percent-reverse-grid input:focus-visible + span {
outline:3px solid rgba(99,62,229,.2); outline-offset:2px;
}
.percent-form [hidden],
.percent-result [hidden] {
display:none;
}
.percent-question {
min-height:1.5em; margin:0 0 12px; color:#514967; font-size:var(--text-sm); font-weight:750; line-height:1.5;
}
.percent-input-grid {
display:grid; width:100%; max-width:100%; min-width:0; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px;
}
.percent-input-grid > * {
min-width:0;
}
.percent-input-grid .field {
margin-bottom:15px;
}
.percent-input-grid input {
width:100%; max-width:100%; min-width:0; box-sizing:border-box; font-size:16px;
}
.percent-result-heading {
margin:8px 0 0; font-size:22px; line-height:1.2;
}
.percent-result-heading:focus {
outline:0;
}
.percent-primary-result {
display:flex; min-width:0; flex-direction:column; gap:8px; margin-top:14px; padding:20px; border-radius:16px; color:#fff; background:var(--violet);
}
.percent-primary-result span {
color:#eeeaff; font-size:var(--text-xs); font-weight:800; text-transform:uppercase; letter-spacing:.05em;
}
.percent-primary-result strong {
min-width:0; font-size:clamp(28px,5vw,40px); line-height:1.1; font-variant-numeric:tabular-nums; overflow-wrap:break-word; word-break:normal;
}
.percent-result-context {
margin:12px 0 0; color:#514967; font-size:var(--text-sm); font-weight:700; line-height:1.55;
}
.percent-result-section {
margin-top:18px; padding:17px; border:1px solid var(--line); border-radius:14px; background:#faf9f6;
}
.percent-result-section h3 {
margin:0 0 11px; font-size:var(--text-base);
}
.percent-secondary-grid {
grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:0;
}
.percent-secondary-grid .result-item {
min-width:0; min-height:82px; background:#fff;
}
.percent-secondary-grid strong {
min-width:0; font-variant-numeric:tabular-nums; overflow-wrap:break-word; word-break:normal;
}
.percent-calculation-details {
display:grid; gap:9px; margin:0;
}
.percent-calculation-details > div {
min-width:0; padding:12px 13px; border-radius:11px; background:#fff;
}
.percent-calculation-details dt {
color:var(--muted); font-size:var(--text-xs); font-weight:750;
}
.percent-calculation-details dd {
min-width:0; margin:6px 0 0; color:var(--ink); font-size:var(--text-sm); font-weight:800; line-height:1.55; font-variant-numeric:tabular-nums;
}
.percent-equation {
display:flex; min-width:0; flex-wrap:wrap; gap:0; margin:0; overflow-wrap:normal; word-break:normal;
}
.percent-equation > span {
max-width:100%;
}
.percent-equation-value {
color:#4d348f;
}
.percent-explanation {
margin:11px 0 0; color:var(--muted); font-size:var(--text-sm); line-height:1.55;
}
.percent-verification {
border-color:#d6dfae; background:#fbffe9;
}
.percent-verification small {
display:block; margin-top:8px; color:#566224; font-size:var(--text-xs); line-height:1.5;
}
@media (max-width:700px) {
.percent-mode-grid {
grid-template-columns:repeat(2,minmax(0,1fr));
}
.percent-reverse-grid,
.percent-input-grid,
.percent-secondary-grid {
grid-template-columns:minmax(0,1fr);
}
}
@media (max-width:360px) {
.percent-calculator {
padding:18px 16px;
}
.percent-mode-selector,
.percent-reverse-selector {
padding:13px;
}
.percent-mode-grid,
.percent-reverse-grid {
gap:6px;
}
.percent-mode-grid label > span,
.percent-reverse-grid label > span {
padding-inline:6px;
}
.percent-result-section {
padding:14px;
}
}
/* One-rep max reuses the percent choices without the surrounding tinted card. */
.one-rep-max-calculator .percent-mode-selector {
margin:0 0 18px; padding:0; border:0; border-radius:0; background:transparent;
}
.one-rep-max-calculator .percent-mode-selector legend {
margin:0 0 8px; padding:0;
}
.one-rep-max-calculator .percent-mode-grid {
width:100%; grid-template-columns:repeat(2,minmax(0,1fr));
}
.one-rep-max-calculator .percent-mode-grid label > span {
height:100%; box-sizing:border-box;
}
.one-rep-max-calculator #one-rep-approach-help {
margin:0 0 18px;
}
.one-rep-max-calculator .schedule > .result-note {
margin:16px 0 0;
}
.date-difference-calculator,
.date-difference-form,
.date-mode-selector,
.date-single-period,
.date-multiple-periods,
.date-boundary-selector,
.date-range-list,
.date-range-row,
.date-difference-result,
.date-per-range {
width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
}
.date-mode-selector,
.date-boundary-selector {
margin:0 0 18px;
    padding:16px;
    border:1px solid #d8d1ef;
    border-radius:16px;
    background:#f8f5ff;
}
.date-mode-selector legend,
.date-boundary-selector legend,
.date-range-row legend {
padding:0 7px;
    color:var(--ink);
    font-size:var(--text-sm);
    font-weight:850;
}
.date-mode-grid {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;
}
.date-mode-grid label {
position:relative; min-width:0; cursor:pointer;
}
.date-mode-grid input {
position:absolute; width:1px; height:1px; opacity:0;
}
.date-mode-grid label > span {
min-height:52px;
    display:flex;
    min-width:0;
    align-items:center;
    justify-content:center;
    padding:9px 10px;
    border:1px solid #ddd7ef;
    border-radius:12px;
    color:#514b5d;
    background:#fff;
    font-size:var(--text-sm);
    font-weight:800;
    line-height:1.35;
    text-align:center;
    overflow-wrap:normal;
    word-break:normal;
}
.date-mode-grid input:checked + span {
color:#fff; border-color:var(--violet); background:var(--violet); box-shadow:0 7px 15px rgba(99,62,229,.18);
}
.date-mode-grid input:focus-visible + span {
outline:3px solid rgba(99,62,229,.2); outline-offset:2px;
}
.date-input-grid,
.date-range-fields {
display:grid; width:100%; max-width:100%; min-width:0; gap:15px;
}
.date-input-grid {
grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:end; margin-bottom:18px;
}
.date-range-fields {
grid-template-columns:repeat(2,minmax(0,1fr));
}
.date-input-grid > *,
.date-range-fields > * {
min-width:0;
}
.date-field {
margin:0;
}
.date-field-heading {
display:flex; min-width:0; align-items:center; justify-content:space-between; gap:8px;
}
.date-field-heading label {
min-width:0; color:#555762; font-size:var(--text-xs); font-weight:750;
}
.date-input-shell {
position:relative;
    display:flex;
    width:100%;
    max-width:100%;
    min-width:0;
    inline-size:100%;
    max-inline-size:100%;
    min-inline-size:0;
    height:54px;
    padding-inline:15px;
    border:1px solid #dedbd4;
    border-radius:13px;
    background:#faf9f6;
    align-items:center;
    box-sizing:border-box;
    transition:border-color .2s, box-shadow .2s;
}
.date-input-shell:focus-within {
border-color:var(--violet); box-shadow:0 0 0 4px rgba(99,62,229,.1);
}
.date-field .date-input-shell > input[type="date"],
.age-date-field .date-input-shell > input[type="date"] {
display:block;
    width:100%;
    max-width:100%;
    min-width:0;
    inline-size:100%;
    max-inline-size:100%;
    min-inline-size:0;
    height:100%;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    box-sizing:border-box;
    flex:1 1 0;
}
.date-input-empty-hint {
position:absolute;
    inset:0;
    display:flex;
    min-width:0;
    align-items:center;
    padding:0 42px 0 15px;
    color:var(--muted);
    font-size:14px;
    font-weight:650;
    line-height:1.3;
    white-space:nowrap;
    opacity:0;
    pointer-events:none;
    box-sizing:border-box;
}
.date-input-shell > input[type="date"][data-date-empty="true"]:not(:focus) + .date-input-empty-hint {
opacity:1;
}
.date-input-shell > input[type="date"][data-date-empty="true"]:not(:focus)::-webkit-datetime-edit,
.date-input-shell > input[type="date"][data-date-empty="true"]:not(:focus)::-webkit-datetime-edit-fields-wrapper {
color:transparent;
    opacity:0;
}
.date-field .date-input-shell > input[type="date"]:focus,
.age-date-field .date-input-shell > input[type="date"]:focus {
border-color:transparent; box-shadow:none;
}
.date-field input {
width:100%; max-width:100%; min-width:0; box-sizing:border-box; font-size:16px;
}
.date-inline-action {
min-height:38px;
    padding:7px 3px;
    border:0;
    color:var(--violet);
    background:transparent;
    font:inherit;
    font-size:var(--text-xs);
    font-weight:800;
    cursor:pointer;
}
.date-field-heading .date-inline-action {
flex:0 0 auto; min-height:32px; padding:4px 2px;
}
.date-inline-action:focus-visible,
.date-remove-range:focus-visible {
outline:3px solid rgba(99,62,229,.2); outline-offset:2px; border-radius:7px;
}
.date-swap {
display:inline-flex; width:44px; min-width:44px; min-height:48px; align-items:center; justify-content:center; gap:6px; margin:0; padding:8px;
}
.date-swap-symbol {
font-size:21px; line-height:1;
}
.date-swap-symbol--mobile,
.date-swap-label {
display:none;
}
.date-boundary-grid {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;
}
.date-boundary-grid .check-field {
min-width:0; margin:0; padding:12px; border:1px solid #ddd7ef; border-radius:12px; background:#fff; color:var(--ink);
}
.date-boundary-selector > p {
margin:10px 0 0; color:var(--muted); font-size:var(--text-xs); line-height:1.5;
}
.date-multiple-periods {
margin-bottom:18px;
}
.date-range-list {
display:grid; gap:12px;
}
.date-range-row {
margin:0; padding:15px; border:1px solid var(--line); border-radius:14px; background:#faf9f6;
}
.date-range-fields {
grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; align-items:end; gap:10px;
}
.date-range-actions {
display:flex; min-width:0; align-items:center; flex-direction:column;
}
.date-remove-range {
min-height:38px; padding:7px 3px; border:0; color:#9a2f2f; background:transparent; font:inherit; font-size:var(--text-xs); font-weight:800; cursor:pointer;
}
.date-remove-range:disabled {
color:#99949f; cursor:not-allowed;
}
.date-add-range {
margin-top:12px;
}
.date-range-limit {
margin:8px 0 0; color:var(--muted); font-size:var(--text-xs); line-height:1.45;
}
.date-result-heading {
margin:8px 0 0; font-size:22px; line-height:1.2;
}
.date-result-heading:focus {
outline:0;
}
.date-primary-result {
display:flex; min-width:0; flex-direction:column; gap:8px; margin-top:14px; padding:20px; border-radius:16px; color:#fff; background:var(--violet);
}
.date-primary-result span {
color:#eeeaff; font-size:var(--text-xs); font-weight:800; text-transform:uppercase; letter-spacing:.05em;
}
.date-primary-result strong {
min-width:0; font-size:clamp(28px,5vw,40px); line-height:1.1; font-variant-numeric:tabular-nums; overflow-wrap:normal; word-break:normal;
}
.date-direction-note {
margin:12px 0 0; padding:12px 14px; border-left:4px solid #d08a1b; border-radius:9px; color:#684911; background:#fff8e8; font-size:var(--text-sm); line-height:1.5;
}
.date-result-grid {
grid-template-columns:repeat(2,minmax(0,1fr));
}
.date-result-grid .result-item {
min-width:0;
}
.date-result-grid .result-item:last-child:nth-child(odd) {
grid-column:1/-1;
}
.date-result-grid strong {
min-width:0; overflow-wrap:normal; word-break:normal;
}
.date-per-range {
margin-top:18px; padding:16px; border:1px solid var(--line); border-radius:14px; background:#faf9f6;
}
.date-per-range h3 {
margin:0 0 10px; font-size:var(--text-base);
}
.date-per-range > div {
display:grid; gap:9px;
}
.date-per-range article {
min-width:0; padding:12px 13px; border-radius:11px; background:#fff;
}
.date-per-range h4 {
margin:0 0 6px; font-size:var(--text-sm);
}
.date-per-range p {
margin:4px 0 0; color:var(--muted); font-size:var(--text-xs); line-height:1.5; overflow-wrap:normal; word-break:normal;
}
.date-result-note {
display:block; margin-top:13px;
}
@media (max-width:640px) {
.date-input-empty-hint {
justify-content:center;
        padding-inline:34px;
        text-align:center;
}
.date-input-shell > input[type="date"] {
text-align:center;
}
.date-input-shell > input[type="date"]::-webkit-date-and-time-value {
display:flex;
        height:100%;
        min-height:1lh;
        align-items:center;
        margin:0;
        text-align:inherit;
}
.date-input-shell > input[type="date"]::-webkit-datetime-edit {
display:flex;
        width:100%;
        min-width:0;
        align-items:center;
        justify-content:center;
        padding:0 0 0 22px;
        box-sizing:border-box;
}
.date-input-shell > input[type="date"]::-webkit-datetime-edit-fields-wrapper {
min-width:0;
        padding:0;
}
.date-input-shell > input[type="date"]::-webkit-calendar-picker-indicator {
flex:0 0 auto;
        margin:0;
        padding:0;
}
.date-range-fields,
.date-boundary-grid,
.date-result-grid {
grid-template-columns:minmax(0,1fr);
}
.date-input-grid {
grid-template-columns:minmax(0,1fr);
        grid-template-areas:"start" "swap" "end";
        gap:10px;
}
.date-input-grid > .date-field:first-child {
grid-area:start;
}
.date-input-grid > .date-field:last-child {
grid-area:end;
}
.date-input-grid > .date-swap {
grid-area:swap;
}
.date-swap {
width:auto; min-width:0; min-height:42px; justify-self:center; padding:7px 13px;
}
.date-swap-symbol--desktop {
display:none;
}
.date-swap-symbol--mobile,
.date-swap-label {
display:inline;
}
.date-range-actions {
align-items:flex-start; flex-direction:row; gap:12px;
}
.date-result-grid .result-item:last-child:nth-child(odd) {
grid-column:auto;
}
}
.age-calculator,
.age-form,
.age-result,
.age-input-grid,
.age-date-field,
.age-value-preview,
.age-value-list,
.age-birthday-card,
.age-explanation {
width:100%; max-width:100%; min-width:0; box-sizing:border-box;
}
.age-input-grid {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; margin-bottom:18px;
}
.age-input-grid > * {
min-width:0;
}
.age-date-field {
margin:0;
}
.age-date-field .date-field-heading {
min-height:32px; margin:0; line-height:1.2;
}
.age-date-field .date-field-heading label {
margin:0; line-height:1.2;
}
.age-date-field .date-inline-action {
min-height:32px; margin:0; padding:0 2px; line-height:1.2;
}
.age-date-field input {
width:100%; max-width:100%; min-width:0; box-sizing:border-box; font-size:16px;
}
.age-value-preview {
margin-top:15px;
}
.age-value-preview-heading {
margin:0 0 8px; color:var(--muted); font-size:var(--text-xs); font-weight:750;
}
.age-value-list {
display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:0; padding:0; list-style:none;
}
.age-value-list > li {
min-width:0; padding:9px 10px; border:1px solid #e4def5; border-radius:10px; color:#5b536d; background:#faf8ff; font-size:var(--text-xs); font-weight:700; line-height:1.35; text-align:center; overflow-wrap:normal; word-break:normal;
}
.age-result-heading {
margin:8px 0 0; font-size:22px; line-height:1.2;
}
.age-result-heading:focus {
outline:0;
}
.age-primary-result {
display:flex; min-width:0; flex-direction:column; gap:8px; margin-top:14px; padding:20px; border-radius:16px; color:#fff; background:var(--violet);
}
.age-primary-result span {
color:#eeeaff; font-size:var(--text-xs); font-weight:800; text-transform:uppercase; letter-spacing:.05em;
}
.age-primary-result strong {
min-width:0; font-size:clamp(28px,5vw,40px); line-height:1.15; font-variant-numeric:tabular-nums; overflow-wrap:normal; word-break:normal;
}
.age-result-grid {
grid-template-columns:repeat(2,minmax(0,1fr));
}
.age-result-grid .result-item {
min-width:0;
}
.age-result-grid .result-item:last-child:nth-child(odd) {
grid-column:1/-1;
}
.age-result-grid strong {
min-width:0; overflow-wrap:normal; word-break:normal;
}
.age-birthday-card {
display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:16px; margin-top:18px; padding:18px; border:1px solid #d8d1ef; border-radius:16px; background:#f8f5ff;
}
.age-birthday-card > div > span {
display:block; color:var(--muted); font-size:var(--text-xs); font-weight:750;
}
.age-birthday-card > div > strong {
display:block; margin-top:6px; font-size:20px; line-height:1.25;
}
.age-birthday-card > div > small {
display:block; margin-top:5px; color:var(--muted);
}
.age-birthday-card dl {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0;
}
.age-birthday-card dl > div {
min-width:0; padding:10px; border-radius:10px; background:#fff;
}
.age-birthday-card dt {
color:var(--muted); font-size:var(--text-xs);
}
.age-birthday-card dd {
margin:5px 0 0; color:var(--ink); font-weight:850; line-height:1.35;
}
.age-birthday-card > p {
grid-column:1/-1; margin:0; padding:10px 12px; border-radius:10px; color:#365b23; background:#edf8e8; font-weight:800;
}
.age-explanation {
margin-top:18px; padding:16px; border:1px solid var(--line); border-radius:14px; background:#faf9f6;
}
.age-explanation h3 {
margin:0 0 8px; font-size:var(--text-base);
}
.age-explanation p {
margin:0; color:var(--muted); font-size:var(--text-sm); line-height:1.55;
}
.age-explanation small {
display:block; margin-top:10px; color:#684911; line-height:1.5;
}
@media (max-width:640px) {
.age-input-grid,
.age-result-grid,
.age-birthday-card {
grid-template-columns:minmax(0,1fr);
}
.age-value-list {
grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px;
}
.age-result-grid .result-item:last-child:nth-child(odd),
.age-birthday-card > p {
grid-column:auto;
}
}
@media (max-width:360px) {
.age-calculator {
padding:18px 16px;
}
.age-birthday-card,
.age-explanation {
padding:14px;
}
.age-birthday-card dl {
grid-template-columns:minmax(0,1fr);
}
}
@media (max-width:360px) {
.date-difference-calculator {
padding:18px 16px;
}
.date-mode-selector,
.date-boundary-selector,
.date-range-row {
padding:13px;
}
.date-mode-grid {
gap:6px;
}
.date-mode-grid label > span {
padding-inline:6px;
}
}
.bmi-calculator,
.bmi-form,
.bmi-result,
.bmi-input-grid,
.bmi-value-preview,
.bmi-primary-result,
.bmi-range-card,
.bmi-scale-section,
.bmi-scale,
.bmi-waist-mount,
.bmi-waist-card,
.bmi-waist-panel,
.bmi-waist-result {
width:100%; max-width:100%; min-width:0; box-sizing:border-box;
}
.bmi-input-grid {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px;
}
.bmi-input-grid > * {
min-width:0;
}
.bmi-input-grid .field {
margin-bottom:0;
}
.bmi-input-grid input {
width:100%; max-width:100%; min-width:0; box-sizing:border-box; font-size:16px;
}
.bmi-adult-note {
margin:14px 0 18px; padding:12px 14px; border-left:4px solid #8ba334; border-radius:10px; color:#555f3d; background:#f7fbe9; font-size:var(--text-sm); line-height:1.55;
}
.bmi-value-preview {
margin-top:15px;
}
.bmi-value-preview > p {
margin:0 0 8px; color:var(--muted); font-size:var(--text-xs); font-weight:750;
}
.bmi-value-preview ul {
display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:0; padding:0; list-style:none;
}
.bmi-value-preview li {
min-width:0; padding:9px 10px; border:1px solid #e4def5; border-radius:10px; color:#5b536d; background:#faf8ff; font-size:var(--text-xs); font-weight:700; line-height:1.35; text-align:center; overflow-wrap:normal; word-break:normal;
}
.bmi-result-heading {
margin:8px 0 0; font-size:22px; line-height:1.2;
}
.bmi-result-heading:focus {
outline:0;
}
.bmi-primary-result {
display:flex; align-items:flex-start; flex-direction:column; gap:8px; margin-top:14px; padding:20px; border-radius:16px; color:#fff; background:var(--violet);
}
.bmi-primary-result strong {
min-width:0; max-width:100%; font-size:clamp(42px,8vw,64px); line-height:1; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; word-break:normal;
}
.bmi-primary-result span {
color:#f1edff; font-size:var(--text-lg); font-weight:850; line-height:1.3; overflow-wrap:normal; word-break:normal;
}
.bmi-range-card {
margin-top:14px; padding:18px; border:1px solid #d8d1ef; border-radius:15px; background:#f8f5ff;
}
.bmi-range-card h3 {
margin:0; color:#514b5f; font-size:var(--text-sm); line-height:1.4;
}
.bmi-range-card strong {
display:block; margin-top:7px; color:var(--ink); font-size:clamp(22px,4vw,30px); line-height:1.2; font-variant-numeric:tabular-nums;
}
.bmi-range-card p,
.bmi-explanation {
margin:8px 0 0; color:var(--muted); font-size:var(--text-sm); line-height:1.55;
}
.bmi-scale-section {
margin-top:18px;
}
.bmi-scale-section h3 {
margin:0 0 10px; font-size:var(--text-base);
}
.bmi-scale {
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:0; padding:0; list-style:none;
}
.bmi-scale li {
display:flex; min-width:0; min-height:68px; flex-direction:column; gap:5px; padding:10px; border:1px solid #ddd7ef; border-radius:11px; color:#514b5f; background:#fff;
}
.bmi-scale li strong {
font-size:var(--text-sm); line-height:1.25;
}
.bmi-scale li span {
color:var(--muted); font-size:var(--text-xs); line-height:1.35; overflow-wrap:normal; word-break:normal;
}
.bmi-scale li.is-active {
border-color:var(--violet); color:#fff; background:var(--violet); box-shadow:0 7px 15px rgba(99,62,229,.18);
}
.bmi-scale li.is-active::after {
margin-top:auto; color:#efffb9; content:"Ваш результат"; font-size:10px; font-weight:850;
}
.bmi-scale li.is-active span {
color:#eeeaff;
}
.bmi-waist-mount {
margin-top:20px;
}
.bmi-waist-card {
padding:18px; border:1px solid #d8d1ef; border-radius:15px; background:#fcfbff;
}
.bmi-waist-card > h3 {
margin:7px 0 0; font-size:var(--text-lg); line-height:1.3;
}
.bmi-waist-card > p {
margin:8px 0 0; color:var(--muted); font-size:var(--text-sm); line-height:1.55;
}
.bmi-waist-toggle {
width:100%; margin-top:14px;
}
.bmi-waist-panel {
display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:end; margin-top:16px; padding-top:16px; border-top:1px solid #e5e0f1;
}
.bmi-waist-panel[hidden] {
display:none;
}
.bmi-waist-instruction,
.bmi-waist-error,
.bmi-waist-result,
.bmi-waist-limitations {
grid-column:1 / -1;
}
.bmi-waist-instruction {
margin:0; color:var(--muted); font-size:var(--text-sm); line-height:1.55;
}
.bmi-waist-instruction strong {
color:var(--ink);
}
.bmi-waist-field {
min-width:0; margin:0;
}
.bmi-waist-field input {
width:100%; max-width:100%; min-width:0; box-sizing:border-box; font-size:16px;
}
.bmi-waist-submit {
min-height:46px; white-space:nowrap;
}
.bmi-waist-error {
margin:0;
}
.bmi-waist-result {
display:grid; gap:7px; padding:16px; border:1px solid #d8d1ef; border-radius:13px; background:#f5f2ff;
}
.bmi-waist-result[hidden] {
display:none;
}
.bmi-waist-result h4 {
margin:0; color:#514b5f; font-size:var(--text-sm); line-height:1.4;
}
.bmi-waist-result h4:focus {
outline:0;
}
.bmi-waist-result > strong {
color:var(--violet); font-size:clamp(30px,6vw,42px); line-height:1; font-variant-numeric:tabular-nums;
}
.bmi-waist-result > span {
color:var(--ink); font-size:var(--text-base); font-weight:850; line-height:1.35; overflow-wrap:normal; word-break:normal;
}
.bmi-waist-result p {
margin:0; color:var(--muted); font-size:var(--text-sm); line-height:1.55;
}
.bmi-waist-result .bmi-waist-hint {
color:#555f3d; font-weight:750;
}
.bmi-waist-limitations {
margin-top:1px; color:var(--muted); font-size:var(--text-sm); line-height:1.5;
}
.bmi-waist-limitations h4 {
margin:0; color:#514b5f; font-size:var(--text-sm); line-height:1.4;
}
.bmi-waist-limitations p {
margin:8px 0 0;
}
.bmi-waist-unavailable {
margin:0; padding:14px 16px; border:1px solid #e5e0f1; border-radius:13px; color:var(--muted); background:#fcfbff; font-size:var(--text-sm); line-height:1.55;
}
@media (max-width:640px) {
.bmi-input-grid {
grid-template-columns:minmax(0,1fr); gap:14px;
}
.bmi-value-preview ul,
.bmi-scale {
grid-template-columns:repeat(2,minmax(0,1fr));
}
.bmi-waist-panel {
grid-template-columns:minmax(0,1fr); align-items:stretch;
}
.bmi-waist-submit {
width:100%; white-space:normal;
}
}
@media (max-width:360px) {
.bmi-calculator {
padding:18px 16px;
}
.bmi-primary-result,
.bmi-range-card,
.bmi-waist-card {
padding:15px;
}
.bmi-value-preview ul,
.bmi-scale {
gap:6px;
}
.bmi-scale li {
padding:9px 8px;
}
}
.pregnancy-calculator,
.pregnancy-form,
.pregnancy-method-field,
.pregnancy-method-panel,
.pregnancy-input-grid,
.pregnancy-ultrasound-grid,
.pregnancy-value-preview,
.pregnancy-result,
.pregnancy-primary-result,
.pregnancy-timeline,
.pregnancy-explanation,
.pregnancy-comparison,
.pregnancy-comparison-body,
.pregnancy-comparison-result {
width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
}
.pregnancy-form [hidden],
.pregnancy-result[hidden],
.pregnancy-comparison[hidden],
.pregnancy-comparison-result[hidden],
.pregnancy-explanation [hidden] {
display:none;
}
.pregnancy-method-field {
margin-bottom:18px;
}
.pregnancy-method-field select,
.pregnancy-method-panel input,
.pregnancy-method-panel select,
.pregnancy-comparison input {
width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
    font-size:16px;
}
.pregnancy-input-grid,
.pregnancy-ultrasound-grid {
display:grid; gap:15px; align-items:start;
}
.pregnancy-input-grid {
grid-template-columns:repeat(2,minmax(0,1fr));
}
.pregnancy-input-grid--single {
grid-template-columns:minmax(0,1fr);
}
.pregnancy-ultrasound-grid {
grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));
}
.pregnancy-input-grid > *,
.pregnancy-ultrasound-grid > * {
min-width:0; margin-bottom:18px;
}
.pregnancy-method-panel .date-field-heading,
.pregnancy-comparison .date-field-heading {
min-height:24px; margin:0; line-height:1.2;
}
.pregnancy-method-panel .date-field-heading label,
.pregnancy-comparison .date-field-heading label {
margin:0; line-height:1.2;
}
.pregnancy-method-panel .field > small {
display:block; margin-top:7px; color:var(--muted); font-weight:550; line-height:1.45;
}
.pregnancy-field-note {
margin:-7px 0 18px; color:var(--muted); font-size:var(--text-sm); line-height:1.5;
}
.pregnancy-value-preview {
margin-top:15px;
}
.pregnancy-value-preview > p {
margin:0 0 8px; color:var(--muted); font-size:var(--text-xs); font-weight:750;
}
.pregnancy-value-preview ul {
display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:0; padding:0; list-style:none;
}
.pregnancy-value-preview li {
min-width:0; padding:9px 10px; border:1px solid #e4def5; border-radius:10px; color:#5b536d; background:#faf8ff; font-size:var(--text-xs); font-weight:700; line-height:1.35; text-align:center; overflow-wrap:normal; word-break:normal;
}
.pregnancy-result-heading {
margin:8px 0 0; font-size:22px; line-height:1.2;
}
.pregnancy-result-heading:focus {
outline:0;
}
.pregnancy-primary-result {
display:flex; align-items:flex-start; flex-direction:column; gap:7px; margin-top:14px; padding:20px; border-radius:16px; color:#fff; background:var(--violet);
}
.pregnancy-primary-result > span {
color:#eeeaff; font-size:var(--text-xs); font-weight:800; text-transform:uppercase; letter-spacing:.05em;
}
.pregnancy-primary-result > strong {
min-width:0; font-size:clamp(27px,5vw,39px); line-height:1.15; font-variant-numeric:tabular-nums; overflow-wrap:normal; word-break:normal;
}
.pregnancy-primary-result > small {
color:#f2efff; font-size:var(--text-sm); font-weight:750;
}
.pregnancy-result-grid {
grid-template-columns:repeat(2,minmax(0,1fr));
}
.pregnancy-result-grid .result-item {
min-width:0;
}
.pregnancy-result-grid .result-item:last-child:nth-child(odd) {
grid-column:1/-1;
}
.pregnancy-result-grid strong {
min-width:0; overflow-wrap:normal; word-break:normal;
}
.pregnancy-timeline,
.pregnancy-explanation {
margin-top:18px; padding:17px; border:1px solid var(--line); border-radius:14px; background:#faf9f6;
}
.pregnancy-timeline h3,
.pregnancy-explanation h3 {
margin:0 0 11px; font-size:var(--text-base);
}
.pregnancy-timeline dl {
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin:0;
}
.pregnancy-timeline dl > div {
min-width:0; padding:11px; border-radius:10px; background:#fff;
}
.pregnancy-timeline dt {
color:var(--muted); font-size:var(--text-xs); line-height:1.4;
}
.pregnancy-timeline dd {
margin:6px 0 0; color:var(--ink); font-size:var(--text-sm); font-weight:850; font-variant-numeric:tabular-nums;
}
.pregnancy-explanation p {
margin:7px 0 0; color:var(--muted); font-size:var(--text-sm); line-height:1.55;
}
.pregnancy-explanation p[data-pregnancy-ultrasound-note] {
padding:11px 12px; border-left:4px solid #8ba334; border-radius:9px; color:#555f3d; background:#f7fbe9;
}
.pregnancy-explanation small {
display:block; margin-top:11px; color:#684911; font-size:var(--text-xs); line-height:1.5;
}
.pregnancy-comparison {
margin-top:18px; border:1px solid #d8d1ef; border-radius:15px; background:#fcfbff;
}
.pregnancy-comparison > summary {
padding:16px 18px; color:var(--violet); font-size:var(--text-sm); font-weight:850; cursor:pointer;
}
.pregnancy-comparison-body {
padding:0 18px 18px;
}
.pregnancy-comparison-body > p {
margin:0 0 15px; color:var(--muted); font-size:var(--text-sm); line-height:1.5;
}
.pregnancy-comparison .secondary-button {
width:100%;
}
.pregnancy-comparison-error {
margin-top:13px;
}
.pregnancy-comparison-result {
margin-top:15px; padding:15px; border:1px solid #d7e1b0; border-radius:13px; background:#fbffe9;
}
.pregnancy-comparison-result dl {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin:0;
}
.pregnancy-comparison-result dl > div {
min-width:0; padding:11px; border-radius:10px; background:#fff;
}
.pregnancy-comparison-result dt {
color:var(--muted); font-size:var(--text-xs);
}
.pregnancy-comparison-result dd {
margin:6px 0 0; color:var(--ink); font-weight:850; font-variant-numeric:tabular-nums;
}
.pregnancy-comparison-result > strong {
display:block; margin-top:13px; color:#3d4f17; font-size:var(--text-sm); line-height:1.45;
}
.pregnancy-comparison-result > p {
margin:8px 0 0; color:#58623b; font-size:var(--text-xs); line-height:1.5;
}
@media (max-width:640px) {
.pregnancy-input-grid,
.pregnancy-ultrasound-grid,
.pregnancy-result-grid,
.pregnancy-timeline dl,
.pregnancy-comparison-result dl {
grid-template-columns:minmax(0,1fr);
}
.pregnancy-value-preview ul {
grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px;
}
.pregnancy-result-grid .result-item:last-child:nth-child(odd) {
grid-column:auto;
}
}
@media (max-width:360px) {
.pregnancy-calculator {
padding:18px 16px;
}
.pregnancy-primary-result,
.pregnancy-timeline,
.pregnancy-explanation {
padding:14px;
}
.pregnancy-comparison > summary {
padding:14px;
}
.pregnancy-comparison-body {
padding:0 14px 14px;
}
}
.calories-calculator,
.calories-form,
.calories-result,
.calories-input-grid,
.calories-activity-help,
.calories-value-preview,
.calories-primary-result,
.calories-result-grid,
.calories-ladder,
.calories-formula,
.calories-scenarios,
.calories-sensitivity,
.calories-result-notes,
.calories-limitations {
width:100%; max-width:100%; min-width:0; box-sizing:border-box;
}
.calories-result[hidden],
.calories-scenarios[hidden] {
display:none;
}
.calories-input-grid {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px;
}
.calories-input-grid > * {
min-width:0; margin-bottom:0;
}
.calories-input-grid input,
.calories-input-grid select {
width:100%; max-width:100%; min-width:0; box-sizing:border-box; font-size:16px;
}
.calories-activity-help {
margin-top:15px; border:1px solid #ded8ed; border-radius:13px; background:#fcfbff;
}
.calories-activity-help > summary {
padding:14px 16px; color:var(--violet); font-size:var(--text-sm); font-weight:850; cursor:pointer;
}
.calories-activity-help > div {
padding:0 16px 15px;
}
.calories-activity-help p {
margin:8px 0 0; color:var(--muted); font-size:var(--text-sm); line-height:1.5;
}
.calories-activity-help strong {
color:var(--ink);
}
.calories-adult-note {
margin:14px 0 18px; padding:12px 14px; border-left:4px solid #8ba334; border-radius:10px; color:#555f3d; background:#f7fbe9; font-size:var(--text-sm); line-height:1.55;
}
.calories-value-preview {
margin-top:15px;
}
.calories-value-preview > p {
margin:0 0 8px; color:var(--muted); font-size:var(--text-xs); font-weight:750;
}
.calories-value-preview ul {
display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:0; padding:0; list-style:none;
}
.calories-value-preview li {
min-width:0; padding:9px 10px; border:1px solid #e4def5; border-radius:10px; color:#5b536d; background:#faf8ff; font-size:var(--text-xs); font-weight:700; line-height:1.35; text-align:center; overflow-wrap:normal; word-break:normal;
}
.calories-result-heading {
margin:8px 0 0; font-size:22px; line-height:1.2;
}
.calories-result-heading:focus {
outline:0;
}
.calories-primary-result {
display:flex; align-items:flex-start; flex-direction:column; gap:7px; margin-top:14px; padding:20px; border-radius:16px; color:#fff; background:var(--violet);
}
.calories-primary-result > span {
color:#eeeaff; font-size:var(--text-xs); font-weight:800; text-transform:uppercase; letter-spacing:.05em;
}
.calories-primary-result > strong {
min-width:0; font-size:clamp(30px,6vw,44px); line-height:1.08; font-variant-numeric:tabular-nums; overflow-wrap:normal; word-break:normal;
}
.calories-primary-result > small {
color:#f2efff; font-size:var(--text-sm);
}
.calories-primary-result > small b {
font-weight:850;
}
.calories-result-grid {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:14px;
}
.calories-result-grid article {
display:flex; min-width:0; flex-direction:column; gap:7px; padding:14px; border:1px solid var(--line); border-radius:13px; background:#fff;
}
.calories-result-grid span {
color:var(--muted); font-size:var(--text-xs); line-height:1.35;
}
.calories-result-grid strong {
min-width:0; color:var(--ink); font-size:var(--text-base); line-height:1.35; font-variant-numeric:tabular-nums; overflow-wrap:normal; word-break:normal;
}
.calories-ladder,
.calories-scenarios,
.calories-sensitivity,
.calories-result-notes,
.calories-limitations {
margin-top:18px;
}
.calories-ladder {
padding:17px; border:1px solid #d8d1ef; border-radius:15px; background:#f8f5ff;
}
.calories-ladder h3,
.calories-scenarios h3,
.calories-sensitivity h3,
.calories-result-notes h3 {
margin:0 0 11px; font-size:var(--text-base); line-height:1.35;
}
.calories-ladder ol {
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin:0; padding:0; list-style:none;
}
.calories-ladder li {
position:relative; display:flex; min-width:0; flex-direction:column; gap:5px; padding:12px; border-radius:11px; background:#fff;
}
.calories-ladder li small {
color:var(--violet); font-size:var(--text-xs); font-weight:850;
}
.calories-ladder li span {
color:var(--muted); font-size:var(--text-xs);
}
.calories-ladder li strong {
font-size:var(--text-base); line-height:1.3; font-variant-numeric:tabular-nums;
}
.calories-formula {
margin-top:14px; border:1px solid var(--line); border-radius:14px; background:#faf9f6;
}
.calories-formula > summary {
padding:15px 17px; color:var(--violet); font-size:var(--text-sm); font-weight:850; cursor:pointer;
}
.calories-formula ol {
display:grid; gap:9px; margin:0; padding:0 17px; list-style:none;
}
.calories-formula li {
display:grid; gap:4px; padding-bottom:9px; border-bottom:1px solid var(--line);
}
.calories-formula li:last-child {
border-bottom:0;
}
.calories-formula li strong {
font-size:var(--text-xs);
}
.calories-formula li span {
color:#4c4a55; font-size:var(--text-sm); line-height:1.5; font-variant-numeric:tabular-nums;
}
.calories-formula > p {
margin:8px 17px 16px; color:var(--muted); font-size:var(--text-sm); line-height:1.5;
}
.calories-scenarios > div,
.calories-sensitivity > div {
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;
}
.calories-scenarios button,
.calories-sensitivity article {
display:flex; min-width:0; min-height:82px; flex-direction:column; justify-content:center; gap:7px; padding:12px; border:1px solid #ddd7ef; border-radius:12px; color:var(--ink); background:#fff; font:inherit; text-align:left;
}
.calories-scenarios button {
cursor:pointer;
}
.calories-scenarios button:hover {
border-color:#a797e7;
}
.calories-scenarios button:focus-visible {
outline:3px solid rgba(99,62,229,.25); outline-offset:2px;
}
.calories-scenarios button.is-selected,
.calories-sensitivity article.is-selected {
border-color:transparent; color:#fff; background:var(--violet); box-shadow:0 8px 18px rgba(99,62,229,.16);
}
.calories-scenarios span,
.calories-sensitivity span {
font-size:var(--text-xs); font-weight:800; line-height:1.35;
}
.calories-scenarios strong,
.calories-sensitivity strong {
font-size:var(--text-sm); line-height:1.35; font-variant-numeric:tabular-nums;
}
.calories-sensitivity small {
color:var(--muted); font-size:var(--text-xs);
}
.calories-sensitivity .is-selected small {
color:#eeeaff;
}
.calories-scenarios > p,
.calories-sensitivity > p {
margin:10px 0 0; color:var(--muted); font-size:var(--text-sm); line-height:1.5;
}
.calories-result-notes {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;
}
.calories-result-notes section {
min-width:0; padding:16px; border:1px solid var(--line); border-radius:14px; background:#faf9f6;
}
.calories-result-notes p {
margin:0; color:var(--muted); font-size:var(--text-sm); line-height:1.55;
}
.calories-limitations {
padding:15px 17px; border-left:4px solid #bd8925; border-radius:11px; color:#684911; background:#fff8e8;
}
.calories-limitations > strong {
display:block; margin-bottom:7px;
}
.calories-limitations ul {
margin:0; padding-left:18px;
}
.calories-limitations li {
margin-top:5px; font-size:var(--text-sm); line-height:1.5;
}
@media (max-width:640px) {
.calories-input-grid,
.calories-result-grid,
.calories-ladder ol,
.calories-result-notes {
grid-template-columns:minmax(0,1fr);
}
.calories-value-preview ul {
grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px;
}
.calories-scenarios > div,
.calories-sensitivity > div {
grid-template-columns:minmax(0,1fr);
}
.calories-scenarios button,
.calories-sensitivity article {
min-height:0;
}
}
@media (max-width:360px) {
.calories-calculator {
padding:18px 16px;
}
.calories-primary-result,
.calories-ladder,
.calories-result-notes section {
padding:14px;
}
.calories-primary-result > strong {
font-size:29px;
}
}
.concrete-calculator {
overflow:visible;
}
.concrete-form {
display:grid; gap:16px;
}
.concrete-form [data-concrete-mode-panel] {
display:grid; min-width:0; gap:16px;
}
.concrete-form .field {
min-width:0; margin:0;
}
.concrete-form .field input,
.concrete-form .field select {
width:100%; max-width:100%; box-sizing:border-box;
}
.concrete-switch {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; min-width:0; margin:0; padding:0; border:0;
}
.concrete-switch--three {
grid-template-columns:repeat(3,minmax(0,1fr));
}
.concrete-switch legend,
.concrete-options legend {
grid-column:1/-1; margin-bottom:2px; color:var(--ink); font-size:var(--text-sm); font-weight:800;
}
.concrete-switch label,
.concrete-chip-row label {
position:relative; min-width:0; cursor:pointer;
}
.concrete-switch input,
.concrete-chip-row input {
position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;
}
.concrete-switch label > span,
.concrete-chip-row label > span {
display:flex; min-width:0; min-height:44px; align-items:center; justify-content:center; padding:9px 12px; border:1px solid #ddd7ef; border-radius:11px; color:#514b61; background:#fff; font-size:var(--text-sm); font-weight:800; line-height:1.3; text-align:center;
}
.concrete-switch input:checked + span,
.concrete-chip-row input:checked + span {
border-color:var(--violet); color:var(--violet); background:#f5f1ff; box-shadow:inset 0 0 0 1px var(--violet);
}
.concrete-switch input:focus-visible + span,
.concrete-chip-row input:focus-visible + span {
outline:3px solid rgba(99,62,229,.24); outline-offset:2px;
}
.concrete-subpanel,
.concrete-options {
min-width:0; padding:16px; border:1px solid var(--line); border-radius:15px; background:#faf9f6;
}
.concrete-subpanel {
display:grid; gap:14px;
}
.concrete-input-grid {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; min-width:0;
}
.concrete-input-grid--three {
grid-template-columns:repeat(3,minmax(0,1fr));
}
.concrete-input-grid--four {
grid-template-columns:repeat(4,minmax(0,1fr));
}
.concrete-help,
.concrete-options > p,
.concrete-mode-note {
margin:0; color:var(--muted); font-size:var(--text-sm); line-height:1.55;
}
.concrete-mode-note {
padding:14px 16px; border-left:4px solid var(--violet); border-radius:10px; background:#f7f4ff;
}
.concrete-mode-note strong {
color:var(--ink);
}
.concrete-options {
display:grid; gap:13px;
}
.concrete-chip-row {
display:flex; flex-wrap:wrap; gap:7px;
}
.concrete-chip-row label {
flex:1 1 68px;
}
.concrete-custom-reserve {
max-width:280px;
}
.concrete-toggle {
display:flex; min-width:0; align-items:flex-start; gap:11px; cursor:pointer;
}
.concrete-toggle > input {
width:19px; height:19px; flex:0 0 19px; margin:2px 0 0; accent-color:var(--violet);
}
.concrete-toggle > span {
display:grid; min-width:0; gap:3px;
}
.concrete-toggle strong {
color:var(--ink); font-size:var(--text-sm); line-height:1.35;
}
.concrete-toggle small {
color:var(--muted); font-size:var(--text-xs); line-height:1.45;
}
.concrete-section-heading,
.concrete-composite-section__head {
display:flex; min-width:0; align-items:flex-start; justify-content:space-between; gap:12px;
}
.concrete-section-heading h3 {
margin:0 0 4px; font-size:var(--text-base);
}
.concrete-section-heading p {
margin:0; color:var(--muted); font-size:var(--text-xs); line-height:1.45;
}
.concrete-section-heading .secondary-button,
.concrete-composite-section__head .secondary-button {
min-width:0; flex:0 0 auto; padding:9px 12px; border-radius:10px;
}
.concrete-composite-list {
display:grid; gap:12px;
}
.concrete-composite-section {
display:grid; gap:12px; min-width:0; padding:14px; border:1px solid #ddd7ef; border-radius:13px; background:#fff;
}
.concrete-composite-section__head strong {
font-size:var(--text-sm);
}
.concrete-result h2:focus {
outline:0;
}
.concrete-primary-result {
display:flex; min-width:0; flex-direction:column; gap:7px; margin-top:14px; padding:20px; border-radius:16px; color:#fff; background:var(--violet);
}
.concrete-primary-result > span {
color:#eeeaff; font-size:var(--text-xs); font-weight:800; text-transform:uppercase; letter-spacing:.05em;
}
.concrete-primary-result > strong {
min-width:0; font-size:clamp(30px,6vw,44px); line-height:1.08; font-variant-numeric:tabular-nums; overflow-wrap:normal; word-break:normal;
}
.concrete-primary-result > small {
color:#f2efff; font-size:var(--text-sm); line-height:1.45;
}
.concrete-result-grid {
display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin-top:14px;
}
.concrete-result-grid article {
display:flex; min-width:0; flex-direction:column; gap:7px; padding:13px; border:1px solid var(--line); border-radius:13px; background:#fff;
}
.concrete-result-grid span {
color:var(--muted); font-size:var(--text-xs); line-height:1.35;
}
.concrete-result-grid strong {
min-width:0; color:var(--ink); font-size:var(--text-base); line-height:1.35; font-variant-numeric:tabular-nums; overflow-wrap:normal; word-break:normal;
}
.concrete-result-section {
margin-top:18px; padding:16px; border:1px solid var(--line); border-radius:14px; background:#faf9f6;
}
.concrete-result-section h3,
.concrete-result-section h4 {
margin:0 0 10px; font-size:var(--text-base);
}
.concrete-result-section h4 {
margin-top:14px; font-size:var(--text-sm);
}
.concrete-result-section .concrete-result-grid {
grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:0;
}
[data-section-rows] {
display:grid; gap:7px;
}
[data-section-rows] > div {
display:flex; min-width:0; align-items:baseline; justify-content:space-between; gap:12px; padding-bottom:7px; border-bottom:1px solid var(--line);
}
[data-section-rows] > div:last-child {
padding-bottom:0; border-bottom:0;
}
[data-section-rows] span {
min-width:0; overflow-wrap:anywhere;
}
[data-section-rows] strong {
flex:0 0 auto; font-variant-numeric:tabular-nums;
}
.concrete-handoff {
width:100%; margin-top:16px;
}
.concrete-formula {
margin-top:16px; border:1px solid var(--line); border-radius:14px; background:#fff;
}
.concrete-formula > summary {
padding:15px 17px; color:var(--violet); font-size:var(--text-sm); font-weight:850; cursor:pointer;
}
.concrete-formula ol {
display:grid; gap:9px; margin:0; padding:0 17px 16px; list-style:none;
}
.concrete-formula li {
display:grid; gap:4px; min-width:0; padding-bottom:9px; border-bottom:1px solid var(--line);
}
.concrete-formula li:last-child {
padding-bottom:0; border-bottom:0;
}
.concrete-formula li strong {
font-size:var(--text-xs);
}
.concrete-formula li span {
min-width:0; color:#4c4a55; font-size:var(--text-sm); line-height:1.5; font-variant-numeric:tabular-nums; overflow-wrap:anywhere;
}
@media (max-width:760px) {
.concrete-input-grid--four,
.concrete-result-grid,
.concrete-result-section .concrete-result-grid {
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media (max-width:560px) {
.concrete-switch,
.concrete-switch--three,
.concrete-input-grid,
.concrete-input-grid--three,
.concrete-input-grid--four {
grid-template-columns:minmax(0,1fr);
}
.concrete-switch--main {
grid-template-columns:repeat(2,minmax(0,1fr));
}
.concrete-switch--three label > span {
min-height:40px;
}
.concrete-section-heading {
align-items:stretch; flex-direction:column;
}
.concrete-section-heading .secondary-button {
width:100%;
}
}
@media (max-width:360px) {
.concrete-calculator {
padding:18px 16px;
}
.concrete-subpanel,
.concrete-options,
.concrete-primary-result,
.concrete-result-section {
padding:13px;
}
.concrete-switch label > span,
.concrete-chip-row label > span {
padding:8px; font-size:12px;
}
.concrete-result-grid,
.concrete-result-section .concrete-result-grid {
grid-template-columns:minmax(0,1fr);
}
.concrete-primary-result > strong {
font-size:29px;
}
}
.fuel-calculator,
.fuel-form,
.fuel-mode-panel,
.fuel-input-grid,
.fuel-options,
.fuel-result,
.fuel-primary-result,
.fuel-result-grid,
.fuel-result-section,
.fuel-handoffs,
.fuel-formula,
.fuel-result-note {
width:100%; max-width:100%; min-width:0; box-sizing:border-box;
}
.fuel-form {
display:grid; gap:16px;
}
.fuel-form [hidden],
.fuel-result[hidden],
.fuel-result-section[hidden],
.fuel-handoffs[hidden] {
display:none;
}
.fuel-mode-panel {
display:grid; gap:14px;
}
.fuel-form .field {
min-width:0; margin:0;
}
.fuel-form .field input,
.fuel-form .field select {
width:100%; max-width:100%; min-width:0; box-sizing:border-box; font-size:16px;
}
.fuel-form .field > span > small {
color:var(--muted); font-size:var(--text-xs); font-weight:650;
}
.fuel-form .field > small {
display:block; margin-top:7px; color:var(--muted); font-size:var(--text-xs); font-weight:600; line-height:1.45;
}
.fuel-form .field > .fuel-field-origin {
color:#4d5f1b;
}
.fuel-switch {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; min-width:0; margin:0; padding:0; border:0;
}
.fuel-switch--main {
grid-template-columns:repeat(3,minmax(0,1fr));
}
.fuel-switch legend {
grid-column:1/-1; margin-bottom:2px; color:var(--ink); font-size:var(--text-sm); font-weight:800;
}
.fuel-switch label {
position:relative; min-width:0; cursor:pointer;
}
.fuel-switch input {
position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;
}
.fuel-switch label > span {
display:flex; min-width:0; min-height:44px; align-items:center; justify-content:center; padding:9px 12px; border:1px solid #ddd7ef; border-radius:11px; color:#514b61; background:#fff; font-size:var(--text-sm); font-weight:800; line-height:1.3; text-align:center;
}
.fuel-switch input:checked + span {
border-color:var(--violet); color:var(--violet); background:#f5f1ff; box-shadow:inset 0 0 0 1px var(--violet);
}
.fuel-switch input:focus-visible + span {
outline:3px solid rgba(99,62,229,.24); outline-offset:2px;
}
.fuel-input-grid {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;
}
.fuel-grid-span {
grid-column:1/-1;
}
.fuel-help {
margin:0; color:var(--muted); font-size:var(--text-sm); line-height:1.55;
}
.fuel-help--accent {
padding:12px 14px; border-left:4px solid #8ba334; border-radius:10px; color:#555f3d; background:#f7fbe9;
}
.fuel-options {
display:grid; gap:13px; padding:15px; border:1px solid var(--line); border-radius:14px; background:#faf9f6;
}
.fuel-toggle {
display:flex; min-width:0; align-items:flex-start; gap:11px; cursor:pointer;
}
.fuel-toggle > input {
width:19px; height:19px; flex:0 0 19px; margin:2px 0 0; accent-color:var(--violet);
}
.fuel-toggle > span {
display:grid; min-width:0; gap:3px;
}
.fuel-toggle strong {
color:var(--ink); font-size:var(--text-sm); line-height:1.35;
}
.fuel-toggle small {
color:var(--muted); font-size:var(--text-xs); line-height:1.45;
}
.fuel-value-preview {
min-width:0; margin-top:-1px;
}
.fuel-value-preview > p {
margin:0 0 8px; color:var(--muted); font-size:var(--text-xs); font-weight:750;
}
.fuel-value-preview ul {
display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:0; padding:0; list-style:none;
}
.fuel-value-preview li {
min-width:0; padding:9px 10px; border:1px solid #e4def5; border-radius:10px; color:#5b536d; background:#faf8ff; font-size:var(--text-xs); font-weight:700; line-height:1.35; text-align:center; overflow-wrap:normal; word-break:normal;
}
.fuel-result h2 {
margin:8px 0 0; font-size:22px; line-height:1.2;
}
.fuel-result h2:focus {
outline:0;
}
.fuel-primary-result {
display:flex; align-items:flex-start; flex-direction:column; gap:7px; margin-top:14px; padding:20px; border-radius:16px; color:#fff; background:var(--violet);
}
.fuel-primary-result > span {
color:#eeeaff; font-size:var(--text-xs); font-weight:800; text-transform:uppercase; letter-spacing:.05em;
}
.fuel-primary-result > strong {
min-width:0; font-size:clamp(29px,5vw,42px); line-height:1.12; font-variant-numeric:tabular-nums; overflow-wrap:normal; word-break:normal;
}
.fuel-primary-result > small {
color:#f2efff; font-size:var(--text-sm); line-height:1.45;
}
.fuel-result-grid {
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-top:14px;
}
.fuel-result-grid article {
display:flex; min-width:0; flex-direction:column; gap:7px; padding:13px; border:1px solid var(--line); border-radius:13px; background:#fff;
}
.fuel-result-grid span {
color:var(--muted); font-size:var(--text-xs); line-height:1.35;
}
.fuel-result-grid strong {
min-width:0; color:var(--ink); font-size:var(--text-base); line-height:1.35; font-variant-numeric:tabular-nums; overflow-wrap:normal; word-break:normal;
}
.fuel-result-section {
margin-top:16px; padding:15px; border:1px solid var(--line); border-radius:14px; background:#faf9f6;
}
.fuel-result-section h3 {
margin:0 0 9px; font-size:var(--text-base);
}
.fuel-result-section p {
margin:0; color:#4c4a55; font-size:var(--text-sm); line-height:1.5; font-variant-numeric:tabular-nums;
}
.fuel-result-section .fuel-result-grid {
margin-top:0;
}
.fuel-handoffs {
margin-top:16px; padding:15px; border:1px solid #d8d1ef; border-radius:14px; background:#f8f5ff;
}
.fuel-handoffs > p {
margin:0 0 10px; color:var(--ink); font-size:var(--text-sm); font-weight:800;
}
.fuel-handoffs > div {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px;
}
.fuel-handoffs .secondary-button {
width:100%; min-width:0;
}
.fuel-formula {
margin-top:16px; border:1px solid var(--line); border-radius:14px; background:#fff;
}
.fuel-formula > summary {
padding:15px 17px; color:var(--violet); font-size:var(--text-sm); font-weight:850; cursor:pointer;
}
.fuel-formula ol {
display:grid; gap:9px; margin:0; padding:0 17px 16px; list-style:none;
}
.fuel-formula li {
display:grid; gap:4px; min-width:0; padding-bottom:9px; border-bottom:1px solid var(--line);
}
.fuel-formula li:last-child {
padding-bottom:0; border-bottom:0;
}
.fuel-formula li strong {
font-size:var(--text-xs);
}
.fuel-formula li span {
min-width:0; color:#4c4a55; font-size:var(--text-sm); line-height:1.5; font-variant-numeric:tabular-nums; overflow-wrap:anywhere;
}
.fuel-result-note {
margin-top:16px; padding:14px 16px; border-left:4px solid #bd8925; border-radius:11px; color:#684911; background:#fff8e8; font-size:var(--text-sm); line-height:1.55;
}
@media (max-width:760px) {
.fuel-value-preview ul {
grid-template-columns:repeat(2,minmax(0,1fr));
}
.fuel-result-grid {
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media (max-width:560px) {
.fuel-switch,
.fuel-switch--main,
.fuel-input-grid,
.fuel-handoffs > div {
grid-template-columns:minmax(0,1fr);
}
.fuel-result-grid {
grid-template-columns:minmax(0,1fr);
}
}
@media (max-width:360px) {
.fuel-calculator {
padding:18px 16px;
}
.fuel-options,
.fuel-primary-result,
.fuel-result-section,
.fuel-handoffs {
padding:13px;
}
.fuel-switch label > span {
min-height:40px; padding:8px; font-size:12px;
}
.fuel-primary-result > strong {
font-size:28px;
}
}
.car-customs-calculator,
.car-customs-form,
.car-customs-supported,
.car-customs-form-section,
.car-customs-scope-grid,
.car-customs-input-grid,
.car-customs-options,
.car-customs-electric-fields,
.car-customs-hybrid-help,
.car-customs-expenses,
.car-customs-result,
.car-customs-result-section,
.car-customs-result-grid,
.car-customs-details,
.car-customs-tariff-meta,
.car-customs-explanations {
width:100%; max-width:100%; min-width:0; box-sizing:border-box;
}
.car-customs-form {
display:grid; gap:18px;
}
.car-customs-form [hidden],
.car-customs-result[hidden],
.car-customs-result-section[hidden],
.car-customs-scope-error[hidden] {
display:none;
}
.car-customs-supported {
display:grid; gap:18px;
}
.car-customs-electric-fields {
display:grid; gap:12px;
}
.car-customs-form-section {
display:grid; gap:15px; padding:18px; border:1px solid var(--line); border-radius:16px; background:#faf9f6;
}
.car-customs-section-heading {
min-width:0;
}
.car-customs-section-heading h2 {
margin:6px 0 0; font-size:var(--text-lg); line-height:1.25;
}
.car-customs-switch {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; min-width:0; margin:0; padding:0; border:0;
}
.car-customs-switch--mode {
padding:16px; border:1px solid #d8d1ef; border-radius:15px; background:#f8f5ff;
}
.car-customs-switch--powertrain {
grid-template-columns:repeat(2,minmax(0,1fr));
}
.car-customs-switch legend {
grid-column:1/-1; margin-bottom:2px; padding:0; color:var(--ink); font-size:var(--text-sm); font-weight:800; line-height:1.35;
}
.car-customs-switch label {
position:relative; min-width:0; cursor:pointer;
}
.car-customs-switch input {
position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;
}
.car-customs-switch label > span {
display:flex; min-width:0; min-height:46px; align-items:center; justify-content:center; padding:9px 11px; border:1px solid #ddd7ef; border-radius:11px; color:#514b61; background:#fff; font-size:var(--text-xs); font-weight:800; line-height:1.35; text-align:center;
}
.car-customs-switch input:checked + span {
border-color:var(--violet); color:var(--violet); background:#f5f1ff; box-shadow:inset 0 0 0 1px var(--violet);
}
.car-customs-switch input:focus-visible + span {
outline:3px solid rgba(99,62,229,.24); outline-offset:2px;
}
.car-customs-scope-grid {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px 20px;
}
.car-customs-help {
grid-column:1/-1; margin:2px 0 0; color:var(--muted); font-size:var(--text-xs); font-weight:550; line-height:1.5;
}
.car-customs-hybrid-help {
display:grid; gap:7px; padding:13px 15px; border:1px solid #ddd7ef; border-radius:12px; color:#514b61; background:#f8f5ff;
}
.car-customs-hybrid-help p {
margin:0; font-size:var(--text-xs); line-height:1.5;
}
.car-customs-scope-error {
padding:14px 16px; border-left:4px solid #b64343; border-radius:10px; color:#8e2929; background:#fff1f1; font-size:var(--text-sm); font-weight:750; line-height:1.5;
}
.car-customs-input-grid {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:14px;
}
.car-customs-input-grid--dates {
grid-template-columns:repeat(2,minmax(0,1fr));
}
.car-customs-input-grid--expenses {
grid-template-columns:repeat(3,minmax(0,1fr));
}
.car-customs-form .field {
width:100%; max-width:100%; min-width:0; margin:0; box-sizing:border-box;
}
.car-customs-form .field > label,
.car-customs-form .field > span {
min-width:0; color:#555762; font-size:var(--text-sm); font-weight:750; line-height:1.35;
}
.car-customs-form .field input,
.car-customs-form .field select {
width:100%; max-width:100%; min-width:0; box-sizing:border-box; font-size:16px;
}
.car-customs-form .field > small {
display:block; margin-top:0; color:var(--muted); font-size:var(--text-xs); font-weight:550; line-height:1.5;
}
.car-customs-form .date-input-shell {
width:100%; max-width:100%; min-width:0;
}
.car-customs-form .date-input-shell > input[type="date"] {
width:100%; max-width:100%; min-width:0; height:52px; padding:0 12px; border:0; outline:0; color:var(--ink); background:transparent; box-shadow:none; box-sizing:border-box; flex:1 1 0; font-size:16px;
}
.car-customs-form .date-input-shell > input[type="date"]:focus {
border-color:transparent; box-shadow:none;
}
.car-customs-options {
display:grid; gap:11px;
}
.car-customs-check {
display:flex; min-width:0; align-items:flex-start; gap:11px; padding:13px 14px; border:1px solid #e1dcec; border-radius:12px; background:#fff; cursor:pointer;
}
.car-customs-check > input {
width:19px; height:19px; flex:0 0 19px; margin:2px 0 0; accent-color:var(--violet);
}
.car-customs-check > span {
display:grid; min-width:0; gap:3px;
}
.car-customs-check strong {
color:var(--ink); font-size:var(--text-sm); line-height:1.4;
}
.car-customs-check small {
color:var(--muted); font-size:var(--text-xs); line-height:1.45;
}
.car-customs-expenses {
padding:0; border:1px solid var(--line); border-radius:15px; background:#faf9f6;
}
.car-customs-expenses > summary {
padding:16px 18px; color:var(--ink); font-size:var(--text-sm); font-weight:850; cursor:pointer;
}
.car-customs-expenses > summary small {
color:var(--muted); font-size:var(--text-xs);
}
.car-customs-expenses > p {
margin:0; padding:0 18px; color:var(--muted); font-size:var(--text-xs); line-height:1.5;
}
.car-customs-expenses > .car-customs-input-grid {
padding:15px 18px 18px;
}
.car-customs-preview {
min-width:0;
}
.car-customs-preview > p {
margin:0 0 8px; color:var(--muted); font-size:var(--text-xs); font-weight:750;
}
.car-customs-preview ul {
display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:0; padding:0; list-style:none;
}
.car-customs-preview li {
min-width:0; padding:9px 10px; border:1px solid #e4def5; border-radius:10px; color:#5b536d; background:#faf8ff; font-size:var(--text-xs); font-weight:700; line-height:1.35; text-align:center; overflow-wrap:normal; word-break:normal;
}
.car-customs-result h2 {
margin:8px 0 0; font-size:22px; line-height:1.2;
}
.car-customs-result h2:focus {
outline:0;
}
.car-customs-primary-result {
display:flex; min-width:0; align-items:flex-start; flex-direction:column; gap:7px; margin-top:14px; padding:20px; border-radius:16px; color:#fff; background:var(--violet);
}
.car-customs-primary-result > span {
color:#eeeaff; font-size:var(--text-xs); font-weight:800; text-transform:uppercase; letter-spacing:.05em;
}
.car-customs-primary-result > strong {
min-width:0; font-size:clamp(29px,5vw,42px); line-height:1.12; font-variant-numeric:tabular-nums; overflow-wrap:normal; word-break:normal;
}
.car-customs-primary-result > small {
color:#f2efff; font-size:var(--text-sm); line-height:1.45;
}
.car-customs-result-section {
margin-top:16px; padding:16px; border:1px solid var(--line); border-radius:14px; background:#faf9f6;
}
.car-customs-result-section h3 {
margin:0 0 11px; font-size:var(--text-base); line-height:1.35;
}
.car-customs-result-grid {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px;
}
.car-customs-result-grid article {
display:flex; min-width:0; flex-direction:column; gap:7px; padding:13px; border:1px solid var(--line); border-radius:12px; background:#fff;
}
.car-customs-result-grid span {
color:var(--muted); font-size:var(--text-xs); line-height:1.4;
}
.car-customs-result-grid strong {
min-width:0; color:var(--ink); font-size:var(--text-base); line-height:1.35; font-variant-numeric:tabular-nums; overflow-wrap:normal; word-break:normal;
}
.car-customs-details,
.car-customs-tariff-meta {
display:grid; gap:0; margin:0;
}
.car-customs-details > div,
.car-customs-tariff-meta > div {
display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; padding:9px 0; border-top:1px solid var(--line);
}
.car-customs-details > div:first-child,
.car-customs-tariff-meta > div:first-child {
border-top:0;
}
.car-customs-details dt,
.car-customs-tariff-meta dt {
color:var(--muted); font-size:var(--text-xs); line-height:1.45;
}
.car-customs-details dd,
.car-customs-tariff-meta dd {
min-width:0; margin:0; color:var(--ink); font-size:var(--text-sm); font-weight:750; line-height:1.45; text-align:right; overflow-wrap:break-word;
}
.car-customs-reason {
margin:12px 0 0; padding:12px 14px; border-left:4px solid #8ba334; border-radius:10px; color:#555f3d; background:#f7fbe9; font-size:var(--text-sm); line-height:1.5;
}
.car-customs-warnings ul {
display:grid; gap:8px; margin:0; padding:0 0 0 20px; color:#604817; font-size:var(--text-sm); line-height:1.55;
}
.car-customs-explanations {
margin-top:16px; border:1px solid var(--line); border-radius:14px; background:#faf9f6;
}
.car-customs-explanations > summary {
padding:15px 16px; color:var(--ink); font-size:var(--text-base); font-weight:850; line-height:1.35; cursor:pointer;
}
.car-customs-explanations[open] > summary {
border-bottom:1px solid var(--line);
}
.car-customs-explanations__body {
min-width:0; padding:14px 16px 16px;
}
.car-customs-explanations__body > .car-customs-result-section {
margin-top:12px;
}
.car-customs-explanations__body > .car-customs-result-section:first-child {
margin-top:0;
}
.car-customs-tariff-meta {
margin-top:16px; padding:15px 17px; border:1px solid #ddd7ef; border-radius:14px; background:#f8f5ff;
}
.car-customs-about {
margin-top:16px;
}
.car-customs-about > h3 {
margin:0 0 8px; font-size:var(--text-base); line-height:1.35;
}
.car-customs-about .car-customs-tariff-meta {
margin-top:0;
}
.car-customs-disclaimer {
margin-top:16px; padding:14px 16px; border-left:4px solid #bd8925; border-radius:11px; color:#684911; background:#fff8e8; font-size:var(--text-sm); line-height:1.55;
}
@media (min-width:761px) {
.car-customs-input-grid--dates .field > label {
display:flex; min-height:38px; align-items:flex-end;
}
}
@media (max-width:760px) {
.car-customs-scope-grid,
.car-customs-input-grid,
.car-customs-input-grid--dates,
.car-customs-input-grid--expenses {
grid-template-columns:minmax(0,1fr);
}
.car-customs-preview ul {
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media (max-width:480px) {
.car-customs-switch,
.car-customs-switch--powertrain,
.car-customs-result-grid {
grid-template-columns:minmax(0,1fr);
}
.car-customs-details > div,
.car-customs-tariff-meta > div {
grid-template-columns:minmax(0,1fr); gap:3px;
}
.car-customs-details dd,
.car-customs-tariff-meta dd {
text-align:left;
}
}
@media (max-width:360px) {
.car-customs-calculator {
padding:18px 16px;
}
.car-customs-form-section,
.car-customs-switch--mode,
.car-customs-primary-result,
.car-customs-result-section,
.car-customs-explanations__body {
padding:14px;
}
.car-customs-primary-result > strong {
font-size:28px;
}
}

/* Deposit and savings account calculator. */
.deposit-savings-form {
display:grid; min-width:0; gap:18px;
}
.deposit-savings-form .field {
width:100%; max-width:100%; min-width:0; margin:0; box-sizing:border-box;
}
.deposit-savings-form .field > span {
min-width:0; color:#555762; font-size:var(--text-sm); font-weight:750; line-height:1.35;
}
.deposit-savings-form .field input,
.deposit-savings-form .field select {
width:100%; max-width:100%; min-width:0; box-sizing:border-box; font-size:16px;
}
.deposit-savings-input-grid {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;
}
.deposit-savings-quick {
display:grid; min-width:0; gap:16px;
}
.deposit-savings-switch {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; min-width:0; margin:0; padding:0; border:0;
}
.deposit-savings-switch--main {
padding:16px; border:1px solid #d8d1ef; border-radius:15px; background:#f8f5ff;
}
.deposit-savings-switch legend {
grid-column:1/-1; margin-bottom:2px; padding:0; color:var(--ink); font-size:var(--text-sm); font-weight:850; line-height:1.35;
}
.deposit-savings-switch label {
position:relative; min-width:0; cursor:pointer;
}
.deposit-savings-switch input {
position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;
}
.deposit-savings-switch label > span {
display:flex; min-width:0; min-height:48px; align-items:center; justify-content:center; flex-direction:column; gap:2px; padding:9px 11px; border:1px solid #ddd7ef; border-radius:11px; color:#514b61; background:#fff; font-size:var(--text-xs); font-weight:800; line-height:1.35; text-align:center;
}
.deposit-savings-switch label > span small {
color:var(--muted); font-size:10px; font-weight:600;
}
.deposit-savings-switch input:checked + span {
border-color:var(--violet); color:var(--violet); background:#f5f1ff; box-shadow:inset 0 0 0 1px var(--violet);
}
.deposit-savings-switch input:focus-visible + span {
outline:3px solid rgba(99,62,229,.24); outline-offset:2px;
}
.deposit-savings-advanced {
display:grid; min-width:0; gap:10px;
}
.deposit-savings-advanced > details {
min-width:0; border:1px solid var(--line); border-radius:14px; background:#faf9f6;
}
.deposit-savings-advanced > details > summary {
display:flex; min-width:0; align-items:baseline; justify-content:space-between; gap:12px; padding:15px 17px; color:var(--ink); font-size:var(--text-sm); font-weight:850; line-height:1.4; cursor:pointer;
}
.deposit-savings-advanced > details > summary small {
color:var(--muted); font-size:var(--text-xs); font-weight:600; text-align:right;
}
.deposit-savings-advanced > details[open] > summary {
border-bottom:1px solid var(--line);
}
.deposit-savings-details-body {
display:grid; min-width:0; gap:14px; padding:16px 17px 18px;
}
.deposit-savings-toggle,
.deposit-savings-checks label,
.deposit-savings-options label {
display:flex; min-width:0; align-items:flex-start; gap:10px; color:#514b61; font-size:var(--text-sm); line-height:1.45; cursor:pointer;
}
.deposit-savings-toggle > input,
.deposit-savings-checks input,
.deposit-savings-options input {
width:18px; height:18px; flex:0 0 18px; margin:1px 0 0; accent-color:var(--violet);
}
.deposit-savings-toggle > span {
display:grid; min-width:0; gap:3px;
}
.deposit-savings-toggle small,
.deposit-savings-options small {
color:var(--muted); font-size:var(--text-xs); font-weight:550;
}
.deposit-savings-checks,
.deposit-savings-options {
display:grid; min-width:0; gap:10px;
}
.deposit-savings-help {
margin:0; color:var(--muted); font-size:var(--text-xs); line-height:1.55;
}
.deposit-savings-editor-head {
display:flex; min-width:0; align-items:center; justify-content:space-between; gap:12px;
}
.deposit-savings-editor-head > div {
display:grid; min-width:0; gap:3px;
}
.deposit-savings-editor-head strong {
font-size:var(--text-sm); line-height:1.35;
}
.deposit-savings-editor-head small {
color:var(--muted); font-size:var(--text-xs); line-height:1.45;
}
.deposit-savings-editor-head .secondary-button,
.deposit-savings-editor-row .secondary-button {
min-height:40px; flex:0 0 auto; padding:8px 12px;
}
.deposit-savings-editor-list {
display:grid; min-width:0; gap:10px;
}
.deposit-savings-editor-row {
display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr) auto; align-items:end; gap:10px; min-width:0; padding:13px; border:1px solid #e2ddec; border-radius:12px; background:#fff;
}
.deposit-savings-editor-row--tax {
grid-template-columns:minmax(90px,.55fr) repeat(3,minmax(0,1fr)) auto;
}
.deposit-savings-preview {
min-width:0;
}
.deposit-savings-preview > p {
margin:0 0 8px; color:var(--muted); font-size:var(--text-xs); font-weight:750;
}
.deposit-savings-preview ul {
display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:0; padding:0; list-style:none;
}
.deposit-savings-preview li {
min-width:0; padding:9px 10px; border:1px solid #e4def5; border-radius:10px; color:#5b536d; background:#faf8ff; font-size:var(--text-xs); font-weight:700; line-height:1.35; text-align:center;
}
.deposit-savings-result h2 {
margin:8px 0 0; font-size:22px; line-height:1.2;
}
.deposit-savings-result h2:focus {
outline:0;
}
.deposit-savings-hero {
display:flex; min-width:0; align-items:flex-start; flex-direction:column; gap:7px; margin-top:14px; padding:20px; border-radius:16px; color:#fff; background:var(--violet);
}
.deposit-savings-hero > span {
color:#eeeaff; font-size:var(--text-xs); font-weight:800; text-transform:uppercase; letter-spacing:.05em;
}
.deposit-savings-hero > strong {
min-width:0; font-size:clamp(29px,5vw,42px); line-height:1.12; font-variant-numeric:tabular-nums; word-break:normal; overflow-wrap:normal;
}
.deposit-savings-hero > small {
color:#f2efff; font-size:var(--text-sm); line-height:1.45;
}
.deposit-savings-result-grid,
.deposit-savings-comparison-grid {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:12px;
}
.deposit-savings-result-grid article,
.deposit-savings-comparison-grid article {
display:flex; min-width:0; flex-direction:column; gap:7px; padding:13px; border:1px solid var(--line); border-radius:12px; background:#fff;
}
.deposit-savings-result-grid article[data-tone="own"] {
background:#f7f5ff;
}
.deposit-savings-result-grid article[data-tone="tax"] {
background:#fff8e8;
}
.deposit-savings-result-grid span,
.deposit-savings-comparison-grid span {
color:var(--muted); font-size:var(--text-xs); line-height:1.4;
}
.deposit-savings-result-grid strong,
.deposit-savings-comparison-grid strong {
min-width:0; color:var(--ink); font-size:var(--text-base); line-height:1.35; font-variant-numeric:tabular-nums; word-break:normal; overflow-wrap:normal;
}
.deposit-savings-result-section {
min-width:0; margin-top:16px; padding:16px; border:1px solid var(--line); border-radius:14px; background:#faf9f6;
}
.deposit-savings-result-section h3 {
margin:0 0 11px; font-size:var(--text-base); line-height:1.35;
}
.deposit-savings-result-section > p {
margin:10px 0 0; color:var(--muted); font-size:var(--text-xs); line-height:1.55;
}
.deposit-savings-result-section table,
.deposit-savings-explanation table {
width:100%; min-width:720px; border-collapse:collapse; background:#fff; font-size:var(--text-xs);
}
.deposit-savings-result-section .deposit-savings-tax-table {
min-width:1120px;
}
.deposit-savings-result-section th,
.deposit-savings-result-section td,
.deposit-savings-explanation th,
.deposit-savings-explanation td {
padding:10px 12px; border-bottom:1px solid #eeece7; text-align:right; white-space:nowrap;
}
.deposit-savings-result-section th:first-child,
.deposit-savings-result-section td:first-child,
.deposit-savings-explanation th:first-child,
.deposit-savings-explanation td:first-child {
text-align:left;
}
.deposit-savings-result-section th,
.deposit-savings-explanation th {
color:var(--muted); background:#f6f4ef; font-size:10px;
}
.deposit-savings-chart {
width:100%; min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:#fff;
}
.deposit-savings-chart svg {
display:block; width:100%; height:auto; min-height:180px;
}
.deposit-savings-chart-axis {
stroke:#dad6cf; stroke-width:1;
}
.deposit-savings-chart-line {
fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round;
}
.deposit-savings-chart-line.is-balance,
.deposit-savings-chart-legend i.is-balance { stroke:#633ee5; background:#633ee5; }
.deposit-savings-chart-line.is-own,
.deposit-savings-chart-legend i.is-own { stroke:#2c8874; background:#2c8874; }
.deposit-savings-chart-line.is-interest,
.deposit-savings-chart-legend i.is-interest { stroke:#cf862b; background:#cf862b; }
.deposit-savings-chart-legend {
display:flex; flex-wrap:wrap; gap:12px; margin-top:10px; color:var(--muted); font-size:var(--text-xs);
}
.deposit-savings-chart-legend span {
display:inline-flex; align-items:center; gap:6px;
}
.deposit-savings-chart-legend i {
width:9px; height:9px; border-radius:50%;
}
.deposit-savings-explanation {
min-width:0; margin-top:12px; border:1px solid var(--line); border-radius:13px; background:#faf9f6;
}
.deposit-savings-explanation > summary {
padding:14px 16px; color:var(--ink); font-size:var(--text-sm); font-weight:850; cursor:pointer;
}
.deposit-savings-explanation > [data-result-assumptions],
.deposit-savings-explanation > p {
margin:0; padding:0 16px 15px; color:var(--muted); font-size:var(--text-xs); line-height:1.55;
}
.deposit-savings-explanation ul {
display:grid; gap:7px; margin:0; padding-left:18px;
}
.deposit-savings-explanation .table-scroll {
margin:0 16px 16px;
}
@media (max-width:900px) {
.deposit-savings-editor-row--tax {
grid-template-columns:repeat(2,minmax(0,1fr));
}
.deposit-savings-editor-row--tax .secondary-button {
justify-self:start;
}
}
@media (max-width:680px) {
.deposit-savings-input-grid,
.deposit-savings-editor-row,
.deposit-savings-editor-row--tax {
grid-template-columns:minmax(0,1fr);
}
.deposit-savings-editor-row .secondary-button {
justify-self:start;
}
.deposit-savings-preview ul {
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media (max-width:480px) {
.deposit-savings-switch,
.deposit-savings-result-grid,
.deposit-savings-comparison-grid {
grid-template-columns:minmax(0,1fr);
}
.deposit-savings-advanced > details > summary,
.deposit-savings-editor-head {
align-items:flex-start; flex-direction:column;
}
}
@media (max-width:360px) {
.deposit-savings-calculator {
padding:18px 16px;
}
.deposit-savings-switch--main,
.deposit-savings-details-body,
.deposit-savings-hero,
.deposit-savings-result-section {
padding:14px;
}
.deposit-savings-hero > strong {
font-size:28px;
}
}

/* Tire calculator: nominal tyre/rim geometry with one compact canonical state. */
.tire-calculator,
.tire-form,
.tire-mode-selector,
.tire-size-grid,
.tire-size-card,
.tire-segments,
.tire-advanced,
.tire-advanced__body,
.tire-option-section,
.tire-input-grid,
.tire-wheel-inputs,
.tire-result,
.tire-result-hero,
.tire-result-section,
.tire-summary-grid,
.tire-assumptions,
.tire-visual,
.tire-visual-legend {
width:100%; max-width:100%; min-width:0; box-sizing:border-box;
}
.tire-form {
display:grid; gap:16px;
}
.tire-form [hidden],
.tire-result[hidden],
.tire-result-section[hidden] {
display:none;
}
.tire-mode-selector {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0; padding:0; border:0;
}
.tire-mode-selector legend {
grid-column:1/-1; margin-bottom:2px; color:var(--ink); font-size:var(--text-sm); font-weight:800;
}
.tire-mode-selector label {
position:relative; min-width:0; cursor:pointer;
}
.tire-mode-selector input {
position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;
}
.tire-mode-selector span {
display:flex; min-width:0; min-height:44px; align-items:center; justify-content:center; padding:9px 12px; border:1px solid #ddd7ef; border-radius:11px; color:#514b61; background:#fff; font-size:var(--text-sm); font-weight:800; line-height:1.3; text-align:center;
}
.tire-mode-selector input:checked + span {
border-color:var(--violet); color:var(--violet); background:#f5f1ff; box-shadow:inset 0 0 0 1px var(--violet);
}
.tire-mode-selector input:focus-visible + span {
outline:3px solid rgba(99,62,229,.24); outline-offset:2px;
}
.tire-size-grid {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;
}
.tire-size-card {
display:grid; align-content:start; gap:12px; padding:16px; border:1px solid var(--line); border-radius:15px; background:#faf9f6;
}
.tire-size-card__head {
display:flex; min-width:0; min-height:28px; align-items:center; justify-content:space-between; gap:10px;
}
.tire-size-card__head > strong {
color:var(--ink); font-size:var(--text-base); line-height:1.3;
}
.tire-size-card__head > small {
color:var(--muted); font-size:var(--text-xs);
}
.tire-swap {
min-height:32px; flex:0 0 auto; padding:5px 8px; border:0; border-radius:8px; color:var(--violet); background:#eee9ff; font:inherit; font-size:var(--text-xs); font-weight:800; cursor:pointer;
}
.tire-swap:focus-visible {
outline:3px solid rgba(99,62,229,.24); outline-offset:2px;
}
.tire-size-card .field,
.tire-option-section .field {
min-width:0; margin:0;
}
.tire-size-card .field input,
.tire-option-section .field input {
width:100%; max-width:100%; min-width:0; box-sizing:border-box; font-size:16px;
}
.tire-calculator input[aria-invalid="true"] {
border-color:#b42318; box-shadow:0 0 0 2px rgba(180,35,24,.12);
}
.tire-segments {
display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); gap:7px; margin:0; padding:0; border:0;
}
.tire-segments legend {
grid-column:1/-1; margin-bottom:1px; color:var(--muted); font-size:var(--text-xs); font-weight:650;
}
.tire-segments label {
display:grid; min-width:0; gap:5px; color:var(--muted); font-size:9px; font-weight:700;
}
.tire-segments input {
width:100%; max-width:100%; min-width:0; height:42px; box-sizing:border-box; padding:0 8px; border:1px solid #dedbd4; border-radius:10px; outline:0; background:#fff; color:var(--ink); font-size:14px; font-weight:700;
}
.tire-segments input:focus {
border-color:var(--violet); box-shadow:0 0 0 3px rgba(99,62,229,.1);
}
.tire-advanced {
border:1px solid var(--line); border-radius:15px; background:#fff;
}
.tire-advanced > summary {
padding:15px 17px; color:var(--ink); font-size:var(--text-sm); font-weight:850; cursor:pointer;
}
.tire-advanced__body {
display:grid; gap:12px; padding:0 14px 14px;
}
.tire-option-section {
display:grid; gap:12px; padding:14px; border:1px solid #ebe7df; border-radius:13px; background:#faf9f6;
}
.tire-option-section__head {
display:grid; gap:3px;
}
.tire-option-section__head strong,
.tire-toggle strong {
color:var(--ink); font-size:var(--text-sm); line-height:1.35;
}
.tire-option-section__head small,
.tire-toggle small {
color:var(--muted); font-size:var(--text-xs); line-height:1.45;
}
.tire-input-grid,
.tire-wheel-inputs {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;
}
.tire-toggle {
display:flex; min-width:0; align-items:flex-start; gap:11px; cursor:pointer;
}
.tire-toggle > input {
width:19px; height:19px; flex:0 0 19px; margin:2px 0 0; accent-color:var(--violet);
}
.tire-toggle > span {
display:grid; min-width:0; gap:3px;
}
.tire-wheel-inputs > div {
display:grid; min-width:0; gap:10px;
}
.tire-wheel-inputs > div > strong {
font-size:var(--text-sm);
}
.tire-option-note {
grid-column:1/-1; margin:0; color:var(--muted); font-size:var(--text-xs); line-height:1.5;
}
.tire-reset-note {
min-height:0; margin:0; color:#765113; font-size:var(--text-xs); line-height:1.45;
}
.tire-reset-note:empty {
display:none;
}
.tire-preview > p {
margin:0 0 8px; color:var(--muted); font-size:var(--text-xs); font-weight:750;
}
.tire-preview ul {
display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:0; padding:0; list-style:none;
}
.tire-preview li {
min-width:0; padding:9px 8px; border:1px solid #e4def5; border-radius:10px; color:#5b536d; background:#faf8ff; font-size:var(--text-xs); font-weight:700; line-height:1.35; text-align:center;
}
.tire-result h2 {
margin:8px 0 0; font-size:22px; line-height:1.2;
}
.tire-result h2:focus {
outline:0;
}
.tire-result-hero {
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-top:14px;
}
.tire-result-hero article {
display:flex; min-width:0; flex-direction:column; gap:7px; padding:16px; border-radius:15px; color:#fff; background:var(--violet);
}
.tire-result-hero span {
color:#eeeaff; font-size:var(--text-xs); font-weight:800; line-height:1.35; text-transform:uppercase; letter-spacing:.04em;
}
.tire-result-hero strong {
min-width:0; font-size:clamp(22px,3vw,32px); line-height:1.15; font-variant-numeric:tabular-nums; overflow-wrap:normal; word-break:normal;
}
.tire-result-hero small {
color:#f2efff; font-size:var(--text-xs); line-height:1.45;
}
.tire-result-section {
margin-top:16px; padding:15px; border:1px solid var(--line); border-radius:14px; background:#faf9f6;
}
.tire-result-section h3 {
margin:0 0 9px; font-size:var(--text-base); line-height:1.3;
}
.tire-result-section > p {
margin:0 0 11px; color:var(--muted); font-size:var(--text-sm); line-height:1.5;
}
.tire-result-table {
width:100%; min-width:610px; border-collapse:collapse; font-variant-numeric:tabular-nums;
}
.tire-result-table.is-single {
min-width:0; table-layout:fixed;
}
.tire-result-table.is-single th,
.tire-result-table.is-single td {
white-space:normal;
}
.tire-result-table.is-single th:first-child {
width:62%;
}
.tire-result-table th,
.tire-result-table td {
padding:10px 11px; border-bottom:1px solid #e8e4dc; color:#41404a; font-size:var(--text-xs); line-height:1.4; text-align:right; white-space:nowrap;
}
.tire-result-table th:first-child,
.tire-result-table td:first-child {
text-align:left;
}
.tire-result-table thead th {
color:var(--muted); background:#f2f0eb; font-size:10px;
}
.tire-guideline {
border-color:#d9d0f4; background:#f8f5ff;
}
.tire-guideline > p:last-child {
margin-bottom:0;
}
.tire-visual-head {
display:flex; min-width:0; align-items:center; justify-content:space-between; gap:12px;
}
.tire-visual-head > h3 {
min-width:0;
}
.tire-visual-head > div {
display:flex; min-width:0; max-width:100%; gap:7px;
}
.tire-visual-head .secondary-button {
min-width:0; max-width:100%; min-height:38px; box-sizing:border-box; padding:7px 10px;
}
.tire-visual-head .secondary-button.is-active {
border-color:var(--violet); color:var(--violet); background:#f2eeff;
}
.tire-visual {
display:block; height:auto; min-height:220px; margin-top:8px; border:1px solid #e4e0d8; border-radius:12px; background:#fff;
}
.tire-visual-legend {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:10px;
}
.tire-visual-legend[hidden] {
display:none;
}
.tire-visual-legend__item {
display:flex; min-width:0; align-items:center; gap:9px; padding:9px 10px; border:1px solid #e4e0d8; border-radius:10px; color:#4c4a55; background:#fff; font-size:var(--text-xs); font-weight:750; line-height:1.4;
}
.tire-visual-legend__item > span:last-child {
min-width:0; word-break:normal; overflow-wrap:normal;
}
.tire-visual-legend__swatch {
width:11px; height:11px; flex:0 0 11px; border-radius:50%; background:#633ee5;
}
.tire-visual-legend__swatch--new {
background:#2c8874;
}
.tire-summary-grid {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;
}
.tire-summary-grid ul,
.tire-assumptions ul {
display:grid; gap:7px; margin:0; padding-left:18px; color:#4c4a55; font-size:var(--text-sm); line-height:1.5;
}
.tire-assumptions {
margin-top:16px; border:1px solid var(--line); border-radius:14px; background:#fff;
}
.tire-assumptions > summary {
padding:15px 17px; color:var(--violet); font-size:var(--text-sm); font-weight:850; cursor:pointer;
}
.tire-assumptions ul {
padding:0 18px 16px 34px;
}
@media (max-width:760px) {
.tire-size-grid,
.tire-result-hero,
.tire-summary-grid {
grid-template-columns:minmax(0,1fr);
}
.tire-preview ul {
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media (max-width:560px) {
.tire-input-grid,
.tire-wheel-inputs {
grid-template-columns:minmax(0,1fr);
}
.tire-visual-head {
align-items:flex-start; flex-direction:column;
}
.tire-visual-head > div {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%;
}
.tire-visual-head .secondary-button {
width:100%;
}
.tire-visual-legend {
grid-template-columns:minmax(0,1fr);
}
}
@media (max-width:360px) {
.tire-calculator {
padding:18px 16px;
}
.tire-size-card,
.tire-option-section,
.tire-result-section,
.tire-result-hero article {
padding:13px;
}
.tire-size-card__head {
align-items:flex-start;
}
.tire-swap {
max-width:108px;
}
.tire-segments {
gap:6px;
}
.tire-segments input {
padding-inline:6px;
}
.tire-result-hero strong {
font-size:24px;
}
}

/* Text counter: compact live utility on the shared calculator surface. */
.text-counter-calculator,
.text-counter-form,
.text-counter-result,
.text-counter-input {
width:100%; max-width:100%; min-width:0; box-sizing:border-box;
}
.text-counter-input {
display:flex; flex-direction:column; gap:8px; color:#555762; font-size:var(--text-sm); font-weight:700;
}
.text-counter-input textarea {
width:100%; min-height:290px; max-width:100%; padding:16px; resize:vertical; border:1px solid #dedbd4; border-radius:15px; outline:0; background:#faf9f6; color:var(--ink); font:inherit; font-size:var(--text-reading); font-weight:500; line-height:1.55; box-sizing:border-box; transition:border-color .2s,box-shadow .2s;
}
.text-counter-input textarea:focus {
border-color:var(--violet); box-shadow:0 0 0 4px rgba(99,62,229,.1);
}
.text-counter-input-actions {
min-height:47px; display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:9px;
}
.text-counter-input-actions > span {
margin-right:auto; color:var(--violet); font-size:var(--text-xs); font-weight:800;
}
.text-counter-input-actions .secondary-button {
min-width:132px; cursor:pointer;
}
.text-counter-privacy {
margin:8px 0 0; color:var(--muted); font-size:var(--text-xs); line-height:1.55;
}
.text-counter-result {
display:block;
}
.text-counter-primary-grid {
display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:13px;
}
.text-counter-primary-grid .result-item {
min-width:0; min-height:92px; padding:14px;
}
.text-counter-primary-grid strong {
font-variant-numeric:tabular-nums; overflow-wrap:normal; word-break:normal;
}
.text-counter-secondary-grid {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:10px;
}
.text-counter-secondary-grid > div {
display:flex; min-width:0; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:#fff;
}
.text-counter-secondary-grid span {
color:var(--muted); font-size:var(--text-xs);
}
.text-counter-secondary-grid strong {
font-size:var(--text-base); font-variant-numeric:tabular-nums;
}
.text-counter-controls {
display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; margin-top:18px;
}
.text-counter-controls > .field {
margin:0; padding:14px; border:1px solid var(--line); border-radius:14px; background:#faf9f6;
}
.text-counter-disclosure {
min-width:0; border:1px solid var(--line); border-radius:14px; background:#faf9f6;
}
.text-counter-disclosure summary {
min-height:52px; display:flex; align-items:center; padding:10px 14px; color:var(--violet); cursor:pointer; font-size:var(--text-sm); font-weight:850;
}
.text-counter-disclosure[open] summary {
border-bottom:1px solid var(--line);
}
.text-counter-disclosure:last-child {
grid-column:1 / -1;
}
.text-counter-limit-fields {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:14px;
}
.text-counter-limit-fields .field {
margin:0;
}
.text-counter-limit-fields > p {
grid-column:1 / -1; margin:2px 0 0; color:var(--violet); font-size:var(--text-sm); font-weight:850;
}
.text-counter-limit-fields > p[data-status="exceeded"] {
color:#a33434;
}
.text-counter-technical-metrics {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0; padding:14px 14px 0;
}
.text-counter-technical-metrics > div {
display:flex; min-width:0; align-items:center; justify-content:space-between; gap:12px; padding:11px 12px; border-radius:10px; background:#fff;
}
.text-counter-technical-metrics dt {
color:var(--muted); font-size:var(--text-xs);
}
.text-counter-technical-metrics dd {
margin:0; font-size:var(--text-sm); font-weight:850; font-variant-numeric:tabular-nums;
}
.text-counter-disclosure > p {
margin:10px 14px 14px; color:var(--muted); font-size:var(--text-xs); line-height:1.5;
}
.text-counter-calculator.is-updating .text-counter-primary-grid,
.text-counter-calculator.is-updating .text-counter-secondary-grid,
.text-counter-calculator.is-stale .text-counter-primary-grid,
.text-counter-calculator.is-stale .text-counter-secondary-grid {
opacity:.58;
}
@media (max-width:760px) {
.text-counter-primary-grid {
grid-template-columns:repeat(2,minmax(0,1fr));
}
.text-counter-controls {
grid-template-columns:minmax(0,1fr);
}
.text-counter-disclosure:last-child {
grid-column:auto;
}
}
@media (max-width:480px) {
.text-counter-input textarea {
min-height:210px; padding:13px;
}
.text-counter-primary-grid,
.text-counter-secondary-grid,
.text-counter-limit-fields,
.text-counter-technical-metrics {
gap:7px;
}
.text-counter-primary-grid .result-item {
min-height:88px; padding:12px;
}
.text-counter-secondary-grid > div,
.text-counter-technical-metrics > div {
padding:10px;
}
.text-counter-limit-fields,
.text-counter-technical-metrics {
grid-template-columns:minmax(0,1fr);
}
.text-counter-limit-fields > p {
grid-column:auto;
}
}
@media (max-width:360px) {
.text-counter-calculator {
padding:18px 16px;
}
.text-counter-input textarea {
min-height:190px;
}
}

/* Hash and Base64 text utility on the shared calculator surface. */
.hash-base64-calculator,
.hash-base64-form,
.hash-base64-result,
.hash-base64-input,
.hash-base64-output {
width:100%; max-width:100%; min-width:0; box-sizing:border-box;
}
.hash-base64-mode-selector .percent-mode-grid {
width:100%; min-width:0;
}
.hash-base64-mode-selector .percent-mode-grid b {
font-size:var(--text-sm);
}
.hash-base64-form [hidden],
.hash-base64-result[hidden] {
display:none;
}
.hash-base64-options {
display:grid; grid-template-columns:minmax(0,1fr); min-width:0; margin-bottom:3px;
}
.hash-base64-options .field {
margin-bottom:15px;
}
.hash-base64-padding {
width:fit-content; margin:0 0 17px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:#faf9f6;
}
.hash-base64-input,
.hash-base64-output {
display:flex; flex-direction:column; gap:8px; color:#555762; font-size:var(--text-sm); font-weight:750;
}
.hash-base64-input textarea,
.hash-base64-output textarea {
display:block; width:100%; max-width:100%; min-width:0; padding:15px; resize:vertical; border:1px solid #dedbd4; border-radius:14px; outline:0; background:#faf9f6; color:var(--ink); font:inherit; font-size:16px; font-weight:500; line-height:1.55; box-sizing:border-box; transition:border-color .2s,box-shadow .2s;
}
.hash-base64-input textarea {
min-height:240px;
}
.hash-base64-output textarea {
min-height:150px; overflow:auto; background:#fff; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; overflow-wrap:anywhere; white-space:pre-wrap;
}
.hash-base64-input textarea:focus,
.hash-base64-output textarea:focus {
border-color:var(--violet); box-shadow:0 0 0 4px rgba(99,62,229,.1);
}
.hash-base64-exact,
.hash-base64-privacy {
margin:8px 0 0; color:var(--muted); font-size:var(--text-xs); line-height:1.55;
}
.hash-base64-actions,
.hash-base64-result-actions {
display:flex; min-width:0; align-items:center; justify-content:flex-end; gap:10px; margin-top:16px;
}
.hash-base64-actions .secondary-button {
flex:0 0 auto;
}
.hash-base64-actions .calculate-button {
width:min(100%,420px); margin:0;
}
.hash-base64-privacy {
padding:11px 13px; border-left:3px solid #bd8925; border-radius:9px; background:#fff8e8;
}
.hash-base64-result h2 {
margin:7px 0 14px; font-size:var(--text-title); line-height:1.2;
}
.hash-base64-result-actions > span {
margin-right:auto; color:var(--violet); font-size:var(--text-xs); font-weight:800; line-height:1.4;
}
.hash-base64-result .result-note {
margin-top:12px;
}
@media (max-width:480px) {
.hash-base64-mode-selector {
padding:11px;
}
.hash-base64-mode-selector .percent-mode-grid {
gap:6px;
}
.hash-base64-mode-selector .percent-mode-grid label > span {
min-height:68px; padding:8px 5px;
}
.hash-base64-input textarea {
min-height:190px; padding:13px;
}
.hash-base64-actions {
align-items:stretch; flex-direction:column-reverse;
}
.hash-base64-actions .calculate-button,
.hash-base64-actions .secondary-button {
width:100%; max-width:100%;
}
.hash-base64-result-actions {
align-items:stretch; flex-direction:column;
}
.hash-base64-result-actions .secondary-button {
width:100%;
}
}
@media (max-width:360px) {
.hash-base64-calculator {
padding:18px 16px;
}
}

/* Metal weight calculator: shared single-position surface and page-only specification. */
.metal-calculator,
.metal-form,
.metal-panel,
.metal-result,
.metal-specification {
width:100%; max-width:100%; min-width:0; box-sizing:border-box;
}
.metal-form [hidden],
.metal-result[hidden],
.metal-specification[hidden],
.metal-panel[hidden],
.metal-input-grid[hidden] {
display:none;
}
.metal-switch {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; min-width:0; margin:0 0 16px; padding:10px; border:1px solid var(--line); border-radius:14px; background:#faf9f6;
}
.metal-switch legend {
padding:0 5px; color:var(--muted); font-size:var(--text-xs); font-weight:800;
}
.metal-switch label {
min-width:0; cursor:pointer;
}
.metal-switch input {
position:absolute; opacity:0; pointer-events:none;
}
.metal-switch label > span {
display:flex; min-height:46px; min-width:0; align-items:center; justify-content:center; padding:9px 12px; border:1px solid transparent; border-radius:10px; color:var(--muted); font-size:var(--text-sm); font-weight:800; line-height:1.25; text-align:center; box-sizing:border-box;
}
.metal-switch input:checked + span {
border-color:#d9ccff; background:#fff; color:var(--violet); box-shadow:0 5px 18px rgba(87,52,184,.09);
}
.metal-switch input:focus-visible + span {
outline:3px solid rgba(99,62,229,.2); outline-offset:2px;
}
.metal-switch--compact {
margin-bottom:14px;
}
.metal-panel,
.metal-options {
margin:0 0 16px; padding:16px; border:1px solid var(--line); border-radius:14px; background:#fff;
}
.metal-input-grid {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; min-width:0;
}
.metal-input-grid--three {
grid-template-columns:repeat(3,minmax(0,1fr));
}
.metal-input-grid > * {
min-width:0;
}
.metal-input-grid .field {
margin-bottom:0;
}
.metal-input-grid + .metal-input-grid {
margin-top:14px;
}
.metal-help {
margin:12px 0 0; color:var(--muted); font-size:var(--text-xs); line-height:1.55;
}
.metal-toggle {
display:flex; min-width:0; align-items:flex-start; gap:11px; cursor:pointer;
}
.metal-toggle > input {
flex:0 0 auto; margin-top:3px;
}
.metal-toggle > span {
display:grid; min-width:0; gap:3px;
}
.metal-toggle strong {
color:var(--ink); font-size:var(--text-sm);
}
.metal-toggle small {
color:var(--muted); font-size:var(--text-xs); line-height:1.45;
}
.metal-options [data-price-panel] {
margin-top:14px;
}
.metal-result h2:focus {
outline:0;
}
.metal-primary-result {
display:grid; gap:5px; margin:0 0 16px; padding:18px; border:1px solid #ddd2ff; border-radius:16px; background:linear-gradient(135deg,#faf7ff,#f4f0ff);
}
.metal-primary-result > span,
.metal-result-grid span {
color:var(--muted); font-size:var(--text-xs); font-weight:800; text-transform:uppercase; letter-spacing:.04em;
}
.metal-primary-result > strong {
color:var(--ink); font-size:clamp(28px,4vw,42px); line-height:1.1;
}
.metal-primary-result > small {
color:var(--muted); font-size:var(--text-sm); line-height:1.45;
}
.metal-result-grid {
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px;
}
.metal-result-grid article {
display:grid; min-width:0; gap:7px; padding:14px; border:1px solid var(--line); border-radius:12px; background:#fff;
}
.metal-result-grid strong {
overflow-wrap:break-word; color:var(--ink); font-size:var(--text-base); line-height:1.35;
}
.metal-badge-row {
display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;
}
.metal-model-badge {
display:inline-flex; max-width:100%; padding:6px 9px; border-radius:999px; background:#f0ecff; color:var(--violet); font-size:11px; font-weight:850; line-height:1.25; overflow-wrap:anywhere;
}
.metal-warning-list {
display:grid; gap:7px; margin:14px 0 0; padding:0; list-style:none;
}
.metal-warning-list li {
padding:10px 12px; border-left:3px solid #bd8925; border-radius:8px; background:#fff8e8; color:#65521e; font-size:var(--text-xs); line-height:1.5;
}
.metal-formula {
margin:14px 0; border:1px solid var(--line); border-radius:12px; background:#fff;
}
.metal-formula > summary {
padding:12px 14px; cursor:pointer; color:var(--ink); font-size:var(--text-sm); font-weight:800;
}
.metal-formula ol {
display:grid; gap:8px; margin:0; padding:0 18px 15px 34px; color:var(--muted); font-size:var(--text-sm); line-height:1.5;
}
.metal-section-heading {
display:flex; min-width:0; align-items:flex-start; justify-content:space-between; gap:16px;
}
.metal-section-heading h2 {
margin:4px 0 0; font-size:var(--text-title); line-height:1.2;
}
.metal-table-scroll {
max-width:100%; overflow-x:auto; border:1px solid var(--line); border-radius:12px; -webkit-overflow-scrolling:touch;
}
.metal-table-scroll table {
width:100%; min-width:920px; border-collapse:collapse; background:#fff; font-size:var(--text-xs);
}
.metal-table-scroll th,
.metal-table-scroll td {
padding:10px 11px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap;
}
.metal-table-scroll th {
background:#faf9f6; color:var(--muted); font-weight:850;
}
.metal-table-scroll tbody tr:last-child td {
border-bottom:0;
}
.metal-table-actions {
display:flex; gap:6px;
}
.metal-table-action {
padding:5px 7px; border:1px solid #d8d1ee; border-radius:7px; background:#fff; color:var(--violet); font:inherit; font-weight:750; cursor:pointer;
}
.metal-specification-totals {
display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:14px; padding:14px; border-radius:12px; background:#f6f3ff; color:var(--ink); font-size:var(--text-sm);
}
.metal-specification-totals strong {
color:var(--violet);
}
@media (max-width:760px) {
.metal-input-grid,
.metal-input-grid--three,
.metal-result-grid {
grid-template-columns:minmax(0,1fr);
}
.metal-section-heading {
align-items:stretch; flex-direction:column;
}
.metal-section-heading .secondary-button {
width:100%;
}
}
@media (max-width:430px) {
.metal-calculator {
padding:20px 16px;
}
.metal-switch {
gap:6px; padding:7px;
}
.metal-switch label > span {
min-height:50px; padding:7px 6px; font-size:12px;
}
.metal-panel,
.metal-options,
.metal-primary-result {
padding:14px;
}
}
@media (max-width:360px) {
.metal-calculator {
padding:18px 14px;
}
}

/* Grade and GPA calculator: lightweight school flow with progressive GPA disclosure. */
.grade-gpa-calculator,
.grade-gpa-form,
.grade-gpa-result,
.grade-gpa-rows,
.grade-gpa-details {
width:100%; max-width:100%; min-width:0; box-sizing:border-box;
}
.grade-gpa-calculator [hidden] {
display:none;
}
.grade-gpa-switch {
min-width:0; margin:0 0 16px; padding:10px; border:1px solid var(--line); border-radius:14px; background:#faf9f6;
}
.grade-gpa-switch legend {
padding:0 5px; color:var(--muted); font-size:var(--text-xs); font-weight:800;
}
.grade-gpa-switch > div {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; min-width:0;
}
.grade-gpa-switch label {
min-width:0; cursor:pointer;
}
.grade-gpa-switch input {
position:absolute; opacity:0; pointer-events:none;
}
.grade-gpa-switch label > span {
display:grid; min-height:58px; min-width:0; align-content:center; justify-items:center; gap:3px; padding:9px 10px; border:1px solid transparent; border-radius:10px; color:var(--muted); line-height:1.25; text-align:center; box-sizing:border-box;
}
.grade-gpa-switch label b {
font-size:var(--text-sm);
}
.grade-gpa-switch label small {
font-size:var(--text-xs);
}
.grade-gpa-switch input:checked + span {
border-color:#d9ccff; background:#fff; color:var(--violet); box-shadow:0 5px 18px rgba(87,52,184,.09);
}
.grade-gpa-switch input:focus-visible + span {
outline:3px solid rgba(99,62,229,.2); outline-offset:2px;
}
.grade-gpa-switch--scale label > span {
min-height:50px;
}
.grade-gpa-quick {
display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; min-width:0; margin-bottom:16px;
}
.grade-gpa-quick button {
min-width:0; min-height:46px; padding:8px; border:1px solid #d9ccff; border-radius:11px; background:#f7f4ff; color:var(--violet); font:inherit; font-size:var(--text-base); font-weight:850; cursor:pointer;
}
.grade-gpa-quick button:hover {
border-color:var(--violet); background:#fff;
}
.grade-gpa-quick button:focus-visible,
.grade-gpa-link:focus-visible,
.grade-gpa-remove:focus-visible {
outline:3px solid rgba(99,62,229,.2); outline-offset:2px;
}
.grade-gpa-bulk {
display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:12px; min-width:0; margin-bottom:16px;
}
.grade-gpa-bulk .field {
min-width:0; margin:0;
}
.grade-gpa-bulk textarea {
min-height:76px; resize:vertical;
}
.grade-gpa-bulk .secondary-button {
min-width:150px; margin-bottom:22px;
}
.grade-gpa-toolbar {
display:flex; min-width:0; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:10px; padding:13px 14px; border:1px solid var(--line); border-radius:12px; background:#fff;
}
.grade-gpa-toolbar > div {
display:flex; flex:0 0 auto; flex-wrap:wrap; justify-content:flex-end; gap:6px 12px;
}
.grade-gpa-toggle,
.grade-gpa-course-include {
display:flex; min-width:0; align-items:flex-start; gap:10px; cursor:pointer;
}
.grade-gpa-toggle > input,
.grade-gpa-course-include > input {
flex:0 0 auto; margin-top:3px;
}
.grade-gpa-toggle > span {
display:grid; min-width:0; gap:3px;
}
.grade-gpa-toggle strong {
color:var(--ink); font-size:var(--text-sm);
}
.grade-gpa-toggle small,
.grade-gpa-helper {
color:var(--muted); font-size:var(--text-xs); line-height:1.5;
}
.grade-gpa-helper {
margin:8px 0 14px;
}
.grade-gpa-link {
padding:3px 0; border:0; background:transparent; color:var(--violet); font:inherit; font-size:var(--text-xs); font-weight:800; cursor:pointer;
}
.grade-gpa-rows {
margin:16px 0; padding:16px; border:1px solid var(--line); border-radius:14px; background:#fff;
}
.grade-gpa-section-head {
display:flex; min-width:0; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:12px;
}
.grade-gpa-section-head h2 {
margin:0; font-size:var(--text-lg); line-height:1.25;
}
.grade-gpa-section-head > span {
color:var(--muted); font-size:var(--text-xs); font-weight:800;
}
.grade-gpa-empty {
margin:10px 0; padding:12px; border-radius:10px; background:#faf9f6; color:var(--muted); font-size:var(--text-sm); text-align:center;
}
.grade-gpa-grade-list,
.grade-gpa-course-list {
display:grid; min-width:0; gap:9px;
}
.grade-gpa-grade-row {
display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:9px; min-width:0; padding:10px; border:1px solid var(--line); border-radius:11px; background:#fafafa;
}
.grade-gpa-grade-row.is-weighted {
grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;
}
.grade-gpa-grade-row .field,
.grade-gpa-course-row .field {
min-width:0; margin:0;
}
.grade-gpa-remove {
min-height:44px; padding:9px 10px; border:1px solid #ead5d5; border-radius:9px; background:#fff; color:#9b3030; font:inherit; font-size:var(--text-xs); font-weight:800; cursor:pointer;
}
.grade-gpa-details {
margin:14px 0; border:1px solid var(--line); border-radius:14px; background:#fff;
}
.grade-gpa-details > summary {
padding:14px 16px; cursor:pointer; color:var(--ink); font-size:var(--text-sm); font-weight:850;
}
.grade-gpa-details-body {
padding:0 16px 16px;
}
.grade-gpa-input-grid {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; min-width:0;
}
.grade-gpa-input-grid--three {
grid-template-columns:repeat(3,minmax(0,1fr));
}
.grade-gpa-input-grid > * {
min-width:0;
}
.grade-gpa-input-grid .field {
margin-bottom:0;
}
.grade-gpa-input-grid + .grade-gpa-input-grid {
margin-top:12px;
}
.grade-gpa-course-row {
display:grid; grid-template-columns:minmax(140px,2fr) minmax(100px,1fr) minmax(110px,1fr) auto auto; align-items:end; gap:9px; min-width:0; padding:11px; border:1px solid var(--line); border-radius:11px; background:#fafafa;
}
.grade-gpa-course-row.is-excluded {
background:#f3f3f3; opacity:.78;
}
.grade-gpa-course-include {
min-height:44px; align-items:center; padding:8px 2px; color:var(--ink); font-size:var(--text-xs); font-weight:750;
}
.grade-gpa-result-head {
display:flex; min-width:0; align-items:flex-start; justify-content:space-between; gap:16px;
}
.grade-gpa-result-head h2 {
margin:5px 0 0; font-size:var(--text-title);
}
.grade-gpa-live {
margin:5px 0 0; color:var(--muted); font-size:var(--text-xs);
}
.grade-gpa-primary {
display:grid; gap:5px; margin:16px 0; padding:18px; border:1px solid #ddd2ff; border-radius:16px; background:linear-gradient(135deg,#faf7ff,#f4f0ff);
}
.grade-gpa-primary > span,
.grade-gpa-metrics span {
color:var(--muted); font-size:var(--text-xs); font-weight:800; text-transform:uppercase; letter-spacing:.04em;
}
.grade-gpa-primary > strong {
color:var(--ink); font-size:clamp(30px,5vw,44px); line-height:1.05;
}
.grade-gpa-primary > small {
color:var(--muted); font-size:var(--text-xs); line-height:1.5;
}
.grade-gpa-metrics {
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px;
}
.grade-gpa-metrics article {
display:grid; min-width:0; gap:6px; padding:13px; border:1px solid var(--line); border-radius:11px; background:#fff;
}
.grade-gpa-metrics strong {
overflow-wrap:break-word; color:var(--ink); font-size:var(--text-base);
}
.grade-gpa-result-section {
margin-top:16px; padding:15px; border:1px solid var(--line); border-radius:12px; background:#fff;
}
.grade-gpa-result-section h3 {
margin:0 0 10px; font-size:var(--text-base);
}
.grade-gpa-result-section p {
margin:8px 0 0; color:var(--ink); font-size:var(--text-sm); line-height:1.55;
}
.grade-gpa-distribution {
display:flex; flex-wrap:wrap; gap:7px;
}
.grade-gpa-distribution span {
padding:7px 10px; border-radius:999px; background:#f3f0ff; color:var(--muted); font-size:var(--text-xs);
}
.grade-gpa-distribution b {
color:var(--violet);
}
.grade-gpa-table-scroll {
max-width:100%; overflow-x:auto; border:1px solid var(--line); border-radius:10px; -webkit-overflow-scrolling:touch;
}
.grade-gpa-table-scroll table {
width:100%; min-width:620px; border-collapse:collapse; font-size:var(--text-xs);
}
.grade-gpa-table-scroll th,
.grade-gpa-table-scroll td {
padding:9px 10px; border-bottom:1px solid var(--line); text-align:left;
}
.grade-gpa-table-scroll th {
background:#faf9f6; color:var(--muted); font-weight:850; white-space:nowrap;
}
.grade-gpa-copy-status {
margin:10px 0 0; color:var(--violet); font-size:var(--text-xs); font-weight:750;
}
.grade-gpa-calculator.is-updating .grade-gpa-result,
.grade-gpa-calculator.is-stale .grade-gpa-result {
opacity:.58;
}
@media (max-width:900px) {
.grade-gpa-course-row {
grid-template-columns:repeat(2,minmax(0,1fr));
}
.grade-gpa-course-row > .field:first-child {
grid-column:1 / -1;
}
.grade-gpa-course-include {
align-self:center;
}
}
@media (max-width:640px) {
.grade-gpa-bulk {
grid-template-columns:minmax(0,1fr);
}
.grade-gpa-bulk .secondary-button {
width:100%; margin-bottom:0;
}
.grade-gpa-toolbar,
.grade-gpa-section-head,
.grade-gpa-result-head {
align-items:stretch; flex-direction:column;
}
.grade-gpa-toolbar > div {
justify-content:flex-start;
}
.grade-gpa-section-head .secondary-button,
.grade-gpa-result-head .secondary-button {
width:100%;
}
.grade-gpa-input-grid,
.grade-gpa-input-grid--three,
.grade-gpa-metrics {
grid-template-columns:minmax(0,1fr);
}
}
@media (max-width:430px) {
.grade-gpa-calculator {
padding:20px 16px;
}
.grade-gpa-switch {
gap:6px; padding:7px;
}
.grade-gpa-switch label > span {
min-height:56px; padding:7px 5px;
}
.grade-gpa-quick {
gap:6px;
}
.grade-gpa-quick button {
min-height:42px; padding:6px;
}
.grade-gpa-rows,
.grade-gpa-details-body,
.grade-gpa-primary,
.grade-gpa-result-section {
padding:13px;
}
.grade-gpa-grade-row,
.grade-gpa-course-row {
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
.grade-gpa-grade-row:not(.is-weighted) {
grid-template-columns:minmax(0,1fr);
}
.grade-gpa-grade-row .grade-gpa-remove,
.grade-gpa-course-row .grade-gpa-remove {
grid-column:1 / -1;
}
.grade-gpa-course-row > .field:first-child {
grid-column:1 / -1;
}
}
@media (max-width:360px) {
.grade-gpa-calculator {
padding:18px 14px;
}
.grade-gpa-switch label small {
font-size:11px;
}
}

.oge-ege-calculator {
min-width:0;
}
.oge-ege-modes {
min-width:0; margin:0 0 18px; padding:0; border:0;
}
.oge-ege-modes legend {
margin-bottom:8px; color:var(--muted); font-size:var(--text-xs); font-weight:800;
}
.oge-ege-mode-options {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;
}
.oge-ege-mode-options label {
min-width:0; cursor:pointer;
}
.oge-ege-mode-options input {
position:absolute; opacity:0;
}
.oge-ege-mode-options span {
display:flex; min-height:48px; align-items:center; justify-content:center; padding:8px; border:1px solid var(--line); border-radius:11px; background:#fff; color:var(--ink); font-size:var(--text-sm); font-weight:800; text-align:center;
}
.oge-ege-mode-options input:checked + span {
border-color:var(--violet); background:#f4efff; color:var(--violet);
}
.oge-ege-mode-options input:focus-visible + span {
outline:3px solid var(--violet); outline-offset:2px;
}
.oge-ege-fields {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; min-width:0;
}
.oge-ege-fields > *,
.oge-ege-row-fields > * {
min-width:0;
}
.oge-ege-fields .field,
.oge-ege-row-fields .field {
margin:0;
}
.oge-ege-note {
margin:12px 0; color:var(--muted); font-size:var(--text-xs); line-height:1.5;
}
.oge-ege-profile {
max-width:460px; margin-top:12px;
}
.oge-ege-rows-head,
.oge-ege-result-head {
display:flex; align-items:center; justify-content:space-between; gap:12px; margin:12px 0;
}
.oge-ege-rows-head h2,
.oge-ege-result-head h2 {
margin:0; font-size:var(--text-lg);
}
.oge-ege-exam-row {
min-width:0; margin:9px 0; padding:12px; border:1px solid var(--line); border-radius:12px; background:#fff;
}
.oge-ege-row-fields {
display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) auto; align-items:end; gap:8px; min-width:0;
}
.oge-ege-remove {
min-height:44px; padding:9px; border:1px solid #ead5d5; border-radius:9px; background:#fff; color:#9b3030; font:inherit; font-size:var(--text-xs); font-weight:800; cursor:pointer;
}
.oge-ege-minimum,
.oge-ege-target {
margin-top:10px; border:1px solid var(--line); border-radius:10px; background:#fafafa;
}
.oge-ege-minimum summary,
.oge-ege-target summary {
padding:10px 12px; color:var(--ink); font-size:var(--text-xs); font-weight:800; cursor:pointer;
}
.oge-ege-minimum .field,
.oge-ege-target .field {
max-width:430px; margin:0; padding:0 12px 12px;
}
.oge-ege-primary {
display:grid; gap:5px; margin:15px 0; padding:18px; border:1px solid #ddd2ff; border-radius:14px; background:#f8f5ff;
}
.oge-ege-primary > span,
.oge-ege-metrics span {
color:var(--muted); font-size:var(--text-xs); font-weight:800;
}
.oge-ege-primary strong {
color:var(--ink); font-size:clamp(30px,5vw,44px); line-height:1;
}
.oge-ege-primary small,
.oge-ege-result-head p,
.oge-ege-result-details p,
.oge-ege-result > p {
color:var(--muted); font-size:var(--text-xs); line-height:1.5;
}
.oge-ege-metrics {
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;
}
.oge-ege-metrics article,
.oge-ege-status {
min-width:0; padding:12px; border:1px solid var(--line); border-radius:10px; background:#fff;
}
.oge-ege-metrics article {
display:grid; gap:5px;
}
.oge-ege-metrics strong {
overflow-wrap:break-word;
}
.oge-ege-result-details {
display:grid; gap:10px; margin-top:14px;
}
.oge-ege-status h3 {
margin:0 0 6px; font-size:var(--text-sm);
}
.oge-ege-status p {
margin:5px 0 0;
}
.oge-ege-scale {
display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px;
}
.oge-ege-scale span {
min-width:0; padding:9px 5px; border:1px solid var(--line); border-radius:8px; color:var(--muted); font-size:var(--text-xs); text-align:center;
}
.oge-ege-scale .is-current {
border-color:var(--violet); background:#f4efff; color:var(--violet); font-weight:800;
}
@media (max-width:760px) {
.oge-ege-row-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
.oge-ege-row-fields .oge-ege-remove { grid-column:1 / -1; }
}
@media (max-width:640px) {
.oge-ege-fields,
.oge-ege-metrics { grid-template-columns:minmax(0,1fr); }
.oge-ege-rows-head,
.oge-ege-result-head { align-items:stretch; flex-direction:column; }
.oge-ege-rows-head .secondary-button,
.oge-ege-result-head .secondary-button { width:100%; }
}
@media (max-width:430px) {
.oge-ege-calculator { padding:18px 14px; }
.oge-ege-row-fields { grid-template-columns:minmax(0,1fr); }
.oge-ege-row-fields .oge-ege-remove { grid-column:auto; }
.oge-ege-scale { grid-template-columns:repeat(2,minmax(0,1fr)); }
.oge-ege-mode-options span { font-size:12px; }
}
/* Resistor workbench: scoped internals; the page and Embed share this form. */
.resistor-workbench .resistor-workbench__mode-grid {
    width: 100%;
    max-width: none;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.resistor-workbench__mode-grid > label,
.resistor-workbench__mode-grid > label > span {
    min-width: 0;
}

.resistor-workbench__bands,
.resistor-workbench__rows {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 14px 0;
}

.resistor-workbench__rows {
    grid-template-columns: minmax(0, 1fr);
}

.resistor-workbench__bands > *,
.resistor-workbench__rows > *,
.resistor-workbench__row > * {
    min-width: 0;
}

.resistor-workbench__bands .field select,
.resistor-workbench__row .field :is(input, select) {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.resistor-workbench__row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 10px;
    align-items: end;
}

.resistor-workbench__row[data-capacitor-row] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
}

.resistor-workbench__row > .secondary-button {
    align-self: end;
}

.resistor-workbench__body {
    display: flex;
    align-items: stretch;
    justify-content: space-evenly;
    width: min(100%, 440px);
    min-height: 78px;
    padding: 6px 26px;
    border: 2px solid #b8a27c;
    border-radius: 38px;
    background: #d7c49e;
}

.resistor-workbench__stripe {
    flex: 0 0 12px;
    border-inline: 1px solid rgba(0, 0, 0, .22);
}

.resistor-workbench__stripe--tolerance {
    flex-basis: 18px;
}

@media (max-width: 620px) {
    .resistor-workbench .resistor-workbench__mode-grid,
    .resistor-workbench__bands {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .resistor-workbench__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .resistor-workbench__row[data-capacitor-row] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .resistor-workbench__row > :first-child {
        grid-column: 1 / -1;
    }

    .resistor-workbench__bands .field select {
        padding-left: 8px;
        padding-right: 24px;
        background-position: right 7px center;
    }
}

@media (max-width: 360px) {
    .resistor-workbench .resistor-workbench__mode-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.stair-calculator [hidden] { display:none !important; }
.stair-form { display:block; }
.stair-modes { border:0; padding:0; margin:0 0 20px; min-width:0; }
.stair-modes legend { font-weight:700; margin-bottom:8px; }
.stair-mode-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; width:100%; }
.stair-mode-grid label { display:block; position:relative; min-width:0; cursor:pointer; }
.stair-mode-grid input { position:absolute; opacity:0; width:1px; height:1px; }
.stair-mode-grid span { display:flex; align-items:center; justify-content:center; min-height:48px; padding:9px; border:1px solid var(--line); border-radius:12px; background:var(--white); text-align:center; font-weight:700; }
.stair-mode-grid input:checked + span { color:var(--violet); border-color:var(--violet); background:#f3efff; }
.stair-mode-grid input:focus-visible + span { outline:3px solid #b8a7ed; outline-offset:3px; }
.stair-form-tools { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:20px; }
.stair-unit { width:min(100%,240px); }
.stair-input-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:start; }
.stair-input-grid > *, .stair-result-layout > *, .stair-form-tools > * { min-width:0; }
.stair-calculator .field :is(input,select) { width:100%; max-width:100%; min-width:0; box-sizing:border-box; }
.stair-calculator .field > span { min-height:22px; }
.stair-advanced { margin:20px 0; padding-top:16px; border-top:1px solid var(--line); }
.stair-advanced summary, .stair-details summary { cursor:pointer; font-weight:700; }
.stair-advanced .stair-input-grid { margin-top:16px; }
.stair-advanced .check-field { margin-top:16px; }
.stair-opening-help { display:block; width:min(100%,520px); max-width:100%; height:auto; margin:12px 0; }
.stair-opening-help text { font-size:14px; fill:var(--muted); }
.stair-disclosure, .stair-draft, .stair-stale { padding:12px 14px; background:#f3efff; border-left:3px solid var(--violet); border-radius:0 8px 8px 0; color:#494157; }
.stair-form .calculate-button { margin-top:18px; }
.stair-form > .result-note { margin-top:12px; }
.stair-result h2 { margin:8px 0 22px; }
.stair-result-layout { display:grid; grid-template-columns:minmax(160px,.7fr) minmax(0,2fr); gap:24px; align-items:center; }
.stair-primary { display:grid; gap:22px; }
.stair-metric { display:grid; gap:5px; }
.stair-metric span { color:var(--muted); }
.stair-metric strong { font-size:clamp(1.3rem,2.5vw,2rem); color:var(--ink); font-weight:800; }
.stair-scheme { margin:0; min-width:0; }
.stair-scheme svg { display:block; width:100%; height:auto; background:#fdfcff; border-radius:12px; }
.stair-scheme figcaption { margin-top:8px; font-size:13px; line-height:1.5; color:var(--muted); }
.stair-result-actions { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0; }
.stair-result-actions .secondary-button { min-width:0; max-width:100%; }
.stair-result-actions [role=status] { align-self:center; color:var(--muted); }
.stair-notes { color:var(--muted); font-size:14px; line-height:1.6; }
.stair-notes p { margin:10px 0; }
.stair-candidates { margin-top:24px; min-width:0; }
.stair-candidates h3 { margin-bottom:6px; }
.stair-candidates > p { color:var(--muted); font-size:14px; }
.stair-table-scroll { overflow-x:auto; width:100%; max-width:100%; overscroll-behavior-inline:contain; }
.stair-table-scroll table { width:100%; border-collapse:collapse; font-size:13px; }
.stair-table-scroll :is(th,td) { padding:10px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap; }
.stair-table-scroll th { color:var(--muted); font-weight:700; }
.stair-table-scroll .secondary-button { padding:7px 10px; min-height:40px; }
.stair-details { border-top:1px solid var(--line); padding-top:18px; margin-top:24px; }
.stair-details dl { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:0 16px; font-size:14px; }
.stair-details :is(dt,dd) { padding:9px 0; margin:0; border-bottom:1px solid var(--line); }
.stair-details dt, .stair-details > p { color:var(--muted); }
.stair-details dd { font-weight:700; overflow-wrap:break-word; }
@media (max-width:768px) {
    .stair-mode-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .stair-result-layout { grid-template-columns:minmax(0,1fr); }
    .stair-primary { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
    .stair-metric strong { font-size:1.3rem; }
}
@media (max-width:560px) {
    .stair-input-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
    .stair-form-tools { align-items:center; }
    .stair-unit { width:55%; }
    .stair-primary { grid-template-columns:minmax(0,1fr); gap:16px; }
    .stair-metric { grid-template-columns:minmax(0,1fr) auto; align-items:baseline; }
    .stair-details dl { grid-template-columns:minmax(0,1fr); }
    .stair-details dt { border-bottom:0; padding-bottom:0; }
    .stair-details dd { padding-top:3px; }
    .stair-result-actions .secondary-button { width:100%; }
}
@media (max-width:360px) {
    .stair-calculator { padding:18px 16px; }
    .stair-form-tools { flex-wrap:wrap; }
    .stair-unit { width:100%; }
}

/* Circle geometry: shared calculator surface, no feature stylesheet. */
.circle-modes, .circle-arc-choice { border:0; padding:0; margin:0; min-width:0; }
.circle-modes { margin-bottom:20px; }
.circle-modes legend, .circle-arc-choice legend { font-weight:700; margin-bottom:8px; }
.circle-mode-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; width:100%; }
.circle-mode-grid label { position:relative; display:block; min-width:0; cursor:pointer; }
.circle-mode-grid input { position:absolute; opacity:0; width:1px; height:1px; }
.circle-mode-grid span { display:flex; align-items:center; justify-content:center; min-height:48px; padding:10px; border:1px solid var(--line); border-radius:12px; background:var(--white); text-align:center; font-weight:700; }
.circle-mode-grid input:checked + span { color:var(--violet); border-color:var(--violet); background:#f3efff; }
.circle-mode-grid input:focus-visible + span { outline:3px solid #b8a7ed; outline-offset:3px; }
.circle-input-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-bottom:16px; align-items:start; }
.circle-input-grid > *, .circle-result-layout > * { min-width:0; }
:is(.circle-geometry, .triangle-geometry) :is(input[type=text], select) { width:100%; min-width:0; max-width:100%; box-sizing:border-box; }
.circle-arc-choice label { display:flex; align-items:center; gap:8px; padding:5px 0; cursor:pointer; }
.circle-arc-choice input { width:auto; accent-color:var(--violet); }
.circle-discovery, .circle-boundary-note { color:var(--muted); font-size:14px; margin:0 0 16px; }
.circle-draft-actions, .circle-result-actions { display:flex; gap:12px; flex-wrap:wrap; margin:16px 0; }
.circle-status { color:var(--muted); margin:12px 0 0; font-size:14px; }
.circle-status:empty { display:none; }
.circle-result { margin-top:24px; border-top:1px solid var(--line); padding-top:24px; scroll-margin-top:96px; }
.circle-result-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:20px; }
.circle-result-header h2 { margin:6px 0 0; }
.circle-type, .circle-known { display:inline-block; color:var(--violet); background:#f3efff; border-radius:8px; padding:5px 9px; font-size:13px; font-weight:700; }
.circle-stale { border:1px solid #dfbc72; border-radius:10px; padding:12px; background:#fff7e7; color:#735419; }
.circle-result-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:24px; align-items:center; }
.circle-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 12px; }
.circle-metric { display:grid; align-content:start; gap:7px; min-width:0; }
.circle-metric > span { color:var(--muted); font-size:14px; }
.circle-metric strong { font-size:clamp(1.1rem,1.7vw,1.5rem); font-weight:800; color:var(--ink); overflow-wrap:break-word; }
.circle-metric .circle-known { justify-self:start; }
.circle-diagram { margin:0; min-width:0; }
.circle-diagram svg { display:block; width:100%; height:auto; max-width:420px; margin:auto; background:#faf8ff; border-radius:16px; }
.circle-diagram figcaption { color:var(--muted); font-size:13px; line-height:1.5; margin-top:10px; }
.circle-secondary { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 16px; margin:20px 0 0; font-size:14px; }
.circle-secondary :is(dt,dd) { padding:10px 0; margin:0; border-bottom:1px solid var(--line); min-width:0; }
.circle-secondary dt { color:var(--muted); }
.circle-secondary dd { font-weight:700; overflow-wrap:break-word; }
.circle-formulas { border-top:1px solid var(--line); padding-top:18px; margin-top:20px; }
.circle-formulas summary { font-weight:700; cursor:pointer; }
.circle-formulas p { color:var(--muted); font-size:14px; overflow-wrap:break-word; }
:is(.circle-geometry, .triangle-geometry) [hidden] { display:none !important; }
@media (max-width:768px) {
    .circle-result-layout { grid-template-columns:minmax(0,1fr); gap:20px; }
}
@media (max-width:560px) {
    .circle-mode-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .circle-mode-grid label:last-child { grid-column:1 / -1; }
    .circle-input-grid { grid-template-columns:minmax(0,1fr); }
    .circle-result-actions .secondary-button { width:100%; min-width:0; }
    .circle-secondary { grid-template-columns:minmax(0,1fr); }
    .circle-secondary dt { border-bottom:0; padding-bottom:0; }
    .circle-secondary dd { padding-top:4px; }
}
@media (max-width:360px) {
    .circle-geometry, .triangle-geometry { padding:18px 16px; }
    .circle-metrics { grid-template-columns:minmax(0,1fr); }
}

/* Triangle uses the shared geometry form/result primitives above. */
.triangle-input-help { margin:0 0 18px; font-size:14px; color:var(--muted); }
.triangle-input-help summary { cursor:pointer; font-weight:700; color:var(--ink); }
.triangle-solutions { display:grid; gap:24px; min-width:0; }
.triangle-solution { border:1px solid var(--line); border-radius:16px; padding:18px; min-width:0; }
.triangle-solution.is-active { border-color:var(--violet); }
.triangle-solution-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-bottom:18px; }
.triangle-solution-heading h3 { margin:0; }
.triangle-select { min-width:0; white-space:normal; }
.triangle-details { margin-top:18px; }
.triangle-details summary { cursor:pointer; font-weight:700; }
.triangle-diagram-note { color:var(--muted); font-size:14px; margin:8px 0; }
@media (max-width:560px) {
    .triangle-solution { padding:14px; }
}
/* Ordinary/scientific calculator: existing controls, bounded responsive keypad. */
.scientific-calculator { min-width: 0; }
.scientific-calculator .scientific-modes { width: 100%; min-width: 0; padding: 0; border: 0; margin: 0; }
.scientific-mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
.scientific-mode-grid label { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 12px; padding: 12px; min-width: 0; cursor: pointer; }
.scientific-mode-grid label:has(:checked) { border-color: var(--violet); background: var(--soft-violet); }
.scientific-calculator .scientific-editor { width: 100%; min-width: 0; }
.scientific-editor input { width: 100%; min-width: 0; box-sizing: border-box; font-variant-numeric: tabular-nums; }
.scientific-calculator .scientific-keypad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; }
.scientific-keypad .secondary-button { min-width: 0; min-height: 44px; padding: 9px 4px; font-variant-numeric: tabular-nums; }
.scientific-edit-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.scientific-angle { max-width: 240px; }
.scientific-functions summary, .scientific-help summary { cursor: pointer; }
.scientific-functions .scientific-keypad { margin-top: 12px; }
.scientific-result, .scientific-memory, .scientific-history { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 20px; min-width: 0; }
.scientific-result output { display: block; color: var(--ink); font-size: clamp(24px, 4vw, 36px); font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.scientific-result code, .scientific-memory span, .scientific-history span { overflow-wrap: anywhere; }
.scientific-result [data-scientific-stale] { color: var(--muted); }
.scientific-result:has([data-scientific-stale]:not([hidden])) output { color: var(--muted); }
.scientific-history ol { padding-left: 24px; }
.scientific-history li { margin: 12px 0; }
.scientific-history li span { display: block; }
.scientific-calculator [hidden] { display: none !important; }
@media (max-width: 360px) { .scientific-calculator .scientific-keypad { gap: 6px; } .scientific-mode-grid label { padding: 10px 6px; gap: 4px; } }
/* NDFL uses the shared form/result/table primitives; only its chart is unique. */
[data-ndfl] details { margin:18px 0; }
[data-ndfl] summary { cursor:pointer; font-weight:700; margin-bottom:14px; }
[data-ndfl] fieldset { min-width:0; border:1px solid var(--line); border-radius:12px; margin:16px 0; padding:16px; }
[data-ndfl] legend { font-weight:700; padding:0 6px; }
[data-ndfl] .result-item strong { overflow-wrap:anywhere; }
[data-ndfl] .ndfl-chart-row { display:grid; grid-template-columns:75px minmax(0,1fr); gap:6px 10px; margin:12px 0; font-size:11px; }
[data-ndfl] .ndfl-chart-row small { grid-column:2; overflow-wrap:anywhere; }
[data-ndfl] .ndfl-bars { display:flex; min-width:0; height:18px; border-radius:4px; background:#f5f3ee; }
[data-ndfl] .ndfl-net { background:var(--violet); }
[data-ndfl] .ndfl-tax { background:#c8bbee; }
[data-ndfl] .ndfl-payment { padding-top:12px; border-top:1px solid var(--line); }
[data-ndfl] .check-field { align-items:flex-start; line-height:1.5; }
[data-ndfl] .check-field input { flex:0 0 18px; }
[data-ndfl] [data-ndfl-warnings] { font-size:12px; line-height:1.6; }
/* Inflation: shared form/result primitives with one scoped SVG surface. */
[data-inflation] fieldset { min-width:0; border:1px solid var(--line); border-radius:12px; padding:14px; }
[data-inflation] legend, [data-inflation] summary { font-weight:700; }
[data-inflation] details { margin:20px 0; }
[data-inflation] summary { cursor:pointer; margin-bottom:12px; }
[data-inflation] .inflation-presets { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; }
[data-inflation] .inflation-chart { border:1px solid var(--line); border-radius:14px; padding:14px; margin:24px 0; }
[data-inflation] .inflation-chart svg { display:block; width:100%; height:auto; margin:16px 0; }
[data-inflation] .inflation-chart .field { max-width:100%; }
[data-inflation] .inflation-chart input[type=range] { width:100%; padding:0; }
[data-inflation] .inflation-grid { stroke:var(--line); stroke-width:1; }
[data-inflation] .inflation-axis { font-size:12px; fill:var(--muted); }
[data-inflation] .inflation-price { stroke:var(--violet); stroke-width:2.5; fill:none; }
[data-inflation] .inflation-power { stroke:#596779; stroke-width:2.5; fill:none; stroke-dasharray:7 4; }
[data-inflation] .inflation-denomination { stroke:#a66b21; stroke-dasharray:3 3; }
[data-inflation] [data-inflation-tooltip] { font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
[data-inflation] .result-item strong { overflow-wrap:anywhere; }
[data-inflation] #calculator-result { scroll-margin-top:90px; }
@media (max-width:420px) { [data-inflation] .inflation-chart { padding:8px; } [data-inflation] .inflation-axis { font-size:14px; } }
/* Margin/pricing reuses the shared form, cards and table; these rules stay scoped. */
[data-margin-pricing] [hidden] { display:none !important; }
[data-margin-pricing] .margin-mode-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; width:100%; margin-bottom:18px; }
[data-margin-pricing] .margin-mode-grid button { min-width:0; white-space:normal; }
[data-margin-pricing] [role=tab][aria-selected=true] { background:var(--violet); color:#fff; border-color:var(--violet); }
[data-margin-pricing] .margin-fees { min-width:0; border:1px solid var(--line); border-radius:12px; margin:20px 0; padding:14px; }
[data-margin-pricing] legend, [data-margin-pricing] summary { font-weight:700; }
[data-margin-pricing] .margin-fee-row { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) auto; gap:12px; align-items:end; margin-bottom:14px; }
[data-margin-pricing] .margin-fee-row > *, [data-margin-pricing] .field { min-width:0; }
[data-margin-pricing] .result-item strong, [data-margin-pricing] [data-margin-exact], [data-margin-pricing] td { overflow-wrap:anywhere; }
[data-margin-pricing] details { margin:20px 0; }
[data-margin-pricing] summary { cursor:pointer; margin-bottom:12px; }
[data-margin-pricing] table { width:100%; table-layout:auto; }
@media (max-width:767px) { [data-margin-pricing] .margin-mode-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } [data-margin-pricing] .margin-fee-row { grid-template-columns:minmax(0,1fr); } }

/* Vinegar balance: shared white widget, measured-volume and exact-value presentation. */
/* Vacation: only scoped structure; financial authority stays in PHP. */
[data-vacation-pay], [data-vacation-pay] .form-grid > *, [data-vacation-pay] .field { min-width:0; }
[data-vacation-pay] input:not([type=checkbox]), [data-vacation-pay] select, [data-vacation-pay] textarea { width:100%; max-width:100%; box-sizing:border-box; }
[data-vacation-pay] .vacation-check { align-items:flex-start; margin:2px 0 15px; color:#555762; font-weight:650; line-height:var(--leading-copy); cursor:pointer; }
[data-vacation-pay] .vacation-check > input { flex:0 0 18px; width:18px; height:18px; margin:3px 0 0; padding:0; accent-color:var(--violet); }
[data-vacation-pay] .vacation-check > span { min-width:0; overflow-wrap:anywhere; }
[data-vacation-pay] .vacation-check > input:focus-visible { outline:2px solid var(--violet); outline-offset:3px; }
[data-vacation-pay] .vacation-check > input:disabled, [data-vacation-pay] .vacation-check > input:disabled + span { cursor:not-allowed; }
[data-vacation-pay] .vacation-check > input:disabled + span { opacity:.6; }
[data-vacation-pay] textarea { min-height:96px; resize:vertical; padding:12px 15px; border:1px solid #dedbd4; border-radius:13px; outline:0; background:#faf9f6; color:var(--ink); font:inherit; font-size:var(--text-base); font-weight:600; line-height:var(--leading-copy); transition:border-color .2s, box-shadow .2s; }
[data-vacation-pay] textarea:focus { border-color:var(--violet); box-shadow:0 0 0 4px rgba(99,62,229,.1); }
[data-vacation-pay] textarea:disabled { color:#8a8890; background-color:#efede8; cursor:not-allowed; }
[data-vacation-pay] .vacation-exclusion-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:16px 0; }
[data-vacation-pay] .result-item strong, [data-vacation-pay] [data-vacation-context], [data-vacation-pay] [data-vacation-exact] { overflow-wrap:anywhere; }
[data-vacation-pay] table { width:100%; table-layout:auto; }
[data-vacation-pay] [data-vacation-month-table] { max-width:100%; overflow-x:auto; }
[data-vacation-pay] h2 { margin:24px 0 16px; }
@media(max-width:650px) { [data-vacation-pay] .vacation-exclusion-row { grid-template-columns:minmax(0,1fr); } }
[data-vinegar] { min-width:0; overflow-wrap:anywhere; }
[data-vinegar] .vinegar-tabs, [data-vinegar] .vinegar-presets { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0; }
[data-vinegar] .vinegar-tabs button, [data-vinegar] .vinegar-presets button { max-width:100%; white-space:normal; }
[data-vinegar] .vinegar-tabs [aria-selected=true] { border-color:var(--violet); color:var(--violet); background:#f5f1ff; }
[data-vinegar] .vinegar-flow { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:18px 0; }
[data-vinegar] .vinegar-step { display:flex; min-width:0; flex-direction:column; gap:8px; border:1px solid var(--line); border-radius:12px; padding:14px; background:#faf9f6; }
[data-vinegar] .result-item strong { overflow-wrap:anywhere; }
[data-vinegar] .vinegar-exact { margin:20px 0; }
[data-vinegar] .vinegar-exact summary { font-weight:700; cursor:pointer; }
[data-vinegar] #calculator-result { scroll-margin-top:90px; }
@media(max-width:650px) { [data-vinegar] .vinegar-flow { grid-template-columns:minmax(0,1fr); } }

/* Child benefits: one widget in normal and Embed. */
.child-benefits{background:#fff;border:1px solid #e6e1d8;border-radius:20px;padding:24px;min-width:0}
.child-benefits fieldset{min-width:0;margin:20px 0;padding:16px;border:1px solid #e6e1d8;border-radius:12px}
.child-benefits legend{font-weight:700;padding:0 5px;max-width:100%;overflow-wrap:anywhere}
.child-benefits details{margin:12px 0;padding:12px;background:#faf9f6;border-radius:10px}
.child-benefits summary{cursor:pointer;font-weight:600;overflow-wrap:anywhere}
.child-benefits .field{margin:8px 0;min-width:0}.child-benefits select,.child-benefits input{max-width:100%;min-width:0}
.child-benefits-row{background:#fff}.child-benefits [data-alimony-children]{display:grid;gap:10px}
.child-benefits [data-alimony-children] input{width:auto;min-height:24px}.child-benefits [data-child-total]{font-size:clamp(1.4rem,5vw,2.2rem)}
.child-benefits [data-child-details],.child-benefits [data-child-version]{overflow-wrap:anywhere}
.calculator-layout .child-benefits #calculator-result{scroll-margin-top:90px}
.child-benefits-examples{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:16px 0}
.child-benefits td{vertical-align:top;white-space:normal;overflow-wrap:anywhere}.child-benefits tr[data-status="FAIL"]{background:#fff1ed}.child-benefits tr[data-status="UNKNOWN"]{background:#fff9e7}
@media(max-width:600px){.child-benefits{padding:14px}.child-benefits fieldset{padding:10px}.child-benefits .form-grid{grid-template-columns:minmax(0,1fr)}.child-benefits .secondary-button{white-space:normal}}