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

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

/* Candidate data tables --------------------------------------------------
   Numerical questions use the same semantic table markup on every surface.
   It stays a normal row/column table on desktop and becomes a set of labelled
   row cards on small screens. The labels are copied into data-label on each
   cell so the mobile layout keeps every header and value without requiring a
   horizontal scroll or a second, drifting renderer. */
.question-table-wrap {
    width: 100%; max-width: 100%; margin: 16px 0;
    border: 1px solid #e5e7eb; border-radius: 8px;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
    overflow: visible;
}
.question-data-table {
    width: 100%; max-width: 100%; min-width: 0;
    table-layout: fixed; border-collapse: collapse; font-size: 14px;
}
.question-data-table th,
.question-data-table td {
    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: normal;
}
.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; }

/* A 7–9 column table is still useful on a desktop, but the same columns
   become unreadably narrow on a phone. Each mobile row exposes its column
   name beside its value; the document itself remains the only vertical
   scroll surface, including for tall tables. */
@media (max-width: 767px) {
    .question-table-wrap { overflow: visible; }
    .question-data-table { display: block; table-layout: auto; }
    .question-data-table thead,
    .question-data-table tbody { display: block; }
    .question-data-table thead tr {
        display: flex; flex-wrap: wrap; gap: 4px 12px;
        padding: 9px 12px; background: #003399;
    }
    .question-data-table .question-table-header {
        display: inline; padding: 0; border: 0;
        font-size: 12px; line-height: 1.4; text-transform: none;
        letter-spacing: normal; background: transparent;
        overflow-wrap: anywhere;
    }
    .question-data-table .question-table-header:not(:last-child)::after {
        content: " ·"; white-space: pre; opacity: 0.7;
    }
    .question-data-table .question-table-row {
        display: block; padding: 8px 12px;
    }
    .question-data-table .question-table-cell {
        display: grid; grid-template-columns: minmax(7.25rem, 42%) minmax(0, 1fr);
        gap: 10px; align-items: start;
        padding: 7px 0; text-align: left !important;
        font-size: 14px; line-height: 1.45;
        white-space: normal; overflow-wrap: break-word;
        border-bottom: 1px solid #eef2f7;
    }
    .question-data-table .question-table-cell::before {
        content: attr(data-label); color: #4b5563;
        font-size: 12px; line-height: 1.45; font-weight: 600;
        overflow-wrap: anywhere;
    }
    .question-data-table .question-table-cell:last-child { border-bottom: 0; }
    .question-data-table .question-table-cell--numeric {
        font-size: 14px; text-align: left !important;
        font-family: ui-monospace, monospace; white-space: normal;
    }
}

.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;
}
/* 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;
    cursor: move; user-select: none; touch-action: 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; }

/* 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: center; position: relative;
}
.tao-calculator .panel-header span {
    color: #ffffff; font-size: 12px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
}
.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; }

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