/* ----------------------------------------------------------------- ux polish
   Readability layer loaded after every page stylesheet (with ux.js). Each
   "==" block is one self-contained change. Nothing here hides information:
   values drawn more quietly stay in the page for screen readers, tooltips,
   copy and the CSV export.                                                  */

/* == missing values: one quiet dash instead of "— 未取得" in every cell ==== */
td .wr-unknown { font-size: 0; white-space: nowrap; color: #5f6b7a; }
td .wr-unknown::before { content: '—'; font-size: 13px; font-weight: 400; color: #5f6b7a; }
p.ux-legend { margin: 0; padding: 7px 14px; border-top: 1px solid var(--wr-border, #d7e0e8); color: #52677b; font-size: 12px; }
.ux-legend b { font-weight: 400; color: #5f6b7a; margin-right: 4px; }
.wr-none { color: #5f6b7a; font-size: 13px; white-space: nowrap; }

/* readable table text: nothing under 12px, muted text ≥ 4.5:1 */
thead th, #provider-reports-root th { font-size: 12px; letter-spacing: 0.02em; }
.wr-source, .import-section td small, .op-money small, .op-tag, .wr-grid .pill, .auth-otp-tag { font-size: 12px; }
.wr-source { color: #52677b; }
.auth-panel small { font-size: 12px; }
.wr-money small { font-size: 12px; color: #607188; }        /* currency code beside a figure */
td b.mono { font-size: 12px; }
.wr-metrics small { font-size: 12px; color: #52677b; }
:root { --text-meta: #5f646c; }   /* was #6e7a72: 4.3:1 on tinted table heads, now ≥ 5:1 */

/* click targets: inline links grow their hit area, not the row */
td a { padding-block: 5px; }
.wr-agent-link { padding-block: 4px; min-width: 24px; text-align: left; }
.wr-sources > summary, details > summary { padding-block: 3px; }
input[type='checkbox'], input[type='radio'] { min-width: 18px; min-height: 18px; }

/* less stacked chrome above the data (weekly review, boss) */
.wr-metrics { padding: 12px 0; margin-bottom: 12px; }
.wr-metrics div { padding: 0 18px; }
.wr-metrics dd { margin-top: 2px; font-size: 24px; line-height: 1.25; }
.staff-workflow { padding: 0; margin: 0 0 10px; }
.staff-workflow a { padding: 6px 10px; }
#weekly-review-root > .wr-context { margin-bottom: 10px; }
#weekly-review-root > .page-head { margin-bottom: 10px; }

/* == empty states end in a next step ====================================== */
.empty .t-sub { max-width: 60ch; margin-inline: auto; }
.empty-actions { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.empty-actions .btn { text-decoration: none; }

/* == plain-language errors ================================================= */
.ux-friendly { cursor: help; }
.ux-error { max-width: 640px; margin: 8px 0 16px; padding: 16px 18px; border: 1px solid #f0c9c9; border-left: 4px solid #c23b3b; border-radius: 8px; background: #fff0ef; }
.ux-error h2 { margin: 0 0 4px; font-size: 16px; color: #8a2626; }
.ux-error p { margin: 0; color: #4a3a3a; line-height: 1.6; }
.ux-error-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ux-error-actions .btn { text-decoration: none; }
.ux-error-actions .btn-primary { color: #fff; }   /* site primary is dark-on-blue (3.6:1); white is 4.9:1 */

/* == a column with one value on every row is shown once above the table ==== */
.ux-const { display: none !important; }
p.ux-constants { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0; padding: 8px 14px; border-bottom: 1px solid var(--wr-border, #d7e0e8); background: #ffffff; color: #3d4f66; font-size: 12px; }
.ux-constants-k { color: #52677b; }
.ux-constants b { font-weight: 600; margin-right: 6px; color: #2c3e55; }
.ux-constants small, .ux-constants .wr-source { display: inline; margin: 0 0 0 6px; }

/* == 账号明细 opens as a side panel over the table (weekly-review.js) ======== */
/* the page scrollbar is hidden while the panel is open but its space is kept (no shift
   behind the panel); right: 100% − 100vw runs the panel over that space to the window edge */
dialog.wr-drawer { position: fixed; inset: 0 calc(100% - 100vw) 0 auto; width: min(1080px, 92vw); max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 12px 0 0 12px; overflow: auto; overscroll-behavior: contain; background: #ffffff; color: var(--text-primary, #17202b); box-shadow: -12px 0 40px rgba(13, 26, 46, 0.22); }
dialog.wr-drawer::backdrop { background: rgba(13, 26, 46, 0.45); }
.wr-drawer .wr-detail-head { position: sticky; top: 0; z-index: 2; }
/* room inside the panel: a gutter on both sides, space between sections, tables as framed boxes */
dialog.wr-drawer { padding: 0 32px 40px; }
.wr-drawer > .wr-detail-head { margin: 0 -32px 8px; padding: 22px 32px; }
.wr-drawer > p, .wr-drawer > a, .wr-drawer > .wr-alert { margin: 16px 0; }
.wr-drawer > p { line-height: 1.7; }
.wr-drawer > h3 { margin: 32px 0 12px; font-size: 14px; }
.wr-drawer > .tw { border: 1px solid var(--wr-border, #d7e0e8); border-radius: 8px; }
.wr-drawer > p.ux-constants { margin: 0; border: 1px solid var(--wr-border, #d7e0e8); border-bottom: 0; border-radius: 8px 8px 0 0; }
.wr-drawer > p.ux-constants + .tw { border-radius: 0 0 8px 8px; }
.wr-drawer > p.ux-legend { margin: 0; padding: 8px 0 0; border: 0; }
.wr-drawer > .empty { padding: 22px 24px; border: 1px dashed #c8d3e2; border-radius: 8px; background: #ffffff; }
.wr-drawer > .guide-chip { margin: 12px 0 0; }
html:has(dialog.wr-drawer[open]) { overflow: hidden; scrollbar-gutter: stable; }
/* slides in from the right as the page dims; slides back out a little faster */
@media (prefers-reduced-motion: no-preference) {
  dialog.wr-drawer.wr-drawer-enter { animation: ux-drawer-in 300ms cubic-bezier(0.22, 1, 0.36, 1); }
  dialog.wr-drawer.wr-drawer-enter::backdrop { animation: ux-backdrop-in 300ms ease-out; }
  dialog.wr-drawer.wr-drawer-leave { animation: ux-drawer-out 220ms cubic-bezier(0.4, 0, 1, 1) forwards; }
  dialog.wr-drawer.wr-drawer-leave::backdrop { animation: ux-backdrop-out 220ms ease-in forwards; }
  @keyframes ux-drawer-in { from { transform: translateX(100%); } }
  @keyframes ux-drawer-out { to { transform: translateX(100%); } }
  @keyframes ux-backdrop-in { from { opacity: 0; } }
  @keyframes ux-backdrop-out { to { opacity: 0; } }
}
@media (max-width: 640px) {
  dialog.wr-drawer { inset: 0 calc(100% - 100vw) 0 0; width: auto; border-radius: 0; padding: 0 16px 28px; }
  .wr-drawer > .wr-detail-head { margin: 0 -16px 4px; padding: 16px; }
  .wr-drawer > h3 { margin-top: 24px; }
}

/* == phone: fewer rows of chrome before the data =========================== */
.ux-filter-toggle { display: none; }
@media (max-width: 640px) {
  .ux-filter-toggle { display: inline-flex; align-self: end; min-height: 40px; }
  .wr-toolbar.ux-folded > .wr-field:not(.wr-field-week):not(.wr-search), .wr-toolbar.ux-folded > [data-wr='clear'] { display: none; }
  .wr-toolbar .wr-search { flex-basis: 100%; }
  .wr-metrics { padding: 10px 0; gap: 10px 0; }
  .wr-metrics div { padding: 0 12px; }
  .wr-metrics dd { font-size: 20px; }
}
@media (max-width: 600px) {
  /* step bar: numbers for every step, the label only for the current one (all labels stay for screen readers) */
  .staff-workflow { display: flex; gap: 4px; }
  .staff-workflow a { min-height: 44px; padding: 4px 8px; font-size: 0; }
  .staff-workflow a span { font-size: 12px; }
  .staff-workflow a[aria-current='step'] { flex: 1; font-size: 13px; }
}