/* Layout for the rates app only. Colour, surfaces, typography and shell come from Shared. */
.rates-page{padding-block:var(--dk-space-5) 0}.rates-hero{margin-bottom:var(--dk-space-6)}
.app-hero-topline{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--dk-space-4)}
.rates-hero h1{display:flex;align-items:center;gap:var(--dk-space-2);margin:0;font-size:clamp(1.5rem,3vw,1.75rem);line-height:1.5;font-weight:700}
.rates-hero h1::before{content:"";width:5px;height:16px;flex-shrink:0;border-radius:var(--dk-radius-pill);background:var(--dk-color-primary)}
.rates-hero>p{max-width:64ch;margin:var(--dk-space-3) 0 0;color:var(--dk-color-text-soft);line-height:1.9;font-size:var(--dk-font-size-md)}
.back-link,.rates-doc-link{font-size:var(--dk-font-size-sm);font-weight:700;color:var(--dk-color-link);text-decoration:none}.back-link{white-space:nowrap;display:inline-flex;align-items:center;gap:.3rem;min-height:44px}.rates-doc-link{display:inline-flex;align-items:center;min-height:44px;margin-top:var(--dk-space-2)}.back-link:hover,.rates-doc-link:hover{text-decoration:underline}
.rate-panel{padding:0;overflow:hidden}.rate-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.25rem;border-bottom:1px solid var(--dk-color-border)}.rate-panel-heading h2{font-size:1rem;margin:0}.currency-pair{font-size:var(--dk-font-size-sm);color:var(--dk-color-muted)}
.rate-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.rate-item{padding:1.25rem}.rate-item+.rate-item{border-inline-start:1px solid var(--dk-color-border)}.rate-item h3{font-size:var(--dk-font-size-sm);color:var(--dk-color-muted);font-weight:400;margin:0 0 .4rem}.rate-value{display:flex;align-items:baseline;flex-wrap:wrap;gap:.4rem;margin:0 0 .5rem;font-weight:700;font-size:var(--dk-font-size-md)}.rate-value strong{font-size:inherit;font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}.rate-explanation{font-size:var(--dk-font-size-sm);color:var(--dk-color-muted);line-height:1.75;margin:0}
.rate-unit,.quote-timestamp{padding:.9rem 1.25rem;margin:0;border-top:1px solid var(--dk-color-border);font-size:var(--dk-font-size-sm);color:var(--dk-color-muted)}.quote-timestamp{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}.quote-timestamp time{font-variant-numeric:tabular-nums}
.quote-timestamp svg,.check-details>svg,.refresh-icon{width:1.1rem;height:1.1rem;flex-shrink:0;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.notice{font-size:var(--dk-font-size-sm);line-height:1.8;margin:0 1.25rem 1.25rem;padding:.75rem 1rem;background:var(--dk-color-surface-soft);border-inline-start:3px solid var(--dk-color-muted);border-radius:var(--dk-radius-md)}
.refresh-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:var(--dk-space-5)}.check-details{display:flex;align-items:flex-start;gap:.5rem;font-size:var(--dk-font-size-sm);color:var(--dk-color-muted)}.check-details>svg{margin-top:.2rem}.check-details p{margin:0 0 .4rem}.automatic-note{line-height:1.75}.refresh-row button{font-size:var(--dk-font-size-sm)}.fetch-status{color:var(--dk-color-muted);font-size:var(--dk-font-size-sm);margin:1rem 0 0}.fetch-status:empty{margin:0}
.source-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;padding-top:1.25rem;margin-top:var(--dk-space-5);border-top:1px solid var(--dk-color-border);font-size:var(--dk-font-size-sm)}.source-row p{margin:0}.app-note{font-size:var(--dk-font-size-sm);line-height:1.9;color:var(--dk-color-muted);margin:1rem 0 0}
.refreshing .refresh-icon{animation:rates-spin .8s linear infinite}@keyframes rates-spin{to{transform:rotate(360deg)}}
@media(max-width:620px){.rates-page{padding-top:var(--dk-space-4)}.rate-grid{grid-template-columns:1fr}.rate-item+.rate-item{border-inline-start:0;border-top:1px solid var(--dk-color-border)}.refresh-row{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.refreshing .refresh-icon{animation:none}}

/* Section rhythm and headings match the monthly salary app. */
.rates-page .rates-section{margin-top:var(--dk-space-7);scroll-margin-top:92px}
.rates-page .rates-section-heading{display:flex;align-items:center;gap:var(--dk-space-2);margin:0;font-size:clamp(1.35rem,3vw,1.7rem);line-height:1.45;font-weight:var(--dk-font-weight-bold)}
.rates-page .rates-section-heading::before{content:"";flex:0 0 auto;width:5px;height:16px;border-radius:var(--dk-radius-pill);background:var(--dk-color-primary)}
.rates-page .rate-panel{margin-top:var(--dk-space-4)}
.rates-page .rate-panel-heading{padding:.85rem 1.25rem;background:var(--dk-color-surface-soft)}
.rates-page .rate-item{padding:1.35rem}
.rates-page .rate-item h3{font-weight:var(--dk-font-weight-bold);color:var(--dk-color-text)}
.rates-page .rate-value{margin-block:.65rem;font-size:var(--dk-font-size-md)}
.rates-page .refresh-row{margin:0;padding:1.25rem;border-top:1px solid var(--dk-color-border)}
.rates-page .fetch-status:not(:empty){margin:0;padding:0 1.25rem 1.25rem}
.rates-page .rates-about>p{font-size:var(--dk-font-size-md);line-height:1.9;color:var(--dk-color-text-soft);margin:var(--dk-space-3) 0 0}
.rates-page .rates-about>p:has(a[hidden]){display:none}
.rates-page .rates-about a{color:var(--dk-color-link)}
@media(max-width:620px){.rates-page .rates-section{margin-top:var(--dk-space-6)}}