/* VooVr - ENTERPRISE PSYCHOLOGY PORTAL */ /* ────────────────────────────────────────────── MIDNIGHT SLATE — Cool blue-slate depth system 6-layer surface hierarchy, blue-tinted borders Dramatic shadows, zero warm charcoal ────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Lato:wght@300;400;700;900&family=Cormorant:ital,wght@0,700;1,700&display=swap'); :root { /* ── Core Surface Palette — 6 distinct depth layers ── */ --void:#080A0F; /* Page background — deepest blue-black */ --sidebar:#0C0F16; /* Sidebar — one layer above page */ --navbar:#0E1219; /* Topbar — sits between page and cards */ --ink:#13171F; /* Cards / panels — primary content surfaces */ --surface:#1A2030; /* Nested surfaces — inputs, script blocks, step dots */ --elevated:#222A3A; /* Elevated nested — tooltips, active states */ --hover:#1E2636; /* Hover states */ --pressed:#263040; /* Pressed / active states */ /* ── Text Hierarchy — cool blue-tinted ── */ --ivory:#E8ECF4;--ivory-dim:#8893A8;--ivory-faint:#565F73;--ivory-ghost:rgba(130,160,210,0.05); /* ── Accent Colors (unchanged) ── */ --amber:#D4884A;--amber-glow:rgba(212,136,74,0.35);--amber-soft:rgba(212,136,74,0.08); --violet:#7B4FFF;--violet-glow:rgba(123,79,255,0.3);--violet-soft:rgba(123,79,255,0.08); --teal:#33A08F;--teal-glow:rgba(51,160,143,0.3);--teal-soft:rgba(51,160,143,0.08); --red:#E84545;--red-glow:rgba(232,69,69,0.3);--red-soft:rgba(232,69,69,0.08); --pink:#E06090;--pink-glow:rgba(224,96,144,0.35);--pink-soft:rgba(224,96,144,0.08); /* ── Borders — blue-tinted for cohesion ── */ --border:rgba(130,160,220,0.08); --border-lit:rgba(130,160,220,0.14); /* ── Shadow Palette — deeper, more dramatic ── */ --shadow-sm:0 1px 3px rgba(0,0,0,0.45); --shadow-md:0 4px 20px rgba(0,0,0,0.50); --shadow-lg:0 12px 40px rgba(0,0,0,0.55); /* ── Fonts & Easing (unchanged) ── */ --font-d:'Inter',sans-serif;--font-b:'Lato',sans-serif;--font-m:'Inter',sans-serif;--font-rc:'Inter',sans-serif;--font-lato:'Lato',sans-serif;--font-serif:'Cormorant',Georgia,serif; --ease-out:cubic-bezier(0.16,1,0.3,1);--ease-spring:cubic-bezier(0.34,1.56,0.64,1); } *,*::before,*::after{margin:0;padding:0;box-sizing:border-box;} /* ── LIGHT THEME ────────────────────────────────────────────── Toggled at runtime via [data-theme="light"] on . Inverts the *relationship* (layered surfaces, text opacity tiers) rather than just flipping colors — see copilot-employee-directory-prompt.md. Dark theme (default, no attribute) is untouched below this block. */ html[data-theme="light"]{ --void:#E3E6EC; /* Page background — deeper, gives cards room to lift */ --sidebar:#FAFBFC; --navbar:#FFFFFF; --ink:#FFFFFF; /* Cards / panels — crisp white, pops against the page now */ --surface:#EEF0F5; /* Nested surfaces — inputs, script blocks */ --elevated:#E2E5EC; /* Elevated nested — tooltips, active states */ --hover:#F1F3F7; --pressed:#E7EAF0; --ivory:#12151C;--ivory-dim:#5B6472;--ivory-faint:#8A93A3;--ivory-ghost:rgba(20,30,60,0.035); /* Accents keep the same hues; alpha bumped slightly so glows/soft fills still read clearly against white instead of near-black. */ --amber:#B96A2C;--amber-glow:rgba(196,120,40,0.4);--amber-soft:rgba(196,120,40,0.10); --violet:#6A3FE0;--violet-glow:rgba(106,63,224,0.32);--violet-soft:rgba(106,63,224,0.08); --teal:#1F8574;--teal-glow:rgba(31,133,116,0.32);--teal-soft:rgba(31,133,116,0.08); --red:#D33636;--red-glow:rgba(211,54,54,0.34);--red-soft:rgba(211,54,54,0.09); --pink:#C94A78;--pink-glow:rgba(201,74,120,0.4);--pink-soft:rgba(201,74,120,0.10); --border:rgba(20,30,60,0.11); --border-lit:rgba(20,30,60,0.2); /* Softer, lighter shadows — dramatic near-black shadows read as a mistake on a white surface. */ --shadow-sm:0 1px 3px rgba(20,30,60,0.07); --shadow-md:0 6px 20px rgba(20,30,60,0.09); --shadow-lg:0 14px 36px rgba(20,30,60,0.11); } html[data-theme="light"] body{ background:#E3E6EC; background-image: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(106,63,224,0.05) 0%, transparent 70%), radial-gradient(ellipse 60% 50% at 80% 100%, rgba(196,120,40,0.035) 0%, transparent 60%); } html[data-theme="light"] .top-bar{background:rgba(255,255,255,0.92);} html[data-theme="light"] .stat-card .stat-value{background:linear-gradient(135deg,var(--violet),var(--amber));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;} /* Theme toggle button */ .theme-toggle{position:relative;} .theme-toggle .icon-sun{display:none;} html[data-theme="light"] .theme-toggle .icon-moon{display:none;} html[data-theme="light"] .theme-toggle .icon-sun{display:block;} html[data-theme="light"] .drawer-backdrop{background:rgba(20,30,60,0.40);} html[data-theme="light"] .modal-overlay{background:rgba(20,30,60,0.50);} html[data-theme="light"] .cheatsheet-drawer .drawer-section-title{color:var(--ivory);} html[data-theme="light"] .modal-box{border-color:rgba(20,30,60,0.12);} html[data-theme="light"] .consent-check label span{color:var(--ivory-dim);} html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;} html::-webkit-scrollbar{width:6px;} html[data-theme="light"] ::-webkit-scrollbar-track{background:#E3E6EC;} html[data-theme="light"] ::-webkit-scrollbar-thumb{background:rgba(20,30,60,0.15);border-radius:3px;} html::-webkit-scrollbar-track{background:#080A0F;} html::-webkit-scrollbar-thumb{background:rgba(130,160,220,0.15);border-radius:3px;} body{ /* Blue-tinted radial gradient — cool atmospheric depth */ background:#080A0F; background-image: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(80,120,200,0.04) 0%, transparent 70%), radial-gradient(ellipse 60% 50% at 80% 100%, rgba(212,136,74,0.02) 0%, transparent 60%); background-attachment:fixed; color:var(--ivory);font-family:var(--font-b);font-size:15px;line-height:1.6;min-height:100vh;overflow-x:hidden; } a{text-decoration:none;color:inherit;} /* Shared feedback and keyboard interaction */ [hidden]{display:none !important;} :focus-visible{outline:2px solid var(--amber);outline-offset:3px;} .ui-feedback{width:100%;margin:0 0 1rem;padding:1rem;border:1px solid var(--red);border-radius:8px;background:var(--red-soft);color:var(--ivory);font-size:.9rem;line-height:1.5;overflow-wrap:anywhere;} .ui-feedback--success{border-color:var(--teal);background:var(--teal-soft);} .ui-confirm{margin:auto;width:min(440px,calc(100% - 2rem));max-height:calc(100dvh - 2rem);padding:1.5rem;border:1px solid var(--border-lit);border-radius:12px;background:var(--ink);color:var(--ivory);box-shadow:var(--shadow-lg);} .ui-confirm::backdrop{background:rgba(0,0,0,.65);} .ui-confirm h2{font-size:1.1rem;line-height:1.4;margin-bottom:1rem;} .ui-confirm p{line-height:1.6;color:var(--ivory-dim);} .ui-confirm-actions{display:flex;justify-content:flex-end;gap:.75rem;flex-wrap:wrap;margin-top:1.5rem;} .recovery-description{margin-bottom:1rem;} .recovery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin-bottom:1rem;} .recovery-code{font-family:monospace;font-size:.9rem;overflow-wrap:anywhere;text-align:center;padding:.6rem;background:var(--surface);border:1px solid var(--border);border-radius:6px;} button{font-family:inherit;cursor:pointer;} input,select,textarea{font-family:inherit;} /* TYPOGRAPHY */ h1,h2,h3,h4,h5,h6{font-family:var(--font-d);font-weight:600;text-transform:uppercase;letter-spacing:-0.02em;line-height:1;} .eyebrow{font-family:var(--font-rc);font-weight:600;font-size:0.68rem;text-transform:uppercase;letter-spacing:0.22em;color:var(--amber);display:inline-flex;align-items:center;gap:0.9rem;margin-bottom:1.5rem;} .eyebrow::before{content:'';width:24px;height:1px;background:var(--amber);} /* CONTAINER */ /* Auth and legal pages share the same theme-aware components. */ .auth-page{background:var(--void);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2.5rem 1.25rem;min-height:100dvh;} .auth-card{width:100%;max-width:440px;padding:2rem;background:var(--ink);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-md);} .auth-logo{display:block;width:120px;height:auto;margin:0 auto 1.5rem;} .auth-title{font-size:1.65rem;line-height:1.25;text-align:center;text-transform:none;} .auth-subtitle{font-size:.9rem;color:var(--ivory-dim);line-height:1.6;text-align:center;margin:.75rem 0 1.5rem;overflow-wrap:anywhere;} .auth-field{margin-bottom:1.5rem;} .auth-field label{display:block;color:var(--ivory-dim);font-size:.85rem;font-weight:700;margin-bottom:.5rem;} .auth-field input,.auth-field select{width:100%;min-width:0;padding:.8rem 1rem;border:1px solid var(--border-lit);border-radius:8px;background:var(--surface);color:var(--ivory);font-size:1rem;} .auth-field input:focus{border-color:var(--amber);} .auth-password{position:relative;} .auth-password input{padding-right:4.5rem;} .auth-reveal{position:absolute;right:.4rem;top:50%;transform:translateY(-50%);min-height:44px;padding:0 .65rem;color:var(--ivory-dim);background:transparent;border:0;border-radius:6px;} .auth-primary,.auth-secondary{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;padding:.85rem 1.2rem;border-radius:8px;font-size:.95rem;font-weight:700;line-height:1.5;text-align:center;} .auth-primary{background:var(--violet);color:#fff;border:1px solid transparent;} .auth-secondary{background:var(--surface);color:var(--ivory);border:1px solid var(--border-lit);} .auth-primary:hover{filter:brightness(1.12);} .auth-secondary:hover{background:var(--hover);} .auth-primary:disabled,.auth-text-button:disabled{opacity:.55;cursor:wait;} .auth-text-button{border:0;background:transparent;color:var(--amber);font-size:.9rem;min-height:44px;} .auth-links{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;font-size:.85rem;margin-bottom:1.5rem;} .auth-links a,.auth-subtitle a,.auth-check a{color:var(--amber);text-decoration:underline;text-underline-offset:3px;} .auth-divider{display:flex;align-items:center;gap:1rem;margin:1.5rem 0;color:var(--ivory-dim);font-size:.85rem;} .auth-divider::before,.auth-divider::after{content:'';height:1px;flex:1;background:var(--border-lit);} .auth-resend{margin-top:1.5rem;} .auth-hint{font-size:.8rem;color:var(--ivory-dim);margin-top:.5rem;} .auth-check{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1.5rem;font-size:.85rem;color:var(--ivory-dim);} .auth-check input{width:18px;height:18px;flex-shrink:0;margin-top:.2rem;accent-color:var(--violet);} .auth-code{text-align:center;letter-spacing:.4em;font-variant-numeric:tabular-nums;} .site-footer{position:relative;margin-top:2rem;text-align:center;font-size:.8rem;color:var(--ivory-dim);line-height:1.8;} .site-footer nav{display:flex;justify-content:center;gap:.5rem 1.25rem;flex-wrap:wrap;margin-top:.5rem;} .site-footer a{color:var(--amber);} .legal-page{padding:2.5rem 1.25rem;background:var(--void);} .legal-card{position:relative;max-width:800px;margin:0 auto;padding:2.5rem 2rem;background:var(--ink);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-md);overflow-wrap:anywhere;} .legal-card h1{font-size:2rem;line-height:1.25;margin-bottom:.5rem;text-transform:none;} .legal-card h2{font-size:1.2rem;line-height:1.45;margin-bottom:.75rem;text-transform:none;} .legal-card section{margin-bottom:2rem;} .legal-card section:last-child{margin-bottom:0;} .legal-card ul{padding-left:1.25rem;color:var(--ivory-dim);} .legal-card li{margin-bottom:.5rem;} .legal-card p{line-height:1.8;} .legal-card a{color:var(--amber);text-decoration:underline;text-underline-offset:3px;} .legal-updated{color:var(--ivory-dim);font-size:.9rem;margin-bottom:2rem;} .legal-back{display:inline-block;margin-bottom:1.5rem;} .text-muted{color:var(--ivory-dim);} .invite-description{font-size:.85rem;color:var(--ivory-dim);margin-bottom:.5rem;} .card-flush{padding:0;overflow:hidden;} .directory-header{padding:1.5rem 1.5rem 0;flex-wrap:wrap;gap:.8rem;} .directory-toolbar{padding:1.2rem 1.5rem;} .inline-action{display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;text-decoration:none;} .directory-empty{padding:3.5rem 1.5rem;text-align:center;} .directory-empty-title{font-family:var(--font-d);font-size:1.15rem;font-weight:700;line-height:1.3;color:var(--ivory);margin-bottom:.7rem;} .directory-empty-description{font-size:.85rem;line-height:1.66;color:var(--ivory-dim);max-width:26rem;margin:0 auto;} .invite-prompt{margin-top:10px;padding:12px;border:1px solid var(--amber);border-radius:10px;background:var(--amber-soft);} .text-caption{font-family:var(--font-m);font-size:.75rem;color:var(--ivory-dim);} .text-help{font-size:.85rem;line-height:1.55;} .p-lg{padding:1.5rem;} .flex-spacer{flex:1;} .selection-column{width:2.5rem;} .manager-actions{display:flex;align-items:center;gap:.75rem;padding:0 1.5rem 1rem;flex-wrap:wrap;} .container{width:100%;max-width:1400px;margin:0 auto;padding:0 clamp(1.2rem,4vw,3.5rem);} .page-wrapper{display:flex;min-height:100vh;} /* SIDEBAR */ .sidebar{width:260px;min-height:100vh;background:var(--sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;z-index:100;transition:width 0.35s cubic-bezier(0.4,0,0.2,1);overflow:hidden;} .sidebar.collapsed{width:72px;} .sidebar.collapsed .sidebar-logo{font-size:0;gap:0;justify-content:center;} .sidebar.collapsed .sidebar-logo .logo-mark{margin:0;} .sidebar.collapsed .nav-section{opacity:0;height:0;padding:0;overflow:hidden;transition:opacity 0.25s ease,height 0.25s ease;} .sidebar.collapsed .nav-item span, .sidebar.collapsed .nav-item{font-size:0;width:100%;justify-content:center;padding:0.7rem;} .sidebar.collapsed .nav-item{padding:0.7rem 0;gap:0;} .sidebar.collapsed .nav-item svg{margin:0;} .sidebar.collapsed .sidebar-footer .user-info{opacity:0;width:0;overflow:hidden;transition:opacity 0.25s ease;} .sidebar.collapsed .sidebar-footer{justify-content:center;padding:1.2rem 0;gap:0;} .sidebar.icon-only{width:80px;transition:width 0.35s cubic-bezier(0.4,0,0.2,1);} .sidebar.icon-only .nav-section{opacity:0;height:0;padding:0;overflow:hidden;transition:opacity 0.25s ease,height 0.25s ease;} .sidebar.icon-only .sidebar-header{display:flex;justify-content:center;padding:1.2rem 0;} .sidebar.icon-only .sidebar-logo{font-size:0;gap:0;justify-content:center;padding:0;border-bottom:none;transition:font-size 0.3s ease;} .sidebar.icon-only .sidebar-logo .logo-mark{margin:0 auto;} .sidebar.icon-only .sidebar-logo-img{height:26px;margin:0 auto;display:block;object-fit:contain;} .sidebar.icon-only .sidebar-nav{padding:0.8rem 0;gap:0;} .sidebar.icon-only .sidebar-footer .user-info{opacity:0;width:0;flex:0 0 0;margin:0;overflow:hidden;transition:opacity 0.25s ease;} .sidebar.icon-only .sidebar-footer{justify-content:center;padding:1.2rem 0;border-top:1px solid var(--border);gap:0;} .sidebar.icon-only ~ .main-content{margin-left:80px;transition:margin-left 0.35s cubic-bezier(0.4,0,0.2,1);} .sidebar-header{padding:1.8rem 1.5rem;border-bottom:1px solid var(--border);} .sidebar.icon-only .nav-item{font-size:0;white-space:nowrap;padding:0.85rem 0;gap:0;transition:font-size 0.3s ease;} .sidebar.icon-only .nav-item svg{margin:0 auto;display:block;flex-shrink:0;transform:scale(1.2);transition:transform 0.3s ease;} .sidebar.icon-only .nav-item span{display:none;} .sidebar.icon-only .nav-item.active{color:var(--ivory);background:var(--ivory-ghost);border-left-color:var(--amber);} .sidebar-logo{font-family:var(--font-d);font-size:1rem;font-weight:700;letter-spacing:0.04em;display:flex;align-items:center;gap:0.6rem;} .sidebar-logo .logo-mark{width:28px;height:28px;flex-shrink:0;background:linear-gradient(135deg,var(--violet),var(--amber));display:flex;align-items:center;justify-content:center;font-size:0.7rem;color:var(--void);font-weight:800;border-radius:6px;} .sidebar-logo-img{height:34px;width:auto;display:block;object-fit:contain;} .sidebar.collapsed .sidebar-logo-img{height:26px;} .sidebar-nav{flex:1;padding:1.2rem 0;display:flex;flex-direction:column;gap:2px;} .nav-section{font-family:var(--font-lato);font-weight:700;font-size:0.58rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--ivory-faint);padding:1.2rem 1.5rem 0.5rem;} .nav-item{display:flex;align-items:center;gap:0.8rem;padding:0.7rem 1.5rem;color:var(--ivory-dim);font-size:0.88rem;transition:all 0.3s;border-left:2px solid transparent;position:relative;} .nav-item:hover{color:var(--ivory);background:var(--ivory-ghost);} .nav-item.active{color:var(--ivory);background:var(--ivory-ghost);border-left-color:var(--amber);} .nav-item svg{width:16px;height:16px;opacity:0.6;flex-shrink:0;} .nav-item.active svg{opacity:1;} .nav-badge{margin-left:auto;font-family:var(--font-rc);font-weight:600;font-size:0.55rem;padding:2px 7px;border-radius:100px;background:var(--red);color:var(--ivory);letter-spacing:0.05em;} .sidebar-footer{padding:1.2rem 1.5rem;border-top:1px solid var(--border);display:flex;align-items:center;gap:0.8rem;} .sidebar-footer .avatar{width:32px;height:32px;border-radius:50%;flex-shrink:0;overflow:hidden;background:linear-gradient(135deg,var(--violet),var(--amber));display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-size:0.7rem;font-weight:700;color:var(--void);} .sidebar-footer .avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;} .sidebar-footer .user-info{flex:1;min-width:0;} .sidebar-footer .user-name{font-size:0.82rem;font-weight:600;color:var(--ivory);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .sidebar-footer .user-role{font-family:var(--font-lato);font-weight:700;font-size:0.55rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ivory-faint);} /* MAIN CONTENT */ .main-content{flex:1;margin-left:260px;min-height:100vh;transition:margin-left 0.35s cubic-bezier(0.4,0,0.2,1);} .sidebar.collapsed ~ .main-content{margin-left:72px;} .top-bar{position:sticky;top:0;z-index:90;padding:1rem clamp(1.2rem,4vw,3.5rem);display:flex;justify-content:space-between;align-items:center;background:rgba(8,10,15,0.90);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid var(--border);} .top-bar-left{display:flex;align-items:center;gap:1.5rem;} .page-title{font-family:var(--font-lato);font-weight:700;font-size:1rem;letter-spacing:0.04em;text-transform:uppercase;} .welcome-title{font-family:'PT Serif',serif;font-weight:400;font-size:clamp(1.7rem,2.6vw,2.35rem);letter-spacing:0;text-transform:none;line-height:1.3;} .welcome-name{font-style:italic;background:linear-gradient(90deg,#C084FC 0%,#A855F7 45%,#7C3AED 100%);background-size:250% auto;background-position:0% center;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;filter:drop-shadow(0 0 10px rgba(168,85,247,.25));animation:usernameGradient 5s linear infinite;} @keyframes usernameGradient{0%{background-position:0% center;}100%{background-position:250% center;}} .breadcrumb{font-family:var(--font-lato);font-weight:700;font-size:0.62rem;color:var(--ivory-faint);letter-spacing:0.1em;text-transform:uppercase;} .breadcrumb span{color:var(--amber);} .top-bar-right{display:flex;align-items:center;gap:1rem;} .lang-toggle{display:flex;border:1px solid var(--border);border-radius:100px;overflow:hidden;} .lang-btn{font-family:var(--font-lato);font-weight:700;font-size:0.58rem;letter-spacing:0.1em;text-transform:uppercase;padding:0.4rem 0.9rem;background:transparent;border:none;color:var(--ivory-faint);transition:all 0.3s;} .lang-btn.active{font-family:var(--font-rc);font-weight:600;background:var(--amber);color:var(--void);} .icon-btn{width:34px;height:34px;border:1px solid var(--border);border-radius:50%;background:transparent;color:var(--ivory-dim);display:flex;align-items:center;justify-content:center;transition:all 0.3s;position:relative;} .icon-btn:hover{border-color:var(--border-lit);color:var(--ivory);background:var(--ivory-ghost);} .icon-btn svg{width:16px;height:16px;} .icon-btn .notif-dot{position:absolute;top:5px;right:5px;width:6px;height:6px;background:var(--red);border-radius:50%;border:1.5px solid var(--void);} .icon-btn .notif-count{position:absolute;top:-8px;right:-8px;min-width:16px;height:16px;padding:0 5px;border-radius:8px;background:var(--red);color:var(--ivory);font-family:var(--font-m);font-size:0.55rem;font-weight:700;line-height:16px;text-align:center;display:none;letter-spacing:0.03em;} /* NOTIFICATION DROPDOWN */ .notif-wrap{position:relative;} .notif-dropdown{position:absolute;top:calc(100% + 0.7rem);right:0;width:380px;max-width:calc(100vw - 2rem);background:var(--ink);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-md);z-index:200;overflow:hidden;display:none;} .notif-dropdown.open{display:block;} .notif-dropdown-head{display:flex;align-items:center;justify-content:space-between;gap:0.6rem;padding:1rem 1.2rem;border-bottom:1px solid var(--border);} .notif-dropdown-title{font-family:var(--font-d);font-size:0.75rem;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;} .notif-mark-all{font-family:var(--font-m);font-size:0.58rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--amber);background:none;border:none;padding:0;cursor:pointer;white-space:nowrap;transition:color 0.2s;} .notif-mark-all:hover{color:var(--ivory);} .notif-dropdown-list{max-height:360px;overflow-y:auto;padding:0.5rem;} .notif-dropdown-empty{padding:1.5rem 1.2rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:0.35rem;} .notif-dropdown-empty-title{font-family:var(--font-serif);font-size:0.95rem;font-weight:700;line-height:1.3;letter-spacing:0;text-transform:none;color:var(--ivory);} .notif-dropdown-empty-body{font-family:var(--font-m);font-size:0.78rem;line-height:1.55;letter-spacing:0;color:var(--ivory-dim);} .notif-dropdown-footer{display:block;text-align:center;padding:0.85rem 1.2rem;border-top:1px solid var(--border);font-family:var(--font-m);font-size:0.6rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--amber);transition:all 0.2s;} .notif-dropdown-footer:hover{background:var(--ivory-ghost);color:var(--ivory);} .notif-item,.drift-list-item{width:100%;text-align:left;font:inherit;color:var(--ivory);} .alert-item .alert-severity.read{background:var(--border-lit);box-shadow:none;} .notif-item .alert-time,.drift-list-item .alert-time{display:block;font-family:var(--font-m);font-size:0.55rem;letter-spacing:0.08em;color:var(--ivory-faint);margin-top:0.25rem;} /* CONTENT AREA */ .content-area{padding:clamp(2rem,4vh,3.5rem) clamp(1.2rem,4vw,3.5rem);} /* STATS ROW */ .stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:2.5rem;} .stat-card{background:var(--ink);border:1px solid var(--border);padding:1.5rem;position:relative;overflow:hidden;transition:all 0.4s var(--ease-out);box-shadow:var(--shadow-sm);} .stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1.5px;background:linear-gradient(90deg,var(--violet),var(--amber));transform:scaleX(0);transform-origin:left;transition:transform 0.5s var(--ease-out);} .stat-card:hover{border-color:var(--border-lit);} .stat-card:hover::before{transform:scaleX(1);} .stat-card .stat-label{font-family:var(--font-lato);font-weight:700;font-size:0.7rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--ivory-dim);margin-bottom:0.8rem;} .stat-card .stat-value{font-family:var(--font-lato);font-weight:900;font-size:clamp(1.8rem,3vw,2.8rem);letter-spacing:-0.02em;line-height:1;background:linear-gradient(135deg,var(--ivory),var(--amber));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;} .stat-card .stat-change{font-family:var(--font-rc);font-weight:600;font-size:0.75rem;margin-top:0.6rem;display:flex;align-items:center;gap:0.4rem;} .stat-card .stat-change.up{color:var(--teal);} .stat-card .stat-change.down{color:var(--red);} /* CARDS */ .card{background:var(--ink);border:1px solid var(--border);padding:1.5rem;transition:all 0.4s var(--ease-out);position:relative;overflow:hidden;box-shadow:var(--shadow-sm);} .card::before{content:'';position:absolute;top:0;left:0;right:0;height:1.5px;background:linear-gradient(90deg,var(--violet),var(--amber));transform:scaleX(0);transform-origin:left;transition:transform 0.5s var(--ease-out);} .card:hover{border-color:var(--border-lit);} .card:hover::before{transform:scaleX(1);} .card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.2rem;} .card-title{font-family:var(--font-lato);font-weight:700;font-size:0.85rem;letter-spacing:0.04em;text-transform:uppercase;} /* DASHBOARD GRID */ .dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;} .dash-grid .full-width{grid-column:1/-1;} /* ALERT LIST */ .alert-list{display:flex;flex-direction:column;gap:8px;} .alert-item{display:flex;align-items:center;gap:1rem;padding:0.8rem 1rem;border:1px solid var(--border);background:rgba(130,160,220,0.03);cursor:pointer;} .alert-item:hover{border-color:var(--border-lit);background:var(--ivory-ghost);} .alert-item .alert-severity{width:8px;height:8px;border-radius:50%;flex-shrink:0;} .alert-item .alert-severity.critical{background:var(--red);box-shadow:0 0 8px var(--red-glow);} .alert-item .alert-severity.warning{background:var(--amber);box-shadow:0 0 8px var(--amber-glow);} .alert-item .alert-severity.info{background:var(--teal);box-shadow:0 0 8px var(--teal-glow);} .alert-item .alert-body{flex:1;min-width:0;} .alert-item .alert-name{font-size:0.88rem;font-weight:600;color:var(--ivory);} .alert-item .alert-desc{font-family:var(--font-lato);font-weight:400;font-size:0.6rem;letter-spacing:0.08em;color:var(--ivory-faint);margin-top:0.15rem;} .alert-item .alert-summary{font-family:var(--font-lato);font-weight:400;font-size:0.62rem;line-height:1.35;color:var(--ivory-dim);margin-top:0.2rem;} .alert-item .alert-severity.audio{background:var(--amber);box-shadow:0 0 8px var(--amber-glow);} .alert-item .alert-severity.translation{background:var(--teal);box-shadow:0 0 8px var(--teal-glow);} .alert-item .alert-top{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;} .alert-item .alert-top .alert-time{display:inline;margin:0;font-family:var(--font-lato);font-size:0.62rem;letter-spacing:0.06em;color:var(--ivory-faint);white-space:nowrap;} .alert-item .alert-top .alert-summary{font-size:0.8rem;letter-spacing:0;line-height:1.4;color:var(--ivory);} .alert-item .alert-action{font-family:var(--font-rc);font-weight:600;font-size:0.55rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--amber);white-space:nowrap;padding:0.35rem 0.8rem;border:1px solid rgba(212,136,74,0.28);background:var(--amber-soft);transition:all 0.3s;} .alert-item .alert-action:hover{background:var(--amber);color:var(--void);} /* EMPLOYEE TABLE */ .emp-table{width:100%;border-collapse:collapse;} .emp-table th{font-family:var(--font-lato);font-weight:700;font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--ivory-faint);text-align:left;padding:0.8rem 1rem;border-bottom:1px solid var(--border);} .emp-table td{padding:0.8rem 1rem;border-bottom:1px solid var(--border);font-size:0.88rem;color:var(--ivory-dim);vertical-align:middle;} .emp-table tr:hover td{background:var(--ivory-ghost);color:var(--ivory);} .emp-table .emp-name{font-weight:600;color:var(--ivory);} .emp-table .emp-dept{font-family:var(--font-lato);font-weight:700;font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--ivory-faint);} /* INDEX BAR */ .index-bar{width:100%;height:4px;background:var(--border);border-radius:2px;overflow:hidden;position:relative;} .index-bar .fill{height:100%;border-radius:2px;} .index-bar .fill.high{background:linear-gradient(90deg,var(--teal),var(--teal));} .index-bar .fill.medium{background:linear-gradient(90deg,var(--amber),var(--amber));} .index-bar .fill.low{background:linear-gradient(90deg,var(--red),var(--red));} /* BADGE */ .badge{font-family:var(--font-rc);font-weight:600;font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;padding:0.3rem 0.7rem;border:1px solid;display:inline-block;} .badge.critical{color:var(--red);border-color:rgba(232,69,69,0.28);background:var(--red-soft);} .badge.warning{color:var(--amber);border-color:rgba(212,136,74,0.28);background:var(--amber-soft);} .badge.healthy{color:var(--teal);border-color:rgba(51,160,143,0.28);background:var(--teal-soft);} .badge.info{color:var(--violet);border-color:rgba(107,70,193,0.28);background:var(--violet-soft);} .badge.draft{color:var(--ivory-faint);border-color:var(--border);background:var(--surface);} .badge.not-assessed{color:var(--ivory-faint);border-color:var(--border);background:var(--surface);} /* FOLDER CARD */ .ffolder{position:relative;font-family:var(--font-rc);font-weight:600;font-size:0.7rem;letter-spacing:0.06em;text-transform:uppercase;display:inline-flex;align-items:center;padding:0.55rem 1rem 0.55rem 1.15rem;border-radius:0 6px 6px 6px;background:var(--ink);color:var(--ivory);border:1px solid var(--border);box-shadow:var(--shadow-sm);transition:all 0.35s var(--ease-out);cursor:default;} .ffolder::before{content:'';position:absolute;top:-7px;left:0;width:1.6rem;height:7px;border-radius:4px 4px 0 0;background:inherit;border:1px solid var(--border);border-bottom:none;} .ffolder span{position:relative;z-index:1;line-height:1;} .ffolder:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--border-lit);} .ffolder.big{font-size:0.82rem;padding:0.7rem 1.25rem 0.7rem 1.4rem;} .ffolder.big::before{top:-8px;width:1.9rem;height:8px;} .ffolder.pink{background:var(--pink-soft);color:var(--pink);border-color:rgba(224,96,144,0.28);} .ffolder.pink::before{background:var(--pink-soft);border-color:rgba(224,96,144,0.28);} .ffolder.pink:hover{border-color:rgba(224,96,144,0.5);box-shadow:0 4px 16px var(--pink-glow);} .ffolder.teal{background:var(--teal-soft);color:var(--teal);border-color:rgba(51,160,143,0.28);} .ffolder.teal::before{background:var(--teal-soft);border-color:rgba(51,160,143,0.28);} .ffolder.teal:hover{border-color:rgba(51,160,143,0.5);box-shadow:0 4px 16px var(--teal-glow);} .ffolder.amber{background:var(--amber-soft);color:var(--amber);border-color:rgba(212,136,74,0.28);} .ffolder.amber::before{background:var(--amber-soft);border-color:rgba(212,136,74,0.28);} .ffolder.amber:hover{border-color:rgba(212,136,74,0.5);box-shadow:0 4px 16px var(--amber-glow);} .ffolder.violet{background:var(--violet-soft);color:var(--violet);border-color:rgba(123,79,255,0.28);} .ffolder.violet::before{background:var(--violet-soft);border-color:rgba(123,79,255,0.28);} .ffolder.violet:hover{border-color:rgba(123,79,255,0.5);box-shadow:0 4px 16px var(--violet-glow);} @media(max-width:768px){.ffolder{font-size:0.65rem;padding:0.45rem 0.8rem 0.45rem 0.95rem;}.ffolder.big{font-size:0.72rem;padding:0.55rem 0.95rem 0.55rem 1.1rem;}.ffolder.big::before{width:1.5rem;height:7px;top:-7px;}} /* ── Attention Glow — pulsing highlight for rows/badges needing special attention ── Mirrors the "urgent attention" signal that used to live in a separate alerts card: now it lives inline on the row itself, so nothing needing action can hide on page 2 of a table. */ @keyframes attentionPulse{ 0%,100%{box-shadow:0 0 0 0 var(--attn-glow,var(--amber-glow)),inset 0 0 0 1px var(--attn-border,rgba(212,136,74,0.4));} 50%{box-shadow:0 0 14px 3px var(--attn-glow,var(--amber-glow)),inset 0 0 0 1px var(--attn-border,rgba(212,136,74,0.55));} } .attention-glow{position:relative;border-radius:3px;animation:attentionPulse 2.4s ease-in-out infinite;} .attention-glow::after{ content:'';position:absolute;top:-4px;right:-4px;width:7px;height:7px;border-radius:50%; background:var(--attn-dot,var(--amber));box-shadow:0 0 6px 1px var(--attn-glow,var(--amber-glow)); } .attention-glow.critical{--attn-glow:var(--red-glow);--attn-border:rgba(232,69,69,0.5);--attn-dot:var(--red);} .attention-glow.warning{--attn-glow:var(--amber-glow);--attn-border:rgba(212,136,74,0.5);--attn-dot:var(--amber);} /* Subtle full-row tint for anything currently glowing, so the eye lands on the row before it lands on the badge. */ .emp-table tbody tr[data-status="critical"] td{background:rgba(232,69,69,0.025);} .emp-table tbody tr[data-status="warning"] td{background:rgba(212,136,74,0.02);} .emp-table tbody tr[data-status="critical"]:hover td, .emp-table tbody tr[data-status="warning"]:hover td{background:var(--ivory-ghost);} /* PAGE GREETING (directory.html top-bar title/subtitle) */ .dir-title{font-family:var(--font-lato);font-weight:900;font-size:1.4rem;letter-spacing:-0.01em;text-transform:none;} .dir-subtitle{font-size:0.82rem;color:var(--ivory-faint);margin-top:0.3rem;} /* DIRECTORY TOOLBAR — search + filter selects + clear */ .dir-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:0.8rem;} .dir-search{position:relative;flex:1;min-width:220px;display:flex;align-items:center;} .dir-search svg{position:absolute;left:0.9rem;color:var(--ivory-faint);pointer-events:none;} .dir-search-input{width:100%;padding:0.65rem 1rem 0.65rem 2.4rem;background:var(--surface);border:1px solid var(--border);color:var(--ivory);font-size:0.85rem;outline:none;transition:border-color 0.2s;} .dir-search-input:focus{border-color:var(--amber);} .dir-search-input::placeholder{color:var(--ivory-faint);} .dir-filters{display:flex;align-items:center;gap:0.6rem;flex-wrap:wrap;} .dir-select{padding:0.65rem 1rem;background:var(--surface);border:1px solid var(--border);color:var(--ivory-dim);font-size:0.8rem;outline:none;cursor:pointer;transition:border-color 0.2s;} .dir-select:focus{border-color:var(--amber);} .dir-count{font-family:var(--font-lato);font-weight:700;font-size:0.7rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--ivory-faint);white-space:nowrap;} /* EMPLOYEE CELL — avatar + stacked name/email (Employee column) */ .emp-cell{display:flex;align-items:center;gap:0.7rem;} .emp-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--violet),var(--amber));display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-size:0.65rem;font-weight:700;color:#fff;flex-shrink:0;overflow:hidden;} .emp-avatar img{width:100%;height:100%;object-fit:cover;display:block;} .emp-meta{min-width:0;} .emp-meta .emp-name{display:block;} .emp-email{font-family:var(--font-lato);font-weight:400;font-size:0.7rem;letter-spacing:0.02em;color:var(--ivory-faint);margin-top:0.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .emp-id{font-family:var(--font-lato);font-weight:400;font-size:0.7rem;letter-spacing:0.04em;color:var(--ivory-dim);} .emp-date{font-family:var(--font-lato);font-weight:400;font-size:0.7rem;color:var(--ivory-dim);} /* CARD HEADER ACTIONS — Filters / Export / + Add Employee */ .card-header-left{display:flex;align-items:center;gap:0.8rem;} .card-header-actions{display:flex;align-items:center;gap:0.6rem;} .btn-outline{background:transparent;border:1px solid var(--border);color:var(--ivory-dim);} .btn-outline:hover{border-color:var(--border-lit);color:var(--ivory);background:var(--ivory-ghost);} .btn-gradient{background:linear-gradient(135deg,var(--violet),var(--amber));border-color:transparent;color:#fff;} .btn-gradient:hover{box-shadow:0 4px 20px var(--violet-glow);filter:brightness(1.06);} /* TOOLBAR CLEAR BUTTON */ .dir-clear-btn{font-family:var(--font-lato);font-weight:700;font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;padding:0.6rem 1rem;border:1px solid var(--border);background:transparent;color:var(--ivory-faint);transition:all 0.2s;} .dir-clear-btn:hover{border-color:var(--border-lit);color:var(--ivory);background:var(--ivory-ghost);} /* ROW ACTION ICONS — view / edit / delete */ .row-actions{display:flex;align-items:center;gap:0.4rem;} .row-action-btn{width:28px;height:28px;border:1px solid var(--border);border-radius:6px;background:transparent;color:var(--ivory-faint);display:inline-flex;align-items:center;justify-content:center;transition:all 0.2s;} .row-action-btn svg{width:13px;height:13px;} .row-action-btn:hover{border-color:var(--border-lit);color:var(--ivory);background:var(--ivory-ghost);} .row-action-btn.danger:hover{color:var(--red);border-color:rgba(232,69,69,0.35);background:var(--red-soft);} /* PAGINATION — "Showing X to Y of Z" + page-number pills */ .pagination-bar{display:flex;align-items:center;justify-content:space-between;padding:0.8rem 1rem;font-family:var(--font-lato);font-weight:700;font-size:0.7rem;letter-spacing:0.06em;color:var(--ivory-faint);text-transform:uppercase;flex-wrap:wrap;gap:0.8rem;} .pagination-pages{display:flex;align-items:center;gap:0.3rem;} .page-btn{min-width:26px;height:26px;padding:0 0.4rem;border:1px solid var(--border);background:transparent;color:var(--ivory-dim);font-family:var(--font-lato);font-weight:700;font-size:0.7rem;display:inline-flex;align-items:center;justify-content:center;border-radius:5px;transition:all 0.2s;} .page-btn:hover:not(:disabled){border-color:var(--border-lit);color:var(--ivory);} .page-btn.active{background:linear-gradient(135deg,var(--violet),var(--amber));border-color:transparent;color:#fff;} .page-btn:disabled{opacity:0.35;cursor:default;} /* BUTTONS */ .btn{font-family:var(--font-lato);font-weight:700;font-size:0.85rem;letter-spacing:0.04em;text-transform:uppercase;padding:0.75rem 1.8rem;border:1px solid var(--border);background:transparent;color:var(--ivory);display:inline-flex;align-items:center;gap:0.6rem;} .btn:hover{border-color:var(--border-lit);background:var(--ivory-ghost);} .btn-primary{background:var(--amber);color:var(--void);border-color:var(--amber);} .btn-primary:hover{background:var(--violet);border-color:var(--violet);box-shadow:0 4px 20px var(--violet-glow);} .btn-sm{font-size:0.68rem;padding:0.5rem 1.2rem;} .btn svg{width:14px;height:14px;} @keyframes btnGlow{0%,100%{box-shadow:0 0 0 0 var(--amber-glow);}50%{box-shadow:0 0 16px 2px var(--amber-glow);}} .btn-pulse{animation:btnGlow 2.5s ease-in-out infinite;} .btn-session{font-family:var(--font-rc);font-weight:600;font-size:0.6rem;letter-spacing:0.08em;text-transform:uppercase;padding:0.35rem 0.8rem;border:1px solid var(--teal);border-radius:6px;background:var(--teal-soft);color:var(--teal);display:inline-flex;align-items:center;gap:0.3rem;transition:all 0.25s;white-space:nowrap;cursor:pointer;} .btn-session svg{width:12px;height:12px;} .btn-session:hover{border-color:var(--teal);background:var(--teal);color:var(--void);box-shadow:0 0 14px var(--teal-glow);} /* LOGIN PAGE */ .login-wrapper{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#080A0F;position:relative;overflow:hidden;} .login-wrapper::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:600px;border:1px solid rgba(130,160,220,0.06);border-radius:50%;animation:loginPulse 5s ease-in-out infinite;} .login-wrapper::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:350px;height:350px;border:1px solid rgba(212,136,74,0.06);border-radius:50%;animation:loginPulse 5s ease-in-out 1.2s infinite;} @keyframes loginPulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:1;}50%{transform:translate(-50%,-50%) scale(1.1);opacity:0.3;}} .login-card{background:var(--ink);border:1px solid rgba(130,160,220,0.10);padding:3rem;width:90%;max-width:420px;position:relative;z-index:1;box-shadow:var(--shadow-md);} .login-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--violet),var(--amber));} .login-title{font-family:var(--font-lato);font-weight:900;font-size:1.6rem;margin-bottom:0.3rem;} .login-subtitle{font-family:var(--font-lato);font-weight:700;font-size:0.62rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--ivory-faint);margin-bottom:2.5rem;} .form-group{margin-bottom:1.2rem;} .form-label{font-family:var(--font-lato);font-weight:700;font-size:0.58rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--ivory-dim);margin-bottom:0.5rem;display:block;} .form-input{width:100%;padding:0.75rem 1rem;background:var(--surface);border:1px solid var(--border);color:var(--ivory);font-size:0.9rem;transition:all 0.3s;outline:none;} .form-input:focus{border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-soft);} .form-input::placeholder{color:var(--ivory-faint);} .login-btn{width:100%;margin-top:0.5rem;padding:0.85rem;} .login-error{font-family:var(--font-rc);font-weight:600;font-size:0.62rem;color:var(--red);margin-top:0.8rem;display:none;letter-spacing:0.05em;} .login-error.show{display:block;} .login-footer{margin-top:2rem;text-align:center;} .login-footer p{font-family:var(--font-lato);font-weight:700;font-size:0.58rem;color:var(--ivory-faint);letter-spacing:0.08em;} /* ═══ SYNC ROOM (5-STEP JOURNEY) ═══ */ /* Full-width workspace: the right contextual rail has been removed. */ .sync-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem;align-items:start;} .journey-main{min-width:0;} /* PROGRESS TRACKER */ .journey-progress{display:flex;align-items:center;gap:0;margin-bottom:2.5rem;padding:1.5rem;background:var(--ink);border:1px solid var(--border);overflow-x:auto;box-shadow:var(--shadow-sm);} .step-node{display:flex;flex-direction:column;align-items:center;gap:0.5rem;position:relative;flex:1;min-width:100px;} .step-dot{width:36px;height:36px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-family:var(--font-lato);font-weight:700;font-size:0.65rem;color:var(--ivory-faint);transition:all 0.5s var(--ease-out);background:var(--surface);position:relative;z-index:2;} .step-node.completed .step-dot{border-color:var(--teal);color:var(--teal);background:var(--teal-soft);} .step-node.active .step-dot{border-color:var(--amber);color:var(--void);background:var(--amber);box-shadow:0 0 20px var(--amber-glow);transform:scale(1.15);} .step-node.locked .step-dot{opacity:0.4;} .step-label{font-family:var(--font-m);font-weight:600;font-size:0.52rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--ivory-faint);text-align:center;max-width:90px;line-height:1.4;} .step-node.active .step-label{color:var(--amber);} .step-node.completed .step-label{color:var(--teal);} .step-connector{flex:1;height:1px;background:var(--border);position:relative;top:-14px;z-index:1;} .step-connector.filled{background:linear-gradient(90deg,var(--teal),var(--amber));} /* STEP CONTENT */ .step-content{background:var(--ink);border:1px solid var(--border);padding:2.5rem;min-height:400px;position:relative;overflow:hidden;box-shadow:var(--shadow-sm);} .step-content::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--violet),var(--amber));} .step-header{margin-bottom:2rem;} .step-number{font-family:var(--font-rc);font-weight:600;font-size:0.55rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--amber);margin-bottom:0.5rem;} .step-title{font-family:var(--font-lato);font-weight:900;font-size:1.5rem;margin-bottom:0.5rem;} .step-desc{font-size:0.92rem;color:var(--ivory-dim);line-height:1.7;max-width:600px;} /* TALKING SCRIPT */ .script-block{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--violet);padding:1.5rem;margin:1.5rem 0;position:relative;} .script-block::before{content:'SUGGESTED SCRIPT';position:absolute;top:-0.5rem;left:1rem;font-family:var(--font-rc);font-weight:600;font-size:0.5rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--violet);background:var(--surface);padding:0 0.5rem;} .script-text{font-size:0.95rem;line-height:1.8;color:var(--ivory);font-style:italic;} .script-text .highlight{color:var(--amber);font-weight:600;font-style:normal;} /* GUIDELINES */ .guidelines{display:flex;flex-direction:column;gap:8px;margin:1.5rem 0;} .guideline{display:flex;align-items:flex-start;gap:0.8rem;padding:0.7rem 1rem;border:1px solid var(--border);font-size:0.85rem;color:var(--ivory-dim);line-height:1.5;} .guideline .g-icon{flex-shrink:0;width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:var(--teal);} .guideline .g-icon.avoid{color:var(--red);} .guideline .g-icon.tip{color:var(--amber);} /* INPUT AREAS */ .note-area{width:100%;min-height:120px;padding:1rem;background:var(--surface);border:1px solid var(--border);color:var(--ivory);font-size:0.9rem;resize:vertical;outline:none;transition:border-color 0.3s;line-height:1.7;} .note-area:focus{border-color:var(--amber);} .note-area::placeholder{color:var(--ivory-faint);} /* STEP NAV */ .step-nav{display:flex;justify-content:space-between;align-items:center;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border);} /* CHEATSHEET */ .cheatsheet{display:flex;flex-direction:column;gap:1rem;} .cheat-point{padding:0.8rem 0;border-bottom:1px solid var(--border);} .cheat-point:last-child{border-bottom:none;} .journey-sidebar .card-title{font-family:'Cormorant',serif;font-weight:700;font-style:italic;font-size:1.3rem;text-transform:none;letter-spacing:0.01em;} .cheat-point-head{font-family:'Cormorant',serif;font-weight:700;font-style:italic;font-size:1.15rem;text-transform:none;letter-spacing:0.01em;margin-bottom:0.5rem;display:flex;align-items:center;gap:0.5rem;} /* Animated gradient shine — used on the Cheatsheet heading + Strategy Guide headings */ @keyframes shineSweep{ 0%{background-position:-200% center;} 100%{background-position:200% center;} } .shine-text{ background:linear-gradient(90deg,var(--ivory) 0%,var(--amber) 20%,#f5d9b8 35%,var(--ivory) 50%,var(--amber) 65%,#f5d9b8 80%,var(--ivory) 100%); background-size:250% auto; -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent; animation:shineSweep 4s linear infinite; } .cheatsheet-glow .card-title{font-size:1.7rem;} .cheat-point-head .c-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;} .cheat-point-body{font-family:var(--font-lato);font-size:0.8rem;color:var(--ivory-dim);line-height:1.7;} .cheat-point-body p{margin-bottom:0.35rem;} .cheat-point-body p:last-child{margin-bottom:0;} .cheat-point-body strong{color:var(--ivory);} /* CHEATSHEET GLOW — subtle blue pulse, premium not neon */ @keyframes glowPulse{ 0%{box-shadow:0 2px 8px rgba(59,130,246,0.10),inset 0 0 0 1px rgba(59,130,246,0.08);} 50%{box-shadow:0 4px 20px rgba(59,130,246,0.18),inset 0 0 0 1px rgba(59,130,246,0.15);} 100%{box-shadow:0 2px 8px rgba(59,130,246,0.10),inset 0 0 0 1px rgba(59,130,246,0.08);} } .cheatsheet-glow{animation:glowPulse 3s ease-in-out infinite;border:1px solid rgba(59,130,246,0.12);} /* STRATEGY GUIDE EXPANDER BUTTON */ .cheatsheet-expander{display:flex;align-items:center;justify-content:center;gap:0.5rem;width:100%;padding:0.85rem 1rem;margin-top:1rem;background:var(--surface);border:1px solid var(--border);color:var(--ivory);font-family:var(--font-lato);font-weight:700;font-size:0.82rem;letter-spacing:0.04em;text-transform:uppercase;cursor:pointer;outline:none;will-change:transform,box-shadow;} .cheatsheet-expander:focus-visible{box-shadow:0 0 0 3px rgba(59,130,246,0.5);border-color:#3b82f6;} .cheatsheet-expander svg{width:14px;height:14px;} /* STRATEGY GUIDE TRIGGER — relocated out of the (removed) right rail */ .strategy-trigger{width:auto;margin:0 0 2.5rem auto;padding:0.7rem 1.15rem;white-space:nowrap;} @media(max-width:768px){.strategy-trigger{width:100%;margin-left:0;white-space:normal;}} /* STRATEGY GUIDE DRAWER */ .cheatsheet-drawer{position:fixed;top:0;right:0;width:min(600px,100vw);height:100dvh;background:var(--ink);border-left:1px solid var(--border);z-index:180;transform:translateX(100%);visibility:hidden;transition:transform 0.4s cubic-bezier(0.4,0,0.2,1),visibility .4s;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;} .cheatsheet-drawer.active{transform:translateX(0);visibility:visible;} .cheatsheet-drawer::-webkit-scrollbar{width:5px;} .cheatsheet-drawer::-webkit-scrollbar-track{background:var(--ink);} .cheatsheet-drawer::-webkit-scrollbar-thumb{background:rgba(130,160,220,0.15);border-radius:3px;} .drawer-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem 2rem;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--ink);z-index:2;} .drawer-title{font-family:'Cormorant',serif;font-weight:700;font-style:italic;font-size:1.9rem;letter-spacing:0.01em;text-transform:none;} .drawer-close{width:36px;height:36px;border:1px solid var(--border);background:transparent;color:var(--ivory);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s ease;} .drawer-close:hover{background:var(--ivory-ghost);border-color:var(--border-lit);} .drawer-close svg{width:16px;height:16px;} .drawer-body{padding:2rem;flex:1;} .drawer-section{margin-bottom:2rem;} .drawer-section-title{font-family:'Cormorant',serif;font-weight:700;font-style:italic;font-size:1.25rem;text-transform:none;letter-spacing:0.01em;color:var(--amber);margin-bottom:1rem;padding-bottom:0.5rem;border-bottom:1px solid var(--border);} .drawer-text{font-size:0.88rem;color:var(--ivory-dim);line-height:1.8;margin-bottom:0.8rem;} .drawer-text strong{color:var(--ivory);} .drawer-tip{padding:1rem 1.2rem;background:rgba(59,130,246,0.06);border:1px solid rgba(59,130,246,0.12);border-left:3px solid #3b82f6;margin-bottom:1.5rem;font-size:0.85rem;color:var(--ivory-dim);line-height:1.7;} .drawer-tip strong{color:#93c5fd;} .drawer-checklist{list-style:none;padding:0;margin:0 0 1.5rem 0;} .drawer-checklist li{padding:0.6rem 0;border-bottom:1px solid var(--border);font-size:0.85rem;color:var(--ivory-dim);display:flex;align-items:flex-start;gap:0.6rem;line-height:1.6;} .drawer-checklist li::before{content:'▸';color:var(--teal);flex-shrink:0;margin-top:1px;} /* DRAWER BACKDROP */ .drawer-backdrop{position:fixed;inset:0;background:rgba(6,8,12,0.60);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:170;opacity:0;pointer-events:none;} .drawer-backdrop.active{opacity:1;pointer-events:all;} /* LANGUAGE TOGGLE INLINE */ [data-lang="hi"]{display:none;} body.lang-hi [data-lang="hi"]{display:inline;} body.lang-hi [data-lang="en"]{display:none;} body.lang-hi [data-lang-block="hi"]{display:block;} body.lang-hi [data-lang-block="en"]{display:none;} /* CONSENT MODAL */ .modal-overlay{position:fixed;inset:0;background:rgba(6,8,12,0.80);backdrop-filter:blur(20px);z-index:200;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.4s var(--ease-out);} .modal-overlay.active{opacity:1;pointer-events:all;} .modal-box{background:var(--ink);border:1px solid rgba(130,160,220,0.10);padding:2.5rem;width:90%;max-width:520px;position:relative;box-shadow:var(--shadow-lg);} .modal-box::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--violet),var(--amber));} .modal-close{position:absolute;top:1.2rem;right:1.5rem;background:none;border:none;color:var(--ivory-dim);font-family:var(--font-lato);font-weight:700;font-size:0.72rem;letter-spacing:0.1em;transition:color 0.2s;} .modal-close:hover{color:var(--ivory);} .modal-title{font-family:var(--font-lato);font-weight:900;font-size:1.3rem;margin-bottom:1rem;} .modal-text{font-size:0.92rem;color:var(--ivory-dim);line-height:1.7;margin-bottom:2rem;} .modal-text strong{color:var(--ivory);} .consent-checks{display:flex;flex-direction:column;gap:0.8rem;margin-bottom:2rem;} .consent-check{display:flex;align-items:flex-start;gap:0.8rem;cursor:pointer;} .consent-check input[type="checkbox"]{width:16px;height:16px;accent-color:var(--amber);flex-shrink:0;margin-top:2px;} .consent-check label{font-size:0.85rem;color:var(--ivory-dim);line-height:1.5;cursor:pointer;} .consent-check label strong{color:var(--ivory);} /* DELIVERABLES PANEL */ .deliverables{margin-top:2rem;padding:1.5rem;border:1px solid var(--border);background:var(--surface);} .deliverables-title{font-family:var(--font-lato);font-weight:700;font-size:0.8rem;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:1rem;} .deliverable-item{display:flex;align-items:center;gap:1rem;padding:0.8rem 0;border-bottom:1px solid var(--border);} .deliverable-item:last-child{border-bottom:none;} .deliverable-icon{width:36px;height:36px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;} /* ADD EMPLOYEE SIDE PANEL */ .panel-overlay{position:fixed;inset:0;background:color-mix(in srgb, var(--void) 55%, transparent);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:190;display:none;} /* While the open/close transform+opacity animation is running, drop the blur entirely — a full-viewport backdrop-filter recomputed every frame alongside a sliding panel is the main source of jank. It's restored the instant the fade settles (see the openPanel/closePanel JS). */ .panel-overlay--animating{backdrop-filter:none;-webkit-backdrop-filter:none;} .add-emp-panel{position:fixed;top:0;right:0;width:520px;max-width:100vw;height:100vh;background:var(--ink);border-left:1px solid var(--border);z-index:191;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);} /* Two-column field pairing used in the Add Employee panel */ .form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;} .form-row .form-group{margin-bottom:1.5rem;} /* Avatar-style upload dropzone */ .avatar-group{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:2rem;} .avatar-group .form-label{text-align:center;margin-bottom:0.8rem;} .avatar-group .photo-upload{border:none;padding:0;width:96px;height:96px;border-radius:50%;margin:0 auto;} .avatar-group .photo-upload:hover{background:none;} .avatar-group .photo-placeholder{width:96px;height:96px;border-radius:50%;border:2px dashed var(--border);justify-content:center;gap:0.4rem;transition:border-color 0.3s,background 0.3s,box-shadow 0.3s;} .avatar-group .photo-upload:hover .photo-placeholder{border-color:var(--amber);background:var(--amber-soft);box-shadow:0 0 16px var(--amber-glow);} .avatar-group .photo-placeholder-ring{color:var(--ivory-dim);display:flex;transition:color 0.3s;} .avatar-group .photo-upload:hover .photo-placeholder-ring{color:var(--amber);} .avatar-group .photo-text{font-size:0.6rem;letter-spacing:0.04em;line-height:1.3;padding:0 0.8rem;color:var(--ivory-dim);transition:color 0.3s;} .avatar-group .photo-upload:hover .photo-text{color:var(--ivory);} #photoUpload{width:96px;height:96px;border-radius:50%;margin:0 auto;position:relative;cursor:pointer;} #photoPreview{width:96px;height:96px;position:relative;} #photoImg{width:96px;height:96px;border-radius:50%;object-fit:cover;display:block;border:2px solid var(--border-lit);} #photoRemove{position:absolute;top:-6px;right:-6px;width:28px;height:28px;border-radius:50%;border:1px solid var(--border);background:var(--elevated);color:var(--ivory-dim);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:5;box-shadow:var(--shadow-sm);} #photoRemove:hover{color:var(--red);border-color:var(--red);background:var(--surface);} .avatar-group .photo-preview{width:96px;height:96px;position:relative;} .avatar-group .photo-preview img{width:96px;height:96px;border-radius:50%;object-fit:cover;border:2px solid var(--border-lit);} .avatar-group .photo-remove{position:absolute;top:-6px;right:-6px;width:28px;height:28px;border-radius:50%;border:1px solid var(--border);background:var(--elevated);color:var(--ivory-dim);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s;box-shadow:var(--shadow-sm);z-index:2;} .avatar-group .photo-remove:hover{color:var(--red);border-color:var(--red);background:var(--surface);} .panel-header{padding:2rem 2.2rem;border-bottom:1px solid var(--border);flex-shrink:0;} .panel-header-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;} .panel-title{font-family:var(--font-lato);font-weight:900;font-size:1.35rem;letter-spacing:0.02em;} .panel-close{width:38px;height:38px;border:1px solid var(--border);background:var(--surface);color:var(--ivory-dim);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s;border-radius:50%;} .panel-close:hover{color:var(--ivory);border-color:var(--border-lit);background:var(--elevated);box-shadow:var(--shadow-sm);} .panel-close svg{width:18px;height:18px;} .step-indicator-bar{width:100%;} .step-indicator-steps{display:flex;align-items:center;gap:0;} .si-step{display:flex;align-items:center;gap:0.6rem;flex:1;min-width:0;} .si-dot{width:32px;height:32px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-family:var(--font-lato);font-weight:700;font-size:0.7rem;color:var(--ivory-faint);background:var(--surface);flex-shrink:0;transition:all 0.4s var(--ease-out);} .si-step.active .si-dot{border-color:var(--amber);color:var(--void);background:var(--amber);box-shadow:0 0 14px var(--amber-glow);} .si-step.completed .si-dot{border-color:var(--teal);color:var(--void);background:var(--teal);box-shadow:0 0 14px var(--teal-glow);} .si-label{font-family:var(--font-lato);font-weight:700;font-size:0.65rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--ivory-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color 0.3s;} .si-step.active .si-label{color:var(--amber);} .si-step.completed .si-label{color:var(--teal);} .si-line{flex:1;height:2px;background:var(--border);margin:0 0.8rem;position:relative;top:0;border-radius:1px;} .si-step.completed ~ .si-line{background:var(--border);} .si-step.active ~ .si-line{background:var(--border);} .si-step.completed + .si-line{background:var(--teal);box-shadow:0 0 8px var(--teal-glow);} .panel-body{flex:1;overflow-y:auto;padding:2.2rem;} .panel-body::-webkit-scrollbar{width:6px;} .panel-body::-webkit-scrollbar-track{background:transparent;} .panel-body::-webkit-scrollbar-thumb{background:var(--border-lit);border-radius:3px;} .panel-step{animation:panelFadeIn 0.4s var(--ease-out);} @keyframes panelFadeIn{from{opacity:0;transform:translateY(15px);}to{opacity:1;transform:translateY(0);}} .step-section-title{font-family:var(--font-lato);font-weight:700;font-size:0.75rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--amber);margin-bottom:1.5rem;padding-bottom:0.6rem;border-bottom:1px solid var(--border);} .panel-body .form-group{margin-bottom:1.5rem;} .panel-body .form-label{font-family:var(--font-lato);font-weight:700;font-size:0.75rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--ivory-dim);margin-bottom:0.5rem;display:block;} .panel-body .form-label .required{color:var(--red);} .panel-body .form-input{width:100%;padding:0.85rem 1.1rem;background:var(--surface);border:1px solid var(--border);color:var(--ivory);font-size:0.92rem;outline:none;transition:all 0.3s;border-radius:4px;} .panel-body .form-input:hover{border-color:var(--border-lit);} .panel-body .form-input:focus{border-color:var(--amber);background:var(--elevated);box-shadow:0 0 0 3px var(--amber-soft);} .panel-body .form-input.input-error{border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft);} .panel-body .form-input::placeholder{color:var(--ivory-faint);} .panel-body select.form-input{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:2.8rem;} .select-wrapper { position: relative; } .select-wrapper::after { content: ''; position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background-color: var(--ivory-dim); -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E") no-repeat center; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E") no-repeat center; pointer-events: none; } .panel-footer{display:flex;align-items:center;justify-content:space-between;padding:1.5rem 2.2rem;border-top:1px solid var(--border);background:var(--surface);flex-shrink:0;gap:1rem;} .panel-footer-right{display:flex;align-items:center;gap:0.8rem;margin-left:auto;} /* Finish summary */ .finish-card{border:1px solid var(--border);background:var(--surface);padding:1.5rem;margin-bottom:1.8rem;border-radius:6px;box-shadow:var(--shadow-sm);} .finish-row{display:flex;align-items:center;justify-content:space-between;padding:0.8rem 0;border-bottom:1px solid var(--border);} .finish-row:last-child{border-bottom:none;} .finish-label{font-family:var(--font-lato);font-weight:700;font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--ivory-dim);} .finish-value{font-family:var(--font-lato);font-weight:700;font-size:0.9rem;color:var(--ivory);} /* AI consent */ .ai-consent{margin-top:0.5rem;padding:1.2rem;background:var(--elevated);border:1px solid var(--border-lit);border-radius:6px;} .consent-checkbox{display:flex;align-items:flex-start;gap:0.8rem;cursor:pointer;} .consent-checkbox input[type="checkbox"]{display:none;} .check-box{width:20px;height:20px;border:2px solid var(--border);flex-shrink:0;margin-top:2px;position:relative;transition:all 0.3s;border-radius:3px;background:var(--surface);} .consent-checkbox input:checked + .check-box{border-color:var(--amber);background:var(--amber);box-shadow:0 0 10px var(--amber-glow);} .consent-checkbox input:checked + .check-box::after{content:'';position:absolute;top:2px;left:6px;width:5px;height:10px;border:solid var(--void);border-width:0 2px 2px 0;transform:rotate(45deg);} .check-text{font-family:var(--font-lato);font-weight:600;font-size:0.82rem;color:var(--ivory);line-height:1.4;} .consent-note{font-family:var(--font-lato);font-weight:400;font-size:0.72rem;color:var(--ivory-dim);line-height:1.6;margin-top:0.6rem;margin-left:2.8rem;} /* Toast notification */ .toast-notification{position:fixed;bottom:2rem;right:2rem;background:var(--teal-soft);border:1px solid rgba(51,160,143,0.3);color:var(--teal);font-family:var(--font-rc);font-weight:600;font-size:0.82rem;padding:1rem 1.5rem;z-index:300;box-shadow:var(--shadow-md);backdrop-filter:blur(8px);} /* ═══ RISK DRIFT INSIGHT PAGE ═══ */ .drift-loading{padding:4rem 0;text-align:center;font-family:var(--font-m);font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--ivory-faint);} .drift-back-row{margin-bottom:1rem;} .drift-back{display:inline-flex;align-items:center;gap:0.4rem;font-family:var(--font-m);font-size:0.6rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--amber);transition:color 0.2s;} .drift-back:hover{color:var(--ivory);} .drift-page-title{font-family:var(--font-d);font-size:1.4rem;font-weight:700;letter-spacing:-0.01em;text-transform:none;margin-bottom:0.3rem;} .drift-list-head{margin-bottom:1.6rem;} .drift-hero-card{padding:1.8rem;} .drift-hero{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;} .drift-avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--violet),var(--amber));display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-size:1.2rem;font-weight:700;color:var(--void);flex-shrink:0;} .drift-hero-main{flex:1;min-width:200px;} .drift-eyebrow{font-family:var(--font-m);font-size:0.6rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--amber);margin-bottom:0.5rem;} .drift-headline{font-family:var(--font-d);font-size:clamp(1.2rem,2.4vw,1.7rem);font-weight:700;letter-spacing:-0.02em;line-height:1.15;text-transform:uppercase;} .drift-hero-meta{display:flex;align-items:center;flex-wrap:wrap;gap:0.8rem;margin-top:0.7rem;} .drift-conf{display:inline-flex;align-items:center;gap:0.4rem;font-family:var(--font-m);font-size:0.62rem;letter-spacing:0.12em;text-transform:uppercase;padding:0.35rem 0.8rem;border:1px solid;border-radius:100px;white-space:nowrap;} .drift-conf.high{color:var(--teal);border-color:rgba(51,160,143,0.3);background:var(--teal-soft);} .drift-conf.medium{color:var(--amber);border-color:rgba(212,136,74,0.3);background:var(--amber-soft);} .drift-conf.low{color:var(--red);border-color:rgba(232,69,69,0.3);background:var(--red-soft);} .drift-employee{font-family:var(--font-m);font-size:0.6rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--ivory-dim);} .drift-time{font-family:var(--font-m);font-size:0.6rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ivory-faint);} .drift-summary{font-size:0.98rem;color:var(--ivory-dim);line-height:1.8;margin-top:1.4rem;max-width:780px;} .drift-summary strong{color:var(--ivory);} /* Session window flow */ .drift-flow{background:var(--surface);border:1px solid var(--border);padding:1.8rem 1.5rem;margin-top:1.5rem;box-shadow:var(--shadow-sm);} .drift-flow-title{font-family:var(--font-m);font-size:0.6rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--ivory-faint);margin-bottom:1.6rem;} .drift-flow-track{display:flex;align-items:stretch;} .drift-node{flex:1;min-width:0;background:var(--ink);border:1px solid var(--border);padding:1rem 0.9rem;text-align:center;position:relative;transition:border-color 0.3s,box-shadow 0.3s;} .drift-node.trigger{border-color:var(--red);box-shadow:0 0 18px var(--red-glow);} .drift-node-num{font-family:var(--font-m);font-size:0.55rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--ivory-faint);} .drift-node-date{font-family:var(--font-m);font-size:0.6rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--amber);margin:0.35rem 0 0.8rem;} .drift-node-metrics{display:flex;justify-content:center;gap:1rem;} .drift-metric{display:flex;flex-direction:column;align-items:center;gap:0.15rem;min-width:52px;} .drift-metric-val{font-family:var(--font-d);font-size:1.05rem;font-weight:700;} .drift-metric-label{font-family:var(--font-m);font-size:0.5rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--ivory-faint);} .drift-node-bar{height:3px;background:var(--border);border-radius:2px;overflow:hidden;margin-top:0.9rem;} .drift-node-bar .fill{height:100%;border-radius:2px;transition:width 0.6s var(--ease-out);} .drift-flag{position:absolute;top:-11px;right:12px;display:inline-flex;align-items:center;gap:0.3rem;font-family:var(--font-m);font-size:0.5rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--red);background:var(--ink);border:1px solid rgba(232,69,69,0.5);padding:0.15rem 0.55rem;z-index:2;} .drift-flag svg{display:block;} .drift-connector{flex:0 0 44px;display:flex;align-items:center;justify-content:center;position:relative;} .drift-connector-line{display:block;width:100%;height:2px;background:linear-gradient(90deg,var(--violet),var(--amber));position:relative;opacity:0;} .drift-connector-line::after{content:'';position:absolute;right:-1px;top:50%;transform:translateY(-50%) rotate(45deg);width:7px;height:7px;border-top:2px solid var(--amber);border-right:2px solid var(--amber);} .drift-empty{font-family:var(--font-m);font-size:0.72rem;letter-spacing:0.06em;color:var(--ivory-faint);text-align:center;padding:2.5rem 1rem;} /* Full-page empty state — editorial */ .drift-empty-page{max-width:36rem;margin:0 auto;padding:4rem 1.5rem;display:flex;flex-direction:column;align-items:center;} .drift-empty-icon{color:var(--ivory-faint);opacity:0.6;margin-bottom:1.5rem;} .drift-empty-icon svg{display:block;} .drift-empty-title{font-family:var(--font-serif);font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;line-height:1.3;letter-spacing:0;text-transform:none;color:var(--ivory);margin-bottom:0.9rem;} .drift-empty-body{font-family:var(--font-m);font-size:0.9rem;line-height:1.7;letter-spacing:0;color:var(--ivory-dim);max-width:27rem;} .drift-empty-meta{display:inline-block;margin-top:1.5rem;font-family:var(--font-m);font-size:0.6rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--ivory-faint);} /* Escalation evidence */ .drift-evidence-card{padding:1.8rem;margin-top:1.5rem;} .drift-section-title{display:flex;align-items:center;gap:0.6rem;font-family:var(--font-d);font-size:0.8rem;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;margin-bottom:1.2rem;} .drift-section-title svg{width:16px;height:16px;color:var(--amber);flex-shrink:0;} .drift-evidence-item{display:flex;align-items:flex-start;gap:0.9rem;padding:0.9rem 1rem;border:1px solid var(--border);background:var(--ivory-ghost);margin-bottom:0.6rem;font-size:0.87rem;color:var(--ivory-dim);line-height:1.7;} .drift-evidence-item:last-child{margin-bottom:0;} .drift-evidence-pin{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--red-soft);border:1px solid rgba(232,69,69,0.35);color:var(--red);font-family:var(--font-m);font-size:0.62rem;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:2px;} /* Insight cards grid */ .drift-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.5rem;} .drift-card{padding:1.5rem;} .drift-card-head{display:flex;align-items:center;gap:0.6rem;margin-bottom:0.8rem;} .drift-card-head svg{width:16px;height:16px;color:var(--amber);flex-shrink:0;} .drift-card-text{font-size:0.9rem;color:var(--ivory-dim);line-height:1.8;} /* Suggested opening script */ .drift-script-card{padding:1.8rem;margin-top:1.5rem;background:var(--violet-soft);border-color:rgba(123,79,255,0.22);} .drift-script-card .drift-section-title{color:var(--violet);} .drift-script-card .drift-section-title svg{color:var(--violet);} .drift-script{margin:0;font-family:var(--font-b);font-size:1.02rem;font-style:italic;line-height:1.9;color:var(--ivory);padding-left:1.2rem;border-left:3px solid var(--violet);} /* List view rows */ .drift-list{display:flex;flex-direction:column;gap:0.7rem;} .drift-list-item .alert-name{font-size:0.95rem;} .drift-list-item .drift-conf{flex-shrink:0;} @media(max-width:768px){ .drift-grid{grid-template-columns:1fr;} .drift-flow-track{flex-direction:column;align-items:center;} .drift-node{width:100%;max-width:340px;} .drift-connector{flex:0 0 26px;width:2px;} .drift-connector-line{width:2px;height:100%;} .drift-flag{right:18px;} } /* ═══ CONVERSATION WORKSPACE ═══ */ .ws-header{margin-bottom:1.5rem;} .ws-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;} .ws-title{font-family:var(--font-lato);font-weight:900;font-size:clamp(1.4rem,2.4vw,1.8rem);letter-spacing:-0.01em;margin-bottom:0.35rem;} .ws-subtitle{font-size:0.88rem;color:var(--ivory-faint);max-width:46rem;line-height:1.6;} .ws-live-pill{display:inline-flex;align-items:center;gap:0.45rem;font-family:var(--font-m);font-size:0.6rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--teal);border:1px solid rgba(51,160,143,0.32);background:var(--teal-soft);padding:0.35rem 0.9rem;border-radius:100px;white-space:nowrap;flex-shrink:0;} .ws-live-dot{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px var(--teal-glow);animation:wsLivePulse 1.8s ease-in-out infinite;} @keyframes wsLivePulse{0%,100%{opacity:1;}50%{opacity:0.35;}} .ws-tabs{display:flex;align-items:center;gap:0.4rem;margin-top:1.2rem;border-bottom:1px solid var(--border);} .ws-tab{display:inline-flex;align-items:center;gap:0.45rem;font-family:var(--font-lato);font-weight:700;font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ivory-dim);padding:0.6rem 1rem;border-bottom:2px solid transparent;transition:all 0.25s;cursor:pointer;} .ws-tab:hover{color:var(--ivory);} .ws-tab.active{color:var(--ivory);border-bottom-color:var(--amber);} .ws-loading{padding:4rem 0;text-align:center;font-family:var(--font-m);font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--ivory-faint);} .ws-gate{padding:2.5rem;text-align:center;max-width:34rem;margin:0 auto;} .ws-gate-title{font-family:var(--font-d);font-size:1.1rem;font-weight:600;text-transform:uppercase;margin-bottom:0.8rem;} .ws-gate-body{font-size:0.9rem;color:var(--ivory-dim);line-height:1.7;margin-bottom:1.8rem;} .ws-gate-note{margin-top:1.2rem;font-family:var(--font-m);font-size:0.7rem;letter-spacing:0.1em;color:var(--ivory-faint);} .ws-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,7fr);gap:1.2rem;align-items:stretch;} .ws-transcript{display:flex;flex-direction:column;gap:1rem;height:100%;} .ws-coach{display:flex;flex-direction:column;gap:1.2rem;} .ws-toolbar{display:flex;align-items:center;gap:0.6rem;padding:0.9rem 1.2rem;border-bottom:1px solid var(--border);flex-wrap:wrap;} .ws-search{position:relative;flex:1;min-width:200px;display:flex;align-items:center;} .ws-search svg{position:absolute;left:0.85rem;color:var(--ivory-faint);pointer-events:none;} .ws-search input{width:100%;padding:0.55rem 1rem 0.55rem 2.3rem;background:var(--surface);border:1px solid var(--border);color:var(--ivory);font-size:0.84rem;outline:none;transition:border-color 0.2s;} .ws-search input:focus{border-color:var(--amber);} .ws-search input::placeholder{color:var(--ivory-faint);} .ws-tool-btn{font-family:var(--font-lato);font-weight:700;font-size:0.62rem;letter-spacing:0.08em;text-transform:uppercase;padding:0.55rem 0.9rem;border:1px solid var(--border);background:transparent;color:var(--ivory-dim);transition:all 0.2s;white-space:nowrap;} .ws-tool-btn:hover{border-color:var(--border-lit);color:var(--ivory);background:var(--ivory-ghost);} .ws-tool-select{padding:0.55rem 0.9rem;background:var(--surface);border:1px solid var(--border);color:var(--ivory-dim);font-family:var(--font-lato);font-weight:700;font-size:0.62rem;letter-spacing:0.08em;text-transform:uppercase;outline:none;cursor:pointer;transition:border-color 0.2s;} .ws-tool-select:focus{border-color:var(--amber);} .ws-filter-pop{position:absolute;top:calc(100% + 6px);right:1.2rem;z-index:40;background:var(--ink);border:1px solid var(--border);box-shadow:var(--shadow-md);padding:0.6rem 0.8rem;display:flex;flex-direction:column;gap:0.55rem;min-width:190px;} .ws-filter-opt{display:flex;align-items:center;gap:0.55rem;font-family:var(--font-m);font-size:0.78rem;color:var(--ivory-dim);cursor:pointer;white-space:nowrap;} .ws-filter-opt input{width:14px;height:14px;accent-color:var(--amber);flex-shrink:0;} .ws-lines{flex:1;padding:0.6rem 1.2rem 1rem;overflow-y:auto;} .ws-lines::-webkit-scrollbar{width:5px;} .ws-lines::-webkit-scrollbar-track{background:transparent;} .ws-lines::-webkit-scrollbar-thumb{background:rgba(130,160,220,0.14);border-radius:3px;} .ws-audio{margin-top:auto;display:flex;gap:1rem;padding:0.8rem 1.2rem 1rem;border-top:1px solid var(--border);background:var(--ink);align-items:center;justify-content:center;flex-shrink:0;} .ws-audio.disabled{opacity:0.5;pointer-events:none;} .ws-audio-btn{width:30px;height:30px;border:1px solid var(--border);border-radius:50%;background:transparent;color:var(--ivory-dim);display:flex;align-items:center;justify-content:center;transition:all 0.3s;} .ws-audio-btn:hover{border-color:var(--border-lit);color:var(--ivory);background:var(--ivory-ghost);} .ws-audio-btn svg{width:14px;height:14px;} .ws-audio-times{font-family:var(--font-m);font-size:0.65rem;color:var(--ivory-faint);margin:0 1rem;} .ws-audio-track{flex:1;height:6px;background:var(--surface);border-radius:3px;overflow:hidden;} .ws-audio-fill{height:100%;background:linear-gradient(90deg,var(--violet),var(--amber));width:0%;transition:width 0.3s;} .ws-audio-speed{font-size:0.6rem;color:var(--ivory-faint);} .ws-audio-vol{display:flex;align-items:center;gap:0.5rem;} .ws-line{display:flex;gap:0.85rem;padding:0.75rem 0.4rem;border-bottom:1px solid var(--border);border-left:2px solid transparent;border-radius:4px;transition:background 0.2s,border-color 0.3s,box-shadow 0.3s;} .ws-line:hover{background:var(--ivory-ghost);} .ws-line.pinned{background:rgba(212,136,74,0.05);border-left-color:var(--amber);} .ws-line-avatar{flex-shrink:0;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-m);font-size:0.58rem;font-weight:700;letter-spacing:0.04em;margin-top:1px;} .ws-line-avatar.hr{background:var(--violet-soft);border:1px solid rgba(123,79,255,0.35);color:var(--violet);} .ws-line-avatar.emp{background:var(--teal-soft);border:1px solid rgba(51,160,143,0.35);color:var(--teal);} .ws-line-avatar.has-photo{padding:0;overflow:hidden;} .ws-line-avatar.has-photo img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;} .ws-line-body{flex:1;min-width:0;} .ws-line-head{display:flex;align-items:center;gap:0.6rem;margin-bottom:0.15rem;} .ws-line-speaker{font-family:var(--font-m);font-size:0.58rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;} .ws-line-speaker.hr{color:var(--violet);} .ws-line-speaker.emp{color:var(--teal);} .ws-line-time{font-family:var(--font-m);font-size:0.56rem;letter-spacing:0.08em;color:var(--ivory-faint);} .ws-line-text{font-size:0.92rem;line-height:1.65;color:var(--ivory);} .ws-hl{background:var(--amber-soft);color:var(--amber);outline:1px solid rgba(212,136,74,0.35);padding:0 1px;} .ws-line-actions{display:flex;align-items:flex-start;gap:0.2rem;opacity:0;transition:opacity 0.2s;position:relative;} .ws-line:hover .ws-line-actions{opacity:1;} .ws-line-action{width:26px;height:26px;border:1px solid transparent;border-radius:5px;background:transparent;color:var(--ivory-faint);display:inline-flex;align-items:center;justify-content:center;transition:all 0.2s;} .ws-line-action:hover{border-color:var(--border-lit);color:var(--ivory);background:var(--ivory-ghost);} .ws-line-menu{position:relative;} .ws-line-pop{position:absolute;right:0;top:calc(100% + 4px);z-index:30;background:var(--elevated);border:1px solid var(--border-lit);box-shadow:var(--shadow-md);border-radius:5px;overflow:hidden;min-width:110px;} .ws-line-pop button{display:block;width:100%;text-align:left;padding:0.5rem 0.9rem;background:transparent;border:none;color:var(--ivory-dim);font-family:var(--font-m);font-size:0.78rem;transition:background 0.2s,color 0.2s;} .ws-line-pop button:hover{background:var(--ivory-ghost);color:var(--ivory);} .ws-empty{padding:2rem 1rem;text-align:center;font-family:var(--font-m);font-size:0.78rem;letter-spacing:0.04em;color:var(--ivory-faint);} .ws-disclaimer{padding:0.6rem 1.2rem;border-top:1px solid var(--border);font-family:var(--font-m);font-size:0.62rem;letter-spacing:0.05em;color:var(--ivory-faint);} .ws-audio{display:flex;align-items:center;gap:0.8rem;padding:0.85rem 1.2rem;border-top:1px solid var(--border);background:var(--surface);} .ws-audio-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--teal);background:var(--teal-soft);color:var(--teal);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;} .ws-audio-btn:disabled{opacity:0.45;cursor:not-allowed;} .ws-audio-times{font-family:var(--font-m);font-size:0.68rem;color:var(--ivory-dim);white-space:nowrap;} .ws-audio-track{flex:1;height:4px;background:var(--border);border-radius:2px;overflow:hidden;} .ws-audio-fill{height:100%;background:var(--teal);border-radius:2px;} .ws-audio-speed{padding:0.3rem 0.5rem;background:var(--surface);border:1px solid var(--border);color:var(--ivory-dim);font-family:var(--font-m);font-size:0.68rem;outline:none;cursor:pointer;} .ws-audio-speed:disabled{opacity:0.45;cursor:not-allowed;} .ws-audio-vol{color:var(--ivory-faint);display:inline-flex;align-items:center;flex-shrink:0;} .ws-audio-msg{font-family:var(--font-m);font-size:0.66rem;letter-spacing:0.04em;color:var(--ivory-faint);flex-shrink:0;} .ws-audio.disabled .ws-audio-track{opacity:0.3;} .ws-audio.disabled .ws-audio-vol{opacity:0.3;} .ws-coach{display:flex;flex-direction:column;gap:1.2rem;} /* ── LIVE CONVERSATION SCORE — primary intelligence hero of the right panel ── */ .ws-hero{position:relative;overflow:hidden;padding:1.7rem 1.8rem 1.55rem;border-color:rgba(123,79,255,0.22);background:linear-gradient(155deg,var(--violet-soft),transparent 46%),var(--ink);box-shadow:var(--shadow-md);} .ws-hero::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 4%,var(--violet-glow) 32%,var(--amber-glow) 68%,transparent 96%);} .ws-hero::after{content:'';position:absolute;top:-70px;right:-55px;width:230px;height:230px;background:radial-gradient(circle,rgba(123,79,255,0.13),transparent 62%);pointer-events:none;} .wsx-score-head{position:relative;display:flex;align-items:center;justify-content:space-between;gap:0.9rem;flex-wrap:wrap;margin-bottom:1.5rem;z-index:1;} .wsx-score-title{font-family:var(--font-lato);font-weight:900;font-size:0.82rem;letter-spacing:0.24em;text-transform:uppercase;color:var(--ivory);text-shadow:0 0 20px rgba(123,79,255,0.30);} html[data-theme="light"] .wsx-score-title{text-shadow:none;} .wsx-score-status{font-family:var(--font-m);font-size:0.58rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;padding:0.34rem 0.8rem;border-radius:100px;border:1px solid var(--border);white-space:nowrap;color:var(--ivory-faint);background:var(--surface);} .wsx-score-status.high{color:var(--teal);border-color:rgba(51,160,143,0.35);background:var(--teal-soft);text-shadow:0 0 12px var(--teal-glow);} .wsx-score-status.medium{color:var(--amber);border-color:rgba(212,136,74,0.35);background:var(--amber-soft);text-shadow:0 0 12px var(--amber-glow);} .wsx-score-status.low{color:var(--red);border-color:rgba(232,69,69,0.35);background:var(--red-soft);text-shadow:0 0 12px var(--red-glow);} .wsx-score-main{position:relative;display:flex;align-items:baseline;flex-wrap:wrap;gap:0.4rem 1rem;padding-bottom:1.4rem;border-bottom:1px solid var(--border);z-index:1;} .ws-score-num{font-family:var(--font-lato);font-weight:900;font-size:clamp(3.4rem,6vw,4.3rem);line-height:0.95;letter-spacing:-0.03em;flex-shrink:0;} .ws-score-num.high{color:var(--teal);text-shadow:0 0 24px var(--teal-glow),0 0 64px var(--violet-glow);} .ws-score-num.medium{color:var(--amber);text-shadow:0 0 24px var(--amber-glow),0 0 64px var(--violet-glow);} .ws-score-num.low{color:var(--red);text-shadow:0 0 24px var(--red-glow),0 0 64px var(--violet-glow);} .ws-score-num.unmeasured{color:var(--ivory-faint);text-shadow:none;} .wsx-score-denom{font-family:var(--font-lato);font-weight:700;font-size:1.15rem;color:var(--ivory-faint);letter-spacing:0.02em;margin-right:0.35rem;} .ws-score-meta{min-width:0;} .ws-score-label{font-family:var(--font-lato);font-weight:700;font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ivory);} .ws-score-sub{font-family:var(--font-m);font-size:0.64rem;color:var(--ivory-faint);margin-top:0.25rem;line-height:1.5;} .wsx-score-note{position:relative;margin-top:1.3rem;font-size:0.94rem;line-height:1.7;color:var(--ivory-dim);z-index:1;} .wsx-score-evidence .wsx-quote{margin-top:1.05rem;} /* Measured dimensions under the score */ .wsx-dims{position:relative;display:flex;flex-direction:column;gap:1rem;margin-top:1.45rem;padding-top:1.3rem;border-top:1px solid var(--border);z-index:1;} .wsx-dims:empty,.wsx-score-evidence:empty,.wsx-facts:empty{display:none!important;} .wsx-dim-head{display:flex;align-items:baseline;justify-content:space-between;gap:0.8rem;margin-bottom:0.4rem;} .wsx-dim-label{font-family:var(--font-m);font-weight:700;font-size:0.6rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--ivory-dim);} .wsx-dim-value{font-family:var(--font-lato);font-weight:800;font-size:0.98rem;letter-spacing:0.01em;} .wsx-dim-value.high{color:var(--teal);} .wsx-dim-value.medium{color:var(--amber);} .wsx-dim-value.low{color:var(--red);} .wsx-dim-bar{height:5px;border-radius:3px;background:var(--surface);overflow:hidden;} .wsx-dim-fill{display:block;height:100%;border-radius:3px;min-width:2px;transition:width 0.6s var(--ease-out);} .wsx-dim-fill.high{background:linear-gradient(90deg,rgba(51,160,143,0.45),var(--teal));box-shadow:0 0 10px var(--teal-glow);} .wsx-dim-fill.medium{background:linear-gradient(90deg,rgba(212,136,74,0.45),var(--amber));box-shadow:0 0 10px var(--amber-glow);} .wsx-dim-fill.low{background:linear-gradient(90deg,rgba(232,69,69,0.45),var(--red));box-shadow:0 0 10px var(--red-glow);} .wsx-facts{position:relative;display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:1.35rem;padding-top:1.2rem;border-top:1px dashed var(--border-lit);z-index:1;} .wsx-fact{display:inline-flex;align-items:baseline;gap:0.5rem;font-size:0.78rem;line-height:1.5;color:var(--ivory-dim);padding:0.35rem 0.8rem;border-radius:100px;border:1px solid var(--border);background:var(--surface);} .wsx-fact b{font-family:var(--font-m);font-weight:700;font-size:0.52rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--amber);flex-shrink:0;} .wsx-fact.warn{border-color:rgba(232,69,69,0.28);background:var(--red-soft);} .wsx-fact.warn b{color:var(--red);} @media(max-width:768px){ .ws-hero{padding:1.35rem 1.15rem 1.25rem;} .wsx-score-denom{font-size:0.95rem;} } /* Phrasing Review tool — violet-tinted review action */ .ws-tool-btn.ws-phrasing-btn{color:var(--violet);border-color:rgba(123,79,255,0.35);background:var(--violet-soft);} .ws-tool-btn.ws-phrasing-btn:hover{color:var(--ivory);border-color:rgba(123,79,255,0.65);background:rgba(123,79,255,0.14);} .ws-tool-btn.ws-phrasing-btn.active{color:#fff;background:var(--violet);border-color:transparent;text-shadow:none;} .ws-tool-btn.ws-phrasing-btn:disabled{opacity:0.6;cursor:progress;} /* ── INTELLIGENCE PANEL — one continuous surface, sections separated by thin rules instead of floating cards. Sits below the Live Conversation Score hero and carries the secondary insights. ── */ .ws-intel{padding:1.3rem 1.5rem;} .wsx-section{margin-top:1.15rem;padding-top:1.15rem;border-top:1px solid var(--border);} .wsx-section-head{display:flex;align-items:center;gap:0.8rem;margin-bottom:0.9rem;} .wsx-section-title{font-family:var(--font-lato);font-weight:800;font-size:0.68rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--ivory);text-shadow:0 0 18px rgba(123,79,255,0.18);} .wsx-section-rule{flex:1;height:1px;background:linear-gradient(90deg,rgba(123,79,255,0.32),transparent);} .wsx-empty{padding:0.9rem 1rem;border:1px dashed var(--border-lit);border-radius:6px;font-family:var(--font-m);font-size:0.74rem;letter-spacing:0.03em;color:var(--ivory-faint);} /* WHAT MATTERS — insight blocks */ .wsx-lead{font-size:0.86rem;line-height:1.6;color:var(--ivory-dim);margin-bottom:0.95rem;padding:0.7rem 0.9rem;border:1px solid var(--border);border-left:2px solid rgba(212,136,74,0.55);background:linear-gradient(135deg,var(--amber-soft),transparent 70%);border-radius:6px;} .wsx-insight{padding:0.95rem 1.05rem;border:1px solid var(--border);border-left:2px solid rgba(123,79,255,0.45);background:linear-gradient(135deg,var(--violet-soft),rgba(130,160,210,0.02) 62%);border-radius:6px;} .wsx-insight+.wsx-insight{margin-top:0.75rem;} .wsx-insight-top{display:flex;align-items:flex-start;justify-content:space-between;gap:0.6rem;margin-bottom:0.4rem;} .wsx-insight-title{font-family:var(--font-lato);font-weight:700;font-size:0.88rem;line-height:1.45;color:#D3C6FF;text-shadow:0 0 14px rgba(123,79,255,0.22);} .wsx-insight-title.upper{text-transform:uppercase;letter-spacing:0.07em;font-size:0.78rem;} html[data-theme="light"] .wsx-insight-title{color:#5A34D8;text-shadow:none;} .wsx-conf{flex-shrink:0;margin-top:0.2rem;font-family:var(--font-m);font-size:0.56rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--violet);border:1px solid rgba(123,79,255,0.35);background:var(--violet-soft);padding:0.14rem 0.5rem;border-radius:100px;} /* Shared body copy */ .wsx-body{font-size:0.85rem;line-height:1.65;color:var(--ivory-dim);} /* Evidence quotes + transcript jump links */ .wsx-quote{margin-top:0.6rem;padding:1rem 1.2rem;border-left:3px solid rgba(212,136,74,0.45);border-radius:4px;background:var(--amber-soft);font-family:var(--font-serif);font-size:0.82rem;line-height:1.6;color:var(--ivory);} .wsx-quote-foot{display:block;margin-top:0.45rem;} .wsx-ev{display:inline-flex;align-items:center;gap:0.35rem;background:transparent;border:none;padding:0;color:var(--violet);font-family:var(--font-m);font-size:0.62rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;transition:color 0.2s;} .wsx-ev:hover{color:var(--ivory);} .wsx-ev svg{opacity:0.7;} .ws-line.flash{background:rgba(123,79,255,0.10);border-left-color:var(--violet);box-shadow:0 0 16px rgba(123,79,255,0.12);} /* FOLLOW-UP PLAN */ .wsx-action{padding:0.8rem 0;} .wsx-action+.wsx-action{border-top:1px solid var(--border);} .wsx-kick{display:inline-block;font-family:var(--font-m);font-size:0.55rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--amber);text-shadow:0 0 12px var(--amber-glow);margin-bottom:0.35rem;} .wsx-metric{margin-top:0.85rem;padding-top:0.85rem;border-top:1px dashed var(--border-lit);font-size:0.8rem;line-height:1.6;color:var(--ivory-dim);} .wsx-metric span{display:block;font-family:var(--font-m);font-size:0.52rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--teal);text-shadow:0 0 10px var(--teal-glow);margin-bottom:0.25rem;} /* Horizontal connected follow-up steps (mirrors the si-step tracker) */ .wsx-steps{display:flex;align-items:flex-start;gap:0;margin-top:0.5rem;} .wsx-step{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1;min-width:0;} .wsx-step-dot{width:36px;height:36px;border-radius:50%;border:2px solid var(--amber);display:flex;align-items:center;justify-content:center;font-family:var(--font-lato);font-weight:700;font-size:0.85rem;color:var(--void);background:var(--amber);box-shadow:0 0 14px var(--amber-glow);flex-shrink:0;} .wsx-step-dot svg{width:16px;height:16px;color:var(--void);} .wsx-step-connector{flex:1;height:2px;background:var(--border);margin-top:18px;border-radius:1px;} .wsx-step-kick{margin-top:0.5rem;font-family:var(--font-lato);font-weight:700;font-size:0.72rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--amber);} .wsx-step-body{margin-top:0.35rem;font-size:0.82rem;color:var(--ivory-dim);line-height:1.5;} /* Destination / outcome step reads as the outcome the earlier steps build toward */ .wsx-step-dest .wsx-step-dot{border-color:var(--teal);background:var(--teal);box-shadow:0 0 14px var(--teal-glow);} .wsx-step-dest .wsx-step-kick{color:var(--teal);} .wsx-step-connector-dest{background:var(--teal);box-shadow:0 0 8px var(--teal-glow);} @media (max-width:768px){ .wsx-steps{flex-direction:column;align-items:stretch;gap:0.9rem;} .wsx-step{flex-direction:row;align-items:center;text-align:left;gap:0.8rem;} .wsx-step-connector{display:none;} .wsx-step-kick,.wsx-step-body{margin-top:0;} } /* CONVERSATION SIGNALS — compact indicator rows */ .wsx-signal+.wsx-signal{margin-top:0.8rem;padding-top:0.8rem;border-top:1px solid var(--border);} .wsx-signal-head{display:flex;align-items:center;gap:0.55rem;flex-wrap:wrap;margin-bottom:0.4rem;} .wsx-signal-label{font-family:var(--font-m);font-weight:700;font-size:0.58rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--ivory);} .wsx-signal-value{font-family:var(--font-lato);font-weight:800;font-size:0.92rem;letter-spacing:0.01em;} .wsx-signal-value.high{color:var(--teal);text-shadow:0 0 16px var(--teal-glow);} .wsx-signal-value.medium{color:var(--amber);text-shadow:0 0 16px var(--amber-glow);} .wsx-signal-value.low{color:var(--red);text-shadow:0 0 16px var(--red-glow);} .wsx-signal-value.unmeasured{color:var(--ivory-faint);} .wsx-tag{font-family:var(--font-m);font-size:0.54rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--violet);border:1px solid rgba(123,79,255,0.3);background:var(--violet-soft);padding:0.16rem 0.5rem;border-radius:100px;white-space:nowrap;} /* ASK ABOUT THIS CONVERSATION */ .wsx-ask{display:flex;gap:0.75rem;padding:0.8rem 0;} .wsx-ask+.wsx-ask{border-top:1px solid var(--border);} .wsx-qnum{width:24px;height:24px;border-radius:50%;background:var(--violet-soft);border:1px solid rgba(123,79,255,0.4);color:var(--violet);font-family:var(--font-m);font-size:0.56rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:0.1rem;box-shadow:0 0 12px rgba(123,79,255,0.12);} .wsx-ask-body{min-width:0;} .wsx-ask-q{font-family:var(--font-serif);font-size:0.9rem;line-height:1.55;color:var(--ivory);} .wsx-ask .wsx-body{margin-top:0.35rem;font-size:0.8rem;} /* Panel footer — existing sync-room navigation */ .wsx-footer{display:flex;align-items:center;justify-content:flex-end;gap:0.4rem;margin-top:1.15rem;padding-top:1rem;border-top:1px solid var(--border);} .wsx-footer a{font-family:var(--font-m);font-size:0.62rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--amber);transition:color 0.2s;} .wsx-footer a:hover{color:var(--ivory);} .wsx-footer svg{color:var(--amber);opacity:0.7;} @media(max-width:1280px){ .ws-grid{grid-template-columns:1fr;} .ws-lines{max-height:none;} } /* AI preview strip on AI Sync session cards */ .session-preview{display:flex;flex-wrap:wrap;gap:0.4rem;padding:0.6rem 1rem 0.2rem;margin-top:0.7rem;border-top:1px solid var(--border);} .preview-chip{display:inline-flex;align-items:center;gap:0.4rem;font-family:var(--font-m);font-size:0.58rem;letter-spacing:0.04em;padding:0.25rem 0.65rem;border:1px solid;border-radius:100px;white-space:nowrap;} .preview-chip b{font-weight:600;text-transform:uppercase;letter-spacing:0.1em;font-size:0.52rem;} .preview-chip.warn{color:var(--amber);border-color:rgba(212,136,74,0.3);background:var(--amber-soft);} .preview-chip.high{color:var(--teal);border-color:rgba(51,160,143,0.3);background:var(--teal-soft);} .preview-chip.medium{color:var(--amber);border-color:rgba(212,136,74,0.3);background:var(--amber-soft);} .preview-chip.low{color:var(--red);border-color:rgba(232,69,69,0.3);background:var(--red-soft);} .preview-chip.pending{color:var(--ivory-faint);border-color:var(--border);background:var(--surface);} /* MOBILE HAMBURGER */ .mobile-toggle{display:none;position:fixed;top:1rem;left:1rem;z-index:150;width:40px;height:40px;border:1px solid var(--border);background:var(--sidebar);color:var(--ivory);align-items:center;justify-content:center;} .mobile-toggle svg{width:18px;height:18px;} /* RESPONSIVE */ @media(max-width:1280px){ .sync-layout{grid-template-columns:1fr;} .journey-sidebar{position:relative;top:0;} } @media(max-width:1024px){ .stats-row{grid-template-columns:1fr 1fr;} .dash-grid{grid-template-columns:1fr;} } @media(max-width:480px){ .stats-row{grid-template-columns:1fr;} .journey-progress{flex-direction:column;gap:0.5rem;} .step-connector{width:1px;height:20px;top:0;} } /* ═══ SETTINGS PAGE ═══ */ .settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:start;} .settings-section-title{font-family:var(--font-d);font-weight:600;font-size:1.4rem;letter-spacing:normal;text-transform:none;color:var(--ivory);margin-top:0.4rem;margin-bottom:0.3rem;} .settings-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;} .settings-actions{display:flex;justify-content:flex-end;gap:0.6rem;margin-top:1.4rem;} .form-input.input-error{border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft);} .field-error{font-family:var(--font-rc);font-weight:600;font-size:0.62rem;color:var(--red);margin-top:0.4rem;display:none;letter-spacing:0.05em;} .btn:disabled{opacity:0.55;cursor:default;} /* PROFILE */ .profile-head{display:flex;align-items:center;gap:1.2rem;margin-bottom:1.6rem;} .profile-avatar{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--violet),var(--amber));display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-size:1.4rem;font-weight:700;color:#fff;flex-shrink:0;box-shadow:0 0 24px var(--violet-glow);} .profile-name{font-family:var(--font-lato);font-weight:700;font-size:1.05rem;color:var(--ivory);} .profile-role{font-family:var(--font-rc);font-weight:600;font-size:0.6rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ivory-faint);margin-top:0.2rem;} /* NOTIFICATIONS — reusable toggle switch */ .notif-prefs{display:flex;flex-direction:column;} .toggle-row{display:flex;align-items:center;gap:1rem;padding:0.85rem 0;border-bottom:1px solid var(--border);cursor:pointer;} .toggle-row:last-child{border-bottom:none;} .toggle-label{display:flex;flex-direction:column;gap:0.25rem;flex:1;min-width:0;} .toggle-title{font-size:0.9rem;font-weight:600;color:var(--ivory);} .toggle-desc{font-size:0.78rem;color:var(--ivory-dim);line-height:1.5;} .toggle-switch{position:relative;width:44px;height:24px;flex-shrink:0;} .toggle-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:2;} .toggle-slider{position:absolute;inset:0;background:var(--border);border-radius:100px;transition:background 0.25s var(--ease-out);} .toggle-slider::before{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--ivory);transition:transform 0.25s var(--ease-out);} .toggle-switch input:checked + .toggle-slider{background:var(--teal);box-shadow:0 0 10px var(--teal-glow);} .toggle-switch input:checked + .toggle-slider::before{transform:translateX(20px);} .toggle-switch input:focus-visible + .toggle-slider{box-shadow:0 0 0 3px var(--teal-soft);} /* ACTIVE SESSIONS */ .sessions-list{display:flex;flex-direction:column;} .session-row{display:flex;align-items:center;gap:1rem;padding:0.85rem 0;border-bottom:1px solid var(--border);} .session-row:last-child{border-bottom:none;} .session-icon{width:38px;height:38px;border:1px solid var(--border);border-radius:8px;background:var(--surface);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--ivory-dim);} .session-icon svg{width:16px;height:16px;} .session-meta{flex:1;min-width:0;} .session-device{font-size:0.86rem;font-weight:600;color:var(--ivory);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .session-loc{font-family:var(--font-lato);font-weight:400;font-size:0.72rem;color:var(--ivory-dim);margin-top:0.15rem;} .session-time{font-family:var(--font-m);font-size:0.58rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--ivory-faint);white-space:nowrap;} /* BILLING */ .plan-summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:0.6rem;} .plan-name{font-family:var(--font-lato);font-weight:900;font-size:1.15rem;color:var(--ivory);} .plan-org{font-family:var(--font-rc);font-weight:600;font-size:0.62rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ivory-faint);margin-top:0.2rem;} .plan-desc{font-size:0.82rem;color:var(--ivory-dim);line-height:1.6;margin-bottom:1.4rem;} .usage-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.6rem;} .usage-label{font-family:var(--font-lato);font-weight:700;font-size:0.6rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--ivory-dim);} .usage-value{font-family:var(--font-rc);font-weight:600;font-size:0.62rem;color:var(--ivory);} .plan-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.2rem;} .plan-foot-note{font-family:var(--font-m);font-size:0.62rem;color:var(--ivory-faint);} @media(max-width:1024px){ .settings-grid{grid-template-columns:1fr;} } @media(max-width:768px){ .settings-section-title{font-size:1.15rem;} } @media(max-width:768px){ .settings-form-grid{grid-template-columns:1fr;} .plan-foot{flex-direction:column;align-items:flex-start;} } /* ═══ DIRECTORY STATES ═══ */ @keyframes dirShimmer{ 0%{transform:translateX(-100%);} 100%{transform:translateX(100%);} } .skeleton-block{position:relative;display:inline-block;overflow:hidden;background:var(--border);border-radius:4px;vertical-align:middle;} .skeleton-block::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--ivory-ghost),transparent);transform:translateX(-100%);animation:dirShimmer 1.3s var(--ease-out) infinite;} .skeleton-block.circle{width:34px;height:34px;border-radius:50%;} .skeleton-block.line{display:block;height:11px;border-radius:4px;margin:5px 0;} .skeleton-block.line.w70{width:70%;} .skeleton-block.line.w45{width:45%;} .skeleton-block.sm{width:56px;height:12px;} .skeleton-block.md{width:88px;height:12px;} .skeleton-block.xs{width:26px;height:12px;} .skeleton-block.bar{width:80px;height:6px;border-radius:2px;} .skeleton-block.badge{width:76px;height:20px;border-radius:100px;} .skeleton-inline{display:flex;align-items:center;gap:0.5rem;} .skeleton-row td{vertical-align:middle;} /* Centered empty / error blocks inside the table */ .dir-state,.empty-state,.error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4.5rem 1.5rem;} .dir-state-icon{width:56px;height:56px;border-radius:50%;border:1px solid var(--border);background:var(--surface);display:flex;align-items:center;justify-content:center;color:var(--ivory-faint);margin-bottom:1rem;flex-shrink:0;} .dir-state-icon svg{width:24px;height:24px;} .error-state .dir-state-icon{color:var(--red);border-color:rgba(232,69,69,0.28);background:var(--red-soft);} .dir-state-title{font-family:var(--font-lato);font-weight:900;font-size:1.05rem;color:var(--ivory);} .dir-state-sub{font-size:0.82rem;color:var(--ivory-dim);line-height:1.6;max-width:380px;margin-top:0.4rem;} .dir-state-actions{display:flex;align-items:center;gap:0.6rem;margin-top:1.2rem;} /* Error toast — same shape as the shared toast, red surface */ .toast-notification.error{background:var(--red-soft);border-color:rgba(232,69,69,0.3);color:var(--red);} /* Info banner — one-shot dismissible call-to-action at the top of a content area */ .info-banner{display:flex;align-items:center;gap:1rem;padding:0.9rem 1.1rem;margin-bottom:1.5rem;border:1px solid var(--teal-glow);background:var(--teal-soft);border-radius:12px;box-shadow:var(--shadow-sm);} .info-banner-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0;border-radius:50%;background:var(--teal-soft);color:var(--teal);} .info-banner-icon svg{width:16px;height:16px;} .info-banner-body{flex:1;min-width:0;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;} .info-banner-text{font-family:var(--font-m);font-size:0.85rem;line-height:1.6;color:var(--ivory);} .info-banner-link{font-family:var(--font-rc);font-weight:600;font-size:0.6rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--teal);padding:0.4rem 0.9rem;border:1px solid var(--teal-glow);background:var(--teal-soft);border-radius:8px;transition:all 0.3s;white-space:nowrap;text-decoration:none;} .info-banner-link:hover{background:var(--teal);color:var(--void);} .info-banner-close{display:flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;border:none;background:none;color:var(--ivory-dim);cursor:pointer;border-radius:50%;transition:all 0.3s;} .info-banner-close svg{width:14px;height:14px;} .info-banner-close:hover{color:var(--ivory);background:var(--ivory-ghost);} /* ── Pre-hide [data-reveal] elements before GSAP runs ── */ [data-reveal]{opacity:0;} .sidebar.icon-only .nav-item{font-size:0;white-space:nowrap;padding:0.7rem 0;gap:0;transition:font-size 0.3s ease;} .sidebar.icon-only .nav-item svg{margin:0 auto;display:block;flex-shrink:0;transform:scale(1.2);transition:transform 0.3s ease;} .sidebar.icon-only .nav-item span{display:none;} .sidebar.icon-only .nav-item.active{color:var(--ivory);background:var(--ivory-ghost);border-left-color:var(--amber);} /* ── Phrasing Review: red = HR mistake, violet = employee signal ── */ .ws-phrasing-btn.active{color:var(--red);border-color:rgba(232,69,69,0.4);background:var(--red-soft);} .ws-flag{cursor:pointer;padding:0 1px;border-radius:2px;transition:filter 0.15s;} .ws-flag:hover{filter:brightness(1.15);} .ws-flag-hr{background:var(--red-soft);color:var(--red);outline:1px solid rgba(232,69,69,0.4);border-bottom:1px dashed var(--red);} .ws-flag-emp{background:var(--violet-soft);color:var(--violet);outline:1px solid rgba(123,79,255,0.4);border-bottom:1px dashed var(--violet);} .ws-flag-popover{position:fixed;z-index:999;max-width:320px;background:var(--ink);border:1px solid var(--border-lit);box-shadow:0 12px 32px rgba(0,0,0,0.4);padding:0.9rem 1rem 0.8rem;border-radius:8px;font-family:var(--font-lato);font-size:0.78rem;line-height:1.55;color:var(--ivory);} .ws-flag-popover .ws-fp-cat{font-family:var(--font-m);font-weight:700;font-size:0.55rem;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:0.45rem;} .ws-flag-popover.hr .ws-fp-cat{color:var(--red);} .ws-flag-popover.emp .ws-fp-cat{color:var(--violet);} .ws-flag-popover .ws-fp-issue{margin-bottom:0.55rem;color:var(--ivory);} .ws-flag-popover .ws-fp-suggest-label{font-family:var(--font-m);font-size:0.52rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--amber);margin-bottom:0.25rem;} .ws-flag-popover .ws-fp-suggest{background:var(--surface);border-left:2px solid var(--amber);padding:0.5rem 0.65rem;margin-bottom:0.5rem;font-style:italic;} .ws-flag-popover .ws-fp-why{color:var(--ivory-dim);font-size:0.7rem;} .ws-flag-popover .ws-fp-close{position:absolute;top:6px;right:9px;cursor:pointer;color:var(--ivory-faint);background:none;border:none;font-size:1rem;line-height:1;padding:2px;} .ws-flag-popover .ws-fp-close:hover{color:var(--ivory);} /* ── Conversation Workspace: coach-panel polish — humanized, evidence-led feel ── */ .ws-coach .wsx-section-title{text-shadow:none;background:linear-gradient(135deg,var(--ivory),var(--amber));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;} html[data-theme="light"] .ws-coach .wsx-section-title{background:linear-gradient(135deg,var(--violet),var(--amber));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;} .ws-coach .wsx-quote{font-style:italic;border-left-color:rgba(51,160,143,0.5);background:rgba(51,160,143,0.14);} .ws-coach .wsx-ev{color:var(--teal);} .ws-coach .wsx-conf{color:var(--ivory-dim);border-color:rgba(212,136,74,0.3);background:var(--amber-soft);} /* ═══════════════════════════════════════════════════════════════════ DICTATION PAGE (static/dictation.html) — main content area layout. Two-column AI Dictation workspace. Reuses existing design tokens. ═══════════════════════════════════════════════════════════════════ */ .dictation-page{min-height:100vh;background:var(--void);padding:2rem 1.5rem 3rem;} .dictation-main{width:100%;max-width:1120px;margin:0 auto;} /* ── Mode selector: segmented pill control ── */ .input-tabs{display:flex;gap:0.5rem;padding:0.4rem;background:var(--surface);border:1px solid var(--border);border-radius:12px;margin-bottom:0.7rem;} .input-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.75rem 0.6rem;font-family:var(--font-m);font-size:0.64rem;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;color:var(--ivory-faint);background:transparent;border:1px solid transparent;border-radius:9px;cursor:pointer;transition:all 0.3s var(--ease-out);white-space:nowrap;} .input-tab svg{width:15px;height:15px;opacity:0.65;flex-shrink:0;transition:all 0.3s;} .input-tab:hover{color:var(--ivory);background:var(--ivory-ghost);} .input-tab.active{color:var(--void);background:var(--violet);border-color:var(--violet);box-shadow:0 0 16px var(--violet-glow);} .input-tab.active svg{color:var(--void);opacity:1;} .input-tab:focus-visible{outline:2px solid var(--violet);outline-offset:-2px;} .input-tab-caption{font-family:var(--font-m);font-size:0.55rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ivory-faint);text-align:center;margin:0 0 1.4rem;} .input-tab-hint{font-family:var(--font-m);font-size:0.6rem;letter-spacing:0.02em;color:var(--ivory-faint);text-align:center;margin:-1.1rem 0 1.4rem;} /* ── Two-column grid ── */ .dictation-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem;align-items:stretch;} .dictation-left,.dictation-right{min-width:0;height:100%;} .dictation-left .tab-pane{height:100%;} /* ── LEFT: recording card ── */ .recording-area{ display:flex;flex-direction:column;align-items:center;gap:1.1rem;height:100%; background:var(--surface);border:1px solid var(--border);border-radius:14px; padding:1.6rem 1.4rem;box-shadow:var(--shadow-md); } .rec-status{display:flex;align-items:center;gap:0.5rem;font-family:var(--font-m);font-size:0.6rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ivory-faint);} .rec-status-dot{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px var(--teal-glow);flex-shrink:0;} .mic-btn{width:84px;height:84px;border-radius:50%;border:2px solid var(--border-lit);background:var(--ink);color:var(--violet);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s var(--ease-out);position:relative;box-shadow:var(--shadow-sm);} .mic-btn:hover{border-color:var(--violet);color:var(--violet);box-shadow:0 0 18px var(--violet-glow);} .mic-btn.recording{border-color:var(--red);color:var(--red);box-shadow:0 0 20px rgba(232,69,69,0.30);animation:micPulse 1.5s ease-in-out infinite;} .mic-btn svg{width:32px;height:32px;transition:transform 0.3s;} .mic-btn:hover svg{transform:scale(1.06);} @keyframes micPulse{ 0%,100%{box-shadow:0 0 20px rgba(232,69,69,0.30);} 50%{box-shadow:0 0 38px rgba(232,69,69,0.5);} } .timer{font-family:var(--font-m);font-size:2.05rem;font-weight:700;color:var(--ivory);letter-spacing:0.04em;} /* Live waveform: thin bars centered on a horizontal baseline, with soft purple/blue accent and a gentle falloff toward the edges. */ .waveform{position:relative;width:100%;height:64px;overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);} .wf-baseline{position:absolute;left:0;right:0;top:50%;height:1px;transform:translateY(-50%); background:linear-gradient(90deg,transparent,rgba(150,125,255,0.28),transparent);} .wf-bar{position:absolute;top:50%;width:3px;height:4px;transform:translateX(-50%) translateY(-50%); background:linear-gradient(180deg,rgba(96,130,255,0.05),var(--violet),rgba(120,140,255,0.05)); border-radius:2px;box-shadow:0 0 6px rgba(130,115,255,0.30); will-change:height;pointer-events:none;} /* small settings/info cards (Quality, Language, Auto Punctuation) */ .rec-settings{display:grid;grid-template-columns:repeat(3,1fr);gap:0.7rem;width:100%;margin-top:auto;} .rec-settings-card{background:var(--ink);border:1px solid var(--border);border-radius:10px;padding:0.85rem 0.6rem;text-align:center;} .rec-settings-card .rsc-label{font-family:var(--font-m);font-size:0.5rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--ivory-faint);margin-bottom:0.35rem;} .rec-settings-card .rsc-value{font-family:var(--font-b);font-size:0.85rem;font-weight:600;color:var(--ivory);} /* ── LEFT: upload card (Audio / Image / Text) ── */ .upload-card{display:flex;flex-direction:column;height:100%;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1.4rem;box-shadow:var(--shadow-md);} .dropzone{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.7rem;min-height:220px;padding:2rem 1.5rem;border:2px dashed var(--border);border-radius:10px;background:transparent;color:var(--ivory-faint);cursor:pointer;transition:border-color 0.3s,background 0.3s,box-shadow 0.3s;text-align:center;} .dropzone:hover{border-color:var(--violet);background:var(--violet-soft);box-shadow:0 0 16px var(--violet-glow);} .dropzone:hover .dz-title{color:var(--ivory);} .dropzone.drag-over{border-color:var(--violet);background:var(--violet-soft);box-shadow:0 0 18px var(--violet-glow);} .dropzone.drag-over .dz-title{color:var(--ivory);} .dropzone.success{border-color:var(--teal);background:var(--teal-soft);box-shadow:0 0 14px var(--teal-glow);} .dropzone.success .dz-title{color:var(--teal);} .dropzone.error{border-color:var(--red);background:var(--red-soft);box-shadow:0 0 14px var(--red-glow);} .dropzone.error .dz-title{color:var(--red);} .dropzone svg{width:34px;height:34px;opacity:0.7;} .dropzone .dz-title{font-family:var(--font-b);font-size:0.9rem;color:var(--ivory-dim);} .dropzone .dz-title span{color:var(--violet);} .dropzone .dz-subtitle{font-family:var(--font-m);font-size:0.55rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--ivory-faint);} .dropzone:focus-visible{outline:2px solid var(--violet);outline-offset:2px;} .file-meta{display:flex;align-items:center;justify-content:center;gap:0.6rem;margin-top:0.9rem;font-family:var(--font-m);font-size:0.6rem;} .file-meta .file-name{color:var(--ivory);font-weight:600;} .file-meta .file-size{color:var(--ivory-faint);} .upload-actions{display:flex;flex-direction:column;align-items:center;gap:0.7rem;margin-top:1.1rem;} .upload-actions .btn:disabled{opacity:0.4;cursor:default;} .status-text{font-family:var(--font-m);font-size:0.58rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--ivory-faint);} .status-text.status-success{color:var(--teal);} .status-text.status-error{color:var(--red);} /* ── RIGHT: transcript card ── */ .transcript-card{display:flex;flex-direction:column;height:100%;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-md);overflow:hidden;} .transcript-card-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.2rem;border-bottom:1px solid var(--border);} .transcript-card-title{font-family:var(--font-d);font-size:1.05rem;font-weight:600;color:var(--ivory);} .transcript-card-actions{display:flex;gap:0.5rem;} .tc-icon-btn{display:inline-flex;align-items:center;gap:0.4rem;padding:0.42rem 0.7rem;font-family:var(--font-m);font-size:0.6rem;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;color:var(--ivory-dim);background:var(--ink);border:1px solid var(--border);border-radius:7px;cursor:pointer;transition:all 0.3s;} .tc-icon-btn svg{width:13px;height:13px;} .tc-icon-btn:hover{color:var(--violet);border-color:var(--violet);box-shadow:0 0 12px var(--violet-glow);} .transcript-area{flex:1;width:100%;min-height:260px;background:var(--ink);border:none;border-radius:0;padding:1.2rem 1.3rem;font-family:var(--font-b);font-size:0.9rem;line-height:1.7;color:var(--ivory);resize:vertical;outline:none;transition:background 0.3s;} .transcript-area::placeholder{color:var(--ivory-faint);} .transcript-area:focus{background:var(--elevated);} .transcript-card-footer{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:0.9rem 1.2rem;border-top:1px solid var(--border);} .transcript-meta{font-family:var(--font-m);font-size:0.58rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--ivory-faint);margin-right:auto;} .transcript-lang-select{background:var(--ink);border:1px solid var(--border);border-radius:7px;color:var(--ivory);font-family:var(--font-m);font-size:0.72rem;padding:0.45rem 0.6rem;outline:none;cursor:pointer;} .transcript-save-row{display:flex;align-items:center;gap:0.6rem;} /* primary actions use the purple accent on this page */ .dictation-main .btn-primary{background:var(--violet);border-color:var(--violet);color:var(--void);} .dictation-main .btn-primary:hover{filter:brightness(1.12);box-shadow:0 4px 18px var(--violet-glow);} .dictation-main .btn:disabled{opacity:0.4;cursor:default;} .dictation-main .btn:disabled:hover{background:var(--violet);border-color:var(--violet);box-shadow:none;filter:none;} /* ── Tip row ── */ .dictation-tip{display:flex;align-items:center;gap:0.6rem;margin-top:1.3rem;padding:0.85rem 1rem;background:var(--violet-soft);border:1px solid rgba(123,79,255,0.25);border-radius:10px;font-family:var(--font-b);font-size:0.8rem;color:var(--ivory-dim);} .dictation-tip svg{width:16px;height:16px;color:var(--violet);flex-shrink:0;} /* ── Bottom feature strip ── */ .dictation-features{display:flex;justify-content:center;gap:2.5rem;flex-wrap:wrap;margin-top:1rem;padding-top:1.3rem;border-top:1px solid var(--border);} .dictation-feature{display:flex;align-items:center;gap:0.55rem;font-family:var(--font-m);font-size:0.62rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--ivory-dim);} .dictation-feature svg{width:16px;height:16px;color:var(--violet);} /* ── Responsive ── */ @media (max-width:1024px){ .dictation-grid{grid-template-columns:1fr;gap:1rem;} .dictation-main{max-width:640px;} .dictation-features{gap:1.4rem;} } /* ═══ DASHBOARD METRIC WIDGETS ═══ Compact, distinct visual widgets for the 4 top metric cards. Overrides the base .stat-card styles; JS-compatible classes preserved. */ .stats-row{gap:0.9rem;margin-bottom:1.8rem;} .stat-card{ background:var(--ink); border:1px solid var(--border); border-radius:14px; padding:1.5rem 1.15rem; min-height:152px; display:flex; align-items:center; gap:0.95rem; position:relative; overflow:hidden; box-shadow:var(--shadow-sm); transition:border-color .35s var(--ease-out), box-shadow .35s var(--ease-out), transform .35s var(--ease-out); } .stat-card::before{display:none;} .stat-card:hover{border-color:var(--border-lit);transform:translateY(-2px);} .stat-active{background:linear-gradient(165deg,rgba(123,79,255,0.12),var(--ink) 58%);} .stat-burnout{background:linear-gradient(165deg,rgba(232,69,69,0.11),var(--ink) 58%);} .stat-pending{background:linear-gradient(165deg,rgba(212,136,74,0.11),var(--ink) 58%);} .stat-wellness{background:linear-gradient(165deg,rgba(51,160,143,0.10),var(--ink) 58%);} .stat-body{display:flex;flex-direction:column;align-items:flex-start;min-width:0;} .stat-body-caption{justify-content:center;} .stat-card .stat-label{font-family:var(--font-m);font-weight:600;font-size:0.58rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--ivory-dim);margin-bottom:0.35rem;} .stat-card .stat-change{font-family:var(--font-rc);font-weight:600;font-size:0.6rem;margin-top:0.2rem;display:flex;align-items:center;gap:0.35rem;} .stat-card .stat-change.up{color:var(--teal);} .stat-card .stat-change.down{color:var(--red);} .stat-card .stat-value{font-family:var(--font-lato);font-weight:900;font-size:2rem;line-height:1;letter-spacing:-0.02em;background:linear-gradient(135deg,var(--ivory),var(--amber));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;} /* ── Card 1 · Active Employees — circular glowing person icon ── */ .stat-active .stat-ico{ width:52px;height:52px;border-radius:50%;flex-shrink:0; display:flex;align-items:center;justify-content:center; background:var(--violet-soft);border:1px solid rgba(123,79,255,0.32); color:var(--violet); box-shadow:0 0 0 6px rgba(123,79,255,0.05), 0 0 22px var(--violet-glow); } .stat-active .stat-ico svg{width:24px;height:24px;} .stat-active .stat-value{background:linear-gradient(135deg,var(--ivory),var(--violet));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;} /* ── Card 2 · High Burnout Risk — donut / ring with centered value ── */ .stat-ring{position:relative;width:74px;height:74px;flex-shrink:0;} .stat-ring svg{width:100%;height:100%;display:block;} .stat-ring .ring-track{fill:none;stroke:var(--border);stroke-width:5;} .stat-ring .ring-fill{fill:none;stroke:var(--red);stroke-width:5;stroke-linecap:round;stroke-dasharray:0 200;transform:rotate(-90deg);transform-origin:center;filter:drop-shadow(0 0 6px var(--red-glow));transition:stroke-dasharray 1.1s var(--ease-out);} .stat-ring-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;} .stat-ring-center .stat-value{font-size:1.45rem;background:none;-webkit-text-fill-color:var(--ivory);color:var(--ivory);} /* ── Card 3 · Pending Syncs — calendar tile with rotating sync badge ── */ .stat-pending .stat-ico{ position:relative;width:52px;height:52px;border-radius:12px;flex-shrink:0; display:flex;align-items:center;justify-content:center; background:var(--amber-soft);border:1px solid rgba(212,136,74,0.28);color:var(--amber); } .stat-pending .stat-ico svg{width:24px;height:24px;} .stat-pending .ico-sync{ position:absolute;top:-7px;right:-7px;width:21px;height:21px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:var(--ink);border:1px solid var(--border-lit);color:var(--amber); animation:statSync 3s var(--ease-out) infinite; } .stat-pending .ico-sync svg{width:11px;height:11px;} @keyframes statSync{ 0%{transform:rotate(-20deg);box-shadow:0 0 0 0 rgba(212,136,74,0.35);} 50%{box-shadow:0 0 12px 2px rgba(212,136,74,0.22);} 100%{transform:rotate(160deg);box-shadow:0 0 0 0 rgba(212,136,74,0);} } .stat-pending .stat-value{background:none;-webkit-text-fill-color:var(--ivory);color:var(--ivory);} /* ── Card 4 · Wellness Score — heart-shaped liquid meter ── */ .stat-heart{width:60px;height:56px;flex-shrink:0;} .stat-heart .heart-svg{width:100%;height:100%;display:block;overflow:visible;} .stat-heart .heart-track{fill:rgba(130,160,220,0.04);stroke:var(--border-lit);stroke-width:1.4;} .stat-heart .heart-liquid{transition:y .9s var(--ease-out), height .9s var(--ease-out);} .stat-heart .heart-wave{display:block;} .stat-heart.heart-red .heart-liquid{fill:var(--red);fill-opacity:0.82;} .stat-heart.heart-red .heart-wave{fill:var(--red);fill-opacity:0.5;} .stat-heart.heart-red {filter:drop-shadow(0 3px 12px var(--red-glow));} .stat-heart.heart-amber .heart-liquid{fill:var(--amber);fill-opacity:0.85;} .stat-heart.heart-amber .heart-wave{fill:var(--amber);fill-opacity:0.5;} .stat-heart.heart-amber {filter:drop-shadow(0 3px 12px var(--amber-glow));} .stat-heart.heart-teal .heart-liquid{fill:var(--teal);fill-opacity:0.85;} .stat-heart.heart-teal .heart-wave{fill:var(--teal);fill-opacity:0.5;} .stat-heart.heart-teal {filter:drop-shadow(0 3px 12px var(--teal-glow));} .stat-heart.heart-empty .heart-liquid{fill:var(--ivory-faint);fill-opacity:0.16;} .stat-heart.heart-empty .heart-wave{display:none;} .stat-heart.heart-empty {filter:none;} .stat-wellness .stat-value{background:none;-webkit-text-fill-color:var(--amber);color:var(--amber);text-shadow:0 0 18px var(--amber-glow);} /* Light theme adjustments for the metric widgets */ html[data-theme="light"] .stat-active .stat-value, html[data-theme="light"] .stat-ring-center .stat-value, html[data-theme="light"] .stat-pending .stat-value{background:none;-webkit-text-fill-color:var(--ivory);color:var(--ivory);} html[data-theme="light"] .stat-active .stat-value{-webkit-text-fill-color:#6A3FE0;color:#6A3FE0;} html[data-theme="light"] .stat-burnout{background:linear-gradient(165deg,rgba(211,54,54,0.09),#FFFFFF 58%);} html[data-theme="light"] .stat-active{background:linear-gradient(165deg,rgba(106,63,224,0.09),#FFFFFF 58%);} html[data-theme="light"] .stat-pending{background:linear-gradient(165deg,rgba(196,120,40,0.09),#FFFFFF 58%);} html[data-theme="light"] .stat-wellness{background:linear-gradient(165deg,rgba(31,133,116,0.08),#FFFFFF 58%);} html[data-theme="light"] .stat-wellness .stat-value{-webkit-text-fill-color:var(--amber);color:var(--amber);} html[data-theme="light"] .stat-heart .heart-track{stroke:rgba(20,30,60,0.2);} /* Shared layout contract: compact 480 / mobile 768 / tablet 1024 / desktop 1280. */ .main-content,.content-area,.card,.ws-grid > *,.dictation-grid > *{min-width:0;} .sidebar{height:100dvh;overflow-y:auto;} .table-wrap,.table-container{max-width:100%;overflow-x:auto;} .cookie-notice{position:relative;display:flex;align-items:center;gap:1rem;max-width:800px;margin:1.5rem auto 0;padding:1rem;background:var(--ink);border:1px solid var(--border-lit);border-radius:10px;font-size:.85rem;} .cookie-notice a{color:var(--amber);text-decoration:underline;} .cookie-notice button{width:auto;flex-shrink:0;} @media(max-width:1280px){ .stats-row{grid-template-columns:repeat(2,minmax(0,1fr));} .top-bar,.top-bar-left,.top-bar-right{flex-wrap:wrap;gap:.75rem;} } @media(max-width:1024px){ .form-row{grid-template-columns:minmax(0,1fr);} .sidebar,.sidebar.collapsed{width:80px;} .sidebar .nav-section,.sidebar .user-info{display:none;} .sidebar .sidebar-header,.sidebar .sidebar-footer{padding:1rem .5rem;justify-content:center;} .sidebar .sidebar-logo{font-size:0;justify-content:center;} .sidebar .nav-item{font-size:0;justify-content:center;padding:.85rem 0;gap:0;} .sidebar .nav-item svg{margin:0;} .sidebar ~ .main-content,.sidebar.collapsed ~ .main-content{margin-left:80px;} .sidebar .sidebar-logo-img{max-width:100%;height:auto;} } @media(max-width:768px){ .sidebar,.sidebar.icon-only,.sidebar.collapsed{width:56px;} .sidebar ~ .main-content,.sidebar.icon-only ~ .main-content,.sidebar.collapsed ~ .main-content{margin-left:56px;} .sidebar .nav-item{min-height:48px;} .content-area{padding:1.5rem 1rem;} .top-bar{padding:1rem;align-items:flex-start;} .top-bar-left,.top-bar-right{min-width:0;max-width:100%;} .welcome-title{font-size:1.5rem;overflow-wrap:anywhere;} .card-header,.dir-toolbar,.pagination-bar,.transcript-card-header{flex-wrap:wrap;gap:.75rem;} .dir-search,.ws-search{min-width:0;width:100%;} .ws-tabs,.input-tabs{max-width:100%;overflow-x:auto;} .ws-tab,.input-tab{flex-shrink:0;} .folder-grid{grid-template-columns:minmax(0,1fr);} .settings-content .st-fields{grid-template-columns:minmax(0,1fr);} .rec-settings{grid-template-columns:minmax(0,1fr);} .transcript-save-row{flex-wrap:wrap;} .auth-page,.legal-page{padding:1.5rem 1rem;} .auth-card,.legal-card{padding:1.5rem;} .cookie-notice{align-items:flex-start;flex-wrap:wrap;} .ws-line-actions{opacity:1;} } @media(max-width:480px){ .stats-row{grid-template-columns:minmax(0,1fr);} .content-area{padding:1rem .75rem;} .auth-card,.legal-card{padding:1.25rem;} .auth-title,.legal-card h1{font-size:1.5rem;} .ws-toolbar,.ws-audio{padding:.75rem;gap:.5rem;flex-wrap:wrap;} .ws-search{min-width:0;} .session-row,.plan-summary{flex-wrap:wrap;} .ui-confirm-actions > button{flex:1;} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;} }