/* Scope: the two LINE contact cards only.
   A CSS circular-radius construction, not a recreation of Apple's continuous curve.
   Source: approved live site copied before editing; load after existing CSS. */
#line .line-box {
  --card-radius: 28px;
  --card-inset: 16px;
  --card-stroke: 1px;
  --button-free-radius: 4px;
  --button-concentric-radius: max(0px,
    calc(var(--card-radius) - var(--card-stroke) - var(--card-inset)));

  container-type: inline-size;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: var(--card-inset);
  border: var(--card-stroke) solid var(--line);
  border-radius: var(--card-radius);
  /* Preserve background and all text styles. Never clip the focus outline. */
  overflow: visible;
}

#line .line-box > .btn {
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  margin-top: auto;
  margin-bottom: 0;
  /* Only bottom-left is adjacent on desktop. The remaining corners stay fixed. */
  border-radius: var(--button-free-radius) var(--button-free-radius)
    var(--button-free-radius) var(--button-concentric-radius);
}

/* At intermediate viewport sizes, use the actual card content width.
   When a compact card can no longer leave comfortable space on the right,
   deliberately align both button ends rather than approximate the radius. */
@container (max-width: 18rem) {
  #line .line-box > .btn {
    align-self: stretch;
    width: 100%;
    border-bottom-right-radius: var(--button-concentric-radius);
  }
}

@media (max-width: 600px) {
  #line .line-box {
    --card-radius: 24px;
    --card-inset: 12px;
  }
  #line .line-box > .btn {
    /* On narrow screens, both sides and the bottom have equal offsets. */
    align-self: stretch;
    width: 100%;
    border-radius: var(--button-free-radius) var(--button-free-radius)
      var(--button-concentric-radius) var(--button-concentric-radius);
  }
}
/* No hover geometry, extra colors, image crop, or hidden overflow. */