/* Formula & SQL tool. Light cards on every screen size, so the workspace reads
   the same on the dark phone layout and the light desktop theme. */
.fx-work{padding:40px 6% 80px;background:#ece9e3;color:#16151c}
.fx-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 18px}
.fx-seg{display:inline-flex;gap:2px;padding:4px;background:#e2ded7;border:1px solid #16151c0f;border-radius:999px}
.fx-seg button{all:unset;cursor:pointer;padding:9px 16px;border-radius:999px;font-size:15px;color:#5d5a68;transition:background .2s,color .2s,box-shadow .2s}
.fx-seg button[aria-pressed="true"]{background:#fffefc;color:#16151c;box-shadow:0 1px 0 #fff inset,0 6px 14px -8px #2a254055,0 0 0 1px #e2ded7}
.fx-seg button:focus-visible{outline:2px solid #5b4f9a;outline-offset:2px}
.fx-bar select,.fx-bar input{font:inherit;font-size:15px;padding:9px 12px;border-radius:10px;border:1px solid #d9d4cc;background:#fffefc;color:#16151c}
.fx-bar [hidden],.fx-card [hidden]{display:none!important}
.fx-bar label{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:#5d5a68}
.fx-mode{margin-left:auto}
.fx-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.fx-card{background:#fffefc;border:1px solid #e2ded7;border-radius:14px;box-shadow:0 1px 0 #fff inset,0 18px 40px -30px #2a254055;padding:20px;min-width:0}
.fx-k{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 12px;font:500 13px/1.3 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;color:#5d5a68}
.fx-k span{letter-spacing:0;text-transform:none;color:#8a8696;font-weight:400}
.fx-card textarea{width:100%;box-sizing:border-box;font:400 14px/1.5 ui-monospace,"SF Mono",Menlo,Consolas,monospace;padding:12px 14px;border:1px solid #d9d4cc;border-radius:10px;background:#faf8f5;color:#16151c;resize:vertical}
#fx-data{min-height:88px;white-space:pre;overflow:auto}
#fx-ask{min-height:76px;font-family:inherit;font-size:16px}
#fx-paste{min-height:110px}
.fx-card textarea:focus,.fx-bar select:focus,.fx-bar input:focus,.fx-fields select:focus,.fx-fields input:focus{outline:2px solid #5b4f9a33;border-color:#5b4f9a}
.fx-linkbtn{all:unset;cursor:pointer;color:#5b4f9a;text-decoration:underline;text-underline-offset:3px;font-size:14px}
.fx-data-msg{margin:8px 0 0;font-size:14px;color:#b4566b;min-height:1em}
.fx-gridwrap{margin-top:12px;overflow:auto;border:1px solid #ece9e3;border-radius:10px;max-height:380px}
.fx-table{border-collapse:collapse;width:100%;font:400 13px/1.3 ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:#16151c}
.fx-table th,.fx-table td{padding:8px 10px;border-bottom:1px solid #f0ede8;text-align:left;white-space:nowrap}
.fx-table th{position:sticky;top:0;background:#faf8f5;font-weight:500;color:#3d3a47}
.fx-table th span{display:block;font-size:12px;font-weight:400;color:#8a8696}
.fx-table .rn{width:28px;color:#b5b0bd;background:#faf8f5;text-align:right}
.fx-table .hl{background:#5b4f9a0f}
.fx-table th.hl{background:#efedf8}
.fx-table .fx-new{background:#f0f7f5;color:#2f7d74;font-weight:500}
.fx-table th.fx-new{background:#e3f1ee}
.fx-table .fx-new.bad{color:#b4566b;background:#fbf0f2}
.fx-empty{margin:0;padding:18px;color:#8a8696;font-size:14px}
.fx-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px}
.fx-go{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:10px;background:#16151c;color:#fff;font-size:15px;font-weight:500}
.fx-go:hover{background:#2c2a36}
.fx-go:focus-visible{outline:2px solid #5b4f9a;outline-offset:2px}
.fx-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.fx-chips button,.fx-suggest button,.fx-cat button{all:unset;cursor:pointer;padding:7px 12px;border-radius:999px;border:1px solid #e2ded7;background:#faf8f5;font-size:14px;color:#3d3a47;transition:border-color .2s,background .2s}
.fx-chips button:hover,.fx-suggest button:hover,.fx-cat button:hover{border-color:#5b4f9a;background:#f4f2fb}
.fx-chips button:focus-visible,.fx-suggest button:focus-visible,.fx-cat button:focus-visible{outline:2px solid #5b4f9a;outline-offset:2px}
.fx-suggest{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;font-size:14px;color:#8a8696}
.fx-suggest:empty{display:none}
#fx-form{margin-top:16px;padding:14px 16px;border-radius:12px;background:#faf8f5;border:1px solid #ece9e3}
.fx-form-k{margin:0 0 10px;font:500 13px/1.3 ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:#5b4f9a}
.fx-fields{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
.fx-fields label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:#5d5a68}
.fx-fields select,.fx-fields input{font:inherit;font-size:15px;padding:8px 10px;border-radius:8px;border:1px solid #d9d4cc;background:#fffefc;color:#16151c;min-width:110px;max-width:220px}
.fx-answer{margin-top:16px;padding:16px 18px;border-radius:12px;border:1px solid #e2ded7;background:#fffefc}
.fx-answer-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.fx-badge{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;font:500 13px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace}
.fx-badge.src{background:#f0f7f5;color:#2f7d74}
.fx-badge.src.ai{background:#f4f2fb;color:#5b4f9a}
.fx-badge.ok{background:#f0f7f5;color:#2f7d74}
.fx-badge.warn{background:#fbf3e8;color:#b06a1f}
.fx-badge.bad{background:#fbf0f2;color:#b4566b}
.fx-copy{all:unset;cursor:pointer;padding:7px 14px;border-radius:8px;border:1px solid #d9d4cc;font-size:14px;color:#16151c}
.fx-copy:hover{border-color:#16151c}
.fx-code{margin:0;padding:14px 16px;border-radius:10px;background:#16151c;color:#f5f3ef;font:400 15px/1.55 ui-monospace,"SF Mono",Menlo,Consolas,monospace;white-space:pre-wrap;word-break:break-word}
.fx-explain{margin:12px 0 0;font-size:16px;line-height:1.6;color:#3d3a47}
.fx-note{margin:10px 0 0;font-size:14px;line-height:1.5;color:#5d5a68}
.fx-note.bad{color:#b4566b}
.fx-note.fx-inline{margin:0}
.fx-assume{margin:10px 0 0;padding-left:18px;font-size:14px;color:#5d5a68}
.fx-test{margin-top:14px;padding-top:14px;border-top:1px dashed #e2ded7}
.fx-value{margin:10px 0 0;font-size:28px;font-weight:600;letter-spacing:-.02em}
.fx-value span{display:block;font:500 12px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;color:#8a8696;margin-bottom:6px}
.fx-out{margin-top:10px;overflow:auto;border:1px solid #ece9e3;border-radius:10px}
.fx-steps{margin:12px 0 0;padding:0;list-style:none;counter-reset:s}
.fx-steps li{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:8px 0;border-bottom:1px solid #f0ede8;font-size:15px;line-height:1.5;color:#3d3a47}
.fx-steps b{font:500 13px/1.6 ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:#5b4f9a}
.fx-fns{margin:12px 0 0;padding:0;list-style:none}
.fx-fns li{padding:6px 0;font-size:15px;color:#3d3a47}
.fx-fns code{display:inline-block;min-width:110px;margin-right:10px;font:500 13px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:#5b4f9a}
.fx-wait{display:flex;align-items:center;gap:10px;color:#5d5a68;font-size:15px}
.fx-spin{width:14px;height:14px;border-radius:50%;border:2px solid #d8d2ec;border-top-color:#5b4f9a;animation:fx-spin .7s linear infinite}
@keyframes fx-spin{to{transform:rotate(360deg)}}
.fx-recipes-sec{padding:60px 6% 90px;color:#16151c}
.fx-recipes-sec h2{margin:0 0 8px;font-size:clamp(30px,3.4vw,46px);font-weight:600;letter-spacing:-.04em}
.fx-recipes-sec>p{margin:0 0 28px;font-size:17px;color:#5d5a68;max-width:40em}
#fx-recipes{display:grid;gap:22px}
.fx-cat h3{margin:0 0 10px;font:500 13px/1.3 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;color:#5d5a68}
.fx-cat{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start}
.fx-cat h3{flex-basis:100%}
.fx-how{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.fx-how li{font-size:15px;line-height:1.55;color:#3d3a47}
.fx-how b{display:block;margin-bottom:2px;color:#16151c}
@media(max-width:720px){.fx-mode{margin-left:0}.fx-steps li{grid-template-columns:1fr;gap:2px}.fx-recipes-sec{color:#f1f0f5}.fx-recipes-sec>p,.fx-cat h3{color:#b9b5c6}}
@media(min-width:0){.fx-recipes-sec{background:#f5f3ef}}
@media(min-width:0){
.fx-work{padding:50px max(6%,calc((100vw - 1450px)/2)) 90px}
.fx-cols{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start}
.fx-recipes-sec{padding:90px max(6%,calc((100vw - 1450px)/2)) 120px}
#fx-recipes{grid-template-columns:repeat(4,1fr)}
}
@media(prefers-reduced-motion:reduce){.fx-spin{animation:none}}
.fx-sqltools{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:16px;padding-top:14px;border-top:1px solid #ece9e3;font-size:14px;color:#5d5a68}
.fx-sqltools select{font:inherit;padding:6px 8px;border-radius:8px;border:1px solid #d9d4cc;background:#fffefc;color:#16151c}
#fx-sqlout:not(:empty){margin-top:14px}
.fx-recipe-page{display:grid;gap:18px}
.fx-recipe-page h2{margin:0 0 14px;font-size:24px;line-height:1.2;color:#16151c}
.fx-recipe-page .fx-answer-head{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.fx-recipe-page .fx-answer-head .fx-k{margin:0}
.fx-recipe-page p{color:#3d3a47}
.fx-more{margin-top:14px;font-size:15px;color:#5d5a68}
.fx-more summary{cursor:pointer;color:#5b4f9a}
.fx-related,.fx-all-grid .fx-cat{display:flex;flex-wrap:wrap;gap:8px}
.fx-related a,.fx-all-grid a{padding:7px 12px;border-radius:999px;background:#faf8f5;border:1px solid #e2ded7;color:#3d3a47;font-size:14px;text-decoration:none}
.fx-related a:hover,.fx-all-grid a:hover{border-color:#5b4f9a;color:#5b4f9a}
.fx-all-grid{display:grid;gap:22px}
.fx-all-grid .fx-cat h3{flex-basis:100%;margin:0}