/* One calm card on a plain page, in the app's look (docs/reference/prototype/STYLE.md). Light only.
   Self-hosted fonts only, no images, nothing fetched from elsewhere. */

@font-face {
  font-family: "Outfit";
  src: url("/fonts/Outfit.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("/fonts/DMSans.ttf") format("truetype");
  font-weight: 100 1000;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ground: #f7f6f2;
  --card: #ffffff;
  --chip: #efede7;
  --chip-h: #e6e3db;
  --ink: #1c1d2b;
  --ink-2: #585b6b;
  --ink-3: #8b8d99;
  --line: #e8e5dd;
  --line-2: #d6d2c8;
  --sky: #6ec1ec;
  --sky-h: #5eb7e6;
  --sky-soft: #e6f4fc;
  --sun-soft: #fcf3d6;
  --sun-ink: #7a5d06;
  --green: #7dc795;
  --green-ink: #2f6b45;
  --blue: #4262dd;
  /* Named "quiet" for the footer link; ink-2 (not ink-3, about 3:1) so it stays readable. */
  --quiet: var(--ink-2);
  --display: "Outfit", "Avenir Next", ui-rounded, system-ui, sans-serif;
  --body: "DM Sans", system-ui, -apple-system, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  /* Needs viewport-fit=cover in the page; keeps the footer above the home bar and Safari's toolbar. */
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  display: flex;
  flex-direction: column;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
}

main {
  flex: 1;
  width: 100%;
  max-width: 28rem;
  margin: 0 auto;
  padding: 24px 20px 16px;
}

footer {
  padding: 0.5rem 1rem;
  text-align: center;
  font-size: 0.85rem;
}

/* Quiet to look at, a comfortable 44px target for a thumb. */
footer a {
  display: inline-block;
  min-height: 44px;
  padding: 0 1rem;
  line-height: 44px;
  color: var(--quiet);
  text-decoration: none;
}

footer a:hover,
footer a:focus-visible {
  text-decoration: underline;
}

.card {
  background: var(--card);
  border-radius: 24px;
  padding: 18px;
  box-shadow: 0 1px 2px rgba(28, 29, 43, 0.04), 0 12px 30px -14px rgba(28, 29, 43, 0.18);
}

/* "<name> wants to connect", behind a small green dot like the app's cards. */
.header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

.header::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}

/* A cancelled, ended or removed card is not live: it has a notice and no buttons, and no dot.
   (A full card has a notice too, but keeps its "Can't now" button, and stays live.) */
.card:has(> .notice):not(:has(> .actions)) .header::before {
  display: none;
}

.title {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.92px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

/* The vibe line: one soft yellow strip, the vibes set apart by middle dots. */
.vibes {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: 14px;
  background: var(--sun-soft);
  color: var(--sun-ink);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  list-style: none;
}

.vibes li + li::before {
  /* The empty alt text keeps a screen reader from saying "middle dot"; the plain line first is
     for browsers that drop the alt-text form. */
  content: "\00b7";
  content: "\00b7" / "";
  margin-right: 8px;
}

.line {
  margin: 3px 0;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
}

/* The first line is the time. */
.card > .line:first-of-type {
  color: var(--green-ink);
  font-size: 13.5px;
  font-weight: 700;
}

.notice,
.status {
  margin: 14px 0 0;
  font-weight: 600;
}

.status {
  color: var(--green-ink);
  font-weight: 700;
}

.going,
.note,
.message,
.quiet {
  color: var(--ink-2);
}

.going {
  margin: 4px 0 0;
}

.message {
  margin: 1rem 0 0;
  text-align: center;
}

.actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

/* A chip capsule; the primary answer is the sky capsule with an ink label. */
button {
  flex: 1;
  min-height: 2.9rem;
  padding: 0.5rem 1.1rem;
  border: 0;
  border-radius: 999px;
  background: var(--chip);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
}

button:active {
  background: var(--chip-h);
}

button.primary {
  background: var(--sky);
  color: var(--ink);
}

button.primary:active {
  background: var(--sky-h);
}

button:disabled {
  opacity: 0.55;
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
  /* Blue, not sky: sky is about 2:1 on white, the blue about 5:1. Fields also turn their border sky. */
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

form {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

label {
  display: block;
  margin: 0 0 6px 4px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
}

/* White capsules with a quiet border. 16px keeps Safari from zooming the page when a field is focused. */
input,
select {
  display: block;
  width: 100%;
  min-height: 2.9rem;
  margin: 0 0 14px;
  padding: 0.5rem 1.1rem;
  border: 1.5px solid var(--line-2);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}

input:focus,
select:focus {
  border-color: var(--sky);
}

.note {
  margin: 0 0 14px;
  font-size: 13px;
}

form .actions {
  margin-top: 0;
}

.plain {
  padding: 2rem 0.5rem;
  text-align: center;
}

.plain h1 {
  margin: 0 0 0.5rem;
  font-family: var(--display);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -1.12px;
  line-height: 1.15;
}