`, so these applied there and
painted black labels on navy with white boxes over the top.
🔑 EXCLUDED AT THE SOURCE rather than fought from the panel stylesheet: the
input rule uses `!important`, so the panel CANNOT out-specify it -- an
`!important` war resolves by source order, which is unreadable across two
files. This keeps the commerce pages exactly as they were.
⚠ `.fko-app` is the panel container; `:not(.fko-app *)` means "not anywhere
inside it" and adds no specificity of its own beyond the argument. */
.fko-commerce-main .woocommerce form .form-row label:not(.fko-app *){margin-bottom:5px;color:var(--fko-text);font-size:.82rem;font-weight:800}
.fko-commerce-main .select2-container--default .select2-selection--single{height:46px;border:1px solid #bdc9d9;border-radius:7px;background:#fff}.fko-commerce-main .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:44px}.fko-commerce-main .select2-container--default .select2-selection--single .select2-selection__arrow{height:44px}
/* My Account: Woo navigation is one horizontal shell above the application. */
.flowkeyops-account-page.logged-in .fko-commerce-content>.fko-commerce-wrap{width:calc(100% - 64px)!important;max-width:1320px!important;margin-right:auto!important;margin-left:auto!important}
.flowkeyops-account-page.logged-in .fko-commerce-content>.fko-commerce-wrap>.woocommerce{width:100%!important;max-width:none!important;margin-right:0!important;margin-left:0!important}
.fko-commerce-main .woocommerce-MyAccount-navigation,.fko-commerce-main .woocommerce-MyAccount-content{box-sizing:border-box;width:100%!important;max-width:none!important;float:none!important}
.fko-commerce-main .woocommerce-MyAccount-navigation{margin:0 0 18px;padding:8px;border:1px solid var(--fko-line);border-radius:10px;background:#fff;box-shadow:0 10px 30px rgba(3,26,55,.06);overflow-x:auto}
.fko-commerce-main .woocommerce-MyAccount-navigation ul{display:flex;width:max-content;min-width:100%;align-items:stretch;gap:6px;margin:0;padding:0;list-style:none}
.fko-commerce-main .woocommerce-MyAccount-navigation li{flex:1 0 150px;margin:0;padding:0;border:0}
.fko-commerce-main .woocommerce-MyAccount-navigation li a{display:flex;min-height:44px;align-items:center;justify-content:center;padding:9px 13px;border:1px solid #d9e0e8;border-radius:7px;background:#fff;color:#10243d;font-size:.9rem;font-weight:700;text-align:center;white-space:nowrap}
.fko-commerce-main .woocommerce-MyAccount-navigation li a:hover{border-color:var(--fko-orange);background:#fff7f0;color:#b84f00}
.fko-commerce-main .woocommerce-MyAccount-navigation li.is-active a{border-color:var(--fko-orange);background:#fff7f0;color:#b84f00}
.fko-commerce-main .woocommerce-MyAccount-content{min-width:0;padding:26px;border:1px solid var(--fko-line);border-radius:10px;background:#fff;box-shadow:0 14px 38px rgba(3,26,55,.07)}
.fko-commerce-main .woocommerce-MyAccount-content:has(.fko-app),body.flowkeyops-control-panel-page .fko-commerce-main .woocommerce-MyAccount-content{padding:0;border:0;background:transparent;box-shadow:none}
.fko-commerce-main .woocommerce-MyAccount-content>p:first-child{margin-top:0}
.fko-commerce-main .woocommerce-Addresses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.fko-commerce-main .woocommerce-Addresses::before,.fko-commerce-main .woocommerce-Addresses::after{display:none}
.fko-commerce-main .woocommerce-Address{width:auto!important;float:none!important;padding:20px;border:1px solid var(--fko-line);border-radius:8px;background:#f8fafc}
/* Logged-out customer access */
body:not(.logged-in).flowkeyops-account-page .fko-commerce-content>.fko-commerce-wrap{max-width:1040px}
body:not(.logged-in).flowkeyops-account-page .woocommerce .u-columns.col2-set{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
body:not(.logged-in).flowkeyops-account-page .woocommerce .u-column1,body:not(.logged-in).flowkeyops-account-page .woocommerce .u-column2{width:auto;float:none}
.fko-commerce-main form.woocommerce-form-login,.fko-commerce-main form.woocommerce-form-register,.fko-commerce-main form.woocommerce-ResetPassword{margin:0!important;padding:28px!important;border:1px solid var(--fko-line)!important;border-radius:10px!important;background:#fff;box-shadow:0 14px 38px rgba(3,26,55,.08)}
.fko-commerce-main form.woocommerce-ResetPassword{max-width:620px}
.fko-commerce-main .woocommerce-form-login__rememberme{display:inline-flex;align-items:center;gap:6px;margin:10px 14px 10px 0}
/* Orders, subscriptions, cart, and checkout */
.fko-commerce-main .woocommerce table.shop_table{width:100%;overflow:hidden;margin:0 0 24px;border:1px solid var(--fko-line);border-collapse:separate;border-spacing:0;border-radius:9px;background:#fff}
.fko-commerce-main .woocommerce table.shop_table th,.fko-commerce-main .woocommerce table.shop_table td{padding:14px 15px;border-width:0 0 1px;border-color:var(--fko-line);text-align:left}
.fko-commerce-main .woocommerce table.shop_table th{background:var(--fko-navy);color:#fff;font-size:.72rem;font-weight:850;letter-spacing:.06em;text-transform:uppercase}
.fko-commerce-main .woocommerce table.shop_table tr:last-child td{border-bottom:0}
.fko-commerce-main .cart-collaterals .cart_totals,.fko-commerce-main .woocommerce-checkout-review-order,.fko-commerce-main .woocommerce-billing-fields,.fko-commerce-main .woocommerce-additional-fields{padding:24px;border:1px solid var(--fko-line);border-radius:10px;background:#fff;box-shadow:0 12px 32px rgba(3,26,55,.06)}
.fko-commerce-main .woocommerce .col2-set{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;width:100%}
.fko-commerce-main .woocommerce .col2-set::before,.fko-commerce-main .woocommerce .col2-set::after{display:none}
.fko-commerce-main .woocommerce .col2-set .col-1,.fko-commerce-main .woocommerce .col2-set .col-2{width:auto;float:none}
.fko-commerce-main #payment{border:1px solid var(--fko-line);border-radius:10px;background:#fff}
.fko-commerce-main #payment ul.payment_methods{border-color:var(--fko-line)}
.fko-commerce-main #payment div.payment_box{background:#f1f5f9;color:var(--fko-text)}
.fko-commerce-main #payment div.payment_box::before{border-bottom-color:#f1f5f9}
.fko-commerce-main .woocommerce-cart-form,.fko-commerce-main .woocommerce-order-details,.fko-commerce-main .woocommerce-customer-details{overflow:hidden;border:1px solid var(--fko-line);border-radius:14px;background:#fff;box-shadow:0 14px 38px rgba(3,26,55,.07)}
.fko-commerce-main .woocommerce-cart-form table.shop_table,.fko-commerce-main .woocommerce-order-details table.shop_table{margin:0;border:0;border-radius:0;box-shadow:none}
.fko-commerce-main .cart-collaterals .cart_totals{border-top:4px solid var(--fko-orange)}
.fko-commerce-main .cart-collaterals .cart_totals h2,.fko-commerce-main .woocommerce-order-details>h2,.fko-commerce-main .woocommerce-customer-details>h2{margin:-24px -24px 22px;padding:18px 24px;background:var(--fko-navy);color:#fff;font-size:1rem;letter-spacing:.01em}
.fko-commerce-main .woocommerce-order-details>h2,.fko-commerce-main .woocommerce-customer-details>h2{margin:0;padding:19px 24px}
.fko-commerce-main .woocommerce-order-details table.shop_table{border-top:1px solid var(--fko-line)}
.fko-commerce-main .woocommerce-customer-details address{margin:0;padding:24px;border:0;line-height:1.8}
.fko-commerce-main .woocommerce-order{display:grid;gap:24px}
.fko-commerce-main .woocommerce-order>p.woocommerce-thankyou-order-received{margin:0;padding:22px 24px;border:1px solid #bfe7d4;border-left:5px solid var(--fko-green);border-radius:12px;background:#f0fbf7;color:#125b3e;font-size:1.05rem;font-weight:850;box-shadow:0 10px 28px rgba(3,26,55,.05)}
.fko-commerce-main .woocommerce-order-overview{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0!important;padding:0!important;overflow:hidden;border:1px solid var(--fko-line);border-radius:12px;background:#fff;box-shadow:0 12px 32px rgba(3,26,55,.06)}
.fko-commerce-main .woocommerce-order-overview li{min-width:0;margin:0!important;padding:18px 20px!important;border-right:1px solid var(--fko-line)!important;color:var(--fko-muted);font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.fko-commerce-main .woocommerce-order-overview li:last-child{border-right:0!important}.fko-commerce-main .woocommerce-order-overview li strong{display:block;overflow-wrap:anywhere;margin-top:7px;color:var(--fko-text);font-size:.95rem;letter-spacing:0;text-transform:none}
/* Shop and product pages */
.fko-commerce-main .woocommerce .woocommerce-result-count,.fko-commerce-main .woocommerce .woocommerce-ordering{margin-bottom:24px}
.fko-commerce-main .woocommerce ul.products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:0;padding:0}
.fko-commerce-main .woocommerce ul.products::before,.fko-commerce-main .woocommerce ul.products::after{display:none}
.fko-commerce-main .woocommerce ul.products li.product{width:auto!important;float:none!important;margin:0!important;padding:22px;border:1px solid var(--fko-line);border-radius:10px;background:#fff;box-shadow:0 12px 32px rgba(3,26,55,.07)}
.fko-commerce-main .woocommerce ul.products li.product a img{border-radius:7px;background:#f1f5f9}
.fko-commerce-main .woocommerce ul.products li.product .woocommerce-loop-product__title{color:var(--fko-text);font-size:1.1rem;font-weight:850}
.fko-commerce-main .woocommerce ul.products li.product .price{color:#c94700;font-size:1rem;font-weight:850}
.fko-commerce-main .woocommerce div.product{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);gap:42px;padding:34px;border:1px solid var(--fko-line);border-top:4px solid var(--fko-orange);border-radius:16px;background:#fff;box-shadow:0 18px 46px rgba(3,26,55,.09)}
.fko-commerce-main .woocommerce div.product .summary,.fko-commerce-main .woocommerce div.product .fko-product-cp-visual{width:auto!important;float:none!important;margin:0!important}
.fko-commerce-main .woocommerce div.product .summary{align-self:center;padding:8px 6px}.fko-commerce-main .woocommerce div.product .summary::before{display:block;margin-bottom:9px;color:#b44000;content:"FlowKeyOps plan";font-size:.7rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.fko-commerce-main .woocommerce div.product .product_title{margin:0 0 12px;color:var(--fko-text);font-size:clamp(1.75rem,3vw,2.55rem);font-weight:900;letter-spacing:-.04em;line-height:1.08}
.fko-commerce-main .woocommerce div.product p.price,.fko-commerce-main .woocommerce div.product span.price{margin:0 0 18px;color:#c94700;font-size:1.35rem;font-weight:900}
.fko-commerce-main .woocommerce div.product .woocommerce-product-details__short-description{margin-bottom:24px;color:var(--fko-muted);font-size:1rem;line-height:1.75}
.fko-commerce-main .woocommerce div.product form.cart{display:grid;gap:12px;margin:0;padding-top:20px;border-top:1px solid var(--fko-line)}
.fko-commerce-main .woocommerce div.product form.cart button.single_add_to_cart_button.button.alt{display:inline-flex;width:150px;min-width:150px;max-width:150px;height:45px;min-height:45px;justify-self:start;align-items:center;justify-content:center;padding:0 20px!important;border:1px solid var(--fko-orange)!important;border-radius:999px!important;background:var(--fko-orange)!important;background-color:var(--fko-orange)!important;color:#fff!important;font-size:16px;font-weight:850!important;line-height:45px!important;box-shadow:0 9px 22px rgba(255,90,0,.17)!important;appearance:none;-webkit-appearance:none}
.fko-commerce-main .woocommerce div.product form.cart button.single_add_to_cart_button.button.alt:hover{border-color:#d94b00!important;background:#d94b00!important;color:#fff!important}
.fko-commerce-main .woocommerce div.product .product_meta{margin-top:20px;color:var(--fko-muted);font-size:.78rem}
.fko-commerce-main .woocommerce div.product .woocommerce-tabs,.fko-commerce-main .woocommerce div.product .related,.fko-commerce-main .woocommerce div.product .up-sells{grid-column:1/-1}
/* The product uses the exact homepage component, only constrained to its image slot. */
.fko-product-cp-visual{align-self:stretch}.fko-product-cp-visual .fko-demo-app-product{height:390px;grid-template-columns:128px 1fr}.fko-product-cp-visual .fko-demo-app-product .fko-app-side{padding:12px 9px}.fko-product-cp-visual .fko-demo-app-product .fko-app-brand{gap:4px;font-size:12px}.fko-product-cp-visual .fko-demo-app-product .fko-app-brand img{width:20px!important;max-width:20px!important;height:20px!important}.fko-product-cp-visual .fko-demo-app-product .fko-app-nav div{padding:7px 8px;font-size:10px}.fko-product-cp-visual .fko-demo-app-product .fko-app-main{padding:11px 12px}.fko-product-cp-visual .fko-demo-app-product .fko-stat4{min-height:72px;padding:9px}.fko-product-cp-visual .fko-demo-app-product .fko-stat4 b{font-size:20px}.fko-product-cp-visual .fko-demo-app-product .fko-stat4 span,.fko-product-cp-visual .fko-demo-app-product .fko-stat4 small{font-size:8px}.fko-product-cp-visual>p{margin:14px 10px 0!important;color:var(--fko-muted);font-size:.78rem;text-align:center}
/* Modern WooCommerce Cart and Checkout blocks */
.fko-commerce-main .wp-block-woocommerce-cart,.fko-commerce-main .wp-block-woocommerce-checkout{color:var(--fko-text)}
.fko-commerce-main .wc-block-components-sidebar-layout .wc-block-components-main,.fko-commerce-main .wc-block-components-sidebar{padding:24px;border:1px solid var(--fko-line);border-radius:10px;background:#fff;box-shadow:0 12px 32px rgba(3,26,55,.06)}
.fko-commerce-main .wc-block-components-sidebar-layout{gap:20px}
.fko-commerce-main .wc-block-components-button:not(.is-link){min-height:48px;border:1px solid var(--fko-orange);border-radius:7px;background:var(--fko-orange);color:#fff;font-weight:850}
.fko-commerce-main .wc-block-components-button:not(.is-link):hover{border-color:#d94b00;background:#d94b00;color:#fff}
.fko-commerce-main .wc-block-components-text-input input,.fko-commerce-main .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input{border:1px solid #bdc9d9;border-radius:7px;background:#fff;color:var(--fko-text)}
.fko-commerce-main .wc-block-components-notice-banner{border:1px solid var(--fko-line);border-left:4px solid var(--fko-orange);border-radius:8px;background:#fff;color:var(--fko-text)}
/* 🔴 THE BLOCK NOTICE MUST MATCH THE CLASSIC ONE. WooCommerce emits TWO
notice families: classic `.woocommerce-message` (order-received) and block
`.wc-block-components-notice-banner` (cart). Only the classic one had a
success variant, so a green-ticked "added to your cart" banner kept the
default ORANGE rail while the identical confirmation on the order page was
GREEN -- two colours for one meaning, on consecutive steps of one checkout.
Mirrors lines 111-114; keep the two edits together.
⚠ Woo's own class carries the state, so match THEIR class name -- a
generic attribute selector ties on specificity and loses on load order. */
.fko-commerce-main .wc-block-components-notice-banner.is-success{border-left-color:var(--fko-green)}
.fko-commerce-main .wc-block-components-notice-banner.is-error{border-left-color:var(--fko-red)}
.fko-commerce-main .wc-block-components-notice-banner.is-success .wc-block-components-notice-banner__content svg,
.fko-commerce-main .wc-block-components-notice-banner.is-success>svg{fill:var(--fko-green)}
.fko-commerce-main .wc-block-components-notice-banner.is-error>svg{fill:var(--fko-red)}
.fko-commerce-main .wc-block-cart-items,.fko-commerce-main .wc-block-components-totals-wrapper{border-color:var(--fko-line)}
.fko-commerce-main .wc-block-cart,.fko-commerce-main .wc-block-checkout{--wp--preset--color--contrast:var(--fko-text)}
.fko-commerce-main .wc-block-components-main{border-top:4px solid var(--fko-navy)!important}.fko-commerce-main .wc-block-components-sidebar{border-top:4px solid var(--fko-orange)!important}
.fko-commerce-main .wc-block-components-title,.fko-commerce-main .wc-block-cart__totals-title{color:var(--fko-text);font-weight:900;letter-spacing:-.025em}
.fko-commerce-main .wc-block-components-order-summary-item__description .wc-block-components-product-name{color:var(--fko-text);font-weight:850}
/* The real app owns its internal typography and link colors. */
.fko-commerce-main .woocommerce .fko-app h2{color:var(--fko-white);font-size:clamp(1.55rem,2.5vw,2.15rem);font-weight:750;letter-spacing:-.035em}
.fko-commerce-main .woocommerce .fko-app h3{color:var(--fko-white);font-size:1rem;font-weight:700;letter-spacing:normal}
.fko-commerce-main .woocommerce .fko-app p,.fko-commerce-main .woocommerce .fko-app a,.fko-commerce-main .woocommerce .fko-app a:hover{color:inherit}
/* Remaining public WordPress content */
body.flowkeyops-public-page{margin:0!important;padding:0!important;max-width:none!important;background:#f6f8fc!important;overflow-x:hidden!important}
.fko-public-description{max-width:760px;color:#cbd6e8;font-size:1rem;line-height:1.65}
.fko-public-entry{padding:32px;border:1px solid var(--fko-line);border-radius:10px;background:#fff;color:var(--fko-text);box-shadow:0 14px 38px rgba(3,26,55,.07)}
.fko-public-single{max-width:980px;margin:0 auto}.fko-public-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.fko-public-entry h2,.fko-public-entry h3,.fko-public-entry h4{color:var(--fko-text);font-weight:850;letter-spacing:-.025em}
.fko-public-entry h2{margin-top:0;font-size:1.55rem}.fko-public-entry h2 a{color:var(--fko-text);text-decoration:none}.fko-public-entry h2 a:hover{color:#c94700}
.fko-public-entry p,.fko-public-entry li{color:#445873;line-height:1.75}.fko-public-entry a{color:#c94700}.fko-public-entry img{max-width:100%;height:auto;border-radius:8px}
.fko-public-entry table{width:100%;border:1px solid var(--fko-line);border-collapse:collapse}.fko-public-entry th,.fko-public-entry td{padding:12px;border:1px solid var(--fko-line);text-align:left}.fko-public-entry th{background:var(--fko-navy);color:#fff}
.fko-public-entry input:not([type=checkbox]):not([type=radio]),.fko-public-entry textarea,.fko-public-entry select{width:100%;min-height:46px;padding:10px 12px;border:1px solid #bdc9d9;border-radius:7px;background:#fff;color:var(--fko-text)}
.fko-public-entry button,.fko-public-entry input[type=submit],.fko-public-button{display:inline-flex;min-height:44px;align-items:center;padding:10px 17px;border:1px solid var(--fko-orange);border-radius:7px;background:var(--fko-orange);color:#fff!important;font-weight:850;text-decoration:none}
.fko-public-entry button:hover,.fko-public-entry input[type=submit]:hover,.fko-public-button:hover{border-color:#d94b00;background:#d94b00}
.fko-public-excerpt p{margin-bottom:12px}.fko-public-read-more{font-weight:850;text-decoration:none}
.fko-public-main .navigation.pagination{margin-top:28px}.fko-public-main .nav-links{display:flex;flex-wrap:wrap;gap:7px}.fko-public-main .page-numbers{display:grid;min-width:40px;height:40px;place-items:center;border:1px solid var(--fko-line);border-radius:6px;background:#fff;color:var(--fko-text);text-decoration:none}.fko-public-main .page-numbers.current{border-color:var(--fko-orange);background:var(--fko-orange);color:#fff}
/* BetterDocs articles: focused reading layout, navigation, and components. */
body.flowkeyops-doc-page{background:#f3f6fb!important}
.flowkeyops-doc-page .fko-doc-hero{position:relative;overflow:hidden;padding:48px 0 44px;background:linear-gradient(115deg,#031a37 0%,#061f41 72%,#0b2b51 100%)}
.flowkeyops-doc-page .fko-doc-hero::before{position:absolute;inset:auto -8% -105px 40%;height:220px;border:1px solid rgba(255,255,255,.06);border-radius:50%;content:"";transform:rotate(-8deg)}
.fko-doc-hero-layout{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 390px;align-items:center;gap:54px}
.flowkeyops-doc-page .fko-doc-context{display:flex;align-items:center;gap:12px;margin-bottom:12px}.flowkeyops-doc-page .fko-doc-context .fko-commerce-eyebrow{margin:0}
.fko-doc-category{display:inline-flex;align-items:center;min-height:26px;padding:4px 10px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(255,255,255,.07);color:#dce6f5;font-size:.7rem;font-weight:800;letter-spacing:.04em}
.flowkeyops-doc-page .fko-doc-hero h1{max-width:820px;margin-bottom:12px;font-size:clamp(2.35rem,4.7vw,3.75rem);line-height:1.02}
.flowkeyops-doc-page .fko-public-description{max-width:720px;color:#cbd8e9;font-size:1.08rem;line-height:1.65}
.fko-doc-hero-graphic{width:100%;max-width:390px;justify-self:end;opacity:.98}.fko-doc-hero-graphic svg{display:block;width:100%;height:auto;overflow:visible}
.fko-doc-network{fill:#0a2c52;stroke:#587ca5;stroke-width:2}.fko-doc-network path{fill:none}.fko-doc-network circle{fill:#092746;stroke:#6e91b8}
.fko-doc-icon-disc{fill:#ff5a00;stroke:#ff9a64;stroke-width:2}.fko-doc-icon{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.fko-doc-pulse{fill:#0b315c;stroke:#ff7431;stroke-width:2}.fko-doc-check{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.flowkeyops-doc-page .fko-public-content{position:relative;padding:56px 0 88px;background:linear-gradient(180deg,#f3f6fb 0%,#f8fafc 100%)}
.flowkeyops-doc-page .fko-public-content::before{position:absolute;top:22px;left:4%;width:105px;height:105px;background-image:radial-gradient(#bdcadb 1px,transparent 1px);background-size:12px 12px;content:"";opacity:.5}
.fko-doc-single{position:relative;max-width:1180px;margin:0 auto}
.fko-doc-layout{display:grid;grid-template-columns:minmax(0,1fr)}
.fko-doc-entry{min-width:0;padding:56px 62px;border-color:#d8e1ec;border-radius:14px;box-shadow:0 18px 55px rgba(3,26,55,.075)}
.fko-doc-toc-title{display:block;margin-bottom:12px;color:var(--fko-text);font-size:.72rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase}
.fko-doc-toc nav{display:grid;gap:3px}.fko-doc-toc a{display:block;padding:8px 10px;border-left:2px solid #d8e1ec;border-radius:0 6px 6px 0;color:#52657f;font-size:.82rem;font-weight:700;line-height:1.4;text-decoration:none;transition:border-color .15s ease,background-color .15s ease,color .15s ease}
.fko-doc-toc a:hover,.fko-doc-toc a:focus-visible{border-left-color:var(--fko-orange);background:#fff0e7;color:#9f3900;outline:0}
.fko-doc-article-body{color:#344a66;font-size:1.075rem;line-height:1.78}
.fko-doc-article-body>*{max-width:72ch}.fko-doc-article-body>p:first-child{margin-top:0;color:#203b5c;font-size:1.23rem;line-height:1.7}
.fko-doc-article-body p{margin:0 0 1.35em;color:#405570;line-height:1.78}
.fko-doc-article-body h2,.fko-doc-article-body h3,.fko-doc-article-body h4{position:relative;scroll-margin-top:28px;color:var(--fko-text);line-height:1.25}
.fko-doc-article-body h2{margin:2.7em 0 .8em;padding-left:17px;font-size:clamp(1.55rem,2.7vw,2rem);font-weight:900;letter-spacing:-.035em}
.fko-doc-article-body h2::before{position:absolute;top:.13em;bottom:.1em;left:0;width:4px;border-radius:4px;background:var(--fko-orange);content:""}
.fko-doc-article-body h3{margin:2.15em 0 .65em;font-size:1.3rem;font-weight:850;letter-spacing:-.02em}.fko-doc-article-body h4{margin:1.8em 0 .55em;font-size:1.05rem;font-weight:850;letter-spacing:-.01em}
.fko-doc-article-body ul,.fko-doc-article-body ol{margin:0 0 1.55em;padding-left:1.55em}.fko-doc-article-body li{margin:.48em 0;padding-left:.25em;color:#405570;line-height:1.72}.fko-doc-article-body li::marker{color:var(--fko-orange);font-weight:900}.fko-doc-article-body li>ul,.fko-doc-article-body li>ol{margin:.45em 0 .2em}
.fko-doc-article-body a{color:#b44000;font-weight:700;text-decoration-color:rgba(180,64,0,.35);text-decoration-thickness:1px;text-underline-offset:3px}.fko-doc-article-body a:hover{color:#e14e00;text-decoration-color:currentColor}
.fko-doc-article-body strong{color:#142f50;font-weight:850}
.fko-doc-article-body hr{max-width:none;margin:2.7em 0;border:0;border-top:1px solid #d9e2ed}
.fko-doc-article-body blockquote,.fko-doc-note,.fko-doc-tip,.fko-doc-warning{max-width:none;margin:1.8em 0;padding:19px 22px;border:1px solid #d7e3f0;border-left:4px solid #2f6fa9;border-radius:8px;background:#f4f8fc;color:#294762}
.fko-doc-article-body blockquote p,.fko-doc-note p,.fko-doc-tip p,.fko-doc-warning p{margin:.25em 0;color:inherit}.fko-doc-tip{border-left-color:var(--fko-green);background:#f0fbf7}.fko-doc-warning{border-left-color:var(--fko-orange);background:#fff6ef}
.fko-doc-article-body code{padding:.16em .38em;border:1px solid #d6dfeb;border-radius:4px;background:#f1f4f8;color:#923900;font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;font-size:.88em}
.fko-doc-article-body pre{max-width:none;overflow:auto;margin:1.8em 0;padding:22px;border:1px solid #203d60;border-radius:9px;background:#061d3a;color:#e4edf8;font-size:.88rem;line-height:1.65}.fko-doc-article-body pre code{padding:0;border:0;background:transparent;color:inherit;font-size:inherit}
.fko-doc-article-body table{display:block;max-width:100%;overflow-x:auto;margin:1.8em 0;border:1px solid #d6e0ec;border-radius:9px;border-collapse:separate;border-spacing:0}.fko-doc-article-body th,.fko-doc-article-body td{min-width:140px;padding:14px 16px;border:0;border-right:1px solid #dce4ee;border-bottom:1px solid #dce4ee;vertical-align:top}.fko-doc-article-body th{background:#071f40;color:#fff;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase}.fko-doc-article-body tr:last-child td{border-bottom:0}.fko-doc-article-body th:last-child,.fko-doc-article-body td:last-child{border-right:0}
.fko-doc-article-body figure{max-width:none;margin:2em 0}.fko-doc-article-body img{display:block;width:auto;max-width:100%;height:auto;border:1px solid #d7e0eb;border-radius:10px;box-shadow:0 12px 34px rgba(3,26,55,.1)}.fko-doc-article-body figcaption{margin-top:9px;color:#64748b;font-size:.82rem;text-align:center}
.fko-doc-article-body dl{max-width:none;margin:1.6em 0}.fko-doc-article-body dt{margin:18px 0 0;padding:18px 22px 8px;border:1px solid #d8e2ed;border-bottom:0;border-left:4px solid var(--fko-orange);border-radius:10px 10px 0 0;background:linear-gradient(105deg,#fff7f1,#fff);color:#0b294d;font-size:1.12rem;font-weight:900;letter-spacing:-.015em}.fko-doc-article-body dd{margin:0;padding:5px 22px 20px;border:1px solid #d8e2ed;border-top:0;border-left:4px solid var(--fko-orange);border-radius:0 0 10px 10px;background:#fff;color:#4a5f79;line-height:1.7;box-shadow:0 8px 24px rgba(3,26,55,.04)}
.fko-doc-steps{max-width:none;counter-reset:fko-step;list-style:none;padding-left:0!important}.fko-doc-steps>li{position:relative;min-height:46px;margin:0 0 16px;padding:4px 0 16px 58px;border-bottom:1px solid #e0e7f0;counter-increment:fko-step}.fko-doc-steps>li::before{position:absolute;top:0;left:0;display:grid;width:38px;height:38px;place-items:center;border-radius:50%;background:var(--fko-navy);color:#fff;content:counter(fko-step);font-size:.84rem;font-weight:900}
.fko-doc-article-body :is(a,button,input,select,textarea):focus-visible{outline:3px solid rgba(255,90,0,.4);outline-offset:3px}
@media(max-width:900px){
.fko-commerce-wrap{width:min(100% - 36px,1320px)}
.flowkeyops-account-page.logged-in .fko-commerce-content>.fko-commerce-wrap{width:calc(100% - 36px)!important}
.fko-commerce-main .woocommerce ul.products{grid-template-columns:repeat(2,minmax(0,1fr))}
.fko-commerce-main .woocommerce .col2-set,body:not(.logged-in).flowkeyops-account-page .woocommerce .u-columns.col2-set,.fko-commerce-main .woocommerce-Addresses{grid-template-columns:1fr}
.fko-commerce-main .woocommerce div.product{grid-template-columns:1fr;gap:28px}.fko-product-cp-visual .fko-demo-app-product{height:430px;grid-template-columns:145px 1fr}
.fko-commerce-main .woocommerce-order-overview{grid-template-columns:repeat(2,minmax(0,1fr))}.fko-commerce-main .woocommerce-order-overview li:nth-child(2){border-right:0!important}.fko-commerce-main .woocommerce-order-overview li:nth-child(-n+2){border-bottom:1px solid var(--fko-line)}
.fko-public-grid{grid-template-columns:1fr}
.fko-doc-hero-layout{grid-template-columns:minmax(0,1fr) 290px;gap:28px}
}
@media(max-width:760px){
.fko-commerce-hero{padding:32px 0 28px}.fko-commerce-content{padding:28px 0 52px}
.fko-commerce-wrap{width:min(100% - 24px,1320px)}
.flowkeyops-account-page.logged-in .fko-commerce-content>.fko-commerce-wrap{width:calc(100% - 24px)!important}
.fko-commerce-main .woocommerce-MyAccount-navigation ul{display:flex}
.fko-commerce-main .woocommerce-MyAccount-content{padding:18px}
.fko-commerce-main .woocommerce ul.products{grid-template-columns:1fr}
.fko-commerce-main .woocommerce table.shop_table{display:block;overflow-x:auto}
.fko-commerce-main .woocommerce div.product{padding:20px}.fko-product-cp-visual .fko-demo-app-product{height:auto;grid-template-columns:1fr}.fko-product-cp-visual .fko-demo-app-product .fko-app-side{display:none}
.fko-commerce-main .woocommerce-order-overview{grid-template-columns:1fr}.fko-commerce-main .woocommerce-order-overview li{border-right:0!important;border-bottom:1px solid var(--fko-line)!important}.fko-commerce-main .woocommerce-order-overview li:last-child{border-bottom:0!important}
.flowkeyops-doc-page .fko-doc-hero{padding:36px 0 34px}.fko-doc-hero-layout{grid-template-columns:1fr}.fko-doc-hero-graphic{display:none}.flowkeyops-doc-page .fko-doc-context{align-items:flex-start;flex-direction:column;gap:7px}
.flowkeyops-doc-page .fko-public-content{padding:28px 0 58px}.flowkeyops-doc-page .fko-public-content::before{display:none}.fko-doc-entry{padding:34px 24px;border-radius:11px}.fko-doc-article-body{font-size:1rem}.fko-doc-article-body>p:first-child{font-size:1.12rem}.fko-doc-article-body h2{margin-top:2.25em;font-size:1.55rem}.fko-doc-article-body dt{padding:16px 17px 7px}.fko-doc-article-body dd{padding:5px 17px 17px}
}
@media(max-width:430px){.fko-commerce-main .woocommerce-MyAccount-navigation li{flex-basis:132px}}
@media(prefers-reduced-motion:reduce){.fko-doc-toc a{transition:none}}
/* Homepage capability state label. */
.fko-v4-feature h3 small{display:block;margin-top:3px;color:var(--fko-orange);font-size:10px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
/* BetterDocs reactions: the plugin hardcodes #19ca9e in assets/build/public/css/reactions.css,
which no BetterDocs setting or Customizer control can reach. Overridden to brand orange here
rather than by editing the plugin, so a BetterDocs update cannot revert it.
⚠ SPECIFICITY IS RAISED DELIBERATELY. Our stylesheet enqueues BEFORE BetterDocs' (verified
on a live docs page: flowkeyops-site.css is link 2, reactions.css is 6+). At the plugin's own
specificity (0,3,2) an identical selector would LOSE on source order and the override would
silently do nothing. Prefixing `body` raises it to (0,3,3) so it wins regardless of order.
Do NOT "simplify" these selectors back, and do not reach for !important -- two !important
rules resolve by source order again, which is the thing being worked around. */
body .betterdocs-article-reactions .betterdocs-article-reaction-links.layout-1 li a{background-color:var(--fko-orange)}
body .betterdocs-article-reactions .betterdocs-article-reaction-links.layout-1 li a:hover svg path{fill:var(--fko-orange)}
/* BetterDocs Pro "Instant Answer" widget: the plugin hardcodes #00b682, #16ca9e,
and #19ca9e in
betterdocs-pro/assets/build/public/css/instant-answer.css and
.../static/public/css/ai-chatbot.css. Those values OVERRIDE the ia_* colour
settings in betterdocs_settings. Green widget artwork is mapped to the FlowKeyOps
blue token; orange remains reserved for the widget's action controls.
⚠ Same specificity trap as the reactions override above: our stylesheet
enqueues BEFORE the plugin's on a docs page, so each selector is prefixed
with `body` to win on specificity rather than source order. Do not simplify
them back, and do not use !important. */
body .betterdocs-ia-launcher-wrapper .betterdocs-ia-launcher{background:var(--fko-orange)}
body .betterdocs-ia-common-header{background:var(--fko-orange)}
body .betterdocs-ia-common-header .betterdocs-ia-search .betterdocs-ia-search-icon{background-color:var(--fko-orange)}
body .betterdocs-ia-tabs .active p{color:var(--fko-orange)}
body .betterdocs-ia-send-message .betterdocs-ia-sm-icon i{color:var(--fko-orange)}
body .betterdocs-ia-tab-message-container .betterdocs-ia-feedback-form .betterdocs-ia-submit button{background:var(--fko-orange)}
body .betterdocs-ia-single-docs-wrapper .betterdocs-ia-singleDoc-header .content-icon-back svg path{fill:var(--fko-orange)}
body .betterdocs-ia-single-docs-wrapper .betterdocs-ia-singleDoc-header .content-icon-expand svg path{fill:var(--fko-orange)}
body .betterdocs-ia-single-docs-wrapper .betterdocs-ia-singleDoc-footer .betterdocs-ia-footer-feedback{background:var(--fko-orange)}
body .betterdocs-ia-no-doc button{color:var(--fko-orange)}
body .message.received.email-field-wrapper span.skip-email{background:var(--fko-orange)}
body .email-field-wrapper.focused .email-field{border-color:var(--fko-orange)}
/* the animated loading indicators.
Two different things, both green, and the second is NOT reachable the way the
first is:
.dot -- the three bouncing dots, coloured in CSS.
.generic-loader svg circle -- the spinning ARC. It is an inline SVG built in
JS (instant-answer.js) with stroke="#16ca9e" set as a PRESENTATION
ATTRIBUTE, not a stylesheet rule. Presentation attributes lose to any CSS
declaration, so a plain `stroke` rule wins here without !important. */
body .dot{background-color:var(--fko-orange)}
body .generic-loader svg circle,
body .chat-loading svg circle,
body .betterdocs-ia-wrapper svg circle[stroke]{stroke:var(--fko-orange)}
/* Icon artwork inside the Instant Answer panel -- including the three feedback
faces on the "How did you feel?" bar.
Every icon is an inline SVG whose colour is a fill/stroke PRESENTATION
ATTRIBUTE emitted by instant-answer.js (9 green fills across the bundle), so
there is no class per icon to target. Matching on the attribute VALUE catches
all of them at once and leaves the non-green icons (#344054, #202223) alone.
Attribute selectors are case-sensitive, so both cases are listed -- the bundle
emits upper- and lowercase forms of #00B682, #16CA9E, and #19CA9E. */
body .betterdocs-ia-root svg [fill="#00b682"],
body .betterdocs-ia-root svg [fill="#00B682"],
body .betterdocs-ia-root svg [fill="#16ca9e"],
body .betterdocs-ia-root svg [fill="#16CA9E"],
body .betterdocs-ia-root svg [fill="#19ca9e"],
body .betterdocs-ia-root svg [fill="#19CA9E"],
body .betterdocs-ia-root svg[fill="#00b682"],
body .betterdocs-ia-root svg[fill="#00B682"],
body .betterdocs-ia-root svg[fill="#16ca9e"],
body .betterdocs-ia-root svg[fill="#16CA9E"],
body .betterdocs-ia-root svg[fill="#19ca9e"],
body .betterdocs-ia-root svg[fill="#19CA9E"],
body .betterdocs-ia-wrapper svg [fill="#00b682"],
body .betterdocs-ia-wrapper svg [fill="#00B682"],
body .betterdocs-ia-wrapper svg [fill="#16ca9e"],
body .betterdocs-ia-wrapper svg [fill="#16CA9E"],
body .betterdocs-ia-wrapper svg [fill="#19ca9e"],
body .betterdocs-ia-wrapper svg [fill="#19CA9E"]{fill:var(--fko-blue)}
body .betterdocs-ia-root svg [stroke="#00b682"],
body .betterdocs-ia-root svg [stroke="#00B682"],
body .betterdocs-ia-root svg [stroke="#16ca9e"],
body .betterdocs-ia-root svg [stroke="#16CA9E"],
body .betterdocs-ia-root svg [stroke="#19ca9e"],
body .betterdocs-ia-root svg [stroke="#19CA9E"],
body .betterdocs-ia-wrapper svg [stroke="#00b682"],
body .betterdocs-ia-wrapper svg [stroke="#00B682"],
body .betterdocs-ia-wrapper svg [stroke="#16ca9e"],
body .betterdocs-ia-wrapper svg [stroke="#16CA9E"],
body .betterdocs-ia-wrapper svg [stroke="#19ca9e"],
body .betterdocs-ia-wrapper svg [stroke="#19CA9E"]{stroke:var(--fko-blue)}
/* Some BetterDocs builds write green fills into the SVG style attribute. Inline
styles take precedence over ordinary author CSS, so this narrow fallback uses
!important only for the exact legacy green values inside the AI-chat widget. */
body .betterdocs-ia-root svg [style*="#00b682" i],
body .betterdocs-ia-root svg [style*="#16ca9e" i],
body .betterdocs-ia-root svg [style*="#19ca9e" i],
body .betterdocs-ia-wrapper svg [style*="#00b682" i],
body .betterdocs-ia-wrapper svg [style*="#16ca9e" i],
body .betterdocs-ia-wrapper svg [style*="#19ca9e" i]{fill:var(--fko-blue)!important;stroke:var(--fko-blue)!important}
/* BetterDocs applies the feedback-face green to the clickable `.ia-reaction`
container, rather than to the SVG itself. Match the plugin selector and add
`body` so this wins even though this stylesheet loads first. The emoji remains
white at rest; only its hover state becomes FlowKeyOps blue. */
body .betterdocs-ia-single-docs-wrapper .betterdocs-ia-singleDoc-footer .betterdocs-ia-footer-feedback .betterdocs-ia-reaction-group .ia-reaction{background-color:var(--fko-navy3)!important}
body .betterdocs-ia-single-docs-wrapper .betterdocs-ia-singleDoc-footer .betterdocs-ia-footer-feedback .betterdocs-ia-reaction-group .ia-reaction:hover .betterdocs-emo{fill:var(--fko-navy3)!important}
/* This must follow the generic green-SVG mapping above: BetterDocs gives its
loader circle a green presentation attribute, which is otherwise recoloured
blue by that broad artwork rule. */
body .betterdocs-ia-wrapper .generic-loader svg circle,
body .betterdocs-ia-wrapper .chat-loading svg circle{stroke:var(--fko-orange)!important}
/* ⚠ Deliberately NOT a blanket `.betterdocs-ia-reaction-group svg path{fill:…}`.
The faces are multi-part SVGs; recolouring every path would fill the eyes and
mouth too and erase the face. Matching the green VALUE only repaints the
parts that were green. */
body .betterdocs-article-reactions .betterdocs-article-reaction-links li a{background-color:var(--fko-orange)}
/* ── NOTIFICATION COLOR STANDARD (user, 2026-08-18) — docs/article callouts ──
Left band + matching font: info/instruction=BLUE · notification=YELLOW (band
yellow, font darkened for contrast on white) · warning=ORANGE · error=RED.
Authored via in HTML sources, or
> [!INFO]/[!NOTICE]/[!WARNING]/[!ERROR] in Markdown (converted at build).
Documented in DOCS/technical/Standards/NOTIFICATION-COLOR-STANDARD.md. */
.fko-callout{padding:12px 16px;margin:16px 0;border-left:4px solid;border-radius:0 4px 4px 0;font-size:.95rem;line-height:1.55}
.fko-callout p:first-child{margin-top:0}
.fko-callout p:last-child{margin-bottom:0}
/* Refined 2026-08-18: NEUTRAL font on every callout (white on the navy panel;
here on light pages the equivalent is standard dark text — white would be
unreadable). Severity = band + colour-shaded background only. */
.fko-callout--info{border-left-color:#066FB6;background:#EAF4FB;color:#1F2B38}
.fko-callout--notification{border-left-color:#E6C200;background:#FFF9E0;color:#1F2B38}
.fko-callout--warning{border-left-color:#EA7317;background:#FFF3E6;color:#1F2B38}
.fko-callout--error{border-left-color:#B32D2E;background:#FDECEC;color:#1F2B38}
/* Footer sub-items (user, 2026-08-20).
🔑 ALWAYS VISIBLE, NOT A DROPDOWN. A footer is a sitemap -- hiding links
behind a hover in the page's last block is the opposite of what it is for,
and hover does not exist on touch. Sub-items simply indent under their parent.
⚠ A footer with no sub-items is unaffected: these rules only match inside
.fko-footer-group, which is emitted only when children exist. */
.fko-footer-group{display:block}
.fko-footer-group-label{display:block;font-weight:600}
.fko-footer-subitems{display:block;margin:2px 0 6px 12px;border-left:1px solid var(--fko-border,#244564);padding-left:10px}
.fko-footer-subitems a{display:block}
/* ── Product Updates changelog ─────────────────────────────────────────────
The version headings are real
, so the docs theme styles them and builds
the "On this page" rail from them (fko_prepare_doc_content). Nothing here
rebuilds either -- an earlier revision hand-rolled a rail inside the content,
which meant the theme found no , dropped its own rail and the has-toc
layout, and the hand-rolled one rendered cramped against it.
What is left is only what the theme has no opinion about: the date and badge
inside the heading, and the collapsible notes. */
/* Date and "Latest" are a SIBLING of the , never inside it: the theme builds
each rail label with wp_strip_all_tags() over the heading's inner HTML, so
anything nested there is absorbed into the label. */
.fko-doc-article-body .fko-changelog .fko-cl-meta{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
margin:-.45em 0 1.1em;padding-left:17px; /* aligns under the h2's orange bar */
}
.fko-changelog .fko-cl-date{
font-size:.88rem;font-weight:650;color:var(--fko-muted,#536682);
}
.fko-changelog .fko-cl-badge{
font-size:.62rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;
color:#b63f00;background:#fff0e7;border:1px solid #ffc6a3;border-radius:999px;
padding:2px 8px;
}
/* Collapsible notes. `name="fko-changelog"` on each makes the browser
close the siblings itself, so one-at-a-time needs no script. */
.fko-changelog .fko-cl-entry{margin:0 0 2.2em;padding-left:17px;max-width:72ch}
.fko-changelog .fko-cl-summary{
display:inline-flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
padding:7px 13px;border:1px solid var(--fko-line,#dce4ee);border-radius:999px;
background:var(--fko-soft,#f7f9fc);
font-size:.83rem;font-weight:800;color:#52657f;
transition:border-color .15s ease,background-color .15s ease,color .15s ease;
}
.fko-changelog .fko-cl-summary::-webkit-details-marker{display:none}
/* Own triangle: the default marker is inconsistent across browsers and cannot
be coloured. */
.fko-changelog .fko-cl-summary::before{
content:"";width:0;height:0;flex:0 0 auto;
border-left:5px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent;
transition:transform .15s ease;
}
.fko-changelog .fko-cl-entry[open] .fko-cl-summary::before{transform:rotate(90deg)}
.fko-changelog .fko-cl-summary:hover,.fko-changelog .fko-cl-summary:focus-visible{
border-color:var(--fko-orange,#ff5a00);background:#fff0e7;color:#9f3900;outline:0;
}
.fko-changelog .fko-cl-entry[open] .fko-cl-summary{
border-color:#ffc6a3;background:#fff0e7;color:#9f3900;
}
.fko-changelog .fko-cl-body{padding:1.15em 0 0}
.fko-changelog .fko-cl-body>*:last-child{margin-bottom:0}
@media(prefers-reduced-motion:reduce){
.fko-changelog .fko-cl-summary,.fko-changelog .fko-cl-summary::before{transition:none}
}
/* ── Docs landing: category cards ──────────────────────────────────────────
Replaces the flat article list on /docs/. Rendered by
fko_doc_category_cards(), which counts each category as the CURRENT visitor,
so a category with nothing readable never reaches this stylesheet. */
.fko-doc-cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;align-items:start}
.fko-doc-cat{padding:24px 26px 22px;border:1px solid #d8e1ec;border-radius:12px;background:#fff;box-shadow:0 10px 32px rgba(3,26,55,.055)}
.fko-doc-cat-title{margin:0 0 8px!important;font-size:1.22rem!important;font-weight:900;letter-spacing:-.02em;line-height:1.25}
.fko-doc-cat-title a{color:var(--fko-text);text-decoration:none}
.fko-doc-cat-title a:hover,.fko-doc-cat-title a:focus-visible{color:var(--fko-orange);outline:0}
.fko-doc-cat-desc{margin:0 0 14px;color:#52657f;font-size:.94rem;line-height:1.6}
.fko-doc-cat-list{margin:0;padding:0;list-style:none;display:grid;gap:2px}
.fko-doc-cat-list li{margin:0}
.fko-doc-cat-list a{display:block;padding:7px 10px;border-left:2px solid #d8e1ec;border-radius:0 6px 6px 0;color:#405570;font-size:.9rem;font-weight:650;line-height:1.45;text-decoration:none;transition:border-color .15s ease,background-color .15s ease,color .15s ease}
.fko-doc-cat-list a:hover,.fko-doc-cat-list a:focus-visible{border-left-color:var(--fko-orange);background:#fff0e7;color:#9f3900;outline:0}
.fko-doc-cat-more{display:inline-block;margin-top:12px;color:var(--fko-orange);font-size:.86rem;font-weight:800;text-decoration:none}
.fko-doc-cat-more:hover,.fko-doc-cat-more:focus-visible{text-decoration:underline;outline:0}
@media(max-width:760px){
.fko-doc-cats{grid-template-columns:1fr;gap:16px}
.fko-doc-cat{padding:20px 18px 18px}
}
@media(prefers-reduced-motion:reduce){
.fko-doc-cat-list a{transition:none}
}
/* ---- Docs shell: category sidebar | article | sticky TOC ---------------- */
.fko-doc-shell{display:grid;grid-template-columns:274px minmax(0,1fr);gap:38px;align-items:start}
.fko-doc-shell-main{min-width:0}
/* --fko-crumb-h is the breadcrumb block in column 2 (13px text at 1.45
leading + its 20px margin). The sidebar starts level with the CARD, not
with the breadcrumb above it, so the two column tops line up on load.
🔑 One token, used by the offset AND the sticky top, so they cannot drift
apart -- a mismatch here shows as the sidebar jumping on first scroll. */
.fko-doc-shell{--fko-crumb-h:39px}
.fko-doc-sidebar{position:sticky;top:24px;margin-top:var(--fko-crumb-h);max-height:calc(100vh - 48px);overflow-y:auto;overscroll-behavior:contain;padding:22px 18px;border:1px solid #d8e1ec;border-radius:14px;background:#fff;box-shadow:0 10px 32px rgba(3,26,55,.055)}
.fko-doc-sidebar-group{margin-bottom:4px}
.fko-doc-sidebar-cat{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:9px;color:var(--fko-text);font-weight:800;font-size:14px;line-height:1.3}
.fko-doc-sidebar-cat:hover{background:var(--fko-soft)}
.fko-doc-sidebar-group.is-open>.fko-doc-sidebar-cat{background:var(--fko-navy);color:#fff}
.fko-doc-sidebar-count{font-style:normal;font-size:11px;font-weight:800;color:var(--fko-muted);background:var(--fko-soft);border-radius:20px;padding:2px 8px;min-width:24px;text-align:center}
.fko-doc-sidebar-group.is-open>.fko-doc-sidebar-cat .fko-doc-sidebar-count{background:rgba(255,255,255,.17);color:#fff}
.fko-doc-sidebar-list{list-style:none;margin:4px 0 10px;padding:0 0 0 12px;border-left:2px solid var(--fko-line)}
.fko-doc-sidebar-list li{margin:0}
.fko-doc-sidebar-list a{display:block;padding:7px 10px;border-radius:7px;color:var(--fko-muted);font-size:13.5px;line-height:1.45}
.fko-doc-sidebar-list a:hover{color:var(--fko-text);background:var(--fko-soft)}
/* The current article is marked by WEIGHT AND A RULE, not colour alone --
colour alone fails for a reader who cannot distinguish it. */
/* The orange RULE would merge into the orange PILL and read as one shape,
losing the indent that marks this as a child of the category. The rule
goes transparent here and the fill carries the state instead. */
.fko-doc-sidebar-list li.is-current{margin-left:-14px;padding-left:12px;border-left:2px solid transparent}
/* Filled pill, matching the current CATEGORY -- one step lighter so the
hierarchy still reads (category is the parent of the article). */
/* Brand orange with WHITE text (user decision 2026-08-22, after seeing both).
⚠ Measured 3.13:1, under the 4.5:1 AA bar for text this size -- an accepted
trade for the brand look, not an oversight. Weight 800 and the large hit
area carry legibility; if this is ever revisited, navy text on the same
orange is 5.46:1 and needs no colour change. */
.fko-doc-sidebar-list li.is-current>a{background:var(--fko-orange);color:#fff;font-weight:800;border-radius:7px}
.fko-doc-sidebar-list li.is-current>a:hover{background:var(--fko-orange2);color:#fff}
/* ---- Breadcrumb -------------------------------------------------------- */
.fko-doc-crumbs{margin:0 0 20px}
.fko-doc-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;font-size:13px}
.fko-doc-crumbs li{display:flex;align-items:center;gap:8px;color:var(--fko-muted)}
.fko-doc-crumbs li+li:before{content:"/";color:#a9b8cc}
.fko-doc-crumbs a{color:var(--fko-muted);font-weight:650}
.fko-doc-crumbs a:hover{color:var(--fko-orange)}
.fko-doc-crumbs [aria-current="page"]{color:var(--fko-text);font-weight:800}
/* ---- Share ------------------------------------------------------------- */
.fko-doc-share{margin-top:38px;padding-top:24px;border-top:1px solid var(--fko-line)}
.fko-doc-share-title{font-size:13px;text-transform:uppercase;letter-spacing:.11em;color:var(--fko-muted);margin:0 0 12px;font-weight:900}
.fko-doc-share-links{display:flex;flex-wrap:wrap;gap:10px}
.fko-doc-share-link{display:inline-flex;align-items:center;padding:8px 15px;border:1px solid var(--fko-line);border-radius:7px;font-size:13px;font-weight:750;color:var(--fko-text);background:#fff}
.fko-doc-share-link:hover{border-color:var(--fko-orange);color:var(--fko-orange)}
.fko-doc-share-link:focus-visible,.fko-doc-sidebar-cat:focus-visible,.fko-doc-sidebar-list a:focus-visible{outline:2px solid var(--fko-orange);outline-offset:2px}
@media(max-width:1180px){
/* The sidebar is the first thing to go: the TOC is about the page you are
ON, the sidebar about pages you are not. On a narrow screen the former wins. */
.fko-doc-shell{grid-template-columns:minmax(0,1fr)}
.fko-doc-sidebar{display:none}
}
@media(max-width:980px){
.fko-doc-layout.has-toc{grid-template-columns:minmax(0,1fr)}
}
/* ---- Sections nested under the current article in the sidebar ----------- */
.fko-doc-sidebar-toc{list-style:none;margin:4px 0 8px;padding:0 0 0 14px;border-left:1px solid var(--fko-line)}
.fko-doc-sidebar-toc li{margin:0}
.fko-doc-sidebar-toc a{display:block;padding:7px 10px;border-radius:7px;color:var(--fko-muted);font-size:13.5px;line-height:1.45}
.fko-doc-sidebar-toc a:hover{color:var(--fko-orange);background:var(--fko-soft)}
.fko-doc-sidebar-toc a:focus-visible{outline:2px solid var(--fko-orange);outline-offset:2px}
/* ---- Inline TOC: the phone/tablet fallback ------------------------------
Hidden while the sidebar carries the TOC. Below 1180px the sidebar is
hidden, so WITHOUT this a narrow reader would have no section nav at all. */
.fko-doc-toc-inline{display:none}
@media(max-width:1180px){
.fko-doc-toc-inline{display:block;margin:0 0 28px;padding:18px 20px;border:1px solid #d8e1ec;border-radius:12px;background:#fff;box-shadow:0 10px 32px rgba(3,26,55,.055)}
.fko-doc-toc-inline .fko-doc-toc-title{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.11em;color:var(--fko-muted);font-weight:900;margin-bottom:10px}
.fko-doc-toc-inline a{display:block;padding:6px 0;color:var(--fko-text);font-size:14px;font-weight:650;border-bottom:1px solid var(--fko-soft)}
.fko-doc-toc-inline a:last-child{border-bottom:0}
.fko-doc-toc-inline a:hover{color:var(--fko-orange)}
}
/* ---- position:sticky needs a scrollable ROOT ---------------------------
🔴 THE BUG, found 2026-08-22: `overflow-x:hidden !important` is set on both
html and body for .flowkeyops-landing (to kill horizontal scrollbars on the
marketing pages). Any overflow other than `visible` makes that element a
scroll container, which SILENTLY disables position:sticky in every
descendant -- no error, no warning, the element simply scrolls away.
The sidebar had every correct sticky property and still did not stick.
⚠ Scoped to the DOCS page class only. Lifting it globally would restore the
horizontal scrollbars that rule exists to prevent on the landing pages.
🔑 `overflow-x:clip` gives the same visual result WITHOUT creating a scroll
container, so sticky keeps working -- that is the whole reason clip exists. */
html:has(body.flowkeyops-public-page),body.flowkeyops-public-page{overflow-x:clip!important}
/* Safari < 16 has no overflow-x:clip and would keep `hidden`, so sticky would
stay broken there. `visible` also leaves sticky working; the docs shell is
width-constrained by .fko-commerce-wrap, so it cannot overflow sideways. */
@supports not (overflow-x:clip){
html:has(body.flowkeyops-public-page),body.flowkeyops-public-page{overflow-x:visible!important}
}