/* ============================================================================
LiveMentorHub Employee Academy — V74 "Atelier" premium UI system
----------------------------------------------------------------------------
Loaded AFTER styles_v73.css. Pure restyle: no markup or JS changes, fully
reversible by removing the one .
What makes this read as premium rather than merely clean:
· Neutrals carry real hue (cool slate), so surfaces feel considered
· Elevation is a RING + layered shadow, never a flat 1px border
· Active nav is a raised white chip, not a tinted row
· Buttons carry an inset top highlight and a coloured shadow
· Metrics use tabular figures and a proper display scale
· Chrome is frosted and saturated; dividers fade at their ends
· Motion is spring-eased, short, and applied consistently
Everything keys off the --p-* tokens.
========================================================================== */
:root{
/* ---- Accent: refined indigo ---------------------------------------- */
--p-accent:#4C5BD4;
--p-accent-hi:#5B69E0;
--p-accent-lo:#3F4CBB;
--p-accent-press:#3644A3;
--p-accent-tint:#f0f1fd;
--p-accent-tint-2:#e4e6fa;
--p-accent-ring:rgba(76,91,212,.22);
--p-accent-glow:rgba(76,91,212,.30);
/* ---- Neutrals with a cool slate cast -------------------------------- */
--p-bg:#f4f5f8;
--p-surface:#ffffff;
--p-surface-2:#fafbfd; /* nested / inset panels */
--p-surface-3:#f5f6fa; /* deeper inset, table heads */
--p-rail:#fbfbfd; /* sidebar */
--p-hair:rgba(16,24,40,.07); /* the ring colour */
--p-hair-2:rgba(16,24,40,.11); /* stronger ring: inputs, secondary btn */
--p-divider:rgba(16,24,40,.08);
--p-text:#0f1521;
--p-text-2:#4a5567;
--p-text-3:#7d8799;
--p-text-4:#a0a8b8;
/* ---- Status, muted and refined ------------------------------------- */
--p-green:#127a52; --p-green-bg:#e9f5ef; --p-green-ring:rgba(18,122,82,.18);
--p-amber:#8a5a00; --p-amber-bg:#fbf2df; --p-amber-ring:rgba(138,90,0,.18);
--p-red:#c0392f; --p-red-bg:#fceceb; --p-red-ring:rgba(192,57,47,.18);
/* ---- Elevation: ring + layered shadow ------------------------------ */
--p-e0:0 0 0 1px var(--p-hair);
--p-e1:0 0 0 1px var(--p-hair), 0 1px 2px rgba(16,24,40,.04);
--p-e2:0 0 0 1px var(--p-hair), 0 1px 2px rgba(16,24,40,.04), 0 8px 16px -6px rgba(16,24,40,.08);
--p-e3:0 0 0 1px var(--p-hair-2), 0 2px 4px rgba(16,24,40,.04), 0 16px 32px -10px rgba(16,24,40,.14);
--p-e-pop:0 0 0 1px var(--p-hair-2), 0 24px 64px -16px rgba(16,24,40,.28), 0 8px 16px -8px rgba(16,24,40,.10);
--p-e-chip:0 0 0 1px var(--p-hair), 0 1px 2px rgba(16,24,40,.06), 0 2px 6px -1px rgba(16,24,40,.05);
/* ---- Motion --------------------------------------------------------- */
--p-ease:cubic-bezier(.32,.72,0,1);
--p-fast:.14s;
--p-med:.2s;
/* ---- Shape ---------------------------------------------------------- */
--p-r-xs:7px;
--p-r-sm:9px;
--p-r:12px;
--p-r-lg:16px;
/* ---- Re-point legacy tokens so untouched components follow --------- */
--blue:var(--p-accent); --blue-600:var(--p-accent);
--blue-500:var(--p-accent-hi);--blue-400:#8f99ec;
--blue-100:var(--p-accent-tint-2); --blue-50:var(--p-accent-tint);
--blue-soft:var(--p-accent-tint);
--ink:var(--p-text); --ink-soft:var(--p-text-2);
--navy-900:var(--p-text); --navy-950:#080c14;
--text-primary:var(--p-text); --text-secondary:var(--p-text-2);
--text-muted:var(--p-text-3);
--surface:var(--p-bg); --surface-2:var(--p-surface-2);
--card:var(--p-surface);
--border:rgba(16,24,40,.09); --line:rgba(16,24,40,.09);
--gray-50:var(--p-surface-2); --gray-100:var(--p-surface-3);
--shadow-sm:var(--p-e1); --shadow-card:var(--p-e1);
--shadow-soft:var(--p-e1); --shadow-md:var(--p-e2);
--shadow-hover:var(--p-e2); --shadow-lg:var(--p-e-pop);
--radius-sm:9px; --radius-md:12px; --radius-lg:14px; --radius-xl:18px;
}
/* ============================================================================
1. Base — type, ground, rhythm
========================================================================== */
html,body{ background:var(--p-bg); color:var(--p-text); }
body{
font-size:13px;
line-height:1.55;
/* Inter's refined alternates: straight-sided l, single-storey g etc. */
font-feature-settings:'cv02' 1,'cv03' 1,'cv04' 1,'cv11' 1,'ss01' 1;
font-optical-sizing:auto;
text-rendering:optimizeLegibility;
}
.app-shell{
background:
radial-gradient(1100px 520px at 88% -12%, rgba(76,91,212,.055), transparent 62%),
radial-gradient(760px 420px at 8% 108%, rgba(16,24,40,.030), transparent 60%),
var(--p-bg) !important;
}
.main{ background:transparent !important; }
h1,h2,h3,h4{ color:var(--p-text); font-weight:640; }
h1{ letter-spacing:-.026em; }
h2{ letter-spacing:-.022em; }
h3,h4{ letter-spacing:-.014em; }
.section-title{
font-size:13.5px !important; font-weight:640 !important;
color:var(--p-text) !important; letter-spacing:-.012em !important;
}
.section-sub{ font-size:11px !important; color:var(--p-text-3) !important; line-height:1.5 !important; }
.muted{ color:var(--p-text-3) !important; }
/* Quiet, well-tracked micro-labels */
.eyebrow,.academy-eyebrow,.academy-kicker,.nav-group-label,.sidebar-label,
.stat-label,.cb-label,.mt-lbl,[class*="-eyebrow"],[class*="-kicker"]{
font-size:9.5px !important; font-weight:640 !important;
letter-spacing:.075em !important; text-transform:uppercase;
color:var(--p-text-4) !important;
}
/* Financial-grade figures everywhere numbers matter */
.home-kpi b,.attendance-kpi b,.metric-tile .mt-val,.timesheet-kpis b,
.leave-balance-card b,.stat-card .stat-value,.admin-summary-card b,
.policy-compliance-summary>div b,.cert-stat .cs-val,.academy-overall-row strong,
.academy-track-progress strong,.assessment-score,.training-score,
.enterprise-table td,.admin-table td,.timesheet-table td,
.learning-progress-ring b,.mastery-hero-value{
font-variant-numeric:tabular-nums lining-nums;
font-feature-settings:'tnum' 1,'lnum' 1,'cv11' 1;
}
a,.text-link{ color:var(--p-accent); }
.text-link{ font-weight:640 !important; }
.text-link:hover{ color:var(--p-accent-lo) !important; }
::selection{ background:var(--p-accent-tint-2); color:var(--p-text); }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-thumb{
background:rgba(16,24,40,.16); border-radius:99px;
border:3px solid transparent; background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{ background:rgba(16,24,40,.28); background-clip:content-box; }
/* Consistent, visible focus for keyboard users */
:focus-visible{
outline:2px solid var(--p-accent) !important;
outline-offset:2px !important;
border-radius:var(--p-r-xs);
}
/* ============================================================================
2. Sidebar — tinted rail, raised active chip
========================================================================== */
.sidebar{
background:linear-gradient(180deg,#fcfcfe 0%,#f8f9fc 100%) !important;
color:var(--p-text-2) !important;
border-right:0 !important;
box-shadow:inset -1px 0 0 var(--p-divider) !important;
padding:14px 11px 14px !important;
}
/* Full LiveMentorHub lockup in the rail (mark + wordmark + strapline).
Login keeps its own larger treatment — this is the in-product one. */
.sidebar-brand{
border-bottom:0 !important;
box-shadow:inset 0 -1px 0 var(--p-divider);
padding:10px 10px 16px !important; margin-bottom:10px !important;
justify-content:center !important; align-items:center !important;
min-height:0 !important;
cursor:pointer;
}
/* The supplied lockup is a square (mark stacked over the wordmark), so it is
sized by width, not height — at 60px tall the wordmark was unreadable. */
.sidebar-brand .sidebar-logo-full{
display:block !important;
width:min(132px,100%) !important; max-width:100% !important;
height:auto !important;
object-fit:contain !important; object-position:center !important;
background:transparent !important; border:0 !important;
border-radius:0 !important; padding:0 !important; box-shadow:none !important;
flex:0 0 auto !important; min-width:0 !important;
transition:transform var(--p-med) var(--p-ease), opacity var(--p-fast) var(--p-ease);
}
.sidebar-brand:hover .sidebar-logo-full{ transform:scale(1.03); }
.sidebar-brand:active .sidebar-logo-full{ transform:scale(.99); }
.sidebar-brand:focus-visible{ outline:2px solid var(--p-accent); outline-offset:3px; border-radius:var(--p-r-xs); }
/* the old mark-only variant is no longer used in the rail */
.sidebar-brand .sidebar-logo-mark{ display:none !important; }
.sidebar-brand-name{ color:var(--p-text) !important; font-size:13px !important; font-weight:640 !important; }
.sidebar-brand-sub{ color:var(--p-text-4) !important; }
.nav-group-label{ padding:15px 11px 6px !important; }
.nav-item{
height:33px !important; padding:0 10px !important;
border-radius:var(--p-r-sm) !important;
color:var(--p-text-2) !important;
font-size:12px !important; font-weight:520 !important;
gap:10px !important;
transition:background var(--p-fast) var(--p-ease),
color var(--p-fast) var(--p-ease),
box-shadow var(--p-fast) var(--p-ease) !important;
}
.nav-item .ic,.nav-item .ic .lm-icon{
color:var(--p-text-3) !important;
transition:color var(--p-fast) var(--p-ease) !important;
transform:none !important;
}
.nav-item:hover{ background:rgba(16,24,40,.045) !important; color:var(--p-text) !important; }
.nav-item:hover .ic,.nav-item:hover .ic .lm-icon{ color:var(--p-text-2) !important; }
/* The signature move: active item lifts off the rail as a white chip */
.nav-item.active{
background:#fff !important;
color:var(--p-text) !important;
font-weight:620 !important;
box-shadow:var(--p-e-chip) !important;
}
.nav-item.active .ic,.nav-item.active .ic .lm-icon{ color:var(--p-accent) !important; }
.nav-chat-badge{ background:var(--p-red) !important; border:2px solid #fbfbfd !important; box-shadow:none !important; }
.nav-more-item{
border-top:0 !important; margin-top:8px !important; padding-top:8px !important;
box-shadow:inset 0 1px 0 var(--p-divider);
color:var(--p-text-2) !important; border-radius:var(--p-r-sm) !important;
}
.nav-more-item .ic{ color:var(--p-text-3) !important; }
.more-nav-panel{
background:#fff !important; border:0 !important;
box-shadow:var(--p-e2) !important; border-radius:var(--p-r) !important;
padding:7px !important;
}
.more-nav-link{
background:transparent !important; color:var(--p-text-2) !important;
border:0 !important; border-radius:var(--p-r-xs) !important;
transition:background var(--p-fast) var(--p-ease), color var(--p-fast) var(--p-ease) !important;
}
.more-nav-link:hover{ background:rgba(16,24,40,.05) !important; color:var(--p-text) !important; }
.more-nav-link.active{ background:var(--p-accent-tint) !important; color:var(--p-accent) !important; }
.more-nav-head{ color:var(--p-text-4) !important; }
.sidebar-footer{ border-top:0 !important; box-shadow:inset 0 1px 0 var(--p-divider); }
.sidebar-footer-title{ color:var(--p-text-2) !important; font-weight:600 !important; }
.sidebar-footer-sub{ color:var(--p-text-4) !important; }
.signout-btn{
background:#fff !important; color:var(--p-text-2) !important;
border:0 !important; box-shadow:var(--p-e1) !important;
height:32px !important; border-radius:var(--p-r-sm) !important;
transition:box-shadow var(--p-fast) var(--p-ease), color var(--p-fast) var(--p-ease) !important;
}
.signout-btn:hover{
color:var(--p-red) !important;
box-shadow:0 0 0 1px var(--p-red-ring), 0 1px 2px rgba(16,24,40,.05) !important;
}
@media(max-width:780px){
.sidebar{ box-shadow:inset 0 -1px 0 var(--p-divider) !important; }
/* In the collapsed strip the lockup would eat the whole row, so the rail
falls back to the compact mark. */
.sidebar-brand{
justify-content:center !important; box-shadow:none !important;
padding:0 10px 0 2px !important; min-width:46px !important;
}
.sidebar-brand .sidebar-logo-full{ display:none !important; }
.sidebar-brand .sidebar-logo-mark{
display:block !important; width:30px !important; height:30px !important;
}
}
/* ============================================================================
3. Topbar — frosted, saturated chrome
========================================================================== */
.topbar{
background:rgba(252,252,254,.78) !important;
backdrop-filter:saturate(180%) blur(20px) !important;
-webkit-backdrop-filter:saturate(180%) blur(20px) !important;
border-bottom:0 !important;
box-shadow:inset 0 -1px 0 var(--p-divider) !important;
height:60px !important;
}
.topbar-title{ font-size:15px !important; font-weight:640 !important; color:var(--p-text) !important; letter-spacing:-.018em !important; }
.topbar-sub{ font-size:10.5px !important; color:var(--p-text-3) !important; }
.global-search-input::placeholder{ color:var(--p-text-4) !important; }
.global-search-input:hover{ background:rgba(16,24,40,.06) !important; }
.global-search-input:focus{
background:#fff !important;
box-shadow:0 0 0 1px var(--p-accent-ring), 0 0 0 4px var(--p-accent-tint), 0 1px 2px rgba(16,24,40,.05) !important;
}
.notification-bell{
width:34px !important; height:34px !important; border-radius:var(--p-r-sm) !important;
background:transparent !important; color:var(--p-text-2) !important;
border:0 !important; box-shadow:none !important;
transition:background var(--p-fast) var(--p-ease), color var(--p-fast) var(--p-ease) !important;
}
.notification-bell:hover{ background:rgba(16,24,40,.06) !important; color:var(--p-text) !important; }
.notification-bell.has-unread::after{ background:var(--p-red) !important; box-shadow:0 0 0 2px rgba(252,252,254,.9) !important; }
.user-chip{
height:36px !important; border-radius:var(--p-r-sm) !important;
background:transparent !important; border:0 !important; box-shadow:none !important;
transition:background var(--p-fast) var(--p-ease) !important;
}
.user-chip:hover{ background:rgba(16,24,40,.06) !important; }
.user-avatar{
background:linear-gradient(150deg,var(--p-accent-hi),var(--p-accent-lo)) !important;
font-weight:640 !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(16,24,40,.14) !important;
}
.topbar-right>.badge{
height:28px !important; border-radius:99px !important;
background:rgba(16,24,40,.05) !important; color:var(--p-text-2) !important;
border:0 !important; font-weight:600 !important;
}
.topbar-signout{
border:0 !important; box-shadow:var(--p-e1) !important;
border-radius:var(--p-r-sm) !important; height:32px !important;
background:#fff !important; color:var(--p-text-2) !important; font-weight:600 !important;
transition:box-shadow var(--p-fast) var(--p-ease), color var(--p-fast) var(--p-ease) !important;
}
.topbar-signout:hover{
color:var(--p-red) !important;
box-shadow:0 0 0 1px var(--p-red-ring), 0 1px 2px rgba(16,24,40,.05) !important;
}
/* ============================================================================
4. Surfaces — ring + layered shadow, never a flat border
========================================================================== */
.card,.home-panel,.news-announcements,.academy-section,.table-wrap,
.page-hero,.page-hero-compact{
background:var(--p-surface) !important;
border:0 !important;
border-radius:var(--p-r) !important;
box-shadow:var(--p-e1) !important;
}
.card{ padding:20px 22px !important; }
.card-pad-lg{ padding:24px 26px !important; }
/* Nested / inset panels sit a shade back */
.current-block,.academy-track-summary>div,.academy-overall,.welcome-status,
.attendance-detail-intro,.quiz-explain,.policy-signoff-panel{
background:var(--p-surface-2) !important;
border:0 !important;
box-shadow:inset 0 0 0 1px var(--p-hair) !important;
border-radius:var(--p-r-sm) !important;
backdrop-filter:none !important;
}
/* Dividers fade at their ends */
.tabs,.profile-tabs,.academy-track-nav,.modal-head,.sc-card-foot{
border-bottom:0 !important;
background-image:linear-gradient(90deg,transparent,var(--p-divider) 6%,var(--p-divider) 94%,transparent);
background-size:100% 1px; background-position:bottom; background-repeat:no-repeat;
}
/* ============================================================================
5. Buttons — inset highlight + coloured shadow
========================================================================== */
.btn{
border-radius:var(--p-r-sm) !important;
font-weight:620 !important; letter-spacing:-.004em !important;
transition:transform var(--p-fast) var(--p-ease),
box-shadow var(--p-fast) var(--p-ease),
background var(--p-fast) var(--p-ease) !important;
}
.btn:active:not(:disabled){ transform:translateY(.5px) !important; }
.btn-primary,.lm-submit{
background:linear-gradient(180deg,var(--p-accent-hi),var(--p-accent)) !important;
border:0 !important; color:#fff !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.20),
0 0 0 1px var(--p-accent-lo),
0 1px 2px rgba(16,24,40,.14),
0 4px 10px -2px var(--p-accent-glow) !important;
}
.btn-primary:hover:not(:disabled),.lm-submit:hover{
background:linear-gradient(180deg,#6672e6,var(--p-accent-hi)) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.24),
0 0 0 1px var(--p-accent-lo),
0 2px 4px rgba(16,24,40,.14),
0 8px 18px -4px var(--p-accent-glow) !important;
filter:none !important; transform:translateY(-.5px) !important;
}
.btn-primary:active:not(:disabled){ background:var(--p-accent-press) !important; }
.btn-secondary{
background:#fff !important; color:var(--p-text) !important;
border:0 !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 1px var(--p-hair-2), 0 1px 2px rgba(16,24,40,.05) !important;
}
.btn-secondary:hover:not(:disabled){
background:var(--p-surface-2) !important;
box-shadow:0 0 0 1px rgba(16,24,40,.16), 0 1px 2px rgba(16,24,40,.06) !important;
}
.btn-gold{
background:#fff !important; color:var(--p-amber) !important; border:0 !important;
box-shadow:0 0 0 1px var(--p-amber-ring), 0 1px 2px rgba(16,24,40,.05) !important;
}
.btn-gold:hover:not(:disabled){ background:var(--p-amber-bg) !important; filter:none !important; }
.btn-ghost{ color:var(--p-text-2) !important; box-shadow:none !important; }
.btn-ghost:hover:not(:disabled){ background:rgba(16,24,40,.05) !important; color:var(--p-text) !important; }
.btn-danger{
background:linear-gradient(180deg,#d0483d,var(--p-red)) !important; border:0 !important; color:#fff !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 1px #a83128, 0 4px 10px -2px rgba(192,57,47,.30) !important;
}
/* ============================================================================
6. Badges, inputs, progress
========================================================================== */
.badge{
font-weight:620 !important; letter-spacing:0 !important;
padding:3px 9px !important; font-size:10px !important; border-radius:99px !important;
}
.badge-blue{ background:var(--p-accent-tint) !important; color:var(--p-accent-lo) !important; box-shadow:inset 0 0 0 1px var(--p-accent-ring) !important; }
.badge-green{ background:var(--p-green-bg) !important; color:var(--p-green) !important; box-shadow:inset 0 0 0 1px var(--p-green-ring) !important; }
.badge-gold,.badge-amber{ background:var(--p-amber-bg) !important; color:var(--p-amber) !important; box-shadow:inset 0 0 0 1px var(--p-amber-ring) !important; }
.badge-red{ background:var(--p-red-bg) !important; color:var(--p-red) !important; box-shadow:inset 0 0 0 1px var(--p-red-ring) !important; }
.badge-gray{ background:rgba(16,24,40,.05) !important; color:var(--p-text-2) !important; box-shadow:inset 0 0 0 1px var(--p-hair) !important; }
.badge-navy{ background:var(--p-text) !important; color:#fff !important; }
input:not([type=checkbox]):not([type=radio]):not([type=range]),
textarea,select,.filter-select,.filter-search,
.policy-signoff-form input,
.leave-form-grid input,.leave-form-grid select,.leave-form-grid textarea,
.profile-field input,.profile-field textarea,
.modal-field input,.modal-field select,.modal-field textarea{
border-radius:var(--p-r-xs) !important;
border:0 !important;
background:#fff !important;
color:var(--p-text) !important;
box-shadow:0 0 0 1px var(--p-hair-2), inset 0 1px 2px rgba(16,24,40,.03) !important;
transition:box-shadow var(--p-fast) var(--p-ease) !important;
}
input:hover:not(:focus),textarea:hover:not(:focus),select:hover:not(:focus){
box-shadow:0 0 0 1px rgba(16,24,40,.18), inset 0 1px 2px rgba(16,24,40,.03) !important;
}
input:focus,textarea:focus,select:focus{
outline:none !important;
box-shadow:0 0 0 1px var(--p-accent), 0 0 0 4px var(--p-accent-tint) !important;
background:#fff !important;
}
::placeholder{ color:var(--p-text-4) !important; }
.pbar,.progress-track,.mini-bar,.academy-progress,.academy-dept-progress{
height:6px !important; border-radius:99px !important;
background:rgba(16,24,40,.07) !important;
box-shadow:inset 0 1px 1px rgba(16,24,40,.04) !important;
overflow:hidden !important;
}
.pbar-fill-blue,.progress-track>span,.pbar>span,
.academy-progress i,.academy-dept-progress i{
background:linear-gradient(90deg,var(--p-accent-hi),var(--p-accent)) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.22) !important;
}
.pbar-fill-green{ background:linear-gradient(90deg,#1a9668,var(--p-green)) !important; }
.pbar-fill-gold,.pbar-fill-amber{ background:linear-gradient(90deg,#b17914,var(--p-amber)) !important; }
.pbar-fill-red{ background:linear-gradient(90deg,#d0483d,var(--p-red)) !important; }
/* ============================================================================
7. Tables
========================================================================== */
.enterprise-table thead th,.admin-table thead th,.session-row-head{
background:var(--p-surface-3) !important; color:var(--p-text-3) !important;
font-size:9.5px !important; font-weight:640 !important; letter-spacing:.075em !important;
border-bottom:0 !important; box-shadow:inset 0 -1px 0 var(--p-divider) !important;
}
.enterprise-table tbody td,.admin-table tbody td{
border-bottom:0 !important; box-shadow:inset 0 -1px 0 rgba(16,24,40,.05) !important;
color:var(--p-text-2) !important;
}
.enterprise-table tbody tr:hover td,.admin-table tbody tr:hover td{ background:var(--p-surface-2) !important; }
.enterprise-table tbody tr:last-child td{ box-shadow:none !important; }
.table-person-avatar{
background:linear-gradient(150deg,var(--p-accent-tint-2),var(--p-accent-tint)) !important;
color:var(--p-accent-lo) !important;
box-shadow:inset 0 0 0 1px var(--p-accent-ring) !important;
}
/* Tabs */
.tab-btn,.profile-tab{ font-weight:600 !important; color:var(--p-text-3) !important; transition:color var(--p-fast) var(--p-ease) !important; }
.tab-btn.active,.profile-tab.active{ color:var(--p-accent) !important; border-color:var(--p-accent) !important; }
.tab-btn:hover,.profile-tab:hover{ color:var(--p-text) !important; }
.academy-track-pill{
border:0 !important; border-radius:99px !important; font-weight:600 !important;
box-shadow:var(--p-e1) !important; background:#fff !important;
transition:box-shadow var(--p-fast) var(--p-ease), color var(--p-fast) var(--p-ease) !important;
}
.academy-track-pill.active{
color:var(--p-accent) !important; background:var(--p-accent-tint) !important;
box-shadow:inset 0 0 0 1px var(--p-accent-ring) !important;
}
.academy-track-pill.active strong{ color:var(--p-accent) !important; }
/* Modals / popovers */
.modal-backdrop,.modal-overlay{
background:rgba(11,15,26,.44) !important;
backdrop-filter:blur(4px) saturate(120%) !important;
-webkit-backdrop-filter:blur(4px) saturate(120%) !important;
}
.modal-card,.modal-box{
border-radius:var(--p-r-lg) !important; border:0 !important;
box-shadow:var(--p-e-pop) !important;
}
.modal-title,.modal-head b{ font-weight:640 !important; color:var(--p-text) !important; letter-spacing:-.014em !important; }
.notification-panel,.global-search-panel,.user-menu-panel{
border:0 !important; box-shadow:var(--p-e3) !important; border-radius:var(--p-r) !important;
}
.user-menu-panel button:hover,.notification-panel .notif-row:hover{ background:rgba(16,24,40,.045) !important; }
/* ============================================================================
8. Heroes / page headers — quiet, well-set, with an editorial rule
========================================================================== */
.academy-hero,.home-welcome,.home-hero,.mastery-hero{
background:linear-gradient(168deg,#ffffff 0%,#fcfcfe 100%) !important;
color:var(--p-text) !important;
border:0 !important;
border-radius:var(--p-r-lg) !important;
box-shadow:var(--p-e2) !important;
padding:26px 28px !important;
position:relative; overflow:hidden !important;
}
.academy-hero::before,.home-welcome::before,.home-hero::before,.mastery-hero::before{
content:"" !important; display:block !important;
position:absolute; left:0; right:0; top:0; height:2px;
background:linear-gradient(90deg,var(--p-accent) 0%,var(--p-accent-hi) 28%,transparent 72%);
opacity:.9;
}
.academy-hero::after,.home-welcome::after,.home-hero::after,.mastery-hero::after{
content:"" !important; display:block !important;
position:absolute; width:520px; height:520px; right:-190px; top:-300px;
border-radius:50%; background:radial-gradient(circle,rgba(76,91,212,.06),transparent 66%);
pointer-events:none; border:0 !important;
}
.academy-hero h1,.home-welcome .welcome-copy h1,.home-hero h1,.home-hero-copy h1{
color:var(--p-text) !important; font-size:25px !important;
font-weight:640 !important; letter-spacing:-.028em !important; line-height:1.14 !important;
}
.academy-hero p,.home-welcome .welcome-copy p,.home-hero p,.home-hero-copy p{
color:var(--p-text-2) !important; font-size:12px !important;
}
.mastery-hero *{ color:var(--p-text) !important; }
.academy-eyebrow{ color:var(--p-text-4) !important; }
.academy-eyebrow span{ color:var(--p-accent) !important; }
.academy-overall-label,.academy-overall-row span{ color:var(--p-text-3) !important; }
.academy-overall-row strong{ color:var(--p-text) !important; letter-spacing:-.03em !important; }
.welcome-status .status-line{ color:var(--p-text) !important; }
.welcome-status>small{ color:var(--p-text-3) !important; }
.welcome-date{ color:var(--p-text-3) !important; border-top-color:var(--p-divider) !important; }
.page-hero h1{ color:var(--p-text) !important; font-weight:640 !important; }
.page-hero p{ color:var(--p-text-2) !important; }
.hero-pill{
background:rgba(16,24,40,.05) !important; color:var(--p-text-2) !important;
border:0 !important; box-shadow:inset 0 0 0 1px var(--p-hair) !important;
font-weight:600 !important; border-radius:99px !important;
}
/* Flush page headers */
.leave-hero,.attendance-page-hero,.timesheet-hero,.newsroom-hero,
.admin-section-hero,.login-history-hero,.policies-hero{ padding-left:0 !important; }
.leave-hero::before,.attendance-page-hero::before,.timesheet-hero::before,
.newsroom-hero::before,.admin-section-hero::before,.login-history-hero::before,
.policies-hero::before{ display:none !important; content:none !important; }
.leave-hero h2,.attendance-page-hero h2,.timesheet-hero h2,
.newsroom-hero h2,.login-history-hero h2,.policies-hero h2,.admin-section-hero h2{
font-size:21px !important; font-weight:640 !important; color:var(--p-text) !important;
letter-spacing:-.026em !important;
}
.leave-hero p,.attendance-page-hero p,.admin-section-hero p{ color:var(--p-text-3) !important; font-size:11.5px !important; }
/* Certificate keeps its ceremony, executed properly */
.cert-card{
background:linear-gradient(158deg,#161d33 0%,#0e1424 60%,#141a2e 100%) !important;
border-radius:var(--p-r-lg) !important;
box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 24px 60px -18px rgba(11,15,26,.55) !important;
}
.cert-card::before{
content:"" !important; display:block !important;
background:radial-gradient(620px 300px at 50% -22%, rgba(76,91,212,.30), transparent 62%) !important;
}
.cert-badge-icon{
background:linear-gradient(150deg,#2b3556,#1b2340) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 8px 20px -6px rgba(0,0,0,.5) !important;
}
.cert-status{ color:#98a2c4 !important; letter-spacing:.12em !important; }
.cert-stat{
background:rgba(255,255,255,.045) !important; border:0 !important;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.07) !important; border-radius:var(--p-r-sm) !important;
}
.cert-stat .cs-val{ font-size:19px !important; font-weight:640 !important; }
/* ============================================================================
9. Metric tiles — the data surfaces
========================================================================== */
.home-kpi,.attendance-kpi,.metric-tile,.timesheet-kpis>div,
.policy-compliance-summary>div,.leave-balance-card,.stat-card,
.admin-summary-card,.support-kpi-grid>div{
position:relative;
background:var(--p-surface) !important;
border:0 !important;
border-radius:var(--p-r) !important;
box-shadow:var(--p-e1) !important;
transition:box-shadow var(--p-med) var(--p-ease), transform var(--p-med) var(--p-ease) !important;
}
.home-kpi:hover,.attendance-kpi:hover,.metric-tile:hover,
.leave-balance-card:hover,.admin-summary-card:hover{
transform:translateY(-1px) !important;
box-shadow:var(--p-e2) !important;
}
.home-kpi::before,.home-kpi::after,
.attendance-kpi::before,.attendance-kpi::after,
.leave-balance-card::before,.timesheet-kpis>div::before{ display:none !important; content:none !important; }
.home-kpi{ padding:15px 16px !important; }
.attendance-kpi{ padding:18px 19px !important; background:var(--p-surface) !important; }
.timesheet-kpis>div{ padding:16px 17px !important; }
/* Icon chips: tinted fill + inner ring, never a flat block */
.home-kpi-icon,.attendance-kpi .kpi-icon,.action-icon,.utility-icon,
.stat-icon,.kpi-icon,.academy-summary-icon{
background:linear-gradient(150deg,var(--p-accent-tint),var(--p-accent-tint-2)) !important;
color:var(--p-accent) !important;
border-radius:var(--p-r-xs) !important;
box-shadow:inset 0 0 0 1px var(--p-accent-ring), inset 0 1px 0 rgba(255,255,255,.7) !important;
}
.attendance-kpi .kpi-icon.success{
background:linear-gradient(150deg,#eef7f2,#e2f1ea) !important; color:var(--p-green) !important;
box-shadow:inset 0 0 0 1px var(--p-green-ring), inset 0 1px 0 rgba(255,255,255,.7) !important;
}
.attendance-kpi .kpi-icon.leave{
background:linear-gradient(150deg,#fdf6e8,#f9eed6) !important; color:var(--p-amber) !important;
box-shadow:inset 0 0 0 1px var(--p-amber-ring), inset 0 1px 0 rgba(255,255,255,.7) !important;
}
.home-kpi-icon .lm-icon,.action-icon .lm-icon,.kpi-icon .lm-icon,.utility-icon .lm-icon{ color:inherit !important; }
.home-kpi b{ font-size:16.5px !important; font-weight:640 !important; color:var(--p-text) !important; letter-spacing:-.022em !important; line-height:1.2 !important; }
.home-kpi small{ font-size:10px !important; color:var(--p-text-3) !important; font-weight:480 !important; }
.attendance-kpi b{ font-size:21px !important; font-weight:640 !important; color:var(--p-text) !important; letter-spacing:-.028em !important; }
.attendance-kpi span:not(.kpi-icon){ color:var(--p-text-3) !important; font-weight:480 !important; }
.attendance-kpi em{ color:var(--p-text-4) !important; }
.metric-tile .mt-val{ font-size:17.5px !important; font-weight:640 !important; color:var(--p-text) !important; letter-spacing:-.022em !important; }
.metric-tile .mt-lbl{ color:var(--p-text-4) !important; }
.timesheet-kpis>div>b,.timesheet-kpis b{ font-size:19px !important; font-weight:640 !important; color:var(--p-text) !important; letter-spacing:-.026em !important; }
.timesheet-kpis span{ color:var(--p-text-2) !important; }
.timesheet-kpis small{ color:var(--p-text-4) !important; }
.policy-compliance-summary>div b{ color:var(--p-text) !important; font-weight:640 !important; letter-spacing:-.026em !important; }
.policy-compliance-summary>div span{ color:var(--p-text-4) !important; }
.leave-balance-card b{ color:var(--p-text) !important; font-weight:640 !important; letter-spacing:-.028em !important; }
.leave-balance-card.primary b{ font-size:26px !important; }
.stat-card .stat-value{ font-size:21px !important; font-weight:640 !important; color:var(--p-text) !important; letter-spacing:-.028em !important; }
.admin-summary-card b{ font-size:20px !important; font-weight:640 !important; color:var(--p-text) !important; letter-spacing:-.026em !important; }
.learning-progress-ring b{ letter-spacing:-.02em !important; }
/* ============================================================================
10. Content cards — consistent lift on hover
========================================================================== */
.action-card,.people-card,.knowledge-card,.support-card,.performance-card,
.recognition-card,.scenario-card,.training-row,.academy-dept-card,
.academy-session-card,.employee-progress-card,.policy-card,.news-tile,
.session-row,.topic-block,.quiz-q{
background:var(--p-surface) !important;
border:0 !important;
border-radius:var(--p-r-sm) !important;
box-shadow:var(--p-e1) !important;
transition:box-shadow var(--p-med) var(--p-ease), transform var(--p-med) var(--p-ease) !important;
}
.action-card:hover,.people-card:hover,.knowledge-card:hover,.support-card:hover,
.performance-card:hover,.scenario-card:not(.locked):hover,.academy-dept-card:hover,
.academy-session-card:not(.locked):hover,.training-row:hover,.news-tile:hover,
.policy-card:hover{
transform:translateY(-1px) !important;
box-shadow:var(--p-e2) !important;
}
.academy-dept-card.active{
background:var(--p-accent-tint) !important;
box-shadow:inset 0 0 0 1px var(--p-accent-ring), 0 1px 2px rgba(16,24,40,.04) !important;
}
.academy-dept-card.active .academy-dept-icon{ background:#fff !important; box-shadow:var(--p-e1) !important; }
.academy-session-card.locked,.scenario-card.locked{ box-shadow:inset 0 0 0 1px var(--p-hair) !important; background:var(--p-surface-2) !important; }
.academy-session-number,.training-num{
background:linear-gradient(150deg,#1d2536,var(--p-text)) !important; color:#fff !important;
border-radius:var(--p-r-xs) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(16,24,40,.16) !important;
}
.training-num.done{ background:linear-gradient(150deg,#1a9668,var(--p-green)) !important; }
.training-num.locked-num{ background:rgba(16,24,40,.08) !important; color:var(--p-text-4) !important; box-shadow:none !important; }
.action-arrow{ color:var(--p-text-4) !important; transition:transform var(--p-fast) var(--p-ease), color var(--p-fast) var(--p-ease) !important; }
.action-card:hover .action-arrow{ color:var(--p-accent) !important; transform:translateX(2px) !important; }
.news-tile-tag{ background:rgba(16,24,40,.05) !important; color:var(--p-text-2) !important; font-weight:620 !important; box-shadow:inset 0 0 0 1px var(--p-hair) !important; }
.utility-list button:last-child{ box-shadow:none !important; }
/* Quiz + coaching */
.quiz-opt{
border:0 !important; border-radius:var(--p-r-xs) !important;
box-shadow:inset 0 0 0 1px var(--p-hair-2) !important;
transition:box-shadow var(--p-fast) var(--p-ease), background var(--p-fast) var(--p-ease) !important;
}
.quiz-opt:hover{ background:var(--p-accent-tint) !important; box-shadow:inset 0 0 0 1px var(--p-accent-ring) !important; }
.quiz-opt.selected{ background:var(--p-accent-tint) !important; box-shadow:inset 0 0 0 2px var(--p-accent) !important; }
.quiz-opt.selected .opt-radio{ border-color:var(--p-accent) !important; }
.quiz-opt.selected .opt-radio::after{ background:var(--p-accent) !important; }
.quiz-opt.correct{ background:var(--p-green-bg) !important; box-shadow:inset 0 0 0 2px var(--p-green-ring) !important; }
.quiz-opt.incorrect{ background:var(--p-red-bg) !important; box-shadow:inset 0 0 0 2px var(--p-red-ring) !important; }
.obj-list li::before{ color:var(--p-green) !important; }
.threshold-note{ background:var(--p-amber-bg) !important; border:0 !important; box-shadow:inset 0 0 0 1px var(--p-amber-ring) !important; color:var(--p-amber) !important; }
.coach-box{ background:var(--p-accent-tint) !important; border-left-color:var(--p-accent) !important; color:var(--p-text-2) !important; }
.coach-box.warn{ background:var(--p-amber-bg) !important; border-left-color:var(--p-amber) !important; color:var(--p-amber) !important; }
.coach-box.risk{ background:var(--p-red-bg) !important; border-left-color:var(--p-red) !important; color:var(--p-red) !important; }
.coach-box.good{ background:var(--p-green-bg) !important; border-left-color:var(--p-green) !important; color:var(--p-green) !important; }
/* Chat */
.msg-row.trainee .msg-bubble{
background:linear-gradient(180deg,var(--p-accent-hi),var(--p-accent)) !important; color:#fff !important;
box-shadow:0 1px 2px rgba(16,24,40,.12) !important;
}
.msg-row.customer .msg-bubble{ border:0 !important; box-shadow:var(--p-e1) !important; }
.msg-row.system .msg-bubble{ background:rgba(16,24,40,.05) !important; color:var(--p-text-3) !important; }
/* ============================================================================
11. Login
========================================================================== */
.lm-login-page{ background:var(--p-bg) !important; }
.lm-login-shell{
border-radius:20px !important; border:0 !important;
box-shadow:0 0 0 1px var(--p-hair), 0 40px 100px -24px rgba(16,24,40,.30) !important;
}
.lm-login-visual{
background:
radial-gradient(680px 380px at 22% 4%, rgba(76,91,212,.10), transparent 62%),
linear-gradient(158deg,#fafbfd 0%,#f2f4f9 100%) !important;
}
.lm-field input,.lm-input-wrap input{ border-radius:var(--p-r-xs) !important; }
.lm-submit{ border-radius:var(--p-r-sm) !important; font-weight:640 !important; }
.lm-form-head h1{ letter-spacing:-.03em !important; font-weight:640 !important; }
.lm-theme{ border-radius:var(--p-r-sm) !important; box-shadow:var(--p-e1) !important; border:0 !important; }
/* ============================================================================
12. Misc consistency
========================================================================== */
.floating-chat-launcher,#floatingChatLauncher{
background:linear-gradient(180deg,var(--p-accent-hi),var(--p-accent)) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 8px 24px -6px var(--p-accent-glow), 0 2px 6px rgba(16,24,40,.16) !important;
}
.month-picker-month{ border:0 !important; box-shadow:inset 0 0 0 1px var(--p-hair) !important; border-radius:var(--p-r-xs) !important; }
.month-picker-month:hover{ background:var(--p-accent-tint) !important; color:var(--p-accent) !important; box-shadow:inset 0 0 0 1px var(--p-accent-ring) !important; }
.month-picker-month.selected{ background:var(--p-accent) !important; color:#fff !important; box-shadow:none !important; }
.policy-ack-badge.signed{ background:var(--p-green-bg) !important; color:var(--p-green) !important; border:0 !important; box-shadow:inset 0 0 0 1px var(--p-green-ring) !important; }
.policy-ack-badge.pending{ background:var(--p-amber-bg) !important; color:var(--p-amber) !important; border:0 !important; box-shadow:inset 0 0 0 1px var(--p-amber-ring) !important; }
.employee-day{ border:0 !important; box-shadow:inset 0 0 0 1px var(--p-hair) !important; border-radius:var(--p-r-xs) !important; }
.att-dot{ box-shadow:0 0 0 2px #fff !important; }
.online-dot,.presence-dot,.status-dot{ box-shadow:0 0 0 2px #fff, 0 0 0 4px rgba(16,24,40,.05) !important; }
/* ============================================================================
13. Fixes surfaced while building this pass
========================================================================== */
/* (a) The global search collapsed to ~28px on mid-width desktops: a later
V73 rule reset the wrap's flex basis, so the sibling page-title block
(min-width:170px) won the space. Give the field a real basis and floor. */
.global-search-wrap{
flex:1 1 220px !important;
min-width:170px !important;
max-width:440px !important;
}
.global-search-input{
height:36px !important; border-radius:var(--p-r-sm) !important; background:rgba(16,24,40,.045) !important; border:0 !important; box-shadow:none !important; font-size:11.5px !important; color:var(--p-text) !important; transition:background var(--p-fast) var(--p-ease), box-shadow var(--p-fast) var(--p-ease) !important;
width:100% !important;
}
/* Below ~1100px the chrome runs out of room: shed the mastery pill and let
the field give ground rather than clipping the account controls. */
@media(max-width:1100px){
.global-search-wrap{ flex:1 1 150px !important; min-width:120px !important; }
.topbar-right>.badge{ display:none !important; }
.topbar-left-wrap{ gap:14px !important; }
.topbar-left-wrap>div:last-child{ min-width:0 !important; }
}
@media(max-width:860px){
/* Page title also appears as the page's own heading, so it is the safe
thing to drop before the search field or the account controls. */
.topbar-left-wrap>div:last-child{ display:none !important; }
}
@media(max-width:780px){
.global-search-wrap{ flex:1 1 auto !important; min-width:0 !important; max-width:none !important; }
}
/* (b) The dashboard KPI row was pinned to 4 columns at every width — a later
V73 rule overrode the earlier responsive breakpoints — so tiles crushed
and wrapped on laptops. Restore a real column ramp. */
@media(max-width:1180px){
.home-kpi-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
.home-main-grid{ grid-template-columns:minmax(0,1fr) !important; }
.home-rail{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media(max-width:1180px) and (min-width:781px){
/* Attendance has three tiles — going 2-up would orphan the third, so it
holds at three until the narrow breakpoint. */
.timesheet-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media(max-width:980px){
.action-grid{ grid-template-columns:minmax(0,1fr) !important; }
.academy-hero{ grid-template-columns:minmax(0,1fr) !important; }
}
@media(max-width:620px){
.home-kpi-grid,.home-rail,.attendance-kpi-grid,.timesheet-kpis{
grid-template-columns:minmax(0,1fr) !important;
}
}
/* Give tile copy room to sit on one line where it can */
.home-kpi b,.home-kpi small{ overflow-wrap:anywhere; }
/* (c) The news carousel cross-faded both slides at once, so two headlines
were legible on top of each other mid-rotation. Stagger it: the outgoing
slide is fully gone before the incoming one starts. */
.news-ribbon.active{
transition:opacity .28s ease .18s, transform .42s var(--p-ease) .16s !important;
}
.news-ribbon{
transition:opacity .2s ease, transform .2s var(--p-ease) !important;
border:0 !important; background:linear-gradient(100deg,var(--p-surface-2),#fff) !important; box-shadow:inset 0 0 0 1px var(--p-hair) !important; border-radius:var(--p-r-sm) !important;
}
.news-ribbon-mark{
border-radius:var(--p-r-xs) !important;
box-shadow:inset 0 0 0 1px rgba(16,24,40,.06), inset 0 1px 0 rgba(255,255,255,.7) !important;
}
.news-dot{ background:rgba(16,24,40,.16) !important; }
.news-dot.active{ background:var(--p-accent) !important; }
/* ============================================================================
14. Academy — flat session index
The Trainings tab no longer walks the learner through department → module →
session. One Continue card, one filter bar, one grouped list of rows that
each open their material directly.
========================================================================== */
.academy-v2{ display:flex; flex-direction:column; gap:14px; }
.academy-v2 .academy-hero{ padding:22px 26px !important; }
.academy-v2 .academy-hero h1{ font-size:23px !important; }
/* ---- Continue card ---------------------------------------------------- */
.academy-resume{
display:grid; grid-template-columns:46px minmax(0,1fr) auto;
align-items:center; gap:16px;
padding:16px 18px;
border-radius:var(--p-r) !important;
background:linear-gradient(140deg,#fdfdff,#f7f8fe) !important;
box-shadow:0 0 0 1px var(--p-accent-ring), 0 1px 2px rgba(16,24,40,.04), 0 10px 24px -12px var(--p-accent-glow) !important;
cursor:pointer;
transition:box-shadow var(--p-med) var(--p-ease), transform var(--p-med) var(--p-ease);
}
.academy-resume:hover{
transform:translateY(-1px);
box-shadow:0 0 0 1px var(--p-accent), 0 2px 4px rgba(16,24,40,.05), 0 16px 34px -14px var(--p-accent-glow) !important;
}
.academy-resume-done{ cursor:default; grid-template-columns:46px minmax(0,1fr); }
.academy-resume-done:hover{ transform:none; }
.academy-resume-mark{
width:46px; height:46px; border-radius:var(--p-r-sm);
display:grid; place-items:center;
background:linear-gradient(150deg,var(--p-accent-hi),var(--p-accent)); color:#fff;
box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 4px 10px -3px var(--p-accent-glow);
}
.academy-resume-mark .lm-icon{ width:19px; height:19px; }
.academy-resume .academy-resume-mark .lm-icon[aria-hidden]{ fill:currentColor; stroke-width:1.4; }
.academy-resume-done .academy-resume-mark .lm-icon{ fill:none; stroke-width:2.6; }
.academy-resume-done .academy-resume-mark{ background:linear-gradient(150deg,#1a9668,var(--p-green)); }
.academy-resume-body{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.academy-resume-kicker{
font-size:9px; font-weight:640; letter-spacing:.09em; text-transform:uppercase;
color:var(--p-accent);
}
.academy-resume-done .academy-resume-kicker{ color:var(--p-green); }
.academy-resume-body b{
font-size:15px; font-weight:640; color:var(--p-text); letter-spacing:-.018em;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.academy-resume-body small{ font-size:10.5px; color:var(--p-text-3); }
.academy-resume-cta{ flex:none; height:36px; padding:0 16px; }
/* ---- Toolbar ---------------------------------------------------------- */
.academy-toolbar{
position:sticky; top:60px; z-index:12;
display:flex; align-items:center; flex-wrap:wrap; gap:10px 12px;
padding:11px 12px; margin:0 -2px;
border-radius:var(--p-r);
background:rgba(250,251,253,.86);
backdrop-filter:saturate(180%) blur(16px);
-webkit-backdrop-filter:saturate(180%) blur(16px);
box-shadow:0 0 0 1px var(--p-hair), 0 4px 14px -8px rgba(16,24,40,.18);
}
.academy-search{ position:relative; flex:0 0 250px; max-width:100%; display:flex; align-items:center; }
@media(max-width:1080px){ .academy-search{ flex:1 1 100%; } }
.academy-search svg{
position:absolute; left:11px; width:14px; height:14px;
color:var(--p-text-4); pointer-events:none;
}
.academy-search input{
width:100%; height:34px; padding:0 30px 0 32px !important;
font-size:11.5px !important; border-radius:var(--p-r-xs) !important;
}
.academy-search input::-webkit-search-cancel-button{ display:none; }
.academy-search-clear{
position:absolute; right:6px; width:22px; height:22px; border:0; padding:0;
border-radius:6px; background:transparent; color:var(--p-text-3);
font-size:15px; line-height:1; cursor:pointer;
}
.academy-search-clear:hover{ background:rgba(16,24,40,.07); color:var(--p-text); }
.academy-pill-row{ display:flex; flex-wrap:wrap; gap:5px; min-width:0; }
.academy-pill{
display:inline-flex; align-items:center; gap:6px;
height:30px; padding:0 11px; border:0;
border-radius:99px; cursor:pointer;
background:transparent; color:var(--p-text-2);
font:600 11px Inter,sans-serif; letter-spacing:-.004em;
transition:background var(--p-fast) var(--p-ease), color var(--p-fast) var(--p-ease), box-shadow var(--p-fast) var(--p-ease);
}
.academy-pill span{
font-size:9.5px; font-weight:640; color:var(--p-text-4);
font-variant-numeric:tabular-nums;
}
.academy-pill:hover{ background:rgba(16,24,40,.05); color:var(--p-text); }
.academy-pill.active{
background:#fff; color:var(--p-text);
box-shadow:var(--p-e-chip);
}
.academy-pill.active span{ color:var(--p-accent); }
.academy-pill-row-status{ margin-left:auto; }
.academy-pill-row-status .academy-pill.active{ background:var(--p-accent-tint); box-shadow:inset 0 0 0 1px var(--p-accent-ring); color:var(--p-accent); }
/* ---- Module tiles: three across, each scrolling on its own -------------
A single 53-row list meant scrolling the whole page to reach any module.
Each module is now a fixed-height tile showing five sessions, with its own
scrollbar for the rest, so every module is reachable without paging. */
.academy-list{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px; align-items:stretch; /* every tile in a row matches its siblings */
}
.academy-group{
background:var(--p-surface);
border-radius:var(--p-r);
box-shadow:var(--p-e1);
overflow:hidden; min-width:0;
display:flex; flex-direction:column;
height:100%; min-height:188px;
}
.academy-rows::-webkit-scrollbar{ width:9px; }
.academy-rows::-webkit-scrollbar-thumb{
background:rgba(16,24,40,.16); border-radius:99px;
border:3px solid transparent; background-clip:content-box;
}
.academy-rows::-webkit-scrollbar-thumb:hover{ background:rgba(16,24,40,.28); background-clip:content-box; }
.academy-group-foot{
flex:none; margin-top:auto; padding:9px 16px;
font-size:9.5px; font-weight:600; color:var(--p-text-4);
background:var(--p-surface-2);
box-shadow:inset 0 1px 0 var(--p-divider);
}
@media(max-width:1180px){ .academy-list{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:780px){ .academy-list{ grid-template-columns:minmax(0,1fr); } }
.academy-group-kicker{
display:block; font-size:9px; font-weight:640; letter-spacing:.09em;
text-transform:uppercase; color:var(--p-text-4); margin-bottom:3px;
}
.academy-group-stat{ display:flex; align-items:center; gap:10px; flex:none; }
.academy-group-stat b{
font-size:13px; font-weight:640; color:var(--p-text);
font-variant-numeric:tabular-nums lining-nums;
}
.academy-group-stat b span{ color:var(--p-text-4); font-weight:500; }
.academy-mini-bar{
display:block; width:72px; height:5px; border-radius:99px;
background:rgba(16,24,40,.08); overflow:hidden;
}
.academy-mini-bar i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--p-accent-hi),var(--p-accent)); }
.academy-rows{
/* Two rows is the design height; flexing to fill keeps every tile in a row the same height regardless of how long its module name is. */ flex:1 1 auto; min-height:108px; max-height:108px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin;
list-style:none; margin:0; padding:0;
}
.academy-row{
display:grid;
grid-template-columns:30px minmax(0,1fr) 14px;
align-items:center; gap:11px;
padding:10px 16px;
cursor:pointer;
background-image:linear-gradient(90deg,transparent,rgba(16,24,40,.05) 4%,rgba(16,24,40,.05) 96%,transparent);
background-size:100% 1px; background-position:bottom; background-repeat:no-repeat;
transition:background-color var(--p-fast) var(--p-ease);
}
.academy-rows li:last-child{ background-image:none; }
.academy-row:hover{ background-color:var(--p-surface-2); }
.academy-row-locked{ cursor:default; }
.academy-row-locked:hover{ background-color:transparent; }
.academy-row-mark{
width:30px; height:30px; border-radius:var(--p-r-xs);
display:grid; place-items:center; flex:none;
font-size:11px; font-weight:640; letter-spacing:-.01em;
font-variant-numeric:tabular-nums;
background:rgba(16,24,40,.05); color:var(--p-text-2);
box-shadow:inset 0 0 0 1px var(--p-hair);
}
.academy-row-mark svg{ width:15px; height:15px; }
.academy-row-done .academy-row-mark{
background:linear-gradient(150deg,#e6f5ee,#daefe4); color:var(--p-green);
box-shadow:inset 0 0 0 1px var(--p-green-ring);
}
.academy-row-progress .academy-row-mark{
background:linear-gradient(150deg,var(--p-accent-tint),var(--p-accent-tint-2)); color:var(--p-accent);
box-shadow:inset 0 0 0 1px var(--p-accent-ring);
}
.academy-row-locked .academy-row-mark{ color:var(--p-text-4); }
.academy-row-mark-sim{ background:linear-gradient(150deg,#fdf6e8,#f9eed6); color:var(--p-amber); box-shadow:inset 0 0 0 1px var(--p-amber-ring); font-size:14px; }
.academy-row-main{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.academy-row-main b{
font-size:12.5px; font-weight:600; color:var(--p-text); letter-spacing:-.01em;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.academy-row-locked .academy-row-main b{ color:var(--p-text-3); }
/* Chevron replaces the wordy action column inside the narrow tile */
.academy-row-go{
font-size:14px; color:var(--p-text-4); line-height:1; text-align:right;
transition:transform var(--p-fast) var(--p-ease), color var(--p-fast) var(--p-ease);
}
.academy-row:hover .academy-row-go{ color:var(--p-accent); transform:translateX(2px); }
.academy-row-main small{
font-size:10.5px; color:var(--p-text-3); line-height:1.45; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
font-variant-numeric:tabular-nums;
}
.academy-row-done .academy-row-main small{ color:var(--p-green) !important; }
.academy-row-progress .academy-row-main small{ color:var(--p-accent) !important; }
/* Tile headers are narrower, so the stat block sheds the bar and keeps counts */
.academy-group-head h3{
margin:0; font-size:14px; font-weight:640; color:var(--p-text); letter-spacing:-.018em;
font-size:13px !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.academy-group-head{
display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 18px 12px; background-image:linear-gradient(90deg,transparent,var(--p-divider) 4%,var(--p-divider) 96%,transparent); background-size:100% 1px; background-position:bottom; background-repeat:no-repeat;
padding:13px 16px 11px !important; gap:10px !important;
min-height:58px; align-items:center !important;
}
.academy-group-stat .lm-segbar.thin{ width:52px !important; }
.academy-row-meta{ display:flex; align-items:center; gap:8px; flex:none; }
.academy-chip{
display:inline-flex; align-items:center; height:21px; padding:0 8px;
border-radius:99px; font-size:9.5px; font-weight:640; letter-spacing:.005em;
white-space:nowrap;
}
.academy-chip-done{ background:var(--p-green-bg); color:var(--p-green); box-shadow:inset 0 0 0 1px var(--p-green-ring); }
.academy-chip-progress{ background:var(--p-accent-tint); color:var(--p-accent); box-shadow:inset 0 0 0 1px var(--p-accent-ring); }
.academy-chip-todo{ background:rgba(16,24,40,.05); color:var(--p-text-2); box-shadow:inset 0 0 0 1px var(--p-hair); }
.academy-chip-locked{ background:transparent; color:var(--p-text-4); box-shadow:inset 0 0 0 1px var(--p-hair); }
.academy-chip-sim{ background:var(--p-amber-bg); color:var(--p-amber); box-shadow:inset 0 0 0 1px var(--p-amber-ring); }
.academy-row-score{
font-size:11.5px; font-weight:640; color:var(--p-text-2);
font-variant-numeric:tabular-nums lining-nums; min-width:34px; text-align:right;
}
.academy-row-action{
display:inline-flex; align-items:center; gap:6px; flex:none;
font-size:11px; font-weight:620; color:var(--p-accent);
min-width:74px; justify-content:flex-end; white-space:nowrap;
}
.academy-row-action b{ font-weight:640; transition:transform var(--p-fast) var(--p-ease); }
.academy-row:hover .academy-row-action b{ transform:translateX(3px); }
.academy-row-locked .academy-row-action{ color:var(--p-text-4); font-weight:500; font-size:10px; }
/* Breadcrumb on the session page — getting back should not require scrolling
past every topic to the button at the bottom. */
.training-crumb{
display:flex; align-items:center; gap:8px; margin:-4px 0 14px;
font-size:11px; color:var(--p-text-3);
}
.training-crumb button{
border:0; background:transparent; padding:0; cursor:pointer;
font:620 11px Inter,sans-serif; color:var(--p-accent);
transition:color var(--p-fast) var(--p-ease);
}
.training-crumb button:hover{ color:var(--p-accent-lo); text-decoration:underline; }
.training-crumb b{ font-weight:600; color:var(--p-text-2); }
.academy-empty-state{
grid-column:1 / -1;
padding:38px 20px; text-align:center; background:var(--p-surface); border-radius:var(--p-r); box-shadow:var(--p-e1);
}
.academy-empty-state b{ display:block; font-size:13.5px; font-weight:640; color:var(--p-text); }
.academy-empty-state p{ margin:5px 0 14px; font-size:11.5px; color:var(--p-text-3); }
/* Competency scores, merged in from the retired Performance tab */
.academy-competency{ padding:20px 22px !important; }
.academy-competency-head{
display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px;
}
.academy-competency-head .ts-block-label{ margin-bottom:6px; }
.academy-competency-head p{ margin:0; font-size:11.5px; line-height:1.6; color:var(--p-text-3); max-width:70ch; }
.academy-competency-head p b{ color:var(--p-text-2); font-weight:640; }
.academy-competency-body{ display:flex; align-items:center; gap:28px; }
.academy-competency-ring{ flex:none; }
.academy-competency-bars{ flex:1; min-width:0; }
.academy-competency-bars .lm-rankrow-label{ flex:0 0 132px; }
.academy-competency-empty{
display:flex; align-items:center; gap:14px;
padding:18px 19px; border-radius:var(--p-r-sm);
background:var(--p-surface-2); box-shadow:inset 0 0 0 1px var(--p-hair);
}
.academy-competency-empty > span{
width:38px; height:38px; flex:none; border-radius:var(--p-r-xs); display:grid; place-items:center;
background:var(--p-accent-tint); color:var(--p-accent);
box-shadow:inset 0 0 0 1px var(--p-accent-ring);
}
.academy-competency-empty .lm-icon{ width:18px; height:18px; }
.academy-competency-empty b{ display:block; font-size:12.5px; font-weight:640; color:var(--p-text); }
.academy-competency-empty p{ margin:4px 0 0; font-size:11.5px; line-height:1.6; color:var(--p-text-3); }
@media(max-width:820px){
.academy-competency-body{ flex-direction:column; align-items:stretch; gap:18px; }
.academy-competency-ring .lm-donut{ margin:0 auto; }
.academy-competency-head{ flex-direction:column; }
}
@media(max-width:900px){
.academy-pill-row-status{ margin-left:0; }
.academy-group-head{ padding:12px 14px 10px; }
.academy-resume{ grid-template-columns:42px minmax(0,1fr); row-gap:12px; }
.academy-resume-cta{ grid-column:1 / -1; justify-content:center; }
.academy-resume-done{ grid-template-columns:42px minmax(0,1fr); }
}
@media(max-width:620px){
.academy-row-meta .academy-chip{ display:none; }
.academy-row-main small{ display:none; }
.academy-toolbar{ position:static; }
}
/* ============================================================================
15. Icon system — drawn marks replacing the old inline emoji
Emoji rendered differently on every OS and never matched the stroke weight
of the rest of the UI. Everything below is the same 24x24 stroke set as the
navigation, so weight and colour stay consistent.
========================================================================== */
.kpi-icon .lm-icon,
.home-kpi-icon .lm-icon,
.action-icon .lm-icon,
.utility-icon .lm-icon,
.academy-summary-icon .lm-icon{ width:17px; height:17px; }
.process-progress-icon .lm-icon{ width:19px; height:19px; }
.cert-badge-icon .lm-icon{ width:28px; height:28px; color:#f0c266; stroke-width:1.6; }
.empty-icon .lm-icon,
.leave-empty>span .lm-icon,
.notification-empty>span .lm-icon{ width:24px; height:24px; }
.recognition-star .lm-icon{ width:16px; height:16px; color:var(--p-amber); }
.policy-signed-check .lm-icon,
.policy-history-check .lm-icon,
.course-assignment-check .lm-icon,
.onboard-check .lm-icon{ width:14px; height:14px; stroke-width:2.4; }
.policy-ack-badge .lm-icon{ width:11px; height:11px; stroke-width:2.6; }
.news-tile-fallback .lm-icon{ width:26px; height:26px; opacity:.5; }
.toast-icon .lm-icon{ width:16px; height:16px; }
.modal-close .lm-icon{ width:15px; height:15px; }
.tab-btn .lm-icon{ width:11px; height:11px; vertical-align:-1px; }
.lm-theme .lm-icon{ width:16px; height:16px; }
.section-title .lm-icon{ width:15px; height:15px; vertical-align:-2px; margin-right:5px; }
.training-num .lm-icon{ width:14px; height:14px; stroke-width:2.4; }
.academy-row-mark-sim .lm-icon{ width:17px; height:17px; }
.empty-icon,.leave-empty>span,.notification-empty>span{ display:grid; place-items:center; }
/* Status dot used by presence badges (was a bullet character). */
.lm-dot{
width:6px; height:6px; border-radius:50%; flex:none;
background:currentColor; display:inline-block; margin-right:6px;
box-shadow:0 0 0 2px rgba(255,255,255,.9);
}
/* ============================================================================
16. Infographics
========================================================================== */
.lm-donut{ position:relative; flex:none; display:grid; place-items:center; }
.lm-donut svg{ display:block; transform:rotate(0deg); }
.lm-donut-track{ stroke:rgba(16,24,40,.08); }
.lm-donut-value{
stroke:var(--p-accent);
transition:stroke-dasharray .6s var(--p-ease);
}
.lm-donut-done .lm-donut-value{ stroke:var(--p-green); }
.lm-donut-label{
position:absolute; inset:0; display:flex; flex-direction:column;
align-items:center; justify-content:center; gap:1px; text-align:center;
}
.lm-donut-label b{
font-size:24px; font-weight:640; color:var(--p-text); letter-spacing:-.03em;
line-height:1; font-variant-numeric:tabular-nums lining-nums;
}
.lm-donut-label b span{ font-size:13px; font-weight:600; color:var(--p-text-3); margin-left:1px; }
.lm-donut-label small{ font-size:9px; color:var(--p-text-4); font-weight:550; }
/* Segmented bar + legend */
.lm-segbar{
display:flex; width:100%; height:8px; border-radius:99px; overflow:hidden;
background:rgba(16,24,40,.06); gap:2px;
box-shadow:inset 0 1px 1px rgba(16,24,40,.04);
}
.lm-segbar.thin{ height:5px; width:84px; }
.lm-seg{ display:block; height:100%; border-radius:99px; transition:width .5s var(--p-ease); }
.lm-seg-done,.lm-legend-item i.lm-seg-done{ background:linear-gradient(90deg,#1fa877,var(--p-green)); }
.lm-seg-progress,.lm-legend-item i.lm-seg-progress{ background:linear-gradient(90deg,var(--p-accent-hi),var(--p-accent)); }
.lm-seg-todo,.lm-legend-item i.lm-seg-todo{ background:rgba(16,24,40,.22); }
.lm-seg-locked,.lm-legend-item i.lm-seg-locked{ background:rgba(16,24,40,.10); }
.lm-seg-empty{ background:transparent; }
.lm-legend{ display:flex; flex-wrap:wrap; gap:6px 16px; }
.lm-legend-item{
display:inline-flex; align-items:center; gap:6px;
font-size:10px; font-weight:550; color:var(--p-text-3);
}
.lm-legend-item i{ width:8px; height:8px; border-radius:3px; flex:none; }
.lm-legend-item b{
font-size:11px; font-weight:640; color:var(--p-text);
font-variant-numeric:tabular-nums lining-nums;
}
/* Ranked horizontal bars — progress by department */
.lm-rankbars{ display:flex; flex-direction:column; gap:7px; width:100%; min-width:0; }
.lm-rankrow{ display:flex; align-items:center; gap:9px; min-width:0; }
.lm-rankrow-label{
display:flex; align-items:center; gap:6px; flex:0 0 116px; min-width:0;
font-size:10px; font-weight:550; color:var(--p-text-2);
}
.lm-rankrow-label .lm-icon{ width:13px; height:13px; color:var(--p-text-4); flex:none; }
.lm-rankrow-label span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lm-rankrow-track{
height:6px; border-radius:99px; background:rgba(16,24,40,.07);
min-width:14px; overflow:hidden; box-shadow:inset 0 1px 1px rgba(16,24,40,.04);
}
.lm-rankrow-track i{
display:block; height:100%; border-radius:99px;
background:linear-gradient(90deg,var(--p-accent-hi),var(--p-accent));
transition:width .5s var(--p-ease);
}
.lm-rankrow-value{
flex:none; margin-left:auto; font-size:10.5px; font-weight:640; color:var(--p-text);
font-variant-numeric:tabular-nums lining-nums;
}
.lm-rankrow-value span{ color:var(--p-text-4); font-weight:500; }
.lm-rankbars-foot{ font-size:9px; color:var(--p-text-4); margin-top:2px; }
/* ---- Training hero, now a small dashboard ---------------------------- */
.academy-hero-viz{
display:grid !important;
grid-template-columns:minmax(0,1fr) 344px !important;
gap:30px !important; align-items:center !important;
}
.academy-hero-stats{ margin-top:18px; display:flex; flex-direction:column; gap:9px; max-width:520px; }
.academy-hero-viz-side{
display:flex; align-items:center; gap:18px; min-width:0;
padding-left:26px;
box-shadow:inset 1px 0 0 var(--p-divider);
}
.academy-hero-viz-side .lm-rankbars{ flex:1 1 auto; }
.academy-hero-viz-side .lm-rankrow-label{ flex:0 0 96px; }
.academy-hero-viz-side .lm-rankrow-track{ flex:1 1 auto; }
.academy-group-id{
min-width:0;
display:flex; align-items:center; gap:11px;
}
.academy-group-badge{
width:30px !important; height:30px !important;
width:32px; height:32px; border-radius:var(--p-r-xs); flex:none; display:grid; place-items:center; background:linear-gradient(150deg,var(--p-accent-tint),var(--p-accent-tint-2)); color:var(--p-accent); box-shadow:inset 0 0 0 1px var(--p-accent-ring), inset 0 1px 0 rgba(255,255,255,.7);
}
.academy-group-badge .lm-icon{
width:15px !important; height:15px !important;
width:16px; height:16px;
}
.academy-group-text{ min-width:0; }
@media(max-width:1120px){
.academy-hero-viz{ grid-template-columns:minmax(0,1fr) !important; gap:22px !important; }
.academy-hero-viz-side{ padding-left:0; box-shadow:inset 0 1px 0 var(--p-divider); padding-top:20px; }
}
@media(max-width:620px){
.academy-hero-viz-side{ flex-direction:column; align-items:stretch; gap:16px; }
.academy-hero-viz-side .lm-donut{ margin:0 auto; }
.academy-group-badge{ width:28px; height:28px; }
}
/* ============================================================================
17. Training session reader
========================================================================== */
.ts-page{ display:flex; flex-direction:column; gap:14px; max-width:1020px; }
/* ---- Header ----------------------------------------------------------- */
.ts-head{
background:linear-gradient(168deg,#ffffff,#fcfcfe);
border-radius:var(--p-r-lg);
box-shadow:var(--p-e2);
padding:22px 24px 0;
position:relative; overflow:hidden;
}
.ts-head::before{
content:""; position:absolute; left:0; right:0; top:0; height:2px;
background:linear-gradient(90deg,var(--p-accent),var(--p-accent-hi) 26%,transparent 68%);
}
.ts-head-main{ display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:14px; align-items:start; }
.ts-head-badge{
width:44px; height:44px; border-radius:var(--p-r-sm); display:grid; place-items:center;
background:linear-gradient(150deg,var(--p-accent-tint),var(--p-accent-tint-2));
color:var(--p-accent);
box-shadow:inset 0 0 0 1px var(--p-accent-ring), inset 0 1px 0 rgba(255,255,255,.7);
}
.ts-head-badge .lm-icon{ width:21px; height:21px; }
.ts-head-copy{ min-width:0; }
.ts-head-eyebrow{
display:block; font-size:9.5px; font-weight:640; letter-spacing:.075em;
text-transform:uppercase; color:var(--p-text-4); margin-bottom:5px;
}
.ts-head-copy h1{
margin:0 0 6px; font-size:23px; font-weight:640;
letter-spacing:-.028em; line-height:1.18; color:var(--p-text);
}
.ts-head-copy p{ margin:0; font-size:12px; line-height:1.6; color:var(--p-text-2); max-width:70ch; }
.ts-status{
display:inline-flex; align-items:center; gap:6px; flex:none;
height:26px; padding:0 11px; border-radius:99px;
font-size:10px; font-weight:640; white-space:nowrap;
}
.ts-status .lm-icon{ width:12px; height:12px; stroke-width:2.4; }
.ts-status-passed{ background:var(--p-green-bg); color:var(--p-green); box-shadow:inset 0 0 0 1px var(--p-green-ring); }
.ts-status-progress{ background:var(--p-accent-tint); color:var(--p-accent); box-shadow:inset 0 0 0 1px var(--p-accent-ring); }
.ts-status-progress .lm-icon{ fill:currentColor; stroke-width:1.4; }
.ts-head-stats{
display:flex; gap:0; margin-top:20px;
background-image:linear-gradient(90deg,transparent,var(--p-divider) 3%,var(--p-divider) 97%,transparent);
background-size:100% 1px; background-position:top; background-repeat:no-repeat;
}
.ts-stat{ flex:1; padding:13px 4px 15px; min-width:0; position:relative; }
.ts-stat + .ts-stat::before{
content:""; position:absolute; left:0; top:15px; bottom:15px; width:1px; background:var(--p-divider);
}
.ts-stat b{
display:block; font-size:19px; font-weight:640; color:var(--p-text);
letter-spacing:-.03em; line-height:1.1;
font-variant-numeric:tabular-nums lining-nums;
}
.ts-stat b span{ font-size:11px; color:var(--p-text-3); font-weight:600; margin-left:1px; }
.ts-stat>span{ display:block; margin-top:4px; font-size:9.5px; font-weight:550; color:var(--p-text-4); }
/* ---- Stage stepper ---------------------------------------------------- */
.ts-stepper{
list-style:none; margin:0; padding:6px;
display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px;
background:var(--p-surface); border-radius:var(--p-r);
box-shadow:var(--p-e1);
}
.ts-step{
display:flex; align-items:center; gap:9px; min-width:0; min-height:50px;
padding:9px 10px; border-radius:var(--p-r-xs); cursor:pointer;
transition:background var(--p-fast) var(--p-ease), box-shadow var(--p-fast) var(--p-ease);
}
.ts-step:hover:not(.is-locked):not(.is-active){ background:rgba(16,24,40,.04); }
.ts-step.is-active{ background:#fff; box-shadow:var(--p-e-chip); }
.ts-step.is-locked{ cursor:not-allowed; opacity:.55; }
.ts-step-mark{
width:26px; height:26px; border-radius:50%; flex:none;
display:grid; place-items:center;
font-size:11px; font-weight:640; font-variant-numeric:tabular-nums;
background:rgba(16,24,40,.06); color:var(--p-text-3);
box-shadow:inset 0 0 0 1px var(--p-hair);
transition:background var(--p-fast) var(--p-ease), color var(--p-fast) var(--p-ease);
}
.ts-step-mark .lm-icon{ width:13px; height:13px; stroke-width:2.6; }
.ts-step.is-active .ts-step-mark{
background:linear-gradient(150deg,var(--p-accent-hi),var(--p-accent)); color:#fff;
box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 3px 8px -2px var(--p-accent-glow);
}
.ts-step.is-done .ts-step-mark{
background:var(--p-green-bg); color:var(--p-green);
box-shadow:inset 0 0 0 1px var(--p-green-ring);
}
.ts-step-copy{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.ts-step-copy b{
font-size:11px; font-weight:600; color:var(--p-text-2); letter-spacing:-.01em;
line-height:1.25; overflow-wrap:break-word;
}
.ts-step.is-active .ts-step-copy b{ color:var(--p-text); font-weight:640; }
.ts-step-copy small{
font-size:9px; color:var(--p-text-4); line-height:1.3;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* ---- Content blocks --------------------------------------------------- */
.ts-body{ display:flex; flex-direction:column; gap:14px; }
.ts-block{
background:var(--p-surface); border-radius:var(--p-r);
box-shadow:var(--p-e1); padding:20px 22px;
}
.ts-block-label{
display:flex; align-items:center; gap:8px; margin-bottom:15px;
font-size:10px; font-weight:640; letter-spacing:.075em; text-transform:uppercase;
color:var(--p-text-3);
}
.ts-block-label .lm-icon{ width:14px; height:14px; color:var(--p-accent); }
.ts-block-label i{
margin-left:auto; font-style:normal; text-transform:none; letter-spacing:0;
font-size:10px; font-weight:550; color:var(--p-text-4);
}
/* Objectives grid */
.ts-objectives{
list-style:none; margin:0; padding:0;
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px;
}
.ts-objectives li{
display:flex; align-items:flex-start; gap:10px;
padding:12px 13px; border-radius:var(--p-r-xs);
background:var(--p-surface-2);
box-shadow:inset 0 0 0 1px var(--p-hair);
font-size:12px; line-height:1.55; color:var(--p-text-2);
}
.ts-obj-tick{
width:19px; height:19px; border-radius:50%; flex:none; margin-top:1px;
display:grid; place-items:center;
background:var(--p-green-bg); color:var(--p-green);
box-shadow:inset 0 0 0 1px var(--p-green-ring);
}
.ts-obj-tick .lm-icon{ width:11px; height:11px; stroke-width:3; }
/* Topics */
.ts-topics{ display:flex; flex-direction:column; gap:16px; }
.ts-topic{
padding:18px 19px; border-radius:var(--p-r-sm);
background:var(--p-surface-2);
box-shadow:inset 0 0 0 1px var(--p-hair);
}
.ts-topic-head{ display:flex; align-items:center; gap:11px; margin-bottom:9px; }
.ts-topic-num{
width:28px; height:28px; border-radius:var(--p-r-xs); flex:none;
display:grid; place-items:center;
font-size:10.5px; font-weight:640; font-variant-numeric:tabular-nums;
background:linear-gradient(150deg,#1d2536,var(--p-text)); color:#fff;
box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.ts-topic-head h3{
margin:0; font-size:14.5px; font-weight:640; letter-spacing:-.018em; color:var(--p-text);
}
.ts-topic-body{
margin:0; font-size:12.5px; line-height:1.75; color:var(--p-text-2);
max-width:76ch;
}
.ts-callout{
display:flex; gap:11px; margin-top:13px; padding:12px 14px;
border-radius:var(--p-r-xs); background:#fff;
box-shadow:inset 0 0 0 1px var(--p-accent-ring);
}
.ts-callout-mark{
width:24px; height:24px; border-radius:var(--p-r-xs); flex:none;
display:grid; place-items:center;
background:var(--p-accent-tint); color:var(--p-accent);
}
.ts-callout-mark .lm-icon{ width:13px; height:13px; }
.ts-callout b{
display:block; font-size:9.5px; font-weight:640; letter-spacing:.075em;
text-transform:uppercase; color:var(--p-accent); margin-bottom:4px;
}
.ts-callout p{ margin:0; font-size:12px; line-height:1.65; color:var(--p-text-2); }
/* ---- Questions -------------------------------------------------------- */
.ts-quiz{ display:flex; flex-direction:column; gap:12px; }
.ts-question{
padding:17px 18px; border-radius:var(--p-r-sm);
background:var(--p-surface-2);
box-shadow:inset 0 0 0 1px var(--p-hair);
transition:box-shadow var(--p-med) var(--p-ease);
}
.ts-question.is-right{ box-shadow:inset 0 0 0 1px var(--p-green-ring); }
.ts-question.is-wrong{ box-shadow:inset 0 0 0 1px var(--p-red-ring); }
.ts-q-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.ts-q-num{
font-size:9.5px; font-weight:640; letter-spacing:.075em; text-transform:uppercase;
color:var(--p-accent);
}
.ts-q-num i{ font-style:normal; color:var(--p-text-4); margin-left:5px; letter-spacing:.04em; }
.ts-q-verdict{
display:inline-flex; align-items:center; gap:5px;
height:22px; padding:0 9px; border-radius:99px;
font-size:9.5px; font-weight:640;
}
.ts-q-verdict .lm-icon{ width:11px; height:11px; stroke-width:2.8; }
.ts-q-verdict-right{ background:var(--p-green-bg); color:var(--p-green); box-shadow:inset 0 0 0 1px var(--p-green-ring); }
.ts-q-verdict-wrong{ background:var(--p-red-bg); color:var(--p-red); box-shadow:inset 0 0 0 1px var(--p-red-ring); }
.ts-q-text{
margin:0 0 13px; font-size:13.5px; font-weight:600;
line-height:1.5; letter-spacing:-.012em; color:var(--p-text);
}
.ts-options{ display:flex; flex-direction:column; gap:7px; }
.ts-option{
display:grid !important; grid-template-columns:24px minmax(0,1fr); align-items:center; gap:11px;
padding:11px 13px !important; margin:0 !important;
border-radius:var(--p-r-xs) !important; background:#fff !important;
box-shadow:inset 0 0 0 1px var(--p-hair-2) !important;
cursor:pointer;
transition:box-shadow var(--p-fast) var(--p-ease), background var(--p-fast) var(--p-ease);
}
.ts-option:hover{ background:var(--p-accent-tint) !important; box-shadow:inset 0 0 0 1px var(--p-accent-ring) !important; }
.ts-opt-key{
width:24px; height:24px; border-radius:50%; flex:none;
display:grid; place-items:center;
font-size:10.5px; font-weight:640; color:var(--p-text-3);
background:rgba(16,24,40,.05);
box-shadow:inset 0 0 0 1px var(--p-hair);
transition:background var(--p-fast) var(--p-ease), color var(--p-fast) var(--p-ease);
}
.ts-opt-text{ font-size:12.5px; line-height:1.5; color:var(--p-text); min-width:0; }
.ts-option.selected{ background:var(--p-accent-tint) !important; box-shadow:inset 0 0 0 2px var(--p-accent) !important; }
.ts-option.selected .ts-opt-key{ background:var(--p-accent); color:#fff; box-shadow:none; }
.ts-option.correct{ background:var(--p-green-bg) !important; box-shadow:inset 0 0 0 2px var(--p-green-ring) !important; }
.ts-option.correct .ts-opt-key{ background:var(--p-green); color:#fff; box-shadow:none; }
.ts-option.incorrect{ background:var(--p-red-bg) !important; box-shadow:inset 0 0 0 2px var(--p-red-ring) !important; }
.ts-option.incorrect .ts-opt-key{ background:var(--p-red); color:#fff; box-shadow:none; }
.ts-explain{
margin-top:12px; padding:12px 14px; border-radius:var(--p-r-xs);
background:#fff; box-shadow:inset 0 0 0 1px var(--p-hair);
}
.ts-explain b{
display:block; font-size:9.5px; font-weight:640; letter-spacing:.075em;
text-transform:uppercase; color:var(--p-text-4); margin-bottom:4px;
}
.ts-explain p{ margin:0; font-size:12px; line-height:1.65; color:var(--p-text-2); }
.ts-note{ margin:14px 0 0; font-size:11px; color:var(--p-text-4); }
/* ---- Exercise --------------------------------------------------------- */
.ts-prompt{
padding:17px 18px; border-radius:var(--p-r-sm); margin-bottom:16px;
background:var(--p-surface-2); box-shadow:inset 0 0 0 1px var(--p-hair);
}
.ts-prompt h3{ margin:0 0 7px; font-size:14.5px; font-weight:640; letter-spacing:-.018em; color:var(--p-text); }
.ts-prompt p{ margin:0; font-size:12.5px; line-height:1.7; color:var(--p-text-2); max-width:76ch; }
.ts-field{ display:block; }
.ts-field-label{
display:block; margin-bottom:7px;
font-size:9.5px; font-weight:640; letter-spacing:.075em; text-transform:uppercase; color:var(--p-text-3);
}
.ts-field textarea{
width:100%; box-sizing:border-box; resize:vertical;
padding:14px 15px !important; font:inherit; font-size:12.5px !important; line-height:1.7;
border-radius:var(--p-r-xs) !important;
}
.ts-field-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:11px; }
.ts-wordcount{ font-size:10.5px; color:var(--p-text-4); font-variant-numeric:tabular-nums; }
.ts-feedback:not(:empty){ margin-top:16px; }
.ts-review{
padding:15px 16px; border-radius:var(--p-r-sm);
background:var(--p-green-bg); box-shadow:inset 0 0 0 1px var(--p-green-ring);
}
.ts-review-warn{ background:var(--p-amber-bg); box-shadow:inset 0 0 0 1px var(--p-amber-ring); }
.ts-review-head{ display:flex; align-items:center; gap:8px; }
.ts-review-head .lm-icon{ width:15px; height:15px; stroke-width:2.4; color:var(--p-green); flex:none; }
.ts-review-warn .ts-review-head .lm-icon{ color:var(--p-amber); }
.ts-review-head b{ font-size:12px; font-weight:640; color:var(--p-text); }
.ts-review .ts-objectives{ margin-top:12px; }
.ts-review .ts-objectives li{ background:#fff; }
/* ---- Assessment gate, intro, result ----------------------------------- */
.ts-gate{
text-align:center; padding:44px 26px;
background:var(--p-surface); border-radius:var(--p-r); box-shadow:var(--p-e1);
}
.ts-gate-mark{
width:46px; height:46px; margin:0 auto 14px; border-radius:50%;
display:grid; place-items:center;
background:rgba(16,24,40,.05); color:var(--p-text-3);
box-shadow:inset 0 0 0 1px var(--p-hair);
}
.ts-gate-mark .lm-icon{ width:20px; height:20px; }
.ts-gate b{ display:block; font-size:15px; font-weight:640; color:var(--p-text); letter-spacing:-.018em; }
.ts-gate p{ margin:7px auto 18px; max-width:46ch; font-size:12px; line-height:1.65; color:var(--p-text-3); }
.ts-exam-intro{
display:flex; gap:13px; align-items:flex-start;
padding:15px 16px; margin-bottom:16px; border-radius:var(--p-r-sm);
background:var(--p-accent-tint); box-shadow:inset 0 0 0 1px var(--p-accent-ring);
}
.ts-exam-mark{
width:32px; height:32px; border-radius:var(--p-r-xs); flex:none;
display:grid; place-items:center; background:#fff; color:var(--p-accent);
box-shadow:inset 0 0 0 1px var(--p-accent-ring);
}
.ts-exam-mark .lm-icon{ width:17px; height:17px; }
.ts-exam-intro b{ display:block; font-size:12.5px; font-weight:640; color:var(--p-text); margin-bottom:3px; }
.ts-exam-intro p{ margin:0; font-size:11.5px; line-height:1.6; color:var(--p-text-2); }
.ts-exam-intro strong{ color:var(--p-accent); font-weight:640; }
.ts-submit{ width:100%; margin-top:18px; height:44px; }
.ts-result{
display:flex; align-items:center; gap:28px;
padding:30px 30px; border-radius:var(--p-r);
background:var(--p-surface); box-shadow:var(--p-e2);
}
.ts-result-copy{ min-width:0; }
.ts-result-kicker{
display:block; font-size:9.5px; font-weight:640; letter-spacing:.075em;
text-transform:uppercase; margin-bottom:6px;
}
.ts-result-pass .ts-result-kicker{ color:var(--p-green); }
.ts-result-fail .ts-result-kicker{ color:var(--p-red); }
.ts-result-copy b{ display:block; font-size:19px; font-weight:640; letter-spacing:-.024em; color:var(--p-text); }
.ts-result-copy p{ margin:7px 0 18px; font-size:12.5px; line-height:1.65; color:var(--p-text-2); max-width:52ch; }
.ts-result-actions{ display:flex; gap:9px; flex-wrap:wrap; }
.lm-donut-fail .lm-donut-value{ stroke:var(--p-red); }
/* ---- Stage footer ----------------------------------------------------- */
.ts-foot{
display:flex; align-items:center; justify-content:space-between; gap:12px;
padding:14px 16px; border-radius:var(--p-r);
background:var(--p-surface); box-shadow:var(--p-e1);
}
.ts-foot .btn{ height:38px; }
.ts-foot .btn.is-blocked{
background:rgba(16,24,40,.06) !important; color:var(--p-text-4) !important;
box-shadow:inset 0 0 0 1px var(--p-hair) !important; cursor:not-allowed;
}
.ts-foot .btn.is-blocked .lm-icon{ width:12px; height:12px; margin-right:5px; }
@media(max-width:960px){
.ts-stepper{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.ts-objectives{ grid-template-columns:minmax(0,1fr); }
.ts-result{ flex-direction:column; text-align:center; gap:20px; }
.ts-result-actions{ justify-content:center; }
.ts-result-copy p{ margin-left:auto; margin-right:auto; }
}
@media(max-width:640px){
.ts-head{ padding:18px 16px 0; }
.ts-head-main{ grid-template-columns:38px minmax(0,1fr); }
.ts-status{ grid-column:1 / -1; justify-self:start; }
.ts-head-copy h1{ font-size:20px; }
.ts-head-stats{ flex-wrap:wrap; }
.ts-stat{ flex:1 1 44%; }
.ts-stepper{ grid-template-columns:minmax(0,1fr); }
.ts-step-copy small{ display:none; }
.ts-block{ padding:16px 15px; }
.ts-topic,.ts-question,.ts-prompt{ padding:14px 14px; }
.ts-foot{ flex-direction:column-reverse; }
.ts-foot .btn{ width:100%; }
}
/* ============================================================================
18. Shared page header — one component for all eight legacy variants
.page-hero / .leave-hero / .attendance-page-hero / .timesheet-hero /
.newsroom-hero / .policies-hero / .admin-section-hero / .login-history-hero
all render eyebrow + heading + description, so they are one thing now.
The icon badge is injected at runtime (decoratePageHeaders) keyed to route.
========================================================================== */
.pg-head{
display:flex !important;
align-items:center !important;
gap:15px !important;
flex-wrap:wrap;
padding:19px 22px !important;
margin:0 0 14px !important;
background:linear-gradient(168deg,#ffffff,#fcfcfe) !important;
border:0 !important;
border-radius:var(--p-r-lg) !important;
box-shadow:var(--p-e2) !important;
position:relative; overflow:hidden;
min-height:0 !important;
}
.pg-head::before{
content:""; position:absolute; left:0; right:0; top:0; height:2px;
background:linear-gradient(90deg,var(--p-accent),var(--p-accent-hi) 26%,transparent 68%);
}
.pg-badge{
width:42px; height:42px; border-radius:var(--p-r-sm); flex:none;
display:grid; place-items:center;
background:linear-gradient(150deg,var(--p-accent-tint),var(--p-accent-tint-2));
color:var(--p-accent);
box-shadow:inset 0 0 0 1px var(--p-accent-ring), inset 0 1px 0 rgba(255,255,255,.7);
}
.pg-badge .lm-icon{ width:20px; height:20px; }
/* The first non-badge child is the eyebrow+heading+copy stack in every variant */
.pg-head > div:not([class]),
.pg-head > .attendance-hero-copy{ flex:1 1 320px; min-width:0; }
.pg-head .eyebrow,
.pg-head > div > .eyebrow{
font-size:9.5px !important; font-weight:640 !important; letter-spacing:.075em !important;
text-transform:uppercase; color:var(--p-text-4) !important; margin-bottom:4px !important;
}
.pg-head h1,.pg-head h2{
margin:0 0 5px !important;
font-size:21px !important; font-weight:640 !important;
letter-spacing:-.026em !important; line-height:1.18 !important; color:var(--p-text) !important;
display:block !important;
}
.pg-head p{
margin:0 !important; font-size:11.5px !important; line-height:1.6 !important;
color:var(--p-text-2) !important; max-width:74ch;
}
.pg-head .btn{ flex:none; }
.pg-head .hero-pill{ flex:none; }
/* V70 hid the enterprise page H1 to avoid a duplicate title; with the badge
and the shared header it now carries the page, so bring it back. */
.enterprise-page .pg-head h1{ display:block !important; }
.pg-head.page-hero-compact{ min-height:0 !important; padding:16px 20px !important; }
@media(max-width:720px){
.pg-head{ padding:16px 15px !important; gap:12px !important; }
.pg-head h1,.pg-head h2{ font-size:19px !important; }
.pg-head .btn,.pg-head .hero-pill{ flex:1 1 auto; }
}
/* ============================================================================
19. Data pages — charts where the page is about numbers
========================================================================== */
/* Attendance */
.attendance-summary{ display:grid; grid-template-columns:minmax(0,1fr); gap:12px; margin-bottom:14px; }
.attendance-ring{
display:flex !important; align-items:center; gap:24px; padding:20px 22px !important;
}
.attendance-ring-copy{ min-width:0; flex:1; display:flex; flex-direction:column; gap:9px; }
.attendance-ring-kicker{
font-size:9.5px; font-weight:640; letter-spacing:.075em; text-transform:uppercase; color:var(--p-text-4);
}
.attendance-ring-copy > b{
font-size:18px; font-weight:640; letter-spacing:-.024em; color:var(--p-text);
font-variant-numeric:tabular-nums lining-nums;
}
.attendance-summary .attendance-kpi-grid{ margin:0 !important; }
/* Performance */
.perf-overview{
display:flex !important; align-items:center; gap:28px;
padding:22px 24px !important; margin-bottom:12px;
}
.perf-overview-ring{ flex:none; }
.perf-overview-bars{ flex:1; min-width:0; }
.perf-overview-bars .ts-block-label{ margin-bottom:12px; }
.perf-overview-bars .lm-rankrow-label{ flex:0 0 132px; }
/* Certification */
.cert-ring{ position:relative; margin:18px auto 4px; width:max-content; }
.cert-card .cert-ring .lm-donut-track{ stroke:rgba(255,255,255,.12); }
.cert-card .cert-ring .lm-donut-value{ stroke:#f0c266; }
.cert-card .cert-ring.lm-donut-done .lm-donut-value{ stroke:#4ade80; }
.cert-card .cert-ring .lm-donut-label b{ color:#fff; }
.cert-card .cert-ring .lm-donut-label b span{ color:rgba(255,255,255,.6); }
.cert-card .cert-ring .lm-donut-label small{ color:rgba(255,255,255,.55); }
@media(max-width:820px){
.attendance-ring,.perf-overview{ flex-direction:column !important; align-items:stretch; gap:18px; text-align:left; }
.attendance-ring .lm-donut,.perf-overview-ring .lm-donut{ margin:0 auto; }
.perf-overview-bars .lm-rankrow-label{ flex:0 0 108px; }
}
/* ============================================================================
20. Shared empty state — one treatment for every "nothing here yet"
========================================================================== */
.lm-empty{
text-align:center; padding:46px 26px;
background:var(--p-surface); border-radius:var(--p-r); box-shadow:var(--p-e1);
}
.lm-empty-mark{
width:46px; height:46px; margin:0 auto 14px; border-radius:50%;
display:grid; place-items:center;
background:linear-gradient(150deg,var(--p-accent-tint),var(--p-accent-tint-2));
color:var(--p-accent);
box-shadow:inset 0 0 0 1px var(--p-accent-ring), inset 0 1px 0 rgba(255,255,255,.7);
}
.lm-empty-mark .lm-icon{ width:20px; height:20px; }
.lm-empty b{ display:block; font-size:14px; font-weight:640; letter-spacing:-.018em; color:var(--p-text); }
.lm-empty p{ margin:7px auto 16px; max-width:44ch; font-size:11.5px; line-height:1.65; color:var(--p-text-3); }
.lm-empty .btn{ margin-top:2px; }
/* Skeleton loader — shows the shape of what is coming instead of "Loading…" */
.lm-skeleton{
background:var(--p-surface); border-radius:var(--p-r);
box-shadow:var(--p-e1); padding:8px 18px;
}
.sk-row{
display:grid; grid-template-columns:34px minmax(0,1fr) 62px;
align-items:center; gap:14px; padding:15px 0;
background-image:linear-gradient(90deg,transparent,rgba(16,24,40,.05) 2%,rgba(16,24,40,.05) 98%,transparent);
background-size:100% 1px; background-position:bottom; background-repeat:no-repeat;
}
.sk-row:last-child{ background-image:none; }
.sk-mark,.sk-line,.sk-pill{
display:block; border-radius:6px;
background:linear-gradient(90deg,rgba(16,24,40,.05) 25%,rgba(16,24,40,.10) 37%,rgba(16,24,40,.05) 63%);
background-size:400% 100%;
animation:skShimmer 1.4s ease-in-out infinite;
}
.sk-mark{ width:34px; height:34px; border-radius:var(--p-r-xs); }
.sk-copy{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.sk-line{ height:9px; }
.sk-line:last-child{ height:8px; opacity:.6; }
.sk-pill{ width:62px; height:20px; border-radius:99px; }
@keyframes skShimmer{ 0%{background-position:100% 50%} 100%{background-position:0 50%} }
/* ============================================================================
21. MY DAY — landing page
========================================================================== */
.home-hero-score{
color:var(--p-text) !important;
display:flex; flex-direction:column; align-items:center; gap:9px; flex:none;
}
.home-hero-score>span{ font-size:9.5px; font-weight:640; letter-spacing:.075em; text-transform:uppercase; color:var(--p-text-4); }
.home-score-ring{ display:none !important; }
.home-learning-strip{
display:flex !important; align-items:center; gap:26px;
padding:16px 20px !important; margin-bottom:12px;
}
.home-learning-copy{ flex:none; min-width:0; }
.home-learning-kicker{
display:flex; align-items:center; gap:7px; margin-bottom:5px;
font-size:9.5px; font-weight:640; letter-spacing:.075em; text-transform:uppercase; color:var(--p-text-4);
}
.home-learning-kicker .lm-icon{ width:14px; height:14px; color:var(--p-accent); }
.home-learning-copy b{
font-size:15px; font-weight:640; letter-spacing:-.022em; color:var(--p-text);
font-variant-numeric:tabular-nums lining-nums;
}
.home-learning-viz{ flex:1; min-width:0; display:flex; flex-direction:column; gap:9px; }
.home-welcome .welcome-actions .btn{ height:36px; }
/* Workday tile: status pill and date on one line, the state beneath it, and
a direct route into the attendance record. */
.welcome-status{
padding:15px 17px 13px !important;
display:flex !important; flex-direction:column; gap:12px;
background:var(--p-surface-2) !important;
box-shadow:inset 0 0 0 1px var(--p-hair) !important;
border-radius:var(--p-r-sm) !important;
backdrop-filter:none !important;
}
.welcome-status-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.welcome-status-pill{
display:inline-flex; align-items:center; gap:7px;
height:24px; padding:0 10px; border-radius:99px;
font-size:10px; font-weight:640; white-space:nowrap;
}
.welcome-status-pill.is-active{ background:var(--p-green-bg); color:var(--p-green); box-shadow:inset 0 0 0 1px var(--p-green-ring); }
.welcome-status-pill.is-closed{ background:rgba(16,24,40,.05); color:var(--p-text-3); box-shadow:inset 0 0 0 1px var(--p-hair); }
.welcome-status-pill .presence-dot{ box-shadow:none !important; margin:0 !important; width:7px; height:7px; }
.welcome-status-date{
font-size:10.5px; font-weight:600; color:var(--p-text-3); white-space:nowrap;
font-variant-numeric:tabular-nums;
}
.welcome-status-body{ display:flex; flex-direction:column; gap:3px; }
.welcome-status-label{
font-size:9px; font-weight:640; letter-spacing:.075em; text-transform:uppercase; color:var(--p-text-4);
}
.welcome-status-body b{ font-size:14px; font-weight:640; letter-spacing:-.018em; color:var(--p-text); }
.welcome-status-body small{ font-size:10.5px; line-height:1.5; color:var(--p-text-3); }
.welcome-status-link{
display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
border:0; padding:0; background:transparent; cursor:pointer;
font:640 11px Inter,sans-serif; color:var(--p-accent);
padding-top:11px; box-shadow:inset 0 1px 0 var(--p-divider); width:100%;
justify-content:space-between;
}
.welcome-status-link .lm-icon{ width:13px; height:13px; transition:transform var(--p-fast) var(--p-ease); }
.welcome-status-link:hover .lm-icon{ transform:translateX(3px); }
/* Sign-out caret is a drawn chevron now, not a text glyph */
.signout-caret .lm-icon{ width:13px; height:13px; color:var(--p-text-4); }
/* Knowledge Hub cards: the arrow was floating detached at the bottom-right */
.knowledge-card > span:first-child{
width:36px; height:36px; border-radius:var(--p-r-xs); display:grid; place-items:center;
background:linear-gradient(150deg,var(--p-accent-tint),var(--p-accent-tint-2));
color:var(--p-accent); margin-bottom:5px;
box-shadow:inset 0 0 0 1px var(--p-accent-ring), inset 0 1px 0 rgba(255,255,255,.7);
}
.knowledge-card > span:first-child .lm-icon{ width:18px; height:18px; }
.knowledge-card > i,
.knowledge-card > em,
.knowledge-card > span:last-child:not(:first-child){
position:absolute; left:19px; bottom:16px;
font-style:normal; font-size:11px; font-weight:620; color:var(--p-accent);
display:inline-flex; align-items:center; gap:5px;
transition:transform var(--p-fast) var(--p-ease);
}
.knowledge-card:hover > i,
.knowledge-card:hover > em,
.knowledge-card:hover > span:last-child:not(:first-child){ transform:translateX(3px); }
/* Quick access / utility rail rows */
.utility-list button:hover{
background:var(--p-surface-2) !important;
background:var(--p-surface-2) !important;
}
.utility-list b{ font-size:11px !important; font-weight:600 !important; color:var(--p-text) !important; }
.utility-list small{ font-size:9.5px !important; color:var(--p-text-4) !important; }
/* "Who's around" — was three tall empty boxes because the markup carried no
count. Now a compact stat: dot, number, label. */
.presence-summary{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:7px !important; }
.presence-summary>div{
border:0 !important; border-radius:var(--p-r-xs) !important;
background:var(--p-surface-2); box-shadow:inset 0 0 0 1px var(--p-hair);
padding:12px 6px 11px !important;
display:flex !important; flex-direction:column; align-items:center; gap:5px;
min-width:0;
}
.presence-summary .presence-dot{ display:block !important; margin:0 !important; }
.presence-summary strong{
font-size:17px; font-weight:640; color:var(--p-text); line-height:1;
letter-spacing:-.026em; font-variant-numeric:tabular-nums lining-nums;
}
.presence-summary b{
font-size:9px !important; font-weight:640 !important; letter-spacing:.05em;
text-transform:uppercase; color:var(--p-text-4) !important;
}
/* The CTA's arrow is a display:block svg, so it fell to its own line. */
.people-rail-cta{
display:inline-flex !important; align-items:center !important; justify-content:center !important;
gap:7px !important; width:100%;
height:36px !important; border:0 !important; border-radius:var(--p-r-xs) !important;
background:var(--p-accent-tint) !important; color:var(--p-accent) !important;
box-shadow:inset 0 0 0 1px var(--p-accent-ring) !important;
font-size:11px !important; font-weight:640 !important;
transition:background var(--p-fast) var(--p-ease);
}
.people-rail-cta:hover{ background:var(--p-accent-tint-2) !important; }
.people-rail-cta .lm-icon{ width:14px; height:14px; flex:none; }
/* Panel head action buttons */
.home-panel-head .icon-link{
width:30px; height:30px; flex:none; border:0; cursor:pointer;
display:grid; place-items:center; border-radius:var(--p-r-xs);
background:rgba(16,24,40,.05); color:var(--p-text-3);
transition:background var(--p-fast) var(--p-ease), color var(--p-fast) var(--p-ease);
}
.home-panel-head .icon-link:hover{ background:var(--p-accent-tint); color:var(--p-accent); }
.home-panel-head .icon-link .lm-icon{ width:15px; height:15px; }
.home-panel-head .text-link{
display:inline-flex !important; align-items:center; gap:6px; flex:none; white-space:nowrap;
}
.home-panel-head .text-link .lm-icon{ width:13px; height:13px; }
/* Learning snapshot — the body was flex with space-between, which left a wide
dead gap between the copy and the metrics. Lay it out as explicit columns
and give the metrics the same inset-tile treatment used elsewhere. */
.learning-progress-ring{ display:none !important; }
.learning-snapshot-body{
display:grid !important;
grid-template-columns:minmax(0,1fr) auto !important;
gap:22px !important; align-items:center !important;
}
.learning-progress{ gap:18px !important; align-items:center !important; flex:1 1 auto !important; }
.learning-progress > div:last-child{ min-width:0; flex:1 1 auto; }
/* The bar belongs to the copy beside the ring, not floating mid-panel */
.learning-progress .progress-track{ width:100% !important; max-width:none !important; margin-top:10px !important; }
/* Metric tiles: 94px wide with 26px of padding left only 68px for labels that
measure 75-76px, so "Mastery" and "Next action" spilled out of their tiles.
Wider tiles, a smaller label, and no clipping. */
.learning-meta{
display:grid !important; grid-template-columns:repeat(3,minmax(106px,1fr)) !important;
gap:8px !important; flex:none !important;
}
.learning-meta div{
padding:11px 12px !important; border-left:0 !important;
background:var(--p-surface-2); border-radius:var(--p-r-xs);
box-shadow:inset 0 0 0 1px var(--p-hair);
text-align:left; min-width:0;
}
.learning-meta div:first-child{ padding-left:12px !important; }
.learning-meta div:last-child{ padding-right:12px !important; }
.learning-meta span{
display:block; font-size:8.5px !important; font-weight:640 !important;
letter-spacing:.05em !important; text-transform:uppercase;
color:var(--p-text-4) !important;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.learning-meta b{
display:block; font-size:14px !important; font-weight:640 !important;
color:var(--p-text) !important; letter-spacing:-.022em;
margin-top:4px !important; line-height:1.2 !important;
font-variant-numeric:tabular-nums lining-nums;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.learning-progress > div:last-child > b{
font-size:13px !important; font-weight:640 !important; color:var(--p-text) !important;
letter-spacing:-.018em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Secondary line may wrap — truncating it would hide the status itself. */
.learning-progress > div:last-child > small{
display:block; font-size:10.5px !important; color:var(--p-text-3) !important;
line-height:1.45 !important;
}
/* Action Center cards: equal height, no ragged wrapping */
.action-grid{ align-items:stretch !important; }
.action-card{
min-height:74px; align-items:center !important;
padding:13px 14px !important;
}
.action-card b{
font-size:11px !important; font-weight:620 !important; color:var(--p-text) !important;
line-height:1.3 !important;
}
.action-card small{
font-size:9.5px !important; color:var(--p-text-3) !important;
line-height:1.45 !important; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* Work essentials rail rows */
.utility-list button{
border-bottom:0 !important; box-shadow:inset 0 -1px 0 var(--p-divider); transition:background var(--p-fast) var(--p-ease) !important;
padding:11px 2px !important; border-radius:var(--p-r-xs);
grid-template-columns:32px minmax(0,1fr) 16px !important; align-items:center !important;
}
.utility-list i{
display:grid; place-items:center; width:16px; height:16px;
color:var(--p-text-4); font-style:normal; font-size:15px; line-height:1;
}
.utility-list button:hover i{ color:var(--p-accent); }
/* ============================================================================
22. MY TASKS
========================================================================== */
.task-board{ gap:12px !important; }
.task-card-large{ padding:20px 22px !important; }
.task-row{
display:grid !important; grid-template-columns:30px 34px minmax(0,1fr) auto auto;
align-items:center; gap:13px;
width:100%; padding:13px 4px !important; border:0 !important; background:transparent !important;
text-align:left; cursor:pointer;
background-image:linear-gradient(90deg,transparent,rgba(16,24,40,.05) 2%,rgba(16,24,40,.05) 98%,transparent) !important;
background-size:100% 1px !important; background-position:bottom !important; background-repeat:no-repeat !important;
transition:background-color var(--p-fast) var(--p-ease);
}
.task-row:hover{ background-color:var(--p-surface-2) !important; }
.task-row:last-child{ background-image:none !important; }
.task-number{
width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
font-size:10.5px; font-weight:640; font-variant-numeric:tabular-nums;
background:rgba(16,24,40,.05); color:var(--p-text-3);
box-shadow:inset 0 0 0 1px var(--p-hair);
}
.task-row-icon{
width:34px; height:34px; border-radius:var(--p-r-xs); display:grid; place-items:center;
background:linear-gradient(150deg,var(--p-accent-tint),var(--p-accent-tint-2));
color:var(--p-accent);
box-shadow:inset 0 0 0 1px var(--p-accent-ring), inset 0 1px 0 rgba(255,255,255,.7);
}
.task-row-icon .lm-icon{ width:16px; height:16px; }
.task-copy{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.task-copy b{ font-size:12.5px; font-weight:600; color:var(--p-text); letter-spacing:-.01em; }
.task-copy small{ font-size:10.5px; color:var(--p-text-3); }
.task-status{
height:22px; padding:0 9px; border-radius:99px; display:inline-flex; align-items:center;
font-size:9.5px; font-weight:640;
background:var(--p-accent-tint); color:var(--p-accent);
box-shadow:inset 0 0 0 1px var(--p-accent-ring);
}
/* ============================================================================
23. PEOPLE
========================================================================== */
.people-toolbar{ margin-bottom:12px !important; gap:12px !important; }
.enterprise-search{
height:38px !important; border-radius:var(--p-r-xs) !important;
font-size:11.5px !important;
}
.presence-legend span{ font-size:10px !important; color:var(--p-text-3) !important; }
.person-card{
background:var(--p-surface) !important; border:0 !important;
border-radius:var(--p-r) !important; box-shadow:var(--p-e1) !important;
padding:17px 18px !important;
transition:box-shadow var(--p-med) var(--p-ease), transform var(--p-med) var(--p-ease);
}
.person-card:hover{ transform:translateY(-1px); box-shadow:var(--p-e2) !important; }
.person-avatar{
background:linear-gradient(150deg,var(--p-accent-hi),var(--p-accent)) !important; color:#fff !important;
font-weight:640 !important; border-radius:var(--p-r-xs) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 2px 5px rgba(16,24,40,.14) !important;
}
.person-head b{ font-size:13px !important; font-weight:640 !important; color:var(--p-text) !important; letter-spacing:-.014em; }
.person-head small{ font-size:10px !important; color:var(--p-text-4) !important; }
.person-meta span{ font-size:10.5px !important; color:var(--p-text-3) !important; }
.person-footer{ border-top:0 !important; box-shadow:inset 0 1px 0 var(--p-divider); padding-top:11px !important; }
.presence-dot{ box-shadow:0 0 0 2px #fff !important; }
.presence-dot.online,.presence-dot.available{ background:var(--p-green) !important; }
.presence-dot.away{ background:var(--p-amber) !important; }
.presence-dot.offline{ background:var(--p-text-4) !important; }
.presence-label{ font-size:10px !important; font-weight:600 !important; }
.presence-label.available{ color:var(--p-green) !important; }
.presence-label.away{ color:var(--p-amber) !important; }
.presence-label.offline{ color:var(--p-text-4) !important; }
/* ============================================================================
24. KNOWLEDGE HUB
========================================================================== */
.knowledge-card{
display:flex !important; flex-direction:column; gap:7px;
position:relative;
background:var(--p-surface) !important; border:0 !important;
border-radius:var(--p-r) !important; box-shadow:var(--p-e1) !important;
transition:box-shadow var(--p-med) var(--p-ease), transform var(--p-med) var(--p-ease);
/* Shorthand first, THEN the longhand — the card reserves 44px at the bottom
for the absolutely positioned arrow. Declared the other way round the
shorthand resets it to 19px and the arrow overlaps the description. */
padding:18px 19px !important;
padding-bottom:44px !important;
}
.knowledge-card:hover{ transform:translateY(-1px); box-shadow:var(--p-e2) !important; }
.knowledge-card b{ font-size:13px !important; font-weight:640 !important; color:var(--p-text) !important; letter-spacing:-.014em; }
.knowledge-card small,.knowledge-card p{ font-size:11px !important; color:var(--p-text-3) !important; line-height:1.6 !important; }
.knowledge-search-wrap{ flex:1 1 260px; max-width:340px; }
/* ============================================================================
25. MY HR
========================================================================== */
.hr-grid{ gap:12px !important; }
/* The V73 rule made these buttons a 2-column grid, but the markup has three
items (, , ::after chevron) — so the description was squeezed into
the 24px chevron column and wrapped one word per line, and the chevron fell
to its own row. Give each item an explicit cell. */
.hr-service-list button{
display:grid !important;
grid-template-columns:minmax(0,1fr) 26px !important;
grid-template-rows:auto auto !important;
column-gap:14px !important; row-gap:3px !important;
align-items:center !important;
padding:13px 4px !important; border-radius:var(--p-r-xs);
min-height:0 !important;
transition:background var(--p-fast) var(--p-ease);
}
.hr-service-list button > b{
grid-column:1 !important; grid-row:1 !important;
font-size:12px !important; font-weight:600 !important; color:var(--p-text) !important;
justify-self:start;
}
.hr-service-list button > span{
grid-column:1 !important; grid-row:2 !important;
font-size:10.5px !important; color:var(--p-text-3) !important;
justify-self:start; text-align:left;
}
.hr-service-list button::after{
grid-column:2 !important; grid-row:1 / 3 !important; align-self:center !important;
width:26px !important; height:26px !important;
border:0 !important; background:rgba(16,24,40,.05) !important; color:var(--p-text-3) !important;
box-shadow:inset 0 0 0 1px var(--p-hair) !important; border-radius:var(--p-r-xs) !important;
}
.hr-service-list button:hover{ background:var(--p-surface-2) !important; }
.hr-service-list button:hover::after{ background:var(--p-accent-tint) !important; color:var(--p-accent) !important; box-shadow:inset 0 0 0 1px var(--p-accent-ring) !important; }
/* Benefit / document rows in the same list keep their own two-column shape */
.hr-benefit-row{
display:grid !important; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center;
padding:13px 4px !important;
background-image:linear-gradient(90deg,transparent,rgba(16,24,40,.05) 2%,rgba(16,24,40,.05) 98%,transparent);
background-size:100% 1px; background-position:bottom; background-repeat:no-repeat;
}
.hr-benefit-row b{ display:block; font-size:12px; font-weight:600; color:var(--p-text); }
.hr-benefit-row span{ display:block; margin-top:2px; font-size:10.5px; color:var(--p-text-3); }
.hr-benefit-row em{
font-style:normal; height:22px; padding:0 9px; border-radius:99px;
display:inline-flex; align-items:center; font-size:9.5px; font-weight:640;
background:var(--p-green-bg); color:var(--p-green); box-shadow:inset 0 0 0 1px var(--p-green-ring);
}
.empty-inline{
padding:16px 4px; font-size:11.5px; color:var(--p-text-3);
}
/* ============================================================================
26. LEAVE
========================================================================== */
.leave-mini-stats{ display:flex; gap:10px; flex:none; }
.leave-mini-stats>div{
min-width:78px; padding:11px 13px; border-radius:var(--p-r-xs); text-align:center;
background:var(--p-surface-2); box-shadow:inset 0 0 0 1px var(--p-hair);
}
.leave-mini-stats b{
display:block; font-size:17px; font-weight:640; color:var(--p-text); letter-spacing:-.026em;
font-variant-numeric:tabular-nums lining-nums;
}
.leave-mini-stats span{ display:block; margin-top:3px; font-size:9px; font-weight:640; letter-spacing:.06em; text-transform:uppercase; color:var(--p-text-4); }
.leave-request-card{
background:var(--p-surface) !important; border:0 !important;
border-radius:var(--p-r-sm) !important; box-shadow:var(--p-e1) !important;
padding:15px 16px !important;
}
.leave-empty{
text-align:center; padding:38px 22px;
background:var(--p-surface); border-radius:var(--p-r); box-shadow:var(--p-e1);
}
.leave-empty>span{
width:42px; height:42px; margin:0 auto 12px; border-radius:50%;
display:grid; place-items:center;
background:var(--p-green-bg); color:var(--p-green);
box-shadow:inset 0 0 0 1px var(--p-green-ring);
}
.leave-empty b{ display:block; font-size:13.5px; font-weight:640; color:var(--p-text); }
.leave-empty small,.leave-empty p{ font-size:11px; color:var(--p-text-3); }
.leave-form-grid label>span,.leave-field-help{ color:var(--p-text-3) !important; }
/* ============================================================================
27. HELP & SERVICE DESK
========================================================================== */
.support-routing-grid{ gap:10px !important; margin-bottom:14px; }
.support-routing-card{
background:var(--p-surface) !important; border:0 !important;
border-radius:var(--p-r-sm) !important; box-shadow:var(--p-e1) !important;
padding:15px 16px !important;
}
.support-routing-card b{
display:block; font-size:11px; font-weight:640; letter-spacing:.05em; text-transform:uppercase;
color:var(--p-accent); margin-bottom:5px;
}
.support-routing-card span{ display:block; font-size:11.5px; font-weight:600; color:var(--p-text); margin-bottom:5px; }
.support-routing-card small{ display:block; font-size:10.5px; line-height:1.6; color:var(--p-text-3); }
.support-card{
display:grid !important; grid-template-rows:auto auto 1fr auto; gap:9px;
background:var(--p-surface) !important; border:0 !important;
border-radius:var(--p-r) !important; box-shadow:var(--p-e1) !important;
padding:18px 19px !important; text-align:left !important;
transition:box-shadow var(--p-med) var(--p-ease), transform var(--p-med) var(--p-ease);
}
.support-card:hover{ transform:translateY(-1px); box-shadow:var(--p-e2) !important; }
.support-card > span:first-child{
width:36px; height:36px; border-radius:var(--p-r-xs); display:grid; place-items:center;
background:linear-gradient(150deg,var(--p-accent-tint),var(--p-accent-tint-2));
color:var(--p-accent);
box-shadow:inset 0 0 0 1px var(--p-accent-ring), inset 0 1px 0 rgba(255,255,255,.7);
}
.support-card > span:first-child .lm-icon{ width:18px; height:18px; }
.support-card b{ font-size:13px; font-weight:640; color:var(--p-text); letter-spacing:-.014em; }
.support-card small{ font-size:11px; line-height:1.6; color:var(--p-text-3); }
.support-card em{
font-style:normal; font-size:11px; font-weight:620; color:var(--p-accent);
display:inline-flex; align-items:center; gap:5px;
}
/* ---- Create support request modal ------------------------------------- */
.support-modal{
width:min(620px,94vw) !important;
padding:0 !important;
}
.support-modal .modal-head{
display:flex !important; align-items:flex-start; justify-content:space-between; gap:16px;
padding:22px 24px 16px !important;
background-image:linear-gradient(90deg,transparent,var(--p-divider) 4%,var(--p-divider) 96%,transparent);
background-size:100% 1px; background-position:bottom; background-repeat:no-repeat;
border-bottom:0 !important;
}
.support-modal .modal-head > div{ min-width:0; flex:1; }
.support-modal .modal-head .eyebrow{
display:block; font-size:9.5px !important; font-weight:640 !important; letter-spacing:.075em !important;
text-transform:uppercase; color:var(--p-text-4) !important; margin-bottom:5px !important;
}
.support-modal .modal-head b{
display:block; font-size:19px !important; font-weight:640 !important;
letter-spacing:-.024em; color:var(--p-text) !important; line-height:1.2;
white-space:nowrap;
}
.support-modal .modal-head small{
display:block; margin-top:4px; font-size:11.5px !important; color:var(--p-text-2) !important;
}
.support-modal .modal-head > button{
flex:none; width:32px; height:32px; border:0; border-radius:var(--p-r-xs);
display:grid; place-items:center; cursor:pointer;
background:rgba(16,24,40,.05); color:var(--p-text-3); font-size:17px; line-height:1;
transition:background var(--p-fast) var(--p-ease), color var(--p-fast) var(--p-ease);
}
.support-modal .modal-head > button:hover{ background:rgba(16,24,40,.10); color:var(--p-text); }
.support-modal form{
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 16px;
padding:20px 24px 22px !important;
}
.support-modal .modal-field{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.support-modal .modal-field > span{
font-size:9.5px; font-weight:640; letter-spacing:.075em; text-transform:uppercase; color:var(--p-text-3);
}
.support-modal .modal-field select,
.support-modal .modal-field input,
.support-modal .modal-field textarea{ width:100%; box-sizing:border-box; height:auto; }
.support-modal .modal-field select,
.support-modal .modal-field input{ height:40px !important; padding:0 12px !important; }
.support-modal .modal-field textarea{ min-height:120px; padding:12px !important; line-height:1.65; }
/* Department + Category pair on the first row; everything after it is
full-width so there is no orphaned half-column. */
.support-modal .modal-field:nth-of-type(n+3),
.support-modal .support-route-hint,
.support-modal .modal-actions{ grid-column:1 / -1; }
.support-route-hint{
padding:11px 14px; border-radius:var(--p-r-xs);
background:var(--p-accent-tint); color:var(--p-text-2);
box-shadow:inset 0 0 0 1px var(--p-accent-ring);
font-size:11.5px;
}
.support-route-hint b{ color:var(--p-accent); font-weight:640; }
.support-modal .modal-actions{
display:flex; justify-content:flex-end; gap:9px; padding-top:4px;
background-image:linear-gradient(90deg,transparent,var(--p-divider) 2%,var(--p-divider) 98%,transparent);
background-size:100% 1px; background-position:top; background-repeat:no-repeat;
padding-top:16px;
}
.support-modal .modal-actions .btn{ height:40px; min-width:120px; }
@media(max-width:640px){
.support-modal form{ grid-template-columns:minmax(0,1fr); }
.support-modal .modal-head b{ white-space:normal; font-size:17px !important; }
}
/* ============================================================================
28. POLICIES
========================================================================== */
.policy-card{
padding:18px 19px !important;
background:var(--p-surface) !important;
}
.policy-card h3{ font-size:13px !important; font-weight:640 !important; color:var(--p-text) !important; }
.policy-card p{ font-size:11px !important; color:var(--p-text-3) !important; }
.policy-compliance-banner{
border:0 !important; border-radius:var(--p-r-sm) !important;
background:var(--p-amber-bg) !important; box-shadow:inset 0 0 0 1px var(--p-amber-ring) !important;
}
.policy-compliance-icon{ background:var(--p-amber) !important; color:#fff !important; }
.policy-history-row{ border-top:0 !important; box-shadow:inset 0 1px 0 var(--p-divider); }
.policy-history-check{
background:var(--p-green-bg) !important; color:var(--p-green) !important;
box-shadow:inset 0 0 0 1px var(--p-green-ring) !important;
}
/* ============================================================================
29. ONBOARDING
========================================================================== */
.onboard-overview{
display:flex !important; align-items:center; gap:26px;
padding:22px 24px !important; margin-bottom:12px;
}
.onboard-overview-copy{ min-width:0; }
.onboard-overview-kicker{
display:block; font-size:9.5px; font-weight:640; letter-spacing:.075em;
text-transform:uppercase; color:var(--p-accent); margin-bottom:5px;
}
.onboard-overview-copy b{ display:block; font-size:17px; font-weight:640; letter-spacing:-.022em; color:var(--p-text); }
.onboard-overview-copy p{ margin:6px 0 14px; font-size:11.5px; line-height:1.6; color:var(--p-text-2); max-width:50ch; }
.onboard-list{ list-style:none; margin:14px 0 0; padding:0; }
.onboard-row{
display:grid !important; grid-template-columns:28px minmax(0,1fr) auto;
align-items:center; gap:13px;
width:100%; padding:13px 4px !important; border:0 !important; background:transparent !important;
text-align:left; cursor:pointer;
background-image:linear-gradient(90deg,transparent,rgba(16,24,40,.05) 2%,rgba(16,24,40,.05) 98%,transparent);
background-size:100% 1px; background-position:bottom; background-repeat:no-repeat;
transition:background-color var(--p-fast) var(--p-ease);
}
.onboard-row:hover{ background-color:var(--p-surface-2) !important; }
.onboard-list li:last-child{ background-image:none; }
.onboard-check{
width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
font-size:11px; font-weight:640; font-variant-numeric:tabular-nums;
background:rgba(16,24,40,.05); color:var(--p-text-3);
box-shadow:inset 0 0 0 1px var(--p-hair);
}
.onboard-check.done{
background:var(--p-green-bg) !important; color:var(--p-green) !important;
box-shadow:inset 0 0 0 1px var(--p-green-ring) !important;
}
.onboard-row.is-next .onboard-check{
background:linear-gradient(150deg,var(--p-accent-hi),var(--p-accent)) !important; color:#fff !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 3px 8px -2px var(--p-accent-glow) !important;
}
.onboard-copy{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.onboard-copy b{ font-size:12.5px; font-weight:600; color:var(--p-text); letter-spacing:-.01em; }
.onboard-copy small{ font-size:10.5px; color:var(--p-text-3); }
.onboard-row.is-done .onboard-copy b{ color:var(--p-text-2); }
.onboard-action{
display:inline-flex; align-items:center; gap:6px;
font-size:10.5px; font-weight:620; color:var(--p-accent); white-space:nowrap;
}
.onboard-row.is-done .onboard-action{ color:var(--p-text-4); font-weight:550; }
.onboard-action b{ transition:transform var(--p-fast) var(--p-ease); }
.onboard-row:hover .onboard-action b{ transform:translateX(3px); }
/* ============================================================================
30. RECOGNITION
========================================================================== */
.recognition-card{
background:var(--p-surface) !important; border:0 !important;
border-radius:var(--p-r) !important; box-shadow:var(--p-e1) !important;
padding:16px 17px !important;
}
.recognition-star{
width:32px; height:32px; border-radius:var(--p-r-xs); display:grid; place-items:center;
background:var(--p-amber-bg) !important; color:var(--p-amber) !important;
box-shadow:inset 0 0 0 1px var(--p-amber-ring);
}
.recognition-empty .empty-icon{
width:46px; height:46px; margin:0 auto 12px; border-radius:50%;
background:var(--p-amber-bg); color:var(--p-amber);
box-shadow:inset 0 0 0 1px var(--p-amber-ring);
}
/* ============================================================================
31. MY SESSIONS
========================================================================== */
.session-row{
padding:13px 16px !important;
background:var(--p-surface) !important; border:0 !important;
border-radius:var(--p-r-sm) !important; box-shadow:var(--p-e1) !important;
transition:box-shadow var(--p-med) var(--p-ease), transform var(--p-med) var(--p-ease);
}
.session-row:hover{ transform:translateY(-1px); box-shadow:var(--p-e2) !important; }
.sess-title{ font-size:12.5px !important; font-weight:600 !important; color:var(--p-text) !important; }
.sess-sub{ font-size:10.5px !important; color:var(--p-text-4) !important; }
/* ============================================================================
32. PRACTICE / SCENARIOS
========================================================================== */
.scenario-card{ padding:17px 18px !important; background:var(--p-surface) !important; }
.sc-card-title{ font-size:12.5px !important; font-weight:640 !important; color:var(--p-text) !important; }
.sc-card-meta{ font-size:10.5px !important; color:var(--p-text-3) !important; }
.sc-card-foot{ border-top:0 !important; }
.filter-row{ gap:9px !important; margin-bottom:14px !important; }
/* ============================================================================
33. TRAINING REQUESTS / ASSETS / PROFILE / TIMESHEET
========================================================================== */
.assignment-course-pill{
border-radius:99px !important; font-weight:620 !important;
background:var(--p-accent-tint) !important; color:var(--p-accent) !important;
box-shadow:inset 0 0 0 1px var(--p-accent-ring) !important; border:0 !important;
}
.profile-hero{ padding:19px 22px !important; }
.profile-avatar-xl{
background:linear-gradient(150deg,var(--p-accent-hi),var(--p-accent)) !important;
border-radius:var(--p-r-sm) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 4px 10px -3px var(--p-accent-glow) !important;
}
.profile-hero h2{ font-size:20px !important; font-weight:640 !important; letter-spacing:-.026em !important; color:var(--p-text) !important; }
.profile-detail,.profile-readonly-grid>div{
border:0 !important; border-radius:var(--p-r-xs) !important;
background:var(--p-surface-2) !important; box-shadow:inset 0 0 0 1px var(--p-hair) !important;
}
.profile-detail small,.profile-readonly-grid small{ color:var(--p-text-4) !important; }
.profile-detail b,.profile-readonly-grid b{ font-size:11.5px !important; color:var(--p-text) !important; font-weight:600 !important; }
.profile-bio{ border:0 !important; background:var(--p-surface-2) !important; box-shadow:inset 0 0 0 1px var(--p-hair) !important; border-radius:var(--p-r-xs) !important; }
.timesheet-controls .btn{ height:34px; }
.timesheet-status{
border-radius:var(--p-r-xs); padding:11px 14px;
background:var(--p-surface-2); box-shadow:inset 0 0 0 1px var(--p-hair);
}
.timesheet-status span{ font-size:9px; font-weight:640; letter-spacing:.06em; text-transform:uppercase; color:var(--p-text-4); display:block; }
.timesheet-status b{ font-size:12px; font-weight:640; color:var(--p-text); }
/* ============================================================================
34. TEAM CHAT — brought up to the standard of the rest of the product
========================================================================== */
.chat-page{ height:calc(100vh - 92px); display:flex; }
.chat-layout{
flex:1; border:0 !important; border-radius:var(--p-r) !important;
box-shadow:var(--p-e2) !important; overflow:hidden !important;
grid-template-columns:308px minmax(0,1fr) !important;
min-height:0 !important;
}
/* ---- Conversation list ------------------------------------------------- */
.chat-sidebar{
background:var(--p-surface-2) !important;
border-right:0 !important;
box-shadow:inset -1px 0 0 var(--p-divider) !important;
}
.chat-sidebar-head{
padding:16px 16px 14px !important; border-bottom:0 !important;
box-shadow:inset 0 -1px 0 var(--p-divider);
background:var(--p-surface);
}
.chat-sidebar-title-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:12px; }
.chat-sidebar-title-row b{ font-size:14px; font-weight:640; color:var(--p-text); letter-spacing:-.018em; }
.chat-sidebar-title-row small{ display:block; margin-top:2px; font-size:10.5px; color:var(--p-text-4); }
.chat-new-group-btn{
display:inline-flex; align-items:center; gap:6px; flex:none;
height:30px; padding:0 11px; border:0; cursor:pointer;
border-radius:99px; background:var(--p-accent-tint); color:var(--p-accent);
box-shadow:inset 0 0 0 1px var(--p-accent-ring);
font:640 10.5px Inter,sans-serif;
transition:background var(--p-fast) var(--p-ease);
}
.chat-new-group-btn:hover{ background:var(--p-accent-tint-2); }
.chat-new-group-btn .lm-icon{ width:13px; height:13px; }
.chat-search{
height:36px !important; border:0 !important; border-radius:var(--p-r-xs) !important;
background:rgba(16,24,40,.05) !important;
box-shadow:none !important; font-size:11.5px !important;
}
.chat-search:focus{
background:#fff !important;
box-shadow:0 0 0 1px var(--p-accent), 0 0 0 4px var(--p-accent-tint) !important;
}
.chat-contacts{ padding:8px !important; }
.chat-item{
display:grid !important; grid-template-columns:38px minmax(0,1fr) auto;
align-items:center; gap:11px; width:100%;
padding:9px 10px !important; margin-bottom:2px;
border:0 !important; background:transparent !important; cursor:pointer;
border-radius:var(--p-r-xs) !important; text-align:left;
transition:background var(--p-fast) var(--p-ease), box-shadow var(--p-fast) var(--p-ease);
}
.chat-item:hover{ background:rgba(16,24,40,.05) !important; }
.chat-item.active{
background:#fff !important;
box-shadow:var(--p-e-chip) !important;
}
.chat-item-icon{
position:relative; width:38px; height:38px; flex:none;
display:grid; place-items:center; border-radius:var(--p-r-xs);
font-size:12px; font-weight:640; color:#fff;
background:linear-gradient(150deg,var(--p-accent-hi),var(--p-accent));
box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(16,24,40,.14);
}
.chat-item-icon.general{ background:linear-gradient(150deg,#1fa877,var(--p-green)); }
.chat-item-icon.group{ background:linear-gradient(150deg,#e0a72e,var(--p-amber)); }
.chat-item > span:nth-child(2){ min-width:0; display:flex; flex-direction:column; gap:2px; }
.chat-item b{ font-size:12.5px; font-weight:600; color:var(--p-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-item small{ font-size:10.5px; color:var(--p-text-4); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-item.active b{ font-weight:640; }
.chat-item.unread b{ font-weight:700; color:var(--p-text); }
.chat-unread-dot{
width:8px; height:8px; border-radius:50%; flex:none;
background:var(--p-accent); box-shadow:0 0 0 3px var(--p-accent-tint);
}
.chat-item-icon .presence-dot,.chat-item-icon .status-dot{
position:absolute; right:-2px; bottom:-2px; width:11px; height:11px;
box-shadow:0 0 0 2px var(--p-surface-2) !important;
}
/* ---- Conversation ------------------------------------------------------ */
.chat-main{ background:var(--p-surface) !important; }
.chat-conversation-head{
min-height:66px !important; padding:13px 20px !important;
border-bottom:0 !important; box-shadow:inset 0 -1px 0 var(--p-divider);
background:rgba(252,252,254,.88);
backdrop-filter:saturate(180%) blur(14px);
-webkit-backdrop-filter:saturate(180%) blur(14px);
}
.chat-conversation-head .chat-avatar{
position:relative; width:38px; height:38px; border-radius:var(--p-r-xs);
display:grid; place-items:center; flex:none;
font-size:12px; font-weight:640; color:#fff;
background:linear-gradient(150deg,var(--p-accent-hi),var(--p-accent));
box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(16,24,40,.14);
}
.chat-conversation-title b{ font-size:13.5px; font-weight:640; color:var(--p-text); letter-spacing:-.014em; }
.chat-conversation-title small{ display:block; margin-top:2px; font-size:10.5px; color:var(--p-text-4); }
.chat-head-actions{ margin-left:auto; display:flex; gap:6px; }
.chat-window-btn,.chat-call-btn{
width:34px; height:34px; border:0; cursor:pointer;
border-radius:var(--p-r-xs); display:grid; place-items:center;
background:rgba(16,24,40,.05); color:var(--p-text-2);
transition:background var(--p-fast) var(--p-ease), color var(--p-fast) var(--p-ease);
}
.chat-window-btn:hover,.chat-call-btn:hover{ background:var(--p-accent-tint); color:var(--p-accent); }
.chat-window-btn .lm-icon,.chat-call-btn .lm-icon{ width:16px; height:16px; }
/* V73 pinned this to a fixed 410px, so in the `auto 1fr auto` conversation
grid the leftover space fell through to the composer row and inflated the
read-only notice to ~300px. Let it fill its own row instead. */
.chat-messages{
height:auto !important; max-height:none !important;
flex:1 1 auto !important; min-height:0 !important;
padding:22px 24px !important;
background:var(--p-surface-2) !important;
gap:3px !important;
overflow-y:auto !important;
}
.chat-composer,.chat-composer-disabled{ align-self:end; height:auto !important; }
.chat-message-row{ margin-top:9px; }
.chat-message-row.mine{ justify-content:flex-end; }
.chat-bubble{
max-width:min(72%,640px) !important;
padding:10px 13px !important;
border:0 !important;
border-radius:14px 14px 14px 5px !important;
background:#fff !important; color:var(--p-text) !important;
font-size:12.5px !important; line-height:1.55 !important;
box-shadow:var(--p-e1) !important;
}
.chat-message-row.mine .chat-bubble{
border-radius:14px 14px 5px 14px !important;
background:linear-gradient(180deg,var(--p-accent-hi),var(--p-accent)) !important;
color:#fff !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 2px 6px -1px var(--p-accent-glow) !important;
}
.chat-message-meta{ margin-top:5px; display:flex; align-items:center; gap:8px; }
.chat-message-meta small{ font-size:9.5px; color:var(--p-text-4); font-variant-numeric:tabular-nums; }
.chat-message-row.mine .chat-message-meta small{ color:rgba(255,255,255,.72); }
.chat-message-body{ overflow-wrap:anywhere; }
/* ---- Composer ---------------------------------------------------------- */
.chat-composer{
border-top:0 !important; box-shadow:inset 0 1px 0 var(--p-divider);
padding:12px 16px 14px !important; background:var(--p-surface) !important;
flex-direction:column !important; gap:8px !important;
}
.chat-composer-main{
display:flex; align-items:flex-end; gap:8px; width:100%;
padding:6px 6px 6px 8px; border-radius:var(--p-r);
background:rgba(16,24,40,.045);
box-shadow:inset 0 0 0 1px var(--p-hair);
transition:box-shadow var(--p-fast) var(--p-ease), background var(--p-fast) var(--p-ease);
}
.chat-composer-main:focus-within{
background:#fff;
box-shadow:0 0 0 1px var(--p-accent), 0 0 0 4px var(--p-accent-tint);
}
.chat-composer-main textarea{
flex:1; min-width:0; resize:none; border:0 !important; background:transparent !important;
box-shadow:none !important; padding:9px 4px !important;
font:inherit; font-size:12.5px !important; line-height:1.55; max-height:132px;
}
.chat-composer-main textarea:focus{ box-shadow:none !important; }
.chat-attach-btn,.chat-voice-btn{
width:34px; height:34px; flex:none; border:0; cursor:pointer;
border-radius:var(--p-r-xs); display:grid; place-items:center;
background:transparent; color:var(--p-text-3);
transition:background var(--p-fast) var(--p-ease), color var(--p-fast) var(--p-ease);
}
.chat-attach-btn:hover,.chat-voice-btn:hover{ background:rgba(16,24,40,.06); color:var(--p-accent); }
.chat-attach-btn .lm-icon,.chat-voice-btn .lm-icon{ width:17px; height:17px; }
.chat-file-input{ display:none; }
.chat-composer-main .btn{ height:36px; flex:none; }
.chat-composer-disabled{
display:flex; align-items:center; gap:12px;
margin:12px 16px 16px; padding:14px 16px; border-radius:var(--p-r-sm);
background:var(--p-amber-bg); box-shadow:inset 0 0 0 1px var(--p-amber-ring);
}
.general-lock-icon{
width:34px; height:34px; flex:none; border-radius:var(--p-r-xs);
display:grid; place-items:center; background:#fff; color:var(--p-amber);
box-shadow:inset 0 0 0 1px var(--p-amber-ring);
}
.chat-composer-disabled b{ display:block; font-size:12px; font-weight:640; color:var(--p-text); }
.chat-composer-disabled small{ display:block; margin-top:2px; font-size:10.5px; color:var(--p-text-3); }
.chat-empty,.chat-loading{ color:var(--p-text-3) !important; }
.chat-empty b{ font-size:14px; font-weight:640; color:var(--p-text); }
.chat-empty span{ font-size:11.5px; color:var(--p-text-3); }
.chat-send-btn,.floating-chat-send{
background:linear-gradient(180deg,var(--p-accent-hi),var(--p-accent)) !important;
border:0 !important; color:#fff !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 3px 8px -2px var(--p-accent-glow) !important;
}
@media(max-width:900px){
.chat-layout{ grid-template-columns:minmax(0,1fr) !important; }
.chat-page{ height:auto; }
}
@media(max-width:900px){
.home-learning-strip,.onboard-overview{ flex-direction:column !important; align-items:stretch; gap:16px; }
.home-learning-strip .lm-donut,.onboard-overview .lm-donut{ margin:0 auto; }
.task-row{ grid-template-columns:26px minmax(0,1fr) auto; }
.task-row .task-row-icon,.task-row .task-status{ display:none; }
.leave-mini-stats{ width:100%; }
.leave-mini-stats>div{ flex:1; }
}
/* ============================================================================
35. Sign-out split control + confirmation + toast
Ending the workday is irreversible for the day, so it sits behind a menu
and a real confirmation rather than a single click in the account panel.
========================================================================== */
.signout-wrap{ position:relative; }
.signout-caret{
display:grid; place-items:center;
font-style:normal; font-size:10px; line-height:1; margin-left:2px; color:var(--p-text-4); transition:transform var(--p-fast) var(--p-ease);
}
.signout-wrap.open .signout-caret{ transform:rotate(180deg); }
.signout-wrap.open .topbar-signout{ background:var(--p-surface-2) !important; }
.signout-menu{
position:absolute; right:0; top:calc(100% + 8px); z-index:60;
width:282px; padding:6px; border-radius:var(--p-r);
background:var(--p-surface); box-shadow:var(--p-e3);
opacity:0; visibility:hidden; transform:translateY(-4px);
transition:opacity var(--p-fast) var(--p-ease), transform var(--p-fast) var(--p-ease), visibility var(--p-fast);
}
.signout-wrap.open .signout-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.signout-menu button,
.signout-menu .signout-menu-state{
display:grid; grid-template-columns:30px minmax(0,1fr); align-items:start; gap:11px;
width:100%; padding:11px 11px; border:0; background:transparent;
border-radius:var(--p-r-xs); text-align:left; cursor:pointer;
transition:background var(--p-fast) var(--p-ease);
}
.signout-menu .signout-menu-state{ cursor:default; }
.signout-menu button:hover{ background:var(--p-surface-2); }
.signout-menu button > span:first-child,
.signout-menu .signout-menu-state > span:first-child{
width:30px; height:30px; border-radius:var(--p-r-xs); display:grid; place-items:center;
background:rgba(16,24,40,.05); color:var(--p-text-3);
box-shadow:inset 0 0 0 1px var(--p-hair);
}
.signout-menu button:first-child > span:first-child{ background:var(--p-red-bg); color:var(--p-red); box-shadow:inset 0 0 0 1px var(--p-red-ring); }
.signout-menu button:last-of-type > span:first-child{ background:var(--p-accent-tint); color:var(--p-accent); box-shadow:inset 0 0 0 1px var(--p-accent-ring); }
.signout-menu .lm-icon{ width:15px; height:15px; }
.signout-menu b{ display:block; font-size:12px; font-weight:600; color:var(--p-text); }
.signout-menu small{ display:block; margin-top:2px; font-size:10.5px; line-height:1.45; color:var(--p-text-3); }
.signout-menu .status-dot{ margin:9px auto 0; }
/* Confirmation dialog */
.confirm-modal{
width:min(452px,94vw) !important; padding:30px 30px 26px !important; text-align:center;
}
.confirm-mark{
width:52px; height:52px; margin:0 auto 16px; border-radius:50%;
display:grid; place-items:center;
background:var(--p-amber-bg); color:var(--p-amber);
box-shadow:inset 0 0 0 1px var(--p-amber-ring);
}
.confirm-mark .lm-icon{ width:23px; height:23px; }
.confirm-modal h2{
margin:0 0 9px; font-size:19px; font-weight:640; letter-spacing:-.024em; color:var(--p-text);
}
.confirm-modal p{
margin:0 auto; max-width:44ch; font-size:12.5px; line-height:1.65; color:var(--p-text-2);
}
.confirm-modal p b{ color:var(--p-text); font-weight:640; font-variant-numeric:tabular-nums; }
.confirm-note{ margin-top:10px !important; font-size:11.5px !important; color:var(--p-text-4) !important; }
.confirm-actions{
display:flex; gap:10px; justify-content:center; margin-top:22px;
}
.confirm-actions .btn{ height:42px; min-width:140px; }
/* Toast */
.lm-toast-host{
position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
z-index:4000; display:flex; flex-direction:column; gap:9px; align-items:center;
pointer-events:none;
}
.lm-toast{
display:flex; align-items:center; gap:11px;
max-width:min(520px,92vw); padding:12px 17px;
border-radius:99px; background:var(--p-text); color:#fff;
box-shadow:0 12px 34px -10px rgba(16,24,40,.45), 0 2px 6px rgba(16,24,40,.20);
opacity:0; transform:translateY(10px);
transition:opacity .24s var(--p-ease), transform .24s var(--p-ease);
}
.lm-toast.in{ opacity:1; transform:translateY(0); }
.lm-toast.is-error{ background:var(--p-red); }
.lm-toast > span{ display:grid; place-items:center; flex:none; }
.lm-toast .lm-icon{ width:16px; height:16px; stroke-width:2.6; }
.lm-toast p{ margin:0; font-size:12px; font-weight:550; line-height:1.45; }
@media(max-width:780px){
/* `backdrop-filter` on the topbar creates a containing block, which traps
`position:fixed` descendants inside it. Drop the frost at mobile (also a
rendering win there) so the sheet below can anchor to the viewport. */
.topbar{
background:#ffffff !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
}
/* The sign-out control is not the last item in the mobile topbar, so
anchoring the panel to it pushed it off the left edge. Present it as a
bottom sheet instead, which cannot overflow at any width. */
.signout-menu{
position:fixed; left:12px; right:12px; bottom:12px; top:auto; width:auto;
padding:8px; border-radius:var(--p-r-lg);
box-shadow:var(--p-e-pop);
transform:translateY(12px);
}
.signout-wrap.open .signout-menu{ transform:translateY(0); }
.signout-menu button,.signout-menu .signout-menu-state{ padding:13px 12px; }
.topbar-signout span{ display:none; }
}
/* ============================================================================
36. LIVVY — LiveMentorHub assistant
========================================================================== */
.livvy-page{ display:flex; flex-direction:column; gap:12px; height:calc(100vh - 108px); min-height:520px; }
.livvy-shell{
flex:1; min-height:0; padding:0 !important;
display:grid; grid-template-rows:minmax(0,1fr) auto;
overflow:hidden;
}
.livvy-thread{
overflow-y:auto; padding:24px 26px;
background:var(--p-surface-2);
display:flex; flex-direction:column; gap:14px;
scrollbar-width:thin;
}
.livvy-row{ display:flex; gap:11px; align-items:flex-start; max-width:min(760px,100%); }
.livvy-row.mine{ align-self:flex-end; justify-content:flex-end; }
.livvy-avatar{
width:32px; height:32px; flex:none; border-radius:var(--p-r-xs);
display:grid; place-items:center; color:#fff;
background:linear-gradient(150deg,#8a63f0,var(--p-accent));
box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 2px 6px -1px var(--p-accent-glow);
}
.livvy-avatar .lm-icon{ width:16px; height:16px; }
.livvy-bubble{
min-width:0; padding:13px 15px;
border-radius:14px 14px 14px 5px;
background:#fff; box-shadow:var(--p-e1);
font-size:12.5px; line-height:1.68; color:var(--p-text);
}
.livvy-row.mine .livvy-bubble{
border-radius:14px 14px 5px 14px;
background:linear-gradient(180deg,var(--p-accent-hi),var(--p-accent)); color:#fff;
box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 2px 6px -1px var(--p-accent-glow);
}
.livvy-body p{ margin:0 0 9px; overflow-wrap:anywhere; }
.livvy-body p:last-child{ margin-bottom:0; }
.livvy-body b{ font-weight:640; }
.livvy-body code{
font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px;
padding:1px 5px; border-radius:5px; background:rgba(16,24,40,.06);
}
.livvy-row.mine .livvy-body code{ background:rgba(255,255,255,.18); }
.livvy-pre{
margin:9px 0 0; padding:12px 13px; border-radius:var(--p-r-xs);
background:var(--p-text); color:#e8ecf7;
font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px;
line-height:1.6; overflow-x:auto; white-space:pre;
}
.livvy-list{ margin:0 0 9px; padding-left:19px; display:flex; flex-direction:column; gap:5px; }
.livvy-list:last-child{ margin-bottom:0; }
.livvy-time{ margin-top:6px; font-size:9.5px; color:var(--p-text-4); font-variant-numeric:tabular-nums; }
.livvy-row.mine .livvy-time{ color:rgba(255,255,255,.72); }
/* typing indicator */
.livvy-thinking{ display:flex; gap:5px; align-items:center; padding:15px 16px; }
.livvy-thinking span{
width:6px; height:6px; border-radius:50%; background:var(--p-text-4);
animation:livvyBounce 1.2s infinite ease-in-out;
}
.livvy-thinking span:nth-child(2){ animation-delay:.15s; }
.livvy-thinking span:nth-child(3){ animation-delay:.3s; }
@keyframes livvyBounce{ 0%,60%,100%{transform:translateY(0);opacity:.45} 30%{transform:translateY(-4px);opacity:1} }
/* empty state */
.livvy-intro{ margin:auto; text-align:center; max-width:620px; padding:20px 0; }
.livvy-intro-mark{
width:56px; height:56px; margin:0 auto 16px; border-radius:16px;
display:grid; place-items:center; color:#fff;
background:linear-gradient(150deg,#8a63f0,var(--p-accent));
box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 10px 26px -8px var(--p-accent-glow);
}
.livvy-intro-mark .lm-icon{ width:26px; height:26px; }
.livvy-intro h2{ margin:0 0 8px; font-size:21px; font-weight:640; letter-spacing:-.024em; color:var(--p-text); }
.livvy-intro > p{ margin:0 auto 20px; max-width:52ch; font-size:12.5px; line-height:1.65; color:var(--p-text-2); }
.livvy-suggestions{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; text-align:left; }
.livvy-suggestion{
display:flex; align-items:center; gap:11px; width:100%;
padding:13px 14px; border:0; cursor:pointer;
border-radius:var(--p-r-sm); background:var(--p-surface);
box-shadow:var(--p-e1);
transition:box-shadow var(--p-med) var(--p-ease), transform var(--p-med) var(--p-ease);
}
.livvy-suggestion:hover{ transform:translateY(-1px); box-shadow:var(--p-e2); }
.livvy-suggestion > span{
width:32px; height:32px; flex:none; border-radius:var(--p-r-xs);
display:grid; place-items:center;
background:var(--p-accent-tint); color:var(--p-accent);
box-shadow:inset 0 0 0 1px var(--p-accent-ring);
}
.livvy-suggestion .lm-icon{ width:16px; height:16px; }
.livvy-suggestion b{ font-size:12px; font-weight:600; color:var(--p-text); text-align:left; }
.livvy-caveat{
margin:20px auto 0 !important; max-width:60ch;
font-size:10.5px !important; line-height:1.6; color:var(--p-text-4) !important;
}
.livvy-error{
display:flex; align-items:flex-start; gap:11px;
padding:13px 15px; border-radius:var(--p-r-sm);
background:var(--p-red-bg); box-shadow:inset 0 0 0 1px var(--p-red-ring);
}
.livvy-error .lm-icon{ width:15px; height:15px; color:var(--p-red); flex:none; margin-top:2px; }
.livvy-error b{ display:block; font-size:12px; font-weight:640; color:var(--p-text); }
.livvy-error p{ margin:3px 0 0; font-size:11.5px; line-height:1.55; color:var(--p-text-2); }
/* composer */
.livvy-composer{
padding:12px 16px 14px; background:var(--p-surface);
box-shadow:inset 0 1px 0 var(--p-divider);
display:flex; flex-direction:column; gap:7px;
}
.livvy-composer-main{
display:flex; align-items:flex-end; gap:8px;
padding:6px 6px 6px 12px; border-radius:var(--p-r);
background:rgba(16,24,40,.045);
box-shadow:inset 0 0 0 1px var(--p-hair);
transition:box-shadow var(--p-fast) var(--p-ease), background var(--p-fast) var(--p-ease);
}
.livvy-composer-main:focus-within{
background:#fff; box-shadow:0 0 0 1px var(--p-accent), 0 0 0 4px var(--p-accent-tint);
}
.livvy-composer-main textarea{
flex:1; min-width:0; resize:none; border:0 !important; background:transparent !important;
box-shadow:none !important; padding:9px 0 !important;
font:inherit; font-size:12.5px !important; line-height:1.6; max-height:140px;
}
.livvy-composer-main textarea:focus{ box-shadow:none !important; }
.livvy-composer-main .btn{ height:36px; flex:none; }
.livvy-hint{ font-size:10px; color:var(--p-text-4); }
.livvy-page .page-hero .btn .lm-icon{ width:13px; height:13px; }
@media(max-width:820px){
.livvy-suggestions{ grid-template-columns:minmax(0,1fr); }
.livvy-page{ height:auto; min-height:0; }
.livvy-shell{ min-height:60vh; }
.livvy-thread{ padding:18px 15px; }
.livvy-row{ max-width:100%; }
}
/* ============================================================================
37. ADMIN — Command Center
========================================================================== */
/* Tab bar: a scrollable segmented control rather than a row of plain buttons */
.admin-tabs{
display:flex !important; gap:3px !important; flex-wrap:nowrap !important;
padding:5px !important; margin-bottom:14px !important;
background:var(--p-surface) !important; border:0 !important;
border-radius:var(--p-r) !important;
box-shadow:var(--p-e1) !important;
overflow-x:auto !important; overscroll-behavior-x:contain;
scrollbar-width:thin;
}
.admin-tabs::-webkit-scrollbar{ height:7px; }
.admin-tabs::-webkit-scrollbar-thumb{
background:rgba(16,24,40,.16); border-radius:99px;
border:2px solid transparent; background-clip:content-box;
}
.admin-tab{
flex:none; padding:9px 14px !important; border:0 !important;
border-radius:var(--p-r-xs) !important;
background:transparent !important; color:var(--p-text-2) !important;
font-size:11.5px !important; font-weight:600 !important; letter-spacing:-.004em;
white-space:nowrap; cursor:pointer;
transition:background var(--p-fast) var(--p-ease), color var(--p-fast) var(--p-ease), box-shadow var(--p-fast) var(--p-ease);
}
.admin-tab:hover:not(.active){ background:rgba(16,24,40,.05) !important; color:var(--p-text) !important; }
.admin-tab.active{
background:linear-gradient(180deg,var(--p-accent-hi),var(--p-accent)) !important;
color:#fff !important; font-weight:640 !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 3px 8px -2px var(--p-accent-glow) !important;
}
/* Workforce overview: ring + status mix */
.admin-overview-body{ display:flex; align-items:center; gap:28px; }
.admin-overview-ring{ flex:none; }
.admin-overview-mix{ flex:1; min-width:0; display:flex; flex-direction:column; gap:10px; }
.admin-overview-label{
font-size:9.5px; font-weight:640; letter-spacing:.075em; text-transform:uppercase;
color:var(--p-text-4); display:flex; align-items:baseline; gap:8px;
}
.admin-overview-label b{
font-size:12.5px; font-weight:640; letter-spacing:-.014em; color:var(--p-text);
text-transform:none; font-variant-numeric:tabular-nums lining-nums;
}
/* KPI tiles */
.admin-kpis{
display:grid !important;
grid-template-columns:repeat(auto-fit,minmax(168px,1fr)) !important;
gap:10px !important;
}
.admin-kpi{
display:flex; align-items:center; gap:12px; min-width:0;
padding:14px 15px; border-radius:var(--p-r);
background:var(--p-surface); box-shadow:var(--p-e1);
transition:box-shadow var(--p-med) var(--p-ease), transform var(--p-med) var(--p-ease);
}
.admin-kpi:hover{ transform:translateY(-1px); box-shadow:var(--p-e2); }
.admin-kpi-icon{
width:36px; height:36px; flex:none; border-radius:var(--p-r-xs);
display:grid; place-items:center;
background:linear-gradient(150deg,var(--p-accent-tint),var(--p-accent-tint-2));
color:var(--p-accent);
box-shadow:inset 0 0 0 1px var(--p-accent-ring), inset 0 1px 0 rgba(255,255,255,.7);
}
.admin-kpi-icon .lm-icon{ width:17px; height:17px; }
.admin-kpi-green .admin-kpi-icon{
background:linear-gradient(150deg,#eef7f2,#e2f1ea); color:var(--p-green);
box-shadow:inset 0 0 0 1px var(--p-green-ring), inset 0 1px 0 rgba(255,255,255,.7);
}
.admin-kpi-amber .admin-kpi-icon{
background:linear-gradient(150deg,#fdf6e8,#f9eed6); color:var(--p-amber);
box-shadow:inset 0 0 0 1px var(--p-amber-ring), inset 0 1px 0 rgba(255,255,255,.7);
}
.admin-kpi-body{ min-width:0; display:flex; flex-direction:column; gap:1px; }
.admin-kpi-body b{
font-size:21px; font-weight:640; letter-spacing:-.028em; color:var(--p-text); line-height:1.1;
font-variant-numeric:tabular-nums lining-nums;
}
.admin-kpi-body > span{
font-size:10.5px; font-weight:550; color:var(--p-text-3);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.admin-kpi-body small{ font-size:9px; color:var(--p-text-4); }
/* Service Desk summary inside the Command Center */
.support-admin-head{
display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px;
}
.support-admin-head h2{
margin:4px 0 5px; font-size:17px; font-weight:640; letter-spacing:-.022em; color:var(--p-text);
}
.support-admin-head p{ margin:0; font-size:11.5px; line-height:1.6; color:var(--p-text-3); max-width:72ch; }
.support-kpi-grid{
display:grid !important;
grid-template-columns:repeat(auto-fit,minmax(122px,1fr)) !important;
gap:9px !important; margin-bottom:12px;
}
.support-kpi-grid > div{
padding:13px 14px !important; border:0 !important;
border-radius:var(--p-r-sm) !important;
background:var(--p-surface-2) !important;
box-shadow:inset 0 0 0 1px var(--p-hair) !important;
display:flex; flex-direction:column; gap:4px; min-width:0;
}
.support-kpi-grid span{
font-size:9px; font-weight:640; letter-spacing:.06em; text-transform:uppercase;
color:var(--p-text-4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.support-kpi-grid b{
font-size:20px; font-weight:640; letter-spacing:-.028em; color:var(--p-text); line-height:1.1;
font-variant-numeric:tabular-nums lining-nums;
}
.support-dept-grid{
display:grid !important; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) !important;
gap:9px !important;
}
.support-dept-grid > div{
display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto;
column-gap:10px; align-items:center; min-width:0;
padding:13px 15px; border-radius:var(--p-r-sm);
background:var(--p-surface); box-shadow:var(--p-e1);
}
.support-dept-grid span{
grid-column:1; grid-row:1;
font-size:9.5px; font-weight:640; letter-spacing:.07em; text-transform:uppercase;
color:var(--p-accent);
}
.support-dept-grid b{
grid-column:2; grid-row:1; justify-self:end;
font-size:19px; font-weight:640; letter-spacing:-.026em; color:var(--p-text); line-height:1;
font-variant-numeric:tabular-nums lining-nums;
}
.support-dept-grid small{
grid-column:1 / -1; grid-row:2; margin-top:4px;
font-size:10px; color:var(--p-text-3);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Legend + panels */
.admin-legend{
display:flex; flex-wrap:wrap; gap:8px 18px;
padding:13px 15px; margin-top:14px;
border-radius:var(--p-r-sm); background:var(--p-surface-2);
box-shadow:inset 0 0 0 1px var(--p-hair);
}
.admin-legend span{
display:inline-flex; align-items:center; gap:7px;
font-size:10.5px !important; color:var(--p-text-3) !important;
}
.admin-legend .status-dot{ flex:none; }
.admin-summary-grid{ gap:10px !important; }
.admin-tab-panel{ animation:none; }
#adminSupportSummary .section-title{ margin-bottom:2px; }
@media(max-width:860px){
.admin-overview-body{ flex-direction:column; align-items:stretch; gap:18px; }
.admin-overview-ring .lm-donut{ margin:0 auto; }
.admin-kpis{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important; }
}
/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
.home-kpi:hover,.action-card:hover,.people-card:hover,.news-tile:hover,
.training-row:hover,.btn-primary:hover:not(:disabled){ transform:none !important; }
}