/* 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;
}

.ma-wrap {
    max-width: 900px;
    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 {
    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. */
.ma-meta {
    overflow: hidden;
    color: var(--text-tertiary);
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.ma-state {
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 0.74rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

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

/* Done is filled and carries the common case; the exception path is quiet.
   Both stay at 44px, because this is used on a phone browser. */
.ma-act {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.ma-done {
    min-height: 44px;
    min-width: 96px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--text-inverse);
    font-family: inherit;
    font-size: 0.79rem;
    font-weight: 700;
    cursor: pointer;
}

.ma-done:hover {
    background: var(--accent-hover);
}

.ma-not {
    min-height: 44px;
    padding: 0 13px;
    border: 1px solid var(--ink-line-strong);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.75rem;
    cursor: pointer;
}

.ma-not:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}

.ma-undo {
    min-height: 44px;
    padding: 0 8px;
    border: 0;
    background: transparent;
    color: var(--text-tertiary);
    font-family: inherit;
    font-size: 0.73rem;
    text-decoration: underline;
    cursor: pointer;
}

.ma-undo:hover {
    color: var(--text-primary);
}

/* 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-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-choice button {
    flex: 1;
    min-height: 56px;
    padding: 8px 12px;
    border: 1px solid var(--ink-line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-field);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
}

.ma-choice button small {
    display: block;
    margin-top: 3px;
    color: var(--text-tertiary);
    font-size: 0.68rem;
    font-weight: 400;
}

.ma-choice button.is-chosen {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.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);
}

.ma-modal-foot .btn {
    min-height: 44px;
}