/* 設定 › 公開連結。容器、列幾何、字級、安靜動作逐值沿用同頁「已授權的電腦」
   (devices.css);取消確認框沿用 #modal_dunning 的殼(billing.css)。
   spec: designer/spec-share-list-0.1.8.md A2 / C。 */
#box_shares {
  border: 1px var(--color-greyLight) solid;
  border-radius: var(--radius-lg);
  padding: var(--space-32);
}

#box_shares p {
  margin: 0;
}

#box_shares .pl-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: var(--space-16);
  margin: 0 0 var(--space-24);
}

#box_shares .pl-head[hidden],
#box_shares .pl-count[hidden] {
  display: none;
}

#box_shares .pl-desc {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-greyMedium);
}

#box_shares .pl-count {
  flex: none;
  font-size: 14px;
  color: var(--color-greyMedium);
  white-space: nowrap;
}

#box_shares .pl-count b {
  font-weight: 500;
  color: var(--color-black);
}

#box_shares .pl-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- 等待態:骨架三列,形狀 = 標題條 + meta 條 ---------- */
#box_shares .pl-wait {
  display: none;
}

#box_shares #pl_body.is-wait .pl-wait {
  display: block;
}

#box_shares #pl_body.is-wait .pl-pane {
  display: none;
}

#box_shares .pl-skrow {
  padding: var(--space-16) 0;
  border-top: 1px solid var(--color-greyLight);
}

#box_shares .pl-skrow:first-child {
  border-top: 0;
  padding-top: 0;
}

#box_shares .pl-skrow:last-child {
  padding-bottom: 0;
}

/* 兩層的高度 = 真的列的行高(.pl-name 16×1.5、.pl-sub 14×1.5),資料回來時列不跳 */
#box_shares .pl-sk {
  display: flex;
  align-items: center;
  max-width: 420px;
  height: 24px;
}

#box_shares .pl-sk + .pl-sk {
  height: 21px;
  margin-top: var(--space-4);
}

#box_shares .pl-skrow .loading-box {
  height: 12px;
  max-width: 100%;
}

#box_shares .pl-skrow .loading-box.is-title {
  height: 14px;
}

/* 三列寬度各不同:整組等寬讀起來不像即將到來的列(canon › Loader › 骨架配方)。
   以 420 為滿寬(.pl-sk 的 max-width):標題與 meta 是短句,不會撐到列尾的動作鈕。
   寬度用百分比:容器窄於 420 時三列仍各不同,不會一起被夾成等寬 */
#box_shares .pl-skrow:nth-child(1) .is-title { width: 82%; }
#box_shares .pl-skrow:nth-child(1) .is-meta { width: 54%; }
#box_shares .pl-skrow:nth-child(2) .is-title { width: 64%; }
#box_shares .pl-skrow:nth-child(2) .is-meta { width: 48%; }
#box_shares .pl-skrow:nth-child(3) .is-title { width: 74%; }
#box_shares .pl-skrow:nth-child(3) .is-meta { width: 57%; }

/* ---------- 列 ---------- */
#box_shares .pl-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

#box_shares .pl-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_shares .pl-row:first-child {
  border-top: 0;
  padding-top: 0;
}

#box_shares .pl-row:last-child {
  padding-bottom: 0;
}

#box_shares .pl-left {
  flex: 1;
  min-width: 0;
}

#box_shares .pl-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-black);
}

#box_shares a.pl-name {
  text-decoration: none;
  transition: color var(--motion-fast) var(--ease-standard);
}

#box_shares a.pl-name:hover {
  color: var(--color-greyDark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

#box_shares .pl-sub {
  margin-top: var(--space-4);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-greyMedium);
}

/* 每段不可斷,斷行只發生在段與段之間。分隔點屬於後面那一段、畫在段間的空隙裡:
   這一段折到行首時,點落在容器左緣外被裁掉,行尾與行首都不留孤點(同 .rs-byline) */
#box_shares .pl-sub {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-24);
  overflow-x: clip;
}

#box_shares .pl-seg {
  position: relative;
  white-space: nowrap;
}

#box_shares .pl-seg + .pl-seg::before {
  content: "·";
  content: "·" / "";
  position: absolute;
  right: 100%;
  width: var(--space-24);
  text-align: center;
}

/* 署名是用戶自己打的字,長度不受控:這一段可以斷 */
#box_shares .pl-seg.is-name {
  white-space: normal;
  overflow-wrap: anywhere;
}

#box_shares .pl-gone {
  margin-top: var(--space-2);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-greyMedium);
}

#box_shares .pl-acts {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

/* Outlined control(canon),同 .dv-retry:視覺 34 高,熱區靠透明 ::before 補到 44 */
#box_shares .pl-out {
  position: relative;
  flex: none;
  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;
  white-space: nowrap;
  transition: background-color var(--motion-fast) var(--ease-standard);
}

#box_shares .pl-out::before {
  content: "";
  position: absolute;
  inset: -6px 0;
}

#box_shares .pl-out:hover {
  background-color: var(--color-greyLight);
}

/* 取消分享 = 安靜的破壞性動作,同 .dv-revoke */
#box_shares .pl-quiet {
  flex: none;
  border: 0;
  background: none;
  font-size: 14px;
  color: var(--color-black);
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--motion-fast) var(--ease-standard);
  padding: var(--space-12);
  margin: -12px;
}

#box_shares .pl-quiet:hover {
  color: var(--color-redText);
}

#box_shares .pl-msg {
  font-size: 14px;
  color: var(--color-greyMedium);
}

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

/* ---------- 取消分享確認(殼同 #modal_dunning) ---------- */
#modal_share_revoke .modal-dialog {
  max-width: 460px;
}

#modal_share_revoke .modal-content {
  margin: 0;
  padding: var(--space-32);
  background-color: var(--color-pureWhite);
  box-shadow: var(--shadow-md);
}

#modal_share_revoke h6,
#modal_share_revoke p {
  margin: 0;
}

#modal_share_revoke p {
  margin-top: var(--space-12);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-greyDark);
}

#modal_share_revoke .pl-modal-name {
  font-weight: 600;
  color: var(--color-black);
  overflow-wrap: anywhere;
}

#modal_share_revoke .pl-modal-acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-top: var(--space-24);
}

#modal_share_revoke .pl-modal-acts button {
  flex: 1 1 0;
  min-width: max-content;
  height: 50px;
  padding: 0 var(--space-24);
  border-radius: var(--radius-md);
  font-size: 16px;
  white-space: nowrap;
}

#modal_share_revoke .pl-ghost {
  background: transparent;
  border: 2px solid var(--color-black);
  color: var(--color-black);
  transition: background-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard);
}

#modal_share_revoke .pl-ghost:hover {
  background: var(--color-black);
  color: var(--color-pureWhite);
}

#modal_share_revoke .pl-black {
  border: 0;
  background: var(--color-black);
  color: var(--color-pureWhite);
  transition: opacity var(--motion-fast) var(--ease-standard);
}

#modal_share_revoke .pl-black:hover:not(:disabled) {
  opacity: 0.85;
}

#modal_share_revoke .pl-black:disabled {
  background-color: var(--control-disabled-fill);
  color: var(--control-disabled-fill-text);
}

#modal_share_revoke .pl-modal-err {
  margin-top: var(--space-16);
  font-size: 14px;
  color: var(--color-redText);
}

#modal_share_revoke .pl-modal-err[hidden] {
  display: none;
}

#modal_share_revoke .pl-modal-err:not([hidden]) + .pl-modal-acts {
  margin-top: var(--space-12);
}

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

  #box_shares .pl-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-12);
  }

  #box_shares .pl-acts {
    justify-content: flex-start;
  }

  /* 真的列在這個寬度多一行動作(34 高、上距 12):骨架只佔位、不畫條 */
  #box_shares .pl-skrow::after {
    content: "";
    display: block;
    height: 34px;
    margin-top: var(--space-12);
  }

  #modal_share_revoke .modal-content {
    padding: var(--space-24);
  }
}