/* FirmKeep platform layer: sign-in, roles, staff views, module library and builder.
   Same tokens and language as the workspace. No fixed or sticky positioning anywhere. */

/* ---------- sign-in ---------- */
#signin{display:none}
html.fk-signed-out,html.fk-signed-out body{height:auto;min-height:100%;overflow:auto}
html.fk-signed-out body{display:block;background:var(--canvas)}
html.fk-signed-out body>.topbar,html.fk-signed-out body>.shell,html.fk-signed-out body>.notification-scrim{display:none!important}
html.fk-signed-out #signin{display:flex}
#signin{min-height:100dvh;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:max(28px,env(safe-area-inset-top)) 16px max(28px,env(safe-area-inset-bottom))}
.si-card{width:min(400px,100%);background:#fff;border-radius:16px;box-shadow:0 1px 2px rgba(35,37,39,.04),0 14px 34px rgba(35,37,39,.07);overflow:hidden}
.si-in{padding:30px 32px 28px}
.si-card .wordmark{display:inline-block;margin-bottom:34px}
.si-card h1{font-size:28px;font-weight:500;letter-spacing:-.04em;line-height:1.1;margin-bottom:8px}
.si-lede{font-size:13px;color:var(--muted);line-height:1.55;margin-bottom:24px}
.si-sso{display:grid;gap:8px}
.si-btn{width:100%;min-height:44px;border:1px solid #dedfdd;border-radius:10px;background:#fff;font-size:13px;font-weight:500;color:var(--ink);display:flex;align-items:center;justify-content:center;gap:10px;transition:background .15s,border-color .15s,transform .12s}
.si-btn svg{width:16px;height:16px;color:#6b716d;stroke-width:1.6}
.si-btn:hover{background:#fafbf9;border-color:#d3d6d2}
.si-btn:active{transform:scale(.99)}
.si-or{display:flex;align-items:center;gap:12px;margin:18px 0;font-size:11px;color:#9aa09b}
.si-or:before,.si-or:after{content:"";flex:1;height:1px;background:var(--line)}
.fk-field{display:grid;gap:6px;font-size:12px;color:#5f6662}
.fk-field input,.fk-field textarea,.fk-field select{width:100%;font:inherit;font-size:14px;color:var(--ink);background:#fff;border:1px solid #e1e4e0;border-radius:10px;padding:11px 12px;transition:border-color .15s,box-shadow .15s}
.fk-field input::placeholder,.fk-field textarea::placeholder{color:#a3a8a4}
.fk-field select{-webkit-appearance:none;appearance:none;padding-right:36px;min-height:44px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b716d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px 16px}
.fk-field select:hover{border-color:#d3d6d2}
.fk-field textarea{resize:none;min-height:74px;line-height:1.5}
.fk-field input:focus,.fk-field textarea:focus,.fk-field select:focus{outline:none;border-color:#b9c9bd;box-shadow:0 0 0 3px #eef4ef}
.fk-field.bad input,.fk-field.bad textarea{border-color:#e7bdb7}
.si-form{display:grid;gap:12px}
.si-form .primary{width:100%;justify-content:center;min-height:44px}
.si-msg{font-size:12px;color:#a1352c;line-height:1.5;min-height:0}
.si-msg:empty{display:none}
.si-sent{font-size:13px;color:#5f6662;line-height:1.6;margin-bottom:20px}
.si-sent b{color:var(--ink);font-weight:500}
.si-back{margin-top:12px;font-size:12px;color:#6b716d}
.si-accounts{display:grid;gap:0;border:1px solid #dedfdd;border-radius:12px;background:#fff;overflow:hidden}
.si-account{width:100%;display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:12px;text-align:left;padding:12px 14px 12px 12px;border:0;border-radius:0;background:#fff;transition:background .15s}
.si-account+.si-account{border-top:1px solid var(--line)}
.si-account:hover{background:#fafbf9}
.si-account:focus-visible{outline-offset:-3px}
.si-account .avatar{width:34px;height:34px;font-size:11px}
.si-account strong{display:block;font-size:13px;font-weight:500;letter-spacing:-.01em}
.si-account small{display:block;font-size:11px;color:#858b87;margin-top:1px}
.si-role{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#6f7671;border:1px solid var(--line);border-radius:999px;padding:3px 8px}
.si-demo{width:min(400px,100%);text-align:center}
.si-demo p{font-size:11px;color:#8b918d;margin-bottom:10px;letter-spacing:.02em}
.si-demo .si-accounts{text-align:left;box-shadow:0 1px 2px rgba(35,37,39,.03)}
.si-foot{font-size:11px;color:#9aa09b;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.si-foot a{color:#7c837d;text-decoration:none}
.si-foot a:hover{color:var(--ink)}

/* ---------- roles ---------- */
/* which navigation shows is set in frame.css; here only the user view hides the admin pieces */
body.fk-staff #home-content,body.fk-staff #training{display:none!important}
body.fk-staff .fk-admin-only{display:none!important}
#fk-staff{display:none}
body.fk-staff #fk-staff{display:block}
body.course-mode #fk-staff{display:none!important}
.profile-menu .pm-sep{height:1px;background:var(--line);margin:4px 6px}

/* ---------- shared list rows ---------- */
.fk-block{margin-top:6px}
.fk-block+.fk-block{margin-top:34px}
.fk-rows{border-top:1px solid var(--line)}
.fk-row{width:100%;text-align:left;display:grid;grid-template-columns:minmax(0,1fr) auto 16px;align-items:center;gap:16px;position:relative;padding:15px 8px 15px 19px;border-bottom:1px solid var(--line);transition:background .15s}
.fk-row:hover{background:#fafbf9}
.fk-row:before{content:"";position:absolute;left:0;top:17px;bottom:17px;width:3px;border-radius:2px;background:var(--line)}
.fk-row.overdue:before{background:var(--red)}
.fk-row.soon:before{background:var(--amber)}
.fk-row.progress:before{background:#8fb39c}
.fk-row.done:before{background:var(--green)}
.fk-row .row-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.fk-row h3{font-size:14px;font-weight:500;letter-spacing:-.01em;line-height:1.4;margin-bottom:3px}
.fk-row p{font-size:11px;color:#7c837d;line-height:1.5}
.fk-row .due{font-size:11px;color:#7c837d}
.fk-row .go{font-size:12px;color:#5f6662;white-space:nowrap}
.fk-row .row-arrow{color:#a7afa7;transition:transform .2s}
.fk-row:hover .row-arrow{transform:translateX(3px)}
.fk-chip{font-size:10px;font-weight:600;letter-spacing:.07em;padding:3px 7px;border-radius:5px;color:#fff;background:var(--red)}
.fk-chip.soon{background:var(--amber)}
.fk-chip.progress{background:#e9f1ec;color:#2f6f4f}
.fk-chip.done{background:#e9f4ee;color:var(--green)}
.fk-chip.draft{background:#eef0ee;color:#5f6662}
.fk-chip.quiet{background:#f3f4f2;color:#6b716d}
.fk-empty-note{padding:22px 8px;font-size:13px;color:var(--muted)}
.fk-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.fk-doc{max-width:720px}
.fk-doc .back{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#6b716d;padding:6px 0;margin-bottom:14px}
.fk-doc .back svg{width:14px;height:14px;transform:rotate(180deg)}
.fk-doc h3{font-size:24px;font-weight:500;letter-spacing:-.035em;margin-bottom:6px}
.fk-doc .sub{font-size:12px;color:var(--muted);margin-bottom:22px}
.fk-policy-text{border:1px solid var(--line);border-radius:12px;padding:20px 22px;background:var(--soft);font-size:13px;line-height:1.7;color:#3d4340;margin-bottom:22px}
.fk-policy-text h4{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#6f7671;font-weight:500;margin:14px 0 6px}
.fk-policy-text h4:first-child{margin-top:0}
.fk-fields{border-top:1px solid var(--line);margin-bottom:22px}
.fk-fields div{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--line);font-size:13px}
.fk-fields dt,.fk-fields span:first-child{color:#737c70}
.fk-fields dd,.fk-fields b{font-weight:500;text-align:right;margin:0}
.fk-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fk-note{font-size:11px;color:#8b908c;margin-top:12px;line-height:1.5}
.fk-sign{display:grid;gap:6px;margin:14px 0 4px;font-size:12px;color:#5f6662;max-width:420px}
.fk-sign input{font:inherit;font-size:22px;letter-spacing:-.01em;font-family:Georgia,"Times New Roman",serif;font-style:italic;color:var(--ink);border:0;border-bottom:1px solid #cfd5d0;border-radius:0;padding:10px 2px 8px;background:transparent;transition:border-color .2s}
.fk-sign input::placeholder{color:#b6bbb7}
.fk-sign input:focus{outline:none;border-bottom-color:var(--ink)}
body.course-mode .fk-sign{color:#b5c5c9;margin-top:18px}
body.course-mode .fk-sign input{color:#f3f6f5;border-bottom-color:#647a82}
body.course-mode .fk-sign input::placeholder{color:#748a91}
body.course-mode .fk-sign input:focus{border-bottom-color:#e3ecec}

/* ---------- admin: module library ---------- */
.fk-library{margin-top:40px}
.fk-library .section-title{align-items:center}
.fk-lib-row{grid-template-columns:minmax(0,1fr) auto 16px}
.fk-lib-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:11px;color:#7c837d;line-height:1.5}
.fk-lib-meta span{display:inline-flex;align-items:center;gap:8px}
.fk-lib-meta span+span:before{content:"";width:3px;height:3px;border-radius:50%;background:#c5cac5;flex:none}

/* ---------- admin: builder ---------- */
.fk-builder{max-width:860px}
.fk-steps{display:flex;gap:4px;flex-wrap:wrap;margin:2px 0 26px;padding:0;list-style:none}
.fk-steps button{display:flex;align-items:center;gap:8px;font-size:12px;color:#7c837d;padding:6px 12px 6px 7px;border-radius:999px;border:1px solid transparent;transition:background .2s,color .2s,border-color .2s}
.fk-steps button:hover{color:var(--ink)}
.fk-steps .n{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-variant-numeric:tabular-nums;background:#f1f3f0;color:#6b716d;transition:background .2s,color .2s}
.fk-steps .n svg{width:11px;height:11px;stroke-width:2.4}
.fk-steps button[aria-current="step"]{color:var(--ink);border-color:var(--line);background:#fff}
.fk-steps button[aria-current="step"] .n{background:var(--ink);color:#fff}
.fk-steps button.ok{color:#4f5652}
.fk-steps button.ok .n{background:#e3f3ea;color:var(--green)}
.fk-bpane{display:grid;gap:18px}
.fk-grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.fk-templates{display:flex;flex-wrap:wrap;gap:8px}
.fk-tpl{font-size:12px;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;color:#4f5652;transition:background .15s,border-color .15s}
.fk-tpl:hover{background:#fafbf9}
.fk-tpl[aria-pressed="true"]{border-color:var(--ink);color:var(--ink)}
.fk-label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#7c837d;margin-bottom:8px}
.fk-q{border:1px solid #e2e7e1;border-radius:12px;padding:16px 20px 18px;background:#fff}
.fk-q+.fk-q{margin-top:12px}
.fk-q-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.fk-q-head b{font-size:12px;font-weight:500;color:var(--ink);letter-spacing:-.01em}
.fk-q-tools{display:flex;gap:2px;margin-right:-6px}
.fk-q-tools button{font-size:11px;color:#6b716d;padding:5px 8px;border-radius:7px;transition:background .15s,color .15s}
.fk-q-tools button:hover:not(:disabled){background:#f3f4f2;color:var(--ink)}
.fk-q-tools button:disabled{opacity:.35}
.fk-q .fk-bpane{gap:12px}
.fk-opts{display:grid;gap:8px}
.fk-opt{display:grid;grid-template-columns:32px minmax(0,1fr);gap:8px;align-items:center}
.fk-opt-key{width:32px;height:32px;border-radius:9px;border:1px solid #e1e4e0;background:#fff;font-size:12px;font-weight:500;color:#6b716d;display:grid;place-items:center;transition:background .2s,color .2s,border-color .2s}
.fk-opt-key:hover{border-color:#c9cfca;color:var(--ink)}
.fk-opt-key[aria-pressed="true"]{background:#e3f3ea;border-color:#b7dcc6;color:var(--green)}
.fk-opt-key[aria-pressed="true"]:hover{border-color:#9fcfb3}
.fk-opt input{width:100%;font:inherit;font-size:13px;border:1px solid #e1e4e0;border-radius:9px;padding:8px 10px}
.fk-opt input:focus{outline:none;border-color:#b9c9bd;box-shadow:0 0 0 3px #eef4ef}
.fk-hint{font-size:11px;color:#8b908c;line-height:1.5}
.fk-add{width:100%;min-height:46px;border:1px dashed #d6dad5;border-radius:12px;font-size:13px;color:#5f6662;margin-top:12px;transition:background .15s}
.fk-add:hover{background:#fafbf9}
.fk-teams{display:flex;flex-wrap:wrap;gap:8px}
.fk-team{display:inline-flex;align-items:center;gap:8px;font-size:13px;padding:9px 13px;border-radius:10px;border:1px solid var(--line);background:#fff;color:#4f5652;transition:background .15s,border-color .15s,color .15s}
.fk-team small{font-size:11px;color:#8b908c}
.fk-team[aria-pressed="true"]{border-color:#b7dcc6;background:#f2f8f4;color:#1f5c3f}
.fk-toggles{display:grid;gap:2px;border-top:1px solid var(--line)}
.fk-toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:13px;cursor:pointer}
.fk-toggle small{display:block;font-size:11px;color:#8b908c;margin-top:2px}
.fk-switch{position:relative;width:34px;height:20px;flex:none}
.fk-switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.fk-switch i{position:absolute;inset:0;border-radius:999px;background:#dfe3de;transition:background .2s}
.fk-switch i:after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.15);transition:transform .25s cubic-bezier(.32,.72,0,1)}
.fk-switch input:checked+i{background:var(--green)}
.fk-switch input:checked+i:after{transform:translateX(14px)}
.fk-switch input:focus-visible+i{box-shadow:0 0 0 3px #dbeadf}
.fk-assign-total{font-size:13px;color:#5f6662}
.fk-assign-total b{color:var(--ink);font-weight:500}
.fk-bfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.fk-bfoot .fk-actions{margin-left:auto}
.fk-errors{font-size:12px;color:#a1352c;line-height:1.5}
.fk-errors:empty{display:none}
.fk-review{border:1px solid #e2e7e1;border-radius:12px;padding:22px 24px;background:#fff}
.fk-review h3{font-size:22px;font-weight:500;letter-spacing:-.03em;margin-bottom:4px}
.fk-review .sub{font-size:12px;color:var(--muted);margin-bottom:16px}
.fk-review .fk-fields{margin-bottom:18px}
.fk-review ol{margin:12px 0 0;padding:0;list-style:none;counter-reset:q;font-size:13px;line-height:1.55;color:#3d4340}
.fk-review ol li{display:flex;gap:12px;padding:7px 0;border-top:1px solid var(--line)}
.fk-review ol li:before{counter-increment:q;content:counter(q);font-size:11px;color:#8b908c;font-variant-numeric:tabular-nums;min-width:14px;padding-top:2px}
.fk-published{text-align:left;padding:8px 0}
.fk-published .mark{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#e3f3ea;color:var(--green);margin-bottom:16px}
.fk-published .mark svg{width:20px;height:20px}
.fk-published h3{font-size:26px;font-weight:500;letter-spacing:-.04em;margin-bottom:8px}
.fk-published p{font-size:13px;color:var(--muted);line-height:1.6;margin-bottom:20px;max-width:520px}

@media(max-width:650px){
  .si-in{padding:26px 22px 24px}
  .fk-grid2{grid-template-columns:1fr}
  .fk-row{grid-template-columns:minmax(0,1fr) 16px}
  .fk-row .go{display:none}
  .fk-q{padding:14px 16px 16px}
  .fk-steps{gap:6px;margin-bottom:22px}
  .fk-steps button{padding:5px;gap:7px}
  .fk-steps button:not([aria-current]) .lbl{display:none}
  .fk-steps button[aria-current="step"]{padding-right:12px}
  .fk-steps .n{width:24px;height:24px;font-size:11px}
  .fk-steps button[aria-current="step"] .n{width:20px;height:20px;font-size:10px}
  .fk-review{padding:18px 16px}
  .fk-lib-meta{gap:3px 10px}
  .fk-lib-meta span+span:before{display:none}
  .fk-bfoot .fk-actions{margin-left:0;width:100%;gap:10px 8px}
  .fk-bfoot .fk-actions .primary{flex:1 1 100%;min-height:44px}
}
@media(prefers-reduced-motion:reduce){.si-btn,.fk-row,.fk-switch i,.fk-switch i:after,.fk-steps button,.fk-steps .n,.fk-opt-key,.fk-q-tools button{transition:none}}

body.fk-staff .heading .period{display:none}
body.fk-staff #empty-toggle,body.fk-staff .preview-controls>span{display:none}

/* ---------- command palette focus: the page behind softly blurs while it is open ----------
   An absolute layer just under the top bar (layer 40). Only its opacity animates, so the
   blur never re-renders frame by frame. Clicking it closes the palette (outside click). */
.cmd-scrim{position:absolute;left:0;right:0;top:0;bottom:0;z-index:39;pointer-events:none;opacity:0;background:rgba(240,240,239,.2);-webkit-backdrop-filter:blur(8px) saturate(.97);backdrop-filter:blur(8px) saturate(.97);transition:opacity .36s cubic-bezier(.33,0,.2,1)}
body.cmd-open .cmd-scrim{opacity:1;pointer-events:auto;transition:opacity .5s cubic-bezier(.32,.72,0,1)}
.topbar .brand,#binder-button{transition:opacity .4s cubic-bezier(.32,.72,0,1)}
body.cmd-open .topbar .brand,body.cmd-open #binder-button{opacity:.35}
body.course-mode .cmd-scrim{display:none}
@media(max-width:650px){body.cmd-open{position:relative}body.cmd-open .topbar{position:relative}}
@media(prefers-reduced-motion:reduce){.cmd-scrim,.topbar .brand,#binder-button{transition:none}}

/* ---------- welcome intro ----------
   A screen in normal flow (no fixed layer) shown while html.fk-intro is set: after signing in, and once per
   tab on opening. Words start hidden here and are blurred into focus by platform.js. */
#fk-intro{display:none}
html.fk-intro,html.fk-intro body{height:auto;min-height:100%;overflow:hidden}
html.fk-intro body{display:block;background:var(--canvas)}
html.fk-intro body>.topbar,html.fk-intro body>.shell,html.fk-intro body>.notification-scrim,html.fk-intro .cmd-scrim,html.fk-intro #signin{display:none!important}
html.fk-intro #fk-intro{display:grid;place-items:center;min-height:100dvh;padding:max(24px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom));text-align:center;cursor:default}
.in-wrap{max-width:900px}
.in-eyebrow{font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#8b918d;margin-bottom:26px}
.in-title{font-size:clamp(42px,6.6vw,84px);font-weight:500;letter-spacing:-.052em;line-height:1.02;color:var(--ink);text-wrap:balance}
.in-w{display:inline-block}
.in-mark{font-weight:600;letter-spacing:-.056em}
.in-mark .dot{color:var(--green)}
.in-sub{margin-top:24px;font-size:15px;color:var(--muted);letter-spacing:-.005em;min-height:1.5em}
#fk-intro .in-eyebrow,#fk-intro .in-w,#fk-intro .in-sub{opacity:0}

/* ---------- phones: the profile row lives at the foot of the menu ----------
   The workspace hid the whole sidebar foot on phones, leaving no way to switch view or sign out. */
@media(max-width:650px){
  .sidebar.open .sidebar-foot{display:block;margin-top:14px;padding:14px 6px 2px;border-top:1px solid var(--line)}
  .sidebar.open .sidebar-foot .trial-note{display:none}
  .sidebar.open .profile-menu{bottom:auto;top:calc(100% + 8px);transform-origin:50% 0}
}
@media(max-width:650px){.profile-menu [data-pm="collapse"]{display:none}}