/* Rally Outside's website: the Mist look on the app's cream. Jost for the few big words, Public Sans to read, Plex Mono for dates */
:root {
  --paper: #F6F3EC;
  --card: #FBF9F4;
  --ink: #17221D;
  --ink2: #5E6B64;
  --line: #E2DDD2;
  --moss: #3E5B3A;
  --poppy: #C9502A;
  --display: 'Jost', 'Futura', 'Century Gothic', 'Public Sans', sans-serif;
  --sans: 'Public Sans', -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.6 var(--sans); }
.page { max-width: 640px; margin: 0 auto; padding-block: 48px 64px; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); display: flex; flex-direction: column; gap: 28px; }
.mark { font: 400 15px/1 var(--display); letter-spacing: .5em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
h1 { font: 300 30px/1.25 var(--display); letter-spacing: .14em; text-transform: uppercase; margin: 0; text-wrap: balance; }
h2 { font: 600 17px/1.4 var(--sans); margin: 8px 0 0; }
p, li { margin: 0; }
section { display: flex; flex-direction: column; gap: 10px; }
ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
a { color: var(--ink); }
.quiet { color: var(--ink2); }
.date { font: 400 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; width: 100%; }
footer { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--ink2); }
footer a { color: var(--ink2); }

/* the home page */
.hero { display: flex; flex-direction: column; gap: 14px; padding-top: 18vh; }
.hero h1 { font-size: 40px; }
.tag { font: 400 13px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--moss); }

/* the back by page */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 16px; }
label.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ink2); }
input[type=tel] { font: 17px/1.3 var(--sans); padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); width: 100%; }
input[type=tel]:focus-visible, button:focus-visible, .agree input:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
.agree { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; }
.agree input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--ink); }
.small { font-size: 13px; color: var(--ink2); }
.buttons { display: flex; gap: 10px; flex-wrap: wrap; }
button { font: 600 16px/1 var(--sans); height: 48px; padding: 0 22px; border-radius: 24px; cursor: pointer; border: 1px solid var(--line); background: #fff; color: var(--ink); flex: 1 1 140px; }
button.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
button:disabled { opacity: .4; cursor: default; }
.note { font-size: 15px; }
.err { color: var(--poppy); font-size: 14px; }
.example { font: 500 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--poppy); }

/* the plan page a link opens */
.ptop { display: flex; flex-direction: column; gap: 10px; }
.from { font: 500 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); overflow-wrap: anywhere; }
.ptop h1, .pnote, #pname, #paddr, .pline p { overflow-wrap: anywhere; }
.when { font: 400 14px/1.5 var(--mono); }
.nw { white-space: nowrap; }
.plan { display: flex; flex-direction: column; gap: 28px; }
.pline, .prow { gap: 4px; }
.padv { font: 500 13px/1.45 var(--mono); color: var(--poppy); }
.lpage { font: 500 15px/1.45 var(--mono); }
.lpage.off { color: var(--poppy); }
.lextra { font-size: 14px; color: var(--ink2); }
.lsrc { font-size: 12px; color: var(--ink2); }
h2.label { font: 400 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); margin: 0 0 2px; }
.maps { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 15px; margin-top: 4px; }
.pnote { white-space: pre-line; }
ul.going { list-style: none; padding: 0; flex-direction: row; flex-wrap: wrap; gap: 10px 18px; }
.going li { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.av { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; font: 600 12px/1 var(--sans); color: #fff; background: var(--moss); }
.av.c1 { background: #3F7F86; }
.av.c2 { background: #B59A5A; }
.av.c3 { background: #22372B; }
.av.c4 { background: #8C5A55; }
.av.c5 { background: #5E6B64; }
input[type=text] { font: 17px/1.3 var(--sans); padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); width: 100%; }
input[type=text]:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
.strong { font-weight: 600; }
button.link { flex: none; align-self: flex-start; height: auto; padding: 4px 0; border: 0; border-radius: 0; background: none; font: 400 14px/1.4 var(--sans); color: var(--ink2); text-decoration: underline; text-underline-offset: 3px; }

/* the page an add link opens: Open in Rally is a link drawn as the ink button */
a.button { display: flex; align-items: center; justify-content: center; font: 600 16px/1 var(--sans); height: 48px; padding: 0 22px; border-radius: 24px; border: 1px solid var(--line); background: #fff; color: var(--ink); text-decoration: none; }
a.button.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
a.button:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
/* a trip still voting: the ranges, one a line, in the mono like dates elsewhere (Oct 30) */
ul.tripvote { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 6px; font: 500 14px/1.4 var(--mono); }