/* Deck layout for the Client Portal. Every colour, type and shape value comes
   from vendor/brandguide.css; this file only arranges the specimens. */

:root {
  --deck-bg: var(--surface-hover);
  --deck-surface: var(--surface-raised);
  --deck-ink: var(--text-strong);
  --deck-muted: var(--text-muted);
  --deck-rule: var(--rule);
  --deck-accent: var(--accent-solid);
  --deck-body: var(--body);
  --deck-radius: var(--radius-sm);
}

.deck-slide .specimen > .stage {
  padding: var(--space-sm);
}

.portal-cover {
  flex: 1;
  align-items: center;
}

.portal-swatches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px var(--space-sm);
}

.portal-swatches > div {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: var(--space-2xs);
  align-items: center;
  font-size: 13px;
}

.portal-swatches .swatch,
.portal-semantics span {
  width: 100%;
  height: 22px;
  border: var(--border-thin) solid var(--border-subtle);
}

.portal-semantics {
  display: grid;
  grid-template-columns: 72px repeat(5, minmax(0, 1fr));
  gap: 4px;
  align-items: center;
  font-size: 13px;
}

.portal-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
  align-items: center;
  margin-top: calc(var(--space-2xs) * -1);
}

.portal-type {
  display: grid;
}

.portal-type > div {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: var(--space-xs);
  align-items: baseline;
  padding: 6px 0;
  border-top: var(--border-thin) solid var(--rule);
}

.portal-type > div:first-child {
  border-top: 0;
}

.portal-type code {
  justify-self: start;
  white-space: nowrap;
}

.portal-radius {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--space-xs);
  align-items: center;
}

.portal-radius > span {
  width: 44px;
  height: 28px;
  border: var(--border-thin) solid var(--border);
  background: var(--surface-subtle);
}

.portal-anti {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-lg);
  align-content: start;
}

html.deck-flow .portal-anti,
html.deck-flow .portal-swatches {
  grid-template-columns: minmax(0, 1fr);
}

html.deck-flow .portal-semantics {
  grid-template-columns: 64px repeat(5, minmax(0, 1fr));
  font-size: 11px;
}

html.deck-flow .portal-type > div {
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
}

html.deck-flow .portal-switcher {
  align-items: stretch;
}

html.deck-flow .hue {
  width: 100%;
}

html.deck-flow input[type="range"] {
  flex: 1;
  min-width: 0;
}

html.deck-flow .display {
  font-size: 40px;
}

.deck-body.deck-grid-3,
.deck-body.deck-cols {
  align-content: start;
}

.deck-slide td code {
  white-space: nowrap;
}

.portal-type > div {
  grid-template-columns: 132px minmax(0, 1fr);
}

.portal-type code {
  font-size: 12px;
}