/* ════════════════════════════════════════════════════════════════════════════
   RECATOOLS — Area Calculator — style.css
   Tool-specific overrides only.
   Base styles live in /assets/css/tool-page.css.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Shape selector grid (2×4) ───────────────────────────────────────────────── */
.shape-selector-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   0.625rem;
    margin-bottom:         1.5rem;
}
@media (max-width: 600px) {
    .shape-selector-grid { grid-template-columns: repeat(2, 1fr); }
}

.shape-btn {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content: center;
    gap:            0.25rem;
    background:     var(--bg, #FFFFFF);
    border:         2px solid var(--border, #E2E4E8);
    border-radius:  12px;
    padding:        0.75rem 0.5rem;
    cursor:         pointer;
    font-size:      0.75rem;
    font-weight:    600;
    color:          var(--text-secondary, #64748B);
    transition:     background 0.15s, border-color 0.15s, color 0.15s;
    min-height:     70px;
}
.shape-btn:hover {
    border-color: var(--accent, #E8472F);
    color:        var(--accent, #E8472F);
}
.shape-btn.active {
    background:   #fff5f0;
    border-color: var(--accent, #E8472F);
    color:        var(--accent, #E8472F);
}
.shape-btn .shape-icon {
    font-size:   1.5rem;
    line-height: 1;
}
.shape-btn .shape-label {
    font-size:   0.6875rem;
    font-weight: 700;
    text-align:  center;
    line-height: 1.2;
}

/* ── Unit selector ────────────────────────────────────────────────────────────── */
.unit-selector {
    display:         flex;
    align-items:     center;
    flex-wrap:       wrap;
    gap:             0.375rem;
    margin-bottom:   1.5rem;
}
.unit-selector-label {
    font-size:     0.875rem;
    font-weight:   600;
    color:         var(--text-secondary, #64748B);
    margin-right:  0.25rem;
}
.unit-btn {
    background:    var(--bg, #FFFFFF);
    border:        1.5px solid var(--border, #E2E4E8);
    border-radius: 999px;
    color:         var(--text-secondary, #64748B);
    font-size:     0.8125rem;
    font-weight:   600;
    cursor:        pointer;
    padding:       0.25rem 0.75rem;
    transition:    background 0.15s, border-color 0.15s, color 0.15s;
}
.unit-btn:hover {
    border-color: var(--accent, #E8472F);
    color:        var(--accent, #E8472F);
}
.unit-btn.active {
    background:   var(--accent, #E8472F);
    border-color: var(--accent, #E8472F);
    color:        #fff;
}

/* ── Shape input panels ──────────────────────────────────────────────────────── */
.shape-inputs-panel {
    margin-bottom: 1.25rem;
}
.shape-input-group {
    margin-bottom: 1rem;
}
.shape-input-label {
    display:       block;
    font-size:     0.875rem;
    font-weight:   600;
    color:         var(--text-primary, #0D1B2A);
    margin-bottom: 0.375rem;
}
.shape-input-label .unit-hint {
    color:       var(--text-secondary, #64748B);
    font-weight: 400;
}
.shape-input {
    width:         100%;
    padding:       0.625rem 0.875rem;
    font-size:     1rem;
    font-family:   'IBM Plex Sans', sans-serif;
    font-weight:   600;
    border:        1.5px solid var(--border, #E2E4E8);
    border-radius: 8px;
    background:    #fff;
    color:         var(--text-primary, #0D1B2A);
    transition:    border-color 0.15s;
    box-sizing:    border-box;
}
.shape-input:focus {
    outline:      none;
    border-color: var(--accent, #E8472F);
}

/* ── Toggle row (Heron, Diameter) ───────────────────────────────────────────── */
.toggle-row {
    display:     flex;
    align-items: center;
    gap:         0.625rem;
    margin-bottom: 0.875rem;
    font-size:   0.875rem;
    font-weight: 600;
    color:       var(--text-secondary, #64748B);
    cursor:      pointer;
}
.toggle-row input[type="checkbox"] {
    width:   1.125rem;
    height:  1.125rem;
    accent-color: var(--accent, #E8472F);
    cursor:  pointer;
}

/* ── Area + perimeter results ────────────────────────────────────────────────── */
#results-section {
    margin-top: 1.5rem;
}
.area-result-primary {
    text-align:    center;
    margin-bottom: 1rem;
}
.area-result-value {
    font-family:  'IBM Plex Serif', serif;
    font-size:    2.25rem;
    font-weight:  700;
    color:        var(--accent, #E8472F);
    line-height:  1.15;
}
.area-result-label-main {
    font-size:   0.875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:       var(--text-secondary, #64748B);
    margin-top:  0.25rem;
}

.area-perimeter-row {
    display:       flex;
    align-items:   center;
    justify-content: center;
    gap:           0.5rem;
    margin-bottom: 1rem;
    font-size:     0.9375rem;
    color:         var(--text-secondary, #64748B);
}
.area-perimeter-row strong {
    color:       var(--text-primary, #0D1B2A);
    font-weight: 700;
}

/* ── Formula line ────────────────────────────────────────────────────────────── */
.formula-line {
    background:    var(--bg, #FFFFFF);
    border:        1.5px solid var(--border, #E2E4E8);
    border-radius: 8px;
    padding:       0.625rem 1rem;
    font-size:     0.8125rem;
    font-family:   'SFMono-Regular', 'Consolas', monospace;
    color:         var(--text-secondary, #64748B);
    word-break:    break-word;
    margin-bottom: 1rem;
}

/* ── Unit conversion row ─────────────────────────────────────────────────────── */
.unit-conv-row {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   0.625rem;
}
@media (max-width: 480px) {
    .unit-conv-row { grid-template-columns: 1fr; }
}

.unit-conv-card {
    background:    var(--bg, #FFFFFF);
    border:        1px solid var(--border, #E2E4E8);
    border-radius: 10px;
    padding:       0.625rem 0.75rem;
    text-align:    center;
}
.unit-conv-val {
    font-size:   0.9375rem;
    font-weight: 700;
    color:       var(--text-primary, #0D1B2A);
}
.unit-conv-lbl {
    font-size:   0.6875rem;
    font-weight: 600;
    color:       var(--text-secondary, #64748B);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top:  0.125rem;
}

/* cache-buster: 2026-05-24T05:06:05Z */