/* Shared Salesforce Account-page replica for the recorder demos (compact
   Lightning chrome: white global header, blue-underlined nav tabs, page-head
   card, Activity/Details/Related tabs). Extracted from solutions-support.html's
   inline sfx-styles so every vertical page can reuse the same mock — the
   markup comes from /ai-hire/assets/sfx-account-mock.js. Animation hooks match the
   old admin-page pattern the pages' recorder drivers (and site-v3.js
   bwRecord) already expect:
   #bxAuth click (New Note) → #bxForm.in reveals the note composer →
   #bxRmaFld/#bxRma types the note → #bxIssue (Save) enables + gets clicked,
   which reveals the saved entry in the activity history via :has(). */
.cw-page.sfx { padding: 0; background: #fff; display: flex; flex-direction: column; overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; color: #080707; }
/* — global header: logo left, centered search, controls right (mock: 48px) — */
.sfx .sf-gtop { height: 32px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 10px; background: #fff; }
.sfx .sf-glogo { flex: none; display: flex; align-items: center; }
.sfx .sf-glogo img { display: block; height: 20px; width: auto; }
.sfx .sf-gsearch { flex: 0 1 220px; margin: 0 auto; height: 21px; border-radius: 4px; border: 1px solid #dddbda; display: flex; align-items: center; gap: 7px; padding: 0 8px; font-size: 9.5px; color: #706e6b; }
.sfx .sf-gsearch svg { width: 11px; height: 11px; flex: none; }
.sfx .sf-gicons { display: flex; align-items: center; gap: 7px; color: #706e6b; flex: none; }
.sfx .sf-gicons svg { width: 13px; height: 13px; }
/* favourites star + caret pill, the Lightning header's signature control */
.sfx .sf-gfav { display: inline-flex; align-items: center; height: 17px; border: 1px solid #dddbda; border-radius: 4px; color: #706e6b; }
.sfx .sf-gfav .st { display: grid; place-items: center; width: 17px; height: 100%; }
.sfx .sf-gfav .cv { display: grid; place-items: center; width: 13px; height: 100%; border-left: 1px solid #dddbda; }
.sfx .sf-gfav svg { width: 9px; height: 9px; }
.sfx .sf-gav { width: 20px; height: 20px; border-radius: 999px; background: #34becd; color: #fff; flex: none; display: grid; place-items: center; }
.sfx .sf-gav svg { width: 11px; height: 11px; }
/* — global nav: waffle + bold app name + tabs; 3px blue rule under the bar,
     active tab gets the blue TOP border + pale-blue fill (mock behaviour) — */
.sfx .sf-navbar { height: 26px; flex: none; display: flex; align-items: stretch; gap: 8px; background: #fff; box-shadow: inset 0 -2px 0 0 #1589ee; padding-left: 10px; overflow: hidden; }
.sfx .sf-waffle { display: grid; grid-template-columns: repeat(3, 3px); grid-auto-rows: 3px; gap: 2px; align-content: center; flex: none; }
.sfx .sf-waffle i { display: block; width: 3px; height: 3px; border-radius: 1px; background: #706e6b; }
.sfx .sf-appname { display: flex; align-items: center; font-size: 12px; font-weight: 700; color: #080707; padding-right: 10px; flex: none; }
.sfx .sf-navtabs { display: flex; align-items: stretch; }
.sfx .sf-navtab { display: flex; align-items: center; gap: 5px; padding: 0 10px; font-size: 10px; color: #080707; white-space: nowrap; border-top: 2px solid transparent; }
.sfx .sf-navtab .cv { display: inline-flex; color: #706e6b; }
.sfx .sf-navtab .cv svg { width: 7px; height: 7px; }
.sfx .sf-navtab.on { background: #e8f3fd; border-top-color: #1589ee; }
/* — body: the Lightning blue gradient backdrop the record cards float on — */
.sfx .sf-body { flex: 1; min-height: 0; overflow: hidden; background: linear-gradient(180deg, #eef4fa 0%, #7e9ec4 100%); padding: 8px; display: flex; flex-direction: column; gap: 7px; }
/* — page header card: gray identity strip over a white fields row — */
.sfx .sf-pagehead { background: #fff; border: 1px solid #dddbda; border-radius: 4px; box-shadow: 0 2px 2px rgba(0,0,0,.1); flex: none; overflow: hidden; }
.sfx .sf-phtop { background: #f3f2f2; border-bottom: 1px solid #dddbda; display: flex; align-items: center; gap: 9px; padding: 7px 10px; }
.sfx .sf-phicon { width: 26px; height: 26px; border-radius: 4px; background: #7f8de1; display: grid; place-items: center; color: #fff; flex: none; }
.sfx .sf-phicon svg { width: 15px; height: 15px; }
.sfx .sf-phtx { min-width: 0; flex: 1; }
.sfx .sf-pheyebrow { font-size: 9.5px; color: #080707; margin: 0; line-height: 1.3; }
.sfx .sf-phtitle { font-size: 13px; font-weight: 700; color: #080707; margin: 0; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sfx .sf-phbtns { display: flex; align-items: center; gap: 7px; flex: none; }
.sfx .sf-sfbtn { height: 21px; padding: 0 9px; display: inline-flex; align-items: center; background: #fff; border: 1px solid #dddbda; border-radius: 4px; font-size: 9.5px; color: #0070d2; white-space: nowrap; }
.sfx .sf-btngrp { display: flex; align-items: stretch; height: 21px; border: 1px solid #dddbda; border-radius: 4px; overflow: hidden; }
.sfx .sf-btngrp span { display: inline-flex; align-items: center; padding: 0 9px; background: #fff; font-size: 9.5px; color: #0070d2; border-right: 1px solid #dddbda; white-space: nowrap; }
.sfx .sf-btngrp span:last-child { border-right: none; padding: 0 5px; }
.sfx .sf-btngrp svg { width: 8px; height: 8px; }
.sfx .sf-phfields { display: flex; gap: 20px; padding: 9px 10px; flex-wrap: wrap; }
.sfx .sf-phf .k { display: block; font-size: 9px; color: #3e3e3c; line-height: 1.4; }
.sfx .sf-phf .v { display: block; font-size: 10px; color: #080707; line-height: 1.4; }
.sfx .sf-phf .v.link { color: #0070d2; }
.sfx .sf-phf .owner { display: flex; align-items: center; gap: 4px; }
.sfx .sf-phf .oav { width: 13px; height: 13px; border-radius: 999px; background: #ebebeb; color: #9a9ea2; display: grid; place-items: center; flex: none; }
.sfx .sf-phf .oav svg { width: 7px; height: 7px; }
/* — record card: Related/Details/News tabs over the Activity composer — */
.sfx .sf-card { background: #fff; border: 1px solid #dddbda; border-radius: 4px; box-shadow: 0 2px 2px rgba(0,0,0,.1); flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.sfx .sf-tabs { display: flex; gap: 14px; padding: 0 12px; border-bottom: 1px solid #dddbda; flex: none; }
.sfx .sf-tab { padding: 8px 2px; font-size: 10.5px; color: #080707; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.sfx .sf-tab.on { font-weight: 700; border-bottom-color: #0070d2; }
/* activity box — gray option strip with the active kind knocked out white,
   exactly as Lightning renders Log a Call / New Task / New Note */
.sfx .sf-actbody { flex: none; padding: 10px 12px 11px; }
.sfx .sf-actbox { border: 1px solid #e5e5e5; border-radius: 4px; overflow: hidden; }
.sfx .sf-actkinds { display: flex; align-items: stretch; background: #f3f3f3; }
.sfx .sf-akind { display: inline-flex; align-items: center; gap: 5px; padding: 7px 10px; font-size: 9.5px; color: #080707; white-space: nowrap; transition: color .12s ease, background .12s ease; }
.sfx .sf-akind svg { width: 11px; height: 11px; }
.sfx .sf-akind.on, .sfx .sf-akind.pressed { background: #fff; color: #0070d2; font-weight: 600; }
.sfx .sf-akind.on { border-radius: 4px 0 0 0; }
/* Lightning keeps exactly one option knocked out; when the recording clicks
   "New Note" the default ("Log a Call") has to give the highlight up. Split
   from the .chromewin.done fallback so an unsupported :has() can't drop it. */
.sfx:has(#bxAuth.pressed) .sf-akind.on { background: transparent; color: #080707; font-weight: 400; }
.chromewin.done .sfx .sf-akind.on { background: transparent; color: #080707; font-weight: 400; }
/* the note composer starts collapsed under the option strip and expands
   once "New Note" is clicked (bwRecord adds #bxForm.in) */
.sfx .sf-composer { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .35s cubic-bezier(.22,1,.36,1), opacity .3s ease; }
.sfx .sf-composer.in { max-height: 130px; opacity: 1; }
.sfx .sf-cinner { display: flex; align-items: flex-start; gap: 7px; padding: 8px; }
.sfx .sf-notefld { position: relative; flex: 1; min-width: 0; min-height: 30px; background: #fff; border: 1px solid #dddbda; border-radius: 4px; padding: 7px 9px; font-size: 10px; line-height: 1.45; color: #080707; transition: box-shadow .12s ease, border-color .12s ease; }
.sfx .sf-notefld.focus { border-color: #1589ee; box-shadow: 0 0 0 1px #1589ee; }
.sfx .sf-notefld .nph { color: #706e6b; }
.sfx .sf-notefld.focus .nph { display: none; }
.sfx .sf-notefld .caret { display: none; width: 1.5px; height: 11px; background: #0070d2; margin-left: 1px; vertical-align: -2px; }
.sfx .sf-notefld.focus .caret { display: inline-block; animation: caretblink 1s steps(1) infinite; }
.sfx .sf-notesave { flex: none; font-family: inherit; font-size: 9.5px; color: #fff; background: #0176d3; border: none; border-radius: 4px; padding: 0 12px; height: 30px; transition: transform .12s ease, background .12s ease; }
.sfx .sf-notesave:disabled { background: #c9c7c5; }
.sfx .sf-notesave.pressed { transform: scale(.96); background: #014486; }
/* — activity history — */
.sfx .sf-acthist { flex: 1; min-height: 0; overflow: hidden; padding: 0 12px 11px; display: flex; flex-direction: column; gap: 9px; }
.sfx .sf-histlab { font-size: 9px; font-weight: 700; color: #3e3e3c; margin: 0 0 1px; }
.sfx .sf-actitem { display: flex; gap: 8px; }
.sfx .sf-actic { width: 16px; height: 16px; border-radius: 3px; background: #e8f3fd; color: #0070d2; display: grid; place-items: center; flex: none; margin-top: 1px; }
.sfx .sf-actic svg { width: 9px; height: 9px; }
.sfx .sf-actitem .t { font-size: 10px; color: #080707; margin: 0 0 1px; line-height: 1.35; }
.sfx .sf-actitem .l { font-size: 9px; color: #706e6b; margin: 0; }
/* the saved note appears in the history once Save is clicked (bwRecord adds
   #bxIssue.pressed). The .chromewin.done fallback covers reduced-motion —
   kept as a SEPARATE rule since an unsupported :has() would otherwise
   invalidate the whole selector list and drop the fallback with it. */
.sfx .sf-actitem.new { display: none; }
.sfx:has(#bxIssue.pressed) .sf-actitem.new { display: flex; animation: bwfade .4s ease both; }
.chromewin.done .sf-actitem.new { display: flex; animation: bwfade .4s ease both; }
@media (max-width: 720px) {
  .sfx .sf-navtab:not(.on), .sfx .sf-gsearch, .sfx .sf-gfav, .sfx .sf-phbtns { display: none; }
}