/* 批准页：一次安全确认，deliberate 而明确。 */

/* 待批准设备身份行 */
.device
{
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-sunken);
    border: 1px solid var(--divider);
    border-radius: var(--radius-card);
}

.deviceIcon
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--radius-control);
    background: var(--accent-soft);
    color: var(--accent);
}

.deviceMeta
{
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.deviceName
{
    font-size: var(--fs-15);
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.deviceSub
{
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-12);
    color: var(--text-muted);
}

.dot { color: var(--divider-strong); }

.ip
{
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    color: var(--text-muted);
}

/* 信任时长两选项 */
.choices
{
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.choice
{
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    width: 100%;
    text-align: left;
    padding: var(--space-3) var(--space-4);
    /* 未选中态明显更轻：sunken 底 + 细分隔线左条，与选中态拉开对比。 */
    background: var(--surface-sunken);
    border: 1px solid var(--divider);
    border-left: 3px solid var(--divider);
    border-radius: var(--radius-control);
    cursor: pointer;
    color: var(--text-muted);
    transition:
        border-color var(--dur-fast) var(--ease-out),
        background-color var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-fast) var(--ease-out);
}

.choice:hover { border-color: var(--divider-strong); }

/* 选中态：实心 accent 边框 + 加粗左色条 + accent 描边环 + soft 底（同
   DeviceStrip.portSelected 的强选中语汇），与未选中态形成明显对比。 */
.choiceOn
{
    background: var(--accent-soft);
    border-color: var(--accent);
    border-left: 4px solid var(--accent);
    color: var(--text);
    box-shadow: 0 0 0 1px var(--accent);
}

.choiceOn:hover { border-color: var(--accent); }

.choice:focus-visible
{
    outline: 2px solid var(--accent-ring);
    outline-offset: 2px;
}

.choiceMark
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    flex-shrink: 0;
    color: var(--text-muted);
}

.choiceOn .choiceMark { color: var(--accent); }

.choiceText
{
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.choiceTitle
{
    font-size: var(--fs-13);
    font-weight: 600;
}

/* 选中项标题着 accent 色，进一步强化「当前选的是这个」。 */
.choiceOn .choiceTitle { color: var(--accent); }

.choiceHint
{
    font-size: var(--fs-12);
    line-height: var(--lh-body);
    color: var(--text-muted);
}

/* 选中项说明文字恢复常规对比（未选中时整块被压暗）。 */
.choiceOn .choiceHint { color: var(--text-muted); }

/* 批准 / 拒绝：批准是主色行动，拒绝是安静的 ghost。 */
.actions
{
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
