/*
 * AccessChangeLines (js/components/access-change-lines.js) — the lines an application's owner
 * answers when an access review asks them to make changes: one card per change, "Done" or
 * "Cannot complete". Rendered on the emailed-link portal (respond-task.html) and on the in-app
 * task page (guest-task-detail), so it carries its own measure and takes every colour from the
 * base.css tokens.
 *
 * Linked globally by both hosts (never by a route), because the component is a window global.
 */

.acl { margin: 16px 0; }

.acl-summary {
    margin: 0 0 12px;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.acl-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.acl-line {
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-card);
}

.acl-line-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
}

.acl-line-title {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

/* How a change has to be made, when that needs saying (the server's sentence). */
.acl-advice {
    margin: 6px 0 0;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.acl-line-meta {
    margin: 6px 0 0;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

/* The state of a line, as a word. Colour reports the state; the word carries it without colour. */
.acl-chip {
    flex: 0 0 auto;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    color: var(--text-secondary);
    background: var(--bg-secondary);
}
.acl-chip--confirmed { color: var(--color-success-text); background: var(--tint-success); }
.acl-chip--waiting { color: var(--color-warning-text); background: var(--tint-warning); }
.acl-chip--blocked { color: var(--color-danger-text); background: var(--tint-danger); }

.acl-outcome {
    margin: 12px 0 0;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.acl-answer { margin-top: 14px; }

.acl-label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
}
.acl-label-hint { font-weight: 400; color: var(--text-muted); }

.acl-note {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 72px;
    padding: 10px 12px;
    font: inherit;
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    resize: vertical;
}
.acl-note:focus-visible,
.acl-file:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
    border-color: var(--color-primary);
}
.acl-note[aria-invalid="true"] { border-color: var(--color-danger-text); }

.acl-proof { margin-top: 12px; }
.acl-file {
    display: block;
    max-width: 100%;
    font: inherit;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}
.acl-proof-status {
    margin: 6px 0 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}
.acl-proof-status--error { color: var(--color-danger-text); }

.acl-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}
/* A touch target a thumb can hit on the emailed-link page. */
.acl-actions .btn { min-height: 44px; }

.acl-error {
    margin: 10px 0 0;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-danger-text);
}

.acl-all-done {
    margin: 16px 0 0;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--tint-success);
    color: var(--text-primary);
    font-size: var(--text-sm);
    line-height: 1.5;
}