/* app-folder-access.css
   The folder access + sharing dialog rendered by app-folder-access.js.

   DELIBERATELY TINY. The dialog reuses what already exists rather than
   restyling it:

     dialog shell, backdrop, open animation   .c-confirm        (app-confirm.css)
     panel surface + footer action row        .c-confirm__panel / __actions
     buttons                                  .c-button--solid / --ghost
     labelled text / email / date / textarea  .c-prompt__field / __label / __input
     the three role options                   .app-radio-group / .app-radio
     initials circle                          .c-avatar         (app-c-ui.css)
     "Denied" badge                           .c-readout__badge--danger
     layout, spacing, muted text              u-* utilities

   What's left is the one thing utilities genuinely cannot express: a
   four-track row grid whose middle column truncates. Everything else in
   this file exists only because it depends on that grid.

   Consumes semantic tokens only. */

@layer components {

    /* The dialog carries BOTH .c-confirm and .c-access. .c-confirm supplies the
       whole shell for free — native <dialog> reset, backdrop + blur, the open
       animation, centering, max-width — and its `.c-confirm > .c-confirm__actions`
       rule styles our footer, since our actions div is a direct child.

       The one part not reused is .c-confirm__panel: it's a two-column
       `auto 1fr` grid built for an icon beside a message, and this dialog has
       no icon column. Hence this rule and no other. */
    .c-access__panel {
        background: var(--color-surface);
        color: var(--color-ink);
        padding: var(--space-5) var(--space-5) var(--space-4);
        border-start-start-radius: var(--radius-lg);
        border-start-end-radius: var(--radius-lg);
    }

    /* The access list's row: avatar · who · role · kebab.
       Not .c-dm__row — that's a six-track document-list grid (name, title,
       type, description, modified, size) and shares no columns with this.

       minmax(0, 1fr) on the "who" track, not 1fr: a grid item's default
       min-width is auto, which refuses to shrink below its content, so a
       long display name would push the role control out of the dialog
       instead of ellipsing. */
    .c-access__row {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto auto;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-3) 0;
        border-bottom: 1px solid var(--color-line);
    }

    .c-access__row:last-child {
        border-bottom: none;
    }

    /* The grant face's suggestion rows are real <button>s — they must be
       keyboard-reachable and Enter-activatable, which a div with a click
       handler is not. That brings UA button chrome (border, background,
       centred text, its own font) which has to be cleared for the row to
       look like the rows above it. */
    button.c-access__row {
        inline-size: 100%;
        background: none;
        border: none;
        border-bottom: 1px solid var(--color-line);
        font: inherit;
        text-align: left;
        cursor: pointer;
    }

    button.c-access__row:hover {
        background: var(--color-surface-alt);
    }

    /* Name over email/provenance. min-width:0 repeats the grid-track fix at
       the flex level so the children can actually ellipse. */
    .c-access__who {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
        min-inline-size: 0;
    }

    .c-access__name,
    .c-access__meta {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .c-access__name {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        color: var(--color-ink);
        font-size: var(--fs-ui);
    }

    .c-access__meta {
        color: var(--color-ink-mute);
        font-size: var(--fs-ui-sm);
    }

    /* Inherited rows show static text where editable rows show a <select>.
       Right-aligned so both read down the same edge. */
    .c-access__role {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: var(--space-1);
        text-align: right;
    }

    /* The scrolling region. Capped so a folder shared with fifty people
       still leaves the footer buttons on screen. */
    .c-access__rows {
        max-block-size: 45vh;
        overflow-y: auto;
    }
}