/* Coutts Experience — October 2026. Native motion, no remote dependencies. */
:root { --motion-duration: 580ms; }
.screen-shell { gap: 26px; }
.screen-header h1 { letter-spacing: -.04em; }
.balance-block { position: relative; isolation: isolate; padding: 26px 0 8px; }
.balance-block::before { content: ''; position: absolute; z-index: -1; inset: -18px -22px; border-radius: 50%; background: radial-gradient(ellipse at 65% 40%, #bc924018, transparent 68%); pointer-events: none; }
.balance-value { letter-spacing: -.055em; }
.bank-card { isolation: isolate; transform-style: preserve-3d; transition: transform 380ms var(--ease), filter 380ms; }
.bank-card::after { content: ''; position: absolute; z-index: 2; inset: 0; border-radius: inherit; background: linear-gradient(112deg, transparent 25%, #fff9 48%, transparent 66%); opacity: .10; transform: translateX(-115%); pointer-events: none; }
.bank-card > * { position: relative; z-index: 1; }
.bank-card--black { background: radial-gradient(ellipse at 0 0, #66593944, transparent 60%), repeating-linear-gradient(135deg, #ffffff04 0 1px, transparent 1px 5px), #141416; }
.app-screen.is-active .bank-card::after { animation: coutts-card-light 1.8s var(--ease) .2s both; }
@keyframes coutts-card-light { to { transform: translateX(115%); } }
.splash-ornament { box-shadow: 0 0 70px #d5b66f12, inset 0 0 50px #d5b66f08; }
.splash-ribbons { position: absolute; inset: 0; width: 100%; height: 100%; color: #d5b66f; opacity: .28; pointer-events: none; }
.splash-ribbons path { stroke-width: .7; stroke-dasharray: 1; animation: coutts-draw 1.4s var(--ease) both; }
.splash-ribbons path:nth-child(2n) { animation-delay: .12s; opacity: .5; }
.splash-brand { animation: coutts-brand 1.1s var(--ease) both; }
@keyframes coutts-brand { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.splash-ornament::before { content: ''; position: absolute; inset: -24px; border: 1px solid #d5b66f22; border-top-color: #d5b66faa; border-radius: 50%; animation: coutts-orbit 3s linear infinite; }
.splash-ornament::after { content: ''; position: absolute; inset: 28px; border: 1px solid #d5b66f20; border-bottom-color: #d5b66f99; border-radius: 50%; animation: coutts-orbit 5s linear reverse infinite; }
@keyframes coutts-orbit { to { transform: rotate(360deg); } }
.lock-emblem { box-shadow: 0 0 48px #d5b66f10; }
.app-navigation { backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); background: #0b0c0deb; }
.app-navigation button { transition: color 220ms, transform 220ms; }
.app-navigation button:active, .quick-action:active { transform: scale(.93); }
.chart-line { stroke-dasharray: 1; stroke-dashoffset: 0; }
.app-screen.is-active .chart-line { animation: coutts-draw 1.3s var(--ease) both; }
@keyframes coutts-draw { from { stroke-dashoffset: 1; } }
.chart-point { fill: var(--ink); stroke: var(--gold); stroke-width: 2; }
.chart-axis { display: flex; justify-content: space-between; font-size: 10px; color: var(--stone); margin-top: 8px; }
.chart-inspect { margin-top: 16px; }
.chart-inspect input { width: 100%; accent-color: var(--gold); min-height: 28px; }
.chart-inspect output { display: block; min-height: 22px; text-align: center; color: var(--ivory-soft); font-size: 12px; }
.insight-card { position: relative; overflow: hidden; width: 100%; padding: 22px; border: 1px solid #d5b66f30; border-radius: 24px; color: var(--ivory); background: radial-gradient(ellipse at 110% -10%, #a9843740, transparent 65%), #151511; text-align: left; cursor: pointer; }
.insight-card .eyebrow { color: var(--gold); }
.insight-card h2 { max-width: 230px; margin: 8px 0 6px; font-size: 22px; font-weight: 450; letter-spacing: -.025em; }
.insight-card .insight-caption { display: block; max-width: 210px; font-size: 12px; color: var(--stone); }
.insight-orbit { position: absolute; width: 106px; height: 106px; right: -32px; top: 20px; border: 1px solid #d5b66f55; border-radius: 50%; box-shadow: 0 0 0 15px #d5b66f0c, 0 0 0 30px #d5b66f07; }
.insight-orbit::after { content: ''; position: absolute; width: 8px; height: 8px; top: 9px; left: 16px; background: var(--gold); border-radius: 50%; box-shadow: 0 0 18px #d5b66f66; }
.app-screen.is-active .insight-orbit { animation: coutts-orbit 18s linear 1; }
.insight-link { display: flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--gold); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.insight-link svg { width: 14px; height: 14px; }
.metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.metric-tile { border: 1px solid var(--hairline); background: #ffffff03; padding: 16px; border-radius: 18px; min-width: 0; }
.metric-tile small { display: block; color: var(--stone); font-size: 11px; }
.metric-tile strong { display: block; margin-top: 7px; font-size: clamp(17px, 5vw, 23px); font-weight: 450; overflow-wrap: anywhere; }
.search-wrap { position: relative; }
.search-wrap input { width: 100%; padding: 14px 15px 14px 42px; color: var(--ivory); border: 1px solid var(--hairline-strong); border-radius: 16px; background: var(--surface); font: inherit; font-size: 16px; }
.search-wrap svg { position: absolute; left: 14px; top: 16px; width: 18px; height: 18px; color: var(--stone); }
.filter-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-chip { padding: 9px 16px; min-height: 44px; border: 1px solid var(--hairline); border-radius: 24px; background: transparent; color: var(--stone); font-size: 12px; cursor: pointer; }
.filter-chip[aria-pressed='true'] { background: var(--gold-wash); color: var(--gold); border-color: #d5b66f66; }
.activity-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.activity-toolbar p { margin: 0; color: var(--stone); font-size: 12px; }
.goal-ring { width: 132px; height: 132px; position: relative; margin: 12px auto 20px; }
.goal-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.goal-ring circle { fill: none; stroke: #ffffff0d; stroke-width: 5; }
.goal-ring circle:last-child { stroke: var(--gold); stroke-linecap: round; transition: stroke-dashoffset 700ms var(--ease); }
.goal-ring strong { position: absolute; inset: 0; display: grid; place-content: center; font-size: 28px; font-weight: 400; }
.notification-status { display: flex; gap: 10px; align-items: center; padding: 12px 15px; border: 1px solid var(--hairline); border-radius: 14px; color: var(--stone); font-size: 12px; }
.connection-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--jade); flex: 0 0 auto; }
.connection-dot.is-offline { background: var(--amber); }
.app-status-strip { display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 10px; color: var(--stone); letter-spacing: .08em; }
.receipt-header .success-mark svg { stroke-dasharray: 80; animation: coutts-confirm .7s ease both; }
@keyframes coutts-confirm { from { stroke-dashoffset: 80; transform: scale(.7); opacity: 0; } to { stroke-dashoffset: 0; transform: scale(1); opacity: 1; } }
.sheet-panel { overscroll-behavior: contain; }
.account-backup { border-top: 1px solid var(--hairline); margin-top: 24px; padding-top: 18px; }
.account-backup summary { cursor: pointer; color: var(--stone); font-size: 12px; padding: 10px 0; }
.account-backup .field { margin: 18px 0 0; }
.account-backup input[type='file'] { max-width: 100%; font-size: 12px; }
.screen-shell > *, .sheet-body > * { min-width: 0; }
.metric-tile, .insight-card, .menu-title, .balance-caption { overflow-wrap: anywhere; }
@media (display-mode: standalone) and (min-width: 600px) { body.coutts-prototype-page { padding: 0; } .prototype-shell { height: 100dvh; border: 0; border-radius: 0; } .prototype-shell::after { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
html[data-motion='reduced'] *, html[data-motion='reduced'] *::before, html[data-motion='reduced'] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html[data-app-hidden='true'] * { animation-play-state: paused !important; }