/* A row's own actions, as one control that opens only what applies to it.
   Nothing disabled is ever shown: an action a row cannot take is not in its
   menu, and a row with no actions has no button. Proposed for wwww once it
   has a second consumer. */

.row-menu {
    position: relative;
}

.row-menu > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    list-style: none;
    cursor: pointer;
}

.row-menu > summary::-webkit-details-marker {
    display: none;
}

.row-menu > summary:hover,
.row-menu[open] > summary {
    background: var(--surface-hover);
    color: var(--text);
}

.row-menu > summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Over the row, not in it: wwww 119417a dropped .panel's overflow clip,
   which is what used to cut off a menu on the last row. */
.row-menu-list {
    display: flex;
    position: absolute;
    z-index: 5;
    top: calc(100% + 0.25rem);
    right: 0;
    flex-direction: column;
    gap: 0.15rem;
    width: max-content;
    padding: 0.35rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
    box-shadow: 0 12px 32px rgb(0 0 0 / 0.45);
}

.row-menu-list .btn {
    justify-content: flex-start;
    border-color: transparent;
    background: transparent;
    text-align: left;
    white-space: nowrap;
}

.row-menu-list .btn:hover {
    background: var(--surface-hover);
}

/* A menu row is text with a hover, not a button: eight bordered boxes
   stacked down the screen is what the account menu looked like before.
   Proposed for wwww with .row-menu. */
.menu-list .btn {
    justify-content: flex-start;
    border-color: transparent;
    background: transparent;
    text-align: left;
}

.menu-list .btn:hover {
    background: var(--surface-hover);
}

/* Custom checkbox: the field template hides the native input and draws
   .check-box as the visual indicator. Keeps the .check flex container
   from www.css, which handles alignment and the pointer cursor. */
.check input[type="checkbox"],
.check input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.check-box {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.15rem;
    border: 1.5px solid var(--text-muted);
    border-radius: var(--radius-sm, 3px);
    background: transparent;
    transition: border-color 0.1s, background 0.1s;
}

.check input:checked + .check-box {
    border-color: var(--violet);
    background: var(--violet);
}

.check input[type="checkbox"]:checked + .check-box::after {
    content: "";
    display: block;
    width: 0.4rem;
    height: 0.65rem;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(-1px, -1px);
}

.check input[type="radio"] + .check-box {
    border-radius: 50%;
}

.check input[type="radio"]:checked + .check-box::after {
    content: "";
    display: block;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: #fff;
}

.check input:focus-visible + .check-box {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.check-text {
    line-height: 1.4;
}

@media (max-width: 40rem) {
    /* 48px, Material 3's target. www.css bumps .btn and .btn-icon for a
       thumb and never reaches this one, because it is a summary. */
    .row-menu > summary {
        width: 3rem;
        height: 3rem;
    }

    /* The row's own control belongs at the top right of the row it acts
       on. The phone layout otherwise gives it a line of its own under the
       badge, with empty space around it. */
    .list tr {
        position: relative;
    }

    .list td.cell-actions {
        position: absolute;
        top: 0.25rem;
        right: 0.25rem;
        padding: 0;
    }
}