/* ── settings ───────────────────────────────────────────────────────────
 *
 * screens/settings (and the platform console's, which draws the same tabs):
 * the questions down the side, the cards on the right, and one save bar at
 * the foot of a tab that edits.
 *
 * Its own file, as agent.css is: every name here is new, and
 * scripts/cssclash.php keeps it that way. The fields, the segmented choices
 * and the switches are shell.css's own (.xc-f, .xc-seg, .xc-switch), so a
 * settings screen and a form anywhere else in the product look like one
 * product.
 */

.xc-set {
    flex: 1;
    min-block-size: 0;
    display: flex;
    gap: 14px;
    padding: 0 16px 16px;
}

/* The platform console scrolls its whole content area, where the customer
   side scrolls one column. Settings wants the column — the save bar sticks
   to the foot of what scrolls, and in a box that never scrolls it sits at
   the end of the page instead — so on this screen the console's #main
   holds still and the column scrolls, as it does for a workspace. */
#main:has(> .xc-set) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.xc-set__main {
    flex: 1;
    min-inline-size: 0;
    min-block-size: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding-inline-end: 2px;
}

/* The cards and the save bar in one column, so the bar can stick to the foot
   of what scrolls.

   As wide as the room beside the menu: at 980px it stopped two thirds of the
   way across a laptop, and the activity log's columns were cut short with
   empty space next to them. Held only on a very large screen, where a line
   of text that long is harder to read than the space beside it is to look
   at. */
.xc-set__cards {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-inline-size: 1560px;
    min-block-size: 100%;
}

.xc-set__head {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 4px 2px 0;
}

.xc-set__head h2 {
    margin: 0;
    font-family: Poppins, system-ui, sans-serif;
    font-weight: 600;
    font-size: 21px;
    letter-spacing: -0.015em;
}

.xc-set__head p {
    margin: 0;
    font-size: 13.5px;
    color: rgba(var(--ink), .5);
    text-wrap: pretty;
}

/* ── a card ─────────────────────────────────────────────────────────── */

.xc-setcard {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.xc-setcard__head {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.xc-setcard__head h3 {
    margin: 0;
    font-family: Poppins, system-ui, sans-serif;
    font-weight: 600;
    font-size: 16.5px;
}

.xc-setcard__head p {
    margin: 0;
    font-size: 13px;
    color: rgba(var(--ink), .5);
    text-wrap: pretty;
}

/* A value that is shown and not edited, drawn in the place a field would
   be so the grid still lines up. */
.xc-in--static {
    display: flex;
    align-items: center;
    min-block-size: 44px;
    color: rgba(var(--ink), .7);
    background: rgba(var(--ink), .03);
    border: 1px dashed var(--line);
}

.xc-in--mono {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
}

/* Read-only for somebody who may not change the workspace: scoped to the
   cards, so a disabled field anywhere else keeps shell.css's own look. */
.xc-setcard .xc-in:disabled {
    color: rgba(var(--ink), .55);
    cursor: not-allowed;
}

.xc-setcard .xc-seg:has(input:disabled) { opacity: .6; }

.xc-setcard .xc-seg:has(input:disabled) label { cursor: not-allowed; }

.xc-setcopy {
    justify-content: space-between;
    gap: 10px;
    padding-block: 5px;
    padding-inline-end: 5px;
}

.xc-setcopy > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xc-setchip {
    align-self: flex-start;
    font-size: 12.5px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
    color: var(--acc);
    background: rgba(28, 28, 210, .09);
}

.xc-setchip--green {
    align-self: center;
    flex: none;
    color: var(--green);
    background: rgba(0, 168, 134, .12);
}

.xc-setnote {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(var(--ink), .55);
    text-wrap: pretty;
}

/* Support's address, wherever a question is likely (components/support-line). */
[data-support-email] a {
    color: rgb(var(--brand));
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;
}

[data-support-email] a:hover { text-decoration: underline; text-underline-offset: 3px; }

.xc-setnote--ok {
    color: var(--green);
    background: rgba(0, 168, 134, .08);
    border-radius: 10px;
    padding: 9px 11px;
}

.xc-setform {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── the photograph ─────────────────────────────────────────────────── */

.xc-setphoto {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    background: rgba(var(--ink), .035);
    border-radius: 16px;
    padding: 14px 16px;
}

.xc-setphoto__pick label {
    position: relative;
    display: block;
    border-radius: 50%;
    cursor: pointer;
}

.xc-setphoto__pick img,
.xc-setphoto__pick svg:not(.xc-setphoto__over svg) {
    display: block;
    border-radius: 50%;
}

/* The camera, over the picture, when a pointer or the keyboard is on it. */
.xc-setphoto__over {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: rgba(12, 12, 20, .45);
    opacity: 0;
    transition: opacity 160ms;
}

.xc-setphoto__pick label:hover .xc-setphoto__over,
.xc-setphoto__pick label:focus-within .xc-setphoto__over { opacity: 1; }

.xc-setphoto__pick label:focus-within { outline: 2px solid var(--peri); outline-offset: 3px; }

.xc-setphoto__who {
    flex: 1;
    min-inline-size: 180px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.xc-setphoto__who strong {
    font-family: Poppins, system-ui, sans-serif;
    font-size: 16px;
    font-weight: 600;
    unicode-bidi: plaintext;
}

.xc-setphoto__who > span {
    font-size: 13px;
    color: rgba(var(--ink), .55);
}

.xc-setphoto__who .xc-setphoto__hint {
    font-size: 12px;
    color: rgba(var(--ink), .42);
}

/* Why the picture was refused — too large, or not a picture — in the error's
   red, not the grey of the line above it (modules/face.js). */
.xc-setphoto__who .xc-f__err {
    margin-block-start: 4px;
    font-size: 12.5px;
    font-weight: 500;
    color: rgb(184, 54, 54);
}

/* A file input that is still there for the keyboard and screen readers. */
.xc-sr {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    pointer-events: none;
}

/* ── choices that happen at once ────────────────────────────────────── */

/* The theme: the segmented look, but each option is its own small form,
   because a theme is applied the moment it is picked. */
.xc-seg--now form { flex: 1; display: flex; }

.xc-seg--now button {
    flex: 1;
    appearance: none;
    border: 0;
    border-radius: 10px;
    padding: 9px 12px;
    font: inherit;
    font-size: 14px;
    color: rgba(var(--ink), .6);
    background: transparent;
    cursor: pointer;
    transition: background 180ms, color 180ms;
}

.xc-seg--now button[data-on] {
    background: var(--grad);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 8px 18px var(--glow);
}

.xc-seg--now button:focus-visible { outline: 2px solid var(--peri); outline-offset: 2px; }

/* ── lists of switches and rows ─────────────────────────────────────── */

.xc-setlist {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.xc-setlist .xc-switch { align-items: flex-start; }

.xc-setlist .xc-switch__track { margin-block-start: 2px; }

.xc-setlist__say {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.xc-setlist__say strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.xc-setlist__say span {
    font-size: 12.5px;
    line-height: 1.45;
    color: rgba(var(--ink), .5);
}

.xc-setrows {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.xc-setrows__one {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(var(--ink), .035);
    border-radius: 14px;
    padding: 11px 13px;
}

.xc-setrows__mark {
    inline-size: 32px;
    block-size: 32px;
    border-radius: 10px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acc);
    background: rgba(28, 28, 210, .08);
}

.xc-setrows__say {
    flex: 1;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.xc-setrows__say strong {
    font-size: 14px;
    font-weight: 600;
}

.xc-setrows__say span {
    font-size: 12.5px;
    color: rgba(var(--ink), .5);
    overflow: hidden;
    text-overflow: ellipsis;
}

.xc-setend {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.xc-setkeeps {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.xc-setkeeps li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 13px;
    line-height: 1.55;
    color: rgba(var(--ink), .6);
    text-wrap: pretty;
}

.xc-setkeeps svg {
    flex: none;
    margin-block-start: 3px;
    color: rgb(var(--brand));
}

.xc-kbd {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 7px;
    border: 1px solid var(--line);
    border-block-end-width: 2px;
    background: var(--surface-2);
    color: var(--text);
    white-space: nowrap;
}

/* ── the save bar ───────────────────────────────────────────────────── */

/* At the foot of what scrolls, and stuck there: the question "did that
   save?" is asked from wherever the last field was. */
.xc-setbar {
    position: sticky;
    inset-block-end: 0;
    margin-block-start: auto;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 12px 14px 12px 18px;
    box-shadow: 0 -10px 28px rgba(var(--scrim), .06);
}

.xc-setbar__dot {
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    flex: none;
    background: var(--green);
}

.xc-setbar__say {
    flex: 1;
    min-inline-size: 0;
    font-size: 13.5px;
    color: rgba(var(--ink), .5);
}

.xc-setbar[data-dirty] .xc-setbar__dot { background: var(--amber); }

.xc-setbar[data-dirty] .xc-setbar__say { color: var(--amber); font-weight: 600; }

.xc-setbar .xc-primary[disabled] { box-shadow: none; }

@media (max-width: 820px) {
    .xc-set { flex-direction: column; padding: 0 12px 16px; }

    .xc-set__main { overflow: visible; }

    .xc-setbar { flex-wrap: wrap; padding: 12px; }

    .xc-setbar__say { flex-basis: 100%; }
}

/* ── the activity log ────────────────────────────────────────────────────
 *
 * screens/settings/sections/activity-log, on Settings → Activity log and on
 * the console's page for one workspace. The table is the console Audit
 * page's own (.xc-au, menus.css); what is here is the filter row and the
 * "what" column, which reads as words rather than an event key — this log
 * is read by the people it is about.
 */

.xc-alog__filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.xc-alog__pick {
    inline-size: auto;
    max-inline-size: 200px;
    flex: none;
    font-size: 13.5px;
    padding-block: 10px;
}

.xc-alog__day {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: rgba(var(--ink), .5);
}

.xc-alog__day .xc-in {
    inline-size: 150px;
    font-size: 13.5px;
    padding-block: 9px;
}

/* The spreadsheet at the row's far end, apart from the filters. */
.xc-alog__end { margin-inline-start: auto; }

.xc-alog__what {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-inline-size: 0;
}

.xc-alog__did {
    display: flex;
    align-items: center;
    gap: 9px;
    min-inline-size: 0;
    font-size: 13.5px;
    font-weight: 500;
}

.xc-alog__verb {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Refused or failed, in the line's own colour. Done says nothing. */
.xc-alog__result {
    flex: none;
    font-size: 10.5px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    color: rgb(var(--tint));
    background: rgba(var(--tint), .12);
}

/* What it was done to, under the dot's indent. */
.xc-alog__on {
    padding-inline-start: 16px;
    font-size: 12px;
    color: rgba(var(--ink), .5);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xc-alog__on b {
    font-weight: 600;
    color: var(--text);
    unicode-bidi: isolate;
}

.xc-alog__on > * + *::before {
    content: '·';
    margin-inline: 6px;
    color: rgba(var(--ink), .3);
}

/* What a field was, struck through beside what it became. */
.xc-alog__was {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px;
    color: rgba(var(--ink), .42);
    unicode-bidi: plaintext;
}

.xc-alog__empty {
    border: 1px dashed var(--line);
    border-radius: 14px;
    padding: 30px;
    text-align: center;
    font-size: 14px;
    color: rgba(var(--ink), .42);
}

.xc-alog__note {
    margin: 0;
    font-size: 12px;
    color: rgba(var(--ink), .45);
    text-wrap: pretty;
}

@media (max-width: 820px) {
    .xc-alog__pick,
    .xc-alog__day { flex: 1 1 40%; max-inline-size: none; }

    .xc-alog__pick { inline-size: 100%; }

    .xc-alog__day .xc-in { inline-size: 100%; }

    .xc-alog__end { margin-inline-start: 0; }

    /* On a phone each line is a small card — who and as what, what was
       done, when and from where — rather than a table scrolled sideways
       with what happened off the edge (responsive.css's rule for tables). */
    .xc-au.xc-alog__table { overflow-x: visible !important; }

    .xc-alog__table .xc-au__head { display: none; }

    .xc-alog__table .xc-au__row { min-inline-size: 0; }

    .xc-alog__table .xc-au__row > summary {
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas: "who role" "what what" "where open";
        row-gap: 8px;
    }

    .xc-alog__table .xc-au__row > summary > :nth-child(1) { grid-area: who; }
    .xc-alog__table .xc-au__row > summary > :nth-child(2) { grid-area: role; }
    .xc-alog__table .xc-au__row > summary > :nth-child(3) { grid-area: what; }
    .xc-alog__table .xc-au__row > summary > :nth-child(4) { grid-area: where; }
    .xc-alog__table .xc-au__row > summary > :nth-child(5) { grid-area: open; align-self: end; }

    .xc-alog__table .xc-au__detail,
    [dir="rtl"] .xc-alog__table .xc-au__detail { padding: 0 8px 14px; }
}