/* ==========================================================================
   /method pages
   ========================================================================== */

.method-page {
    --week-ok: #6096ba;
    --week-ink: #232f3e;
    --week-muted: #777;
    --week-line: #e6e6e6;
    --week-soft: #f6f7f9;
    color: var(--week-ink);
}

.method-page section {
    margin-bottom: 1.5rem;
}

.method-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--week-line);
}

.method-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(8rem, 14rem) auto;
    align-items: center;
    gap: .5rem 1.5rem;
    padding: .75rem .5rem;
    border-bottom: 1px solid var(--week-line);
}

.method-item:hover {
    background: var(--week-soft);
}

.method-item__main {
    min-width: 0;
}

.method-item__name {
    display: block;
    overflow: hidden;
    color: inherit;
    font-weight: 600;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.method-item__name:hover {
    text-decoration: underline;
}

.method-item__used {
    color: var(--week-muted);
    font-size: .8rem;
}

.method-item__count {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    justify-content: start;
    gap: .25rem .35rem;
    color: var(--week-muted);
    font-size: .8rem;
}

.method-item__count strong {
    color: var(--week-ink);
    font-variant-numeric: tabular-nums;
}

.method-item__bar {
    grid-column: 1 / -1;
    height: 5px;
}

.method-item__actions a {
    padding: .25rem .5rem;
    border-radius: 4px;
    color: var(--week-muted);
    font-size: .8rem;
    text-decoration: none;
}

.method-item__actions a:hover {
    background: #e6e6e6;
    color: var(--week-ink);
}

.method-danger form {
    margin: .5rem 0 0;
}

@media screen and (max-width: 35.5em) {
    .method-item {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .method-item__count {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}