/* Shared look: the homepage's cream page, the wordmark's face for what is yours,
   its long shadow for the layers under things. */
@font-face {
  font-family: 'Outfit';
  src: url(/outfit.woff2) format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --cream: #fcfaf6;
  --paper: #fffdf9;
  --ink: #44403c;
  --dim: #78716c;
  --faint: #a8a29e;
  --amber: #f59e0b;
  --orange: #fb923c;
  --red: #dc2626;
  --green: #22a35a;
  --face-from: color-mix(in srgb, var(--amber) 55%, white);
  --face: linear-gradient(90deg, color-mix(in srgb, var(--amber) 55%, white), color-mix(in srgb, var(--orange) 55%, white));
  --mid: color-mix(in srgb, var(--amber) 50%, var(--orange));
  --shade-1: color-mix(in srgb, var(--mid) 36%, var(--cream));
  --shade-2: color-mix(in srgb, var(--mid) 22%, var(--cream));
  --shade-3: color-mix(in srgb, var(--mid) 12%, var(--cream));
  --shade-4: color-mix(in srgb, var(--mid) 6%, var(--cream));
  --page: linear-gradient(135deg, rgb(245 158 11 / 0.05), rgb(251 146 60 / 0.05)) fixed, var(--cream);
  --snap: cubic-bezier(0.7, 0, 0.2, 1);
  --font: 'Outfit', -apple-system, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', 'Noto Sans CJK SC', sans-serif;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  color-scheme: light;
  scrollbar-color: var(--shade-1) transparent;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
body {
  background: var(--page);
  color: var(--ink);
  font: 16px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: default; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--face-from); outline-offset: 2px; border-radius: 8px; }
[hidden] { display: none !important; }
svg.i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Fields and buttons, each a flat layer with a short shadow under it. */
.field {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: 0.65rem 1rem;
  border: 1.5px solid var(--shade-1);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  caret-color: var(--amber);
  font: inherit;
  font-size: 16px; /* below 16px iOS zooms in on focus */
  outline: none;
  appearance: none;
}
.field::placeholder { color: var(--faint); }
.field:focus-visible { outline: 3px solid var(--face-from); outline-offset: -1.5px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0 1.15rem;
  border-radius: 14px;
  background: var(--face);
  box-shadow: 3px 4px 0 var(--shade-1);
  font-weight: 600;
  white-space: nowrap;
  transition: transform 0.08s, box-shadow 0.08s;
}
.btn:active:not(:disabled) { transform: translate(3px, 4px); box-shadow: 0 0 0 var(--shade-1); }
.btn:disabled { background: var(--shade-3); box-shadow: none; color: var(--faint); }
.btn.ghost { background: var(--paper); border: 1.5px solid var(--shade-1); box-shadow: 2px 3px 0 var(--shade-2); }
.btn.danger { background: var(--paper); border: 1.5px solid color-mix(in srgb, var(--red) 35%, white); color: var(--red); box-shadow: 2px 3px 0 color-mix(in srgb, var(--red) 15%, white); }
.btn.small { min-height: 2.1rem; padding: 0 0.8rem; font-size: 14px; border-radius: 11px; }
.btn.block { width: 100%; }
.link { color: var(--dim); font-size: 14px; text-decoration: underline; text-decoration-color: var(--shade-1); text-underline-offset: 3px; }
.link:hover { color: var(--amber); }

/* Dialogs: a card that sits over a soft veil. */
dialog {
  width: min(26rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: 1.5px solid var(--shade-1);
  border-radius: 20px;
  background: var(--cream);
  color: var(--ink);
  box-shadow: 4px 6px 0 var(--shade-2), 8px 12px 0 var(--shade-3);
  overflow: auto;
}
dialog::backdrop { background: rgb(68 64 60 / 0.28); backdrop-filter: blur(2px); }
dialog .dlg { display: flex; flex-direction: column; gap: 0.9rem; padding: 1.4rem; }
dialog h2 { margin: 0; font-size: 18px; }
dialog p { margin: 0; color: var(--dim); font-size: 15px; }
dialog .row-end { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 0.3rem; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(1.5rem + var(--sab));
  z-index: 100;
  max-width: calc(100vw - 2rem);
  padding: 0.6rem 1rem;
  border: 1.5px solid var(--shade-1);
  border-radius: 14px;
  background: var(--cream);
  box-shadow: 3px 4px 0 var(--shade-2);
  font-size: 14px;
  transform: translateX(-50%);
  animation: toast 0.25s var(--snap);
}
@keyframes toast { from { opacity: 0; transform: translate(-50%, 8px); } }

.avatar {
  --h: 30;
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 14px;
  background: hsl(var(--h) 85% 88%);
  color: hsl(var(--h) 45% 32%);
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  position: relative;
  user-select: none;
}
.avatar.sm { width: 2.1rem; height: 2.1rem; border-radius: 11px; font-size: 14px; }
.avatar.group { border-radius: 50%; }
.avatar .on {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 12px;
  height: 12px;
  border: 2.5px solid var(--cream);
  border-radius: 50%;
  background: var(--green);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}