/* Network reference follows the dark-blue and pink tools workspace. */
.protocol-matrix-workspace {
  background: var(--ui-page)
}

.protocol-matrix-workspace>.detail-pane {
  padding: 24px 28px 0
}

.matrix-heading {
  padding: 0 0 20px;
  gap: 18px
}

.matrix-title {
  gap: 16px
}

.matrix-symbol {
  width: 58px;
  height: 66px;
  border: 1px solid color-mix(in srgb, var(--workspace-tools) 25%, var(--ui-border));
  border-radius: 14px;
  background: var(--ui-accent-soft);
  color: var(--workspace-tools);
  box-shadow: inset 0 1px #fff1
}

.matrix-symbol svg {
  width: 30px;
  height: 30px
}

.matrix-eyebrow {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--workspace-tools);
  margin-bottom: 7px
}

.matrix-title h1 {
  font-size: 30px;
  font-weight: 650;
  letter-spacing: -.8px;
  color: #f0f4fb
}

.matrix-title-dot {
  color: var(--workspace-tools)
}

.matrix-title p {
  font-size: 12px;
  color: #8fa6bf;
  margin-top: 7px;
  line-height: 1.6
}

.matrix-actions {
  align-items: center;
  gap: 8px
}

.matrix-actions .protocol-button {
  background: var(--ui-sidebar);
  border-color: var(--ui-border);
  font-size: 11px
}

.matrix-actions .protocol-button:hover {
  border-color: var(--workspace-tools);
  background: var(--ui-surface)
}

.matrix-offline {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-right: 10px;
  color: #9eb7af;
  font-size: 10px;
  white-space: nowrap
}

.matrix-offline i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #8ac7af;
  box-shadow: 0 0 0 4px #83bcaa0d
}

.matrix-filters {
  border: 1px solid var(--ui-border);
  border-radius: 9px;
  padding: 13px;
  background: var(--ui-sidebar);
  gap: 10px;
  margin-bottom: 13px;
  flex: none
}

.matrix-filters>label {
  font-size: 9px;
  gap: 7px;
  color: #98afc8
}

.matrix-filters :is(input, select) {
  height: 38px;
  border-color: var(--ui-border);
  background: var(--ui-page);
  border-radius: 5px;
  font-size: 11px
}

.matrix-filters .matrix-search {
  align-self: end
}

.matrix-search input {
  font-size: 12px;
  letter-spacing: 0
}

.matrix-search>svg {
  color: var(--workspace-tools)
}

.matrix-result-bar {
  padding-bottom: 12px;
  gap: 12px;
  flex: none;
  font-size: 10px;
  color: #9ab0ca
}

.matrix-result-bar>span {
  font-variant-numeric: tabular-nums
}

.matrix-result-options {
  gap: 12px
}

.matrix-quick-label {
  font-size: 10px;
  color: #8da4bf
}

.matrix-quick-label select {
  background: var(--ui-sidebar);
  border-color: var(--ui-border);
  font-size: 10px
}

.matrix-search-help {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 0;
  background: none;
  border: 0;
  color: #a4bad4;
  font-size: 10px
}

.matrix-search-help:hover {
  color: var(--workspace-tools)
}

.matrix-search-help svg {
  width: 12px;
  height: 12px
}

.matrix-search-examples {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  background: var(--ui-sidebar);
  border: 1px solid var(--ui-border);
  border-radius: 7px;
  padding: 12px 14px;
  margin: 0 0 12px;
  flex: none;
  font-size: 10px;
  color: #acbfd6
}

.matrix-search-examples>span {
  margin-right: 8px;
  color: var(--workspace-tools)
}

.matrix-search-examples button {
  background: var(--ui-page);
  border: 1px solid var(--ui-border);
  color: #bdcedf;
  border-radius: 4px;
  padding: 5px 7px;
  font-size: 10px
}

.matrix-search-examples button:hover {
  border-color: var(--workspace-tools)
}

.matrix-search-examples p {
  width: 100%;
  margin: 3px 0 0;
  color: #8ba3bf;
  line-height: 1.6
}

.matrix-scroll {
  border-color: var(--ui-border);
  border-radius: 8px 8px 0 0;
  background: var(--ui-page);
  min-height: 120px;
  scrollbar-width: thin;
  scrollbar-color: var(--ui-raised) var(--ui-page)
}

.matrix-table {
  min-width: 1100px;
  font-size: 11px
}

.matrix-table col:nth-child(1) {
  width: 100px
}

.matrix-table col:nth-child(2) {
  width: 125px
}

.matrix-table col:nth-child(3) {
  width: 210px
}

.matrix-table col:nth-child(5) {
  width: 160px
}

.matrix-table col:nth-child(6) {
  width: 95px
}

.matrix-table col:nth-child(7) {
  width: 84px
}

.matrix-table th {
  background: var(--ui-surface);
  color: #b6c7da;
  border-color: var(--ui-border);
  height: 42px;
  font-size: 10px
}

.matrix-table td {
  background: var(--ui-page);
  border-color: var(--ui-border);
  padding: 12px;
  line-height: 1.6;
  height: 65px
}

.matrix-table tr:nth-child(even) td {
  background: var(--ui-sidebar)
}

.matrix-table tr:hover td,
.matrix-table tr:focus-within td {
  background: var(--ui-surface)
}

.matrix-table tbody tr:hover td:first-child {
  box-shadow: inset 2px 0 var(--workspace-tools)
}

.matrix-table .matrix-port {
  font-size: 17px;
  color: var(--workspace-tools);
  letter-spacing: -.4px
}

.matrix-table .protocol-service {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6
}

.matrix-service-context {
  display: block;
  font-size: 9px;
  color: #758ea9;
  margin-top: 4px;
  line-height: 1.5
}

.matrix-usage-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-line;
  color: #aebfd2;
  font-size: 11px;
  line-height: 1.6
}

.matrix-table .matrix-flow {
  font-size: 9px;
  color: #7e9ab7;
  margin-top: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.matrix-protection {
  font-size: 9px;
  padding: 4px 7px;
  border: 1px solid #9cb8ce16;
  border-radius: 4px;
  line-height: 1.5
}

.matrix-table .protocol-transport {
  font-size: 9px;
  border-radius: 4px
}

.matrix-sources a {
  font-size: 9px;
  color: #8fb9d8
}

.matrix-footer {
  font-size: 10px;
  min-height: 49px
}

.matrix-reference-date {
  font-size: 10px;
  color: #829bb8
}

.matrix-footer .collection-pagination {
  font-size: 10px
}

.protocol-matrix :is(button, input, select):focus-visible {
  outline: 2px solid var(--workspace-tools);
  outline-offset: 3px
}

.modal.protocol-reference-modal {
  width: min(1080px, calc(100vw - 40px));
  padding: 28px;
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  background: var(--ui-page);
  box-shadow: 0 30px 120px #0009
}

.protocol-reference-modal>h2 {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.4px;
  margin: 0 0 16px;
  color: #edf3fc
}

.protocol-reference-endpoint {
  padding: 20px 22px;
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  background: linear-gradient(115deg, var(--ui-surface), var(--ui-sidebar));
  margin: 18px 0 24px;
  gap: 24px
}

.reference-endpoint-number>span {
  display: block;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: #a6a792;
  margin-bottom: 5px
}

.reference-endpoint-number>strong {
  font-size: 38px;
  line-height: 1.2;
  font-family: Consolas, monospace;
  font-weight: 500;
  color: var(--workspace-tools);
  letter-spacing: -1px;
  overflow-wrap: anywhere
}

.reference-endpoint-transport {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0
}

.reference-endpoint-transport small {
  width: 100%;
  font-size: 10px;
  color: #8fa7c1;
  margin-top: 4px
}

.reference-endpoint-icon {
  margin-left: auto;
  color: var(--workspace-tools);
  opacity: .65
}

.reference-endpoint-icon svg {
  width: 55px;
  height: 55px
}

.reference-variant {
  border-color: var(--ui-border);
  padding: 22px 0
}

.reference-profile-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--workspace-tools);
  margin-bottom: 9px
}

.reference-variant h3 {
  font-size: 19px;
  line-height: 1.5;
  margin-bottom: 9px;
  color: #e4edf9
}

.reference-variant-heading {
  justify-content: flex-start;
  gap: 12px
}

.reference-profile-usage {
  font-size: 13px;
  color: #9fb6cf;
  margin: 12px 0 20px;
  line-height: 1.8
}

.reference-profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: start
}

.has-diagnostic .reference-profile-layout {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.15fr)
}

.reference-knowledge {
  min-width: 0
}

.reference-flow-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 17px;
  background: var(--ui-sidebar);
  border: 1px solid var(--ui-border);
  border-radius: 8px
}

.reference-flow-card>span {
  display: block;
  color: #a6bad4;
  flex: none
}

.reference-flow-card svg {
  width: 21px;
  height: 21px
}

.reference-flow-card h4 {
  font-size: 10px;
  margin: 0 0 6px !important;
  color: #a0b8d4
}

.reference-flow-card p {
  font-size: 12px;
  line-height: 1.8;
  margin: 0;
  color: #d1dff0;
  white-space: pre-line
}

.reference-knowledge .reference-facts {
  display: block;
  margin: 19px 0;
  padding: 0 0 18px;
  border-top: 0
}

.reference-knowledge .reference-facts dt {
  font-size: 10px;
  color: #9ab0ca;
  margin: 14px 0 6px
}

.reference-knowledge .reference-facts dd {
  font-size: 12px;
  line-height: 1.85;
  color: #bbcbdf
}

.reference-profile-sources {
  font-size: 10px;
  line-height: 1.7
}

.reference-profile-sources a {
  padding: 8px 0;
  border-bottom: 1px solid var(--ui-border);
  color: #8fbad3
}

.reference-diagnostics {
  min-width: 0;
  padding: 19px;
  background: #102925;
  border: 1px solid #31554c;
  border-radius: 9px;
  color: #c2dad1
}

.diagnostic-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 17px
}

.diagnostic-heading>svg {
  width: 25px;
  height: 25px;
  color: #8dc8b4;
  flex: none
}

.diagnostic-heading span {
  display: block;
  color: #83b9a8;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .09em;
  margin-bottom: 4px
}

.diagnostic-heading h4 {
  margin: 0 !important;
  font-size: 15px !important;
  color: #d8eee5 !important;
  font-weight: 600;
  line-height: 1.5
}

.reference-diagnostics h5 {
  font-size: 11px;
  line-height: 1.6;
  color: #d3e9e0;
  margin: 0 0 6px;
  font-weight: 600
}

.diagnostic-symptoms {
  padding: 12px 14px;
  border: 1px solid #315047;
  border-radius: 6px;
  background: #16322c;
  margin-bottom: 17px
}

.diagnostic-symptoms ul {
  margin: 5px 0 0;
  padding-left: 15px;
  font-size: 11px;
  color: #bad2c7;
  line-height: 1.8
}

.diagnostic-steps {
  margin: 0;
  padding: 0;
  list-style: none
}

.diagnostic-steps>li {
  margin-top: 19px
}

.diagnostic-step-title {
  display: flex;
  align-items: baseline;
  gap: 9px
}

.diagnostic-step-title>span {
  font-family: Consolas, monospace;
  font-size: 11px;
  color: #84bfa9
}

.diagnostic-step-title h5 {
  margin: 0
}

.diagnostic-platform {
  font-size: 9px;
  line-height: 1.6;
  color: #8cbaa7;
  margin: 5px 0 9px
}

.diagnostic-command {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 12px 10px 12px 13px;
  background: #091b19;
  border: 1px solid #31534a;
  border-radius: 6px
}

.diagnostic-command pre {
  min-width: 0;
  flex: 1;
  margin: 0;
  color: #c2e3d6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.8;
  font-size: 11px;
  max-height: 210px;
  overflow: auto
}

.diagnostic-command code {
  font-family: Consolas, "Cascadia Code", monospace
}

.diagnostic-command .protocol-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  flex: none;
  background: #1c3931;
  border-color: #3c6356;
  color: #a8d8c4
}

.diagnostic-command .protocol-icon:hover {
  background: #2d4d40
}

.diagnostic-command svg {
  width: 13px;
  height: 13px
}

.diagnostic-expected {
  font-size: 11px;
  line-height: 1.85;
  color: #b7d8c9;
  margin: 10px 0 5px
}

.diagnostic-expected strong {
  display: block;
  font-size: 9px;
  color: #8fc6ae;
  font-weight: 600;
  margin-bottom: 3px
}

.diagnostic-interpretation {
  font-size: 10px;
  line-height: 1.85;
  margin: 5px 0 0;
  color: #8eb5a5
}

.diagnostic-checks {
  border-block: 1px solid #315047;
  padding: 13px 0;
  margin-top: 20px
}

.diagnostic-checks summary {
  font-size: 11px;
  color: #c4dfd1;
  cursor: pointer;
  line-height: 1.7
}

.diagnostic-checks ul {
  font-size: 11px;
  line-height: 1.85;
  color: #afd0bd;
  padding-left: 17px;
  margin: 12px 0 0
}

.diagnostic-checks li {
  margin: 7px 0
}

.diagnostic-sources {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
  font-size: 9px;
  line-height: 1.7
}

.diagnostic-sources a {
  color: #98c9b4
}

.diagnostic-sources>span {
  font-size: 9px;
  color: #7ba18e;
  margin-top: 4px
}

.reference-section>h3 {
  font-size: 13px;
  color: #d3dfef
}

.reference-filter {
  border-radius: 7px;
  padding: 14px 16px;
  background: var(--ui-page);
  border-color: var(--ui-border)
}

.reference-checked {
  font-size: 10px;
  line-height: 1.8;
  color: #8ca2be
}

.reference-footer {
  position: sticky;
  bottom: -28px;
  margin: 22px -2px -2px;
  padding: 16px 0 2px;
  background: #0d192af5;
  border-color: var(--ui-border);
  backdrop-filter: blur(12px);
  z-index: 2
}

.reference-footer .primary {
  background: var(--workspace-tools);
  border-color: var(--workspace-tools);
  color: #201e18
}

.protocol-reference-modal :is(button, a, summary):focus-visible {
  outline: 2px solid var(--workspace-tools);
  outline-offset: 3px
}

@media(max-width:1250px) {
  .matrix-offline {
    width: 100%;
    justify-content: flex-end;
    margin: 0 0 3px
  }
}

@media(max-width:1000px) {
  .matrix-title h1 {
    font-size: 26px
  }

  .matrix-symbol {
    width: 48px;
    height: 58px
  }

  .matrix-search-help span {
    display: none
  }

  .matrix-filters {
    grid-template-columns: repeat(4, minmax(0, 1fr)) 34px
  }

  .matrix-filters .matrix-search {
    grid-column: 1/-1
  }

  .has-diagnostic .reference-profile-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr)
  }
}

@media(max-width:760px) {
  #content.protocol-content {
    overflow: auto !important
  }

  .protocol-matrix-workspace {
    min-height: 850px
  }

  .protocol-matrix-workspace>.detail-pane {
    padding: 18px 14px 0
  }

  .matrix-heading {
    gap: 12px;
    padding-bottom: 14px
  }

  .matrix-title h1 {
    font-size: 25px
  }

  .matrix-title p {
    font-size: 10px;
    max-width: 350px
  }

  .matrix-eyebrow {
    font-size: 8px
  }

  .matrix-symbol {
    width: 42px;
    height: 54px;
    border-radius: 9px
  }

  .matrix-title {
    gap: 12px
  }

  .matrix-actions {
    width: 100%;
    justify-content: flex-end
  }

  .matrix-offline {
    width: auto;
    margin-right: auto;
    justify-content: flex-start
  }

  .matrix-result-options {
    gap: 8px
  }

  .matrix-quick-label select {
    width: 145px
  }

  .matrix-search-help {
    display: none
  }

  .modal.protocol-reference-modal {
    width: calc(100vw - 20px);
    padding: 20px;
    border-radius: 10px
  }

  .has-diagnostic .reference-profile-layout {
    grid-template-columns: minmax(0, 1fr)
  }

  .reference-footer {
    bottom: -20px
  }
}

@media(max-width:600px) {
  .protocol-matrix-workspace {
    min-height: 940px
  }

  .matrix-symbol {
    display: none
  }

  .matrix-title h1 {
    font-size: 26px
  }

  .matrix-actions .protocol-button {
    height: 31px;
    font-size: 10px;
    padding: 0 9px
  }

  .matrix-offline {
    font-size: 9px
  }

  .matrix-filters {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 34px;
    padding: 11px;
    gap: 9px;
    margin-bottom: 10px
  }

  .matrix-filters :is(input, select) {
    height: 35px;
    font-size: 10px
  }

  .matrix-filters input {
    font-size: 11px
  }

  .matrix-search>svg {
    top: 10px;
    width: 15px;
    height: 15px
  }

  .matrix-result-options {
    width: 100%;
    justify-content: space-between;
    gap: 8px
  }

  .matrix-quick-label {
    font-size: 0;
    gap: 0;
    flex: 1
  }

  .matrix-quick-label select {
    width: 100%;
    font-size: 10px
  }

  .matrix-result-bar {
    gap: 8px
  }

  .matrix-scroll {
    min-height: 170px;
    border-radius: 7px;
    overflow-x: hidden
  }

  .matrix-table {
    min-width: 0;
    table-layout: auto;
    display: block
  }

  .matrix-table :is(colgroup, thead) {
    display: none
  }

  .matrix-table tbody {
    display: block
  }

  .matrix-table tr {
    display: grid;
    grid-template-columns: 66px minmax(0, 1fr) 64px;
    gap: 7px 12px;
    padding: 15px 13px;
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-page)
  }

  .matrix-table tr:nth-child(even) {
    background: var(--ui-sidebar)
  }

  .matrix-table td,
  .matrix-table tr:nth-child(even) td {
    display: block;
    min-width: 0;
    height: auto;
    padding: 0;
    background: transparent;
    border: 0
  }

  .matrix-table tr:hover td,
  .matrix-table tr:focus-within td {
    background: transparent
  }

  .matrix-table tr:hover,
  .matrix-table tr:focus-within {
    background: var(--ui-surface)
  }

  .matrix-table tr.is-selected td:first-child,
  .matrix-table tbody tr:hover td:first-child {
    box-shadow: none
  }

  .matrix-table .matrix-port {
    grid-column: 1;
    grid-row: 1/span 2;
    font-size: 20px;
    align-self: center;
    line-height: 1.3
  }

  .matrix-table td:nth-child(2) {
    grid-column: 2/4;
    grid-row: 2
  }

  .matrix-table td:nth-child(3) {
    grid-column: 2/4;
    grid-row: 1
  }

  .matrix-table td:nth-child(4) {
    grid-column: 1/-1;
    grid-row: 3;
    margin: 5px 0
  }

  .matrix-table td:nth-child(5) {
    grid-column: 1/3;
    grid-row: 4;
    align-self: center
  }

  .matrix-table td:nth-child(6) {
    grid-column: 1/3;
    grid-row: 5;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap
  }

  .matrix-table td:nth-child(7) {
    grid-column: 3;
    grid-row: 4/span 2;
    align-self: center
  }

  .matrix-service-context {
    font-size: 9px;
    margin: 2px 0
  }

  .matrix-table .protocol-service {
    font-size: 12px
  }

  .matrix-usage-text {
    font-size: 11px;
    -webkit-line-clamp: 3
  }

  .matrix-protection {
    font-size: 9px
  }

  .matrix-table .matrix-flow {
    font-size: 9px
  }

  .matrix-footer {
    min-height: 67px;
    gap: 8px;
    padding: 10px 0
  }

  .matrix-footer .collection-pagination {
    margin-left: auto
  }

  .protocol-reference-modal>h2 {
    font-size: 20px
  }

  .protocol-reference-endpoint {
    padding: 16px;
    gap: 15px;
    margin: 15px 0 20px
  }

  .reference-endpoint-number>strong {
    font-size: 31px
  }

  .reference-endpoint-number>span {
    font-size: 8px
  }

  .reference-endpoint-icon {
    display: none
  }

  .reference-variant h3 {
    font-size: 17px
  }

  .reference-diagnostics {
    padding: 15px
  }

  .reference-footer .actions {
    justify-content: flex-end
  }
}

@media(max-height:760px) and (min-width:761px) {
  .matrix-heading {
    padding-bottom: 14px
  }

  .matrix-symbol {
    width: 42px;
    height: 48px
  }

  .matrix-title h1 {
    font-size: 25px
  }

  .matrix-eyebrow {
    display: none
  }

  .protocol-matrix-workspace>.detail-pane {
    padding-top: 16px
  }
}