/* FirmKeep frame (restructure step 1): the admin and user navigations, per-tab access, the view switcher and the admin pages. Loaded after the inline styles in index.html, so equal-specificity rules here win. No fixed or sticky positioning anywhere (operator ban); everything stays in normal flow at 390px. */ /* ---------- which navigation shows ---------- The head script sets data-fk-view, data-fk-role and data-fk-tabs on before first paint, and the platform keeps them in step. Without them (signed out) the admin navigation is the default. */ html[data-fk-view=user] .nav-admin, html:not([data-fk-view=user]) .nav-user{display:none} html[data-fk-tabs]:not([data-fk-tabs~=people]) .nav-admin [data-view=people], html[data-fk-tabs]:not([data-fk-tabs~=policies]) .nav-admin [data-view=policies], html[data-fk-tabs]:not([data-fk-tabs~=training]) .nav-admin [data-view=training], html[data-fk-tabs]:not([data-fk-tabs~=enroll]) .nav-admin [data-view=enroll], html[data-fk-tabs]:not([data-fk-tabs~=home]) .nav-admin [data-view=home], html[data-fk-tabs]:not([data-fk-tabs~=casevault]) .nav-admin [data-view=casevault]{display:none} html[data-fk-role=user] .view-switch{display:none} /* Notifications now sits at the foot of the menu, so its panel grows from lower down */ .notification-panel{transform-origin:0 78%} /* ---------- view switcher: Admin | User ---------- */ .view-switch{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:3px;margin:0 -6px 16px;border-radius:10px;background:#f0f1ee} .vs-thumb{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:7px;background:#fff;box-shadow:0 1px 2px rgba(35,37,39,.08),0 1px 6px rgba(35,37,39,.06);transition:transform .34s cubic-bezier(.32,.72,0,1)} .view-switch[data-on=user] .vs-thumb,html[data-fk-view=user] .view-switch:not([data-on]) .vs-thumb{transform:translateX(100%)} .view-switch button{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 6px;border-radius:7px;font-size:12px;color:#636866;white-space:nowrap;overflow:hidden;transition:color .2s ease} .view-switch button[aria-pressed=true]{color:#242929;font-weight:500} .view-switch button:hover{color:#242929} .view-switch svg{width:14px;height:14px;flex:none} .view-switch button:focus-visible{outline:2px solid #9fcfb3;outline-offset:-2px} @media(min-width:651px){ /* the collapsed rail keeps the switcher's height and fades it, as it does every other label */ .view-switch{transition:opacity .22s ease .16s,visibility 0s linear 0s} body.nav-collapsed .view-switch{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s ease 0s,visibility 0s linear .12s} /* the notifications panel sits beside the rail, whichever width it has */ body.nav-collapsed .notification-panel{left:102px} body.nav-collapsed .notification-scrim{left:86px} } @media(max-width:650px){ .sidebar.open .view-switch{margin:0 0 14px} .view-switch button{height:40px;font-size:13px} } @media(prefers-reduced-motion:reduce){.vs-thumb,.view-switch button{transition:none}} /* profile menu: the other sample accounts */ .profile-menu [data-switch-account] small{font-size:10px;color:var(--muted);margin-left:4px} /* ---------- admin pages ---------- */ #fk-page{min-width:0} body.fk-staff #fk-page,body.course-mode #fk-page{display:none!important} .sheet:not([data-section=home]) .heading .period{display:none} /* Manage team: admin access above the roster */ .fk-access-top{margin-bottom:30px} .fk-access-list{border-top:1px solid var(--line)} .fk-access-row{width:100%;text-align:left;display:grid;grid-template-columns:34px minmax(0,1fr) auto 16px;align-items:center;gap:14px;padding:12px 8px 12px 6px;border-bottom:1px solid var(--line);transition:background .15s} .fk-access-row:hover{background:#fafbf9} .fk-access-row .avatar{width:32px;height:32px;font-size:10px} .fk-access-row .fk-pp-meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fk-access-row .row-arrow{color:#a7afa7} .fk-everyone{margin-bottom:10px} .fk-access{padding-top:4px;margin-bottom:22px} .fk-access .tabs{padding-bottom:12px} .fk-access .fk-teams{margin-top:10px} .fk-access-msg{font-size:12px;color:#24724f;min-height:18px;margin-top:10px} .fk-access-msg:empty{min-height:0;margin-top:0} /* Manage modules: the module beside the preview card */ .fk-feature{border:1px solid var(--line);border-radius:11px;padding:20px 22px;display:flex;flex-direction:column;min-width:0} .fk-feature h3{font-size:13px;font-weight:500;display:flex;align-items:center;gap:8px;margin-bottom:12px} .fk-feature h3 svg{width:14px;height:14px} .fk-feature .fk-fields{margin-bottom:16px} .fk-feature .fk-fields div{padding:9px 0;font-size:12px} .fk-feature .fk-actions{margin:auto 0 0;width:auto} /* Manage policy: who still needs to sign */ .fk-names{display:flex;flex-wrap:wrap;gap:6px} .fk-names-actions{margin-top:16px} /* Enroll team: the rule, and rows that report rather than open */ #fk-page .rule{max-width:760px} .fk-row.fk-static{grid-template-columns:minmax(0,1fr);cursor:default} .fk-row.fk-static:hover{background:none} /* Case Vault */ .fk-vault-filter{flex-wrap:wrap} .fk-vault-summary{font-size:14px;line-height:1.65;color:#3d4340;margin-bottom:24px;max-width:620px} #fk-page .list-foot{margin-top:14px} /* the binder page streams its status in words; no progress bars */ .compile-progress{display:none} @media(max-width:650px){ .fk-access-row{grid-template-columns:32px minmax(0,1fr) 16px} .fk-access-row .fk-pill{display:none} .fk-feature{padding:18px} } /* a workspace entrance holds the scroll fogs clear until the sheet has landed (platform.js enterWorkspace) */ body.fog-hold .sheet-fog{opacity:0;transition:none} /* phones: the wordmark lives in the top bar; the drawer does not repeat it */ @media(max-width:650px){#sidebar .sidebar-brand{display:none}} /* ---------- Manage policy (step 2): groups, viewer, version history, editor ---------- */ .fk-pol-top .fk-actions svg,.fk-group-tools svg,.fk-pol-actions svg{width:14px;height:14px} .fk-pol-top .fk-actions .secondary,.fk-pol-actions .secondary{display:inline-flex;align-items:center;gap:7px} .fk-group-tools{display:flex;align-items:center;gap:14px;font-size:11px;color:#6f7671} .fk-group-tools .text-btn{display:inline-flex;align-items:center;gap:6px;font-size:12px} .fk-group-form{margin-top:14px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;display:grid;gap:12px;max-width:520px} .fk-group-form .fk-actions{margin-left:0} .fk-empty-note .text-btn{margin-left:6px} .fk-versions{flex-wrap:wrap;margin:0 0 16px;padding-bottom:0} .fk-versions .tab span{font-size:10px;color:#5f6662} .fk-superseded,.fk-newer{border:1px solid #eedfc2;background:#fcf8ef;border-radius:12px;padding:14px 16px;margin-bottom:18px;display:grid;gap:4px;font-size:13px;line-height:1.5} .fk-superseded b,.fk-newer b{font-weight:500;color:#3d4340} .fk-superseded span,.fk-newer span{color:#5f6662;font-size:12px} .fk-superseded .text-btn{justify-self:start;display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-size:12px} .fk-superseded .text-btn svg{width:13px;height:13px} .fk-change{font-size:13px;color:#3d4340;line-height:1.6;margin-bottom:18px;max-width:620px} .fk-fields .fk-dd-select{min-width:0;flex:0 1 auto} .fk-dd-select select{font:inherit;font-weight:500;color:var(--ink);border:1px solid #e1e4e0;border-radius:8px;padding:5px 28px 5px 10px;background:#fff;width:100%;max-width:100%;text-overflow:ellipsis} .fk-pol-actions{margin:0 0 26px} .fk-pol-history{margin-top:36px} .fk-pe-sections{display:block} .fk-pe-section+.fk-pe-section{margin-top:14px} .fk-pe-section{border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:grid;gap:10px} .fk-pe-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end} .fk-pe-head .text-btn{min-height:44px;font-size:12px} .fk-pol-editor>.fk-field,.fk-pol-editor>.fk-grid2,.fk-pol-editor>.fk-hint{margin-top:16px} .fk-pol-editor>.fk-label{margin-top:22px} @media(max-width:650px){ .fk-pe-head{grid-template-columns:minmax(0,1fr)} .fk-pe-head .text-btn{justify-self:start;min-height:36px} .fk-pol-editor .fk-grid2{grid-template-columns:minmax(0,1fr)} .fk-group-tools span{display:none} } /* ---------- Manage team and Enroll team (step 3) ---------- */ .fk-team-bar{margin-bottom:22px} .fk-pp-team{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:#5f6662} .fk-pp-team select{font:inherit;font-size:12px;color:var(--ink);border:1px solid #e1e4e0;border-radius:8px;padding:6px 26px 6px 10px;background:#fff;max-width:180px} .fk-member-team{max-width:320px;margin-bottom:18px} .fk-member-form form{display:grid;gap:14px;max-width:640px} .fk-member-form .fk-actions{margin-left:0} .fk-enroll-form{display:grid;gap:18px;max-width:760px;border:1px solid var(--line);border-radius:12px;padding:20px 22px} .fk-enroll-form .fk-actions{margin-left:0} .fk-enroll-form .fk-assign-total{margin-top:12px;font-size:12px;color:#5f6662} .fk-enroll-form .fk-assign-total b{color:var(--ink);font-weight:500} .fk-en-group{margin-bottom:18px} .fk-en-n{display:inline-block;margin-left:6px;font:10px/18px var(--mono);padding:0 6px;border-radius:4px;background:#f0f1ee;color:#4f5652} .fk-en-n.done{background:#e9f4ee;color:#24724f} .fk-en-n.todo{background:#fcf4f2;color:#9a3a32} .fk-en-n.inprog{background:#fcf8ef;color:#8a5a12} .fk-en-more{font:inherit;font-size:11px;cursor:pointer;color:var(--ink);border-style:dashed} .fk-en-more:hover{border-color:#c9cdc8} .fk-en-more:focus-visible,.fk-names .fk-pill[tabindex]:focus-visible{outline:2px solid var(--green);outline-offset:2px} .fk-en-actions{margin:6px 0 0} .fk-en-actions svg{width:14px;height:14px} .fk-en-actions .secondary{display:inline-flex;align-items:center;gap:7px} @media(max-width:650px){ .fk-enroll-form{padding:16px} .fk-pp-team{width:100%}.fk-pp-team select{flex:1;max-width:none} } /* typed line breaks are kept wherever policy text is read */ .fk-policy-text p,.fk-change,.fk-vault-summary{white-space:pre-line} /* the one line that says what publishing does reads at full contrast */ .fk-pol-editor>.fk-hint{color:#5f6662} .fk-pol-editor [aria-invalid="true"],.fk-member-form [aria-invalid="true"]{border-color:#e7bdb7}