778e8526d4
- 누적 작업트리 커밋: 회기 평가 복구·durable 저장, 라이브 코치 이력/근거, 교수자 학생분석, 음성 비언어 메타, PII 마스킹, 운영 티켓/헬스 등 - 문서: 완료 기록 docs/archive/ 냉동 보관, docs/ 단일 인덱스(docs/README.md)+통합 TODO(docs/TODO.md)로 정리 - 리팩터(행위 보존): Stage enum SSOT(taxonomy 소유·state_machine re-export), store recent/masked_turns 중복 제거, speaker_ko_label 단일 헬퍼, _list_sessions N+1 제거(state/turns 배치 + 턴평가 하이드레이션 배치) - 검증: 백엔드 pytest 352 passed, _list_sessions E2E chromium-single-run 2 passed
1823 lines
38 KiB
CSS
1823 lines
38 KiB
CSS
.pf-root{
|
|
max-width:1280px;
|
|
margin:0 auto;
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:16px;
|
|
}
|
|
.pf-root--analysis{
|
|
max-width:1440px;
|
|
}
|
|
.pf-head{
|
|
display:flex;
|
|
align-items:flex-end;
|
|
justify-content:space-between;
|
|
gap:var(--sp-4);
|
|
flex-wrap:wrap;
|
|
}
|
|
.pf-head__actions{
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:flex-end;
|
|
gap:8px;
|
|
flex-wrap:wrap;
|
|
}
|
|
.pf-head h1{
|
|
margin:6px 0 0;
|
|
color:var(--text-strong);
|
|
font-size:var(--fs-h2);
|
|
line-height:1.28;
|
|
letter-spacing:0;
|
|
}
|
|
.pf-head p{
|
|
margin:6px 0 0;
|
|
max-width:760px;
|
|
color:var(--text-body);
|
|
font-size:var(--fs-xs);
|
|
line-height:1.55;
|
|
}
|
|
.pf-signal-strip{
|
|
order:1;
|
|
display:grid;
|
|
grid-template-columns:1fr;
|
|
gap:0;
|
|
min-width:0;
|
|
}
|
|
.pf-triage{
|
|
display:grid;
|
|
grid-template-columns:auto minmax(0,1fr) auto;
|
|
align-items:center;
|
|
gap:12px;
|
|
min-width:0;
|
|
padding:14px 16px;
|
|
border:1px solid var(--hair);
|
|
border-radius:var(--radius);
|
|
background:var(--bg-surface);
|
|
box-shadow:var(--shadow-sm);
|
|
}
|
|
.pf-triage.is-active{
|
|
background:color-mix(in srgb,var(--accent-tint) 42%,var(--bg-surface));
|
|
}
|
|
.pf-triage__copy{
|
|
min-width:0;
|
|
}
|
|
.pf-triage__copy .vg-kicker{
|
|
margin-bottom:4px;
|
|
}
|
|
.pf-triage__copy b{
|
|
display:block;
|
|
color:var(--text-strong);
|
|
font-size:var(--fs-body);
|
|
line-height:1.35;
|
|
}
|
|
.pf-triage__copy span,
|
|
.pf-triage__meta small{
|
|
color:var(--text-muted);
|
|
font-size:var(--fs-xs);
|
|
}
|
|
.pf-triage__meta{
|
|
display:grid;
|
|
grid-template-columns:repeat(2,minmax(0,1fr));
|
|
gap:0;
|
|
min-width:180px;
|
|
border:1px solid var(--border-subtle);
|
|
border-radius:var(--radius);
|
|
background:color-mix(in srgb,var(--bg-surface) 86%,transparent);
|
|
overflow:hidden;
|
|
}
|
|
.pf-triage__meta span{
|
|
display:grid;
|
|
align-content:center;
|
|
gap:2px;
|
|
padding:9px 12px;
|
|
}
|
|
.pf-triage__meta span + span{
|
|
border-left:1px solid var(--hair);
|
|
}
|
|
.pf-triage__meta b{
|
|
color:var(--text-strong);
|
|
font-family:var(--font-num);
|
|
font-size:17px;
|
|
line-height:1;
|
|
}
|
|
.pf-error{
|
|
display:flex;
|
|
align-items:center;
|
|
gap:10px;
|
|
padding:12px 14px;
|
|
border-radius:var(--radius);
|
|
background:var(--crit-tint);
|
|
color:var(--crit-text);
|
|
font-size:var(--fs-sm);
|
|
}
|
|
.pf-kpis{
|
|
display:grid;
|
|
grid-template-columns:repeat(6,minmax(0,1fr));
|
|
border:1px solid var(--hair);
|
|
border-radius:var(--radius);
|
|
overflow:hidden;
|
|
background:var(--bg-surface);
|
|
box-shadow:var(--shadow-sm);
|
|
}
|
|
.pf-kpi{
|
|
position:relative;
|
|
min-width:0;
|
|
padding:14px 16px;
|
|
display:grid;
|
|
grid-template-columns:minmax(0,1fr) auto;
|
|
gap:4px 10px;
|
|
}
|
|
.pf-kpi:nth-child(n+2){border-left:1px solid var(--hair);}
|
|
.pf-kpi:nth-child(n+4){border-top:0;}
|
|
.pf-kpi--primary,
|
|
.pf-kpi--warn{
|
|
background:color-mix(in srgb,var(--accent-tint) 32%,var(--bg-surface));
|
|
}
|
|
.pf-kpi--warn{
|
|
background:color-mix(in srgb,var(--warn-tint) 36%,var(--bg-surface));
|
|
}
|
|
.pf-kpi--primary .pf-kpi__ic{
|
|
color:var(--text-on-accent);
|
|
background:var(--accent);
|
|
}
|
|
.pf-kpi--warn .pf-kpi__ic{
|
|
color:var(--warn-text);
|
|
background:var(--warn-tint);
|
|
}
|
|
.pf-kpi__ic{
|
|
grid-column:2;
|
|
grid-row:1 / span 3;
|
|
width:30px;
|
|
height:30px;
|
|
display:grid;
|
|
place-items:center;
|
|
border-radius:var(--radius);
|
|
color:var(--accent);
|
|
background:var(--accent-tint);
|
|
}
|
|
.pf-kpi__lab{
|
|
display:block;
|
|
color:var(--text-muted);
|
|
font-size:var(--fs-xs);
|
|
font-weight:700;
|
|
}
|
|
.pf-kpi b{
|
|
display:block;
|
|
color:var(--text-strong);
|
|
font-family:var(--font-num);
|
|
font-size:24px;
|
|
line-height:1;
|
|
}
|
|
.pf-kpi small{
|
|
color:var(--text-muted);
|
|
font-size:12px;
|
|
line-height:1.35;
|
|
}
|
|
.pf-workspace{
|
|
order:4;
|
|
display:grid;
|
|
grid-template-columns:minmax(320px,390px) minmax(0,1fr);
|
|
align-items:start;
|
|
gap:14px;
|
|
min-width:0;
|
|
}
|
|
.pf-analysis-page{
|
|
order:2;
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:12px;
|
|
min-width:0;
|
|
}
|
|
.pf-analysis-workbench{
|
|
min-width:0;
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:10px;
|
|
}
|
|
.pf-analysis-detail-head{
|
|
display:grid;
|
|
grid-template-columns:auto minmax(0,1fr);
|
|
gap:10px;
|
|
align-items:center;
|
|
min-width:0;
|
|
}
|
|
.pf-depth-strip{
|
|
display:grid;
|
|
grid-template-columns:repeat(3,minmax(0,1fr));
|
|
min-width:0;
|
|
border:1px solid var(--hair);
|
|
border-radius:var(--radius);
|
|
overflow:hidden;
|
|
background:var(--bg-surface);
|
|
box-shadow:var(--shadow-sm);
|
|
}
|
|
.pf-depth-strip span{
|
|
min-width:0;
|
|
display:flex;
|
|
align-items:center;
|
|
gap:7px;
|
|
padding:10px 12px;
|
|
color:var(--text-muted);
|
|
font-size:var(--fs-xs);
|
|
font-weight:760;
|
|
white-space:nowrap;
|
|
}
|
|
.pf-depth-strip span + span{
|
|
border-left:1px solid var(--hair);
|
|
}
|
|
.pf-depth-strip small{
|
|
width:22px;
|
|
height:22px;
|
|
display:grid;
|
|
place-items:center;
|
|
border-radius:var(--radius-sm);
|
|
color:var(--text-muted);
|
|
background:var(--bg-surface-2);
|
|
font-family:var(--font-num);
|
|
line-height:1;
|
|
}
|
|
.pf-depth-strip .is-current{
|
|
color:var(--text-strong);
|
|
background:color-mix(in srgb,var(--accent-tint) 36%,var(--bg-surface));
|
|
}
|
|
.pf-depth-strip .is-current small{
|
|
color:var(--text-on-accent);
|
|
background:var(--accent);
|
|
}
|
|
.pf-queue-stack{
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:14px;
|
|
min-width:0;
|
|
}
|
|
.pf-section{
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:10px;
|
|
min-width:0;
|
|
}
|
|
.pf-section__head{
|
|
display:flex;
|
|
align-items:flex-end;
|
|
justify-content:space-between;
|
|
gap:12px;
|
|
}
|
|
.pf-section__head h2{
|
|
margin:4px 0 0;
|
|
color:var(--text-strong);
|
|
font-size:var(--fs-body);
|
|
font-weight:700;
|
|
line-height:1.3;
|
|
letter-spacing:0;
|
|
}
|
|
.pf-panel{
|
|
padding:0;
|
|
overflow:hidden;
|
|
}
|
|
.pf-studio-card{
|
|
display:grid;
|
|
grid-template-columns:minmax(0,1fr) auto;
|
|
gap:14px;
|
|
align-items:center;
|
|
padding:14px;
|
|
background:linear-gradient(180deg,var(--bg-surface),color-mix(in srgb,var(--accent-tint) 18%,var(--bg-surface)));
|
|
}
|
|
.pf-studio-card__copy{
|
|
min-width:0;
|
|
display:grid;
|
|
gap:7px;
|
|
}
|
|
.pf-studio-card__copy b{
|
|
color:var(--text-strong);
|
|
font-size:var(--fs-body);
|
|
}
|
|
.pf-studio-card__copy p{
|
|
margin:0;
|
|
color:var(--text-muted);
|
|
font-size:var(--fs-xs);
|
|
line-height:1.55;
|
|
}
|
|
.pf-studio-card__meta{
|
|
display:flex;
|
|
flex-wrap:wrap;
|
|
gap:6px;
|
|
}
|
|
.pf-studio-card__meta span{
|
|
padding:4px 7px;
|
|
border:1px solid var(--hair);
|
|
border-radius:var(--radius-sm);
|
|
color:var(--text-body);
|
|
background:var(--bg-surface-2);
|
|
font-size:11px;
|
|
line-height:1.2;
|
|
}
|
|
.pf-studio-card__actions{
|
|
display:flex;
|
|
justify-content:flex-end;
|
|
}
|
|
.pf-section--growth{
|
|
order:2;
|
|
min-width:0;
|
|
}
|
|
.pf-section--learner-analysis{
|
|
order:3;
|
|
min-width:0;
|
|
}
|
|
.pf-growth-panel{
|
|
background:linear-gradient(180deg,var(--bg-surface),color-mix(in srgb,var(--accent-tint) 18%,var(--bg-surface)));
|
|
}
|
|
.pf-learner-overview{
|
|
background:linear-gradient(180deg,var(--bg-surface),color-mix(in srgb,var(--bg-surface-2) 72%,var(--bg-surface)));
|
|
}
|
|
.pf-learner-toolbar{
|
|
display:grid;
|
|
grid-template-columns:minmax(240px,.72fr) auto;
|
|
gap:10px;
|
|
align-items:center;
|
|
padding:12px;
|
|
border-bottom:1px solid var(--hair);
|
|
background:color-mix(in srgb,var(--bg-surface) 86%,var(--bg-surface-2));
|
|
}
|
|
.pf-search-field{
|
|
min-width:0;
|
|
display:grid;
|
|
grid-template-columns:auto minmax(0,1fr);
|
|
gap:8px;
|
|
align-items:center;
|
|
padding:9px 10px;
|
|
border:1px solid var(--paper-2);
|
|
border-radius:var(--radius);
|
|
color:var(--text-muted);
|
|
background:var(--bg-surface-2);
|
|
}
|
|
.pf-search-field input{
|
|
min-width:0;
|
|
border:0;
|
|
outline:0;
|
|
color:var(--text-strong);
|
|
background:transparent;
|
|
font:inherit;
|
|
font-size:var(--fs-sm);
|
|
}
|
|
.pf-search-field input::placeholder{
|
|
color:var(--text-muted);
|
|
}
|
|
.pf-sort-segment{
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:flex-end;
|
|
gap:0;
|
|
border:1px solid var(--paper-2);
|
|
border-radius:var(--radius);
|
|
overflow:hidden;
|
|
background:var(--bg-surface-2);
|
|
}
|
|
.pf-sort-segment button{
|
|
min-height:38px;
|
|
padding:0 11px;
|
|
border:0;
|
|
border-left:1px solid var(--hair);
|
|
color:var(--text-muted);
|
|
background:transparent;
|
|
font:inherit;
|
|
font-size:var(--fs-xs);
|
|
font-weight:760;
|
|
cursor:pointer;
|
|
white-space:nowrap;
|
|
}
|
|
.pf-sort-segment button:first-child{
|
|
border-left:0;
|
|
}
|
|
.pf-sort-segment button:hover,
|
|
.pf-sort-segment button:focus-visible{
|
|
color:var(--text-strong);
|
|
background:var(--bg-surface);
|
|
}
|
|
.pf-sort-segment button:focus-visible{
|
|
outline:2px solid var(--accent);
|
|
outline-offset:-2px;
|
|
}
|
|
.pf-sort-segment button.is-active{
|
|
color:var(--text-on-accent);
|
|
background:var(--accent);
|
|
}
|
|
.pf-learner-table{
|
|
min-width:0;
|
|
display:flex;
|
|
flex-direction:column;
|
|
overflow-x:auto;
|
|
scrollbar-gutter:stable;
|
|
}
|
|
.pf-learner-table__head,
|
|
.pf-learner-row{
|
|
display:grid;
|
|
grid-template-columns:
|
|
minmax(178px,1.3fr)
|
|
minmax(86px,.55fr)
|
|
minmax(76px,.48fr)
|
|
minmax(64px,.42fr)
|
|
minmax(76px,.48fr)
|
|
minmax(70px,.42fr)
|
|
minmax(112px,.72fr)
|
|
48px
|
|
minmax(104px,.5fr);
|
|
gap:9px;
|
|
align-items:center;
|
|
min-width:1000px;
|
|
}
|
|
.pf-learner-table__head{
|
|
position:sticky;
|
|
top:0;
|
|
z-index:1;
|
|
padding:9px 12px;
|
|
border-bottom:1px solid var(--hair);
|
|
color:var(--text-muted);
|
|
background:var(--bg-surface);
|
|
font-size:var(--fs-xs);
|
|
font-weight:800;
|
|
white-space:nowrap;
|
|
}
|
|
.pf-learner-record{
|
|
min-width:1000px;
|
|
border-top:1px solid var(--paper-2);
|
|
}
|
|
.pf-learner-table__head + .pf-learner-record{
|
|
border-top:0;
|
|
}
|
|
.pf-learner-row{
|
|
padding:10px 12px;
|
|
}
|
|
.pf-learner-record:hover .pf-learner-row,
|
|
.pf-learner-record.is-expanded .pf-learner-row{
|
|
background:color-mix(in srgb,var(--accent-tint) 14%,transparent);
|
|
}
|
|
.pf-learner-row__id,
|
|
.pf-learner-row__metric,
|
|
.pf-learner-row__trend,
|
|
.pf-learner-row__tag-summary,
|
|
.pf-learner-row__tags{
|
|
min-width:0;
|
|
}
|
|
.pf-learner-row__id{
|
|
display:grid;
|
|
gap:3px;
|
|
}
|
|
.pf-learner-name-button{
|
|
width:max-content;
|
|
max-width:100%;
|
|
padding:0;
|
|
border:0;
|
|
color:var(--text-strong);
|
|
background:transparent;
|
|
font:inherit;
|
|
font-size:var(--fs-sm);
|
|
font-weight:820;
|
|
line-height:1.35;
|
|
text-align:left;
|
|
cursor:pointer;
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
white-space:nowrap;
|
|
}
|
|
.pf-learner-name-button:hover,
|
|
.pf-learner-name-button:focus-visible{
|
|
color:var(--accent-deep);
|
|
text-decoration:underline;
|
|
text-underline-offset:3px;
|
|
}
|
|
.pf-learner-name-button:focus-visible{
|
|
outline:2px solid var(--accent);
|
|
outline-offset:2px;
|
|
}
|
|
.pf-learner-row__id span,
|
|
.pf-learner-row__metric span,
|
|
.pf-learner-row__tag-summary span{
|
|
color:var(--text-muted);
|
|
font-size:11px;
|
|
line-height:1.3;
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
white-space:nowrap;
|
|
}
|
|
.pf-learner-row__metric{
|
|
display:grid;
|
|
gap:3px;
|
|
}
|
|
.pf-learner-row__metric::before,
|
|
.pf-learner-row__trend::before,
|
|
.pf-learner-row__tag-summary::before,
|
|
.pf-learner-row__tags::before{
|
|
display:none;
|
|
content:attr(data-label);
|
|
color:var(--text-muted);
|
|
font-size:var(--fs-xs);
|
|
font-weight:800;
|
|
}
|
|
.pf-learner-row__metric b{
|
|
color:var(--text-strong);
|
|
font-family:var(--font-num);
|
|
font-size:15px;
|
|
line-height:1.15;
|
|
white-space:nowrap;
|
|
}
|
|
.pf-learner-row__trend{
|
|
display:flex;
|
|
align-items:center;
|
|
min-height:30px;
|
|
}
|
|
.pf-learner-row__tag-summary{
|
|
display:grid;
|
|
gap:3px;
|
|
}
|
|
.pf-learner-row__tag-summary b{
|
|
min-width:0;
|
|
color:var(--text-body);
|
|
font-size:var(--fs-xs);
|
|
font-weight:760;
|
|
line-height:1.25;
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
white-space:nowrap;
|
|
}
|
|
.pf-learner-spark{
|
|
min-width:0;
|
|
height:46px;
|
|
display:flex;
|
|
align-items:flex-end;
|
|
gap:4px;
|
|
padding:6px 6px 4px;
|
|
border:1px solid var(--paper-2);
|
|
border-radius:var(--radius-sm);
|
|
background:var(--bg-surface-2);
|
|
}
|
|
.pf-learner-spark .pf-growth-bar{
|
|
min-width:10px;
|
|
}
|
|
.pf-learner-spark .pf-growth-bar small{
|
|
display:none;
|
|
}
|
|
.pf-learner-row__tags{
|
|
display:flex;
|
|
flex-wrap:wrap;
|
|
gap:5px;
|
|
}
|
|
.pf-learner-row__tags span{
|
|
max-width:100%;
|
|
padding:4px 7px;
|
|
border:1px solid var(--paper-2);
|
|
border-radius:999px;
|
|
color:var(--text-body);
|
|
background:var(--bg-surface-2);
|
|
font-size:11px;
|
|
line-height:1.2;
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
white-space:nowrap;
|
|
}
|
|
.pf-learner-row__expand{
|
|
display:flex;
|
|
justify-content:center;
|
|
}
|
|
.pf-icon-action{
|
|
width:34px;
|
|
height:34px;
|
|
display:inline-grid;
|
|
place-items:center;
|
|
border:1px solid var(--paper-2);
|
|
border-radius:var(--radius-sm);
|
|
color:var(--text-muted);
|
|
background:var(--bg-surface-2);
|
|
cursor:pointer;
|
|
}
|
|
.pf-icon-action:hover,
|
|
.pf-icon-action:focus-visible,
|
|
.pf-icon-action[aria-expanded="true"]{
|
|
color:var(--accent-deep);
|
|
border-color:var(--accent);
|
|
background:var(--accent-tint);
|
|
}
|
|
.pf-icon-action:focus-visible{
|
|
outline:2px solid var(--accent);
|
|
outline-offset:2px;
|
|
}
|
|
.pf-learner-row__action{
|
|
display:flex;
|
|
justify-content:flex-end;
|
|
}
|
|
.pf-learner-row__action .vg-btn{
|
|
min-width:96px;
|
|
padding-inline:10px;
|
|
}
|
|
.pf-learner-row-detail{
|
|
min-width:1000px;
|
|
display:grid;
|
|
grid-template-columns:minmax(260px,1.4fr) minmax(140px,.72fr) minmax(170px,.85fr) minmax(190px,1fr);
|
|
gap:0;
|
|
padding:0 12px 12px;
|
|
background:color-mix(in srgb,var(--accent-tint) 12%,transparent);
|
|
}
|
|
.pf-learner-detail-item{
|
|
min-width:0;
|
|
display:grid;
|
|
align-content:start;
|
|
gap:5px;
|
|
padding:11px 12px;
|
|
border-top:1px solid var(--hair);
|
|
border-left:1px solid var(--hair);
|
|
background:color-mix(in srgb,var(--bg-surface) 90%,var(--bg-surface-2));
|
|
}
|
|
.pf-learner-detail-item:first-child{
|
|
border-left:0;
|
|
}
|
|
.pf-learner-detail-item > span{
|
|
color:var(--text-muted);
|
|
font-size:var(--fs-xs);
|
|
font-weight:800;
|
|
line-height:1.25;
|
|
}
|
|
.pf-learner-detail-item > b{
|
|
min-width:0;
|
|
color:var(--text-strong);
|
|
font-family:var(--font-num);
|
|
font-size:14px;
|
|
line-height:1.2;
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
white-space:nowrap;
|
|
}
|
|
.pf-learner-detail-item > small{
|
|
color:var(--text-muted);
|
|
font-size:11px;
|
|
line-height:1.3;
|
|
}
|
|
.pf-learner-detail-item--trend{
|
|
gap:8px;
|
|
}
|
|
.pf-learner-detail-item--tags .pf-learner-row__tags{
|
|
align-self:center;
|
|
}
|
|
.pf-recent__review-state{
|
|
color:var(--text-muted);
|
|
font-size:12px;
|
|
line-height:1.4;
|
|
}
|
|
.pf-recent__review-state{
|
|
display:block;
|
|
margin-top:3px;
|
|
line-height:1.2;
|
|
}
|
|
.pf-growth-bar{
|
|
flex:1 1 0;
|
|
min-width:14px;
|
|
height:100%;
|
|
display:grid;
|
|
grid-template-rows:minmax(0,1fr) 14px;
|
|
gap:4px;
|
|
align-items:end;
|
|
}
|
|
.pf-growth-bar i{
|
|
display:block;
|
|
width:100%;
|
|
min-height:6px;
|
|
border-radius:6px 6px 3px 3px;
|
|
background:linear-gradient(180deg,var(--accent),var(--accent-deep));
|
|
}
|
|
.pf-growth-bar.is-empty i{
|
|
background:repeating-linear-gradient(135deg,var(--paper-2),var(--paper-2) 3px,var(--hair) 3px,var(--hair) 6px);
|
|
}
|
|
.pf-growth-bar small{
|
|
color:var(--text-muted);
|
|
font-family:var(--font-num);
|
|
font-size:10px;
|
|
text-align:center;
|
|
line-height:1;
|
|
}
|
|
.pf-analysis-panel{
|
|
background:linear-gradient(180deg,var(--bg-surface),color-mix(in srgb,var(--bg-surface-2) 72%,var(--bg-surface)));
|
|
}
|
|
.pf-analysis{
|
|
min-width:0;
|
|
display:grid;
|
|
gap:12px;
|
|
padding:12px;
|
|
}
|
|
.pf-analysis-tabs{
|
|
min-width:0;
|
|
display:grid;
|
|
grid-template-columns:repeat(3,minmax(0,1fr));
|
|
border:1px solid var(--paper-2);
|
|
border-radius:var(--radius-sm);
|
|
overflow:hidden;
|
|
background:var(--bg-surface-2);
|
|
}
|
|
.pf-analysis-tabs button{
|
|
min-width:0;
|
|
min-height:48px;
|
|
display:grid;
|
|
gap:3px;
|
|
align-content:center;
|
|
padding:8px 12px;
|
|
border:0;
|
|
border-left:1px solid var(--hair);
|
|
color:var(--text-muted);
|
|
background:transparent;
|
|
font:inherit;
|
|
text-align:left;
|
|
cursor:pointer;
|
|
}
|
|
.pf-analysis-tabs button:first-child{
|
|
border-left:0;
|
|
}
|
|
.pf-analysis-tabs button:hover,
|
|
.pf-analysis-tabs button:focus-visible{
|
|
background:var(--bg-surface);
|
|
}
|
|
.pf-analysis-tabs button:focus-visible{
|
|
outline:2px solid var(--accent);
|
|
outline-offset:-2px;
|
|
}
|
|
.pf-analysis-tabs button.is-active{
|
|
color:var(--text-strong);
|
|
background:color-mix(in srgb,var(--accent-tint) 32%,var(--bg-surface));
|
|
}
|
|
.pf-analysis-tabs b{
|
|
font-size:var(--fs-sm);
|
|
line-height:1.2;
|
|
}
|
|
.pf-analysis-tabs span{
|
|
color:var(--text-muted);
|
|
font-size:11px;
|
|
line-height:1.2;
|
|
}
|
|
.pf-analysis__top{
|
|
min-width:0;
|
|
display:grid;
|
|
grid-template-columns:minmax(210px,.42fr) minmax(0,1fr);
|
|
gap:12px;
|
|
align-items:stretch;
|
|
}
|
|
.pf-analysis__title{
|
|
min-width:0;
|
|
display:grid;
|
|
align-content:center;
|
|
gap:5px;
|
|
padding:12px;
|
|
border:1px solid var(--paper-2);
|
|
border-radius:var(--radius-sm);
|
|
background:var(--bg-surface-2);
|
|
}
|
|
.pf-analysis__title b{
|
|
color:var(--text-strong);
|
|
font-size:var(--fs-body);
|
|
line-height:1.35;
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
white-space:nowrap;
|
|
}
|
|
.pf-analysis__title span{
|
|
color:var(--text-muted);
|
|
font-size:var(--fs-xs);
|
|
line-height:1.45;
|
|
overflow-wrap:anywhere;
|
|
}
|
|
.pf-analysis__metrics{
|
|
min-width:0;
|
|
display:grid;
|
|
grid-template-columns:repeat(6,minmax(0,1fr));
|
|
border:1px solid var(--paper-2);
|
|
border-radius:var(--radius-sm);
|
|
background:var(--bg-surface-2);
|
|
overflow:hidden;
|
|
}
|
|
.pf-analysis__metrics span{
|
|
min-width:0;
|
|
display:grid;
|
|
align-content:center;
|
|
gap:4px;
|
|
padding:10px 11px;
|
|
}
|
|
.pf-analysis__metrics span + span{
|
|
border-left:1px solid var(--hair);
|
|
}
|
|
.pf-analysis__metrics small,
|
|
.pf-stage-item small,
|
|
.pf-timeline-row__metrics small{
|
|
color:var(--text-muted);
|
|
font-size:11px;
|
|
line-height:1.2;
|
|
}
|
|
.pf-analysis__metrics b,
|
|
.pf-stage-item b,
|
|
.pf-timeline-row__metrics b{
|
|
min-width:0;
|
|
color:var(--text-strong);
|
|
font-family:var(--font-num);
|
|
font-size:15px;
|
|
line-height:1.15;
|
|
white-space:nowrap;
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
}
|
|
.pf-analysis__chart,
|
|
.pf-analysis__stages,
|
|
.pf-analysis__personas,
|
|
.pf-analysis__timeline{
|
|
min-width:0;
|
|
border:1px solid var(--paper-2);
|
|
border-radius:var(--radius-sm);
|
|
background:color-mix(in srgb,var(--bg-surface) 84%,var(--bg-surface-2));
|
|
overflow:hidden;
|
|
}
|
|
.pf-analysis__subhead{
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:space-between;
|
|
gap:10px;
|
|
min-width:0;
|
|
padding:10px 12px;
|
|
border-bottom:1px solid var(--hair);
|
|
}
|
|
.pf-analysis__subhead b{
|
|
color:var(--text-strong);
|
|
font-size:var(--fs-sm);
|
|
line-height:1.35;
|
|
}
|
|
.pf-analysis__subhead span{
|
|
color:var(--text-muted);
|
|
font-size:var(--fs-xs);
|
|
white-space:nowrap;
|
|
}
|
|
.pf-analysis-bars{
|
|
height:118px;
|
|
display:flex;
|
|
align-items:flex-end;
|
|
gap:7px;
|
|
padding:12px;
|
|
overflow-x:auto;
|
|
scrollbar-gutter:stable;
|
|
}
|
|
.pf-analysis-bars .pf-growth-bar{
|
|
flex:0 0 34px;
|
|
}
|
|
.pf-stage-list{
|
|
display:grid;
|
|
grid-template-columns:repeat(4,minmax(0,1fr));
|
|
}
|
|
.pf-stage-item{
|
|
min-width:0;
|
|
display:grid;
|
|
gap:4px;
|
|
padding:12px;
|
|
border-left:1px solid var(--hair);
|
|
}
|
|
.pf-stage-item:first-child{
|
|
border-left:0;
|
|
}
|
|
.pf-stage-item span{
|
|
color:var(--text-muted);
|
|
font-size:var(--fs-xs);
|
|
font-weight:700;
|
|
}
|
|
.pf-persona-drill{
|
|
display:flex;
|
|
flex-direction:column;
|
|
max-height:min(580px,62vh);
|
|
overflow:auto;
|
|
scrollbar-gutter:stable;
|
|
}
|
|
.pf-persona-group{
|
|
min-width:0;
|
|
border-top:1px solid var(--paper-2);
|
|
}
|
|
.pf-persona-group:first-child{
|
|
border-top:0;
|
|
}
|
|
.pf-persona-group__summary{
|
|
width:100%;
|
|
min-width:0;
|
|
display:grid;
|
|
grid-template-columns:44px minmax(160px,1fr) minmax(260px,.92fr) auto;
|
|
gap:10px;
|
|
align-items:center;
|
|
padding:12px;
|
|
border:0;
|
|
background:transparent;
|
|
color:inherit;
|
|
font:inherit;
|
|
text-align:left;
|
|
cursor:pointer;
|
|
}
|
|
.pf-persona-group__summary:hover,
|
|
.pf-persona-group.is-open .pf-persona-group__summary{
|
|
background:var(--bg-surface-2);
|
|
}
|
|
.pf-persona-group__summary:focus-visible{
|
|
outline:2px solid var(--accent);
|
|
outline-offset:-2px;
|
|
}
|
|
.pf-persona-group__code{
|
|
width:38px;
|
|
height:34px;
|
|
display:grid;
|
|
place-items:center;
|
|
border-radius:var(--radius-sm);
|
|
color:var(--accent-deep);
|
|
background:var(--accent-tint);
|
|
font-family:var(--font-num);
|
|
font-size:12px;
|
|
font-weight:830;
|
|
}
|
|
.pf-persona-group__main{
|
|
min-width:0;
|
|
display:grid;
|
|
gap:4px;
|
|
}
|
|
.pf-persona-group__main b{
|
|
color:var(--text-strong);
|
|
font-size:var(--fs-sm);
|
|
line-height:1.35;
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
white-space:nowrap;
|
|
}
|
|
.pf-persona-group__main small{
|
|
color:var(--text-muted);
|
|
font-size:12px;
|
|
line-height:1.35;
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
white-space:nowrap;
|
|
}
|
|
.pf-persona-group__metrics{
|
|
min-width:0;
|
|
display:grid;
|
|
grid-template-columns:repeat(4,minmax(58px,1fr));
|
|
gap:7px;
|
|
}
|
|
.pf-persona-group__metrics span{
|
|
min-width:0;
|
|
display:grid;
|
|
gap:3px;
|
|
}
|
|
.pf-persona-group__metrics small{
|
|
color:var(--text-muted);
|
|
font-size:11px;
|
|
line-height:1.2;
|
|
}
|
|
.pf-persona-group__metrics b{
|
|
min-width:0;
|
|
color:var(--text-strong);
|
|
font-family:var(--font-num);
|
|
font-size:15px;
|
|
line-height:1.15;
|
|
white-space:nowrap;
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
}
|
|
.pf-persona-group__open{
|
|
display:inline-flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
gap:4px;
|
|
min-height:30px;
|
|
padding:0 8px;
|
|
border:1px solid var(--hair);
|
|
border-radius:var(--radius-sm);
|
|
color:var(--accent-deep);
|
|
background:var(--accent-tint);
|
|
font-size:var(--fs-xs);
|
|
font-weight:760;
|
|
white-space:nowrap;
|
|
}
|
|
.pf-persona-group__summary:hover .pf-persona-group__open{
|
|
border-color:var(--accent);
|
|
}
|
|
.pf-persona-sessions{
|
|
margin:0 12px 12px 56px;
|
|
border:1px solid var(--paper-2);
|
|
border-radius:var(--radius-sm);
|
|
overflow:hidden;
|
|
background:var(--bg-surface);
|
|
}
|
|
.pf-persona-sessions .pf-timeline-row{
|
|
grid-template-columns:34px minmax(150px,1fr) minmax(200px,.82fr) minmax(104px,.42fr) auto;
|
|
padding:10px;
|
|
}
|
|
.pf-persona-sessions .pf-timeline-row__step{
|
|
width:28px;
|
|
height:28px;
|
|
}
|
|
.pf-timeline{
|
|
max-height:min(520px,58vh);
|
|
overflow:auto;
|
|
scrollbar-gutter:stable;
|
|
display:flex;
|
|
flex-direction:column;
|
|
}
|
|
.pf-timeline-row{
|
|
width:100%;
|
|
font:inherit;
|
|
text-align:left;
|
|
color:inherit;
|
|
background:transparent;
|
|
display:grid;
|
|
grid-template-columns:38px minmax(170px,1fr) minmax(210px,.82fr) minmax(112px,.42fr) auto;
|
|
gap:10px;
|
|
align-items:center;
|
|
padding:12px;
|
|
border:0;
|
|
border-top:1px solid var(--paper-2);
|
|
cursor:pointer;
|
|
}
|
|
.pf-timeline-row:first-child{
|
|
border-top:0;
|
|
}
|
|
.pf-timeline-row:hover{
|
|
background:var(--bg-surface-2);
|
|
}
|
|
.pf-timeline-row:focus-visible{
|
|
outline:2px solid var(--accent);
|
|
outline-offset:-2px;
|
|
}
|
|
.pf-timeline-row__step{
|
|
width:32px;
|
|
height:32px;
|
|
display:grid;
|
|
place-items:center;
|
|
border-radius:var(--radius-sm);
|
|
color:var(--accent-deep);
|
|
background:var(--accent-tint);
|
|
font-family:var(--font-num);
|
|
font-weight:800;
|
|
}
|
|
.pf-timeline-row__main{
|
|
min-width:0;
|
|
display:grid;
|
|
gap:3px;
|
|
}
|
|
.pf-timeline-row__main b{
|
|
color:var(--text-strong);
|
|
font-size:var(--fs-sm);
|
|
line-height:1.35;
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
white-space:nowrap;
|
|
}
|
|
.pf-timeline-row__main span,
|
|
.pf-timeline-row__main code,
|
|
.pf-timeline-row__dates span{
|
|
color:var(--text-muted);
|
|
font-size:12px;
|
|
line-height:1.35;
|
|
}
|
|
.pf-timeline-row__main span{
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
white-space:nowrap;
|
|
}
|
|
.pf-timeline-row__main code{
|
|
font-family:var(--font-num);
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
white-space:nowrap;
|
|
}
|
|
.pf-timeline-row__metrics{
|
|
min-width:0;
|
|
display:grid;
|
|
grid-template-columns:minmax(58px,.8fr) minmax(58px,.8fr) minmax(86px,1.12fr);
|
|
gap:7px;
|
|
}
|
|
.pf-timeline-row__metrics span{
|
|
min-width:0;
|
|
display:grid;
|
|
gap:3px;
|
|
}
|
|
.pf-timeline-row__metrics .vg-badge{
|
|
justify-self:start;
|
|
white-space:nowrap;
|
|
}
|
|
.pf-timeline-row__dates{
|
|
display:grid;
|
|
gap:3px;
|
|
min-width:0;
|
|
font-family:var(--font-num);
|
|
}
|
|
.pf-timeline-row__open{
|
|
display:inline-flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
gap:4px;
|
|
min-height:30px;
|
|
padding:0 8px;
|
|
border:1px solid var(--hair);
|
|
border-radius:var(--radius-sm);
|
|
color:var(--accent-deep);
|
|
background:var(--accent-tint);
|
|
font-size:var(--fs-xs);
|
|
font-weight:760;
|
|
white-space:nowrap;
|
|
}
|
|
.pf-timeline-row:hover .pf-timeline-row__open{
|
|
border-color:var(--accent);
|
|
}
|
|
.pf-empty{
|
|
min-height:118px;
|
|
display:grid;
|
|
place-items:center;
|
|
gap:6px;
|
|
padding:var(--sp-5);
|
|
text-align:center;
|
|
}
|
|
.pf-empty b{
|
|
color:var(--text-strong);
|
|
font-size:var(--fs-body);
|
|
}
|
|
.pf-empty span{
|
|
color:var(--text-muted);
|
|
font-size:var(--fs-xs);
|
|
}
|
|
.pf-list{
|
|
max-height:min(320px,42vh);
|
|
overflow:auto;
|
|
scrollbar-gutter:stable;
|
|
display:flex;
|
|
flex-direction:column;
|
|
}
|
|
.pf-personas{
|
|
max-height:min(320px,42vh);
|
|
overflow:auto;
|
|
scrollbar-gutter:stable;
|
|
display:flex;
|
|
flex-direction:column;
|
|
}
|
|
.pf-persona{
|
|
display:grid;
|
|
grid-template-columns:minmax(0,1fr);
|
|
gap:8px;
|
|
align-items:start;
|
|
padding:12px;
|
|
border-top:1px solid var(--paper-2);
|
|
}
|
|
.pf-persona:first-child{border-top:0;}
|
|
.pf-persona__main{
|
|
min-width:0;
|
|
display:grid;
|
|
grid-template-columns:40px minmax(0,1fr);
|
|
gap:10px;
|
|
align-items:center;
|
|
}
|
|
.pf-persona__code{
|
|
width:40px;
|
|
height:32px;
|
|
display:grid;
|
|
place-items:center;
|
|
border-radius:var(--radius);
|
|
color:var(--accent-deep);
|
|
background:var(--accent-tint);
|
|
font-family:var(--font-num);
|
|
font-weight:800;
|
|
font-size:12px;
|
|
}
|
|
.pf-persona__main b{
|
|
display:block;
|
|
color:var(--text-strong);
|
|
font-size:var(--fs-sm);
|
|
line-height:1.35;
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
white-space:nowrap;
|
|
}
|
|
.pf-persona__main span,
|
|
.pf-persona p,
|
|
.pf-persona__meta span{
|
|
color:var(--text-muted);
|
|
font-size:var(--fs-xs);
|
|
line-height:1.45;
|
|
}
|
|
.pf-persona p{
|
|
margin:0;
|
|
min-width:0;
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
white-space:nowrap;
|
|
}
|
|
.pf-persona__meta{
|
|
display:flex;
|
|
align-items:center;
|
|
gap:10px;
|
|
justify-content:space-between;
|
|
white-space:nowrap;
|
|
}
|
|
.pf-persona__actions{
|
|
display:flex;
|
|
justify-content:flex-end;
|
|
gap:8px;
|
|
min-width:0;
|
|
}
|
|
.pf-persona__actions .vg-btn{
|
|
min-width:72px;
|
|
padding-inline:10px;
|
|
}
|
|
.pf-alerts{
|
|
max-height:min(300px,38vh);
|
|
overflow:auto;
|
|
scrollbar-gutter:stable;
|
|
display:flex;
|
|
flex-direction:column;
|
|
}
|
|
.pf-alert{
|
|
display:grid;
|
|
grid-template-columns:auto minmax(0,1fr) auto;
|
|
gap:10px;
|
|
align-items:center;
|
|
padding:12px;
|
|
border-top:1px solid var(--paper-2);
|
|
background:color-mix(in srgb,var(--warn-tint) 34%,transparent);
|
|
}
|
|
.pf-alert:first-child{border-top:0;}
|
|
.pf-alert__ic{
|
|
width:30px;
|
|
height:30px;
|
|
display:grid;
|
|
place-items:center;
|
|
border-radius:var(--radius);
|
|
color:var(--warn-text);
|
|
background:var(--warn-tint);
|
|
}
|
|
.pf-alert__main{
|
|
min-width:0;
|
|
display:grid;
|
|
gap:3px;
|
|
}
|
|
.pf-alert__main b{
|
|
color:var(--text-strong);
|
|
font-size:var(--fs-sm);
|
|
}
|
|
.pf-alert__main span,
|
|
.pf-alert__main code,
|
|
.pf-alert__resource span{
|
|
color:var(--text-muted);
|
|
font-size:12px;
|
|
}
|
|
.pf-alert__main code{
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
white-space:nowrap;
|
|
}
|
|
.pf-alert__resource{
|
|
display:grid;
|
|
gap:2px;
|
|
justify-items:end;
|
|
min-width:86px;
|
|
}
|
|
.pf-alert__resource b{
|
|
color:var(--warn-text);
|
|
font-family:var(--font-num);
|
|
font-size:18px;
|
|
}
|
|
.pf-session{
|
|
width:100%;
|
|
font:inherit;
|
|
text-align:left;
|
|
background:transparent;
|
|
color:inherit;
|
|
display:grid;
|
|
grid-template-columns:8px minmax(0,1fr) auto;
|
|
gap:8px 10px;
|
|
align-items:start;
|
|
padding:12px;
|
|
border:0;
|
|
border-top:1px solid var(--paper-2);
|
|
cursor:default;
|
|
}
|
|
.pf-session:first-child{border-top:0;}
|
|
.pf-session--action{
|
|
cursor:pointer;
|
|
}
|
|
.pf-session--action:hover{
|
|
background:var(--bg-surface-2);
|
|
}
|
|
.pf-session--action:focus-visible{
|
|
outline:2px solid var(--accent);
|
|
outline-offset:-2px;
|
|
}
|
|
.pf-session__dot{
|
|
width:8px;
|
|
height:8px;
|
|
border-radius:50%;
|
|
background:var(--accent);
|
|
}
|
|
.pf-session__main{
|
|
min-width:0;
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:3px;
|
|
}
|
|
.pf-session__main b{
|
|
color:var(--text-strong);
|
|
font-size:var(--fs-sm);
|
|
}
|
|
.pf-session__main span,.pf-session__main code{
|
|
color:var(--text-muted);
|
|
font-size:var(--fs-xs);
|
|
overflow-wrap:anywhere;
|
|
}
|
|
.pf-session__main code,.pf-recent__learner code{
|
|
font-family:var(--font-num);
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
}
|
|
.pf-session__meta{
|
|
grid-column:2 / 4;
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:space-between;
|
|
gap:8px;
|
|
color:var(--text-muted);
|
|
font-family:var(--font-num);
|
|
font-size:var(--fs-xs);
|
|
white-space:normal;
|
|
}
|
|
.pf-session__open{
|
|
grid-column:3;
|
|
grid-row:1;
|
|
display:inline-flex;
|
|
align-items:center;
|
|
gap:5px;
|
|
align-self:center;
|
|
justify-self:end;
|
|
min-height:30px;
|
|
padding:0 9px;
|
|
border:1px solid var(--hair);
|
|
border-radius:var(--radius-sm);
|
|
color:var(--accent-deep);
|
|
background:var(--accent-tint);
|
|
font-size:var(--fs-xs);
|
|
font-weight:760;
|
|
white-space:nowrap;
|
|
}
|
|
.pf-session--action:hover .pf-session__open{
|
|
border-color:var(--accent);
|
|
}
|
|
.pf-recent-list{
|
|
max-height:min(620px,calc(100vh - 220px));
|
|
overflow:auto;
|
|
scrollbar-gutter:stable;
|
|
min-width:0;
|
|
}
|
|
.pf-recent-head,
|
|
.pf-recent-row{
|
|
display:grid;
|
|
grid-template-columns:
|
|
minmax(128px,1.25fr)
|
|
minmax(58px,.55fr)
|
|
minmax(66px,.55fr)
|
|
minmax(82px,.85fr)
|
|
minmax(32px,.35fr)
|
|
minmax(70px,.6fr)
|
|
minmax(66px,.55fr)
|
|
minmax(86px,.65fr);
|
|
align-items:center;
|
|
gap:8px;
|
|
min-width:0;
|
|
}
|
|
.pf-recent-head{
|
|
position:sticky;
|
|
top:0;
|
|
z-index:1;
|
|
color:var(--text-muted);
|
|
font-size:var(--fs-xs);
|
|
font-weight:700;
|
|
padding:9px 12px;
|
|
border-bottom:1px solid var(--hair);
|
|
background:var(--bg-surface);
|
|
white-space:nowrap;
|
|
}
|
|
.pf-recent-row{
|
|
width:100%;
|
|
font:inherit;
|
|
text-align:left;
|
|
color:inherit;
|
|
background:transparent;
|
|
padding:10px 12px;
|
|
border:0;
|
|
border-top:1px solid var(--paper-2);
|
|
}
|
|
.pf-recent-row--action{
|
|
cursor:pointer;
|
|
}
|
|
.pf-recent-row--action:hover{
|
|
background:var(--bg-surface-2);
|
|
}
|
|
.pf-recent-row--action:focus-visible{
|
|
outline:2px solid var(--accent);
|
|
outline-offset:-2px;
|
|
}
|
|
.pf-recent-head + .pf-recent-row{
|
|
border-top:0;
|
|
}
|
|
.pf-recent__learner,
|
|
.pf-recent__cell{
|
|
min-width:0;
|
|
color:var(--text-body);
|
|
font-size:var(--fs-sm);
|
|
overflow-wrap:anywhere;
|
|
}
|
|
.pf-recent__cell::before{
|
|
display:none;
|
|
}
|
|
.pf-recent__learner{
|
|
min-width:0;
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:3px;
|
|
}
|
|
.pf-recent__learner b{
|
|
color:var(--text-strong);
|
|
font-size:var(--fs-sm);
|
|
line-height:1.35;
|
|
overflow-wrap:anywhere;
|
|
}
|
|
.pf-recent__learner code{
|
|
max-width:100%;
|
|
color:var(--text-muted);
|
|
font-size:11px;
|
|
white-space:nowrap;
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
}
|
|
.pf-recent__cell .vg-badge{
|
|
justify-self:start;
|
|
}
|
|
.pf-recent__cell--open{
|
|
display:flex;
|
|
justify-content:flex-end;
|
|
}
|
|
.pf-recent__open{
|
|
display:inline-flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
gap:4px;
|
|
min-height:30px;
|
|
padding:0 7px;
|
|
border:1px solid var(--hair);
|
|
border-radius:var(--radius-sm);
|
|
color:var(--accent-deep);
|
|
background:var(--accent-tint);
|
|
font-size:var(--fs-xs);
|
|
font-weight:760;
|
|
white-space:nowrap;
|
|
}
|
|
.pf-recent-row--action:hover .pf-recent__open{
|
|
border-color:var(--accent);
|
|
}
|
|
@media (max-width:1100px){
|
|
.pf-signal-strip,
|
|
.pf-workspace{
|
|
grid-template-columns:1fr;
|
|
}
|
|
.pf-triage{
|
|
grid-template-columns:auto minmax(0,max-content) auto;
|
|
justify-content:start;
|
|
}
|
|
.pf-kpis{
|
|
grid-template-columns:repeat(4,minmax(0,1fr));
|
|
}
|
|
.pf-kpi:nth-child(n+2){border-left:1px solid var(--hair);}
|
|
.pf-kpi:nth-child(n+4){border-top:0;}
|
|
.pf-learner-toolbar{
|
|
grid-template-columns:1fr;
|
|
}
|
|
.pf-sort-segment{
|
|
justify-content:flex-start;
|
|
overflow:auto;
|
|
scrollbar-gutter:stable;
|
|
}
|
|
.pf-learner-table{
|
|
background:var(--bg-surface-2);
|
|
}
|
|
.pf-analysis__top{
|
|
grid-template-columns:1fr;
|
|
}
|
|
.pf-analysis__metrics{
|
|
grid-template-columns:repeat(3,minmax(0,1fr));
|
|
}
|
|
.pf-analysis__metrics span:nth-child(3n+1){
|
|
border-left:0;
|
|
}
|
|
.pf-analysis__metrics span:nth-child(n+4){
|
|
border-top:1px solid var(--hair);
|
|
}
|
|
.pf-persona-group__summary{
|
|
grid-template-columns:44px minmax(0,1fr) auto;
|
|
}
|
|
.pf-persona-group__metrics{
|
|
grid-column:2 / 4;
|
|
grid-row:2;
|
|
}
|
|
.pf-persona-sessions .pf-timeline-row{
|
|
grid-template-columns:34px minmax(0,1fr) minmax(190px,.85fr) auto;
|
|
}
|
|
.pf-timeline-row{
|
|
grid-template-columns:34px minmax(0,1fr) minmax(190px,.85fr) auto;
|
|
}
|
|
.pf-timeline-row__dates{
|
|
grid-column:2 / 4;
|
|
grid-row:2;
|
|
grid-template-columns:repeat(2,minmax(0,1fr));
|
|
}
|
|
.pf-list,
|
|
.pf-personas{
|
|
max-height:360px;
|
|
}
|
|
.pf-recent-list{
|
|
max-height:460px;
|
|
}
|
|
}
|
|
@media (max-width:860px){
|
|
.pf-head__actions{
|
|
width:100%;
|
|
justify-content:flex-start;
|
|
}
|
|
.pf-analysis-detail-head{
|
|
grid-template-columns:1fr;
|
|
}
|
|
.pf-depth-strip{
|
|
grid-template-columns:repeat(2,minmax(0,1fr));
|
|
}
|
|
.pf-depth-strip span:nth-child(odd){
|
|
border-left:0;
|
|
}
|
|
.pf-depth-strip span:nth-child(n+3){
|
|
border-top:1px solid var(--hair);
|
|
}
|
|
.pf-triage{
|
|
grid-template-columns:auto minmax(0,1fr);
|
|
}
|
|
.pf-triage__meta{
|
|
grid-column:1 / -1;
|
|
width:100%;
|
|
}
|
|
.pf-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
|
|
.pf-kpi:nth-child(n+2){border-left:0;}
|
|
.pf-kpi:nth-child(even){border-left:1px solid var(--hair);}
|
|
.pf-kpi:nth-child(n+3){border-top:1px solid var(--hair);}
|
|
.pf-analysis{
|
|
padding:10px;
|
|
}
|
|
.pf-analysis-tabs{
|
|
grid-template-columns:1fr;
|
|
}
|
|
.pf-analysis-tabs button,
|
|
.pf-analysis-tabs button:first-child{
|
|
border-left:0;
|
|
}
|
|
.pf-analysis-tabs button:nth-child(n+2){
|
|
border-top:1px solid var(--hair);
|
|
}
|
|
.pf-analysis__metrics{
|
|
grid-template-columns:repeat(2,minmax(0,1fr));
|
|
}
|
|
.pf-analysis__metrics span,
|
|
.pf-analysis__metrics span:nth-child(3n+1){
|
|
border-left:0;
|
|
}
|
|
.pf-analysis__metrics span:nth-child(even){
|
|
border-left:1px solid var(--hair);
|
|
}
|
|
.pf-analysis__metrics span:nth-child(n+3){
|
|
border-top:1px solid var(--hair);
|
|
}
|
|
.pf-stage-list{
|
|
grid-template-columns:repeat(2,minmax(0,1fr));
|
|
}
|
|
.pf-stage-item,
|
|
.pf-stage-item:first-child{
|
|
border-left:0;
|
|
}
|
|
.pf-stage-item:nth-child(even){
|
|
border-left:1px solid var(--hair);
|
|
}
|
|
.pf-stage-item:nth-child(n+3){
|
|
border-top:1px solid var(--hair);
|
|
}
|
|
.pf-persona-drill{
|
|
max-height:560px;
|
|
}
|
|
.pf-persona-group__summary{
|
|
grid-template-columns:38px minmax(0,1fr);
|
|
align-items:start;
|
|
}
|
|
.pf-persona-group__metrics,
|
|
.pf-persona-group__open{
|
|
grid-column:2;
|
|
}
|
|
.pf-persona-group__metrics{
|
|
grid-row:auto;
|
|
grid-template-columns:repeat(4,minmax(0,1fr));
|
|
}
|
|
.pf-persona-group__open{
|
|
justify-self:start;
|
|
}
|
|
.pf-persona-sessions{
|
|
margin:0 10px 10px 48px;
|
|
}
|
|
.pf-persona-sessions .pf-timeline-row{
|
|
grid-template-columns:34px minmax(0,1fr);
|
|
align-items:start;
|
|
}
|
|
.pf-timeline{
|
|
max-height:560px;
|
|
}
|
|
.pf-timeline-row{
|
|
grid-template-columns:34px minmax(0,1fr);
|
|
align-items:start;
|
|
}
|
|
.pf-timeline-row__main{
|
|
grid-column:2;
|
|
}
|
|
.pf-timeline-row__metrics,
|
|
.pf-timeline-row__dates,
|
|
.pf-timeline-row__open{
|
|
grid-column:2;
|
|
}
|
|
.pf-timeline-row__metrics{
|
|
grid-template-columns:repeat(3,minmax(0,1fr));
|
|
}
|
|
.pf-timeline-row__dates{
|
|
grid-row:auto;
|
|
}
|
|
.pf-timeline-row__open{
|
|
justify-self:start;
|
|
}
|
|
.pf-recent-list{
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:10px;
|
|
padding:10px;
|
|
background:var(--bg-surface-2);
|
|
overflow-x:hidden;
|
|
}
|
|
.pf-recent-head{
|
|
display:none;
|
|
}
|
|
.pf-recent-row{
|
|
display:grid;
|
|
grid-template-columns:repeat(2,minmax(0,1fr));
|
|
gap:10px 12px;
|
|
padding:12px;
|
|
border:1px solid var(--paper-2);
|
|
border-radius:var(--radius);
|
|
background:var(--bg-surface);
|
|
}
|
|
.pf-recent__learner{
|
|
grid-column:1 / -1;
|
|
padding-bottom:10px;
|
|
border-bottom:1px solid var(--paper-2);
|
|
}
|
|
.pf-recent__learner code{
|
|
white-space:normal;
|
|
overflow-wrap:anywhere;
|
|
}
|
|
.pf-recent__cell{
|
|
display:grid;
|
|
grid-template-columns:minmax(74px,.4fr) minmax(0,1fr);
|
|
gap:8px;
|
|
align-items:center;
|
|
}
|
|
.pf-recent__cell--open{
|
|
justify-content:stretch;
|
|
}
|
|
.pf-recent__cell::before{
|
|
display:block;
|
|
content:attr(data-label);
|
|
color:var(--text-muted);
|
|
font-size:var(--fs-xs);
|
|
font-weight:700;
|
|
line-height:1.35;
|
|
}
|
|
.pf-session{
|
|
grid-template-columns:8px minmax(0,1fr);
|
|
}
|
|
.pf-session__meta{
|
|
grid-column:2;
|
|
justify-content:flex-start;
|
|
}
|
|
.pf-session__open{
|
|
grid-column:2;
|
|
grid-row:auto;
|
|
justify-self:start;
|
|
}
|
|
}
|
|
@media (max-width:520px){
|
|
.pf-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
|
|
.pf-kpi,
|
|
.pf-kpi + .pf-kpi{border-left:0;}
|
|
.pf-kpi:nth-child(even){border-left:1px solid var(--hair);}
|
|
.pf-kpi:nth-child(n+3){border-top:1px solid var(--hair);}
|
|
.pf-persona__actions{
|
|
display:grid;
|
|
grid-template-columns:repeat(2,minmax(0,1fr));
|
|
}
|
|
.pf-persona__actions .vg-btn{
|
|
width:100%;
|
|
}
|
|
.pf-depth-strip{
|
|
grid-template-columns:1fr;
|
|
}
|
|
.pf-depth-strip span,
|
|
.pf-depth-strip span:nth-child(odd){
|
|
border-left:0;
|
|
}
|
|
.pf-depth-strip span:nth-child(n+2){
|
|
border-top:1px solid var(--hair);
|
|
}
|
|
.pf-learner-toolbar{
|
|
padding:10px;
|
|
}
|
|
.pf-sort-segment{
|
|
display:grid;
|
|
grid-template-columns:repeat(2,minmax(0,1fr));
|
|
overflow:hidden;
|
|
}
|
|
.pf-sort-segment button,
|
|
.pf-sort-segment button:first-child{
|
|
border-left:0;
|
|
}
|
|
.pf-sort-segment button:nth-child(even){
|
|
border-left:1px solid var(--hair);
|
|
}
|
|
.pf-sort-segment button:nth-child(n+3){
|
|
border-top:1px solid var(--hair);
|
|
}
|
|
.pf-analysis__metrics{
|
|
grid-template-columns:1fr;
|
|
}
|
|
.pf-analysis__metrics span,
|
|
.pf-analysis__metrics span:nth-child(even),
|
|
.pf-analysis__metrics span:nth-child(3n+1){
|
|
border-left:0;
|
|
}
|
|
.pf-analysis__metrics span:nth-child(n+2){
|
|
border-top:1px solid var(--hair);
|
|
}
|
|
.pf-stage-list{
|
|
grid-template-columns:1fr;
|
|
}
|
|
.pf-stage-item,
|
|
.pf-stage-item:nth-child(even),
|
|
.pf-stage-item:first-child{
|
|
border-left:0;
|
|
}
|
|
.pf-stage-item:nth-child(n+2){
|
|
border-top:1px solid var(--hair);
|
|
}
|
|
.pf-persona-group__summary{
|
|
grid-template-columns:1fr;
|
|
}
|
|
.pf-persona-group__code{
|
|
width:auto;
|
|
min-width:38px;
|
|
justify-self:start;
|
|
padding:0 10px;
|
|
}
|
|
.pf-persona-group__metrics,
|
|
.pf-persona-group__open{
|
|
grid-column:1;
|
|
}
|
|
.pf-persona-group__metrics{
|
|
grid-template-columns:repeat(2,minmax(0,1fr));
|
|
}
|
|
.pf-persona-sessions{
|
|
margin:0 8px 8px;
|
|
}
|
|
.pf-persona-sessions .pf-timeline-row__metrics{
|
|
grid-template-columns:1fr;
|
|
}
|
|
.pf-timeline-row__metrics{
|
|
grid-template-columns:1fr;
|
|
}
|
|
.pf-timeline-row__dates{
|
|
grid-template-columns:1fr;
|
|
}
|
|
.pf-alert{
|
|
grid-template-columns:auto minmax(0,1fr);
|
|
}
|
|
.pf-alert__resource{
|
|
grid-column:2;
|
|
justify-items:start;
|
|
}
|
|
.pf-recent-list{
|
|
padding:8px;
|
|
}
|
|
.pf-recent-row{
|
|
grid-template-columns:1fr;
|
|
gap:10px;
|
|
}
|
|
.pf-recent__cell{
|
|
grid-template-columns:minmax(64px,.32fr) minmax(0,1fr);
|
|
}
|
|
.pf-recent__cell--open .pf-recent__open{
|
|
justify-self:start;
|
|
}
|
|
}
|