/* narzedzia (plansza 5d) — kafle operacji, pasek ŁAŃCUCH, grid WEJŚCIE|WYNIK.
   Tokeny w tokens.css, komponenty (.btn-*, .menu, .segmented, .section-label,
   .price-actual, .kbd) w components.css — tu tylko layout widoku. */

.tools-subtitle{font-size:var(--font-size-sm);color:var(--text-tertiary);margin-top:10px}

/* ---- kafle narzędzi (grid 4-kol, max 980px) ---- */
.tool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px;max-width:980px}
.tool-tile{background:var(--surface-card);border:1px solid var(--border-card);
  border-radius:var(--radius-4);padding:14px 16px;cursor:pointer}
.tool-tile:hover{border-color:var(--border-field-hover)}
.tool-tile.is-active{border-color:var(--accent-dim-border)}
.tool-tile-head{display:flex;align-items:center;gap:8px}
.tool-tile-name{font-size:var(--font-size-md);font-weight:600;color:var(--text-soft)}
.tool-tile.is-active .tool-tile-name{color:var(--text-primary)}
.tool-tile-meta{font:400 var(--font-size-xs) var(--font-mono);color:var(--text-faint);margin-top:6px}
.tool-badge-active{margin-left:auto;font:500 8.5px var(--font-mono);letter-spacing:.05em;
  color:var(--accent-soft);border:1px solid var(--accent-dim-border);border-radius:var(--radius-1);padding:0 5px}
.tool-check{margin-left:auto;font:600 8.5px var(--font-mono);color:var(--success)}

/* ---- pasek ŁAŃCUCH ---- */
.tool-chain{display:flex;align-items:center;gap:10px;margin-top:26px;font:400 var(--font-size-sm) var(--font-mono);flex-wrap:wrap}
.chain-label{font:600 var(--font-size-xs) var(--font-ui);letter-spacing:.14em;color:var(--text-tertiary)}
.chain-done{color:var(--text-secondary)}
.chain-check{color:var(--success);font-weight:700}
.chain-cost{color:var(--text-faint)}
.chain-arrow{color:var(--text-disabled)}
.chain-active{color:var(--accent-soft);font-weight:600}
.chain-next{color:var(--text-faint)}
.chain-note{margin-left:auto;color:var(--text-faint)}

/* ---- grid WEJŚCIE | WYNIK ---- */
.tool-io{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:20px;max-width:980px}
.tool-panel{border-top:1px solid var(--border);padding-top:20px;min-width:0}
.tool-panel-head{display:flex;align-items:baseline;gap:10px}
.tool-panel-sub{font:400 var(--font-size-xs) var(--font-mono);color:var(--text-faint)}

.tool-inrow{display:flex;gap:16px;margin-top:14px}
.tool-thumb{position:relative;width:170px;height:170px;border:1px solid var(--border-field);
  border-radius:var(--radius-3);background:repeating-linear-gradient(45deg,var(--checker-a) 0 9px,var(--checker-b) 9px 18px);
  flex:none;overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:pointer}
.tool-thumb.is-done{border:1px solid var(--success-dim-border)}
.tool-thumb img{width:100%;height:100%;object-fit:contain}
.tool-thumb-ph{font:400 9px var(--font-mono);color:var(--text-ghost);text-align:center;padding:0 10px}
.tool-thumb-badge{position:absolute;top:6px;left:6px;font:600 8.5px var(--font-mono);color:var(--success);
  background:var(--success-dim-bg);border:1px solid var(--success-dim-border);border-radius:var(--radius-1);padding:1px 6px}
.tool-incol{flex:1;min-width:0}
.tool-source{font:400 var(--font-size-xs) var(--font-mono);color:var(--text-faint)}

.tool-modelrow{display:flex;align-items:center;gap:8px;margin-top:12px}
.tool-modelrow .field-inline{flex:1;min-width:0}
.tool-modelrow select.field{width:100%}
.tool-row-label{font-size:var(--font-size-base);color:var(--text-secondary);width:50px;flex:none}
.tool-model-default{font:400 var(--font-size-2xs) var(--font-mono);color:var(--text-faint);flex:none}
.tool-alts{font:400 var(--font-size-2xs) var(--font-mono);color:var(--text-faint);margin-top:7px;padding-left:58px}
.tool-paramrow{display:flex;align-items:center;gap:8px;margin-top:8px}
.tool-paramrow .field{width:140px}

.tool-run{margin-top:16px}

/* ---- WYNIK ---- */
.out-empty{font:400 var(--font-size-sm) var(--font-mono);color:var(--text-ghost);margin-top:14px}
.out-actions{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.sendto-wrap{position:relative}
.sendto-menu{position:absolute;top:calc(100% + 6px);left:0;width:210px;z-index:20}
.sendto-item{display:flex;justify-content:space-between;gap:10px}
.sendto-price{font:400 var(--font-size-xs) var(--font-mono);color:var(--text-tertiary)}
.sendto-note{border-top:1px solid var(--border);padding:7px 12px;font-size:var(--font-size-sm);color:var(--text-faint)}