/* Graphite titanium workspace. Load after metal-surfaces.css and metal-controls.css. */
.rollout {
  --rollout-line: #d5dce333;
  --rollout-surface: #22262a;
  --rollout-soft: #bfc5cb;
  --rollout-ivory: #edf0f3;
  --rollout-green: #bfd8c9;
  --rollout-amber: #e6c895;
  --rollout-red: #e4b7ad;
  --rollout-grain: repeating-linear-gradient(0deg, #e3e8ee08 0 .5px, #0000000a .6px 1px, transparent 1.1px 2px);
  color: #e3e7eb;
}

.rollout .rollout-heading h2,
.rollout .rollout-console-identity h3,
.rollout .rollout-workspace h3 {
  color: #edf0f3;
}

.rollout .rollout-heading h2 em,
.rollout .rollout-intro,
.rollout .rollout-disclosure {
  color: #bac1c8;
}

.rollout .rollout-eyebrow {
  color: #bac3cc;
}

.rollout .rollout-disclosure-dot {
  background: #c2cbd4;
  box-shadow: 0 0 0 3px #d8e1eb0c;
}

/* The narrow exposed chassis keeps its inner rim outside every content panel. */
.rollout .rollout-console.nvl-metal-surface {
  padding: 7px;
  border-radius: 13px;
  box-shadow: inset 0 1px 0 #ffffff35, inset 0 -1px 0 #000b, 0 3px 4px #0008, 0 28px 65px -35px #000;
}

.rollout .rollout-console.nvl-metal-surface::before {
  inset: 3px;
  z-index: 0;
  border-radius: 9px;
  border-color: #e0e7ee32 #b6c1cc1a #020406a6 #e0e7ee29;
}

.rollout .rollout-console > * {
  position: relative;
  z-index: 1;
}

.rollout .rollout-console-header {
  border-radius: 7px 7px 0 0;
  border-bottom-color: #bac5d146;
  padding-block: 23px;
  background: #202429;
  box-shadow: none;
}

.rollout .rollout-console-identity .rollout-eyebrow {
  color: #c0c8d0;
}

.rollout .rollout-console-mark {
  background: transparent;
  border: 0;
  box-shadow: 0 3px 8px -4px #000b;
}

.rollout .rollout-console-mark .rollout-emblem circle {
  fill: #1b1f23;
  stroke: #b4bdc7;
}

.rollout .rollout-console-mark .rollout-emblem path:first-child {
  fill: #f0f2f4;
}

.rollout .rollout-console-mark .rollout-emblem path:last-child {
  fill: #9ba6b1;
}

.rollout .rollout-status {
  border: 1px solid #c1cbd643;
  border-radius: 5px;
  color: #d3d9df;
  background: linear-gradient(118deg, #ffffff08, #00000016), #1d2126;
  box-shadow: inset 0 1px 0 #ffffff12, 0 1px 1px #0007;
  font-size: 16px;
}

.rollout .rollout-steps {
  border-bottom-color: #c7d1db2d;
  background: var(--rollout-grain), linear-gradient(180deg, #292d32, #21252a);
  box-shadow: inset 0 1px 0 #ffffff0b, inset 0 -1px 0 #0008;
}

.rollout .rollout-step {
  color: #a6afb8;
}

.rollout .rollout-step-index {
  border-color: #bfcbd548;
  color: #bcc5cd;
  background: linear-gradient(135deg, #343a40, #1a1f23);
  box-shadow: inset 0 1px 0 #ffffff14, 0 1px 2px #0007;
}

.rollout .rollout-step:is(.is-current, [aria-current="step"], [data-state="active"]) {
  color: #f0f3f6;
}

.rollout .rollout-step:is(.is-current, [aria-current="step"], [data-state="active"]) .rollout-step-index {
  border-color: #f2f4f6 #abb4be #7d8893 #d6dce2;
  color: #171b1f;
  background: var(--rollout-grain), linear-gradient(135deg, #f0f2f4, #b5bec7 62%, #e2e7ec);
  box-shadow: inset 0 1px 0 #fff9, 0 2px 3px #0008;
}

.rollout .rollout-step:is(.is-complete, [data-state="complete"]) {
  color: #c3d1c9;
}

.rollout .rollout-step:is(.is-complete, [data-state="complete"]) .rollout-step-index {
  border-color: #b9d0c27a;
  color: #c6ddcf;
  background: linear-gradient(135deg, #35413d, #202925);
}

.rollout .rollout-source-panel {
  border-color: #c3cdd735;
  background:
    linear-gradient(105deg, #e5edf20a, transparent 50%),
    var(--rollout-grain),
    linear-gradient(180deg, #2a2e33, #202429 72%, #1c2024);
  box-shadow: inset -1px 0 0 #0009;
}

.rollout .rollout-panel-heading h3 {
  color: #e0e5ea;
}

.rollout .rollout-count {
  border-color: #b7c2cd49;
  color: #c0cad3;
  background: linear-gradient(135deg, #30363c, #1a1e22);
  box-shadow: inset 0 1px 0 #ffffff12;
}

.rollout .rollout-source {
  border-color: #c7d1da25;
  border-radius: 5px;
  color: #d2d8de;
  background: linear-gradient(125deg, #ffffff06, #0000000d), #24292e;
  box-shadow: inset 0 1px 0 #ffffff0d, 0 1px 2px #0004;
}

.rollout .rollout-source:hover {
  border-color: #d1d9e25c;
  background: linear-gradient(125deg, #ffffff0d, #0000000d), #2a3036;
}

.rollout .rollout-source:is(.is-active, [aria-pressed="true"], [aria-selected="true"]) {
  border-color: #c9d3dd72;
  color: #f0f2f5;
  background: var(--rollout-grain), linear-gradient(117deg, #414950, #30373e 55%, #282e34);
  box-shadow: inset 2px 0 0 #d8dfe6, inset 0 1px 0 #ffffff20, 0 2px 4px #0005;
}

.rollout .rollout-source small,
.rollout .rollout-source-icon,
.rollout .rollout-source-number,
.rollout .rollout-source-arrow,
.rollout .rollout-source > span:last-child {
  color: #b0bac4;
}

.rollout .rollout-source:is(.is-active, [aria-pressed="true"], [aria-selected="true"]) small {
  color: #c8d0d8;
}

.rollout .rollout-source-detail {
  border-top-color: #c1cbd539;
  color: #c0c8cf;
}

.rollout .rollout-source-detail h4 {
  color: #e7ebef;
}

.rollout .rollout-source-detail .rollout-eyebrow,
.rollout .rollout-source-footnote {
  color: #aeb8c2;
}

.rollout .rollout-main {
  background:
    linear-gradient(118deg, #e2e9f10b, transparent 52%),
    var(--rollout-grain),
    linear-gradient(135deg, #25292e, #181c20 63%, #22272c);
  box-shadow: inset 1px 0 0 #ffffff07;
}

.rollout .rollout-workspace-heading .rollout-eyebrow {
  color: #b9c3cd;
}

.rollout .rollout-request {
  color: #ecf0f3;
}

.rollout .rollout-lead,
.rollout .rollout-card-copy,
.rollout .rollout-inline-note,
.rollout .rollout-muted,
.rollout .rollout-check {
  color: #bec7cf;
}

.rollout .rollout-card {
  border: 1px solid transparent;
  border-radius: 6px;
  background:
    linear-gradient(115deg, #ffffff0b, transparent 44%) padding-box,
    var(--rollout-grain) padding-box,
    linear-gradient(130deg, #30363c, #242a30 55%, #1f252a) padding-box,
    linear-gradient(135deg, #b7c2cc75, #68737e48 40%, #0b0e1170 68%, #83909b56) border-box;
  box-shadow: inset 0 1px 0 #ffffff16, inset 0 -1px 0 #0009, 0 3px 7px -4px #000b;
}

.rollout .rollout-card-title,
.rollout .rollout-card h4 {
  color: #e6ebef;
}

.rollout .rollout-card-symbol {
  color: #c4ced7;
}

.rollout .rollout-field-grid,
.rollout .rollout-metrics {
  border-color: #c6d0da3d;
  box-shadow: 0 1px 0 #0008, inset 0 1px 0 #0005;
}

.rollout .rollout-field,
.rollout .rollout-field > span,
.rollout .rollout-receipt-detail .rollout-field > span {
  color: #aebac5;
}

.rollout .rollout-field > strong,
.rollout .rollout-receipt-detail .rollout-field > strong {
  color: #e0e6ec;
}

.rollout .rollout-diff span {
  color: #adb9c4;
}

.rollout .rollout-diff del {
  color: #c7b69c;
  text-decoration-color: #bd9f77;
}

.rollout .rollout-diff strong {
  color: #ecf0f3;
}

.rollout .rollout-diff > b {
  color: #bac6d1;
}

.rollout .rollout-card.rollout-conflict {
  border-color: #d9bd835e;
  background:
    linear-gradient(113deg, #d8b77d0e, transparent 65%),
    var(--rollout-grain),
    linear-gradient(130deg, #34332f, #26282a 65%, #25292d);
  box-shadow: inset 2px 0 0 #cbb0808a, inset 0 1px 0 #fff1, inset 0 -1px 0 #0008;
}

.rollout .rollout-metrics strong {
  color: #ecf1f5;
}

.rollout .rollout-metrics span {
  color: #bac5cf;
}

.rollout .rollout-check-icon {
  border-color: #becad55e;
  color: #d1dbe4;
  background: linear-gradient(135deg, #35404a, #20272e);
  box-shadow: inset 0 1px 0 #ffffff17;
}

.rollout .rollout-check > span:first-child:not(.rollout-check-icon) {
  color: #c8d2dc;
}

.rollout .rollout-check.is-success .rollout-check-icon,
.rollout .rollout-check.is-success > span:first-child:not(.rollout-check-icon) {
  color: var(--rollout-green);
  border-color: #bbd3c563;
}

.rollout .rollout-check.is-error .rollout-check-icon,
.rollout .rollout-check.is-error > span:first-child:not(.rollout-check-icon) {
  color: var(--rollout-red);
  border-color: #e4b7ad66;
}

.rollout .rollout-badge {
  border: 1px solid #bdc9d345;
  border-radius: 4px;
  color: #cbd4dc;
  background: linear-gradient(120deg, #ffffff07, #0002), #252c32;
  box-shadow: inset 0 1px 0 #ffffff10, 0 1px 1px #0005;
  font-size: 16px;
}

.rollout :is(.rollout-badge, .rollout-status):is(.is-success, [data-state="success"]) {
  color: var(--rollout-green);
  border-color: #b9d5c565;
  background: linear-gradient(120deg, #b9d5c509, transparent), #232e2a;
}

.rollout :is(.rollout-badge, .rollout-status):is(.is-warning, [data-state="warning"], [data-state="conflict"], [data-state="unconfirmed"]) {
  color: var(--rollout-amber);
  border-color: #ddbe8266;
  background: linear-gradient(120deg, #ddbe820b, transparent), #302c26;
}

.rollout :is(.rollout-badge, .rollout-status):is(.is-error, [data-state="error"]) {
  color: var(--rollout-red);
  border-color: #d2a19570;
  background: linear-gradient(120deg, #d2a1950b, transparent), #302725;
}

/* The phase name alone is not proof that all verification checks passed. */
.rollout .rollout-status[data-state="verified"] {
  color: #d3d9df;
  border-color: #c1cbd643;
}

.rollout .rollout-action-bar {
  border-top-color: #c9d3de42;
  background: var(--rollout-grain), linear-gradient(115deg, #30363c, #23292f 55%, #1d2329);
  box-shadow: inset 0 1px 0 #ffffff12, inset 0 -1px 0 #0008;
}

.rollout .rollout-button {
  min-height: 48px;
  font-size: 16px;
}

.rollout .rollout-button--secondary {
  border-color: #c4cfdc62 #85929f4d #4d5b6759 #b5c1cd5c;
  border-radius: 4px;
  color: #dbe2e8;
  background: var(--rollout-grain), linear-gradient(120deg, #414a53, #2b343d 56%, #35404a);
  box-shadow: inset 0 1px 0 #ffffff1c, inset 0 -1px 0 #0007, 0 2px 3px #0006;
}

.rollout .rollout-button--secondary:hover:not(:disabled) {
  border-color: #dce4ec94;
  background: var(--rollout-grain), linear-gradient(120deg, #4b5660, #343f49 56%, #3d4853);
  color: #f2f5f8;
}

.rollout .rollout-button--quiet {
  color: #cad4dd;
}

.rollout .rollout-button--quiet:hover:not(:disabled) {
  color: #fff;
}

.rollout .rollout-button:not(.rollout-button--primary):disabled {
  color: #b0bcc6;
  border-color: #a4b0bb32;
  opacity: .6;
  cursor: not-allowed;
  box-shadow: none;
}

.rollout .rollout-fault-label {
  color: #b8c3cc;
}

.rollout input[type="checkbox"] {
  accent-color: #d5dce3;
  color-scheme: dark;
}

.rollout input[type="checkbox"]:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.rollout .rollout-error {
  border-color: #d6a79878;
  color: #ecc5b9;
  background: linear-gradient(115deg, #654a3e2e, transparent), #302727;
  box-shadow: inset 0 1px 0 #ffffff0c, inset 2px 0 0 #d4a49099;
}

.rollout .rollout-evidence {
  border-top-color: #c6d2dc4a;
  background: var(--rollout-grain), linear-gradient(118deg, #282e34, #20262c 58%, #292f35);
  box-shadow: inset 0 1px 0 #ffffff10;
}

.rollout .rollout-receipts-panel {
  border-color: #c4cfd936;
}

.rollout .rollout-events-panel {
  background: linear-gradient(105deg, #00000009, #dfe7ee04);
  box-shadow: inset 1px 0 0 #ffffff05;
}

.rollout .rollout-panel-caption,
.rollout .rollout-empty,
.rollout .rollout-receipt p {
  color: #b8c4ce;
}

.rollout .rollout-empty strong {
  color: #d2dce5;
}

.rollout .rollout-empty-icon {
  border-color: #bbc8d346;
  color: #b9c8d5;
  background: linear-gradient(130deg, #343d45, #222a31);
}

.rollout .rollout-receipt {
  border: 1px solid #c3cfd845;
  border-radius: 5px;
  background:
    linear-gradient(118deg, #dee8ef07, transparent 65%),
    var(--rollout-grain),
    linear-gradient(180deg, #222930, #1b2228);
  box-shadow: inset 0 1px 0 #ffffff0d, inset 0 -1px 0 #0008, 0 1px 2px #0005;
}

.rollout .rollout-receipt[open] {
  border-color: #c8d4df68;
  box-shadow: inset 0 1px 0 #ffffff16, 0 2px 5px #0005;
}

.rollout .rollout-receipt summary {
  min-height: 44px;
  color: #e0e7ed;
}

.rollout .rollout-receipt summary::after {
  color: #cad7e2;
}

.rollout .rollout-receipt h4,
.rollout .rollout-receipt strong {
  color: #d8e2ea;
}

.rollout .rollout-receipt-detail {
  border-color: #c6d2dd32;
}

.rollout .rollout-receipt code,
.rollout .rollout-event code {
  color: #c6d4df;
}

.rollout .rollout-event:not(:last-child)::before {
  background: linear-gradient(180deg, #c1cfdc58, #8195a526);
}

.rollout .rollout-event-dot {
  border-color: #d0dce5;
  background: linear-gradient(135deg, #d6e0e8, #8596a4);
  box-shadow: 0 0 0 3px #080d121f;
}

.rollout .rollout-event strong {
  color: #d5e0e9;
}

.rollout .rollout-event p {
  color: #c5d0d9;
}

.rollout .rollout-events time,
.rollout .rollout-event-time {
  color: #a7b6c3;
}

.rollout .rollout-verification {
  color: #cad5de;
}

.rollout .rollout-verification summary {
  min-height: 48px;
  border-color: #c4d1dc46;
}

.rollout .rollout-console-footer {
  border-radius: 0 0 7px 7px;
  border-top-color: #c0cedb3c;
  background: var(--rollout-grain), linear-gradient(112deg, #303840, #222a31 65%, #2b333c);
  box-shadow: inset 0 1px 0 #ffffff10, inset 0 -1px 0 #0008;
}

.rollout .rollout-console-footer p {
  color: #b8c5cf;
}

.rollout .rollout-table-wrap {
  border-color: #bfccd651;
  background: #20272d;
  box-shadow: inset 0 1px 3px #0005;
}

.rollout .rollout-table,
.rollout .rollout-table td:first-child {
  color: #ccd8e2;
}

.rollout .rollout-table th {
  color: #d6e0e8;
  background: var(--rollout-grain), linear-gradient(110deg, #343e47, #29343d);
}

.rollout .rollout-table td {
  border-color: #bbcbd731;
}

.rollout .rollout-source-panel,
.rollout .rollout-sources,
.rollout .rollout-receipts,
.rollout .rollout-events,
.rollout .rollout-table-wrap {
  scrollbar-color: #7c8a96 #141a2059;
}

.rollout :is(button, summary, a, input):focus-visible {
  outline: 2px solid #edf2f6;
  outline-offset: 3px;
}

.rollout :is(.rollout-source-detail, .rollout-receipts, .rollout-events):focus-visible {
  outline: 2px solid #dae5ee;
  outline-offset: -2px;
}

@media (max-width: 900px) {
  .rollout .rollout-source-panel {
    box-shadow: inset 0 1px 0 #ffffff0c;
  }
}

@media (max-width: 580px) {
  .rollout .rollout-console.nvl-metal-surface {
    padding: 4px;
    border-radius: 10px;
  }

  .rollout .rollout-console.nvl-metal-surface::before {
    inset: 2px;
    border-radius: 7px;
  }

  .rollout .rollout-console-header {
    border-radius: 5px 5px 0 0;
  }

  .rollout .rollout-console-footer {
    border-radius: 0 0 5px 5px;
  }

  .rollout .rollout-steps {
    padding-inline: 9px;
  }

  .rollout .rollout-source {
    flex-basis: 166px;
  }

  .rollout .rollout-receipt summary {
    min-height: 48px;
  }
}

@media (max-width: 380px) {
  .rollout .rollout-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 12px;
    padding: 22px 15px;
  }
}

@media (forced-colors: active) {
  .rollout .rollout-console.nvl-metal-surface::before {
    display: none;
  }

  .rollout :is(.rollout-console-header, .rollout-steps, .rollout-source-panel, .rollout-main, .rollout-card, .rollout-source, .rollout-status, .rollout-badge, .rollout-count, .rollout-step-index, .rollout-check-icon, .rollout-action-bar, .rollout-error, .rollout-evidence, .rollout-events-panel, .rollout-receipt, .rollout-empty-icon, .rollout-console-footer, .rollout-table-wrap, .rollout-table th) {
    color: CanvasText;
    border-color: CanvasText;
    background: Canvas;
    box-shadow: none;
  }

  .rollout .rollout-source:is(.is-active, [aria-pressed="true"], [aria-selected="true"]),
  .rollout .rollout-step:is(.is-current, [aria-current="step"]) .rollout-step-index {
    color: HighlightText;
    border-color: Highlight;
    background: Highlight;
    box-shadow: none;
  }

  .rollout .rollout-button--secondary {
    color: ButtonText;
    border-color: ButtonText;
    background: ButtonFace;
    box-shadow: none;
  }

  .rollout :is(button, summary, a, input):focus-visible,
  .rollout :is(.rollout-source-detail, .rollout-receipts, .rollout-events):focus-visible {
    outline-color: Highlight;
  }
}