/* 設定 › 已授權的電腦。容器與列的幾何沿用同頁的「帳戶」分頁(account.css),
   只是列數是動態的,所以不給固定高度。 */
#box_devices {
  border: 1px var(--color-greyLight) solid;
  border-radius: var(--radius-lg);
  padding: var(--space-32);
}

#box_devices .dv-desc {
  margin: 0 0 var(--space-24);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-greyMedium);
}

#box_devices .dv-wait {
  display: none;
  justify-content: center;
  padding: var(--space-32) 0;
  color: var(--color-black);
}

#box_devices #dv_body.is-wait .dv-wait {
  display: flex;
}

#box_devices #dv_body.is-wait .dv-pane {
  display: none;
}

#box_devices .dv-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

#box_devices .dv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-16) 0;
  border-top: 1px solid var(--color-greyLight);
}

#box_devices .dv-row:first-child {
  border-top: 0;
  padding-top: 0;
}

#box_devices .dv-name {
  margin: 0;
  font-size: 16px;
  color: var(--color-black);
  overflow-wrap: anywhere;
}

#box_devices .dv-sub {
  margin: var(--space-4) 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-greyMedium);
}

/* 每一段自成一個不可斷的群組,分隔符用 ::after 綁在前一段結尾 —— 斷行只會發生在
   段與段之間的空白上,「·」不會變成行首,日期也不會被拆成兩行。 */
#box_devices .dv-seg {
  white-space: nowrap;
}

#box_devices .dv-seg:not(:last-child)::after {
  content: " ·";
}

/* 撤銷 = 安靜的破壞性動作,沿用同頁「取消訂閱」的語言(底線連結、hover 轉紅階
   字、負 margin 換 44px 觸控),不另做一顆紅鈕。左右也要補:中文「撤銷」只有
   28px 寬,不補等量 padding 的話熱區過不了 44。 */
#box_devices .dv-revoke {
  flex: none;
  border: 0;
  background: none;
  font-size: 14px;
  color: var(--color-black);
  text-decoration: underline;
  cursor: pointer;
  transition: color var(--motion-fast) var(--ease-standard);
  padding: var(--space-12);
  margin: -12px;
}

#box_devices .dv-revoke:hover:not(:disabled) {
  color: var(--color-redText);
}

#box_devices .dv-revoke:disabled {
  color: var(--color-greyLightMedium);
  cursor: not-allowed;
}

#box_devices .dv-empty {
  margin: 0;
  font-size: 14px;
  color: var(--color-greyMedium);
}

#box_devices .dv-err {
  margin: 0 0 var(--space-12);
  font-size: 14px;
  color: var(--color-redText);
}

/* Outlined control(canon)。 */
#box_devices .dv-retry {
  position: relative;
  height: 34px;
  padding: 0 var(--space-16);
  border: 1px solid var(--color-greyLight);
  border-radius: var(--radius-xs);
  background-color: transparent;
  color: var(--color-black);
  font-size: 14px;
  transition: background-color var(--motion-fast) var(--ease-standard);
}

/* 熱區補到 44:視覺框維持 34(含 1px 邊框),往上下各外擴 6 由透明 ::before 補。 */
#box_devices .dv-retry::before {
  content: "";
  position: absolute;
  inset: -6px 0;
}

#box_devices .dv-retry:hover {
  background-color: var(--color-greyLight);
}

@media (max-width: 768px) {
  #box_devices {
    padding: var(--space-24);
  }
}