/* Bulk Data Generator + JSON to CSV pages. Kit tokens only. */

/* ---------- Intro ---------- */
.wt-intro { padding-bottom: 40px; overflow: hidden; }
/* Text left, "you are here" tools map right from 900px; the map is hidden on smaller screens */
.wt-intro-inner { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); align-items: center; }
.wt-orbit { display: none; }
@media (min-width: 900px) {
  .wt-intro-inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; }
  .wt-orbit { display: block; }
  .wt-orbit .tools-orbit { height: 380px; width: 100%; }
}
@media (min-width: 720px) { .wt-intro { padding-bottom: 56px; } }
.ss .wt-h1 { font-size: clamp(36px, 8vw, 56px); line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 20px; }
.ss .wt-line { font-size: 20px; line-height: 1.45; color: var(--ss-text); max-width: 36em; margin: 0 0 16px; }
.ss .wt-text { color: var(--ss-text-2); max-width: 60ch; margin: 0 0 16px; }
.ss .wt-text b { color: var(--ss-text); font-weight: 600; }
.ss .wt-spec { font-size: 12px; line-height: 1.7; color: var(--ss-text-2); margin: 0 0 28px; max-width: 70ch; }
.ss .wt-intro .btns { margin-top: 24px; }
.ss .wt-small { font-size: 13px; color: var(--ss-text-3); margin: 16px 0 0; }
.wt-intro .btns + .wt-small { margin-top: 16px; }

/* ---------- Tool section ---------- */
.ss .wt-h2 { font-size: clamp(26px, 3.6vw, 34px); margin: 0 0 28px; }
.ss .wt-h3 { font-size: 17px; margin: 0 0 12px; }
.wt-tool-section { scroll-margin-top: 64px; }

.wt-grid { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .wt-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px; } }
.wt-card { padding: 20px; }
@media (min-width: 720px) { .wt-card { padding: 28px; } }
.ss .wt-note { color: var(--ss-text-2); font-size: 14px; margin: 0 0 20px; }
.wt-fieldset { border: 0; margin: 0 0 20px; padding: 0; min-width: 0; display: grid; gap: 12px; }
.wt-fieldset legend { font-weight: 600; font-size: .92em; padding: 0; margin-bottom: 12px; }   /* was 4: tight to the first box (design check 20) */
.ss .ss-check .ss-hint { display: inline; margin-left: 6px; font-size: .85em; color: var(--ss-text-3); }
.ss .wt-status { margin: 12px 0 0; min-height: 1.5em; font-size: 12px; color: var(--ss-text-2); max-width: none; }
.ss .wt-preview .wt-small { margin-top: 12px; }

/* ---------- Tables (inside .ss-table-wrap, which scrolls sideways) ---------- */
.wt-table td, .wt-table th { padding: 10px 14px; white-space: nowrap; }
.wt-table td { max-width: 320px; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.wt-table .wt-trunc { text-align: center; font-style: normal; color: var(--ss-text-2); white-space: normal; max-width: none; padding: 16px; }
.wt-results { margin-top: 20px; max-height: 480px; overflow: auto; }
.wt-results .wt-table th { position: sticky; top: 0; background: var(--ss-surface); z-index: 1; }

/* ---------- JSON to CSV ---------- */
.wt-card-wide { max-width: none; }
.wt-tabs { display: flex; gap: 4px; margin: 0 0 16px; border-bottom: 1px solid var(--ss-line); }
.wt-tab { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 10px 14px; min-height: 44px;
          font: 600 15px/1 var(--ss-font-body); color: var(--ss-text-2); cursor: pointer; }
.wt-tab:hover { color: var(--ss-text); }
.wt-tab[aria-selected="true"] { color: var(--ss-text); border-bottom-color: var(--ss-accent); }

.ss .wt-textarea { min-height: 260px; font-family: var(--ss-font-mono); font-size: 13px; line-height: 1.55; tab-size: 2; white-space: pre; overflow: auto; }
.ss .wt-card .ss-field { margin-bottom: 16px; }

.wt-drop { position: relative; margin-bottom: 16px; }
.wt-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.wt-drop-label { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 40px 16px; cursor: pointer;
                 border: 1px dashed var(--ss-line-strong); border-radius: var(--ss-r-lg); background: var(--ss-raised); }
.wt-drop-label:hover, .wt-drop.dragover .wt-drop-label { border-color: var(--ss-accent); }
.wt-file:focus-visible + .wt-drop-label { outline: 2px solid var(--ss-accent); outline-offset: 2px; }
.wt-drop-main { color: var(--ss-text); }
.wt-drop-sub { font-size: 12px; color: var(--ss-text-3); }
.ss .wt-file-name { margin: 10px 0 0; font-size: 12px; color: var(--ss-accent); min-height: 1.4em; max-width: none; }

.wt-actions { margin-top: 4px; }
.wt-msg { margin-top: 16px; }
.wt-msg .ss-alert[hidden] { display: none; }
.wt-msg .ss-alert { padding: 12px 14px; }
.ss .wt-msg-text { margin: 0; max-width: none; font-weight: 500; }
.wt-snippet { margin: 12px 0 0; padding: 10px 12px; overflow-x: auto; white-space: pre; font-size: 12px; line-height: 1.5;
              color: var(--ss-text); background: var(--ss-bg); border: 1px solid var(--ss-line); border-radius: var(--ss-r); }
.wt-snippet[hidden] { display: none; }
.wt-msg-actions { margin-top: 12px; }
.wt-msg-actions .ss-btn[hidden] { display: none; }

.wt-stats { margin-top: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wt-stats[hidden], .wt-results[hidden] { display: none; }
@media (min-width: 720px) { .wt-stats { max-width: 480px; } }
.wt-stats .ss-stat b { font-size: 1.15em; }