@import url('/ui-tokens/index.css');
@import url('/ui-system/styles.css');

body[data-route-key='withdraw'] {
  margin: 0;
  overflow-x: clip;
  background: var(--ui-bg-page);
  color: var(--ui-text-primary);
  font-family: var(--ui-font-sans);
}

body[data-route-key='withdraw'] main {
  min-inline-size: 0;
  background: var(--ui-bg-page);
}

body[data-route-key='withdraw'] .topbar {
  border-block-end: 1px solid var(--ui-border);
  background: color-mix(in srgb, var(--ui-surface) 94%, transparent);
  color: var(--ui-text-primary);
}

body[data-route-key='withdraw'] .topbar :where(.nav-link, .ghost) {
  color: var(--ui-text-secondary);
}

body[data-route-key='withdraw'] .topbar .language-picker {
  border-color: var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-text-secondary);
}

body[data-route-key='withdraw'] .topbar .language-picker select {
  color: var(--ui-text-primary);
}

body[data-route-key='withdraw'] .footer {
  display: none;
}

.wd-page,
.wd-page * {
  box-sizing: border-box;
}

.wd-page {
  inline-size: min(100%, 1512px);
  min-inline-size: 0;
  margin-inline: auto;
  padding: 32px max(24px, var(--ui-safe-right)) max(56px, var(--ui-safe-bottom)) max(24px, var(--ui-safe-left));
  color: var(--ui-text-primary);
  letter-spacing: 0;
}

.wd-page :where(h1, h2, h3, p, dl, dd, dt, ol, ul) {
  margin: 0;
}

.wd-page :where(ol, ul) {
  padding: 0;
  list-style: none;
}

.wd-page a {
  color: inherit;
  text-decoration: none;
}

.wd-page :where(button, a, input, select):focus-visible {
  outline: 3px solid var(--ui-brand);
  outline-offset: 2px;
}

.wd-skip {
  position: fixed;
  z-index: 120;
  inset-block-start: max(8px, var(--ui-safe-top));
  inset-inline-start: max(8px, var(--ui-safe-left));
  min-block-size: 44px;
  translate: 0 -180%;
  padding: 10px 14px;
  border-radius: var(--ui-radius-control);
  background: var(--ui-brand);
  color: var(--ui-text-on-brand);
  font-weight: 800;
}

.wd-skip:focus {
  translate: 0;
}

.wd-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-block-end: 24px;
}

.wd-header h1 {
  margin-block: 4px 8px;
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.08;
}

.wd-header > div > p:last-child {
  max-inline-size: 720px;
  color: var(--ui-text-secondary);
  line-height: 1.6;
}

.wd-eyebrow {
  color: var(--ui-brand);
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.wd-header__actions,
.wd-theme {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wd-theme {
  padding: 3px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-control);
  background: var(--ui-bg-subtle);
}

.wd-theme button {
  display: inline-grid;
  inline-size: 44px;
  block-size: 44px;
  place-items: center;
  border: 0;
  border-radius: var(--ui-radius-control);
  background: transparent;
  color: var(--ui-text-secondary);
  cursor: pointer;
  font: inherit;
  font-size: 1.1rem;
}

.wd-theme button:hover,
.wd-theme button:focus-visible,
.wd-theme button.is-active {
  background: var(--ui-surface);
  color: var(--ui-text-primary);
}

.wd-master-detail {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.wd-master,
.wd-detail-shell,
.wd-detail {
  display: grid;
  min-inline-size: 0;
  gap: 20px;
}

.wd-master {
  position: sticky;
  inset-block-start: 88px;
}

.wd-master__section,
.wd-panel,
.wd-hero,
.wd-operation-boundary {
  min-inline-size: 0;
  padding: 22px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-card);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-sm);
}

.wd-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-block-end: 18px;
}

.wd-panel__head h2,
.wd-operation-boundary h2 {
  font-size: 1rem;
  line-height: 1.35;
}

.wd-request-list {
  display: grid;
  gap: 8px;
}

.wd-request-row {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-card);
  background: var(--ui-bg-subtle);
}

.wd-request-row.is-selected {
  border-color: var(--ui-brand);
  box-shadow: inset 3px 0 0 var(--ui-brand);
}

.wd-request-row button {
  display: grid;
  inline-size: 100%;
  min-block-size: 96px;
  gap: 10px;
  padding: 14px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: start;
}

.wd-request-row__top,
.wd-request-row__meta {
  display: flex;
  min-inline-size: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.wd-request-row__top strong {
  font-size: .9rem;
  overflow-wrap: anywhere;
}

.wd-request-row__meta {
  color: var(--ui-text-tertiary);
  font-size: .68rem;
}

.wd-request-row__meta > * {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.wd-request-row__action {
  color: var(--ui-brand);
  font-size: .72rem;
  font-weight: 800;
}

.wd-request-form {
  display: grid;
  gap: 14px;
}

.wd-request-form label {
  display: grid;
  gap: 6px;
  color: var(--ui-text-secondary);
  font-size: .76rem;
  font-weight: 700;
}

.wd-request-form :where(input, select) {
  inline-size: 100%;
  min-block-size: 44px;
  padding: 9px 11px;
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-control);
  background: var(--ui-bg-page);
  color: var(--ui-text-primary);
  font: inherit;
}

.wd-request-form .ui-button {
  min-block-size: 44px;
}

.wd-detail__mobile-head {
  display: none;
}

.wd-hero {
  display: grid;
  gap: 20px;
  min-block-size: 300px;
  align-content: space-between;
  border-block-start: 3px solid var(--ui-brand);
}

.wd-hero__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.wd-hero__top p,
.wd-hero__state span {
  color: var(--ui-text-secondary);
  font-size: .76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.wd-hero__top h2 {
  margin-block-start: 8px;
  font-size: clamp(2.2rem, 6vw, 4.25rem);
  line-height: 1.04;
  overflow-wrap: anywhere;
}

.wd-hero__state {
  display: grid;
  grid-template-columns: minmax(180px, .6fr) minmax(0, 1fr);
  gap: 18px;
  align-items: end;
  padding-block: 18px;
  border-block: 1px solid var(--ui-border);
}

.wd-hero__state strong {
  display: block;
  margin-block-start: 5px;
  font-size: 1.2rem;
}

.wd-hero__state p,
.wd-footnote,
.wd-operation-boundary p {
  color: var(--ui-text-secondary);
  font-size: .8rem;
  line-height: 1.55;
}

.wd-safety-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border-inline-start: 3px solid var(--ui-warning);
  background: var(--ui-bg-subtle);
}

.wd-safety-note p {
  color: var(--ui-text-secondary);
  font-size: .8rem;
  line-height: 1.5;
}

.wd-two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

.wd-two-column--records > [data-withdrawal-module='approval'] {
  grid-column: 1 / -1;
}

.wd-two-column--records > [data-withdrawal-module='approval'] .wd-record-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wd-kv {
  display: grid;
}

.wd-kv > div {
  display: grid;
  grid-template-columns: minmax(130px, .9fr) minmax(0, 1.1fr);
  gap: 14px;
  align-items: start;
  min-block-size: 42px;
  padding-block: 10px;
  border-block-start: 1px solid var(--ui-border);
}

.wd-kv dt {
  color: var(--ui-text-tertiary);
  font-size: .73rem;
  font-weight: 700;
}

.wd-kv dd {
  min-inline-size: 0;
  text-align: end;
  font-size: .78rem;
  overflow-wrap: anywhere;
}

.wd-kv--financial dd {
  font-variant-numeric: tabular-nums;
}

.wd-kv--compact > div {
  grid-template-columns: minmax(100px, .85fr) minmax(0, 1.15fr);
  min-block-size: 34px;
  padding-block: 7px;
}

.wd-footnote {
  margin-block-start: 12px;
  padding-block-start: 12px;
  border-block-start: 1px solid var(--ui-border);
}

.wd-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
}

.wd-timeline::before {
  position: absolute;
  inset: 8px auto 8px calc(50% - .5px);
  inline-size: 1px;
  background: var(--ui-border);
  content: '';
}

.wd-timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 12px;
  min-block-size: 106px;
  padding: 12px 0;
  border-block-start: 1px solid var(--ui-border);
}

.wd-timeline__marker {
  display: block;
  inline-size: 14px;
  block-size: 14px;
  margin-block-start: 3px;
  border: 3px solid color-mix(in srgb, var(--wd-marker) 30%, var(--ui-surface));
  border-radius: 50%;
  background: var(--wd-marker);
}

.wd-timeline__content {
  display: grid;
  min-inline-size: 0;
  gap: 7px;
}

.wd-timeline__content > div {
  display: flex;
  min-inline-size: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.wd-timeline__content strong {
  font-size: .82rem;
}

.wd-timeline__content p {
  color: var(--ui-text-secondary);
  font-size: .75rem;
  line-height: 1.45;
}

.wd-timeline__content small {
  color: var(--ui-text-tertiary);
  font-size: .68rem;
}

.wd-record-list,
.wd-audit-list {
  display: grid;
  gap: 12px;
}

.wd-record-list > li,
.wd-audit-list > li {
  min-inline-size: 0;
  padding: 14px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-card);
  background: var(--ui-bg-subtle);
}

.wd-record-list__head {
  display: flex;
  min-inline-size: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-block-end: 10px;
}

.wd-record-list__head strong {
  font-size: .84rem;
}

.wd-audit-list > li {
  display: grid;
  grid-template-columns: minmax(120px, .55fr) minmax(160px, .8fr) minmax(220px, 1fr);
  gap: 16px;
  align-items: start;
}

.wd-audit-list time {
  color: var(--ui-text-tertiary);
  font-size: .72rem;
}

.wd-audit-list strong {
  font-size: .82rem;
}

.wd-audit-list p {
  margin-block-start: 5px;
  color: var(--ui-text-secondary);
  font-size: .73rem;
  line-height: 1.45;
}

.wd-operation-boundary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-inline-start: 3px solid var(--ui-warning);
}

.wd-operation-boundary p {
  margin-block-start: 6px;
  max-inline-size: 720px;
}

.wd-operation-boundary .ui-button {
  flex: 0 0 auto;
  min-block-size: 44px;
}

.wd-source {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  color: var(--ui-text-tertiary);
  font-size: .72rem;
}

.wd-status {
  max-inline-size: 100%;
  white-space: normal;
}

.wd-empty,
.wd-module-state {
  display: grid;
  min-block-size: 112px;
  align-content: center;
  justify-items: start;
  gap: 10px;
  padding: 16px;
  border: 1px dashed var(--ui-border-strong);
  border-radius: var(--ui-radius-card);
  background: var(--ui-bg-subtle);
}

.wd-empty--compact {
  min-block-size: 80px;
}

.wd-empty p,
.wd-module-state p {
  color: var(--ui-text-secondary);
  font-size: .8rem;
  line-height: 1.5;
}

.wd-module-state .ui-skeleton {
  inline-size: 42%;
  block-size: 14px;
}

.wd-loading-detail {
  display: grid;
  gap: 16px;
}

.wd-loading-panel {
  min-block-size: 128px;
}

.wd-loading-panel__title,
.wd-loading-panel__line {
  display: block;
  inline-size: min(18rem, 70%);
  block-size: 1rem;
  margin-block-end: 16px;
}

.wd-loading-panel__title {
  inline-size: min(10rem, 45%);
  block-size: 1.25rem;
}

.wd-loading-panel__line--short {
  inline-size: min(12rem, 52%);
}

.wd-sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wd-confirm-dialog {
  inline-size: min(calc(100% - 32px), 520px);
  max-inline-size: 520px;
  max-block-size: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-card);
  background: var(--ui-surface);
  color: var(--ui-text-primary);
  box-shadow: var(--ui-shadow-lg);
}

.wd-confirm-dialog::backdrop {
  background: rgb(3 9 20 / .72);
  backdrop-filter: blur(3px);
}

.wd-confirm-dialog form {
  display: grid;
  gap: 18px;
  padding: 22px;
}

.wd-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.wd-dialog__head h2 {
  font-size: 1.05rem;
}

.wd-dialog__head button {
  display: grid;
  inline-size: 44px;
  block-size: 44px;
  place-items: center;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-control);
  background: transparent;
  color: var(--ui-text-primary);
  cursor: pointer;
  font: inherit;
  font-size: 1.2rem;
}

.wd-dialog__warning {
  padding: 14px;
  border-inline-start: 3px solid var(--ui-danger);
  background: var(--ui-bg-subtle);
  color: var(--ui-text-secondary);
  font-size: .82rem;
  line-height: 1.55;
}

.wd-dialog__error {
  color: var(--ui-danger);
  font-size: .78rem;
}

.wd-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.wd-dialog__actions .ui-button {
  min-block-size: 44px;
}

.wd-dialog__actions .ui-button--danger {
  border-color: var(--ui-danger);
  background: var(--ui-danger);
  color: #fff;
}

.wd-dialog__actions .ui-button--danger:hover {
  background: color-mix(in srgb, var(--ui-danger) 84%, #000);
}

@media (max-width: 1180px) {
  .wd-master-detail {
    grid-template-columns: minmax(230px, 280px) minmax(0, 1fr);
  }

  .wd-two-column,
  .wd-timeline {
    grid-template-columns: minmax(0, 1fr);
  }

  .wd-timeline::before {
    display: none;
  }

  .wd-audit-list > li {
    grid-template-columns: minmax(100px, .5fr) minmax(0, 1fr);
  }

  .wd-audit-list > li > .wd-kv {
    grid-column: 1 / -1;
  }

  .wd-two-column--records > [data-withdrawal-module='approval'] .wd-record-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  body[data-route-key='withdraw'] {
    padding-block-end: env(safe-area-inset-bottom, 0px);
  }

  body[data-route-key='withdraw']:has(.wd-page.is-detail-open) {
    overflow: hidden;
  }

  body[data-route-key='withdraw']:has(.wd-page.is-detail-open) main {
    z-index: 30;
  }

  .wd-page {
    inline-size: 100%;
    padding: 18px max(16px, var(--ui-safe-right)) calc(24px + var(--ui-safe-bottom)) max(16px, var(--ui-safe-left));
  }

  .wd-header {
    display: grid;
    gap: 16px;
  }

  .wd-header h1 {
    font-size: 1.85rem;
  }

  .wd-header__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .wd-theme {
    justify-content: space-between;
  }

  .wd-theme button {
    flex: 1;
  }

  .wd-master-detail {
    grid-template-columns: minmax(0, 1fr);
  }

  .wd-master {
    position: static;
  }

  .wd-detail-shell {
    display: none;
  }

  .wd-page.is-detail-open .wd-detail-shell {
    position: fixed;
    z-index: 80;
    inset: 0;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 max(16px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    background: var(--ui-bg-page);
  }

  .wd-detail {
    gap: 14px;
    padding-block-start: calc(62px + env(safe-area-inset-top, 0px));
  }

  .wd-detail__mobile-head {
    position: fixed;
    z-index: 2;
    inset: 0 0 auto;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    min-block-size: calc(58px + env(safe-area-inset-top, 0px));
    align-items: end;
    padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) 7px max(16px, env(safe-area-inset-left, 0px));
    border-block-end: 1px solid var(--ui-border);
    background: color-mix(in srgb, var(--ui-surface) 96%, transparent);
    backdrop-filter: blur(18px);
  }

  .wd-detail__mobile-head button {
    display: grid;
    inline-size: 44px;
    block-size: 44px;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--ui-text-primary);
    cursor: pointer;
    font: inherit;
    font-size: 1.2rem;
  }

  .wd-detail__mobile-head strong {
    align-self: center;
    text-align: center;
  }

  .wd-master__section,
  .wd-panel,
  .wd-hero,
  .wd-operation-boundary {
    padding: 16px;
  }

  .wd-hero {
    min-block-size: 0;
  }

  .wd-hero__top,
  .wd-hero__state,
  .wd-operation-boundary {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .wd-safety-note {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .wd-safety-note .wd-status {
    inline-size: fit-content;
  }

  .wd-hero__top h2 {
    font-size: 2rem;
  }

  .wd-kv > div,
  .wd-kv--compact > div {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 12px;
  }

  .wd-timeline li {
    min-block-size: 94px;
  }

  .wd-timeline__content > div {
    display: grid;
  }

  .wd-audit-list > li {
    grid-template-columns: minmax(0, 1fr);
  }

  .wd-audit-list > li > .wd-kv {
    grid-column: auto;
  }

  .wd-operation-boundary .ui-button {
    justify-self: stretch;
  }

  .wd-confirm-dialog {
    inline-size: calc(100% - max(24px, env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px)));
    max-block-size: calc(100dvh - max(24px, env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px)));
  }
}

@media (max-width: 390px) {
  .wd-kv > div,
  .wd-kv--compact > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }

  .wd-kv dd {
    text-align: start;
  }

  .wd-request-row__top,
  .wd-request-row__meta {
    display: grid;
  }

  .wd-dialog__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wd-page *,
  .wd-skip {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}