/* ==========================================================================
   Accops Workspace Feature Matrix - presentation layer

   Support-state classes (fm-yes, fm-no, ...) and the .fm-pill wrapper are added
   at render time by javascripts/matrix.js. Without JavaScript the tables still
   read correctly, just without the colour coding.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens --- */

/* Brand. Matches the header orange of the Accops Workspace Knowledge Center.
   Change --fm-brand and the two shades beside it to move the whole site to a
   different brand colour. */
:root,
[data-md-color-primary="custom"] {
  --fm-brand: #ff6b3d;
  --md-primary-fg-color: var(--fm-brand);
  --md-primary-fg-color--light: #ff8b64;
  --md-primary-fg-color--dark: #e04f22;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);
}

[data-md-color-accent="custom"] {
  --md-accent-fg-color: #e04f22;
  --md-accent-fg-color--transparent: rgba(224, 79, 34, 0.1);
  --md-accent-bg-color: #ffffff;
  --md-accent-bg-color--light: rgba(255, 255, 255, 0.7);
}

/* Every surface colour below is deliberately opaque: the matrix tables have a
   sticky first column, and a translucent cell lets the columns scrolling
   underneath show through it. */
:root {
  /* Body links need more contrast on white than the header orange has. */
  --md-typeset-a-color: #c2451f;

  --fm-border: #e3e6ea;
  --fm-border-strong: #ccd1d8;
  --fm-row-bg: #ffffff;
  --fm-row-bg-alt: #fafbfc;
  --fm-row-hover: #fff4ef;
  --fm-thead-bg: #f1f3f5;

  --fm-yes-fg: #1b6e2a;
  --fm-yes-bg: #e3f4e6;
  --fm-no-fg: #71767d;
  --fm-na-fg: #96690a;
  --fm-blank-fg: #b0b5bb;
}

[data-md-color-scheme="slate"] {
  --md-typeset-a-color: #ff9670;

  --fm-border: #333844;
  --fm-border-strong: #454b59;
  --fm-row-bg: var(--md-default-bg-color);
  --fm-row-bg-alt: #22262f;
  --fm-row-hover: #2d3340;
  --fm-thead-bg: #272c36;

  --fm-yes-fg: #8fd396;
  --fm-yes-bg: #1e3524;
  --fm-no-fg: #8d939c;
  --fm-na-fg: #e8bb55;
  --fm-blank-fg: #5f6672;
}

/* ------------------------------------------------------------ typography --- */

.md-typeset h1 {
  margin-bottom: 0.5rem;
  color: var(--md-default-fg-color);
  font-weight: 700;
  font-size: 1.85rem;
  letter-spacing: -0.02em;
}

.md-typeset h2 {
  margin-top: 2.4rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--fm-border);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
}

.md-typeset h3 {
  margin-top: 1.8rem;
  font-weight: 600;
  font-size: 1rem;
}

/* Sits under the h1 as a one-line summary of the page. Works as either a bare
   <p> or an md_in_html <div> wrapping one. */
.md-typeset .fm-lede,
.md-typeset .fm-lede p {
  max-width: 46rem;
  color: var(--md-default-fg-color--light);
  font-size: 0.92rem;
  line-height: 1.55;
}

.md-typeset .fm-lede {
  margin-top: 0;
}

.md-typeset .fm-lede p {
  margin: 0;
}

.fm-meta {
  color: var(--md-default-fg-color--light);
  font-size: 0.66rem;
  letter-spacing: 0.01em;
}

/* Lift the header off the content the way a product console does. */
.md-header {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* ----------------------------------------------------------- stat strip --- */

.fm-stats {
  display: flex;
  flex-wrap: wrap;
  margin: 1.4rem 0 1.8rem;
  border: 1px solid var(--fm-border-strong);
  border-radius: 3px;
  overflow: hidden;
  background-color: var(--fm-row-bg);
}

.fm-stat {
  flex: 1 1 5.5rem;
  padding: 0.85rem 1rem;
  border-left: 1px solid var(--fm-border);
}

.fm-stat:first-child {
  border-left: 0;
}

.fm-stat__n {
  display: block;
  color: var(--md-default-fg-color);
  font-weight: 700;
  font-size: 1.45rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.fm-stat__l {
  display: block;
  margin-top: 0.2rem;
  color: var(--md-default-fg-color--light);
  font-weight: 600;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* ----------------------------------------------------------------- cards --- */

.md-typeset .grid.cards > ul > li {
  border: 1px solid var(--fm-border-strong);
  border-radius: 3px;
  box-shadow: none;
  transition: border-color 125ms, box-shadow 125ms;
}

.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--fm-brand);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.07);
}

.md-typeset .grid.cards > ul > li > hr {
  margin: 0.6em 0;
  border-color: var(--fm-border);
}

.fm-card-icon {
  color: var(--fm-brand);
  vertical-align: -0.15em;
}

.fm-card-icon svg {
  width: 1.1rem;
  height: 1.1rem;
}

/* ---------------------------------------------------------------- layout --- */

/* Material centres the layout inside 61rem, which on a wide screen leaves a dead
   band to the left of the navigation and pushes the content well right of it. A
   nine-column matrix wants that width anyway, so let the layout run wide and keep
   running text readable by capping the prose blocks instead (below). */
.md-grid {
  max-width: 1800px;
}

/* Material reserves 12.1rem for each sidebar. The tabs bar already carries the
   top-level navigation, so that much gutter is more than the labels need. */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary,
  .md-sidebar--secondary {
    width: 9.5rem;
  }
}

/* Running text stays at a readable measure even though the layout is wide.
   Tables, cards, the stat strip and the legend are all wrapped in something else,
   so they are unaffected and still use the full width. */
.md-typeset > p,
.md-typeset > ul,
.md-typeset > ol,
.md-typeset > blockquote,
.md-typeset > .admonition,
.md-typeset > details {
  max-width: 52rem;
}

/* ---------------------------------------------------------------- tables --- */

.md-typeset table:not([class]) {
  display: table;
  width: 100%;
  border: 1px solid var(--fm-border-strong);
  border-radius: 3px;
  font-size: 0.64rem;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td {
  padding: 0.45em 0.55em;
  border-bottom: 1px solid var(--fm-border);
}

/* Vertical rules between the client columns. A nine-column matrix is read down a
   column as often as across a row, and the ruling is what makes that possible. */
.md-typeset table:not([class]) th + th,
.md-typeset table:not([class]) td + td {
  border-left: 1px solid var(--fm-border);
}

.md-typeset table:not([class]) tbody tr:last-child td {
  border-bottom: 0;
}

.md-typeset table:not([class]) th {
  background-color: var(--fm-thead-bg);
  border-bottom: 2px solid var(--fm-border-strong);
  color: var(--md-default-fg-color--light);
  font-weight: 700;
  font-size: 0.54rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  vertical-align: bottom;
}

/* Material reserves 100px per cell, which pushes nine columns into a horizontal
   scroll on screens that could otherwise show them all. The client columns hold
   one word, so let them size to their header instead. */
.md-typeset table:not([class]) th:not(:first-child),
.md-typeset table:not([class]) td:not(:first-child) {
  min-width: 3.9rem;
}

/* Banding makes a row easier to follow across eight client columns. */
.md-typeset table:not([class]) tbody tr:nth-child(even) td {
  background-color: var(--fm-row-bg-alt);
}

.md-typeset table:not([class]) tbody tr:hover td {
  background-color: var(--fm-row-hover);
}

.md-typeset table:not([class]) tbody td:first-child {
  color: var(--md-default-fg-color);
  font-weight: 500;
}

/* Keep the setting name in view while scrolling the clients horizontally. The
   wrapper Material puts around a wide table is the scroll container, and each
   sticky cell repeats its row's own opaque background so nothing shows through. */
.md-typeset table:not([class]) tbody td:first-child,
.md-typeset table:not([class]) thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 14rem;
  background-color: var(--fm-row-bg);
  box-shadow: 1px 0 0 var(--fm-border-strong);
}

.md-typeset table:not([class]) thead th:first-child {
  background-color: var(--fm-thead-bg);
}

.md-typeset table:not([class]) tbody tr:nth-child(even) td:first-child {
  background-color: var(--fm-row-bg-alt);
}

.md-typeset table:not([class]) tbody tr:hover td:first-child {
  background-color: var(--fm-row-hover);
}

/* -------------------------------------------------------- support states --- */

.fm-pill {
  display: inline-block;
  padding: 0.05em 0.45em;
  border-radius: 3px;
  font-size: 0.92em;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
  white-space: nowrap;
}

/* Supported is the state worth spotting from across the table, so it is the only
   one that carries a filled chip. */
.md-typeset td.fm-yes .fm-pill {
  background-color: var(--fm-yes-bg);
  color: var(--fm-yes-fg);
}

.md-typeset td.fm-no .fm-pill {
  color: var(--fm-no-fg);
  font-weight: 400;
}

.md-typeset td.fm-na .fm-pill {
  box-shadow: inset 0 0 0 1px var(--fm-border-strong);
  color: var(--fm-na-fg);
  font-weight: 500;
  font-size: 0.85em;
  letter-spacing: 0.02em;
}

.md-typeset td.fm-blank .fm-pill {
  color: var(--fm-blank-fg);
  font-weight: 400;
}

/* A qualified answer is not a plain Yes or No: make its note marker easy to
   spot, rather than shading the cell in a way that reads like a strikethrough. */
.md-typeset td.fm-qualified .footnote-ref {
  margin-left: 0.1em;
  color: var(--md-accent-fg-color);
  font-weight: 700;
}

/* Literal values such as install paths. */
.md-typeset table:not([class]) td.fm-literal {
  text-align: left;
  white-space: normal;
}

/* The generator inserts <wbr> after each path separator, so a path breaks at its
   own segment boundaries. Leaving overflow-wrap at normal means a path with no
   separator to break at ("/Applications") counts as one unbreakable token, and
   the column is sized to hold it on a single line rather than splitting the word. */
.md-typeset td.fm-literal code {
  padding: 0.1em 0.3em;
  font-size: 0.78em;
  overflow-wrap: normal;
  word-break: normal; /* Material sets break-word on all inline code */
}

/* ----------------------------------------------------------------- meter --- */

/* Bar plus percentage on the coverage page; --v is set per cell. Laid out as one
   unbreakable unit so the column is sized to hold both on a single line. */
.fm-share {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  white-space: nowrap;
}

.fm-meter {
  display: inline-block;
  width: 2.8rem;
  height: 4px;
  border-radius: 2px;
  background-color: var(--fm-border);
  overflow: hidden;
}

.fm-meter > span {
  display: block;
  width: var(--v, 0%);
  height: 100%;
  background-color: var(--fm-brand);
}

/* ---------------------------------------------------------------- legend --- */

.md-typeset .fm-legend table {
  width: auto;
  font-size: 0.68rem;
}

/* The legend is narrow; it needs neither the wide nor the sticky first column. */
.md-typeset .fm-legend table td:first-child,
.md-typeset .fm-legend table th:first-child {
  position: static;
  min-width: 0;
  box-shadow: none;
  text-align: center;
  white-space: nowrap;
}

/* -------------------------------------------------------- document control --- */

/* Two-column key/value block. The header row carries no information, so drop it
   and let the first column act as the label. */
.md-typeset .fm-docinfo table {
  width: auto;
  font-size: 0.68rem;
}

.md-typeset .fm-docinfo thead {
  display: none;
}

.md-typeset .fm-docinfo table td:first-child {
  position: static;
  min-width: 11rem;
  box-shadow: none;
  background-color: var(--fm-thead-bg);
  color: var(--md-default-fg-color--light);
  font-weight: 600;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.md-typeset .fm-docinfo table tbody tr:nth-child(even) td:first-child {
  background-color: var(--fm-thead-bg);
}

/* --------------------------------------------------- page actions and toc --- */

.fm-actions {
  display: flex;
  gap: 0.5rem;
  padding: 0 0.6rem 0.9rem;
}

.fm-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 1px solid var(--fm-border-strong);
  border-radius: 50%;
  background: none;
  color: var(--md-default-fg-color--light);
  cursor: pointer;
  transition: border-color 125ms, color 125ms, background-color 125ms;
}

.fm-action:hover,
.fm-action:focus-visible {
  border-color: var(--fm-brand);
  background-color: var(--md-accent-fg-color--transparent);
  color: var(--fm-brand);
  outline: none;
}

.fm-action svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: currentColor;
}

/* The table of contents is titled "In this article" (set on the toc extension);
   present it as a section label rather than as navigation furniture. */
.md-nav--secondary .md-nav__title {
  padding-bottom: 0.4rem;
  color: var(--md-default-fg-color);
  font-weight: 700;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  box-shadow: none;
}

/* Confirmation after the share button copies a link. */
.fm-toast {
  position: fixed;
  bottom: 1.4rem;
  left: 50%;
  z-index: 20;
  padding: 0.55rem 1rem;
  border-radius: 3px;
  background-color: var(--md-default-fg-color);
  color: var(--md-default-bg-color);
  font-size: 0.7rem;
  opacity: 0;
  transform: translate(-50%, 0.5rem);
  transition: opacity 180ms, transform 180ms;
  pointer-events: none;
}

.fm-toast--in {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ----------------------------------------------------------------- notes --- */

/* Material renders footnotes as a bare rule plus a list; label it instead. */
.md-typeset .footnote {
  margin-top: 2.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--fm-border);
  color: var(--md-default-fg-color--light);
  font-size: 0.72rem;
}

.md-typeset .footnote > hr {
  display: none;
}

.md-typeset .footnote::before {
  content: "Notes";
  display: block;
  margin-bottom: 0.5rem;
  color: var(--md-default-fg-color--light);
  font-weight: 700;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* ------------------------------------------------------------ responsive --- */

@media screen and (max-width: 76.1875em) {
  .md-typeset table:not([class]) {
    font-size: 0.62rem;
  }

  .md-typeset table:not([class]) tbody td:first-child,
  .md-typeset table:not([class]) thead th:first-child {
    min-width: 11rem;
  }
}

@media screen and (max-width: 44.9375em) {
  .fm-stat {
    flex-basis: 50%;
  }

  .fm-stat:nth-child(odd) {
    border-left: 0;
  }
}

/* ----------------------------------------------------------------- print --- */

/* A feature matrix gets printed and circulated, so make that case work: page
   chrome dropped, wide tables unclipped, no sticky column, and no chip fill -
   the words Yes and No say everything, and a tint only costs ink. */
@media print {
  .md-header,
  .md-tabs,
  .md-sidebar,
  .md-footer,
  .md-top,
  .fm-actions,
  .fm-toast,
  .md-typeset .headerlink {
    display: none !important;
  }

  .md-grid,
  .md-main__inner,
  .md-content,
  .md-content__inner {
    max-width: none !important;
    margin: 0 !important;
  }

  /* Without this the browser prints only the visible slice of a wide table. */
  .md-typeset__scrollwrap,
  .md-typeset__table {
    overflow: visible !important;
  }

  .md-typeset table:not([class]) {
    font-size: 7.5pt;
  }

  .md-typeset table:not([class]) tbody td:first-child,
  .md-typeset table:not([class]) thead th:first-child {
    position: static;
    box-shadow: none;
  }

  .md-typeset table:not([class]) tbody tr {
    page-break-inside: avoid;
  }

  .md-typeset h2 {
    page-break-after: avoid;
  }

  .md-typeset td.fm-yes .fm-pill {
    background-color: transparent;
  }

  .fm-meter {
    display: none;
  }
}