/* ==========================
   MayaBahree.com – Light theme only
   ========================== */

:root {
  color-scheme: light; /* tell browsers we only support light */
  --bg: #fafafa;
  --text: #111;
  --card-bg: #fff;
  --card-border: #eaeaea;
  --accent: #6b8afd; /* subtle indigo */
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  margin: 0;
}

main {
  max-width: 760px;
  margin: 0 auto;
  padding: 2rem 1.25rem 2.5rem;
}

h2 { margin: 0 0 .5rem; font-weight: 700; letter-spacing: .2px; }
p  { margin: 0 0 1rem; }

/* ----- Cards ----- */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: .9rem;
  padding: 1rem 1.1rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.03);
}

/* ASCII card */
.ascii-card { margin-top: 1rem; }

.ascii {
  /* preserve spacing and use a robust monospace stack for unicode blocks */
  white-space: pre;
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono",
    "DejaVu Sans Mono", "Noto Sans Mono", monospace;
  font-size: 14px;                 /* JS will shrink if needed */
  line-height: 1.15;
  margin: 0;

  /* fit/scroll behavior for big art */
  max-height: 65vh;                /* tall art scrolls vertically */
  overflow: auto;                  /* avoid horizontal scroll when JS resizes */
  -webkit-overflow-scrolling: touch;
}

/* ----- Panda fact (boxed style) ----- */
.fact-card { margin-top: 1rem; }
.fact-card.is-boxed {
  padding: 0;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: .9rem;
  box-shadow: 0 6px 16px rgba(0,0,0,.05);
  overflow: hidden;                /* keep rounded corners clean */
}
.fact-card .fact-title {
  font-weight: 600;
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--card-border);
  background: #fbfcff;
  position: relative;
}
.fact-card .fact-title::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--accent);
}
.fact-card .fact-body {
  padding: .9rem 1rem 1rem;
  font-size: 14px;
}

/* ----- Actions / button ----- */
.actions {
  display: flex;
  justify-content: flex-end;
  margin-top: .75rem;
}
.btn {
  padding: .6rem 1rem;
  border-radius: .6rem;
  border: 1px solid #dcdcdc;
  background: #fff;
  cursor: pointer;
  transition: transform .02s ease-in-out, box-shadow .12s ease, border-color .12s ease;
}
.btn:hover   { box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.btn:active  { transform: translateY(1px); }
.btn:disabled{ opacity: .6; cursor: progress; }
.btn-quiet   { font-size: 12px; padding: .4rem .75rem; border-color: #e2e2e2; }

/* ----- Footer ----- */
.site-footer {
  max-width: 760px;
  margin: 2rem auto 2.5rem;
  padding: .75rem 1.25rem 0;
  border-top: 1px solid #e9e9e9;
}
.site-footer small { font-size: 12px; opacity: .75; }

/* ----- Mobile tweaks ----- */
.ascii { font-size: clamp(11px, 2.8vw, 14px); }  /* gentle scale on small screens */

@media (max-width: 480px) {
  main { padding: 1.25rem 1rem 2rem; }
  .actions { margin-top: .6rem; }
  .btn { min-height: 44px; }                     /* comfy tap target */
  .btn-quiet { width: 100%; text-align: center; }/* full-width on phones */
}