/*
 * styles.css — global styles + theme tokens for "Follow Public Lands"
 * The per-element layout styling lives inline in index.html / app.js so it
 * stays a faithful, pixel-for-pixel port of the original design. This file
 * holds the things inline styles cannot express: fonts, keyframes, the design
 * tokens (CSS custom properties), and :hover states.
 */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  background: #DEDBCE;
  font-family: 'Libre Franklin', system-ui, sans-serif;
}
a {
  color: #2F5D33;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a:hover { color: #8A3320; }

/* Material Symbols icon font helper */
.ms {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 0; height: 0; }

/* ---- design tokens (M3-style palette from the prototype) ---- */
:root {
  --desk: #DEDBCE;
  --surface: #F5F3EB;
  --surf-low: #EFEDE2;
  --surf: #EAE7DB;
  --surf-high: #E4E1D3;
  --on: #1B1C16;
  --on-var: #474A3B;
  --outline: #787A6B;
  --outline-v: #C8C9B6;
  --primary: #2F5D33;
  --on-primary: #FFFFFF;
  --primary-c: #B9E4B6;
  --on-primary-c: #0A2109;
  --secondary: #7A5F2E;
  --secondary-c: #F1E1B6;
  --on-secondary-c: #271900;
  --tertiary: #8A3320;
  --on-tertiary: #FFFFFF;
  --tertiary-c: #F3D3C7;
  --on-tertiary-c: #380B02;
  --sage: #CFE0D3;
  --on-sage: #123524;
  --rust-c: #F1D3C8;
  --on-rust: #7A2E1E;
  --hl: #F7DFA6;
  --money: #B65A2C;
  --people: #5A4FB0;
  --land: #2F5D33;
  --profit: #8A3320;

  /* section accents — muted to match the earthy palette */
  --blue: #35597F;
  --blue-c: #C9DCF0;
  --on-blue-c: #0B1F38;
  --purple: #5A4FB0;
  --purple-c: #DCD5F2;
  --on-purple-c: #1B1049;
}

/* ---- animations ---- */
@keyframes omSheet  { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes omScrim  { from { opacity: 0; } to { opacity: 1; } }
@keyframes omBranch { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes omPop    { from { opacity: 0; transform: scale(.96) translateY(6px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes omSpin   { to { transform: rotate(360deg); } }

/* ---- hover states (replacing the prototype's style-hover attribute) ---- */
.hv-surf-bg:hover   { background: var(--surf); }
.hv-explore:hover   { background: var(--surf); border-color: var(--outline); }
.hv-bright96:hover  { filter: brightness(.96); }
.hv-bright105:hover { filter: brightness(1.05); }
.hv-branch:hover    { border-color: var(--outline); background: var(--surf-high); }
.hv-outline:hover   { border-color: var(--outline); }
.hv-lift:hover      { transform: translateY(-2px) !important; }
.hv-srclink:hover   { border-color: var(--outline); background: var(--surf); }

/* typing indicator dots in the chat */
.typing-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--on-var); opacity: .5;
  animation: omBlink 1s infinite;
}
.typing-dot:nth-child(2) { animation-delay: .2s; }
.typing-dot:nth-child(3) { animation-delay: .4s; }
@keyframes omBlink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: .8; } }

/* small spinner for the send button while awaiting a reply */
.spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  animation: omSpin .7s linear infinite;
}