/* Software Engineering Project: planning and testing lab.
   Uses the theme's custom properties so light and dark mode both work. */
.sep-lab {
  --sep-ok: #cfe8d6;   --sep-ok-ink: #123d26;
  --sep-bad: #f6c4bd;  --sep-bad-ink: #5c1410;
  --sep-info: #f6e0a8; --sep-info-ink: #4a3300;
  --sep-skip: #ece6d6; --sep-skip-ink: #5a5346;
  --sep-bar: #8fb7a0;  --sep-bar-crit: #c8553d; --sep-float: rgba(143, 183, 160, .35);
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.1rem 1.2rem;
  margin: 1.5rem 0;
  box-shadow: var(--shadow-sm);
  color: var(--text-primary);
  min-width: 0;
}
[data-theme="dark"] .sep-lab {
  --sep-ok: #21503a;   --sep-ok-ink: #d8f3e3;
  --sep-bad: #6b2a26;  --sep-bad-ink: #fde0dc;
  --sep-info: #5d4a12; --sep-info-ink: #fdecb8;
  --sep-skip: #34322d; --sep-skip-ink: #c9c2b2;
  --sep-bar: #5f8f78;  --sep-bar-crit: #e0785f; --sep-float: rgba(95, 143, 120, .4);
}
.sep-lab h4 { margin: 0 0 .25rem; font-size: 1.05rem; }
.sep-intro, .sep-lead { margin: 0 0 .9rem; color: var(--text-secondary); font-size: .92rem; }

/* Tabs */
.sep-tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); padding-bottom: .6rem; }
.sep-tab {
  font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
  padding: .45rem .85rem; border-radius: var(--radius-md);
  border: 1px solid var(--border-strong); background: var(--bg-tertiary); color: var(--text-primary);
}
.sep-tab[aria-selected="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
[data-theme="dark"] .sep-tab[aria-selected="true"] { color: #10131f; }
.sep-tab:focus-visible, .sep-chip:focus-visible, .sep-btn:focus-visible, .sep-input:focus-visible, .sep-table-wrap:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.sep-tabpanel[hidden] { display: none; }

/* Controls */
.sep-controls { display: grid; gap: .7rem; margin-bottom: 1rem; }
.sep-controls--row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); align-items: end; }
.sep-field { display: grid; gap: .25rem; min-width: 0; }
.sep-field label { font-weight: 700; font-size: .85rem; }
.sep-input {
  font: inherit; font-family: var(--font-mono); font-size: .9rem; width: 100%; box-sizing: border-box;
  padding: .45rem .6rem; border-radius: var(--radius-md);
  border: 1px solid var(--border-strong); background: var(--bg-tertiary); color: var(--text-primary);
}
.sep-input--num { width: 4.6rem; min-width: 4.6rem; max-width: 4.6rem; padding: .3rem .4rem; }
.sep-controls--row .sep-input--num { width: 100%; min-width: 0; max-width: none; padding: .45rem .6rem; }
.sep-presets { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.sep-chip, .sep-btn {
  font: inherit; font-size: .82rem; cursor: pointer; padding: .35rem .7rem; border-radius: var(--radius-full);
  border: 1px solid var(--border-strong); background: var(--bg-tertiary); color: var(--text-primary);
}
.sep-btn { font-weight: 700; background: var(--primary); border-color: var(--primary); color: #fff; padding: .5rem 1rem; border-radius: var(--radius-md); }
[data-theme="dark"] .sep-btn { color: #10131f; }
.sep-chip:hover { background: var(--surface-hover); }

/* Tables */
.sep-table-wrap { overflow-x: auto; margin: .25rem 0 .8rem; border: 1px solid var(--border); border-radius: var(--radius-md); }
.sep-table { border-collapse: collapse; width: 100%; font-size: .84rem; min-width: 34rem; }
.sep-table th, .sep-table td { text-align: left; padding: .35rem .55rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.sep-table th { font-weight: 700; color: var(--text-secondary); background: var(--bg-tertiary); white-space: nowrap; }
.sep-table tbody tr:last-child td { border-bottom: 0; }
.sep-row--crit td { background: color-mix(in srgb, var(--sep-bad) 45%, transparent); }
.sep-table code { font-family: var(--font-mono); font-size: .82rem; background: none; padding: 0; }

.sep-summary { margin: .4rem 0 .2rem; font-size: .92rem; overflow-wrap: anywhere; }
.sep-note { color: var(--text-secondary); font-size: .87rem; margin: .4rem 0 .8rem; }

/* Bars */
.sep-bars { margin-top: .8rem; display: grid; gap: .25rem; }
.sep-bar-row { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); align-items: center; gap: .5rem; font-size: .8rem; }
.sep-bar-label { font-weight: 700; text-align: center; }
.sep-bar-track { position: relative; height: 1.05rem; background: var(--bg-tertiary); border-radius: 4px; border: 1px solid var(--border); overflow: hidden; }
.sep-bar, .sep-bar-float { position: absolute; top: 0; bottom: 0; }
.sep-bar { background: var(--sep-bar); border-radius: 3px; min-width: 2px; }
.sep-bar--crit { background: var(--sep-bar-crit); }
.sep-bar-float { background: repeating-linear-gradient(45deg, var(--sep-float), var(--sep-float) 4px, transparent 4px, transparent 8px); }
.sep-key { margin: .5rem 0 0; font-size: .8rem; color: var(--text-secondary); }
.sep-swatch { display: inline-block; width: .9rem; height: .7rem; border-radius: 2px; background: var(--sep-bar); vertical-align: -1px; margin-left: .4rem; }
.sep-swatch--crit { background: var(--sep-bar-crit); }
.sep-swatch--float { background: repeating-linear-gradient(45deg, var(--sep-float), var(--sep-float) 3px, transparent 3px, transparent 6px); border: 1px solid var(--border-strong); }

/* Code */
.sep-code {
  margin: .5rem 0 .6rem; padding: .55rem .65rem; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--bg-tertiary); font-family: var(--font-mono); font-size: .8rem; line-height: 1.5;
  overflow-x: auto; white-space: pre; tab-size: 4;
}
.sep-code code { font: inherit; background: none; padding: 0; color: var(--text-primary); }
.sep-line { display: inline-block; min-width: 100%; box-sizing: border-box; border-left: 3px solid transparent; padding-left: .3rem; }
.sep-line--hit { background: var(--sep-ok); color: var(--sep-ok-ink); border-left-color: var(--sep-ok-ink); }
.sep-code--lines { padding-left: .3rem; }

/* Badges and rules */
.sep-badge { display: inline-block; padding: .2rem .55rem; border-radius: var(--radius-full); font-size: .78rem; font-weight: 700; overflow-wrap: anywhere; }
.sep-ok { background: var(--sep-ok); color: var(--sep-ok-ink); }
.sep-bad { background: var(--sep-bad); color: var(--sep-bad-ink); }
.sep-info { background: var(--sep-info); color: var(--sep-info-ink); }
.sep-rules { list-style: none; margin: .5rem 0; padding: 0; display: grid; gap: .35rem; }
.sep-rule { display: flex; gap: .55rem; align-items: baseline; font-size: .88rem; }
.sep-mark { flex: none; min-width: 4.6rem; text-align: center; padding: .1rem .4rem; border-radius: var(--radius-full); font-size: .74rem; font-weight: 700; }
.sep-mark--pass { background: var(--sep-ok); color: var(--sep-ok-ink); }
.sep-mark--skip { background: var(--sep-skip); color: var(--sep-skip-ink); }
.sep-rule-text { overflow-wrap: anywhere; min-width: 0; }

@media (max-width: 480px) {
  .sep-lab { padding: .9rem .75rem 1rem; }
  .sep-tab { flex: 1 1 auto; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .sep-lab * { transition: none !important; animation: none !important; }
}

/* Compact tables on this page (many columns) */
.table-wrap table.sep-compact th, .table-wrap table.sep-compact td { padding: .38rem .38rem; font-size: .8rem; line-height: 1.4; vertical-align: top; }
.table-wrap table.sep-compact td strong { display: inline; }

/* Labs built on the shared kit (css/labs.css) */
.sep-bar-line { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr) 3rem; gap: .5rem; align-items: center; margin: .35rem 0; font-size: .9rem; }
.sep-bar-line b { text-align: right; font-variant-numeric: tabular-nums; }
.sep-matrix-bars { margin: .8rem 0; }
.lab-row.sep-matrix-sliders { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .6rem 1.4rem; }