:root {
    --blue: #168acb;
    --magenta: #9f1e5b;
    --ink: #24313f;
    --muted: #64748b;
    --bg: #f4f7fa;
    --card: #ffffff;
    --line: #dde5ec;
    --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--ink);
    padding: 20px clamp(12px, 3vw, 40px) 40px;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}
header h1 {
    margin: 0 0 4px;
    font-size: 26px;
    letter-spacing: 0.2px;
}
.layout-toggle {
    display: inline-flex;
    flex: none;
    margin-top: 4px;
}
.layout-toggle button {
    border-radius: 0;
    font-size: 12.5px;
    color: var(--muted);
}
.layout-toggle button:first-child { border-radius: 7px 0 0 7px; }
.layout-toggle button:last-child { border-radius: 0 7px 7px 0; border-left: none; }
.layout-toggle button.active {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}
/* The single-column collapse makes the toggle meaningless on small screens. */
@media (max-width: 1100px) { .layout-toggle { display: none; } }
.blue { color: var(--blue); }
.magenta { color: var(--magenta); }
.badge {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: var(--blue);
    border-radius: 999px;
    padding: 3px 10px;
    vertical-align: middle;
    margin-left: 6px;
}
.tagline { margin: 0 0 18px; color: var(--muted); font-size: 14px; }

.error {
    background: #fdf1f4;
    border: 1px solid #e6b3c4;
    color: #8c1d47;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 14px;
}
.error.warn {
    background: #fdf8ec;
    border-color: #e8d29a;
    color: #7a5c11;
}

main {
    display: grid;
    gap: 16px;
    align-items: start;
}
/* Side by side: the three panes as columns, the data flow reading left to
   right. */
main.layout-columns {
    grid-template-columns: 1fr 1.1fr 1fr;
    grid-template-areas: "input pipeline output";
}
/* Tables left/right: wide input above wide output, so many-column data gets
   the width it needs; the transformation runs down the other side. The
   pipeline spans both rows; without an explicit flexible second row its
   height would be split across the two rows, pushing Output far below
   Input. "auto 1fr" gives the excess to row two, whose card aligns to its
   start — so Output sits directly under Input. */
main.layout-tables-left {
    grid-template-columns: minmax(0, 2fr) minmax(340px, 1fr);
    grid-template-areas:
        "input pipeline"
        "output pipeline";
    grid-template-rows: auto 1fr;
}
main.layout-tables-right {
    grid-template-columns: minmax(340px, 1fr) minmax(0, 2fr);
    grid-template-areas:
        "pipeline input"
        "pipeline output";
    grid-template-rows: auto 1fr;
}
#input-card { grid-area: input; }
#pipeline-card { grid-area: pipeline; }
#output-card { grid-area: output; }
@media (max-width: 1100px) {
    main.layout-columns, main.layout-tables-left, main.layout-tables-right {
        grid-template-columns: 1fr;
        grid-template-areas: "input" "pipeline" "output";
    }
}

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 1px 3px rgba(36, 49, 63, 0.06);
    /* Grid items default to a content-based minimum width, which lets a
       sample with wide tables steal space from the other columns. Pinning
       the minimum to zero keeps the three columns at their fr proportions
       whatever the data contains. */
    min-width: 0;
}
#input-card.dragging { outline: 2px dashed var(--blue); outline-offset: -6px; }

.card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.card-head h2, .card-head h3 { margin: 0; font-size: 15px; }
.card-head h3 { font-size: 13px; color: var(--muted); }
.card-tools { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.card-tools select {
    font: inherit;
    font-size: 12.5px;
    padding: 4px 6px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #fff;
    color: var(--ink);
    max-width: 170px;
}
.card-tools select:disabled { opacity: 0.45; }
.check-tool { font-size: 12.5px; color: var(--ink); display: inline-flex; align-items: center; gap: 4px; }

button {
    font: inherit;
    font-size: 13px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    border-radius: 7px;
    padding: 5px 11px;
    cursor: pointer;
}
button:hover { border-color: var(--blue); color: var(--blue); }
button:disabled { opacity: 0.35; cursor: default; }
button.active { border-color: var(--blue); color: var(--blue); }

textarea {
    width: 100%;
    min-height: 340px;
    font-family: var(--mono);
    font-size: 12.5px;
    line-height: 1.5;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px;
    background: #fbfdfe;
    color: var(--ink);
    resize: vertical;
    white-space: pre;
    overflow: auto;
    margin: 0;
}
#json-text { min-height: 170px; }

/* The table views. */
.grid-wrap {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfdfe;
    overflow: auto;
    min-height: 120px;
    max-height: 420px;
}
.grid-wrap table {
    border-collapse: collapse;
    font-family: var(--mono);
    font-size: 12px;
    width: max-content;
    min-width: 100%;
}
.grid-wrap th, .grid-wrap td {
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 4px 8px;
    text-align: left;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre;
    vertical-align: top;
}
.grid-wrap th {
    position: sticky;
    top: 0;
    background: #eef4f9;
    color: var(--ink);
    font-weight: 600;
    border-bottom: 2px solid var(--blue);
    z-index: 1;
}
/* Positional column labels for files without a header row. */
.grid-wrap th.positional { color: var(--muted); font-weight: 500; font-style: italic; }
.grid-wrap td.rownum, .grid-wrap th.rownum {
    color: #a9bfd2;
    background: #f4f8fb;
    text-align: right;
    font-size: 11px;
    position: sticky;
    left: 0;
    /* A fixed width sized for the 3-digit row cap, so the index column is
       identical in the input and output tables and rows line up visually. */
    width: 34px;
    min-width: 34px;
    max-width: 34px;
}
.grid-wrap th.rownum { z-index: 2; background: #eef4f9; }
.grid-wrap .empty-note {
    padding: 24px;
    color: var(--muted);
    font-size: 13px;
}

.sample-hint {
    margin: 0 0 12px;
    padding: 8px 10px;
    font-size: 12.5px;
    color: var(--muted);
    background: #f2f7fb;
    border-radius: 7px;
}

.stats { margin-top: 8px; font-size: 12px; color: var(--muted); }
.reports { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--muted); }
.reports li { margin-bottom: 2px; }

.action-card {
    border: 1px solid var(--line);
    border-left: 3px solid var(--blue);
    border-radius: 9px;
    padding: 10px 12px 6px;
    margin-bottom: 10px;
    background: #fdfefe;
    position: relative;
}
.action-card.paid { border-left-color: var(--magenta); }
.action-card.none { border-left-color: var(--line); background: #fafbfc; }
.action-card.none .action-select { color: var(--muted); }
.action-head { display: flex; align-items: center; gap: 8px; }
.action-number {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: var(--ink);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.action-select { flex: 1; font: inherit; font-size: 13.5px; padding: 5px 6px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.action-tools { display: flex; gap: 4px; }
.tool { padding: 3px 8px; font-size: 12px; }

.action-desc {
    margin: 8px 0 2px 28px;
    padding: 8px 10px;
    font-size: 12.5px;
    color: var(--muted);
    background: #f2f7fb;
    border-radius: 7px;
}
.tool.info.active { border-color: var(--blue); color: var(--blue); }

.action-params { margin: 10px 0 4px 28px; display: flex; flex-direction: column; gap: 7px; }
.param { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.param.param-multi { align-items: flex-start; }
.param-label { min-width: 140px; color: var(--muted); }
.param .param-textarea {
    font: inherit;
    font-family: var(--mono);
    font-size: 12.5px;
    flex: 1;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    resize: vertical;
    min-height: 0;
}
.param input[type="text"], .param input[type="number"], .param select {
    font: inherit;
    font-size: 13px;
    flex: 1;
    padding: 4px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
}
.param input[type="text"] { font-family: var(--mono); }
.param-check { margin-left: 0; }

.action-tier {
    position: absolute;
    top: 8px;
    right: 12px;
    display: none;
}
.action-card.paid .action-tier {
    display: block;
    position: static;
    margin: 2px 0 4px 28px;
    font-size: 11px;
    font-weight: 600;
    color: var(--magenta);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.add-action {
    width: 100%;
    border-style: dashed;
    color: var(--muted);
    padding: 8px;
    margin-bottom: 12px;
}
.add-action:hover { color: var(--blue); }

.json-block { border-top: 1px solid var(--line); padding-top: 12px; }

footer {
    margin-top: 22px;
    font-size: 12.5px;
    color: var(--muted);
    text-align: center;
}
footer a { color: var(--blue); text-decoration: none; }