/* Client content adapts to its card width as well as the viewport. */
@media screen {
  body:not(:has(#financial-disclosure)) { --disclosure-height: 0px; }
  #app { font-family: Inter, Arial, sans-serif; }
  #page > .page-head h1 { font-weight: 750; }
}
@media screen {
  .client-panel:not(.loan-record) {
    container-type: inline-size;
    container-name: client-panel;
  }

  .account-card {
    container-type: inline-size;
    container-name: account-card;
  }
  .account-label > div { min-width: 0; }
  .account-card .money {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    font-size: clamp(22px, 9cqi, 30px);
    line-height: 1.3;
  }
  .account-balance-value { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .account-card .money small { margin-left: 0; }
  .account-foot > * { min-width: 0; max-width: 100%; }
  .account-foot a { min-height: 32px; display: inline-flex; align-items: center; }

  .transaction-list { container-type: inline-size; container-name: transaction-list; }
  .transaction > div { min-width: 0; }
  .transaction strong, .transaction small { line-height: 1.6; }
  .transaction:focus-visible { outline: 3px solid #73c9e8; outline-offset: -3px; border-radius: 6px; }

  .client-list-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px 18px;
  }
  .client-list-row > * { min-width: 0; max-width: 100%; }
  .client-list-row h3, .client-list-row p { overflow-wrap: anywhere; line-height: 1.7; }
  .client-list-row > .button-row { justify-content: flex-end; align-self: center; }
  .client-list-row > .status-pill { justify-self: end; }
  .client-list-row .status-pill { overflow-wrap: anywhere; }
  .client-panel .field input, .client-panel .field select,
  .client-panel .field textarea, .client-panel .filters > * { min-width: 0; max-width: 100%; }

  .client-panel:not(.loan-record) .summary-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4px 14px;
    align-items: start;
  }
  .client-panel:not(.loan-record) .summary-line > * { min-width: 0; overflow-wrap: anywhere; }
  .client-panel .summary-box { min-width: 0; max-width: 100%; }
  .client-panel .loan-value { overflow-wrap: anywhere; line-height: 1.35; }
  .client-panel .switch-row > div { flex: 1; min-width: 0; }
  .client-panel .switch-row label, .client-panel .switch-row small { overflow-wrap: anywhere; }

  .card-number {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-content: space-between;
    gap: 6px;
    white-space: normal;
    font-size: clamp(16px, 4.7cqi, 23px);
    font-weight: 550;
    letter-spacing: 1px;
    line-height: 1.5;
    margin: 0 0 15px;
    max-width: 100%;
    font-variant-numeric: tabular-nums;
  }
  .card-number > span { white-space: nowrap; }
  .card-brand { max-width: 100%; overflow-wrap: anywhere; }
  .card-foot > span:first-child { overflow-wrap: anywhere; }
  .card-art { width: 100%; max-width: 100%; height: auto; aspect-ratio: auto; min-height: 300px; gap: 0; padding: 28px; border: 1px solid #ffffff38; border-radius: 20px; background: linear-gradient(125deg, #193e61, #306d98 58%, #5e9dd0); box-shadow: 0 18px 32px -20px #204e7d99, inset 0 1px 0 #ffffff20; }
  .card-art > * { flex-shrink: 0; position: relative; z-index: 1; }
  .card-art::after { right: -48%; top: -50%; width: 125%; height: 185%; border: 1px solid #ffffff12; border-radius: 45%; box-shadow: 0 0 0 20px #ffffff03, 0 0 0 42px #ffffff03, 0 0 0 66px #ffffff03; transform: rotate(-28deg); pointer-events: none; }
  .card-art.inactive { background: linear-gradient(125deg, #244563, #396e96 60%, #609bc7); }
  .card-art.frozen { filter: none; opacity: 1; background: linear-gradient(125deg, #435165, #68788a); }
  .card-topline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 34px; }
  .card-topline .card-brand { font-size: 17px; letter-spacing: -.4px; }
  .card-number-label { color: #d7e7f5; text-transform: uppercase; letter-spacing: 1.2px; font-size: 9px; line-height: 1.5; margin-bottom: 7px; }
  .card-caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; margin-top: 22px; padding-top: 15px; border-top: 1px solid #ffffff24; color: #d7e7f5; font-size: 10px; line-height: 1.7; overflow-wrap: anywhere; }
  .card-caption > * { min-width: 0; }
  .card-currency { display: grid; place-items: center; min-width: 42px; height: 32px; padding-inline: 8px; border: 1px solid #ffffff38; border-radius: 8px; color: #fff; font-size: 11px; font-weight: 650; letter-spacing: .8px; }
  .card-foot { gap: 16px; align-items: flex-end; }
  .card-art .card-holder { min-width: 0; flex: 1 1 140px; }
  .card-holder > span { color: #d7e7f5; font-size: 10px; }
  .card-holder-name { display: block; max-width: 100%; margin-top: 3px; font-size: 14px; font-weight: 650; letter-spacing: .2px; line-height: 1.55; overflow-wrap: anywhere; }
  .card-state-label { display: inline-block; max-width: 100%; padding: 5px 9px; border-radius: 20px; font-size: 10px; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; }
  .card-state-label.inactive, .card-state-label.pending { background: #f8f0df; color: #846225; }
  .card-art .card-state-label { align-self: flex-start; color: #fff; background: #ffffff1f; }
  .card-display-panel { background: #f8fbff; border-color: #dce7f1; border-radius: 18px; }
  .card-display-panel > .panel-head { align-items: flex-start; gap: 10px; margin-bottom: 20px; }
  .card-display-panel > .panel-head h2 { font-size: 18px; line-height: 1.5; font-weight: 700; }
  .card-display-panel > .panel-head > .status-pill { display: none; }
  .card-display-panel > .footnote { margin-top: 16px; line-height: 1.7; }
  .card-display-panel > .button-row { gap: 8px; }
  .card-display-panel > .button-row .button { min-height: 44px; flex: 1 1 120px; }
  .card-activation { border-top: 3px solid #4288a6; }
  .card-activation h2 { font-size: 20px; letter-spacing: -.3px; line-height: 1.35; }
  .card-activation p { line-height: 1.7; }
  .card-activation-summary { margin: 20px 0 16px; padding: 4px 16px; border: 1px solid var(--line); border-radius: 10px; background: #f8fbfc; }
  .card-activation-summary .summary-line { padding: 11px 0; margin: 0; }
  .card-activation-summary .summary-line + .summary-line { border-top: 1px solid var(--line); }
  .card-activation-summary strong { font-variant-numeric: tabular-nums; }
  .card-activation-progress { height: 8px; margin: 16px 0 12px; }
  .card-activation-progress i { background: linear-gradient(90deg, #4288a6, #42aaa7); }
  .card-activation-actions { margin-top: 20px; align-items: stretch; }
  .card-activation-actions .button { min-height: 44px; white-space: normal; text-align: center; }
  .card-activation-actions button:disabled { opacity: 1; color: #5d707b; background: #e7eef2; border-color: #d9e3e9; }
  .card-activation .footnote { margin-top: 14px; }
  .cards-activation-layout { display: grid; gap: 22px; align-items: start; }
  .cards-activation-layout > * { min-width: 0; }
  .goal-top h3 { flex: 1 1 120px; }
  .goal-bottom > span { min-width: 0; max-width: 100%; overflow-wrap: anywhere; line-height: 1.6; }
  .client-panel .faq summary, .faq.client-panel summary { line-height: 1.7; overflow-wrap: anywhere; }

  @container client-panel (max-width: 620px) {
    .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .filters input { grid-column: 1 / -1; }
  }
  @container client-panel (max-width: 440px) {
    .client-list-row { grid-template-columns: minmax(0, 1fr); }
    .client-list-row > .button-row { justify-content: flex-start; }
    .client-list-row > .status-pill { justify-self: start; }
    .client-list-row > .button { justify-self: start; }
  }
  @container client-panel (max-width: 380px) {
    .card-art { padding: 20px; min-height: 285px; border-radius: 16px; }
    .card-topline { margin-bottom: 26px; gap: 8px; }
    .card-topline .card-brand { font-size: 15px; }
    .card-art .card-state-label { padding: 4px 7px; font-size: 9px; }
    .card-holder-name { font-size: 13px; }
    .card-activation-actions > .button { flex: 1 1 100%; }
    .card-activation-summary { padding-inline: 12px; }
    .card-foot { flex-wrap: wrap; }
    .filters { grid-template-columns: minmax(0, 1fr); }
    .client-panel:not(.loan-record) .summary-line { grid-template-columns: minmax(0, 1fr); }
    .client-panel:not(.loan-record) .summary-line strong { text-align: left; }
    #payment-form > .button, #loan-form > .button, #card-form > .button,
    #profile-form > .button, #preferences-form > .button, #ticket-form > .button { width: 100%; }
    #statement-form > .button-row { align-items: stretch; }
    #statement-form > .button-row > .button { flex: 1 1 100%; }
    .goal-bottom { flex-direction: column; gap: 4px; align-items: flex-start; }
    .client-panel .summary-box { padding: 16px; }
    .client-panel .loan-value { font-size: 27px; }
  }
  @container client-panel (max-width: 300px) {
    .client-list-row > .button-row { width: 100%; }
    .client-list-row > .button-row > .button { flex: 1 1 100%; }
    .goal-card .button-row > .button { flex: 1 1 100%; }
  }
  @container account-card (max-width: 300px) {
    .account-top { align-items: flex-start; }
    .account-label { flex-basis: 100%; }
    .account-foot { flex-direction: column; align-items: flex-start; gap: 4px; }
  }
  @container transaction-list (max-width: 440px) {
    .transaction { grid-template-columns: 32px minmax(0, 1fr); gap: 6px 10px; }
    .transaction .tx-icon { grid-row: 1 / 4; align-self: start; }
    .transaction time { display: block; grid-column: 2; font-size: 10px; }
    .transaction .tx-amount { grid-column: 2; text-align: left; max-width: none; }
  }
}

@media screen and (min-width: 981px) {
  .cards-activation-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-areas: "card activation" "controls activation" "activity activity";
    grid-template-rows: auto 1fr auto;
  }
  .cards-activation-layout > .card-activation { grid-area: activation; }
  .cards-activation-layout > .card-display-panel { grid-area: card; }
  .cards-activation-layout > .card-controls-preview { grid-area: controls; }
  .cards-activation-layout > .card-activity-panel { grid-area: activity; }
}

@media screen and (max-width: 730px) {
  .client-list-row p { font-size: 12px; }
  .client-panel .summary-line, .goal-bottom { font-size: 12px; }
  .client-panel .switch-row label { font-size: 12px; line-height: 1.5; }
  .client-panel .switch-row small { font-size: 11px; line-height: 1.6; }
  .client-panel .status-pill { font-size: 10px; line-height: 1.5; }
  .client-panel .footnote { font-size: 10px; }
  .card-number { font-size: clamp(15px, 4.6cqi, 22px); }
}