/* base.css
   Base: color variables, page reset, typography, shared buttons and form controls.
*/

/* The look follows the MMM Institute "Evergreen" design (mmminstitute.org, Version A): a spruce-black
   field, sage line art, one marigold for actions, jade for "you", square cards with rounded controls
   (css/controls.css), Instrument Sans text and the Newsreader serif for headlines and big numbers.
   The public pages use the same tokens in css/mmm-site.css. Change a value here and it updates
   everywhere it is used (see DESIGN_GUIDE.md). */
@font-face{font-family:"Newsreader";src:url("../assets/mmm/fonts/newsreader.woff2") format("woff2");font-weight:200 800;font-display:block}
@font-face{font-family:"Instrument Sans";src:url("../assets/mmm/fonts/instrument-sans.woff2") format("woff2");font-weight:100 900;font-display:swap}
:root{
  --ink:#0f1a17;          /* spruce black: page background */
  --panel:#15231f;        /* raised spruce: dark cards */
  --panel-raised:#24362f; /* hover and selected on dark */
  --panel-line:rgba(163,194,180,.26); /* borders on dark cards */
  --paper:#f1f3ee;        /* paper: light backgrounds, text on dark */
  --paper-line:#d6ddd8;   /* borders on light cards */
  --ink-on-paper:#0f1a17; /* text on light backgrounds */
  --signal:#a3c2b4;       /* sage: line art, links and focus on dark */
  --signal-on-paper:#1d6e55; /* links on light backgrounds */
  --ember:#f2b33d;        /* marigold: actions (buttons) */
  --ember-hover:#ffc966;
  --ember-edge:#8a5e0e;   /* deeper gold edge and focus ring on light backgrounds */
  --ember-ink:#0f1a17;    /* text on marigold */
  --you:#1d6e55;          /* jade: "you" on light backgrounds */
  --you-on-dark:#86d4b4;
  --muted:#b3bfb8;        /* secondary text on dark */
  --paper-muted:#66756e;  /* secondary text on light */
  --trajectory-bg:#f1f3ee; /* dashboard background (reports sit on light) */
  --site-font:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display-font:"Newsreader", "Iowan Old Style", Georgia, serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
html{scroll-padding-top:env(safe-area-inset-top,0px);}
*{box-sizing:border-box;}
html,body{height:100%;margin:0;}
body{
  background:#0f1a17;
  color:var(--paper);
  font-family:var(--site-font);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.expanded-dashboard{background:var(--trajectory-bg);}
h1,h2,h3{font-family:var(--site-font);font-weight:600;margin:0;letter-spacing:-.012em;}
p{margin:0;line-height:1.55;}
a{color:var(--signal);}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;}
#app{position:relative;min-height:100vh;}
.screen{
  display:none;
  min-height:100vh;
  padding:64px 24px 48px;
  max-width:640px;
  margin:0 auto;
}
.screen.active{display:flex;flex-direction:column;gap:28px;}
#screen-contribute{
  max-width:none;
  width:100%;
  padding:0;
  margin:0;
  background:#0f1a17;
}
#screen-contribute.expanded-mode{background:var(--trajectory-bg);}
#screen-contribute.active{display:block;}
.mark{display:none;}
/* invisible to people, present in the DOM for bots that auto-fill every field */
.hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;opacity:0;overflow:hidden;}