/* ==========================================================================
   Tool Shell — shared top strip + bottom card for individual tool pages.
   Driven by tool-shell.js (public API: window.initToolShell(unitId)).

   Variable naming is NOT consistent across the site (see CLAUDE.md's
   "Style conventions" section): some pages define --text-dim/--amber-dim,
   others define --dim/--amberd. Every color below chains both names plus
   a hard hex fallback so this file renders correctly on any page.
   ========================================================================== */

#tool-shell-top,
#tool-shell-bottom {
    box-sizing: border-box;
}

#tool-shell-top *,
#tool-shell-bottom * {
    box-sizing: border-box;
}

/* ── TOP STRIP ── goes immediately below the page topbar ── */

.tool-shell-top {
    background: var(--panel, #13171d);
    border-bottom: 1px solid var(--border2, var(--border, #2e3848));
    padding: 9px 24px;
}

.tool-shell-top-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.tool-shell-badge {
    font-family: var(--mono, 'Share Tech Mono', monospace);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #000;
    background: var(--amber, #f59e0b);
    padding: 3px 8px;
    flex-shrink: 0;
    white-space: nowrap;
}

.tool-shell-meta {
    font-family: var(--mono, 'Share Tech Mono', monospace);
    font-size: 11px;
    color: var(--text-dim, var(--dim, #7a8899));
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex-shrink: 0;
}

.tool-shell-outcome {
    font-family: var(--body, 'Barlow', sans-serif);
    font-size: 12px;
    color: var(--text, #d1d9e6);
    flex: 1 1 220px;
    min-width: 0;
}

@media (max-width: 480px) {
    .tool-shell-top-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

/* ── BOTTOM CARD ── goes immediately before </body> ── */

.tool-shell-bottom {
    background: var(--panel, #13171d);
    border: 1px solid var(--border2, var(--border, #2e3848));
    border-left: 4px solid var(--amber, #f59e0b);
    max-width: 1100px;
    margin: 28px auto;
    padding: 22px 26px;
    text-align: center;
}

.tool-shell-step {
    font-family: var(--mono, 'Share Tech Mono', monospace);
    font-size: 11px;
    font-weight: 700;
    color: var(--amber, #f59e0b);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.tool-shell-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.tool-shell-btn {
    display: inline-block;
    font-family: var(--head, 'Barlow Condensed', sans-serif);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    padding: 9px 18px;
    background: var(--amber, #f59e0b);
    color: #000;
    transition: background 0.15s;
}

.tool-shell-btn:hover {
    background: var(--amber2, #fbbf24);
}

.tool-shell-btn.secondary {
    background: transparent;
    color: var(--text-dim, var(--dim, #7a8899));
    border: 1px solid var(--border2, var(--border, #2e3848));
}

.tool-shell-btn.secondary:hover {
    color: var(--amber, #f59e0b);
    border-color: var(--amber-dim, var(--amberd, #92600a));
    background: transparent;
}

.tool-shell-btn.completed,
.tool-shell-btn.completed:hover {
    background: var(--green, #22c55e);
    color: #000;
    cursor: default;
}

.tool-shell-related {
    margin-bottom: 16px;
}

.tool-shell-related-label {
    font-family: var(--mono, 'Share Tech Mono', monospace);
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted, var(--muted, #4a5568));
    margin-bottom: 10px;
}

.tool-shell-related-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 18px;
}

.tool-shell-related-links a {
    font-family: var(--body, 'Barlow', sans-serif);
    font-size: 13px;
    color: var(--text, #d1d9e6);
    text-decoration: none;
    border-bottom: 1px solid var(--border2, var(--border, #2e3848));
}

.tool-shell-related-links a:hover {
    color: var(--amber, #f59e0b);
    border-color: var(--amber-dim, var(--amberd, #92600a));
}

.tool-shell-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 22px;
    font-family: var(--mono, 'Share Tech Mono', monospace);
    font-size: 11px;
    letter-spacing: 0.5px;
}

.tool-shell-links a {
    color: var(--text-dim, var(--dim, #7a8899));
    text-decoration: none;
    border-bottom: 1px solid var(--border2, var(--border, #2e3848));
    padding-bottom: 1px;
}

.tool-shell-links a:hover {
    color: var(--amber, #f59e0b);
    border-color: var(--amber-dim, var(--amberd, #92600a));
}

@media (max-width: 480px) {
    .tool-shell-bottom {
        padding: 18px 16px;
        margin: 20px auto;
    }
    .tool-shell-nav {
        flex-direction: column;
        align-items: stretch;
    }
    .tool-shell-btn {
        width: 100%;
        text-align: center;
    }
    .tool-shell-links {
        flex-direction: column;
        gap: 8px;
    }
}