/*
 * VEDA Education: the X-ray's screens in the framework's application shell.
 * Copyright © 2026 the VEDA Education founders. All rights reserved.
 * Proprietary and confidential. No licence is granted to copy, modify or distribute this file.
 *
 * Built on web-framework's own classes (ti-page, ti-card, ti-stat, ti-tag) and its theme variables, so both of its
 * themes apply. Only what the framework has no class for is here: tables, and the team page's layout.
 */

.veda-home-cards {
    margin-top: 18px;
}

/* The framework pads a card's rows (ti-card-row); these cards hold their content directly, with the same padding. */
.veda-home-cards > .ti-card,
.veda-team .ti-card {
    padding: 18px 20px;
}

.veda-home-card-title,
.veda-team-title {
    margin: 0 0 6px;
    font-size: 1.05rem;
    font-weight: 650;
    color: var(--fg-primary);
}

.veda-home-card-text,
.veda-team-note {
    margin: 0 0 14px;
    color: var(--fg-secondary);
    font-size: 0.92rem;
    line-height: 1.45;
}

.veda-team-head {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.veda-team-tools,
.veda-recent-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.veda-recent-head .veda-team-title {
    margin: 0;
}

.veda-code-search {
    max-width: 180px;
}

.veda-code {
    font-family: var(--font-mono);
    font-weight: 600;
    letter-spacing: 0.06em;
}

.veda-team-body {
    display: grid;
    gap: 16px;
    margin-top: 16px;
}

.veda-team-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
}

.veda-strong {
    font-weight: 600;
    color: var(--fg-primary);
}

.veda-table-wrap {
    overflow-x: auto;
}

.veda-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.veda-table th {
    text-align: left;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-tertiary);
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.veda-table td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--border-soft);
    color: var(--fg-secondary);
    vertical-align: middle;
}

.veda-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.veda-table tbody tr:last-child td {
    border-bottom: none;
}

.veda-variants {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.veda-variant {
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--bg-sunken);
}

.veda-variant-figures {
    margin-top: 4px;
    color: var(--fg-primary);
    font-variant-numeric: tabular-nums;
}

.veda-try {
    display: grid;
    gap: 10px;
}

.veda-try-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.veda-try-links {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* The review queue: the list beside the solution on a wide screen, above it on a narrow one. */

.veda-review-body {
    display: grid;
    gap: 16px;
    margin-top: 16px;
    grid-template-columns: minmax(240px, 1fr) 3fr;
    align-items: start;
}

@media (max-width: 960px) {
    .veda-review-body {
        grid-template-columns: 100%;
    }
}

.veda-review-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.veda-review-entry {
    display: grid;
    gap: 2px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: transparent;
    color: var(--fg-secondary);
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.veda-review-entry[aria-pressed="true"] {
    border-color: var(--fg-primary);
    background: var(--bg-sunken);
}

.veda-review-meta {
    font-size: 0.82rem;
    color: var(--fg-tertiary);
}

.veda-review-solution {
    display: grid;
    gap: 18px;
}

.veda-review-stem {
    margin: 6px 0;
    font-size: 1.05rem;
    color: var(--fg-primary);
}

.veda-review-work {
    display: grid;
    gap: 12px;
}

.veda-review-canvas svg,
.veda-review-photo {
    display: block;
    width: 100%;
    max-width: 720px;
    height: auto;
    border-radius: 10px;
}

.veda-review-canvas .figure {
    margin: 0;
    max-width: 520px;
}

.veda-review-steps {
    margin: 0 0 12px;
    padding-left: 22px;
    color: var(--fg-secondary);
    line-height: 1.5;
}

.veda-review-field {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
}

.veda-review-points {
    display: flex;
    gap: 6px;
}

.veda-review-point {
    min-width: 44px;
}

.veda-review-point[aria-pressed="true"] {
    background: var(--fg-primary);
    color: var(--bg-surface, #fff);
}

.veda-review-check {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    color: var(--fg-secondary);
    font-size: 0.92rem;
}

.veda-review-note {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: transparent;
    color: var(--fg-primary);
    font: inherit;
}

.veda-review-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* figure.js's drawing, as in the player: the ink follows the theme, the paper stays paper. */

.veda-review .fig-line {
    stroke: var(--fg-primary);
    stroke-width: 2.4;
    stroke-linecap: round;
    fill: none;
}

.veda-review .fig-dashed {
    stroke-dasharray: 7 6;
    stroke-width: 1.8;
}

.veda-review .fig-arc,
.veda-review .fig-mark {
    stroke: #3553d1;
    stroke-width: 2;
    fill: none;
}

.veda-review .fig-dot {
    fill: var(--fg-primary);
}

.veda-review .fig-label {
    fill: var(--fg-primary);
    font-size: 21px;
}

.veda-review .fig-angle-label {
    fill: #3553d1;
}

.veda-review .figure-note {
    font-size: 0.85rem;
    color: var(--fg-tertiary);
}

.veda-review .pad-paper {
    fill: #fff;
}

.veda-review .pad-grid {
    fill: none;
    stroke: #c9d6ee;
    stroke-width: 1;
}

.veda-review .pad .fig-line,
.veda-review .pad .fig-dot,
.veda-review .pad .fig-label {
    stroke: #1f2633;
    fill: #1f2633;
}

.veda-review .pad .fig-line {
    fill: none;
}

.veda-review .pad .fig-label {
    stroke: none;
}

.veda-review .pad-stroke {
    fill: none;
    stroke: #1d3a9c;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}