/* Flexbox generator (#58) */
.container--flexbox-tool{max-width:1320px}
.flexbox-panel{display:grid;gap:1rem;min-width:0}
.flexbox-heading,.flexbox-card-heading,.flexbox-code-block>div,.flexbox-item-toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.flexbox-heading h2,.flexbox-card-heading h3,.flexbox-code-block h4{margin:0}
.flexbox-heading p,.flexbox-card-heading p,.flexbox-code-block p{margin:.25rem 0 0}
.flexbox-step{color:var(--color-primary,#146b63);font-size:.78rem;font-weight:800;letter-spacing:.12em}
.flexbox-preset-section{padding:1rem;border:1px solid #cfe2df;border-radius:14px;background:#f5fbfa}
.flexbox-preset-section h3{margin:0 0 .7rem}
.flexbox-presets{display:flex;flex-wrap:wrap;gap:.55rem}
.flexbox-presets button,.flex-item-tab{min-height:42px;padding:.55rem .75rem;border:1px solid #9fcac4;border-radius:10px;background:#fff;color:#16443f;font:inherit;font-weight:700;cursor:pointer}
.flexbox-presets button:hover,.flex-item-tab:hover{background:#e9f6f4}
.flexbox-presets button:focus-visible,.flex-item-tab:focus-visible,.flex-preview-item:focus-visible{outline:3px solid #f0a33b;outline-offset:2px}
.flexbox-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:1rem;align-items:start;min-width:0}
.flexbox-settings,.flexbox-results{display:grid;gap:1rem;min-width:0}
.flexbox-card{min-width:0;padding:1rem;border:1px solid #d4e1df;border-radius:16px;background:#fff;box-shadow:0 8px 26px rgba(24,69,63,.07)}
.flexbox-card-heading{justify-content:flex-start}
.flexbox-card-heading>span{display:grid;place-items:center;flex:0 0 2rem;width:2rem;height:2rem;border-radius:50%;background:#146b63;color:#fff;font-weight:800}
.flexbox-control-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin-top:1rem;min-width:0}
.flexbox-control-grid label,.flexbox-gap-grid label{display:grid;gap:.35rem;min-width:0;color:#294642;font-weight:700}
.flexbox-control-grid select,.flexbox-control-grid input,.flexbox-gap-grid input{width:100%;max-width:100%;min-width:0;min-height:44px;padding:.6rem .7rem;border:1px solid #9eb8b4;border-radius:9px;background:#fff;color:#183d39;font:inherit}
.flexbox-control-grid select:disabled,.flexbox-control-grid input:disabled,.flexbox-gap-grid input:disabled{background:#edf2f1;color:#687b78;cursor:not-allowed}
.flexbox-control-grid [aria-invalid="true"],.flexbox-gap-grid [aria-invalid="true"]{border-color:#b42318;box-shadow:0 0 0 2px rgba(180,35,24,.15)}
.flexbox-help{margin:.7rem 0 0;color:#526864;font-size:.92rem}
.flexbox-warning{margin-top:.8rem;padding:.75rem .85rem;border-left:4px solid #b36b00;border-radius:8px;background:#fff4d6;color:#624000}
.flexbox-warning p{margin:.3rem 0 0}
.flexbox-warning[hidden]{display:none}
.flexbox-gap-settings,.flexbox-preview-size{min-width:0;margin:1rem 0 0;padding:.8rem;border:1px solid #d2dfdd;border-radius:12px}
.flexbox-gap-settings legend,.flexbox-preview-size legend{padding:0 .35rem;font-weight:800}
.flexbox-gap-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;margin-top:.65rem;min-width:0}
.flexbox-preview-size .flexbox-gap-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.flexbox-check{display:flex;align-items:center;gap:.55rem;font-weight:700}
.flexbox-check input{width:1.2rem;height:1.2rem}
.flexbox-item-toolbar{margin-top:1rem}
.flexbox-item-list{display:flex;flex-wrap:wrap;gap:.45rem;min-width:0}
.flex-item-tab[aria-pressed="true"]{border-color:#146b63;background:#146b63;color:#fff}
.flexbox-item-actions{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end}
.flexbox-preview-card{min-width:0}
.flexbox-preview-scroll{width:100%;max-width:100%;min-width:0;overflow:auto;padding:.75rem;border:1px solid #c8d8d5;border-radius:12px;background:repeating-linear-gradient(45deg,#edf5f4,#edf5f4 10px,#f8fbfb 10px,#f8fbfb 20px)}
.flexbox-preview{box-sizing:border-box;max-width:none;padding:16px;border:2px dashed #5d9089;border-radius:10px;background:#fff;overflow:auto}
.flex-preview-item{box-sizing:border-box;min-width:72px;min-height:56px;padding:.75rem;border:2px solid rgba(20,107,99,.35);border-radius:10px;color:#153e39;font:700 1rem/1.25 system-ui,sans-serif;cursor:pointer}
.flex-preview-item:nth-child(6n+1){background:#dff4ef}.flex-preview-item:nth-child(6n+2){background:#fbe8bc;font-size:1.2rem}.flex-preview-item:nth-child(6n+3){background:#e6e4fb;font-size:.9rem}.flex-preview-item:nth-child(6n+4){background:#f8dfe5}.flex-preview-item:nth-child(6n+5){background:#dceafa}.flex-preview-item:nth-child(6n){background:#e8f0d4}
.flex-preview-item[aria-pressed="true"]{border-color:#b66500;box-shadow:0 0 0 3px rgba(240,163,59,.4)}
.flexbox-code-card{display:grid;gap:.9rem}
.flexbox-code-block{min-width:0;border:1px solid #d2dfdd;border-radius:12px;overflow:hidden}
.flexbox-code-block>div{align-items:center;padding:.7rem .8rem;background:#eef7f5}
.flexbox-code-block pre{max-width:100%;min-width:0;margin:0;padding:.9rem;overflow:auto;background:#142927;color:#e8fffb;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
.flexbox-code-block code{font:500 .88rem/1.55 ui-monospace,SFMono-Regular,Consolas,monospace}
.flexbox-panel .form-message[data-status-kind="success"]{color:#146b35}.flexbox-panel .form-message[data-status-kind="error"]{color:#b42318}
@media(max-width:980px){.flexbox-workspace{grid-template-columns:1fr}.flexbox-results{grid-template-columns:1fr 1fr}.flexbox-preview-card{grid-column:1/-1}}
@media(max-width:720px){.flexbox-results{grid-template-columns:1fr}.flexbox-control-grid{grid-template-columns:1fr}.flexbox-gap-grid,.flexbox-preview-size .flexbox-gap-grid{grid-template-columns:1fr}.flexbox-heading,.flexbox-item-toolbar{align-items:stretch;flex-direction:column}.flexbox-item-actions{justify-content:flex-start}}
@media(max-width:360px){.container--flexbox-tool{max-width:100%;padding-inline:12px}.flexbox-panel,.flexbox-workspace,.flexbox-settings,.flexbox-results,.flexbox-card,.flexbox-preview-scroll,.flexbox-code-block{width:100%;max-width:100%;min-width:0}.flexbox-presets{display:grid;grid-template-columns:1fr 1fr}.flexbox-presets button{min-width:0;padding:.5rem .35rem}.flexbox-card{padding:.8rem}.flexbox-code-block>div{align-items:stretch;flex-direction:column}.flexbox-code-block button{width:100%}.flexbox-item-actions{display:grid;grid-template-columns:1fr}.flexbox-item-actions button{width:100%}}