/* Shared components: buttons, fields, cards, chips, tables, dialogs, toasts. */

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--surface);
  --btn-fg: var(--ink);
  --btn-line: var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 var(--s-5);
  border: 1px solid var(--btn-line);
  border-radius: var(--r-md);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 600;
  font-size: var(--size-sm);
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  /* “复制链接” 这种窄按钮不能被折成“复制链 / 接”。 */
  white-space: nowrap;
  transition: background var(--t-state) var(--ease), color var(--t-state) var(--ease), border-color var(--t-state) var(--ease), transform var(--t-state) var(--ease);
}
.btn:hover { border-color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled='true'] { opacity: .5; cursor: not-allowed; transform: none; }
.btn--primary { --btn-bg: var(--pine); --btn-fg: var(--pine-ink); --btn-line: var(--pine); }
.btn--primary:hover { --btn-bg: #0f2f28; --btn-line: #0f2f28; }
.btn--cta { --btn-bg: var(--terra); --btn-fg: var(--terra-ink); --btn-line: var(--terra); }
.btn--cta:hover { --btn-bg: #b64423; --btn-line: #b64423; }
/* 次按钮不等于纯文字：常驻一圈描边，悬停再加深并铺底色。
   之前描边透明、只在 :hover 里出现，静止时整颗按钮读起来像一段正文。 */
.btn--ghost { --btn-bg: transparent; --btn-line: var(--line); --btn-fg: var(--ink-2); }
.btn--ghost:hover { --btn-bg: var(--surface-2); --btn-line: var(--ink-2); --btn-fg: var(--ink); }
.btn--sm { min-height: 34px; padding: 0 var(--s-3); font-size: var(--size-xs); }
.btn--block { width: 100%; }
.btn--danger { --btn-fg: var(--danger); }
/* 删除类次按钮悬停转红：不能被通用的 ghost 悬停色盖成中性。 */
.btn--danger.btn--ghost:hover { --btn-bg: var(--danger-soft); --btn-line: var(--danger); --btn-fg: var(--danger); }
.btn .spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-inline-end-color: transparent; animation: spin 700ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Language picker ---------- */
/* 四个壳都带语言切换（营销页页头、工作台侧栏、认证页、法务页），
   所以样式必须住在共用层；放在 marketing.css 里会让工作台和认证页退化成裸链接。 */
.lang-switch { display: inline-flex; align-items: center; }
.lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 34px;
  padding: 4px 12px 4px 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: var(--size-xs);
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--t-state) var(--ease), border-color var(--t-state) var(--ease);
}
.lang-trigger:hover { background: var(--surface-2); border-color: var(--muted); }
.lang-trigger:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.lang-trigger__flag { display: inline-flex; width: 22px; height: 22px; }
.lang-trigger__flag svg, .lang-option__flag svg { width: 100%; height: 100%; display: block; border-radius: 50%; }
.lang-trigger__label { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.lang-trigger__chevron { width: 10px; height: 10px; color: var(--muted); }
[dir='rtl'] .lang-trigger { padding: 4px 6px 4px 12px; }

/* 覆盖上半个屏幕的语言弹层：遮罩压暗整页，面板从顶部滑下。 */
body.lang-open { overflow: hidden; }
.lang-sheet { position: fixed; inset: 0; z-index: 200; }
.lang-sheet[hidden] { display: none; }
.lang-sheet__scrim {
  position: absolute;
  inset: 0;
  background: rgba(18, 51, 43, .42);
  backdrop-filter: blur(2px);
  animation: lang-fade var(--t-expand) var(--ease);
}
.lang-sheet__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  height: min(52vh, 560px);
  min-height: 340px;
  padding: var(--s-5) var(--s-5) var(--s-6);
  background: var(--canvas);
  border-radius: 0 0 18px 18px;
  box-shadow: var(--shadow-overlay);
  animation: lang-sheet-in var(--t-expand) var(--ease);
  overflow: auto;
}
.lang-sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); }
.lang-sheet__eyebrow {
  display: block;
  font-size: var(--size-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--terra);
}
.lang-sheet__head h2 { margin: 2px 0 0; font-size: clamp(20px, 2vw, 26px); line-height: var(--leading-snug); }
.lang-sheet__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
}
.lang-sheet__close:hover { background: var(--surface-2); }
.lang-sheet__close:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.lang-sheet__close svg { width: 16px; height: 16px; }
.lang-sheet__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--s-2);
  align-content: start;
}
.lang-option {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: background-color var(--t-state) var(--ease), border-color var(--t-state) var(--ease);
}
.lang-option:hover { background: var(--surface); border-color: var(--line); }
.lang-option:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.lang-option[aria-current='true'] { background: var(--surface); border-color: var(--pine); }
.lang-option__flag { display: inline-flex; flex: none; width: 28px; height: 28px; }
.lang-option__flag svg { box-shadow: inset 0 0 0 1px rgba(20, 18, 15, .12); }
.lang-option__text { display: grid; gap: 1px; min-width: 0; }
.lang-option__text strong { font-size: var(--size-sm); line-height: var(--leading-snug); }
.lang-option__text small { font-size: var(--size-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lang-option__check { margin-inline-start: auto; color: var(--pine); font-weight: 700; }
@keyframes lang-fade { from { opacity: 0; } }
@keyframes lang-sheet-in { from { transform: translateY(-16px); opacity: 0; } }
@media (max-width: 640px) {
  .lang-sheet__panel { height: min(72vh, 640px); padding: var(--s-4) var(--s-4) var(--s-5); }
  .lang-sheet__grid { grid-template-columns: 1fr 1fr; }
  .lang-trigger__label { display: none; }
  .lang-trigger { padding: 4px 8px 4px 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .lang-sheet__scrim, .lang-sheet__panel { animation: none; }
}

/* ---------- Fields ---------- */
.field { display: grid; gap: 6px; }
.field > label, .field > .label {
  font-size: var(--size-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-2);
}
.input, .select, .textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  transition: border-color var(--t-state) var(--ease), background var(--t-state) var(--ease);
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--pine); outline-offset: 1px; }
.textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position: calc(100% - 18px) 20px, calc(100% - 12px) 20px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-inline-end: var(--s-6); }
[dir='rtl'] .select { background-position: 18px 20px, 12px 20px; }
.hint { font-size: var(--size-xs); color: var(--muted); }
.error-text { font-size: var(--size-xs); color: var(--danger); }
.field[data-invalid='true'] .input, .field[data-invalid='true'] .select, .field[data-invalid='true'] .textarea { border-color: var(--danger); }
.check { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--size-sm); }
.check input { margin-top: 4px; accent-color: var(--pine); }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-5);
}
.card--flush { padding: 0; overflow: hidden; }
.card--pine { background: var(--pine); color: var(--pine-ink); border-color: var(--pine); }
.card--pine .muted, .card--pine .caption, .card--pine .eyebrow { color: var(--pine-soft); }
.card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.card__title { font-family: var(--font-display); font-size: var(--size-lg); font-weight: 600; }

/* ---------- Chips / badges ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 var(--s-3);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: var(--size-xs);
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}
.chip--terra { background: var(--terra-soft); border-color: transparent; color: #8d3418; }
.chip--pine { background: var(--pine-soft); border-color: transparent; color: var(--pine); }
.chip--ochre { background: var(--ochre-soft); border-color: transparent; color: #7c5a12; }
.chip--ok { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.chip--warn { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.chip--danger { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
.chip--soft { background: var(--surface-2, #fff); border-color: var(--line); color: var(--ink-2); }
.chip--file { font-family: var(--font-mono); font-weight: 500; }
.chip__x { border: 0; background: transparent; cursor: pointer; color: inherit; padding: 0 2px; font-size: 14px; line-height: 1; }

/* ---------- Tables ---------- */
.table { width: 100%; border-collapse: collapse; font-size: var(--size-sm); }
.table th {
  text-align: start;
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.table td { padding: var(--s-4); border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background var(--t-state) var(--ease); }
.table tbody tr:hover { background: var(--surface-2); }

/* ---------- Alerts / banners ---------- */
.alert {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--pine);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: var(--size-sm);
}
.alert--warn { border-inline-start-color: var(--warn); background: var(--warn-soft); border-color: #e6d6ad; }
.alert--danger { border-inline-start-color: var(--danger); background: var(--danger-soft); border-color: #e8c6c2; }
.alert--ok { border-inline-start-color: var(--ok); background: var(--ok-soft); border-color: #c8ddcd; }
.alert__body { flex: 1 1 auto; min-width: 0; }
.alert__title { font-weight: 700; display: block; margin-bottom: 2px; }

/* ---------- Segmented control ---------- */
.segmented { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); }
.segmented button {
  border: 0; background: transparent; cursor: pointer; border-radius: var(--r-pill);
  padding: 7px var(--s-4); font-size: var(--size-sm); font-weight: 600; color: var(--ink-2);
  transition: background var(--t-state) var(--ease), color var(--t-state) var(--ease);
}
.segmented button[aria-selected='true'] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 0 rgba(20,18,15,.08); }

/* ---------- Dialog ---------- */
dialog.dialog {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-overlay);
}
dialog.dialog::backdrop { background: rgba(20, 18, 15, .45); }
.dialog__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3); padding: var(--s-5) var(--s-5) 0; }
.dialog__body { padding: var(--s-4) var(--s-5); }
.dialog__foot { display: flex; justify-content: flex-end; gap: var(--s-3); padding: 0 var(--s-5) var(--s-5); }

/* ---------- Toast ---------- */
.toast-stack { position: fixed; inset-block-end: var(--s-5); inset-inline-end: var(--s-5); display: grid; gap: var(--s-2); z-index: 80; width: min(380px, calc(100vw - 32px)); }
.toast {
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--pine);
  background: var(--surface);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  font-size: var(--size-sm);
  box-shadow: var(--shadow-overlay);
  animation: toast-in var(--t-expand) var(--ease);
}
.toast--error { border-inline-start-color: var(--danger); }
.toast--ok { border-inline-start-color: var(--ok); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Misc ---------- */
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------- RTL ---------- */
/* 阿拉伯语、乌尔都语从右到左：flex/grid 会自动镜像，这里补图形与滚动方向。 */
[dir='rtl'] body { text-align: start; }
[dir='rtl'] .price, [dir='rtl'] .mono, [dir='rtl'] .num { direction: ltr; unicode-bidi: isolate; display: inline-block; }
[dir='rtl'] .doc-sheet .refs p { direction: rtl; }
.price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; }
.price--lg { font-size: var(--size-xl); }
.progress { height: 6px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--pine); border-radius: inherit; transition: width var(--t-expand) var(--ease); }
.empty { text-align: center; padding: var(--s-8) var(--s-4); color: var(--muted); }
.empty h3 { color: var(--ink); margin-bottom: var(--s-2); }
.empty svg { margin: 0 auto var(--s-4); color: var(--pine); }
.skeleton { background: linear-gradient(90deg, var(--surface-2), var(--surface), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; border-radius: var(--r-sm); }
@keyframes shimmer { to { background-position: -200% 0; } }