/* CSS triangle and arrow generator (#78) */
.container--triangle-arrow{width:min(100% - 1.5rem,82rem);max-width:100%}.triangle-arrow-intro{max-width:66rem}.shape-app{display:grid;grid-template-columns:minmax(18rem,.72fr) minmax(0,1.28fr);gap:1rem;margin:1.5rem 0 2rem;align-items:start}
.shape-settings,.shape-preview-panel,.shape-result-panel{box-sizing:border-box;min-width:0;margin:0;padding:clamp(1rem,2.4vw,1.4rem)}.shape-result-panel{grid-column:1/-1}
.shape-panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem}.shape-panel-heading h2{margin:0}.shape-panel-heading p{margin:.2rem 0 0;color:var(--color-muted);font-size:.86rem}
.shape-mode-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem;margin:0 0 1rem;padding:0;border:0}.shape-mode-switch legend{margin-bottom:.45rem;font-weight:850}.shape-mode-switch label{position:relative;min-width:0;cursor:pointer}.shape-mode-switch input{position:absolute;inset:auto auto 0 50%;width:1px;height:1px;opacity:0}.shape-mode-switch span{display:grid;min-height:44px;place-items:center;padding:.5rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-primary);font-weight:850}.shape-mode-switch input:checked+span{border-color:var(--color-primary);background:var(--color-primary);color:#fff}.shape-mode-switch input:focus-visible+span{outline:3px solid rgba(20,107,99,.34);outline-offset:2px}
.shape-settings-panel{min-width:0}.shape-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}.shape-field{display:grid;min-width:0;align-content:start;gap:.32rem;font-weight:800}.shape-field select,.shape-field input[type="number"]{box-sizing:border-box;width:100%;max-width:100%;min-width:0;min-height:44px;padding:.55rem .65rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);font:inherit}.shape-number-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.45rem}.shape-number-wrap>span{color:var(--color-muted);font-size:.82rem}.shape-color-field input[type="color"]{box-sizing:border-box;width:100%;height:44px;padding:.25rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);cursor:pointer}.shape-field select:focus,.shape-field input:focus{border-color:var(--color-primary);outline:3px solid rgba(20,107,99,.18)}.shape-field [aria-invalid="true"]{border-color:var(--color-danger);background:#fff7f6}.shape-field-error{min-height:1.3em;color:var(--color-danger);font-size:.76rem;font-weight:750}.shape-settings-panel>.button{margin-top:.2rem}.shape-validation,.shape-warning{min-height:1.5em;margin:.55rem 0 0;font-weight:800}.shape-validation{color:var(--color-danger)}.shape-warning{color:#7a4d12}
.shape-preview-viewport{box-sizing:border-box;width:100%;max-width:100%;min-width:0;max-height:48rem;overflow:auto;border:1px solid var(--color-border);border-radius:var(--radius-md);background:repeating-linear-gradient(45deg,#f8fbfa 0,#f8fbfa 10px,#f2f7f5 10px,#f2f7f5 20px)}.shape-preview-stage{display:flex;box-sizing:border-box;min-width:320px;min-height:220px;align-items:center;justify-content:center}.shape-preview-triangle{display:inline-block;width:0;height:0;border-style:solid}.shape-preview-arrow{position:relative;display:inline-block;flex:0 0 auto}.shape-preview-arrow::after{position:absolute;width:0;height:0;border-style:solid;border-color:transparent;content:""}.shape-preview-arrow[data-direction="right"]::after{top:50%;right:calc(-1 * var(--shape-head-length));transform:translateY(-50%);border-width:var(--shape-head-half) 0 var(--shape-head-half) var(--shape-head-length);border-left-color:var(--shape-color)}.shape-preview-arrow[data-direction="left"]::after{top:50%;left:calc(-1 * var(--shape-head-length));transform:translateY(-50%);border-width:var(--shape-head-half) var(--shape-head-length) var(--shape-head-half) 0;border-right-color:var(--shape-color)}.shape-preview-arrow[data-direction="down"]::after{bottom:calc(-1 * var(--shape-head-length));left:50%;transform:translateX(-50%);border-width:var(--shape-head-length) var(--shape-head-half) 0 var(--shape-head-half);border-top-color:var(--shape-color)}.shape-preview-arrow[data-direction="up"]::after{top:calc(-1 * var(--shape-head-length));left:50%;transform:translateX(-50%);border-width:0 var(--shape-head-half) var(--shape-head-length) var(--shape-head-half);border-bottom-color:var(--shape-color)}
.shape-result-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(16rem,.55fr);gap:.8rem}.shape-result-grid>section{box-sizing:border-box;min-width:0;padding:.9rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-soft)}.shape-result-heading{display:flex;align-items:center;justify-content:space-between;gap:.7rem}.shape-result-heading h3{margin:0;color:var(--color-primary)}.shape-result-grid pre{box-sizing:border-box;width:100%;max-width:100%;min-height:5rem;margin:.75rem 0 0;padding:.8rem;overflow:auto;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}.shape-result-grid code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;line-height:1.55}.shape-result-panel .button:disabled{cursor:not-allowed;opacity:.5}.shape-status{min-height:1.5em;margin:.7rem 0 0;color:var(--color-primary);font-weight:750}.shape-status[data-state="error"]{color:var(--color-danger)}.shape-faq{margin-top:1rem}
@media(max-width:820px){.shape-app{grid-template-columns:1fr}.shape-result-panel{grid-column:auto}.shape-result-grid{grid-template-columns:1fr}}
@media(max-width:560px){.shape-panel-heading{align-items:stretch;flex-direction:column}.shape-panel-heading>.button{width:100%;min-width:0}.shape-field-grid{grid-template-columns:1fr}.shape-result-heading{align-items:stretch;flex-direction:column}.shape-result-heading .button,.shape-settings-panel>.button{width:100%;min-width:0}}
@media(max-width:420px){.container--triangle-arrow{width:min(100% - 1rem,82rem);max-width:100%;padding-inline:0}.shape-app,.shape-settings,.shape-preview-panel,.shape-result-panel,.shape-settings-panel,.shape-field-grid,.shape-field,.shape-field input,.shape-field select,.shape-preview-viewport,.shape-result-grid,.shape-result-grid>section,.shape-result-grid pre{width:100%;max-width:100%;min-width:0}.shape-settings,.shape-preview-panel,.shape-result-panel{padding:.85rem}.shape-preview-stage{min-width:300px}.shape-mode-switch span{min-height:48px}}