/* Proof elements: the things the copy describes, drawn rather than asserted.

   All of it is HTML and CSS built from the site's own tokens rather than
   screenshots, so it stays sharp at any size, adapts to the layout, carries no
   customer data, and never goes stale the way a picture of a screen does.

   Nothing in here is a photograph of a real customer's screen. The tickets,
   names and hostnames are illustrative and the captions say so. */

/* ---------------------------------------------------------------- shell */

.x-ui {
  background: var(--paper, #fff);
  border: 1px solid var(--hair, rgba(11, 22, 34, .13));
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 12px 34px rgba(11, 22, 34, .12);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink, #0b1622);
}

.x-ui__bar {
  background: var(--ink, #0b1622);
  color: #fff;
  padding: 9px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.x-ui__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--signal, #c9502c);
  flex: none;
}

.x-ui__bar b { font-weight: 600; letter-spacing: .12em; }
.x-ui__spacer { margin-left: auto; opacity: .6; letter-spacing: .06em; }

.x-ui__cap {
  color: var(--graphite, #5b6673) !important;
  font-size: .85rem;
  line-height: 1.6;
  margin: 10px 2px 0;
}

/* ------------------------------------------------------- ticket queue */

.x-tix { width: 100%; border-collapse: collapse; }

.x-tix th {
  text-align: left;
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--graphite-lt, #8b96a3);
  font-weight: 600;
  padding: 9px 14px;
  border-bottom: 1px solid var(--hair, rgba(11, 22, 34, .13));
  background: var(--bone, #f5f2ec);
}

.x-tix td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--hair, rgba(11, 22, 34, .13));
  vertical-align: top;
}

.x-tix tr:last-child td { border-bottom: 0; }
.x-tix__ref { font-variant-numeric: tabular-nums; color: var(--graphite, #5b6673); white-space: nowrap; }
.x-tix__subj { font-weight: 600; }
.x-tix__meta { color: var(--graphite, #5b6673); font-size: 12px; }
.x-tix__age { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }

/* The row the eye should land on: the one our monitoring opened by itself. */
.x-tix tr.is-auto td { background: rgba(201, 80, 44, .05); }

.x-pill {
  display: inline-block;
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 3px;
  white-space: nowrap;
}

.x-pill--open    { background: #e8f1f6; color: #1a5b7a; }
.x-pill--working { background: #fdeee7; color: #a33d1d; }
.x-pill--done    { background: #e7f3ea; color: #1f6b39; }
.x-pill--auto    { background: var(--ink, #0b1622); color: #fff; }

/* ------------------------------------------------------------- alert */

.x-alert { border-left: 5px solid var(--signal, #c9502c); }

.x-alert__head {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--hair, rgba(11, 22, 34, .13));
}

.x-alert__title { font-weight: 700; font-size: 15px; margin: 0 0 3px; }
.x-alert__sub { color: var(--graphite, #5b6673); font-size: 12px; margin: 0; }

.x-alert__body { padding: 12px 16px 14px; }

.x-kv {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 5px 12px;
  margin: 0 0 12px;
  font-size: 12.5px;
}

.x-kv dt { color: var(--graphite, #5b6673); }
.x-kv dd { margin: 0; font-variant-numeric: tabular-nums; }

.x-alert__then {
  background: var(--bone, #f5f2ec);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 12.5px;
}

.x-alert__then b { display: block; margin-bottom: 3px; }

/* ------------------------------------------------------- bar diagram */

.x-fig { margin: 2rem 0 0; }
.x-fig svg { display: block; width: 100%; height: auto; }

/* ------------------------------------------------------- two columns */

.x-split2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--hair, rgba(11, 22, 34, .13));
  border: 1px solid var(--hair, rgba(11, 22, 34, .13));
  border-radius: 10px;
  overflow: hidden;
}

/* Never inherit colour here. These blocks are dropped inside articles and
   sections whose text colour varies, and an inherited white on this white
   panel renders the whole thing invisible while every other check passes:
   the stylesheet loads, the class matches, the grid lays out, and the words
   are in the DOM. Set both halves explicitly. */
.x-split2 > div {
  background: var(--paper, #fff);
  color: var(--ink, #0b1622);
  padding: 16px 18px;
}

.x-split2 li,
.x-split2 ul,
.x-split2 p { color: var(--ink, #0b1622); }
.x-split2 h4 {
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--graphite, #5b6673);
  margin: 0 0 10px;
}
.x-split2 ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.65; }
.x-split2 li { margin-bottom: 5px; }

/* ------------------------------------------------------ platform strip */

.x-plat { margin: 2.5rem 0 0; }

.x-plat__label {
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--graphite, #5b6673);
  margin: 0 0 14px;
}

.x-plat__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.x-plat__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--hair, rgba(11, 22, 34, .13));
  border-radius: 999px;
  padding: 7px 14px 7px 11px;
  font-size: 12.5px;
  color: var(--ink, #0b1622);
  background: var(--paper, #fff);
}

.x-plat__item svg { width: 15px; height: 15px; flex: none; }

/* On the ink sections the strip has to invert or it disappears. */
.x-sec--ink .x-plat__item,
.x-sec--ink .x-ui {
  background: rgba(255, 255, 255, .04);
  border-color: var(--hair-light, rgba(255, 255, 255, .16));
  color: #fff;
}

.x-sec--ink .x-plat__label { color: var(--graphite-lt, #8b96a3); }

@media (max-width: 640px) {
  .x-split2 { grid-template-columns: 1fr; }
  .x-tix__meta, .x-tix thead { display: none; }
  .x-ui { font-size: 12px; }
  .x-kv { grid-template-columns: 104px 1fr; }
}