/* ── 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. */
.xc-set__cards {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-inline-size: 980px;
    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;
}

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

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