/* FComply: the explorer and the map on /product/how-the-apps-work/ (Claude, mobile apps session, October 1, 2026).
   The site's own look: Plus Jakarta Sans, ink #16191f, muted #5f6772, blue #0809ff, white cards on the page's grey, pill
   buttons like .fc-tabs-bar. Every control is 44 px or taller. The phones are the site's mockup size (42vh, style.css §12)
   and draw their screens in the phone kit's own styles, inside a shadow root (js/fc-apps-explorer.js). Owner colors:
   you blue, FComply ink, a partner orange, the state green, the employer or agency amber. Greens and oranges that carry
   text use darker shades than the brand's so they read at 4.5:1. */
.fcx{font-family:"Plus Jakarta Sans",-apple-system,Helvetica,Arial,sans-serif;color:#16191f;margin:6px 0 28px;
  --fcx-line:rgba(22,25,31,.14);--fcx-muted:#5f6772;--fcx-blue:#0809ff;--fcx-text:#2b2f36}
.fcx *,.fcx *::before,.fcx *::after{box-sizing:border-box}
.fcx:not(.is-on)>p{font-size:1rem;color:var(--fcx-muted)}
.fcx-fail{font-size:1rem;color:var(--fcx-muted);margin:0}

/* the controls */
.fcx-controls{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:flex-end}
.fcx-seg{display:inline-flex;background:#fff;border:1px solid var(--fcx-line);border-radius:999px;padding:4px;gap:4px}
.fcx-seg button{min-height:44px;padding:0 18px;border:0;background:transparent;border-radius:999px;cursor:pointer;
  font:700 1rem/1.15 "Plus Jakarta Sans",sans-serif;color:#16191f;transition:background .2s,color .2s}
.fcx-seg button[aria-pressed="true"]{background:var(--fcx-blue);color:#fff}
.fcx-seg button:focus-visible,.fcx-field select:focus-visible,.fcx-tabs [role="tab"]:focus-visible,.fcx-sbtn:focus-visible,.fcx-zoom:focus-visible,.fcx-close:focus-visible{outline:3px solid var(--fcx-blue);outline-offset:3px}
.fcx-fields{display:grid;grid-template-columns:repeat(2,minmax(180px,1fr));gap:12px 16px;flex:1 1 520px}
.fcx-field{display:flex;flex-direction:column;gap:6px;font:600 .95rem/1.25 "Plus Jakarta Sans",sans-serif;color:var(--fcx-muted);margin:0}
.fcx-field[hidden]{display:none}
.fcx-field select{min-height:48px;width:100%;border:1px solid rgba(22,25,31,.2);border-radius:12px;background:#fff;padding:0 40px 0 14px;cursor:pointer;
  font:600 1rem/1.2 "Plus Jakarta Sans",sans-serif;color:#16191f;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316191f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:18px 18px}
.fcx-summary{margin:16px 0 12px;font-size:1.02rem;line-height:1.5;color:var(--fcx-text)}

/* the stages */
.fcx-tabs{display:flex;flex-wrap:wrap;gap:8px 10px;margin:0 0 14px}
.fcx-tabs [role="tab"]{min-height:48px;display:inline-flex;align-items:center;gap:10px;border:1px solid var(--fcx-line);background:#fff;border-radius:999px;
  padding:7px 18px 7px 8px;cursor:pointer;text-align:left;font:600 .98rem/1.2 "Plus Jakarta Sans",sans-serif;color:#16191f;transition:border-color .2s,background .2s,color .2s,box-shadow .2s}
.fcx-tabs [role="tab"]:hover{border-color:var(--fcx-blue);box-shadow:0 10px 24px -16px rgba(8,9,255,.5)}
.fcx-tabs [role="tab"] .n{width:32px;height:32px;border-radius:50%;background:#eaeaff;color:var(--fcx-blue);display:grid;place-items:center;font-weight:800;flex:0 0 auto}
.fcx-tabs [role="tab"] .tx b{display:block;font-weight:700}
.fcx-tabs [role="tab"] .tx small{display:block;font-weight:500;color:var(--fcx-muted);font-size:.9rem;margin-top:2px}
.fcx-tabs [role="tab"][aria-selected="true"]{background:var(--fcx-blue);border-color:var(--fcx-blue);color:#fff}
.fcx-tabs [role="tab"][aria-selected="true"] .n{background:rgba(255,255,255,.22);color:#fff}
.fcx-tabs [role="tab"][aria-selected="true"] .tx small{color:rgba(255,255,255,.9)}
.fcx-tabs [role="tab"]:disabled{opacity:.45;cursor:default;box-shadow:none}

/* the steps and the phone */
.fcx-body{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:26px;align-items:start;background:#fff;border:1px solid rgba(22,25,31,.1);border-radius:16px;
  padding:22px 26px;box-shadow:0 30px 60px -40px rgba(22,25,31,.25)}
.fcx-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.fcx-step{border:1px solid rgba(22,25,31,.1);border-radius:12px;background:#fff;transition:border-color .2s,box-shadow .2s;margin:0}
.fcx-step.is-open{border-color:var(--own);box-shadow:0 12px 26px -20px rgba(22,25,31,.45)}
.fcx-sbtn{width:100%;min-height:52px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 14px;border:0;background:transparent;border-radius:12px;
  text-align:left;cursor:pointer;font:inherit;color:inherit}
.fcx-who{display:inline-flex;align-items:center;gap:7px;font:700 .9rem/1.2 "Plus Jakarta Sans",sans-serif;padding:6px 11px;border-radius:14px;background:var(--own-bg);color:#16191f;max-width:100%;min-width:0;overflow-wrap:anywhere}
.fcx-who i{width:9px;height:9px;border-radius:50%;background:var(--own);display:block;flex:0 0 auto}
.fcx-st{font:700 1.02rem/1.3 "Plus Jakarta Sans",sans-serif;flex:1 1 220px;min-width:0}
.fcx-tag{font:700 .9rem/1.1 "Plus Jakarta Sans",sans-serif;padding:6px 10px;border-radius:999px;background:#e4f5ea;color:#0d5e36;white-space:nowrap}
.fcx-tag-r{background:#fdeee7;color:#8f2f0c}
.fcx-sd{padding:0 16px 14px;font-size:1rem;line-height:1.55;color:var(--fcx-text)}
.fcx-sd p{margin:0 0 .6em;font-size:1rem;max-width:none}
.fcx-set{background:#eaeaff;border-radius:10px;padding:10px 12px}
.fcx-off{color:var(--fcx-muted)}
.fcx-flags{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.fcx-flags li{border-radius:10px;padding:9px 12px;font-size:.98rem;line-height:1.45;margin:0}
.fcx-flags .fcx-rule{background:#fdeee7}
.fcx-flags .fcx-opt{background:#eef6ff}
.fcx-step.is-off .fcx-st{color:var(--fcx-muted)}
.fcx-step.is-ms .fcx-st{letter-spacing:.02em;font-weight:800}
.fcx-own-you{--own:#0809ff;--own-bg:#eaeaff}
.fcx-own-app{--own:#16191f;--own-bg:#eef0f3}
.fcx-own-partner{--own:#f26430;--own-bg:#fdeee7}
.fcx-own-state{--own:#1a9a5b;--own-bg:#e4f5ea}
.fcx-own-employer{--own:#c48a00;--own-bg:#fff4d6}
/* the site's mockup size: 42vh (style.css §12; accept.mjs phone-mockups-fit-the-screen caps a phone at 45% of the window) */
.fcx-phonebox{margin:0;position:sticky;top:110px;display:flex;flex-direction:column;align-items:center;gap:8px;width:max(20.3vh,178px)}
.fcx-phone{height:max(42vh,260px);width:calc(max(42vh,260px) * .482);position:relative;display:block}
.fcx-phonebox figcaption{font-size:.9rem;line-height:1.4;color:var(--fcx-muted);text-align:center;max-width:250px}
.fcx-cap{display:block}
.fcx-zoom,.fcx-close{min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--fcx-line);background:#fff;cursor:pointer;margin-top:6px;
  font:700 .98rem/1 "Plus Jakarta Sans",sans-serif;color:var(--fcx-blue)}
.fcx-zoom:hover,.fcx-close:hover{border-color:var(--fcx-blue)}
.fcx-dialog{border:0;border-radius:22px;padding:22px 22px 18px;max-width:94vw;max-height:96vh;overflow:auto;background:#f4f5f8;box-shadow:0 40px 80px -30px rgba(0,0,0,.5);text-align:center}
.fcx-dialog::backdrop{background:rgba(22,25,31,.6)}
.fcx-phone-lg{height:min(82vh,940px);width:calc(min(82vh,940px) * .482);margin:0 auto}
.fcx-cap-lg{font-size:.95rem;color:var(--fcx-muted);margin:12px auto 0;max-width:420px}

/* the map */
.fcx-maprule{max-width:560px}
.fcx-layer-q{margin:10px 0 16px;font-size:1rem;line-height:1.5;color:var(--fcx-text)}
.fcx-mapwrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:26px;align-items:start}
.fcx-mapwrap>div{min-width:0}
.fcx-tilebox{overflow-x:auto;padding-bottom:6px}
.fcx-tiles{display:grid;grid-template-columns:repeat(11,minmax(30px,1fr));gap:4px;min-width:360px;max-width:640px}
.fcx-tile{aspect-ratio:1;border-radius:7px;display:grid;place-items:center;font:800 .9rem/1 "Plus Jakarta Sans",sans-serif;letter-spacing:-.01em}
.fcx-legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.fcx-legend li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;margin:0;font-size:1rem;line-height:1.4}
.fcx-legend li b{font-weight:700}
.fcx-legend li p{margin:2px 0 0;color:var(--fcx-muted);font-size:.95rem;line-height:1.45;max-width:none}
.fcx-sw{width:22px;height:22px;border-radius:5px;margin-top:2px;display:block}
.fcx-v0{background:#16191f;color:#fff}
.fcx-v1{background:#137a48;color:#fff}
.fcx-v2{background:#0809ff;color:#fff}
.fcx-v3{background:#6b2fd6;color:#fff}
.fcx-v4{background:#b8400f;color:#fff}
.fcx-v5{background:#0f6e66;color:#fff}
.fcx-v6{background:#fff;color:#16191f;box-shadow:inset 0 0 0 3px #137a48}
.fcx-vn{background:#eef0f3;color:#4a515b;box-shadow:inset 0 0 0 1px rgba(22,25,31,.14)}

@media only screen and (max-width:960px){
  .fcx-fields{grid-template-columns:repeat(2,minmax(0,1fr));flex-basis:100%}
  .fcx-body{grid-template-columns:1fr;padding:18px}
  .fcx-phonebox{position:static;width:auto;margin:6px 0 4px}
  .fcx-body>.fcx-phonebox{display:none}
  .fcx-mapwrap{grid-template-columns:1fr}
}
@media only screen and (max-width:520px){
  .fcx-seg{display:flex;width:100%}
  .fcx-seg button{flex:1;padding:0 10px;font-size:.95rem}
  .fcx-tabs [role="tab"] .tx small{display:none}
  .fcx-body{padding:12px;border-radius:14px}
  .fcx-sbtn{padding:10px 12px}
  .fcx-sd{padding:0 12px 12px}
}
/* Compact (the website session, October 1, 2026, at the staging deploy): every page is a short scroll, at most 4.75 desktop
   and 6 phone screens with the folds closed (Gavin's rule in CLAUDE.md). On a desktop the four fields sit in one row and the
   step list is as tall as the phone beside it, scrolling inside its card with a fade at the edge that has more; the open
   step is kept in view there (js/fc-apps-explorer.js). On a phone the rows are denser and the stages are two by two. */
/* the theme numbers every ol li; its outside marker drew "1." to "11." beside the cards on phones and, in WebKit, stretched
   each step's first line to the marker's 30 px line (a 42 px owner pill, 8 px more a step) */
.fcx ol.fcx-steps>li.fcx-step,.fcx ul.fcx-flags>li,.fcx ul.fcx-legend>li{list-style:none!important}
.fcx ol.fcx-steps>li.fcx-step::marker{content:none}
.fcx ol.fcx-steps>li.fcx-step::before{content:none}
.fcx-summary{margin:14px 0 10px}
.fcx-steps{gap:6px}
.fcx-sbtn{min-height:48px;padding:7px 12px;gap:6px 10px}
@media only screen and (min-width:961px){
  /* the app switch and the summary on the left, the fields two by two on the right (four in a row reads as crammed) */
  .fcx.is-on{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);column-gap:28px;align-items:start}
  .fcx.is-on>.fcx-controls{display:contents}
  .fcx.is-on .fcx-seg{grid-column:1;grid-row:1;justify-self:start}
  .fcx.is-on>.fcx-summary{grid-column:1;grid-row:2;margin:12px 0 0;max-width:480px}
  .fcx.is-on .fcx-fields{grid-column:2;grid-row:1/span 2;align-self:start}
  .fcx.is-on>.fcx-tabs{grid-column:1/-1;margin-top:18px}
  .fcx.is-on>.fcx-body,.fcx.is-on>.fcx-dialog{grid-column:1/-1}
  .fcx-body{padding:18px 22px}
  .fcx-panel{max-height:calc(max(42vh,260px) + 136px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
    padding:3px 12px 3px 3px;margin:-3px -12px -3px -3px}
  .fcx-panel.can-down{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 56px),rgba(0,0,0,.08));mask-image:linear-gradient(to bottom,#000 calc(100% - 56px),rgba(0,0,0,.08))}
  .fcx-panel.can-up{-webkit-mask-image:linear-gradient(to top,#000 calc(100% - 40px),rgba(0,0,0,.08));mask-image:linear-gradient(to top,#000 calc(100% - 40px),rgba(0,0,0,.08))}
  .fcx-panel.can-up.can-down{-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.08),#000 40px,#000 calc(100% - 56px),rgba(0,0,0,.08));mask-image:linear-gradient(to bottom,rgba(0,0,0,.08),#000 40px,#000 calc(100% - 56px),rgba(0,0,0,.08))}
  .fcx-phonebox{position:static}
}
@media only screen and (max-width:960px){
  .fcx-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fcx-st{flex:1 1 150px}
}
@media only screen and (max-width:520px){
  .fcx{margin-bottom:20px}
  .fcx-controls{gap:10px}
  .fcx-fields{gap:10px 12px}
  .fcx-field select{min-height:44px}
  .fcx-summary{margin:12px 0 8px}
  .fcx-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:10px}
  .fcx-tabs [role="tab"]{min-height:44px;padding:6px 10px 6px 6px;gap:8px;font-size:.95rem}
  .fcx-tabs [role="tab"] .n{width:30px;height:30px}
  .fcx-sbtn{min-height:44px;padding:5px 10px;gap:5px 8px}
  .fcx-steps{gap:5px}
  .fcx-who{padding:5px 9px;order:1}
  .fcx-sbtn .fcx-tag{order:2}
  .fcx-st{order:3}
  .fcx-sbtn:has(.fcx-tag) .fcx-st{flex-basis:100%}
  .fcx-sd .fcx-phonebox{margin:2px 0 0}
  .fcx-sd .fcx-phonebox figcaption{display:flex;align-items:center;justify-content:center;gap:12px;text-align:left;max-width:none}
  .fcx-sd .fcx-phonebox .fcx-zoom{margin-top:0;flex:0 0 auto}
}
/* even spacing between the four closed questions (website session, October 1, 2026): the first one ends the explorer's
   row, whose 5% bottom padding left 94 px above the next, against 22 px and 51 px between the others (48, 48, 51 now) */
#ajax-content-wrap .main-content>.row>.wpb_row:has(.fcx[data-fcx="explorer"]){padding-bottom:26px!important}
#ajax-content-wrap .wpb_raw_code:has(>.wpb_wrapper>.fc-sec-head[data-sec="3"]){margin-top:48px!important}
@media (prefers-reduced-motion:reduce){.fcx *{transition:none!important}}

/* W40, 2 Oct 2026 (the audit of the page): on a phone the Job select showed "Home-care ai", its last letters under the arrow.
   The select keeps the 16 px text (iOS zooms the page when a smaller select is focused) and gives the words more of its width
   (a smaller arrow, nearer the edge); below 420 px, where even that cannot hold "Child care teacher" in half a row, Job takes
   the full row (qa/accept-w40-how-the-apps-work.mjs, w40-apps-selects-not-clipped). */
@media only screen and (max-width:520px){
  .fcx-field select{padding:0 24px 0 9px;background-position:right 7px center;background-size:12px 12px}
}
@media only screen and (max-width:419px){
  .fcx-fields>.fcx-field[data-f="job"]{grid-column:1/-1}
}