/* ── Tools Page ── */

/* ── Hero ── */
.tools-hero {
    padding: 72px 52px 60px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, var(--bg2) 0%, var(--bg) 100%);
    text-align: center;
}
.tools-hero .page-title { margin-bottom: 12px; }
.tools-hero .page-sub { max-width: 540px; margin: 0 auto; }

/* ── Tool Grid ── */
.tool-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 860px;
    margin: 0 auto;
    padding: 56px 52px 72px;
}

/* ── Tool Card ── */
.tool-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 28px 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.25s;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
}
.tool-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--orange);
    opacity: 0;
    transition: opacity 0.3s;
}
.tool-card:hover {
    border-color: var(--orange-bdr);
    box-shadow: 0 8px 32px rgba(255,95,0,0.08);
    transform: translateY(-2px);
}
.tool-card:hover::before { opacity: 1; }
.tool-card:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}

/* ── Disabled (Coming Soon) ── */
.tool-card--disabled {
    opacity: 0.45;
    pointer-events: none;
    cursor: default;
}
.tool-card--disabled::before { display: none; }

/* ── Card Header ── */
.tool-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.tool-card-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.tool-card-icon--orange { background: var(--orange-dim); color: var(--orange); }
.tool-card-icon--teal   { background: var(--teal-dim);   color: var(--teal); }
.tool-card-icon--muted  { background: rgba(255,255,255,0.04); color: var(--muted); }

.tool-card-title {
    font-family: var(--font-h);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text);
}

/* ── Badges ── */
.badge {
    display: inline-flex;
    padding: 3px 10px;
    border-radius: 6px;
    font-family: var(--font-m);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.6;
}
.badge--free {
    background: var(--teal-dim);
    color: var(--teal);
    border: 1px solid rgba(0,200,150,0.18);
}
.badge--soon {
    background: rgba(255,255,255,0.04);
    color: var(--muted);
    border: 1px solid var(--border);
}

/* ── Card Body ── */
.tool-card-desc {
    color: var(--text2);
    font-size: 0.88rem;
    line-height: 1.7;
    flex: 1;
}
.tool-card-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-h);
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--orange);
    margin-top: 4px;
    transition: gap 0.2s;
}
.tool-card:hover .tool-card-action { gap: 10px; }
.tool-card-action .arrow { transition: transform 0.2s; }
.tool-card:hover .tool-card-action .arrow { transform: translateX(2px); }

/* ── CTA Section ── */
.tools-cta {
    text-align: center;
    padding: 60px 52px 80px;
    border-top: 1px solid var(--border);
}
.tools-cta h2 {
    font-family: var(--font-h);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 12px;
}
.tools-cta p {
    color: var(--text2);
    font-size: 0.92rem;
    margin-bottom: 24px;
}
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: var(--orange);
    color: #fff;
    font-family: var(--font-h);
    font-weight: 700;
    font-size: 0.88rem;
    border-radius: 10px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: filter 0.2s, transform 0.2s;
}
.btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn-primary:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* ── Position Sizer Calculator ── */
.calc-wrap {
    max-width: 860px;
    margin: 0 auto;
    padding: 56px 52px 72px;
}
.calc-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
}
.calc-header {
    padding: 24px 28px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 12px;
}
.calc-header-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: var(--orange-dim);
    display: flex; align-items: center; justify-content: center;
    color: var(--orange);
    font-size: 1rem;
}
.calc-header h2 {
    font-family: var(--font-h);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
}

/* ── Inputs ── */
.calc-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 28px;
}
.calc-field { display: flex; flex-direction: column; gap: 6px; }
.calc-field.full { grid-column: 1 / -1; }
.calc-label {
    font-family: var(--font-h);
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text2);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.calc-input, .calc-select {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
    font-family: var(--font-m);
    font-size: 0.88rem;
    color: var(--text);
    transition: border-color 0.2s;
    width: 100%;
}
.calc-input:focus, .calc-select:focus {
    outline: none;
    border-color: var(--orange);
    box-shadow: 0 0 0 3px var(--orange-dim);
}
.calc-select { cursor: pointer; appearance: none; }
.calc-select-wrap {
    position: relative;
}
.calc-select-wrap::after {
    content: '\25BC';
    position: absolute;
    right: 14px; top: 50%;
    transform: translateY(-50%);
    font-size: 0.6rem;
    color: var(--text2);
    pointer-events: none;
}

/* ── Toggle (ticks/points) ── */
.calc-toggle {
    display: inline-flex;
    border-radius: 6px;
    border: 1px solid var(--border);
    overflow: hidden;
    margin-top: 4px;
}
.calc-toggle button {
    padding: 5px 14px;
    background: transparent;
    border: none;
    font-family: var(--font-m);
    font-size: 0.72rem;
    color: var(--text2);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.calc-toggle button.active {
    background: var(--orange);
    color: #fff;
}
.calc-toggle button:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: -2px;
}

/* ── Results ── */
.calc-results {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border);
    border-top: 1px solid var(--border);
}
.calc-result {
    background: var(--bg);
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.calc-result-label {
    font-family: var(--font-h);
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.calc-result-value {
    font-family: var(--font-m);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--teal);
}
.calc-result-value--warn { color: var(--red); }
.calc-result-sub {
    font-size: 0.72rem;
    color: var(--text2);
    font-family: var(--font-b);
}

/* ── Warning Banner ── */
.calc-warning {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    background: var(--red-dim);
    border-top: 1px solid rgba(255,77,109,0.15);
    font-size: 0.82rem;
    color: var(--red);
    font-family: var(--font-b);
}
.calc-warning.visible { display: flex; }
.calc-warning-icon { font-size: 1rem; flex-shrink: 0; }

/* ── Educational Content ── */
.edu-section {
    max-width: 760px;
    margin: 0 auto;
    padding: 56px 52px 80px;
}
.edu-section h2 {
    font-family: var(--font-h);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 14px;
    padding-left: 14px;
    border-left: 2px solid var(--orange);
}
.edu-section p {
    color: var(--text2);
    font-size: 0.9rem;
    line-height: 1.8;
    margin-bottom: 20px;
}

/* ── Spec Table ── */
.spec-table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0 36px;
    font-size: 0.82rem;
}
.spec-table th {
    text-align: left;
    padding: 10px 14px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    font-family: var(--font-h);
    font-weight: 600;
    color: var(--text);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.spec-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text2);
    font-family: var(--font-m);
    font-size: 0.78rem;
}
.spec-table tbody tr:hover {
    background: rgba(255,255,255,0.02);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .tools-hero { padding: 52px 24px 40px; }
    .tool-grid { grid-template-columns: 1fr; padding: 36px 24px 56px; }
    .tools-cta { padding: 48px 24px 60px; }
    .calc-wrap { padding: 36px 24px 56px; }
    .calc-inputs { grid-template-columns: 1fr; padding: 20px; }
    .calc-results { grid-template-columns: 1fr; }
    .calc-header { padding: 18px 20px; }
    .edu-section { padding: 36px 24px 60px; }
    .spec-table { font-size: 0.75rem; }
    .spec-table th, .spec-table td { padding: 8px 10px; }
}
@media (max-width: 480px) {
    .calc-result { padding: 16px 18px; }
    .calc-result-value { font-size: 1.1rem; }
}