/* My Activities — the practitioner's list.
   Module rules only; shared hub controls and buttons keep their classes.
   The cell token family is the Daily Board's, so the two surfaces teach
   each other; only the done token differs, because a list row has no room
   for the board's time pill. */

.ma-container {
    display: block;
}

/* The list runs the width of the workspace, inside the standard gutter, so
   the three tabs of one module agree: the Daily Board grid is full width
   and this list was capped at 900px, which made the fastest read on the
   module the narrowest one (Risto, 2026-08-11). */
.ma-wrap {
    max-width: 100%;
    padding: 4px 24px 40px;
}

.ma-group {
    margin-bottom: 24px;
}

.ma-ghead {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 0 4px 8px;
    border-bottom: 1px solid var(--ink-line-strong);
}

.ma-ghead h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.86rem;
    font-weight: 650;
}

.ma-area {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    color: var(--text-tertiary);
    font-size: 0.62rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ma-gcount {
    margin-left: auto;
    color: var(--text-secondary);
    font-size: 0.72rem;
}

.ma-gcount b {
    color: var(--accent);
    font-weight: 750;
}

/* A row is the same height whether it is waiting or closed, so the list
   keeps its rhythm instead of growing a button tray under each open item. */
.ma-row {
    display: grid;
    grid-template-columns: 18px 190px minmax(0, 1fr) 132px 176px;
    align-items: center;
    gap: 14px;
    height: 52px;
    padding: 0 4px;
    border-bottom: 1px solid var(--ink-line);
}

.ma-row:hover {
    background: var(--ink-wash);
}

.ma-player {
    color: var(--text-primary);
    font-size: 0.86rem;
    font-weight: 650;
}

.ma-player span {
    margin-left: 8px;
    color: var(--text-tertiary);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* The metadata cell: the planning detail while the row is open, the reason
   once it is closed. The reason never queues behind the planning text,
   where the ellipsis would eat it. One value per element, separated by
   space and weight rather than by a mark — the run was joined with middle
   dots, which this app does not use. */
.ma-meta {
    display: flex;
    align-items: baseline;
    gap: 14px;
    overflow: hidden;
    color: var(--text-tertiary);
    font-size: 0.75rem;
    white-space: nowrap;
}

.ma-meta > span {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The slot leads the run, so it carries the weight and the rest reads as
   detail behind it. */
.ma-meta > span:first-child {
    color: var(--text-secondary);
    font-weight: 650;
}

.ma-reason {
    color: var(--text-secondary);
}

.ma-who {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
}

/* The everyone scope names each row's practitioner: its own element ahead
   of the planning run, separated by space and weight, never a dot. */
.ma-owner {
    margin-right: 12px;
    color: var(--text-secondary);
    font-weight: 650;
}

/* An Individual Testing row names its test the same way: the heading says
   the type, the row says which test. */
.ma-test {
    margin-right: 12px;
    color: var(--text-secondary);
    font-weight: 650;
}

.ma-state {
    display: flex;
    align-items: baseline;
    gap: 8px;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 0.74rem;
    white-space: nowrap;
}

.ma-state > span {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Who closed it sits behind the word, never beside it as an equal. */
.ma-state-by {
    color: var(--text-tertiary);
    font-weight: 400;
}

.ma-state-wait {
    color: var(--accent);
    font-weight: 650;
}

.ma-state-void {
    color: var(--text-tertiary);
}

/* Both actions are row controls, so both wear the quiet pill: the accent
   fill belongs to a page's primary action, not to one physio task. Done
   carries the accent as text, because it is the common case, and takes the
   fill only under the pointer. The controls sat at a 44px touch target and
   swallowed the 52px row; nobody works this surface on a phone, so the
   target is gone and the row is compact (Risto, 2026-08-11). */
.ma-act {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
/* The board's family, with a filled done token: a list row has no room for
   the board's time pill, and the row states the time in words. */
.ma-tok-done {
    border: 0;
    background: var(--accent);
}

.ma-empty {
    padding: 40px 24px;
    color: var(--text-tertiary);
    font-size: 0.8rem;
    text-align: center;
}

/* The controls share the toolbar's centre lane with the other views. */
.ma-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* ── The exception modal ── */

.ma-modal {
    display: flex;
    flex-direction: column;
    max-width: 480px;
    overflow: hidden;
}

.ma-modal-head {
    padding: 15px 18px 14px;
    border-bottom: 1px solid var(--ink-line);
}

.ma-modal-head h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 700;
}

.ma-modal-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
}

.ma-modal-head p {
    margin: 3px 0 0;
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.ma-modal-body {
    padding: 16px 18px;
}

.ma-choice {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}
.ma-field {
    display: grid;
    min-width: 0;
}

.ma-field > span:first-child {
    display: block;
    margin-bottom: 5px;
    color: var(--text-tertiary);
    font-size: 0.62rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ma-field [aria-invalid="true"] {
    border-color: var(--accent);
}

.ma-err {
    display: none;
    margin-top: 5px;
    color: var(--accent);
    font-size: 0.7rem;
}

.ma-err.is-on {
    display: block;
}

.ma-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 13px 18px;
    border-top: 1px solid var(--ink-line);
    background: var(--surface-raised);
}


/* One radio card per outcome (decision 2, 2026-08-13): the mark says what is
   chosen and the ink step carries the card. No accent border on a row. */
.ma-choice-card {
    flex: 1;
    display: flex;
    align-items: flex-start;
    min-height: 56px;
    padding: 10px 12px;
    border: 1px solid var(--ink-line);
    border-radius: var(--radius-md);
    background: transparent;
    cursor: pointer;
}

.ma-choice-card:hover {
    background: var(--ink-wash);
}

.ma-choice-card:has(input:checked) {
    background: var(--ink-wash-strong);
}