/* =========================================================================
   /json-to-csharp and /json-to-typescript - the few pieces the bench,
   bench-tools.css and text-tools.css do not already provide. Colours come
   from the site / bench custom properties, so light and dark themes follow.
   ========================================================================= */

/* Options sit in a stack of mode-strips above the output. They are wrapped
   in one element so the panel keeps its head / strip / bar / body grid. */
.j2c-page .j2c-opts{ display: grid; }
.j2c-page .j2c-opts .mode-strip{ gap: 8px; }
.j2c-page .mode-strip .strip-gap{ flex: 0 0 8px; }

/* Toggles read as "on" with the accent, like the regex flag buttons, so a
   pressed toggle is not confused with a selected segment. */
.j2c-page [data-opt-toggle][aria-pressed="true"]{
  background: var(--mark-soft); border-color: var(--mark); color: var(--mark-deep, var(--mark));
}

.j2c-page .tt-mini-input.j2c-name{ width: 140px; }
.j2c-page .tt-mini-input.j2c-ns{ width: 190px; }
.j2c-page .tt-mini-input:focus{ outline: 2px solid var(--mark); outline-offset: 1px; }
.j2c-page .tt-mini-field + .tt-mini-field{ margin-left: 6px; }

/* Generated code must not wrap mid-identifier the way prose output does. */
.j2c-page .out-pane textarea{
  white-space: pre; word-break: normal; overflow-wrap: normal;
  tab-size: 4;
}

@media (max-width: 620px){
  .j2c-page .tt-mini-input.j2c-name,
  .j2c-page .tt-mini-input.j2c-ns{ width: 120px; }
}