/**
 * device-card.css — the wireless-network device card, rebuilt from the code
 * that ships it. Class names below are the product module's own, so this file
 * can be diffed against it rather than trusted.
 *
 * This is the subset the figure on /wireless-network needs: one card in its
 * tree-view form, with a status pill and a signal pill. The full variant
 * surface — eleven pills, seven category labels, three title shapes, and the
 * places the design file and the code disagree — is a specimen page in
 * /diagrams and does not deploy.
 *
 * Two deliberate departures from the source, neither of which moves a
 * measurement:
 *
 *   The face. The product sets Codec Warm, which is not a webfont here, and
 *   loading one for a single figure is not worth the request. The card
 *   inherits the site's Inter. Every size, weight, line-height and tracking
 *   in the component is written out below, so the substitution changes the
 *   letterforms and nothing else.
 *
 *   The width. The card is fluid in the product — its width comes from
 *   whatever column it sits in, so there is no source measurement to honour.
 *   360px is a plausible dashboard column and it keeps the two pills on one
 *   row, which is the state the figure is discussing.
 *
 * Scoped to .spec-figure rather than :root. The product palette collides with
 * nothing on this site by name, but it has no business being global, and the
 * source file's reset is dropped entirely — style.css already sets
 * box-sizing, and the product's `body` rule would restyle the page.
 */

.spec-figure {
  --spec-stage: 360px;

  /* From the product's colour config. */
  --grey-050: #fafafa;
  --grey-100: #f0f0f0;
  --grey-500: #8e8d8c;
  --grey-900: #191918;
  --green-700: #07ad00;
  --yellow-100: #fffbed;
  --yellow-300: #ffedb6;
  --yellow-600: #ffd249;
  --white: #ffffff;
}

/*
 * Wider notes than the 15rem default. The card is 80px narrower than the
 * wizard step, so each margin has 40px more to spend, and three notes have to
 * stack against a 116px component — every line saved is vertical room. It
 * still switches to pins well before running out: 360 + two margins of 28 +
 * 320 needs about 1120px, and the shared switch is at 1216px.
 *
 * This has to be declared ON .spec-layer, not inherited from .spec-figure.
 * spec-figure.css sets the variable on .spec-layer itself, and a value
 * declared on an element always beats one inherited into it — so the same
 * declaration one level up would be silently ignored.
 */
.spec-figure .spec-layer,
.spec-figure .spec-legend {
  --spec-note-width: 20rem;
}

/* ======================================================= DeviceCard.module */

.cardLeft {
  min-width: 0;
  overflow: hidden;
}

/* The shipped card is a bordered white box with NO shadow. Its own 12px
   bottom margin is dropped: the card carries it in a list, and a lone
   specimen would hand that 12px to the drawing's name annotation. */
.deviceCard {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border: 1px solid var(--grey-100);
  border-radius: 20px;
  background: var(--white);
}

.deviceCard .deviceTitle {
  color: var(--grey-900);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

/* Underlined only when an onClick was passed — the underline is the
   affordance, so a card with no handler is visually a dead end. */
.deviceCard .deviceTitle.clickable {
  text-decoration: underline;
  cursor: pointer;
}

.deviceCategory {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px 0;
  color: var(--grey-500);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.deviceCardFooter {
  display: flex;
  gap: 4px;
  margin-top: 12px;
}

/* 32x32 bare icon outside the tree, and a padded grey button inside it. */
.expandIcon {
  width: 32px;
  height: 32px;
  cursor: pointer;
}

.inTreeView .expandIcon {
  display: flex;
  width: unset;
  align-items: center;
  padding: 10px;
  border-radius: 8px;
  background-color: var(--grey-050);
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
}

.inTreeView .expandIcon:hover {
  background-color: var(--grey-100);
}

.inTreeView .expandIcon .fa {
  margin-left: 4px;
  line-height: inherit;
}

/* --------------------------------------------------------------- the pills */

/* One base class, then one modifier per meaning. Uppercase and 1px tracking
   are on the base, which is why the signal pill has to switch them back off.
   height: 22px overrides what the 16px line-height and 2px padding give. */
.pill {
  display: flex;
  width: fit-content;
  height: 22px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 100px;
  color: var(--white);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.pill.statusOnline {
  background-color: var(--green-700);
  color: var(--white);
}

/* The signal pills undo the base class's uppercasing, because a signed number
   with 1px of letterspacing reads as two numbers. */
.pill.signalFair {
  border: 1px solid var(--yellow-300);
  background-color: var(--yellow-100);
  color: #000;
  letter-spacing: 0;
  text-transform: none;
}

.pill.signalFair .fa {
  color: var(--yellow-600);
}

/* ------------------------------------------------------------------- icons */

.fa {
  display: inline-flex;
  height: 12px;
  flex: none;
  align-items: center;
}

.fa svg {
  height: 12px;
  fill: currentColor;
}

.fa--circle-check svg {
  width: 12px;
}

.fa--signal svg {
  width: 15px;
}

/* fa-fw is a fixed 1.25em box with the glyph centred in it. */
.expandIcon .fa {
  width: 20px;
  height: 20px;
  justify-content: center;
}

.expandIcon .fa svg {
  height: 14px;
}

.expandIcon .fa--arrow-right svg {
  width: 12.25px;
}

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

@media (max-width: 34rem) {
  /* The gutter stays: a pin sits on the card's corner, and an edge-to-edge
     card would clip half of it. */
  .spec-figure__stage {
    width: 100%;
  }
}