/* ==========================================================================
   Interviewer app layer, on top of pensiero.css
   --------------------------------------------------------------------------
   pensiero.css is the Pensiero design kit, copied verbatim so it can be
   refreshed from the kit without a merge. Everything here is what the kit
   does not cover — the app shell's mobile behaviour, tables for numeric data,
   alerts and toasts, forms laid out in grids, and the interview screens.

   Colours are the kit's tokens only. Tints are mixed from a token rather
   than written as a raw value, so a palette change reaches them too.
   ========================================================================== */

:root {
  --tint-success: color-mix(in srgb, var(--pensiero-success) 10%, transparent);
  --tint-warning: color-mix(in srgb, var(--pensiero-warning) 10%, transparent);
  --tint-error: color-mix(in srgb, var(--pensiero-error) 10%, transparent);
  --tint-blue: color-mix(in srgb, var(--pensiero-blue) 10%, transparent);
  --tint-orange: color-mix(in srgb, var(--pensiero-orange) 10%, transparent);
  --tint-neutral: color-mix(in srgb, var(--pensiero-text-tertiary) 14%, transparent);
  --shadow-float: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

[hidden] { display: none !important; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
a { color: inherit; }
button { font: inherit; }
img { max-width: 100%; }

svg.i { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
svg.i-sm { width: 14px; height: 14px; }
svg.i-lg { width: 24px; height: 24px; }

.muted { color: var(--pensiero-text-secondary); }
.faint { color: var(--pensiero-text-tertiary); }
.mono { font-family: var(--font-mono); font-size: 13px; }
.nowrap { white-space: nowrap; }
.stack > * + * { margin-top: 16px; }
.stack-lg > * + * { margin-top: 24px; }
.row-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.spacer { flex: 1; }
.section { padding-bottom: 40px; }
.section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-bottom: 16px; }
.section-head .p-section-label { margin: 0; }

/* Destructive actions: outlined in the error colour, solid only inside a confirmation */
.p-btn--danger { background: transparent; border-color: color-mix(in srgb, var(--pensiero-error) 40%, transparent); color: var(--pensiero-error); }
.p-btn--danger:hover:not(:disabled) { background: var(--pensiero-error); border-color: var(--pensiero-error); color: var(--pensiero-dark-text); }
.p-btn--danger-solid { background: var(--pensiero-error); color: var(--pensiero-dark-text); }
.p-btn--danger-solid:hover:not(:disabled) { opacity: 0.9; }
.p-btn--ghost.p-btn--xs, .p-btn--ghost.p-btn--sm { padding-left: 4px; padding-right: 4px; }

/* ---------- App shell: top nav, sidebar, mobile drawer ---------- */

.app-topnav__left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.app-topnav__product { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pensiero-text-tertiary); white-space: nowrap; }
.app-menu-btn { display: none; }

.app-user { position: relative; }
.app-user__btn { border: 0; padding: 0; background: transparent; cursor: pointer; border-radius: var(--radius-full); }
.app-user__menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 280px; max-width: calc(100vw - 32px);
  padding: 8px; background: var(--pensiero-white);
  border: 1px solid var(--pensiero-border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-float); animation: dropdown-in 200ms ease forwards;
}
.app-user__who { padding: 8px 12px 12px; border-bottom: 1px solid var(--pensiero-border); margin-bottom: 4px; }
.app-user__email { font-size: 13px; font-weight: 500; color: var(--pensiero-dark); overflow-wrap: anywhere; }
.app-user__role { font-size: 11px; color: var(--pensiero-text-tertiary); text-transform: capitalize; }
.app-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px;
  border: 0; border-radius: var(--radius-lg); background: transparent; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--pensiero-text-secondary); text-decoration: none; text-align: left;
}
.app-menu-item:hover { background: var(--pensiero-beige); color: var(--pensiero-dark); }

.p-sidebar__user { display: flex; align-items: center; gap: 12px; }
.p-sidebar__user .who { min-width: 0; flex: 1; }
.p-sidebar__user .email { font-size: 13px; font-weight: 500; color: var(--pensiero-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-sidebar__user .role { font-size: 11px; color: var(--pensiero-text-tertiary); text-transform: capitalize; }

.app-scrim { position: fixed; inset: var(--topnav-h) 0 0 0; z-index: 39; background: rgba(26, 26, 26, 0.3); animation: fade-in 200ms ease forwards; }

@media (max-width: 1023px) {
  .app-menu-btn { display: inline-flex; }
  .p-topnav { padding: 0 16px; }
  .p-sidebar { transform: translateX(-100%); transition: transform 300ms var(--ease); box-shadow: none; }
  .p-sidebar.is-open { transform: translateX(0); box-shadow: var(--shadow-float); }
  .p-main { margin-left: 0; }
  .p-container { padding: 24px 16px; }
}
@media (max-width: 480px) { .app-topnav__product { display: none; } }

/* ---------- Page header ---------- */

.p-hero__text .p-lede + .app-hero-actions { margin-top: 24px; }
.app-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.app-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 12px; }
.app-meta-line { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 16px; font-size: 13px; color: var(--pensiero-text-tertiary); }
.app-meta-line strong { font-weight: 500; color: var(--pensiero-text-secondary); }

/* Hero with a height-capped statue, for working pages where the list must stay above the fold */
@media (max-width: 767px) { .p-hero--compact .p-hero__art { display: none; } }
@media (min-width: 768px) {
  .p-hero--compact .p-hero__art { width: 32%; }
  .p-hero--compact .p-hero__art img { height: 200px; object-fit: cover; }
}

/* A header with no statue: title and lede left, primary action right */
.app-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 32px; }
.app-head__text { min-width: 0; flex: 1 1 420px; }

/* ---------- Toolbar: filters above a list ---------- */

.app-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 24px; }
.app-toolbar .p-search { flex: 1 1 260px; max-width: 360px; }
.app-toolbar .p-select { width: auto; min-width: 200px; padding-top: 9px; padding-bottom: 9px; font-size: 14px; }
.app-toolbar .p-tabs { margin: 0; }
.app-toolbar__note { font-size: 13px; color: var(--pensiero-text-tertiary); }

/* ---------- Forms ---------- */

.p-select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.p-input[type="date"] { min-height: 50px; }
.p-input--sm, .p-select.p-input--sm { padding: 8px 12px; font-size: 14px; }
.p-select.p-input--sm { padding-right: 36px; background-position: right 10px center; }

.app-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.app-form-grid > .is-full { grid-column: 1 / -1; }
@media (max-width: 640px) { .app-form-grid { grid-template-columns: 1fr; } }
.app-hint { display: block; margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--pensiero-text-tertiary); }
.app-hint + .app-hint { margin-top: 2px; }
.app-form-group-title { font-size: 14px; font-weight: 600; color: var(--pensiero-dark); margin: 32px 0 16px; }
.app-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; }
.p-label .req { color: var(--pensiero-orange); margin-left: 2px; }

/* Criteria editor: name + weight + remove */
.app-criteria { display: flex; flex-direction: column; gap: 8px; }
.app-criterion { display: flex; gap: 8px; align-items: center; }
.app-criterion .p-input { flex: 1; }
.app-criterion .p-select { width: 96px; flex: none; }

/* A checkbox or toggle with its label beside it */
.app-check-label { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: 14px; color: var(--pensiero-text); }

/* ---------- Alerts (inline) and toasts (floating) ---------- */

.app-alert {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: var(--radius-xl);
  border: 1px solid var(--pensiero-border); background: var(--pensiero-beige);
  font-size: 14px; line-height: 1.55; color: var(--pensiero-text);
}
.app-alert > svg { margin-top: 2px; color: var(--pensiero-text-tertiary); }
.app-alert__body { flex: 1; min-width: 0; }
.app-alert__title { font-weight: 600; color: var(--pensiero-dark); margin-bottom: 2px; }
.app-alert__title small { font-weight: 400; font-size: 12px; color: var(--pensiero-text-tertiary); margin-left: 6px; }
.app-alert ul { margin: 6px 0 0; padding-left: 18px; }
.app-alert li + li { margin-top: 4px; }
.app-alert__foot { margin-top: 8px; font-size: 12px; color: var(--pensiero-text-tertiary); }
.app-alert--warning { border-color: color-mix(in srgb, var(--pensiero-warning) 35%, transparent); background: var(--tint-warning); }
.app-alert--warning > svg { color: var(--pensiero-warning); }
.app-alert--error { border-color: color-mix(in srgb, var(--pensiero-error) 30%, transparent); background: var(--tint-error); }
.app-alert--error > svg { color: var(--pensiero-error); }
.app-alert--info { border-color: color-mix(in srgb, var(--pensiero-blue) 30%, transparent); background: var(--tint-blue); }
.app-alert--info > svg { color: var(--pensiero-blue); }
.app-alert--success { border-color: color-mix(in srgb, var(--pensiero-success) 30%, transparent); background: var(--tint-success); }
.app-alert--success > svg { color: var(--pensiero-success); }
.app-alert .p-btn { flex-shrink: 0; }

.app-toasts { position: fixed; right: 24px; bottom: 24px; z-index: 80; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.app-toast {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px;
  background: var(--pensiero-white); border: 1px solid var(--pensiero-border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-float); font-size: 14px; line-height: 1.5; color: var(--pensiero-text);
  animation: fade-in-up 300ms ease forwards;
}
.app-toast > svg { margin-top: 2px; }
.app-toast--success > svg { color: var(--pensiero-success); }
.app-toast--error { border-color: color-mix(in srgb, var(--pensiero-error) 35%, transparent); }
.app-toast--error > svg { color: var(--pensiero-error); }
.app-toast__text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.app-toast__close { border: 0; background: transparent; cursor: pointer; padding: 0; color: var(--pensiero-text-tertiary); }
@media (max-width: 640px) { .app-toasts { left: 16px; right: 16px; bottom: 16px; max-width: none; } }

/* ---------- Empty, loading and restricted states ---------- */

.app-empty { padding: 56px 16px; text-align: center; border-top: 1px solid var(--pensiero-border); }
.app-empty__title { font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.2; color: var(--pensiero-dark); margin-bottom: 8px; }
.app-empty__body { font-size: 14px; color: var(--pensiero-text-secondary); max-width: 440px; margin: 0 auto; }
.app-empty .p-btn { margin-top: 24px; }
.app-empty--bare { border-top: 0; padding: 32px 16px; }
.app-loading { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 48px 16px; font-size: 14px; color: var(--pensiero-text-tertiary); }
.app-more { display: flex; justify-content: center; padding-top: 24px; }

/* ---------- Status pills beyond the kit's set ---------- */

.p-status--neutral { color: var(--pensiero-text-secondary); background: var(--tint-neutral); }
.p-status--accent { color: var(--pensiero-orange); background: var(--tint-orange); }
.p-badge--neutral { color: var(--pensiero-text-secondary); background: var(--tint-neutral); }
.p-badge--dark { color: var(--pensiero-dark-text); background: var(--pensiero-dark); }
.p-tag--error { color: var(--pensiero-error); background: var(--tint-error); }
.p-tag--info { color: var(--pensiero-blue); background: var(--tint-blue); }

/* ---------- List rows: extra slots ---------- */

.p-row__title-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.p-row__subtitle--plain { font-style: normal; }
.p-row__subtitle a { text-decoration: none; }
.p-row__subtitle a:hover { color: var(--pensiero-dark); text-decoration: underline; text-underline-offset: 3px; }
.p-row__note { display: block; margin-top: 4px; font-size: 12px; color: var(--pensiero-text-secondary); }
.p-row__note--error { color: var(--pensiero-error); }
.p-row__actions .p-status { flex-shrink: 0; }
.app-row-link { cursor: pointer; }
.app-chevron { color: var(--pensiero-text-tertiary); transition: transform 200ms var(--ease); }
.p-row:hover .app-chevron { transform: translateX(2px); color: var(--pensiero-dark); }
.p-row .p-avatar { width: 36px; height: 36px; font-size: 13px; }
.p-avatar--soft { background: var(--pensiero-beige); color: var(--pensiero-text-secondary); border: 1px solid var(--pensiero-border); }

/* A panel that opens under a row — the invite link, for one */
.app-row-panel { padding: 16px 8px 20px 40px; border-bottom: 1px solid var(--pensiero-border); background: rgba(247, 245, 242, 0.5); }
.app-linkbox { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.app-linkbox__url {
  flex: 1 1 320px; min-width: 0; padding: 10px 14px; overflow-wrap: anywhere;
  font-family: var(--font-mono); font-size: 13px; color: var(--pensiero-dark);
  background: var(--pensiero-white); border: 1px solid var(--pensiero-border); border-radius: var(--radius-lg);
}

@media (max-width: 767px) {
  .p-row { flex-wrap: wrap; }
  .p-row__main { flex-basis: calc(100% - 40px); padding-right: 0; }
  .p-row__actions { width: 100%; flex-wrap: wrap; justify-content: flex-end; padding-left: 32px; }
  .p-row__reveal { opacity: 1; }
  .app-row-panel { padding-left: 8px; }
}

/* ---------- Tables, for numeric data only (lists are for things) ---------- */

.app-table-wrap { width: 100%; overflow-x: auto; }
.app-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.app-table th {
  text-align: left; padding: 10px 12px; white-space: nowrap;
  font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--pensiero-text-tertiary); border-bottom: 1px solid var(--pensiero-border);
}
.app-table td { padding: 12px; border-bottom: 1px solid var(--pensiero-border); color: var(--pensiero-text); vertical-align: top; }
.app-table tbody tr { transition: background-color 200ms var(--ease); }
.app-table tbody tr:hover { background: rgba(247, 245, 242, 0.5); }
.app-table .num { text-align: right; font-feature-settings: 'tnum'; white-space: nowrap; }
.app-table th.num { text-align: right; }
.app-table .is-muted { color: var(--pensiero-text-tertiary); }
.app-table tr.is-past td { color: var(--pensiero-text-tertiary); }
.cost-note { display: block; font-size: 12px; color: var(--pensiero-text-tertiary); }
.not-metered { color: var(--pensiero-warning); font-size: 13px; }

/* The partial-report notice and the unknowns list (js/usage-report.js markup) */
.scope-notice { padding: 16px 20px; border-radius: var(--radius-xl); border: 1px solid color-mix(in srgb, var(--pensiero-warning) 35%, transparent); background: var(--tint-warning); font-size: 14px; line-height: 1.6; }
.scope-title { font-weight: 600; color: var(--pensiero-dark); margin-bottom: 2px; }
.scope-notice p { color: var(--pensiero-text-secondary); }
.scope-notice details { margin-top: 10px; }
.scope-notice summary { cursor: pointer; font-size: 13px; font-weight: 500; color: var(--pensiero-dark); }
.scope-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; margin: 12px 0; }
@media (max-width: 767px) { .scope-cols { grid-template-columns: 1fr; } }
.scope-sub { font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pensiero-text-tertiary); margin: 12px 0 6px; }
.scope-notice ul { padding-left: 18px; color: var(--pensiero-text-secondary); font-size: 13px; }
.scope-notice li + li { margin-top: 4px; }
.unknowns ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--pensiero-border); }
.unknowns li { padding: 14px 8px; border-bottom: 1px solid var(--pensiero-border); }
.unknowns .scope-sub { margin-top: 0; margin-bottom: 16px; }
.unknown-label { font-size: 14px; font-weight: 500; color: var(--pensiero-dark); }
.unknown-value { float: right; font-feature-settings: 'tnum'; font-size: 14px; font-weight: 600; color: var(--pensiero-warning); }
.unknown-detail { font-size: 13px; color: var(--pensiero-text-tertiary); margin-top: 2px; }

/* ---------- Grids, stat tiles, score cards ---------- */

.app-grid { display: grid; gap: 16px; }
.app-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.app-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.app-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1023px) { .app-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .app-grid--3, .app-grid--2 { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
  .p-action-tile { flex-direction: row; justify-content: flex-start; gap: 16px; padding: 14px 16px; text-align: left; }
  .p-stat { padding: 14px 16px; }
  .p-stat__icon { display: none; }
}
@media (max-width: 360px) { .app-grid--4 { grid-template-columns: 1fr; } }

.p-score-card__sub { display: block; margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--pensiero-text-tertiary); }
.p-score-card__value--sm { font-size: 32px; }
@media (min-width: 768px) { .p-score-card__value--sm { font-size: 36px; } }
.p-stat__sub { font-size: 12px; color: var(--pensiero-text-tertiary); margin: 2px 0 0; }

/* A thin gold meter under a score */
.app-meter { height: 4px; border-radius: var(--radius-full); background: var(--pensiero-border); overflow: hidden; }
.app-meter > span { display: block; height: 100%; background: var(--pensiero-gold); border-radius: var(--radius-full); }

.app-chart { padding: 20px; }
.app-chart canvas { max-width: 100%; }
.app-chart__empty { padding: 32px 0; text-align: center; font-size: 13px; color: var(--pensiero-text-tertiary); }

/* ---------- Report pieces: criterion rows, key/value, transcript ---------- */

.app-crit { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 8px 24px; padding: 20px 8px; border-bottom: 1px solid var(--pensiero-border); }
.app-crit__name { font-size: 15px; font-weight: 500; color: var(--pensiero-dark); }
.app-crit__weight { margin-left: 8px; font-size: 12px; font-weight: 400; color: var(--pensiero-text-tertiary); }
.app-crit__rationale { grid-column: 1 / 2; font-size: 14px; line-height: 1.6; color: var(--pensiero-text-secondary); }
.app-crit__score { grid-row: 1 / span 2; grid-column: 2; text-align: right; }
.app-crit__score .p-number { font-size: 28px; }
.app-crit__score .app-meter { margin-top: 10px; }
.app-crit.is-unassessed .app-crit__name { color: var(--pensiero-text-secondary); }
.app-crit__na { font-size: 11px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--pensiero-warning); }

.app-kv { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 10px 24px; font-size: 14px; }
.app-kv dt { color: var(--pensiero-text-tertiary); }
.app-kv dd { color: var(--pensiero-text); overflow-wrap: anywhere; }
@media (max-width: 640px) { .app-kv { grid-template-columns: 1fr; gap: 2px; } .app-kv dd { margin-bottom: 10px; } }

.app-transcript { display: flex; flex-direction: column; gap: 12px; }
.app-turn { max-width: 85%; padding: 12px 16px; border-radius: var(--radius-xl); background: var(--pensiero-beige); font-size: 14px; line-height: 1.6; color: var(--pensiero-text); }
.app-turn__who { display: block; margin-bottom: 2px; font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pensiero-text-tertiary); }
.app-turn--candidate { align-self: flex-end; background: var(--pensiero-white); border: 1px solid var(--pensiero-border); }
@media (max-width: 640px) { .app-turn { max-width: 100%; } }

.p-expand__body > * + * { margin-top: 12px; }
.p-expand > summary .p-badge { margin-left: 8px; }
.p-expand > summary .summary-text { display: flex; align-items: center; gap: 8px; }

/* The decision block: advice and the human call, side by side */
.app-decision { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding: 20px 24px; }
.app-decision__text { flex: 1 1 320px; font-size: 14px; line-height: 1.6; }
.app-decision__text strong { color: var(--pensiero-dark); }
.app-decision__buttons { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Modals built on <dialog> ---------- */

/* The kit positions .p-modal relative for its React portal; a native <dialog>
   in the top layer must stay fixed, or it opens at the top of a scrolled page. */
dialog.p-modal { position: fixed; inset: 0; margin: auto; max-height: calc(100vh - 32px); overflow-y: auto; }
dialog.p-modal:not([open]) { display: none; }
.p-modal__lede { margin: -12px 0 24px; font-size: 14px; line-height: 1.6; color: var(--pensiero-text-secondary); }
.app-modal__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 32px; }
.app-modal__actions--split { justify-content: space-between; }
@media (max-width: 640px) { dialog.p-modal { padding: 24px 20px; } }

/* Candidate picker inside the new-interview modal */
.app-picker { border: 1px solid var(--pensiero-border); border-radius: var(--radius-lg); overflow: hidden; }
.app-picker__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--pensiero-border); background: var(--pensiero-beige); font-size: 12px; color: var(--pensiero-text-secondary); }
.app-picker__bar button { border: 0; background: transparent; cursor: pointer; padding: 2px 6px; font-size: 12px; font-weight: 500; color: var(--pensiero-dark); text-decoration: underline; text-underline-offset: 3px; }
.app-picker__list { max-height: 260px; overflow-y: auto; }
.app-picker__option { display: flex; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer; font-size: 14px; border-bottom: 1px solid var(--pensiero-border); }
.app-picker__option:last-child { border-bottom: 0; }
.app-picker__option:hover { background: rgba(247, 245, 242, 0.6); }
.app-picker__option .email { color: var(--pensiero-text-tertiary); font-size: 13px; }
.app-picker__note { padding: 10px 12px; font-size: 12px; color: var(--pensiero-text-tertiary); }

/* The floating selection bar */
.p-bulkbar { white-space: nowrap; }
@media (max-width: 480px) { .p-bulkbar { gap: 8px; padding: 8px 12px; bottom: 16px; } }

/* Result of a bulk request: what happened to each candidate */
.app-report { margin-bottom: 24px; }
.app-report ul { font-size: 13px; }

/* Password strength */
.app-strength { margin-top: 10px; height: 4px; }
.app-strength > span { background: var(--pensiero-error); }
.app-strength[data-level="fair"] > span { background: var(--pensiero-warning); }
.app-strength[data-level="strong"] > span { background: var(--pensiero-success); }
.app-strength-label { margin-top: 6px; font-size: 12px; color: var(--pensiero-text-tertiary); min-height: 18px; }

/* ---------- Auth and candidate split screens ---------- */

.p-auth__panel { min-height: 100vh; }
/* Centred while it fits; a tall step (the notice) grows downwards instead of
   overflowing into the logo above it. */
.p-auth__center { align-items: flex-start; padding: 40px 0; }
.p-auth__form { margin: auto 0; }
.p-auth__form form > * + * { margin-top: 20px; }
.p-auth__brand { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.p-auth__powered { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pensiero-text-tertiary); }
.p-auth__powered b { font-family: var(--font-display); font-weight: 400; font-size: 13px; letter-spacing: 0.05em; color: var(--pensiero-text-secondary); }
.p-auth__headline--md { font-size: 44px; line-height: 1.05; }
@media (min-width: 768px) { .p-auth__headline--md { font-size: 56px; } }
@media (max-width: 767px) {
  .p-auth__panel { padding: 24px 16px; }
  .p-auth__headline { font-size: 44px; }
  .p-auth__sub { margin-bottom: 32px; }
}
.p-auth__foot { margin-top: 24px; text-align: center; font-size: 13px; color: var(--pensiero-text-tertiary); }
.p-auth__foot a { color: var(--pensiero-text-secondary); }
.p-auth__art-caption { left: 32px; bottom: 32px; right: 32px; margin: 0; }
.p-auth__art-top { top: 32px; left: 32px; margin: 0; }

.app-steps { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.app-steps .p-progress { flex: 1; height: 4px; }
.app-steps__label { font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pensiero-text-tertiary); white-space: nowrap; }

/* The candidate's steps: one visible at a time, shown by the page's script */
.app-step, .app-step-msg { display: none; }
.app-step-msg { margin-bottom: 16px; }
#step-error { margin-bottom: 24px; }
.app-tips { margin: 0 0 24px; padding: 0; list-style: none; }
.app-tips li { position: relative; padding: 0 0 10px 20px; font-size: 14px; line-height: 1.55; color: var(--pensiero-text-secondary); }
.app-tips li::before { content: ''; position: absolute; left: 2px; top: 8px; width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--pensiero-gold); }

/* The disclosure the candidate reads before starting */
.app-notice { max-height: 44vh; overflow-y: auto; padding: 4px 16px 4px 0; margin-bottom: 24px; border-top: 1px solid var(--pensiero-border); border-bottom: 1px solid var(--pensiero-border); }
.app-notice h2 { font-size: 16px; font-weight: 600; color: var(--pensiero-dark); margin: 20px 0 12px; }
.app-notice section { margin-bottom: 16px; }
.app-notice h3 { font-size: 13px; font-weight: 600; color: var(--pensiero-dark); margin-bottom: 4px; }
.app-notice p { font-size: 14px; line-height: 1.6; color: var(--pensiero-text-secondary); }
.app-notice-version { margin-top: 16px; font-size: 11px; color: var(--pensiero-text-tertiary); }

/* ---------- Candidate interview screen ---------- */

.app-interview { max-width: 1120px; margin: 0 auto; padding: 40px 32px 64px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px 48px; align-items: start; }
@media (max-width: 900px) { .app-interview { grid-template-columns: 1fr; padding: 24px 16px 48px; } }
.app-stage > * + * { margin-top: 24px; }
.app-stage__title { font-family: var(--font-display); font-weight: 400; font-size: 40px; line-height: 1.05; color: var(--pensiero-dark); }
@media (min-width: 768px) { .app-stage__title { font-size: 52px; } }
.app-stage__who { margin-top: 8px; font-size: 15px; color: var(--pensiero-text-secondary); }

.app-live { display: flex; align-items: center; gap: 16px; padding: 20px; }
.app-live__orb { position: relative; flex-shrink: 0; width: 56px; height: 56px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; background: var(--pensiero-beige); color: var(--pensiero-text-secondary); }
.app-live__orb::after { content: ''; position: absolute; inset: -6px; border-radius: var(--radius-full); border: 1px solid transparent; }
.app-live:has(.status-indicator.connected) .app-live__orb { background: var(--pensiero-dark); color: var(--pensiero-dark-text); }
.app-live:has(.status-indicator.connected) .app-live__orb::after { border-color: var(--pensiero-orange); animation: orb-pulse 2s ease-in-out infinite; }
.app-live:has(.status-indicator.connecting) .app-live__orb::after { border-color: var(--pensiero-gold); border-top-color: transparent; animation: spin-slow 1.2s linear infinite; }
@keyframes orb-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.12); opacity: 0.4; } }
.app-live__text { min-width: 0; font-size: 14px; line-height: 1.5; color: var(--pensiero-text-secondary); }
.app-live__label { font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pensiero-text-tertiary); display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }

.status-indicator { width: 8px; height: 8px; border-radius: var(--radius-full); display: inline-block; background: var(--pensiero-text-tertiary); }
.status-indicator.connecting { background: var(--pensiero-gold); animation: pulse-subtle 1.2s ease-in-out infinite; }
.status-indicator.connected { background: var(--pensiero-success); animation: pulse-subtle 2s ease-in-out infinite; }

.app-controls { display: flex; flex-wrap: wrap; gap: 12px; }
.app-controls .p-btn { flex: 1 1 180px; }

.app-avatar { display: none; position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-xl); background: var(--pensiero-dark); align-items: center; justify-content: center; }
.app-avatar video { width: 100%; height: 100%; object-fit: cover; }
.app-avatar__placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: rgba(255, 255, 255, 0.5); font-size: 13px; }

.app-conversation { display: flex; flex-direction: column; min-height: 420px; }
.app-conversation__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--pensiero-border); }
.app-conversation__head .p-section-label { margin: 0; }
#transcript { flex: 1; max-height: 62vh; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 900px) { #transcript { max-height: 52vh; } .app-conversation { min-height: 280px; } }
#transcript .empty-state { margin: auto; padding: 32px 16px; text-align: center; font-size: 14px; color: var(--pensiero-text-tertiary); }
.message { max-width: 88%; padding: 12px 16px; border-radius: var(--radius-xl); background: var(--pensiero-beige); animation: fade-in-up 300ms ease forwards; }
.message.user { align-self: flex-end; background: var(--pensiero-white); border: 1px solid var(--pensiero-border); }
.message .role { font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pensiero-text-tertiary); margin-bottom: 2px; }
.message .text { font-size: 15px; line-height: 1.6; color: var(--pensiero-text); overflow-wrap: anywhere; }

/* The save/recovery notice the client shows and hides (D16) */
.notice { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius-xl); font-size: 14px; line-height: 1.5; color: var(--pensiero-text); background: var(--tint-warning); border: 1px solid color-mix(in srgb, var(--pensiero-warning) 35%, transparent); }
.notice.info { background: var(--pensiero-beige); border-color: var(--pensiero-border); }
.notice .notice-text { flex: 1 1 240px; }

.modality-badge, .test-mode { display: inline-block; margin-left: 8px; vertical-align: middle; }

/* Candidate-facing top bar: the hiring company, powered by Pensiero */
.app-brandbar { position: sticky; top: 0; z-index: 30; height: var(--topnav-h); padding: 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(4px); border-bottom: 1px solid var(--pensiero-border); }
.app-brandbar__company { font-family: var(--font-display); font-size: 20px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--pensiero-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .app-brandbar { padding: 0 16px; } .app-brandbar__company { font-size: 17px; } }