.lc-widget { margin: 1.5rem 0 2rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: 16px; } .lc-widget h2 { margin-top: 0; } .lc-calc, .lc-widget { display: grid; gap: 1.25rem; } @media (min-width: 760px) { .lc-calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } } .lc-form { display: grid; gap: 1rem; } .lc-person { display: grid; gap: .5rem; margin: 0; padding: 0; border: 0; } .lc-person legend { margin-bottom: .25rem; font-weight: 700; } .lc-field { display: grid; gap: .25rem; } .lc-field span { font-size: .9375rem; color: var(--muted); } .lc-field input { min-height: 48px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); font: inherit; background: transparent; color: inherit; } .lc-signs summary { cursor: pointer; min-height: 32px; color: var(--accent); } .lc-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-top: .5rem; } @media (min-width: 560px) { .lc-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .lc-tile { position: relative; } .lc-tile input { position: absolute; opacity: 0; inset: 0; } .lc-tile span { display: block; padding: .5rem .25rem; border: 1px solid var(--line); border-radius: 10px; text-align: center; font-size: .9375rem; } .lc-tile input:checked + span { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); font-weight: 700; } .lc-tile input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; } .lc-form .btn { justify-self: start; } .lc-result { display: grid; gap: .5rem; padding: 1.25rem; border-radius: 16px; background: color-mix(in srgb, var(--accent) 8%, transparent); } .lc-result p { margin: 0; } .lc-number { min-height: 64px; font: 700 56px/64px var(--serif, inherit); font-variant-numeric: tabular-nums; color: var(--accent); } .lc-number span { margin-inline-start: 4px; font-size: 20px; color: var(--muted); } .lc-band { min-height: 1.5em; font-weight: 700; font-size: 1.125rem; } .lc-basis, .lc-line { min-height: 3em; font-size: .9375rem; color: var(--muted); } .lc-scores { display: grid; gap: .375rem; margin: 0; padding: 0; list-style: none; } .lc-scores li { display: flex; justify-content: space-between; gap: .75rem; min-height: 1.75em; font-size: .9375rem; } .lc-scores li span:last-child { color: var(--muted); } .lc-cta { min-height: 48px; } .lc-result[data-state="empty"] .lc-band { color: var(--muted); font-weight: 400; } .lc-result[data-state="problem"] .lc-band { color: #b42318; font-weight: 600; } .lc-result[aria-busy="true"] { opacity: .6; } .lc-rules li, .lc-bands li { margin-bottom: .375rem; }