/* Client app presentation. Desktop, administrator and shared reports keep their own layout. */
@media screen and (max-width: 760px) {
  body.customer-app {
    --bg: #f3f8f5; --surface: #fff; --surface-2: #edf5f0;
    --fg: #173d30; --muted: #61796d; --line: #e0ebe4;
    --accent: #0b7657; --accent-deep: #075c43; --accent-soft: #e0f3e8;
    min-height: 100svh; background: var(--bg); color: var(--fg);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 15px; -webkit-font-smoothing: antialiased;
  }
  body.customer-app .page-shell {
    width: 100%; padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px));
  }
  body.customer-app .bar {
    min-height: 76px; padding-block: max(12px, env(safe-area-inset-top, 0px)) 12px;
    gap: 10px; border-bottom: 1px solid var(--line); flex-wrap: wrap;
  }
  body.customer-app .bar .brand { font-size: 23px; letter-spacing: -.7px; min-height: 44px; }
  body.customer-app .bar-right { gap: 8px; margin-left: auto; }
  body.customer-app .session-tag { font-size: 11px; max-width: 110px; line-height: 1.4; }
  body.customer-app:has(#report:not([hidden])) .session-tag { display: none; }
  body.customer-app .bar-right .button { min-width: 44px; min-height: 44px; border-radius: 13px; padding: 10px 13px; font-size: 12px; }
  body.customer-app .language-switch a { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; }
  body.customer-app .button { min-height: 48px; border-radius: 15px; font-size: 14px; }
  body.customer-app input, body.customer-app select { font-size: 16px; }
  body.customer-app .button:active { transform: translateY(1px); }
  body.customer-app .hint, body.customer-app .muted { color: var(--muted); }
  body.customer-app .footer { padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)); font-size: 11px; gap: 10px; }
  body.customer-app #footer-session { font-size: 11px; line-height: 1.65; }
  body.customer-app:has(#report:not([hidden])) .footer { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
  body.customer-app .toast { bottom: calc(94px + env(safe-area-inset-bottom, 0px)); font-size: 13px; }

  /* A short, comfortable entry screen; all authentication still uses the official mygov flow. */
  body.customer-app .landing { display: block; padding: 35px 0 30px; }
  body.customer-app .landing-copy h1 { font-family: inherit; font-size: clamp(30px, 8.8vw, 39px); line-height: 1.16; letter-spacing: -1.1px; margin: 18px 0; }
  body.customer-app .landing-description { font-size: 14px; line-height: 1.7; max-width: 40ch; }
  body.customer-app .eyebrow { font-size: 10px; letter-spacing: 1.2px; }
  body.customer-app .login-panel { padding: 22px 20px; margin-top: 26px; border-radius: 24px; border-color: var(--line); box-shadow: 0 12px 36px -24px #143d3066; }
  body.customer-app .login-intro { align-items: flex-start; gap: 12px; }
  body.customer-app .login-intro h2 { font-size: 16px; line-height: 1.4; }
  body.customer-app .login-intro p { font-size: 12px; line-height: 1.6; margin-top: 5px; }
  body.customer-app .lock-icon { flex: 0 0 40px; height: 40px; background: var(--accent-soft); border-radius: 14px; }
  body.customer-app .provider-button { min-height: 60px; border-radius: 17px; font-size: 14px; gap: 12px; box-shadow: 0 12px 24px -16px #0b765766; }
  body.customer-app .provider-word { min-width: 57px; font-size: 22px; }
  body.customer-app .consent { font-size: 11px; line-height: 1.7; margin-top: 17px; }
  body.customer-app .trust-row { font-size: 11px; gap: 10px 15px; margin-top: 22px; }
  body.customer-app .landing-visual { display: none; }
  body.customer-app .connection { margin: 28px 0 35px; }
  body.customer-app .connection-heading { gap: 12px; align-items: flex-start; }
  body.customer-app .connection-heading h1 { font-size: 27px; line-height: 1.25; }
  body.customer-app .connection-heading .muted { font-size: 13px; }
  body.customer-app .steps { gap: 8px; margin: 22px 0; }
  body.customer-app .step { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; }
  body.customer-app .step strong { font-size: 11px; line-height: 1.4; }
  body.customer-app .step div > span { font-size: 10px; }
  body.customer-app .step-number { width: 28px; height: 28px; font-size: 11px; }
  body.customer-app .panel { padding: 22px 18px; border-radius: 22px; border-color: var(--line); }
  body.customer-app .panel h2 { font-size: 18px; line-height: 1.4; }
  body.customer-app .panel .hint { font-size: 13px; line-height: 1.65; }
  body.customer-app .loading-state { padding-block: 54px; }
  body.customer-app .auth-panel .panel-header { margin-bottom: 18px; }
  body.customer-app .auth-link-actions { width: 100%; display: flex; flex-direction: column; gap: 10px; }
  body.customer-app .auth-link-actions > .button, body.customer-app .auth-link-actions > .app-link-status { width: 100%; padding-inline: 14px; }
  body.customer-app #mygov-app-link { min-height: 56px; font-size: 14px; }
  body.customer-app #refresh-qr { min-height: 44px; font-size: 13px; background: var(--surface-2); }
  body.customer-app .mygov-app-link-wrap { margin-top: 20px; gap: 14px; }
  body.customer-app .app-link-status { font-size: 13px; }
  body.customer-app .auth-screen-wrap { width: min(100%, 272px); min-height: 240px; padding: 10px; border: 1px solid var(--line); border-radius: 22px; }
  body.customer-app .auth-screen-wrap img { width: 250px; border: 0; }
  body.customer-app .auth-screen-wrap .screen-placeholder { min-height: 220px; font-size: 13px; }
  body.customer-app .qr-caption { font-size: 12px; line-height: 1.65; }
  body.customer-app .error-state { padding: 30px 22px; margin-block: 35px; border-radius: 24px; }
  body.customer-app .error-actions { flex-direction: column; }
  body.customer-app .error-actions .button { width: 100%; }

  body.customer-app #report {
    --fg: #173d30; --muted: #61796d; --accent: #0b7657; --accent-deep: #075c43;
    --accent-soft: #e0f3e8; --surface-2: #edf5f0; --line: #e0ebe4;
    gap: 18px; padding: 24px 0 24px;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  }
  body.customer-app #report .report-heading { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
  body.customer-app #report .report-heading > div:first-child { min-width: 0; }
  body.customer-app #report .report-heading > div:first-child:has(.profile-photo:not([hidden])) { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 3px 14px; align-items: center; }
  body.customer-app #report .report-heading > div:first-child:has(.profile-photo:not([hidden])) > :not(.profile-photo) { grid-column: 2; }
  body.customer-app #report .profile-photo { grid-column: 1; grid-row: 1 / 4; float: none; width: 60px; height: 68px; margin: 0; border-radius: 18px; object-fit: cover; border: 2px solid white; box-shadow: 0 2px 12px #173d3010; }
  body.customer-app #report #who-name { font-size: 22px; line-height: 1.28; margin: 3px 0; font-weight: 750; letter-spacing: -.6px; }
  body.customer-app #report .report-heading .eyebrow { font-size: 9px; letter-spacing: .9px; }
  body.customer-app #report #who-meta { font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
  body.customer-app #report .report-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
  body.customer-app #report .report-actions .button { font-size: 12px; padding: 12px 9px; min-height: 48px; }
  body.customer-app #report .report-actions .new-report-button { grid-column: 1 / -1; font-size: 14px; font-weight: 700; min-height: 50px; }
  body.customer-app #report .report-actions .new-report-note { grid-column: 1 / -1; font-size: 12px; margin: -2px 2px 0; }
  body.customer-app #report .report-workspace { display: block; }
  body.customer-app #report .report-navigation { display: none; }
  body.customer-app #report .panel { padding: 22px 18px; border-radius: 22px; }
  body.customer-app #report .panel h2 { font-size: 18px; line-height: 1.4; letter-spacing: -.35px; }
  body.customer-app #report .panel-header { gap: 12px; margin-bottom: 20px; }
  body.customer-app #report .hint { font-size: 13px; }
  body.customer-app #report .historical-banner { border-radius: 18px; padding: 16px; }
  body.customer-app #report .historical-banner strong { font-size: 13px; }
  body.customer-app #report .historical-banner p { font-size: 12px; }
  body.customer-app #report .report-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }

  /* Preserve each original currency. Every amount is a separate row, including missing currency. */
  body.customer-app #report .debt-panel { position: relative; overflow: hidden; isolation: isolate; padding: 24px 21px; background: #0c4437; color: #f1fff8; border: 1px solid #154e40; border-radius: 26px; box-shadow: 0 16px 30px -22px #123b30aa; }
  body.customer-app #report .debt-panel::before { content: ""; position: absolute; z-index: -1; width: 280px; height: 280px; right: -130px; top: -130px; border-radius: 50%; background: radial-gradient(circle, #54d99c3d, transparent 70%); }
  body.customer-app #report .debt-panel > .hint { color: #c0e6d5; font-size: 13px; line-height: 1.6; max-width: 28ch; }
  body.customer-app #report #debt { font-size: clamp(29px, 8.7vw, 38px); font-weight: 750; line-height: 1.3; letter-spacing: -1px; margin: 13px 0 10px; }
  body.customer-app #report #debt > div { display: flex; flex-wrap: wrap; gap: 3px 8px; align-items: baseline; overflow-wrap: anywhere; }
  body.customer-app #report #debt > div + div { margin-top: 7px; }
  body.customer-app #report #debt small { font-size: 13px; font-weight: 500; letter-spacing: 0; color: #b3dfcb; overflow-wrap: anywhere; }
  body.customer-app #report #balance-note { color: #b9daca; font-size: 11px; line-height: 1.7; }
  body.customer-app #report .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 19px 16px; border-color: #ffffff24; padding-top: 20px; margin-top: 20px; }
  body.customer-app #report .stats > div { min-width: 0; }
  body.customer-app #report .stats dt { color: #b4d8c7; font-size: 11px; line-height: 1.55; }
  body.customer-app #report .stats dd { color: #f1fff8; font-size: 22px; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
  body.customer-app #report .stats dd > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 5px; }
  body.customer-app #report .stats dd small { color: #b4d8c7; font-size: 11px; font-weight: 400; margin: 0; line-height: 1.5; }
  body.customer-app #report .gauge { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 6px 14px; align-items: center; text-align: left; }
  body.customer-app #report .gauge svg { width: 108px; grid-column: 1; grid-row: 1 / 3; margin: 0; }
  body.customer-app #report .gauge h2 { grid-column: 2; font-size: 14px; line-height: 1.45; }
  body.customer-app #report .gauge .verdict { grid-column: 2; font-size: 12px; line-height: 1.5; }
  body.customer-app #report .gauge .note, body.customer-app #report .gauge .method { grid-column: 1 / -1; max-width: none; font-size: 12px; line-height: 1.65; margin-top: 8px; }
  body.customer-app #report .gauge .method { font-size: 11px; margin-top: 2px; }
  body.customer-app #report .alert { padding: 16px; border-radius: 18px; }
  body.customer-app #report .warning, body.customer-app #report .alert p { font-size: 12px; }
  body.customer-app #report .alert strong { font-size: 13px; }

  body.customer-app #report .controls { gap: 12px; }
  body.customer-app #report .seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; width: 100%; overflow: visible; padding: 5px; border-radius: 16px; }
  body.customer-app #report .seg button { font-size: 12px; min-height: 44px; padding: 9px 5px; border-radius: 11px; white-space: normal; }
  body.customer-app #report .search { min-height: 48px; font-size: 16px; border-radius: 15px; }
  body.customer-app #report .obligations { margin-top: 20px; }
  body.customer-app #report .obligation { border-radius: 18px; background: var(--surface); }
  body.customer-app #report .obligation[data-state="active"] { background: #f7fbf8; }
  body.customer-app #report .obligation summary { padding: 18px 15px; grid-template-columns: minmax(0, 1fr) 24px; gap: 12px; }
  body.customer-app #report .obligation-title strong { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
  body.customer-app #report .obligation-title > span { font-size: 12px; line-height: 1.65; }
  body.customer-app #report .obligation-chevron { grid-column: 2; grid-row: 1; }
  body.customer-app #report .obligation-balance { grid-row: 2; grid-column: 1 / -1; white-space: normal; overflow-wrap: anywhere; font-size: 19px; text-align: left; }
  body.customer-app #report .obligation-balance small { font-size: 11px; }
  body.customer-app #report .obligation-body { padding: 2px 15px 20px; }
  body.customer-app #report .pill { font-size: 10px; border-radius: 7px; padding: 4px 8px; }
  body.customer-app #report .kv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 20px; }
  body.customer-app #report .kv dt { font-size: 12px; line-height: 1.5; margin-bottom: 4px; }
  body.customer-app #report .kv dd { font-size: 14px; line-height: 1.65; }
  body.customer-app #report .identity-panel summary { min-height: 44px; }
  body.customer-app #report .heat { min-width: 950px; }
  body.customer-app #report .heat th { font-size: 11px; }
  body.customer-app #report .heat .row-heading { min-width: 168px; font-size: 12px; }
  body.customer-app #report .heat-cell { height: 34px; min-width: 28px; }
  body.customer-app #report .legend { font-size: 11px; line-height: 1.6; }
  body.customer-app #report .lender-row { grid-template-columns: minmax(0, 1fr) 68px; gap: 8px 12px; }
  body.customer-app #report .lender-row progress { grid-column: 1 / -1; }
  body.customer-app #report .lender-name { font-size: 14px; }
  body.customer-app #report .report-foot { font-size: 11px; line-height: 1.75; }

  body.customer-app #report .history-list { max-height: none; overflow: visible; gap: 12px; }
  body.customer-app #report .history-actions { width: 100%; }
  body.customer-app #report .history-actions .button { min-height: 44px; font-size: 12px; }
  body.customer-app #report .request-history-day { font-size: 14px; font-weight: 650; line-height: 1.6; color: var(--muted); margin: 12px 3px 2px; }
  body.customer-app #report .request-history-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 9px 12px; align-items: center; width: 100%; min-height: 94px; padding: 16px 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--fg); text-align: left; font: inherit; }
  body.customer-app #report .request-history-row[aria-pressed="true"] { background: var(--accent-soft); border-color: #94c8ae; box-shadow: inset 3px 0 var(--accent); }
  body.customer-app #report .request-history-icon { display: grid; place-items: center; width: 38px; height: 38px; color: var(--accent); background: var(--surface-2); border-radius: 13px; }
  body.customer-app #report .request-history-icon svg { width: 19px; height: 19px; }
  body.customer-app #report .request-history-main { min-width: 0; }
  body.customer-app #report .request-history-date { display: block; font-size: 15px; line-height: 1.55; font-weight: 650; }
  body.customer-app #report .request-history-number { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; overflow-wrap: anywhere; }
  body.customer-app #report .request-history-status { display: inline-flex; padding: 4px 8px; border-radius: 7px; font-size: 11px; font-weight: 600; line-height: 1.5; margin-top: 7px; color: #577465; background: #edf3ee; }
  body.customer-app #report .request-history-status.is-changed { background: #e4f2e9; color: #13714c; }
  body.customer-app #report .request-history-status.is-legacy { background: #fff3d9; color: #85621c; }
  body.customer-app #report .request-history-indicator { font-size: 10px; font-weight: 650; color: var(--accent); max-width: 45px; overflow-wrap: anywhere; }
  body.customer-app #report .request-history-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; }
  body.customer-app #report .request-history-pagination .button { min-width: 44px; min-height: 44px; font-size: 12px; padding-inline: 12px; }
  body.customer-app #report #history-page { font-size: 12px; color: var(--muted); }
  body.customer-app #report .report-mobile-lenders, body.customer-app #report .report-mobile-back { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 14px 16px; margin-top: 16px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); color: var(--accent); font: inherit; font-size: 14px; font-weight: 600; }

  body.customer-app #report .share-panel .panel-header { align-items: flex-start; }
  body.customer-app #report .share-panel .panel-header > div { flex: 1 1 175px; }
  body.customer-app #report .share-controls { align-items: stretch; gap: 10px; }
  body.customer-app #report .share-controls label { width: 100%; font-size: 13px; }
  body.customer-app #report .share-controls select { flex: 1; min-height: 48px; min-width: 0; font-size: 16px; }
  body.customer-app #report .share-controls .button { flex: 1 1 auto; font-size: 13px; }
  body.customer-app #report #share-url { font-size: 16px; min-height: 48px; border-radius: 14px; }

  /* Mounted inside the report so hiding or clearing that report also hides the navigation. */
  body.customer-app #report .report-mobile-navigation { position: fixed; z-index: 20; inset: auto 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 8px max(8px, env(safe-area-inset-left, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-right, 0px)); border-top: 1px solid #dbe8df; background: #fafffcf5; box-shadow: 0 -8px 28px -18px #153d304d; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
  body.customer-app #report .report-mobile-navigation button { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; min-width: 0; min-height: 56px; padding: 7px 2px; border: 0; border-radius: 14px; background: transparent; color: #6c8277; font: inherit; font-size: 10px; line-height: 1.25; font-weight: 600; letter-spacing: -.1px; overflow-wrap: anywhere; }
  body.customer-app #report .report-mobile-navigation button[aria-selected="true"] { color: #076547; background: #dff3e7; font-weight: 750; }
  body.customer-app #report .report-mobile-navigation svg { flex: 0 0 22px; width: 22px; height: 22px; }
  body.customer-app #report .report-mobile-navigation button:focus-visible { outline-offset: -2px; }
}

@media print {
  body.customer-app .report-mobile-navigation, body.customer-app .report-mobile-lenders, body.customer-app .report-mobile-back { display: none !important; }
}