/*
   scope-identity-dialog.css — the Create/Edit dialog for a Space or Project.
   Split from sidebar-nav.css (600-line cap): a modal is not sidebar navigation.
   The .lp-scope-avatar rules stay there — sidebars render them too.
*/

/* Padded, bordered regions — the panel itself carries no padding. */
.lp-scope-identity-overlay .kanban-dialog {
    width: min(520px, calc(100vw - 24px));
    max-height: 85vh;
    padding: 0;
    gap: 0;
}

.lp-scope-identity-overlay .kanban-dialog-header {
    align-items: flex-start;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
}

.lp-scope-identity-overlay .kanban-dialog-titles {
    gap: 6px;
}

.lp-scope-identity-overlay .kanban-dialog-titles > h3 {
    font-size: 16px;
    font-weight: 600;
}

.lp-scope-identity-overlay .kanban-dialog-close {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bg-hover);
    color: var(--text-secondary);
}

.lp-scope-identity-overlay .kanban-dialog-close svg {
    width: 12px;
    height: 12px;
}

.lp-scope-identity-overlay .kanban-dialog-body {
    padding: 16px 24px;
}

.lp-scope-identity-overlay .dialog-actions {
    margin-top: 0;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
}

.lp-scope-identity-overlay .kanban-dialog .btn-secondary {
    padding: 7px 18px;
}

.lp-scope-identity-overlay .kanban-dialog .btn-primary {
    padding: 7px 22px;
    font-weight: 600;
}

.lp-scope-identity-form {
    display: grid;
    gap: 14px;
}

.lp-scope-identity-field {
    display: grid;
    gap: 10px;
}

.lp-scope-identity-legend {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
}

.lp-scope-identity-label-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lp-scope-swatch-trigger {
    --lp-scope-swatch-color: var(--accent);
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    outline: 0;
    background: var(--lp-scope-swatch-color);
    cursor: pointer;
}

.lp-scope-swatch-trigger:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.lp-scope-identity-private {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.lp-scope-identity-private-text {
    display: grid;
    gap: 3px;
}

.lp-scope-identity-private-text strong {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
}

.lp-scope-identity-private-text small {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.lp-scope-identity-field input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    outline: 0;
    background: var(--bg-input, #1c1c1c);
    color: var(--text-primary);
    font: inherit;
    font-size: 14px;
}

.lp-scope-identity-field input:focus-visible {
    border-color: var(--accent);
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* Permission + sharing: designed, not yet buildable — the Permission nucleus
   has no generated JS wrapper. Shown when Private is on, labelled Coming soon
   so the surface never implies it is live. */
.lp-scope-identity-sharing {
    display: grid;
    gap: 12px;
}

.lp-scope-identity-sharing[hidden] { display: none; }

.lp-scope-sharing-row {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 13px;
}

/* S-52. The D-045 consent setting — its OWN section, above access and
 * separated from it by the same rule, because the two are different questions.
 * Sharing is who can reach the Space; this is whether Lani may reason over it.
 * The old "Make private" control failed by sitting in the access group under a
 * name that implied protection, so the separation here is the point, not
 * decoration. The hint carries the disclaimer at 12px so it reads as a
 * qualification of the label rather than a second setting. */
.lp-scope-identity-reasoning {
    display: grid;
    gap: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.lp-scope-reasoning-row {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.lp-scope-reasoning-row input {
    flex: 0 0 auto;
    margin: 0;
}

.lp-scope-reasoning-label {
    font-size: 13px;
}

.lp-scope-reasoning-hint {
    margin: 0;
    /* Lines up with the label, past the checkbox and its gap. */
    padding-left: 26px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.lp-scope-identity-access {
    display: grid;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.lp-scope-access-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lp-scope-access-options {
    display: grid;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.lp-scope-access-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    color: var(--text-muted);
}

.lp-scope-access-option + .lp-scope-access-option {
    border-top: 1px solid var(--border);
}

.lp-scope-access-option svg {
    flex: 0 0 auto;
    margin-top: 1px;
}

.lp-scope-access-text {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.lp-scope-access-text strong {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
}

.lp-scope-access-text small {
    font-size: 12px;
    line-height: 1.45;
}

/* S-34. The row that is actually in force reads as settled rather than pending:
   the same badge geometry as the coming-soon pill beside it, in the accent the
   rest of the shell uses for a current state, so the two are told apart by
   colour and wording rather than by one of them simply being absent. */
.lp-scope-access-option--in-force .lp-scope-access-text strong { color: var(--text-primary); }

.lp-scope-in-force {
    margin-left: auto;
    padding: 1px 6px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-hover);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* Same badge as the wizard's ch-wiz-view-soon / chaos-view-picker-card-badge. */
.lp-scope-soon {
    margin-left: auto;
    padding: 1px 6px;
    border: 1px solid rgba(246, 173, 85, 0.3);
    border-radius: 4px;
    background: rgba(246, 173, 85, 0.15);
    color: #f6ad55;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}