:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #162b40;
  background: #eef3f8;
  --navy: #0d3c61;
  --navy-deep: #082b47;
  --blue: #0876d1;
  --blue-dark: #0560aa;
  --surface: #ffffff;
  --surface-muted: #f7f9fc;
  --border: #cfdbe7;
  --muted: #5c7085;
  --danger: #9a2431;
  --danger-surface: #fff1f2;
  --success: #126b49;
  --success-surface: #edf9f3;
  --shadow: 0 14px 34px rgba(20, 48, 75, .10);
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  margin: 0;
  color: #162b40;
  background: #eef3f8;
  line-height: 1.5;
}

header {
  color: #ffffff;
  background: linear-gradient(120deg, var(--navy-deep), var(--navy));
  box-shadow: 0 2px 12px rgba(8, 43, 71, .22);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100% - 2.5rem, 76rem);
  min-height: 4.75rem;
  margin: 0 auto;
  gap: 1.5rem;
}

.site-brand {
  display: grid;
  margin: 0;
  color: #ffffff;
  font-size: 1.15rem;
  line-height: 1.15;
}

.site-brand a { color: inherit; text-decoration: none; }
.site-brand span { margin-top: .25rem; color: #b9d4e9; font-size: .72rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }

nav { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
nav a { padding: .5rem .65rem; border-radius: .4rem; color: #e9f5ff; font-size: .92rem; font-weight: 650; text-decoration: none; }
nav a:hover, nav a:focus-visible { color: #ffffff; background: rgba(255, 255, 255, .15); }

main { width: min(100% - 2rem, 76rem); margin: 2rem auto 3rem; }

h1, h2, h3, h4 { color: #112d47; line-height: 1.22; }
h1 { margin: 0 0 1rem; font-size: clamp(1.55rem, 2.7vw, 2.25rem); }
h2 { margin: 0 0 .55rem; font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
h3 { margin: 0 0 .9rem; font-size: 1.12rem; }
h4 { margin: 1.2rem 0 .55rem; font-size: 1rem; }
p { margin: .45rem 0 1rem; }
a { color: #0567b8; text-underline-offset: .14em; }
a:hover { color: #034e8d; }

main > section,
.live-dashboard-charts > section,
main > aside,
main > form,
main > fieldset,
form > fieldset {
  margin: 1.25rem 0;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: .8rem;
  background: var(--surface);
  box-shadow: 0 2px 7px rgba(20, 48, 75, .035);
}

main > section > :first-child,
.live-dashboard-charts > section > :first-child,
main > aside > :first-child { margin-top: 0; }

.live-dashboard-charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 1.25rem 0;
}

.live-dashboard-charts > section { margin: 0; }

.live-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
}

.live-metric {
  min-width: 0;
  padding: .7rem .8rem;
  border: 1px solid #d9e4ee;
  border-radius: .55rem;
  background: var(--surface-muted);
}

.live-metric span { display: block; color: var(--muted); font-size: .78rem; font-weight: 720; }
.live-metric strong { display: block; margin-top: .2rem; color: #183b5b; font-size: 1.1rem; overflow-wrap: anywhere; }
#live-capacity-notice { margin: .75rem 0 0; }

form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  align-items: start;
  gap: 1rem 1.15rem;
}

form > fieldset,
form > p,
form > button,
form > .actions,
form > .run-builder__actions,
form > .run-builder__identity,
form > #workload-rows,
form > template { grid-column: 1 / -1; margin: 0; }

.run-builder__identity {
  display: grid;
  grid-template-columns: minmax(11rem, 1fr) minmax(14rem, 1.2fr) minmax(19rem, 1.7fr);
  gap: .85rem 1rem;
  align-items: end;
}

.run-builder__mode { display: grid; gap: .35rem; min-width: 0; }
.run-builder__mode-label { color: #344d64; font-size: .92rem; font-weight: 680; }
.run-builder__mode-options { display: flex; min-height: 2.5rem; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem; }
.run-builder__identity > p { grid-row: 2; margin: 0; }
.run-builder__name-error { grid-column: 1; }
.run-builder__target-error { grid-column: 2; }

.run-builder__settings {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: .8rem 1rem;
  gap: .55rem .75rem;
}

.run-builder__settings > [data-load-mode] { display: contents; }
.run-builder__settings > p { margin: 0; }

.run-builder__workloads { padding: .8rem 1rem; gap: .6rem; }
.run-builder__workloads > .workload-help,
.run-builder__workloads > #workload-rows { grid-column: 1 / -1; }

.workload-help {
  margin: 0;
  padding: .15rem .35rem;
  border: 0;
  background: transparent;
  font-size: .8rem;
}

.workload-help p { margin: .45rem 0 .2rem; }

#workload-rows {
  display: grid;
  grid-template-columns: 1fr;
  gap: .45rem;
}

#workload-rows [data-workload-row] {
  grid-template-columns: minmax(0, 1fr) minmax(4.75rem, .22fr) minmax(5.5rem, .25fr) 2rem;
  padding: .45rem .55rem .55rem;
  align-items: end;
  gap: .4rem .55rem;
  margin: 0;
}

#workload-rows [data-workload-row] > label:first-of-type { grid-column: auto; }
#workload-rows [data-workload-row] > label { gap: .2rem; font-size: .78rem; }
#workload-rows [data-workload-row] input,
#workload-rows [data-workload-row] select { height: 2rem; min-height: 2rem; padding: .35rem .45rem; }

#workload-rows [data-workload-row] > legend {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.workload-remove {
  position: static;
  align-self: end;
  display: grid;
  width: 2rem;
  min-height: 2rem;
  padding: 0;
  place-items: center;
  border-color: transparent;
  border-radius: 50%;
  color: #536a80;
  background: transparent;
  box-shadow: none;
  font-size: 1.35rem;
  font-weight: 450;
  line-height: 1;
}

.workload-remove:hover { border-color: #d9a4a4; color: #9e2020; background: #fff4f4; }

.run-builder__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.workload-add { min-height: 2.2rem; padding: .35rem .65rem; font-size: .86rem; }

fieldset {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: .85rem 1rem;
  border: 1px solid var(--border);
}

[data-load-mode][hidden] { display: none !important; }

fieldset fieldset {
  padding: 1rem;
  border-radius: .6rem;
  background: var(--surface-muted);
  box-shadow: none;
}

legend { padding: 0 .35rem; color: #173d5e; font-weight: 750; }

label { display: flex; min-width: 0; flex-direction: column; gap: .35rem; color: #344d64; font-size: .92rem; font-weight: 680; }
label:has(> input[type="radio"]),
label:has(> input[type="checkbox"]) { flex-direction: row; align-items: center; gap: .55rem; font-weight: 600; }

input:not([type="radio"]):not([type="checkbox"]),
select,
textarea {
  width: 100%;
  min-height: 2.5rem;
  padding: .55rem .65rem;
  border: 1px solid #aebed0;
  border-radius: .42rem;
  color: #132d46;
  background: #ffffff;
  font: inherit;
  font-weight: 450;
}

select { height: 2.5rem; min-height: 2.5rem; line-height: 1.25rem; }

textarea { min-height: 6rem; resize: vertical; }
input[type="radio"], input[type="checkbox"] { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--blue); }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid rgba(8, 118, 209, .32); outline-offset: 2px; }

.date-control { position: relative; display: flex; width: 100%; align-items: stretch; gap: .45rem; }
.date-control > input { min-width: 0; }
.date-control__toggle { flex: 0 0 auto; white-space: nowrap; }
.date-picker { position: absolute; z-index: 20; top: calc(100% + .4rem); left: 0; width: 18rem; padding: .8rem; border: 1px solid #aebed0; border-radius: .55rem; background: #ffffff; box-shadow: var(--shadow); }
.date-picker__header { display: grid; grid-template-columns: 2.25rem 1fr 2.25rem; align-items: center; margin-bottom: .65rem; text-align: center; }
.date-picker__navigation { display: grid; width: 2.15rem; min-height: 2.15rem; padding: 0; place-items: center; font-size: 1.4rem; line-height: 1; }
.date-picker__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .2rem; }
.date-picker__weekday { padding: .25rem 0; color: var(--muted); font-size: .72rem; font-weight: 760; text-align: center; text-transform: uppercase; }
.date-picker__day { display: grid; width: 100%; min-height: 2rem; padding: .2rem; place-items: center; border-color: transparent; border-radius: .35rem; }
.date-picker__day:hover { border-color: #8eb9d9; background: #eaf5ff; }
.date-picker__day[aria-pressed="true"] { border-color: var(--blue); color: #ffffff; background: var(--blue); }

button {
  width: fit-content;
  min-height: 2.45rem;
  padding: .55rem .9rem;
  border: 1px solid #aab9c8;
  border-radius: .45rem;
  color: #203a53;
  background: #ffffff;
  cursor: pointer;
  font: inherit;
  font-size: .9rem;
  font-weight: 720;
}

button:hover { border-color: #718aa4; background: #f2f6fa; }
button[type="submit"] { border-color: var(--blue); color: #ffffff; background: var(--blue); box-shadow: 0 2px 5px rgba(5, 96, 170, .22); }
button[type="submit"]:hover { border-color: var(--blue-dark); background: var(--blue-dark); }

.actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.actions a { display: inline-flex; align-items: center; min-height: 2.4rem; padding: .45rem .75rem; border: 1px solid #9bb8d2; border-radius: .42rem; color: #075fa8; background: #f5faff; font-weight: 700; text-decoration: none; }
.actions a:hover { border-color: #5d94be; background: #e9f4ff; }

[role="alert"], [role="status"] { padding: .75rem .9rem; border-radius: .5rem; font-weight: 620; }
[role="alert"] { border: 1px solid #efc5ca; color: var(--danger); background: var(--danger-surface); }
[role="status"] { border: 1px solid #c6e7d7; color: var(--success); background: var(--success-surface); }

aside { border-left: .3rem solid #2b82c5 !important; background: #f4f9fd !important; }

table { width: 100%; margin: 1rem 0; border: 1px solid var(--border); border-collapse: separate; border-spacing: 0; border-radius: .6rem; background: #ffffff; overflow: hidden; }
th, td { padding: .7rem .8rem; border-bottom: 1px solid #dde5ee; text-align: left; vertical-align: top; }
th { color: #2a465e; background: #f0f5f9; font-size: .82rem; font-weight: 760; }
.review-workloads { table-layout: fixed; }
.review-workloads th:nth-child(1), .review-workloads td:nth-child(1) { width: 25%; }
.review-workloads th:nth-child(2), .review-workloads td:nth-child(2) { width: 20%; }
.review-workloads th:nth-child(3), .review-workloads td:nth-child(3) { width: 10%; }
.review-workloads th:nth-child(4), .review-workloads td:nth-child(4) { width: 12%; }
.review-workloads th:nth-child(5), .review-workloads td:nth-child(5) { width: 33%; }
.review-workloads td, .review-technical-details dd { overflow-wrap: anywhere; }
.review-technical-details dl + dl { margin-top: 1rem; }
.review-accordion { display: grid; margin: 1.25rem 0; gap: .65rem; }
.review-accordion__panel { margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: .8rem; background: var(--surface); box-shadow: 0 2px 7px rgba(20, 48, 75, .035); }
.review-accordion__panel > summary { display: flex; align-items: center; justify-content: space-between; min-height: 4.1rem; padding: .9rem 1.25rem; color: #112d47; cursor: pointer; font-size: 1.12rem; font-weight: 760; list-style: none; }
.review-accordion__panel > summary::-webkit-details-marker { display: none; }
.review-accordion__panel > summary::after { content: '+'; color: #47708f; font-size: 1.45rem; font-weight: 500; }
.review-accordion__panel[open] > summary { border-bottom: 1px solid #e1e8ef; }
.review-accordion__panel[open] > summary::after { content: '−'; }
.review-accordion__content { padding: 1.1rem 1.25rem 1.25rem; }
.review-accordion__content > :first-child { margin-top: 0; }
.review-accordion__content > :last-child { margin-bottom: 0; }
tr:last-child td, tr:last-child th { border-bottom: 0; }
tbody tr:nth-child(even) { background: #fbfdff; }
td form { display: inline; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
td form button { min-height: 2rem; padding: .35rem .55rem; }

dl { display: grid; grid-template-columns: minmax(10rem, 18rem) minmax(0, 1fr); margin: 0; border-top: 1px solid #e1e8ef; }
dt, dd { margin: 0; padding: .65rem .15rem; border-bottom: 1px solid #e1e8ef; }
dt { color: #536a80; font-weight: 700; }
dd { min-width: 0; overflow-wrap: anywhere; }

ul { padding-left: 1.25rem; }
li + li { margin-top: .35rem; }
details { margin: 1rem 0; padding: .8rem .9rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--surface-muted); }
summary { cursor: pointer; color: #1b4e78; font-weight: 750; }
code { display: block; max-width: 100%; padding: .65rem; overflow-wrap: anywhere; border-radius: .35rem; color: #193953; background: #edf3f8; font-size: .82rem; white-space: pre-wrap; }

[id$="-chart"] { margin-top: .75rem; border-radius: .45rem; background: #fbfdff; }
.chart { height: 260px; }

.login-page { display: grid; min-height: 100vh; place-items: center; padding: 1.5rem; background: radial-gradient(circle at 20% 15%, #d9ecfa, transparent 38%), linear-gradient(140deg, #e7f0f7, #f8fafc); }
.login-page main { width: min(100%, 29rem); margin: 0; padding: 2rem; border: 1px solid #cbd9e6; border-radius: 1rem; background: #ffffff; box-shadow: var(--shadow); }
.login-page h1 { margin-bottom: .55rem; }
.login-card__intro { color: var(--muted); }
.login-page form { display: grid; grid-template-columns: 1fr; margin-top: 1.4rem; padding: 0; border: 0; background: transparent; box-shadow: none; }
.login-page form button { width: 100%; }
.eyebrow { margin-bottom: .55rem; color: #256da5; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

@media (max-width: 44rem) {
  .site-header__inner { align-items: flex-start; flex-direction: column; padding: .9rem 0; gap: .7rem; }
  nav { width: 100%; }
  nav a { padding-left: 0; padding-right: .75rem; }
  main { width: min(100% - 1.25rem, 76rem); margin-top: 1.25rem; }
  main > section, .live-dashboard-charts > section, main > aside, main > form, main > fieldset, form > fieldset { padding: 1rem; }
  .live-dashboard-charts { grid-template-columns: 1fr; }
  .live-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .run-builder__identity { grid-template-columns: 1fr; }
  .run-builder__identity > p { grid-column: 1 !important; grid-row: auto; }
  table { display: block; overflow-x: auto; white-space: nowrap; }
  td, th { white-space: normal; }
  dl { grid-template-columns: 1fr; }
  dt { padding-bottom: .15rem; border-bottom: 0; }
  dd { padding-top: .15rem; }
  .date-control { flex-wrap: wrap; }
  .date-control__toggle { width: 100%; }
  .date-picker { width: min(18rem, 100%); }
}