/* Theme - Black base - "Darkish white" secondary (replaces prior blue) */ :root{ --bg:#050812; /* Unified panel tone (use the lighter of the two blues) */ --panel:#0B1430; --panel2:#0B1430; /* Shared box surfaces (cards/tables/kpis) */ --box:rgba(11,20,48,.78); --box2:rgba(11,20,48,.64); /* secondary / accent */ --accent:#E7EAF0; --accent2:#C9D0DB; --accentRgb:231,234,240; --border:rgba(var(--accentRgb),.14); --borderSoft:rgba(var(--accentRgb),.09); --text:#F3F4F6; --muted:rgba(243,244,246,.64); --danger:#EF4444; --ok:#22C55E; /* Typography scale (readable, clear hierarchy) */ --fs-body:15px; --fs-h2:30px; /* main section header */ --fs-sub:15px; /* section subtitle */ --fs-cardTitle:17px; /* card headers */ --fs-pfTitle:18px; /* preflight header */ --fs-small:13px; /* small helper text */ } *{box-sizing:border-box} /* Prevent layout shift when swapping tabs with different scroll heights. Always reserve scrollbar gutter so the centered tab bar never "jumps". (Some browsers attach scrolling to instead of , so set both. scrollbar-gutter keeps the reserved space consistent when supported.) */ html{height:100%; overflow-y:scroll; scrollbar-gutter:stable;} body{height:100%; overflow-y:scroll; scrollbar-gutter:stable;} body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,"SF Pro Display","SF Pro Text","Inter",Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji"; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; line-height:1.35; font-size:var(--fs-body); /* Base color; the actual gradient is drawn on a fixed pseudo-element below. This avoids long-page rendering glitches (banding/"shift") that can happen with background-attachment on some browsers. */ background: var(--bg); color:var(--text); position:relative; overflow-x:hidden; } /* Viewport-locked, smooth “Apple” gradient (consistent across ALL page lengths) */ body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0; background: radial-gradient(1400px 900px at 18% -12%, rgba(var(--accentRgb),.10), transparent 62%), radial-gradient(1100px 850px at 88% -8%, rgba(var(--accentRgb),.07), transparent 58%), radial-gradient(1200px 1000px at 60% 120%, rgba(var(--accentRgb),.06), transparent 62%), linear-gradient(180deg, #050812 0%, #040610 60%, #03040c 100%); background-repeat:no-repeat; } /* Subtle dithering/noise overlay to eliminate gradient banding */ body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:1; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); opacity:.055; mix-blend-mode:overlay; } .app{position:relative;z-index:2;} .app{min-height:100%;display:flex;} /* Sidebar should visually continue for the full scroll height on long pages. */ /* Sidebar is a fixed, stable left column. It should never “reflow” or change size across tabs/views. */ .sidebar{width:260px;flex:0 0 260px;background:linear-gradient(180deg, rgba(10,16,34,1), rgba(10,16,34,.92)); border-right:1px solid var(--border);padding:22px 16px;display:flex;flex-direction:column;gap:14px; min-height:100vh; font-size:var(--fs-body); } .brand{display:flex;align-items:center;gap:12px;padding:10px 12px;} .logo{width:44px;height:44px;border-radius:16px;background:rgba(var(--accentRgb),.08);border:1px solid var(--border); display:grid;place-items:center;box-shadow:0 18px 40px rgba(0,0,0,.45);} .brand h1{font-size:15px;margin:0;letter-spacing:.2px} .brand p{font-size:12.5px;margin:2px 0 0;color:var(--muted)} .nav{display:flex;flex-direction:column;gap:8px;padding:0 8px;} /* Sidebar bottom area: keeps Log Out pinned to the bottom-left of the left column */ .sidebarBottom{margin-top:auto;padding:0 8px 6px;display:flex;align-items:flex-start;} /* Move the existing fixed logout button into the sidebar without changing its look */ .sidebar .logoutFixed{position:fixed;left:16px;bottom:18px;z-index:9999;} /* Sidebar page switcher: larger, calmer, more "app-like" */ .nav button{all:unset;cursor:pointer;padding:13px 14px 13px 18px;border-radius:18px;display:flex;align-items:center;gap:10px;color:rgba(226,232,240,.86); transition:background .16s ease, border-color .16s ease, color .16s ease; position:relative; font-size:16.5px; font-weight:820; letter-spacing:-.01em; line-height:1.05; } /* Optimization summary: keep lines scannable (no single long paragraph). */ .optLine{margin:0 0 6px 0;} .optLine:last-child{margin-bottom:0;} .nav button:hover{background:rgba(255,255,255,.04);} .nav button::before{content:"";position:absolute;left:8px;top:10px;bottom:10px; width:3px;border-radius:999px;background:rgba(148,163,184,.22); opacity:0;transition:opacity .16s ease, background .16s ease, box-shadow .16s ease; } .nav button.active{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); color:rgba(248,250,252,.98); box-shadow:0 18px 45px rgba(0,0,0,.32); } .nav button.active::before{opacity:1;background:rgba(var(--accentRgb),.92);box-shadow:0 0 18px rgba(var(--accentRgb),.20);} .pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid var(--border); background:rgba(0,0,0,.18);color:#e2e8f0;font-size:12.5px;} /* Ensure sliders/checkboxes use the secondary “darkish white” instead of browser-default blue */ input[type="range"], input[type="checkbox"]{accent-color: var(--accent);} .foot{margin-top:auto;color:rgba(148,163,184,.8);font-size:12.5px;padding:10px 12px} /* Pull page chrome up so section titles sit at the very top (tight, Apple-like). */ .main{flex:1;padding:14px 22px 22px;} /* Remove the full-width “black header” strip. Keep exports available as a floating cluster instead of a bar. */ .topbar{position:static;background:transparent;border:none;padding:0;margin:0;min-height:0;} .toprow{max-width:1200px;margin:0 auto;display:flex;justify-content:flex-end;align-items:center;gap:14px;min-height:0;width:100%;} /* Global floating controls wrapper (prevents clipping and keeps buttons usable everywhere) */ #globalControls{position:fixed;inset:0;z-index:9998;pointer-events:none;} #globalControls *{pointer-events:auto;} /* Export buttons must stay pinned to the viewport (never scroll with the page). */ .exportCluster{position:static !important; top:auto; right:auto; z-index:auto;} /* Titles should start immediately under the topbar (no extra vertical drift). */ .content{max-width:1200px;margin:0 auto; padding-top:6px;} .grid{display:grid;grid-template-columns:1.35fr .65fr;gap:16px;} @media (max-width:980px){.sidebar{display:none}.grid{grid-template-columns:1fr}.main{padding:0 16px 22px;}} /* Unified card surface (all boxes share the same lighter blue tone) */ .card{background:linear-gradient(180deg, var(--box), var(--box2));border:1px solid var(--border);border-radius:22px; box-shadow:0 18px 45px rgba(0,0,0,.45);padding:18px; transition:transform .22s cubic-bezier(.2,.9,.2,1), box-shadow .22s cubic-bezier(.2,.9,.2,1), border-color .22s ease; } .card:hover{transform:translateY(-1px);border-color:rgba(var(--accentRgb),.20);box-shadow:0 22px 55px rgba(0,0,0,.48);} .card2{background:linear-gradient(180deg, var(--box), var(--box2));} /* Builder: cleaner, flatter, more “Apple” (less nested gradients). */ .builderStack{gap:14px;} .builderCard{padding:18px;} .builderCard:hover{transform:none;box-shadow:0 18px 45px rgba(0,0,0,.45);border-color:var(--border);} /* reduce hover drama */ .cardTitle{font-weight:850;color:var(--text);letter-spacing:-.01em;font-size:var(--fs-cardTitle);line-height:1.15} h2{margin:0 0 6px;font-size:var(--fs-h2);letter-spacing:-.35px;line-height:1.08;font-weight:950} .sub{margin:0;color:var(--muted);font-size:var(--fs-sub);line-height:1.35} .row{display:flex;gap:12px;align-items:center;flex-wrap:wrap} .sp{height:10px} /* Header rows with pinned titles (Results / Student Management) Keep the search control in its original spot while aligning the h2 to match Schedule Builder/Dashboard. */ .pinnedTitleRow{position:relative; min-height:56px;} .pinnedTitleRow .pinnedTitle{position:absolute; top:0; left:0;} .btn{border:1px solid var(--border);background:rgba(0,0,0,.16);color:var(--text);padding:10px 14px;border-radius:18px;cursor:pointer; font-weight:700;font-size:14.5px;transition:transform .22s cubic-bezier(.2,.9,.2,1), box-shadow .22s cubic-bezier(.2,.9,.2,1), background .22s ease, border-color .22s ease, opacity .22s ease; display:inline-flex;align-items:center;gap:10px;will-change:transform, box-shadow;} .btn:hover{background:rgba(255,255,255,.06);transform:translateY(-1.5px);} .btn:active{transform:translateY(0) scale(.985);} .btn.primary{background:linear-gradient(180deg, rgba(var(--accentRgb),1), rgba(var(--accentRgb),.86));border-color:rgba(var(--accentRgb),.55);color:#070A12; box-shadow:0 18px 45px rgba(0,0,0,.35), 0 0 0 rgba(var(--accentRgb),0); position:relative;overflow:hidden;} .btn.primary::before{content:"";position:absolute;inset:-40%; background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), transparent 55%); opacity:0;transition:opacity .22s ease;pointer-events:none;} .btn.primary:hover{background:linear-gradient(180deg, rgba(var(--accentRgb),1), rgba(var(--accentRgb),.92));box-shadow:0 18px 45px rgba(0,0,0,.35), 0 0 26px rgba(var(--accentRgb),.25);} .btn.primary:hover::before{opacity:1;} .btn:disabled{opacity:.55;cursor:not-allowed;transform:none;} /* Bottom-right switch/logout (Option A sign-in UX) */ .logoutFab{position:fixed;right:18px;bottom:18px;z-index:9999; border:1px solid rgba(255,255,255,.10); background:linear-gradient(180deg, rgba(12,18,38,.92), rgba(12,18,38,.70)); backdrop-filter: blur(22px) saturate(1.15); -webkit-backdrop-filter: blur(22px) saturate(1.15); color:var(--text); border-radius:18px; padding:10px 12px; box-shadow:0 18px 55px rgba(0,0,0,.55); display:flex;align-items:center;gap:10px; cursor:pointer; transition:transform .22s cubic-bezier(.2,.9,.2,1), box-shadow .22s cubic-bezier(.2,.9,.2,1), border-color .22s ease, background .22s ease; } .logoutFab:hover{transform:translateY(-2px);border-color:rgba(var(--accentRgb),.35);box-shadow:0 24px 70px rgba(0,0,0,.60), 0 0 26px rgba(var(--accentRgb),.18);} .logoutFab:active{transform:translateY(0) scale(.985);} .logoutFab .dot{width:10px;height:10px;border-radius:999px;background:rgba(var(--accentRgb),.95);box-shadow:0 0 18px rgba(var(--accentRgb),.35);} .logoutFab .meta{display:flex;flex-direction:column;line-height:1.1} .logoutFab .label{font-weight:750;font-size:13px;letter-spacing:.01em} .logoutFab .subLabel{margin-top:2px;font-size:12px;color:rgba(148,163,184,.88)} .logoutFab .title{font-weight:750;font-size:13px;letter-spacing:.01em} .logoutFab .sub{margin:0;color:rgba(148,163,184,.85);font-size:12px} /* Bottom-right logout: visually identical to the top-right export buttons */ .logoutFixed{position:fixed;left:16px;bottom:18px;z-index:9999;} .logoutFixed:hover{background:rgba(255,255,255,.05);box-shadow:0 12px 28px rgba(0,0,0,.30);} /* Export menu (calm, premium) */ .caret{opacity:.85;font-size:12px;margin-left:6px;} .menu{position:absolute;right:0;top:46px;min-width:180px;z-index:50; background:rgba(12,18,38,.96);border:1px solid rgba(255,255,255,.10); border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.45); padding:8px;backdrop-filter: blur(22px) saturate(1.15); -webkit-backdrop-filter: blur(22px) saturate(1.15); transform-origin:top right; animation:menuIn 140ms ease-out; } @keyframes menuIn{from{opacity:0;transform:translateY(-6px) scale(.98);}to{opacity:1;transform:translateY(0) scale(1);}} .menuItem{display:block;width:100%;text-align:left;border:1px solid transparent;background:transparent;color:var(--text); padding:10px 10px;border-radius:12px;cursor:pointer;font-weight:650;letter-spacing:.01em; } .menuItem:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.10);} .menuItem:active{background:rgba(255,255,255,.08);} /* Bold-but-premium action animations (no bounce) */ @keyframes sheenSlide{0%{transform:translateX(-140%);}100%{transform:translateX(140%);}} @keyframes glowPulse{0%,100%{box-shadow:0 18px 45px rgba(0,0,0,.35), 0 0 0 rgba(var(--accentRgb),0);}50%{box-shadow:0 18px 45px rgba(0,0,0,.35), 0 0 22px rgba(var(--accentRgb),.35);}} /* Generate schedule: subtle attention + animated sheen on hover/focus */ #btnRun{position:relative;overflow:hidden;will-change:transform, box-shadow;} #btnRun.ctaReady{animation:glowPulse 2.2s ease-in-out infinite;} #btnRun::after{content:"";position:absolute;inset:-40%;background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); transform:translateX(-140%);opacity:0;pointer-events:none;} #btnRun:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 18px 45px rgba(0,0,0,.35), 0 0 26px rgba(var(--accentRgb),.45);} #btnRun:not(:disabled):hover::after{opacity:1;animation:sheenSlide .85s ease-out 1;} #btnRun:not(:disabled):focus-visible{outline:none;box-shadow:0 18px 45px rgba(0,0,0,.35), 0 0 0 3px rgba(var(--accentRgb),.25), 0 0 28px rgba(var(--accentRgb),.45);} /* Export cluster: quieter grouping so exports don’t compete with the primary workflow */ .exportCluster{gap:10px;} .exportCluster .btn{background:rgba(0,0,0,.10);border-color:rgba(255,255,255,.09);box-shadow:none;} .exportCluster .btn:hover{background:rgba(255,255,255,.05);box-shadow:0 12px 28px rgba(0,0,0,.30);} .exportCluster .menuWrap .btn{padding-right:12px;} /* Top-right buttons: crisp hover spotlight + border emphasis */ #btnExportSchedules,#btnExportUnfulfilled,#btnExportSections{position:relative;overflow:hidden;} #btnExportSchedules::after,#btnExportUnfulfilled::after,#btnExportSections::after{content:"";position:absolute;inset:-60%; background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.12), transparent 55%); opacity:0;transition:opacity .18s ease;pointer-events:none;} #btnExportSchedules:hover,#btnExportUnfulfilled:hover,#btnExportSections:hover{transform:translateY(-2px); border-color:rgba(255,255,255,.18);box-shadow:0 14px 34px rgba(0,0,0,.35);} #btnExportSchedules:hover::after,#btnExportUnfulfilled:hover::after,#btnExportSections:hover::after{opacity:1;} /* Respect reduced motion */ @media (prefers-reduced-motion: reduce){ #btnRun:not(:disabled){animation:none;} #btnRun::after{display:none;} } input[type=file]{width:100%;padding:10px 12px;border-radius:18px;border:1px solid var(--border);background:rgba(0,0,0,.18);color:var(--text);} /* Run name input (history table) */ .runNameInput{ width:100%; min-width:220px; padding:10px 12px; border-radius:16px; border:1px solid rgba(255,255,255,.10); background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.18)); color:var(--text); outline:none; font-weight:800; letter-spacing:.2px; box-shadow: 0 10px 24px rgba(0,0,0,.25); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; } .runNameInput::placeholder{color:rgba(255,255,255,.35)} .runNameInput:focus{ border-color: rgba(var(--accentRgb), .55); box-shadow: 0 14px 34px rgba(0,0,0,.35), 0 0 0 4px rgba(var(--accentRgb), .14); transform: translateY(-1px); } select.select{ width:100%; padding:12px 12px; border-radius:18px; border:1px solid var(--border); background:rgba(0,0,0,.18); color:var(--text); font-weight:650; outline:none; } /* Inputs that reuse the .select class (e.g., optimization tuning number fields) */ input.select, textarea.select{ width:100%; padding:12px 12px; border-radius:18px; border:1px solid var(--border); background:rgba(0,0,0,.18); color:var(--text); font-weight:650; outline:none; } input.select:focus, textarea.select:focus{border-color:rgba(var(--accentRgb),.35);box-shadow:0 0 0 3px rgba(var(--accentRgb),.12);} select.select:focus{border-color:rgba(var(--accentRgb),.35);box-shadow:0 0 0 3px rgba(var(--accentRgb),.12);} /* Run history compare selects: timestamp-only, calmer + premium */ select.select.cmpSelect{color:rgba(var(--accentRgb),.92);font-weight:850;letter-spacing:.15px; background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(0,0,0,.12)); border:1px solid rgba(var(--accentRgb),.14);box-shadow:0 14px 35px rgba(0,0,0,.22);} select.select.cmpSelect:hover{border-color:rgba(var(--accentRgb),.22);} select.select.cmpSelect:focus{border-color:rgba(var(--accentRgb),.32);box-shadow:0 0 0 3px rgba(var(--accentRgb),.12), 0 16px 40px rgba(0,0,0,.24);} /* --- Premium file picker (Run) --- */ .fileNative{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none;} .filePicker{position:relative;display:flex;gap:12px;align-items:center;width:100%; padding:12px 12px;border-radius:20px;border:1px solid rgba(var(--accentRgb),.18); background:linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.14)); box-shadow:0 18px 45px rgba(0,0,0,.35); transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease; cursor:pointer; } /* Force nOS PDF/report links to remain blue (no visited purple). */ .nosPdfLink, .nosPdfLink:visited, a.constraint-link, a.constraint-link:visited{ color: #3b82f6; text-decoration: none; } .nosPdfLink:hover, a.constraint-link:hover{ text-decoration: underline; } .filePicker:hover{border-color:rgba(var(--accentRgb),.28);background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.12)); transform:translateY(-1px); box-shadow:0 22px 55px rgba(0,0,0,.42); } .filePicker:focus-within{border-color:rgba(var(--accentRgb),.36); box-shadow:0 22px 55px rgba(0,0,0,.42), 0 0 0 3px rgba(var(--accentRgb),.14);} .fileChoose{flex:0 0 auto; padding:10px 14px;border-radius:16px;border:1px solid rgba(var(--accentRgb),.22); background:rgba(var(--accentRgb),.92); color:#070A12; font-weight:850; } .fileChoose:hover{background:rgba(var(--accentRgb),1);} .fileMeta{min-width:0;display:flex;flex-direction:column;gap:4px} .fileName{font-weight:850;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .fileSub{color:rgba(148,163,184,.92);font-size:13px} .filePicker.hasFile .fileChoose{background:rgba(var(--accentRgb),.08); color:var(--text);} .filePicker.hasFile .fileChoose:hover{background:rgba(var(--accentRgb),.12);} .filePicker.hasFile{border-color:rgba(var(--accentRgb),.22);} .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px} @media (max-width:720px){.kpis{grid-template-columns:1fr;}} .kpi{padding:14px;border-radius:18px;border:1px solid var(--border);background:var(--box2);} .kpi .label{color:var(--muted);font-size:13px;font-weight:750} .kpi .value{font-size:22px;font-weight:800;margin-top:6px;letter-spacing:-.2px} .kpi .hint{color:rgba(148,163,184,.85);font-size:13px;margin-top:4px;line-height:1.35} .alert{border-radius:18px;padding:12px 14px;border:1px solid rgba(239,68,68,.35);background:rgba(239,68,68,.12);color:#fecaca;font-size:13px;display:none;margin-top:12px;white-space:pre-wrap;} .ok{border:1px solid rgba(34,197,94,.35);background:rgba(34,197,94,.12);color:#bbf7d0;} /* Tabs: pill switcher (calm, high-contrast, consistent across pages) */ .tabs{ position:relative; display:flex; justify-content:center; align-items:center; gap:6px; flex-wrap:wrap; margin-top:10px; padding:6px; border-radius:999px; border:1px solid rgba(255,255,255,.10); background:rgba(0,0,0,.14); box-shadow:0 18px 45px rgba(0,0,0,.22); } .tab{ background:transparent; border:none; padding:10px 14px; cursor:pointer; font-weight:850; font-size:15.5px; letter-spacing:-.01em; color:rgba(226,232,240,.80); position:relative; z-index:2; border-radius:999px; transition: color .14s ease; user-select:none; } .tab:hover{color:rgba(248,250,252,.92);} .tab:focus-visible{outline:2px solid rgba(var(--accentRgb), .55); outline-offset:4px;} .tab.active{color:rgba(8,10,18,.96);} /* Sliding pill behind the active tab */ .tabIndicator{ position:absolute; left:0; top:6px; bottom:6px; height:auto; width:24px; border-radius:999px; background:linear-gradient(180deg, rgba(var(--accentRgb), .96), rgba(var(--accentRgb), .82)); box-shadow: 0 18px 40px rgba(var(--accentRgb), .18); transform:translateX(0); transition: transform .22s cubic-bezier(.2,.9,.2,1), width .22s cubic-bezier(.2,.9,.2,1), opacity .18s ease; opacity:1; pointer-events:none; z-index:1; } @media (max-width: 640px){ .tabs{padding:6px;} .tab{font-size:14.5px; padding:9px 12px;} } .search{width:320px;max-width:100%;padding:10px 12px 10px 40px;border-radius:18px;border:1px solid var(--border);background:rgba(0,0,0,.18);color:var(--text);outline:none;font-size:14px;} .searchWrap{position:relative} .searchWrap svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);opacity:.8} .tableWrap{margin-top:12px;border-radius:18px;border:1px solid var(--border);overflow:hidden;background:var(--box2); /* Smooth, GPU-friendly transitions when tabs swap heavy content */ will-change: opacity, transform; transform: translateZ(0); contain: layout paint; transition: opacity .14s ease-out, transform .22s cubic-bezier(.18,.9,.22,1); } /* Results tab swap: fade out old panel then fade in the next (avoids “laggy” feel) */ .tableWrap.tabSwapOut{opacity:0; transform: translateY(4px) translateZ(0); pointer-events:none;} .tableWrap.tabSwapIn{opacity:1; transform: translateY(0) translateZ(0);} /* Simulations card participates in the same motion language */ #simCard{will-change: opacity, transform; transform: translateZ(0); transition: opacity .14s ease-out, transform .22s cubic-bezier(.18,.9,.22,1); } #simCard.tabSwapOut{opacity:0; transform: translateY(4px) translateZ(0); pointer-events:none;} #simCard.tabSwapIn{opacity:1; transform: translateY(0) translateZ(0);} /* Balance report (Sections) participates in the same motion language */ #balanceReportCard{will-change: opacity, transform; transform: translateZ(0); transition: opacity .14s ease-out, transform .22s cubic-bezier(.18,.9,.22,1); } #balanceReportCard.tabSwapOut{opacity:0; transform: translateY(4px) translateZ(0); pointer-events:none;} #balanceReportCard.tabSwapIn{opacity:1; transform: translateY(0) translateZ(0);} table{border-collapse:collapse;width:100%;font-size:13px} thead{background:var(--box);position:sticky;top:0} tbody tr.sel{outline:2px solid rgba(245,245,245,.35); background: rgba(255,255,255,.04);} th,td{padding:10px 12px;border-bottom:1px solid var(--borderSoft);text-align:left;white-space:nowrap} /* Sortable table headers (Results) */ th.sortTh{padding:0;} .thBtn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px; padding:10px 12px;background:transparent;border:0;color:rgba(226,232,240,.96);font:inherit;letter-spacing:.1px; cursor:pointer;user-select:none;} .thBtn:hover{background:rgba(255,255,255,.03);} .thBtn:active{background:rgba(255,255,255,.05);} .thBtn:focus{outline:none;box-shadow:0 0 0 2px rgba(var(--accentRgb),.18) inset;} .thLbl{font-weight:800;font-size:12.5px;} .thIco{font-size:11px;opacity:.55;transform:translateY(-.5px);} th.sortTh.isSorted .thIco{opacity:.95;color:rgba(var(--accentRgb),.92);} th.sortTh.isSorted .thLbl{color:rgba(var(--accentRgb),.95);} tbody tr:hover{background:rgba(255,255,255,.04);} .scroll{max-height:560px;overflow:auto;} .hintbox{color:rgba(148,163,184,.95);font-size:13px;line-height:1.5} /* Template download (Run page) */ .templateCard{padding:0; overflow:hidden;} .templateInner{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 16px;} .templateLeft{min-width:0} .templateEyebrow{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(148,163,184,.9); font-weight:800;} .templateTitle{margin-top:4px; font-weight:900; font-size:14px; color:rgba(226,232,240,1)} .templateDesc{margin-top:6px; font-size:13px; color:rgba(148,163,184,.95); max-width:56ch} .templateBtn{position:relative; display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:14px; border:1px solid var(--borderSoft); background:rgba(0,0,0,.14); box-shadow:0 10px 26px rgba(0,0,0,.20); color:rgba(226,232,240,1); transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease;} .templateBtn .dlIco{opacity:.95} .templateBtn::after{content:""; position:absolute; inset:-1px; border-radius:14px; pointer-events:none; opacity:0;} .templateBtn:hover{transform:translateY(-1px); background:rgba(255,255,255,.04); border-color:rgba(var(--accentRgb),.22); box-shadow:0 14px 34px rgba(0,0,0,.26);} .templateBtn:hover::after{opacity:1} .templateBtn:active{transform:translateY(0px); box-shadow:0 12px 28px rgba(0,0,0,.24);} @media (max-width:640px){ .templateInner{flex-direction:column; align-items:stretch} .templateBtn{justify-content:center} .templateDesc{max-width:none} } .code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;background:rgba(0,0,0,.22); border:1px solid var(--borderSoft);padding:2px 8px;border-radius:999px;color:#e2e8f0;font-size:12px;} .muted{color:var(--muted)} .overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(2px);z-index:50} .drawer{position:fixed;top:0;right:0;height:100%;width:420px;max-width:92vw;background:linear-gradient(180deg, rgba(11,20,48,.98), rgba(10,16,34,.95)); border-left:1px solid var(--border);box-shadow:-18px 0 50px rgba(0,0,0,.55);z-index:60;display:flex;flex-direction:column} .drawerHeader{padding:16px 16px 12px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;border-bottom:1px solid var(--borderSoft)} .drawerTools{padding:12px 16px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid var(--borderSoft)} .thread{padding:14px 16px;overflow:auto;flex:1;display:flex;flex-direction:column;gap:10px} .msg{border:1px solid var(--borderSoft);background:rgba(0,0,0,.16);border-radius:18px;padding:10px 12px;font-size:13px;line-height:1.5;white-space:pre-wrap} .msg.user{background:rgba(var(--accentRgb),.08);border-color:rgba(var(--accentRgb),.22)} .msg.assistant{background:rgba(0,0,0,.18)} .msg .tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:rgba(148,163,184,.95);margin-bottom:6px} .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px} .chip{cursor:pointer;border:1px solid var(--border);background:rgba(0,0,0,.14);color:#e2e8f0;border-radius:999px;padding:6px 10px;font-size:12px} .chip:hover{background:rgba(255,255,255,.05)} .chip.active{background:rgba(var(--accentRgb),.14);border-color:rgba(var(--accentRgb),.38);color:rgba(255,255,255,.98)} .chip.active:hover{background:rgba(var(--accentRgb),.18)} .optSection{margin-top:12px;padding:12px 14px;border:1px solid var(--borderSoft);border-radius:16px;background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));box-shadow: 0 10px 26px rgba(0,0,0,.25);} .optTitle{font-weight:900;color:var(--accent);font-size:13px;letter-spacing:.2px} .optHint{font-size:12px;margin-top:3px} .optChips{margin-top:10px} .composer{padding:12px 16px;border-top:1px solid var(--borderSoft);display:flex;gap:10px;align-items:flex-end} .composer textarea{flex:1;resize:none;border-radius:18px;border:1px solid var(--border);background:rgba(0,0,0,.18);color:var(--text);padding:10px 12px;outline:none;font-size:13px;min-height:44px;max-height:120px} .drawerFoot{padding:10px 16px 14px;border-top:1px solid rgba(var(--accentRgb),.06);font-size:12px} /* Student Drawer */ .studentDrawer{position:fixed;top:0;right:0;height:100%;width:min(75vw, 1100px);max-width:96vw; background:linear-gradient(180deg, rgba(11,20,48,.98), rgba(10,16,34,.96)); border-left:1px solid var(--border);box-shadow:-20px 0 60px rgba(0,0,0,.60);z-index:65;display:flex;flex-direction:column} .studentHeader{padding:20px 20px 14px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;border-bottom:1px solid var(--borderSoft)} .studentBody{padding:18px 20px;overflow:auto;flex:1;display:flex;flex-direction:column;gap:14px} @media (max-width:860px){ .studentDrawer{width:96vw;} } .miniGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px} @media (max-width:520px){.miniGrid{grid-template-columns:1fr}} .mini{border:1px solid var(--borderSoft);background:rgba(0,0,0,.16);border-radius:18px;padding:10px 12px} .mini .k{color:var(--muted);font-size:12px} .mini .v{font-weight:800;font-size:16px;margin-top:6px} .schedGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} @media (max-width:760px){.schedGrid{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){.schedGrid{grid-template-columns:1fr}} .blockCard{border:1px solid var(--borderSoft);background:rgba(0,0,0,.16);border-radius:18px;padding:10px 12px;min-height:64px} .blockCard .b{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:rgba(148,163,184,.95)} .blockCard .c{margin-top:6px;font-weight:800;font-size:14px} .list{border:1px solid var(--borderSoft);background:rgba(0,0,0,.14);border-radius:18px;padding:10px 12px} .list h3{margin:0 0 10px;font-size:14.5px;color:rgba(var(--accentRgb),.96);letter-spacing:-.12px;font-weight:900;line-height:1.15} .list .item{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid rgba(var(--accentRgb),.08);font-size:13px} .list .item:first-of-type{border-top:none;padding-top:0} .badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;border:1px solid var(--border);background:rgba(0,0,0,.18);font-size:12px;color:#e2e8f0} /* Student management upgrades */ .mini .v small{font-size:12px;font-weight:750;color:rgba(148,163,184,.9);margin-left:6px} .mini .v.ok{color:var(--ok)} .mini .v.bad{color:rgba(239,68,68,.95)} .toggleRow.slim{padding:10px 12px;border-radius:18px;border:1px solid var(--borderSoft);background:rgba(0,0,0,.14)} .sandboxPreview{border:1px solid rgba(var(--accentRgb),.12);background:rgba(0,0,0,.16);border-radius:18px;padding:10px 12px;margin-bottom:10px} .sandboxPreview .title{font-weight:900;font-size:13px;letter-spacing:.15px} .sandboxPreview .muted{font-size:12px;margin-top:6px} .sandboxBar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px} .sandboxBar .btn{padding:9px 12px;border-radius:16px;font-size:13px} /* Safe options (Student Mgmt → Sandbox): clean, readable, non-stacking actions */ .safeOpts{display:flex;flex-direction:column;gap:10px} .safeOptRow{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:flex-start; padding:12px 12px;border-radius:18px; border:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.12); box-shadow:0 10px 26px rgba(0,0,0,.25); transition:transform .18s cubic-bezier(.2,.9,.2,1), border-color .18s ease, background .18s ease; } .safeOptRow:hover{transform:translateY(-1px);border-color:rgba(var(--accentRgb),.18);background:rgba(0,0,0,.14)} .safeOptRow .optTitle{font-weight:850;font-size:13px;letter-spacing:.1px;color:rgba(241,245,249,.94)} .safeOptRow .optDetail{margin-top:5px;font-size:12.5px;line-height:1.35;color:rgba(148,163,184,.92)} .safeOptRow .optBtn{white-space:nowrap;align-self:center} @media (max-width:720px){ .safeOptRow{grid-template-columns:1fr;} .safeOptRow .optBtn{justify-self:stretch;width:100%;} } /* Prevent the fixed logout button from colliding with Sandbox preview/commit controls */ body.inStudentSandbox .logoutFab, body.inStudentSandbox .logoutFixed{position:fixed;left:16px;bottom:18px;z-index:9999;} @media (max-width:980px){ body.inStudentSandbox .logoutFab, body.inStudentSandbox .logoutFixed{position:fixed;left:16px;bottom:18px;z-index:9999;} } /* Preflight severity */ .sev{display:inline-flex;align-items:center;gap:8px} .sevDot{width:10px;height:10px;border-radius:999px;display:inline-block;box-shadow:0 0 0 1px rgba(255,255,255,.08) inset} .sevFatal{background:rgba(239,68,68,.95)} .sevWarn{background:rgba(245,158,11,.95)} /* Preflight (clean UI) */ .pfCard .pfHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px} .pfTitle{font-weight:950;letter-spacing:-.25px;font-size:var(--fs-pfTitle);line-height:1.15} .pfNote{color:var(--muted);font-size:14px;margin-top:4px;line-height:1.4} /* Text-only section toggles (no chevrons/icons) */ .textToggleBtn{border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.10);color:rgba(226,232,240,.92); border-radius:12px;padding:7px 10px;font-weight:850;font-size:12px;cursor:pointer;line-height:1;} .textToggleBtn:hover{background:rgba(255,255,255,.04)} /* Preflight: status first, details second (text-only, always visible) */ .pfPlainBox{ max-width:760px; width:100%; border:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.10)); border-radius:16px; padding:16px 16px 14px 16px; box-shadow:0 18px 45px rgba(0,0,0,.22); } .pfPlainHeader{font-weight:950;letter-spacing:-.28px;font-size:16.5px;margin-bottom:12px;padding:2px 0;line-height:1.2} .pfPlainGroup{margin-top:12px} .pfPlainGroup:first-of-type{margin-top:0} .pfPlainGroupHead{display:flex;align-items:baseline;justify-content:space-between;gap:10px} .pfPlainGroupTitle{font-weight:900;font-size:14px;letter-spacing:-.12px} .pfPlainGroupMeta{color:rgba(148,163,184,.92);font-size:13px;font-weight:850;white-space:nowrap} /* Subtle section contrast (urgent is slightly warmer/darker) */ .pfPlainGroup{border-radius:14px;padding:10px 10px 10px 10px} /* Urgent fixes should not rely on background contrast; hierarchy is communicated via text + spacing */ .pfPlainGroupUrgent{background:transparent} /* More readable bullets (still calm + minimal) */ .pfPlainIssueList{list-style:none;margin:8px 0 0 0;padding-left:0} .pfPlainIssue{margin-top:12px} .pfPlainIssueTitle{font-weight:900;font-size:14px;letter-spacing:-.12px} .pfPlainIssueSummary{margin-top:4px;color:rgba(226,232,240,.90);font-size:13.5px;line-height:1.5} .pfPlainIssueItems{margin:10px 0 0 0;padding-left:16px;list-style:disc;color:rgba(148,163,184,.90);font-size:12.75px;line-height:1.7} .pfPlainIssueItems li{margin:4px 0} .pfDetails{margin-top:10px;border:1px solid rgba(148,163,184,.20);border-radius:12px;padding:8px 10px;background:rgba(15,23,42,.35)} .pfDetailsSummary{cursor:pointer;list-style:none;font-size:12.5px;color:rgba(148,163,184,.95);font-weight:700} .pfDetailsSummary::-webkit-details-marker{display:none} .pfDetails[open] .pfDetailsSummary{color:rgba(226,232,240,.92)} .pfDetailsBody{margin-top:8px;max-height:240px;overflow:auto;padding-right:6px} .pfControls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0 12px 0;} .pfChips{display:inline-flex;gap:8px;flex-wrap:wrap;} .pfChip{border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.12);color:rgba(226,232,240,.92); border-radius:999px;padding:6px 10px;font-weight:800;font-size:12px;cursor:pointer;line-height:1;} .pfChip[aria-selected="true"], .pfChip.on{border-color:rgba(var(--accentRgb),.35);background:rgba(var(--accentRgb),.12);} .pfChip.off{border-color:rgba(148,163,184,.18);background:rgba(0,0,0,.10);color:rgba(148,163,184,.92)} .pfSearchWrap{flex:1;display:flex;justify-content:flex-end;} .pfSearch{width:min(260px,100%);border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.12); color:rgba(241,245,249,.92);border-radius:12px;padding:7px 10px;font-size:12.5px;font-weight:750;outline:none;} .pfSearch::placeholder{color:rgba(148,163,184,.70)} .pfSearch:focus{border-color:rgba(var(--accentRgb),.40);box-shadow:0 0 0 3px rgba(var(--accentRgb),.10)} .pfCat{margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.06);} .pfCat:first-child{border-top:none;padding-top:0;margin-top:0;} .pfCatHead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px;} .pfCatTitle{font-weight:900;font-size:13px;letter-spacing:-.12px;color:rgba(226,232,240,.94);} .pfCatMeta{color:rgba(148,163,184,.92);font-size:12px;font-weight:850;white-space:nowrap;} .pfPlainFooter{margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.06); color:rgba(148,163,184,.80);font-size:13px;line-height:1.45} /* Preflight: compact status summary (one panel, two rows) */ .pfCompact{border:1px solid rgba(var(--accentRgb),.12); background:linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.12)); border-radius:20px;padding:12px 12px; box-shadow:0 18px 45px rgba(0,0,0,.28); } .pfCompactHeader{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 2px 10px 2px} .pfCompactTitle{font-weight:900;letter-spacing:-.2px} .pfCompactState{display:inline-flex;align-items:center;gap:8px;color:rgba(241,245,249,.92);font-weight:850;font-size:13px; padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.14); } .pfCompactCounts{color:rgba(148,163,184,.95);font-size:13px;font-weight:800;white-space:nowrap} .pfStateIcon{font-size:13px;line-height:1;display:inline-block} .pfRow{border-top:1px solid rgba(255,255,255,.06);padding-top:10px;margin-top:10px} .pfRowTop{display:flex;align-items:center;justify-content:space-between;gap:10px} .pfRowLabel{display:inline-flex;align-items:center;gap:8px;font-size:13px} .pfRowMeta{color:rgba(148,163,184,.95);font-size:13px;font-weight:800;white-space:nowrap} .pfRowBody{margin-top:10px;display:flex;flex-direction:column;gap:8px} .pfRowToggle{border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.12);color:rgba(226,232,240,.92); border-radius:14px;padding:6px 10px;cursor:pointer;display:inline-flex;align-items:center;gap:6px } .pfRowToggle:hover{background:rgba(255,255,255,.04)} .pfRowToggle .chev{display:inline-block;transform:translateY(-1px)} /* Items inside the compact rows */ .pfMiniItem{border:1px solid rgba(var(--accentRgb),.08);background:rgba(0,0,0,.16);border-radius:16px;padding:10px 12px} .pfMiniTop{display:flex;align-items:flex-start;justify-content:space-between;gap:10px} .pfMiniTitle{font-weight:850;font-size:13px} .pfMiniDetail{color:rgba(148,163,184,.92);font-size:12px;line-height:1.45;margin-top:6px} /* --- Preflight: visual spine (confidence + next-step) --- */ .pfStatus{display:flex;align-items:center;justify-content:space-between;gap:14px; border:1px solid rgba(var(--accentRgb),.12); background:linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.12)); border-radius:20px;padding:14px 14px;margin:4px 0 10px; box-shadow:0 18px 45px rgba(0,0,0,.28); } .pfStatusLeft{display:flex;align-items:center;gap:12px;min-width:0} .pfStatusText{min-width:0} .pfStatusTitle{font-weight:950;letter-spacing:-.25px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pfStatusSub{margin-top:4px;color:rgba(148,163,184,.92);font-size:12px;line-height:1.35} .pfStatusRight{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:0 0 auto} .pfStatusMetaLabel{color:rgba(148,163,184,.88);font-size:11px;letter-spacing:.10em;text-transform:uppercase;font-weight:850} .pfStatusMeta{font-weight:950;font-size:18px;letter-spacing:-.25px} .pfRing{width:44px;height:44px;display:grid;place-items:center;flex:0 0 auto} .pfRing svg{width:44px;height:44px;display:block} .pfRingTrack{fill:none;stroke:rgba(255,255,255,.08);stroke-width:4} .pfRingProg{fill:none;stroke:rgba(var(--accentRgb),.92);stroke-width:4;stroke-linecap:round; transform:rotate(-90deg);transform-origin:50% 50%; filter:drop-shadow(0 0 10px rgba(var(--accentRgb),.18)); } .pfKpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:6px 0 14px} @media (max-width:720px){.pfKpis{grid-template-columns:1fr;}} .pfKpi{border:1px solid var(--borderSoft);background:rgba(0,0,0,.16);border-radius:18px;padding:10px 12px;min-height:64px;display:flex;flex-direction:column;justify-content:center} .pfKpiMain{font-weight:850;font-size:14px} .pfKpiHint{margin-top:6px;color:rgba(148,163,184,.92);font-size:12px} .pfCtaRow{display:flex;justify-content:flex-end;margin-top:12px} #btnPreflightContinue{min-width:180px} #btnPreflightContinue:not(:disabled){animation:glowPulse 2.6s ease-in-out infinite;} .pfFindings{margin-top:10px;border:1px solid var(--borderSoft);background:rgba(0,0,0,.14);border-radius:18px;padding:12px} .pfFindingsHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px} .pfItems{display:flex;flex-direction:column;gap:8px; max-height:260px; overflow:auto; padding-right:4px; } .pfFinding{border:1px solid rgba(var(--accentRgb),.08);background:rgba(0,0,0,.16);border-radius:16px;padding:10px 12px;transition:background 180ms ease, border-color 180ms ease, transform 180ms ease} .pfFinding:hover{background:rgba(255,255,255,.04);border-color:rgba(var(--accentRgb),.14);transform:translateY(-1px)} .pfFindingTop{display:flex;align-items:center;justify-content:space-between;gap:10px} .pfFindingTitle{font-weight:800;font-size:13px} .pfFindingDetail{color:rgba(148,163,184,.92);font-size:12px;line-height:1.45;margin-top:6px} .pfTag{display:inline-flex;align-items:center;gap:8px;padding:4px 10px;border-radius:999px;border:1px solid var(--borderSoft);background:rgba(0,0,0,.18);font-size:12px;color:#e2e8f0} .pfSideTitle{font-weight:850;color:var(--accent)} .pfSideList{margin-top:12px;display:flex;flex-direction:column;gap:10px} .pfSideItem{border:1px solid rgba(var(--accentRgb),.08);background:rgba(0,0,0,.14);border-radius:18px;padding:10px 12px} /* Preflight micro-animations */ .pfItemEnter{animation:nosFadeInUp 220ms ease-out both;} .pfKpiPulse{animation:nosFadeInUp 180ms ease-out both;} /* Importer & Validator (under Preflight report) */ .pfImporter{margin-top:12px;border:1px solid rgba(var(--accentRgb),.10);background:rgba(0,0,0,.14);border-radius:18px;padding:12px;overflow:hidden} .pfImpTop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .pfImpTitle{font-weight:900;letter-spacing:-.2px} .pfImpNote{color:var(--muted);font-size:12px;margin-top:4px;line-height:1.35} .pfImpBody{margin-top:10px;border-top:1px solid rgba(255,255,255,.06);padding-top:10px} .pfImpUploadRow{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .pfImpMeta{color:rgba(148,163,184,.92);font-size:12px} .pfImpProgress{margin-top:10px} .pfImpBar{height:10px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.16);overflow:hidden} .pfImpBarFill{height:100%;width:0%;background:rgba(var(--accentRgb),.55);box-shadow:0 0 24px rgba(var(--accentRgb),.25)} .pfImpResults{margin-top:10px;border:1px solid rgba(var(--accentRgb),.10);background:rgba(0,0,0,.16);border-radius:16px;padding:10px} .pfImpResultsHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px} .pfImpItems{display:flex;flex-direction:column;gap:8px} .pfImpRow{display:flex;align-items:flex-start;gap:10px;border:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.14);border-radius:14px;padding:10px} .pfImpIcon{width:18px;height:18px;border-radius:999px;flex:0 0 auto;margin-top:1px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900} .pfImpIcon.ok{background:rgba(34,197,94,.18);border:1px solid rgba(34,197,94,.25);color:rgba(34,197,94,.95)} .pfImpIcon.bad{background:rgba(239,68,68,.16);border:1px solid rgba(239,68,68,.25);color:rgba(239,68,68,.95)} .pfImpTxt{flex:1} .pfImpRowTitle{font-weight:850;font-size:13px} .pfImpRowDetail{color:rgba(148,163,184,.92);font-size:12px;line-height:1.35;margin-top:4px} .pfImpDetected{border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.10);border-radius:14px;padding:10px;margin-bottom:10px} .pfChips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px} .pfChip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:750;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.12)} .pfChip.on{border-color:rgba(16,185,129,.35);background:rgba(16,185,129,.10)} .pfChip.off{border-color:rgba(148,163,184,.18);background:rgba(0,0,0,.10);color:rgba(148,163,184,.92)} .pfImpActions{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap} .pfImpEnter{animation:nosFadeInUp 220ms ease-out both;} /* Algorithmic Data Cleaner (compact, premium) */ .pfCleaner{border:1px solid rgba(var(--accentRgb),.10);background:rgba(0,0,0,.14);border-radius:18px;padding:12px;overflow:hidden} .pfClSteps{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px} .pfClStep{font-size:12px;color:rgba(148,163,184,.92);padding:6px 10px;border-radius:999px;border:1px solid var(--borderSoft); background:rgba(0,0,0,.14);transition: background 180ms ease-out, border-color 180ms ease-out, color 180ms ease-out, transform 180ms ease-out, opacity 180ms ease-out;} .pfClStep.active{color:rgba(var(--accentRgb),.98);border-color:rgba(var(--accentRgb),.30);background:rgba(var(--accentRgb),.08);transform:translateY(-1px);} .pfClStep.done{color:rgba(243,244,246,.9);border-color:rgba(var(--accentRgb),.20);background:rgba(0,0,0,.18);opacity:.92;} .pfClOutcome{margin-top:10px;border:1px solid rgba(var(--accentRgb),.10);background:rgba(0,0,0,.16);border-radius:16px;padding:10px} .pfClOutcomeHead{font-weight:900} .pfClReport{border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.12);border-radius:16px;padding:10px} .pfClReport summary{cursor:pointer;font-weight:850;font-size:13px;outline:none} .pfClReportBody{margin-top:10px;color:rgba(226,232,240,.92);font-size:12px;line-height:1.45} .pfClReportBody ul{margin:8px 0 0 18px} .pfClReportBody li{margin:6px 0} /* --- Micro-animations (calm / premium) --- */ @keyframes nosFadeInUp { from { opacity:0; transform: translateY(6px);} to {opacity:1; transform: translateY(0);} } @keyframes nosFadeIn { from { opacity:0;} to {opacity:1;} } @keyframes nosFadeOut { from { opacity:1;} to {opacity:0;} } @keyframes nosSlideInRight { from { opacity:0; transform: translateX(14px);} to {opacity:1; transform: translateX(0);} } @keyframes nosSlideOutRight { from { opacity:1; transform: translateX(0);} to {opacity:0; transform: translateX(14px);} } @keyframes nosRowIn { from { opacity:0; transform: translateY(4px);} to {opacity:1; transform: translateY(0);} } @keyframes nosHighlight { 0%{ background: rgba(var(--accentRgb), .14);} 100%{ background: rgba(0,0,0,.16);} } @keyframes nosPillPulse { 0%{ opacity: .85;} 100%{ opacity: 1;} } .viewEnter { animation: nosFadeInUp 220ms ease-out both; } .panelEnter { animation: nosFadeInUp 200ms ease-out both; } .pillPulse { animation: nosPillPulse 180ms ease-out both; } /* Overlay + drawer motion (Student drawer) */ .overlayEnter{animation:nosFadeIn 160ms ease-out both;} .overlayExit{animation:nosFadeOut 160ms ease-out both;} .drawerEnter{animation:nosSlideInRight 220ms cubic-bezier(.18,.9,.22,1) both;} .drawerExit{animation:nosSlideOutRight 180ms ease-in both;} /* Table/list row reveal (staggered via --i) */ .rowsEnter tr{animation:nosRowIn 180ms ease-out both; animation-delay: calc(var(--i, 0) * 18ms);} @media (prefers-reduced-motion: reduce){ .viewEnter,.panelEnter,.pillPulse,.overlayEnter,.overlayExit,.drawerEnter,.drawerExit{animation:none !important;} .rowsEnter tr{animation:none !important;} .tab,.btn,.filePicker,.kpi,.card{transition:none !important;} } /* Progress steps */ .runProgress{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px} .runStep{font-size:13px;color:rgba(148,163,184,.92);padding:6px 10px;border-radius:999px;border:1px solid var(--borderSoft); background:rgba(0,0,0,.14);transition: background 180ms ease-out, border-color 180ms ease-out, color 180ms ease-out, transform 180ms ease-out, opacity 180ms ease-out;} .runStep.active{color:rgba(var(--accentRgb),.98);border-color:rgba(var(--accentRgb),.30);background:rgba(var(--accentRgb),.08);transform:translateY(-1px);} .runStep.done{color:rgba(243,244,246,.9);border-color:rgba(var(--accentRgb),.20);background:rgba(0,0,0,.18);opacity:.92;} /* While generating, animate highlight across phases. This is independent of JS execution so it still looks great even when scheduling is CPU-heavy on the main thread. */ .runProgress.running .runStep{opacity:.86;transform:none;} .runProgress.running .runStep[data-step="allocation"]{animation:nosRunPhase 1.28s ease-in-out infinite;animation-delay:0ms;} .runProgress.running .runStep[data-step="repair"]{animation:nosRunPhase 1.28s ease-in-out infinite;animation-delay:320ms;} .runProgress.running .runStep[data-step="polish"]{animation:nosRunPhase 1.28s ease-in-out infinite;animation-delay:640ms;} .runProgress.running .runStep[data-step="done"]{animation:nosRunPhase 1.28s ease-in-out infinite;animation-delay:960ms;} @keyframes nosRunPhase{ 0%, 24%{opacity:.86;color:rgba(148,163,184,.92);border-color:var(--borderSoft);background:rgba(0,0,0,.14);} 40%, 60%{opacity:1;color:rgba(var(--accentRgb),.98);border-color:rgba(var(--accentRgb),.30);background:rgba(var(--accentRgb),.08);transform:translateY(-1px);} 76%, 100%{opacity:.86;color:rgba(148,163,184,.92);border-color:var(--borderSoft);background:rgba(0,0,0,.14);transform:none;} } /* Run completed signature motion (premium, slightly flashier) */ .runProgress{position:relative;} .runCompleteSig{position:absolute;right:0;top:-2px;display:flex;align-items:center;gap:8px; padding:6px 10px;border-radius:999px;border:1px solid rgba(var(--accentRgb),.28); background:rgba(12,18,38,.55);backdrop-filter: blur(22px) saturate(1.15); -webkit-backdrop-filter: blur(22px) saturate(1.15); color:rgba(226,232,240,.92);font-size:12px;font-weight:750; box-shadow:0 16px 45px rgba(0,0,0,.40), 0 0 0 rgba(var(--accentRgb),0); opacity:0;transform:translateY(6px) scale(.98); pointer-events:none;} .runCompleteSig .sigIcon{width:18px;height:18px;display:block;} .runCompleteSig.play{animation:runSigIn 520ms cubic-bezier(.18,.9,.22,1) both, runSigGlow 900ms ease-out both;} .runCompleteSig.play svg .ring{stroke-dasharray:120;stroke-dashoffset:120;animation:ringDraw 620ms ease-out both;} .runCompleteSig.play svg .check{stroke-dasharray:40;stroke-dashoffset:40;animation:checkDraw 520ms ease-out 120ms both;} @keyframes runSigIn{0%{opacity:0;transform:translateY(8px) scale(.97);}60%{opacity:1;transform:translateY(-1px) scale(1.01);}100%{opacity:1;transform:translateY(0) scale(1);} } @keyframes runSigGlow{0%{box-shadow:0 16px 45px rgba(0,0,0,.40), 0 0 0 rgba(var(--accentRgb),0);}60%{box-shadow:0 16px 45px rgba(0,0,0,.40), 0 0 26px rgba(var(--accentRgb),.22);}100%{box-shadow:0 16px 45px rgba(0,0,0,.40), 0 0 14px rgba(var(--accentRgb),.14);} } @keyframes ringDraw{to{stroke-dashoffset:0;}} @keyframes checkDraw{to{stroke-dashoffset:0;}} /* Newly fulfilled highlight (subtle) */ .tdNew{animation:nosHighlight 1200ms ease-out both;} .newFulfilled{animation:nosHighlight 1200ms ease-out both;} .hlNew{animation:nosHighlight 1200ms ease-out both;border-radius:12px;padding:6px 8px;margin:2px 0;} .reasonTag{display:inline-flex;align-items:center;padding:3px 8px;border-radius:999px;border:1px solid var(--border); background:rgba(0,0,0,.18);font-size:11px;color:#e2e8f0;margin-right:8px} /* Clean misses list (Student + Sandbox) */ .missItem{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:16px;border:1px solid var(--borderSoft); background:rgba(0,0,0,.14);box-shadow: inset 0 1px 0 rgba(255,255,255,.04);} .missTop{display:flex;align-items:center;justify-content:space-between;gap:10px} .missTitle{font-weight:900;font-size:14px;letter-spacing:-.15px;color:rgba(226,232,240,1)} .missHint{color:rgba(203,213,225,.94);font-size:14px;line-height:1.45;font-weight:560;} .missAction{color:rgba(186,200,220,.92);font-size:13.5px;line-height:1.45;font-weight:540;} .missTag{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;border:1px solid var(--borderSoft); background:rgba(0,0,0,.18);font-size:11px;color:rgba(226,232,240,.95);white-space:nowrap} /* Toggle (Auto-add sections) */ .toggleRow{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:12px; padding:12px 14px; border:1px solid var(--borderSoft); border-radius:16px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); box-shadow: 0 10px 26px rgba(0,0,0,.25); } /* Blocks-per-day knob: match nOS card surfaces */ .toggleRow.knob{ background: var(--box2); border-color: rgba(var(--accentRgb), .14); box-shadow: 0 12px 30px rgba(0,0,0,.28); } .toggleRow.knob .toggleHint{max-width:560px} .toggleRow.knob .select{ background: rgba(0,0,0,.18); border: 1px solid var(--borderSoft); } .toggleRow.knob .btn{ background: rgba(var(--accentRgb), .10); border-color: rgba(var(--accentRgb), .22); } .toggleRow.knob .btn:hover{ background: rgba(var(--accentRgb), .14); } .toggleLabel{font-weight:800; color: var(--accent); font-size:13px; letter-spacing:.2px} .toggleHint{font-size:12px; margin-top:3px; max-width:520px} .switch{position:relative; display:inline-block; width:46px; height:28px; flex:0 0 auto} .switch input{opacity:0; width:0; height:0} .slider{ position:absolute; cursor:pointer; inset:0; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18); transition: all .22s cubic-bezier(.2,.8,.2,1); border-radius:999px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); } .slider:before{ content:""; position:absolute; height:22px; width:22px; left:3px; top:2px; background:rgba(255,255,255,.92); border-radius:999px; transition: all .22s cubic-bezier(.2,.8,.2,1); box-shadow: 0 10px 20px rgba(0,0,0,.35); } .switch input:checked + .slider{ background:rgba(var(--accentRgb), .22); border-color: rgba(var(--accentRgb), .42); box-shadow: 0 0 0 4px rgba(var(--accentRgb), .10), inset 0 0 0 1px rgba(0,0,0,.25); } .switch input:checked + .slider:before{ transform: translateX(18px); background:rgba(255,255,255,.98); } .switch input:focus-visible + .slider{ outline: none; box-shadow: 0 0 0 4px rgba(var(--accentRgb), .22), inset 0 0 0 1px rgba(0,0,0,.25); } /* --- School Gate Overlay (Option A Multi-school) --- */ .gateOverlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center; background:radial-gradient(1200px 800px at 20% 0%, rgba(var(--accentRgb),.06), transparent 60%), radial-gradient(1000px 700px at 90% 10%, rgba(var(--accentRgb),.045), transparent 55%), rgba(0,0,0,.66); backdrop-filter: blur(22px) saturate(1.15); -webkit-backdrop-filter: blur(22px) saturate(1.15); } .gateCard{width:min(540px, calc(100vw - 32px));border-radius:30px;padding:26px;border:1px solid rgba(var(--accentRgb),.20); background:linear-gradient(180deg, rgba(11,20,48,.92), rgba(11,20,48,.78)); box-shadow:0 30px 80px rgba(0,0,0,.60); position:relative;overflow:hidden; } .gateCard::before{content:"";position:absolute;inset:-40%; background:radial-gradient(circle at 25% 25%, rgba(255,255,255,.10), transparent 60%); opacity:.55;pointer-events:none; } .gateBrand{position:relative;display:flex;gap:14px;align-items:center;padding:10px 10px 16px} .gateLogo{width:46px;height:46px;border-radius:18px;display:grid;place-items:center; background:rgba(var(--accentRgb),.09);border:1px solid rgba(var(--accentRgb),.18); color:var(--text);font-weight:800;letter-spacing:.3px; box-shadow:0 18px 40px rgba(0,0,0,.35); } .gateTitle{font-size:20px;font-weight:800;letter-spacing:-.2px;color:var(--text)} .gateSub{margin-top:2px;font-size:13px;color:var(--muted)} .gateFields{position:relative;padding:8px 10px 6px} .gateLabel{display:block;font-size:12px;color:rgba(243,244,246,.72);margin:10px 0 6px;font-weight:700;letter-spacing:.02em} .gateHint{color:rgba(243,244,246,.52);font-weight:650} .gateInput{width:100%;padding:12px 14px;border-radius:16px;border:1px solid rgba(var(--accentRgb),.14); background:rgba(0,0,0,.22);color:var(--text);outline:none; transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease; font-weight:650; } /* Keep login inputs visually stable while typing (no background/border color shifts). */ .gateInput:focus{ border-color:rgba(var(--accentRgb),.14); box-shadow:none; transform:none; background:rgba(0,0,0,.22); color:var(--text); } /* --- Login input stability (prevent gray/white regressions, especially autofill) --- */ .gateInput{caret-color:rgb(var(--accentRgb));} .gateInput:focus, .gateInput:focus-visible{ border-color:rgba(var(--accentRgb),.14); box-shadow:none; background:rgba(0,0,0,.22); color:var(--text); } .gateInput:-webkit-autofill, .gateInput:-webkit-autofill:hover, .gateInput:-webkit-autofill:focus, .gateInput:-webkit-autofill:active{ /* Chrome/Safari autofill paints a light background unless we hard-override it. */ -webkit-text-fill-color: var(--text) !important; caret-color: rgb(var(--accentRgb)) !important; /* Set BOTH box-shadow and -webkit-box-shadow to beat browser UA styles. */ -webkit-box-shadow: 0 0 0px 1000px rgba(0,0,0,.22) inset !important; box-shadow: 0 0 0px 1000px rgba(0,0,0,.22) inset !important; border: 1px solid rgba(var(--accentRgb),.14) !important; background-color: rgba(0,0,0,.22) !important; -webkit-background-clip: padding-box !important; background-clip: padding-box !important; transition: background-color 9999s ease-out; } /* Newer Chromium also supports the standard :autofill pseudo-class. */ .gateInput:autofill, .gateInput:autofill:hover, .gateInput:autofill:focus, .gateInput:autofill:active{ -webkit-text-fill-color: var(--text) !important; caret-color: rgb(var(--accentRgb)) !important; -webkit-box-shadow: 0 0 0px 1000px rgba(0,0,0,.22) inset !important; box-shadow: 0 0 0px 1000px rgba(0,0,0,.22) inset !important; border: 1px solid rgba(var(--accentRgb),.14) !important; background-color: rgba(0,0,0,.22) !important; -webkit-background-clip: padding-box !important; background-clip: padding-box !important; } /* --- Login primary CTA ("Enter nOS"): consistent palette + gentle motion --- */ @keyframes gateCtaGlow{0%,100%{box-shadow:0 18px 45px rgba(0,0,0,.35), 0 0 0 rgba(var(--accentRgb),0);}50%{box-shadow:0 18px 45px rgba(0,0,0,.35), 0 0 26px rgba(var(--accentRgb),.28);}} @keyframes gateSheen{0%{transform:translateX(-140%);}100%{transform:translateX(140%);}} @keyframes gateFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-2px);}} .gateLogo{animation:gateFloat 6s ease-in-out infinite;} .gateBtn{ width:100%; margin-top:14px; padding:12px 14px; border-radius:16px; border:1px solid rgba(var(--accentRgb),.55); background:linear-gradient(180deg, rgba(var(--accentRgb),1), rgba(var(--accentRgb),.86)); color:#070A12; font-weight:850; letter-spacing:.01em; cursor:pointer; position:relative; overflow:hidden; transition:transform .22s cubic-bezier(.2,.9,.2,1), box-shadow .22s cubic-bezier(.2,.9,.2,1), filter .22s ease; box-shadow:0 18px 45px rgba(0,0,0,.35); animation:gateCtaGlow 2.4s ease-in-out infinite; will-change:transform, box-shadow; } .gateBtn::after{content:"";position:absolute;inset:-50%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.30), transparent); transform:translateX(-140%); opacity:0; pointer-events:none; } .gateBtn:hover{transform:translateY(-1.5px);filter:brightness(1.02);box-shadow:0 22px 60px rgba(0,0,0,.45), 0 0 28px rgba(var(--accentRgb),.22);} .gateBtn:hover::after{opacity:1;animation:gateSheen .85s ease-out 1;} .gateBtn:active{transform:translateY(0) scale(.985);} @media (prefers-reduced-motion: reduce){ .gateLogo{animation:none;} .gateBtn{animation:none;} .gateBtn::after{display:none;} } /* --- Run: make the Generate Schedule box dominant and decisive --- */ #view-run .grid{grid-template-columns:1fr; gap:18px;} #view-preflight .grid{grid-template-columns:1fr; gap:18px;} #view-preflight .pfCard{min-height:calc(100vh - 220px);} /* Gate animations */ @keyframes gateFadeIn{from{opacity:0}to{opacity:1}} @keyframes gatePop{from{transform:translateY(8px) scale(.985);opacity:0}to{transform:translateY(0) scale(1);opacity:1}} @keyframes gateShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}} .gateOverlay.gateIn{animation:gateFadeIn .35s ease both;} .gateCard.gateIn{animation:gatePop .45s cubic-bezier(.2,.9,.2,1) both;} .gateCard.shake{animation:gateShake .38s ease both;} .gateError{animation:gateFadeIn .25s ease both;} /* --- Gate animations & micro-interactions --- */ @keyframes gateFadeIn { from { opacity:0 } to { opacity:1 } } @keyframes gatePopIn { from { opacity:0; transform: translateY(12px) scale(.98) } to { opacity:1; transform: translateY(0) scale(1) } } @keyframes gateShake { 0%,100%{ transform: translateX(0) } 20%{ transform: translateX(-8px) } 40%{ transform: translateX(7px) } 60%{ transform: translateX(-6px) } 80%{ transform: translateX(5px) } } .gateOverlay.isIn { animation: gateFadeIn .22s ease-out both; } .gateCard.isIn { animation: gatePopIn .26s cubic-bezier(.2,.8,.2,1) both; } .gateCard.isShaking { animation: gateShake .36s ease both; } .gateError{ animation: gatePopIn .18s ease-out both; } .disabledByRole{opacity:.45;filter:saturate(.8);} /* --- Initial load: prevent app "flash" before login gate resolves --- */ .app{transition: opacity .22s ease, transform .22s ease;} body:not(.nos-ready) .app{opacity:0; transform: translateY(6px); pointer-events:none;} @media (max-width: 980px){ .topbar{left:0;} .main{padding:84px 14px 18px;} } /* Scheduler (Run) should feel like the brain */ .schedulerCard{background:linear-gradient(180deg, rgba(11,20,48,.88), rgba(11,20,48,.68)); border:1px solid rgba(var(--accentRgb),.18); box-shadow:0 22px 60px rgba(0,0,0,.48), 0 0 0 1px rgba(255,255,255,.02) inset; } /* Run workspace should occupy the screen like a workspace, not a modal */ .runWorkspace{min-height:calc(100vh - 220px);} @media (max-width:980px){.runWorkspace{min-height:auto;}} /* File picker states */ .filePicker.isEmpty{border-style:dashed;border-color:rgba(var(--accentRgb),.16);background:linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.10));box-shadow:0 16px 40px rgba(0,0,0,.28);} .filePicker.isEmpty:hover{border-color:rgba(var(--accentRgb),.24);} .filePicker.hasFile{border-style:solid;} /* --- One-page Schedule Builder stepper --- */ .builderStepper{ display:flex; align-items:center; gap:12px; margin-top:12px; padding:10px 12px; border:1px solid rgba(148,163,184,.14); background:rgba(0,0,0,.12); border-radius:14px; } .bStep{ display:flex; align-items:center; gap:10px; min-width:0; } .bDot{ width:10px; height:10px; border-radius:999px; background:rgba(148,163,184,.35); box-shadow:0 0 0 4px rgba(148,163,184,.08); flex:0 0 auto; } .bMeta{min-width:0;} .bLabel{font-weight:950; font-size:13px; letter-spacing:.01em;} .bHint{font-size:13px; color:rgba(148,163,184,.9); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:240px;} .bLine{ height:1px; flex:1 1 auto; background:rgba(148,163,184,.16); } .bStep.isActive .bDot{ background:rgba(var(--accentRgb),.95); box-shadow:0 0 0 4px rgba(var(--accentRgb),.18); } .bStep.isDone .bDot{ background:rgba(34,197,94,.95); box-shadow:0 0 0 4px rgba(34,197,94,.18); } .bStep.isLocked .bDot{ background:rgba(148,163,184,.18); box-shadow:0 0 0 4px rgba(148,163,184,.06); } /* --- Builder: ONE mental model (progressive disclosure) --- */ /* Hide the decorative stepper for a calmer flow */ .builderStepper{display:none;} /* Card states */ .builderCard.isActiveSection{border-color:rgba(var(--accentRgb),.30); box-shadow:0 18px 55px rgba(0,0,0,.55), 0 0 0 1px rgba(var(--accentRgb),.10) inset;} .builderCard.isLocked{opacity:.62;} .builderCard.isCompact{padding:14px;} /* Collapsibles */ .collapsibleBody{margin-top:10px; overflow:hidden; transition: max-height .22s ease, opacity .18s ease, transform .22s ease; max-height:2000px; opacity:1; transform: translateY(0);} .card.isCollapsed .collapsibleBody{max-height:0; opacity:0; transform: translateY(-6px); margin-top:0;} .iconBtn{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px; border:1px solid rgba(148,163,184,.18); background:rgba(0,0,0,.14); color:rgba(255,255,255,.88); cursor:pointer;} .iconBtn:hover{border-color:rgba(148,163,184,.28); background:rgba(0,0,0,.20);} .iconBtn:active{transform: translateY(1px);} .iconBtn .chev{display:inline-block; transition: transform .18s ease;} .card:not(.isCollapsed) .iconBtn .chev{transform: rotate(180deg);} /* body open => chevron up */ .pfSummary,.genSummary{font-size:13.5px; color:rgba(148,163,184,.95); white-space:nowrap; font-weight:750;} /* Locked generate should still look like the next step, not a dead end */ .builderCard.isLocked #generateReason{color:rgba(148,163,184,.95);} /* UI spacing tweaks (nos120) */ /* Results / Students titles should align with Schedule Builder/Dashboard */ #view-results > .row:first-child, #view-students > .row:first-child{margin-top:0;} /* Results + Student Management: tabs centered, search pinned to far-right */ .tabsSearchRow{position:relative; margin-top:4px; min-height:44px; display:flex; align-items:center; justify-content:center; gap:12px; width:100%;} .tabsSearchRow .tabs{margin:0 auto;} .tabsSearchRow .searchWrap{position:absolute; right:0; top:50%; transform:translateY(-50%);} /* Student Management: optical centering adjustment */ #view-students .tabsSearchRow .tabs{transform:translateX(-14px);} /* Results page: search should be ~33% narrower but still pinned right */ #view-results .searchWrap .search{width:215px;} /* Prevent horizontal "page" scroll (which makes the Results header/search/buttons look shifted). Wide Results tables should scroll inside their own container instead of stretching the page. */ html, body{max-width:100%; overflow-x:hidden;} .main, .content, #view-results{max-width:100%; overflow-x:hidden;} #view-results .tableWrap{max-width:100%;} #view-results .scroll{max-width:100%; overflow:auto;} #view-results table{min-width:100%; width:max-content;} @media (max-width: 860px){ /* On small screens, allow wrap so the search doesn't overlap tabs */ .tabsSearchRow{justify-content:center; flex-wrap:wrap; padding-bottom:4px;} .tabsSearchRow .searchWrap{position:static; transform:none; width:min(420px, 100%); margin-left:auto;} } /* Student Management: scrollable table container + sticky header */ #view-students .tableWrap{overflow:auto; max-height:70vh;} #view-students table thead{position:sticky; top:0; z-index:2;} /* ------------------------------ Calm UI pass (simplicity + less motion) - reduces hover lifts/bounces - removes attention-grabbing animations - flattens cards/buttons slightly --------------------------------*/ body.calm *{ animation: none !important; transition-duration: 140ms !important; } body.calm .btn:hover, body.calm .nav button:hover, body.calm .card:hover, body.calm .builderCard:hover{ transform: none !important; } body.calm .card{ border-radius: 18px; padding: 16px; box-shadow: 0 14px 36px rgba(0,0,0,.42); } body.calm .btn{ border-radius: 16px; box-shadow: none; } body.calm .nav button{transition: background 140ms ease, color 140ms ease, border-color 140ms ease;} body.calm .menu{animation:none !important;} body.calm #btnRun.ctaReady{animation:none !important;} body.calm #btnRun::after{display:none !important;}