.grid-grid-workbench {
  --grid-custody-accent: #ff7048;
  margin-top: 20px;
  border: 1px solid #2d3239;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255, 72, 72, .08), rgba(8, 11, 15, .98) 38%);
  color: #f7f8fb;
  overflow: hidden;
}
.grid-grid-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: end;
  padding: 24px;
  border-bottom: 1px solid #2a2e35;
}
.grid-grid-head span,
.grid-grid-workbench article > span,
.grid-grid-workbench th small {
  display: block;
  color: var(--grid-custody-accent);
  font: 700 11px/1.25 var(--grid-font-mono, monospace);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.grid-grid-head h2 {
  margin: 5px 0 7px;
  font-size: clamp(25px, 3vw, 42px);
  line-height: .98;
}
.grid-grid-head p,
.grid-grid-workbench p {
  margin: 0;
  color: #aeb6c3;
  line-height: 1.55;
}
.grid-grid-head > strong {
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--grid-custody-accent) 48%, #222);
  border-radius: 999px;
  color: #ffd2c5;
  font: 700 11px/1 var(--grid-font-mono, monospace);
  text-transform: uppercase;
}
.grid-grid-workbench > .grid-actions,
.grid-grid-workbench > output,
.grid-grid-workbench > [data-grid-pick-status],
.grid-grid-boundary {
  margin: 18px 24px;
}
.grid-grid-session-strip {
  display: grid;
  grid-template-columns: repeat(9, minmax(96px, 1fr));
  gap: 8px;
  padding: 20px 24px 0;
  overflow-x: auto;
}
.grid-grid-session-strip button {
  min-height: 74px;
  padding: 10px;
  border: 1px solid #2d3239;
  background: #0c1015;
  color: #f7f8fb;
  text-align: left;
  cursor: pointer;
}
.grid-grid-session-strip button[aria-pressed="true"] {
  border-color: var(--grid-custody-accent);
  box-shadow: inset 3px 0 var(--grid-custody-accent);
}
.grid-grid-session-strip button span,
.grid-grid-session-strip button strong {
  display: block;
  font: 700 10px/1.35 var(--grid-font-mono, monospace);
  text-transform: uppercase;
}
.grid-grid-session-strip button strong { margin-top: 12px; color: #9ba4b2; }
.grid-grid-focus,
.grid-grid-pick,
.grid-grid-record,
.grid-grid-award,
.grid-grid-empty {
  margin: 18px 24px;
  padding: 18px;
  border: 1px solid #30353d;
  background: #0b0e12;
}
.grid-grid-focus strong,
.grid-grid-pick strong,
.grid-grid-record strong,
.grid-grid-award strong,
.grid-grid-empty strong {
  display: block;
  margin: 7px 0;
  overflow-wrap: anywhere;
  font-size: 19px;
}
.grid-grid-focus small,
.grid-grid-pick small,
.grid-grid-record small,
.grid-grid-award small,
.grid-grid-empty small {
  color: #8f99a8;
  overflow-wrap: anywhere;
}
.grid-grid-table-wrap { overflow-x: auto; padding: 0 24px; }
.grid-grid-table { width: 100%; min-width: 730px; border-collapse: collapse; }
.grid-grid-table th,
.grid-grid-table td { padding: 13px; border-bottom: 1px solid #2b3037; text-align: left; vertical-align: top; }
.grid-grid-table th { font-weight: 700; }
.grid-grid-table th small,
.grid-grid-table td small { margin-top: 5px; color: #8993a0; }
.grid-grid-amendments,
.grid-grid-qualifying,
.grid-grid-history,
.grid-grid-consumer {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 18px 24px;
}
.grid-grid-amendments article,
.grid-grid-qualifying article,
.grid-grid-history article,
.grid-grid-consumer article {
  min-width: 0;
  padding: 15px;
  border: 1px solid #2a3038;
  background: #0c1015;
}
.grid-grid-amendments article[data-amendment-status="superseded"] { opacity: .68; border-style: dashed; }
.grid-grid-amendments strong,
.grid-grid-qualifying strong,
.grid-grid-history strong,
.grid-grid-consumer strong {
  display: block;
  margin: 7px 0;
  overflow-wrap: anywhere;
  font-size: 16px;
}
.grid-grid-amendments small,
.grid-grid-qualifying small,
.grid-grid-history small,
.grid-grid-consumer small { color: #8f99a8; overflow-wrap: anywhere; }
.grid-grid-qualifying strong small { display: block; margin-top: 4px; color: #f7f8fb; }
.grid-grid-qualifying p { margin-top: 10px; font-size: 12px; overflow-wrap: anywhere; }
.grid-grid-threshold {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 12px;
  align-items: center;
  margin: 0 24px 18px;
  padding: 13px 16px;
  border-left: 4px solid var(--grid-custody-accent);
  background: #15100e;
}
.grid-grid-threshold span { color: #aeb6c3; }
.grid-grid-workbench output {
  display: block;
  padding: 12px 14px;
  border-left: 3px solid var(--grid-custody-accent);
  background: #11161c;
  color: #d9e0e9;
  overflow-wrap: anywhere;
}
.grid-grid-workbench output[role="alert"] { border-color: #ff4b55; color: #ffd2d5; }
.grid-grid-versus {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
}
.grid-grid-versus article { padding: 18px; border: 1px solid #30353d; background: #0b0f14; }
.grid-grid-versus article strong { display: block; margin: 5px 0; font-size: 34px; }
.grid-grid-versus > b { color: var(--grid-custody-accent); }
.grid-grid-boundary { padding-top: 14px; border-top: 1px solid #2a2f36; }

@media (max-width: 760px) {
  .grid-grid-workbench { margin-top: 14px; border-radius: 12px; }
  .grid-grid-head { grid-template-columns: 1fr; align-items: start; padding: 18px; }
  .grid-grid-head h2 { font-size: 28px; }
  .grid-grid-head > strong { justify-self: start; }
  .grid-grid-workbench > .grid-actions,
  .grid-grid-workbench > output,
  .grid-grid-workbench > [data-grid-pick-status],
  .grid-grid-boundary,
  .grid-grid-focus,
  .grid-grid-pick,
  .grid-grid-record,
  .grid-grid-award,
  .grid-grid-empty { margin-left: 16px; margin-right: 16px; }
  .grid-grid-session-strip { padding-left: 16px; padding-right: 16px; }
  .grid-grid-table-wrap { padding: 0 16px; }
  .grid-grid-amendments,
  .grid-grid-qualifying,
  .grid-grid-history,
  .grid-grid-consumer { grid-template-columns: 1fr; padding: 14px 16px; }
  .grid-grid-threshold { grid-template-columns: 1fr 1fr; margin: 0 16px 16px; }
  .grid-grid-versus { grid-template-columns: 1fr; padding: 16px; }
  .grid-grid-versus > b { text-align: center; }
}