/* /mock-data-generator/ page styles. Built from /assets/polyatic.css tokens only (no new colours or fonts). */
.nojs{margin:1.25rem 0 0;padding:0.875rem 1rem;border:1px solid var(--line);border-left:0.25rem solid var(--accent);border-radius:0.625rem;background:var(--surface);color:var(--ink);font-size:0.9375rem;line-height:1.6}
.mdg-head .sub{margin-bottom:1rem}
@media(max-width:520px){.mdg-head h1{font-size:1.5rem;margin-bottom:0.125rem}.mdg-head .sub{font-size:0.875rem;line-height:1.45;margin-bottom:0.625rem}}

/* layout: generate bar, columns, output options, preview on a phone; columns beside bar + options on a wide screen */
.mdg-grid{display:grid;gap:0.875rem;grid-template-areas:"bar" "cols" "out" "prev";align-items:start}
.mdg-bar{grid-area:bar}.mdg-cols{grid-area:cols}.mdg-out{grid-area:out}.mdg-prev{grid-area:prev}
@media(min-width:960px){
  .mdg-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:auto auto 1fr;grid-template-areas:"cols bar" "cols out" "cols prev";gap:1.25rem}
}
.mdg-bar,.mdg-cols,.mdg-out,.mdg-prev{display:grid;gap:0.75rem;align-content:start;min-width:0}
@media(max-width:520px){.mdg-bar,.mdg-cols,.mdg-out,.mdg-prev{padding:0.75rem;gap:0.625rem}}

.mdg-k{display:block;margin:0 0 0.375rem;font-family:var(--mono);font-size:0.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
h2.mdg-k{margin:0}
.mdg-help{margin:0;font-size:0.8125rem;line-height:1.5;color:var(--muted)}
.mdg-help[hidden]{display:none}
.mdg-row{display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center}
.mdg-f{display:grid;gap:0.25rem;min-width:0}
.mdg-f .mdg-k{margin:0}
.mdg-inline{display:flex;gap:0.375rem}
.mdg-inline input{flex:1}
.mdg-inline .chip{white-space:nowrap;padding:0.5rem 0.625rem}

/* generate bar */
.mdg-barset{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0.625rem;align-items:end}
.mdg-seed,.mdg-gen{grid-column:1/-1}
.mdg-gen{width:100%}
@media(max-width:520px){.mdg-barset input,.mdg-barset select{padding-top:0.5rem;padding-bottom:0.5rem}}
.mdg-meter{margin:0}
.mdg-meter[hidden],.mdg-result[hidden]{display:none}
.mdg-meter .fill{background:var(--accent)}
.mdg-result{display:grid;gap:0.5rem}

/* column editor */
.mdg-colshead{display:flex;align-items:baseline;justify-content:space-between;gap:0.75rem;flex-wrap:wrap}
.mdg-collist{margin:0;padding:0;list-style:none;display:grid;gap:0.5rem}
.mdg-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:0.375rem;align-items:center;padding:0.5rem;border:1px solid var(--line);border-radius:0.5rem;background:var(--surface-2)}
.mdg-col input[type=text],.mdg-col input[type=number],.mdg-col input[type=date],.mdg-col select,.mdg-col textarea{padding:0.4375rem 0.5rem;font-size:0.875rem}
.mdg-col .c-name{font-family:var(--mono)}
.mdg-tools{display:flex;gap:0.25rem}
.mdg-icon{width:2rem;height:2rem;padding:0;border:1px solid var(--line-2);border-radius:0.375rem;background:var(--surface);color:var(--ink-2);font:inherit;font-size:0.875rem;line-height:1;cursor:pointer}
.mdg-icon:hover{border-color:var(--ink);color:var(--ink)}
.mdg-icon:disabled{opacity:.35;cursor:default}
.mdg-opts{grid-column:1/-1;min-width:0}
.mdg-opts>summary{cursor:pointer;font-size:0.8125rem;color:var(--ink-2);padding:0.125rem 0;list-style-position:inside;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mdg-opts>summary .mdg-sum{color:var(--muted);font-family:var(--mono);font-size:0.75rem}
.mdg-optset{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,8.5rem),1fr));gap:0.5rem;padding-top:0.5rem;align-items:end}
.mdg-optset .mdg-wide{grid-column:1/-1}
.mdg-optset textarea{width:100%;min-height:5rem;font-family:var(--mono);resize:vertical}
.mdg-optset .mdg-k{font-size:0.6875rem}
.mdg-sharerow{display:flex;gap:0.5rem}
.mdg-sharerow input{flex:1;min-width:0;font-family:var(--mono);font-size:0.8125rem}
.mdg-sharerow input[hidden],.mdg-sharerow .btn[hidden]{display:none}
.mdg-save{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;flex-wrap:wrap;padding-top:0.75rem;border-top:1px solid var(--line)}

/* output options */
.mdg-set{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,10rem),1fr));gap:0.625rem;align-items:end}
.mdg-set[hidden]{display:none}
.mdg-set .mdg-help{grid-column:1/-1}
.mdg-check{display:flex;align-items:center;gap:0.5rem;font-size:0.9375rem;color:var(--ink);cursor:pointer;min-height:2.5rem}
.mdg-check input{width:1.125rem;height:1.125rem;accent-color:var(--accent);margin:0}

/* preview */
.mdg-table{overflow:auto;max-height:28rem;border:1px solid var(--line);border-radius:0.5rem;background:var(--surface)}
.mdg-table table{border-collapse:collapse;font-family:var(--mono);font-size:0.75rem;line-height:1.4;min-width:100%}
.mdg-table th,.mdg-table td{padding:0.3125rem 0.625rem;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap;max-width:22rem;overflow:hidden;text-overflow:ellipsis;color:var(--ink-2)}
.mdg-table th{position:sticky;top:0;background:var(--surface-2);color:var(--ink);font-weight:600}
.mdg-table td.is-null{color:var(--muted);font-style:italic}
.mdg-table td.is-num{text-align:right;font-variant-numeric:tabular-nums}

.mdg-pre{margin:0 0 1rem;padding:0.75rem;border:1px solid var(--line);border-radius:0.5rem;background:var(--surface-2);font-family:var(--mono);font-size:0.8125rem;line-height:1.5;overflow-x:auto;white-space:pre}
.mdg-types li{margin-bottom:0.5rem}
.mdg-types a{word-break:break-word}

.mdg-notice{margin:0 0 1rem;padding:0.75rem 0.875rem;border:1px solid var(--line-2);border-left:0.25rem solid var(--accent);border-radius:0.5rem;background:var(--accent-soft);font-size:0.875rem;line-height:1.5;color:var(--ink)}
.mdg-notice[hidden]{display:none}
.mdg-notice.is-bad{border-left-color:var(--bad);background:var(--surface-2)}
.mdg-sharedbar{display:grid;gap:0.625rem}
.mdg-sharedbar p{margin:0}
@media(prefers-reduced-motion:reduce){.mdg-meter .fill{transition:none}}