/* The design tool, docs/3-design.php (.dt-* classes) - split out of style.css. */

/* ---- The design tool (docs/3-design.php) ---- */

.dt-tool .dt-intro { max-width: 68ch; }

.dt-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 10px;
}
@media (min-width: 860px) {
  /* Narrow on purpose: the sidebar holds five switches, five dots, three sliders and a select,
     none of which need more than about 150px to read comfortably - a wide column just left
     them stranded on the left with empty space to their right. */
  .dt-grid { grid-template-columns: 150px minmax(0, 1fr); gap: 26px; align-items: start; }
}

/* ---- Sidebar: Show / Colour / Sizes / Output ---- */

.dt-controls fieldset {
  border: none;
  padding: 0;
  margin: 0 0 12px;
}
.dt-controls legend {
  padding: 0;
  margin-bottom: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a94a4;
}

/* The same track-and-knob switch the hero's own LaTeX-markup/export-options/inline toggles use
   (.cc-switch, eqneditor.css) - reproduced here under its own scope rather than reused, because
   that rule is written as .CCEqnEditor .cc-switch and this sidebar is not part of one; wrapping
   it in that class would also bring a border, padding and white background it does not want
   (#equation-editor, .CCEqnEditor, same file). Same class names, same markup shape, so the two
   read as one control wherever a visitor has seen the other. */
.dt-switch.cc-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
  cursor: pointer;
  user-select: none;
}
.dt-switch.cc-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.dt-switch .cc-switch-track {
  display: inline-block;
  width: 28px;
  height: 16px;
  background: #ccc;
  border-radius: 8px;
  position: relative;
  transition: background 0.2s;
  vertical-align: middle;
  flex: 0 0 auto;
}
.dt-switch .cc-switch-knob {
  display: block;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: left 0.2s;
}
.dt-switch input:checked + .cc-switch-track { background: #4caf50; }
.dt-switch input:checked + .cc-switch-track .cc-switch-knob { left: 14px; }
.dt-switch input:focus-visible + .cc-switch-track {
  outline: 2px solid #003794;
  outline-offset: 2px;
}
.dt-switch .cc-switch-label { font-size: 0.82rem; color: #2b3a52; }
.dt-switch input:checked ~ .cc-switch-label { color: #003794; font-weight: 600; }

.dt-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
/* A plain circle of the colour itself, not a labelled pill: five words next to five dots said
   the same thing twice, in less space than the dots alone now take. The name is still there,
   as a tooltip, for whoever wants it. */
/* .dt-swatches .dt-swatch, not the bare class: the docs page resets every <button>, more than
   once, ending in `body.ui button:not(.green):not(.blue) { background-color: var(--d-bg); }` -
   three classes and two elements once :not()'s own specificity is counted in, which two classes
   here cannot outrank by appearing later in the file; CSS breaks that tie by specificity, not
   order. Qualifying with the parent is enough for most of this, and !important on the two
   properties that rule still wins (background, border-radius) closes the gap the rest of the
   way rather than chasing its specificity indefinitely. */
.dt-swatches .dt-swatch {
  --sw: #003794;
  width: 22px;
  height: 22px;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 2px solid #fff;
  border-radius: 50% !important;
  background: var(--sw) !important;
  box-shadow: 0 0 0 1px #dbe2ec;
  cursor: pointer;
  text-transform: none;
}
.dt-swatches .dt-swatch.is-active { box-shadow: 0 0 0 2px var(--sw); }
.dt-swatches .dt-swatch:focus-visible { outline: 2px solid #003794; outline-offset: 2px; }

.dt-slider {
  display: block;
  margin-bottom: 8px;
  font-size: 0.78rem;
  color: #2b3a52;
  max-width: 140px;
}
.dt-slider > span {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2px;
}
.dt-slider input[type="range"] { width: 100%; }
.dt-slider [data-size-value] { font-variant-numeric: tabular-nums; color: #8a94a4; }

.dt-controls select {
  width: 100%;
  max-width: 140px;
  padding: 5px 7px;
  border: 1px solid #dbe2ec;
  border-radius: 5px;
  font-size: 0.82rem;
  background: #fff;
}

/* ---- The panel picker: the bin and the toolbar's three rows, side by side ---- */

.dt-panels {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
@media (min-width: 640px) {
  /* The toolbar first and wider, the bin second and narrower - it is a shelf of spares, not
     the thing being built, and reads that way to the left of it in source order too: what you
     are making comes before what is left over. */
  .dt-panels { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}

.dt-zone {
  border: 1px solid #dbe2ec;
  border-radius: 6px;
  padding: 8px 12px 10px;
  background: #fbfcfe;
}
.dt-zone-bin { background: #f5f6f8; min-height: 96px; }
.dt-zone h4 {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8a94a4;
  display: flex;
  justify-content: space-between;
}
.dt-zone-count { font-weight: 400; text-transform: none; letter-spacing: normal; }

.dt-row + .dt-row { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e4e9f0; }
.dt-row-label {
  margin-bottom: 5px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #b0b8c4;
}

.dt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 24px;
}

/* Small and grey - the panel names are labels to drag, not calls to action, and the rounded,
   coloured, bordered version of them (the same shape a page's own section tabs use) claimed
   far more attention than twenty-two of them dotted across two boxes should. */
/* .dt-chips .dt-chip, for the same reason .dt-swatches .dt-swatch is qualified above - see
   the note there. */
.dt-chips .dt-chip {
  display: inline-block;
  padding: 2px 8px;
  margin: 0;
  border: 1px solid #dcdfe3;
  border-radius: 3px;
  background: #eef0f2 !important;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.6;
  color: #47515f;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.dt-chips .dt-chip:hover { border-color: #b8c0cb; background: #e6e9ec !important; }
.dt-chips .dt-chip:focus-visible { outline: 2px solid #003794; outline-offset: 1px; }
.dt-chips .dt-chip.is-dragging { opacity: 0.5; cursor: grabbing; }

/* ---- The live preview ---- */

.dt-preview {
  border: 1px solid #dbe2ec;
  border-radius: 6px;
  padding: 14px;
  background: #fff;
}

.dt-preview-editor .dt-history { margin-bottom: 6px; }
.dt-preview-editor #dt-toolbar { margin-bottom: 6px; }
.dt-preview-editor .dt-latex-el {
  text-align: left;
  border: 1px solid #003794;
  border-radius: 5px;
  padding: 5px;
  min-height: 50px;
  white-space: pre-wrap;
  font-family: "Courier New";
  margin-bottom: 8px;
}
.dt-preview-editor #dt-mathview {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border: 1px solid #eef1f6;
  border-radius: 4px;
  background: #fbfcfe;
}

/* A fixed box rather than the home page's own absolute/sticky predictor-rail trick
   (.predictor-rail, eqneditor.css): that earns its keep beside a full-height mathview column,
   which this compact preview does not have. */
.dt-predictor-rail {
  margin-top: 8px;
  height: 150px;
  border: 1px solid #eef1f6;
  border-radius: 4px;
  overflow: auto;
}

/* Off is simply an empty box, not a hidden one: see renderOutput() in design-tool.js for why
   [hidden] does not work on an element this file also gives `display:flex` (an author style
   always outranks the browser's own `[hidden] { display:none }`, whatever the specificity).
   The divider above it is the same story told in CSS - :not(:empty) rather than a class the
   script would otherwise have to toggle in step with the box's own content. */
#dt-output-preview {
  min-height: 0;
  display: flex;
  align-items: center;
}
#dt-output-preview:not(:empty) {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #eef1f6;
  min-height: 40px;
}
.dt-output-code {
  margin: 0;
  padding: 10px 12px;
  background: #f7f9fd;
  border-radius: 4px;
  font-size: 0.78rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  width: 100%;
}
.dt-output-image { max-width: 100%; max-height: 120px; }

/* ---- The generated code ---- */

.dt-tool .dt-code-head {
  margin-top: 18px;
  margin-bottom: 6px;
}