/* ==========================================================================
   Travian Tools: Fields tab (#tab-fields)
   Field search, coordinate analyzer, best farming spots.
   Markup: index.html (#tab-fields). Render: app.js (displayFieldsResults,
   displayAnalyzeResults, findBestSpots, displayBestSpotsResults).
   Tokens only (css/tokens.css). Generic components come from style.css.
   ========================================================================== */

/* ---- Card structure ------------------------------------------------------ */

/* Sub-blocks inside a tool card: grouped by air and one hairline, no frames */
#tab-fields .fields-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
}

#tab-fields .fields-block + .fields-block {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border);
}

#tab-fields .fields-block-title {
    margin: 0;
    color: var(--text);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
}

#tab-fields .fields-block-desc {
    margin: calc(var(--space-2) * -1) 0 0;
    color: var(--text-3);
    font-size: var(--text-sm);
    max-width: 75ch;
}

#tab-fields .fields-block > .form-grid,
#tab-fields .fields-block > .checkbox-group {
    margin: 0;
}

/* Slightly wider columns than .form-grid: range fields hold two inputs */
#tab-fields .fields-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

/* A lone field keeps the column width of its neighbours instead of stretching */
#tab-fields .fields-grid--fill {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
}

/* Card footer with the one primary action */
#tab-fields .fields-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}

/* Coordinate / formula text areas */
#tab-fields .fields-mono {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

/* ---- Advanced mode: formula editor + format help ------------------------- */

#tab-fields .fields-formula {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
}

#tab-fields .fields-formula > .field { margin: 0; }
#tab-fields .fields-formula .btn-row { margin-top: var(--space-1); }

@media (min-width: 1024px) {
    #tab-fields .fields-formula {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        gap: var(--space-6);
    }
}

/* Format help: native <details>, open by default, quiet inset surface */
#tab-fields details.fields-formula-help {
    padding: 0 var(--space-4);
    border-top: 0;
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: var(--text-sm);
}

#tab-fields details.fields-formula-help > summary {
    border-radius: var(--radius);
}

#tab-fields .fields-summary-title {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
}

#tab-fields .fields-summary-title .i { color: var(--text-3); }

#tab-fields .fields-formula-help code {
    background: var(--surface);
    font-size: var(--text-xs);
    white-space: nowrap;
}

#tab-fields .fields-formula-syntax {
    margin: 0 0 var(--space-3);
}

#tab-fields .fields-formula-syntax code {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}

#tab-fields .fields-formula-terms {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--space-2) var(--space-3);
    margin: 0;
}

#tab-fields .fields-formula-terms dt { padding-top: 1px; }
#tab-fields .fields-formula-terms dd { margin: 0; line-height: var(--leading-snug); }

#tab-fields .fields-formula-help ul {
    display: grid;
    gap: var(--space-1);
    margin: var(--space-1) 0 0;
    padding-left: 1.1em;
    line-height: var(--leading-snug);
}

#tab-fields .fields-formula-subtitle {
    margin: var(--space-4) 0 var(--space-1);
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}

#tab-fields .fields-note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
    color: var(--text);
    font-weight: var(--weight-medium);
    line-height: var(--leading-snug);
}

#tab-fields .fields-note .i {
    margin-top: 2px;
    color: var(--accent);
}

@media (max-width: 480px) {
    #tab-fields .fields-formula-terms { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
    #tab-fields .fields-formula-terms dd { margin-bottom: var(--space-2); }
}

/* ---- Result cells --------------------------------------------------------- */

#tab-fields .fields-table .coords { white-space: nowrap; }

#tab-fields .fields-value {
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
}

#tab-fields .fields-value--strong {
    color: var(--text);
    font-size: var(--text-base);
}

#tab-fields .fields-score {
    color: var(--text);
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
}

#tab-fields .fields-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--text-2);
    font-size: var(--text-xs);
    white-space: nowrap;
}

/* Rank: top three get a trophy on a soft accent pill */
#tab-fields .fields-rank {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: 24px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-full);
    color: var(--text-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

#tab-fields .fields-rank--top {
    background: var(--accent-soft);
    color: var(--accent-text);
}

/* Formula mode: one line per formula with its oasis count */
#tab-fields .fields-formula-counts {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--text-xs);
    white-space: nowrap;
}

#tab-fields .fields-formula-counts .num { font-weight: var(--weight-semibold); }

/* Analyzer: expandable per-type breakdown */
#tab-fields .fields-details-row > td,
#tab-fields .fields-details-row:hover > td {
    padding: var(--space-3) var(--space-4);
    background: var(--surface-2);
}

#tab-fields .fields-type-groups {
    display: grid;
    gap: var(--space-2);
}

#tab-fields .fields-type-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
}

#tab-fields .fields-type-group-title {
    min-width: 72px;
    color: var(--text-3);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
}

#tab-fields .fields-details-row .bonus-chip { background: var(--surface); }

/* Empty and loading rows inside a result table */
#tab-fields .fields-empty-row > td,
#tab-fields .fields-empty-row:hover > td,
#tab-fields .fields-loading-row > td,
#tab-fields .fields-loading-row:hover > td {
    padding: 0;
    background: none;
}

#tab-fields .fields-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-8) var(--space-4);
    text-align: center;
}

#tab-fields .fields-progress .progress {
    max-width: 420px;
}

#tab-fields .fields-progress-title {
    color: var(--text);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
}

#tab-fields .fields-progress-value {
    color: var(--text-2);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
}

/* ---- Stacked tables (below 900px) --------------------------------------- */
@media (max-width: 899px) {
    /* No sortable columns here: the chip bar of the header would be empty */
    #tab-fields .fields-table thead { display: none; }

    /* No row checkbox: drop the left gutter reserved for it */
    #tab-fields .fields-table.table--stack tbody tr {
        padding-left: var(--space-4);
    }

    #tab-fields .fields-table.table--stack td.col-actions { text-align: left; }

    /* Map / analyze button shares the last row with its neighbour value */
    #tab-fields #fields-results-table td.col-actions,
    #tab-fields #best-spots-results-table td.col-actions {
        grid-column: auto;
        align-self: end;
        justify-self: end;
    }

    /* Analyzer card: coords + radius, then the four counts in one row */
    #tab-fields #analyze-results-table tbody tr.fields-analyze-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    #tab-fields #analyze-results-table td.col-coords { grid-column: span 3; }

    #tab-fields #analyze-results-table td.col-radius {
        justify-self: end;
        text-align: right;
    }

    #tab-fields .fields-details-row,
    #tab-fields .fields-details-row:hover {
        background: var(--surface-2);
    }

    #tab-fields .fields-details-row > td,
    #tab-fields .fields-details-row:hover > td {
        padding: 0;
        background: none;
    }

    #tab-fields .fields-empty-row,
    #tab-fields .fields-empty-row:hover,
    #tab-fields .fields-loading-row,
    #tab-fields .fields-loading-row:hover {
        background: none;
    }

    #tab-fields .fields-meta { white-space: normal; }
}

/* ---- Reduced motion --------------------------------------------------------
   Durations collapse globally via tokens; the progress fill uses --dur-slow. */
@media (prefers-reduced-motion: reduce) {
    #tab-fields .fields-progress .progress > span { transition: none; }
}