/* Roma Student — web
 *
 * The same tokens as Theme.swift, so somebody who uses the app and the site
 * doesn't feel like they've moved between two products. Colours are the only
 * thing duplicated across platforms; if they drift, change both.
 */

:root {
  --ground:#FAF6F2; --card:#FFFFFF; --card-alt:#F3EDE7;
  --ink:#251D19; --muted:#7B6960; --light:#A08E84;
  --line:#E6DED8; --edge:rgba(0,0,0,.06);
  --accent:#2B211C; --on-accent:#FAF6F2;
  --gold:#C99630; --alert:#C0453B; --verified:#3E8A6E;
  --food:#D9594F; --nightlife:#7362B8; --coffee:#B07A4A; --sweet:#D4809B;
  --market:#C99630; --sports:#3E8A6E; --views:#2F7F8C; --date:#8B3A4E;
  --serif: ui-serif, Georgia, "Times New Roman", serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:#0A0B0D; --card:#131518; --card-alt:#1B1E23;
    --ink:#F5F6F9; --muted:#9CA3AF; --light:#6B7280;
    --line:#2E3138; --edge:rgba(255,255,255,.07);
    --accent:#F5F6F9; --on-accent:#0A0B0D;
  }
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

body {
  margin:0; background:var(--ground); color:var(--ink);
  font:16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}

.wrap { max-width:680px; margin:0 auto; padding:0 16px; }

h1 { font-family:var(--serif); font-size:36px; line-height:1.06; margin:8px 0 0; font-weight:600; }
h2 { font-family:var(--serif); font-size:22px; margin:0 0 8px; font-weight:600; }
.eyebrow {
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--light); font-weight:600;
}
.sub { color:var(--muted); font-size:15px; margin-top:10px; }
.note-text { color:var(--muted); font-size:14px; line-height:1.5; }

/* ── Cards ──────────────────────────────────────────────────────────────── */

.card {
  background:var(--card); border:1px solid var(--line);
  border-radius:18px; padding:18px; margin-bottom:12px;
}
.card-alt { background:var(--card-alt); }

/* ── Controls ───────────────────────────────────────────────────────────── */

input, select, textarea, button { font:inherit; }

.field {
  width:100%; padding:13px 14px; border-radius:14px;
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  margin-bottom:10px;
}
.field:focus { outline:none; border-color:var(--muted); }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:14px; border:0; border-radius:16px;
  background:var(--accent); color:var(--on-accent);
  font-weight:600; font-size:16px; cursor:pointer;
}
.btn:disabled { opacity:.45; cursor:default; }
.btn-quiet {
  background:transparent; color:var(--muted); border:1px solid var(--line);
}
.btn-danger { background:transparent; color:var(--alert); border:1px solid var(--alert); }

.link {
  background:none; border:0; padding:0; color:var(--accent);
  font-weight:600; cursor:pointer; text-decoration:underline;
}

/* Sideways rather than wrapped — a wrapped row of a dozen chips eats half a
   phone screen before you've seen any content. */
.chips {
  display:flex; gap:8px; overflow-x:auto; padding:14px 16px 6px;
  margin:0 -16px; scrollbar-width:none;
}
.chips::-webkit-scrollbar { display:none; }
.chip {
  flex:0 0 auto; padding:9px 15px; border-radius:999px;
  border:1px solid var(--line); background:var(--card);
  font-size:14px; font-weight:600; color:var(--ink); cursor:pointer; white-space:nowrap;
}
.chip[aria-pressed="true"] { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }

.pill {
  display:inline-block; font-size:12px; font-weight:600;
  padding:5px 10px; border-radius:999px; border:1px solid var(--line); color:var(--muted);
}
.pill.open { color:var(--verified); border-color:var(--verified); }
.pill.now  { background:var(--gold); color:#1a1207; border-color:var(--gold); }

/* ── Tab bar ────────────────────────────────────────────────────────────── */

.tabbar {
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  display:flex; background:var(--card); border-top:1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
  flex:1; text-align:center; padding:11px 4px 9px; text-decoration:none;
  color:var(--light); font-size:11px; font-weight:600;
}
.tabbar a.on { color:var(--ink); }
.tabbar .glyph { display:block; font-size:19px; line-height:1.3; }

/* ── Toast ──────────────────────────────────────────────────────────────── */

.toast {
  position:fixed; top:12px; left:16px; right:16px; z-index:60;
  max-width:648px; margin:0 auto; display:none;
  padding:13px 15px; border-radius:15px;
  background:var(--card); border:1px solid var(--alert);
  color:var(--ink); font-size:14px; font-weight:500;
  box-shadow:0 8px 30px rgba(0,0,0,.18);
}
.toast.done { border-color:var(--verified); }

.loading, .empty { color:var(--light); padding:44px 0; text-align:center; }

/* ── Avatars ────────────────────────────────────────────────────────────── */

.avatar {
  width:40px; height:40px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:var(--card-alt); color:var(--muted);
  font-weight:600; font-size:14px; object-fit:cover;
}