/* Camp Compass variables for this site. Taken from this site's own
   stylesheet: the network shares no tokens, and assuming otherwise is
   how nine unstyled declarations shipped earlier. */
/* On :root, not on .camp-compass, so components outside the tool block can use
   them too. Scoping them narrowly made the standalone page's header resolve
   var(--cc-dark) to nothing and render white on cream. */
/* Every token carries a fallback. The line above says the network shares no
   tokens, and then this block assumed six of them anyway. Five sites do not
   define --sunset, so background: var(--cc-accent) resolved to nothing and the
   primary call to action rendered white text on a transparent background:
   invisible, on the one button the whole tool depends on.

   A site that defines its own token still wins. The fallback only fills the
   gap, so this cannot regress the sites that were already correct. */
:root {
  --cc-accent: var(--sunset, #e26d3a);
  --cc-dark: var(--deep, #0f0b07);
  --cc-warm: var(--ember, #d4552a);
  --cc-paper: var(--white, #ffffff);
  --cc-cream: var(--cream, #f3ead7);
  --cc-line: var(--rule, rgba(29, 42, 48, .18));
  --cc-accent-strong: #b8451d;
  --cc-display: Georgia, serif;
}

/* Camp Compass
 * ============
 * One stylesheet, nine sites. The network shares no design tokens, no button
 * classes and no type scale, so this file inherits nothing: it declares its own
 * buttons, its own spacing and its own type, and reads six variables that each
 * site sets in the block above this comment. Porting a change means editing
 * this file once, not nine times.
 *
 * Variables expected on .camp-compass and .cc-promo:
 *   --cc-accent  the site's action colour
 *   --cc-dark    the dark panel background
 *   --cc-warm    a warm label colour that reads on --cc-dark
 *   --cc-paper   card background on light ground
 *   --cc-cream   page background, used for hover states
 *   --cc-line    hairline rule
 *   --cc-serif   display face for the big numerals (optional)
 */

.camp-compass,
.cc-promo {
  --cc-serif: var(--cc-display, Georgia, "Times New Roman", serif);
  max-width: 1320px;
  margin: 0 auto;
  padding: 70px 32px;
  box-sizing: border-box;
}

.camp-compass *,
.cc-promo * { box-sizing: border-box; }

/* Anchor target has to clear whatever sticky header the host site uses. */
.camp-compass { scroll-margin-top: 96px; }

.cc-head { margin-bottom: 26px; }

.cc-eyebrow {
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 700;
  font-size: .72rem;
  margin: 0 0 14px;
}

/* The claim, and it is accurate about what the tool does. It is never rendered
   alone: the paragraph beneath it says the page has to be loaded while there
   are still bars. An overstated badge is worse than no badge, because somebody
   would ride out on it. */
.cc-badge {
  display: inline-block;
  background: var(--cc-accent);
  color: #fff;
  padding: .35rem .6rem;
  margin-right: .55rem;
  letter-spacing: .12em;
}

.cc-title {
  font-family: var(--cc-serif);
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  line-height: 1.02;
  font-weight: 400;
  margin: 0 0 14px;
}

.cc-lede { max-width: 68ch; margin: 0; }

/* The three-step habit is the whole point, so it is an ordered list above the
   tool rather than a caption beside it. */
.cc-steps {
  counter-reset: cc;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 26px 0;
  padding: 0;
}

.cc-steps li {
  counter-increment: cc;
  padding-left: 48px;
  position: relative;
  font-size: .95rem;
}

.cc-steps li::before {
  content: counter(cc);
  position: absolute;
  left: 0;
  top: -2px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--cc-accent);
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
}

.cc-intro {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--cc-line);
  border: 1px solid var(--cc-line);
  margin-bottom: 26px;
}

.cc-intro p {
  background: var(--cc-paper);
  margin: 0;
  padding: 24px 26px;
  font-size: .95rem;
  line-height: 1.55;
}

.cc-tool { background: var(--cc-dark); color: #fff; padding: 30px; }

.cc-name { margin-bottom: 18px; display: grid; gap: 8px; max-width: 26rem; }

.cc-name label {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 700;
  font-size: .66rem;
  color: var(--cc-warm);
}

.cc-name input {
  font-family: var(--cc-serif);
  font-size: 1.15rem;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .07);
  color: #fff;
  width: 100%;
}

.cc-name input:focus-visible { outline: 3px solid var(--cc-accent); outline-offset: 1px; }

.cc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }

/* Own buttons on purpose. Four sites in this network use four different button
   systems, and inheriting any of them is how a port breaks quietly. */
.cc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .8rem 1.2rem;
  border: 1px solid transparent;
  background: transparent;
  color: #fff;
  /* Longhands, not the `font` shorthand. `font: 700 .75rem/1 inherit` is
     invalid, because the family slot cannot take `inherit`, and the browser
     drops the whole declaration: buttons silently render at the UA default
     weight and size. */
  font-family: inherit;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-decoration: none;
  cursor: pointer;
}

/* Deliberately not var(--cc-accent). That resolves to each site's own orange,
   and white on #e26d3a measures 3.24 against a 4.5 minimum. This is the one
   button the tool depends on, so it carries a tone that passes everywhere:
   white on #b8451d is 5.37, and matches the network eyebrow. */
.cc-btn.is-primary { background: var(--cc-accent-strong, #b8451d); color: #fff; }
.cc-btn.is-ghost { border-color: currentColor; }
.cc-btn.is-light { background: #fff; color: var(--cc-dark); }
.cc-btn:hover { filter: brightness(1.08); }
.cc-btn:focus-visible { outline: 3px solid var(--cc-warm); outline-offset: 2px; }

/* Destructive, so it is pushed away from the two buttons people actually want
   and kept visually quieter. */
.cc-clear { margin-left: auto; opacity: .7; font-size: .68rem; }
.cc-clear:hover { opacity: 1; }

.cc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, .2);
  border: 1px solid rgba(255, 255, 255, .2);
}

.cc-cell {
  background: var(--cc-dark);
  padding: 22px 24px;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.cc-cell span {
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 700;
  font-size: .66rem;
  color: var(--cc-warm);
}

.cc-cell strong {
  font-family: var(--cc-serif);
  font-size: 1.55rem;
  line-height: 1.15;
  font-weight: 400;
  word-break: break-word;
}

/* The two answers somebody actually reads when they are turned around. Sized to
   be legible at arm's length, in sun, with sand on the screen. */
#fcDistance, #fcBearing { font-size: 2.4rem; }

.cc-cell small { color: rgba(255, 255, 255, .74); font-size: .76rem; }

/* A pointer, not a compass rose. One direction, nothing to misread. */
.cc-arrow {
  position: absolute;
  right: 20px;
  bottom: 18px;
  width: 46px;
  height: 46px;
  transition: transform .25s ease;
}

.cc-arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cc-accent);
  clip-path: polygon(50% 0, 100% 100%, 50% 78%, 0 100%);
}

.camp-compass:not(.has-camp) .cc-arrow,
.camp-compass:not(.has-fix) .cc-arrow { display: none; }

.cc-status {
  margin: 20px 0 0;
  color: rgba(255, 255, 255, .86);
  font-size: .88rem;
  min-height: 2.6em;
}

#fcDrive { margin-top: 18px; }

/* Given its own weight, because the failure mode of a tool like this is
   somebody trusting it instead of carrying real equipment. */
.cc-warning {
  margin-top: 26px;
  padding: 22px 26px;
  background: var(--cc-cream);
  border-left: 5px solid var(--cc-accent);
  font-size: .92rem;
}

.camp-compass.is-unavailable .cc-actions,
.camp-compass.is-unavailable .cc-grid,
.camp-compass.is-unavailable .cc-name { display: none; }

/* ---- homepage promotion ------------------------------------------------- */

.cc-promo { display: grid; grid-template-columns: 1.6fr 1fr; gap: 44px; align-items: center; }

.cc-promo h2 {
  font-family: var(--cc-serif);
  font-size: clamp(2.1rem, 3.4vw, 3.2rem);
  line-height: 1.05;
  font-weight: 400;
  margin: 10px 0 16px;
}

.cc-promo h2 em { font-style: italic; color: var(--cc-accent); }
.cc-promo > div > p:not(.cc-eyebrow) { max-width: 62ch; margin: 0 0 24px; }

.cc-promo-steps {
  counter-reset: p;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--cc-line);
  border: 1px solid var(--cc-line);
}

.cc-promo-steps li {
  counter-increment: p;
  background: var(--cc-paper);
  padding: 20px 22px 20px 62px;
  position: relative;
  font-size: .95rem;
}

.cc-promo-steps li::before {
  content: counter(p);
  position: absolute;
  left: 22px;
  top: 18px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  background: var(--cc-accent);
  color: #fff;
  font-weight: 700;
  font-size: .8rem;
}

@media (max-width: 1000px) {
  .cc-intro, .cc-steps { grid-template-columns: 1fr; }
  .cc-steps { gap: 12px; }
  .cc-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .cc-promo { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 760px) {
  .camp-compass, .cc-promo { padding: 45px 20px; }
  .cc-tool { padding: 22px 18px; }
  .cc-grid { grid-template-columns: 1fr; }
  .cc-actions .cc-btn { flex: 1 1 100%; }
  .cc-clear { margin-left: 0; }
  #fcDistance, #fcBearing { font-size: 2.9rem; }
}

/* Sharing camp is meaningless before a spot exists, so the button stays out of
   the way until there is one. */
.camp-compass:not(.has-camp) .cc-share-camp { display: none; }

/* Link into the hub explainer. Real internal linking across the network, in
   the section itself rather than buried in a footer. */
.cc-more { margin: 22px 0 0; }
.cc-more a { font-weight: 700; font-size: .85rem; color: var(--cc-accent); text-underline-offset: 6px; }

/* The Camp Compass mark. Sits beside the heading on the light page ground, and
   deliberately never on the dark tool panel, where its navy ring would vanish.
   It keeps its own brand colours on every site: the tool chrome adopts local
   tokens, a brand mark should not. */
.cc-has-mark {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 20px;
  align-items: start;
}

.cc-mark { grid-row: 1 / span 3; width: 72px; height: 72px; }

@media (max-width: 620px) {
  .cc-has-mark { grid-template-columns: 1fr; row-gap: 12px; }
  .cc-mark { grid-row: auto; width: 56px; height: 56px; }
}

/* The three functions, stated once, above the teaching steps. Somebody
   scanning the steps would otherwise never learn that sharing exists. */
.cc-does {
  margin: 0 0 26px;
  padding: 18px 22px;
  background: var(--cc-paper);
  border-left: 5px solid var(--cc-accent);
  max-width: 88ch;
  font-size: .96rem;
}

/* ---- Standalone offline page -------------------------------------------
   This page is built to be saved to a phone home screen and opened with no
   signal. It carries no site navigation on purpose: once cached, every nav
   link would be a dead end, so the only link out is labelled as needing a
   connection. */
.cc-standalone-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding: 18px max(20px, 4vw);
  background: var(--cc-dark);
  color: #fff;
}

.cc-standalone-brand { font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .72rem; opacity: .75; }
.cc-standalone-tag { font-family: var(--cc-serif); font-size: 1.15rem; }

/* The instruction that decides whether any of this works. It is the first
   thing on the page because doing it later is the failure we are preventing. */
.cc-savefirst {
  max-width: 1320px;
  margin: 0 auto;
  padding: 26px max(20px, 4vw) 0;
}

/* .cc-savefirst p used to paint every paragraph orange. The block now holds
   two centred warning lines and a choice box, which style themselves. */

.cc-savefirst-how { background: var(--cc-paper) !important; color: inherit !important; font-size: .9rem !important; }

.cc-standalone-foot {
  max-width: 1320px;
  margin: 0 auto;
  padding: 10px max(20px, 4vw) 50px;
  font-size: .9rem;
}

.cc-needs-signal {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  opacity: .7;
  white-space: nowrap;
}

/* Points at the offline page from the online one. This is the whole discovery
   path: people have to be told while they still have signal, because after
   that it is too late to load anything. */
.cc-saveto {
  margin: 0 0 22px;
  padding: 16px 20px;
  background: var(--cc-dark);
  color: #fff;
  font-size: .95rem;
}
.cc-saveto a { color: #fff; font-weight: 700; text-underline-offset: 5px; }

.cc-warn {
  background: #b3261e !important;
  color: #fff !important;
  border-left: 8px solid #7a1a14;
  font-size: 1.02rem !important;
}

.cc-warn strong { display: block; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }

/* Android install button. One tap beats a menu hunt, and this is the step the
   whole tool depends on being completed. */
.cc-install-wrap { background: var(--cc-paper) !important; display: grid; gap: 10px; justify-items: start; }
.cc-install { font-size: .82rem !important; }
.cc-install-note { font-size: .85rem; opacity: .8; }

/* The homepage band now carries the same warning as the tool page, because the
   band is where most people meet Camp Compass first and the instruction only
   works if it reaches them before they travel. */
.cc-promo-warn {
  border-left: 5px solid var(--cc-accent);
  padding: 12px 16px;
  background: var(--cc-paper);
  font-size: .95rem;
  margin: 0 0 22px !important;
}
.cc-promo-warn strong { display: block; }

/* The install paragraph sits inside .cc-savefirst, which sets white text for
   the red warning box. On its paper background that measured 1.13 contrast.
   Set explicitly rather than relying on inheritance. */
.cc-install-wrap, .cc-install-note { color: var(--cc-ink, #1a1410) !important; }
.cc-install-note { opacity: .85; }

/* Belt and braces on the header, so a missing token can never make it vanish
   again. */
.cc-standalone-head { background: var(--cc-dark, #0f0b07); color: #fff; }

/* The header carries the mark, not just words: this page is opened from a home
   screen icon and should look like the thing that was tapped. */
.cc-standalone-head { align-items: center; gap: 16px; }
.cc-standalone-logo { width: min(240px, 55vw); height: auto; }
.cc-standalone-brand { margin-left: auto; }
@media (max-width: 520px) {
  .cc-standalone-head { gap: 8px; }
  .cc-standalone-brand { margin-left: 0; width: 100%; }
}

/* On the standalone page the tool leads, so it needs a little air above it and
   the explanation below reads as reference rather than preamble. */
.cc-standalone-body .camp-compass { padding-top: 8px; }

/* Points a first-time reader at the instructions, which now sit below the tool.
   Quiet on purpose: somebody who already knows how it works is in a hurry. */
.cc-seebelow {
  margin: 18px 0 26px;
  font-size: .9rem;
  opacity: .85;
}
.cc-seebelow a { font-weight: 700; text-underline-offset: 4px; }

/* Launched from the icon: no banner, no preamble, the tool sits right under
   the header. Everything explanatory is still on the page, below. */
.cc-is-installed .camp-compass { padding-top: 22px; }

/* The promise now sits inside the dark tool panel, so it needs a colour that
   holds up on near black. The accent alone measures under 4.5 there, so the
   text is cream and the accent carries the rule instead. */
.cc-tool .cc-why {
  margin: 22px 0 10px;
  padding: 12px 0 0;
  border-top: 3px solid var(--cc-accent);
  color: #fff;
  font-weight: 700;
  font-size: 1.02rem;
  background: none;
}

/* iPhone instructions. Given real weight because on iOS this is not a shortcut,
   it is the only way the page survives a dead zone: Safari discards the cache
   for anything left as a browser tab. */
.cc-ios {
  background: var(--cc-paper);
  border-left: 8px solid var(--cc-accent);
  padding: 18px 20px;
  margin: 0 0 22px;
}

.cc-ios-lead { margin: 0 0 12px; font-size: 1rem; }
.cc-ios-lead strong { display: block; color: #b3261e; }

.cc-ios-steps { margin: 0; padding-left: 22px; display: grid; gap: 9px; font-size: .97rem; }
.cc-ios-steps li { padding-left: 4px; }
.cc-ios-hint { opacity: .75; }

/* The real iOS share symbol, drawn inline. The Apple private-use character
   renders as nothing on most devices, which left the sentence saying "tap the
   Share button" with a blank where the icon should be. */
.cc-share-glyph {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.18em;
  color: var(--cc-accent);
}

.cc-ios-foot { margin: 12px 0 0; font-weight: 700; font-size: .95rem; }

/* Pick a phone, see one set of instructions. Mixed platform steps on one page
   was the confusion Mike flagged, and Android already works, so the iPhone
   reader should never have to filter Android wording out. */
.cc-choose-lead { margin: 22px 0 10px; font-weight: 700; }

.cc-choose { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }

.cc-choose-btn {
  border-color: var(--cc-accent);
  color: var(--cc-accent);
  background: transparent;
  flex: 1 1 auto;
  min-width: 46%;
}

.cc-choose-btn.is-on {
  background: var(--cc-accent);
  color: #fff;
}

.cc-choose-btn:focus-visible { outline: 3px solid var(--cc-accent); outline-offset: 2px; }

.cc-panel { margin: 0 0 4px; }

@media (max-width: 480px) {
  .cc-choose-btn { min-width: 100%; }
}

/* The top of the page asks one question. Warning, then a choice, then the tool.
   Everything that explains rather than instructs sits below the widget. */
.cc-warn-top {
  margin: 4px 0 2px;
  text-align: center;
  color: #b3261e;
  font-weight: 800;
  font-size: clamp(1.05rem, 4.4vw, 1.35rem);
  line-height: 1.25;
  background: none;
  padding: 0;
  border: 0;
}

.cc-warn-sub {
  margin: 0 0 18px;
  text-align: center;
  color: #b3261e;
  font-size: .92rem;
  font-weight: 600;
  background: none;
  padding: 0;
}

.cc-choose-box {
  border: 2px solid var(--cc-line);
  background: var(--cc-paper);
  padding: 18px 16px;
  margin: 0 0 6px;
}

.cc-choose-lead {
  margin: 0 0 14px;
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
}

.cc-choose {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.cc-choose-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 132px;
  padding: 16px 18px;
  border: 2px solid var(--cc-accent);
  background: transparent;
  color: var(--cc-accent);
  font: 700 .82rem/1 inherit;
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
}

.cc-choose-btn .cc-dev { width: 22px; height: 36px; }
.cc-choose-btn.is-on { background: var(--cc-accent); color: #fff; }
.cc-choose-btn:focus-visible { outline: 3px solid var(--cc-accent); outline-offset: 2px; }

/* The setup steps now live below the widget, revealed by the buttons above. */
.cc-setup-panels { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
.cc-setup-panels:empty { display: none; }

@media (max-width: 760px) {
  .cc-setup-panels { padding: 0 20px; }
  .cc-choose-btn { flex: 1 1 40%; min-width: 0; }
}

/* The manual Android steps are a fallback, not the main path, so they stay
   folded away unless the install prompt never arrives. */
.cc-fallback {
  margin: 16px 0 0;
  font-size: .92rem;
}

.cc-fallback summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--cc-accent);
  padding: 6px 0;
}

.cc-fallback[hidden] { display: none; }