/* ==========================================================================
   360 Universal Calculator — tools grid and tool panel
   ========================================================================== */

.tool-index {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--gap);
}

.tool-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    text-align: start;
    transition: transform .12s ease, border-color .2s ease;
}

.tool-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.tool-card:active { transform: scale(.99); }

.tool-card__icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 14%, var(--key-bg));
    color: var(--accent);
    font-size: 1.25rem;
    flex: none;
}

.tool-card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.tool-card__title { font-weight: 800; font-size: .95rem; }
.tool-card__desc { color: var(--muted); font-size: .78rem; }
.tool-card__chevron { color: var(--muted); font-size: 1.3rem; }

/* --------------------------------------------------------------------------
   Tool panel
   -------------------------------------------------------------------------- */

.tool-panel { display: flex; flex-direction: column; gap: var(--gap); }

.tool-panel__head { display: flex; align-items: center; gap: 10px; }
.tool-panel__title { font-size: 1.1rem; font-weight: 800; }
.tool-panel__body { display: flex; flex-direction: column; gap: 12px; }

.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.tool-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.tool-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tool-actions--wrap .btn { flex: 1 1 auto; }

.tool-note { color: var(--muted); font-size: .74rem; line-height: 1.5; }

.tool-result {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
}

.tool-result--error {
    background: color-mix(in srgb, var(--danger-text) 12%, var(--surface));
    border-color: color-mix(in srgb, var(--danger-text) 30%, var(--border));
    color: var(--danger-text);
    font-weight: 700;
}

.tool-result__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: .86rem;
}

.tool-result__label { color: var(--muted); }
.tool-result__value { font-weight: 800; text-align: end; word-break: break-all; cursor: pointer; }
.tool-result__row--primary .tool-result__value { font-size: 1.25rem; }
.tool-result__row--primary .tool-result__label { color: var(--text); font-weight: 700; }

.timer-display {
    text-align: center;
    font-size: clamp(2rem, 10vw, 3.4rem);
    font-weight: 800;
    letter-spacing: .06em;
    font-variant-numeric: tabular-nums;
    padding: 14px;
    border-radius: var(--radius-md);
    background: var(--key-bg);
    color: var(--text);
    direction: ltr;
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {
    .tool-index { grid-template-columns: 1fr; }
    .tool-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tool-grid--three .field__label { font-size: .68rem; }
}