/* Shared tool hub layout; calculator engines and other tools are untouched. */
.tool-hub { --tool-heading-height: 3.5rem; --tool-chrome-height: 3.5rem; overflow-x: clip; }
.tool-hub *, .tool-hub *::before, .tool-hub *::after { box-sizing: border-box; }
.tool-hub .sidebar:not(.active) { visibility: hidden; right: 0; transform: none; pointer-events: none; }
.tool-hub .sidebar.active { visibility: visible; }
@media (min-width: 769px) { .tool-hub { --tool-chrome-height: 7.25rem; } }
.tool-hub .breadcrumb-nav { display: none; }
.tool-hub .header-content { min-width: 0; gap: .75rem; }
.tool-hub .desktop-nav { min-width: 0; overflow-x: auto; }
.tool-heading {
    box-sizing: border-box;
    min-height: var(--tool-heading-height);
    width: 100%;
    max-width: 90rem;
    margin: 0 auto;
    padding: .5rem 1rem .5rem 4.75rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: .4rem 1rem;
    color: var(--sidebar-text-primary);
}
.tool-heading h1 { font-size: clamp(1rem, 2vw, 1.35rem); margin: 0; line-height: 1.3; }
.tool-heading .tool-guide {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: .375rem;
    min-height: 40px;
    padding: .375rem .625rem;
    border: 1px solid var(--ui-dropdown-border, #cbd5e1);
    border-radius: .625rem;
    background: var(--ui-dropdown-bg, #fff);
    color: var(--sidebar-text-primary, #1e293b);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}
.tool-guide svg { flex: none; }
.tool-heading .tool-guide:hover { border-color: var(--nav-link-active, #2563eb); color: var(--nav-link-active, #2563eb); }
.tool-heading .tool-guide:focus-visible { outline: 2px solid var(--nav-link-active, #2563eb); outline-offset: 3px; }
.tool-hub .main-container {
    min-height: 0 !important;
    flex: none;
    padding: .25rem .75rem 1.5rem !important;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
}
.tool-hub .calculator-frame {
    box-sizing: border-box;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 26rem !important;
    padding: 12px 14px 18px !important;
    gap: 8px !important;
    margin: 0 !important;
}
.tool-hub .screen-bezel { padding: 10px 12px !important; }
.tool-hub .calculator-header-row { min-height: 0; height: 44px; margin: 0; }
.tool-hub .display-screen { height: clamp(80px, 13dvh, 140px) !important; }
.tool-hub .keypad-grid { gap: 8px !important; }
.tool-hub .key-row { gap: 6px !important; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tool-hub .key-row > button { min-width: 0; }
.tool-hub .btn-graph { height: clamp(28px, 4dvh, 36px) !important; }
.tool-hub .btn-func,
.tool-hub .btn-black,
.tool-hub .btn-grey,
.tool-hub .btn-blue,
.tool-hub .btn-green,
.tool-hub .btn-white,
.tool-hub .btn-op,
.tool-hub .btn-enter {
    height: clamp(28px, calc((100dvh - var(--tool-chrome-height) - 350px) / 10), 44px) !important;
    margin-top: 3px !important;
}
.tool-hub .d-pad-container { height: clamp(44px, 7dvh, 64px) !important; }
.tool-hub .graphing-workspace {
    box-sizing: border-box;
    min-height: 0;
    height: max(20rem, calc(100dvh - var(--tool-chrome-height) - 1rem));
    max-width: 90rem;
    margin: 0 auto 1rem;
}
.tool-hub .graphing-main-area { min-height: 0; min-width: 0; overflow: hidden; }
.tool-hub .graph-display-area { min-height: 0; max-height: none; aspect-ratio: auto; }
.tool-hub .graph-controls-panel {
    flex: 0 0 45%;
    height: auto;
    min-height: 0;
    max-height: none;
    min-width: 0;
    overscroll-behavior: contain;
}
.tool-hub .graph-tabs-container { min-width: 0; min-height: 0; }
.tool-hub .graph-eq-input { min-width: 0; }
.tool-hub .graph-hint-overlay { box-sizing: border-box; width: min(25rem, 85%); padding: 1rem; }
.tool-hub .graph-hint-icon { font-size: 1.75rem; margin-bottom: .5rem; }
/* Keep the graph and all control tabs visible together on wide/landscape screens. */
@media (min-width: 56rem), (min-width: 40rem) and (max-height: 32rem) {
    .tool-hub .graphing-workspace { flex-direction: row; min-height: 22rem; }
    .tool-hub .graph-controls-panel { flex-basis: clamp(19rem, 32%, 27rem); border-top: 0; border-left: 1px solid var(--sidebar-border); }
}
@media (max-width: 24rem) {
    .tool-heading { padding-right: .75rem; column-gap: .5rem; flex-wrap: nowrap; }
    .tool-heading h1 { font-size: .875rem; }
    .tool-heading .tool-guide { font-size: .75rem; padding-inline: .5rem; }
    .tool-hub .calculator-frame { padding-inline: 10px !important; }
}
@media (max-height: 38rem) and (max-width: 39.99rem) {
    .tool-hub .calculator-frame { padding-block: 8px !important; gap: 6px !important; }
    .tool-hub .calculator-header-row { height: 34px; }
    .tool-hub .calculator-header-row .trust-badge { display: none; }
    .tool-hub .display-screen { height: 64px !important; }
    .tool-hub .keypad-grid { gap: 7px !important; }
    .tool-hub .key-row > button { height: 24px !important; }
    .tool-hub .d-pad-container { height: 32px !important; }
}
@media (min-width: 40rem) and (max-height: 40rem) {
    .tool-hub .calculator-frame {
        max-width: 64rem !important;
        display: grid;
        grid-template-columns: minmax(10rem, 1fr) minmax(0, 3fr);
        align-items: start;
        gap: 12px !important;
    }
    .tool-hub .keypad-grid { grid-column: 2; grid-row: 1 / span 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px !important; }
    .tool-hub .key-row > button { height: 30px !important; font-size: .75rem; }
    .tool-hub .d-pad-container { height: 36px !important; }
    .tool-hub .display-screen { height: 120px !important; }
    .tool-hub .graphing-workspace { min-height: 14rem; height: max(14rem, calc(100dvh - var(--tool-chrome-height) - 1rem)); }
}
/* Normal flow leaves Auto ads outside the tool room to render without clipping.
   In-page exclusions and overlay formats must also be configured in AdSense. */
.tool-hub .legal-disclaimer { margin-top: 3rem; }
.tool-hub .footer-bottom { width: 100%; max-width: 100%; margin-inline: 0; }
/* Matrix panels keep their controls reachable within the available screen.
   Large matrices scroll inside the editor rather than widening the page. */
.tool-hub.matrix-workspace .tool-heading { padding-inline: 1rem; }
@media (max-width: 48rem) {
    .tool-hub.matrix-workspace .tool-heading { padding-right: 4.75rem; }
}
.tool-hub.matrix-workspace .matrix-main-content {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr) 20rem;
    gap: .75rem;
    padding: .5rem .75rem 1rem;
    flex: none;
    height: max(14rem, calc(100dvh - var(--tool-chrome-height)));
    max-width: 100rem;
    min-height: 0;
    overflow: visible;
}
.tool-hub .matrix-selector-panel,
.tool-hub .matrix-editor-panel,
.tool-hub .matrix-ops-panel { width: auto; min-width: 0; min-height: 0; max-height: none; }
.tool-hub .matrix-selector-panel,
.tool-hub .matrix-ops-panel { overflow: auto; overscroll-behavior: contain; }
.tool-hub .matrix-editor-header { flex-wrap: wrap; gap: .5rem; padding: .75rem; }
.tool-hub .matrix-editor-controls { min-width: 0; gap: .375rem; }
.tool-hub .matrix-display-container { min-height: 0; min-width: 0; overflow: auto; justify-content: flex-start; }
.tool-hub .math-matrix { flex-shrink: 0; margin-inline: auto; }
@media (max-width: 64rem) {
    .tool-hub.matrix-workspace .matrix-main-content {
        grid-template-columns: minmax(0, 1fr) minmax(17rem, .85fr);
        grid-template-rows: auto minmax(0, 1fr);
    }
    .tool-hub .matrix-selector-panel { grid-column: 1 / -1; flex-direction: row; align-items: center; padding: .5rem .75rem; gap: .75rem; }
    .tool-hub .matrix-selector-title { width: auto; margin: 0; flex: none; }
    .tool-hub .matrix-selector-grid { flex: 1; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: .375rem; }
    .tool-hub .matrix-selector-btn { width: 100%; min-width: 0; padding-inline: .25rem; }
    .tool-hub .matrix-display-container { min-height: 0; }
}
@media (max-width: 39.99rem) {
    .tool-hub.matrix-workspace .matrix-main-content {
        height: max(30rem, calc(100dvh - var(--tool-chrome-height)));
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(9rem, 1fr) minmax(8rem, 1fr);
        gap: .5rem;
        padding: .25rem .5rem .75rem;
    }
    .tool-hub .matrix-selector-panel { display: block; padding: .5rem; }
    .tool-hub .matrix-selector-title { margin-bottom: .5rem; }
    .tool-hub .matrix-selector-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .tool-hub .matrix-editor-header { flex-direction: row; align-items: center; }
    .tool-hub .matrix-editor-controls { width: auto; flex-wrap: wrap; }
    .tool-hub .matrix-dim-input { width: 3rem; }
}
@media print {
    .tool-heading a { display: none; }
    .tool-hub .graphing-workspace { height: 40rem; }
}