/* Label and ribbon calculator (/tools/label-ribbon-calculator), scoped under .lc. */

.lc-intro { color: #33434f; max-width: 760px; margin: 0; font-size: 1.05rem; }
.lc-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.lc-card { background: #fff; border: 1px solid var(--hp-line); border-radius: var(--hp-radius); padding: 24px; box-shadow: var(--hp-shadow); margin: 0; min-width: 0; }
.lc-card legend { float: left; width: 100%; font-size: 1.2rem; font-weight: 700; color: var(--hp-ink); margin-bottom: 14px; }
.lc-card legend + * { clear: both; }

.lc-method { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.lc-method label { flex: 1 1 200px; display: flex; gap: 8px; align-items: baseline; padding: 12px 14px; border: 1px solid var(--hp-line); border-radius: 10px; cursor: pointer; font-weight: 600; color: var(--hp-ink); }
.lc-method label:has(input:checked) { border-color: var(--hp-blue); background: #eef5fa; }
.lc-method small { font-weight: 400; color: var(--hp-muted); }

.lc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lc-field { margin-bottom: 14px; }
.lc-field label { display: block; font-size: .9rem; font-weight: 600; color: var(--hp-ink); margin-bottom: 6px; }
.lc-field input, .lc-field select { width: 100%; height: 46px; padding: 0 12px; border: 1px solid #cfd8e0; border-radius: 8px; font-size: 1rem; color: var(--hp-ink); background: #fff; }
.lc-field input:focus, .lc-field select:focus { outline: 2px solid var(--hp-blue); outline-offset: 1px; border-color: var(--hp-blue); }
.lc-field small { display: block; margin-top: 6px; color: var(--hp-muted); font-size: .82rem; }
.lc-opt { font-weight: 400; color: var(--hp-muted); }
.lc-unit { position: relative; }
.lc-unit input { padding-right: 48px; }
.lc-unit span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--hp-muted); font-size: .9rem; pointer-events: none; }
.lc-ribbon { margin-bottom: 0; }

.lc-result { background: var(--hp-navy); border-color: var(--hp-navy); color: #fff; position: sticky; top: 110px; }
.lc-result__label { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hp-gold); margin-bottom: 10px; }
.lc-result dl { margin: 0 0 14px; }
.lc-result dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.lc-result dl > div[hidden] { display: none; }
.lc-result dt { font-weight: 400; color: rgba(255, 255, 255, .8); }
.lc-result dd { margin: 0; font-weight: 700; text-align: right; }
.lc-result .lc-big dd { font-size: 1.35rem; color: var(--hp-gold); }
.lc-note { font-size: .82rem; color: rgba(255, 255, 255, .7); margin-bottom: 16px; }

.lc-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lc-links a { color: var(--hp-blue); font-weight: 600; text-decoration: none; }
.lc-links a:hover { text-decoration: underline; }

.lc-steps { margin: 0; padding-left: 20px; display: grid; gap: 12px; color: #33434f; }
.lc-steps strong { color: var(--hp-ink); }

@media (max-width: 991px) {
    .lc-grid { grid-template-columns: 1fr; }
    .lc-result { position: static; }
}
@media (max-width: 480px) {
    .lc-row { grid-template-columns: 1fr; gap: 0; }
    .lc-card { padding: 18px; }
}
.lc-result .lc-big dd.lc-hint { font-size: .9rem; font-weight: 400; color: rgba(255, 255, 255, .7); }