.score-container {
    width: 100%;
    max-width: 800px; /* Match old app width */
    margin: 0 auto 0; /* Add margin top to avoid top-left login button */
}

.score-bar {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end; /* Group tabs to the right side */
    gap: 8px; /* Add a consistent gap between columns */
    padding: 0.5em;
    padding-bottom: 0;
    margin: 0;
    position: relative;
    z-index: 2;
    /* Clip bottom overflow so rising tab doesn't peek below the bar */
    /* Allow generous overflow on top/sides for shadows */
    clip-path: inset(-200% -20px 0 -20px);
}

/* Colored strip behind the tabs at bottom — fills gutter gaps with active tab color */
.score-bar::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: #ddd;
    z-index: 1;
    transition: background-color 0.2s ease;
}
.score-container[data-active-tab="speaking"] .score-bar::after {
    background: #674c8f;
}
.score-container[data-active-tab="writing"] .score-bar::after {
    background: #bc8d16;
}
.score-container[data-active-tab="reading"] .score-bar::after {
    background: #ab2a2a;
}
.score-container[data-active-tab="listening"] .score-bar::after {
    background: #23847e;
}
.score-container[data-active-tab="overall"] .score-bar::after {
    background: #b8601a;
}

.skill-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    max-width: 88px; /* Stop the column from expanding infinitely on large screens */
    cursor: pointer;
    transition: transform 0.5s cubic-bezier(0.1, 1.24, 1, 1.02);
    position: relative;
}

.skill-column:hover {
    transform: translateY(-2px);
}

.arch {
    width: 100%;
    max-width: 88px;
    height: 3em;
    border-radius: 44px 44px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    gap: 3px;
    position: relative;
    transition:
        filter 0.15s ease,
        box-shadow 0.2s ease;
    /* Inactive tabs: subtle inset-ish shadow — pushed back */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.skill-column:hover .arch,
.overall-column:hover .arch {
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

/* Active skill tab — prominent forward shadow */
.skill-column.active-tab .arch {
    filter: brightness(1.1);
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.3),
        0 2px 6px rgba(0, 0, 0, 0.15);
}

/* WisePTE score — always the most prominent element */
.overall-column.active-tab .arch {
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.35),
        0 3px 8px rgba(0, 0, 0, 0.2);
}

.arch .score {
    font-size: 1em;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 500;
    font-family: serif;
    color: #fff;
    line-height: 1;
}

.arch .label-inside {
    font-size: 0.8em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1;
}

.pillar {
    width: 100%;
    max-width: 88px;
    height: 0;
}

.overall-column .pillar {
    width: 100%;
    max-width: 104px;
}

/* Skill colors */
.speaking .arch,
.speaking .pillar {
    background: #674c8f;
}
.writing .arch,
.writing .pillar {
    background: #bc8d16;
}
.writing .arch .score {
    color: #fff;
}
.writing .arch .label-inside {
    color: rgba(255, 255, 255, 0.9);
}
.reading .arch,
.reading .pillar {
    background: #ab2a2a;
}
.listening .arch,
.listening .pillar {
    background: #23847e;
}

/* Divider */
.divider {
    width: 1px;
    height: 38px;
    background: #e0e0e0;
    margin: 0 3px;
    align-self: center;
    flex-shrink: 0;
}

/* Overall score — same height, wider */
.overall-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1.15;
    max-width: 104px; /* Stop the overall tab from expanding infinitely */
    cursor: pointer;
    transition: transform 0.15s ease;
    position: relative;
}

.overall-column:not(.active-tab):hover {
    transform: translateY(-2px);
}

.overall-column .arch {
    width: 100%;
    max-width: 104px;
    height: 65px;
    border-radius: 18px 18px 0 0;
    background: #b8601a;
    padding: 0.2em 0;
    gap: 0;
    /* WisePTE always has a strong baseline shadow — foremost element */
    box-shadow:
        0 5px 16px rgba(0, 0, 0, 0.28),
        0 2px 6px rgba(0, 0, 0, 0.15);
}

.overall-column .arch .label-inside {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    color: #fff;
}

.overall-column .arch .label-inside .brand {
    font-size: 1.5em;
    font-weight: 700;
    text-transform: none;
}

.overall-column .arch .label-inside .brand .brand-wise {
    font-family: "Playfair Display", Georgia, serif;
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0;
    margin-right: 0.08em;
}

.overall-column .arch .label-inside .brand .brand-pte {
    font-family: "Segoe UI", system-ui, sans-serif;
    font-style: normal;
    /* letter-spacing: 0.06em; */
    text-transform: uppercase;
}

.overall-column .arch .label-inside .score-label {
    font-size: 1.05em;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.95);
}

/* Two-shade split for WisePTE arch */
.overall-column .arch {
    overflow: hidden;
    padding: 0;
    gap: 0;
}

.overall-column .arch-top {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    flex: 1;
    background: #b8601a;
}

.overall-column .arch-bottom {
    display: flex;
    padding: 0.5em 0.35em 0;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    flex: 1;
    background: #8e4913;
}

.overall-column .arch-bottom .score {
    font-size: 0.9em;
}

/* Tab content area — connected to active tab */
.tab-content-area {
    padding: 16px 16px 16px;
    min-height: 140px;
    border: 2px solid #ddd;
    border-radius: 0 0 10px 10px;
    background: #fff;
    margin-top: 0;
    position: relative;
    z-index: 1;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Color the content border to match active tab */
.score-container[data-active-tab="speaking"] .tab-content-area {
    border-color: #896ec2;
}
.score-container[data-active-tab="writing"] .tab-content-area {
    border-color: #e5af1f;
}
.score-container[data-active-tab="reading"] .tab-content-area {
    border-color: #d63737;
}
.score-container[data-active-tab="listening"] .tab-content-area {
    border-color: #2fb0a8;
}
.score-container[data-active-tab="overall"] .tab-content-area {
    border-color: #e08830;
}

/* Active skill tab — raised to near WisePTE level */
.skill-column.active-tab {
    position: relative;
    transform: translateY(-26px);
}

/* Active skill tab — colored extension fills gap between raised arch and content */
.skill-column.active-tab::before {
    content: "";
    position: absolute;
    bottom: -26px;
    left: 50%;
    width: 100%;
    max-width: 88px;
    transform: translateX(-50%);
    height: 26px;
    z-index: 0;
}
.speaking.active-tab::before {
    background: #674c8f;
}
.writing.active-tab::before {
    background: #bc8d16;
}
.reading.active-tab::before {
    background: #ab2a2a;
}
.listening.active-tab::before {
    background: #23847e;
}

.overall-column.active-tab {
    position: relative;
}

.tab-content {
    display: none;
    animation: fadeIn 0.2s ease;
}

.tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tab-content h3 {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #444;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.tab-score-display {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.tab-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5em;
    background: #f8f8f8;
    border-radius: 6px;
    font-size: 0.95rem; /* Increased size to match prototype */
    color: #555;
    width: 100%; /* Stretch full width */
    box-sizing: border-box; /* Include padding in width */
}

.detail-row .detail-value {
    font-weight: 700;
    color: #333;
}

/* Inactive tabs get slight opacity to make active one pop */
.skill-column:not(.active-tab),
.overall-column:not(.active-tab) {
    opacity: 0.7;
}

.skill-column:not(.active-tab):hover,
.overall-column:not(.active-tab):hover {
    opacity: 0.9;
}

/* Make detail-row clickable links */
.detail-row {
    text-decoration: none;
    color: #555;
    transition: background 0.1s;
}
.detail-row:hover {
    background: #e8e8e8;
    cursor: pointer;
}

/* Task Dropdown Styles */
.task-dropdown {
    margin-bottom: 20px;
    width: 100%;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.task-dropdown-summary {
    list-style: none;
    user-select: none;
    border: 1px solid #eee;
}

.task-dropdown-summary::-webkit-details-marker {
    display: none;
}

.task-dropdown-header {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

.task-dropdown-title {
    font-weight: 700;
    color: #333;
    font-size: 1.05rem;
}

/* Adjustments when task-dropdown is placed inside exercise-header alongside badges */
.exercise-header {
    align-items: center;
}

.exercise-header .task-dropdown {
    margin-bottom: 0;
    margin-right: 15px;
    margin-left: 0;
    flex: 1;
    width: auto;
    max-width: none;
    position: relative;
    box-shadow: none;
}

.exercise-header .task-dropdown-summary {
    /* box-shadow: 0 0 5px 1px rgb(73, 188, 202), 0 0 10px rgb(73, 188, 202); */
    box-shadow: 0 0 1px 1px rgb(73, 188, 202), 0 0 2px rgb(73 188 235);
    border-radius: 6px;
    padding: 5px 6px;
    border: 1px solid rgb(73, 188, 202);
}

.exercise-header .task-dropdown-title {
    font-size: 1rem;
}

.dropdown-arrow {
    display: flex;
    align-items: center;
    color: #999;
    transition: transform 0.2s ease;
}

.task-dropdown[open] .dropdown-arrow {
    transform: rotate(180deg);
}

.task-dropdown summary:focus {
    outline: none;
}

.task-dropdown[open] {
    border: 1px solid #ddd;
    padding-bottom: 4px;
}

.task-dropdown[open] > .task-dropdown-summary {
    border: none;
    border-bottom: 1px solid #eee;
    margin-bottom: 8px;
    border-radius: 6px 6px 0 0;
}

/* Override open styles for the header variant to act like a floating menu */
.exercise-header .task-dropdown[open] {
    border: none;
    padding-bottom: 0;
}

.exercise-header .task-dropdown[open] > .task-dropdown-summary {
    border: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    margin-bottom: 0;
    border-radius: 6px;
}

.task-dropdown-details {
    margin-top: 8px;
    padding: 0 4px 8px;
}

/* Make header dropdown details float above the content */
.exercise-header .task-dropdown-details {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    z-index: 100;
    padding: 8px 4px;
    margin-top: 0;
}

/* Highlight Current Task */
.current-task-highlight {
    background-color: #e8f0fe !important;
    border-left: 3px solid #4285f4;
    cursor: default;
}
.current-task-highlight span {
    color: #1a73e8;
    font-weight: bold;
}
.current-task-highlight:hover {
    background-color: #e8f0fe !important;
}

/* Overall Content Styles */
.overall-content-container {
    display: flex;
    flex-direction: column;
    gap: 0.8em;
}

.overall-content-heading {
    margin: 0;
    margin-bottom: 2px;
}

.speaking-heading {
    color: #7b5ea7;
}

.writing-heading {
    color: #d4a018;
}

.reading-heading {
    color: #c03030;
}

.listening-heading {
    color: #2a9a93;
}

/* Exercise Header Badges */
.exercise-header-badges {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Fix double borders on exercise container when inside tab-content-area */
#tab-exercise .container {
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    max-width: none;
}

/* Responsive adjustments for small screens */
@media (max-width: 500px) {
    .arch .score {
        font-size: 1em;
    }
    .arch .label-inside {
        font-size: 0.8em;
    }
    .overall-column .arch-bottom .score {
        font-size: 0.9em;
    }
    .overall-column .arch .label-inside .brand {
        font-size: 1.4em;
    }
    .overall-column .arch .label-inside .score-label {
        font-size: 0.9em;
    }
}