/* TTB Color Master – align to your picker layout, no new IDs/classes */

/* Base container */
.ttb-tool{
  max-width:980px;margin:24px auto;padding:20px;border:1px solid #e5e7eb;
  border-radius:16px;background:#fff;box-shadow:0 2px 20px rgba(0,0,0,.04);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif;color:#111827
}
.ttb-header h2{margin:0 0 6px 0;font-size:1.5rem;font-weight:800}
.ttb-sub{margin:0 0 16px 0;color:#6b7280}
.ttb-mode-select{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.ttb-note{color:#6b7280;font-size:.9rem}
.ttb-btn{appearance:none;border:1px solid #3b82f6;background:#3b82f6;color:#fff;padding:10px 14px;border-radius:999px;font-weight:700;cursor:pointer;transition:transform .05s ease, filter .15s ease, box-shadow .15s ease;box-shadow:0 6px 18px rgba(59,130,246,.25)}
.ttb-btn:hover{filter:brightness(1.05)} .ttb-btn:active{transform:translateY(1px)}
.ttb-btn.ghost{background:transparent;color:#374151;border-color:#d1d5db;box-shadow:none}
.ttb-btn.alt{background:#10b981;border-color:#10b981;box-shadow:0 6px 18px rgba(16,185,129,.25)}
.ttb-btn.copy{background:#6b7280;border-color:#6b7280;box-shadow:0 6px 18px rgba(107,114,128,.25)}

/* =========================
   BASE COLOR: THREE COLUMNS
   ========================= */

/* Turn the whole Base Color pane into a 3‑column grid:
   1) Color wheel + hue + SV
   2) From image (label + input + canvas)
   3) Eyedropper + outputs (HEX/RGB/HSL/OKLCH + recents)
*/
#ttb-pane-main{
  display:grid;
  grid-template-columns: 280px 1fr 1fr;
  gap:24px;
  align-items:start;
}

/* Col 1: your existing wheel group stays intact */
.wheel-wrap{grid-column:1;display:flex;gap:12px;align-items:flex-start}
#ttb-wheel,#ttb-sv{display:block;width:240px;height:240px}

/* Col 2: “from image” block (use existing label + input + canvas) */
label.ttb-sub[for="ttb-image-upload"]{grid-column:2;margin-bottom:8px}
#ttb-image-upload{grid-column:2;display:block;width:100%;max-width:100%;
  padding:14px 16px;border:2px dashed #9ca3af;border-radius:10px;background:#f9fafb;
  overflow:hidden;white-space:nowrap;color:#374151}
#ttb-image-upload:hover,#ttb-image-upload:focus{border-color:#3b82f6;background:#f3f4f6;outline:none}
#ttb-image-upload::file-selector-button{background:#3b82f6;border:none;color:#fff;font-weight:600;padding:8px 12px;margin-right:12px;border-radius:6px;cursor:pointer}
#ttb-image-upload::file-selector-button:hover{background:#2563eb}
#ttb-image-canvas{grid-column:2;margin-top:10px;max-width:100%;border:1px solid #e5e7eb;display:none}

/* Col 3: eyedropper + the output rows */
.swatch-row{grid-column:3;display:flex;align-items:center;gap:10px;margin-top:0}
.swatch{display:inline-block;width:40px;height:40px;border-radius:8px;border:1px solid #d1d5db;box-shadow:inset 0 0 0 2px rgba(255,255,255,.4)}

.out-row{grid-column:3;display:grid;grid-template-columns:80px 1fr auto;gap:10px;align-items:center;width:100%;max-width:520px; margin: 10px 0;}
.out-row input{
  box-sizing:border-box;width:100%;height:40px;border:1px solid #d1d5db;border-radius:8px;
  padding:8px 10px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;background:#fff
}
.ttb-btn.copy{height:40px;padding:0 14px;border-radius:10px}

.recent-wrap{grid-column:3;margin-top:8px}
.recents{display:flex;flex-wrap:wrap;gap:8px}
.recents .recent{width:28px;height:28px;border-radius:6px;border:1px solid #e5e7eb;cursor:pointer}

/* Contrast checker spans full width under the three columns */
.ttb-contrast-block{grid-column:1/-1;margin-top:18px;border-top:1px dashed #e5e7eb;padding-top:12px}
.ttb-contrast-preview{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end;max-width:780px}
.ttb-contrast-preview input{height:40px;border:1px solid #d1d5db;border-radius:8px;padding:8px 10px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono"}
.ttb-contrast-results{margin-top:10px;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.ttb-pass{color:#059669;font-weight:700} .ttb-fail{color:#dc2626;font-weight:700}

/* =========================
   OTHER PANES (unchanged)
   ========================= */
.ttb-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:900px){.ttb-grid-2{grid-template-columns:1fr}}

.ttb-code{width:100%;min-height:90px;border:1px solid #d1d5db;border-radius:10px;padding:10px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono";white-space:pre;overflow:auto;background:#fbfbfb}

.ttb-scale{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.ttb-scale .sw{border:1px solid #e5e7eb;border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:8px;background:#fff}
.ttb-scale .sw .box{height:54px;border-radius:8px;border:1px solid #e5e7eb;box-shadow:inset 0 0 0 2px rgba(255,255,255,.4)}
.ttb-scale .sw .meta{font-size:.85rem;color:#374151;display:flex;justify-content:space-between;gap:6px;align-items:center}
.ttb-scale .sw .tags{font-size:.75rem;color:#6b7280;display:flex;gap:6px;flex-wrap:wrap}
.ttb-chip{border:1px solid #e5e7eb;border-radius:999px;padding:2px 8px;font-size:.75rem}

.ttb-grad-preview{height:120px;border:1px solid #e5e7eb;border-radius:12px}
.ttb-stops{display:flex;flex-direction:column;gap:8px}
.ttb-stop{display:flex;align-items:center;gap:8px}
.ttb-stop input[type="color"]{width:40px;height:32px;border:none;background:none;padding:0}
.ttb-stop input[type="number"]{max-width:90px}

/* =========================
   RESPONSIVE BREAKPOINTS
   ========================= */
/* 2 columns on medium: wheel | (image + eyedropper stack) */
@media (max-width: 1050px){
  #ttb-pane-main{grid-template-columns: 280px 1fr}
  label.ttb-sub[for="ttb-image-upload"], #ttb-image-upload, #ttb-image-canvas{grid-column:2}
  .swatch-row, .out-row, .recent-wrap{grid-column:2}
  .ttb-contrast-block{grid-column:1/-1}
}

/* 1 column on small */
@media (max-width: 680px){
  #ttb-pane-main{grid-template-columns: 1fr}
  .wheel-wrap, label.ttb-sub[for="ttb-image-upload"], #ttb-image-upload, #ttb-image-canvas,
  .swatch-row, .out-row, .recent-wrap{grid-column:1}
}

/* --- Match Color Picker tab pills exactly --- */

/* container spacing like the picker */
.ttb-mode-select{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:12px;
}

/* base pill */
.ttb-mode-select .ttb-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  border-radius:9999px;
  font-weight:700;
  line-height:1;
  border-width:1px;
  transition:
    transform .05s ease,
    filter .15s ease,
    box-shadow .15s ease,
    background-color .15s ease,
    color .15s ease,
    border-color .15s ease;
}

/* ACTIVE (matches your blue “Color Wheel” button) */
.ttb-mode-select .ttb-btn:not(.ghost){
  background:#3b82f6;                 /* same blue */
  border-color:#3b82f6;
  color:#fff;
  box-shadow:0 6px 18px rgba(59,130,246,.25);
}
.ttb-mode-select .ttb-btn:not(.ghost):hover{ filter:brightness(1.05); }
.ttb-mode-select .ttb-btn:not(.ghost):active{ transform:translateY(1px); }

/* INACTIVE (matches your light pill for “From Image”) */
.ttb-mode-select .ttb-btn.ghost{
  background:#ffffff;
  color:#374151;
  border-color:#d1d5db;
  box-shadow:0 1px 0 rgba(0,0,0,.03), 0 8px 20px rgba(0,0,0,.04);
}
.ttb-mode-select .ttb-btn.ghost:hover{
  background:#f3f4f6;
  border-color:#cfd4dc;
}

/* focus ring parity */
.ttb-mode-select .ttb-btn:focus-visible{
  outline:2px solid transparent;
  box-shadow:0 0 0 3px rgba(59,130,246,.35);
}

/* keep consistent height with picker controls */
.ttb-mode-select .ttb-btn,
.ttb-btn.copy{ height:40px; }

#ttb-colorpicker-subnav.ttb-mode-select { margin-bottom: 12px; }
#ttb-colorpicker-subnav .ttb-btn { height: 40px; padding: 10px 16px; }

/* --- Contrast checker polished UI --- */
.ttb-contrast-grid{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap:16px;
  align-items:start;
}
@media (max-width: 720px){
  .ttb-contrast-grid{ grid-template-columns: 1fr; }
}

.ttb-contrast-card{
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:12px;
  background:#fff;
}
.ttb-contrast-tile{
  height:120px;
  border-radius:10px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:6px;
  border:1px solid #e5e7eb;
}
.ttb-contrast-tile .lg{ font-size:44px; font-weight:800; line-height:1; }
.ttb-contrast-tile .sm{ font-size:14px; opacity:.9 }

.ttb-contrast-chipset{
  display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;
}
.ttb-contrast-chipset .chip{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid #e5e7eb; border-radius:999px; padding:4px 10px; font-size:12px; color:#374151;
  background:#f9fafb;
}
.ttb-contrast-chipset .dot{
  width:12px; height:12px; border-radius:999px; border:1px solid rgba(0,0,0,.1); display:inline-block;
}

.ttb-contrast-info{
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:12px;
  background:#fff;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.ttb-kv{ display:flex; justify-content:space-between; align-items:center; gap:10px }
.ttb-kv .k{ color:#6b7280; font-weight:600 }
.ttb-kv .v{ font-weight:800; font-size:18px; }

.ttb-badges{ display:flex; flex-wrap:wrap; gap:8px }
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px; font-weight:700; font-size:12px; line-height:1;
  border:1px solid transparent;
}
.badge.pass{ background:#ecfdf5; color:#065f46; border-color:#a7f3d0 }
.badge.fail{ background:#fef2f2; color:#991b1b; border-color:#fecaca }

.ttb-contrast-note{ color:#6b7280; font-size:12px }

/* Scales tab: align and space the Steps + Method controls */
#ttb-pane-palettes .out-row{
  display:flex;
  align-items:center;
  gap:10px;           /* at least 10px spacing as requested */
  flex-wrap:wrap;     /* prevents overlap on small widths */
}

/* tidy control sizes */
#ttb-pane-palettes input[type="number"]{
  width:80px;
  height:40px;
}

#ttb-scale-mode{
  min-width:160px;
  height:40px;
}

.ttb-grid-2 .copy { font-size: 12px; padding: 2px 10px; height: auto; }

#ttb-pane-exports .out-row { display: flex; }