/* JEM-33 R4 prototype skin. Original native geometry, dimensions and mode DOM remain authoritative. */
.jem33-fishbone-preview{
 --jem-fish-ink:#16232F;--jem-fish-muted:#526173;--jem-fish-navy:#162638;
 --jem-fish-blue:#2463EB;--jem-fish-action:#347C17;--jem-fish-cyan:#B9F33A;
 --jem-fish-violet:#B9F33A;--jem-fish-orange:var(--orange,#ff9c50);
 --jem-fish-light:#F2F4F7;--jem-fish-line:#344c72;
 container-type:inline-size;container-name:jem33-fishbone;
 color:var(--jem-fish-ink);background:transparent;border:0;box-shadow:none;min-width:0;
}
body.tool-flow .jem33-fishbone-preview>.flow-tabs{
 max-width:none;width:100%;display:flex;gap:0;margin:0 0 20px!important;
 border:0;border-bottom:3px solid var(--jem-fish-blue);border-radius:16px 16px 0 0;
 background:var(--jem-fish-navy);padding:8px;box-sizing:border-box;
}
body.tool-flow .jem33-fishbone-preview>.flow-tabs button{
 color:#c6d7f0;min-height:52px;flex:1;border:0;border-radius:9px;white-space:normal;
 line-height:1.35;min-width:0;padding:12px 16px;background:transparent;
}
body.tool-flow .jem33-fishbone-preview>.flow-tabs button.flow-active{
 background:var(--jem-fish-action);color:#fff;box-shadow:inset 0 -3px var(--jem-fish-orange);
}
body.tool-flow .jem33-fishbone-preview .flow-step-number{color:var(--jem-fish-orange);font-weight:800}
body.tool-flow .jem33-fishbone-preview>.fishbone-problem{
 max-width:none;background:var(--jem-fish-light);border:1px solid #C3CBD4;
 border-left:5px solid var(--jem-fish-blue);padding:26px;gap:24px;border-radius:0 18px 18px 0;
}
body.tool-flow .jem33-fishbone-preview>.fishbone-problem .workspace-field>span{color:var(--jem-fish-ink);font-weight:700}
body.tool-flow .jem33-fishbone-preview>.fishbone-problem input{min-height:48px;background:#fff;border:1px solid #8ca7cc;border-radius:8px;color:var(--jem-fish-ink)}
body.tool-flow .jem33-fishbone-preview .flow-fish-map{grid-template-columns:minmax(0,1fr);gap:22px}
body.tool-flow .jem33-fishbone-preview .flow-fish-canvas{
 background:var(--jem-fish-navy);color:#F4F7FA;border:1px solid #30486c;
 border-top:3px solid var(--jem-fish-orange);border-radius:20px;padding:24px;
 box-shadow:0 18px 40px #0b153219;overflow:hidden;
}
body.tool-flow .jem33-fishbone-preview .fishbone-topline{gap:20px;margin:0 0 18px;color:#F4F7FA;font-size:14px}
body.tool-flow .jem33-fishbone-preview .fishbone-topline>span{font-weight:700;line-height:1.5;overflow-wrap:anywhere}
body.tool-flow .jem33-fishbone-preview .fishbone-topline button{
 background:#21365c;color:#F4F7FA;border:1px solid #6b86af;min-height:44px;
 border-radius:8px;font-size:13px;line-height:1.35;padding:10px 15px;flex-shrink:0;
}
body.tool-flow .jem33-fishbone-preview .flow-fish-mode{
 width:fit-content;max-width:100%;display:flex;gap:4px;background:#213252;
 padding:4px;border:1px solid #466187;border-radius:999px;margin-bottom:16px;
}
body.tool-flow .jem33-fishbone-preview .flow-fish-mode button{
 min-height:44px;min-width:90px;padding:10px 20px;border:0;border-radius:999px;
 color:#dbe8fb;background:transparent;font-size:14px;font-weight:700;line-height:1.35;
}
body.tool-flow .jem33-fishbone-preview .flow-fish-mode button[aria-pressed=true]{background:#B9F33A;color:#111C2B}
body.tool-flow .jem33-fishbone-preview .flow-fish-controls{gap:7px;margin:0 0 15px}
body.tool-flow .jem33-fishbone-preview .flow-fish-controls button{
 background:#21365c;color:#F4F7FA;border:1px solid #607da5;border-radius:8px;
 min-width:44px;min-height:44px;font-size:13px;font-weight:650;padding:9px 12px;
}
body.tool-flow .jem33-fishbone-preview .flow-fish-controls button:disabled{opacity:.45}
body.tool-flow .jem33-fishbone-preview .flow-fish-scale{color:var(--jem-fish-cyan);font-weight:700;font-size:14px}
body.tool-flow .jem33-fishbone-preview .flow-fish-hint{color:#B8C5D1;font-size:14px;line-height:1.6;margin-bottom:18px}
body.tool-flow .jem33-fishbone-preview .flow-fish-viewport{
 border:1px solid #334d73;border-radius:14px;background:radial-gradient(#36527d 1px,transparent 1px) 0 0/20px 20px;
 scrollbar-color:#6985b7 #17294b;
}
@media(min-width:1100px){
 body.tool-flow .jem33-fishbone-preview .flow-fish-canvas{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px 20px}
 body.tool-flow .jem33-fishbone-preview .fishbone-topline,body.tool-flow .jem33-fishbone-preview .flow-fish-hint,body.tool-flow .jem33-fishbone-preview .flow-fish-viewport{grid-column:1/-1;margin:0}
 body.tool-flow .jem33-fishbone-preview .flow-fish-mode{grid-column:1;margin:0;align-self:center}
 body.tool-flow .jem33-fishbone-preview .flow-fish-controls{grid-column:2;justify-self:end;align-self:center;margin:0;flex-wrap:wrap;justify-content:flex-end}
}
/* Native fish geometry and control positions are unchanged. Only paints change here. */
body.tool-flow .jem33-fishbone-preview .flow-fish-map[data-view=diagram] #fishbone-diagram{background:#162638}
body.tool-flow .jem33-fishbone-preview .flow-fish-map[data-view=diagram] .bone-spine{stroke:#B9F33A}
body.tool-flow .jem33-fishbone-preview .flow-fish-map[data-view=diagram] .bone-category{stroke:#2463EB}
body.tool-flow .jem33-fishbone-preview .flow-fish-map[data-view=diagram] .bone-cause{stroke:#9abbe9}
body.tool-flow .jem33-fishbone-preview .flow-fish-map[data-view=diagram] .bone-subcause{stroke:#B9F33A}
body.tool-flow .jem33-fishbone-preview .flow-fish-map[data-view=diagram] .fishbone-branch>label{color:#B8C5D1}
body.tool-flow .jem33-fishbone-preview .flow-fish-map[data-view=diagram] #fishbone-diagram .fishbone-branch textarea{
 background:#162638!important;color:#F4F7FA!important;border-color:transparent!important;min-height:44px!important;height:44px;
}
body.tool-flow .jem33-fishbone-preview .flow-fish-map[data-view=diagram] #fishbone-diagram .fishbone-causes button{
 background:#192d50;color:#F4F7FA;border-left-color:#2463EB;
}
body.tool-flow .jem33-fishbone-preview .flow-fish-map[data-view=diagram] #fishbone-diagram .fishbone-causes button[aria-pressed=true]{background:#203f6b;outline-color:#B9F33A}
body.tool-flow .jem33-fishbone-preview .flow-fish-map[data-view=diagram] #fishbone-diagram .fishbone-causes small{color:#B8C5D1}
body.tool-flow .jem33-fishbone-preview .flow-fish-map[data-view=diagram] #fishbone-diagram .fishbone-add{
 background:#172e53;color:#dfebff;border-color:#496eaa;
}
body.tool-flow .jem33-fishbone-preview .flow-fish-map[data-view=diagram] #fishbone-diagram .fishbone-head{
 background:#347C17;color:#fff;border-right-color:var(--jem-fish-orange);
}
body.tool-flow .jem33-fishbone-preview .flow-fish-map[data-view=diagram] #fishbone-diagram .fishbone-head span{color:#e0ebff}
/* Branches retains native categories, cause order and responsive list behavior. */
body.tool-flow .jem33-fishbone-preview .flow-fish-map[data-view=branches] .flow-fish-viewport{padding:16px}
body.tool-flow .jem33-fishbone-preview .flow-fish-map[data-view=branches] #fishbone-diagram{background:transparent;gap:18px}
body.tool-flow .jem33-fishbone-preview .flow-fish-map[data-view=branches] #fishbone-diagram .fishbone-branch{
 background:#dce9ff;border-color:#C3CBD4;border-top-color:#2463EB;--branch:#347C17;
 border-radius:12px;padding:16px;
}
body.tool-flow .jem33-fishbone-preview .flow-fish-map[data-view=branches] #fishbone-diagram .fishbone-branch:nth-of-type(2n){border-top-color:#B9F33A;--branch:#12576c}
body.tool-flow .jem33-fishbone-preview .flow-fish-map[data-view=branches] #fishbone-diagram .fishbone-branch:nth-of-type(3n){border-top-color:#B9F33A;--branch:#5a3e8f}
body.tool-flow .jem33-fishbone-preview .flow-fish-map[data-view=branches] #fishbone-diagram .fishbone-branch label{color:#526173;font-size:12px}
body.tool-flow .jem33-fishbone-preview .flow-fish-map[data-view=branches] #fishbone-diagram .fishbone-branch textarea{
 font-size:15px!important;line-height:1.4!important;min-height:44px!important;height:44px;
 color:var(--branch)!important;background:transparent!important;
}
body.tool-flow .jem33-fishbone-preview .flow-fish-map[data-view=branches] #fishbone-diagram .fishbone-causes p{font-size:13px;color:#526173}
body.tool-flow .jem33-fishbone-preview .flow-fish-map[data-view=branches] #fishbone-diagram .fishbone-causes button{font-size:14px;background:#f4f8ff;color:#16232F;border-color:#8ea9d1}
body.tool-flow .jem33-fishbone-preview .flow-fish-map[data-view=branches] #fishbone-diagram .fishbone-causes small{font-size:12px;color:#526173}
body.tool-flow .jem33-fishbone-preview .flow-fish-map[data-view=branches] #fishbone-diagram .fishbone-add{min-height:44px;font-size:13px;background:#eaf2ff;border-color:#829dca}
body.tool-flow .jem33-fishbone-preview .flow-fish-map[data-view=branches] #fishbone-diagram .fishbone-head{background:#347C17;color:#fff;border-right-color:var(--jem-fish-orange);padding:18px}
body.tool-flow .jem33-fishbone-preview .flow-fish-map[data-view=branches] #fishbone-diagram .fishbone-head strong{font-size:18px}
body.tool-flow .jem33-fishbone-preview .flow-fish-map[data-view=branches] #fishbone-diagram .fishbone-head span{font-size:12px;color:#e0ebff}
/* Evidence workspace gets a strong visual anchor while retaining all native copy and fields. */
body.tool-flow .jem33-fishbone-preview .fishbone-inspector{
 padding:28px;background:#dce9ff;border:1px solid #99b3d8;border-top:4px solid #2463EB;
 border-radius:18px;min-height:0;color:#16232F;
}
body.tool-flow .jem33-fishbone-preview .fishbone-inspector h2{font-size:24px;line-height:1.25;color:#16232F}
body.tool-flow .jem33-fishbone-preview .fishbone-inspector p{font-size:14px;color:#526173;line-height:1.65}
body.tool-flow .jem33-fishbone-preview .fishbone-editor-head{margin-bottom:22px;align-items:center;gap:18px}
body.tool-flow .jem33-fishbone-preview .fishbone-editor-head button{min-height:44px;font-size:13px;background:#f4f8ff;border-color:#7e9cc7;color:#16232F;padding:10px 14px}
body.tool-flow .jem33-fishbone-preview .fishbone-editor-grid{gap:20px;grid-template-columns:repeat(2,minmax(0,1fr))}
body.tool-flow .jem33-fishbone-preview .fishbone-editor-grid .workspace-field>span{font-size:13px;font-weight:700;color:#243e65}
body.tool-flow .jem33-fishbone-preview .fishbone-editor-grid textarea,
body.tool-flow .jem33-fishbone-preview .fishbone-editor-grid input,
body.tool-flow .jem33-fishbone-preview .fishbone-editor-grid select{background:#f7faff;color:#16232F;border:1px solid #91acd2;border-radius:8px;font-size:14px;min-height:48px}
body.tool-flow .jem33-fishbone-preview .fishbone-editor-grid textarea{min-height:106px;line-height:1.6;padding:12px}
body.tool-flow .jem33-fishbone-preview .flow-cause-placement{background:#c9dcfb;border-color:#91acd2;border-radius:9px;min-width:0;padding:0 14px}
body.tool-flow .jem33-fishbone-preview .flow-cause-placement>summary{color:#203e68;min-height:48px;line-height:1.4;font-weight:700;display:list-item;align-content:center;font-size:13px;overflow-wrap:anywhere}
body.tool-flow .jem33-fishbone-preview .flow-cause-placement[open]{padding-bottom:16px}
body.tool-flow .jem33-fishbone-preview .flow-cause-placement label{margin:14px 0 0}
body.tool-flow .jem33-fishbone-preview .fishbone-editor-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
body.tool-flow .jem33-fishbone-preview .fishbone-editor-actions button{min-height:44px;padding:11px 16px;border-radius:8px;font-size:13px;line-height:1.4;background:#f4f8ff;color:#17365f;border-color:#89a4cf}
body.tool-flow .jem33-fishbone-preview #fishbone-investigate{background:#347C17;color:white;border-color:#347C17}
body.tool-flow .jem33-fishbone-preview .fishbone-editor-actions button:disabled{opacity:.58;cursor:not-allowed}
body.tool-flow .jem33-fishbone-preview>.method-details{background:#d2e3fd;border:1px solid #9fb6d7;border-left:4px solid #B9F33A;border-radius:0 12px 12px 0;margin-top:24px;padding:0 20px}
body.tool-flow .jem33-fishbone-preview>.method-details summary{min-height:52px;align-content:center;color:#16232F;line-height:1.4;font-weight:700}
body.tool-flow .jem33-fishbone-preview>.method-details p{font-size:14px;line-height:1.75;color:#526173;margin:0;padding:0 0 20px}
body.tool-flow .jem33-fishbone-preview #fishbone-notice:empty{display:none}
body.tool-flow .jem33-fishbone-preview #fishbone-notice:not(:empty){background:#21365c;color:#F4F7FA;padding:14px 18px;border-left:4px solid #ff9c50;border-radius:8px;line-height:1.6}
body.tool-flow .jem33-fishbone-preview :is(button,input,textarea,select,summary,.flow-fish-viewport):focus-visible{outline:3px solid #347C17;outline-offset:3px}
body.tool-flow .jem33-fishbone-preview .flow-fish-canvas :is(button,input,textarea,select,.flow-fish-viewport):focus-visible{outline-color:#B9F33A}
body.tool-flow .jem33-fishbone-preview .flow-pane[hidden]{display:none!important}
.jem33-fishbone-preview .jem33-fishbone-confirm{width:min(520px,calc(100vw - 36px));box-sizing:border-box;padding:28px;background:#F2F4F7;color:#16232F;border:1px solid #91acd2;border-top:4px solid #ff9c50;border-radius:18px;box-shadow:0 24px 80px #0b153255}
.jem33-fishbone-preview .jem33-fishbone-confirm::backdrop{background:#0b1532aa}
.jem33-fishbone-preview .jem33-fishbone-confirm h2{margin:0 0 14px;font-size:24px;color:#16232F}
.jem33-fishbone-preview .jem33-fishbone-confirm p{font-size:15px;line-height:1.65;margin:0;color:#243e65}
.jem33-fishbone-preview .jem33-fishbone-confirm-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:24px;flex-wrap:wrap}
.jem33-fishbone-preview .jem33-fishbone-confirm-actions button{min-height:44px;padding:10px 18px;border:1px solid #7393c1;background:#f5f9ff;color:#16232F;border-radius:8px;font-size:14px}
.jem33-fishbone-preview .jem33-fishbone-confirm-actions button:last-child{background:#347C17;color:#fff;border-color:#347C17}
@container jem33-fishbone (max-width:700px){
 body.tool-flow .jem33-fishbone-preview>.flow-tabs{padding:5px;gap:2px}
 body.tool-flow .jem33-fishbone-preview>.flow-tabs button{padding:12px 10px;font-size:13px;gap:8px}
 body.tool-flow .jem33-fishbone-preview .flow-fish-canvas{padding:16px;border-radius:14px}
 body.tool-flow .jem33-fishbone-preview .fishbone-inspector{padding:22px}
 body.tool-flow .jem33-fishbone-preview .fishbone-editor-grid{grid-template-columns:minmax(0,1fr)}
 body.tool-flow .jem33-fishbone-preview .fishbone-editor-head{align-items:flex-start}
 body.tool-flow .jem33-fishbone-preview .fishbone-topline{align-items:flex-start;gap:12px}
 body.tool-flow .jem33-fishbone-preview .fishbone-topline button{max-width:50%;flex-shrink:1}
 body.tool-flow .jem33-fishbone-preview .flow-fish-map[data-view=branches] #fishbone-diagram{grid-template-columns:minmax(0,1fr)}
}
@container jem33-fishbone (max-width:420px){
 body.tool-flow .jem33-fishbone-preview>.flow-tabs .flow-step-number{display:block;margin-bottom:5px}
 body.tool-flow .jem33-fishbone-preview .flow-fish-canvas{padding:12px}
 body.tool-flow .jem33-fishbone-preview .flow-fish-mode{width:100%;box-sizing:border-box}
 body.tool-flow .jem33-fishbone-preview .flow-fish-mode button{min-width:0;flex:1;padding:9px 14px}
 body.tool-flow .jem33-fishbone-preview .flow-fish-controls{gap:6px}
 body.tool-flow .jem33-fishbone-preview .flow-fish-controls button{padding:9px 10px}
 body.tool-flow .jem33-fishbone-preview .fishbone-inspector{padding:18px}
 body.tool-flow .jem33-fishbone-preview .fishbone-inspector h2{font-size:21px}
 body.tool-flow .jem33-fishbone-preview .fishbone-editor-head{flex-wrap:wrap}
 body.tool-flow .jem33-fishbone-preview .fishbone-editor-actions{display:grid;grid-template-columns:minmax(0,1fr)}
 body.tool-flow .jem33-fishbone-preview .flow-fish-map[data-view=branches] .flow-fish-viewport{padding:10px}
 body.tool-flow .jem33-fishbone-preview>.fishbone-problem{padding:20px}
}
@media(prefers-reduced-motion:reduce){.jem33-fishbone-preview *{scroll-behavior:auto!important;transition:none!important}}