.rounding-jump {
margin: 0 0 1.5rem;
padding: 1rem 1.1rem;
border: 1px solid var(--border);
border-left: 4px solid var(--brand);
border-radius: 12px;
background: var(--reading-surface, #fff);
color: var(--text);
}
.rounding-jump .article-calculator-prompt__label {
margin: 0;
color: var(--brand-dark);
font-size: 0.78rem;
font-weight: 800;
}
.rounding-jump h2 {
margin: 0.25rem 0 0.35rem;
border: 0;
color: var(--text);
font-size: 1.08rem;
}
.rounding-jump p {
margin: 0.35rem 0 0;
}
.rounding-jump__button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
margin-top: 0.75rem;
padding: 0 1rem;
border-radius: 8px;
background: var(--reading-selected, var(--brand-dark));
color: var(--reading-on-selected, #fff) !important;
font-weight: 800;
text-decoration: none !important;
}
.rounding-simulator {
padding: 1.25rem;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--reading-soft, #f7f9fc);
}
.rounding-fields {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
.rounding-field label {
display: block;
margin-bottom: 0.35rem;
font-weight: 700;
}
.rounding-field input,
.rounding-field select {
width: 100%;
min-height: 46px;
padding: 0.7rem;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--reading-surface, #fff);
color: var(--text);
font: inherit;
}
.rounding-field input:focus-visible,
.rounding-field select:focus-visible {
outline: 3px solid var(--brand);
outline-offset: 2px;
}
.rounding-default-note {
margin: 0.75rem 0 0;
}
.rounding-action {
min-height: 48px;
margin-top: 1rem;
padding: 0.75rem 1.2rem;
border: 0;
border-radius: 8px;
background: var(--interaction);
color: var(--reading-on-action, #fff);
cursor: pointer;
font: inherit;
font-weight: 800;
}
.rounding-action:hover {
background: var(--interaction-hover);
}
.rounding-result {
margin-top: 1rem;
padding: 1rem;
border-left: 4px solid var(--brand);
background: var(--reading-surface, #fff);
}
.rounding-result-title {
margin: 0 0 0.75rem;
color: var(--brand-dark);
font-size: 1.05rem;
}
.rounding-result dl {
display: grid;
grid-template-columns: minmax(10rem, 1fr) 1fr;
gap: 0.45rem 1rem;
}
.rounding-result dt {
font-weight: 700;
}
.rounding-result dd {
margin: 0;
text-align: right;
}
.rounding-table {
min-width: 590px;
}
@media (max-width: 700px) {
.rounding-jump {
padding: 0.95rem 1rem;
}
.rounding-jump__button,
.rounding-action {
width: 100%;
}
.rounding-fields,
.rounding-result dl {
grid-template-columns: 1fr;
}
.rounding-result dd {
margin-bottom: 0.45rem;
text-align: left;
}
.rounding-table-wrap {
overflow: visible;
}
.rounding-table {
min-width: 0;
border-collapse: separate;
border-spacing: 0;
}
.rounding-table caption {
margin-bottom: 0.7rem;
text-align: left;
font-weight: 700;
}
.rounding-table thead {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
.rounding-table tbody,
.rounding-table tr,
.rounding-table td {
display: block;
width: 100%;
}
.rounding-table tr {
margin-bottom: 0.9rem;
overflow: hidden;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--reading-surface, #fff);
}
.rounding-table td {
display: grid;
grid-template-columns: minmax(7.2rem, 40%) minmax(0, 1fr);
gap: 0.75rem;
align-items: start;
padding: 0.7rem 0.8rem;
border: 0;
border-top: 1px solid var(--border);
overflow-wrap: anywhere;
}
.rounding-table td:first-child {
border-top: 0;
background: var(--brand-soft);
color: var(--brand-dark);
font-weight: 800;
}
.rounding-table td::before {
content: attr(data-label);
color: var(--muted);
font-size: 0.78rem;
font-weight: 800;
}
.rounding-table td:first-child::before {
color: var(--brand-dark);
}
}