/* Shared styling for client-side (browser-only) tool workspaces.
   Layers on top of market-tools.css; no JS dependency. */

.bt-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:20px;
  margin:24px 0;
}

.bt-panel{
  background:var(--surface,#fff);
  border:1px solid var(--line,#dfe5ef);
  border-radius:14px;
  padding:22px 22px 24px;
}
.bt-panel h2{margin:0 0 14px;font-size:1.08rem}
.bt-panel h3{margin:20px 0 6px;font-size:.98rem}
.bt-panel p{margin:0 0 10px;line-height:1.6}
.bt-wide{grid-column:1/-1;margin-bottom:28px}

.bt-panel label{
  display:block;
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.02em;
  margin-bottom:6px;
}

.bt-row{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.bt-row>input,.bt-row>select,.bt-row>textarea{flex:1 1 200px;min-width:0}

.bt-panel input[type=text],
.bt-panel input[type=number],
.bt-panel input[type=url],
.bt-panel input[type=datetime-local],
.bt-panel input[type=date],
.bt-panel input[type=color],
.bt-panel select,
.bt-panel textarea{
  width:100%;
  box-sizing:border-box;
  font:inherit;
  font-size:.95rem;
  padding:10px 12px;
  border:1px solid var(--line,#dfe5ef);
  border-radius:9px;
  background:var(--surface,#fff);
  color:inherit;
}
.bt-panel textarea{
  min-height:150px;
  resize:vertical;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.86rem;
  line-height:1.5;
}
.bt-panel input:focus-visible,
.bt-panel select:focus-visible,
.bt-panel textarea:focus-visible,
.bt-panel button:focus-visible{
  outline:2px solid #1769ff;
  outline-offset:2px;
}
.bt-panel input[type=color]{padding:4px;height:42px;cursor:pointer}
.bt-panel input[type=range]{width:100%}

.bt-unit{
  margin:10px 0 0;
  font-size:.8rem;
  color:var(--muted,#5d6b84);
}

.bt-out{margin:16px 0 0;display:grid;gap:1px;background:var(--line,#dfe5ef);border:1px solid var(--line,#dfe5ef);border-radius:10px;overflow:hidden}
.bt-out:empty{display:none}
.bt-out dt{
  background:var(--surface,#fff);
  padding:9px 12px;
  font-size:.74rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted,#5d6b84);
}
.bt-out dd{
  background:var(--surface,#fff);
  margin:0;
  padding:0 12px 11px;
  display:flex;
  gap:10px;
  align-items:flex-start;
  justify-content:space-between;
}
.bt-out dd>span{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.88rem;
  word-break:break-all;
  line-height:1.45;
}

.bt-copy{
  flex:0 0 auto;
  font:inherit;
  font-size:.74rem;
  font-weight:600;
  padding:4px 9px;
  border:1px solid var(--line,#dfe5ef);
  border-radius:6px;
  background:transparent;
  color:var(--muted,#5d6b84);
  cursor:pointer;
}
.bt-copy:hover{border-color:#1769ff;color:#1769ff}

.bt-error{
  margin:14px 0 0;
  padding:10px 12px;
  border-radius:9px;
  border:1px solid #f0b4b4;
  background:#fdf1f1;
  color:#8c2b2b;
  font-size:.86rem;
}
.bt-note{
  margin:14px 0 0;
  padding:10px 12px;
  border-radius:9px;
  border:1px solid var(--line,#dfe5ef);
  background:rgba(23,105,255,.05);
  font-size:.84rem;
}

.bt-zone{border:0;padding:0;margin:14px 0 0}
.bt-zone legend{
  padding:0;
  font-size:.74rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted,#5d6b84);
  margin-bottom:8px;
}
.bt-radio,.bt-check{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:400;
  font-size:.9rem;
  margin-bottom:6px;
}
.bt-radio input,.bt-check input{width:auto;margin:0;flex:0 0 auto}

.bt-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}

.bt-pre{
  margin:16px 0 0;
  padding:14px;
  border-radius:10px;
  border:1px solid var(--line,#dfe5ef);
  background:#0d1b33;
  color:#e6ecf7;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.82rem;
  line-height:1.55;
  overflow:auto;
  max-height:420px;
  white-space:pre;
  tab-size:2;
}

.bt-swatch{
  display:inline-block;
  width:100%;
  height:56px;
  border-radius:9px;
  border:1px solid var(--line,#dfe5ef);
}

.bt-table{width:100%;border-collapse:collapse;margin-top:16px;font-size:.86rem}
.bt-table th,.bt-table td{
  text-align:left;
  padding:8px 10px;
  border-bottom:1px solid var(--line,#dfe5ef);
  vertical-align:top;
}
.bt-table th{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted,#5d6b84);
}
.bt-table td{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;word-break:break-all}

.bt-ok{color:#1c7a45;font-weight:600}
.bt-bad{color:#b3261e;font-weight:600}
.bt-warn{color:#8a6100;font-weight:600}

@media (max-width:600px){
  .bt-grid{grid-template-columns:1fr}
  .bt-panel{padding:18px 16px 20px}
  .bt-out dd{flex-direction:column;gap:6px}
}