/* people and access — this screen owns this file. See the comment beside the <link> in index.html.
   Rules that two screens want belong in style.css, not duplicated here.

   Everything below is written for a 375px phone first. The one hard rule: the PAGE never scrolls
   sideways. Names are typed by people and ports are numbers, so every row is a wrapping flex line and
   every sentence breaks inside a long word rather than pushing the document wider than the window.

   The other thing this file is doing on purpose: making the three ROUTES to an application tell
   themselves apart without relying on colour. Each mark carries its own word ("owner", "bundle: …",
   "direct grant") and its own border treatment, so a monochrome screen and a colour-blind reader get
   the same distinction a colour screen does — which matters here, because acting on the wrong one is
   the exact mistake this screen exists to prevent. */

.people {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* The bar with the way back out. First in the markup as it is on the screen. */
.people__bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* A refusal. Never hidden and never reworded: it carries the platform's own sentence. */
.people__problem {
    margin: 0;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--danger);
    border-left-width: 5px;
    border-radius: var(--radius-sm);
    background: var(--danger-weak);
    color: var(--danger);
    overflow-wrap: anywhere;
}

/* What the last write really did, in the platform's own words. It stays until the next one. */
.people__change {
    margin: 0;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-strong);
    border-left-width: 5px;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    overflow-wrap: anywhere;
}

/* The rule of the screen, standing text above everything: three routes, and they are not the same
   thing. Above rather than beside, for the reason the access screen states — a warning that arrives
   next to the mistake is not a warning. */
.people__rule {
    margin: 0;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--notice);
    border-radius: var(--radius-sm);
    background: var(--notice-weak);
    color: var(--text);
    overflow-wrap: anywhere;
}

/* An account reached one way whose only route is about to go, and the platform account's "this list
   is not what it can see". Loud, because both are read wrongly by default. */
.people__alarm {
    margin: 0.5rem 0;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--notice);
    border-left-width: 5px;
    border-radius: var(--radius-sm);
    background: var(--notice-weak);
    overflow-wrap: anywhere;
}

.people__body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.people__section {
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.people__title {
    margin: 0 0 0.35rem;
    overflow-wrap: anywhere;
}

.people__subtitle {
    margin: 0.75rem 0 0.35rem;
    overflow-wrap: anywhere;
}

.people__hint,
.people__caveat {
    margin: 0.3rem 0;
    font-size: 0.85rem;
    max-width: 46rem;
    overflow-wrap: anywhere;
}

.people__hint {
    color: var(--text-muted);
}

/* What a good-looking answer does NOT establish: that revoking this route takes the access away.
   Drawn beside the reasons rather than instead of them. */
.people__caveat {
    color: var(--notice);
}

/* The consequence of a press whose effect is invisible from where the press happens. */
.people__danger {
    margin: 0.5rem 0;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--danger);
    border-radius: var(--radius-sm);
    background: var(--danger-weak);
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ people */

.people__list,
.people__accounts,
.people__bundles {
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.people__person,
.people__account,
.people__bundle {
    padding: 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
}

/* The person whose explanation is open. A left edge rather than a background, so the row still reads
   as one of a list rather than as a different kind of thing. */
.people__person--chosen {
    border-left: 4px solid var(--accent);
}

.people__personhead,
.people__bundlehead,
.people__accounthead {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
}

.people__name,
.people__appname {
    overflow-wrap: anywhere;
    /* A long name wraps inside the row instead of widening the page. It cannot be ellipsised: two
       people called "alexandra-…" would be one name on the screen. */
    min-width: 0;
}

/* A wrapping row of small labelled numbers. Four counts rather than one total, on purpose. */
.people__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    margin: 0.4rem 0;
    font-size: 0.85rem;
}

.people__pair {
    display: inline-flex;
    gap: 0.3rem;
    align-items: baseline;
    overflow-wrap: anywhere;
}

.people__key {
    color: var(--text-muted);
}

.people__val {
    font-variant-numeric: tabular-nums;
}

.people__pair--strong .people__val {
    font-weight: 700;
    color: var(--accent);
}

/* ------------------------------------------------------------------ the three routes */

.people__reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.4rem 0;
}

/* One route, drawn as a mark that says which route it is. The word is inside it — never a bare dot,
   never colour alone: an administrator picking the wrong one to revoke is the failure this whole
   screen is built against. */
.reason {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

/* Solid: the owner answers for the application, and this route is not revoked here at all. */
.reason--owner {
    border-color: var(--accent);
    background: var(--accent-weak);
    color: var(--accent);
    font-weight: 600;
}

/* Dashed: a bundle is a set, so taking it back reaches beyond this one account. */
.reason--bundle {
    border-style: dashed;
    border-color: var(--notice);
    background: var(--notice-weak);
    color: var(--notice);
}

/* Dotted: one account, one person, and nobody else is touched. */
.reason--direct {
    border-style: dotted;
    border-width: 2px;
    border-color: var(--text-muted);
    color: var(--text);
}

/* ------------------------------------------------------------------ bundles */

/* What is in a bundle, and who holds it: two wrapping rows of chips rather than two tables. A table
   of two columns is what forces a phone to scroll sideways, and there is nothing to align here. */
.people__members,
.people__holders {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.4rem 0;
}

.people__member,
.people__holder {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.4rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    max-width: 100%;
}

/* ------------------------------------------------------------------ forms */

.people__form {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border);
}

/* The two one-line forms inside a bundle. STACKED by default and side by side only when there is
   room: at 375px a dropdown and a button on one line leave the dropdown too narrow to read an
   application name in, and this screen is written phone first. */
.people__form--inline {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

@media (min-width: 34rem) {
    .people__form--inline {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
    }

    /* Capped: a picker that grew to the width of a desktop would push its button to the far edge,
       a hand's width from the thing it acts on. */
    .people__form--inline .field {
        flex: 1 1 12rem;
        max-width: 28rem;
        min-width: 0;
    }
}

/* Why a picker is empty and its button will not act. It takes a line of its own under the whole row
   rather than sitting inside the field: it is about the row, and inside the field it would stretch
   the field and leave the button aligned against the last line of a paragraph. */
.people__why {
    flex-basis: 100%;
    margin: 0;
}

/* A dropdown of application names can be far wider than a phone. It is capped at the width of its
   container so the PAGE never grows: the browser's own popup handles the overflow. */
.people__select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0.45rem 0.5rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
}

.people__select:disabled {
    color: var(--text-muted);
    background: var(--surface-sunken);
}