/* mimer styles. A near-black green page, white buttons, an off-white phone, and one bright green used only for
   the active tab and focus. No inline styles anywhere (CSP): every animation lives in this file. */
:root {
  --bg: #07140f;          /* page: darker green, close to black */
  --nav: #0a1c15;         /* tab bar: a hair different from the page, no border or shadow */
  --surface: #0f2b21;
  --line: #234a3b;
  --text: #eef4f0;
  --muted: #9db8aa;
  --bright: #35d07f;      /* active tab, focus, small highlights */
  --paper: #ece8de;       /* the phone screen: off-white, not pure white */
  --danger: #ff9b9b;
  --tabbar-h: 64px;
  --radius: 14px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 1rem; line-height: 1.55;
  padding-top: env(safe-area-inset-top, 0);
}
a { color: var(--bright); text-underline-offset: 3px; }
a:hover { color: #fff; }
:focus-visible { outline: 3px solid var(--bright); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 0; background: #fff; color: #000; padding: .5rem 1rem; z-index: 50; }
.skip:focus { left: 0; }
.wrap { width: 100%; max-width: 62rem; margin: 0 auto; padding: 0 1.25rem; }
[hidden] { display: none !important; }

/* header on every page except Home: the wordmark alone, top left */
.top { max-width: 62rem; margin: 0 auto; padding: 14px 20px 4px; height: 56px; box-sizing: border-box; }
.brand { display: inline-block; color: #fff; text-decoration: none; line-height: 0; }
.wordmark { height: 34px; width: auto; display: block; color: #fff; }

/* room for the tab bar */
body.has-nav main { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 1.5rem); }

/* type */
h1 { font-size: clamp(1.9rem, 6.5vw, 3rem); line-height: 1.08; letter-spacing: -.02em; font-weight: 800; margin: 0 0 .9rem; text-wrap: balance; }
h2 { font-size: 1.15rem; margin: 2rem 0 .5rem; }
.lede { font-size: 1.1rem; color: var(--text); max-width: 34rem; margin: 0 0 1.25rem; }
.hint, .hint-top { color: var(--muted); font-size: .95rem; margin: 1.1rem 0 0; max-width: 34rem; }
.hint-top { margin: 0 0 1.25rem; }
.hint strong, .mark { color: var(--bright); }

/* buttons: white with dark labels; outlined for the secondary one */
.btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-height: 3rem; padding: 0 1.4rem; border-radius: 999px;
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  border: 2px solid transparent; color: var(--bg); background: #fff;
}
.btn:hover { background: #dfe9e2; color: var(--bg); }
.btn-primary { background: #fff; color: var(--bg); }
.btn-ghost { background: transparent; border-color: rgba(255, 255, 255, .75); color: #fff; }
.btn-ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.btn-small { min-height: 2.4rem; padding: 0 1rem; font-size: .95rem; }
.actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.inline { display: inline; margin: 0; }

/* ------------------------------------------------------------------ Home: one screen, no scrolling
   Top block = wordmark + mockup (a bit more square than before). Hero = anchored to the tab bar, not to the mockup.
   Layout-critical sizes are px / viewport units on purpose: a phone's "font size" setting inflates rem,
   which is what used to push the buttons behind the tab bar on real phones. */
body.page-home { overflow: hidden; overscroll-behavior: none; }
body.page-home main { padding: 0; max-width: none; }
body.page-home.has-nav main { padding-bottom: 0; }
.home {
  position: fixed; left: 0; right: 0; top: env(safe-area-inset-top, 0px);
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; overflow: hidden;
  --h1: clamp(22px, 4.7svh, 34px);
}
.home-top { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin-bottom: calc(var(--h1) * -1.1); }
.home-brand { flex: none; margin: 20px 0; color: #fff; }
.home-brand .wordmark { height: 38px; margin: 0 auto; }

/* the mockup: the top of a phone, wide (92% of the screen) and close to square (height = 80% of the screen width) */
.home-stage { position: relative; flex: 1 1 0; min-height: 0; }
.phone {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 92%; max-width: 560px; transform: translateX(-50%);
  background: var(--paper); border-radius: 34px 34px 0 0; overflow: hidden; container-type: inline-size;
}
.phone::before {                          /* camera pill: thin */
  content: ""; position: absolute; top: 11px; left: 50%; width: 56px; height: 8px; transform: translateX(-50%);
  background: #1a2a23; border-radius: 6px;
}
.stage-fade {                             /* slanted fade: starts around the middle on the left and finishes lower on the right */
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: linear-gradient(188deg, rgba(7, 20, 15, 0) 55%, rgba(7, 20, 15, .16) 64%, rgba(7, 20, 15, .52) 76%, var(--bg) 88%);
}

/* the blue box from the sketch: cards live strictly in here and are clipped at its edges.
   Sizes and positions are in cqmin (a share of this box), so the heap keeps its proportions at any size. */
.stack { position: absolute; left: 0; right: 0; top: calc(28px + max(0px, (100% - 28px - 22% - 62cqw) * .3)); height: min(calc(100% - 28px - 22%), 62cqw); overflow: hidden; container-type: size; }
.card {
  position: absolute; left: calc(50% - 42cqmin); top: calc(50% - 26.25cqmin); width: 84cqmin; aspect-ratio: 1.6;
  transform: translate(calc(var(--x) * 1cqmin), calc(var(--y) * 1cqmin)) rotate(var(--r));
  background: #0b0f0d; color: #fff; border-radius: 3.4cqmin; padding: 4cqmin;
  box-shadow: 0 1.4cqmin 3.4cqmin rgba(0, 0, 0, .32);
  display: flex; flex-direction: column; justify-content: flex-start; gap: 2cqmin;
  font-size: 9cqmin; font-weight: 800; line-height: 1.15; will-change: transform;
  animation: breathe 4.8s ease-in-out infinite;                 /* same for every card: they breathe in unison */
}
.card-text { justify-content: center; align-items: center; text-align: center; }   /* meme words sit in the middle of the card */
.card b { font-weight: 800; }
.card span { font-size: .8em; font-weight: 600; text-align: center; }
.card-img { padding: 3cqmin; gap: 2.4cqmin; }
.ph {
  display: block; flex: 1 1 0; min-height: 0; border-radius: 2.2cqmin; position: relative; overflow: hidden;
  background: radial-gradient(circle at 72% 30%, #dfe8e2 0 9%, transparent 10%), linear-gradient(160deg, #5a6d63, #2a3730);
}
.ph::after {
  content: ""; position: absolute; left: -8%; right: -8%; bottom: -2%; height: 62%; background: #17211c;
  clip-path: polygon(0 100%, 26% 18%, 50% 72%, 74% 28%, 100% 100%);
}
/* --x/--y: where the card sits; --r: its tilt; --ox/--oy: the drift (outward and up) when the heap breathes in */
.c1 { --x: -9; --y: -7; --r: -8deg; --ox: -2; --oy: -2.5; }
.c2 { --x: 8;  --y: -2; --r: 6deg;  --ox: 2;  --oy: -2.5; }
.c3 { --x: -1; --y: 7;  --r: -3deg; --ox: 0;  --oy: -2; }

@keyframes breathe {
  0%, 100% { transform: translate(calc(var(--x) * 1cqmin), calc(var(--y) * 1cqmin)) rotate(var(--r)) scale(1); }
  50%      { transform: translate(calc((var(--x) + var(--ox)) * 1cqmin), calc((var(--y) + var(--oy)) * 1cqmin)) rotate(var(--r)) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) { .card { animation: none !important; } }

/* hero: left aligned and measured from the tab bar. margin-top:auto takes up any spare height above it. */
.home-copy {
  position: relative; z-index: 6; flex: none; width: 100%; max-width: 440px; margin: auto auto 25px; padding: 0 20px;
  text-align: left;
}
.home-copy h1 { font-size: var(--h1); line-height: 1.1; margin: 0 0 6px; }
.home-copy .lede { font-size: clamp(14px, 2.4svh, 16px); line-height: 1.4; color: var(--muted); margin: 0 0 14px; }
.home-copy .actions { flex-wrap: nowrap; gap: 10px; }
.home-copy .actions .btn { flex: 1 1 0; min-height: 48px; padding: 0 8px; white-space: nowrap; font-size: clamp(14px, 4vw, 16px); }
.btn-install { width: 100%; margin-top: 10px; min-height: 42px; }
.home-copy .hint { margin: 8px 0 0; font-size: 13px; }

/* last-resort fit steps, switched on by a tiny script only if the page would still scroll */
.fit-1 .home-copy .lede { display: none; }
.fit-2 .home { --h1: 20px; }
.fit-2 .home-copy h1 { margin-bottom: 8px; }
.fit-2 .home-brand { margin: 12px 0; }
.fit-2 .home-brand .wordmark { height: 30px; }
.fit-3 .home-stage { display: none; }

/* ------------------------------------------------------------------ tab bar */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; justify-content: space-around; align-items: stretch;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--nav);
}
.tab {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
  color: #fff; text-decoration: none; font-size: .72rem; font-weight: 600; min-width: 3.5rem;
}
.tab:hover { color: #fff; }
.tab.is-active { color: var(--bright); }
.tab-icon { display: block; width: 26px; height: 26px; }
.tab-create { color: #fff; }
.tab-create.is-active { color: var(--bright); }

/* ------------------------------------------------------------------ panels and forms */
.panel { padding: 1.25rem 0 2rem; }
.panel.narrow { max-width: 28rem; }
.form { display: flex; flex-direction: column; gap: .35rem; margin: 1rem 0; }
.form label { font-weight: 600; margin-top: .75rem; }
.form input {
  min-height: 3rem; padding: 0 .9rem; border-radius: var(--radius); border: 2px solid var(--line);
  background: var(--surface); color: var(--text); font: inherit;
}
.form input:focus { border-color: var(--bright); outline: none; }
.form .btn { margin-top: 1.25rem; }
.field-note { margin: .1rem 0 0; font-size: .9rem; color: var(--muted); }
.field-note.bad { color: var(--danger); }
.field-note.good { color: var(--bright); }
.error { background: #3a1a1a; border: 2px solid var(--danger); color: #ffdede; border-radius: var(--radius); padding: .75rem 1rem; margin: 0 0 1rem; }
.code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 1.6rem; font-weight: 700; letter-spacing: .08em; background: var(--surface); border: 2px dashed var(--bright); border-radius: var(--radius); padding: 1rem; text-align: center; margin: 0 0 1.25rem; word-break: break-all; }

.table { border-collapse: collapse; width: 100%; max-width: 40rem; font-size: .95rem; }
.table th, .table td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; word-break: break-word; }
.table th { font-weight: 600; color: var(--muted); width: 45%; }
.good { color: var(--bright); }
.bad { color: var(--danger); }

/* update toast sits above the tab bar */
.toast {
  position: fixed; left: 1rem; right: 1rem; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + .75rem);
  max-width: 26rem; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--surface); border: 2px solid var(--bright); border-radius: var(--radius); padding: .65rem 1rem; z-index: 60;
}
body:not(.has-nav) .toast { bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem); }
.toast .btn { background: #fff; }
.offline-status { margin-top: 1.25rem; font-size: .9rem; }
.offline-status.good { color: var(--bright); }
.offline-card { margin-top: 1.25rem; }
.offline-card .offline-status { margin: 0 0 .6rem; }
.offline-details { margin-top: .5rem; font-size: .9rem; color: var(--muted); }
.offline-details summary { cursor: pointer; padding: .4rem 0; }
.offline-details pre { white-space: pre-wrap; word-break: break-word; background: var(--surface); border-radius: 10px; padding: .6rem .75rem; margin: .5rem 0 .75rem; font-size: .8rem; color: var(--text); }

/* Show/hide eye on password fields */
.pw { position: relative; display: block; }
.pw input { width: 100%; box-sizing: border-box; padding-right: 3.2rem; }
.pw-eye { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 12px; padding: 0; }
.pw-eye:hover, .pw-eye[aria-pressed=true] { color: var(--bright); }
.pw-eye:focus-visible { outline: 3px solid var(--bright); outline-offset: -2px; }
.pw-eye svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }