/* TAO Tools — shared styles for practice, simulations & review */

.overflow-x-auto:not(.hidden):has(> svg.question-chart--q883) {
    display: block;
}
#sequence-svg svg.question-chart--q883,
#q-sequence svg.question-chart--q883,
svg.question-chart--q883 {
    display: block;
    width: 100%; min-width: 560px; max-width: none !important;
    height: auto;
}

.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; }
/* The same cascade trap as `.floating-panel.hidden` below, one element further
   out. The Calculator and Notes buttons ship carrying `hidden` and lose it only
   where the section offers them, but the inline-flex above is one class wide,
   like Tailwind's `.hidden`, and loads after it — so the buttons were painted in
   every section, verbal and abstract included. Scoped to this button and not
   written as a bare `.hidden` rule on purpose: a one-class rule here would also
   outrank Tailwind's responsive `sm:inline`, which is what puts the button
   labels back on wide screens. */
.tao-tool-btn.hidden { display: none; }

/* Keep column comparisons intact on small screens; scroll the table, not the page. */
.question-table-wrap {
    width: 100%; max-width: 100%; min-width: 0; margin: 16px 0;
    border: 1px solid #e5e7eb; border-radius: 8px;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
    overflow-x: auto; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}
.question-table-wrap:focus-visible {
    outline: 2px solid #003399; outline-offset: 2px;
}
.question-data-table {
    width: 100%; min-width: 32rem;
    table-layout: auto; border-collapse: collapse; font-size: 14px;
}
.question-data-table th,
.question-data-table td {
    min-width: 7.5rem; vertical-align: top; overflow-wrap: break-word;
}
.question-data-table .question-table-header {
    padding: 10px 12px; text-align: left;
    font-size: 12px; line-height: 1.4; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: white; background: #003399;
}
.question-data-table .question-table-cell {
    padding: 10px 12px; color: #374151; text-align: left;
    line-height: 1.45;
}
.question-data-table .question-table-cell--label {
    color: #111827; font-weight: 500;
}
.question-data-table .question-table-cell--numeric {
    color: #374151; text-align: right;
    font-size: 13px; font-variant-numeric: tabular-nums;
    font-family: ui-monospace, monospace; white-space: nowrap;
}
.question-data-table .question-table-row {
    background: #ffffff; border-bottom: 1px solid #f3f4f6;
}
.question-data-table .question-table-row--alt { background: #f9fafb; }
.question-data-table .question-table-row:last-child { border-bottom: 0; }

.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; }
.highlighter-on .tao-highlight { cursor: pointer; }

.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: auto;
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    /* §4.2.2.4/§4.2.2.5: both TAO widgets resize in height and width. */
    resize: both;
    min-width: 240px;
    min-height: 180px;
}
.tao-panel-anchor { display: none !important; }
/* A closed panel must stay closed. Tailwind's `.hidden{display:none}` and this
   file's `.tao-calculator{display:flex}` are both one class wide, and this file
   loads second, so the calculator won the cascade and sat open on every screen
   that includes the partial — verbal included. Two classes always beat one. */
.floating-panel.hidden { display: none; }
.floating-panel.is-dragging { user-select: none; }
.panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px; background: #f3f4f6;
    border-bottom: 1px solid #e5e7eb;
    gap: 8px; cursor: move; user-select: none; touch-action: none;
}
.panel-header:focus-visible {
    outline: 2px solid #60a5fa; outline-offset: -2px;
}
.panel-drag-grip {
    color: #9ca3af; font-size: 15px; font-weight: 700;
    letter-spacing: -3px; line-height: 1; flex: 0 0 auto;
}
.panel-title { font-size: 13px; font-weight: 600; color: #374151; }
.panel-drag-hint {
    margin-left: auto; color: #6b7280; font-size: 10px;
    font-weight: 500; line-height: 1.2; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.panel-header:focus-visible .panel-drag-hint { color: #1d4ed8; }
.is-dragging .panel-header { cursor: grabbing; }
.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; }

/* Calculator — replica of EPSO "Instructions for online Testing (TAO)",
   March 2026, §4.2.2.5: dark title bar, black display, light-blue digit pad,
   blue operator column, "=" across two columns. The display is a div and is
   not selectable, so nothing can be copied out of it. */
.tao-calculator { display: flex; flex-direction: column; }
.tao-calculator .panel-header { flex: 0 0 auto; }
.tao-calculator .calc-keys { flex: 0 0 auto; }
.tao-calculator .panel-header {
    background: #1a1a1a; border-bottom: none;
    justify-content: flex-start; position: relative; padding-left: 42px;
}
.tao-calculator .panel-title {
    color: #ffffff; font-size: 12px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
}
.tao-calculator .panel-drag-grip { color: #9ca3af; }
.tao-calculator .panel-drag-hint { color: #d1d5db; }
.tao-calculator .panel-close {
    position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
    color: #d1d5db;
}
.tao-calculator .panel-close:hover { background: #333333; color: #ffffff; }

.calc-display {
    width: 100%; min-height: 68px; flex: 1 1 auto; padding: 14px 16px;
    font-family: 'Courier New', monospace;
    font-size: 26px; text-align: right; border: none;
    background: #1a1a1a; color: #ffffff;
    display: flex; align-items: flex-end; justify-content: flex-end;
    overflow-x: auto; word-break: break-all; outline: none;
    -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
    cursor: default;
}
.calc-keys {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
    background: #ffffff;
}
.calc-btn {
    padding: 16px 10px; font-size: 15px; border: none;
    background: #e8f1fd; color: #111827; cursor: pointer; border-radius: 0;
    transition: background 0.1s; line-height: 1; font-weight: 600;
}
.calc-btn:hover { background: #d7e6fb; }
.calc-btn:active { background: #c6d9f7; }
.calc-btn.fn { background: #f2f2f2; }
.calc-btn.fn:hover { background: #e6e6e6; }
.calc-btn.op { background: #2d6fd4; color: #ffffff; }
.calc-btn.op:hover { background: #2560bb; }
.calc-btn.eq { background: #2d6fd4; color: #ffffff; grid-column: span 2; }
.calc-btn.eq:hover { background: #2560bb; }

/* TAO is a desktop test environment, while PassEPSO candidates also open
   practice on narrow windows and phones. At that width an overlay hides the
   very question the calculator is meant to support. The shared helper moves
   open panels into this in-flow dock, so the question and options are pushed
   down rather than covered. */
.tao-mobile-panel-dock { display: flex; flex-direction: column; gap: 12px; }
.tao-mobile-panel-dock:empty { display: none; }

@media (max-width: 1100px) {
    .floating-panel {
        position: static !important; top: auto !important; right: auto !important;
        bottom: auto !important; left: auto !important;
        max-height: none !important; resize: none;
        margin: 12px 0; overflow: visible;
    }
    .tao-mobile-panel-dock .floating-panel { margin: 0; }
    .tao-mobile-docked .panel-header { cursor: default; touch-action: auto; }
    .tao-mobile-docked .panel-drag-hint { display: none; }
    .tao-mobile-docked .panel-drag-grip { opacity: 0.6; }
}

@media (max-width: 767px) {
    .floating-panel {
        width: 100% !important; max-width: 100% !important;
        min-width: 0; min-height: 0;
    }
}

.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; }