:root {
  --sf-red: #e31837;
  --ink: #1b1b1b;
  --line: #dcdcdc;
  --bg: #f5f6f8;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}
header {
  background: #fff;
  border-bottom: 3px solid var(--sf-red);
  padding: 1rem 1.5rem;
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
}
header h1 { margin: 0; font-size: 1.4rem; }
.tag { margin: .2rem 0 0; color: #555; font-size: .9rem; }
.backicon {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--sf-red); color: #fff;
  border: none; cursor: pointer;
  font-size: 1.5rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  transition: transform .12s ease, background .12s ease;
}
.backicon:hover { background: #a30012; transform: translateX(-2px); }
.whoami { position: absolute; top: 1rem; right: 1.5rem; display: flex; align-items: center; gap: .75rem; font-size: .85rem; color: #333; }
.whoami #whoText { font-weight: 600; }
.linkbtn { background: none; border: none; color: #0b5cad; padding: 0; font-size: .82rem; cursor: pointer; text-decoration: underline; }
.linkbtn:hover { background: none; color: #063e78; }
main { max-width: min(1720px, 96vw); margin: 1.25rem auto; padding: 0 1rem; }
.login-card { max-width: 620px; margin: 2rem auto; }
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}
.card h2 { margin: 0 0 .75rem; font-size: 1.05rem; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: .75rem; }
.grid.grid3 { grid-template-columns: 1fr 1fr 1fr; }
.grid .wide { grid-column: 1 / -1; }
.row-inline { display: flex; align-items: flex-end; gap: .75rem; margin-bottom: .75rem; }
.row-inline .grow { flex: 1; }
label { display: flex; flex-direction: column; font-size: .82rem; color: #444; gap: .25rem; }
input, select {
  width: 100%;
  padding: .5rem .6rem;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: .9rem;
}
input[type="checkbox"], input[type="radio"] { width: auto; padding: 0; }
button {
  background: var(--sf-red);
  color: #fff;
  border: none;
  padding: .55rem 1rem;
  border-radius: 5px;
  font-size: .9rem;
  cursor: pointer;
}
button:hover { background: #c1122e; }
button:disabled { background: #999; cursor: default; }
.toolbar { display: flex; align-items: center; gap: 1rem; margin-bottom: .75rem; flex-wrap: wrap; }
.toolbar label { flex-direction: row; align-items: center; gap: .4rem; }
.toolbar-bottom { margin-top: .75rem; margin-bottom: 0; }
.toolbar-bottom .office input { width: 3.5rem; text-align: center; }

/* Workspace: members on the left, results on the right. */
.source-card { margin-bottom: 1rem; }
.source-card .row-inline { margin-bottom: .35rem; }
.workspace { display: grid; grid-template-columns: minmax(653px, 750px) 1fr; gap: 1.5rem; align-items: start; }
.pane { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 1rem 1.1rem; }
.pane-left { position: sticky; top: 1rem; display: flex; flex-direction: column; max-height: calc(100vh - 2rem); }
.pane-source { display: flex; align-items: flex-end; gap: .6rem; margin-bottom: .35rem; }
.pane-source .grow { flex: 1; }
.pane-head { display: flex; align-items: center; justify-content: space-between; margin: .6rem 0; padding-top: .6rem; border-top: 1px solid var(--line); }
.pane-head h2 { margin: 0; font-size: 1.05rem; }
.pane-head .mini { flex-direction: row; align-items: center; gap: .35rem; font-size: .82rem; }
.selectall { display: flex; flex-direction: row; align-items: center; gap: .45rem; margin: 0 0 .5rem; font-size: .9rem; font-weight: 600; color: var(--ink); background: #f4f5f7; border: 1px solid var(--line); border-radius: 5px; padding: .35rem .6rem; cursor: pointer; }
.pane-left .members { flex: 1; overflow-y: auto; margin: 0 -.4rem; padding: .2rem .4rem; }
.pane-foot { display: flex; align-items: flex-end; gap: .75rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.pane-foot .office { flex-direction: column; }
.pane-foot .office select { width: 5.5rem; }
.pane-foot #runBtn { margin-left: auto; }
.office-block { display: flex; flex-direction: column; gap: .4rem; }
.office-cat { display: flex; gap: .9rem; font-size: .82rem; }
.office-cat label { flex-direction: row; align-items: center; gap: .3rem; cursor: pointer; }
.office-cat input { margin: 0; }
.pane-right { min-width: 0; }
.pane-right h2 { margin: 0 0 .6rem; font-size: 1.05rem; }
.pane-right #versions, .pane-right #results, .pane-right #share { margin-bottom: 1.1rem; }
.pane-empty { color: #777; font-size: .9rem; text-align: center; padding: 2rem 1rem; }
@media (max-width: 900px) {
  .workspace { grid-template-columns: 1fr; }
  .pane-left { position: static; max-height: none; }
}
.exploded { margin: .4rem 0; }
.jobinfo { margin: 0 0 .5rem; font-size: .85rem; color: #333; white-space: nowrap; overflow-x: auto; }
.report > summary .jobinfo { margin: 0 0 0 .7rem; display: inline; }
.report > summary .exp-toggle { float: right; margin-left: .6rem; background: var(--sf-red); border: none; color: #fff; font-size: .8rem; padding: .3rem .8rem; border-radius: 5px; cursor: pointer; }
.report > summary .exp-toggle:hover { background: #c1122e; }
.parts { margin: 0 0 .5rem; font-size: .85rem; color: #0b5cad; background: #eef5ff; border: 1px solid #cfe0f7; border-radius: 5px; padding: .35rem .6rem; }
.parts code { font-family: Consolas, "Courier New", monospace; }
.jobinfo strong { font-family: Consolas, "Courier New", monospace; color: #0b5cad; }
.exploded > summary { cursor: pointer; font-size: .82rem; color: #0b5cad; }
.copybtn { margin-left: .5rem; font-size: .72rem; padding: .1rem .5rem; border: 1px solid var(--line); background: #fff; border-radius: 4px; cursor: pointer; color: #0b5cad; }
.copybtn:hover { background: #eef4fb; }

.share-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .4rem; }
.comment { width: 100%; box-sizing: border-box; font-family: Consolas, "Courier New", monospace; font-size: .82rem; line-height: 1.45; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 6px; resize: vertical; color: #24292f; }

/* Pattern-vs-exploded standards checklist */
.compare > .compare-head { font-weight: 600; color: #0b5cad; margin: .4rem 0; }
.cmp-step { margin: .5rem 0 .8rem; }
.cmp-step h4 { margin: .4rem 0 .2rem; font-size: .9rem; color: var(--ink); }
table.cmp { border-collapse: collapse; width: 100%; }
table.cmp th, table.cmp td { border: 1px solid var(--line); padding: 4px 8px; font-size: .82rem; vertical-align: top; text-align: left; }
table.cmp th { background: #f3f3f3; }
table.cmp td.cmpcol { width: 34%; }
.mark { font-weight: 600; font-size: .82rem; }
.mark.pass { color: #0a7a0a; }
.mark.fail { color: var(--sf-red); }
.mark.na { color: #999; }
.cdetail { color: #444; font-weight: 400; margin-top: 3px; line-height: 1.45; }
.cloc { color: #777; font-weight: 400; font-size: .74rem; }
.vtitle { font-weight: 600; font-size: .9rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.vstd { font-size: .66rem; font-weight: 600; color: #556; background: #eef0f4; padding: .04rem .35rem; border-radius: 3px; letter-spacing: .02em; }
.absent { color: #a06000; font-weight: 400; font-size: .76rem; }
table.cmp tr.chkfail td { background: #fff2f2; }
table.cmp tr.chkfail td:first-child { box-shadow: inset 3px 0 0 var(--sf-red); }
.diffcount { font-size: .74rem; font-weight: 600; color: #8a5000; background: #ffe6b0; padding: .05rem .45rem; border-radius: 3px; margin-left: .4rem; }
.diffcount.none { color: #0a7a0a; background: #e6f5e6; }
.vtable th:first-child, .vtable td:first-child { width: 100%; }
.vstatus { display: inline-block; font-size: .72rem; font-weight: 700; padding: .1rem .45rem; border-radius: 3px; }
.vstatus.pass { color: #0a7a0a; background: #e6f5e6; }
.vstatus.fail { color: #fff; background: var(--sf-red); }
.vstatus.unknown { color: #7a5a00; background: #fff0c2; }
.vrow.fail td { background: #fff6f6; }
.vsum { font-size: .72rem; font-weight: 600; margin-left: .4rem; padding: .05rem .4rem; border-radius: 3px; }
.vsum.pass { color: #0a7a0a; background: #e6f5e6; }
.vsum.fail { color: #b00020; background: #ffe0e0; }
.vsum.unknown { color: #7a5a00; background: #fff0c2; }

/* Validation checklist (icon + title + info tooltip) */
.vlist { list-style: none; margin: .3rem 0 .2rem; padding: 0; }
.vtable { width: 100%; border-collapse: collapse; margin: .3rem 0 .2rem; font-size: .88rem; }
.vtable th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: #666; border-bottom: 2px solid #e2e2e2; padding: .3rem .5rem; }
.vtable th:nth-child(2), .vtable th:nth-child(3), .vtable td.vcol { text-align: center; width: 6.5rem; white-space: nowrap; padding-left: .9rem; padding-right: .9rem; }
.vtable td { border-bottom: 1px solid #f0f0f0; padding: .3rem .5rem; vertical-align: middle; }
.vtable tr:last-child td { border-bottom: 0; }
.vtable .vmark { margin-left: 0; }
.vlist .vitem { display: flex; align-items: center; gap: .5rem; padding: .28rem .1rem; border-bottom: 1px solid #f0f0f0; }
.vlist .vitem:last-child { border-bottom: 0; }
.vmark { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: .1rem .55rem; border-radius: 10px; font-size: .72rem; font-weight: 700; margin-left: auto; }
.vmark.pass { color: #fff; background: #0a7a0a; }
.vmark.fail { color: #fff; background: var(--sf-red); }
.vmark.manual { color: #7a5a00; background: #ffe08a; }
.vname { flex: 0 1 auto; font-size: .88rem; font-weight: 600; color: #222; }
.vinfo { flex: 0 0 auto; cursor: help; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #0b5cad; color: #fff; font: italic 700 .72rem/1 Georgia, "Times New Roman", serif; }
.vinfo:hover { background: #063d73; }
.manual-panel > summary { color: #8a5000; }
.manual-panel .vname { font-weight: 500; }
/* Manual-verification table: Line | Manual check | What to verify. */
.vtable.mtable th:first-child, .vtable.mtable td.mline { width: 4rem; text-align: center; white-space: nowrap; }
.vtable.mtable th:nth-child(2), .vtable.mtable td:nth-child(2) { width: 40%; text-align: left; white-space: normal; }
.vtable.mtable th:nth-child(3), .vtable.mtable td:nth-child(3) { width: auto; text-align: left; white-space: normal; }
.mline { color: #555; font-family: Consolas, "Courier New", monospace; }
.mcheck { font-size: .84rem; color: #333; }

.exploded pre { background: #1e1e1e; color: #eaeaea; padding: .6rem .8rem; border-radius: 5px; overflow: auto; font: .8rem/1.35 Consolas, "Courier New", monospace; max-height: 22rem; }
.exploded-body { margin: .2rem 0 .6rem; }
.exploded-body .exphead { display: flex; justify-content: flex-end; margin-bottom: .3rem; }
.exploded-body pre { background: #1e1e1e; color: #eaeaea; padding: .6rem .8rem; border-radius: 5px; overflow: auto; font: .8rem/1.35 Consolas, "Courier New", monospace; max-height: 22rem; margin: 0; }
.spool-view { margin: .2rem 0 .6rem; }
.spool-view .report-tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: -1px; }
.spool-view .report-tab { background: #f1f1f1; color: #222; border: 1px solid #ccc; border-bottom: none; border-radius: 6px 6px 0 0; padding: .3rem .7rem; font: .8rem Consolas, "Courier New", monospace; cursor: pointer; }
.spool-view .report-tab:hover { background: #e4e4e4; }
.spool-view .report-tab.active { background: var(--sf-red); color: #fff; border-color: var(--sf-red); }
.spool-view .exploded-body { margin: 0; }
.spool-view .exphead { justify-content: flex-end; padding: .3rem 0; }
.msg { font-size: .85rem; color: #555; }
.msg.error { color: var(--sf-red); }
.warn { margin: 0 0 .6rem; font-size: .85rem; color: #8a5000; background: #fff4e5; border: 1px solid #f0d3a8; border-left: 4px solid #e08a00; border-radius: 5px; padding: .4rem .65rem; }
.hidden { display: none; }
/* Version diff (added / removed / context lines). */
.diff { font: .8rem/1.35 Consolas, "Courier New", monospace; background: #1e1e1e; border-radius: 5px; padding: .5rem .6rem; overflow: auto; max-height: 24rem; }
.dl { white-space: pre; }
.dl.add { color: #7ee787; }
.dl.del { color: #ff7b72; }
.dl.ctx { color: #9aa4ad; }
.dl.gap { color: #666; }
.members { display: grid; grid-template-columns: 1fr; gap: .35rem; }
.members label { flex-direction: row; align-items: center; gap: .4rem; font-size: .88rem; color: var(--ink); flex-wrap: wrap; }
/* One row per JCL name; its patternized/exploded copies listed inline. */
.mgroup { padding: .3rem 0; border-bottom: 1px solid #f0f0f0; }
.mgroup:last-child { border-bottom: 0; }
.ghead { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.gname { font-family: Consolas, "Courier New", monospace; font-size: 1rem; font-weight: 700; letter-spacing: .02em; }
.gitems { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .3rem 0 0 1.6rem; }
.gitem { display: inline-flex; align-items: center; gap: .35rem; }
.gsep { color: #bbb; }
.mname { font-family: Consolas, "Courier New", monospace; }
.mbase { font-size: 1rem; font-weight: 700; letter-spacing: .02em; }
.mver { font-size: 1rem; color: #0b5cad; margin-left: 0; font-weight: 700; }
.msep { color: #999; }
/* Member name as a link that reveals the JCL code below the row. */
.mlink { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; font: inherit; color: inherit; text-align: left; }
.mlink:hover { background: none; }
.mlink:hover .mbase, .mlink:hover .mver { text-decoration: underline; }
.mcode { grid-column: 1 / -1; margin: 0 0 .2rem 1.6rem; }
.mcode pre { background: #1e1e1e; color: #eaeaea; padding: .5rem .7rem; border-radius: 5px; overflow: auto; font: .78rem/1.3 Consolas, "Courier New", monospace; max-height: 20rem; margin: 0; }
.vtag { font-size: .72rem; padding: .05rem .4rem; border-radius: 4px; }
.vtag.ver { background: #eef3ff; color: #1b3a8a; border: 1px solid #c3d3f5; }
.vtag.pattern { background: #fff4e5; color: #8a5000; border: 1px solid #f0d3a8; }
.vtag.exploded { background: #eef7ee; color: #1a7f37; border: 1px solid #b7dcc0; }
.vtag.data { background: #f0f0f0; color: #666; border: 1px solid #d5d5d5; }

.tabbar { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 2px solid var(--line); margin-bottom: .75rem; }
.tab {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .7rem; font-size: .82rem; font-weight: 600;
  background: #f3f5f8; color: #444; border: 1px solid var(--line); border-bottom: none;
  border-radius: 6px 6px 0 0; cursor: pointer; margin-bottom: -2px;
}
.tab:hover { background: #e9edf3; }
.tab.active { background: #fff; border-bottom: 2px solid #fff; color: #111; }
.tab .tdot { width: .5rem; height: .5rem; border-radius: 50%; flex: none; }
.tab.pass .tdot { background: #0a7a0a; }
.tab.fail .tdot { background: var(--sf-red); }
.tab .mver { font-weight: 700; }
.tab .tvmark { color: #0b5cad; font-weight: 700; margin-left: .1rem; }
.tabpanel.hidden { display: none; }
.tabpanel .report { margin-bottom: 0; }
.tabpanel .report.vchange { margin-bottom: .75rem; }
.report.vchange > summary { border-left: 4px solid #0b5cad; }

.report {
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: .75rem;
  overflow: hidden;
}
.report summary {
  cursor: pointer;
  padding: .6rem .8rem;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.report .count { font-weight: 400; font-size: .82rem; }
.report .mver { font-weight: 700; }
.report.pass summary { border-left: 4px solid #0a7a0a; }
.report.fail summary { border-left: 4px solid var(--sf-red); }
.report .body { padding: 0 .5rem .5rem; }
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid var(--line); padding: 5px 8px; text-align: left; vertical-align: top; font-size: .84rem; }
th { background: #f3f3f3; }
.badge { background: #0b5cad; color: #fff; padding: 1px 6px; border-radius: 3px; font-size: .78rem; }
.sev-high td:first-child { border-left: 3px solid var(--sf-red); }
.fix { color: #0a7a0a; font-size: .8rem; margin-top: 2px; }
code { white-space: pre-wrap; word-break: break-word; }
.actions { margin: .4rem 0; display: flex; gap: .5rem; }
.actions a { font-size: .82rem; color: #0b5cad; cursor: pointer; text-decoration: underline; }