/*!
 * Config Generators — what the four tools need beyond Public Tools' shared
 * styles (tools.css, loaded first). Plain CSS, cg- prefix.
 */
.cg-mt { margin-top: .75rem; }
.cg-muted { color: var(--pt-muted, #64748b); font-weight: 400; }
.cg-content { margin-top: .5rem; }
.cg-self-end { align-self: end; }
.cg-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.cg-fieldset > legend { padding: 0; margin-bottom: .35rem; font-size: .875rem; font-weight: 600; color: var(--pt-ink, #0f172a); }

/* Segmented control that wraps on narrow screens. */
.pt-ui .cg-seg-wrap { flex-wrap: wrap; max-width: 100%; }

/* Option lists. */
.cg-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 0 1rem; }
.cg-radios { display: flex; flex-direction: column; gap: .1rem; }
.cg-subopts { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem 1.25rem; padding: .75rem .9rem; border: 1px solid var(--pt-line, #e2e8f0); border-radius: var(--pt-radius-sm, .5rem); background: var(--pt-soft, #f8fafc); }
.cg-subopts .pt-field { min-width: 14rem; }

/* A select joined to an input. */
.cg-join { display: flex; gap: .4rem; }
.cg-join .pt-select { flex: 0 0 auto; width: auto; }
.cg-join .pt-input { flex: 1 1 auto; min-width: 0; }

/* Generated code. */
.pt-ui .cg-code { min-height: 12rem; font-size: .8125rem; line-height: 1.55; white-space: pre; overflow: auto; tab-size: 4; }
.pt-ui .cg-env { min-height: 4.5rem; }
.cg-subtitle { margin: 1.1rem 0 .5rem; font-size: .9375rem; font-weight: 700; color: var(--pt-ink, #0f172a); }

/* Commands with copy buttons. */
.cg-cmds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.cg-cmds:empty { display: none; }
.cg-cmd__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .3rem; }
.cg-cmd__label { font-size: .875rem; color: var(--pt-text, #334155); }
.pt-ui .cg-cmd__code { margin: 0; padding: .6rem .75rem; border-radius: var(--pt-radius-sm, .5rem); background: #0f172a; color: #e2e8f0; font-family: var(--pt-mono); font-size: .8125rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.pt-ui .cg-cmd__code code { background: none; color: inherit; padding: 0; font: inherit; }

/* Notes. */
.cg-notes { display: flex; flex-direction: column; gap: .5rem; }
.cg-notes .pt-note { margin: 0; white-space: pre-line; }
.cg-notes:empty { display: none; }

/* Generated files (Compose). */
.cg-files { display: flex; flex-direction: column; gap: 1.1rem; }
.cg-file .pt-panel__head { margin-bottom: .4rem; }
.cg-file__name { margin: 0; font-size: .9rem; font-weight: 700; color: var(--pt-ink, #0f172a); }

/* "More options" disclosure. */
.cg-more > summary { cursor: pointer; font-size: .875rem; font-weight: 600; color: var(--pt-accent-strong, #1d4ed8); }
.cg-more > summary:focus-visible { outline: none; box-shadow: var(--pt-focus); border-radius: .25rem; }

/* Lines left for a human (.htaccess). */
.cg-todo__list { list-style: none; margin: 0; padding: 0; border: 1px solid #fde68a; border-radius: var(--pt-radius-sm, .5rem); background: var(--pt-warn-soft, #fffbeb); }
.cg-todo__list li { display: flex; flex-direction: column; gap: .2rem; padding: .55rem .75rem; border-top: 1px solid #fde68a; }
.cg-todo__list li:first-child { border-top: 0; }
.cg-todo__list code { font-family: var(--pt-mono); font-size: .8125rem; color: var(--pt-ink, #0f172a); overflow-wrap: anywhere; }
.cg-todo__why { font-size: .8125rem; color: #713f12; }

@media (max-width: 720px) {
    .cg-join { flex-direction: column; }
    .cg-join .pt-select { width: 100%; }
}

/* Notes hold text plus an inline link, so they flow as text. */
.pt-ui .cg-notes .pt-note { display: block; }
.cg-notes .pt-link { display: inline; }
.cg-radios .pt-check { display: flex; flex-wrap: wrap; gap: .1rem .5rem; }