/* TAO Tools — shared styles for practice & score predictor */

.tao-tool-btn {
    /* ux_audit_2026_05_11 P1-3: toolbar buttons were 26-28px tall — below the
       44px mobile minimum tap target. Bumped without changing visual footprint
       of the active/hover states. */
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 44px; padding: 8px 12px; border-radius: 8px;
    border: 1.5px solid transparent;
    font-size: 14px; color: #4b5563;
    cursor: pointer; transition: all 0.15s;
    background: transparent; white-space: nowrap;
}
.tao-tool-btn:hover { background: #f3f4f6; }
.tao-tool-btn.active { border-color: #3b82f6; background: #eff6ff; color: #1d4ed8; }

.elim-x {
    width: 22px; height: 22px; border-radius: 50%;
    border: 1.5px solid #d1d5db; background: white;
    color: #9ca3af; font-size: 11px; cursor: pointer;
    display: none; align-items: center; justify-content: center;
    transition: all 0.15s; flex-shrink: 0; line-height: 1;
}
.elim-x:hover { border-color: #ef4444; color: #ef4444; background: #fef2f2; }
.elim-x.is-eliminated { background: #fef2f2; border-color: #ef4444; color: #ef4444; }
.eliminator-on .elim-x { display: flex; }

.tao-highlight { padding: 0 1px; border-radius: 2px; }

.floating-panel {
    position: fixed; z-index: 50; background: white;
    border-radius: 12px; border: 1px solid #d1d5db;
    box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.15);
    overflow: hidden;
}
.panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px; background: #f3f4f6;
    border-bottom: 1px solid #e5e7eb;
    cursor: move; user-select: none;
}
.panel-header span { font-size: 13px; font-weight: 600; color: #374151; }
.panel-close {
    width: 24px; height: 24px; border-radius: 6px;
    border: none; background: transparent; color: #9ca3af;
    cursor: pointer; font-size: 18px; display: flex;
    align-items: center; justify-content: center; line-height: 1;
}
.panel-close:hover { background: #e5e7eb; color: #374151; }

.calc-display {
    width: 100%; padding: 12px 14px; font-family: 'Courier New', monospace;
    font-size: 24px; text-align: right; border: none;
    background: #f9fafb; border-bottom: 1px solid #e5e7eb;
    color: #111827; outline: none;
}
.calc-btn {
    padding: 14px 10px; font-size: 17px; border: 1px solid #e5e7eb;
    background: white; cursor: pointer; border-radius: 8px;
    transition: background 0.1s; line-height: 1; font-weight: 500;
}
.calc-btn:hover { background: #f3f4f6; }
.calc-btn:active { background: #e5e7eb; }
.calc-btn.op { color: #3b82f6; font-weight: 600; }
.calc-btn.eq { background: #3b82f6; color: white; font-weight: 600; }
.calc-btn.eq:hover { background: #2563eb; }

.hl-clear {
    width: 22px; height: 22px; border-radius: 50%;
    border: 1.5px solid #d1d5db; background: white;
    cursor: pointer; font-size: 11px; display: flex;
    align-items: center; justify-content: center;
    color: #9ca3af; line-height: 1;
}
.hl-clear:hover { border-color: #ef4444; color: #ef4444; }