/* VTOP Native · Feedback & Bug Reports — the app's own look on the web:
   Material 3 Expressive shapes and motion, VTOP navy in light mode, the "basic steel" gradient in dark mode,
   Cal Sans for titles, Outfit for text, JetBrains Mono for numbers and codes (SIL OFL, see /fonts). */

@font-face { font-family: "Cal Sans"; src: url("/fonts/cal_sans.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Outfit"; src: url("/fonts/outfit.woff") format("woff"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains_mono.woff") format("woff"); font-weight: 100 800; font-display: swap; }

:root {
  color-scheme: light;
  --primary: #23527C; --on-primary: #FFFFFF;
  --primary-container: #D3E4F7; --on-primary-container: #0B2A47;
  --secondary-container: #DCEBF6; --on-secondary-container: #0E3550;
  --tertiary: #B4690E; --tertiary-container: #FFE3C4; --on-tertiary-container: #3D2200;
  --error: #BA1A1A; --error-container: #FFDAD6; --on-error-container: #410002;
  --surface: #F7F8FB; --on-surface: #1A1C1E; --on-surface-variant: #43474E;
  --container-low: #F1F3F7; --container: #EBEEF3; --container-high: #E5E8EE; --container-highest: #DFE3EA;
  --outline-variant: #D3D8E0; --scrim: rgba(15, 19, 23, 0.32);
  --field: rgba(26, 28, 30, 0.06); --field-focus: rgba(26, 28, 30, 0.09);
  --success: #1a7f37;
  --spring: cubic-bezier(0.34, 1.36, 0.64, 1);   /* a little overshoot, like the app's springs */
  --settle: cubic-bezier(0.2, 0.9, 0.3, 1);
  --radius-card: 28px; --radius-control: 16px;
  --title: "Cal Sans", "Outfit", system-ui, sans-serif;
  --body: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --primary: #A2C9F0; --on-primary: #00325A;
  --primary-container: #1A456C; --on-primary-container: #D3E4F7;
  --secondary-container: #1F4A66; --on-secondary-container: #CDE6F8;
  --tertiary: #FFB86E; --tertiary-container: #633B00; --on-tertiary-container: #FFDCBD;
  --error: #FFB4AB; --error-container: #93000A; --on-error-container: #FFDAD6;
  --surface: #1B1A2B; --on-surface: #E3E2E6; --on-surface-variant: #C4C6CF;
  --container-low: #24233A; --container: #2A2942; --container-high: #31304B; --container-highest: #3A3956;
  --outline-variant: #4B4A6A; --scrim: rgba(0, 0, 0, 0.45);
  --field: rgba(227, 226, 230, 0.07); --field-focus: rgba(227, 226, 230, 0.11);
  --success: #3fb950;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  font-family: var(--body); font-size: 16px; line-height: 1.5;
  color: var(--on-surface); background: var(--surface);
  -webkit-tap-highlight-color: transparent;
}

/* backdrop: soft drifting colour in light mode (like the sign-in page), the steel gradient in dark mode */
.backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.backdrop i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; filter: blur(48px); opacity: 0.32; }
.backdrop i:nth-child(1) { background: radial-gradient(var(--primary), transparent 65%); left: -25vmax; top: -30vmax; animation: drift1 18s var(--settle) infinite alternate; }
.backdrop i:nth-child(2) { background: radial-gradient(var(--tertiary), transparent 65%); right: -30vmax; top: 15vh; animation: drift2 23s var(--settle) infinite alternate; }
.backdrop i:nth-child(3) { background: radial-gradient(#3C8DBC, transparent 65%); left: 0; bottom: -40vmax; opacity: 0.25; animation: drift1 27s var(--settle) infinite alternate-reverse; }
@keyframes drift1 { to { transform: translate(18vmax, 8vmax); } }
@keyframes drift2 { to { transform: translate(-14vmax, 10vmax); } }
:root[data-theme="dark"] .backdrop {
  background:
    radial-gradient(circle at 92% 6%, rgba(114, 115, 146, 0.34), transparent 62%),
    radial-gradient(circle at 5% 92%, rgba(153, 150, 178, 0.14), transparent 55%),
    radial-gradient(circle at 15% 0%, rgba(184, 189, 223, 0.06), transparent 40%),
    linear-gradient(180deg, #313049 0%, #3f3e6a 60%, #4a4a7c 100%);
}
:root[data-theme="dark"] .backdrop i { display: none; }

/* frosted top bar with eyebrow + title, as on every app screen */
.topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 4px;
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid transparent; transition: border-color .2s;
}
.topbar.scrolled { border-bottom-color: color-mix(in srgb, var(--outline-variant) 60%, transparent); }
.topbar .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--primary); }
.topbar h1 { margin: 0; font: 400 22px/1.2 var(--title); }
.seal { width: 40px; height: 40px; border-radius: 50%; background: #fff; padding: 4px; margin: 0 8px 0 0; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.icon-btn {
  width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--on-surface);
  display: grid; place-items: center; cursor: pointer; transition: background .2s, transform .35s var(--spring);
}
.icon-btn:hover { background: var(--field); }
.icon-btn:active { transform: scale(.9); }
svg.i { width: 24px; height: 24px; fill: currentColor; flex: none; }

main { width: 100%; max-width: 760px; margin: 0 auto; padding: 8px 16px calc(32px + env(safe-area-inset-bottom)); }
.lead { color: var(--on-surface-variant); margin: 4px 4px 20px; }

/* section header with the app's accent bar */
.section { display: flex; gap: 10px; align-items: center; margin: 24px 4px 12px; }
.section::before { content: ""; width: 4px; height: 22px; border-radius: 2px; background: var(--primary); }
.section h2 { margin: 0; font: 400 18px/1.2 var(--title); }

/* the three choices: big tappable cards that shrink slightly on press */
.choices { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .choices { grid-template-columns: repeat(3, 1fr); } }
.choice {
  display: flex; gap: 16px; align-items: center; text-align: left; width: 100%;
  padding: 20px; border: 0; border-radius: var(--radius-card); cursor: pointer;
  background: var(--container-low); color: var(--on-surface); font: inherit;
  transition: transform .45s var(--spring), background .2s, box-shadow .2s;
}
@media (min-width: 640px) { .choice { flex-direction: column; align-items: flex-start; min-height: 200px; } }
.choice:hover { background: var(--container); box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.choice:active { transform: scale(.96); }
.choice h3 { margin: 0; font: 400 19px/1.25 var(--title); color: var(--primary); }
.choice p { margin: 4px 0 0; font-size: 14px; color: var(--on-surface-variant); }
.choice .go { margin-left: auto; color: var(--on-surface-variant); }
@media (min-width: 640px) { .choice .go { display: none; } }

/* expressive shape for icons: a soft "cookie" that breathes on hover */
.shape {
  width: 56px; height: 56px; flex: none; display: grid; place-items: center;
  border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%;
  transition: border-radius .6s var(--spring), transform .45s var(--spring);
}
.choice:hover .shape { border-radius: 55% 45% 42% 58% / 52% 58% 42% 48%; transform: rotate(-8deg); }
.k-feedback { background: var(--primary-container); color: var(--on-primary-container); }
.k-bug { background: var(--error-container); color: var(--on-error-container); }
.k-feature { background: var(--tertiary-container); color: var(--on-tertiary-container); }

/* cards and fields */
.card { background: var(--container-low); border-radius: var(--radius-card); padding: 20px; margin-bottom: 12px; }
.card > h3 { margin: 0 0 4px; font: 400 17px/1.3 var(--title); color: var(--primary); }
.card > .hint { margin: 0 0 12px; font-size: 13px; color: var(--on-surface-variant); }
.field { position: relative; margin-top: 12px; }
.field label { display: block; font-size: 13px; font-weight: 500; color: var(--on-surface-variant); margin: 0 0 6px 4px; }
.field label .opt { font-weight: 400; opacity: .8; }
.field input, .field textarea {
  width: 100%; border: 0; outline: 0; border-radius: var(--radius-control);
  background: var(--field); color: var(--on-surface); font: inherit; padding: 14px 16px;
  transition: background .2s, box-shadow .25s var(--settle);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus { background: var(--field-focus); box-shadow: inset 0 0 0 2px var(--primary); }
.field .count { position: absolute; right: 12px; bottom: 8px; font: 12px var(--mono); color: var(--on-surface-variant); opacity: 0; transition: opacity .2s; }
.field textarea:focus ~ .count { opacity: .8; }
.field.invalid input, .field.invalid textarea { box-shadow: inset 0 0 0 2px var(--error); }
.field .err { font-size: 12px; color: var(--error); margin: 4px 0 0 4px; min-height: 0; }

/* rating: five stars that pop when chosen */
.stars { display: flex; gap: 6px; margin-top: 4px; }
.star { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; color: var(--outline-variant); display: grid; place-items: center; transition: transform .4s var(--spring), color .2s; }
.star.on { color: var(--tertiary); }
.star:active, .star.pop { transform: scale(1.25); }
.star svg { width: 30px; height: 30px; fill: currentColor; }

/* switch row (the device info toggle) */
.row { display: flex; align-items: center; gap: 12px; }
.row .grow { flex: 1; min-width: 0; }
.switch { position: relative; width: 52px; height: 32px; flex: none; }
.switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: 16px; background: var(--container-highest); box-shadow: inset 0 0 0 2px var(--outline-variant); transition: background .25s; }
.switch span::after { content: ""; position: absolute; left: 8px; top: 8px; width: 16px; height: 16px; border-radius: 50%; background: var(--on-surface-variant); transition: all .35s var(--spring); }
.switch input:checked + span { background: var(--primary); box-shadow: none; }
.switch input:checked + span::after { left: 24px; top: 4px; width: 24px; height: 24px; background: var(--on-primary); }
.diag { font: 12.5px/1.6 var(--mono); color: var(--on-surface-variant); margin-top: 8px; word-break: break-word; }

/* screenshot picker */
.drop {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius-control);
  background: var(--field); cursor: pointer; transition: background .2s, transform .4s var(--spring);
}
.drop:active { transform: scale(.98); }
.drop input { display: none; }
.preview { position: relative; margin-top: 10px; display: none; }
.preview img { max-width: 100%; max-height: 260px; border-radius: 16px; display: block; }
.preview .icon-btn { position: absolute; top: 6px; left: 6px; background: var(--scrim); color: #fff; }

/* buttons */
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 16px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 24px; border: 0; border-radius: 24px;
  font: 600 15px var(--body); cursor: pointer; transition: transform .4s var(--spring), filter .2s, opacity .2s, border-radius .4s var(--spring);
}
.btn:active { transform: scale(.95); border-radius: 14px; }
.btn-filled { background: var(--primary); color: var(--on-primary); }
.btn-tonal { background: var(--secondary-container); color: var(--on-secondary-container); }
.btn-text { background: transparent; color: var(--primary); padding: 0 14px; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn .spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.note { font-size: 13px; color: var(--on-surface-variant); margin: 16px 4px 0; }
.banner { border-radius: var(--radius-control); padding: 12px 16px; margin-bottom: 12px; font-size: 14px; }
.banner.error { background: var(--error-container); color: var(--on-error-container); }
.turnstile { margin-top: 16px; min-height: 65px; display: flex; justify-content: center; }

/* thank-you view: a check that pops in on an expressive shape */
.done { text-align: center; padding: 48px 8px; }
.done .shape { width: 104px; height: 104px; margin: 0 auto 20px; background: var(--primary-container); color: var(--on-primary-container); animation: pop .7s var(--spring) both, morph 6s ease-in-out infinite alternate .7s; }
.done .shape svg { width: 52px; height: 52px; }
.done h2 { font: 400 26px/1.2 var(--title); margin: 0 0 8px; }
.done p { color: var(--on-surface-variant); margin: 0 auto 24px; max-width: 420px; }
@keyframes pop { from { transform: scale(.3) rotate(-30deg); opacity: 0; } }
@keyframes morph { to { border-radius: 58% 42% 45% 55% / 52% 58% 42% 48%; } }

/* motion: views slide a little and fade, like the app's page transitions; content rises in, staggered */
.view { animation: enter .42s var(--settle) both; }
.view.back { animation-name: enter-back; }
@keyframes enter { from { opacity: 0; transform: translateX(12%); } }
@keyframes enter-back { from { opacity: 0; transform: translateX(-6%); } }
.rise { animation: rise .5s var(--settle) both; animation-delay: calc(var(--i, 0) * 60ms + 80ms); }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

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

footer { text-align: center; font-size: 12px; color: var(--on-surface-variant); padding: 8px 16px 24px; }
footer a { color: var(--primary); }

/* admin */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.chip { height: 36px; padding: 0 16px; border-radius: 12px; border: 0; background: var(--container-low); color: var(--on-surface); font: 500 14px var(--body); cursor: pointer; transition: background .2s, transform .35s var(--spring), border-radius .35s var(--spring); }
.chip.on { background: var(--secondary-container); color: var(--on-secondary-container); border-radius: 18px; }
.chip:active { transform: scale(.94); }
.item { background: var(--container-low); border-radius: 20px; padding: 16px; margin-bottom: 10px; cursor: pointer; transition: background .2s; }
.item:hover { background: var(--container); }
.item .meta { font: 12px/1.5 var(--mono); color: var(--on-surface-variant); }
.item .body { margin-top: 8px; white-space: pre-wrap; display: none; }
.item.open .body { display: block; }
.item pre { font: 12px/1.5 var(--mono); white-space: pre-wrap; word-break: break-word; background: var(--field); padding: 12px; border-radius: 12px; overflow: auto; }
.tag { display: inline-block; font: 600 11px var(--body); letter-spacing: .6px; text-transform: uppercase; padding: 2px 10px; border-radius: 10px; margin-right: 6px; }
.tag.done-tag { background: var(--container-highest); color: var(--on-surface-variant); }