/* Fake Data Generator. Settings beside the output on wide screens; one column under 860 px. */
.fk-wrap { max-width: 1180px; margin: 0 auto; padding: 96px 16px 48px; color: var(--text-primary); box-sizing: border-box; display: grid; gap: 16px; min-width: 0;
  --fk-accent: var(--color-primary, #6366f1); --fk-warn: var(--color-warning, #f59e0b); --fk-ok: #4ade80; }
:root[data-theme="light"] .fk-wrap { --fk-accent: #4f46e5; --fk-warn: #b45309; --fk-ok: #15803d; }
.fk-wrap *, .fk-wrap *::before, .fk-wrap *::after { box-sizing: border-box; }
.fk-wrap [hidden] { display: none !important; }
.fk-intro h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 0 0 8px; text-wrap: balance; }
.fk-intro p { color: var(--text-secondary); margin: 0; max-width: 64ch; }
.fk-tabs { display: inline-flex; justify-self: start; border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; background: var(--bg-secondary); }
.fk-tabs button { border: 0; background: none; color: var(--text-secondary); font: inherit; font-weight: 600; padding: 10px 18px; min-height: 44px; cursor: pointer; }
.fk-tabs button[aria-selected="true"] { background: var(--fk-accent); color: #fff; }
.fk-main { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 860px) { .fk-main { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 861px) { .fk-output { position: sticky; top: 80px; align-self: start; max-height: calc(100vh - 96px); overflow: auto; } .fk-output .fk-out { max-height: calc(100vh - 300px); min-height: 200px; } }
.fk-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; padding: 16px; display: grid; gap: 12px; min-width: 0; }
.fk-card h2 { font-size: 1.1rem; margin: 0; }
.fk-card h3 { font-size: 0.95rem; margin: 4px 0 0; }
.fk-field { display: grid; gap: 4px; min-width: 0; }
.fk-label { font-weight: 600; font-size: 0.9rem; color: var(--text-secondary); }
.fk-input { width: 100%; max-width: 100%; min-width: 0; padding: 9px 10px; border-radius: 8px; border: 1px solid var(--border-color);
  background: var(--bg-primary); color: var(--text-primary); font: inherit; font-size: 16px; min-height: 44px; }
.fk-input[aria-invalid="true"] { border-color: var(--fk-warn); }
.fk-input:focus-visible, .fk-btn:focus-visible, .fk-tabs button:focus-visible, .fk-out:focus-visible { outline: 2px solid var(--fk-accent); outline-offset: 1px; }
.fk-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fk-row2 { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 480px) { .fk-row2 { grid-template-columns: minmax(0, 1fr); } }
.fk-add-type { flex: 1 1 160px; width: auto; }
.fk-hint { color: var(--text-secondary); font-size: 0.86rem; margin: 0; }
.fk-msg { margin: 0; font-weight: 600; color: var(--fk-warn); overflow-wrap: anywhere; font-size: 0.92rem; }
.fk-msg:empty, .fk-hint:empty { display: none; }
.fk-msg--ok { color: var(--fk-ok); }
.fk-check { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; min-height: 44px; }
.fk-check input, .fk-on { width: 20px; height: 20px; accent-color: var(--fk-accent); margin: 0; flex: 0 0 auto; }
.fk-btn { font: inherit; font-weight: 600; min-height: 44px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-primary); color: var(--text-primary); cursor: pointer; }
.fk-btn:hover:not(:disabled) { border-color: var(--fk-accent); }
.fk-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.fk-btn--primary { background: var(--fk-accent); border-color: var(--fk-accent); color: #fff; }
.fk-btn--icon { min-width: 44px; padding: 8px; }
.fk-cols { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fk-col { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 6px 8px; padding: 8px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-primary); }
.fk-col-label { grid-column: 2 / -1; font-size: 0.85rem; color: var(--text-secondary); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.fk-col .fk-name { grid-column: 2; }
@media (min-width: 481px) {
  .fk-col { grid-template-columns: auto 9em minmax(0, 1fr) auto auto; }
  .fk-col-label { grid-column: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
  .fk-col .fk-name { grid-column: 3; }
}
.fk-col-settings { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.fk-col-settings .fk-wide { grid-column: 1 / -1; }
.fk-col .fk-err { grid-column: 1 / -1; }
.fk-col textarea.fk-input { resize: vertical; min-height: 64px; }
.fk-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.fk-out { max-height: 560px; overflow: auto; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-primary); min-width: 0; }
.fk-out.fk-stale { opacity: 0.45; }
.fk-out table { border-collapse: collapse; font-size: 0.85rem; width: max-content; min-width: 100%; }
.fk-out th, .fk-out td { padding: 6px 10px; border-bottom: 1px solid var(--border-color); text-align: left; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fk-out th { position: sticky; top: 0; background: var(--bg-secondary); font-weight: 600; color: var(--text-secondary); }
.fk-out td.fk-n { color: var(--text-secondary); }
.fk-out pre { margin: 0; padding: 12px; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; }
.fk-textout { padding: 12px 14px; }
.fk-textout p { margin: 0 0 0.9em; max-width: 72ch; line-height: 1.7; }
.fk-textout pre { padding: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.fk-stat { color: var(--text-secondary); font-size: 0.88rem; font-variant-numeric: tabular-nums; }
.fk-safe { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; font-size: 0.88rem; color: var(--text-secondary); }
.fk-privacy { color: var(--text-secondary); font-size: 0.88rem; margin: 0; }
.fk-foot { text-align: center; padding: 24px 16px 40px; font-size: 0.9rem; }
.fk-foot a { color: var(--text-secondary); }
@media print { .nav, .fk-foot { display: none; } }