/* Halyard Bank — customer experience refresh
   Presentation-only layer: all API calls, routes, IDs and authentication
   behaviour remain in the existing page scripts. */

:root {
  --ink: #0b172a;
  --navy: #102a43;
  --navy-soft: #173d62;
  --brass: #d7a854;
  --brass-bright: #f3c86a;
  --paper: #f5f8fa;
  --fog: #eaf0f4;
  --fog-dark: #d8e2e8;
  --ok: #13795b;
  --danger: #c3423f;
  --text-muted: #5e6e7f;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --max-width: 1240px;
  --shadow-card: 0 2px 4px rgba(15, 45, 68, .03), 0 14px 36px rgba(15, 45, 68, .08);
  --shadow-raised: 0 16px 50px rgba(10, 37, 61, .16);
}

body.app {
  background:
    radial-gradient(circle at 88% -8%, rgba(71, 161, 169, .16), transparent 30rem),
    radial-gradient(circle at -10% 24%, rgba(215, 168, 84, .10), transparent 26rem),
    var(--paper);
}

.demo-banner {
  padding: 9px 16px;
  background: #f4c866;
  color: #352506;
  font-size: 12px;
  letter-spacing: .01em;
}

.app-header {
  background: rgba(8, 29, 47, .96);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 24px rgba(7, 27, 43, .12);
}

.app-header .container { height: 76px; gap: 38px; }

.brand { font-size: 1.38rem; letter-spacing: -.035em; }
.brand svg { width: 26px; height: 26px; color: var(--brass-bright); }

.app-nav {
  gap: 3px;
  padding: 5px;
  flex: 0 1 auto;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
}
.app-nav a {
  padding: 8px 13px;
  color: rgba(255,255,255,.7);
  border-radius: 9px;
  font-size: 12px;
  letter-spacing: .01em;
}
.app-nav a:hover { background: rgba(255,255,255,.11); }
.app-nav a[aria-current="page"] { background: var(--white); color: var(--navy); box-shadow: 0 2px 8px rgba(0,0,0,.12); }

.app-user { margin-left: auto; gap: 11px; color: rgba(255,255,255,.78); }
.app-user .avatar { width: 36px; height: 36px; background: linear-gradient(145deg, #f5d682, #c99136); border: 2px solid rgba(255,255,255,.15); }
.app-user .btn { border-radius: 9px; }

.app-main { padding-top: 48px; }
.page-head { margin-bottom: 32px; align-items: end; }
.page-head h1 { font-size: clamp(2.1rem, 4vw, 3.25rem); letter-spacing: -.055em; color: var(--ink); }
.page-head .sub { max-width: 650px; margin: 8px 0 0; line-height: 1.6; }

.btn {
  border-radius: 10px;
  padding: 12px 18px;
  box-shadow: 0 1px 1px rgba(15,45,68,.05);
}
.btn-primary { background: linear-gradient(135deg, #0d3759, #155b76); box-shadow: 0 8px 18px rgba(13,55,89,.20); }
.btn-primary:hover { background: linear-gradient(135deg, #0b2c49, #104c65); transform: translateY(-1px); }
.btn-brass { background: linear-gradient(135deg, #e7b95d, #cc963d); }
.btn-ghost { border-color: #cdd9e0; background: rgba(255,255,255,.72); color: var(--navy); }
.btn-ghost:hover { background: var(--white); border-color: #a8bdc9; }

.card {
  border: 1px solid rgba(206, 220, 228, .9);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.summary-strip { gap: 20px; margin-bottom: 32px; }
.summary-tile { position: relative; min-height: 148px; padding: 25px 26px; overflow: hidden; }
.summary-tile::after { content: ''; position: absolute; width: 150px; height: 150px; border: 1px solid rgba(34,103,123,.13); border-radius: 50%; right: -52px; bottom: -82px; }
.summary-tile:nth-child(1) { color: var(--white); border-color: #123e5d; background: linear-gradient(135deg, #0d3556 0%, #125c75 100%); }
.summary-tile:nth-child(1) .label, .summary-tile:nth-child(1) .value, .summary-tile:nth-child(1) .delta { color: inherit; }
.summary-tile:nth-child(1) .delta { color: #a8e0ce; }
.summary-tile:nth-child(2) { background: linear-gradient(145deg, #fff 0%, #f6fbfc 100%); }
.summary-tile:nth-child(3) { background: linear-gradient(145deg, #fffdf7 0%, #fff7e4 100%); }
.summary-tile .label { position: relative; z-index: 1; font-size: 12px; text-transform: uppercase; letter-spacing: .075em; }
.summary-tile .value { position: relative; z-index: 1; margin-top: 9px; font-size: clamp(1.55rem, 2.5vw, 2rem); letter-spacing: -.06em; }
.summary-tile .delta { position: relative; z-index: 1; margin-top: 11px; }

.grid-2 { grid-template-columns: minmax(0, 1.8fr) minmax(280px, .9fr); gap: 22px; }
.card-head { padding: 20px 24px; background: linear-gradient(180deg, #fff, #fbfdfe); }
.card-head h2 { font-size: 1.1rem; letter-spacing: -.025em; }
.card-head a { color: #14506c; padding: 7px 10px; border-radius: 8px; background: #edf5f7; }
.card-head a:hover { text-decoration: none; background: #deedf1; }

.account-row { position: relative; padding: 19px 24px; }
.account-row:hover { background: #f4fafb; }
.account-row .a-name { display: flex; align-items: center; gap: 10px; }
.account-row .a-name::before { content: ''; width: 10px; height: 10px; border: 3px solid #63acb5; border-radius: 50%; box-shadow: 0 0 0 4px #eaf6f7; }
.account-row .a-meta { margin-left: 20px; }
.account-row .a-balance { letter-spacing: -.035em; color: #113b5b; }

table.txns { font-size: 13px; }
table.txns th { padding: 14px 24px; background: #f5f8fa; font-size: 11px; text-transform: uppercase; letter-spacing: .065em; }
table.txns td { padding: 17px 24px; border-bottom-color: #edf1f3; }
table.txns tbody tr { transition: background var(--transition); }
table.txns tbody tr:hover { background: #f8fbfc; }
table.txns .t-amount { letter-spacing: -.025em; }
.amt-in { color: #087455; }
.badge { padding: 5px 9px; font-size: 11px; }
.badge-ok { background: #e3f5ed; color: #087455; }
.badge-pending { background: #fff1d7; color: #8a5c18; }

.route-nav { padding: 23px; background: linear-gradient(150deg, #123e5d, #0b243a); color: var(--white); }
.route-nav h2 { margin-bottom: 12px; color: var(--white); }
.route-item { margin: 4px -7px; padding: 12px 9px; color: rgba(255,255,255,.9); border-radius: 9px; }
.route-item:hover { background: rgba(255,255,255,.10); }
.route-item .dot { width: 9px; height: 9px; background: var(--brass-bright); box-shadow: 0 0 0 4px rgba(243,200,106,.14); }

.field { gap: 7px; }
.field label { font-size: 12px; letter-spacing: .02em; }
.field input, .field select { padding: 13px 14px; border-color: #cbd9e1; border-radius: 10px; background: #fbfdfe; }
.field input:hover, .field select:hover { border-color: #9bb7c5; }
.field input:focus, .field select:focus { border-color: #25708c; box-shadow: 0 0 0 4px rgba(37,112,140,.12); }
.alert { border-radius: 12px; }

.progress-line { max-width: 510px; margin: 8px 0 34px; }
.progress-line .p-dot { width: 17px; height: 17px; border-width: 4px; background: #fff; border-color: #d8e4e9; }
.progress-line .p-step.done .p-dot, .progress-line .p-step.active .p-dot { background: var(--brass); border-color: #fff; box-shadow: 0 0 0 3px var(--brass); }
.progress-line .p-step::after { top: 8px; height: 3px; background: #d8e4e9; }
.progress-line .p-step.done::after { background: var(--brass); }
.progress-line .p-label { margin-top: 4px; font-size: 11px; }

.transfer-card { box-shadow: var(--shadow-raised); }
.mode-tabs { padding: 4px; background: #edf3f5; border-radius: 12px; }
.mode-tabs button { border: 0; border-radius: 8px; background: transparent; }
.mode-tabs button.active { background: var(--white); color: var(--navy); box-shadow: 0 3px 10px rgba(15,45,68,.10); }
.success-view .check { background: #def4e9; }

.acct-card { box-shadow: var(--shadow-card); }
.acct-detail-grid { padding: 23px 24px; background: linear-gradient(90deg, #f9fcfc, #f2f8f9); }
.acct-detail-grid > div { padding: 10px 12px; border-left: 2px solid #d2e4e8; }
.acct-detail-grid .d-value { color: #153f5e; letter-spacing: -.03em; }
.filters { background: #f8fbfc; }

.app-footer { padding: 34px 24px; color: #70808e; }

/* Login, using the same polished material language as the account area. */
body:has(.auth-wrap) {
  background: radial-gradient(circle at 13% 15%, rgba(215,168,84,.20), transparent 24rem), radial-gradient(circle at 92% 95%, rgba(54,135,149,.20), transparent 28rem), #edf4f6;
}
.auth-header { max-width: 1240px; width: 100%; margin: 0 auto; padding: 30px 24px; }
.auth-header .brand svg { color: #bd852d; }
.auth-wrap { position: relative; padding: 48px 24px 76px; }
.auth-wrap::before { content: ''; position: absolute; width: min(80vw, 760px); height: min(80vw, 760px); border: 1px solid rgba(17,74,94,.12); border-radius: 50%; left: 50%; top: 45%; transform: translate(-50%, -50%); pointer-events: none; }
.auth-card { position: relative; max-width: 456px; padding: 42px 40px; border-radius: 24px; box-shadow: 0 24px 70px rgba(15,56,75,.17); }
.auth-card::before { content: 'Secure online banking'; display: block; margin: -4px 0 14px; color: #a16d22; font-family: var(--font-mono); text-transform: uppercase; font-size: 10px; font-weight: 700; letter-spacing: .13em; }
.auth-card h1 { font-size: 2.15rem; letter-spacing: -.055em; }
.demo-hint { border: 1px solid #d7e8ec; border-left: 3px solid #4a98a3; background: #f1f9fa; border-radius: 12px; line-height: 1.65; }

@media (max-width: 860px) {
  .app-header .container { height: 68px; gap: 12px; }
  .app-user > span, .app-user > .btn { display: none; }
  .nav-toggle { margin-left: auto; }
  .app-nav { display: none; position: absolute; top: calc(100% + 8px); left: 16px; right: 16px; padding: 8px; flex-direction: column; background: #0d2e48; box-shadow: var(--shadow-raised); }
  .app-nav.is-open { display: flex; }
  .app-nav a { padding: 11px 13px; }
  .app-main { padding: 32px 16px 60px; }
  .page-head h1 { font-size: 2.2rem; }
  .summary-strip { gap: 14px; }
  .summary-tile { min-height: 128px; }
  table.txns th, table.txns td { padding-left: 16px; padding-right: 16px; }
  .auth-card { padding: 34px 24px; }
}

@media (max-width: 560px) {
  .demo-banner { font-size: 10px; }
  .brand { font-size: 1.24rem; }
  .app-user .avatar { width: 32px; height: 32px; }
  .page-head { align-items: stretch; }
  .page-head .btn { width: 100%; }
  .acct-detail-grid { grid-template-columns: 1fr; }
  .filters .field { min-width: 100%; }
}