/* removed.html — page-specific styles. Shared rules live in app.css. */

.locations-table { position: relative; }
.locations-table table { min-width: 820px; }
.removed-date { color: var(--removed-text); font-weight: 500; }
.removed-date small { color: var(--removed-text); opacity: 0.75; }
td .links { display: grid; gap: 0.15rem; font-size: 13px; }

/* On a phone each row becomes a card: the header row goes away and every
   cell carries its column name from data-label (set in js/pages/removed.js). */
@media (max-width: 720px) {
    .locations-table table { min-width: 0; width: 100%; }
    .locations-table thead { display: none; }
    .locations-table tbody tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.2rem 0.75rem;
        padding: 0.75rem 0.9rem;
        border-bottom: 1px solid var(--border);
    }
    .locations-table tbody tr:hover > td { background: transparent; }
    .locations-table tbody td { display: block; padding: 0; border: 0; }
    .locations-table tbody td::before {
        content: attr(data-label);
        display: block;
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text-3);
        margin-bottom: 0.1rem;
    }
    .locations-table tbody td[data-label="Name"] { grid-column: 1 / -1; font-size: 15px; }
    .locations-table tbody td[data-label="Name"]::before { display: none; }
    .locations-table tbody td[data-label="Address"] { grid-column: 1 / -1; }
    .locations-table tbody td[data-label="Links"] { grid-column: 1 / -1; }
    .locations-table tbody td[data-label="Links"] .links { display: flex; gap: 1rem; }
    .locations-table tbody td.loading { grid-column: 1 / -1; }
    .locations-table tbody td small { display: inline; margin-left: 0.3rem; }
    .locations-table tbody td br { display: none; }
    .locations-table tbody td:not([data-label])::before { display: none; }
}