/* PSA pod sign-in states (SLI-830). ServiceAI Legacy look, extended palette: beige ground, plum
   headings, purple only for the single primary action, amber only for setup problems. These are
   scoped here rather than inherited from the app theme, because a pod renders inside a PSA and the
   theme can be flipped to dark by the host. Global stylesheet on purpose: Telerik and the layout's
   own elements do not receive component-scoped styles (see CLAUDE.md). */
.pod-states-host { container-type: inline-size; }

.pod-states {
    --ps-ground: #faf8f5;
    --ps-surface: #ffffff;
    --ps-ink: #2b2620;
    --ps-head: #33265c;
    --ps-muted: #6b6459;
    --ps-line: #e8e2d6;
    --ps-line2: #d4cbb8;
    --ps-primary: #7751ef;
    --ps-on-primary: #ffffff;
    --ps-tint: #f6f2fe;
    --ps-tint-line: #e6dcfb;
    --ps-label: #5b3fc4;
    --ps-warn-bg: #fdf3e1;
    --ps-warn-ink: #8f5c0a;
    --ps-warn-line: #f0c27a;
    --ps-link: #1072c6;

    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
    min-height: 100%;
    background: var(--ps-surface);
    color: var(--ps-ink);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 13px;
    letter-spacing: -0.005em;
    -webkit-font-smoothing: antialiased;
    text-align: left;
}

.pod-states *,
.pod-states *::before,
.pod-states *::after { box-sizing: border-box; }

.pod-states .ps-muted { color: var(--ps-muted); }
.pod-states .ps-ink { color: var(--ps-ink); }
.pod-states .ps-small { font-size: 12px; line-height: 1.45; }
.pod-states .ps-body { font-size: 13px; line-height: 1.45; }

.pod-states .ps-title { font-size: 15px; font-weight: 700; color: var(--ps-head); }
.pod-states .ps-label { font-size: 11px; font-weight: 600; color: var(--ps-label); }

.pod-states .ps-stack { display: flex; flex-direction: column; gap: 8px; }
.pod-states .ps-stack--tight { gap: 4px; }
.pod-states .ps-stack--foot { margin-top: auto; }

.pod-states .ps-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pod-states .ps-row--center { gap: 10px; }

/* Cards */
.pod-states .ps-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-radius: 8px;
    border: 1px solid var(--ps-line);
}
.pod-states .ps-card--warn { background: var(--ps-warn-bg); border-color: var(--ps-warn-line); }
/* Our Problem is neutral: nothing for the technician to fix, so no amber. */
.pod-states .ps-card--neutral { background: var(--ps-ground); border-color: var(--ps-line); }

.pod-states .ps-where { font-size: 12px; line-height: 1.5; color: var(--ps-warn-ink); }

.pod-states .ps-code {
    font: 12px/1.45 Menlo, Consolas, 'JetBrains Mono', monospace;
    background: var(--ps-surface);
    border: 1px solid var(--ps-warn-line);
    border-radius: 6px;
    padding: 8px 10px;
    word-break: break-all;
    user-select: all;
}

/* Panels: the "what you're missing" and locked "Likely Cause" blocks */
.pod-states .ps-panel { display: flex; flex-direction: column; gap: 8px; border-radius: 8px; }
.pod-states .ps-panel--tint { background: var(--ps-tint); border: 1px solid var(--ps-tint-line); padding: 10px 12px; }
.pod-states .ps-panel--plain { padding: 0 2px; gap: 6px; }
.pod-states .ps-panel--fill { flex-grow: 1; justify-content: center; padding: 20px 22px; border: 0; }

.pod-states .ps-summary { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ps-head); }

/* The compact repeat strip: one line, always present on a repeat load */
.pod-states .ps-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--ps-warn-bg);
    border: 1px solid var(--ps-warn-line);
}
.pod-states .ps-strip-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.pod-states .ps-strip-title { font-size: 13px; font-weight: 700; color: var(--ps-head); }
.pod-states .ps-strip-sub { font-size: 12px; color: var(--ps-warn-ink); }

/* Buttons */
.pod-states .ps-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border-radius: 6px;
    border: 1px solid var(--ps-line2);
    background: var(--ps-surface);
    color: var(--ps-ink);
    font: 600 12px 'Inter', -apple-system, 'Segoe UI', sans-serif;
    cursor: pointer;
    white-space: nowrap;
}
.pod-states .ps-btn:hover:not(:disabled) { background: var(--ps-tint); }
.pod-states .ps-btn:disabled { opacity: 0.6; cursor: default; }
.pod-states .ps-btn--primary { background: var(--ps-primary); border-color: var(--ps-primary); color: var(--ps-on-primary); }
.pod-states .ps-btn--primary:hover:not(:disabled) { background: #6340d9; }
.pod-states .ps-btn--ghost { border-color: transparent; background: transparent; color: var(--ps-link); }
.pod-states .ps-btn--large { height: 34px; }
.pod-states .ps-btn:focus-visible,
.pod-states .ps-link:focus-visible { outline: 2px solid var(--ps-primary); outline-offset: 2px; }

.pod-states .ps-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--ps-warn-ink);
    font: 600 12px 'Inter', -apple-system, 'Segoe UI', sans-serif;
    text-decoration: underline;
    cursor: pointer;
}

/* Signing in */
.pod-states .ps-signing { display: flex; align-items: center; gap: 10px; padding: 0 0 2px; }
.pod-states .ps-signing .ps-muted { font-size: 12px; }
.pod-states .ps-spin {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 2px solid var(--ps-tint-line);
    border-top-color: var(--ps-label);
    animation: ps-spin 0.9s linear infinite;
}
@keyframes ps-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pod-states .ps-spin { animation: none; } }

.pod-states .ps-skeletons { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.pod-states .ps-skeletons--tight { gap: 6px; padding: 0; }
.pod-states .ps-skel { border-radius: 4px; background: var(--ps-tint-line); }

.pod-states .ps-manual {
    width: 100%;
    border: 1px solid var(--ps-line2);
    border-radius: 6px;
    padding: 8px 10px;
    font: 12px/1.45 Menlo, Consolas, monospace;
    color: var(--ps-ink);
    background: var(--ps-surface);
    resize: vertical;
}

/* The narrow Autotask and Zendesk sidebars (~300px) get tighter padding and stacked buttons. The
   query is on the host wrapper because a container cannot restyle itself, and it comes last so it
   wins over the base rules above. */
@container (max-width: 360px) {
    .pod-states { padding: 8px 12px 12px; }
    .pod-states .ps-row { flex-direction: column; align-items: stretch; }
    .pod-states .ps-strip { flex-direction: column; align-items: stretch; }
}