/* Map My Friends — base: tokens, fonts, reset, type, buttons, forms, shared motifs ("Sunset postcard") */
@font-face { font-family: "Gabarito"; src: url("../fonts/gabarito.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Rethink Sans"; src: url("../fonts/rethink-sans.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Rethink Sans"; src: url("../fonts/rethink-sans-italic.woff2") format("woff2"); font-weight: 400 800; font-style: italic; font-display: swap; }

:root {
  --tangerine: #FF7A45;
  --tangerine-deep: #B5441B;
  --tangerine-soft: #FFE6DA;
  --mint: #3DDC97;
  --mint-deep: #13744B;
  --mint-soft: #D7F7E9;
  --ink: #141414;
  --cloud: #F6F7FB;
  --sky: #4C8DFF;
  --sky-deep: #1F56C3;
  --sky-soft: #DDE8FF;

  --bg: var(--cloud);
  --surface: #FFFFFF;
  --surface-2: #EDEFF5;
  --text: var(--ink);
  --muted: #535866;
  --line: #D8DBE4;
  --link: var(--tangerine-deep);
  --focus: var(--sky-deep);
  --on-primary: var(--ink);
  --shadow: 0 10px 30px rgba(20, 20, 20, .12);
  --radius: 16px;
  --font-ui: "Rethink Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Gabarito", "Rethink Sans", system-ui, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--ink);
    --surface: #1E1F22;
    --surface-2: #2A2B30;
    --text: var(--cloud);
    --muted: #B6BAC5;
    --line: #3A3C43;
    --link: #FF9C73;
    --focus: #8AB4FF;
    --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 1.0625rem/1.55 var(--font-ui); -webkit-font-smoothing: antialiased; }
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.12; letter-spacing: -.012em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 6.5vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 4.4vw, 2.3rem); font-weight: 800; }
h3 { font-size: 1.2rem; font-weight: 700; }
p, ul, ol, dl { margin: 0 0 1em; }
a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { text-decoration-thickness: .14em; }
strong { font-weight: 700; }
small, .small { font-size: .88rem; }
.muted { color: var(--muted); }
code { font-size: .92em; background: var(--surface-2); padding: .1em .35em; border-radius: 6px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 1000; background: var(--ink); color: var(--cloud); padding: 10px 16px; border-radius: 10px; font-weight: 700; }
.skip:focus { top: 12px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.icon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.22em; }
[hidden] { display: none !important; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 50px; padding: .7em 1.3em; border: 2px solid transparent; border-radius: 14px; background: var(--tangerine); color: var(--on-primary); font: 700 1rem/1.1 var(--font-ui); text-decoration: none; cursor: pointer; transition: transform .15s ease, background-color .15s ease; touch-action: manipulation; }
.btn:hover { background: #FF8D5E; }
.btn:active { transform: translateY(1px); }
.btn.alt { background: transparent; color: var(--text); border-color: currentColor; }
.btn.alt:hover { background: var(--surface-2); }
.btn.ink { background: var(--ink); color: var(--cloud); }
@media (prefers-color-scheme: dark) { .btn.ink { background: var(--cloud); color: var(--ink); } }
.btn.mint { background: var(--mint); color: var(--ink); }
.btn.danger { background: #C8331B; color: #fff; }
.btn.small { min-height: 40px; padding: .45em .9em; font-size: .92rem; border-radius: 11px; }
.btn.wide { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--link); text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }

/* forms */
.field { margin: 0 0 1.1rem; }
.field > label:not(.choice):not(.check), .label { display: block; font-weight: 700; margin-bottom: .35rem; }
.hint { display: block; color: var(--muted); font-size: .9rem; margin-top: .3rem; }
input[type=text], input[type=tel], input[type=search], input[type=number], input[type=date], input[type=password], input[type=email], select, textarea {
  width: 100%; min-height: 52px; padding: .7rem .9rem; border: 2px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); font: 500 1.05rem/1.3 var(--font-ui);
}
textarea { min-height: 96px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--focus); outline: 3px solid color-mix(in srgb, var(--focus) 35%, transparent); outline-offset: 0; }
.choice { display: flex; gap: .75rem; align-items: flex-start; padding: .8rem .9rem; border: 2px solid var(--line); border-radius: 14px; background: var(--surface); margin-bottom: .6rem; cursor: pointer; }
.choice:has(input:checked) { border-color: var(--tangerine); background: color-mix(in srgb, var(--tangerine) 9%, var(--surface)); }
.choice input { width: 22px; height: 22px; margin: .1rem 0 0; accent-color: var(--tangerine); flex: none; }
.choice b { display: block; }
.choice > span > span { display: block; color: var(--muted); font-size: .92rem; }
.check { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .8rem; }
.check input { width: 22px; height: 22px; accent-color: var(--tangerine); flex: none; margin-top: .15rem; }
.errors, .notice { border-radius: 14px; padding: .85rem 1rem; margin: 0 0 1rem; }
.errors { background: #FDE3DC; color: #6E1E0B; border-left: 6px solid #C8331B; }
.notice { background: var(--mint-soft); color: #0B3B26; border-left: 6px solid var(--mint-deep); }
.notice.warn { background: var(--tangerine-soft); color: #5A2410; border-left-color: var(--tangerine-deep); }
@media (prefers-color-scheme: dark) {
  .errors { background: #3E1A12; color: #FFD9CC; }
  .notice { background: #12372A; color: #D7F7E9; }
  .notice.warn { background: #3D2418; color: #FFE6DA; }
}

/* ---------- motifs ---------- */
/* postmark timestamp: a stamped oval with cancellation waves */
.postmark { display: inline-flex; align-items: center; gap: .45em; color: var(--muted); font: 800 .7rem/1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.postmark b { display: inline-block; border: 1.5px solid currentColor; border-radius: 999px; padding: .38em .7em .32em; transform: rotate(-3deg); font-weight: 800; }
.postmark::after { content: ""; width: 30px; height: 11px; background: currentColor; -webkit-mask: url("../img/wave.svg") left center / 30px 11px no-repeat; mask: url("../img/wave.svg") left center / 30px 11px no-repeat; opacity: .8; }

/* perforated postcard-stamp frame around a rectangular photo */
.stamp { --r: 5px; display: block; padding: calc(2 * var(--r)); position: relative;
  background:
    radial-gradient(var(--r), #0000 97%, #fff) round calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)),
    linear-gradient(#fff 0 0) no-repeat 50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r));
  filter: drop-shadow(0 6px 14px rgba(20, 20, 20, .18)); }
.stamp img { width: 100%; height: 100%; object-fit: cover; }

/* round photo bubble: stamp-perforated edge + "time left" ring in the friend's colour + initials tag */
.bubble { --size: 60px; --hue: var(--tangerine); --left: .75; position: relative; display: block; width: var(--size); height: var(--size); flex: none; border-radius: 50%; padding: 3px;
  background: conic-gradient(var(--hue) calc(var(--left) * 1turn), rgba(20, 20, 20, .2) 0); box-shadow: 0 6px 16px rgba(20, 20, 20, .28); }
.bubble .bub-edge { display: block; width: 100%; height: 100%; padding: 3px; background: #fff; -webkit-mask: url("../img/stamp-mask.svg") center / 100% 100% no-repeat; mask: url("../img/stamp-mask.svg") center / 100% 100% no-repeat; }
.bubble img, .bubble .bub-ph { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--surface-2); }
.bubble .ini { position: absolute; right: -6px; bottom: -4px; min-width: 24px; padding: 3px 5px 2px; border-radius: 9px; background: var(--hue); color: var(--ink); border: 2px solid #fff; font: 800 .68rem/1 var(--font-display); letter-spacing: .02em; text-align: center; }
.bubble .count { position: absolute; left: -6px; top: -4px; min-width: 24px; padding: 3px 6px 2px; border-radius: 9px; background: var(--ink); color: #fff; border: 2px solid #fff; font: 800 .72rem/1 var(--font-display); text-align: center; }

/* avatar with initials fallback */
.avatar { --hue: var(--tangerine); --a: 44px; width: var(--a); height: var(--a); flex: none; border-radius: 50%; display: inline-grid; place-items: center; overflow: hidden; background: var(--hue); color: var(--ink); font: 800 calc(var(--a) * .38)/1 var(--font-display); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--hue); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.photo-credit { font-size: .78rem; color: var(--muted); }
.photo-credit a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}