/* base.css */

* {box-sizing:border-box}
html, body {margin:0; padding:0}
html {touch-action:manipulation}
body {font-family:var(--BaseFont); font-size:var(--Base); line-height:var(--BaseLine); font-weight:var(--Regular); color:var(--TextPrimary)}

/* 🟢 Typography*/
h1 {font-size:var(--Title); line-height:var(--TitleLine); font-weight:var(--SemiBold); letter-spacing:-0.03em}
h2 {font-size:var(--Subtitle); line-height:var(--SubtitleLine); font-weight:var(--SemiBold); letter-spacing:-0.02em}
h3 {font-size:var(--Headline); line-height:var(--HeadlineLine); font-weight:var(--SemiBold); letter-spacing:-0.02em}
h4 {font-size:var(--Large); line-height:var(--LargeLine); font-weight:var(--Medium)}
p {font-size:var(--Base); line-height:var(--BaseLine); font-weight:var(--Regular)}
.hero-title {font-size:var(--HeroTitle); line-height:var(--HeroTitleLine); font-weight:var(--SemiBold); letter-spacing:-0.03em}
.title {font-size:var(--Title); line-height:var(--TitleLine)}
.subtitle {font-size:var(--Subtitle); line-height:var(--SubtitleLine)}
.headline {font-size:var(--Headline); line-height:var(--HeadlineLine)}
.large {font-size:var(--Large); line-height:var(--LargeLine)}
.base {font-size:var(--Base); line-height:var(--BaseLine)}
.small, .disclaimer {font-size:var(--Small); line-height:var(--SmallLine)}
.regular {font-weight:var(--Regular)}
.medium {font-weight:var(--Medium)}
.semibold {font-weight:var(--SemiBold)}
.bold {font-weight:var(--Bold)}
.disclaimer {text-align:center; color:var(--TextTertiary)}

/*🟢 Colors*/
.gray {color:var(--TextSecondary)}
.lightgray {color:var(--TextTertiary)}
.accent {color:var(--TextLink)}
.icon-red svg * {fill:var(--BackgroundRed)}
.icon-green svg * {fill:var(--BackgroundGreen)}

/*🟢 Links*/
a {text-decoration:none}
.link {display:inline-flex; align-items:center; padding:0; color:var(--TextLink); background:none; border:0; text-decoration:none; cursor:pointer; -webkit-appearance:none; appearance:none}
.link:hover {color:var(--TextLinkHover)}

.link--muted {color:var(--TextPrimary)}
.link--muted:hover {color:var(--TextLink)}

.link-text {display:block; line-height:1}
.link-icon {display:flex; flex:0 0 auto; align-items:center; justify-content:center; line-height:0}
.link-icon svg {display:block; width:100%; height:100%}
.link-icon svg * {fill:currentColor; stroke:none}

.link--icon-xs,
.link--icon-s {gap:var(--GapS)}
.link--icon-m {gap:var(--GapM)}

.link--icon-xs .link-icon,
.link--icon-s .link-icon {width:var(--IconXXS); height:var(--IconXXS)}
.link--icon-m .link-icon {width:var(--IconS); height:var(--IconS)}


/*🟢 Layout*/
main {position:relative}
section, .container--column, .page-empty, .page-empty .empty-main {display:flex; flex-direction:column}
.canvas {background:var(--BackgroundCanvas)}
.surface {background:var(--BackgroundSurface)}
.overlap-top {position:relative; z-index:1; margin-top:-1.5rem; border-radius:var(--RadiusXXL) var(--RadiusXXL) 0 0}
.sticky-top {position:sticky; top:0; z-index:10; background:var(--BackgroundWhite)}
.sticky-bottom {position:sticky; bottom:0; z-index:10; background:var(--BackgroundWhite)}
.sticky-bottom--divider {border-top:var(--Stroke) solid var(--StrokeSecondary)}
.container {box-sizing:border-box; width:100%; max-width:var(--WidthBlock); margin:0 var(--OffsetAuto); padding:var(--InsetBlock)}
.container--full {max-width:none}
.container--wide {max-width:var(--WidthWideBlock)}
.container--narrow {max-width:var(--WidthNarrowBlock)}
.container--no-air {padding:var(--InsetBlock) 0}
.container--column {gap:var(--GapL)}
.container--row {display:flex; flex-flow:row wrap}
.container-headline {display:flex; flex-flow:row nowrap; align-items:baseline; justify-content:space-between; gap:var(--GapM)}
.container--row .container-headline {flex:0 0 100%; min-width:0}
.container-headline--actions {align-items:center}
.container-headline--inline {justify-content:flex-start}
.container--no-air .container-headline {margin:0 var(--OffsetInBlock)}
.container--pad-large {padding-bottom:var(--InsetXL)}

.page-empty {min-height:100dvh}
.empty-main {flex:1 1 auto}
.page-empty .empty-main {align-items:center; justify-content:center}
.page-empty .empty-main > * {transform:translateY(-2rem)}

.favorites-panel {pointer-events:none; padding:var(--InsetL) 0; align-items:center; justify-content:center; background:transparent}
.favorites-panel .btn {pointer-events:auto}

[hidden] {display:none !important}