/* ============================================================================
   tweaks-bar.css — chrome for the preview-only tweaks bar (tweaks-bar.js).
   Deliberately un-themed: fixed dark chrome that reads as a tool, not as part
   of the site being tweaked. Must never ship on a delivered site — deliver.ts
   blocks on the `twk` markers.
   ========================================================================== */

.twk {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 9999;
  font: 12px/1.4 -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color: #e8e6e1;
}

.twk-toggle {
  font: 600 12px/1 -apple-system, system-ui, sans-serif;
  background: #16191c;
  color: #e8e6e1;
  border: 1px solid #3a424a;
  border-radius: 4px;
  padding: 8px 14px;
  cursor: pointer;
}

.twk-panel {
  margin-top: 8px;
  width: 264px;
  max-height: 70vh;
  overflow: auto;
  background: #16191cf2;
  border: 1px solid #3a424a;
  border-radius: 6px;
  padding: 12px;
  backdrop-filter: blur(6px);
}

.twk-note { color: #9aa3ab; margin: 0 0 10px; }

.twk-row { margin-bottom: 10px; }

.twk-lab {
  display: block;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9aa3ab;
  margin-bottom: 5px;
}

.twk-grid { display: flex; flex-wrap: wrap; gap: 5px; }

.twk-grid button {
  display: inline-flex;
  border: 1px solid #3a424a;
  border-radius: 3px;
  padding: 3px;
  background: transparent;
  cursor: pointer;
}
.twk-grid button.is-on { border-color: #d68450; }
.twk-grid i { width: 12px; height: 16px; display: inline-block; }

.twk select {
  width: 100%;
  background: #1e2327;
  color: #e8e6e1;
  border: 1px solid #3a424a;
  border-radius: 4px;
  padding: 6px;
  font: 12px -apple-system, system-ui, sans-serif;
}

.twk-seg { display: flex; gap: 4px; }
.twk-seg button {
  flex: 1;
  background: #1e2327;
  color: #9aa3ab;
  border: 1px solid #3a424a;
  border-radius: 3px;
  padding: 5px 0;
  font: 11px -apple-system, system-ui, sans-serif;
  cursor: pointer;
}
.twk-seg button.is-on { color: #e8e6e1; border-color: #d68450; }

.twk input[type="color"] {
  width: 100%;
  height: 28px;
  border: 1px solid #3a424a;
  border-radius: 4px;
  background: #1e2327;
  padding: 2px;
}

.twk-foot { display: flex; gap: 6px; margin-top: 12px; }
.twk-foot button {
  flex: 1;
  font: 600 12px -apple-system, system-ui, sans-serif;
  border: 1px solid #3a424a;
  border-radius: 4px;
  background: transparent;
  color: #e8e6e1;
  padding: 8px 0;
  cursor: pointer;
}
.twk-foot .twk-copy { background: #c2703c; border-color: #c2703c; }
.twk-foot .twk-copy:hover { background: #d68450; }