/* Server configurator — /build/server. Loaded after build.css.
 *
 * Everything the two configurators share comes from build.css — section
 * furniture, option rows, the rail, totals, checks, the order modal — so they
 * cannot drift apart visually. What is here is only what a server has and a
 * desktop does not: workloads, the storage array and its bay map, the plans,
 * and the capacity figure at the top of the rail.
 */

/* Read by screen readers, not shown. */
.srv-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.srv-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 10px;
}

.srv-label-gap { margin-top: 22px; }

/* Selection state, shared by every server-only control. */
.srv-work,
.srv-size,
.srv-raid,
.srv-card,
.srv-plan {
  border: 1px solid rgba(255, 255, 255, 0.09);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.srv-work:hover,
.srv-size:hover,
.srv-raid:hover,
.srv-card:hover,
.srv-plan:hover { border-color: rgba(255, 255, 255, 0.62); }

.srv-work.is-on,
.srv-size.is-on,
.srv-raid.is-on,
.srv-card.is-on,
.srv-plan.is-on { border-color: rgba(93, 202, 165, 0.5); background: rgba(29, 158, 117, 0.1); }

.srv-work:focus-visible,
.srv-size:focus-visible,
.srv-raid:focus-visible,
.srv-card:focus-visible,
.srv-plan:focus-visible,
.srv-step-btn:focus-visible,
.cfg-seg-btn:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }

/* The segmented ECC control is a radio group of divs here rather than
 * buttons, so it needs the pointer the button version gets for free. */
.cfg-seg .cfg-seg-btn[role="radio"] { display: inline-flex; align-items: center; }

/* ── 01 workload ── */

.srv-work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.srv-work { background: rgba(255, 255, 255, 0.022); border-radius: 12px; padding: 16px 18px; }
.srv-work-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }

.srv-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
}

.srv-work.is-on .srv-dot { border-color: #5DCAA5; background: #1D9E75; box-shadow: inset 0 0 0 3px #0f2a22; }
.srv-work-title { font-size: 15px; font-weight: 500; }
.srv-work-sub { font-size: 12.5px; color: rgba(255, 255, 255, 0.62); line-height: 1.5; padding-left: 25px; }

/* ── 03 storage array ── */

.srv-array {
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.022);
  border-radius: 14px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.srv-array-top { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; }

.srv-size-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.srv-size { text-align: center; border-radius: 9px; padding: 10px 4px; min-height: 52px; }
.srv-size-tb { font-family: var(--font-mono); font-size: 14px; color: rgba(255, 255, 255, 0.62); }
.srv-size.is-on .srv-size-tb { color: #fff; }
.srv-size-price { font-size: 10.5px; color: rgba(255, 255, 255, 0.62); margin-top: 2px; }

.srv-drive-name {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 12px;
  line-height: 1.5;
}

.srv-drive-name .cfg-thumb { width: 64px; flex-shrink: 0; }
.srv-drive-words { min-width: 0; }

/* A photograph at the head of each network and battery card. */
.srv-card .cfg-thumb { width: 72px; margin-bottom: 10px; }

/* "What is in it": a small photograph before each line, so the parts chosen
 * for the customer are seen, not just named. */
.srv-parts .cfg-line { grid-template-columns: 28px 50px minmax(0, 1fr) auto; }

.srv-line-thumb {
  display: block;
  width: 28px;
  height: 21px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  align-self: center;
}

.srv-line-thumb.has-photo { background: #e9edf0; }

.srv-line-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.srv-drive-spec { font-family: var(--font-mono); font-size: 11.5px; color: rgba(255, 255, 255, 0.62); }

.srv-split {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.55;
  cursor: pointer;
}

.srv-split input { accent-color: var(--accent); color-scheme: dark; width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; }
.srv-split strong { color: #fff; font-weight: 500; }

.srv-stepper { display: flex; align-items: center; gap: 12px; }

.srv-step-btn {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.srv-step-btn:hover:not(:disabled) { border-color: rgba(255, 255, 255, 0.62); color: #fff; }
.srv-step-btn:disabled { opacity: 0.35; cursor: default; }

.srv-count { flex: 1 1 0; text-align: center; }
.srv-count-n { font-family: var(--font-mono); font-size: 26px; letter-spacing: -0.5px; line-height: 1.2; }
.srv-count-of { font-family: var(--font-mono); font-size: 10.5px; color: rgba(255, 255, 255, 0.62); }
.srv-hint { font-size: 12px; color: rgba(255, 255, 255, 0.62); margin-top: 10px; line-height: 1.5; }

.srv-baymap { display: flex; flex-wrap: wrap; gap: 5px; }

.srv-bay {
  width: 30px;
  height: 40px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 4px;
}

.srv-bay-tag { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: 0.4px; color: rgba(255, 255, 255, 0.62); }
.srv-bay.is-data { background: rgba(29, 158, 117, 0.22); border-color: rgba(93, 202, 165, 0.45); }
.srv-bay.is-parity { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.62); }
.srv-bay.is-spare { border-style: dashed; border-color: rgba(93, 202, 165, 0.5); }
.srv-bay:not(.is-empty) .srv-bay-tag { color: rgba(255, 255, 255, 0.6); }

.srv-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.62);
}

.srv-legend span::before {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  vertical-align: -1px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.srv-legend .is-data::before { background: rgba(29, 158, 117, 0.22); border-color: rgba(93, 202, 165, 0.45); }
.srv-legend .is-parity::before { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.62); }
.srv-legend .is-spare::before { border-style: dashed; border-color: rgba(93, 202, 165, 0.5); }

.srv-raid-rows { display: flex; flex-direction: column; gap: 8px; }

.srv-raid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border-radius: 10px;
  padding: 12px 16px;
}

.srv-raid.is-off { opacity: 0.45; cursor: default; }
.srv-raid.is-off:hover { border-color: rgba(255, 255, 255, 0.62); }
.srv-raid-name { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 14px; font-weight: 500; }
.srv-raid-sub { font-size: 12px; color: rgba(255, 255, 255, 0.62); margin-top: 2px; line-height: 1.45; }
.srv-raid-cap { text-align: right; font-family: var(--font-mono); white-space: nowrap; }
.srv-raid-tb { font-size: 14px; color: rgba(255, 255, 255, 0.72); }
.srv-raid.is-on .srv-raid-tb { color: #9FE1CB; }
.srv-raid-unit,
.srv-raid-need { font-size: 10.5px; color: rgba(255, 255, 255, 0.62); margin-top: 1px; }

/* ── 05 memory ── */

.srv-warn {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid rgba(232, 179, 60, 0.35);
  background: rgba(232, 179, 60, 0.07);
  border-radius: 10px;
  padding: 12px 15px;
  margin-bottom: 14px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.5;
}

.srv-warn svg { width: 14px; height: 14px; margin-top: 3px; flex-shrink: 0; }

/* ── 06 network and power ── */

.srv-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.srv-power-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.srv-card { background: rgba(255, 255, 255, 0.022); border-radius: 12px; padding: 15px 16px; }
.srv-card-name { font-size: 14.5px; font-weight: 500; }
.srv-card-sub { font-size: 12px; color: rgba(255, 255, 255, 0.62); margin-top: 3px; line-height: 1.45; }
.srv-card-price { font-family: var(--font-mono); font-size: 13px; color: rgba(255, 255, 255, 0.8); margin-top: 9px; }
.srv-card-price.is-free { color: var(--accent-light); }

/* ── 08 plans ── */

.srv-plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.srv-plan {
  background: rgba(255, 255, 255, 0.022);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.srv-plan-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.srv-plan-name { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 15.5px; font-weight: 500; }
.srv-plan-price { font-family: var(--font-mono); font-size: 16px; color: #9FE1CB; white-space: nowrap; }
.srv-plan-price.is-none { color: rgba(255, 255, 255, 0.62); font-size: 13px; }
.srv-plan-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.srv-plan-items li { position: relative; padding-left: 21px; font-size: 12.5px; color: rgba(255, 255, 255, 0.58); line-height: 1.45; }

.srv-plan-items li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 5px;
  width: 9px;
  height: 5px;
  border-left: 2px solid #1D9E75;
  border-bottom: 2px solid #1D9E75;
  transform: rotate(-45deg);
}

/* ── rail ── */

.srv-cap-big { display: flex; align-items: baseline; gap: 8px; }
.srv-cap-num { font-family: var(--font-mono); font-size: 40px; letter-spacing: -1.5px; line-height: 1; }
.srv-cap-unit { font-family: var(--font-mono); font-size: 16px; color: rgba(255, 255, 255, 0.62); }
.srv-cap-raw { font-size: 12.5px; color: rgba(255, 255, 255, 0.62); margin-top: 6px; line-height: 1.5; }

.srv-cap-bar {
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
  margin: 16px 0 10px;
  display: flex;
}

.srv-cap-bar .is-data { background: #1D9E75; }
.srv-cap-bar .is-parity { background: rgba(255, 255, 255, 0.28); }
.srv-cap-bar .is-spare { background: rgba(93, 202, 165, 0.35); }

.srv-cap-legend {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.62);
}

.srv-cap-tol {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.45;
}

.srv-cap-tol.is-risky { color: #E8B33C; }
.srv-cap-tol svg { width: 14px; height: 14px; margin-top: 2px; flex-shrink: 0; }

.srv-plan-box {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  background: rgba(29, 158, 117, 0.1);
  border: 1px solid rgba(93, 202, 165, 0.28);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 10px;
}

.srv-plan-box-name { font-size: 13.5px; font-weight: 500; }
.srv-plan-box-sub { font-size: 11.5px; color: rgba(255, 255, 255, 0.62); }
.srv-plan-box-price { font-family: var(--font-mono); font-size: 18px; color: #9FE1CB; white-space: nowrap; }

/* The verdict under the totals: whether every check in the parts card is clear. */
.srv-verdict {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-top: 14px;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid rgba(93, 202, 165, 0.22);
  background: rgba(29, 158, 117, 0.07);
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.45;
}

.srv-verdict.is-warn { border-color: rgba(232, 179, 60, 0.35); background: rgba(232, 179, 60, 0.07); color: #E8B33C; }
.srv-verdict.is-fail { border-color: rgba(226, 117, 111, 0.4); background: rgba(226, 117, 111, 0.08); color: #E2756F; }
.srv-verdict svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }

/* The checks close the parts card, so they need no rule beneath them. */
.srv-parts .cfg-checks { border-bottom: 0; padding-bottom: 0; }

/* ── responsive ── */

/* On a narrow screen build.css puts the rail above the configurator, which here
 * would be two screens of summary before the first choice. Only the capacity
 * and the price lead; what is in it and what is included follow the choices. */
@media (max-width: 1080px) {
  .srv-layout .cfg-rail { display: contents; }
  .srv-layout .srv-cap,
  .srv-layout .srv-price { order: -1; }
  .srv-layout .srv-parts,
  .srv-layout .srv-incl { order: 1; }
}

@media (max-width: 760px) {
  .srv-work-grid,
  .srv-plan-grid,
  .srv-card-grid,
  .srv-power-grid,
  .srv-array-top { grid-template-columns: minmax(0, 1fr); }
  .srv-array { padding: 16px; }
  .srv-raid { padding: 11px 13px; }
}

@media (max-width: 560px) {
  .srv-size-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (hover: none) and (pointer: coarse) {
  .srv-size { min-height: 56px; }
  .srv-split { padding: 6px 0; }
}

/* Four chassis sit two by two; three across left the fourth on a row alone. */
.srv-case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 760px) {
  .srv-case-grid { grid-template-columns: minmax(0, 1fr); }
}