/* =========================================================================
   Profile / Locations / Skills — the three "Personal" pages in the settings
   hub. Shares the settings-hub tokens (action ink, color-mix tints, 0.5rem/
   0.75rem radii) so these pages rhyme with the hub shell in settings-hub.css.
   Every rule here is namespaced under .profile-* so nothing here can cancel
   or be cancelled by the app's global .card / .form-control styles.
   ========================================================================= */

/* Profile hero face — DELETED. This was a SECOND hero size (132px, with its own
   6px ring and a hard-coded #fff) and it had no call site anywhere in the tree —
   dead CSS holding a size the ladder can't have. The platform hero is one step,
   `.global-avatar--xl` (104px) + `--ring`. */

.settings-profile-name {
    font-size: 1.5rem;
    font-weight: var(--font-weight-medium);
    color: var(--bs-body-color);
    margin: 0;
}

/* Chrome (fill, border, radius, resting shadow) now comes from `.global-card
   --flat`; this class carries only the panel's padding and spacing. */
.settings-profile-card {
    padding: var(--spacing-mdlg) var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

@media (max-width: 768px) {
    .settings-profile-card {
        padding: var(--spacing-md);
    }
}

/* Profile top tabs use the canonical `.global-tabs` component in
   components/page-tabs.css. */
.settings-profile-card--flush {
    padding-bottom: var(--spacing-smd);
}

/* "Who can see this" — a property row (workers.css .workers-profile-prop) on the card
   it sits in, edited the way a HubSpot property is (Nick, 08-29): the
   saved level reads as a value with a hover pencil; open, the three
   levels stack as full-width rows (three long labels in one horizontal
   strip wrapped badly at rail width — Nick, 08-28) with Save and Cancel
   under them. */
.workers-visibility-control {
    padding-bottom: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--color-border);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.workers-visibility-control__value .bi {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.workers-visibility-control__options {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-card-bg);
    overflow: hidden;
}

.workers-visibility-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-smd);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
    border-bottom: 1px solid var(--color-border);
    margin: 0;
}

.workers-visibility-option:last-child {
    border-bottom: none;
}

.workers-visibility-option:hover {
    background: color-mix(in srgb, var(--color-action) 5%, transparent);
}

.workers-visibility-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.workers-visibility-option__text {
    flex: 1;
    min-width: 0;
}

/* The picked row: an ink tint with ink text and its check shown — never a
   solid fill, which shouted over the whole card. */
.workers-visibility-option__check {
    visibility: hidden;
    flex-shrink: 0;
}

.workers-visibility-option.is-active {
    background: color-mix(in srgb, var(--color-action) 8%, transparent);
    color: var(--color-action);
    font-weight: var(--font-weight-medium);
}

.workers-visibility-option.is-active .workers-visibility-option__check {
    visibility: visible;
}

/* A keyboard on the hidden radio still shows where it is. */
.workers-visibility-option:has(input:focus-visible) {
    outline: 2px solid var(--color-action);
    outline-offset: -2px;
}

.workers-visibility-control__help {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}